diff --git a/packages/website-ue/src/components/HomeTanks.astro b/packages/website-ue/src/components/HomeTanks.astro
index 749856d87..ddd4550e9 100644
--- a/packages/website-ue/src/components/HomeTanks.astro
+++ b/packages/website-ue/src/components/HomeTanks.astro
@@ -15,19 +15,9 @@ interface Props {
 const { locale } = Astro.props;
 
 const strings = await api.strings(locale);
+const popular = (await api.popularTanks()).tanks.slice(0, 8);
 
-const popular = [
-  "Concept 1B",
-  "Obj. 268",
-  "Grille 15",
-  "Kpz 70 Missile",
-  "Concept 1B",
-  "Concept 1B",
-  "Concept 1B",
-  "Concept 1B",
-  "Concept 1B",
-  "Concept 1B",
-];
+console.log(popular.length);
 ---
 
 <style>
@@ -51,7 +41,7 @@ const popular = [
 
   <Scroller client:load className="tanks">
     <div class="content">
-      {popular.map((tank) => <TankCard {tank} />)}
+      {popular.map((tank) => <TankCard {...tank} />)}
     </div>
   </Scroller>
 
diff --git a/packages/website-ue/src/components/TankCard/index.tsx b/packages/website-ue/src/components/TankCard/index.tsx
index 8824b529f..127d64106 100644
--- a/packages/website-ue/src/components/TankCard/index.tsx
+++ b/packages/website-ue/src/components/TankCard/index.tsx
@@ -1,11 +1,10 @@
+import type { PopularTank } from "../../protos/popular_tanks";
 import { Text } from "../Text";
 import styles from "./index.module.css";
 
-interface TankCard {
-  tank: string;
-}
+export function TankCard({ id }: PopularTank) {
+  const tanks = useAwait(api.tanks, "tanks");
 
-export function TankCard({ tank }: TankCard) {
   return (
     <div className={styles["tank-card"]}>
       <div className={styles["icon-wrapper"]}>
@@ -19,12 +18,12 @@ export function TankCard({ tank }: TankCard) {
         <div
           className={styles.icon}
           style={{
-            backgroundImage: "url(https://i.imgur.com/HrkTwHc.png)",
+            backgroundImage: `url(/api/tanks/${id}.webp)`,
           }}
         />
       </div>
 
-      <Text className={styles.name}>{tank}</Text>
+      <Text className={styles.name}>{id}</Text>
     </div>
   );
 }
diff --git a/packages/website-ue/src/core/api/abstract.ts b/packages/website-ue/src/core/api/abstract.ts
index 54396ca35..9d34ed01f 100644
--- a/packages/website-ue/src/core/api/abstract.ts
+++ b/packages/website-ue/src/core/api/abstract.ts
@@ -4,10 +4,10 @@ import type { Avatar } from "../../protos/avatar";
 import type { Avatars } from "../../protos/avatars";
 import type { Background } from "../../protos/background";
 import type { Backgrounds } from "../../protos/backgrounds";
+import type { PopularTanks } from "../../protos/popular_tanks";
 import type { Tank } from "../../protos/tank";
 import type { TankList } from "../../protos/tank_list";
 import type { Tanks } from "../../protos/tanks";
-import type { PopularTanks } from "../../types/popularTanks";
 
 export abstract class AbstractAPI {
   private _tankListCache: TankList | undefined;
diff --git a/packages/website-ue/src/core/api/server.ts b/packages/website-ue/src/core/api/server.ts
index a15342a95..f50a8bc41 100644
--- a/packages/website-ue/src/core/api/server.ts
+++ b/packages/website-ue/src/core/api/server.ts
@@ -11,10 +11,10 @@ import { merge } from "lodash-es";
 import { parse } from "yaml";
 import type { Avatar } from "../../protos/avatar";
 import type { Background } from "../../protos/background";
+import type { PopularTanks } from "../../protos/popular_tanks";
 import type { Tank } from "../../protos/tank";
 import type { TankListEntry } from "../../protos/tank_list";
 import type { Tanks } from "../../protos/tanks";
-import type { PopularTanks } from "../../types/popularTanks";
 import { AbstractAPI } from "./abstract";
 
 if (typeof window !== "undefined") {
@@ -302,9 +302,17 @@ export class ServerAPI extends AbstractAPI {
         }
       }
 
-      const popularTanks: PopularTanks = Object.entries(views)
-        .sort(([, a], [, b]) => b - a)
-        .map(([id, views]) => ({ id, views }));
+      for (const id in tanks) {
+        if (!(id in views)) {
+          views[id] = 0;
+        }
+      }
+
+      const popularTanks = {
+        tanks: Object.entries(views)
+          .sort(([, a], [, b]) => b - a)
+          .map(([id, views]) => ({ id, views })),
+      } satisfies PopularTanks;
 
       await mkdir("../../temp", { recursive: true });
       await writeFile("../../temp/popular.json", JSON.stringify(popularTanks));
diff --git a/packages/website-ue/src/core/tankopedia/characteristics.ts b/packages/website-ue/src/core/tankopedia/characteristics.ts
index 4138d9108..5cca51f62 100644
--- a/packages/website-ue/src/core/tankopedia/characteristics.ts
+++ b/packages/website-ue/src/core/tankopedia/characteristics.ts
@@ -1,4 +1,4 @@
-import { TankClass } from "@blitzkit/core";
+import { TankClass } from "@protos/blitz_static_tank_component";
 import {
   ShellUpgrageSingleChange_AttributeName,
   StageParameters,
@@ -40,7 +40,7 @@ export const characteristics = {
     if (isPump === 1) return GunType.AutoReloader;
 
     const clipSize = attribute(
-      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CLIP_SIZE
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CLIP_SIZE,
     );
 
     if (clipSize === 1) return GunType.Regular;
@@ -54,25 +54,25 @@ export const characteristics = {
     if (gunType === GunType.Regular) return null;
 
     return attribute(
-      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CLIP_SIZE
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CLIP_SIZE,
     );
   },
 
   damage({ shell }) {
     return shell(
-      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_ARMOR_DAMAGE
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_ARMOR_DAMAGE,
     );
   },
 
   module_damage({ shell }) {
     return shell(
-      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_MODULE_DAMAGE
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_MODULE_DAMAGE,
     );
   },
 
   penetration({ shell }) {
     return shell(
-      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_PIERCING_POWER
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_PIERCING_POWER,
     );
   },
 
@@ -82,7 +82,7 @@ export const characteristics = {
     if (gunType === GunType.AutoReloader) return null;
 
     return attribute(
-      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_RELOAD_TIME
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_RELOAD_TIME,
     );
   },
 
@@ -100,7 +100,7 @@ export const characteristics = {
     if (gunType === GunType.Regular) return null;
 
     const clipRate = attribute(
-      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CLIP_RATE
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CLIP_RATE,
     );
 
     return 60 / clipRate;
@@ -173,13 +173,13 @@ export const characteristics = {
 
   normalization({ shellSafe }) {
     return shellSafe(
-      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_NORMALIZATION
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_NORMALIZATION,
     );
   },
 
   ricochet({ shell }) {
     return shell(
-      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_RICOCHET_ANGLE
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_RICOCHET_ANGLE,
     );
   },
 
@@ -191,54 +191,54 @@ export const characteristics = {
 
   shell_range({ shellSafe }) {
     const maxDistance = shellSafe(
-      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_MAX_DISTANCE
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_MAX_DISTANCE,
     );
     return maxDistance === null ? Infinity : maxDistance / 100;
   },
 
   shell_capacity({ shellSafe }) {
     const count = shellSafe(
-      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_MAX_COUNT
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_MAX_COUNT,
     );
     return count === -1 || count === null ? Infinity : count;
   },
 
   aim_time({ attribute }) {
     return attribute(
-      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_AIMING_TIME
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_AIMING_TIME,
     );
   },
 
   speed_forward({ attribute }) {
     return attribute(
-      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_FORWARD_MAX_SPEED
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_FORWARD_MAX_SPEED,
     );
   },
 
   speed_backward({ attribute }) {
     return attribute(
-      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_BACKWARD_MAX_SPEED
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_BACKWARD_MAX_SPEED,
     );
   },
 
   dispersion({ attribute, characteristic, state }) {
     const base = attribute(
-      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_ANGLE
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_ANGLE,
     );
     const movement = attribute(
-      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_VEHICLE_MOVEMENT
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_VEHICLE_MOVEMENT,
     );
     const vehicleRotation = attribute(
-      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_VEHICLE_ROTATION
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_VEHICLE_ROTATION,
     );
     const turretRotation = attribute(
-      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_TURRET_ROTATION
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_TURRET_ROTATION,
     );
     const afterShot = attribute(
-      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_AFTER_SHOT
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_AFTER_SHOT,
     );
     const gunDamaged = attribute(
-      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_WHILE_GUN_DAMAGED
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_WHILE_GUN_DAMAGED,
     );
     const maxSpeed = characteristic("speed_forward") as number;
 
@@ -258,8 +258,8 @@ export const characteristics = {
         -Math.PI / 2,
         0,
         parameters.pitch_limits_up,
-        parameters.pitch_limits_down
-      ).pitch
+        parameters.pitch_limits_down,
+      ).pitch,
     );
   },
 
@@ -269,14 +269,14 @@ export const characteristics = {
         Math.PI / 2,
         0,
         parameters.pitch_limits_up,
-        parameters.pitch_limits_down
-      ).pitch
+        parameters.pitch_limits_down,
+      ).pitch,
     );
   },
 
   engine_power({ attribute }) {
     return attribute(
-      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_ENGINE_POWER
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_ENGINE_POWER,
     );
   },
 
@@ -316,7 +316,7 @@ export const characteristics = {
 
   turret_traverse_speed({ attribute }) {
     return attribute(
-      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_TURRET_ROTATION_SPEED
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_TURRET_ROTATION_SPEED,
     );
   },
 
@@ -326,14 +326,14 @@ export const characteristics = {
 
   health({ attribute }) {
     return attribute(
-      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_MAX_HEALTH
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_MAX_HEALTH,
     );
   },
 
   fire_chance({ attribute }) {
     return (
       attribute(
-        TankAttributeChange_AttributeName.ATTRIBUTE_NAME_FIRE_START_CHANCE
+        TankAttributeChange_AttributeName.ATTRIBUTE_NAME_FIRE_START_CHANCE,
       ) * 100
     );
   },
@@ -341,7 +341,7 @@ export const characteristics = {
   view_range({ attribute }) {
     return (
       attribute(
-        TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CIRCULAR_VISION_RADIUS
+        TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CIRCULAR_VISION_RADIUS,
       ) / 100
     );
   },
@@ -353,21 +353,21 @@ export const characteristics = {
   camouflage({ attribute, characteristic, attributeSafe, state }) {
     const tankClass = characteristic("class");
     const base = attribute(
-      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_STILL
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_STILL,
     );
     const moving =
-      tankClass === TankClass.LIGHT
+      tankClass === TankClass.TANK_CLASS_LIGHT
         ? 0
         : attribute(
-            TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_MOVING
+            TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_MOVING,
           );
     const shooting = attribute(
-      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_FACTOR_AT_SHOT
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_FACTOR_AT_SHOT,
     );
 
     if (
       attributeSafe(
-        TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_FIRE_PENALTY
+        TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_FIRE_PENALTY,
       )
     ) {
       throw new Error("Fire penalty implemented! Code it in!!");
diff --git a/packages/website-ue/src/pages/api/tanks/popular.json.ts b/packages/website-ue/src/pages/api/tanks/popular.json.ts
index 06450d0b5..d21ca735a 100644
--- a/packages/website-ue/src/pages/api/tanks/popular.json.ts
+++ b/packages/website-ue/src/pages/api/tanks/popular.json.ts
@@ -1,9 +1,6 @@
 import { api } from "../../../core/api/dynamic";
 
 export async function GET() {
-  throw new Error(
-    "MAKE THIS A PROTO AND ADD LAST UPDATED TIME OH AND ADD 0's FOR TANKS WITH NO ENTRIES",
-  );
   const popular = await api.popularTanks();
   return Response.json(popular);
 }
diff --git a/packages/website-ue/src/protos/popular_tanks.proto b/packages/website-ue/src/protos/popular_tanks.proto
new file mode 100644
index 000000000..3a935759f
--- /dev/null
+++ b/packages/website-ue/src/protos/popular_tanks.proto
@@ -0,0 +1,12 @@
+syntax = "proto3";
+
+package blitzkit;
+
+message PopularTanks {
+  repeated PopularTank tanks = 1;
+}
+
+message PopularTank {
+  string id = 1;
+  int32 views = 2;
+}
\ No newline at end of file
diff --git a/packages/website-ue/src/types/popularTanks.ts b/packages/website-ue/src/types/popularTanks.ts
deleted file mode 100644
index e2b49b35d..000000000
--- a/packages/website-ue/src/types/popularTanks.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type PopularTanks = {
-  id: string;
-  views: number;
-}[];