diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e5b2df6..868ccc1 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,8 +1,12 @@
 # Simple workflow for deploying static content to GitHub Pages
-name: Deploy static content to Pages
+name: CI Workflow
 
 on:
-  # Runs on pushes targeting the default branch
+  # Runs on pull requests targeting the main branch
+  pull_request:
+    branches: ["main"]
+
+  # Runs on push to the main branch
   push:
     branches: ["main"]
 
@@ -24,6 +28,7 @@ concurrency:
 jobs:
   # Single deploy job since we're just deploying
   deploy:
+    if: github.event_name == 'push'
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
@@ -45,3 +50,17 @@ jobs:
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4
+
+  # Job for running tests
+  test:
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+      - run: bun install
+      - run: bun run build
+      - name: Run Tests
+        run: bun run test
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..e69de29
diff --git a/package.json b/package.json
index 454fad6..5ff3585 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "i18next": "^23.16.4",
@@ -19,6 +20,9 @@
     "react-i18next": "^15.1.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@types/jsdom": "^21.1.7",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
@@ -28,8 +32,10 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "jsdom": "^26.0.0",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.2.2",
-    "vite": "^5.2.0"
+    "vite": "^5.2.0",
+    "vitest": "^3.0.0"
   }
 }
diff --git a/src/App.test.tsx b/src/App.test.tsx
new file mode 100644
index 0000000..a098aee
--- /dev/null
+++ b/src/App.test.tsx
@@ -0,0 +1,11 @@
+
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import App from './App';
+
+test('renders without crashing', async () => {
+  render(<App />);
+  const linkElement = screen.getByTestId('title');
+  expect(document.body).toContainElement(linkElement);
+});
diff --git a/src/App.tsx b/src/App.tsx
index 9a6fd37..b3f2a10 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,22 +1,43 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
-import { X, PlusCircle, Share2, Redo2 } from 'lucide-react';
-import { QRCodeSVG } from 'qrcode.react';
-import ViewToggle from './components/ViewToggle';
-import { useTranslation } from 'react-i18next';
-import Tooth from './components/Tooth';
-import { FEATURES } from './config';
-import LanguageButtons from './components/LanguageButtons';
-import Logo from './components/Logo';
+import { useState, useEffect, useRef, useCallback } from "react";
+import { X, PlusCircle, Share2, Redo2 } from "lucide-react";
+import { QRCodeSVG } from "qrcode.react";
+import ViewToggle from "./components/ViewToggle";
+import { useTranslation } from "react-i18next";
+import Tooth from "./components/Tooth";
+import { FEATURES } from "./config";
+import LanguageButtons from "./components/LanguageButtons";
+import Logo from "./components/Logo";
 
 const teethLayout = [
   [18, 17, 16, 15, 14, 13, 12, 11, 21, 22, 23, 24, 25, 26, 27, 28],
-  [48, 47, 46, 45, 44, 43, 42, 41, 31, 32, 33, 34, 35, 36, 37, 38]
+  [48, 47, 46, 45, 44, 43, 42, 41, 31, 32, 33, 34, 35, 36, 37, 38],
 ];
 
 const ELASTIC_TYPES = [
-  { id: 0, name: 'Rabbit', color: '#FF5555', thickness: 3, icon: '🐰', time: '24h' },
-  { id: 1, name: 'Chipmunk', color: '#5555CC', thickness: 4, icon: '🐿️', time: 'daytime' },
-  { id: 2, name: 'Fox', color: '#44DD44', thickness: 5, icon: '🦊', time: 'nighttime' },
+  {
+    id: 0,
+    name: "Rabbit",
+    color: "#FF5555",
+    thickness: 3,
+    icon: "🐰",
+    time: "24h",
+  },
+  {
+    id: 1,
+    name: "Chipmunk",
+    color: "#5555CC",
+    thickness: 4,
+    icon: "🐿️",
+    time: "daytime",
+  },
+  {
+    id: 2,
+    name: "Fox",
+    color: "#44DD44",
+    thickness: 5,
+    icon: "🦊",
+    time: "nighttime",
+  },
 ];
 
 type Elastic = {
@@ -34,9 +55,11 @@ const ElasticPlacer = () => {
   const [isMirrorView, setIsMirrorView] = useState(false);
   const [elastics, setElastics] = useState<Elastic[]>([]);
   const [currentElastic, setCurrentElastic] = useState<number[]>([]);
-  const [currentElasticType, setCurrentElasticType] = useState<number>(ELASTIC_TYPES[0].id);
-  const [currentElasticTime, setCurrentElasticTime] = useState<string>('24h');
-  const [shareUrl, setShareUrl] = useState('');
+  const [currentElasticType, setCurrentElasticType] = useState<number>(
+    ELASTIC_TYPES[0].id
+  );
+  const [currentElasticTime, setCurrentElasticTime] = useState<string>("24h");
+  const [shareUrl, setShareUrl] = useState("");
   const [disabledTeeth, setDisabledTeeth] = useState<number[]>([]);
   const [onHoverListItem, setOnHoverListItem] = useState<number | null>(null);
   const toothRefs = useRef<ToothRef>({});
@@ -46,9 +69,9 @@ const ElasticPlacer = () => {
   // Load from URL
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
-    const savedElastics = params.get('e');
-    const savedDisabledTeeth = params.get('t');
-    const savedMirrorView = params.get('m');
+    const savedElastics = params.get("e");
+    const savedDisabledTeeth = params.get("t");
+    const savedMirrorView = params.get("m");
 
     if (savedElastics) {
       try {
@@ -56,8 +79,10 @@ const ElasticPlacer = () => {
         // Convert old format (if needed) to numeric IDs:
         parsedElastics = parsedElastics.map((el: any) => {
           // If el.type is a string name, convert to numeric id
-          if (typeof el.type === 'string') {
-            const foundType = ELASTIC_TYPES.find(et => et.name === el.type) || ELASTIC_TYPES[0];
+          if (typeof el.type === "string") {
+            const foundType =
+              ELASTIC_TYPES.find((et) => et.name === el.type) ||
+              ELASTIC_TYPES[0];
             el.type = foundType.id;
           }
           return el;
@@ -78,7 +103,7 @@ const ElasticPlacer = () => {
     }
 
     if (FEATURES.MIRROR_VIEW && savedMirrorView) {
-      setIsMirrorView(savedMirrorView === '1');
+      setIsMirrorView(savedMirrorView === "1");
     }
 
     initialLoadDone.current = true;
@@ -89,16 +114,18 @@ const ElasticPlacer = () => {
     if (initialLoadDone.current) {
       const params = new URLSearchParams();
       if (elastics.length > 0) {
-        params.set('e', JSON.stringify(elastics));
+        params.set("e", JSON.stringify(elastics));
       }
       if (FEATURES.DISABLE_TEETH && disabledTeeth.length > 0) {
-        params.set('t', JSON.stringify(disabledTeeth));
+        params.set("t", JSON.stringify(disabledTeeth));
       }
       if (FEATURES.MIRROR_VIEW) {
-        params.set('m', isMirrorView ? '1' : '0');
+        params.set("m", isMirrorView ? "1" : "0");
       }
-      const newUrl = `${window.location.origin}${window.location.pathname}${params.toString() ? '?' + params.toString() : ''}`;
-      window.history.pushState({ path: newUrl }, '', newUrl);
+      const newUrl = `${window.location.origin}${window.location.pathname}${
+        params.toString() ? "?" + params.toString() : ""
+      }`;
+      window.history.pushState({ path: newUrl }, "", newUrl);
       setShareUrl(newUrl);
     }
   }, [elastics, disabledTeeth, isMirrorView]);
@@ -110,46 +137,62 @@ const ElasticPlacer = () => {
         drawElastics();
       });
     }
-  }, [elastics, initialLoadDone, onHoverListItem,]);
+  }, [elastics, initialLoadDone, onHoverListItem]);
 
-  const toothAlreadyInElastic = useCallback((toothNumber: number) => {
-    return elastics.some(elastic => elastic.teeth.includes(toothNumber));
-  }, [elastics]);
+  const toothAlreadyInElastic = useCallback(
+    (toothNumber: number) => {
+      return elastics.some((elastic) => elastic.teeth.includes(toothNumber));
+    },
+    [elastics]
+  );
 
-  const handleToothClick = useCallback((number: number) => {
-    if (!FEATURES.ALLOW_MULTIPLE_ELASTICS_PER_TOOTH && toothAlreadyInElastic(number)) {
-      return;
-    }
+  const handleToothClick = useCallback(
+    (number: number) => {
+      if (
+        !FEATURES.ALLOW_MULTIPLE_ELASTICS_PER_TOOTH &&
+        toothAlreadyInElastic(number)
+      ) {
+        return;
+      }
 
-    if (!FEATURES.DISABLE_TEETH || !disabledTeeth.includes(number)) {
-      setCurrentElastic(prev =>
-        prev.includes(number)
-          ? prev.filter(n => n !== number)
-          : [...prev, number]
-      );
-    }
-  }, [disabledTeeth, toothAlreadyInElastic]);
+      if (!FEATURES.DISABLE_TEETH || !disabledTeeth.includes(number)) {
+        setCurrentElastic((prev) =>
+          prev.includes(number)
+            ? prev.filter((n) => n !== number)
+            : [...prev, number]
+        );
+      }
+    },
+    [disabledTeeth, toothAlreadyInElastic]
+  );
 
   const handleToothToggle = useCallback((number: number) => {
     if (FEATURES.DISABLE_TEETH) {
-      setDisabledTeeth(prev =>
+      setDisabledTeeth((prev) =>
         prev.includes(number)
-          ? prev.filter(n => n !== number)
+          ? prev.filter((n) => n !== number)
           : [...prev, number]
       );
-      setCurrentElastic(prev => prev.filter(n => n !== number));
+      setCurrentElastic((prev) => prev.filter((n) => n !== number));
     }
   }, []);
 
   const addElastic = useCallback(() => {
     if (currentElastic.length > 1) {
-      setElastics(prev => [...prev, { teeth: currentElastic, type: currentElasticType, time: currentElasticTime }]);
+      setElastics((prev) => [
+        ...prev,
+        {
+          teeth: currentElastic,
+          type: currentElasticType,
+          time: currentElasticTime,
+        },
+      ]);
       setCurrentElastic([]);
     }
   }, [currentElastic, currentElasticType, currentElasticTime]);
 
   const removeElastic = useCallback((index: number) => {
-    setElastics(prev => prev.filter((_, i) => i !== index));
+    setElastics((prev) => prev.filter((_, i) => i !== index));
   }, []);
 
   const resetAll = useCallback(() => {
@@ -157,7 +200,11 @@ const ElasticPlacer = () => {
     setCurrentElastic([]);
     setDisabledTeeth([]);
     setIsMirrorView(false);
-    window.history.pushState({ path: window.location.pathname }, '', window.location.pathname);
+    window.history.pushState(
+      { path: window.location.pathname },
+      "",
+      window.location.pathname
+    );
     setShareUrl(window.location.origin + window.location.pathname);
   }, []);
 
@@ -179,67 +226,87 @@ const ElasticPlacer = () => {
 
       const shouldHighlight = onHoverListItem === index;
 
-      const elasticTypeConfig = ELASTIC_TYPES.find(et => et.id === elastic.type) || ELASTIC_TYPES[0];
+      const elasticTypeConfig =
+        ELASTIC_TYPES.find((et) => et.id === elastic.type) || ELASTIC_TYPES[0];
       const svgRect = svgRef.current.getBoundingClientRect();
-      const points = elastic.teeth.map(toothNumber => {
-        const rect = toothRefs.current[toothNumber]?.getBoundingClientRect();
-        if (!rect) return null;
-
-        const baseX = rect.left - svgRect.left + rect.width / 2;
-        const x = isMirrorView
-          ? svgRect.width - baseX
-          : baseX;
-        return {
-          x,
-          y: rect.top - svgRect.top + rect.height / 2
-        };
-      }).filter(point => point !== null) as { x: number; y: number }[];
+      const points = elastic.teeth
+        .map((toothNumber) => {
+          const rect = toothRefs.current[toothNumber]?.getBoundingClientRect();
+          if (!rect) return null;
+
+          const baseX = rect.left - svgRect.left + rect.width / 2;
+          const x = isMirrorView ? svgRect.width - baseX : baseX;
+          return {
+            x,
+            y: rect.top - svgRect.top + rect.height / 2,
+          };
+        })
+        .filter((point) => point !== null) as { x: number; y: number }[];
 
       if (points.length > 1) {
-        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        const d = points.map((point, i) => `${i === 0 ? 'M' : 'L'} ${point.x} ${point.y}`).join(' ');
+        const path = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "path"
+        );
+        const d = points
+          .map((point, i) => `${i === 0 ? "M" : "L"} ${point.x} ${point.y}`)
+          .join(" ");
 
         if (shouldHighlight) {
-
           // draw a shadow behind the line
-          const shadow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-          shadow.setAttribute('d', d);
-          shadow.setAttribute('fill', 'none');
-          shadow.setAttribute('stroke', '#000');
-          shadow.setAttribute('stroke-width', (elasticTypeConfig.thickness + 4).toString());
-          shadow.setAttribute('stroke-opacity', '0.5');
+          const shadow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          );
+          shadow.setAttribute("d", d);
+          shadow.setAttribute("fill", "none");
+          shadow.setAttribute("stroke", "#000");
+          shadow.setAttribute(
+            "stroke-width",
+            (elasticTypeConfig.thickness + 4).toString()
+          );
+          shadow.setAttribute("stroke-opacity", "0.5");
           // round line ends & joins
-          shadow.setAttribute('stroke-linecap', 'round');
-          shadow.setAttribute('stroke-linejoin', 'round');
+          shadow.setAttribute("stroke-linecap", "round");
+          shadow.setAttribute("stroke-linejoin", "round");
           svgRef.current.appendChild(shadow);
 
           // draw an opaque circle behind every point
           points.forEach((point) => {
-            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-            circle.setAttribute('cx', point.x.toString());
-            circle.setAttribute('cy', point.y.toString());
-            circle.setAttribute('r', '10');
-            circle.setAttribute('fill', elasticTypeConfig.color);
-            circle.setAttribute('stroke', '#000');
-            circle.setAttribute('stroke-width', '2');
-            circle.setAttribute('stroke-opacity', '0.5');
+            const circle = document.createElementNS(
+              "http://www.w3.org/2000/svg",
+              "circle"
+            );
+            circle.setAttribute("cx", point.x.toString());
+            circle.setAttribute("cy", point.y.toString());
+            circle.setAttribute("r", "10");
+            circle.setAttribute("fill", elasticTypeConfig.color);
+            circle.setAttribute("stroke", "#000");
+            circle.setAttribute("stroke-width", "2");
+            circle.setAttribute("stroke-opacity", "0.5");
             svgRef.current?.appendChild(circle);
           });
         }
 
-        path.setAttribute('d', d);
-        path.setAttribute('fill', 'none');
-        path.setAttribute('stroke', elasticTypeConfig.color);
-        path.setAttribute('stroke-width', elasticTypeConfig.thickness.toString());
+        path.setAttribute("d", d);
+        path.setAttribute("fill", "none");
+        path.setAttribute("stroke", elasticTypeConfig.color);
+        path.setAttribute(
+          "stroke-width",
+          elasticTypeConfig.thickness.toString()
+        );
         // round line ends & joins
-        path.setAttribute('stroke-linecap', 'round');
-        path.setAttribute('stroke-linejoin', 'round');
+        path.setAttribute("stroke-linecap", "round");
+        path.setAttribute("stroke-linejoin", "round");
 
         // Add a title for hover tooltip
-        const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
-        title.textContent = `${t('elastics.elasticTooltip', {
+        const title = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "title"
+        );
+        title.textContent = `${t("elastics.elasticTooltip", {
           type: elastic.type,
-          teeth: elastic.teeth.join(' → ')
+          teeth: elastic.teeth.join(" → "),
         })}`;
         path.appendChild(title);
 
@@ -253,41 +320,49 @@ const ElasticPlacer = () => {
       drawElastics();
     };
 
-    window.addEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
 
     return () => {
-      window.removeEventListener('resize', handleResize);
+      window.removeEventListener("resize", handleResize);
     };
   }, [drawElastics]);
 
   const handleShare = useCallback(() => {
     if (navigator.share) {
-      navigator.share({
-        title: t('share.title'),
-        url: shareUrl
-      }).catch((error) => console.log('Error sharing', error));
+      navigator
+        .share({
+          title: t("share.title"),
+          url: shareUrl,
+        })
+        .catch((error) => console.log("Error sharing", error));
     } else {
-      navigator.clipboard.writeText(shareUrl).then(() => {
-        alert(t('share.copied'));
-      }, (err) => {
-        console.error(t('share.copyError'), err);
-      });
+      navigator.clipboard.writeText(shareUrl).then(
+        () => {
+          alert(t("share.copied"));
+        },
+        (err) => {
+          console.error(t("share.copyError"), err);
+        }
+      );
     }
   }, [shareUrl, t]);
 
   return (
     <div className="container mx-auto sm:p-4 md:p-8">
       <div className="sm:rounded-xl pt-4 sm:p-4 md:p-8 bg-jort drop-shadow-xl">
-        <h1 className="text-2xl font-bold mb-4 text-center text-white uppercase flex items-center justify-center">
+        <h1
+          data-testid="title"
+          className="text-2xl font-bold mb-4 text-center text-white uppercase flex items-center justify-center"
+        >
           <Logo className="inline-block w-8" />
-          {t('title')}
+          {t("title")}
         </h1>
 
         {/* View Toggle */}
         {FEATURES.MIRROR_VIEW && (
           <ViewToggle
             isMirrorView={isMirrorView}
-            onToggle={() => setIsMirrorView(prev => !prev)}
+            onToggle={() => setIsMirrorView((prev) => !prev)}
           />
         )}
 
@@ -298,18 +373,18 @@ const ElasticPlacer = () => {
               <>
                 <div className="flex items-center gap-2">
                   <div className="w-4 h-4 bg-green-200 rounded"></div>
-                  <span>{t('legend.middleIncisors')}</span>
+                  <span>{t("legend.middleIncisors")}</span>
                 </div>
                 <div className="flex items-center gap-2">
                   <div className="w-4 h-4 bg-purple-200 rounded"></div>
-                  <span>{t('legend.canines')}</span>
+                  <span>{t("legend.canines")}</span>
                 </div>
               </>
             )}
             {FEATURES.DISABLE_TEETH && (
               <div className="flex items-center gap-2">
                 <div className="w-4 h-4 bg-gray-300 rounded"></div>
-                <span>{t('legend.disabledTeeth')}</span>
+                <span>{t("legend.disabledTeeth")}</span>
               </div>
             )}
           </div>
@@ -319,7 +394,10 @@ const ElasticPlacer = () => {
         <div className="bg-white p-4 rounded-lg mb-4">
           <div className="flex flex-wrap gap-4">
             {ELASTIC_TYPES.map((etype) => (
-              <div key={etype.id} className="flex items-center gap-2 drop-shadow-xs">
+              <div
+                key={etype.id}
+                className="flex items-center gap-2 drop-shadow-xs"
+              >
                 <svg width="30" height="10">
                   <line
                     x1="0"
@@ -331,7 +409,9 @@ const ElasticPlacer = () => {
                   />
                 </svg>
                 <span>{etype.icon}</span>
-                <span className='text-xs sm:text-base'>{t('legend.elasticType', { type: etype.name })}</span>
+                <span className="text-xs sm:text-base">
+                  {t("legend.elasticType", { type: etype.name })}
+                </span>
               </div>
             ))}
           </div>
@@ -339,9 +419,15 @@ const ElasticPlacer = () => {
 
         <div className="max-w-screen mx-auto bg-blue-200 sm:rounded-2xl py-8 sm:px-4 max-w-4xl overflow-x-auto">
           <div
-            className={`relative min-w-[580px] px-2 translate-y-3 ${isMirrorView ? 'transform scale-x-[-1]' : ''}`}
+            className={`relative min-w-[580px] px-2 translate-y-3 ${
+              isMirrorView ? "transform scale-x-[-1]" : ""
+            }`}
           >
-            <svg ref={svgRef} className="absolute inset-0 pointer-events-none z-10 drop-shadow max-w-4xl" style={{ width: '100%', height: '100%' }}></svg>
+            <svg
+              ref={svgRef}
+              className="absolute inset-0 pointer-events-none z-10 drop-shadow max-w-4xl"
+              style={{ width: "100%", height: "100%" }}
+            ></svg>
             {teethLayout.map((row, rowIndex) => (
               <div key={rowIndex} className="flex justify-center flex-1 w-full">
                 {row.map((tooth) => (
@@ -352,7 +438,9 @@ const ElasticPlacer = () => {
                     onClick={handleToothClick}
                     onToggle={handleToothToggle}
                     selected={currentElastic.includes(tooth)}
-                    disabled={FEATURES.DISABLE_TEETH && disabledTeeth.includes(tooth)}
+                    disabled={
+                      FEATURES.DISABLE_TEETH && disabledTeeth.includes(tooth)
+                    }
                     setRef={setToothRef}
                     isMirrorView={isMirrorView}
                   />
@@ -371,13 +459,27 @@ const ElasticPlacer = () => {
               <button
                 key={etype.id}
                 onClick={() => setCurrentElasticType(etype.id)}
-                style={currentElasticType === etype.id ? { backgroundColor: etype.color } : { borderColor: etype.color }}
+                style={
+                  currentElasticType === etype.id
+                    ? { backgroundColor: etype.color }
+                    : { borderColor: etype.color }
+                }
                 className={`px-4 py-2 rounded border
-          ${currentElasticType === etype.id ? 'text-white border-black' : 'bg-white text-black'}`}
-                title={t('elastics.typeOption', { type: etype.name })}
+          ${
+            currentElasticType === etype.id
+              ? "text-white border-black"
+              : "bg-white text-black"
+          }`}
+                title={t("elastics.typeOption", { type: etype.name })}
               >
-                {etype.icon && (<span className='bg-white rounded-full p-0.5 mr-1'>{etype.icon}</span>)}
-                <span className={`${etype.icon ? 'text-sm' : ''}`}>{t('elastics.typeOption', { type: etype.name })}</span>
+                {etype.icon && (
+                  <span className="bg-white rounded-full p-0.5 mr-1">
+                    {etype.icon}
+                  </span>
+                )}
+                <span className={`${etype.icon ? "text-sm" : ""}`}>
+                  {t("elastics.typeOption", { type: etype.name })}
+                </span>
               </button>
             ))}
           </div>
@@ -385,11 +487,15 @@ const ElasticPlacer = () => {
           {/* Time-based selection */}
           {FEATURES.TIME_BASED_ELASTICS && (
             <div className="flex gap-2">
-              {['24h', 'daytime', 'nighttime'].map((time) => (
+              {["24h", "daytime", "nighttime"].map((time) => (
                 <button
                   key={time}
                   onClick={() => setCurrentElasticTime(time)}
-                  className={`px-4 py-2 rounded border ${currentElasticTime === time ? 'bg-blue-500 text-white' : 'bg-white text-black'}`}
+                  className={`px-4 py-2 rounded border ${
+                    currentElasticTime === time
+                      ? "bg-blue-500 text-white"
+                      : "bg-white text-black"
+                  }`}
                 >
                   {t(`elastics.timeOption.${time}`)}
                 </button>
@@ -399,12 +505,18 @@ const ElasticPlacer = () => {
 
           <button
             onClick={addElastic}
-            className={`w-full bg-jort text-white px-4 py-2 rounded flex flex-row items-center gap-2 ${currentElastic.length < 2 ? 'opacity-30 cursor-not-allowed' : ''}`}
+            className={`w-full bg-jort text-white px-4 py-2 rounded flex flex-row items-center gap-2 ${
+              currentElastic.length < 2 ? "opacity-30 cursor-not-allowed" : ""
+            }`}
             disabled={currentElastic.length < 2}
-            title={currentElastic.length < 2 ? t('tooltips.selectTeeth') : t('tooltips.addElastic')}
+            title={
+              currentElastic.length < 2
+                ? t("tooltips.selectTeeth")
+                : t("tooltips.addElastic")
+            }
           >
             <PlusCircle size={16} />
-            {t('buttons.addElastic')}
+            {t("buttons.addElastic")}
           </button>
 
           <button
@@ -412,7 +524,7 @@ const ElasticPlacer = () => {
             className="w-full bg-red-500 text-white px-4 py-2 rounded flex flex-row items-center gap-2"
           >
             <Redo2 size={16} />
-            {t('buttons.restart')}
+            {t("buttons.restart")}
           </button>
 
           <button
@@ -420,33 +532,47 @@ const ElasticPlacer = () => {
             className="w-full bg-green-500 text-white px-4 py-2 rounded flex flex-row items-center gap-2"
           >
             <Share2 size={16} />
-            {t('buttons.share')}
+            {t("buttons.share")}
           </button>
         </div>
-        <div className='mx-auto'>
+        <div className="mx-auto">
           <QRCodeSVG value={shareUrl} size={196} />
         </div>
         <div>
-          <h2 className="text-xl font-semibold">{t('elastics.title')}</h2>
+          <h2 className="text-xl font-semibold">{t("elastics.title")}</h2>
 
           {elastics.length === 0 && (
-            <p className="text-gray-500 text-sm">{t('elastics.none')}</p>
+            <p className="text-gray-500 text-sm">{t("elastics.none")}</p>
           )}
 
           {elastics.map((elastic, index) => {
-            const etype = ELASTIC_TYPES.find(et => et.id === elastic.type) || ELASTIC_TYPES[0];
+            const etype =
+              ELASTIC_TYPES.find((et) => et.id === elastic.type) ||
+              ELASTIC_TYPES[0];
             return (
               <div
                 key={index}
-                className={`flex items-center justify-between my-2 p-1 rounded w-full ${onHoverListItem === index ? 'bg-gray-200' : ''}`}
+                className={`flex items-center justify-between my-2 p-1 rounded w-full ${
+                  onHoverListItem === index ? "bg-gray-200" : ""
+                }`}
                 onMouseEnter={() => setOnHoverListItem(index)}
                 onMouseLeave={() => setOnHoverListItem(null)}
               >
                 <span className="mr-2">
-                  {t('elastics.elastic', { number: index + 1, teeth: elastic.teeth.join(' → ') })}
-                  &nbsp;- {t('elastics.elasticTypeDisplay', { type: etype.name })}&nbsp;
-                  <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
-                    <svg width="30" height="10" style={{ verticalAlign: 'middle' }}>
+                  {t("elastics.elastic", {
+                    number: index + 1,
+                    teeth: elastic.teeth.join(" → "),
+                  })}
+                  &nbsp;-{" "}
+                  {t("elastics.elasticTypeDisplay", { type: etype.name })}&nbsp;
+                  <span
+                    style={{ display: "inline-block", verticalAlign: "middle" }}
+                  >
+                    <svg
+                      width="30"
+                      height="10"
+                      style={{ verticalAlign: "middle" }}
+                    >
                       <line
                         x1="0"
                         y1="5"
@@ -458,13 +584,20 @@ const ElasticPlacer = () => {
                     </svg>
                   </span>
                   {FEATURES.TIME_BASED_ELASTICS && (
-                    <span className="ml-2 text-sm text-gray-600" title={t(`elastics.timeOption.${elastic.time}`)}>
-                      { elastic.time === '24h' ? '🏪' : elastic.time === 'daytime' ? '☀️' : '😴' }
+                    <span
+                      className="ml-2 text-sm text-gray-600"
+                      title={t(`elastics.timeOption.${elastic.time}`)}
+                    >
+                      {elastic.time === "24h"
+                        ? "🏪"
+                        : elastic.time === "daytime"
+                        ? "☀️"
+                        : "😴"}
                     </span>
                   )}
                 </span>
                 <button
-                  title={t('buttons.removeElastic')}
+                  title={t("buttons.removeElastic")}
                   onClick={() => removeElastic(index)}
                   className="bg-red-500 text-white p-1 rounded"
                 >
@@ -477,9 +610,16 @@ const ElasticPlacer = () => {
       </div>
 
       <small className="block text-center mt-8 text-gray-500">
-        {t('footer.copyright', { year: new Date().getFullYear() })}
+        {t("footer.copyright", { year: new Date().getFullYear() })}
         &nbsp;
-        <a href="https://kokokoding.nl" target="_blank" rel="noopener noreferrer" className="text-jort hover:underline">Koko Koding</a>
+        <a
+          href="https://kokokoding.nl"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-jort hover:underline"
+        >
+          Koko Koding
+        </a>
       </small>
 
       <LanguageButtons />
diff --git a/vite.config.ts b/vite.config.ts
index 51df4a1..7c73545 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,4 +5,7 @@ import react from '@vitejs/plugin-react-swc'
 export default defineConfig({
   plugins: [react()],
   base: '/elastistent/',
+  test: {
+    environment: 'jsdom'
+  }
 })
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..5270893
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+  },
+});