diff --git a/app/about/page.tsx b/app/about/page.tsx
index 0192ccd..6dcd0f9 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -34,7 +34,7 @@ export default function Resume() {
             </section>
 
             <section className="place-self-start mt-8 w-full">
-                <button onClick={() => setSkillsVisible(!skillsVisible)} className={"sticky top-[5.5rem] w-full flex items-center text-rose-500 dark:text-rose-300 uppercase tracking-wide list-none" + (skillsVisible ? " bg-slate-400 dark:bg-black" : "")}>
+                <button onClick={() => setSkillsVisible(!skillsVisible)} className={"sticky top-[5.5rem] w-full flex items-center px-4 rounded-lg text-rose-500 dark:text-rose-300 uppercase tracking-wide list-none" + (skillsVisible ? " bg-slate-400 dark:bg-black" : "")}>
                     <span className="font-light text-3xl leading-relaxed">Skills</span>
                     <RxChevronDown className={`ml-2 transition ${skillsVisible ? "rotate-180" : "rotate-0"}`} />
                 </button>
@@ -42,7 +42,7 @@ export default function Resume() {
             </section>
 
             <section className="place-self-start mt-8 w-full">
-                <button onClick={() => setExperienceVisible(!experienceVisible)} className={"sticky top-[5.5rem] w-full flex items-center text-rose-500 dark:text-rose-300 uppercase tracking-wide list-none" + (experienceVisible ? "bg-slate-400 dark:bg-black" : "")}>
+                <button onClick={() => setExperienceVisible(!experienceVisible)} className={"sticky top-[5.5rem] w-full flex items-center px-4 rounded-lg text-rose-500 dark:text-rose-300 uppercase tracking-wide list-none " + (experienceVisible ? "bg-slate-400 dark:bg-black" : "")}>
                     <span className="font-light text-3xl leading-relaxed">Experience</span>
                     <RxChevronDown className={`ml-2 transition ${experienceVisible ? "rotate-180" : "rotate-0"}`} />
                 </button>
@@ -50,7 +50,7 @@ export default function Resume() {
             </section>
 
             <section className="place-self-start mt-8 w-full">
-                <button onClick={() => setEducationVisible(!educationVisible)} className={"sticky top-[5.5rem] w-full flex items-center text-rose-300 uppercase tracking-wide list-none" + (educationVisible ? " bg-slate-400 dark:bg-black" : "")}>
+                <button onClick={() => setEducationVisible(!educationVisible)} className={"sticky top-[5.5rem] w-full flex items-center px-4 rounded-lg text-rose-500 dark:text-rose-300 uppercase tracking-wide list-none" + (educationVisible ? " bg-slate-400 dark:bg-black" : "")}>
                     <h2 className="font-light text-3xl leading-relaxed">Education</h2>
                     <RxChevronDown className={`ml-2 transition ${educationVisible ? "rotate-0" : "rotate-180"}`} />
                 </button>
@@ -69,7 +69,7 @@ export default function Resume() {
             </section>
 
             <section className="place-self-start mt-8 w-full">
-                <button onClick={() => setProjectsVisible(!projectsVisible)} className={"sticky top-[5.5rem] w-full flex items-center text-rose-300 uppercase tracking-wide list-none " + (projectsVisible ? " bg-slate-400 dark:bg-black" : "")}>
+                <button onClick={() => setProjectsVisible(!projectsVisible)} className={"sticky top-[5.5rem] w-full flex items-center px-4 rounded-lg text-rose-500 dark:text-rose-300 uppercase tracking-wide list-none " + (projectsVisible ? " bg-slate-400 dark:bg-black" : "")}>
                     <h2 className="font-light text-3xl leading-relaxed">Projects</h2>
                     <RxChevronDown className={`ml-2 transition ${projectsVisible ? "rotate-180" : "rotate-0"}`} />
                 </button>
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index ba219b8..8fa44b5 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -12,8 +12,8 @@ export default function ContactPage() {
     const characterCount = useMemo(() => message.length.toString(), [message]);
 
     return (
-        <div className="min-w-screen min-h-screen bg-gradient-to-b from-black to-darkPlum">
-            <div className="flex flex-col mx-24 items-center">
+        <div className="min-w-screen min-h-screen bg-gradient-to-b from-slate-300 to-purple-300 bg-opacity-40 dark:from-black dark:to-darkPlum">
+            <div className="flex flex-col mx-24 items-center dark:text-white ">
                 <h1 className="text-3xl my-8 place-self-start">Thanks for your interest! I&apos;m looking forward to hearing from you.</h1>
 
                 <form action={testMailerSDK} className="w-full">
@@ -32,7 +32,7 @@ export default function ContactPage() {
                     <div className="flex flex-col w-full mt-4">
                         <label htmlFor="message">Message</label>
                         <textarea required className="bg-neutral-100 px-1.5 py-1 text-black" value={message} onChange={(e) => setMessage(e.target.value)} name="message" id="message" cols={30} rows={5}></textarea>
-                        <p className={"text-sm " + (parseInt(characterCount) > MESSAGE_LIMIT ? "text-red-500" : "text-white")}>{characterCount}/{MESSAGE_LIMIT}</p>
+                        <p className={"text-sm " + (parseInt(characterCount) > MESSAGE_LIMIT ? "text-red-500" : "text-black dark:text-white")}>{characterCount}/{MESSAGE_LIMIT}</p>
                     </div>
 
                     <button disabled={parseInt(characterCount) > MESSAGE_LIMIT} className="p-2 px-8 mt-8 rounded-lg bg-rose-300 hover:bg-rose-400 text-black" type="submit">Send!</button>
diff --git a/app/links/page.tsx b/app/links/page.tsx
index 07db926..1c1d5da 100644
--- a/app/links/page.tsx
+++ b/app/links/page.tsx
@@ -25,10 +25,10 @@ export default function LinksPage() {
                 </Panel>
             </section>
 
-            <section id="social-media-gallery" className="w-3/5 my-12 flex flex-col items-center bg-black rounded">
-                <h1 className="text-3xl w-full my-8">...or on your favorite social media platform:</h1>
+            <section id="social-media-gallery" className="w-3/5 my-12 flex flex-col items-center bg-black text-white rounded">
+                <h1 className="text-3xl w-full text-center my-8">...or on your favorite social media platform:</h1>
 
-                <div className="flex flex-wrap">
+                <div className="flex justify-center w-full">
                     <SocialMedia
                         label="LinkedIn"
                         href="https://www.linkedin.com/in/mikayla-dobson"