diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..990c33c
Binary files /dev/null and b/.DS_Store differ
diff --git a/.gitignore b/.gitignore
index 592a4d7..619776c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+*DS_Store
 .vscode/
 
 # dependencies
diff --git a/react-app/public/.DS_Store b/react-app/public/.DS_Store
new file mode 100644
index 0000000..13d93b5
Binary files /dev/null and b/react-app/public/.DS_Store differ
diff --git a/react-app/public/images/.DS_Store b/react-app/public/images/.DS_Store
new file mode 100644
index 0000000..2e73ac5
Binary files /dev/null and b/react-app/public/images/.DS_Store differ
diff --git a/react-app/public/images/SciLifeLab logo/.DS_Store b/react-app/public/images/SciLifeLab logo/.DS_Store
new file mode 100644
index 0000000..c267305
Binary files /dev/null and b/react-app/public/images/SciLifeLab logo/.DS_Store differ
diff --git a/react-app/public/images/SciLifeLab logo/Green_NEG/.DS_Store b/react-app/public/images/SciLifeLab logo/Green_NEG/.DS_Store
new file mode 100644
index 0000000..ce96ee3
Binary files /dev/null and b/react-app/public/images/SciLifeLab logo/Green_NEG/.DS_Store differ
diff --git a/react-app/public/images/SciLifeLab logo/Green_NEG/Digital/.DS_Store b/react-app/public/images/SciLifeLab logo/Green_NEG/Digital/.DS_Store
new file mode 100644
index 0000000..440883b
Binary files /dev/null and b/react-app/public/images/SciLifeLab logo/Green_NEG/Digital/.DS_Store differ
diff --git a/react-app/public/images/SciLifeLab logo/Green_NEG/Digital/SciLifeLab_Logotype_Green_NEG.png b/react-app/public/images/SciLifeLab logo/Green_NEG/Digital/SciLifeLab_Logotype_Green_NEG.png
new file mode 100644
index 0000000..eea3db2
Binary files /dev/null and b/react-app/public/images/SciLifeLab logo/Green_NEG/Digital/SciLifeLab_Logotype_Green_NEG.png differ
diff --git a/react-app/public/images/SciLifeLab logo/Green_POS/.DS_Store b/react-app/public/images/SciLifeLab logo/Green_POS/.DS_Store
new file mode 100644
index 0000000..439a495
Binary files /dev/null and b/react-app/public/images/SciLifeLab logo/Green_POS/.DS_Store differ
diff --git a/react-app/public/images/SciLifeLab logo/Green_POS/Digital/.DS_Store b/react-app/public/images/SciLifeLab logo/Green_POS/Digital/.DS_Store
new file mode 100644
index 0000000..e284b9a
Binary files /dev/null and b/react-app/public/images/SciLifeLab logo/Green_POS/Digital/.DS_Store differ
diff --git a/react-app/public/images/SciLifeLab logo/Green_POS/Digital/SciLifeLab_Logotype_Green_POS.png b/react-app/public/images/SciLifeLab logo/Green_POS/Digital/SciLifeLab_Logotype_Green_POS.png
new file mode 100644
index 0000000..2ad7178
Binary files /dev/null and b/react-app/public/images/SciLifeLab logo/Green_POS/Digital/SciLifeLab_Logotype_Green_POS.png differ
diff --git a/react-app/public/images/SciLifeLab logo/NEG/.DS_Store b/react-app/public/images/SciLifeLab logo/NEG/.DS_Store
new file mode 100644
index 0000000..682997b
Binary files /dev/null and b/react-app/public/images/SciLifeLab logo/NEG/.DS_Store differ
diff --git a/react-app/public/images/SciLifeLab logo/NEG/Digital/.DS_Store b/react-app/public/images/SciLifeLab logo/NEG/Digital/.DS_Store
new file mode 100644
index 0000000..e204425
Binary files /dev/null and b/react-app/public/images/SciLifeLab logo/NEG/Digital/.DS_Store differ
diff --git a/react-app/public/images/SciLifeLab logo/NEG/Digital/SciLifeLab_Logotype_NEG.png b/react-app/public/images/SciLifeLab logo/NEG/Digital/SciLifeLab_Logotype_NEG.png
new file mode 100644
index 0000000..3847a70
Binary files /dev/null and b/react-app/public/images/SciLifeLab logo/NEG/Digital/SciLifeLab_Logotype_NEG.png differ
diff --git a/react-app/public/images/SciLifeLab logo/POS/.DS_Store b/react-app/public/images/SciLifeLab logo/POS/.DS_Store
new file mode 100644
index 0000000..7d62711
Binary files /dev/null and b/react-app/public/images/SciLifeLab logo/POS/.DS_Store differ
diff --git a/react-app/public/images/SciLifeLab logo/POS/Digital/.DS_Store b/react-app/public/images/SciLifeLab logo/POS/Digital/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/react-app/public/images/SciLifeLab logo/POS/Digital/.DS_Store differ
diff --git a/react-app/public/images/SciLifeLab logo/POS/Digital/SciLifeLab_Logotype_POS.png b/react-app/public/images/SciLifeLab logo/POS/Digital/SciLifeLab_Logotype_POS.png
new file mode 100644
index 0000000..70d9562
Binary files /dev/null and b/react-app/public/images/SciLifeLab logo/POS/Digital/SciLifeLab_Logotype_POS.png differ
diff --git a/react-app/public/images/scilifelogo.jpg b/react-app/public/images/scilifelogo.jpg
deleted file mode 100644
index a6bb513..0000000
Binary files a/react-app/public/images/scilifelogo.jpg and /dev/null differ
diff --git a/react-app/src/App.tsx b/react-app/src/App.tsx
index a7df423..c72800f 100644
--- a/react-app/src/App.tsx
+++ b/react-app/src/App.tsx
@@ -10,7 +10,7 @@ export default function App() {
       </h1>
   )
   return (
-    <html data-theme="light" className="min-h-screen bg-white">
+    <html data-theme="dark" className="min-h-screen bg-white">
       {HeaderComponent()}
       {body}
       {ArticleComponent()}
diff --git a/react-app/src/components/HeaderComponent.tsx b/react-app/src/components/HeaderComponent.tsx
index 2d230ed..fc19954 100644
--- a/react-app/src/components/HeaderComponent.tsx
+++ b/react-app/src/components/HeaderComponent.tsx
@@ -1,24 +1,27 @@
 import {ILink} from '../interfaces/types';
 
 export default function HeaderComponent() {
+    
+    var linkClasses: string = 'link link-hover';
     var links: { [id: string] : ILink; } = {
         'l1': { text: 'Random text for now', classes: 'pointer-events-none', href: '/#' },
-        'l2': { text: 'Data', classes: 'link link-hover', href: '/#' },
-        'l3': { text: 'Events & News', classes: 'link link-hover', href: '/#' },
-        'l4': { text: 'Contact', classes: 'link link-hover', href: '/#' },
-        'l5': { text: 'About', classes: 'link link-hover', href: '/#' },
+        'l2': { text: 'Data', classes: linkClasses, href: '/#' },
+        'l3': { text: 'Events & News', classes: linkClasses, href: '/#' },
+        'l4': { text: 'Contact', classes: linkClasses, href: '/#' },
+        'l5': { text: 'About', classes: linkClasses, href: '/#' },
     };
 
+    var buttonClasses: string = 'btn bg-fuchsia-950 text-white hover:bg-fuchsia-800 active:bg-fuchsia-900 focus:outline-none focus:ring focus:ring-fuchsia-300';
     var buttons: { [id: string] : ILink; } = {
-        'b1': { text: 'Sign In', classes: 'btn bg-fuchsia-950 text-white', href: '/#' },
+        'b1': { text: 'Sign In', classes: buttonClasses, href: '/#' },
     };
 
     return (
         // use bg-zinc-200 instead? similar to daisyUI light-theme footer
-        <div className="navbar h-[8rem] bg-black text-white">
+        <div className="navbar h-[8rem] bg-base-100">
             <div className="navbar-start">
                 <a href="/">
-                    <img className="w-[340px] h-[82px] border border-black" src="/images/scilifelogo.jpg" alt="SciLifeLab Logo" />
+                    <img className="w-[340px] h-[82px]" src="/images/SciLifeLab logo/Green_NEG/Digital/SciLifeLab_Logotype_Green_NEG.png" alt="SciLifeLab Logo" />
                 </a>
             </div>
             <div className="navbar-center hidden lg:flex">