diff --git a/packages/website/src/pages/[...locale]/tanks/[slug]/_index.tsx b/packages/website/src/pages/[...locale]/tanks/[slug]/_index.tsx
new file mode 100644
index 000000000..3cf1fd782
--- /dev/null
+++ b/packages/website/src/pages/[...locale]/tanks/[slug]/_index.tsx
@@ -0,0 +1,28 @@
+import { asset } from '@blitzkit/core';
+import { OrbitControls } from '@react-three/drei';
+import { Canvas, useLoader } from '@react-three/fiber';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+
+interface PageProps {
+  id: string;
+}
+
+export function Page({ id }: PageProps) {
+  return (
+    <Canvas
+      style={{
+        width: 640,
+        height: 640,
+      }}
+    >
+      <OrbitControls />
+      <Model id={id} />
+    </Canvas>
+  );
+}
+
+function Model({ id }: { id: string }) {
+  const gltf = useLoader(GLTFLoader, asset(`/tanks/${id}/collision/hull.glb`));
+
+  return <primitive object={gltf.scene} />;
+}
diff --git a/packages/website/src/pages/[...locale]/tanks/[slug]/index.astro b/packages/website/src/pages/[...locale]/tanks/[slug]/index.astro
new file mode 100644
index 000000000..830fa9947
--- /dev/null
+++ b/packages/website/src/pages/[...locale]/tanks/[slug]/index.astro
@@ -0,0 +1,27 @@
+---
+import type { GetStaticPaths } from 'astro';
+import { awaitableTanks } from '../../../../core/awaitables/tanks';
+import BaseLayout from '../../../../layouts/BaseLayout.astro';
+import { getStaticPaths as parentGetStaticPaths } from '../index.astro';
+import { Page } from './_index';
+
+export const getStaticPaths = (async () => {
+  const tanks = await awaitableTanks;
+  const parentPaths = parentGetStaticPaths();
+
+  return tanks.tanks
+    .map((tank) =>
+      parentPaths.map((parent) => ({
+        params: { ...parent.params, slug: tank.slug },
+        props: { id: tank.id },
+      })),
+    )
+    .flat();
+}) satisfies GetStaticPaths;
+
+const { id } = Astro.props;
+---
+
+<BaseLayout>
+  <Page {id} client:load />
+</BaseLayout>
diff --git a/packages/website/src/pages/[...locale]/tanks/index.astro b/packages/website/src/pages/[...locale]/tanks/index.astro
index ca6d6ed01..157b5432f 100644
--- a/packages/website/src/pages/[...locale]/tanks/index.astro
+++ b/packages/website/src/pages/[...locale]/tanks/index.astro
@@ -15,11 +15,13 @@ const tanks = await awaitableTanks;
 <ToolLayout tool={tanksTool}>
   <PageWrapper>
     {
-      tanks.tanks.map((tank) => (
-        <LinkI18n {locale} href={`/tanks/${tank.slug}`}>
-          {tank.slug} ({tank.id})
-        </LinkI18n>
-      ))
+      tanks.tanks
+        .sort((a, b) => a.slug.localeCompare(b.slug))
+        .map((tank) => (
+          <LinkI18n {locale} href={`/tanks/${tank.slug}`}>
+            {tank.slug}
+          </LinkI18n>
+        ))
     }
   </PageWrapper>
 </ToolLayout>