diff --git a/src/assets/styles/elements.css b/src/assets/styles/elements.css
index 8e25e01f..f655b523 100644
--- a/src/assets/styles/elements.css
+++ b/src/assets/styles/elements.css
@@ -12,14 +12,17 @@
     --bg-transparent: transparent;
     --bg-golden:#e0b500;
     --bg-default-gray: #ccc;
+    --bg-main-light: #f0bcd0;
+    --bg-main-light-20: #fbecf2;
     --bg-secondary-light: #324666;
     --bg-secondary-light-20: #F0FBFF;
     --bg-header: #002e70;
     --bg-footer: #013277;
-
+    --bg-backdrop: #ffff;
     /*colors*/
     --color-main:#ea9fbc;
     --color-default:#001C43;
+    --color-secondary-light:#324666;
     --color-disabled:#969696;
     --color-disabled-sort:#d5d5d5;
     --color-disabled-font: #757575;
diff --git a/src/components/common/GridDisplay.vue b/src/components/common/GridDisplay.vue
index 930bb26f..2ccddcdf 100644
--- a/src/components/common/GridDisplay.vue
+++ b/src/components/common/GridDisplay.vue
@@ -2,7 +2,7 @@
 	<div class="grid-display">
 		<ItemSlider
 			:padding="false"
-			bg="var(--bg-secondary-light-20)"
+			bg="var(--bg-backdrop)"
 			item-class="rotational-results"
 			bg-scroll-blue="true"
 		>
@@ -16,7 +16,7 @@
 						:loading="!loaded"
 						:resultdata="spots[i]"
 						:index="i"
-						background="var(--bg-secondary-light-20)"
+						background="var(--bg-backdrop)"
 						:class="{ 'current-record': current === i }"
 						:slot-props="slotProps"
 					></GridResultItem>
@@ -73,7 +73,7 @@ temporary styling until patterns from design system are implemented
 	margin-left: 15px;
 	flex: 0 0 30%;
 	box-sizing: border-box;
-	background-color: var(--bg-secondary-light-20);
+	background-color: var(--bg-backdrop);
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
diff --git a/src/components/common/KBButton.vue b/src/components/common/KBButton.vue
index 1b5e2a73..5a1d8477 100644
--- a/src/components/common/KBButton.vue
+++ b/src/components/common/KBButton.vue
@@ -221,7 +221,7 @@ export default defineComponent({
 .main {
 	background-color: var(--bg-main);
 	color: var(--color-default);
-	border: 1px solid var(--color-border-active);
+	border: 1px solid var(--color-border-succcess);
 }
 .cta {
 	background-color: var(--bg-cta);
@@ -235,7 +235,7 @@ export default defineComponent({
 }
 .transparent {
 	background-color: var(--bg-transparent);
-	color: var(--color-main);
+	color: var(--color-default);
 	border: 1px solid var(--color-border-transparent);
 }
 .inverted {
@@ -249,8 +249,10 @@ export default defineComponent({
 	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
 }
 .btn-main-medium:hover {
-	background-color: var(--bg-main-hover);
-	color: var(--color-main);
+	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-main-small {
 	border-radius: var(--rounded-medium);
@@ -282,7 +284,7 @@ export default defineComponent({
 }
 .btn-cta:disabled {
 	border-color: var(--color-border-disabled);
-	color: var(--bg-default);
+	color: white;
 }
 /* Dropdown buttons */
 .btn-dropdown-default {
@@ -310,9 +312,8 @@ export default defineComponent({
 	transform: rotateX(180deg);
 }
 .btn-dropdown-default:hover {
-	background-color: var(--bg-main-hover);
-	color: var(--color-main);
-	border-color: var(--color-border-active);
+	background-color: var(--bg-main-light);
+	color: var(--color-default);
 }
 .btn-dropdown-default .btn-text {
 	display: none;
diff --git a/src/components/common/PortalContent.vue b/src/components/common/PortalContent.vue
index 940b5283..1dfd2f56 100644
--- a/src/components/common/PortalContent.vue
+++ b/src/components/common/PortalContent.vue
@@ -220,7 +220,7 @@ export default defineComponent({
 	position: absolute;
 	height: 100%;
 	width: 100vw;
-	background-color: var(--bg-secondary-light-20);
+	background-color: var(--bg-backdrop);
 	justify-content: space-between;
 	display: flex;
 	flex-direction: column;
diff --git a/src/components/common/TimeSearchComponent.vue b/src/components/common/TimeSearchComponent.vue
index edfe0e41..65ce1994 100644
--- a/src/components/common/TimeSearchComponent.vue
+++ b/src/components/common/TimeSearchComponent.vue
@@ -22,7 +22,7 @@
 		<div class="time-results">
 			<ItemSlider
 				:padding="false"
-				bg="var(--bg-secondary-light-20)"
+				bg="var(--bg-backdrop)"
 				item-class="time-result"
 				bg-scroll-blue="true"
 			>
@@ -36,7 +36,7 @@
 							:loading="timeSearchStore.loading"
 							:resultdata="item"
 							:index="index"
-							background="var(--bg-secondary-light-20)"
+							background="var(--bg-backdrop)"
 							:slot-props="slotProps"
 						></GridResultItem>
 					</div>
@@ -220,7 +220,7 @@ h2 {
 	position: absolute;
 	height: 100%;
 	width: 100vw;
-	background-color: var(--bg-secondary-light-20);
+	background-color: var(--bg-backdrop);
 	justify-content: space-between;
 	display: flex;
 	flex-direction: column;
@@ -248,7 +248,7 @@ h2 {
 .time-result-item {
 	flex: 0 0 30%;
 	box-sizing: border-box;
-	background-color: var(--bg-secondary-light-20);
+	background-color: var(--bg-backdrop);
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
diff --git a/src/components/common/timeSearch/TimeSearchFilters.vue b/src/components/common/timeSearch/TimeSearchFilters.vue
index 0025e764..b96a0c56 100644
--- a/src/components/common/timeSearch/TimeSearchFilters.vue
+++ b/src/components/common/timeSearch/TimeSearchFilters.vue
@@ -3,7 +3,7 @@
 		v-show="timeline"
 		class="slider-container"
 	>
-		<div class="data-size">
+		<!-- <div class="data-size">
 			<KBButton
 				button-type="btn-dropdown-default"
 				button-color="transparent"
@@ -14,7 +14,7 @@
 				:data-testid="addTestDataEnrichment('button', 'time-search-filters', 'toggle-data-button', 0)"
 				@click="toggleExplanation()"
 			></KBButton>
-		</div>
+		</div> -->
 
 		<div class="to-from-container">
 			<CustomTimelineSelect
@@ -118,13 +118,12 @@ import {
 import { addTestDataEnrichment } from '@/utils/test-enrichments';
 import { useSearchResultStore } from '@/store/searchResultStore';
 import { useRoute } from 'vue-router';
-import KBButton from '@/components/common/KBButton.vue';
+// import KBButton from '@/components/common/KBButton.vue';
 export default defineComponent({
 	name: 'TimeSearchFilters',
 	components: {
 		CustomTimelineSelect,
 		VueSlider,
-		KBButton,
 	},
 
 	props: {
diff --git a/src/components/global/nav/Breadcrumb.vue b/src/components/global/nav/Breadcrumb.vue
index a2619a18..1cde2f41 100644
--- a/src/components/global/nav/Breadcrumb.vue
+++ b/src/components/global/nav/Breadcrumb.vue
@@ -100,7 +100,7 @@
 			>
 				<span class="breadcrumb-title">{{ t('breadcrumb.record') }}</span>
 			</span>
-			<div class="search-tip">
+			<!-- <div class="search-tip">
 				<InfoComponent
 					icon="info"
 					:title="t('search.frontpageGuide.title')"
@@ -148,7 +148,7 @@
 						</p>
 					</div>
 				</InfoComponent>
-			</div>
+			</div> -->
 		</div>
 	</div>
 </template>
@@ -158,13 +158,12 @@ import { useI18n } from 'vue-i18n';
 import { addTestDataEnrichment } from '@/utils/test-enrichments';
 import { useRoute, useRouter } from 'vue-router';
 import { useSearchResultStore } from '@/store/searchResultStore';
-import InfoComponent from '@/components/common/InfoComponent.vue';
+// import InfoComponent from '@/components/common/InfoComponent.vue';
 import KBButton from '@/components/common/KBButton.vue';
 
 export default defineComponent({
 	name: 'Breadcrumb',
 	components: {
-		InfoComponent,
 		KBButton,
 	},
 	setup() {
diff --git a/src/components/search/AdditionalInfo.vue b/src/components/search/AdditionalInfo.vue
index 7efb327b..7675d3ce 100644
--- a/src/components/search/AdditionalInfo.vue
+++ b/src/components/search/AdditionalInfo.vue
@@ -22,8 +22,9 @@
 	>
 		<ItemSlider
 			:padding="true"
-			bg="#002e70"
+			bg="var(--bg-main-light-20)"
 			item-class="extra-thumbnail"
+			bg-scroll-blue="true"
 		>
 			<template #default="slotProps">
 				<div
@@ -265,8 +266,8 @@ export default defineComponent({
 	margin-bottom: 0px;
 	overflow: hidden;
 	display: none;
-	padding-bottom: 10px;
-	background-color: rgb(0, 46, 112);
+	padding-bottom: 30px;
+	background-color: var(--bg-main-light-20);
 	position: relative;
 }
 
@@ -280,7 +281,6 @@ export default defineComponent({
 	width: 100%;
 	height: 100%;
 	pointer-events: none;
-	box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px 5px inset;
 }
 
 .full-duration {
@@ -288,12 +288,12 @@ export default defineComponent({
 	display: inline-block;
 	right: 0px;
 	z-index: 1;
-	margin-top: -18px;
+	margin-top: 0px;
 	padding: 0px 2px;
 	padding-right: 10px;
 	padding-left: 6px;
-	color: white;
-	background-color: #002e70;
+	color: var(--color-default);
+	background-color: transparent;
 
 	opacity: 0.9;
 }
@@ -305,8 +305,8 @@ export default defineComponent({
 	right: 15px;
 	z-index: 1;
 	align-items: center;
-	color: white;
-	background-color: #002e70;
+	color: var(--color-default);
+	background-color: var(--bg-main);
 	top: calc(50% - 35px);
 	padding: 5px 14px 5px 14px;
 	text-decoration: none;
@@ -320,9 +320,7 @@ export default defineComponent({
 	margin: 0;
 }
 .watch-program:hover {
-	background-color: #c4f1ed;
-	color: #002e70;
-	border-color: #002e70;
+	background-color: var(--bg-main-light);
 }
 .extra-thumbnail {
 	flex: 0 0 200px;
@@ -333,7 +331,6 @@ export default defineComponent({
 	flex-direction: column;
 	pointer-events: all;
 	text-decoration: none;
-	color: #002e70;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
@@ -359,7 +356,7 @@ export default defineComponent({
 .extra-thumbnail .img-stamp {
 	text-align: center;
 	font-size: 12px;
-	color: white;
+	color: var(--color-default);
 	height: 0.9rem;
 	position: relative;
 	display: flex;
diff --git a/src/components/search/ItemSlider.vue b/src/components/search/ItemSlider.vue
index 1a6259f9..adff70c3 100644
--- a/src/components/search/ItemSlider.vue
+++ b/src/components/search/ItemSlider.vue
@@ -198,13 +198,13 @@ export default defineComponent({
 	background-color: rgb(66, 66, 66);
 }
 .item-slider.blue-scrollbar::-webkit-scrollbar-thumb {
-	background-color: #002e70;
+	background-color: var(--bg-default);
 }
 .item-slider::-webkit-scrollbar-thumb {
 	border-radius: 5px;
 }
 .item-slider::-webkit-scrollbar-track {
-	background-color: #002e70;
+	background-color: var(--bg-default);
 }
 
 .item-slider.active a {
diff --git a/src/components/search/Pager.vue b/src/components/search/Pager.vue
index 9e4f26e7..aa52ea26 100644
--- a/src/components/search/Pager.vue
+++ b/src/components/search/Pager.vue
@@ -387,11 +387,12 @@ export default defineComponent({
 .arrow-pager {
 	text-decoration: none !important;
 }
-
+.active {
+	text-decoration: none !important;
+}
 .active span {
-	color: var(--color-main);
-	background-color: #002e70;
-	text-decoration: none;
+	color: var(--color-default);
+	background-color: var(--bg-main-light);
 }
 
 button,
@@ -408,11 +409,11 @@ button,
 }
 .pager-buttons a {
 	text-decoration: underline;
-	color: var(--color-main);
+	color: var(--color-default);
 }
 
 .pager-buttons a:visited {
-	color: var(--color-main);
+	color: var(--color-default);
 }
 
 :disabled {
@@ -423,7 +424,7 @@ button span,
 .dots {
 	padding: 2px 5px;
 	text-decoration: underline;
-	color: var(--color-main);
+	color: var(--color-default);
 	border-radius: 3px;
 	transition: all 0.2s linear 0s;
 	line-height: 25px;
@@ -434,7 +435,7 @@ button span,
 }
 
 .input-label {
-	color: var(--color-main);
+	color: var(--color-default);
 	height: 31px;
 	width: fit-content;
 	display: inline;
@@ -457,17 +458,17 @@ button span,
 
 .page-select-input {
 	background: #ffffff 0% 0% no-repeat padding-box;
-	color: #002e70;
-	border: 0px solid #002e70;
+	color: var(--color-default);
+	border: 0px solid var(--color-border-active);
 	border-radius: 2px;
 	height: 25px;
 	width: 80px;
 	padding: 2px 5px;
-	outline: 1px solid #002e70;
+	outline: 1px solid var(--color-border-active);
 }
 
 .page-select-input:focus-visible {
-	outline: 2px solid #002e70;
+	outline: 2px solid var(--color-border-active);
 }
 
 .page-select-input-error {
@@ -505,7 +506,7 @@ button span,
 	display: inline;
 }
 .morePagesMessage .topOfScreen {
-	color: #002e70;
+	color: var(--color-default);
 	cursor: pointer;
 }
 .topOfScreen > span {
diff --git a/src/components/search/ResultItem.vue b/src/components/search/ResultItem.vue
index 60d18d5e..cfa0b3ad 100644
--- a/src/components/search/ResultItem.vue
+++ b/src/components/search/ResultItem.vue
@@ -331,7 +331,7 @@ export default defineComponent({
 .outer-container {
 	z-index: 1;
 	position: relative;
-	border-bottom: 1px solid var(--color-border-active);
+	border-bottom: 1px solid var(--color-border-success);
 }
 
 .arrow {
@@ -387,14 +387,14 @@ export default defineComponent({
 	width: 100%;
 	overflow: hidden;
 	max-width: 100%;
-	color: var(--color-main);
+	color: var(--color-default);
 }
 .title {
 	text-decoration: none;
 }
 .title > .label-medium-bold {
 	transition: all 0.5s ease-in-out 0s;
-	color: var(--color-main);
+	color: var(--color-default);
 	text-overflow: ellipsis;
 	max-width: 100%;
 	white-space: nowrap;
@@ -418,7 +418,7 @@ export default defineComponent({
 	margin: 0;
 }
 .episode-text {
-	color: var(--color-main);
+	color: var(--color-default);
 }
 .episode-split-icon {
 	padding-right: 3px;
@@ -519,7 +519,7 @@ export default defineComponent({
 	display: inline-block;
 	width: 50px;
 	height: 14px;
-	background-color: var(--bg-main);
+	background-color: var(--bg-defalt);
 	border-radius: 10px;
 	margin-left: 5px;
 	margin-right: 5px;
@@ -533,7 +533,7 @@ export default defineComponent({
 .placeholder-w .line {
 	display: inline-block;
 	border-radius: 10px;
-	background-color: var(--bg-main);
+	background-color: var(--bg-defalt);
 	width: 30px;
 	height: 14px;
 	width: 25%;
@@ -671,11 +671,11 @@ export default defineComponent({
 
 	.result-item-wrapper {
 		padding: 00px 0px 0px 20px;
-		border-left: 1px solid var(--color-border-active);
+		border-left: 1px solid var(--color-border-success);
 	}
 
 	.backfade {
-		background: var(--bg-light);
+		background: white;
 		transition: all 0.3s ease-in-out 0s;
 		content: '';
 		z-index: 0;
diff --git a/src/components/search/SearchOverhead.vue b/src/components/search/SearchOverhead.vue
index 2ed609ed..83f96b75 100644
--- a/src/components/search/SearchOverhead.vue
+++ b/src/components/search/SearchOverhead.vue
@@ -180,7 +180,7 @@ export default defineComponent({
 	width: 30px;
 	height: 30px;
 	border-bottom: 1px solid transparent;
-	color: var(--color-main);
+	color: var(--color-secondary-light);
 }
 
 .filter-container {
@@ -199,13 +199,13 @@ export default defineComponent({
 .hit-count {
 	z-index: 0;
 	position: relative;
-	color: var(--color-main);
+	color: var(--color-default);
 }
 
 .display-option.active {
-	border-bottom: 2px solid #002e70;
+	border-bottom: 2px solid var(--color-border-active);
 	box-sizing: border-box;
-	color: var(--color-main);
+	color: var(--color-default);
 }
 
 .display-option.list,
diff --git a/src/components/search/Sort.vue b/src/components/search/Sort.vue
index 6462af9d..f1a7af2f 100644
--- a/src/components/search/Sort.vue
+++ b/src/components/search/Sort.vue
@@ -163,11 +163,11 @@ export default defineComponent({
 .sort p {
 	margin: 0;
 	padding: 0;
-	color: var(--color-main);
+	color: var(--color-default);
 }
 
 .sort-icon {
-	color: var(--color-main);
+	color: var(--color-default);
 }
 
 @media (min-width: 640px) {
diff --git a/src/views/Search.vue b/src/views/Search.vue
index 29cdc602..bb4ccc4f 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -395,7 +395,7 @@ temporary styling until patterns from design system are implemented
 -->
 <style scoped>
 .page-count {
-	color: var(--color-main);
+	color: var(--color-default);
 }
 .fade-enter-active,
 .fade-leave-active {