diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index cb55ca1fe..2d07e24be 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -36,14 +36,14 @@ export default function Hero({ className = '' }: { className?: string }) {
       <div
         className={`sections ${
           isMobile ? '' : 'mt-1'
-        } flex flex-wrap items-center justify-center gap-2 sm:gap-1 md:gap-0`}
+        } flex flex-wrap items-center justify-center gap-2 lg:gap-1 xl:gap-0`}
       >
         {/* first */}
-        <div className=" rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1  md:rounded-tr-none md:rounded-br-none">
+        <div className=" rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1  xl:rounded-tr-none xl:rounded-br-none">
           <div
             className={`h-full rounded-[45px] bg-white p-${
-              isMobile ? '3.5' : '6 py-8'
-            }  md:rounded-tr-none md:rounded-br-none`}
+              isMobile ? '3.5' : '6 py-6'
+            }  xl:rounded-tr-none xl:rounded-br-none`}
           >
             {/* Add Mobile check here */}
             {isMobile ? (
@@ -84,11 +84,11 @@ export default function Hero({ className = '' }: { className?: string }) {
           </div>
         </div>
         {/* second */}
-        <div className=" rounded-[50px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1  md:rounded-none  md:py-1 md:px-0">
+        <div className=" rounded-[50px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1  xl:rounded-none  xl:py-1 xl:px-0">
           <div
             className={`rounded-[45px] bg-white p-${
               isMobile ? '3.5' : '6 py-6'
-            }  md:rounded-none`}
+            }  xl:rounded-none`}
           >
             {/* Add Mobile check here */}
             {isMobile ? (
@@ -121,11 +121,11 @@ export default function Hero({ className = '' }: { className?: string }) {
           </div>
         </div>
         {/* third */}
-        <div className=" rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/80 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-tl-none md:rounded-bl-none ">
+        <div className=" rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/80 via-[#3B82F6] to-[#9333EA]/50 p-1 xl:rounded-tl-none xl:rounded-bl-none ">
           <div
-            className={`firefox rounded-[45px] bg-white p-${
+            className={`rounded-[45px] bg-white p-${
               isMobile ? '3.5' : '6 px-6 '
-            } lg:rounded-tl-none lg:rounded-bl-none`}
+            } xl:rounded-tl-none xl:rounded-bl-none`}
           >
             {/* Add Mobile check here */}
             {isMobile ? (
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index d3df8b445..c7b51cb10 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -242,7 +242,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             </p>
           </NavLink>
           {conversations && (
-            <div className="conversations-container max-h-[25rem] overflow-y-auto">
+            <div className="conversations-container max-h-[19rem] overflow-y-auto">
               <p className="ml-6 mt-3 text-sm font-semibold">Chats</p>
               {conversations?.map((conversation) => (
                 <ConversationTile