diff --git a/src/markdoc/layouts/Author.svelte b/src/markdoc/layouts/Author.svelte
index e15365116d2..562981715ad 100644
--- a/src/markdoc/layouts/Author.svelte
+++ b/src/markdoc/layouts/Author.svelte
@@ -47,8 +47,7 @@
 <Main>
     <div class="aw-big-padding-section-level-1 u-position-relative u-overflow-hidden">
         <div
-            class="u-position-absolute"
-            style="pointer-events:none;inset-inline-start:0; inset-block-end:0;"
+            class="u-position-absolute u-inset-inline-start-0 u-inset-block-end-0 aw-u-pointer-events-none"
         >
             <svg
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/src/routes/assets/+page.svelte b/src/routes/assets/+page.svelte
index d82dec6a63c..8ab17faf6e4 100644
--- a/src/routes/assets/+page.svelte
+++ b/src/routes/assets/+page.svelte
@@ -54,7 +54,7 @@
     <meta name="twitter:card" content="summary_large_image" />
 </svelte:head>
 
-<div class="u-position-absolute" style="pointer-events:none;">
+<div class="u-position-absolute aw-u-pointer-events-none">
     <enhanced:img src="./bg.png" alt="" />
 </div>
 
@@ -67,8 +67,7 @@
                     <button
                         class="u-flex u-width-full-line aw-u-padding-block-20
                         aw-u-color-text-primary aw-is-only-mobile
-                       aw-u-margin-inline-32-negative u-margin-block-start-24 aw-u-sep-block"
-                        style="inline-size:100vw"
+                       aw-u-margin-inline-32-negative u-margin-block-start-24 aw-u-sep-block u-width-full-line"
                     >
                         <span
                             class="aw-container u-flex u-width-full-line u-main-space-between u-cross-center"
@@ -95,7 +94,7 @@
                         </section>
 
                         <section id={getSectionId(Section.NAMING)}>
-                            <div class="u-flex u-flex-vertical u-gap-8">
+                            <div class="u-flex aw-u-flex-vertical u-gap-8">
                                 <h2
                                     class="aw-title aw-u-color-text-primary"
                                     use:visible={{ top: 48 }}
@@ -112,7 +111,7 @@
                         </section>
 
                         <section id={getSectionId(Section.LOGOTYPE)}>
-                            <div class="u-flex u-flex-vertical u-gap-8">
+                            <div class="u-flex aw-u-flex-vertical u-gap-8">
                                 <h2
                                     class="aw-title aw-u-color-text-primary"
                                     use:visible={{ top: 48 }}
@@ -128,8 +127,8 @@
                                 <div class="u-flex u-flex-wrap u-gap-32 u-margin-block-start-12">
                                     <div
                                         class="media-wrapper | theme-light |
-                                    u-stretch aw-u-flex-basis-300 u-flex u-main-center u-cross-center aw-u-border-radius-8 aw-u-padding-inline-64"
-                                        style="background-color:hsl(var(--aw-color-greyscale-100)); block-size:20rem;"
+                                    u-stretch aw-u-flex-basis-300 u-flex u-main-center u-cross-center aw-u-border-radius-8 aw-u-padding-inline-64
+                                    aw-u-bg-color-neutral-100 aw-u-block-size-320"
                                     >
                                         <img
                                             src="/assets/logotype/white.svg"
@@ -162,8 +161,8 @@
                                     </div>
                                     <div
                                         class="media-wrapper | theme-dark |
-                                    u-stretch aw-u-flex-basis-300 u-flex u-main-center u-cross-center aw-u-border-radius-8 aw-u-padding-inline-64"
-                                        style="background-color:hsl(var(--aw-color-greyscale-800)); block-size:20rem;"
+                                    u-stretch aw-u-flex-basis-300 u-flex u-main-center u-cross-center aw-u-border-radius-8 aw-u-padding-inline-64
+                                    aw-u-bg-color-neutral-800 aw-u-block-size-320"
                                     >
                                         <img
                                             src="/assets/logotype/black.svg"
@@ -197,7 +196,7 @@
                                 </div>
                             </div>
                             <section>
-                                <div class="u-flex u-flex-vertical u-gap-8">
+                                <div class="u-flex aw-u-flex-vertical u-gap-8">
                                     <h3 class="aw-label aw-u-color-text-primary">
                                         Co-branding logotypes
                                     </h3>
@@ -207,8 +206,8 @@
                                         collection of shapes.
                                     </p>
                                     <div
-                                        class="u-flex u-main-center u-cross-center u-margin-block-start-12 aw-u-border-radius-8 u-padding-inline-16"
-                                        style="background-color:hsl(var(--aw-color-greyscale-800)); block-size:20rem;"
+                                        class="u-flex u-main-center u-cross-center u-margin-block-start-12 aw-u-border-radius-8 u-padding-inline-16
+                                                aw-u-bg-color-neutral-800 aw-u-block-size-320"
                                     >
                                         <img
                                             src="/assets/logotype/co-brand.svg"
@@ -220,7 +219,7 @@
                         </section>
 
                         <section id={getSectionId(Section.LOGOMARK)}>
-                            <div class="u-flex u-flex-vertical u-gap-8">
+                            <div class="u-flex aw-u-flex-vertical u-gap-8">
                                 <h3
                                     class="aw-title aw-u-color-text-primary"
                                     use:visible={{ top: 48 }}
@@ -237,8 +236,8 @@
                                 <div class="u-flex u-flex-wrap u-gap-32 u-margin-block-start-12">
                                     <div
                                         class="media-wrapper | theme-light |
-                                    u-stretch aw-u-flex-basis-300 u-flex u-main-center u-cross-center aw-u-border-radius-8 aw-u-padding-inline-64"
-                                        style="background-color:hsl(var(--aw-color-greyscale-100)); block-size:20rem;"
+                                    u-stretch aw-u-flex-basis-300 u-flex u-main-center u-cross-center aw-u-border-radius-8 aw-u-padding-inline-64
+                                    aw-u-bg-color-neutral-100 aw-u-block-size-320"
                                     >
                                         <img
                                             src="/assets/logomark/logo.svg"
@@ -271,8 +270,8 @@
                                     </div>
                                     <div
                                         class="media-wrapper | theme-dark |
-                                    u-stretch aw-u-flex-basis-300 u-flex u-main-center u-cross-center aw-u-border-radius-8 aw-u-padding-inline-64"
-                                        style="background-color:hsl(var(--aw-color-greyscale-800)); block-size:20rem;"
+                                    u-stretch aw-u-flex-basis-300 u-flex u-main-center u-cross-center aw-u-border-radius-8 aw-u-padding-inline-64
+                                    aw-u-bg-color-neutral-800 aw-u-block-size-320"
                                     >
                                         <img
                                             src="/assets/logomark/logo.svg"
@@ -306,7 +305,7 @@
                                 </div>
                             </div>
                             <section id="">
-                                <div class="u-flex u-flex-vertical u-gap-8">
+                                <div class="u-flex aw-u-flex-vertical u-gap-8">
                                     <h3 class="aw-label aw-u-color-text-primary">
                                         Co-branding lockups
                                     </h3>
@@ -316,8 +315,8 @@
                                         collection of shapes.
                                     </p>
                                     <div
-                                        class="u-flex u-main-center u-cross-center u-margin-block-start-12 aw-u-border-radius-8 u-padding-inline-16"
-                                        style="background-color:hsl(var(--aw-color-greyscale-800)); block-size:20rem;"
+                                        class="u-flex u-main-center u-cross-center u-margin-block-start-12 aw-u-border-radius-8 u-padding-inline-16
+                                                aw-u-bg-color-neutral-800 aw-u-block-size-320"
                                     >
                                         <img
                                             src="/assets/logomark/co-brand.svg"
@@ -338,10 +337,9 @@
                             </h2>
                             <div class="u-flex u-flex-wrap u-gap-32">
                                 <div
-                                    class="media-wrapper | u-stretch aw-u-flex-basis-200 u-flex-vertical u-main-center u-gap-8
-                                aw-u-border-radius-8 u-padding-inline-24"
-                                    style="color:hsl(var(--aw-color-greyscale-900)); background-color:#EDEDF0; 
-                                aspect-ratio: 1/1; min-block-size: 10rem;"
+                                    class="media-wrapper | u-stretch aw-u-flex-basis-200 aw-u-flex-vertical u-main-center u-gap-8
+                                aw-u-border-radius-8 u-padding-inline-24 aw-u-text-color-neutral-900 aw-u-bg-color-neutral-50
+                                aw-u-media-ratio-1-1 aw-u-min-block-size-160"
                                 >
                                     <h3 class="aw-label">Light Grey</h3>
                                     <p class="aw-caption-400">#EDEDF0</p>
@@ -350,10 +348,9 @@
                                     </div>
                                 </div>
                                 <div
-                                    class="media-wrapper | aw-u-sep u-stretch aw-u-flex-basis-200 u-flex-vertical u-main-center
-                                u-gap-8 aw-u-border-radius-8 u-padding-inline-24"
-                                    style="color:hsl(var(--aw-color-greyscale-50)); background-color:#19191D;
-                                aspect-ratio: 1/1; min-block-size: 10rem;"
+                                    class="media-wrapper | aw-u-sep u-stretch aw-u-flex-basis-200 aw-u-flex-vertical u-main-center
+                                u-gap-8 aw-u-border-radius-8 u-padding-inline-24 aw-u-media-ratio-1-1 aw-u-min-block-size-160
+                                aw-u-text-color-neutral-50 aw-u-bg-color-neutral-900"
                                 >
                                     <h3 class="aw-label">Dark Grey</h3>
                                     <p class="aw-caption-400">#19191D</p>
@@ -362,10 +359,9 @@
                                     </div>
                                 </div>
                                 <div
-                                    class="media-wrapper | u-stretch aw-u-flex-basis-200 u-flex-vertical u-main-center u-gap-8
-                                aw-u-border-radius-8 u-padding-inline-24"
-                                    style="color:hsl(var(--aw-color-greyscale-50)); background-color:#FD366E;
-                                aspect-ratio: 1/1; min-block-size: 10rem;"
+                                    class="media-wrapper | u-stretch aw-u-flex-basis-200 aw-u-flex-vertical u-main-center u-gap-8
+                                aw-u-border-radius-8 u-padding-inline-24 aw-u-text-color-neutral-50 aw-u-bg-color-primary-500
+                                aw-u-aspect-ratio-1-1 aw-u-min-block-size-160"
                                 >
                                     <h3 class="aw-label">Appwrite Pink</h3>
                                     <p class="aw-caption-400">#FD366E</p>
@@ -377,7 +373,7 @@
                         </section>
 
                         <section id={getSectionId(Section.VISUALS)}>
-                            <div class="u-flex u-flex-vertical u-gap-8">
+                            <div class="u-flex aw-u-flex-vertical u-gap-8">
                                 <h2
                                     class="aw-title aw-u-color-text-primary"
                                     use:visible={{ top: 48 }}
@@ -552,7 +548,7 @@
                         </section>
 
                         <section id={getSectionId(Section.CONTACT)}>
-                            <div class="u-flex u-flex-vertical u-gap-8">
+                            <div class="u-flex aw-u-flex-vertical u-gap-8">
                                 <h2
                                     class="aw-title aw-u-color-text-primary"
                                     use:visible={{ top: 48 }}
diff --git a/src/routes/brand-launch/+page.svelte b/src/routes/brand-launch/+page.svelte
index 81cc02738db..3bd01b0897d 100644
--- a/src/routes/brand-launch/+page.svelte
+++ b/src/routes/brand-launch/+page.svelte
@@ -128,8 +128,7 @@
                             class="u-stretch u-flex aw-u-margin-inline-auto-mobile aw-u-margin-block-start-40-mobile"
                         >
                             <img
-                                style="margin-block-start:-0.5rem"
-                                class="u-margin-inline-start-auto u-width-full-line u-max-width-500"
+                                class="aw-u-margin-block-start-8-negative u-margin-inline-start-auto u-width-full-line u-max-width-500"
                                 src="/images/pages/brand-lunch/box.png"
                                 alt=""
                             />
@@ -181,13 +180,12 @@
         >
             <div class="u-position-absolute u-inset-inline-start-0">
                 <svg
-                    class="aw-u-opacity-40-mobile"
+                    class="aw-u-opacity-40-mobile u-max-width-100-percent aw-u-max-height-100-percent"
                     xmlns="http://www.w3.org/2000/svg"
                     width="698"
                     height="900"
                     viewBox="0 0 698 900"
                     fill="none"
-                    style="max-inline-size:100%; max-block-size:100%;"
                 >
                     <g opacity="0.3" filter="url(#filter0_f_3260_125165)">
                         <ellipse
@@ -323,13 +321,12 @@
             </div>
             <div class="u-position-absolute u-inset-inline-end-0">
                 <svg
-                    class="aw-u-opacity-40-mobile"
+                    class="aw-u-opacity-40-mobile u-max-width-100-percent aw-u-max-height-100-percent"
                     xmlns="http://www.w3.org/2000/svg"
                     width="874"
                     height="900"
                     viewBox="0 0 874 900"
                     fill="none"
-                    style="max-inline-size:100%; max-block-size:100%;"
                 >
                     <g opacity="0.4" filter="url(#filter0_f_3260_125160)">
                         <path
@@ -476,13 +473,12 @@
         >
             <div class="u-position-absolute u-inset-inline-start-0">
                 <svg
-                    class="aw-u-opacity-40-mobile"
+                    class="aw-u-opacity-40-mobile u-max-width-100-percent aw-u-max-height-100-percent"
                     xmlns="http://www.w3.org/2000/svg"
                     width="698"
                     height="900"
                     viewBox="0 0 698 900"
                     fill="none"
-                    style="max-inline-size:100%; max-block-size:100%;"
                 >
                     <g opacity="0.3" filter="url(#filter0_f_3260_125165)">
                         <ellipse
@@ -618,13 +614,12 @@
             </div>
             <div class="u-position-absolute u-inset-inline-end-0">
                 <svg
-                    class="aw-u-opacity-40-mobile"
+                    class="aw-u-opacity-40-mobile u-max-width-100-percent aw-u-max-height-100-percent"
                     xmlns="http://www.w3.org/2000/svg"
                     width="874"
                     height="900"
                     viewBox="0 0 874 900"
                     fill="none"
-                    style="max-inline-size:100%; max-block-size:100%;"
                 >
                     <g opacity="0.4" filter="url(#filter0_f_3260_125160)">
                         <path
diff --git a/src/routes/community/+page.svelte b/src/routes/community/+page.svelte
index 2e2858f64d7..10edb88d4ee 100644
--- a/src/routes/community/+page.svelte
+++ b/src/routes/community/+page.svelte
@@ -141,10 +141,9 @@
     <div class="aw-big-padding-section u-overflow-hidden">
         <div class="aw-big-padding-section-level-1 u-position-relative u-overflow-hidden">
             <div
-                class="u-position-absolute aw-u-hide-mobile"
+                class="u-position-absolute aw-u-z-index-1-negative aw-u-hide-mobile"
                 style:inline-size="704px"
                 style:block-size="670px"
-                style:z-index="-1"
                 style:left="calc((50% - 704px / 2) + 18rem)"
                 style:top="-4rem"
             >
@@ -451,7 +450,7 @@
                 <div class="aw-container">
                     <div class="aw-hero is-center">
                         <h2 class="aw-display aw-u-color-text-primary">Inspire and get inspired</h2>
-                        <p class="aw-description" style:margin-block-start="0">
+                        <p class="aw-description aw-u-margin-block-start-0">
                             Visit our showcase website built with Appwrite to find inspiration for
                             your projects or to showcase what you have built.
                         </p>
diff --git a/src/routes/community/ProjectCard.svelte b/src/routes/community/ProjectCard.svelte
index 26b7851437a..b14d3152409 100644
--- a/src/routes/community/ProjectCard.svelte
+++ b/src/routes/community/ProjectCard.svelte
@@ -18,9 +18,9 @@
     export let image: $$Props['image'];
     export let href: $$Props['href'];
 </script>
-
 <a
     class="aw-card is-white aw-u-flex-vertical u-gap-8"
+    style="--card-padding: 0.5rem;"
     {href}
     target="_blank"
     rel="noopener noreferrer"
@@ -38,9 +38,6 @@
 
 <style lang="scss">
     .aw-card {
-        --card-padding: 0.5rem;
-        border-radius: 1rem;
-
         &:hover {
             img {
                 transform: scale(1.025);
diff --git a/src/routes/threads/+page.svelte b/src/routes/threads/+page.svelte
index 38479be8187..9cf3718d0af 100644
--- a/src/routes/threads/+page.svelte
+++ b/src/routes/threads/+page.svelte
@@ -128,96 +128,103 @@
 </svelte:head>
 
 <Main>
-    <div
-        class="aw-big-padding-section-level-1 u-position-relative u-overflow-hidden"
-        style="margin-block-start: -10rem; padding-block-start: 10rem; border-block-end: 1px solid hsl(var(--aw-color-smooth));"
-    >
-        <div
-            class="u-position-absolute"
-            style="pointer-events: none; inset-inline-start: -700px; inset-block-start: 0px;"
-        >
-            <enhanced:img src="./(assets)/bg-red.svg" alt="" />
-        </div>
-        <div
-            class="u-position-absolute"
-            style="pointer-events: none; inset-inline-end: -700px; inset-block-start: -400px;"
-        >
-            <enhanced:img src="./(assets)/bg-green.svg" alt="" />
-        </div>
-        <div class="aw-big-padding-section-level-2 u-position-relative aw-u-margin-block-80">
-            <div class="aw-container">
-                <h1 class="aw-display aw-u-color-text-primary">Threads</h1>
-            </div>
-        </div>
-    </div>
 
-    <div class="aw-container" style="padding-block-end: 5rem">
-        <div class="u-flex u-flex-wrap u-cross-center u-gap-32">
-            <ul class="u-flex u-flex-wrap u-gap-8">
-                {#each tags as tag}
-                    <li style="display: flex; align-items: center;">
-                        <button
-                            class="aw-btn-tag"
-                            class:is-selected={selectedTags?.includes(tag)}
-                            on:click={() => toggleTag(tag)}
+    <div class="w-big-padding-section">
+        <div class="aw-big-padding-section-level-1">
+            <div class="aw-big-padding-section-level-2 u-position-relative u-overflow-hidden aw-u-margin-block-0 aw-u-sep-block-end">
+                <div
+                        class="u-position-absolute"
+                        style="pointer-events: none; inset-inline-start: -700px; inset-block-start: 0px;"
+                >
+                    <enhanced:img src="./(assets)/bg-red.svg" alt="" />
+                </div>
+                <div
+                        class="u-position-absolute"
+                        style="pointer-events: none; inset-inline-end: -700px; inset-block-start: -400px;"
+                >
+                    <enhanced:img src="./(assets)/bg-green.svg" alt="" />
+                </div>
+
+                <div class="aw-container">
+                    <h1 class="aw-display aw-u-color-text-primary aw-u-margin-block-80 aw-u-padding-block-end-40">Threads</h1>
+                </div>
+
+            </div>
+            <div class="aw-big-padding-section-level-2 aw-u-margin-block-start-24">
+                <div class="aw-container">
+                    <div class="u-flex u-flex-wrap u-cross-center u-gap-32">
+                        <ul class="u-flex u-flex-wrap u-gap-8">
+                            {#each tags as tag}
+                                <li class="u-flex u-cross-center">
+                                    <button
+                                            class="aw-btn-tag"
+                                            class:is-selected={selectedTags?.includes(tag)}
+                                            on:click={() => toggleTag(tag)}
+                                    >
+                                        {tag}
+                                    </button>
+                                </li>
+                            {/each}
+                            <li>
+                                <TagsDropdown tags={moreTags} selectedTags={selectedTags ?? []} {toggleTag} />
+                            </li>
+                        </ul>
+                        <div
+                                class="aw-input-text-search-wrapper u-width-full-line u-max-width-350 aw-u-max-inline-size-none-mobile u-margin-inline-start-auto"
                         >
-                            {tag}
-                        </button>
-                    </li>
-                {/each}
-                <li>
-                    <TagsDropdown tags={moreTags} selectedTags={selectedTags ?? []} {toggleTag} />
-                </li>
-            </ul>
-            <div
-                class="aw-input-text-search-wrapper u-width-full-line u-max-width-350 aw-u-max-inline-size-none-mobile u-margin-inline-start-auto"
-            >
                 <span
-                    class="aw-icon-search u-z-index-5"
-                    aria-hidden="true"
-                    style="inset-block-start:0.9rem"
-                />
-                <input
-                    class="aw-input-button -u-padding-block-0 u-position-relative u-z-index-1"
-                    type="text"
-                    id="search"
-                    placeholder="Search for threads"
-                    data-hit="-1"
-                    use:search
-                    bind:value={query}
+                        class="aw-icon-search u-z-index-5"
+                        aria-hidden="true"
+                        style="inset-block-start:0.9rem"
                 />
-            </div>
-        </div>
-
-        {#if threads.length}
-            <h2 class="u-margin-block-start-16 aw-u-color-text-primary" aria-live="polite">
-                Found {query.length ? threads.length : '5000+'} results.
-            </h2>
-        {/if}
-
-        <div class="u-flex-vertical u-gap-16 u-margin-block-start-16">
-            {#each threads as thread (thread.$id)}
-                <ThreadCard {thread} {query} />
-            {:else}
-                <div class="aw-card is-normal has-border-gradient empty-card">
-                    <enhanced:img class="img" src="./(assets)/empty-state.png" alt="" />
-                    <span class="aw-main-body-500">No support threads found</span>
-                    <button
-                        class="aw-button"
-                        on:click={() => {
+                            <input
+                                    class="aw-input-button -u-padding-block-0 u-position-relative u-z-index-1"
+                                    type="text"
+                                    id="search"
+                                    placeholder="Search for threads"
+                                    data-hit="-1"
+                                    use:search
+                                    bind:value={query}
+                            />
+                        </div>
+                    </div>
+
+                    {#if threads.length}
+                        <h2 class="u-margin-block-start-16 aw-u-color-text-primary" aria-live="polite">
+                            Found {query.length ? threads.length : '5000+'} results.
+                        </h2>
+                    {/if}
+
+                    <div class="u-flex-vertical u-gap-16 u-margin-block-start-16">
+                        {#each threads as thread (thread.$id)}
+                            <ThreadCard {thread} {query} />
+                        {:else}
+                            <div class="aw-card is-normal has-border-gradient empty-card">
+                                <enhanced:img class="img" src="./(assets)/empty-state.png" alt="" />
+                                <span class="aw-main-body-500">No support threads found</span>
+                                <button
+                                        class="aw-button"
+                                        on:click={() => {
                             query = '';
                             handleSearch('');
                         }}>Clear search</button
-                    >
+                                >
+                            </div>
+                        {/each}
+                    </div>
                 </div>
-            {/each}
+            </div>
+            <div class="aw-big-padding-section-level-2 aw-u-margin-block-end-0">
+                <PreFooter />
+            </div>
+            <div class="aw-big-padding-section-level-2 aw-u-margin-block-start-100-negative">
+                <div class="aw-container">
+                    <FooterNav />
+                    <MainFooter />
+                </div>
+            </div>
         </div>
     </div>
-    <PreFooter />
-    <div class="aw-container" style="margin-block-start: -7.75rem;">
-        <FooterNav />
-        <MainFooter />
-    </div>
 </Main>
 
 <style lang="scss">
diff --git a/src/routes/threads/PreFooter.svelte b/src/routes/threads/PreFooter.svelte
index b128455d641..3b9e25249bc 100644
--- a/src/routes/threads/PreFooter.svelte
+++ b/src/routes/threads/PreFooter.svelte
@@ -1,5 +1,5 @@
 <div class="wrapper">
-    <img src="/images/bgs/pre-footer.png" alt="" class="aw-pre-footer-bg" style="z-index:-1" />
+    <img src="/images/bgs/pre-footer.png" alt="" class="aw-pre-footer-bg aw-u-z-index-1-negative" />
     <div class="aw-container">
         <h2 class="aw-display aw-u-color-text-primary">Need support?</h2>
         <div class="cards">
diff --git a/src/routes/threads/TagsDropdown.svelte b/src/routes/threads/TagsDropdown.svelte
index 44a3f1d9a1f..378879834de 100644
--- a/src/routes/threads/TagsDropdown.svelte
+++ b/src/routes/threads/TagsDropdown.svelte
@@ -12,13 +12,12 @@
 <DropdownMenu let:open let:menu let:trigger>
     <button class="aw-btn-tag" use:melt={trigger}>
         <span class="text">More</span>
-        <span class="aw-icon-chevron-down" style="font-size: 1rem" />
+        <span class="aw-icon-chevron-down aw-u-font-size-16" />
     </button>
 
     {#if open}
         <div 
-          class="menu-wrapper aw-card is-normal menu has-border-gradient"
-          style:z-index="1"
+          class="menu-wrapper aw-card is-normal menu has-border-gradient u-z-index-1"
           use:melt={menu}
           transition:fly={{ y: 8, duration: 250 }}
         >
diff --git a/src/routes/threads/ThreadCard.svelte b/src/routes/threads/ThreadCard.svelte
index f6972e36f07..227a6618339 100644
--- a/src/routes/threads/ThreadCard.svelte
+++ b/src/routes/threads/ThreadCard.svelte
@@ -14,13 +14,13 @@
         class="aw-card is-normal has-border-gradient thread"
     >
         <div class="u-flex u-gap-8">
-            <h3 class="aw-main-body-500 aw-u-color-text-primary" use:highlight={highlightTerms}>
+            <h3 class="aw-main-body-500 aw-u-color-text-primary u-break-word" use:highlight={highlightTerms}>
                 {thread.title}
             </h3>
             <!-- <time class="aw-caption-400 u-margin-inline-start-auto">12 Jan, 2023</time> -->
         </div>
 
-        <p class="aw-main-body-500 u-margin-block-start-4" use:highlight={highlightTerms}>
+        <p class="aw-main-body-500 u-margin-block-start-4 u-break-word" use:highlight={highlightTerms}>
             {thread.content.length > 200 ? thread.content.slice(0, 200) + '...' : thread.content}
         </p>
 
@@ -34,11 +34,10 @@
             </ul>
 
             <div
-                class="aw-icon-button is-more-content"
+                class="aw-icon-button is-more-content aw-u-pointer-events-none"
                 aria-label="Replies"
-                style:pointer-events="none"
             >
-                <span class="aw-icon-message" aria-hidden="true" style="font-size:1rem" />
+                <span class="aw-icon-message aw-u-font-size-16" aria-hidden="true" />
                 <span class="aw-caption-400 aw-u-line-height-1-2">{thread.message_count}</span>
             </div>
         </div>
diff --git a/src/routes/threads/[id]/+page.svelte b/src/routes/threads/[id]/+page.svelte
index 97b76d39b43..7ca755d71f6 100644
--- a/src/routes/threads/[id]/+page.svelte
+++ b/src/routes/threads/[id]/+page.svelte
@@ -36,7 +36,7 @@
 </svelte:head>
 
 <Main>
-    <div class="aw-container" style="padding-block-end: 0;">
+    <div class="aw-container aw-u-padding-block-end-0">
         <div class="header">
             <div>
                 <a class="aw-link is-secondary u-cross-baseline" href="/threads">
@@ -58,8 +58,8 @@
             </div>
             <div class="buttons">
                 <a
-                    class="aw-button"
-                    href={discordLink}
+                        class="aw-button"
+                        href={discordLink}
                 >
                     <span class="aw-icon-discord" />
                     <span class="text">View on Discord</span>
@@ -73,13 +73,10 @@
                     {@const isFirst = i === 0}
                     <MessageCard {message}>
                         {#if isFirst}
-                            <div class="aw-inline-info" style:margin-block-start="1.5rem">
-                                <span
-                                    class="aw-sub-body-500 aw-u-color-text-primary"
-                                    style:display="block"
-                                >
+                            <div class="aw-inline-info aw-u-margin-block-start-24">
+                                <div class="aw-sub-body-500 aw-u-color-text-primary">
                                     TL;DR
-                                </span>
+                                </div>
                                 {data.tldr}
                             </div>
                         {/if}
diff --git a/src/routes/threads/[id]/MessageCard.svelte b/src/routes/threads/[id]/MessageCard.svelte
index 04636bd2f27..146b72d4801 100644
--- a/src/routes/threads/[id]/MessageCard.svelte
+++ b/src/routes/threads/[id]/MessageCard.svelte
@@ -35,7 +35,7 @@
             {formatTimestamp(message.timestamp)}
         </span>
     </div>
-    <div class="aw-sub-body-500" style=" margin-block-start: 1rem;">
+    <div class="aw-sub-body-500 u-margin-block-start-16">
         <SvelteMarkdown
             source={message.message}
             renderers={{
diff --git a/src/scss/_10-utilities.scss b/src/scss/_10-utilities.scss
index 74d47857cc5..62f4e0c15af 100644
--- a/src/scss/_10-utilities.scss
+++ b/src/scss/_10-utilities.scss
@@ -48,13 +48,20 @@
 
 .#{$p}-u-margin-block-0             { margin-block:0; }
 .#{$p}-u-margin-block-80            { margin-block:pxToRem(80); }
+.#{$p}-u-margin-block-start-8-negative { margin-block-start:pxToRem(-8)!important; }
+.#{$p}-u-margin-block-start-0       { margin-block-start:0!important; }
+.#{$p}-u-margin-block-start-24      { margin-block-start:pxToRem(24); }
 .#{$p}-u-margin-block-start-40      { margin-block-start:pxToRem(40); }
 .#{$p}-u-margin-block-start-40-mobile { @media #{$break1} {margin-block-start:pxToRem(40);} }
+.#{$p}-u-margin-block-start-100-negative { margin-block-start:pxToRem(-100); }
+
+.#{$p}-u-margin-block-end-0       { margin-block-end:0!important; }
 
 
 .#{$p}-u-sep                        { border:solid pxToRem(1) hsl(var(--aw-color-smooth));}
 .#{$p}-u-sep-block                  { border-block:solid pxToRem(1) hsl(var(--aw-color-smooth));}
 .#{$p}-u-sep-block-start            { border-block-start:solid pxToRem(1) hsl(var(--aw-color-smooth));}
+.#{$p}-u-sep-block-end              { border-block-end:solid pxToRem(1) hsl(var(--aw-color-smooth));}
 .#{$p}-u-sep-inline-start-not-break1{ @media #{$break2open} { border-inline-start:solid pxToRem(1) hsl(var(--aw-color-smooth));  } }
 
 .#{$p}-u-padding-block-end-136-not-mobile { @media #{$break2open} { padding-block-end:pxToRem(136)!important;} }
@@ -74,6 +81,7 @@
 .#{$p}-u-max-width-993              { max-inline-size:pxToRem(993); }
 
 .#{$p}-u-max-height-300             { max-block-size:pxToRem(300); }
+.#{$p}-u-max-height-100-percent     { max-block-size:100%; }
 
 .#{$p}-u-trim-1           { @include trim(1); }
 .#{$p}-u-line-height-1-2         { line-height:1.2!important; }
@@ -82,6 +90,7 @@
 .#{$p}-u-size-40                  { inline-size:pxToRem(40); block-size:pxToRem(40); }
 .#{$p}-u-block-size-48            { block-size:pxToRem(48); }
 .#{$p}-u-block-size-160           { block-size:pxToRem(160); }
+.#{$p}-u-block-size-320           { block-size:pxToRem(320); }
 
 .#{$p}-u-inline-width-100-percent-mobile { @media #{$break1}, #{$break2} { inline-size:100%; } }
 .#{$p}-u-inline-width-100-percent-mobile-break1 { @media #{$break1} { inline-size:100%; } }
@@ -116,17 +125,27 @@
 
 .#{$p}-u-text-color-primary-500     { color:hsl(var(--aw-color-pink-500));   }
 .#{$p}-u-text-color-secondary-100   { color:hsl(var(--aw-color-secondary-100)); }
+.#{$p}-u-text-color-neutral-50      { color:hsl(var(--aw-color-greyscale-50));    }
 .#{$p}-u-text-color-neutral-100     { color:hsl(var(--aw-color-greyscale-100));   }
 .#{$p}-u-text-color-neutral-500     { color:hsl(var(--aw-color-greyscale-500));   }
 .#{$p}-u-text-color-neutral-700     { color:hsl(var(--aw-color-greyscale-700));   }
 .#{$p}-u-text-color-neutral-900     { color:hsl(var(--aw-color-greyscale-900));   }
 
+.#{$p}-u-bg-color-neutral-50        { background-color:hsl(var(--aw-color-greyscale-50));    }
+.#{$p}-u-bg-color-neutral-100       { background-color:hsl(var(--aw-color-greyscale-100));   }
+.#{$p}-u-bg-color-neutral-800       { background-color:hsl(var(--aw-color-greyscale-800));   }
+.#{$p}-u-bg-color-neutral-900       { background-color:hsl(var(--aw-color-greyscale-900));   }
+
+.#{$p}-u-bg-color-primary-500       { background-color:hsl(var(--aw-color-pink-500));   }
+
+.#{$p}-u-font-size-16               { font-size:#{pxToRem(16)}!important; }
 .#{$p}-u-font-size-20               { font-size:#{pxToRem(20)}!important; }
 .#{$p}-u-font-size-24               { font-size:#{pxToRem(24)}!important; }
 .#{$p}-u-font-size-40               { font-size:#{pxToRem(40)}!important; }
 
 .#{$p}-u-border-radius-12           { border-radius:pxToRem(12); }
 
+.#{$p}-u-min-block-size-160         { min-block-size:#{pxToRem(160)}!important; }
 .#{$p}-u-min-block-size-320         { min-block-size:#{pxToRem(320)}!important; }
 
 .#{$p}-u-flex-direction-column-mobile { @media #{$break1} { flex-direction:column; } }
@@ -166,10 +185,14 @@
 .#{$p}-u-cross-child-end { align-self:end!important;  }
 
 .#{$p}-u-media-cover { object-fit:cover; }
+.#{$p}-u-media-ratio-1-1  { display:block; aspect-ratio:1  / 1; object-fit:cover; }
 .#{$p}-u-media-ratio-16-9 { display:block; aspect-ratio:16 / 9; object-fit:cover; }
 
 .#{$p}-u-container-query-inline { container-type:inline-size; }
 
+.#{$p}-u-pointer-events-none { pointer-events:none; }
+.#{$p}-u-z-index-1-negative { z-index:-1; }
+
 .#{$p}-u-list-inline-dot-sep {
   >li:nth-child(n + 2)::before { content:"·"; margin-inline-start:pxToRem(8); }
 }
