diff --git a/frontend/techpick/src/components/RecommendedPickCarousel/RecommendPickDraggable.tsx b/frontend/techpick/src/components/RecommendedPickCarousel/RecommendPickDraggable.tsx
index f47464596..75340e6fb 100644
--- a/frontend/techpick/src/components/RecommendedPickCarousel/RecommendPickDraggable.tsx
+++ b/frontend/techpick/src/components/RecommendedPickCarousel/RecommendPickDraggable.tsx
@@ -1,6 +1,7 @@
 import type { CSSProperties, PropsWithChildren } from 'react';
 import { useDraggable } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
+import { draggableStyle } from './recommendPickDraggable.css';
 import { RecommendPickCategoryType, RecommendPickType } from '@/types';
 
 export function RecommendPickDraggable({
@@ -27,7 +28,8 @@ export function RecommendPickDraggable({
       ref={setNodeRef}
       {...attributes}
       {...listeners}
-      style={isDragging ? { ...style, opacity: 0 } : {}}
+      style={style}
+      className={isDragging ? draggableStyle : ''}
     >
       {children}
     </div>
diff --git a/frontend/techpick/src/components/RecommendedPickCarousel/recommendPickDraggable.css.ts b/frontend/techpick/src/components/RecommendedPickCarousel/recommendPickDraggable.css.ts
new file mode 100644
index 000000000..2139a788c
--- /dev/null
+++ b/frontend/techpick/src/components/RecommendedPickCarousel/recommendPickDraggable.css.ts
@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const draggableStyle = style({
+  opacity: '0',
+});