diff --git a/public/src/assets/styles/main.css b/public/src/assets/styles/main.css
index 3c94a9b..f09e089 100644
--- a/public/src/assets/styles/main.css
+++ b/public/src/assets/styles/main.css
@@ -2,6 +2,19 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  /* Ensure smooth scrolling */
+  html {
+    scroll-behavior: smooth;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  /* Better touch targets on mobile */
+  button, a {
+    touch-action: manipulation;
+  }
+}
+
 @layer components {
   .glass {
     @apply bg-white/70 dark:bg-gray-800/70 backdrop-blur-lg border border-white/20 dark:border-gray-700/50;
@@ -20,23 +33,23 @@
   }
 
   .btn-primary {
-    @apply bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105;
+    @apply bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-5 sm:px-6 py-2.5 sm:py-3 rounded-lg font-medium transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105 text-sm sm:text-base min-h-[44px] flex items-center justify-center;
   }
 
   .btn-secondary {
-    @apply glass hover:shadow-lg text-gray-900 dark:text-gray-100 px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:scale-105;
+    @apply glass hover:shadow-lg text-gray-900 dark:text-gray-100 px-5 sm:px-6 py-2.5 sm:py-3 rounded-lg font-medium transition-all duration-300 hover:scale-105 text-sm sm:text-base min-h-[44px] flex items-center justify-center;
   }
 
   .section-title {
-    @apply text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4;
+    @apply text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4;
   }
 
   .section-subtitle {
-    @apply text-lg text-gray-600 dark:text-gray-300;
+    @apply text-base sm:text-lg text-gray-600 dark:text-gray-300 px-2 sm:px-0;
   }
 
   .card {
-    @apply glass p-6 rounded-xl transition-all duration-300 hover:shadow-lg;
+    @apply glass p-4 sm:p-6 rounded-xl transition-all duration-300 hover:shadow-lg;
   }
 
   .nav-link {
@@ -44,7 +57,12 @@
   }
 
   .icon-box {
-    @apply w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 transition-transform duration-300 group-hover:scale-110;
+    @apply w-10 h-10 sm:w-12 sm:h-12 rounded-xl flex items-center justify-center flex-shrink-0 transition-transform duration-300 group-hover:scale-110;
+  }
+
+  /* Section spacing responsive */
+  .section-padding {
+    @apply py-10 sm:py-12 md:py-16;
   }
 }
 
diff --git a/public/src/components/layout/Footer.vue b/public/src/components/layout/Footer.vue
index 09f579d..7d497fc 100644
--- a/public/src/components/layout/Footer.vue
+++ b/public/src/components/layout/Footer.vue
@@ -4,9 +4,9 @@ const currentYear = new Date().getFullYear()
 
 <template>
   <footer class="bg-gray-50 dark:bg-gray-800/50 border-t border-gray-200 dark:border-gray-700 transition-colors duration-300">
-    <div class="max-w-6xl mx-auto px-4 sm:px-6 py-12">
-      <div class="grid md:grid-cols-3 gap-8">
-        <div>
+    <div class="max-w-6xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
+      <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-8">
+        <div class="sm:col-span-2 md:col-span-1">
           <div class="flex items-center gap-2 mb-4">
             <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center">
               <span class="text-white font-bold text-lg">B</span>
@@ -22,25 +22,25 @@ const currentYear = new Date().getFullYear()
         </div>
 
         <div>
-          <h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">Quick Links</h3>
-          <ul class="space-y-2 text-sm">
+          <h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Quick Links</h3>
+          <ul class="grid grid-cols-2 sm:grid-cols-1 gap-2 text-sm">
             <li>
-              <RouterLink to="/values" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+              <RouterLink to="/values" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors py-1 inline-block">
                 Core Values
               </RouterLink>
             </li>
             <li>
-              <RouterLink to="/principles" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+              <RouterLink to="/principles" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors py-1 inline-block">
                 12 Principles
               </RouterLink>
             </li>
             <li>
-              <RouterLink to="/framework" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+              <RouterLink to="/framework" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors py-1 inline-block">
                 Framework
               </RouterLink>
             </li>
             <li>
-              <RouterLink to="/reference" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+              <RouterLink to="/reference" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors py-1 inline-block">
                 Quick Reference
               </RouterLink>
             </li>
@@ -48,15 +48,15 @@ const currentYear = new Date().getFullYear()
         </div>
 
         <div>
-          <h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">Created By</h3>
+          <h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Created By</h3>
           <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">
             The BEAT Manifesto was created by <strong>Lukasz Raczylo</strong>.
           </p>
-          <div class="flex space-x-3">
+          <div class="flex space-x-1">
             <a
               href="https://github.com/lukaszraczylo"
               target="_blank"
-              class="text-gray-500 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
+              class="text-gray-500 hover:text-gray-900 dark:hover:text-gray-100 transition-colors p-2 min-w-[44px] min-h-[44px] flex items-center justify-center"
               aria-label="GitHub"
             >
               <i class="fab fa-github text-xl"></i>
@@ -64,7 +64,7 @@ const currentYear = new Date().getFullYear()
             <a
               href="https://www.linkedin.com/in/raczylo/"
               target="_blank"
-              class="text-gray-500 hover:text-blue-600 transition-colors"
+              class="text-gray-500 hover:text-blue-600 transition-colors p-2 min-w-[44px] min-h-[44px] flex items-center justify-center"
               aria-label="LinkedIn"
             >
               <i class="fab fa-linkedin text-xl"></i>
@@ -73,9 +73,9 @@ const currentYear = new Date().getFullYear()
         </div>
       </div>
 
-      <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
-        <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
-          <p class="text-gray-500 dark:text-gray-500 text-sm">
+      <div class="mt-6 sm:mt-8 pt-6 sm:pt-8 border-t border-gray-200 dark:border-gray-700">
+        <div class="flex flex-col sm:flex-row justify-between items-center gap-3 sm:gap-4 text-center sm:text-left">
+          <p class="text-gray-500 dark:text-gray-500 text-xs sm:text-sm">
             &copy; {{ currentYear }} BEAT Manifesto by Lukasz Raczylo. Open for use and adaptation.
           </p>
           <p class="text-gray-400 dark:text-gray-600 text-xs">
diff --git a/public/src/components/ui/CodeBlock.vue b/public/src/components/ui/CodeBlock.vue
index 3f5aaff..b9a2056 100644
--- a/public/src/components/ui/CodeBlock.vue
+++ b/public/src/components/ui/CodeBlock.vue
@@ -25,17 +25,17 @@ const copyCode = async () => {
 
 <template>
   <div class="rounded-xl overflow-hidden bg-gray-900 dark:bg-gray-950">
-    <div v-if="title" class="flex items-center justify-between px-4 py-2 bg-gray-800 dark:bg-gray-900 border-b border-gray-700">
-      <span class="text-gray-400 text-sm font-medium">{{ title }}</span>
+    <div v-if="title" class="flex items-center justify-between px-3 sm:px-4 py-2 bg-gray-800 dark:bg-gray-900 border-b border-gray-700">
+      <span class="text-gray-400 text-xs sm:text-sm font-medium truncate mr-2">{{ title }}</span>
       <button
         @click="copyCode"
-        class="text-gray-400 hover:text-white transition-colors p-1"
+        class="text-gray-400 hover:text-white transition-colors p-2 min-w-[40px] min-h-[40px] flex items-center justify-center flex-shrink-0"
         aria-label="Copy code"
       >
         <i v-if="copied" class="fas fa-check text-green-400"></i>
         <i v-else class="fas fa-copy"></i>
       </button>
     </div>
-    <pre class="p-4 overflow-x-auto"><code ref="codeRef" class="text-sm text-gray-100 font-mono"><slot></slot></code></pre>
+    <pre class="p-3 sm:p-4 overflow-x-auto text-xs sm:text-sm"><code ref="codeRef" class="text-gray-100 font-mono whitespace-pre-wrap break-words sm:whitespace-pre sm:break-normal"><slot></slot></code></pre>
   </div>
 </template>
diff --git a/public/src/components/ui/TableCard.vue b/public/src/components/ui/TableCard.vue
index 0141882..87022c3 100644
--- a/public/src/components/ui/TableCard.vue
+++ b/public/src/components/ui/TableCard.vue
@@ -17,17 +17,35 @@ defineProps({
 
 <template>
   <div class="glass rounded-xl overflow-hidden">
-    <div v-if="title" class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-      <h3 class="font-semibold text-gray-900 dark:text-gray-100">{{ title }}</h3>
+    <div v-if="title" class="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200 dark:border-gray-700">
+      <h3 class="font-semibold text-gray-900 dark:text-gray-100 text-sm sm:text-base">{{ title }}</h3>
     </div>
-    <div class="overflow-x-auto">
+    <!-- Mobile card view -->
+    <div class="block sm:hidden">
+      <div
+        v-for="(row, rowIndex) in rows"
+        :key="rowIndex"
+        class="p-4 border-b border-gray-200 dark:border-gray-700 last:border-b-0"
+      >
+        <div
+          v-for="(cell, cellIndex) in row"
+          :key="cellIndex"
+          class="py-1"
+        >
+          <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">{{ headers[cellIndex] }}: </span>
+          <span class="text-sm text-gray-700 dark:text-gray-300" v-html="cell"></span>
+        </div>
+      </div>
+    </div>
+    <!-- Desktop table view -->
+    <div class="hidden sm:block overflow-x-auto">
       <table class="w-full">
         <thead>
           <tr class="bg-gray-50 dark:bg-gray-800/50">
             <th
               v-for="header in headers"
               :key="header"
-              class="px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider"
+              class="px-4 md:px-6 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider"
             >
               {{ header }}
             </th>
@@ -42,7 +60,7 @@ defineProps({
             <td
               v-for="(cell, cellIndex) in row"
               :key="cellIndex"
-              class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300"
+              class="px-4 md:px-6 py-3 md:py-4 text-sm text-gray-700 dark:text-gray-300"
             >
               <span v-html="cell"></span>
             </td>
diff --git a/public/src/views/FrameworkView.vue b/public/src/views/FrameworkView.vue
index 36e6156..0d824f8 100644
--- a/public/src/views/FrameworkView.vue
+++ b/public/src/views/FrameworkView.vue
@@ -1,5 +1,4 @@
 <script setup>
-import CodeBlock from '@/components/ui/CodeBlock.vue'
 import { roles, priorityBuckets, ceremonies, constraints } from '@/data/manifesto'
 
 const workItems = [
@@ -169,7 +168,30 @@ const bucketColors = {
           <p class="text-gray-600 dark:text-gray-400">A simple kanban with priority built in.</p>
         </div>
 
-        <CodeBlock title="Board Flow">ICE → LATER → NEXT → IN PROGRESS → DONE</CodeBlock>
+        <!-- Visual Board Flow -->
+        <div class="glass p-4 sm:p-6 rounded-xl overflow-x-auto">
+          <div class="flex items-center justify-start sm:justify-center gap-2 sm:gap-3 min-w-max sm:min-w-0">
+            <div class="px-3 sm:px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs sm:text-sm font-medium">
+              ICE
+            </div>
+            <i class="fas fa-arrow-right text-gray-400 text-xs"></i>
+            <div class="px-3 sm:px-4 py-2 rounded-lg bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs sm:text-sm font-medium">
+              LATER
+            </div>
+            <i class="fas fa-arrow-right text-gray-400 text-xs"></i>
+            <div class="px-3 sm:px-4 py-2 rounded-lg bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 text-xs sm:text-sm font-medium">
+              NEXT
+            </div>
+            <i class="fas fa-arrow-right text-gray-400 text-xs"></i>
+            <div class="px-3 sm:px-4 py-2 rounded-lg bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 text-xs sm:text-sm font-medium">
+              IN PROGRESS
+            </div>
+            <i class="fas fa-arrow-right text-gray-400 text-xs"></i>
+            <div class="px-3 sm:px-4 py-2 rounded-lg bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 text-xs sm:text-sm font-medium">
+              DONE
+            </div>
+          </div>
+        </div>
 
         <div class="mt-8 grid sm:grid-cols-3 gap-4">
           <div class="glass p-4 rounded-lg">
diff --git a/public/src/views/PracticesView.vue b/public/src/views/PracticesView.vue
index 5a3ab91..91a858c 100644
--- a/public/src/views/PracticesView.vue
+++ b/public/src/views/PracticesView.vue
@@ -1,5 +1,4 @@
 <script setup>
-import CodeBlock from '@/components/ui/CodeBlock.vue'
 import { ceremonies, incidentProtocol, technicalPractices, definitionOfDone } from '@/data/manifesto'
 </script>
 
@@ -77,21 +76,42 @@ import { ceremonies, incidentProtocol, technicalPractices, definitionOfDone } fr
         </div>
 
         <div class="max-w-xl mx-auto">
-          <CodeBlock title="Check-in Template">Working on: [current task]
-Blocked by: [nothing / specific issue]</CodeBlock>
+          <!-- Visual Check-in Template -->
+          <div class="glass p-5 sm:p-6 rounded-xl mb-6">
+            <div class="space-y-3">
+              <div class="flex items-center gap-3 p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
+                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center flex-shrink-0">
+                  <i class="fas fa-tasks text-white"></i>
+                </div>
+                <div>
+                  <div class="text-xs text-blue-600 dark:text-blue-400 font-semibold uppercase tracking-wide">Working on</div>
+                  <div class="text-sm text-gray-700 dark:text-gray-300">[current task]</div>
+                </div>
+              </div>
+              <div class="flex items-center gap-3 p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800">
+                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center flex-shrink-0">
+                  <i class="fas fa-hand-paper text-white"></i>
+                </div>
+                <div>
+                  <div class="text-xs text-amber-600 dark:text-amber-400 font-semibold uppercase tracking-wide">Blocked by</div>
+                  <div class="text-sm text-gray-700 dark:text-gray-300">[nothing / specific issue]</div>
+                </div>
+              </div>
+            </div>
+          </div>
 
-          <div class="mt-6 grid sm:grid-cols-3 gap-4">
-            <div class="glass p-4 rounded-lg text-center">
-              <i class="fas fa-clock text-blue-500 text-xl mb-2"></i>
-              <div class="text-sm text-gray-600 dark:text-gray-400">Post once daily</div>
+          <div class="grid grid-cols-3 gap-3 sm:gap-4">
+            <div class="glass p-3 sm:p-4 rounded-lg text-center">
+              <i class="fas fa-clock text-blue-500 text-lg sm:text-xl mb-2"></i>
+              <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Post once daily</div>
             </div>
-            <div class="glass p-4 rounded-lg text-center">
-              <i class="fas fa-stopwatch text-purple-500 text-xl mb-2"></i>
-              <div class="text-sm text-gray-600 dark:text-gray-400">Two minutes</div>
+            <div class="glass p-3 sm:p-4 rounded-lg text-center">
+              <i class="fas fa-stopwatch text-purple-500 text-lg sm:text-xl mb-2"></i>
+              <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Two minutes</div>
             </div>
-            <div class="glass p-4 rounded-lg text-center">
-              <i class="fas fa-users-slash text-green-500 text-xl mb-2"></i>
-              <div class="text-sm text-gray-600 dark:text-gray-400">No gathering required</div>
+            <div class="glass p-3 sm:p-4 rounded-lg text-center">
+              <i class="fas fa-users-slash text-green-500 text-lg sm:text-xl mb-2"></i>
+              <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">No gathering</div>
             </div>
           </div>
         </div>
diff --git a/public/src/views/ReferenceView.vue b/public/src/views/ReferenceView.vue
index d44a18f..5a5043c 100644
--- a/public/src/views/ReferenceView.vue
+++ b/public/src/views/ReferenceView.vue
@@ -1,6 +1,5 @@
 <script setup>
 import TableCard from '@/components/ui/TableCard.vue'
-import CodeBlock from '@/components/ui/CodeBlock.vue'
 import { coreValues, teamValues, constraints, priorityBuckets, roles, ceremonies, definitionOfDone, incidentProtocol } from '@/data/manifesto'
 
 const coreValuesHeaders = ['We Value More', 'Over']
@@ -39,6 +38,20 @@ const ceremoniesRows = ceremonies.map(c => [
   c.duration,
   c.purpose
 ])
+
+const spottedIssueFlow = [
+  { question: 'Blocking your work?', answer: 'Fix now', icon: 'fas fa-ban', color: 'red' },
+  { question: '5 minutes or less?', answer: 'Fix now', icon: 'fas fa-clock', color: 'amber' },
+  { question: 'More than 5 minutes?', answer: 'Log it, continue', icon: 'fas fa-sticky-note', color: 'blue' },
+  { question: 'Production critical?', answer: 'Flag team', icon: 'fas fa-exclamation-triangle', color: 'purple' }
+]
+
+const colorMap = {
+  red: 'from-red-500 to-red-600 bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-700 dark:text-red-300',
+  amber: 'from-amber-500 to-amber-600 bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800 text-amber-700 dark:text-amber-300',
+  blue: 'from-blue-500 to-blue-600 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300',
+  purple: 'from-purple-500 to-purple-600 bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800 text-purple-700 dark:text-purple-300'
+}
 </script>
 
 <template>
@@ -55,45 +68,45 @@ const ceremoniesRows = ceremonies.map(c => [
         </div>
         <h1 class="section-title animate-fade-in-up animate-delay-100">Quick Reference</h1>
         <p class="section-subtitle max-w-2xl mx-auto animate-fade-in-up animate-delay-200">
-          Everything you need at a glance. Print this page and keep it handy.
+          Everything you need at a glance.
         </p>
       </div>
     </section>
 
     <!-- Core Values -->
-    <section class="py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
+    <section class="py-8 sm:py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
       <div class="max-w-6xl mx-auto px-4 sm:px-6">
-        <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Core Values</h2>
+        <h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Core Values</h2>
         <TableCard :headers="coreValuesHeaders" :rows="coreValuesRows" />
       </div>
     </section>
 
     <!-- Team Values -->
-    <section class="py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
+    <section class="py-8 sm:py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
       <div class="max-w-6xl mx-auto px-4 sm:px-6">
-        <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Team Values</h2>
+        <h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Team Values</h2>
         <TableCard :headers="teamValuesHeaders" :rows="teamValuesRows" />
       </div>
     </section>
 
     <!-- The Numbers -->
-    <section class="py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
+    <section class="py-8 sm:py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
       <div class="max-w-6xl mx-auto px-4 sm:px-6">
-        <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">The Numbers</h2>
+        <h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">The Numbers</h2>
         <TableCard :headers="constraintsHeaders" :rows="constraintsRows" />
       </div>
     </section>
 
     <!-- Buckets & Roles -->
-    <section class="py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
+    <section class="py-8 sm:py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
       <div class="max-w-6xl mx-auto px-4 sm:px-6">
-        <div class="grid md:grid-cols-2 gap-8">
+        <div class="grid md:grid-cols-2 gap-6 sm:gap-8">
           <div>
-            <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Priority Buckets</h2>
+            <h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Priority Buckets</h2>
             <TableCard :headers="bucketsHeaders" :rows="bucketsRows" />
           </div>
           <div>
-            <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Roles</h2>
+            <h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Roles</h2>
             <TableCard :headers="rolesHeaders" :rows="rolesRows" />
           </div>
         </div>
@@ -101,56 +114,140 @@ const ceremoniesRows = ceremonies.map(c => [
     </section>
 
     <!-- Ceremonies -->
-    <section class="py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
+    <section class="py-8 sm:py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
       <div class="max-w-6xl mx-auto px-4 sm:px-6">
-        <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Ceremonies</h2>
+        <h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Ceremonies</h2>
         <TableCard :headers="ceremoniesHeaders" :rows="ceremoniesRows" />
       </div>
     </section>
 
     <!-- Templates -->
-    <section class="py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
+    <section class="py-8 sm:py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
       <div class="max-w-6xl mx-auto px-4 sm:px-6">
-        <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-6">Templates</h2>
+        <h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-6">Templates</h2>
 
         <div class="grid md:grid-cols-2 gap-6">
-          <div>
-            <h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Daily Check-in</h3>
-            <CodeBlock>Working on: [task]
-Blocked by: [nothing / issue]</CodeBlock>
+          <!-- Daily Check-in Card -->
+          <div class="glass p-5 sm:p-6 rounded-xl">
+            <h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
+              <i class="fas fa-calendar-check text-blue-500"></i>
+              Daily Check-in
+            </h3>
+            <div class="space-y-3">
+              <div class="flex items-center gap-3 p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
+                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center flex-shrink-0">
+                  <i class="fas fa-tasks text-white text-xs"></i>
+                </div>
+                <div>
+                  <div class="text-xs text-blue-600 dark:text-blue-400 font-medium">Working on</div>
+                  <div class="text-sm text-gray-700 dark:text-gray-300">[current task]</div>
+                </div>
+              </div>
+              <div class="flex items-center gap-3 p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800">
+                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center flex-shrink-0">
+                  <i class="fas fa-hand-paper text-white text-xs"></i>
+                </div>
+                <div>
+                  <div class="text-xs text-amber-600 dark:text-amber-400 font-medium">Blocked by</div>
+                  <div class="text-sm text-gray-700 dark:text-gray-300">[nothing / specific issue]</div>
+                </div>
+              </div>
+            </div>
           </div>
 
-          <div>
-            <h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Spotted Issue Decision</h3>
-            <CodeBlock>Blocking? → Fix now
-≤5 min?   → Fix now
->5 min?   → Log it, continue
-Critical? → Flag team</CodeBlock>
+          <!-- Spotted Issue Decision Flow -->
+          <div class="glass p-5 sm:p-6 rounded-xl">
+            <h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
+              <i class="fas fa-code-branch text-purple-500"></i>
+              Spotted Issue Decision
+            </h3>
+            <div class="space-y-2">
+              <div
+                v-for="(item, index) in spottedIssueFlow"
+                :key="index"
+                class="flex items-center gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg border"
+                :class="colorMap[item.color].split(' ').slice(2).join(' ')"
+              >
+                <div
+                  class="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-gradient-to-br flex items-center justify-center flex-shrink-0"
+                  :class="colorMap[item.color].split(' ').slice(0, 2).join(' ')"
+                >
+                  <i :class="item.icon" class="text-white text-xs"></i>
+                </div>
+                <div class="flex-1 min-w-0">
+                  <span class="text-xs sm:text-sm font-medium">{{ item.question }}</span>
+                </div>
+                <i class="fas fa-arrow-right text-xs opacity-50 hidden sm:block"></i>
+                <span class="text-xs sm:text-sm font-bold whitespace-nowrap">{{ item.answer }}</span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </section>
 
     <!-- Definition of Done -->
-    <section class="py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
+    <section class="py-8 sm:py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
       <div class="max-w-6xl mx-auto px-4 sm:px-6">
-        <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Definition of Done (Code)</h2>
-        <CodeBlock>{{ definitionOfDone.code.map(item => '✓ ' + item).join('\n') }}</CodeBlock>
+        <h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Definition of Done (Code)</h2>
+        <div class="glass p-5 sm:p-6 rounded-xl">
+          <div class="grid sm:grid-cols-2 gap-2 sm:gap-3">
+            <div
+              v-for="item in definitionOfDone.code"
+              :key="item"
+              class="flex items-center gap-3 p-2 sm:p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800"
+            >
+              <div class="w-6 h-6 rounded-full bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center flex-shrink-0">
+                <i class="fas fa-check text-white text-xs"></i>
+              </div>
+              <span class="text-sm text-gray-700 dark:text-gray-300">{{ item }}</span>
+            </div>
+          </div>
+        </div>
       </div>
     </section>
 
     <!-- Incident Protocol -->
-    <section class="py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
+    <section class="py-8 sm:py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
       <div class="max-w-6xl mx-auto px-4 sm:px-6">
-        <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Incident Protocol</h2>
-        <CodeBlock>{{ incidentProtocol.map(step => step.step + ' ' + step.description.split('.')[0]).join('\n') }}</CodeBlock>
+        <h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Incident Protocol</h2>
+        <div class="glass p-5 sm:p-6 rounded-xl">
+          <div class="relative">
+            <!-- Flow line for desktop -->
+            <div class="hidden sm:block absolute left-5 top-8 bottom-8 w-0.5 bg-gradient-to-b from-red-500 via-amber-500 to-green-500"></div>
+            <div class="space-y-4">
+              <div
+                v-for="(step, index) in incidentProtocol"
+                :key="step.step"
+                class="flex items-start gap-3 sm:gap-4"
+              >
+                <div
+                  class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 z-10"
+                  :class="[
+                    index === 0 ? 'bg-gradient-to-br from-red-500 to-red-600' :
+                    index === 1 ? 'bg-gradient-to-br from-orange-500 to-orange-600' :
+                    index === 2 ? 'bg-gradient-to-br from-amber-500 to-amber-600' :
+                    index === 3 ? 'bg-gradient-to-br from-blue-500 to-blue-600' :
+                    'bg-gradient-to-br from-green-500 to-green-600'
+                  ]"
+                >
+                  <span class="text-white font-bold text-sm">{{ index + 1 }}</span>
+                </div>
+                <div class="flex-1 pb-2">
+                  <div class="font-semibold text-gray-900 dark:text-gray-100 text-sm sm:text-base">{{ step.step.replace(/^\d+\.\s*/, '') }}</div>
+                  <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">{{ step.description }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </section>
 
     <!-- Footer Note -->
-    <section class="py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
+    <section class="py-8 sm:py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
       <div class="max-w-4xl mx-auto px-4 sm:px-6 text-center">
-        <div class="glass p-6 rounded-xl">
+        <div class="glass p-5 sm:p-6 rounded-xl">
           <p class="text-gray-600 dark:text-gray-400 text-sm mb-2">
             BEAT v1.0 by <strong>Lukasz Raczylo</strong>
           </p>