diff --git a/daily-thought-frontend/src/components/navigation/NavMenuItem.tsx b/daily-thought-frontend/src/components/navigation/NavMenuItem.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5f93da30bb9a6f15299f1d8b5ce68a61d657ce5c
--- /dev/null
+++ b/daily-thought-frontend/src/components/navigation/NavMenuItem.tsx
@@ -0,0 +1,22 @@
+import { FC, PropsWithChildren } from 'react';
+import styles from '../../styles/NavMenuItem.module.css'
+
+type NavMenuItemProps = {
+  label: string;
+  icon: any;
+}
+
+const NavMenuItem:FC<PropsWithChildren<NavMenuItemProps>> = ({
+  label,
+  icon
+}) => {
+
+  return (
+    <div className={styles.menuItem}>
+      {icon}
+      <p className={styles.label}>{label}</p>
+    </div>
+  )
+}
+
+export default NavMenuItem;
\ No newline at end of file
diff --git a/daily-thought-frontend/src/styles/NavMenuItem.module.css b/daily-thought-frontend/src/styles/NavMenuItem.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..f84a194ad32c4d29a4fa1b0a73ce3aae24ce21c0
--- /dev/null
+++ b/daily-thought-frontend/src/styles/NavMenuItem.module.css
@@ -0,0 +1,15 @@
+.menuItem {
+  margin: 8px 0px;;
+  padding: 16px 24px;
+  /* color:rgb(100 116 139); */
+
+  border-radius: 32px;
+  border: 1px solid rgb(226 232 240);
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+}
+
+.label {
+  margin-left: 8px;
+}
\ No newline at end of file