diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx
index 8832d19de76a38ddfdd39e62437c54ebaa18569f..1d5d4db2538e6b9777960c5e40761d2fe877106f 100644
--- a/src/pages/search/index.tsx
+++ b/src/pages/search/index.tsx
@@ -89,10 +89,10 @@ const SearchPage = () => {
             />
           </div>
         </div>
-        <div>
-          <button onClick={() => {setIsShowEps(true); setIsShowPodcast(true)}}>all</button>
-          <button onClick={() => {setIsShowEps(false); setIsShowPodcast(true)}}>podcast</button>
-           <button onClick={() => {setIsShowPodcast(false); setIsShowEps(true)}}>eps</button>
+        <div className="flex flex-row gap-2">
+          <button className="flex bg-yellow text-black" onClick={() => {setIsShowEps(true); setIsShowPodcast(true)}}>all</button>
+          <button className="flex bg-yellow text-black" onClick={() => {setIsShowEps(false); setIsShowPodcast(true)}}>podcast</button>
+           <button className="flex bg-yellow text-black" onClick={() => {setIsShowPodcast(false); setIsShowEps(true)}}>eps</button>
         </div>
         
       </div>
@@ -102,23 +102,26 @@ const SearchPage = () => {
           {
             isShowPodcast ? 
             <div>
-              <p>PODCAST</p>
-            {podcasts
-              .map((podcast: cardProps, idx: number) => (
-                <PodcastCard key={idx} {...podcast} />
-              ))}
+              <p className="text-black text-3xl">PODCAST</p>
+              <div className="grid grid-cols-5 content-start gap-4">
+                {podcasts
+                  .map((podcast: cardProps, idx: number) => (
+                    <PodcastCard key={idx} {...podcast} />
+                  ))}
+              </div>
+
             </div>
             : <></>
           }
           {
             isShowEps ? 
             <div>
-              <p>EPISODE</p>
-            {
-              episodes.map((eps: cardEpsProps, idx: number) => (
-                <EpisodeCard key={idx} {...eps} />
-              ))}
-
+              <p className="text-black text-3xl">EPISODE</p>
+              <div className="grid grid-cols-5 content-start gap-4">
+                { episodes.map((eps: cardEpsProps, idx: number) => (
+                  <EpisodeCard key={idx} {...eps} />
+                ))}
+              </div>
             </div>
             : <></>
           }
diff --git a/src/pages/subscription/index.tsx b/src/pages/subscription/index.tsx
index e0a9ca9f50de6ec3855b1298eb6e0f91af9ea1e0..2f52acc9ddc6c452ae6eaec8e53bfb1f59191064 100644
--- a/src/pages/subscription/index.tsx
+++ b/src/pages/subscription/index.tsx
@@ -18,15 +18,15 @@ const SubscriptionPage = ({setIsSubsOpen}:{setIsSubsOpen: (bool: boolean)=>void}
             }
             );
     
-            setExpiredDate(res.data.expired_date);
+            setExpiredDate(res.data.result);
         })();
-    }, []);
+    }, [expiredDate]);
 
     const onHandleExtend = () => {
         toast.promise((
         (async () => {
           await axios.post(
-            `${import.meta.env.VITE_REST_URL}/subs/extend`,{
+            `${import.meta.env.VITE_REST_URL}/subs/extend`, {},{
               headers: {
                 Authorization: `Bearer ${localStorage.getItem("token")}`,
               }
@@ -34,7 +34,7 @@ const SubscriptionPage = ({setIsSubsOpen}:{setIsSubsOpen: (bool: boolean)=>void}
           )
         })()
         ),{
-          loading: 'Saving...',
+          loading: 'Loading...',
           success: <b>Your Subscription has extended!</b>,
           error: <b>Failed to extend</b>,
         });
@@ -53,11 +53,11 @@ const SubscriptionPage = ({setIsSubsOpen}:{setIsSubsOpen: (bool: boolean)=>void}
               <ul className="flex flex-col text-black font-semibold gap-5">
                 <li className="">
                   <div className="self-center">Expired date</div>
-                  <input className="border-0 rounded-lg font-thin" value={expiredDate} type="text" disabled/>
+                  <input className="border-0 rounded-lg font-thin text-black" value={expiredDate} type="text" disabled/>
                 </li>
               </ul>
           </div>
-          <button className="bg-white rounded-full px-8 py-4 font-semibold" onClick={onHandleExtend} >Extend</button>
+          <button className="bg-white rounded-full px-8 py-4 font-semibold hover:scale-110" onClick={onHandleExtend} >Extend</button>
       </div>
     </section>
   );