diff --git a/ui/src/components/common/client/swiper.tsx b/ui/src/components/common/client/swiper.tsx
new file mode 100644
index 00000000..1b687240
--- /dev/null
+++ b/ui/src/components/common/client/swiper.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import clsx from 'clsx';
+
+import { useSwiper } from '@/hooks/common/use-swiper';
+
+import { getValidChildrenOfType } from '@/lib/utils/common/get-valid-children-of-type';
+
+function Swiper({ children }: { children: React.ReactNode }) {
+  const { offsetX, onTouchStart, currentIdx, onIndicatorClick, isSwiping, containerRef } =
+    useSwiper();
+
+  const slides = getValidChildrenOfType(children, SwiperSlide);
+
+  return (
+    <div
+      className="w-full max-w-full overflow-hidden touch-pan-y relative"
+      onTouchStart={onTouchStart}
+      onMouseDown={onTouchStart}
+    >
+      <ul
+        ref={containerRef}
+        className={clsx('min-w-full flex list-none p-0 m-0', {
+          'transition-none': isSwiping,
+          'transition-[transfrom_1s_ease-out]': !isSwiping,
+        })}
+        style={{ transform: `translate3d(${offsetX}px, 0, 0)` }}
+      >
+        {slides}
+      </ul>
+
+      <ul className="absolute bottom-2 right-1/2 translate-x-1/2 flex justify-center list-none p-0">
+        {Array.from({ length: slides.length }).map((_, idx) => (
+          <li
+            key={idx}
+            className={clsx(
+              'w-3 h-3 mx-1 my-0 rounded-full bg-gray-300 cursor-pointer',
+              idx === currentIdx && 'bg-gray-700'
+            )}
+            onClick={() => onIndicatorClick(idx)}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function SwiperSlide({ children }: { children: React.ReactNode }) {
+  return <li className="w-full flex-shrink-0 relative">{children}</li>;
+}
+
+export default Object.assign(Swiper, { Slide: SwiperSlide });