diff --git a/public/svg/ic_ circle_arrow_right_42.svg b/public/svg/ic_ circle_arrow_right_42.svg
new file mode 100644
index 00000000..7872223f
--- /dev/null
+++ b/public/svg/ic_ circle_arrow_right_42.svg	
@@ -0,0 +1,18 @@
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1437_18623)">
+<circle cx="21" cy="21" r="17.5" fill="white"/>
+</g>
+<path d="M19 27L25 21L19 15" stroke="#6A6A6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<filter id="filter0_d_1437_18623" x="1.5" y="1.5" width="39" height="39" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1437_18623"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1437_18623" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/svgs/IcCircleArrowRight42.tsx b/src/assets/svgs/IcCircleArrowRight42.tsx
new file mode 100644
index 00000000..5e1102bf
--- /dev/null
+++ b/src/assets/svgs/IcCircleArrowRight42.tsx
@@ -0,0 +1,52 @@
+import type { SVGProps } from 'react';
+const SvgIcCircleArrowRight42 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 42 42"
+    {...props}
+  >
+    <g filter="url(#ic__circle_arrow_right_42_svg__a)">
+      <circle cx={21} cy={21} r={17.5} fill="#fff" />
+    </g>
+    <path
+      stroke="#6A6A6A"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m19 27 6-6-6-6"
+    />
+    <defs>
+      <filter
+        id="ic__circle_arrow_right_42_svg__a"
+        width={39}
+        height={39}
+        x={1.5}
+        y={1.5}
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity={0} result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          result="hardAlpha"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation={1} />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0" />
+        <feBlend
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_1437_18623"
+        />
+        <feBlend
+          in="SourceGraphic"
+          in2="effect1_dropShadow_1437_18623"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
+);
+export default SvgIcCircleArrowRight42;
diff --git a/src/assets/svgs/index.ts b/src/assets/svgs/index.ts
index 26b72105..9b95a600 100644
--- a/src/assets/svgs/index.ts
+++ b/src/assets/svgs/index.ts
@@ -1,3 +1,4 @@
+export { default as IcCircleArrowRight42 } from './IcCircleArrowRight42';
 export { default as IcArrowDown20 } from './IcArrowDown20';
 export { default as IcArrowRight24 } from './IcArrowRight24';
 export { default as IcArrowUp20 } from './IcArrowUp20';
diff --git a/src/pages/designList/components/Carousel.css.ts b/src/pages/designList/components/Carousel.css.ts
new file mode 100644
index 00000000..7c47dc5e
--- /dev/null
+++ b/src/pages/designList/components/Carousel.css.ts
@@ -0,0 +1,28 @@
+import { style } from '@vanilla-extract/css';
+
+import { flexGenerator } from '@styles/generator.css';
+import { vars } from '@styles/theme.css';
+
+export const container = style([
+  flexGenerator('row', 'flex-start'),
+  {
+    gap: '1.2rem',
+    overflowX: 'scroll',
+  },
+]);
+
+export const imageStyle = style({
+  width: '31rem',
+  height: '31rem',
+  flexShrink: 0,
+});
+
+export const moreButtonStyle = style([
+  flexGenerator('column'),
+  { gap: '0.8rem' },
+]);
+
+export const moreTextStyle = style([
+  vars.fonts.body07_r_14,
+  { color: vars.colors.gray500 },
+]);
diff --git a/src/pages/designList/components/Carousel.tsx b/src/pages/designList/components/Carousel.tsx
new file mode 100644
index 00000000..e6cb65ea
--- /dev/null
+++ b/src/pages/designList/components/Carousel.tsx
@@ -0,0 +1,50 @@
+import { Image } from '@components';
+
+import { IcCircleArrowRight42 } from '@svgs';
+
+import {
+  container,
+  imageStyle,
+  moreButtonStyle,
+  moreTextStyle,
+} from './Carousel.css';
+
+interface DesignCardDetailType {
+  cakeId: number;
+  cakeImageUrl: string;
+  isLiked: boolean;
+}
+
+interface CarouselProps {
+  designs: DesignCardDetailType[];
+  storeId: number;
+}
+
+const Carousel = ({ designs, storeId }: CarouselProps) => {
+  const handleButtonClick = () => {
+    console.log(storeId);
+  };
+
+  return (
+    <ul className={container}>
+      {designs.map((design) => {
+        return (
+          <li key={design.cakeId} className={imageStyle}>
+            <Image
+              src={design.cakeImageUrl}
+              hasIcon
+              variant="rounded"
+              isActive={design.isLiked}
+            />
+          </li>
+        );
+      })}
+      <li className={moreButtonStyle} onClick={handleButtonClick}>
+        <IcCircleArrowRight42 width={35} height={35} />
+        <span className={moreTextStyle}>더보기</span>
+      </li>
+    </ul>
+  );
+};
+
+export default Carousel;