update UI for main page

frontend/src/app/page.tsx

@@ -601,22 +601,22 @@ export default function Home() {
   }
 
   return (
-    <div className="h-screen flex flex-col bg-[#1d1d1f] animate-in fade-in duration-300">
+    <div className="h-screen flex flex-col bg-[#000000] animate-in fade-in duration-300">
       <Header />
       
-      {/* VS Code layout with Apple styling - Responsive */}
+      {/* Apple-style layout - Responsive */}
       <main className="flex-1 flex overflow-hidden relative">
         {/* Left Sidebar - Chat Panel (Hidden on mobile, shown when mobileView='chat') */}
         <div className={`
           ${mobileView === 'chat' ? 'flex' : 'hidden'} md:flex
           w-full md:w-80 
-          bg-[#28282a] border-r border-[#48484a] 
-          flex-col shadow-xl
+          bg-[#000000] border-r border-[#424245]/30 
+          flex-col
           absolute md:relative inset-0 md:inset-auto z-10 md:z-auto
         `}>
           {/* Panel Header */}
-          <div className="flex items-center px-5 py-4 bg-[#28282a] border-b border-[#48484a]">
-            <span className="text-sm font-semibold text-[#e5e5e7] tracking-tight">Chat</span>
+          <div className="flex items-center px-4 py-3 bg-[#000000] border-b border-[#424245]/30">
+            <span className="text-sm font-medium text-[#f5f5f7]">Chat</span>
           </div>
           
           {/* Chat Panel */}
@@ -633,13 +633,13 @@ export default function Home() {
         {/* Center - Editor Group (Always visible on mobile when mobileView='editor', always visible on desktop) */}
         <div className={`
           ${mobileView === 'editor' ? 'flex' : 'hidden'} md:flex
-          flex-1 flex-col bg-[#1d1d1f]
+          flex-1 flex-col bg-[#000000]
           absolute md:relative inset-0 md:inset-auto z-10 md:z-auto
         `}>
           {/* Tab Bar */}
-          <div className="flex items-center px-5 h-11 bg-[#28282a] border-b border-[#48484a]">
+          <div className="flex items-center px-4 h-10 bg-[#1d1d1f] border-b border-[#424245]/30">
             <div className="flex items-center space-x-2">
-              <div className="px-4 py-1.5 bg-[#1d1d1f] border-t-2 border-[#007aff] text-sm text-[#e5e5e7] rounded-t-lg shadow-sm font-medium">
+              <div className="px-3 py-1 bg-[#2d2d2f] text-sm text-[#f5f5f7] rounded-t-lg font-normal border-t border-x border-[#424245]/50">
                 {selectedLanguage === 'html' ? 'app.html' :
                  selectedLanguage === 'gradio' || selectedLanguage === 'streamlit' ? 'app.py' : 
                  selectedLanguage === 'transformers.js' ? 'app.js' :
@@ -648,14 +648,14 @@ export default function Home() {
                  `${selectedLanguage}.txt`}
               </div>
             </div>
-            <div className="ml-auto flex items-center space-x-3 text-xs text-[#a1a1a6]">
+            <div className="ml-auto flex items-center space-x-3 text-xs text-[#86868b]">
               {isGenerating && (
-                <span className="flex items-center space-x-1.5 animate-pulse">
-                  <div className="w-2 h-2 bg-[#007aff] rounded-full shadow-lg"></div>
-                  <span className="font-medium">Generating...</span>
+                <span className="flex items-center space-x-1.5">
+                  <div className="w-1.5 h-1.5 bg-white rounded-full animate-pulse"></div>
+                  <span>Generating...</span>
                 </span>
               )}
-              <span className="font-semibold tracking-wide">{selectedLanguage.toUpperCase()}</span>
+              <span className="font-medium">{selectedLanguage.toUpperCase()}</span>
             </div>
           </div>
           
@@ -674,8 +674,8 @@ export default function Home() {
         <div className={`
           ${mobileView === 'settings' ? 'flex' : 'hidden'} md:flex
           w-full md:w-72
-          bg-[#28282a] border-l border-[#48484a] 
-          overflow-y-auto shadow-xl
+          bg-[#000000] border-l border-[#424245]/30 
+          overflow-y-auto
           absolute md:relative inset-0 md:inset-auto z-10 md:z-auto
           flex-col
         `}>
@@ -693,61 +693,56 @@ export default function Home() {
       </main>
 
       {/* Mobile Bottom Navigation (visible only on mobile) */}
-      <nav className="md:hidden bg-[#28282a] border-t border-[#48484a] flex items-center justify-around h-16 px-2 safe-area-bottom">
+      <nav className="md:hidden bg-[#000000]/95 backdrop-blur-xl border-t border-[#424245]/20 flex items-center justify-around h-14 px-2 safe-area-bottom">
         <button
           onClick={() => setMobileView('chat')}
-          className={`flex flex-col items-center justify-center flex-1 py-2 rounded-lg transition-all ${
+          className={`flex flex-col items-center justify-center flex-1 py-1.5 transition-all ${
             mobileView === 'chat' 
-              ? 'text-[#007aff] bg-[#1d1d1f]' 
-              : 'text-[#a1a1a6] hover:text-[#e5e5e7]'
+              ? 'text-white' 
+              : 'text-[#86868b]'
           }`}
         >
-          <svg className="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+          <svg className="w-5 h-5 mb-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
           </svg>
-          <span className="text-xs font-medium">Chat</span>
+          <span className="text-[10px]">Chat</span>
         </button>
         
         <button
           onClick={() => setMobileView('editor')}
-          className={`flex flex-col items-center justify-center flex-1 py-2 rounded-lg transition-all ${
+          className={`flex flex-col items-center justify-center flex-1 py-1.5 transition-all ${
             mobileView === 'editor' 
-              ? 'text-[#007aff] bg-[#1d1d1f]' 
-              : 'text-[#a1a1a6] hover:text-[#e5e5e7]'
+              ? 'text-white' 
+              : 'text-[#86868b]'
           }`}
         >
-          <svg className="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+          <svg className="w-5 h-5 mb-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
           </svg>
-          <span className="text-xs font-medium">Code</span>
+          <span className="text-[10px]">Code</span>
         </button>
         
         <button
           onClick={() => setMobileView('settings')}
-          className={`flex flex-col items-center justify-center flex-1 py-2 rounded-lg transition-all ${
+          className={`flex flex-col items-center justify-center flex-1 py-1.5 transition-all ${
             mobileView === 'settings' 
-              ? 'text-[#007aff] bg-[#1d1d1f]' 
-              : 'text-[#a1a1a6] hover:text-[#e5e5e7]'
+              ? 'text-white' 
+              : 'text-[#86868b]'
           }`}
         >
-          <svg className="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+          <svg className="w-5 h-5 mb-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
           </svg>
-          <span className="text-xs font-medium">Settings</span>
+          <span className="text-[10px]">Settings</span>
         </button>
       </nav>
 
       {/* Status Bar - Apple style (hidden on mobile) */}
-      <footer className="hidden md:flex h-7 bg-[#28282a] border-t border-[#48484a] text-[#a1a1a6] text-xs items-center px-5 justify-between font-medium">
-        <div className="flex items-center space-x-5">
-          <span className="flex items-center space-x-1.5">
-            <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 16 16">
-              <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0z"/>
-            </svg>
-            <span>AnyCoder</span>
-          </span>
-          <span className="flex items-center space-x-1.5">
+      <footer className="hidden md:flex h-6 bg-[#000000] border-t border-[#424245]/20 text-[#86868b] text-[11px] items-center px-4 justify-between">
+        <div className="flex items-center space-x-4">
+          <span>AnyCoder</span>
+          <span className="flex items-center gap-1.5">
             {isAuthenticated ? (
               <>
                 <span className="w-1.5 h-1.5 bg-[#30d158] rounded-full"></span>
@@ -761,16 +756,8 @@ export default function Home() {
             )}
           </span>
         </div>
-        <div className="flex items-center space-x-5">
+        <div className="flex items-center space-x-4">
           <span>{messages.length} messages</span>
-          <a
-            href="https://huggingface.co/spaces/akhaliq/anycoder"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:text-[#e5e5e7] transition-colors"
-          >
-            Built with anycoder
-          </a>
         </div>
       </footer>
     </div>

frontend/src/components/ChatInterface.tsx

@@ -33,21 +33,20 @@ export default function ChatInterface({ messages, onSendMessage, isGenerating, i
   };
 
   return (
-    <div className="flex flex-col h-full bg-[#1d1d1f]">
+    <div className="flex flex-col h-full bg-[#000000]">
       {/* Messages */}
-      <div className="flex-1 overflow-y-auto p-5 space-y-4">
+      <div className="flex-1 overflow-y-auto p-4 space-y-3">
         {messages.length === 0 ? (
-          <div className="text-center text-[#a1a1a6] mt-12">
-            <div className="text-5xl mb-5">💬</div>
+          <div className="text-center text-[#86868b] mt-12">
             {isAuthenticated ? (
               <>
-                <p className="text-lg font-semibold text-[#e5e5e7] tracking-tight">Start a conversation</p>
-                <p className="text-sm mt-3 text-[#86868b] leading-relaxed">Describe what you want to build and I'll generate the code</p>
+                <p className="text-lg font-medium text-[#f5f5f7]">Start a conversation</p>
+                <p className="text-sm mt-2 text-[#86868b]">Describe what you want to build</p>
               </>
             ) : (
               <>
-                <p className="text-lg font-semibold text-[#ff9f0a]">🔒 Sign in to get started</p>
-                <p className="text-sm mt-3 text-[#86868b] leading-relaxed">Use Dev Login or sign in with Hugging Face</p>
+                <p className="text-lg font-medium text-[#f5f5f7]">Sign in to get started</p>
+                <p className="text-sm mt-2 text-[#86868b]">Use Dev Login or sign in with Hugging Face</p>
               </>
             )}
           </div>
@@ -58,31 +57,26 @@ export default function ChatInterface({ messages, onSendMessage, isGenerating, i
               className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
             >
               <div
-                className={`max-w-[85%] rounded-2xl p-4 shadow-sm ${
+                className={`max-w-[85%] rounded-2xl px-4 py-3 ${
                   message.role === 'user'
-                    ? 'bg-[#007aff] text-white'
-                    : 'bg-[#2c2c2e] text-[#e5e5e7] border border-[#48484a]'
+                    ? 'bg-white text-black'
+                    : 'bg-[#2d2d2f] text-[#f5f5f7]'
                 }`}
               >
-                <div className="flex items-start space-x-3">
-                  <div className="text-base flex-shrink-0">
-                    {message.role === 'user' ? '👤' : '🤖'}
-                  </div>
-                  <div className="flex-1 text-sm leading-relaxed min-w-0">
-                    {message.role === 'assistant' ? (
-                      <ReactMarkdown 
-                        remarkPlugins={[remarkGfm]}
-                        className="prose prose-invert prose-sm max-w-none"
-                      >
-                        {message.content}
-                      </ReactMarkdown>
-                    ) : (
-                      <p className="whitespace-pre-wrap font-medium break-words">{message.content}</p>
-                    )}
-                  </div>
+                <div className="text-sm leading-relaxed">
+                  {message.role === 'assistant' ? (
+                    <ReactMarkdown 
+                      remarkPlugins={[remarkGfm]}
+                      className="prose prose-invert prose-sm max-w-none [&>p]:my-0 [&>ul]:my-1 [&>ol]:my-1"
+                    >
+                      {message.content}
+                    </ReactMarkdown>
+                  ) : (
+                    <p className="whitespace-pre-wrap break-words">{message.content}</p>
+                  )}
                 </div>
                 {message.timestamp && (
-                  <div className="text-xs opacity-50 mt-2 text-right font-medium">
+                  <div className="text-[10px] opacity-40 mt-2 text-right">
                     {new Date(message.timestamp).toLocaleTimeString()}
                   </div>
                 )}
@@ -94,22 +88,30 @@ export default function ChatInterface({ messages, onSendMessage, isGenerating, i
       </div>
 
       {/* Input */}
-      <div className="border-t border-[#48484a] p-4 bg-[#28282a]">
-        <form onSubmit={handleSubmit} className="flex space-x-3">
+      <div className="border-t border-[#424245]/30 p-3 bg-[#000000]">
+        <form onSubmit={handleSubmit} className="flex items-center gap-2">
           <input
             type="text"
             value={input}
             onChange={(e) => setInput(e.target.value)}
-            placeholder={isAuthenticated ? "Message AnyCoder..." : "🔒 Please sign in first..."}
+            placeholder={isAuthenticated ? "Message AnyCoder..." : "Sign in first..."}
             disabled={isGenerating || !isAuthenticated}
-            className="flex-1 px-4 py-3 bg-[#3a3a3c] text-[#e5e5e7] text-sm border border-[#48484a] rounded-xl focus:outline-none focus:ring-2 focus:ring-[#007aff] focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed placeholder-[#86868b] font-medium shadow-sm"
+            className="flex-1 px-4 py-2.5 bg-[#2d2d2f] text-[#f5f5f7] text-sm border border-[#424245]/50 rounded-full focus:outline-none focus:border-[#424245] disabled:opacity-40 disabled:cursor-not-allowed placeholder-[#86868b]"
           />
           <button
             type="submit"
             disabled={isGenerating || !input.trim() || !isAuthenticated}
-            className="px-5 py-3 bg-[#007aff] text-white text-sm rounded-xl hover:bg-[#0051d5] disabled:bg-[#48484a] disabled:cursor-not-allowed transition-all font-semibold shadow-md disabled:shadow-none active:scale-95"
+            className="p-2.5 bg-white text-black rounded-full hover:bg-[#f5f5f7] disabled:bg-[#2d2d2f] disabled:text-[#86868b] disabled:cursor-not-allowed transition-all active:scale-95 flex-shrink-0"
           >
-            {isGenerating ? '⏳' : '↑'}
+            {isGenerating ? (
+              <svg className="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+              </svg>
+            ) : (
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            )}
           </button>
         </form>
       </div>

frontend/src/components/ControlPanel.tsx

@@ -131,12 +131,18 @@ export default function ControlPanel({
   };
 
   return (
-    <div className="bg-[#252526] p-6 space-y-6 h-full">
-      <h3 className="text-2xl font-bold text-[#cccccc] tracking-tight mb-6">Configuration</h3>
+    <div className="bg-[#000000] h-full flex flex-col">
+      {/* Panel Header */}
+      <div className="flex items-center px-4 py-3 border-b border-[#424245]/30">
+        <h3 className="text-sm font-medium text-[#f5f5f7]">Settings</h3>
+      </div>
+      
+      {/* Content */}
+      <div className="flex-1 p-4 space-y-5 overflow-y-auto">
       
       {/* Language Selection */}
       <div className="relative" ref={languageDropdownRef}>
-        <label className="block text-sm font-semibold text-[#cccccc] mb-3 tracking-tight">
+        <label className="block text-xs font-medium text-[#f5f5f7] mb-2">
           Language
         </label>
         <button
@@ -146,23 +152,24 @@ export default function ControlPanel({
             setShowModelDropdown(false);
           }}
           disabled={isGenerating || isLoading}
-          className="w-full px-4 py-3 bg-[#3a3a3c] text-[#cccccc] text-sm border border-[#3e3e42] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#007acc] focus:border-transparent disabled:opacity-50 font-medium shadow-sm flex items-center justify-between hover:bg-[#404040] transition-colors"
+          className="w-full px-3 py-2 bg-[#1d1d1f] text-[#f5f5f7] text-sm border border-[#424245]/50 rounded-lg focus:outline-none focus:border-[#424245] disabled:opacity-40 flex items-center justify-between hover:bg-[#2d2d2f] transition-colors"
         >
           <span>{isLoading ? 'Loading...' : formatLanguageName(selectedLanguage)}</span>
           <svg 
-            className={`w-4 h-4 text-[#cccccc] transition-transform ${showLanguageDropdown ? 'rotate-180' : ''}`}
+            className={`w-3.5 h-3.5 text-[#86868b] transition-transform ${showLanguageDropdown ? 'rotate-180' : ''}`}
             fill="none" 
             stroke="currentColor" 
             viewBox="0 0 24 24"
+            strokeWidth={2.5}
           >
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
           </svg>
         </button>
         
         {/* Language Dropdown Tray */}
         {showLanguageDropdown && !isLoading && languages.length > 0 && (
-          <div className="absolute z-50 w-full mt-2 bg-[#252526] border border-[#3e3e42] rounded-lg shadow-2xl shadow-black/50 overflow-hidden">
-            <div className="max-h-64 overflow-y-auto">
+          <div className="absolute z-50 w-full mt-1 bg-[#1d1d1f] border border-[#424245] rounded-lg shadow-xl overflow-hidden">
+            <div className="max-h-64 overflow-y-auto py-1">
               {languages.map((lang) => (
                 <button
                   key={lang}
@@ -171,8 +178,8 @@ export default function ControlPanel({
                     onLanguageChange(lang);
                     setShowLanguageDropdown(false);
                   }}
-                  className={`w-full px-4 py-3 text-left text-sm text-[#cccccc] hover:bg-[#2a2d2e] transition-colors ${
-                    selectedLanguage === lang ? 'bg-[#264f78] hover:bg-[#264f78]' : ''
+                  className={`w-full px-3 py-2 text-left text-sm text-[#f5f5f7] hover:bg-[#2d2d2f] transition-colors ${
+                    selectedLanguage === lang ? 'bg-[#2d2d2f]' : ''
                   }`}
                 >
                   {formatLanguageName(lang)}
@@ -185,7 +192,7 @@ export default function ControlPanel({
 
       {/* Model Selection */}
       <div className="relative" ref={modelDropdownRef}>
-        <label className="block text-sm font-semibold text-[#cccccc] mb-3 tracking-tight">
+        <label className="block text-xs font-medium text-[#f5f5f7] mb-2">
           AI Model
         </label>
         <button
@@ -195,28 +202,29 @@ export default function ControlPanel({
             setShowLanguageDropdown(false);
           }}
           disabled={isGenerating || isLoading}
-          className="w-full px-4 py-3 bg-[#3a3a3c] text-[#cccccc] text-sm border border-[#3e3e42] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#007acc] focus:border-transparent disabled:opacity-50 font-medium shadow-sm flex items-center justify-between hover:bg-[#404040] transition-colors"
+          className="w-full px-3 py-2 bg-[#1d1d1f] text-[#f5f5f7] text-sm border border-[#424245]/50 rounded-lg focus:outline-none focus:border-[#424245] disabled:opacity-40 flex items-center justify-between hover:bg-[#2d2d2f] transition-colors"
         >
-          <span>
+          <span className="truncate">
             {isLoading 
               ? 'Loading...' 
               : models.find(m => m.id === selectedModel)?.name || 'Select model'
             }
           </span>
           <svg 
-            className={`w-4 h-4 text-[#cccccc] transition-transform ${showModelDropdown ? 'rotate-180' : ''}`}
+            className={`w-3.5 h-3.5 text-[#86868b] flex-shrink-0 ml-2 transition-transform ${showModelDropdown ? 'rotate-180' : ''}`}
             fill="none" 
             stroke="currentColor" 
             viewBox="0 0 24 24"
+            strokeWidth={2.5}
           >
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
           </svg>
         </button>
         
         {/* Model Dropdown Tray */}
         {showModelDropdown && !isLoading && models.length > 0 && (
-          <div className="absolute z-50 w-full mt-2 bg-[#252526] border border-[#3e3e42] rounded-lg shadow-2xl shadow-black/50 overflow-hidden">
-            <div className="max-h-80 overflow-y-auto">
+          <div className="absolute z-50 w-full mt-1 bg-[#1d1d1f] border border-[#424245] rounded-lg shadow-xl overflow-hidden">
+            <div className="max-h-96 overflow-y-auto py-1">
               {models.map((model) => (
                 <button
                   key={model.id}
@@ -225,15 +233,15 @@ export default function ControlPanel({
                     onModelChange(model.id);
                     setShowModelDropdown(false);
                   }}
-                  className={`w-full px-4 py-3 text-left transition-colors ${
+                  className={`w-full px-3 py-2 text-left transition-colors ${
                     selectedModel === model.id 
-                      ? 'bg-[#264f78] hover:bg-[#264f78]' 
-                      : 'hover:bg-[#2a2d2e]'
+                      ? 'bg-[#2d2d2f]' 
+                      : 'hover:bg-[#2d2d2f]'
                   }`}
                 >
-                  <div className="text-sm font-medium text-[#cccccc]">{model.name}</div>
+                  <div className="text-sm text-[#f5f5f7]">{model.name}</div>
                   {model.description && (
-                    <div className="text-xs text-[#858585] mt-1 leading-relaxed">
+                    <div className="text-[10px] text-[#86868b] mt-0.5 leading-relaxed">
                       {model.description}
                     </div>
                   )}
@@ -245,60 +253,47 @@ export default function ControlPanel({
         
         {/* Model Description */}
         {!isLoading && models.find(m => m.id === selectedModel) && (
-          <p className="text-xs text-[#858585] mt-3 leading-relaxed">
+          <p className="text-[10px] text-[#86868b] mt-2 leading-relaxed">
             {models.find(m => m.id === selectedModel)?.description}
           </p>
         )}
       </div>
 
       {/* Action Buttons */}
-      <div className="flex flex-col space-y-3 pt-4">
+      <div className="flex flex-col space-y-2">
         <button
           onClick={() => setShowImportModal(true)}
           disabled={isGenerating}
-          className="w-full px-4 py-3.5 bg-[#34c759] text-white text-sm rounded-xl hover:bg-[#30b350] disabled:opacity-50 disabled:cursor-not-allowed transition-all font-semibold flex items-center justify-center space-x-2 shadow-md active:scale-95"
+          className="w-full px-3 py-2.5 bg-white text-black text-sm rounded-full hover:bg-[#f5f5f7] disabled:opacity-30 disabled:cursor-not-allowed transition-all font-medium flex items-center justify-center active:scale-95"
         >
-          <span>📥</span>
-          <span>Import Project</span>
+          Import Project
         </button>
         <button
           onClick={onDeploy}
           disabled={isGenerating}
-          className="w-full px-4 py-3.5 bg-[#007aff] text-white text-sm rounded-xl hover:bg-[#0051d5] disabled:opacity-50 disabled:cursor-not-allowed transition-all font-semibold flex items-center justify-center space-x-2 shadow-md active:scale-95"
+          className="w-full px-3 py-2.5 bg-white text-black text-sm rounded-full hover:bg-[#f5f5f7] disabled:opacity-30 disabled:cursor-not-allowed transition-all font-medium flex items-center justify-center active:scale-95"
         >
-          <span>🚀</span>
-          <span>Publish</span>
+          Publish
         </button>
         <button
           onClick={onClear}
           disabled={isGenerating}
-          className="w-full px-4 py-3.5 bg-[#3a3a3c] text-[#e5e5e7] text-sm rounded-xl hover:bg-[#48484a] disabled:opacity-50 disabled:cursor-not-allowed transition-all font-semibold border border-[#48484a] flex items-center justify-center space-x-2 shadow-sm active:scale-95"
+          className="w-full px-3 py-2.5 bg-[#1d1d1f] text-[#f5f5f7] text-sm rounded-full hover:bg-[#2d2d2f] disabled:opacity-30 disabled:cursor-not-allowed transition-all font-medium border border-[#424245]/50 flex items-center justify-center active:scale-95"
         >
-          <span>🗑️</span>
-          <span>Clear</span>
+          Clear
         </button>
       </div>
-
-      {/* Info Panel */}
-      <div className="mt-6 p-4 bg-[#2c2c2e] border border-[#48484a] rounded-xl shadow-sm">
-        <h4 className="text-sm font-semibold text-[#e5e5e7] mb-3 tracking-tight">💡 Tips</h4>
-        <ul className="text-xs text-[#86868b] space-y-2 leading-relaxed">
-          <li>• Import projects from HF/GitHub</li>
-          <li>• Be specific in your requirements</li>
-          <li>• Try different AI models</li>
-          <li>• Publish to HF Spaces</li>
-        </ul>
       </div>
 
       {/* Import Modal */}
       {showImportModal && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-          <div className="bg-[#2c2c2e] border border-[#48484a] rounded-2xl p-6 max-w-md w-full shadow-2xl">
-            <h3 className="text-lg font-semibold text-[#e5e5e7] mb-4 tracking-tight">📥 Import Project</h3>
+        <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-4">
+          <div className="bg-[#1d1d1f] border border-[#424245] rounded-2xl p-5 max-w-md w-full shadow-2xl">
+            <h3 className="text-base font-medium text-[#f5f5f7] mb-4">Import Project</h3>
             
-            <div className="space-y-4">
+            <div className="space-y-3">
               <div>
-                <label className="block text-sm font-medium text-[#e5e5e7] mb-2">
+                <label className="block text-xs font-medium text-[#f5f5f7] mb-2">
                   Project URL
                 </label>
                 <input
@@ -307,25 +302,25 @@ export default function ControlPanel({
                   onChange={(e) => setImportUrl(e.target.value)}
                   placeholder="https://huggingface.co/spaces/..."
                   disabled={isImporting}
-                  className="w-full px-4 py-3 bg-[#3a3a3c] text-[#e5e5e7] text-sm border border-[#48484a] rounded-xl focus:outline-none focus:ring-2 focus:ring-[#34c759] focus:border-transparent disabled:opacity-50 placeholder-[#86868b] font-medium"
+                  className="w-full px-3 py-2.5 bg-[#000000] text-[#f5f5f7] text-sm border border-[#424245] rounded-lg focus:outline-none focus:border-[#424245] disabled:opacity-40 placeholder-[#86868b]"
                   onKeyDown={(e) => e.key === 'Enter' && handleImport()}
                 />
-                <p className="text-xs text-[#86868b] mt-2">
+                <p className="text-[10px] text-[#86868b] mt-1.5">
                   Supported: HF Spaces, HF Models, GitHub repos
                 </p>
               </div>
 
               {importError && (
-                <div className="p-3 bg-[#ff3b30] bg-opacity-10 border border-[#ff3b30] rounded-xl">
-                  <p className="text-sm text-[#ff3b30]">{importError}</p>
+                <div className="p-2.5 bg-[#ff3b30]/10 border border-[#ff3b30]/50 rounded-lg">
+                  <p className="text-xs text-[#ff3b30]">{importError}</p>
                 </div>
               )}
 
-              <div className="flex space-x-3">
+              <div className="flex gap-2 pt-2">
                 <button
                   onClick={handleImport}
                   disabled={isImporting || !importUrl.trim()}
-                  className="flex-1 px-4 py-3 bg-[#34c759] text-white text-sm rounded-xl hover:bg-[#30b350] disabled:opacity-50 disabled:cursor-not-allowed transition-all font-semibold active:scale-95"
+                  className="flex-1 px-3 py-2.5 bg-white text-black text-sm rounded-full hover:bg-[#f5f5f7] disabled:opacity-30 disabled:cursor-not-allowed transition-all font-medium active:scale-95"
                 >
                   {isImporting ? '⏳ Importing...' : '✓ Import'}
                 </button>
@@ -336,7 +331,7 @@ export default function ControlPanel({
                     setImportError(null);
                   }}
                   disabled={isImporting}
-                  className="flex-1 px-4 py-3 bg-[#3a3a3c] text-[#e5e5e7] text-sm rounded-xl hover:bg-[#48484a] disabled:opacity-50 disabled:cursor-not-allowed transition-all font-semibold border border-[#48484a] active:scale-95"
+                  className="flex-1 px-3 py-2.5 bg-[#000000] text-[#f5f5f7] text-sm rounded-full hover:bg-[#2d2d2f] disabled:opacity-30 disabled:cursor-not-allowed transition-all font-medium border border-[#424245] active:scale-95"
                 >
                   Cancel
                 </button>

frontend/src/components/Header.tsx

@@ -83,32 +83,30 @@ export default function Header() {
   };
 
   return (
-    <header className="bg-[#28282a] text-white border-b border-[#48484a]">
-      <div className="flex items-center justify-between px-3 md:px-5 h-12 md:h-14">
+    <header className="bg-[#000000]/80 backdrop-blur-xl text-white border-b border-[#424245]/30">
+      <div className="flex items-center justify-between px-3 md:px-6 h-12 md:h-14">
           <div className="flex items-center space-x-2 md:space-x-3">
-            <h1 className="text-sm md:text-base font-semibold text-[#e5e5e7] tracking-tight">AnyCoder</h1>
+            <h1 className="text-sm md:text-base font-medium text-[#f5f5f7]">AnyCoder</h1>
           </div>
           
-          <div className="flex items-center space-x-4">
+          <div className="flex items-center space-x-3">
             {isLoading ? (
-              <div className="px-4 py-2">
-                <span className="text-xs text-[#86868b] font-medium">Loading...</span>
-              </div>
+              <span className="text-xs text-[#86868b]">Loading...</span>
             ) : userInfo ? (
               <div className="flex items-center space-x-2 md:space-x-3">
                 {userInfo.avatarUrl && (
                   <img 
                     src={userInfo.avatarUrl} 
                     alt={userInfo.name}
-                    className="w-6 h-6 md:w-7 md:h-7 rounded-full ring-2 ring-[#48484a]"
+                    className="w-6 h-6 md:w-7 md:h-7 rounded-full"
                   />
                 )}
-                <span className="hidden sm:inline text-xs md:text-sm text-[#e5e5e7] font-medium truncate max-w-[100px] md:max-w-none">
+                <span className="hidden sm:inline text-xs md:text-sm text-[#f5f5f7] font-medium truncate max-w-[100px] md:max-w-none">
                   {userInfo.preferredUsername || userInfo.name}
                 </span>
                 <button
                   onClick={handleLogout}
-                  className="px-3 md:px-4 py-1.5 md:py-2 bg-[#3a3a3c] text-[#e5e5e7] text-xs rounded-lg hover:bg-[#48484a] transition-all border border-[#48484a] font-semibold shadow-sm active:scale-95"
+                  className="px-3 md:px-3 py-1.5 md:py-1.5 text-[#f5f5f7] text-sm hover:text-white transition-colors"
                 >
                   Logout
                 </button>
@@ -119,20 +117,19 @@ export default function Header() {
                 {isDevMode && (
                   <>
                     {showDevLogin ? (
-                      <div className="flex items-center space-x-2 bg-[#3a3a3c] px-2 md:px-3 py-1.5 md:py-2 rounded-lg border border-[#ff9f0a] shadow-lg">
-                        <span className="hidden sm:inline text-xs text-[#ff9f0a] font-semibold">DEV</span>
+                      <div className="flex items-center space-x-2">
                         <input
                           type="text"
                           value={devUsername}
                           onChange={(e) => setDevUsername(e.target.value)}
                           onKeyPress={(e) => e.key === 'Enter' && handleDevLogin()}
                           placeholder="username"
-                          className="px-3 py-1.5 rounded-lg text-xs bg-[#2c2c2e] text-[#e5e5e7] border border-[#48484a] focus:outline-none focus:ring-2 focus:ring-[#ff9f0a] focus:border-transparent w-28 font-medium"
+                          className="px-3 py-1.5 rounded-lg text-sm bg-[#1d1d1f] text-[#f5f5f7] border border-[#424245] focus:outline-none focus:border-white/50 w-32 font-medium"
                           autoFocus
                         />
                         <button
                           onClick={handleDevLogin}
-                          className="px-3 py-1.5 bg-[#ff9f0a] text-white rounded-lg hover:bg-[#ff8800] text-xs font-semibold shadow-sm active:scale-95"
+                          className="px-3 py-1.5 bg-white text-black rounded-lg text-sm hover:bg-[#f5f5f7] font-medium"
                         >
                           OK
                         </button>
@@ -141,33 +138,30 @@ export default function Header() {
                             setShowDevLogin(false);
                             setDevUsername('');
                           }}
-                          className="text-[#86868b] hover:text-[#e5e5e7] text-sm transition-colors"
+                          className="text-[#86868b] hover:text-[#f5f5f7] text-sm"
                         >
                           ✕
                         </button>
                       </div>
                     ) : (
-                      <button
-                        onClick={() => setShowDevLogin(true)}
-                        className="px-4 py-2 bg-[#ff9f0a] text-white rounded-lg hover:bg-[#ff8800] transition-all text-xs flex items-center space-x-2 font-semibold shadow-sm active:scale-95"
-                        title="Dev Mode (localhost)"
-                      >
-                        <span>🔧</span>
-                        <span>Dev Login</span>
-                      </button>
+                    <button
+                      onClick={() => setShowDevLogin(true)}
+                      className="px-3 py-1.5 text-sm text-[#f5f5f7] hover:text-white transition-colors"
+                      title="Dev Mode"
+                    >
+                      Dev
+                    </button>
                     )}
-                    <span className="text-[#86868b] text-xs font-medium">or</span>
+                    <span className="text-[#86868b] text-sm">or</span>
                   </>
                 )}
                 
                 {/* OAuth Login */}
                 <button
                   onClick={handleLogin}
-                  className="px-3 md:px-4 py-1.5 md:py-2 bg-[#007aff] text-white rounded-lg hover:bg-[#0051d5] transition-all text-xs flex items-center space-x-1.5 md:space-x-2 font-semibold shadow-md active:scale-95"
+                  className="px-3 md:px-4 py-1.5 md:py-2 bg-white text-black rounded-full text-sm hover:bg-[#f5f5f7] transition-all font-medium"
                 >
-                  <span>🤗</span>
-                  <span className="hidden xs:inline">Sign in</span>
-                  <span className="xs:hidden">Login</span>
+                  Sign in
                 </button>
               </div>
             )}

frontend/src/components/LandingPage.tsx

@@ -245,7 +245,7 @@ export default function LandingPage({
                       className="px-3 py-1.5 text-sm text-[#f5f5f7] hover:text-white transition-colors"
                       title="Dev Mode"
                     >
-                      🔧 Dev
+                      Dev
                     </button>
                   )}
                   <span className="text-[#86868b] text-sm">or</span>