diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1501ec7..55c49a5 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,7 @@
 {
   "i18n-ally.localesPaths": [
     "layers/base/locales",
+    "layers/cart/locales",
     "layers/auth/locales",
     "app/locales"
   ],
diff --git a/app/components/header/HeaderActions.vue b/app/components/header/HeaderActions.vue
index 3bb4d8d..250e656 100644
--- a/app/components/header/HeaderActions.vue
+++ b/app/components/header/HeaderActions.vue
@@ -4,6 +4,7 @@
 <template>
   <div class="flex w-full items-center justify-end gap-2">
     <HeaderProfile />
+    <CartHeader />
     <TheLocaleSelector />
   </div>
 </template>
diff --git a/app/components/header/HeaderProfile.vue b/app/components/header/HeaderProfile.vue
index c3579c1..24fdab8 100644
--- a/app/components/header/HeaderProfile.vue
+++ b/app/components/header/HeaderProfile.vue
@@ -17,7 +17,6 @@ function onLogout() {
   <AppPopover
     v-if="currentUser"
     align="center"
-    hide-close-button
     hide-arrow
   >
     <AppIconButton
diff --git a/app/locales/nl.json b/app/locales/nl.json
index dba3315..b7fb9fc 100644
--- a/app/locales/nl.json
+++ b/app/locales/nl.json
@@ -6,5 +6,6 @@
   "footer.copyright": "© {year} Alle rechten voorbehouden",
   "footer.privacy_policy": "Privacy Policy",
   "footer.service": "Service",
-  "footer.links": "Links"
+  "footer.links": "Links",
+  "todo.logo": "TODO logo"
 }
diff --git a/layers/base/components/core/button/AppButtonLink.vue b/layers/base/components/core/button/AppButtonLink.vue
new file mode 100644
index 0000000..301525e
--- /dev/null
+++ b/layers/base/components/core/button/AppButtonLink.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import type { Icon } from '@wisemen/vue-core'
+import { AppIcon } from '@wisemen/vue-core'
+import type { RouteLocationRaw } from 'vue-router'
+
+import type { ButtonStyleProps } from './button.style'
+import { useButtonStyle } from './button.style'
+
+export interface AppButtonProps {
+  /**
+   * Whether the button is disabled.
+   * @default false
+   */
+  isDisabled?: boolean
+  /**
+   * Whether the button is in a loading state.
+   * @default false
+   */
+  isLoading?: boolean
+  /**
+   * The icon to display on the left side of the button.
+   * @default null
+   */
+  iconLeft?: Icon | null
+  /**
+   * The icon to display on the right side of the button.
+   * @default null
+   */
+  iconRight?: Icon | null
+  /**
+   * The size of the button.
+   * @default 'default'
+   */
+  size?: ButtonStyleProps['size']
+  to: RouteLocationRaw
+  /**
+   * The type of the button.
+   * @default 'button'
+   */
+  type?: 'button' | 'reset' | 'submit'
+  /**
+   * The variant of the button.
+   * @default 'default'
+   */
+  variant?: ButtonStyleProps['variant']
+}
+
+const props = withDefaults(defineProps<AppButtonProps>(), {
+  // TODO: find out why defaulting these to `null` breaks the `Icon` prop type when using `declare module`.
+  // iconLeft: null,
+  // iconRight: null,
+  isDisabled: false,
+  isLoading: false,
+  size: 'default',
+  type: 'button',
+  variant: 'default',
+})
+
+const buttonStyle = useButtonStyle()
+
+const buttonClasses = computed<string>(() =>
+  buttonStyle.button({
+    size: props.size,
+    variant: props.variant,
+  }))
+
+const buttonLeftIconClasses = computed<string>(() =>
+  buttonStyle.buttonLeftIcon({
+    isLoading: props.isLoading,
+    size: props.size,
+  }))
+
+const buttonRightIconClasses = computed<string>(() =>
+  buttonStyle.buttonRightIcon({
+    isLoading: props.isLoading,
+    size: props.size,
+  }))
+</script>
+
+<template>
+  <NuxtLinkLocale
+    :is-disabled="isDisabled || isLoading"
+    :type="props.type"
+    :to="props.to"
+    :class="buttonClasses"
+  >
+    <AppIcon
+      v-if="props.iconLeft !== null && props.iconLeft !== undefined"
+      :icon="props.iconLeft"
+      :class=" buttonLeftIconClasses"
+    />
+
+    <span
+      :class="{
+        'opacity-0': props.isLoading,
+      }"
+    >
+
+      <slot />
+    </span>
+
+    <div
+      v-if="props.isLoading"
+      class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+    >
+      <AppLoader
+        class="size-4"
+      />
+    </div>
+
+    <AppIcon
+      v-if="props.iconRight !== null && props.iconRight !== undefined"
+      :icon="props.iconRight"
+      :class="buttonRightIconClasses"
+    />
+  </NuxtLinkLocale>
+</template>
diff --git a/layers/base/components/core/button/AppRouterLinkButton.vue b/layers/base/components/core/button/AppRouterLinkButton.vue
deleted file mode 100644
index 03a9c82..0000000
--- a/layers/base/components/core/button/AppRouterLinkButton.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<script setup lang="ts">
-import {
-  type ButtonStyleProps,
-  useButtonStyle,
-} from '@base/components/core/button/button.style'
-import AppIcon from '@base/components/core/icon/AppIcon.vue'
-import AppKeyboardShortcut from '@base/components/core/keyboard/AppKeyboardShortcut.vue'
-import type { KeyboardStyleProps } from '@base/components/core/keyboard/keyboardKey.style'
-import AppLoader from '@base/components/core/loader/AppLoader.vue'
-import { useKeyboardShortcut } from '@base/composables/core/keyboardShortcut.composable'
-import type { Icon } from '@base/icons/icons'
-import type { KeyboardShortcutConfig } from '@base/types/core/keyboardShortcut.type'
-import type {
-  RouteLocationTyped,
-  Routes,
-} from '@base/types/core/routes.type.js'
-import {
-  computed,
-  onMounted,
-  ref,
-} from 'vue'
-import { RouterLink } from 'vue-router'
-
-interface Props {
-  /**
-   * The icon to display on the left side of the button.
-   * @default null
-   */
-  iconLeft?: Icon | null
-  /**
-   * The icon to display on the right side of the button.
-   * @default null
-   */
-  iconRight?: Icon | null
-  /**
-   * The keyboard shortcut keys which trigger the button.
-   * @default null
-   */
-  keyboardShortcut?: KeyboardShortcutConfig | null
-  /**
-   * The size of the button.
-   * @default 'default'
-   */
-  size?: ButtonStyleProps['size']
-  /**
-   * The route to link to.
-   */
-  to: RouteLocationTyped<keyof Routes>
-  /**
-   * The variant of the button.
-   * @default 'default'
-   */
-  variant?: ButtonStyleProps['variant']
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  // TODO: find out why defaulting these to `null` breaks the `Icon` prop type when using `declare module`.
-  // iconLeft: undefined,
-  isLoading: false,
-  // iconRight: undefined,
-  keyboardShortcut: null,
-  size: 'default',
-  type: 'button',
-  variant: 'default',
-})
-
-const routerLinkRef = ref<InstanceType<any> | null>(null)
-const buttonStyle = useButtonStyle()
-const buttonClasses = computed<string>(() =>
-  buttonStyle.button({
-    size: props.size,
-    variant: props.variant,
-  }))
-
-const buttonLeftIconClasses = computed<string>(() =>
-  buttonStyle.buttonLeftIcon({
-    isLoading: props.isLoading,
-    size: props.size,
-  }))
-
-const buttonRightIconClasses = computed<string>(() =>
-  buttonStyle.buttonRightIcon({
-    isLoading: props.isLoading,
-    size: props.size,
-  }))
-
-const buttonContentClasses = computed<string>(() =>
-  buttonStyle.buttonContent({
-    isLoading: props.isLoading,
-  }))
-
-const keyboardShortcutClasses = computed<string>(() =>
-  buttonStyle.keyboardShortcut({
-    isLoading: props.isLoading,
-  }))
-
-const buttonLoaderClasses = computed<string>(() => buttonStyle.loader())
-const buttonLoaderContainerClasses = computed<string>(() => buttonStyle.loaderContainer())
-
-const keyboardKeyVariant = computed<KeyboardStyleProps['variant']>(() => {
-  if (props.variant === 'default' || props.variant === 'destructive') {
-    return 'secondary'
-  }
-
-  if (props.variant === 'secondary') {
-    return 'bordered'
-  }
-
-  return 'default'
-})
-
-function createKeyboardShortcut(): void {
-  if (props.keyboardShortcut === null) {
-    throw new Error('Keyboard shortcut config is required to create a keyboard shortcut')
-  }
-
-  useKeyboardShortcut({
-    keys: props.keyboardShortcut.keys,
-    onTrigger: () => {
-      if (routerLinkRef.value !== null) {
-        routerLinkRef.value.$el.click()
-      }
-    },
-  })
-}
-
-onMounted(() => {
-  if (props.keyboardShortcut !== null) {
-    createKeyboardShortcut()
-  }
-})
-</script>
-
-<template>
-  <RouterLink
-    ref="routerLinkRef"
-    :to="props.to"
-    :class="buttonClasses"
-  >
-    <AppIcon
-      v-if="props.iconLeft !== null && props.iconLeft !== undefined"
-      :icon="props.iconLeft"
-      :class="buttonLeftIconClasses"
-    />
-
-    <span :class="buttonContentClasses">
-      <slot />
-    </span>
-
-    <div
-      v-if="props.isLoading"
-      :class="buttonLoaderContainerClasses"
-    >
-      <AppLoader
-        :class="buttonLoaderClasses"
-      />
-    </div>
-
-    <AppIcon
-      v-if="props.iconRight !== null && props.iconRight !== undefined"
-      :icon="props.iconRight"
-      :class="buttonRightIconClasses"
-    />
-
-    <AppKeyboardShortcut
-      v-if="props.keyboardShortcut !== null"
-      :keys="props.keyboardShortcut.keys"
-      :variant="keyboardKeyVariant"
-      :class="keyboardShortcutClasses"
-    />
-  </RouterLink>
-</template>
diff --git a/layers/base/components/core/divider/AppDivider.vue b/layers/base/components/core/divider/AppDivider.vue
new file mode 100644
index 0000000..a971461
--- /dev/null
+++ b/layers/base/components/core/divider/AppDivider.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { tv } from '@base/libs/twVariants.lib'
+
+interface Props {
+  direction?: 'horizontal' | 'vertical'
+}
+const { direction = 'horizontal' } = defineProps<Props>()
+const dividerStyle = tv({
+  base: 'bg-neutral-100',
+  variants: {
+    direction: {
+      horizontal: 'h-px w-full',
+      vertical: 'h-full w-px',
+    },
+  },
+})
+const classes = computed<string>(() => dividerStyle({
+  direction,
+}))
+</script>
+
+<template>
+  <div :class="classes" />
+</template>
diff --git a/layers/base/components/core/icon/AppIconCircle.vue b/layers/base/components/core/icon/AppIconCircle.vue
new file mode 100644
index 0000000..6413ad8
--- /dev/null
+++ b/layers/base/components/core/icon/AppIconCircle.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { IconStyleProps } from '@base/components/core/icon/icon.style'
+import type { Icon } from '@base/icons/icons'
+import { twMerge } from '@base/libs/twMerge.lib'
+
+interface Props {
+  isLoading?: boolean
+  icon: Icon
+  size?: IconStyleProps['size']
+}
+
+const { icon, size = 'default' } = defineProps<Props>()
+
+const attrs = useAttrs()
+</script>
+
+<template>
+  <div :class="twMerge('flex size-8 flex-none items-center justify-center rounded-full bg-white', attrs?.class as string)">
+    <Transition
+      name="fade"
+    >
+      <div v-if="!isLoading">
+        <AppIcon
+          :size="size"
+          :icon="icon"
+        />
+      </div>
+
+      <AppLoader
+        v-else
+        class="size-5"
+      />
+    </Transition>
+  </div>
+</template>
diff --git a/layers/base/components/core/increment/AppIncrement.vue b/layers/base/components/core/increment/AppIncrement.vue
new file mode 100644
index 0000000..7dcc484
--- /dev/null
+++ b/layers/base/components/core/increment/AppIncrement.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import AppIcon from '@base/components/core/icon/AppIcon.vue'
+
+const props = defineProps<{
+  id?: string
+  variant?: 'default' | 'white'
+}>()
+
+const amount = defineModel<null | number>({
+  required: true,
+})
+
+const canDecrement = computed<boolean>(() => {
+  return amount.value !== null && amount.value > 0
+})
+
+function increment() {
+  if (amount.value === null) {
+    amount.value = 1
+
+    return
+  }
+
+  amount.value++
+}
+
+function decrement() {
+  if (amount.value === null || amount.value === 0) {
+    return
+  }
+
+  amount.value--
+}
+
+const amountNumber = computed<null | number | string>({
+  get() {
+    return amount.value ?? null
+  },
+  set(value) {
+    if (typeof value === 'string') {
+      amount.value = null
+
+      return
+    }
+
+    amount.value = value ?? null
+  },
+})
+
+const backgroundColor = computed<string>(() => {
+  return props.variant === 'white' ? 'bg-white disabled:text-foreground/30' : 'bg-background disabled:text-foreground/30'
+})
+</script>
+
+<template>
+  <div class="relative flex flex-1 text-foreground">
+    <button
+      :disabled="!canDecrement"
+      :class="backgroundColor"
+      class="z-10 flex size-10 items-center justify-center rounded-l-button focus-ring focus:z-20"
+      @click="decrement"
+    >
+      <AppIcon
+        icon="minus"
+      />
+    </button>
+    <input
+      :id="id"
+      v-model="amountNumber"
+      :class="backgroundColor"
+      placeholder="0"
+      class="relative z-10 h-10 w-full flex-1 rounded-none text-center focus-ring focus:z-20"
+      type="number"
+    >
+    <button
+      :class="backgroundColor"
+      class="z-10 flex size-10 items-center justify-center rounded-r-button focus-ring focus:z-20"
+      @click="increment"
+    >
+      <AppIcon
+        icon="plus"
+      />
+    </button>
+  </div>
+</template>
+
+<style scoped>
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+</style>
diff --git a/layers/base/components/core/increment/FormIncrement.vue b/layers/base/components/core/increment/FormIncrement.vue
new file mode 100644
index 0000000..e0f5c57
--- /dev/null
+++ b/layers/base/components/core/increment/FormIncrement.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import AppIncrement from '@base/components/core/increment/AppIncrement.vue'
+import type { FormFieldErrors } from '@wisemen/vue-core'
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Whether the input is disabled.
+     */
+    isDisabled?: boolean
+    /**
+     *  Whether the input is required.
+     */
+    isRequired?: boolean
+    /**
+     * Whether the input is touched.
+     */
+    isTouched: boolean
+    /**
+     * The errors associated with the input.
+     */
+    errors: FormFieldErrors
+    /**
+     * The label of the input.
+     */
+    label: string
+  }>(),
+  {
+    isDisabled: false,
+    isLoading: false,
+    isRequired: false,
+    isTouched: false,
+  },
+)
+
+const model = defineModel<null | number>({
+  required: true,
+})
+</script>
+
+<template>
+  <FormElement
+    v-slot="{ id }"
+    :errors="props.errors"
+    :is-required="props.isRequired"
+    :is-touched="props.isTouched"
+    :is-disabled="props.isDisabled"
+    :label="props.label"
+  >
+    <AppIncrement
+      :id="id"
+      v-model="model"
+    />
+  </FormElement>
+</template>
diff --git a/layers/base/components/seo/SeoWrapper.vue b/layers/base/components/seo/SeoWrapper.vue
index 8c0c71b..df7fd22 100644
--- a/layers/base/components/seo/SeoWrapper.vue
+++ b/layers/base/components/seo/SeoWrapper.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable @intlify/vue-i18n/no-dynamic-keys -->
 <script setup lang="ts">
 const route = useRoute()
 const { t } = useI18n()
@@ -7,8 +8,10 @@ const head = useLocaleHead({
   identifierAttribute: 'id',
 })
 
-// eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys
-const title = computed<string>(() => t('layouts.title', { title: t(route.meta.title as string ?? 'TBD') }))
+const title = computed<string>(() => t(
+  'layouts.title',
+  { title: route.meta.title != null ? t(route.meta.title as string) : 'TBD' },
+))
 </script>
 
 <template>
diff --git a/layers/base/icons/CartIcon.vue b/layers/base/icons/CartIcon.vue
new file mode 100644
index 0000000..ef9368d
--- /dev/null
+++ b/layers/base/icons/CartIcon.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.98125 1.66666L13.019 1.66666C13.6404 1.66665 14.1549 1.66664 14.5763 1.69984C15.0154 1.73443 15.4196 1.80863 15.8052 1.99315C16.4061 2.28066 16.907 2.74159 17.2434 3.3165C17.4594 3.68547 17.5669 4.08212 17.6378 4.5168C17.7059 4.93406 17.7486 5.44678 17.8002 6.06596L18.3892 13.1346C18.4494 13.8559 18.4988 14.4491 18.4983 14.9329C18.4978 15.4336 18.4458 15.8975 18.2528 16.338C17.955 17.0174 17.4391 17.5782 16.7867 17.9313C16.3638 18.1603 15.9058 18.2506 15.4069 18.2927C14.9248 18.3333 14.3295 18.3333 13.6056 18.3333H6.39465C5.67078 18.3333 5.07548 18.3333 4.59343 18.2927C4.09447 18.2506 3.63645 18.1603 3.21357 17.9313C2.56118 17.5782 2.04524 17.0174 1.74746 16.338C1.55444 15.8975 1.50245 15.4336 1.50196 14.9329C1.50148 14.4491 1.55092 13.8559 1.61105 13.1345L2.20009 6.06596C2.25168 5.44678 2.2944 4.93405 2.36249 4.5168C2.43342 4.08212 2.54093 3.68547 2.75684 3.3165C3.09325 2.74159 3.59419 2.28066 4.19505 1.99315C4.58068 1.80863 4.98489 1.73443 5.42396 1.69984C5.84543 1.66664 6.35993 1.66665 6.98125 1.66666ZM5.55485 3.36136C5.2168 3.38799 5.04055 3.43622 4.91443 3.49657C4.614 3.64032 4.36353 3.87079 4.19533 4.15824C4.12471 4.27892 4.06201 4.45055 4.0074 4.78522C3.95114 5.13 3.91328 5.57698 3.85828 6.23701L3.27495 13.237C3.2111 14.0032 3.16822 14.5261 3.16862 14.9312C3.16902 15.3274 3.21279 15.5294 3.27397 15.669C3.42286 16.0087 3.68083 16.2891 4.00703 16.4657C4.14105 16.5382 4.33873 16.5986 4.73349 16.6319C5.13718 16.666 5.66187 16.6667 6.43068 16.6667H13.5696C14.3384 16.6667 14.8631 16.666 15.2668 16.6319C15.6616 16.5986 15.8592 16.5382 15.9933 16.4657C16.3195 16.2891 16.5774 16.0087 16.7263 15.669C16.7875 15.5294 16.8313 15.3274 16.8317 14.9312C16.8321 14.5261 16.7892 14.0032 16.7253 13.237L16.142 6.23701C16.087 5.57698 16.0492 5.13 15.9929 4.78522C15.9383 4.45055 15.8756 4.27892 15.805 4.15824C15.6368 3.87079 15.3863 3.64033 15.0859 3.49657C14.9597 3.43622 14.7835 3.38799 14.4454 3.36136C14.0972 3.33393 13.6486 3.33332 12.9863 3.33332L7.01401 3.33332C6.35169 3.33332 5.90311 3.33392 5.55485 3.36136ZM6.66681 5.83332C7.12705 5.83332 7.50015 6.20642 7.50015 6.66666C7.50015 7.3297 7.76354 7.96558 8.23238 8.43442C8.70122 8.90326 9.3371 9.16666 10.0001 9.16666C10.6632 9.16666 11.2991 8.90326 11.7679 8.43442C12.2368 7.96558 12.5001 7.3297 12.5001 6.66666C12.5001 6.20642 12.8732 5.83332 13.3335 5.83332C13.7937 5.83332 14.1668 6.20642 14.1668 6.66666C14.1668 7.77173 13.7278 8.83153 12.9464 9.61294C12.165 10.3943 11.1052 10.8333 10.0001 10.8333C8.89508 10.8333 7.83527 10.3943 7.05387 9.61294C6.27247 8.83153 5.83348 7.77173 5.83348 6.66666C5.83348 6.20642 6.20657 5.83332 6.66681 5.83332Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/layers/base/icons/PlusIcon.vue b/layers/base/icons/PlusIcon.vue
new file mode 100644
index 0000000..e9eb6fd
--- /dev/null
+++ b/layers/base/icons/PlusIcon.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.00033 2.66666C8.36852 2.66666 8.66699 2.96513 8.66699 3.33332V7.33332H12.667C13.0352 7.33332 13.3337 7.6318 13.3337 7.99999C13.3337 8.36818 13.0352 8.66666 12.667 8.66666H8.66699V12.6667C8.66699 13.0348 8.36852 13.3333 8.00033 13.3333C7.63214 13.3333 7.33366 13.0348 7.33366 12.6667V8.66666H3.33366C2.96547 8.66666 2.66699 8.36818 2.66699 7.99999C2.66699 7.6318 2.96547 7.33332 3.33366 7.33332H7.33366V3.33332C7.33366 2.96513 7.63214 2.66666 8.00033 2.66666Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/layers/base/icons/TrashIcon.vue b/layers/base/icons/TrashIcon.vue
new file mode 100644
index 0000000..df83677
--- /dev/null
+++ b/layers/base/icons/TrashIcon.vue
@@ -0,0 +1,32 @@
+<template>
+  <svg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.76292 4.74631C3.92063 4.576 4.14223 4.47919 4.37435 4.47919H15.6244C15.8565 4.47919 16.0781 4.576 16.2358 4.74631C16.3935 4.91662 16.473 5.145 16.4552 5.37643L15.6509 15.8327C15.5986 16.5131 15.2914 17.1486 14.7907 17.6122C14.2901 18.0758 13.6329 18.3334 12.9505 18.3334H7.04816C6.36582 18.3334 5.70863 18.0758 5.20799 17.6122C4.70734 17.1486 4.40014 16.5131 4.34781 15.8327L3.54347 5.37643C3.52567 5.145 3.6052 4.91662 3.76292 4.74631ZM5.27425 6.14585L6.00956 15.7049C6.02969 15.9666 6.14785 16.211 6.3404 16.3893C6.53296 16.5676 6.78572 16.6667 7.04816 16.6667H12.9505C13.213 16.6667 13.4657 16.5676 13.6583 16.3893C13.8509 16.211 13.969 15.9666 13.9891 15.7049L14.7245 6.14585H5.27425Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.5 5.31252C2.5 4.85228 2.8731 4.47919 3.33333 4.47919H16.6667C17.1269 4.47919 17.5 4.85228 17.5 5.31252C17.5 5.77276 17.1269 6.14585 16.6667 6.14585H3.33333C2.8731 6.14585 2.5 5.77276 2.5 5.31252Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.6556 3.33335C7.62797 3.33335 7.60148 3.34433 7.58194 3.36386C7.56241 3.3834 7.55143 3.40989 7.55143 3.43752V4.47919H12.4473V3.43752C12.4473 3.40989 12.4363 3.3834 12.4168 3.36386C12.3972 3.34433 12.3707 3.33335 12.3431 3.33335H7.6556ZM6.40343 2.18535C6.73553 1.85326 7.18594 1.66669 7.6556 1.66669H12.3431C12.8128 1.66669 13.2632 1.85326 13.5953 2.18535C13.9274 2.51745 14.1139 2.96787 14.1139 3.43752V5.31252C14.1139 5.77276 13.7408 6.14585 13.2806 6.14585H6.7181C6.25786 6.14585 5.88477 5.77276 5.88477 5.31252V3.43752C5.88477 2.96787 6.07134 2.51745 6.40343 2.18535Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.5 14.1666C7.5 13.7064 7.8731 13.3333 8.33333 13.3333H11.6667C12.1269 13.3333 12.5 13.7064 12.5 14.1666C12.5 14.6269 12.1269 15 11.6667 15H8.33333C7.8731 15 7.5 14.6269 7.5 14.1666Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/layers/base/icons/icons.ts b/layers/base/icons/icons.ts
index a59741c..4285993 100644
--- a/layers/base/icons/icons.ts
+++ b/layers/base/icons/icons.ts
@@ -8,6 +8,7 @@ export const icons = {
   arrowUp: import('@base/icons/ArrowUpIcon.vue'),
   arrowUpDown: import('@base/icons/ArrowUpDownIcon.vue'),
   calendar: import('@base/icons/CalendarIcon.vue'),
+  cart: import('@base/icons/CartIcon.vue'),
   checkmark: import('@base/icons/CheckmarkIcon.vue'),
   checkmarkCircle: import('@base/icons/CheckmarkCircleIcon.vue'),
   chevronDown: import('@base/icons/ChevronDownIcon.vue'),
@@ -22,8 +23,10 @@ export const icons = {
   instagram: import('@base/icons/InstagramIcon.vue'),
   linkedIn: import('@base/icons/LinkedInIcon.vue'),
   minus: import('@base/icons/MinusIcon.vue'),
+  plus: import('@base/icons/PlusIcon.vue'),
   profile: import('@base/icons/ProfileIcon.vue'),
   search: import('@base/icons/SearchIcon.vue'),
+  trash: import('@base/icons/TrashIcon.vue'),
   twitter: import('@base/icons/TwitterIcon.vue'),
   warning: import('@base/icons/WarningIcon.vue'),
 } as const
diff --git a/layers/base/mocks/address.mock.ts b/layers/base/mocks/address.mock.ts
new file mode 100644
index 0000000..4f38576
--- /dev/null
+++ b/layers/base/mocks/address.mock.ts
@@ -0,0 +1,29 @@
+import {
+  createEmail,
+  createString,
+} from '@base/mocks/utils.mock'
+import type { Address } from '@base/models/address/address.model'
+import { generateUuid } from '@base/utils/uuid/generateUuid.util'
+
+export function createAddress(overrides: Partial<Address> = {}): Address {
+  return {
+    id: generateUuid(),
+    box: createString(12),
+    city: createString(12),
+    country: createString(12),
+    email: createEmail(),
+    label: createString(12),
+    number: createString(12),
+    postalCode: createString(12),
+    street: createString(12),
+    types: [
+      'delivery',
+      'invoice',
+    ].splice(Math.floor(Math.random() * 2), 1),
+    ...overrides,
+  } as Address
+}
+
+export function createAddresses(count: number): Address[] {
+  return Array.from({ length: count }, () => createAddress())
+}
diff --git a/layers/base/mocks/api.mock.ts b/layers/base/mocks/api.mock.ts
new file mode 100644
index 0000000..53f628e
--- /dev/null
+++ b/layers/base/mocks/api.mock.ts
@@ -0,0 +1,3 @@
+export function createApiMock<T>(data: T): Promise<T> {
+  return Promise.resolve(data)
+}
diff --git a/layers/base/mocks/paginatedData.mock.ts b/layers/base/mocks/paginatedData.mock.ts
new file mode 100644
index 0000000..0cd37f9
--- /dev/null
+++ b/layers/base/mocks/paginatedData.mock.ts
@@ -0,0 +1,14 @@
+import type {
+  PaginatedApiData,
+} from '@base/models/paginated-data/paginatedApiData.model'
+
+export function createPaginatedData<T>(data: T[]): PaginatedApiData<T> {
+  return {
+    data,
+    pagination: {
+      count: data.length,
+      perPage: 20,
+      total: data.length,
+    },
+  } satisfies PaginatedApiData<T>
+}
diff --git a/layers/base/mocks/utils.mock.ts b/layers/base/mocks/utils.mock.ts
new file mode 100644
index 0000000..64c9f5b
--- /dev/null
+++ b/layers/base/mocks/utils.mock.ts
@@ -0,0 +1,34 @@
+import { generateUuid } from '@base/utils/uuid/generateUuid.util'
+
+export function createString(length: number = 12): string {
+  return Math.random().toString(36).substring(2, length + 2)
+}
+
+export function createNumber(min: number = 0, max: number = 1000): number {
+  // whole number
+  if (min % 1 === 0 && max % 1 === 0) {
+    return Math.floor(Math.random() * (max - min + 1) + min)
+  }
+
+  return Math.random() * (max - min) + min
+}
+
+export function createBoolean(): boolean {
+  return Math.random() < 0.5
+}
+
+export function createUuid(): string {
+  return generateUuid()
+}
+
+export function createDate(): Date {
+  const date = new Date()
+
+  date.setFullYear(date.getFullYear() - Math.floor(Math.random() * 10))
+
+  return date
+}
+
+export function createEmail(): string {
+  return `${createString(8)}@${createString(8)}.com`
+}
diff --git a/layers/base/models/paginated-data/paginatedData.model.ts b/layers/base/models/paginated-data/paginatedApiData.model.ts
similarity index 69%
rename from layers/base/models/paginated-data/paginatedData.model.ts
rename to layers/base/models/paginated-data/paginatedApiData.model.ts
index eeeabb7..209b93b 100644
--- a/layers/base/models/paginated-data/paginatedData.model.ts
+++ b/layers/base/models/paginated-data/paginatedApiData.model.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod'
 
-export function paginatedDataSchema<T extends z.ZodType>(
+export function paginatedApiDataSchema<T extends z.ZodType>(
   schema: T,
 ) {
   return z.object({
@@ -13,11 +13,11 @@ export function paginatedDataSchema<T extends z.ZodType>(
   })
 }
 
-export interface PaginatedData<TSchema> {
+export interface PaginatedApiData<TSchema> {
   data: TSchema[]
   pagination: {
     count: number
-    per_page: number
+    perPage: number
     total: number
   }
 }
diff --git a/layers/base/utils/uuid/generateUuid.util.ts b/layers/base/utils/uuid/generateUuid.util.ts
new file mode 100644
index 0000000..cfe3c2d
--- /dev/null
+++ b/layers/base/utils/uuid/generateUuid.util.ts
@@ -0,0 +1,9 @@
+export function generateUuid(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0
+
+    const v = c === 'x' ? r : (r & 0x3) | 0x8
+
+    return v.toString(16)
+  })
+}
diff --git a/layers/cart/api/cart/services/cart.service.ts b/layers/cart/api/cart/services/cart.service.ts
index 13b8d5c..3c7fe56 100644
--- a/layers/cart/api/cart/services/cart.service.ts
+++ b/layers/cart/api/cart/services/cart.service.ts
@@ -1,63 +1,76 @@
-import { useApi } from '@base/composables/api/useApi'
+import { createApiMock } from '@base/mocks/api.mock'
+import { createCart } from '@cart/mocks/cart.mock'
 import type { CartAddForm } from '@cart/models/cart/add/cartAddForm.model'
 import type { CartAddBulkForm } from '@cart/models/cart/add-bulk/cartAddBulkForm.model'
-import { CartTransformer } from '@cart/models/cart/cart.transformer'
 import type { Cart } from '@cart/models/cart/get/cart.model'
-import { cartDtoSchema } from '@cart/models/cart/get/cartDto.model'
 import type { CartRemoveForm } from '@cart/models/cart/remove/cartRemoveForm.model'
 import type { CartUpdateForm } from '@cart/models/cart/update/cartUpdateForm.model'
 
 export class CartService {
-  static async add(addForm: CartAddForm): Promise<Cart> {
-    const api = useApi()
-    const data = await api.post({
-      body: CartTransformer.toAddDto(addForm),
-      responseSchema: cartDtoSchema,
-      url: `/cart/${addForm.cartId}/items`,
-    })
-
-    return CartTransformer.toCart(data)
+  static async add(_addForm: CartAddForm): Promise<Cart> {
+    // const api = useApi()
+    // const body = CartTransformer.toAddDto(addForm)
+    // return CartTransformer.toCart(response)
+    const response = await createApiMock(createCart())
+
+    return response
   }
 
-  static async addBulk(addForm: CartAddBulkForm): Promise<Cart> {
-    const api = useApi()
-    const data = await api.post({
-      body: CartTransformer.toAddBulkDto(addForm),
-      responseSchema: cartDtoSchema,
-      url: `/cart/${addForm.cartId}/items/bulk`,
-    })
+  static async addBulk(_addForm: CartAddBulkForm): Promise<Cart> {
+    // const api = useApi()
+    // const data = await api.post({
+    //   body: CartTransformer.toAddBulkDto(addForm),
+    //   responseSchema: cartDtoSchema,
+    //   url: `/cart/${addForm.cartId}/items/bulk`,
+    // })
+
+    // return CartTransformer.toCart(data)
+
+    const response = await createApiMock(createCart())
 
-    return CartTransformer.toCart(data)
+    return response
   }
 
   static async get(): Promise<Cart> {
-    const api = useApi()
-    const data = await api.get({
-      responseSchema: cartDtoSchema,
-      url: `/cart`,
-    })
+    // const api = useApi()
+    // const data = await api.get({
+    //   responseSchema: cartDtoSchema,
+    //   url: `/cart`,
+    // })
+
+    // return CartTransformer.toCart(data)
+
+    const response = await createApiMock(createCart())
 
-    return CartTransformer.toCart(data)
+    return response
   }
 
-  static async remove(removeForm: CartRemoveForm): Promise<Cart> {
-    const api = useApi()
-    const data = await api.delete({
-      responseSchema: cartDtoSchema,
-      url: `/cart/${removeForm.cartId}/items/${removeForm.orderProductId}`,
-    })
+  static async remove(_removeForm: CartRemoveForm): Promise<Cart> {
+    // const api = useApi()
+    // const data = await api.delete({
+    //   responseSchema: cartDtoSchema,
+    //   url: `/cart/${removeForm.cartId}/items/${removeForm.orderProductId}`,
+    // })
 
-    return CartTransformer.toCart(data)
+    // return CartTransformer.toCart(data)
+
+    const response = await createApiMock(createCart())
+
+    return response
   }
 
-  static async update(updateForm: CartUpdateForm): Promise<Cart> {
-    const api = useApi()
-    const data = await api.post({
-      body: CartTransformer.toUpdateDto(updateForm),
-      responseSchema: cartDtoSchema,
-      url: `/cart/${updateForm.cartId}/items/${updateForm.orderProductId}`,
-    })
+  static async update(_updateForm: CartUpdateForm): Promise<Cart> {
+    // const api = useApi()
+    // const data = await api.post({
+    //   body: CartTransformer.toUpdateDto(updateForm),
+    //   responseSchema: cartDtoSchema,
+    //   url: `/cart/${updateForm.cartId}/items/${updateForm.orderProductId}`,
+    // })
+
+    // return CartTransformer.toCart(data)
+
+    const response = await createApiMock(createCart())
 
-    return CartTransformer.toCart(data)
+    return response
   }
 }
diff --git a/layers/cart/api/order/queries/useOrdersInfinite.ts b/layers/cart/api/order/queries/useOrdersInfinite.ts
index e8c9b68..cecfccd 100644
--- a/layers/cart/api/order/queries/useOrdersInfinite.ts
+++ b/layers/cart/api/order/queries/useOrdersInfinite.ts
@@ -1,4 +1,4 @@
-import type { PaginatedData } from '@base/models/paginated-data/paginatedData.model'
+import type { PaginatedApiData } from '@base/models/paginated-data/paginatedApiData.model'
 import { orderKeys } from '@cart/api/order/keys/order.keys'
 import { OrderService } from '@cart/api/order/services/order.service'
 import type { OrderIndex } from '@cart/models/order/index/orderIndex.model'
@@ -8,8 +8,8 @@ export function useOrdersInfinite(search: Ref<null | string>) {
   const convertedSearch = computed<string>(() => search.value ?? '')
 
   return useInfiniteQuery({
-    getNextPageParam: (lastPage: PaginatedData<OrderIndex>, _, lastPageParams) => {
-      const perPage = lastPage.pagination.per_page
+    getNextPageParam: (lastPage: PaginatedApiData<OrderIndex>, _, lastPageParams) => {
+      const perPage = lastPage.pagination.perPage
       const total = lastPage.pagination.total
 
       if (perPage * lastPageParams < total) {
diff --git a/layers/cart/api/order/services/order.service.ts b/layers/cart/api/order/services/order.service.ts
index cd997a9..5655791 100644
--- a/layers/cart/api/order/services/order.service.ts
+++ b/layers/cart/api/order/services/order.service.ts
@@ -1,43 +1,48 @@
-import { useApi } from '@base/composables/api/useApi'
-import {
-  type PaginatedData,
-  paginatedDataSchema,
-} from '@base/models/paginated-data/paginatedData.model'
+import { createApiMock } from '@base/mocks/api.mock'
+import { createPaginatedData } from '@base/mocks/paginatedData.mock'
+import type {
+  PaginatedApiData,
+} from '@base/models/paginated-data/paginatedApiData.model'
+import { createOrder, createOrders } from '@cart/mocks/order.mock'
 import type { Order } from '@cart/models/order/detail/order.model'
-import { orderDtoSchema } from '@cart/models/order/detail/orderDto.model'
 import type { OrderIndex } from '@cart/models/order/index/orderIndex.model'
-import { orderIndexDtoSchema } from '@cart/models/order/index/orderIndexDto.model'
-import { OrderTransformer } from '@cart/models/order/order.transformer'
 import type { OrderUuid } from '@cart/models/order/orderUuid.model'
 
 export class OrderService {
-  static async getAll(page: number, search?: null | string): Promise<PaginatedData<OrderIndex>> {
-    const api = useApi()
-    const response = await api.get({
-      config: {
-        params: {
-          page,
-          per_page: 20,
-          search: search == null || search === '' ? undefined : search,
-        },
-      },
-      responseSchema: paginatedDataSchema(orderIndexDtoSchema),
-      url: `/orders`,
-    })
+  static async getAll(_page: number, _search?: null | string): Promise<PaginatedApiData<OrderIndex>> {
+    // const api = useApi()
+    // const response = await api.get({
+    //   config: {
+    //     params: {
+    //       page,
+    //       per_page: 20,
+    //       search: search == null || search === '' ? undefined : search,
+    //     },
+    //   },
+    //   responseSchema: paginatedDataSchema(orderIndexDtoSchema),
+    //   url: `/orders`,
+    // })
 
-    return {
-      ...response,
-      data: response.data.map(OrderTransformer.toOrderIndex),
-    }
+    // return {
+    //   ...response,
+    //   data: response.data.map(OrderTransformer.toOrderIndex),
+    // }
+
+    const response = await createApiMock(createPaginatedData(createOrders(20)))
+
+    return response
   }
 
-  static async getByUuid(uuid: OrderUuid): Promise<Order> {
-    const api = useApi()
-    const response = await api.get({
-      responseSchema: orderDtoSchema,
-      url: `/orders/${uuid}`,
-    })
+  static async getByUuid(_uuid: OrderUuid): Promise<Order> {
+    // const api = useApi()
+    // const response = await api.get({
+    //   responseSchema: orderDtoSchema,
+    //   url: `/orders/${uuid}`,
+    // })
+
+    // return OrderTransformer.toOrder(response)
+    const response = await createApiMock(createOrder())
 
-    return OrderTransformer.toOrder(response)
+    return response
   }
 }
diff --git a/layers/cart/components/header/CartHeader.vue b/layers/cart/components/header/CartHeader.vue
new file mode 100644
index 0000000..970bbc1
--- /dev/null
+++ b/layers/cart/components/header/CartHeader.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { formatPrice } from '@base/formatters/price.formatter'
+import type { Price } from '@base/models/price/price.model'
+import type { Cart } from '@cart/models/cart/get/cart.model'
+import { useCartStore } from '@cart/stores/cart.store'
+import { PopoverClose } from 'radix-vue'
+
+const { t } = useI18n()
+
+const cartStore = useCartStore()
+
+const amountOfProducts = computed<number>(() => {
+  return cartStore.amountOfProducts
+})
+
+const totalPrice = computed<Price | null>(() => {
+  return cartStore.productsPrice
+})
+
+const cart = computed<Cart | null>(() => {
+  return cartStore.cart.data ?? null
+})
+
+const isCartUpdating = computed<boolean>(() => {
+  return cartStore.isCartUpdating
+})
+</script>
+
+<template>
+  <AppPopover
+    v-if="cart"
+    align="end"
+    hide-arrow
+  >
+    <template #default>
+      <button
+        :class="{
+          'opacity-50': isCartUpdating,
+        }"
+        class="relative flex w-full items-center gap-4 rounded-button bg-primary px-3 py-1.5 text-left duration-300 lg:w-auto"
+      >
+        <AppIconCircle
+          :label="t('cart.cart')"
+          icon="cart"
+        />
+        <div>
+          <div
+            class="flex items-center gap-2"
+          >
+            <AppText
+              variant="subtext"
+              class="font-medium text-primary-foreground"
+            >
+              {{ t('cart.cart') }}
+            </AppText>
+
+            <AppLoader
+              :class="{
+                'opacity-100': isCartUpdating,
+                'opacity-0': !isCartUpdating,
+              }"
+              icon="loading"
+              class="size-4 text-white duration-200"
+            />
+          </div>
+          <div class="flex gap-2">
+            <AppText
+              variant="caption"
+              class="text-muted"
+            >
+              {{ t('cart.products_count', { count: amountOfProducts }) }}
+            </AppText>
+            <AppText
+              variant="caption"
+              class="font-bold text-white"
+            >
+              {{ totalPrice ? formatPrice(totalPrice) : t('empty') }}
+            </AppText>
+          </div>
+        </div>
+      </button>
+    </template>
+    <template #content>
+      <AppCard class="z-20 min-w-96 p-8">
+        <div class="flex flex-col gap-4">
+          <AppText
+            variant="heading"
+            class="font-medium text-foreground"
+          >
+            {{ t('cart.products_count', { count: amountOfProducts }) }}
+          </AppText>
+          <div class="custom-vertical-scrollbar flex max-h-80 flex-col gap-2 overflow-auto">
+            <div v-if="cart?.orderProducts.length === 0">
+              <AppText
+                variant="caption"
+                class="text-foreground"
+              >
+                {{ t('cart.no_products') }}
+              </AppText>
+            </div>
+            <CartHeaderProduct
+              v-for="orderProduct in cart?.orderProducts"
+              :key="orderProduct.id"
+              :order-product="orderProduct"
+            />
+          </div>
+          <div class="flex items-center justify-between gap-4">
+            <AppText
+              variant="heading"
+              class="font-medium"
+            >
+              {{ t('cart.total_to_pay') }}
+            </AppText>
+            <AppText
+              variant="body"
+            >
+              {{ totalPrice ? formatPrice(totalPrice) : t('empty') }}
+            </AppText>
+          </div>
+          <PopoverClose as-child>
+            <AppButtonLink
+              to="/checkout/overview"
+              class="w-full text-center"
+            >
+              {{ t('order.finish_order') }}
+            </AppButtonLink>
+          </PopoverClose>
+        </div>
+      </AppCard>
+    </template>
+  </AppPopover>
+</template>
diff --git a/layers/cart/components/header/CartHeaderActions.vue b/layers/cart/components/header/CartHeaderActions.vue
new file mode 100644
index 0000000..c0696d0
--- /dev/null
+++ b/layers/cart/components/header/CartHeaderActions.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineProps<{
+  isRemoving?: boolean
+}>()
+
+const emits = defineEmits<{
+  remove: []
+}>()
+const amount = defineModel<null | number>('amount', {
+  required: true,
+})
+
+const { t } = useI18n()
+
+function onRemove() {
+  emits('remove')
+}
+</script>
+
+<template>
+  <div
+    class="relative flex gap-2"
+  >
+    <AppIncrement
+      v-model="amount"
+      variant="white"
+    />
+    <AppIconButton
+      :label="t('cart.remove')"
+      :is-loading="isRemoving"
+      icon="trash"
+      variant="destructive"
+      icon-size="lg"
+      @click="onRemove"
+    />
+  </div>
+</template>
diff --git a/layers/cart/components/header/CartHeaderProduct.vue b/layers/cart/components/header/CartHeaderProduct.vue
new file mode 100644
index 0000000..0964b39
--- /dev/null
+++ b/layers/cart/components/header/CartHeaderProduct.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { formatPrice } from '@base/formatters/price.formatter'
+import type { Price } from '@base/models/price/price.model'
+import type { OrderProduct } from '@cart/models/order-product/orderProduct.model'
+import { useCartStore } from '@cart/stores/cart.store'
+import { AppText } from '@wisemen/vue-core'
+
+interface Props {
+  orderProduct: OrderProduct
+}
+const props = defineProps<Props>()
+
+const isUpdating = ref<boolean>(false)
+const isRemoving = ref<boolean>(false)
+
+const cartStore = useCartStore()
+const totalPrice = computed<Price>(() => {
+  return props.orderProduct.quantity * (props.orderProduct.product.price ?? 0) as Price
+})
+
+const debouncedUpdate = useDebounceFn((amount: number) => {
+  void onUpdateProduct(amount)
+}, 250)
+
+const pendingAmount = ref<number>(props.orderProduct.quantity)
+
+const amount = computed<number>({
+  get: () => pendingAmount.value,
+  set: (value: number) => {
+    pendingAmount.value = value
+    void debouncedUpdate(value)
+  },
+})
+
+async function onRemoveProduct() {
+  try {
+    isRemoving.value = true
+    await cartStore.removeProduct({
+      orderProductId: props.orderProduct.id,
+    })
+  }
+  finally {
+    isRemoving.value = false
+  }
+}
+
+async function onUpdateProduct(amount: number) {
+  try {
+    isUpdating.value = true
+    await cartStore.updateProduct({
+      orderProductId: props.orderProduct.id,
+      quantity: amount,
+    })
+    pendingAmount.value = amount
+  }
+  finally {
+    isUpdating.value = false
+  }
+}
+</script>
+
+<template>
+  <div
+    class="relative rounded-button bg-neutral-100 p-3"
+  >
+    <div
+      class="flex w-80 items-center justify-between gap-4"
+    >
+      <AppText
+        variant="body"
+        class="flex items-center gap-2 font-medium"
+      >
+        {{ props.orderProduct.product.name }}
+        <Transition name="fade-static">
+          <AppLoader
+            v-if="isUpdating"
+            class="size-3"
+            icon="loading"
+          />
+        </Transition>
+      </AppText>
+      <AppText variant="subtext">
+        {{ formatPrice(totalPrice) }}
+      </AppText>
+    </div>
+    <AppDivider class="my-2 bg-primary/10" />
+    <CartHeaderActions
+      v-model:amount="amount"
+      :is-removing="isRemoving"
+      @remove="onRemoveProduct"
+    />
+  </div>
+</template>
diff --git a/layers/cart/locales/nl.json b/layers/cart/locales/nl.json
index 0db3279..da2f934 100644
--- a/layers/cart/locales/nl.json
+++ b/layers/cart/locales/nl.json
@@ -1,3 +1,9 @@
 {
-
+  "cart.cart": "Winkelmand",
+  "cart.order": "Bestelling",
+  "cart.products_count": "Geen producten | Één product | {count} producten",
+  "cart.no_products": "Geen producten",
+  "cart.total_to_pay": "Totaal",
+  "order.finish_order": "Bestelling afronden",
+  "cart.remove": "Verwijderen"
 }
diff --git a/layers/cart/mocks/cart.mock.ts b/layers/cart/mocks/cart.mock.ts
new file mode 100644
index 0000000..8f873f8
--- /dev/null
+++ b/layers/cart/mocks/cart.mock.ts
@@ -0,0 +1,32 @@
+import { createAddress } from '@base/mocks/address.mock'
+import {
+  createBoolean,
+  createDate,
+  createNumber,
+  createString,
+} from '@base/mocks/utils.mock'
+import { generateUuid } from '@base/utils/uuid/generateUuid.util'
+import { createOrderProducts } from '@cart/mocks/orderProduct.mock'
+import type { CartUuid } from '@cart/models/cart/cartUuid.model'
+import type { Cart } from '@cart/models/cart/get/cart.model'
+
+export function createCart(overrides: Partial<Cart> = {}): Cart {
+  return {
+    id: generateUuid() as CartUuid,
+    deliveryDate: createDate(),
+    orderDate: createDate(),
+    isDelivered: createBoolean(),
+    deliveryAddress: createAddress(),
+    invoiceAddress: createAddress(),
+    orderLineCount: createNumber(1, 14),
+    orderNumber: createString(12),
+    orderProducts: createOrderProducts(createNumber(1, 14)),
+    orderStatus: 'cart',
+    remarks: createString(12),
+    ...overrides,
+  } satisfies Cart
+}
+
+export function createCarts(count: number): Cart[] {
+  return Array.from({ length: count }, () => createCart())
+}
diff --git a/layers/cart/mocks/order.mock.ts b/layers/cart/mocks/order.mock.ts
new file mode 100644
index 0000000..e06c63d
--- /dev/null
+++ b/layers/cart/mocks/order.mock.ts
@@ -0,0 +1,38 @@
+import { createAddress } from '@base/mocks/address.mock'
+import {
+  createBoolean,
+  createDate,
+  createNumber,
+  createString,
+} from '@base/mocks/utils.mock'
+import { generateUuid } from '@base/utils/uuid/generateUuid.util'
+import { createOrderProducts } from '@cart/mocks/orderProduct.mock'
+import type { Order } from '@cart/models/order/detail/order.model'
+import { orderStatusSchema } from '@cart/models/order/orderStatus.model'
+import type { OrderUuid } from '@cart/models/order/orderUuid.model'
+
+export function createRandomOrderStatus() {
+  const statuses = Object.values(orderStatusSchema.Values)
+
+  return statuses[Math.floor(Math.random() * statuses.length)] as Order['orderStatus']
+}
+export function createOrder(overrides: Partial<Order> = {}): Order {
+  return {
+    id: generateUuid() as OrderUuid,
+    deliveryDate: createDate(),
+    orderDate: createDate(),
+    isDelivered: createBoolean(),
+    deliveryAddress: createAddress(),
+    invoiceAddress: createAddress(),
+    orderLineCount: createNumber(0, 14),
+    orderNumber: createString(12),
+    orderProducts: createOrderProducts(createNumber(0, 14)),
+    orderStatus: createRandomOrderStatus(),
+    remarks: createString(12),
+    ...overrides,
+  } satisfies Order
+}
+
+export function createOrders(count: number): Order[] {
+  return Array.from({ length: count }, () => createOrder())
+}
diff --git a/layers/cart/mocks/orderProduct.mock.ts b/layers/cart/mocks/orderProduct.mock.ts
new file mode 100644
index 0000000..1a14887
--- /dev/null
+++ b/layers/cart/mocks/orderProduct.mock.ts
@@ -0,0 +1,25 @@
+import { createNumber } from '@base/mocks/utils.mock'
+import type { Price } from '@base/models/price/price.model'
+import { generateUuid } from '@base/utils/uuid/generateUuid.util'
+import { createProduct } from '@cart/mocks/product.mock'
+import type { OrderProduct } from '@cart/models/order-product/orderProduct.model'
+import type { OrderProductUuid } from '@cart/models/order-product/orderProductUuid.model'
+
+export function createOrderProduct(overrides: Partial<OrderProduct> = {}): OrderProduct {
+  const product = createProduct({
+    isDetail: true,
+  })
+
+  return {
+    id: generateUuid() as OrderProductUuid,
+    productId: product.id,
+    price: createNumber(0, 100) as Price,
+    product,
+    quantity: createNumber(0, 8),
+    ...overrides,
+  } satisfies OrderProduct
+}
+
+export function createOrderProducts(count: number): OrderProduct[] {
+  return Array.from({ length: count }, () => createOrderProduct())
+}
diff --git a/layers/cart/mocks/product.mock.ts b/layers/cart/mocks/product.mock.ts
new file mode 100644
index 0000000..cc82d40
--- /dev/null
+++ b/layers/cart/mocks/product.mock.ts
@@ -0,0 +1,19 @@
+import { createNumber, createString } from '@base/mocks/utils.mock'
+import type { Price } from '@base/models/price/price.model'
+import { generateUuid } from '@base/utils/uuid/generateUuid.util'
+import type { Product } from '@cart/models/product/detail/product.model'
+import type { ProductUuid } from '@cart/models/product/productUuid.model'
+
+export function createProduct(overrides: Partial<Product> = {}): Product {
+  return {
+    id: generateUuid() as ProductUuid,
+    isDetail: true,
+    name: createString(12),
+    price: createNumber(0, 100) as Price,
+    ...overrides,
+  } satisfies Product
+}
+
+export function createProducts(count: number): Product[] {
+  return Array.from({ length: count }, () => createProduct())
+}
diff --git a/layers/cart/nuxt.config.ts b/layers/cart/nuxt.config.ts
index 20d2265..82391ea 100644
--- a/layers/cart/nuxt.config.ts
+++ b/layers/cart/nuxt.config.ts
@@ -4,16 +4,16 @@ export default defineNuxtConfig({
   alias: {
     '@auth': path.resolve(__dirname, '../auth'),
     '@base': path.resolve(__dirname, '../base'),
-    '@cart': path.resolve(__dirname, './cart'),
+    '@cart': path.resolve(__dirname, './'),
   },
   components: [
     {
       pathPrefix: false,
-      path: '@auth/components',
+      path: '@cart/components',
     },
     {
       pathPrefix: false,
-      path: '@auth/views',
+      path: '@cart/views',
     },
   ],