diff --git a/src/app.scss b/src/app.scss
index afd0992..dca4352 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -79,10 +79,10 @@ form.signOutButton button {
 
 a {
 	color: var(--link);
+	text-decoration: none;
 
 	&:hover {
 		color: var(--link-hover);
-		text-decoration: none;
 		transition: color 0.2s ease;
 	}
 }
diff --git a/src/lib/components/DownloadRecipeButton.svelte b/src/lib/components/DownloadRecipeButton.svelte
index ee4ef64..c0e88c9 100644
--- a/src/lib/components/DownloadRecipeButton.svelte
+++ b/src/lib/components/DownloadRecipeButton.svelte
@@ -14,7 +14,7 @@
 </script>
 
 {#if browser}
-	<a {href} download={'Receta de ' + recipe.name} class="non-text-anchor-element">
+	<a {href} download={'Receta de ' + recipe.name} class="text-color">
 		<Button buttonType="tertiary" tabIndex={-1}>
 			<Icon class="icon-margin-right" name="download" width="18" height="18" />
 			<span class="action-label">Descargar</span>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 18448eb..b5f71a3 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -22,18 +22,18 @@
 		<h3>EXPLORAR</h3>
 		<ul>
 			<li>
-				<a class="non-text-anchor-element" href="/">Inicio</a>
+				<a class="text-color" href="/">Inicio</a>
 			</li>
 			<li>
 				<a
-					class="non-text-anchor-element"
+					class="text-color"
 					href="/sobre-recetas-simples"
 					aria-current={$page.url.pathname === '/sobre-recetas-simples'}>Sobre Recetas Simples</a
 				>
 			</li>
 			{#if $page.url.pathname != '/recetas'}
 				<li>
-					<a class="non-text-anchor-element" href="/recetas"> Buscar recetas </a>
+					<a class="text-color" href="/recetas"> Buscar recetas </a>
 				</li>
 			{/if}
 		</ul>
@@ -68,7 +68,7 @@
 						d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
 					/>
 				</svg>
-				<a class="non-text-anchor-element" href="https://github.com/luz-ojeda/cook-web#readme"
+				<a class="text-color" href="https://github.com/luz-ojeda/cook-web#readme"
 					>GitHub</a
 				>
 			</li>
diff --git a/src/lib/components/ImageUploadInput.svelte b/src/lib/components/ImageUploadInput.svelte
index 71fb873..f28f94f 100644
--- a/src/lib/components/ImageUploadInput.svelte
+++ b/src/lib/components/ImageUploadInput.svelte
@@ -86,7 +86,7 @@
 	<label for="recipeImage">
 		{#if fileReader?.readyState != 1}
 			<div class="h-100 flex-column justify-center">
-				Seleccionar o arrastrar una imagen
+				Selecciona o arrastra una imagen
 				<div class="icon margin-top">
 					<Icon name="upload" width="32" height="32" />
 				</div>
diff --git a/src/lib/components/NavLinks.svelte b/src/lib/components/NavLinks.svelte
index bd75925..f842ec6 100644
--- a/src/lib/components/NavLinks.svelte
+++ b/src/lib/components/NavLinks.svelte
@@ -3,30 +3,35 @@
 </script>
 
 <div class="flex-center nav-links text--md">
+	<a class="text-color nav-link" href="/recetas" aria-current={$page.url.pathname === '/recetas'}
+		>Recetas</a
+	>
+	<span class="separator">|</span>
 	<a
-		class="non-text-anchor-element nav-link"
-		href="/recetas"
-		aria-current={$page.url.pathname === '/recetas'}>Recetas</a
+		class="text-color nav-link"
+		href="/crear-receta"
+		aria-current={$page.url.pathname === '/crear-receta'}>Crear</a
 	>
+	<span class="separator">|</span>
 	<a
-		class="non-text-anchor-element nav-link"
+		class="text-color nav-link"
 		href="/recetas-guardadas"
 		aria-current={$page.url.pathname === '/recetas-guardadas'}>Recetas guardadas</a
 	>
+	<span class="separator">|</span>
 	<a
-		class="non-text-anchor-element nav-link"
+		class="text-color nav-link"
 		href="/ingredientes"
 		aria-current={$page.url.pathname === '/ingredientes'}>Ingredientes</a
 	>
 	{#if $page.data.session}
-		<a
-			class="non-text-anchor-element nav-link"
-			href="/cerrar-sesion"
-			data-sveltekit-preload-data="off"
+		<span class="separator">|</span>
+		<a class="text-color nav-link" href="/cerrar-sesion" data-sveltekit-preload-data="off"
 			>Cerrar sesión
 		</a>
 	{:else}
-		<a class="non-text-anchor-element nav-link" href="/iniciar-sesion">Iniciar sesión </a>
+		<span class="separator">|</span>
+		<a class="text-color nav-link" href="/iniciar-sesion">Iniciar sesión </a>
 	{/if}
 </div>
 
@@ -45,8 +50,6 @@
 	}
 
 	.nav-links a:not(:last-child) {
-		margin-right: var(--space-sm);
-
 		@media (max-width: $tabletBreakpoint) {
 			margin-right: 0;
 			margin-bottom: var(--space-lg);
@@ -54,9 +57,20 @@
 	}
 
 	.nav-link {
+		@media (max-width: $laptopBreakpoint) {
+			font-size: var(--text-sm);
+		}
 		&[aria-current='true'] {
 			color: var(--btn-primary-active);
 			text-decoration: underline;
 		}
 	}
+
+	.separator {
+		margin: 0 var(--space-xs);
+
+		@media (max-width: $tabletBreakpoint) {
+			display: none;
+		}
+	}
 </style>
diff --git a/src/lib/components/RecipeCard.svelte b/src/lib/components/RecipeCard.svelte
index c59d75c..a761fae 100644
--- a/src/lib/components/RecipeCard.svelte
+++ b/src/lib/components/RecipeCard.svelte
@@ -11,13 +11,13 @@
 
 <div class="container flex-column" data-testid="recipe-card">
 	<a
-		class="recipe-image-container non-text-anchor-element margin-bottom"
+		class="recipe-image-container text-color margin-bottom"
 		href={`/recetas/${slugifiedRecipeTitle}`}
 	>
 		<RecipeImage {recipeTitle} {recipeImage} />
 	</a>
 	<div class="title-container">
-		<a class="non-text-anchor-element" href={`/recetas/${slugifiedRecipeTitle}`}>
+		<a class="text-color" href={`/recetas/${slugifiedRecipeTitle}`}>
 			<h2>{recipeTitle}</h2>
 		</a>
 		<SaveRecipeButton {recipeId} --iconWidth="32px" --mobileIconWidth="48px" />
diff --git a/src/lib/components/RecipesSearchForm.svelte b/src/lib/components/RecipesSearchForm.svelte
index a984793..2c8797a 100644
--- a/src/lib/components/RecipesSearchForm.svelte
+++ b/src/lib/components/RecipesSearchForm.svelte
@@ -98,7 +98,7 @@
 		<Button {loading} onClick={onButtonClick} type="submit">Buscar</Button>
 	{:else}
 		<a
-			class="non-text-anchor-element"
+			class="text-color"
 			href={buildRecipesBrowserUrl({
 				name: $recipes.name,
 				ingredients: $recipes.ingredients,
diff --git a/src/sass/utilities.scss b/src/sass/utilities.scss
index 3a1d375..edeb678 100644
--- a/src/sass/utilities.scss
+++ b/src/sass/utilities.scss
@@ -106,9 +106,8 @@
 	}
 }
 
-.non-text-anchor-element {
+.text-color {
 	color: var(--text);
-	text-decoration: none;
 }
 
 .object-fit-cover {