diff --git a/src/components/Header/AppHeader.tsx b/src/components/Header/AppHeader.tsx
index 39845ea2..2385246c 100644
--- a/src/components/Header/AppHeader.tsx
+++ b/src/components/Header/AppHeader.tsx
@@ -30,7 +30,7 @@ const AppHeader = (): JSX.Element => {
 
   return (
     <div className="sticky top-0 z-50">
-      <div className="hidden md:flex justify-around p-1 lg:px-8 w-full bg-[rgba(226,244,250,0.9)] backdrop-blur-sm">
+      <div className="hidden md:flex justify-around p-1 lg:px-8 w-full bg-[rgba(226,244,250,0.9)] backdrop-blur-sm dark:bg-[#2a2a2a]">
         <div className="flex w-fit items-center">
           <div className="btn btn-ghost btn-circle btn-md hover:bg-white">
             <div className="w-full rounded-full">
@@ -39,11 +39,6 @@ const AppHeader = (): JSX.Element => {
                   src="/images/vektor-logo-circle.svg"
                   alt="vektorprogrammet logo"
                 />
-                <img
-                  src="/images/vektor-logo-darkmode.png"
-                  alt="vektorprogrammet logo"
-                  className="h-16 lg:h-20 hidden dark:block"
-                />
               </Link>
             </div>
           </div>
diff --git a/src/components/Header/UserAvatar.tsx b/src/components/Header/UserAvatar.tsx
index bdf2b1c9..b812f2fe 100644
--- a/src/components/Header/UserAvatar.tsx
+++ b/src/components/Header/UserAvatar.tsx
@@ -8,7 +8,7 @@ const UserAvatar = () => {
           <img src="/images/team/IT-Tor.png" alt="profile avatar" />
         </div>
       </div>
-      <ul className="mt-2 p-2 shadow menu menu-compact dropdown-content bg-[#EDF8FC] text-[#313131] rounded-box w-52">
+      <ul className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-[#EDF8FC] text-[#313131] rounded-box w-52 dark:bg-neutral-700 dark:text-white">
         <li>
           <Link reloadDocument to="/kontrollpanel">
             Kontrollpanel
diff --git a/src/pages/public/Assistenter/components/ApplyReg.tsx b/src/pages/public/Assistenter/components/ApplyReg.tsx
index 708d06dc..fa427b7a 100644
--- a/src/pages/public/Assistenter/components/ApplyReg.tsx
+++ b/src/pages/public/Assistenter/components/ApplyReg.tsx
@@ -1,14 +1,15 @@
 export const ApplyCard = (props: any) => {
   const { cities } = props;
   return (
-    <form>
-      <h1 className="text-xl my-8 text-vektor-darblue font-bold text-center">
+    <form className="dark:bg-neutral-800">
+
+      <h1 className="text-xl my-8 text-vektor-darblue font-bold text-center dark:text-gray-200">
         {cities}
       </h1>
 
-      <div className="mt-1 mb-8 text-center">Søknadsfrist: </div>
+      <div className="mt-1 mb-8 text-center dark:text-gray-300">Søknadsfrist: </div>
 
-      <div className="grid justify-items-center">
+      <div className="grid justify-items-center dark:text-gray-800">
         <div className="flex flex-wrap w-full my-4 space-x-8 justify-center">
           <input
             type="fornavn"
@@ -81,7 +82,7 @@ export const ApplyCard = (props: any) => {
           Søk nå!
         </button>
       </div>
-      <div className="items-center mx-16 mb-10 text-center">
+      <div className="items-center mx-16 mb-10 text-center dark:text-gray-300">
         Har du vært assistent tidligere? Da kan du søke på nytt her (krever
         innlogging)
       </div>
diff --git a/src/pages/public/Assistenter/components/Assistenter.tsx b/src/pages/public/Assistenter/components/Assistenter.tsx
index 8e974e8b..fb9bf4e5 100644
--- a/src/pages/public/Assistenter/components/Assistenter.tsx
+++ b/src/pages/public/Assistenter/components/Assistenter.tsx
@@ -14,15 +14,15 @@ const Assistenter = (): JSX.Element => {
     });
 
   return (
-    <div className="leading-relaxed font-sans flex flex-col justify-center items-center mt-10">
-        <h1 className="font-sans max-w-2xl mt-10 text-vektor-darblue text-4xl text-center font-bold mx-3">
+    <div className="leading-relaxed font-sans flex flex-col justify-center items-center dark:text-gray-300 mt-10">
+        <h1 className="font-sans max-w-2xl mt-10 text-vektor-darblue text-4xl text-center font-bold mx-3 dark:text-gray-200">
           {title}
         </h1>
       <div className="mt-8 mb-20 text-xl w-3/5">
         {ingress}
         </div>
-      <div className="space-y-20 p-10 w-full text-center mb-14 border-secondary">
-        <div className="conte mx-8 bg-center font-sans font-bold text-secondary">
+      <div className="space-y-20 p-10 w-full text-center mb-14 border-secondary dark:bg-neutral-800">
+        <div className="conte mx-8 bg-center font-sans font-bold text-secondary dark:text-gray-300">
           Disse avdelingene har opptak nå:
         </div>
         <button
@@ -49,11 +49,11 @@ const Assistenter = (): JSX.Element => {
           ))}
         </div>
       </div>
-      <div className="mb-16 flex flex-col items-center" id="tc">
-        <div className="my-2 mb-2 font-bold text-2xl text-secondary w-fit">
+      <div className="mb-16 flex flex-col items-center dark:text-gray-300" id="tc">
+        <div className="my-2 mb-2 font-bold text-2xl text-secondary w-fit dark:text-gray-300">
           Lærerassistent i matematikk
         </div>
-        <div className="mb-4 w-3/5">
+        <div className="mb-4 w-3/5 dark:text-gray-300">
           Vektorprogrammet er en studentorganisasjon som sender realfagssterke
           studenter til grunnskolen for å hjelpe elevene med matematikk i
           skoletiden. Vi ser etter deg som lengter etter en mulighet til å lære
@@ -68,7 +68,7 @@ const Assistenter = (): JSX.Element => {
           className="h-80 mt-6 rounded-lg mx-auto"
           alt="vektorbilde"
         />
-        <div className="mt-4 w-3/5">
+        <div className="mt-4 w-3/5 dark:text-gray-300">
           I tillegg vil du få muligheten til å delta på mange sosiale
           arrangementer, alt fra fest og grilling til go-kart, laser tag og
           spillkvelder. Samtidig arrangerer vi populærforedrag som er til for å
@@ -78,8 +78,8 @@ const Assistenter = (): JSX.Element => {
         </div>
       </div>
 
-      <div className="mb-16 flex flex-col items-center">
-        <div className="font-bold text-2xl my-2 mb-3 text-vektor-darblue text-center">
+      <div className="mb-16 flex flex-col items-center dark:text-gray-300">
+        <div className="font-bold text-2xl my-2 mb-3 text-vektor-darblue text-center dark:text-gray-300">
           Arbeidsoppgaver
         </div>
 
@@ -94,13 +94,13 @@ const Assistenter = (): JSX.Element => {
           blir satt stor pris på av både barn og lærere!
         </div>
       </div>
-      <div className="text-vektor-darblue font-bold my-8 text-2xl text-center">
+      <div className="text-vektor-darblue font-bold my-8 text-2xl text-center dark:text-gray-300">
         Hvordan blir jeg Vektorassistent?
       </div>
-      <div className="flex flex-row space-x-16">
+      <div className="flex flex-row space-x-16 dark:text-gray-300">
         <div className="flex-1 ...">
-          <ul className="leading-loose whitespace-normal md:whitespace-pre list-disc">
-            <div className="text-vektor-darblue font-bold my-3 text-lg">
+          <ul className="leading-loose whitespace-normal md:whitespace-pre list-disc ">
+            <div className="text-vektor-darblue font-bold my-3 text-lg dark:text-gray-300">
               Opptakskrav
             </div>
 
@@ -114,7 +114,7 @@ const Assistenter = (): JSX.Element => {
         </div>
 
         <div className="flex-2 ...">
-          <div className="font-bold text-vektor-darblue my-3 text-lg">
+          <div className="font-bold text-vektor-darblue my-3 text-lg dark:text-gray-300">
             Opptaksprosessen
           </div>
           <ol className="whitespace-normal md:whitespace-pre list-decimal leading-loose ">
@@ -135,7 +135,7 @@ const Assistenter = (): JSX.Element => {
         </div>
       </div>
 
-      <div className="font-bold text-vektor-darblue text-3xl mt-16 mb-8">
+      <div className="font-bold text-vektor-darblue text-3xl mt-16 mb-8 dark:text-gray-200">
         Søk nå!
       </div>
 
diff --git a/src/pages/public/Assistenter/components/AssistenterCard.tsx b/src/pages/public/Assistenter/components/AssistenterCard.tsx
index e3a5d475..6916123e 100644
--- a/src/pages/public/Assistenter/components/AssistenterCard.tsx
+++ b/src/pages/public/Assistenter/components/AssistenterCard.tsx
@@ -34,7 +34,7 @@ const TextPictureCard = ({ title, text, imgPath, alt }: Props): JSX.Element => {
         <div className="font-sans font-bold text-xl text-primary text-center p-1">
           {title}
         </div>
-        <div className="font-sans text-center my-1">{text}</div>
+        <div className="font-sans text-center my-1 dark:text-gray-300">{text}</div>
       </div>
     </div>
   );
diff --git a/src/pages/public/Assistenter/components/CityCard/Citycard.tsx b/src/pages/public/Assistenter/components/CityCard/Citycard.tsx
index 4f68c829..acddf14a 100644
--- a/src/pages/public/Assistenter/components/CityCard/Citycard.tsx
+++ b/src/pages/public/Assistenter/components/CityCard/Citycard.tsx
@@ -11,11 +11,11 @@ const Tab = ({
   city: City;
   open: boolean;
 }): JSX.Element => {
-  const chosenStyle = open ? `tab-active` : `text-vektor-darblue`;
+  const chosenStyle = open ? `tab-active dark:text-vektor-darblue` : `text-vektor-darblue dark:text-gray-300`;
   return (
     <button
       type="button"
-      className={`tab tab-lifted w-1/3 text-base font-bold border-white ${chosenStyle}`}
+      className={`tab tab-lifted w-1/3 text-base font-bold border-white dark:hover:bg-neutral-700 ${chosenStyle}`}
       onClick={onTabClick}
       data-toggle="tab"
       role="tablist"
@@ -30,7 +30,7 @@ const Tabs = (): JSX.Element => {
   return (
     <div className="w-full">
       <div
-        className="tabs w-full flex text-sm font-medium text-gray-500 border-gray-200 dark:border-gray-700 dark:text-gray-400"
+        className="tabs w-full flex text-sm font-medium text-gray-500 border-gray-200 dark:border-gray-700 dark:text-gray-900"
         role="tablist"
       >
         {Object.values(City).map((value) => (
@@ -42,7 +42,7 @@ const Tabs = (): JSX.Element => {
           />
         ))}
       </div>
-      <div className="relative flex flex-col min-w-0 break-words w-full mb-6 border-b-[1px] border-r-[1px] border-l-[1px] px-4 py-5 flex-auto tab-content tab-space">
+      <div className="relative flex flex-col min-w-0 break-words w-full mb-6 border-b-[1px] border-r-[1px] border-l-[1px] px-4 py-5 flex-auto tab-content tab-space dark:bg-neutral-800">
         <ApplyReg cities={openTab} />
       </div>
     </div>
diff --git a/src/pages/public/Kontakt/components/Division.tsx b/src/pages/public/Kontakt/components/Division.tsx
index e4668367..a568d625 100644
--- a/src/pages/public/Kontakt/components/Division.tsx
+++ b/src/pages/public/Kontakt/components/Division.tsx
@@ -28,10 +28,10 @@ const Division = ({
 }: DivisionProps): JSX.Element => {
   return (
     <>
-      <div className="grid grid-cols-2 gap-10">
+      <div className="grid grid-cols-2 gap-10 dark:bg-neutral-800 dark:text-neutral-300">
         <div>
-          <div className="font-bold text-2xl text-blue-800">{name}</div>
-          {subtitle && <div className="text-base">{subtitle}</div>}
+          <div className="font-bold text-2xl text-blue-800 dark:text-neutral-200">{name}</div>
+          {subtitle && <div className="text-base dark:text-neutral-200">{subtitle}</div>}
           {description && <div className="text-base">{description}</div>}
           <div className="flex space-x-1 mt-8">
             <svg
@@ -50,7 +50,7 @@ const Division = ({
               <polyline points="3 7 12 13 21 7" />
             </svg>
             <a
-              className="truncate block max-w-[200px] text-sm hover:underline"
+              className="truncate block max-w-[200px] text-sm hover:underline dark:text-vektor-darblue"
               href={`mailto:${mail}`}
             >
               {mail}
@@ -113,10 +113,10 @@ const Division = ({
           {contactInfos.map((data, id) => {
             return (
               <div className="py-2 mt-5" key={data.name}>
-                <div className="text-blue-800">{contactInfos[id].name}</div>
+                <div className="text-blue-800 dark:text-gray-200">{contactInfos[id].name}</div>
                 {contactInfos[id].title && <div>{contactInfos[id].title}</div>}
                 <a
-                  className="text-sm hover:underline"
+                  className="text-sm hover:underline dark:text-vektor-darblue"
                   href={`mailto:${contactInfos[id].mail}`}
                 >
                   {contactInfos[id].mail}
@@ -127,13 +127,13 @@ const Division = ({
         </div>
       </div>
       {contact && (
-        <div>
-          <div className="font-bold text-2xl text-blue-800 text-center pt-10">{`Kontakt styret i ${name}`}</div>
+        <div className="dark:bg-neutral-800">
+          <div className="font-bold text-2xl text-blue-800 text-center pt-10 dark:text-gray-200">{`Kontakt styret i ${name}`}</div>
           <form>
             <div className="mb-6 mt-7 grid xl:grid-cols-2 xl:gap-6">
               <label
                 htmlFor="name"
-                className="block mb-2 text-sm font-medium text-gray-900"
+                className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
               >
                 Ditt navn
                 <input
@@ -145,7 +145,7 @@ const Division = ({
               </label>
               <label
                 htmlFor="email"
-                className="block mb-2 text-sm font-medium text-gray-900"
+                className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
               >
                 Din e-post
                 <input
@@ -159,7 +159,7 @@ const Division = ({
             <div className="mb-6">
               <label
                 htmlFor="topic"
-                className="block mb-2 text-sm font-medium text-gray-900"
+                className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
               >
                 Emne
                 <input
@@ -173,7 +173,7 @@ const Division = ({
             <div className="mb-6">
               <label
                 htmlFor="message"
-                className="block mb-2 text-sm font-medium text-gray-900"
+                className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
               >
                 Melding
                 <textarea
diff --git a/src/pages/public/Kontakt/components/KontaktOss.tsx b/src/pages/public/Kontakt/components/KontaktOss.tsx
index ab8193e8..51ed4db3 100644
--- a/src/pages/public/Kontakt/components/KontaktOss.tsx
+++ b/src/pages/public/Kontakt/components/KontaktOss.tsx
@@ -164,8 +164,8 @@ const Tabs = ({ divisions }: TabProps): JSX.Element => {
         {divisions.map((data) => {
           const chosenStyle =
             openTab === data.number
-              ? "border-t-gray-200 border-l-gray-200 border-r-gray-200 border-b-white text-vektor-darblue z-50"
-              : "text-vektor-darblue z-50";
+              ? "border-t-gray-200 border-l-gray-200 border-r-gray-200 border-b-white text-vektor-darblue z-50 dark:bg-neutral-800 dark:text-neutral-200 dark:border-t-white dark:border-l-white dark:border-r-white"
+              : "text-vektor-darblue z-50 dark:hover:bg-neutral-700 dark:border-b-white";
           return (
             <div
               className="flex-auto text-center border-gray-200 border-b-2 -mb-[2px]"
@@ -173,7 +173,7 @@ const Tabs = ({ divisions }: TabProps): JSX.Element => {
             >
               <button
                 type="button"
-                className={`rounded-t-lg -mb-[2px] z-50 text-base w-full font-bold py-3 border-b-gray-200 hover:border-2 hover:border-gray-200 hover:text-vektor-blue border-2 border-b-2 border-white ${chosenStyle}`}
+                className={`rounded-t-lg -mb-[2px] z-50 text-base w-full font-bold py-3 border-b-gray-200 hover:border-2 hover:border-t-gray-200 hover:text-vektor-blue border-2 border-b-2 border-white dark:border-transparent ${chosenStyle}`}
                 onClick={(e) => {
                   e.preventDefault();
                   setOpenTab(data.number);
@@ -187,7 +187,7 @@ const Tabs = ({ divisions }: TabProps): JSX.Element => {
           );
         })}
       </div>
-      <div className="relative flex flex-col min-w-0 break-words w-full mb-6 border-b-2 border-r-2 border-l-2 px-4 py-5">
+      <div className="relative flex flex-col min-w-0 break-words w-full mb-6 border-b-2 border-r-2 border-l-2 px-4 py-5 dark:bg-neutral-800">
         <TrondheimTab open={openTab === 1} />
         <AasTab open={openTab === 2} />
         <BergenTab open={openTab === 3} />
diff --git a/src/pages/public/User/components/Utlegg.tsx b/src/pages/public/User/components/Utlegg.tsx
index 14ea438f..c641b6f9 100644
--- a/src/pages/public/User/components/Utlegg.tsx
+++ b/src/pages/public/User/components/Utlegg.tsx
@@ -26,12 +26,12 @@ const Utlegg: React.FC = () => {
 
   const mapToTable = (utlegg: Utlegg[]) => {
     return utlegg.map((u, index) => (
-      <tr key={index.valueOf()} className="bg-white">
+      <tr key={index.valueOf()} className="bg-white dark:bg-neutral-600">
         <td className="py-3 px-6 sm:px-3">{u.Id}</td>
         <td className="py-3 px-4 sm:px-2">{u.utleggsdato}</td>
         <td className="py-3 px-20 sm:px-10">{u.beskrivelse}</td>
         <td className="py-3 px-10 sm:px-5">{u.sum}</td>
-        <td className="py-3 px-6 sm:px-3 text-blue-600 hover:font-semibold">
+        <td className="py-3 px-6 sm:px-3 text-blue-600 hover:underline">
           {u.kvittering}
         </td>
         <td
@@ -41,14 +41,14 @@ const Utlegg: React.FC = () => {
         >
           {u.status}
         </td>
-        <td className="py-3 px-4 text-blue-600 hover:font-semibold">
+        <td className="py-3 px-4 text-blue-600 hover:underline">
           {u.status === "Til behandling" && (
             <>
               Rediger <FontAwesomeIcon icon={faPencil} />
             </>
           )}
         </td>
-        <td className="py-3 px-4 text-rose-600 hover:font-semibold">
+        <td className="py-3 px-4 text-rose-600 hover:underline">
           {u.status === "Til behandling" && (
             <>
               Slett <FontAwesomeIcon icon={faTrashCan} />
@@ -93,8 +93,8 @@ const Utlegg: React.FC = () => {
   return (
     <div>
       {showConfirmation && <Bekreftelse />}
-      <div className="leading-relaxed font-sans max-w-md mx-auto md:max-w-2xl flex flex-col justify-center items-center ">
-        <h1 className="font-sans max-w-2xl mt-16 text-vektor-darblue text-4xl text-center font-bold mx-3">
+      <div className="leading-relaxed font-sans max-w-md mx-auto md:max-w-2xl flex flex-col justify-center items-center dark:text-gray-300">
+        <h1 className="font-sans max-w-2xl mt-16 text-vektor-darblue text-4xl text-center font-bold mx-3 dark:text-gray-300">
           Utlegg
         </h1>
         <div className="mt-4 mb-10 text-xl">
@@ -103,7 +103,7 @@ const Utlegg: React.FC = () => {
           som bekrefter utlegget ditt.
         </div>
 
-        <h1 className="font-sans max-w-2xl mt-2 text-vektor-darblue text-2xl text-center font-bold mx-3">
+        <h1 className="font-sans max-w-2xl mt-2 text-vektor-darblue text-2xl text-center font-bold mx-3 dark:text-gray-300">
           Hva kan jeg få refundert?
         </h1>
         <div className="mt-4 mb-20 text-lg">
@@ -118,7 +118,7 @@ const Utlegg: React.FC = () => {
           </a>
         </div>
 
-        <h1 className="font-sans max-w-2xl mb-4 text-vektor-darblue text-2xl text-center font-bold mx-3">
+        <h1 className="font-sans max-w-2xl mb-4 text-vektor-darblue text-2xl text-center font-bold mx-3 dark:text-gray-300">
           Mine utlegg
         </h1>
       </div>
@@ -155,24 +155,24 @@ const Utlegg: React.FC = () => {
           <table className="table-fixed text-left divide-y divide-gray-300 text-base block overflow-x-auto border-t-2 border-b-2 dark:text-gray-300 mx-10">
             <thead>
               <tr>
-                <th className="w-1/12 py-3 px-6 sm:px-3 bg-table-grey">Id</th>
-                <th className="w-1/12 py-3 px-4 sm:px-2 bg-table-grey">
+                <th className="w-1/12 py-3 px-6 sm:px-3 bg-table-grey dark:bg-neutral-700">Id</th>
+                <th className="w-1/12 py-3 px-4 sm:px-2 bg-table-grey dark:bg-neutral-700">
                   Utleggsdato
                 </th>
-                <th className="w-3/12 py-3 px-20 sm:px-10 bg-table-grey">
+                <th className="w-3/12 py-3 px-20 sm:px-10 bg-table-grey dark:bg-neutral-700">
                   Beskrivelse
                 </th>
-                <th className="w-2/12 py-3 px-10 sm:px-5 bg-table-grey">Sum</th>
-                <th className="w-3/12 py-3 px-6 sm:px-3 bg-table-grey">
+                <th className="w-2/12 py-3 px-10 sm:px-5 bg-table-grey dark:bg-neutral-700">Sum</th>
+                <th className="w-3/12 py-3 px-6 sm:px-3 bg-table-grey dark:bg-neutral-700">
                   Kvittering
                 </th>
-                <th className="w-3/12 py-3 px-6 bg-table-grey">Status</th>
+                <th className="w-3/12 py-3 px-6 bg-table-grey dark:bg-neutral-700">Status</th>
                 <th
-                  className="w-1/12 py-3 px-4 bg-table-grey"
+                  className="w-1/12 py-3 px-4 bg-table-grey dark:bg-neutral-700"
                   aria-label="Empty Cell"
                 />
                 <th
-                  className="w-1/12 py-3 px-4 bg-table-grey"
+                  className="w-1/12 py-3 px-4 bg-table-grey dark:bg-neutral-700"
                   aria-label="Empty Cell"
                 />
               </tr>
diff --git a/src/pages/public/mainPage.tsx b/src/pages/public/mainPage.tsx
index e7ee457e..e0401919 100644
--- a/src/pages/public/mainPage.tsx
+++ b/src/pages/public/mainPage.tsx
@@ -67,11 +67,11 @@ const mainPage = (): JSX.Element => {
           />
         </div>
         <div className="mt-16 w-full md:w-1/2 p-10 md:mr-auto md:mt-24 md:text-left text-center">
-          <h1 className="hidden md:block text-4xl font-bold mb-4">
+          <h1 className="hidden md:block text-4xl font-bold mb-4 dark:text-white">
             Vektorprogrammet
           </h1>
           <div className="mt-6 mb-4 flex md:block justify-center">
-            <p className="text-xl text-left w-4/5">
+            <p className="text-xl text-left w-4/5 dark:text-white">
               - sender studenter til ungdomsskoler for å hjelpe til som
               lærerens assistent i matematikkundervisningen
             </p>
@@ -111,7 +111,7 @@ const mainPage = (): JSX.Element => {
       </div>
       {/*Middle end*/}
       <div className="mt-32 mb-32">
-        <div className="text-center font-bold">
+        <div className="text-center font-bold dark:text-gray-200">
           <h1 className="text-4xl">Hovedsponsorer</h1>
         </div>
         <div className="flex mx-96 mt-12">
@@ -128,7 +128,7 @@ const mainPage = (): JSX.Element => {
             />
           </div>
         </div>
-        <div className="text-center mt-32 font-bold">
+        <div className="text-center mt-32 font-bold dark:text-gray-200">
           <h1 className="text-4xl">Sponsorer og samarbeidspartnere</h1>
         </div>
         <div className="flex mx-96 mt-12">