diff --git a/src/app/page.tsx b/src/app/page.tsx
index 582976a..73df50e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,12 +1,78 @@
 import dynamic from "next/dynamic";
+import Image from "next/image";
 
+import Section from "@/components/Section";
 import { MainHeader } from "@/components/header";
+import certificates from "@/data/certifications";
+import degrees from "@/data/degrees";
+import skills from "@/data/skills";
+import type { Certification, Degree, Skill } from "@/types";
+import "@/types";
 
+const Intro = dynamic(() => import("@/components/intro"));
 const SocialMedia = dynamic(() => import("@/components/social"));
-const Intro = dynamic(() => import("@/sections/intro"));
-const Skills = dynamic(() => import("@/sections/skills"));
-const Certifications = dynamic(() => import("@/sections/certifications"));
-const Education = dynamic(() => import("@/sections/education"));
+
+const Skills = () => (
+  <Section id="skills" title="Technical Skills">
+    {Object.values(skills).map((skill: Skill) => (
+      <div
+        className="transition-all duration-700 section-item md:py-5 w-[120px] md:w-[150px]"
+        key={skill.name}
+      >
+        <p className="md:text-4xl text-2xl">{skill.icon}</p>
+        <p>{skill.name}</p>
+      </div>
+    ))}
+  </Section>
+);
+
+const Certifications = () => (
+  <Section id="certifications" title="Certifications">
+    {certificates.map((certificate: Certification) => (
+      <div className="transition-all duration-700" key={certificate.title}>
+        <a href={certificate.link} target="_blank">
+          <div className="section-item p-3 md:p-1">
+            <Image
+              src={certificate.badge}
+              alt={`Badge for ${certificate.title}`}
+              width={150}
+              height={150}
+            />
+            <p className="text-nowrap md:text-xl">{certificate.title}</p>
+            <p className="text-primary">{certificate.organization.name}</p>
+            <p className="text-secondary">{certificate.date}</p>
+          </div>
+        </a>
+      </div>
+    ))}
+  </Section>
+);
+
+const Degrees = () => (
+  <Section id="degrees" title="Education">
+    {degrees.map((degree: Degree) => (
+      <div className="transition-all duration-700 gap-6" key={degree.title}>
+        <a href={degree.university.url} target="_blank">
+          <div className="section-item">
+            <Image
+              src={degree.university.logo ?? ""}
+              alt={`${degree.university.name} logo`}
+              height={150}
+              width={150}
+            />
+            <p className="text-xl md:text-2xl text-foreground">
+              {degree.title}
+            </p>
+            <p className="dark:text-primary-dark text-primary">
+              {degree.university.name}
+            </p>
+            <p className="text-secondary">{degree.duration}</p>
+          </div>
+        </a>
+      </div>
+    ))}
+  </Section>
+);
 
 const Home = () => (
   <>
@@ -14,7 +80,7 @@ const Home = () => (
     <Intro />
     <Skills />
     <Certifications />
-    <Education />
+    <Degrees />
     <SocialMedia />
   </>
 );
diff --git a/src/sections/intro.jsx b/src/components/intro.jsx
similarity index 97%
rename from src/sections/intro.jsx
rename to src/components/intro.jsx
index 68619ca..1d663a5 100644
--- a/src/sections/intro.jsx
+++ b/src/components/intro.jsx
@@ -70,7 +70,7 @@ const Intro = () => {
             {/* Profile Name */}
             <p className="text-2xl md:text-4xl py-2 font-sans text-center text-nowrap">
               I&apos;m
-              <span className="text-primary dark:text-primary-dark">
+              <span className="text-primary">
                 {" a"}
                 <TypeAnimation
                   sequence={[
diff --git a/src/sections/certifications.tsx b/src/sections/certifications.tsx
deleted file mode 100644
index e41a073..0000000
--- a/src/sections/certifications.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import Image from "next/image";
-
-import Section from "@/components/Section";
-import certificates from "@/data/certifications";
-import { Certification } from "@/types";
-
-const Certifications = () => (
-  <Section id="certifications" title="Certifications">
-    {certificates.map((certificate: Certification) => (
-      <div className="transition-all duration-700" key={certificate.title}>
-        <a href={certificate.link} target="_blank">
-          <div className="section-item p-3 md:p-1">
-            <Image
-              src={certificate.badge}
-              alt={`Badge for ${certificate.title}`}
-              width={150}
-              height={150}
-            />
-            <p className="text-nowrap text-xl text-secondary-600">
-              {certificate.title}
-            </p>
-            <p className="text-primary dark:text-primary-dark">
-              {certificate.organization.name}
-            </p>
-            <p className="dark:text-zinc-400 text-zinc-600">
-              {certificate.date}
-            </p>
-          </div>
-        </a>
-      </div>
-    ))}
-  </Section>
-);
-
-export default Certifications;
diff --git a/src/sections/education.tsx b/src/sections/education.tsx
deleted file mode 100644
index 6fe8932..0000000
--- a/src/sections/education.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import Image from "next/image";
-
-import Section from "@/components/Section";
-import degrees from "@/data/degrees";
-import { Degree } from "@/types";
-
-const Education = () => (
-  <Section id="degrees" title="Education">
-    {degrees.map((degree: Degree) => (
-      <div className="transition-all duration-700 gap-6" key={degree.title}>
-        <a href={degree.university.url} target="_blank">
-          <div className="section-item">
-            <Image
-              src={degree.university.logo ?? ""}
-              alt={`${degree.university.name} logo`}
-              height={150}
-              width={150}
-            />
-            <p className="text-xl md:text-2xl text-secondary-600">
-              {degree.title}
-            </p>
-            <p className="dark:text-primary-dark text-primary">
-              {degree.university.name}
-            </p>
-            <p className="dark:text-zinc-400 text-zinc-600">
-              {degree.duration}
-            </p>
-          </div>
-        </a>
-      </div>
-    ))}
-  </Section>
-);
-
-export default Education;
diff --git a/src/sections/skills.tsx b/src/sections/skills.tsx
deleted file mode 100644
index cfe2a3b..0000000
--- a/src/sections/skills.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import Section from "@/components/Section";
-import skills from "@/data/skills";
-import { Skill } from "@/types";
-
-const Skills = () => (
-  <Section id="skills" title="Technical Skills">
-    {Object.values(skills).map((skill: Skill) => (
-      <div
-        className="transition-all duration-700 section-item md:py-5 w-[120px] md:w-[150px]"
-        key={skill.name}
-      >
-        <p className="md:text-4xl text-2xl">{skill.icon}</p>
-        <p>{skill.name}</p>
-      </div>
-    ))}
-  </Section>
-);
-
-export default Skills;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index ae36826..cff1f53 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,4 +1,5 @@
 import type { Config } from "tailwindcss";
+import colors from "tailwindcss/colors";
 
 import { nextui } from "@nextui-org/react";
 
@@ -14,14 +15,18 @@ const config: Config = {
       themes: {
         dark: {
           colors: {
-            primary: "#07d0e5",
-            secondary: "#333333",
+            primary: colors.indigo[300],
+            secondary: colors.zinc[400],
+            foreground: colors.slate[400],
+            background: colors.slate[950],
           },
         },
         light: {
           colors: {
-            primary: "#006994",
-            secondary: "#f7f7f7",
+            primary: colors.indigo[600],
+            secondary: colors.zinc[600],
+            foreground: colors.slate[600],
+            background: colors.white,
           },
         },
       },