diff --git a/frontend/src/Layout.svelte b/frontend/src/Layout.svelte
index 53d9153..88e6517 100644
--- a/frontend/src/Layout.svelte
+++ b/frontend/src/Layout.svelte
@@ -57,7 +57,7 @@
           oldDeviceStatus = $deviceStatus;
           reject();
         }
-      }, 2000);
+      }, 1500);
     });
   }
 
diff --git a/frontend/src/components/HomePlaylistsSection.svelte b/frontend/src/components/HomePlaylistsSection.svelte
index 9cade8d..ef47a3b 100644
--- a/frontend/src/components/HomePlaylistsSection.svelte
+++ b/frontend/src/components/HomePlaylistsSection.svelte
@@ -14,6 +14,7 @@
   // ui components
   import { Modal } from '@skeletonlabs/skeleton-svelte';
   import { toaster } from '../lib/toaster';
+  import PlaylistCard from './PlaylistCard.svelte';
 
   // utils
   import { formatDate } from '../lib/utils';
@@ -153,46 +154,7 @@
             id="playlist-row"
           >
             {#each $playlists as playlist}
-              <div
-                class="card w-68 min-w-68 shadow-xl bg-base-100 flex flex-col justify-between cursor-pointer hover:shadow-2xl transition-all preset-filled-surface-100-900 py-3 px-6 gap-4 snap-center"
-              >
-                <div class="card-body flex-1 flex flex-col gap-2">
-                  <div class="flex items-center mb-2 gap-2">
-                    <span class="bg-primary/10 rounded-full">
-                      <IconListVideo class="w-7 h-7 text-primary" />
-                    </span>
-                    <h2 class="card-title text-md font-semibold truncate flex-1">
-                      {playlist.name}
-                    </h2>
-                  </div>
-                  <p class="text-base-content/80 text-sm line-clamp-2">
-                    {playlist.description != '~' ? playlist.description : 'No description'}
-                  </p>
-                  <div
-                    class="flex flex-row flex-wrap items-center gap-1 mt-2 text-sm text-base-content/70"
-                  >
-                    <span class="flex items-center gap-1">
-                      <IconSpeaker class="w-4 h-4" />
-                      {playlist.size} presets •
-                    </span>
-                    <span>Updated {formatDate(playlist.last_updated)}</span>
-                  </div>
-                </div>
-                <div class="flex flex-row justify-end">
-                  <button
-                    type="button"
-                    class="btn preset-filled w-fit"
-                    onclick={() =>
-                      toaster.info({
-                        title: 'Coming soon!',
-                        description: 'When implemented, you will be able to open this playlist.'
-                      })}
-                  >
-                    <span>Open</span>
-                    <IconArrowRight size={18} />
-                  </button>
-                </div>
-              </div>
+              <PlaylistCard {playlist} className="snap-center w-68 min-w-68 " }} />
             {/each}
           </div>
           <div class="relative w-0 h-0">
diff --git a/frontend/src/components/PlaylistCard.svelte b/frontend/src/components/PlaylistCard.svelte
new file mode 100644
index 0000000..b736ab1
--- /dev/null
+++ b/frontend/src/components/PlaylistCard.svelte
@@ -0,0 +1,58 @@
+<script>
+  // props
+  export let playlist;
+  export let className = undefined;
+
+  // icons
+  import IconArrowRight from '@lucide/svelte/icons/arrow-right';
+  import IconListVideo from '@lucide/svelte/icons/list-video';
+  import IconSpeaker from '@lucide/svelte/icons/speaker';
+
+  // ui components
+  import { toaster } from '../lib/toaster.js';
+
+  // utils
+  import { formatDate, cn } from '../lib/utils.js';
+</script>
+
+<div
+  class={cn(
+    'card shadow-xl bg-base-100 flex flex-col justify-between cursor-pointer hover:shadow-2xl transition-all preset-filled-surface-100-900 py-3 px-6 gap-4',
+    className
+  )}
+>
+  <div class="card-body flex-1 flex flex-col gap-2">
+    <div class="flex items-center mb-2 gap-2">
+      <span class="bg-primary/10 rounded-full">
+        <IconListVideo class="w-7 h-7 text-primary" />
+      </span>
+      <h2 class="card-title text-md font-semibold truncate flex-1">
+        {playlist.name}
+      </h2>
+    </div>
+    <p class="text-base-content/80 text-sm line-clamp-2">
+      {playlist.description != '~' ? playlist.description : 'No description'}
+    </p>
+    <div class="flex flex-row flex-wrap items-center gap-1 mt-2 text-sm text-base-content/70">
+      <span class="flex items-center gap-1">
+        <IconSpeaker class="w-4 h-4" />
+        {playlist.size} presets •
+      </span>
+      <span>Updated {formatDate(playlist.last_updated)}</span>
+    </div>
+  </div>
+  <div class="flex flex-row justify-end">
+    <button
+      type="button"
+      class="btn preset-filled w-fit"
+      onclick={() =>
+        toaster.info({
+          title: 'Coming soon!',
+          description: 'When implemented, you will be able to open this playlist.'
+        })}
+    >
+      <span>Open</span>
+      <IconArrowRight size={18} />
+    </button>
+  </div>
+</div>
diff --git a/frontend/src/pages/Device.svelte b/frontend/src/pages/Device.svelte
index 6ba9a87..8ac2d61 100644
--- a/frontend/src/pages/Device.svelte
+++ b/frontend/src/pages/Device.svelte
@@ -1,8 +1,14 @@
 <script>
+  // device state
+  import { deviceStatus } from '../stores/state.js';
+
+  // ui components
   import DeviceStatusCard from '../components/DeviceStatusCard.svelte';
   import DeviceControlCard from '../components/DeviceControlCard.svelte';
 </script>
 
 <DeviceStatusCard />
 
-<DeviceControlCard />
+{#if $deviceStatus === 'online'}
+  <DeviceControlCard />
+{/if}
diff --git a/frontend/src/pages/Playlists.svelte b/frontend/src/pages/Playlists.svelte
new file mode 100644
index 0000000..d1e6893
--- /dev/null
+++ b/frontend/src/pages/Playlists.svelte
@@ -0,0 +1,11 @@
+<script>
+  import { playlists } from '../stores/state.js';
+
+  import PlaylistCard from '../components/PlaylistCard.svelte';
+</script>
+
+<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-center">
+  {#each $playlists as playlist}
+    <PlaylistCard {playlist} />
+  {/each}
+</div>
diff --git a/frontend/src/routes.js b/frontend/src/routes.js
index bfdf3cf..34b54f0 100644
--- a/frontend/src/routes.js
+++ b/frontend/src/routes.js
@@ -1,7 +1,9 @@
 import Home from './pages/Home.svelte';
 import Device from './pages/Device.svelte';
+import Playlists from './pages/Playlists.svelte';
 
 export default {
   '/': Home,
-  '/device': Device
+  '/device': Device,
+  '/playlists': Playlists
 };