diff --git a/resources/css/app.css b/resources/css/app.css
index 4a43fd9e..3119a090 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,1,0&display=swap');
 @import 'tailwindcss';
 
 @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@@ -146,3 +147,25 @@
 .dark .text-green-700 {
     color: rgb(134 239 172);
 }
+
+/* Material Symbols Rounded — filled, wght 400 (bolder), rounded */
+.material-symbols-rounded {
+    font-family: 'Material Symbols Rounded';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+    font-variation-settings:
+        'FILL' 1,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' 24;
+}
diff --git a/resources/js/components/navigation/BottomNav.vue b/resources/js/components/navigation/BottomNav.vue
new file mode 100644
index 00000000..7ba94f1c
--- /dev/null
+++ b/resources/js/components/navigation/BottomNav.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { Link, usePage } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+import MaterialIcon from '@/components/ui/MaterialIcon.vue';
+import { useBottomNavCustomization } from '@/lib/useBottomNavCustomization';
+
+const page = usePage();
+const currentUrl = computed(() => String(page.url));
+
+const { bottomNavItems } = useBottomNavCustomization();
+
+const homeHref = computed(() => {
+    if (typeof window !== 'undefined') {
+        try {
+            const pref = localStorage.getItem('preferred_course');
+
+            if (pref === 'ssc') {
+                return '/ssc';
+            }
+        } catch {}
+    }
+
+    return currentUrl.value.startsWith('/ssc') ? '/ssc' : '/';
+});
+
+const isActive = (href: string, match?: (url: string) => boolean) => {
+    if (match) {
+        return match(currentUrl.value);
+    }
+
+    return currentUrl.value.startsWith(href);
+};
+
+const resolvedHref = (item: { href: string }) => {
+    if (item.href === '/') {
+        return homeHref.value;
+    }
+
+    return item.href;
+};
+</script>
+
+<template>
+    <!-- YT / YT Music style: full-width bottom bar, icon above label, active filled -->
+    <nav
+        class="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200/70 bg-white/95 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl dark:border-slate-800 dark:bg-slate-900/95"
+        aria-label="Bottom navigation"
+    >
+        <div
+            class="mx-auto flex max-w-md items-center justify-around px-1 py-2"
+        >
+            <Link
+                v-for="item in bottomNavItems"
+                :key="item.href"
+                :href="resolvedHref(item)"
+                :class="[
+                    'flex min-w-0 flex-1 flex-col items-center gap-1 rounded-xl px-2 py-2 transition-all duration-150 ease-out',
+                    isActive(item.href, item.match)
+                        ? 'text-slate-900 dark:text-white'
+                        : 'text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200',
+                ]"
+            >
+                <MaterialIcon
+                    :name="item.icon"
+                    :size="26"
+                    :filled="isActive(item.href, item.match)"
+                    :weight="400"
+                    :class="[
+                        'transition-transform duration-150',
+                        isActive(item.href, item.match)
+                            ? 'scale-[1.02] text-slate-900 dark:text-white'
+                            : 'text-slate-500 dark:text-slate-400',
+                    ]"
+                />
+                <span
+                    :class="[
+                        'text-[10px] leading-none tracking-wide antialiased',
+                        isActive(item.href, item.match)
+                            ? 'font-bold'
+                            : 'font-medium',
+                    ]"
+                    >{{ item.label }}</span
+                >
+            </Link>
+        </div>
+    </nav>
+</template>
diff --git a/resources/js/components/navigation/BottomNavCustomizer.vue b/resources/js/components/navigation/BottomNavCustomizer.vue
new file mode 100644
index 00000000..ab761a56
--- /dev/null
+++ b/resources/js/components/navigation/BottomNavCustomizer.vue
@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import MaterialIcon from '@/components/ui/MaterialIcon.vue';
+import { useBottomNavCustomization } from '@/lib/useBottomNavCustomization';
+
+const {
+    bottomNavItems,
+    availableItems,
+    homeItem,
+    accountItem,
+    middleHrefs,
+    canAdd,
+    canRemove,
+    addItem,
+    removeItem,
+    reorder,
+    reset,
+    MIN_TOTAL,
+    MAX_TOTAL,
+} = useBottomNavCustomization();
+
+const dragIndex = ref<number | null>(null);
+
+const onDragStart = (index: number, e: DragEvent) => {
+    dragIndex.value = index;
+
+    if (e.dataTransfer) {
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', String(index));
+    }
+};
+
+const onDragOver = (e: DragEvent) => {
+    e.preventDefault();
+
+    if (e.dataTransfer) {
+        e.dataTransfer.dropEffect = 'move';
+    }
+};
+
+const onDrop = (targetIndex: number, e: DragEvent) => {
+    e.preventDefault();
+    const from = dragIndex.value;
+
+    if (from === null || from === targetIndex) {
+        dragIndex.value = null;
+
+        return;
+    }
+
+    reorder(from, targetIndex);
+    dragIndex.value = null;
+};
+
+const onDragEnd = () => {
+    dragIndex.value = null;
+};
+
+const handleAdd = (href: string) => {
+    if (!canAdd.value) {
+        return;
+    }
+
+    addItem(href);
+};
+
+const handleRemove = (href: string) => {
+    if (!canRemove.value) {
+        return;
+    }
+
+    removeItem(href);
+};
+</script>
+
+<template>
+    <div
+        class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900"
+    >
+        <div class="mb-6">
+            <h3
+                class="text-base font-semibold text-slate-900 dark:text-gray-100"
+            >
+                Bottom navigation
+            </h3>
+            <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
+                Customize your mobile bottom bar (3–5 items). Home and Account
+                are pinned — drag the middle items to reorder. Changes save
+                automatically to this device.
+            </p>
+            <p class="mt-2 text-xs font-medium">
+                <span
+                    :class="
+                        bottomNavItems.length < MIN_TOTAL ||
+                        bottomNavItems.length > MAX_TOTAL
+                            ? 'text-amber-600'
+                            : 'text-slate-500 dark:text-gray-400'
+                    "
+                >
+                    {{ bottomNavItems.length }} / {{ MAX_TOTAL }} items
+                </span>
+                <span class="mx-2 text-slate-300">·</span>
+                <button
+                    type="button"
+                    @click="reset"
+                    class="inline-flex items-center gap-1 text-xs font-semibold text-indigo-600 hover:text-indigo-700 dark:text-indigo-400"
+                >
+                    <MaterialIcon name="restart_alt" :size="14" /> Reset
+                </button>
+            </p>
+        </div>
+
+        <!-- Current bottom bar (pinned + draggable middle) -->
+        <div>
+            <p
+                class="mb-2 text-[11px] font-bold tracking-widest text-slate-400 uppercase dark:text-gray-500"
+            >
+                Bottom bar — drag middle to reorder
+            </p>
+            <ul class="space-y-2">
+                <!-- Home pinned -->
+                <li
+                    class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2.5 dark:border-gray-700 dark:bg-gray-800/60"
+                >
+                    <MaterialIcon
+                        name="lock"
+                        :size="16"
+                        class="shrink-0 text-slate-400"
+                    />
+                    <MaterialIcon
+                        :name="homeItem.icon"
+                        :size="22"
+                        class="shrink-0 text-slate-700 dark:text-gray-300"
+                    />
+                    <span
+                        class="flex-1 text-sm font-semibold text-slate-900 dark:text-gray-100"
+                        >{{ homeItem.label }}</span
+                    >
+                    <span
+                        class="rounded-full bg-slate-900 px-2 py-0.5 text-[10px] font-bold text-white dark:bg-white dark:text-slate-900"
+                        >Pinned first</span
+                    >
+                </li>
+
+                <!-- Middle draggable -->
+                <li
+                    v-for="(href, idx) in middleHrefs"
+                    :key="href"
+                    draggable="true"
+                    @dragstart="onDragStart(idx, $event)"
+                    @dragover="onDragOver"
+                    @drop="onDrop(idx, $event)"
+                    @dragend="onDragEnd"
+                    :class="[
+                        'flex items-center gap-3 rounded-xl border bg-white px-3 py-2.5 shadow-sm transition dark:bg-gray-800',
+                        dragIndex === idx
+                            ? 'border-indigo-300 ring-2 ring-indigo-200 dark:border-indigo-700'
+                            : 'border-slate-200 dark:border-gray-700',
+                    ]"
+                >
+                    <MaterialIcon
+                        name="drag_indicator"
+                        :size="16"
+                        class="shrink-0 cursor-grab text-slate-400 active:cursor-grabbing"
+                    />
+                    <MaterialIcon
+                        :name="bottomNavItems[idx + 1]?.icon ?? 'help'"
+                        :size="22"
+                        class="shrink-0 text-slate-600 dark:text-gray-300"
+                    />
+                    <span
+                        class="flex-1 text-sm font-medium text-slate-800 dark:text-gray-200"
+                        >{{ bottomNavItems[idx + 1]?.label }}</span
+                    >
+                    <button
+                        type="button"
+                        @click="handleRemove(href)"
+                        :disabled="!canRemove"
+                        class="flex h-7 w-7 items-center justify-center rounded-lg text-slate-400 hover:bg-rose-50 hover:text-rose-600 disabled:opacity-30 dark:hover:bg-rose-950/40"
+                        aria-label="Remove from bottom bar"
+                    >
+                        <MaterialIcon name="close" :size="16" />
+                    </button>
+                </li>
+
+                <!-- Account pinned last -->
+                <li
+                    class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2.5 dark:border-gray-700 dark:bg-gray-800/60"
+                >
+                    <MaterialIcon
+                        name="lock"
+                        :size="16"
+                        class="shrink-0 text-slate-400"
+                    />
+                    <MaterialIcon
+                        :name="accountItem.icon"
+                        :size="22"
+                        class="shrink-0 text-slate-700 dark:text-gray-300"
+                    />
+                    <span
+                        class="flex-1 text-sm font-semibold text-slate-900 dark:text-gray-100"
+                        >{{ accountItem.label }}</span
+                    >
+                    <span
+                        class="rounded-full bg-slate-900 px-2 py-0.5 text-[10px] font-bold text-white dark:bg-white dark:text-slate-900"
+                        >Pinned last</span
+                    >
+                </li>
+            </ul>
+            <p
+                v-if="!canRemove"
+                class="mt-2 text-[11px] text-amber-600 dark:text-amber-400"
+            >
+                Minimum {{ MIN_TOTAL }} items — remove disabled.
+            </p>
+            <p
+                v-if="!canAdd"
+                class="mt-2 text-[11px] text-amber-600 dark:text-amber-400"
+            >
+                Maximum {{ MAX_TOTAL }} items — add disabled.
+            </p>
+        </div>
+
+        <!-- Available pool -->
+        <div class="mt-6">
+            <p
+                class="mb-2 text-[11px] font-bold tracking-widest text-slate-400 uppercase dark:text-gray-500"
+            >
+                More items — tap to add to bottom bar
+            </p>
+            <div
+                v-if="availableItems.length === 0"
+                class="rounded-xl border border-dashed border-slate-200 p-4 text-center text-xs text-slate-500 dark:border-gray-700 dark:text-gray-400"
+            >
+                All items are already in your bottom bar.
+            </div>
+            <div v-else class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                <button
+                    v-for="item in availableItems"
+                    :key="item.href"
+                    type="button"
+                    @click="handleAdd(item.href)"
+                    :disabled="!canAdd"
+                    class="flex items-center gap-3 rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-left text-sm font-medium transition hover:bg-slate-50 disabled:opacity-40 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700/60"
+                >
+                    <MaterialIcon
+                        :name="item.icon"
+                        :size="22"
+                        class="shrink-0 text-slate-500"
+                    />
+                    <span class="flex-1 text-slate-700 dark:text-gray-300">{{
+                        item.label
+                    }}</span>
+                    <MaterialIcon
+                        name="add"
+                        :size="16"
+                        class="shrink-0 text-indigo-600 dark:text-indigo-400"
+                    />
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/navigation/OverflowDrawer.vue b/resources/js/components/navigation/OverflowDrawer.vue
new file mode 100644
index 00000000..a856c8e0
--- /dev/null
+++ b/resources/js/components/navigation/OverflowDrawer.vue
@@ -0,0 +1,336 @@
+<script setup lang="ts">
+import { Link, usePage } from '@inertiajs/vue3';
+import { computed, onBeforeUnmount, watch } from 'vue';
+
+import AppLogo from '@/components/AppLogo.vue';
+import NotificationDropdown from '@/components/NotificationDropdown.vue';
+import MaterialIcon from '@/components/ui/MaterialIcon.vue';
+import { useBottomNavCustomization } from '@/lib/useBottomNavCustomization';
+import { useDarkMode } from '@/lib/useDarkMode';
+import { usePwa } from '@/lib/usePwa';
+
+const props = defineProps<{ open: boolean }>();
+const emit = defineEmits<{
+    (e: 'update:open', v: boolean): void;
+    (e: 'close'): void;
+}>();
+
+const page = usePage();
+const user = computed(
+    () => page.props.auth?.user as App.Data.UserData | undefined,
+);
+const canAccessAdmin = computed(() =>
+    Boolean(page.props.auth?.can_access_admin),
+);
+const isAdminRoute = computed(() => String(page.url).startsWith('/admin'));
+const currentUrl = computed(() => String(page.url));
+
+const { theme, setTheme } = useDarkMode();
+const { deferredPrompt, isInstalled, promptInstall } = usePwa();
+const canInstallApp = computed(
+    () => !isInstalled.value && Boolean(deferredPrompt.value),
+);
+const { availableItems } = useBottomNavCustomization();
+
+const close = () => {
+    emit('update:open', false);
+    emit('close');
+};
+
+const handleInstallApp = async () => {
+    await promptInstall();
+    close();
+};
+
+const isActive = (href: string, match?: (url: string) => boolean) => {
+    if (match) {
+        return match(currentUrl.value);
+    }
+
+    return currentUrl.value.startsWith(href);
+};
+
+let previousOverflow: string | null = null;
+
+watch(
+    () => props.open,
+    (v) => {
+        if (typeof document === 'undefined') {
+            return;
+        }
+
+        if (v) {
+            previousOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = previousOverflow ?? '';
+            previousOverflow = null;
+        }
+    },
+);
+
+onBeforeUnmount(() => {
+    if (typeof document === 'undefined') {
+        return;
+    }
+
+    if (previousOverflow !== null) {
+        document.body.style.overflow = previousOverflow;
+        previousOverflow = null;
+    } else if (props.open) {
+        document.body.style.overflow = '';
+    }
+});
+</script>
+
+<template>
+    <div>
+        <!-- Top bar hamburger (mobile) — YT-style: compact, hamburger left -->
+        <div
+            class="sticky top-0 z-30 flex h-[56px] items-center gap-2.5 border-b border-slate-200/70 bg-white/90 px-3.5 backdrop-blur-xl dark:border-slate-800 dark:bg-slate-900/90"
+        >
+            <button
+                type="button"
+                @click="emit('update:open', true)"
+                class="flex h-9 w-9 items-center justify-center rounded-full text-slate-700 transition-colors hover:bg-slate-100 active:bg-slate-200 dark:text-slate-300 dark:hover:bg-slate-800"
+                aria-label="Open navigation menu"
+            >
+                <MaterialIcon name="menu" :size="24" />
+            </button>
+            <div class="ml-1">
+                <AppLogo />
+            </div>
+            <div class="ml-auto flex items-center gap-1.5">
+                <NotificationDropdown v-if="user" />
+            </div>
+        </div>
+
+        <!-- Drawer -->
+        <Teleport to="body">
+            <div v-if="open" class="fixed inset-0 z-50 flex">
+                <div
+                    class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm dark:bg-black/60"
+                    @click="close"
+                />
+                <Transition
+                    appear
+                    enter-active-class="transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)]"
+                    enter-from-class="-translate-x-full"
+                    enter-to-class="translate-x-0"
+                    leave-active-class="transition-transform duration-200 ease-in"
+                    leave-from-class="translate-x-0"
+                    leave-to-class="-translate-x-full"
+                >
+                    <aside
+                        class="relative flex h-full w-[84%] max-w-[320px] flex-col bg-white shadow-[8px_0_32px_rgba(0,0,0,0.12)] dark:bg-slate-900"
+                    >
+                        <div
+                            class="flex items-center justify-between border-b border-slate-100 p-4 dark:border-gray-800"
+                        >
+                            <AppLogo />
+                            <button
+                                @click="close"
+                                class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-gray-800"
+                                aria-label="Close menu"
+                            >
+                                <MaterialIcon name="close" :size="22" />
+                            </button>
+                        </div>
+
+                        <div class="flex-1 overflow-y-auto p-4">
+                            <!-- User -->
+                            <div
+                                v-if="user"
+                                class="mb-4 flex items-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 p-3 dark:border-gray-800 dark:bg-gray-900"
+                            >
+                                <img
+                                    v-if="user.image_url"
+                                    :src="user.image_url"
+                                    :alt="user.name"
+                                    class="h-10 w-10 rounded-full object-cover"
+                                />
+                                <span
+                                    v-else
+                                    class="flex h-10 w-10 items-center justify-center rounded-full bg-indigo-600 text-sm font-bold text-white"
+                                    >{{
+                                        user.name.charAt(0).toUpperCase()
+                                    }}</span
+                                >
+                                <div class="min-w-0">
+                                    <p
+                                        class="truncate text-sm font-semibold text-slate-900 dark:text-gray-100"
+                                    >
+                                        {{ user.name }}
+                                    </p>
+                                    <p class="truncate text-xs text-slate-500">
+                                        {{ user.email }}
+                                    </p>
+                                </div>
+                            </div>
+                            <Link
+                                v-else
+                                href="/login"
+                                @click="close"
+                                class="mb-4 flex w-full items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 py-3 text-sm font-bold text-white"
+                            >
+                                <MaterialIcon name="login" :size="20" /> Sign in
+                            </Link>
+
+                            <!-- Overflow items (rest not in bottom nav) -->
+                            <p
+                                class="mb-2 px-2 text-[11px] font-bold tracking-widest text-slate-400 uppercase dark:text-gray-500"
+                            >
+                                More
+                            </p>
+                            <nav class="space-y-1">
+                                <Link
+                                    v-for="item in availableItems"
+                                    :key="item.href"
+                                    :href="item.href"
+                                    @click="close"
+                                    :class="[
+                                        'flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium',
+                                        isActive(item.href, item.match)
+                                            ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400'
+                                            : 'text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-900',
+                                    ]"
+                                >
+                                    <MaterialIcon
+                                        :name="item.icon"
+                                        :size="22"
+                                    />
+                                    <span>{{ item.label }}</span>
+                                </Link>
+                                <p
+                                    v-if="availableItems.length === 0"
+                                    class="px-3 py-2 text-xs text-slate-500 dark:text-gray-400"
+                                >
+                                    All items are in your bottom bar. Customize
+                                    in Profile → Bottom navigation.
+                                </p>
+                            </nav>
+
+                            <!-- Install -->
+                            <button
+                                v-if="canInstallApp"
+                                type="button"
+                                @click="handleInstallApp"
+                                class="mt-4 flex w-full items-center gap-3 rounded-xl border border-indigo-200 bg-indigo-50 px-3 py-2.5 text-sm font-semibold text-indigo-700 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300"
+                            >
+                                <MaterialIcon name="download" :size="22" />
+                                Install App
+                            </button>
+
+                            <!-- Admin / Profile -->
+                            <div
+                                v-if="user"
+                                class="mt-6 space-y-1 border-t border-slate-100 pt-4 dark:border-gray-800"
+                            >
+                                <Link
+                                    :href="
+                                        user.username
+                                            ? `/u/${user.username}`
+                                            : '/profile'
+                                    "
+                                    @click="close"
+                                    class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-900"
+                                >
+                                    <MaterialIcon name="person" :size="20" />
+                                    Profile
+                                </Link>
+                                <Link
+                                    v-if="canAccessAdmin"
+                                    :href="isAdminRoute ? '/' : '/admin'"
+                                    @click="close"
+                                    class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-900"
+                                >
+                                    <MaterialIcon name="dashboard" :size="20" />
+                                    {{ isAdminRoute ? 'Home' : 'Staff Panel' }}
+                                </Link>
+                                <Link
+                                    href="/logout"
+                                    method="post"
+                                    as="button"
+                                    class="flex w-full items-center gap-3 rounded-xl px-3 py-2 text-sm text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950/40"
+                                >
+                                    <MaterialIcon name="logout" :size="20" />
+                                    Sign out
+                                </Link>
+                            </div>
+
+                            <!-- Theme -->
+                            <div class="mt-6">
+                                <p
+                                    class="mb-2 px-2 text-[11px] font-bold tracking-widest text-slate-400 uppercase dark:text-gray-500"
+                                >
+                                    Appearance
+                                </p>
+                                <div
+                                    class="grid grid-cols-3 gap-1 rounded-xl bg-slate-100 p-1 dark:bg-gray-900"
+                                >
+                                    <button
+                                        type="button"
+                                        @click="setTheme('light')"
+                                        :class="[
+                                            'rounded-lg py-2 text-xs font-semibold',
+                                            theme === 'light'
+                                                ? 'bg-white shadow dark:bg-gray-800'
+                                                : 'text-slate-500',
+                                        ]"
+                                    >
+                                        <span
+                                            class="flex items-center justify-center gap-1"
+                                            ><MaterialIcon
+                                                name="light_mode"
+                                                :size="16"
+                                            />
+                                            Light</span
+                                        >
+                                    </button>
+                                    <button
+                                        type="button"
+                                        @click="setTheme('dark')"
+                                        :class="[
+                                            'rounded-lg py-2 text-xs font-semibold',
+                                            theme === 'dark'
+                                                ? 'bg-white shadow dark:bg-gray-800'
+                                                : 'text-slate-500',
+                                        ]"
+                                    >
+                                        <span
+                                            class="flex items-center justify-center gap-1"
+                                            ><MaterialIcon
+                                                name="dark_mode"
+                                                :size="16"
+                                            />
+                                            Dark</span
+                                        >
+                                    </button>
+                                    <button
+                                        type="button"
+                                        @click="setTheme('system')"
+                                        :class="[
+                                            'rounded-lg py-2 text-xs font-semibold',
+                                            theme === 'system'
+                                                ? 'bg-white shadow dark:bg-gray-800'
+                                                : 'text-slate-500',
+                                        ]"
+                                    >
+                                        <span
+                                            class="flex items-center justify-center gap-1"
+                                            ><MaterialIcon
+                                                name="computer"
+                                                :size="16"
+                                            />
+                                            System</span
+                                        >
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </aside>
+                </Transition>
+            </div>
+        </Teleport>
+    </div>
+</template>
diff --git a/resources/js/components/navigation/ResponsiveNavigation.vue b/resources/js/components/navigation/ResponsiveNavigation.vue
new file mode 100644
index 00000000..e8a91be5
--- /dev/null
+++ b/resources/js/components/navigation/ResponsiveNavigation.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+import { useOrientation } from '@/lib/useOrientation';
+
+import BottomNav from './BottomNav.vue';
+import OverflowDrawer from './OverflowDrawer.vue';
+import SideRail from './SideRail.vue';
+
+const { isLandscape } = useOrientation();
+
+const railCollapsed = ref<boolean>(false);
+
+// Persist rail state
+if (typeof window !== 'undefined') {
+    try {
+        const saved = localStorage.getItem('rail_collapsed');
+
+        if (saved !== null) {
+            railCollapsed.value = saved === 'true';
+        }
+    } catch {}
+}
+
+watch(railCollapsed, (v) => {
+    try {
+        localStorage.setItem('rail_collapsed', String(v));
+    } catch {}
+});
+
+const toggleRail = () => {
+    railCollapsed.value = !railCollapsed.value;
+};
+
+const drawerOpen = ref(false);
+</script>
+
+<template>
+    <div>
+        <!-- Landscape: Side rail -->
+        <SideRail
+            v-if="isLandscape"
+            :collapsed="railCollapsed"
+            @toggle="toggleRail"
+        />
+
+        <!-- Portrait: Top hamburger + drawer + bottom nav -->
+        <OverflowDrawer
+            v-if="!isLandscape"
+            :open="drawerOpen"
+            @update:open="drawerOpen = $event"
+            @close="drawerOpen = false"
+        />
+        <BottomNav v-if="!isLandscape" />
+    </div>
+</template>
diff --git a/resources/js/components/navigation/SideRail.vue b/resources/js/components/navigation/SideRail.vue
new file mode 100644
index 00000000..bf65a91b
--- /dev/null
+++ b/resources/js/components/navigation/SideRail.vue
@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { Link, usePage } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+import AppLogo from '@/components/AppLogo.vue';
+import NotificationDropdown from '@/components/NotificationDropdown.vue';
+import MaterialIcon from '@/components/ui/MaterialIcon.vue';
+import { allNavItems } from '@/lib/navigation';
+import { useDarkMode } from '@/lib/useDarkMode';
+import { usePwa } from '@/lib/usePwa';
+
+type Props = {
+    collapsed: boolean;
+};
+
+defineProps<Props>();
+const emit = defineEmits<{ (e: 'toggle'): void }>();
+
+const page = usePage();
+const user = computed(
+    () => page.props.auth?.user as App.Data.UserData | undefined,
+);
+const canAccessAdmin = computed(() =>
+    Boolean(page.props.auth?.can_access_admin),
+);
+const isAdminRoute = computed(() => String(page.url).startsWith('/admin'));
+const currentUrl = computed(() => String(page.url));
+
+const { theme, toggle } = useDarkMode();
+const { deferredPrompt, isInstalled, promptInstall } = usePwa();
+const canInstallApp = computed(
+    () => !isInstalled.value && Boolean(deferredPrompt.value),
+);
+const handleInstallApp = async () => {
+    await promptInstall();
+};
+
+const homeHref = computed(() => {
+    if (typeof window !== 'undefined') {
+        try {
+            const pref = localStorage.getItem('preferred_course');
+
+            if (pref === 'ssc') {
+                return '/ssc';
+            }
+        } catch {}
+    }
+
+    return currentUrl.value.startsWith('/ssc') ? '/ssc' : '/';
+});
+
+const isActive = (href: string, match?: (url: string) => boolean) => {
+    if (match) {
+        return match(currentUrl.value);
+    }
+
+    return currentUrl.value.startsWith(href);
+};
+
+// Persist collapsed is handled by parent
+</script>
+
+<template>
+    <aside
+        :class="[
+            'flex shrink-0 flex-col bg-white/70 backdrop-blur-xl transition-all duration-300 dark:bg-slate-900/60 dark:backdrop-blur-xl',
+            'sticky top-0 h-screen border-r border-slate-200/60 shadow-[1px_0_3px_rgba(0,0,0,0.02),4px_0_16px_rgba(0,0,0,0.03)] dark:border-slate-800/60 dark:shadow-none',
+            collapsed ? 'w-[72px]' : 'w-[280px]',
+        ]"
+        aria-label="Side navigation"
+    >
+        <!-- Header: Logo + Collapse toggle — collapsed stacks vertically to fit 72px rail -->
+        <div
+            :class="[
+                'flex shrink-0 items-center border-b border-slate-200/60 bg-white/70 backdrop-blur-xl dark:border-slate-800/60 dark:bg-slate-900/60 dark:backdrop-blur-xl',
+                collapsed
+                    ? 'h-auto flex-col justify-center gap-3 px-2 py-3'
+                    : 'h-16 flex-row justify-between px-3',
+            ]"
+        >
+            <AppLogo v-if="!collapsed" />
+            <Link
+                v-else
+                :href="homeHref"
+                class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-lg bg-slate-900 shadow-sm ring-1 ring-slate-900/10 dark:bg-gray-100"
+                aria-label="Home"
+            >
+                <img
+                    src="/favicon.svg"
+                    alt="HSCStack"
+                    class="h-6 w-6 scale-120 object-cover"
+                />
+            </Link>
+            <button
+                type="button"
+                @click="emit('toggle')"
+                class="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-500 shadow-sm transition-all duration-150 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 hover:shadow dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:border-slate-600 dark:hover:bg-slate-700 dark:hover:text-slate-100"
+                :aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+            >
+                <MaterialIcon
+                    :name="collapsed ? 'chevron_right' : 'chevron_left'"
+                    :size="18"
+                />
+            </button>
+        </div>
+
+        <!-- Scrollable nav -->
+        <div class="flex flex-1 flex-col overflow-y-auto py-3.5">
+            <!-- Primary + Overflow combined for desktop rail -->
+            <nav class="space-y-0.5 px-2.5">
+                <Link
+                    v-for="item in allNavItems"
+                    :key="item.href"
+                    :href="item.href === '/' ? homeHref : item.href"
+                    :class="[
+                        'group flex items-center gap-2.5 rounded-[10px] px-2.5 py-2 text-[13px] font-medium tracking-tight transition-all duration-150 ease-out',
+                        isActive(item.href, item.match)
+                            ? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200/60 dark:bg-indigo-500/10 dark:text-indigo-200 dark:ring-indigo-500/20'
+                            : 'text-slate-600 hover:bg-slate-100/80 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/70 dark:hover:text-slate-100',
+                        collapsed ? 'justify-center px-2' : '',
+                    ]"
+                    :title="collapsed ? item.label : undefined"
+                >
+                    <MaterialIcon
+                        :name="item.icon"
+                        :size="22"
+                        :class="[
+                            'shrink-0 transition-colors duration-150',
+                            isActive(item.href, item.match)
+                                ? 'text-indigo-600 dark:text-indigo-300'
+                                : 'text-slate-500 group-hover:text-slate-700 dark:text-slate-500 dark:group-hover:text-slate-300',
+                        ]"
+                    />
+                    <span v-if="!collapsed" class="truncate">{{
+                        item.label
+                    }}</span>
+                    <span
+                        v-if="!collapsed && isActive(item.href, item.match)"
+                        class="ml-auto h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-600 dark:bg-indigo-400"
+                    />
+                </Link>
+            </nav>
+        </div>
+
+        <!-- Footer controls -->
+        <div
+            class="border-t border-slate-200/60 bg-white/40 p-2 backdrop-blur-sm dark:border-slate-800/60 dark:bg-slate-900/40 dark:backdrop-blur-sm"
+        >
+            <div class="space-y-1.5">
+                <!-- Theme -->
+                <button
+                    type="button"
+                    @click="toggle"
+                    :aria-label="collapsed ? `Theme: ${theme}` : undefined"
+                    :title="collapsed ? `Theme: ${theme}` : undefined"
+                    :class="[
+                        'flex h-11 w-full items-center gap-2.5 rounded-xl border px-3 text-[13px] font-semibold transition-all duration-150',
+                        'border-transparent text-slate-600 hover:border-slate-200 hover:bg-white hover:text-slate-900 hover:shadow-sm dark:text-slate-400 dark:hover:border-slate-700 dark:hover:bg-slate-800 dark:hover:text-slate-100',
+                        collapsed ? 'justify-center' : '',
+                    ]"
+                >
+                    <MaterialIcon
+                        :name="
+                            theme === 'system'
+                                ? 'computer'
+                                : theme === 'light'
+                                  ? 'light_mode'
+                                  : 'dark_mode'
+                        "
+                        :size="20"
+                    />
+                    <span v-if="!collapsed" class="capitalize">{{
+                        theme
+                    }}</span>
+                </button>
+
+                <!-- Notifications -->
+                <div
+                    v-if="user"
+                    :class="[
+                        'flex',
+                        collapsed ? 'justify-center px-0' : 'px-2 py-1',
+                    ]"
+                >
+                    <NotificationDropdown />
+                </div>
+
+                <!-- PWA Install — absolute bottom, above login — same size as Login -->
+                <button
+                    v-if="canInstallApp"
+                    type="button"
+                    aria-label="Install App"
+                    :title="collapsed ? 'Install App' : undefined"
+                    @click="handleInstallApp"
+                    :class="[
+                        'flex h-11 w-full items-center justify-center gap-2.5 rounded-xl border px-3 text-[13px] font-bold shadow-sm transition-all duration-150',
+                        collapsed
+                            ? 'border-slate-900 bg-slate-900 text-white hover:bg-slate-800 dark:border-white dark:bg-white dark:text-slate-900'
+                            : 'border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-100 hover:shadow-sm dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:bg-indigo-500/20',
+                    ]"
+                >
+                    <MaterialIcon name="download" :size="20" />
+                    <span v-if="!collapsed">Install App</span>
+                </button>
+
+                <!-- Auth -->
+                <div :class="collapsed ? 'px-0' : 'px-2 pt-1'">
+                    <Link
+                        v-if="!user"
+                        href="/login"
+                        :class="[
+                            'flex h-11 w-full items-center justify-center gap-2.5 rounded-xl border px-3 text-[13px] font-bold shadow-sm transition-all duration-150',
+                            'border-transparent bg-indigo-600 text-white hover:bg-indigo-700 hover:shadow-md dark:bg-indigo-500 dark:hover:bg-indigo-400',
+                            collapsed ? '' : '',
+                        ]"
+                    >
+                        <MaterialIcon name="login" :size="20" />
+                        <span v-if="!collapsed">Login</span>
+                    </Link>
+                    <div
+                        v-else
+                        :class="[
+                            'flex items-center gap-3 rounded-xl border bg-white px-3 py-2.5 shadow-sm dark:border-slate-700 dark:bg-slate-800',
+                            collapsed
+                                ? 'flex-col justify-center gap-2 py-3'
+                                : 'justify-between',
+                        ]"
+                    >
+                        <Link
+                            :href="
+                                user.username
+                                    ? `/u/${user.username}`
+                                    : '/profile'
+                            "
+                            :class="[
+                                'flex items-center gap-2.5',
+                                collapsed ? 'justify-center' : 'min-w-0',
+                            ]"
+                            :title="collapsed ? 'Profile' : undefined"
+                            :aria-label="collapsed ? 'Profile' : undefined"
+                        >
+                            <img
+                                v-if="user.image_url"
+                                :src="user.image_url"
+                                :alt="user.name"
+                                class="h-8 w-8 rounded-full object-cover ring-1 ring-slate-200 dark:ring-slate-700"
+                            />
+                            <span
+                                v-else
+                                class="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-indigo-600 to-violet-600 text-xs font-bold text-white ring-1 ring-indigo-600/20"
+                                >{{ user.name.charAt(0).toUpperCase() }}</span
+                            >
+                            <div v-if="!collapsed" class="min-w-0 text-left">
+                                <p
+                                    class="truncate text-xs font-semibold text-slate-900 dark:text-slate-100"
+                                >
+                                    {{ user.name }}
+                                </p>
+                                <p
+                                    class="truncate text-[11px] text-slate-500 dark:text-slate-400"
+                                >
+                                    {{ user.email }}
+                                </p>
+                            </div>
+                        </Link>
+                        <Link
+                            v-if="canAccessAdmin"
+                            :href="isAdminRoute ? '/' : '/admin'"
+                            :class="[
+                                'shrink-0 rounded-lg p-1.5 text-slate-500 transition-colors hover:bg-white hover:text-slate-900 hover:shadow-sm dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-100',
+                                collapsed
+                                    ? 'bg-slate-50 dark:bg-slate-900'
+                                    : 'bg-slate-50 dark:bg-slate-900',
+                            ]"
+                            :title="isAdminRoute ? 'Home' : 'Staff Panel'"
+                            :aria-label="isAdminRoute ? 'Home' : 'Staff Panel'"
+                        >
+                            <MaterialIcon name="dashboard" :size="20" />
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </aside>
+</template>
diff --git a/resources/js/components/ui/MaterialIcon.vue b/resources/js/components/ui/MaterialIcon.vue
new file mode 100644
index 00000000..1ca1dd07
--- /dev/null
+++ b/resources/js/components/ui/MaterialIcon.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+/**
+ * Material Symbols Rounded — SVG-based via font glyphs
+ * Uses Google Material Symbols Rounded font with FILL=1, wght=400, GRAD=0, opsz=24
+ * Rendered as <span> with font-variation-settings — vector (SVG) glyphs, filled, weight 400 (bolder)
+ * Bridging: allows TypeScript usage in Vue SFCs without importing individual SVG files
+ */
+type Props = {
+    name: string;
+    filled?: boolean;
+    weight?: number;
+    opsz?: number;
+    size?: number | string;
+    class?: string;
+};
+
+withDefaults(defineProps<Props>(), {
+    filled: true,
+    weight: 400,
+    opsz: 24,
+    size: 24,
+});
+</script>
+
+<template>
+    <span
+        class="material-symbols-rounded select-none"
+        :class="($props.class as string)"
+        :style="{
+            fontVariationSettings: `'FILL' ${filled ? 1 : 0}, 'wght' ${weight}, 'GRAD' 0, 'opsz' ${opsz}`,
+            fontSize: typeof size === 'number' ? `${size}px` : (size as string),
+        }"
+        aria-hidden="true"
+        >{{ name }}</span
+    >
+</template>
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index 6abd825f..ee2d7e7c 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/resources/js/layouts/AppLayout.vue
@@ -1,9 +1,52 @@
 <script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
 import FloatingShareBar from '@/components/FloatingShareBar.vue';
 import Footer from '@/components/Footer.vue';
 import LoadingSpinner from '@/components/LoadingSpinner.vue';
-import NavBar from '@/components/NavBar.vue';
+import BottomNav from '@/components/navigation/BottomNav.vue';
+import OverflowDrawer from '@/components/navigation/OverflowDrawer.vue';
+import SideRail from '@/components/navigation/SideRail.vue';
 import ToastNotification from '@/components/ToastNotification.vue';
+import { useBreakpoint } from '@/lib/useBreakpoint';
+import { useOrientation } from '@/lib/useOrientation';
+
+const { isLandscape, isHydrated: orientationHydrated } = useOrientation();
+const { isMobile, isHydrated: breakpointHydrated } = useBreakpoint(1024);
+const isHydrated = computed(
+    () => orientationHydrated.value && breakpointHydrated.value,
+);
+// Mobile OR portrait → bottom nav; Desktop + landscape → side rail (keeps spec: "mobile or portrait")
+const showSideRail = computed(() =>
+    isHydrated.value ? !isMobile.value && isLandscape.value : true,
+);
+const showBottomNav = computed(() =>
+    isHydrated.value ? isMobile.value || !isLandscape.value : false,
+);
+
+const railCollapsed = ref(false);
+
+if (typeof window !== 'undefined') {
+    try {
+        const saved = localStorage.getItem('rail_collapsed');
+
+        if (saved !== null) {
+            railCollapsed.value = saved === 'true';
+        }
+    } catch {}
+}
+
+watch(railCollapsed, (v) => {
+    try {
+        localStorage.setItem('rail_collapsed', String(v));
+    } catch {}
+});
+
+const toggleRail = () => {
+    railCollapsed.value = !railCollapsed.value;
+};
+
+const drawerOpen = ref(false);
 </script>
 
 <template>
@@ -15,7 +58,6 @@ import ToastNotification from '@/components/ToastNotification.vue';
             <div
                 class="absolute -top-[30%] left-1/2 h-[900px] w-[1200px] -translate-x-1/2 rounded-full bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.18)_0%,rgba(165,180,252,0.05)_50%,transparent_70%)] blur-[120px] dark:bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.06)_0%,rgba(165,180,252,0.02)_50%,transparent_70%)]"
             ></div>
-
             <div
                 class="absolute top-[20%] -right-[10%] h-[600px] w-[600px] rounded-full bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.15)_0%,transparent_65%)] blur-[100px] dark:bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.05)_0%,transparent_65%)]"
             ></div>
@@ -24,13 +66,48 @@ import ToastNotification from '@/components/ToastNotification.vue';
             ></div>
         </div>
 
-        <div class="relative z-10 flex min-h-screen flex-col">
-            <NavBar />
-            <main class="min-h-[calc(100vh-4rem)] flex-1">
-                <slot />
-            </main>
-            <Footer v-if="$page.component !== 'Chat/Index'" />
+        <!-- Responsive shell: desktop + landscape = side rail; mobile OR portrait = bottom nav + top hamburger -->
+        <div class="relative z-10 flex min-h-screen">
+            <!-- Desktop side rail -->
+            <SideRail
+                v-if="showSideRail"
+                :collapsed="railCollapsed"
+                @toggle="toggleRail"
+            />
+
+            <div class="flex min-h-screen flex-1 flex-col">
+                <!-- Mobile top bar + hamburger -->
+                <OverflowDrawer
+                    v-if="showBottomNav"
+                    :open="drawerOpen"
+                    @update:open="drawerOpen = $event"
+                    @close="drawerOpen = false"
+                />
+
+                <main
+                    :class="[
+                        'flex-1',
+                        showBottomNav ? 'pb-4' : 'min-h-[calc(100vh-4rem)]',
+                    ]"
+                >
+                    <slot />
+                </main>
+
+                <!-- Footer: always visible (was hidden on mobile) — on mobile it's a compact version above bottom nav -->
+                <div
+                    v-if="$page.component !== 'Chat/Index'"
+                    :class="
+                        showBottomNav
+                            ? 'pb-[calc(4.5rem+env(safe-area-inset-bottom))]'
+                            : ''
+                    "
+                >
+                    <Footer />
+                </div>
+            </div>
         </div>
+
+        <BottomNav v-if="showBottomNav" />
         <FloatingShareBar />
         <ToastNotification />
     </div>
diff --git a/resources/js/lib/navigation.ts b/resources/js/lib/navigation.ts
new file mode 100644
index 00000000..e57b42b9
--- /dev/null
+++ b/resources/js/lib/navigation.ts
@@ -0,0 +1,82 @@
+export type NavItem = {
+    label: string;
+    labelBn?: string;
+    href: string;
+    /** Material Symbols Rounded name — rendered via MaterialIcon (filled, wght 300) */
+    icon: string;
+    match: (url: string) => boolean;
+    showInBottom?: boolean;
+};
+
+export const primaryNavItems: NavItem[] = [
+    {
+        label: 'Home',
+        href: '/',
+        icon: 'home',
+        match: (url) =>
+            url === '/' ||
+            url.startsWith('/?') ||
+            url === '/ssc' ||
+            url.startsWith('/ssc?'),
+        showInBottom: true,
+    },
+    {
+        label: 'Forum',
+        href: '/forum',
+        icon: 'forum',
+        match: (url) => url.startsWith('/forum'),
+        showInBottom: true,
+    },
+    {
+        label: 'Chat',
+        labelBn: 'Global Chat',
+        href: '/chat',
+        icon: 'chat',
+        match: (url) => url.startsWith('/chat'),
+        showInBottom: true,
+    },
+    {
+        label: 'AI',
+        labelBn: 'HSCStack AI',
+        href: '/ai',
+        icon: 'smart_toy',
+        match: (url) => url.startsWith('/ai'),
+        showInBottom: true,
+    },
+];
+
+export const overflowNavItems: NavItem[] = [
+    {
+        label: 'Blogs',
+        href: '/blogs',
+        icon: 'menu_book',
+        match: (url) => url.startsWith('/blogs'),
+    },
+    {
+        label: 'Support',
+        href: '/support',
+        icon: 'help',
+        match: (url) => url.startsWith('/support'),
+    },
+    {
+        label: 'About',
+        href: '/about-us',
+        icon: 'info',
+        match: (url) => url.startsWith('/about-us'),
+    },
+    {
+        label: 'Join',
+        labelBn: 'Join Team',
+        href: '/join',
+        icon: 'group_add',
+        match: (url) => url.startsWith('/join'),
+    },
+    {
+        label: 'Donate',
+        href: '/donate',
+        icon: 'volunteer_activism',
+        match: (url) => url.startsWith('/donate'),
+    },
+];
+
+export const allNavItems: NavItem[] = [...primaryNavItems, ...overflowNavItems];
diff --git a/resources/js/lib/useBottomNavCustomization.ts b/resources/js/lib/useBottomNavCustomization.ts
new file mode 100644
index 00000000..a355ba16
--- /dev/null
+++ b/resources/js/lib/useBottomNavCustomization.ts
@@ -0,0 +1,210 @@
+import { usePage } from '@inertiajs/vue3';
+import { computed, ref, watch } from 'vue';
+
+import { allNavItems } from '@/lib/navigation';
+import type { NavItem } from '@/lib/navigation';
+
+const STORAGE_KEY = 'hscstack:bottom-nav:v1';
+const MIN_TOTAL = 3;
+const MAX_TOTAL = 5;
+
+// Home is always first, Account is always last
+const HOME_HREF = '/';
+const CUSTOMIZABLE_POOL: NavItem[] = allNavItems.filter(
+    (i) => i.href !== HOME_HREF,
+);
+
+const DEFAULT_MIDDLE_HREFS = ['/forum', '/chat', '/ai']; // 3 middle → 5 total with Home+Account
+
+function isValidHref(href: string): boolean {
+    return CUSTOMIZABLE_POOL.some((i) => i.href === href);
+}
+
+function loadStored(): string[] | null {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+
+        if (!raw) {
+            return null;
+        }
+
+        const parsed = JSON.parse(raw) as unknown;
+
+        if (!Array.isArray(parsed)) {
+            return null;
+        }
+
+        const filtered = (parsed as string[]).filter(isValidHref);
+        // Dedupe
+        const deduped = [...new Set(filtered)];
+
+        if (deduped.length < MIN_TOTAL - 2 || deduped.length > MAX_TOTAL - 2) {
+            return null;
+        }
+
+        return deduped;
+    } catch {
+        return null;
+    }
+}
+
+function persist(hrefs: string[]) {
+    if (typeof window === 'undefined') {
+        return;
+    }
+
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(hrefs));
+    } catch {}
+}
+
+// Client-side module-level singleton — shared across all consumers
+const sharedMiddleHrefs = ref<string[]>(
+    loadStored() ?? [...DEFAULT_MIDDLE_HREFS],
+);
+let hasPersistWatcher = false;
+
+function ensurePersistWatcher() {
+    if (hasPersistWatcher || typeof window === 'undefined') {
+        return;
+    }
+
+    hasPersistWatcher = true;
+    watch(sharedMiddleHrefs, (v) => persist(v), { deep: true });
+}
+
+export function useBottomNavCustomization() {
+    const page = usePage();
+    const user = computed(
+        () => page.props.auth?.user as App.Data.UserData | undefined,
+    );
+
+    ensurePersistWatcher();
+    const middleHrefs = sharedMiddleHrefs;
+
+    const homeItem = computed<NavItem>(
+        () => allNavItems.find((i) => i.href === HOME_HREF)!,
+    );
+
+    const accountItem = computed<NavItem>(() => {
+        if (user.value) {
+            const href = user.value.username
+                ? `/u/${user.value.username}`
+                : '/profile';
+
+            return {
+                label: 'Account',
+                href,
+                icon: 'person',
+                match: (url: string) =>
+                    url.startsWith('/u/') || url.startsWith('/profile'),
+            };
+        }
+
+        return {
+            label: 'Login',
+            href: '/login',
+            icon: 'login',
+            match: (url: string) => url.startsWith('/login'),
+        };
+    });
+
+    const middleItems = computed<NavItem[]>(() => {
+        return middleHrefs.value
+            .map((href) => CUSTOMIZABLE_POOL.find((i) => i.href === href))
+            .filter((i): i is NavItem => Boolean(i));
+    });
+
+    const bottomNavItems = computed<NavItem[]>(() => {
+        return [homeItem.value, ...middleItems.value, accountItem.value];
+    });
+
+    const availableItems = computed<NavItem[]>(() => {
+        const used = new Set(middleHrefs.value);
+
+        return CUSTOMIZABLE_POOL.filter((i) => !used.has(i.href));
+    });
+
+    const canAdd = computed(() => bottomNavItems.value.length < MAX_TOTAL);
+    const canRemove = computed(() => bottomNavItems.value.length > MIN_TOTAL);
+
+    const addItem = (href: string) => {
+        if (!canAdd.value) {
+            return;
+        }
+
+        if (!isValidHref(href)) {
+            return;
+        }
+
+        if (middleHrefs.value.includes(href)) {
+            return;
+        }
+
+        middleHrefs.value = [...middleHrefs.value, href];
+    };
+
+    const removeItem = (href: string) => {
+        if (!canRemove.value) {
+            return;
+        }
+
+        if (homeItem.value.href === href) {
+            return;
+        }
+
+        if (accountItem.value.href === href) {
+            return;
+        }
+
+        middleHrefs.value = middleHrefs.value.filter((h) => h !== href);
+    };
+
+    const reorder = (fromIndex: number, toIndex: number) => {
+        // from/to are indices within middleHrefs (0 .. middle-1)
+        if (fromIndex < 0 || toIndex < 0) {
+            return;
+        }
+
+        if (
+            fromIndex >= middleHrefs.value.length ||
+            toIndex >= middleHrefs.value.length
+        ) {
+            return;
+        }
+
+        const copy = [...middleHrefs.value];
+        const [moved] = copy.splice(fromIndex, 1);
+        copy.splice(toIndex, 0, moved);
+        middleHrefs.value = copy;
+    };
+
+    const reset = () => {
+        middleHrefs.value = [...DEFAULT_MIDDLE_HREFS];
+    };
+
+    return {
+        // constants
+        MIN_TOTAL,
+        MAX_TOTAL,
+        // state
+        middleHrefs,
+        bottomNavItems,
+        availableItems,
+        homeItem,
+        accountItem,
+        canAdd,
+        canRemove,
+        // actions
+        addItem,
+        removeItem,
+        reorder,
+        reset,
+        // for customizer UI
+        customizablePool: CUSTOMIZABLE_POOL,
+    };
+}
diff --git a/resources/js/lib/useBreakpoint.ts b/resources/js/lib/useBreakpoint.ts
new file mode 100644
index 00000000..c542ba90
--- /dev/null
+++ b/resources/js/lib/useBreakpoint.ts
@@ -0,0 +1,62 @@
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+export function useBreakpoint(breakpointPx = 1024) {
+    const isMobile = ref(false);
+    const isDesktop = ref(true);
+    const isHydrated = ref(false);
+
+    let mql: MediaQueryList | null = null;
+
+    const update = () => {
+        if (mql) {
+            isMobile.value = mql.matches;
+            isDesktop.value = !mql.matches;
+
+            return;
+        }
+
+        if (typeof window !== 'undefined') {
+            isMobile.value = window.innerWidth < breakpointPx;
+            isDesktop.value = !isMobile.value;
+        }
+    };
+
+    const handler = () => update();
+
+    onMounted(() => {
+        isHydrated.value = true;
+
+        if (typeof window === 'undefined') {
+            return;
+        }
+
+        mql = window.matchMedia(`(max-width: ${breakpointPx - 1}px)`);
+        update();
+
+        if (mql.addEventListener) {
+            mql.addEventListener('change', handler);
+        } else {
+            mql.addListener(handler);
+        }
+
+        window.addEventListener('resize', handler);
+    });
+
+    onBeforeUnmount(() => {
+        if (!mql) {
+            return;
+        }
+
+        if (mql.removeEventListener) {
+            mql.removeEventListener('change', handler);
+        } else {
+            mql.removeListener(handler);
+        }
+
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', handler);
+        }
+    });
+
+    return { isMobile, isDesktop, isHydrated };
+}
diff --git a/resources/js/lib/useOrientation.ts b/resources/js/lib/useOrientation.ts
new file mode 100644
index 00000000..56239882
--- /dev/null
+++ b/resources/js/lib/useOrientation.ts
@@ -0,0 +1,66 @@
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+export type Orientation = 'landscape' | 'portrait';
+
+export function useOrientation() {
+    const isLandscape = ref<boolean>(false);
+    const isPortrait = ref<boolean>(true);
+    const isHydrated = ref<boolean>(false);
+
+    let mql: MediaQueryList | null = null;
+
+    const update = () => {
+        if (mql) {
+            isLandscape.value = mql.matches;
+            isPortrait.value = !mql.matches;
+
+            return;
+        }
+
+        if (typeof window !== 'undefined') {
+            isLandscape.value = window.innerWidth > window.innerHeight;
+            isPortrait.value = !isLandscape.value;
+        }
+    };
+
+    const handler = () => update();
+
+    onMounted(() => {
+        isHydrated.value = true;
+
+        if (typeof window === 'undefined') {
+            return;
+        }
+
+        mql = window.matchMedia('(orientation: landscape)');
+        update();
+
+        // Modern browsers
+        if (mql.addEventListener) {
+            mql.addEventListener('change', handler);
+        } else {
+            // Safari fallback
+            mql.addListener(handler);
+        }
+
+        window.addEventListener('resize', handler);
+    });
+
+    onBeforeUnmount(() => {
+        if (!mql) {
+            return;
+        }
+
+        if (mql.removeEventListener) {
+            mql.removeEventListener('change', handler);
+        } else {
+            mql.removeListener(handler);
+        }
+
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', handler);
+        }
+    });
+
+    return { isLandscape, isPortrait, isHydrated };
+}
diff --git a/resources/js/pages/Profile.vue b/resources/js/pages/Profile.vue
index c908ab55..85f7f181 100644
--- a/resources/js/pages/Profile.vue
+++ b/resources/js/pages/Profile.vue
@@ -13,6 +13,8 @@ import {
     LifeBuoy,
 } from 'lucide-vue-next';
 import { computed, ref } from 'vue';
+
+import BottomNavCustomizer from '@/components/navigation/BottomNavCustomizer.vue';
 import { compressImage } from '@/lib/imageCompression';
 
 const props = defineProps({
@@ -640,6 +642,9 @@ const submitForm = () => {
                 </transition>
             </div>
 
+            <!-- Bottom Navigation Customization (Mobile) -->
+            <BottomNavCustomizer />
+
             <!-- Support Center Link -->
             <div
                 class="flex flex-col items-start justify-between gap-4 rounded-2xl border border-slate-200/80 bg-white p-5 shadow-xs sm:flex-row sm:items-center dark:border-gray-700 dark:bg-gray-900"