diff --git a/website/hooks/usePlatform.ts b/website/hooks/usePlatform.ts
index ae1f4747..a502e4cd 100644
--- a/website/hooks/usePlatform.ts
+++ b/website/hooks/usePlatform.ts
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { detectOS } from "detect-browser";
 
 export enum Platform {
   linux = "Linux",
@@ -11,15 +12,14 @@ export function usePlatform(): Platform {
   const [platform, setPlatform] = useState(Platform.linux);
 
   useEffect(() => {
-    const platform = (
-      ((navigator as unknown as any).userAgentData?.platform as
-        | string
-        | undefined) ?? navigator.platform
-    ).toLowerCase();
+    const detectedPlatform = detectOS(navigator.userAgent)?.toLowerCase();
 
-    if (platform.includes("windows")) setPlatform(Platform.windows);
-    else if (platform.includes("mac")) setPlatform(Platform.mac);
-    else if (platform.includes("android")) setPlatform(Platform.android);
+    if (!detectedPlatform) return;
+
+    if (detectedPlatform.includes("windows")) setPlatform(Platform.windows);
+    else if (detectedPlatform.includes("mac")) setPlatform(Platform.mac);
+    else if (detectedPlatform.includes("android"))
+      setPlatform(Platform.android);
   }, []);
 
   return platform;
diff --git a/website/package.json b/website/package.json
index 4c5ab9cc..de3f7033 100644
--- a/website/package.json
+++ b/website/package.json
@@ -17,6 +17,7 @@
     "@emotion/styled": "^11",
     "@octokit/rest": "^19.0.3",
     "@types/progress": "^2.0.5",
+    "detect-browser": "^5.3.0",
     "framer-motion": "^6",
     "gray-matter": "^4.0.3",
     "next": "12.2.2",
diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml
index e034573b..6aaea213 100644
--- a/website/pnpm-lock.yaml
+++ b/website/pnpm-lock.yaml
@@ -13,6 +13,7 @@ specifiers:
   '@types/react': 18.0.15
   '@types/react-dom': 18.0.6
   '@types/react-syntax-highlighter': ^15.5.3
+  detect-browser: ^5.3.0
   eslint: 8.20.0
   eslint-config-next: 12.2.2
   eslint-config-prettier: ^8.5.0
@@ -38,6 +39,7 @@ dependencies:
   '@emotion/styled': 11.9.3_xorl7rqfpn4gtnla4dfecagcw4
   '@octokit/rest': 19.0.3
   '@types/progress': 2.0.5
+  detect-browser: 5.3.0
   framer-motion: 6.5.1_biqbaboplfbrettd7655fr4n2y
   gray-matter: 4.0.3
   next: 12.2.2_beenoklgwfttvph5dgxj7na7aq
@@ -2096,6 +2098,10 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /detect-browser/5.3.0:
+    resolution: {integrity: sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w==}
+    dev: false
+
   /detect-node-es/1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
     dev: false