diff --git a/backend/routes/ai.ts b/backend/routes/ai.ts
index c7d63fba..44c224ad 100644
--- a/backend/routes/ai.ts
+++ b/backend/routes/ai.ts
@@ -143,7 +143,7 @@ router.post("/chat", authMiddleware, async (req, res) => {
                 data: {
                     id: conversationId,
                     userId,
-                    title: data.message.slice(0, 20) + "...",
+                    title: data.message.slice(0, 35) + "...",
                     type: "CONVERSATION",
                     externalId: conversationId
                 }
diff --git a/frontend/app/(app)/apps/[id]/page.tsx b/frontend/app/(app)/apps/[id]/page.tsx
index 3c941ee7..b7a18afd 100644
--- a/frontend/app/(app)/apps/[id]/page.tsx
+++ b/frontend/app/(app)/apps/[id]/page.tsx
@@ -2,7 +2,8 @@
 import React, { useState, useRef } from "react";
 import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
-import { ArrowUpIcon, SpinnerGapIcon, CopyIcon, CheckIcon } from "@phosphor-icons/react";
+import { SpinnerGapIcon, CopyIcon, CheckIcon } from "@phosphor-icons/react";
+import { ArrowUpIcon } from "lucide-react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import SyntaxHighlighter from "react-syntax-highlighter";
@@ -12,7 +13,26 @@ import { cn } from "@/lib/utils";
 import { useUser } from "@/hooks/useUser";
 import { useRouter } from "next/navigation";
 
-const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL ?? "http://localhost:3000";
+const BACKEND_URL =
+  process.env.NEXT_PUBLIC_BACKEND_URL ?? "http://localhost:3000";
+
+const articleFeatures: {
+  id: number;
+  title: string;
+}[] = [
+  {
+    id: 1,
+    title: "Summarize articles instantly",
+  },
+  {
+    id: 2,
+    title: "Turn long reads into key insights",
+  },
+  {
+    id: 3,
+    title: "Get clear, concise summaries",
+  },
+];
 
 interface AppPageProps {
   params: Promise<{ id: string }>;
@@ -22,6 +42,7 @@ export default function AppPage({ params }: AppPageProps) {
   const [appId, setAppId] = React.useState<string>("");
   const [input, setInput] = useState<string>("");
   const [response, setResponse] = useState<string>("");
+  const [showWelcome, setShowWelcome] = useState<boolean>(true);
   const [isLoading, setIsLoading] = useState(false);
   const [copied, setCopied] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -93,17 +114,19 @@ export default function AppPage({ params }: AppPageProps) {
                 try {
                   const parsedData = JSON.parse(data);
                   if (parsedData.error) {
-                    setResponse(prev => prev + `Error: ${parsedData.error}\n`);
+                    setResponse(
+                      (prev) => prev + `Error: ${parsedData.error}\n`,
+                    );
                     continue;
                   }
                 } catch {
                   // If parsing fails, treat as plain text
                 }
               }
-              
+
               // For normal streaming, the data is raw text content
               if (data && data !== "[DONE]") {
-                setResponse(prev => prev + data);
+                setResponse((prev) => prev + data);
               }
             } catch (e) {
               console.error("Error processing data:", e);
@@ -129,6 +152,7 @@ export default function AppPage({ params }: AppPageProps) {
 
     if (!input.trim() || isLoading) return;
 
+    setShowWelcome(false);
     setIsLoading(true);
     setResponse("");
     setError(null);
@@ -144,14 +168,16 @@ export default function AppPage({ params }: AppPageProps) {
       console.log(appId);
       console.log(BACKEND_URL);
       console.log(`${BACKEND_URL}/apps/${appId}`);
+      const currentArticleInput = input.trim();
+      setInput("");
       const response = await fetch(`${BACKEND_URL}/apps/${appId}`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          "Authorization": `Bearer ${localStorage.getItem("token")}`,
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
         },
         body: JSON.stringify({
-          article: input,
+          article: currentArticleInput,
         }),
         signal: abortControllerRef.current?.signal,
       });
@@ -167,168 +193,253 @@ export default function AppPage({ params }: AppPageProps) {
   };
 
   return (
-    <div className="flex h-full w-full flex-col items-center justify-start gap-6 p-6">
-      <div className="w-full max-w-4xl">
-        <h1 className="text-2xl font-bold mb-2">
-          {appId ? appId.replace(/-/g, " ").replace(/\b\w/g, l => l.toUpperCase()) : "App"}
-        </h1>
-        <p className="text-muted-foreground mb-6">
-          {appId === "article-summarizer" 
-            ? "Enter article text to get a summary"
-            : `Use the ${appId} app`
-          }
-        </p>
-
-        <form onSubmit={handleSubmit} className="w-full space-y-4">
-          <div className="bg-muted/20 backdrop-blur-3xl border border-border/50 rounded-2xl p-4">
-            <Textarea
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && !e.shiftKey) {
-                  e.preventDefault();
-               
-                  void handleSubmit(e);
-                }
-              }}
-              placeholder={
-                appId === "article-summarizer" 
-                  ? "Paste article text here..."
-                  : "Enter your input..."
-              }
-              className="min-h-[100px] resize-none border-none bg-transparent shadow-none ring-0 focus-visible:ring-0"
-              disabled={isLoading}
-            />
-            <div className="mt-4 flex justify-end">
-              <Button
-                type="submit"
-                disabled={isLoading || !input.trim()}
-              >
-                {isLoading ? (
-                  <SpinnerGapIcon className="mr-2 h-4 w-4 animate-spin" />
-                ) : (
-                  <ArrowUpIcon className="mr-2 h-4 w-4" />
-                )}
-                {isLoading ? "Processing..." : "Submit"}
-              </Button>
+    <div className="flex h-[96dvh] w-full flex-col items-center justify-start gap-6">
+      <div className="relative flex space-y-6 flex-col items-center justify-end h-full w-full">
+        {(response || isLoading || error) && (
+          <div className="no-scrollbar xl:mt-0 flex h-full w-full flex-1 flex-col gap-4 overflow-y-auto pb-20">
+            <div className="mx-auto w-full max-w-4xl">
+              <div className="mt-6 w-full">
+                <div>
+                  {error && (
+                    <div className="flex items-center space-x-2 text-destructive">
+                      <div className="h-2 w-2 rounded-full bg-destructive"></div>
+                      <span className="text-sm font-medium">{error}</span>
+                    </div>
+                  )}
+
+                  {isLoading && !response && !error && (
+                    <div className="flex items-center space-x-2">
+                      <div className="bg-accent h-2.5 w-2.5 animate-bounce rounded-full [animation-delay:0s]"></div>
+                      <div className="bg-accent h-2.5 w-2.5 animate-bounce rounded-full [animation-delay:0.2s] [animation-direction:reverse]"></div>
+                      <div className="bg-accent h-2.5 w-2.5 animate-bounce rounded-full [animation-delay:0.4s]"></div>
+                      <span className="text-muted-foreground text-sm ml-2">
+                        Processing...
+                      </span>
+                    </div>
+                  )}
+
+                  {response && (
+                    <div className="prose dark:prose-invert max-w-none space-y-4 overflow-auto prose-th:border-b prose-td:border-b prose-th:border-zinc-700/30 prose-td:border-zinc-700/30 prose-hr:border-zinc-700/30">
+                      <ReactMarkdown
+                        remarkPlugins={[remarkGfm]}
+                        components={{
+                          code(props) {
+                            const { children, className, ...rest } = props;
+                            const match = /language-(\w+)/.exec(
+                              className ?? "",
+                            );
+                            const isInline = !match;
+
+                            return isInline ? (
+                              <code
+                                className={cn(
+                                  "bg-orange-400/10 text-orange-400 dark:text-orange-100 dark:bg-orange-200/10 rounded-xl px-1.5 py-0.5 text-sm",
+                                )}
+                                {...rest}
+                              >
+                                {children}
+                              </code>
+                            ) : (
+                              <div className="overflow-hidden rounded-3xl outline-4 outline-offset-2 outline-solid outline-zinc-200/50 dark:outline-zinc-800/50">
+                                <div className="bg-zinc-400/10 flex items-center justify-between px-4 text-sm">
+                                  <p className="text-xs">
+                                    {match ? match[1] : "text"}
+                                  </p>
+                                </div>
+                                <SyntaxHighlighter
+                                  language={match ? match[1] : "text"}
+                                  style={atomOneDark}
+                                  customStyle={{
+                                    margin: 0,
+                                    padding: "1.5rem",
+                                    backgroundColor:
+                                      resolvedTheme === "dark"
+                                        ? "#262626"
+                                        : "#f5f5f5",
+                                    color:
+                                      resolvedTheme === "dark"
+                                        ? "#e5e5e5"
+                                        : "#171717",
+                                    borderRadius: 0,
+                                    boxShadow: "#fa7319",
+                                    fontSize: "0.95rem",
+                                  }}
+                                  PreTag="div"
+                                >
+                                  {String(children).replace(/\n$/, "")}
+                                </SyntaxHighlighter>
+                              </div>
+                            );
+                          },
+                          h1: (props) => <h2 className="">{props.children}</h2>,
+                          h2: (props) => <h3 className="">{props.children}</h3>,
+                          strong: (props) => (
+                            <span className="font-bold">{props.children}</span>
+                          ),
+                          pre: (props) => (
+                            <pre className="!bg-transparent !p-0 !m-0 !border-none !rounded-none !text-inherit !overflow-visible">
+                              {props.children}
+                            </pre>
+                          ),
+                          a: (props) => (
+                            <a
+                              className="!underline-none hover:underline hover:underline-offset-3 text-orange-400 dark:text-orange-200 tracking-wide"
+                              target="_blank"
+                              href={props.href}
+                            >
+                              {props.children}
+                            </a>
+                          ),
+                        }}
+                      >
+                        {response}
+                      </ReactMarkdown>
+
+                      <div className="flex items-center justify-start">
+                        {response && (
+                          <Button
+                            variant="outline"
+                            size="lg"
+                            onClick={() => handleCopy(response)}
+                            className="flex items-center gap-2"
+                          >
+                            {copied ? (
+                              <CheckIcon className="h-4 w-4" />
+                            ) : (
+                              <CopyIcon className="h-4 w-4" />
+                            )}
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {isLoading && response && (
+                    <div className="mt-4 flex items-center space-x-2">
+                      <div className="bg-accent h-1.5 w-1.5 animate-bounce rounded-full [animation-delay:0s]"></div>
+                      <div className="bg-accent h-1.5 w-1.5 animate-bounce rounded-full [animation-delay:0.2s] [animation-direction:reverse]"></div>
+                      <div className="bg-accent h-1.5 w-1.5 animate-bounce rounded-full [animation-delay:0.4s]"></div>
+                    </div>
+                  )}
+                </div>
+              </div>
             </div>
           </div>
-        </form>
+        )}
 
-        {(response || isLoading || error) && (
-          <div className="mt-6 w-full">
-            <div className="flex items-center justify-between mb-4">
-              <h2 className="text-lg font-semibold">Response:</h2>
-              {response && (
+        {!response && showWelcome && (
+          <div className="flex flex-col items-center justify-center">
+            <h1 className="text-2xl font-serif mb-2">
+              {appId
+                ? appId
+                    .replace(/-/g, " ")
+                    .replace(/\b\w/g, (l) => l.toUpperCase())
+                : "App"}
+            </h1>
+
+            <p className="text-muted-foreground mb-6">
+              {appId === "article-summarizer"
+                ? "Enter article text to get a summary"
+                : `Use the ${appId} app`}
+            </p>
+
+            <div className="grid gap-2 grid-cols-1 md:grid-cols-3">
+              {articleFeatures.map((item, index) => (
+                <div
+                  key={item.title}
+                  className={cn(
+                    `group inline-block realtive w-50 h-30 p-4 text-sm leading-5 rounded-3xl font-semibold drop-shadow-md drop-shadow-zinc-400 dark:drop-shadow-white/50 overflow-hidden`,
+                    {
+                      "bg-linear-to-r/oklab from-[#A294F9] via-[#CDC1FF] to-[#F5EFFF] text-purple-900/40":
+                        index === 0,
+                      "bg-linear-to-r/oklab from-[#FAF7F3] via-[#F0E4D3] to-[#DCC5B2] text-amber-900/40":
+                        index === 1,
+                      "bg-linear-to-r/oklab from-[#FFEDFA] via-[#FFB8E0] to-[#EC7FA9] text-pink-900/40":
+                        index === 2,
+                    },
+                  )}
+                >
+                  {item.title}
+                  <div className="absolute right-0 -bottom-4">
+                    <div
+                      className={cn(
+                        "absolute h-18 rounded-2xl w-18 transform transition-transform duration-500 ease-in-out",
+                        {
+                          "bg-purple-300 -z-30 -rotate-10 right-14 group-hover:scale-125 group-hover:-rotate-20":
+                            index === 0,
+                          "bg-amber-100 -z-30 -rotate-10 right-8 -bottom-2.5 group-hover:scale-125":
+                            index === 1,
+                          "bg-pink-300 z-30 -rotate-8 right-10 group-hover:scale-125":
+                            index === 2,
+                        },
+                      )}
+                    />
+
+                    <div
+                      className={cn(
+                        "h-18 rounded-2xl w-18 transform transition-transform duration-500 ease-in-out",
+                        {
+                          "bg-purple-200 z-40 rotate-10 group-hover:scale-105 group-hover:rotate-20 ":
+                            index === 0,
+                          "bg-amber-200 z-40 rotate-20 group-hover:scale-130":
+                            index === 1,
+                          "bg-pink-400 -z-40 rotate-45 group-hover:scale-120":
+                            index === 2,
+                        },
+                      )}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <div className="bg-slate-800/10 w-full mb-4 rounded-3xl border border-black/10 dark:border-zinc-400/10">
+          <div className="w-full max-w-4xl mx-auto">
+            <form
+              onSubmit={handleSubmit}
+              className="flex flex-col p-3 rounded-3xl bg-traansparent inset-shadow-sm  
+						shadow-inner 
+						[box-shadow:inset_0_0_40px_15px_rgba(128,128,128,0.10)]
+						focus:outline-none
+						"
+            >
+              <Textarea
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    void handleSubmit(e);
+                  }
+                }}
+                placeholder={
+                  appId === "article-summarizer"
+                    ? "Paste article text here..."
+                    : "Enter your input..."
+                }
+                className="min-h-12 max-h-80 tracking-wider leading-5 resize-none rounded-none border-none bg-transparent px-2 py-1 shadow-none ring-0 focus-visible:ring-0 dark:bg-transparent placeholder:tracking-wider"
+                disabled={isLoading}
+              />
+              <div className="mt-2 flex items-center justify-end">
                 <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => handleCopy(response)}
-                  className="flex items-center gap-2"
+                  type="submit"
+                  disabled={isLoading || !input.trim()}
+                  size="icon"
+                  className="text-xs text-white bg-gray-100/80 hover:bg-gray-300/90 p-4 rounded-full font-extrabold border border-black/4 outline-0"
                 >
-                  {copied ? (
-                    <CheckIcon className="h-4 w-4" />
+                  {isLoading ? (
+                    <SpinnerGapIcon className="h-4 w-4 animate-spin text-black" />
                   ) : (
-                    <CopyIcon className="h-4 w-4" />
+                    <ArrowUpIcon className="size-4 text-neutral-600" />
                   )}
-                  {copied ? "Copied!" : "Copy"}
                 </Button>
-              )}
-            </div>
-            
-            <div className="bg-muted/10 border border-border/50 rounded-lg p-6 min-h-[200px]">
-              {error && (
-                <div className="flex items-center space-x-2 text-destructive">
-                  <div className="h-2 w-2 rounded-full bg-destructive"></div>
-                  <span className="text-sm font-medium">{error}</span>
-                </div>
-              )}
-              
-              {isLoading && !response && !error && (
-                <div className="flex items-center space-x-2">
-                  <div className="bg-accent h-2.5 w-2.5 animate-bounce rounded-full [animation-delay:0s]"></div>
-                  <div className="bg-accent h-2.5 w-2.5 animate-bounce rounded-full [animation-delay:0.2s] [animation-direction:reverse]"></div>
-                  <div className="bg-accent h-2.5 w-2.5 animate-bounce rounded-full [animation-delay:0.4s]"></div>
-                  <span className="text-muted-foreground text-sm ml-2">Processing...</span>
-                </div>
-              )}
-              
-              {response && (
-                <div className="prose dark:prose-invert max-w-none">
-                  <ReactMarkdown 
-                    remarkPlugins={[remarkGfm]}
-                    components={{
-                      code(props) {
-                        const { children, className, ...rest } = props;
-                        const match = /language-(\w+)/.exec(className ?? "");
-                        const isInline = !match;
-                        
-                        return isInline ? (
-                          <code
-                            className={cn(
-                              "bg-accent rounded-sm px-1 py-0.5 text-sm",
-                              className
-                            )}
-                            {...rest}
-                          >
-                            {children}
-                          </code>
-                        ) : (
-                          <div className="my-4 overflow-hidden rounded-md">
-                            <div className="bg-accent flex items-center justify-between px-4 py-2 text-sm">
-                              <div>{match ? match[1] : "text"}</div>
-                            </div>
-                            <SyntaxHighlighter
-                              language={match ? match[1] : "text"}
-                              style={atomOneDark}
-                              customStyle={{
-                                margin: 0,
-                                padding: "1rem",
-                                backgroundColor:
-                                  resolvedTheme === "dark" ? "#1a1620" : "#f5ecf9",
-                                color:
-                                  resolvedTheme === "dark" ? "#e5e5e5" : "#171717",
-                                borderRadius: 0,
-                                borderBottomLeftRadius: "0.375rem",
-                                borderBottomRightRadius: "0.375rem",
-                              }}
-                            >
-                              {String(children).replace(/\n$/, "")}
-                            </SyntaxHighlighter>
-                          </div>
-                        );
-                      },
-                      strong: (props) => (
-                        <span className="font-bold">{props.children}</span>
-                      ),
-                      a: (props) => (
-                        <a
-                          className="text-primary underline hover:no-underline"
-                          href={props.href}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          {props.children}
-                        </a>
-                      ),
-                    }}
-                  >
-                    {response}
-                  </ReactMarkdown>
-                </div>
-              )}
-              
-              {isLoading && response && (
-                <div className="mt-4 flex items-center space-x-2">
-                  <div className="bg-accent h-1.5 w-1.5 animate-bounce rounded-full [animation-delay:0s]"></div>
-                  <div className="bg-accent h-1.5 w-1.5 animate-bounce rounded-full [animation-delay:0.2s] [animation-direction:reverse]"></div>
-                  <div className="bg-accent h-1.5 w-1.5 animate-bounce rounded-full [animation-delay:0.4s]"></div>
-                </div>
-              )}
-            </div>
+              </div>
+            </form>
           </div>
-        )}
+        </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/(app)/layout.tsx b/frontend/app/(app)/layout.tsx
index 27cb8dc3..8ee2beed 100644
--- a/frontend/app/(app)/layout.tsx
+++ b/frontend/app/(app)/layout.tsx
@@ -1,15 +1,25 @@
-import { SidebarToggle } from "@/app/_components/sidebar-toggle";
-import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+"use client";
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { Separator } from "@/components/ui/separator";
 import { SelectTheme } from "@/components/ui/theme-toggler";
 import { UIStructure } from "@/components/ui/ui-structure";
 import { ThemeProvider } from "@/components/theme-provider";
 import { UpgradeCTA } from "@/components/ui/upgrade-cta";
+import { useUser } from "@/hooks/useUser";
+
+import Link from "next/link";
 
 export default function ChatLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const { user, isLoading: isUserLoading } = useUser();
+
   return (
     <>
       <SidebarProvider>
@@ -23,9 +33,18 @@ export default function ChatLayout({
           <SidebarInset className="min-!h-svh p-2">
             <div className="bg-muted/60 relative h-[calc(100vh-16px)] min-h-[calc(100vh-16px)] w-full rounded-xl p-4">
               <div className="absolute top-0 left-0 z-[50] flex h-12 w-full items-center justify-between px-3">
-                <SidebarToggle />
+                <SidebarTrigger className="shrink-0" />
+                {/* <SidebarToggle /> */}
                 <div className="flex items-center gap-2">
                   <UpgradeCTA variant="topbar" />
+                  {!isUserLoading && !user && (
+                    <Link
+                      href="/auth"
+                      className="flex items-center w-full text-white dark:text-neutral-900 text-xs h-8 bg-neutral-800 dark:bg-zinc-100 font-bold px-4 rounded-2xl inset-shadow-xs inset-shadow-white/20 border border-black/4 outline-0"
+                    >
+                      Login
+                    </Link>
+                  )}
                   <SelectTheme />
                 </div>
               </div>
diff --git a/frontend/app/_components/Email.tsx b/frontend/app/_components/Email.tsx
index fa9a5d8b..8115c6ad 100644
--- a/frontend/app/_components/Email.tsx
+++ b/frontend/app/_components/Email.tsx
@@ -1,12 +1,15 @@
 "use client";
 import { toast } from "sonner";
-import { ArrowLeft } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import Link from "next/link";
 import { Input } from "@/components/ui/input";
 import { BACKEND_URL } from "@/lib/utils";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
+import Link from "next/link";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 const isEmailValid = (email: string) => {
   return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
@@ -21,80 +24,82 @@ export function Email({
   setStep: (step: string) => void;
   email: string;
 }) {
-  const router = useRouter();
   const [sendingRequest, setSendingRequest] = useState(false);
 
-  const handleSendOTP = async () => {
+  const handleAuth = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
     setSendingRequest(true);
-    
-    try {
-      const response = await fetch(`${BACKEND_URL}/auth/initiate_signin`, {
-        method: "POST",
-        body: JSON.stringify({ email }),
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-
-      if (response.status === 200) {
-        setStep("otp");
-        toast.success("OTP sent to email");
-      } else {
+    fetch(`${BACKEND_URL}/auth/initiate_signin`, {
+      method: "POST",
+      body: JSON.stringify({ email }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((res) => {
+        if (res.status === 200) {
+          setStep("otp");
+          toast.success("OTP sent to email");
+        } else {
+          toast.error("Failed to send OTP, please retry after a few minutes");
+        }
+      })
+      .catch((err) => {
+        console.error(err);
         toast.error("Failed to send OTP, please retry after a few minutes");
-      }
-    } catch (err) {
-      console.error(err);
-      toast.error("Failed to send OTP, please retry after a few minutes");
-    } finally {
-      setSendingRequest(false);
-    }
+      })
+      .finally(() => {
+        setSendingRequest(false);
+      });
   };
+
   return (
-    <div className="mx-auto max-h-screen max-w-6xl">
-      <div className="absolute top-4 left-4">
-        {/* <Button asChild variant="ghost" className="font-semibold" onClick={() => router.push("/")}>
-            <Link className="flex items-center gap-2" href="/">
-              <ArrowLeft className="size-4" />
-              Back to chat
-            </Link>
-          </Button> */}
-      </div>
-      <div className="flex h-full flex-col items-center justify-center gap-8 max-w-xl ">
-        <h1 className="text-3xl lg:text-4xl font-bold tracking-tighter text-center">
-          Welcome to <span className="text-primary">1ai</span>
+    <div className="mx-auto w-full max-h-screen max-w-sm px-2 sm:px-0">
+      <div className="flex h-full flex-col items-center justify-center gap-8">
+        <h1 className="text-3xl font-serif text-foreground">
+          Welcome to 1<span className="text-orange-400">ai</span>
         </h1>
-        <div className="w-full flex flex-col gap-2">
-          <Input
-            onChange={(e) => setEmail(e.target.value)}
-            placeholder="Email"
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && isEmailValid(email) && !sendingRequest) {
-                handleSendOTP();
-              }
-            }}
-          />
+        <form onSubmit={handleAuth} className="w-full flex flex-col gap-3">
+          <div className="border border-zinc-400/15 focus-within:border-transparent focus-within:ring-1 rounded-xl focus-within:ring-orange-400/80 dark:focus-within:ring-orange-400/60">
+            <Input
+              className="border-none dark:bg-transparent focus:border-none focus-visible:ring-0 outline-none focus:ring-0"
+              spellCheck={false}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Email"
+            />
+          </div>
           <Button
+            type="submit"
             disabled={!isEmailValid(email) || sendingRequest}
             variant="accent"
-            onClick={() => {
-              if (isEmailValid(email) && !sendingRequest) {
-                handleSendOTP();
-              }
-            }}
-            className="w-full h-12"
+            className="w-full text-sm text-white bg-[#fa7319] hover:bg-[#fa7319]/90 h-10 px-3.5 rounded-xl inset-shadow-sm inset-shadow-white/60 font-medium border border-black/4 outline-0"
           >
             Continue with Email
           </Button>
-        </div>
-        <div className="text-muted-foreground text-sm">
-          By continuing, you agree to our{" "}
-          <Link href="/terms" className="text-muted-foreground font-medium">
-            Terms
-          </Link>{" "}
-          and{" "}
-          <Link href="/privacy" className="text-muted-foreground font-medium">
-            Privacy Policy
-          </Link>
+        </form>
+        <div className="mt-2">
+          <Tooltip>
+            <TooltipTrigger>
+              <div className="group text-muted-foreground text-sm font-serif">
+                <Link
+                  href="/terms"
+                  className="text-muted-foreground group-hover:text-orange-400 hover:underline hover:underline-offset-3"
+                >
+                  Terms
+                </Link>{" "}
+                <span className="group-hover:text-orange-400">and </span>
+                <Link
+                  href="/privacy"
+                  className="text-muted-foreground group-hover:text-orange-400 hover:underline hover:underline-offset-3"
+                >
+                  Privacy Policy
+                </Link>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent sideOffset={1}>
+              <p>By continuing, you agree</p>
+            </TooltipContent>
+          </Tooltip>
         </div>
       </div>
     </div>
diff --git a/frontend/app/_components/Otp.tsx b/frontend/app/_components/Otp.tsx
index 85d19702..9700d94c 100644
--- a/frontend/app/_components/Otp.tsx
+++ b/frontend/app/_components/Otp.tsx
@@ -1,14 +1,25 @@
 "use client";
 
+import { useRef, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
-import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@/components/ui/input-otp";
+import { Input } from "@/components/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from "@/components/ui/input-otp";
 import { useState } from "react";
 import { BACKEND_URL } from "@/lib/utils";
 import { toast } from "sonner";
-import { Mail } from "lucide-react";
 
 export function Otp({ email }: { email: string }) {
+  const initialRef = useRef<HTMLInputElement>(null);
   const [otp, setOtp] = useState("");
   const [isResending, setIsResending] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -25,7 +36,7 @@ export function Otp({ email }: { email: string }) {
       });
 
       const data = await response.json();
-      
+
       if (response.ok) {
         toast("New verification code sent to your email");
       } else {
@@ -38,12 +49,23 @@ export function Otp({ email }: { email: string }) {
     }
   };
 
-  const handleLogin = async (otpValue?: string) => {
-    const currentOtp = otpValue || otp;
-    console.log("handleLogin called with:", { currentOtp, isSubmitting, length: currentOtp.length });
+  useEffect(() => {
+    if (initialRef.current) {
+      initialRef.current.focus();
+    }
+  }, []);
+
+  const handleLogin = async () => {
+    const currentOtp = otp;
+    console.log("handleLogin called with:", {
+      currentOtp,
+      isSubmitting,
+      length: currentOtp.length,
+    });
     if (currentOtp.length !== 6 || isSubmitting) return;
-    
+
     setIsSubmitting(true);
+
     try {
       const response = await fetch(`${BACKEND_URL}/auth/signin`, {
         method: "POST",
@@ -78,82 +100,101 @@ export function Otp({ email }: { email: string }) {
   };
 
   return (
-    <div className="flex h-screen w-screen items-center justify-center bg-background">
-      <div className="w-full max-w-md px-6">
-        <div className="flex flex-col items-center space-y-6">
-          {/* Email Icon */}
-          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary">
-            <Mail className="h-8 w-8 text-primary-foreground" />
-          </div>
-
-          {/* Title and Description */}
-          <div className="text-center space-y-2">
-            <h1 className="text-2xl font-semibold tracking-tight">
-              Check your email
-            </h1>
-            <p className="text-sm text-muted-foreground">
-              Enter the verification code sent to{" "}
-              <span className="font-medium text-foreground">{email}</span>
-            </p>
-          </div>
-
-          {/* OTP Input */}
-          <div className="w-full flex justify-center">
-            <InputOTP
-              maxLength={6}
-              value={otp}
-              onChange={(value) => {
-                setOtp(value);
-                // Auto-submit when OTP is complete
-                if (value.length === 6) {
-                  console.log("Auto-submitting OTP:", value);
-                  setTimeout(() => handleLogin(value), 50);
-                }
-              }}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && otp.length === 6) {
-                  handleLogin(otp);
-                }
-              }}
-              className="flex justify-center"
-            >
-              <InputOTPGroup className="flex gap-2">
-                <InputOTPSlot index={0} className="w-12 h-12 text-xl font-semibold rounded-lg" />
-                <InputOTPSlot index={1} className="w-12 h-12 text-xl font-semibold rounded-lg" />
-                <InputOTPSlot index={2} className="w-12 h-12 text-xl font-semibold rounded-lg" />
-              </InputOTPGroup>
-              <InputOTPSeparator className="mx-3" />
-              <InputOTPGroup className="flex gap-2">
-                <InputOTPSlot index={3} className="w-12 h-12 text-xl font-semibold rounded-lg" />
-                <InputOTPSlot index={4} className="w-12 h-12 text-xl font-semibold rounded-lg" />
-                <InputOTPSlot index={5} className="w-12 h-12 text-xl font-semibold rounded-lg" />
-              </InputOTPGroup>
-            </InputOTP>
-          </div>
-
-          {/* Resend Link */}
-          <div className="text-center">
-            <p className="text-sm text-muted-foreground">
-              Didn't get a code?{" "}
-              <button
-                onClick={handleResend}
-                disabled={isResending}
-                className="font-medium text-primary hover:text-primary/90 underline underline-offset-4 disabled:opacity-50"
-              >
-                {isResending ? "Sending..." : "Resend"}
-              </button>
-            </p>
-          </div>
-
-          {/* Verify Button - Always visible, disabled when incomplete */}
+    <div className="mx-auto w-full max-h-screen max-w-sm px-2 sm:px-0">
+      <div className="flex h-full flex-col items-center justify-center gap-8">
+        <div className="flex flex-col items-center gap-2">
+          <h1 className="text-3xl font-serif text-foreground">
+            Welcome to 1<span className="text-orange-400">ai</span>
+          </h1>
+        </div>
+        <form onSubmit={handleLogin} className="w-full flex flex-col gap-3">
+          <Input disabled placeholder="Email" value={email} />
+          <InputOTP
+            ref={initialRef}
+            maxLength={6}
+            value={otp}
+            onChange={(value) => {
+              setOtp(value);
+              // Auto-submit when OTP is complete
+              if (value.length === 6) {
+                console.log("Auto-submitting OTP:", value);
+                setTimeout(() => handleLogin(), 50);
+              }
+            }}
+          >
+            <InputOTPGroup className="w-full flex items-center">
+              <InputOTPSlot
+                index={0}
+                className="h-12 w-16 rounded-none rounded-tl-xl rounded-bl-xl border border-zinc-400/20"
+              />
+              <InputOTPSlot
+                index={1}
+                className="h-12 w-16 rounded-none border border-zinc-400/20"
+              />
+              <InputOTPSlot
+                index={2}
+                className="h-12 w-16 rounded-none border border-zinc-400/20"
+              />
+              <InputOTPSlot
+                index={3}
+                className="h-12 w-16 rounded-none border border-zinc-400/20"
+              />
+              <InputOTPSlot
+                index={4}
+                className="h-12 w-16 rounded-none border border-zinc-400/20"
+              />
+              <InputOTPSlot
+                index={5}
+                className="h-12 w-16 rounded-none rounded-br-xl rounded-tr-xl border border-zinc-400/20"
+              />
+            </InputOTPGroup>
+          </InputOTP>
           <Button
-            onClick={() => handleLogin()}
-            disabled={otp.length !== 6 || isSubmitting}
-            className="w-full h-11"
-            variant="default"
+            type="submit"
+            variant="accent"
+            className="w-full text-sm text-white bg-[#fa7319] hover:bg-[#fa7319]/90 h-10 px-3.5 rounded-xl inset-shadow-sm inset-shadow-white/60 font-medium border border-black/4 outline-0"
           >
             {isSubmitting ? "Verifying..." : "Verify Code"}
           </Button>
+        </form>
+
+        {/* Resend Link */}
+        <div className="text-center">
+          <p className="text-sm text-muted-foreground">
+            Didn't get a code?{" "}
+            <button
+              onClick={handleResend}
+              disabled={isResending}
+              className="font-medium text-primary hover:text-primary/90 underline underline-offset-4 disabled:opacity-50"
+            >
+              {isResending ? "Sending..." : "resend"}
+            </button>
+          </p>
+        </div>
+
+        <div className="mt-2">
+          <Tooltip>
+            <TooltipTrigger>
+              <div className="group text-muted-foreground text-sm font-serif">
+                <Link
+                  href="/terms"
+                  className="text-muted-foreground group-hover:text-orange-400 hover:underline hover:underline-offset-3"
+                >
+                  Terms
+                </Link>{" "}
+                <span className="group-hover:text-orange-400">and </span>
+                <Link
+                  href="/privacy"
+                  className="text-muted-foreground group-hover:text-orange-400 hover:underline hover:underline-offset-3"
+                >
+                  Privacy Policy
+                </Link>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent sideOffset={1}>
+              <p>By continuing, you agree</p>
+            </TooltipContent>
+          </Tooltip>
         </div>
       </div>
     </div>
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index caab366b..0c846fcd 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -2,24 +2,31 @@ import "@/styles/globals.css";
 import type { Metadata } from "next";
 import { Toaster } from "sonner";
 import { siteConfig } from "@/config/site";
-import { Plus_Jakarta_Sans } from "next/font/google";
 import { Providers } from "./providers";
+import { Inter, Syne } from "next/font/google";
 export const metadata: Metadata = siteConfig;
 
-const font = Plus_Jakarta_Sans({
+const inter = Inter({
   subsets: ["latin"],
-  variable: "--font-jakarta",
+  variable: "--font-inter",
+  weight: ["200", "400", "500"],
+});
+
+const syne = Syne({
+  subsets: ["latin"],
+  variable: "--font-syne",
+  weight: ["700"],
 });
 
 export default function RootLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={`${font.className}`}>
-        <Providers>{children}</Providers>
-        <Toaster />
-      </body>
-    </html>
+		<html lang="en" suppressHydrationWarning>
+			<body className={`${inter.variable} ${syne.variable}`}>
+				<Providers>{children}</Providers>
+				<Toaster />
+			</body>
+		</html>
   );
 }
diff --git a/frontend/components/nav-setting.tsx b/frontend/components/nav-setting.tsx
new file mode 100644
index 00000000..c9d364a8
--- /dev/null
+++ b/frontend/components/nav-setting.tsx
@@ -0,0 +1,86 @@
+"use client"
+
+import {
+	Settings,
+	LogOut,
+} from "lucide-react"
+import { ShieldSlashIcon, ScrollIcon, ArrowClockwiseIcon } from "@phosphor-icons/react"
+
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+} from "@/components/ui/sidebar"
+import Link from "next/link"
+
+export function NavSetting() {
+	return (
+		<SidebarMenu>
+			<SidebarMenuItem>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<SidebarMenuButton
+							className="data-[state=open]:bg-popover data-[state=open]:text-foreground rounded-lg focus-visible:ring-0 bg-transparent hover:bg-transparent text-foreground/80 hover:text-orange-400 dark:hover:text-orange-100 cursor-pointer"
+						>
+							<div className="flex items-center gap-2">
+								<Settings className="ml-auto size-4" />
+								<span className="truncate">Settings</span>
+							</div>
+						</SidebarMenuButton>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent
+						className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-xl bg-popover border-none"
+						align="end"
+						sideOffset={8}
+					>
+						<DropdownMenuLabel className="p-0 font-normal">
+							<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+								<div className="grid flex-1 text-left text-sm leading-tight">
+									<span className="truncate font-medium">Settings</span>
+								</div>
+							</div>
+						</DropdownMenuLabel>
+						<DropdownMenuSeparator className="bg-gray-800/6 dark:bg-zinc-200/6" />
+						<DropdownMenuGroup>
+							<DropdownMenuItem className="focus:bg-orange-300/20 focus:text-orange-400 dark:focus:text-orange-100 dark:focus:bg-orange-100/10 darK:focus:text-orange-200 rounded-lg" onClick={() => window.open("/terms", "_target")}>
+								<ScrollIcon className="dark:focus:text-orange-100 focus:text-green-400" />
+								Terms
+							</DropdownMenuItem>
+							<DropdownMenuItem className="focus:bg-orange-300/20 focus:text-orange-400 dark:focus:text-orange-100 dark:focus:bg-orange-100/10 darK:focus:text-orange-200 rounded-lg" onClick={() => window.open("/privacy", "_target")}>
+								<ShieldSlashIcon className="dark:focus:text-orange-100" />
+								Privacy
+							</DropdownMenuItem>
+							<DropdownMenuItem className="focus:bg-orange-300/20 focus:text-orange-400 dark:focus:text-orange-100 dark:focus:bg-orange-100/10 darK:focus:text-orange-200 rounded-lg" onClick={() => window.open("/refund", "_target")}>
+								<ArrowClockwiseIcon className="dark:focus:text-orange-100 focus:text-orange-400" />
+								<Link href="/refund" target="_target">
+									Refund
+								</Link>
+							</DropdownMenuItem>
+						</DropdownMenuGroup>
+						<DropdownMenuSeparator className="bg-gray-800/6 dark:bg-zinc-200/6" />
+						<DropdownMenuItem
+							className="focus:bg-orange-300/20 focus:text-orange-400 dark:focus:text-orange-100 dark:focus:bg-orange-100/10 darK:focus:text-orange-200 rounded-lg"
+							onClick={(e) => {
+								e.preventDefault();
+								localStorage.removeItem("token");
+								window.location.reload();
+							}}>
+							<LogOut className="dark:focus:text-orange-100 focus:text-orange-400" />
+							Log out
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</SidebarMenuItem>
+		</SidebarMenu>
+	)
+}
+
diff --git a/frontend/components/ui/input-otp.tsx b/frontend/components/ui/input-otp.tsx
index 6f7f55da..87e2d032 100644
--- a/frontend/components/ui/input-otp.tsx
+++ b/frontend/components/ui/input-otp.tsx
@@ -41,7 +41,7 @@ const InputOTPSlot = React.forwardRef<
       ref={ref}
       className={cn(
         "relative flex h-9 w-9 items-center justify-center border border-input text-sm shadow-sm transition-all rounded-xl bg-background",
-        isActive && "z-10 ring-1 ring-ring",
+        isActive && "z-10 ring-1 ring-orange-400",
         className
       )}
       {...props}
diff --git a/frontend/components/ui/model-selector.tsx b/frontend/components/ui/model-selector.tsx
index 3449a9b3..3aba179e 100644
--- a/frontend/components/ui/model-selector.tsx
+++ b/frontend/components/ui/model-selector.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import { DEFAULT_MODEL_ID, MODELS, getModelById } from "@/models/constants";
 import type { Model } from "@/models/types";
 import { getModelProviderIcon } from "@/models/utils";
+import { cn } from "@/lib/utils";
 import {
   Select,
   SelectContent,
@@ -43,7 +44,7 @@ export function ModelSelector({
   showIcons = true,
 }: ModelSelectorProps) {
   const [selectedModel, setSelectedModel] = useState<string>(
-    value ?? DEFAULT_MODEL_ID
+    value ?? DEFAULT_MODEL_ID,
   );
   const { userCredits } = useCredits();
 
@@ -65,59 +66,61 @@ export function ModelSelector({
   const getModelStatusIcon = (model: Model) => {
     if (model.isAvailable === false) {
       return (
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="cursor-pointer">
               <AlertCircleIcon className="h-4 w-4 text-red-500" />
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>
-                This model is not available in 1ai API and will fall back to
-                GPT-3.5
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent className="bg-red-400">
+            <p>
+              This model is not available in 1ai API and will fall back to
+              GPT-3.5
+            </p>
+          </TooltipContent>
+        </Tooltip>
       );
     } else if (model.name.includes("Experimental")) {
       return (
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="cursor-pointer">
               <InfoIcon className="h-4 w-4 text-yellow-500" />
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>This model is experimental and may not be reliable on 1ai</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>This model is experimental and may not be reliable on 1ai</p>
+          </TooltipContent>
+        </Tooltip>
       );
     } else if (model.name.includes("Beta")) {
       return (
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <AlertCircleIcon className="h-4 w-4 text-yellow-500" />
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>This model is in beta and may not be fully reliable</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      );
-    }
-
-    return (
-      <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <CheckCircleIcon className="h-4 w-4 text-green-500" />
+            <div className="cursor-pointer">
+              <AlertCircleIcon className="h-4 w-4 text-yellow-500" />
+            </div>
           </TooltipTrigger>
           <TooltipContent>
-            <p>This model is fully supported by 1ai API</p>
+            <p>This model is in beta and may not be fully reliable</p>
           </TooltipContent>
         </Tooltip>
-      </TooltipProvider>
+      );
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div className="cursor-pointer">
+            <CheckCircleIcon className="h-4 w-4 text-green-300 dark:text-green-300/50 cursor-pointer" />
+          </div>
+        </TooltipTrigger>
+        <TooltipContent className="max-w-lg mx-auto flex-wrap text-orange-100">
+          <p>
+            This model is not available in 1ai API and will fall back to GPT-3.5
+          </p>
+        </TooltipContent>
+      </Tooltip>
     );
   };
 
@@ -127,7 +130,7 @@ export function ModelSelector({
       onValueChange={handleValueChange}
       disabled={disabled}
     >
-      <SelectTrigger className="bg-accent max-h-8 active:ring-0">
+      <SelectTrigger className="shadow-none bg-white/15 hover:bg-orange-100/20 dark:bg-zinc-400/5 text-orange-400 dark:text-orange-100 cursor-pointer max-h-8 ring-0 border-0 px-2 rounded-lg [&_svg:not([class*='text-'])]:text-orange-300 dark:[&_svg:not([class*='text-'])]:text-orange-100">
         <SelectValue className="h-5" placeholder="Select Model">
           {selectedModelObj && (
             <div className="flex items-center gap-2">
@@ -137,7 +140,8 @@ export function ModelSelector({
           )}
         </SelectValue>
       </SelectTrigger>
-      <SelectContent>
+
+      <SelectContent className="border-none p-3 m-0 rounded-xl text-orange-400 dark:text-orange-100">
         {/* Free Models Section */}
         <SelectGroup>
           <SelectLabel className="flex items-center gap-2">
@@ -148,7 +152,12 @@ export function ModelSelector({
               key={model.id}
               value={model.id}
               disabled={model.isAvailable === false}
-              className={model.isAvailable === false ? "opacity-60" : ""}
+              className={cn(
+                `rounded-lg focus:bg-orange-300/20 focus:text-orange-400 dark:focus:text-orange-100 dark:focus:bg-orange-100/10 data-[state=checked]:bg-orange-300/20 dark:data-[state=checked]:bg-orange-100/10 [&_svg:not([class*='text-'])]:text-orange-400 dark:[&_svg:not([class*='text-'])]:text-orange-100`,
+                {
+                  "opacity-60": model.isAvailable === false,
+                },
+              )}
             >
               <div className="flex items-center gap-2">
                 {showIcons && getModelProviderIcon(model)}
@@ -163,15 +172,17 @@ export function ModelSelector({
         <SelectGroup>
           <SelectLabel className="flex items-center justify-between">
             <div className="flex items-center gap-2">
-              <Crown className="h-4 w-4 text-primary" />
-              <span>Premium Models</span>
+              <Crown className="h-4 w-4 text-orange-600 dark:text-orange-400" />
+              <span className="text-orange-600 dark:text-orange-400 text-sm">
+                Premium Models
+              </span>
             </div>
             {!userCredits?.isPremium && (
               <Link href="/pricing">
                 <Button
                   size="sm"
                   variant="default"
-                  className="h-6 px-2 text-xs bg-primary hover:bg-primary/90 text-primary-foreground"
+                  className="h-6 px-2 text-xs text-orange-400/80 bg-orange-100 dark:bg-orange-100/10 dark:text-orange-200 hover:bg-orange-200 dark:hover:bg-orange-100/20"
                   onClick={(e) => e.stopPropagation()}
                 >
                   Upgrade
@@ -188,7 +199,12 @@ export function ModelSelector({
                 key={model.id}
                 value={model.id}
                 disabled={isDisabled}
-                className={isDisabled ? "opacity-60" : ""}
+                className={cn(
+                  `rounded-lg focus:bg-orange-300/20 focus:text-orange-400 dark:focus:text-orange-100 dark:focus:bg-orange-100/10 data-[state=checked]:bg-orange-300/20 dark:data-[state=checked]:bg-orange-100/10 [&_svg:not([class*='text-'])]:text-orange-400 dark:[&_svg:not([class*='text-'])]:text-orange-100`,
+                  {
+                    "opacity-60": isDisabled,
+                  },
+                )}
               >
                 <div className="flex items-center gap-2">
                   {showIcons && getModelProviderIcon(model)}
diff --git a/frontend/components/ui/popover.tsx b/frontend/components/ui/popover.tsx
new file mode 100644
index 00000000..01e468b6
--- /dev/null
+++ b/frontend/components/ui/popover.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/frontend/components/ui/select.tsx b/frontend/components/ui/select.tsx
index 7405bcee..8d5a72df 100644
--- a/frontend/components/ui/select.tsx
+++ b/frontend/components/ui/select.tsx
@@ -38,7 +38,7 @@ function SelectTrigger({
       data-size={size}
       className={cn(
         "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-xl border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
@@ -64,7 +64,7 @@ function SelectContent({
           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border shadow-md",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
+          className,
         )}
         position={position}
         {...props}
@@ -72,9 +72,8 @@ function SelectContent({
         <SelectScrollUpButton />
         <SelectPrimitive.Viewport
           className={cn(
-            "p-1",
             position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
           )}
         >
           {children}
@@ -108,7 +107,7 @@ function SelectItem({
       data-slot="select-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
+        className,
       )}
       {...props}
     >
@@ -144,7 +143,7 @@ function SelectScrollUpButton({
       data-slot="select-scroll-up-button"
       className={cn(
         "flex cursor-default items-center justify-center py-1",
-        className
+        className,
       )}
       {...props}
     >
@@ -162,7 +161,7 @@ function SelectScrollDownButton({
       data-slot="select-scroll-down-button"
       className={cn(
         "flex cursor-default items-center justify-center py-1",
-        className
+        className,
       )}
       {...props}
     >
diff --git a/frontend/components/ui/tabs-suggestion.tsx b/frontend/components/ui/tabs-suggestion.tsx
index 014cc974..fc2ac80b 100644
--- a/frontend/components/ui/tabs-suggestion.tsx
+++ b/frontend/components/ui/tabs-suggestion.tsx
@@ -1,6 +1,13 @@
 import React, { useState } from "react";
-import { Sparkles, Search, Code, BookOpen } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { Sparkles, Search, Code, BookOpen, Gimini } from "lucide-react";
+import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
+
+interface Tab {
+	id: string;
+	label: string;
+	icon: React.ReactNode;
+	content: string[];
+}
 
 const TabsSuggestion = ({
   suggestedInput,
@@ -9,9 +16,9 @@ const TabsSuggestion = ({
   suggestedInput: string;
   setSuggestedInput: (input: string) => void;
 }) => {
-  const [activeTab, setActiveTab] = useState("create");
+	const [activePopover, setActivePopover] = useState<string | null>(null)
 
-  const tabs = [
+  const tabs: Tab[] = [
     {
       id: "create",
       label: "Create",
@@ -58,57 +65,55 @@ const TabsSuggestion = ({
     },
   ];
 
-  const activeTabData = tabs.find((tab) => tab.id === activeTab);
-
   return (
-    <div className="text-foreground max-w-xl w-full">
-      <div className="flex flex-col gap-4">
-        {/* Tab Navigation */}
-        <div className="mb-4 flex flex-wrap gap-2">
-          {tabs.map((tab) => (
-            <button
-              key={tab.id}
-              onClick={() => setActiveTab(tab.id)}
-              className={`flex items-center gap-2 rounded-xl px-4 py-2 text-sm transition-all duration-300 cursor-pointer justify-center border ${
-                activeTab === tab.id
-                  ? "bg-primary text-primary-foreground"
-                  : "bg-muted text-muted-foreground hover:bg-muted/60 hover:text-foreground"
-              } `}
-            >
-              {tab.icon}
-              {activeTab === tab.id && (
-                <span
-                  className={cn(
-                    "text-sm whitespace-nowrap overflow-hidden transition-all duration-300"
-                  )}
-                >
-                  {tab.label}
-                </span>
-              )}
-            </button>
-          ))}
-        </div>
+		<div className="flex flex-col gap-4">
+			{/* Tab Navigation */}
+			<div className="mb-4 flex flex-wrap gap-2">
+				{tabs.map((tab) => (
+					<Popover 
+						key={tab.id}
+						onOpenChange={(open) => {
+							setActivePopover(open ? tab.id : null)
+						}}
+					>
+						<PopoverTrigger asChild>
+							<button
+								className={`flex items-center justify-center cursor-pointer px-4 py-2 gap-2 border font-medium border-black/10 dark:border-zinc-400/8 rounded-xl bg-zinc-400/5 inset-shadow-xs ${activePopover === tab.id
+									? "bg-zinc-400/15"
+									: "hover:bg-zinc-400/15"
+									} `}
+							>
+								{tab.icon}
+								<span
+									className="text-sm whitespace-nowrap overflow-hidden transition-all duration-300"
+								>
+									{tab.label}
+								</span>
+							</button>
+						</PopoverTrigger>
 
-        {/* Tab Content */}
-        <div className="flex flex-col">
-          {activeTabData?.content.map((item, index) => (
-            <div
-              key={index}
-              onClick={() => {
-                if (suggestedInput || suggestedInput === "") {
-                  setSuggestedInput(item);
-                }
-              }}
-              className="flex items-start gap-2 border-t border-secondary/40 py-1 first:border-none cursor-pointer"
-            >
-              <button className="w-full rounded-md py-2 text-left hover:bg-secondary sm:px-3">
-                {item}
-              </button>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
+						<PopoverContent sideOffset={8} className="flex justify-center w-80 p-4 border-none rounded-xl">
+							<div className="flex flex-col">
+								<h3 className="mb-3 font-medium text-sm text-muted-foreground">{tab.label}</h3>
+								{tab.content.map((item, index) => (
+									<div
+										key={index}
+										onClick={() => {
+											if (setSuggestedInput) {
+												setSuggestedInput(item)
+											}
+										}}
+										className="flex items-start gap-2 border-t border-secondary/40 py-1 first:border-none"
+									>
+										<button className="w-full rounded-md text-[.80rem] text-left hover:bg-orange-100/30 dark:hover:bg-orange-100/5 cursor-pointer">{item}</button>
+									</div>
+								))}
+							</div>
+						</PopoverContent>
+					</Popover>
+				))}
+			</div>
+		</div>
   );
 };
 
diff --git a/frontend/components/ui/theme-toggler.tsx b/frontend/components/ui/theme-toggler.tsx
index 7e202050..865228e4 100644
--- a/frontend/components/ui/theme-toggler.tsx
+++ b/frontend/components/ui/theme-toggler.tsx
@@ -15,32 +15,41 @@ export function SelectTheme() {
           "flex cursor-pointer items-center gap-2 rounded-lg text-center",
           open && "flex-1 justify-end",
         )}
+        onClick={() => setTheme(theme === "light" ? "dark" : "light")}
       >
-        <div
-          onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-          className="hover:bg-accent flex size-7 items-center justify-center rounded-lg"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="size-4.5"
-          >
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
-            <path d="M12 3l0 18"></path>
-            <path d="M12 9l4.65 -4.65"></path>
-            <path d="M12 14.3l7.37 -7.37"></path>
-            <path d="M12 19.6l8.85 -8.85"></path>
-          </svg>
+        <div className="flex items-center justify-center h-8 w-8 border border-black/10 dark:border-zinc-400/8 rounded-lg bg-zinc-400/10 inset-shadow-sm">
+          <SunIcon className="size-4 text-gray-500 scale-100 dark:scale-0" />
+          <MoonIcon className="absolute size-4 text-gray-500 opacity scale-0 dark:scale-100" />
         </div>
       </div>
     </>
   );
 }
+
+export const SunIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 18 18"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M9.75 1.5a.75.75 0 1 0-1.5 0v.75a.75.75 0 1 0 1.5 0zM9.75 15.75a.75.75 0 0 0-1.5 0v.75a.75.75 0 0 0 1.5 0zM14.833 3.167a.75.75 0 0 1 0 1.06l-.533.533a.75.75 0 0 1-1.06-1.06l.532-.533a.75.75 0 0 1 1.06 0ZM3.7 13.24a.75.75 0 0 1 1.06 1.06l-.532.533a.75.75 0 1 1-1.06-1.06zM15.75 8.25a.75.75 0 0 0 0 1.5h.75a.75.75 0 0 0 0-1.5zM.75 9a.75.75 0 0 1 .75-.75h.75a.75.75 0 1 1 0 1.5H1.5A.75.75 0 0 1 .75 9M14.3 13.24a.75.75 0 0 0-1.06 1.06l.532.533a.75.75 0 0 0 1.06-1.06zM4.228 3.167a.75.75 0 1 0-1.06 1.06l.532.533A.75.75 0 1 0 4.76 3.7zm1.59 2.651a4.5 4.5 0 1 1 6.364 6.364 4.5 4.5 0 0 1-6.364-6.364"
+    />
+  </svg>
+);
+
+export const MoonIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 18 18"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M9.039 2.7a.75.75 0 0 0-.681-1.173 7.5 7.5 0 1 0 8.112 8.112.75.75 0 0 0-1.173-.68A4.5 4.5 0 0 1 9.04 2.7Z"
+    />
+  </svg>
+);
diff --git a/frontend/components/ui/ui-input.tsx b/frontend/components/ui/ui-input.tsx
index 437dc91f..ad000fa0 100644
--- a/frontend/components/ui/ui-input.tsx
+++ b/frontend/components/ui/ui-input.tsx
@@ -6,8 +6,6 @@ import { Button } from "@/components/ui/button";
 import {
   SpinnerGapIcon,
   CopyIcon,
-  ThumbsDownIcon,
-  ThumbsUpIcon,
   CheckIcon,
   CheckCircleIcon,
   ArrowsLeftRightIcon,
@@ -86,7 +84,7 @@ const MessageComponent = memo(({
       return isInline ? (
         <code
           className={cn(
-            "bg-accent rounded-sm px-1 py-0.5 text-sm",
+            "bg-orange-400/10 text-orange-400 dark:text-orange-100 dark:bg-orange-200/10 rounded-lg px-1.5 py-0.5 text-sm",
             geistMono.className
           )}
           {...rest}
@@ -94,117 +92,121 @@ const MessageComponent = memo(({
           {children}
         </code>
       ) : (
-        <div
-          className={`${geistMono.className} my-4 overflow-hidden rounded-md`}
-        >
-          <div className="bg-accent flex items-center justify-between px-4 py-2 text-sm">
-            <div>{match ? match[1] : "text"}</div>
-            <div className="flex items-center gap-2">
-              <button
-                onClick={toggleWrap}
-                className={`hover:bg-muted/40 flex items-center gap-1.5 rounded px-2 py-1 text-xs font-medium transition-all duration-200`}
-                aria-label="Toggle line wrapping"
-              >
-                {isWrapped ? (
-                  <>
-                    <ArrowsLeftRightIcon
-                      weight="bold"
-                      className="h-3 w-3"
-                    />
-                  </>
-                ) : (
-                  <>
-                    <WrapText className="h-3 w-3" />
-                  </>
-                )}
-              </button>
-              <button
-                onClick={() => onCopy(codeContent)}
-                className={`hover:bg-muted/40 sticky top-10 flex items-center gap-1.5 rounded px-2 py-1 text-xs font-medium transition-all duration-200`}
-                aria-label="Copy code"
-              >
-                {copied ? (
-                  <>
-                    <CheckCircleIcon
-                      weight="bold"
-                      className="size-4"
-                    />
-                  </>
-                ) : (
-                  <>
-                    <CopyIcon className="size-4" />
-                  </>
-                )}
-              </button>
-            </div>
-          </div>
-          <SyntaxHighlighter
-            language={match ? match[1] : "text"}
-            style={atomOneDark}
-            customStyle={{
-              margin: 0,
-              padding: "1rem",
-              backgroundColor:
-                resolvedTheme === "dark"
-                  ? "#1a1620"
-                  : "#f5ecf9",
-              color:
-                resolvedTheme === "dark"
-                  ? "#e5e5e5"
-                  : "#171717",
-              borderRadius: 0,
-              borderBottomLeftRadius: "0.375rem",
-              borderBottomRightRadius: "0.375rem",
-              fontSize: "1.2rem",
-              fontFamily: `var(--font-geist-mono), ${geistMono.style.fontFamily}`,
-            }}
-            wrapLongLines={isWrapped}
-            codeTagProps={{
-              style: {
-                fontFamily: `var(--font-geist-mono), ${geistMono.style.fontFamily}`,
-                fontSize: "0.85em",
-                whiteSpace: isWrapped ? "pre-wrap" : "pre",
-                overflowWrap: isWrapped
-                  ? "break-word"
-                  : "normal",
-                wordBreak: isWrapped
-                  ? "break-word"
-                  : "keep-all",
-              },
-            }}
-            PreTag="div"
-          >
-            {codeContent}
-          </SyntaxHighlighter>
-        </div>
+					<div
+						className={`${geistMono.className} overflow-hidden rounded-2xl`}
+					>
+						<div className="bg-zinc-400/10 flex items-center justify-between px-4 py-2 text-sm">
+							<p className="text-xs">
+								{match ? match[1] : "text"}
+							</p>
+							<div className="flex items-center gap-2">
+								<button
+									onClick={toggleWrap}
+									className={`hover:bg-muted/40 flex items-center gap-1.5 rounded px-2 py-1 text-xs font-medium transition-all duration-200`}
+									aria-label="Toggle line wrapping"
+								>
+									{isWrapped ? (
+										<>
+											<ArrowsLeftRightIcon
+												weight="bold"
+												className="h-3 w-3"
+											/>
+										</>
+									) : (
+										<>
+											<WrapText className="h-3 w-3" />
+										</>
+									)}
+								</button>
+								<button
+									onClick={() => onCopy(codeContent)}
+									className={`hover:bg-muted/40 sticky top-10 flex items-center gap-1.5 rounded px-2 py-1 text-xs font-medium transition-all duration-200`}
+									aria-label="Copy code"
+								>
+									{copied ? (
+										<>
+											<CheckCircleIcon
+												weight="bold"
+												className="size-4"
+											/>
+										</>
+									) : (
+										<>
+											<CopyIcon className="size-4" />
+										</>
+									)}
+								</button>
+							</div>
+						</div>
+						<SyntaxHighlighter
+							language={match ? match[1] : "text"}
+							style={atomOneDark}
+							customStyle={{
+								margin: 0,
+								padding: "1.5rem",
+								backgroundColor:
+									resolvedTheme === "dark"
+										? "#262626"
+										: "#f5f5f5",
+								color:
+									resolvedTheme === "dark"
+										? "#e5e5e5"
+										: "#171717",
+								borderRadius: 0,
+								boxShadow: "#fa7319",
+								fontSize: "0.95rem",
+								fontFamily: `var(--font-geist-mono), ${geistMono.style.fontFamily}`,
+							}}
+							wrapLongLines={isWrapped}
+							codeTagProps={{
+								style: {
+									fontFamily: `var(--font-geist-mono), ${geistMono.style.fontFamily}`,
+									fontSize: "0.85em",
+									whiteSpace: isWrapped
+										? "pre-wrap"
+										: "pre",
+									overflowWrap: isWrapped
+										? "break-word"
+										: "normal",
+									wordBreak: isWrapped
+										? "break-word"
+										: "keep-all",
+								},
+							}}
+							PreTag="div"
+						>
+							{codeContent}
+						</SyntaxHighlighter>
+					</div>
       );
     },
-    strong: (props: any) => (
-      <span className="font-bold">{props.children}</span>
-    ),
-    a: (props: any) => (
-      <a
-        className="text-primary underline"
-        href={props.href}
-      >
-        {props.children}
-      </a>
-    ),
-    h1: (props: any) => (
-      <h1 className="my-4 text-2xl font-bold">
-        {props.children}
-      </h1>
-    ),
-    h2: (props: any) => (
-      <h2 className="my-3 text-xl font-bold">
-        {props.children}
-      </h2>
-    ),
-    h3: (props: any) => (
-      <h3 className="my-2 text-lg font-bold">
-        {props.children}
-      </h3>
-    ),
+		strong: (props: any) => (
+			<span className="font-bold">{props.children}</span>
+		),
+		a: (props: any) => (
+			<a
+				className="hover:underline hover:underline-offset-3 text-orange-400 dark:text-orange-200 tracking-wide"
+				target="_blank"
+				href={props.href}
+			>
+				{props.children}
+			</a>
+		),
+		h1: (props: any) => (
+			<h1 className="my-4 text-2xl font-bold">
+				{props.children}
+			</h1>
+		),
+		h2: (props: any) => (
+			<h2 className="my-3 text-xl font-bold">
+				{props.children}
+			</h2>
+		),
+		h3: (props: any) => (
+			<h3 className="my-2 text-lg font-bold">
+				{props.children}
+			</h3>
+		),
   }), [copied, isWrapped, toggleWrap, onCopy, resolvedTheme, geistMono]);
 
   return (
@@ -212,14 +214,14 @@ const MessageComponent = memo(({
       key={message.id}
       className={`group mb-8 flex w-full flex-col ${message.role === "assistant" ? "items-start" : "items-end"} gap-2`}
     >
-      <div
-        className={cn(
-          "prose cursor-pointer dark:prose-invert max-w-none rounded-lg px-4 py-2",
-          message.role === "user"
-            ? "bg-accent/10 w-fit max-w-full font-medium"
-            : "w-full p-0"
-        )}
-      >
+			<div
+				className={cn(
+					"prose cursor-pointer dark:prose-invert max-w-none px-4 py-2 space-y-4",
+					message.role === "user"
+						? "bg-zinc-200/60 dark:bg-zinc-800 w-fit max-w-xl rounded-xl"
+						: "w-full p-0",
+				)}
+			>
         <ReactMarkdown
           remarkPlugins={[remarkGfm]}
           components={markdownComponents}
@@ -242,18 +244,18 @@ const MessageComponent = memo(({
             </button>
           </div>
         )}
-        {message.role === "user" && (
-          <button
-            onClick={() => onCopy(message.content)}
-            className="hover:bg-accent flex size-7 items-center justify-center rounded-lg"
-          >
-            {!copied ? (
-              <CopyIcon weight="bold" />
-            ) : (
-              <CheckIcon weight="bold" />
-            )}
-          </button>
-        )}
+				{message.role === "user" && (
+					<button
+						onClick={() => onCopy(message.content)}
+						className="hover:bg-accent flex size-7 items-center justify-center rounded-lg"
+					>
+						{!copied ? (
+							<CopyIcon weight="bold" />
+						) : (
+							<CheckIcon weight="bold" />
+						)}
+					</button>
+				)}
       </div>
     </div>
   );
@@ -312,12 +314,12 @@ const UIInput = ({
   const abortControllerRef = useRef<AbortController | null>(null);
   const [isWrapped, setIsWrapped] = useState(false);
   const [conversationId, setConversationId] = useState<string | null>(
-    initialConversationId || v4()
+    initialConversationId || v4(),
   );
   const { resolvedTheme } = useTheme();
   const { user, isLoading: isUserLoading } = useUser();
   const { conversation, loading: converstionLoading } = useConversationById(
-    initialConversationId
+    initialConversationId,
   );
   const {
     userCredits,
@@ -403,8 +405,8 @@ const UIInput = ({
         updateTimeout = setTimeout(() => {
           setMessages((prev) =>
             prev.map((msg) =>
-              msg.id === tempMessageId ? { ...msg, content } : msg
-            )
+              msg.id === tempMessageId ? { ...msg, content } : msg,
+            ),
           );
         }, 50);
       };
@@ -417,8 +419,8 @@ const UIInput = ({
             prev.map((msg) =>
               msg.id === tempMessageId
                 ? { ...msg, content: accumulatedContent }
-                : msg
-            )
+                : msg,
+            ),
           );
 
           if (updateTimeout) {
@@ -473,8 +475,8 @@ const UIInput = ({
         prev.map((msg) =>
           msg.id === tempMessageId
             ? { ...msg, content: "Error: Failed to process response" }
-            : msg
-        )
+            : msg,
+        ),
       );
     } finally {
       setIsLoading(false);
@@ -590,19 +592,10 @@ const UIInput = ({
 
   return (
     <div className="flex h-[96dvh] w-full overflow-hidden">
-      <div className="relative flex h-full w-full flex-col">
-        {!query && showWelcome && messages.length === 0 ? (
-          <div className="flex h-full w-full flex-col">
-            <div className="flex h-full w-full flex-col items-center justify-center">
-              <TabsSuggestion
-                suggestedInput={query}
-                setSuggestedInput={setQuery}
-              />
-            </div>
-          </div>
-        ) : (
-          <div className="no-scrollbar mt-6 flex h-full w-full flex-1 flex-col gap-4 overflow-y-auto px-4 pt-4 pb-10 md:px-8">
-            <div className="mx-auto h-full w-full max-w-4xl">
+      <div className="relative flex h-full w-full flex-col justify-center">
+        {showWelcome && messages.length === 0 ? null : (
+					<div className="no-scrollbar mt-8 xl:mt-0 flex h-full w-full flex-1 flex-col gap-4 overflow-y-auto pb-20">
+						<div className="mx-auto w-full max-w-4xl">
               <MessagesList
                 messages={messages}
                 onCopy={handleCopy}
@@ -612,6 +605,7 @@ const UIInput = ({
                 resolvedTheme={resolvedTheme}
                 geistMono={geistMono}
               />
+
               {isLoading && (
                 <div className="flex h-5 items-start justify-start space-x-2">
                   <div className="bg-accent h-2.5 w-2.5 animate-bounce rounded-full [animation-delay:0s]"></div>
@@ -624,24 +618,29 @@ const UIInput = ({
           </div>
         )}
 
+        {showWelcome && messages.length === 0 && (
+          <h1 className="text-4xl font-serif mb-8 text-center">
+            What's on your mind today?
+          </h1>
+        )}
+
         {/* Show upgrade prompt when user has no credits */}
         {userCredits && userCredits.credits <= 0 && !userCredits.isPremium && (
-          <div className="mb-4 w-full px-4 md:px-8">
-            <div className="mx-auto w-full max-w-4xl">
-              <UpgradeCTA variant="banner" />
-            </div>
+          <div className="w-full px-4">
+            <UpgradeCTA variant="banner" />
           </div>
         )}
 
-        <div className="bg-muted/20 backdrop-blur-3xl border border-border/50 mb-4 w-full rounded-2xl p-1">
-          <div className="mx-auto w-full max-w-4xl">
+        <div className="bg-zinc-400/10 w-full mb-4 border rounded-2xl border-black/10 dark:border-zinc-400/8">
+          <div className="w-full max-w-4xl mx-auto">
             <form
               onSubmit={handleCreateChat}
-              className="bg-accent/30 dark:bg-accent/10 flex w-full flex-col rounded-xl p-3"
+              className="flex flex-col p-3 rounded-lg bg-traansparent inset-shadow-sm"
             >
               <Textarea
                 ref={textareaRef}
                 autoFocus
+                spellCheck={false}
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 onKeyDown={(e) => {
@@ -655,9 +654,9 @@ const UIInput = ({
                   userCredits.credits <= 0 &&
                   !userCredits.isPremium
                     ? "You need credits to start a chat. Please upgrade to continue."
-                    : "Ask anything"
+                    : "Ask anything..."
                 }
-                className="h-[2rem] resize-none rounded-none border-none bg-transparent px-0 py-1 shadow-none ring-0 focus-visible:ring-0 dark:bg-transparent"
+                className="min-h-16 max-h-80 tracking-wider leading-5 resize-none rounded-none border-none bg-transparent px-0 py-1 shadow-none ring-0 focus-visible:ring-0 dark:bg-transparent placeholder:tracking-wider"
                 disabled={
                   isLoading ||
                   !!(
@@ -685,6 +684,7 @@ const UIInput = ({
                 <Button
                   type="submit"
                   size="icon"
+                  className="text-xs text-white bg-[#fa7319] hover:bg-[#fa7319]/90 p-4 rounded-xl inset-shadow-sm inset-shadow-white/60 font-medium border border-black/4 outline-0"
                   disabled={
                     isLoading ||
                     !query.trim() ||
@@ -705,6 +705,14 @@ const UIInput = ({
             </form>
           </div>
         </div>
+        {showWelcome && messages.length === 0 && (
+          <div className="flex items-center justify-center">
+            <TabsSuggestion
+              suggestedInput={query}
+              setSuggestedInput={setQuery}
+            />
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/frontend/components/ui/ui-structure.tsx b/frontend/components/ui/ui-structure.tsx
index 9df3ee87..0b81a34a 100644
--- a/frontend/components/ui/ui-structure.tsx
+++ b/frontend/components/ui/ui-structure.tsx
@@ -10,44 +10,49 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-  SidebarTrigger,
 } from "@/components/ui/sidebar";
 import { Button } from "./button";
 import { useState } from "react";
 import { useEffect } from "react";
-import { Input } from "./input";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
+import { NavSetting } from "@/components/nav-setting";
 import {
   MagnifyingGlassIcon,
   ShareFatIcon,
   TrashIcon,
+  ArrowUpRightIcon,
 } from "@phosphor-icons/react";
+import { EllipsisIcon, SparklesIcon } from "lucide-react";
 import { toast } from "sonner";
 import { usePathname, useRouter } from "next/navigation";
-import { Logo } from "../svgs/logo";
-import { useUser } from "@/hooks/useUser";
-import Link from "next/link";
 import { useExecutionContext } from "@/contexts/execution-context";
+import {
+  Dialog,
+  DialogDescription,
+  DialogContent,
+  DialogTrigger,
+  DialogTitle,
+  DialogHeader,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
 import { Execution } from "@/hooks/useExecution";
 import { BACKEND_URL, cn } from "@/lib/utils";
 
 export function UIStructure() {
   const [uiExecutions, setUiExecutions] = useState<Execution[]>([]);
+  const [openMenuId, setOpenMenuId] = useState<string | null>(null);
   const [hoverChatId, setHoverChatId] = useState<string>("");
   const [isAppsDialogOpen, setIsAppsDialogOpen] = useState(false);
+  const [isSearchDialogOpen, setIsSearchDialogOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState<string>("");
   const { executions, loading, createNewExecution } = useExecutionContext();
   const router = useRouter();
-  
+
   const pathname = usePathname();
   const currentConversationId = pathname.split("/").pop();
 
@@ -59,8 +64,8 @@ export function UIStructure() {
       } else {
         setUiExecutions(
           executions.filter((execution) =>
-            (execution.title ?? "").toLowerCase().includes(term)
-          )
+            (execution.title ?? "").toLowerCase().includes(term),
+          ),
         );
       }
     }
@@ -72,25 +77,24 @@ export function UIStructure() {
         method: "DELETE",
         headers: {
           "Content-Type": "application/json",
-          "Authorization": `Bearer ${localStorage.getItem("token")}`
-        }
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
       });
-      setUiExecutions(executions.filter((execution) => execution.id !== executionId));
+      setUiExecutions(
+        executions.filter((execution) => execution.id !== executionId),
+      );
       toast.success("Chat deleted successfully");
     } catch (error) {
       console.error("Error deleting chat:", error);
     }
   };
 
-  const { user, isLoading: isUserLoading } = useUser();
-
   // Available AI Apps
   const availableApps = [
     {
       id: "article-summarizer",
       name: "Article Summarizer",
-      description:
-        "Summarize long articles into concise, easy-to-read summaries",
+      description: "Summarize articles instantly",
       icon: "📄",
       credits: 2,
     },
@@ -104,38 +108,84 @@ export function UIStructure() {
   return (
     <Sidebar className={`border py-2 pl-2`}>
       <SidebarContent className="h-full justify-between">
-        <SidebarGroup className="flex flex-col gap-4">
+        <SidebarGroup className="flex flex-col gap-8">
           <SidebarHeader className="sticky top-0 !p-0">
             <div className="flex w-full flex-col items-center gap-2 rounded-lg">
               <div className="flex w-full items-center gap-2 rounded-lg p-1 text-lg justify-between">
-                <SidebarTrigger className="shrink-0" />
-                <h1 className="text-2xl font-bold text-foreground">
-                  1<span className="text-yellow-500">ai</span>
+                <h1 className="text-3xl font-serif text-foreground">
+                  1<span className="text-orange-400">ai</span>
                 </h1>
                 <span className="size-6"></span>
               </div>
               <Button
+                className="w-full text-sm text-white bg-[#fa7319] hover:bg-[#fa7319]/90 h-10 px-3.5 rounded-xl inset-shadow-sm inset-shadow-white/60 font-medium border border-black/4 outline-0"
                 onClick={(e) => {
+                  console.log("new chat clicked");
                   e.preventDefault();
                   router.push(`/ask`);
                 }}
                 variant="accent"
-                className="w-full"
               >
                 New Chat
               </Button>
             </div>
 
-            <div className="flex items-center gap-2 pb-2 border-b">
-              <MagnifyingGlassIcon className="text-foreground" weight="bold" />
-              <Input
-                placeholder="Search for chats"
-                className="rounded-none border-none bg-transparent px-0 py-1 shadow-none ring-0 focus-visible:ring-0 dark:bg-transparent"
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-              />
-            </div>
+            <Dialog
+              open={isSearchDialogOpen}
+              onOpenChange={setIsSearchDialogOpen}
+            >
+              <DialogTrigger className="relative flex items-center p-2 gap-2 bg-zinc-400/10 px-2 rounded-xl border border-black/10 dark:border-zinc-400/8 inset-shadow-sm cursor-pointer hover:bg-orange-200/10 dark:hover:bg-orange-100/10 dark:hover:[&>*]:text-orange-100 hover:[&>*]:text-orange-400">
+                <MagnifyingGlassIcon className="text-foreground" size={18} />
+                <p className="rounded-none text-sm border-none bg-transparent px-0 shadow-none ring-0 focus-visible:ring-0 dark:bg-transparent">
+                  Search for chats
+                </p>
+              </DialogTrigger>
+
+              <DialogContent className="sm:max-w-[35rem] rounded-xl p-0 overflow-auto gap-0 border-none">
+                <DialogHeader className="bg-transparent border-b dark:border-b-orange-100/5">
+                  <Input
+                    placeholder="Search for chats"
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    className="border-none rounded-none text-sm rounded-tl-xl rounded-tr-xl shadow-none focus-visible:ring-0 bg-transparent dark:bg-transparent px-4 py-6"
+                  />
+                </DialogHeader>
+                <div className="grid min-h-[8rem] max-h-[15rem] overflow-auto pb-3">
+                  <div className="flex flex-col px-2 justify-center">
+                    {uiExecutions.length === 0 ? (
+                      <div className="flex items-center justify-center">
+                        <p className="text-xs">No chat found!</p>
+                      </div>
+                    ) : (
+                      <div>
+                        <DialogTitle className="font-normal tracking-wider text-xs text-orange-100/50 p-2">
+                          Chats
+                        </DialogTitle>
+                        {uiExecutions.map((execution: Execution) => (
+                          <div key={execution.id} className="">
+                            <div
+                              className={`p-2 rounded-lg hover:bg-orange-100/10 hover:text-orange-100`}
+                              onMouseEnter={() => setHoverChatId(execution.id)}
+                              onMouseLeave={() => setHoverChatId("")}
+                              onClick={() => {
+                                router.push(`/ask/${execution.id}`);
+                                setIsSearchDialogOpen(false);
+                              }}
+                            >
+                              <div className="flex w-full items-center justify-between text-sm">
+                                <span className="">{execution.title}</span>
+                              </div>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </DialogContent>
+            </Dialog>
           </SidebarHeader>
+
           <SidebarGroupContent>
             <SidebarMenu className="w-full p-0">
               {loading
@@ -149,56 +199,66 @@ export function UIStructure() {
                 : uiExecutions.map((execution: Execution) => (
                     <SidebarMenuItem key={execution.id}>
                       <SidebarMenuButton
-                        className={`group relative w-full text-left hover:bg-primary/20 transition ${execution.id === currentConversationId ? "bg-primary/20" : ""}`}
+                        className={`group relative font-normal cursor-pointer rounded-xl w-full active:bg-transparent active:text-inherit hover:bg-orange-300/20 hover:text-orange-400 dark:hover:text-orange-100 dark:hover:bg-orange-100/10 ${execution.id === currentConversationId ? "bg-orange-300/20 text-orange-400 dark:text-orange-100 dark:bg-orange-100/10" : ""}`}
                         onMouseEnter={() => setHoverChatId(execution.id)}
                         onMouseLeave={() => setHoverChatId("")}
                         onClick={() => router.push(`/ask/${execution.id}`)}
                       >
                         <div className="flex w-full items-center justify-between">
-                          <span className="z-[-1] cursor-pointer truncate">
+                          <span className="cursor-pointer truncate">
                             {execution.title}
                           </span>
-                          <div
-                            className={cn(
-                              "absolute top-0 right-0 z-[5] h-full w-12 rounded-r-md blur-[2em]", 
-                              execution.id === hoverChatId && "bg-primary"
-                            )}
-                          />
-                          <div
-                            className={cn(
-                              "absolute top-1/2 -right-16 z-[10] flex h-full -translate-y-1/2 items-center justify-center gap-1.5 rounded-r-md bg-transparent px-1 backdrop-blur-xl transition-all duration-200 ease-in-out",
-                              execution.id === hoverChatId && "group-hover:right-0"
-                            )}
-                          >
-                            <div
-                              className="flex items-center justify-center rounded-md"
-                              onClick={(e) => {
-                                e.preventDefault();
-                                const shareLink =
-                                  process.env.NEXT_PUBLIC_APP_URL +
-                                  `/ask/${execution.id}`;
-                                navigator.clipboard.writeText(shareLink);
-                                toast.success("Share link copied to clipboard");
-                              }}
-                            >
-                              <ShareFatIcon
-                                weight="fill"
-                                className="hover:text-foreground size-4"
-                              />
-                            </div>
 
-                            <div
-                              className="flex items-center justify-center rounded-md"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                handleDeleteExecution(execution.id)
-                              }}
+                          <div className="realtive group flex items-center">
+                            <DropdownMenu
+                              open={openMenuId === execution.id}
+                              onOpenChange={(isOpen: boolean) =>
+                                setOpenMenuId(isOpen ? execution.id : null)
+                              }
                             >
-                              <TrashIcon
-                                weight={"bold"}
-                                className="hover:text-foreground size-4"
-                              />
-                            </div>
+                              <DropdownMenuTrigger asChild>
+                                <div
+                                  className={cn(
+                                    "opacity-0 transition-opacity",
+                                    {
+                                      "opacity-100":
+                                        execution.id === hoverChatId ||
+                                        openMenuId === execution.id,
+                                    },
+                                  )}
+                                >
+                                  <EllipsisIcon className="size-5 text-white" />
+                                </div>
+                              </DropdownMenuTrigger>
+
+                              <DropdownMenuContent className="border-none rounded-xl">
+                                <DropdownMenuItem
+                                  className="focus:bg-orange-300/20 focus:text-orange-400 darK:focus:bg-orange-100/10 dark:focus:text-orange-100 rounded-xl"
+                                  onClick={() => {
+                                    const shareLink = `${process.env.NEXT_PUBLIC_APP_URL}/ask/${execution.id}`;
+                                    navigator.clipboard.writeText(shareLink);
+                                    toast.success(
+                                      "Share link copied to clipboard",
+                                    );
+                                    setOpenMenuId(null);
+                                  }}
+                                >
+                                  <ShareFatIcon className="focus:text-orange-400 dark:text-orange-100" />
+                                  Share
+                                </DropdownMenuItem>
+
+                                <DropdownMenuItem
+                                  onClick={() => {
+                                    handleDeleteExecution(execution.id);
+                                    setOpenMenuId(null);
+                                  }}
+                                  className="focus:bg-red-400/10 text-red-400 rounded-xl focus:text-red-400"
+                                >
+                                  <TrashIcon className="text-red-400" />
+                                  Delete
+                                </DropdownMenuItem>
+                              </DropdownMenuContent>
+                            </DropdownMenu>
                           </div>
                         </div>
                       </SidebarMenuButton>
@@ -208,87 +268,51 @@ export function UIStructure() {
           </SidebarGroupContent>
         </SidebarGroup>
 
-        <SidebarFooter className="sticky bottom-0 flex flex-col gap-2 w-full p-3 bg-background">
-          {!isUserLoading && !user && (
-            <Link href="/auth">
-              <Button variant="secondary" className="w-full" size="lg">
-                Login
-              </Button>
-            </Link>
-          )}
+        <SidebarFooter className="sticky bottom-0 flex flex-col gap-2 w-full p-3 bg-transparent">
           <Dialog open={isAppsDialogOpen} onOpenChange={setIsAppsDialogOpen}>
             <DialogTrigger asChild>
-              <Button variant="secondary" className="w-full" size="lg">
-                Agents
-              </Button>
+              <div className="flex items-center justify-between h-8 bg-zinc-400/10 dark:bg-zinc-100/2 p-2 rounded-lg gap-2 text-sm text-foreground/80 hover:text-orange-400 dark:hover:text-orange-100 cursor-pointer hover:[&>*]:opacity-100">
+                <div className="flex items-center gap-2">
+                  <SparklesIcon className="size-4" />
+                  Tools
+                </div>
+                <ArrowUpRightIcon className="size-4 opacity-0 transition duration-200 ease-in" />
+              </div>
             </DialogTrigger>
-            <DialogContent className="sm:max-w-[525px]">
+
+            <DialogContent className="sm:max-w-[525px] border-0 rounded-xl">
               <DialogHeader>
-                <DialogTitle>Agents</DialogTitle>
-                <DialogDescription>
-                  Choose from our collection of AI-powered agents to
-                  enhance your productivity.
+                <DialogTitle className="text-start">Tools</DialogTitle>
+                <DialogDescription className="text-start">
+                  Enhance productivity with our AI tools.
                 </DialogDescription>
               </DialogHeader>
 
-              <div className="grid gap-4 py-4">
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                 {availableApps.map((app) => (
                   <div
                     key={app.id}
-                    className="flex items-center gap-4 p-4 rounded-lg border hover:bg-accent/50 cursor-pointer transition-colors"
+                    className="relative group flex flex-col items-center dark:hover:bg-orange-100/20 hover:bg-orange-300/40 justify-center h-32 gap-2 p-2 cursor-pointer transition-colors bg-orange-300/20 text-orange-400 dark:text-orange-100 dark:bg-orange-100/5 rounded-lg"
                     onClick={() => handleAppNavigation(app.id)}
                   >
-                    <div className="text-2xl">{app.icon}</div>
-                    <div className="flex-1">
-                      <h3 className="font-semibold text-lg">{app.name}</h3>
-                      <p className="text-sm text-muted-foreground">
-                        {app.description}
-                      </p>
-                      <div className="flex items-center gap-1 mt-1">
-                        <span className="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded">
-                          {app.credits} credits per use
-                        </span>
+                    <div className="absolute -top-1 -right-1 z-10 bg-zinc-100 dark:bg-zinc-950/80 p-[.20rem] opacity-0 group-hover:opacity-100 rounded-[.55rem] transition duration-200 ease-in">
+                      <div className="bg-zinc-200/50 dark:bg-zinc-700/50 rounded-[.55rem] p-1">
+                        <ArrowUpRightIcon className="size-[18px]" />
                       </div>
                     </div>
+                    <div className="text-2xl">{app.icon}</div>
+                    <h3 className="font-medium text-sm text-center">
+                      {app.name}
+                    </h3>
+                    <span className="font-light text-xs">
+                      {app.credits} credits per use
+                    </span>
                   </div>
                 ))}
               </div>
-
-              <DialogFooter>
-                <DialogClose asChild>
-                  <Button variant="outline">Close</Button>
-                </DialogClose>
-              </DialogFooter>
             </DialogContent>
           </Dialog>
-
-          {user && (
-            <Button
-              variant="destructive"
-              className="w-full"
-              size="lg"
-              onClick={(e) => {
-                e.preventDefault();
-                localStorage.removeItem("token");
-                window.location.reload();
-              }}
-            >
-              Logout
-            </Button>
-          )}
-          
-
-          <div className="flex items-center gap-2 justify-center">
-            <Link href="/terms" target="_target" className="text-xs">
-              Terms
-            </Link>
-            <Link href="/privacy" target="_target" className="text-xs">
-              Privacy
-            </Link>
-            <Link href="/refund" target="_target" className="text-xs">
-              Refund Policy
-            </Link>
-          </div>
+          <NavSetting />
         </SidebarFooter>
       </SidebarContent>
     </Sidebar>
diff --git a/frontend/components/ui/upgrade-cta.tsx b/frontend/components/ui/upgrade-cta.tsx
index 67996b18..64704321 100644
--- a/frontend/components/ui/upgrade-cta.tsx
+++ b/frontend/components/ui/upgrade-cta.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Crown, Zap, ArrowRight } from "lucide-react";
+import { LightningIcon } from "@phosphor-icons/react";
 import Link from "next/link";
 import { useCredits } from "@/hooks/useCredits";
 import { SpinnerGapIcon } from "@phosphor-icons/react";
@@ -13,9 +14,9 @@ interface UpgradeCTAProps {
   className?: string;
 }
 
-export const UpgradeCTA: React.FC<UpgradeCTAProps> = ({ 
-  variant = "banner", 
-  className = "" 
+export const UpgradeCTA: React.FC<UpgradeCTAProps> = ({
+  variant = "banner",
+  className = "",
 }) => {
   const { userCredits, isPending } = useCredits();
   // Don't show if loading, user is premium, or has sufficient credits
@@ -28,19 +29,19 @@ export const UpgradeCTA: React.FC<UpgradeCTAProps> = ({
       return {
         title: "You're out of credits!",
         subtitle: "Upgrade to Pro to continue chatting with unlimited access",
-        urgency: "high"
+        urgency: "high",
       };
     } else if (userCredits.credits <= 1) {
       return {
-        title: `Only ${userCredits.credits} credit${userCredits.credits === 1 ? '' : 's'} left`,
+        title: `Only ${userCredits.credits} credit${userCredits.credits === 1 ? "" : "s"} left`,
         subtitle: "Upgrade now to avoid interruptions in your workflow",
-        urgency: "medium"
+        urgency: "medium",
       };
     } else {
       return {
         title: "Running low on credits",
         subtitle: "Upgrade to Pro for unlimited AI conversations",
-        urgency: "low"
+        urgency: "low",
       };
     }
   };
@@ -50,14 +51,18 @@ export const UpgradeCTA: React.FC<UpgradeCTAProps> = ({
   if (variant === "topbar") {
     return (
       <div className={`flex items-center gap-1 sm:gap-2 ${className}`}>
-        <div className="flex items-center gap-1 px-1.5 sm:px-2 py-1 rounded-md bg-purple-500/10 border border-purple-500/20">
+        <div className="flex items-center gap-1 h-8 px-1.5 sm:px-2 rounded-lg bg-purple-500/10 border border-purple-500/20">
           <Zap className="h-3 w-3 text-purple-500" />
           <span className="text-xs font-medium text-purple-600 dark:text-purple-400">
             {isPending ? <SpinnerGapIcon className="animate-spin" /> : Math.max(0, userCredits.credits)}
           </span>
         </div>
         <Link href="/pricing">
-          <Button size="sm" variant="outline" className="h-7 px-1.5 sm:px-2 text-xs">
+          <Button
+            size="sm"
+            variant="outline"
+            className="h-8 px-1.5 sm:px-2 text-xs rounded-lg"
+          >
             <span className="hidden sm:inline">Upgrade</span>
             <span className="sm:hidden">Up</span>
           </Button>
@@ -68,11 +73,14 @@ export const UpgradeCTA: React.FC<UpgradeCTAProps> = ({
 
   if (variant === "minimal") {
     return (
-      <div className={`flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-3 p-3 rounded-lg bg-gradient-to-r from-purple-500/10 to-blue-500/10 border border-purple-500/20 ${className}`}>
+      <div
+        className={`flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-3 p-3 rounded-lg bg-gradient-to-r from-purple-500/10 to-blue-500/10 border border-purple-500/20 ${className}`}
+      >
         <div className="flex items-center gap-2">
           <Zap className="h-4 w-4 text-purple-500" />
           <span className="text-sm font-medium">
-            {Math.max(0, userCredits.credits)} credit{userCredits.credits === 1 ? '' : 's'} remaining
+            {Math.max(0, userCredits.credits)} credit
+            {userCredits.credits === 1 ? "" : "s"} remaining
           </span>
         </div>
         <Link href="/pricing">
@@ -87,7 +95,9 @@ export const UpgradeCTA: React.FC<UpgradeCTAProps> = ({
 
   if (variant === "card") {
     return (
-      <Card className={`border-purple-500/20 bg-gradient-to-br from-purple-500/5 to-blue-500/5 ${className}`}>
+      <Card
+        className={`border-purple-500/20 bg-gradient-to-br from-purple-500/5 to-blue-500/5 ${className}`}
+      >
         <CardContent className="p-4 sm:p-6">
           <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
             <div className="flex items-center gap-3">
@@ -95,7 +105,9 @@ export const UpgradeCTA: React.FC<UpgradeCTAProps> = ({
                 <Crown className="h-5 w-5 text-purple-500" />
               </div>
               <div className="min-w-0 flex-1">
-                <h3 className="font-semibold text-base sm:text-lg break-words">{content.title}</h3>
+                <h3 className="font-semibold text-base sm:text-lg break-words">
+                  {content.title}
+                </h3>
                 <p className="text-muted-foreground text-sm mt-1 break-words">
                   {content.subtitle}
                 </p>
@@ -117,32 +129,30 @@ export const UpgradeCTA: React.FC<UpgradeCTAProps> = ({
   // Default banner variant
   return (
     <Link href="/pricing">
-      <div className={`relative rounded-xl border bg-muted/40 hover:bg-muted/60 transition-colors duration-200 p-4 sm:p-6 ${className}`}>
+      <div
+        className={`relative bg-white/90 hover:bg-white/50 dark:bg-neutral-900 dark:hover:bg-neutral-900/60 rounded-tl-2xl rounded-tr-2xl transition-colors duration-200 p-4 ${className}`}
+      >
         <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
           <div className="flex items-center gap-3 min-w-0 flex-1">
-            <div className="from-primary flex size-10 items-center justify-center rounded-xl bg-gradient-to-tr to-pink-500 drop-shadow-md flex-shrink-0">
-              {content.urgency === 'high' ? (
-                <Zap className="size-5 text-primary-foreground" />
-              ) : (
-                <Crown className="size-5 text-primary-foreground" />
-              )}
-            </div>
+            {content.urgency === "high" ? (
+              <LightningIcon className="size-6 text-foreground" />
+            ) : (
+              <Crown className="size-6 text-foreground" />
+            )}
             <div className="min-w-0 flex-1">
-              <h3 className="font-semibold text-foreground break-words">{content.title}</h3>
-              <p className="text-muted-foreground text-sm break-words">
+              <h3 className="text-foreground break-words font-medium">
+                {content.title}
+              </h3>
+              <p className="text-muted-foreground font-medium text-xs break-words">
                 {content.subtitle}
               </p>
             </div>
           </div>
-          <Button 
-            variant="default"
-            className="h-10 sm:h-12 px-4 sm:px-6 w-full sm:w-auto flex-shrink-0"
-          >
-            <Crown className="mr-2 h-4 w-4" />
-            <span className="hidden sm:inline">Upgrade Now</span>
-            <span className="sm:hidden">Upgrade</span>
-            <ArrowRight className="ml-2 h-4 w-4" />
-          </Button>
+          <div className="flex items-center gap-3">
+            <div className="h-2 w-2 bg-green-500 inset-shadow-sm inset-shadow-green-300 rounded-full ring-5 ring-green-200/40 dark:ring-green-200/10" />
+
+            <h1 className="text-sm tracking-wider font-medium">Upgrade now</h1>
+          </div>
         </div>
       </div>
     </Link>
diff --git a/frontend/models/utils.tsx b/frontend/models/utils.tsx
index a280360e..92648b0b 100644
--- a/frontend/models/utils.tsx
+++ b/frontend/models/utils.tsx
@@ -10,13 +10,13 @@ import { Anthrophic } from "@/components/svgs/anthropic";
 export function getModelProviderIcon(model: Model): React.ReactNode {
   switch (model.provider) {
     case ModelProvider.OPENAI:
-      return <OpenAI className="text-foreground h-4 w-4" />; // OpenAI
+      return <OpenAI className="text-orange-400 dark:text-orange-100 h-4 w-4" />; // OpenAI
     case ModelProvider.GOOGLE:
-      return <StarFourIcon className="h-4 w-4 text-blue-500" />; // Google
+      return <StarFourIcon className="h-4 w-4 text-orange-400 dark:text-orange-100" />; // Google
     case ModelProvider.ANTHROPIC:
-      return <Anthrophic className="h-4 w-4 text-orange-100" />; // Anthropic Claude
+      return <Anthrophic className="h-4 w-4 text-orange-400 dark:text-orange-100" />; // Anthropic Claude
     default:
-      return <DiamondIcon className="h-4 w-4 text-gray-500" />; // Default
+      return <DiamondIcon className="h-4 w-4 text-orange-400 dark:text-orange-100" />; // Default
   }
 }
 
diff --git a/frontend/package.json b/frontend/package.json
index c07aa556..f7085d61 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -31,6 +31,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css
index e8de34b8..feee2fad 100644
--- a/frontend/styles/globals.css
+++ b/frontend/styles/globals.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@plugin "@tailwindcss/typography";
 
 @custom-variant dark (&:is(.dark *));
 
@@ -7,9 +8,15 @@ html {
   scroll-behavior: smooth;
 }
 
+@theme {
+  --font-*: initial;
+  --font-sans: var(--font-inter);
+  --font-serif: var(--font-syne);
+}
+
 :root {
   --radius: 0.65rem;
-  --background: hsl(0 0% 100%);
+  --background: oklch(92% 0 0);
   --foreground: hsl(0 0% 20%);
   --card: hsl(0 0% 100%);
   --card-foreground: hsl(0 0% 20%);
@@ -54,6 +61,8 @@ html {
   --shadow-xl:
     0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
   --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+  --font-inter: "Inter", sans-serif;
+  --font-syne: "Syne", serif;
 }
 
 .dark {