diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..fb5534f
Binary files /dev/null and b/.DS_Store differ
diff --git a/package-lock.json b/package-lock.json
index 1d19f5a..7c37e67 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "Rocky",
+  "name": "Rocky-Interface",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {}
diff --git a/rocky-interface/src/lib/components/Sidebar.svelte b/rocky-interface/src/lib/components/Sidebar.svelte
index 03dd8e3..7ebc611 100644
--- a/rocky-interface/src/lib/components/Sidebar.svelte
+++ b/rocky-interface/src/lib/components/Sidebar.svelte
@@ -9,6 +9,7 @@
 	import { selectedCourseId } from '$lib/stores/courseStore';
 	import { openCourseComposer } from '$lib/stores/courseComposerStore';
 	import { framesForRole, toFrameLabel, type FrameName } from '$lib/types/frame';
+	import {sidebarOpen} from '$lib/stores/sidebarStore';
 
 	const frames = Object.keys(frameMap) as FrameName[];
 	const isAdmin = $derived(Boolean(page.data.currentUser?.isAdmin));
@@ -108,6 +109,7 @@
 			}
 
 			currentFrame.set(frame);
+			sidebarOpen.set(false);
 		} catch (error) {
 			console.error('Session validation error:', error);
 			window.location.href = '/login';
@@ -152,6 +154,7 @@
 		selectedCourseId.set(courseId);
 		await handleFrameChange('courses');
 		courseMenuOpen = false;
+		sidebarOpen.set(false);
 		requestAnimationFrame(() => {
 			requestAnimationFrame(() => {
 				scrollToTopOfApp();
@@ -167,7 +170,11 @@
 	}
 </script>
 
-<nav class="sidebar">
+{#if $sidebarOpen}
+    <div class="sidebar-backdrop" onclick={() => sidebarOpen.set(false)} aria-hidden="true"></div>
+{/if}
+
+<nav class="sidebar" class:open={$sidebarOpen}>
 	{#each framesBeforeCourses as frame}
 		<button class="nav-link" class:active={activeFrame === frame} onclick={() => handleFrameChange(frame)}>{toFrameLabel(frame)}</button>
 	{/each}
diff --git a/rocky-interface/src/lib/components/Topbar.svelte b/rocky-interface/src/lib/components/Topbar.svelte
index 4170b46..1d39474 100644
--- a/rocky-interface/src/lib/components/Topbar.svelte
+++ b/rocky-interface/src/lib/components/Topbar.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { User } from '$lib/types/user';
 	import '$lib/styles/components/topbar.css';
+	import  {sidebarOpen} from '$lib/stores/sidebarStore';
 
 	let { user = null }: { user: User | null } = $props();
 
@@ -8,6 +9,12 @@
 </script>
 
 <header class="topbar">
+		<button class="hamburger" aria-label="Toggle menu" onclick={() => sidebarOpen.update(open => !open)}>
+			<span class="hamburger-line"></span>
+			<span class="hamburger-line"></span>
+			<span class="hamburger-line"></span>
+		</button>
+
 		<img src="/rocky.svg" alt="Rocky" class="brand-logo" />
 		<div class="brand-text">
 			<div class="brand-name">Rocky</div>
diff --git a/rocky-interface/src/lib/components/views/DashboardView.svelte b/rocky-interface/src/lib/components/views/DashboardView.svelte
index 300c029..591b9cd 100644
--- a/rocky-interface/src/lib/components/views/DashboardView.svelte
+++ b/rocky-interface/src/lib/components/views/DashboardView.svelte
@@ -110,30 +110,32 @@
 		</div>
 	</div>
 
-	{#if isLoading}
-		<div class="empty-state">
-			<p>Loading courses...</p>
-		</div>
-	{:else if error}
-		<div class="empty-state">
-			<p><strong>Error:</strong> {error}</p>
-		</div>
-	{:else if courses.length === 0}
-		<div class="empty-state">
-			<p>No courses available.</p>
-		</div>
-	{:else if viewMode === 'card'}
-			<div class="grid grid-3">
-				{#each courses as course}
-					<CourseCard {course} mode="card" on:open={handleOpenCourse} />
-				{/each}
+	<div class="section">
+		{#if isLoading}
+			<div class="empty-state">
+				<p>Loading courses...</p>
+			</div>
+		{:else if error}
+			<div class="empty-state">
+				<p><strong>Error:</strong> {error}</p>
 			</div>
-		{:else}
-			<div class="grid grid-1">
-				{#each courses as course}
-					<CourseCard {course} mode="list" on:open={handleOpenCourse} />
-				{/each}
+		{:else if courses.length === 0}
+			<div class="empty-state">
+				<p>No courses available.</p>
 			</div>
-	{/if}
+		{:else if viewMode === 'card'}
+				<div class="grid grid-3">
+					{#each courses as course}
+						<CourseCard {course} mode="card" on:open={handleOpenCourse} />
+					{/each}
+				</div>
+			{:else}
+				<div class="grid grid-1">
+					{#each courses as course}
+						<CourseCard {course} mode="list" on:open={handleOpenCourse} />
+					{/each}
+				</div>
+		{/if}
+	</div>
 </ViewShell>
 
diff --git a/rocky-interface/src/lib/stores/sidebarStore.ts b/rocky-interface/src/lib/stores/sidebarStore.ts
new file mode 100644
index 0000000..607fb12
--- /dev/null
+++ b/rocky-interface/src/lib/stores/sidebarStore.ts
@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const sidebarOpen = writable(false);
\ No newline at end of file
diff --git a/rocky-interface/src/lib/styles/components/components.css b/rocky-interface/src/lib/styles/components/components.css
index 9accdea..9c0ffc2 100644
--- a/rocky-interface/src/lib/styles/components/components.css
+++ b/rocky-interface/src/lib/styles/components/components.css
@@ -44,6 +44,34 @@
 	margin-left: auto;
 }
 
+/* Hamburger menu styles, doesn't show on desktop */
+.hamburger {
+	display:none;
+	flex-direction: column;
+	justify-content: center;
+	gap: 5px;
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	padding: 4px;
+	min-width: 48px;
+	min-height: 48px;
+}
+
+.hamburger-line {
+	display: block;
+	width: 24px;
+	height: 2px;
+	background: white;
+	border-radius: 2px;
+}
+
+@media (max-width: 768px) {
+	.hamburger {
+		display: flex;
+	}
+}
+
 /* ========== SIDEBAR ========== */
 .sidebar {
 	width: var(--size-sidebar-width);
@@ -84,6 +112,36 @@
 	flex: 1;
 }
 
+/* Overlay for mobile sidebar */
+@media (max-width: 768px) {
+	.sidebar {
+		position: fixed;
+		top: var(--size-topbar-height);
+		left: 0;
+		height: calc(100% - var(--size-topbar-height));
+		transform: translateX(-100%);
+		transition: transform 0.25s ease;
+		z-index: 200;
+	}
+
+	.sidebar.open {
+		transform: translateX(0);
+	}
+}
+.sidebar-backdrop {
+	display: none;
+}
+
+@media (max-width: 768px) {
+	.sidebar-backdrop {
+		display: block;
+		position: fixed;
+		inset: var(--size-topbar-height) 0 0 0;
+		background: rgba(0, 0, 0, 0.4);
+		z-index: 199;
+	}
+}
+
 .course-tab-group {
 	position: relative;
 }
@@ -192,16 +250,26 @@
 
 /* ========== WIDGET PANEL ========== */
 .widget-panel {
-	width: var(--size-widget-panel-width);
-	min-width: var(--size-widget-panel-width);
-	height: 100%;
-	background: var(--color-bg-secondary);
-	border: 1px solid var(--color-gray-300);
-	box-shadow: var(--shadow-widget);
-	padding: var(--space-lg) var(--space-lg);
-	box-sizing: border-box;
-	overflow: visible;
-	flex-shrink: 0;
+    width: var(--size-widget-panel-width);
+    min-width: var(--size-widget-panel-width);
+    height: 100%;
+    background: var(--color-bg-secondary);
+    border: 1px solid var(--color-gray-300);
+    border-radius: var(--radius-xl); 
+    box-shadow: var(--shadow-widget);
+    padding: var(--space-lg) var(--space-lg);
+    box-sizing: border-box;
+    overflow: visible;
+    flex-shrink: 0;
+}
+
+@media (max-width: 768px) {
+    .widget-panel {
+        width: 100%;
+        min-width: 0;
+        height: auto;
+        border-top: 1px solid var(--color-gray-300);
+    }
 }
 
 .widget-panel-title {
@@ -484,9 +552,11 @@
 }
 
 .view-menu-backdrop {
-	position: fixed;
+	position: absolute	;
 	inset: 0;
 	z-index: 10;
+	background: transparent;
+	border-radius: 10px; 
 }
 
 .view-menu {
@@ -535,6 +605,7 @@
 
 .view-switcher {
 	position: relative;
+	z-index: 11;
 }
 
 /* ========== KPI/ANALYTICS CARDS ========== */
diff --git a/rocky-interface/src/lib/styles/layout/layout.css b/rocky-interface/src/lib/styles/layout/layout.css
index a6e9f74..706bcad 100644
--- a/rocky-interface/src/lib/styles/layout/layout.css
+++ b/rocky-interface/src/lib/styles/layout/layout.css
@@ -34,10 +34,14 @@
 	min-width: 0;
 }
 
-@media (max-width: 1200px) {
-	.page-layout {
-		gap: var(--space-md);
-	}
+@media (max-width: 768px) {
+    .app-content {
+        padding: var(--space-lg);
+        overflow-x: hidden;
+    }
+    .page-layout {
+        flex-direction: column;
+    }
 }
 
 /* ========== VIEW/PAGE STRUCTURE ========== */
@@ -85,12 +89,14 @@
 }
 
 .view-content {
-	flex: 1;
-	overflow-y: auto;
-	overflow-x: hidden;
-	padding-right: var(--space-sm);
-	scrollbar-width: thin;
-	scrollbar-color: var(--color-gray-300) transparent;
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: var(--space-sm);
+    padding-top: var(--space-sm);     
+    margin-top: calc(-1 * var(--space-sm)); 
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-gray-300) transparent;
 }
 
 .view-content::-webkit-scrollbar {
@@ -146,6 +152,7 @@
 	border-radius: var(--radius-xl);
 	padding: var(--space-lg);
 	box-shadow: var(--shadow-md);
+	min-height: fit-content;
 	min-height: 100%;
 }
 
diff --git a/rocky-interface/vite.config.ts b/rocky-interface/vite.config.ts
index 6c80b36..5978e55 100644
--- a/rocky-interface/vite.config.ts
+++ b/rocky-interface/vite.config.ts
@@ -49,3 +49,7 @@ export default defineConfig(({ mode }) => {
 		}
 	};
 });
+
+optimizeDeps: {
+    exclude: ['@azure/msal-browser']
+}