diff --git a/SodaLive/Sources/Chat/Character/Banner/AutoSlideCharacterBannerView.swift b/SodaLive/Sources/Chat/Character/Banner/AutoSlideCharacterBannerView.swift
index eb51c02..2995c22 100644
--- a/SodaLive/Sources/Chat/Character/Banner/AutoSlideCharacterBannerView.swift
+++ b/SodaLive/Sources/Chat/Character/Banner/AutoSlideCharacterBannerView.swift
@@ -12,40 +12,58 @@ struct AutoSlideCharacterBannerView: View {
     var items: [CharacterBannerResponse] = []
     var onTap: (CharacterBannerResponse) -> Void = { _ in }
     
-    @State private var index: Int = 0
+    @State private var currentIndex: Int = 0
     @State private var height: CGFloat = 0
     private let timer = Timer.publish(every: 4, on: .main, in: .common).autoconnect()
     
     var body: some View {
-        TabView(selection: $index) {
-            ForEach(0..<items.count, id: \.self) { index in
-                let item = items[index]
-                KFImage(URL(string: item.imageUrl))
-                    .placeholder { Color.gray.opacity(0.2) }
-                    .retry(maxCount: 2, interval: .seconds(1))
-                    .cancelOnDisappear(true)
-                    .resizable()
-                    .scaledToFill()
-                    .frame(height: height)
-                    .clipped()
-                    .cornerRadius(12)
-                    .contentShape(Rectangle())
-                    .tag(index)
-                    .onTapGesture { onTap(item) }
+        VStack(spacing: 8) {
+            TabView(selection: $currentIndex) {
+                ForEach(0..<items.count, id: \.self) { index in
+                    let item = items[index]
+                    KFImage(URL(string: item.imageUrl))
+                        .placeholder { Color.gray.opacity(0.2) }
+                        .retry(maxCount: 2, interval: .seconds(1))
+                        .cancelOnDisappear(true)
+                        .resizable()
+                        .scaledToFill()
+                        .frame(height: height)
+                        .clipped()
+                        .cornerRadius(12)
+                        .contentShape(Rectangle())
+                        .tag(index)
+                        .onTapGesture { onTap(item) }
+                }
+            }
+            .tabViewStyle(.page(indexDisplayMode: .never))
+            .frame(maxWidth: .infinity)
+            .frame(height: height)
+            .onAppear {
+                self.height = screenSize().width * 0.53
+            }
+            .onDisappear {
+                timer.upstream.connect().cancel()
+            }
+            .onReceive(timer) { _ in
+                guard !items.isEmpty else { return }
+                withAnimation { currentIndex = (currentIndex + 1) % items.count }
+            }
+            
+            HStack(spacing: 4) {
+                ForEach(0..<items.count, id: \.self) { index in
+                    Capsule()
+                        .foregroundColor(
+                            index == currentIndex
+                            ? .button
+                            : .gray90
+                        )
+                        .frame(
+                            width: index == currentIndex ? 18 : 6,
+                            height: 6
+                        )
+                        .tag(index)
+                }
             }
-        }
-        .tabViewStyle(.page(indexDisplayMode: .automatic))
-        .frame(maxWidth: .infinity)
-        .frame(height: height)
-        .onAppear {
-            self.height = screenSize().width * 0.53
-        }
-        .onDisappear {
-            timer.upstream.connect().cancel()
-        }
-        .onReceive(timer) { _ in
-            guard !items.isEmpty else { return }
-            withAnimation { index = (index + 1) % items.count }
         }
     }
 }