diff --git a/.idea/git_toolbox_blame.xml b/.idea/git_toolbox_blame.xml
new file mode 100644
index 0000000..7dc1249
--- /dev/null
+++ b/.idea/git_toolbox_blame.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="GitToolBoxBlameSettings">
+    <option name="version" value="2" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
index e976615..dd538c7 100644
--- a/.idea/gradle.xml
+++ b/.idea/gradle.xml
@@ -4,6 +4,7 @@
   <component name="GradleSettings">
     <option name="linkedExternalProjectsSettings">
       <GradleProjectSettings>
+        <option name="testRunner" value="CHOOSE_PER_TEST" />
         <option name="externalProjectPath" value="$PROJECT_DIR$" />
         <option name="gradleJvm" value="corretto-21" />
         <option name="modules">
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index b67486e..6195b36 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -33,6 +33,9 @@
       <option name="composableFile" value="true" />
       <option name="previewFile" value="true" />
     </inspection_tool>
+    <inspection_tool class="PreviewDeviceShouldUseNewSpec" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
     <inspection_tool class="PreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="composableFile" value="true" />
       <option name="previewFile" value="true" />
diff --git a/.idea/runConfigurations.xml b/.idea/runConfigurations.xml
new file mode 100644
index 0000000..16660f1
--- /dev/null
+++ b/.idea/runConfigurations.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="RunConfigurationProducerService">
+    <option name="ignoredProducers">
+      <set>
+        <option value="com.intellij.execution.junit.AbstractAllInDirectoryConfigurationProducer" />
+        <option value="com.intellij.execution.junit.AllInPackageConfigurationProducer" />
+        <option value="com.intellij.execution.junit.PatternConfigurationProducer" />
+        <option value="com.intellij.execution.junit.TestInClassConfigurationProducer" />
+        <option value="com.intellij.execution.junit.UniqueIdConfigurationProducer" />
+        <option value="com.intellij.execution.junit.testDiscovery.JUnitTestDiscoveryConfigurationProducer" />
+        <option value="org.jetbrains.kotlin.idea.junit.KotlinJUnitRunConfigurationProducer" />
+        <option value="org.jetbrains.kotlin.idea.junit.KotlinPatternConfigurationProducer" />
+      </set>
+    </option>
+  </component>
+</project>
\ No newline at end of file
diff --git a/app/src/main/kotlin/nl/q42/template/MainActivity.kt b/app/src/main/kotlin/nl/q42/template/MainActivity.kt
index df6fcac..f942d52 100644
--- a/app/src/main/kotlin/nl/q42/template/MainActivity.kt
+++ b/app/src/main/kotlin/nl/q42/template/MainActivity.kt
@@ -5,13 +5,12 @@ import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.ui.Modifier
 import androidx.navigation.compose.rememberNavController
 import dagger.hilt.android.AndroidEntryPoint
 import nl.q42.template.navigation.AppNavigation
 import nl.q42.template.navigation.NavGraphs
+import nl.q42.template.ui.compose.composables.widgets.AppSurface
 import nl.q42.template.ui.theme.AppTheme
 
 @AndroidEntryPoint
@@ -26,7 +25,9 @@ class MainActivity : ComponentActivity() {
 
                 val navController = rememberNavController()
 
-                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
+                AppSurface (
+                    modifier = Modifier.fillMaxSize(),
+                ) {
                     AppNavigation(navController = navController, navGraph = NavGraphs.root)
                 }
             }
diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/text/BodyText.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/text/BodyText.kt
new file mode 100644
index 0000000..4606626
--- /dev/null
+++ b/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/text/BodyText.kt
@@ -0,0 +1,24 @@
+package nl.q42.template.ui.compose.composables.text
+
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import nl.q42.template.ui.theme.AppTheme
+import nl.q42.template.ui.theme.PreviewLightDark
+
+@Composable
+fun BodyText(text: String, color: Color = AppTheme.colors.textPrimary) {
+    Text(
+        text = text,
+        color = color,
+        style = AppTheme.typography.body
+    )
+}
+
+@Composable
+@PreviewLightDark
+private fun BodyTextPreview() {
+    AppTheme {
+        BodyText("Body text")
+    }
+}
\ No newline at end of file
diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/text/H1Text.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/text/H1Text.kt
new file mode 100644
index 0000000..44d9d17
--- /dev/null
+++ b/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/text/H1Text.kt
@@ -0,0 +1,24 @@
+package nl.q42.template.ui.compose.composables.text
+
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import nl.q42.template.ui.theme.AppTheme
+import nl.q42.template.ui.theme.PreviewLightDark
+
+@Composable
+fun H1Text(text: String, color: Color = AppTheme.colors.textPrimary) {
+    Text(
+        text = text,
+        color = color,
+        style = AppTheme.typography.h1
+    )
+}
+
+@Composable
+@PreviewLightDark
+private fun H1TextPreview() {
+    AppTheme {
+        H1Text("H1 text")
+    }
+}
\ No newline at end of file
diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/widgets/AppSurface.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/widgets/AppSurface.kt
new file mode 100644
index 0000000..f527ccf
--- /dev/null
+++ b/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/widgets/AppSurface.kt
@@ -0,0 +1,26 @@
+package nl.q42.template.ui.compose.composables.widgets
+
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import nl.q42.template.ui.theme.AppTheme
+import nl.q42.template.ui.theme.PreviewLightDark
+
+@Composable
+fun AppSurface(modifier: Modifier = Modifier, content: @Composable () -> Unit) {
+    Surface(
+        modifier = modifier,
+        color = AppTheme.colors.surface,
+        contentColor = AppTheme.colors.textPrimary,
+        content = content
+    )
+}
+
+@Composable
+@PreviewLightDark
+private fun AppSurfacePreview() {
+    AppTheme {
+        AppSurface(Modifier.fillMaxSize()) {}
+    }
+}
diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/widgets/TemplateButton.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/widgets/TemplateButton.kt
new file mode 100644
index 0000000..d0e253b
--- /dev/null
+++ b/core/ui/src/main/kotlin/nl/q42/template/ui/compose/composables/widgets/TemplateButton.kt
@@ -0,0 +1,36 @@
+package nl.q42.template.ui.compose.composables.widgets
+
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import nl.q42.template.ui.theme.AppTheme
+import nl.q42.template.ui.theme.PreviewLightDark
+
+@Composable
+fun TemplateButton(text: String, enabled: Boolean = true, onClick: () -> Unit) {
+    Button(
+        onClick = onClick,
+        enabled = enabled,
+        colors = ButtonDefaults.buttonColors(
+            containerColor = AppTheme.colors.accent,
+            contentColor = AppTheme.colors.buttonText,
+            disabledContentColor = AppTheme.colors.buttonText.copy(alpha = 0.5f),
+            disabledContainerColor = AppTheme.colors.accent.copy(alpha = 0.5f)
+        )
+    ) {
+        Text(
+            text = text,
+            style = AppTheme.typography.body,
+            color = AppTheme.colors.buttonText
+        )
+    }
+}
+
+@Composable
+@PreviewLightDark
+private fun TemplateButtonPreview() {
+    AppTheme {
+        TemplateButton("Button",) {}
+    }
+}
\ No newline at end of file
diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorScheme.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorScheme.kt
new file mode 100644
index 0000000..83a7720
--- /dev/null
+++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorScheme.kt
@@ -0,0 +1,12 @@
+package nl.q42.template.ui.theme
+
+import androidx.compose.ui.graphics.Color
+
+interface AppColorScheme {
+    val buttonText: Color
+    val accent: Color
+    val textPrimary: Color
+    val surface: Color
+    val surfaceSelected: Color
+    val error: Color
+}
\ No newline at end of file
diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorSchemeDark.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorSchemeDark.kt
new file mode 100644
index 0000000..9464548
--- /dev/null
+++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorSchemeDark.kt
@@ -0,0 +1,12 @@
+package nl.q42.template.ui.theme
+
+import androidx.compose.ui.graphics.Color
+
+object AppColorSchemeDark: AppColorScheme {
+    override val buttonText: Color = White
+    override val accent: Color =  PurpleGrey80
+    override val textPrimary = White
+    override val surface = Black
+    override val surfaceSelected = White
+    override val error = Pink80
+}
\ No newline at end of file
diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorSchemeLight.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorSchemeLight.kt
new file mode 100644
index 0000000..2358cb2
--- /dev/null
+++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppColorSchemeLight.kt
@@ -0,0 +1,12 @@
+package nl.q42.template.ui.theme
+
+import androidx.compose.ui.graphics.Color
+
+object AppColorSchemeLight : AppColorScheme {
+    override val buttonText: Color = White
+    override val accent: Color = Purple40
+    override val textPrimary = Black
+    override val surface = White
+    override val surfaceSelected = Gray10
+    override val error: Color = Red80
+}
\ No newline at end of file
diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppRipples.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppRipples.kt
new file mode 100644
index 0000000..5e7558c
--- /dev/null
+++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppRipples.kt
@@ -0,0 +1,31 @@
+package nl.q42.template.ui.theme
+
+import androidx.compose.foundation.Indication
+import androidx.compose.material.ripple.RippleAlpha
+import androidx.compose.material3.RippleConfiguration
+import androidx.compose.material3.ripple
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.ReadOnlyComposable
+import androidx.compose.ui.graphics.Color
+
+val AppRippleConfiguration: RippleConfiguration
+    @Composable
+    @ReadOnlyComposable
+    get() = RippleConfiguration(
+        color = AppTheme.colors.surfaceSelected
+    )
+
+val NoRippleConfiguration: RippleConfiguration
+    @Composable
+    @ReadOnlyComposable
+    get() = RippleConfiguration(
+        color = Color.Transparent,
+        rippleAlpha = RippleAlpha(0.0f, 0.0f, 0.0f, 0.0f)
+    )
+
+val AppRipple: Indication
+    @Composable
+    @ReadOnlyComposable
+    get() = ripple(
+        color = AppTheme.colors.surfaceSelected
+    )
diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppShapes.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppShapes.kt
new file mode 100644
index 0000000..184f078
--- /dev/null
+++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppShapes.kt
@@ -0,0 +1,13 @@
+package nl.q42.template.ui.theme
+
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.unit.dp
+
+@Immutable
+data class AppShapes(
+    val small: Shape = RoundedCornerShape(8.dp),
+    val medium: Shape = RoundedCornerShape(16.dp),
+    val large: Shape = RoundedCornerShape(20.dp)
+)
\ No newline at end of file
diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppTheme.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppTheme.kt
new file mode 100644
index 0000000..f78c317
--- /dev/null
+++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppTheme.kt
@@ -0,0 +1,94 @@
+package nl.q42.template.ui.theme
+
+import android.annotation.SuppressLint
+import android.app.Activity
+import androidx.compose.foundation.LocalIndication
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.LocalRippleConfiguration
+import androidx.compose.material3.LocalTextStyle
+import androidx.compose.material3.ProvideTextStyle
+import androidx.compose.material3.Scaffold
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.ReadOnlyComposable
+import androidx.compose.runtime.SideEffect
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.platform.LocalView
+import androidx.core.view.WindowCompat
+import nl.q42.template.ui.compose.composables.widgets.AppSurface
+
+/**
+ * Generate this using: https://m2.material.io/material-theme-builder/. For more info and resources: see the
+ * README file of our project.
+ */
+
+private val LocalAppTypography = staticCompositionLocalOf { AppTypography() }
+private val LocalAppColorScheme = staticCompositionLocalOf<AppColorScheme> {
+    // Dummy default, will be replaced for the actual tokens by the Provider
+    AppColorSchemeLight
+}
+private val LocalAppShapes = staticCompositionLocalOf { AppShapes() }
+
+@Composable
+fun AppTheme(
+    darkTheme: Boolean = isSystemInDarkTheme(),
+    typography: AppTypography = AppTheme.typography,
+    colors: AppColorScheme = AppTheme.colors,
+    shapes: AppShapes = AppTheme.shapes,
+    content: @Composable () -> Unit
+) {
+    // status bar color
+    val view = LocalView.current
+    if (!view.isInEditMode) {
+        SideEffect {
+            val window = (view.context as Activity).window
+            window.statusBarColor = colors.accent.toArgb()
+            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
+        }
+    }
+
+    CompositionLocalProvider(
+        LocalAppTypography provides typography,
+        LocalAppColorScheme provides if (darkTheme) AppColorSchemeDark else AppColorSchemeLight,
+        LocalAppShapes provides shapes,
+        /** configures the ripple for material components */
+        LocalRippleConfiguration provides AppRippleConfiguration,
+        /** needed for non-material components to have a material ripple. eg [Modifier.clickable] */
+        LocalIndication provides AppRipple,
+        /** merges the platform style with our type, @see [ProvideTextStyle] for more context */
+        LocalTextStyle provides LocalTextStyle.current.merge(typography.body),
+        LocalContentColor provides colors.textPrimary,
+        content = content
+    )
+}
+
+object AppTheme {
+    val typography: AppTypography
+        @Composable
+        @ReadOnlyComposable
+        get() = LocalAppTypography.current
+    val colors: AppColorScheme
+        @Composable
+        @ReadOnlyComposable
+        get() = LocalAppColorScheme.current
+    val shapes: AppShapes
+        @Composable
+        @ReadOnlyComposable
+        get() = LocalAppShapes.current
+}
+
+@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
+@Composable
+fun PreviewAppTheme(content: @Composable () -> Unit) {
+    AppTheme {
+        Scaffold {
+            AppSurface {
+                content()
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppTypography.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppTypography.kt
new file mode 100644
index 0000000..70c02b0
--- /dev/null
+++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/AppTypography.kt
@@ -0,0 +1,35 @@
+package nl.q42.template.ui.theme
+
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+val defaultFontFamily = FontFamily.Default
+
+@Immutable
+data class AppTypography(
+    // The names of these styles are shared with your team's design system
+    // So it is easy to communicate with designers about what text style to use
+
+    val body: TextStyle = TextStyle(
+        fontFamily = defaultFontFamily,
+        fontWeight = FontWeight.Normal,
+        fontSize = 16.sp
+    ),
+    val h1: TextStyle = TextStyle(
+        fontFamily = defaultFontFamily,
+        fontWeight = FontWeight.Bold,
+        fontSize = 22.sp,
+        lineHeight = 28.sp,
+        letterSpacing = 0.sp
+    ),
+    val label: TextStyle = TextStyle(
+        fontFamily = defaultFontFamily,
+        fontWeight = FontWeight.Medium,
+        fontSize = 11.sp,
+        lineHeight = 16.sp,
+        letterSpacing = 0.5.sp
+    )
+)
\ No newline at end of file
diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Color.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Colors.kt
similarity index 61%
rename from core/ui/src/main/kotlin/nl/q42/template/ui/theme/Color.kt
rename to core/ui/src/main/kotlin/nl/q42/template/ui/theme/Colors.kt
index 3750eeb..761e0ec 100644
--- a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Color.kt
+++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Colors.kt
@@ -2,13 +2,12 @@ package nl.q42.template.ui.theme
 
 import androidx.compose.ui.graphics.Color
 
-val Purple80 = Color(0xFFD0BCFF)
 val PurpleGrey80 = Color(0xFFCCC2DC)
 val Pink80 = Color(0xFFEFB8C8)
+val Red80 = Color(0xFFE57373)
 
 val Purple40 = Color(0xFF6650a4)
-val PurpleGrey40 = Color(0xFF625b71)
-val Pink40 = Color(0xFF7D5260)
 
 val Black = Color(0xFF000000)
-val White = Color(0xFFFFFFFF)
\ No newline at end of file
+val White = Color(0xFFFFFFFF)
+val Gray10 = Color(0xFF1b1b1b)
diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt
new file mode 100644
index 0000000..d257c99
--- /dev/null
+++ b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Dimens.kt
@@ -0,0 +1,9 @@
+package nl.q42.template.ui.theme
+
+import androidx.compose.ui.unit.dp
+
+object Dimens {
+    val componentSpacingVertical = 24.dp
+    /** Spacing between 2 vertically stacked buttons */
+    val buttonSpacingVertical = 8.dp
+}
diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Theme.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Theme.kt
deleted file mode 100644
index 7435580..0000000
--- a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Theme.kt
+++ /dev/null
@@ -1,91 +0,0 @@
-package nl.q42.template.ui.theme
-
-import android.annotation.SuppressLint
-import android.app.Activity
-import android.os.Build
-import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
-import androidx.compose.material3.darkColorScheme
-import androidx.compose.material3.dynamicDarkColorScheme
-import androidx.compose.material3.dynamicLightColorScheme
-import androidx.compose.material3.lightColorScheme
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.SideEffect
-import androidx.compose.ui.graphics.toArgb
-import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.LocalView
-import androidx.core.view.WindowCompat
-
-/**
- * Generate this using: https://m2.material.io/material-theme-builder/. For more info and resources: see the
- * README file of our project.
- */
-
-private val DarkColorScheme = darkColorScheme(
-    primary = Purple80,
-    secondary = PurpleGrey80,
-    tertiary = Pink80,
-    background = Black,
-)
-
-private val LightColorScheme = lightColorScheme(
-    primary = Purple40,
-    secondary = PurpleGrey40,
-    tertiary = Pink40,
-    background = White
-
-    /* Other default colors to override
-    background = Color(0xFFFFFBFE),
-    surface = Color(0xFFFFFBFE),
-    onPrimary = Color.White,
-    onSecondary = Color.White,
-    onTertiary = Color.White,
-    onBackground = Color(0xFF1C1B1F),
-    onSurface = Color(0xFF1C1B1F),
-    */
-)
-
-@Composable
-fun AppTheme(
-    darkTheme: Boolean = isSystemInDarkTheme(),
-    // Dynamic color is available on Android 12+
-    dynamicColor: Boolean = true,
-    content: @Composable () -> Unit
-) {
-    val colorScheme = when {
-        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
-            val context = LocalContext.current
-            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
-        }
-
-        darkTheme -> DarkColorScheme
-        else -> LightColorScheme
-    }
-    val view = LocalView.current
-    if (!view.isInEditMode) {
-        SideEffect {
-            val window = (view.context as Activity).window
-            window.statusBarColor = colorScheme.primary.toArgb()
-            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
-        }
-    }
-
-    MaterialTheme(
-        colorScheme = colorScheme,
-        typography = Typography,
-        content = content
-    )
-}
-
-@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun PreviewAppTheme(content: @Composable () -> Unit) {
-    AppTheme {
-        Scaffold {
-            content()
-        }
-    }
-}
\ No newline at end of file
diff --git a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Type.kt b/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Type.kt
deleted file mode 100644
index ea9a95a..0000000
--- a/core/ui/src/main/kotlin/nl/q42/template/ui/theme/Type.kt
+++ /dev/null
@@ -1,34 +0,0 @@
-package nl.q42.template.ui.theme
-
-import androidx.compose.material3.Typography
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontFamily
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.sp
-
-// Set of Material typography styles to start with
-val Typography = Typography(
-    bodyLarge = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Normal,
-        fontSize = 16.sp,
-        lineHeight = 24.sp,
-        letterSpacing = 0.5.sp
-    )
-    /* Other default text styles to override
-    titleLarge = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Normal,
-        fontSize = 22.sp,
-        lineHeight = 28.sp,
-        letterSpacing = 0.sp
-    ),
-    labelSmall = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Medium,
-        fontSize = 11.sp,
-        lineHeight = 16.sp,
-        letterSpacing = 0.5.sp
-    )
-    */
-)
\ No newline at end of file
diff --git a/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt b/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt
index b113920..c90aa35 100644
--- a/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt
+++ b/feature/home/src/main/kotlin/nl/q42/template/home/main/ui/HomeContent.kt
@@ -1,17 +1,23 @@
 package nl.q42.template.home.main.ui
 
 import androidx.compose.foundation.layout.Arrangement.Center
+import androidx.compose.foundation.layout.Arrangement.spacedBy
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material3.Button
+import androidx.compose.foundation.layout.height
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment.Companion.CenterHorizontally
 import androidx.compose.ui.Modifier
 import nl.q42.template.home.main.presentation.HomeViewState
+import nl.q42.template.ui.compose.composables.text.BodyText
+import nl.q42.template.ui.compose.composables.widgets.TemplateButton
 import nl.q42.template.ui.compose.get
 import nl.q42.template.ui.presentation.toViewStateString
+import nl.q42.template.ui.theme.AppTheme
+import nl.q42.template.ui.theme.Dimens
 import nl.q42.template.ui.theme.PreviewAppTheme
 import nl.q42.template.ui.theme.PreviewLightDark
 
@@ -36,18 +42,23 @@ internal fun HomeContent(
         viewState.userEmailTitle?.get()?.let { Text(text = it) }
 
         if (viewState.isLoading) CircularProgressIndicator()
-        if (viewState.showError) Text(text = "Error")
+        if (viewState.showError) BodyText("Error", AppTheme.colors.error)
 
-        Button(onClick = onLoadClicked) {
-            Text("Refresh")
-        }
+        Spacer(Modifier.height(Dimens.componentSpacingVertical))
 
-        Button(onClick = onOpenSecondScreenClicked) {
-            Text("Open second screen")
-        }
-        Button(onClick = onOpenOnboardingClicked) {
-            Text("Open onboarding")
+        Column(
+            horizontalAlignment = CenterHorizontally,
+            verticalArrangement = spacedBy(Dimens.buttonSpacingVertical)
+        ) {
+            TemplateButton("Refresh", onClick = onLoadClicked)
+
+            TemplateButton("Open second screen", onClick = onOpenSecondScreenClicked)
+
+            TemplateButton("Open Onboarding", onClick = onOpenOnboardingClicked)
+
+            TemplateButton("Disabled button", enabled = false) {}
         }
+
     }
 }
 
diff --git a/feature/home/src/main/kotlin/nl/q42/template/home/second/ui/HomeSecondScreen.kt b/feature/home/src/main/kotlin/nl/q42/template/home/second/ui/HomeSecondScreen.kt
index d114769..e1309a2 100644
--- a/feature/home/src/main/kotlin/nl/q42/template/home/second/ui/HomeSecondScreen.kt
+++ b/feature/home/src/main/kotlin/nl/q42/template/home/second/ui/HomeSecondScreen.kt
@@ -3,9 +3,6 @@ package nl.q42.template.home.second.ui
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material3.Button
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
@@ -16,6 +13,8 @@ import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.navigation.DestinationsNavigator
 import nl.q42.template.home.second.presentation.HomeSecondViewModel
 import nl.q42.template.navigation.viewmodel.InitNavigator
+import nl.q42.template.ui.compose.composables.text.H1Text
+import nl.q42.template.ui.compose.composables.widgets.TemplateButton
 
 @Destination
 @Composable
@@ -40,10 +39,8 @@ fun HomeSecondScreen(
         verticalArrangement = Arrangement.Center,
     ) {
 
-        Text(viewState.title, style = MaterialTheme.typography.titleMedium)
+        H1Text(text = viewState.title)
 
-        Button(onClick = viewModel::onBackClicked) {
-            Text("Close")
-        }
+        TemplateButton("Close", onClick = viewModel::onBackClicked)
     }
 }