diff --git a/frontend/src/components/Logo.tsx b/frontend/src/components/Logo.tsx
new file mode 100644
index 00000000..7fea40e3
--- /dev/null
+++ b/frontend/src/components/Logo.tsx
@@ -0,0 +1,34 @@
+const Logo = ({ height, width }: { height: number; width: number }) => {
+  return (
+    <svg
+      id="Layer_1"
+      data-name="Layer 1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 943.11 911.62"
+      height={height}
+      width={width}
+    >
+      <ellipse cx="471.56" cy="454.28" rx="471.56" ry="454.28" fill="#46509e" />
+      <ellipse cx="471.56" cy="390.28" rx="233.66" ry="207" fill="#37474f" />
+      <path
+        d="M705.22,849c-36.69,21.14-123.09,64.32-240.64,62.57A469.81,469.81,0,0,1,237.89,849V394.76H705.22Z"
+        fill="#37474f"
+      />
+      <path
+        d="M658.81,397.7V873.49a478.12,478.12,0,0,1-374.19,0V397.7c0-95.55,83.78-173,187.1-173S658.81,302.15,658.81,397.7Z"
+        fill="#fff"
+      />
+      <polygon
+        points="565.02 431.68 471.56 514.49 378.09 431.68 565.02 431.68"
+        fill="#46509e"
+      />
+      <ellipse cx="378.09" cy="369.58" rx="23.37" ry="20.7" fill="#37474f" />
+      <ellipse cx="565.02" cy="369.58" rx="23.37" ry="20.7" fill="#37474f" />
+      <path
+        d="M658.49,400.63c0-40-36.6-72.45-81.79-72.45s-81.78,32.41-81.78,72.45a64.79,64.79,0,0,0,7.9,31.05H440.29a64.79,64.79,0,0,0,7.9-31.05c0-40-36.59-72.45-81.78-72.45s-81.79,32.41-81.79,72.45l-46.73-10.35c0-114.31,104.64-207,233.67-207s233.66,92.69,233.66,207Z"
+        fill="#37474f"
+      />
+    </svg>
+  );
+};
+export default Logo;
diff --git a/frontend/src/components/navBar/NavBar.tsx b/frontend/src/components/navBar/NavBar.tsx
index a732e952..044f2a3d 100644
--- a/frontend/src/components/navBar/NavBar.tsx
+++ b/frontend/src/components/navBar/NavBar.tsx
@@ -5,7 +5,6 @@ import {
   createStyles,
   Group,
   Header,
-  Image,
   Paper,
   Stack,
   Text,
@@ -16,6 +15,7 @@ import { NextLink } from "@mantine/next";
 import getConfig from "next/config";
 import { ReactNode, useEffect, useState } from "react";
 import useUser from "../../hooks/user.hook";
+import Logo from "../Logo";
 import ActionAvatar from "./ActionAvatar";
 
 const { publicRuntimeConfig } = getConfig();
@@ -180,12 +180,7 @@ const NavBar = () => {
       <Container className={classes.header}>
         <NextLink href="/">
           <Group>
-            <Image
-              src="/img/logo.svg"
-              alt="Pinvgin Share Logo"
-              height={35}
-              width={35}
-            />
+            <Logo height={35} width={35} />
             <Text weight={600}>Pingvin Share</Text>
           </Group>
         </NextLink>