diff --git a/frontend/public/logo.png b/frontend/public/logo.png
new file mode 100644
index 0000000..2cd032e
Binary files /dev/null and b/frontend/public/logo.png differ
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 8edd57e..e5285c1 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -12,13 +12,28 @@ import {
   Server,
   Users
 } from 'lucide-react'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 
 export default function Layout() {
   const { user, clearAuth } = useAuthStore()
   const navigate = useNavigate()
   const location = useLocation()
-  const [sidebarOpen, setSidebarOpen] = useState(true)
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+
+  // Set sidebar open by default on desktop, closed on mobile
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 1024) {
+        setSidebarOpen(true)
+      } else {
+        setSidebarOpen(false)
+      }
+    }
+    
+    handleResize() // Set initial state
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
 
   const handleLogout = () => {
     clearAuth()
@@ -48,6 +63,14 @@ export default function Layout() {
 
   return (
     <div className="min-h-screen bg-background-dark">
+      {/* Mobile backdrop overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
       {/* Sidebar */}
       <div
         className={`fixed inset-y-0 left-0 z-50 w-64 bg-background-dark border-r border-border-dark text-white transition-transform duration-300 ${
@@ -57,11 +80,26 @@ export default function Layout() {
         <div className="flex flex-col h-full">
           {/* Header */}
           <div className="flex items-center justify-between px-6 py-5 border-b border-border-dark">
-            <div className="flex items-center gap-2">
-              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+            <div className="flex items-center gap-3">
+              <img 
+                src="/logo.png" 
+                alt="Calypso Logo" 
+                className="w-10 h-10 object-contain"
+                onError={(e) => {
+                  // Fallback to text if image not found
+                  const target = e.target as HTMLImageElement
+                  target.style.display = 'none'
+                  const fallback = target.nextElementSibling as HTMLElement
+                  if (fallback) fallback.style.display = 'flex'
+                }}
+              />
+              <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center hidden">
                 <span className="text-white font-bold text-sm">C</span>
               </div>
-              <h1 className="text-xl font-black text-white font-display tracking-tight">Calypso</h1>
+              <div className="flex flex-col">
+                <h1 className="text-xl font-black text-white font-display tracking-tight">Calypso</h1>
+                <p className="text-[10px] text-text-secondary leading-tight">Dev Release V.1</p>
+              </div>
             </div>
             <button
               onClick={() => setSidebarOpen(false)}
@@ -116,7 +154,16 @@ export default function Layout() {
 
       {/* Main content */}
       <div className={`transition-all duration-300 ${sidebarOpen ? 'lg:ml-64' : 'ml-0'} bg-background-dark`}>
-        {/* Top bar - removed for dashboard design */}
+        {/* Top bar with burger menu button */}
+        <div className="sticky top-0 z-30 lg:hidden bg-background-dark border-b border-border-dark px-4 py-3">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="text-text-secondary hover:text-white transition-colors"
+            aria-label="Open menu"
+          >
+            <Menu className="h-6 w-6" />
+          </button>
+        </div>
         
         {/* Page content */}
         <main className="min-h-screen">
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 83b524f..b58b760 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -31,11 +31,29 @@ export default function LoginPage() {
   return (
     <div className="min-h-screen flex items-center justify-center bg-background-dark">
       <div className="max-w-md w-full space-y-8 p-8 bg-card-dark border border-border-dark rounded-lg shadow-md">
-        <div>
-          <h2 className="mt-6 text-center text-3xl font-extrabold text-white">
-            AtlasOS - Calypso
+        <div className="flex flex-col items-center">
+          {/* Logo */}
+          <div className="mb-4">
+            <img 
+              src="/logo.png" 
+              alt="Calypso Logo" 
+              className="w-16 h-16 object-contain"
+            />
+          </div>
+          {/* Title */}
+          <h2 className="text-center text-3xl font-extrabold text-white">
+            Calypso
           </h2>
+          {/* Version */}
+          <p className="mt-1 text-center text-xs text-text-secondary">
+            Dev Release V.1
+          </p>
+          {/* Subtitle */}
           <p className="mt-2 text-center text-sm text-text-secondary">
+            Adastra Backup Storage Appliance
+          </p>
+          {/* Sign in instruction */}
+          <p className="mt-4 text-center text-sm text-text-secondary">
             Sign in to your account
           </p>
         </div>
diff --git a/frontend/src/pages/System.tsx b/frontend/src/pages/System.tsx
index 8add6bb..bd3af61 100644
--- a/frontend/src/pages/System.tsx
+++ b/frontend/src/pages/System.tsx
@@ -18,9 +18,6 @@ export default function System() {
       {/* Top Navigation */}
       <header className="flex h-16 items-center justify-between border-b border-border-dark bg-background-dark px-6 lg:px-10 shrink-0 z-10">
         <div className="flex items-center gap-4">
-          <button className="text-text-secondary md:hidden hover:text-white">
-            <span className="material-symbols-outlined">menu</span>
-          </button>
           {/* Breadcrumbs */}
           <div className="flex items-center gap-2 text-sm">
             <Link to="/" className="text-text-secondary hover:text-white transition-colors">
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index f4ddf09..7cb9b11 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -13,6 +13,11 @@ export default defineConfig({
   server: {
     host: '0.0.0.0', // Listen on all interfaces to allow access via IP address
     port: 3000,
+    allowedHosts: [
+      'atlas-demo.avt.data-center.id',
+      'localhost',
+      '.localhost',
+    ],
     proxy: {
       '/api': {
         target: 'http://localhost:8080',