diff --git a/my-app/public/stort-grupprum.jpg b/my-app/public/stort-grupprum.jpg
new file mode 100644
index 0000000..8fc3cfd
Binary files /dev/null and b/my-app/public/stort-grupprum.jpg differ
diff --git a/my-app/src/components/layout/Navigation.module.css b/my-app/src/components/layout/Navigation.module.css
index d92f9c5..82f1d42 100644
--- a/my-app/src/components/layout/Navigation.module.css
+++ b/my-app/src/components/layout/Navigation.module.css
@@ -47,6 +47,7 @@
 	font-size: 1.1rem;
 	font-weight: var(--font-weight-semibold);
 	color: white;
+	font-family: 'Caecilia', serif;
 }
 
 .menuIcon {
diff --git a/my-app/src/components/ui/Card.jsx b/my-app/src/components/ui/Card.jsx
index f851527..5c1a293 100644
--- a/my-app/src/components/ui/Card.jsx
+++ b/my-app/src/components/ui/Card.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import styles from './Card.module.css';
 
-const Card = ({ imageUrl, header, subheader, features = [], onClick, as: Component = 'div' }) => {
+const Card = ({ imageUrl, header, subheader, buttonText = "Hitta ledig tid", colorVariant, onClick, as: Component = 'div' }) => {
 	const cardProps = {
-		className: styles.card,
-		onClick,
+		className: `${styles.card} ${colorVariant ? styles[colorVariant] : ''}`,
 		...(Component === 'div' && {
 			role: "button",
 			tabIndex: 0,
@@ -19,35 +18,21 @@ const Card = ({ imageUrl, header, subheader, features = [], onClick, as: Compone
 
 	return (
 		<Component {...cardProps}>
-			<div className={styles.imageSection} style={{ backgroundImage: `url(${imageUrl})` }}>
-				<div className={styles.imageOverlay}></div>
+			<div className={styles.imageContainer}>
+				<img className={styles.image} src={imageUrl} alt={header} />
 			</div>
 			
 			<div className={styles.contentSection}>
-				<h3 className={styles.header}>{header}</h3>
-				{subheader && (
-					<p className={styles.subheader}>{subheader}</p>
-				)}
-				{features.length > 0 && (
-					<div className={styles.features}>
-						{features.map((feature, index) => (
-							<div key={index} className={styles.feature}>
-								{feature.icon && (
-									<div className={styles.featureIcon}>
-										{feature.icon}
-									</div>
-								)}
-								<span>{feature.text}</span>
-							</div>
-						))}
-					</div>
-				)}
-			</div>
-			
-			<div className={styles.actionSection}>
-				<div className={styles.actionIcon}>
-					→
+				<div className={styles.headerContainer}>
+					<h3 className={styles.header}>{header}</h3>
+					{subheader && (
+						<p className={styles.subheader}>{subheader}</p>
+					)}
 				</div>
+
+				<button className={styles.actionButton} onClick={onClick}>
+					{buttonText}
+				</button>
 			</div>
 		</Component>
 	);
diff --git a/my-app/src/components/ui/Card.module.css b/my-app/src/components/ui/Card.module.css
index 0a00bdf..e4c5400 100644
--- a/my-app/src/components/ui/Card.module.css
+++ b/my-app/src/components/ui/Card.module.css
@@ -1,20 +1,50 @@
 .card {
 	display: flex;
-	background: var(--bg-primary);
-	border: 2px solid var(--border-light);
-	border-radius: var(--border-radius-xl);
+	flex-direction: column;
+	gap: 1.2rem;
+	/*background: var(--bg-secondary);*/
+	background: #151516;
+	border: 1px solid #2f2e2d;
+	/*border-radius: 8px;*/
 	overflow: hidden;
 	cursor: pointer;
-	transition: all var(--transition-medium);
-	box-shadow: var(--shadow-sm);
+	transition: all 0.2s ease;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 	text-decoration: none;
 	color: inherit;
+	aspect-ratio: 1 / 1;
+	padding: 1rem;
 }
 
-.card:hover {
-	border-color: var(--color-primary);
-	box-shadow: var(--shadow-lg);
-	transform: translateY(-1px);
+@media (hover: hover) {
+	.card:hover {
+		border-color: #4a4a4a;
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+		background-color: rgb(23, 23, 25);
+		transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+	}
+
+	.card:hover .image {
+		filter: grayscale(1);
+	}
+
+	.card:hover .imageContainer::after {
+		opacity: 1;
+	}
+}
+
+.card:active {
+	border-color: #4a4a4a;
+	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+	background-color: rgb(23, 23, 25);
+}
+
+.card:active .image {
+	filter: grayscale(1);
+}
+
+.card:active .imageContainer::after {
+	opacity: 1;
 }
 
 .card:focus {
@@ -22,95 +52,86 @@
 	outline-offset: 2px;
 }
 
-.imageSection {
-	width: 120px;
-	min-width: 120px;
-	height: 100px;
-	background-size: cover;
-	background-position: center;
-	background-color: var(--bg-secondary);
+.imageContainer {
+	background-color: #a0a0a0;
 	position: relative;
+	aspect-ratio: 5 / 3;
 }
 
-.imageOverlay {
+.image {
+	object-position: 50% 50%;
 	position: absolute;
-	inset: 0;
-	background: linear-gradient(45deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05));
+	object-fit: cover;
+	width: 100%;
+	height: 100%;
+	display: block;
+	z-index: 1;
+	filter: grayscale(0);
+}
+
+.imageContainer::after {
+	content: "";
+	display: block;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	/*background-color: #906519;*/
+	background-color: var(--su-blue);
+	mix-blend-mode: screen;
+	opacity: 0;
+	z-index: 999;
+	transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+	box-sizing: border-box;
 }
 
 .contentSection {
 	flex: 1;
-	padding: var(--spacing-lg);
 	display: flex;
 	flex-direction: column;
-	justify-content: center;
-	gap: var(--spacing-sm);
+	gap: 8px;
+	justify-content: space-between;
 }
 
 .header {
 	margin: 0;
-	font-size: var(--font-size-2xl);
-	font-weight: var(--font-weight-semibold);
-	color: var(--text-primary);
-	line-height: var(--line-height-tight);
+	font-size: 20px;
+	font-weight: 400;
+	color: white;
+	line-height: 1.3;
 }
 
 .subheader {
-	margin: 0;
-	font-size: var(--font-size-md);
-	font-weight: var(--font-weight-normal);
-	color: var(--text-secondary);
-	line-height: var(--line-height-normal);
+	margin: 0 0 16px 0;
+	font-size: 14px;
+	font-weight: 400;
+	color: #b0b0b0;
+	line-height: 1.4;
 }
 
-.features {
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--spacing-sm);
-	margin-top: var(--spacing-xs);
-}
-
-.feature {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-xs);
-	font-size: var(--font-size-sm);
-	color: var(--text-tertiary);
-	padding: var(--spacing-xs) var(--spacing-sm);
-	background: var(--bg-secondary);
-	border-radius: var(--border-radius-sm);
-}
-
-.featureIcon {
-	width: 14px;
-	height: 14px;
-	color: var(--color-primary);
-}
-
-.actionSection {
-	width: 60px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
-	position: relative;
-}
-
-.actionSection::before {
-	content: '';
-	position: absolute;
-	inset: 0;
-	background: rgba(255, 255, 255, 0.1);
-	opacity: 0;
-	transition: opacity var(--transition-fast);
-}
-
-.card:hover .actionSection::before {
-	opacity: 1;
-}
-
-.actionIcon {
-	width: 24px;
-	height: 24px;
+.actionButton {
+	background: transparent;
+	border: 1px solid #504f4c;
+	/*border-radius: 4px;*/
 	color: white;
+	padding: 12px 16px;
+	font-size: 14px;
+	font-weight: 400;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	text-align: center;
+	width: 100%;
+	box-sizing: border-box;
+	height: fit-content;
 }
+
+.actionButton:hover {
+	background: rgba(255, 255, 255, 0.1);
+	border-color: rgba(255, 255, 255, 0.8);
+}
+
+.actionButton:focus {
+	outline: 1px solid white;
+	outline-offset: 2px;
+}
\ No newline at end of file
diff --git a/my-app/src/fonts.css b/my-app/src/fonts.css
index 688983c..7ac4a6a 100644
--- a/my-app/src/fonts.css
+++ b/my-app/src/fonts.css
@@ -60,4 +60,68 @@
     font-weight: 700;
     font-style: italic;
     font-display: swap;
+}
+
+@font-face {
+    font-family: 'Caecilia';
+    src: url('/caecilia/CaeciliaCom-45Light.ttf');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Caecilia';
+    src: url('/caecilia/CaeciliaCom-46LightItalic.ttf');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Caecilia';
+    src: url('/caecilia/CaeciliaCom-55Roman.ttf');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Caecilia';
+    src: url('/caecilia/CaeciliaCom-56Italic.ttf');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Caecilia';
+    src: url('/caecilia/CaeciliaCom-75Bold.ttf');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Caecilia';
+    src: url('/caecilia/CaeciliaCom-76BoldItalic.ttf');
+    font-weight: 700;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Caecilia';
+    src: url('/caecilia/CaeciliaCom-85Heavy.ttf');
+    font-weight: 800;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Caecilia';
+    src: url('/caecilia/CaeciliaCom-86HeavyItalic.ttf');
+    font-weight: 800;
+    font-style: italic;
+    font-display: swap;
 }
\ No newline at end of file
diff --git a/my-app/src/pages/RoomBooking.jsx b/my-app/src/pages/RoomBooking.jsx
index 2a2c7cf..6ca65c8 100644
--- a/my-app/src/pages/RoomBooking.jsx
+++ b/my-app/src/pages/RoomBooking.jsx
@@ -34,9 +34,17 @@ export function RoomBooking({ bookings, showSuccessBanner, lastCreatedBooking, o
 			)}
 			<h1 className={styles.pageHeading}>Lokalbokning</h1>
 			<h2 className={styles.sectionHeading}>Ny bokning</h2>
-			<Link to='/new-booking'>
-				<Card imageUrl="./grupprum.jpg" header="Litet grupprum" subheader="Plats för 5 personer" />
-			</Link>
+
+			<div className={styles.roomCategoryCards}>
+				<Link to='/new-booking'>
+					<Card imageUrl="./grupprum.jpg" header="Litet grupprum" subheader="Plats för 5 personer" />
+				</Link>
+				<Link to='/new-booking'>
+					<Card imageUrl="./stort-grupprum.jpg" header="Stort grupprum" subheader="Plats för 10 personer" />
+				</Link>
+			</div>
+			<hr className={styles.sectionDivider} />
+
 			<h2 className={styles.sectionHeading}>Mina bokingar</h2>
 			<BookingsList 
 				bookings={bookings} 
diff --git a/my-app/src/pages/RoomBooking.module.css b/my-app/src/pages/RoomBooking.module.css
index 2997e76..179e3b4 100644
--- a/my-app/src/pages/RoomBooking.module.css
+++ b/my-app/src/pages/RoomBooking.module.css
@@ -1,14 +1,14 @@
 .pageContainer {
 	color: var(--text-primary);
-	background-color: var(--bg-tertiary);
+	background-color: var(--bg-primary);
 	padding: var(--container-padding);
 	min-height: 100vh;
 }
 
 .pageHeading {
 	font-size: var(--font-size-6xl);
-	font-weight: var(--font-weight-light);
-	font-family: var(--font-primary);
+	font-weight: var(--font-weight-medium);
+	font-family: var(--font-header);
 	color: var(--text-primary);
 }
 
@@ -19,10 +19,17 @@
 	color: var(--text-primary);
 }
 
+.roomCategoryCards {
+	display: flex;
+	flex-direction: column;
+	gap: 2rem;
+}
+
 .sectionDivider {
 	border: none;
+	margin-top: 4rem;
+	margin-bottom: 4rem;
 	border-top: var(--border-width-thin) solid var(--border-medium);
-	margin-bottom: var(--spacing-3xl);
 }
 
 .welcomeSection {
diff --git a/my-app/src/styles/variables.css b/my-app/src/styles/variables.css
index cf0af00..698c35b 100644
--- a/my-app/src/styles/variables.css
+++ b/my-app/src/styles/variables.css
@@ -88,6 +88,7 @@
   /* === TYPOGRAPHY === */
   
   /* Font Family */
+  --font-header: 'Caecilia', serif;
   --font-primary: 'The Sans', system-ui, sans-serif;
   --font-secondary: system-ui, -apple-system, sans-serif;
   
@@ -430,8 +431,9 @@
   --text-muted: #666;
   
   /* Background Colors */
-  --bg-primary: #1a1a1a;
-  --bg-secondary: #2a2a2a;
+  /*--bg-primary: #1a1a1a;*/
+  --bg-primary: #0F0F0F;
+  --bg-secondary: #21211F;
   --bg-tertiary: #333;
   --bg-muted: #3a3a3a;