diff --git a/torchci/components/benchmark/compilers/CompilerGraphGroup.tsx b/torchci/components/benchmark/compilers/CompilerGraphGroup.tsx
index 061f3f7453..6ee35b36e9 100644
--- a/torchci/components/benchmark/compilers/CompilerGraphGroup.tsx
+++ b/torchci/components/benchmark/compilers/CompilerGraphGroup.tsx
@@ -16,14 +16,18 @@ export default function CompilerGraphGroup({
   suiteConfig,
   queryParams,
   granularity,
+  lDeviceName,
   lBranchAndCommit,
+  rDeviceName,
   rBranchAndCommit,
 }: {
   dashboard: string;
   suiteConfig: SuiteConfig;
   queryParams: { [key: string]: any };
   granularity: Granularity;
+  lDeviceName: string;
   lBranchAndCommit: BranchAndCommit;
+  rDeviceName: string;
   rBranchAndCommit: BranchAndCommit;
 }) {
   // TODO (huydhn): Remove this once TorchInductor dashboard is migrated to the
@@ -44,6 +48,7 @@ export default function CompilerGraphGroup({
             granularity={granularity}
             suite={suiteConfig.id}
             branch={lBranchAndCommit.branch}
+            deviceName={lDeviceName}
             lCommit={lBranchAndCommit.commit}
             rCommit={rBranchAndCommit.commit}
           />
diff --git a/torchci/components/benchmark/compilers/ModelPanel.tsx b/torchci/components/benchmark/compilers/ModelPanel.tsx
index 6f10d25691..8f83e88fef 100644
--- a/torchci/components/benchmark/compilers/ModelPanel.tsx
+++ b/torchci/components/benchmark/compilers/ModelPanel.tsx
@@ -39,10 +39,11 @@ export function ModelPanel({
   suite,
   mode,
   dtype,
-  deviceName,
   compiler,
   model,
+  lDeviceName,
   lPerfData,
+  rDeviceName,
   rPerfData,
 }: {
   dashboard: string;
@@ -52,10 +53,11 @@ export function ModelPanel({
   suite: string;
   mode: string;
   dtype: string;
-  deviceName: string;
   compiler: string;
   model: string;
+  lDeviceName: string;
   lPerfData: BranchAndCommitPerfData;
+  rDeviceName: string;
   rPerfData: BranchAndCommitPerfData;
 }) {
   const lBranch = lPerfData.branch;
@@ -181,8 +183,10 @@ export function ModelPanel({
                     : undefined;
 
                 const encodedName = encodeURIComponent(name);
-                const url = `/benchmark/${suite}/${compiler}?dashboard=${dashboard}&startTime=${startTime}&stopTime=${stopTime}&granularity=${granularity}&mode=${mode}&model=${encodedName}&dtype=${dtype}&deviceName=${encodeURIComponent(
-                  deviceName
+                const url = `/benchmark/${suite}/${compiler}?dashboard=${dashboard}&startTime=${startTime}&stopTime=${stopTime}&granularity=${granularity}&mode=${mode}&model=${encodedName}&dtype=${dtype}&lDeviceName=${encodeURIComponent(
+                  lDeviceName
+                )}&rDeviceName=${encodeURIComponent(
+                  rDeviceName
                 )}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}`;
 
                 if (lLog === undefined) {
diff --git a/torchci/components/benchmark/compilers/SummaryGraphPanel.tsx b/torchci/components/benchmark/compilers/SummaryGraphPanel.tsx
index 5b189b6926..6306471387 100644
--- a/torchci/components/benchmark/compilers/SummaryGraphPanel.tsx
+++ b/torchci/components/benchmark/compilers/SummaryGraphPanel.tsx
@@ -29,6 +29,7 @@ export function GraphPanel({
   granularity,
   suite,
   branch,
+  deviceName,
   lCommit,
   rCommit,
 }: {
@@ -37,6 +38,7 @@ export function GraphPanel({
   granularity: Granularity;
   suite: string;
   branch: string;
+  deviceName: string;
   lCommit: string;
   rCommit: string;
 }) {
@@ -49,6 +51,7 @@ export function GraphPanel({
       granularity={granularity}
       suite={suite}
       branch={branch}
+      deviceName={deviceName}
       lCommit={lCommit}
       rCommit={rCommit}
     />
@@ -61,6 +64,7 @@ function SuiteGraphPanel({
   granularity,
   suite,
   branch,
+  deviceName,
   lCommit,
   rCommit,
 }: {
@@ -69,6 +73,7 @@ function SuiteGraphPanel({
   granularity: Granularity;
   suite: string;
   branch: string;
+  deviceName: string;
   lCommit: string;
   rCommit: string;
 }) {
diff --git a/torchci/components/benchmark/compilers/SummaryPanel.tsx b/torchci/components/benchmark/compilers/SummaryPanel.tsx
index 6cd93eff46..d060419aca 100644
--- a/torchci/components/benchmark/compilers/SummaryPanel.tsx
+++ b/torchci/components/benchmark/compilers/SummaryPanel.tsx
@@ -134,8 +134,9 @@ export function SummaryPanel({
   granularity,
   mode,
   dtype,
-  deviceName,
+  lDeviceName,
   lPerfData,
+  rDeviceName,
   rPerfData,
   all_suites,
 }: {
@@ -145,8 +146,9 @@ export function SummaryPanel({
   granularity: Granularity;
   mode: string;
   dtype: string;
-  deviceName: string;
+  lDeviceName: string;
   lPerfData: BranchAndCommitPerfData;
+  rDeviceName: string;
   rPerfData: BranchAndCommitPerfData;
   all_suites: { [key: string]: string };
 }) {
@@ -244,8 +246,10 @@ export function SummaryPanel({
                     const url = `/benchmark/${suite}/${
                       DISPLAY_NAMES_TO_COMPILER_NAMES[params.row.compiler] ??
                       params.row.compiler
-                    }?dashboard=${dashboard}&startTime=${startTime}&stopTime=${stopTime}&granularity=${granularity}&mode=${mode}&dtype=${dtype}&deviceName=${encodeURIComponent(
-                      deviceName
+                    }?dashboard=${dashboard}&startTime=${startTime}&stopTime=${stopTime}&granularity=${granularity}&mode=${mode}&dtype=${dtype}&lDeviceName=${encodeURIComponent(
+                      lDeviceName
+                    )}&rDeviceName=${encodeURIComponent(
+                      rDeviceName
                     )}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}`;
 
                     const l = extractPercentage(v.l);
@@ -334,8 +338,10 @@ export function SummaryPanel({
                     const url = `/benchmark/${suite}/${
                       DISPLAY_NAMES_TO_COMPILER_NAMES[params.row.compiler] ??
                       params.row.compiler
-                    }?dashboard=${dashboard}&startTime=${startTime}&stopTime=${stopTime}&granularity=${granularity}&mode=${mode}&dtype=${dtype}&deviceName=${encodeURIComponent(
-                      deviceName
+                    }?dashboard=${dashboard}&startTime=${startTime}&stopTime=${stopTime}&granularity=${granularity}&mode=${mode}&dtype=${dtype}&lDeviceName=${encodeURIComponent(
+                      lDeviceName
+                    )}&rDeviceName=${encodeURIComponent(
+                      rDeviceName
                     )}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}`;
 
                     const l = Number(v.l).toFixed(SCALE);
@@ -427,8 +433,10 @@ export function SummaryPanel({
                     const url = `/benchmark/${suite}/${
                       DISPLAY_NAMES_TO_COMPILER_NAMES[params.row.compiler] ??
                       params.row.compiler
-                    }?dashboard=${dashboard}&startTime=${startTime}&stopTime=${stopTime}&granularity=${granularity}&mode=${mode}&dtype=${dtype}&deviceName=${encodeURIComponent(
-                      deviceName
+                    }?dashboard=${dashboard}&startTime=${startTime}&stopTime=${stopTime}&granularity=${granularity}&mode=${mode}&dtype=${dtype}&lDeviceName=${encodeURIComponent(
+                      lDeviceName
+                    )}&rDeviceName=${encodeURIComponent(
+                      rDeviceName
                     )}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}`;
 
                     const l = Number(v.l).toFixed(0);
@@ -516,8 +524,10 @@ export function SummaryPanel({
                     const url = `/benchmark/${suite}/${
                       DISPLAY_NAMES_TO_COMPILER_NAMES[params.row.compiler] ??
                       params.row.compiler
-                    }?dashboard=${dashboard}&startTime=${startTime}&stopTime=${stopTime}&granularity=${granularity}&mode=${mode}&dtype=${dtype}&deviceName=${encodeURIComponent(
-                      deviceName
+                    }?dashboard=${dashboard}&startTime=${startTime}&stopTime=${stopTime}&granularity=${granularity}&mode=${mode}&dtype=${dtype}&lDeviceName=${encodeURIComponent(
+                      lDeviceName
+                    )}&rDeviceName=${encodeURIComponent(
+                      rDeviceName
                     )}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}`;
 
                     const l = Number(v.l).toFixed(SCALE);
diff --git a/torchci/pages/benchmark/[suite]/[compiler]/[[...page]].tsx b/torchci/pages/benchmark/[suite]/[compiler]/[[...page]].tsx
index 2c12755caa..aef63328ec 100644
--- a/torchci/pages/benchmark/[suite]/[compiler]/[[...page]].tsx
+++ b/torchci/pages/benchmark/[suite]/[compiler]/[[...page]].tsx
@@ -48,10 +48,11 @@ function Report({
   suite,
   mode,
   dtype,
-  deviceName,
   compiler,
   model,
+  lDeviceName,
   lBranchAndCommit,
+  rDeviceName,
   rBranchAndCommit,
 }: {
   dashboard: string;
@@ -63,14 +64,16 @@ function Report({
   suite: string;
   mode: string;
   dtype: string;
-  deviceName: string;
   compiler: string;
   model: string;
+  lDeviceName: string;
   lBranchAndCommit: BranchAndCommit;
+  rDeviceName: string;
   rBranchAndCommit: BranchAndCommit;
 }) {
   const queryParamsWithL: { [key: string]: any } = {
     ...queryParams,
+    device: DISPLAY_NAMES_TO_DEVICE_NAMES[lDeviceName],
     branches: [lBranchAndCommit.branch],
     commits: [lBranchAndCommit.commit],
     getJobId: true,
@@ -93,6 +96,7 @@ function Report({
 
   const queryParamsWithR: { [key: string]: any } = {
     ...queryParams,
+    device: DISPLAY_NAMES_TO_DEVICE_NAMES[rDeviceName],
     branches: [rBranchAndCommit.branch],
     commits: [rBranchAndCommit.commit],
     getJobId: true,
@@ -137,7 +141,7 @@ function Report({
         workflowName={
           dashboard === "torchao"
             ? "Torchao nightly workflow (A100)".toLowerCase()
-            : DISPLAY_NAMES_TO_WORKFLOW_NAMES[deviceName]
+            : DISPLAY_NAMES_TO_WORKFLOW_NAMES[lDeviceName]
         }
       >
         <BenchmarkLogs workflowId={lData[0].workflow_id} />
@@ -160,13 +164,14 @@ function Report({
         suite={suite}
         mode={mode}
         dtype={dtype}
-        deviceName={deviceName}
         compiler={compiler}
         model={model}
+        lDeviceName={lDeviceName}
         lPerfData={{
           ...lBranchAndCommit,
           data: lData,
         }}
+        rDeviceName={rDeviceName}
         rPerfData={{
           ...rBranchAndCommit,
           data: rData,
@@ -198,12 +203,13 @@ export default function Page() {
   const [granularity, setGranularity] = useState<Granularity>("hour");
   const [mode, setMode] = useState<string>(DEFAULT_MODE);
   const [dtype, setDType] = useState<string>(MODES[DEFAULT_MODE]);
+  const [lDeviceName, setLDeviceName] = useState<string>(DEFAULT_DEVICE_NAME);
   const [lBranch, setLBranch] = useState<string>(MAIN_BRANCH);
   const [lCommit, setLCommit] = useState<string>("");
+  const [rDeviceName, setRDeviceName] = useState<string>(DEFAULT_DEVICE_NAME);
   const [rBranch, setRBranch] = useState<string>(MAIN_BRANCH);
   const [rCommit, setRCommit] = useState<string>("");
   const [baseUrl, setBaseUrl] = useState<string>("");
-  const [deviceName, setDeviceName] = useState<string>(DEFAULT_DEVICE_NAME);
 
   // Set the dropdown value what is in the param
   useEffect(() => {
@@ -241,9 +247,10 @@ export default function Page() {
       setDType(dtype);
     }
 
-    const deviceName: string = (router.query.deviceName as string) ?? undefined;
-    if (deviceName !== undefined) {
-      setDeviceName(deviceName);
+    const lDeviceName: string =
+      (router.query.lDeviceName as string) ?? undefined;
+    if (lDeviceName !== undefined) {
+      setLDeviceName(lDeviceName);
     }
 
     const lBranch: string = (router.query.lBranch as string) ?? undefined;
@@ -256,6 +263,12 @@ export default function Page() {
       setLCommit(lCommit);
     }
 
+    const rDeviceName: string =
+      (router.query.rDeviceName as string) ?? undefined;
+    if (rDeviceName !== undefined) {
+      setRDeviceName(rDeviceName);
+    }
+
     const rBranch: string = (router.query.rBranch as string) ?? undefined;
     if (rBranch !== undefined) {
       setRBranch(rBranch);
@@ -285,7 +298,7 @@ export default function Page() {
           branches: [],
           commits: [],
           compilers: [compiler],
-          device: DISPLAY_NAMES_TO_DEVICE_NAMES[deviceName],
+          device: DISPLAY_NAMES_TO_DEVICE_NAMES[lDeviceName],
           dtypes: [dtype],
           granularity: granularity,
           mode: mode,
@@ -298,7 +311,7 @@ export default function Page() {
       : {
           commits: [],
           compilers: [compiler],
-          device: DISPLAY_NAMES_TO_DEVICE_NAMES[deviceName],
+          device: DISPLAY_NAMES_TO_DEVICE_NAMES[lDeviceName],
           dtypes: dtype,
           getJobId: false,
           granularity: granularity,
@@ -322,8 +335,10 @@ export default function Page() {
               startTime.toString()
             )}&stopTime=${encodeURIComponent(
               stopTime.toString()
-            )}&granularity=${granularity}&mode=${mode}&dtype=${dtype}&deviceName=${encodeURIComponent(
-              deviceName
+            )}&granularity=${granularity}&mode=${mode}&dtype=${dtype}&lDeviceName=${encodeURIComponent(
+              lDeviceName
+            )}&rDeviceName=${encodeURIComponent(
+              rDeviceName
             )}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}` +
             (model === undefined ? "" : `&model=${model}`)
           }
@@ -360,9 +375,14 @@ export default function Page() {
           dtypes={dashboard === "torchao" ? QUANTIZATIONS : DTYPES}
           label={dashboard === "torchao" ? "Quantization" : "Precision"}
         />
+        <Divider
+          orientation="vertical"
+          flexItem
+          style={{ background: "black" }}
+        />
         <DTypePicker
-          dtype={deviceName}
-          setDType={setDeviceName}
+          dtype={rDeviceName}
+          setDType={setRDeviceName}
           dtypes={Object.keys(DISPLAY_NAMES_TO_DEVICE_NAMES)}
           label={"Device"}
         />
@@ -372,7 +392,10 @@ export default function Page() {
           setBranch={setRBranch}
           commit={rCommit}
           setCommit={setRCommit}
-          queryParams={queryParams}
+          queryParams={{
+            ...queryParams,
+            device: DISPLAY_NAMES_TO_DEVICE_NAMES[rDeviceName],
+          }}
           titlePrefix={"Base"}
           fallbackIndex={-1} // Default to the next to latest in the window
           timeRange={timeRange}
@@ -386,11 +409,20 @@ export default function Page() {
           setBranch={setLBranch}
           commit={lCommit}
           setCommit={setLCommit}
-          queryParams={queryParams}
+          queryParams={{
+            ...queryParams,
+            device: DISPLAY_NAMES_TO_DEVICE_NAMES[lDeviceName],
+          }}
           titlePrefix={"New"}
           fallbackIndex={0} // Default to the latest commit
           timeRange={timeRange}
         />
+        <DTypePicker
+          dtype={lDeviceName}
+          setDType={setLDeviceName}
+          dtypes={Object.keys(DISPLAY_NAMES_TO_DEVICE_NAMES)}
+          label={"Device"}
+        />
       </Stack>
 
       <Grid2 size={{ xs: 12 }}>
@@ -404,10 +436,11 @@ export default function Page() {
           suite={suite}
           mode={mode}
           dtype={dtype}
-          deviceName={deviceName}
           compiler={compiler}
           model={model}
+          lDeviceName={lDeviceName}
           lBranchAndCommit={{ branch: lBranch, commit: lCommit }}
+          rDeviceName={rDeviceName}
           rBranchAndCommit={{ branch: rBranch, commit: rCommit }}
         />
       </Grid2>
diff --git a/torchci/pages/benchmark/compilers.tsx b/torchci/pages/benchmark/compilers.tsx
index e2926b2d44..835cf7b5e6 100644
--- a/torchci/pages/benchmark/compilers.tsx
+++ b/torchci/pages/benchmark/compilers.tsx
@@ -48,8 +48,9 @@ function Report({
   granularity,
   mode,
   dtype,
-  deviceName,
+  lDeviceName,
   lBranchAndCommit,
+  rDeviceName,
   rBranchAndCommit,
 }: {
   queryParams: { [key: string]: any };
@@ -58,13 +59,15 @@ function Report({
   granularity: Granularity;
   mode: string;
   dtype: string;
-  deviceName: string;
+  lDeviceName: string;
   lBranchAndCommit: BranchAndCommit;
+  rDeviceName: string;
   rBranchAndCommit: BranchAndCommit;
 }) {
   const queryName = "compilers_benchmark_performance";
   const queryParamsWithL: { [key: string]: any } = {
     ...queryParams,
+    device: DISPLAY_NAMES_TO_DEVICE_NAMES[lDeviceName],
     branches: [lBranchAndCommit.branch],
     commits: lBranchAndCommit.commit ? [lBranchAndCommit.commit] : [],
   };
@@ -79,6 +82,7 @@ function Report({
 
   const queryParamsWithR: { [key: string]: any } = {
     ...queryParams,
+    device: DISPLAY_NAMES_TO_DEVICE_NAMES[rDeviceName],
     branches: [rBranchAndCommit.branch],
     commits: rBranchAndCommit.commit ? [rBranchAndCommit.commit] : [],
   };
@@ -116,7 +120,7 @@ function Report({
               : undefined,
         }}
         workflowName={
-          DISPLAY_NAMES_TO_WORKFLOW_NAMES[deviceName] ??
+          DISPLAY_NAMES_TO_WORKFLOW_NAMES[lDeviceName] ??
           "inductor-a100-perf-nightly"
         }
       >
@@ -129,11 +133,12 @@ function Report({
         granularity={granularity}
         mode={mode}
         dtype={dtype}
-        deviceName={deviceName}
+        lDeviceName={lDeviceName}
         lPerfData={{
           ...lBranchAndCommit,
           data: lData,
         }}
+        rDeviceName={rDeviceName}
         rPerfData={{
           ...rBranchAndCommit,
           data: rData,
@@ -149,7 +154,9 @@ function Report({
                 suiteConfig={suiteConfig}
                 queryParams={queryParams}
                 granularity={granularity}
+                lDeviceName={lDeviceName}
                 lBranchAndCommit={lBranchAndCommit}
+                rDeviceName={rDeviceName}
                 rBranchAndCommit={rBranchAndCommit}
               />
             </div>
@@ -174,10 +181,11 @@ export default function Page() {
   const [dtype, setDType] = useState<string>(MODES[DEFAULT_MODE]);
   const [lBranch, setLBranch] = useState<string>(MAIN_BRANCH);
   const [lCommit, setLCommit] = useState<string>("");
+  const [lDeviceName, setLDeviceName] = useState<string>(DEFAULT_DEVICE_NAME);
   const [rBranch, setRBranch] = useState<string>(MAIN_BRANCH);
   const [rCommit, setRCommit] = useState<string>("");
+  const [rDeviceName, setRDeviceName] = useState<string>(DEFAULT_DEVICE_NAME);
   const [baseUrl, setBaseUrl] = useState<string>("");
-  const [deviceName, setDeviceName] = useState<string>(DEFAULT_DEVICE_NAME);
   const [highlightKey, setHighlightKey] = useState<string>(
     DEFAULT_HIGHLIGHT_KEY
   );
@@ -220,9 +228,10 @@ export default function Page() {
       setDType(dtype);
     }
 
-    const deviceName: string = (router.query.deviceName as string) ?? undefined;
-    if (deviceName !== undefined) {
-      setDeviceName(deviceName);
+    const lDeviceName: string =
+      (router.query.lDeviceName as string) ?? undefined;
+    if (lDeviceName !== undefined) {
+      setLDeviceName(lDeviceName);
     }
 
     const lBranch: string = (router.query.lBranch as string) ?? undefined;
@@ -235,6 +244,12 @@ export default function Page() {
       setLCommit(lCommit);
     }
 
+    const rDeviceName: string =
+      (router.query.rDeviceName as string) ?? undefined;
+    if (rDeviceName !== undefined) {
+      setRDeviceName(rDeviceName);
+    }
+
     const rBranch: string = (router.query.rBranch as string) ?? undefined;
     if (rBranch !== undefined) {
       setRBranch(rBranch);
@@ -255,7 +270,7 @@ export default function Page() {
   const queryParams: { [key: string]: any } = {
     commits: [],
     compilers: [],
-    device: DISPLAY_NAMES_TO_DEVICE_NAMES[deviceName],
+    device: DISPLAY_NAMES_TO_DEVICE_NAMES[lDeviceName],
     dtypes: dtype,
     getJobId: false,
     granularity: granularity,
@@ -277,8 +292,10 @@ export default function Page() {
             startTime.toString()
           )}&stopTime=${encodeURIComponent(
             stopTime.toString()
-          )}&granularity=${granularity}&mode=${mode}&dtype=${dtype}&deviceName=${encodeURIComponent(
-            deviceName
+          )}&granularity=${granularity}&mode=${mode}&dtype=${dtype}&lDeviceName=${encodeURIComponent(
+            lDeviceName
+          )}&rDeviceName=${encodeURIComponent(
+            rDeviceName
           )}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}`}
         />
       </Stack>
@@ -309,15 +326,23 @@ export default function Page() {
           dtypes={DTYPES}
           label={"Precision"}
         />
+        <Divider
+          orientation="vertical"
+          flexItem
+          style={{ background: "black" }}
+        />
         <DTypePicker
-          dtype={deviceName}
-          setDType={setDeviceName}
+          dtype={rDeviceName}
+          setDType={setRDeviceName}
           dtypes={Object.keys(DISPLAY_NAMES_TO_DEVICE_NAMES)}
           label={"Device"}
         />
         <BranchAndCommitPicker
           queryName={"compilers_benchmark_performance_branches"}
-          queryParams={queryParams}
+          queryParams={{
+            ...queryParams,
+            device: DISPLAY_NAMES_TO_DEVICE_NAMES[rDeviceName],
+          }}
           branch={rBranch}
           setBranch={setRBranch}
           commit={rCommit}
@@ -335,7 +360,10 @@ export default function Page() {
         </Divider>
         <BranchAndCommitPicker
           queryName={"compilers_benchmark_performance_branches"}
-          queryParams={queryParams}
+          queryParams={{
+            ...queryParams,
+            device: DISPLAY_NAMES_TO_DEVICE_NAMES[lDeviceName],
+          }}
           branch={lBranch}
           setBranch={setLBranch}
           commit={lCommit}
@@ -348,6 +376,12 @@ export default function Page() {
             highlightColor: "yellow",
           }}
         />
+        <DTypePicker
+          dtype={lDeviceName}
+          setDType={setLDeviceName}
+          dtypes={Object.keys(DISPLAY_NAMES_TO_DEVICE_NAMES)}
+          label={"Device"}
+        />
       </Stack>
       <Report
         queryParams={queryParams}
@@ -356,8 +390,9 @@ export default function Page() {
         granularity={granularity}
         mode={mode}
         dtype={dtype}
-        deviceName={deviceName}
+        lDeviceName={lDeviceName}
         lBranchAndCommit={{ branch: lBranch, commit: lCommit }}
+        rDeviceName={rDeviceName}
         rBranchAndCommit={{ branch: rBranch, commit: rCommit }}
       />
     </div>
diff --git a/torchci/pages/benchmark/torchao.tsx b/torchci/pages/benchmark/torchao.tsx
index fc38f33ec0..f64c4607b1 100644
--- a/torchci/pages/benchmark/torchao.tsx
+++ b/torchci/pages/benchmark/torchao.tsx
@@ -34,8 +34,9 @@ function Report({
   granularity,
   mode,
   dtype,
-  deviceName,
+  lDeviceName,
   lBranchAndCommit,
+  rDeviceName,
   rBranchAndCommit,
 }: {
   queryParams: { [key: string]: any };
@@ -44,13 +45,15 @@ function Report({
   granularity: Granularity;
   mode: string;
   dtype: string;
-  deviceName: string;
+  lDeviceName: string;
   lBranchAndCommit: BranchAndCommit;
+  rDeviceName: string;
   rBranchAndCommit: BranchAndCommit;
 }) {
   const queryName = "torchao_query";
   const queryParamsWithL: { [key: string]: any } = {
     ...queryParams,
+    device: DISPLAY_NAMES_TO_DEVICE_NAMES[lDeviceName],
     branches: [lBranchAndCommit.branch],
     commits: lBranchAndCommit.commit ? [lBranchAndCommit.commit] : [],
   };
@@ -64,6 +67,7 @@ function Report({
 
   const queryParamsWithR: { [key: string]: any } = {
     ...queryParams,
+    device: DISPLAY_NAMES_TO_DEVICE_NAMES[rDeviceName],
     branches: [rBranchAndCommit.branch],
     commits: rBranchAndCommit.commit ? [rBranchAndCommit.commit] : [],
   };
@@ -113,11 +117,12 @@ function Report({
         granularity={granularity}
         mode={mode}
         dtype={dtype}
-        deviceName={deviceName}
+        lDeviceName={lDeviceName}
         lPerfData={{
           ...lBranchAndCommit,
           data: lData,
         }}
+        rDeviceName={rDeviceName}
         rPerfData={{
           ...rBranchAndCommit,
           data: rData,
@@ -133,7 +138,9 @@ function Report({
                 suiteConfig={suiteConfig}
                 queryParams={queryParams}
                 granularity={granularity}
+                lDeviceName={lDeviceName}
                 lBranchAndCommit={lBranchAndCommit}
+                rDeviceName={rDeviceName}
                 rBranchAndCommit={rBranchAndCommit}
               />
             </div>
@@ -157,12 +164,13 @@ export default function Page() {
   const [suite, setSuite] = useState<string>(Object.keys(SUITES)[0]);
   const [mode, setMode] = useState<string>(DEFAULT_MODE);
   const [dtype, setDType] = useState<string>(QUANTIZATIONS[0]);
+  const [lDeviceName, setLDeviceName] = useState<string>(DEFAULT_DEVICE_NAME);
   const [lBranch, setLBranch] = useState<string>(MAIN_BRANCH);
   const [lCommit, setLCommit] = useState<string>("");
+  const [rDeviceName, setRDeviceName] = useState<string>(DEFAULT_DEVICE_NAME);
   const [rBranch, setRBranch] = useState<string>(MAIN_BRANCH);
   const [rCommit, setRCommit] = useState<string>("");
   const [baseUrl, setBaseUrl] = useState<string>("");
-  const [deviceName, setDeviceName] = useState<string>(DEFAULT_DEVICE_NAME);
 
   // Set the dropdown value what is in the param
   useEffect(() => {
@@ -205,9 +213,10 @@ export default function Page() {
       setDType(dtype);
     }
 
-    const deviceName: string = (router.query.deviceName as string) ?? undefined;
-    if (deviceName !== undefined) {
-      setDeviceName(deviceName);
+    const lDeviceName: string =
+      (router.query.lDeviceName as string) ?? undefined;
+    if (lDeviceName !== undefined) {
+      setLDeviceName(lDeviceName);
     }
 
     const lBranch: string = (router.query.lBranch as string) ?? undefined;
@@ -220,6 +229,12 @@ export default function Page() {
       setLCommit(lCommit);
     }
 
+    const rDeviceName: string =
+      (router.query.rDeviceName as string) ?? undefined;
+    if (rDeviceName !== undefined) {
+      setRDeviceName(rDeviceName);
+    }
+
     const rBranch: string = (router.query.rBranch as string) ?? undefined;
     if (rBranch !== undefined) {
       setRBranch(rBranch);
@@ -241,7 +256,7 @@ export default function Page() {
     branches: [],
     commits: [],
     compilers: [],
-    device: DISPLAY_NAMES_TO_DEVICE_NAMES[deviceName],
+    device: DISPLAY_NAMES_TO_DEVICE_NAMES[lDeviceName],
     dtypes: [dtype],
     granularity: granularity,
     mode: mode,
@@ -263,8 +278,10 @@ export default function Page() {
             startTime.toString()
           )}&stopTime=${encodeURIComponent(
             stopTime.toString()
-          )}&granularity=${granularity}&mode=${mode}&dtype=${dtype}&deviceName=${encodeURIComponent(
-            deviceName
+          )}&granularity=${granularity}&mode=${mode}&dtype=${dtype}&lDeviceName=${encodeURIComponent(
+            lDeviceName
+          )}&rDeviceName=${encodeURIComponent(
+            rDeviceName
           )}&lBranch=${lBranch}&lCommit=${lCommit}&rBranch=${rBranch}&rCommit=${rCommit}`}
         />
       </Stack>
@@ -294,15 +311,23 @@ export default function Page() {
           dtypes={QUANTIZATIONS}
           label={"Quantization"}
         />
+        <Divider
+          orientation="vertical"
+          flexItem
+          style={{ background: "black" }}
+        />
         <DTypePicker
-          dtype={deviceName}
-          setDType={setDeviceName}
+          dtype={rDeviceName}
+          setDType={setRDeviceName}
           dtypes={Object.keys(DISPLAY_NAMES_TO_DEVICE_NAMES)}
           label={"Device"}
         />
         <BranchAndCommitPicker
           queryName={"torchao_query_branches"}
-          queryParams={queryParams}
+          queryParams={{
+            ...queryParams,
+            device: DISPLAY_NAMES_TO_DEVICE_NAMES[rDeviceName],
+          }}
           branch={rBranch}
           setBranch={setRBranch}
           commit={rCommit}
@@ -316,7 +341,10 @@ export default function Page() {
         </Divider>
         <BranchAndCommitPicker
           queryName={"torchao_query_branches"}
-          queryParams={queryParams}
+          queryParams={{
+            ...queryParams,
+            device: DISPLAY_NAMES_TO_DEVICE_NAMES[lDeviceName],
+          }}
           branch={lBranch}
           setBranch={setLBranch}
           commit={lCommit}
@@ -325,6 +353,12 @@ export default function Page() {
           fallbackIndex={0} // Default to the latest commit
           timeRange={timeRange}
         />
+        <DTypePicker
+          dtype={lDeviceName}
+          setDType={setLDeviceName}
+          dtypes={Object.keys(DISPLAY_NAMES_TO_DEVICE_NAMES)}
+          label={"Device"}
+        />
       </Stack>
       <Report
         queryParams={queryParams}
@@ -333,8 +367,9 @@ export default function Page() {
         granularity={granularity}
         mode={mode}
         dtype={dtype}
-        deviceName={deviceName}
+        lDeviceName={lDeviceName}
         lBranchAndCommit={{ branch: lBranch, commit: lCommit }}
+        rDeviceName={rDeviceName}
         rBranchAndCommit={{ branch: rBranch, commit: rCommit }}
       />
     </div>