diff --git a/src/app.css b/src/app.css
index 88830e5fdd..0610b9496d 100644
--- a/src/app.css
+++ b/src/app.css
@@ -127,12 +127,12 @@
 
     /* Letter spacing */
     --letter-spacing-*: initial;
-    --letter-spacing-compressed: -0.022rem;
-    --letter-spacing-squeezed: -0.01rem;
-    --letter-spacing-tighter: -0.018rem;
-    --letter-spacing-tight: -0.0045rem;
-    --letter-spacing-none: 0rem;
-    --letter-spacing-loose: 0.08rem;
+    --letter-spacing-compressed: -0.022em;
+    --letter-spacing-squeezed: -0.01em;
+    --letter-spacing-tighter: -0.018em;
+    --letter-spacing-tight: -0.0045em;
+    --letter-spacing-none: 0em;
+    --letter-spacing-loose: 0.08em;
 }
 
 /* Themes */
@@ -163,6 +163,6 @@
 /* Container */
 @layer components {
     .container {
-        @apply mx-auto box-content max-w-[75rem] px-8;
+        @apply mx-auto box-content max-w-[75rem] px-5;
     }
 }
diff --git a/src/app.html b/src/app.html
index ea596065ad..ac2a577be7 100644
--- a/src/app.html
+++ b/src/app.html
@@ -17,7 +17,7 @@
         %sveltekit.head%
     </head>
 
-    <body class="dark group/body" data-sveltekit-preload-data="hover">
+    <body class="dark group/body antialiased" data-sveltekit-preload-data="hover">
         <script>
             // Theme
             const isDocs = window.location.pathname.startsWith('/docs');
diff --git a/src/lib/animations/Products/Products.svelte b/src/lib/animations/Products/Products.svelte
index 3ad0cb6394..b14146ca74 100644
--- a/src/lib/animations/Products/Products.svelte
+++ b/src/lib/animations/Products/Products.svelte
@@ -238,7 +238,7 @@
             >
                 {#if scrollInfo.percentage > -0.1}
                     <span
-                        class="web-badges text-micro uppercase text-white"
+                        class="web-badges text-micro uppercase !text-white"
                         transition:slide={{ axis: 'x' }}>Products_</span
                     >
 
diff --git a/src/lib/animations/Products/ProductsMobile.svelte b/src/lib/animations/Products/ProductsMobile.svelte
index 677ad1524b..720eee17b0 100644
--- a/src/lib/animations/Products/ProductsMobile.svelte
+++ b/src/lib/animations/Products/ProductsMobile.svelte
@@ -5,7 +5,7 @@
 
 <div class="outside">
     <div class="wrapper">
-        <span class="web-badges text-micro uppercase text-white">Products_</span>
+        <span class="web-badges text-micro uppercase !text-white">Products_</span>
 
         <h2 class="text-display font-aeonik-pro text-primary mt-4">
             Your backend, minus the hassle
diff --git a/src/lib/components/Accordion/Item.svelte b/src/lib/components/Accordion/Item.svelte
index c8c2ed26d9..e06749c793 100644
--- a/src/lib/components/Accordion/Item.svelte
+++ b/src/lib/components/Accordion/Item.svelte
@@ -5,7 +5,9 @@
 
 <li class="collapsible-item">
     <details class="collapsible-wrapper group" {open}>
-        <summary class="collapsible-button flex cursor-pointer items-center justify-between">
+        <summary
+            class="collapsible-button flex cursor-pointer list-none appearance-none items-center justify-between marker:hidden [&::-webkit-details-marker]:hidden"
+        >
             <span class="text">{title}</span>
             <div class="icon text-primary transition-transform group-[&[open]]:rotate-180">
                 <span class="icon-cheveron-down" aria-hidden="true" />
diff --git a/src/lib/components/IsLoggedIn.svelte b/src/lib/components/IsLoggedIn.svelte
index 0da05fc657..1331ef4372 100644
--- a/src/lib/components/IsLoggedIn.svelte
+++ b/src/lib/components/IsLoggedIn.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
     import Button from './ui/Button.svelte';
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
+    import { classNames } from '$lib/utils/classnames';
 
     export let classes = '';
 </script>
 
-<Button class={classes} href={PUBLIC_APPWRITE_DASHBOARD}>
+<a
+    class={classNames('web-button web-u-inline-width-100-percent-mobile', classes)}
+    href={PUBLIC_APPWRITE_DASHBOARD}
+>
     <span class="hidden group-[&[data-logged-in]]/body:block">Go to Console</span>
     <span class="block group-[&[data-logged-in]]/body:hidden">Get started</span>
-</Button>
+</a>
diff --git a/src/lib/layouts/DocsArticle.svelte b/src/lib/layouts/DocsArticle.svelte
index aa8d034ee7..9281b413ab 100644
--- a/src/lib/layouts/DocsArticle.svelte
+++ b/src/lib/layouts/DocsArticle.svelte
@@ -54,7 +54,7 @@
                             />
                         </a>
                     {/if}
-                    <h1 class="text-title font-aeonik-pro">{title}</h1>
+                    <h1 class="text-title font-aeonik-pro text-primary">{title}</h1>
                 </div>
             </div>
             <div class="web-article-header-end" />
diff --git a/src/markdoc/nodes/Heading.svelte b/src/markdoc/nodes/Heading.svelte
index 95b902f88f..1d0750fd30 100644
--- a/src/markdoc/nodes/Heading.svelte
+++ b/src/markdoc/nodes/Heading.svelte
@@ -12,7 +12,7 @@
     const ctx = hasContext('headings') ? getContext<LayoutContext>('headings') : undefined;
     const classList: Record<typeof level, string> = {
         1: 'text-label mb-4 mt-8',
-        2: 'text-description',
+        2: 'text-description mb-4',
         3: 'text-body font-medium',
         4: 'text-sub-body font-medium'
     };
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c23fa4297c..9cae72a5ba 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -145,13 +145,13 @@
                             Functions, Storage, and Messaging to your projects using the frameworks
                             and languages of your choice.
                         </svelte:fragment>
-                        <Button
+                        <a
                             href={PUBLIC_APPWRITE_DASHBOARD}
-                            class="mt-8 w-full lg:w-fit"
+                            class="web-button mt-8 w-full lg:w-fit"
                             slot="cta"
                         >
                             Get started
-                        </Button>
+                        </a>
                     </Hero>
                 </section>
             </div>
@@ -170,7 +170,7 @@
             <div class="mb-12 lg:my-[7.5rem]">
                 <div class="container">
                     <h2
-                        class="text-title font-aeonik-pro text-primary text-center web-u-max-width-600 mx-auto"
+                        class="text-title font-aeonik-pro text-primary web-u-max-width-600 mx-auto text-center"
                     >
                         Trusted by developers from the world's leading organizations
                     </h2>
@@ -303,10 +303,10 @@
                     </section>
                     <div class="mt-20 overflow-hidden">
                         <ul
-                            class="web-info-boxes text-sub-body font-medium divide-x divide-y divide-black/[0.04]"
+                            class="web-info-boxes text-sub-body divide-x divide-y divide-black/[0.04] font-medium"
                         >
                             {#each infoBoxes as box}
-                                <li class="relative p-8 last-of-type:border-r border-black/[0.04]">
+                                <li class="relative border-black/[0.04] p-8 last-of-type:border-r">
                                     <img src={box.icon} width="40" height="40" alt="" />
                                     <h3
                                         class="text-primary mt-4 flex flex-wrap items-baseline gap-3"
@@ -450,7 +450,7 @@
                             you can code with the language you want at any time.
                         </p>
                         <Technologies />
-                        <Button href="/docs/sdks" variant="secondary">Explore all SDKs</Button>
+                        <a href="/docs/sdks" class="web-button is-secondary">Explore all SDKs</a>
                     </section>
                 </div>
             </div>
diff --git a/src/routes/pricing/faq.svelte b/src/routes/pricing/faq.svelte
index cb6cdfb4ae..d78426b8a4 100644
--- a/src/routes/pricing/faq.svelte
+++ b/src/routes/pricing/faq.svelte
@@ -88,7 +88,7 @@
                             class="flex w-full items-center justify-between gap-2.5 py-6 text-left"
                             use:melt={$trigger(`${index}`)}
                         >
-                            <span class="text-label text-primary">
+                            <span class="text-label font-aeonik-pro text-primary">
                                 {faqItem.question}
                             </span>
                             <div
@@ -115,7 +115,7 @@
                 </div>
             {:else}
                 <details class="collapsible-wrapper" open={index === 0}>
-                    <summary class="collapsible-button">
+                    <summary class="collapsible-button appearance-none">
                         <span class="text-label text-primary">
                             {faqItem.question}
                         </span>
diff --git a/src/routes/startups/faq.svelte b/src/routes/startups/faq.svelte
index a83ae95728..88bfa6c45a 100644
--- a/src/routes/startups/faq.svelte
+++ b/src/routes/startups/faq.svelte
@@ -93,7 +93,7 @@
                             class="flex w-full items-center justify-between gap-2.5 py-6 text-left"
                             use:melt={$trigger(`${index}`)}
                         >
-                            <span class="text-label text-primary">
+                            <span class="text-label font-aeonik-pro text-primary">
                                 {faqItem.question}
                             </span>
                             <div
@@ -120,7 +120,7 @@
                 </div>
             {:else}
                 <details class="collapsible-wrapper" open={index === 0}>
-                    <summary class="collapsible-button">
+                    <summary class="collapsible-button appearance-none">
                         <span class="text-label text-primary">
                             {faqItem.question}
                         </span>
