diff --git a/public/disconnect.png b/public/disconnect.png
new file mode 100644
index 0000000..b6aefd2
Binary files /dev/null and b/public/disconnect.png differ
diff --git a/src/app/components/navbar/NavBar.tsx b/src/app/components/navbar/NavBar.tsx
index 3a2e569..2219980 100644
--- a/src/app/components/navbar/NavBar.tsx
+++ b/src/app/components/navbar/NavBar.tsx
@@ -13,7 +13,7 @@ const NavBar = () => {
 
   console.log(path);
 
-  const { handleConnetWalletBtnClick, address, connection } = useAppContext();
+  const { handleConnetWalletBtnClick, address, connection, disconnectWallet  } = useAppContext();
 
   console.log("Connection Log")
   console.log(connection)
@@ -107,7 +107,19 @@ const NavBar = () => {
               height={24}
               alt="StarkNetLogo"
             ></Image>
-            <span>{address ? address?.substring(0, 6) : "Connect Wallet"}</span>
+            <span>{address ? address?.substring(0, 6) : walletConnect}</span>
+          </li>
+          <li
+            className={styles.active_navbar_menuItems_diconnect}
+            onClick={disconnectWallet}
+          >
+            <Image
+              src={"/disconnect.png"}
+              width={24}
+              height={24}
+              alt="StarkNetLogo"
+            ></Image>
+            <span>{address ? address?.substring(0, 6) : "Disconnect Wallet"}</span>
           </li>
         </ul>
       </div>
diff --git a/src/app/components/navbar/navbar.module.css b/src/app/components/navbar/navbar.module.css
index 4c3fe00..f2e3cea 100644
--- a/src/app/components/navbar/navbar.module.css
+++ b/src/app/components/navbar/navbar.module.css
@@ -99,11 +99,16 @@
   padding: 10px;
 }
 
-.active_navbar_menuItems {
+.active_navbar_menuItems, .active_navbar_menuItems_diconnect {
   background-color: var(--activeLinkIndicator);
   cursor: pointer;
 }
 
+.active_navbar_menuItems_diconnect{
+  color: black;
+  background-color: white;
+}
+
 .display {
   display: none;
 }
diff --git a/src/app/providers/AppProvider.tsx b/src/app/providers/AppProvider.tsx
index 335957a..e09c3ae 100644
--- a/src/app/providers/AppProvider.tsx
+++ b/src/app/providers/AppProvider.tsx
@@ -19,6 +19,7 @@ const initialData = {
   address: null as any,
   connection: null as any,
   handleConnetWalletBtnClick: null as any,
+  disconnectWallet: null as any,
 };
 
 export const AppContext = createContext(initialData);
@@ -120,8 +121,9 @@ const connectWallet = async () => {
       address,
       connection,
       handleConnetWalletBtnClick,
+      disconnectWallet
     }),
-    [account, contract, address, connection]
+    [account, contract, address, connection, ]
   );
 
   useEffect(() => {