diff --git a/core/components/navigation/MainNavBar.js b/core/components/navigation/MainNavBar.js
index e51e432..f5f704f 100644
--- a/core/components/navigation/MainNavBar.js
+++ b/core/components/navigation/MainNavBar.js
@@ -1,4 +1,5 @@
 import { ThreeBarsIcon } from '@primer/octicons-react';
+import Image from 'next/image';
 import Link from 'next/link';
 import React from 'react';
 
@@ -13,8 +14,9 @@ const Navbar = () => {
 			<div className="container px-4 mx-auto flex flex-wrap items-center justify-between">
 				<div className="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
 					<Link href="/">
-						<a className="font-bold leading-relaxed flex justify-center items-center inline-block mr-4 py-2  uppercase">
-							<img src="/logo.png" className="h-[48px]" alt="" /> <TextLogo />
+						<a className="font-bold leading-relaxed flex justify-center items-center mr-4 py-2  uppercase">
+							<Image src="/logo.png" width="30%" height={48} alt="" />
+							<TextLogo />
 						</a>
 					</Link>
 					<button