diff --git a/src/lib/components/Spline.svelte b/src/lib/components/Spline.svelte
index 777d64535f1..c22ae08eb72 100644
--- a/src/lib/components/Spline.svelte
+++ b/src/lib/components/Spline.svelte
@@ -15,7 +15,15 @@
     onMount(async () => {
         await import('@splinetool/viewer');
         const onLoad = () => {
-            spline.shadowRoot?.querySelector('#logo')?.remove(); // Remove Spline logo
+            const shadowRoot = spline.shadowRoot;
+            if (shadowRoot) {
+                shadowRoot.querySelector('#logo')?.remove(); // Remove Spline logo
+                const canvas = shadowRoot.getElementById('spline');
+                if (canvas) {
+                    canvas.style.width = '100%';
+                    canvas.style.height = '100%';
+                }
+            }
 
             setTimeout(() => {
                 loaded.set(true);
diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
index acff5c4bb45..2a5bd5a05c8 100644
--- a/src/routes/docs/+page.svelte
+++ b/src/routes/docs/+page.svelte
@@ -80,9 +80,6 @@
 
 <Docs variant="default">
     <Sidebar />
-    <div class="u-position-absolute u-inset-inline-end-0 aw-u-opacity-40-mobile" style="">
-        <img src="/images/bgs/docs-blur-1.svg" alt="" />
-    </div>
 
     <div
         class="u-position-absolute aw-is-not-mobile u-only-light"
@@ -100,26 +97,11 @@
         />
     </div>
 
-    <div
-        class="u-position-absolute aw-is-not-mobile u-only-dark"
-        style:inline-size="768px"
-        style:block-size="768px"
-        style:inset-block-start="26rem"
-        style:z-index="-1"
-        style:left="calc(50% - 384px + 600px)"
-    >
-        <Spline url="/images/animations/dark-scene.splinecode" width={768} height={768}>
-            <img
-                src="/images/animations/tech-dark.png"
-                width="768"
-                height="768"
-                alt=""
-                style="position: absolute;"
-            />
-        </Spline>
-    </div>
-
     <main class="aw-main-section u-position-relative">
+        <div class="u-position-absolute aw-u-opacity-40-mobile bg-blur">
+            <img src="/images/bgs/docs-blur-1.svg" alt="" />
+        </div>
+
         <div
             class="u-position-absolute u-inset-inline-start-0 u-inset-block-start-16 aw-u-opacity-40-mobile"
             style="    margin-inline-start: -30px;"
@@ -129,25 +111,40 @@
 
         <section class="aw-hero is-align-start u-position-relative">
             <h1 class="aw-display aw-u-color-text-primary u-max-width-600">
-                Learn how to build like a team of hundreds
+                Learn how to build like a team of hundreds<span class="aw-u-color-text-accent"
+                    >_
+                </span>
             </h1>
             <p class="aw-description u-max-width-600">
-                Appwrite is a backend development platform built by hundreds of open-source
-                developers, where you can build any application at any scale using the coding
-                languages and tools you want.
+                Appwrite helps you build secure and scalable apps, faster. Leverage Appwrite's
+                powerful APIs to stop fighting technologies and start delivering value.
             </p>
         </section>
-        <section class="aw-hero is-align-start">
+        <section class="aw-hero is-align-start tech-hero">
             <h2 class="aw-title aw-u-color-text-primary u-max-width-600">
                 Get started with your technologies
             </h2>
             <p class="aw-description u-max-width-600">
-                Follow a quick start guide on your web, mobile, and native frameworks.
+                Start building with your preferred web, mobile, and native frameworks by following a
+                quick start guide.
             </p>
             <Technologies />
             <a href="/docs/sdks" class="aw-button is-secondary" style:align-self="start">
                 <span class="aw-sub-body-500">Explore all technologies</span>
             </a>
+
+            <div class="u-position-absolute aw-is-not-mobile u-only-dark spline-wrapper">
+                <Spline url="/images/animations/dark-scene.splinecode" width={660} height={660}>
+                    <img
+                        src="/images/animations/tech-dark.png"
+                        width="660"
+                        height="660"
+                        alt=""
+                        style="position: absolute;"
+                    />
+                </Spline>
+            </div>
+            <div class="bg-boi" />
         </section>
         <section>
             <h2 class="aw-title aw-u-color-text-primary u-max-width-600">Show me some code</h2>
@@ -428,3 +425,64 @@
         <MainFooter variant="docs" />
     </main>
 </Docs>
+
+<style lang="scss">
+    .aw-main-section {
+        max-inline-size: unset;
+        margin-inline: unset;
+        padding-inline-start: 3rem; // 48px
+    }
+
+    .bg-blur {
+        inset-inline-end: -300px;
+        inset-block-start: -100px;
+    }
+
+    .tech-hero {
+        @include border-block-gradient;
+
+        background: linear-gradient(to right, #19191c80, #19191c00);
+        // background-color: #19191c80;
+        backdrop-filter: blur(1rem);
+        -webkit-backdrop-filter: blur(1rem);
+
+        --m-border-size: 1px;
+        --m-border-gradient-before: linear-gradient(
+            to right,
+            hsl(var(--aw-color-smooth)) 0%,
+            hsl(var(--aw-color-smooth)) 90%,
+            transparent
+        );
+
+        max-inline-size: unset;
+        margin-block-start: 2rem;
+        margin-inline-start: -3rem;
+        padding-block: 5rem;
+        padding-inline-start: 3rem;
+
+        position: relative;
+        z-index: 10;
+
+        .spline-wrapper {
+            --p-size: 700px;
+            inline-size: var(--p-size);
+            block-size: var(--p-size);
+            inset-block-start: -3rem;
+            z-index: -1;
+            left: calc(50% - 384px + 600px);
+        }
+
+        .bg-boi {
+            position: absolute;
+            background: linear-gradient(to right, #19191c00 0%, #19191c00 10%, #19191c);
+
+            top: 0;
+            right: 10rem;
+            translate: 100%;
+            width: 25rem;
+            height: 100%;
+            content: '';
+            z-index: 9999;
+        }
+    }
+</style>
diff --git a/src/scss/abstract/mixins/_border-gradient.scss b/src/scss/abstract/mixins/_border-gradient.scss
index 2a33348a692..6f7793082c2 100644
--- a/src/scss/abstract/mixins/_border-gradient.scss
+++ b/src/scss/abstract/mixins/_border-gradient.scss
@@ -23,4 +23,33 @@
     @include border-gradient-inner;
     background: var(--m-border-gradient-after) border-box;
   }
-}
\ No newline at end of file
+}
+
+
+@mixin border-block-gradient-inner {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--m-border-radius);
+  border-block: var(--m-border-size, 1px) solid transparent;
+  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: destination-out;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+@mixin border-block-gradient {
+  position: relative;
+  border-radius: var(--m-border-radius);
+
+  &::before {
+    @include border-block-gradient-inner;
+    background: var(--m-border-gradient-before) border-box;
+  }
+
+  &::after {
+    @include border-block-gradient-inner;
+    background: var(--m-border-gradient-after) border-box;
+  }
+}
+
diff --git a/static/images/bgs/docs-blur-1.svg b/static/images/bgs/docs-blur-1.svg
index 2016b70d848..ef1c6452827 100644
--- a/static/images/bgs/docs-blur-1.svg
+++ b/static/images/bgs/docs-blur-1.svg
@@ -1,52 +1,42 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="395" height="645" viewBox="0 0 395 645" fill="none">
-  <g opacity="0.6">
-    <g opacity="0.3" filter="url(#filter0_f_2588_70942)">
-      <path
-        d="M490.888 119.115C582.97 188.753 601.165 319.853 531.527 411.935C461.89 504.018 330.79 522.213 238.707 452.575C193.573 418.442 360.66 328.3 347.404 265.83C333.616 200.849 118.572 216.378 154.076 169.43C223.714 77.3477 398.805 49.4778 490.888 119.115Z"
-        fill="url(#paint0_radial_2588_70942)" />
-    </g>
-    <g opacity="0.2" filter="url(#filter1_f_2588_70942)">
-      <ellipse cx="427.577" cy="248.547" rx="119.581" ry="41.5954" transform="rotate(-74.0791 427.577 248.547)"
-        fill="url(#paint1_radial_2588_70942)" />
-    </g>
-    <g opacity="0.2" filter="url(#filter2_f_2588_70942)">
-      <ellipse cx="413.058" cy="184.027" rx="98.4768" ry="40.0587" transform="rotate(170.022 413.058 184.027)"
-        fill="url(#paint2_radial_2588_70942)" />
-    </g>
-  </g>
-  <defs>
-    <filter id="filter0_f_2588_70942" x="0.97641" y="-69.007" width="722.02" height="713.051"
-      filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-      <feGaussianBlur stdDeviation="74.5738" result="effect1_foregroundBlur_2588_70942" />
-    </filter>
-    <filter id="filter1_f_2588_70942" x="296.3" y="53.4351" width="262.554" height="390.225"
-      filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-      <feGaussianBlur stdDeviation="39.7727" result="effect1_foregroundBlur_2588_70942" />
-    </filter>
-    <filter id="filter2_f_2588_70942" x="246.216" y="71.429" width="333.684" height="225.195"
-      filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-      <feGaussianBlur stdDeviation="34.8011" result="effect1_foregroundBlur_2588_70942" />
-    </filter>
-    <radialGradient id="paint0_radial_2588_70942" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
-      gradientTransform="translate(364.797 285.845) rotate(37.0985) scale(209.04 209.04)">
-      <stop offset="0.0625" stop-color="#FE9567" />
-      <stop offset="0.421875" stop-color="#FD366E" />
-    </radialGradient>
-    <radialGradient id="paint1_radial_2588_70942" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
-      gradientTransform="translate(427.577 248.547) rotate(90) scale(41.5954 119.581)">
-      <stop stop-color="#FE9567" />
-      <stop offset="1" stop-color="#FE9567" stop-opacity="0" />
-    </radialGradient>
-    <radialGradient id="paint2_radial_2588_70942" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
-      gradientTransform="translate(413.058 184.027) rotate(90) scale(40.0587 98.4768)">
-      <stop stop-color="#FE9567" />
-      <stop offset="1" stop-color="#FD366E" />
-    </radialGradient>
-  </defs>
-</svg>
\ No newline at end of file
+<svg width="723" height="723" viewBox="0 0 723 723" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.6">
+<g opacity="0.3" filter="url(#filter0_f_147_2)">
+<path d="M490.198 197.116C582.281 266.754 600.476 397.853 530.838 489.936C461.201 582.018 330.101 600.213 238.018 530.576C192.884 496.443 359.971 406.301 346.715 343.831C332.927 278.849 117.882 294.379 153.387 247.431C223.025 155.348 398.116 127.478 490.198 197.116Z" fill="url(#paint0_radial_147_2)"/>
+</g>
+<g opacity="0.2" filter="url(#filter1_f_147_2)">
+<ellipse cx="426.888" cy="326.547" rx="119.581" ry="41.5954" transform="rotate(-74.0791 426.888 326.547)" fill="url(#paint1_radial_147_2)"/>
+</g>
+<g opacity="0.2" filter="url(#filter2_f_147_2)">
+<ellipse cx="412.369" cy="262.027" rx="98.4768" ry="40.0587" transform="rotate(170.022 412.369 262.027)" fill="url(#paint2_radial_147_2)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_147_2" x="0.287689" y="8.99368" width="722.019" height="713.051" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="74.5738" result="effect1_foregroundBlur_147_2"/>
+</filter>
+<filter id="filter1_f_147_2" x="295.611" y="131.435" width="262.553" height="390.225" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="39.7727" result="effect1_foregroundBlur_147_2"/>
+</filter>
+<filter id="filter2_f_147_2" x="245.527" y="149.43" width="333.684" height="225.195" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="34.8011" result="effect1_foregroundBlur_147_2"/>
+</filter>
+<radialGradient id="paint0_radial_147_2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(364.108 363.846) rotate(37.0985) scale(209.04 209.04)">
+<stop offset="0.0625" stop-color="#FE9567"/>
+<stop offset="0.421875" stop-color="#FD366E"/>
+</radialGradient>
+<radialGradient id="paint1_radial_147_2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(426.888 326.547) rotate(90) scale(41.5954 119.581)">
+<stop stop-color="#FE9567"/>
+<stop offset="1" stop-color="#FE9567" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint2_radial_147_2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(412.369 262.027) rotate(90) scale(40.0587 98.4768)">
+<stop stop-color="#FE9567"/>
+<stop offset="1" stop-color="#FD366E"/>
+</radialGradient>
+</defs>
+</svg>
