diff --git a/src/app.html b/src/app.html
index 84ffad16..957a4f2c 100644
--- a/src/app.html
+++ b/src/app.html
@@ -2,7 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png?v=1" />
+    <link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png?v=1" />
+    <link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png?v=1" />
+    <link rel="shortcut icon" href="%sveltekit.assets%/favicon.ico?v=1" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
   </head>
diff --git a/src/components/Header/Header.svelte b/src/components/Header/Header.svelte
new file mode 100644
index 00000000..55b30bf5
--- /dev/null
+++ b/src/components/Header/Header.svelte
@@ -0,0 +1,19 @@
+<script>
+  import HeaderNav from '../Header/HeaderNav.svelte';
+  import Logo from '../../lib/assets/Logo.svg';
+  import HeaderNavMobile from '../Header/HeaderNavMobile.svelte';
+  import OpenCloseIcon from '../OpenCloseIcon.svelte';
+
+  let isNavOpen = false;
+</script>
+
+<div class="freq-container fixed top-0 flex items-center justify-between pt-[12px]">
+  <img src={Logo} alt="Logo" class="mr-3 sm:w-[140px] md:w-[180px] lg:w-[210px]" />
+
+  <!-- For Desktop -->
+  <HeaderNav />
+
+  <!-- For Mobile -->
+  <OpenCloseIcon onClick={() => (isNavOpen = !isNavOpen)} isOpen={isNavOpen} classes={'md:hidden lg:hidden'} />
+  <HeaderNavMobile isOpen={isNavOpen} />
+</div>
diff --git a/src/components/Header/HeaderNav.svelte b/src/components/Header/HeaderNav.svelte
new file mode 100644
index 00000000..51213b64
--- /dev/null
+++ b/src/components/Header/HeaderNav.svelte
@@ -0,0 +1,7 @@
+<script>
+  import NavItems from './NavItems.svelte';
+</script>
+
+<nav class="flex-wrap gap-4 text-sm uppercase sm:hidden md:flex lg:flex">
+  <NavItems />
+</nav>
diff --git a/src/components/Header/HeaderNavMobile.svelte b/src/components/Header/HeaderNavMobile.svelte
new file mode 100644
index 00000000..a5a97de2
--- /dev/null
+++ b/src/components/Header/HeaderNavMobile.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import NavItems from './NavItems.svelte';
+
+  export let isOpen: boolean;
+</script>
+
+<div
+  class={`fixed right-0 top-0 w-[100vw] flex-col gap-6 overflow-hidden bg-teal transition-[height] duration-[1s] sm:flex md:hidden lg:hidden ${isOpen ? 'h-[100vh]' : 'h-0'}`}
+>
+  <nav class="mt-[60px] flex flex-col gap-4 px-[12%] text-xl uppercase text-cream">
+    <NavItems />
+  </nav>
+</div>
diff --git a/src/components/Header/NavItems.svelte b/src/components/Header/NavItems.svelte
new file mode 100644
index 00000000..453354f5
--- /dev/null
+++ b/src/components/Header/NavItems.svelte
@@ -0,0 +1,5 @@
+<a class="underline-on-hover" href="/#">About.</a>
+<a class="underline-on-hover" href="/#">Our Technology.</a>
+<a class="underline-on-hover" href="https://docs.frequency.xyz/" target="_blank" rel="noreferrer">Dev Docs.</a>
+<a class="underline-on-hover" href="https://medium.com/one-frequency" target="_blank" rel="noreferrer">Newsroom.</a>
+<a class="underline-on-hover" href="mailto:info@frequency.xyz">Contact.</a>
diff --git a/src/components/OpenCloseIcon.svelte b/src/components/OpenCloseIcon.svelte
new file mode 100644
index 00000000..0ee0b30c
--- /dev/null
+++ b/src/components/OpenCloseIcon.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  export let onClick: () => void;
+  export let isOpen: boolean;
+  export let classes: string = '';
+</script>
+
+<button on:click|preventDefault={onClick} class={`z-50 ${classes}`}>
+  <svg class="h-[55px] w-[55px]">
+    <line
+      x1="0"
+      y1="50%"
+      x2="100%"
+      y2="50%"
+      class={`origin-left translate-y-[20%] stroke-purple stroke-[10%] transition-transform duration-[0.3s] ${isOpen ? 'translate-x-[8px] translate-y-[35%] -rotate-45' : 'rotate-0'}`}
+    />
+    <line
+      x1="0"
+      y1="50%"
+      x2="100%"
+      y2="50%"
+      class={`origin-left translate-y-[-20%] stroke-purple stroke-[10%] transition-transform duration-[0.3s] ${isOpen ? 'translate-x-[8px] translate-y-[-35%] rotate-45' : 'rotate-0'}`}
+    />
+  </svg>
+</button>
diff --git a/src/lib/assets/Exit.svg b/src/lib/assets/Exit.svg
new file mode 100644
index 00000000..a9f1f7bc
--- /dev/null
+++ b/src/lib/assets/Exit.svg
@@ -0,0 +1,4 @@
+<svg width="57" height="57" viewBox="0 0 57 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="57" height="4" fill="#544974" transform="rotate(-45 55 16)"/>
+    <rect y="13" width="57" height="4" fill="#544974" transform="rotate(45 15 16)"/>
+</svg>
diff --git a/src/lib/assets/Logo.svg b/src/lib/assets/Logo.svg
new file mode 100644
index 00000000..3edf1db7
--- /dev/null
+++ b/src/lib/assets/Logo.svg
@@ -0,0 +1,3 @@
+<svg width="216" height="32" viewBox="0 0 216 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0.654808V31.3416H5.36345V21.7823L16.1391 17.1452L15.9972 11.6618L5.40781 16.2053V5.76408H19.0804V0.654808H0ZM26.0808 5.75963H33.2676C35.601 5.75963 37.5131 6.93115 37.5131 9.46129C37.5131 11.9914 35.601 13.2075 33.2676 13.2075H26.0808V5.76408V5.75963ZM20.6686 0.654808V31.3416H26.0808V23.8002L42.8765 31.3416V25.4395L26.5466 18.3658H33.1256C38.3515 18.3658 42.8765 14.9937 42.8765 9.51029C42.8765 4.02684 38.3515 0.654808 33.1256 0.654808H20.6686ZM44.5091 0.654808V31.3416H63.5451V26.1878H49.8725V18.5039H63.5451V13.399H49.8725V5.76408H63.5451V0.654808H44.5091ZM114.819 0.654808V21.6442C114.819 24.7846 112.535 26.9362 109.456 26.9362C106.377 26.9362 104.093 24.7802 104.093 21.6442V0.654808H98.7291V21.5507C98.7291 27.7335 103.534 31.9964 109.46 31.9964C115.387 31.9964 120.192 27.7335 120.192 21.5507V0.654808H114.828H114.819ZM121.82 0.654808V31.3416H140.856V26.1878H127.183V18.5039H140.856V13.399H127.183V5.76408H140.856V0.654808H121.82ZM159.519 0.654808V21.3636L148.322 0.654808H142.488V31.3416H147.759V10.6818L159.005 31.3416H164.79V0.654808H159.519ZM209.396 0.654808L205.151 12.1785L200.67 0.654808H194.743L207.715 31.3416H213.313L207.901 18.5529L215.088 0.703808H209.396V0.654808ZM70.3104 15.9782C70.3104 9.98246 75.1637 5.06027 81.1837 5.06027C87.2037 5.06027 92.057 9.93346 92.057 15.9782C92.057 17.898 91.5912 19.7734 90.6108 21.4616L78.5264 13.9648V20.054L87.0174 25.2078C85.2429 26.2858 83.2377 26.8961 81.1393 26.8961C75.2125 26.9451 70.3636 22.1654 70.3148 16.2143V15.9782M81.1349 1.99158e-06C72.3644 0.0490011 65.2264 7.21624 65.2708 16.0227C65.3196 24.8292 72.4576 31.9964 81.2281 31.9519C85.0521 31.9519 88.7386 30.5443 91.6311 28.0186L97.0433 31.2971V25.4395L94.8962 24.1298C96.298 21.6487 97.0433 18.8379 97.0433 15.9782C97.1409 7.21624 90.0961 0.0490011 81.37 1.99158e-06C81.2768 1.99158e-06 81.2281 1.99158e-06 81.1349 1.99158e-06ZM182.384 1.99158e-06C173.613 1.99158e-06 166.427 7.12269 166.427 15.9737C166.427 24.8247 173.52 31.9964 182.335 31.9964C187.419 31.9964 192.179 29.6088 195.165 25.484L191.434 21.7378C189.615 25.0163 186.115 27.0297 182.384 26.9362C176.226 26.9362 171.608 22.2055 171.608 16.0183C171.608 9.83101 176.275 5.05582 182.384 5.05582C186.115 4.96228 189.615 6.9757 191.434 10.3032L195.165 6.55698C192.179 2.34305 187.419 -0.0445427 182.384 1.99158e-06Z" fill="#5E69FF"/>
+</svg>
diff --git a/src/lib/assets/Menu.svg b/src/lib/assets/Menu.svg
new file mode 100644
index 00000000..e21d6f05
--- /dev/null
+++ b/src/lib/assets/Menu.svg
@@ -0,0 +1,4 @@
+<svg width="57" height="17" viewBox="0 0 57 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="57" height="4" fill="#544974"/>
+<rect y="13" width="57" height="4" fill="#544974"/>
+</svg>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index eace1b3e..80eba191 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,9 +1,11 @@
 <script>
+  import Header from '../components/Header/Header.svelte';
   import Footer from '../components/Footer.svelte';
 </script>
 
 <div>
-  <div class="min-h-[calc(100vh-50px)]">
+  <div class="max-w-page mt-[27px] min-h-[calc(100vh-50px)] w-[100vw]">
+    <Header />
     <slot />
   </div>
   <Footer />
diff --git a/src/style/app.css b/src/style/app.css
index 5ae999d8..99960b4a 100644
--- a/src/style/app.css
+++ b/src/style/app.css
@@ -20,11 +20,30 @@
   .freq-container {
     @apply w-full sm:px-[16px] md:px-[40px] lg:px-[80px];
   }
+
+  /* Underline on hover animation */
+  .underline-on-hover {
+    @apply relative block cursor-pointer overflow-hidden px-0 py-1;
+  }
+
+  .underline-on-hover::after {
+    @apply absolute bottom-0 left-0 h-[0.1em] w-full bg-navy opacity-0 transition-opacity content-[''];
+    transition:
+      opacity 300ms,
+      transform 300ms;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  .underline-on-hover:hover::after,
+  .underline-on-hover:focus::after {
+    @apply opacity-100;
+    transform: translate3d(0, 0, 0);
+  }
 }
 
 @layer base {
   body {
-    @apply text-base text-black;
+    @apply my-[40px] flex flex-col items-center bg-cream text-base text-black;
   }
 
   button {
diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png
new file mode 100644
index 00000000..e4970570
Binary files /dev/null and b/static/apple-touch-icon.png differ
diff --git a/static/favicon-16x16.png b/static/favicon-16x16.png
new file mode 100644
index 00000000..cba6aa66
Binary files /dev/null and b/static/favicon-16x16.png differ
diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png
new file mode 100644
index 00000000..2cd99288
Binary files /dev/null and b/static/favicon-32x32.png differ
diff --git a/static/favicon.ico b/static/favicon.ico
new file mode 100644
index 00000000..c90807e8
Binary files /dev/null and b/static/favicon.ico differ
diff --git a/static/favicon.png b/static/favicon.png
deleted file mode 100644
index 825b9e65..00000000
Binary files a/static/favicon.png and /dev/null differ
diff --git a/tailwind.config.js b/tailwind.config.js
index 1400d61c..80b90809 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -23,7 +23,7 @@ export default {
       indigo: '#5E69FF',
     },
     width: {
-      page: '1010px',
+      page: '1300px',
       full: '100%',
     },
     extend: {
