diff --git a/app/about/page.tsx b/app/about/page.tsx
index 5724fec..0192ccd 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -5,6 +5,7 @@ import { Experience, Projects, Skills } from "../../components/Resume";
 import { RxChevronDown } from "react-icons/rx";
 import { useState } from "react";
 import { FaGithub, FaLinkedin } from "react-icons/fa";
+import Card from "@/components/ui/Card";
 
 export default function Resume() {
     const [skillsVisible, setSkillsVisible] = useState(true);
@@ -13,27 +14,27 @@ export default function Resume() {
     const [projectsVisible, setProjectsVisible] = useState(true);
 
     return (
-        <div className="min-h-screen bg-gradient-to-b from-black to-slate-950 bg-fixed flex flex-col items-center p-4 z-10">
+        <div className="min-h-screen bg-gradient-to-b from-slate-300 to-blue-100 dark:from-black dark:to-slate-900 bg-fixed flex flex-col items-center p-4 z-10">
             <section className="w-full pb-4">
-                <h1 className="uppercase text-4xl text-rose-300 tracking-wide leading-relaxed font-light">Mikayla Dobson</h1>
-                <h2 className="text-2xl tracking-wide font-light">Software Engineer | Nashville, TN</h2>
+                <h1 className="uppercase text-4xl text-rose-600 dark:text-rose-300 tracking-wide leading-relaxed font-light">Mikayla Dobson</h1>
+                <h2 className="text-2xl tracking-wide font-light dark:text-rose-100">Software Engineer | Nashville, TN</h2>
 
                 <div className="hidden bg-slate-950"></div>
 
-                <div className="flex items-center pt-2">
+                <div className="flex items-center pt-2 dark:text-rose-100">
                     <p className="mr-2">Download a copy for later?</p>
-                    <a download href="/resume/Mikayla Resume 0623.pdf" target="_blank" referrerPolicy="no-referrer" rel="noopener" className="mr-2 cursor-pointer hover:text-sky-300 active:text-white bg-slate-800 p-1 rounded-lg">.pdf</a>
-                    <a download href="/resume/Mikayla Resume 0623.docx" target="_blank" referrerPolicy="no-referrer" rel="noopener" className="mr-2 cursor-pointer hover:text-sky-300 active:text-white bg-slate-800 p-1 rounded-lg">.docx</a>
+                    <a download href="/resume/Mikayla Resume 0623.pdf" target="_blank" referrerPolicy="no-referrer" rel="noopener" className="mr-2 cursor-pointer hover:text-sky-300 active:text-white bg-slate-500 dark:bg-slate-800 py-1 px-1.5 rounded-lg">.pdf</a>
+                    <a download href="/resume/Mikayla Resume 0623.docx" target="_blank" referrerPolicy="no-referrer" rel="noopener" className="mr-2 cursor-pointer hover:text-sky-300 active:text-white bg-slate-500 dark:bg-slate-800 py-1 px-1.5 rounded-lg">.docx</a>
                 </div>
 
                 <div className="flex pt-2">
-                    <Link passHref className="flex items-center mr-8 hover:text-sky-300 active:text-white" href="https://github.com/innocuous-symmetry"><FaGithub className="mr-2" />innocuous-symmetry</Link>
-                    <Link passHref className="flex items-center mr-8 hover:text-sky-300 active:text-white" href="https://linkedin.com/in/mikayla-dobson"><FaLinkedin className="mr-2" />mikayla-dobson</Link>
+                    <Link passHref className="flex items-center dark:text-white mr-8 hover:text-sky-300 active:text-white" href="https://github.com/innocuous-symmetry"><FaGithub className="mr-2" />innocuous-symmetry</Link>
+                    <Link passHref className="flex items-center dark:text-white mr-8 hover:text-sky-300 active:text-white" href="https://linkedin.com/in/mikayla-dobson"><FaLinkedin className="mr-2" />mikayla-dobson</Link>
                 </div>
             </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-300 uppercase tracking-wide list-none" + (skillsVisible ? " bg-black" : "")}>
+                <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" : "")}>
                     <span className="font-light text-3xl leading-relaxed">Skills</span>
                     <RxChevronDown className={`ml-2 transition ${skillsVisible ? "rotate-180" : "rotate-0"}`} />
                 </button>
@@ -41,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 bg-black flex items-center text-rose-300 uppercase tracking-wide list-none">
+                <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" : "")}>
                     <span className="font-light text-3xl leading-relaxed">Experience</span>
                     <RxChevronDown className={`ml-2 transition ${experienceVisible ? "rotate-180" : "rotate-0"}`} />
                 </button>
@@ -49,26 +50,26 @@ 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-black" : "")}>
+                <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" : "")}>
                     <h2 className="font-light text-3xl leading-relaxed">Education</h2>
                     <RxChevronDown className={`ml-2 transition ${educationVisible ? "rotate-0" : "rotate-180"}`} />
                 </button>
 
                 {
                     educationVisible ? (
-                        <article className={(educationVisible ? "h-auto my-4 opacity-100 bg-black" : "h-0 opacity-0 my-0") + " transition duration-500  bg-opacity-40 shadow shadow-black p-3 rounded-lg"}>
+                        <Card>
                             <h3 className="uppercase text-2xl text-rose-600">Southern Methodist University</h3>
                             <p className="font-light italic text-rose-300">Dallas, TX - B.A. Music</p>
                             <div className="h-[1px] w-full my-3 bg-rose-300" />
 
-                            <p className="leading-relaxed font-light">Concentrations in Piano Performance and Music Composition. Special focus on orchestral composition and arranging. Minor in French Language and Culture.</p>
-                        </article>
+                            <p className="dark:text-white leading-relaxed font-light">Concentrations in Piano Performance and Music Composition. Special focus on orchestral composition and arranging. Minor in French Language and Culture.</p>
+                        </Card>
                     ) : null
                 }
             </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-black" : "")}>
+                <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" : "")}>
                     <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/content.mdx b/app/content.mdx
deleted file mode 100644
index e82c304..0000000
--- a/app/content.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-# Mikayla Dobson | Software Engineer
-
-Software design at the confluence of efficiency, ingenuity, and artistry.
-
-## Why do you want me on your team?
-
-Here are some things I've provided for my teams in the past:
-
-### Connecting the dots
-
-My strength lies in the big picture. My background as a composer of classical music has given me a lasting sense for how to assemble the pieces of a project into a cohesive whole.
-
-As a software engineer, this means:
-
-- I'm comfortable living in the world between the front-end and back-end
-- I love solving emergent problems as a project's stack is expanding
-
----
-
-## Want to know more?
-
-You're in the right place! This site is the best place to learn about the work I've done, what I know, and what I've
-done with the knowledge I have.
diff --git a/app/globals.css b/app/globals.css
index fd81e88..b5c61c9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,27 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
diff --git a/app/layout.tsx b/app/layout.tsx
index 51f896a..59e4336 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -18,7 +18,7 @@ export const cabin = Cabin({ subsets: ['latin'] })
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
-  const [bg, setBg] = useState('bg-slate-900');
+  const [bg, setBg] = useState('bg-slate-400 dark:bg-slate-900');
   const [overlay, setOverlay] = useState(false);
 
   const [pageIsScrolled, setPageIsScrolled] = useState(false);
@@ -29,10 +29,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         setBg('bg-darkPlum');
         setOverlay(true);
         break;
-      case '/':
       case '/about':
+        setBg("bg-blue-100 dark:bg-slate-900");
+        setOverlay(false);
+        break;
+      case '/':
       default:
-        setBg('bg-slate-900');
+        setBg('bg-slate-400 dark:bg-slate-900');
         setOverlay(false);
         break;
     }
@@ -62,7 +65,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <IconContext.Provider value={{}}>
           <MDXProvider components={components}>
             <main className={`${bg} min-h-screen`}>
-              <div id="navbar-spacer" className="h-[6rem] w-full bg-black" />
+              <div id="navbar-spacer" className="h-[6rem] w-full bg-slate-300 dark:bg-black " />
               {children}
             </main>
           </MDXProvider>
diff --git a/app/page.tsx b/app/page.tsx
index 0f390c6..5409352 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 export default function Home() {
   return (
     <div className="flex flex-col w-full">
-      <div id="hero" className="bg-gradient-to-b from-black to-slate-900 p-4 flex flex-col items-end">
+      <div id="hero" className="bg-gradient-to-b from-slate-300 to-slate-400 dark:from-black dark:to-slate-900 p-4 flex flex-col items-end">
         <ColorChangeName />
 
         {/* <div className="w-full h-[10vh] object-scale-down bg-no-repeat">
@@ -18,17 +18,17 @@ export default function Home() {
           <Link passHref href="/about">
             <Image className="rounded-full my-4" src="/img/profile.jpeg" alt="image of Mikayla Dobson" width={125} height={125} />
           </Link>
-          <h2 className="text-blue-300 text-2xl mb-2">Hi! My name is Mikayla.</h2>
-          <p className="px-4 sm:px-12">I build full-stack software solutions for the web, answer open-ended questions, and pet cats.</p>
+          <h2 className="text-slate-700 dark:text-blue-300 text-2xl mb-2">Hi! My name is Mikayla.</h2>
+          <p className="px-4 sm:px-12 dark:text-white">I build full-stack software solutions for the web, answer open-ended questions, and pet cats.</p>
 
           <div id="actions" className="flex justify-around my-8">
-            <Link className="flex flex-col items-center justify-center text-center px-4 sm:px-8 border-white border-[1px] p-2 w-2/5 rounded-md" href="/contact">
+            <Link className="flex flex-col items-center justify-center text-center px-4 sm:px-8 border-slate-700 dark:border-white dark:text-white border-[1px] p-2 w-2/5 rounded-md" href="/contact">
               Tell me what I can do for you
             </Link>
-            <Link className="hidden sm:flex flex-col items-center justify-center text-center px-8 border-white border p-2 w-2/5 rounded-md" href="/projects">
+            <Link className="hidden sm:flex flex-col items-center justify-center text-center px-8 border-slate-700 dark:border-white dark:text-white border p-2 w-2/5 rounded-md" href="/projects">
               And check out some of my work while you&apos;re at it
             </Link>
-            <Link className="sm:hidden flex flex-col items-center justify-center px-4 border-white border p-2 w-2/5 rounded-md" href="/projects">
+            <Link className="sm:hidden flex flex-col items-center justify-center px-4 border-slate-700 dark:border-white dark:text-white border p-2 w-2/5 rounded-md" href="/projects">
               Check out my work
             </Link>
           </div>
diff --git a/components/Home/index.tsx b/components/Home/index.tsx
index 82d2edc..eda5a5b 100644
--- a/components/Home/index.tsx
+++ b/components/Home/index.tsx
@@ -13,7 +13,7 @@ export const ColorChangeName = () => {
         <h2 className={"px-4 uppercase text-2xl text-transparent font-bold bg-opacity-100 animate-text-gradient bg-clip-text bg-gradient-to-r " + `from-${secondColor.split('-').slice(1).join('-')} to-${thirdColor.split('-').slice(1).join('-')}`}>Software Engineer</h2>
 
         <div id="hero-mask" className="bg-inherit bg-opacity-10 p-4 flex flex-col">
-          <p className="mt-4 text-right text-sky-300 tracking-wide">Pragmatic software design with style and artistry.</p>
+          <p className="mt-4 text-right text-slate-700 dark:text-sky-300 tracking-wide">Pragmatic software design with style and artistry.</p>
         </div>
         </>
     )
diff --git a/components/Links/FeaturedLink.tsx b/components/Links/FeaturedLink.tsx
index 645c233..fe86829 100644
--- a/components/Links/FeaturedLink.tsx
+++ b/components/Links/FeaturedLink.tsx
@@ -7,7 +7,7 @@ export default function FeaturedLink({ href, label, logo, disabled = false}: Lin
         <Panel width="1/2">
             <div className="flex flex-col items-center p-8">
                 {logo}
-                <a aria-disabled={disabled} href="https://app.dropper.studio/store/innocuous-symmetry" target="_blank">{label}</a>
+                <a aria-disabled={disabled} href={href} target="_blank">{label}</a>
             </div>
         </Panel>
 
diff --git a/components/Navbar/index.tsx b/components/Navbar/index.tsx
index 581de0f..4287d17 100644
--- a/components/Navbar/index.tsx
+++ b/components/Navbar/index.tsx
@@ -12,7 +12,7 @@ export default function Navbar({ pageIsScrolled = false }) {
 
     return (
         <>
-        <div id="navbar" className={"w-full z-50 fixed flex flex-nowrap items-baseline justify-apart bg-opacity-95 px-8 py-4 " + (mobileMenuOpen ? "bg-[#131313] " : pageIsScrolled ? "bg-black " : "bg-inherit ") + " text-white transition-all duration-200"}>
+        <div id="navbar" className={"w-full z-50 fixed flex flex-nowrap items-baseline justify-apart bg-opacity-95 px-8 py-4 " + (mobileMenuOpen ? "bg-slate-300 dark:bg-[#131313]  " : pageIsScrolled ? "bg-slate-300 dark:bg-black " : "bg-inherit ") + " text-white transition-all duration-200"}>
             <Link passHref href="/" className="w-1/4">
                 <InlineLogo customHookInstance={navbarColorShift} />
             </Link>
diff --git a/components/Resume/Experience.tsx b/components/Resume/Experience.tsx
index 2b6bc15..1212934 100644
--- a/components/Resume/Experience.tsx
+++ b/components/Resume/Experience.tsx
@@ -1,41 +1,42 @@
 import Link from "next/link";
+import Card from "../ui/Card";
 
 const Experience = () => {
     return (
         <section className="w-full">
-            <article className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg">
+            <Card>
                 <Link target="_blank" referrerPolicy="no-referrer" href="https://dropper.studio" className="uppercase text-2xl text-rose-600 hover:text-rose-400 active:text-rose-600">Dropper Studio</Link>
-                <p className="font-light italic text-rose-300">Nashville, TN (hybrid) - Software Engineer</p>
-                <p>March 2023 - present</p>
+                <p className="font-light italic text-black dark:text-rose-300">Nashville, TN (hybrid) - Software Engineer</p>
+                <p className="dark:text-white">March 2023 - present</p>
 
-                <div className="h-[1px] w-full my-3 bg-rose-300" />
+                <div className="h-[1px] w-full my-3 bg-rose-600 dark:bg-rose-300" />
 
-                <p className="leading-relaxed font-light">Building a full-stack e-commerce platform for the music industry. Experience includes: producing a functional proof of concept from design specifications; constructing a scalable, performant full-stack architecture; and project/team management skills.</p>
+                <p className="dark:text-white leading-relaxed font-light">Building a full-stack e-commerce platform for the music industry. Experience includes: producing a functional proof of concept from design specifications; constructing a scalable, performant full-stack architecture; and project/team management skills.</p>
 
-                <Link href="/about/work/dropper" className="text-rose-300 hover:text-rose-500 active:text-rose-300">Learn more about my work with Dropper</Link>
-            </article>
+                <Link href="/about/work/dropper" className="text-rose-600 hover:text-rose-400 active:text-rose-300">Learn more about my work with Dropper</Link>
+            </Card>
 
-            <article className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg">
+            <Card>
                 <Link target="_blank" referrerPolicy="no-referrer" href="https://dization.com/" className="uppercase text-2xl text-rose-600 hover:text-rose-400 active:text-rose-600">Dization, Inc.</Link>
-                <p className="font-light italic text-rose-300">Pittsburgh, PA (remote) - Software Engineer (intern)</p>
-                <p>October 2022 - March 2023</p>
+                <p className="font-light italic text-black dark:text-rose-300">Pittsburgh, PA (remote) - Software Engineer (intern)</p>
+                <p className="dark:text-white">October 2022 - March 2023</p>
 
-                <div className="h-[1px] w-full my-3 bg-rose-300" />
+                <div className="h-[1px] w-full my-3 bg-rose-600 dark:bg-rose-300" />
 
-                <p className="leading-relaxed font-light">Participated in the development of an enterprise project management solution. Built several new features, contributed to design and UX discussions, and took initiative on debugging efforts. Technologies included PHP, MySQL, jQuery, and Bootstrap.</p>
+                <p className="dark:text-white leading-relaxed font-light">Participated in the development of an enterprise project management solution. Built several new features, contributed to design and UX discussions, and took initiative on debugging efforts. Technologies included PHP, MySQL, jQuery, and Bootstrap.</p>
 
-                <Link href="/about/work/dization" className="text-rose-300 hover:text-rose-500 active:text-rose-300">Learn more about my work with Dization</Link>
-            </article>
+                <Link href="/about/work/dization" className="text-rose-600 hover:text-rose-400 active:text-rose-300">Learn more about my work with Dization</Link>
+            </Card>
 
-            <article className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg">
+            <Card>
                 <h3 className="uppercase text-2xl text-rose-600">Metazu Studio</h3>
-                <p className="font-light italic text-rose-300">Nashville, TN (hybrid) - Software Engineer (consultant)</p>
-                <p>March 2022 - December 2022</p>
+                <p className="font-light italic text-black dark:text-rose-300">Nashville, TN (hybrid) - Software Engineer (consultant)</p>
+                <p className="dark:text-white">March 2022 - December 2022</p>
 
-                <div className="h-[1px] w-full my-3 bg-rose-300" />
+                <div className="h-[1px] w-full my-3 bg-rose-600 dark:bg-rose-300" />
 
-                <p className="leading-relaxed font-light">Consulted on small teams for the design and engineering of full-stack web applications for clients. Used technologies including Node.js, React, MongoDB, and PostgreSQL.</p>
-            </article>
+                <p className="dark:text-white leading-relaxed font-light">Consulted on small teams for the design and engineering of full-stack web applications for clients. Used technologies including Node.js, React, MongoDB, and PostgreSQL.</p>
+            </Card>
 
             <Link href="/about/work" className="text-rose-300 hover:text-rose-500 active:text-rose-300 bg-slate-950 p-2 rounded-lg shadow-lg">See more about my experience</Link>
         </section>
diff --git a/components/Resume/Projects.tsx b/components/Resume/Projects.tsx
index 6fcf471..df17cbb 100644
--- a/components/Resume/Projects.tsx
+++ b/components/Resume/Projects.tsx
@@ -1,24 +1,26 @@
+import Card from "../ui/Card"
+
 const Projects = () => (
     <section className="w-full">
-        <article className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg">
+        <Card>
             <h3 className="uppercase text-2xl text-rose-600">Subsequent</h3>
             <p className="font-light italic text-rose-300">May 2023 - present</p>
-            <p>TypeScript, Tone.js</p>
+            <p className="text-rose-300">TypeScript, Tone.js</p>
 
-            <div className="h-[1px] w-full my-3 bg-rose-300" />
+            <div className="h-[1px] w-full my-3 bg-rose-600 dark:bg-rose-300" />
 
-            <p className="leading-relaxed font-light">A tool for music creators to explore generative music composition. Composed of an engine that wraps around Tone.js, allowing the end user to specify parameters for indefinite generative music output. To be published as an NPM package, including providers to be consumed in front-end web frameworks.</p>
-        </article>
+            <p className="dark:text-white leading-relaxed font-light">A tool for music creators to explore generative music composition. Composed of an engine that wraps around Tone.js, allowing the end user to specify parameters for indefinite generative music output. To be published as an NPM package, including providers to be consumed in front-end web frameworks.</p>
+        </Card>
 
-        <article className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg">
+        <Card>
             <h3 className="uppercase text-2xl text-rose-600">Recipin</h3>
             <p className="font-light italic text-rose-300">October 2022 - present</p>
-            <p>React, Express, TypeScript, PostgreSQL</p>
+            <p className="text-rose-300">React, Express, TypeScript, PostgreSQL</p>
 
-            <div className="h-[1px] w-full my-3 bg-rose-300" />
+            <div className="h-[1px] w-full my-3 bg-rose-600 dark:bg-rose-300" />
 
-            <p className="leading-relaxed font-light">A full stack web application for storing personal recipes in collections and sharing them in a lightweight social network.</p>
-        </article>
+            <p className="dark:text-white leading-relaxed font-light">A full stack web application for storing personal recipes in collections and sharing them in a lightweight social network.</p>
+        </Card>
     </section>
 )
 
diff --git a/components/Resume/Skills.tsx b/components/Resume/Skills.tsx
index 4446242..b5f2e7d 100644
--- a/components/Resume/Skills.tsx
+++ b/components/Resume/Skills.tsx
@@ -1,138 +1,139 @@
 import { RxChevronDown } from "react-icons/rx";
 import Link from "next/link";
+import Chip from "../ui/Chip";
 
 const Skills = () => (
     <section className="w-full">
-        <div className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg">
-            <h3 className="uppercase text-2xl text-rose-600">Strong:</h3>
+        <div id="strong-skills" className="bg-slate-400 dark:bg-slate-800 dark:bg-opacity-40 p-3 my-4 rounded-lg">
+            <h3 className="uppercase text-2xl text-rose-600 dark:text-rose-300">Strong:</h3>
             <article className="mt-2">
                 <details className="group">
-                    <summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
+                    <summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
                         <p className="mr-2">JavaScript</p>
                         <RxChevronDown className="transition group-open:rotate-180" />
                     </summary>
                     <div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
-                        <Link target="_blank" referrerPolicy="no-referrer" href="https://github.com/innocuous-symmetry?tab=repositories&language=typescript" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">TypeScript</Link>
-                        <Link target="_blank" referrerPolicy="no-referrer" href="https://github.com/innocuous-symmetry?tab=repositories&q=react" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">React</Link>
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Next.js</p>
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">tRPC</p>
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">React Query</p>
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">jQuery</p>
-                        <Link target="_blank" referrerPolicy="no-referrer" href="https://github.com/innocuous-symmetry?tab=repositories&q=express" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">Express</Link>
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Node.js</p>
+                        <Chip label="Typescript" href="https://github.com/innocuous-symmetry?tab=repositories&language=typescript" />
+                        <Chip label="React" href="https://github.com/innocuous-symmetry?tab=repositories&q=react" />
+                        <Chip label="AWS S3 SDK" />
+                        <Chip label="Next.js" />
+                        <Chip label="tRPC" />
+                        <Chip label="React Query" />
+                        <Chip label="jQuery" />
+                        <Chip label="Express.js" href="https://github.com/innocuous-symmetry?tab=repositories&q=express" />
+                        <Chip label="Node.js" />
                     </div>
                 </details>
             </article>
 
             <article className="mt-2">
                 <details className="group">
-                    <summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
+                    <summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
                         <p className="mr-2">CSS</p>
                         <RxChevronDown className="transition group-open:rotate-180" />
                     </summary>
                     <div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Tailwind</p>
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Bootstrap</p>
-                        <Link target="_blank" referrerPolicy="no-referrer" href="https://github.com/innocuous-symmetry/recipe-manager" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">Sass</Link>
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Material UI</p>
+                        <Chip label="Tailwind" />
+                        <Chip label="Bootstrap" />
+                        <Chip label="Sass" href="https://github.com/innocuous-symmetry/recipe-manager" />
+                        <Chip label="Material UI" />
                     </div>
                 </details>
             </article>
         </div>
 
-        <div className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg">
-            <h3 className="uppercase text-2xl text-rose-600">Experienced:</h3>
+        <div id="intermediate-skills" className="bg-slate-400 dark:bg-slate-800 dark:bg-opacity-40  p-3 my-4 rounded-lg">
+            <h3 className="uppercase text-2xl text-rose-600 dark:text-rose-300">Experienced:</h3>
             <article className="mt-2">
                 <details className="group">
-                    <summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
+                    <summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
                         <p className="mr-2">Python</p>
                         <RxChevronDown className="transition group-open:rotate-180" />
                     </summary>
                     <div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
-                        <Link target="_blank" referrerPolicy="no-referrer" href="https://github.com/innocuous-symmetry/picosynth" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">Micropython</Link>
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Flask</p>
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Flet</p>
+                        <Chip label="Micropython" href="https://github.com/innocuous-symmetry/picosynth" />
+                        <Chip label="Flask" />
+                        <Chip label="Flet" />
                     </div>
                 </details>
             </article>
 
             <article className="mt-2">
                 <details className="group">
-                    <summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
+                    <summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
                         <p className="mr-2">Database Operations</p>
                         <RxChevronDown className="transition group-open:rotate-180" />
                     </summary>
                     <div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
-                        <Link target="_blank" referrerPolicy="no-referrer" href="https://github.com/innocuous-symmetry/recipe-manager" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">PostgreSQL</Link>
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">MySQL</p>
-                        <Link href="/about/work/dropper" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">MongoDB</Link>
-                        <Link href="/about/work/dropper" className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900">Caching with Redis</Link>
+                        <Chip label="PostgreSQL" href="https://github.com/innocuous-symmetry/recipe-manager" />
+                        <Chip label="MySQL" />
+                        <Chip label="MongoDB" href="/about/dropper" />
+                        <Chip label="Redis" href="/about/dropper" />
                     </div>
                 </details>
             </article>
 
             <article className="mt-2">
                 <details className="group">
-                    <summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
+                    <summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
                         <p className="mr-2">Tooling</p>
                         <RxChevronDown className="transition group-open:rotate-180" />
                     </summary>
                     <div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Docker</p>
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Github Actions</p>
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Git / Github</p>
+                        <Chip label="Docker" />
+                        <Chip label="Github Actions" />
+                        <Chip label="Git / Github" />
                     </div>
                 </details>
             </article>
         </div>
 
-        <div className="bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg">
-            <h3 className="uppercase text-2xl text-rose-600">Learning:</h3>
+        <div id="learning-skills" className="bg-slate-400 dark:bg-slate-800 dark:bg-opacity-40  p-3 my-4 rounded-lg">
+            <h3 className="uppercase text-2xl text-rose-600 dark:text-rose-300">Learning:</h3>
             <article className="mt-2">
                 <details className="group">
-                    <summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
+                    <summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
                         <p className="mr-2">Design Principles</p>
                         <RxChevronDown className="transition group-open:rotate-180" />
                     </summary>
                     <div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Domain Driven Design</p>
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Microservices</p>
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Readable Code</p>
+                        <Chip label="Domain Driven Design" />
+                        <Chip label="Microservices" />
                     </div>
                 </details>
             </article>
 
             <article className="mt-2">
                 <details className="group">
-                    <summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
+                    <summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
                         <p className="mr-2">Cloud Development and Infrastructure</p>
                         <RxChevronDown className="transition group-open:rotate-180" />
                     </summary>
                     <div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">AWS SDK</p>
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Proxmox</p>
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Minio</p>
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Linux</p>
+                        <Chip label="AWS" />
+                        <Chip label="Proxmox" />
+                        <Chip label="Minio" />
+                        <Chip label="Linux" />
                     </div>
                 </details>
             </article>
 
             <article className="mt-2">
                 <details className="group">
-                    <summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
+                    <summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
                         <p className="mr-2">Server-side programming languages</p>
                         <RxChevronDown className="transition group-open:rotate-180" />
                     </summary>
                     <div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Ruby / Rails</p>
-                        <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Golang</p>
+                        <Chip label="Ruby / Rails" />
+                        <Chip label="Golang" />
                     </div>
                 </details>
             </article>
 
-            <article className="mt-2">
+            {/* <article className="mt-2">
                 <details className="group">
-                    <summary className="flex items-center text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
+                    <summary className="flex items-center text-rose-600 dark:text-rose-300 uppercase tracking-wide text-lg mb-2 list-none">
                         <p className="mr-2">Natural Language Processing</p>
                         <RxChevronDown className="transition group-open:rotate-180" />
                     </summary>
@@ -141,21 +142,21 @@ const Skills = () => (
                         <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Spacy</p>
                     </div>
                 </details>
-            </article>
+            </article> */}
         </div>
 
-        <details className="group bg-slate-800 bg-opacity-40 shadow shadow-black p-3 my-4 rounded-lg">
-            <summary className="flex items-center uppercase text-2xl text-rose-600 list-none">
+        <details className="group bg-slate-400 dark:bg-slate-800 dark:bg-opacity-40 p-3 my-4 rounded-lg">
+            <summary className="flex items-center uppercase text-2xl text-rose-600 dark:text-rose-300 list-none">
                 <p className="mr-2">Soft Skills:</p>
                 <RxChevronDown className="transition group-open:rotate-180" />
             </summary>
             <div className="opacity-0 group-open:opacity-100 transition-opacity duration-500 flex flex-wrap">
-                <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Strong communicator</p>
-                <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Fast learner</p>
-                <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Self-driver</p>
-                <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Improviser</p>
-                <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Problem solver</p>
-                <p className="py-0.5 px-2 bg-rose-900 rounded-xl m-0.5">Design thinker</p>
+                <Chip label="Strong communicator" />
+                <Chip label="Fast learner" />
+                <Chip label="Self-driver" />
+                <Chip label="Improviser" />
+                <Chip label="Problem solver" />
+                <Chip label="Design thinker" />
             </div>
         </details>
     </section>
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index b5b4252..9db5a2b 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -2,13 +2,13 @@ import Link from "next/link";
 
 export function NavbarButton({ href, label, children }: { href: string, label?: string, children?: React.ReactNode }) {
     return (
-        <Link passHref href={href} /* onMouseOver={() => mouseOver('about')} onMouseOut={() => mouseOut('about')} */ className={`ml-2 ${/* colors.firstColor */ ''} rounded-lg transition-colors ease-quick-start duration-${/* hoverState.about ? '[5000ms]' : */ '0'}`}>
+        <Link passHref href={href} className={`ml-2 rounded-lg`}>
             { label ? (
-                <p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>
+                <p className='text-lg text-slate-700 dark:text-white text-opacity-80 hover:text-opacity-100 uppercase border-slate-700 dark:border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>
                     { label }
                 </p>
             ) : children ? children : (
-                <p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>
+                <p className='text-lg text-slate-700 dark:text-white text-opacity-80 hover:text-opacity-100 uppercase border-slate-700 dark:border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>
                     Button text
                 </p>
             )}
diff --git a/components/ui/Card.tsx b/components/ui/Card.tsx
new file mode 100644
index 0000000..c9867d4
--- /dev/null
+++ b/components/ui/Card.tsx
@@ -0,0 +1,7 @@
+const Card = ({ children }: { children: React.ReactNode }) => (
+    <article className="bg-slate-400 dark:bg-slate-800 dark:bg-opacity-40 p-3 my-4 rounded-lg">
+        {children}
+    </article>
+)
+
+export default Card;
diff --git a/components/ui/Chip.tsx b/components/ui/Chip.tsx
new file mode 100644
index 0000000..79f0bdf
--- /dev/null
+++ b/components/ui/Chip.tsx
@@ -0,0 +1,16 @@
+import Link from "next/link"
+
+const Chip = ({ label, href }: { label: string, href?: string }) => (
+    href ? (
+        <Link
+            href={href}
+            target="_blank"
+            referrerPolicy="no-referrer"
+            className="py-0.5 px-2 bg-rose-300 text-black dark:text-white dark:bg-rose-900 rounded-xl m-0.5 hover:bg-rose-500 active:bg-rose-900"
+            >
+            <p>{label}</p>
+        </Link>
+    ) : <p className="py-0.5 px-2 bg-rose-300 dark:bg-rose-900 text-black dark:text-white rounded-xl m-0.5">{label}</p>
+)
+
+export default Chip
diff --git a/components/ui/Panel.tsx b/components/ui/Panel.tsx
index dda8a36..e7f9236 100644
--- a/components/ui/Panel.tsx
+++ b/components/ui/Panel.tsx
@@ -8,6 +8,7 @@ interface PanelProps {
     height?: TailwindFraction | TailwindNumber | undefined
 }
 
+/** @deprecated i kinda hate this */
 const Panel: FC<PanelProps> = ({ children, width, height }) => {
     const narrow = (input: TailwindNumber | TailwindFraction | undefined) => {
         if (typeof input === 'number') return input.toString();
diff --git a/server/entities/audiocollection.ts b/server/entities/audiocollection.ts
new file mode 100644
index 0000000..28eccb1
--- /dev/null
+++ b/server/entities/audiocollection.ts
@@ -0,0 +1,12 @@
+export type Track = {
+    name: string;
+    date: Date;
+    description: string;
+}
+
+export type AudioCollection = {
+    name: string;
+    date: Date;
+    tracklist: Track[];
+    directory: string;
+}
diff --git a/server/entities/post.ts b/server/entities/post.ts
new file mode 100644
index 0000000..f2f7fb8
--- /dev/null
+++ b/server/entities/post.ts
@@ -0,0 +1,9 @@
+export type Post = {
+    name: string;
+    date: Date;
+    author: string;
+    description: string;
+    body: string;
+    tagIDs: string[];
+    media?: string[];   // array of URLs
+}
diff --git a/server/entities/project.ts b/server/entities/project.ts
new file mode 100644
index 0000000..270f5b6
--- /dev/null
+++ b/server/entities/project.ts
@@ -0,0 +1,9 @@
+type Project = {
+    name: string;
+    startDate: Date;
+    endDate: Date;
+    current: boolean;
+    description: string;
+    tagIDs: string[];
+    media?: string[];   // array of URLs
+}