diff --git a/pages/index.tsx b/pages/index.tsx
index cbb13bf..318d5a9 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,7 @@
 import dynamic from 'next/dynamic';
 import { CircularProgress } from '@mui/material';
 import DashboardContainer from '@/views/DashboardContainer';
+import Header from '@/views/components/Header';
 import styles from './style.module.css';
 
 const MapsContainer = dynamic(() => import('@/views/MapsContainer'), {
@@ -23,11 +24,14 @@ const MapsContainer = dynamic(() => import('@/views/MapsContainer'), {
 
 export default function Home() {
   return (
-    <div className={styles.maincontainer}>
-      <MapsContainer />
-      <div className={styles.dashboardcontainer}>
-        <DashboardContainer/>
+    <>
+      <Header />
+      <div className={styles.maincontainer}>
+        <MapsContainer />
+        <div className={styles.dashboardcontainer}>
+          <DashboardContainer/>
+        </div>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/public/SailbotLogo.png b/public/SailbotLogo.png
new file mode 100644
index 0000000..6246461
Binary files /dev/null and b/public/SailbotLogo.png differ
diff --git a/views/components/Header.tsx b/views/components/Header.tsx
new file mode 100644
index 0000000..1e8ab0a
--- /dev/null
+++ b/views/components/Header.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+function Header() {
+  return (
+    <header style={headerStyle}>
+      <img
+        src="SailbotLogo.png"
+        alt="Logo"
+        style={logoStyle}
+      />
+      <h1 style={titleStyle}>UBC SAILBOT</h1>
+    </header>
+  )
+}
+
+const headerStyle = {
+  backgroundColor: '#26619c',
+  padding: '5px',
+  margin: '-10px',
+  marginBottom: '10px',
+  display: 'flex',
+  alignItems: 'center',
+  background: 'linear-gradient(to right, #26619c, #3498db)',
+};
+
+const logoStyle = {
+  width: '30px',
+  marginLeft: '50px',
+};
+
+const titleStyle = {
+  fontFamily: 'Verdana',
+  fontWeight: '14px',
+  color: 'white',
+  marginLeft: "20px",
+  fontSize: '30px',
+  letterSpacing: '2px',
+}
+
+export default Header