diff --git a/client/package-lock.json b/client/package-lock.json
index 4b15f22..da43cbd 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -21,6 +21,7 @@
         "@types/react": "^18.2.31",
         "@types/react-dom": "^18.2.14",
         "axios": "^1.5.1",
+        "mui-image": "^1.0.7",
         "mui-markdown": "^1.1.11",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -33,6 +34,7 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "@types/mui-image": "^1.0.5",
         "@types/uuid": "^9.0.7"
       }
     },
@@ -4823,6 +4825,15 @@
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.3.tgz",
       "integrity": "sha512-Ys+/St+2VF4+xuY6+kDIXGxbNRO0mesVg0bbxEfB97Od1Vjpjx9KD1qxs64Gcb3CWPirk9Xe+PT4YiiHQ9T+eg=="
     },
+    "node_modules/@types/mui-image": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/mui-image/-/mui-image-1.0.5.tgz",
+      "integrity": "sha512-xbOpuowqvMyRiiM3U39AApyVj2xIoNH6egvMCWQ+d9AzILs0cT688x33AfPnQrnMqmJBclo4hRyUzpxGQwTqkQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.8.7",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.7.tgz",
@@ -13134,6 +13145,18 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node_modules/mui-image": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/mui-image/-/mui-image-1.0.7.tgz",
+      "integrity": "sha512-U79TWMKMfMC1ZiGnv/M+SaVJeUpubEjXOdy7w53RsvidUAMZ+4nW+QmDG9yg5fgWeYy6YJgLHyI9BHSDw76iIg==",
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material": "^5.0.1",
+        "prop-types": "^15.7.2",
+        "react": "^17.0.2 || ^18.0.0"
+      }
+    },
     "node_modules/mui-markdown": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/mui-markdown/-/mui-markdown-1.1.11.tgz",
@@ -21949,6 +21972,15 @@
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.3.tgz",
       "integrity": "sha512-Ys+/St+2VF4+xuY6+kDIXGxbNRO0mesVg0bbxEfB97Od1Vjpjx9KD1qxs64Gcb3CWPirk9Xe+PT4YiiHQ9T+eg=="
     },
+    "@types/mui-image": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/mui-image/-/mui-image-1.0.5.tgz",
+      "integrity": "sha512-xbOpuowqvMyRiiM3U39AApyVj2xIoNH6egvMCWQ+d9AzILs0cT688x33AfPnQrnMqmJBclo4hRyUzpxGQwTqkQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/node": {
       "version": "20.8.7",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.7.tgz",
@@ -28047,6 +28079,12 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "mui-image": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/mui-image/-/mui-image-1.0.7.tgz",
+      "integrity": "sha512-U79TWMKMfMC1ZiGnv/M+SaVJeUpubEjXOdy7w53RsvidUAMZ+4nW+QmDG9yg5fgWeYy6YJgLHyI9BHSDw76iIg==",
+      "requires": {}
+    },
     "mui-markdown": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/mui-markdown/-/mui-markdown-1.1.11.tgz",
diff --git a/client/package.json b/client/package.json
index 8707fde..41df559 100644
--- a/client/package.json
+++ b/client/package.json
@@ -16,6 +16,7 @@
     "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
     "axios": "^1.5.1",
+    "mui-image": "^1.0.7",
     "mui-markdown": "^1.1.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -52,6 +53,7 @@
     ]
   },
   "devDependencies": {
+    "@types/mui-image": "^1.0.5",
     "@types/uuid": "^9.0.7"
   }
 }
diff --git a/client/src/components/template/AppBar.tsx b/client/src/components/template/AppBar.tsx
index f433379..46717b5 100644
--- a/client/src/components/template/AppBar.tsx
+++ b/client/src/components/template/AppBar.tsx
@@ -1,8 +1,7 @@
 import { useContext } from "react";
-
 import AppBar from "@mui/material/AppBar";
 import Typography from "@mui/material/Typography";
-import { Button } from "@mui/material";
+import { Box, Button, Paper } from "@mui/material";
 import { toast } from "react-toastify";
 
 import {
@@ -46,25 +45,25 @@ const HeadBar = () => {
         borderBottom: "1px solid #dbd9d9",
       }}
     >
-      <Link to="/home-page" 
-        style={{ 
-          textDecoration: "none" ,
+      <Link
+        to="/home-page"
+        style={{
+          textDecoration: "none",
           marginLeft: "calc(15vw - 16px)",
         }}
       >
-        <Typography
-          variant="h4"
-          align="left"
-          color="primary"
-          style={{
-            marginTop: 10,
-            marginBottom: 10,
+        <Box
+          component="img"
+          sx={{
+            height: 55,
+            width: "auto",
+            maxHeight: 55,
+            maxWidth: "auto",
           }}
-        >
-          distributed
-        </Typography>
+          alt="App Logo"
+          src="https://i.postimg.cc/Kvg7sSNK/logo-distributed.jpg"
+        />
       </Link>
-
       <Button
         size="small"
         sx={{
@@ -73,7 +72,7 @@ const HeadBar = () => {
           alignSelf: "center",
           marginRight: 1,
           borderRadius: 20,
-          paddingX: 2
+          paddingX: 2,
         }}
         onClick={handleSignOut}
         endIcon={<LogoutIcon />}
diff --git a/client/src/components/template/NotFoundAppBar.tsx b/client/src/components/template/NotFoundAppBar.tsx
index 5d0b4a8..db5c9b5 100644
--- a/client/src/components/template/NotFoundAppBar.tsx
+++ b/client/src/components/template/NotFoundAppBar.tsx
@@ -1,6 +1,6 @@
+import { Box } from "@mui/material";
 import AppBar from "@mui/material/AppBar";
 import { Link } from "react-router-dom";
-import Typography from "@mui/material/Typography";
 
 const NotFoundHeadBar = () => {
   return (
@@ -24,17 +24,17 @@ const NotFoundHeadBar = () => {
           marginLeft: "calc(15vw - 16px)",
         }}
       >
-        <Typography
-          variant="h4"
-          align="left"
-          color="primary"
-          style={{
-            marginTop: 10,
-            marginBottom: 10,
+        <Box
+          component="img"
+          sx={{
+            height: 55,
+            width: "auto",
+            maxHeight: 55,
+            maxWidth: "auto",
           }}
-        >
-          distributed
-        </Typography>
+          alt="App Logo"
+          src="https://i.postimg.cc/Kvg7sSNK/logo-distributed.jpg"
+        />
       </Link>
     </AppBar>
   );