diff --git a/Dockerfile b/Dockerfile
index cc5c2e7..3cd3fdd 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -4,8 +4,10 @@ COPY package*.json ./
 RUN npm i
 COPY . .
 ENV PUBLIC_PB_URL=http://pb:8080
+ENV PUBLIC_URL=http://localhost:4321
 
 RUN npm run build
 
 EXPOSE 4321
 CMD ["npm", "run", "preview", "--", "--host"]
+# CMD [ "node", "dist/sever/entry.mjs"]
diff --git a/astro.config.mjs b/astro.config.mjs
index c11c87e..60f2bfa 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -21,6 +21,8 @@ export default defineConfig({
     plugins: [tailwindcss()],
     server: {
       proxy: {
+        // The idea is to proxy the Pocketbase connection to the current domain so the user doesn't have to open two ports
+        // Currently works in dev (npm run dev -- --host) with the correct PUBLIC_URL var set but not through docker
         '/api': {
           target: PUBLIC_PB_URL,
           changeOrigin: true,
diff --git a/docker-compose.yml b/docker-compose.yml
index 45e6b62..8aaad5e 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -2,6 +2,7 @@ services:
   web:
     build: .
     env_file: .env
+    network_mode: host
     ports:
       - "4321:4321"
 
diff --git a/package.json b/package.json
index 7c2304a..773c395 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.0.1",
   "scripts": {
-    "dev": "astro dev",
+    "dev": "docker compose up pb -d; astro dev --host",
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro"
diff --git a/src/data/pocketbase.ts b/src/data/pocketbase.ts
index b39559f..bd7c8da 100644
--- a/src/data/pocketbase.ts
+++ b/src/data/pocketbase.ts
@@ -1,5 +1,4 @@
 import Pocketbase from "pocketbase"
 
 const client = new Pocketbase(import.meta.env.PUBLIC_URL)
-export default client;
-// export const client = new Pocketbase("http://localhost:8080")
\ No newline at end of file
+export default client;
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4acf249..3d9602f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -7,12 +7,12 @@ const recipies = await client.collection("recipes").getFullList()
 ---
 
 <PageLayout>
-	<p class="w-full bg-yellow-100 p-5 text-3xl pb-4 font-medium">Recipie</p>
+	<p class="w-full bg-yellow-100 p-5 text-3xl font-medium">Recipie</p>
 	
-	<div id="content" class="p-5">
+	<div id="content" class="p-5 pt-2">
 		<p class="pb-2">What would you like today?</p>
 
-		<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+		<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
 			{
 				recipies.map(r => (
 					<OverviewCard recipe={r} />