diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 1084fa5..610f4ab 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -1,3 +1,5 @@
+import { Link } from 'react-router-dom'
+
 export default function HomePage() {
   return (
     <div className="p-4">
@@ -11,18 +13,19 @@ export default function HomePage() {
       </div>
       <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 12 }}>
         {[
-          { label: 'Todos', icon: 'list', path: '/todos' },
+          { label: 'Todos', icon: 'list-check', path: '/todos' },
           { label: 'Courses', icon: 'cart-shopping', path: '/shopping' },
           { label: 'Notes', icon: 'note-sticky', path: '/notes' },
         ].map((item) => (
-          <div
+          <Link
             key={item.path}
+            to={item.path}
             className="glass interactive"
-            style={{ padding: 20, borderRadius: 10, textAlign: 'center', cursor: 'pointer', minHeight: 80, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8 }}
+            style={{ padding: 20, borderRadius: 10, textAlign: 'center', cursor: 'pointer', minHeight: 80, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, textDecoration: 'none' }}
           >
             <i className={`fa-solid fa-${item.icon}`} style={{ fontSize: 24, color: 'var(--accent)' }} />
             <span style={{ color: 'var(--ink-1)', fontFamily: 'var(--font-ui)', fontSize: 14 }}>{item.label}</span>
-          </div>
+          </Link>
         ))}
       </div>
     </div>