diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..bf0cc52
Binary files /dev/null and b/.DS_Store differ
diff --git a/client/src/components/components/CodeEditor.jsx b/client/src/components/components/CodeEditor.jsx
index ae63aaf..0954546 100644
--- a/client/src/components/components/CodeEditor.jsx
+++ b/client/src/components/components/CodeEditor.jsx
@@ -120,7 +120,6 @@ function CodeEditor({ hasStarted, averageVolume, startRecording, stopRecording,
   return (
     <div id="code-editor" className="w-full p-6 pl-7 h-screen flex flex-col bg-(--background) text-white">
 
-      {/* Header */}
       <div className="flex justify-between items-center border-b border-(--code-stroke) pb-3">
         <div className="flex items-center">
           <h1 className="text-lg font-semibold">Code Editor</h1>
@@ -140,7 +139,6 @@ function CodeEditor({ hasStarted, averageVolume, startRecording, stopRecording,
         </div>
 
         <div className="flex items-center gap-2">
-          {/* Font Size Buttons */}
           <div className="flex mr-1">
             <button
               onClick={() => setFontSize((prev) => Math.max(prev - 2, 12))}
@@ -158,7 +156,6 @@ function CodeEditor({ hasStarted, averageVolume, startRecording, stopRecording,
             </button>
           </div>
 
-          {/* Language Selector */}
           <div className="border border-(--code-stroke) pr-2 pl-1 py-1 rounded-sm">
             <select
               className="bg-transparent text-sm outline-none cursor-pointer px-1 pr-2"
@@ -175,7 +172,6 @@ function CodeEditor({ hasStarted, averageVolume, startRecording, stopRecording,
       </div>
 
 
-      {/* Code Editor */}
       <div className="mt-3 relative flex-1 border border-(--code-stroke) rounded-sm overflow-hidden" style={{ "scrollbarColor": "var(--code-stroke) var(--background)" }}>
         <CodeMirror
           value={code}
@@ -218,7 +214,6 @@ function CodeEditor({ hasStarted, averageVolume, startRecording, stopRecording,
           }}
         />
 
-        {/* Floating Run Button */}
         <button
           id="run-button"
           onClick={compileCode}
@@ -228,13 +223,11 @@ function CodeEditor({ hasStarted, averageVolume, startRecording, stopRecording,
         </button>
       </div>
 
-      {/* Output Section */}
       <div className="mt-4 bg-(--code-fill) p-3 rounded-sm border border-(--code-stroke) max-h-40 overflow-y-auto">
         <h3 className="text-[14px] font-bold text-(--code-text)">Output:</h3>
         <pre className="text-[14px] text-(--code-text) font-thin whitespace-pre-wrap">{output}</pre>
       </div>
 
-      {/* Mute Button */}
       <MuteButton status={status} hasStarted={hasStarted} averageVolume={averageVolume} startRecording={startRecording} stopRecording={stopRecording} />
     </div>
   );
diff --git a/client/src/components/components/FeatureShowcase.jsx b/client/src/components/components/FeatureShowcase.jsx
new file mode 100644
index 0000000..5cb0316
--- /dev/null
+++ b/client/src/components/components/FeatureShowcase.jsx
@@ -0,0 +1,360 @@
+"use client"
+
+import { useState, useEffect, useRef } from "react"
+import { Code, MessageSquare, Play, Terminal, Zap } from 'lucide-react'
+
+const FeatureShowcase = () => {
+  const [activeFeature, setActiveFeature] = useState(0)
+  const [isHovering, setIsHovering] = useState(false)
+  const showcaseRef = useRef(null)
+  
+  // Auto-rotate features every 6 seconds unless user is hovering
+  useEffect(() => {
+    if (isHovering) return
+    
+    const interval = setInterval(() => {
+      setActiveFeature((prev) => (prev === 2 ? 0 : prev + 1))
+    }, 6000)
+    
+    return () => clearInterval(interval)
+  }, [isHovering])
+
+  const features = [
+    { 
+      id: 0, 
+      title: "Select Interview", 
+      description: "Choose from a variety of LeetCode problems to practice",
+      icon: <Code className="w-5 h-5" />,
+      color: "from-emerald-500 to-teal-500",
+      textColor: "text-emerald-400",
+      bgColor: "bg-emerald-500/10",
+      borderColor: "border-emerald-500/30"
+    },
+    { 
+      id: 1, 
+      title: "AI Code Feedback", 
+      description: "Get instant feedback on your code quality and approach",
+      icon: <MessageSquare className="w-5 h-5" />,
+      color: "from-blue-500 to-cyan-500",
+      textColor: "text-blue-400",
+      bgColor: "bg-blue-500/10",
+      borderColor: "border-blue-500/30"
+    },
+    { 
+      id: 2, 
+      title: "Test & Submit", 
+      description: "Run your code against test cases and submit solutions",
+      icon: <Play className="w-5 h-5" />,
+      color: "from-purple-500 to-pink-500",
+      textColor: "text-purple-400",
+      bgColor: "bg-purple-500/10",
+      borderColor: "border-purple-500/30"
+    },
+  ]
+
+  return (
+    <div 
+      ref={showcaseRef}
+      className="relative"
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+    >
+      <div className="flex justify-center mb-8">
+        <div className="flex p-1.5 bg-white/5 backdrop-blur-md rounded-full border border-white/10">
+          {features.map((feature) => (
+            <button
+              key={feature.id}
+              onClick={() => setActiveFeature(feature.id)}
+              className={`relative flex items-center gap-2 px-5 py-2.5 rounded-full transition-all ${
+                activeFeature === feature.id
+                  ? `bg-gradient-to-r ${feature.color} text-white shadow-lg`
+                  : "text-white/70 hover:text-white"
+              }`}
+            >
+              <div className={`transition-all duration-300 ${activeFeature === feature.id ? "scale-110" : ""}`}>
+                {feature.icon}
+              </div>
+              <span className="font-medium">{feature.title}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="relative h-[400px] rounded-2xl overflow-hidden">
+        <div className={`absolute -inset-0.5 bg-gradient-to-r ${features[activeFeature].color} rounded-2xl blur opacity-30 animate-pulse transition-colors duration-500`}></div>
+        
+        <div className="relative bg-black/40 backdrop-blur-md rounded-2xl overflow-hidden border border-white/10 h-full">
+          {features.map((feature) => (
+            <div
+              key={feature.id}
+              className={`absolute inset-0 transition-opacity duration-500 ${
+                activeFeature === feature.id ? "opacity-100" : "opacity-0 pointer-events-none"
+              }`}
+            >
+              {feature.id === 0 && (
+                <div className="h-full flex flex-col">
+                  <div className="bg-black/60 border-b border-white/10 p-4 flex items-center">
+                    <div className="flex space-x-2 mr-4">
+                      <div className="w-3 h-3 rounded-full bg-red-500/70"></div>
+                      <div className="w-3 h-3 rounded-full bg-yellow-500/70"></div>
+                      <div className="w-3 h-3 rounded-full bg-green-500/70"></div>
+                    </div>
+                    <div className="flex items-center gap-2 px-3 py-1 rounded-md bg-emerald-500/10 border border-emerald-500/30">
+                      <Terminal className="w-4 h-4 text-emerald-400" />
+                      <span className="text-emerald-400 font-mono text-sm">Select Interview</span>
+                    </div>
+                  </div>
+                  
+                  <div className="flex-1 p-6 font-mono text-sm overflow-hidden">
+                    <div className="flex items-center text-emerald-400 mb-4">
+                      <span className="mr-2">$</span>
+                      <span className="typing-animation">meetcode --select-problem</span>
+                    </div>
+                    
+                    <div className="mt-6 p-4 rounded-lg bg-white/5 border border-white/10">
+                      <div className="text-white mb-2 font-semibold">Available Problems:</div>
+                      <div className="space-y-3 mt-4">
+                        <div className="flex items-center gap-3 p-2 rounded-md hover:bg-white/5 transition-colors cursor-pointer group">
+                          <div className="w-8 h-8 rounded-full bg-green-500/20 flex items-center justify-center text-green-400 font-semibold text-xs">Easy</div>
+                          <div>
+                            <div className="text-white group-hover:text-emerald-400 transition-colors">Two Sum</div>
+                            <div className="text-white/50 text-xs">Array, Hash Table</div>
+                          </div>
+                          <div className="ml-auto">
+                            <div className="px-2 py-1 rounded-md bg-emerald-500/10 text-emerald-400 text-xs">Select</div>
+                          </div>
+                        </div>
+                        
+                        <div className="flex items-center gap-3 p-2 rounded-md hover:bg-white/5 transition-colors cursor-pointer group">
+                          <div className="w-8 h-8 rounded-full bg-yellow-500/20 flex items-center justify-center text-yellow-400 font-semibold text-xs">Med</div>
+                          <div>
+                            <div className="text-white group-hover:text-emerald-400 transition-colors">Add Two Numbers</div>
+                            <div className="text-white/50 text-xs">Linked List, Math</div>
+                          </div>
+                          <div className="ml-auto">
+                            <div className="px-2 py-1 rounded-md bg-emerald-500/10 text-emerald-400 text-xs">Select</div>
+                          </div>
+                        </div>
+                        
+                        <div className="flex items-center gap-3 p-2 rounded-md hover:bg-white/5 transition-colors cursor-pointer group">
+                          <div className="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center text-red-400 font-semibold text-xs">Hard</div>
+                          <div>
+                            <div className="text-white group-hover:text-emerald-400 transition-colors">Median of Two Sorted Arrays</div>
+                            <div className="text-white/50 text-xs">Array, Binary Search</div>
+                          </div>
+                          <div className="ml-auto">
+                            <div className="px-2 py-1 rounded-md bg-emerald-500/10 text-emerald-400 text-xs">Select</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    
+                    <div className="mt-6 flex items-center text-white/70">
+                      <span className="mr-2">$</span>
+                      <span className="typing-animation-cursor">_</span>
+                    </div>
+                  </div>
+                </div>
+              )}
+              
+              {feature.id === 1 && (
+                <div className="h-full flex flex-col">
+                  <div className="bg-black/60 border-b border-white/10 p-4 flex items-center justify-between">
+                    <div className="flex space-x-2">
+                      <div className="w-3 h-3 rounded-full bg-red-500/70"></div>
+                      <div className="w-3 h-3 rounded-full bg-yellow-500/70"></div>
+                      <div className="w-3 h-3 rounded-full bg-green-500/70"></div>
+                    </div>
+                    <div className="flex items-center gap-2 px-3 py-1 rounded-md bg-blue-500/10 border border-blue-500/30">
+                      <MessageSquare className="w-4 h-4 text-blue-400" />
+                      <span className="text-blue-400 font-mono text-sm">AI Feedback</span>
+                    </div>
+                    <div className="text-white/40 text-sm">two_sum.py</div>
+                  </div>
+                  
+                  <div className="flex-1 flex">
+                    <div className="w-1/2 border-r border-white/10 p-4 font-mono text-sm overflow-hidden bg-black/40">
+                      <div className="flex">
+                        <div className="text-white/30 w-8 text-right pr-4">1</div>
+                        <div><span className="text-purple-400">def</span> <span className="text-cyan-400">two_sum</span><span className="text-white">(</span><span className="text-orange-300">nums</span>, <span className="text-orange-300">target</span><span className="text-white">):</span></div>
+                      </div>
+                      <div className="flex">
+                        <div className="text-white/30 w-8 text-right pr-4">2</div>
+                        <div><span className="text-white/80">    </span><span className="text-green-400"># Brute force approach</span></div>
+                      </div>
+                      <div className="flex">
+                        <div className="text-white/30 w-8 text-right pr-4">3</div>
+                        <div><span className="text-white/80">    </span><span className="text-purple-400">for</span> <span className="text-cyan-300">i</span> <span className="text-purple-400">in</span> <span className="text-cyan-400">range</span><span className="text-white">(</span><span className="text-cyan-400">len</span><span className="text-white">(</span><span className="text-orange-300">nums</span><span className="text-white">)):</span></div>
+                      </div>
+                      <div className="flex bg-blue-500/10">
+                        <div className="text-white/30 w-8 text-right pr-4">4</div>
+                        <div><span className="text-white/80">        </span><span className="text-purple-400">for</span> <span className="text-cyan-300">j</span> <span className="text-purple-400">in</span> <span className="text-cyan-400">range</span><span className="text-white">(</span><span className="text-cyan-300">i</span> <span className="text-white">+</span> <span className="text-green-400">1</span>, <span className="text-cyan-400">len</span><span className="text-white">(</span><span className="text-orange-300">nums</span><span className="text-white">)):</span></div>
+                      </div>
+                      <div className="flex bg-blue-500/10">
+                        <div className="text-white/30 w-8 text-right pr-4">5</div>
+                        <div><span className="text-white/80">            </span><span className="text-purple-400">if</span> <span className="text-orange-300">nums</span><span className="text-white">[</span><span className="text-cyan-300">i</span><span className="text-white">] + </span><span className="text-orange-300">nums</span><span className="text-white">[</span><span className="text-cyan-300">j</span><span className="text-white">] == </span><span className="text-orange-300">target</span><span className="text-white">:</span></div>
+                      </div>
+                      <div className="flex bg-blue-500/10">
+                        <div className="text-white/30 w-8 text-right pr-4">6</div>
+                        <div><span className="text-white/80">                </span><span className="text-purple-400">return</span> <span className="text-white">[</span><span className="text-cyan-300">i</span>, <span className="text-cyan-300">j</span><span className="text-white">]</span></div>
+                      </div>
+                      <div className="flex">
+                        <div className="text-white/30 w-8 text-right pr-4">7</div>
+                        <div><span className="text-white/80">    </span><span className="text-purple-400">return</span> <span className="text-white">[]</span></div>
+                      </div>
+                      <div className="flex mt-4">
+                        <div className="text-white/30 w-8 text-right pr-4">8</div>
+                        <div><span className="text-white/80">    </span><span className="text-green-400"># Time Complexity: O(n²)</span></div>
+                      </div>
+                      <div className="flex">
+                        <div className="text-white/30 w-8 text-right pr-4">9</div>
+                        <div><span className="text-white/80">    </span><span className="text-green-400"># Space Complexity: O(1)</span></div>
+                      </div>
+                    </div>
+                    
+                    <div className="w-1/2 p-4 bg-black/60 overflow-hidden">
+                      <div className="p-3 rounded-lg bg-blue-500/10 border border-blue-500/30 mb-4">
+                        <div className="text-blue-400 font-medium mb-1">Performance Issue</div>
+                        <p className="text-white/80 text-sm">The highlighted code uses a nested loop approach with O(n²) time complexity. This can be inefficient for large input arrays.</p>
+                      </div>
+                      
+                      <div className="p-3 rounded-lg bg-white/5 border border-white/10 mb-4">
+                        <div className="text-white font-medium mb-1">Suggested Improvement</div>
+                        <p className="text-white/80 text-sm mb-2">Consider using a hash map to achieve O(n) time complexity:</p>
+                        <div className="bg-black/30 p-2 rounded font-mono text-xs">
+                          <div><span className="text-purple-400">def</span> <span className="text-cyan-400">two_sum</span><span className="text-white">(</span><span className="text-orange-300">nums</span>, <span className="text-orange-300">target</span><span className="text-white">):</span></div>
+                          <div><span className="text-white/80">    </span><span className="text-orange-300">num_map</span> <span className="text-white">=</span> <span className="text-white">{}</span></div>
+                          <div><span className="text-white/80">    </span><span className="text-purple-400">for</span> <span className="text-cyan-300">i</span>, <span className="text-cyan-300">num</span> <span className="text-purple-400">in</span> <span className="text-cyan-400">enumerate</span><span className="text-white">(</span><span className="text-orange-300">nums</span><span className="text-white">):</span></div>
+                          <div><span className="text-white/80">        </span><span className="text-orange-300">complement</span> <span className="text-white">=</span> <span className="text-orange-300">target</span> <span className="text-white">-</span> <span className="text-orange-300">num</span></div>
+                          <div><span className="text-white/80">        </span><span className="text-purple-400">if</span> <span className="text-orange-300">complement</span> <span className="text-purple-400">in</span> <span className="text-orange-300">num_map</span><span className="text-white">:</span></div>
+                          <div><span className="text-white/80">            </span><span className="text-purple-400">return</span> <span className="text-white">[</span><span className="text-orange-300">num_map</span><span className="text-white">[</span><span className="text-orange-300">complement</span><span className="text-white">], </span><span className="text-cyan-300">i</span><span className="text-white">]</span></div>
+                        </div>
+                      </div>
+                      
+                      <div className="p-3 rounded-lg bg-emerald-500/10 border border-emerald-500/30">
+                        <div className="text-emerald-400 font-medium mb-1">Interview Tip</div>
+                        <p className="text-white/80 text-sm">Always discuss the time and space complexity trade-offs. The hash map approach uses O(n) extra space but improves time complexity to O(n).</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+              
+              {feature.id === 2 && (
+                <div className="h-full flex flex-col">
+                  <div className="bg-black/60 border-b border-white/10 p-4 flex items-center justify-between">
+                    <div className="flex space-x-2">
+                      <div className="w-3 h-3 rounded-full bg-red-500/70"></div>
+                      <div className="w-3 h-3 rounded-full bg-yellow-500/70"></div>
+                      <div className="w-3 h-3 rounded-full bg-green-500/70"></div>
+                    </div>
+                    <div className="flex items-center gap-2 px-3 py-1 rounded-md bg-purple-500/10 border border-purple-500/30">
+                      <Play className="w-4 h-4 text-purple-400" />
+                      <span className="text-purple-400 font-mono text-sm">Test & Submit</span>
+                    </div>
+                    <div className="text-white/40 text-sm">two_sum.py</div>
+                  </div>
+                  
+                  <div className="flex-1 flex">
+                    <div className="w-1/2 border-r border-white/10 p-4 font-mono text-sm overflow-hidden bg-black/40">
+                      <div className="flex">
+                        <div className="text-white/30 w-8 text-right pr-4">1</div>
+                        <div><span className="text-purple-400">def</span> <span className="text-cyan-400">two_sum</span><span className="text-white">(</span><span className="text-orange-300">nums</span>, <span className="text-orange-300">target</span><span className="text-white">):</span></div>
+                      </div>
+                      <div className="flex">
+                        <div className="text-white/30 w-8 text-right pr-4">2</div>
+                        <div><span className="text-white/80">    </span><span className="text-orange-300">num_map</span> <span className="text-white">=</span> <span className="text-white">{}</span></div>
+                      </div>
+                      <div className="flex">
+                        <div className="text-white/30 w-8 text-right pr-4">3</div>
+                        <div><span className="text-white/80">    </span><span className="text-purple-400">for</span> <span className="text-cyan-300">i</span>, <span className="text-cyan-300">num</span> <span className="text-purple-400">in</span> <span className="text-cyan-400">enumerate</span><span className="text-white">(</span><span className="text-orange-300">nums</span><span className="text-white">):</span></div>
+                      </div>
+                      <div className="flex">
+                        <div className="text-white/30 w-8 text-right pr-4">4</div>
+                        <div><span className="text-white/80">        </span><span className="text-orange-300">complement</span> <span className="text-white">=</span> <span className="text-orange-300">target</span> <span className="text-white">-</span> <span className="text-orange-300">num</span></div>
+                      </div>
+                      <div className="flex">
+                        <div className="text-white/30 w-8 text-right pr-4">5</div>
+                        <div><span className="text-white/80">        </span><span className="text-purple-400">if</span> <span className="text-orange-300">complement</span> <span className="text-purple-400">in</span> <span className="text-orange-300">num_map</span><span className="text-white">:</span></div>
+                      </div>
+                      <div className="flex">
+                        <div className="text-white/30 w-8 text-right pr-4">6</div>
+                        <div><span className="text-white/80">            </span><span className="text-purple-400">return</span> <span className="text-white">[</span><span className="text-orange-300">num_map</span><span className="text-white">[</span><span className="text-orange-300">complement</span><span className="text-white">], </span><span className="text-cyan-300">i</span><span className="text-white">]</span></div>
+                      </div>
+                      <div className="flex">
+                        <div className="text-white/30 w-8 text-right pr-4">7</div>
+                        <div><span className="text-white/80">        </span><span className="text-orange-300">num_map</span><span className="text-white">[</span><span className="text-orange-300">num</span><span className="text-white">] =</span> <span className="text-cyan-300">i</span></div>
+                      </div>
+                      <div className="flex">
+                        <div className="text-white/30 w-8 text-right pr-4">8</div>
+                        <div><span className="text-white/80">    </span><span className="text-purple-400">return</span> <span className="text-white">[]</span></div>
+                      </div>
+                      <div className="flex mt-4">
+                        <div className="text-white/30 w-8 text-right pr-4">9</div>
+                        <div><span className="text-green-400"># Test cases</span></div>
+                      </div>
+                      <div className="flex">
+                        <div className="text-white/30 w-8 text-right pr-4">10</div>
+                        <div><span className="text-purple-400">print</span><span className="text-white">(</span><span className="text-cyan-400">two_sum</span><span className="text-white">([</span><span className="text-green-400">2</span>, <span className="text-green-400">7</span>, <span className="text-green-400">11</span>, <span className="text-green-400">15</span><span className="text-white">], </span><span className="text-green-400">9</span><span className="text-white">))</span></div>
+                      </div>
+                      <div className="flex">
+                        <div className="text-white/30 w-8 text-right pr-4">11</div>
+                        <div><span className="text-purple-400">print</span><span className="text-white">(</span><span className="text-cyan-400">two_sum</span><span className="text-white">([</span><span className="text-green-400">3</span>, <span className="text-green-400">2</span>, <span className="text-green-400">4</span><span className="text-white">], </span><span className="text-green-400">6</span><span className="text-white">))</span></div>
+                      </div>
+                    </div>
+                    
+                    <div className="w-1/2 p-4 bg-black/60 overflow-hidden flex flex-col">
+                      <div className="p-3 rounded-lg bg-black/40 border border-white/10 font-mono text-sm mb-4 flex-1">
+                        <div className="text-white/60 mb-2">$ python two_sum.py</div>
+                        <div className="text-white">[0, 1]</div>
+                        <div className="text-white">[1, 2]</div>
+                        <div className="text-white/60 mt-2">Process completed with exit code 0</div>
+                      </div>
+                      
+                      <div className="space-y-3">
+                        <div className="p-3 rounded-lg bg-emerald-500/10 border border-emerald-500/30">
+                          <div className="text-emerald-400 font-medium mb-1">All Tests Passed</div>
+                          <div className="flex justify-between text-sm">
+                            <span className="text-white/80">Runtime:</span>
+                            <span className="text-white">36 ms (faster than 92%)</span>
+                          </div>
+                          <div className="flex justify-between text-sm">
+                            <span className="text-white/80">Memory:</span>
+                            <span className="text-white">14.2 MB (better than 85%)</span>
+                          </div>
+                        </div>
+                        
+                        <button className="w-full p-2.5 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-medium transition-all flex items-center justify-center gap-2">
+                          <Play className="w-4 h-4" />
+                          <span>Submit Solution</span>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+      
+      <div className="flex justify-center mt-6">
+        <div className="flex gap-2">
+          {features.map((feature) => (
+            <button
+              key={feature.id}
+              onClick={() => setActiveFeature(feature.id)}
+              className={`w-2 h-2 rounded-full transition-all ${
+                activeFeature === feature.id
+                  ? `bg-gradient-to-r ${feature.color} w-8`
+                  : "bg-white/30 hover:bg-white/50"
+              }`}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default FeatureShowcase
diff --git a/client/src/components/components/InteractiveTabs.jsx b/client/src/components/components/InteractiveTabs.jsx
index 84e8296..97a0a36 100644
--- a/client/src/components/components/InteractiveTabs.jsx
+++ b/client/src/components/components/InteractiveTabs.jsx
@@ -1,69 +1,139 @@
-import React, { useState } from 'react';
+"use client"
+
+import { useState, useEffect } from "react"
+import { Code, MessageSquare, Play } from 'lucide-react'
 
 const InteractiveTabs = () => {
-  const [activeTab, setActiveTab] = useState(0);
-  
+  const [activeTab, setActiveTab] = useState(0)
+  const [isHovering, setIsHovering] = useState(false)
+
+  // auto rotates tabs every 8 seconds unless user is hovering
+  useEffect(() => {
+    if (isHovering) return
+
+    const interval = setInterval(() => {
+      setActiveTab((prev) => (prev === 2 ? 0 : prev + 1))
+    }, 8000)
+
+    return () => clearInterval(interval)
+  }, [isHovering])
+
   const tabs = [
-    "Solve LeetCode Questions Directly",
-    "Compile Code",
-    "Discuss Highlighted Code"
-  ];
+    {
+      id: 0,
+      title: "Select Interview",
+      description: "Solve LeetCode Questions Directly",
+      icon: <Code className="w-5 h-5" />,
+      color: "from-emerald-500 to-teal-500",
+      textColor: "text-emerald-400",
+      borderColor: "border-emerald-500",
+      videoSrc: "ScreenRecording1.mov",
+    },
+    {
+      id: 1,
+      title: "Discuss Highlighted Code",
+      description: "Get AI feedback on your code",
+      icon: <MessageSquare className="w-5 h-5" />,
+      color: "from-blue-500 to-cyan-500",
+      textColor: "text-blue-400",
+      borderColor: "border-blue-500",
+      videoSrc: "ScreenRecording2.mov",
+    },
+    {
+      id: 2,
+      title: "Compile Code",
+      description: "Test your solutions instantly",
+      icon: <Play className="w-5 h-5" />,
+      color: "from-purple-500 to-pink-500",
+      textColor: "text-purple-400",
+      borderColor: "border-purple-500",
+      videoSrc: "ScreenRecording3.mov",
+    },
+  ]
 
   return (
-    <div className="ml-20 border-1 border-white/10 h-95 w-2/3 flex-grow rounded-lg flex flex-row">
-      <div className="flex flex-2 flex-col justify-between w-full text-md">
-        <div onClick={() => setActiveTab(0)} className={`transition-all duration-300 cursor-pointer h-full w-full border-r-1 border-b-1 border-white/10 flex justify-center items-center text-center px-3 ${activeTab === 0 ? 'bg-white/5 text-white' : 'hover:bg-white/5 text-white/60'}`}>Select <br></br>Interview</div>
-        <div onClick={() => setActiveTab(1)} className={`transition-all duration-300 cursor-pointer h-full w-full border-r-1 border-b-1 border-white/10 flex justify-center items-center text-center px-3 ${activeTab === 1 ? 'bg-white/5 text-white' : 'hover:bg-white/5 text-white/60'}`}>Discuss <br></br>Highlighted Code</div>
-        <div onClick={() => setActiveTab(2)} className={`transition-all duration-300 cursor-pointer h-full w-full border-r-1 border-b-1 border-white/10 flex justify-center items-center text-center px-3 ${activeTab === 2 ? 'bg-white/5 text-white' : 'hover:bg-white/5 text-white/60'}`}>Compile <br></br>Code</div>
+    <div
+      className="relative w-full max-w-5xl mx-auto rounded-xl overflow-hidden"
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+    >
+      <div className="flex justify-center mb-6">
+        <div className="flex gap-2 p-1 bg-white/5 rounded-full border border-white/10">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`flex items-center gap-2 px-5 py-2.5 rounded-full transition-all ${
+                activeTab === tab.id
+                  ? `bg-gradient-to-r ${tab.color} text-white`
+                  : "text-white/70 hover:text-white hover:bg-white/5"
+              }`}
+            >
+              {tab.icon}
+              <span className="font-medium">{tab.title}</span>
+            </button>
+          ))}
+        </div>
       </div>
-      <div className="flex flex-6 justify-center items-center px-3.5 py-3">
-        <div className="rounded-md h-full w-full flex text-black text-center">
-          {activeTab === 0 && (
-            <div className="flex">
-              <video 
-                className="w-full h-full object-cover rounded-lg" 
-                src="ScreenRecording1.mov" 
-                autoPlay 
-                muted 
-                controls={false} 
-                onEnded={() => console.log("Video ended.")}
-              >
-                Your browser does not support the video tag.
-              </video>
-            </div>
-          )}
-          {activeTab === 1 && (
-            <div>
-              <video 
-                className="w-full h-full object-cover rounded-lg" 
-                src="ScreenRecording2.mov" 
-                autoPlay 
-                muted 
-                controls={false} 
-                onEnded={() => console.log("Video ended.")}
-              >
-                Your browser does not support the video tag.
-              </video>
-            </div>
-          )}
-          {activeTab === 2 && (
-            <div>
-              <video 
-                className="w-full h-full object-cover rounded-lg" 
-                src="ScreenRecording3.mov" 
-                autoPlay 
-                muted 
-                controls={false} 
-                onEnded={() => console.log("Video ended.")}
-              >
-                Your browser does not support the video tag.
-              </video>
+
+      <div className="relative h-[450px] rounded-xl overflow-hidden">
+        <div className={`absolute -inset-0.5 bg-gradient-to-r ${tabs[activeTab].color} rounded-xl opacity-50`}></div>
+
+        <div className="relative bg-black/40 backdrop-blur-sm rounded-xl overflow-hidden border border-white/10 h-full">
+          {tabs.map((tab) => (
+            <div
+              key={tab.id}
+              className={`absolute inset-0 transition-opacity duration-500 ${
+                activeTab === tab.id ? "opacity-100" : "opacity-0 pointer-events-none"
+              }`}
+            >
+              <div className="relative h-full w-full overflow-hidden">
+                <video
+                  className="absolute inset-0 w-full h-full object-cover"
+                  src={tab.videoSrc}
+                  autoPlay
+                  muted
+                  loop
+                  playsInline
+                >
+                  Your browser does not support the video tag.
+                </video>
+
+                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-black/40"></div>
+
+                <div className="absolute bottom-0 left-0 right-0 p-6 flex justify-between items-center">
+                  <div className={`px-4 py-2 rounded-lg bg-black/60 backdrop-blur-sm ${tab.textColor} border ${tab.borderColor}/30`}>
+                    <div className="flex items-center gap-2">
+                      {tab.icon}
+                      <span className="font-medium">{tab.title}</span>
+                    </div>
+                  </div>
+                  
+                  <div className="text-white/80 text-sm bg-black/60 backdrop-blur-sm px-4 py-2 rounded-lg">
+                    {tab.description}
+                  </div>
+                </div>
+              </div>
             </div>
-          )}
+          ))}
+        </div>
+      </div>
+
+      <div className="flex justify-center mt-6">
+        <div className="flex gap-2">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`w-2 h-2 rounded-full transition-all ${
+                activeTab === tab.id ? `bg-gradient-to-r ${tab.color} w-8` : "bg-white/30 hover:bg-white/50"
+              }`}
+            />
+          ))}
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default InteractiveTabs;
+export default InteractiveTabs;
\ No newline at end of file
diff --git a/client/src/components/components/MuteButton.jsx b/client/src/components/components/MuteButton.jsx
index e1bb896..bc7d078 100644
--- a/client/src/components/components/MuteButton.jsx
+++ b/client/src/components/components/MuteButton.jsx
@@ -130,7 +130,6 @@ const MuteButton = ({ hasStarted, averageVolume, startRecording, stopRecording,
       )}
 
       
-      {/* Mute Overlay */}
       {showOverlay && (
         <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 
                         bg-black/30 text-white px-6 py-3 rounded-xl text-xl font-semibold 
@@ -139,7 +138,6 @@ const MuteButton = ({ hasStarted, averageVolume, startRecording, stopRecording,
         </div>
       )}
 
-      {/* Processing Overlay */}
       {status === "Processing audio..." && (
         <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 
                         bg-black/30 text-white px-6 py-3 rounded-xl text-xl font-semibold 
@@ -148,9 +146,7 @@ const MuteButton = ({ hasStarted, averageVolume, startRecording, stopRecording,
         </div>
       )}
 
-      {/* Mute Button + Bars */}
       <div className="fixed bottom-10 right-10 bg-(--mute-bg-light) rounded-full flex">
-        {/* Bars */}
         <div className="flex items-center justify-end pr-3.5 pl-5">
           <div className="flex space-x-[3px] items-center h-6">
             {barMultipliers.map((multiplier, i) => (
@@ -167,7 +163,6 @@ const MuteButton = ({ hasStarted, averageVolume, startRecording, stopRecording,
           </div>
         </div>
 
-        {/* Mute/Unmute Button */}
         <button
           className={`cursor-pointer w-12 h-12 rounded-full bg-(--mute-bg) text-white flex items-center justify-center shadow-md transition-all z-50 ${
             !isMuted 
diff --git a/client/src/components/pages/LandingPage.jsx b/client/src/components/pages/LandingPage.jsx
index 3793b4e..7a4241c 100644
--- a/client/src/components/pages/LandingPage.jsx
+++ b/client/src/components/pages/LandingPage.jsx
@@ -1,64 +1,252 @@
-import React, { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import InteractiveTabs from '../components/InteractiveTabs';
+"use client"
+import { useNavigate } from "react-router-dom"
+import FeatureShowcase from "../components/FeatureShowcase"
+import InteractiveTabs from "../components/InteractiveTabs"
+import { ArrowRight, Github, Code, Sparkles, CheckCircle } from "lucide-react"
+import { useState, useEffect } from "react"
 
 function LandingPage() {
-  const navigate = useNavigate();
+  const navigate = useNavigate()
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
+
+  // Track mouse position for subtle gradient effect
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      setMousePosition({ x: e.clientX, y: e.clientY })
+    }
+
+    window.addEventListener("mousemove", handleMouseMove)
+    return () => window.removeEventListener("mousemove", handleMouseMove)
+  }, [])
+
+  const features = [
+    {
+      title: "Voice-Powered AI",
+      description: "Speak your code and get real-time feedback from our AI assistant",
+      icon: <Sparkles className="w-5 h-5 text-emerald-400" />,
+    },
+    {
+      title: "LeetCode Integration",
+      description: "Practice with real interview questions from LeetCode's database",
+      icon: <Code className="w-5 h-5 text-emerald-400" />,
+    },
+    {
+      title: "Performance Analysis",
+      description: "Get detailed feedback on your code's time and space complexity",
+      icon: <CheckCircle className="w-5 h-5 text-emerald-400" />,
+    },
+  ]
 
   return (
-    <div className="flex flex-col h-full">
-      {/* Top Navigation */}
-      <div className="mt-7 border-1 border-white/10 mx-30 rounded-full flex justify-between items-center">
-
-        <button onClick={() => navigate("/")}>
-          <div className="flex items-center ml-5 py-2 cursor-pointer">
-            <img src="/logo.png" alt="Logo" className="w-8 h-8 mr-2" />
-            <div className="text-white text-xl font-semibold">MeetCode</div>
-          </div>
-        </button>
-        <div className="my-2">
-          <button 
-              className="mr-3 h-full w-22 border-3 border-(--hero) rounded-full bg-(--hero) transition duration-300 cursor-pointer"
-            >
-              <a target="_blank" href="https://github.com/Jam-Cai/MeetCode">GitHub</a>
+    <div className="min-h-screen bg-black text-white flex flex-col overflow-x-hidden">
+      <div
+        className="fixed inset-0 opacity-20 pointer-events-none z-0"
+        style={{
+          background: `radial-gradient(circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.1), rgba(124, 58, 237, 0.05), transparent 50%)`,
+          transition: "background 0.5s ease",
+        }}
+      />
+
+      <div className="fixed inset-0 opacity-20 pointer-events-none z-0">
+        <div className="absolute top-[-20%] left-[-10%] w-[60%] h-[60%] bg-gradient-to-r from-purple-700 to-violet-900 rounded-full blur-[120px]" />
+        <div className="absolute bottom-[-10%] right-[-5%] w-[50%] h-[50%] bg-gradient-to-r from-emerald-600 to-teal-700 rounded-full blur-[120px]" />
+      </div>
+
+      <header className="w-full py-6 px-8 relative z-10">
+        <div className="max-w-7xl mx-auto flex justify-between items-center">
+          <button
+            onClick={() => navigate("/")}
+            className="flex items-center gap-3 transition-all hover:scale-105 group"
+          >
+            <div className="bg-gradient-to-br from-emerald-400 via-teal-500 to-cyan-400 p-2.5 rounded-xl shadow-lg shadow-emerald-500/20 group-hover:shadow-emerald-500/40 transition-all">
+              <Code className="w-5 h-5 text-black" />
+            </div>
+            <span className="text-xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-white/70">
+              MeetCode
+            </span>
           </button>
+
+          <a
+            href="https://github.com/Jam-Cai/MeetCode"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 bg-white/5 hover:bg-white/10 text-white px-5 py-2.5 rounded-full transition-all border border-white/10 backdrop-blur-sm hover:shadow-lg hover:shadow-emerald-500/10 group"
+          >
+            <Github className="w-4 h-4 group-hover:rotate-12 transition-transform" />
+            <span className="font-medium">GitHub</span>
+          </a>
         </div>
-        
-      </div>
-      
-      
-      {/* Main Content */}
-      <div className="h-[80vh] w-full px-8 md:px-16 lg:px-40 flex flex-col md:flex-row items-center justify-center py-12">
-        <div className="w-[37vw] flex flex-col gap-4 mb-8 md:mb-0"> 
-          <h1 className="text-3xl md:text-4xl lg:text-[38px] leading-tight font-black">
-            <span className="text-white bg-(--hero) px-2">MeetCode:</span> Your New Favourite LeetCode Preparation Tool
-          </h1> 
-          <p className="text-[16px] text-white/60">
-            Built to enable Software Engineers around the world to excel at their next technical rounds with a Voice-AI LeetCode interview tool.
-          </p> 
-
-          <div className="flex flex-row items-center">
-            <h1 className="text-[20px] font-semibold">Contributors:</h1>
-            <a target="_blank" href="https://www.linkedin.com/in/aayush-grover-06"><img src="AayushHeadshot.png" className="w-6 h-6 rounded-full ml-3"></img></a>
-            <a target="_blank" href="https://www.linkedin.com/in/jam-cai"><img src="JamesHeadshot.jpeg" className="w-6 h-6 rounded-full ml-3"></img></a>
-            <a target="_blank" href="https://www.linkedin.com/in/-larrypan"><img src="LarryHeadshot.jpg" className="w-6 h-6 rounded-full ml-3"></img></a>
+      </header>
+
+      <section className="relative z-10 pt-8 pb-16">
+        <div className="max-w-7xl mx-auto px-8">
+          <div className="flex flex-col lg:flex-row items-center gap-12">
+            <div className="lg:w-1/2 flex flex-col gap-8">
+              <div className="space-y-6">
+                <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-white/5 rounded-full border border-white/10 backdrop-blur-sm w-fit">
+                  <Sparkles className="w-4 h-4 text-emerald-400" />
+                  <span className="text-sm font-medium text-white/80">AI-Powered Interview Prep</span>
+                </div>
+
+                <h1 className="text-4xl md:text-5xl xl:text-6xl font-bold leading-tight">
+                  <span className="bg-gradient-to-r from-emerald-400 via-teal-400 to-cyan-400 bg-clip-text text-transparent">
+                    MeetCode:
+                  </span>{" "}
+                  Your New Favourite LeetCode Preparation Tool
+                </h1>
+
+                <p className="text-lg text-white/70 max-w-xl leading-relaxed">
+                  Built to enable Software Engineers around the world to excel at their next technical rounds with a
+                  Voice-AI LeetCode interview tool.
+                </p>
+              </div>
+
+              <div className="flex flex-col gap-8">
+                <div className="flex flex-col gap-3">
+                  <h2 className="text-sm font-medium flex items-center gap-2">
+                    <span className="h-px w-5 bg-gradient-to-r from-emerald-400 to-teal-500"></span>
+                    Contributors
+                  </h2>
+                  <div className="flex items-center -space-x-3">
+                    <a
+                      href="https://www.linkedin.com/in/aayush-grover-06"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="transition-transform hover:scale-110 relative"
+                    >
+                      <div className="absolute inset-0 bg-gradient-to-r from-emerald-400 to-teal-500 rounded-full blur-sm opacity-50 animate-pulse"></div>
+                      <img
+                        src="AayushHeadshot.png"
+                        alt="Aayush Grover"
+                        className="relative w-12 h-12 rounded-full border-2 border-emerald-400 object-cover"
+                      />
+                    </a>
+                    <a
+                      href="https://www.linkedin.com/in/jam-cai"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="transition-transform hover:scale-110 relative"
+                    >
+                      <div className="absolute inset-0 bg-gradient-to-r from-emerald-400 to-teal-500 rounded-full blur-sm opacity-50 animate-pulse"></div>
+                      <img
+                        src="JamesHeadshot.jpeg"
+                        alt="James Cai"
+                        className="relative w-12 h-12 rounded-full border-2 border-emerald-400 object-cover"
+                      />
+                    </a>
+                    <a
+                      href="https://www.linkedin.com/in/-larrypan"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="transition-transform hover:scale-110 relative"
+                    >
+                      <div className="absolute inset-0 bg-gradient-to-r from-emerald-400 to-teal-500 rounded-full blur-sm opacity-50 animate-pulse"></div>
+                      <img
+                        src="LarryHeadshot.jpg"
+                        alt="Larry Pan"
+                        className="relative w-12 h-12 rounded-full border-2 border-emerald-400 object-cover"
+                      />
+                    </a>
+                  </div>
+                </div>
+
+                <button
+                  onClick={() => navigate("/interview")}
+                  className="flex items-center justify-center gap-2 bg-gradient-to-r from-emerald-500 via-teal-500 to-cyan-500 hover:from-emerald-600 hover:via-teal-600 hover:to-cyan-600 text-white font-medium py-3.5 px-8 rounded-full transition-all w-fit group shadow-lg shadow-emerald-500/20 hover:shadow-emerald-500/30"
+                >
+                  <span className="font-bold">Try It Now</span>
+                  <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
+                </button>
+              </div>
+            </div>
+
+            <div className="lg:w-1/2 grid grid-cols-1 gap-4">
+              {features.map((feature, index) => (
+                <div
+                  key={index}
+                  className="p-6 rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm hover:bg-white/10 transition-all group"
+                >
+                  <div className="flex items-start gap-4">
+                    <div className="p-3 rounded-lg bg-gradient-to-br from-emerald-500/20 to-teal-500/20 border border-emerald-500/30 group-hover:from-emerald-500/30 group-hover:to-teal-500/30 transition-all">
+                      {feature.icon}
+                    </div>
+                    <div>
+                      <h3 className="text-xl font-bold mb-2 text-white group-hover:text-emerald-400 transition-colors">
+                        {feature.title}
+                      </h3>
+                      <p className="text-white/70">{feature.description}</p>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="relative z-10 py-16 bg-gradient-to-b from-black to-black/80">
+        <div className="max-w-7xl mx-auto px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4">
+              <span className="bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent">
+                Powerful Features
+              </span>
+            </h2>
+            <p className="text-white/70 max-w-2xl mx-auto">
+              MeetCode combines the best of LeetCode with AI-powered interview preparation to help you ace your next
+              technical interview.
+            </p>
           </div>
 
-          <button 
-            className="pl-4 group mt-2 py-1 h-10 w-37 inline-flex border-3 border-(--hero) rounded-full bg-(--hero) text-white text-md font-bold transition duration-300 cursor-pointer items-center gap-1" 
-            onClick={() => navigate("/interview")}
-          > 
-            Try It Now 
-            <span className="transition-transform duration-300 group-hover:translate-x-1 ml-1.5">
-              <img src="rarrow.png" className="w-3" />
-            </span> 
-          </button> 
+          <FeatureShowcase />
         </div>
-        <InteractiveTabs />
-      </div>
+      </section>
+
+      <section className="relative z-10 py-16 bg-gradient-to-b from-black/80 to-black">
+        <div className="max-w-7xl mx-auto px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4">
+              <span className="bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
+                Try It Yourself
+              </span>
+            </h2>
+            <p className="text-white/70 max-w-2xl mx-auto">
+              Experience the intuitive interface and powerful features that make MeetCode the ultimate LeetCode
+              companion.
+            </p>
+          </div>
+
+          <InteractiveTabs />
+        </div>
+      </section>
+
+      <footer className="relative z-10 py-8 border-t border-white/10">
+        <div className="max-w-7xl mx-auto px-8 flex flex-col md:flex-row justify-between items-center">
+          <div className="flex items-center gap-2 mb-4 md:mb-0">
+            <div className="bg-gradient-to-br from-emerald-400 to-cyan-400 p-2 rounded-lg">
+              <Code className="w-4 h-4 text-black" />
+            </div>
+            <span className="font-bold">MeetCode</span>
+          </div>
+
+          <div className="text-white/50 text-sm">© 2023 MeetCode. All rights reserved.</div>
 
+          <div className="flex gap-4 mt-4 md:mt-0">
+            <a href="#" className="text-white/70 hover:text-white transition-colors">
+              About
+            </a>
+            <a href="#" className="text-white/70 hover:text-white transition-colors">
+              Privacy
+            </a>
+            <a href="#" className="text-white/70 hover:text-white transition-colors">
+              Terms
+            </a>
+          </div>
+        </div>
+      </footer>
     </div>
   )
 }
 
-export default LandingPage
\ No newline at end of file
+export default LandingPage
+
diff --git a/client/src/components/pages/ProblemPage.jsx b/client/src/components/pages/ProblemPage.jsx
index f926838..96f74c3 100644
--- a/client/src/components/pages/ProblemPage.jsx
+++ b/client/src/components/pages/ProblemPage.jsx
@@ -259,4 +259,4 @@ function ProblemPage() {
   );
 }
 
-export default ProblemPage;
+export default ProblemPage;
\ No newline at end of file
diff --git a/client/src/index.css b/client/src/index.css
index 3e21f24..72f0b9c 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,21 +1,153 @@
 @import "tailwindcss";
 
 @theme {
-  --background:rgb(30, 30, 30);
-  --hero: #04AD8C;
-  --orange:rgb(255, 168, 61);
-  --green:rgb(75, 227, 106);
-  --red:rgb(247, 91, 91);
-  --code-fill: #252526;
-  --code-stroke:rgb(59, 59, 59);
-  --mute-bg:rgb(79, 79, 79);
-  --mute-bg-light:rgb(46, 46, 46);
-  --code-text: #D4D4D4;
+  --background: #000000;
+  --hero: #10b981;
+  --orange: rgb(255, 168, 61);
+  --green: rgb(75, 227, 106);
+  --red: rgb(247, 91, 91);
+  --code-fill: #0d0d15;
+  --code-stroke: rgb(59, 59, 59);
+  --mute-bg: rgb(79, 79, 79);
+  --mute-bg-light: rgb(46, 46, 46);
+  --code-text: #d4d4d4;
 }
 
 body {
   background: var(--background);
-  font-family: Montserrat, sans-serif;
+  font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
   color: white;
+  overflow-x: hidden;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.glass {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.typing-animation {
+  overflow: hidden;
+  border-right: 2px solid rgba(255, 255, 255, 0.75);
+  white-space: nowrap;
+  margin: 0;
+  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+}
+
+.typing-animation-cursor {
+  animation: blink-caret 0.75s step-end infinite;
+}
+
+@keyframes typing {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes blink-caret {
+  from,
+  to {
+    border-color: transparent;
+  }
+  50% {
+    border-color: rgba(255, 255, 255, 0.75);
+  }
+}
+
+/* syntax highlighting */
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #6a9955;
+}
+
+.token.punctuation {
+  color: #d4d4d4;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #b5cea8;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #ce9178;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #d4d4d4;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #c586c0;
+}
+
+.token.function,
+.token.class-name {
+  color: #dcdcaa;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #d16969;
 }