diff --git a/apps/web/package.json b/apps/web/package.json
index 091516ff..1b43019d 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -11,10 +11,10 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@review-canvas/theme": "workspace:*",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@react-hookz/web": "^24.0.4",
+    "@review-canvas/theme": "workspace:*",
     "@tanstack/react-query": "^5.28.8",
     "axios": "^1.6.8",
     "dayjs": "^1.11.10",
@@ -32,6 +32,7 @@
     "@review-canvas/eslint-config": "workspace:*",
     "@review-canvas/tailwind-config": "workspace:*",
     "@review-canvas/typescript-config": "workspace:*",
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "^20.11.24",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 263081c8..7ac966f3 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -4,10 +4,10 @@ import { useEffect } from 'react';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-import GlobalStyles from '@/components/global-styles.tsx';
-import { DesignPropertyServiceProvider } from '@/services/design-property.tsx';
-import useShop from '@/state/shop.ts';
-import { notoSansKR } from '@/theme/font.ts';
+import GlobalStyles from '@/components/global-styles';
+import { DesignPropertyServiceProvider } from '@/services/design-property';
+import useShop from '@/state/shop';
+import { notoSansKR } from '@/theme/font';
 
 import './globals.css';
 
diff --git a/apps/web/src/app/mypage/[productID]/connected-page.tsx b/apps/web/src/app/mypage/[productID]/connected-page.tsx
index dbd4a007..31270ca3 100644
--- a/apps/web/src/app/mypage/[productID]/connected-page.tsx
+++ b/apps/web/src/app/mypage/[productID]/connected-page.tsx
@@ -4,10 +4,10 @@ import { Suspense } from 'react';
 
 import { useSuspenseQuery } from '@tanstack/react-query';
 
-import CloseButton from '@/components/close-button';
-import MyReviewList from '@/components/review/my-list';
-import { ReviewItemStyleProvider } from '@/contexts/style/review-item';
-import { ReviewListStyleProvider } from '@/contexts/style/review-list';
+import CloseButton from '@/components/button/close';
+import MyReviewListOnProduct from '@/components/review/my-review/list';
+import { ReviewItemStyleProvider } from '@/contexts/style/review-item-style';
+import { ReviewListStyleProvider } from '@/contexts/style/review-list-style';
 import useReviewCanvasReady from '@/hooks/use-review-canvas-ready.ts';
 import { useDesignPropertyService } from '@/services/design-property';
 import { useConnectedShop } from '@/state/shop.ts';
@@ -42,7 +42,7 @@ export default function MyReviewsPage({ productID }: ConnectedPageProps) {
             value={designPropertyService.convertDesignPropertyToReviewItemStyle(designPropertyQuery.data)}
           >
             <Suspense fallback={<div>loading...</div>}>
-              <MyReviewList productID={productID} />
+              <MyReviewListOnProduct productID={productID} />
             </Suspense>
           </ReviewItemStyleProvider>
         </ReviewListStyleProvider>
diff --git a/apps/web/src/app/mypage/connected-page.tsx b/apps/web/src/app/mypage/connected-page.tsx
new file mode 100644
index 00000000..3094485c
--- /dev/null
+++ b/apps/web/src/app/mypage/connected-page.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { Suspense } from 'react';
+
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import MyReviewList from '@/components/review/my-page/list';
+import { ReviewItemStyleProvider } from '@/contexts/style/review-item-style';
+import { ReviewListStyleProvider } from '@/contexts/style/review-list-style';
+import useReviewCanvasReady from '@/hooks/use-review-canvas-ready.ts';
+import { useDesignPropertyService } from '@/services/design-property';
+import { useConnectedShop } from '@/state/shop.ts';
+
+export default function MyReviewsPage() {
+  const { id } = useConnectedShop();
+  const designPropertyService = useDesignPropertyService();
+
+  useReviewCanvasReady('mypage');
+  const designPropertyQuery = useSuspenseQuery({
+    queryKey: ['design-property', id],
+    queryFn: () => designPropertyService.get(id),
+  });
+
+  return (
+    <main className="relative">
+      <div className="p-2">
+        <ReviewListStyleProvider
+          value={designPropertyService.convertDesignPropertyResponseToReviewListStyle(designPropertyQuery.data)}
+        >
+          <ReviewItemStyleProvider
+            value={designPropertyService.convertDesignPropertyToReviewItemStyle(designPropertyQuery.data)}
+          >
+            <Suspense fallback={<div>loading...</div>}>
+              <MyReviewList />
+            </Suspense>
+          </ReviewItemStyleProvider>
+        </ReviewListStyleProvider>
+      </div>
+    </main>
+  );
+}
diff --git a/apps/web/src/app/mypage/page.tsx b/apps/web/src/app/mypage/page.tsx
new file mode 100644
index 00000000..52d4bdb6
--- /dev/null
+++ b/apps/web/src/app/mypage/page.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { Suspense } from 'react';
+
+import useReviewCanvasReady from '@/hooks/use-review-canvas-ready';
+import DisconnectedPage from '@/pages/disconnected-page';
+import { ReviewServiceProvider } from '@/services/review';
+import useShop from '@/state/shop';
+
+import ConnectedPage from './connected-page';
+
+export default function Page() {
+  const shop = useShop();
+
+  useReviewCanvasReady('list');
+
+  if (!shop.connected) return <DisconnectedPage />;
+
+  return (
+    <ReviewServiceProvider>
+      <Suspense fallback={<div>loading...</div>}>
+        <ConnectedPage />
+      </Suspense>
+    </ReviewServiceProvider>
+  );
+}
diff --git a/apps/web/src/app/products/[productID]/reviews/connected-page.tsx b/apps/web/src/app/products/[productID]/reviews/connected-page.tsx
index 9c15137d..568cfbdb 100644
--- a/apps/web/src/app/products/[productID]/reviews/connected-page.tsx
+++ b/apps/web/src/app/products/[productID]/reviews/connected-page.tsx
@@ -4,12 +4,12 @@ import { Suspense } from 'react';
 
 import { useSuspenseQuery } from '@tanstack/react-query';
 
-import ReviewList from '@/components/review/list.tsx';
-import { ReviewItemStyleProvider } from '@/contexts/style/review-item.ts';
-import { ReviewListStyleProvider } from '@/contexts/style/review-list.ts';
-import useMessageToShop from '@/hooks/use-message-to-shop.ts';
-import { useDesignPropertyService } from '@/services/design-property.tsx';
-import { useConnectedShop } from '@/state/shop.ts';
+import ReviewList from '@/components/review/list';
+import { ReviewItemStyleProvider } from '@/contexts/style/review-item-style';
+import { ReviewListStyleProvider } from '@/contexts/style/review-list-style';
+import useMessageToShop from '@/hooks/use-message-to-shop';
+import { useDesignPropertyService } from '@/services/design-property';
+import { useConnectedShop } from '@/state/shop';
 import { MESSAGE_TYPES } from '@/utils/message';
 
 interface ConnectedPageProps {
@@ -49,7 +49,7 @@ export default function ConnectedPage({ productID }: ConnectedPageProps) {
             onClick={openMyPage}
             type="button"
           >
-            My Page
+            My Review
           </button>
           <button
             className="border-2 border-indigo-500/60 text-white bg-blue-500 m-2"
diff --git a/apps/web/src/app/replies/[replyID]/delete/page.tsx b/apps/web/src/app/replies/[replyID]/delete/page.tsx
index 37566f1f..a73648c9 100644
--- a/apps/web/src/app/replies/[replyID]/delete/page.tsx
+++ b/apps/web/src/app/replies/[replyID]/delete/page.tsx
@@ -5,8 +5,8 @@ import { useParams } from 'next/navigation';
 
 import DeleteConfirm from '@/components/delete-confrim';
 import useReviewCanvasReady from '@/hooks/use-review-canvas-ready.ts';
-import type { PathInfo } from '@/services/api-types/review';
-import { useReviewService } from '@/services/review.tsx';
+import type { PathInfo } from '@/models/api-type';
+import { useReviewService } from '@/services/review';
 import useShop from '@/state/shop.ts';
 import { MESSAGE_TYPES, sendMessageToShop } from '@/utils/message.ts';
 
diff --git a/apps/web/src/app/replies/[replyID]/edit/page.tsx b/apps/web/src/app/replies/[replyID]/edit/page.tsx
index 17b9ee60..46ee8c61 100644
--- a/apps/web/src/app/replies/[replyID]/edit/page.tsx
+++ b/apps/web/src/app/replies/[replyID]/edit/page.tsx
@@ -4,12 +4,12 @@ import { useEffect, useState } from 'react';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { notFound, useParams } from 'next/navigation';
 
-import CloseButton from '@/components/close-button';
-import useReviewCanvasReady from '@/hooks/use-review-canvas-ready.ts';
-import type { CreateReplyItemRequest } from '@/services/api-types/review';
-import { useReviewService } from '@/services/review.tsx';
-import useShop from '@/state/shop.ts';
-import { MESSAGE_TYPES, sendMessageToShop } from '@/utils/message.ts';
+import CloseButton from '@/components/button/close';
+import useReviewCanvasReady from '@/hooks/use-review-canvas-ready';
+import type { CreateReplyItemRequest } from '@/models/api-type';
+import { useReviewService } from '@/services/review';
+import useShop from '@/state/shop';
+import { MESSAGE_TYPES, sendMessageToShop } from '@/utils/message';
 
 type PageParams = {
   replyID: string;
@@ -78,7 +78,7 @@ export default function ReplyEditPage() {
     <div className="relative p-4 flex flex-col gap-8">
       <CloseButton onClose={close} />
       <form
-        className="relative p-4 flex flex-col gap-8"
+        className="relative p-4 flex flex-col gap-3"
         onSubmit={handleSubmit}
       >
         {replyDetail.nickName ? (
@@ -87,17 +87,14 @@ export default function ReplyEditPage() {
           </div>
         ) : null}
         <textarea
-          className="relative p-4 flex flex-col gap-8 border-2 overflow-hidden resize-none"
+          className="relative p-2 flex flex-col gap-8 border-2 overflow-hidden resize-none"
           defaultValue={replyDetail.content}
           onChange={handleChange}
-          rows={3}
+          rows={4}
         />
-        <button
-          className="self-end"
-          type="submit"
-        >
-          저장
-        </button>
+        <div className="self-end rounded-lg border-2 border-indigo-500/20 text-white bg-gray-800/70 px-8 py-1">
+          <button type="submit">수정</button>
+        </div>
       </form>
     </div>
   );
diff --git a/apps/web/src/app/replies/layout.tsx b/apps/web/src/app/replies/layout.tsx
index e19ab9d8..0e8253be 100644
--- a/apps/web/src/app/replies/layout.tsx
+++ b/apps/web/src/app/replies/layout.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ReviewServiceProvider } from '@/services/review.tsx';
+import { ReviewServiceProvider } from '@/services/review';
 
 export default function ReviewLayout({ children }: React.PropsWithChildren) {
   return <ReviewServiceProvider>{children}</ReviewServiceProvider>;
diff --git a/apps/web/src/app/reviews/[reviewID]/connected-page.tsx b/apps/web/src/app/reviews/[reviewID]/connected-page.tsx
index 7688736d..b238d69d 100644
--- a/apps/web/src/app/reviews/[reviewID]/connected-page.tsx
+++ b/apps/web/src/app/reviews/[reviewID]/connected-page.tsx
@@ -4,18 +4,18 @@ import { Suspense, useEffect, useState } from 'react';
 
 import { useMutation, useQuery, useSuspenseQuery } from '@tanstack/react-query';
 
-import CloseButton from '@/components/close-button';
-import Reply from '@/components/reply/item';
+import CloseButton from '@/components/button/close';
+import Reply from '@/components/reply/board-style-item';
 import ImageSlide from '@/components/review/image-slide';
 import { Star } from '@/components/review/star';
-import { ReviewItemStyleProvider } from '@/contexts/style/review-item';
-import { ReviewListStyleProvider } from '@/contexts/style/review-list';
-import type { CreateReplyItemRequest, ReplyItem } from '@/services/api-types/review';
+import { ReviewItemStyleProvider } from '@/contexts/style/review-item-style';
+import { ReviewListStyleProvider } from '@/contexts/style/review-list-style';
+import type { CreateReplyItemRequest, ReplyItem } from '@/models/api-type';
 import { useDesignPropertyService } from '@/services/design-property';
-import { useReviewService } from '@/services/review.tsx';
-import useShop, { useConnectedShop } from '@/state/shop.ts';
+import { useReviewService } from '@/services/review';
+import useShop, { useConnectedShop } from '@/state/shop';
 import { isEnterKeyPressedWithoutShift } from '@/utils/keyboard';
-import { MESSAGE_TYPES, sendMessageToShop } from '@/utils/message.ts';
+import { MESSAGE_TYPES, sendMessageToShop } from '@/utils/message';
 
 interface ConnectedPageProps {
   reviewID: string;
@@ -45,7 +45,6 @@ export default function ReviewDetailPage({ reviewID }: ConnectedPageProps) {
   const reviewDetailQuery = useQuery({
     queryKey: ['review-detail', { requestId: reviewID, mallId: id, memberId: userID }],
     queryFn: () => reviewService.get({ requestId: reviewID, mallId: id, memberId: userID ? userID : undefined }),
-    enabled: Boolean(shop.connected && reviewID),
   });
 
   const createReplyMutation = useMutation({
@@ -100,74 +99,78 @@ export default function ReviewDetailPage({ reviewID }: ConnectedPageProps) {
   };
 
   const reviewDetail = reviewDetailQuery.data.data;
+  const isImage = reviewDetail.imageVideoUrls.reviewResizeImageUrls.length > 0;
+  const layoutStyle = isImage ? 'grid grid-cols-2 h-full' : '';
 
   return (
-    <main>
+    <main className="absolute top-0 left-0 w-full h-full">
       <CloseButton onClose={close} />
-      <div className="relative justify-center bg-black/60">
-        <ImageSlide reviewResizeImageUrls={reviewDetail.imageVideoUrls.reviewResizeImageUrls} />
-      </div>
-
-      <div className="flex flex-col p-4">
-        <CloseButton onClose={close} />
-        <div className="flex gap-0.5 m-2 items-center w-fit">
-          <Star
-            setStar={() => {}}
-            size="small"
-            star={reviewDetail.score}
-          />
+      <div className={layoutStyle}>
+        <div className="relative justify-center bg-gray-100">
+          <ImageSlide reviewResizeImageUrls={reviewDetail.imageVideoUrls.reviewResizeImageUrls} />
         </div>
-        <div className="flex flex-col gap-2 m-2">
-          <div>
-            작성자 <span>{reviewDetail.nickname}</span>
-          </div>
-          <p>{reviewDetail.content}</p>
-        </div>
-        {shop.userID ? (
-          <div className="relative flex flex-col gap-2 px-3 mt-8">
-            <div>댓글</div>
-            <textarea
-              className="border-2 border-gray-400/80 p-1 overflow-hidden resize-none"
-              maxLength={500}
-              onChange={handleChange}
-              onKeyDown={handleKeyDown}
-              placeholder="댓글을 작성해주세요."
-              rows={3}
-              value={content}
+
+        <div className="flex flex-col p-4">
+          <div className="flex gap-0.5 m-2 items-center w-fit">
+            <Star
+              setStar={() => {}}
+              size="small"
+              star={reviewDetail.score}
             />
-            <div className="absolute right-2 bottom-2 mr-4 border-2 border-gray-300/80 rounded-md z-10 items-center bg-violet-100/40">
-              <button
-                className="text-sm px-3 py-1"
-                disabled={content.length === 0}
-                onClick={submit}
-                type="button"
-              >
-                작성
-              </button>
+          </div>
+          <div className="flex flex-col gap-2 m-2">
+            <div>
+              작성자 <span>{reviewDetail.nickname}</span>
             </div>
+            <p>{reviewDetail.content}</p>
           </div>
-        ) : null}
-
-        <ReviewListStyleProvider
-          value={designPropertyService.convertDesignPropertyResponseToReviewListStyle(designPropertyQuery.data)}
-        >
-          <ReviewItemStyleProvider
-            value={designPropertyService.convertDesignPropertyToReviewItemStyle(designPropertyQuery.data)}
-          >
-            <Suspense fallback={<div>loading...</div>}>
-              <div className="mt-8">
-                {reviewDetail.replies.map((it: ReplyItem) => (
-                  <Reply
-                    isModal
-                    key={it.replyId}
-                    memberId={shop.userID}
-                    reply={it}
-                  />
-                ))}
+          {shop.userID ? (
+            <div className="relative flex flex-col gap-2 px-3 mt-8">
+              <div>댓글</div>
+              <textarea
+                className="border-2 border-gray-400/80 p-1 overflow-hidden resize-none"
+                maxLength={500}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                placeholder="댓글을 작성해주세요."
+                rows={3}
+                value={content}
+              />
+              <div className="absolute right-2 bottom-2 mr-4 border-2 border-gray-300/80 rounded-md z-10 items-center bg-violet-100/40">
+                <button
+                  className="text-sm px-3 py-1"
+                  disabled={content.length === 0}
+                  onClick={submit}
+                  type="button"
+                >
+                  작성
+                </button>
               </div>
-            </Suspense>
-          </ReviewItemStyleProvider>
-        </ReviewListStyleProvider>
+            </div>
+          ) : null}
+          <div>
+            <ReviewListStyleProvider
+              value={designPropertyService.convertDesignPropertyResponseToReviewListStyle(designPropertyQuery.data)}
+            >
+              <ReviewItemStyleProvider
+                value={designPropertyService.convertDesignPropertyToReviewItemStyle(designPropertyQuery.data)}
+              >
+                <Suspense fallback={<div>loading...</div>}>
+                  <div className="mt-8">
+                    {reviewDetail.replies.map((it: ReplyItem) => (
+                      <Reply
+                        isModal
+                        key={it.replyId}
+                        memberId={shop.userID}
+                        reply={it}
+                      />
+                    ))}
+                  </div>
+                </Suspense>
+              </ReviewItemStyleProvider>
+            </ReviewListStyleProvider>
+          </div>
+        </div>
       </div>
     </main>
   );
diff --git a/apps/web/src/app/reviews/[reviewID]/delete/page.tsx b/apps/web/src/app/reviews/[reviewID]/delete/page.tsx
index 3a60fdfa..2b828146 100644
--- a/apps/web/src/app/reviews/[reviewID]/delete/page.tsx
+++ b/apps/web/src/app/reviews/[reviewID]/delete/page.tsx
@@ -4,11 +4,11 @@ import { useMutation } from '@tanstack/react-query';
 import { useParams } from 'next/navigation';
 
 import DeleteConfirm from '@/components/delete-confrim';
-import useReviewCanvasReady from '@/hooks/use-review-canvas-ready.ts';
-import type { PathInfo } from '@/services/api-types/review';
-import { useReviewService } from '@/services/review.tsx';
-import useShop from '@/state/shop.ts';
-import { MESSAGE_TYPES, sendMessageToShop } from '@/utils/message.ts';
+import useReviewCanvasReady from '@/hooks/use-review-canvas-ready';
+import type { PathInfo } from '@/models/api-type';
+import { useReviewService } from '@/services/review';
+import useShop from '@/state/shop';
+import { MESSAGE_TYPES, sendMessageToShop } from '@/utils/message';
 
 type PageParams = {
   reviewID: string;
diff --git a/apps/web/src/app/reviews/[reviewID]/edit/page.tsx b/apps/web/src/app/reviews/[reviewID]/edit/page.tsx
index 39f22de8..013b393a 100644
--- a/apps/web/src/app/reviews/[reviewID]/edit/page.tsx
+++ b/apps/web/src/app/reviews/[reviewID]/edit/page.tsx
@@ -1,24 +1,37 @@
 'use client';
 
+import { useEffect, useRef, useState } from 'react';
+
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { notFound, useParams } from 'next/navigation';
 
-import CloseButton from '@/components/close-button';
-import { Textform } from '@/components/review/textform.tsx';
-import useReviewCanvasReady from '@/hooks/use-review-canvas-ready.ts';
-import type { PathInfo, UpdateReviewItemRequest } from '@/services/api-types/review';
-import { useReviewService } from '@/services/review.tsx';
-import useShop from '@/state/shop.ts';
-import { MESSAGE_TYPES, sendMessageToShop } from '@/utils/message.ts';
+import CloseButton from '@/components/button/close';
+import { SubmitButton } from '@/components/button/submit';
+import { ImageUploader } from '@/components/review/image-uploder';
+import { Star } from '@/components/review/star';
+import useReviewCanvasReady from '@/hooks/use-review-canvas-ready';
+import type { ImageVideoUrl, PathInfo } from '@/models/api-type';
+import { useReviewService } from '@/services/review';
+import useShop from '@/state/shop';
+import { MESSAGE_TYPES, sendMessageToShop } from '@/utils/message';
 
 type PageParams = {
   reviewID: string;
 };
-
 export default function ReviewEditPage() {
   const params = useParams<PageParams>();
   const shop = useShop();
+
+  const [content, setContent] = useState('');
+  const [score, setScore] = useState(5);
+  const [uploadImages, setUploadImages] = useState<ImageVideoUrl>({
+    reviewFileUrls: [],
+    reviewResizeImageUrls: [],
+  });
+
   useReviewCanvasReady('edit');
+
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const reviewService = useReviewService();
 
   const reviewDetailQuery = useQuery({
@@ -28,8 +41,9 @@ export default function ReviewEditPage() {
   });
 
   const updateReviewMutation = useMutation({
-    mutationFn: async ({ content, score }: UpdateReviewItemRequest) => {
-      await reviewService.update(pathInfo, { content, score });
+    mutationFn: async () => {
+      const request = { content, score };
+      await reviewService.update(pathInfo, request, uploadImages.reviewFileUrls);
     },
     onSuccess: () => {
       close();
@@ -39,12 +53,28 @@ export default function ReviewEditPage() {
     },
   });
 
+  useEffect(() => {
+    if (reviewDetailQuery.data) {
+      setContent(reviewDetailQuery.data.data.content);
+      setScore(reviewDetailQuery.data.data.score);
+    }
+  }, [reviewDetailQuery.data]);
+
+  useEffect(() => {
+    const textarea = document.querySelector('textarea');
+    if (textarea) {
+      textarea.style.height = 'auto';
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  }, [content]);
+
   if (!shop.connected) return <div>connecting...</div>;
   if (!reviewDetailQuery.data) return <div>loading...</div>;
 
   const reviewDetail = reviewDetailQuery.data.data;
 
   const isReviewWrittenByLoginUser = typeof shop.userID === 'string' && reviewDetail.nickname === shop.userID;
+
   if (!isReviewWrittenByLoginUser) notFound();
 
   const pathInfo: PathInfo = {
@@ -53,23 +83,65 @@ export default function ReviewEditPage() {
     memberId: shop.userID,
   };
 
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setContent(event.target.value);
+  };
   const close = () => {
     sendMessageToShop(shop.domain, MESSAGE_TYPES.CLOSE_MODAL);
   };
 
-  const submit = (content: string, star: number) => {
-    updateReviewMutation.mutate({ content, score: star });
+  const submit = () => {
+    updateReviewMutation.mutate();
   };
 
   return (
-    <div className="relative p-4 flex flex-col gap-8">
+    <div className="relative p-2 flex flex-col">
       <CloseButton onClose={close} />
-      <Textform
-        content={reviewDetail.content}
-        nickname={reviewDetail.nickname}
-        onSubmit={submit}
-        score={reviewDetail.score}
+      <div className="flex gap-0.5 items-center w-fit px-4 pt-2">
+        <Star
+          setStar={setScore}
+          size="small"
+          star={score}
+        />
+      </div>
+      <div className="relative flex flex-col gap-8 px-4 pt-2">
+        <textarea
+          className="border-2 overflow-hidden resize-none p-1"
+          maxLength={2000}
+          onChange={handleChange}
+          placeholder="리뷰를 작성해주세요. 10자 이상 작성해주세요!"
+          ref={textareaRef}
+          rows={6}
+          value={content}
+        />
+        <div className="absolute right-1 bottom-0 pr-4 text-gray-400">{content.length}/2000</div>
+      </div>
+      <div
+        className="flex flex-row-reverse pr-4"
+        hidden={content.length >= 10 || content.length === 0}
+      >
+        <div className="text-gray-500">*10자 이상 입력하시면 댓글 등록이 가능합니다.</div>
+      </div>
+      <ImageUploader
+        setUploadImages={setUploadImages}
+        uploadImages={uploadImages}
       />
+      <div className="grid grid-cols-2 justify-center text-lg p-3 w-100%">
+        <button
+          className="border-2 border-gray-400/85 text-gray-400 p-2 m-2"
+          onClick={close}
+          type="button"
+        >
+          취소
+        </button>
+        <SubmitButton
+          isActive={content.length >= 10}
+          onClick={submit}
+          type="button"
+        >
+          수정하기
+        </SubmitButton>
+      </div>
     </div>
   );
 }
diff --git a/apps/web/src/app/reviews/create/[productID]/page.tsx b/apps/web/src/app/reviews/create/[productID]/page.tsx
index 897d32fa..a686a3df 100644
--- a/apps/web/src/app/reviews/create/[productID]/page.tsx
+++ b/apps/web/src/app/reviews/create/[productID]/page.tsx
@@ -4,13 +4,13 @@ import { useEffect, useRef, useState } from 'react';
 
 import { useMutation } from '@tanstack/react-query';
 import { useParams } from 'next/navigation';
-import tw, { styled } from 'twin.macro';
 
-import CloseButton from '@/components/close-button';
+import CloseButton from '@/components/button/close';
+import { SubmitButton } from '@/components/button/submit';
 import { ImageUploader } from '@/components/review/image-uploder';
 import { Star } from '@/components/review/star';
 import useReviewCanvasReady from '@/hooks/use-review-canvas-ready.ts';
-import type { CreateReivewPathInfo, CreateReviewItemRequest, ImageVideoUrl } from '@/services/api-types/review';
+import type { CreateReivewPathInfo, CreateReviewItemRequest, ImageVideoUrl } from '@/models/api-type';
 import { useReviewService } from '@/services/review';
 import useShop from '@/state/shop.ts';
 import { sendMessageToShop } from '@/utils/message.ts';
@@ -113,7 +113,7 @@ export default function MyReviewsPage() {
         className="flex flex-row-reverse pr-4"
         hidden={content.length >= 10 || content.length === 0}
       >
-        <div className="text-gray-500">*10자 이상 입력하시면 댓글 등록이 가능합니다!</div>
+        <div className="text-gray-500">*10자 이상 입력하시면 댓글 등록이 가능합니다.</div>
       </div>
       <ImageUploader
         setUploadImages={setUploadImages}
@@ -127,25 +127,14 @@ export default function MyReviewsPage() {
         >
           취소
         </button>
-        <SumitButton
+        <SubmitButton
           isActive={content.length >= 10}
           onClick={submit}
           type="button"
         >
           등록하기
-        </SumitButton>
+        </SubmitButton>
       </div>
     </main>
   );
 }
-
-export interface SubmitButtonProps {
-  isActive: boolean;
-}
-
-const SumitButton = styled.button<SubmitButtonProps>`
-  ${tw`m-2 p-2`}
-  border: 2px solid ${({ isActive }) => (isActive ? '#5C6BC0' : '#9E9E9E')};
-  background-color: ${({ isActive }) => (isActive ? '#1E88E5' : '#BEBEBE')};
-  color: white;
-`;
diff --git a/apps/web/src/app/reviews/layout.tsx b/apps/web/src/app/reviews/layout.tsx
index e19ab9d8..0e8253be 100644
--- a/apps/web/src/app/reviews/layout.tsx
+++ b/apps/web/src/app/reviews/layout.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ReviewServiceProvider } from '@/services/review.tsx';
+import { ReviewServiceProvider } from '@/services/review';
 
 export default function ReviewLayout({ children }: React.PropsWithChildren) {
   return <ReviewServiceProvider>{children}</ReviewServiceProvider>;
diff --git a/apps/web/src/assets/icon/icon-arrow.svg b/apps/web/src/assets/icon/icon-arrow.svg
new file mode 100644
index 00000000..ed911dea
--- /dev/null
+++ b/apps/web/src/assets/icon/icon-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="7" viewBox="0 0 13 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.09607 0.188113C1.03405 0.128024 0.961093 0.0810475 0.881366 0.0498662C0.801639 0.0186848 0.716703 0.00390908 0.631406 0.00638291C0.54611 0.00885675 0.462124 0.028532 0.384244 0.0642843C0.306364 0.100037 0.236115 0.151167 0.177507 0.214755C0.1189 0.278343 0.0730823 0.353145 0.0426701 0.434887C0.0122578 0.516631 -0.00215334 0.603714 0.000259573 0.691167C0.00267249 0.778621 0.0218621 0.864731 0.0567328 0.944581C0.0916035 1.02443 0.141472 1.09646 0.203492 1.15655L6.05006 6.81794C6.17068 6.93486 6.33036 7 6.49635 7C6.66233 7 6.82202 6.93486 6.94264 6.81794L12.7899 1.15654C12.8532 1.09685 12.9044 1.02484 12.9404 0.944699C12.9764 0.864555 12.9965 0.777876 12.9996 0.689695C13.0026 0.601514 12.9886 0.51359 12.9582 0.431029C12.9278 0.348468 12.8818 0.272916 12.8227 0.208762C12.7636 0.144608 12.6927 0.0931305 12.614 0.0573196C12.5354 0.0215086 12.4506 0.00207847 12.3645 0.000157293C12.2785 -0.00176388 12.1929 0.0138621 12.1128 0.0461282C12.0327 0.0783939 11.9597 0.126657 11.8979 0.188113L6.49635 5.41791L1.09607 0.188113Z" fill="#484848"/>
+</svg>
diff --git a/apps/web/src/assets/icon/icon-camera.svg b/apps/web/src/assets/icon/icon-camera.svg
new file mode 100644
index 00000000..1396a65d
--- /dev/null
+++ b/apps/web/src/assets/icon/icon-camera.svg
@@ -0,0 +1,19 @@
+            <svg
+              className="bi bi-camera"
+              fill="rgba(0,0,0,0.4)"
+              height="110"
+              viewBox="0 0 20 20"
+              width="110"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                fill="none"
+                height="100%"
+                stroke="rgba(0,0,0,0.3)"
+                width="100%"
+              />
+              <g transform="scale(0.5) translate(12.5, 11.5)">
+                <path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4z" />
+                <path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5m0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7M3 6.5a.5.5 0 1 1-1" />
+              </g>
+            </svg>
\ No newline at end of file
diff --git a/apps/web/src/assets/icon/icon-check-round.svg b/apps/web/src/assets/icon/icon-check-round.svg
new file mode 100644
index 00000000..a2d6c794
--- /dev/null
+++ b/apps/web/src/assets/icon/icon-check-round.svg
@@ -0,0 +1,4 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="28" cy="28" r="28" fill="#3F21BD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M45.231 16.7393C45.7234 17.2124 46 17.8538 46 18.5226C46 19.1915 45.7234 19.8329 45.231 20.3059L25.545 39.2118C25.2849 39.4617 24.976 39.6599 24.6361 39.7951C24.2962 39.9304 23.9318 40 23.5638 40C23.1959 40 22.8315 39.9304 22.4916 39.7951C22.1517 39.6599 21.8428 39.4617 21.5826 39.2118L11.8018 29.8202C11.551 29.5875 11.3509 29.3092 11.2132 29.0015C11.0756 28.6937 11.0031 28.3628 11.0001 28.0278C10.9971 27.6929 11.0635 27.3608 11.1956 27.0508C11.3276 26.7408 11.5227 26.4592 11.7693 26.2224C12.0159 25.9855 12.3091 25.7982 12.6319 25.6714C12.9547 25.5446 13.3005 25.4808 13.6493 25.4837C13.998 25.4866 14.3426 25.5562 14.6631 25.6884C14.9835 25.8206 15.2733 26.0127 15.5156 26.2536L23.563 33.9821L41.5155 16.7393C41.7594 16.505 42.049 16.319 42.3678 16.1922C42.6865 16.0653 43.0282 16 43.3733 16C43.7183 16 44.06 16.0653 44.3787 16.1922C44.6975 16.319 44.9871 16.505 45.231 16.7393Z" fill="#F4F5FB"/>
+</svg>
diff --git a/apps/web/src/components/close-button.tsx b/apps/web/src/assets/icon/icon-closing.svg
similarity index 57%
rename from apps/web/src/components/close-button.tsx
rename to apps/web/src/assets/icon/icon-closing.svg
index 153b20ad..a9eaf641 100644
--- a/apps/web/src/components/close-button.tsx
+++ b/apps/web/src/assets/icon/icon-closing.svg
@@ -1,13 +1,3 @@
-interface CloseButtonProps {
-  onClose: () => void;
-}
-export default function CloseButton({ onClose }: CloseButtonProps) {
-  return (
-    <button
-      className="absolute top-3 right-3 z-10"
-      onClick={onClose}
-      type="button"
-    >
       <svg
         className="bi bi-x-lg"
         fill="black"
@@ -17,7 +7,4 @@ export default function CloseButton({ onClose }: CloseButtonProps) {
         xmlns="http://www.w3.org/2000/svg"
       >
         <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z" />
-      </svg>
-    </button>
-  );
-}
+      </svg>
\ No newline at end of file
diff --git a/apps/web/src/assets/icon/icon-column.svg b/apps/web/src/assets/icon/icon-column.svg
new file mode 100644
index 00000000..c022839f
--- /dev/null
+++ b/apps/web/src/assets/icon/icon-column.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.0938 1.875C11.6325 1.875 12.1491 2.08901 12.5301 2.46994C12.911 2.85087 13.125 3.36753 13.125 3.90625L13.125 11.0938C13.125 11.6325 12.911 12.1491 12.5301 12.5301C12.1491 12.911 11.6325 13.125 11.0937 13.125L7.96875 13.125L7.96875 1.875L11.0938 1.875ZM7.03125 1.875L3.90625 1.875C3.36753 1.875 2.85087 2.08901 2.46994 2.46994C2.08901 2.85087 1.875 3.36753 1.875 3.90625L1.875 11.0937C1.875 11.6325 2.08901 12.1491 2.46994 12.5301C2.85087 12.911 3.36753 13.125 3.90625 13.125L7.03125 13.125L7.03125 1.875Z" fill="#C8CAD9"/>
+</svg>
diff --git a/apps/web/src/assets/icon/icon-container.svg b/apps/web/src/assets/icon/icon-container.svg
new file mode 100644
index 00000000..35012be2
--- /dev/null
+++ b/apps/web/src/assets/icon/icon-container.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 3.16667C2 2.59203 2.22827 2.04093 2.6346 1.6346C3.04093 1.22827 3.59203 1 4.16667 1H11.8333C12.408 1 12.9591 1.22827 13.3654 1.6346C13.7717 2.04093 14 2.59203 14 3.16667V6.5H2V3.16667ZM2 7.5V10.8333C2 11.408 2.22827 11.9591 2.6346 12.3654C3.04093 12.7717 3.59203 13 4.16667 13H11.8333C12.408 13 12.9591 12.7717 13.3654 12.3654C13.7717 11.9591 14 11.408 14 10.8333V7.5H2Z" fill="#C8CAD9"/>
+</svg>
diff --git a/apps/web/src/assets/icon/icon-custom-css.svg b/apps/web/src/assets/icon/icon-custom-css.svg
new file mode 100644
index 00000000..68ef8321
--- /dev/null
+++ b/apps/web/src/assets/icon/icon-custom-css.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.73332 10.8298C1.73332 11.604 2.22647 12.234 2.83329 12.234C2.96774 12.2313 3.10026 12.2 3.22276 12.1421C3.34526 12.0842 3.45519 12.0008 3.54583 11.897C3.61309 11.8236 3.70551 11.7812 3.80275 11.7789C3.89999 11.7767 3.99409 11.815 4.06435 11.8852C4.13461 11.9555 4.17527 12.052 4.17739 12.1536C4.17951 12.2551 4.14292 12.3534 4.07566 12.4268C3.91679 12.6056 3.72467 12.7486 3.51106 12.8472C3.29744 12.9458 3.06681 12.9978 2.83329 13C1.82254 13 1 12.0266 1 10.8298C1 9.63298 1.82254 8.65957 2.83329 8.65957C3.0669 8.66199 3.29758 8.71418 3.5112 8.81296C3.72483 8.91174 3.9169 9.05502 4.07566 9.23404C4.10896 9.27038 4.13509 9.31321 4.15254 9.3601C4.17 9.40698 4.17844 9.45699 4.17739 9.50729C4.17634 9.55758 4.16582 9.60716 4.14642 9.6532C4.12703 9.69925 4.09914 9.74085 4.06435 9.77564C4.02956 9.81042 3.98855 9.83771 3.94367 9.85595C3.89878 9.87418 3.8509 9.883 3.80275 9.8819C3.7546 9.88081 3.70713 9.86981 3.66305 9.84956C3.61897 9.8293 3.57914 9.80017 3.54583 9.76383C3.45529 9.65985 3.34542 9.57622 3.22291 9.51806C3.1004 9.45989 2.96783 9.42841 2.83329 9.42553C2.22647 9.42553 1.73332 10.0549 1.73332 10.8298ZM6.68321 10.3977C6.02017 10.1979 5.86434 10.0983 5.88878 9.89277C5.89215 9.82819 5.9098 9.76531 5.94033 9.70905C5.97087 9.6528 6.01346 9.60469 6.06478 9.56851C6.40638 9.3266 7.14398 9.45234 7.37497 9.51489C7.42192 9.52904 7.4711 9.53325 7.51962 9.52727C7.56815 9.52129 7.61504 9.50523 7.65754 9.48005C7.70004 9.45487 7.73729 9.42107 7.76711 9.38064C7.79693 9.34021 7.81871 9.29396 7.83117 9.24462C7.84363 9.19527 7.84653 9.14382 7.83968 9.09328C7.83284 9.04275 7.81639 8.99416 7.79131 8.95036C7.76623 8.90656 7.73303 8.86843 7.69364 8.83823C7.65426 8.80802 7.60949 8.78635 7.56197 8.77447C7.43975 8.74064 6.33427 8.45532 5.65534 8.93277C5.51741 9.03025 5.40164 9.15818 5.31622 9.30752C5.23079 9.45685 5.17779 9.62395 5.16097 9.79702C5.05158 10.7028 5.91078 10.9619 6.4791 11.1336C7.21976 11.357 7.38231 11.4738 7.34747 11.7566C7.34415 11.8243 7.32587 11.8903 7.29406 11.9495C7.26226 12.0086 7.2178 12.0592 7.16414 12.0974C6.82193 12.3355 6.09595 12.2021 5.86984 12.137C5.82229 12.1186 5.7716 12.1107 5.72098 12.1139C5.67036 12.117 5.62091 12.131 5.57575 12.1551C5.5306 12.1792 5.49072 12.2128 5.45863 12.2538C5.42654 12.2948 5.40295 12.3424 5.38934 12.3934C5.37573 12.4444 5.37239 12.4978 5.37955 12.5502C5.38671 12.6027 5.4042 12.653 5.43093 12.698C5.45765 12.743 5.49302 12.7817 5.5348 12.8118C5.57659 12.8418 5.62387 12.8624 5.67368 12.8723C5.96622 12.9539 6.2674 12.9967 6.57016 13C6.90565 13 7.27598 12.9394 7.56991 12.7357C7.71157 12.637 7.83055 12.5068 7.91835 12.3544C8.00615 12.202 8.06058 12.0312 8.07774 11.8543C8.20057 10.8547 7.28942 10.5796 6.68321 10.397V10.3977ZM10.5942 10.3977C9.9312 10.1979 9.77476 10.0983 9.79981 9.89277C9.80332 9.82823 9.82102 9.7654 9.85155 9.70917C9.88207 9.65293 9.92459 9.6048 9.97581 9.56851C10.318 9.3266 11.0544 9.4517 11.286 9.51489C11.3796 9.53971 11.4788 9.52493 11.5621 9.47377C11.6454 9.42261 11.7059 9.3392 11.7306 9.24166C11.7553 9.14413 11.7422 9.04035 11.6941 8.95287C11.646 8.86539 11.5667 8.80128 11.4736 8.77447C11.3514 8.74 10.2453 8.45532 9.56637 8.93277C9.42861 9.03038 9.313 9.15836 9.22769 9.30768C9.14238 9.45699 9.08944 9.62403 9.07261 9.79702C8.96261 10.7028 9.82181 10.9619 10.3907 11.1336C11.1314 11.357 11.2933 11.4738 11.2585 11.7566C11.2554 11.8244 11.2372 11.8905 11.2053 11.9496C11.1735 12.0088 11.129 12.0594 11.0752 12.0974C10.7323 12.3355 10.007 12.2021 9.78026 12.137C9.6899 12.119 9.59635 12.1371 9.51817 12.1877C9.43999 12.2383 9.38288 12.3178 9.35819 12.4104C9.3335 12.5029 9.34302 12.6018 9.38486 12.6874C9.42671 12.773 9.49782 12.839 9.58409 12.8723C9.87685 12.9538 10.1782 12.9967 10.4812 13C10.8167 13 11.1864 12.9394 11.4809 12.7357C11.6226 12.637 11.7416 12.5068 11.8294 12.3544C11.9172 12.202 11.9716 12.0312 11.9888 11.8543C12.1116 10.8547 11.1998 10.5796 10.5942 10.397V10.3977ZM11.2664 5.34043H8.21096C8.11371 5.34043 8.02045 5.30008 7.95169 5.22825C7.88293 5.15643 7.8443 5.05902 7.8443 4.95745V1.76596H2.34442C2.312 1.76596 2.28091 1.77941 2.25799 1.80335C2.23507 1.82729 2.2222 1.85976 2.2222 1.89362V6.48936C2.2222 6.59093 2.18357 6.68835 2.1148 6.76017C2.04604 6.83199 1.95278 6.87234 1.85554 6.87234C1.75829 6.87234 1.66503 6.83199 1.59627 6.76017C1.52751 6.68835 1.48888 6.59093 1.48888 6.48936V1.89362C1.48888 1.65662 1.57902 1.42932 1.73946 1.26173C1.8999 1.09415 2.11751 1 2.34442 1H8.21096C8.30817 1.00009 8.40137 1.0405 8.47006 1.11234L11.8922 4.68681C11.961 4.75856 11.9997 4.85591 11.9998 4.95745V6.48936C11.9998 6.59093 11.9611 6.68835 11.8924 6.76017C11.8236 6.83199 11.7303 6.87234 11.6331 6.87234C11.5359 6.87234 11.4426 6.83199 11.3738 6.76017C11.3051 6.68835 11.2664 6.59093 11.2664 6.48936V5.34043ZM10.747 4.57447L8.57762 2.30723V4.57447H10.747Z" fill="#C8CAD9" stroke="#C8CAD9" stroke-width="0.25"/>
+</svg>
diff --git a/apps/web/src/assets/icon/icon-custom-font.svg b/apps/web/src/assets/icon/icon-custom-font.svg
new file mode 100644
index 00000000..d037b5f9
--- /dev/null
+++ b/apps/web/src/assets/icon/icon-custom-font.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.125 12.5V13.125C8.125 13.3021 8.065 13.4506 7.945 13.5706C7.825 13.6906 7.67667 13.7504 7.5 13.75C7.32292 13.75 7.17458 13.69 7.055 13.57C6.93542 13.45 6.87542 13.3017 6.875 13.125V10.625C6.875 10.4479 6.935 10.2996 7.055 10.18C7.175 10.0604 7.32333 10.0004 7.5 10C7.67708 10 7.82563 10.06 7.94563 10.18C8.06563 10.3 8.12542 10.4483 8.125 10.625V11.25H12.5C12.6771 11.25 12.8256 11.31 12.9456 11.43C13.0656 11.55 13.1254 11.6983 13.125 11.875C13.125 12.0521 13.065 12.2006 12.945 12.3206C12.825 12.4406 12.6767 12.5004 12.5 12.5H8.125ZM2.5 12.5C2.32292 12.5 2.17458 12.44 2.055 12.32C1.93542 12.2 1.87542 12.0517 1.875 11.875C1.875 11.6979 1.935 11.5496 2.055 11.43C2.175 11.3104 2.32333 11.2504 2.5 11.25H5C5.17708 11.25 5.32563 11.31 5.44563 11.43C5.56563 11.55 5.62542 11.6983 5.625 11.875C5.625 12.0521 5.565 12.2006 5.445 12.3206C5.325 12.4406 5.17667 12.5004 5 12.5H2.5ZM6 6.82812H9.01562L9.54688 8.35938C9.58854 8.47396 9.66146 8.56771 9.76562 8.64062C9.86979 8.71354 9.98438 8.75 10.1094 8.75C10.3177 8.75 10.4844 8.66146 10.6094 8.48438C10.7344 8.30729 10.7552 8.11979 10.6719 7.92188L8.32812 1.65625C8.27604 1.53125 8.19792 1.43229 8.09375 1.35937C7.98958 1.28646 7.86979 1.25 7.73438 1.25H7.26562C7.13021 1.25 7.01042 1.28646 6.90625 1.35937C6.80208 1.43229 6.72396 1.53125 6.67188 1.65625L4.3125 7.9375C4.23958 8.13542 4.26312 8.32042 4.38313 8.4925C4.50313 8.66458 4.66708 8.75042 4.875 8.75C5.01042 8.75 5.12771 8.71354 5.22687 8.64062C5.32604 8.56771 5.40146 8.46875 5.45313 8.34375L6 6.82812ZM6.375 5.75L7.46875 2.64062H7.53125L8.625 5.75H6.375Z" fill="#C8CAD9"/>
+</svg>
diff --git a/apps/web/src/assets/icon/icon-dashboard-option.svg b/apps/web/src/assets/icon/icon-dashboard-option.svg
new file mode 100644
index 00000000..0f5d1243
--- /dev/null
+++ b/apps/web/src/assets/icon/icon-dashboard-option.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.66667 2H6.66667C7.03333 2 7.33333 2.3 7.33333 2.66667V6.66667C7.33333 7.03333 7.03333 7.33333 6.66667 7.33333H2.66667C2.3 7.33333 2 7.03333 2 6.66667V2.66667C2 2.3 2.3 2 2.66667 2ZM9.33333 2H13.3333C13.7 2 14 2.3 14 2.66667V6.66667C14 7.03333 13.7 7.33333 13.3333 7.33333H9.33333C8.96667 7.33333 8.66667 7.03333 8.66667 6.66667V2.66667C8.66667 2.3 8.96667 2 9.33333 2ZM2.66667 8.66667H6.66667C7.03333 8.66667 7.33333 8.96667 7.33333 9.33333V13.3333C7.33333 13.7 7.03333 14 6.66667 14H2.66667C2.3 14 2 13.7 2 13.3333V9.33333C2 8.96667 2.3 8.66667 2.66667 8.66667ZM11.3333 8.66667C10.9667 8.66667 10.6667 8.96667 10.6667 9.33333V10.6667H9.33333C8.96667 10.6667 8.66667 10.9667 8.66667 11.3333C8.66667 11.7 8.96667 12 9.33333 12H10.6667V13.3333C10.6667 13.7 10.9667 14 11.3333 14C11.7 14 12 13.7 12 13.3333V12H13.3333C13.7 12 14 11.7 14 11.3333C14 10.9667 13.7 10.6667 13.3333 10.6667H12V9.33333C12 8.96667 11.7 8.66667 11.3333 8.66667Z" fill="#C8CAD9"/>
+</svg>
diff --git a/apps/web/src/assets/icon/icon-dashboard.svg b/apps/web/src/assets/icon/icon-dashboard.svg
new file mode 100644
index 00000000..afd7f3bb
--- /dev/null
+++ b/apps/web/src/assets/icon/icon-dashboard.svg
@@ -0,0 +1,10 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_476_92)">
+<path d="M7.5 1C6.21442 1 4.95772 1.38122 3.8888 2.09545C2.81988 2.80968 1.98676 3.82484 1.49479 5.01256C1.00282 6.20028 0.874095 7.50721 1.1249 8.76809C1.3757 10.029 1.99477 11.1872 2.90381 12.0962C3.81285 13.0052 4.97104 13.6243 6.23191 13.8751C7.49279 14.1259 8.79972 13.9972 9.98744 13.5052C11.1752 13.0132 12.1903 12.1801 12.9046 11.1112C13.6188 10.0423 14 8.78558 14 7.5C13.9983 5.77661 13.313 4.12428 12.0943 2.90566C10.8757 1.68704 9.22339 1.00168 7.5 1ZM5.18537 9.1678C5.18537 9.30235 5.13192 9.43139 5.03678 9.52653C4.94164 9.62167 4.8126 9.67512 4.67805 9.67512C4.5435 9.67512 4.41446 9.62167 4.31932 9.52653C4.22418 9.43139 4.17073 9.30235 4.17073 9.1678V5.83854C4.17073 5.70399 4.22418 5.57495 4.31932 5.47981C4.41446 5.38467 4.5435 5.33122 4.67805 5.33122C4.8126 5.33122 4.94164 5.38467 5.03678 5.47981C5.13192 5.57495 5.18537 5.70399 5.18537 5.83854V9.1678ZM8.03903 10.2522C8.03903 10.3867 7.98558 10.5158 7.89044 10.6109C7.7953 10.7061 7.66626 10.7595 7.53171 10.7595C7.39716 10.7595 7.26812 10.7061 7.17298 10.6109C7.07784 10.5158 7.02439 10.3867 7.02439 10.2522V4.7478C7.02439 4.61326 7.07784 4.48422 7.17298 4.38908C7.26812 4.29394 7.39716 4.24049 7.53171 4.24049C7.66626 4.24049 7.7953 4.29394 7.89044 4.38908C7.98558 4.48422 8.03903 4.61326 8.03903 4.7478V10.2522ZM10.8927 9.1678C10.8927 9.30235 10.8392 9.43139 10.7441 9.52653C10.649 9.62167 10.5199 9.67512 10.3854 9.67512C10.2508 9.67512 10.1218 9.62167 10.0266 9.52653C9.9315 9.43139 9.87805 9.30235 9.87805 9.1678V5.83854C9.87805 5.70399 9.9315 5.57495 10.0266 5.47981C10.1218 5.38467 10.2508 5.33122 10.3854 5.33122C10.5199 5.33122 10.649 5.38467 10.7441 5.47981C10.8392 5.57495 10.8927 5.70399 10.8927 5.83854V9.1678Z" fill="#C8CAD9"/>
+</g>
+<defs>
+<clipPath id="clip0_476_92">
+<rect width="15" height="15" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/web/src/assets/icon/icon-deleting-image.svg b/apps/web/src/assets/icon/icon-deleting-image.svg
new file mode 100644
index 00000000..db995489
--- /dev/null
+++ b/apps/web/src/assets/icon/icon-deleting-image.svg
@@ -0,0 +1,16 @@
+<svg
+                className="bi bi-x-lg"
+                fill="white"
+                height="27"
+                viewBox="0 0 16 16"
+                width="27"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect
+                  className="p-3"
+                  fill="rgba(0,0,0,0.6)"
+                  height="100%"
+                  width="100%"
+                />
+                <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z" />
+              </svg>
\ No newline at end of file
diff --git a/apps/web/src/assets/icon/icon-layout.svg b/apps/web/src/assets/icon/icon-layout.svg
new file mode 100644
index 00000000..9998a621
--- /dev/null
+++ b/apps/web/src/assets/icon/icon-layout.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 8.125H6.25C6.59375 8.125 6.875 7.84375 6.875 7.5V2.5C6.875 2.15625 6.59375 1.875 6.25 1.875H2.5C2.15625 1.875 1.875 2.15625 1.875 2.5V7.5C1.875 7.84375 2.15625 8.125 2.5 8.125ZM2.5 13.125H6.25C6.59375 13.125 6.875 12.8438 6.875 12.5V10C6.875 9.65625 6.59375 9.375 6.25 9.375H2.5C2.15625 9.375 1.875 9.65625 1.875 10V12.5C1.875 12.8438 2.15625 13.125 2.5 13.125ZM8.75 13.125H12.5C12.8438 13.125 13.125 12.8438 13.125 12.5V7.5C13.125 7.15625 12.8438 6.875 12.5 6.875H8.75C8.40625 6.875 8.125 7.15625 8.125 7.5V12.5C8.125 12.8438 8.40625 13.125 8.75 13.125ZM8.125 2.5V5C8.125 5.34375 8.40625 5.625 8.75 5.625H12.5C12.8438 5.625 13.125 5.34375 13.125 5V2.5C13.125 2.15625 12.8438 1.875 12.5 1.875H8.75C8.40625 1.875 8.125 2.15625 8.125 2.5Z" fill="#C8CAD9"/>
+</svg>
diff --git a/apps/web/src/assets/icon/icon-loading.svg b/apps/web/src/assets/icon/icon-loading.svg
new file mode 100644
index 00000000..7c6047d7
--- /dev/null
+++ b/apps/web/src/assets/icon/icon-loading.svg
@@ -0,0 +1,59 @@
+<svg
+  viewBox="0 0 200 200"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <circle
+    cx="100"
+    cy="100"
+    fill="#5B5B5B"
+    r="10"
+    stroke="#5B5B5B"
+    strokeWidth="10"
+  >
+    <animate
+      attributeName="opacity"
+      begin="-.4"
+      calcMode="spline"
+      dur="2"
+      keySplines=".5 0 .5 1;.5 0 .5 1"
+      repeatCount="indefinite"
+      values="1;0;1;"
+    />
+  </circle>
+  <circle
+    cx="130"
+    cy="100"
+    fill="#5B5B5B"
+    r="10"
+    stroke="#5B5B5B"
+    strokeWidth="10"
+  >
+    <animate
+      attributeName="opacity"
+      begin="-.2"
+      calcMode="spline"
+      dur="2"
+      keySplines=".5 0 .5 1;.5 0 .5 1"
+      repeatCount="indefinite"
+      values="1;0;1;"
+    />
+  </circle>
+  <circle
+    cx="160"
+    cy="100"
+    fill="#5B5B5B"
+    r="10"
+    stroke="#5B5B5B"
+    strokeWidth="10"
+  >
+    <animate
+      attributeName="opacity"
+      begin="0"
+      calcMode="spline"
+      dur="2"
+      keySplines=".5 0 .5 1;.5 0 .5 1"
+      repeatCount="indefinite"
+      values="1;0;1;"
+    />
+  </circle>
+</svg>
diff --git a/apps/web/src/assets/icon/icon-login-password.svg b/apps/web/src/assets/icon/icon-login-password.svg
new file mode 100644
index 00000000..f9e59de5
--- /dev/null
+++ b/apps/web/src/assets/icon/icon-login-password.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 11.4286C6.39782 11.4286 6.77936 11.2781 7.06066 11.0102C7.34196 10.7422 7.5 10.3789 7.5 10C7.5 9.62112 7.34196 9.25776 7.06066 8.98985C6.77936 8.72194 6.39782 8.57143 6 8.57143C5.60218 8.57143 5.22064 8.72194 4.93934 8.98985C4.65804 9.25776 4.5 9.62112 4.5 10C4.5 10.3789 4.65804 10.7422 4.93934 11.0102C5.22064 11.2781 5.60218 11.4286 6 11.4286ZM10.5 5C10.8978 5 11.2794 5.15051 11.5607 5.41842C11.842 5.68633 12 6.04969 12 6.42857V13.5714C12 13.9503 11.842 14.3137 11.5607 14.5816C11.2794 14.8495 10.8978 15 10.5 15H1.5C1.10218 15 0.720644 14.8495 0.43934 14.5816C0.158035 14.3137 0 13.9503 0 13.5714V6.42857C0 6.04969 0.158035 5.68633 0.43934 5.41842C0.720644 5.15051 1.10218 5 1.5 5H2.25V3.57143C2.25 2.62423 2.64509 1.71582 3.34835 1.04605C4.05161 0.376274 5.00544 0 6 0C6.49246 0 6.98009 0.0923778 7.43506 0.271859C7.89003 0.45134 8.30343 0.714409 8.65165 1.04605C8.99987 1.37769 9.27609 1.7714 9.46455 2.2047C9.653 2.63801 9.75 3.10242 9.75 3.57143V5H10.5ZM6 1.42857C5.40326 1.42857 4.83097 1.65434 4.40901 2.0562C3.98705 2.45806 3.75 3.00311 3.75 3.57143V5H8.25V3.57143C8.25 3.00311 8.01295 2.45806 7.59099 2.0562C7.16903 1.65434 6.59674 1.42857 6 1.42857Z" fill="#C8CAD9"/>
+</svg>
diff --git a/apps/web/src/assets/icon/icon-login-user.svg b/apps/web/src/assets/icon/icon-login-user.svg
new file mode 100644
index 00000000..6b5ffe64
--- /dev/null
+++ b/apps/web/src/assets/icon/icon-login-user.svg
@@ -0,0 +1,4 @@
+<svg width="13" height="17" viewBox="0 0 13 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5672 4.12429C10.5672 6.40478 8.71997 8.25205 6.44294 8.25205C4.16245 8.25205 2.31519 6.40478 2.31519 4.12429C2.31519 1.84727 4.16245 0 6.44294 0C8.71997 0 10.5672 1.84727 10.5672 4.12429Z" fill="#C8CAD9"/>
+<path d="M12.8823 13.9019C11.2257 15.5239 8.95214 16.529 6.44291 16.529C3.93367 16.529 1.65665 15.5239 0 13.8984C1.23036 11.6041 3.65294 10.041 6.44291 10.041C9.2294 10.041 11.652 11.6041 12.8823 13.9019Z" fill="#C8CAD9"/>
+</svg>
diff --git a/apps/web/src/assets/icon/icon-naver-api.svg b/apps/web/src/assets/icon/icon-naver-api.svg
new file mode 100644
index 00000000..ccf977a5
--- /dev/null
+++ b/apps/web/src/assets/icon/icon-naver-api.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.50297 7.89609L5.3325 1.875H1.875V13.125H5.49656V7.10437L9.6675 13.125H13.125V1.875H9.50297V7.89609Z" fill="#C8CAD9"/>
+</svg>
diff --git a/apps/web/src/assets/icon/icon-review-option.svg b/apps/web/src/assets/icon/icon-review-option.svg
new file mode 100644
index 00000000..71a531f3
--- /dev/null
+++ b/apps/web/src/assets/icon/icon-review-option.svg
@@ -0,0 +1,5 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 5H8.125M10.625 5H12.5M6.875 10H12.5M2.5 10H4.375" stroke="#C8CAD9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.625 11.25C6.31536 11.25 6.875 10.6904 6.875 10C6.875 9.30964 6.31536 8.75 5.625 8.75C4.93464 8.75 4.375 9.30964 4.375 10C4.375 10.6904 4.93464 11.25 5.625 11.25Z" stroke="#C8CAD9" stroke-width="1.5"/>
+<path d="M9.375 6.25C10.0654 6.25 10.625 5.69036 10.625 5C10.625 4.30964 10.0654 3.75 9.375 3.75C8.68464 3.75 8.125 4.30964 8.125 5C8.125 5.69036 8.68464 6.25 9.375 6.25Z" stroke="#C8CAD9" stroke-width="1.5"/>
+</svg>
diff --git a/apps/web/src/assets/icon/icon-thumb-up.svg b/apps/web/src/assets/icon/icon-thumb-up.svg
new file mode 100644
index 00000000..76f32532
--- /dev/null
+++ b/apps/web/src/assets/icon/icon-thumb-up.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8828 4.06859C11.7684 3.93896 11.6278 3.83515 11.4702 3.76406C11.3126 3.69296 11.1416 3.65622 10.9688 3.65625H8.125V2.84375C8.125 2.30503 7.91099 1.78837 7.53006 1.40744C7.14913 1.02651 6.63247 0.8125 6.09375 0.8125C6.01828 0.812446 5.94428 0.833417 5.88006 0.873063C5.81584 0.912708 5.76393 0.969459 5.73016 1.03695L3.81164 4.875H1.625C1.40951 4.875 1.20285 4.9606 1.05048 5.11298C0.898102 5.26535 0.8125 5.47201 0.8125 5.6875V10.1562C0.8125 10.3717 0.898102 10.5784 1.05048 10.7308C1.20285 10.8831 1.40951 10.9688 1.625 10.9688H10.3594C10.6563 10.9689 10.943 10.8606 11.1658 10.6642C11.3885 10.4678 11.5319 10.1969 11.569 9.90234L12.1784 5.02734C12.2 4.85571 12.1848 4.68145 12.1338 4.51615C12.0829 4.35084 11.9973 4.19827 11.8828 4.06859ZM1.625 5.6875H3.65625V10.1562H1.625V5.6875ZM11.372 4.92578L10.7626 9.80078C10.7502 9.89898 10.7024 9.98928 10.6282 10.0547C10.5539 10.1202 10.4583 10.1563 10.3594 10.1562H4.46875V5.37723L6.33293 1.64836C6.60923 1.70366 6.85782 1.85299 7.03642 2.07093C7.21502 2.28888 7.31258 2.56197 7.3125 2.84375V4.0625C7.3125 4.17024 7.3553 4.27358 7.43149 4.34976C7.50767 4.42595 7.61101 4.46875 7.71875 4.46875H10.9688C11.0264 4.46873 11.0834 4.48098 11.1359 4.50469C11.1885 4.52839 11.2354 4.56301 11.2735 4.60624C11.3117 4.64947 11.3402 4.70032 11.3571 4.75541C11.3741 4.81051 11.3792 4.86858 11.372 4.92578Z" fill="black"/>
+</svg>
diff --git a/apps/web/src/assets/icon/icon-title.svg b/apps/web/src/assets/icon/icon-title.svg
new file mode 100644
index 00000000..820b29e4
--- /dev/null
+++ b/apps/web/src/assets/icon/icon-title.svg
@@ -0,0 +1,10 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_476_125)">
+<path d="M2.91699 2.04175C2.68493 2.04175 2.46237 2.13394 2.29827 2.29803C2.13418 2.46212 2.04199 2.68468 2.04199 2.91675C2.04199 3.14881 2.13418 3.37137 2.29827 3.53547C2.46237 3.69956 2.68493 3.79175 2.91699 3.79175H6.12533V11.6667C6.12533 11.8988 6.21751 12.1214 6.38161 12.2855C6.5457 12.4496 6.76826 12.5417 7.00033 12.5417C7.23239 12.5417 7.45495 12.4496 7.61904 12.2855C7.78314 12.1214 7.87533 11.8988 7.87533 11.6667V3.79175H11.0837C11.3157 3.79175 11.5383 3.69956 11.7024 3.53547C11.8665 3.37137 11.9587 3.14881 11.9587 2.91675C11.9587 2.68468 11.8665 2.46212 11.7024 2.29803C11.5383 2.13394 11.3157 2.04175 11.0837 2.04175H2.91699Z" fill="#C8CAD9"/>
+</g>
+<defs>
+<clipPath id="clip0_476_125">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/web/src/assets/icon/icon-waring.svg b/apps/web/src/assets/icon/icon-waring.svg
new file mode 100644
index 00000000..b038ac4f
--- /dev/null
+++ b/apps/web/src/assets/icon/icon-waring.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="74px" height="74px" viewBox="-2.2 -2.2 26.40 26.40" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg2" version="1.1" inkscape:version="0.92.1 r15371" sodipodi:docname="dark_warning.svg" fill="#000000">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <defs id="defs4"> <linearGradient gradientUnits="userSpaceOnUse" y2="2" x2="16" y1="29.999973" x1="16" id="linearGradient4144" xlink:href="#linearGradient4155" inkscape:collect="always" gradientTransform="matrix(1.66667 0 0 -1.66667 -15.667 1064.696)"/> <linearGradient inkscape:collect="always" id="linearGradient4155"> <stop style="stop-color:#fcd994;stop-opacity:1" offset="0" id="stop4157"/> <stop style="stop-color:#fff6e1;stop-opacity:1" offset="1" id="stop4159"/> </linearGradient> </defs> <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="22.4" inkscape:cx="-8.3436117" inkscape:cy="10.155389" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" inkscape:showpageshadow="false" borderlayer="true" inkscape:window-width="1884" inkscape:window-height="1051" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" units="px"> <sodipodi:guide position="2,20.000017" orientation="18,0" id="guide4085" inkscape:locked="false"/> <sodipodi:guide position="2,2.0000174" orientation="0,18" id="guide4087" inkscape:locked="false"/> <sodipodi:guide position="20,2.0000174" orientation="-18,0" id="guide4089" inkscape:locked="false"/> <sodipodi:guide position="20,20.000017" orientation="0,-18" id="guide4091" inkscape:locked="false"/> <sodipodi:guide position="3,19.000017" orientation="16,0" id="guide4093" inkscape:locked="false"/> <sodipodi:guide position="3,3.0000174" orientation="0,16" id="guide4095" inkscape:locked="false"/> <sodipodi:guide position="19,3.0000174" orientation="-16,0" id="guide4097" inkscape:locked="false"/> <sodipodi:guide position="19,19.000017" orientation="0,-16" id="guide4099" inkscape:locked="false"/> <inkscape:grid type="xygrid" id="grid4101"/> </sodipodi:namedview> <metadata id="metadata7"> <rdf:rdf> <cc:work> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> <dc:title/> <dc:creator> <cc:agent> <dc:title>Timothée Giet</dc:title> </cc:agent> </dc:creator> <dc:date>2017</dc:date> <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/"/> </cc:work> <cc:license rdf:about="http://creativecommons.org/licenses/by-sa/4.0/"> <cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/> <cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/> <cc:requires rdf:resource="http://creativecommons.org/ns#Notice"/> <cc:requires rdf:resource="http://creativecommons.org/ns#Attribution"/> <cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/> <cc:requires rdf:resource="http://creativecommons.org/ns#ShareAlike"/> </cc:license> </rdf:rdf> </metadata> <g inkscape:label="Capa 1" inkscape:groupmode="layer" id="layer1" transform="translate(0 -1030.362)"> <path style="fill:#ffc35a;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m11 1032.362-10 18h20zm0 2 8 15H3z" id="path839" inkscape:connector-curvature="0" sodipodi:nodetypes="cccccccc"/> <path style="fill:#373737;fill-opacity:.94117647;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M10 1046.362h2v2h-2z" id="path844" inkscape:connector-curvature="0"/> <path style="fill:#373737;fill-opacity:.94117647;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M10 1045.362h2v-6h-2z" id="path846" inkscape:connector-curvature="0" sodipodi:nodetypes="ccccc"/> </g> </g>
+
</svg>
\ No newline at end of file
diff --git a/apps/web/src/components/button/close.tsx b/apps/web/src/components/button/close.tsx
new file mode 100644
index 00000000..82e4c4a5
--- /dev/null
+++ b/apps/web/src/components/button/close.tsx
@@ -0,0 +1,16 @@
+import ClosingIcon from '@/assets/icon/icon-closing.svg';
+
+interface CloseButtonProps {
+  onClose: () => void;
+}
+export default function CloseButton({ onClose }: CloseButtonProps) {
+  return (
+    <button
+      className="absolute top-3 right-3 z-10"
+      onClick={onClose}
+      type="button"
+    >
+      <ClosingIcon />
+    </button>
+  );
+}
diff --git a/apps/web/src/components/button/submit.tsx b/apps/web/src/components/button/submit.tsx
new file mode 100644
index 00000000..d8ff26f6
--- /dev/null
+++ b/apps/web/src/components/button/submit.tsx
@@ -0,0 +1,11 @@
+import tw, { styled } from 'twin.macro';
+
+interface SubmitButtonProps {
+  isActive: boolean;
+}
+export const SubmitButton = styled.button<SubmitButtonProps>`
+  ${tw`m-2 p-2`}
+  border: 2px solid ${({ isActive }) => (isActive ? '#5C6BC0' : '#9E9E9E')};
+  background-color: ${({ isActive }) => (isActive ? '#1E88E5' : '#BEBEBE')};
+  color: ${'#ffffff'};
+`;
diff --git a/apps/web/src/components/delete-confrim.tsx b/apps/web/src/components/delete-confrim.tsx
index affdd3ab..7da5458f 100644
--- a/apps/web/src/components/delete-confrim.tsx
+++ b/apps/web/src/components/delete-confrim.tsx
@@ -1,3 +1,5 @@
+import WaringIcon from '@/assets/icon/icon-waring.svg';
+
 interface ConfirmProps {
   deleteItem: () => void;
   onClose: () => void;
@@ -6,27 +8,28 @@ interface ConfirmProps {
 export default function DeleteConfirm({ deleteItem, onClose }: ConfirmProps) {
   return (
     <main className="flex items-center justify-center min-h-screen">
-      <div className="flex flex-col items-center p-8">
+      <div className="flex flex-col items-center">
+        <WaringIcon />
         <div className="relative text-center">
-          <p>삭제된 정보는 다시 복구할 수 없습니다.</p>
-          <p>
-            정말 <span className="text-red-500">삭제</span>하시겠습니까?
-          </p>
+          <p>정말 삭제하시겠습니까?</p>
         </div>
-        <div className="flex p-4 gap-8 mt-4">
-          <button
-            className="text-red-500"
-            onClick={deleteItem}
-            type="button"
-          >
-            확인
-          </button>
-          <button
-            onClick={onClose}
-            type="button"
-          >
-            취소
-          </button>
+        <div className="flex p-4 gap-8">
+          <div className="rounded-lg border-2 border-indigo-500/20 bg-gray-900/70 text-white  px-4 py-1">
+            <button
+              onClick={onClose}
+              type="button"
+            >
+              취소
+            </button>
+          </div>
+          <div className="rounded-lg border-2 border-indigo-500/20 text-white bg-gray-600/70 px-4 py-1">
+            <button
+              onClick={deleteItem}
+              type="button"
+            >
+              삭제
+            </button>
+          </div>
         </div>
       </div>
     </main>
diff --git a/apps/web/src/components/global-styles.tsx b/apps/web/src/components/global-styles.tsx
index 87a4c514..7bec267d 100644
--- a/apps/web/src/components/global-styles.tsx
+++ b/apps/web/src/components/global-styles.tsx
@@ -1,7 +1,4 @@
 'use client';
-
-import React from 'react';
-
 import { Global } from '@emotion/react';
 import { css, GlobalStyles as BaseStyles } from 'twin.macro';
 
diff --git a/apps/web/src/components/reply/item.tsx b/apps/web/src/components/reply/board-style-item.tsx
similarity index 92%
rename from apps/web/src/components/reply/item.tsx
rename to apps/web/src/components/reply/board-style-item.tsx
index c9d2c6d1..641097fa 100644
--- a/apps/web/src/components/reply/item.tsx
+++ b/apps/web/src/components/reply/board-style-item.tsx
@@ -12,9 +12,9 @@ import {
   generateShadowCSS,
 } from '@review-canvas/theme';
 
-import { useReviewItemStyle } from '@/contexts/style/review-item.ts';
+import { useReviewItemStyle } from '@/contexts/style/review-item-style.ts';
 import useMessageToShop from '@/hooks/use-message-to-shop';
-import type { CreateReplyItemRequest, ReplyItem } from '@/services/api-types/review';
+import type { CreateReplyItemRequest, ReplyItem } from '@/models/api-type';
 import { useReviewService } from '@/services/review';
 import { MESSAGE_TYPES } from '@/utils/message';
 
@@ -24,12 +24,13 @@ interface ReplyItemProps {
   memberId?: string;
 }
 
-export default function Reply(props: ReplyItemProps) {
+export default function BoardStyleReply(props: ReplyItemProps) {
   const [editText, setEditText] = useState(false);
   const [content, setContent] = useState(props.reply.content);
   const style = useReviewItemStyle();
   const message = useMessageToShop();
   const reviewService = useReviewService();
+
   useEffect(() => {
     setContent(props.reply.content);
   }, [props.reply.content]);
@@ -79,7 +80,7 @@ export default function Reply(props: ReplyItemProps) {
   };
 
   const deleteReply = () => {
-    message(MESSAGE_TYPES.OPEN_SELECTING_MODAL, {
+    message(MESSAGE_TYPES.OPEN_MODAL, {
       type: 'delete',
       url: `/replies/${props.reply.replyId}/delete`,
     });
@@ -130,13 +131,13 @@ export default function Reply(props: ReplyItemProps) {
 
   const showingText = () => {
     return (
-      <div>
+      <div className={props.reply.isMine ? 'mt-5' : ''}>
         <p className="text-left">{props.reply.deleted ? '삭제된 댓글입니다.' : content}</p>
         {!props.reply.deleted && props.reply.isMine ? (
           /*eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions --
-This is intentional*/
+          This is intentional*/
           <div
-            className="absolute top-2 right-1 text-gray-700/90 mt-1 z-5"
+            className="absolute top-0 right-1 text-gray-700/90 mt-1 z-5"
             onClick={(evt) => {
               evt.stopPropagation();
             }}
diff --git a/apps/web/src/components/reply/talk-style-item.tsx b/apps/web/src/components/reply/talk-style-item.tsx
new file mode 100644
index 00000000..e42e7c97
--- /dev/null
+++ b/apps/web/src/components/reply/talk-style-item.tsx
@@ -0,0 +1,190 @@
+import { useEffect, useState } from 'react';
+
+import { useMutation } from '@tanstack/react-query';
+import { css } from 'twin.macro';
+
+import {
+  generateBorderCSS,
+  generateBorderRadiusCSS,
+  generateFontCSS,
+  generateMarginCSS,
+  generatePaddingCSS,
+  generateShadowCSS,
+} from '@review-canvas/theme';
+
+import { useReviewItemStyle } from '@/contexts/style/review-item-style.ts';
+import useMessageToShop from '@/hooks/use-message-to-shop';
+import type { CreateReplyItemRequest, ReplyItem } from '@/models/api-type';
+import { useReviewService } from '@/services/review';
+import { MESSAGE_TYPES } from '@/utils/message';
+
+interface ReplyItemProps {
+  reply: ReplyItem;
+  isModal?: boolean;
+  memberId?: string;
+}
+
+export default function ChatStyleReply(props: ReplyItemProps) {
+  const [editText, setEditText] = useState(false);
+  const [content, setContent] = useState(props.reply.content);
+  const style = useReviewItemStyle();
+  const message = useMessageToShop();
+  const reviewService = useReviewService();
+  useEffect(() => {
+    setContent(props.reply.content);
+  }, [props.reply.content]);
+  const updateReplyMutation = useMutation({
+    mutationFn: async () => {
+      await reviewService.updateReply(props.reply.replyId, request);
+    },
+    onSuccess: () => {
+      close();
+    },
+    onError: () => {
+      throw new Error('수정에 실패했습니다');
+    },
+  });
+
+  const request: CreateReplyItemRequest = {
+    content,
+    mallId: props.reply.mallId,
+    memberId: props.memberId,
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setContent(event.target.value);
+  };
+
+  const handleKeyDown = (e: { key: string; shiftKey: any; preventDefault: () => void }) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      if (content.length !== 0) submit();
+    }
+  };
+
+  const submit = () => {
+    updateReplyMutation.mutate();
+    setEditText(false);
+  };
+
+  const edit = () => {
+    if (props.isModal) {
+      setEditText(true);
+    } else {
+      message(MESSAGE_TYPES.OPEN_MODAL, {
+        type: 'edit',
+        url: `/replies/${props.reply.replyId}/edit`,
+      });
+    }
+  };
+
+  const deleteReply = () => {
+    message(MESSAGE_TYPES.OPEN_MODAL, {
+      type: 'delete',
+      url: `/replies/${props.reply.replyId}/delete`,
+    });
+  };
+
+  const buttonForReply = (onClick: () => void) => {
+    return (
+      <div>
+        <button
+          className="border-b-2 border-gray-600/70 mx-1"
+          onClick={onClick}
+          type="button"
+        >
+          수정
+        </button>
+        <button
+          className="border-b-2 border-gray-600/70 mx-1"
+          onClick={deleteReply}
+          type="button"
+        >
+          삭제
+        </button>
+      </div>
+    );
+  };
+
+  const editingText = () => {
+    return (
+      <div className="flex text-left">
+        <textarea
+          className="border-2 border-gray-400/80 p-1 w-full resize-none"
+          maxLength={500}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          placeholder="댓글을 작성해주세요."
+          rows={3}
+          value={content}
+        />
+        <div
+          className="absolute right-0 top-0 border-gray-600/70 text-gray-700/90"
+          hidden={content.length === 0}
+        >
+          {buttonForReply(submit)}
+        </div>
+      </div>
+    );
+  };
+
+  const showingText = () => {
+    return (
+      <div>
+        <p className={`text-left ${props.reply.isMine ? 'mt-7' : ''}`}>
+          {props.reply.deleted ? '삭제된 댓글입니다.' : content}
+        </p>
+        {!props.reply.deleted && props.reply.isMine ? (
+          /*eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions --
+    This is intentional*/
+          <div
+            className="absolute top-2 right-1 text-gray-700/90 mt-1 z-5"
+            onClick={(evt) => {
+              evt.stopPropagation();
+            }}
+          >
+            {buttonForReply(edit)}
+          </div>
+        ) : null}
+      </div>
+    );
+  };
+
+  return (
+    <ul>
+      <li>
+        <div
+          className="w-fit mb-1 text-gray-500 text-xs"
+          css={[
+            css`
+              margin-left: auto;
+            `,
+          ]}
+        >
+          작성자 <span>{props.reply.nickname}</span>
+        </div>
+        <div
+          className="relative"
+          css={[
+            generateMarginCSS(style.margin),
+            generatePaddingCSS(style.padding),
+            generateBorderCSS(style.border, style.borderColor),
+            generateBorderRadiusCSS(style.borderRadius),
+            generateFontCSS(style.font),
+            generateShadowCSS(style.shadow, style.shadowColor),
+            css`
+              background-color: ${style.backgroundColor};
+              display: flex;
+              flex-direction: column;
+              gap: 8px;
+              width: 40%;
+              margin-left: auto;
+            `,
+          ]}
+        >
+          <div>{editText ? editingText() : showingText()}</div>
+        </div>
+      </li>
+    </ul>
+  );
+}
diff --git a/apps/web/src/components/review/board-style-item.tsx b/apps/web/src/components/review/board-style-item.tsx
new file mode 100644
index 00000000..1e5ed825
--- /dev/null
+++ b/apps/web/src/components/review/board-style-item.tsx
@@ -0,0 +1,174 @@
+import { useState } from 'react';
+
+import Image from 'next/image';
+import { css } from 'twin.macro';
+
+import {
+  generateBorderCSS,
+  generateBorderRadiusCSS,
+  generateFontCSS,
+  generateMarginCSS,
+  generatePaddingCSS,
+  generateShadowCSS,
+} from '@review-canvas/theme';
+
+import LoadingIcon from '@/assets/icon/icon-loading.svg';
+import ThumbUpIcon from '@/assets/icon/icon-thumb-up.svg';
+import Reply from '@/components/reply/board-style-item';
+import { Star } from '@/components/review/star';
+import { useReviewItem } from '@/contexts/function/review-item.ts';
+import { useReviewLikeButtonStyle } from '@/contexts/style/review-item-style.ts';
+import type { ReviewItem as ReviewType } from '@/models/api-type';
+
+interface ReviewItemProps {
+  review: ReviewType;
+  productName?: string;
+}
+
+export default function ReviewItem(props: ReviewItemProps) {
+  const { style, likeCount, isLiked, edit, deleteReview, showReviewDetail, onClickLikeButton } = useReviewItem(props);
+  const { baseButtonStyle, likedButtonStyle } = useReviewLikeButtonStyle();
+
+  const [isImageValid, setIsImageValid] = useState(true);
+  const [retryCount, setRetryCount] = useState(0);
+
+  const ImageUrls = props.review.imageVideoUrls.reviewResizeImageUrls;
+  const maxRetries = 10;
+
+  const handleImageError = () => {
+    setRetryCount(retryCount + 1);
+    if (retryCount < maxRetries) {
+      setTimeout(() => {
+        setIsImageValid(true);
+      }, 4000);
+    } else {
+      setIsImageValid(false);
+    }
+  };
+
+  return (
+    <li
+      css={[
+        generateMarginCSS(style.margin),
+        generatePaddingCSS(style.padding),
+        generateBorderCSS(style.border, style.borderColor),
+        generateBorderRadiusCSS(style.borderRadius),
+        generateFontCSS(style.font),
+        generateShadowCSS(style.shadow, style.shadowColor),
+        css`
+          border-color: ${style.borderColor};
+          background-color: ${style.backgroundColor};
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        `,
+      ]}
+    >
+      {props.review.deleted ? (
+        <div
+          aria-haspopup
+          className="relative"
+        >
+          {props.productName ? <div className="pb-2">상품명 : {props.productName}</div> : null}
+          <div className="w-fit">
+            작성자 <span>{props.review.nickname}</span>
+          </div>
+          <p className="text-left">삭제된 리뷰입니다.</p>
+        </div>
+      ) : (
+        /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- require */
+        <div
+          aria-haspopup
+          className="relative"
+          onClick={showReviewDetail}
+          onKeyUp={(evt) => {
+            if (evt.key === 'Enter' || evt.key === 'Spacebar') showReviewDetail();
+          }}
+        >
+          {props.productName ? <div className="pb-2">상품명 : {props.productName}</div> : null}
+          <div className="flex gap-0.5 items-center w-fit">
+            <Star
+              setStar={() => {}}
+              size="small"
+              star={props.review.score}
+            />
+          </div>
+          <div className="w-fit">
+            작성자 <span>{props.review.nickname}</span>
+          </div>
+          <p className="text-left">{props.review.content}</p>
+          {style.reviewLike.buttonType !== 'NONE' && (
+            <button
+              css={[
+                generateBorderRadiusCSS(style.reviewLike.buttonRound),
+                baseButtonStyle,
+                isLiked && likedButtonStyle,
+              ]}
+              onClick={onClickLikeButton}
+              type="button"
+            >
+              <ThumbUpIcon
+                className="mt-1 mr-0.5"
+                stroke={style.reviewLike.iconColor}
+              />
+              {style.reviewLike.buttonType === 'THUMB_UP_WITH_TEXT' && <div className="ml-1">좋아요</div>}
+              <div className="ml-1">{likeCount}</div>
+            </button>
+          )}
+          {props.review.isMine ? (
+            /*eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions --
+      This is intentional*/
+            <div
+              className="absolute top-1 right-1 z-5"
+              onClick={(evt) => {
+                evt.stopPropagation();
+              }}
+            >
+              <button
+                className="border-b-2 border-gray-600/70 text-gray-700/90 mx-1"
+                onClick={edit}
+                type="button"
+              >
+                수정
+              </button>
+              <button
+                className="border-b-2 border-gray-600/70 text-gray-700/90 mx-1"
+                onClick={deleteReview}
+                type="button"
+              >
+                삭제
+              </button>
+            </div>
+          ) : null}
+          <div className="grid grid-cols-5 justify-center mx-10 items-center">
+            {isImageValid ? (
+              ImageUrls.map((imageUrl: string, index: number) => (
+                <div
+                  className="my-5"
+                  key={index}
+                >
+                  <Image
+                    alt={`upload-img-${index}`}
+                    className="max-w-[60%] max-h-[60%] object-contain"
+                    height={0}
+                    onError={handleImageError}
+                    src={imageUrl}
+                    width={500}
+                  />
+                </div>
+              ))
+            ) : (
+              <LoadingIcon />
+            )}
+          </div>
+          {props.review.replies.map((it) => (
+            <Reply
+              key={it.replyId}
+              reply={it}
+            />
+          ))}
+        </div>
+      )}
+    </li>
+  );
+}
diff --git a/apps/web/src/components/review/item.tsx b/apps/web/src/components/review/card-style-item.tsx
similarity index 64%
rename from apps/web/src/components/review/item.tsx
rename to apps/web/src/components/review/card-style-item.tsx
index 2d91cd31..f64e37fb 100644
--- a/apps/web/src/components/review/item.tsx
+++ b/apps/web/src/components/review/card-style-item.tsx
@@ -10,46 +10,19 @@ import {
   generateShadowCSS,
 } from '@review-canvas/theme';
 
+import ThumbUpIcon from '@/assets/icon/icon-thumb-up.svg';
 import { Star } from '@/components/review/star.tsx';
-import { useReviewItemStyle } from '@/contexts/style/review-item.ts';
-import useMessageToShop from '@/hooks/use-message-to-shop.ts';
-import type { ReviewItem as ReviewType } from '@/services/api-types/review';
-import { useConnectedShop } from '@/state/shop.ts';
-import { MESSAGE_TYPES } from '@/utils/message';
-
-import Reply from '../reply/item';
+import { useReviewItem } from '@/contexts/function/review-item.ts';
+import { useReviewLikeButtonStyle } from '@/contexts/style/review-item-style.ts';
+import type { ReviewItem as ReviewType } from '@/models/api-type';
 
 interface ReviewItemProps {
   review: ReviewType;
 }
 
-export default function ReviewItem(props: ReviewItemProps) {
-  const style = useReviewItemStyle();
-  const { userID } = useConnectedShop();
-  const message = useMessageToShop();
-
-  const isReviewWrittenByLoginUser = userID === props.review.nickname;
-
-  const edit = () => {
-    message(MESSAGE_TYPES.OPEN_MODAL, {
-      type: 'edit',
-      url: `/reviews/${props.review.reviewId}/edit`,
-    });
-  };
-
-  const deleteReview = () => {
-    message(MESSAGE_TYPES.OPEN_SELECTING_MODAL, {
-      type: 'delete',
-      url: `/reviews/${props.review.reviewId}/delete`,
-    });
-  };
-
-  const showReviewDetail = () => {
-    message(MESSAGE_TYPES.OPEN_MODAL, {
-      type: 'detail',
-      url: `/reviews/${props.review.reviewId}`,
-    });
-  };
+export default function CardStyleReview(props: ReviewItemProps) {
+  const { style, likeCount, isLiked, edit, deleteReview, showReviewDetail, onClickLikeButton } = useReviewItem(props);
+  const { baseButtonStyle, likedButtonStyle } = useReviewLikeButtonStyle();
 
   return (
     <li
@@ -61,17 +34,21 @@ export default function ReviewItem(props: ReviewItemProps) {
         generateFontCSS(style.font),
         generateShadowCSS(style.shadow, style.shadowColor),
         css`
+          border-color: ${style.borderColor};
           background-color: ${style.backgroundColor};
           display: flex;
           flex-direction: column;
           gap: 8px;
+          height: auto;
+          position: relative;
+          padding-bottom: 40px;
         `,
       ]}
     >
       {props.review.deleted ? (
         <div
           aria-haspopup
-          className="relative"
+          className="relative mb-5"
         >
           <div className="w-fit">
             작성자 <span>{props.review.nickname}</span>
@@ -82,13 +59,13 @@ export default function ReviewItem(props: ReviewItemProps) {
         /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- require */
         <div
           aria-haspopup
-          className="relative"
+          className="relative mb-10"
           onClick={showReviewDetail}
           onKeyUp={(evt) => {
             if (evt.key === 'Enter' || evt.key === 'Spacebar') showReviewDetail();
           }}
         >
-          <div className="flex gap-0.5 items-center w-fit">
+          <div className="flex gap-0.5 items-center w-fit flex-grow">
             <Star
               setStar={() => {}}
               size="small"
@@ -99,11 +76,11 @@ export default function ReviewItem(props: ReviewItemProps) {
             작성자 <span>{props.review.nickname}</span>
           </div>
           <p className="text-left">{props.review.content}</p>
-          {isReviewWrittenByLoginUser ? (
+          {props.review.isMine ? (
             /*eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions --
-      This is intentional*/
+            This is intentional*/
             <div
-              className="absolute top-1 right-1 z-5"
+              className="absolute top-1 right-1 z-5 flex-grow"
               onClick={(evt) => {
                 evt.stopPropagation();
               }}
@@ -139,14 +116,31 @@ export default function ReviewItem(props: ReviewItemProps) {
               </div>
             ))}
           </div>
-          {props.review.replies.map((it) => (
-            <Reply
-              key={it.replyId}
-              reply={it}
-            />
-          ))}
         </div>
       )}
+      {style.reviewLike.buttonType !== 'NONE' && (
+        <button
+          css={[
+            generateBorderRadiusCSS(style.reviewLike.buttonRound),
+            baseButtonStyle,
+            isLiked && likedButtonStyle,
+            css`
+              position: absolute;
+              bottom: 5px;
+              left: 10px;
+            `,
+          ]}
+          onClick={onClickLikeButton}
+          type="button"
+        >
+          <ThumbUpIcon
+            className="mt-1 mr-0.5"
+            stroke={style.reviewLike.iconColor}
+          />
+          {style.reviewLike.buttonType === 'THUMB_UP_WITH_TEXT' && <div className="ml-1">좋아요</div>}
+          <div className="ml-1">{likeCount}</div>
+        </button>
+      )}
     </li>
   );
 }
diff --git a/apps/web/src/components/review/image-slide.tsx b/apps/web/src/components/review/image-slide.tsx
index ce9cf439..5750b579 100644
--- a/apps/web/src/components/review/image-slide.tsx
+++ b/apps/web/src/components/review/image-slide.tsx
@@ -21,46 +21,42 @@ export default function ImageSlide(props: ImageUrlsProps) {
   const length = reviewResizeImageUrls.length;
 
   return length > 0 ? (
-    <div className="flex justify-center p-4">
+    <div className="flex justify-center p-2 items-center h-screen">
       <button
-        className="absolute left-8 top-1/2 transform -translate-y-1/2"
+        className="absolute left-3 top-1/2 transform -translate-y-1/2"
         hidden={length === 1}
         onClick={handlePrev}
         type="button"
       >
         <svg
-          className="bi bi-caret-left-fill"
-          fill="currentColor"
-          height="32"
-          viewBox="0 0 16 16"
-          width="32"
+          fill="#616161"
+          viewBox="0 0 24 24"
+          width="48"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z" />
+          <path d="M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z" />
         </svg>
       </button>
-
       <Image
         alt={`upload-img-${currentIndex}`}
+        className="max-w-[80%] max-h-[80%] object-contain"
         height={0}
         src={reviewResizeImageUrls[currentIndex]}
         width={500}
       />
       <button
-        className="absolute right-4 top-1/2 transform -translate-y-1/2 w-12 h-12"
+        className="absolute right-3 top-1/2 transform -translate-y-1/2 w-12 h-12"
         hidden={length === 1}
         onClick={handleNext}
         type="button"
       >
         <svg
-          className="bi bi-caret-right-fill"
-          fill="currentColor"
-          height="32"
-          viewBox="0 0 16 16"
-          width="32"
+          fill="#616161"
+          viewBox="0 0 24 24"
+          width="48"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
+          <path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z" />
         </svg>
       </button>
     </div>
diff --git a/apps/web/src/components/review/image-uploder.tsx b/apps/web/src/components/review/image-uploder.tsx
index 64d23e53..161d7d85 100644
--- a/apps/web/src/components/review/image-uploder.tsx
+++ b/apps/web/src/components/review/image-uploder.tsx
@@ -3,7 +3,9 @@ import { useRef } from 'react';
 
 import Image from 'next/image';
 
-import type { ImageVideoUrl } from '@/services/api-types/review';
+import CameraIcon from '@/assets/icon/icon-camera.svg';
+import DeleteImageIcon from '@/assets/icon/icon-deleting-image.svg';
+import type { ImageVideoUrl } from '@/models/api-type';
 
 export interface ImageUploaderProps {
   uploadImages: ImageVideoUrl;
@@ -57,22 +59,7 @@ export function ImageUploader({ uploadImages, setUploadImages }: ImageUploaderPr
               }}
               type="button"
             >
-              <svg
-                className="bi bi-x-lg"
-                fill="white"
-                height="27"
-                viewBox="0 0 16 16"
-                width="27"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  className="p-3"
-                  fill="rgba(0,0,0,0.6)"
-                  height="100%"
-                  width="100%"
-                />
-                <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z" />
-              </svg>
+              <DeleteImageIcon />
             </button>
           </div>
         ))}
@@ -90,25 +77,7 @@ export function ImageUploader({ uploadImages, setUploadImages }: ImageUploaderPr
             onClick={handleClick}
             type="button"
           >
-            <svg
-              className="bi bi-camera"
-              fill="rgba(0,0,0,0.4)"
-              height="110"
-              viewBox="0 0 20 20"
-              width="110"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect
-                fill="none"
-                height="100%"
-                stroke="rgba(0,0,0,0.3)"
-                width="100%"
-              />
-              <g transform="scale(0.5) translate(12.5, 11.5)">
-                <path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4z" />
-                <path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5m0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7M3 6.5a.5.5 0 1 1-1" />
-              </g>
-            </svg>
+            <CameraIcon />
           </button>
         )}
       </div>
diff --git a/apps/web/src/components/review/infinite-list.tsx b/apps/web/src/components/review/infinite-list.tsx
index 550dec06..e427bdb1 100644
--- a/apps/web/src/components/review/infinite-list.tsx
+++ b/apps/web/src/components/review/infinite-list.tsx
@@ -2,24 +2,26 @@ import { useEffect } from 'react';
 
 import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
 
-import type { ReviewListFilter, ReviewListSort } from '@/services/api-types/review';
+import IntersectionBoundary from '@/components/intersection-boundary.tsx';
+import type { ReviewListFilter, ReviewListSort } from '@/models/api-type';
+import type { ReviewLayoutDesign } from '@/models/design-property.ts';
 import { useReviewService } from '@/services/review';
 import { useConnectedShop } from '@/state/shop';
 
-import IntersectionBoundary from '../intersection-boundary';
-
-import ReviewItem from './item';
+import BoardStyleReviewItem from './board-style-item.tsx';
+import CardStyleReview from './card-style-item.tsx';
+import TalkStyleReviewItem from './talk-style-item.tsx';
 
 interface MyReviewListProps {
+  layoutDesign: ReviewLayoutDesign;
   productID: string;
   filter: ReviewListFilter;
   sort: ReviewListSort;
 }
 
-export default function InfiniteList({ productID, filter, sort }: MyReviewListProps) {
+export default function InfiniteList({ layoutDesign, productID, filter, sort }: MyReviewListProps) {
   const { id, userID } = useConnectedShop();
   const reviewService = useReviewService();
-
   const reviewListQuery = useSuspenseInfiniteQuery({
     queryKey: ['review-list', { id, productID, filter, sort }],
     queryFn: ({ pageParam }) => {
@@ -51,18 +53,33 @@ export default function InfiniteList({ productID, filter, sort }: MyReviewListPr
       window.removeEventListener('message', handleMessage);
     };
   }, []);
-
   const reviews = reviewListQuery.data.pages.flatMap((it) => it.data.content);
-
   return (
     <>
       <ul>
-        {reviews.map((it) => (
-          <ReviewItem
-            key={it.reviewId}
-            review={it}
-          />
-        ))}
+        {reviews.map((it) => {
+          if (layoutDesign === 'CARD') {
+            return (
+              <CardStyleReview
+                key={it.reviewId}
+                review={it}
+              />
+            );
+          } else if (layoutDesign === 'TALK') {
+            return (
+              <TalkStyleReviewItem
+                key={it.reviewId}
+                review={it}
+              />
+            );
+          }
+          return (
+            <BoardStyleReviewItem
+              key={it.reviewId}
+              review={it}
+            />
+          );
+        })}
       </ul>
       <IntersectionBoundary loadMore={reviewListQuery.fetchNextPage} />
     </>
diff --git a/apps/web/src/components/review/list.tsx b/apps/web/src/components/review/list.tsx
index 3e697627..9f417e11 100644
--- a/apps/web/src/components/review/list.tsx
+++ b/apps/web/src/components/review/list.tsx
@@ -1,10 +1,10 @@
-import { Suspense, useState } from 'react';
+import { Suspense, useState, useMemo } from 'react';
 
 import { generateBorderCSS, generatePaddingCSS, generateShadowCSS } from '@review-canvas/theme';
 
-import PaginatedList from '@/components/review/paginated-list.tsx';
-import { useReviewListStyle } from '@/contexts/style/review-list.ts';
-import type { ReviewListFilter, ReviewListSort } from '@/services/api-types/review.tsx';
+import PaginatedList from '@/components/review/paginated-list';
+import { useReviewListStyle } from '@/contexts/style/review-list-style';
+import type { ReviewListFilter, ReviewListSort } from '@/models/api-type';
 
 import { Filter } from './filter';
 import InfiniteList from './infinite-list';
@@ -16,7 +16,8 @@ interface ReviewListProps {
 
 export default function ReviewList({ productID }: ReviewListProps) {
   const style = useReviewListStyle();
-
+  style.reviewLayoutDesign = 'BOARD';
+  const layoutDesign = useMemo(() => style.reviewLayoutDesign, []);
   const [filter, setFilter] = useState<ReviewListFilter>('ALL');
   const [sort, setSort] = useState<ReviewListSort>('LATEST');
 
@@ -75,12 +76,14 @@ export default function ReviewList({ productID }: ReviewListProps) {
           {style.paginationStyle === 'page' ? (
             <PaginatedList
               filter={filter}
+              layoutDesign={layoutDesign}
               productID={productID}
               sort={sort}
             />
           ) : (
             <InfiniteList
               filter={filter}
+              layoutDesign={layoutDesign}
               productID={productID}
               sort={sort}
             />
diff --git a/apps/web/src/components/review/my-infinite-list.tsx b/apps/web/src/components/review/my-page/infinite-list.tsx
similarity index 72%
rename from apps/web/src/components/review/my-infinite-list.tsx
rename to apps/web/src/components/review/my-page/infinite-list.tsx
index 96cd8248..c325cfa6 100644
--- a/apps/web/src/components/review/my-infinite-list.tsx
+++ b/apps/web/src/components/review/my-page/infinite-list.tsx
@@ -2,31 +2,27 @@ import { useEffect } from 'react';
 
 import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
 
-import type { ReviewListFilter, ReviewListSort } from '@/services/api-types/review';
+import IntersectionBoundary from '@/components/intersection-boundary';
+import ReviewItem from '@/components/review/board-style-item';
+import type { ReviewListFilter, ReviewListSort } from '@/models/api-type';
 import { useReviewService } from '@/services/review';
 import { useConnectedShop } from '@/state/shop';
 
-import IntersectionBoundary from '../intersection-boundary';
-
-import ReviewItem from './item';
-
 interface MyReviewListProps {
-  productID: string;
   filter: ReviewListFilter;
   sort: ReviewListSort;
 }
 
-export default function MyInfiniteList({ productID, filter, sort }: MyReviewListProps) {
+export default function InfiniteList({ filter, sort }: MyReviewListProps) {
   const { id, userID } = useConnectedShop();
   const reviewService = useReviewService();
 
   const myReviewListQuery = useSuspenseInfiniteQuery({
-    queryKey: ['my-list', { id, productID, filter, sort }],
+    queryKey: ['my-list', { id, filter, sort }],
     queryFn: ({ pageParam }) => {
       return reviewService.myReiveiwList({
         mallId: id,
         memberId: userID,
-        productNo: Number(productID),
         sort,
         filter,
         page: pageParam,
@@ -58,10 +54,13 @@ export default function MyInfiniteList({ productID, filter, sort }: MyReviewList
     <>
       <ul>
         {reviews.map((it) => (
-          <ReviewItem
-            key={it.reviewId}
-            review={it}
-          />
+          <div key={it.reviewId}>
+            <ReviewItem
+              key={it.reviewId}
+              productName={it.productName}
+              review={it}
+            />
+          </div>
         ))}
       </ul>
       <IntersectionBoundary loadMore={myReviewListQuery.fetchNextPage} />
diff --git a/apps/web/src/components/review/my-page/list.tsx b/apps/web/src/components/review/my-page/list.tsx
new file mode 100644
index 00000000..b2e318dd
--- /dev/null
+++ b/apps/web/src/components/review/my-page/list.tsx
@@ -0,0 +1,86 @@
+import { Suspense, useState } from 'react';
+
+import { generateBorderCSS, generatePaddingCSS, generateShadowCSS } from '@review-canvas/theme';
+
+import { Filter } from '@/components/review/filter';
+import { OrderSelector } from '@/components/review/order-selector';
+import { useReviewListStyle } from '@/contexts/style/review-list-style.ts';
+import type { ReviewListFilter, ReviewListSort } from '@/models/api-type';
+
+import InfiniteList from './infinite-list.tsx';
+import PaginatedList from './paginated-list.tsx';
+
+export default function MyReviewList() {
+  const style = useReviewListStyle();
+
+  const [filter, setFilter] = useState<ReviewListFilter>('ALL');
+  const [sort, setSort] = useState<ReviewListSort>('LATEST');
+
+  return (
+    <section>
+      <div className="m-2 flex justify-between">
+        <Filter
+          filters={[
+            {
+              value: 'ALL',
+              label: '전체',
+            },
+            {
+              value: 'IMAGE_VIDEO',
+              label: '포토/동영상',
+            },
+            {
+              value: 'GENERAL',
+              label: '일반',
+            },
+          ]}
+          onFilter={setFilter}
+          selectedFilter={filter}
+        />
+        <OrderSelector
+          onSelect={setSort}
+          orderBy={sort}
+          orders={[
+            {
+              value: 'LATEST',
+              label: '최신순',
+            },
+            {
+              value: 'HIGH_SCORE',
+              label: '평점높은순',
+            },
+            {
+              value: 'LOW_SCORE',
+              label: '평점낮은순',
+            },
+          ]}
+          type={style.orderSelectorStyle}
+        />
+      </div>
+
+      <hr />
+
+      <Suspense fallback={<div>loading reviews...</div>}>
+        <div
+          css={[
+            generatePaddingCSS(style.padding),
+            generateBorderCSS(style.border, style.borderColor),
+            generateShadowCSS(style.shadow, style.shadowColor),
+          ]}
+        >
+          {style.paginationStyle === 'page' ? (
+            <PaginatedList
+              filter={filter}
+              sort={sort}
+            />
+          ) : (
+            <InfiniteList
+              filter={filter}
+              sort={sort}
+            />
+          )}
+        </div>
+      </Suspense>
+    </section>
+  );
+}
diff --git a/apps/web/src/components/review/my-paginated-list.tsx b/apps/web/src/components/review/my-page/paginated-list.tsx
similarity index 82%
rename from apps/web/src/components/review/my-paginated-list.tsx
rename to apps/web/src/components/review/my-page/paginated-list.tsx
index 331e9a8a..ffda2642 100644
--- a/apps/web/src/components/review/my-paginated-list.tsx
+++ b/apps/web/src/components/review/my-page/paginated-list.tsx
@@ -2,23 +2,20 @@ import { useEffect, useState } from 'react';
 
 import { useSuspenseQuery } from '@tanstack/react-query';
 
+import Pagination from '@/components/pagination';
+import ReviewItem from '@/components/review/board-style-item';
 import useMessageToShop from '@/hooks/use-message-to-shop';
-import type { ReviewListFilter, ReviewListSort } from '@/services/api-types/review';
+import type { ReviewListFilter, ReviewListSort } from '@/models/api-type';
 import { useReviewService } from '@/services/review';
 import { useConnectedShop } from '@/state/shop';
 import { MESSAGE_TYPES } from '@/utils/message';
 
-import Pagination from '../pagination';
-
-import ReviewItem from './item';
-
 interface MyReviewListProps {
-  productID: string;
   filter: ReviewListFilter;
   sort: ReviewListSort;
 }
 
-export default function MyPaginatedList({ productID, filter, sort }: MyReviewListProps) {
+export default function PaginatedList({ filter, sort }: MyReviewListProps) {
   const { id, userID } = useConnectedShop();
   const reviewService = useReviewService();
   const message = useMessageToShop();
@@ -26,12 +23,11 @@ export default function MyPaginatedList({ productID, filter, sort }: MyReviewLis
   const [page, setPage] = useState(0);
 
   const myReviewListQuery = useSuspenseQuery({
-    queryKey: ['my-list', { id, productID, filter, sort, page }],
+    queryKey: ['my-list', { id, filter, sort, page }],
     queryFn: () =>
       reviewService.myReiveiwList({
         mallId: id,
         memberId: userID,
-        productNo: Number(productID),
         sort,
         filter,
         page,
@@ -66,6 +62,7 @@ export default function MyPaginatedList({ productID, filter, sort }: MyReviewLis
         {reviews.map((it) => (
           <ReviewItem
             key={it.reviewId}
+            productName={it.productName}
             review={it}
           />
         ))}
diff --git a/apps/web/src/components/review/my-review/infinite-list.tsx b/apps/web/src/components/review/my-review/infinite-list.tsx
new file mode 100644
index 00000000..8c3730cb
--- /dev/null
+++ b/apps/web/src/components/review/my-review/infinite-list.tsx
@@ -0,0 +1,90 @@
+import { useEffect } from 'react';
+
+import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
+
+import IntersectionBoundary from '@/components/intersection-boundary';
+import BoardStyleReviewItem from '@/components/review/board-style-item.tsx';
+import TalkStyleReviewItem from '@/components/review/talk-style-item.tsx';
+import type { ReviewListFilter, ReviewListSort } from '@/models/api-type';
+import type { ReviewLayoutDesign } from '@/models/design-property.ts';
+import { useReviewService } from '@/services/review';
+import { useConnectedShop } from '@/state/shop';
+
+import CardStyleReview from '../card-style-item';
+
+interface MyReviewListProps {
+  layoutDesign: ReviewLayoutDesign;
+  productID: string;
+  filter: ReviewListFilter;
+  sort: ReviewListSort;
+}
+
+export default function MyInfiniteListOnProduct({ layoutDesign, productID, filter, sort }: MyReviewListProps) {
+  const { id, userID } = useConnectedShop();
+  const reviewService = useReviewService();
+
+  const myReviewListQuery = useSuspenseInfiniteQuery({
+    queryKey: ['my-list-on-product', { id, productID, filter, sort }],
+    queryFn: ({ pageParam }) => {
+      return reviewService.myReiveiwListOnProduct({
+        mallId: id,
+        memberId: userID,
+        productNo: Number(productID),
+        sort,
+        filter,
+        page: pageParam,
+      });
+    },
+    getNextPageParam: ({ data }) => {
+      return data.page + 1 < data.total / data.size ? data.page + 1 : undefined;
+    },
+    initialPageParam: 0,
+  });
+
+  useEffect(() => {
+    const handleMessage = (evt: { data: string }) => {
+      if (evt.data === 'refresh') {
+        void myReviewListQuery.refetch();
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, []);
+
+  const reviews = myReviewListQuery.data.pages.flatMap((it) => it.data.content);
+
+  return (
+    <>
+      <ul>
+        {reviews.map((it) => {
+          if (layoutDesign === 'CARD') {
+            return (
+              <CardStyleReview
+                key={it.reviewId}
+                review={it}
+              />
+            );
+          } else if (layoutDesign === 'TALK') {
+            return (
+              <TalkStyleReviewItem
+                key={it.reviewId}
+                review={it}
+              />
+            );
+          }
+          return (
+            <BoardStyleReviewItem
+              key={it.reviewId}
+              review={it}
+            />
+          );
+        })}
+      </ul>
+      <IntersectionBoundary loadMore={myReviewListQuery.fetchNextPage} />
+    </>
+  );
+}
diff --git a/apps/web/src/components/review/my-list.tsx b/apps/web/src/components/review/my-review/list.tsx
similarity index 79%
rename from apps/web/src/components/review/my-list.tsx
rename to apps/web/src/components/review/my-review/list.tsx
index fa9a0b78..ca150b45 100644
--- a/apps/web/src/components/review/my-list.tsx
+++ b/apps/web/src/components/review/my-review/list.tsx
@@ -2,21 +2,20 @@ import { Suspense, useState } from 'react';
 
 import { generateBorderCSS, generatePaddingCSS, generateShadowCSS } from '@review-canvas/theme';
 
-import { useReviewListStyle } from '@/contexts/style/review-list.ts';
-import type { ReviewListFilter, ReviewListSort } from '@/services/api-types/review.tsx';
+import { Filter } from '@/components/review/filter';
+import { OrderSelector } from '@/components/review/order-selector';
+import { useReviewListStyle } from '@/contexts/style/review-list-style';
+import type { ReviewListFilter, ReviewListSort } from '@/models/api-type';
 
-import { Filter } from './filter';
-import MyInfiniteList from './my-infinite-list';
-import MyPaginatedList from './my-paginated-list';
-import { OrderSelector } from './order-selector';
+import MyInfiniteListOnProduct from './infinite-list.tsx';
+import MyPaginatedListOnProduct from './paginated-list.tsx';
 
 interface ReviewListProps {
   productID: string;
 }
 
-export default function MyReviewList({ productID }: ReviewListProps) {
+export default function MyReviewListOnProduct({ productID }: ReviewListProps) {
   const style = useReviewListStyle();
-
   const [filter, setFilter] = useState<ReviewListFilter>('ALL');
   const [sort, setSort] = useState<ReviewListSort>('LATEST');
 
@@ -73,14 +72,15 @@ export default function MyReviewList({ productID }: ReviewListProps) {
           ]}
         >
           {style.paginationStyle === 'page' ? (
-            <MyPaginatedList
+            <MyPaginatedListOnProduct
               filter={filter}
               productID={productID}
               sort={sort}
             />
           ) : (
-            <MyInfiniteList
+            <MyInfiniteListOnProduct
               filter={filter}
+              layoutDesign={'BOARD'}
               productID={productID}
               sort={sort}
             />
diff --git a/apps/web/src/components/review/my-review/paginated-list.tsx b/apps/web/src/components/review/my-review/paginated-list.tsx
new file mode 100644
index 00000000..f5c07a8e
--- /dev/null
+++ b/apps/web/src/components/review/my-review/paginated-list.tsx
@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react';
+
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import Pagination from '@/components/pagination';
+import ReviewItem from '@/components/review/board-style-item';
+import useMessageToShop from '@/hooks/use-message-to-shop';
+import type { ReviewListFilter, ReviewListSort } from '@/models/api-type';
+import { useReviewService } from '@/services/review';
+import { useConnectedShop } from '@/state/shop';
+import { MESSAGE_TYPES } from '@/utils/message';
+
+interface MyReviewListProps {
+  productID: string;
+  filter: ReviewListFilter;
+  sort: ReviewListSort;
+}
+
+export default function MyPaginatedListOnProduct({ productID, filter, sort }: MyReviewListProps) {
+  const { id, userID } = useConnectedShop();
+  const reviewService = useReviewService();
+  const message = useMessageToShop();
+
+  const [page, setPage] = useState(0);
+
+  const myReviewListQuery = useSuspenseQuery({
+    queryKey: ['my-list-on-product', { id, productID, filter, sort, page }],
+    queryFn: () =>
+      reviewService.myReiveiwListOnProduct({
+        mallId: id,
+        memberId: userID,
+        productNo: Number(productID),
+        sort,
+        filter,
+        page,
+      }),
+  });
+
+  useEffect(() => {
+    if (myReviewListQuery.status !== 'success') return;
+    message(MESSAGE_TYPES.ADJUST_HEIGHT, window.getComputedStyle(document.body).height);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- This is intentional
+  }, [myReviewListQuery.status]);
+
+  useEffect(() => {
+    const handleMessage = (evt: { data: string }) => {
+      if (evt.data === 'refresh') {
+        void myReviewListQuery.refetch();
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, []);
+
+  const reviews = myReviewListQuery.data.data.content;
+
+  return (
+    <>
+      <ul>
+        {reviews.map((it) => (
+          <ReviewItem
+            key={it.reviewId}
+            review={it}
+          />
+        ))}
+      </ul>
+
+      <Pagination
+        onPage={setPage}
+        page={page}
+        totalPages={Math.ceil(myReviewListQuery.data.data.total / myReviewListQuery.data.data.size)}
+      />
+    </>
+  );
+}
diff --git a/apps/web/src/components/review/order-selector.tsx b/apps/web/src/components/review/order-selector.tsx
index 7920f07f..a82391a5 100644
--- a/apps/web/src/components/review/order-selector.tsx
+++ b/apps/web/src/components/review/order-selector.tsx
@@ -1,4 +1,4 @@
-import type { ReviewListStyle } from '@/contexts/style/review-list';
+import type { ReviewListStyle } from '@/contexts/style/review-list-style';
 
 interface OrderSelectorProps<T extends string> {
   orders: {
diff --git a/apps/web/src/components/review/paginated-list.tsx b/apps/web/src/components/review/paginated-list.tsx
index e280871f..af4f484c 100644
--- a/apps/web/src/components/review/paginated-list.tsx
+++ b/apps/web/src/components/review/paginated-list.tsx
@@ -1,24 +1,28 @@
 import { useEffect, useState } from 'react';
 
 import { useSuspenseQuery } from '@tanstack/react-query';
+import { css } from 'twin.macro';
 
+import Pagination from '@/components/pagination.tsx';
 import useMessageToShop from '@/hooks/use-message-to-shop';
-import type { ReviewListFilter, ReviewListSort } from '@/services/api-types/review';
+import type { ReviewListFilter, ReviewListSort } from '@/models/api-type';
+import type { ReviewLayoutDesign } from '@/models/design-property';
 import { useReviewService } from '@/services/review';
 import { useConnectedShop } from '@/state/shop';
 import { MESSAGE_TYPES } from '@/utils/message';
 
-import Pagination from '../pagination';
-
-import ReviewItem from './item';
+import BoardStyleReviewItem from './board-style-item.tsx';
+import CardStyleReview from './card-style-item.tsx';
+import TalkStyleReviewItem from './talk-style-item.tsx';
 
 interface ReviewListProps {
+  layoutDesign: ReviewLayoutDesign;
   productID: string;
   filter: ReviewListFilter;
   sort: ReviewListSort;
 }
 
-export default function ReviewList({ productID, filter, sort }: ReviewListProps) {
+export default function ReviewList({ layoutDesign, productID, filter, sort }: ReviewListProps) {
   const { id, userID } = useConnectedShop();
   const reviewService = useReviewService();
   const message = useMessageToShop();
@@ -50,20 +54,45 @@ export default function ReviewList({ productID, filter, sort }: ReviewListProps)
       window.removeEventListener('message', handleMessage);
     };
   }, []);
-
   const reviews = reviewListQuery.data.data.content;
-
   return (
     <>
-      <ul>
-        {reviews.map((it) => (
-          <ReviewItem
-            key={it.reviewId}
-            review={it}
-          />
-        ))}
+      <ul
+        css={
+          layoutDesign === 'CARD'
+            ? css`
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                grid-auto-rows: auto;
+                gap: 16px;
+              `
+            : null
+        }
+      >
+        {reviews.map((it) => {
+          if (layoutDesign === 'CARD') {
+            return (
+              <CardStyleReview
+                key={it.reviewId}
+                review={it}
+              />
+            );
+          } else if (layoutDesign === 'TALK') {
+            return (
+              <TalkStyleReviewItem
+                key={it.reviewId}
+                review={it}
+              />
+            );
+          }
+          return (
+            <BoardStyleReviewItem
+              key={it.reviewId}
+              review={it}
+            />
+          );
+        })}
       </ul>
-
       <Pagination
         onPage={setPage}
         page={page}
diff --git a/apps/web/src/components/review/star.tsx b/apps/web/src/components/review/star.tsx
index 8338756d..c98bc3f0 100644
--- a/apps/web/src/components/review/star.tsx
+++ b/apps/web/src/components/review/star.tsx
@@ -1,7 +1,7 @@
 interface StarProps {
   size: SizeType;
   star: number;
-  setStar: (star: number) => void;
+  setStar?: (star: number) => void;
 }
 
 type SizeType = 'small' | 'big';
@@ -19,7 +19,9 @@ export function Star({ size, star, setStar }: StarProps) {
     <div key={it}>
       <button
         onClick={() => {
-          setStar(it);
+          if (setStar) {
+            setStar(it);
+          }
         }}
         type="button"
       >
diff --git a/apps/web/src/components/review/talk-style-item.tsx b/apps/web/src/components/review/talk-style-item.tsx
new file mode 100644
index 00000000..0a44e6bb
--- /dev/null
+++ b/apps/web/src/components/review/talk-style-item.tsx
@@ -0,0 +1,177 @@
+import Image from 'next/image';
+import { css } from 'twin.macro';
+
+import {
+  generateBorderCSS,
+  generateBorderRadiusCSS,
+  generateFontCSS,
+  generateMarginCSS,
+  generatePaddingCSS,
+  generateShadowCSS,
+} from '@review-canvas/theme';
+
+import ThumbUpIcon from '@/assets/icon/icon-thumb-up.svg';
+import TalkStyleItem from '@/components/reply/talk-style-item.tsx';
+import { Star } from '@/components/review/star.tsx';
+import { useReviewItem } from '@/contexts/function/review-item.ts';
+import { useReviewLikeButtonStyle } from '@/contexts/style/review-item-style.ts';
+import type { ReviewItem as ReviewType } from '@/models/api-type';
+
+interface ReviewItemProps {
+  review: ReviewType;
+}
+
+export default function TalkStyleReviewItem(props: ReviewItemProps) {
+  const { style, likeCount, isLiked, edit, deleteReview, showReviewDetail, onClickLikeButton } = useReviewItem(props);
+  const { baseButtonStyle, likedButtonStyle } = useReviewLikeButtonStyle();
+
+  return (
+    <li>
+      {props.review.deleted ? (
+        <div
+          aria-haspopup
+          className="relative"
+        >
+          <div className="w-fit text-xs text-gray-500">
+            작성자 <span>{props.review.nickname}</span>
+          </div>
+          <div
+            css={[
+              generateMarginCSS(style.margin),
+              generatePaddingCSS(style.padding),
+              generateBorderCSS(style.border, style.borderColor),
+              generateBorderRadiusCSS(style.borderRadius),
+              generateFontCSS(style.font),
+              generateShadowCSS(style.shadow, style.shadowColor),
+              css`
+                border-color: ${style.borderColor};
+                background-color: ${style.backgroundColor};
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+                width: 40%;
+              `,
+            ]}
+          >
+            <p className="text-left">삭제된 리뷰입니다.</p>
+          </div>
+        </div>
+      ) : (
+        /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- require */
+        <div>
+          <div>
+            <div className="flex gap-0.5 items-center w-fit">
+              <Star
+                setStar={() => {}}
+                size="small"
+                star={props.review.score}
+              />
+            </div>
+            <div className="w-fit text-xs text-gray-500">
+              작성자 <span>{props.review.nickname}</span>
+            </div>
+            {/*eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions --
+                            This is intentional*/}
+            <div
+              aria-haspopup
+              className="relative"
+              css={[
+                generateMarginCSS(style.margin),
+                generatePaddingCSS(style.padding),
+                generateBorderCSS(style.border, style.borderColor),
+                generateBorderRadiusCSS(style.borderRadius),
+                generateFontCSS(style.font),
+                generateShadowCSS(style.shadow, style.shadowColor),
+                css`
+                  border-color: ${style.borderColor};
+                  background-color: ${style.backgroundColor};
+                  display: flex;
+                  flex-direction: column;
+                  gap: 8px;
+                  width: 40%;
+                `,
+              ]}
+              onClick={showReviewDetail}
+              onKeyUp={(evt) => {
+                if (evt.key === 'Enter' || evt.key === 'Spacebar') showReviewDetail();
+              }}
+            >
+              <p className={`text-left ${props.review.isMine ? 'mt-7' : ''}`}>{props.review.content}</p>
+              {props.review.isMine ? (
+                /*eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions --
+                            This is intentional*/
+                <div
+                  className="absolute top-1 right-1 z-5"
+                  onClick={(evt) => {
+                    evt.stopPropagation();
+                  }}
+                >
+                  <button
+                    className="border-b-2 border-gray-600/70 text-gray-700/90 mx-1"
+                    onClick={edit}
+                    type="button"
+                  >
+                    수정
+                  </button>
+                  <button
+                    className="border-b-2 border-gray-600/70 text-gray-700/90 mx-1"
+                    onClick={deleteReview}
+                    type="button"
+                  >
+                    삭제
+                  </button>
+                </div>
+              ) : null}
+              <div className="grid grid-cols-1 justify-center gap-8 mx-10">
+                {props.review.imageVideoUrls.reviewResizeImageUrls.map((imageUrl: string, index: number) => (
+                  <div
+                    className="my-5"
+                    key={index}
+                  >
+                    <Image
+                      alt={`upload-img-${index}`}
+                      height={0}
+                      src={imageUrl}
+                      width={500}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div>
+              {style.reviewLike.buttonType !== 'NONE' && (
+                <button
+                  className="ml-2"
+                  css={[
+                    generateBorderRadiusCSS(style.reviewLike.buttonRound),
+                    generateFontCSS(style.font),
+                    baseButtonStyle,
+                    isLiked && likedButtonStyle,
+                    css`
+                      margin-bottom: 15px;
+                    `,
+                  ]}
+                  onClick={onClickLikeButton}
+                  type="button"
+                >
+                  <ThumbUpIcon
+                    className="mt-1 mr-0.5"
+                    stroke={style.reviewLike.iconColor}
+                  />
+                  {style.reviewLike.buttonType === 'THUMB_UP_WITH_TEXT' && <div className="ml-1">좋아요</div>}
+                  <div className="ml-1">{likeCount}</div>
+                </button>
+              )}
+            </div>
+          </div>
+          {props.review.replies.map((it) => (
+            <TalkStyleItem
+              key={it.replyId}
+              reply={it}
+            />
+          ))}
+        </div>
+      )}
+    </li>
+  );
+}
diff --git a/apps/web/src/components/review/textform.tsx b/apps/web/src/components/review/textform.tsx
deleted file mode 100644
index 42f126e9..00000000
--- a/apps/web/src/components/review/textform.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-import { Star } from '@/components/review/star.tsx';
-
-interface TextformProps {
-  content: string;
-  score?: number;
-  nickname: string;
-  onSubmit: (content: string, star: number) => void;
-}
-
-export function Textform({ content, score, nickname, onSubmit }: TextformProps) {
-  const [text, setText] = useState(content);
-  const [star, setStar] = useState(score || 5);
-
-  useEffect(() => {
-    const textarea = document.querySelector('textarea');
-    if (textarea) {
-      textarea.style.height = 'auto';
-      textarea.style.height = `${textarea.scrollHeight}px`;
-    }
-  }, [text]);
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setText(event.target.value);
-  };
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    onSubmit(text, star);
-  };
-
-  return (
-    <form
-      className="relative p-4 flex flex-col gap-8"
-      onSubmit={handleSubmit}
-    >
-      <div className="flex gap-0.5 items-center w-fit">
-        <Star
-          setStar={setStar}
-          size="small"
-          star={star}
-        />
-      </div>
-      {nickname ? (
-        <div>
-          작성자 <span>{nickname}</span>
-        </div>
-      ) : null}
-      <textarea
-        className="relative p-4 flex flex-col gap-8 border-2 overflow-hidden resize-none"
-        defaultValue={text}
-        onChange={handleChange}
-        rows={3}
-      />
-      <button
-        className="self-end"
-        type="submit"
-      >
-        저장
-      </button>
-    </form>
-  );
-}
diff --git a/apps/web/src/constants/list/filter/index.ts b/apps/web/src/constants/list/filter/index.ts
new file mode 100644
index 00000000..0fc22a93
--- /dev/null
+++ b/apps/web/src/constants/list/filter/index.ts
@@ -0,0 +1,14 @@
+export const FILTER_OPTIONS = [
+  {
+    value: 'ALL',
+    label: '전체',
+  },
+  {
+    value: 'IMAGE_VIDEO',
+    label: '포토/동영상',
+  },
+  {
+    value: 'GENERAL',
+    label: '일반',
+  },
+];
diff --git a/apps/web/src/constants/list/order/index.ts b/apps/web/src/constants/list/order/index.ts
new file mode 100644
index 00000000..609a6115
--- /dev/null
+++ b/apps/web/src/constants/list/order/index.ts
@@ -0,0 +1,14 @@
+export const SORT_OPTIONS = [
+  {
+    value: 'LATEST',
+    label: '최신순',
+  },
+  {
+    value: 'HIGH_SCORE',
+    label: '평점높은순',
+  },
+  {
+    value: 'LOW_SCORE',
+    label: '평점낮은순',
+  },
+];
diff --git a/apps/web/src/contexts/function/review-item.ts b/apps/web/src/contexts/function/review-item.ts
new file mode 100644
index 00000000..128f77f9
--- /dev/null
+++ b/apps/web/src/contexts/function/review-item.ts
@@ -0,0 +1,101 @@
+import type { MouseEventHandler } from 'react';
+import { useEffect, useState } from 'react';
+
+import { useReviewItemStyle } from '@/contexts/style/review-item-style.ts';
+import useMessageToShop from '@/hooks/use-message-to-shop.ts';
+import type { ReviewItem as ReviewType } from '@/models/api-type';
+import { useReviewService } from '@/services/review.tsx';
+import { useConnectedShop } from '@/state/shop.ts';
+import { MESSAGE_TYPES } from '@/utils/message.ts';
+
+interface ReviewItemProps {
+  review: ReviewType;
+}
+
+export const useReviewItem = (props: ReviewItemProps) => {
+  const style = useReviewItemStyle();
+  const { id, userID } = useConnectedShop();
+  const message = useMessageToShop();
+  const reviewService = useReviewService();
+  const [likeCount, setLikeCount] = useState(0);
+  const [isLiked, setIsLiked] = useState(false);
+
+  useEffect(() => {
+    void reviewService.retrieveReviewLikeCount(props.review.reviewId).then((response) => {
+      setLikeCount(response.data.count);
+    });
+    setIsLiked(props.review.isLiked);
+  }, [props.review.reviewId, props.review.isLiked, reviewService]);
+
+  const edit = () => {
+    message(MESSAGE_TYPES.OPEN_MODAL, {
+      type: 'edit',
+      url: `/reviews/${props.review.reviewId}/edit`,
+    });
+  };
+
+  const deleteReview = () => {
+    message(MESSAGE_TYPES.OPEN_SELECTING_MODAL, {
+      type: 'delete',
+      url: `/reviews/${props.review.reviewId}/delete`,
+    });
+  };
+
+  const showReviewDetail = () => {
+    message(MESSAGE_TYPES.OPEN_MODAL, {
+      type: 'detail',
+      url: `/reviews/${props.review.reviewId}`,
+    });
+  };
+  const onClickLikeButton: MouseEventHandler<HTMLButtonElement> = (event) => {
+    event.stopPropagation();
+    if (props.review.isMine) {
+      // eslint-disable-next-line no-alert -- isMine is required
+      alert('자신의 리뷰에는 좋아요를 누를 수 없어요!');
+      return;
+    }
+
+    const toggleLike = async () => {
+      let response;
+      if (isLiked) {
+        response = await reviewService.deleteUserLike({
+          reviewId: props.review.reviewId,
+          mallId: id,
+          memberId: userID,
+        });
+      } else {
+        response = await reviewService.createUserLike({
+          reviewId: props.review.reviewId,
+          mallId: id,
+          memberId: userID,
+        });
+      }
+      if (!response.success) {
+        // eslint-disable-next-line no-alert -- success is required
+        alert('다음에 다시 시도해주세요!');
+      }
+      const likeCountResponse = await reviewService.retrieveReviewLikeCount(props.review.reviewId);
+      setLikeCount(likeCountResponse.data.count);
+      setIsLiked(!isLiked);
+    };
+
+    void toggleLike();
+  };
+
+  style.reviewLike.buttonType = 'THUMB_UP_WITH_TEXT';
+  return {
+    style,
+    id,
+    userID,
+    message,
+    reviewService,
+    likeCount,
+    setLikeCount,
+    isLiked,
+    setIsLiked,
+    edit,
+    deleteReview,
+    showReviewDetail,
+    onClickLikeButton,
+  };
+};
diff --git a/apps/web/src/contexts/style/review-item-style.ts b/apps/web/src/contexts/style/review-item-style.ts
new file mode 100644
index 00000000..bbd1b1b7
--- /dev/null
+++ b/apps/web/src/contexts/style/review-item-style.ts
@@ -0,0 +1,62 @@
+import { createContext, useContext } from 'react';
+
+import { css } from 'twin.macro';
+
+import type { Border, BorderRadius, Font, Margin, Padding, ReviewLikeButtonProps, Shadow } from '@review-canvas/theme';
+
+export interface ReviewItemStyle {
+  margin: Margin;
+  padding: Padding;
+  font: Font;
+  border: Border;
+  borderColor: string;
+  borderRadius: BorderRadius;
+  shadow: Shadow;
+  shadowColor: string;
+  backgroundColor: string;
+  replyBackgroundColor: string;
+  reviewLike: ReviewLikeButtonProps;
+}
+
+const ReviewItemStyleContext = createContext<ReviewItemStyle | null>(null);
+
+export const ReviewItemStyleProvider = ReviewItemStyleContext.Provider;
+export const useReviewItemStyle = () => {
+  const style = useContext(ReviewItemStyleContext);
+  if (!style) {
+    throw new Error('useReviewItemStyle must be used within a ReviewItemStyleProvider');
+  }
+  return style;
+};
+
+export const useReviewLikeButtonStyle = () => {
+  const style = useReviewItemStyle();
+
+  const baseButtonStyle = css`
+    border-width: 1px;
+    padding: 2px 6px;
+    margin-top: 15px;
+    margin-bottom: 10px;
+    border-color: ${style.reviewLike.buttonBorderColor};
+    color: ${style.reviewLike.textColor};
+    transition:
+      background-color 0.5s ease,
+      color 0.5s ease;
+    display: flex;
+    &:hover {
+      background-color: ${style.reviewLike.textColor};
+      color: white;
+    }
+  `;
+
+  const likedButtonStyle = css`
+    background-color: ${style.reviewLike.textColor};
+    color: white;
+    &:hover {
+      background-color: white;
+      color: ${style.reviewLike.textColor};
+    }
+  `;
+
+  return { baseButtonStyle, likedButtonStyle };
+};
diff --git a/apps/web/src/contexts/style/review-item.ts b/apps/web/src/contexts/style/review-item.ts
deleted file mode 100644
index 39fd4984..00000000
--- a/apps/web/src/contexts/style/review-item.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { createContext, useContext } from 'react';
-
-import type { Border, BorderRadius, Font, Margin, Padding, Shadow } from '@review-canvas/theme';
-
-export interface ReviewItemStyle {
-  margin: Margin;
-  padding: Padding;
-  font: Font;
-  border: Border;
-  borderColor: string;
-  borderRadius: BorderRadius;
-  shadow: Shadow;
-  shadowColor: string;
-  backgroundColor: string;
-}
-
-const ReviewItemStyleContext = createContext<ReviewItemStyle | null>(null);
-
-export const ReviewItemStyleProvider = ReviewItemStyleContext.Provider;
-export const useReviewItemStyle = () => {
-  const style = useContext(ReviewItemStyleContext);
-  if (!style) {
-    throw new Error('useReviewItemStyle must be used within a ReviewItemStyleProvider');
-  }
-  return style;
-};
diff --git a/apps/web/src/contexts/style/review-list.ts b/apps/web/src/contexts/style/review-list-style.ts
similarity index 69%
rename from apps/web/src/contexts/style/review-list.ts
rename to apps/web/src/contexts/style/review-list-style.ts
index acaadaca..3742b872 100644
--- a/apps/web/src/contexts/style/review-list.ts
+++ b/apps/web/src/contexts/style/review-list-style.ts
@@ -2,7 +2,15 @@ import { createContext, useContext } from 'react';
 
 import type { Border, Padding, Shadow } from '@review-canvas/theme';
 
+import type { FocusAreaLayout, ReviewAreaLayout, ReviewLayoutDesign } from '@/models/design-property.ts';
+
 export interface ReviewListStyle {
+  bestReviewAreaActivation: boolean;
+  reviewStatisticsAreaActivation: boolean;
+  imageReviewAreaActivation: boolean;
+  focusAreaLayout: FocusAreaLayout;
+  imageReviewAreaLayout: ReviewAreaLayout;
+  reviewLayoutDesign: ReviewLayoutDesign;
   orderSelectorStyle: 'dropdown' | 'radio';
   paginationStyle: 'page' | 'scroll';
   selectedOrderColor: string;
diff --git a/apps/web/src/services/api-types/review.tsx b/apps/web/src/models/api-type.ts
similarity index 70%
rename from apps/web/src/services/api-types/review.tsx
rename to apps/web/src/models/api-type.ts
index 9b54445c..2eac25be 100644
--- a/apps/web/src/services/api-types/review.tsx
+++ b/apps/web/src/models/api-type.ts
@@ -4,8 +4,8 @@ export interface PathInfo {
   requestId?: string;
 }
 export interface CreateReivewPathInfo {
-  mallId: string | undefined;
-  productId: string | undefined;
+  mallId?: string;
+  productId?: string;
 }
 export interface ReviewItem {
   reviewId: number;
@@ -15,6 +15,8 @@ export interface ReviewItem {
   shopAdminId: number;
   nickname: string;
   isMine: boolean;
+  likeCount: number;
+  isLiked: boolean;
   createAt: string;
   updatedAt: string;
   deleted: boolean;
@@ -51,10 +53,50 @@ export interface RetrieveReplyListResponse {
 export type ReviewListSort = 'LATEST' | 'HIGH_SCORE' | 'LOW_SCORE';
 export type ReviewListFilter = 'ALL' | 'IMAGE_VIDEO' | 'GENERAL';
 
+export interface RetrieveReviewLikeCountRequest {
+  reviewId: number;
+}
+
+export interface RetrieveReviewLikeCountResponse {
+  success: boolean;
+  data: {
+    count: number;
+  };
+}
+
+export interface CreateUserReviewLikeRequest {
+  reviewId: number;
+  mallId: string;
+  memberId?: string
+}
+
+export interface CreateUserReviewLikeResponse {
+  success: boolean;
+}
+
+export interface DeleteUserReviewLikeRequest {
+  reviewId: number;
+  mallId: string;
+  memberId: string | undefined;
+}
+
+export interface DeleteUserReviewLikeResponse {
+  success: boolean;
+}
+
 export interface RetrieveReviewListRequest {
   mallId: string;
   productNo: number;
-  memberId: string | undefined;
+  memberId?: string;
+  page?: number;
+  size?: number;
+  sort?: ReviewListSort;
+  filter?: ReviewListFilter;
+}
+
+export interface RetrieveMyReviewListRequest {
+  mallId: string;
+  memberId?: string;
   page?: number;
   size?: number;
   sort?: ReviewListSort;
@@ -81,7 +123,7 @@ export interface RetrieveReplyItemResponse {
 }
 
 export interface CreateReviewItemRequest {
-  memberId: string | undefined;
+  memberId?: string;
   content: string;
   score: number;
 }
@@ -92,8 +134,8 @@ export interface UpdateReviewItemRequest {
 }
 
 export interface CreateReplyItemRequest {
-  mallId: string | undefined;
-  memberId: string | undefined;
+  mallId?: string;
+  memberId?: string;
   content: string;
 }
 export interface ImageVideoUrl {
diff --git a/apps/web/src/models/design-property.ts b/apps/web/src/models/design-property.ts
index a375e9e1..7012d865 100644
--- a/apps/web/src/models/design-property.ts
+++ b/apps/web/src/models/design-property.ts
@@ -1,3 +1,5 @@
+import type { ReviewLikeButtonType } from '@review-canvas/theme';
+
 export type Shadow = 'NONE' | 'SMALL' | 'MEDIUM' | 'LARGE';
 export type FocusAreaLayout = 'BEST_REVIEW_TOP' | 'BEST_REVIEW_BOTTOM' | 'BEST_REVIEW_LEFT' | 'BEST_REVIEW_RIGHT';
 export type ReviewAreaLayout = 'REVIEW_TOP' | 'REVIEW_BOTTOM' | 'REVIEW_LEFT' | 'REVIEW_RIGHT';
@@ -43,7 +45,7 @@ export interface Round {
 }
 
 export interface ReviewLike {
-  buttonType: string;
+  buttonType: ReviewLikeButtonType;
   iconColor: string;
   textColor: string;
   buttonBorderColor: string;
diff --git a/apps/web/src/scripts/cafe24-connector.js b/apps/web/src/scripts/cafe24-connector.js
index 9c5336c4..4250d56a 100644
--- a/apps/web/src/scripts/cafe24-connector.js
+++ b/apps/web/src/scripts/cafe24-connector.js
@@ -79,6 +79,7 @@ window.addEventListener('message', (evt) => {
   $iframe.src = new URL(evt.data.payload.url, reviewCanvasURL).toString();
   $iframe.style.width = '80%';
   $iframe.style.height = '80%';
+  $iframe.style.borderRadius = '8px';
   $iframe.style.border = 'none';
   $iframe.style.background = 'white';
 
@@ -99,6 +100,7 @@ window.addEventListener('message', (evt) => {
   $iframe.src = new URL(evt.data.payload.url, reviewCanvasURL).toString();
   $iframe.style.width = '40%';
   $iframe.style.height = '30%';
+  $iframe.style.borderRadius = '8px';
   $iframe.style.border = 'none';
   $iframe.style.background = 'white';
 
diff --git a/apps/web/src/services/design-property.tsx b/apps/web/src/services/design-property.tsx
index 8e0ef690..32f6d1d1 100644
--- a/apps/web/src/services/design-property.tsx
+++ b/apps/web/src/services/design-property.tsx
@@ -4,8 +4,8 @@ import { createContext, type PropsWithChildren, useContext } from 'react';
 
 import { createStore, useStore } from 'zustand';
 
-import type { ReviewItemStyle } from '@/contexts/style/review-item.ts';
-import type { ReviewListStyle } from '@/contexts/style/review-list.ts';
+import type { ReviewItemStyle } from '@/contexts/style/review-item-style.ts';
+import type { ReviewListStyle } from '@/contexts/style/review-list-style.ts';
 import type { DesignPropertyResponse } from '@/models/design-property.ts';
 import API from '@/utils/api.ts';
 
@@ -16,9 +16,15 @@ class DesignPropertyService {
   }
 
   convertDesignPropertyResponseToReviewListStyle({
-    data: { reviewDesignView, reviewContainer },
+    data: { reviewLayout, reviewDesignView, reviewContainer },
   }: DesignPropertyResponse): ReviewListStyle {
     return {
+      bestReviewAreaActivation: reviewLayout.bestReviewAreaActivation,
+      reviewStatisticsAreaActivation: reviewLayout.reviewStatisticsAreaActivation,
+      imageReviewAreaActivation: reviewLayout.imageReviewAreaActivation,
+      focusAreaLayout: reviewLayout.focusAreaLayout,
+      imageReviewAreaLayout: reviewLayout.imageReviewAreaLayout,
+      reviewLayoutDesign: reviewLayout.reviewLayoutDesign,
       paginationStyle: reviewDesignView.pagingType === 'PAGE_NUMBER' ? 'page' : 'scroll',
       orderSelectorStyle: reviewDesignView.filterType === 'DROPDOWN' ? 'dropdown' : 'radio',
       selectedOrderColor: reviewDesignView.filterActiveTextColor,
@@ -48,6 +54,14 @@ class DesignPropertyService {
       shadow: reviewDesignView.shadow,
       shadowColor: 'rgba(0, 0, 0, 0.3)',
       backgroundColor: reviewDesignView.reviewBackgroundColor,
+      replyBackgroundColor: reviewDesignView.replyBackgroundColor,
+      reviewLike: {
+        buttonBorderColor: reviewDesignView.reviewLike.buttonBorderColor,
+        buttonRound: reviewDesignView.reviewLike.buttonRound,
+        buttonType: reviewDesignView.reviewLike.buttonType,
+        iconColor: reviewDesignView.reviewLike.iconColor,
+        textColor: reviewDesignView.reviewLike.textColor,
+      },
     };
   }
 }
diff --git a/apps/web/src/services/review.tsx b/apps/web/src/services/review.tsx
index 6c4afe8b..e9516ede 100644
--- a/apps/web/src/services/review.tsx
+++ b/apps/web/src/services/review.tsx
@@ -2,10 +2,37 @@ import { createContext, type PropsWithChildren, useContext } from 'react';
 
 import { createStore, useStore } from 'zustand';
 
-import type * as TYPE from '@/services/api-types/review.tsx';
+import type * as TYPE from '@/models/api-type';
 import API from '@/utils/api.ts';
 
 class ReviewService {
+  async retrieveReviewLikeCount(reviewId: number): Promise<TYPE.RetrieveReviewLikeCountResponse> {
+    const response = await API.get<TYPE.RetrieveReviewLikeCountResponse>(`/api/v1/reviews/${reviewId}/like/count`);
+    return response.data;
+  }
+  async createUserLike({
+    reviewId,
+    mallId,
+    memberId,
+  }: TYPE.CreateUserReviewLikeRequest): Promise<TYPE.CreateUserReviewLikeResponse> {
+    const response = await API.post<TYPE.CreateUserReviewLikeResponse>(`/api/v1/reviews/${reviewId}/like/`, {
+      mallId,
+      memberId,
+    });
+    return response.data;
+  }
+
+  async deleteUserLike({
+    reviewId,
+    mallId,
+    memberId,
+  }: TYPE.DeleteUserReviewLikeRequest): Promise<TYPE.DeleteUserReviewLikeResponse> {
+    const response = await API.delete<TYPE.DeleteUserReviewLikeResponse>(
+      `/api/v1/shop/${mallId}/users/${memberId}/reviews/${reviewId}/like`,
+    );
+    return response.data;
+  }
+
   async list({
     mallId,
     productNo,
@@ -52,10 +79,9 @@ class ReviewService {
 
   async update(id: TYPE.PathInfo, request: TYPE.UpdateReviewItemRequest, reviewImages?: File[]) {
     const formData = new FormData();
-
     if (reviewImages) {
       reviewImages.forEach((file) => {
-        formData.append('reviewImages', file, file.name);
+        formData.append('reviewFiles', file, file.name);
       });
     }
 
@@ -80,6 +106,27 @@ class ReviewService {
     return response.data;
   }
   async myReiveiwList({
+    mallId,
+    memberId,
+    sort = 'LATEST',
+    filter = 'ALL',
+    size = 10,
+    page = 0,
+  }: TYPE.RetrieveMyReviewListRequest): Promise<TYPE.RetrieveReviewListResponse> {
+    const search = new URLSearchParams({
+      page: page.toString(),
+      size: size.toString(),
+      sort,
+      filter,
+    });
+
+    const response = await API.get<TYPE.RetrieveReviewListResponse>(
+      `/api/v1/shop/${mallId}/users/${memberId}/mypage/reviews?${search.toString()}`,
+    );
+    return response.data;
+  }
+
+  async myReiveiwListOnProduct({
     mallId,
     productNo,
     memberId,
diff --git a/apps/web/with-twin.mjs b/apps/web/with-twin.mjs
index 3eba53a5..6489129c 100644
--- a/apps/web/with-twin.mjs
+++ b/apps/web/with-twin.mjs
@@ -5,7 +5,6 @@ import babelPluginTypescript from '@babel/plugin-syntax-typescript';
 import babelPluginMacros from 'babel-plugin-macros';
 import babelPluginTwin from 'babel-plugin-twin';
 
-
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 
 // The folders containing files importing twin.macro
@@ -26,6 +25,15 @@ export default function withTwin(
       config.module = config.module || {};
       config.module.rules = config.module.rules || [];
 
+      config.module.rules.push({
+        test: /\.svg$/,
+        use: [
+          {
+            loader: '@svgr/webpack',
+          },
+        ],
+      });
+
       config.module.rules.push({
         test: /\.tsx?$/,
         include: includedDirs,
diff --git a/packages/theme/src/types/index.ts b/packages/theme/src/types/index.ts
index 09e675af..8c6232bc 100644
--- a/packages/theme/src/types/index.ts
+++ b/packages/theme/src/types/index.ts
@@ -1,3 +1,5 @@
+import { BorderRadius } from '../border.ts';
+
 export type Shadow = 'NONE' | 'SMALL' | 'MEDIUM' | 'LARGE';
 export type Alignment = 'LEFT' | 'CENTER' | 'RIGHT';
 
@@ -55,7 +57,7 @@ export interface ReviewLikeButtonProps {
   iconColor: string;
   textColor: string;
   buttonBorderColor: string;
-  buttonRound: ButtonRoundProps;
+  buttonRound: BorderRadius;
 }
 
 export interface ReviewLayoutProperty {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 964528ef..c559ed61 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -321,6 +321,9 @@ importers:
       '@review-canvas/typescript-config':
         specifier: workspace:*
         version: link:../../packages/config-typescript
+      '@svgr/webpack':
+        specifier: ^8.1.0
+        version: 8.1.0(typescript@5.3.3)
       '@types/node':
         specifier: ^20.11.24
         version: 20.11.30