diff --git a/app/page.tsx b/app/page.tsx
index 740261d..8a724b9 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -13,10 +13,14 @@ import DecryptedText from "@/components/fancy/text/decrypted-text";
 import { NavigationMenu } from "@/components/ui/navigation-menu";
 import { LuxeButton } from "@/components/ui/luxe-button";
 import { ModelsSection } from "@/components/models-section";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { Menu } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 export default function Home() {
   const [isLoading, setIsLoading] = useState(true);
   const [fadeOut, setFadeOut] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   useEffect(() => {
     const loadContent = async () => {
@@ -181,7 +185,8 @@ export default function Home() {
         />
       </div>
 
-      <div className="fixed top-0 left-0 right-0 z-20 flex items-center justify-center p-4 ">
+      {/* Desktop Navigation */}
+      <div className="hidden md:flex fixed top-0 left-0 right-0 z-20 items-center justify-center p-4">
         <NavigationMenu>
           <NavigationMenuList>
             <NavigationMenuItem>
@@ -200,9 +205,54 @@ export default function Home() {
         </NavigationMenu>
       </div>
 
-      <main id="overview" className="w-full min-h-screen flex items-center justify-between overflow-hidden relative [scrollbar-width:none] [&::-webkit-scrollbar]:hidden scroll-mt-24">
+      {/* Mobile Navigation */}
+      <div className="md:hidden fixed top-4 right-4 z-20">
+        <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
+          <SheetTrigger asChild>
+            <Button variant="outline" size="icon" className="bg-background/80 backdrop-blur-sm">
+              <Menu className="h-5 w-5" />
+              <span className="sr-only">Toggle menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="right" className="w-[250px] sm:w-[300px]">
+            <nav className="flex flex-col gap-4 mt-8">
+              <Link 
+                href="#overview" 
+                className="text-lg font-medium hover:text-primary transition-colors py-2 border-b border-border"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                Overview
+              </Link>
+              <Link 
+                href="#models" 
+                className="text-lg font-medium hover:text-primary transition-colors py-2 border-b border-border"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                Models
+              </Link>
+              <Link 
+                href="#features" 
+                className="text-lg font-medium hover:text-primary transition-colors py-2 border-b border-border"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                Features
+              </Link>
+              <Link 
+                href="/watch" 
+                className="text-lg font-medium hover:text-primary transition-colors py-2"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                Dashboard
+              </Link>
+            </nav>
+          </SheetContent>
+        </Sheet>
+      </div>
+
+      <main id="overview" className="w-full min-h-screen flex items-center justify-center lg:justify-between overflow-hidden relative [scrollbar-width:none] [&::-webkit-scrollbar]:hidden scroll-mt-24">
 
-        <div className="z-10 ml-0 w-1/3 flex items-start justify-center relative pointer-events-none ">
+        {/* Desktop Layout */}
+        <div className="hidden lg:flex z-10 ml-0 w-1/3 items-start justify-center relative pointer-events-none">
           <div className="text-left">
             <h1 className="text-7xl mt-0 font-bold mb-4 pb-4">ARGUS</h1>
             <LuxeButton variant="animated-border" className="pointer-events-auto px-4 py-2 text-base">
@@ -211,25 +261,41 @@ export default function Home() {
           </div>
         </div>
 
-        <div className="z-10 mt-10 w-1/2 h-full flex items-center justify-center relative pointer-events-none">
-          <div className="w-full h-full flex items-center justify-center ">
+        <div className="hidden lg:flex z-10 mt-10 w-1/2 h-full items-center justify-center relative pointer-events-none">
+          <div className="w-full h-full flex items-center justify-center">
             <AsciiEye />
           </div>
         </div>
+
+        {/* Mobile Layout - Centered with Overlay */}
+        <div className="lg:hidden relative w-full h-screen flex items-center justify-center px-4">
+          {/* ASCII Eye Background */}
+          <div className="absolute inset-0 flex items-center justify-center pointer-events-none scale-90 sm:scale-100">
+            <AsciiEye />
+          </div>
+          
+          {/* Overlayed Text Content */}
+          <div className="relative z-20 flex flex-col items-center justify-center text-center space-y-6">
+            <h1 className="text-5xl sm:text-6xl md:text-7xl font-bold text-white drop-shadow-2xl">ARGUS</h1>
+            <LuxeButton variant="animated-border" className="pointer-events-auto px-6 py-3 text-base">
+              <Link href="/watch">Open Argus</Link>
+            </LuxeButton>
+          </div>
+        </div>
       </main>
 
-      <section id="models" className="w-full py-20 relative z-10 scroll-mt-24">
+      <section id="models" className="w-full py-12 lg:py-20 relative z-10 scroll-mt-24">
         <div className="container mx-auto px-4">
-          <h2 className="text-4xl font-bold text-center mb-6 text-foreground">Technology for the Future  </h2>
-          <p className="text-center text-muted-foreground mb-12 max-w-2xl mx-auto">Argus is built on the latest and greatest technologies to deliver the best possible experience for you and your team.</p>
+          <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-4 lg:mb-6 text-foreground">Technology for the Future</h2>
+          <p className="text-center text-sm sm:text-base text-muted-foreground mb-8 lg:mb-12 max-w-2xl mx-auto px-4">Argus is built on the latest and greatest technologies to deliver the best possible experience for you and your team.</p>
           <ModelsSection />
         </div>
       </section>
 
-      <section id="features" className="w-full py-20 relative z-10 scroll-mt-24">
+      <section id="features" className="w-full py-12 lg:py-20 relative z-10 scroll-mt-24">
         <div className="container mx-auto px-4">
-          <h2 className="text-4xl font-bold text-center mb-4 text-foreground">Features</h2>
-          <p className="text-center text-muted-foreground mb-12 max-w-2xl mx-auto">
+          <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-3 lg:mb-4 text-foreground">Features</h2>
+          <p className="text-center text-sm sm:text-base text-muted-foreground mb-8 lg:mb-12 max-w-2xl mx-auto px-4">
             Discover the powerful capabilities that make Argus the ultimate surveillance and monitoring solution.
           </p>
           <FeaturesAlternating features={featuresContent} />
diff --git a/components/ascii-eye.tsx b/components/ascii-eye.tsx
index 12f1db5..10556b4 100644
--- a/components/ascii-eye.tsx
+++ b/components/ascii-eye.tsx
@@ -196,7 +196,7 @@ export const AsciiEye = memo(function AsciiEye() {
   return (
     <div className="h-full w-full pointer-events-auto">
       <pre
-        className="font-medium sm:text-xs select-none"
+        className="font-medium text-[0.5rem] sm:text-[0.6rem] md:text-xs select-none"
         style={{
           fontFamily: "monospace",
           willChange: "transform", // GPU acceleration hint
diff --git a/components/features-alternating.tsx b/components/features-alternating.tsx
index d9d000e..98e8ec6 100644
--- a/components/features-alternating.tsx
+++ b/components/features-alternating.tsx
@@ -81,7 +81,7 @@ export function FeaturesAlternating({
   }, [features]);
 
   return (
-    <div className="w-full max-w-[80%] mx-auto space-y-24">
+    <div className="w-full max-w-[95%] lg:max-w-[80%] mx-auto space-y-12 lg:space-y-24">
       {features.map((feature, index) => {
         const isEven = index % 2 === 0;
         
@@ -91,41 +91,41 @@ export function FeaturesAlternating({
             ref={(el) => {
               sectionRefs.current[index] = el;
             }}
-            className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start"
+            className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-12 items-start"
           >
             {isEven ? (
               <>
                 {/* Left: Text Content */}
                 <LuxeCard variant="revealed-pointer" className="feature-card">
                   <LuxeCardHeader>
-                    <LuxeCardTitle className="text-2xl">
+                    <LuxeCardTitle className="text-xl lg:text-2xl">
                       {feature.title}
                     </LuxeCardTitle>
-                    <LuxeCardDescription className="text-lg">
+                    <LuxeCardDescription className="text-base lg:text-lg">
                       {feature.description}
                     </LuxeCardDescription>
                   </LuxeCardHeader>
                 </LuxeCard>
 
                 {/* Right: Browser Component */}
-                <div className="w-full min-h-[600px] feature-content">
+                <div className="w-full min-h-[300px] lg:min-h-[600px] feature-content">
                   {feature.content}
                 </div>
               </>
             ) : (
               <>
                 {/* Left: Browser Component */}
-                <div className="w-full min-h-[600px] feature-content">
+                <div className="w-full min-h-[300px] lg:min-h-[600px] feature-content lg:order-first">
                   {feature.content}
                 </div>
 
                 {/* Right: Text Content */}
-                <LuxeCard variant="revealed-pointer" className="feature-card">
+                <LuxeCard variant="revealed-pointer" className="feature-card lg:order-last">
                   <LuxeCardHeader>
-                    <LuxeCardTitle className="text-2xl">
+                    <LuxeCardTitle className="text-xl lg:text-2xl">
                       {feature.title}
                     </LuxeCardTitle>
-                    <LuxeCardDescription className="text-lg">
+                    <LuxeCardDescription className="text-base lg:text-lg">
                       {feature.description}
                     </LuxeCardDescription>
                   </LuxeCardHeader>
diff --git a/components/models-section.tsx b/components/models-section.tsx
index 925c576..85ccd91 100644
--- a/components/models-section.tsx
+++ b/components/models-section.tsx
@@ -16,11 +16,11 @@ const aiModels = [
 
 export function ModelsSection() {
   return (
-    <div className="w-full max-w-[80%] mx-auto">
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
+    <div className="w-full max-w-[95%] lg:max-w-[80%] mx-auto">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-start">
         {/* Left: Text with Highlighter */}
-        <div className="space-y-6">
-          <p className="text-lg leading-loose">
+        <div className="space-y-4 lg:space-y-6">
+          <p className="text-base lg:text-lg leading-relaxed lg:leading-loose">
             Argus leverages the{" "}
             <TextHighlighter
               triggerType="inView"
@@ -79,7 +79,7 @@ export function ModelsSection() {
             <br />
 
            </p>
-          <p className="text-lg leading-loose">
+          <p className="text-base lg:text-lg leading-relaxed lg:leading-loose">
             Built on a {" "}
             <TextHighlighter
               triggerType="inView"
@@ -115,7 +115,7 @@ export function ModelsSection() {
             and resilient delivery while segments are scheduled and analyzed at the edge.
           </p>
 
-          <p className="text-lg leading-loose">
+          <p className="text-base lg:text-lg leading-relaxed lg:leading-loose">
             Detections from {" "}
             <TextHighlighter
               triggerType="inView"
@@ -161,15 +161,15 @@ export function ModelsSection() {
         </div>
 
         {/* Right: AI Models List */}
-        <div className="space-y-6 lg:pl-12">
-          <div className="mb-4 text-right">
-            <Badge variant="secondary" className="mb-6">
+        <div className="space-y-4 lg:space-y-6 lg:pl-12">
+          <div className="mb-2 lg:mb-4 text-center lg:text-right">
+            <Badge variant="secondary" className="mb-4 lg:mb-6">
               Powered by
             </Badge>
           </div>
-          <div className="space-y-8 text-right">
+          <div className="space-y-4 lg:space-y-8 text-center lg:text-right">
             {aiModels.map((model, index) => (
-              <div key={index} className="text-2xl font-semibold">
+              <div key={index} className="text-xl lg:text-2xl font-semibold">
                 <ScrambleHover
                   text={model}
                   sequential={true}
diff --git a/components/user-nav.tsx b/components/user-nav.tsx
index 8f5d8d4..cd4fb1e 100644
--- a/components/user-nav.tsx
+++ b/components/user-nav.tsx
@@ -2,7 +2,7 @@
 
 import { IconLogout, IconSettings, IconUser } from "@tabler/icons-react";
 
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -28,11 +28,14 @@ export function UserNav() {
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
               <Avatar className="h-8 w-8 rounded-lg">
-                <AvatarFallback className="rounded-lg">U</AvatarFallback>
+                <AvatarImage 
+                    src="assets/admin.png"
+                    alt="Admin"
+                  />
               </Avatar>
               <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-semibold">User</span>
-                <span className="truncate text-xs">user@example.com</span>
+                <span className="truncate font-semibold">Admin</span>
+                <span className="truncate text-xs">admin@argus.ai</span>
               </div>
             </SidebarMenuButton>
           </DropdownMenuTrigger>
@@ -45,11 +48,14 @@ export function UserNav() {
             <DropdownMenuLabel className="p-0 font-normal">
               <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                 <Avatar className="h-8 w-8 rounded-lg">
-                  <AvatarFallback className="rounded-lg">U</AvatarFallback>
+                  <AvatarImage 
+                    src="assets/admin.png"
+                    alt="Admin"
+                  />
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
-                  <span className="truncate font-semibold">User</span>
-                  <span className="truncate text-xs">user@example.com</span>
+                  <span className="truncate font-semibold">Admin</span>
+                  <span className="truncate text-xs">admin@argus.ai</span>
                 </div>
               </div>
             </DropdownMenuLabel>
diff --git a/public/assets/admin.png b/public/assets/admin.png
new file mode 100644
index 0000000..1f12fb9
Binary files /dev/null and b/public/assets/admin.png differ