diff --git a/src/App.vue b/src/App.vue
index e26264f..69741c6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,86 +1,10 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import FeatureSteps from '@/FeatureSteps.vue'
+</script>
 
 <template>
   <main id="main-app">
-    <ul>
-      <li>
-        <header>Pitch</header>
-        <section class="doing">
-          <h5>📝</h5>
-          <ul>
-            <li>Feature 3</li>
-            <li>Feature 4</li>
-          </ul>
-        </section>
-        <section class="done">
-          <h5>✅</h5>
-          <ul>
-            <li class="blue-bin">feature 1</li>
-            <li class="blue-bin">feature 2</li>
-          </ul>
-        </section>
-      </li>
-      <li>
-        <header>Design</header>
-        <section class="doing">
-          <h5>📝</h5>
-        </section>
-        <section class="done">
-          <h5>✅</h5>
-        </section>
-      </li>
-      <li>
-        <header>Investigation</header>
-        <section class="doing">
-          <h5>📝</h5>
-        </section>
-        <section class="done">
-          <h5>✅</h5>
-        </section>
-      </li>
-      <li>
-        <header>Product design</header>
-        <section class="doing">
-          <h5>📝</h5>
-          <ul>
-            <li></li>
-            <li></li>
-          </ul>
-        </section>
-        <section class="done">
-          <h5>✅</h5>
-          <div class="blue-bin">Blue bucket</div>
-          <div class="blue-bin">Blue bucket</div>
-        </section>
-      </li>
-      <li>
-        <header>Development</header>
-        <section class="doing">
-          <h5>📝</h5>
-        </section>
-        <section class="done">
-          <h5>✅</h5>
-        </section>
-      </li>
-      <li>
-        <header>UAT</header>
-        <section class="doing">
-          <h5>📝</h5>
-        </section>
-        <section class="done">
-          <h5>✅</h5>
-        </section>
-      </li>
-      <li>
-        <header>Release</header>
-        <section class="doing">
-          <h5>📝</h5>
-        </section>
-        <section class="done">
-          <h5>✅</h5>
-        </section>
-      </li>
-    </ul>
+    <FeatureSteps />
   </main>
 </template>
 
diff --git a/src/FeatureStep.vue b/src/FeatureStep.vue
new file mode 100644
index 0000000..0090032
--- /dev/null
+++ b/src/FeatureStep.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { FeatureStep } from '@/feature-steps'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  step: FeatureStep
+}>()
+const remainingBlueBuckets = computed(() =>
+  Math.max(0, props.step.blueBuckets - props.step.featuresDone.length)
+)
+</script>
+
+<template>
+  <li class="feature-step">
+    <header>{{ step.title }}</header>
+    <section class="doing">
+      <h5>📝</h5>
+      <ul v-if="step.featuresInProgress.length > 0">
+        <li v-for="feature in step.featuresInProgress" :key="feature">
+          {{ feature }}
+        </li>
+      </ul>
+    </section>
+    <section class="done">
+      <h5>✅</h5>
+      <ul v-if="step.featuresDone.length > 0">
+        <li v-for="feature in step.featuresDone" :key="feature">
+          {{ feature }}
+        </li>
+      </ul>
+      <div
+        v-for="blueBucket in remainingBlueBuckets"
+        :key="blueBucket"
+        class="blue-bin"
+      >
+        Blue bucket
+      </div>
+    </section>
+  </li>
+</template>
+
+<style scoped lang="scss">
+.feature-step {
+}
+</style>
diff --git a/src/FeatureSteps.vue b/src/FeatureSteps.vue
new file mode 100644
index 0000000..dcc19cb
--- /dev/null
+++ b/src/FeatureSteps.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import FeatureStep from '@/FeatureStep.vue'
+import { featureSteps } from '@/feature-steps'
+</script>
+
+<template>
+  <ul class="features-steps">
+    <FeatureStep v-for="step in featureSteps" :key="step.title" :step="step" />
+  </ul>
+</template>
+
+<style scoped lang="scss">
+.features-steps {
+}
+</style>
diff --git a/src/feature-steps.ts b/src/feature-steps.ts
new file mode 100644
index 0000000..8251a36
--- /dev/null
+++ b/src/feature-steps.ts
@@ -0,0 +1,51 @@
+export type FeatureStep = {
+  title: string
+  featuresInProgress: string[]
+  featuresDone: string[]
+  blueBuckets: number
+}
+
+export const featureSteps: FeatureStep[] = [
+  {
+    title: 'Pitch',
+    featuresInProgress: ['Feature 3', 'Feature 4'],
+    featuresDone: ['Feature 1', 'Feature 2'],
+    blueBuckets: 2
+  },
+  {
+    title: 'Design',
+    featuresInProgress: [],
+    featuresDone: [],
+    blueBuckets: 1
+  },
+  {
+    title: 'Investigation',
+    featuresInProgress: [],
+    featuresDone: [],
+    blueBuckets: 1
+  },
+  {
+    title: 'Product design',
+    featuresInProgress: [],
+    featuresDone: [],
+    blueBuckets: 2
+  },
+  {
+    title: 'Development',
+    featuresInProgress: [],
+    featuresDone: [],
+    blueBuckets: 2
+  },
+  {
+    title: 'UAT',
+    featuresInProgress: [],
+    featuresDone: [],
+    blueBuckets: 3
+  },
+  {
+    title: 'Release',
+    featuresInProgress: [],
+    featuresDone: [],
+    blueBuckets: 0
+  }
+]