diff --git a/src/app/app.css b/src/app/app.css
index 6e032a3..2b2c42a 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -4,4 +4,34 @@
   color: #212529;
 }
 
+.app-layout {
+  display: flex;
+  min-height: 100vh;
+  background: #f9fafb;
+}
 
+.app-sidebar {
+  width: 220px;
+  flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+}
+
+.app-content {
+  flex: 1;
+  padding: 2rem;
+  min-width: 0;
+}
+
+@media (max-width: 768px) {
+  .app-layout {
+    flex-direction: column;
+  }
+
+  .app-sidebar {
+    width: 100%;
+    height: auto;
+    position: static;
+  }
+}
diff --git a/src/app/app.html b/src/app/app.html
index 19cd962..5aa2655 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -1,12 +1,8 @@
-<main class="container-fluid min-vh-100">
-  <div class="row min-vh-100">
-    <aside class="col-12 col-md-3 col-lg-2 p-0">
-      <app-menu />
-    </aside>
-
-    <section class="col-12 col-md-9 col-lg-10 p-4" aria-live="polite">
-      <router-outlet />
-    </section>
+<div class="app-layout">
+  <div class="app-sidebar">
+    <app-menu />
   </div>
-</main>
-
+  <main class="app-content" aria-live="polite">
+    <router-outlet />
+  </main>
+</div>
diff --git a/src/app/menu/menu.css b/src/app/menu/menu.css
index f8a9121..fe0e528 100644
--- a/src/app/menu/menu.css
+++ b/src/app/menu/menu.css
@@ -3,4 +3,53 @@
   height: 100%;
 }
 
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #ffffff;
+  border-right: 1px solid #e5e7eb;
+  padding: 1.25rem 0.75rem;
+  gap: 1.5rem;
+}
 
+.sidebar-logo {
+  padding: 0 0.5rem;
+}
+
+.sidebar-logo-text {
+  font-size: 1.15rem;
+  font-weight: 800;
+  color: #111827;
+  letter-spacing: -0.02em;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.sidebar-link {
+  display: block;
+  padding: 0.55rem 0.75rem;
+  border-radius: 0.5rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #4b5563;
+  text-decoration: none;
+  border-left: 3px solid transparent;
+  transition: background 0.1s, color 0.1s;
+}
+
+.sidebar-link:hover {
+  background: #f3f4f6;
+  color: #111827;
+}
+
+.sidebar-link--active {
+  background: #eff6ff;
+  color: #1d4ed8;
+  border-left-color: #2563eb;
+  font-weight: 600;
+}
diff --git a/src/app/menu/menu.html b/src/app/menu/menu.html
index af7f4f1..1997219 100644
--- a/src/app/menu/menu.html
+++ b/src/app/menu/menu.html
@@ -1,24 +1,18 @@
-<aside class="bg-dark text-white min-vh-100 p-3" aria-label="Menu principal">
-  <div class="d-flex flex-column gap-3">
-    <div>
-      <h2 class="h5 mb-0">Bonsai</h2>
-    </div>
-
-    <nav>
-      <ul class="nav nav-pills flex-column gap-2">
-        @for (item of menuItems; track item.path) {
-          <li class="nav-item">
-            <a
-              class="nav-link text-white"
-              [routerLink]="item.path"
-              routerLinkActive="active bg-primary"
-              [routerLinkActiveOptions]="{ exact: true }"
-            >
-              {{ item.label }}
-            </a>
-          </li>
-        }
-      </ul>
-    </nav>
+<aside class="sidebar" aria-label="Menu principal">
+  <div class="sidebar-logo">
+    <span class="sidebar-logo-text">Bonsai</span>
   </div>
+
+  <nav class="sidebar-nav">
+    @for (item of menuItems; track item.path) {
+      <a
+        class="sidebar-link"
+        [routerLink]="item.path"
+        routerLinkActive="sidebar-link--active"
+        [routerLinkActiveOptions]="{ exact: true }"
+      >
+        {{ item.label }}
+      </a>
+    }
+  </nav>
 </aside>