From 7828afb68e5d936e147e51e06aeada8ebb8b50fe Mon Sep 17 00:00:00 2001
From: Manan Tank <manantankm@gmail.com>
Date: Thu, 25 Sep 2025 04:16:34 +0530
Subject: [PATCH] Portal: UI tweaks

---
 apps/portal/src/app/Header.tsx                | 98 +++++++++----------
 apps/portal/src/app/transactions/page.mdx     | 86 ++++++++--------
 .../src/app/transactions/sponsor/page.mdx     |  2 +
 apps/portal/src/components/AI/chat-button.tsx |  6 +-
 .../components/Document/AuthMethodsTabs.tsx   | 16 +--
 apps/portal/src/components/Document/Code.tsx  |  2 +-
 .../src/components/Document/DocLink.tsx       |  2 +-
 apps/portal/src/components/Document/Grid.tsx  |  2 +-
 .../src/components/Document/InlineCode.tsx    |  2 +-
 .../src/components/Document/PageFooter.tsx    | 33 ++++---
 .../src/components/Document/SDKCard.tsx       |  8 +-
 .../src/components/Layouts/DocLayout.tsx      |  4 +-
 .../src/components/others/DocSearch.tsx       |  4 +-
 .../portal/src/components/others/Feedback.tsx | 44 +++++----
 apps/portal/src/components/others/Sidebar.tsx | 29 +++---
 .../src/components/others/Subscribe.tsx       | 13 +--
 .../src/components/others/TableOfContents.tsx |  8 +-
 apps/portal/src/components/ui/tabs.tsx        |  9 +-
 .../components/code/CodeBlockContainer.tsx    |  2 +-
 19 files changed, 184 insertions(+), 186 deletions(-)

diff --git a/apps/portal/src/app/Header.tsx b/apps/portal/src/app/Header.tsx
index 9445db0c44b..ee7ff7cfeb4 100644
--- a/apps/portal/src/app/Header.tsx
+++ b/apps/portal/src/app/Header.tsx
@@ -213,7 +213,7 @@ export function Header() {
   const pathname = usePathname();
 
   return (
-    <header className="flex w-full flex-col gap-2 border-b bg-background p-4 xl:pb-0 lg:px-8 overflow-hidden">
+    <header className="flex w-full flex-col gap-2 border-b p-4 xl:pb-0 lg:px-8 lg:pt-5 overflow-hidden bg-card">
       {/* Top row */}
       <div className="container flex items-center justify-between gap-6">
         <div className="flex items-center gap-2">
@@ -230,7 +230,7 @@ export function Header() {
           </Link>
         </div>
 
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-4">
           <div className="hidden xl:block">
             <Link
               className="text-foreground"
@@ -269,13 +269,13 @@ export function Header() {
       </div>
 
       {/* Bottom row - hidden on mobile */}
-      <div className="container hidden items-center justify-between gap-6 xl:flex mt-1">
+      <div className="container hidden items-start justify-between gap-6 xl:flex mt-1">
         <nav className="flex grow gap-5">
-          <ul className="flex flex-row items-center gap-0 mb-1">
+          <ul className="flex flex-row items-center gap-0 mb-1.5">
             {links.map((link) => {
               return (
                 <li
-                  className="flex items-center py-2 relative px-2.5 hover:text-foreground"
+                  className="flex items-center relative"
                   key={link.href}
                   onClick={() => {
                     setShowBurgerMenu(false);
@@ -284,9 +284,13 @@ export function Header() {
                     setShowBurgerMenu(false);
                   }}
                 >
-                  <NavLink href={link.href} name={link.name} />
+                  <NavLink
+                    href={link.href}
+                    name={link.name}
+                    className="py-2.5 px-3 hover:bg-accent rounded-lg hover:text-foreground font-normal"
+                  />
                   {pathname?.startsWith(link.href) && (
-                    <div className="bg-violet-700 h-[2px] inset-x-0 rounded-full absolute -bottom-1" />
+                    <div className="bg-foreground h-[2px] inset-x-0 rounded-full absolute -bottom-1.5" />
                   )}
                 </li>
               );
@@ -294,47 +298,37 @@ export function Header() {
           </ul>
         </nav>
 
-        <div className="flex items-center gap-3">
-          <div className="px-1">
-            <DropdownLinks
-              category="AI"
-              links={aiLinks}
-              onLinkClick={() => setShowBurgerMenu(false)}
-            />
-          </div>
-          <div className="px-1">
-            <DropdownLinks
-              category="SDKs"
-              links={sdkLinks}
-              onLinkClick={() => setShowBurgerMenu(false)}
-            />
-          </div>
-          <div className="px-1">
-            <DropdownLinks
-              category="APIs"
-              links={apisLinks}
-              onLinkClick={() => setShowBurgerMenu(false)}
-            />
-          </div>
-
-          <div className="px-1">
-            <DropdownLinks
-              category="Tools"
-              links={toolLinks}
-              onLinkClick={() => setShowBurgerMenu(false)}
-            />
-          </div>
+        <div className="flex items-center">
+          <DropdownLinks
+            category="AI"
+            links={aiLinks}
+            onLinkClick={() => setShowBurgerMenu(false)}
+          />
+          <DropdownLinks
+            category="SDKs"
+            links={sdkLinks}
+            onLinkClick={() => setShowBurgerMenu(false)}
+          />
+          <DropdownLinks
+            category="APIs"
+            links={apisLinks}
+            onLinkClick={() => setShowBurgerMenu(false)}
+          />
 
-          <div className="px-1">
-            <DropdownLinks
-              category="Support"
-              links={supportLinks}
-              onLinkClick={() => setShowBurgerMenu(false)}
-            />
-          </div>
+          <DropdownLinks
+            category="Tools"
+            links={toolLinks}
+            onLinkClick={() => setShowBurgerMenu(false)}
+          />
+          <DropdownLinks
+            category="Support"
+            links={supportLinks}
+            onLinkClick={() => setShowBurgerMenu(false)}
+          />
 
           <NavLink
             href="/changelog"
+            className="px-3 py-2.5 hover:bg-accent hover:text-foreground rounded-lg"
             name="Changelog"
             onClick={() => {
               setShowBurgerMenu(false);
@@ -448,31 +442,29 @@ function DropdownLinks(props: {
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
-              className="inline-flex items-center gap-1 p-0 font-medium text-muted-foreground text-sm hover:bg-transparent hover:text-foreground"
+              className="inline-flex items-center gap-1.5 font-normal text-muted-foreground text-sm hover:bg-accent hover:text-foreground rounded-lg px-3 py-2.5"
               variant="ghost"
             >
               {props.category}
-              <ChevronDownIcon className="size-4 text-muted-foreground opacity-70" />
+              <ChevronDownIcon className="size-3.5 text-muted-foreground opacity-70" />
             </Button>
           </DropdownMenuTrigger>
 
           <DropdownMenuContent
-            className="flex flex-col gap-1 bg-card p-3"
-            style={{
-              minWidth: "150px",
-            }}
+            className="flex flex-col gap-1 bg-card p-1 rounded-xl min-w-[200px]"
+            sideOffset={14}
           >
             {props.links.map((info) => {
               return (
                 <DropdownMenuItem asChild key={info.name}>
                   <div
                     className={clsx(
-                      "relative flex cursor-pointer gap-2 font-medium text-foreground",
+                      "relative flex cursor-pointer gap-3 font-medium text-foreground !rounded-lg px-3 py-2",
                       "hover:bg-accent",
                     )}
                   >
                     {info.icon && (
-                      <info.icon className="size-5 text-foreground" />
+                      <info.icon className="size-5 text-muted-foreground" />
                     )}
                     <Link
                       className="before:absolute before:inset-0"
@@ -524,6 +516,7 @@ function NavLink(props: {
   name: string;
   onClick?: () => void;
   icon?: React.FC<{ className?: string }>;
+  className?: string;
 }) {
   const pathname = usePathname();
   return (
@@ -534,6 +527,7 @@ function NavLink(props: {
           ? "text-foreground"
           : "text-muted-foreground",
         props.icon ? "flex flex-row gap-3" : "",
+        props.className,
       )}
       href={props.href}
       onClick={props.onClick}
diff --git a/apps/portal/src/app/transactions/page.mdx b/apps/portal/src/app/transactions/page.mdx
index 75a49c3a205..6e2d3791a26 100644
--- a/apps/portal/src/app/transactions/page.mdx
+++ b/apps/portal/src/app/transactions/page.mdx
@@ -70,9 +70,9 @@ Send, monitor, and manage transactions. Send transactions from user or server wa
     - For user wallets in React applications that use the SDK, you can obtain the user wallet auth token (JWT) with the [`useAuthToken()`](/references/typescript/v5/useAuthToken) hook.
     - For user wallets in TypeScript applications, you can get it by calling `wallet.getAuthToken()` on a connected [`inAppWallet()`](/references/typescript/v5/inAppWallet) or [`ecosystemWallet()`](/references/typescript/v5/ecosystemWallet).
 
-      <OpenApiEndpoint path="/v1/transactions" method="POST" />
+<OpenApiEndpoint path="/v1/transactions" method="POST" />
 
-    </TabsContent>
+</TabsContent>
 
   <TabsContent value="typescript">
     ### Installation
@@ -425,47 +425,47 @@ Send, monitor, and manage transactions. Send transactions from user or server wa
     2. Enter your Client ID from the thirdweb dashboard
     3. Allowlist your game's Bundle ID on the thirdweb dashboard for security
 
-    ### Send a Transaction
-
-    Create a new script to manage transactions:
-
-    ```csharp
-    using Thirdweb;
-    using UnityEngine;
-    using UnityEngine.UI;
-
-    public class TransactionManager : MonoBehaviour
-    {
-        private ThirdwebSDK sdk;
-        public Text walletAddressText;
-        public Button sendButton;
-
-        void Start()
-        {
-            // Client ID is set in Project Settings > Thirdweb
-            sdk = new ThirdwebSDK("ethereum"); // Or any supported chain
-            sendButton.onClick.AddListener(SendTransaction);
-        }
-
-        public async void SendTransaction()
-        {
-            try {
-                var contract = await ThirdwebManager.Instance.GetContract(
-                    address: "contract-address",
-                    chainId: 1,
-                    abi: "optional-abi"
-                );
-
-                // Send a transaction
-                var receipt = await contract.Write(wallet, contract, "transfer", weiValue, toAddress, amount);
-                Debug.Log($"Transaction receipt: {receipt}");
-            }
-            catch (System.Exception e) {
-                Debug.LogError("Error sending transaction: " + e.Message);
-            }
-        }
-    }
-    ```
+  ### Send a Transaction
+
+  Create a new script to manage transactions:
+
+  ```csharp
+  using Thirdweb;
+  using UnityEngine;
+  using UnityEngine.UI;
+
+  public class TransactionManager : MonoBehaviour
+  {
+      private ThirdwebSDK sdk;
+      public Text walletAddressText;
+      public Button sendButton;
+
+      void Start()
+      {
+          // Client ID is set in Project Settings > Thirdweb
+          sdk = new ThirdwebSDK("ethereum"); // Or any supported chain
+          sendButton.onClick.AddListener(SendTransaction);
+      }
+
+      public async void SendTransaction()
+      {
+          try {
+              var contract = await ThirdwebManager.Instance.GetContract(
+                  address: "contract-address",
+                  chainId: 1,
+                  abi: "optional-abi"
+              );
+
+              // Send a transaction
+              var receipt = await contract.Write(wallet, contract, "transfer", weiValue, toAddress, amount);
+              Debug.Log($"Transaction receipt: {receipt}");
+          }
+          catch (System.Exception e) {
+              Debug.LogError("Error sending transaction: " + e.Message);
+          }
+      }
+  }
+  ```
 
   </TabsContent>
 
diff --git a/apps/portal/src/app/transactions/sponsor/page.mdx b/apps/portal/src/app/transactions/sponsor/page.mdx
index f718deb7abd..2cae8b88f13 100644
--- a/apps/portal/src/app/transactions/sponsor/page.mdx
+++ b/apps/portal/src/app/transactions/sponsor/page.mdx
@@ -103,6 +103,8 @@ Example sponsored contract write request:
 
 </Tabs>
 
+<div className='h-6' />
+
 That's it! All transactions executed by the user will be sponsored via the thirdweb infrastructure.
 
 </TabsContent>
diff --git a/apps/portal/src/components/AI/chat-button.tsx b/apps/portal/src/components/AI/chat-button.tsx
index 6f96ba5d9d3..4ad8de27500 100644
--- a/apps/portal/src/components/AI/chat-button.tsx
+++ b/apps/portal/src/components/AI/chat-button.tsx
@@ -20,14 +20,14 @@ export function ChatButton() {
     <>
       {/* Inline Button (not floating) */}
       <Button
-        className="gap-2 rounded-full shadow-lg"
+        className="gap-2 rounded-full bg-background"
         onClick={() => {
           setIsOpen(true);
           setHasBeenOpened(true);
         }}
-        variant="default"
+        variant="outline"
       >
-        <MessageCircleIcon className="size-4" />
+        <MessageCircleIcon className="size-4 text-muted-foreground" />
         Ask AI
       </Button>
 
diff --git a/apps/portal/src/components/Document/AuthMethodsTabs.tsx b/apps/portal/src/components/Document/AuthMethodsTabs.tsx
index b4062389ac8..07fc2d36bab 100644
--- a/apps/portal/src/components/Document/AuthMethodsTabs.tsx
+++ b/apps/portal/src/components/Document/AuthMethodsTabs.tsx
@@ -16,6 +16,7 @@ import {
 } from "@/icons";
 import { cn } from "@/lib/utils";
 import { CodeClient } from "../code/code.client";
+import { Button } from "../ui/button";
 
 type AuthMethod =
   | "email"
@@ -849,16 +850,15 @@ function AuthMethodsTabsContent() {
         </h3>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
           {authMethods.map((method) => (
-            <button
+            <Button
               type="button"
+              variant="outline"
               key={method.id}
               onClick={() => setSelectedAuth(method.id)}
               className={cn(
-                "overflow-hidden text-ellipsis px-3 py-1.5  transition-colors duration-300 hover:text-foreground text-sm rounded-lg hover:bg-violet-800/15",
-                selectedAuth === method.id
-                  ? "font-medium text-foreground bg-violet-800/25 border border-violet-800"
-                  : "",
-                "flex flex-row justify-start items-start gap-3",
+                "overflow-hidden text-ellipsis text-sm rounded-lg hover:bg-accent justify-start gap-3 h-auto py-3 rounded-xl",
+                selectedAuth === method.id &&
+                  "font-medium text-foreground bg-accent",
               )}
             >
               <img
@@ -866,8 +866,8 @@ function AuthMethodsTabsContent() {
                 className="size-5 shrink-0"
                 src={getSocialIcon(method.id)}
               />
-              <div className="font-medium">{method.label}</div>
-            </button>
+              <div>{method.label}</div>
+            </Button>
           ))}
         </div>
       </div>
diff --git a/apps/portal/src/components/Document/Code.tsx b/apps/portal/src/components/Document/Code.tsx
index 5a3eea96788..82c18c70f40 100644
--- a/apps/portal/src/components/Document/Code.tsx
+++ b/apps/portal/src/components/Document/Code.tsx
@@ -73,8 +73,8 @@ export async function CodeBlock(props: {
         lang={lang}
       >
         <ScrollShadow
-          className=""
           scrollableClassName={cn("p-4", props.scrollContainerClassName)}
+          shadowColor="hsl(var(--card))"
         >
           <RenderCode code={code} lang={lang} tokenLinks={tokenLinks} />
         </ScrollShadow>
diff --git a/apps/portal/src/components/Document/DocLink.tsx b/apps/portal/src/components/Document/DocLink.tsx
index f7a402c9861..23359d691da 100644
--- a/apps/portal/src/components/Document/DocLink.tsx
+++ b/apps/portal/src/components/Document/DocLink.tsx
@@ -10,7 +10,7 @@ export function DocLink(props: {
   return (
     <Link
       className={cn(
-        "underline decoration-violet-800 decoration-dotted underline-offset-[5px] transition-colors hover:decoration-violet-800 hover:decoration-solid hover:text-foreground",
+        "text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-400 decoration-dotted transition-colors ",
         props.className,
       )}
       href={props.href}
diff --git a/apps/portal/src/components/Document/Grid.tsx b/apps/portal/src/components/Document/Grid.tsx
index 6907f3ac99b..fa2cbe5f4cf 100644
--- a/apps/portal/src/components/Document/Grid.tsx
+++ b/apps/portal/src/components/Document/Grid.tsx
@@ -4,7 +4,7 @@ export function Grid(props: { children: React.ReactNode; className?: string }) {
   return (
     <div
       className={cn(
-        "my-4 grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+        "my-4 grid gap-3 md:grid-cols-2 lg:grid-cols-3",
         props.className,
       )}
     >
diff --git a/apps/portal/src/components/Document/InlineCode.tsx b/apps/portal/src/components/Document/InlineCode.tsx
index 163ce7c15a6..a4bb5bda43a 100644
--- a/apps/portal/src/components/Document/InlineCode.tsx
+++ b/apps/portal/src/components/Document/InlineCode.tsx
@@ -4,7 +4,7 @@ export function InlineCode(props: { code: string; className?: string }) {
   return (
     <code
       className={cn(
-        "max-h-20 rounded-md border bg-muted px-1.5 py-0.5 text-[0.875em]",
+        "max-h-20 rounded-lg bg-muted border px-1.5 py-[3px] text-[0.875em]",
         props.className,
       )}
       style={{
diff --git a/apps/portal/src/components/Document/PageFooter.tsx b/apps/portal/src/components/Document/PageFooter.tsx
index 8a71e3ce70f..eb469221727 100644
--- a/apps/portal/src/components/Document/PageFooter.tsx
+++ b/apps/portal/src/components/Document/PageFooter.tsx
@@ -16,18 +16,17 @@ export function PageFooter(props: {
   sidebarLinks?: SidebarLink[];
 }) {
   return (
-    <footer className="flex flex-col gap-7 pb-20" data-noindex>
-      <div className="flex flex-col justify-between gap-7">
-        <div className="flex gap-4 justify-between items-center">
-          {props.editPageButton && <AutoEditPageButton />}
-          {props.sidebarLinks && (
-            <AutoNextPageButton sidebarLinks={props.sidebarLinks} />
-          )}
-        </div>
+    <footer className="flex flex-col border-t border-dashed" data-noindex>
+      <div className="flex gap-4 justify-end items-center py-6">
+        {props.sidebarLinks && (
+          <AutoNextPageButton sidebarLinks={props.sidebarLinks} />
+        )}
+      </div>
+      <div className="border-t py-2 border-dashed flex justify-between items-center">
+        {props.editPageButton && <AutoEditPageButton />}
         <Feedback />
       </div>
-      <div className="h-1 border-t" />
-      <div className="flex flex-col justify-between gap-7 md:flex-row">
+      <div className="flex flex-col justify-between gap-7 md:flex-row border-t py-6 border-dashed">
         <Links />
         <Subscribe />
       </div>
@@ -37,18 +36,18 @@ export function PageFooter(props: {
 
 function Links() {
   return (
-    <ul className="flex flex-col gap-3">
+    <ul className="flex flex-col gap-2">
       <FooterLinkItem
         href="https://www.youtube.com/@thirdweb_"
         icon={VideoIcon}
-        label="video Tutorials"
+        label="Video tutorials"
         prefix="Watch our"
       />
 
       <FooterLinkItem
         href="/changelog"
         icon={ScrollTextIcon}
-        label="changelog"
+        label="Changelog"
         prefix="View our"
       />
 
@@ -71,11 +70,13 @@ function FooterLinkItem(props: {
   return (
     <li className="flex items-center gap-2 text-muted-foreground">
       <div className="flex items-center gap-2 font-medium">
-        <props.icon className="size-5" />
-        <span>{props.prefix}</span>
+        <props.icon className="size-4" />
+        <span className="text-sm">{props.prefix}</span>
       </div>
 
-      <DocLink href={props.href}>{props.label}</DocLink>
+      <DocLink href={props.href} className="text-sm">
+        {props.label}
+      </DocLink>
     </li>
   );
 }
diff --git a/apps/portal/src/components/Document/SDKCard.tsx b/apps/portal/src/components/Document/SDKCard.tsx
index 0bba738d720..55921b8a7be 100644
--- a/apps/portal/src/components/Document/SDKCard.tsx
+++ b/apps/portal/src/components/Document/SDKCard.tsx
@@ -10,14 +10,16 @@ export function SDKCard(props: {
 }) {
   return (
     <Link
-      className="flex items-center gap-2 rounded-lg border bg-card p-2 px-4 transition-colors hover:border-active-border text-foreground/80 hover:text-foreground shadow-sm"
+      className="flex items-center gap-3 rounded-xl border bg-card px-4 py-3.5 transition-colors hover:border-active-border text-foreground/80 hover:text-foreground shadow-sm"
       href={props.href}
       target={props.isExternal ? "_blank" : undefined}
     >
       {props.icon && (
-        <props.icon className={cn("size-4 shrink-0", props.iconClassName)} />
+        <div className="rounded-full p-1.5 bg-background shrink-0 border">
+          <props.icon className={cn("size-4", props.iconClassName)} />
+        </div>
       )}
-      <h3 className="font-semibold text-sm tracking-tight">{props.title}</h3>
+      <h3 className="text-foreground text-sm font-medium">{props.title}</h3>
     </Link>
   );
 }
diff --git a/apps/portal/src/components/Layouts/DocLayout.tsx b/apps/portal/src/components/Layouts/DocLayout.tsx
index 3f96d3318c3..71c080528c4 100644
--- a/apps/portal/src/components/Layouts/DocLayout.tsx
+++ b/apps/portal/src/components/Layouts/DocLayout.tsx
@@ -29,7 +29,7 @@ export function DocLayout(props: DocLayoutProps) {
         "container relative flex flex-col gap-12 xl:grid",
         props.sideBar.links.length > 0
           ? props.showTableOfContents !== false
-            ? "xl:grid-cols-[220px_720px_1fr]"
+            ? "xl:grid-cols-[220px_820px_1fr]"
             : "xl:grid-cols-[220px_1160px]"
           : props.showTableOfContents !== false
             ? "xl:grid-cols-[960px_1fr]"
@@ -58,7 +58,7 @@ export function DocLayout(props: DocLayoutProps) {
         data-noindex={props.noIndex}
       >
         <div className="grow xl:mt-6">
-          <h5 className="mb-2 text-sm font-semibold text-violet-500">
+          <h5 className="mb-2 text-sm text-muted-foreground">
             {props.sideBar.name}
           </h5>
           {props.children}
diff --git a/apps/portal/src/components/others/DocSearch.tsx b/apps/portal/src/components/others/DocSearch.tsx
index b93549ff86a..15e77066d51 100644
--- a/apps/portal/src/components/others/DocSearch.tsx
+++ b/apps/portal/src/components/others/DocSearch.tsx
@@ -355,10 +355,10 @@ export function DocSearch(props: { variant: "icon" | "search" }) {
         {forDesktop && (
           <DialogTrigger asChild>
             <Button
-              className="flex w-64 justify-between gap-6 px-3 text-muted-foreground bg-card"
+              className="flex w-64 justify-between gap-6 px-4 text-muted-foreground bg-background rounded-xl"
               variant="outline"
             >
-              <span className="text-xs">Search Docs</span>
+              <span className="text-sm font-normal">Search Docs</span>
               <div className="flex items-center gap-1 rounded-sm p-1 text-muted-foreground text-xs">
                 <CommandIcon className="size-3" />K
               </div>
diff --git a/apps/portal/src/components/others/Feedback.tsx b/apps/portal/src/components/others/Feedback.tsx
index b9a5b49d99a..b6044101418 100644
--- a/apps/portal/src/components/others/Feedback.tsx
+++ b/apps/portal/src/components/others/Feedback.tsx
@@ -4,7 +4,15 @@ import { BadgeCheckIcon, ThumbsDownIcon, ThumbsUpIcon } from "lucide-react";
 import { useState } from "react";
 import { reportFeedback } from "@/analytics/report";
 import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Textarea } from "../ui/textarea";
 
 export function Feedback() {
   const [isSubmitted, setIsSubmitted] = useState(false);
@@ -12,12 +20,11 @@ export function Feedback() {
 
   if (!isSubmitted) {
     return (
-      <div className="flex flex-col gap-3 md:h-16 md:flex-row md:items-center md:gap-6">
-        <p>Was this page helpful?</p>
-
-        <div className="flex gap-3">
+      <div className="flex flex-col gap-2 md:h-16 md:flex-row md:items-center md:gap-4">
+        <p className="text-sm text-foreground">Was this page helpful?</p>
+        <div className="flex gap-2">
           <Button
-            className="gap-2 bg-card"
+            className="gap-2 bg-card rounded-lg"
             onClick={() => {
               setIsSubmitted(true);
               reportFeedback({ helpful: true });
@@ -30,22 +37,23 @@ export function Feedback() {
 
           <Dialog>
             <DialogTrigger asChild>
-              <Button className="gap-2 bg-card" variant="outline">
+              <Button className="gap-2 bg-card rounded-lg" variant="outline">
                 No
                 <ThumbsDownIcon className="size-4 text-muted-foreground" />
               </Button>
             </DialogTrigger>
 
             <DialogContent className="p-5">
-              <h3 className="mb-3 font-semibold text-foreground text-lg">
-                Apologies for any confusion.
-              </h3>
-              <p className="mb-5 font-medium text-muted-foreground">
-                Please provide details about the issue you encountered to help
-                us improve our documentation.
-              </p>
-              <textarea
-                className="mb-2 h-32 w-full rounded-sm border bg-card p-2 font-medium text-foreground outline-none placeholder:font-semibold"
+              <DialogHeader className="mb-5">
+                <DialogTitle>Apologies for any confusion.</DialogTitle>
+                <DialogDescription>
+                  Please provide details about the issue you encountered to help
+                  us improve our documentation.
+                </DialogDescription>
+              </DialogHeader>
+
+              <Textarea
+                className="mb-2 h-32 w-full bg-card"
                 onChange={(e) => {
                   setFeedback(e.target.value);
                 }}
@@ -71,8 +79,8 @@ export function Feedback() {
   return (
     <div className="fade-in-0 animate-in duration-500">
       <div className="flex items-center gap-2 text-foreground md:h-16">
-        <BadgeCheckIcon />
-        <p className="font-semibold text-foreground">
+        <BadgeCheckIcon className="size-4" />
+        <p className="font-semibold text-foreground text-sm">
           Thank you for your feedback!
         </p>
       </div>
diff --git a/apps/portal/src/components/others/Sidebar.tsx b/apps/portal/src/components/others/Sidebar.tsx
index 7e5c7930619..9ed540ae5d4 100644
--- a/apps/portal/src/components/others/Sidebar.tsx
+++ b/apps/portal/src/components/others/Sidebar.tsx
@@ -58,7 +58,7 @@ export function DocSidebar(props: ReferenceSideBarProps) {
     <div className="flex h-full flex-col pb-10 pt-6 text-muted-foreground text-sm">
       {/* Side bar Name */}
       {props.header}
-      <ul className="styled-scrollbar transform-gpu">
+      <ul className="styled-scrollbar transform-gpu space-y-1">
         {props.links.map((link, i) => (
           // biome-ignore lint/suspicious/noArrayIndexKey: TODO - fix this
           <li key={i}>
@@ -74,7 +74,7 @@ function SidebarItem(props: { link: SidebarLink; onLinkClick?: () => void }) {
   const pathname = usePathname();
 
   if ("separator" in props.link) {
-    return <hr className="my-2 border-t" />;
+    return <hr className="my-2 border-t border-dashed" />;
   }
 
   const isActive = props.link.href
@@ -105,10 +105,8 @@ function SidebarItem(props: { link: SidebarLink; onLinkClick?: () => void }) {
     return (
       <Link
         className={clsx(
-          "overflow-hidden text-ellipsis px-3 py-1.5  transition-colors duration-300 hover:text-foreground hover:bg-violet-800/15 border border-transparent hover:border-violet-800/50 text-sm rounded-lg",
-          isActive
-            ? "font-medium text-foreground bg-violet-800/25 border border-violet-800"
-            : "",
+          "overflow-hidden text-ellipsis px-3 py-1.5 transition-colors duration-300 hover:text-foreground hover:bg-accent text-sm rounded-lg",
+          isActive ? "text-foreground !bg-accent" : "",
           "flex flex-row items-center gap-2",
         )}
         href={link.href}
@@ -126,10 +124,8 @@ function SidebarItem(props: { link: SidebarLink; onLinkClick?: () => void }) {
   return (
     <Link
       className={clsx(
-        "block overflow-hidden text-ellipsis px-3 py-1.5  transition-colors duration-300 hover:text-foreground hover:bg-violet-800/15 border border-transparent hover:border-violet-800/50 text-sm rounded-lg",
-        isActive
-          ? "font-medium text-foreground bg-violet-800/25 border border-violet-800"
-          : "",
+        "block overflow-hidden text-ellipsis px-3 py-1.5  transition-colors duration-300 hover:text-foreground hover:bg-accent text-sm rounded-lg",
+        isActive ? "text-foreground !bg-accent" : "",
       )}
       href={link.href}
       onClick={props.onLinkClick}
@@ -155,8 +151,8 @@ function DocSidebarNonCollapsible(props: {
         {href ? (
           <Link
             className={cn(
-              "block px-3 py-1.5 hover:bg-violet-800/20 w-full rounded-lg hover:border-violet-800/50 border border-transparent",
-              isCategoryActive && "text-foreground",
+              "block px-3 py-1.5 hover:bg-accent w-full rounded-lg",
+              isCategoryActive && "text-foreground !bg-accent",
             )}
             href={href}
           >
@@ -166,7 +162,7 @@ function DocSidebarNonCollapsible(props: {
           <div className="px-3">{name}</div>
         )}
       </div>
-      <ul className="flex flex-col">
+      <ul className="space-y-1">
         {links.map((link, i) => {
           return (
             // biome-ignore lint/suspicious/noArrayIndexKey: TODO - fix this
@@ -207,7 +203,7 @@ function DocSidebarCategory(props: {
         "text-muted-foreground hover:text-foreground",
       )}
     >
-      <div className="flex gap-2 py-1.5 px-3 font-medium" ref={triggerRef}>
+      <div className="flex gap-2 py-1.5 px-3" ref={triggerRef}>
         {icon && <SidebarIcon icon={icon} />}
         {name}
       </div>
@@ -215,10 +211,7 @@ function DocSidebarCategory(props: {
   );
 
   const triggerEl = href ? (
-    <Link
-      className={cn("w-full py-1.5 px-3 text-left font-medium")}
-      href={href}
-    >
+    <Link className={cn("w-full py-1.5 px-3 text-left")} href={href}>
       {triggerElContent}
     </Link>
   ) : (
diff --git a/apps/portal/src/components/others/Subscribe.tsx b/apps/portal/src/components/others/Subscribe.tsx
index 3945711bfd8..22acfa7c365 100644
--- a/apps/portal/src/components/others/Subscribe.tsx
+++ b/apps/portal/src/components/others/Subscribe.tsx
@@ -35,12 +35,12 @@ export function Subscribe() {
         }
       }}
     >
-      <p className="mb-3 font-semibold text-base text-foreground">
+      <p className="mb-2 text-sm text-foreground font-medium text-right">
         Subscribe for the latest dev updates
       </p>
       <div className="flex">
         <Input
-          className="h-12 border bg-background font-semibold duration-200 placeholder:font-semibold focus-visible:outline-none focus-visible:ring-offset-0 group-focus-within:border-foreground md:w-[230px]"
+          className="rounded-r-none border-r-0 w-64"
           onChange={(e) => {
             setEmail(e.target.value);
           }}
@@ -53,14 +53,7 @@ export function Subscribe() {
           value={email}
         />
 
-        <Button
-          className="h-12 bg-muted font-semibold text-foreground duration-200 group-focus-within:bg-foreground group-focus-within:text-background"
-          style={{
-            borderBottomLeftRadius: 0,
-            borderTopLeftRadius: 0,
-          }}
-          type="submit"
-        >
+        <Button type="submit" variant="secondary" className="rounded-l-none">
           Subscribe
         </Button>
       </div>
diff --git a/apps/portal/src/components/others/TableOfContents.tsx b/apps/portal/src/components/others/TableOfContents.tsx
index 9c8c8c029c3..2a769774212 100644
--- a/apps/portal/src/components/others/TableOfContents.tsx
+++ b/apps/portal/src/components/others/TableOfContents.tsx
@@ -113,10 +113,14 @@ export function TableOfContentsSideBar(props: {
     };
   }, [filterHeading, pathname]);
 
+  if (nodes.length === 0) {
+    return null;
+  }
+
   return (
     <nav
       className={cn(
-        "shrink-0 hidden pt-6 text-sm xl:block",
+        "shrink-0 hidden pt-6 text-sm xl:block animate-in fade-in-0",
         "styled-scrollbar sticky top-sticky-top-height h-sidebar-height flex-col overflow-y-auto",
       )}
       style={{
@@ -124,7 +128,7 @@ export function TableOfContentsSideBar(props: {
       }}
     >
       <div className="text-sm">
-        <div className="font-medium mb-4 text-foreground border-b pb-4 text-base">
+        <div className="font-medium mb-4 text-foreground text-base">
           On this page
         </div>
         <div
diff --git a/apps/portal/src/components/ui/tabs.tsx b/apps/portal/src/components/ui/tabs.tsx
index b82edb88a61..c083eacdb00 100644
--- a/apps/portal/src/components/ui/tabs.tsx
+++ b/apps/portal/src/components/ui/tabs.tsx
@@ -13,7 +13,7 @@ const TabsList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.List
     className={cn(
-      "flex w-100 items-center justify-start border-b overflow-x-auto overflow-y-hidden whitespace-nowrap no-scrollbar",
+      "flex w-full items-center justify-start border-b overflow-x-auto overflow-y-hidden whitespace-nowrap no-scrollbar",
       className,
     )}
     ref={ref}
@@ -28,10 +28,11 @@ const TabsTrigger = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.Trigger
     className={cn(
-      "mb-[-2px] flex items-center whitespace-nowrap px-4 py-2 text-sm font-medium",
-      "border-transparent border-b-4 text-muted-foreground ring-offset-700 transition-all",
-      "data-[state=active]:border-violet-800 hover:text-foreground data-[state=active]:text-foreground",
+      "mb-1 flex items-center whitespace-nowrap px-3 h-10 text-sm font-medium rounded-lg relative",
+      "border-transparent border-b text-muted-foreground ring-offset-700 transition-all",
+      "hover:text-foreground hover:bg-accent data-[state=active]:text-foreground",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "data-[state=active]:before:opacity-100 before:absolute before:opacity-0 before:border-b before:left-0 before:right-0 before:bottom-[-5px] before:transition-opacity before:duration-300",
       className,
     )}
     ref={ref}
diff --git a/packages/ui/src/components/code/CodeBlockContainer.tsx b/packages/ui/src/components/code/CodeBlockContainer.tsx
index 420766225c1..460026ad2d3 100644
--- a/packages/ui/src/components/code/CodeBlockContainer.tsx
+++ b/packages/ui/src/components/code/CodeBlockContainer.tsx
@@ -31,7 +31,7 @@ export function CodeBlockContainer(props: {
           props.scrollableContainerClassName,
         )}
         scrollableClassName={cn("p-4", props.scrollableClassName)}
-        shadowColor={props.shadowColor || "hsl(var(--muted))"}
+        shadowColor={props.shadowColor || "hsl(var(--card))"}
       >
         {props.children}
       </ScrollShadow>