diff --git a/frontend/src/components/PlatformSelect/PlatformSelect.module.scss b/frontend/src/components/PlatformSelect/PlatformSelect.module.scss
deleted file mode 100644
index 394cde691..000000000
--- a/frontend/src/components/PlatformSelect/PlatformSelect.module.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-.container {
-    list-style: none;
-
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: 8px;
-}
-
-.platform {
-    flex: 1;
-
-    display: flex;
-    align-items: center;
-    gap: 16px;
-
-    padding: 16px;
-
-    border: 1px solid transparent;
-    border-radius: 6px;
-    background: transparent;
-    color: var(--g1200);
-
-    cursor: pointer;
-    user-select: none;
-
-    white-space: nowrap;
-
-    transition: border-color 0.1s, color 0.2s;
-
-    svg {
-        width: 40px;
-        height: 40px;
-
-        will-change: filter;
-        filter: grayscale(100%);
-        transition: filter 0.2s;
-    }
-
-    &:hover,
-    &.selected {
-        border-color: var(--g400);
-        color: var(--g2000);
-
-        svg {
-            filter: grayscale(0%);
-        }
-    }
-
-    &.selected {
-        background: var(--g300);
-    }
-}
-
-.labelContainer {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-.consoleName {
-    font-weight: 500;
-}
-
-.platformName {
-    font-size: 0.8em;
-    opacity: 0.6;
-}
diff --git a/frontend/src/components/PlatformSelect/PlatformSelect.tsx b/frontend/src/components/PlatformSelect/PlatformSelect.tsx
index 9182e20f6..b26ccad08 100644
--- a/frontend/src/components/PlatformSelect/PlatformSelect.tsx
+++ b/frontend/src/components/PlatformSelect/PlatformSelect.tsx
@@ -1,7 +1,5 @@
-import clsx from "clsx";
-
 import { PlatformIcon } from "./PlatformIcon";
-import styles from "./PlatformSelect.module.scss";
+import clsx from "clsx";
 
 export type Props = {
     platforms: {
@@ -22,26 +20,50 @@ export default function PlatformSelect({
     className,
 }: Props) {
     return (
-        <ul className={clsx(styles.container, className)}>
-            {Object.entries(platforms).map(([key, platform]) => (
-                <li
-                    key={key}
-                    className={clsx(styles.platform, {
-                        [styles.selected]: value === key,
-                    })}
-                    onClick={() => onChange(key)}
-                >
-                    <PlatformIcon clickable={false} platform={key} />
-                    <div className={styles.labelContainer}>
-                        <div className={styles.consoleName}>
-                            {platform.name}
-                        </div>
-                        <div className={styles.platformName}>
-                            {platform.description}
+        <ul
+            className={clsx(
+                "grid list-none grid-cols-2 gap-2 md:grid-cols-3",
+                className,
+            )}
+        >
+            {Object.entries(platforms).map(([key, platform]) => {
+                const isSelected = value === key;
+
+                return (
+                    <li
+                        key={key}
+                        onClick={() => onChange(key)}
+                        className={clsx(
+                            "flex cursor-pointer select-none items-center gap-3 rounded-md p-3 transition-colors",
+                            "border-[var(--g400)] bg-[var(--g300)] text-[var(--g2000)]",
+                            "text-var(--g1200) hover:text-[var(--g2000)]",
+                            "bg-transparent",
+                            "group",
+                            {
+                                "border-[var(--g400)] bg-[var(--g300)] text-[var(--g2000)]":
+                                    isSelected,
+                            },
+                        )}
+                    >
+                        <PlatformIcon
+                            clickable={false}
+                            platform={key}
+                            className={clsx(
+                                "h-10 w-10 filter transition-filter duration-200",
+                                "grayscale",
+                                "group-hover:grayscale-0",
+                                isSelected && "grayscale-0",
+                            )}
+                        />
+                        <div className="flex flex-col gap-1">
+                            <div className="font-medium">{platform.name}</div>
+                            <div className="text-xs opacity-60">
+                                {platform.description}
+                            </div>
                         </div>
-                    </div>
-                </li>
-            ))}
+                    </li>
+                );
+            })}
         </ul>
     );
 }