diff --git a/src/components/Catalogo.tsx b/src/components/Catalogo.tsx
index 2fb3265..6b2b2af 100644
--- a/src/components/Catalogo.tsx
+++ b/src/components/Catalogo.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Search } from 'lucide-react'
@@ -22,14 +23,14 @@ export function Catalogo() {
   return (
     <section className="py-16">
       <div className="container mx-auto px-4">
-        <h2 className="text-3xl font-bold mb-8 text-center">Nuestros cursos</h2>
+        <h2 className="font-title text-3xl font-bold mb-8 text-center">Nuestros cursos</h2>
         {/* Filter and Search */}
-        <div className="flex flex-col sm:flex-row justify-between items-center mb-8 space-y-4 sm:space-y-0">
+        <div className="flex flex-col justify-between items-center mb-8 space-y-4">
           <Select value={selectedCategory} onValueChange={setSelectedCategory}>
-            <SelectTrigger className="w-full sm:w-[180px]">
-              <SelectValue placeholder="Select Category" />
+            <SelectTrigger className="font-body w-full sm:w-[300px]">
+              <SelectValue placeholder="Seleccionar categoría" />
             </SelectTrigger>
-            <SelectContent>
+            <SelectContent className="font-body">
               {categories.map(category => (
                 <SelectItem key={category} value={category}>{category}</SelectItem>
               ))}
@@ -42,7 +43,7 @@ export function Catalogo() {
               placeholder="Buscar cursos..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="pl-10 w-full sm:w-[300px]"
+              className="font-body pl-10 w-full sm:w-[300px]"
             />
           </div>
         </div>
@@ -50,16 +51,16 @@ export function Catalogo() {
         {/* Course Grid */}
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
           {filteredCourses.map((course, index) => (
-            <Card key={index}>
+            <Card key={index} className="drop-shadow-sm hover:drop-shadow-lg">
               <CardHeader>
                 <img src={`/images/${course.imagen}`} alt={course.titulo} className="w-full h-48 object-cover rounded-t-lg" />
               </CardHeader>
               <CardContent>
-                <CardTitle>{course.titulo}</CardTitle>
-                <p className="text-sm text-gray-500">{course.categoria}</p>
+                <CardTitle className="font-title">{course.titulo}</CardTitle>
+                <Badge variant="outline" className="text-primary-normal font-body font-thin">{course.categoria}</Badge>
               </CardContent>
               <CardFooter>
-                <Button className="w-full" asChild>
+                <Button className="w-40 mx-auto" asChild>
                   <a href={`/cursos/${course.slug}`}>Ver más</a>
                 </Button>
               </CardFooter>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 4c61394..53acf7c 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 ---
 
-<footer class="bg-gray-800 text-white py-8">
+<footer class="bg-slate-50 text-gray-900 py-8">
   <div class="container mx-auto px-4">
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
       <div></div>
@@ -25,18 +25,10 @@ import { Input } from "@/components/ui/input";
     </div> -->
       <div class="mt-8 pt-4 border-t border-gray-700 text-center text-sm">
         Administrado por el <a
-          hover:text-green-100
+          class="text-[#00DA77] hover:underline"
           href="https://labtecnosocial.org/">Lab TecnoSocial</a
         >, {new Date().getFullYear()}
       </div>
     </div>
   </div>
-  <style>
-    footer {
-      padding: 2em 1em 6em 1em;
-      background: linear-gradient(var(--gray-gradient)) no-repeat;
-      color: rgb(var(--gray));
-      text-align: center;
-    }
-  </style>
 </footer>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index eac6974..2c8df25 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,11 +3,11 @@ import HeaderLink from "./HeaderLink.astro";
 import { SITE_TITLE } from "../consts";
 ---
 
-<header class="bg-white border-b">
+<header class="bg-slate-50 border-b">
   <div class="container mx-auto px-4 py-4 flex justify-between items-center">
     <a href="/" class="flex items-center space-x-2">
       <img src="/images/logo.png" width="40px" />
-      <span class="text-xl font-bold">{SITE_TITLE}</span>
+      <span class="font-title text-xl font-bold">{SITE_TITLE}</span>
     </a>
     <nav></nav>
   </div>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 7bbf14f..a07266f 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -4,8 +4,8 @@ import { SITE_DESCRIPTION, SITE_TITLE } from "@/consts";
 
 <section class="bg-gray-100 py-20 sm:py-40" id="hero">
     <div class="container mx-auto px-4 text-center">
-        <h1 class="text-4xl font-bold mb-4">{SITE_TITLE}</h1>
-        <p class="text-xl mb-8">{SITE_DESCRIPTION}</p>
+        <h1 class="font-title text-4xl font-bold mb-4">{SITE_TITLE}</h1>
+        <p class="font-body text-xl mb-8">{SITE_DESCRIPTION}</p>
     </div>
 </section>
 
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index 120c5b5..7353de1 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -14,7 +14,7 @@ const badgeVariants = cva(
           "border-transparent bg-zinc-100 text-zinc-900 hover:bg-zinc-100/80 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80",
         destructive:
           "border-transparent bg-red-500 text-zinc-50 shadow hover:bg-red-500/80 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/80",
-        outline: "text-zinc-950 dark:text-zinc-50",
+        outline: "text-zinc-950 dark:text-zinc-50 border-primary-normal",
       },
     },
     defaultVariants: {
@@ -25,7 +25,7 @@ const badgeVariants = cva(
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+  VariantProps<typeof badgeVariants> { }
 
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
index 6247b42..dcc548c 100644
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@@ -25,6 +25,14 @@ const { titulo, descripcion, imagen } = Astro.props;
         <!-- Canonical URL -->
         <link rel="canonical" href={canonicalURL} />
 
+        <!-- Fonts -->
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Inria+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"
+            rel="stylesheet"
+        />
+
         <!-- Primary Meta Tags -->
         <title>{titulo}</title>
         <meta name="title" content={titulo} />
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 623dfdd..0ac528f 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -15,8 +15,12 @@ export default {
 					normal: '#5400d8',
 					dark: '#4602b0',
 				},
+			},
+			fontFamily: {
+				title: ['Roboto Mono', 'sans-serif'],
+				body: ['Inria Sans', 'sans-serif'],
 			}
-		}
+		},
 	},
 	plugins: [require("tailwindcss-animate")],
 }