diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index 406e48f8..cb55ca1f 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -123,7 +123,7 @@ export default function Hero({ className = '' }: { className?: string }) {
         {/* 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-[45px] bg-white p-${
+            className={`firefox rounded-[45px] bg-white p-${
               isMobile ? '3.5' : '6 px-6 '
             } lg:rounded-tl-none lg:rounded-bl-none`}
           >
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 256367b4..4d881fe0 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -364,3 +364,17 @@ template {
   color: #9ca3af;
   opacity: 1;
 }
+
+/* third container laylout for Firefox */
+@-moz-document url-prefix() {
+  .firefox{
+    padding: 32px;
+  }
+}
+
+/* For screens with a maximum width of 768px (mobile) */
+@media (max-width: 768px) {
+  .firefox {
+    padding: 16px;
+  }
+}
\ No newline at end of file