diff --git a/daily-thought-frontend/src/components/titlebar/TitleBar.tsx b/daily-thought-frontend/src/components/titlebar/TitleBar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..51051282fd796e15c3c053943df2a18a35ca008c
--- /dev/null
+++ b/daily-thought-frontend/src/components/titlebar/TitleBar.tsx
@@ -0,0 +1,23 @@
+import styles from '../../styles/TitleBar.module.css'
+import { RxHamburgerMenu } from "react-icons/rx"
+import { FC, PropsWithChildren, useState } from 'react';
+
+type TitleBarProps = {
+  NavBarToggle: () => void;
+}
+
+const TitleBar:FC<PropsWithChildren<TitleBarProps>> = ({
+  NavBarToggle
+}) => {
+
+
+  return (
+    <div className={styles.titlebar}>
+      <button className={styles.navButton} onClick={() => NavBarToggle()}><RxHamburgerMenu size={"32px"}/></button>
+      <p className={styles.title}>Feed</p>
+      <button>Settings</button>
+    </div>
+  )
+}
+
+export default TitleBar;
\ No newline at end of file
diff --git a/daily-thought-frontend/src/styles/TitleBar.module.css b/daily-thought-frontend/src/styles/TitleBar.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..ec1b5f639418892155e3023cd253f068aea9db81
--- /dev/null
+++ b/daily-thought-frontend/src/styles/TitleBar.module.css
@@ -0,0 +1,17 @@
+.titlebar {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  height: 64px;
+  align-items: center;
+  padding: 8px 16px;
+}
+
+.navButton {
+  background: none;
+  border: none;
+}
+
+.title {
+  font-weight: bold;
+}
\ No newline at end of file