diff --git a/src/mainMenu.jsx b/src/mainMenu.jsx
index b5f9609..096726e 100644
--- a/src/mainMenu.jsx
+++ b/src/mainMenu.jsx
@@ -22,26 +22,22 @@ export default () => {
           onValueChange={setPlayerSymbol}
           loop={false}
         >
-          <RadioGroup.Item
-            className="h-full w-1/2 rounded-xl hover:bg-silver-700/5 data-[state='checked']:bg-silver-700"
-            value="cross"
-          >
-            <Cross
-              width="32"
-              height="32"
-              className={`m-auto ${playerSymbol == "cross" ? "text-navy-700" : "text-silver-700"}`}
-            />
-          </RadioGroup.Item>
-          <RadioGroup.Item
-            className="h-full w-1/2 rounded-xl hover:bg-silver-700/5 data-[state='checked']:bg-silver-700"
-            value="oval"
-          >
-            <Oval
-              width="32"
-              height="32"
-              className={`m-auto ${playerSymbol == "oval" ? "text-navy-700" : "text-silver-700"}`}
-            />
-          </RadioGroup.Item>
+          {[
+            ["cross", Cross],
+            ["oval", Oval],
+          ].map(([value, Symbol]) => (
+            <RadioGroup.Item
+              className="group h-full w-1/2 rounded-xl hover:bg-silver-700/5 data-[state='checked']:bg-silver-700"
+              key={value}
+              value={value}
+            >
+              <Symbol
+                width="32"
+                height="32"
+                className="m-auto text-silver-700 group-data-[state='checked']:text-navy-700"
+              />
+            </RadioGroup.Item>
+          ))}
         </RadioGroup.Root>
         <p className="text-base uppercase text-silver-700">
           Remember : X goes first