diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index df1d80a..52eb833 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,3 +1,5 @@
+import 'swiper/css';
+import 'swiper/css/pagination';
 import '@/styles/global.css';
 import '@/styles/theme/grayScale.css';
 import '@/styles/theme/colorPalette.css';
diff --git a/src/components/History/History.css.ts b/src/components/History/History.css.ts
index 48cfc46..50af72a 100644
--- a/src/components/History/History.css.ts
+++ b/src/components/History/History.css.ts
@@ -6,12 +6,12 @@ import { commonColorThemeVars } from '@/styles/theme/index.css';
 export const wrapStyle = style({
   display: 'grid',
   gridAutoRows: 'auto',
-  gap: '1rem',
+  columnGap: '1rem',
   width: '100%',
 
   '@media': {
     [ODSBreakpointTokenVariables['breakpoint-xxl']]: {
-      gap: '2.5rem',
+      columnGap: '2.5rem',
     },
     [ODSBreakpointTokenVariables['breakpoint-s']]: {
       display: 'flex',
diff --git a/src/components/History/History.tsx b/src/components/History/History.tsx
index e54ed1d..7843d81 100644
--- a/src/components/History/History.tsx
+++ b/src/components/History/History.tsx
@@ -211,7 +211,7 @@ const Menu = () => {
               handleClick(index);
             }}
           >
-            {historySummary.name}
+            {historySummary.name.toUpperCase()}
           </Button>
         );
       })}
diff --git a/src/components/History/Summary/HistorySummary.tsx b/src/components/History/Summary/HistorySummary.tsx
index d9ef088..ef8e21f 100644
--- a/src/components/History/Summary/HistorySummary.tsx
+++ b/src/components/History/Summary/HistorySummary.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import 'swiper/css';
+import 'swiper/css/pagination';
 
 import classNames from 'classnames';
 import React, { PropsWithChildren, useState } from 'react';
@@ -162,7 +163,9 @@ const Swipe = () => {
           );
         })}
       </OceanSwiper.Main>
-      {breakpointXXL && <Spacer direction="horizontal" spacing="spacer-20" />}
+      {!isDetailView && breakpointXXL && (
+        <Spacer direction="horizontal" spacing="spacer-20" />
+      )}
     </OceanSwiper>
   );
 };
diff --git a/src/components/OceanSwiper/OceanSwiper.tsx b/src/components/OceanSwiper/OceanSwiper.tsx
index ec15690..4709a28 100644
--- a/src/components/OceanSwiper/OceanSwiper.tsx
+++ b/src/components/OceanSwiper/OceanSwiper.tsx
@@ -2,7 +2,7 @@
 
 import classNames from 'classnames';
 import React, { PropsWithChildren, useEffect, useRef } from 'react';
-import { A11y } from 'swiper/modules';
+import { A11y, Pagination, Navigation } from 'swiper/modules';
 import { Swiper, SwiperRef, SwiperSlide, useSwiper } from 'swiper/react';
 import { SwiperOptions } from 'swiper/types';
 import Tag from '@/composable/Tag/Tag';
@@ -111,9 +111,10 @@ const Main = ({
       <Swiper
         {...rest}
         ref={swiperRef}
-        modules={[A11y]}
+        modules={[A11y, Pagination]}
         slidesPerView={perView || 'auto'}
         spaceBetween={gap}
+        pagination={{ clickable: true }}
         allowSlideNext={isSwipeAble}
         allowSlidePrev={isSwipeAble}
         onRealIndexChange={(e) => {