diff --git a/apps/client/src/components/home/banner/card/lg.tsx b/apps/client/src/components/home/banner/card/lg.tsx
index 8fdcec95..558487a3 100644
--- a/apps/client/src/components/home/banner/card/lg.tsx
+++ b/apps/client/src/components/home/banner/card/lg.tsx
@@ -7,12 +7,34 @@ interface IHomeBannerLgCardProps {
 }
 
 const HomeBannerLgCard = ({ description, handleClick, image }: IHomeBannerLgCardProps) => {
-  return (
-    <button className="flex w-full cursor-pointer" onClick={handleClick}>
-      <div className="relative h-[92px] w-[92px]">
-        <Image src={`/images/home/${image}.jpeg`} alt="image" fill={true} objectFit="cover" />
+  const renderIcon = () => {
+    if (image === "onair") {
+      return (
+        <div className="flex h-[92px] w-[92px] items-center justify-center bg-red-500">
+          <div className="relative">
+            <svg className="h-14 w-14 text-white drop-shadow-lg" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" />
+            </svg>
+            <span className="absolute -right-0.5 -top-0.5 flex h-4 w-4">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-white opacity-75"></span>
+              <span className="relative inline-flex h-4 w-4 rounded-full bg-white shadow-lg"></span>
+            </span>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="relative h-[92px] w-[92px] overflow-hidden">
+        <Image src={`/images/home/${image}.jpeg`} alt="image" fill={true} className="object-cover" />
       </div>
-      <div className="flex h-[92px] w-[231px] items-center justify-center whitespace-pre bg-white text-[18px] font-bold leading-[21px] text-[#222222]">
+    );
+  };
+
+  return (
+    <button className="group flex w-full cursor-pointer overflow-hidden rounded-lg shadow-md transition-all hover:shadow-xl" onClick={handleClick}>
+      {renderIcon()}
+      <div className="flex h-[92px] w-[231px] items-center justify-center whitespace-pre bg-white text-[18px] font-bold leading-[21px] text-[#222222] transition-all group-hover:bg-gray-50">
         {description}
       </div>
     </button>
diff --git a/apps/client/src/components/home/banner/card/sm.tsx b/apps/client/src/components/home/banner/card/sm.tsx
index 71114fa0..91e2f691 100644
--- a/apps/client/src/components/home/banner/card/sm.tsx
+++ b/apps/client/src/components/home/banner/card/sm.tsx
@@ -7,12 +7,46 @@ interface IHomeBannerSmCardProps {
 }
 
 const HomeBannerSmCard = ({ description, handleClick, image }: IHomeBannerSmCardProps) => {
-  return (
-    <div className="flex w-full cursor-pointer" onClick={handleClick}>
-      <div className="relative h-[70px] min-w-[70px]">
-        <Image src={`/images/home/${image}.jpeg`} alt="image" fill={true} objectFit="cover" />
+  const renderIcon = () => {
+    if (image === "onair") {
+      return (
+        <div className="flex h-[70px] w-[70px] shrink-0 items-center justify-center bg-red-500">
+          <div className="relative">
+            <svg
+              className="h-11 w-11 text-white drop-shadow-lg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" />
+            </svg>
+            <span className="absolute -right-0.5 -top-0.5 flex h-3.5 w-3.5">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-white opacity-75"></span>
+              <span className="relative inline-flex h-3.5 w-3.5 rounded-full bg-white shadow-lg"></span>
+            </span>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="relative h-[70px] w-[70px] shrink-0 overflow-hidden">
+        <Image
+          src={`/images/home/${image}.jpeg`}
+          alt="image"
+          fill={true}
+          className="object-cover"
+        />
       </div>
-      <div className="flex h-[70px] w-full items-center bg-white pl-[41px] text-[17px] font-bold text-[#222222] sm:pl-[38px] sm:text-[18px] md:pl-[33px]">
+    );
+  };
+
+  return (
+    <div
+      className="flex w-full cursor-pointer overflow-hidden rounded-lg shadow-md"
+      onClick={handleClick}
+    >
+      {renderIcon()}
+      <div className="flex h-[70px] w-full items-center break-keep bg-white pl-[41px] text-[17px] font-semibold text-[#222222] sm:pl-[38px] sm:text-[18px] md:pl-[33px]">
         {description}
       </div>
     </div>
diff --git a/apps/client/src/components/home/banner/index.tsx b/apps/client/src/components/home/banner/index.tsx
index a371cc11..fc076547 100644
--- a/apps/client/src/components/home/banner/index.tsx
+++ b/apps/client/src/components/home/banner/index.tsx
@@ -4,7 +4,7 @@ import CaretLeftIcon from "./caretLeft";
 import CaretRightIcon from "./caretRight";
 import { useGetLive } from "@/query/youtube";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import HomeBannerLgCard from "./card/lg";
 import HomeBannerSmCard from "./card/sm";
 
@@ -21,6 +21,18 @@ const HomeBanner = () => {
 
   const { data } = useGetLive();
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentBanner((prev) => {
+        if (prev === HomeBannerEnum.Live) return HomeBannerEnum.Bible;
+        if (prev === HomeBannerEnum.Bible) return HomeBannerEnum.HomeWorship;
+        return HomeBannerEnum.Live;
+      });
+    }, 4000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   const handleOpenLive = () => {
     open(data?.url);
   };
diff --git a/apps/client/src/components/homeWorship/detail/index.tsx b/apps/client/src/components/homeWorship/detail/index.tsx
index 74305d07..2fe27f96 100644
--- a/apps/client/src/components/homeWorship/detail/index.tsx
+++ b/apps/client/src/components/homeWorship/detail/index.tsx
@@ -46,7 +46,10 @@ const HomeWorshipDetail = () => {
     <div className="flex min-h-screen flex-col bg-white">
       {/* 헤더 */}
       <div className="flex items-center justify-between border-b border-gray-200 px-4 py-4">
-        <button onClick={() => push("/discipleship/homeworship")} className="flex items-center gap-2 text-gray-700">
+        <button
+          onClick={() => push("/discipleship/homeworship")}
+          className="flex items-center gap-2 text-gray-700"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             className="h-5 w-5"
@@ -54,7 +57,12 @@ const HomeWorshipDetail = () => {
             viewBox="0 0 24 24"
             stroke="currentColor"
           >
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M15 19l-7-7 7-7"
+            />
           </svg>
           <span className="text-base">뒤로</span>
         </button>
@@ -84,7 +92,9 @@ const HomeWorshipDetail = () => {
                   d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                 />
               </svg>
-              <span>{data?.date && format(new Date(data.date), "yyyy년 M월 d일", { locale: ko })}</span>
+              <span>
+                {data?.date && format(new Date(data.date), "yyyy년 M월 d일", { locale: ko })}
+              </span>
             </div>
             <div className="flex items-center gap-2 text-sm text-gray-900">
               <svg
@@ -153,7 +163,11 @@ const HomeWorshipDetail = () => {
           <div className="flex flex-col gap-2">
             {data.imageUrls.map((imageUrl) => (
               <div key={imageUrl} className="overflow-hidden rounded-lg border border-gray-300">
-                <img src={imageUrl} alt="예배 이미지" className="h-auto w-full max-w-full object-contain" />
+                <img
+                  src={imageUrl}
+                  alt="예배 이미지"
+                  className="h-auto w-full max-w-full object-contain"
+                />
               </div>
             ))}
           </div>
@@ -165,7 +179,7 @@ const HomeWorshipDetail = () => {
         </div>
 
         {/* 댓글 */}
-        <div className="mt-6">
+        <div className="mt-6 p-40">
           <HomeWorshipDetailComments />
         </div>
       </div>