From 8e294e44b82ee46937567ceccc8453faa0fc8cd9 Mon Sep 17 00:00:00 2001
From: lillijo <lillijoppien@gmail.com>
Date: Mon, 1 Jul 2024 18:39:58 +0200
Subject: [PATCH] formatting

---
 .../components/filters/filters.server.tsx     | 25 +++--
 .../filters/filtersGroups.server.tsx          | 23 +++--
 .../(landing)/components/landing.server.tsx   |  4 +-
 .../(landing)/components/project/writing.tsx  |  2 +-
 .../components/content/header.server.tsx      |  2 +-
 .../content/project/audioPlayer.server.tsx    |  4 +-
 .../components/content/projects.server.tsx    |  4 +-
 .../components/content/toggleMute.client.tsx  |  2 +-
 .../components/sidebar/sidebar.server.tsx     |  2 +-
 .../info/components/content/about.server.tsx  | 19 ++--
 .../components/content/content.server.tsx     |  6 +-
 .../components/content/info/info.server.tsx   |  4 +-
 .../content/info/item/item.client.tsx         | 18 ++--
 .../content/info/item/title.client.tsx        |  9 +-
 .../info/components/headers/header.server.tsx | 13 ++-
 .../components/headers/headers.server.tsx     |  4 +-
 src/app/[locale]/loading.tsx                  |  8 +-
 .../components/map/index.server.tsx           |  2 +-
 .../components/map/useMapFunctions.ts         | 13 ++-
 .../[[...slug]]/components/place.server.tsx   |  2 +-
 .../[[...slug]]/components/program.server.tsx |  4 +-
 .../[locale]/locations/[[...slug]]/page.tsx   |  6 +-
 .../filterGroups/filterGroup/filterGroup.tsx  | 19 ++--
 .../filterGroups/filterGroup/filters.tsx      |  2 +-
 .../filterGroups/filterGroup/header.tsx       | 26 ++---
 .../components/filterGroups/filterGroups.tsx  |  3 +-
 src/app/[locale]/program/@sidebar/default.tsx |  2 +-
 .../components/projects/container.server.tsx  |  2 +-
 .../components/sidebarToggle.client.tsx       | 56 ++++++-----
 src/app/[locale]/program/page.tsx             |  2 +-
 .../project/[id]/components/audioplayer.tsx   |  7 +-
 .../[id]/components/content/element.tsx       |  2 +-
 src/app/[locale]/saved/page.tsx               |  2 +-
 src/app/[locale]/saved/saved.client.tsx       |  2 +-
 .../[[...slug]]/components/container.tsx      |  2 +-
 .../timeline/[[...slug]]/components/days.tsx  |  4 +-
 .../components/eventLocation.server.tsx       |  2 +-
 .../timeline/[[...slug]]/components/scale.tsx |  2 +-
 .../[[...slug]]/components/scrollTo.tsx       |  4 +-
 .../components/timetable.server.tsx           |  2 +-
 src/components/containers/border.tsx          |  2 +-
 src/components/filterBar/index.tsx            | 30 +++---
 src/components/filterTag.tsx                  |  6 +-
 src/components/filters/filterGroup.tsx        |  2 +-
 .../header/navigation/colorSchemeSwitcher.tsx |  2 +-
 .../header/navigation/desktop/desktop.tsx     | 32 +++----
 .../header/navigation/localeSwitcher.tsx      |  2 +-
 src/components/image.tsx                      |  5 +-
 src/components/jumpToTop.tsx                  | 16 ++--
 src/components/modal/modal.tsx                |  2 +-
 src/components/navigationLink.tsx             |  6 +-
 src/components/saveButton.client.tsx          |  9 +-
 src/components/smoothButton.tsx               | 96 ++++++++++++-------
 src/styles/app.css                            | 15 ++-
 54 files changed, 311 insertions(+), 231 deletions(-)

diff --git a/src/app/[locale]/(landing)/components/filters/filters.server.tsx b/src/app/[locale]/(landing)/components/filters/filters.server.tsx
index 91cb794..a525818 100644
--- a/src/app/[locale]/(landing)/components/filters/filters.server.tsx
+++ b/src/app/[locale]/(landing)/components/filters/filters.server.tsx
@@ -1,24 +1,21 @@
-import {Suspense} from 'react';
-import LandingFiltersGroups from "@/app/(landing)/components/filters/filtersGroups.server";
-import {ReactNodeProps} from "@/types/types";
+import { Suspense } from 'react';
+import LandingFiltersGroups from '@/app/(landing)/components/filters/filtersGroups.server';
+import { ReactNodeProps } from '@/types/types';
 
 export default async function LandingFilters() {
   return (
     <LandingFiltersContainer>
-        <Suspense>
-          <LandingFiltersGroups />
-        </Suspense>
+      <Suspense>
+        <LandingFiltersGroups />
+      </Suspense>
     </LandingFiltersContainer>
   );
 }
 
-
-function LandingFiltersContainer({children}: ReactNodeProps) {
+function LandingFiltersContainer({ children }: ReactNodeProps) {
   return (
-      <div className="relative bg-secondary">
-        <div className="w-full grid grid-cols-3">
-          {children}
-        </div>
-      </div>
+    <div className="relative bg-secondary">
+      <div className="grid w-full grid-cols-3">{children}</div>
+    </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/[locale]/(landing)/components/filters/filtersGroups.server.tsx b/src/app/[locale]/(landing)/components/filters/filtersGroups.server.tsx
index 6d4d6ec..f52b726 100644
--- a/src/app/[locale]/(landing)/components/filters/filtersGroups.server.tsx
+++ b/src/app/[locale]/(landing)/components/filters/filtersGroups.server.tsx
@@ -4,17 +4,16 @@ import { getGraphQLFilters } from '@/api/graphql/filters';
 export default async function LandingFiltersGroups() {
   const filters = await getGraphQLFilters();
   return (
-      <>
-        {Object.entries(filters).map(([key, value], index) => (
-                <FilterGroup
-                    key={key}
-                    title={key as 'faculties' | 'formats' | 'languages'}
-                    filters={value}
-                    hasLeftBorder={index === 0}
-                    hasRightBorder={index === Object.keys(filters).length - 1}
-                />
-            )
-        )}
-      </>
+    <>
+      {Object.entries(filters).map(([key, value], index) => (
+        <FilterGroup
+          key={key}
+          title={key as 'faculties' | 'formats' | 'languages'}
+          filters={value}
+          hasLeftBorder={index === 0}
+          hasRightBorder={index === Object.keys(filters).length - 1}
+        />
+      ))}
+    </>
   );
 }
diff --git a/src/app/[locale]/(landing)/components/landing.server.tsx b/src/app/[locale]/(landing)/components/landing.server.tsx
index c65759e..c1624b3 100644
--- a/src/app/[locale]/(landing)/components/landing.server.tsx
+++ b/src/app/[locale]/(landing)/components/landing.server.tsx
@@ -15,7 +15,7 @@ export default function Landing({ searchParams }: LandingProps) {
     extractProjectLanguageSearchParam(searchParams);
   return (
     <LandingContainer>
-      <div className="relative grow-[1] h-full border-x-border rounded-border">
+      <div className="relative h-full grow-[1] rounded-border border-x-border">
         <LandingProjectWriting
           languageSearchParam={projectLanguageSearchParam}
         />
@@ -28,7 +28,7 @@ export default function Landing({ searchParams }: LandingProps) {
 
 function LandingContainer({ children }: { children: ReactNode }) {
   return (
-    <main className="flex flex-col max-h-content min-h-content h-content bg-primary overflow-hidden">
+    <main className="flex h-content max-h-content min-h-content flex-col overflow-hidden bg-primary">
       {children}
     </main>
   );
diff --git a/src/app/[locale]/(landing)/components/project/writing.tsx b/src/app/[locale]/(landing)/components/project/writing.tsx
index 034f8fc..33611f4 100644
--- a/src/app/[locale]/(landing)/components/project/writing.tsx
+++ b/src/app/[locale]/(landing)/components/project/writing.tsx
@@ -21,7 +21,7 @@ export default function LandingProjectWriting({
 }
 function LandingProjectWritingContainer({ children }: { children: ReactNode }) {
   return (
-    <div className="h-full flex items-center justify-center px-[9vw] bg-secondary">
+    <div className="flex h-full items-center justify-center bg-secondary px-[9vw]">
       {children}
     </div>
   );
diff --git a/src/app/[locale]/design/components/content/header.server.tsx b/src/app/[locale]/design/components/content/header.server.tsx
index d54cabd..7980344 100644
--- a/src/app/[locale]/design/components/content/header.server.tsx
+++ b/src/app/[locale]/design/components/content/header.server.tsx
@@ -12,7 +12,7 @@ export default function DesignContentHeader() {
 function DesignContentHeaderContainer({ children }: HtmlProps) {
   return (
     <div className="fixed  hidden h-header max-h-header min-h-header w-[80vw] bg-primary md:flex">
-      <div className="border-b-xs border-r-xs flex h-full w-1/2 items-end justify-stretch rounded-border border-border border-t-0 border-primary bg-secondary px-[1.5rem] py-[0.5rem]">
+      <div className="flex h-full w-1/2 items-end justify-stretch rounded-border border-border border-b-xs border-r-xs border-t-0 border-primary bg-secondary px-[1.5rem] py-[0.5rem]">
         <h1 className="text-xxs text-grey">{children}</h1>
       </div>
       <ToggleMute />
diff --git a/src/app/[locale]/design/components/content/project/audioPlayer.server.tsx b/src/app/[locale]/design/components/content/project/audioPlayer.server.tsx
index 038381a..f90f2f3 100644
--- a/src/app/[locale]/design/components/content/project/audioPlayer.server.tsx
+++ b/src/app/[locale]/design/components/content/project/audioPlayer.server.tsx
@@ -1,7 +1,9 @@
 import { HtmlProps } from '@/components/html/html';
 import AudioPlayer from '@/components/audioPlayer';
 
-export default function DesignContentProjectAudioPlayer({ languageSearchParam }) {
+export default function DesignContentProjectAudioPlayer({
+  languageSearchParam,
+}) {
   return (
     <DesignContentProjectAudioContainer>
       <AudioPlayer
diff --git a/src/app/[locale]/design/components/content/projects.server.tsx b/src/app/[locale]/design/components/content/projects.server.tsx
index d516240..576dd4b 100644
--- a/src/app/[locale]/design/components/content/projects.server.tsx
+++ b/src/app/[locale]/design/components/content/projects.server.tsx
@@ -8,7 +8,7 @@ export default function DesignContentProjects() {
       {Object.values(projects).map((project) => (
         <DesignContentProject key={project.artist} project={project} />
       ))}
-      <div className="col-span-2 hidden h-full w-full rounded-border bg-secondary md:inline-block" />
+      <div className="col-span-2 hidden h-full w-full rounded-t-border rounded-bl-border bg-secondary md:inline-block" />
     </DesignContentProjectsContainer>
   );
 }
@@ -17,7 +17,7 @@ function DesignContentProjectsContainer({ children }: HtmlProps) {
   return (
     <div>
       <div className="hidden h-content-header max-h-content-header min-h-content-header md:block" />
-      <div className="md:border-t-xs md:border-r-xs col-span-4 grid h-content max-h-content min-h-content grid-cols-1 gap-border overflow-y-auto border-border border-y-0 bg-primary md:h-content-body md:max-h-content-body md:min-h-content-body md:grid-cols-4">
+      <div className="scrollable col-span-4 grid h-content max-h-content min-h-content grid-cols-1 gap-border overflow-y-auto border-border border-y-0  md:h-content-body md:max-h-content-body md:min-h-content-body md:grid-cols-4 md:border-r-xs md:border-t-xs">
         {children}
       </div>
     </div>
diff --git a/src/app/[locale]/design/components/content/toggleMute.client.tsx b/src/app/[locale]/design/components/content/toggleMute.client.tsx
index 7ed361f..7a758a4 100644
--- a/src/app/[locale]/design/components/content/toggleMute.client.tsx
+++ b/src/app/[locale]/design/components/content/toggleMute.client.tsx
@@ -30,7 +30,7 @@ export default function ToggleMute() {
 export function MuteButton({ handleClick, children }) {
   return (
     <button
-      className="border-x-xs flex h-full w-full items-center justify-around rounded-md border-primary bg-secondary hover:bg-highlight hover:fill-black hover:text-black"
+      className="flex h-full w-full items-center justify-around rounded-md border-xs border-t-0 border-primary bg-secondary hover:bg-highlight hover:fill-black hover:text-black"
       onClick={handleClick}
     >
       {children}
diff --git a/src/app/[locale]/design/components/sidebar/sidebar.server.tsx b/src/app/[locale]/design/components/sidebar/sidebar.server.tsx
index 1d4b6bc..7294534 100644
--- a/src/app/[locale]/design/components/sidebar/sidebar.server.tsx
+++ b/src/app/[locale]/design/components/sidebar/sidebar.server.tsx
@@ -14,7 +14,7 @@ export default function DesignSidebar() {
 function DesignSidebarContainer({ children }: HtmlProps) {
   return (
     <div className="col-span-2 bg-primary md:col-span-1">
-      <div className="border-l-xs fixed h-content max-h-content min-h-content w-[66.666666%] overflow-y-scroll border-r-border bg-primary md:w-[20vw] md:rounded-border md:bg-secondary">
+      <div className="fixed h-content max-h-content min-h-content w-2/3 overflow-y-scroll border-l-xs border-r-border bg-primary md:w-[20vw] md:rounded-t-border md:bg-secondary">
         {children}
       </div>
     </div>
diff --git a/src/app/[locale]/info/components/content/about.server.tsx b/src/app/[locale]/info/components/content/about.server.tsx
index 8c844b0..335c88a 100644
--- a/src/app/[locale]/info/components/content/about.server.tsx
+++ b/src/app/[locale]/info/components/content/about.server.tsx
@@ -1,23 +1,30 @@
 import { HtmlProps } from '@/components/html/html';
 import { ResponsiveMultiLineText } from '@/components/texts/multiLine';
 import { infoAbout } from '@/data';
-import {ResponsiveH1} from "@/components/html/h1";
-import {useTranslations} from "next-intl";
+import { ResponsiveH1 } from '@/components/html/h1';
+import { useTranslations } from 'next-intl';
 
 export default function InfoContentAbout() {
-    const t = useTranslations('Info')
+  const t = useTranslations('Info');
   return (
     <InfoContentAboutContainer>
-      <ResponsiveH1 className="md:hidden text-grey mb-gutter-xs" textSize="xs">{t('about')}</ResponsiveH1>
+      <ResponsiveH1 className="mb-gutter-xs text-grey md:hidden" textSize="xs">
+        {t('about')}
+      </ResponsiveH1>
       <ResponsiveMultiLineText text={infoAbout.en} textSize="m" />
-      <ResponsiveH1 className="md:hidden text-grey mt-auto pt-gutter-lg pb-gutter-xs" textSize="xs">{t('information')}</ResponsiveH1>
+      <ResponsiveH1
+        className="mt-auto pb-gutter-xs pt-gutter-lg text-grey md:hidden"
+        textSize="xs"
+      >
+        {t('information')}
+      </ResponsiveH1>
     </InfoContentAboutContainer>
   );
 }
 
 function InfoContentAboutContainer({ children }: HtmlProps) {
   return (
-    <div className="md:col-span-2 h-fit md:h-content-body md:max-h-content-body md:min-h-content-body md:overflow-y-scroll rounded-b-border rounded-tl-border md:rounded-border bg-secondary pt-gutter-lg px-gutter-m md:py-gutter-lg md:px-gutter-m">
+    <div className="h-fit rounded-b-border rounded-tl-border bg-secondary px-gutter-m pt-gutter-lg md:col-span-2 md:h-content-body md:max-h-content-body md:min-h-content-body md:overflow-y-scroll md:rounded-border md:px-gutter-m md:py-gutter-lg">
       {children}
     </div>
   );
diff --git a/src/app/[locale]/info/components/content/content.server.tsx b/src/app/[locale]/info/components/content/content.server.tsx
index 0da95ed..48a5d37 100644
--- a/src/app/[locale]/info/components/content/content.server.tsx
+++ b/src/app/[locale]/info/components/content/content.server.tsx
@@ -5,15 +5,15 @@ import InfoContentAbout from '@/app/info/components/content/about.server';
 export default function InfoContent() {
   return (
     <InfoContentContainer>
-        <InfoContentAbout />
-        <InfoContentInfo />
+      <InfoContentAbout />
+      <InfoContentInfo />
     </InfoContentContainer>
   );
 }
 
 function InfoContentContainer({ children }: HtmlProps) {
   return (
-    <div className="h-content md:h-content-body max-h-content md:max-h-content-body min-h-content md:min-h-content-body border-x-border grid grid-cols-1 wrap md:grid-cols-5 gap-border overflow-y-scroll md:overflow-hidden">
+    <div className="wrap grid h-content max-h-content min-h-content grid-cols-1 gap-border overflow-y-scroll border-x-border md:h-content-body md:max-h-content-body md:min-h-content-body md:grid-cols-5 md:overflow-hidden">
       {children}
     </div>
   );
diff --git a/src/app/[locale]/info/components/content/info/info.server.tsx b/src/app/[locale]/info/components/content/info/info.server.tsx
index 444b0e5..9329cff 100644
--- a/src/app/[locale]/info/components/content/info/info.server.tsx
+++ b/src/app/[locale]/info/components/content/info/info.server.tsx
@@ -33,14 +33,14 @@ export default async function InfoContentInfo() {
       {infoItems.map((item) => (
         <InfoContentInfoItem key={item.id} item={item} />
       ))}
-      <div className="hidden md:block grow-[1] rounded-md bg-white"></div>
+      <div className="hidden grow-[1] rounded-md bg-white md:block"></div>
     </InfoContentInfoContainer>
   );
 }
 
 function InfoContentInfoContainer({ children }: HtmlProps) {
   return (
-    <div className="md:col-span-3 flex md:h-content-body md:max-h-content-body md:min-h-content-body flex-col gap-border md:overflow-y-scroll">
+    <div className="flex flex-col gap-border md:col-span-3 md:h-content-body md:max-h-content-body md:min-h-content-body md:overflow-y-scroll">
       {children}
     </div>
   );
diff --git a/src/app/[locale]/info/components/content/info/item/item.client.tsx b/src/app/[locale]/info/components/content/info/item/item.client.tsx
index c3e2fa1..a188cc8 100644
--- a/src/app/[locale]/info/components/content/info/item/item.client.tsx
+++ b/src/app/[locale]/info/components/content/info/item/item.client.tsx
@@ -22,20 +22,20 @@ export default function InfoContentInfoItem({
 
   return (
     <InfoContentInfoItemContainer onClick={onClick}>
-      <InfoContentInfoItemTitle item={item}/>
-        {isOpen && (
-            <ResponsiveMultiLineText
-                className="pb-[40px] pt-[14px] text-black [&>a]:underline"
-                text={item.text}
-                textSize="sm"
-            />
-        )}
+      <InfoContentInfoItemTitle item={item} />
+      {isOpen && (
+        <ResponsiveMultiLineText
+          className="pb-[40px] pt-[14px] text-black [&>a]:underline"
+          text={item.text}
+          textSize="sm"
+        />
+      )}
     </InfoContentInfoItemContainer>
   );
 }
 
 function InfoContentInfoItemContainer({
-                                        onClick,
+  onClick,
   children,
 }: HtmlProps & {
   onClick: (_: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
diff --git a/src/app/[locale]/info/components/content/info/item/title.client.tsx b/src/app/[locale]/info/components/content/info/item/title.client.tsx
index f96d369..7dce3c7 100644
--- a/src/app/[locale]/info/components/content/info/item/title.client.tsx
+++ b/src/app/[locale]/info/components/content/info/item/title.client.tsx
@@ -4,7 +4,9 @@ import { cn } from '@/lib/utils';
 import { HtmlProps } from '@/components/html/html';
 import { ResponsiveH5 } from '@/components/html/h5';
 
-export default function InfoContentInfoItemTitle({item}: InfoContentInfoItemProps) {
+export default function InfoContentInfoItemTitle({
+  item,
+}: InfoContentInfoItemProps) {
   return (
     <InfoContentInfoItemTitleContainer>
       {item.title}
@@ -14,7 +16,10 @@ export default function InfoContentInfoItemTitle({item}: InfoContentInfoItemProp
 
 function InfoContentInfoItemTitleContainer({ className, children }: HtmlProps) {
   return (
-    <ResponsiveH5 className={cn('h-content-header flex items-center', className)} textSize="m">
+    <ResponsiveH5
+      className={cn('flex h-content-header items-center', className)}
+      textSize="m"
+    >
       {children}
     </ResponsiveH5>
   );
diff --git a/src/app/[locale]/info/components/headers/header.server.tsx b/src/app/[locale]/info/components/headers/header.server.tsx
index 518f025..e1df84d 100644
--- a/src/app/[locale]/info/components/headers/header.server.tsx
+++ b/src/app/[locale]/info/components/headers/header.server.tsx
@@ -1,17 +1,22 @@
 import { ResponsiveH1 } from '@/components/html/h1';
 import { HtmlProps } from '@/components/html/html';
 import { cn } from '@/lib/utils';
-import {useTranslations} from "next-intl";
+import { useTranslations } from 'next-intl';
 
 export type InfoHeaderProps = {
   className?: string;
   translation: 'about' | 'information';
 };
 
-export default function InfoHeader({ className, translation }: InfoHeaderProps) {
+export default function InfoHeader({
+  className,
+  translation,
+}: InfoHeaderProps) {
   const t = useTranslations('Info');
   return (
-    <InfoHeaderContainer className={className}>{t(translation)}</InfoHeaderContainer>
+    <InfoHeaderContainer className={className}>
+      {t(translation)}
+    </InfoHeaderContainer>
   );
 }
 
@@ -19,7 +24,7 @@ function InfoHeaderContainer({ className, children }: HtmlProps) {
   return (
     <ResponsiveH1
       className={cn(
-        'px-gutter-m pb-gutter-xs col-span-2 flex items-end text-grey',
+        'col-span-2 flex items-end px-gutter-m pb-gutter-xs text-grey',
         className,
       )}
       textSize="xs"
diff --git a/src/app/[locale]/info/components/headers/headers.server.tsx b/src/app/[locale]/info/components/headers/headers.server.tsx
index a6ae748..dc5f221 100644
--- a/src/app/[locale]/info/components/headers/headers.server.tsx
+++ b/src/app/[locale]/info/components/headers/headers.server.tsx
@@ -4,7 +4,7 @@ import { cn } from '@/lib/utils';
 import { HtmlProps } from '@/components/html/html';
 
 const indexToColSpanClassName: string[] = ['col-span-2', 'col-span-3'];
-const translations: ('about' | 'information')[] = ['about', 'information']
+const translations: ('about' | 'information')[] = ['about', 'information'];
 
 export default function InfoHeaders() {
   return (
@@ -24,7 +24,7 @@ function InfoHeadersContainer({ children }: HtmlProps) {
   return (
     <div
       className={cn(
-        'hidden md:grid h-content-header max-h-content-header border-x-border border-b-border rounded-border min-h-content-header grid-cols-5 bg-secondary text-primary',
+        'hidden h-content-header max-h-content-header min-h-content-header grid-cols-5 rounded-border border-x-border border-b-border bg-secondary text-primary md:grid',
         sizeToHeightClassName['md'],
       )}
     >
diff --git a/src/app/[locale]/loading.tsx b/src/app/[locale]/loading.tsx
index 3ee8efd..6a232b1 100644
--- a/src/app/[locale]/loading.tsx
+++ b/src/app/[locale]/loading.tsx
@@ -1,9 +1,9 @@
 export default function Loading() {
   return (
-    <main className="bg-primary min-h-content h-content w-screen">
-        <div className="bg-secondary mx-border rounded h-full flex justify-center items-center">
-            <p>Loading...</p>
-        </div>
+    <main className="h-content min-h-content w-screen bg-primary">
+      <div className="mx-border flex h-full items-center justify-center rounded bg-secondary">
+        <p>Loading...</p>
+      </div>
     </main>
   );
 }
diff --git a/src/app/[locale]/locations/[[...slug]]/components/map/index.server.tsx b/src/app/[locale]/locations/[[...slug]]/components/map/index.server.tsx
index c796ed3..8e5644c 100644
--- a/src/app/[locale]/locations/[[...slug]]/components/map/index.server.tsx
+++ b/src/app/[locale]/locations/[[...slug]]/components/map/index.server.tsx
@@ -4,7 +4,7 @@ import MapProviderContainer from './container';
 import { Suspense } from 'react';
 import { LocationItem } from '@/types/types';
 
-export const revalidate = 0;
+export const revalidate = 100;
 export default async function LocationsMap({
   location,
 }: {
diff --git a/src/app/[locale]/locations/[[...slug]]/components/map/useMapFunctions.ts b/src/app/[locale]/locations/[[...slug]]/components/map/useMapFunctions.ts
index 4bc1787..5af7eb5 100644
--- a/src/app/[locale]/locations/[[...slug]]/components/map/useMapFunctions.ts
+++ b/src/app/[locale]/locations/[[...slug]]/components/map/useMapFunctions.ts
@@ -1,10 +1,12 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useCallback, useMemo, useEffect, useState, RefObject } from 'react';
 import { useMap } from 'react-map-gl/maplibre';
 import { Context } from '@/types/graphql';
 import { MapLayerMouseEvent } from 'maplibre-gl';
 import { useDebounce } from '@/lib/useDebounce';
 import { useRouter } from '@/navigation';
-import bbox from '@turf/bbox';
+import { bbox } from '@turf/bbox';
+import { Building } from '@/types/types';
 
 const MOBILE_WIDTH = 1000;
 
@@ -12,7 +14,7 @@ type MarkerType = { [index: string]: { scale: number; size: number } };
 
 const useMapFunctions = (
   place: string | null,
-  locations: GeoJSON.FeatureCollection,
+  locations: GeoJSON.FeatureCollection<GeoJSON.Point, Building>,
   size: { width: any; height?: number },
 ) => {
   const { rundgangMap } = useMap();
@@ -53,7 +55,7 @@ const useMapFunctions = (
   }, [locations, debouncedZoom, rundgangMap]);
 
   const focusMap = useCallback(
-    (targetBoundingBox) => {
+    (targetBoundingBox: GeoJSON.Feature<GeoJSON.Point, Building>) => {
       if (rundgangMap) {
         let padding = {
           right: size?.width <= MOBILE_WIDTH ? 0 : 1,
@@ -62,7 +64,10 @@ const useMapFunctions = (
           bottom: 0,
         };
         let maxZoom = 11.4;
-        let coords = [13.45, 52.5, 13.45, 52.5];
+        let coords = bbox({
+          type: 'Point',
+          coordinates: [13.45, 52.5],
+        });
 
         if (targetBoundingBox) {
           padding.right =
diff --git a/src/app/[locale]/locations/[[...slug]]/components/place.server.tsx b/src/app/[locale]/locations/[[...slug]]/components/place.server.tsx
index 35e5963..eb0ce21 100644
--- a/src/app/[locale]/locations/[[...slug]]/components/place.server.tsx
+++ b/src/app/[locale]/locations/[[...slug]]/components/place.server.tsx
@@ -11,7 +11,7 @@ type PlaceProps = {
 
 export default async function Place({ location }: PlaceProps) {
   return (
-    <div className="pointer-events-none relative z-50 col-span-3 h-fit w-full p-border pr-0 sm:h-content sm:overflow-y-scroll sm:overscroll-contain">
+    <div className="pointer-events-none relative z-50 col-span-3 h-fit w-full p-border pr-0 sm:h-content sm:overflow-y-scroll sm:overscroll-y-contain">
       <div className="bg-transparent pointer-events-none hidden h-[50dvh] sm:block"></div>
       <div className="pointer-events-auto relative max-h-fit min-h-[400px] w-full items-start rounded-md border-t-border border-primary bg-secondary sm:grid sm:min-h-place sm:grid-cols-2">
         <Subnavigation location={location} />
diff --git a/src/app/[locale]/locations/[[...slug]]/components/program.server.tsx b/src/app/[locale]/locations/[[...slug]]/components/program.server.tsx
index 9d15836..17547bf 100644
--- a/src/app/[locale]/locations/[[...slug]]/components/program.server.tsx
+++ b/src/app/[locale]/locations/[[...slug]]/components/program.server.tsx
@@ -8,7 +8,7 @@ export type ProgramPageProps = {
   place: string;
 };
 
-export const revalidate = 0;
+export const revalidate = 100;
 
 export default async function ProgramPage({ place }: ProgramPageProps) {
   const items = await getFilteredGraphQLLocationItems({}, place);
@@ -33,7 +33,7 @@ export type ProgramProps = {
 
 function ProgramContainer({ children }: ReactNodeProps) {
   return (
-    <div className="-ml-xs z-50 h-content max-h-content min-h-content bg-primary md:col-span-2 md:overflow-y-scroll">
+    <div className="z-50 -ml-xs h-content max-h-content min-h-content bg-primary md:col-span-2 md:overflow-y-scroll">
       <div className="col-span-1 grid max-h-fit min-h-content w-full columns-1 items-start justify-start gap-border bg-primary px-border md:grid-cols-2">
         {children}
       </div>
diff --git a/src/app/[locale]/locations/[[...slug]]/page.tsx b/src/app/[locale]/locations/[[...slug]]/page.tsx
index 8e674cd..076aa12 100644
--- a/src/app/[locale]/locations/[[...slug]]/page.tsx
+++ b/src/app/[locale]/locations/[[...slug]]/page.tsx
@@ -9,10 +9,12 @@ type LocationsPageProps = {
 };
 
 export default async function LocationsPage(props: LocationsPageProps) {
-  const place = props.params.slug ? props.params.slug[0] : null;
+  const place = props.params.slug
+    ? decodeURIComponent(props.params.slug[0])
+    : null;
   const projectId =
     props.params.slug && props.params.slug?.length > 1
-      ? props.params.slug[1]
+      ? decodeURIComponent(props.params.slug[1])
       : null;
   const location = await getLocation(place);
 
diff --git a/src/app/[locale]/program/@sidebar/components/filterGroups/filterGroup/filterGroup.tsx b/src/app/[locale]/program/@sidebar/components/filterGroups/filterGroup/filterGroup.tsx
index 724f1df..dcfc111 100644
--- a/src/app/[locale]/program/@sidebar/components/filterGroups/filterGroup/filterGroup.tsx
+++ b/src/app/[locale]/program/@sidebar/components/filterGroups/filterGroup/filterGroup.tsx
@@ -1,19 +1,24 @@
 'use server';
 import { Filter } from '@/types/types';
-import SidebarFilterGroupHeader from "@/app/program/@sidebar/components/filterGroups/filterGroup/header";
-import SidebarFilterGroupFilters from "@/app/program/@sidebar/components/filterGroups/filterGroup/filters";
+import SidebarFilterGroupHeader from '@/app/program/@sidebar/components/filterGroups/filterGroup/header';
+import SidebarFilterGroupFilters from '@/app/program/@sidebar/components/filterGroups/filterGroup/filters';
 
 export type FilterGroupProps = {
-    translation: 'faculty' | 'format' | 'language';
+  translation: 'faculty' | 'format' | 'language';
   filters: Filter[];
 };
 
-export default async function SidebarFilterGroup({ translation, filters }: FilterGroupProps) {
-
+export default async function SidebarFilterGroup({
+  translation,
+  filters,
+}: FilterGroupProps) {
   return (
     <div className="w-full">
-        <SidebarFilterGroupHeader key="filter-group-title" translation={translation} />
-        <SidebarFilterGroupFilters key="filter-group-filters" filters={filters} />
+      <SidebarFilterGroupHeader
+        key="filter-group-title"
+        translation={translation}
+      />
+      <SidebarFilterGroupFilters key="filter-group-filters" filters={filters} />
     </div>
   );
 }
diff --git a/src/app/[locale]/program/@sidebar/components/filterGroups/filterGroup/filters.tsx b/src/app/[locale]/program/@sidebar/components/filterGroups/filterGroup/filters.tsx
index 56ab12d..9868e92 100644
--- a/src/app/[locale]/program/@sidebar/components/filterGroups/filterGroup/filters.tsx
+++ b/src/app/[locale]/program/@sidebar/components/filterGroups/filterGroup/filters.tsx
@@ -20,7 +20,7 @@ export default async function SidebarFilterGroupFilters({
 
 function SidebarFilterGroupFiltersContainer({ children }: ReactNodeProps) {
   return (
-    <div className="border-l-xs border-r-xs w-full border-t-border bg-primary">
+    <div className="w-full border-l-xs border-r-xs border-t-border bg-primary">
       <div className="flex w-full flex-col gap-border">{children}</div>
     </div>
   );
diff --git a/src/app/[locale]/program/@sidebar/components/filterGroups/filterGroup/header.tsx b/src/app/[locale]/program/@sidebar/components/filterGroups/filterGroup/header.tsx
index 102b283..5f6e91b 100644
--- a/src/app/[locale]/program/@sidebar/components/filterGroups/filterGroup/header.tsx
+++ b/src/app/[locale]/program/@sidebar/components/filterGroups/filterGroup/header.tsx
@@ -1,25 +1,27 @@
 'use server';
 import { useTranslations } from 'next-intl';
-import {ReactNodeProps} from "@/types/types";
+import { ReactNodeProps } from '@/types/types';
 
 export type SidebarFilterGroupHeaderProps = {
-    translation: 'faculty' | 'format' | 'language';
+  translation: 'faculty' | 'format' | 'language';
 };
 
-export default async function SidebarFilterGroupHeader({ translation }: SidebarFilterGroupHeaderProps) {
+export default async function SidebarFilterGroupHeader({
+  translation,
+}: SidebarFilterGroupHeaderProps) {
   const t = useTranslations();
 
   return (
-      <SidebarFilterGroupHeaderContainer>
-          {t(translation, {count: 2})}:
-      </SidebarFilterGroupHeaderContainer>
+    <SidebarFilterGroupHeaderContainer>
+      {t(translation, { count: 2 })}:
+    </SidebarFilterGroupHeaderContainer>
   );
 }
 
 function SidebarFilterGroupHeaderContainer({ children }: ReactNodeProps) {
-    return (
-        <div className="bg-primary text-secondary text-xs px-gutter-sm min-h-content-header flex items-center">
-            {children}
-        </div>
-    );
-}
\ No newline at end of file
+  return (
+    <div className="flex min-h-content-header items-center bg-primary px-gutter-sm text-xs text-secondary">
+      {children}
+    </div>
+  );
+}
diff --git a/src/app/[locale]/program/@sidebar/components/filterGroups/filterGroups.tsx b/src/app/[locale]/program/@sidebar/components/filterGroups/filterGroups.tsx
index a0dc9c1..069956b 100644
--- a/src/app/[locale]/program/@sidebar/components/filterGroups/filterGroups.tsx
+++ b/src/app/[locale]/program/@sidebar/components/filterGroups/filterGroups.tsx
@@ -20,6 +20,7 @@ export default async function SidebarFilterGroups({
     <SidebarFilterGroupsContainer>
       {filterGroupFetchers.map((fetcher) => (
         <SidebarFilterGroup
+          key={fetcher.translation}
           translation={fetcher.translation}
           filters={filters[fetcher.data]}
         />
@@ -32,7 +33,7 @@ function SidebarFilterGroupsContainer({ children }: ReactNodeProps) {
   return (
     <div className="col-span-1">
       <div className="h-content-header max-h-content-header min-h-content-header" />
-      <div className="md:border-r-xs min-h-content-body w-full border-l-0 border-r-border bg-primary md:border-l-border">
+      <div className="min-h-content-body w-full border-l-0 border-r-border bg-primary md:border-l-border md:border-r-xs">
         {children}
       </div>
     </div>
diff --git a/src/app/[locale]/program/@sidebar/default.tsx b/src/app/[locale]/program/@sidebar/default.tsx
index dc825af..15089dd 100644
--- a/src/app/[locale]/program/@sidebar/default.tsx
+++ b/src/app/[locale]/program/@sidebar/default.tsx
@@ -7,7 +7,7 @@ export type FilterSideBarProps = {
   searchParams: { [key: string]: string | string[] | undefined };
 };
 
-export const revalidate = 0;
+export const revalidate = 100;
 
 export default async function Sidebar({ searchParams }: FilterSideBarProps) {
   const items = await getFilteredGraphQLItems(searchParams);
diff --git a/src/app/[locale]/program/components/projects/container.server.tsx b/src/app/[locale]/program/components/projects/container.server.tsx
index 02c27da..75d6201 100644
--- a/src/app/[locale]/program/components/projects/container.server.tsx
+++ b/src/app/[locale]/program/components/projects/container.server.tsx
@@ -6,7 +6,7 @@ import cx from 'classnames';
 export default function ProgramProjectsContainer({ children }: ReactNodeProps) {
   const pathname = usePathname();
   return (
-    <div className="md:border-l-xs min-h-content-body border-x-border bg-primary md:border-r-border">
+    <div className="min-h-content-body border-x-border bg-primary md:border-l-xs md:border-r-border">
       <div
         className={cx(
           'wrap grid grid-cols-1 gap-border',
diff --git a/src/app/[locale]/program/components/sidebarToggle.client.tsx b/src/app/[locale]/program/components/sidebarToggle.client.tsx
index dd40aed..e3715e1 100644
--- a/src/app/[locale]/program/components/sidebarToggle.client.tsx
+++ b/src/app/[locale]/program/components/sidebarToggle.client.tsx
@@ -2,33 +2,43 @@
 import { useState } from 'react';
 import ArrowRight from '@/components/icons/arrowRight';
 import { cn } from '@/lib/utils';
-import {ReactNodeProps} from "@/types/types";
+import { ReactNodeProps } from '@/types/types';
 
 export default function SidebarToggle() {
-    const [sidebarIsOpen, setSidebarIsOpen] = useState(false);
+  const [sidebarIsOpen, setSidebarIsOpen] = useState(false);
 
-    const onClick = (_: any) => {
-        const contentEl = window.document.getElementById('movable-content');
-        if (contentEl) {
-            contentEl.style.left = sidebarIsOpen ? '0vw' : '-66.666666vw';
-            setSidebarIsOpen(!sidebarIsOpen);
-        }
-    };
+  const onClick = (_: any) => {
+    const contentEl = window.document.getElementById('movable-content');
+    if (contentEl) {
+      contentEl.style.left = sidebarIsOpen ? '0vw' : '-66.666666vw';
+      setSidebarIsOpen(!sidebarIsOpen);
+    }
+  };
 
-    return (
-        <SidebarToggleContainer onClick={onClick}>
-            <div className={cn('transition-transform duration-700', sidebarIsOpen ? 'rotate-0' : 'rotate-180')}>
-                <ArrowRight width={11} height={18} />
-            </div>
-        </SidebarToggleContainer>
-    );
+  return (
+    <SidebarToggleContainer onClick={onClick}>
+      <div
+        className={cn(
+          'transition-transform duration-700',
+          sidebarIsOpen ? 'rotate-0' : 'rotate-180',
+        )}
+      >
+        <ArrowRight width={11} height={18} />
+      </div>
+    </SidebarToggleContainer>
+  );
 }
 
-function SidebarToggleContainer({children, onClick}: ReactNodeProps & { onClick: (_: any) => void }) {
-    return (
-        <div className="pointer-events-auto absolute right-0 z-50 h-content-header aspect-square cursor-pointer rounded-bl-border bg-primary md:hidden transition-[right] duration-700"
-             onClick={onClick}>
-            <div className="flex h-full items-center justify-center">{children}</div>
-        </div>
-    );
+function SidebarToggleContainer({
+  children,
+  onClick,
+}: ReactNodeProps & { onClick: (_: any) => void }) {
+  return (
+    <div
+      className="pointer-events-auto absolute right-0 z-50 aspect-square h-content-header cursor-pointer rounded-bl-border bg-primary transition-[right] duration-700 md:hidden"
+      onClick={onClick}
+    >
+      <div className="flex h-full items-center justify-center">{children}</div>
+    </div>
+  );
 }
diff --git a/src/app/[locale]/program/page.tsx b/src/app/[locale]/program/page.tsx
index 11bbe74..dabaeb5 100644
--- a/src/app/[locale]/program/page.tsx
+++ b/src/app/[locale]/program/page.tsx
@@ -6,7 +6,7 @@ export type ProgramPageProps = {
   searchParams: { [key: string]: string | string[] | undefined };
 };
 
-export const revalidate = 0;
+export const revalidate = 100;
 
 export default async function Page({ searchParams }: ProgramPageProps) {
   const items = await getFilteredGraphQLItems(searchParams);
diff --git a/src/app/[locale]/project/[id]/components/audioplayer.tsx b/src/app/[locale]/project/[id]/components/audioplayer.tsx
index 0d7adb8..a4af850 100644
--- a/src/app/[locale]/project/[id]/components/audioplayer.tsx
+++ b/src/app/[locale]/project/[id]/components/audioplayer.tsx
@@ -1,6 +1,7 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client';
 
-import { MouseEventHandler, useCallback, useRef, useState } from 'react';
+import { MouseEvent, useCallback, useRef, useState } from 'react';
 import { ItemContent } from '@/types/item';
 
 const padTime = (i: number) => (i < 10 ? `0${i}` : `${i}`);
@@ -16,7 +17,7 @@ export const minsToHHMMSS = (secs: number) => {
 };
 
 const AudioPlayer = ({ item }: { item: ItemContent }) => {
-  const audioRef = useRef();
+  const audioRef = useRef<HTMLAudioElement>(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
@@ -45,7 +46,7 @@ const AudioPlayer = ({ item }: { item: ItemContent }) => {
   );
 
   const handleChangeTime = useCallback(
-    (e: MouseEventHandler<HTMLButtonElement>) => {
+    (e: MouseEvent<HTMLInputElement>) => {
       if (audioRef?.current) {
         audioRef?.current?.pause();
         audioRef.current.currentTime = e.target.value;
diff --git a/src/app/[locale]/project/[id]/components/content/element.tsx b/src/app/[locale]/project/[id]/components/content/element.tsx
index 9e7d664..02ff83a 100644
--- a/src/app/[locale]/project/[id]/components/content/element.tsx
+++ b/src/app/[locale]/project/[id]/components/content/element.tsx
@@ -5,7 +5,7 @@ import AudioPlayer from '@/app/project/[id]/components/audioplayer';
 
 const ContentElement = ({ item }: { item: ItemContent }) => {
   if (item.template == 'image') {
-    return <Image src={item.content} />;
+    return <Image src={item.content} alt="project image" />;
   } else if (item.template == 'audio') {
     return <AudioPlayer item={item} />;
   } else if (item.template == 'video') {
diff --git a/src/app/[locale]/saved/page.tsx b/src/app/[locale]/saved/page.tsx
index 9d58ad2..b6f9702 100644
--- a/src/app/[locale]/saved/page.tsx
+++ b/src/app/[locale]/saved/page.tsx
@@ -5,7 +5,7 @@ export type SavedPageProps = {
   searchParams: { [key: string]: string | string[] | undefined };
 };
 
-export const revalidate = 0; // revalidate the data at most every hour
+export const revalidate = 100; // revalidate the data at most every hour
 
 export default async function SavedPage() {
   const items = await getGraphQLItems();
diff --git a/src/app/[locale]/saved/saved.client.tsx b/src/app/[locale]/saved/saved.client.tsx
index f6cca39..79ffa7c 100644
--- a/src/app/[locale]/saved/saved.client.tsx
+++ b/src/app/[locale]/saved/saved.client.tsx
@@ -30,7 +30,7 @@ export default function Saved({ items }: SavedProps) {
 
 function SavedContainer({ children }: ReactNodeProps) {
   return (
-    <div className="-ml-xs z-50 h-content max-h-content min-h-content overflow-y-scroll bg-primary">
+    <div className="z-50 -ml-xs h-content max-h-content min-h-content overflow-y-scroll bg-primary">
       <SavedHeader />
       <div className="grid max-h-fit min-h-content w-full columns-5 items-start justify-start gap-border bg-primary px-border md:grid-cols-4">
         {children}
diff --git a/src/app/[locale]/timeline/[[...slug]]/components/container.tsx b/src/app/[locale]/timeline/[[...slug]]/components/container.tsx
index 07eb8ff..4726f8b 100644
--- a/src/app/[locale]/timeline/[[...slug]]/components/container.tsx
+++ b/src/app/[locale]/timeline/[[...slug]]/components/container.tsx
@@ -24,7 +24,7 @@ export default function EventContainer({
   return (
     <div className="animate-height relative mb-border flex w-timeline flex-wrap justify-start">
       <div
-        className="mx-xs sticky left-0 top-0 z-30 flex w-screen cursor-pointer rounded-md bg-secondary p-border text-lg ring-2 ring-primary hover:font-bold"
+        className="sticky left-0 top-0 z-30 mx-xs flex w-screen cursor-pointer rounded-md bg-secondary p-border text-lg ring-2 ring-primary hover:font-bold"
         onClick={handleClick}
       >
         {location.name}
diff --git a/src/app/[locale]/timeline/[[...slug]]/components/days.tsx b/src/app/[locale]/timeline/[[...slug]]/components/days.tsx
index 1303513..402d0fe 100644
--- a/src/app/[locale]/timeline/[[...slug]]/components/days.tsx
+++ b/src/app/[locale]/timeline/[[...slug]]/components/days.tsx
@@ -53,7 +53,7 @@ export default function Days() {
 
   return (
     <div ref={scrollRef} className="sticky left-0 top-0 z-40 h-gridcell pb-10">
-      <div className="px-xs flex w-full justify-stretch bg-primary">
+      <div className="flex w-full justify-stretch bg-primary px-xs">
         {Object.entries(DAYS).map(([name, date]) => (
           <Day
             key={`button-day-${name}`}
@@ -82,7 +82,7 @@ function Day({
   return (
     <button
       className={cx(
-        'border-x-xs h-gridcell grow rounded-md border-border border-t-0 border-primary px-4 hover:bg-highlight hover:text-black',
+        'h-gridcell grow rounded-md border-border border-x-xs border-t-0 border-primary px-4 hover:bg-highlight hover:text-black',
         isSelected ? 'bg-highlight text-secondary' : 'bg-secondary',
       )}
       onClick={() => scrollToDate(date)}
diff --git a/src/app/[locale]/timeline/[[...slug]]/components/eventLocation.server.tsx b/src/app/[locale]/timeline/[[...slug]]/components/eventLocation.server.tsx
index de65647..5f728d1 100644
--- a/src/app/[locale]/timeline/[[...slug]]/components/eventLocation.server.tsx
+++ b/src/app/[locale]/timeline/[[...slug]]/components/eventLocation.server.tsx
@@ -6,7 +6,7 @@ type EventLocationProps = {
   location: Context;
 };
 
-export const revalidate = 0;
+export const revalidate = 100;
 export default async function EventLocation({ location }: EventLocationProps) {
   const events = await getEventList(location.id);
   if (events?.length == 0) return;
diff --git a/src/app/[locale]/timeline/[[...slug]]/components/scale.tsx b/src/app/[locale]/timeline/[[...slug]]/components/scale.tsx
index b16071c..fc3a1a4 100644
--- a/src/app/[locale]/timeline/[[...slug]]/components/scale.tsx
+++ b/src/app/[locale]/timeline/[[...slug]]/components/scale.tsx
@@ -13,7 +13,7 @@ export default function TimeScale() {
 function TimeTick({ tick }: { tick: (typeof TIMES)[number] }) {
   return (
     <div
-      className="border-x-xs pointer-events-none absolute top-0 flex h-gridcell w-[100px] items-center justify-center rounded-md border-b-border border-t-0 border-primary bg-secondary"
+      className="pointer-events-none absolute top-0 flex h-gridcell w-[100px] items-center justify-center rounded-md border-x-xs border-b-border border-t-0 border-primary bg-secondary"
       key={`scale-hour-${tick[0]}-${tick[1]}`}
       style={{
         left: tick[0],
diff --git a/src/app/[locale]/timeline/[[...slug]]/components/scrollTo.tsx b/src/app/[locale]/timeline/[[...slug]]/components/scrollTo.tsx
index 1b57bb4..1ddd470 100644
--- a/src/app/[locale]/timeline/[[...slug]]/components/scrollTo.tsx
+++ b/src/app/[locale]/timeline/[[...slug]]/components/scrollTo.tsx
@@ -20,7 +20,7 @@ export function ScrollForwardButton() {
       className="fixed bottom-[50%] right-0 z-50 pr-2"
       onClick={() => scrollForward()}
     >
-      <div className="motion-safe:animate-bounceRight h-gridcell w-10 cursor-pointer rounded-md bg-primary fill-secondary p-2 text-lg">
+      <div className="h-gridcell w-10 cursor-pointer rounded-md bg-primary fill-secondary p-2 text-lg motion-safe:animate-bounceRight">
         <ArrowRight />
       </div>
     </div>
@@ -44,7 +44,7 @@ export function ScrollBackwardButton() {
       className="fixed bottom-[50%] left-0 z-50 pl-2"
       onClick={() => scrollBackward()}
     >
-      <div className="motion-safe:animate-bounceLeft h-gridcell w-10 cursor-pointer rounded-md bg-primary fill-secondary p-2 text-lg">
+      <div className="h-gridcell w-10 cursor-pointer rounded-md bg-primary fill-secondary p-2 text-lg motion-safe:animate-bounceLeft">
         <ArrowRight />
       </div>
     </div>
diff --git a/src/app/[locale]/timeline/[[...slug]]/components/timetable.server.tsx b/src/app/[locale]/timeline/[[...slug]]/components/timetable.server.tsx
index 21d6b97..fcd1725 100644
--- a/src/app/[locale]/timeline/[[...slug]]/components/timetable.server.tsx
+++ b/src/app/[locale]/timeline/[[...slug]]/components/timetable.server.tsx
@@ -6,7 +6,7 @@ import TimeGrid from './grid';
 import EventLocation from './eventLocation.server';
 import EventContainer from './container';
 
-export const revalidate = 0;
+export const revalidate = 100;
 export default async function TimeTable() {
   const items = await getEventLocations();
 
diff --git a/src/components/containers/border.tsx b/src/components/containers/border.tsx
index 041ee15..cf2ad1d 100644
--- a/src/components/containers/border.tsx
+++ b/src/components/containers/border.tsx
@@ -26,7 +26,7 @@ export default function BorderContainer({
     <div className={cn('bg-primary', className)}>
       <div
         className={cn(
-          'rounded-border h-min-full bg-secondary',
+          'h-min-full rounded-border bg-secondary',
           borders.map((border) => borderToMarginMapper[border]).join(' '),
           innerClassName,
         )}
diff --git a/src/components/filterBar/index.tsx b/src/components/filterBar/index.tsx
index 80758c6..f7fcdeb 100644
--- a/src/components/filterBar/index.tsx
+++ b/src/components/filterBar/index.tsx
@@ -2,7 +2,7 @@
 import FilterTag from '@/components/filterTag';
 import { useTranslations } from 'next-intl';
 import useSelectedTags from '@/lib/useSelectedTags';
-import {ReactNodeProps} from "@/types/types";
+import { ReactNodeProps } from '@/types/types';
 
 export default function FilterBar() {
   const t = useTranslations('Filtering');
@@ -10,20 +10,24 @@ export default function FilterBar() {
 
   return (
     <FilterBarContainer>
-        <div className="text-xs text-grey pr-gutter-xs">{t('filter')}:</div>
-        {filterItems.map((item) => (
-            <FilterTag key={`selected-filter-${item.id}`} filter={item} isSelected />
-        ))}
+      <div className="pr-gutter-xs text-xs text-grey">{t('filter')}:</div>
+      {filterItems.map((item) => (
+        <FilterTag
+          key={`selected-filter-${item.id}`}
+          filter={item}
+          isSelected
+        />
+      ))}
     </FilterBarContainer>
   );
 }
 
-function FilterBarContainer({children}: ReactNodeProps) {
-    return (
-        <div className="sticky left-0 right-0 top-0 z-10 flex h-content-header w-full bg-primary">
-            <div className="w-full max-w-full overflow-x-scroll h-full px-gutter-sm flex gap-gutter-xs items-center bg-secondary border-x-border border-b-border rounded-md">
-                {children}
-            </div>
-        </div>
-    );
+function FilterBarContainer({ children }: ReactNodeProps) {
+  return (
+    <div className="sticky left-0 right-0 top-0 z-10 flex h-content-header w-full bg-primary">
+      <div className="flex h-full w-full max-w-full items-center gap-gutter-xs rounded-md border-x-border border-b-border bg-secondary px-gutter-sm">
+        {children}
+      </div>
+    </div>
+  );
 }
diff --git a/src/components/filterTag.tsx b/src/components/filterTag.tsx
index 2d6f444..222ccdb 100644
--- a/src/components/filterTag.tsx
+++ b/src/components/filterTag.tsx
@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { Filter } from '@/types/types';
 import cx from 'classnames';
 import useQuery from '@/lib/useQuery';
-import {useSearchParams} from "next/navigation";
+import { useSearchParams } from 'next/navigation';
 
 export type FilterTagProps = {
   filter: Filter;
@@ -26,14 +26,14 @@ export default function FilterTag({
     <div
       onClick={handleClickFilter}
       className={cx(
-        'cursor-pointer w-fit max-w-full',
+        'w-fit max-w-full cursor-pointer',
         disabled && 'pointer-events-none',
       )}
     >
       <div
         className={cx(
           'relative w-fit max-w-full truncate rounded-md border-white px-[13px] py-[8px] text-xxs ring-2 ring-primary',
-            selectedId == filter.id
+          selectedId == filter.id
             ? 'bg-highlight text-black'
             : 'bg-secondary text-primary hover:bg-highlight hover:text-black',
           disabled && 'pointer-events-none opacity-35',
diff --git a/src/components/filters/filterGroup.tsx b/src/components/filters/filterGroup.tsx
index 9850840..3c24424 100644
--- a/src/components/filters/filterGroup.tsx
+++ b/src/components/filters/filterGroup.tsx
@@ -37,7 +37,7 @@ export default function FilterGroup({
       <div
         key="filters"
         className={cx(
-          'border-l-xs border-r-xs h-full w-full border-t-border bg-primary',
+          'h-full w-full border-l-xs border-r-xs border-t-border bg-primary',
           hasLeftBorder && 'border-l-border',
           hasRightBorder && 'border-r-border',
         )}
diff --git a/src/components/header/navigation/colorSchemeSwitcher.tsx b/src/components/header/navigation/colorSchemeSwitcher.tsx
index 29e4e51..7159b8a 100644
--- a/src/components/header/navigation/colorSchemeSwitcher.tsx
+++ b/src/components/header/navigation/colorSchemeSwitcher.tsx
@@ -43,7 +43,7 @@ export default function ColorSchemeSwitcher() {
       <button
         onClick={toggleDarkMode}
         aria-label="dark mode"
-        className="border-xs flex h-full w-full items-center justify-center rounded-border border-y-border border-r-border border-primary bg-primary hover:bg-highlight"
+        className="flex h-full w-full items-center justify-center rounded-border border-xs border-y-border border-r-border border-primary bg-primary hover:bg-highlight"
       >
         <Light height={33} width={33} />
       </button>
diff --git a/src/components/header/navigation/desktop/desktop.tsx b/src/components/header/navigation/desktop/desktop.tsx
index 141c4ba..1813bc2 100644
--- a/src/components/header/navigation/desktop/desktop.tsx
+++ b/src/components/header/navigation/desktop/desktop.tsx
@@ -11,28 +11,24 @@ export default function HeaderNavigationDesktop() {
   const t = useTranslations('Navigation');
   return (
     <NavigationDesktopContainer>
-        <NavigationLink href="/" isFirst noContentAround>
-            <div className="h-[calc(var(--height-header)-4px)]">
-                <RundgangLogo />
-            </div>
-        </NavigationLink>
-        <NavigationLink href="/program">{t('program')}</NavigationLink>
-        <NavigationLink href="/locations">{t('locations')}</NavigationLink>
-        <NavigationLink href="/timeline">{t('timeline')}</NavigationLink>
-        <div className="grid grid-cols-[1fr_50px_50px_50px]">
-            <NavigationLink href="/info">{t('info')}</NavigationLink>
-            <SavedItems />
-            <LocaleSwitcher />
-            <ColorSchemeSwitcher />
+      <NavigationLink href="/" isFirst noContentAround>
+        <div className="h-[calc(var(--height-header)-4px)]">
+          <RundgangLogo />
         </div>
+      </NavigationLink>
+      <NavigationLink href="/program">{t('program')}</NavigationLink>
+      <NavigationLink href="/locations">{t('locations')}</NavigationLink>
+      <NavigationLink href="/timeline">{t('timeline')}</NavigationLink>
+      <div className="grid grid-cols-[1fr_50px_50px_50px]">
+        <NavigationLink href="/info">{t('info')}</NavigationLink>
+        <SavedItems />
+        <LocaleSwitcher />
+        <ColorSchemeSwitcher />
+      </div>
     </NavigationDesktopContainer>
   );
 }
 
 function NavigationDesktopContainer({ children }: HtmlProps) {
-  return (
-    <nav className="hidden h-header grid-cols-5 md:grid">
-      {children}
-    </nav>
-  );
+  return <nav className="hidden h-header grid-cols-5 md:grid">{children}</nav>;
 }
diff --git a/src/components/header/navigation/localeSwitcher.tsx b/src/components/header/navigation/localeSwitcher.tsx
index d2bf372..9fa9e3d 100644
--- a/src/components/header/navigation/localeSwitcher.tsx
+++ b/src/components/header/navigation/localeSwitcher.tsx
@@ -31,7 +31,7 @@ export default function LocaleSwitcher() {
   return (
     <div className="z-100 group h-full bg-primary">
       <button
-        className="p-auto border-xs peer h-full w-full content-around rounded-border border-y-border border-primary bg-secondary text-center uppercase group-hover:bg-highlight group-hover:text-black group-focus:text-lg"
+        className="p-auto peer h-full w-full content-around rounded-border border-xs border-y-border border-primary bg-secondary text-center uppercase group-hover:bg-highlight group-hover:text-black group-focus:text-lg"
         onClick={onChangeLanguage}
       >
         <span>{locale}</span>
diff --git a/src/components/image.tsx b/src/components/image.tsx
index 64dede3..5912315 100644
--- a/src/components/image.tsx
+++ b/src/components/image.tsx
@@ -14,10 +14,7 @@ export default function Image({ className, src, alt }: ImageProps) {
       height={500}
       width={500}
       alt={alt ?? 'Thumbnail of student project'}
-      className={cx(
-        'aspect-square w-full object-cover rounded-md',
-        className,
-      )}
+      className={cx('aspect-square w-full rounded-md object-cover', className)}
       placeholder="empty"
     />
   );
diff --git a/src/components/jumpToTop.tsx b/src/components/jumpToTop.tsx
index 72109f6..de7ee04 100644
--- a/src/components/jumpToTop.tsx
+++ b/src/components/jumpToTop.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import { useState, useEffect, useRef, RefObject } from 'react';
-import ArrowRight from "@/components/icons/arrowRight";
+import ArrowRight from '@/components/icons/arrowRight';
 
-const useIsScrolled = (scrollRef: RefObject<HTMLDivElement>) => {
+const useIsScrolled = (scrollRef: RefObject<HTMLButtonElement>) => {
   const [scrolled, setScrolled] = useState(false);
 
   useEffect(() => {
@@ -31,7 +31,7 @@ const useIsScrolled = (scrollRef: RefObject<HTMLDivElement>) => {
 };
 
 export default function JumpToTop() {
-  const scrollRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLButtonElement>(null);
   const isScrolled = useIsScrolled(scrollRef);
 
   const handleClick = () => {
@@ -44,18 +44,18 @@ export default function JumpToTop() {
   };
 
   return (
-    <div
+    <button
       ref={scrollRef}
-      className="fixed right-[12px] bottom-[calc(var(--height-footer)+12px)] z-50"
+      className="fixed bottom-[calc(var(--height-footer)+12px)] right-[12px] z-50 fill-secondary hover:fill-highlight"
       onClick={() => handleClick()}
     >
       {isScrolled && (
-        <div className="cursor-pointer bg-primary h-content-header aspect-square rounded-border flex justify-center items-center">
-          <div className="rotate-[-90deg] w-fit h-fit">
+        <div className="flex aspect-square h-content-header cursor-pointer items-center justify-center rounded-border bg-primary">
+          <div className="h-fit w-fit rotate-[-90deg] ">
             <ArrowRight width={11} height={18} />
           </div>
         </div>
       )}
-    </div>
+    </button>
   );
 }
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 53033dd..1ad6649 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -28,7 +28,7 @@ export default function Modal({ children }: { children: React.ReactNode }) {
       <dialog
         ref={dialogRef}
         className={cx(
-          'animate-showModal fixed bottom-0 left-0 z-50 h-modal w-1/3',
+          'fixed bottom-0 left-0 z-50 h-modal w-1/3 animate-showModal',
           margin,
         )}
         onClose={onDismiss}
diff --git a/src/components/navigationLink.tsx b/src/components/navigationLink.tsx
index f157bf6..07820f0 100644
--- a/src/components/navigationLink.tsx
+++ b/src/components/navigationLink.tsx
@@ -26,10 +26,8 @@ export default function NavigationLink({
 
   const isActive = pathname === href || selPathname == href;
   const activeStyle = isFooter
-    ? href === '/design'
-      ? 'rounded-border'
-      : 'rounded-b-border mt-0'
-    : 'rounded-t-border -mb-1';
+    ? 'rounded-b-border mt-0'
+    : 'rounded-t-border -mb-xs';
 
   return (
     <Link
diff --git a/src/components/saveButton.client.tsx b/src/components/saveButton.client.tsx
index 7ce7c2a..89c1296 100644
--- a/src/components/saveButton.client.tsx
+++ b/src/components/saveButton.client.tsx
@@ -5,7 +5,7 @@ import { MouseEvent, useCallback } from 'react';
 import SmoothButton from '@/components/smoothButton';
 import { useTranslations } from 'next-intl';
 import { useStore } from 'zustand';
-import Cross from "@/components/icons/cross";
+import Cross from '@/components/icons/cross';
 
 export default function SaveButton({ itemId }: any) {
   const t = useTranslations('Saved');
@@ -35,7 +35,12 @@ export default function SaveButton({ itemId }: any) {
       title={isSaved ? t('remove') : t('save')}
       color={isSaved ? 'highlight' : 'secondary'}
     >
-        <Cross className={cx("absolute z-50 top-0 w-content-header h-content-header p-gutter-sm transition-transform ease-in", isSaved ? 'rotate-45' : 'rotate-0')}/>
+      <Cross
+        className={cx(
+          'absolute top-0 z-50 h-content-header w-content-header p-gutter-sm transition-transform ease-in',
+          isSaved ? 'rotate-45' : 'rotate-0',
+        )}
+      />
     </SmoothButton>
   );
 }
diff --git a/src/components/smoothButton.tsx b/src/components/smoothButton.tsx
index a01257c..c19b093 100644
--- a/src/components/smoothButton.tsx
+++ b/src/components/smoothButton.tsx
@@ -1,54 +1,65 @@
 'use client';
 import cx from 'classnames';
-import {ReactNodeProps} from "@/types/types";
+import { ReactNodeProps } from '@/types/types';
 
-const bgMapper: {[key: string]: string} = {
+const bgMapper: { [key: string]: string } = {
   primary: 'bg-primary',
   secondary: 'bg-secondary',
-  highlight: 'bg-highlight'
-}
+  highlight: 'bg-highlight',
+};
 
-const hoverBgMapper: {[key: string]: string} = {
+const hoverBgMapper: { [key: string]: string } = {
   primary: 'hover:bg-secondary',
   secondary: 'hover:bg-primary',
-  highlight: 'hover:bg-highlight'
-}
+  highlight: 'hover:bg-highlight',
+};
 
-const shadowMapper: {[key: string]: any} = {
+const shadowMapper: { [key: string]: any } = {
   bottom: {
     tr: {
-      primary: 'shadow-[0_8px_0_0_rgb(var(--primary))] group-hover:shadow-[0_8px_0_0_rgb(var(--secondary))]',
-      secondary: 'shadow-[0_8px_0_0_rgb(var(--secondary))] group-hover:shadow-[0_8px_0_0_rgb(var(--primary))]',
-      highlight: 'shadow-[0_8px_0_0_rgb(var(--highlight))] group-hover:shadow-[0_8px_0_0_rgb(var(--highlight))]',
+      primary:
+        'shadow-[0_8px_0_0_rgb(var(--primary))] group-hover:shadow-[0_8px_0_0_rgb(var(--secondary))]',
+      secondary:
+        'shadow-[0_8px_0_0_rgb(var(--secondary))] group-hover:shadow-[0_8px_0_0_rgb(var(--primary))]',
+      highlight:
+        'shadow-[0_8px_0_0_rgb(var(--highlight))] group-hover:shadow-[0_8px_0_0_rgb(var(--highlight))]',
     },
     bl: {
-      primary: 'shadow-[8px_0_0_0_rgb(var(--primary))] group-hover:shadow-[8px_0_0_0_rgb(var(--secondary))]',
-      secondary: 'shadow-[8px_0_0_0_rgb(var(--secondary))] group-hover:shadow-[8px_0_0_0_rgb(var(--primary))]',
-      highlight: 'shadow-[8px_0_0_0_rgb(var(--highlight))] group-hover:shadow-[8px_0_0_0_rgb(var(--highlight))]',
+      primary:
+        'shadow-[8px_0_0_0_rgb(var(--primary))] group-hover:shadow-[8px_0_0_0_rgb(var(--secondary))]',
+      secondary:
+        'shadow-[8px_0_0_0_rgb(var(--secondary))] group-hover:shadow-[8px_0_0_0_rgb(var(--primary))]',
+      highlight:
+        'shadow-[8px_0_0_0_rgb(var(--highlight))] group-hover:shadow-[8px_0_0_0_rgb(var(--highlight))]',
     },
   },
   top: {
     tl: {
-      primary: 'shadow-[8px_0_0_0_rgb(var(--primary))] group-hover:shadow-[8px_0_0_0_rgb(var(--secondary))]',
-      secondary: 'shadow-[8px_0_0_0_rgb(var(--secondary))] group-hover:shadow-[8px_0_0_0_rgb(var(--primary))]',
-      highlight: 'shadow-[8px_0_0_0_rgb(var(--highlight))] group-hover:shadow-[8px_0_0_0_rgb(var(--highlight))]',
+      primary:
+        'shadow-[8px_0_0_0_rgb(var(--primary))] group-hover:shadow-[8px_0_0_0_rgb(var(--secondary))]',
+      secondary:
+        'shadow-[8px_0_0_0_rgb(var(--secondary))] group-hover:shadow-[8px_0_0_0_rgb(var(--primary))]',
+      highlight:
+        'shadow-[8px_0_0_0_rgb(var(--highlight))] group-hover:shadow-[8px_0_0_0_rgb(var(--highlight))]',
     },
     br: {
-      primary: 'shadow-[0_-8px_0_0_rgb(var(--primary))] group-hover:shadow-[0_-8px_0_0_rgb(var(--secondary))]',
-      secondary: 'shadow-[0_-8px_0_0_rgb(var(--secondary))] group-hover:shadow-[0_-8px_0_0_rgb(var(--primary))]',
-      highlight: 'shadow-[0_-8px_0_0_rgb(var(--highlight))] group-hover:shadow-[0_-8px_0_0_rgb(var(--highlight))]',
-    }
-  }
-}
-
+      primary:
+        'shadow-[0_-8px_0_0_rgb(var(--primary))] group-hover:shadow-[0_-8px_0_0_rgb(var(--secondary))]',
+      secondary:
+        'shadow-[0_-8px_0_0_rgb(var(--secondary))] group-hover:shadow-[0_-8px_0_0_rgb(var(--primary))]',
+      highlight:
+        'shadow-[0_-8px_0_0_rgb(var(--highlight))] group-hover:shadow-[0_-8px_0_0_rgb(var(--highlight))]',
+    },
+  },
+};
 
 export type SmoothButtonProps = {
-  onClick?: (e: any) => void,
+  onClick?: (e: any) => void;
   bottom?: boolean;
   top?: boolean;
   color?: 'primary' | 'secondary' | 'highlight';
   title?: string;
-} & ReactNodeProps
+} & ReactNodeProps;
 
 export default function SmoothButton({
   onClick = (_) => {},
@@ -63,8 +74,9 @@ export default function SmoothButton({
       onClick={(e) => onClick(e)}
       className={cx(
         'group absolute h-content-header w-content-header hover:text-highlight',
-          bgMapper[color], hoverBgMapper[color],
-        bottom ? 'bottom-0 right-0 rounded-tl-border rounded-br-border' : '',
+        bgMapper[color],
+        hoverBgMapper[color],
+        bottom ? 'bottom-0 right-0 rounded-br-border rounded-tl-border' : '',
         top ? 'right-0 top-0 rounded-bl-border rounded-tr-border' : '',
       )}
       title={title}
@@ -72,14 +84,34 @@ export default function SmoothButton({
       {children}
       {bottom && (
         <>
-          <div className={cx('group-hover:bg-transparent absolute -top-4 right-0 h-4 w-2 rounded-br-border', shadowMapper.bottom.tr[color])}/>
-          <div className={cx('group-hover:bg-transparent absolute -left-4 bottom-0 h-2 w-4 rounded-br-border', shadowMapper.bottom.bl[color])}/>
+          <div
+            className={cx(
+              'group-hover:bg-transparent absolute -top-4 right-0 h-4 w-2 rounded-br-border',
+              shadowMapper.bottom.tr[color],
+            )}
+          />
+          <div
+            className={cx(
+              'group-hover:bg-transparent absolute -left-4 bottom-0 h-2 w-4 rounded-br-border',
+              shadowMapper.bottom.bl[color],
+            )}
+          />
         </>
       )}
       {top && (
         <>
-          <div className={cx("group-hover:bg-transparent absolute -left-4 top-0 h-2 w-4 rounded-tr-lg", shadowMapper.top.tl[color])}></div>
-          <div className={cx("group-hover:bg-transparent absolute -bottom-4 right-0 h-4 w-2 rounded-tr-lg", shadowMapper.top.br[color])}></div>
+          <div
+            className={cx(
+              'group-hover:bg-transparent absolute -left-4 top-0 h-2 w-4 rounded-tr-lg',
+              shadowMapper.top.tl[color],
+            )}
+          ></div>
+          <div
+            className={cx(
+              'group-hover:bg-transparent absolute -bottom-4 right-0 h-4 w-2 rounded-tr-lg',
+              shadowMapper.top.br[color],
+            )}
+          ></div>
         </>
       )}
     </button>
diff --git a/src/styles/app.css b/src/styles/app.css
index be2a35f..8f59dac 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -69,14 +69,21 @@ body {
 }
 
 ::-webkit-scrollbar {
-  display: none;
+  width: 2px;
 }
 
-* {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
 }
 
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #888;
+}
 @media (prefers-color-scheme: dark) {
   :root {
     --primary: 255, 255, 255;