diff --git a/webdev-prosjekt1/src/App.css b/webdev-prosjekt1/src/App.css
index 7d977c5..63a8f47 100644
--- a/webdev-prosjekt1/src/App.css
+++ b/webdev-prosjekt1/src/App.css
@@ -10,10 +10,7 @@ body {
 
 .app-shell {
 	min-height: 100vh;
-	background: radial-gradient(circle at 78% 42%,
-			#43331e 0,
-			#1c1814 28%,
-			#11100f 66%);
+	background: var(--page_background_gradient);
 	overflow: hidden;
 }
 
@@ -93,7 +90,7 @@ body {
 
 	object-fit: contain;
 
-	filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.45));
+	filter: drop-shadow(0 20px 25px var(--shadow_hero));
 }
 
 .art-glow {
@@ -104,7 +101,7 @@ body {
 
 	border-radius: 50%;
 
-	background: rgba(226, 157, 38, 0.13);
+	background: var(--hero_glow);
 
 	filter: blur(45px);
 }
diff --git a/webdev-prosjekt1/src/components/AlbumDetailPage.css b/webdev-prosjekt1/src/components/AlbumDetailPage.css
index 76dd114..6467406 100644
--- a/webdev-prosjekt1/src/components/AlbumDetailPage.css
+++ b/webdev-prosjekt1/src/components/AlbumDetailPage.css
@@ -1,8 +1,8 @@
 .album-detail-page {
 	min-height: 100vh;
 	padding-bottom: 80px;
-	color: #f8f0df;
-	background: radial-gradient(circle at 26% 44%, #43331e 0, #1c1814 31%, #11100f 70%);
+	color: var(--text_primary);
+	background: var(--detail_background_gradient);
 }
 
 .album-detail-page .detail-content {
@@ -22,16 +22,16 @@
 	width: 100%;
 	margin: 0;
 	aspect-ratio: 1;
-	border: 1px solid rgba(212, 175, 55, 0.42);
-	background: rgba(17, 16, 15, 0.72);
-	box-shadow: 18px 22px 0 rgba(212, 175, 55, 0.08), 0 24px 50px rgba(0, 0, 0, 0.36);
+	border: 1px solid var(--border_gold);
+	background: var(--surface_dark_transparent);
+	box-shadow: 18px 22px 0 var(--shadow_gold), 0 24px 50px var(--shadow_black);
 }
 
 .album-detail-page .detail-art::after {
 	content: '';
 	position: absolute;
 	inset: 13px;
-	border: 1px solid rgba(212, 175, 55, 0.2);
+	border: 1px solid var(--border_gold_inner);
 }
 
 .album-detail-page .detail-art img {
@@ -77,12 +77,12 @@
 .album-detail-page .detail-subtitle {
 	margin: 22px 0 0;
 	font-size: clamp(1.05rem, 2vw, 1.35rem);
-	color: #d9cdb8;
+	color: var(--text_secondary);
 }
 
 .album-detail-page .detail-meta {
 	margin: 12px 0 0;
-	color: #a79a86;
+	color: var(--text_muted);
 	text-transform: capitalize;
 }
 
@@ -91,14 +91,14 @@
 	height: 1px;
 	margin: 36px 0 18px;
 	border: 0;
-	background: rgba(212, 175, 55, 0.32);
+	background: var(--border_gold_subtle);
 }
 
 .album-tracks {
 	max-width: 1000px;
 	margin: 30px auto 0;
 	padding: 56px 48px 0;
-	border-top: 1px solid rgba(212, 175, 55, 0.32);
+	border-top: 1px solid var(--border_gold_subtle);
 }
 
 .album-tracks h2 {
@@ -110,7 +110,7 @@
 .album-tracks p {
 	max-width: 660px;
 	margin: 28px 0 0;
-	color: #d9cdb8;
+	color: var(--text_secondary);
 	font-size: 1.05rem;
 	line-height: 1.9;
 }
diff --git a/webdev-prosjekt1/src/components/ArtistDetailPage.css b/webdev-prosjekt1/src/components/ArtistDetailPage.css
index 1bc8deb..3a2081e 100644
--- a/webdev-prosjekt1/src/components/ArtistDetailPage.css
+++ b/webdev-prosjekt1/src/components/ArtistDetailPage.css
@@ -1,8 +1,8 @@
 .artist-detail-page {
 	min-height: 100vh;
 	padding-bottom: 80px;
-	color: #f8f0df;
-	background: radial-gradient(circle at 26% 44%, #43331e 0, #1c1814 31%, #11100f 70%);
+	color: var(--text_primary);
+	background: var(--detail_background_gradient);
 }
 
 .artist-detail-page .detail-content {
@@ -22,18 +22,18 @@
 	width: 100%;
 	margin: 0;
 	aspect-ratio: 1;
-	border: 1px solid rgba(212, 175, 55, 0.42);
+	border: 1px solid var(--border_gold);
 	border-radius: 50%;
 	overflow: hidden;
-	background: rgba(17, 16, 15, 0.72);
-	box-shadow: 18px 22px 0 rgba(212, 175, 55, 0.08), 0 24px 50px rgba(0, 0, 0, 0.36);
+	background: var(--surface_dark_transparent);
+	box-shadow: 18px 22px 0 var(--shadow_gold), 0 24px 50px var(--shadow_black);
 }
 
 .artist-detail-page .detail-art::after {
 	content: '';
 	position: absolute;
 	inset: 13px;
-	border: 1px solid rgba(212, 175, 55, 0.2);
+	border: 1px solid var(--border_gold_inner);
 	border-radius: 50%;
 }
 
@@ -80,12 +80,12 @@
 .artist-detail-page .detail-subtitle {
 	margin: 22px 0 0;
 	font-size: clamp(1.05rem, 2vw, 1.35rem);
-	color: #d9cdb8;
+	color: var(--text_secondary);
 }
 
 .artist-detail-page .detail-meta {
 	margin: 12px 0 0;
-	color: #a79a86;
+	color: var(--text_muted);
 	text-transform: capitalize;
 }
 
@@ -94,14 +94,14 @@
 	height: 1px;
 	margin: 36px 0 18px;
 	border: 0;
-	background: rgba(212, 175, 55, 0.32);
+	background: var(--border_gold_subtle);
 }
 
 .artist-content {
 	max-width: 1000px;
 	margin: 30px auto 0;
 	padding: 56px 48px 0;
-	border-top: 1px solid rgba(212, 175, 55, 0.32);
+	border-top: 1px solid var(--border_gold_subtle);
 }
 
 .artist-content h2 {
@@ -113,7 +113,7 @@
 .artist-content p {
 	max-width: 660px;
 	margin: 28px 0 0;
-	color: #d9cdb8;
+	color: var(--text_secondary);
 	font-size: 1.05rem;
 	line-height: 1.9;
 }
diff --git a/webdev-prosjekt1/src/components/Button.css b/webdev-prosjekt1/src/components/Button.css
index 22ba9db..000bf8e 100644
--- a/webdev-prosjekt1/src/components/Button.css
+++ b/webdev-prosjekt1/src/components/Button.css
@@ -18,7 +18,7 @@ button {
 }
 
 button:hover {
-	background: #f7ca65;
+	background: var(--primary_color_hover);
 }
 
 button img {
diff --git a/webdev-prosjekt1/src/components/Header.css b/webdev-prosjekt1/src/components/Header.css
index f19f58f..4d88695 100644
--- a/webdev-prosjekt1/src/components/Header.css
+++ b/webdev-prosjekt1/src/components/Header.css
@@ -2,7 +2,7 @@
 	max-width: 1240px;
 	margin: 0 auto;
 	padding: 18px 48px 14px;
-	border-bottom: 2px solid rgba(212, 175, 55, 0.22);
+	border-bottom: 2px solid var(--border_gold_faint);
 }
 
 .app-title {
diff --git a/webdev-prosjekt1/src/components/Searchbar.css b/webdev-prosjekt1/src/components/Searchbar.css
index 0aac8e5..70cf389 100644
--- a/webdev-prosjekt1/src/components/Searchbar.css
+++ b/webdev-prosjekt1/src/components/Searchbar.css
@@ -8,10 +8,10 @@
 
 	padding: 0 16px;
 
-	border: 1px solid #716044;
+	border: 1px solid var(--border_color);
     border-radius: var(--box_border_radius);
 
-	background: rgba(20, 18, 15, 0.8);
+	background: var(--search_background);
 }
 
 .search-icon {
@@ -31,14 +31,14 @@
 	border: 0;
 	outline: 0;
 
-	color: #f8f0df;
+	color: var(--text_primary);
 	background: transparent;
 
 	font: inherit;
 }
 
 .searchbar input::placeholder {
-	color: #847b6c;
+	color: var(--text_subtle);
 }
 
 .searchbar:focus-within {
diff --git a/webdev-prosjekt1/src/components/SongDetailPage.css b/webdev-prosjekt1/src/components/SongDetailPage.css
index a5ba47d..1900baa 100644
--- a/webdev-prosjekt1/src/components/SongDetailPage.css
+++ b/webdev-prosjekt1/src/components/SongDetailPage.css
@@ -1,8 +1,8 @@
 .song-detail-page {
 	min-height: 100vh;
 	padding-bottom: 80px;
-	color: #f8f0df;
-	background: radial-gradient(circle at 26% 44%, #43331e 0, #1c1814 31%, #11100f 70%);
+	color: var(--text_primary);
+	background: var(--detail_background_gradient);
 }
 
 .detail-content {
@@ -22,16 +22,16 @@
 	width: 100%;
 	margin: 0;
 	aspect-ratio: 1;
-	border: 1px solid rgba(212, 175, 55, 0.42);
-	background: rgba(17, 16, 15, 0.72);
-	box-shadow: 18px 22px 0 rgba(212, 175, 55, 0.08), 0 24px 50px rgba(0, 0, 0, 0.36);
+	border: 1px solid var(--border_gold);
+	background: var(--surface_dark_transparent);
+	box-shadow: 18px 22px 0 var(--shadow_gold), 0 24px 50px var(--shadow_black);
 }
 
 .detail-art::after {
 	content: '';
 	position: absolute;
 	inset: 13px;
-	border: 1px solid rgba(212, 175, 55, 0.2);
+	border: 1px solid var(--border_gold_inner);
 }
 
 .detail-art img {
@@ -77,12 +77,12 @@
 .detail-subtitle {
 	margin: 22px 0 0;
 	font-size: clamp(1.05rem, 2vw, 1.35rem);
-	color: #d9cdb8;
+	color: var(--text_secondary);
 }
 
 .detail-meta {
 	margin: 12px 0 0;
-	color: #a79a86;
+	color: var(--text_muted);
 }
 
 .detail-divider {
@@ -90,12 +90,12 @@
 	height: 1px;
 	margin: 36px 0 18px;
 	border: 0;
-	background: rgba(212, 175, 55, 0.32);
+	background: var(--border_gold_subtle);
 }
 
 .detail-coming-soon {
 	margin: 0;
-	color: #847b6c;
+	color: var(--text_subtle);
 	font-size: 0.95rem;
 }
 
@@ -106,7 +106,7 @@
 	max-width: 1000px;
 	margin: 30px auto 0;
 	padding: 56px 48px 0;
-	border-top: 1px solid rgba(212, 175, 55, 0.32);
+	border-top: 1px solid var(--border_gold_subtle);
 }
 
 .lyrics-heading h2 {
@@ -116,7 +116,7 @@
 }
 
 .lyrics-copy {
-	color: #d9cdb8;
+	color: var(--text_secondary);
 	font-size: 1.05rem;
 	line-height: 1.9;
 }
diff --git a/webdev-prosjekt1/src/components/TrackCard.css b/webdev-prosjekt1/src/components/TrackCard.css
index 9e6f94e..74c9d26 100644
--- a/webdev-prosjekt1/src/components/TrackCard.css
+++ b/webdev-prosjekt1/src/components/TrackCard.css
@@ -3,10 +3,12 @@
     padding: 0.3rem;
 
     width: 100%;
+    height: 72px;
 
     border-radius: 0.5rem;
 
-    background-color: rgb(43, 43, 43);
+    background-color: var(--surface_background);
+    color: var(--text_primary);
     cursor: pointer;
 }
 
@@ -22,7 +24,9 @@
 }
 
 .card-image-wrapper {
-    max-width: 60px;
+    flex: 0 0 60px;
+    width: 60px;
+    height: 60px;
     border-radius: 0.5rem;
     overflow: hidden;
 }
@@ -40,19 +44,30 @@
     flex-direction: column;
     justify-content: center;
 
-    gap: 0.7rem;
+    min-width: 0;
+    gap: 0.35rem;
 }
 
 .card-header {
     width: 100%;
     margin: 0;
-    
+
+    color: var(--text_primary);
     font-size: 1rem;
+    line-height: 1.2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
 }
 
 .artist-name {
     width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
+    color: var(--text_secondary);
     font-size: 0.8rem;
 }
 
@@ -61,3 +76,7 @@
     align-items: center;
     justify-content: center;
 }
+
+.duration-display {
+    color: var(--primary_color);
+}
diff --git a/webdev-prosjekt1/src/components/TrackCard.tsx b/webdev-prosjekt1/src/components/TrackCard.tsx
index 7cf0f22..d7a6d3c 100644
--- a/webdev-prosjekt1/src/components/TrackCard.tsx
+++ b/webdev-prosjekt1/src/components/TrackCard.tsx
@@ -30,7 +30,7 @@ export const TrackCard = ({ track, album, onClick }: TrackCardProps) => {
 
             <div className='card-info-container'>
                 <div className='title-and-artist'>
-                    <h3 className='card-header'>{track.name}</h3>
+                    <h3 className='card-header' title={track.name}>{track.name}</h3>
                     <span className='artist-name'>{artistNames}</span>
                 </div>
                 <div className='duration-display-container'>
diff --git a/webdev-prosjekt1/src/variables.css b/webdev-prosjekt1/src/variables.css
index 1071547..fb24ff5 100644
--- a/webdev-prosjekt1/src/variables.css
+++ b/webdev-prosjekt1/src/variables.css
@@ -1,7 +1,26 @@
 :root {
 	--font_family: sans-serif;
 	--primary_color: #d4af37;
+	--primary_color_hover: #f7ca65;
 	--primary_background_color: #11100f;
+	--page_background_gradient: radial-gradient(circle at 78% 42%, #43331e 0, #1c1814 28%, #11100f 66%);
+	--detail_background_gradient: radial-gradient(circle at 26% 44%, #43331e 0, #1c1814 31%, #11100f 70%);
+	--surface_background: #2b2b2b;
+	--text_primary: #f8f0df;
+	--text_secondary: #d9cdb8;
+	--text_muted: #a79a86;
+	--text_subtle: #847b6c;
+	--border_color: #716044;
+	--border_gold: rgba(212, 175, 55, 0.42);
+	--border_gold_subtle: rgba(212, 175, 55, 0.32);
+	--border_gold_faint: rgba(212, 175, 55, 0.22);
+	--border_gold_inner: rgba(212, 175, 55, 0.2);
+	--surface_dark_transparent: rgba(17, 16, 15, 0.72);
+	--shadow_gold: rgba(212, 175, 55, 0.08);
+	--shadow_black: rgba(0, 0, 0, 0.36);
+	--shadow_hero: rgba(0, 0, 0, 0.45);
+	--hero_glow: rgba(226, 157, 38, 0.13);
+	--search_background: rgba(20, 18, 15, 0.8);
 	--box_border_radius: 4px;
     --margin: 0;
 }
\ No newline at end of file