diff --git a/src/app/studio/page.tsx b/src/app/studio/page.tsx
index a5b391e..74bfcb4 100644
--- a/src/app/studio/page.tsx
+++ b/src/app/studio/page.tsx
@@ -1,21 +1,60 @@
 "use client";
 
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
-import MediaAbout from "@/components/sections/about/MediaAbout";
-import ContactText from "@/components/sections/contact/ContactText";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Sparkles } from "lucide-react";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import { useState } from "react";
+import { Music, Volume2, Sliders, Download, Settings, Mic } from "lucide-react";
+
+interface StemSlider {
+  name: string;
+  value: number;
+  color: string;
+}
 
 export default function StudioPage() {
+  const [lyrics, setLyrics] = useState("");
+  const [selectedStyle, setSelectedStyle] = useState("pop");
+  const [selectedVoice, setSelectedVoice] = useState("smooth");
+  const [stems, setStems] = useState<StemSlider[]>([
+    { name: "Drums", value: 100, color: "#FF0080" },
+    { name: "Bass", value: 100, color: "#00D9FF" },
+    { name: "Chords", value: 100, color: "#FFB700" },
+    { name: "Vocals", value: 100, color: "#00FF41" },
+  ]);
+
   const navItems = [
     { name: "Home", id: "/" },
-    { name: "Features", id: "/#features" },
+    { name: "Features", id: "features" },
     { name: "Pricing", id: "/pricing" },
     { name: "Studio", id: "https://studio.dieter.ai" },
     { name: "Contact", id: "/contact" },
   ];
 
+  const styles = [
+    "Pop",    "Hip-Hop",    "Electronic",    "Ambient",    "Rock",    "Jazz",    "Classical",    "Soul"];
+  const voices = ["Smooth", "Energetic", "Deep", "High", "Robotic", "Warm"];
+
+  const handleStemChange = (index: number, value: number) => {
+    const newStems = [...stems];
+    newStems[index].value = value;
+    setStems(newStems);
+  };
+
+  const handleImprove = () => {
+    // Placeholder for improvement functionality
+    console.log("Improving lyrics...");
+  };
+
+  const handleGenerate = () => {
+    // Placeholder for generation functionality
+    console.log("Generating music...");
+  };
+
+  const handleExport = () => {
+    // Placeholder for export functionality
+    console.log("Exporting track...");
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-shift"
@@ -38,55 +77,190 @@ export default function StudioPage() {
         />
       </div>
 
-      <div id="studio-hero" data-section="studio-hero">
-        <HeroSplitKpi
-          title="Music Production Inside Your Browser"
-          description="Access your complete music studio instantly. No downloads, no complex setup—just pure creative power at your fingertips. Start producing immediately."
-          tag="Professional Studio Tools"
-          tagIcon={Sparkles}
-          background={{ variant: "glowing-orb" }}
-          kpis={[
-            { value: "100%", label: "Cloud-Based" },
-            { value: "24/7", label: "Access Anywhere" },
-            { value: "Real-Time", label: "Collaboration" },
-          ]}
-          enableKpiAnimation={true}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ahi2vwDB5Ta9isxbMIvH8BKpyQ/a-modern-sleek-browser-based-music-produ-1773052781984-0301b236.png?_wi=2"
-          imageAlt="Dieter Studio production interface for music creation"
-          mediaAnimation="slide-up"
-          imagePosition="right"
-          buttons={[
-            { text: "Enter Studio", href: "https://studio.dieter.ai" },
-            { text: "View Tutorials", href: "/" },
-          ]}
-          buttonAnimation="slide-up"
-        />
-      </div>
+      <div className="min-h-screen bg-gradient-to-b from-slate-950 via-purple-950 to-slate-900 pt-32 pb-20">
+        <div className="max-w-7xl mx-auto px-4">
+          {/* Studio Grid */}
+          <div className="grid grid-cols-12 gap-6 h-[calc(100vh-200px)]">
+            {/* Left Panel - Lyrics & Improvements */}
+            <div className="col-span-3 bg-slate-900/50 border border-purple-500/20 rounded-xl p-6 backdrop-blur-sm flex flex-col">
+              <div className="flex items-center gap-2 mb-4">
+                <Mic className="w-5 h-5 text-cyan-400" />
+                <h2 className="text-lg font-semibold text-white">Lyrics</h2>
+              </div>
+              <textarea
+                value={lyrics}
+                onChange={(e) => setLyrics(e.target.value)}
+                placeholder="Write or paste your lyrics here..."
+                className="flex-1 bg-slate-800/50 border border-purple-500/20 rounded-lg p-4 text-white placeholder-gray-500 focus:outline-none focus:border-cyan-400/50 focus:ring-1 focus:ring-cyan-400/30 resize-none"
+              />
+              <div className="flex gap-3 mt-4">
+                <button
+                  onClick={handleImprove}
+                  className="flex-1 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-2 px-4 rounded-lg transition-all duration-300 transform hover:scale-105"
+                >
+                  Enhance
+                </button>
+                <button
+                  onClick={handleGenerate}
+                  className="flex-1 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition-all duration-300 transform hover:scale-105"
+                >
+                  Generate
+                </button>
+              </div>
+            </div>
 
-      <div id="studio-tools" data-section="studio-tools">
-        <MediaAbout
-          title="Complete Multi-Stem Mixing Workstation"
-          description="Control drums, bass, vocals, and effects with dedicated faders. Real-time EQ adjustments, beat detection, and professional-grade mixing—everything a producer needs to create hit records."
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ahi2vwDB5Ta9isxbMIvH8BKpyQ/professional-mixing-dashboard-featuring--1773052780322-6a11347b.png?_wi=2"
-          imageAlt="Professional mixing dashboard with multi-track controls"
-          useInvertedBackground={true}
-          buttons={[{ text: "Start Mixing", href: "https://studio.dieter.ai" }]}
-          buttonAnimation="opacity"
-        />
-      </div>
+            {/* Center Panel - Waveform & Stem Mixing */}
+            <div className="col-span-6 bg-slate-900/50 border border-purple-500/20 rounded-xl p-6 backdrop-blur-sm flex flex-col">
+              <div className="flex items-center gap-2 mb-6">
+                <Music className="w-5 h-5 text-lime-400" />
+                <h2 className="text-lg font-semibold text-white">Mix</h2>
+              </div>
 
-      <div id="studio-cta" data-section="studio-cta">
-        <ContactText
-          text="Your complete music production studio is ready. Launch now and create your first track in minutes."
-          animationType="entrance-slide"
-          background={{ variant: "sparkles-gradient" }}
-          useInvertedBackground={false}
-          buttons={[
-            { text: "Launch Studio Now", href: "https://studio.dieter.ai" },
-            { text: "Learn More", href: "/" },
-          ]}
-        />
+              {/* Waveform Player */}
+              <div className="bg-slate-800/50 border border-cyan-500/20 rounded-lg p-6 mb-6 flex-1 flex flex-col justify-center">
+                <div className="flex items-center justify-center gap-4 mb-4">
+                  <button className="bg-cyan-500 hover:bg-cyan-600 text-white p-3 rounded-full transition-all duration-300 transform hover:scale-110">
+                    ▶
+                  </button>
+                  <div className="flex-1 h-12 bg-gradient-to-r from-purple-600/20 to-pink-600/20 rounded-lg flex items-center px-4">
+                    <div className="w-full h-1 bg-gradient-to-r from-purple-500 via-cyan-400 to-pink-500 rounded-full"></div>
+                  </div>
+                  <span className="text-sm text-gray-400 w-12 text-right">2:34</span>
+                </div>
+                <p className="text-center text-gray-400 text-sm">Waveform visualization</p>
+              </div>
+
+              {/* Stem Sliders */}
+              <div className="space-y-4">
+                <div className="flex items-center gap-2 mb-3">
+                  <Sliders className="w-4 h-4 text-lime-400" />
+                  <span className="text-sm font-semibold text-gray-300">Stems</span>
+                </div>
+                {stems.map((stem, index) => (
+                  <div key={index} className="space-y-2">
+                    <div className="flex justify-between items-center">
+                      <label className="text-sm text-gray-300 font-medium">
+                        {stem.name}
+                      </label>
+                      <span className="text-xs text-gray-400">{stem.value}%</span>
+                    </div>
+                    <input
+                      type="range"
+                      min="0"
+                      max="100"
+                      value={stem.value}
+                      onChange={(e) =>
+                        handleStemChange(index, parseInt(e.target.value))
+                      }
+                      className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer"
+                      style={{
+                        background: `linear-gradient(to right, ${stem.color} 0%, ${stem.color} ${stem.value}%, rgba(51, 65, 85, 0.5) ${stem.value}%, rgba(51, 65, 85, 0.5) 100%)`,
+                      }}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Right Panel - Settings & Export */}
+            <div className="col-span-3 bg-slate-900/50 border border-purple-500/20 rounded-xl p-6 backdrop-blur-sm flex flex-col">
+              <div className="flex items-center gap-2 mb-4">
+                <Settings className="w-5 h-5 text-amber-400" />
+                <h2 className="text-lg font-semibold text-white">Settings</h2>
+              </div>
+
+              <div className="flex-1 space-y-4 mb-4">
+                {/* Style Selection */}
+                <div>
+                  <label className="block text-sm font-semibold text-gray-300 mb-2">
+                    Genre
+                  </label>
+                  <select
+                    value={selectedStyle}
+                    onChange={(e) => setSelectedStyle(e.target.value)}
+                    className="w-full bg-slate-800/50 border border-purple-500/20 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-cyan-400/50 focus:ring-1 focus:ring-cyan-400/30"
+                  >
+                    {styles.map((style) => (
+                      <option
+                        key={style.toLowerCase()}
+                        value={style.toLowerCase()}
+                      >
+                        {style}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                {/* Voice Selection */}
+                <div>
+                  <label className="block text-sm font-semibold text-gray-300 mb-2">
+                    Voice
+                  </label>
+                  <select
+                    value={selectedVoice}
+                    onChange={(e) => setSelectedVoice(e.target.value)}
+                    className="w-full bg-slate-800/50 border border-purple-500/20 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-cyan-400/50 focus:ring-1 focus:ring-cyan-400/30"
+                  >
+                    {voices.map((voice) => (
+                      <option
+                        key={voice.toLowerCase()}
+                        value={voice.toLowerCase()}
+                      >
+                        {voice}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                {/* BPM */}
+                <div>
+                  <label className="block text-sm font-semibold text-gray-300 mb-2">
+                    BPM
+                  </label>
+                  <input
+                    type="number"
+                    defaultValue="120"
+                    className="w-full bg-slate-800/50 border border-purple-500/20 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-cyan-400/50 focus:ring-1 focus:ring-cyan-400/30"
+                  />
+                </div>
+
+                {/* Key */}
+                <div>
+                  <label className="block text-sm font-semibold text-gray-300 mb-2">
+                    Key
+                  </label>
+                  <select className="w-full bg-slate-800/50 border border-purple-500/20 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-cyan-400/50 focus:ring-1 focus:ring-cyan-400/30">
+                    {[
+                      "C",                      "C#",                      "D",                      "D#",                      "E",                      "F",                      "F#",                      "G",                      "G#",                      "A",                      "A#",                      "B"].map((key) => (
+                      <option key={key} value={key}>
+                        {key}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
+              {/* Export Buttons */}
+              <div className="space-y-3">
+                <button
+                  onClick={handleExport}
+                  className="w-full bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white font-semibold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center gap-2"
+                >
+                  <Download className="w-4 h-4" />
+                  Export MP3
+                </button>
+                <button className="w-full bg-gradient-to-r from-violet-600 to-purple-600 hover:from-violet-700 hover:to-purple-700 text-white font-semibold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center gap-2">
+                  <Volume2 className="w-4 h-4" />
+                  Export Stems
+                </button>
+                <button className="w-full bg-slate-700 hover:bg-slate-600 text-white font-semibold py-2 px-4 rounded-lg transition-all duration-300">
+                  Save Project
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}