diff --git a/src/App.tsx b/src/App.tsx
index 4ca5c55..bd6d1c5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import { Grid, GridItem, Show } from "@chakra-ui/react";
+import NavBar from "./components/NavBar";
 
 function App() {
   return (
@@ -8,8 +9,8 @@ function App() {
         lg: `"nav nav" "aside main"`,
       }}
     >
-      <GridItem area="nav" bg="coral">
-        Nav
+      <GridItem area="nav">
+        <NavBar />
       </GridItem>
       <Show above="lg">
         <GridItem area="aside" bg="gold">
diff --git a/src/assets/logo.webp b/src/assets/logo.webp
new file mode 100644
index 0000000..af2055e
Binary files /dev/null and b/src/assets/logo.webp differ
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
new file mode 100644
index 0000000..a08ab81
--- /dev/null
+++ b/src/components/NavBar.tsx
@@ -0,0 +1,13 @@
+import { HStack, Image, Text } from '@chakra-ui/react'
+import logo from '../assets/logo.webp';
+
+const NavBar = () => {
+  return (
+    <HStack>
+      <Image src={logo} boxSize='60px' />
+      <Text>NavBar</Text>
+    </HStack>
+  )
+}
+
+export default NavBar
\ No newline at end of file