diff --git a/src/App.jsx b/src/App.jsx
index 11c0eec..d5e20de 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -151,6 +151,10 @@ export default function App() {
         .pathRow:hover { border-color: ${COLORS.borderStrong} !important; }
         .toolbarBtn { display: flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 7px 11px; border-radius: 6px; cursor: pointer; font-family: 'IBM Plex Mono', monospace; border: 1px solid ${COLORS.border}; background: ${COLORS.panel2}; color: ${COLORS.textMuted}; }
         .toolbarBtn:hover { border-color: ${COLORS.borderStrong}; color: ${COLORS.textPrimary}; }
+        .attackPathList::-webkit-scrollbar { width: 6px; }
+        .attackPathList::-webkit-scrollbar-track { background: transparent; }
+        .attackPathList::-webkit-scrollbar-thumb { background: #33475A; border-radius: 10px; }
+        .attackPathList::-webkit-scrollbar-thumb:hover { background: #3DDBD9; }
       `}</style>
 
       <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: "14px", flexWrap: "wrap", gap: "16px" }}>
@@ -338,7 +342,7 @@ export default function App() {
 
           <div style={{ background: COLORS.panel, border: `1px solid ${COLORS.border}`, borderRadius: "8px", padding: "14px" }}>
             <SectionLabel>Predicted attack paths ({paths.length})</SectionLabel>
-            <div style={{ display: "flex", flexDirection: "column", gap: "8px", marginTop: "10px", maxHeight: "300px", overflowY: "auto" }}>
+            <div className="attackPathList" style={{ display: "flex", flexDirection: "column", gap: "8px", marginTop: "10px", maxHeight: "300px", overflowY: "auto" }}>
               {paths.length === 0 && (
                 <div style={{ fontSize: "12px", color: COLORS.textMuted, lineHeight: 1.5 }}>
                   No entry-to-target paths found in this dataset.