diff --git a/apps/playnite-web/src/api/layout/desktopLayout.ts b/apps/playnite-web/src/api/layout/desktopLayout.ts
new file mode 100644
index 000000000..2b135d757
--- /dev/null
+++ b/apps/playnite-web/src/api/layout/desktopLayout.ts
@@ -0,0 +1,14 @@
+import type { LayoutApi } from './types'
+
+const layoutApi: LayoutApi = {
+  getGameDimensions: async function (
+    request: Request,
+  ): Promise<[number, number]> {
+    const width = 300
+    const height = (width * 4) / 3
+
+    return [width, height]
+  },
+}
+
+export default layoutApi
diff --git a/apps/playnite-web/src/api/layout/index.ts b/apps/playnite-web/src/api/layout/index.ts
new file mode 100644
index 000000000..c28be74b1
--- /dev/null
+++ b/apps/playnite-web/src/api/layout/index.ts
@@ -0,0 +1,17 @@
+import desktopLayout from './desktopLayout'
+import tabletLayout from './tabletLayout'
+import type { LayoutApi } from './types'
+
+const inferredLayout: LayoutApi = {
+  getGameDimensions: function (request: Request): Promise<[number, number]> {
+    const userAgent = request.headers.get('user-agent')
+
+    if (userAgent?.includes('Mobile')) {
+      return tabletLayout.getGameDimensions(request)
+    }
+
+    return desktopLayout.getGameDimensions(request)
+  },
+}
+
+export default inferredLayout
diff --git a/apps/playnite-web/src/api/layout/tabletLayout.ts b/apps/playnite-web/src/api/layout/tabletLayout.ts
new file mode 100644
index 000000000..912ff0b3d
--- /dev/null
+++ b/apps/playnite-web/src/api/layout/tabletLayout.ts
@@ -0,0 +1,14 @@
+import { LayoutApi } from './types'
+
+const layoutApi: LayoutApi = {
+  getGameDimensions: async function (
+    request: Request,
+  ): Promise<[number, number]> {
+    const width = 200
+    const height = (width * 4) / 3
+
+    return [width, height]
+  },
+}
+
+export default layoutApi
diff --git a/apps/playnite-web/src/api/layout/types.ts b/apps/playnite-web/src/api/layout/types.ts
new file mode 100644
index 000000000..3c0ad384e
--- /dev/null
+++ b/apps/playnite-web/src/api/layout/types.ts
@@ -0,0 +1,5 @@
+interface LayoutApi {
+  getGameDimensions: (request: Request) => Promise<[number, number]>
+}
+
+export { LayoutApi }
diff --git a/apps/playnite-web/src/api/Oid.ts b/apps/playnite-web/src/api/playnite/Oid.ts
similarity index 100%
rename from apps/playnite-web/src/api/Oid.ts
rename to apps/playnite-web/src/api/playnite/Oid.ts
diff --git a/apps/playnite-web/src/api/Score.ts b/apps/playnite-web/src/api/playnite/Score.ts
similarity index 100%
rename from apps/playnite-web/src/api/Score.ts
rename to apps/playnite-web/src/api/playnite/Score.ts
diff --git a/apps/playnite-web/src/api/databases/mongo/client.ts b/apps/playnite-web/src/api/playnite/databases/mongo/client.ts
similarity index 100%
rename from apps/playnite-web/src/api/databases/mongo/client.ts
rename to apps/playnite-web/src/api/playnite/databases/mongo/client.ts
diff --git a/apps/playnite-web/src/api/databases/mongo/index.ts b/apps/playnite-web/src/api/playnite/databases/mongo/index.ts
similarity index 100%
rename from apps/playnite-web/src/api/databases/mongo/index.ts
rename to apps/playnite-web/src/api/playnite/databases/mongo/index.ts
diff --git a/apps/playnite-web/src/api/dbTypes.ts b/apps/playnite-web/src/api/playnite/dbTypes.ts
similarity index 100%
rename from apps/playnite-web/src/api/dbTypes.ts
rename to apps/playnite-web/src/api/playnite/dbTypes.ts
diff --git a/apps/playnite-web/src/api/index.ts b/apps/playnite-web/src/api/playnite/index.ts
similarity index 100%
rename from apps/playnite-web/src/api/index.ts
rename to apps/playnite-web/src/api/playnite/index.ts
diff --git a/apps/playnite-web/src/api/types.ts b/apps/playnite-web/src/api/playnite/types.ts
similarity index 100%
rename from apps/playnite-web/src/api/types.ts
rename to apps/playnite-web/src/api/playnite/types.ts
diff --git a/apps/playnite-web/src/components/GameList.tsx b/apps/playnite-web/src/components/GameList.tsx
index 6f54c1e7d..c928fb481 100644
--- a/apps/playnite-web/src/components/GameList.tsx
+++ b/apps/playnite-web/src/components/GameList.tsx
@@ -2,7 +2,7 @@ import _ from 'lodash'
 import { FC, useMemo } from 'react'
 import useDimensions from 'react-use-dimensions'
 import { styled } from 'styled-components'
-import type { Game } from '../api/types'
+import type { Game } from '../api/playnite/types'
 
 const { chunk, groupBy } = _
 
@@ -79,8 +79,8 @@ const ListItem = styled.li.attrs<{
 
 const GameList: FC<{
   games: Game[]
-  maxGameWidth: number
-  maxGameHeight: number
+  gameWidth: number
+  gameHeight: number
   spacing: number
   Game: FC<{
     cover: string
@@ -88,7 +88,7 @@ const GameList: FC<{
     height: number
     width: number
   }>
-}> = ({ games, spacing, maxGameWidth, maxGameHeight, Game }) => {
+}> = ({ games, spacing, gameWidth, gameHeight, Game }) => {
   const normalizedGames = useMemo<Game[][]>(
     () => Object.values(groupBy(games, 'sortName')),
     [games],
@@ -98,13 +98,13 @@ const GameList: FC<{
 
   const [rows, columns, perPage] = useMemo(() => {
     if (actualWidth && actualHeight) {
-      const rows = Math.floor(actualHeight / maxGameHeight)
-      const columns = Math.floor(actualWidth / maxGameWidth)
+      const rows = Math.floor(actualHeight / gameHeight)
+      const columns = Math.floor(actualWidth / gameWidth)
       return [rows, columns, rows * columns]
     }
 
     return [null, null, 0]
-  }, [actualWidth, actualHeight, maxGameHeight, maxGameWidth])
+  }, [actualWidth, actualHeight, gameHeight, gameWidth])
 
   const pages = chunk(normalizedGames, perPage)
 
@@ -112,19 +112,19 @@ const GameList: FC<{
     <FillParent ref={ref}>
       {!!rows && !!columns ? (
         <Viewport
-          $height={rows * (maxGameHeight + spacing * 2)}
-          $width={columns * (maxGameWidth + spacing * 2)}
+          $height={rows * (gameHeight + spacing * 2)}
+          $width={columns * (gameWidth + spacing * 2)}
         >
           <GamePages
-            $height={rows * (maxGameHeight + spacing * 2)}
-            $width={pages.length * columns * (maxGameWidth + spacing * 2)}
+            $height={rows * (gameHeight + spacing * 2)}
+            $width={pages.length * columns * (gameWidth + spacing * 2)}
           >
             {pages.map((page: Game[], index: number) => {
               return (
                 <GridPage
                   key={index}
-                  $height={rows * (maxGameHeight + spacing * 2)}
-                  $width={columns * (maxGameWidth + spacing * 2)}
+                  $height={rows * (gameHeight + spacing * 2)}
+                  $width={columns * (gameWidth + spacing * 2)}
                 >
                   {page.map((games: Game) => {
                     const game = games[0]
@@ -132,14 +132,14 @@ const GameList: FC<{
                     return (
                       <ListItem
                         key={game.id}
-                        $height={maxGameHeight}
-                        $width={maxGameWidth}
+                        $height={gameHeight}
+                        $width={gameWidth}
                         $spacing={spacing}
                       >
                         <Game
                           cover={`coverArt/${game.oid.type}:${game.oid.id}`}
-                          height={maxGameHeight}
-                          width={maxGameWidth}
+                          height={gameHeight}
+                          width={gameWidth}
                           game={game}
                         />
                       </ListItem>
diff --git a/apps/playnite-web/src/components/GameListItem.tsx b/apps/playnite-web/src/components/GameListItem.tsx
index e10df39e6..598c2c70b 100644
--- a/apps/playnite-web/src/components/GameListItem.tsx
+++ b/apps/playnite-web/src/components/GameListItem.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { styled } from 'styled-components'
-import type { Game } from '../api/types'
+import type { Game } from '../api/playnite/types'
 
 const Game = styled.section.attrs<{
   $cover: string
diff --git a/apps/playnite-web/src/routes/_index.tsx b/apps/playnite-web/src/routes/_index.tsx
index f47586ad5..8cbb5ba5a 100644
--- a/apps/playnite-web/src/routes/_index.tsx
+++ b/apps/playnite-web/src/routes/_index.tsx
@@ -2,8 +2,8 @@ import type { LoaderFunctionArgs } from '@remix-run/node'
 import { json } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
 import { styled } from 'styled-components'
-import PlayniteApi from '../api'
-import type { Game, Playlist } from '../api/types'
+import PlayniteApi from '../api/playnite'
+import type { Game, Playlist } from '../api/playnite/types'
 import GameList from '../components/GameList.js'
 import GameListItem from '../components/GameListItem'
 
@@ -65,8 +65,8 @@ function Index() {
             <GameList
               Game={GameListItem}
               games={games}
-              maxGameHeight={maxGameHeight - spacing * 2}
-              maxGameWidth={maxGameWidth - spacing * 2}
+              gameHeight={maxGameHeight - spacing * 2}
+              gameWidth={maxGameWidth - spacing * 2}
               spacing={spacing}
             />
           </PlaylistListItem>
diff --git a/apps/playnite-web/src/routes/browse.tsx b/apps/playnite-web/src/routes/browse.tsx
index b8472ac30..aa01ab9e2 100644
--- a/apps/playnite-web/src/routes/browse.tsx
+++ b/apps/playnite-web/src/routes/browse.tsx
@@ -2,8 +2,9 @@ import type { LoaderFunctionArgs } from '@remix-run/node'
 import { json } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
 import { styled } from 'styled-components'
-import PlayniteApi from '../api'
-import { Game } from '../api/types'
+import inferredLayout from '../api/layout'
+import PlayniteApi from '../api/playnite'
+import type { Game } from '../api/playnite/types'
 import GameList from '../components/GameList'
 import GameListItem from '../components/GameListItem'
 
@@ -23,8 +24,13 @@ async function loader({ request }: LoaderFunctionArgs) {
     return 0
   })
 
+  const [gameWidth, gameHeight] =
+    await inferredLayout.getGameDimensions(request)
+
   return json({
     games,
+    gameWidth,
+    gameHeight,
   })
 }
 
@@ -37,12 +43,14 @@ const Main = styled.main`
 `
 
 const spacing = 8
-const maxGameWidth = 300
-const maxGameHeight = (maxGameWidth * 4) / 3
 
 function Index() {
-  const { games } = useLoaderData<typeof loader>() as unknown as {
+  const { games, gameWidth, gameHeight } = useLoaderData<
+    typeof loader
+  >() as unknown as {
     games: Game[]
+    gameWidth: number
+    gameHeight: number
   }
 
   return (
@@ -51,8 +59,8 @@ function Index() {
       <GameList
         Game={GameListItem}
         games={games}
-        maxGameHeight={maxGameHeight - spacing * 2}
-        maxGameWidth={maxGameWidth - spacing * 2}
+        gameHeight={gameHeight - spacing * 2}
+        gameWidth={gameWidth - spacing * 2}
         spacing={spacing}
       />
     </Main>
diff --git a/apps/playnite-web/src/routes/coverArt.$oid.tsx b/apps/playnite-web/src/routes/coverArt.$oid.tsx
index 6940933a3..90e6a3d93 100644
--- a/apps/playnite-web/src/routes/coverArt.$oid.tsx
+++ b/apps/playnite-web/src/routes/coverArt.$oid.tsx
@@ -1,8 +1,8 @@
 import { LoaderFunctionArgs } from '@remix-run/node'
 import createDebugger from 'debug'
 import { $params } from 'remix-routes'
-import PlayniteApi from '../api'
-import Oid from '../api/Oid'
+import PlayniteApi from '../api/playnite'
+import Oid from '../api/playnite/Oid'
 
 const debug = createDebugger('playnite-web/route/coverArt')