diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index b5c61c95..5f6197b6 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+  .focus-ring {
+    @apply focus-visible:ring-[3px] focus-visible:ring-snowball-200 focus-visible:ring-offset-1 focus-visible:ring-offset-snowball-500 focus-visible:outline-none;
+  }
+}
\ No newline at end of file
diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index 9a7a8519..9ba75753 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -18,10 +18,22 @@ const Page = () => {
           <h1 className="text-2xl font-bold">Component A</h1>
 
           <div className="flex flex-row gap-10 items-center justify-center">
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
+            <div
+              tabIndex={0}
+              className="h-20 w-40 bg-red-400 rounded-md focus-ring"
+            />
+            <div
+              tabIndex={0}
+              className="h-20 w-40 bg-red-400 rounded-md focus-ring"
+            />
+            <div
+              tabIndex={0}
+              className="h-20 w-40 bg-red-400 rounded-md focus-ring"
+            />
+            <div
+              tabIndex={0}
+              className="h-20 w-40 bg-red-400 rounded-md focus-ring"
+            />
           </div>
 
           <div className="flex flex-row gap-10 items-center justify-center">
diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.js
index 70266ee3..c3d8590f 100644
--- a/packages/frontend/tailwind.config.js
+++ b/packages/frontend/tailwind.config.js
@@ -8,7 +8,14 @@ export default withMT({
     '../../node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        snowball: {
+          200: '#DDEEFD',
+          500: '#47A4FA',
+        },
+      },
+    },
   },
   plugins: [],
 });