diff --git a/_includes/head.html b/_includes/head.html
index dd12493c..6822b442 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -7,6 +7,7 @@
 
   <link href="/css/bootstrap.min.css" rel="stylesheet">
   <link href="/css/custom.css" rel="stylesheet">
+  <link href="/css/archive_cards.css" rel="stylesheet">
   <link href="/css/syntax.css" rel="stylesheet">
   <link href="/css/admonition.css" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
diff --git a/_layouts/archive.html b/_layouts/archive.html
new file mode 100644
index 00000000..c8ed2f0c
--- /dev/null
+++ b/_layouts/archive.html
@@ -0,0 +1,13 @@
+---
+layout: default
+---
+<div class="container sidebar-sticky">
+  <div id="toc-sidebar-title">
+    Auf dieser Seite:
+  </div>
+  <nav class="toc-sidebar">
+    {% include toc.html html=content sanitize=true h_min=1 h_max=3 %}
+  </nav>
+</div>
+
+{{ content }}
diff --git a/archive.md b/archive.md
index 67bb4756..637548d7 100644
--- a/archive.md
+++ b/archive.md
@@ -1,5 +1,5 @@
 ---
-layout: default
+layout: archive
 permalink: /archive/
 title: Archiv
 description: Hier befinden sich die Materialien vergangener Veranstaltungen.
@@ -40,9 +40,10 @@ description: Hier befinden sich die Materialien vergangener Veranstaltungen.
 <!-- - <a href="https://github.com/pep-dortmund/toolbox-workshop-protocol-template" target="_blank">LaTeX Vorlage für Protokolle</a> -->
 
 #### Alles zusammen als Archiv
-- [Archiv download](/files/archive/current.tar.gz)
+- [Archiv-Download `.tar.gz`](/files/archive/current.tar.gz)
+- [Archiv-Download `.zip`](/files/archive/current.zip)
 
-<p class="lead">Hier befinden sich die Materialien vergangener Veranstaltungen.</p>
+---
 
 ## Wintersemester 2023/24
 [//]: <> (Referring to latest version.)
@@ -77,51 +78,72 @@ description: Hier befinden sich die Materialien vergangener Veranstaltungen.
 - <a href="https://github.com/pep-dortmund/toolbox-workshop-protocol-template" target="_blank">LaTeX Vorlage für Protokolle</a>
 
 #### Alles zusammen als Archiv
-- [Archiv download](/files/archive/latest.tar.gz)
-
-
-## Wintersemester 2022/23
-
-- [Archiv download](/files/archive/2022.tar.gz)
-
-## Wintersemester 2021/22
-
-- [Archiv download](/files/archive/2021.tar.gz)
-
-## Wintersemester 2020/21
-
-- [Archiv download](/files/archive/2020.tar.gz)
-
-## Wintersemester 2019/20
-
-- [Archiv download](/files/archive/2019.tar.gz)
-
-## Wintersemester 2018/19
-
-- [Archiv download](/files/archive/2018.tar.gz)
+- [Archiv-Download `.tar.gz`](/files/archive/latest.tar.gz)
+- [Archiv-Download `.zip`](/files/archive/latest.zip)
 
-## Wintersemester 2017/18
-
-- [Archiv download](/files/archive/2017.tar.gz)
-
-## Wintersemester 2016/17
-
-- [Archiv download](/files/archive/2016.tar.gz)
-
-## Wintersemester 2015/16
-
-- [Archiv download](/files/archive/2015.tar.gz)
-
-## Wintersemester 2014/15
-
-- [Archiv download](/files/archive/2014.tar.gz)
-
-## Wintersemester 2013/14
-
-- [Archiv download](/files/archive/2013.tar.gz)
-
-## Wintersemester 2012/13
+---
 
-- [Archiv download](/files/archive/2012.tar.gz)
+# Materialien früherer Veranstaltungen
+
+
+<div class="archive-grid">
+  <!-- Add more cards as needed -->
+  <div class="archive-card">
+    <div class="archive-title">WS 2022/23</div>
+    <a href="/files/archive/2022.zip" class="download-btn">Archiv ZIP</a>
+    <a href="/files/archive/2022.tar.gz" class="download-btn">Archiv TAR</a>
+  </div>
+  <div class="archive-card">
+    <div class="archive-title">WS 2021/22</div>
+    <a href="/files/archive/2021.zip" class="download-btn">Archiv ZIP</a>
+    <a href="/files/archive/2021.tar.gz" class="download-btn">Archiv TAR</a>
+  </div>
+  <div class="archive-card">
+    <div class="archive-title">WS 2020/21</div>
+    <a href="/files/archive/2020.zip" class="download-btn">Archiv ZIP</a>
+    <a href="/files/archive/2020.tar.gz" class="download-btn">Archiv TAR</a>
+  </div>
+  <div class="archive-card">
+    <div class="archive-title">WS 2019/20</div>
+    <a href="/files/archive/2019.zip" class="download-btn">Archiv ZIP</a>
+    <a href="/files/archive/2019.tar.gz" class="download-btn">Archiv TAR</a>
+  </div>
+  <div class="archive-card">
+    <div class="archive-title">WS 2018/19</div>
+    <a href="/files/archive/2018.zip" class="download-btn">Archiv ZIP</a>
+    <a href="/files/archive/2018.tar.gz" class="download-btn">Archiv TAR</a>
+  </div>
+  <div class="archive-card">
+    <div class="archive-title">WS 2017/18</div>
+    <a href="/files/archive/2017.zip" class="download-btn">Archiv ZIP</a>
+    <a href="/files/archive/2017.tar.gz" class="download-btn">Archiv TAR</a>
+  </div>
+  <div class="archive-card">
+    <div class="archive-title">WS 2016/17</div>
+    <a href="/files/archive/2016.zip" class="download-btn">Archiv ZIP</a>
+    <a href="/files/archive/2016.tar.gz" class="download-btn">Archiv TAR</a>
+  </div>
+  <div class="archive-card">
+    <div class="archive-title">WS 2015/16</div>
+    <a href="/files/archive/2015.zip" class="download-btn">Archiv ZIP</a>
+    <a href="/files/archive/2015.tar.gz" class="download-btn">Archiv TAR</a>
+  </div>
+  <div class="archive-card">
+    <div class="archive-title">WS 2014/15</div>
+    <a href="/files/archive/2014.zip" class="download-btn">Archiv ZIP</a>
+    <a href="/files/archive/2014.tar.gz" class="download-btn">Archiv TAR</a>
+  </div>
+  <div class="archive-card">
+    <div class="archive-title">WS 2013/14</div>
+    <a href="/files/archive/2013.zip" class="download-btn">Archiv ZIP</a>
+    <a href="/files/archive/2013.tar.gz" class="download-btn">Archiv TAR</a>
+  </div>
+  <div class="archive-card">
+    <div class="archive-title">WS 2012/13</div>
+    <a href="/files/archive/2012.zip" class="download-btn">Archiv ZIP</a>
+    <a href="/files/archive/2012.tar.gz" class="download-btn">Archiv TAR</a>
+  </div>
+</div>
 
+---
 Der Programm-Code befindet sich unter der [MIT-Lizenz](http://opensource.org/licenses/MIT), die Texte unter [Creative Commons Attribution 3.0](http://creativecommons.org/licenses/by/3.0/).
diff --git a/css/archive_cards.css b/css/archive_cards.css
new file mode 100644
index 00000000..d917da80
--- /dev/null
+++ b/css/archive_cards.css
@@ -0,0 +1,69 @@
+.archive-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-gap: 10px;
+  align-items: center;
+  justify-items: center;
+}
+
+.archive-card {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 21rem;
+  height: 13rem;
+  background: white;
+  border-radius: 10px;
+  overflow: hidden;
+  font-size: 1.5rem;
+  --gradient: linear-gradient(to bottom, var(--pep-blue), white);
+  --color: #32a6ff;
+  box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
+}
+
+.archive-card:after {
+  position: absolute;
+  content: "";
+  width: 0.25rem;
+  inset: 0.65rem auto 0.65rem 0.5rem;
+  border-radius: 0.125rem;
+  background: var(--pep-blue);
+  transition: transform 300ms ease;
+  z-index: 4;
+}
+
+.archive-title {
+  opacity: 1;
+  color: var(--pep-gray);
+  padding: 0rem 0.25rem 0.4rem 1rem;
+  font-weight: 1000;
+  font-size: 2.5rem;
+  transition: transform 300ms ease;
+  z-index: 4;
+}
+
+.archive-card:hover .archive-title {
+  transform: translateX(0.5rem);
+}
+
+.download-btn {
+  width: 75%;
+  display: inline-block;
+  /* background-color: var(--pep-blue); */
+  background-color: transparent;
+  border: 2.5px solid var(--pep-blue);
+  color: var(--pep-gray);
+  padding: 0rem 0.0rem 0.0rem 0.5rem;
+  z-index: 5;
+  text-decoration: none;
+  border-radius: 4px;
+  margin-top: 0.75rem;
+  margin-left: 1.25rem;
+  transition: transform 300ms ease;
+}
+
+.download-btn:hover {
+  transform: translateX(0.5rem);
+  /* less hue and saturation tone from pep-blue */
+  background-color: rgba(138, 181, 222, 0.2); 
+}
diff --git a/files/archive/2012.zip b/files/archive/2012.zip
new file mode 100644
index 00000000..6d6e384b
Binary files /dev/null and b/files/archive/2012.zip differ
diff --git a/files/archive/2013.zip b/files/archive/2013.zip
new file mode 100644
index 00000000..188c60f9
Binary files /dev/null and b/files/archive/2013.zip differ
diff --git a/files/archive/2014.zip b/files/archive/2014.zip
new file mode 100644
index 00000000..6a0be36f
Binary files /dev/null and b/files/archive/2014.zip differ
diff --git a/files/archive/2015.zip b/files/archive/2015.zip
new file mode 100644
index 00000000..2a627206
Binary files /dev/null and b/files/archive/2015.zip differ
diff --git a/files/archive/2016.zip b/files/archive/2016.zip
new file mode 100644
index 00000000..4c204781
Binary files /dev/null and b/files/archive/2016.zip differ
diff --git a/files/archive/2017.zip b/files/archive/2017.zip
new file mode 100644
index 00000000..30d7b438
Binary files /dev/null and b/files/archive/2017.zip differ
diff --git a/files/archive/2018.zip b/files/archive/2018.zip
new file mode 100644
index 00000000..891337e9
Binary files /dev/null and b/files/archive/2018.zip differ
diff --git a/files/archive/2019.zip b/files/archive/2019.zip
new file mode 100644
index 00000000..2b669cae
Binary files /dev/null and b/files/archive/2019.zip differ
diff --git a/files/archive/2020.zip b/files/archive/2020.zip
new file mode 100644
index 00000000..12be5d50
Binary files /dev/null and b/files/archive/2020.zip differ
diff --git a/files/archive/2021.zip b/files/archive/2021.zip
new file mode 100644
index 00000000..eab94c32
Binary files /dev/null and b/files/archive/2021.zip differ
diff --git a/files/archive/2022.zip b/files/archive/2022.zip
new file mode 100644
index 00000000..9a2c6008
Binary files /dev/null and b/files/archive/2022.zip differ
diff --git a/files/archive/2023.tar.gz b/files/archive/2023.tar.gz
index 0b5cdae2..eeb7e0cc 100644
Binary files a/files/archive/2023.tar.gz and b/files/archive/2023.tar.gz differ
diff --git a/files/archive/2023.zip b/files/archive/2023.zip
new file mode 100644
index 00000000..cfdfd679
Binary files /dev/null and b/files/archive/2023.zip differ
diff --git a/files/archive/2024.tar.gz b/files/archive/2024.tar.gz
index 9ed9af55..17d23cc0 100644
Binary files a/files/archive/2024.tar.gz and b/files/archive/2024.tar.gz differ
diff --git a/files/archive/2024.zip b/files/archive/2024.zip
new file mode 100644
index 00000000..eddf2b2c
Binary files /dev/null and b/files/archive/2024.zip differ
diff --git a/files/archive/current.zip b/files/archive/current.zip
new file mode 120000
index 00000000..cb3d9baa
--- /dev/null
+++ b/files/archive/current.zip
@@ -0,0 +1 @@
+2024.zip
\ No newline at end of file
diff --git a/files/archive/latest.zip b/files/archive/latest.zip
new file mode 120000
index 00000000..efdf532f
--- /dev/null
+++ b/files/archive/latest.zip
@@ -0,0 +1 @@
+2023.zip
\ No newline at end of file