diff --git a/src/app/tech-stack/components/TechStackCard.tsx b/src/app/tech-stack/components/TechStackCard.tsx
index 07029b22..2b1c33a9 100644
--- a/src/app/tech-stack/components/TechStackCard.tsx
+++ b/src/app/tech-stack/components/TechStackCard.tsx
@@ -8,15 +8,15 @@ interface TechStackCardProps {
 
 export default function TechStackCard({ title, data }: TechStackCardProps) {
   return (
-    <div className="card w-72 sm:w-96 text-primary-content bg-neutral-50 rounded-lg">
+    <div className="card w-72 sm:w-96 text-black bg-white rounded-lg">
       <div className="flex flex-row justify-between">
-        <h3 className="text-xl font-semibold text-neutral-900 mt-5 ml-5 self-center">
+        <h3 className="text-xl font-semibold text-black mt-5 ml-5 self-center">
           {title}
         </h3>
         <EditButton title={title} />
       </div>
       <div className="h-40 overflow-y-auto mx-5 mt-6 mb-5">
-        <ul className="text-neutral-900">
+        <ul className="text-black">
           {data.map((element) => (
             <li
               className="text-base mb-5 last:mb-0 relative grid grid-cols-[1fr,auto] items-center"
diff --git a/src/app/tech-stack/components/TechStackContainer.tsx b/src/app/tech-stack/components/TechStackContainer.tsx
index 127bd2f8..97e0e6d6 100644
--- a/src/app/tech-stack/components/TechStackContainer.tsx
+++ b/src/app/tech-stack/components/TechStackContainer.tsx
@@ -4,7 +4,7 @@ import { TechStackCard } from ".";
 
 export default function TechStackContainer() {
   return (
-    <div className={`card bg-primary p-10 ${styles["tech-container-width"]}`}>
+    <div className={`card bg-primary-content p-10 ${styles["tech-container-width"]}`}>
       <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20 justify-items-stretch">
         {Object.keys(techStack).map((cardType, index) => (
           <li
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index d7078699..f12304ba 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -1,6 +1,6 @@
 export default function Avatar() {
   return (
-    <div className="avatar bg-neutral-300 rounded-full border-2 border-neutral-50">
+    <div className="avatar bg-neutral-300 rounded-full border border-base-content">
       <div className="w-6"></div>
     </div>
   );
diff --git a/src/components/EditButton.tsx b/src/components/EditButton.tsx
index 2bcdc862..94885b63 100644
--- a/src/components/EditButton.tsx
+++ b/src/components/EditButton.tsx
@@ -8,7 +8,7 @@ export default function EditButton({ title }: EditButtonProps) {
   return (
     <button
       type="button"
-      className="btn grid grid-cols-[auto,auto] gap-x-1 mt-5 mr-5 capitalize w-16 h-8 p-0 min-h-full text-sm font-semibold text-neutral-500 bg-white border-transparent"
+      className="btn grid grid-cols-[auto,auto] gap-x-1 mt-5 mr-5 capitalize w-16 h-8 p-0 min-h-full text-sm font-semibold text-black bg-secondary border-transparent"
       aria-label={`Edit ${title}`}
     >
       <PencilSquareIcon className="h-4 w-4 text-black" />