diff --git a/src/App.vue b/src/App.vue
index 638314cd..1c510849 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -25,6 +25,8 @@
 		id="main-content"
 		class="content"
 	>
+		<Facets v-if="route.name === 'Search'"></Facets>
+		<Underlay></Underlay>
 		<router-view v-slot="{ Component }">
 			<transition
 				:name="transitionName || 'fade'"
@@ -47,15 +49,18 @@ import Spinner from '@/components/global/spinner/Spinner.vue';
 import { LocalStorageWrapper } from '@/utils/local-storage-wrapper';
 import Footer from '@/components/global/nav/Footer.vue';
 import Header from '@/components/search/Header.vue';
+import Facets from '@/components/search/Facets.vue';
 import { useAuthStore } from '@/store/authStore';
 import { APIService } from '@/api/api-service';
 import { APIAuthMessagesType, APISearchResponseType } from '@/types/APIResponseTypes';
 import { useSearchResultStore } from '@/store/searchResultStore';
 import { ErrorManagerType } from '@/types/ErrorManagerType';
 import { Priority, Severity } from '@/types/NotificationType';
+import Underlay from './components/search/Underlay.vue';
 import '@/assets/styles/font-styles.css';
 import '@/assets/styles/elements.css';
 import '@/assets/styles/base.css';
+import { startYear, endYear, startDate, endDate } from './components/common/timeSearch/TimeSearchInitValues.js';
 
 export default defineComponent({
 	name: 'App',
@@ -64,6 +69,8 @@ export default defineComponent({
 		Spinner,
 		Footer,
 		Header,
+		Facets,
+		Underlay,
 	},
 	setup() {
 		const td = ref(0.4);
@@ -126,6 +133,16 @@ export default defineComponent({
 					if (newVal) {
 						// ask for facets
 						const facetAPICall = APIService.getFullResultWithFacets();
+						APIService.getTVFacets().then((response) => {
+							searchResultStore.TVFacets = response.data.facet_counts.facet_fields.creator_affiliation_facet.filter(
+								(entry) => typeof entry === 'string',
+							);
+						});
+						APIService.getRadioFacets().then((response) => {
+							searchResultStore.RadioFacets = response.data.facet_counts.facet_fields.creator_affiliation_facet.filter(
+								(entry) => typeof entry === 'string',
+							);
+						});
 						let facetAPiCallFurfilled = false;
 						// timeout promise for long responsetimes. (7 seconds pt.)
 						const maximumWaitTime = new Promise<void>((resolve) => {
@@ -148,9 +165,28 @@ export default defineComponent({
 						Promise.race([facetAPICall, maximumWaitTime])
 							.then((response) => {
 								if (response) {
+									const isTimeFiltersSet =
+										startDate.value.getTime() !== startYear.value.getTime() ||
+										endDate.value.getTime() !== endYear.value.getTime();
+
 									//if api comes back first, we get the results and set our boolean to true.
 									const typedResponse = response as APISearchResponseType;
 									searchResultStore.initFacets = typedResponse.data.facet_counts;
+									const years = searchResultStore.initFacets.facet_fields.temporal_start_year;
+
+									startYear.value = new Date(startYear.value);
+									startYear.value.setFullYear(Number(years[0]));
+
+									endYear.value = new Date(endYear.value);
+									endYear.value.setFullYear(Number(years[years.length - 2]));
+
+									if (!isTimeFiltersSet) {
+										const startHolder = new Date(startYear.value.getTime());
+										const endHolder = new Date(endYear.value.getTime());
+										startDate.value = startHolder;
+										endDate.value = endHolder;
+									}
+
 									searchResultStore.firstBackendFetchExecuted = true;
 									facetAPiCallFurfilled = true;
 								}
@@ -161,8 +197,26 @@ export default defineComponent({
 								// if the timeout was first, we still want the api promise returned here
 								// unless it the results were already back - then we ignore this.
 								if (!facetAPiCallFurfilled) {
+									const isTimeFiltersSet =
+										startDate.value.getTime() !== startYear.value.getTime() ||
+										endDate.value.getTime() !== endYear.value.getTime();
 									const typedResponse = response as APISearchResponseType;
 									searchResultStore.initFacets = typedResponse.data.facet_counts;
+									const years = searchResultStore.initFacets.facet_fields.temporal_start_year;
+
+									startYear.value = new Date(startYear.value);
+									startYear.value.setFullYear(Number(years[0]));
+
+									endYear.value = new Date(endYear.value);
+									endYear.value.setFullYear(Number(years[years.length - 2]));
+
+									if (!isTimeFiltersSet) {
+										const startHolder = new Date(startYear.value.getTime());
+										const endHolder = new Date(endYear.value.getTime());
+										startDate.value = startHolder;
+										endDate.value = endHolder;
+									}
+
 									searchResultStore.firstBackendFetchExecuted = true;
 									facetAPiCallFurfilled = true;
 								}
diff --git a/src/api/api-client.ts b/src/api/api-client.ts
index 718ce68c..fe254b34 100644
--- a/src/api/api-client.ts
+++ b/src/api/api-client.ts
@@ -149,6 +149,14 @@ export class APIServiceClient {
 		return await this.httpClient.get(`bff/v1/proxy/search/?q=*&facet=true&facet.limit=-1&rows=0`);
 	}
 
+	async getRadioFacets(): Promise<APISearchResponseType> {
+		return await this.httpClient.get(`bff/v1/proxy/search/?q=*&facet=true&facet.limit=-1&rows=0&fq=origin:"ds.radio"`);
+	}
+
+	async getTVFacets(): Promise<APISearchResponseType> {
+		return await this.httpClient.get(`bff/v1/proxy/search/?q=*&facet=true&facet.limit=-1&rows=0&fq=origin:"ds.tv"`);
+	}
+
 	async getSearchResults(
 		query: string,
 		filters: string,
diff --git a/src/assets/images/filter-thumbnails/dr.jpg b/src/assets/images/filter-thumbnails/dr.jpg
new file mode 100644
index 00000000..f84d228f
Binary files /dev/null and b/src/assets/images/filter-thumbnails/dr.jpg differ
diff --git a/src/assets/images/filter-thumbnails/dr1.jpg b/src/assets/images/filter-thumbnails/dr1.jpg
new file mode 100644
index 00000000..da8145ac
Binary files /dev/null and b/src/assets/images/filter-thumbnails/dr1.jpg differ
diff --git a/src/assets/images/filter-thumbnails/dr2.jpg b/src/assets/images/filter-thumbnails/dr2.jpg
new file mode 100644
index 00000000..442fbb1b
Binary files /dev/null and b/src/assets/images/filter-thumbnails/dr2.jpg differ
diff --git a/src/assets/images/filter-thumbnails/drk.jpg b/src/assets/images/filter-thumbnails/drk.jpg
new file mode 100644
index 00000000..1afab7b6
Binary files /dev/null and b/src/assets/images/filter-thumbnails/drk.jpg differ
diff --git a/src/assets/images/filter-thumbnails/drultra.jpg b/src/assets/images/filter-thumbnails/drultra.jpg
new file mode 100644
index 00000000..0c70ed4f
Binary files /dev/null and b/src/assets/images/filter-thumbnails/drultra.jpg differ
diff --git a/src/assets/images/filter-thumbnails/drupdate.jpg b/src/assets/images/filter-thumbnails/drupdate.jpg
new file mode 100644
index 00000000..4d1c9944
Binary files /dev/null and b/src/assets/images/filter-thumbnails/drupdate.jpg differ
diff --git a/src/assets/images/filter-thumbnails/p1.jpg b/src/assets/images/filter-thumbnails/p1.jpg
new file mode 100644
index 00000000..1cca52fd
Binary files /dev/null and b/src/assets/images/filter-thumbnails/p1.jpg differ
diff --git a/src/assets/images/filter-thumbnails/p2.jpg b/src/assets/images/filter-thumbnails/p2.jpg
new file mode 100644
index 00000000..efce70d8
Binary files /dev/null and b/src/assets/images/filter-thumbnails/p2.jpg differ
diff --git a/src/assets/images/filter-thumbnails/p3.jpg b/src/assets/images/filter-thumbnails/p3.jpg
new file mode 100644
index 00000000..e230b787
Binary files /dev/null and b/src/assets/images/filter-thumbnails/p3.jpg differ
diff --git a/src/assets/images/filter-thumbnails/p4.jpg b/src/assets/images/filter-thumbnails/p4.jpg
new file mode 100644
index 00000000..d5f9a264
Binary files /dev/null and b/src/assets/images/filter-thumbnails/p4.jpg differ
diff --git a/src/assets/images/filter-thumbnails/p5.jpg b/src/assets/images/filter-thumbnails/p5.jpg
new file mode 100644
index 00000000..4780eefd
Binary files /dev/null and b/src/assets/images/filter-thumbnails/p5.jpg differ
diff --git a/src/assets/images/filter-thumbnails/p6.jpg b/src/assets/images/filter-thumbnails/p6.jpg
new file mode 100644
index 00000000..32160b1a
Binary files /dev/null and b/src/assets/images/filter-thumbnails/p6.jpg differ
diff --git a/src/assets/images/filter-thumbnails/p8.jpg b/src/assets/images/filter-thumbnails/p8.jpg
new file mode 100644
index 00000000..5f2a3cff
Binary files /dev/null and b/src/assets/images/filter-thumbnails/p8.jpg differ
diff --git a/src/assets/images/filter-thumbnails/ramasjang-tv.jpg b/src/assets/images/filter-thumbnails/ramasjang-tv.jpg
new file mode 100644
index 00000000..cea0b24e
Binary files /dev/null and b/src/assets/images/filter-thumbnails/ramasjang-tv.jpg differ
diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css
index a0125a04..6040ffbf 100644
--- a/src/assets/styles/base.css
+++ b/src/assets/styles/base.css
@@ -1,26 +1,26 @@
 /*Headings*/
-.heading-sub{
+.heading-sub {
     font-size: var(--fs-lg);
     line-height: var(--lh-medium-tight);
     font-weight: var(--fw-regular);
 }
-.heading-display{
+.heading-display {
     font-size: var(--fs-xxl);
     line-height: var(--lh-small);
     font-weight: var(--fw-regular);
     font-family: 'LibreBaskerville';
 }
-h1{
+h1 {
     font-size: var(--fs-xl);
     line-height: var(--lh-small);
     font-weight: var(--fw-regular);
 }
-h2{
+h2 {
     font-size: var(--fs-md);
     line-height: var(--lh-medium-tight);
     font-weight: var(--fw-regular);
 }
-h3{
+h3 {
     font-size: var(--fs-sm);
     line-height: var(--lh-small);
     font-weight: var(--fw-bold);
@@ -33,83 +33,83 @@ p.fixed-size {
     line-height: var(--lh-base-fixed);
 }
 
-p{
+p {
     font-size: var(--fs-base);
     line-height: var(--lh-large);
     font-weight: var(--fw-regular);
 }
-a{
+a {
     font-size: var(--fs-base);
     line-height: var(--lh-large);
     font-weight: var(--fw-regular);
 }
 
 /*Labels*/
-.label-small{
+.label-small {
     font-size: var(--fs-meta);
     line-height: var(--lh-large);
     font-weight: var(--fw-regular);
 }
-.label-small-bold{
+.label-small-bold {
     font-size: var(--fs-meta);
     line-height: var(--lh-large);
     font-weight: var(--fw-bold);
 }
-.label-regular{
+.label-regular {
     font-size: var(--fs-base);
     line-height: var(--lh-large);
     font-weight: var(--fw-regular);
 }
-.label-medium{
+.label-medium {
     font-size: var(--fs-lead);
     line-height: var(--lh-large-tight);
     font-weight: var(--fw-regular);
 }
-.label-medium-bold{
+.label-medium-bold {
     font-size: var(--fs-lead);
     line-height: var(--lh-large-tight);
     font-weight: var(--fw-bold);
 }
-.label-big{
+.label-big {
     font-size: var(--fs-md);
     line-height: var(--lh-medium-tight);
     font-weight: var(--fw-regular);
 }
 
 /*Buttons*/
-.btn-reg{
+.btn-reg {
     font-size: var(--fs-base);
     line-height: var(--lh-btn);
     font-weight: var(--fw-regular);
 }
-.btn-medium{
+.btn-medium {
     font-size: var(--fs-lead);
     line-height: var(--lh-btn);
     font-weight: var(--fw-regular);
 }
-.btn-big{
+.btn-big {
     font-size: var(--fs-md);
     line-height: var(--lh-btn);
     font-weight: var(--fw-regular);
 }
-.input{
+.input {
     font-size: var(--fs-base);
     line-height: var(--lh-large);
     font-weight: var(--fw-regular);
 }
 
 /*Menu*/
-.menu-main{
+.menu-main {
     font-size: var(--fs-lead);
     line-height: var(--lh-large-tight);
     font-weight: var(--fw-bold);
 }
-.menu-secondary{
+.menu-secondary {
     font-size: var(--fs-meta);
     line-height: var(--lh-large);
     font-weight: var(--fw-bold);
 }
-.menu-footer{
+.menu-footer {
     font-size: var(--fs-base);
 	line-height: var(--lh-medium);
     font-weight: var(--fw-regular);
diff --git a/src/assets/styles/elements.css b/src/assets/styles/elements.css
index b7b4d525..525c1540 100644
--- a/src/assets/styles/elements.css
+++ b/src/assets/styles/elements.css
@@ -9,12 +9,17 @@
     --bg-default: #ffff;
     --bg-transparent: transparent;
     --bg-golden:#e0b500;
+    --bg-default-gray: #ccc;
+    --bg-secondary-light: #caf0fe;
+    --bg-secondary-light-20: #F0FBFF;
 
     /*colors*/
     --color-main:#002e70;
     --color-default:#ffff;
     --color-disabled:#969696;
     --color-disabled-sort:#d5d5d5;
+    --color-disabled-font: #757575;
+    --color-alert-red: rgb(184, 0, 0);
 
     /*borders*/
     --color-border-active: #002e70;
@@ -23,10 +28,12 @@
     --color-border-success:#49DA87;
     --color-border-disabled:#757575;
     --color-border-transparent: transparent;
+    --color-border-light-focused: #96E2FD;
+    --color-borders-light: #96E2FD;
 
     /*rounded*/
     --rounded-small: var(--scale-50);
-    --rounded-medium: var(--scale-150);
+    --rounded-medium: var(--scale-100);
     --rounded-large: var(--scale-800);
     
     /*padding*/
diff --git a/src/assets/styles/vue-slider-styles.css b/src/assets/styles/vue-slider-styles.css
index 140c27ee..4bc13ef5 100644
--- a/src/assets/styles/vue-slider-styles.css
+++ b/src/assets/styles/vue-slider-styles.css
@@ -1,58 +1,112 @@
 .vue-slider-rail {
-	background-color: white !important;
+	background-color: var(--bg-transparent) !important;
 	border-radius: 0px !important;
+	height: 100% !important;
+
+	
+}
+
+.vue-slider-rail::before {
+	display: block;
+	height: 5px;
+	content: '';
+	z-index: 6 !important;
+	border: 1px solid var(--color-border-disabled);
+	background-color: var(--bg-disabled) !important;
+	border-radius: 4px;
+	top:calc(100%) !important;
+	position: relative;
+}
+
+.testClass {
+	mix-blend-mode: lighten;	
 }
 
+.slider-whiteoff-container .vue-slider-rail::before {
+	border: 1px solid var(--color-border-disabled);
+	background-color: var(--bg-disabled) !important;
+}
 .vue-slider {
-	height: 60px !important;
+	height: 100px !important;
 	padding: 0px !important;
+	align-content: center;
+}
+.time-search-filter-container .vue-slider {
+	height: 50px !important;
 }
 .vue-slider-process {
 	border-radius: 0px !important;
-	background-color: #caf0fe !important;
-	z-index: 5 !important;
-	opacity: 0.5;
-	mix-blend-mode: hue !important;
-	filter: hue-rotate(245deg) !important;
+	background-color: transparent !important;
+	z-index: 6 !important;
+	border-radius: 0 !important;
 }
 
+.vue-slider-process::before {
+	display: block;
+	height: 5px;
+	position: absolute;
+	background-color: var(--bg-main) !important;
+	content: '';
+	border:1px solid var(--color-border-active);
+	top: calc(100%);
+	z-index: 7 !important;
+	width: 100%;
+}
+.slider-whiteoff-container .vue-slider-process::before {
+	
+}
 .vue-slider-mark-step {
+	background-color: var(--bg-transparent) !important;
 	border-radius: 0px !important;
+	height: 100% !important;
+	top: -10px !important;
 }
 
 .vue-slider-dot {
-	width: 12px !important;
-	border: 1px solid #002e70;
-	height: 100% !important;
-	background-color: #002e70 !important;
+	width: 44px !important;
+	height: 44px !important;
+	background-color: var(--bg-default) !important;
 	display: flex;
 	box-sizing: border-box;
-	border-radius: 5px;
-	z-index: 6 !important;
+	border-radius: 50%;
+	z-index: 9 !important;
+	border: 4px solid var(--color-border-active);
+	justify-content: center;
+	align-items: center;
+	box-shadow: none;
+	top: 100% !important;
+
 }
 
 .vue-slider-dot-handle {
-	height: 18px !important;
-	width: 18px !important;
-	margin-top: 20px !important;
-	margin-left: -18px !important;
-	background-color: #f7ae3b !important;
-	left: 14px;
+	height: 32px !important;
+	width: 32px !important;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: var(--bg-main) !important;
 	position: relative;
+	box-sizing: border-box ;
+	box-shadow: none !important;
+	border-color: transparent;
+	border: 1px solid transparent;
+	transition: all 0.2s linear;
+}
+.vue-slider-dot-handle:hover,.vue-slider-dot-handle:active{
+	height: 36px !important;
+	width: 36px !important;
+	background-color: var(--bg-main-hover) !important;
 }
-
 .vue-slider-dot-handle:before {
 	content: '';
   display: block;
-  width: 10px;
-  height: 10px;
+  width: 7px;
+  height: 7px;
   box-sizing: border-box;
-  border-left: 2px solid #002e70;
-  border-top: 2px solid #002e70;
+  border-left: 2px solid var(--color-default);
+  border-top: 2px solid var(--color-default);
   transform: rotateZ(-45deg);
   position: relative;
-  top: 4px;
-  left: -10px;
 	transition: all 0.1s linear 0s;
 	opacity:1;
 }
@@ -60,44 +114,57 @@
 .vue-slider-dot-handle:after {
 	content: '';
   display: block;
-  width: 10px;
-  height: 10px;
+  width: 7px;
+  height: 7px;
   box-sizing: border-box;
-  border-left: 2px solid #002e70;
-  border-top: 2px solid #002e70;
+  border-left: 2px solid var(--color-default);
+  border-top: 2px solid var(--color-default);
   transform: rotateZ(135deg);
   position: relative;
-	top: -6px;
-	left: 19px;
 	transition: all 0.1s linear 0s;
 	opacity:1;
 }
 
 
 .vue-slider-dot-handle:hover:before {
-	left: -11px;
+	left: -2px;
+	border-color: var(--color-main);
 }
 .vue-slider-dot-handle:hover:after {
-	left: 20px;
+	left: 2px;border-color: var(--color-main);
+}
+.vue-slider-dot-handle:active:before{
+	left:-5px;
+	border-color: var(--color-main);
+}
+.vue-slider-dot-handle:active:after{
+	left:5px;
+	border-color: var(--color-main);
 }
-
 .vue-slider-mark {
 	width: 2px !important;
 	height: 15% !important;
-	background-color: #002e70 !important;
+	background-color: transparent !important;
 	margin-bottom: 10px !important;
-	top: 92% !important;
 }
 
 .vue-slider-mark-label {
-	padding-top: 5px;
-	transform: rotateZ(-35deg) translate(-50%, -50%) !important;
-	left: -25px !important;
-	background-color:white;
 	display:none;
-	font-size: var(--fs-meta) !important;
+	/* font-size: var(--fs-meta) !important; */
+	background: var(--bg-disabled) 0% 0% no-repeat padding-box !important;
+	color: white !important;
+	border-radius: 5px;
+	top: calc(-100% - 1em) !important;
+	font-size: var(--fs-lead) !important;
+    line-height: var(--lh-large-tight);
+    font-weight: var(--fw-regular);
+	padding: 2px 5px;
+	min-width: 20px;
+	text-align: center;
+}
+.slider-whiteoff-container .vue-slider-mark-label {
+		top: calc(100% - 3.8em) !important;
 }
-
 .vue-slider-dot-tooltip-inner {
 	background-color: #fff6c4 !important;
 	color: #002e70 !important;
@@ -108,7 +175,9 @@
 	border-top-color: #fff6c4 !important;
 	color: black !important;
 }
-
+.vue-slider-marks {
+	z-index: 8;
+}
 .vue-slider-marks .vue-slider-mark:first-of-type .vue-slider-mark-label {
 	left: 15px !important;
 }
@@ -120,22 +189,27 @@
 .vue-slider-marks .vue-slider-mark .vue-slider-mark-label {
 	display: none;
 }
-
-.vue-slider-marks .vue-slider-mark {
-	display: none;
-}
-
-@media (min-width: 640px) {
-	.vue-slider-marks .vue-slider-mark:nth-child(5n) {
+.slider-whiteoff-container .vue-slider-marks .vue-slider-mark:nth-child(10n) .vue-slider-mark-label {
 		display: block;
-	}
 }
-
-.vue-slider-marks .vue-slider-mark:nth-child(1n) .vue-slider-mark-label {
-	display: block;
-	color: #002e70;
+.slider-whiteoff-container .vue-slider-marks .vue-slider-mark:nth-child(10n) .vue-slider-mark-step:after{
+		top:calc(100% - 3px) !important;
+		height: 7px;
 }
+.time-search-filter-container .vue-slider-marks .vue-slider-mark:nth-child(15n) .vue-slider-mark-label{
+	display:block
+}
+.time-search-filter-container .vue-slider-marks .vue-slider-mark:nth-child(15n) .vue-slider-mark-step:after{
+	top:calc(100% - 3px) !important;
+	height: 7px;
 
+}
+.vue-slider-marks .vue-slider-mark-active .vue-slider-mark-label-active {
+	opacity: 100%;
+	background-color: var(--bg-default)!important;
+	border: 1px solid var(--color-border-active);
+	color: var(--color-main) !important;
+}
 .vue-slider-marks .vue-slider-mark:nth-child(1n) {
 	height: 50% !important;
 	top: 75% !important;
@@ -144,19 +218,18 @@
 .vue-slider-marks .vue-slider-mark:nth-child(1n) .vue-slider-mark-step:after {
 	content: '';
 	display: block;
-	width: 20px;
-	border-top: 2px solid #002e70;
-	height: 2px;
-	left: -6px;
+	width: 2px;
+	background-color: var(--bg-disabled);
+	height: 4px;
 	position: absolute;
-	top: calc(100%);
-	transform: rotateZ(-35deg) translate(-50%, -50%);
-	transform-origin: center;
+	top: calc(99%) !important;
+}
+.vue-slider-marks .vue-slider-mark-active:nth-child(1n) .vue-slider-mark-step:after{
+	background-color: var(--bg-main);
 }
-
 .vue-slider-dot-tooltip-inner {
 	background: #002e70 0% 0% no-repeat padding-box !important;
-	font-size: 20px !important;
+	font-size: var(--fs-lead) !important;
 	color: white !important;
 }
 .vue-slider-dot-tooltip-top {
@@ -167,4 +240,66 @@
 	font-size: var(--fs-lead);
     line-height: var(--lh-large-tight);
     font-weight: var(--fw-regular);
+}
+.vue-slider-dot-tooltip-inner-top::after {
+	border: none !important;
+}
+.slider-whiteoff-container .vue-slider-marks .vue-slider-mark:nth-child(20n) .vue-slider-mark-label {
+		display: none !important;
+	}
+
+@media (min-width: 640px) {
+	.vue-slider-marks .vue-slider-mark:nth-child(1n) .vue-slider-mark-step:after{
+		top: calc(98%) !important;
+	}
+	.slider-whiteoff-container .vue-slider-marks .vue-slider-mark:nth-child(10n) .vue-slider-mark-step:after{
+		top:calc(98%) !important;
+		height: 5px;
+	}
+	.slider-whiteoff-container .vue-slider-marks .vue-slider-mark:nth-child(7n) .vue-slider-mark-step:after{
+		top:calc(100% - 3px) !important;
+		height: 7px;
+	}
+	.slider-whiteoff-container .vue-slider {
+		height: 200px !important;
+		align-content: end;
+	}
+	.slider-whiteoff-container .vue-slider-mark-step {
+	display:none !important;
+	}
+	.slider-whiteoff-container .vue-slider-marks .vue-slider-mark:nth-child(20n) .vue-slider-mark-label {
+		display: block !important;
+	}
+}
+@media (min-width: 850px) {
+
+	.slider-whiteoff-container .vue-slider-marks .vue-slider-mark:nth-child(7n) .vue-slider-mark-step:after{
+		top:calc(98%) !important;
+		height: 5px;
+	}
+
+	.slider-whiteoff-container .vue-slider-marks .vue-slider-mark:nth-child(5n) .vue-slider-mark-step:after{
+		top:calc(100% - 3px) !important;
+		height: 7px;
+	}
+	.slider-whiteoff-container .vue-slider-mark-label {
+		top: calc(100% - 3.8em) !important;
+	}
+}
+@media(min-width:990px){
+
+	.slider-whiteoff-container .vue-slider-mark-label {
+		top: calc(100% - 3.5em) !important;
+	}
+	.slider-whiteoff-container .vue-slider-marks .vue-slider-mark:nth-child(7n) .vue-slider-mark-step:after{
+		top:calc(98%) !important;
+		height: 5px;
+	}
+	.slider-whiteoff-container .vue-slider-marks .vue-slider-mark:nth-child(5n) .vue-slider-mark-step:after{
+		top:calc(100% - 5px) !important;
+		height: 7px;
+	}
+	.slider-whiteoff-container .vue-slider-marks .vue-slider-mark-active:nth-child(1n) .vue-slider-mark-step:after{
+		background-color: var(--bg-default);
+}
 }
\ No newline at end of file
diff --git a/src/components/common/CustomRadioButton.vue b/src/components/common/CustomRadioButton.vue
new file mode 100644
index 00000000..2e54a591
--- /dev/null
+++ b/src/components/common/CustomRadioButton.vue
@@ -0,0 +1,166 @@
+<template>
+	<label :class="['radio-option', { checked }]">
+		<input
+			:id="`${santizeAndSimplify(title)}-${index}`"
+			type="radio"
+			:name="name"
+			:value="value"
+			:checked="checked"
+			:disabled="disabled"
+			@change="onChange"
+		/>
+		<div class="outer-dot">
+			<Transition name="fade-dot">
+				<span
+					v-if="checked"
+					class="dot"
+				></span>
+			</Transition>
+		</div>
+		<span
+			v-if="icon"
+			class="material-icons radio-icon"
+		>
+			{{ icon }}
+		</span>
+		<span>{{ title }}</span>
+	</label>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { santizeAndSimplify } from '@/utils/test-enrichments';
+
+export default defineComponent({
+	name: 'CustomRadioButton',
+
+	props: {
+		value: { type: String, required: true },
+		title: { type: String, required: true },
+		description: { type: String, default: '' },
+		index: { type: Number, default: 0 },
+		checked: { type: Boolean, default: false },
+		disabled: { type: Boolean, default: false },
+		name: { type: String, required: true },
+		icon: { type: String, required: false, default: undefined },
+	},
+
+	emits: ['select'],
+
+	setup(props, { emit }) {
+		const onChange = () => {
+			emit('select', props.value);
+		};
+
+		return { onChange, santizeAndSimplify };
+	},
+});
+</script>
+
+<style scoped>
+.radio-option {
+	display: flex;
+	align-items: center;
+	height: 36px;
+	cursor: pointer;
+	background-color: rgba(255, 255, 255, 0.5);
+	border-radius: 4px;
+	transition: all 0.25s linear 0s;
+	border: 1px solid rgba(255, 255, 255, 0.5);
+	position: relative;
+}
+
+.radio-option.checked {
+	background-color: var(--bg-secondary-light);
+	border: 1px solid var(--color-borders-light);
+	border-radius: 4px;
+}
+
+.radio-option:hover {
+	background-color: var(--bg-secondary-light-20);
+	border: 1px solid var(--color-border-light-focused);
+	border-radius: 4px;
+}
+
+.radio-option label {
+	display: flex;
+	align-items: center;
+	text-align: center;
+	height: 100%;
+	width: 100%;
+	cursor: pointer;
+}
+
+.radio-icon {
+	color: #0a2e70;
+	margin-right: 5px;
+}
+
+.radio-option input[type='radio'] {
+	position: absolute;
+	opacity: 0;
+}
+
+.radio-option:has(input:disabled) {
+	pointer-events: none;
+	opacity: 1;
+	color: grey;
+}
+
+.radio-option:has(input:disabled) .outer-dot {
+	border: 2px solid grey;
+}
+
+.radio-option:has(input:disabled) .dot {
+	background-color: grey;
+}
+
+.radio-option:has(input:disabled) .radio-icon {
+	color: grey;
+}
+
+.outer-dot {
+	position: relative;
+	display: inline-block;
+	width: 24px;
+	height: 24px;
+	border: 2px solid #0a2e70;
+	border-radius: 50%;
+	background: white;
+	margin-right: 5px;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	margin-left: 10px;
+}
+
+.radio-option .dot {
+	width: 10px;
+	height: 10px;
+	background: #0a2e70;
+	border-radius: 50%;
+}
+
+.radio-title {
+	padding-left: 5px;
+}
+
+.radio-title .fade-dot-enter-active,
+.fade-dot-leave-active {
+	transition:
+		opacity 0.2s ease,
+		transform 0.2s ease;
+}
+
+.fade-dot-enter-from,
+.fade-dot-leave-to {
+	opacity: 0;
+}
+
+.fade-dot-enter-to,
+.fade-dot-leave-from {
+	opacity: 1;
+}
+</style>
diff --git a/src/components/common/CustomRadioGroup.vue b/src/components/common/CustomRadioGroup.vue
new file mode 100644
index 00000000..b3799272
--- /dev/null
+++ b/src/components/common/CustomRadioGroup.vue
@@ -0,0 +1,89 @@
+<template>
+	<fieldset class="radio-set">
+		<legend class="sr-only">Choose option</legend>
+		<CustomRadioButton
+			v-for="(obj, index) in options"
+			:key="obj.value"
+			:index="index"
+			:name="name"
+			:icon="obj.icon"
+			:value="obj.value"
+			:title="obj.title"
+			:disabled="disable"
+			:description="obj.description"
+			:checked="modelValue === obj.value"
+			@select="
+				(value) => {
+					emit('update:modelValue', value);
+					emit('change', value);
+				}
+			"
+		/>
+	</fieldset>
+</template>
+
+<script lang="ts">
+export interface RadioButtonOption {
+	value: string;
+	title: string;
+	icon?: string;
+	description?: string;
+}
+import { defineComponent } from 'vue';
+import CustomRadioButton from '@/components/common/CustomRadioButton.vue';
+import { useSearchResultStore } from '@/store/searchResultStore';
+
+export default defineComponent({
+	components: { CustomRadioButton },
+
+	props: {
+		modelValue: { type: String, required: true },
+		name: { type: String, required: true },
+		disable: { type: Boolean, required: false, default: false },
+		options: {
+			type: Array<RadioButtonOption>,
+			required: true,
+		},
+	},
+
+	emits: ['update:modelValue', 'change'],
+
+	setup(props, { emit }) {
+		const searchResultStore = useSearchResultStore();
+		return { emit, searchResultStore };
+	},
+});
+</script>
+
+<style scoped>
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+.radio-set {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	margin-bottom: 35px;
+	padding: 8px 16px;
+	background-color: rgba(255, 255, 255, 0.25);
+	border: 2px solid transparent;
+	padding: 12px;
+	transition:
+		border-color 120ms ease,
+		box-shadow 120ms ease;
+}
+
+.radio-set:has(input:focus-visible) {
+	border-radius: 8px;
+	border-color: #0a2e70;
+	box-shadow: 0 0 0 3px rgba(10, 46, 112, 0.15);
+}
+</style>
diff --git a/src/components/common/CustomTimelineSelect.vue b/src/components/common/CustomTimelineSelect.vue
index f4190015..083827ed 100644
--- a/src/components/common/CustomTimelineSelect.vue
+++ b/src/components/common/CustomTimelineSelect.vue
@@ -40,7 +40,7 @@ export default defineComponent({
 	name: 'CustomTimelineSelect',
 	props: {
 		listItems: {
-			type: Array as PropType<string[]>,
+			type: Array as PropType<string[] | number[]>,
 			default() {
 				return [];
 			},
@@ -108,6 +108,8 @@ export default defineComponent({
 	background-position-x: 85px;
 	background-position-y: 13px;
 	width: 118px;
+	box-sizing: border-box;
+	height: 48px;
 }
 
 .select-container:hover select {
diff --git a/src/components/common/FilterExpander.vue b/src/components/common/FilterExpander.vue
new file mode 100644
index 00000000..9686a505
--- /dev/null
+++ b/src/components/common/FilterExpander.vue
@@ -0,0 +1,409 @@
+<template>
+	<div :class="expanderOpen ? 'expand-container open' : 'expand-container'">
+		<label
+			ref="headlineRef"
+			class="headline label-medium"
+			role="button"
+			@click="toggleExpander($event)"
+		>
+			<span class="material-icons icon">{{ icon }}</span>
+			{{ headline }}
+			<span
+				v-if="!timeSearchOngoing && type === 'time'"
+				class="entry-number label-regular label"
+			>
+				{{ subline }}
+			</span>
+			<span
+				v-if="type !== 'time' && subline.length === 0 && itemArray.length > 0"
+				class="entry-number label-regular label"
+			>
+				({{ itemArray.length }} {{ headline }})
+			</span>
+			<KBButton
+				v-if="(type !== 'time' && subline.length > 0) || (timeSearchOngoing && type === 'time')"
+				button-type="btn-tag"
+				button-color="main"
+				:class="'label-regular'"
+				button-size="default"
+				:custom-style="{ marginRight: '12px', marginLeft: 'auto' }"
+				:data-testid="addTestDataEnrichment('button', 'filter-expander', `${headline}-remove-filter`, 0)"
+				right-icon-name="close"
+				:button-text="`${subline}`"
+				@click="removeFilters($event, facetType, itemArray)"
+			></KBButton>
+		</label>
+		<div
+			ref="expandContainer"
+			:class="fade ? 'expander' : 'expander'"
+		>
+			<slot></slot>
+		</div>
+		<div class="expander-toggle">
+			<button
+				:class="expanderOpen ? 'toggle-button open' : 'toggle-button closed'"
+				:data-testid="addTestDataEnrichment('button', 'filter-expander', `${headline}-status-toggle`, 0)"
+				:title="expanderOpen ? 'Close' : 'Open'"
+				:aria-expanded="expanderOpen"
+				@click="toggleExpander($event)"
+			>
+				{{ expanderOpen ? '-' : '+' }}
+			</button>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, PropType, computed } from 'vue';
+import gsap from 'gsap';
+import { SelectorData } from '@/types/TimeSearchTypes';
+import { addTestDataEnrichment } from '@/utils/test-enrichments';
+import KBButton from '@/components/common/KBButton.vue';
+import { removeFilterAndSearch } from '@/utils/filter-utils';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { startDate, endDate, startYear, endYear } from '@/components/common/timeSearch/TimeSearchInitValues';
+import { removeTimeFacetsFromRoute, cloneRouteQuery } from '@/utils/filter-utils';
+
+export default defineComponent({
+	name: 'FilterExpander',
+	components: {
+		KBButton,
+	},
+	props: {
+		type: {
+			type: String as PropType<string>,
+			required: true,
+		},
+		headline: {
+			type: String as PropType<string>,
+			required: true,
+		},
+		filterNameCutoff: {
+			type: Number as PropType<number>,
+			required: false,
+			default() {
+				return 3;
+			},
+		},
+		icon: {
+			type: String as PropType<string>,
+			required: true,
+		},
+		subline: {
+			type: String as PropType<string>,
+			required: true,
+		},
+		fade: {
+			type: Boolean as PropType<boolean>,
+			required: false,
+			default: false,
+		},
+		itemArray: {
+			type: Array as PropType<SelectorData[]>,
+			required: false,
+			default() {
+				return [] as SelectorData[];
+			},
+		},
+		facetType: {
+			type: String as PropType<string>,
+			required: false,
+			default() {
+				return '';
+			},
+		},
+		mobileSubline: {
+			type: String as PropType<string>,
+			required: false,
+			default() {
+				return '';
+			},
+		},
+		updateEntity: {
+			type: Function,
+			default() {
+				return null;
+			},
+		},
+	},
+
+	setup(props) {
+		const expanderOpen = ref(false);
+		const expandContainer = ref<HTMLElement | null>(null);
+		const headlineRef = ref();
+		const route = useRoute();
+		const router = useRouter();
+		const { t } = useI18n();
+		const passAlongUpdate = (parent: SelectorData[], index: number, val: boolean) => {
+			props.updateEntity(parent, index, val, props.facetType);
+		};
+
+		const removeFilters = (e: Event, facetType: string, itemArray: Array<SelectorData>) => {
+			e.stopPropagation();
+			if (props.type !== 'time') {
+				removeFilterAndSearch(facetType, router, route, itemArray);
+			} else {
+				removeTimeFlitersAndExecute();
+			}
+		};
+
+		const removeTimeFlitersAndExecute = () => {
+			const routeQueries = cloneRouteQuery(route);
+			routeQueries.fq = removeTimeFacetsFromRoute(routeQueries.fq);
+			router.push({
+				name: 'Search',
+				query: routeQueries,
+			});
+		};
+
+		const timeSearchOngoing = computed(() => {
+			return (
+				(startDate !== null &&
+					(startDate as unknown as string) !== '' &&
+					startDate.value.getTime() !== startYear.value.getTime()) ||
+				(endDate !== null &&
+					(endDate as unknown as string) !== '' &&
+					endDate.value.getTime() !== endYear.value.getTime())
+			);
+		});
+
+		const toggleExpander = (e: Event) => {
+			e.stopPropagation();
+			if (expanderOpen.value) {
+				gsap.to(expandContainer.value, {
+					height: '0px',
+					duration: 0.35,
+					overwrite: true,
+					paddingBottom: '0px',
+					backgroundColor: 'transparent',
+					opacity: 0,
+					onComplete: () => {
+						gsap.set(expandContainer.value, {
+							display: props.fade ? 'block' : 'none',
+							overwrite: true,
+						});
+					},
+				});
+			} else {
+				gsap.set(expandContainer.value, {
+					display: 'block',
+					overwrite: true,
+					backgroundColor: '#CAF0FE1A',
+					onComplete: () => {
+						headlineRef.value.focus();
+						gsap.to(expandContainer.value, {
+							height: 'auto',
+							duration: 0.35,
+							overwrite: true,
+							paddingBottom: '10px',
+							opacity: 1,
+							onComplete: () => {
+								const el = expandContainer.value;
+								if (el) {
+									const scroller = el.closest('.facet-container');
+									if (scroller) {
+										const rect = el.getBoundingClientRect();
+										const parentRect = scroller.getBoundingClientRect();
+
+										scroller.scrollTo({
+											top: rect.top - parentRect.top + scroller.scrollTop - 16,
+											behavior: 'smooth',
+										});
+									}
+								}
+							},
+						});
+					},
+				});
+			}
+			expanderOpen.value = !expanderOpen.value;
+		};
+
+		return {
+			expanderOpen,
+			toggleExpander,
+			expandContainer,
+			passAlongUpdate,
+			addTestDataEnrichment,
+			headlineRef,
+			removeFilterAndSearch,
+			removeFilters,
+			t,
+			startDate,
+			endDate,
+			startYear,
+			endYear,
+			timeSearchOngoing,
+		};
+	},
+});
+</script>
+<style scoped>
+.expand-container {
+	z-index: 1;
+	position: relative;
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+	transition: all 0.15s linear 0s;
+	border-top: 1px solid #0a2e70;
+	border-bottom: 1px solid #0a2e70;
+	color: #0a2e70;
+	box-sizing: border-box;
+	height: auto;
+	background-color: rgba(255, 255, 255, 0.5);
+	margin-bottom: 25px;
+}
+
+.headline {
+	width: 100%;
+	padding: 0px;
+	margin: 0px;
+	height: 64px;
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	transition: all 0.5s linear 0s;
+	background-color: rgba(202, 240, 254, 0.1);
+	text-transform: capitalize;
+	font-weight: 100;
+}
+
+.entry-number {
+	margin-right: 12px;
+	margin-left: auto;
+	text-transform: none;
+}
+
+.headline:hover {
+	transition: all 0.5s linear 0s;
+}
+
+.icon {
+	font-size: 40px;
+	padding-right: 10px;
+	padding-left: 10px;
+}
+
+.expander {
+	overflow: hidden;
+	height: 0px;
+	width: 100%;
+	opacity: 0;
+	display: none;
+	position: relative;
+}
+
+.expand-container .expander.fade:before {
+	pointer-events: none;
+	content: '';
+	display: block;
+	width: 100%;
+	height: 30px;
+	background: linear-gradient(0deg, rgba(250, 250, 250, 1) 20%, rgba(255, 255, 255, 0) 100%);
+	position: absolute;
+	margin-top: 35px;
+	z-index: 1;
+	transition: all 0.1s linear 0.3s;
+	opacity: 1;
+}
+
+.expand-container:hover,
+.expand-container.open {
+	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.24) inset;
+}
+
+.expand-container.open {
+	background-color: white;
+}
+
+.expand-container.open .expander {
+	background-color: white;
+}
+
+.toggle-button.open:before {
+	transform: scaleY(1);
+}
+
+.toggle-button:before {
+	content: '';
+	display: block;
+	width: 0;
+	height: 0;
+	border-left: 10px solid transparent;
+	border-right: 10px solid transparent;
+	border-bottom: 6px solid #0a2e70;
+	position: absolute;
+	transition: all 0.15s ease-in-out 0s;
+	transform: scaleY(0);
+	transform-origin: bottom;
+	top: -17px;
+	left: 0px;
+}
+
+.toggle-button:after {
+	position: absolute;
+	content: '';
+	display: block;
+	width: 0;
+	height: 0;
+	border-left: 10px solid transparent;
+	border-right: 10px solid transparent;
+	border-top: 6px solid #0a2e70;
+	transform: scaleY(0);
+	transform-origin: top;
+	transition: all 0.15s ease-in-out 0s;
+	top: 11px;
+	left: 0px;
+}
+
+.toggle-button.closed:after {
+	transform: scaleY(1);
+}
+
+.expand-container.open .expander.fade:before {
+	opacity: 0;
+	transition: all 0.1s linear 0s;
+}
+
+.expander-toggle {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	align-content: center;
+	height: 0px;
+	left: 50%;
+	position: relative;
+	transform: translate(-30px, 0px);
+}
+
+.expander {
+	overflow: hidden;
+	height: 0px;
+	width: 100%;
+	opacity: 0;
+	display: none;
+	position: relative;
+	background-color: transparent;
+}
+
+.toggle-button {
+	z-index: 5;
+	border: 0px solid transparent;
+	cursor: pointer;
+	background-color: transparent;
+	padding: 10px 5px;
+	width: 20px;
+	height: 23px;
+	background-color: #0a2e70;
+	color: white;
+	font-size: 24px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	align-content: center;
+	transition: all 0.15s linear 0s;
+}
+</style>
diff --git a/src/components/common/GridDisplay.vue b/src/components/common/GridDisplay.vue
index b24f3157..eb944172 100644
--- a/src/components/common/GridDisplay.vue
+++ b/src/components/common/GridDisplay.vue
@@ -21,7 +21,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import { GenericSearchResultType } from '@/types/GenericSearchResultTypes';
-import GridResultItem from '../search/GridResultItem.vue';
+import GridResultItem from '@/components/search/GridResultItem.vue';
 
 export default defineComponent({
 	name: 'GridDisplay',
diff --git a/src/components/common/KBButton.vue b/src/components/common/KBButton.vue
index 387d26f8..247f8fa1 100644
--- a/src/components/common/KBButton.vue
+++ b/src/components/common/KBButton.vue
@@ -165,6 +165,9 @@ export default defineComponent({
 	min-height: 34px;
 	line-height: 1;
 }
+.btn-text::first-letter {
+	text-transform: capitalize;
+}
 .btn:disabled {
 	background-color: var(--bg-disabled);
 	cursor: default;
@@ -310,4 +313,32 @@ export default defineComponent({
 	background: var(--bg-golden);
 	color: var(--color-main);
 }
+.btn-tag-reset {
+	padding: var(--padding-02) var(--padding-01);
+	gap: var(--padding-small);
+	color: var(--color-main);
+	border-radius: var(--rounded-medium);
+	border: 1px solid var(--color-border-golden);
+	background: var(--bg-golden);
+}
+.btn-tag-reset .material-icons {
+	font-size: calc(var(--fs-meta) + 2px);
+}
+
+.btn-tag-sub {
+	padding: var(--padding-01) var(--padding-medium);
+	gap: var(--padding-small);
+	color: var(--color-main);
+	border-radius: var(--rounded-medium);
+	border: 1px solid var(--color-border-light);
+	background: var(--bg-light);
+}
+.btn-tag-sub .material-icons {
+	font-size: calc(var(--fs-meta) + 2px);
+}
+.btn-tag-sub:hover {
+	border: 1px solid var(--color-border-golden);
+	background: var(--bg-golden);
+	color: var(--color-main);
+}
 </style>
diff --git a/src/components/common/PortalContent.vue b/src/components/common/PortalContent.vue
index 624f3b92..ee156c1a 100644
--- a/src/components/common/PortalContent.vue
+++ b/src/components/common/PortalContent.vue
@@ -84,7 +84,7 @@ import { useSearchResultStore } from '@/store/searchResultStore';
 import GridDisplay from '@/components/common/GridDisplay.vue';
 import { GenericSearchResultType } from '@/types/GenericSearchResultTypes';
 import TimeSearchComponent from '@/components/common/TimeSearchComponent.vue';
-import TiltedDivider from '../global/content-elements/TiltedDivider.vue';
+import TiltedDivider from '@/components/global/content-elements/TiltedDivider.vue';
 import { addTestDataEnrichment } from '@/utils/test-enrichments';
 import DayPicker from '@/components/common/timeSearch/DayPicker.vue';
 import MainCategories from '@/components/common/MainCategories.vue';
diff --git a/src/components/common/SimpleCheckbox.vue b/src/components/common/SimpleCheckbox.vue
index d6159f68..5ebe2752 100644
--- a/src/components/common/SimpleCheckbox.vue
+++ b/src/components/common/SimpleCheckbox.vue
@@ -1,17 +1,49 @@
 <template>
-	<div :class="getClassStyle()">
+	<div
+		:class="[
+			'checkbox-container',
+			{
+				disabled: amount === '0' || (disabled && !checked),
+				checked: checked === true,
+			},
+		]"
+	>
 		<label
 			:title="title"
-			class="label"
+			class="label label-regular"
 		>
-			<span class="title label-small-bold">{{ title }}</span>
+			<input
+				role="checkbox"
+				type="checkbox"
+				class="checkbox"
+				autocomplete="off"
+				:name="title"
+				:disabled="(amount === '0' && !checked) || (disabled && !checked)"
+				:checked="checked"
+				:data-testid="addTestDataEnrichment('input', 'simple-checkbox', title, number)"
+				@change="updateSelection(!checked, title, fqkey)"
+			/>
+			<span
+				v-if="svg"
+				:class="[
+					'display-image svg',
+					santizeAndSimplify(svg),
+					{ disabled: (amount === '0' && !checked) || (disabled && !checked) },
+				]"
+			></span>
+			<span
+				v-if="channel"
+				:style="`background-image:url(${getFilterThumbnail(channel)})`"
+				:class="['display-image channel no-icon', { disabled: (amount === '0' && !checked) || (disabled && !checked) }]"
+			></span>
+			<span class="title label-regular label">{{ title }}</span>
 			<Transition
 				mode="out-in"
 				name="result"
 			>
 				<span
 					v-if="!loading"
-					class="tag-number label-small"
+					class="tag-number label-regular label"
 				>
 					{{ displayAmount(amount) }}
 				</span>
@@ -29,18 +61,6 @@
 					></span>
 				</span>
 			</Transition>
-			<input
-				role="checkbox"
-				type="checkbox"
-				class="checkbox"
-				autocomplete="off"
-				:name="title"
-				:disabled="(amount === '0' && !checked) || (disabled && !checked)"
-				:checked="checked"
-				:data-testid="addTestDataEnrichment('input', 'simple-checkbox', title, number)"
-				@change="updateSelection(!checked, title, fqkey)"
-			/>
-			<div class="underline"></div>
 		</label>
 	</div>
 </template>
@@ -48,9 +68,8 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import { SelectorData } from '@/types/TimeSearchTypes';
-import { addTestDataEnrichment } from '@/utils/test-enrichments';
-import { useSearchResultStore } from '@/store/searchResultStore';
-
+import { addTestDataEnrichment, santizeAndSimplify } from '@/utils/test-enrichments';
+import { getFilterThumbnail } from '@/utils/record-utils';
 export default defineComponent({
 	name: 'SimpleCheckbox',
 	props: {
@@ -68,6 +87,20 @@ export default defineComponent({
 				return '';
 			},
 		},
+		svg: {
+			type: String,
+			required: false,
+			default() {
+				return '';
+			},
+		},
+		channel: {
+			type: String,
+			required: false,
+			default() {
+				return '';
+			},
+		},
 		amount: {
 			type: String,
 			required: false,
@@ -97,21 +130,28 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		filterArray: {
+			type: Array,
+			default() {
+				return [];
+			},
+		},
 	},
 	setup(props) {
-		const searchResultStore = useSearchResultStore();
-
 		const displayAmount = (value: string | undefined) => {
 			return value ? `(${value})` : '';
 		};
 
 		const updateSelection = (checked: boolean, title: string | undefined, key: string | undefined) => {
-			props.update(props.parentArray, props.number, checked, title, key, searchResultStore.channelFilters);
+			props.update(props.parentArray, props.number, checked, title, key, props.filterArray);
 		};
-		const getClassStyle = () => {
-			return { 'checkbox-container': true, disabled: props.amount === '0' || (props.disabled && !props.checked) };
+		return {
+			displayAmount,
+			addTestDataEnrichment,
+			updateSelection,
+			santizeAndSimplify,
+			getFilterThumbnail,
 		};
-		return { displayAmount, addTestDataEnrichment, updateSelection, getClassStyle };
 	},
 });
 </script>
@@ -151,6 +191,30 @@ export default defineComponent({
 	opacity: 0.5;
 }
 
+.display-image {
+	width: 30px;
+	height: 30px;
+	padding: 0px 5px;
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+.display-image.disabled.no-icon {
+	opacity: 0.3;
+}
+
+.display-image.svg {
+	background-image: url('@/assets/icons/blue/diverse-blue.svg');
+}
+
+.display-image.svg.disabled {
+	background-image: url('@/assets/icons/gray/diverse-gray.svg');
+}
+
+.display-image.channel {
+	background-size: contain;
+}
+
 .name {
 	height: 100%;
 	display: flex;
@@ -166,7 +230,7 @@ export default defineComponent({
 	margin: 5px 0px;
 	margin-left: 5px;
 	border-radius: 5px;
-	background-color: rgba(170, 170, 170, 1);
+	background-color: var(--color-disabled-font);
 	height: 12px;
 	display: inline-block;
 }
@@ -187,9 +251,25 @@ export default defineComponent({
 }
 
 .checkbox-container {
-	max-height: 24px;
-	padding: 0px 5px;
+	height: 36px;
+	margin: 0px 5px;
+	padding: 2px 5px;
 	text-align: left;
+	border: 1px solid transparent;
+	transition: all 0.2s linear 0s;
+	box-sizing: border-box;
+}
+
+.checkbox-container:hover {
+	background-color: var(--bg-secondary-light-20);
+	border: 1px solid var(--color-border-light-focused);
+	border-radius: 4px;
+}
+
+.checkbox-container.checked {
+	background-color: var(--bg-secondary-light);
+	border: 1px solid var(--color-borders-light);
+	border-radius: 4px;
 }
 
 .checkbox-container.disabled .label {
@@ -202,6 +282,10 @@ export default defineComponent({
 
 .label {
 	position: relative;
+	display: flex;
+	cursor: pointer;
+	align-items: center;
+	height: 100%;
 }
 
 .underline {
@@ -214,15 +298,16 @@ export default defineComponent({
 
 .checkbox-container.disabled .title,
 .checkbox-container.disabled .tag-number {
-	color: rgb(177, 177, 177) !important;
+	color: var(--color-disabled-font);
 	font-weight: normal;
 }
 
 .tag-number {
 	color: #383838;
-	display: inline-block;
 	padding-left: 5px;
 	height: 100%;
+	margin-left: auto;
+	order: 2;
 }
 
 .loading.tag-number {
@@ -235,8 +320,8 @@ export default defineComponent({
 	margin: 0 0 0 5px;
 }
 .checkbox-container.disabled .loading.tag-number .text {
-	background-color: rgb(177, 177, 177) !important;
-	opacity: 0.5;
+	background-color: var(--color-disabled-font);
+	opacity: 1;
 }
 
 .title {
@@ -244,24 +329,17 @@ export default defineComponent({
 	max-width: calc(100% - 95px);
 	white-space: nowrap;
 	overflow: clip;
-	text-transform: uppercase;
 	color: #002e70;
-	display: inline-block;
 }
 
 .loading .checkbox:after {
-	border: 1px solid rgba(170, 170, 170, 1) !important;
+	border: 2px solid var(--color-disabled-font);
 	background-color: rgb(255, 255, 255) !important;
 	cursor: default;
 }
 
 .loading .checkbox:checked:after {
-	background-color: rgba(170, 170, 170, 1) !important;
-}
-
-.loading .checkbox:hover:before {
-	cursor: default !important;
-	border-color: white !important;
+	background-color: var(--color-disabled-font);
 }
 
 .checkbox:disabled {
@@ -272,29 +350,6 @@ export default defineComponent({
 	cursor: default;
 }
 
-.checkbox:disabled:hover:after {
-	background-color: transparent;
-	cursor: default;
-}
-
-.checkbox:disabled:hover:after {
-	cursor: default;
-	background-color: #002e70;
-}
-
-.checkbox:hover:after {
-	background-color: #caf0fe;
-}
-
-.checkbox:checked:hover:before {
-	border-color: #002e70;
-	cursor: pointer;
-}
-.checkbox:checked:hover:after {
-	border-color: rgba(170, 170, 170, 1);
-	background-color: white;
-}
-
 input:focus {
 	box-shadow: 0 0 0 2px rgba(39, 94, 254, 0.5);
 }
@@ -308,7 +363,7 @@ input:focus {
 }
 
 .checkbox-container.disabled .checkbox:after {
-	border: 1px solid rgb(145, 145, 145);
+	border: 3px solid rgb(145, 145, 145);
 }
 
 .checkbox-container.disabled .checkbox:hover:after {
@@ -321,9 +376,11 @@ input:focus {
 	transition: all 0.15s linear 0s;
 	content: '';
 	display: block;
-	width: 15px;
-	height: 15px;
-	border: 1px solid #002e70;
+	width: 20px;
+	height: 20px;
+	border: 3px solid #002e70;
+	border-radius: 4px;
+	box-sizing: border-box;
 }
 
 .checkbox:checked:after {
@@ -333,18 +390,85 @@ input:focus {
 .checkbox:checked:before {
 	content: '';
 	display: block;
-	width: 7px;
-	height: 12px;
+	width: 9px;
+	height: 16px;
 	border-bottom: 2px solid white;
 	border-right: 2px solid white;
 	position: absolute;
-	top: 1px;
-	left: 5px;
+	top: -1px;
+	left: 6px;
 	box-sizing: border-box;
 	transform-origin: center;
 	transform: rotateZ(45deg);
 }
 
+.svg.diverse {
+	background-image: url('@/assets/icons/blue/diverse-blue.svg');
+}
+.svg.dokumentar {
+	background-image: url('@/assets/icons/blue/dokumentar-blue.svg');
+}
+.svg.film-og-serier {
+	background-image: url('@/assets/icons/blue/fiktion-blue.svg');
+}
+.svg.kultur-og-oplysning {
+	background-image: url('@/assets/icons/blue/kultur-blue.svg');
+}
+.svg.livsstil {
+	background-image: url('@/assets/icons/blue/livsstil-blue.svg');
+}
+.svg.musik {
+	background-image: url('@/assets/icons/blue/musik-blue.svg');
+}
+.svg.nyheder-politik-og-samfund {
+	background-image: url('@/assets/icons/blue/nyheder-blue.svg');
+}
+.svg.sport {
+	background-image: url('@/assets/icons/blue/sport-blue.svg');
+}
+.svg.humor-quiz-og-underholdning {
+	background-image: url('@/assets/icons/blue/underholdning-blue.svg');
+}
+.svg.natur-og-videnskab {
+	background-image: url('@/assets/icons/blue/videnskab-blue.svg');
+}
+.svg.brn-og-unge {
+	background-image: url('@/assets/icons/blue/born-blue.svg');
+}
+
+.svg.diverse.disabled {
+	background-image: url('@/assets/icons/gray/diverse-gray.svg');
+}
+.svg.dokumentar.disabled {
+	background-image: url('@/assets/icons/gray/dokumentar-gray.svg');
+}
+.svg.film-og-serier.disabled {
+	background-image: url('@/assets/icons/gray/fiktion-gray.svg');
+}
+.svg.kultur-og-oplysning.disabled {
+	background-image: url('@/assets/icons/gray/kultur-gray.svg');
+}
+.svg.livsstil.disabled {
+	background-image: url('@/assets/icons/gray/livsstil-gray.svg');
+}
+.svg.musik.disabled {
+	background-image: url('@/assets/icons/gray/musik-gray.svg');
+}
+.svg.nyheder-politik-og-samfund.disabled {
+	background-image: url('@/assets/icons/gray/nyheder-gray.svg');
+}
+.svg.sport.disabled {
+	background-image: url('@/assets/icons/gray/sport-gray.svg');
+}
+.svg.humor-quiz-og-underholdning.disabled {
+	background-image: url('@/assets/icons/gray/underholdning-gray.svg');
+}
+.svg.natur-og-videnskab.disabled {
+	background-image: url('@/assets/icons/gray/videnskab-gray.svg');
+}
+.svg.brn-og-unge.disabled {
+	background-image: url('@/assets/icons/gray/born-gray.svg');
+}
 .label {
 	cursor: pointer;
 }
diff --git a/src/components/common/TimePicker.vue b/src/components/common/TimePicker.vue
new file mode 100644
index 00000000..80b3103c
--- /dev/null
+++ b/src/components/common/TimePicker.vue
@@ -0,0 +1,770 @@
+<template>
+	<div
+		ref="root"
+		class="datepicker"
+		@keydown.esc="close"
+	>
+		<label
+			class="datepicker-explanation"
+			:for="inputId"
+		>
+			{{ t('calendar.select') }}:
+		</label>
+
+		<div class="input-wrap">
+			<input
+				:id="inputId"
+				ref="input"
+				v-model="displayValue"
+				class="dp-input"
+				:aria-invalid="invalid"
+				:aria-describedby="hintId"
+				placeholder="DD-MM-YYYY"
+				autocomplete="off"
+				@keydown.enter.prevent="onInputEnter"
+				@blur="onInputEnter"
+			/>
+			<Transition name="fade">
+				<div
+					v-if="invalid && displayValue.length > 0"
+					class="error-container"
+				>
+					{{ t('datepicker.error', { start: formatErrorDate(startYear), end: formatErrorDate(endYear) }) }}
+				</div>
+			</Transition>
+			<button
+				type="button"
+				class="dp-toggle"
+				:aria-expanded="opened"
+				:aria-controls="calendarId"
+				:aria-label="opened ? t('calendar.close') : t('calendar.open')"
+				@click="toggle"
+			>
+				<span class="material-icons">calendar_month</span>
+			</button>
+		</div>
+
+		<p
+			:id="hintId"
+			class="visually-hidden"
+		>
+			{{ t('calendar.explanation') }}
+		</p>
+		<Transition name="closeAndFade">
+			<div
+				v-if="opened"
+				:id="calendarId"
+				ref="calendar"
+				class="dp-calendar"
+				role="dialog"
+				aria-modal="false"
+				:aria-labelledby="calendarHeadingId"
+			>
+				<div class="dp-calendar-header">
+					<div class="dp-calendar-selectors">
+						<div class="dp-selectors">
+							<select
+								v-model="selectedMonth"
+								class="btn-big"
+								@change="onMonthChange"
+							>
+								<option
+									v-for="(m, i) in monthNames"
+									:key="i"
+									:value="i"
+								>
+									{{ m }}
+								</option>
+							</select>
+
+							<select
+								v-model="selectedYear"
+								class="btn-big"
+								@change="onYearChange"
+							>
+								<option
+									v-for="y in yearRange"
+									:key="y"
+									:value="y"
+								>
+									{{ y }}
+								</option>
+							</select>
+						</div>
+					</div>
+					<div class="dp-calender-prev-next">
+						<button
+							type="button"
+							:aria-label="t('calendar.prevMonth')"
+							class="material-icons change-month left"
+							@click="prevMonth"
+						>
+							keyboard_arrow_left
+						</button>
+						<h3 :id="calendarHeadingId">{{ monthTitle }}</h3>
+						<button
+							type="button"
+							:aria-label="t('calendar.nextMonth')"
+							class="material-icons change-month right"
+							@click="nextMonth"
+						>
+							keyboard_arrow_right
+						</button>
+					</div>
+				</div>
+				<div
+					ref="grid"
+					role="grid"
+					class="dp-grid"
+				>
+					<div
+						role="row"
+						class="dp-weeknames"
+					>
+						<div
+							v-for="day in weekNames"
+							:key="day"
+							role="columnheader"
+							class="dp-weekname"
+						>
+							{{ day }}
+						</div>
+					</div>
+					<div role="rowgroup">
+						<div
+							v-for="(week, index) in weeks"
+							:key="index"
+							role="row"
+							class="dp-week"
+						>
+							<button
+								v-for="day in week"
+								:key="day.key"
+								class="dp-day"
+								:disabled="day.disabled"
+								:class="{
+									'dp-day-selected': isSameDate(day.date, modelValue),
+									'dp-day-outside': !day.inMonth,
+								}"
+								role="gridcell"
+								:aria-selected="isSameDate(day.date, modelValue) ? 'true' : 'false'"
+								:tabindex="isSameDate(day.date, focusDate) ? 0 : -1"
+								:aria-label="day.ariaLabel"
+								:data-key="day.key"
+								@click="selectDay(day.date)"
+								@keydown="onDayKeydown($event, day)"
+							>
+								<span class="dp-day-label label-regular">{{ day.label }}</span>
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</Transition>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, watch, useId } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { CalendarDay } from '@/types/CalendarTypes';
+import { startYear, endYear } from './timeSearch/TimeSearchInitValues';
+
+export default defineComponent({
+	name: 'DatePicker',
+
+	props: {
+		modelValue: { type: Date, default: null },
+		startDate: { type: Date, default: null },
+		endDate: { type: Date, default: null },
+		name: { type: String, required: true },
+	},
+
+	emits: ['update:modelValue', 'check'],
+
+	setup(props, { emit }) {
+		const { t, locale } = useI18n();
+		const inputTimer = ref<number | null>(null);
+
+		const today = new Date();
+		const opened = ref(false);
+		const invalid = ref(false);
+
+		const input = ref<HTMLInputElement>();
+		const calendar = ref<HTMLDivElement>();
+
+		const currentView = ref(
+			props.modelValue
+				? new Date(props.modelValue.getFullYear(), props.modelValue.getMonth(), 1)
+				: new Date(today.getFullYear(), today.getMonth(), 1),
+		);
+
+		const focusDate = ref(props.modelValue ? new Date(props.modelValue) : new Date(today));
+
+		const uid = useId();
+		const idBase = `dp-${props.name}-${uid}`;
+
+		const inputId = idBase;
+		const calendarId = `${idBase}-cal`;
+		const calendarHeadingId = `${idBase}-heading`;
+		const hintId = `${idBase}-hint`;
+
+		const monthNames = computed(() => {
+			const formatter = new Intl.DateTimeFormat(locale.value, { month: 'long' });
+			return Array.from({ length: 12 }, (_, i) => formatter.format(new Date(2000, i, 1)));
+		});
+
+		const weekNames = computed(() => {
+			const formatter = new Intl.DateTimeFormat(locale.value, { weekday: 'short' });
+			const base = new Date(2024, 0, 1);
+			return Array.from({ length: 7 }, (_, i) =>
+				formatter.format(new Date(base.getFullYear(), base.getMonth(), base.getDate() + i)).slice(0, 2),
+			);
+		});
+
+		const selectedMonth = ref(currentView.value.getMonth());
+		const selectedYear = ref(currentView.value.getFullYear());
+
+		const minDate = computed(() => (props.startDate ? new Date(props.startDate) : null));
+		const maxDate = computed(() => (props.endDate ? new Date(props.endDate) : null));
+
+		const yearRange = computed(() => {
+			const start = minDate.value ? minDate.value.getFullYear() : today.getFullYear() - 100;
+			const end = maxDate.value ? maxDate.value.getFullYear() : today.getFullYear() + 20;
+			const arr = [];
+			for (let y = start; y <= end; y++) {
+				arr.push(y);
+			}
+			return arr;
+		});
+
+		watch(currentView, (date) => {
+			selectedMonth.value = date.getMonth();
+			selectedYear.value = date.getFullYear();
+		});
+
+		function formatDate(date: Date | null) {
+			if (!date) {
+				return '';
+			}
+			const dd = String(date.getDate()).padStart(2, '0');
+			const mm = String(date.getMonth() + 1).padStart(2, '0');
+			const yyyy = date.getFullYear();
+			return `${dd}-${mm}-${yyyy}`;
+		}
+
+		function parseInputToDate(str: string) {
+			const m = str.match(/^(\d{2})-(\d{2})-(\d{4})$/);
+			if (!m) {
+				return null;
+			}
+			const d = new Date(Number(m[3]), Number(m[2]) - 1, Number(m[1]));
+			return isNaN(d.getTime()) ? null : d;
+		}
+
+		function isSameDate(a: Date, b: Date) {
+			if (!(a instanceof Date) || !(b instanceof Date)) {
+				return false;
+			}
+			return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+		}
+
+		const displayValue = ref(formatDate(props.modelValue));
+
+		watch(displayValue, (val) => {
+			if (inputTimer.value) {
+				clearTimeout(inputTimer.value);
+			}
+
+			inputTimer.value = window.setTimeout(() => {
+				const normalized = val.replace(/[^0-9]/g, (m, i) => (i === 2 || i === 5 ? '-' : ''));
+				if (normalized !== val) {
+					displayValue.value = normalized;
+				}
+
+				const parsed = parseInputToDate(normalized);
+				let isInvalid = !parsed;
+
+				if (parsed) {
+					const year = parsed.getFullYear();
+					if (year < startYear.value.getFullYear() || year > endYear.value.getFullYear()) {
+						isInvalid = true;
+					}
+				}
+
+				invalid.value = isInvalid;
+
+				emit('update:modelValue', parsed);
+			}, 100);
+		});
+
+		function onInputEnter() {
+			const parsed = parseInputToDate(displayValue.value);
+			if (!parsed) {
+				invalid.value = true;
+				return;
+			}
+			selectDay(parsed);
+			close();
+		}
+
+		function selectDay(date: Date) {
+			/* emit('update:modelValue', new Date(date)); */
+			currentView.value = new Date(date.getFullYear(), date.getMonth(), 1);
+			focusDate.value = new Date(date);
+			displayValue.value = formatDate(date);
+
+			requestAnimationFrame(() => {
+				const key = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+				const el = calendar.value?.querySelector<HTMLElement>(`[data-key="${key}"]`);
+				el?.focus();
+			});
+		}
+
+		function onMonthChange() {
+			currentView.value = new Date(selectedYear.value, selectedMonth.value, 1);
+			focusDate.value = new Date(selectedYear.value, selectedMonth.value, 1);
+		}
+
+		function onYearChange() {
+			if (minDate.value && selectedYear.value < minDate.value.getFullYear()) {
+				selectedYear.value = minDate.value.getFullYear();
+			}
+			if (maxDate.value && selectedYear.value > maxDate.value.getFullYear()) {
+				selectedYear.value = maxDate.value.getFullYear();
+			}
+			currentView.value = new Date(selectedYear.value, selectedMonth.value, 1);
+			focusDate.value = new Date(selectedYear.value, selectedMonth.value, 1);
+		}
+
+		const monthTitle = computed(() =>
+			currentView.value.toLocaleString(locale.value, { month: 'long', year: 'numeric' }),
+		);
+
+		function buildCalendar(year: number, month: number) {
+			const first = new Date(year, month, 1);
+			const startDay = (first.getDay() + 6) % 7;
+			const daysInMonth = new Date(year, month + 1, 0).getDate();
+			const totalCells = Math.ceil((startDay + daysInMonth) / 7) * 7;
+			const startDate = new Date(year, month, 1 - startDay);
+			const days: CalendarDay[] = [];
+
+			for (let i = 0; i < totalCells; i++) {
+				const date = new Date(startDate);
+				date.setDate(startDate.getDate() + i);
+				const isBeforeMin = !!minDate.value && date < minDate.value;
+				const isAfterMax = !!maxDate.value && date > maxDate.value;
+				const key = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+
+				days.push({
+					date,
+					label: date.getDate(),
+					inMonth: date.getMonth() === month,
+					key,
+					disabled: isBeforeMin || isAfterMax,
+					ariaLabel: date.toLocaleDateString(locale.value, {
+						weekday: 'long',
+						year: 'numeric',
+						month: 'long',
+						day: 'numeric',
+					}),
+				});
+			}
+
+			const weeks = [];
+			for (let i = 0; i < days.length; i += 7) {
+				weeks.push(days.slice(i, i + 7));
+			}
+			return weeks;
+		}
+
+		const weeks = computed(() => buildCalendar(currentView.value.getFullYear(), currentView.value.getMonth()));
+		const flatDays = computed(() => weeks.value.flat());
+
+		function focusSelectedOrToday() {
+			const key = props.modelValue
+				? `${props.modelValue.getFullYear()}-${props.modelValue.getMonth()}-${props.modelValue.getDate()}`
+				: `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
+			const el = calendar.value?.querySelector<HTMLElement>(`[data-key="${key}"]`);
+			el?.focus();
+		}
+
+		function prevMonth() {
+			const prev = new Date(currentView.value.getFullYear(), currentView.value.getMonth() - 1, 1);
+			if (!(minDate.value && prev < minDate.value)) {
+				currentView.value = prev;
+				focusDate.value = new Date(prev);
+			}
+		}
+
+		function nextMonth() {
+			const next = new Date(currentView.value.getFullYear(), currentView.value.getMonth() + 1, 1);
+			if (!(maxDate.value && next > maxDate.value)) {
+				currentView.value = next;
+				focusDate.value = new Date(next);
+			}
+		}
+
+		function onDayKeydown(e: KeyboardEvent, day: CalendarDay) {
+			const key = e.key;
+			const arrowKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+			const selectKeys = ['Enter', ' '];
+
+			if (![...arrowKeys, ...selectKeys].includes(key)) {
+				return;
+			}
+			if (day.disabled) {
+				e.preventDefault();
+				return;
+			}
+			e.preventDefault();
+
+			if (selectKeys.includes(key)) {
+				selectDay(day.date);
+				return;
+			}
+
+			let newDate = new Date(day.date);
+			if (key === 'ArrowLeft') {
+				newDate.setDate(newDate.getDate() - 1);
+			}
+			if (key === 'ArrowRight') {
+				newDate.setDate(newDate.getDate() + 1);
+			}
+			if (key === 'ArrowUp') {
+				newDate.setDate(newDate.getDate() - 7);
+			}
+			if (key === 'ArrowDown') {
+				newDate.setDate(newDate.getDate() + 7);
+			}
+
+			if (minDate.value && newDate < minDate.value) {
+				newDate = new Date(minDate.value);
+			}
+			if (maxDate.value && newDate > maxDate.value) {
+				newDate = new Date(maxDate.value);
+			}
+
+			if (
+				newDate.getMonth() !== currentView.value.getMonth() ||
+				newDate.getFullYear() !== currentView.value.getFullYear()
+			) {
+				currentView.value = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+			}
+
+			requestAnimationFrame(() => {
+				const key = `${newDate.getFullYear()}-${newDate.getMonth()}-${newDate.getDate()}`;
+				const el = calendar.value?.querySelector<HTMLElement>(`[data-key="${key}"]`);
+				el?.focus();
+			});
+		}
+
+		function formatErrorDate(date: Date) {
+			if (!(date instanceof Date)) {
+				return '';
+			}
+			return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
+		}
+
+		function open() {
+			opened.value = true;
+			requestAnimationFrame(focusSelectedOrToday);
+		}
+		function close() {
+			opened.value = false;
+		}
+		function toggle() {
+			opened.value ? close() : open();
+		}
+
+		return {
+			t,
+			locale,
+			inputId,
+			calendarId,
+			calendarHeadingId,
+			hintId,
+			opened,
+			invalid,
+			input,
+			calendar,
+			currentView,
+			focusDate,
+			monthNames,
+			weekNames,
+			selectedMonth,
+			selectedYear,
+			yearRange,
+			minDate,
+			maxDate,
+			displayValue,
+			weeks,
+			flatDays,
+			monthTitle,
+			open,
+			close,
+			toggle,
+			onInputEnter,
+			onMonthChange,
+			onYearChange,
+			prevMonth,
+			nextMonth,
+			selectDay,
+			onDayKeydown,
+			isSameDate,
+			formatErrorDate,
+			startYear,
+			endYear,
+		};
+	},
+});
+</script>
+
+<style scoped>
+.closeAndFade-enter-active,
+.closeAndFade-leave-active {
+	transition:
+		opacity 0.6s ease,
+		max-height 0.6s ease,
+		margin-bottom 0.6s ease;
+	overflow: hidden;
+}
+
+.closeAndFade-enter-from,
+.closeAndFade-leave-to {
+	opacity: 0;
+	max-height: 0;
+}
+
+.closeAndFade-enter-to,
+.closeAndFade-leave-from {
+	opacity: 1;
+	max-height: 400px;
+}
+
+.visually-hidden {
+	position: absolute !important;
+	height: 1px;
+	width: 1px;
+	overflow: hidden;
+	clip: rect(1px, 1px, 1px, 1px);
+}
+
+.dp-day-outside .dp-day-label {
+	color: #aaa; /* light grey */
+}
+
+.material-icons {
+	color: var(--color-main);
+}
+
+.datepicker-explanation {
+	text-align: start;
+	width: 100%;
+	visibility: hidden;
+}
+
+.datepicker {
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+	align-items: center;
+	font-family: noway, sans-serif;
+}
+
+.dp-selectors {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+}
+
+.dp-selectors select {
+	border: 0px;
+	background-color: white;
+	border: 1px solid #dadada;
+	border-radius: 4px;
+	padding: 4px 50px 5px 8px;
+	color: #002e70;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	background-color: white;
+	background: url('@/assets/icons/blue/dd-arrow-blue.svg') white;
+	background-repeat: no-repeat;
+	background-position-x: 85px;
+	background-position-y: 13px;
+	width: 118px;
+	box-sizing: border-box;
+	height: 48px;
+}
+
+.input-wrap {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	position: relative;
+}
+
+.dp-day:hover {
+	background-color: var(--bg-light);
+}
+
+.dp-day-disabled {
+	color: #ccc;
+	opacity: 0.4;
+	cursor: default;
+	pointer-events: none;
+}
+
+.dp-input {
+	padding: 8px 10px;
+	width: calc(266px - 22px);
+	height: 22px;
+	font-family: noway, sans-serif;
+	font-size: 20px;
+	color: #0a2e70;
+	border-radius: 4px;
+	border: 1px solid var(--color-main);
+	height: 48px;
+	box-sizing: border-box;
+}
+
+.dp-toggle {
+	background: transparent;
+	border: 1px solid var(--bg-default-gray);
+	padding: 8px;
+	border-radius: 4px;
+	height: 48px;
+	width: 48px;
+	cursor: pointer;
+	border: 1px solid var(--color-main);
+	transition: all 0.15s linear 0s;
+}
+
+.dp-toggle span {
+	transition: all 0.15s linear 0s;
+}
+
+.dp-toggle:hover span {
+	color: #ffffff;
+}
+
+.dp-toggle:hover {
+	background-color: var(--color-main);
+}
+
+.dp-selectors select {
+	width: calc(50% - 5px);
+	cursor: pointer;
+}
+
+.dp-calendar {
+	position: relative;
+	z-index: 50;
+	margin-top: 8px;
+	background: white;
+	border: 1px solid #ddd;
+	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
+	padding: 12px;
+	border-radius: 6px;
+}
+.dp-calendar-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 8px;
+	flex-direction: column;
+}
+
+.dp-calender-prev-next {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	width: 100%;
+	justify-content: space-between;
+}
+
+.dp-calender-prev-next button {
+	border: 0px;
+	background-color: transparent;
+	font-size: 32px;
+	cursor: pointer;
+}
+
+.dp-calender-prev-next h3 {
+	text-transform: capitalize;
+}
+
+.dp-calendar-selectors {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+}
+
+.dp-grid {
+	display: block;
+}
+.dp-weeknames {
+	display: grid;
+	grid-template-columns: repeat(7, 36px);
+	gap: 4px;
+	margin-bottom: 6px;
+}
+
+.dp-weekname {
+	text-transform: capitalize;
+	display: flex;
+	justify-content: center;
+}
+
+.dp-week {
+	display: grid;
+	grid-template-columns: repeat(7, 36px);
+	gap: 4px;
+}
+.dp-day {
+	height: 36px;
+	width: 36px;
+	border: none;
+	background: transparent;
+	cursor: pointer;
+	border-radius: 4px;
+	transition: all 0.15s linear 0s;
+}
+.dp-day:focus {
+	outline: 2px solid var(--color-main);
+}
+.dp-day[aria-selected='true'],
+.dp-day-selected {
+	background-color: var(--color-main);
+	color: white;
+	font-weight: bold;
+}
+
+.error-container {
+	width: 50%;
+	position: absolute;
+	height: fit-content;
+	left: 65px;
+	top: -78px;
+	color: white;
+	padding: 5px;
+	background-color: var(--color-alert-red);
+	box-sizing: border-box;
+	z-index: 200;
+	bottom: -5px;
+}
+
+.error-container:before {
+	content: '';
+	display: block;
+	width: 0;
+	height: 0;
+	border-left: 7px solid transparent;
+	border-right: 7px solid transparent;
+	border-top: 7px solid var(--color-alert-red);
+	bottom: -7px;
+	position: absolute;
+	left: 50%;
+	transform: translate(-50%, 0%);
+}
+</style>
diff --git a/src/components/common/TimeSearchComponent.vue b/src/components/common/TimeSearchComponent.vue
index ac867b66..3c1325ab 100644
--- a/src/components/common/TimeSearchComponent.vue
+++ b/src/components/common/TimeSearchComponent.vue
@@ -133,7 +133,7 @@ export default defineComponent({
 				start: 0,
 				rows: 10,
 				fq: [],
-				sort: `random_${Date.now()} ASC`,
+				/* sort: `random_${Date.now()} ASC`, */
 			},
 		});
 
@@ -194,7 +194,7 @@ export default defineComponent({
 					start: 0,
 					rows: 10,
 					fq: fqArray,
-					sort: `random_${Date.now()} ASC`,
+					/* sort: `random_${Date.now()} ASC`, */
 				},
 			};
 		};
@@ -228,7 +228,7 @@ h2 {
 
 .result-container {
 	width: 100%;
-	padding-top: 25px;
+	padding-top: 45px;
 }
 
 .result-header {
@@ -300,7 +300,6 @@ h2 {
 	text-align: left;
 	max-width: 1280px;
 	width: 100%;
-	display: none;
 }
 
 .header h2 {
@@ -327,6 +326,9 @@ h2 {
 	.time-result-item:nth-child(n + 5) {
 		display: none;
 	}
+	.result-container {
+		padding-top: 85px;
+	}
 }
 
 @media (min-width: 480px) {
diff --git a/src/components/common/TimelineHeadline.vue b/src/components/common/TimelineHeadline.vue
index 5c651857..835fa9d9 100644
--- a/src/components/common/TimelineHeadline.vue
+++ b/src/components/common/TimelineHeadline.vue
@@ -21,6 +21,8 @@
 				v-for="(item, index) in selectedItems.selectedItems"
 				:key="`${index}-${item.name}`"
 				class="selected-entity label-small"
+				button-color="main"
+				button-size="small"
 				:data-testid="addTestDataEnrichment('button', 'timeline-headline', `${headline}-small-status-toggle`, 0)"
 				:button-text="
 					formatStringForTime(
@@ -31,8 +33,6 @@
 					)
 				"
 				button-type="btn-tag"
-				button-size="small"
-				button-color="main"
 				:title="`${t('facets.remove')} ${
 					useTranslation ? (item.translation ? t(item.translation) : t(item.name)) : item.name
 				}`"
diff --git a/src/components/common/timeSearch/DayPicker.vue b/src/components/common/timeSearch/DayPicker.vue
index 4ca64d13..28ebbd58 100644
--- a/src/components/common/timeSearch/DayPicker.vue
+++ b/src/components/common/timeSearch/DayPicker.vue
@@ -1,39 +1,12 @@
 <template>
 	<div class="day-picker container">
 		<div class="picker-container">
-			<span class="date-span label-medium">{{ t('datepicker.date') }}:</span>
-			<VueDatePicker
-				ref="singleDatePicker"
+			<TimePicker
 				v-model="selectedDate"
-				:inline="{ input: true }"
-				:enable-time-picker="false"
-				:locale="locale"
-				auto-apply
-				no-today
-				:text-input="textInputOptions"
-				:format="format"
-				six-weeks="fair"
-				:month-change-on-scroll="false"
-				:min-date="startYear"
-				:max-date="endYear"
-				prevent-min-max-navigation
-				:year-range="[startYear.getFullYear(), endYear.getFullYear()]"
-				:state="validDate"
-				allow-null="true"
-				@update:model-value="updateSeeMoreLink()"
-				@update-month-year="HandleMonthYear"
-				@keydown="setupInputTimer"
-				@keydown.enter="executeUpdate($event)"
-				@blur="validDate = true"
-			></VueDatePicker>
-			<Transition name="fade">
-				<div
-					v-if="!validDate"
-					class="error-container"
-				>
-					{{ t('datepicker.error', { start: formatDate(startYear), end: formatDate(endYear) }) }}
-				</div>
-			</Transition>
+				:start-date="startYear"
+				:end-date="endYear"
+				name="frontpageDatePicker"
+			/>
 		</div>
 		<div class="time-container">
 			<KBButton
@@ -56,7 +29,6 @@
 <script lang="ts">
 import { defineComponent, onMounted, ref, watch } from 'vue';
 import type { DatePickerInstance } from '@vuepic/vue-datepicker';
-import VueDatePicker from '@vuepic/vue-datepicker';
 import {
 	days,
 	endDate,
@@ -70,8 +42,11 @@ import { RouteLocationRaw } from 'vue-router';
 import { addTestDataEnrichment } from '@/utils/test-enrichments';
 import { resetAllSelectorValues } from '@/utils/time-search-utils';
 import { useI18n } from 'vue-i18n';
-import { updateSelectedDate } from '@/utils/datepicker-utils';
+import { updateDate } from '@/utils/datepicker-utils';
+import TimePicker from '@/components/common/TimePicker.vue';
 import { useTimeSearchStore } from '@/store/timeSearchStore';
+import '@vuepic/vue-datepicker/dist/main.css';
+import '@/components/common/timeSearch/custom-datepicker.css';
 import KBButton from '@/components/common/KBButton.vue';
 
 interface MonthYearEvent {
@@ -83,14 +58,14 @@ interface MonthYearEvent {
 export default defineComponent({
 	name: 'DayPicker',
 	components: {
-		VueDatePicker,
+		TimePicker,
 		KBButton,
 	},
 	setup() {
 		let inputTimer: ReturnType<typeof setTimeout> | null = null;
 		const timeSearchStore = useTimeSearchStore();
 		const singleDatePicker = ref<DatePickerInstance>();
-		const selectedDate = ref<Date | null>(new Date(2015, 0, 1, 0, 0, 0));
+		const selectedDate = ref<Date | undefined>();
 		const singleDayStartDate = ref<Date>(new Date(2015, 0, 1, 0, 0, 0)); // January 1, 2015, 00:00:00
 		const singleDayEndDate = ref<Date>(new Date(2015, 0, 1, 23, 59, 59)); // January 1, 2015, 23:59:59
 
@@ -133,26 +108,18 @@ export default defineComponent({
 				if (inputTimer !== null) {
 					clearTimeout(inputTimer);
 				}
-				updateSeeMoreLink();
+				updateDate(inputTimer, validDate, selectedDate, updateSeeMoreLink);
 			},
+			{ deep: true },
 		);
 
-		const setupInputTimer = (e: Event) => {
+		const setupInputTimer = () => {
 			if (inputTimer !== null) {
 				clearTimeout(inputTimer);
 			}
 			inputTimer = setTimeout(() => {
-				updateSelectedDate(e, inputTimer, validDate, selectedDate, updateSeeMoreLink);
-			}, 750); // 750 milliseconds (0.75 second) delay
-		};
-
-		const formatDate = (date: Date) => {
-			if (!(date instanceof Date)) return '';
-			return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear();
-		};
-
-		const textInputOptions = {
-			format: 'd-M-yyyy',
+				updateDate(inputTimer, validDate, selectedDate, updateSeeMoreLink);
+			}, 1000); // 1000 milliseconds (1 second) delay
 		};
 
 		const specificDayLink = ref<RouteLocationRaw>({
@@ -166,7 +133,7 @@ export default defineComponent({
 		});
 
 		const moveToSearchPage = () => {
-			if (selectedDate.value !== null && startDate.value !== null && endDate.value !== null) {
+			if (selectedDate.value !== undefined) {
 				startDate.value.setFullYear(selectedDate.value.getFullYear());
 				startDate.value.setMonth(selectedDate.value.getMonth());
 				startDate.value.setDate(selectedDate.value.getDate());
@@ -182,8 +149,8 @@ export default defineComponent({
 			window.scrollTo({ top: 0, behavior: 'smooth' });
 		};
 
-		const executeUpdate = (e: Event) => {
-			updateSelectedDate(e, inputTimer, validDate, selectedDate, updateSeeMoreLink); // Pass .value here as well
+		const executeUpdate = () => {
+			updateDate(inputTimer, validDate, selectedDate, updateSeeMoreLink); // Pass .value here as well
 		};
 
 		const updateSeeMoreLink = () => {
@@ -246,13 +213,11 @@ export default defineComponent({
 			moveToSearchPage,
 			HandleMonthYear,
 			locale,
-			textInputOptions,
-			updateSelectedDate,
+			updateDate,
 			setupInputTimer,
 			inputTimer,
 			validDate,
 			executeUpdate,
-			formatDate,
 			t,
 		};
 	},
@@ -266,38 +231,6 @@ export default defineComponent({
 	justify-content: center;
 }
 
-.date-span {
-	width: 320px;
-	position: relative;
-	display: block;
-}
-
-.error-container {
-	width: 50%;
-	position: absolute;
-	height: fit-content;
-	left: 0px;
-	top: 55px;
-	color: white;
-	padding: 5px;
-	background-color: rgb(184, 0, 0);
-	box-sizing: border-box;
-}
-
-.error-container:before {
-	content: '';
-	display: block;
-	width: 0;
-	height: 0;
-	border-left: 7px solid transparent;
-	border-right: 7px solid transparent;
-	border-bottom: 7px solid rgb(184, 0, 0);
-	top: -7px;
-	position: absolute;
-	left: 50%;
-	transform: translate(-50%, 0%);
-}
-
 .picker-container {
 	display: flex;
 	flex-direction: column;
@@ -383,8 +316,8 @@ export default defineComponent({
 	justify-content: space-around;
 	flex-direction: column;
 	align-items: center;
-	padding-top: 20px;
-	width: 320px;
+	padding-top: 0px;
+	width: 300px;
 	align-items: flex-end;
 	padding-left: 8px;
 	padding-right: 8px;
diff --git a/src/components/common/timeSearch/TimeSearchFilters.vue b/src/components/common/timeSearch/TimeSearchFilters.vue
index d5aedf03..1618a47e 100644
--- a/src/components/common/timeSearch/TimeSearchFilters.vue
+++ b/src/components/common/timeSearch/TimeSearchFilters.vue
@@ -53,8 +53,16 @@
 			<div
 				ref="dataContainer"
 				class="data-container"
-			></div>
-			<div class="dotted-separator"></div>
+			>
+				<div
+					ref="highlightStart"
+					class="data-highlight start-block"
+				></div>
+				<div
+					ref="highlightEnd"
+					class="data-highlight end-block"
+				></div>
+			</div>
 			<Transition name="fade">
 				<VueSlider
 					v-if="data.length > 0"
@@ -70,181 +78,6 @@
 			</Transition>
 		</div>
 	</div>
-	<div
-		v-show="picker"
-		class="picker-container"
-	>
-		<CustomExpander
-			ref="yearSearch"
-			:headline="t('timeSearch.yearHeadline')"
-			icon="event"
-			:subline="getSublineForYears(startDate, endDate, t)"
-		>
-			<div class="picker-background"><DatePicker @date-search="emitNewSearch"></DatePicker></div>
-		</CustomExpander>
-	</div>
-	<div class="time-selection">
-		<div class="month-selector-expanding">
-			<fieldset>
-				<CustomExpander
-					:headline="t('timeSearch.monthHeadline')"
-					icon="event"
-					:subline="getSublineForMonths(months, t)"
-					:item-array="months"
-					:update-entity="updateCheckbox"
-				>
-					<ItemSlider
-						bg-scroll-white="true"
-						bg="#ffffff00"
-						item-class="month"
-					>
-						<div class="select-container month">
-							<div class="checkbox all">
-								<CustomTimelineCheckbox
-									:index="0"
-									name="timeSearch.all"
-									:val="allMonthsChecked"
-									:tilted="false"
-									:disabled="searchResultStore.queryLimitReached"
-									:update="updateAllCheckbox"
-									:parent-array="months"
-								></CustomTimelineCheckbox>
-							</div>
-							<div class="month-selector">
-								<div
-									:style="'background-image:url(' + figuresImage + ')'"
-									class="figures"
-								></div>
-								<div class="gradient"></div>
-								<div class="all-months-items">
-									<div
-										v-for="(item, index) in months"
-										:key="index"
-										class="checkbox"
-									>
-										<CustomTimelineCheckbox
-											:index="index"
-											:name="months[index].name"
-											:val="months[index].selected"
-											:tilted="true"
-											:update="updateCheckbox"
-											:disabled="searchResultStore.queryLimitReached"
-											:parent-array="months"
-										></CustomTimelineCheckbox>
-									</div>
-								</div>
-							</div>
-						</div>
-					</ItemSlider>
-				</CustomExpander>
-			</fieldset>
-		</div>
-		<div class="overall-selector">
-			<div class="select-container days">
-				<fieldset>
-					<CustomExpander
-						:headline="t('timeSearch.dayHeadline')"
-						icon="date_range"
-						:subline="getSublineForDays(days, t)"
-						:item-array="days"
-						:update-entity="updateCheckbox"
-					>
-						<ItemSlider
-							bg-scroll-white="true"
-							bg="#ffffff00"
-							item-class="month"
-						>
-							<div class="expand-container-days">
-								<div class="checkbox all">
-									<CustomTimelineCheckbox
-										:index="1"
-										name="timeSearch.all"
-										:val="allDaysChecked"
-										:disabled="searchResultStore.queryLimitReached"
-										:tilted="false"
-										:parent-array="days"
-										:update="updateAllCheckbox"
-									></CustomTimelineCheckbox>
-								</div>
-								<div class="all-days-items">
-									<div class="day-gradient"></div>
-									<div
-										v-for="(item, index) in days"
-										:key="index"
-										class="checkbox"
-									>
-										<CustomTimelineCheckbox
-											:index="index"
-											:name="days[index].name"
-											:val="days[index].selected"
-											:disabled="searchResultStore.queryLimitReached"
-											:tilted="true"
-											:update="updateCheckbox"
-											:parent-array="days"
-										></CustomTimelineCheckbox>
-									</div>
-								</div>
-							</div>
-						</ItemSlider>
-					</CustomExpander>
-				</fieldset>
-			</div>
-			<div class="select-container select-time">
-				<fieldset>
-					<CustomExpander
-						:headline="t('timeSearch.timeslotHeadline')"
-						icon="schedule"
-						:subline="getSublineForTimeslots(timeslots, t)"
-						:item-array="timeslots"
-						:update-entity="updateCheckbox"
-						:filter-name-cutoff="13"
-					>
-						<ItemSlider
-							bg-scroll-white="true"
-							bg="#ffffff00"
-							item-class="month"
-						>
-							<div class="expand-container-time">
-								<div class="checkbox all">
-									<CustomTimelineCheckbox
-										:index="2"
-										name="timeSearch.all"
-										:val="allTimeslotsChecked"
-										:tilted="false"
-										:disabled="searchResultStore.queryLimitReached"
-										:parent-array="timeslots"
-										:update="updateAllCheckbox"
-									></CustomTimelineCheckbox>
-								</div>
-								<div class="all-timeslot-items">
-									<div
-										:style="'background-image:url(' + timelapseImage + ')'"
-										class="timelapse"
-									></div>
-									<div class="time-gradient"></div>
-									<div
-										v-for="(item, index) in timeslots"
-										:key="index"
-										class="checkbox"
-									>
-										<CustomTimelineCheckbox
-											:index="index"
-											:name="timeslots[index].name"
-											:val="timeslots[index].selected"
-											:tilted="true"
-											:disabled="searchResultStore.queryLimitReached"
-											:update="updateCheckbox"
-											:parent-array="timeslots"
-										></CustomTimelineCheckbox>
-									</div>
-								</div>
-							</div>
-						</ItemSlider>
-					</CustomExpander>
-				</fieldset>
-			</div>
-		</div>
-	</div>
 </template>
 
 <script lang="ts">
@@ -252,8 +85,6 @@ import { computed, defineComponent, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VueSlider from 'vue-3-slider-component';
 import CustomTimelineSelect from '@/components/common/CustomTimelineSelect.vue';
-import ItemSlider from '@/components/search/ItemSlider.vue';
-import CustomTimelineCheckbox from '@/components/common/CustomTimelineCheckbox.vue';
 import {
 	days,
 	endDate,
@@ -276,8 +107,6 @@ import {
 import { dataItem, markerData, pointItem, SelectorData } from '@/types/TimeSearchTypes';
 import { createSVGCurvedLine } from '@/utils/svg-graph';
 import { useTimeSearchStore } from '@/store/timeSearchStore';
-import CustomExpander from '@/components/common/CustomExpander.vue';
-import DatePicker from '@/components/common/timeSearch/DatePicker.vue';
 import {
 	getSublineForDays,
 	getSublineForMonths,
@@ -294,11 +123,7 @@ export default defineComponent({
 	name: 'TimeSearchFilters',
 	components: {
 		CustomTimelineSelect,
-		ItemSlider,
-		CustomTimelineCheckbox,
 		VueSlider,
-		CustomExpander,
-		DatePicker,
 		KBButton,
 	},
 
@@ -333,11 +158,13 @@ export default defineComponent({
 		const { t } = useI18n();
 		const timeSearchStore = useTimeSearchStore();
 		const dataContainer = ref<HTMLDivElement>();
+		const highlightStart = ref<HTMLDivElement>();
+		const highlightEnd = ref<HTMLDivElement>();
+
 		const closeDataExplanation = ref<HTMLButtonElement>();
 		const fullYearArray = ref([] as pointItem[]);
 		const data = ref([] as markerData[]);
 		const selectYears = ref([] as string[]);
-		const yearSearch = ref<typeof CustomExpander>();
 		const dataButton = ref<HTMLDivElement>();
 		const expToggled = ref(false);
 		const vueSliderRef = ref<InstanceType<typeof VueSlider> | null>(null);
@@ -372,6 +199,7 @@ export default defineComponent({
 						(newVal: boolean) => {
 							if (newVal && Object.keys(searchResultStore.initFacets).length !== 0) {
 								constructSVG();
+								updateVisualPresentation();
 							} else {
 								/* TODO: Error here! */
 							}
@@ -381,6 +209,14 @@ export default defineComponent({
 			}
 		});
 
+		watch(
+			timeSliderValues,
+			() => {
+				updateVisualPresentation();
+			},
+			{ deep: true },
+		);
+
 		watch(
 			() => vueSliderRef.value,
 			(newVal, oldVal) => {
@@ -460,6 +296,22 @@ export default defineComponent({
 			}
 		};
 
+		const updateVisualPresentation = () => {
+			if (props.timeline) {
+				const startIndex = computed(() => data.value.findIndex((d) => d.key === timeSliderValues.value[0]));
+				const endIndex = computed(() => data.value.findIndex((d) => d.key === timeSliderValues.value[1]));
+				const total = computed(() => data.value.length - 1);
+				const leftPercent = computed(() => (startIndex.value / total.value) * 100);
+				const rightPercent = computed(() => (endIndex.value / total.value) * 100);
+				if (!highlightStart.value || !highlightEnd.value) {
+					return;
+				}
+				highlightStart.value.style.width = `${leftPercent.value}%`;
+				highlightEnd.value.style.left = `${rightPercent.value}%`;
+				highlightEnd.value.style.width = `${100 - rightPercent.value + 1}%`;
+			}
+		};
+
 		const updateStartYear = (val: number) => {
 			timeSliderValues.value[0] = Number(val);
 			startDate.value !== null ? startDate.value.setFullYear(val) : null;
@@ -541,7 +393,6 @@ export default defineComponent({
 			getSublineForMonths,
 			getSublineForDays,
 			getSublineForTimeslots,
-			yearSearch,
 			getSublineForYears,
 			dataButton,
 			toggleExplanation,
@@ -549,6 +400,8 @@ export default defineComponent({
 			closeTimeFacets,
 			addTestDataEnrichment,
 			vueSliderRef,
+			highlightStart,
+			highlightEnd,
 			closeDataExplanation,
 			searchResultStore,
 			allDaysChecked,
@@ -573,6 +426,28 @@ export default defineComponent({
 	text-transform: capitalize;
 }
 
+.data-highlight {
+	height: 100%;
+	position: absolute;
+	top: 0;
+	height: 100%;
+	pointer-events: none;
+	transition:
+		left 0.25s,
+		opacity 0.25s,
+		width 0.25s;
+	opacity: 0.85;
+	background-color: #fafafa;
+}
+
+.start-block {
+	left: 0;
+}
+
+.end-block {
+	right: 0; /* initial */
+}
+
 .expand-container-days {
 	max-width: 735px;
 }
@@ -692,7 +567,7 @@ fieldset {
 
 .slider-whiteoff-container {
 	position: relative;
-	display: none;
+	margin-bottom: 20px;
 }
 .explanation-for-data {
 	position: absolute;
@@ -703,9 +578,9 @@ fieldset {
 	z-index: 10;
 	border: 1px solid #002e70;
 	color: #002e70;
-	padding: 35px 0px 35px 30px;
+	padding: 46px 0px 64px 30px;
 	box-sizing: border-box;
-	display: flex;
+	display: none;
 	color: white;
 }
 .explanation-for-data:hover button {
@@ -812,6 +687,7 @@ fieldset {
 	margin-bottom: 0px;
 	position: relative;
 	width: 100%;
+	margin-bottom: 60px;
 }
 
 @media (min-width: 450px) {
@@ -1066,15 +942,17 @@ fieldset {
 
 .data-container {
 	width: calc(100%);
-	height: 60px;
 	overflow: hidden;
 	user-select: none;
 	pointer-events: none;
 	position: absolute;
 	z-index: 4;
 	margin-top: 2px;
-	border-bottom: 1px solid #002e70;
+	border-radius: 4px;
 	box-sizing: border-box;
+	top: 0px;
+	height: 0px;
+	visibility: hidden;
 }
 /* MEDIA QUERY 990 */
 @media (min-width: 1200px) {
@@ -1094,18 +972,18 @@ fieldset {
 	.slider-whiteoff-container {
 		display: block;
 	}
-	.data-size {
-		display: block;
-	}
-
 	.display-data-button {
 		display: block;
 	}
 	.slider-container {
-		height: 96px;
 		padding-bottom: 40px;
-		margin-bottom: 80px;
-		margin-top: 15px;
+	}
+	.data-container {
+		height: 200px;
+		visibility: visible;
+	}
+	.slider-container {
+		height: 200px;
 	}
 }
 
@@ -1113,5 +991,12 @@ fieldset {
 	.to-from-container {
 		justify-content: flex-start;
 	}
+	.data-size {
+		display: block;
+	}
+
+	.explanation-for-data {
+		display: flex;
+	}
 }
 </style>
diff --git a/src/components/common/timeSearch/TimeSearchInitValues.ts b/src/components/common/timeSearch/TimeSearchInitValues.ts
index 801b7405..59de99ac 100644
--- a/src/components/common/timeSearch/TimeSearchInitValues.ts
+++ b/src/components/common/timeSearch/TimeSearchInitValues.ts
@@ -6,8 +6,8 @@ const initStartDate = ref<Date>(new Date(2015, 0, 1, 0, 0, 0)); // January 1, 20
 const initEndDate = ref<Date>(new Date(2015, 11, 31, 23, 59, 59)); // December 31, 2015, 23:59:59
 
 const timeSliderValues = ref<number[]>(initSliderValues.value);
-const startDate = ref<Date | null>(initStartDate.value); // January 1, 2015, 00:00:00
-const endDate = ref<Date | null>(initEndDate.value); // December 31, 2015, 23:59:59
+const startDate = ref<Date>(initStartDate.value); // January 1, 2015, 00:00:00
+const endDate = ref<Date>(initEndDate.value); // December 31, 2015, 23:59:59
 
 /* these are just the preset values. Should be updated when we got the new index in solr */
 const startYear = ref<Date>(new Date(2006, 0, 1, 0, 0, 0));
diff --git a/src/components/global/notification/Notifier.vue b/src/components/global/notification/Notifier.vue
index 6b037e2a..dfc301aa 100644
--- a/src/components/global/notification/Notifier.vue
+++ b/src/components/global/notification/Notifier.vue
@@ -128,6 +128,12 @@ export default defineComponent({
 ul {
 	padding: 0px;
 }
+
+.user-notifications ul:empty,
+.passive-notifications ul:empty {
+	display: none;
+}
+
 .user-notifications {
 	position: fixed;
 	z-index: 50;
diff --git a/src/components/records/NotAllowedRecord.vue b/src/components/records/NotAllowedRecord.vue
index cec658df..be5ef210 100644
--- a/src/components/records/NotAllowedRecord.vue
+++ b/src/components/records/NotAllowedRecord.vue
@@ -43,7 +43,7 @@ import { copyTextToClipboard } from '@/utils/copy-script';
 import { getBroadcastDate, getBroadcastTime, getTimeFromISOFormat } from '@/utils/time-utils';
 import { useI18n } from 'vue-i18n';
 import { addTestDataEnrichment } from '@/utils/test-enrichments';
-import ContactUs from '../search/ContactUs.vue';
+import ContactUs from '@/components/search/ContactUs.vue';
 
 export default defineComponent({
 	name: 'NotAllowedRecord',
diff --git a/src/components/records/UnavailableRecord.vue b/src/components/records/UnavailableRecord.vue
index 4022b0ae..c2bd6234 100644
--- a/src/components/records/UnavailableRecord.vue
+++ b/src/components/records/UnavailableRecord.vue
@@ -50,7 +50,7 @@ import { useI18n } from 'vue-i18n';
 import { addTestDataEnrichment } from '@/utils/test-enrichments';
 import MainCategories from '@/components/common/MainCategories.vue';
 import EdgedContentArea from '@/components/global/content-elements/EdgedContentArea.vue';
-import ContactUs from '../search/ContactUs.vue';
+import ContactUs from '@/components/search/ContactUs.vue';
 
 export default defineComponent({
 	name: 'GenericRecord',
diff --git a/src/components/search/CurrentFilters.vue b/src/components/search/CurrentFilters.vue
index 9bfb2f73..ec64dd6c 100644
--- a/src/components/search/CurrentFilters.vue
+++ b/src/components/search/CurrentFilters.vue
@@ -8,132 +8,92 @@
 				<span
 					v-if="filtersActive"
 					key="1"
-					class="label-small"
+					class="label-regular"
 				>
 					{{ $t('search.selected') }}:
 				</span>
 				<div
-					v-if="searchResultStore.channelFilters.length !== 0"
 					key="2"
+					class="filter-group"
 				>
-					<KBButton
-						class="label-small"
-						:button-text="`${searchResultStore.channelFilters.length} ${t(
-							'facets.channels',
-							searchResultStore.channelFilters.length,
-						)}`"
-						button-type="btn-tag"
-						button-color="main"
-						button-size="small"
-						right-icon-name="close"
-						@click="removeFilterAndSearch('creator_affiliation_facet')"
-					></KBButton>
-				</div>
-				<div
-					v-if="searchResultStore.categoryFilters.length !== 0"
-					key="3"
-				>
-					<KBButton
-						class="label-small"
-						:button-text="`${searchResultStore.categoryFilters.length} ${t(
-							'facets.genres',
-							searchResultStore.categoryFilters.length,
-						)}`"
-						button-type="btn-tag"
-						button-color="main"
-						button-size="small"
-						right-icon-name="close"
-						@click="removeFilterAndSearch('genre')"
-					></KBButton>
-				</div>
-				<div v-if="months.filter((entity) => entity.selected === true).length > 0">
-					<KBButton
-						class="label-small"
-						:button-text="`${months.filter((entity) => entity.selected === true).length} ${t(
-							'timeSearch.month',
-							months.filter((entity) => entity.selected === true).length,
-						)}`"
-						button-type="btn-tag"
-						button-color="main"
-						button-size="small"
-						right-icon-name="close"
-						@click="resetTimeValueAndSearch(months, 'temporal_start_month')"
-					></KBButton>
-				</div>
-				<div v-if="days.filter((entity) => entity.selected === true).length > 0">
-					<KBButton
-						class="label-small"
-						:button-text="`${days.filter((entity) => entity.selected === true).length} ${t(
-							'timeSearch.weekday',
-							days.filter((entity) => entity.selected === true).length,
-						)}`"
-						button-type="btn-tag"
-						button-color="main"
-						button-size="small"
-						right-icon-name="close"
-						@click="resetTimeValueAndSearch(days, 'temporal_start_day_da')"
-					></KBButton>
-				</div>
-				<div v-if="timeslots.filter((entity) => entity.selected === true).length > 0">
-					<KBButton
-						class="label-small"
-						:button-text="`${timeslots.filter((entity) => entity.selected === true).length} ${t(
-							'timeSearch.timePeriods',
-							timeslots.filter((entity) => entity.selected === true).length,
-						)}`"
-						button-type="btn-tag"
-						button-color="main"
-						button-size="small"
-						right-icon-name="close"
-						@click="resetTimeValueAndSearch(timeslots, 'temporal_start_hour_da')"
-					></KBButton>
-				</div>
-				<div
-					v-if="
-						(startDate !== null &&
-							(startDate as unknown as string) !== '' &&
-							startDate.getTime() !== startYear.getTime()) ||
-						(endDate !== null && (endDate as unknown as string) !== '' && endDate.getTime() !== endYear.getTime())
-					"
-				>
-					<KBButton
-						class="label-small"
-						:button-text="`${presentDateSpan()} ${approxTimeDifference()}`"
-						button-type="btn-tag"
-						button-color="main"
-						button-size="small"
-						right-icon-name="close"
-						@click="resetYearsAndSearch('startTime')"
-					></KBButton>
-				</div>
-				<div
-					v-if="searchResultStore.preliminaryFilter !== ''"
-					key="5"
-				>
-					<KBButton
-						class="label-small"
-						:button-text="`${preliminaryFilterText}`"
-						button-type="btn-tag"
-						button-color="main"
-						button-size="small"
-						right-icon-name="close"
-						@click="removePreliminaryFilterAndSearch()"
-					></KBButton>
-				</div>
+					<div v-if="searchResultStore.channelFilters.length !== 0">
+						<KBButton
+							v-for="(channel, index) in searchResultStore.channelFilters"
+							:key="index"
+							class="label-regular"
+							:button-text="`${extractFilterText(channel)}`"
+							button-type="btn-tag"
+							button-color="main"
+							button-size="small"
+							right-icon-name="close"
+							@click="removeSingleFilterAndSearch(channel)"
+						></KBButton>
+						|
+					</div>
 
-				<span
-					v-if="filtersActive"
-					key="6"
-					class="seperator"
-				>
-					|
-				</span>
+					<div v-if="searchResultStore.categoryFilters.length !== 0">
+						<KBButton
+							v-for="(category, index) in searchResultStore.categoryFilters"
+							:key="index"
+							class="label-regular"
+							:button-text="`${extractFilterText(category)}`"
+							button-type="btn-tag"
+							button-color="main"
+							button-size="small"
+							right-icon-name="close"
+							@click="removeSingleFilterAndSearch(category)"
+						></KBButton>
+						|
+					</div>
+					<div
+						v-if="
+							(startDate !== null &&
+								(startDate as unknown as string) !== '' &&
+								startDate.getTime() !== startYear.getTime()) ||
+							(endDate !== null && (endDate as unknown as string) !== '' && endDate.getTime() !== endYear.getTime())
+						"
+					>
+						<KBButton
+							class="label-regular"
+							:button-text="`${presentDateSpan()} ${approxTimeDifference()}`"
+							button-type="btn-tag"
+							button-color="main"
+							button-size="small"
+							right-icon-name="close"
+							@click="resetYearsAndSearch('startTime')"
+						></KBButton>
+						|
+					</div>
+					<div v-if="searchResultStore.preliminarySearchMethod !== 'all'">
+						<KBButton
+							class="label-regular"
+							:button-text="`${t('facets.searchingIn')} ${t(`facets.${searchResultStore.preliminarySearchMethod}`)}`"
+							button-type="btn-tag"
+							button-color="main"
+							button-size="small"
+							right-icon-name="close"
+							@click="removePreliminarySearchFilterAndSearch()"
+						></KBButton>
+					</div>
+					<div v-if="searchResultStore.preliminaryFilter !== ''">
+						<KBButton
+							class="label-regular"
+							:button-text="`${t('facets.searchingIn')} ${preliminaryFilterText}`"
+							button-type="btn-tag"
+							button-color="main"
+							button-size="small"
+							right-icon-name="close"
+							@click="removePreliminaryFilterAndSearch()"
+						></KBButton>
+						|
+					</div>
+				</div>
 				<div
 					v-if="filtersActive"
-					key="7"
+					key="8"
 				>
 					<KBButton
-						class="label-small"
+						class="label-regular"
 						:button-text="`${t('facets.reset')}`"
 						button-type="btn-tag"
 						button-color="reset"
@@ -160,12 +120,11 @@ import {
 import { useSearchResultStore } from '@/store/searchResultStore';
 import { useTimeSearchStore } from '@/store/timeSearchStore';
 import { resetAllSelectorValues } from '@/utils/time-search-utils';
-import { SelectorData } from '@/types/TimeSearchTypes';
 import { cloneRouteQuery, normalizeFq } from '@/utils/filter-utils';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import KBButton from '@/components/common/KBButton.vue';
-
+import { removeChannelOrCategoryFilter } from '@/utils/filter-utils';
 export default defineComponent({
 	name: 'CurrentFilters',
 	components: { KBButton },
@@ -184,16 +143,12 @@ export default defineComponent({
 				(endDate.value as unknown as string) !== ''
 			) {
 				if (
-					(days.value.filter((entity: SelectorData) => entity.selected === true).length > 0 ||
-						months.value.filter((entity: SelectorData) => entity.selected === true).length > 0 ||
-						timeslots.value.filter((entity: SelectorData) => entity.selected === true).length > 0 ||
-						searchResultStore.categoryFilters.length !== 0 ||
-						searchResultStore.channelFilters.length !== 0 ||
-						startDate.value.getTime() !== startYear.value.getTime() ||
-						endDate.value.getTime() !== endYear.value.getTime() ||
-						searchResultStore.preliminaryFilter !== '') &&
-					route.query.fq !== undefined &&
-					route.query.fq?.length !== 0
+					searchResultStore.categoryFilters.length !== 0 ||
+					searchResultStore.channelFilters.length !== 0 ||
+					startDate.value.getTime() !== startYear.value.getTime() ||
+					endDate.value.getTime() !== endYear.value.getTime() ||
+					searchResultStore.preliminarySearchMethod !== 'all' ||
+					searchResultStore.preliminaryFilter !== ''
 				) {
 					return true;
 				} else {
@@ -204,11 +159,6 @@ export default defineComponent({
 			}
 		});
 
-		const resetTimeValueAndSearch = (resetArray: SelectorData[], facet: string) => {
-			resetAllSelectorValues(resetArray);
-			removeFilterAndSearch(facet);
-		};
-
 		const resetYearsAndSearch = (facet: string) => {
 			if (startDate.value !== null && endDate.value !== null) {
 				startDate.value.setTime(startYear.value.getTime());
@@ -217,6 +167,20 @@ export default defineComponent({
 			}
 		};
 
+		const removePreliminarySearchFilterAndSearch = () => {
+			searchResultStore.preliminarySearchMethod = 'all';
+			const routeQueries = cloneRouteQuery(route);
+			if (routeQueries.q.includes('title:')) {
+				routeQueries.q = routeQueries.q.replace(/title:"([^"]*)"/g, (_match: string, content: string) => content);
+			} else if (routeQueries.q.includes('description:')) {
+				routeQueries.q = routeQueries.q.replace(/description:"([^"]*)"/g, (_match: string, content: string) => content);
+			}
+			router.push({
+				name: 'Search',
+				query: routeQueries,
+			});
+		};
+
 		const removePreliminaryFilterAndSearch = () => {
 			searchResultStore.preliminaryFilter = '';
 			const routeQueries = cloneRouteQuery(route);
@@ -240,9 +204,17 @@ export default defineComponent({
 			});
 		};
 
+		const removeSingleFilterAndSearch = (facet: string) => {
+			const routeQueries = removeChannelOrCategoryFilter(route, decodeURIComponent(facet), true, facet);
+			routeQueries.start = 0;
+			router.push({
+				name: 'Search',
+				query: routeQueries,
+			});
+		};
+
 		const resetAllFilters = () => {
 			const routeQueries = cloneRouteQuery(route);
-			searchResultStore.resetFilters();
 			resetAllSelectorValues(days.value);
 			resetAllSelectorValues(timeslots.value);
 			resetAllSelectorValues(months.value);
@@ -259,6 +231,17 @@ export default defineComponent({
 
 			if (routeQueries.q === '*:*') {
 				delete routeQueries.q;
+			} else {
+				if (
+					searchResultStore.currentQuery.includes('title:') ||
+					searchResultStore.currentQuery.includes('description:')
+				) {
+					routeQueries.q = routeQueries.q.replace(/title:"([^"]*)"/g, (_match: string, content: string) => content);
+					routeQueries.q = routeQueries.q.replace(
+						/description:"([^"]*)"/g,
+						(_match: string, content: string) => content,
+					);
+				}
 			}
 
 			delete routeQueries.start;
@@ -310,24 +293,16 @@ export default defineComponent({
 			}
 		};
 
-		const calculatedYearSpan = () => {
-			if (
-				startDate.value !== null &&
-				endDate.value !== null &&
-				(startDate.value as unknown as string) !== '' &&
-				(endDate.value as unknown as string) !== ''
-			) {
-				return `(${endDate.value.getFullYear() - startDate.value.getFullYear() + 1}~ ${t(
-					'timeSearch.year',
-					endDate.value.getFullYear() - startDate.value.getFullYear() + 1,
-				)})`;
-			} else {
-				return '';
-			}
-		};
 		const preliminaryFilterText = computed(() => {
-			return decodeURIComponent(searchResultStore.preliminaryFilter).split(':')[1].replaceAll('"', '').split('.')[1];
+			return searchResultStore.preliminaryFilter !== ''
+				? decodeURIComponent(searchResultStore.preliminaryFilter).split(':')[1].replaceAll('"', '').split('.')[1]
+				: '';
 		});
+
+		const extractFilterText = (filter: string) => {
+			const splitText = decodeURIComponent(filter).split('"')[1];
+			return splitText.substring(0, splitText.length);
+		};
 		return {
 			searchResultStore,
 			timeSearchStore,
@@ -335,11 +310,11 @@ export default defineComponent({
 			days,
 			months,
 			timeslots,
-			resetTimeValueAndSearch,
 			resetAllFilters,
 			removeFilterAndSearch,
 			resetYearsAndSearch,
 			removePreliminaryFilterAndSearch,
+			removePreliminarySearchFilterAndSearch,
 			startDate,
 			endDate,
 			startYear,
@@ -347,8 +322,11 @@ export default defineComponent({
 			approxTimeDifference,
 			t,
 			presentDateSpan,
-			calculatedYearSpan,
 			preliminaryFilterText,
+			router,
+			route,
+			extractFilterText,
+			removeSingleFilterAndSearch,
 		};
 	},
 });
@@ -361,4 +339,13 @@ export default defineComponent({
 	gap: 5px;
 	flex-wrap: wrap;
 }
+.filter-group {
+	display: contents;
+}
+.filter-group > div {
+	display: contents;
+}
+.filter-group > :not(:first-child) {
+	margin-left: 5px;
+}
 </style>
diff --git a/src/components/search/Facets.vue b/src/components/search/Facets.vue
index 54aecab4..f907fbdb 100644
--- a/src/components/search/Facets.vue
+++ b/src/components/search/Facets.vue
@@ -1,169 +1,255 @@
 <template>
 	<div
+		v-if="Object.keys(searchResultStore.initFacets || {}).length > 0"
 		ref="facetsContainer"
 		class="search-facets"
 	>
-		<div class="search-facets-flex">
-			<EdgedContentArea
-				:lines="true"
-				:line-padding="false"
-				background-color="#FAFAFA"
-			>
-				<template #content>
-					<div class="time-facets-toggle">
-						<div class="container">
-							<button
-								ref="timeFacetButton"
-								role="switch"
-								aria-checked="false"
-								:class="timeSearchStore.timeFacetsOpen ? 'time-facet-button open' : 'time-facet-button closed'"
-								@click="timeSearchStore.setTimeFacetsOpen(!timeSearchStore.timeFacetsOpen)"
+		<div class="facet-container">
+			<div class="headline-section">
+				<div class="filter-header">
+					<div class="material-icons filters">tune</div>
+					<button
+						class="closeBtn material-icons"
+						@click="searchResultStore.toggleShowFacets(!searchResultStore.showFacets)"
+					>
+						close
+					</button>
+				</div>
+				<h1 class="filter-headline">
+					<span v-if="searchResultStore.currentQuery !== '*:*' && searchResultStore.currentQuery !== ''">
+						{{ t('facets.headline') }}
+						<span class="bold">{{ searchResultStore.currentQuery }}</span>
+					</span>
+					<span v-else>{{ t('facets.starHeadline') }}</span>
+				</h1>
+			</div>
+			<div class="category-container">
+				<CustomRadioGroup
+					v-model="searchResultStore.preliminarySearchMethod"
+					name="SelectedSearchMethod"
+					:options="selectedSearchMethodOptions"
+					:disable="
+						searchResultStore.currentQuery === '' ||
+						searchResultStore.currentQuery === '*:*' ||
+						searchResultStore.currentQuery === '*'
+					"
+					@change="setSearchMethodAndExecute(searchResultStore.preliminarySearchMethod)"
+				/>
+				<CustomRadioGroup
+					v-model="searchResultStore.preliminaryFilter"
+					name="SelectedSearchMaterials"
+					:options="selectedSearchMaterialOptions"
+					:disable="searchResultStore.numFound === 0"
+					@change="setDelimitationFilterAndExecute(searchResultStore.preliminaryFilter)"
+				/>
+				<FilterExpander
+					type="checkbox"
+					:headline="$t('facets.genres', 2)"
+					icon="category"
+					:subline="`${getSublineForFacets(genreArray, 'facets.selectedGenres')}`"
+					:item-array="genreArray"
+					:update-entity="updateFacet"
+					:filter-name-cutoff="5"
+					:facet-type="'genre_facet'"
+				>
+					<fieldset
+						v-if="searchResultStore.firstBackendFetchExecuted"
+						class="genre-facets"
+					>
+						<TransitionGroup name="result">
+							<div
+								v-for="(singleFacet, index) in simplifyFacets(searchResultStore.initFacets.facet_fields.genre_facet)"
+								:key="index + 'genre_facet'"
+								class="genre"
 							>
-								<span class="material-icons first">today</span>
-								<span class="toggle-time-text btn-medium">{{ t('timeSearch.filterOpenButton') }}</span>
-								<span :class="timeSearchStore.timeFacetsOpen ? 'dark-bar open' : 'dark-bar closed'">
-									<span class="dot">
-										<TransitionGroup>
-											<div
-												v-if="timeSearchStore.timeFacetsOpen"
-												class="close"
-											></div>
-											<div
-												v-else
-												class="check"
-											></div>
-										</TransitionGroup>
-									</span>
-								</span>
-							</button>
-						</div>
-					</div>
-					<div
-						ref="timeFacets"
-						class="time-facets"
+								<SimpleCheckbox
+									:key="`genreCheckbox-${index}`"
+									:fqkey="'genre_facet'"
+									:title="singleFacet.title"
+									:svg="singleFacet.title"
+									:amount="categoryFacets.find((item) => item.title === singleFacet.title)?.number.toString() || '0'"
+									:time-search-active="timeSearchStore.timeFacetsOpen"
+									:number="index"
+									:checked="channelFilterExists('genre_facet', singleFacet.title, searchResultStore.categoryFilters)"
+									:loading="searchResultStore.loadingGenres"
+									:update="updateCheckbox"
+									:parent-array="genreArray"
+									:disabled="searchResultStore.queryLimitReached"
+									:filter-array="searchResultStore.categoryFilters"
+								/>
+							</div>
+						</TransitionGroup>
+					</fieldset>
+				</FilterExpander>
+
+				<FilterExpander
+					type="checkbox"
+					:headline="$t('facets.tvChannels', 2)"
+					icon="play_circle_filled"
+					:subline="`${getSublineForFacets(getTVFacets(channelsArray), 'facets.selectedTVChannels')}`"
+					:fade="false"
+					:item-array="getTVFacets(channelsArray)"
+					:update-entity="updateFacet"
+					:filter-name-cutoff="5"
+					:facet-type="'creator_affiliation_facet'"
+				>
+					<fieldset
+						v-if="searchResultStore.firstBackendFetchExecuted"
+						class="facet-options"
 					>
-						<div class="container">
-							<TimeSearchFilters
-								:timeline="false"
-								:picker="true"
-								:init="false"
-								:disabled="searchResultStore.queryLimitReached"
-								@new-search="newSearch(true)"
-								@close="timeSearchStore.setTimeFacetsOpen(!timeSearchStore.timeFacetsOpen)"
-							></TimeSearchFilters>
-						</div>
-					</div>
-					<div class="facet-container">
-						<div class="flex-container">
-							<div class="category-container">
-								<CustomExpander
-									:headline="$t('facets.choose') + ' ' + $t('facets.genres', 2)"
-									icon="category"
-									:subline="`${getSublineForFacets(genreArray, 'facets.genres', 'facets.allGenres')}`"
-									:item-array="genreArray"
-									:use-headline-translation="true"
-									:update-entity="updateFacet"
-									:filter-name-cutoff="5"
-									:facet-type="'genre_facet'"
-								>
-									<fieldset
-										v-if="searchResultStore.firstBackendFetchExecuted"
-										class="genre-facets"
-									>
-										<TransitionGroup name="result">
-											<div
-												v-for="(singleFacet, index) in simplifyFacets(
-													searchResultStore.initFacets.facet_fields.genre_facet,
-												)"
-												:key="index + 'genre_facet'"
-												class="genre"
-											>
-												<GenreCheckbox
-													:fqkey="'genre_facet'"
-													:title="singleFacet.title"
-													:amount="
-														categoryFacets.find((item) => item.title === singleFacet.title)?.number.toString() || '0'
-													"
-													:time-search-active="timeSearchStore.timeFacetsOpen"
-													:number="index"
-													:checked="
-														channelFilterExists('genre_facet', singleFacet.title, searchResultStore.categoryFilters)
-													"
-													:loading="searchResultStore.loadingGenres"
-													:update="updateCheckbox"
-													:parent-array="genreArray"
-													:disabled="searchResultStore.queryLimitReached"
-												/>
-											</div>
-										</TransitionGroup>
-									</fieldset>
-								</CustomExpander>
+						<TransitionGroup name="result">
+							<div
+								v-for="(singleFacet, index) in getTVFacets(channelsArray)"
+								:key="`${index}-tv-facet`"
+							>
+								<SimpleCheckbox
+									:key="`channel-tv-checkbox-${index}`"
+									:fqkey="'creator_affiliation_facet'"
+									:title="singleFacet.name"
+									:channel="singleFacet.name"
+									:amount="channelFacets.find((item) => item.title === singleFacet.name)?.number.toString() || '0'"
+									:number="index"
+									:parent-array="getTVFacets(channelsArray)"
+									:update="updateCheckbox"
+									:checked="
+										channelFilterExists('creator_affiliation_facet', singleFacet.name, searchResultStore.channelFilters)
+									"
+									:loading="searchResultStore.loadingChannels"
+									:disabled="searchResultStore.queryLimitReached"
+									:filter-array="searchResultStore.channelFilters"
+								/>
 							</div>
-							<CustomExpander
-								:headline="$t('facets.choose') + ' ' + $t('facets.channels', 2)"
-								icon="toc"
-								:subline="`${getSublineForFacets(channelsArray, 'facets.channels', 'facets.allChannels')}`"
-								:fade="true"
-								:item-array="channelsArray"
-								:update-entity="updateFacet"
-								:filter-name-cutoff="5"
-								:use-headline-translation="false"
-								:facet-type="'creator_affiliation_facet'"
+						</TransitionGroup>
+					</fieldset>
+				</FilterExpander>
+				<FilterExpander
+					type="checkbox"
+					:headline="$t('facets.radioChannels', 2)"
+					icon="volume_up"
+					:subline="`${getSublineForFacets(getRadioFacets(channelsArray), 'facets.selectedRadioChannels')}`"
+					:fade="false"
+					:item-array="getRadioFacets(channelsArray)"
+					:update-entity="updateFacet"
+					:filter-name-cutoff="5"
+					:facet-type="'creator_affiliation_facet'"
+				>
+					<fieldset
+						v-if="searchResultStore.firstBackendFetchExecuted"
+						class="facet-options"
+					>
+						<TransitionGroup name="result">
+							<div
+								v-for="(singleFacet, index) in getRadioFacets(channelsArray)"
+								:key="`${index}-radio-facet`"
 							>
-								<fieldset
-									v-if="searchResultStore.firstBackendFetchExecuted"
-									class="facet-options"
-								>
-									<TransitionGroup name="result">
-										<div
-											v-for="(singleFacet, index) in channelsArray"
-											:key="`${index}-facet`"
-											:class="{
-												'checkbox end': index >= (channelsArray.length / 4) * 3,
-												'checkbox semi-end':
-													index >= channelsArray.length / 2 && index < (channelsArray.length / 4) * 3,
-												checkbox: index < channelsArray.length / 2,
-											}"
-										>
-											<SimpleCheckbox
-												:key="`channelCheckbox-${index}`"
-												:fqkey="'creator_affiliation_facet'"
-												:title="singleFacet.name"
-												:amount="
-													channelFacets.find((item) => item.title === singleFacet.name)?.number.toString() || '0'
-												"
-												:number="index"
-												:parent-array="channelsArray"
-												:update="updateCheckbox"
-												:checked="
-													channelFilterExists(
-														'creator_affiliation_facet',
-														singleFacet.name,
-														searchResultStore.channelFilters,
-													)
-												"
-												:loading="searchResultStore.loadingChannels"
-												:disabled="searchResultStore.queryLimitReached"
-											/>
-										</div>
-									</TransitionGroup>
-								</fieldset>
-							</CustomExpander>
+								<SimpleCheckbox
+									:key="`channel-radio-checkbox-${index}`"
+									:fqkey="'creator_affiliation_facet'"
+									:title="singleFacet.name"
+									:channel="singleFacet.name"
+									:amount="channelFacets.find((item) => item.title === singleFacet.name)?.number.toString() || '0'"
+									:number="index"
+									:parent-array="getRadioFacets(channelsArray)"
+									:update="updateCheckbox"
+									:checked="
+										channelFilterExists('creator_affiliation_facet', singleFacet.name, searchResultStore.channelFilters)
+									"
+									:loading="searchResultStore.loadingChannels"
+									:disabled="searchResultStore.queryLimitReached"
+									:filter-array="searchResultStore.channelFilters"
+								/>
+							</div>
+						</TransitionGroup>
+					</fieldset>
+				</FilterExpander>
+				<FilterExpander
+					type="time"
+					:headline="`${t('facets.timePeriod.date.title')} / ${t('facets.timePeriod.period.title')}`"
+					icon="calendar_today"
+					:subline="createTimeFacetSubline"
+					:update-entity="updateTimeSearch"
+					:item-array="yearArray"
+				>
+					<CustomRadioGroup
+						v-model="searchResultStore.preliminaryPeriodSearch"
+						name="preliminaryPeriodSearch"
+						:options="preliminaryPeriodSearchOptions"
+					/>
+					<TransitionGroup name="result">
+						<div
+							v-if="searchResultStore.preliminaryPeriodSearch === 'period'"
+							class="to-from-container"
+						>
+							<CustomTimelineSelect
+								:current-selected="timeSliderValues[0]"
+								:list-items="getYearRanges"
+								:label="$t('timeSearch.from')"
+								@update-selected="updateStartYear"
+							/>
+							<CustomTimelineSelect
+								:current-selected="timeSliderValues[1]"
+								:list-items="getYearRanges"
+								:label="$t('timeSearch.to')"
+								@update-selected="updateEndYear"
+							/>
 						</div>
+						<fieldset
+							v-if="searchResultStore.preliminaryPeriodSearch === 'period'"
+							class="facet-options time-search-filter-container"
+						>
+							<VueSlider
+								v-if="data.length > 0"
+								ref="vueSliderRef"
+								v-model="timeSliderValues"
+								:clickable="true"
+								:drag-on-click="true"
+								:data="data"
+								data-label="key"
+								tooltip="always"
+								@drag-end="updateTimeSearch"
+							></VueSlider>
+						</fieldset>
+					</TransitionGroup>
+					<div
+						v-if="searchResultStore.preliminaryPeriodSearch === 'date'"
+						class="date-picker-container"
+					>
+						<TimePicker
+							v-model="selectedDate"
+							name="filterTimePicker"
+							:start-date="startYear"
+							:end-date="endYear"
+						/>
 					</div>
-				</template>
-			</EdgedContentArea>
+				</FilterExpander>
+			</div>
+			<div class="show-results-container">
+				<KBButton
+					button-type="btn-main-default"
+					button-color="main"
+					button-size="medium"
+					class="btn-medium btn-main-medium"
+					:button-text="`${t('facets.seeResults', {
+						count: Number(searchResultStore.numFound),
+						resultCount: new Intl.NumberFormat('de-DE').format(searchResultStore.numFound),
+					})}`"
+					right-icon-name="arrow_forward_ios"
+					:custom-style="{ alignSelf: 'flex-end', marginRight: '12px' }"
+					:data-testid="addTestDataEnrichment('button', 'filters-see-results', 'filters-show-results-button', 0)"
+					@click="searchResultStore.showFacets = false"
+				></KBButton>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref, watch } from 'vue';
+import '@/assets/styles/vue-slider-styles.css';
+import { defineComponent, onMounted, ref, watch, computed, ComputedRef, onUnmounted } from 'vue';
 import { useSearchResultStore } from '@/store/searchResultStore';
 import { useTimeSearchStore } from '@/store/timeSearchStore';
 import { FacetResultType } from '@/types/GenericSearchResultTypes';
 import { useRoute, useRouter } from 'vue-router';
-import TimeSearchFilters from '@/components/common/timeSearch/TimeSearchFilters.vue';
 import SimpleCheckbox from '@/components/common/SimpleCheckbox.vue';
 import {
 	addChannelOrCategoryFilter,
@@ -173,36 +259,39 @@ import {
 	extendFacetPairToSelectorData,
 	normalizeFq,
 	removeChannelOrCategoryFilter,
-	removeTimeFacetsFromRoute,
 	simplifyFacets,
 } from '@/utils/filter-utils';
-import { SelectorData } from '@/types/TimeSearchTypes';
+import { markerData, SelectorData } from '@/types/TimeSearchTypes';
 import { FacetPair } from '@/types/GenericRecordTypes';
 import { useI18n } from 'vue-i18n';
+import TimePicker from '@/components/common/TimePicker.vue';
 import gsap from 'gsap';
 import {
-	days,
-	endDate,
 	endYear,
-	months,
-	startDate,
 	startYear,
-	timeslots,
+	timeSliderValues,
+	startDate,
+	endDate,
 } from '@/components/common/timeSearch/TimeSearchInitValues';
-import EdgedContentArea from '@/components/global/content-elements/EdgedContentArea.vue';
-import CustomExpander from '@/components/common/CustomExpander.vue';
-import GenreCheckbox from '@/components/search/GenreCheckbox.vue';
-import { resetAllSelectorValues } from '@/utils/time-search-utils';
+import FilterExpander from '@/components/common/FilterExpander.vue';
 import { santizeAndSimplify } from '@/utils/test-enrichments';
+import CustomRadioGroup from '@/components/common/CustomRadioGroup.vue';
+import { addTestDataEnrichment } from '@/utils/test-enrichments';
+import KBButton from '@/components/common/KBButton.vue';
+import VueSlider from 'vue-3-slider-component';
+import { createFocusTrap } from '@/utils/focus-trap';
+import CustomTimelineSelect from '@/components/common/CustomTimelineSelect.vue';
 
 export default defineComponent({
 	name: 'Facets',
 	components: {
 		SimpleCheckbox,
-		TimeSearchFilters,
-		EdgedContentArea,
-		CustomExpander,
-		GenreCheckbox,
+		FilterExpander,
+		CustomRadioGroup,
+		KBButton,
+		VueSlider,
+		CustomTimelineSelect,
+		TimePicker,
 	},
 
 	setup() {
@@ -215,13 +304,118 @@ export default defineComponent({
 		const timeFacets = ref<HTMLElement | null>(null);
 		const timeFacetButton = ref<HTMLButtonElement | null>(null);
 		const lastUpdate = ref(0);
-		const { t } = useI18n();
+		const selectedDate = ref<Date | undefined>();
+		const { t, locale } = useI18n();
 		const router = useRouter();
 		const route = useRoute();
+		const data = ref([] as markerData[]);
+		const vueSliderRef = ref<InstanceType<typeof VueSlider> | null>(null);
+		const windowWidth = ref(window.innerWidth);
+
+		const delimitationOptions = {
+			all: '',
+			tv: 'origin:"ds.tv"',
+			radio: 'origin:"ds.radio"',
+		};
+
+		let focusTrap: ReturnType<typeof createFocusTrap> | null = null;
 
 		const channelsArray = ref([] as SelectorData[]);
 		const genreArray = ref([] as SelectorData[]);
 		const translatedGenreArray = ref([] as SelectorData[]);
+		const yearArray = ref([] as SelectorData[]);
+
+		const selectedSearchMethodOptions = computed(() => [
+			{ value: 'all', title: t('facets.searchMethod.all.title'), description: t('facets.searchMethod.all.desc') },
+			{
+				value: 'title',
+				title: t('facets.searchMethod.title.title'),
+				description: t('facets.searchMethod.title.desc'),
+			},
+			{
+				value: 'desc',
+				title: t('facets.searchMethod.desc.title'),
+				description: t('facets.searchMethod.desc.desc'),
+			},
+		]);
+
+		const selectedSearchMaterialOptions = computed(() => [
+			{
+				value: '',
+				title: t('facets.searchMaterial.both.title'),
+				description: t('facets.searchMaterial.both.desc'),
+			},
+			{
+				value: 'origin:"ds.tv"',
+				title: t('facets.searchMaterial.tv.title'),
+				icon: 'play_circle_filled',
+				description: t('facets.searchMaterial.tv.desc'),
+			},
+			{
+				value: 'origin:"ds.radio"',
+				title: t('facets.searchMaterial.radio.title'),
+				icon: 'volume_up',
+				description: t('facets.searchMaterial.radio.title'),
+			},
+		]);
+
+		const preliminaryPeriodSearchOptions = computed(() => [
+			{
+				value: 'date',
+				title: t('facets.timePeriod.date.title'),
+				description: t('facets.timePeriod.date.desc'),
+				icon: 'event',
+			},
+			{
+				value: 'period',
+				title: t('facets.timePeriod.period.title'),
+				description: t('facets.timePeriod.period.desc'),
+				icon: 'date_range',
+			},
+		]);
+		const getYearRanges = computed(() => {
+			const selectYears = [];
+			for (let i = startYear.value.getFullYear(); i <= endYear.value.getFullYear(); i++) {
+				selectYears.push(i);
+			}
+			return selectYears;
+		});
+		onMounted(() => {
+			setCategoryArrayFromStore(searchResultStore.categoryFilters);
+			setChannelArrayFromStore(searchResultStore.channelFilters);
+
+			window.addEventListener('resize', updateWindowWidth);
+
+			const routeQueries = cloneRouteQuery(route);
+			const existingFq = normalizeFq(routeQueries.fq as string[] | string);
+			const startTimeFilter = existingFq.find((fq: string) => fq.includes('startTime'));
+			if (startTimeFilter) {
+				const [, startDate, endDate] = decodeURIComponent(startTimeFilter).match(/\[(.+?) TO (.+?)\]/) ?? [];
+				const startDateObj = new Date(startDate);
+				const endDateObj = new Date(endDate);
+				if (
+					startDateObj.getFullYear() === endDateObj.getFullYear() &&
+					startDateObj.getMonth() === endDateObj.getMonth() &&
+					startDateObj.getDate() === endDateObj.getDate()
+				) {
+					searchResultStore.preliminaryPeriodSearch = 'date';
+					selectedDate.value = new Date(startDateObj);
+				} else {
+					searchResultStore.preliminaryPeriodSearch = 'period';
+					timeSliderValues.value[0] = startDateObj.getFullYear();
+					timeSliderValues.value[1] = endDateObj.getFullYear();
+				}
+			}
+		});
+
+		onUnmounted(() => {
+			window.removeEventListener('resize', updateWindowWidth);
+		});
+
+		function updateWindowWidth() {
+			windowWidth.value = window.innerWidth;
+		}
+
 		if (searchResultStore.firstBackendFetchExecuted && Object.keys(searchResultStore.initFacets).length !== 0) {
 			channelsArray.value = extendFacetPairToSelectorData(
 				simplifyFacets(searchResultStore.initFacets.facet_fields.creator_affiliation_facet),
@@ -249,6 +443,29 @@ export default defineComponent({
 			);
 		}
 
+		const getTVFacets = (channelArray: SelectorData[]) => {
+			const returnArray = [];
+			for (const obj of channelArray) {
+				if (searchResultStore.TVFacets.includes(obj.name)) {
+					returnArray.push(obj);
+				}
+			}
+			return returnArray;
+		};
+
+		const firstYearOfContent = computed(() => {
+			return startYear.value.getFullYear();
+		});
+
+		const getRadioFacets = (channelArray: SelectorData[]) => {
+			const returnArray = [];
+			for (const obj of channelArray) {
+				if (searchResultStore.RadioFacets.includes(obj.name)) {
+					returnArray.push(obj);
+				}
+			}
+			return returnArray;
+		};
 		const updateCheckbox = (
 			array: SelectorData[],
 			index: number,
@@ -259,25 +476,28 @@ export default defineComponent({
 		) => {
 			if (title && key) {
 				const routeQueries = channelFilterExists(key, title, filterArray)
-					? removeChannelOrCategoryFilter(route, createFilter(title, key), timeSearchStore.timeFacetsOpen, key)
-					: addChannelOrCategoryFilter(route, createFilter(title, key), timeSearchStore.timeFacetsOpen, key);
+					? removeChannelOrCategoryFilter(route, createFilter(title, key), true, key)
+					: addChannelOrCategoryFilter(route, createFilter(title, key), true, key);
 				routeQueries.start = 0;
 				router.push({ query: routeQueries });
 				array[index].selected = val;
 			}
 		};
 
-		const getSublineForFacets = (dataArray: SelectorData[], translationKey: string, allTranslationKey: string) => {
-			if (
-				dataArray.filter((item) => item.selected).length === 0 ||
-				dataArray.filter((item) => item.selected).length === dataArray.length
-			) {
-				return `${t(allTranslationKey)}`;
+		const getSublineForFacets = (dataArray: SelectorData[], translationKey: string) => {
+			if (dataArray.filter((item) => item.selected).length === 0) {
+				return ``;
 			} else {
-				return `${dataArray.filter((item) => item.selected).length} ${t(
-					translationKey,
-					dataArray.filter((item) => item.selected).length,
-				)}`;
+				const selected = dataArray.filter((item) => item.selected).length;
+				const total = dataArray.length;
+				if (windowWidth.value <= 640) {
+					return `${selected}/${total}`;
+				} else {
+					return t(translationKey, {
+						selected,
+						total,
+					});
+				}
 			}
 		};
 
@@ -294,6 +514,45 @@ export default defineComponent({
 			},
 			{ deep: true },
 		);
+		watch(
+			() => vueSliderRef.value,
+			(newVal, oldVal) => {
+				if (newVal !== oldVal) {
+					if (newVal) {
+						const dots = Array.from(document.querySelectorAll('.vue-slider-dot')) as HTMLDivElement[];
+						dots.forEach((dot, index) => {
+							dot.tabIndex = -1;
+							dot.ariaLabel = 'Time selector';
+							dot.setAttribute('data-testid', addTestDataEnrichment('input', 'vue-slider', `slider-${index}`, index));
+						});
+					}
+				}
+			},
+		);
+
+		watch(
+			() => route.query.fq,
+			(newFq) => {
+				/*
+				we have to do this, because vue acts weird here.
+				when we have normal route changes, it seems like we get an array here,
+				but when we use brower back and forth buttons, we get strings, IF there is only one filter.
+				Weird and breaking behavior, that we have to account for here.
+				*/
+				const normalizedFq: string[] = Array.isArray(newFq) ? (newFq as string[]) : newFq ? [newFq as string] : [];
+				const originFilter = normalizedFq.find((fq: string) => fq.includes('origin'));
+				if (originFilter) {
+					if (decodeURIComponent(originFilter) === delimitationOptions.radio) {
+						searchResultStore.preliminaryFilter = 'origin:"ds.radio"';
+					} else if (decodeURIComponent(originFilter) === delimitationOptions.tv) {
+						searchResultStore.preliminaryFilter = 'origin:"ds.tv"';
+					}
+				} else {
+					searchResultStore.preliminaryFilter = '';
+				}
+			},
+			{ immediate: true },
+		);
 
 		watch(
 			() => searchResultStore.categoryFilters,
@@ -302,6 +561,24 @@ export default defineComponent({
 			},
 		);
 
+		watch(
+			() => selectedDate.value,
+			(date: Date | undefined) => {
+				if (!date) {
+					return;
+				}
+
+				const start = new Date(date);
+				start.setHours(0, 0, 0, 0);
+
+				const end = new Date(date);
+				end.setHours(23, 59, 59, 999);
+
+				startDate.value = start;
+				endDate.value = end;
+				setTimeSearchMethodAndExecute(startDate.value.toISOString(), endDate.value.toISOString());
+			},
+		);
 		const setCategoryArrayFromStore = (items: string[]) => {
 			genreArray.value.forEach((item) => {
 				item.selected = false;
@@ -352,25 +629,50 @@ export default defineComponent({
 		watch(
 			() => searchResultStore.showFacets,
 			() => {
-				toggleFacets();
+				if (facetsContainer.value !== null) {
+					toggleFacets();
+				} else {
+					watch(
+						() => facetsContainer,
+						() => {
+							toggleFacets();
+						},
+						{ deep: true },
+					);
+				}
 			},
 		);
 
-		onMounted(() => {
-			setCategoryArrayFromStore(searchResultStore.categoryFilters);
-			setChannelArrayFromStore(searchResultStore.channelFilters);
-			if (timeSearchStore.timeFacetsOpen && timeFacetButton.value?.getAttribute('aria-checked') === 'false') {
-				toggleTimeFacets();
-			} else if (!timeSearchStore.timeFacetsOpen && timeFacetButton.value?.getAttribute('aria-checked') === 'true') {
-				toggleTimeFacets();
-			}
-		});
-
 		watch(
-			() => timeSearchStore.timeFacetsOpen,
+			() => searchResultStore.preliminaryPeriodSearch,
 			() => {
-				toggleTimeFacets();
+				const routeQueries = cloneRouteQuery(route);
+				routeQueries.start = 0;
+				const existingFq = normalizeFq(routeQueries.fq as string[] | string);
+				const startTimeFilter = existingFq.find((fq: string) => fq.includes('startTime'));
+				if (startTimeFilter) {
+					const index = existingFq.findIndex((fq: string) => fq === startTimeFilter);
+					if (index !== -1) {
+						existingFq.splice(index, 1);
+					}
+				}
+				routeQueries.fq = existingFq;
+				router.push({
+					name: 'Search',
+					query: routeQueries,
+				});
+			},
+		);
+
+		watch(
+			() => getYearRanges,
+			(newRange: ComputedRef<number[]>) => {
+				data.value = [];
+				for (let i = 0; i < newRange.value.length; i++) {
+					data.value.push({ key: newRange.value[i], value: newRange.value[i] });
+				}
 			},
+			{ deep: true, immediate: true },
 		);
 
 		const updateFacet = (array: SelectorData[], index: number, val: boolean, key: string) => {
@@ -385,146 +687,177 @@ export default defineComponent({
 			router.push({ query: routeQueries });
 		};
 
-		const newSearch = (yearSearch: boolean) => {
-			const routeQueries = cloneRouteQuery(route);
-			routeQueries.q = searchResultStore.currentQuery;
-			if (routeQueries.q === '') {
-				routeQueries.q = '*:*';
-			}
-			routeQueries.start = 0;
-			routeQueries.sort = yearSearch ? 'startTime asc' : '';
-			const dayString = days.value
-				.filter((day: SelectorData) => day.selected)
-				.map((day: SelectorData) => day.value)
-				.join(' OR ');
-
-			const monthString = months.value
-				.filter((month: SelectorData) => month.selected)
-				.map((month: SelectorData) => month.value)
-				.join(' OR ');
-
-			const timeslotString = timeslots.value
-				.filter((timeslot: SelectorData) => timeslot.selected)
-				.map((timeslot: SelectorData) => timeslot.value)
-				.join(' OR ');
-
-			if (!routeQueries.fq) {
-				routeQueries.fq = [];
+		const createTimeFacetSubline = computed(() => {
+			if (
+				startDate.value.getTime() === startYear.value.getTime() &&
+				endDate.value.getTime() === endYear.value.getTime()
+			) {
+				return `${t('facets.contentFrom')} ${firstYearOfContent.value}`;
+			} else {
+				if (searchResultStore.preliminaryPeriodSearch === 'period') {
+					if (windowWidth.value <= 640) {
+						return `${startDate.value.getFullYear()} → ${endDate.value.getFullYear()}`;
+					} else {
+						return `${t('facets.from')} ${t('facets.year')}: ${startDate.value.getFullYear()} → ${t('facets.to')} ${t(
+							'facets.year',
+						)}: ${endDate.value.getFullYear()}`;
+					}
+				} else {
+					return new Intl.DateTimeFormat(locale.value, {
+						day: 'numeric',
+						month: 'long',
+						year: 'numeric',
+					}).format(selectedDate.value);
+				}
 			}
+		});
 
-			const existingFq = removeTimeFacetsFromRoute(normalizeFq(routeQueries.fq));
+		const updateTimeSearch = () => {
+			startDate.value.setFullYear(timeSliderValues.value[0]);
+			endDate.value.setFullYear(timeSliderValues.value[1]);
+			setTimeSearchMethodAndExecute(startDate.value.toISOString(), endDate.value.toISOString());
+		};
 
+		const setTimeSearchMethodAndExecute = (startDate: string, endDate: string) => {
+			searchResultStore.resetAutocomplete();
+			const routeQueries = cloneRouteQuery(route);
+			routeQueries.start = 0;
+			const existingFq = normalizeFq(routeQueries.fq as string[] | string);
+			const startTimeFilter = existingFq.find((fq: string) => fq.includes('startTime'));
+			if (startTimeFilter) {
+				const index = existingFq.findIndex((fq: string) => fq === startTimeFilter);
+				if (index !== -1) {
+					existingFq.splice(index, 1);
+				}
+			}
+			existingFq.push(encodeURIComponent(`startTime:[${startDate} TO ${endDate}]`));
+			routeQueries.fq = existingFq;
+			router.push({
+				name: 'Search',
+				query: routeQueries,
+			});
+		};
+		const setSearchMethodAndExecute = (choice: string) => {
+			let orgQuery = searchResultStore.currentQuery;
 			if (
-				yearSearch &&
-				startDate.value !== null &&
-				endDate.value !== null &&
-				(startDate.value.getTime() !== startYear.value.getTime() || endDate.value.getTime() !== endYear.value.getTime())
+				searchResultStore.currentQuery.includes('title:') ||
+				searchResultStore.currentQuery.includes('description:')
 			) {
-				startDate.value.setHours(0, 0, 0); // Start of the day
-				endDate.value.setHours(23, 59, 59); // End of the day
-				existingFq.push(
-					encodeURIComponent(`startTime:[${startDate.value.toISOString() + ' TO ' + endDate.value.toISOString()}]`),
-				);
+				orgQuery = searchResultStore.currentQuery.split(':')[1].replaceAll('"', '');
 			}
-			dayString !== '' ? existingFq.push(encodeURIComponent(`temporal_start_day_da:(${dayString})`)) : null;
-			monthString !== '' ? existingFq.push(encodeURIComponent(`temporal_start_month:(${monthString})`)) : null;
-			timeslotString !== '' ? existingFq.push(encodeURIComponent(`temporal_start_hour_da:(${timeslotString})`)) : null;
-
+			let newQuery = '';
+			if (choice === 'title') {
+				newQuery = `title:"${orgQuery}"`;
+				searchResultStore.preliminarySearchMethod = 'title';
+			} else if (choice === 'desc') {
+				newQuery = `description:"${orgQuery}"`;
+				searchResultStore.preliminarySearchMethod = 'desc';
+			} else {
+				newQuery = orgQuery;
+				searchResultStore.preliminarySearchMethod = 'all';
+			}
+			searchResultStore.resetAutocomplete();
+			const routeQueries = cloneRouteQuery(route);
+			routeQueries.start = 0;
+			routeQueries.q = newQuery;
+			const existingFq = normalizeFq(routeQueries.fq as string[] | string);
 			routeQueries.fq = existingFq;
-
 			router.push({
 				name: 'Search',
 				query: routeQueries,
 			});
+		};
 
-			if (searchResultStore.filterQueryLength > 900) {
-				searchResultStore.queryLimitReached = true;
+		const setDelimitationFilterAndExecute = (choice: string) => {
+			let val = '';
+			if (choice === 'origin:"ds.tv"') {
+				val = delimitationOptions.tv;
+			} else if (choice === 'origin:"ds.radio"') {
+				val = delimitationOptions.radio;
 			} else {
-				searchResultStore.queryLimitReached = false;
+				val = delimitationOptions.all;
 			}
-		};
-
-		const toggleTimeFacets = () => {
-			if (!timeSearchStore.timeFacetsOpen) {
-				timeFacetButton.value?.setAttribute('aria-checked', 'false');
-				gsap.to(timeFacets.value, {
-					height: '0px',
-					paddingTop: '0px',
-					marginBottom: '0px',
-					duration: 0.5,
-					overwrite: true,
-					onComplete: () => {
-						gsap.set(timeFacets.value, {
-							display: 'none',
-						});
-					},
-				});
-				const routeQueries = cloneRouteQuery(route);
-				const existingFq = removeTimeFacetsFromRoute(normalizeFq(routeQueries.fq));
-				removeAllTimeFilters();
+			searchResultStore.resetAutocomplete();
+			const routeQueries = cloneRouteQuery(route);
+			routeQueries.start = 0;
+			const existingFq = normalizeFq(routeQueries.fq as string[] | string);
+			if (existingFq) {
+				const creatorAffiliationFilter = existingFq.find((fq: string) => fq.includes('origin'));
+				if (creatorAffiliationFilter) {
+					const index = existingFq.findIndex((fq: string) => fq === creatorAffiliationFilter);
+					if (index !== -1) {
+						existingFq.splice(index, 1);
+					}
+				}
+				if (val !== '') {
+					existingFq.push(encodeURIComponent(val));
+				}
 				routeQueries.fq = existingFq;
-				router.push({
-					name: 'Search',
-					query: routeQueries,
-				});
 			} else {
-				timeFacetButton.value?.setAttribute('aria-checked', 'true');
-				gsap.set(timeFacets.value, {
-					display: 'flex',
-					flexDirection: 'column',
-					onComplete: () => {
-						gsap.to(timeFacets.value, {
-							height: 'auto',
-							paddingTop: '30px',
-							marginBottom: '20px',
-							duration: 0.5,
-							overwrite: true,
-						});
-					},
-				});
+				if (val !== '') {
+					routeQueries.fq = [];
+					routeQueries.fq.push(encodeURIComponent(val));
+				}
 			}
-		};
-
-		const removeAllTimeFilters = () => {
-			resetAllSelectorValues(days.value);
-			resetAllSelectorValues(months.value);
-			resetAllSelectorValues(timeslots.value);
-			const startHolder = new Date(startYear.value.getTime());
-			const endHolder = new Date(endYear.value.getTime());
-			startDate.value = startHolder;
-			endDate.value = endHolder;
+			router.push({
+				name: 'Search',
+				query: routeQueries,
+			});
 		};
 
 		const toggleFacets = () => {
 			if (!searchResultStore.showFacets) {
 				gsap.to(facetsContainer.value, {
-					height: '0px',
 					duration: 0.5,
 					overwrite: true,
 					opacity: 0,
-					marginBottom: '0px',
+					marginLeft: '-15px',
 					onComplete: () => {
+						focusTrap?.deactivate();
 						gsap.set(facetsContainer.value, {
 							display: 'none',
 						});
 					},
 				});
 			} else {
+				if (facetsContainer.value) {
+					focusTrap = createFocusTrap(facetsContainer.value, () => {
+						searchResultStore.showFacets = false;
+					});
+				}
 				gsap.set(facetsContainer.value, {
 					display: 'block',
 					onComplete: () => {
+						focusTrap?.activate();
 						gsap.to(facetsContainer.value, {
-							height: 'auto',
-							marginBottom: '0px',
 							duration: 0.5,
 							opacity: 1,
+							marginLeft: '0px',
 							overwrite: true,
 						});
 					},
 				});
 			}
 		};
+		const updateStartYear = (val: number) => {
+			timeSliderValues.value[0] = Number(val);
+			startDate.value !== null ? startDate.value.setFullYear(val) : null;
+			if (Number(val) > timeSliderValues.value[1]) {
+				timeSliderValues.value[1] = Number(val);
+				endDate.value !== null ? endDate.value.setFullYear(val) : null;
+			}
+			updateTimeSearch();
+		};
 
+		const updateEndYear = (val: number) => {
+			endDate.value !== null ? endDate.value.setFullYear(val) : null;
+			timeSliderValues.value[1] = Number(val);
+			if (Number(val) < timeSliderValues.value[0]) {
+				timeSliderValues.value[0] = Number(val);
+				startDate.value !== null ? startDate.value.setFullYear(val) : null;
+			}
+			updateTimeSearch();
+		};
 		return {
 			currentFacets,
 			lastUpdate,
@@ -537,17 +870,37 @@ export default defineComponent({
 			toggleFacets,
 			facetsContainer,
 			timeFacets,
-			newSearch,
 			timeFacetButton,
 			timeSearchStore,
 			t,
 			channelsArray,
 			genreArray,
+			yearArray,
 			updateFacet,
 			updateCheckbox,
+			updateTimeSearch,
 			getSublineForFacets,
 			santizeAndSimplify,
 			translatedGenreArray,
+			getTVFacets,
+			getRadioFacets,
+			addTestDataEnrichment,
+			vueSliderRef,
+			timeSliderValues,
+			data,
+			selectedSearchMethodOptions,
+			selectedSearchMaterialOptions,
+			preliminaryPeriodSearchOptions,
+			firstYearOfContent,
+			getYearRanges,
+			updateStartYear,
+			updateEndYear,
+			startYear,
+			endYear,
+			selectedDate,
+			createTimeFacetSubline,
+			setSearchMethodAndExecute,
+			setDelimitationFilterAndExecute,
 		};
 	},
 });
@@ -565,21 +918,59 @@ export default defineComponent({
 	width: 100%;
 }
 
+.date-picker-container {
+	margin-bottom: 25px;
+}
+
 .facet-enter-from,
 .facet-leave-to {
 	opacity: 0;
 	height: 0%;
 }
 
+.filter-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin: 20px 12px 20px 0px;
+}
+
+.filter-headline {
+	color: #002e70;
+}
+
+.filter-headline .bold {
+	font-weight: var(--fw-bold);
+}
+
+.filter-header button {
+	border: 0px;
+	background-color: transparent;
+}
+
+.filter-header .material-icons {
+	width: 40px;
+	height: 40px;
+	color: #002e70;
+	font-size: 40px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
 .time-facets {
 	display: none;
-	height: 0px;
 	overflow: hidden;
 	position: relative;
-	width: 100vw;
 	background-color: #d9f5fe;
+	min-height: 100vh;
+	display: fixed;
+	top: 0px;
+	margin-left: -15px;
 }
-.expand-container {
+
+.btn.right {
+	float: right;
 }
 
 fieldset {
@@ -605,14 +996,15 @@ fieldset {
 	font-size: 40px;
 }
 
-.category-container {
-	margin-bottom: 45px;
+.headline-section {
+	padding-left: 12px;
 }
 
-.search-facets-flex {
+.show-results-container {
+	width: 100%;
 	display: flex;
-	align-items: center;
-	justify-content: center;
+	justify-content: flex-end;
+	margin-bottom: 10px;
 }
 
 .time-facet-button {
@@ -645,13 +1037,33 @@ fieldset {
 
 .facet-container {
 	display: flex;
-	height: auto;
+	height: 0px;
 	flex-direction: column;
-	overflow: hidden;
+	overflow-x: hidden;
 	gap: 20px;
 	box-sizing: border-box;
 	padding-bottom: 15px;
 	width: 100%;
+	min-height: calc(100vh);
+}
+
+.facet-container::-webkit-scrollbar {
+	width: 10px;
+	height: 10px;
+}
+
+.facet-container::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.facet-container::-webkit-scrollbar-thumb {
+	background: rgba(0, 0, 0, 0.3);
+	border-radius: 4px;
+}
+
+/* harmless, but usually no-op in modern browsers */
+.facet-container::-webkit-scrollbar-button {
+	display: none;
 }
 
 .facet-options {
@@ -659,7 +1071,12 @@ fieldset {
 	width: 100%;
 	margin-top: 10px;
 }
-
+.time-search-filter-container {
+	height: 120px;
+	margin-bottom: 70px;
+	margin-left: 40px;
+	width: calc(100% - 82px);
+}
 .flex-container {
 	width: 100%;
 	padding-bottom: 30px;
@@ -685,108 +1102,50 @@ h2 {
 }
 
 .search-facets {
+	left: 0px;
 	box-sizing: border-box;
-	overflow-x: visible;
-	overflow-y: clip;
-	position: relative;
-	height: 0px;
+	position: fixed;
 	display: none;
 	opacity: 0;
-	align-items: center;
-	justify-content: center;
-}
-
-.dark-bar {
-	min-width: 50px;
-	width: 50px;
-	background-color: #d5d5d5;
-	height: 24px;
-	border-radius: 20px;
-	margin-left: 20px;
-	transition: all 0.1s linear 0s;
-}
-
-.dark-bar.open {
-	background-color: #002e70;
+	top: 0px;
+	height: 100vh;
+	max-width: 100%;
+	width: 500px;
+	z-index: 7;
+	box-shadow:
+		rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
+		rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+	background-color: rgb(255 255 255 / 15%);
+	backdrop-filter: blur(15px) brightness(165%);
 }
 
-.dark-bar .dot {
-	width: 18px;
-	height: 18px;
-	display: block;
-	background-color: white;
-	border-radius: 15px;
-	top: 3px;
-	left: 3px;
+.search-facets-flex {
+	height: 100%;
+	width: 100%;
 	position: relative;
-	transition: all 0.1s linear 0s;
-}
-
-.dark-bar.open .dot {
-	left: 29px;
+	top: 0px;
+	left: 0px;
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	flex-direction: column;
 }
 
-.dark-bar .dot .close:before {
-	content: '';
-	display: block;
-	width: 7px;
-	height: 2px;
-	background-color: #002e70;
-	transform-origin: center;
-	transform: rotateZ(45deg);
-	top: 10px;
-	left: 2px;
-	position: relative;
-}
-.dark-bar .dot .close:after {
-	content: '';
-	display: block;
-	width: 12px;
-	height: 2px;
-	background-color: #002e70;
-	transform-origin: center;
-	transform: rotateZ(-45deg);
-	top: 6px;
+.closeBtn {
+	z-index: 2;
 	position: relative;
-	left: 5px;
-}
-
-.dark-bar .dot .check:before {
-	content: '';
-	display: block;
-	width: 15px;
-	height: 2px;
-	background-color: #757575;
-	transform-origin: center;
-	transform: rotateZ(45deg);
-	top: 8px;
-	left: 1px;
-	position: relative;
-	border-radius: 15px;
-}
-.dark-bar .dot .check:after {
-	content: '';
-	display: block;
-	width: 15px;
-	height: 2px;
-	background-color: #757575;
-	transform-origin: center;
-	transform: rotateZ(-45deg);
-	top: 6px;
-	left: 1px;
-	position: relative;
-	border-radius: 15px;
+	cursor: pointer;
 }
 
 .genre-facets {
 	display: flex;
-	gap: 30px 10px;
 	flex-wrap: wrap;
 	justify-content: center;
 	min-height: 200px;
 	box-sizing: border-box;
 	margin-top: 25px;
 	margin-bottom: 30px;
+	gap: 8px;
 }
 
 .genre {
@@ -795,13 +1154,21 @@ h2 {
 	margin: 0px 0px;
 	box-sizing: border-box;
 }
+.to-from-container {
+	display: flex;
+	flex-direction: row;
+	align-content: center;
+	flex-wrap: nowrap;
+	justify-content: space-evenly;
+	align-items: center;
+	gap: 10px;
+	margin-bottom: 30px;
+	font-size: 26px;
+	text-transform: capitalize;
+}
 
 /* MEDIA QUERY 480 */
 @media (min-width: 480px) {
-	.genre {
-		width: calc(50% - 10px);
-		margin: 0px;
-	}
 	.container {
 		max-width: 640px;
 	}
@@ -812,10 +1179,6 @@ h2 {
 		width: fit-content;
 	}
 
-	.facet-options {
-		column-count: 2;
-	}
-
 	.facet-options .checkbox {
 		border-right: 1px solid rgba(230, 230, 230, 1);
 	}
@@ -827,12 +1190,6 @@ h2 {
 	.facet-options .checkbox.semi-end {
 		border-right: 0px solid rgba(230, 230, 230, 1);
 	}
-
-	.genre {
-		width: calc(50% - 15px);
-		flex: 0 0 calc(50% - 15px);
-		margin: 0px 0px;
-	}
 	.container {
 		max-width: 990px;
 	}
@@ -842,24 +1199,9 @@ h2 {
 }
 
 @media (min-width: 990px) {
-	.facet-options {
-		column-count: 4;
-	}
-
 	.facet-options .checkbox.semi-end {
 		border-right: 1px solid rgba(230, 230, 230, 1);
 	}
-
-	.genre-facets {
-		padding: 0px 5px;
-		gap: 45px 40px;
-		justify-content: flex-start;
-	}
-	.genre {
-		width: calc(25% - 30px);
-		flex: 0 0 calc(25% - 30px);
-		margin: 0px 0px;
-	}
 	.container {
 		max-width: 1150px;
 	}
@@ -880,4 +1222,11 @@ h2 {
 		padding-left: 0;
 	}
 }
+
+@media (min-width: 2130px) {
+	.search-facets {
+		margin-right: 1605px;
+		left: initial !important;
+	}
+}
 </style>
diff --git a/src/components/search/Header.vue b/src/components/search/Header.vue
index 367c1227..503e1ddb 100644
--- a/src/components/search/Header.vue
+++ b/src/components/search/Header.vue
@@ -1,10 +1,5 @@
 <template>
 	<div :class="`header-container ${typeof $route.name === 'string' ? $route.name.toLowerCase() : ''}`">
-		<!-- <kb-menu
-			:routing="true"
-			:locale="locale"
-			:page="$route.name"
-		></kb-menu> -->
 		<HeaderMenu
 			:search-bar-open="searchBarOpen"
 			@toggle-search-bar="toggleSearchBar"
@@ -17,7 +12,7 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import HeaderMenu from '../global/nav/HeaderMenu.vue';
+import HeaderMenu from '@/components/global/nav/HeaderMenu.vue';
 import SearchBar from '@/components/search/SearchBar.vue';
 import Breadcrumb from '@/components/global/nav/Breadcrumb.vue';
 export default defineComponent({
diff --git a/src/components/search/SearchBar.vue b/src/components/search/SearchBar.vue
index 6cd83341..5d94e448 100644
--- a/src/components/search/SearchBar.vue
+++ b/src/components/search/SearchBar.vue
@@ -365,7 +365,7 @@ export default defineComponent({
 					debounceMechanic.value = false;
 				}, 500);
 				let query: LocationQueryRaw = {
-					q: searchResultStore.currentQuery,
+					q: searchResultStore.currentQuery === '' ? ':*' : searchResultStore.currentQuery,
 					start: 0,
 				};
 
@@ -486,7 +486,7 @@ input[type='search']::-webkit-search-results-decoration {
 }
 
 #focusSearchInput:focus-visible {
-	box-shadow: 0 0 0 0px #002f7091 !important;
+	box-shadow: 0 0 0 3px #002f7091 !important;
 	border-radius: 4px !important;
 	transition: box-shadow 0.2s ease-in-out;
 }
@@ -839,6 +839,10 @@ input:focus {
 	white-space: nowrap;
 	background-color: transparent;
 	border: 0;
+	margin: 3px 3px;
+	max-width: 100%;
+	box-sizing: border-box;
+	width: calc(100% - 6px);
 }
 
 .portal-dropdown-menu {
diff --git a/src/components/search/SearchOverhead.vue b/src/components/search/SearchOverhead.vue
index 6e3c6760..ab0f77bc 100644
--- a/src/components/search/SearchOverhead.vue
+++ b/src/components/search/SearchOverhead.vue
@@ -2,7 +2,7 @@
 	<div class="container">
 		<div class="row">
 			<div class="hit-count">
-				<div :class="['filter-options', { disabled: searchResultStore.loading, open: searchResultStore.showFacets }]">
+				<div :class="['filter-options', { disabled: searchResultStore.loading }]">
 					<div :class="`filter-buttons ${searchResultStore.showFacets ? 'filter-buttons-top-filter-active' : ''}`">
 						<KBButton
 							ref="toggleFacetsButton"
@@ -18,73 +18,10 @@
 							@click="toggleFacets()"
 						></KBButton>
 					</div>
-					<div :class="`type-toggles ${searchResultStore.showFacets ? 'type-toggles-filter-active' : ''}`">
-						<button
-							:class="tvToggled ? 'source-facet-button open' : 'source-facet-button'"
-							:data-testid="addTestDataEnrichment('button', 'search-overhead', 'toggle-tv', 0)"
-							@click="toggleTV($event)"
-						>
-							<span class="material-icons second">play_circle_filled</span>
-							<p class="btn-medium">TV</p>
-							<span :class="tvToggled ? 'dark-bar open' : 'dark-bar closed'">
-								<span class="dot">
-									<TransitionGroup>
-										<div
-											v-if="tvToggled"
-											class="close"
-										></div>
-										<div
-											v-else
-											class="check"
-										></div>
-									</TransitionGroup>
-								</span>
-							</span>
-						</button>
-						<button
-							:class="radioToggled ? 'source-facet-button open' : 'source-facet-button'"
-							:data-testid="addTestDataEnrichment('button', 'search-overhead', 'toggle-radio', 0)"
-							@click="toggleRadio($event)"
-						>
-							<span class="material-icons second">volume_up</span>
-							<p class="btn-medium">RADIO</p>
-							<span :class="radioToggled ? 'dark-bar open' : 'dark-bar closed'">
-								<span class="dot">
-									<TransitionGroup>
-										<div
-											v-if="radioToggled"
-											class="close"
-										></div>
-										<div
-											v-else
-											class="check"
-										></div>
-									</TransitionGroup>
-								</span>
-							</span>
-						</button>
-					</div>
 				</div>
-				<Facets />
-
-				<KBButton
-					v-if="searchResultStore.showFacets"
-					ref="toggleFacetsButton"
-					role="switch"
-					aria-checked="true"
-					class="btn-medium"
-					:custom-style="{ position: 'relative', top: 'calc(-2vw + -10px)' }"
-					:data-testid="addTestDataEnrichment('button', 'search-overhead', 'toggle-filters', 1)"
-					:button-text="$t('search.hideFilters')"
-					left-icon-name="close"
-					button-type="btn-main-medium"
-					button-color="main"
-					button-size="medium"
-					@click="toggleFacets()"
-				></KBButton>
 				<div
 					v-if="searchResultStore.numFound !== 0 || (searchResultStore.numFound !== 0 && searchResultStore.loading)"
-					:class="searchResultStore.showFacets ? 'result-options less-top-padding' : 'result-options'"
+					class="result-options"
 				>
 					<div class="hits">
 						<HitCount
@@ -162,17 +99,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, ref, watch } from 'vue';
+import { computed, defineComponent, onMounted, ref } from 'vue';
 import { useSearchResultStore } from '@/store/searchResultStore';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import Facets from '@/components/search/Facets.vue';
-import { cloneRouteQuery, normalizeFq } from '@/utils/filter-utils';
 import Sort from './Sort.vue';
 import HitCount from './HitCount.vue';
 import { addTestDataEnrichment } from '@/utils/test-enrichments';
 import CurrentFilters from '@/components/search/CurrentFilters.vue';
-import { Severity } from '@/types/NotificationType';
 import KBButton from '@/components/common/KBButton.vue';
 
 export default defineComponent({
@@ -180,7 +114,6 @@ export default defineComponent({
 	components: {
 		HitCount,
 		Sort,
-		Facets,
 		CurrentFilters,
 		KBButton,
 	},
@@ -194,12 +127,6 @@ export default defineComponent({
 		const tvToggled = ref(true);
 		const radioToggled = ref(true);
 
-		const delimitationOptions = {
-			all: '',
-			tv: 'origin:"ds.tv"',
-			radio: 'origin:"ds.radio"',
-		};
-
 		const calcRowCount = computed(() => {
 			const rowCount = searchResultStore.pageNumber * Number(searchResultStore.rowCount);
 			return rowCount < searchResultStore.numFound ? rowCount : searchResultStore.numFound;
@@ -208,111 +135,6 @@ export default defineComponent({
 			searchResultStore.toggleShowFacets(false);
 		});
 
-		watch(
-			() => route.query.fq,
-			(newFq) => {
-				/* 
-				we have to do this, because vue acts weird here.
-				when we have normal route changes, it seems like we get an array here,
-				but when we use brower back and forth buttons, we get strings, IF there is only one filter.
-				Weird and breaking behavior, that we have to account for here.
-				*/
-				const normalizedFq: string[] = Array.isArray(newFq) ? (newFq as string[]) : newFq ? [newFq as string] : [];
-				const originFilter = normalizedFq.find((fq: string) => fq.includes('origin'));
-				if (originFilter) {
-					if (decodeURIComponent(originFilter) === delimitationOptions.radio) {
-						tvToggled.value = false;
-					} else if (decodeURIComponent(originFilter) === delimitationOptions.tv) {
-						radioToggled.value = false;
-					}
-				} else {
-					tvToggled.value = true;
-					radioToggled.value = true;
-				}
-			},
-			{ immediate: true },
-		);
-
-		const setDelimitationFilterAndExecute = () => {
-			let val = '';
-			if ((tvToggled.value && radioToggled.value) || (!tvToggled.value && !radioToggled.value)) {
-				val = delimitationOptions.all;
-				searchResultStore.preliminaryFilter = '';
-			}
-			if (tvToggled.value && !radioToggled.value) {
-				val = delimitationOptions.tv;
-			}
-			if (!tvToggled.value && radioToggled.value) {
-				val = delimitationOptions.radio;
-			}
-			searchResultStore.resetAutocomplete();
-			const routeQueries = cloneRouteQuery(route);
-			routeQueries.start = 0;
-			const existingFq = normalizeFq(routeQueries.fq as string[] | string);
-			if (existingFq) {
-				const creatorAffiliationFilter = existingFq.find((fq: string) => fq.includes('origin'));
-				if (creatorAffiliationFilter) {
-					const index = existingFq.findIndex((fq: string) => fq === creatorAffiliationFilter);
-					if (index !== -1) {
-						existingFq.splice(index, 1);
-					}
-				}
-				if (val !== '') {
-					existingFq.push(encodeURIComponent(val));
-				}
-				routeQueries.fq = existingFq;
-			} else {
-				if (val !== '') {
-					routeQueries.fq = [];
-					routeQueries.fq.push(encodeURIComponent(val));
-				}
-			}
-			router.push({
-				name: 'Search',
-				query: routeQueries,
-			});
-		};
-
-		const toggleTV = (event: Event) => {
-			tvToggled.value = !tvToggled.value;
-			if (event.target) {
-				const btn = event.target as HTMLButtonElement;
-				btn.setAttribute('aria-checked', tvToggled.value.toString());
-			}
-			if (!tvToggled.value && !radioToggled.value) {
-				radioToggled.value = !radioToggled.value;
-				notifyUserForAtLeastOneSource();
-			}
-			setDelimitationFilterAndExecute();
-		};
-
-		const toggleRadio = (event: Event) => {
-			radioToggled.value = !radioToggled.value;
-			if (event.target) {
-				const btn = event.target as HTMLButtonElement;
-				btn.setAttribute('aria-checked', radioToggled.value.toString());
-			}
-			if (!tvToggled.value && !radioToggled.value) {
-				tvToggled.value = !tvToggled.value;
-				notifyUserForAtLeastOneSource();
-			}
-			setDelimitationFilterAndExecute();
-		};
-
-		/* Needs to be translated! */
-		const notifyUserForAtLeastOneSource = () => {
-			const customEvent = new CustomEvent('notify-user', {
-				detail: {
-					title: t('error.choseMaterialTitle'),
-					message: t('error.ChoseMaterialDesc'),
-					key: false,
-					severity: Severity.INFO,
-					userClose: false,
-				},
-			});
-			window.dispatchEvent(customEvent);
-		};
-
 		const toggleFacets = () => {
 			searchResultStore.toggleShowFacets(!searchResultStore.showFacets);
 		};
@@ -336,8 +158,6 @@ export default defineComponent({
 			toggleFacetsButton,
 			tvToggled,
 			radioToggled,
-			toggleRadio,
-			toggleTV,
 			addTestDataEnrichment,
 			calcRowCount,
 		};
@@ -431,10 +251,6 @@ export default defineComponent({
 	padding-bottom: 8px;
 }
 
-.result-options.less-top-padding {
-	padding-top: 5px;
-}
-
 .sort-options {
 	position: relative;
 	display: flex;
@@ -445,11 +261,6 @@ export default defineComponent({
 	padding-top: 40px;
 }
 
-.filter-options.open {
-	transition: margin-bottom 0.1s ease-in-out 0s;
-	margin-bottom: calc(-2vw + -10px);
-}
-
 .filter-options {
 	display: flex;
 	flex-wrap: wrap;
@@ -510,6 +321,10 @@ export default defineComponent({
 	flex-wrap: wrap;
 }
 
+.filter-button-text {
+	padding-left: 5px;
+}
+
 .source-facet-button {
 	cursor: pointer;
 	padding: 3px 2px;
@@ -623,6 +438,7 @@ export default defineComponent({
 	align-content: center;
 	flex-wrap: nowrap;
 	flex-direction: row;
+	padding: 3px 0px;
 }
 
 @media (min-width: 640px) {
@@ -633,10 +449,6 @@ export default defineComponent({
 		width: auto;
 		padding-bottom: 0px;
 	}
-
-	.source-facet-button {
-		width: auto;
-	}
 	.sort-options {
 		flex-direction: row;
 	}
diff --git a/src/components/search/Underlay.vue b/src/components/search/Underlay.vue
new file mode 100644
index 00000000..5b9a3806
--- /dev/null
+++ b/src/components/search/Underlay.vue
@@ -0,0 +1,49 @@
+<template>
+	<Transition name="underlay">
+		<div
+			v-if="searchResultStore.showFacets"
+			class="underlay"
+			@click="searchResultStore.toggleShowFacets(false)"
+		></div>
+	</Transition>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useSearchResultStore } from '@/store/searchResultStore';
+
+export default defineComponent({
+	name: 'Underlay',
+	components: {},
+
+	setup() {
+		const searchResultStore = useSearchResultStore();
+
+		return {
+			searchResultStore,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.underlay-enter-active,
+.underlay-leave-active {
+	transition: opacity 0.5s ease;
+}
+
+.underlay-enter-from,
+.underlay-leave-to {
+	opacity: 0;
+}
+
+.underlay {
+	width: 100%;
+	position: fixed;
+	height: 100%;
+	background-color: #4444449d;
+	z-index: 6;
+	top: 0px;
+	left: 0px;
+}
+</style>
diff --git a/src/locales/da.json b/src/locales/da.json
index e33e7247..4d46ed8c 100644
--- a/src/locales/da.json
+++ b/src/locales/da.json
@@ -95,19 +95,72 @@
       "fromTheArchive":"{month} måned på DR gennem tiden"
    },
    "facets" : {
+      "headline":"Udvælg filtre, til at indsnævre din søgning på:",
+      "starHeadline": "Udvælg filtre, til at indsnævre din søgning.",
       "allGenres": "Alle kategorier",
       "genres": "kategori | kategorier",
-     "genresSubtitle": "Vælg, hvilken kategori du gerne vil søge i.",
+      "selectedGenres": "{selected} af {total} kategorier valgt",
+      "genresSubtitle": "Vælg, hvilken kategori du gerne vil søge i.",
       "allChannels":"Alle kanaler",
+      "selectedTVChannels":"{selected} af {total} kanaler valgt",
+      "selectedRadioChannels":"{selected} af {total} kanaler valgt",
       "channels":"kanal | kanaler",
+      "tvChannels":"TV kanal | TV kanaler",
+      "radioChannels": "RADIO kanal | RADIO kanaler",
       "chosen":"Valgt",
+      "contentFrom": "Indhold tilbage fra ",
       "reset":"nulstil",
-     "choose": "Vælg",
-     "slowResponse": {
-       "title": "Lang respons tid",
-       "text": "Vi beklager for lang respons tid, vi oplever meget trafik i øjeblikket"
-     },
-     "remove":"Fjern"
+      "choose": "Vælg",
+      "seeResults": "Se dit {resultCount} resultat | Se dine {resultCount} resultater",
+      "to":"Til",
+      "from":"Fra",
+      "year":"år",
+      "slowResponse": {
+         "title": "Lang respons tid",
+         "text": "Vi beklager for lang respons tid, vi oplever meget trafik i øjeblikket"
+      },
+     "remove":"Fjern",
+     "searchingIn":"Søger kun på",
+     "desc":"beskrivelse",
+     "title":"titel",
+     "searchMethod": {
+         "all": {
+            "title":"Søg i alt",
+            "desc":"Der søges i alle metadata-felter."
+         },
+         "title": {
+            "title":"Søg kun på titler",
+            "desc":"Der søges kun i titel-feltet."
+         },
+         "desc": {
+            "title":"Søg kun på beskrivelser",
+            "desc":"Der søges kun i beskrivelses-feltet."
+         }
+      },
+      "searchMaterial": {
+         "both": {
+            "title":"Søg på både TV og RADIO",
+            "desc":"Der søges både i RADIO-poster og TV-poster."
+         },
+         "tv": {
+            "title":"Søg kun på TV",
+            "desc":"Der søges kun i TV-poster."
+         },
+         "radio": {
+            "title":"Søg kun på RADIO",
+            "desc":"Der søges kun i RADIO-poster."
+         }
+      },
+      "timePeriod": {
+         "date": {
+            "title":"Dato",
+            "desc":"Der søges på en dag."
+         },
+         "period": {
+            "title":"Periode",
+            "desc":"Der søges på en år-række."
+         }
+      }
    },
    "breadcrumb": {
       "frontpage":"Forside",
@@ -143,7 +196,7 @@
       "allTimeslots":"Hele døgnet",
       "selection":"Et udpluk af resultaterne",
      "dateSubtitle": "Her kan du vælge en bestemt dato og se, hvad der blev sendt den dag.",
-     "timeMachineSubtitle": "Her kan du vælge årstal, måneder og ugedage, hvis du søger udsendelser sendt i en bestemt periode. Når du klikker dig videre til resultatlisten, får du flere filtreringsmuligheder.",
+     "timeMachineSubtitle": "Her kan du vælge årstal, hvis du søger udsendelser sendt i en bestemt periode. Når du klikker dig videre til resultatlisten, får du flere filtreringsmuligheder.",
      "searchCategoriesSubtitle": "Vælg en kategori og gå på opdagelse i udsendelserne. Kategorierne indeholder primært TV-udsendelser, mens du finder de fleste af radioudsendelserne i “Radio-rodekassen.”",
       "monthHeadline":"Vælg måneder",
       "dayHeadline":"Vælg ugedage",
@@ -538,7 +591,8 @@
       "natur-og-videnskab":"Natur og videnskab",
       "nyheder-politik-og-samfund":"Nyheder, politik og samfund",
       "radio-rodekasse":"Blandet radio",
-      "tv-rodekasse":"Blandet TV"
+      "tv-rodekasse":"Blandet TV",
+      "sport": "Sport"
    },
    "find":{
       "headline":"Hvad vil du søge efter?",
@@ -546,5 +600,13 @@
       "maybeYouWantTo":"Eller måske vil du hellere:",
       "restoreFilters":"Gendanne filtre fra sidste søgning",
       "GoToFrontpage":"Til forsiden af DR-arkivet"
+   },
+   "calendar": {
+      "open":"Åben kalender",
+      "close": "Luk kalender",
+      "explanation": "Skriv en dato i formatet DD-MM-ÅÅÅÅ eller vælg fra kalenderen.",
+      "select": "Vælg dato",
+      "nextMonth": "Næste måned",
+      "prevMonth":"Forrige måned"
    }
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index ee921928..5313c19f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -95,20 +95,72 @@
       "fromTheArchive":"The month of {month} on DR through time"
    },
    "facets" : {
+      "headline":"Choose filters, to limit your search for:",
+      "starHeadline": "Choose filters to refine your search.",
       "allGenres": "all categories",
       "genres": "category | categories",
+      "selectedGenres": "{selected} of {total} categories selected",
       "genresSubtitle": "Select a category and explore the programmes.",
       "allChannels":"all channels",
+      "selectedTVChannels":"{selected} of {total} channels selected",
+      "selectedRadioChannels":"{selected} of {total} kanalchannelser selected",
       "channels":"channel | channels",
+      "tvChannels":"TV channel | TV channels",
+      "radioChannels": "RADIO channel | RADIO channels",
       "chosen":"chosen",
+      "contentFrom": "Content dating back to",
       "reset":"reset",
       "choose": "Select",
+      "seeResults": "See your {resultCount} result | See your {resultCount} results",
+      "to":"To",
+      "from":"From",
+      "year":"year",
       "slowResponse": {
          "title": "Slow response time",
          "text": "We're sorry for long response, we are experiencing a lot of traffic at the moment"
       },
-      "remove":"Remove"
-
+      "remove":"Remove",
+      "searchingIn":"Only searching with",
+      "desc":"description",
+      "title":"title",
+      "searchMethod": {
+         "all": {
+            "title": "Search everything",
+            "desc": "Searches across all metadata fields."
+         },
+         "title": {
+            "title": "Search titles only",
+            "desc": "Searches only in the title field."
+         },
+         "desc": {
+            "title": "Search descriptions only",
+            "desc": "Searches only in the description field."
+         }
+      },
+      "searchMaterial": {
+         "both": {
+            "title": "Search both TV and RADIO",
+            "desc": "Searches both RADIO and TV records."
+         },
+         "tv": {
+            "title": "Search TV only",
+            "desc": "Searches only in TV records."
+         },
+         "radio": {
+            "title": "Search RADIO only",
+            "desc": "Searches only in RADIO records."
+         }
+      },
+      "timePeriod": {
+         "date": {
+            "title":"Date",
+            "desc":"Searches for a single day."
+         },
+         "period": {
+            "title":"Period",
+            "desc":"Searches for a period of years."
+         }
+      }
    },
    "breadcrumb": {
       "frontpage":"Frontpage",
@@ -144,7 +196,7 @@
       "allTimeslots":"All hours",
       "selection":"A selection of the results",
       "dateSubtitle": "Here you can select a specific date and see what was aired that day.",
-      "timeMachineSubtitle": "Here you can select years, months, and days of the week, if you are looking for programmes from a specific period in time. When you click through to the list of results, you will get more filtering options.",
+      "timeMachineSubtitle": "Here you can select years, if you are looking for programmes from a specific period in time. When you click through to the list of results, you will get more filtering options.",
       "searchCategoriesSubtitle": "Select a category and explore the programmes. The categories primarily contain TV programmes, while you will find most of the radio programmes in the “Radio jumble box.”",
       "monthHeadline":"Select months",
       "dayHeadline":"Select days of the week",
@@ -543,7 +595,9 @@
       "natur-og-videnskab":"Nature and science",
       "nyheder-politik-og-samfund":"News, politics, and society",
       "radio-rodekasse":"Mixed radio",
-      "tv-rodekasse":"Mixed TV"
+      "tv-rodekasse":"Mixed TV",
+      "sport": "Sport"
+
    },
    "find":{
       "headline":"What do you want to search for?",
@@ -551,5 +605,13 @@
       "maybeYouWantTo":"Or maybe you would rather:",
       "restoreFilters":"Restore filters from previous search",
       "GoToFrontpage":"Go to the front page of DR-arkivet"
+   },
+   "calendar": {
+      "open":"Open calendar",
+      "close": "Close calendar",
+      "explanation": "Type a date in format DD-MM-YYYY or pick from the calendar.",
+      "select": "Select date",
+      "nextMonth": "Next month",
+      "prevMonth":"Previous month"
    }
 }
\ No newline at end of file
diff --git a/src/store/searchResultStore.ts b/src/store/searchResultStore.ts
index 74c1d478..a0dc88bd 100644
--- a/src/store/searchResultStore.ts
+++ b/src/store/searchResultStore.ts
@@ -43,7 +43,11 @@ export const useSearchResultStore = defineStore('searchResults', () => {
 	const filters = ref([] as Array<string>);
 	const channelFilters = ref([] as Array<string>);
 	const categoryFilters = ref([] as Array<string>);
+	const TVFacets = ref([] as Array<string>);
+	const RadioFacets = ref([] as Array<string>);
 	const preliminaryFilter = ref('');
+	const preliminarySearchMethod = ref('');
+	const preliminaryPeriodSearch = ref('date');
 	const showFacets = ref(false);
 	const blockAutocomplete = ref(false);
 	const resultGrid = ref(false);
@@ -114,7 +118,7 @@ export const useSearchResultStore = defineStore('searchResults', () => {
 			if (URLFilters instanceof Array) {
 				URLFilters.forEach((filter) => {
 					if (filter?.split('%3A')[0].includes('origin')) {
-						preliminaryFilter.value = filter;
+						preliminaryFilter.value = decodeURIComponent(filter);
 					} else if (filter?.split('%3A')[0].includes('creator_affiliation_facet')) {
 						const cleanedString = filter.replace(/[()]/g, '');
 						channelFilters.value = cleanedString.split(' OR ');
@@ -128,7 +132,7 @@ export const useSearchResultStore = defineStore('searchResults', () => {
 			} else {
 				const str = URLFilters;
 				if (str.split('%3A')[0].includes('origin')) {
-					filters.value.push(`fq=${str}`);
+					preliminaryFilter.value = decodeURIComponent(str);
 				} else if (str.split('%3A')[0].includes('creator_affiliation_facet')) {
 					const cleanedString = str.replace(/[()]/g, '');
 					channelFilters.value = cleanedString.split(' OR ');
@@ -142,6 +146,16 @@ export const useSearchResultStore = defineStore('searchResults', () => {
 		}
 	};
 
+	const setPreliminarySearchMethodFromURL = (query: string) => {
+		if (query.includes('title:')) {
+			preliminarySearchMethod.value = 'title';
+		} else if (query.includes('description:')) {
+			preliminarySearchMethod.value = 'desc';
+		} else {
+			preliminarySearchMethod.value = 'all';
+		}
+	};
+
 	const setRowCountFromURL = (rows: string | undefined) => {
 		if (rows) {
 			rowCount.value = rows;
@@ -213,6 +227,10 @@ export const useSearchResultStore = defineStore('searchResults', () => {
 		channelFilters.value = [];
 		categoryFilters.value = [];
 		preliminaryFilter.value = '';
+		preliminarySearchMethod.value = 'all';
+		if (currentQuery.value.includes('title:') || currentQuery.value.includes('description:')) {
+			currentQuery.value = currentQuery.value.split(':')[1].replaceAll('"', '');
+		}
 	};
 
 	const resetAutocomplete = () => {
@@ -286,9 +304,6 @@ export const useSearchResultStore = defineStore('searchResults', () => {
 	};
 
 	const getSearchResults = async (query: string) => {
-		if (currentQuery.value === '*:*') {
-			currentQuery.value = '';
-		}
 		setBlockAutocomplete(true);
 		lastSearchQuery.value = query;
 
@@ -321,7 +336,6 @@ export const useSearchResultStore = defineStore('searchResults', () => {
 			presetGenreFilters += `&fq=${preliminaryFilter.value}`;
 			presetChannelFilters += `&fq=${preliminaryFilter.value}`;
 		}
-
 		currentChannelFacetString.value = presetChannelFilters;
 		currentGenreFacetString.value = presetGenreFilters;
 
@@ -378,6 +392,9 @@ export const useSearchResultStore = defineStore('searchResults', () => {
 				loading.value = false;
 			}
 		}
+		if (currentQuery.value === '*:*') {
+			currentQuery.value = '';
+		}
 	};
 
 	const filterQueryLength = computed(() => {
@@ -447,6 +464,7 @@ export const useSearchResultStore = defineStore('searchResults', () => {
 		setFiltersFromURL,
 		setStartFromURL,
 		setCurrentQueryFromURL,
+		setPreliminarySearchMethodFromURL,
 		resetStart,
 		setSortFromURL,
 		resetSort,
@@ -467,5 +485,9 @@ export const useSearchResultStore = defineStore('searchResults', () => {
 		maxPages,
 		queryLimitReached,
 		filterQueryLength,
+		TVFacets,
+		RadioFacets,
+		preliminarySearchMethod,
+		preliminaryPeriodSearch,
 	};
 });
diff --git a/src/types/CalendarTypes.ts b/src/types/CalendarTypes.ts
new file mode 100644
index 00000000..b4a18d6a
--- /dev/null
+++ b/src/types/CalendarTypes.ts
@@ -0,0 +1,8 @@
+export interface CalendarDay {
+	date: Date;
+	label: number;
+	inMonth: boolean;
+	key: string;
+	disabled: boolean;
+	ariaLabel: string;
+}
diff --git a/src/utils/datepicker-utils.ts b/src/utils/datepicker-utils.ts
index aadc4b46..4fd117f5 100644
--- a/src/utils/datepicker-utils.ts
+++ b/src/utils/datepicker-utils.ts
@@ -1,11 +1,58 @@
 import { endYear, startYear } from '@/components/common/timeSearch/TimeSearchInitValues';
 import { Ref } from 'vue';
 
+const updateDate = (
+	timer: ReturnType<typeof setTimeout> | null,
+	isDateValid: Ref<boolean>,
+	inputVar: Ref<Date | undefined>,
+	updateLink: () => void,
+) => {
+	if (timer) {
+		clearTimeout(timer);
+	}
+	if (inputVar.value === undefined || inputVar.value === null) {
+		return;
+	}
+	isDateValid.value = false;
+
+	const constructedDate =
+		inputVar.value.getDate() + '/' + Number(inputVar.value.getMonth() + 1) + '/' + inputVar.value.getFullYear();
+	const dateInput = constructedDate.replace(/[.-]/g, '/');
+	const splitDateInput = dateInput.split('/');
+	if (splitDateInput.length === 3) {
+		const [day, month, yearInitial] = splitDateInput.map(Number);
+		let year = yearInitial;
+		// Validate if day, month, and year are numbers
+		if (!isNaN(day) && !isNaN(month) && !isNaN(year)) {
+			// Months in JavaScript Date are 0-indexed, so subtract 1 from the month
+			if (year.toString().length === 2) {
+				if (year < Number(new Date().getFullYear().toString().slice(-2))) {
+					year = Number(`20${year}`);
+				} else {
+					year = Number(`19${year}`);
+				}
+			}
+			const setDate = new Date(year, month - 1, day);
+			// Ensure the date is valid
+			if (setDate.getDate() === day && setDate.getMonth() === month - 1 && setDate.getFullYear() === year) {
+				// Validate if the date is within the range
+				const minDate = new Date(startYear.value);
+				const maxDate = new Date(endYear.value);
+
+				if (setDate >= minDate && setDate <= maxDate) {
+					updateLink();
+					isDateValid.value = true;
+				}
+			}
+		}
+	}
+};
+
 const updateSelectedDate = (
 	e: Event,
 	timer: ReturnType<typeof setTimeout> | null,
 	isDateValid: Ref<boolean>,
-	inputVar: Ref<Date | null>,
+	inputVar: Ref<Date | undefined>,
 	updateLink: () => void,
 ) => {
 	if (timer) {
@@ -54,4 +101,4 @@ const updateSelectedDate = (
 	}
 };
 
-export { updateSelectedDate };
+export { updateSelectedDate, updateDate };
diff --git a/src/utils/filter-utils.ts b/src/utils/filter-utils.ts
index ccb9ef68..3d92ebdf 100644
--- a/src/utils/filter-utils.ts
+++ b/src/utils/filter-utils.ts
@@ -1,7 +1,8 @@
-import { RouteLocationNormalizedLoaded } from 'vue-router';
+import { Router, RouteLocationNormalizedLoaded } from 'vue-router';
 import { FacetPair } from '@/types/GenericRecordTypes';
 import { SelectorData } from '@/types/TimeSearchTypes';
 import { santizeAndSimplify } from './test-enrichments';
+
 const createTagFilter = (key: string) => {
 	return `${'categories:"' + key + '"'}`;
 };
@@ -179,6 +180,70 @@ const normalizeFq = (fq: string | string[] | undefined): string[] => {
 	return Array.isArray(fq) ? fq : [fq];
 };
 
+export function removeSingleFacetEntry(fqString: string, key: string, valueToRemove: string): string | null {
+	// Match key:"value" (value may be URL encoded in your current strings)
+	const regex = new RegExp(`${key}%3A%22(.*?)%22`, 'g');
+
+	const matches = [...fqString.matchAll(regex)];
+
+	if (matches.length === 0) {
+		return fqString;
+	}
+
+	const remainingValues = matches.map((m) => decodeURIComponent(m[1])).filter((v) => v !== valueToRemove);
+
+	if (remainingValues.length === 0) {
+		return null; // entire fq clause should be removed
+	}
+
+	if (remainingValues.length === 1) {
+		return `${key}%3A%22${encodeURIComponent(remainingValues[0])}%22`;
+	}
+
+	const rebuilt = remainingValues.map((v) => `${key}%3A%22${encodeURIComponent(v)}%22`).join(' OR ');
+
+	return `(${rebuilt})`;
+}
+
+const removeFilterAndSearch = (
+	facet: string,
+	router: Router,
+	route: RouteLocationNormalizedLoaded,
+	selected?: Array<SelectorData>,
+) => {
+	const routeQueries = cloneRouteQuery(route);
+	let fq = normalizeFq(routeQueries.fq);
+	if (facet !== 'genre_facet') {
+		if (!selected) {
+			fq = fq.filter((query) => !query.includes(facet));
+		} else {
+			const removable = selected?.filter((entity: SelectorData) => entity.selected) ?? [];
+			fq = fq
+				.map((query) => {
+					if (!query.includes(facet)) {
+						return query;
+					}
+					let updated: string | null = query;
+					removable.forEach((item) => {
+						if (updated) {
+							updated = removeSingleFacetEntry(updated, facet, item.name);
+						}
+					});
+					return updated;
+				})
+				.filter((q): q is string => Boolean(q));
+		}
+	} else {
+		fq = fq.filter((query) => !query.includes(facet));
+	}
+
+	routeQueries.fq = fq;
+	router.push({
+		name: 'Search',
+		query: routeQueries,
+	});
+};
+
 // A simple method to arrange the facets in an orderly fasion, so they're easier to loop through.
 // Might not be relevant when we know more about the backend structure.
 const simplifyFacets = (facet: Array<string>): FacetPair[] => {
@@ -234,4 +299,5 @@ export {
 	normalizeFq,
 	removeTimeFacetsFromRoute,
 	extendFacetPairToSelectorData,
+	removeFilterAndSearch,
 };
diff --git a/src/utils/focus-trap.ts b/src/utils/focus-trap.ts
new file mode 100644
index 00000000..f49edb1b
--- /dev/null
+++ b/src/utils/focus-trap.ts
@@ -0,0 +1,60 @@
+export const createFocusTrap = (container: HTMLElement, onEscape?: () => void) => {
+	let previousFocus: HTMLElement | null = null;
+
+	//all our selectors for focus elements
+	const focusableSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+	const handleKeydown = (e: KeyboardEvent) => {
+		if (!container) {
+			return;
+		}
+
+		// we close the the entire trap on escape.
+		if (e.key === 'Escape') {
+			onEscape?.();
+			return;
+		}
+		//otherwise, we only care about tap when we change focus.
+		if (e.key !== 'Tab') {
+			return;
+		}
+
+		const focusables = [...container.querySelectorAll<HTMLElement>(focusableSelector)].filter(
+			(el) => el.offsetParent !== null,
+		);
+
+		if (!focusables.length) {
+			return;
+		}
+
+		const first = focusables[0];
+		const last = focusables[focusables.length - 1];
+
+		if (!e.shiftKey && document.activeElement === last) {
+			e.preventDefault();
+			first.focus();
+		}
+
+		if (e.shiftKey && document.activeElement === first) {
+			e.preventDefault();
+			last.focus();
+		}
+	};
+
+	const activate = () => {
+		previousFocus = document.activeElement as HTMLElement;
+		container.addEventListener('keydown', handleKeydown);
+		container.querySelector<HTMLElement>(focusableSelector)?.focus();
+	};
+
+	// When we deactivate, we retore focus to the elemet it was on before we opened.
+	const deactivate = () => {
+		container.removeEventListener('keydown', handleKeydown);
+		previousFocus?.focus();
+	};
+
+	return {
+		activate,
+		deactivate,
+	};
+};
diff --git a/src/utils/record-utils.ts b/src/utils/record-utils.ts
index 962f7389..e96b8374 100644
--- a/src/utils/record-utils.ts
+++ b/src/utils/record-utils.ts
@@ -8,11 +8,73 @@ import p5 from '@/assets/images/audio-thumbnails/p5.jpg';
 import p6 from '@/assets/images/audio-thumbnails/p6.jpg';
 import p8 from '@/assets/images/audio-thumbnails/p8.jpg';
 
+import fdr from '@/assets/images/filter-thumbnails/dr.jpg';
+import fdr1 from '@/assets/images/filter-thumbnails/dr1.jpg';
+import fdr2 from '@/assets/images/filter-thumbnails/dr2.jpg';
+import fdrk from '@/assets/images/filter-thumbnails/drk.jpg';
+import fdrultra from '@/assets/images/filter-thumbnails/drultra.jpg';
+import fdruppdate from '@/assets/images/filter-thumbnails/drupdate.jpg';
+import fp1 from '@/assets/images/filter-thumbnails/p1.jpg';
+import fp2 from '@/assets/images/filter-thumbnails/p2.jpg';
+import fp3 from '@/assets/images/filter-thumbnails/p3.jpg';
+import fp4 from '@/assets/images/filter-thumbnails/p4.jpg';
+import fp5 from '@/assets/images/filter-thumbnails/p5.jpg';
+import fp6 from '@/assets/images/filter-thumbnails/p6.jpg';
+import fp8 from '@/assets/images/filter-thumbnails/p8.jpg';
+import frama from '@/assets/images/filter-thumbnails/ramasjang-tv.jpg';
+
 const getEntryId = (recordData: BroadcastRecordType) => {
 	const kalturaIdObj = recordData.identifier.find((obj) => obj.PropertyID === 'KalturaID');
 	return kalturaIdObj ? kalturaIdObj.value : '';
 };
 
+const getFilterThumbnail = (channel: string) => {
+	channel = channel.toLowerCase();
+	switch (true) {
+		case channel.includes('dr 1'):
+			return fdr1;
+
+		case channel.includes('dr 2'):
+			return fdr2;
+
+		case channel.includes('dr update'):
+			return fdruppdate;
+
+		case channel.includes('dr ultra'):
+			return fdrultra;
+
+		case channel.includes('dr k'):
+			return fdrk;
+
+		case channel.includes('ramasjang'):
+			return frama;
+
+		case channel.includes('p1'):
+			return fp1;
+
+		case channel.includes('p2'):
+			return fp2;
+
+		case channel.includes('p3'):
+			return fp3;
+
+		case channel.includes('p4'):
+			return fp4;
+
+		case channel.includes('p5'):
+			return fp5;
+
+		case channel.includes('p6'):
+			return fp6;
+
+		case channel.includes('p8'):
+			return fp8;
+
+		default:
+			return fdr;
+	}
+};
+
 const getThumbnailPicture = (channel: string) => {
 	channel = channel.toLowerCase();
 	switch (true) {
@@ -42,4 +104,4 @@ const getThumbnailPicture = (channel: string) => {
 	}
 };
 
-export { getEntryId, getThumbnailPicture };
+export { getEntryId, getThumbnailPicture, getFilterThumbnail };
diff --git a/src/utils/svg-graph.ts b/src/utils/svg-graph.ts
index 731ba01d..7a40ae7a 100644
--- a/src/utils/svg-graph.ts
+++ b/src/utils/svg-graph.ts
@@ -8,10 +8,10 @@ function createSVGCurvedLine(points: pointItem[]) {
 	svg.setAttribute('viewBox', '0 0 100 100'); // Use a square viewBox for simplicity
 	svg.setAttribute('preserveAspectRatio', 'none');
 	const path = document.createElementNS(svgns, 'path');
-	path.setAttribute('fill', '#caf0fe'); // No fill to avoid closing the path
-	path.setAttribute('stroke', '#F7AE3B4D');
-	path.setAttribute('stroke-width', '1');
-	path.setAttribute('opacity', '1');
+	path.setAttribute('fill', '#002e70'); // No fill to avoid closing the path
+	path.setAttribute('stroke', '#001c44');
+	path.setAttribute('stroke-width', '2');
+	path.setAttribute('fill-opacity', '1');
 	path.setAttribute('vector-effect', 'non-scaling-stroke');
 
 	// Normalize y coordinates to fit within [0, 100] range
@@ -50,6 +50,39 @@ function createSVGCurvedLine(points: pointItem[]) {
 	path.setAttribute('d', d);
 
 	svg.appendChild(path);
+
+	const defs = document.createElementNS(svgns, 'defs');
+	const clipPath = document.createElementNS(svgns, 'clipPath');
+	const clipId = `clip-${Math.random().toString(36).slice(2)}`;
+
+	clipPath.setAttribute('id', clipId);
+
+	const clipShape = path.cloneNode(true) as SVGElement;
+	clipShape.removeAttribute('fill');
+	clipShape.removeAttribute('stroke');
+
+	clipPath.appendChild(clipShape);
+	defs.appendChild(clipPath);
+	svg.appendChild(defs);
+
+	for (let i = 0; i < normalizedPoints.length; i += 1) {
+		const p = normalizedPoints[i];
+
+		const line = document.createElementNS(svgns, 'line');
+
+		line.setAttribute('x1', String(p.x));
+		line.setAttribute('y1', '100');
+		line.setAttribute('x2', String(p.x));
+		line.setAttribute('y2', String(Number(p.y - 10)));
+		line.setAttribute('class', 'line-class');
+		line.setAttribute('stroke', '#ffffff27');
+		line.setAttribute('stroke-width', '1');
+		line.setAttribute('vector-effect', 'non-scaling-stroke');
+		line.setAttribute('clip-path', `url(#${clipId})`);
+
+		svg.appendChild(line);
+	}
+
 	return svg;
 }
 
diff --git a/src/views/Search.vue b/src/views/Search.vue
index c41da915..8a33518d 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -227,9 +227,10 @@ export default defineComponent({
 							}
 						}
 					}
+					searchResultStore.setPreliminarySearchMethodFromURL(route.query.q as string);
 					searchResultStore.setFiltersFromURL(routeFacetQueries as string[]);
 					timeSearchStore.setFiltersFromUrl(routeFacetQueries as string[]);
-					searchResultStore.getSearchResults(route.query.q as string);
+					searchResultStore.getSearchResults(searchResultStore.currentQuery as string);
 					setCurrentTitleForPage();
 				} else if (route.query.q === undefined) {
 					searchResultStore.resetSearch();
@@ -254,12 +255,13 @@ export default defineComponent({
 						searchResultStore.queryLimitReached = false;
 					}
 					if (!queryLimitReached.value) {
+						searchResultStore.setPreliminarySearchMethodFromURL(route.query.q as string);
 						searchResultStore.setFiltersFromURL(route.query.fq as string[]);
 						searchResultStore.setSortFromURL(route.query.sort as string);
 						searchResultStore.setCurrentQueryFromURL(route.query.q as string);
 						searchResultStore.setRowCountFromURL(route.query.rows as string);
 						timeSearchStore.setFiltersFromUrl(route.query.fq as string[]);
-						searchResultStore.getSearchResults(route.query.q as string);
+						searchResultStore.getSearchResults(searchResultStore.currentQuery as string);
 
 						setCurrentTitleForPage();
 					}