diff --git a/client/kb-frontend/src/App.jsx b/client/kb-frontend/src/App.jsx
index bbb7ce0..2d91765 100644
--- a/client/kb-frontend/src/App.jsx
+++ b/client/kb-frontend/src/App.jsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import './App.css'
+import Header from './components/Header'
 
 function App() {
   const [currentView, setCurrentView] = useState('list');
@@ -37,7 +38,7 @@ function App() {
 
   return (
     <div className="app">
-      {/*<Hedaer />*/}
+      <Header />
 
       {currentView === 'list' ? (
         <>
diff --git a/client/kb-frontend/src/components/Header.css b/client/kb-frontend/src/components/Header.css
new file mode 100644
index 0000000..ac88d53
--- /dev/null
+++ b/client/kb-frontend/src/components/Header.css
@@ -0,0 +1,11 @@
+.header {
+  background-color: #2c3e50;
+  color: white;
+  padding: 1rem 2rem;
+  text-align: center;
+}
+
+.header h1 {
+  margin: 0;
+  font-size: 2rem;
+}
\ No newline at end of file
diff --git a/client/kb-frontend/src/components/Header.jsx b/client/kb-frontend/src/components/Header.jsx
index e69de29..359c9cc 100644
--- a/client/kb-frontend/src/components/Header.jsx
+++ b/client/kb-frontend/src/components/Header.jsx
@@ -0,0 +1,11 @@
+import './Header.css'
+
+function Header() {
+    return (
+        <header className='header'>
+            <h1>Cram-A-Lot Knowledge Base</h1>
+        </header>
+    );
+}
+
+export default Header;
\ No newline at end of file