diff --git a/src/components/common/footer/footer.module.scss b/src/components/common/footer/footer.module.scss
index 9887fb0..46f7e88 100644
--- a/src/components/common/footer/footer.module.scss
+++ b/src/components/common/footer/footer.module.scss
@@ -30,15 +30,15 @@
       top: 50%;
       left: 50%;
       width: 100%;
-      height: 100%;
+      height: 101%;
       content: '';
       transform: translate(-50%, -50%);
       pointer-events: none;
       background: linear-gradient(
         0deg,
-        black 15%,
+        var(--color-black) 15%,
         rgb(9 9 121 / 0) 50%,
-        black 100%
+        var(--color-black) 100%
       );
       @media screen and (max-width: 800px) {
         content: normal;
@@ -51,7 +51,7 @@
       background: radial-gradient(
         ellipse farthest-corner at center center,
         rgb(4 4 4 / 0.05) 45%,
-        #000 0
+        var(--color-black) 0
       );
       filter: blur(tovw(80px, 'default', 40px));
     }
diff --git a/src/components/common/header/header.module.scss b/src/components/common/header/header.module.scss
index 2e5141f..94105c3 100644
--- a/src/components/common/header/header.module.scss
+++ b/src/components/common/header/header.module.scss
@@ -2,7 +2,7 @@
 
 .header {
   position: fixed;
-  z-index: 10;
+  z-index: 20;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -25,10 +25,123 @@
     margin: 0 0 0 tovw(122px, 'default', 90px);
     padding: 0;
     list-style-type: none;
-    gap: tovw(32px, 'default', 20px);
+    gap: tovw(32px, 'default', 16px);
+  }
+
+  li:not(.item--mobile) {
+    position: relative;
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: tovw(-16px, 'default', -16px);
+      width: tovw(7px, 'default', 7px);
+      height: tovw(7px, 'default', 7px);
+      content: '';
+      transition: opacity var(--normal-transition);
+      transform: translateY(-50%);
+      opacity: 0;
+      background: var(--color-white);
+    }
+  }
+
+  li.active {
+    &::after {
+      opacity: 1;
+    }
   }
 
   .burger {
-    width: tovw(22px, 'default', 22px);
+    width: tovw(28px, 'default', 28px);
+  }
+
+  &__mobile {
+    position: fixed;
+    z-index: 10;
+    top: tovw(75px, 'mobile');
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: calc(100 * var(--vh) - tovw(75px, 'mobile'));
+    padding: tovw(16px, 'mobile');
+    background-color: var(--color-black);
+    background-image: linear-gradient(
+      180deg,
+      rgb(0 0 244 / 0) 1.63%,
+      rgb(0 0 244 / 0.9) 81.47%
+    );
+
+    ul {
+      flex-direction: column;
+      margin: 0;
+      padding: 0;
+    }
+
+    a {
+      font-size: tovw(50px, 'mobile');
+      letter-spacing: tovw(-1px, 'mobile');
+      opacity: 0.6;
+
+      @media screen and (max-height: 750px) {
+        font-size: calc(var(--vh) * 5.2);
+      }
+    }
+
+    li.active {
+      a {
+        opacity: 1;
+      }
+    }
+
+    svg {
+      display: block;
+    }
+
+    button {
+      width: 100%;
+      margin: tovw(59px, 'mobile') 0 tovw(44px, 'mobile') 0;
+
+      @media screen and (max-height: 750px) {
+        margin: calc(var(--vh) * 7.2) 0 calc(var(--vh) * 5.2) 0;
+      }
+    }
+
+    p {
+      text-align: center;
+    }
+
+    .social {
+      position: relative;
+      display: grid;
+      justify-content: center;
+      width: 100%;
+      margin: tovw(32px, 'mobile') 0;
+      padding-top: tovw(32px, 'mobile');
+      grid-template-columns: repeat(6, tovw(24px, 'mobile'));
+      gap: tovw(24px, 'mobile');
+
+      &::after {
+        position: absolute;
+        top: tovw(-32px, 'mobile');
+        left: tovw(-16px, 'mobile');
+        width: calc(100% + tovw(32px, 'mobile'));
+        height: tovw(1px, 'mobile', 1px);
+        margin: tovw(24px, 'mobile') 0;
+        content: '';
+        background: white;
+      }
+
+      li,
+      a {
+        display: block;
+        width: tovw(24px, 'default', 24px);
+        height: tovw(24px, 'default', 24px);
+      }
+
+      a {
+        opacity: 1;
+      }
+    }
   }
 }
diff --git a/src/components/common/header/index.tsx b/src/components/common/header/index.tsx
index 317d1c5..8977e45 100644
--- a/src/components/common/header/index.tsx
+++ b/src/components/common/header/index.tsx
@@ -1,15 +1,103 @@
 import clsx from 'clsx'
 import NextLink from 'next/link'
+import { useRouter } from 'next/router'
+import * as React from 'react'
 
 import Burger from '~/components/icons/burguer'
 import { Logo } from '~/components/icons/logo'
 import { Button } from '~/components/primitives/button'
 import Link from '~/components/primitives/link'
+import { useIsomorphicLayoutEffect } from '~/hooks/use-isomorphic-layout-effect'
+import { DURATION, gsap } from '~/lib/gsap'
 
+import { ConnectLinks } from '../footer/footer'
 import { defaultHeaderLinks } from './header'
 import s from './header.module.scss'
 
+const HeaderMobile = React.forwardRef<
+  HTMLDivElement,
+  JSX.IntrinsicElements['div']
+>(({ className, ...props }, ref) => {
+  const router = useRouter()
+
+  const isActive = (href: string) => router.pathname === href
+  return (
+    <div {...props} className={clsx(s['header__mobile'], className)} ref={ref}>
+      <ul className="items">
+        {defaultHeaderLinks.length > 0 &&
+          defaultHeaderLinks.map((link, index) => (
+            <li
+              key={index}
+              className={clsx(
+                { [s['active']]: isActive(link.href) },
+                s['item--mobile']
+              )}
+            >
+              <Link href={link.href} variant="nav">
+                {link.title}
+              </Link>
+            </li>
+          ))}
+      </ul>
+      <Button>Get Started</Button>
+      <ul className={clsx(s['social'], 'social')}>
+        {ConnectLinks.length > 0 &&
+          ConnectLinks.map((link, index) => (
+            <li key={index}>
+              <Link href={link.href} variant="unstyled">
+                <span className="sr-only">{link.title}</span>
+                {link.logo && link.logo}
+              </Link>
+            </li>
+          ))}
+      </ul>
+      <p>Laconic, The Source of Proof</p>
+    </div>
+  )
+})
+
 export const Header = () => {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const headerMobileRef = React.useRef<HTMLDivElement>(null)
+  const timelineRef = React.useRef<GSAPTimeline>()
+  const router = useRouter()
+
+  const isActive = (href: string) => router.pathname === href
+
+  useIsomorphicLayoutEffect(() => {
+    if (!headerMobileRef.current) return
+
+    const navigationItems =
+      headerMobileRef.current.querySelectorAll('.items li')
+    const socialItems = headerMobileRef.current.querySelectorAll('.social li')
+    const button = headerMobileRef.current.querySelector('button')
+    const text = headerMobileRef.current.querySelector('p')
+
+    timelineRef.current = gsap.timeline({
+      paused: true,
+      smoothChildTiming: true
+    })
+    timelineRef.current.fromTo(
+      headerMobileRef.current,
+      {
+        xPercent: 100
+      },
+      { xPercent: 0, duration: DURATION }
+    )
+    timelineRef.current.fadeIn([navigationItems, button, socialItems, text]),
+      '>-40%'
+  }, [])
+
+  useIsomorphicLayoutEffect(() => {
+    if (isOpen) {
+      gsap.set('body, html', { overflowY: 'hidden' })
+      timelineRef.current?.timeScale(1).play()
+    } else {
+      gsap.set('body, html', { overflowY: 'auto' })
+      timelineRef.current?.timeScale(1.5).reverse()
+    }
+  }, [isOpen])
+
   return (
     <header className={s.header}>
       <nav>
@@ -22,7 +110,10 @@ export const Header = () => {
         <ul className="hide-on-mobile">
           {defaultHeaderLinks.length > 0 &&
             defaultHeaderLinks.map((link, index) => (
-              <li key={index}>
+              <li
+                key={index}
+                className={clsx({ [s['active']]: isActive(link.href) })}
+              >
                 <Link href={link.href} variant="nav">
                   {link.title}
                 </Link>
@@ -33,7 +124,15 @@ export const Header = () => {
       <Button size="small" className="hide-on-mobile">
         Get Started
       </Button>
-      <Burger className={clsx(s['burger'], 'hide-on-desktop')} />
+      <div className="hide-on-desktop">
+        <Button variant="unstyled" onClick={() => setIsOpen(!isOpen)}>
+          <Burger
+            className={clsx(s['burger'], 'hide-on-desktop')}
+            isOpen={isOpen}
+          />
+        </Button>
+        <HeaderMobile ref={headerMobileRef} />
+      </div>
     </header>
   )
 }
diff --git a/src/components/icons/burguer.tsx b/src/components/icons/burguer.tsx
index f955798..ba06cf5 100644
--- a/src/components/icons/burguer.tsx
+++ b/src/components/icons/burguer.tsx
@@ -1,16 +1,95 @@
-const Burger = ({ className, fill }: { className?: string; fill?: string }) => {
+import * as React from 'react'
+
+import { useIsomorphicLayoutEffect } from '~/hooks/use-isomorphic-layout-effect'
+import { gsap } from '~/lib/gsap'
+
+const Burger = ({
+  className,
+  fill,
+  isOpen
+}: {
+  className?: string
+  fill?: string
+  isOpen: boolean
+}) => {
+  const timelineRef = React.useRef<GSAPTimeline>()
+  const topRef = React.useRef(null)
+  const middleRef = React.useRef(null)
+  const bottomRef = React.useRef(null)
+
+  useIsomorphicLayoutEffect(() => {
+    timelineRef.current = gsap.timeline({
+      paused: true,
+      reversed: true,
+      smoothChildTiming: true
+    })
+
+    timelineRef.current.to(topRef.current, {
+      y: -4,
+      transformOrigin: '50% 50%'
+    })
+    timelineRef.current.to(
+      bottomRef.current,
+      {
+        y: 4,
+        transformOrigin: '50% 50%'
+      },
+      '<'
+    )
+    timelineRef.current.to(
+      middleRef.current,
+      {
+        scale: 0.1,
+        transformOrigin: '50% 50%'
+      },
+      '<'
+    )
+    timelineRef.current.add('rotate')
+    timelineRef.current.to(topRef.current, { y: 6 }, 'rotate')
+    timelineRef.current.to(bottomRef.current, { y: -6 }, 'rotate')
+    timelineRef.current.to(
+      topRef.current,
+      { rotationZ: 45, transformOrigin: '50% 50%' },
+      'rotate'
+    )
+    timelineRef.current.to(
+      bottomRef.current,
+      { rotationZ: -45, transformOrigin: '50% 50%' },
+      'rotate'
+    )
+
+    timelineRef.current.timeScale(2.23)
+
+    return () => {
+      timelineRef.current?.kill()
+    }
+  }, [])
+
+  useIsomorphicLayoutEffect(() => {
+    if (isOpen) {
+      timelineRef.current?.play()
+    } else {
+      timelineRef.current?.reverse()
+    }
+  }, [isOpen])
+
   return (
     <svg
       className={className}
-      viewBox="0 0 22 11"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 28 28"
     >
-      <path
+      <path ref={topRef} d="M1 8h24v2H1z" fill={fill || '#fff'} />
+      <line
+        ref={middleRef}
+        x1="1"
+        y1="15"
+        x2="25"
+        y2="15"
         stroke={fill || '#fff'}
-        style={{ mixBlendMode: 'difference' }}
-        d="M0 .5h22M0 5.5h22M0 10.5h22"
+        strokeWidth="2"
       />
+      <path ref={bottomRef} d="M1 20h24v2H1z" fill={fill || '#fff'} />
     </svg>
   )
 }
diff --git a/src/components/icons/socials.tsx b/src/components/icons/socials.tsx
index 447bbc3..f193386 100644
--- a/src/components/icons/socials.tsx
+++ b/src/components/icons/socials.tsx
@@ -1,3 +1,5 @@
+import { useReactId } from '~/hooks/use-react-id'
+
 const Telegram = ({
   className,
   fill
@@ -5,6 +7,7 @@ const Telegram = ({
   className?: string
   fill?: string
 }) => {
+  const id = useReactId()
   return (
     <svg
       className={className}
@@ -15,12 +18,12 @@ const Telegram = ({
       <path
         clipRule="evenodd"
         d="M24 12c0 6.6274-5.3726 12-12 12-6.62742 0-12-5.3726-12-12C0 5.37258 5.37258 0 12 0c6.6274 0 12 5.37258 12 12ZM12.43 8.85893c-1.1672.48547-3.49986 1.49027-6.99811 3.01437-.56806.2259-.86563.4469-.89272.663-.04578.3652.41154.509 1.0343.7048.08471.0267.17248.0543.26247.0835.6127.1992 1.43689.4322 1.86535.4414.38865.0084.82244-.1518 1.30135-.4807 3.26856-2.2063 4.95576-3.32149 5.06166-3.34553.0747-.01696.1783-.03829.2485.02408.0701.06235.0632.18045.0558.21215-.0453.1931-1.8405 1.8621-2.7695 2.7258-.2896.2692-.495.4602-.537.5038-.0941.0977-.19.1902-.2821.279-.5692.5487-.99609.9602.0236 1.6322.49.3229.8822.5899 1.2733.8563.4273.291.8534.5812 1.4047.9426.1405.092.2746.1877.4053.2808.4972.3545.9438.6729 1.4957.6221.3206-.0295.6519-.331.8201-1.2302.3975-2.1253 1.1789-6.7299 1.3595-8.62743.0158-.16624-.0041-.379-.02-.4724-.016-.09339-.0494-.22646-.1708-.32497-.1438-.11666-.3658-.14126-.465-.13952-.4514.00795-1.1438.24874-4.4764 1.63485Z"
-        fill="url(#telegram)"
+        fill={`url(#${id})`}
         fillRule="evenodd"
       />
       <defs>
         <linearGradient
-          id="telegram"
+          id={id}
           x1="12"
           y1="0"
           x2="12"
@@ -28,7 +31,7 @@ const Telegram = ({
           gradientUnits="userSpaceOnUse"
         >
           <stop stopColor={fill || 'var(--color-white)'} />
-          <stop offset="1" stopColor="#DEDEDE" />
+          <stop offset="1" stopColor="var(--color-grey-lightness)" />
         </linearGradient>
       </defs>
     </svg>
@@ -42,6 +45,7 @@ const Twitter = ({
   className?: string
   fill?: string
 }) => {
+  const id = useReactId()
   return (
     <svg
       className={className}
@@ -51,11 +55,11 @@ const Twitter = ({
     >
       <path
         d="M7.55016 21.3548c9.05434 0 14.00814-7.4471 14.00814-13.9033 0-.20936-.0047-.42337-.0141-.63273.9637-.69168 1.7953-1.54843 2.4558-2.52999-.8975.39631-1.8504.65515-2.8261.76765 1.0274-.61122 1.7966-1.57142 2.1652-2.7026-.9665.56851-2.0235.96954-3.1257 1.18591-.7426-.78315-1.7244-1.30169-2.7937-1.47544-1.0693-.17376-2.1665.00695-3.122.51417-.9554.50722-1.7159 1.31271-2.1639 2.29194-.4479.97922-.5584 2.07764-.3143 3.12543-1.95701-.09747-3.87156-.60206-5.61952-1.48104-1.74795-.87898-3.29029-2.11274-4.52701-3.62129-.62857 1.07562-.820913 2.34843-.53794 3.55975C1.418 7.66457 2.15506 8.7235 3.19641 9.41483c-.78178-.02463-1.54643-.23354-2.230785-.60947v.06048c-.0007 1.12879.392475 2.22296 1.112685 3.09656.72021.8736 1.72301 1.4727 2.83794 1.6955-.72419.1966-1.48427.2253-2.22141.0837.31461.9708.92673 1.8198 1.75093 2.4287.8242.6088 1.81935.9471 2.84657.9676-1.74392 1.3596-3.89817 2.0971-6.11578 2.0936C.783287 19.2309.390399 19.2069 0 19.1598c2.25286 1.4345 4.87353 2.1964 7.55016 2.195Z"
-        fill="url(#twitter)"
+        fill={`url(#${id})`}
       />
       <defs>
         <linearGradient
-          id="twitter"
+          id={id}
           x1="12"
           y1="2"
           x2="12"
@@ -63,7 +67,7 @@ const Twitter = ({
           gradientUnits="userSpaceOnUse"
         >
           <stop stopColor={fill || 'var(--color-white)'} />
-          <stop offset="1" stopColor="#DEDEDE" />
+          <stop offset="1" stopColor="var(--color-grey-lightness)" />
         </linearGradient>
       </defs>
     </svg>
@@ -71,6 +75,7 @@ const Twitter = ({
 }
 
 const Reddit = ({ className, fill }: { className?: string; fill?: string }) => {
+  const id = useReactId()
   return (
     <svg
       className={className}
@@ -82,11 +87,11 @@ const Reddit = ({ className, fill }: { className?: string; fill?: string }) => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M24 12c0 6.6274-5.3726 12-12 12-6.62742 0-12-5.3726-12-12C0 5.37258 5.37258 0 12 0c6.6274 0 12 5.37258 12 12Zm-5.7544-1.7544C19.214 10.2456 20 11.0316 20 12c0 .7158-.4351 1.3333-1.0105 1.614.0281.1684.0421.3369.0421.5193 0 2.6947-3.1298 4.8702-7.0035 4.8702-3.87371 0-7.00353-2.1755-7.00353-4.8702 0-.1824.01403-.3649.0421-.5333-.61754-.2807-1.03859-.8842-1.03859-1.6 0-.9684.78596-1.7544 1.75438-1.7544.46316 0 .89825.1965 1.20702.4912 1.20702-.88419 2.87719-1.43156 4.74382-1.4877l.8843-4.18246c.028-.08421.0701-.15438.1403-.19649.0702-.0421.1544-.05614.2386-.0421l2.9053.61754c.1965-.42105.6175-.70175 1.1087-.70175.6878 0 1.2492.5614 1.2492 1.24912s-.5614 1.24912-1.2492 1.24912c-.6736 0-1.221-.53333-1.2491-1.19298l-2.5965-.54737-.8 3.74737c1.8246.07018 3.4807.63158 4.6737 1.4877.3088-.3088.7298-.4912 1.207-.4912ZM9.24913 12c-.68772 0-1.24912.5614-1.24912 1.2491 0 .6877.5614 1.2491 1.24912 1.2491s1.24917-.5614 1.24917-1.2491c0-.6877-.56145-1.2491-1.24917-1.2491Zm2.76487 5.4596c.4772 0 2.1053-.0561 2.9614-.9123.1264-.1263.1264-.3228.0281-.4631-.1263-.1263-.3368-.1263-.4631 0-.5474.5333-1.6843.7298-2.5123.7298-.8281 0-1.979-.1965-2.5123-.7298-.12632-.1263-.33685-.1263-.46316 0-.12632.1263-.12632.3368 0 .4631.8421.8422 2.48416.9123 2.96136.9123Zm1.4878-4.2105c0 .6877.5614 1.2491 1.2491 1.2491.6877 0 1.2491-.5614 1.2491-1.2491C16 12.5614 15.4386 12 14.7509 12c-.6877 0-1.2491.5614-1.2491 1.2491Z"
-        fill="url(#reddit)"
+        fill={`url(#${id})`}
       />
       <defs>
         <linearGradient
-          id="reddit"
+          id={id}
           x1="12"
           y1="0"
           x2="12"
@@ -94,7 +99,7 @@ const Reddit = ({ className, fill }: { className?: string; fill?: string }) => {
           gradientUnits="userSpaceOnUse"
         >
           <stop stopColor={fill || 'var(--color-white)'} />
-          <stop offset="1" stopColor="#DEDEDE" />
+          <stop offset="1" stopColor="var(--color-grey-lightness)" />
         </linearGradient>
       </defs>
     </svg>
@@ -132,6 +137,8 @@ const Facebook = ({
   className?: string
   fill?: string
 }) => {
+  const id = useReactId()
+
   return (
     <svg
       className={className}
@@ -141,11 +148,11 @@ const Facebook = ({
     >
       <path
         d="M24 12c0-6.62742-5.3726-12-12-12C5.37258 0 0 5.37258 0 12c0 5.9895 4.3882 10.954 10.125 11.8542v-8.3855H7.07812V12H10.125V9.35625c0-3.0075 1.7916-4.66875 4.5326-4.66875 1.3125 0 2.6862.23437 2.6862.23437V7.875h-1.5132c-1.4906 0-1.9556.92508-1.9556 1.875V12h3.3281l-.532 3.4687H13.875v8.3855C19.6118 22.954 24 17.9895 24 12Z"
-        fill="url(#facebook)"
+        fill={`url(#${id})`}
       />
       <defs>
         <linearGradient
-          id="facebook"
+          id={id}
           x1="12"
           y1="0"
           x2="12"
@@ -153,7 +160,7 @@ const Facebook = ({
           gradientUnits="userSpaceOnUse"
         >
           <stop stopColor={fill || 'var(--color-white)'} />
-          <stop offset="1" stopColor="#DEDEDE" />
+          <stop offset="1" stopColor="var(--color-grey-lightness)" />
         </linearGradient>
       </defs>
     </svg>
@@ -167,6 +174,7 @@ const Instagram = ({
   className?: string
   fill?: string
 }) => {
+  const id = useReactId()
   return (
     <svg
       className={className}
@@ -176,19 +184,19 @@ const Instagram = ({
     >
       <path
         d="M12 2.16094c3.2063 0 3.5859.01406 4.8469.07031 1.1719.05156 1.8047.24844 2.2265.4125.5579.21563.961.47813 1.3782.89531.4218.42188.6797.82032.8953 1.37813.164.42187.3609 1.05937.4125 2.22656.0562 1.26562.0703 1.64531.0703 4.84685 0 3.2063-.0141 3.586-.0703 4.8469-.0516 1.1719-.2485 1.8047-.4125 2.2266-.2156.5578-.4782.9609-.8953 1.3781-.4219.4219-.8203.6797-1.3782.8953-.4218.1641-1.0593.3609-2.2265.4125-1.2656.0562-1.6453.0703-4.8469.0703-3.20625 0-3.58594-.0141-4.84687-.0703-1.17188-.0516-1.80469-.2484-2.22657-.4125-.55781-.2156-.96093-.4781-1.37812-.8953-.42188-.4219-.67969-.8203-.89531-1.3781-.16407-.4219-.36094-1.0594-.4125-2.2266-.05625-1.2656-.07032-1.6453-.07032-4.8469 0-3.20622.01407-3.58591.07032-4.84685.05156-1.17188.24843-1.80469.4125-2.22656.21562-.55781.47812-.96094.89531-1.37813.42187-.42187.82031-.67968 1.37812-.89531.42188-.16406 1.05938-.36094 2.22657-.4125C8.41406 2.175 8.79375 2.16094 12 2.16094ZM12 0C8.74219 0 8.33438.0140625 7.05469.0703125 5.77969.126563 4.90313.332812 4.14375.628125 3.35156.9375 2.68125 1.34531 2.01563 2.01562 1.34531 2.68125.9375 3.35156.628125 4.13906.332812 4.90313.126563 5.775.0703125 7.05.0140625 8.33437 0 8.74219 0 12c0 3.2578.0140625 3.6656.0703125 4.9453.0562505 1.275.2624995 2.1516.5578125 2.911.309375.7921.717185 1.4625 1.387505 2.1281.66562.6656 1.33593 1.0781 2.12343 1.3828.76407.2953 1.63594.5015 2.91094.5578 1.27969.0562 1.6875.0703 4.9453.0703 3.2578 0 3.6656-.0141 4.9453-.0703 1.275-.0563 2.1516-.2625 2.911-.5578.7875-.3047 1.4578-.7172 2.1234-1.3828.6656-.6656 1.0781-1.336 1.3828-2.1235.2953-.764.5016-1.6359.5578-2.9109.0563-1.2797.0703-1.6875.0703-4.9453 0-3.25782-.014-3.66564-.0703-4.94532-.0562-1.275-.2625-2.15157-.5578-2.91094-.2953-.79688-.7031-1.46719-1.3734-2.13282C21.3188 1.35 20.6484.9375 19.8609.632812 19.0969.3375 18.225.13125 16.95.075 15.6656.0140625 15.2578 0 12 0Z"
-        fill="url(#instagram-a)"
+        fill={`url(#${id}-a)`}
       />
       <path
         d="M12 5.83594c-3.40312 0-6.16406 2.76094-6.16406 6.16406 0 3.4031 2.76094 6.1641 6.16406 6.1641 3.4031 0 6.1641-2.761 6.1641-6.1641 0-3.40312-2.761-6.16406-6.1641-6.16406Zm0 10.16246c-2.20781 0-3.99844-1.7906-3.99844-3.9984 0-2.20781 1.79063-3.99844 3.99844-3.99844 2.2078 0 3.9984 1.79063 3.9984 3.99844 0 2.2078-1.7906 3.9984-3.9984 3.9984Z"
-        fill="url(#instagram-b)"
+        fill={`url(#${id}-b)`}
       />
       <path
         d="M19.8469 5.59238c0 .79688-.6469 1.43907-1.4391 1.43907-.7969 0-1.439-.64688-1.439-1.43907 0-.79687.6468-1.43906 1.439-1.43906s1.4391.64688 1.4391 1.43906Z"
-        fill="url(#instagram-c)"
+        fill={`url(#${id}-c)`}
       />
       <defs>
         <linearGradient
-          id="instagram-a"
+          id={`${id}-a`}
           x1="11.993"
           y1="0"
           x2="11.993"
@@ -196,10 +204,10 @@ const Instagram = ({
           gradientUnits="userSpaceOnUse"
         >
           <stop stopColor={fill || 'var(--color-white)'} />
-          <stop offset="1" stopColor="#DEDEDE" />
+          <stop offset="1" stopColor="var(--color-grey-lightness)" />
         </linearGradient>
         <linearGradient
-          id="instagram-b"
+          id={`${id}-b`}
           x1="12"
           y1="5.83594"
           x2="12"
@@ -207,10 +215,10 @@ const Instagram = ({
           gradientUnits="userSpaceOnUse"
         >
           <stop stopColor={fill || 'var(--color-white)'} />
-          <stop offset="1" stopColor="#DEDEDE" />
+          <stop offset="1" stopColor="var(--color-grey-lightness)" />
         </linearGradient>
         <linearGradient
-          id="instagram-c"
+          id={`${id}-c`}
           x1="18.4078"
           y1="4.15332"
           x2="18.4078"
@@ -218,7 +226,7 @@ const Instagram = ({
           gradientUnits="userSpaceOnUse"
         >
           <stop stopColor={fill || 'var(--color-white)'} />
-          <stop offset="1" stopColor="#DEDEDE" />
+          <stop offset="1" stopColor="var(--color-grey-lightness)" />
         </linearGradient>
       </defs>
     </svg>
diff --git a/src/components/primitives/button/button.module.scss b/src/components/primitives/button/button.module.scss
index 78bf377..2320477 100644
--- a/src/components/primitives/button/button.module.scss
+++ b/src/components/primitives/button/button.module.scss
@@ -39,4 +39,15 @@
   &--small {
     padding: tovw(11.5px, 'default', 11.5px) tovw(24px, 'default', 10px);
   }
+
+  &--unstyled {
+    border: none;
+    padding: tovw(12px, 'default', 12px);
+    background: none;
+
+    &:hover {
+      background: none;
+      color: currentcolor;
+    }
+  }
 }
diff --git a/src/components/primitives/button/index.tsx b/src/components/primitives/button/index.tsx
index 198d9f9..dc4a8c5 100644
--- a/src/components/primitives/button/index.tsx
+++ b/src/components/primitives/button/index.tsx
@@ -9,7 +9,7 @@ import s from './button.module.scss'
 
 export type ButtonProps = JSX.IntrinsicElements['button'] & {
   size?: 'small' | 'medium' | 'large'
-  variant?: 'default' | 'primary'
+  variant?: 'default' | 'primary' | 'unstyled'
 }
 
 export const Button = React.forwardRef(
diff --git a/src/components/sections/homepage/hero/hero.module.scss b/src/components/sections/homepage/hero/hero.module.scss
index 72e90a4..6665359 100644
--- a/src/components/sections/homepage/hero/hero.module.scss
+++ b/src/components/sections/homepage/hero/hero.module.scss
@@ -27,15 +27,15 @@
     top: 50%;
     left: 50%;
     width: 100%;
-    height: 100%;
+    height: 101%;
     content: '';
     transform: translate(-50%, -50%);
     pointer-events: none;
     background: linear-gradient(
       0deg,
-      black 15%,
+      var(--color-black) 15%,
       rgb(9 9 121 / 0) 50%,
-      black 100%
+      var(--color-black) 100%
     );
     @supports (aspect-ratio: 16 / 9) {
       aspect-ratio: 16 / 9;
@@ -51,7 +51,7 @@
     background: radial-gradient(
       ellipse farthest-corner at center center,
       rgb(4 4 4 / 0.25) 45%,
-      #000 0
+      var(--color-black) 0
     );
     filter: blur(tovw(80px, 'default', 40px));
   }
diff --git a/src/css/global.scss b/src/css/global.scss
index 7a3e145..b6b2d63 100644
--- a/src/css/global.scss
+++ b/src/css/global.scss
@@ -18,6 +18,7 @@
   --color-black: #040404;
   --color-white: #fbfbfb;
   --color-grey-light: #8e8e8e;
+  --color-grey-lightness: #dedede;
 
   // Duration
   --duration-normal: 0.525s;