diff --git a/frontend/public/book.svg b/frontend/public/book.svg
new file mode 100644
index 0000000..bbf12e8
--- /dev/null
+++ b/frontend/public/book.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 2250 2250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M147.626,1238.29c677.363,-322.794 977.642,-37.111 977.642,-37.111c288.546,-177.54 526.698,-176.769 977.755,37.111l-279.878,-316.924c-359.867,-132.608 -455.483,-159.736 -697.877,1.443c-238.814,-146.286 -366.684,-151.709 -691.701,-1.394c-0,0 -302.409,324.723 -285.941,316.875Z" style="fill:#c44900;"/></svg>
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 39d347f..1314af7 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,6 +5,7 @@ import {useEffect, useState} from "react";
 import {Link, Route, Routes} from "react-router-dom";
 import BookDetailsPage from "./pages/BookDetailsPage/bookDetailsPage/BookDetailsPage.tsx";
 import BookGalleryPage from "./pages/BookGalleryPage/bookGalleryPage/BookGalleryPage.tsx";
+import Header from "./components/header/Header.tsx";
 
 
 
@@ -36,8 +37,7 @@ function App() {
 
     return (
     <>
-        <h1>LibraryApp</h1>
-        <h3>Cool motto ( ͡° ͜ʖ ͡°)</h3>
+        <Header />
         <Link to={"/books"}>All Books</Link>
         <Routes>
             <Route path={"/books"} element={<BookGalleryPage data={data}/>}/>
diff --git a/frontend/src/components/header/Header.css b/frontend/src/components/header/Header.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/components/header/Header.tsx b/frontend/src/components/header/Header.tsx
new file mode 100644
index 0000000..cc9ed51
--- /dev/null
+++ b/frontend/src/components/header/Header.tsx
@@ -0,0 +1,11 @@
+import "./Header.css";
+
+export default function Header() {
+    return (
+        <header>
+            <img id={"logo"} src={"book.svg"} alt={"Book Logo"}/>
+            <h1>TaleTrail</h1>
+            <p>Discover, Track, Repeat ( ͡° ͜ʖ ͡°)</p>
+        </header>
+    )
+}
\ No newline at end of file