diff --git a/packages/website-ue/src/components/BaseStyles.astro b/packages/website-ue/src/components/BaseStyles.astro
index 839d6a103..180907903 100644
--- a/packages/website-ue/src/components/BaseStyles.astro
+++ b/packages/website-ue/src/components/BaseStyles.astro
@@ -81,5 +81,7 @@ import "@fontsource-variable/roboto-flex";
 
     --duration-brief: 200ms;
     --duration-subtle: 2s;
+
+    --tank-card-width: 11rem;
   }
 </style>
diff --git a/packages/website-ue/src/components/TankCard/index.module.css b/packages/website-ue/src/components/TankCard/index.module.css
index 164e03e2a..58086af37 100644
--- a/packages/website-ue/src/components/TankCard/index.module.css
+++ b/packages/website-ue/src/components/TankCard/index.module.css
@@ -23,7 +23,7 @@
     }
 
     .icon {
-      width: 11rem;
+      width: var(--tank-card-width);
       height: 7rem;
       position: relative;
 
diff --git a/packages/website-ue/src/components/TankCard/index.tsx b/packages/website-ue/src/components/TankCard/index.tsx
index 784f8bcc5..7367b8a1a 100644
--- a/packages/website-ue/src/components/TankCard/index.tsx
+++ b/packages/website-ue/src/components/TankCard/index.tsx
@@ -1,4 +1,3 @@
-import type { PopularTank } from "@protos/blitzkit/popular_tanks";
 import { api } from "../../core/api/dynamic";
 import { useAwait } from "../../hooks/useAwait";
 import { useGameStrings } from "../../hooks/useGameStrings";
@@ -7,7 +6,12 @@ import { LinkI18n } from "../LinkI18n";
 import { Text } from "../Text";
 import styles from "./index.module.css";
 
-export function TankCard({ id }: PopularTank) {
+interface TankCardProps {
+  id: string;
+  subtitle?: string;
+}
+
+export function TankCard({ id }: TankCardProps) {
   const tank = useAwait(() => api.tank(id), `tank-${id}`);
   const gameStrings = useGameStrings("TankEntity");
   const locale = useLocale();
diff --git a/packages/website-ue/src/components/TankCards/index.module.css b/packages/website-ue/src/components/TankCards/index.module.css
new file mode 100644
index 000000000..c547572c0
--- /dev/null
+++ b/packages/website-ue/src/components/TankCards/index.module.css
@@ -0,0 +1,6 @@
+.tank-cards {
+  display: grid;
+  gap: var(--space-5) var(--space-4);
+  grid-template-columns: repeat(auto-fill, var(--tank-card-width));
+  justify-content: center;
+}
diff --git a/packages/website-ue/src/components/TankCards/index.tsx b/packages/website-ue/src/components/TankCards/index.tsx
new file mode 100644
index 000000000..1747dc2a1
--- /dev/null
+++ b/packages/website-ue/src/components/TankCards/index.tsx
@@ -0,0 +1,9 @@
+import styles from "./index.module.css";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export function TankCards({ children }: Props) {
+  return <div className={styles["tank-cards"]}>{children}</div>;
+}
diff --git a/packages/website-ue/src/pages/[...locale]/tanks/_index.tsx b/packages/website-ue/src/pages/[...locale]/tanks/_index.tsx
new file mode 100644
index 000000000..4e571972c
--- /dev/null
+++ b/packages/website-ue/src/pages/[...locale]/tanks/_index.tsx
@@ -0,0 +1,29 @@
+import { TankCard } from "../../../components/TankCard";
+import { TankCards } from "../../../components/TankCards";
+import { api } from "../../../core/api/dynamic";
+import { useAwait } from "../../../hooks/useAwait";
+import { LocaleProvider } from "../../../hooks/useLocale";
+
+interface PageProps {
+  locale: string;
+}
+
+export function Page({ locale, ...props }: PageProps) {
+  return (
+    <LocaleProvider locale={locale}>
+      <Content {...props} />
+    </LocaleProvider>
+  );
+}
+
+function Content() {
+  const tankList = useAwait(() => api.tankList(), "tank-list");
+
+  return (
+    <TankCards>
+      {tankList.list.map(({ id }) => (
+        <TankCard key={id} id={id} />
+      ))}
+    </TankCards>
+  );
+}
diff --git a/packages/website-ue/src/pages/[...locale]/tanks/index.astro b/packages/website-ue/src/pages/[...locale]/tanks/index.astro
index 117fe0908..8ba12c1f3 100644
--- a/packages/website-ue/src/pages/[...locale]/tanks/index.astro
+++ b/packages/website-ue/src/pages/[...locale]/tanks/index.astro
@@ -1,9 +1,11 @@
 ---
 import "@radix-ui/colors/violet-dark.css";
+import { Section } from "../../../components/Section";
 import ToolBanner from "../../../components/ToolBanner.astro";
 import { api } from "../../../core/api/dynamic";
 import { tools } from "../../../core/tools/tools";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
+import { Page } from "./_index";
 
 export { getStaticPaths } from "../index.astro";
 
@@ -14,16 +16,11 @@ const tankList = await api.tankList();
 <BaseLayout {locale} accent="purple">
   <ToolBanner {locale} tool={tools.tanks} slot="pre-app" />
 
-  <h1>tanks</h1>
+  <Section>
+    <Page {locale} client:load />
+  </Section>
 
-  {
-    tankList.list.map(({ id, slug }) => (
-      <p>
-        <a href={`/tanks/${slug}`}>
-          <img height="128" width="128" src={`/api/tanks/${id}.webp`} />
-          {slug} ({id})
-        </a>
-      </p>
-    ))
-  }
+  <!-- {
+   
+  } -->
 </BaseLayout>