diff --git a/edge-functions/user-agent-based-rendering/package-lock.json b/edge-functions/user-agent-based-rendering/package-lock.json
index 8d7108fd5f..5f7a107fad 100644
--- a/edge-functions/user-agent-based-rendering/package-lock.json
+++ b/edge-functions/user-agent-based-rendering/package-lock.json
@@ -9,10 +9,12 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
+        "@types/ua-parser-js": "^0.7.36",
         "@vercel/examples-ui": "^0.2.6",
         "next": "^12.1.0",
         "react": "17.0.2",
-        "react-dom": "17.0.2"
+        "react-dom": "17.0.2",
+        "ua-parser-js": "^1.0.2"
       },
       "devDependencies": {
         "@types/node": "17.0.14",
@@ -457,6 +459,11 @@
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
       "dev": true
     },
+    "node_modules/@types/ua-parser-js": {
+      "version": "0.7.36",
+      "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz",
+      "integrity": "sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ=="
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "5.15.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.15.0.tgz",
@@ -3493,6 +3500,24 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/ua-parser-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.2.tgz",
+      "integrity": "sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        }
+      ],
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -3902,6 +3927,11 @@
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
       "dev": true
     },
+    "@types/ua-parser-js": {
+      "version": "0.7.36",
+      "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz",
+      "integrity": "sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ=="
+    },
     "@typescript-eslint/parser": {
       "version": "5.15.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.15.0.tgz",
@@ -6045,6 +6075,11 @@
       "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
       "dev": true
     },
+    "ua-parser-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.2.tgz",
+      "integrity": "sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg=="
+    },
     "unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
diff --git a/edge-functions/user-agent-based-rendering/package.json b/edge-functions/user-agent-based-rendering/package.json
index 2eb801f75f..dcd7358fdd 100644
--- a/edge-functions/user-agent-based-rendering/package.json
+++ b/edge-functions/user-agent-based-rendering/package.json
@@ -13,9 +13,11 @@
     "@vercel/examples-ui": "^0.2.6",
     "next": "^12.1.0",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "ua-parser-js": "^1.0.2"
   },
   "devDependencies": {
+    "@types/ua-parser-js": "^0.7.36",
     "@types/node": "17.0.14",
     "@types/react": "17.0.38",
     "autoprefixer": "^10.4.2",
@@ -25,4 +27,4 @@
     "tailwindcss": "^3.0.18",
     "typescript": "4.5.5"
   }
-}
+}
\ No newline at end of file
diff --git a/edge-functions/user-agent-based-rendering/pages/_middleware.ts b/edge-functions/user-agent-based-rendering/pages/_middleware.ts
index ba5ecd971b..36fad5b409 100644
--- a/edge-functions/user-agent-based-rendering/pages/_middleware.ts
+++ b/edge-functions/user-agent-based-rendering/pages/_middleware.ts
@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server'
+import parser from 'ua-parser-js'
 
 // RegExp for public files
 const PUBLIC_FILE = /\.(.*)$/
@@ -16,10 +17,11 @@ export function middleware(req: NextRequest) {
     return NextResponse.rewrite(url)
   }
 
+  // Parse user agent
+  const ua = parser(req.headers.get('user-agent')!)
+
   // Check the viewport
-  const viewport = ['android', 'ios'].includes(req.ua?.os.name?.toLowerCase()!)
-    ? 'mobile'
-    : 'desktop'
+  const viewport = ua.device.type === 'mobile' ? 'mobile' : 'desktop'
 
   // Update the expected url
   url.pathname = `_viewport/${viewport}${url.pathname}`