diff --git a/layers/components/atoms/Button/Play.vue b/layers/components/atoms/Button/Play.vue
index ea24cbd..b9a28a7 100644
--- a/layers/components/atoms/Button/Play.vue
+++ b/layers/components/atoms/Button/Play.vue
@@ -25,6 +25,7 @@ const handlePlayClick = () => {
 <style scoped>
 .btn-play {
   @apply relative flex items-center justify-center w-[60px] h-[60px] bg-[image:var(--video-play)] bg-cover bg-center bg-no-repeat md:w-[80px] md:h-[80px]
+  before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.05)] before:rounded-full
   after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-[50%] after:opacity-0 after:transition-opacity after:duration-300 after:ease-in-out
   hover:after:opacity-10;
 }
diff --git a/layers/components/blocks/slide/Arrows.vue b/layers/components/blocks/slide/Arrows.vue
index 8c944ff..5f06b6d 100644
--- a/layers/components/blocks/slide/Arrows.vue
+++ b/layers/components/blocks/slide/Arrows.vue
@@ -10,6 +10,10 @@ const props = defineProps<Props>()
 const { locale } = useI18n()
 const { sendLog } = useAnalytics()
 
+const arrowBgColor = computed(() => {
+  return getColorCodeFromData(props.arrowsData?.[0]?.display, 'none')
+})
+
 const handleArrowClick = (direction: 'prev' | 'next') => {
   if (props.arrowsData) {
     const arrowIndex = direction === 'prev' ? 0 : 1
@@ -23,6 +27,7 @@ const handleArrowClick = (direction: 'prev' | 'next') => {
     <AtomsButtonCircle
       sr-only="Previous"
       class="splide-arrow splide__arrow--prev"
+      :style="{ backgroundColor: arrowBgColor }"
       @click="handleArrowClick('prev')"
     >
       <AtomsIconsArrowRightLine />
@@ -30,6 +35,7 @@ const handleArrowClick = (direction: 'prev' | 'next') => {
     <AtomsButtonCircle
       sr-only="Next"
       class="splide-arrow splide__arrow--next"
+      :style="{ backgroundColor: arrowBgColor }"
       @click="handleArrowClick('next')"
     >
       <AtomsIconsArrowRightLine />
diff --git a/layers/types/api/pageData.ts b/layers/types/api/pageData.ts
index 77c7145..e466311 100644
--- a/layers/types/api/pageData.ts
+++ b/layers/types/api/pageData.ts
@@ -125,7 +125,6 @@ export type PageDataTemplateComponents =
   | PageDataTemplateComponent // 단일 컴포넌트 패턴
   | {
       group_sets: PageDataTemplateComponentSet[]
-      arrow: PageDataArrowComponent
     } // 그룹 세트 패턴
 
 // 템플릿 타입
@@ -170,8 +169,3 @@ export interface PageDataApiResult {
   data: PageDataResponse | null
   error: string | null
 }
-
-// Arrow 컴포넌트 타입
-export type PageDataArrowComponent = PageDataTemplateComponent & {
-  groups: PageDataResourceGroups
-}