diff --git a/react-app/public/images/scilifelogo.jpg b/react-app/public/images/scilifelogo.jpg
new file mode 100644
index 0000000..a6bb513
Binary files /dev/null and b/react-app/public/images/scilifelogo.jpg differ
diff --git a/react-app/src/App.tsx b/react-app/src/App.tsx
index be8911d..762cbf2 100644
--- a/react-app/src/App.tsx
+++ b/react-app/src/App.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import FooterComponent from './components/FooterComponent';
+import HeaderComponent from './components/HeaderComponent';
 
 export default function App() {
   let body = (
@@ -9,6 +10,7 @@ export default function App() {
   )
   return (
     <html data-theme="light" className="min-h-screen bg-white">
+      {HeaderComponent()}
       {body}
       {FooterComponent()}
     </html>
diff --git a/react-app/src/components/FooterComponent.tsx b/react-app/src/components/FooterComponent.tsx
index 1e89ac0..afeec49 100644
--- a/react-app/src/components/FooterComponent.tsx
+++ b/react-app/src/components/FooterComponent.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function FooterComponent() {
   return (
     <footer className="footer p-10 bg-base-300 text-base-content fixed bottom-0">
diff --git a/react-app/src/components/HeaderComponent.tsx b/react-app/src/components/HeaderComponent.tsx
new file mode 100644
index 0000000..2d230ed
--- /dev/null
+++ b/react-app/src/components/HeaderComponent.tsx
@@ -0,0 +1,39 @@
+import {ILink} from '../interfaces/types';
+
+export default function HeaderComponent() {
+    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: '/#' },
+    };
+
+    var buttons: { [id: string] : ILink; } = {
+        'b1': { text: 'Sign In', classes: 'btn bg-fuchsia-950 text-white', 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-start">
+                <a href="/">
+                    <img className="w-[340px] h-[82px] border border-black" src="/images/scilifelogo.jpg" alt="SciLifeLab Logo" />
+                </a>
+            </div>
+            <div className="navbar-center hidden lg:flex">
+                <ul className="menu menu-horizontal px-1">
+                {Object.keys(links).map( key => (
+                    <li>{<a className={links[key].classes} href={links[key].href}>{links[key].text}</a>}</li>
+                ))}
+                </ul>
+            </div>
+            {Object.keys(buttons).map( key => (
+                <div className="navbar-end">
+                    {<a className={buttons[key].classes} href={buttons[key].href}>{buttons[key].text}</a>}
+                </div>
+            ))}
+        </div>
+    )
+  }
+  
\ No newline at end of file
diff --git a/react-app/src/interfaces/types.ts b/react-app/src/interfaces/types.ts
new file mode 100644
index 0000000..595cf6c
--- /dev/null
+++ b/react-app/src/interfaces/types.ts
@@ -0,0 +1,5 @@
+export interface ILink {
+    text: string;
+    classes: string;
+    href: string;
+};
\ No newline at end of file
