diff --git a/src/routes/zhen/+page.svelte b/src/routes/zhen/+page.svelte
index e492cff..f21056c 100644
--- a/src/routes/zhen/+page.svelte
+++ b/src/routes/zhen/+page.svelte
@@ -1,108 +1,5 @@
 <script lang="ts">
-    import { onMount } from "svelte";
-    import { Vector2 } from "./Utils/Vector2";
-
-    // Params
-    let mouseMoveScale: number = 0.5;
-
-    // Site variables
-    let mousePos: Vector2;
-
-    // Element binded variables
-    let mouseRelativeScaled: Vector2 = new Vector2(0, 0);
-
-    let windowWidth = 0;
-    let windowHeight = 0;
-
-    let screenCenter: Vector2;
-
-    let StartPageAnimated: Element;
-    let windowRef: Window;
-
-    function onMouseMoved(event: MouseEvent) {
-        mousePos = new Vector2(event.clientX, event.clientY);
-
-        updateAnimation(mousePos);
-    }
-
-    function updateAnimation(mousePos: Vector2) {
-        let mouseRelativePos = mousePos.Sub(screenCenter);
-        mouseRelativeScaled = mouseRelativePos.Scale(mouseMoveScale);
-
-        //console.log(mouseRelativePos.x+"\n"+mouseRelativePos.y);
-    }
-
-    onMount(() => {
-        windowRef = window;
-
-        const updateDimensions = () => {
-            windowWidth = windowRef.innerWidth;
-            windowHeight = windowRef.innerHeight;
-
-            screenCenter = new Vector2(windowWidth / 2, windowHeight / 2);
-
-            //console.log("Window size changed: (" + windowWidth + ", " + windowHeight + ")");
-        };
-
-        updateDimensions(); // On first pass
-
-        windowRef.addEventListener("resize", updateDimensions);
-
-        return () => {
-            windowRef.removeEventListener("resize", updateDimensions);
-        };
-    });
+    import TopAnimatedBackground from "./Comps/TopAnimatedBackground.svelte";
 </script>
 
-<svelte:window on:mousemove={onMouseMoved} />
-
-<div class="StartPageContainer">
-    <div
-        class="StartPageAnimated"
-        bind:this={StartPageAnimated}
-        style="transform: translate(calc({mouseRelativeScaled.x}px), {mouseRelativeScaled.y}px);"
-    >
-
-        <span
-            class="rotate45"
-            style="display: flex; justify-content: center; align-items: center;"
-            >TEXT!!!</span
-        >
-    </div>
-</div>
-
-<style>
-    .StartPageContainer {
-        height: 40vh;
-
-        background-color: burlywood;
-        overflow: hidden;
-        position: relative;
-
-        justify-content: center;
-        align-items: center;
-        display: flex;
-
-        padding: 0;
-    }
-
-    .StartPageAnimated {
-        background: url("https://i1.adis.ws/i/canon/future_of_forests_header_16x9_dc14bbe1e35040f79bf566eedaf5c8f7?$hero-header-half-16by9-dt$");
-        background-color: aqua;
-        position: absolute;
-        height: 150vh;
-        width: 150vw;
-
-        padding: 0;
-
-        transition: all 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
-
-        justify-content: center;
-        vertical-align: middle;
-        display: flex;
-    }
-
-    .rotate45 {
-        transform: rotate(-45deg); /* Rotate the element by 45 degrees */
-    }
-</style>
+<TopAnimatedBackground/>
diff --git a/src/routes/zhen/Comps/TopAnimatedBackground.svelte b/src/routes/zhen/Comps/TopAnimatedBackground.svelte
new file mode 100644
index 0000000..bbd718d
--- /dev/null
+++ b/src/routes/zhen/Comps/TopAnimatedBackground.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { Vector2 } from "./../Utils/Vector2";
+    //import { throttle } from "./../Utils/Throttle";
+
+    // Params
+    let mouseMoveScale: number = 0.25;
+
+    // Site variables
+    let mousePos: Vector2;
+
+    // Element binded variables
+    let mouseRelativeScaled: Vector2 = new Vector2(0, 0);
+
+    let windowWidth = 0;
+    let windowHeight = 0;
+
+    let screenCenter: Vector2;
+
+    let StartPageAnimated: Element;
+    let windowRef: Window;
+
+    function onMouseMoved(event: MouseEvent) {
+        mousePos = new Vector2(event.clientX, event.clientY);
+
+        updateAnimation(mousePos);
+    }
+
+    function updateAnimation(mousePos: Vector2) {
+        let mouseRelativePos = mousePos.Sub(screenCenter);
+        mouseRelativeScaled = mouseRelativePos.Scale(mouseMoveScale);
+
+        //console.log(mouseRelativePos.x+"\n"+mouseRelativePos.y);
+    }
+
+    onMount(() => {
+        windowRef = window;
+
+        const updateDimensions = () => {
+            windowWidth = windowRef.innerWidth;
+            windowHeight = windowRef.innerHeight;
+
+            screenCenter = new Vector2(windowWidth / 2, windowHeight / 2);
+
+            //console.log("Window size changed: (" + windowWidth + ", " + windowHeight + ")");
+        };
+
+        updateDimensions(); // On first pass
+
+        windowRef.addEventListener("resize", updateDimensions);
+
+        return () => {
+            windowRef.removeEventListener("resize", updateDimensions);
+        };
+    });
+</script>
+
+<svelte:window on:mousemove={onMouseMoved} />
+
+<div class="StartPageContainer">
+    <div
+        class="StartPageAnimated"
+        bind:this={StartPageAnimated}
+        style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px);"
+    >
+
+        <span
+            class="rotate45"
+            style="display: flex; justify-content: center; align-items: center;"
+            >TEXT!!!</span
+        >
+    </div>
+</div>
+
+<style>
+    .StartPageContainer {
+        height: 40vh;
+
+        background-color: burlywood;
+        overflow: hidden;
+        position: relative;
+
+        justify-content: center;
+        align-items: center;
+        display: flex;
+
+        padding: 0;
+    }
+
+    .StartPageAnimated {
+        background: url("https://i1.adis.ws/i/canon/future_of_forests_header_16x9_dc14bbe1e35040f79bf566eedaf5c8f7?$hero-header-half-16by9-dt$");
+        background-color: aqua;
+        position: absolute;
+        height: 150vh;
+        width: 150vw;
+
+        padding: 0;
+
+        transition: all 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
+
+        justify-content: center;
+        vertical-align: middle;
+        display: flex;
+    }
+
+    .rotate45 {
+        transform: rotate(-45deg); /* Rotate the element by 45 degrees */
+    }
+</style>
diff --git a/src/routes/zhen/Utils/Throttle.js b/src/routes/zhen/Utils/Throttle.js
new file mode 100644
index 0000000..318512c
--- /dev/null
+++ b/src/routes/zhen/Utils/Throttle.js
@@ -0,0 +1,21 @@
+export function throttle(callback, wait) {
+    let timeoutId = null;
+    let lastExecutedTime = 0;
+  
+    return function (...args) {
+      const currentTime = Date.now();
+  
+      const execute = () => {
+        lastExecutedTime = currentTime;
+        callback.apply(this, args);
+      };
+  
+      if (currentTime - lastExecutedTime >= wait) {
+        execute();
+      } else {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(execute, wait - (currentTime - lastExecutedTime));
+      }
+    };
+  }
+  
\ No newline at end of file