diff --git a/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_sidebar.scss b/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_sidebar.scss
new file mode 100644
index 00000000..8fe86c2f
--- /dev/null
+++ b/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_sidebar.scss
@@ -0,0 +1,148 @@
+// ============================================================================
+// Fusion Plating — Portal · Sidebar shell
+// Sticky 240px left rail wrapping every /my/* page. Grouped sections
+// (Dashboard / ACTIVITY / DOCUMENTS / ACCOUNT). Active page = mint
+// gradient fill + brand teal left bar. Below 768px collapses to a
+// hamburger drawer with backdrop.
+// ============================================================================
+
+.o_fp_portal_shell {
+    display: grid;
+    grid-template-columns: 240px 1fr;
+    gap: $fp-space-5;
+    align-items: start;
+    background: $fp-page-bg;
+    min-height: calc(100vh - 80px);
+    padding: $fp-space-4;
+
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+        gap: 0;
+        padding: $fp-space-3;
+    }
+}
+
+.o_fp_portal_sidebar {
+    position: sticky;
+    top: $fp-space-4;
+    background: $fp-card-bg;
+    border: 1px solid $fp-card-border;
+    border-radius: $fp-radius-card;
+    padding: .85rem .5rem;
+    box-shadow: $fp-shadow-card;
+    font-family: $fp-font;
+    align-self: start;
+
+    .o_fp_sidebar_header {
+        padding: .45rem .9rem .7rem;
+        font-size: .62rem;
+        color: $fp-muted;
+        font-weight: 700;
+        letter-spacing: .06em;
+        text-transform: uppercase;
+        border-bottom: 1px solid $fp-section-bg;
+    }
+
+    .o_fp_sidebar_section_label {
+        padding: .85rem .9rem .25rem;
+        font-size: .62rem;
+        color: $fp-muted-light;
+        font-weight: 700;
+        letter-spacing: .06em;
+        text-transform: uppercase;
+    }
+
+    .o_fp_sidebar_item {
+        display: flex;
+        align-items: center;
+        gap: .55rem;
+        padding: .5rem .9rem;
+        margin: .05rem .15rem;
+        color: $fp-text-body;
+        font-size: .85rem;
+        text-decoration: none;
+        border-radius: 6px;
+        border-left: 3px solid transparent;
+        transition: background .12s ease, color .12s ease;
+
+        &:hover {
+            background: $fp-section-bg;
+            color: $fp-teal-dark;
+            text-decoration: none;
+        }
+        &.o_fp_sidebar_active {
+            background: linear-gradient(90deg, $fp-mint 0%, $fp-mint-pastel 100%);
+            color: $fp-teal-dark;
+            font-weight: 600;
+            border-left: 3px solid $fp-teal;
+        }
+
+        .o_fp_sidebar_icon {
+            width: 1.15rem;
+            text-align: center;
+            flex-shrink: 0;
+        }
+    }
+
+    .o_fp_sidebar_footer {
+        border-top: 1px solid $fp-section-bg;
+        margin: .7rem .15rem 0;
+        padding-top: .5rem;
+    }
+
+    // Mobile: slide-in drawer
+    @media (max-width: 768px) {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: 280px;
+        z-index: 1040;
+        transform: translateX(-100%);
+        transition: transform .2s ease;
+        border-radius: 0;
+        border-top: none;
+        border-bottom: none;
+        border-left: none;
+        margin: 0;
+
+        &.o_fp_open {
+            transform: translateX(0);
+        }
+    }
+}
+
+// Mobile hamburger button (above main content, hidden on desktop)
+.o_fp_portal_hamburger {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 38px;
+    height: 38px;
+    background: $fp-card-bg;
+    border: 1px solid $fp-card-border;
+    border-radius: $fp-radius-button;
+    color: $fp-teal;
+    margin-bottom: $fp-space-3;
+    cursor: pointer;
+    transition: background .12s ease;
+
+    &:hover { background: $fp-section-bg; }
+
+    @media (max-width: 768px) {
+        display: inline-flex;
+    }
+}
+
+// Backdrop behind the open mobile drawer
+.o_fp_portal_backdrop {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(15, 30, 30, .35);
+    z-index: 1030;
+
+    &.o_fp_open {
+        display: block;
+    }
+}