diff --git a/.changeset/weak-apes-bow.md b/.changeset/weak-apes-bow.md
new file mode 100644
index 00000000..2e4f34fa
--- /dev/null
+++ b/.changeset/weak-apes-bow.md
@@ -0,0 +1,5 @@
+---
+"@quassel/website": patch
+---
+
+Improve website
diff --git a/apps/website/.docker/nginx.conf b/apps/website/.docker/nginx.conf
index 27e2a65c..810ce642 100644
--- a/apps/website/.docker/nginx.conf
+++ b/apps/website/.docker/nginx.conf
@@ -14,4 +14,9 @@ server {
 
     try_files $uri $uri/ /index.html =404;
   }
+
+  location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|otf|webp)$ {
+    expires 1y;
+    add_header Cache-Control "public";
+  }
 }
diff --git a/apps/website/public/android-chrome-192x192.png b/apps/website/public/android-chrome-192x192.png
new file mode 100644
index 00000000..ae929a3c
Binary files /dev/null and b/apps/website/public/android-chrome-192x192.png differ
diff --git a/apps/website/public/assets/arrow.svg b/apps/website/public/assets/arrow.svg
deleted file mode 100644
index 9b0e5173..00000000
--- a/apps/website/public/assets/arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.70711 8.09173C9.09763 7.7012 9.09763 7.06804 8.70711 6.67751L2.34315 0.313553C1.95262 -0.0769715 1.31946 -0.0769715 0.928932 0.313553C0.538408 0.704077 0.538408 1.33724 0.928932 1.72777L6.58579 7.38462L0.928932 13.0415C0.538408 13.432 0.538408 14.0652 0.928932 14.4557C1.31946 14.8462 1.95262 14.8462 2.34315 14.4557L8.70711 8.09173ZM7 8.38462H8V6.38462H7V8.38462Z" fill="#2294CF"/>
-</svg>
diff --git a/apps/website/public/assets/poster.png b/apps/website/public/assets/poster.png
deleted file mode 100644
index fb54d599..00000000
Binary files a/apps/website/public/assets/poster.png and /dev/null differ
diff --git a/apps/website/public/favicon-16x16.png b/apps/website/public/favicon-16x16.png
new file mode 100644
index 00000000..a4eaf453
Binary files /dev/null and b/apps/website/public/favicon-16x16.png differ
diff --git a/apps/website/public/favicon-32x32.png b/apps/website/public/favicon-32x32.png
new file mode 100644
index 00000000..643a149b
Binary files /dev/null and b/apps/website/public/favicon-32x32.png differ
diff --git a/apps/website/public/favicon-48x48.png b/apps/website/public/favicon-48x48.png
new file mode 100644
index 00000000..3427e8ea
Binary files /dev/null and b/apps/website/public/favicon-48x48.png differ
diff --git a/apps/website/public/favicon-60x60.png b/apps/website/public/favicon-60x60.png
new file mode 100644
index 00000000..e3bcce2a
Binary files /dev/null and b/apps/website/public/favicon-60x60.png differ
diff --git a/apps/website/public/favicon-64x64.png b/apps/website/public/favicon-64x64.png
new file mode 100644
index 00000000..619742e9
Binary files /dev/null and b/apps/website/public/favicon-64x64.png differ
diff --git a/apps/website/public/favicon-96x96.png b/apps/website/public/favicon-96x96.png
new file mode 100644
index 00000000..6d52674c
Binary files /dev/null and b/apps/website/public/favicon-96x96.png differ
diff --git a/apps/website/public/favicon.ico b/apps/website/public/favicon.ico
new file mode 100644
index 00000000..850b12f6
Binary files /dev/null and b/apps/website/public/favicon.ico differ
diff --git a/apps/website/public/opengraph.png b/apps/website/public/opengraph.png
new file mode 100644
index 00000000..6a568093
Binary files /dev/null and b/apps/website/public/opengraph.png differ
diff --git a/apps/website/public/assets/openscript-logo.svg b/apps/website/src/assets/logos/openscript-logo.svg
similarity index 100%
rename from apps/website/public/assets/openscript-logo.svg
rename to apps/website/src/assets/logos/openscript-logo.svg
diff --git a/apps/website/public/assets/quassel-icon.svg b/apps/website/src/assets/logos/quassel-icon.svg
similarity index 100%
rename from apps/website/public/assets/quassel-icon.svg
rename to apps/website/src/assets/logos/quassel-icon.svg
diff --git a/apps/website/public/assets/uzh-logo.svg b/apps/website/src/assets/logos/uzh-logo.svg
similarity index 100%
rename from apps/website/public/assets/uzh-logo.svg
rename to apps/website/src/assets/logos/uzh-logo.svg
diff --git a/apps/website/public/assets/play-button.svg b/apps/website/src/assets/videos/play-button.svg
similarity index 100%
rename from apps/website/public/assets/play-button.svg
rename to apps/website/src/assets/videos/play-button.svg
diff --git a/apps/website/src/assets/videos/poster.png b/apps/website/src/assets/videos/poster.png
new file mode 100644
index 00000000..0f430a7a
Binary files /dev/null and b/apps/website/src/assets/videos/poster.png differ
diff --git a/apps/website/src/assets/video/quassel.mp4 b/apps/website/src/assets/videos/quassel.mp4
similarity index 61%
rename from apps/website/src/assets/video/quassel.mp4
rename to apps/website/src/assets/videos/quassel.mp4
index b08c06d9..779cf91a 100644
Binary files a/apps/website/src/assets/video/quassel.mp4 and b/apps/website/src/assets/videos/quassel.mp4 differ
diff --git a/apps/website/src/components/Head.astro b/apps/website/src/components/Head.astro
new file mode 100644
index 00000000..a7d3cea3
--- /dev/null
+++ b/apps/website/src/components/Head.astro
@@ -0,0 +1,34 @@
+---
+const { title } = Astro.props;
+const ogImageUrl = "/opengraph.png";
+---
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="any" />
+  <link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />
+  <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
+  <link rel="icon" href="/favicon-48x48.png" type="image/png" sizes="48x48" />
+  <link rel="icon" href="/favicon-64x64.png" type="image/png" sizes="64x64" />
+  <link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96" />
+  <link rel="icon" href="/android-chrome-192x192.png" type="image/png" sizes="192x192" />
+  <title>{title}</title>
+  <meta
+    name="description"
+    content="Quassel is a web-based application designed to aid researchers in collecting and analyzing data on children's language exposure."
+  />
+  <meta property="og:locale" content="en_US" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://www.quassel.ch/" />
+  <meta property="og:title" content={title} />
+  <meta
+    property="og:description"
+    content="Quassel (previously Language Exposure Questionnaire) is a web-based application designed to aid researchers in collecting and analyzing data on children's language exposure. "
+  />
+  <meta property="og:image" content={ogImageUrl} />
+  <meta property="og:image:alt" content="Quassel Application Display" />
+  <meta
+    name="keywords"
+    content="Quassel, children, calendar-like interface, language, langauge exposure, web application, periods of life, data entry personnel, UZH, openscript, open source"
+  />
+</head>
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
index 20a4485e..e07dc6d3 100644
--- a/apps/website/src/pages/index.astro
+++ b/apps/website/src/pages/index.astro
@@ -1,4 +1,5 @@
 ---
+import Head from "../components/Head.astro";
 import Site from "../layouts/Site.astro";
 import Header from "../sections/Header.astro";
 import Footer from "../sections/Footer.astro";
@@ -8,11 +9,7 @@ import Administration from "../sections/Administration.astro";
 import About from "../sections/About.astro";
 ---
 
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" type="image/svg+xml" href="/assets/quassel-icon.svg" />
-  <title>Quassel</title>
-</head>
+<Head title="Quassel" />
 <Site>
   <Header />
   <main>
diff --git a/apps/website/src/sections/Footer.astro b/apps/website/src/sections/Footer.astro
index c3f590d9..d427907f 100644
--- a/apps/website/src/sections/Footer.astro
+++ b/apps/website/src/sections/Footer.astro
@@ -1,3 +1,9 @@
+---
+import { Image } from "astro:assets";
+import UzhLogo from "../assets/logos/uzh-logo.svg";
+import OpenscriptLogo from "../assets/logos/openscript-logo.svg";
+---
+
 <style>
   footer {
     display: grid;
@@ -43,14 +49,14 @@
 <footer>
   <h2>Interested in Using Quassel?</h2>
   <div class="contact">
-    <img src="../assets/uzh-logo.svg" alt="University of Zurich logo" />
+    <Image src={UzhLogo} alt="University of Zurich logo" />
     <h3>Research collaboration</h3>
     <a href="https://www.psychology.uzh.ch/en/areas/dev/devpsy/Weltentdecker/Research-area-Multilingualism-and-Communication.html">
       Reach out to <strong>Stephanie</strong> from University of Zurich
     </a>
   </div>
   <div class="contact">
-    <img src="../assets/openscript-logo.svg" alt="openscript Ltd. logo" />
+    <Image src={OpenscriptLogo} alt="openscript Ltd. logo" />
     <h3>Tech collaboration</h3>
     <a href="https://openscript.ch/en/">Contact <strong>Robin</strong> from openscript Ltd.</a>
   </div>
diff --git a/apps/website/src/sections/Header.astro b/apps/website/src/sections/Header.astro
index d9ebcb17..eee24131 100644
--- a/apps/website/src/sections/Header.astro
+++ b/apps/website/src/sections/Header.astro
@@ -1,4 +1,6 @@
 ---
+import { Image } from "astro:assets";
+import QuasselLogo from "../assets/logos/quassel-icon.svg";
 import IconChevronRight from "~icons/tabler/chevron-right";
 ---
 
@@ -12,7 +14,7 @@ import IconChevronRight from "~icons/tabler/chevron-right";
 
   .brand {
     display: flex;
-    gap: var(--spacing-md);
+    gap: var(--spacing-sm);
     color: var(--color-highlight);
     align-items: baseline;
   }
@@ -41,7 +43,7 @@ import IconChevronRight from "~icons/tabler/chevron-right";
     stroke-width: 3;
   }
 
-  img {
+  .brand img {
     height: 4rem;
   }
 </style>
@@ -49,7 +51,7 @@ import IconChevronRight from "~icons/tabler/chevron-right";
 <header>
   <div class="brand">
     <h1>Quassel</h1>
-    <img src="../assets/quassel-icon.svg" alt="Quassel logo" />
+    <Image src={QuasselLogo} alt="Quassel logo" />
   </div>
   <nav>
     <ul>
diff --git a/apps/website/src/sections/Spotlight.astro b/apps/website/src/sections/Spotlight.astro
index 58a975fc..f1c96413 100644
--- a/apps/website/src/sections/Spotlight.astro
+++ b/apps/website/src/sections/Spotlight.astro
@@ -1,5 +1,9 @@
 ---
-import videoUrl from "../assets/video/quassel.mp4";
+import { Image } from "astro:assets";
+import UzhLogo from "../assets/logos/uzh-logo.svg";
+import videoUrl from "../assets/videos/quassel.mp4";
+import Poster from "../assets/videos/poster.png";
+import PlayButton from "../assets/videos/play-button.svg";
 ---
 
 <style>
@@ -19,9 +23,10 @@ import videoUrl from "../assets/video/quassel.mp4";
   }
 
   .intro {
-    width: 36rem;
     text-align: center;
     margin-bottom: var(--spacing-lg);
+    padding: var(--spacing-xl);
+    max-width: 37rem;
   }
 
   .quassel-video {
@@ -52,18 +57,25 @@ import videoUrl from "../assets/video/quassel.mp4";
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    cursor: pointer;
   }
 
   .playButton :hover {
     transform: scale(1.1);
   }
 
+  .playButton img {
+    width: clamp(3rem, 10vw, 6rem);
+  }
+
   .used-by {
     margin-top: var(--spacing-xl);
-    display: grid;
-    grid-template-columns: 1fr 2fr;
-    gap: var(--spacing-sm);
+    display: flex;
+    gap: var(--spacing-lg);
+
+    @media (max-width: 640px) {
+      flex-direction: column;
+      gap: 0;
+    }
   }
 
   .used-by h2 {
@@ -73,7 +85,7 @@ import videoUrl from "../assets/video/quassel.mp4";
   }
 
   .used-by img {
-    height: calc(2 * var(--spacing-lg));
+    max-height: 4rem;
   }
 
   .used-by a :hover {
@@ -103,15 +115,15 @@ import videoUrl from "../assets/video/quassel.mp4";
     <p>Efficient documenting <strong>children's</strong> language exposure by carer giver and time.</p>
   </div>
   <div class="quassel-video">
-    <video controls poster="./assets/poster.png" muted playsinline>
+    <video controls poster={Poster.src} muted playsinline>
       <source src={videoUrl} type="video/mp4" />
     </video>
     <button class="playButton">
-      <img src="../assets/play-button.svg" alt="Play button" />
+      <Image src={PlayButton} alt="Play button" />
     </button>
   </div>
   <div class="used-by">
     <h2>Used by</h2>
-    <a href="https://www.uzh.ch/en.html"><img src="../assets/uzh-logo.svg" alt="University of Zurich" /></a>
+    <a href="https://www.uzh.ch/en.html"><Image src={UzhLogo} alt="University of Zurich" /></a>
   </div>
 </section>