diff --git a/frontend/src/home/header.tsx b/frontend/src/home/header.tsx
index 0995c0a746bf21852c4fe3abe32e3e4311cbd477..a6cd09a8cc593016ccd7cf705b2462ffb6d4c36d 100644
--- a/frontend/src/home/header.tsx
+++ b/frontend/src/home/header.tsx
@@ -12,7 +12,7 @@ export default function Header() {
     const newvalue = e.target.value;
     setSearch(newvalue);
   };
-
+  // bg-gradient-to-t from-sky-200
   return (
     <div className="flex flex-col ">
       <div className="flex flex-col md:px-56 z-10 ">
diff --git a/frontend/src/pages/citylist.tsx b/frontend/src/pages/citylist.tsx
index 4ecd94c8158b5924d4f1f49bfe933ffab6395d19..87db44e8a990ef8493344e3c82f397326f4a967d 100644
--- a/frontend/src/pages/citylist.tsx
+++ b/frontend/src/pages/citylist.tsx
@@ -7,8 +7,9 @@ type CityProps = {
 export default function Citylist({ handleClick }: CityProps) {
   const [active, setActive] = useState(0);
 
-  const onactive = "text-start  px-5 py-2 underline whitespace-nowrap";
-  const offactive = "text-start  px-5 py-2 whitespace-nowrap";
+  const onactive =
+    "text-start  px-5 py-2 whitespace-nowrap w-full border-b-4 md:border-b-0 md:border-r-4 border-sky-500";
+  const offactive = "text-start  px-5 py-2 whitespace-nowrap w-full  ";
 
   const clickActive = (a: number) => {
     setActive(a);