diff --git a/clubhaus/homepage/static/homepage/assets/self/custom.css b/clubhaus/homepage/static/homepage/assets/self/custom.css
index 2cca3cc..d18540c 100644
--- a/clubhaus/homepage/static/homepage/assets/self/custom.css
+++ b/clubhaus/homepage/static/homepage/assets/self/custom.css
@@ -1,5 +1,29 @@
 /* Globals */
 
+/* milestone */
+@font-face {
+    font-family: "Milestone";
+    src:
+            url("./fonts/milestone/milestone.otf") format("opentype"),
+            url("./fonts/milestone/milestone.woff") format("woff"),
+            url("./fonts/milestone/milestone.woff2") format("woff2");
+}
+
+.font-milestone {
+    font-family: "Milestone", "serif";
+}
+
+/* oleo-script-regular - latin */
+@font-face {
+    font-family: "Oleo Script";
+    src:
+            url("./fonts/oleo-script/oleo-script-v14-latin-regular.woff") format("woff"),
+            url("./fonts/oleo-script/oleo-script-v14-latin-regular.woff2") format("woff2");
+}
+.font-oleo {
+    font-family: "Oleo Script", "serif";
+}
+
 /* Custom default button */
 .btn-secondary,
 .btn-secondary:hover,
diff --git a/clubhaus/homepage/static/homepage/assets/self/fonts/milestone/milestone.otf b/clubhaus/homepage/static/homepage/assets/self/fonts/milestone/milestone.otf
new file mode 100644
index 0000000..432f38b
Binary files /dev/null and b/clubhaus/homepage/static/homepage/assets/self/fonts/milestone/milestone.otf differ
diff --git a/clubhaus/homepage/static/homepage/assets/self/fonts/milestone/milestone.woff b/clubhaus/homepage/static/homepage/assets/self/fonts/milestone/milestone.woff
new file mode 100644
index 0000000..6c8b168
Binary files /dev/null and b/clubhaus/homepage/static/homepage/assets/self/fonts/milestone/milestone.woff differ
diff --git a/clubhaus/homepage/static/homepage/assets/self/fonts/milestone/milestone.woff2 b/clubhaus/homepage/static/homepage/assets/self/fonts/milestone/milestone.woff2
new file mode 100644
index 0000000..01a24a1
Binary files /dev/null and b/clubhaus/homepage/static/homepage/assets/self/fonts/milestone/milestone.woff2 differ
diff --git a/clubhaus/homepage/static/homepage/assets/self/fonts/oleo-script/oleo-script-v14-latin-regular.woff b/clubhaus/homepage/static/homepage/assets/self/fonts/oleo-script/oleo-script-v14-latin-regular.woff
new file mode 100644
index 0000000..91e3dc0
Binary files /dev/null and b/clubhaus/homepage/static/homepage/assets/self/fonts/oleo-script/oleo-script-v14-latin-regular.woff differ
diff --git a/clubhaus/homepage/static/homepage/assets/self/fonts/oleo-script/oleo-script-v14-latin-regular.woff2 b/clubhaus/homepage/static/homepage/assets/self/fonts/oleo-script/oleo-script-v14-latin-regular.woff2
new file mode 100644
index 0000000..935d055
Binary files /dev/null and b/clubhaus/homepage/static/homepage/assets/self/fonts/oleo-script/oleo-script-v14-latin-regular.woff2 differ
diff --git a/clubhaus/homepage/static/homepage/background.jpg b/clubhaus/homepage/static/homepage/background.jpg
new file mode 100644
index 0000000..0b03a3f
Binary files /dev/null and b/clubhaus/homepage/static/homepage/background.jpg differ
diff --git a/clubhaus/homepage/templates/homepage/base.html b/clubhaus/homepage/templates/homepage/base.html
index b2f23b9..58f3c33 100644
--- a/clubhaus/homepage/templates/homepage/base.html
+++ b/clubhaus/homepage/templates/homepage/base.html
@@ -26,12 +26,15 @@
 
     {% block extra_header_block %}{% endblock %}
 </head>
-<body class="bg-dark h-100"> <!-- d-flex h-100 text-center text-white bg-dark -->
+<body class="bg-dark h-100">
 
-<div class="d-flex h-100 flex-column"> <!-- d-flex w-100 h-100 p-3 mx-auto flex-column -->
-    <header class="d-flex w-100 p-3 mx-auto flex-column text-white text-center">
+<div class="d-flex h-100 flex-column">
+    <header class="container d-flex w-100 p-3 mx-auto flex-column text-white text-center">
         <div>
-            <h3 class="float-md-start mb-0">Clubhaus Schornbach</h3>
+            <h3 class="float-md-start mb-0 font-oleo">
+                <a class="text-white text-decoration-none"
+                   href="{% url 'index' %}">Clubhaus Schornbach</a>
+            </h3>
             <nav class="nav nav-masthead justify-content-center float-md-end">
                 <a class="nav-link fw-bold py-1 px-0 {% if request.path == '/' %}active{% endif %}"
                    href="{% url 'index' %}">Home</a>
@@ -45,11 +48,11 @@
 
     {% block main %}{% endblock %}
 
-    <footer class="d-flex w-100 p-3 mx-auto flex-column text-white text-center text-white-50">
+    <footer class="container d-flex w-100 p-3 mx-auto flex-column text-white text-center text-white-50">
         <p>
             Clubhaus Schornbach 2007 - {% now 'Y' %}
             <br>
-            <a>Impressum</a>
+            <a class="link-secondary" href="{% url 'impressum' %}">Impressum</a>
         </p>
     </footer>
 </div>
diff --git a/clubhaus/homepage/templates/homepage/events.html b/clubhaus/homepage/templates/homepage/events.html
index b3da3bf..f10d134 100644
--- a/clubhaus/homepage/templates/homepage/events.html
+++ b/clubhaus/homepage/templates/homepage/events.html
@@ -5,7 +5,7 @@
 {% block extra_header_block %}
     <style>
         .cus-bg-image {
-            background-image: url("{% static 'homepage/web-party.jpg' %}");
+            background-image: url("{% static 'homepage/background.jpg' %}");
             background-repeat: no-repeat;
             background-position: center;
             background-size: cover;
@@ -35,7 +35,7 @@
         <div class="container py-4 text-white">
 
             <div class="row">
-                <h1 class="display-1 fw-bold">{{ next_event.name }} Event</h1>
+                <h1 class="display-1 fw-bold fst-italic">{{ next_event.name }}</h1>
             </div>
 
             <!-- countdown -->
@@ -61,12 +61,12 @@
             <!-- links -->
             <div class="row justify-content-center my-5">
                 <div class="col-auto display-6 m-2">
-                    <a href="#info">
+                    <a href="https://open.spotify.com/playlist/00FYaeOKftIb4zWDEShmtD?si=78a7ac31b6f84992" target="_blank">
                         <span class="badge rounded-pill text-bg-dark"><i class="bi-spotify"></i> Playlist</span>
                     </a>
                 </div>
                 <div class="col-auto display-6 m-2">
-                    <a href="#info">
+                    <a href="https://www.wetter.com/deutschland/schorndorf/DE0009600.html" target="_blank">
                         <span class="badge rounded-pill text-bg-dark"><i class="bi-cloud"></i> Wetter</span>
                     </a>
                 </div>
diff --git a/clubhaus/homepage/templates/homepage/index.html b/clubhaus/homepage/templates/homepage/index.html
index ab4386f..af802c5 100644
--- a/clubhaus/homepage/templates/homepage/index.html
+++ b/clubhaus/homepage/templates/homepage/index.html
@@ -13,7 +13,8 @@
 {% endblock %}
 
 {% block main %}
-    <div class="d-flex h-100 mx-3">
-        <main class="d-flex flex-grow-1 w-100 my-5 mx-auto bg-logo" style="max-width: 42rem"></main>
+    <div class="d-flex flex-column h-100 mx-3">
+        <main class="d-flex row flex-grow-1 w-100 mt-5 mb-4 mx-auto bg-logo" style="max-width: 42rem"></main>
+        <div class="d-flex mb-3 mt-0 mx-auto flex-column text-white text-center display-3 font-milestone">The Original</div>
     </div>
 {% endblock %}
diff --git a/clubhaus/homepage/templates/homepage/tobacco.html b/clubhaus/homepage/templates/homepage/tobacco.html
index ad819cc..aad4482 100644
--- a/clubhaus/homepage/templates/homepage/tobacco.html
+++ b/clubhaus/homepage/templates/homepage/tobacco.html
@@ -3,23 +3,41 @@
 
 {% block site_name %}Tobacco Card{% endblock %}
 
+{% block extra_header_block %}
+    <style>
+        .indigo-800 {
+            background-color: #290661;
+        }
+
+        .red-700 {
+            background-color: #841f29;
+        }
+
+        .red-800 {
+            background-color: #58151c;
+        }
+    </style>
+{% endblock %}
+
 {% block extra_scripts_block %}
     <script defer src="{% static 'homepage/assets/masonry/masonry.pkgd.min.js' %}"></script>
 {% endblock %}
 
 {% block main %}
-    <main class="container text-white w-100">
+    <main class="container d-flex flex-grow-1 flex-column text-white w-100">
         <div class="row text-center mb-3">
-            <h1>Tabacco Card</h1>
+            <h1 class="fst-italic">Tobacco Card</h1>
         </div>
 
-        <div class="row m-0" data-masonry='{"percentPosition": true }'>
+        <div class="w-100 row m-0" data-masonry='{"percentPosition": true }'>
             {% for tobacco in tobaccos %}
                 <div class="col-sm-6 col-lg-4 col-sm-12 mb-4 text-center">
-                    <div class="card {% if tobacco.in_stock %} bg-success {% else %} bg-secondary text-decoration-line-through {% endif %}">
-                        <div class="card-body">
-                            <h5 class="card-title">{{ tobacco.name }}</h5>
+                    <div class="card {% if tobacco.in_stock %} bg-success {% else %} red-700 text-decoration-line-through {% endif %}">
+                        <div class="card-header">
+                            <h4 class="align-baseline">{{ tobacco.name }}</h4>
                             <h6 class="card-subtitle mb-2">{{ tobacco.category.name }}</h6>
+                        </div>
+                        <div class="card-body">
                             <p class="card-text">{{ tobacco.description }}</p>
                         </div>
                     </div>
