diff --git a/src/App.vue b/src/App.vue
index 3b1090ce..6bd794d1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -453,7 +453,7 @@ export default defineComponent({
 }
 
 .search-to-home-enter-from {
-	margin-top: -50px;
+	// margin-top: -50px;
 	opacity: 0;
 	position: relative;
 }
@@ -492,7 +492,7 @@ export default defineComponent({
 }
 
 .home-to-search-enter-from {
-	margin-top: -50px;
+	// margin-top: -50px;
 	opacity: 0;
 	position: relative;
 }
@@ -526,7 +526,7 @@ export default defineComponent({
 }
 
 .record-to-search-enter-from {
-	margin-top: -50px;
+	// margin-top: -50px;
 	opacity: 0;
 	position: relative;
 }
@@ -580,7 +580,7 @@ export default defineComponent({
 }
 
 .search-to-record-leave-to {
-	margin-top: -50px;
+	// margin-top: -50px;
 	opacity: 0;
 	position: relative;
 }
diff --git a/src/assets/fonts/iconfont/material-icons.css b/src/assets/fonts/iconfont/material-icons.css
index fc4d3f37..68018ab2 100644
--- a/src/assets/fonts/iconfont/material-icons.css
+++ b/src/assets/fonts/iconfont/material-icons.css
@@ -37,3 +37,41 @@
   /* Support for IE. */
   font-feature-settings: 'liga';
 }
+.category-image {
+	width: 16px;
+	height: 16px;
+  background-image: url('@/assets/icons/blue/diverse-blue.svg');
+}
+.category-image.diverse {
+	background-image: url('@/assets/icons/blue/diverse-blue.svg');
+}
+.category-image.dokumentar {
+	background-image: url('@/assets/icons/blue/dokumentar-blue.svg');
+}
+.category-image.film-og-serier {
+	background-image: url('@/assets/icons/blue/fiktion-blue.svg');
+}
+.category-image.kultur-og-oplysning {
+	background-image: url('@/assets/icons/blue/kultur-blue.svg');
+}
+.category-image.livsstil {
+	background-image: url('@/assets/icons/blue/livsstil-blue.svg');
+}
+.category-image.musik {
+	background-image: url('@/assets/icons/blue/musik-blue.svg');
+}
+.category-image.nyheder-politik-og-samfund {
+	background-image: url('@/assets/icons/blue/nyheder-blue.svg');
+}
+.category-image.sport {
+	background-image: url('@/assets/icons/blue/sport-blue.svg');
+}
+.category-image.humor-quiz-og-underholdning {
+	background-image: url('@/assets/icons/blue/underholdning-blue.svg');
+}
+.category-image.natur-og-videnskab {
+	background-image: url('@/assets/icons/blue/videnskab-blue.svg');
+}
+.category-image.brn-og-unge {
+	background-image: url('@/assets/icons/blue/born-blue.svg');
+}
\ No newline at end of file
diff --git a/src/assets/styles/elements.css b/src/assets/styles/elements.css
index 27423fb1..8e25e01f 100644
--- a/src/assets/styles/elements.css
+++ b/src/assets/styles/elements.css
@@ -15,7 +15,7 @@
     --bg-secondary-light: #324666;
     --bg-secondary-light-20: #F0FBFF;
     --bg-header: #002e70;
-    --bg-footer: #002e70;
+    --bg-footer: #013277;
 
     /*colors*/
     --color-main:#ea9fbc;
@@ -27,7 +27,7 @@
 
     /*borders*/
     --color-border-active: #001C43;
-    --color-border-light:#96e2fd;
+    --color-border-light:#FBECF2;
     --color-border-golden:#e0b500;
     --color-border-success:#ea9fbc;
     --color-border-disabled:#757575;
diff --git a/src/components/common/AdvancedSpot.vue b/src/components/common/AdvancedSpot.vue
new file mode 100644
index 00000000..c2fa2ca0
--- /dev/null
+++ b/src/components/common/AdvancedSpot.vue
@@ -0,0 +1,171 @@
+<template>
+	<simple-spot
+		:spot-size="spotSize"
+		:color="color"
+		:icon-name="iconName"
+	>
+		<transition name="fade">
+			<div
+				v-show="authStore.currentArchiveProgress !== 0"
+				class="hero-info"
+			>
+				<div class="info">
+					<div class="progress-headline">
+						<h2>{{ t('hero.progress', { index: Math.round(currentProgress) }) }}</h2>
+						<p>
+							{{ t('hero.explanation') }}
+						</p>
+					</div>
+					<div class="process-bar">
+						<div
+							v-for="i in 20"
+							:key="i"
+							:class="progress(i)"
+						></div>
+					</div>
+				</div>
+			</div>
+		</transition>
+	</simple-spot>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, PropType, ref, watch } from 'vue';
+import SimpleSpot from '@/components/common/SimpleSpot.vue';
+import { useAuthStore } from '@/store/authStore';
+import gsap from 'gsap';
+import { useI18n } from 'vue-i18n';
+type SpotSizeType = 'small' | 'medium' | 'large' | 'max';
+type ColorType = 'main' | 'light';
+export default defineComponent({
+	name: 'AdvancedSpot',
+	components: { SimpleSpot },
+	props: {
+		spotSize: {
+			type: String as PropType<SpotSizeType>,
+			required: true,
+		},
+		color: {
+			type: String as PropType<ColorType>,
+			default() {
+				return 'main';
+			},
+		},
+		iconName: {
+			type: String,
+			default() {
+				return '';
+			},
+		},
+	},
+	setup() {
+		const currentProgress = ref();
+		const authStore = useAuthStore();
+		const { t } = useI18n();
+		onMounted(() => {
+			if (authStore.currentArchiveProgress !== 0) {
+				currentProgress.value = authStore.currentArchiveProgress;
+			}
+		});
+
+		const progress = (index: number) => {
+			const maxRange = 20;
+			let pt = Math.round((maxRange / 100) * currentProgress.value);
+			if (index < pt) return 'step darkblue';
+			if (index === pt) return 'step darkblue';
+			if (index === pt + 1) return 'step blue';
+			if (index === pt + 2) return 'step lightblue';
+			if (index === pt + 3) return 'step grey';
+			if (index === pt + 4) return 'step lightgrey';
+			if (index > pt + 4) return 'step white';
+		};
+
+		watch(
+			() => authStore.currentArchiveProgress,
+			(newVal: number) => {
+				if (newVal !== 0) {
+					gsap.to(currentProgress, {
+						value: authStore.currentArchiveProgress,
+						duration: 2,
+						ease: 'power2.out',
+						snap: { value: 1 },
+					});
+				}
+			},
+		);
+		return { authStore, progress, currentProgress, t };
+	},
+});
+</script>
+
+<style scoped>
+.progress-headline > * {
+	margin: 0;
+}
+
+.hero-info {
+	max-width: 100%;
+	/* position: relative; */
+	z-index: 0;
+	display: flex;
+	box-sizing: border-box;
+	height: 150px;
+	justify-content: flex-start;
+}
+
+.info {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.hero-info .link-container {
+	font-weight: 100;
+}
+
+.process-bar {
+	height: 34px;
+	display: flex;
+	position: absolute;
+	width: 100%;
+	left: 0px;
+	bottom: 0px;
+	background-color: var(--bg-default);
+}
+
+.step {
+	width: 5%;
+	height: 100%;
+	box-sizing: border-box;
+	border-left: 1px solid rgba(255, 255, 255, 0.05);
+	transition: all 0.15s ease-in-out 0s;
+}
+
+.step.darkblue {
+	background-color: var(--bg-main);
+}
+.step.blue {
+	background-color: var(--bg-main);
+	opacity: 0.95;
+}
+
+.step.lightblue {
+	background-color: var(--bg-main);
+	opacity: 0.85;
+}
+
+.step.grey {
+	background-color: var(--bg-main);
+	opacity: 0.75;
+}
+
+.step.lightgrey {
+	background-color: var(--bg-main);
+	opacity: 0.7;
+}
+
+.step.white {
+	background-color: transparent;
+	border-color: transparent;
+}
+</style>
diff --git a/src/components/common/KBButton.vue b/src/components/common/KBButton.vue
index f97516bb..863f8629 100644
--- a/src/components/common/KBButton.vue
+++ b/src/components/common/KBButton.vue
@@ -9,15 +9,17 @@
 		:style="customStyle"
 	>
 		<span
-			v-if="leftIconName"
+			v-if="leftIconName || customIconLeft"
 			class="material-icons left"
+			:class="customIconLeft"
 		>
 			{{ leftIconName }}
 		</span>
 		<span class="btn-text">{{ buttonText }}</span>
 		<span
-			v-if="rightIconName"
+			v-if="rightIconName || customIconRight"
 			class="material-icons right"
+			:class="customIconRight"
 		>
 			{{ rightIconName }}
 		</span>
@@ -33,15 +35,17 @@
 		:style="customStyle"
 	>
 		<span
-			v-if="leftIconName"
+			v-if="leftIconName || customIconLeft"
 			class="material-icons left"
+			:class="customIconLeft"
 		>
 			{{ leftIconName }}
 		</span>
 		<span class="btn-text">{{ buttonText }}</span>
 		<span
-			v-if="rightIconName"
+			v-if="rightIconName || customIconRight"
 			class="material-icons right"
+			:class="customIconRight"
 		>
 			{{ rightIconName }}
 		</span>
@@ -57,15 +61,17 @@
 		:style="customStyle"
 	>
 		<span
-			v-if="leftIconName"
+			v-if="leftIconName || customIconLeft"
 			class="material-icons left"
+			:class="customIconLeft"
 		>
 			{{ leftIconName }}
 		</span>
 		<span class="btn-text">{{ buttonText }}</span>
 		<span
-			v-if="rightIconName"
+			v-if="rightIconName || customIconRight"
 			class="material-icons right"
+			:class="customIconRight"
 		>
 			{{ rightIconName }}
 		</span>
@@ -135,6 +141,18 @@ export default defineComponent({
 				return false;
 			},
 		},
+		customIconLeft: {
+			type: String,
+			default() {
+				return '';
+			},
+		},
+		customIconRight: {
+			type: String,
+			default() {
+				return '';
+			},
+		},
 	},
 	setup(props) {
 		const attrs = useAttrs();
@@ -164,6 +182,7 @@ export default defineComponent({
 	width: fit-content;
 	min-height: 34px;
 	line-height: 1;
+	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
 }
 .btn-text::first-letter {
 	text-transform: capitalize;
@@ -239,7 +258,6 @@ export default defineComponent({
 /* Call to action buttons */
 .btn-cta {
 	border-radius: var(--rounded-medium);
-	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
 }
 .btn-cta .btn-text {
 	border-bottom: 1px solid transparent;
@@ -247,10 +265,10 @@ export default defineComponent({
 	transition: 200ms;
 }
 .btn-cta:not(:disabled):hover {
-	transition: all 5s ease 0s;
-	.btn-text {
-		border-color: var(--color-border-active);
-	}
+	transition: all 0.3s ease 0s;
+	background-color: var(--bg-main-2);
+	border-color: var(--color-border-light);
+	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0);
 }
 .btn-cta.medium .material-icons {
 	font-size: calc(var(--fs-lead) + 8px);
diff --git a/src/components/common/PortalContent.vue b/src/components/common/PortalContent.vue
index 03742bd0..4f5f99b6 100644
--- a/src/components/common/PortalContent.vue
+++ b/src/components/common/PortalContent.vue
@@ -1,5 +1,6 @@
 <template>
 	<div class="portal-container container">
+		<SpotContainer></SpotContainer>
 		<div class="time-search">
 			<SkewedFoldable
 				:title="$t('timeSearch.timeMachine')"
@@ -58,6 +59,7 @@ import { APISearchResponseType } from '@/types/APIResponseTypes';
 import { Priority, Severity } from '@/types/NotificationType';
 import { ErrorManagerType } from '@/types/ErrorManagerType';
 import { CuratedItemsType } from '@/types/CuratedItemsType';
+import SpotContainer from '@/components/common/SpotContainer.vue';
 import ContainerSplitBar from '@/components/global/content-elements/ContainerSplitBar.vue';
 
 export default defineComponent({
@@ -66,6 +68,7 @@ export default defineComponent({
 		GridDisplay,
 		TimeSearchComponent,
 		SkewedFoldable,
+		SpotContainer,
 		ContainerSplitBar,
 	},
 
@@ -211,6 +214,7 @@ export default defineComponent({
 
 .portal-container {
 	position: relative;
+	/* margin-top: -110px !important; */
 	align-items: center;
 }
 .categories,
@@ -266,4 +270,17 @@ export default defineComponent({
 		justify-content: center;
 	}
 }
+
+@media (min-width: 2000px) {
+	.date-picker,
+	.time-search {
+		/* margin-top: -3vw; */
+	}
+}
+@media (min-width: 4000px) {
+	.date-picker,
+	.time-search {
+		/* margin-top: -1.5vw; */
+	}
+}
 </style>
diff --git a/src/components/common/SimpleSpot.vue b/src/components/common/SimpleSpot.vue
new file mode 100644
index 00000000..25d2ba60
--- /dev/null
+++ b/src/components/common/SimpleSpot.vue
@@ -0,0 +1,131 @@
+<template>
+	<div
+		class="spot"
+		:class="[spotSize, color]"
+	>
+		<div
+			v-if="iconName"
+			class="icon"
+		>
+			<span class="material-icons">
+				{{ iconName }}
+			</span>
+		</div>
+		<div class="inner"><slot></slot></div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+// import { useI18n } from 'vue-i18n';
+type SpotSizeType = 'small' | 'medium' | 'large' | 'max';
+type ColorType = 'main' | 'light';
+export default defineComponent({
+	name: 'SimpleSpot',
+	props: {
+		spotSize: {
+			type: String as PropType<SpotSizeType>,
+			required: true,
+		},
+		color: {
+			type: String as PropType<ColorType>,
+			default() {
+				return 'main';
+			},
+		},
+		iconName: {
+			type: String,
+			default() {
+				return '';
+			},
+		},
+	},
+	setup() {
+		// const { t } = useI18n();
+		// return t;
+	},
+});
+</script>
+
+<style scoped>
+.spot {
+	display: flex;
+	height: 100%;
+	min-height: 190px;
+	border-radius: 0px;
+	border: 1px solid var(--color-border-success);
+	box-sizing: border-box;
+	position: relative;
+	overflow: hidden;
+	flex-wrap: wrap;
+	align-content: baseline;
+	box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.34) inset;
+}
+.spot .icon {
+	width: 40px;
+	align-items: center;
+	display: flex;
+	text-align: center;
+	justify-content: center;
+	height: 40px;
+	background-color: var(--bg-main);
+	color: var(--color-default);
+	border-radius: 0 0 var(--rounded-medium) 0;
+	top: 0;
+	left: 0;
+}
+.icon .material-icons {
+	font-size: var(--fs-lead);
+}
+.spot .inner {
+	width: 100%;
+	height: inherit;
+	padding: 20px;
+	display: flex;
+	justify-content: start;
+	align-items: flex-start;
+	text-align: start;
+	/* word-break: break-all; */
+}
+.spot.main {
+	background-color: var(--bg-main);
+	color: var(--color-default);
+}
+
+.spot.light {
+	background-color: var(--bg-light);
+	color: var(--color-main);
+}
+.spot.small {
+	width: 100%;
+}
+.spot.medium {
+	width: 100%;
+	max-width: 100%;
+}
+.spot.large {
+	width: 100%;
+}
+.spot.max {
+	width: 100%;
+}
+
+@media (min-width: 640px) {
+	.spot.small {
+		max-width: 49%;
+	}
+	.spot {
+		margin-bottom: 10px;
+		border-radius: var(--rounded-medium);
+	}
+}
+
+@media (min-width: 990px) {
+	.spot.small {
+		max-width: 23%;
+	}
+	.spot.medium {
+		max-width: 48%;
+	}
+}
+</style>
diff --git a/src/components/common/SpotCategories.vue b/src/components/common/SpotCategories.vue
new file mode 100644
index 00000000..30bd9b83
--- /dev/null
+++ b/src/components/common/SpotCategories.vue
@@ -0,0 +1,245 @@
+<template>
+	<simple-spot
+		spot-size="max"
+		color="light"
+		icon-name="category"
+	>
+		<div
+			v-if="categoriesLoaded && categories.length"
+			class="spot-categories"
+		>
+			<h3>{{ categories.length }} kategorier:</h3>
+			<KBButton
+				v-for="(category, i) in categories"
+				:key="category.name"
+				button-type="btn-cta"
+				button-color="cta"
+				button-size="small"
+				class="btn-small"
+				:button-text="`${t(`categories.${santizeAndSimplify(category.name)}`)}`"
+				:custom-icon-left="`category-image ${santizeAndSimplify(category.name)}`"
+				:is-router-link="true"
+				:data-testid="addTestDataEnrichment('link', 'category-item', `catergory-${category.name}`, i)"
+				:to="{
+					name: 'Search',
+					query: {
+						q: '*:*',
+						start: 0,
+						fq: [encodeURIComponent(`genre_facet:${quotation(category.name)}`)],
+					},
+				}"
+				@click="scrollToTop()"
+			></KBButton>
+		</div>
+		<div
+			v-else
+			class="loading-container"
+		>
+			<div class="loading-header">
+				<div
+					:style="`animation-delay:${Math.random() * 2}s`"
+					class="shimmer"
+				></div>
+				<span class="loading"></span>
+				<h3>kategorier:</h3>
+			</div>
+
+			<div
+				v-for="i in 12"
+				:key="i"
+				class="category-item"
+			>
+				<div
+					:style="`animation-delay:${Math.random() * 2}s`"
+					class="shimmer"
+				></div>
+				<span
+					:style="`width:${Math.random() * 30 + 50}%`"
+					class="loading"
+				></span>
+				<NoFacetContent
+					v-if="categoriesLoaded && categories.length === 0"
+					position="absolute"
+				></NoFacetContent>
+			</div>
+		</div>
+	</simple-spot>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import SimpleSpot from '@/components/common/SimpleSpot.vue';
+import { facetItem } from '@/types/APIResponseTypes';
+import KBButton from '@/components/common/KBButton.vue';
+import { useSearchResultStore } from '@/store/searchResultStore';
+import { ErrorManagerType } from '@/types/ErrorManagerType';
+import { Priority, Severity } from '@/types/NotificationType';
+import { addTestDataEnrichment, santizeAndSimplify } from '@/utils/test-enrichments';
+export default defineComponent({
+	name: 'SpotCategories',
+	components: { SimpleSpot, KBButton },
+	setup() {
+		const { t } = useI18n();
+		const searchResultStore = useSearchResultStore();
+		const categories = ref([] as facetItem[]);
+		const categoriesLoaded = ref(false);
+		const errorManager = inject('errorManager') as ErrorManagerType;
+
+		const quotation = (name: string) => {
+			return `"${name}"`;
+		};
+		const constructGenre = () => {
+			const categoryArray = searchResultStore.initFacets.facet_fields.genre_facet;
+			categoryArray.forEach((item, index) => {
+				if (index % 2 === 0) {
+					let category = {
+						name: `${item}`,
+						number: categoryArray[index + 1],
+					} as unknown as facetItem;
+					categories.value.push(category);
+				}
+			});
+			categories.value.sort((a, b) => a.name.localeCompare(b.name));
+			categoriesLoaded.value = true;
+		};
+		const scrollToTop = () => {
+			window.scrollTo({
+				top: 0,
+				behavior: 'smooth',
+			});
+		};
+		onMounted(() => {
+			if (searchResultStore.firstBackendFetchExecuted && Object.keys(searchResultStore.initFacets).length !== 0) {
+				constructGenre();
+			} else {
+				watch(
+					() => searchResultStore.firstBackendFetchExecuted,
+					(newVal: boolean) => {
+						if (newVal && Object.keys(searchResultStore.initFacets).length !== 0) {
+							constructGenre();
+						} else {
+							categoriesLoaded.value = true;
+							errorManager.submitCustomError(
+								'categories-error',
+								t('error.infoError.title'),
+								t('error.auth.serviceFailed'),
+								Severity.ERROR,
+								true,
+								Priority.MEDIUM,
+							);
+						}
+					},
+				);
+			}
+		});
+		return { t, categories, categoriesLoaded, quotation, scrollToTop, addTestDataEnrichment, santizeAndSimplify };
+	},
+});
+</script>
+
+<style scoped>
+h3 {
+	margin: 0;
+	display: contents;
+	text-align: center;
+}
+.spot-categories {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	flex-wrap: wrap;
+	align-items: baseline;
+}
+.spot-categories > * {
+	margin-right: 3px;
+	margin-left: 7px;
+	margin-bottom: 15px;
+}
+.loading-header {
+	display: flex;
+	width: fit-content;
+	align-items: baseline;
+}
+.loading-header .shimmer {
+	height: calc(var(--fs-sm) - 5px);
+	width: 35px;
+	margin: 0;
+	border-radius: 15px;
+}
+.loading-header .loading {
+	width: 35px;
+	height: calc(var(--fs-sm) - 5px);
+	margin-right: 5px;
+}
+.loading-container {
+	display: flex;
+	width: 100%;
+	flex-direction: row;
+	gap: 20px 15px;
+	flex-wrap: wrap;
+	box-sizing: border-box;
+	padding: 0px 12px;
+	align-items: baseline;
+}
+
+.loading {
+	display: flex;
+	height: 14px;
+	background-color: rgba(170, 170, 170, 1);
+	border-radius: 15px;
+}
+.category-item {
+	background: var(--bg-main) 0% 0% no-repeat padding-box;
+	box-shadow: 2px 2px 4px #75757500;
+	border: 2px solid #ffffff;
+	border-radius: 4px;
+	color: white;
+	width: 150px;
+	padding: 8px 8px 0px 10px;
+	box-sizing: border-box;
+	margin: 0px 10px;
+	height: 34px;
+	border: 2px solid #002e7026;
+	border-radius: 4px;
+	position: relative;
+	text-decoration: none;
+	display: flex;
+	transition: all 0.1s linear 0s;
+}
+
+.shimmer {
+	animation: loading 3s ease-in-out 0s infinite;
+	background: rgb(255, 255, 255);
+	background: linear-gradient(
+		117deg,
+		rgba(255, 255, 255, 0) 44%,
+		rgba(255, 255, 255, 0.7455357142857143) 64%,
+		rgba(255, 255, 255, 0) 77%
+	);
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	mix-blend-mode: soft-light;
+	overflow: hidden;
+	background-size: 200% 100%;
+	background-position: 200% center;
+	margin-top: -10px;
+	margin-left: -10px;
+}
+
+@keyframes loading {
+	0% {
+		background-position: 200% center;
+	}
+	20% {
+		background-position: 200% center;
+	}
+	80% {
+		background-position: 0% center;
+	}
+	100% {
+		background-position: 0% center;
+	}
+}
+</style>
diff --git a/src/components/common/SpotContainer.vue b/src/components/common/SpotContainer.vue
new file mode 100644
index 00000000..9da4c545
--- /dev/null
+++ b/src/components/common/SpotContainer.vue
@@ -0,0 +1,81 @@
+<template>
+	<div class="spot-container">
+		<div class="spot-row">
+			<spot-categories></spot-categories>
+		</div>
+		<div class="spot-row">
+			<simple-spot spot-size="small">
+				<span class="label-big">En kasse til noget display 349.994 minutters noget helt tilbage fra 1931.</span>
+			</simple-spot>
+			<simple-spot
+				spot-size="small"
+				icon-name="link"
+				color="light"
+				class="spot-link"
+				@click="activateLink"
+			>
+				<a
+					ref="spotLink"
+					:href="t('hero.link')"
+					class="label-big link"
+				>
+					{{ t('hero.linkText') }}
+				</a>
+			</simple-spot>
+			<advanced-spot spot-size="medium"></advanced-spot>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import SimpleSpot from '@/components/common/SimpleSpot.vue';
+import AdvancedSpot from '@/components/common/AdvancedSpot.vue';
+import SpotCategories from '@/components/common/SpotCategories.vue';
+export default defineComponent({
+	name: 'SpotContainer',
+	components: { SimpleSpot, AdvancedSpot, SpotCategories },
+	setup() {
+		const { t } = useI18n();
+		const spotLink = ref<HTMLAnchorElement | null>(null);
+		const activateLink = () => {
+			if (spotLink.value) {
+				spotLink.value.click();
+			}
+		};
+		return { t, spotLink, activateLink };
+	},
+});
+</script>
+
+<style scoped>
+.spot-container {
+	display: flex;
+	width: 100%;
+	height: 100%;
+	flex-direction: column;
+}
+.spot-row {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	height: 100%;
+	flex-wrap: wrap;
+	/* background-repeat: no-repeat; */
+
+	justify-content: space-between;
+}
+.link {
+	color: inherit;
+	text-decoration: inherit;
+	border-bottom: 1px solid transparent;
+}
+
+.spot-link:hover {
+	transition: background-color 0.3s linear;
+	background-color: var(--bg-secondary-light);
+	cursor: pointer;
+	box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0) inset;
+}
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 2f11e0fe..0744e454 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -51,6 +51,7 @@ temporary styling until patterns from design system are implemented
 	padding-right: 12px;
 	padding-left: 12px;
 	background-color: var(--bg-default);
+	/* margin-top: -85px; */
 }
 
 .home-container {