diff --git a/.gitignore b/.gitignore
index 93acad9..e0a700b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,7 @@ node_modules
 /functions/\[\[path\]\].js
 /functions/\[\[path\]\].js.map
 /public/build
-.env
\ No newline at end of file
+.env
+
+.DS_Store
+*/.DS_Store
\ No newline at end of file
diff --git a/app/.DS_Store b/app/.DS_Store
new file mode 100644
index 0000000..87e096b
Binary files /dev/null and b/app/.DS_Store differ
diff --git a/app/components/index-world.tsx b/app/components/index-world.tsx
new file mode 100644
index 0000000..2d6d6bf
--- /dev/null
+++ b/app/components/index-world.tsx
@@ -0,0 +1,18 @@
+import { World } from "~/utils/saerro";
+
+export type IndexWorldProps = {
+  world: World;
+};
+
+export const IndexWorld = ({ world }: IndexWorldProps) => {
+  return (
+    <div>
+      <h1>
+        {world.name} (total: {world.population.total})
+      </h1>
+      <p>VS: {world.population.vs}</p>
+      <p>NC: {world.population.nc}</p>
+      <p>TR: {world.population.tr}</p>
+    </div>
+  );
+};
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index ff01a25..e5b4062 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -1,5 +1,6 @@
 import { json, type V2_MetaFunction } from "@remix-run/cloudflare";
 import { useLoaderData } from "@remix-run/react";
+import { IndexWorld } from "~/components/index-world";
 import type { IndexResponse } from "~/utils/saerro";
 import { indexQuery } from "~/utils/saerro";
 
@@ -17,15 +18,9 @@ export default function Index() {
     <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
       <h1>PS2.LIVE</h1>
       <h2>Worlds</h2>
-      <ul>
-        {data.allWorlds.map((world) => (
-          <li key={world.id}>
-            <a href={`/worlds/${world.id}`}>{world.name}</a> -{" "}
-            {world.population.total} players ({world.population.vs} VS,{" "}
-            {world.population.nc} NC, {world.population.tr} TR)
-          </li>
-        ))}
-      </ul>
+      {data.allWorlds.map((world) => (
+        <IndexWorld key={world.id} world={world} />
+      ))}
     </div>
   );
 }
diff --git a/app/routes/worlds.$id.tsx b/app/routes/worlds.$id.tsx
index da3fe4e..e60849e 100644
--- a/app/routes/worlds.$id.tsx
+++ b/app/routes/worlds.$id.tsx
@@ -10,7 +10,12 @@ export const loader = async ({ params }: LoaderArgs) => {
 };
 
 export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
-  return [{ title: `${data?.world.name || "Unknown world"} | PS2.LIVE` }];
+  return [
+    { title: `${data?.world.name || "Unknown world"} | PS2.LIVE` },
+    {
+      description: `${data?.world.name} currently has ${data?.world.population.total} players online right now. VS: ${data?.world.population.vs}, NC: ${data?.world.population.nc}, TR: ${data?.world.population.tr} -- See more detailed stats on ps2.live.`,
+    },
+  ];
 };
 
 export default function World() {
diff --git a/package-lock.json b/package-lock.json
index 5904707..798d597 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "ps2.live-2",
+  "name": "ps2.live",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
@@ -20,6 +20,7 @@
         "@remix-run/eslint-config": "^1.16.0",
         "@types/react": "^18.0.35",
         "@types/react-dom": "^18.0.11",
+        "@vanilla-extract/css": "^1.11.0",
         "eslint": "^8.38.0",
         "npm-run-all": "^4.1.5",
         "typescript": "^5.0.4",
diff --git a/package.json b/package.json
index 7bc94a2..a0384c1 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@remix-run/eslint-config": "^1.16.0",
     "@types/react": "^18.0.35",
     "@types/react-dom": "^18.0.11",
+    "@vanilla-extract/css": "^1.11.0",
     "eslint": "^8.38.0",
     "npm-run-all": "^4.1.5",
     "typescript": "^5.0.4",
@@ -35,4 +36,4 @@
   "engines": {
     "node": ">=16.13"
   }
-}
\ No newline at end of file
+}