diff --git a/app/(main)/workspace/[id]/page.jsx b/app/(main)/workspace/[id]/page.jsx
index ba46ed9..62b3170 100644
--- a/app/(main)/workspace/[id]/page.jsx
+++ b/app/(main)/workspace/[id]/page.jsx
@@ -4,17 +4,19 @@ import React from 'react';
 
 const Workspace = () => {
     return (
-        <div className="min-h-screen bg-gray-950 relative overflow-hidden">
+        <div className="min-h-screen bg-gray-950 relative overflow-hidden mobile-container">
             {/* Animated background elements */}
             <div className="absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px]">
                 <div className="absolute left-1/2 top-0 h-[500px] w-[1000px] -translate-x-1/2 bg-[radial-gradient(circle_400px_at_50%_300px,#3b82f625,transparent)]" />
             </div>
 
             {/* Content */}
-            <div className='relative z-10 p-10'>
-                <div className='grid grid-cols-1 md:grid-cols-4 gap-10'>
-                    <ChatView />
-                    <div className='col-span-3'>
+            <div className='relative z-10 mobile-safe-padding py-4 sm:py-6 lg:py-10'>
+                <div className='grid grid-cols-1 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-10'>
+                    <div className="lg:col-span-1 order-2 lg:order-1">
+                        <ChatView />
+                    </div>
+                    <div className='lg:col-span-3 order-1 lg:order-2'>
                         <CodeView />
                     </div>
                 </div>
diff --git a/app/globals.css b/app/globals.css
index a23ac26..1180e59 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -70,3 +70,36 @@ body {
     @apply bg-background text-foreground;
   }
 }
+
+@layer utilities {
+  /* Mobile-first responsive utilities */
+  .mobile-safe-padding {
+    @apply px-4 sm:px-6 lg:px-8;
+  }
+  
+  .mobile-safe-text {
+    @apply text-sm sm:text-base lg:text-lg;
+  }
+  
+  .mobile-touch-target {
+    @apply min-h-[44px] min-w-[44px] sm:min-h-[48px] sm:min-w-[48px];
+  }
+  
+  .mobile-responsive-grid {
+    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 lg:gap-6;
+  }
+  
+  .mobile-scrollable {
+    @apply overflow-x-auto scrollbar-hide;
+  }
+  
+  /* Prevent horizontal scrolling on mobile */
+  .mobile-container {
+    @apply max-w-full overflow-x-hidden;
+  }
+  
+  /* Better mobile form inputs */
+  .mobile-input {
+    @apply text-base sm:text-sm; /* Prevents zoom on iOS */
+  }
+}
diff --git a/app/layout.js b/app/layout.js
index b9123a1..684b2a7 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -5,8 +5,9 @@ import ConvexClientProvider from "./ConvexClientProvider";
 
 
 export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "AI Powered Website Builder",
+  description: "Transform your wildest ideas into production-ready code with AI-powered assistance",
+  viewport: "width=device-width, initial-scale=1, maximum-scale=1",
 };
 
 export default function RootLayout({ children }) {
diff --git a/components/custom/ChatView.jsx b/components/custom/ChatView.jsx
index 20c5f6b..f0fc90c 100644
--- a/components/custom/ChatView.jsx
+++ b/components/custom/ChatView.jsx
@@ -67,28 +67,30 @@ function ChatView() {
     }
 
     return (
-        <div className="relative h-[85vh] flex flex-col bg-gray-900">
+        <div className="relative h-[50vh] lg:h-[85vh] flex flex-col bg-gray-900 rounded-lg">
             {/* Chat Messages */}
-            <div className="flex-1 overflow-y-auto scrollbar-hide p-4">
-                <div className="max-w-4xl mx-auto space-y-4">
+            <div className="flex-1 overflow-y-auto scrollbar-hide p-3 sm:p-4">
+                <div className="max-w-4xl mx-auto space-y-3 sm:space-y-4">
                     {Array.isArray(messages) && messages?.map((msg, index) => (
                         <div
                             key={index}
-                            className={`p-4 rounded-lg ${
+                            className={`p-3 sm:p-4 rounded-lg ${
                                 msg.role === 'user' 
                                     ? 'bg-gray-800/50 border border-gray-700' 
                                     : 'bg-gray-800/30 border border-gray-700'
                             }`}
                         >
-                            <div className="flex items-start gap-3">
-                                <div className={`p-2 rounded-lg ${
+                            <div className="flex items-start gap-2 sm:gap-3">
+                                <div className={`p-1.5 sm:p-2 rounded-lg flex-shrink-0 ${
                                     msg.role === 'user' 
                                         ? 'bg-blue-500/20 text-blue-400' 
                                         : 'bg-purple-500/20 text-purple-400'
                                 }`}>
-                                    {msg.role === 'user' ? 'You' : 'AI'}
+                                    <span className="text-xs sm:text-sm font-medium">
+                                        {msg.role === 'user' ? 'You' : 'AI'}
+                                    </span>
                                 </div>
-                                <ReactMarkdown className="prose prose-invert flex-1 overflow-auto">
+                                <ReactMarkdown className="prose prose-invert prose-sm sm:prose flex-1 overflow-auto text-sm sm:text-base">
                                     {msg.content}
                                 </ReactMarkdown>
                             </div>
@@ -96,10 +98,10 @@ function ChatView() {
                     ))}
                     
                     {loading && (
-                        <div className="p-4 rounded-lg bg-gray-800/30 border border-gray-700">
-                            <div className="flex items-center gap-3 text-gray-400">
-                                <Loader2Icon className="animate-spin h-5 w-5" />
-                                <p className="font-medium">Generating response...</p>
+                        <div className="p-3 sm:p-4 rounded-lg bg-gray-800/30 border border-gray-700">
+                            <div className="flex items-center gap-2 sm:gap-3 text-gray-400">
+                                <Loader2Icon className="animate-spin h-4 w-4 sm:h-5 sm:w-5" />
+                                <p className="font-medium text-sm sm:text-base">Generating response...</p>
                             </div>
                         </div>
                     )}
@@ -107,27 +109,27 @@ function ChatView() {
             </div>
 
             {/* Input Section */}
-            <div className="border-t border-gray-800 bg-gray-900/50 backdrop-blur-sm p-4">
+            <div className="border-t border-gray-800 bg-gray-900/50 backdrop-blur-sm p-3 sm:p-4">
                 <div className="max-w-4xl mx-auto">
-                    <div className="bg-gray-800/50 border border-gray-700 rounded-xl p-4">
-                        <div className="flex gap-3">
+                    <div className="bg-gray-800/50 border border-gray-700 rounded-xl p-3 sm:p-4">
+                        <div className="flex flex-col sm:flex-row gap-2 sm:gap-3">
                             <textarea
                                 placeholder="Type your message here..."
                                 value={userInput}
                                 onChange={(event) => setUserInput(event.target.value)}
-                                className="w-full bg-gray-900/50 border border-gray-700 rounded-xl p-4 text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all duration-200 resize-none h-32"
+                                className="w-full bg-gray-900/50 border border-gray-700 rounded-xl p-3 sm:p-4 text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all duration-200 resize-none h-20 sm:h-24 lg:h-32 mobile-input"
                             />
                             {userInput && (
                                 <button
                                     onClick={() => onGenerate(userInput)}
-                                    className="flex items-center justify-center bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 rounded-xl px-4 transition-all duration-200"
+                                    className="flex items-center justify-center bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 rounded-xl px-4 py-3 sm:px-4 sm:py-4 transition-all duration-200 self-end sm:self-auto mobile-touch-target"
                                 >
-                                    <Send className="h-6 w-6 text-white" />
+                                    <Send className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
                                 </button>
                             )}
                         </div>
-                        <div className="flex justify-end mt-3">
-                            <Link className="h-5 w-5 text-gray-400 hover:text-gray-300 transition-colors duration-200" />
+                        <div className="flex justify-end mt-2 sm:mt-3">
+                            <Link className="h-4 w-4 sm:h-5 sm:w-5 text-gray-400 hover:text-gray-300 transition-colors duration-200" />
                         </div>
                     </div>
                 </div>
diff --git a/components/custom/CodeView.jsx b/components/custom/CodeView.jsx
index 943aac7..c44c92f 100644
--- a/components/custom/CodeView.jsx
+++ b/components/custom/CodeView.jsx
@@ -151,28 +151,29 @@ function CodeView() {
 
     return (
         <div className='relative'>
-            <div className='bg-[#181818] w-full p-2 border'>
-                <div className='flex items-center justify-between'>
+            <div className='bg-[#181818] w-full p-2 sm:p-3 border rounded-t-lg'>
+                <div className='flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-0'>
                     <div className='flex items-center flex-wrap shrink-0 bg-black p-1 justify-center
-                    w-[140px] gap-3 rounded-full'>
+                    w-full sm:w-[140px] gap-2 sm:gap-3 rounded-full'>
                         <h2 onClick={() => setActiveTab('code')}
-                            className={`text-sm cursor-pointer 
-                        ${activeTab == 'code' && 'text-blue-500 bg-blue-500 bg-opacity-25 p-1 px-2 rounded-full'}`}>
+                            className={`text-xs sm:text-sm cursor-pointer px-2 py-1 rounded-full transition-all
+                        ${activeTab == 'code' ? 'text-blue-500 bg-blue-500 bg-opacity-25' : 'hover:bg-gray-700'}`}>
                             Code</h2>
 
                         <h2 onClick={() => setActiveTab('preview')}
-                            className={`text-sm cursor-pointer 
-                        ${activeTab == 'preview' && 'text-blue-500 bg-blue-500 bg-opacity-25 p-1 px-2 rounded-full'}`}>
+                            className={`text-xs sm:text-sm cursor-pointer px-2 py-1 rounded-full transition-all
+                        ${activeTab == 'preview' ? 'text-blue-500 bg-blue-500 bg-opacity-25' : 'hover:bg-gray-700'}`}>
                             Preview</h2>
                     </div>
                     
                     {/* Download Button */}
                     <button
                         onClick={downloadFiles}
-                        className="flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-full transition-colors duration-200"
+                        className="flex items-center gap-1 sm:gap-2 bg-blue-500 hover:bg-blue-600 text-white px-3 sm:px-4 py-2 rounded-full transition-colors duration-200 text-xs sm:text-sm mobile-touch-target"
                     >
-                        <Download className="h-4 w-4" />
-                        <span>Download Files</span>
+                        <Download className="h-3 w-3 sm:h-4 sm:w-4" />
+                        <span className="hidden sm:inline">Download Files</span>
+                        <span className="sm:hidden">Download</span>
                     </button>
                 </div>
             </div>
@@ -196,9 +197,9 @@ function CodeView() {
                 <div className="relative">
                     <SandpackLayout>
                         {activeTab=='code'?<>
-                            <SandpackFileExplorer style={{ height: '80vh' }} />
+                            <SandpackFileExplorer style={{ height: '50vh', minHeight: '400px' }} />
                             <SandpackCodeEditor 
-                            style={{ height: '80vh' }}
+                            style={{ height: '50vh', minHeight: '400px' }}
                             showTabs
                             showLineNumbers
                             showInlineErrors
@@ -206,7 +207,7 @@ function CodeView() {
                         </>:
                         <>
                             <SandpackPreview 
-                                style={{ height: '80vh' }} 
+                                style={{ height: '50vh', minHeight: '400px' }} 
                                 showNavigator={true}
                                 showOpenInCodeSandbox={false}
                                 showRefreshButton={true}
diff --git a/components/custom/Header.jsx b/components/custom/Header.jsx
index 4425d9b..240281c 100644
--- a/components/custom/Header.jsx
+++ b/components/custom/Header.jsx
@@ -4,23 +4,25 @@ import { Code, Sparkles } from 'lucide-react';
 function Header() {
     return (
         <header className="border-b border-gray-800 bg-gray-900/50 backdrop-blur-sm sticky top-0 z-50">
-            <div className="container mx-auto px-4">
-                <div className="flex items-center justify-between h-16">
+            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+                <div className="flex items-center justify-between h-14 sm:h-16">
                     {/* Logo and Title */}
-                    <div className="flex items-center space-x-3">
-                        <div className="bg-gradient-to-r from-blue-500 to-purple-500 p-2 rounded-lg">
-                            <Code className="h-5 w-5 text-white" />
+                    <div className="flex items-center space-x-2 sm:space-x-3">
+                        <div className="bg-gradient-to-r from-blue-500 to-purple-500 p-1.5 sm:p-2 rounded-lg">
+                            <Code className="h-4 w-4 sm:h-5 sm:w-5 text-white" />
                         </div>
-                        <h1 className="text-xl font-bold text-white">
-                            AI Powered Website Builder
+                        <h1 className="text-sm sm:text-lg lg:text-xl font-bold text-white leading-tight">
+                            <span className="hidden sm:inline">AI Powered Website Builder</span>
+                            <span className="sm:hidden">AI Builder</span>
                         </h1>
                     </div>
 
                     {/* Status Badge */}
                     <div className="flex items-center">
-                        <div className="flex items-center space-x-2 bg-green-500/10 text-green-400 px-3 py-1.5 rounded-full text-sm font-medium">
-                            <Sparkles className="h-4 w-4" />
-                            <span>AI Ready</span>
+                        <div className="flex items-center space-x-1 sm:space-x-2 bg-green-500/10 text-green-400 px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs sm:text-sm font-medium">
+                            <Sparkles className="h-3 w-3 sm:h-4 sm:w-4" />
+                            <span className="hidden sm:inline">AI Ready</span>
+                            <span className="sm:hidden">Ready</span>
                         </div>
                     </div>
                 </div>
diff --git a/components/custom/Hero.jsx b/components/custom/Hero.jsx
index 7ff12fc..69c5af7 100644
--- a/components/custom/Hero.jsx
+++ b/components/custom/Hero.jsx
@@ -55,85 +55,85 @@ function Hero() {
     };
 
     return (
-        <div className="min-h-screen bg-gray-950 relative overflow-hidden">
+        <div className="min-h-screen bg-gray-950 relative overflow-hidden mobile-container">
             {/* Animated background elements */}
             <div className="absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px]">
                 <div className="absolute left-1/2 top-0 h-[500px] w-[1000px] -translate-x-1/2 bg-[radial-gradient(circle_400px_at_50%_300px,#3b82f625,transparent)]" />
             </div>
 
-            <div className="container mx-auto px-4 py-16 relative z-10">
-                <div className="flex flex-col items-center justify-center space-y-12">
+            <div className="container mx-auto mobile-safe-padding py-8 sm:py-12 lg:py-16 relative z-10">
+                <div className="flex flex-col items-center justify-center space-y-8 sm:space-y-12">
                     {/* Hero Header */}
-                    <div className="text-center space-y-6">
-                        <div className="inline-flex items-center justify-center space-x-2 bg-electric-blue-500/20 rounded-full px-6 py-3 mb-6 border border-electric-blue-500/30">
-                            <Sparkles className="h-6 w-6 text-electric-blue-400" />
-                            <span className="text-electric-blue-400 text-lg font-semibold tracking-wide">
+                    <div className="text-center space-y-4 sm:space-y-6">
+                        <div className="inline-flex items-center justify-center space-x-2 bg-electric-blue-500/20 rounded-full px-4 sm:px-6 py-2 sm:py-3 mb-4 sm:mb-6 border border-electric-blue-500/30">
+                            <Sparkles className="h-4 w-4 sm:h-6 sm:w-6 text-electric-blue-400" />
+                            <span className="text-electric-blue-400 text-sm sm:text-lg font-semibold tracking-wide">
                                 NEXT-GEN AI DEVELOPMENT
                             </span>
                         </div>
-                        <h1 className="text-6xl md:text-7xl font-bold text-transparent bg-clip-text bg-[linear-gradient(45deg,#60a5fa_30%,#ec4899)] leading-tight">
-                            Code the <br className="md:hidden" />Impossible
+                        <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-transparent bg-clip-text bg-[linear-gradient(45deg,#60a5fa_30%,#ec4899)] leading-tight">
+                            Code the <br className="sm:hidden" />Impossible
                         </h1>
-                        <p className="text-xl text-neon-cyan max-w-3xl mx-auto font-mono tracking-tight">
+                        <p className="text-lg sm:text-xl text-neon-cyan max-w-xs sm:max-w-2xl lg:max-w-3xl mx-auto font-mono tracking-tight px-4 sm:px-0">
                             Transform your wildest ideas into production-ready code with Ai-powered assistance
                         </p>
                     </div>
 
                     {/* Modified Input Section */}
-                    <div className="w-full max-w-3xl bg-gray-900/40 backdrop-blur-2xl rounded-xl border-2 border-electric-blue-500/40 shadow-[0_0_40px_5px_rgba(59,130,246,0.15)]">
-                        <div className="p-2 bg-gradient-to-r from-electric-blue-500/10 to-purple-500/10">
-                            <div className="bg-gray-900/80 p-6 rounded-lg">
-                                <div className="flex gap-4">
+                    <div className="w-full max-w-xs sm:max-w-2xl lg:max-w-3xl bg-gray-900/40 backdrop-blur-2xl rounded-xl border-2 border-electric-blue-500/40 shadow-[0_0_40px_5px_rgba(59,130,246,0.15)]">
+                        <div className="p-1 sm:p-2 bg-gradient-to-r from-electric-blue-500/10 to-purple-500/10">
+                            <div className="bg-gray-900/80 p-4 sm:p-6 rounded-lg">
+                                <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
                                     <textarea
                                         placeholder="DESCRIBE YOUR VISION..."
                                         value={userInput}
                                         onChange={(e) => setUserInput(e.target.value)}
-                                        className="w-full bg-transparent border-2 border-electric-blue-500/30 rounded-lg p-5 text-gray-100 placeholder-electric-blue-500/60 focus:border-electric-blue-500 focus:ring-0 outline-none font-mono text-lg h-40 resize-none transition-all duration-300 hover:border-electric-blue-500/60"
+                                        className="w-full bg-transparent border-2 border-electric-blue-500/30 rounded-lg p-3 sm:p-5 text-gray-100 placeholder-electric-blue-500/60 focus:border-electric-blue-500 focus:ring-0 outline-none font-mono mobile-input h-24 sm:h-32 lg:h-40 resize-none transition-all duration-300 hover:border-electric-blue-500/60"
                                         disabled={isEnhancing}
                                     />
-                                    <div className="flex flex-col gap-2">
+                                    <div className="flex flex-row sm:flex-col gap-2 justify-center">
                                         {userInput && (
                                             <>
                                                 <button
                                                     onClick={enhancePrompt}
                                                     disabled={isEnhancing}
-                                                    className={`flex items-center justify-center bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 rounded-xl px-4 py-4 transition-all duration-200 ${isEnhancing ? 'opacity-70 cursor-not-allowed' : ''}`}
+                                                    className={`flex items-center justify-center bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 rounded-xl px-4 py-3 sm:px-4 sm:py-4 transition-all duration-200 mobile-touch-target ${isEnhancing ? 'opacity-70 cursor-not-allowed' : ''}`}
                                                 >
                                                     {isEnhancing ? (
-                                                        <Loader2 className="h-8 w-8 animate-spin" />
+                                                        <Loader2 className="h-6 w-6 sm:h-8 sm:w-8 animate-spin" />
                                                     ) : (
-                                                        <Wand2 className="h-8 w-8" />
+                                                        <Wand2 className="h-6 w-6 sm:h-8 sm:w-8" />
                                                     )}
                                                 </button>
                                                 <button
                                                     onClick={() => onGenerate(userInput)}
                                                     disabled={isEnhancing}
-                                                    className={`flex items-center justify-center bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 rounded-xl px-4 py-4 transition-all duration-200 ${isEnhancing ? 'opacity-70 cursor-not-allowed' : ''}`}
+                                                    className={`flex items-center justify-center bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 rounded-xl px-4 py-3 sm:px-4 sm:py-4 transition-all duration-200 mobile-touch-target ${isEnhancing ? 'opacity-70 cursor-not-allowed' : ''}`}
                                                 >
-                                                    <Send className="h-8 w-8" />
+                                                    <Send className="h-6 w-6 sm:h-8 sm:w-8" />
                                                 </button>
                                             </>
                                         )}
                                     </div>
                                 </div>
-                                <div className="flex justify-end mt-4">
-                                    <Link className="h-6 w-6 text-electric-blue-400/80 hover:text-electric-blue-400 transition-colors duration-200" />
+                                <div className="flex justify-end mt-3 sm:mt-4">
+                                    <Link className="h-5 w-5 sm:h-6 sm:w-6 text-electric-blue-400/80 hover:text-electric-blue-400 transition-colors duration-200" />
                                 </div>
                             </div>
                         </div>
                     </div>
 
                     {/* Holographic Suggestions Grid */}
-                    <div className="w-full max-w-5xl">
-                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    <div className="w-full max-w-xs sm:max-w-4xl lg:max-w-5xl px-4 sm:px-0">
+                        <div className="mobile-responsive-grid">
                             {Lookup?.SUGGSTIONS.map((suggestion, index) => (
                                 <button
                                     key={index}
                                     onClick={() => onSuggestionClick(suggestion)}
-                                    className="group relative p-6 bg-gray-900/50 hover:bg-gray-800/60 border-2 border-electric-blue-500/20 rounded-xl text-left transition-all duration-300 hover:border-electric-blue-500/40 hover:shadow-[0_0_20px_2px_rgba(59,130,246,0.2)]"
+                                    className="group relative p-4 sm:p-6 bg-gray-900/50 hover:bg-gray-800/60 border-2 border-electric-blue-500/20 rounded-xl text-left transition-all duration-300 hover:border-electric-blue-500/40 hover:shadow-[0_0_20px_2px_rgba(59,130,246,0.2)] min-h-[80px] sm:min-h-[100px] mobile-touch-target"
                                 >
                                     <div className="absolute inset-0 bg-[linear-gradient(45deg,transparent_50%,#3b82f620)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg" />
-                                    <span className="text-electric-blue-400/80 group-hover:text-electric-blue-400 font-mono text-sm tracking-wide transition-colors duration-300">
+                                    <span className="text-electric-blue-400/80 group-hover:text-electric-blue-400 font-mono text-xs sm:text-sm tracking-wide transition-colors duration-300 leading-relaxed">
                                         {suggestion}
                                     </span>
                                 </button>