From 7bc513c7703c8538d231f25627ed1d526dada484 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Thu, 25 Sep 2025 08:00:13 +0000
Subject: [PATCH] [BLD-328] Portal: Update changelog page layout (#8124)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on UI improvements and code refactoring across various components in the application, enhancing styling consistency, accessibility, and overall user experience.

### Detailed summary
- Updated grid spacing in `Grid.tsx`.
- Increased max-width in `layout.tsx`.
- Modified border styles in multiple components.
- Enhanced button styles and variants in `chat-button.tsx` and `Subscribe.tsx`.
- Improved text styles for better readability.
- Refactored `AuthMethodsTabs.tsx` to use `Button` component.
- Adjusted `DocLayout.tsx` for more responsive design.
- Improved date formatting in `RenderData.tsx`.
- Added animations to `TableOfContents.tsx`.
- Updated feedback dialog in `Feedback.tsx` for better UX.
- General styling updates for consistency across components.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- Style
  - Widespread visual refinements: typography, spacing, tighter headings, dashed borders for dividers/images/code, smaller author avatar, absolute dates, wider content container, updated buttons (ghost/outline), adjusted icons and shadows, updated link/inline-code/grid/card styles, tabs and header/menu visual updates.
  - Footer, sidebar, docs search, subscribe, feedback, and table-of-contents presentational tweaks (including fade-in and conditional hiding).

- Refactor
  - Simplified changelog and post layout to a single-column header-first structure; removed changelog index TOC.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/portal/src/app/Header.tsx                | 98 +++++++++----------
 .../src/app/changelog/[slug]/layout.tsx       |  2 +-
 apps/portal/src/app/changelog/[slug]/page.tsx |  4 +-
 .../src/app/changelog/components/Author.tsx   |  6 +-
 .../components/ChangeLogIndexTOC.tsx          | 11 ---
 .../app/changelog/components/RenderData.tsx   | 12 +--
 apps/portal/src/app/changelog/page.tsx        | 87 ++++++++--------
 .../src/app/changelog/utils/transform.tsx     | 12 ++-
 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/DocImage.tsx      |  2 +-
 .../src/components/Document/DocLink.tsx       |  2 +-
 apps/portal/src/components/Document/Grid.tsx  |  2 +-
 .../src/components/Document/Heading.tsx       |  6 +-
 .../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 +-
 28 files changed, 246 insertions(+), 266 deletions(-)
 delete mode 100644 apps/portal/src/app/changelog/components/ChangeLogIndexTOC.tsx

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/changelog/[slug]/layout.tsx b/apps/portal/src/app/changelog/[slug]/layout.tsx
index c7adb43ecc4..956b55943de 100644
--- a/apps/portal/src/app/changelog/[slug]/layout.tsx
+++ b/apps/portal/src/app/changelog/[slug]/layout.tsx
@@ -1,6 +1,6 @@
 export default function Layout(props: { children: React.ReactNode }) {
   return (
-    <main className="container max-w-3xl py-10" data-noindex>
+    <main className="container max-w-4xl py-10" data-noindex>
       {props.children}
     </main>
   );
diff --git a/apps/portal/src/app/changelog/[slug]/page.tsx b/apps/portal/src/app/changelog/[slug]/page.tsx
index e6eb9be34ef..0e2b2337ab8 100644
--- a/apps/portal/src/app/changelog/[slug]/page.tsx
+++ b/apps/portal/src/app/changelog/[slug]/page.tsx
@@ -25,7 +25,7 @@ export default async function Page(props: {
 
   return (
     <div className="changelog-page">
-      <Button asChild>
+      <Button asChild variant="ghost">
         <Link
           className="-translate-x-1/4 !p-2 !text-muted-foreground hover:!text-foreground mb-4 bg-transparent"
           href="/changelog"
@@ -64,7 +64,7 @@ export default async function Page(props: {
         })}
       </div>
 
-      <div className="mb-8 border-t-2" />
+      <div className="mb-8 border-t border-dashed" />
 
       {ReactHtmlParser(data.html || "", {
         transform,
diff --git a/apps/portal/src/app/changelog/components/Author.tsx b/apps/portal/src/app/changelog/components/Author.tsx
index 75344e3dc4c..9fd28995c83 100644
--- a/apps/portal/src/app/changelog/components/Author.tsx
+++ b/apps/portal/src/app/changelog/components/Author.tsx
@@ -6,13 +6,11 @@ export function Author(props: { name: string; profileImage?: string | null }) {
       {props.profileImage && (
         <img
           alt=""
-          className="size-8 rounded-[50%] border"
+          className="size-6 rounded-[50%] border"
           src={props.profileImage}
         />
       )}
-      <span className="font-medium text-muted-foreground text-sm">
-        {props.name}
-      </span>
+      <span className="text-muted-foreground text-sm">{props.name}</span>
     </div>
   );
 }
diff --git a/apps/portal/src/app/changelog/components/ChangeLogIndexTOC.tsx b/apps/portal/src/app/changelog/components/ChangeLogIndexTOC.tsx
deleted file mode 100644
index 60be593cfdc..00000000000
--- a/apps/portal/src/app/changelog/components/ChangeLogIndexTOC.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-"use client";
-
-import { TableOfContentsSideBar } from "../../../components/others/TableOfContents";
-
-const onlyShowPostTitle = (h: HTMLHeadingElement) => {
-  return h.classList.contains("changelog-title");
-};
-
-export function ChangelogIndexTOC() {
-  return <TableOfContentsSideBar filterHeading={onlyShowPostTitle} />;
-}
diff --git a/apps/portal/src/app/changelog/components/RenderData.tsx b/apps/portal/src/app/changelog/components/RenderData.tsx
index 1f6e76857c6..a8a500986c6 100644
--- a/apps/portal/src/app/changelog/components/RenderData.tsx
+++ b/apps/portal/src/app/changelog/components/RenderData.tsx
@@ -1,16 +1,10 @@
-import { formatDistance } from "date-fns";
+import { formatDate } from "date-fns";
 import { cn } from "../../../lib/utils";
 
 export function RenderDate(props: { iso: string; className?: string }) {
   return (
-    <time
-      className={cn(
-        "font-medium text-muted-foreground text-sm",
-        props.className,
-      )}
-      dateTime={props.iso}
-    >
-      {formatDistance(new Date(props.iso), new Date())} ago
+    <time className={cn("text-sm", props.className)} dateTime={props.iso}>
+      {formatDate(new Date(props.iso), "MMM d, yyyy")}
     </time>
   );
 }
diff --git a/apps/portal/src/app/changelog/page.tsx b/apps/portal/src/app/changelog/page.tsx
index b16f4c26f48..4c16b7d99d3 100644
--- a/apps/portal/src/app/changelog/page.tsx
+++ b/apps/portal/src/app/changelog/page.tsx
@@ -1,11 +1,8 @@
 import { createMetadata } from "@doc";
 import GithubSlugger from "github-slugger";
-import { PlusIcon } from "lucide-react";
 import Link from "next/link";
 import ReactHtmlParser from "react-html-parser";
 import { Heading } from "@/components/Document";
-import { Author } from "./components/Author";
-import { ChangelogIndexTOC } from "./components/ChangeLogIndexTOC";
 import { RenderDate } from "./components/RenderData";
 import { fetchChangeLogs, fetchPost } from "./ghost";
 import { transform } from "./utils/transform";
@@ -23,12 +20,15 @@ export const metadata = createMetadata({
 
 export default async function Page() {
   return (
-    <main className="container" data-noindex>
-      <div className="flex justify-between gap-16">
-        <div className="w-full max-w-[850px] grow-0 ">
-          <PageContent />
+    <main data-noindex>
+      <div className="border-b py-12 border-dashed">
+        <div className="container">
+          <h1 className="font-semibold text-4xl tracking-tight">Changelog</h1>
         </div>
-        <ChangelogIndexTOC />
+      </div>
+
+      <div className="container">
+        <PageContent />
       </div>
     </main>
   );
@@ -39,53 +39,48 @@ async function PageContent() {
   const slugger = new GithubSlugger();
 
   return (
-    <div className="changelog-page py-6">
-      <h1 className="mb-10 font-semibold text-3xl tracking-tighter">
-        Changelog
-      </h1>
-
-      <div className="flex flex-col gap-10 xl:border-l-2 xl:pl-12">
+    <div className="changelog-page overflow-hidden">
+      <div className="flex flex-col gap-10 xl:border-l border-dashed xl:pl-16 max-w-4xl ml-auto pb-20">
         {posts.map((post) => {
           return (
-            <div className="relative pb-10" key={post.id}>
-              <div className="mb-2 flex items-center gap-5">
+            <div className="relative pt-10" key={post.id}>
+              <div className="-left-16 -translate-x-full absolute top-12 hidden xl:flex gap-5 ml-3 items-center">
                 {post.published_at && (
-                  <RenderDate className="text-base" iso={post.published_at} />
+                  <div className="hidden xl:block text-sm text-muted-foreground">
+                    <RenderDate iso={post.published_at} />
+                  </div>
                 )}
-                <div className="flex gap-5">
-                  {post.authors?.map((author) => {
-                    return (
-                      <Author
-                        key={author.id}
-                        name={author.name || ""}
-                        profileImage={author.profile_image}
-                      />
-                    );
-                  })}
+                <div className="size-6 rounded-[50%] border bg-background flex items-center justify-center">
+                  <div className="size-2 bg-blue-500 rounded-full" />
                 </div>
               </div>
 
-              <div className="-left-12 -translate-x-1/2 absolute top-12 hidden size-7 items-center justify-center rounded-[50%] bg-foreground md:size-10 xl:flex">
-                <PlusIcon className="size-6 text-background" />
-              </div>
-
               <div>
-                <Heading
-                  anchorClassName="[&>a]:hidden m-0 border-b pb-5 mb-5"
-                  anchorId={slugger.slug(post.title || "")}
-                  // eslint-disable-next-line tailwindcss/no-custom-classname
-                  className="changelog-title"
-                  level={2}
-                >
-                  <Link
-                    className="!text-foreground font-bold text-3xl tracking-tighter hover:underline md:text-4xl xl:text-5xl"
-                    href={`/changelog/${post.slug}`}
-                  >
-                    {post.title}
-                  </Link>
-                </Heading>
+                {post.published_at && (
+                  <div className="xl:hidden inline-flex rounded-full border px-3 py-2 mb-4 text-muted-foreground text-xs bg-card">
+                    <RenderDate iso={post.published_at} />
+                  </div>
+                )}
 
-                <RenderChangelogContent slug={post.slug} />
+                <div className="space-y-3 mb-5">
+                  <Heading
+                    anchorClassName="[&>a]:hidden m-0"
+                    anchorId={slugger.slug(post.title || "")}
+                    // eslint-disable-next-line tailwindcss/no-custom-classname
+                    className="changelog-title"
+                    level={2}
+                  >
+                    <Link
+                      className="!text-foreground font-semibold text-3xl md:text-4xl tracking-tight hover:underline !leading-tight"
+                      href={`/changelog/${post.slug}`}
+                    >
+                      {post.title}
+                    </Link>
+                  </Heading>
+                </div>
+                <div className="text-muted-foreground">
+                  <RenderChangelogContent slug={post.slug} />
+                </div>
               </div>
             </div>
           );
diff --git a/apps/portal/src/app/changelog/utils/transform.tsx b/apps/portal/src/app/changelog/utils/transform.tsx
index 694b4ff381a..cf2b0dd18a4 100644
--- a/apps/portal/src/app/changelog/utils/transform.tsx
+++ b/apps/portal/src/app/changelog/utils/transform.tsx
@@ -64,7 +64,7 @@ export const transform: Transform = (node, index: number) => {
       node.attribs.class = "text-center text-sm text-muted-foreground";
       return;
     }
-    return <Paragraph>{getChildren()}</Paragraph>;
+    return <Paragraph className="leading-7">{getChildren()}</Paragraph>;
   }
 
   if (node.name === "ul") {
@@ -77,7 +77,7 @@ export const transform: Transform = (node, index: number) => {
     }
     node.attribs.class = "rounded-lg";
     return (
-      <div className="my-5 flex justify-center rounded-lg border p-4">
+      <div className="my-6 flex justify-center rounded-lg border border-dashed p-2 bg-card/50">
         {convertNodeToElement(node, index, transform)}
       </div>
     );
@@ -109,7 +109,13 @@ export const transform: Transform = (node, index: number) => {
       // }
     }
     if (code) {
-      return <CodeBlock code={code} lang={lang} />;
+      return (
+        <CodeBlock
+          code={code}
+          lang={lang}
+          className="bg-card/50 border-dashed"
+        />
+      );
     }
   }
 
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/DocImage.tsx b/apps/portal/src/components/Document/DocImage.tsx
index c1eb4a23847..b892cc4a3ae 100644
--- a/apps/portal/src/components/Document/DocImage.tsx
+++ b/apps/portal/src/components/Document/DocImage.tsx
@@ -15,7 +15,7 @@ export function DocImage(props: {
   return (
     <div
       className={cn(
-        "my-4 flex justify-center rounded-lg border p-4",
+        "my-4 flex justify-center rounded-lg border border-dashed p-4",
         props.containerClassName,
       )}
     >
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/Heading.tsx b/apps/portal/src/components/Document/Heading.tsx
index e845b0cfd5a..8c462c7797e 100644
--- a/apps/portal/src/components/Document/Heading.tsx
+++ b/apps/portal/src/components/Document/Heading.tsx
@@ -33,7 +33,7 @@ export function Heading(props: {
         >
           <h2
             className={cn(
-              "break-words font-medium text-xl text-foreground tracking-tight",
+              "break-words font-semibold text-xl text-foreground tracking-tight",
               props.className,
             )}
           >
@@ -52,7 +52,7 @@ export function Heading(props: {
         >
           <h3
             className={cn(
-              "break-words font-medium text-foreground text-xl",
+              "break-words font-semibold text-foreground text-xl tracking-tight",
               props.className,
             )}
           >
@@ -71,7 +71,7 @@ export function Heading(props: {
         >
           <h4
             className={cn(
-              "break-words font-medium text-foreground text-lg",
+              "break-words font-semibold text-foreground text-lg tracking-tight",
               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>