diff --git a/frontend/src/pages/leaderboard/components/CodeDialog.tsx b/frontend/src/pages/leaderboard/components/CodeDialog.tsx
index 9db7766..16ba121 100644
--- a/frontend/src/pages/leaderboard/components/CodeDialog.tsx
+++ b/frontend/src/pages/leaderboard/components/CodeDialog.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Dialog, DialogContent, DialogTitle } from "@mui/material";
+import { Box, Button, Dialog, DialogContent, DialogTitle, Typography } from "@mui/material";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import CodeBlock from "../../../components/codeblock/CodeBlock";
@@ -6,12 +6,21 @@ import CodeBlock from "../../../components/codeblock/CodeBlock";
 export function CodeDialog({
   code,
   fileName = "file",
+  isActive = false,
 }: {
   code: any;
   fileName?: string;
+  isActive?: boolean;
 }) {
   const [open, setOpen] = useState(false);
 
+  if (isActive)
+    return (
+      <Typography variant="body2" sx={{ fontSize: "0.8125rem" }}>
+        {fileName}
+      </Typography>
+    );
+
   if (!code)
     return (
       <Button
diff --git a/frontend/src/pages/leaderboard/components/RankingLists.tsx b/frontend/src/pages/leaderboard/components/RankingLists.tsx
index e6785d5..9191c17 100644
--- a/frontend/src/pages/leaderboard/components/RankingLists.tsx
+++ b/frontend/src/pages/leaderboard/components/RankingLists.tsx
@@ -105,6 +105,7 @@ export default function RankingsList({
   }, [rankings]);
 
   useEffect(() => {
+    if (!showLoc) return;
     if (!submissionIds || submissionIds.length === 0 || !leaderboardId) return;
     fetchCodes(leaderboardId, submissionIds)
       .then((data) => {
@@ -118,7 +119,7 @@ export default function RankingsList({
         // soft error handle it since it's not critical
         console.warn("[RankingsList] Failed to fetch codes:", err);
       });
-  }, [leaderboardId, submissionIds]);
+  }, [leaderboardId, submissionIds, showLoc]);
 
   const toggleExpanded = (field: string) => {
     setExpanded((prev) => ({
@@ -184,14 +185,6 @@ export default function RankingsList({
                         `+${formatMicroseconds(item.prev_score)}`}
                     </Typography>
                   </Grid>
-                  <Grid size={3}>
-                    <Typography>
-                      <CodeDialog
-                        code={codes.get(item?.submission_id)}
-                        fileName={item.file_name}
-                      />
-                    </Typography>
-                  </Grid>
                   {showLoc && (
                     <Grid size={2}>
                       <Typography sx={styles.loc}>
@@ -204,6 +197,15 @@ export default function RankingsList({
                       </Typography>
                     </Grid>
                   )}
+                  <Grid size={3}>
+                    <Typography>
+                      <CodeDialog
+                        code={codes.get(item?.submission_id)}
+                        fileName={item.file_name}
+                        isActive={!showLoc}
+                      />
+                    </Typography>
+                  </Grid>
                 </Grid>
               ))}
             </Stack>