diff --git a/project2/package-lock.json b/project2/package-lock.json
index 4ab18e5..e93e481 100644
--- a/project2/package-lock.json
+++ b/project2/package-lock.json
@@ -8,22 +8,24 @@
             "name": "project2",
             "version": "0.0.0",
             "dependencies": {
-                "react": "^19.2.8",
-                "react-dom": "^19.2.8"
+                "react": "^19.3.0",
+                "react-dom": "^19.3.0"
             },
             "devDependencies": {
                 "@eslint/js": "^10.0.1",
-                "@types/node": "^24.13.3",
-                "@types/react": "^19.2.18",
-                "@types/react-dom": "^19.2.7",
+                "@types/node": "^24.19.0",
+                "@types/react": "^19.3.0",
+                "@types/react-dom": "^19.3.0",
                 "@vitejs/plugin-react": "^6.1.1",
-                "eslint": "^10.10.0",
+                "eslint": "^10.11.0",
+                "eslint-config-prettier": "^10.1.8",
                 "eslint-plugin-react-hooks": "^7.1.1",
-                "eslint-plugin-react-refresh": "^0.5.6",
+                "eslint-plugin-react-refresh": "^0.5.7",
                 "globals": "^17.12.0",
-                "typescript": "~6.0.2",
-                "typescript-eslint": "^8.69.0",
-                "vite": "^8.3.0"
+                "prettier": "3.9.9",
+                "typescript": "~6.0.3",
+                "typescript-eslint": "^8.71.0",
+                "vite": "^8.3.1"
             }
         },
         "node_modules/@babel/code-frame": {
@@ -1470,6 +1472,22 @@
                 }
             }
         },
+        "node_modules/eslint-config-prettier": {
+            "version": "10.1.8",
+            "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
+            "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "eslint-config-prettier": "bin/cli.js"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint-config-prettier"
+            },
+            "peerDependencies": {
+                "eslint": ">=7.0.0"
+            }
+        },
         "node_modules/eslint-plugin-react-hooks": {
             "version": "7.1.1",
             "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.1.1.tgz",
@@ -2377,6 +2395,22 @@
                 "node": ">= 0.8.0"
             }
         },
+        "node_modules/prettier": {
+            "version": "3.9.9",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.9.tgz",
+            "integrity": "sha512-Z/CJHIkdujO/OtN7nXUii0Rf3VT5SRuhjBA82Xvu2XhBUgX3nhP67T0LHceBdQLex7OOFGTox+Q5Yg8Jk2Qivg==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "prettier": "bin/prettier.cjs"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
+            }
+        },
         "node_modules/punycode": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/project2/src/App.tsx b/project2/src/App.tsx
index c30eeba..20ba618 100644
--- a/project2/src/App.tsx
+++ b/project2/src/App.tsx
@@ -1,16 +1,54 @@
-function App() {
-    return <>
-        <header>
-            <h1>PokeDOX</h1>
-            <input type="search" placeholder="Search"></input>
-        </header>
-        <main>
+// Mock data until we have a backend: 12 pokemon with id, name and placeholder url
+const mockNames = [
+    'Bulbasaur',
+    'Ivysaur',
+    'Venusaur',
+    'Charmander',
+    'Charmeleon',
+    'Charizard',
+    'Squirtle',
+    'Wartortle',
+    'Blastoise',
+    'Caterpie',
+    'Metapod',
+    'Butterfree',
+];
+
+const mockPokemon = mockNames.map((name, i) => ({
+    id: i + 1,
+    name,
+    url: '#',
+}));
 
-        </main>
-        <footer>
-            <span>Doxing all your favourite pokemon since 2026</span>
-        </footer>
-    </>;
+function App() {
+    return (
+        <>
+            <header>
+                <h1>PokeDOX</h1>
+                <input
+                    type="search"
+                    placeholder="Search"
+                    aria-label="Search pokemon"
+                ></input>
+            </header>
+            <main>
+                <ul className="pokemon-grid">
+                    {mockPokemon.map((pokemon) => (
+                        <li key={pokemon.id} className="pokemon-card">
+                            <div className="pokemon-image">
+                                <img src={pokemon.url} alt={pokemon.name} />
+                            </div>
+                            <h2>{pokemon.name}</h2>
+                            <span>#{String(pokemon.id).padStart(4, '0')}</span>
+                        </li>
+                    ))}
+                </ul>
+            </main>
+            <footer>
+                <span>Doxing all your favourite pokemon since 2026</span>
+            </footer>
+        </>
+    );
 }
 
 export default App;
diff --git a/project2/src/index.css b/project2/src/index.css
index 31bdf02..7fcd5e8 100644
--- a/project2/src/index.css
+++ b/project2/src/index.css
@@ -4,6 +4,10 @@
     --bg: #fff;
     --accent: #8888ff;
 
+    --card-bg: #f4f4f5;
+    --card-border: #e4e4e7;
+    --image-bg: #fff;
+
     --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
     --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
     --mono: ui-monospace, Consolas, monospace;
@@ -29,6 +33,10 @@
         --text-h: #f3f4f6;
         --bg: #16171d;
         --accent: #444488;
+
+        --card-bg: #161616;
+        --card-border: #2a2a2e;
+        --image-bg: #080808;
     }
 }
 
@@ -50,7 +58,7 @@ body {
     margin: 0;
 }
 
-header{
+header {
     display: flex;
     /*width: 100%;*/
     color: var(--text-h);
@@ -59,16 +67,61 @@ header{
     align-items: center;
     justify-content: space-between;
 }
-footer{
+footer {
     padding: 1rem 2rem;
 }
 
-input{
+input {
     outline: none;
     border: none;
     border-radius: 1rem;
     padding: 0.5rem 0.75rem;
+    width: 12rem;
+    min-width: 0;
 }
-input:focus, input:hover {
+
+input:focus,
+input:hover {
     background: var(--bg);
 }
+
+.pokemon-grid {
+    list-style: none;
+    margin: 0;
+    padding: 1.5rem 2rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 14rem);
+    justify-content: center;
+    gap: 1.5rem;
+}
+
+.pokemon-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1.75rem 1.75rem 2rem;
+    background: var(--card-bg);
+    border: 1px solid var(--card-border);
+    border-radius: 1.5rem;
+}
+
+.pokemon-image {
+    width: 100%;
+    aspect-ratio: 1;
+    display: grid;
+    place-items: center;
+    background: var(--image-bg);
+    border-radius: 1.25rem;
+}
+
+.pokemon-image img {
+    width: 75%;
+    height: auto;
+    image-rendering: pixelated;
+}
+
+.pokemon-card h2 {
+    margin: 1.25rem 0 0.25rem;
+    font-size: 1.4rem;
+    color: var(--text-h);
+}