diff --git a/src/Navbar/navbar.stories.tsx b/src/Navbar/navbar.stories.tsx
new file mode 100644
index 0000000..b1558cd
--- /dev/null
+++ b/src/Navbar/navbar.stories.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import Navbar, { NavbarProps } from './Navbar';
+
+export default {
+  title: 'Components/Navbar',
+  component: Navbar,
+} as Meta;
+
+const Template: Story<NavbarProps> = (args) => <Navbar {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'My App',
+  isLoggedIn: false,
+  onLogout: () => {
+    // Handle logout action
+    console.log('Logged out');
+  },
+};
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  title: 'My App',
+  isLoggedIn: true,
+  onLogout: () => {
+    // Handle logout action
+    console.log('Logged out');
+  },
+};
diff --git a/src/Navbar/navbar.tsx b/src/Navbar/navbar.tsx
new file mode 100644
index 0000000..97a6b9d
--- /dev/null
+++ b/src/Navbar/navbar.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { AppBar, Toolbar, Typography, Button } from '@material-ui/core';
+
+interface NavbarProps {
+  title: string;
+  isLoggedIn: boolean;
+  onLogout: () => void;
+}
+
+const Navbar: React.FC<NavbarProps> = ({ title, isLoggedIn, onLogout }) => {
+  return (
+    <AppBar position="static">
+      <Toolbar>
+        <Typography variant="h6">{title}</Typography>
+        {isLoggedIn && (
+          <Button color="inherit" onClick={onLogout}>
+            Logout
+          </Button>
+        )}
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default Navbar;
+
+/*npm install @material-ui/core @material-ui/icons
+*/
\ No newline at end of file