diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index f3e37b31..988f08f3 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -23,7 +23,7 @@ jobs:
     - name: Install Dependencies
       run: |
         apt update
-        apt install -y libgee-0.8-dev libglib2.0-dev libgranite-7-dev libgtk-4-dev libadwaita-1-dev meson valac
+        apt install -y libgee-0.8-dev libglib2.0-dev libgranite-7-dev libgtk-4-dev libadwaita-1-dev meson sassc valac
     - name: Build
       run: |
         meson build -Dexample=true
diff --git a/data/meson.build b/data/meson.build
index 01e85cc9..d2e9c217 100644
--- a/data/meson.build
+++ b/data/meson.build
@@ -38,3 +38,5 @@ foreach i : icon_sizes
         rename: meson.project_name() + '.svg'
     )
 endforeach
+
+subdir('styles')
diff --git a/data/styles/Index.scss b/data/styles/Index.scss
new file mode 100644
index 00000000..2ebbaa02
--- /dev/null
+++ b/data/styles/Index.scss
@@ -0,0 +1,5 @@
+// Class constants and common styles
+@import '_common.scss';
+
+@import 'SettingsPage.scss';
+@import 'SettingsSidebar.scss';
diff --git a/data/styles/SettingsPage.scss b/data/styles/SettingsPage.scss
new file mode 100644
index 00000000..daf79192
--- /dev/null
+++ b/data/styles/SettingsPage.scss
@@ -0,0 +1,54 @@
+simplesettingspage {
+    > scrolledwindow > viewport > box {
+        padding: rem(12px);
+    }
+
+    .header-area {
+        margin-bottom: rem(24px);
+
+        > image {
+            -gtk-icon-size: rem(48px);
+
+            &:dir(ltr) {
+                // Match square icon canvas whitespace at 48px
+                margin-left: rem(-4px);
+                margin-right: rem(7px);
+            }
+
+            &:dir(rtl) {
+                margin-left: rem(7px);
+                margin-right: rem(-4px);
+            }
+        }
+
+        label.title-2 {
+            font-weight: 600;
+            font-size: 2rem;
+        }
+
+        label:not(.title-2) {
+            font-size: 0.95rem;
+            opacity: 0.85;
+        }
+
+        switch {
+            slider {
+                // Match font size for title
+                min-height: 2rem;
+                min-width: 2rem;
+            }
+
+            &:dir(ltr) {
+                margin-left: rem(12px);
+            }
+
+            &:dir(rtl) {
+                margin-right: rem(12px);
+            }
+        }
+    }
+
+    .buttonbox {
+        margin-top: rem(24px);
+    }
+}
diff --git a/data/styles/SettingsSidebar.scss b/data/styles/SettingsSidebar.scss
new file mode 100644
index 00000000..f3512eb2
--- /dev/null
+++ b/data/styles/SettingsSidebar.scss
@@ -0,0 +1,23 @@
+settingssidebar list {
+    min-width: rem(200px);
+
+    row,
+    > .title-4 {
+        padding: rem(6px);
+    }
+
+    row {
+        overlay {
+            // IconSize.LARGE + padding
+            min-width: calc(32px + #{rem(6px)});
+        }
+
+        overlay:dir(ltr) {
+            margin-right: rem(6px);
+        }
+
+        overlay:dir(rtl) {
+            margin-left: rem(6px);
+        }
+    }
+}
diff --git a/data/styles/_common.scss b/data/styles/_common.scss
new file mode 100644
index 00000000..f600761d
--- /dev/null
+++ b/data/styles/_common.scss
@@ -0,0 +1,17 @@
+@function rem($pixels, $text-size: 9pt) {
+    @if (unitless($pixels)) {
+        $pixels: $pixels * 1px;
+    }
+
+    @if (unitless($text-size)) {
+        $text-size: $text-size * 1px;
+    }
+
+    @if ($pixels > 0) {
+        // Workaround GTK clamping instead of rounding up
+        @return ($pixels / $text-size * 1rem) + 0.000000001rem;
+    } @else {
+        // Workaround GTK clamping instead of rounding up
+        @return ($pixels / $text-size * 1rem) - 0.000000001rem;
+    }
+}
diff --git a/data/styles/meson.build b/data/styles/meson.build
new file mode 100644
index 00000000..608cee36
--- /dev/null
+++ b/data/styles/meson.build
@@ -0,0 +1,25 @@
+sassc = find_program('sassc')
+
+sassc_opts = [ '-a', '-M', '-t', 'compact' ]
+
+stylesheet_deps = custom_target(
+    'Application.scss',
+    input: 'Index.scss',
+    output: 'Application.css',
+    command: [
+        sassc,
+        sassc_opts,
+        '@INPUT@',
+        '@OUTPUT@',
+    ]
+)
+
+stylesheet_resource = gnome.compile_resources(
+    'styles-resource',
+    'styles.gresource.xml',
+    source_dir: [
+        meson.current_build_dir(),
+        meson.current_source_dir(),
+    ],
+    dependencies: stylesheet_deps
+)
diff --git a/data/styles/styles.gresource.xml b/data/styles/styles.gresource.xml
new file mode 100644
index 00000000..f26700d1
--- /dev/null
+++ b/data/styles/styles.gresource.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<gresources>
+  <gresource prefix="/io/elementary/settings">
+    <file compressed="true">Application.css</file>
+  </gresource>
+</gresources>
diff --git a/meson.build b/meson.build
index 999c5f05..6d845401 100644
--- a/meson.build
+++ b/meson.build
@@ -24,6 +24,7 @@ conf_file = configure_file(
 
 plugs_dir = get_option('prefix') / get_option('libdir') / 'switchboard-3'
 
+gnome = import('gnome')
 i18n = import('i18n')
 pkg = import('pkgconfig')
 
diff --git a/src/meson.build b/src/meson.build
index feb30858..bdc4873b 100644
--- a/src/meson.build
+++ b/src/meson.build
@@ -15,6 +15,7 @@ switchboard_deps = [
 ]
 
 executable(meson.project_name(),
+    stylesheet_resource,
     switchboard_files,
     conf_file,
     dependencies: switchboard_deps,