diff --git a/app/(website)/traffic/page.tsx b/app/(website)/traffic/page.tsx
index c6d637cd2..367f961f9 100644
--- a/app/(website)/traffic/page.tsx
+++ b/app/(website)/traffic/page.tsx
@@ -15,9 +15,9 @@ function Tab({
   return (
     <button
       className={twMerge(
-        "h-[90px] grow text-xl font-bold transition-all",
+        "grow border-2 border-transparent py-2 font-bold md:py-5 md:text-xl",
         selected &&
-          "rounded-xl border-2 border-[#F8C57B] bg-[#F8C57B33] shadow-[0px_4px_20px_0px_#F8C57B6E]",
+          "rounded-full border-[#F8C57B] bg-[#F8C57B] text-white shadow-[0px_4px_20px_0px_#F8C57B6E]",
       )}
       onClick={onSelected}
     >
@@ -340,7 +340,7 @@ export default function Page() {
   const [tab, setTab] = useState(1);
 
   return (
-    <>
+    <div className="container">
       <h1 className="mx-8 mb-8 mt-12 text-5xl font-bold xl:mx-[165px] xl:mb-6">
         交通方式
       </h1>
@@ -363,7 +363,7 @@ export default function Page() {
         />
       </div>
 
-      <div className="mb-10 mt-8 flex gap-3 px-3 xl:mx-[165px] xl:mb-[100px]">
+      <div className="mb-10 mt-8 flex gap-3 rounded-full bg-white/40 xl:mx-[165px] xl:mb-[100px]">
         <Tab selected={tab === 0} onSelected={() => setTab(0)}>
           大會接駁車
         </Tab>
@@ -377,6 +377,6 @@ export default function Page() {
       <div className="flex w-full items-center justify-center gap-8 px-5 text-xl xl:text-xl ">
         <TabContent tab={tab} />
       </div>
-    </>
+    </div>
   );
 }