diff --git a/assets/css/main.css b/assets/css/main.css
index 4c7aaa1..59aa844 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,5 +1,13 @@
 @import "tailwindcss";
 
+body {
+    font-family: 'Poppins';
+}
+
+.container {
+    @apply max-w-4/5 mx-auto;
+}
+
 .btn-primary {
     @apply bg-blue-600 text-white px-4 py-2 rounded;
 }
diff --git a/components/ArtistListItem.vue b/components/ArtistListItem.vue
index b9086c4..9fdc094 100644
--- a/components/ArtistListItem.vue
+++ b/components/ArtistListItem.vue
@@ -4,11 +4,11 @@ const { runningOrder, country, artist, title, flag, artistID } = defineProps(['r
 
 <template>
     <NuxtLink :to="`/review/${artistID}`">
-    <div class="flex gap-4 border border-slate-200 justify-between overflow-clip items-center rounded-2xl">
-        <h2 class="w-1/4 text-center">{{ runningOrder }}</h2>
+    <div class="flex gap-4 border border-slate-200 justify-between overflow-clip items-center rounded-2xl ArtistCard">
+        <h2 class="w-1/4 text-center text-slate-300 text-6xl">{{ runningOrder }}</h2>
         <div class="flex flex-col w-1/2">
             <h2>{{ country }}</h2>
-            <p class="flex gap-2 text-sm">
+            <p class="flex md:gap-2 text-sm flex-col md:flex-row">
                 <span class="font-bold">{{ artist }}</span>
                 <span class="italic">{{ title }}</span>
             </p>
@@ -16,4 +16,11 @@ const { runningOrder, country, artist, title, flag, artistID } = defineProps(['r
         <img class="w-1/4" src="https://placehold.co/100" alt="{{ flag }}">
     </div>
     </NuxtLink>
-</template>
\ No newline at end of file
+</template>
+
+<style>
+    .ArtistCard {
+        background-color: rgba(255, 255, 255, 0.2);
+    }
+</style>
+    
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 68aed70..57dd604 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,13 +1,23 @@
 <template>
     <title>Eurovision 2025</title>
     <Header />
-    <div class="container mx-auto pt-6 p-4 bg-slate-400">
+    <div class="container mx-auto pt-6 p-4">
         <slot />
     </div>
 </template>
 
 <style>
 body {
-    background-color: #aaa;
+    background-image: url('/bg.webp');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: auto 100%;
 }
+
+.container {
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    height: 100dvh;
+}
+
 </style>
\ No newline at end of file
diff --git a/public/bg.avif b/public/bg.avif
new file mode 100644
index 0000000..7f9f439
Binary files /dev/null and b/public/bg.avif differ
diff --git a/public/bg.webp b/public/bg.webp
new file mode 100644
index 0000000..bb7f112
Binary files /dev/null and b/public/bg.webp differ