diff --git a/frontend/public/images/fairpetuals-banner.png b/frontend/public/images/fairpetuals-banner.png
new file mode 100644
index 0000000..69ba0b0
Binary files /dev/null and b/frontend/public/images/fairpetuals-banner.png differ
diff --git a/frontend/public/images/fairpetuals-logo.png b/frontend/public/images/fairpetuals-logo.png
new file mode 100644
index 0000000..ddd11bc
Binary files /dev/null and b/frontend/public/images/fairpetuals-logo.png differ
diff --git a/frontend/src/app/components/navbar.tsx b/frontend/src/app/components/navbar.tsx
index dab93e2..7ec3b6d 100644
--- a/frontend/src/app/components/navbar.tsx
+++ b/frontend/src/app/components/navbar.tsx
@@ -1,14 +1,20 @@
-import Link from "next/link"
-import { FC } from "react"
-import { ConnectButton } from "../../components/web3/connect-button"
+import Image from 'next/image'
+import Link from 'next/link'
+import { FC } from 'react'
+
+import Banner from 'public/images/fairpetuals-banner.png'
+import Logo from 'public/images/fairpetuals-logo.png'
+
+import { ConnectButton } from '../../components/web3/connect-button'
 
 export const Navbar: FC = () => (
-  <div className="flex justify-between px-8 py-4 items-center">
-    <div className="flex gap-14 items-center">
-      <div className="font-bold text-xl">
-        Fairpetuals
+  <div className="flex items-center justify-between px-8 py-4">
+    <div className="flex items-center gap-14">
+      <div className="flex items-center gap-2 text-xl font-bold">
+        <Image src={Logo} width={45} height={45} className="rounded-full" alt="Asset Icon" />
+        <Image src={Banner} width={200} height={100} alt="Banner" />
       </div>
-      <div className="flex gap-6 items-center">
+      <div className="flex items-center gap-6">
         <Link href="/">Trade</Link>
         <Link href="/earn">Earn</Link>
       </div>