diff --git a/App.tsx b/App.tsx
index ae386e2..cf24a46 100644
--- a/App.tsx
+++ b/App.tsx
@@ -12,24 +12,23 @@ const App: React.FC = () => {
     // Simulate initial asset loading
     const timer = setTimeout(() => {
       setIsLoading(false);
-    }, 1500);
+    }, 1000);
     return () => clearTimeout(timer);
   }, []);
 
   if (isLoading) {
     return (
-      <div className="h-screen w-screen bg-[#313338] flex flex-col items-center justify-center">
-        <div className="relative w-24 h-24 mb-4 animate-bounce">
+      <div className="h-screen w-screen bg-[#313338] flex flex-col items-center justify-center animate-fade-in">
+        <div className="relative w-24 h-24 mb-4">
             {/* Simple Logo Placeholder */}
-            <div className="w-20 h-20 bg-[#5865F2] rounded-2xl flex items-center justify-center mx-auto shadow-xl">
+            <div className="w-20 h-20 bg-[#5865F2] rounded-2xl flex items-center justify-center mx-auto shadow-xl animate-bounce">
                  <svg width="48" height="48" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                     <path d="M19.25 4.5H4.75C3.50736 4.5 2.5 5.50736 2.5 6.75V17.25C2.5 18.4926 3.50736 19.5 4.75 19.5H19.25C20.4926 19.5 21.5 18.4926 21.5 17.25V6.75C21.5 5.50736 20.4926 4.5 19.25 4.5Z" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                     <path d="M8.5 10L12 14L15.5 10" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
             </div>
         </div>
-        <div className="text-[#dbdee1] font-bold text-lg animate-pulse">Starting...</div>
-        <div className="text-[#949ba4] text-sm mt-2">Connecting to Discord-Style Interface</div>
+        <div className="text-[#dbdee1] font-bold text-lg animate-pulse">Starting Discord AI...</div>
       </div>
     );
   }
diff --git a/README.md b/README.md
index 231b6a1..1ac3f43 100644
--- a/README.md
+++ b/README.md
@@ -1,130 +1,20 @@
 <div align="center">
-  
-  <!-- PROJECT LOGO OR BANNER -->
-  <!-- Replace the src below with a screenshot of your chat interface or a custom banner -->
-  <img src="https://raw.githubusercontent.com/m4rcel-lol/assets/13ebd5bfa7abe5ee591107b9a7b411f3e3ae2d13/Gemini-API-IoT-banner_1.original.png" alt="Discord AI Chat Banner" width="100%" style="border-radius: 10px; border: 2px solid #2b2d31;" />
-
-  <br />
-  <br />
-
-  # 🤖 Discord-Style Gemini AI Temporary Chatbot Page
-  
-  **A pixel-perfect recreation of the modern Discord UI, powered by Google's Gemini AI. Messages do not get saved after refreshing the page.**
-
-  <p>
-    <a href="#-key-features">Key Features</a> •
-    <a href="#-tech-stack">Tech Stack</a> •
-    <a href="#-getting-started">Getting Started</a> •
-    <a href="#-configuration">Configuration</a>
-  </p>
-
-  <!-- BADGES -->
-  <p>
-    <img src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB" alt="React" />
-    <img src="https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />
-    <img src="https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white" alt="Tailwind" />
-    <img src="https://img.shields.io/badge/Google_Gemini-8E75B2?style=for-the-badge&logo=google&logoColor=white" alt="Gemini" />
-  </p>
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
 </div>
 
----
+# Run and deploy your AI Studio app
 
-## 📖 About The Project
+This contains everything you need to run your app locally.
 
-This project is a fully functional web-based chat interface that meticulously recreates the look and feel of Discord's Direct Message (DM) UI. It connects to the **Google Gemini API** to provide an intelligent, conversational AI bot that acts just like a user in your DMs.
+View your app in AI Studio: https://ai.studio/apps/drive/1--JasS0nNpTl-PmY3TkDkX8eL8Omwi5n
 
-It features the latest Discord design trends, including the dark theme palette, rounded UI elements, "Nitro" style gradient profiles, and custom role badges.
+## Run Locally
 
-## ✨ Key Features
+**Prerequisites:**  Node.js
 
-*   **🎨 Authentic UI/UX:** Custom-built components mimicking Discord's Chat, Sidebar, and Profile views.
-*   **🧠 Powered by Gemini:** Real-time conversational AI using the `gemini-2.5-flash` model.
-*   **💎 Premium Aesthetics:**
-    *   Nitro-style animated gradient themes for profiles.
-    *   Full-screen User Profile Modals with banners.
-    *   Mini-profile popouts on click.
-*   **📝 Rich Text Support:** Full Markdown rendering (Bold, Italic, Code Blocks) for AI responses.
-*   **🏷️ Custom Badges:** Includes high-quality assets for "Verified AI", "Staff", "Bug Hunter", and "Nitro" badges.
-*   **⚡ Responsive Design:** Mobile-friendly layout (Sidebar collapses on smaller screens).
-*   **🎬 Smooth Animations:** Custom CSS keyframes for fade-ins, scale-ups, and slide transitions.
 
-## 📸 Screenshots
-
-<!-- Replace these links with actual screenshots of your app -->
-
-| **Main Chat Interface** | **Profile Popout (Nitro Style)** |
-|:---:|:---:|
-| <img src="https://raw.githubusercontent.com/m4rcel-lol/assets/main/Screenshot_1.png" alt="Main Chat" width="400"/> | <img src="https://raw.githubusercontent.com/m4rcel-lol/assets/main/Screenshot_2.png" alt="Mini Profile" width="400"/> |
-
-| **Full Profile Modal** | **Sidebar Preview** |
-|:---:|:---:|
-| <img src="https://raw.githubusercontent.com/m4rcel-lol/assets/main/Screenshot_4.png" alt="Full Profile" width="400"/> | <img src="https://raw.githubusercontent.com/m4rcel-lol/assets/main/Screenshot_3.png" alt="Sidebar" width="400"/> |
-
-## 🛠️ Tech Stack
-
-*   **Frontend Framework:** React 19
-*   **Language:** TypeScript
-*   **Styling:** Tailwind CSS + Vanilla CSS (for custom scrollbars & animations)
-*   **Icons:** Lucide React
-*   **AI Integration:** @google/genai SDK
-*   **Markdown:** react-markdown
-
-## 🚀 Getting Started
-
-To get a local copy up and running, follow these simple steps.
-
-### Prerequisites
-
-*   Node.js (v18 or higher)
-*   npm or yarn
-
-### Installation
-
-1.  **Clone the repo**
-    ```sh
-    git clone https://github.com/yourusername/discord-ai-chat.git
-    ```
-2.  **Install NPM packages**
-    ```sh
-    npm install
-    ```
-3.  **Set up your API Key**
-    *   Create a `.env` file in the root directory.
-    *   Add your Google Gemini API key:
-    ```env
-    API_KEY=your_google_gemini_api_key_here
-    ```
-    *(Note: You can get an API key from [Google AI Studio](https://aistudio.google.com/))*
-
-4.  **Run the application**
-    ```sh
-    npm run dev
-    ```
-
-## 🎨 Customization
-
-You can easily customize the bot's personality or the UI assets:
-
-*   **Bot Persona:** Edit the `systemInstruction` in `services/geminiService.ts`.
-*   **Images/Assets:** Updated URLs in `components/ChatArea.tsx` and `components/UserProfileSidebar.tsx`.
-*   **Badges:** Add or remove badges in `components/Badges.tsx`.
-
-## 🤝 Contributing
-
-Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
-
-1.  Fork the Project
-2.  Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
-3.  Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
-4.  Push to the Branch (`git push origin feature/AmazingFeature`)
-5.  Open a Pull Request
-
-## 📝 License
-
-Distributed under the MIT License, however it may be a risk to use it, since it mimics the real look of Discord and may get you in trouble. See `LICENSE` for more information.
-
----
-
-<div align="center">
-  <p>Made with ❤️ and patience by m5rcel using React & Gemini</p>
-</div>
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`
diff --git a/index.html b/index.html
index ee76bba..2b940a5 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,16 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Discord-Style AI Chat</title>
+    <!-- Script to suppress Tailwind CDN production warning for a cleaner console -->
+    <script>
+      (function() {
+        var originalWarn = console.warn;
+        console.warn = function(...args) {
+          if (args[0] && typeof args[0] === 'string' && args[0].includes('cdn.tailwindcss.com')) return;
+          originalWarn.apply(console, args);
+        };
+      })();
+    </script>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
@@ -11,6 +21,7 @@
         font-family: 'Inter', sans-serif;
         background-color: #313338;
         color: #dbdee1;
+        overflow: hidden; /* Prevent body scroll, let app handle it */
       }
       /* Custom Scrollbar to match Discord feel */
       ::-webkit-scrollbar {
@@ -123,5 +134,6 @@
 </head>
   <body>
     <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/services/geminiService.ts b/services/geminiService.ts
index 739de4e..b8c61d4 100644
--- a/services/geminiService.ts
+++ b/services/geminiService.ts
@@ -4,9 +4,12 @@ import { Message } from '../types';
 let chatSession: any = null;
 
 const getClient = () => {
+  // Ensure process.env.API_KEY is available. 
+  // If running in a browser without a bundler that polyfills process, this might fail unless configured.
   const apiKey = process.env.API_KEY;
+  
   if (!apiKey) {
-    console.error("API Key not found");
+    console.error("Gemini API Key is missing. Ensure process.env.API_KEY is set.");
     return null;
   }
   return new GoogleGenAI({ apiKey });
@@ -17,13 +20,9 @@ export const sendMessageToGemini = async (
   previousMessages: Message[]
 ): Promise<string> => {
   const ai = getClient();
-  if (!ai) return "Error: API Key is missing. Please check your configuration.";
+  if (!ai) return "Error: API Key is missing. Check the console for details.";
 
   try {
-    // We maintain a simple local chat session if possible, or create new one
-    // Ideally, we'd persist the `chatSession` object, but for this stateless example 
-    // we can re-hydrate somewhat or just use the persistent variable module-level.
-    
     if (!chatSession) {
        chatSession = ai.chats.create({
         model: 'gemini-2.5-flash',
@@ -37,6 +36,6 @@ export const sendMessageToGemini = async (
     return response.text;
   } catch (error) {
     console.error("Gemini API Error:", error);
-    return "I'm having trouble connecting to the mainframe right now. Try again later!";
+    return "I'm having trouble connecting to the servers right now. Please check your network or API key configuration.";
   }
-};
+};
\ No newline at end of file