diff --git a/website/package-lock.json b/website/package-lock.json
index 2e4f1c3..d4f17a6 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -18,7 +18,8 @@
         "react-router": "^7.5.1",
         "react-scripts": "^5.0.1",
         "react-scroll": "^1.8.1",
-        "recharts": "^2.0.8"
+        "recharts": "^2.0.8",
+        "zustand": "^5.0.4"
       },
       "devDependencies": {
         "lint-staged": "^15.5.1",
@@ -19479,6 +19480,35 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.4.tgz",
+      "integrity": "sha512-39VFTN5InDtMd28ZhjLyuTnlytDr9HfwO512Ai4I8ZABCoyAj4F1+sr7sD1jP/+p7k77Iko0Pb5NhgBFDCX0kQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/website/package.json b/website/package.json
index eb557dc..178eef2 100644
--- a/website/package.json
+++ b/website/package.json
@@ -13,7 +13,8 @@
     "react-router": "^7.5.1",
     "react-scripts": "^5.0.1",
     "react-scroll": "^1.8.1",
-    "recharts": "^2.0.8"
+    "recharts": "^2.0.8",
+    "zustand": "^5.0.4"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/website/public/manifest.json b/website/public/manifest.json
index 542d6aa..1e3ec47 100644
--- a/website/public/manifest.json
+++ b/website/public/manifest.json
@@ -6,7 +6,7 @@
       "src": "teachla-logo.svg",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
+    }
   ],
   "start_url": ".",
   "display": "standalone",
diff --git a/website/src/components/posts/FacialRecognition/CounterFrame.js b/website/src/components/posts/FacialRecognition/CounterFrame.js
index 30ff975..29299ed 100644
--- a/website/src/components/posts/FacialRecognition/CounterFrame.js
+++ b/website/src/components/posts/FacialRecognition/CounterFrame.js
@@ -1,40 +1,82 @@
-import React, { useState } from 'react';
+import React from "react";
+import { create } from "zustand";
 
-function CounterFrame() {
-  const numbers = [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15];
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const [counters, setCounters] = useState([0, 0, 0, 0]);
-  const [processedLast, setProcessedLast] = useState(false);
+const useCounterStore = create((set) => ({
+  numbers: [3, 1, 2, 2, 3, 2, 4, 2, 3, 2, 1, 2, 2],
+  step: 0,
+  guesses: new Map([
+    [
+      1,
+      {
+        correct: 0,
+        incorrect: 0,
+      },
+    ],
+    [
+      2,
+      {
+        correct: 0,
+        incorrect: 0,
+      },
+    ],
+    [
+      3,
+      {
+        correct: 0,
+        incorrect: 0,
+      },
+    ],
+    [
+      4,
+      {
+        correct: 0,
+        incorrect: 0,
+      },
+    ],
+  ]),
+  increment: (guess) =>
+    set((state) => {
+      if (state.step === state.numbers.length - 1) {
+        return state;
+      }
+      if (![1, 2, 3, 4].includes(guess)) {
+        return state;
+      }
+      const correctVal = state.numbers[state.step];
+      const updatedGuesses = new Map(state.guesses);
+      let v = state.guesses.get(correctVal);
+      if (guess === correctVal) {
+        v.correct++;
+      } else {
+        v.incorrect++;
+      }
+      updatedGuesses.set(correctVal, v);
+      return { step: state.step + 1, guesses: updatedGuesses };
+    }),
+}));
 
+function CounterFrame() {
+  const currentNumber = useCounterStore((state) => state.numbers[state.step]);
+  const increment = useCounterStore((state) => state.increment);
+  const guesses = useCounterStore((state) => state.guesses);
 
   const handleButtonClick = (counterIndex) => {
-    //Checks to make sure we haven't iterated through the last element yet
-    if(!processedLast) {
-      // Makes a copy of the current counters array
-      const updatedCounters = [...counters];
-      updatedCounters[counterIndex] = updatedCounters[counterIndex] + 1;
-      setCounters(updatedCounters);
-
-      if (currentIndex < numbers.length - 1) {
-        setCurrentIndex(currentIndex + 1);
-      }
-      else {
-        setProcessedLast(true);
-      }
-    }
+    increment(counterIndex);
   };
 
   return (
     <div>
-      <h2>Current Number: {numbers[currentIndex]}</h2>
+      <h2>Current Number: {currentNumber}</h2>
       <div>
-        {counters.map((count, index) => (
+        {Array.from(guesses, ([val, { correct, incorrect }]) => (
           <button
-            key={index}
-            onClick={() => handleButtonClick(index)}
-            style={{ marginRight: '10px', marginTop: '10px' }}
+            key={val}
+            onClick={() => handleButtonClick(val)}
+            style={{ marginRight: "10px", marginTop: "10px" }}
           >
-            Counter {index + 1}: {count}
+            {val}
+            correct: {correct}
+            incorrect: {incorrect}
           </button>
         ))}
       </div>
@@ -42,4 +84,4 @@ function CounterFrame() {
   );
 }
 
-export default CounterFrame;
\ No newline at end of file
+export default CounterFrame;