diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 50d1a1c..6fa0089 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,13 +1,11 @@
 ---
 // src/components/Footer.astro
-import "../styles/components/Footer.css"
+import "/styles/components/Footer.css"
 const currentYear = new Date().getFullYear();
 ---
 
-<footer class="footer" id="footer">
+<footer class="footer">
 	<div class="footer-content">
-
-
 		<div class="footer-sections">
 			<div class="footer-section">
 				<h3>Öffnungszeiten</h3>
@@ -22,7 +20,7 @@ const currentYear = new Date().getFullYear();
 				<p>Gallus Pub</p>
 				<p>Metzgergasse 13</p>
 				<p>9000 St. Gallen</p>
-				<p><a href="tel:0772322770">077 232 27 70</a></p>
+				<p>Email:</p>
 				<p><a href="mailto:info@gallus-pub.ch">info@gallus-pub.ch</a></p>
 			</div>
 
@@ -30,9 +28,11 @@ const currentYear = new Date().getFullYear();
 				<h3>Raumreservationen</h3>
 				<p>Du planst einen Event?</p>
 				<p>Der "St.Gallerruum" im 2.OG</p>
-				<p>kann gemietet werden.</p>
+				<p>Kann gemietet werden.</p>
 				<p>Reservierungen via Whatsapp</p>
+				<p><a href="tel:0772322770">077 232 27 70</a></p>
 			</div>
+
 		</div>
 		<div class="copyright">
 			&copy; {currentYear} Gallus Pub. Alle Rechte vorbehalten.
diff --git a/src/styles/components/Drinks.css b/src/styles/components/Drinks.css
index 9be84f6..8457b00 100644
--- a/src/styles/components/Drinks.css
+++ b/src/styles/components/Drinks.css
@@ -1,5 +1,5 @@
 .Drinks {
-  font-family: var(--font-family-primary);
+  font-family: var(--font-family-primary), serif;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -15,7 +15,7 @@
 
 .title {
   font-size: var(--font-size-large);
-  margin-bottom: 0.5rem;
+  margin-bottom: 1.5rem;
   font-weight: bold;
   color: var(--color-text);
   text-transform: uppercase;
@@ -25,7 +25,6 @@
 .card-link {
   border: 2px solid var(--color-accent-beige);
   padding: 0.75rem 1.5rem;
-  margin-top: 2.5rem;
   margin-bottom: 2.5rem;
   color: var(--color-text);
   background-color: var(--color-background);
@@ -69,6 +68,7 @@
   align-items: center;
   margin-bottom: 1.5rem;
   padding: 1rem;
+  background-color: rgba(0, 0, 0, 0.2);
   border-radius: var(--border-radius);
   width: 80%;
   max-width: 300px;
@@ -81,8 +81,8 @@
 }
 
 .circle {
-  height: 35vh;
-  width: 35vh;
+  height: 9em;
+  width: 9em;
   border: 2px solid var(--color-accent-beige);
   border-radius: 50%;
   margin: 0.5rem;
@@ -94,7 +94,6 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  overflow: hidden;
 }
 
 .circle:hover {
@@ -110,25 +109,12 @@
   text-align: center;
   transition: opacity var(--transition-standard);
   position: absolute;
-  z-index: 2;
 }
 
 .circle:hover .circle-label {
   opacity: 1;
 }
 
-.circle-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-  border-radius: 50%;
-  z-index: 1;
-}
-
 .circle-row {
   display: flex;
   justify-content: center;
@@ -163,6 +149,10 @@
     width: 90%;
   }
 
+  .circle {
+    height: 5em;
+    width: 5em;
+  }
 
   .circle-label {
     font-size: 0.7rem;
diff --git a/src/styles/components/HoverCard.css b/src/styles/components/HoverCard.css
index 126a9e7..74040e7 100644
--- a/src/styles/components/HoverCard.css
+++ b/src/styles/components/HoverCard.css
@@ -1,7 +1,7 @@
 .hover-card {
 	position: relative;
-	width: 25rem;
-	height: 25rem;
+	width: 400px;
+	height: 400px;
 	border-radius: var(--border-radius);
 	background-color: var(--color-accent-green);
 	box-shadow: var(--box-shadow);
@@ -12,28 +12,8 @@
 	flex-direction: column;
 }
 
-/* Hover effects only for devices that support hover */
-@media (hover: hover) and (pointer: fine) {
-	.hover-card:hover {
-		transform: translateY(-5px);
-	}
-
-	.hover-card:hover .hover-text {
-		opacity: 1;
-	}
-
-	.hover-card:hover .card-image {
-		opacity: 0.1;
-	}
-}
-
-.card-title {
-	padding: 15px 15px 5px 15px;
-	margin: 0;
-	color: var(--color-accent-beige);
-	font-size: var(--font-size-medium);
-	text-align: center;
-	order: -2;
+.hover-card:hover {
+	transform: translateY(-5px);
 }
 
 .card_date {
@@ -104,12 +84,11 @@
 	scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
 }
 
-/* Active state for mobile tap functionality */
-.hover-card.active .hover-text {
+.hover-card:hover .hover-text {
 	opacity: 1;
 }
 
-.hover-card.active .card-image {
+.hover-card:hover .card-image {
 	opacity: 0.1;
 }
 
@@ -122,34 +101,5 @@
 	.hover-card {
 		width: 100%;
 		max-width: 350px;
-		/* Maintain square aspect ratio */
-		aspect-ratio: 1 / 1;
-		height: auto;
-		/* Add cursor pointer to indicate it's clickable */
-		cursor: pointer;
-	}
-
-	/* Add visual feedback for tap */
-	.hover-card:active {
-		transform: scale(0.98);
-	}
-
-	.hover-card::after {
-		position: absolute;
-		bottom: 10px;
-		right: 10px;
-		background-color: rgba(0, 0, 0, 0.7);
-		color: var(--color-accent-beige);
-		font-size: 0.7rem;
-		padding: 4px 8px;
-		border-radius: 12px;
-		opacity: 0.8;
-		pointer-events: none;
-		z-index: 10;
-	}
-
-	/* Hide the hint when card is active */
-	.hover-card.active::after {
-		display: none;
 	}
 }
\ No newline at end of file
diff --git a/src/utils/session.ts b/src/utils/session.ts
new file mode 100644
index 0000000..c171b4a
--- /dev/null
+++ b/src/utils/session.ts
@@ -0,0 +1,74 @@
+import crypto from "node:crypto";
+
+export type SessionData = {
+  user?: {
+    id: number;
+    login: string;
+    name?: string;
+    email?: string;
+  };
+  csrf?: string;
+};
+
+const COOKIE_NAME = "gp_session";
+
+function b64url(input: Buffer | string) {
+  return Buffer.from(input)
+    .toString("base64")
+    .replace(/=/g, "")
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_");
+}
+
+function sign(payload: string, secret: string) {
+  return crypto.createHmac("sha256", secret).update(payload).digest("base64url");
+}
+
+export function createSessionCookie(data: SessionData, secret = process.env.SESSION_SECRET || "") {
+  const payload = b64url(JSON.stringify(data));
+  const sig = sign(payload, secret);
+  return `${payload}.${sig}`;
+}
+
+export function parseSessionCookie(cookieValue: string | undefined, secret = process.env.SESSION_SECRET || ""): SessionData | undefined {
+  if (!cookieValue) return undefined;
+  const [payload, sig] = cookieValue.split(".");
+  if (!payload || !sig) return undefined;
+  const expected = sign(payload, secret);
+  if (!crypto.timingSafeEqual(Buffer.from(sig), Buffer.from(expected))) return undefined;
+  try {
+    const json = Buffer.from(payload.replace(/-/g, "+").replace(/_/g, "/"), "base64").toString("utf-8");
+    return JSON.parse(json);
+  } catch {
+    return undefined;
+  }
+}
+
+export function clearCookieHeader(name = COOKIE_NAME) {
+  return `${name}=; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=0`;
+}
+
+export function sessionCookieHeader(value: string, name = COOKIE_NAME) {
+  // 7 days
+  const maxAge = 60 * 60 * 24 * 7;
+  return `${name}=${value}; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=${maxAge}`;
+}
+
+export function getSessionFromRequest(req: Request, secret = process.env.SESSION_SECRET || ""): SessionData | undefined {
+  const cookie = req.headers.get("cookie") || "";
+  const match = cookie.match(/(?:^|; )gp_session=([^;]+)/);
+  if (!match) return undefined;
+  return parseSessionCookie(match[1], secret);
+}
+
+export function randomToken(bytes = 32) {
+  return crypto.randomBytes(bytes).toString("hex");
+}
+
+export const COOKIE_NAME_STATE = "oauth_state";
+
+export function setTempCookie(name: string, value: string) {
+  // short lived: 10 minutes
+  const maxAge = 60 * 10;
+  return `${name}=${value}; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=${maxAge}`;
+}