diff --git a/frontends/nextjs/src/components/organisms/navigation/NavigationMenuCore.module.scss b/frontends/nextjs/src/components/organisms/navigation/NavigationMenuCore.module.scss
new file mode 100644
index 000000000..dfcb2c865
--- /dev/null
+++ b/frontends/nextjs/src/components/organisms/navigation/NavigationMenuCore.module.scss
@@ -0,0 +1,31 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.navigationMenu {
+  display: flex;
+  gap: 0.25rem;
+  
+  &.horizontal {
+    flex-direction: row;
+    align-items: center;
+  }
+  
+  &.vertical {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.navigationMenuList {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.25rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.navigationMenuItem {
+  position: relative;
+}
diff --git a/frontends/nextjs/src/components/organisms/navigation/NavigationMenuLink.module.scss b/frontends/nextjs/src/components/organisms/navigation/NavigationMenuLink.module.scss
new file mode 100644
index 000000000..c35f3b778
--- /dev/null
+++ b/frontends/nextjs/src/components/organisms/navigation/NavigationMenuLink.module.scss
@@ -0,0 +1,62 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.navigationMenuLink {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-transform: none;
+  font-weight: 500;
+  min-width: auto;
+  padding: 0.5rem 1rem;
+  color: var(--text-primary, inherit);
+  text-decoration: none;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  
+  &:hover {
+    background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
+  }
+  
+  &.active {
+    color: var(--primary-main, #1976d2);
+  }
+}
+
+.navigationMenuIndicator {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background-color: var(--primary-main, #1976d2);
+  transition: all 0.2s;
+}
+
+.navigationMenuViewport {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background-color: var(--background-paper, #fff);
+  border-radius: 4px;
+  box-shadow: var(--shadow-3, 0 4px 20px rgba(0, 0, 0, 0.15));
+  overflow: hidden;
+}
+
+.triggerStyle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 4px;
+  transition: all 0.2s;
+  
+  &:hover {
+    background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
+  }
+  
+  &:focus {
+    background-color: var(--action-focus, rgba(0, 0, 0, 0.12));
+  }
+}
diff --git a/frontends/nextjs/src/components/organisms/navigation/NavigationMenuTrigger.module.scss b/frontends/nextjs/src/components/organisms/navigation/NavigationMenuTrigger.module.scss
new file mode 100644
index 000000000..726a91460
--- /dev/null
+++ b/frontends/nextjs/src/components/organisms/navigation/NavigationMenuTrigger.module.scss
@@ -0,0 +1,19 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.navigationMenuTrigger {
+  text-transform: none;
+  font-weight: 500;
+  color: var(--text-primary, inherit);
+  
+  &:hover {
+    background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
+  }
+}
+
+.navigationMenuContent {
+  margin-top: 0.5rem;
+  min-width: 200px;
+  border-radius: 4px;
+  box-shadow: var(--shadow-3, 0 4px 20px rgba(0, 0, 0, 0.15));
+}
diff --git a/frontends/nextjs/src/components/organisms/navigation/SidebarCore.module.scss b/frontends/nextjs/src/components/organisms/navigation/SidebarCore.module.scss
new file mode 100644
index 000000000..862699c7d
--- /dev/null
+++ b/frontends/nextjs/src/components/organisms/navigation/SidebarCore.module.scss
@@ -0,0 +1,32 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.sidebarDrawer {
+  :global(.drawer__content) {
+    width: var(--sidebar-width, 280px);
+  }
+}
+
+.sidebarCore {
+  flex-shrink: 0;
+  width: var(--sidebar-width, 280px);
+  transition: width 0.2s ease-in-out;
+  overflow: hidden;
+  
+  &.open {
+    width: var(--sidebar-width, 280px);
+  }
+  
+  &.collapsed {
+    width: var(--sidebar-width, 64px);
+  }
+}
+
+.sidebarInner {
+  width: var(--sidebar-inner-width, 280px);
+  height: 100%;
+  background-color: var(--background-paper, #fff);
+  border-right: 1px solid var(--divider, rgba(0, 0, 0, 0.12));
+  display: flex;
+  flex-direction: column;
+}
diff --git a/frontends/nextjs/src/components/organisms/navigation/SidebarExtras.module.scss b/frontends/nextjs/src/components/organisms/navigation/SidebarExtras.module.scss
new file mode 100644
index 000000000..dea3fb925
--- /dev/null
+++ b/frontends/nextjs/src/components/organisms/navigation/SidebarExtras.module.scss
@@ -0,0 +1,24 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.sidebarSeparator {
+  margin: 0.5rem 0;
+}
+
+.sidebarTrigger {
+  // Uses IconButton styles
+}
+
+.sidebarRail {
+  position: absolute;
+  right: -4px;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: col-resize;
+  
+  &:hover {
+    background-color: var(--primary-main, #1976d2);
+    opacity: 0.2;
+  }
+}
diff --git a/frontends/nextjs/src/components/organisms/navigation/SidebarGroup.module.scss b/frontends/nextjs/src/components/organisms/navigation/SidebarGroup.module.scss
new file mode 100644
index 000000000..f3dad2f0f
--- /dev/null
+++ b/frontends/nextjs/src/components/organisms/navigation/SidebarGroup.module.scss
@@ -0,0 +1,41 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.sidebarGroup {
+  margin-bottom: 0.5rem;
+}
+
+.sidebarGroupHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  
+  &.collapsible {
+    cursor: pointer;
+    
+    &:hover {
+      background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
+    }
+  }
+}
+
+.sidebarGroupLabel {
+  font-size: 0.7rem;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
+}
+
+.sidebarGroupLabelStandalone {
+  display: block;
+  padding: 0.5rem 1rem;
+  font-size: 0.7rem;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
+}
+
+.sidebarGroupList {
+  padding: 0;
+}
diff --git a/frontends/nextjs/src/components/organisms/navigation/SidebarLayout.module.scss b/frontends/nextjs/src/components/organisms/navigation/SidebarLayout.module.scss
new file mode 100644
index 000000000..e163d3785
--- /dev/null
+++ b/frontends/nextjs/src/components/organisms/navigation/SidebarLayout.module.scss
@@ -0,0 +1,26 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.sidebarHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  border-bottom: 1px solid var(--divider, rgba(0, 0, 0, 0.12));
+}
+
+.sidebarContent {
+  flex: 1;
+  overflow: auto;
+  padding: 0.5rem 0;
+}
+
+.sidebarFooter {
+  padding: 1rem;
+  border-top: 1px solid var(--divider, rgba(0, 0, 0, 0.12));
+}
+
+.sidebarInset {
+  flex: 1;
+  overflow: auto;
+}
diff --git a/frontends/nextjs/src/components/organisms/navigation/SidebarMenu.module.scss b/frontends/nextjs/src/components/organisms/navigation/SidebarMenu.module.scss
new file mode 100644
index 000000000..c785d7394
--- /dev/null
+++ b/frontends/nextjs/src/components/organisms/navigation/SidebarMenu.module.scss
@@ -0,0 +1,66 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.sidebarMenuList {
+  padding: 0;
+}
+
+.sidebarMenuListItem {
+  padding: 0;
+}
+
+.sidebarMenuItemWrapper {
+  width: 100%;
+}
+
+.sidebarMenuButton {
+  display: flex;
+  align-items: center;
+  width: calc(100% - 0.5rem);
+  margin: 0 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 4px;
+  text-decoration: none;
+  color: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.875rem;
+  text-align: left;
+  transition: background-color 0.2s;
+  
+  &:hover {
+    background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
+  }
+  
+  &.active,
+  &:global(.list-item-button--selected) {
+    background-color: var(--primary-main, #1976d2);
+    color: var(--primary-contrast-text, #fff);
+    
+    .sidebarMenuIcon {
+      color: var(--primary-contrast-text, #fff);
+    }
+    
+    &:hover {
+      background-color: var(--primary-dark, #1565c0);
+    }
+  }
+  
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+.sidebarMenuIcon {
+  min-width: 36px;
+  display: flex;
+  align-items: center;
+  color: inherit;
+}
+
+.sidebarMenuText {
+  font-size: 0.875rem;
+}