diff --git a/src/components/Header.astro b/src/components/Header.astro
index 599a22b..c138249 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,6 +3,7 @@ import ArrowUpRight from "./icons/ArrowUpRight.astro";
 import Logo from "../assets/ci/side-light.svg";
 import Menu from "./Menu.astro";
 import SkipNavLink from "./SkipNavLink.astro";
+import NewMenu from "./NewMenu.astro";
 ---
 
 <header>
@@ -12,13 +13,13 @@ import SkipNavLink from "./SkipNavLink.astro";
   <Logo class="logo" />
 
   {/* Contact Link */}
-  <a class="contact">
+  <a class="contact" href="mailto:office@tideshiftdigital.com">
     <span class="heading-gradient">Contact us</span>
     <ArrowUpRight class="icon" />
   </a>
 
   {/* Menu Button */}
-  <Menu class="menu" />
+  {/* <NewMenu class="menu" /> */}
 </header>
 
 <style>
@@ -46,7 +47,7 @@ import SkipNavLink from "./SkipNavLink.astro";
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    grid-column: -2 / -4;
+    grid-column: -1 / -3;
     justify-self: end;
 
     font-size: 1.25rem;
@@ -62,7 +63,7 @@ import SkipNavLink from "./SkipNavLink.astro";
     height: 1.5rem;
   }
 
-  .menu {
+  /*.menu {
     grid-column: -1 / -2;
-    justify-self: end;
+  }*/
 </style>
diff --git a/src/components/NewMenu.astro b/src/components/NewMenu.astro
new file mode 100644
index 0000000..9906987
--- /dev/null
+++ b/src/components/NewMenu.astro
@@ -0,0 +1,62 @@
+---
+import MenuIcon from "./icons/MenuIcon.astro";
+---
+
+<tsd-menu>
+  <button>
+    <MenuIcon class="menu-icon" />
+  </button>
+
+  <nav>
+    <ul>
+      <li>Home</li>
+      <li>Blog</li>
+    </ul>
+  </nav>
+</tsd-menu>
+
+<script>
+  class TsdMenu extends HTMLElement {
+    connectedCallback() {
+      const MENU_CLASS = "menu-open" as const;
+      const menuButton = this.querySelector("button");
+
+      if (!menuButton) return;
+
+      menuButton.addEventListener("click", () => {
+        document.body.classList.toggle(MENU_CLASS);
+      });
+    }
+  }
+
+  customElements.define("tsd-menu", TsdMenu);
+</script>
+
+<style>
+  button {
+    display: flex;
+    width: max-content;
+    height: max-content;
+    border: none;
+    background-color: transparent;
+    color: var(--clr-light-400);
+  }
+
+  .menu-icon {
+    width: 2.25rem;
+    height: 2.25rem;
+    transition: 0.2s ease-out;
+
+    body.menu-open & {
+      transform: rotate3d(0, 0, 1, 135deg);
+    }
+  }
+
+  nav {
+    display: none;
+
+    body.menu-open & {
+      display: initial;
+    }
+  }
+</style>
diff --git a/src/components/icons/MenuIcon.astro b/src/components/icons/MenuIcon.astro
index 52d5476..bce73a8 100644
--- a/src/components/icons/MenuIcon.astro
+++ b/src/components/icons/MenuIcon.astro
@@ -3,156 +3,166 @@ const { class: classname, ...rest } = Astro.props;
 ---
 
 <svg
-    class={classname}
-    width="50"
-    xmlns="http://www.w3.org/2000/svg"
-    height="50"
-    id="screenshot-8003f86b-8663-8006-8007-347270f3a7f8"
-    viewBox="3016 382.207 50 50"
-    style="-webkit-print-color-adjust::exact"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    fill="none"
-    version="1.1"
-    {...rest}
+  width="50"
+  xmlns="http://www.w3.org/2000/svg"
+  height="46"
+  viewBox="4466 456 50 46"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  fill="none"
+  version="1.1"
+  class={classname}
+  {...rest}
 >
-    <g
-        id="shape-8003f86b-8663-8006-8007-347270f3a7f8"
-        style="fill:#000000"
-        width="24"
-        class="feather feather-menu"
-        height="24"
-        rx="0"
-        ry="0"
-    >
-        <g id="shape-8003f86b-8663-8006-8007-347270f3a7f9" style="display:none">
-            <g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7f9">
-                <rect
-                    rx="0"
-                    ry="0"
-                    x="3016"
-                    y="382.206611570248"
-                    transform="matrix(-1.000000, 0.000000, 0.000000, -1.000000, 6082.000000, 814.413223)"
-                    width="50"
-                    height="50"
+  <g id="shape-d5d105b8-8585-808b-8007-a058ef71df83">
+    <g class="frame-container-wrapper">
+      <g class="frame-container-blur">
+        <g class="frame-container-shadows">
+          <g fill="none">
+            <g class="fills" id="fills-d5d105b8-8585-808b-8007-a058ef71df83">
+              <rect
+                rx="0"
+                ry="0"
+                x="4466"
+                y="456"
+                width="50"
+                height="46"
+                transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
+                class="frame-background"
+              >
+              </rect>
+            </g>
+            <g class="frame-children">
+              <g
+                id="shape-d5d105b8-8585-808b-8007-a058ef71df84"
+                style="fill:#000000"
+                width="24"
+                class="feather feather-plus"
+                height="24"
+                rx="0"
+                ry="0"
+              >
+                <g
+                  id="shape-d5d105b8-8585-808b-8007-a058ef71df85"
+                  style="display:none"
+                >
+                  <g
+                    class="fills"
+                    id="fills-d5d105b8-8585-808b-8007-a058ef71df85"
+                  >
+                    <rect
+                      rx="0"
+                      ry="0"
+                      x="4466"
+                      y="456"
+                      transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
+                      width="50"
+                      height="46"
+                      fill="none"
+                      stroke-linejoin="round"
+                      style="fill:none"
+                    >
+                    </rect>
+                  </g>
+                  <g
                     fill="none"
                     stroke-linejoin="round"
-                    style="fill:none"
-                >
-                </rect>
-            </g>
-            <g
-                fill="none"
-                stroke-linejoin="round"
-                id="strokes-b7b76088-9f6d-80d6-8007-90ef313788eb-8003f86b-8663-8006-8007-347270f3a7f9"
-                class="strokes"
-            >
-                <g
-                    class="inner-stroke-shape"
-                    transform="matrix(-1.000000, 0.000000, 0.000000, -1.000000, 6082.000000, 814.413223)"
-                >
-                    <defs>
+                    id="strokes-d5d105b8-8585-808b-8007-a059e1681fe2-d5d105b8-8585-808b-8007-a058ef71df85"
+                    class="strokes"
+                  >
+                    <g
+                      class="inner-stroke-shape"
+                      transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
+                    >
+                      <defs>
                         <clipPath
-                            id="inner-stroke-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0"
+                          id="inner-stroke-render-5087-d5d105b8-8585-808b-8007-a058ef71df85-0"
                         >
-                            <use
-                                href="#stroke-shape-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0"
-                            >
-                            </use>
+                          <use
+                            href="#stroke-shape-render-5087-d5d105b8-8585-808b-8007-a058ef71df85-0"
+                          >
+                          </use>
                         </clipPath>
                         <rect
-                            rx="0"
-                            ry="0"
-                            x="3016"
-                            y="382.206611570248"
-                            width="50"
-                            height="50"
-                            style="fill:none;fill-opacity:none;stroke-width:6;stroke:#ffffff;stroke-opacity:1"
-                            id="stroke-shape-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0"
+                          rx="0"
+                          ry="0"
+                          x="4466"
+                          y="456"
+                          width="50"
+                          height="46"
+                          style="fill:none;fill-opacity:none;stroke-width:6;stroke:#e6e6e6;stroke-opacity:1"
+                          id="stroke-shape-render-5087-d5d105b8-8585-808b-8007-a058ef71df85-0"
                         >
                         </rect>
-                    </defs>
-                    <use
-                        href="#stroke-shape-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0"
-                        clip-path="url('#inner-stroke-render-658-8003f86b-8663-8006-8007-347270f3a7f9-0')"
-                    >
-                    </use>
+                      </defs>
+                      <use
+                        href="#stroke-shape-render-5087-d5d105b8-8585-808b-8007-a058ef71df85-0"
+                        clip-path="url('#inner-stroke-render-5087-d5d105b8-8585-808b-8007-a058ef71df85-0')"
+                      >
+                      </use>
+                    </g>
+                  </g>
                 </g>
-            </g>
-        </g>
-        <g id="shape-8003f86b-8663-8006-8007-347270f3a7fa">
-            <g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7fa">
-                <path
-                    d="M3059.75,407.20648193359375L3022.25,407.20648193359375"
-                    fill="none"
-                    stroke-linejoin="round"
-                    style="fill:none"
-                >
-                </path>
-            </g>
-            <g
-                fill="none"
-                stroke-linejoin="round"
-                id="strokes-b7b76088-9f6d-80d6-8007-90ef3137fa64-8003f86b-8663-8006-8007-347270f3a7fa"
-                class="strokes"
-            >
-                <g class="stroke-shape">
+                <g id="shape-d5d105b8-8585-808b-8007-a058ef71df86">
+                  <g
+                    class="fills"
+                    id="fills-d5d105b8-8585-808b-8007-a058ef71df86"
+                  >
                     <path
-                        d="M3059.75,407.20648193359375L3022.25,407.20648193359375"
-                        style="fill:none;fill-opacity:none;stroke-width:3;stroke:#ffffff;stroke-opacity:1"
+                      d="M4491,465.5833435058594L4491,492.4166564941406"
+                      fill="none"
+                      stroke-linejoin="round"
+                      style="fill:none"
                     >
                     </path>
-                </g>
-            </g>
-        </g>
-        <g id="shape-8003f86b-8663-8006-8007-347270f3a7fb">
-            <g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7fb">
-                <path
-                    d="M3059.75,419.70648193359375L3038,419.70648193359375"
+                  </g>
+                  <g
                     fill="none"
                     stroke-linejoin="round"
-                    style="fill:none"
-                >
-                </path>
-            </g>
-            <g
-                fill="none"
-                stroke-linejoin="round"
-                id="strokes-b7b76088-9f6d-80d6-8007-90ef31382957-8003f86b-8663-8006-8007-347270f3a7fb"
-                class="strokes"
-            >
-                <g class="stroke-shape">
+                    id="strokes-d5d105b8-8585-808b-8007-a059e16857d2-d5d105b8-8585-808b-8007-a058ef71df86"
+                    class="strokes"
+                  >
+                    <g class="stroke-shape">
+                      <path
+                        d="M4491,465.5833435058594L4491,492.4166564941406"
+                        style="fill:none;fill-opacity:none;stroke-width:3;stroke:#e6e6e6;stroke-opacity:1"
+                      >
+                      </path>
+                    </g>
+                  </g>
+                </g>
+                <g id="shape-d5d105b8-8585-808b-8007-a058ef7209c6">
+                  <g
+                    class="fills"
+                    id="fills-d5d105b8-8585-808b-8007-a058ef7209c6"
+                  >
                     <path
-                        d="M3059.75,419.70648193359375L3038,419.70648193359375"
-                        style="fill:none;fill-opacity:none;stroke-width:3;stroke:#ffffff;stroke-opacity:1"
+                      d="M4476.41650390625,479L4505.58349609375,479"
+                      fill="none"
+                      stroke-linejoin="round"
+                      style="fill:none"
                     >
                     </path>
-                </g>
-            </g>
-        </g>
-        <g id="shape-8003f86b-8663-8006-8007-347270f3a7fc">
-            <g class="fills" id="fills-8003f86b-8663-8006-8007-347270f3a7fc">
-                <path
-                    d="M3059.75,394.70648193359375L3028.5,394.70648193359375"
+                  </g>
+                  <g
                     fill="none"
                     stroke-linejoin="round"
-                    style="fill:none"
-                >
-                </path>
-            </g>
-            <g
-                fill="none"
-                stroke-linejoin="round"
-                id="strokes-b7b76088-9f6d-80d6-8007-90ef31382958-8003f86b-8663-8006-8007-347270f3a7fc"
-                class="strokes"
-            >
-                <g class="stroke-shape">
-                    <path
-                        d="M3059.75,394.70648193359375L3028.5,394.70648193359375"
-                        style="fill:none;fill-opacity:none;stroke-width:3;stroke:#ffffff;stroke-opacity:1"
-                    >
-                    </path>
+                    id="strokes-d5d105b8-8585-808b-8007-a059e16857d3-d5d105b8-8585-808b-8007-a058ef7209c6"
+                    class="strokes"
+                  >
+                    <g class="stroke-shape">
+                      <path
+                        d="M4476.41650390625,479L4505.58349609375,479"
+                        style="fill:none;fill-opacity:none;stroke-width:3;stroke:#e6e6e6;stroke-opacity:1"
+                      >
+                      </path>
+                    </g>
+                  </g>
                 </g>
+              </g>
             </g>
+          </g>
         </g>
+      </g>
     </g>
+  </g>
 </svg>
diff --git a/src/components/landing/ContactSection.astro b/src/components/landing/ContactSection.astro
index 22f417c..6a4a764 100644
--- a/src/components/landing/ContactSection.astro
+++ b/src/components/landing/ContactSection.astro
@@ -1,94 +1,94 @@
 ---
-import ContactImage from "../../assets/img/contact.jpg";
 import { Picture } from "astro:assets";
+import ContactImage from "../../assets/img/contact.jpg";
 import ArrowUpRight from "../icons/ArrowUpRight.astro";
 ---
 
 <div class="contact" aria-label="Contact section">
-    <Picture
-        class="image"
-        src={ContactImage}
-        alt="An abstract image of a black and gold background"
-    />
+  <Picture
+    class="image"
+    src={ContactImage}
+    alt="An abstract image of a black and gold background"
+  />
 
-    <div class="content">
-        <h2 class="heading-gradient">Building the Web on Your Terms.</h2>
+  <div class="content">
+    <h2 class="heading-gradient">Building the Web on Your Terms.</h2>
 
-        <p>
-            Enough about us, let's talk about you. Every project is individual
-            and comes with its own challenges and specific needs. Get in touch
-            with us now and let's talk about it in a short call.
-        </p>
-    </div>
+    <p>
+      Enough about us, let's talk about you. Every project is individual and
+      comes with its own challenges and specific needs. Get in touch with us now
+      and let's talk about it in a short call.
+    </p>
+  </div>
 
-    <a class="link" href="mailto:office@tideshiftdigital.com">
-        <span class="heading-gradient">Contact us</span>
-        <ArrowUpRight />
-    </a>
+  <a class="link" href="mailto:office@tideshiftdigital.com">
+    <span class="heading-gradient">Contact us</span>
+    <ArrowUpRight />
+  </a>
 </div>
 
 <style>
-    .contact {
-        display: grid;
-        grid-template-columns: var(--base-grid);
-        max-width: var(--max-content-width);
-        margin-inline: auto;
-        padding-block: 8rem 5.5rem;
-        padding-inline: 5rem;
-    }
-
-    picture {
-        display: block;
-        width: calc(100% + 5rem);
-        grid-column: 1 / 5;
-        /* TODO substitute horizontal spacing with var */
-        transform: translate3d(-5rem, 0, 0);
-        z-index: -1;
-    }
-
-    .image {
-        max-width: 100%;
-        height: 100%;
-        object-fit: cover;
-    }
-
-    .content {
-        grid-column: 6 / -1;
-        align-content: center;
-    }
-
-    h2 {
-        max-width: 13ch;
-        font-size: 3rem;
-        line-height: var(--leading-subtitle);
-        letter-spacing: var(--tracking-narrow);
-    }
-
-    p {
-        max-width: 38ch;
-        margin-top: 2rem;
-        font-size: 1.5rem;
-        line-height: var(--leading-paragraph);
-    }
-
-    .link {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 2rem;
-        grid-column: 1 / -1;
-        width: max-content;
-        margin-inline: auto;
-
-        margin-top: 15rem; 
-        padding-bottom: 5rem;
-
-        font-size: 6.25rem;
-        font-weight: 600;
-        text-transform: uppercase;
-
-        span {
-            line-height: var(--leading-tightest);
-        }
+  .contact {
+    display: grid;
+    grid-template-columns: var(--base-grid);
+    max-width: var(--max-content-width);
+    margin-inline: auto;
+    padding-block: 8rem 10rem;
+    padding-inline: 5rem;
+  }
+
+  picture {
+    display: block;
+    width: calc(100% + 5rem);
+    grid-column: 1 / 5;
+    /* TODO substitute horizontal spacing with var */
+    transform: translate3d(-5rem, 0, 0);
+    z-index: -1;
+  }
+
+  .image {
+    max-width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .content {
+    grid-column: 6 / -1;
+    align-content: center;
+  }
+
+  h2 {
+    max-width: 13ch;
+    font-size: 3rem;
+    line-height: var(--leading-subtitle);
+    letter-spacing: var(--tracking-narrow);
+  }
+
+  p {
+    max-width: 38ch;
+    margin-top: 2rem;
+    font-size: 1.5rem;
+    line-height: var(--leading-paragraph);
+  }
+
+  .link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+    grid-column: 1 / -1;
+    width: max-content;
+    margin-inline: auto;
+
+    margin-top: 15rem;
+
+    font-size: 6.25rem;
+    font-weight: 600;
+    text-transform: uppercase;
+
+    span {
+      line-height: var(--leading-tightest);
+      letter-spacing: var(--tracking-narrow);
     }
+  }
 </style>