diff --git a/app/layout.tsx b/app/layout.tsx
index 1cf721bb1..2a60b5f72 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -35,7 +35,7 @@ export const metadata = {
 export default async function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={GeistSans.variable}>
-      <body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
+      <body className="min-w-fit overflow-auto bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
         <header>
           <Banner />
           <Navbar />
diff --git a/components/banner.tsx b/components/banner.tsx
index 6c6ef1cbe..4a98346f5 100644
--- a/components/banner.tsx
+++ b/components/banner.tsx
@@ -3,7 +3,7 @@ import Tooltip from './tooltip';
 
 function Banner() {
   return (
-    <div className="flex h-10 w-full items-center justify-center gap-x-8 bg-primary text-sm font-medium text-dark">
+    <div className="flex min-h-10 w-full flex-col items-center justify-center gap-x-8 bg-primary p-2 text-sm font-medium text-dark md:flex-row md:p-0">
       <span>
         Speak to a Specialist Now:{' '}
         <a href={`tel:${8882422605}`} className="ml-1">
diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index 6610de93b..f6ea3966b 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -28,7 +28,7 @@ export default async function Footer() {
           </a>
           <p className="ml-4">Monday - Friday 9:00am - 8:00pm EST</p>
           <p className="ml-4">Saturday 11:00am - 4:00pm EST</p>
-          <div className="ml-4 mt-3 flex flex-row items-center gap-4">
+          {/* <div className="ml-4 mt-3 flex flex-row items-center gap-4">
             <a href="https://www.facebook.com/carpartplanet" target="_blank" rel="noreferrer">
               <Image alt="facebook" src="/icons/facebook.png" width={20} height={20} />
             </a>
@@ -54,7 +54,7 @@ export default async function Footer() {
             <a href="https://twitter.com/carpartplanet" target="_blank" rel="noreferrer">
               <Image alt="twitter" src="/icons/twitter.png" width={16} height={16} />
             </a>
-          </div>
+          </div> */}
         </div>
         <Suspense
           fallback={
diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx
index ec761f720..9af07dfec 100644
--- a/components/layout/navbar/index.tsx
+++ b/components/layout/navbar/index.tsx
@@ -29,7 +29,7 @@ export default async function Navbar() {
               className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6"
             >
               <LogoSquare />
-              <div className="flex-none text-sm font-medium uppercase md:hidden lg:block">
+              <div className="flex-none text-sm font-medium uppercase md:hidden lg:block lg:text-lg">
                 {SITE_NAME}
               </div>
             </Link>
@@ -39,7 +39,7 @@ export default async function Navbar() {
               <Search />
             </Suspense>
           </div>
-          <div className="flex justify-end gap-3 md:w-1/3">
+          <div className="flex justify-end gap-5 pr-2 md:w-1/3">
             <Suspense fallback={<OpenProfile />}>
               <Profile />
             </Suspense>
@@ -51,7 +51,7 @@ export default async function Navbar() {
 
         {menu.length ? (
           <div className="hidden w-full items-center justify-center border-b py-3 md:flex">
-            <ul className="hidden gap-7 text-sm md:flex md:items-center">
+            <ul className="hidden gap-10 text-sm font-medium md:flex md:items-center lg:gap-16">
               {menu.map((item: Menu) => (
                 <li key={item.title}>
                   <Link
diff --git a/components/logo-square.tsx b/components/logo-square.tsx
index c57aa9141..40b84c331 100644
--- a/components/logo-square.tsx
+++ b/components/logo-square.tsx
@@ -4,7 +4,7 @@ import LogoIcon from './icons/logo';
 export default function LogoSquare() {
   return (
     <div className={clsx('flex h-[40px] w-[40px] flex-none items-center justify-center')}>
-      <LogoIcon className="h-[16px] w-[16px]" />
+      <LogoIcon className="h-[20px] w-[20px] lg:h-[24px] lg:w-[24px]" />
     </div>
   );
 }
diff --git a/components/profile/popover.tsx b/components/profile/popover.tsx
index 04062caf6..0099352aa 100644
--- a/components/profile/popover.tsx
+++ b/components/profile/popover.tsx
@@ -25,7 +25,7 @@ const ProfilePopover = ({ menu }: ProfilePopoverProps) => {
         leaveFrom="opacity-100 translate-y-0"
         leaveTo="opacity-0 translate-y-1"
       >
-        <Popover.Panel className="absolute right-0 z-10 mt-2 w-auto min-w-48 max-w-sm px-4 sm:px-0">
+        <Popover.Panel className="absolute -right-10 z-10 mt-2 w-72 max-w-lg px-4 sm:px-0 lg:right-0">
           <div className="flex flex-col gap-2 overflow-hidden rounded-md bg-white px-4 py-3 shadow-lg ring-1 ring-black/5">
             <span className="text-sm font-medium">My Account</span>
             <a
