diff --git a/website/src/components/CodeViewer.css b/website/src/components/CodeViewer.css
new file mode 100644
index 0000000..a81f5f2
--- /dev/null
+++ b/website/src/components/CodeViewer.css
@@ -0,0 +1,43 @@
+/* Location definition line styles */
+.loc-definition-line {
+    background-color: rgba(255, 215, 0, 0.1) !important;
+    border-left: 3px solid #ffd700 !important;
+}
+
+.loc-definition-line:hover {
+    background-color: rgba(255, 215, 0, 0.2) !important;
+}
+
+/* Alias name badge */
+.alias-badge {
+    display: inline-block;
+    margin-left: 8px;
+    padding: 2px 6px;
+    background: #e3f2fd;
+    border-radius: 3px;
+    font-size: 0.85em;
+    color: #1976d2;
+    font-weight: 500;
+    vertical-align: middle;
+}
+
+.alias-badge:hover {
+    background: #bbdefb;
+}
+
+/* Dark theme adjustments */
+[data-theme="dark"] .alias-badge {
+    background: #1565c0;
+    color: #e3f2fd;
+}
+
+[data-theme="dark"] .alias-badge:hover {
+    background: #1976d2;
+}
+
+/* Loc ID indicator */
+.loc-id-indicator {
+    opacity: 0.6;
+    font-size: 0.8em;
+    margin-left: 4px;
+}
diff --git a/website/src/components/CodeViewer.tsx b/website/src/components/CodeViewer.tsx
index ddf0e86..40b3cd5 100644
--- a/website/src/components/CodeViewer.tsx
+++ b/website/src/components/CodeViewer.tsx
@@ -5,6 +5,7 @@ import {
   oneDark,
 } from "react-syntax-highlighter/dist/esm/styles/prism";
 import type { SourceMapping } from "../utils/dataLoader";
+import "./CodeViewer.css";
 
 // Import language support
 import llvm from 'react-syntax-highlighter/dist/esm/languages/prism/llvm';
@@ -207,6 +208,7 @@ const BasicCodeViewer: React.FC<CodeViewerProps> = ({
   highlightedLines = [],
   onLineClick,
   viewerId,
+  sourceMapping,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const lines = splitIntoLines(code);
@@ -239,6 +241,21 @@ const BasicCodeViewer: React.FC<CodeViewerProps> = ({
           {lines.map((line, index) => {
             const lineNumber = index + 1;
             const isHighlighted = highlightedLines.includes(lineNumber);
+            const mapping = sourceMapping?.[lineNumber.toString()];
+            const isLocDef = mapping?.type === "loc_def" || mapping?.kind === "loc_def";
+            
+            // Build tooltip text for loc definitions
+            let tooltipText = "";
+            if (isLocDef && mapping) {
+              tooltipText = `Location definition`;
+              if (mapping.alias_name) {
+                tooltipText += `: ${mapping.alias_name}`;
+              }
+              if (mapping.alias_of !== undefined) {
+                const targetKey = mapping.alias_of === "" ? "#loc" : `#loc${mapping.alias_of}`;
+                tooltipText += ` → ${targetKey}`;
+              }
+            }
 
             return (
               <div
@@ -255,7 +272,11 @@ const BasicCodeViewer: React.FC<CodeViewerProps> = ({
                 }}
                 onClick={() => handleLineClick(lineNumber)}
                 data-line-number={lineNumber}
-                className={isHighlighted ? 'highlighted-line' : ''}
+                className={`${isHighlighted ? 'highlighted-line' : ''} ${isLocDef ? 'loc-definition-line' : ''}`}
+                title={tooltipText}
+                data-loc-id={mapping?.loc_id}
+                data-alias-name={mapping?.alias_name}
+                data-loc-def={isLocDef ? "true" : undefined}
               >
                 <span style={{
                   position: "absolute",
@@ -290,6 +311,7 @@ const LargeFileViewer: React.FC<CodeViewerProps> = ({
   highlightedLines = [],
   onLineClick,
   viewerId,
+  sourceMapping,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [visibleRange, setVisibleRange] = useState({ start: 0, end: 50 });
@@ -421,6 +443,8 @@ const LargeFileViewer: React.FC<CodeViewerProps> = ({
             lineProps={(lineNumber) => {
               // Adjust line number based on visible range
               const actualLine = lineNumber + visibleRange.start;
+              const mapping = sourceMapping?.[actualLine.toString()];
+              const isLocDef = mapping?.type === "loc_def" || mapping?.kind === "loc_def";
 
               // Create styles for the line
               const style: React.CSSProperties = {
@@ -440,11 +464,28 @@ const LargeFileViewer: React.FC<CodeViewerProps> = ({
 
               }
 
+              // Build tooltip text for loc definitions
+              let tooltipText = "";
+              if (isLocDef && mapping) {
+                tooltipText = `Location definition`;
+                if (mapping.alias_name) {
+                  tooltipText += `: ${mapping.alias_name}`;
+                }
+                if (mapping.alias_of !== undefined) {
+                  const targetKey = mapping.alias_of === "" ? "#loc" : `#loc${mapping.alias_of}`;
+                  tooltipText += ` → ${targetKey}`;
+                }
+              }
+
               return {
                 style,
                 onClick: () => handleLineClick(actualLine),
                 'data-line-number': actualLine,
-                className: isHighlighted ? 'highlighted-line' : '',
+                className: `${isHighlighted ? 'highlighted-line' : ''} ${isLocDef ? 'loc-definition-line' : ''}`,
+                title: tooltipText,
+                'data-loc-id': mapping?.loc_id,
+                'data-alias-name': mapping?.alias_name,
+                'data-loc-def': isLocDef ? "true" : undefined,
               };
             }}
             customStyle={{
@@ -474,6 +515,7 @@ const StandardCodeViewer: React.FC<CodeViewerProps> = ({
   highlightedLines = [],
   onLineClick,
   viewerId,
+  sourceMapping,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -537,6 +579,22 @@ const StandardCodeViewer: React.FC<CodeViewerProps> = ({
         wrapLines={true}
         lineProps={(lineNumber) => {
           const isHighlighted = highlightedLines.includes(lineNumber);
+          const mapping = sourceMapping?.[lineNumber.toString()];
+          const isLocDef = mapping?.type === "loc_def" || mapping?.kind === "loc_def";
+          
+          // Build tooltip text for loc definitions
+          let tooltipText = "";
+          if (isLocDef && mapping) {
+            tooltipText = `Location definition`;
+            if (mapping.alias_name) {
+              tooltipText += `: ${mapping.alias_name}`;
+            }
+            if (mapping.alias_of !== undefined) {
+              const targetKey = mapping.alias_of === "" ? "#loc" : `#loc${mapping.alias_of}`;
+              tooltipText += ` → ${targetKey}`;
+            }
+          }
+          
           return {
             style: {
               backgroundColor: isHighlighted
@@ -549,7 +607,11 @@ const StandardCodeViewer: React.FC<CodeViewerProps> = ({
             },
             onClick: () => handleLineClick(lineNumber),
             "data-line-number": lineNumber,
-            className: isHighlighted ? 'highlighted-line' : '',
+            className: `${isHighlighted ? 'highlighted-line' : ''} ${isLocDef ? 'loc-definition-line' : ''}`,
+            title: tooltipText,
+            "data-loc-id": mapping?.loc_id,
+            "data-alias-name": mapping?.alias_name,
+            "data-loc-def": isLocDef ? "true" : undefined,
           };
         }}
       >
diff --git a/website/src/utils/dataLoader.ts b/website/src/utils/dataLoader.ts
index c064e49..eef76bd 100644
--- a/website/src/utils/dataLoader.ts
+++ b/website/src/utils/dataLoader.ts
@@ -17,6 +17,12 @@ export interface SourceMapping {
     ttgir_lines?: number[]; // Array of corresponding TTGIR lines
     llir_lines?: number[]; // Array of corresponding LLIR lines
     amdgcn_lines?: number[]; // Array of corresponding AMDGCN lines
+    // New fields for location alias support
+    type?: string; // Type of mapping entry, e.g., "loc_def" for loc definition lines
+    kind?: string; // Deprecated alias for type, kept for backward compatibility
+    loc_id?: string; // The #loc identifier (e.g., "13" for #loc13)
+    alias_name?: string; // Name of the alias (e.g., "x_ptr" in #loc13 = loc("x_ptr"(#loc)))
+    alias_of?: string; // The target #loc this alias points to
 }
 
 /**