diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
deleted file mode 100644
index edacfa6..0000000
--- a/.github/workflows/node.js.yml
+++ /dev/null
@@ -1,24 +0,0 @@
-name: Node.js CI
-
-on:
-  pull_request:
-    branches: [ "master" ]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [14.x, 16.x, 18.x]
-
-    steps:
-    - uses: actions/checkout@v4
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm ci
-    - run: npm run build --if-present
-    - run: npm test
diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
new file mode 100644
index 0000000..8a2483e
--- /dev/null
+++ b/.github/workflows/pull_request.yml
@@ -0,0 +1,32 @@
+name: Node.js CI
+
+on:
+  pull_request:
+    branches: ['master']
+
+jobs:
+  build_and_test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20]
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+      - run: pnpm install
+      - run: pnpm run build
+      - run: pnpm exec playwright install
+      - run: pnpm test
+        env:
+          API_URL: ${{ secrets.API_URL }}
+          API_KEY: ${{ secrets.API_KEY }}
diff --git a/package.json b/package.json
index 18ee06e..b2bbad7 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
 	"name": "cook-web",
 	"version": "1.1.0",
 	"private": true,
+	"homepage": "https://github.com/luz-ojeda/cook-web",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
diff --git a/src/lib/assets/recipe_image_placeholder.png b/src/lib/assets/recipe_image_placeholder.png
deleted file mode 100644
index 8c18bee..0000000
Binary files a/src/lib/assets/recipe_image_placeholder.png and /dev/null differ
diff --git a/src/lib/assets/recipe_image_placeholder.svg b/src/lib/assets/recipe_image_placeholder.svg
new file mode 100644
index 0000000..ce9d214
--- /dev/null
+++ b/src/lib/assets/recipe_image_placeholder.svg
@@ -0,0 +1,18 @@
+<svg width="223" height="214" viewBox="0 0 223 214" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M150.232 84.3118C134.406 84.3118 118.295 83.6689 103.225 79.4711C88.4384 75.3679 74.8619 67.4074 62.7603 58.1988C54.8376 52.2048 47.6334 47.4398 37.347 48.1583C27.2819 48.6936 17.6559 52.4525 9.89155 58.8795C-3.19329 70.3382 -1.22678 91.5538 4.01093 106.435C11.877 128.88 35.8154 144.498 56.1612 154.633C79.6647 166.376 105.494 173.183 131.38 177.116C154.071 180.557 183.228 183.072 202.893 168.248C220.951 154.633 225.905 123.547 221.48 102.559C220.408 96.3526 217.106 90.7516 212.196 86.8077C199.508 77.5424 180.581 83.7256 166.323 84.047C161.029 84.1605 155.64 84.2739 150.232 84.3118Z" fill="#CCC5B8"/>
+<path d="M198.128 25.3356C199.151 25.3356 199.981 24.506 199.981 23.4826C199.981 22.4592 199.151 21.6295 198.128 21.6295C197.105 21.6295 196.275 22.4592 196.275 23.4826C196.275 24.506 197.105 25.3356 198.128 25.3356Z" fill="#CFCFCF"/>
+<path d="M74.8622 9.81158C75.8856 9.81158 76.7153 8.98194 76.7153 7.95853C76.7153 6.93511 75.8856 6.10547 74.8622 6.10547C73.8388 6.10547 73.0092 6.93511 73.0092 7.95853C73.0092 8.98194 73.8388 9.81158 74.8622 9.81158Z" fill="#CFCFCF"/>
+<path d="M97.2687 186.249C98.2921 186.249 99.1218 185.419 99.1218 184.396C99.1218 183.372 98.2921 182.543 97.2687 182.543C96.2453 182.543 95.4156 183.372 95.4156 184.396C95.4156 185.419 96.2453 186.249 97.2687 186.249Z" fill="#CFCFCF"/>
+<path d="M146.734 1V9.13075" stroke="#625955" stroke-width="1.89087" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M142.669 5.06543H150.799" stroke="#625955" stroke-width="1.89087" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.2595 35.2247V43.3555" stroke="#625955" stroke-width="1.89087" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.1754 39.2902H18.3251" stroke="#625955" stroke-width="1.89087" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.386 148.507V156.657" stroke="#625955" stroke-width="1.89087" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.3019 152.572H24.4515" stroke="#625955" stroke-width="1.89087" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M188.39 65.1384V73.2692" stroke="#625955" stroke-width="1.89087" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M184.324 69.2036H192.455" stroke="#625955" stroke-width="1.89087" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M131.719 17.7011L36.8108 30.1639C30.6593 30.9716 26.3274 36.6132 27.1352 42.7647L41.6013 152.93C42.4091 159.081 48.0506 163.413 54.2021 162.605L149.111 150.143C155.262 149.335 159.594 143.693 158.786 137.542L144.32 27.3767C143.512 21.2253 137.871 16.8934 131.719 17.7011Z" fill="#A19887"/>
+<path d="M159.365 33.8634H63.498C57.2844 33.8634 52.2473 38.9005 52.2473 45.1141V156.392C52.2473 162.606 57.2844 167.643 63.498 167.643H159.365C165.579 167.643 170.616 162.606 170.616 156.392V45.1141C170.616 38.9005 165.579 33.8634 159.365 33.8634Z" fill="white" stroke="#625955" stroke-width="1.89087" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M66.5609 121.903L85.7344 90.6464C85.923 90.1898 86.2429 89.7994 86.6536 89.5247C87.0642 89.25 87.5472 89.1034 88.0412 89.1034C88.5353 89.1034 89.0182 89.25 89.4289 89.5247C89.8396 89.7994 90.1595 90.1898 90.3481 90.6464L101.221 108.364C101.405 108.822 101.723 109.214 102.132 109.491C102.541 109.767 103.024 109.915 103.518 109.915C104.012 109.915 104.495 109.767 104.904 109.491C105.313 109.214 105.631 108.822 105.815 108.364L124.422 78.1099C124.606 77.6518 124.924 77.2594 125.333 76.983C125.742 76.7066 126.225 76.559 126.719 76.559C127.213 76.559 127.696 76.7066 128.105 76.983C128.514 77.2594 128.832 77.6518 129.016 78.1099L156.321 122.602L66.5609 121.903Z" fill="white" stroke="#625955" stroke-width="1.89087" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M104.794 86.4484C108.126 86.4484 110.826 83.7478 110.826 80.4165C110.826 77.0852 108.126 74.3846 104.794 74.3846C101.463 74.3846 98.7626 77.0852 98.7626 80.4165C98.7626 83.7478 101.463 86.4484 104.794 86.4484Z" fill="white" stroke="#625955" stroke-width="1.89087" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/lib/components/PrimaryButton.svelte b/src/lib/components/Button.svelte
similarity index 72%
rename from src/lib/components/PrimaryButton.svelte
rename to src/lib/components/Button.svelte
index 1557ea7..c123d33 100644
--- a/src/lib/components/PrimaryButton.svelte
+++ b/src/lib/components/Button.svelte
@@ -5,16 +5,22 @@
 	export let disabled = false;
 	export let loading = false; // Use local state since we not always want it to sync with a global/different one
 	export let onClick: EventHandler<MouseEvent | SubmitEvent> | undefined = undefined;
-	export let width = 'auto';
+	export let size: 'small' | 'large' = 'large';
 	export let type: 'button' | 'reset' | 'submit' | null | undefined = 'button';
+	export let buttonType: 'primary' | 'secondary' | 'tertiary' = 'primary';
 </script>
 
 <button
+	class="
+		{buttonType === 'primary'
+		? 'primary'
+		: buttonType === 'secondary'
+			? 'secondary'
+			: 'tertiary'} {size === 'small' ? 'small' : 'large'}"
 	disabled={disabled || loading}
 	on:click={onClick}
 	on:submit={type === 'submit' ? onClick : undefined}
 	{type}
-	style="width: {width}"
 >
 	{#if loading}
 		<CircularLoading --background="#a19887" --circle-width="30px" />
@@ -29,24 +35,11 @@
 
 	button {
 		align-items: center;
-		background-color: $primaryColor;
 		border: 0;
 		border-radius: 7px;
-		box-shadow:
-			inset 0 3px 0 $lightestPrimaryColor,
-			$shadow;
-		color: $grey200;
 		display: flex;
-		font-size: 20px;
 		font-weight: bold;
-		height: 48px;
 		justify-content: center;
-		padding: 8px 24px;
-
-		&:hover {
-			background-color: $lightPrimaryColor;
-			transition: background-color 0.3s;
-		}
 
 		&:disabled {
 			box-shadow:
@@ -59,4 +52,39 @@
 			box-shadow: $smallestShadow;
 		}
 	}
+
+	.small {
+		font-size: 16px;
+		height: 32px;
+		padding: 4px 12px;
+	}
+
+	.large {
+		font-size: 20px;
+		height: 48px;
+		padding: 8px 24px;
+		width: 100%;
+	}
+
+	.primary {
+		background-color: $primaryColor;
+		box-shadow:
+			inset 0 3px 0 $lightestPrimaryColor,
+			$shadow;
+		color: $grey200;
+
+		&:hover {
+			background-color: $lightPrimaryColor;
+			transition: background-color 0.3s;
+		}
+	}
+
+	.tertiary {
+		background-color: transparent;
+		color: $primaryColor;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
 </style>
diff --git a/src/lib/components/RecipeCard.svelte b/src/lib/components/RecipeCard.svelte
index 1160c56..c50ff0b 100644
--- a/src/lib/components/RecipeCard.svelte
+++ b/src/lib/components/RecipeCard.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { SaveRecipeButton, slugify } from '$lib';
-	import placeholder from '$lib/assets/recipe_image_placeholder.png';
+	import placeholder from '$lib/assets/recipe_image_placeholder.svg';
 
 	export let recipeId: string;
 	export let recipeImage: string;
@@ -10,11 +10,11 @@
 	$: slugifiedRecipeTitle = slugify(recipeTitle);
 </script>
 
-<div class="container flex-column">
+<div class="container flex-column" data-testid="recipe-card">
 	<a class="non-text-anchor-element" href={`/recetas/${slugifiedRecipeTitle}`}>
 		<img
 			alt={`Photo of the recipe ${recipeTitle}`}
-			class="rounded-img recipe-image"
+			class="rounded-img recipe-image {recipeImage ? 'object-fit-cover' : ''}"
 			crossorigin="anonymous"
 			loading="lazy"
 			src={recipeImage ? recipeImage : placeholder}
@@ -22,7 +22,6 @@
 	</a>
 	<div class="title-container">
 		<a class="non-text-anchor-element" href={`/recetas/${slugifiedRecipeTitle}`}>
-
 			<h2>{recipeTitle}</h2>
 		</a>
 		<SaveRecipeButton {recipeId} --iconWidth="32px" --mobileIconWidth="48px" />
@@ -50,7 +49,6 @@
 		margin-bottom: 16px;
 		max-height: 240px;
 		display: inline-block;
-		object-fit: cover;
 		width: 100%;
 
 		@media (max-width: $mobileBreakpoint) {
diff --git a/src/lib/components/RecipeForm.svelte b/src/lib/components/RecipeForm.svelte
index 4d30e84..cf022f9 100644
--- a/src/lib/components/RecipeForm.svelte
+++ b/src/lib/components/RecipeForm.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { applyAction, enhance } from '$app/forms';
 	import { ImageUploadInput, slugify } from '$lib';
-	import PrimaryButton from '$lib/components/PrimaryButton.svelte';
+	import Button from '$lib/components/Button.svelte';
 	import type { Recipe } from '$lib/types/Recipe';
 	import type { RecipeFormDataElems } from '$lib/types/RecipeFormData';
 	import type { ActionData as CreateRecipeActionData } from '../../routes/admin/crear-receta/$types';
@@ -215,7 +215,7 @@
 			/>
 		</label>
 
-		<PrimaryButton disabled={invalidFile} {loading} type="submit">{submitButtonText}</PrimaryButton>
+		<Button disabled={invalidFile} {loading} type="submit">{submitButtonText}</Button>
 	</form>
 	{#if form?.success}
 		<p class="success">
diff --git a/src/lib/components/RecipesSearchForm.svelte b/src/lib/components/RecipesSearchForm.svelte
index 973429e..54644f3 100644
--- a/src/lib/components/RecipesSearchForm.svelte
+++ b/src/lib/components/RecipesSearchForm.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page, navigating } from '$app/stores';
-	import { ChipTextInput, PrimaryButton, TextInput } from '$lib';
+	import { ChipTextInput, Button, TextInput } from '$lib';
 	import { buildRecipesBrowserUrl } from '$lib/scripts/urls';
 	import { recipes } from '../../stores/recipes';
 	import { burgerMenuStore } from '../../stores/burgerMenu';
@@ -95,9 +95,7 @@
 	<label for="vegetarian">Solo vegetarianas</label>
 
 	{#if $page.url.pathname !== '/'}
-		<PrimaryButton {loading} onClick={onButtonClick} type="submit" width="100%">
-			Buscar
-		</PrimaryButton>
+		<Button {loading} onClick={onButtonClick} type="submit">Buscar</Button>
 	{:else}
 		<a
 			class="non-text-anchor-element"
@@ -109,13 +107,12 @@
 			})}
 			style={Boolean($navigating) ? 'pointer-events: none' : ''}
 		>
-			<PrimaryButton
+			<Button
 				disabled={$recipes.loading || Boolean($navigating)}
 				loading={loading && $navigating?.to?.url.pathname == '/recetas'}
 				onClick={() => {
 					loading = true;
-				}}
-				width="100%">Buscar</PrimaryButton
+				}}>Buscar</Button
 			>
 		</a>
 	{/if}
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 0810088..d9358ee 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,5 +1,6 @@
 // Components
 import BurgerMenu from './components/BurgerMenu.svelte';
+import Button from './components/Button.svelte';
 import ChipTextInput from './components/ChipTextInput.svelte';
 import CircularLoading from './components/CircularLoading.svelte';
 import CopyRecipeButton from './components/CopyRecipeButton.svelte';
@@ -10,7 +11,6 @@ import Icon from './components/Icon.svelte';
 import ImageUploadInput from './components/ImageUploadInput.svelte';
 import Navbar from './components/Navbar.svelte';
 import Pagination from './components/Pagination.svelte';
-import PrimaryButton from './components/PrimaryButton.svelte';
 import RecipeCard from './components/RecipeCard.svelte';
 import RecipeForm from './components/RecipeForm.svelte';
 import RecipesSearchForm from './components/RecipesSearchForm.svelte';
@@ -19,6 +19,7 @@ import TextInput from './components/TextInput.svelte';
 
 export {
 	BurgerMenu,
+	Button,
 	ChipTextInput,
 	CircularLoading,
 	CopyRecipeButton,
@@ -29,7 +30,6 @@ export {
 	ImageUploadInput,
 	Navbar,
 	Pagination,
-	PrimaryButton,
 	RecipeCard,
 	RecipeForm,
 	RecipesSearchForm,
diff --git a/src/routes/recetas/[name]/+page.svelte b/src/routes/recetas/[name]/+page.svelte
index 7208bad..a9514dc 100644
--- a/src/routes/recetas/[name]/+page.svelte
+++ b/src/routes/recetas/[name]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Recipe } from '$lib/types/Recipe';
-	import placeholder from '$lib/assets/recipe_image_placeholder.png';
+	import placeholder from '$lib/assets/recipe_image_placeholder.svg';
 	import {
 		CopyRecipeButton,
 		DownloadRecipeButton,
@@ -40,7 +40,7 @@
 	<div class="recipe-first-content">
 		<img
 			alt={`Photo of the recipe ${data.name}`}
-			class="image-container rounded-img recipe-image"
+			class="image-container rounded-img recipe-image {data.pictures[0] ? 'object-fit-cover' : ''}"
 			crossorigin="anonymous"
 			src={data.pictures[0] ? data.pictures[0] : placeholder}
 		/>
@@ -183,7 +183,6 @@
 	.recipe-image {
 		max-height: 374px;
 		margin-right: 20px;
-		object-fit: cover;
 		width: 100%;
 
 		@media (max-width: $tabletBreakpoint) {
diff --git a/src/sass/utilities.scss b/src/sass/utilities.scss
index 9b4bac4..1f83f5a 100644
--- a/src/sass/utilities.scss
+++ b/src/sass/utilities.scss
@@ -108,3 +108,7 @@
 	color: $grey900;
 	text-decoration: none;
 }
+
+.object-fit-cover {
+	object-fit: cover;
+}
diff --git a/tests/homepageTests.test.ts b/tests/homepageTests.test.ts
new file mode 100644
index 0000000..2a7e399
--- /dev/null
+++ b/tests/homepageTests.test.ts
@@ -0,0 +1,9 @@
+import { expect, test } from '@playwright/test';
+
+test('user can see list of recipes in homepage', async ({ page }) => {
+	await page.goto('/');
+
+	const recipeCardsCount = await page.getByTestId('recipe-card').count();
+
+	expect(recipeCardsCount).toEqual(4);
+});
diff --git a/tests/test.ts b/tests/test.ts
deleted file mode 100644
index 5816be4..0000000
--- a/tests/test.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test('index page has expected h1', async ({ page }) => {
-	await page.goto('/');
-	await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
-});