diff --git a/src/App.test.tsx b/src/App.test.tsx
index 9c4da8e..441db62 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -1,10 +1,24 @@
-import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { render, screen, fireEvent  } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import App from './App';
 import "@testing-library/jest-dom";
+import Hamburger from './Hamburgerbutton';
 
 // remove this test when real tests are added
 test('renders header', () => {
     render(<App />);
     const header = screen.getAllByText(/MarsioKart/i);
     expect(header[0]).toBeInTheDocument();
-  });
\ No newline at end of file
+  });
+
+test('calls onClick when Hamburger button is clicked', () => {
+    const handleClick = jest.fn();
+    render(<Hamburger onClick={handleClick} label="Click Me" />);
+  
+    const button = screen.getByText('Click Me');
+    fireEvent.click(button);
+  
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
diff --git a/src/App.tsx b/src/App.tsx
index 1e256f3..29788f9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,14 +2,18 @@ import React from 'react';
 import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
 import './App.scss';
 import Home from './Home/Home';
+import Header from './header';
 import { Quiz } from './Quiz/Quiz';
 import Footer from './Footer/Footer';
 
+
+
 function App() {
   return (
     <div className="App">
       <Router>
         <h1>MarsioKart</h1>
+        <Header/>
         <Routes>
           <Route path='/'
           element={<Home/>}/>
diff --git a/src/Hamburgerbutton.scss b/src/Hamburgerbutton.scss
new file mode 100644
index 0000000..5595bd3
--- /dev/null
+++ b/src/Hamburgerbutton.scss
@@ -0,0 +1,18 @@
+.hamburger {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    width: 30px;
+    height: 30px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+  }
+  
+  .line {
+    width: 100%;
+    height: 3px;
+    background-color: black;
+    transition: all 0.3s ease;
+  }
+  
\ No newline at end of file
diff --git a/src/Hamburgerbutton.tsx b/src/Hamburgerbutton.tsx
new file mode 100644
index 0000000..505bff2
--- /dev/null
+++ b/src/Hamburgerbutton.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import './Hamburgerbutton.scss'; // styling for the hmauburger button icon
+
+interface HamburgerProps {
+  onClick: () => void;
+  label: string;
+
+}
+
+const Hamburger: React.FC<HamburgerProps> = ({ onClick , label}) => {
+
+  const handleClick = () => {
+    onClick();
+  };
+
+  return (
+    <button onClick={handleClick} className="hamburger">
+         {/* draw the 3 lines which make up the hmburger  */}
+         {label}
+        <div className="line" />
+        <div className="line" />
+        <div className="line" />
+    </button>
+  );
+};
+
+export default Hamburger;
\ No newline at end of file
diff --git a/src/header.tsx b/src/header.tsx
new file mode 100644
index 0000000..d4fd937
--- /dev/null
+++ b/src/header.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import Hamburger from './Hamburgerbutton';
+
+const Header: React.FC = () => {
+  const handleHamburgerClick = () => {
+    console.log('Hamburger menu clicked!');
+  };
+
+  return (
+    <div className="App">
+      <Hamburger onClick={handleHamburgerClick} label={""}/>
+    </div>
+  );
+};
+
+export default Header;
\ No newline at end of file