diff --git a/src/components/apps/appCard.astro b/src/components/apps/appCard.astro
index d4928bf5..065e4941 100644
--- a/src/components/apps/appCard.astro
+++ b/src/components/apps/appCard.astro
@@ -8,7 +8,7 @@ const {
   subtitle,
   logo,
   categories,
-  classes = "inline-flex items-center w-full p-5 text-gray-500 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700",
+  classes = "inline-flex items-center w-full p-5 text-gray-500 bg-white border border-gray-300 rounded-lg dark:bg-gray-800 dark:border-gray-700",
 } = Astro.props;
 ---
 
diff --git a/src/components/blogCard.astro b/src/components/blogCard.astro
index 84498a8d..3c34cd03 100644
--- a/src/components/blogCard.astro
+++ b/src/components/blogCard.astro
@@ -21,7 +21,7 @@ const display_date = dayjs(post.data.pubDate).format("D MMM. YYYY");
 let imgLoading = index === 0 || index === 1 ? "eager" : "lazy";
 ---
 
-<div class="bg-white border border-gray-200 rounded-lg mb-5 dark:bg-gray-800 dark:border-gray-700 w-full">
+<div class="bg-white border border-gray-300 rounded-lg mb-5 dark:bg-gray-800 dark:border-gray-700 w-full">
   <a href={"/publicaciones/" + post.slug}>
     {
       post.data.image && (
diff --git a/src/components/eventCard.astro b/src/components/eventCard.astro
index 32b8fffe..c929ec21 100644
--- a/src/components/eventCard.astro
+++ b/src/components/eventCard.astro
@@ -19,7 +19,7 @@ if (!event.data.image){
 
 <a
   href={"/eventos/" + event.slug}
-  class="bg-white border border-gray-200 rounded-lg mb-5 dark:bg-gray-800 dark:border-gray-700 w-full"
+  class="bg-white border border-gray-300 rounded-lg mb-5 dark:bg-gray-800 dark:border-gray-700 w-full"
 >
   <div>
     {
diff --git a/src/components/footer.astro b/src/components/footer.astro
index d871eba5..738ec54c 100644
--- a/src/components/footer.astro
+++ b/src/components/footer.astro
@@ -4,7 +4,7 @@ import CucodersLogo from "./ui/cucodersLogo.astro";
 ---
 
 <footer
-  class="hidden sm:block p-4 mt-8 bg-white border border-x-0 shadow md:px-6 md:py-8 dark:bg-gray-900 dark:border-gray-700"
+  class="hidden sm:block p-4 mt-8 bg-white border border-gray-300 border-x-0 shadow md:px-6 md:py-8 dark:bg-gray-900 dark:border-gray-700"
 >
   <nav class="flex items-center justify-center flex-col container mx-auto">
     <a href="/" class="flex items-center mb-6 dar:text-white">
@@ -44,7 +44,7 @@ import CucodersLogo from "./ui/cucodersLogo.astro";
       </li>
     </ul>
   </nav>
-  <hr class="my-5 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-6" />
+  <hr class="my-5 border-gray-300 sm:mx-auto dark:border-gray-700 lg:my-6" />
   <span class="block text-sm text-gray-500 text-center dark:text-gray-400">© 2023 CuCoders. Hecho con ❤️ en Cuba 🇨🇺</span>
 </footer>
 
diff --git a/src/components/forms/cardLink.astro b/src/components/forms/cardLink.astro
index 904ebc5c..eb21e785 100644
--- a/src/components/forms/cardLink.astro
+++ b/src/components/forms/cardLink.astro
@@ -7,7 +7,7 @@ const { url, title, subtitle, classes, id, target = "_self" } = Astro.props;
   href={url}
   target={target}
   class={classes +
-    " inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-blue-500 peer-checked:border-blue-600 peer-checked:text-blue-600 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700"}
+    " inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border border-gray-300 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-blue-500 peer-checked:border-blue-600 peer-checked:text-blue-600 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700"}
 >
   <div class="block">
     <div class="w-full text-lg font-semibold">{title}</div>
diff --git a/src/components/helpers/sideBar.js b/src/components/helpers/sideBar.js
index b93ef85a..f11140ec 100644
--- a/src/components/helpers/sideBar.js
+++ b/src/components/helpers/sideBar.js
@@ -1,6 +1,6 @@
 function getSidebarClasses(isSideMenu) {
   let sidebarClass =
-    "px-3 mb-5 py-4 overflow-y-auto rounded-md bg-white border-solid border-[1px] border-gray-200 dark:bg-gray-800 dark:border-gray-700";
+    "px-3 mb-5 py-4 overflow-y-auto rounded-md bg-white border-solid border-[1px] border-gray-300 dark:bg-gray-800 dark:border-gray-700";
   if (isSideMenu) sidebarClass = "mb-5 overflow-y-auto";
   return sidebarClass;
 }
diff --git a/src/components/jobs/jobCard.astro b/src/components/jobs/jobCard.astro
index d0de4ba6..d8811a0b 100644
--- a/src/components/jobs/jobCard.astro
+++ b/src/components/jobs/jobCard.astro
@@ -11,7 +11,7 @@ const locationLabel = job.location ? job.location : "Presencial";
 const display_date = dayjs(job.pubDate).format("DD/MM/YY");
 ---
 
-<div class="inline-grid items-center w-full p-4 pb-1 md:pb-2 text-gray-500 dark:text-gray-100 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+<div class="inline-grid items-center w-full p-4 pb-1 md:pb-2 text-gray-500 dark:text-gray-100 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg">
   <div class="ml-2 inline-grid">
     <a href={jobUrl} class="w-full text-base md:text:lg text-gray-800 dark:text-gray-300 font-semibold line-clamp-2 md:line-clamp-1"
       >{job.title}</a
diff --git a/src/components/navbar/navBar.astro b/src/components/navbar/navBar.astro
index a10f034c..7e7529b2 100644
--- a/src/components/navbar/navBar.astro
+++ b/src/components/navbar/navBar.astro
@@ -6,7 +6,7 @@ import AddMenu from "./addMenu.astro";
 ---
 
 <nav
-  class="bg-white/70 backdrop-blur-md px-2 sm:px-4 py-1.5 dark:bg-gray-900/70 fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600"
+  class="bg-gray-200 backdrop-blur-md px-2 sm:px-4 py-1.5 dark:bg-gray-900/70 fixed w-full z-20 top-0 left-0 border-b border-gray-300 dark:border-gray-600"
 >
   <div class="container flex flex-wrap items-center justify-between mx-auto px-4">
     {
diff --git a/src/components/profile/profileCard.astro b/src/components/profile/profileCard.astro
index d111f6c2..a3c1aa22 100644
--- a/src/components/profile/profileCard.astro
+++ b/src/components/profile/profileCard.astro
@@ -4,7 +4,7 @@ import LinkIcon from "../helpers/linkIcon.astro";
 const { profile } = Astro.props;
 ---
 
-<div class="w-full py-5 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
+<div class="w-full py-5 bg-white border border-gray-300 rounded-lg dark:bg-gray-800 dark:border-gray-700">
   <a href={"/dev/" + profile["username"]} class="flex flex-col items-center mb-3">
     <div class="relative">
       <img
diff --git a/src/components/profile/profileHeader.astro b/src/components/profile/profileHeader.astro
index 3359d39b..e9696481 100644
--- a/src/components/profile/profileHeader.astro
+++ b/src/components/profile/profileHeader.astro
@@ -11,7 +11,7 @@ let profileIconsSizeClasses = "md:w-5 md:h-5 w-6 h-6"
 let profileIconsPaddingClasses= "p-2"
 ---
 <div
-  class="bg-white border md:mx-auto mb-5 -mt-6 md:mt-12 lg:max-w-[58rem] border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 w-full"
+  class="bg-white border-gray-300 border md:mx-auto mb-5 -mt-6 md:mt-12 lg:max-w-[58rem] border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 w-full"
 >
   <div class="p-8 pt-14 md:py-8 md:px-15 lg:px-12">
     <div class="mb-5 flex justify-between">
diff --git a/src/components/resourceCard.astro b/src/components/resourceCard.astro
index 68b6a394..8eef5197 100644
--- a/src/components/resourceCard.astro
+++ b/src/components/resourceCard.astro
@@ -2,7 +2,7 @@
 const { url, name, description } = Astro.props;
 ---
 
-<a href={url} target="_blank" class="inline-flex items-center w-full py-3 px-5 text-gray-500 bg-white border border-gray-200 dark:text-gray-100 dark:bg-gray-800 dark:border-gray-700 rounded-lg">
+<a href={url} target="_blank" class="inline-flex items-center w-full py-3 px-5 text-gray-500 bg-white border border-gray-300 dark:text-gray-100 dark:bg-gray-800 dark:border-gray-700 rounded-lg">
   <div class="p-2 border md:mr-2 rounded-2xl bg-white dark:bg-gray-900 dark:border-gray-700 self-start">
     <img class="w-8 h-8 md:w-10 md:h-10 md:min-w-[2.5rem] min-w-[2rem] rounded-xl" src={`https://www.google.com/s2/favicons?domain=${url}&sz=64`} alt={name + " logo"} />
   </div>
diff --git a/src/components/sidebarComponents/promoCard.astro b/src/components/sidebarComponents/promoCard.astro
index 36999d1b..64218f6a 100644
--- a/src/components/sidebarComponents/promoCard.astro
+++ b/src/components/sidebarComponents/promoCard.astro
@@ -3,7 +3,7 @@ const { target = "_blank", id } = Astro.props;
 ---
 
 <div
-  class={"overflow-y-auto rounded-md mb-5 bg-white border-solid border-[1px] border-gray-200 dark:bg-gray-800 dark:border-gray-700 " +
+  class={"overflow-y-auto rounded-md mb-5 bg-white border-solid border-[1px] border-gray-300 dark:bg-gray-800 dark:border-gray-700 " +
     id}
 >
   <a href="#" target={target} class={id + "-link"}>
diff --git a/src/components/ui/breadcrumbContainer.astro b/src/components/ui/breadcrumbContainer.astro
index 76ebfa18..eded9de5 100644
--- a/src/components/ui/breadcrumbContainer.astro
+++ b/src/components/ui/breadcrumbContainer.astro
@@ -9,7 +9,7 @@ const { breadcrumbItems, btnLabel, btnUrl, btnIcon } = Astro.props;
     btnUrl && (
       <a
         href={btnUrl}
-        class="text-gray-800 border hidden md:inline-flex border-gray-200 focus:outline-none hover:bg-gray-100 rounded-md text-sm font-normal px-3 py-1.5 text-center justify-center items-center dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
+        class="text-gray-600 border bg-white hidden md:inline-flex border-gray-300 focus:outline-none hover:text-gray-800 font-semibold rounded-md text-sm font-normal px-3 py-1.5 text-center justify-center items-center dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
       >
         {btnIcon && <img src={btnIcon} class="w-5 h-5 mr-2 dark:invert dark:contrast-200 dark:saturate-0" alt={btnLabel} />}
         {btnLabel}
diff --git a/src/layouts/baseLayout.astro b/src/layouts/baseLayout.astro
index 390a5216..3639d24c 100644
--- a/src/layouts/baseLayout.astro
+++ b/src/layouts/baseLayout.astro
@@ -51,7 +51,7 @@ const {
     {seoSchema && <Schema item={seoSchema} />}
     <PageMetaTags title={title} description={description} image={image} />
   </head>
-  <body class="bg-gray-50 dark:bg-gray-900">
+  <body class="bg-gray-200 dark:bg-gray-900">
     <script>
       import topbar from "topbar";
       topbar.config({
diff --git a/src/layouts/profileLayout.astro b/src/layouts/profileLayout.astro
index e972bc55..36769762 100644
--- a/src/layouts/profileLayout.astro
+++ b/src/layouts/profileLayout.astro
@@ -10,7 +10,7 @@ const { profile, activeTab, pageTitle, noIndex = false } = Astro.props;
   <ProfileHeader profile={profile} />
 
   <div
-    class="bg-white border md:mx-auto mb-5 lg:max-w-[58rem] border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700 w-full"
+    class="bg-white border border-gray-300 md:mx-auto mb-5 lg:max-w-[58rem] border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700 w-full"
   >
     <ProfileTabs activeTab={activeTab} profile={profile} />
     <slot />