diff --git a/gm-control-panel/build.rs b/gm-control-panel/build.rs
index 2f8c7ae..c83cc1e 100644
--- a/gm-control-panel/build.rs
+++ b/gm-control-panel/build.rs
@@ -2,6 +2,6 @@ fn main() {
     glib_build_tools::compile_resources(
         "resources",
         "resources/gresources.xml",
-        "com.luminescent-dreams.dashboard.gresource",
+        "com.luminescent-dreams.gm-control-panel.gresource",
     );
 }
diff --git a/gm-control-panel/resources/gresources.xml b/gm-control-panel/resources/gresources.xml
index 1447b98..1caf7fc 100644
--- a/gm-control-panel/resources/gresources.xml
+++ b/gm-control-panel/resources/gresources.xml
@@ -1,3 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
+    <gresource prefix="/com/luminescent-dreams/gm-control-panel/">
+        <file>style.css</file>
+    </gresource>
 </gresources>
diff --git a/gm-control-panel/resources/style.css b/gm-control-panel/resources/style.css
new file mode 100644
index 0000000..02761c3
--- /dev/null
+++ b/gm-control-panel/resources/style.css
@@ -0,0 +1,4 @@
+.playlist-card {
+    margin: 8px;
+    padding: 8px;
+}
diff --git a/gm-control-panel/src/app_window.rs b/gm-control-panel/src/app_window.rs
index fb07457..98c69f1 100644
--- a/gm-control-panel/src/app_window.rs
+++ b/gm-control-panel/src/app_window.rs
@@ -1,12 +1,62 @@
+use crate::PlaylistCard;
+use adw::prelude::AdwApplicationWindowExt;
+use gio::resources_lookup_data;
+use gtk::{prelude::*, STYLE_PROVIDER_PRIORITY_USER};
+use std::iter::Iterator;
+
 #[derive(Clone)]
 pub struct ApplicationWindow {
     pub window: adw::ApplicationWindow,
+    pub grid: gtk::Grid,
+    pub playlists: Vec<PlaylistCard>,
 }
 
 impl ApplicationWindow {
     pub fn new(app: &adw::Application) -> Self {
         let window = adw::ApplicationWindow::new(app);
 
-        Self { window }
+        let stylesheet = String::from_utf8(
+            resources_lookup_data(
+                "/com/luminescent-dreams/gm-control-panel/style.css",
+                gio::ResourceLookupFlags::NONE,
+            )
+            .expect("stylesheet should just be available")
+            .to_vec(),
+        )
+        .expect("to parse stylesheet");
+
+        let provider = gtk::CssProvider::new();
+        provider.load_from_data(&stylesheet);
+        let context = window.style_context();
+        context.add_provider(&provider, STYLE_PROVIDER_PRIORITY_USER);
+
+        let grid = gtk::Grid::new();
+
+        let playlists: Vec<PlaylistCard> = vec![
+            "Creepy Cathedral",
+            "Joyful Tavern",
+            "Exploring",
+            "Out on the streets",
+            "The North Abbey",
+        ]
+        .into_iter()
+        .map(|name| {
+            let playlist = PlaylistCard::new();
+            playlist.set_name(name);
+            playlist
+        })
+        .collect();
+
+        playlists.iter().enumerate().for_each(|(i, card)| {
+            grid.attach(card, 0, i as i32, 1, 1);
+        });
+
+        window.set_content(Some(&grid));
+
+        Self {
+            window,
+            grid,
+            playlists,
+        }
     }
 }
diff --git a/gm-control-panel/src/main.rs b/gm-control-panel/src/main.rs
index 60900e5..da86db8 100644
--- a/gm-control-panel/src/main.rs
+++ b/gm-control-panel/src/main.rs
@@ -10,6 +10,12 @@ use app_window::ApplicationWindow;
 
 mod config;
 
+mod playlist_card;
+use playlist_card::PlaylistCard;
+
+mod types;
+use types::PlaybackState;
+
 #[derive(Clone, Debug)]
 pub enum Message {}
 
@@ -19,6 +25,9 @@ pub struct Core {
 }
 
 pub fn main() {
+    gio::resources_register_include!("com.luminescent-dreams.gm-control-panel.gresource")
+        .expect("Failed to register resource");
+
     let app = adw::Application::builder()
         .application_id("com.luminescent-dreams.gm-control-panel")
         .build();
diff --git a/gm-control-panel/src/playlist_card.rs b/gm-control-panel/src/playlist_card.rs
new file mode 100644
index 0000000..4b1939b
--- /dev/null
+++ b/gm-control-panel/src/playlist_card.rs
@@ -0,0 +1,60 @@
+use crate::PlaybackState;
+use glib::Object;
+use gtk::{prelude::*, subclass::prelude::*};
+
+pub struct PlaylistCardPrivate {
+    name: gtk::Label,
+    playing: gtk::Label,
+}
+
+impl Default for PlaylistCardPrivate {
+    fn default() -> Self {
+        Self {
+            name: gtk::Label::new(None),
+            playing: gtk::Label::new(Some("Stopped")),
+        }
+    }
+}
+
+#[glib::object_subclass]
+impl ObjectSubclass for PlaylistCardPrivate {
+    const NAME: &'static str = "PlaylistCard";
+    type Type = PlaylistCard;
+    type ParentType = gtk::Box;
+}
+
+impl ObjectImpl for PlaylistCardPrivate {}
+impl WidgetImpl for PlaylistCardPrivate {}
+impl BoxImpl for PlaylistCardPrivate {}
+
+glib::wrapper! {
+    pub struct PlaylistCard(ObjectSubclass<PlaylistCardPrivate>) @extends gtk::Box, gtk::Widget, @implements gtk::Orientable;
+}
+
+impl PlaylistCard {
+    pub fn new() -> Self {
+        let s: Self = Object::builder().build();
+        s.set_orientation(gtk::Orientation::Vertical);
+        s.add_css_class("playlist-card");
+        s.add_css_class("card");
+        /*
+        s.set_margin_start(8);
+        s.set_margin_end(8);
+        s.set_margin_top(8);
+        s.set_margin_bottom(8);
+        */
+
+        s.append(&s.imp().name);
+        s.append(&s.imp().playing);
+
+        s
+    }
+
+    pub fn set_name(&self, s: &str) {
+        self.imp().name.set_text(s);
+    }
+
+    pub fn set_playback(&self, s: PlaybackState) {
+        self.imp().playing.set_text(&format!("{}", s))
+    }
+}
diff --git a/gm-control-panel/src/types.rs b/gm-control-panel/src/types.rs
new file mode 100644
index 0000000..f0a6349
--- /dev/null
+++ b/gm-control-panel/src/types.rs
@@ -0,0 +1,16 @@
+use std::fmt;
+
+#[derive(Clone, Debug)]
+pub enum PlaybackState {
+    Stopped,
+    Playing,
+}
+
+impl fmt::Display for PlaybackState {
+    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        match self {
+            Self::Stopped => write!(f, "Stopped"),
+            Self::Playing => write!(f, "Playing"),
+        }
+    }
+}