diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index 970b9b5..7a4dc30 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -25,7 +25,7 @@ const BlogPage = async (): Promise<JSX.Element> => {
   return (
     <main className="flex flex-1 flex-col flex-wrap items-center">
       <div className="mt-10 flex flex-col items-center">
-        <h1 className="text-4xl font-semibold text-yellow dark:text-yellow-dark">
+        <h1 className="text-4xl font-semibold text-primary dark:text-primary-dark">
           Blog
         </h1>
         <p className="mt-6 text-center" data-cy="blog-post-date">
diff --git a/app/error.tsx b/app/error.tsx
index caa3643..ae26055 100644
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -18,7 +18,7 @@ const ErrorHandling = (props: ErrorHandlingProps): JSX.Element => {
       <h1 className="my-6 text-4xl font-semibold">
         Error{" "}
         <span
-          className="text-yellow dark:text-yellow-dark"
+          className="text-primary dark:text-primary-dark"
           data-cy="status-code"
         >
           500
diff --git a/app/globals.css b/app/globals.css
index 0bc2cb3..b5ba6b8 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -29,7 +29,7 @@
 
 .prose a,
 .prose strong {
-  @apply !font-semibold text-yellow dark:text-yellow-dark;
+  @apply !font-semibold text-primary dark:text-primary-dark;
 }
 
 strong,
diff --git a/app/not-found.tsx b/app/not-found.tsx
index 552f010..eb00c49 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -10,7 +10,7 @@ const NotFound = (): JSX.Element => {
       <h1 className="my-6 text-4xl font-semibold">
         {i18n.translate("errors.error")}{" "}
         <span
-          className="text-yellow dark:text-yellow-dark"
+          className="text-primary dark:text-primary-dark"
           data-cy="status-code"
         >
           404
@@ -20,7 +20,7 @@ const NotFound = (): JSX.Element => {
         {i18n.translate("errors.not-found")}{" "}
         <Link
           href="/"
-          className="text-yellow hover:underline dark:text-yellow-dark"
+          className="text-primary hover:underline dark:text-primary-dark"
         >
           {i18n.translate("errors.return-to-home-page")}
         </Link>
diff --git a/blog/BlogPost.tsx b/blog/BlogPost.tsx
index c4715db..d629e62 100644
--- a/blog/BlogPost.tsx
+++ b/blog/BlogPost.tsx
@@ -21,7 +21,7 @@ export const BlogPost = async (props: BlogPostProps): Promise<JSX.Element> => {
   return (
     <main className="break-wrap-words flex flex-1 flex-col flex-wrap items-center justify-center">
       <div className="my-10 flex flex-col items-center text-center">
-        <h1 className="text-3xl font-semibold text-yellow dark:text-yellow-dark">
+        <h1 className="text-3xl font-semibold text-primary dark:text-primary-dark">
           {blogPost.frontmatter.title}
         </h1>
         <p className="mt-2" data-cy="blog-post-date">
diff --git a/blog/BlogPosts.tsx b/blog/BlogPosts.tsx
index e4a8b6a..47847ac 100644
--- a/blog/BlogPosts.tsx
+++ b/blog/BlogPosts.tsx
@@ -25,7 +25,7 @@ export const BlogPosts = async (): Promise<JSX.Element> => {
               <ShadowContainer className="cursor-pointer p-6 transition duration-200 ease-in-out hover:-translate-y-2">
                 <h2
                   data-cy="blog-post-title"
-                  className="text-xl font-semibold text-yellow dark:text-yellow-dark"
+                  className="text-xl font-semibold text-primary dark:text-primary-dark"
                 >
                   {post.frontmatter.title}
                 </h2>
diff --git a/components/Footer/FooterText.tsx b/components/Footer/FooterText.tsx
index 511273c..f012d7a 100644
--- a/components/Footer/FooterText.tsx
+++ b/components/Footer/FooterText.tsx
@@ -9,7 +9,7 @@ export const FooterText = (): JSX.Element => {
     <p>
       <Link
         href="/"
-        className="font-semibold text-yellow hover:underline dark:text-yellow-dark"
+        className="font-semibold text-primary hover:underline dark:text-primary-dark"
       >
         Théo LUDWIG
       </Link>{" "}
diff --git a/components/Footer/FooterVersion.tsx b/components/Footer/FooterVersion.tsx
index 53541f3..b2276e4 100644
--- a/components/Footer/FooterVersion.tsx
+++ b/components/Footer/FooterVersion.tsx
@@ -16,7 +16,7 @@ export const FooterVersion = (props: FooterVersionProps): JSX.Element => {
       Version{" "}
       <a
         data-cy="version-link"
-        className="font-semibold text-yellow hover:underline dark:text-yellow-dark"
+        className="font-semibold text-primary hover:underline dark:text-primary-dark"
         href={versionLink}
         target="_blank"
         rel="noopener noreferrer"
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index cb1bab9..aab06ae 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -23,7 +23,7 @@ export const Header = (): JSX.Element => {
             alt="Théo LUDWIG"
             priority
           />
-          <strong className="ml-1 hidden font-headline font-semibold text-yellow dark:text-yellow-dark sm:block sm:text-xl">
+          <strong className="ml-1 hidden font-headline font-semibold text-primary dark:text-primary-dark sm:block sm:text-xl">
             Théo LUDWIG
           </strong>
         </h1>
@@ -33,7 +33,7 @@ export const Header = (): JSX.Element => {
           <Link
             href="/blog"
             data-cy="header-blog-link"
-            className="font-semibold text-yellow hover:underline dark:text-yellow-dark"
+            className="font-semibold text-primary hover:underline dark:text-primary-dark"
           >
             Blog
           </Link>
diff --git a/components/Interests/InterestParagraph.tsx b/components/Interests/InterestParagraph.tsx
index 5cc0830..b60b6a2 100644
--- a/components/Interests/InterestParagraph.tsx
+++ b/components/Interests/InterestParagraph.tsx
@@ -22,7 +22,7 @@ export const InterestParagraph = (
   return (
     <>
       <p className="my-6 text-center text-gray dark:text-gray-dark">
-        <strong className="text-lg font-semibold text-yellow dark:text-yellow-dark">
+        <strong className="text-lg font-semibold text-primary dark:text-primary-dark">
           {title}
         </strong>
         <br />
diff --git a/components/Interests/InterestsList/InterestItem.tsx b/components/Interests/InterestsList/InterestItem.tsx
index 09a9789..6174047 100644
--- a/components/Interests/InterestsList/InterestItem.tsx
+++ b/components/Interests/InterestsList/InterestItem.tsx
@@ -12,7 +12,7 @@ export const InterestItem = (props: InterestItemProps): JSX.Element => {
   return (
     <li className="m-2 size-8" title={title}>
       <FontAwesomeIcon
-        className="block size-full text-yellow dark:text-yellow-dark"
+        className="block size-full text-primary dark:text-primary-dark"
         icon={fontAwesomeIcon}
       />
     </li>
diff --git a/components/OpenSource/Repository.tsx b/components/OpenSource/Repository.tsx
index b282b9b..aed7816 100644
--- a/components/OpenSource/Repository.tsx
+++ b/components/OpenSource/Repository.tsx
@@ -15,7 +15,7 @@ export const Repository = (props: RepositoryProps): JSX.Element => {
       <a href={href} target="_blank" rel="noopener noreferrer">
         <div className="flex">
           <GitHubIcon className="mr-2 h-6" />
-          <span className="font-semibold text-yellow dark:text-yellow-dark">
+          <span className="font-semibold text-primary dark:text-primary-dark">
             {name}
           </span>
         </div>
diff --git a/components/Portfolio/PortfolioItem.tsx b/components/Portfolio/PortfolioItem.tsx
index d1fbceb..2da7cbc 100644
--- a/components/Portfolio/PortfolioItem.tsx
+++ b/components/Portfolio/PortfolioItem.tsx
@@ -32,7 +32,7 @@ export const PortfolioItem = (props: PortfolioItemProps): JSX.Element => {
           />
         </div>
         <div className="absolute bottom-0 h-auto overflow-hidden text-center opacity-0 transition-opacity duration-500 group-hover:opacity-100">
-          <h3 className="my-6 text-2xl font-semibold text-yellow dark:text-yellow-dark">
+          <h3 className="my-6 text-2xl font-semibold text-primary dark:text-primary-dark">
             {title}
           </h3>
           <p className="mx-4 my-6 font-semibold">{description}</p>
diff --git a/components/Profile/ProfileDescriptionBottom.tsx b/components/Profile/ProfileDescriptionBottom.tsx
index 41d39fb..4dcf3bc 100644
--- a/components/Profile/ProfileDescriptionBottom.tsx
+++ b/components/Profile/ProfileDescriptionBottom.tsx
@@ -12,7 +12,7 @@ export const ProfileDescriptionBottom = (): JSX.Element => {
       <br />
       <a
         href="/curriculum-vitae/index.html"
-        className="font-semibold text-yellow hover:underline dark:text-yellow-dark"
+        className="font-semibold text-primary hover:underline dark:text-primary-dark"
       >
         Curriculum vitæ ({i18n.translate("common.fr-FR")})
       </a>
diff --git a/components/Profile/ProfileInfo.tsx b/components/Profile/ProfileInfo.tsx
index 7bd4cff..97e90d7 100644
--- a/components/Profile/ProfileInfo.tsx
+++ b/components/Profile/ProfileInfo.tsx
@@ -5,7 +5,7 @@ export const ProfileInformation = (): JSX.Element => {
 
   return (
     <div className="mb-6 border-b-2 border-gray-600 pb-2 font-headline dark:border-gray-400">
-      <h1 className="mb-2 text-4xl font-semibold text-yellow dark:text-yellow-dark">
+      <h1 className="mb-2 text-4xl font-semibold text-primary dark:text-primary-dark">
         Théo LUDWIG
       </h1>
       <h2 className="mb-3 text-base">
diff --git a/components/Skills/Skill.tsx b/components/Skills/Skill.tsx
index 1637923..dd4b9e5 100644
--- a/components/Skills/Skill.tsx
+++ b/components/Skills/Skill.tsx
@@ -29,7 +29,7 @@ export const SkillComponent = (props: SkillComponentProps): JSX.Element => {
   return (
     <a
       href={skillProperties.link}
-      className="mx-2 max-w-xl text-yellow hover:underline dark:text-yellow-dark"
+      className="mx-2 max-w-xl text-primary hover:underline dark:text-primary-dark"
       target="_blank"
       rel="noopener noreferrer"
     >
diff --git a/components/Skills/SkillsSection.tsx b/components/Skills/SkillsSection.tsx
index a78ccd9..6773ade 100644
--- a/components/Skills/SkillsSection.tsx
+++ b/components/Skills/SkillsSection.tsx
@@ -14,7 +14,7 @@ export const SkillsSection = (props: SkillsSectionProps): JSX.Element => {
         <div className="flex flex-wrap px-4 py-6">
           <div className="flex-1">
             <div className="mb-8 border-b border-gray-600 dark:border-white/10">
-              <h3 className="my-3 text-xl font-semibold text-yellow dark:text-yellow-dark">
+              <h3 className="my-3 text-xl font-semibold text-primary dark:text-primary-dark">
                 {title}
               </h3>
             </div>
diff --git a/components/design/Loader.tsx b/components/design/Loader.tsx
index cc04e6c..896f804 100644
--- a/components/design/Loader.tsx
+++ b/components/design/Loader.tsx
@@ -16,7 +16,7 @@ export const Loader = (props: LoaderProps): JSX.Element => {
         height,
       }}
       className={classNames(
-        "inline-block animate-spin rounded-full border-[3px] border-current border-t-transparent text-yellow dark:text-yellow-dark",
+        "inline-block animate-spin rounded-full border-[3px] border-current border-t-transparent text-primary dark:text-primary-dark",
         className,
       )}
       role="status"
diff --git a/components/design/Section/SectionHeading.tsx b/components/design/Section/SectionHeading.tsx
index 4952623..1dc5fc8 100644
--- a/components/design/Section/SectionHeading.tsx
+++ b/components/design/Section/SectionHeading.tsx
@@ -6,7 +6,7 @@ export const SectionHeading = (props: SectionHeadingProps): JSX.Element => {
   return (
     <h2
       {...rest}
-      className="mb-3 mt-1 text-center text-4xl font-semibold text-yellow dark:text-yellow-dark"
+      className="mb-3 mt-1 text-center text-4xl font-semibold text-primary dark:text-primary-dark"
     >
       {children}
     </h2>
diff --git a/i18n/translations/en-US/home.json b/i18n/translations/en-US/home.json
index 1e80269..73390e7 100644
--- a/i18n/translations/en-US/home.json
+++ b/i18n/translations/en-US/home.json
@@ -18,7 +18,7 @@
       },
       {
         "title": "Open-Source Enthusiast",
-        "description": "I value the <strong>sharing of knowledge and collaboration</strong> to collectively resolve problems. <br /> The source code of the website is available on <a class='text-yellow dark:text-yellow-dark hover:underline font-semibold' href='https://github.com/theoludwig/theoludwig' target='_blank' rel='noopener noreferrer'>GitHub</a>.",
+        "description": "I value the <strong>sharing of knowledge and collaboration</strong> to collectively resolve problems. <br /> The source code of the website is available on <a class='text-primary dark:text-primary-dark hover:underline font-semibold' href='https://github.com/theoludwig/theoludwig' target='_blank' rel='noopener noreferrer'>GitHub</a>.",
         "id": "open-source"
       }
     ]
diff --git a/i18n/translations/fr-FR/home.json b/i18n/translations/fr-FR/home.json
index eec23e1..2fc9550 100644
--- a/i18n/translations/fr-FR/home.json
+++ b/i18n/translations/fr-FR/home.json
@@ -18,7 +18,7 @@
       },
       {
         "title": "Enthousiaste de l'Open-Source",
-        "description": "J'apprécie le <strong>partage des connaissances et la collaboration</strong> pour résoudre des défis collectivement. <br /> Le code source du site est accessible sur <a class='text-yellow dark:text-yellow-dark hover:underline font-semibold' href='https://github.com/theoludwig/theoludwig' target='_blank' rel='noopener noreferrer'>GitHub</a>.",
+        "description": "J'apprécie le <strong>partage des connaissances et la collaboration</strong> pour résoudre des défis collectivement. <br /> Le code source du site est accessible sur <a class='text-primary dark:text-primary-dark hover:underline font-semibold' href='https://github.com/theoludwig/theoludwig' target='_blank' rel='noopener noreferrer'>GitHub</a>.",
         "id": "open-source"
       }
     ]
diff --git a/tailwind.config.js b/tailwind.config.js
index 70a1d6b..b4856e2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,7 +14,7 @@ const tailwindConfig = {
           DEFAULT: "#333333",
           dark: "#b7c0c9",
         },
-        yellow: {
+        primary: {
           DEFAULT: "#006cff",
           dark: "#00aeff",
         },