diff --git a/focus-group-summary.md b/focus-group-summary.md
new file mode 100644
index 0000000..939833a
--- /dev/null
+++ b/focus-group-summary.md
@@ -0,0 +1,12 @@
+Contributor: Alivia Hossain (Aspiring GSoC Contributor. Will drop GSoC 2026 proposal)
+Changes made: Focus Group Prototype
+Future SCope and other details : Submitted in GSoC 2026 proposal
+
+How to test run:
+1. Terminal: npm install
+2. Terminal: npm run serve
+3. Browser : http://localhost:8080/setup
+3. Browser : http://localhost:8080/session
+3. Browser : http://localhost:8080/analysis
+
+Further changes and suggestions always welcome and appreciated !
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 1a0192b..637fc16 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,10 +13,12 @@
         "@tensorflow/tfjs-backend-wasm": "^3.10.0",
         "@tensorflow/tfjs-converter": "^3.10.0",
         "@tensorflow/tfjs-core": "^3.10.0",
+        "@vue/composition-api": "^1.7.2",
         "axios": "^1.7.9",
         "core-js": "^3.6.5",
         "firebase": "^8.10.1",
         "heatmap.js": "^2.0.5",
+        "pinia": "^2.0.36",
         "vue": "^2.6.11",
         "vue-router": "^3.2.0",
         "vuetify": "^2.4.0",
@@ -3514,6 +3516,21 @@
       "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
       "dev": true
     },
+    "node_modules/@vue/composition-api": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.7.2.tgz",
+      "integrity": "sha512-M8jm9J/laYrYT02665HkZ5l2fWTK4dcVg3BsDHm/pfz+MjDYwX+9FUaZyGwEyXEDonQYRCo0H7aLgdklcIELjw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": ">= 2.5 < 2.7"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/@vue/shared": {
       "version": "3.5.26",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.26.tgz",
@@ -8936,6 +8953,32 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.0.36",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.36.tgz",
+      "integrity": "sha512-4UKApwjlmJH+VuHKgA+zQMddcCb3ezYnyewQ9NVrsDqZ/j9dMv5+rh+1r48whKNdpFkZAWVxhBp5ewYaYX9JcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -11408,6 +11451,32 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
diff --git a/package.json b/package.json
index 5c1dc9a..b96d5d3 100644
--- a/package.json
+++ b/package.json
@@ -13,22 +13,24 @@
     "@tensorflow/tfjs-backend-wasm": "^3.10.0",
     "@tensorflow/tfjs-converter": "^3.10.0",
     "@tensorflow/tfjs-core": "^3.10.0",
+    "@vue/composition-api": "^1.7.2",
     "axios": "^1.7.9",
     "core-js": "^3.6.5",
     "firebase": "^8.10.1",
     "heatmap.js": "^2.0.5",
+    "pinia": "^2.0.36",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuetify": "^2.4.0",
     "vuex": "^3.4.0"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.16.0",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
-    "@babel/eslint-parser": "^7.16.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "sass": "~1.32.0",
@@ -59,4 +61,4 @@
     "last 2 versions",
     "not dead"
   ]
-}
\ No newline at end of file
+}
diff --git a/src/components/focus-group/AnalysisChart.vue b/src/components/focus-group/AnalysisChart.vue
new file mode 100644
index 0000000..960723d
--- /dev/null
+++ b/src/components/focus-group/AnalysisChart.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="bg-slate-800 rounded-2xl p-6 border border-slate-700 shadow-xl transition-all duration-500">
+    <div class="flex justify-between items-center mb-6">
+      <h3 class="text-lg font-bold text-slate-100 flex items-center gap-2">
+        <span class="w-2 h-6 bg-purple-500 rounded-full shadow-[0_0_10px_#a855f7]"></span>
+        Thematic Pulse Analysis
+      </h3>
+      
+      <select 
+        v-model="selectedTopic" 
+        class="bg-slate-900 text-xs text-purple-300 border border-slate-700 rounded-lg px-2 py-1 outline-none focus:border-purple-500"
+      >
+        <option :value="null">All Topics</option>
+        <option v-for="id in uniqueTopicIds" :key="id" :value="id">
+          Topic #{{ id + 1 }}
+        </option>
+      </select>
+    </div>
+
+    <div class="space-y-6">
+      <div v-for="item in chartData" :key="item.label" class="space-y-2 group">
+        <div class="flex justify-between text-sm">
+          <span class="text-slate-400 flex items-center gap-2 transition-colors group-hover:text-slate-200">
+            <span :class="['w-3 h-3 rounded-full shadow-sm', item.bg]"></span>
+            {{ item.label }}
+          </span>
+          <span class="text-slate-100 font-mono">
+            {{ item.count }} <span class="text-slate-500 text-xs">({{ item.percent }}%)</span>
+          </span>
+        </div>
+        
+        <div class="w-full bg-slate-900 h-3 rounded-full overflow-hidden border border-slate-700">
+          <div 
+            class="h-full transition-all duration-1000 ease-out rounded-full shadow-[inset_0_1px_2px_rgba(0,0,0,0.5)]"
+            :class="item.bg"
+            :style="{ width: item.percent + '%' }"
+          ></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-8 grid grid-cols-2 gap-4">
+      <div class="bg-slate-900/50 p-3 rounded-xl border border-slate-700">
+        <div class="text-[10px] text-slate-500 uppercase tracking-widest mb-1">Top Driver</div>
+        <div class="text-sm font-bold text-slate-200">{{ topDriver }}</div>
+      </div>
+      <div class="bg-slate-900/50 p-3 rounded-xl border border-slate-700">
+        <div class="text-[10px] text-slate-500 uppercase tracking-widest mb-1">Engagement Density</div>
+        <div class="text-sm font-bold text-slate-200">{{ engagementDensity }} obs/min</div>
+      </div>
+    </div>
+
+    <div class="mt-6 pt-6 border-t border-slate-700 flex justify-between items-center">
+      <p class="text-xs text-slate-500 italic">
+        * N={{ filteredTotal }} (Filtered) / Total N={{ observations.length }}
+      </p>
+      <v-icon x-small color="grey darken-2">mdi-information-outline</v-icon>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+  observations: { type: Array, default: () => [] }
+});
+
+// Logic: Reactive Filter
+const selectedTopic = ref(null);
+
+const uniqueTopicIds = computed(() => {
+  const ids = props.observations.map(o => o.topicId);
+  return [...new Set(ids)].filter(id => id !== undefined).sort();
+});
+
+const filteredObservations = computed(() => {
+  if (selectedTopic.value === null) return props.observations;
+  return props.observations.filter(o => o.topicId === selectedTopic.value);
+});
+
+const filteredTotal = computed(() => filteredObservations.value.length || 0);
+
+const chartData = computed(() => {
+  const counts = { consensus: 0, divergence: 0, insight: 0 };
+  filteredObservations.value.forEach(o => {
+    if (counts[o.type] !== undefined) counts[o.type]++;
+  });
+
+  const total = filteredTotal.value || 1; // Avoid division by zero
+
+  return [
+    { label: 'Consensus', count: counts.consensus, percent: Math.round((counts.consensus / total) * 100), bg: 'bg-emerald-500' },
+    { label: 'Divergence', count: counts.divergence, percent: Math.round((counts.divergence / total) * 100), bg: 'bg-amber-500' },
+    { label: 'Key Insights', count: counts.insight, percent: Math.round((counts.insight / total) * 100), bg: 'bg-purple-500' }
+  ];
+});
+
+// Functional Addition: Research Metrics
+const topDriver = computed(() => {
+  const data = chartData.value;
+  const winner = data.reduce((prev, current) => (prev.count > current.count) ? prev : current, data[0]);
+  return winner.count > 0 ? winner.label : 'N/A';
+});
+
+const engagementDensity = computed(() => {
+  if (props.observations.length < 2) return "0.0";
+  const start = new Date(props.observations[0].timestamp);
+  const end = new Date(props.observations[props.observations.length - 1].timestamp);
+  const diffMinutes = (end - start) / 60000 || 1;
+  return (props.observations.length / diffMinutes).toFixed(1);
+});
+</script>
+
+<style scoped>
+.shadow-purple {
+  box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
+}
+.transition-all {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+/* For the select dropdown */
+select {
+  appearance: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='purple' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 0.5rem center;
+  background-size: 1em;
+  padding-right: 2rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/focus-group/NoteCapture.vue b/src/components/focus-group/NoteCapture.vue
new file mode 100644
index 0000000..f3819c0
--- /dev/null
+++ b/src/components/focus-group/NoteCapture.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="flex flex-col h-full bg-slate-900/50 rounded-xl border border-slate-700 overflow-hidden shadow-2xl">
+    
+    <div class="px-4 py-3 bg-slate-800 border-b border-slate-700 d-flex justify-space-between align-center">
+      <span class="text-xs font-bold text-slate-400 uppercase tracking-widest flex items-center gap-2">
+        <span class="w-2 h-2 rounded-full bg-red-500 animate-pulse"></span>
+        Live Observation Feed
+      </span>
+      <span class="text-[10px] text-slate-500 font-mono">{{ store.observations.length }} entries captured</span>
+    </div>
+
+    <div 
+      ref="scrollContainer"
+      class="flex-1 overflow-y-auto p-4 space-y-4 custom-scrollbar bg-grid-slate-800"
+    >
+      <div v-if="store.observations.length === 0" class="h-full flex flex-col items-center justify-center opacity-30 italic text-slate-400">
+        <v-icon x-large color="grey lighten-1">mdi-text-box-search-outline</v-icon>
+        <p class="mt-2 text-sm">Awaiting first research observation...</p>
+      </div>
+
+      <transition-group name="list" tag="div" class="space-y-3">
+        <div 
+          v-for="(obs, index) in store.observations" 
+          :key="obs.id" 
+          :class="['p-4 rounded-lg border-l-4 transition-all duration-300 hover:scale-[1.01]', getTagClass(obs.type)]"
+        >
+          <div class="flex justify-between items-start mb-1">
+            <span class="text-[10px] font-bold uppercase text-slate-500 tracking-tighter">
+              Topic: {{ getTopicLabel(obs.topicId) }}
+            </span>
+            <div class="flex items-center gap-2">
+              <span class="text-[10px] text-slate-500 font-mono">{{ formatTime(obs.timestamp) }}</span>
+              <button @click="removeNote(index)" class="text-slate-600 hover:text-red-400 transition-colors">
+                <v-icon x-small>mdi-close</v-icon>
+              </button>
+            </div>
+          </div>
+          <p class="text-sm leading-relaxed text-slate-200">{{ obs.content }}</p>
+        </div>
+      </transition-group>
+    </div>
+
+    <div class="p-4 bg-slate-800 border-t border-slate-700 shadow-inner">
+      <div class="relative group">
+        <textarea 
+          ref="inputBox"
+          v-model="currentNote"
+          @keydown.enter.exact.prevent="submitNote('neutral')"
+          @keydown.alt.49.prevent="submitNote('consensus')"
+          @keydown.alt.50.prevent="submitNote('divergence')"
+          @keydown.alt.51.prevent="submitNote('insight')"
+          placeholder="Capture insight... (Enter to save)"
+          class="w-full bg-slate-900 border border-slate-700 p-4 pb-12 rounded-xl text-slate-100 placeholder-slate-600 focus:border-purple-500/50 focus:ring-4 focus:ring-purple-500/10 outline-none transition-all resize-none"
+          rows="3"
+        ></textarea>
+        
+        <div class="absolute bottom-3 left-3 right-3 flex justify-between items-center">
+          <PulseButtons @trigger-tag="submitNote" />
+          
+          <div class="flex items-center gap-2 text-[10px] text-slate-500 font-mono">
+            <span class="hidden md:inline">ALT + 1/2/3 to Tag</span>
+            <v-btn fab x-small color="purple darken-2" depressed @click="submitNote('neutral')" :disabled="!currentNote.trim()">
+              <v-icon small color="white">mdi-send</v-icon>
+            </v-btn>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick, onMounted } from 'vue';
+import { useFocusGroupStore } from '@/store/modules/focusGroup';
+import PulseButtons from './PulseButtons.vue';
+
+const store = useFocusGroupStore();
+const currentNote = ref('');
+const scrollContainer = ref(null);
+const inputBox = ref(null);
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (scrollContainer.value) {
+      scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight;
+    }
+  });
+};
+
+const submitNote = (type) => {
+  if (!currentNote.value.trim()) return;
+  
+  store.addObservation({
+    content: currentNote.value,
+    type: type,
+    timestamp: new Date().toISOString(),
+    // Logic: Connect note to the currently active topic in the store
+    topicId: store.currentTopicId 
+  });
+  
+  currentNote.value = '';
+  scrollToBottom();
+  focusInput();
+};
+
+const removeNote = (index) => {
+  store.observations.splice(index, 1);
+};
+
+const focusInput = () => {
+  nextTick(() => {
+    if (inputBox.value) inputBox.value.focus();
+  });
+};
+
+const formatTime = (ts) => {
+  if (!ts) return '';
+  return new Date(ts).toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+};
+
+const getTopicLabel = (id) => {
+  return id !== null && id !== undefined ? `#${id + 1}` : 'Gen';
+};
+
+const getTagClass = (type) => {
+  const classes = {
+    consensus: 'border-emerald-500 bg-emerald-900/10 text-emerald-100',
+    divergence: 'border-amber-500 bg-amber-900/10 text-amber-100',
+    insight: 'border-purple-500 bg-purple-900/10 text-purple-100 shadow-[0_0_15px_rgba(168,85,247,0.05)]',
+    neutral: 'border-slate-600 bg-slate-800/50 text-slate-300'
+  };
+  return classes[type] || classes.neutral;
+};
+
+onMounted(() => {
+  focusInput();
+});
+</script>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar { width: 4px; }
+.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
+.custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
+
+.list-enter-active, .list-leave-active { transition: all 0.4s ease; }
+.list-enter-from { opacity: 0; transform: translateX(30px); }
+.list-leave-to { opacity: 0; transform: scale(0.95); }
+
+.bg-grid-slate-800 {
+  background-image: radial-gradient(#1e293b 1px, transparent 0);
+  background-size: 20px 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/focus-group/PulseButtons.vue b/src/components/focus-group/PulseButtons.vue
new file mode 100644
index 0000000..bb269e7
--- /dev/null
+++ b/src/components/focus-group/PulseButtons.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="flex items-center gap-3 p-2 bg-slate-900/40 rounded-xl border border-slate-700/50 backdrop-blur-md">
+    <button 
+      @click="emitTag('consensus')" 
+      class="btn-pulse group bg-emerald-600/20 border border-emerald-500/50 hover:bg-emerald-600 hover:border-emerald-400"
+      title="Agreement between participants [Alt+1]"
+    >
+      <div class="flex items-center gap-2">
+        <v-icon x-small color="emerald lighten-3" class="group-hover:white--text">mdi-check-circle</v-icon>
+        <span class="text-xs uppercase tracking-wider text-emerald-400 group-hover:text-white">Consensus</span>
+      </div>
+      <span class="kb-hint">1</span>
+    </button>
+
+    <button 
+      @click="emitTag('divergence')" 
+      class="btn-pulse group bg-amber-600/20 border border-amber-500/50 hover:bg-amber-600 hover:border-amber-400"
+      title="Conflict or different opinions [Alt+2]"
+    >
+      <div class="flex items-center gap-2">
+        <v-icon x-small color="amber lighten-3" class="group-hover:white--text">mdi-fire</v-icon>
+        <span class="text-xs uppercase tracking-wider text-amber-400 group-hover:text-white">Divergence</span>
+      </div>
+      <span class="kb-hint">2</span>
+    </button>
+
+    <button 
+      @click="emitTag('insight')" 
+      class="btn-pulse group bg-purple-600/20 border border-purple-500/50 hover:bg-purple-600 hover:border-purple-400 pulse-glow"
+      title="Key finding or new idea [Alt+3]"
+    >
+      <div class="flex items-center gap-2">
+        <v-icon x-small color="purple lighten-3" class="group-hover:white--text">mdi-lightbulb-on</v-icon>
+        <span class="text-xs uppercase tracking-wider text-purple-400 group-hover:text-white">Insight</span>
+      </div>
+      <span class="kb-hint">3</span>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PulseButtons',
+  setup(props, { emit }) {
+    const emitTag = (type) => {
+      emit('trigger-tag', type);
+    };
+
+    return {
+      emitTag
+    };
+  }
+};
+</script>
+
+<style scoped>
+.btn-pulse {
+  position: relative;
+  padding: 6px 14px;
+  border-radius: 10px;
+  font-weight: 800;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+.btn-pulse:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+.btn-pulse:active {
+  transform: translateY(1px) scale(0.96);
+}
+
+/* Keyboard Hint Styling */
+.kb-hint {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  background: #1e293b;
+  border: 1px solid #475569;
+  color: #94a3b8;
+  font-size: 8px;
+  width: 14px;
+  height: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+/* The "Insight" Pulse Glow */
+.pulse-glow {
+  animation: glow 3s infinite ease-in-out;
+}
+
+@keyframes glow {
+  0%, 100% { box-shadow: 0 0 5px rgba(168, 85, 247, 0.2); }
+  50% { box-shadow: 0 0 15px rgba(168, 85, 247, 0.5); }
+}
+
+/* Specific hover button states */
+.group:hover .kb-hint {
+  border-color: white;
+  color: white;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/focus-group/SessionGuide.vue b/src/components/focus-group/SessionGuide.vue
new file mode 100644
index 0000000..31e165f
--- /dev/null
+++ b/src/components/focus-group/SessionGuide.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="flex flex-col h-full bg-slate-900 border-r border-slate-700/50 shadow-2xl">
+    <div class="p-6 pb-2">
+      <div class="flex items-center justify-between mb-2">
+        <h2 class="text-xs font-bold uppercase tracking-[0.2em] text-slate-500">
+          Mission Script
+        </h2>
+        <v-chip x-small outlined color="purple lighten-3" class="font-mono opacity-70">
+          {{ guide.length }} STAGES
+        </v-chip>
+      </div>
+      <p class="text-[10px] text-slate-600 italic mb-4 leading-tight">
+        Click a stage to sync your observations with the timeline.
+      </p>
+    </div>
+
+    <div class="flex-1 overflow-y-auto px-4 pb-6 space-y-3 custom-scrollbar">
+      <transition-group name="stagger" tag="div" class="space-y-3">
+        <div 
+          v-for="(topic, index) in guide" 
+          :key="topic.id || index"
+          @click="selectTopic(topic.id)"
+          :class="[
+            'group relative p-4 rounded-xl border transition-all duration-300 cursor-pointer overflow-hidden',
+            store.currentTopicId === topic.id 
+              ? 'bg-purple-600/15 border-purple-500/50 shadow-[0_0_20px_rgba(168,85,247,0.15)] ring-1 ring-purple-500/30' 
+              : 'bg-slate-800/40 border-slate-700 hover:border-slate-500 hover:bg-slate-800/60'
+          ]"
+        >
+          <div v-if="store.currentTopicId === topic.id" class="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-transparent animate-pulse-slow"></div>
+
+          <div class="relative flex items-start gap-4 z-10">
+            <div class="relative">
+              <span :class="[
+                'flex-shrink-0 w-7 h-7 rounded-lg flex items-center justify-center text-[10px] font-black transition-all duration-300',
+                store.currentTopicId === topic.id 
+                  ? 'bg-purple-500 text-white shadow-lg shadow-purple-500/40 rotate-3' 
+                  : 'bg-slate-700 text-slate-400 group-hover:bg-slate-600'
+              ]">
+                {{ (index + 1).toString().padStart(2, '0') }}
+              </span>
+              <div 
+                v-if="getNoteCount(topic.id) > 0"
+                class="absolute -top-1 -right-1 w-3 h-3 bg-emerald-500 rounded-full border-2 border-slate-900 flex items-center justify-center"
+              >
+                <v-icon x-small color="white" style="font-size: 6px;">mdi-check</v-icon>
+              </div>
+            </div>
+
+            <div class="flex-grow">
+              <p :class="[
+                'text-sm transition-colors duration-300 leading-snug',
+                store.currentTopicId === topic.id ? 'text-white font-semibold' : 'text-slate-400 group-hover:text-slate-200'
+              ]">
+                {{ topic.prompt }}
+              </p>
+              
+              <div class="mt-2 flex items-center gap-2">
+                <div class="h-1 flex-grow bg-slate-900 rounded-full overflow-hidden">
+                  <div 
+                    class="h-full bg-purple-500/40 transition-all duration-500" 
+                    :style="{ width: Math.min(getNoteCount(topic.id) * 20, 100) + '%' }"
+                  ></div>
+                </div>
+                <span class="text-[9px] font-mono text-slate-600 uppercase">
+                  {{ getNoteCount(topic.id) }} obs
+                </span>
+              </div>
+            </div>
+          </div>
+          
+          <div 
+            v-if="store.currentTopicId === topic.id" 
+            class="absolute left-0 top-0 bottom-0 w-1 bg-purple-500 shadow-[0_0_10px_#a855f7]"
+          ></div>
+        </div>
+      </transition-group>
+
+      <div v-if="guide.length === 0" class="p-8 text-center border-2 border-dashed border-slate-800 rounded-2xl">
+        <v-icon color="slate-700" large>mdi-script-text-outline</v-icon>
+        <p class="text-xs text-slate-600 mt-2">No discussion points loaded from setup.</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useFocusGroupStore } from '@/store/modules/focusGroup';
+
+const store = useFocusGroupStore();
+const props = defineProps({
+  guide: { type: Array, required: true }
+});
+
+// Functional Addition: Calculate note density per topic for progress bars
+const getNoteCount = (topicId) => {
+  return store.observations.filter(o => o.topicId === topicId).length;
+};
+
+const selectTopic = (id) => {
+  store.setTopic(id);
+};
+</script>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar { width: 3px; }
+.custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
+
+@keyframes pulse-slow {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 0.6; }
+}
+.animate-pulse-slow {
+  animation: pulse-slow 4s infinite ease-in-out;
+}
+
+/* Staggered Entry Animation */
+.stagger-enter-active {
+  transition: all 0.5s ease;
+}
+.stagger-enter-from {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+
+.shadow-purple {
+  box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
+}
+
+.bg-purple-600\/15 {
+  background-color: rgba(147, 51, 234, 0.15);
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 219cc2f..cf85822 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,23 +1,24 @@
 import Vue from 'vue'
+import VueCompositionAPI from '@vue/composition-api' // MUST be first
+import { createPinia, PiniaVuePlugin } from 'pinia'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import vuetify from './plugins/vuetify';
-import './services/axios'
-import firebase from 'firebase/app'
-import 'firebase/firestore'
-import { envConfig } from './config/environment'
+import vuetify from './plugins/vuetify'
 
-Vue.config.productionTip = false
+// 1. Initialize the Bridge
+Vue.use(VueCompositionAPI)
 
-const firebaseConfig = envConfig.firebase;
+// 2. Initialize Pinia
+Vue.use(PiniaVuePlugin)
+const pinia = createPinia()
 
-// Initialize Firebase
-firebase.initializeApp(firebaseConfig);
+Vue.config.productionTip = false
 
 new Vue({
   router,
-  store,
+  store, // Existing Vuex
+  pinia, // Your New Pinia
   vuetify,
   render: h => h(App)
-}).$mount('#app')
+}).$mount('#app')
\ No newline at end of file
diff --git a/src/models/FocusGroup.js b/src/models/FocusGroup.js
new file mode 100644
index 0000000..c960283
--- /dev/null
+++ b/src/models/FocusGroup.js
@@ -0,0 +1,19 @@
+export const FocusGroupSchema = {
+  session: {
+    id: null,
+    title: "",
+    objective: "",
+    status: "setup", // setup, live, completed
+    startTime: null,
+  },
+  participants: [], // { id, name, role, tags }
+  guide: [], // { id, prompt, duration, order }
+  observations: [] // { id, timestamp, topicId, participantId, content, type }
+};
+
+export const ObservationTypes = {
+  NEUTRAL: 'neutral',
+  CONSENSUS: 'consensus',
+  DIVERGENCE: 'divergence',
+  INSIGHT: 'insight'
+};
\ No newline at end of file
diff --git a/src/router/focusGroupRoutes.js b/src/router/focusGroupRoutes.js
new file mode 100644
index 0000000..e55fb87
--- /dev/null
+++ b/src/router/focusGroupRoutes.js
@@ -0,0 +1,21 @@
+// 1. Static imports must be at the top level
+import FGSetup from '@/views/focus-group/FGSetup.vue'
+
+export const focusGroupRoutes = [
+  {
+    path: '/focus-group/setup',
+    name: 'FGSetup',
+    component: FGSetup // Use the imported component here
+  },
+  {
+    path: '/focus-group/session',
+    name: 'FGSession',
+    // Lazy-loading for the other views
+    component: () => import('@/views/focus-group/FGSession.vue')
+  },
+  {
+    path: '/focus-group/analysis',
+    name: 'FGAnalysis',
+    component: () => import('@/views/focus-group/FGAnalysis.vue')
+  }
+];
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 47e7ec7..8eb6d5c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,8 +1,9 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 // import store from '@/store/index'
+
+// Existing View Imports
 import LandingPage from '@/views/LandingPage.vue'
-// import Login from '@/views/Login'
 import Dashboard from '@/views/Dashboard'
 import Calibration from '@/views/CalibrationCard'
 import CameraConfig from '@/views/CameraConfiguration'
@@ -10,9 +11,13 @@ import DoubleCalibrationRecord from '@/views/DoubleCalibrationRecord'
 import PostCalibration from '@/views/PostCalibration'
 import CalibrationConfig from '@/views/CalibrationConfig'
 
+// Focus Group Module Import
+import { focusGroupRoutes } from './focusGroupRoutes'
+
 Vue.use(VueRouter)
 
 const routes = [
+  // --- Existing RUXAILAB Routes ---
   {
     path: '/',
     name: 'LandingPage',
@@ -53,6 +58,15 @@ const routes = [
     name: 'calibrationConfig',
     component: CalibrationConfig
   },
+
+  // --- Focus Group Module Routes ---
+  ...focusGroupRoutes,
+
+  // --- Catch-all Redirect ---
+  {
+    path: '*',
+    redirect: '/'
+  }
 ]
 
 const router = new VueRouter({
@@ -61,13 +75,13 @@ const router = new VueRouter({
   routes
 })
 
+// --- Navigation Guards ---
 // router.beforeResolve(async (to, from, next) => {
 //   var user = store.state.auth.user
 //   user = user ?? await store.dispatch('autoSignIn')
 //   if ((to.path == '/login' || to.path == '/') && user) next('/dashboard')
 //   else if ((to.path == '/dashboard') && !user) next('/login')
-
 //   next()
 // })
 
-export default router
+export default router
\ No newline at end of file
diff --git a/src/services/focusGroupService.js b/src/services/focusGroupService.js
new file mode 100644
index 0000000..84fc2ab
--- /dev/null
+++ b/src/services/focusGroupService.js
@@ -0,0 +1,17 @@
+const STORAGE_KEY = 'ruxailab_fg_prototype';
+
+export const focusGroupService = {
+  saveSession(data) {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+    return true;
+  },
+
+  getSession() {
+    const data = localStorage.getItem(STORAGE_KEY);
+    return data ? JSON.parse(data) : null;
+  },
+
+  clearSession() {
+    localStorage.removeItem(STORAGE_KEY);
+  }
+};
\ No newline at end of file
diff --git a/src/store/modules/focusGroup.js b/src/store/modules/focusGroup.js
new file mode 100644
index 0000000..358af37
--- /dev/null
+++ b/src/store/modules/focusGroup.js
@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'; // Recommended for Vue 3
+
+export const useFocusGroupStore = defineStore('focusGroup', {
+  state: () => ({
+    activeSession: null,
+    currentTopicId: null,
+    observations: [],
+  }),
+  actions: {
+    setTopic(id) {
+      this.currentTopicId = id;
+    },
+    addObservation(note) {
+      const observation = {
+        id: Date.now(),
+        timestamp: new Date().toISOString(),
+        topicId: this.currentTopicId,
+        ...note
+      };
+      this.observations.push(observation);
+      // Auto-save to local storage for PoW persistence
+      localStorage.setItem('temp_obs', JSON.stringify(this.observations));
+    }
+  }
+});
\ No newline at end of file
diff --git a/src/views/focus-group/FGAnalysis.vue b/src/views/focus-group/FGAnalysis.vue
new file mode 100644
index 0000000..416f0f8
--- /dev/null
+++ b/src/views/focus-group/FGAnalysis.vue
@@ -0,0 +1,198 @@
+<template>
+  <v-container class="dashboard-bg fill-height pa-8" fluid>
+    <v-row>
+      <v-col cols="12">
+        <div class="d-flex justify-space-between align-center mb-8">
+          <div>
+            <h1 class="text-h3 font-weight-black white--text neon-text">INSIGHT SYNTHESIS</h1>
+            <p class="subtitle-1 grey--text">Qualitative Data Analytics & Thematic Mapping</p>
+          </div>
+          <div class="d-flex gap-3">
+            <v-btn color="purple lighten-2" outlined rounded @click="exportData('json')">
+              <v-icon left>mdi-code-json</v-icon> JSON BUNDLE
+            </v-btn>
+            <v-btn color="green lighten-2" outlined rounded @click="exportData('csv')">
+              <v-icon left>mdi-file-delimited</v-icon> CSV REPORT
+            </v-btn>
+          </div>
+        </div>
+      </v-col>
+
+      <v-col cols="12" md="3" v-for="(stat, index) in stats" :key="'stat-'+index">
+        <v-card class="glass-card pa-6 text-center" dark>
+          <v-icon :color="stat.color" class="mb-2">{{ stat.icon }}</v-icon>
+          <div class="text-overline grey--text">{{ stat.label }}</div>
+          <div class="text-h2 font-weight-black" :style="{ color: stat.color }">{{ stat.value }}</div>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="7" class="mt-6">
+        <v-card class="glass-card pa-6" dark min-height="500">
+          <div class="d-flex justify-space-between align-center mb-6">
+            <h2 class="text-h5">THEMATIC OBSERVATION FEED</h2>
+            <v-chip-group v-model="activeFilter" mandatory active-class="purple--text text--lighten-3">
+              <v-chip value="all" small outlined>ALL</v-chip>
+              <v-chip value="insight" small outlined color="purple lighten-2">INSIGHTS</v-chip>
+              <v-chip value="consensus" small outlined color="emerald lighten-2">CONSENSUS</v-chip>
+              <v-chip value="divergence" small outlined color="amber lighten-2">DIVERGENCE</v-chip>
+            </v-chip-group>
+          </div>
+
+          <v-divider class="mb-6 grey darken-3"></v-divider>
+
+          <div class="feed-container overflow-y-auto" style="max-height: 600px;">
+            <div v-if="filteredObservations.length === 0" class="text-center grey--text pa-10">
+              No observations found for this filter.
+            </div>
+            
+            <v-card 
+              v-for="obs in filteredObservations" 
+              :key="obs.id" 
+              class="mb-4 pa-4 list-item-border" 
+              color="transparent"
+            >
+              <div class="d-flex justify-space-between mb-2">
+                <v-chip x-small :color="getTypeColor(obs.type)" label>{{ obs.type.toUpperCase() }}</v-chip>
+                <span class="text-caption grey--text font-mono">{{ formatTime(obs.timestamp) }}</span>
+              </div>
+              <p class="white--text mb-1">{{ obs.content }}</p>
+              <div class="text-caption purple--text text--lighten-4 italic">
+                Ref: {{ getTopicName(obs.topicId) }}
+              </div>
+            </v-card>
+          </div>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="5" class="mt-6">
+        <v-card class="glass-card pa-6 mb-6" dark>
+          <h2 class="text-h5 mb-6">CONSENSUS MAP</h2>
+          <div v-for="topic in analytics" :key="topic.id" class="mb-6">
+            <div class="d-flex justify-space-between mb-2">
+              <span class="text-subtitle-2 font-weight-bold truncate-text">{{ topic.prompt }}</span>
+              <span class="purple--text font-weight-black">{{ topic.score }}%</span>
+            </div>
+            <v-progress-linear
+              :value="topic.score"
+              height="8"
+              rounded
+              color="purple lighten-1"
+              background-color="grey darken-4"
+            ></v-progress-linear>
+            <div class="text-caption grey--text mt-1 d-flex justify-space-between">
+              <span>{{ topic.count }} Observations</span>
+              <span>Distribution: {{ topic.dist }}</span>
+            </div>
+          </div>
+        </v-card>
+
+        <v-card class="glass-card pa-6" dark>
+          <h2 class="text-h6 mb-4">ACTIONABLE SUMMARY</h2>
+          <v-list dense bg-color="transparent" class="pa-0">
+            <v-list-item v-for="(insight, i) in topInsights" :key="i" class="pa-0 mb-2">
+              <v-list-item-icon class="mr-3">
+                <v-icon color="purple lighten-2">mdi-auto-fix</v-icon>
+              </v-list-item-icon>
+              <v-list-item-content>
+                <div class="text-body-2 white--text">{{ insight.content }}</div>
+              </v-list-item-content>
+            </v-list-item>
+          </v-list>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'FGAnalysis',
+  data: () => ({
+    rawData: null,
+    activeFilter: 'all'
+  }),
+  computed: {
+    stats() {
+      if (!this.rawData) return [];
+      const obs = this.rawData.observations;
+      return [
+        { label: 'TOTAL NOTES', value: obs.length, color: '#fff', icon: 'mdi-text-box-multiple-outline' },
+        { label: 'KEY INSIGHTS', value: obs.filter(o => o.type === 'insight').length, color: '#a855f7', icon: 'mdi-lightbulb-on-outline' },
+        { label: 'DIVERGENCE', value: obs.filter(o => o.type === 'divergence').length, color: '#f59e0b', icon: 'mdi-alert-decagram-outline' },
+        { label: 'CONSENSUS', value: obs.filter(o => o.type === 'consensus').length, color: '#10b981', icon: 'mdi-check-decagram-outline' }
+      ];
+    },
+    filteredObservations() {
+      if (!this.rawData) return [];
+      const obs = [...this.rawData.observations].reverse(); // Most recent first
+      if (this.activeFilter === 'all') return obs;
+      return obs.filter(o => o.type === this.activeFilter);
+    },
+    analytics() {
+      if (!this.rawData) return [];
+      return this.rawData.guide.map((topic, index) => {
+        const topicObs = this.rawData.observations.filter(o => o.topicId === index);
+        const conCount = topicObs.filter(o => o.type === 'consensus').length;
+        const divCount = topicObs.filter(o => o.type === 'divergence').length;
+        const insCount = topicObs.filter(o => o.type === 'insight').length;
+
+        return {
+          id: index,
+          prompt: topic.prompt,
+          count: topicObs.length,
+          score: topicObs.length ? Math.round((conCount / topicObs.length) * 100) : 0,
+          dist: `C:${conCount} D:${divCount} I:${insCount}`
+        };
+      });
+    },
+    topInsights() {
+      if (!this.rawData) return [];
+      return this.rawData.observations.filter(o => o.type === 'insight').slice(-5);
+    }
+  },
+  mounted() {
+    this.rawData = JSON.parse(localStorage.getItem('ruxailab_fg_prototype'));
+  },
+  methods: {
+    getTypeColor(type) {
+      const colors = { insight: 'purple darken-1', divergence: 'amber darken-2', consensus: 'emerald darken-2' };
+      return colors[type] || 'grey';
+    },
+    getTopicName(id) {
+      return this.rawData?.guide[id]?.prompt || 'General Discussion';
+    },
+    formatTime(ts) {
+      return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    },
+    exportData(format) {
+      if (format === 'json') {
+        const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(this.rawData, null, 2));
+        this.triggerDownload(dataStr, "research_export.json");
+      } else {
+        let csv = "Timestamp,Topic,Type,Content\n";
+        this.rawData.observations.forEach(o => {
+          csv += `"${o.timestamp}","${this.getTopicName(o.topicId)}","${o.type}","${o.content.replace(/"/g, '""')}"\n`;
+        });
+        const csvStr = "data:text/csv;charset=utf-8," + encodeURIComponent(csv);
+        this.triggerDownload(csvStr, "research_report.csv");
+      }
+    },
+    triggerDownload(uri, name) {
+      const link = document.createElement('a');
+      link.setAttribute("href", uri);
+      link.setAttribute("download", name);
+      link.click();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.dashboard-bg { background: radial-gradient(circle at top right, #1e1b4b, #0f172a); }
+.glass-card { background: rgba(30, 41, 59, 0.7) !important; backdrop-filter: blur(12px); border: 1px solid rgba(168, 85, 247, 0.2) !important; }
+.neon-text { text-shadow: 0 0 15px rgba(168, 85, 247, 0.5); }
+.list-item-border { border-left: 3px solid rgba(168, 85, 247, 0.5) !important; background: rgba(15, 23, 42, 0.4) !important; }
+.truncate-text { max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.gap-3 { gap: 12px; }
+.italic { font-style: italic; }
+</style>
\ No newline at end of file
diff --git a/src/views/focus-group/FGSession.vue b/src/views/focus-group/FGSession.vue
new file mode 100644
index 0000000..72b874c
--- /dev/null
+++ b/src/views/focus-group/FGSession.vue
@@ -0,0 +1,270 @@
+<template>
+  <v-container class="dashboard-bg fill-height pa-0" fluid>
+    <v-row no-gutters class="fill-height">
+      
+      <v-col cols="12" md="4" class="glass-pane border-right-glow d-flex flex-column h-screen">
+        <div class="pa-6">
+          <h2 class="text-overline purple--text text--lighten-2 mb-4">ACTIVE GUIDE</h2>
+          <div class="guide-scroll-area">
+            <v-scroll-y-transition group>
+              <v-card 
+                v-for="(topic, index) in guide" 
+                :key="'topic-'+index"
+                :class="['mb-4 guide-item', currentTopicIndex === index ? 'active-glow' : '']"
+                @click="currentTopicIndex = index"
+              >
+                <div class="d-flex align-center pa-4">
+                  <div :class="['index-circle mr-4', currentTopicIndex === index ? 'purple darken-1' : 'grey darken-3']">
+                    {{ index + 1 }}
+                  </div>
+                  <div class="white--text font-weight-medium">{{ topic.prompt }}</div>
+                </div>
+              </v-card>
+            </v-scroll-y-transition>
+          </div>
+        </div>
+
+        <v-spacer></v-spacer>
+
+        <div class="pa-6 border-top-glow">
+          <v-btn 
+            block 
+            x-large 
+            color="purple darken-2" 
+            class="white--text glow-button"
+            @click="goToAnalysis"
+          >
+            <v-icon left>mdi-chart-box-outline</v-icon>
+            FINISH & ANALYZE
+          </v-btn>
+        </div>
+      </v-col>
+
+      <v-col cols="12" md="8" class="d-flex flex-column h-screen overflow-hidden">
+        
+        <div class="pa-4 px-6 d-flex justify-space-between align-center glass-header">
+          <div class="d-flex align-center">
+            <v-chip x-small color="red" class="pulse-dot mr-2">REC</v-chip>
+            <h2 class="text-overline white--text mb-0">LIVE OBSERVATION FEED</h2>
+          </div>
+          <div class="timer-text px-4 py-1 rounded-lg">
+            <v-icon small color="purple lighten-3" class="mr-2">mdi-clock-outline</v-icon>
+            {{ sessionTimer }}
+          </div>
+        </div>
+
+        <div class="flex-grow-1 overflow-y-auto pa-6 custom-scrollbar" ref="feed">
+          <v-fade-transition group>
+            <v-card 
+              v-for="obs in observations" 
+              :key="obs.id" 
+              class="mb-4 observation-note"
+              :class="obs.type"
+            >
+              <div class="d-flex justify-space-between text-caption grey--text pa-2 px-4">
+                <span class="font-weight-bold uppercase">Topic: {{ getTopicName(obs.topicId) }}</span>
+                <span>{{ formatTime(obs.timestamp) }}</span>
+              </div>
+              <v-divider dark class="mx-4 opacity-10"></v-divider>
+              <div class="white--text pa-4 pt-2 text-body-1">{{ obs.content }}</div>
+            </v-card>
+          </v-fade-transition>
+          
+          <div v-if="observations.length === 0" class="text-center pa-12 grey--text opacity-50">
+            <v-icon x-large class="mb-2">mdi-comment-text-multiple-outline</v-icon>
+            <p>Ready for input. Use Alt + 1/2/3 for quick tagging.</p>
+          </div>
+        </div>
+
+        <v-card class="glass-card ma-6 mt-0 pa-4 rounded-xl border-purple shadow-lg">
+          <v-textarea
+            ref="inputCursor"
+            v-model="newNote"
+            placeholder="Type observation here... (Alt+1: Cons, Alt+2: Div, Alt+3: Ins)"
+            solo flat dark
+            background-color="transparent"
+            hide-details
+            rows="2"
+            class="capture-input"
+            autofocus
+            @keydown.alt.49.prevent="addNote('consensus')"
+            @keydown.alt.50.prevent="outputTag('divergence')"
+            @keydown.alt.51.prevent="addNote('insight')"
+            @keydown.enter.exact.prevent="addNote('neutral')"
+          ></v-textarea>
+          
+          <v-divider class="my-3 grey darken-3"></v-divider>
+
+          <div class="d-flex align-center gap-3">
+            <v-btn rounded color="success" class="tag-btn" @click="addNote('consensus')">
+              <v-icon left>mdi-check-circle</v-icon> CONSENSUS
+            </v-btn>
+            
+            <v-btn rounded color="amber darken-2" class="tag-btn" @click="addNote('divergence')">
+              <v-icon left>mdi-fire</v-icon> DIVERGENCE
+            </v-btn>
+            
+            <v-btn rounded color="purple lighten-1" class="tag-btn" @click="addNote('insight')">
+              <v-icon left>mdi-lightbulb-on</v-icon> INSIGHT
+            </v-btn>
+
+            <v-spacer></v-spacer>
+
+            <v-btn fab small color="grey darken-3" @click="addNote('neutral')">
+              <v-icon color="white">mdi-send</v-icon>
+            </v-btn>
+          </div>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import { useFocusGroupStore } from '@/store/modules/focusGroup';
+
+export default {
+  name: 'FGSession',
+  data: () => ({
+    newNote: '',
+    currentTopicIndex: 0,
+    guide: [],
+    store: null,
+    // Timer Logic
+    startTime: null,
+    elapsedTime: 0,
+    timerId: null
+  }),
+  computed: {
+    observations() { return this.store ? this.store.observations : []; },
+    sessionTimer() {
+      const hrs = Math.floor(this.elapsedTime / 3600).toString().padStart(2, '0');
+      const mins = Math.floor((this.elapsedTime % 3600) / 60).toString().padStart(2, '0');
+      const secs = (this.elapsedTime % 60).toString().padStart(2, '0');
+      return `${hrs}:${mins}:${secs}`;
+    }
+  },
+  created() {
+    this.store = useFocusGroupStore();
+    const sessionData = JSON.parse(localStorage.getItem('ruxailab_fg_prototype'));
+    if (sessionData) {
+      this.guide = sessionData.guide || [];
+    }
+    this.startTime = Date.now();
+  },
+  mounted() {
+    // Start Recording Timer
+    this.timerId = setInterval(() => {
+      this.elapsedTime = Math.floor((Date.now() - this.startTime) / 1000);
+    }, 1000);
+    
+    // Set initial focus
+    this.focusInput();
+  },
+  beforeDestroy() {
+    if (this.timerId) clearInterval(this.timerId);
+  },
+  methods: {
+    addNote(type) {
+      if (!this.newNote.trim()) return;
+      
+      this.store.addObservation({
+        content: this.newNote,
+        type: type,
+        topicId: this.currentTopicIndex
+      });
+
+      this.newNote = '';
+      
+      // Return cursor focus to the textarea immediately
+      this.focusInput();
+      
+      // Fix: Auto-Scroll Bug
+      this.$nextTick(() => {
+        const feed = this.$refs.feed;
+        if (feed) feed.scrollTop = feed.scrollHeight;
+      });
+    },
+    // The "Native Cursor" Fix
+    focusInput() {
+      this.$nextTick(() => {
+        if (this.$refs.inputCursor) {
+          // Accessing the native textarea inside Vuetify's component wrapper
+          const el = this.$refs.inputCursor.$el.querySelector('textarea');
+          if (el) el.focus();
+        }
+      });
+    },
+    // Wrapper for Divergence specifically to ensure key binding works
+    outputTag(type) {
+      this.addNote(type);
+    },
+    getTopicName(id) {
+      return this.guide[id] ? this.guide[id].prompt : 'General';
+    },
+    formatTime(ts) {
+      return new Date(ts).toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+    },
+    goToAnalysis() {
+      this.$router.push('/focus-group/analysis');
+    }
+  }
+};
+</script>
+
+<style scoped>
+.dashboard-bg { background: #0f172a; height: 100vh; overflow: hidden; }
+.glass-pane { background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(15px); }
+.glass-header { background: rgba(15, 23, 42, 0.4); border-bottom: 1px solid rgba(168, 85, 247, 0.1); }
+.border-right-glow { border-right: 1px solid rgba(168, 85, 247, 0.2); }
+.border-top-glow { border-top: 1px solid rgba(168, 85, 247, 0.2); }
+.h-screen { height: 100vh; }
+
+/* Premium Timer Styling */
+.timer-text { 
+  font-family: 'Courier New', Courier, monospace; 
+  background: rgba(168, 85, 247, 0.1); 
+  border: 1px solid rgba(168, 85, 247, 0.3);
+  color: #e0b0ff;
+  font-weight: bold;
+  font-size: 1.1rem;
+}
+
+.guide-item { 
+  background: rgba(30, 41, 59, 0.5) !important; 
+  border: 1px solid rgba(255,255,255,0.05) !important; 
+  cursor: pointer; 
+  transition: 0.3s; 
+}
+.active-glow { 
+  border-color: #a855f7 !important; 
+  background: rgba(168, 85, 247, 0.15) !important;
+  box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
+}
+
+.observation-note { 
+  background: rgba(30, 41, 59, 0.8) !important; 
+  border-left: 5px solid #64748b !important; 
+}
+.observation-note.consensus { border-left-color: #10b981 !important; }
+.observation-note.divergence { border-left-color: #f59e0b !important; }
+.observation-note.insight { border-left-color: #a855f7 !important; }
+
+.tag-btn { font-size: 11px !important; font-weight: 800; color: white !important; }
+.index-circle { 
+  width: 28px; height: 28px; border-radius: 50%; 
+  display: flex; align-items: center; justify-content: center; 
+  font-size: 12px; font-weight: bold; 
+}
+
+.border-purple { border: 1px solid rgba(168, 85, 247, 0.4) !important; }
+.gap-3 { gap: 12px; }
+.pulse-dot { animation: blink 1.5s infinite; }
+
+@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
+
+.custom-scrollbar::-webkit-scrollbar { width: 6px; }
+.custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
+.glow-button { box-shadow: 0 0 15px rgba(168, 85, 247, 0.4); transition: 0.3s; }
+.glow-button:hover { transform: translateY(-2px); box-shadow: 0 0 25px rgba(168, 85, 247, 0.6); }
+</style>
\ No newline at end of file
diff --git a/src/views/focus-group/FGSetup.vue b/src/views/focus-group/FGSetup.vue
new file mode 100644
index 0000000..f434c35
--- /dev/null
+++ b/src/views/focus-group/FGSetup.vue
@@ -0,0 +1,292 @@
+<template>
+  <v-container class="dashboard-bg fill-height pa-8" fluid>
+    <v-row justify="center">
+      <v-col cols="12" md="10" lg="9">
+        
+        <v-card class="glass-card pa-10 rounded-xl" dark>
+          <div class="d-flex justify-space-between align-start mb-10">
+            <div class="header-section">
+              <div class="d-flex align-center mb-1">
+                <v-icon color="purple lighten-2" class="mr-2">mdi-shield-edit-outline</v-icon>
+                <span class="text-overline purple--text text--lighten-3">Configuration Terminal v1.0</span>
+              </div>
+              <h1 class="text-h3 font-weight-black neon-text">SESSION SETUP</h1>
+              <p class="subtitle-1 grey--text text--lighten-1">Define your research parameters and discussion framework</p>
+            </div>
+
+            <v-menu offset-y transition="scroll-y-transition">
+              <template v-slot:activator="{ on, attrs }">
+                <v-btn outlined color="purple lighten-2" rounded v-bind="attrs" v-on="on">
+                  <v-icon left>mdi-layers-triple-outline</v-icon>
+                  Load Template
+                </v-btn>
+              </template>
+              <v-list dark color="grey darken-4" class="border-purple">
+                <v-list-item v-for="(t, i) in templates" :key="i" @click="applyTemplate(t)">
+                  <v-list-item-title>{{ t.name }}</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </div>
+
+          <v-row>
+            <v-col cols="12" md="5">
+              <div class="input-group">
+                <div class="d-flex justify-space-between">
+                  <label class="custom-label">SESSION IDENTITY</label>
+                  <span class="text-caption grey--text">{{ session.title.length }}/50</span>
+                </div>
+                <v-text-field
+                  v-model="session.title"
+                  placeholder="e.g., Q1 Product Usability Study"
+                  solo flat counter="50"
+                  class="custom-input mt-2"
+                  prepend-inner-icon="mdi-format-title"
+                ></v-text-field>
+              </div>
+
+              <div class="input-group mt-6">
+                <label class="custom-label">RESEARCH OBJECTIVES</label>
+                <v-textarea
+                  v-model="session.objective"
+                  placeholder="Outline the core hypothesis or goals of this focus group..."
+                  solo flat rows="5"
+                  class="custom-input mt-2"
+                  prepend-inner-icon="mdi-target"
+                ></v-textarea>
+              </div>
+
+              <v-card color="rgba(168, 85, 247, 0.05)" class="mt-8 pa-4 border-purple dashed">
+                <div class="text-caption grey--text mb-2">SYSTEM READINESS</div>
+                <div class="d-flex align-center mb-1">
+                  <v-icon small :color="session.title ? 'success' : 'grey'">mdi-check-circle</v-icon>
+                  <span class="ml-2 text-body-2">Session Title defined</span>
+                </div>
+                <div class="d-flex align-center">
+                  <v-icon small :color="guide.length >= 2 ? 'success' : 'grey'">mdi-check-circle</v-icon>
+                  <span class="ml-2 text-body-2">{{ guide.length }} Discussion prompts ready</span>
+                </div>
+              </v-card>
+            </v-col>
+
+            <v-col cols="12" md="7" class="border-left-glow pl-md-8">
+              <div class="d-flex justify-space-between align-center mb-4">
+                <label class="custom-label">DISCUSSION GUIDE BUILDER</label>
+                <div class="d-flex align-center">
+                  <v-btn text x-small color="grey" class="mr-2" @click="clearGuide">Clear All</v-btn>
+                  <v-btn fab x-small color="purple lighten-1" @click="addPrompt" class="pulse-btn shadow-purple">
+                    <v-icon>mdi-plus</v-icon>
+                  </v-btn>
+                </div>
+              </div>
+
+              <div class="guide-scroll-container">
+                <v-scroll-x-transition group>
+                  <div v-for="(item, index) in guide" :key="'prompt-' + index" class="d-flex align-center mb-4">
+                    <div class="step-number mr-3">{{ index + 1 }}</div>
+                    <v-text-field
+                      v-model="item.prompt"
+                      :placeholder="'Introduce topic ' + (index + 1) + '...'"
+                      solo flat dense hide-details
+                      class="custom-input-small flex-grow-1"
+                    ></v-text-field>
+                    <v-btn icon color="red lighten-3" small class="ml-2" @click="removePrompt(index)" v-if="guide.length > 1">
+                      <v-icon small>mdi-delete-outline</v-icon>
+                    </v-btn>
+                  </div>
+                </v-scroll-x-transition>
+                
+                <div v-if="guide.length === 0" class="text-center pa-10 border-purple dashed rounded-lg">
+                  <p class="grey--text mb-0">No discussion prompts. Click the + button to begin.</p>
+                </div>
+              </div>
+            </v-col>
+          </v-row>
+
+          <v-card-actions class="mt-12 pt-6 border-top-glow">
+            <v-btn text color="grey lighten-1" @click="resetForm">
+              RESET ALL
+            </v-btn>
+            <v-spacer></v-spacer>
+            <v-btn
+              x-large
+              rounded
+              :disabled="!isFormValid"
+              :class="['launch-btn px-12', isFormValid ? 'active' : '']"
+              @click="startSession"
+            >
+              DEPLOY MODULE
+              <v-icon right>mdi-fire</v-icon>
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import { focusGroupService } from '@/services/focusGroupService';
+
+export default {
+  name: 'FGSetup',
+  data: () => ({
+    session: { title: '', objective: '' },
+    guide: [{ prompt: '' }],
+    templates: [
+      { 
+        name: 'User Experience Audit', 
+        obj: 'Evaluating ease of use, navigation clarity, and visual appeal.',
+        steps: ['Initial thoughts on landing', 'Navigation task completion', 'Feature satisfaction', 'Final recommendations']
+      },
+      { 
+        name: 'Brand Identity Feedback', 
+        obj: 'Gathering emotional responses to logo, colors, and tone of voice.',
+        steps: ['Brand adjectives', 'Visual association', 'Competitor comparison', 'Tone of voice review']
+      }
+    ]
+  }),
+  computed: {
+    isFormValid() {
+      return this.session.title.length > 0 && this.guide.some(g => g.prompt.length > 0);
+    }
+  },
+  methods: {
+    addPrompt() {
+      this.guide.push({ prompt: '' });
+    },
+    removePrompt(index) {
+      this.guide.splice(index, 1);
+    },
+    clearGuide() {
+      this.guide = [];
+    },
+    resetForm() {
+      if(confirm('Are you sure you want to clear all inputs?')) {
+        this.session = { title: '', objective: '' };
+        this.guide = [{ prompt: '' }];
+      }
+    },
+    applyTemplate(template) {
+      this.session.title = template.name;
+      this.session.objective = template.obj;
+      this.guide = template.steps.map(s => ({ prompt: s }));
+    },
+    startSession() {
+      const data = { 
+        session: this.session, 
+        guide: this.guide.filter(g => g.prompt.trim() !== ''), 
+        observations: [],
+        startedAt: new Date().toISOString()
+      };
+      focusGroupService.saveSession(data);
+      this.$router.push('/focus-group/session');
+    }
+  }
+};
+</script>
+
+<style scoped>
+.dashboard-bg {
+  background: radial-gradient(circle at top right, #1e1b4b, #0f172a);
+}
+
+.glass-card {
+  background: rgba(30, 41, 59, 0.7) !important;
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(168, 85, 247, 0.3) !important;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8) !important;
+}
+
+.neon-text {
+  color: #fff;
+  text-shadow: 0 0 10px rgba(168, 85, 247, 0.8), 0 0 20px rgba(168, 85, 247, 0.4);
+  letter-spacing: 2px;
+}
+
+.custom-label {
+  font-size: 0.75rem;
+  font-weight: 800;
+  color: #94a3b8;
+  letter-spacing: 1.5px;
+}
+
+.custom-input >>> .v-input__slot, 
+.custom-input-small >>> .v-input__slot {
+  background: rgba(15, 23, 42, 0.8) !important;
+  border: 1px solid #334155 !important;
+  transition: all 0.3s ease;
+}
+
+.custom-input >>> .v-input__slot:focus-within {
+  border-color: #a855f7 !important;
+  box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
+}
+
+.launch-btn {
+  background: rgba(255, 255, 255, 0.05) !important;
+  color: rgba(255, 255, 255, 0.3) !important;
+  font-weight: 900;
+  transition: all 0.3s;
+}
+
+.launch-btn.active {
+  background: linear-gradient(45deg, #7c3aed, #db2777) !important;
+  color: white !important;
+  box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
+}
+
+.launch-btn.active:hover {
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 0 0 30px rgba(219, 39, 119, 0.6);
+}
+
+.step-number {
+  background: #a855f7;
+  color: white;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.7rem;
+  font-weight: bold;
+}
+
+.border-left-glow {
+  border-left: 1px solid rgba(168, 85, 247, 0.1);
+}
+
+.border-top-glow {
+  border-top: 1px solid rgba(168, 85, 247, 0.1);
+}
+
+.border-purple.dashed {
+  border: 1px dashed rgba(168, 85, 247, 0.4) !important;
+}
+
+.guide-scroll-container {
+  max-height: 400px;
+  overflow-y: auto;
+  padding-right: 10px;
+}
+
+.guide-scroll-container::-webkit-scrollbar {
+  width: 5px;
+}
+.guide-scroll-container::-webkit-scrollbar-thumb {
+  background: rgba(168, 85, 247, 0.2);
+  border-radius: 10px;
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.7); }
+  70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(168, 85, 247, 0); }
+  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
+}
+.pulse-btn {
+  animation: pulse 2s infinite;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/focus-group/TestPage.vue b/src/views/focus-group/TestPage.vue
new file mode 100644
index 0000000..f94fffe
--- /dev/null
+++ b/src/views/focus-group/TestPage.vue
@@ -0,0 +1,8 @@
+<template>
+  <div style="padding: 100px; background: yellow; color: black; font-size: 50px;">
+    COMPONENT IS LOADING!
+  </div>
+</template>
+<script>
+export default { name: 'TestPage' };
+</script>
\ No newline at end of file
diff --git a/tests/unit/FocusGroup.spec.js b/tests/unit/FocusGroup.spec.js
new file mode 100644
index 0000000..eb2c7b1
--- /dev/null
+++ b/tests/unit/FocusGroup.spec.js
@@ -0,0 +1,27 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useFocusGroupStore } from '@/store/modules/focusGroup';
+import { setActivePinia, createPinia } from 'pinia';
+
+describe('Focus Group Logic Engine', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('correctly tags an observation with the active topic ID', () => {
+    const store = useFocusGroupStore();
+    store.setTopic(5); // Simulate selecting the 5th topic
+    
+    store.addObservation({ content: 'Test Insight', type: 'insight' });
+    
+    expect(store.observations[0].topicId).toBe(5);
+    expect(store.observations[0].type).toBe('insight');
+  });
+
+  it('generates a valid ISO timestamp for each note', () => {
+    const store = useFocusGroupStore();
+    store.addObservation({ content: 'Timer test', type: 'neutral' });
+    
+    const timestamp = store.observations[0].timestamp;
+    expect(new Date(timestamp).getTime()).not.toBeNaN();
+  });
+});
\ No newline at end of file