diff --git a/astro.config.ts b/astro.config.ts
index 79c1885..63e9274 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -6,9 +6,5 @@ import { defineConfig } from 'astro/config';
 // https://astro.build/config
 export default defineConfig({
   integrations: [react(), tailwind(), image()],
-  vite: {
-    ssr: {
-      external: ['svgo'],
-    },
-  },
+  vite: { ssr: { external: ['svgo'] } },
 });
diff --git a/src/components/atoms/labelled-value.astro b/src/components/atoms/labelled-value.astro
index 13ecddb..895f1e2 100644
--- a/src/components/atoms/labelled-value.astro
+++ b/src/components/atoms/labelled-value.astro
@@ -7,7 +7,7 @@ export interface Props extends astroHTML.JSX.HTMLAttributes {
 const { label, value, ...props } = Astro.props;
 ---
 
-<div {...props} class:list={['text-base space-x-1', props.class]}>
+<div {...props} class:list={['text-base', props.class]}>
   <span class="font-medium text-gray-700">{label}:</span>
   <span class="font-normal text-gray-500">{value}</span>
 </div>
diff --git a/src/pages/playground/button.astro b/src/pages/playground/button.astro
new file mode 100644
index 0000000..11fb01e
--- /dev/null
+++ b/src/pages/playground/button.astro
@@ -0,0 +1,7 @@
+---
+import Button from '@/atoms/button.astro';
+---
+
+<div class="p-5">
+  <Button>Button text</Button>
+</div>
diff --git a/src/pages/playground/labelled-value.astro b/src/pages/playground/labelled-value.astro
new file mode 100644
index 0000000..63bfa65
--- /dev/null
+++ b/src/pages/playground/labelled-value.astro
@@ -0,0 +1,7 @@
+---
+import LabelledValue from '@/atoms/labelled-value.astro';
+---
+
+<div class="p-5">
+  <LabelledValue label="Label" value="value" />
+</div>
diff --git a/src/pages/playground/section-card.astro b/src/pages/playground/section-card.astro
new file mode 100644
index 0000000..8d30b5d
--- /dev/null
+++ b/src/pages/playground/section-card.astro
@@ -0,0 +1,7 @@
+---
+import SectionCard from '@/atoms/section-card.astro';
+---
+
+<div class="p-5">
+  <SectionCard>SectionCard text</SectionCard>
+</div>
diff --git a/src/pages/playground/typography.astro b/src/pages/playground/typography.astro
new file mode 100644
index 0000000..68d27ad
--- /dev/null
+++ b/src/pages/playground/typography.astro
@@ -0,0 +1,44 @@
+---
+import Typography from '@/atoms/typography.astro';
+
+const text = 'A quick brown fox jumps over the lazy dog';
+---
+
+<div class="p-5 space-y-10">
+  <div>
+    <p class="mb-2 font-mono">paragraph (default)</p>
+    <Typography>{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">main-title</p>
+    <Typography variant="main-title">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">main-subtitle</p>
+    <Typography variant="main-subtitle">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">section-title</p>
+    <Typography variant="section-title">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">section-subtitle</p>
+    <Typography variant="section-subtitle">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">item-title</p>
+    <Typography variant="item-title">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">item-subtitle</p>
+    <Typography variant="item-subtitle">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">tile-title</p>
+    <Typography variant="tile-title">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">tile-subtitle</p>
+    <Typography variant="tile-subtitle">{text}</Typography>
+  </div>
+</div>