diff --git a/src/layouts/LegalLayout.astro b/src/layouts/LegalLayout.astro
index 08e3a92..919d845 100644
--- a/src/layouts/LegalLayout.astro
+++ b/src/layouts/LegalLayout.astro
@@ -2,10 +2,13 @@
 import { ViewTransitions } from "astro:transitions";
 import Layout from "./Layout.astro";
 import getTranslatedContent from "@utils/directus";
+import "./LegalLayout.scss";
 
 const {lang} = Astro.params;
 const content = await getTranslatedContent("Legal_Menu", lang!);
 
+const pathname = new URL(Astro.request.url).pathname;
+
 const navItems = [
   {
     href: `/${lang}/data-protection`,
@@ -26,6 +29,7 @@ const navItems = [
 ];
 ---
 
+
 <Layout title="Scrumlr | Legal Documents">
   <div class="legal">
     <aside>
@@ -34,7 +38,7 @@ const navItems = [
           navItems.map((item) => (
             <a
               href={item.href}
-              class={Astro.url.pathname === item.href ? "active" : ""}
+              class={pathname.includes(item.href) ? "active" : ""}
             >
               {item.name}
             </a>
@@ -66,169 +70,3 @@ const navItems = [
   </div>
 </Layout>
 <ViewTransitions />
-
-<style lang="scss">
-  .legal {
-    display: flex;
-    flex-direction: row;
-    padding: 128px 8vw;
-    position: relative;
-    background: linear-gradient(90deg, #fff 0%, rgba(107, 156, 255, 0.03) 100%);
-    gap: 8vw;
-    justify-content: center;
-  }
-
-  aside {
-    display: flex;
-    flex-direction: column;
-    gap: 64px;
-    color: #333948;
-    flex-shrink: 0;
-    position: sticky;
-    top: 192px;
-    align-self: start;
-
-    nav {
-      display: flex;
-      flex-direction: column;
-      gap: 32px;
-
-      a {
-        text-decoration: none;
-        font-size: 24px;
-        line-height: 28px;
-        font-weight: 500;
-        transition: all 0.1s ease-in-out;
-
-        &:visited {
-          color: #333948;
-        }
-
-        &.active {
-          color: var(--lightmode-blue);
-        }
-
-        &:hover {
-          color: var(--lightmode-pink);
-        }
-      }
-    }
-
-    address {
-      font-style: normal;
-    }
-
-    p {
-      font-size: 20px;
-      line-height: 28px;
-      font-weight: 400;
-
-      a {
-        text-decoration: none;
-        color: var(--lightmode-pink);
-
-        &:hover {
-          text-decoration: underline;
-          filter: brightness(1.2);
-        }
-      }
-    }
-  }
-
-  section {
-    max-width: 1440px;
-    text-wrap: balance;
-  }
-
-  .legal_bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(
-      307deg,
-      rgba(0, 87, 255, 0.37) 1.31%,
-      #d1e0ff 40.42%,
-      #fff2f7 71.15%,
-      #ffe0ed 106.18%
-    );
-    z-index: -1;
-    opacity: 0.2;
-  }
-
-  @media screen and (max-width: 948px) {
-    .legal {
-      flex-direction: column-reverse;
-
-      aside {
-        position: unset;
-        top: 32px;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: 32px;
-
-        > nav {
-          gap: 16px;
-          position: absolute;
-          top: 128px;
-        }
-
-        > address {
-          margin-top: 32px;
-        }
-
-        > address > p:first-child,
-        > p {
-          margin-top: 0;
-        }
-
-        > address > p:first-child {
-          font-weight: 700;
-          font-size: 20px;
-        }
-
-        * {
-          font-size: 16px;
-          line-height: 24px;
-        }
-      }
-
-      section {
-        margin-top: 128px;
-      }
-    }
-  }
-
-  @media screen and (prefers-color-scheme: dark) {
-    .legal {
-      background: #242c3d;
-    }
-
-    aside {
-      color: #d4d9dd;
-
-      nav a {
-        &:visited {
-          color: #d4d9dd;
-        }
-
-        &.active {
-          color: var(--darkmode-blue);
-        }
-
-        &:hover {
-          color: var(--darkmode-pink);
-        }
-      }
-
-      p a {
-        color: var(--darkmode-pink);
-      }
-    }
-
-    .legal_bg {
-      display: none;
-    }
-  }
-</style>
diff --git a/src/layouts/LegalLayout.scss b/src/layouts/LegalLayout.scss
new file mode 100644
index 0000000..b1f7b6b
--- /dev/null
+++ b/src/layouts/LegalLayout.scss
@@ -0,0 +1,164 @@
+  .legal {
+    display: flex;
+    flex-direction: row;
+    padding: 128px 8vw;
+    position: relative;
+    background: linear-gradient(90deg, #fff 0%, rgba(107, 156, 255, 0.03) 100%);
+    gap: 8vw;
+    justify-content: center;
+  }
+
+  aside {
+    display: flex;
+    flex-direction: column;
+    gap: 64px;
+    color: #333948;
+    flex-shrink: 0;
+    position: sticky;
+    top: 192px;
+    align-self: start;
+
+    nav {
+      display: flex;
+      flex-direction: column;
+      gap: 32px;
+
+      a {
+        text-decoration: none;
+        font-size: 24px;
+        line-height: 28px;
+        font-weight: 500;
+        transition: all 0.1s ease-in-out;
+        color: #333948;
+
+        &:link,
+        &:visited {
+          color: #333948;
+          text-decoration: none;
+        }
+
+        &:hover,
+        &.active {
+          color: var(--lightmode-pink);
+          text-decoration: none;
+        }
+      }
+    }
+
+    address {
+      font-style: normal;
+    }
+
+    p {
+      font-size: 20px;
+      line-height: 28px;
+      font-weight: 400;
+
+      a {
+        text-decoration: none;
+        color: var(--lightmode-pink);
+
+        &:hover {
+          text-decoration: underline;
+          filter: brightness(1.2);
+        }
+      }
+    }
+  }
+
+  section {
+    max-width: 1440px;
+    text-wrap: balance;
+  }
+
+  .legal_bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      307deg,
+      rgba(0, 87, 255, 0.37) 1.31%,
+      #d1e0ff 40.42%,
+      #fff2f7 71.15%,
+      #ffe0ed 106.18%
+    );
+    z-index: -1;
+    opacity: 0.2;
+  }
+
+  @media screen and (max-width: 948px) {
+    .legal {
+      flex-direction: column-reverse;
+
+      aside {
+        position: unset;
+        top: 32px;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 32px;
+
+        > nav {
+          gap: 16px;
+          position: absolute;
+          top: 128px;
+        }
+
+        > address {
+          margin-top: 32px;
+        }
+
+        > address > p:first-child,
+        > p {
+          margin-top: 0;
+        }
+
+        > address > p:first-child {
+          font-weight: 700;
+          font-size: 20px;
+        }
+
+        * {
+          font-size: 16px;
+          line-height: 24px;
+        }
+      }
+
+      section {
+        margin-top: 128px;
+      }
+    }
+  }
+
+  @media screen and (prefers-color-scheme: dark) {
+    .legal {
+      background: #242c3d;
+    }
+
+    aside {
+      color: #d4d9dd;
+
+      nav a {
+        color: #d4d9dd;
+
+        &:link,
+        &:visited {
+          color: #d4d9dd;
+        }
+
+        &:hover,
+        &.active {
+          color: var(--darkmode-pink);
+        }
+      }
+
+      p a {
+        color: var(--darkmode-pink);
+      }
+    }
+
+    .legal_bg {
+      display: none;
+    }
+  }
diff --git a/src/views/Hero/Hero.astro b/src/views/Hero/Hero.astro
index 109775e..449c98b 100644
--- a/src/views/Hero/Hero.astro
+++ b/src/views/Hero/Hero.astro
@@ -25,12 +25,12 @@ const content = await getTranslatedContent("Hero_Section", lang!);
       </div>
     </div>
     <img
-      src="/assets/images/reach-new-heights_light.webp"
+      src="/assets/images/reach-new-heights_light.svg"
       alt={content.imageAlt1}
       class="reach-new-heights__image reach-new-heights__image--light"
     />
     <img
-      src="/assets/images/reach-new-heights_dark.webp"
+      src="/assets/images/reach-new-heights_dark.svg"
       alt={content.imageAlt1}
       class="reach-new-heights__image reach-new-heights__image--dark"
     />