diff --git a/app/components/footer/FooterAddress.vue b/app/components/footer/FooterAddress.vue
new file mode 100644
index 0000000..51c6d70
--- /dev/null
+++ b/app/components/footer/FooterAddress.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { COMPANY_INFO } from '@base/constants/company-info/companyInfo.constant'
+
+const { t } = useI18n()
+
+const googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${COMPANY_INFO.street}_${COMPANY_INFO.postalCode}_${COMPANY_INFO.city}`
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <p class="font-medium text-neutral-400">
+      {{ t('footer.address') }}
+    </p>
+    <div class="flex flex-col">
+      <a
+        :href="googleMapsUrl"
+        class="group rounded focus-ring"
+      >
+        <p class="text-foreground group-hover:underline">
+          {{ COMPANY_INFO.street }}
+        </p>
+        <p class=" text-foreground  group-hover:underline">
+          {{ `${COMPANY_INFO.postalCode} ${COMPANY_INFO.city}` }}
+        </p>
+      </a>
+
+      <a
+        :href="`tel:${COMPANY_INFO.phoneNumber}`"
+        class="rounded text-foreground focus-ring hover:underline"
+      >
+        {{ COMPANY_INFO.phoneNumber }}
+      </a>
+    </div>
+  </div>
+</template>
diff --git a/app/components/footer/FooterCopyright.vue b/app/components/footer/FooterCopyright.vue
new file mode 100644
index 0000000..2f8070a
--- /dev/null
+++ b/app/components/footer/FooterCopyright.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const CURRENT_YEAR = new Date().getFullYear()
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="bg-primary">
+    <div class="container mx-auto flex flex-col gap-1 bg-primary px-4 py-2 text-caption text-white lg:flex-row lg:gap-6">
+      <p>
+        {{ t('footer.copyright', { year: CURRENT_YEAR }) }}
+      </p>
+      <a
+        href="/"
+        target="_blank"
+        class="rounded focus-ring hover:underline focus:underline"
+      >
+        {{ t('footer.privacy_policy') }}
+      </a>
+      <a
+        href="/"
+        target="_blank"
+        class="rounded focus-ring hover:underline focus:underline"
+      >
+        {{ t('footer.cookie_policy') }}
+      </a>
+    </div>
+  </div>
+</template>
diff --git a/app/components/footer/FooterLink.vue b/app/components/footer/FooterLink.vue
new file mode 100644
index 0000000..b791499
--- /dev/null
+++ b/app/components/footer/FooterLink.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { NavigationMenuLink } from 'radix-vue'
+
+import type { NavigationLink } from '~/types/navigation/navigationLink.type'
+
+defineProps<NavigationLink>()
+</script>
+
+<template>
+  <NavigationMenuLink as-child>
+    <NuxtLinkLocale
+      :to="to"
+      active-class="link-active"
+      class="group rounded text-subtext font-medium text-foreground focus-ring"
+    >
+      <div>
+        <slot />
+      </div>
+      <div class="h-px w-full bg-transparent duration-200" />
+    </NuxtLinkLocale>
+  </NavigationMenuLink>
+</template>
diff --git a/app/components/footer/FooterLinks.vue b/app/components/footer/FooterLinks.vue
new file mode 100644
index 0000000..7b3eb89
--- /dev/null
+++ b/app/components/footer/FooterLinks.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { FOOTER_LINKS } from '~/constants/footer/footerLinks.constant'
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <p class="font-medium text-neutral-400">
+      {{ t('footer.links') }}
+    </p>
+    <div class="flex flex-col">
+      <FooterLink
+        v-for="menuItem in FOOTER_LINKS"
+        v-bind="menuItem"
+        :key="menuItem.title"
+      >
+        {{ menuItem.title }}
+      </FooterLink>
+    </div>
+  </div>
+</template>
diff --git a/app/components/footer/FooterLogo.vue b/app/components/footer/FooterLogo.vue
new file mode 100644
index 0000000..9b8f944
--- /dev/null
+++ b/app/components/footer/FooterLogo.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
+<template>
+  <NuxtLinkLocale
+    :to="{
+      name: 'index',
+    }"
+    class="w-full max-w-48 rounded py-2 focus-ring"
+  >
+    {{ t('todo.logo') }}
+  </NuxtLinkLocale>
+</template>
diff --git a/app/components/footer/FooterSocials.vue b/app/components/footer/FooterSocials.vue
new file mode 100644
index 0000000..fa9735a
--- /dev/null
+++ b/app/components/footer/FooterSocials.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { SOCIAL_INFO } from '@base/constants/company-info/socialInfo.constant'
+</script>
+
+<template>
+  <div class="flex gap-2">
+    <NuxtLink
+      v-for="social in SOCIAL_INFO"
+      :key="social.label"
+      :to="social.url"
+      target="_blank"
+      class="flex size-8 items-center justify-center rounded-full bg-background focus-ring"
+    >
+      <AppIcon :icon="social.icon" />
+    </NuxtLink>
+  </div>
+</template>
diff --git a/app/components/footer/TheFooter.vue b/app/components/footer/TheFooter.vue
new file mode 100644
index 0000000..14750c9
--- /dev/null
+++ b/app/components/footer/TheFooter.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <footer class="w-screen border-t border-solid border-primary/10 bg-neutral-100">
+    <div>
+      <div class="container mx-auto grid w-full gap-8 px-4 py-12 lg:grid-cols-2 lg:items-center lg:justify-center lg:gap-0">
+        <div class="flex w-full flex-col gap-2 lg:flex-row lg:gap-12">
+          <FooterLogo />
+          <FooterSocials />
+        </div>
+        <div class="flex w-full flex-col justify-end gap-32 text-subtext lg:flex-row">
+          <FooterLinks />
+          <FooterAddress />
+        </div>
+      </div>
+    </div>
+    <FooterCopyright />
+  </footer>
+</template>
diff --git a/app/components/header/HeaderNavigationMenu.vue b/app/components/header/HeaderNavigationMenu.vue
index 5b05a4b..cda01c4 100644
--- a/app/components/header/HeaderNavigationMenu.vue
+++ b/app/components/header/HeaderNavigationMenu.vue
@@ -4,7 +4,7 @@ import {
   NavigationMenuRoot,
 } from 'radix-vue'
 
-import { NAVIGATION_LINKS } from '~/constants/header/navigationLinks.constant'
+import { HEADER_LINKS } from '~/constants/header/headerLinks.constant'
 </script>
 
 <template>
@@ -13,7 +13,7 @@ import { NAVIGATION_LINKS } from '~/constants/header/navigationLinks.constant'
       class="flex items-center gap-3"
     >
       <template
-        v-for="menuItem in NAVIGATION_LINKS"
+        v-for="menuItem in HEADER_LINKS"
         :key="menuItem.title"
       >
         <HeaderNavigationMenuLink v-bind="menuItem">
diff --git a/app/components/header/HeaderNavigationMenuLink.vue b/app/components/header/HeaderNavigationMenuLink.vue
index 45ad876..5945f6e 100644
--- a/app/components/header/HeaderNavigationMenuLink.vue
+++ b/app/components/header/HeaderNavigationMenuLink.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { NavigationMenuLink } from 'radix-vue'
 
-import type { NavigationLink } from '~/constants/header/navigationLinks.constant'
+import type { NavigationLink } from '~/types/navigation/navigationLink.type'
 
 defineProps<NavigationLink>()
 </script>
diff --git a/app/constants/footer/footerLinks.constant.ts b/app/constants/footer/footerLinks.constant.ts
new file mode 100644
index 0000000..17fe8e3
--- /dev/null
+++ b/app/constants/footer/footerLinks.constant.ts
@@ -0,0 +1,16 @@
+import type { NavigationLink } from '~/types/navigation/navigationLink.type'
+
+export const FOOTER_LINKS = [
+  {
+    title: 'Home',
+    to: {
+      name: 'index',
+    },
+  },
+  {
+    title: 'Login',
+    to: {
+      name: 'auth-login',
+    },
+  },
+] satisfies NavigationLink[]
diff --git a/app/constants/header/headerLinks.constant.ts b/app/constants/header/headerLinks.constant.ts
new file mode 100644
index 0000000..b10e38d
--- /dev/null
+++ b/app/constants/header/headerLinks.constant.ts
@@ -0,0 +1,16 @@
+import type { NavigationLink } from '~/types/navigation/navigationLink.type'
+
+export const HEADER_LINKS = [
+  {
+    title: 'Home',
+    to: {
+      name: 'index',
+    },
+  },
+  {
+    title: 'Login',
+    to: {
+      name: 'auth-login',
+    },
+  },
+] satisfies NavigationLink[]
diff --git a/app/constants/header/navigationLinks.constant.ts b/app/constants/header/navigationLinks.constant.ts
deleted file mode 100644
index 5d029ae..0000000
--- a/app/constants/header/navigationLinks.constant.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { TypedRouteLocationRaw } from '@typed-router'
-
-export interface NavigationLink {
-  title: string
-  isTargetBlank?: boolean
-  to: TypedRouteLocationRaw
-}
-
-export const NAVIGATION_LINKS = [
-  {
-    title: 'Home',
-    to: {
-      name: 'index',
-    },
-  },
-  {
-    title: 'Login',
-    to: {
-      name: 'auth-login',
-    },
-  },
-] satisfies NavigationLink[]
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index cae7488..620d59c 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -2,9 +2,10 @@
   <div>
     <div class="flex min-h-screen flex-col">
       <TheHeader />
-      <div class="container relative z-0 mx-auto flex w-full flex-1 flex-col items-center justify-center overflow-x-hidden px-4">
+      <div class="container relative z-0 mx-auto flex w-full flex-1 flex-col items-center justify-center px-4">
         <slot />
       </div>
     </div>
+    <TheFooter />
   </div>
 </template>
diff --git a/app/locales/nl.json b/app/locales/nl.json
index e3024fa..dba3315 100644
--- a/app/locales/nl.json
+++ b/app/locales/nl.json
@@ -1,4 +1,10 @@
 {
   "test.login.forgot_password": "Wachtwoord vergeten?",
-  "shared.hello": "Hallo, {name}!"
+  "shared.hello": "Hallo, {name}!",
+  "footer.address": "Adres",
+  "footer.cookie_policy": "Cookie Policy",
+  "footer.copyright": "© {year} Alle rechten voorbehouden",
+  "footer.privacy_policy": "Privacy Policy",
+  "footer.service": "Service",
+  "footer.links": "Links"
 }
diff --git a/app/types/navigation/navigationLink.type.ts b/app/types/navigation/navigationLink.type.ts
new file mode 100644
index 0000000..f99a1b8
--- /dev/null
+++ b/app/types/navigation/navigationLink.type.ts
@@ -0,0 +1,7 @@
+import type { TypedRouteLocationRaw } from '@typed-router'
+
+export interface NavigationLink {
+  title: string
+  isTargetBlank?: boolean
+  to: TypedRouteLocationRaw
+}
diff --git a/layers/base/assets/styles/main.scss b/layers/base/assets/styles/main.scss
index 8b364bf..cfc5acd 100644
--- a/layers/base/assets/styles/main.scss
+++ b/layers/base/assets/styles/main.scss
@@ -220,4 +220,8 @@
   .focus-ring:focus-within {
     @apply ring-2 ring-offset-2 ring-ring outline-none duration-200;
   }
+}
+
+body {
+  @apply bg-background overflow-x-hidden;
 }
\ No newline at end of file
diff --git a/layers/base/components/core/icon/AppAsyncIcon.vue b/layers/base/components/core/icon/AppAsyncIcon.vue
index dfff40b..83bf819 100644
--- a/layers/base/components/core/icon/AppAsyncIcon.vue
+++ b/layers/base/components/core/icon/AppAsyncIcon.vue
@@ -23,7 +23,6 @@ const svgComponent = shallowRef<Component | null>(null)
 async function setIcon(): Promise<void> {
   const resolvedComponent = await icons[props.icon]
 
-  // @ts-expect-error TODO fix this
   svgComponent.value = resolvedComponent.default
 }
 
diff --git a/layers/base/constants/company-info/companyInfo.constant.ts b/layers/base/constants/company-info/companyInfo.constant.ts
index c42fe72..6bc9823 100644
--- a/layers/base/constants/company-info/companyInfo.constant.ts
+++ b/layers/base/constants/company-info/companyInfo.constant.ts
@@ -1,6 +1,13 @@
+export interface CompanyInfo {
+  city: string
+  phoneNumber: string
+  postalCode: string
+  street: string
+}
+
 export const COMPANY_INFO = {
   city: 'TODO city',
-  phonenumber: 'TODO phonenumber',
+  phoneNumber: 'TODO phonenumber',
   postalCode: 'TODO postalcode',
   street: 'TODO street',
-} as const
+} satisfies CompanyInfo
diff --git a/layers/base/constants/company-info/socialInfo.constant.ts b/layers/base/constants/company-info/socialInfo.constant.ts
new file mode 100644
index 0000000..dec8829
--- /dev/null
+++ b/layers/base/constants/company-info/socialInfo.constant.ts
@@ -0,0 +1,30 @@
+import type { Icon } from '@base/icons/icons'
+
+export interface SocialInfo {
+  icon: Icon
+  label: string
+  url: string
+}
+
+export const SOCIAL_INFO = [
+  {
+    icon: 'linkedIn',
+    label: 'linkedin',
+    url: 'https://www.linkedin.com/',
+  },
+  {
+    icon: 'facebook',
+    label: 'facebook',
+    url: 'https://www.facebook.com/',
+  },
+  {
+    icon: 'instagram',
+    label: 'instagram',
+    url: 'https://www.instagram.com/',
+  },
+  {
+    icon: 'twitter',
+    label: 'twitter',
+    url: 'https://www.twitter.com/',
+  },
+] satisfies SocialInfo[]
diff --git a/layers/base/icons/FacebookIcon.vue b/layers/base/icons/FacebookIcon.vue
new file mode 100644
index 0000000..b4cb109
--- /dev/null
+++ b/layers/base/icons/FacebookIcon.vue
@@ -0,0 +1,26 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.37533 2.33335C3.24791 2.33335 2.33366 3.2476 2.33366 4.37502V9.62735C2.33366 10.7536 3.24674 11.6667 4.37299 11.6667H9.62766C10.754 11.6667 11.667 10.7535 11.667 9.62794V4.37269C11.667 3.24644 10.7539 2.33335 9.62766 2.33335H4.37533ZM1.16699 4.37502C1.16699 2.60327 2.60358 1.16669 4.37533 1.16669H9.62766C11.3982 1.16669 12.8337 2.6021 12.8337 4.37269V9.62794C12.8337 11.398 11.3982 12.8334 9.62766 12.8334H4.37299C2.60241 12.8334 1.16699 11.3979 1.16699 9.62735V4.37502Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.8916 7.52498C5.8916 7.20282 6.15277 6.94165 6.47493 6.94165H9.62493C9.9471 6.94165 10.2083 7.20282 10.2083 7.52498C10.2083 7.84715 9.9471 8.10832 9.62493 8.10832H6.47493C6.15277 8.10832 5.8916 7.84715 5.8916 7.52498Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.94141 6.44873C6.94141 5.2714 7.89616 4.31665 9.07349 4.31665H9.62474C9.94691 4.31665 10.2081 4.57782 10.2081 4.89998C10.2081 5.22215 9.94691 5.48332 9.62474 5.48332H9.07349C8.54049 5.48332 8.10807 5.91573 8.10807 6.44873V12.25C8.10807 12.5722 7.84691 12.8333 7.52474 12.8333C7.20257 12.8333 6.94141 12.5722 6.94141 12.25V6.44873Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/layers/base/icons/InstagramIcon.vue b/layers/base/icons/InstagramIcon.vue
new file mode 100644
index 0000000..d56b4e7
--- /dev/null
+++ b/layers/base/icons/InstagramIcon.vue
@@ -0,0 +1,26 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.37299 2.33335C3.24624 2.33335 2.33366 3.24635 2.33366 4.37269V9.62735C2.33366 10.7541 3.24666 11.6667 4.37299 11.6667H9.62766C10.7545 11.6667 11.667 10.7536 11.667 9.62794V4.37269C11.667 3.24585 10.7539 2.33335 9.62824 2.33335H4.37299ZM1.16699 4.37269C1.16699 2.60219 2.60174 1.16669 4.37299 1.16669H9.62824C11.3982 1.16669 12.8337 2.60152 12.8337 4.37269V9.62794C12.8337 11.3979 11.3988 12.8334 9.62766 12.8334H4.37299C2.60249 12.8334 1.16699 11.3986 1.16699 9.62735V4.37269Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.8842 3.3326L9.88734 3.33258C10.3157 3.33259 10.6702 3.67967 10.6678 4.11621L10.2741 4.1141C10.2741 4.11377 10.2741 4.11343 10.2741 4.11309H10.6678C10.6678 4.54376 10.3186 4.89301 9.88792 4.89301C9.45951 4.89301 9.10742 4.54601 9.10742 4.11309C9.10742 3.68182 9.45659 3.3349 9.8842 3.3326ZM9.50118 4.11155C9.50118 4.11102 9.50118 4.1105 9.50118 4.10997C9.50286 3.89827 9.67443 3.7272 9.88632 3.72634C9.88666 3.72634 9.887 3.72634 9.88734 3.72634C9.88753 3.72634 9.88773 3.72634 9.88792 3.72634C10.0993 3.72634 10.2741 3.89717 10.2741 4.11309H10.0845L10.2741 4.1141C10.2735 4.32789 10.1008 4.49812 9.89047 4.49925L9.88734 3.91592V4.49926C9.67812 4.49926 9.5017 4.32996 9.50118 4.11309C9.50118 4.11257 9.50117 4.11206 9.50118 4.11155ZM9.50118 4.11155C9.50118 4.11102 9.50118 4.1105 9.50118 4.10997L9.50118 4.11309"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.07219 5.92754C7.47989 5.33524 6.51959 5.33524 5.9273 5.92754C5.335 6.51984 5.335 7.48013 5.9273 8.07243C6.51959 8.66473 7.47989 8.66473 8.07219 8.07243C8.66448 7.48013 8.66448 6.51984 8.07219 5.92754ZM5.10234 5.10258C6.15025 4.05467 7.84924 4.05467 8.89714 5.10258C9.94505 6.15049 9.94505 7.84948 8.89714 8.89739C7.84924 9.9453 6.15025 9.9453 5.10234 8.89739C4.05443 7.84948 4.05443 6.15049 5.10234 5.10258Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/layers/base/icons/LinkedInIcon.vue b/layers/base/icons/LinkedInIcon.vue
new file mode 100644
index 0000000..b503970
--- /dev/null
+++ b/layers/base/icons/LinkedInIcon.vue
@@ -0,0 +1,32 @@
+<template>
+  <svg
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.04525 5.58496C5.36741 5.58496 5.62858 5.84613 5.62858 6.16829V9.03188C5.62858 9.35404 5.36741 9.61521 5.04525 9.61521C4.72308 9.61521 4.46191 9.35404 4.46191 9.03188V6.16829C4.46191 5.84613 4.72308 5.58496 5.04525 5.58496Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.04583 3.83252C5.368 3.83252 5.62917 4.09369 5.62917 4.41585V4.47419C5.62917 4.79635 5.368 5.05752 5.04583 5.05752C4.72367 5.05752 4.4625 4.79635 4.4625 4.47419V4.41585C4.4625 4.09369 4.72367 3.83252 5.04583 3.83252Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.14598 6.75163C7.80898 6.75163 7.53639 7.02421 7.53639 7.36121V9.03188C7.53639 9.35404 7.27523 9.61521 6.95306 9.61521C6.6309 9.61521 6.36973 9.35404 6.36973 9.03188V7.36121C6.36973 6.37988 7.16465 5.58496 8.14598 5.58496C9.12731 5.58496 9.92223 6.37988 9.92223 7.36121V9.03188C9.92223 9.35404 9.66106 9.61521 9.33889 9.61521C9.01673 9.61521 8.75556 9.35404 8.75556 9.03188V7.36121C8.75556 7.02421 8.48298 6.75163 8.14598 6.75163Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10.7124 3.28775C8.66228 1.23763 5.33796 1.23763 3.28784 3.28775C1.23773 5.33786 1.23773 8.66218 3.28784 10.7123C5.33796 12.7624 8.66228 12.7624 10.7124 10.7123C12.7625 8.66218 12.7625 5.33786 10.7124 3.28775ZM2.46289 2.46279C4.96861 -0.0429345 9.03162 -0.0429345 11.5373 2.46279C14.0431 4.96851 14.0431 9.03152 11.5373 11.5372C9.03162 14.043 4.96861 14.043 2.46289 11.5372C-0.0428354 9.03152 -0.0428354 4.96851 2.46289 2.46279Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/layers/base/icons/TwitterIcon.vue b/layers/base/icons/TwitterIcon.vue
new file mode 100644
index 0000000..b1c2db7
--- /dev/null
+++ b/layers/base/icons/TwitterIcon.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.83765 2.24705C3.03863 2.25993 3.21875 2.37558 3.31411 2.55296C3.79181 3.44146 4.59722 4.2489 5.47043 4.66461C5.60973 4.08838 5.88518 3.57333 6.28482 3.16494C6.8587 2.57851 7.65623 2.24585 8.57533 2.24585C9.17711 2.24585 9.69363 2.36104 10.1345 2.5963C10.4737 2.77734 10.7467 3.01808 10.9711 3.29585H12.2503C12.4655 3.29585 12.6631 3.41426 12.7646 3.60394C12.8661 3.79361 12.855 4.02376 12.7357 4.20276L11.7821 5.63318C11.7489 7.50472 11.1936 9.16094 10.1284 10.3683C9.02125 11.623 7.41115 12.3375 5.42533 12.3375C4.26288 12.3375 3.40799 12.0307 2.73835 11.5568C2.08653 11.0956 1.64312 10.4964 1.27927 9.99825C1.16024 9.83528 1.1339 9.62238 1.20961 9.43532C1.27696 9.26895 1.41653 9.14404 1.58649 9.09433L1.59159 9.09269L1.6405 9.0767C1.68386 9.06242 1.74543 9.04202 1.81952 9.01738C1.95919 8.97095 2.1416 8.91007 2.32621 8.84839C0.940339 6.91823 0.971321 4.38178 2.32603 2.48961C2.44326 2.32586 2.63667 2.23416 2.83765 2.24705ZM3.51065 9.6823L3.2668 9.76396C3.12041 9.81297 2.92502 9.87836 2.72907 9.94385C2.72421 9.94547 2.71934 9.9471 2.71448 9.94872C2.92413 10.1954 3.14773 10.4173 3.41224 10.6045C3.87179 10.9297 4.48778 11.1709 5.42533 11.1709C7.11451 11.1709 8.39191 10.5729 9.25355 9.59637C10.1232 8.61079 10.617 7.18433 10.617 5.45419C10.617 5.33902 10.6511 5.22643 10.715 5.13061L11.1604 4.46252H10.6753C10.4792 4.46252 10.2962 4.36397 10.1883 4.20023C10.0168 3.94013 9.82296 3.75246 9.58518 3.62557C9.34615 3.498 9.02646 3.41252 8.57533 3.41252C7.94801 3.41252 7.45813 3.63403 7.11865 3.98093C6.77606 4.33102 6.55421 4.8427 6.53334 5.47347C6.52754 5.64895 6.443 5.81248 6.3032 5.91869C6.16339 6.0249 5.98318 6.06248 5.81257 6.02102C4.64104 5.7363 3.57606 4.91388 2.83127 3.94428C2.14008 5.50672 2.41827 7.38268 3.74005 8.71897C3.88171 8.86218 3.93946 9.06835 3.8928 9.26431C3.84613 9.46027 3.70165 9.6183 3.51065 9.6823Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/layers/base/icons/icons.ts b/layers/base/icons/icons.ts
index 9626358..a59741c 100644
--- a/layers/base/icons/icons.ts
+++ b/layers/base/icons/icons.ts
@@ -1,34 +1,6 @@
-import type { Component } from 'vue'
-
-export interface BaseIcons {
-  alertCircle: Promise<Component>
-  arrowDown: Promise<Component>
-  arrowLeft: Promise<Component>
-  arrowRight: Promise<Component>
-  arrowUp: Promise<Component>
-  arrowUpDown: Promise<Component>
-  calendar: Promise<Component>
-  checkmark: Promise<Component>
-  checkmarkCircle: Promise<Component>
-  chevronDown: Promise<Component>
-  chevronLeft: Promise<Component>
-  chevronRight: Promise<Component>
-  chevronUp: Promise<Component>
-  close: Promise<Component>
-  eye: Promise<Component>
-  eyeSlash: Promise<Component>
-  filterLines: Promise<Component>
-  minus: Promise<Component>
-  profile: Promise<Component>
-  search: Promise<Component>
-  warning: Promise<Component>
-}
-
 export interface Icons {}
 
-export type AllIcons = BaseIcons & Icons
-
-export const icons: AllIcons = {
+export const icons = {
   alertCircle: import('@base/icons/AlertCircleIcon.vue'),
   arrowDown: import('@base/icons/ArrowDownIcon.vue'),
   arrowLeft: import('@base/icons/ArrowLeftIcon.vue'),
@@ -45,13 +17,18 @@ export const icons: AllIcons = {
   close: import('@base/icons/CloseIcon.vue'),
   eye: import('@base/icons/EyeIcon.vue'),
   eyeSlash: import('@base/icons/EyeSlashIcon.vue'),
+  facebook: import('@base/icons/FacebookIcon.vue'),
   filterLines: import('@base/icons/FilterLinesIcon.vue'),
+  instagram: import('@base/icons/InstagramIcon.vue'),
+  linkedIn: import('@base/icons/LinkedInIcon.vue'),
   minus: import('@base/icons/MinusIcon.vue'),
   profile: import('@base/icons/ProfileIcon.vue'),
   search: import('@base/icons/SearchIcon.vue'),
+  twitter: import('@base/icons/TwitterIcon.vue'),
   warning: import('@base/icons/WarningIcon.vue'),
-}
+} as const
 
+export type AllIcons = typeof icons
 export function extendIcons(customIcons: Icons): void {
   Object.assign(icons, customIcons)
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index f42e17a..44e8320 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -25,6 +25,10 @@ export default defineNuxtConfig({
       pathPrefix: false,
       path: '@/components',
     },
+    {
+      pathPrefix: false,
+      path: '@/views',
+    },
   ],
   devtools: { enabled: true },
   future: {