diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index 94b86985..aff5095d 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -36,7 +36,7 @@ jobs:
 
       - name: Chromatic에 게시
         id: chromatic
-        uses: chromaui/action@v1 # Chromatic의 GitHub Action
+        uses: chromaui/action@latest
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} # 환경 변수 참조
           token: ${{ secrets.GITHUB_TOKEN }} # GitHub 인증 토큰
diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml
new file mode 100644
index 00000000..3e440464
--- /dev/null
+++ b/.github/workflows/workflow.yml
@@ -0,0 +1,40 @@
+name: workRoot CI
+
+on:
+  push:
+    branches:
+      - main # main 브랜치에 푸시될 때 실행
+      - dev
+  pull_request:
+    branches:
+      - dev
+
+jobs:
+  lint-and-build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20" # 최신 Node.js 20.x.x 버전 사용
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run linter
+        run: npm run lint
+
+      - name: Build project
+        run: npm run build
diff --git a/.storybook/Configure.mdx b/.storybook/Configure.mdx
index cc329237..05071a3c 100644
--- a/.storybook/Configure.mdx
+++ b/.storybook/Configure.mdx
@@ -16,21 +16,23 @@ import Accessibility from "./assets/accessibility.png";
 import Theming from "./assets/theming.png";
 import AddonLibrary from "./assets/addon-library.png";
 
-export const RightArrow = () => <svg 
-    viewBox="0 0 14 14" 
-    width="8px" 
-    height="14px" 
-    style={{ 
-      marginLeft: '4px',
-      display: 'inline-block',
-      shapeRendering: 'inherit',
-      verticalAlign: 'middle',
-      fill: 'currentColor',
-      'path fill': 'currentColor'
+export const RightArrow = () => (
+  <svg
+    viewBox="0 0 14 14"
+    width="8px"
+    height="14px"
+    style={{
+      marginLeft: "4px",
+      display: "inline-block",
+      shapeRendering: "inherit",
+      verticalAlign: "middle",
+      fill: "currentColor",
+      "path fill": "currentColor",
     }}
->
-  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
-</svg>
+  >
+    <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
+  </svg>
+);
 
 <Meta title="Configure your project" />
 
@@ -39,6 +41,7 @@ export const RightArrow = () => <svg
     # Configure your project
 
     Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
   </div>
   <div className="sb-section">
     <div className="sb-section-item">
@@ -97,6 +100,7 @@ export const RightArrow = () => <svg
     # Do more with Storybook
 
     Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
   </div>
 
   <div className="sb-section">
@@ -234,12 +238,12 @@ export const RightArrow = () => <svg
       >Star on GitHub<RightArrow /></a>
     </div>
     <div className="sb-section-item">
-      <Image 
+      <Image
         width={33}
         height={32}
         layout="fixed"
-        src={Discord} 
-        alt="Discord logo" 
+        src={Discord}
+        alt="Discord logo"
         className="sb-explore-image"
       />
       <div>
@@ -252,12 +256,12 @@ export const RightArrow = () => <svg
       </div>
     </div>
     <div className="sb-section-item">
-      <Image 
+      <Image
         width={32}
         height={32}
         layout="fixed"
-        src={Youtube} 
-        alt="Youtube logo" 
+        src={Youtube}
+        alt="Youtube logo"
         className="sb-explore-image"
       />
       <div>
@@ -270,12 +274,12 @@ export const RightArrow = () => <svg
       </div>
     </div>
     <div className="sb-section-item">
-      <Image 
+      <Image
         width={33}
         height={32}
         layout="fixed"
-        src={Tutorials} 
-        alt="A book" 
+        src={Tutorials}
+        alt="A book"
         className="sb-explore-image"
       />
       <p>Follow guided walkthroughs on for key workflows.</p>
@@ -285,6 +289,7 @@ export const RightArrow = () => <svg
           target="_blank"
         >Discover tutorials<RightArrow /></a>
     </div>
+
 </div>
 
 <style>
diff --git a/.storybook/main.ts b/.storybook/main.ts
index bb41357c..09ce1d34 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,12 +1,23 @@
-import type { StorybookConfig } from "@storybook/nextjs";
+import type { StorybookConfig as BaseStorybookConfig } from "@storybook/nextjs";
+
+interface StorybookConfig extends BaseStorybookConfig {
+  viteFinal?: (config: any) => Promise<any>;
+}
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+    "@storybook/addon-styling",
+  ],
   framework: {
     name: "@storybook/nextjs",
     options: {},
   },
+  staticDirs: ["../public"],
   async viteFinal(config) {
     config.css = {
       postcss: {
@@ -15,6 +26,21 @@ const config: StorybookConfig = {
     };
     return config;
   },
+  docs: {
+    autodocs: "tag",
+  },
+  webpackFinal: async (config) => {
+    // webpack 설정 수정
+    config.resolve = {
+      ...config.resolve,
+      fallback: {
+        ...config.resolve?.fallback,
+        fs: false,
+        path: false,
+      },
+    };
+    return config;
+  },
 };
 
 export default config;
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
deleted file mode 100644
index 2c5c6ea8..00000000
--- a/.storybook/preview.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Preview } from "@storybook/react";
-import "../src/app/globals.css";
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
new file mode 100644
index 00000000..2469e5aa
--- /dev/null
+++ b/.storybook/preview.tsx
@@ -0,0 +1,115 @@
+import type { Preview } from "@storybook/react";
+import "../src/app/globals.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React from "react";
+import { Decorator } from "@storybook/react";
+import { useRouter } from "next/navigation";
+
+const queryClient = new QueryClient();
+
+// Next.js Router 모킹
+const MockNextRouter = ({ children }: { children: React.ReactNode }) => {
+  const mockRouter = {
+    push: () => Promise.resolve(),
+    refresh: () => Promise.resolve(),
+    prefetch: () => Promise.resolve(),
+    replace: () => Promise.resolve(),
+  };
+
+  // @ts-expect-error - 스토리북 테스트용 모킹
+  useRouter.mockImplementation(() => mockRouter);
+
+  return <>{children}</>;
+};
+
+const withProviders: Decorator = (Story) => {
+  return (
+    <MockNextRouter>
+      <QueryClientProvider client={queryClient}>
+        <div className="h-full w-full">
+          <Story />
+        </div>
+      </QueryClientProvider>
+    </MockNextRouter>
+  );
+};
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    viewport: {
+      defaultViewport: "desktop",
+      viewports: {
+        // 모바일 - 아이폰
+        iphone12: {
+          name: "iPhone 12",
+          styles: {
+            width: "390px",
+            height: "844px",
+          },
+        },
+        iphone12promax: {
+          name: "iPhone 12 Pro Max",
+          styles: {
+            width: "428px",
+            height: "926px",
+          },
+        },
+        // 모바일 - 갤럭시
+        galaxys8: {
+          name: "Galaxy S8",
+          styles: {
+            width: "360px",
+            height: "740px",
+          },
+        },
+        galaxys20: {
+          name: "Galaxy S20",
+          styles: {
+            width: "412px",
+            height: "915px",
+          },
+        },
+        // 태블릿 - 아이패드
+        ipadMini: {
+          name: "iPad Mini",
+          styles: {
+            width: "768px",
+            height: "1024px",
+          },
+        },
+        ipadAir: {
+          name: "iPad Air",
+          styles: {
+            width: "820px",
+            height: "1180px",
+          },
+        },
+        ipadPro: {
+          name: "iPad Pro",
+          styles: {
+            width: "1024px",
+            height: "1366px",
+          },
+        },
+        // 데스크톱
+        desktop: {
+          name: "Desktop",
+          styles: {
+            width: "1440px",
+            height: "1024px",
+          },
+        },
+      },
+    },
+  },
+  decorators: [withProviders],
+};
+
+export default preview;
diff --git a/next.config.mjs b/next.config.mjs
index e2d6385e..32aa76ac 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,14 +1,30 @@
 /** @type {import('next').NextConfig} */
 
 const nextConfig = {
-  reactStrictMode: true,
+  reactStrictMode: false,
   swcMinify: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "sprint-fe-project.s3.ap-northeast-2.amazonaws.com",
+        port: "",
+        pathname: "/Albaform/**",
+      },
+      {
+        protocol: "https",
+        hostname: "lh3.googleusercontent.com",
+        port: "",
+        pathname: "/a/**",
+      },
+    ],
+  },
+  // Webpack 커스터마이징 제거
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/,
       use: ["@svgr/webpack"],
     });
-
     return config;
   },
 };
diff --git a/package-lock.json b/package-lock.json
index e98ab1d2..dc5abab8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@hookform/resolvers": "^3.9.0",
+        "@lottiefiles/react-lottie-player": "^3.5.4",
         "@tanstack/react-query": "^5.59.19",
         "axios": "^1.7.7",
         "date-fns": "^4.1.0",
@@ -17,11 +18,13 @@
         "next-auth": "^4.24.10",
         "prettier": "^3.3.3",
         "react": "^18",
-        "react-datepicker": "^7.4.0",
+        "react-datepicker": "^7.5.0",
         "react-dom": "^18",
         "react-hook-form": "^7.53.0",
         "react-hot-toast": "^2.4.1",
         "react-icons": "^5.3.0",
+        "react-intersection-observer": "^9.13.1",
+        "react-kakao-maps-sdk": "^1.1.27",
         "react-modal": "^3.16.1",
         "react-spinners": "^0.14.1",
         "tailwind-merge": "^2.5.4",
@@ -30,8 +33,11 @@
       },
       "devDependencies": {
         "@chromatic-com/storybook": "^3.2.2",
+        "@jridgewell/gen-mapping": "^0.3.7",
+        "@jridgewell/source-map": "^0.3.6",
         "@storybook/addon-essentials": "^8.4.4",
         "@storybook/addon-interactions": "^8.4.4",
+        "@storybook/addon-links": "^8.4.7",
         "@storybook/addon-onboarding": "^8.4.4",
         "@storybook/addon-styling": "^2.0.0",
         "@storybook/blocks": "^8.4.4",
@@ -44,18 +50,20 @@
         "@tanstack/react-query-devtools": "^5.59.20",
         "@types/node": "^20",
         "@types/react": "^18.3.11",
+        "@types/react-datepicker": "^6.2.0",
         "@types/react-dom": "^18",
         "@typescript-eslint/eslint-plugin": "^8.9.0",
         "@typescript-eslint/parser": "^8.9.0",
         "@vitejs/plugin-react": "^4.3.3",
         "autoprefixer": "^10.4.20",
-        "chromatic": "^11.18.1",
+        "chromatic": "^11.20.0",
         "dotenv-cli": "^7.4.3",
         "eslint": "^8.57.1",
         "eslint-config-next": "14.2.15",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.2.1",
         "eslint-plugin-storybook": "^0.11.0",
+        "kakao.maps.d.ts": "^0.1.40",
         "postcss": "^8.4.47",
         "prettier-plugin-tailwindcss": "^0.6.8",
         "storybook": "^8.4.4",
@@ -103,6 +111,7 @@
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
       "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.25.9",
         "js-tokens": "^4.0.0",
@@ -113,9 +122,9 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.26.2",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.2.tgz",
-      "integrity": "sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.3.tgz",
+      "integrity": "sha512-nHIxvKPniQXpmQLb0vhY3VaFb3S0YrTAwpOWJZh1wn3oJPjJk9Asva204PsBdmAE8vpzfHudT8DB0scYvy9q0g==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -164,14 +173,14 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.26.2",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.2.tgz",
-      "integrity": "sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.3.tgz",
+      "integrity": "sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.26.2",
-        "@babel/types": "^7.26.0",
+        "@babel/parser": "^7.26.3",
+        "@babel/types": "^7.26.3",
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25",
         "jsesc": "^3.0.2"
@@ -193,20 +202,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.25.9.tgz",
-      "integrity": "sha512-C47lC7LIDCnz0h4vai/tpNOI95tCd5ZT3iBt/DBH5lXKHZsyNQv18yf1wIIg2ntiQNgmAvA+DgZ82iW8Qdym8g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.25.9",
-        "@babel/types": "^7.25.9"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-compilation-targets": {
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz",
@@ -267,14 +262,14 @@
       }
     },
     "node_modules/@babel/helper-create-regexp-features-plugin": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.9.tgz",
-      "integrity": "sha512-ORPNZ3h6ZRkOyAa/SaHU+XsLZr0UQzRwuDQ0cczIA17nAzZ+85G5cVkOJIj7QavLZGSe8QXUmNFxSZzjcZF9bw==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.26.3.tgz",
+      "integrity": "sha512-G7ZRb40uUgdKOQqPLjfD12ZmGA54PzqDFUv2BKImnC9QIfGhIHKvVML0oN8IUiDq4iRqpq74ABpvOaerfWdong==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
-        "regexpu-core": "^6.1.1",
+        "regexpu-core": "^6.2.0",
         "semver": "^6.3.1"
       },
       "engines": {
@@ -330,6 +325,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
       "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.25.9",
         "@babel/types": "^7.25.9"
@@ -374,6 +370,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz",
       "integrity": "sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -414,20 +411,6 @@
         "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/helper-simple-access": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.25.9.tgz",
-      "integrity": "sha512-c6WHXuiaRsJTyHYLJV75t9IqsmTbItYfdj99PnzYGQZkYKvan5/2jKJ7gu31J3/BJ/A18grImSPModuyG/Eo0Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.25.9",
-        "@babel/types": "^7.25.9"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz",
@@ -447,6 +430,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
       "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -456,6 +440,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
       "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -500,12 +485,13 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.26.2",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz",
-      "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz",
+      "integrity": "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.26.0"
+        "@babel/types": "^7.26.3"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -957,13 +943,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.25.9.tgz",
-      "integrity": "sha512-KRhdhlVk2nObA5AYa7QMgTMTVJdfHprfpAk4DjZVtllqRg9qarilstTKEhpVjyt+Npi8ThRyiV8176Am3CodPA==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.26.3.tgz",
+      "integrity": "sha512-7CAHcQ58z2chuXPWblnn1K6rLDnDWieghSOEmqQsrBenH0P9InCUtOJYD89pvngljmZlJcz3fcmgYsXFNGa1ZQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.25.9",
         "@babel/helper-plugin-utils": "^7.25.9"
       },
       "engines": {
@@ -1106,15 +1091,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-commonjs": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.25.9.tgz",
-      "integrity": "sha512-dwh2Ol1jWwL2MgkCzUSOvfmKElqQcuswAZypBSUsScMXvgdT8Ekq5YA6TtqpTVWH+4903NmboMuH1o9i8Rxlyg==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.26.3.tgz",
+      "integrity": "sha512-MgR55l4q9KddUDITEzEFYn5ZsGDXMSsU9E+kh7fjRXTIC3RHqfCo8RPRbyReYJh44HQ/yomFkqbOFohXvDCiIQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.25.9",
-        "@babel/helper-plugin-utils": "^7.25.9",
-        "@babel/helper-simple-access": "^7.25.9"
+        "@babel/helper-module-transforms": "^7.26.0",
+        "@babel/helper-plugin-utils": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1639,9 +1623,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-typescript": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.25.9.tgz",
-      "integrity": "sha512-7PbZQZP50tzv2KGGnhh82GSyMB01yKY9scIjf1a+GfZCtInOWqUH5+1EBU4t9fyR5Oykkkc9vFTs4OHrhHXljQ==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.26.3.tgz",
+      "integrity": "sha512-6+5hpdr6mETwSKjmJUdYw0EIkATiQhnELWlE3kJFBwSg/BGIVwVaVbX+gOXBCdc7Ln1RXZxyWGecIXhUfnl7oA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1835,9 +1819,9 @@
       }
     },
     "node_modules/@babel/preset-react": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.25.9.tgz",
-      "integrity": "sha512-D3to0uSPiWE7rBrdIICCd0tJSIGpLaaGptna2+w7Pft5xMqLpA1sz99DK5TZ1TjGbdQ/VI1eCSZ06dv3lT4JOw==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.26.3.tgz",
+      "integrity": "sha512-Nl03d6T9ky516DGK2YMxrTqvnpUW63TnJMOMonj+Zae0JiPC5BC9xPMSL6L8fiSpA5vP88qfygavVQvnLp+6Cw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1892,6 +1876,7 @@
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
       "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.25.9",
         "@babel/parser": "^7.25.9",
@@ -1902,16 +1887,17 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
-      "integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+      "version": "7.26.4",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.4.tgz",
+      "integrity": "sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.25.9",
-        "@babel/generator": "^7.25.9",
-        "@babel/parser": "^7.25.9",
+        "@babel/code-frame": "^7.26.2",
+        "@babel/generator": "^7.26.3",
+        "@babel/parser": "^7.26.3",
         "@babel/template": "^7.25.9",
-        "@babel/types": "^7.25.9",
+        "@babel/types": "^7.26.3",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -1920,9 +1906,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz",
-      "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz",
+      "integrity": "sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1966,9 +1952,9 @@
       }
     },
     "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz",
-      "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
+      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
@@ -3022,20 +3008,18 @@
       }
     },
     "node_modules/@joshwooding/vite-plugin-react-docgen-typescript": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@joshwooding/vite-plugin-react-docgen-typescript/-/vite-plugin-react-docgen-typescript-0.3.0.tgz",
-      "integrity": "sha512-2D6y7fNvFmsLmRt6UCOFJPvFoPMJGT0Uh1Wg0RaigUp7kdQPs6yYn8Dmx6GZkOH/NW0yMTwRz/p0SRMMRo50vA==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@joshwooding/vite-plugin-react-docgen-typescript/-/vite-plugin-react-docgen-typescript-0.4.2.tgz",
+      "integrity": "sha512-feQ+ntr+8hbVudnsTUapiMN9q8T90XA1d5jn9QzY09sNoj4iD9wi0PY1vsBFTda4ZjEaxRK9S81oarR2nj7TFQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "glob": "^7.2.0",
-        "glob-promise": "^4.2.0",
         "magic-string": "^0.27.0",
         "react-docgen-typescript": "^2.2.2"
       },
       "peerDependencies": {
         "typescript": ">= 4.3.x",
-        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
+        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -3043,11 +3027,19 @@
         }
       }
     },
+    "node_modules/@joshwooding/vite-plugin-react-docgen-typescript/node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@joshwooding/vite-plugin-react-docgen-typescript/node_modules/magic-string": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
       "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.13"
       },
@@ -3056,18 +3048,15 @@
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
-      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "version": "0.3.7",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.7.tgz",
+      "integrity": "sha512-rNoqXKSm/P1EJw/lrzyaQepC6KfryLFSShA+jl1mbPYqutXlvZWwm0x03W6jMHaYJqIOmc7QarD+GVfG9hO7XQ==",
+      "deprecated": "newer syntax features were not transpiled",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/set-array": "^1.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/sourcemap-codec": "1.4.16-beta.0",
         "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
       }
     },
     "node_modules/@jridgewell/resolve-uri": {
@@ -3080,16 +3069,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@jridgewell/set-array": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/@jridgewell/source-map": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
@@ -3102,9 +3081,9 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "version": "1.4.16-beta.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.16-beta.0.tgz",
+      "integrity": "sha512-qiZJiTfyb00BApxRU7Apz/3jtlp4gKgOmCXlGQRlIQ5zg6U0uYIb8lZBfbiJ+TxAEJ+rczfY07+CExd8sTRo5w==",
       "dev": true,
       "license": "MIT"
     },
@@ -3119,6 +3098,13 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@jridgewell/trace-mapping/node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@juggle/resize-observer": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
@@ -3126,6 +3112,18 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/@lottiefiles/react-lottie-player": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/@lottiefiles/react-lottie-player/-/react-lottie-player-3.5.4.tgz",
+      "integrity": "sha512-2FptWtHQ+o7MzdsMKSvNZ1Mz7xtKSYI0WL9HjZ1r+CvsXR3lbLQUDp7Pwx6qhg0Akm4VluQ+8/D1S1fcr1Ao4w==",
+      "license": "MIT",
+      "dependencies": {
+        "lottie-web": "^5.12.2"
+      },
+      "peerDependencies": {
+        "react": "16 - 18"
+      }
+    },
     "node_modules/@mdx-js/react": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.0.tgz",
@@ -3160,29 +3158,6 @@
         "glob": "10.3.10"
       }
     },
-    "node_modules/@next/eslint-plugin-next/node_modules/glob": {
-      "version": "10.3.10",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
-      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^2.3.5",
-        "minimatch": "^9.0.1",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
-        "path-scurry": "^1.10.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/@next/swc-darwin-arm64": {
       "version": "14.2.15",
       "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.15.tgz",
@@ -4770,9 +4745,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.27.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.27.3.tgz",
-      "integrity": "sha512-EzxVSkIvCFxUd4Mgm4xR9YXrcp976qVaHnqom/Tgm+vU79k4vV4eYTjmRvGfeoW8m9LVcsAy/lGjcgVegKEhLQ==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.28.1.tgz",
+      "integrity": "sha512-2aZp8AES04KI2dy3Ss6/MDjXbwBzj+i0GqKtWXgw2/Ma6E4jJvujryO6gJAghIRVz7Vwr9Gtl/8na3nDUKpraQ==",
       "cpu": [
         "arm"
       ],
@@ -4784,9 +4759,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.27.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.27.3.tgz",
-      "integrity": "sha512-LJc5pDf1wjlt9o/Giaw9Ofl+k/vLUaYsE2zeQGH85giX2F+wn/Cg8b3c5CDP3qmVmeO5NzwVUzQQxwZvC2eQKw==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.28.1.tgz",
+      "integrity": "sha512-EbkK285O+1YMrg57xVA+Dp0tDBRB93/BZKph9XhMjezf6F4TpYjaUSuPt5J0fZXlSag0LmZAsTmdGGqPp4pQFA==",
       "cpu": [
         "arm64"
       ],
@@ -4798,9 +4773,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.27.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.27.3.tgz",
-      "integrity": "sha512-OuRysZ1Mt7wpWJ+aYKblVbJWtVn3Cy52h8nLuNSzTqSesYw1EuN6wKp5NW/4eSre3mp12gqFRXOKTcN3AI3LqA==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.28.1.tgz",
+      "integrity": "sha512-prduvrMKU6NzMq6nxzQw445zXgaDBbMQvmKSJaxpaZ5R1QDM8w+eGxo6Y/jhT/cLoCvnZI42oEqf9KQNYz1fqQ==",
       "cpu": [
         "arm64"
       ],
@@ -4812,9 +4787,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.27.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.27.3.tgz",
-      "integrity": "sha512-xW//zjJMlJs2sOrCmXdB4d0uiilZsOdlGQIC/jjmMWT47lkLLoB1nsNhPUcnoqyi5YR6I4h+FjBpILxbEy8JRg==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.28.1.tgz",
+      "integrity": "sha512-WsvbOunsUk0wccO/TV4o7IKgloJ942hVFK1CLatwv6TJspcCZb9umQkPdvB7FihmdxgaKR5JyxDjWpCOp4uZlQ==",
       "cpu": [
         "x64"
       ],
@@ -4826,9 +4801,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.27.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.27.3.tgz",
-      "integrity": "sha512-58E0tIcwZ+12nK1WiLzHOD8I0d0kdrY/+o7yFVPRHuVGY3twBwzwDdTIBGRxLmyjciMYl1B/U515GJy+yn46qw==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.28.1.tgz",
+      "integrity": "sha512-HTDPdY1caUcU4qK23FeeGxCdJF64cKkqajU0iBnTVxS8F7H/7BewvYoG+va1KPSL63kQ1PGNyiwKOfReavzvNA==",
       "cpu": [
         "arm64"
       ],
@@ -4840,9 +4815,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.27.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.27.3.tgz",
-      "integrity": "sha512-78fohrpcVwTLxg1ZzBMlwEimoAJmY6B+5TsyAZ3Vok7YabRBUvjYTsRXPTjGEvv/mfgVBepbW28OlMEz4w8wGA==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.28.1.tgz",
+      "integrity": "sha512-m/uYasxkUevcFTeRSM9TeLyPe2QDuqtjkeoTpP9SW0XxUWfcYrGDMkO/m2tTw+4NMAF9P2fU3Mw4ahNvo7QmsQ==",
       "cpu": [
         "x64"
       ],
@@ -4854,9 +4829,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.27.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.27.3.tgz",
-      "integrity": "sha512-h2Ay79YFXyQi+QZKo3ISZDyKaVD7uUvukEHTOft7kh00WF9mxAaxZsNs3o/eukbeKuH35jBvQqrT61fzKfAB/Q==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.28.1.tgz",
+      "integrity": "sha512-QAg11ZIt6mcmzpNE6JZBpKfJaKkqTm1A9+y9O+frdZJEuhQxiugM05gnCWiANHj4RmbgeVJpTdmKRmH/a+0QbA==",
       "cpu": [
         "arm"
       ],
@@ -4868,9 +4843,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.27.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.27.3.tgz",
-      "integrity": "sha512-Sv2GWmrJfRY57urktVLQ0VKZjNZGogVtASAgosDZ1aUB+ykPxSi3X1nWORL5Jk0sTIIwQiPH7iE3BMi9zGWfkg==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.28.1.tgz",
+      "integrity": "sha512-dRP9PEBfolq1dmMcFqbEPSd9VlRuVWEGSmbxVEfiq2cs2jlZAl0YNxFzAQS2OrQmsLBLAATDMb3Z6MFv5vOcXg==",
       "cpu": [
         "arm"
       ],
@@ -4882,9 +4857,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.27.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.27.3.tgz",
-      "integrity": "sha512-FPoJBLsPW2bDNWjSrwNuTPUt30VnfM8GPGRoLCYKZpPx0xiIEdFip3dH6CqgoT0RnoGXptaNziM0WlKgBc+OWQ==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.28.1.tgz",
+      "integrity": "sha512-uGr8khxO+CKT4XU8ZUH1TTEUtlktK6Kgtv0+6bIFSeiSlnGJHG1tSFSjm41uQ9sAO/5ULx9mWOz70jYLyv1QkA==",
       "cpu": [
         "arm64"
       ],
@@ -4896,9 +4871,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.27.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.27.3.tgz",
-      "integrity": "sha512-TKxiOvBorYq4sUpA0JT+Fkh+l+G9DScnG5Dqx7wiiqVMiRSkzTclP35pE6eQQYjP4Gc8yEkJGea6rz4qyWhp3g==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.28.1.tgz",
+      "integrity": "sha512-QF54q8MYGAqMLrX2t7tNpi01nvq5RI59UBNx+3+37zoKX5KViPo/gk2QLhsuqok05sSCRluj0D00LzCwBikb0A==",
       "cpu": [
         "arm64"
       ],
@@ -4909,10 +4884,24 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.28.1.tgz",
+      "integrity": "sha512-vPul4uodvWvLhRco2w0GcyZcdyBfpfDRgNKU+p35AWEbJ/HPs1tOUrkSueVbBS0RQHAf/A+nNtDpvw95PeVKOA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.27.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.27.3.tgz",
-      "integrity": "sha512-v2M/mPvVUKVOKITa0oCFksnQQ/TqGrT+yD0184/cWHIu0LoIuYHwox0Pm3ccXEz8cEQDLk6FPKd1CCm+PlsISw==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.28.1.tgz",
+      "integrity": "sha512-pTnTdBuC2+pt1Rmm2SV7JWRqzhYpEILML4PKODqLz+C7Ou2apEV52h19CR7es+u04KlqplggmN9sqZlekg3R1A==",
       "cpu": [
         "ppc64"
       ],
@@ -4924,9 +4913,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.27.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.27.3.tgz",
-      "integrity": "sha512-LdrI4Yocb1a/tFVkzmOE5WyYRgEBOyEhWYJe4gsDWDiwnjYKjNs7PS6SGlTDB7maOHF4kxevsuNBl2iOcj3b4A==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.28.1.tgz",
+      "integrity": "sha512-vWXy1Nfg7TPBSuAncfInmAI/WZDd5vOklyLJDdIRKABcZWojNDY0NJwruY2AcnCLnRJKSaBgf/GiJfauu8cQZA==",
       "cpu": [
         "riscv64"
       ],
@@ -4938,9 +4927,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.27.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.27.3.tgz",
-      "integrity": "sha512-d4wVu6SXij/jyiwPvI6C4KxdGzuZOvJ6y9VfrcleHTwo68fl8vZC5ZYHsCVPUi4tndCfMlFniWgwonQ5CUpQcA==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.28.1.tgz",
+      "integrity": "sha512-/yqC2Y53oZjb0yz8PVuGOQQNOTwxcizudunl/tFs1aLvObTclTwZ0JhXF2XcPT/zuaymemCDSuuUPXJJyqeDOg==",
       "cpu": [
         "s390x"
       ],
@@ -4952,9 +4941,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.27.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.27.3.tgz",
-      "integrity": "sha512-/6bn6pp1fsCGEY5n3yajmzZQAh+mW4QPItbiWxs69zskBzJuheb3tNynEjL+mKOsUSFK11X4LYF2BwwXnzWleA==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.28.1.tgz",
+      "integrity": "sha512-fzgeABz7rrAlKYB0y2kSEiURrI0691CSL0+KXwKwhxvj92VULEDQLpBYLHpF49MSiPG4sq5CK3qHMnb9tlCjBw==",
       "cpu": [
         "x64"
       ],
@@ -4966,9 +4955,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.27.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.27.3.tgz",
-      "integrity": "sha512-nBXOfJds8OzUT1qUreT/en3eyOXd2EH5b0wr2bVB5999qHdGKkzGzIyKYaKj02lXk6wpN71ltLIaQpu58YFBoQ==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.28.1.tgz",
+      "integrity": "sha512-xQTDVzSGiMlSshpJCtudbWyRfLaNiVPXt1WgdWTwWz9n0U12cI2ZVtWe/Jgwyv/6wjL7b66uu61Vg0POWVfz4g==",
       "cpu": [
         "x64"
       ],
@@ -4980,9 +4969,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.27.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.27.3.tgz",
-      "integrity": "sha512-ogfbEVQgIZOz5WPWXF2HVb6En+kWzScuxJo/WdQTqEgeyGkaa2ui5sQav9Zkr7bnNCLK48uxmmK0TySm22eiuw==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.28.1.tgz",
+      "integrity": "sha512-wSXmDRVupJstFP7elGMgv+2HqXelQhuNf+IS4V+nUpNVi/GUiBgDmfwD0UGN3pcAnWsgKG3I52wMOBnk1VHr/A==",
       "cpu": [
         "arm64"
       ],
@@ -4994,9 +4983,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.27.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.27.3.tgz",
-      "integrity": "sha512-ecE36ZBMLINqiTtSNQ1vzWc5pXLQHlf/oqGp/bSbi7iedcjcNb6QbCBNG73Euyy2C+l/fn8qKWEwxr+0SSfs3w==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.28.1.tgz",
+      "integrity": "sha512-ZkyTJ/9vkgrE/Rk9vhMXhf8l9D+eAhbAVbsGsXKy2ohmJaWg0LPQLnIxRdRp/bKyr8tXuPlXhIoGlEB5XpJnGA==",
       "cpu": [
         "ia32"
       ],
@@ -5008,9 +4997,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.27.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.27.3.tgz",
-      "integrity": "sha512-vliZLrDmYKyaUoMzEbMTg2JkerfBjn03KmAw9CykO0Zzkzoyd7o3iZNam/TpyWNjNT+Cz2iO3P9Smv2wgrR+Eg==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.28.1.tgz",
+      "integrity": "sha512-ZvK2jBafvttJjoIdKm/Q/Bh7IJ1Ose9IBOwpOXcOvW3ikGTQGmKDgxTC6oCAzW6PynbkKP8+um1du81XJHZ0JA==",
       "cpu": [
         "x64"
       ],
@@ -5036,9 +5025,9 @@
       "license": "MIT"
     },
     "node_modules/@storybook/addon-actions": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.4.4.tgz",
-      "integrity": "sha512-+Dd6alcieS6UN7IKhXLuhyQYQMu9HG/Tdr790a4EOQKpJM1NxIMuPuUH3fAoKfa9VhtI1BxTBr7zNtzg9Akqhg==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.4.7.tgz",
+      "integrity": "sha512-mjtD5JxcPuW74T6h7nqMxWTvDneFtokg88p6kQ5OnC1M259iAXb//yiSZgu/quunMHPCXSiqn4FNOSgASTSbsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5053,13 +5042,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
       }
     },
     "node_modules/@storybook/addon-backgrounds": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.4.4.tgz",
-      "integrity": "sha512-asaGD4ruIPFthyhpByQSJagvtNN7EGKdHj5yMnsMvkSXnN0r1uVkI2/Z37hmLt02Qbzf6OQiBPW5TDL+X+EEBg==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.4.7.tgz",
+      "integrity": "sha512-I4/aErqtFiazcoWyKafOAm3bLpxTj6eQuH/woSbk1Yx+EzN+Dbrgx1Updy8//bsNtKkcrXETITreqHC+a57DHQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5072,13 +5061,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
       }
     },
     "node_modules/@storybook/addon-controls": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.4.4.tgz",
-      "integrity": "sha512-FbZRbwJQggLz6M3zB6scCp1SDGwQ5zdiD6sjBilZzgGO5rBFqG0A8PoOyr4iPrLU2y/NZBdRrJBD+6MkaJ+yzw==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.4.7.tgz",
+      "integrity": "sha512-377uo5IsJgXLnQLJixa47+11V+7Wn9KcDEw+96aGCBCfLbWNH8S08tJHHnSu+jXg9zoqCAC23MetntVp6LetHA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5091,20 +5080,20 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
       }
     },
     "node_modules/@storybook/addon-docs": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.4.4.tgz",
-      "integrity": "sha512-wuHaStfpd2rkAN5Lf0qmvE3JKTHTEDbnAMTvfs9inzGBL0iAwBLjW48/ll7lLkJ2E3k/FQtaevNpuc7C52u1Bw==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.4.7.tgz",
+      "integrity": "sha512-NwWaiTDT5puCBSUOVuf6ME7Zsbwz7Y79WF5tMZBx/sLQ60vpmJVQsap6NSjvK1Ravhc21EsIXqemAcBjAWu80w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@mdx-js/react": "^3.0.0",
-        "@storybook/blocks": "8.4.4",
-        "@storybook/csf-plugin": "8.4.4",
-        "@storybook/react-dom-shim": "8.4.4",
+        "@storybook/blocks": "8.4.7",
+        "@storybook/csf-plugin": "8.4.7",
+        "@storybook/react-dom-shim": "8.4.7",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "ts-dedent": "^2.0.0"
@@ -5114,25 +5103,25 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
       }
     },
     "node_modules/@storybook/addon-essentials": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.4.4.tgz",
-      "integrity": "sha512-0ObUQ98zZkeWqP2k3Un5jny3WxT3THgUKZUGD+mR8eq6CuTmJ3bUXWzDHreuDxQwgr8s5f04XD8IcRvjZ9IRgA==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.4.7.tgz",
+      "integrity": "sha512-+BtZHCBrYtQKILtejKxh0CDRGIgTl9PumfBOKRaihYb4FX1IjSAxoV/oo/IfEjlkF5f87vouShWsRa8EUauFDw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@storybook/addon-actions": "8.4.4",
-        "@storybook/addon-backgrounds": "8.4.4",
-        "@storybook/addon-controls": "8.4.4",
-        "@storybook/addon-docs": "8.4.4",
-        "@storybook/addon-highlight": "8.4.4",
-        "@storybook/addon-measure": "8.4.4",
-        "@storybook/addon-outline": "8.4.4",
-        "@storybook/addon-toolbars": "8.4.4",
-        "@storybook/addon-viewport": "8.4.4",
+        "@storybook/addon-actions": "8.4.7",
+        "@storybook/addon-backgrounds": "8.4.7",
+        "@storybook/addon-controls": "8.4.7",
+        "@storybook/addon-docs": "8.4.7",
+        "@storybook/addon-highlight": "8.4.7",
+        "@storybook/addon-measure": "8.4.7",
+        "@storybook/addon-outline": "8.4.7",
+        "@storybook/addon-toolbars": "8.4.7",
+        "@storybook/addon-viewport": "8.4.7",
         "ts-dedent": "^2.0.0"
       },
       "funding": {
@@ -5140,13 +5129,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
       }
     },
     "node_modules/@storybook/addon-highlight": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.4.4.tgz",
-      "integrity": "sha512-k7EUxiMe8RCasmgfa6ZKx7UG6kU9RooTYGwqY5TG5xAQOzDwKn4qom+OYkT/9/6lORhJrUe2GgQLCrq/WGpS1A==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.4.7.tgz",
+      "integrity": "sha512-whQIDBd3PfVwcUCrRXvCUHWClXe9mQ7XkTPCdPo4B/tZ6Z9c6zD8JUHT76ddyHivixFLowMnA8PxMU6kCMAiNw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5157,19 +5146,19 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
       }
     },
     "node_modules/@storybook/addon-interactions": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-8.4.4.tgz",
-      "integrity": "sha512-izqcc6tY0BiKW7DYrEnoXUEH9FYDPWNfQnqqE0nVBv3BS2DoNmm8M9SB8fZx7pPfw53cMJBGt3vrlY0Wtxy1+Q==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-8.4.7.tgz",
+      "integrity": "sha512-fnufT3ym8ht3HHUIRVXAH47iOJW/QOb0VSM+j269gDuvyDcY03D1civCu1v+eZLGaXPKJ8vtjr0L8zKQ/4P0JQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@storybook/global": "^5.0.0",
-        "@storybook/instrumenter": "8.4.4",
-        "@storybook/test": "8.4.4",
+        "@storybook/instrumenter": "8.4.7",
+        "@storybook/test": "8.4.7",
         "polished": "^4.2.2",
         "ts-dedent": "^2.2.0"
       },
@@ -5178,13 +5167,38 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
+      }
+    },
+    "node_modules/@storybook/addon-links": {
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-8.4.7.tgz",
+      "integrity": "sha512-L/1h4dMeMKF+MM0DanN24v5p3faNYbbtOApMgg7SlcBT/tgo3+cAjkgmNpYA8XtKnDezm+T2mTDhB8mmIRZpIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/csf": "^0.1.11",
+        "@storybook/global": "^5.0.0",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+        "storybook": "^8.4.7"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
       }
     },
     "node_modules/@storybook/addon-measure": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.4.4.tgz",
-      "integrity": "sha512-KsjrwrXwrI+z7hKKfjyY1w1b0gLSLZmp15vIRJMELybWV0+4bZFLJGwMBOQFx+aWBED8yZrRV9OjTmoczawsZg==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.4.7.tgz",
+      "integrity": "sha512-QfvqYWDSI5F68mKvafEmZic3SMiK7zZM8VA0kTXx55hF/+vx61Mm0HccApUT96xCXIgmwQwDvn9gS4TkX81Dmw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5196,13 +5210,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
       }
     },
     "node_modules/@storybook/addon-onboarding": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-onboarding/-/addon-onboarding-8.4.4.tgz",
-      "integrity": "sha512-LCCQez5xzFQ6wunXnpNjgiuqh8SYPd2AgrRPDKo5Yf1QyXnT4xSFjZr/4QFyzPsOBnpsq8MlNPS4l063Y+Qkgg==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-onboarding/-/addon-onboarding-8.4.7.tgz",
+      "integrity": "sha512-FdC2NV60VNYeMxf6DVe0qV9ucSBAzMh1//C0Qqwq8CcjthMbmKlVZ7DqbVsbIHKnFaSCaUC88eR5olAfMaauCQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5213,13 +5227,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
       }
     },
     "node_modules/@storybook/addon-outline": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.4.4.tgz",
-      "integrity": "sha512-CVS1dm6BNUWKGrJj9E1ThBp5Khe6Yw+Hhz6OFxrPZfoTr6RstwoTmvSpKjDUCn8zj6ujoORdiQUh1FsHOxAPBg==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.4.7.tgz",
+      "integrity": "sha512-6LYRqUZxSodmAIl8icr585Oi8pmzbZ90aloZJIpve+dBAzo7ydYrSQxxoQEVltXbKf3VeVcrs64ouAYqjisMYA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5231,7 +5245,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
       }
     },
     "node_modules/@storybook/addon-styling": {
@@ -5268,149 +5282,10 @@
         }
       }
     },
-    "node_modules/@storybook/addon-styling/node_modules/@storybook/client-logger": {
-      "version": "7.6.20",
-      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.20.tgz",
-      "integrity": "sha512-NwG0VIJQCmKrSaN5GBDFyQgTAHLNishUPLW1NrzqTDNAhfZUoef64rPQlinbopa0H4OXmlB+QxbQIb3ubeXmSQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@storybook/global": "^5.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/addon-styling/node_modules/@storybook/components": {
-      "version": "7.6.20",
-      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.6.20.tgz",
-      "integrity": "sha512-0d8u4m558R+W5V+rseF/+e9JnMciADLXTpsILrG+TBhwECk0MctIWW18bkqkujdCm8kDZr5U2iM/5kS1Noy7Ug==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-select": "^1.2.2",
-        "@radix-ui/react-toolbar": "^1.0.4",
-        "@storybook/client-logger": "7.6.20",
-        "@storybook/csf": "^0.1.2",
-        "@storybook/global": "^5.0.0",
-        "@storybook/theming": "7.6.20",
-        "@storybook/types": "7.6.20",
-        "memoizerific": "^1.11.3",
-        "use-resize-observer": "^9.1.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/@storybook/addon-styling/node_modules/@storybook/manager-api": {
-      "version": "7.6.20",
-      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.20.tgz",
-      "integrity": "sha512-gOB3m8hO3gBs9cBoN57T7jU0wNKDh+hi06gLcyd2awARQlAlywnLnr3s1WH5knih6Aq+OpvGBRVKkGLOkaouCQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@storybook/channels": "7.6.20",
-        "@storybook/client-logger": "7.6.20",
-        "@storybook/core-events": "7.6.20",
-        "@storybook/csf": "^0.1.2",
-        "@storybook/global": "^5.0.0",
-        "@storybook/router": "7.6.20",
-        "@storybook/theming": "7.6.20",
-        "@storybook/types": "7.6.20",
-        "dequal": "^2.0.2",
-        "lodash": "^4.17.21",
-        "memoizerific": "^1.11.3",
-        "store2": "^2.14.2",
-        "telejson": "^7.2.0",
-        "ts-dedent": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/addon-styling/node_modules/@storybook/preview-api": {
-      "version": "7.6.20",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.20.tgz",
-      "integrity": "sha512-3ic2m9LDZEPwZk02wIhNc3n3rNvbi7VDKn52hDXfAxnL5EYm7yDICAkaWcVaTfblru2zn0EDJt7ROpthscTW5w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@storybook/channels": "7.6.20",
-        "@storybook/client-logger": "7.6.20",
-        "@storybook/core-events": "7.6.20",
-        "@storybook/csf": "^0.1.2",
-        "@storybook/global": "^5.0.0",
-        "@storybook/types": "7.6.20",
-        "@types/qs": "^6.9.5",
-        "dequal": "^2.0.2",
-        "lodash": "^4.17.21",
-        "memoizerific": "^1.11.3",
-        "qs": "^6.10.0",
-        "synchronous-promise": "^2.0.15",
-        "ts-dedent": "^2.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
-    "node_modules/@storybook/addon-styling/node_modules/@storybook/theming": {
-      "version": "7.6.20",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.20.tgz",
-      "integrity": "sha512-iT1pXHkSkd35JsCte6Qbanmprx5flkqtSHC6Gi6Umqoxlg9IjiLPmpHbaIXzoC06DSW93hPj5Zbi1lPlTvRC7Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.6.20",
-        "@storybook/global": "^5.0.0",
-        "memoizerific": "^1.11.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/@storybook/addon-styling/node_modules/postcss-loader": {
-      "version": "7.3.4",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.4.tgz",
-      "integrity": "sha512-iW5WTTBSC5BfsBJ9daFMPVrLT36MrNiC6fqOZTTaHjBNX6Pfd5p+hSBqe/fEeNd7pc13QiAyGt7VdGMw4eRC4A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cosmiconfig": "^8.3.5",
-        "jiti": "^1.20.0",
-        "semver": "^7.5.4"
-      },
-      "engines": {
-        "node": ">= 14.15.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "postcss": "^7.0.0 || ^8.0.1",
-        "webpack": "^5.0.0"
-      }
-    },
     "node_modules/@storybook/addon-toolbars": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.4.4.tgz",
-      "integrity": "sha512-ENPshJMDpfzOJ4Tgm1hSzQoaEmgDxCtP6C8LKk4MOd3X92MJ7p6kfb3y3R1BLg4E/g90qp6lKPFdcohS2tKCgQ==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.4.7.tgz",
+      "integrity": "sha512-OSfdv5UZs+NdGB+nZmbafGUWimiweJ/56gShlw8Neo/4jOJl1R3rnRqqY7MYx8E4GwoX+i3GF5C3iWFNQqlDcw==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -5418,13 +5293,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
       }
     },
     "node_modules/@storybook/addon-viewport": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.4.4.tgz",
-      "integrity": "sha512-SRHJlLhf3tu7+sYNfVIYTeMegn6aiv4HGX97ZLvL76NWWBU8BntQ1LKMki7475mWiZNUFMoYYPsHlG+HU9FAtg==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.4.7.tgz",
+      "integrity": "sha512-hvczh/jjuXXcOogih09a663sRDDSATXwbE866al1DXgbDFraYD/LxX/QDb38W9hdjU9+Qhx8VFIcNWoMQns5HQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5435,7 +5310,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
       }
     },
     "node_modules/@storybook/api": {
@@ -5568,9 +5443,9 @@
       }
     },
     "node_modules/@storybook/blocks": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.4.4.tgz",
-      "integrity": "sha512-LwM3guL7uWpYR1a/SY0KZjCUskTKEaS22eF7GK8iXAV5BY4KpKr6ArW4O9orK29KtFwKhDZQLcMcECsOJBVk/A==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.4.7.tgz",
+      "integrity": "sha512-+QH7+JwXXXIyP3fRCxz/7E2VZepAanXJM7G8nbR3wWsqWgrRp4Wra6MvybxAYCxU7aNfJX5c+RW84SNikFpcIA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5585,7 +5460,7 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
       },
       "peerDependenciesMeta": {
         "react": {
@@ -5597,13 +5472,13 @@
       }
     },
     "node_modules/@storybook/builder-vite": {
-      "version": "8.4.5",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-8.4.5.tgz",
-      "integrity": "sha512-fZXWQcG5ccHCAS8NbyUwu8/5aVlZr4zmWbvKxoyvcVeuxJIsWa9RUS8Mtu7hdi+r/Wk8AlpckqhHo6go0iaDcA==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-8.4.7.tgz",
+      "integrity": "sha512-LovyXG5VM0w7CovI/k56ZZyWCveQFVDl0m7WwetpmMh2mmFJ+uPQ35BBsgTvTfc8RHi+9Q3F58qP1MQSByXi9g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@storybook/csf-plugin": "8.4.5",
+        "@storybook/csf-plugin": "8.4.7",
         "browser-assert": "^1.2.1",
         "ts-dedent": "^2.0.0"
       },
@@ -5612,35 +5487,18 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.5",
-        "vite": "^4.0.0 || ^5.0.0"
-      }
-    },
-    "node_modules/@storybook/builder-vite/node_modules/@storybook/csf-plugin": {
-      "version": "8.4.5",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.4.5.tgz",
-      "integrity": "sha512-qd2rQTglOTS+phQmTbNTXNjNyxdGvolaqHqDNMw3Vf6h9o3U+mLkwnDWNVnQ9oqvOoUEAqpBthgwzU9FhkIk+A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "unplugin": "^1.3.1"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "storybook": "^8.4.5"
+        "storybook": "^8.4.7",
+        "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
       }
     },
     "node_modules/@storybook/builder-webpack5": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-8.4.4.tgz",
-      "integrity": "sha512-I7SmGngtGc/WA44UkG3sCyYtGXVjTpPe42umf70n5EVaHRvtmXCxfL41C1y3CIfEMAfF36gOFm7rEJROIO5NyA==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-8.4.7.tgz",
+      "integrity": "sha512-O8LpsQ+4g2x5kh7rI9+jEUdX8k1a5egBQU1lbudmHchqsV0IKiVqBD9LL5Gj3wpit4vB8coSW4ZWTFBw8FQb4Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@storybook/core-webpack": "8.4.4",
+        "@storybook/core-webpack": "8.4.7",
         "@types/node": "^22.0.0",
         "@types/semver": "^7.3.4",
         "browser-assert": "^1.2.1",
@@ -5671,7 +5529,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -5680,15 +5538,22 @@
       }
     },
     "node_modules/@storybook/builder-webpack5/node_modules/@types/node": {
-      "version": "22.9.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.1.tgz",
-      "integrity": "sha512-p8Yy/8sw1caA8CdRIQBG5tiLHmxtQKObCijiAa9Ez+d4+PRffM4054xbju0msf+cvhJpnFEeNjxmVT/0ipktrg==",
+      "version": "22.10.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz",
+      "integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~6.19.8"
+        "undici-types": "~6.20.0"
       }
     },
+    "node_modules/@storybook/builder-webpack5/node_modules/undici-types": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@storybook/channels": {
       "version": "7.6.20",
       "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.20.tgz",
@@ -5737,23 +5602,50 @@
       }
     },
     "node_modules/@storybook/components": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.4.4.tgz",
-      "integrity": "sha512-0BSZVmsk23C0BSRKx3liZSVQFXtoF86XQFdNQxjrXIwdHIEN7TcL3DwcxeVUU5ilGp7HeDgAydGNIPGgTeEe6g==",
+      "version": "7.6.20",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.6.20.tgz",
+      "integrity": "sha512-0d8u4m558R+W5V+rseF/+e9JnMciADLXTpsILrG+TBhwECk0MctIWW18bkqkujdCm8kDZr5U2iM/5kS1Noy7Ug==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-select": "^1.2.2",
+        "@radix-ui/react-toolbar": "^1.0.4",
+        "@storybook/client-logger": "7.6.20",
+        "@storybook/csf": "^0.1.2",
+        "@storybook/global": "^5.0.0",
+        "@storybook/theming": "7.6.20",
+        "@storybook/types": "7.6.20",
+        "memoizerific": "^1.11.3",
+        "use-resize-observer": "^9.1.0",
+        "util-deprecate": "^1.0.2"
+      },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/components/node_modules/@storybook/client-logger": {
+      "version": "7.6.20",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.20.tgz",
+      "integrity": "sha512-NwG0VIJQCmKrSaN5GBDFyQgTAHLNishUPLW1NrzqTDNAhfZUoef64rPQlinbopa0H4OXmlB+QxbQIb3ubeXmSQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
       }
     },
     "node_modules/@storybook/core": {
-      "version": "8.4.5",
-      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.4.5.tgz",
-      "integrity": "sha512-aB1sQNX5nRoUAqg5u1py0MuR/VPd6c6PhECa4rW6pmr7kZcfyP4PP6UFpXuN71ypTQlkRE3Vc5PQZ3gLhE9o3g==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.4.7.tgz",
+      "integrity": "sha512-7Z8Z0A+1YnhrrSXoKKwFFI4gnsLbWzr8fnDCU6+6HlDukFYh8GHRcZ9zKfqmy6U3hw2h8H5DrHsxWfyaYUUOoA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5797,9 +5689,9 @@
       }
     },
     "node_modules/@storybook/core-webpack": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-8.4.4.tgz",
-      "integrity": "sha512-JeODT64uRJDH0o/ZOAAZHJswBkTYd2u9AdGyAzjp16KRK2NcHM2iUMNT94lOlCYzshvRVqPFVxbNmaL16/K0Ag==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-8.4.7.tgz",
+      "integrity": "sha512-Tj+CjQLpFyBJxhhMms+vbPT3+gTRAiQlrhY3L1IEVwBa3wtRMS0qjozH26d1hK4G6mUIEdwu13L54HMU/w33Sg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5811,23 +5703,30 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
       }
     },
     "node_modules/@storybook/core-webpack/node_modules/@types/node": {
-      "version": "22.9.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.1.tgz",
-      "integrity": "sha512-p8Yy/8sw1caA8CdRIQBG5tiLHmxtQKObCijiAa9Ez+d4+PRffM4054xbju0msf+cvhJpnFEeNjxmVT/0ipktrg==",
+      "version": "22.10.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz",
+      "integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~6.19.8"
+        "undici-types": "~6.20.0"
       }
     },
+    "node_modules/@storybook/core-webpack/node_modules/undici-types": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@storybook/csf": {
-      "version": "0.1.11",
-      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.11.tgz",
-      "integrity": "sha512-dHYFQH3mA+EtnCkHXzicbLgsvzYjcDJ1JWsogbItZogkPHgSJM/Wr71uMkcvw8v9mmCyP4NpXJuu6bPoVsOnzg==",
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.12.tgz",
+      "integrity": "sha512-9/exVhabisyIVL0VxTCxo01Tdm8wefIXKXfltAPTSr8cbLn5JAxGQ6QV3mjdecLGEOucfoVhAKtJfVHxEK1iqw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5835,9 +5734,9 @@
       }
     },
     "node_modules/@storybook/csf-plugin": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.4.4.tgz",
-      "integrity": "sha512-4+6SUhp5sEJN9BY5RuxcFKvJbOqCzIUp9oHSSz36hkP07a4QH+SwxfEd0U7JRfmPpB63L+izywTzWhdADiAMOQ==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.4.7.tgz",
+      "integrity": "sha512-Fgogplu4HImgC+AYDcdGm1rmL6OR1rVdNX1Be9C/NEXwOCpbbBwi0BxTf/2ZxHRk9fCeaPEcOdP5S8QHfltc1g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5848,7 +5747,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
       }
     },
     "node_modules/@storybook/global": {
@@ -5859,23 +5758,23 @@
       "license": "MIT"
     },
     "node_modules/@storybook/icons": {
-      "version": "1.2.12",
-      "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.2.12.tgz",
-      "integrity": "sha512-UxgyK5W3/UV4VrI3dl6ajGfHM4aOqMAkFLWe2KibeQudLf6NJpDrDMSHwZj+3iKC4jFU7dkKbbtH2h/al4sW3Q==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.3.0.tgz",
+      "integrity": "sha512-Nz/UzeYQdUZUhacrPyfkiiysSjydyjgg/p0P9HxB4p/WaJUUjMAcaoaLgy3EXx61zZJ3iD36WPuDkZs5QYrA0A==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
       },
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
       }
     },
     "node_modules/@storybook/instrumenter": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-8.4.4.tgz",
-      "integrity": "sha512-mq/YVEZrB8jyyio2Of01rQixsQ72z8ssAhJS9ldIlK+cvERQi0VBCpH3pejPmjOB40yiKBJHNqH4HIANVhibgw==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-8.4.7.tgz",
+      "integrity": "sha512-k6NSD3jaRCCHAFtqXZ7tw8jAzD/yTEWXGya+REgZqq5RCkmJ+9S4Ytp/6OhQMPtPFX23gAuJJzTQVLcCr+gjRg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5887,27 +5786,54 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
       }
     },
     "node_modules/@storybook/manager-api": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.4.4.tgz",
-      "integrity": "sha512-rmNPcbEyzakEHoaecUbhkW7WWOkyZ0z7ywH4d5/s0ZuQS57Px2N+ZLVgRJwYK+YNHiJYqDf1BTln9YJ/Mt1L6Q==",
+      "version": "7.6.20",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.20.tgz",
+      "integrity": "sha512-gOB3m8hO3gBs9cBoN57T7jU0wNKDh+hi06gLcyd2awARQlAlywnLnr3s1WH5knih6Aq+OpvGBRVKkGLOkaouCQ==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@storybook/channels": "7.6.20",
+        "@storybook/client-logger": "7.6.20",
+        "@storybook/core-events": "7.6.20",
+        "@storybook/csf": "^0.1.2",
+        "@storybook/global": "^5.0.0",
+        "@storybook/router": "7.6.20",
+        "@storybook/theming": "7.6.20",
+        "@storybook/types": "7.6.20",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3",
+        "store2": "^2.14.2",
+        "telejson": "^7.2.0",
+        "ts-dedent": "^2.0.0"
+      },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/manager-api/node_modules/@storybook/client-logger": {
+      "version": "7.6.20",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.20.tgz",
+      "integrity": "sha512-NwG0VIJQCmKrSaN5GBDFyQgTAHLNishUPLW1NrzqTDNAhfZUoef64rPQlinbopa0H4OXmlB+QxbQIb3ubeXmSQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
       },
-      "peerDependencies": {
-        "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
       }
     },
     "node_modules/@storybook/nextjs": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/nextjs/-/nextjs-8.4.4.tgz",
-      "integrity": "sha512-GWrNeElMYHO8FVETjW205u2s9IXFs46fmVKY8T1dHgksCm3JV8w4k14gM2eaZbOUOH/tGcOuz5YbqJl8iKkA8w==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/nextjs/-/nextjs-8.4.7.tgz",
+      "integrity": "sha512-6dVt6VKBndSqn91egZx2fWl44i1TnIggRgmnk5jyl2KHDRvXziFNa2ujBz1nveriAWmwRchhce0OLDx9zQ9b4w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5925,10 +5851,10 @@
         "@babel/preset-typescript": "^7.24.1",
         "@babel/runtime": "^7.24.4",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
-        "@storybook/builder-webpack5": "8.4.4",
-        "@storybook/preset-react-webpack": "8.4.4",
-        "@storybook/react": "8.4.4",
-        "@storybook/test": "8.4.4",
+        "@storybook/builder-webpack5": "8.4.7",
+        "@storybook/preset-react-webpack": "8.4.7",
+        "@storybook/react": "8.4.7",
+        "@storybook/test": "8.4.7",
         "@types/node": "^22.0.0",
         "@types/semver": "^7.3.4",
         "babel-loader": "^9.1.3",
@@ -5964,7 +5890,7 @@
         "next": "^13.5.0 || ^14.0.0 || ^15.0.0",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.4.4",
+        "storybook": "^8.4.7",
         "webpack": "^5.0.0"
       },
       "peerDependenciesMeta": {
@@ -5977,24 +5903,90 @@
       }
     },
     "node_modules/@storybook/nextjs/node_modules/@types/node": {
-      "version": "22.9.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.1.tgz",
-      "integrity": "sha512-p8Yy/8sw1caA8CdRIQBG5tiLHmxtQKObCijiAa9Ez+d4+PRffM4054xbju0msf+cvhJpnFEeNjxmVT/0ipktrg==",
+      "version": "22.10.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz",
+      "integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.20.0"
+      }
+    },
+    "node_modules/@storybook/nextjs/node_modules/cosmiconfig": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
+      "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/nextjs/node_modules/postcss-loader": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-8.1.1.tgz",
+      "integrity": "sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~6.19.8"
+        "cosmiconfig": "^9.0.0",
+        "jiti": "^1.20.0",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "postcss": "^7.0.0 || ^8.0.1",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
       }
     },
+    "node_modules/@storybook/nextjs/node_modules/undici-types": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@storybook/preset-react-webpack": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/preset-react-webpack/-/preset-react-webpack-8.4.4.tgz",
-      "integrity": "sha512-sCuTZ/zbEWfTYy2cyDUHVDLIEKYFmFPhGDbQLk1D4MEXZsVQqBx7H0yaG9GqB7swvED+XIgQeZTeUA/lTq41fg==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/preset-react-webpack/-/preset-react-webpack-8.4.7.tgz",
+      "integrity": "sha512-geTSBKyrBagVihil5MF7LkVFynbfHhCinvnbCZZqXW7M1vgcxvatunUENB+iV8eWg/0EJ+8O7scZL+BAxQ/2qg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@storybook/core-webpack": "8.4.4",
-        "@storybook/react": "8.4.4",
+        "@storybook/core-webpack": "8.4.7",
+        "@storybook/react": "8.4.7",
         "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
         "@types/node": "^22.0.0",
         "@types/semver": "^7.3.4",
@@ -6016,7 +6008,7 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -6025,42 +6017,76 @@
       }
     },
     "node_modules/@storybook/preset-react-webpack/node_modules/@types/node": {
-      "version": "22.9.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.1.tgz",
-      "integrity": "sha512-p8Yy/8sw1caA8CdRIQBG5tiLHmxtQKObCijiAa9Ez+d4+PRffM4054xbju0msf+cvhJpnFEeNjxmVT/0ipktrg==",
+      "version": "22.10.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz",
+      "integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~6.19.8"
+        "undici-types": "~6.20.0"
       }
     },
+    "node_modules/@storybook/preset-react-webpack/node_modules/undici-types": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@storybook/preview-api": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.4.4.tgz",
-      "integrity": "sha512-iZrWQcjRBqBHFdDXVxGpw6mHBZMCMYqhWXdyJ0d1S2y3PwcfOjkcXlQ1UiAenFHlA6dKrcYw8luKUQTL9bKReA==",
+      "version": "7.6.20",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.20.tgz",
+      "integrity": "sha512-3ic2m9LDZEPwZk02wIhNc3n3rNvbi7VDKn52hDXfAxnL5EYm7yDICAkaWcVaTfblru2zn0EDJt7ROpthscTW5w==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@storybook/channels": "7.6.20",
+        "@storybook/client-logger": "7.6.20",
+        "@storybook/core-events": "7.6.20",
+        "@storybook/csf": "^0.1.2",
+        "@storybook/global": "^5.0.0",
+        "@storybook/types": "7.6.20",
+        "@types/qs": "^6.9.5",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0",
+        "synchronous-promise": "^2.0.15",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/preview-api/node_modules/@storybook/client-logger": {
+      "version": "7.6.20",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.20.tgz",
+      "integrity": "sha512-NwG0VIJQCmKrSaN5GBDFyQgTAHLNishUPLW1NrzqTDNAhfZUoef64rPQlinbopa0H4OXmlB+QxbQIb3ubeXmSQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
       },
-      "peerDependencies": {
-        "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
       }
     },
     "node_modules/@storybook/react": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-8.4.4.tgz",
-      "integrity": "sha512-92lGnRcAI2qW6zH8GMBScyXmOS1ANI8ZuSP4ExQj+lGsCrAr7PBr0wuHy3wIn1YyAvQGPUn/mpYrmMz08c2HfA==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-8.4.7.tgz",
+      "integrity": "sha512-nQ0/7i2DkaCb7dy0NaT95llRVNYWQiPIVuhNfjr1mVhEP7XD090p0g7eqUmsx8vfdHh2BzWEo6CoBFRd3+EXxw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@storybook/components": "8.4.4",
+        "@storybook/components": "8.4.7",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "8.4.4",
-        "@storybook/preview-api": "8.4.4",
-        "@storybook/react-dom-shim": "8.4.4",
-        "@storybook/theming": "8.4.4"
+        "@storybook/manager-api": "8.4.7",
+        "@storybook/preview-api": "8.4.7",
+        "@storybook/react-dom-shim": "8.4.7",
+        "@storybook/theming": "8.4.7"
       },
       "engines": {
         "node": ">=18.0.0"
@@ -6070,10 +6096,10 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "@storybook/test": "8.4.4",
+        "@storybook/test": "8.4.7",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.4.4",
+        "storybook": "^8.4.7",
         "typescript": ">= 4.2.x"
       },
       "peerDependenciesMeta": {
@@ -6106,9 +6132,9 @@
       }
     },
     "node_modules/@storybook/react-dom-shim": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.4.4.tgz",
-      "integrity": "sha512-kufv2FDK3kjADBo+/aKHsUn9T5E4p9IBAmCoIvXBGRDumPRds7Pt3MB4ODKlg+IumR7LMEq0jTJkn27ZRTuUmw==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.4.7.tgz",
+      "integrity": "sha512-6bkG2jvKTmWrmVzCgwpTxwIugd7Lu+2btsLAqhQSzDyIj2/uhMNp8xIMr/NBDtLgq3nomt9gefNa9xxLwk/OMg==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -6118,20 +6144,20 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
       }
     },
     "node_modules/@storybook/react-vite": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-8.4.4.tgz",
-      "integrity": "sha512-NbTAY4R526hJ+gz7BFLS1HpGx3BikQDbq1BuEcaWsf/rJnygwlzeQmdPyfrfNC8R0ufIKRWUiPrPmMvrf8ZI6A==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-8.4.7.tgz",
+      "integrity": "sha512-iiY9iLdMXhDnilCEVxU6vQsN72pW3miaf0WSenOZRyZv3HdbpgOxI0qapOS0KCyRUnX9vTlmrSPTMchY4cAeOg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0",
+        "@joshwooding/vite-plugin-react-docgen-typescript": "0.4.2",
         "@rollup/pluginutils": "^5.0.2",
-        "@storybook/builder-vite": "8.4.4",
-        "@storybook/react": "8.4.4",
+        "@storybook/builder-vite": "8.4.7",
+        "@storybook/react": "8.4.7",
         "find-up": "^5.0.0",
         "magic-string": "^0.30.0",
         "react-docgen": "^7.0.0",
@@ -6148,28 +6174,64 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.4.4",
-        "vite": "^4.0.0 || ^5.0.0"
+        "storybook": "^8.4.7",
+        "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
       }
     },
-    "node_modules/@storybook/react-vite/node_modules/@storybook/builder-vite": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-8.4.4.tgz",
-      "integrity": "sha512-UfPzE0p2xvBK7sA853N3VN+Plfw6/DIVppwbgsaRdzie52QXZQrl60u0igD47DHi6+xbqCBWDz7up4h3k00Z5A==",
+    "node_modules/@storybook/react/node_modules/@storybook/components": {
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.4.7.tgz",
+      "integrity": "sha512-uyJIcoyeMWKAvjrG9tJBUCKxr2WZk+PomgrgrUwejkIfXMO76i6jw9BwLa0NZjYdlthDv30r9FfbYZyeNPmF0g==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@storybook/csf-plugin": "8.4.4",
-        "browser-assert": "^1.2.1",
-        "ts-dedent": "^2.0.0"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
       },
+      "peerDependencies": {
+        "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
+      }
+    },
+    "node_modules/@storybook/react/node_modules/@storybook/manager-api": {
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.4.7.tgz",
+      "integrity": "sha512-ELqemTviCxAsZ5tqUz39sDmQkvhVAvAgiplYy9Uf15kO0SP2+HKsCMzlrm2ue2FfkUNyqbDayCPPCB0Cdn/mpQ==",
+      "dev": true,
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.4",
-        "vite": "^4.0.0 || ^5.0.0"
+        "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
+      }
+    },
+    "node_modules/@storybook/react/node_modules/@storybook/preview-api": {
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.4.7.tgz",
+      "integrity": "sha512-0QVQwHw+OyZGHAJEXo6Knx+6/4er7n2rTDE5RYJ9F2E2Lg42E19pfdLlq2Jhoods2Xrclo3wj6GWR//Ahi39Eg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
+      }
+    },
+    "node_modules/@storybook/react/node_modules/@storybook/theming": {
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.4.7.tgz",
+      "integrity": "sha512-99rgLEjf7iwfSEmdqlHkSG3AyLcK0sfExcr0jnc6rLiAkBhzuIsvcHjjUwkR210SOCgXqBPW0ZA6uhnuyppHLw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
       }
     },
     "node_modules/@storybook/router": {
@@ -6203,15 +6265,15 @@
       }
     },
     "node_modules/@storybook/test": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.4.4.tgz",
-      "integrity": "sha512-tmJd+lxl3MC0Xdu1KW/69V8tibv98OvdopxGqfVR0x5dkRHM3sFK/tv1ZJAUeronlvRyhGySOu1tHUrMjcNqyA==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.4.7.tgz",
+      "integrity": "sha512-AhvJsu5zl3uG40itSQVuSy5WByp3UVhS6xAnme4FWRwgSxhvZjATJ3AZkkHWOYjnnk+P2/sbz/XuPli1FVCWoQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@storybook/csf": "^0.1.11",
         "@storybook/global": "^5.0.0",
-        "@storybook/instrumenter": "8.4.4",
+        "@storybook/instrumenter": "8.4.7",
         "@testing-library/dom": "10.4.0",
         "@testing-library/jest-dom": "6.5.0",
         "@testing-library/user-event": "14.5.2",
@@ -6223,21 +6285,42 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.4"
+        "storybook": "^8.4.7"
+      }
+    },
+    "node_modules/@storybook/theming": {
+      "version": "7.6.20",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.20.tgz",
+      "integrity": "sha512-iT1pXHkSkd35JsCte6Qbanmprx5flkqtSHC6Gi6Umqoxlg9IjiLPmpHbaIXzoC06DSW93hPj5Zbi1lPlTvRC7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@storybook/client-logger": "7.6.20",
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@storybook/theming": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.4.4.tgz",
-      "integrity": "sha512-iq4yt3Fx35ZV5owNC//E6G+QPV19xHHVN2Ugi3p7KOSFK3chuXX9mxZ1rfir+t+U30a5EPOEnlsY3/1LXn7aTw==",
+    "node_modules/@storybook/theming/node_modules/@storybook/client-logger": {
+      "version": "7.6.20",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.20.tgz",
+      "integrity": "sha512-NwG0VIJQCmKrSaN5GBDFyQgTAHLNishUPLW1NrzqTDNAhfZUoef64rPQlinbopa0H4OXmlB+QxbQIb3ubeXmSQ==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
       }
     },
     "node_modules/@storybook/types": {
@@ -6545,9 +6628,9 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.60.6",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.60.6.tgz",
-      "integrity": "sha512-tI+k0KyCo1EBJ54vxK1kY24LWj673ujTydCZmzEZKAew4NqZzTaVQJEuaG1qKj2M03kUHN46rchLRd+TxVq/zQ==",
+      "version": "5.62.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.62.7.tgz",
+      "integrity": "sha512-fgpfmwatsrUal6V+8EC2cxZIQVl9xvL7qYa03gsdsCy985UTUlS4N+/3hCzwR0PclYDqisca2AqR1BVgJGpUDA==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -6555,9 +6638,9 @@
       }
     },
     "node_modules/@tanstack/query-devtools": {
-      "version": "5.59.20",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.59.20.tgz",
-      "integrity": "sha512-vxhuQ+8VV4YWQSFxQLsuM+dnEKRY7VeRzpNabFXdhEwsBYLrjXlF1pM38A8WyKNLqZy8JjyRO8oP4Wd/oKHwuQ==",
+      "version": "5.61.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.61.4.tgz",
+      "integrity": "sha512-21Tw+u8E3IJJj4A/Bct4H0uBaDTEu7zBrR79FeSyY+mS2gx5/m316oDtJiKkILc819VSTYt+sFzODoJNcpPqZQ==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -6566,12 +6649,12 @@
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.60.6",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.60.6.tgz",
-      "integrity": "sha512-FUzSDaiPkuZCmuGqrixfRRXJV9u+nrUh9lAlA5Q3ZFrOw1Js1VeBfxi1NIcJO3ZWJdKceBqKeBJdNcWStCYZnw==",
+      "version": "5.62.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.62.7.tgz",
+      "integrity": "sha512-+xCtP4UAFDTlRTYyEjLx0sRtWyr5GIk7TZjZwBu4YaNahi3Rt2oMyRqfpfVrtwsqY2sayP4iXVCwmC+ZqqFmuw==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.60.6"
+        "@tanstack/query-core": "5.62.7"
       },
       "funding": {
         "type": "github",
@@ -6582,20 +6665,20 @@
       }
     },
     "node_modules/@tanstack/react-query-devtools": {
-      "version": "5.60.6",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.60.6.tgz",
-      "integrity": "sha512-b55QgJs2PSzOtLdE3p9fxPOPmeXXfkzcsyVBFFyXwINIilSwz/wWoz2D5fwg5Vbp60CX34LccstzryU6Bg6Rqw==",
+      "version": "5.62.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.62.7.tgz",
+      "integrity": "sha512-wxXsdTZJRs//hMtJMU5aNlUaTclRFPqLvDNeWbRj8YpGD3aoo4zyu53W55W2DY16+ycg3fti21uCW4N9oyj91w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-devtools": "5.59.20"
+        "@tanstack/query-devtools": "5.61.4"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
-        "@tanstack/react-query": "^5.60.6",
+        "@tanstack/react-query": "^5.62.7",
         "react": "^18 || ^19"
       }
     },
@@ -6820,17 +6903,6 @@
         "@types/send": "*"
       }
     },
-    "node_modules/@types/glob": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
-      "integrity": "sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/minimatch": "*",
-        "@types/node": "*"
-      }
-    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -6873,17 +6945,10 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/minimatch": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz",
-      "integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/node": {
-      "version": "20.17.6",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.6.tgz",
-      "integrity": "sha512-VEI7OdvK2wP7XHnsuXbAJnEpEkF6NjSN45QJlL4VGqZSXsnicpesdTWsg9RISeSdYd3yeRj/y3k5KGjUXYnFwQ==",
+      "version": "20.17.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.9.tgz",
+      "integrity": "sha512-0JOXkRyLanfGPE2QRCwgxhzlBAvaRdCNMcvbd7jFfpmD4eEXll7LRwy5ymJmyeZqk7Nh7eD2LeUyQ68BbndmXw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6898,9 +6963,9 @@
       "license": "MIT"
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.13",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
-      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
+      "version": "15.7.14",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
+      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
       "devOptional": true,
       "license": "MIT"
     },
@@ -6919,9 +6984,9 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "18.3.12",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
-      "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==",
+      "version": "18.3.16",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.16.tgz",
+      "integrity": "sha512-oh8AMIC4Y2ciKufU8hnKgs+ufgbA/dhPTACaZPM86AbwX9QwnFtSoPWEeRUj8fge+v6kFt78BXcDhAU1SrrAsw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -6929,14 +6994,37 @@
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/@types/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
+    "node_modules/@types/react-datepicker": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-6.2.0.tgz",
+      "integrity": "sha512-+JtO4Fm97WLkJTH8j8/v3Ldh7JCNRwjMYjRaKh4KHH0M3jJoXtwiD3JBCsdlg3tsFIw9eQSqyAPeVDN2H2oM9Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/react": "*"
+        "@floating-ui/react": "^0.26.2",
+        "@types/react": "*",
+        "date-fns": "^3.3.1"
+      }
+    },
+    "node_modules/@types/react-datepicker/node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.5",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz",
+      "integrity": "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
       }
     },
     "node_modules/@types/resolve": {
@@ -6984,17 +7072,17 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.15.0.tgz",
-      "integrity": "sha512-+zkm9AR1Ds9uLWN3fkoeXgFppaQ+uEVtfOV62dDmsy9QCNqlRHWNEck4yarvRNrvRcHQLGfqBNui3cimoz8XAg==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.18.0.tgz",
+      "integrity": "sha512-NR2yS7qUqCL7AIxdJUQf2MKKNDVNaig/dEB0GBLU7D+ZdHgK1NoH/3wsgO3OnPVipn51tG3MAwaODEGil70WEw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.15.0",
-        "@typescript-eslint/type-utils": "8.15.0",
-        "@typescript-eslint/utils": "8.15.0",
-        "@typescript-eslint/visitor-keys": "8.15.0",
+        "@typescript-eslint/scope-manager": "8.18.0",
+        "@typescript-eslint/type-utils": "8.18.0",
+        "@typescript-eslint/utils": "8.18.0",
+        "@typescript-eslint/visitor-keys": "8.18.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
@@ -7009,25 +7097,21 @@
       },
       "peerDependencies": {
         "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0",
-        "eslint": "^8.57.0 || ^9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.8.0"
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.15.0.tgz",
-      "integrity": "sha512-7n59qFpghG4uazrF9qtGKBZXn7Oz4sOMm8dwNWDQY96Xlm2oX67eipqcblDj+oY1lLCbf1oltMZFpUso66Kl1A==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.18.0.tgz",
+      "integrity": "sha512-hgUZ3kTEpVzKaK3uNibExUYm6SKKOmTU2BOxBSvOYwtJEPdVQ70kZJpPjstlnhCHcuc2WGfSbpKlb/69ttyN5Q==",
       "dev": true,
-      "license": "BSD-2-Clause",
+      "license": "MITClause",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.15.0",
-        "@typescript-eslint/types": "8.15.0",
-        "@typescript-eslint/typescript-estree": "8.15.0",
-        "@typescript-eslint/visitor-keys": "8.15.0",
+        "@typescript-eslint/scope-manager": "8.18.0",
+        "@typescript-eslint/types": "8.18.0",
+        "@typescript-eslint/typescript-estree": "8.18.0",
+        "@typescript-eslint/visitor-keys": "8.18.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -7038,23 +7122,19 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.8.0"
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.15.0.tgz",
-      "integrity": "sha512-QRGy8ADi4J7ii95xz4UoiymmmMd/zuy9azCaamnZ3FM8T5fZcex8UfJcjkiEZjJSztKfEBe3dZ5T/5RHAmw2mA==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.18.0.tgz",
+      "integrity": "sha512-PNGcHop0jkK2WVYGotk/hxj+UFLhXtGPiGtiaWgVBVP1jhMoMCHlTyJA+hEj4rszoSdLTK3fN4oOatrL0Cp+Xw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.15.0",
-        "@typescript-eslint/visitor-keys": "8.15.0"
+        "@typescript-eslint/types": "8.18.0",
+        "@typescript-eslint/visitor-keys": "8.18.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -7065,14 +7145,14 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.15.0.tgz",
-      "integrity": "sha512-UU6uwXDoI3JGSXmcdnP5d8Fffa2KayOhUUqr/AiBnG1Gl7+7ut/oyagVeSkh7bxQ0zSXV9ptRh/4N15nkCqnpw==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.18.0.tgz",
+      "integrity": "sha512-er224jRepVAVLnMF2Q7MZJCq5CsdH2oqjP4dT7K6ij09Kyd+R21r7UVJrF0buMVdZS5QRhDzpvzAxHxabQadow==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "8.15.0",
-        "@typescript-eslint/utils": "8.15.0",
+        "@typescript-eslint/typescript-estree": "8.18.0",
+        "@typescript-eslint/utils": "8.18.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.3.0"
       },
@@ -7084,18 +7164,14 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.8.0"
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.15.0.tgz",
-      "integrity": "sha512-n3Gt8Y/KyJNe0S3yDCD2RVKrHBC4gTUcLTebVBXacPy091E6tNspFLKRXlk3hwT4G55nfr1n2AdFqi/XMxzmPQ==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.18.0.tgz",
+      "integrity": "sha512-FNYxgyTCAnFwTrzpBGq+zrnoTO4x0c1CKYY5MuUTzpScqmY5fmsh2o3+57lqdI3NZucBDCzDgdEbIaNfAjAHQA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -7107,14 +7183,14 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.15.0.tgz",
-      "integrity": "sha512-1eMp2JgNec/niZsR7ioFBlsh/Fk0oJbhaqO0jRyQBMgkz7RrFfkqF9lYYmBoGBaSiLnu8TAPQTwoTUiSTUW9dg==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.18.0.tgz",
+      "integrity": "sha512-rqQgFRu6yPkauz+ms3nQpohwejS8bvgbPyIDq13cgEDbkXt4LH4OkDMT0/fN1RUtzG8e8AKJyDBoocuQh8qNeg==",
       "dev": true,
-      "license": "BSD-2-Clause",
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.15.0",
-        "@typescript-eslint/visitor-keys": "8.15.0",
+        "@typescript-eslint/types": "8.18.0",
+        "@typescript-eslint/visitor-keys": "8.18.0",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
         "is-glob": "^4.0.3",
@@ -7129,23 +7205,21 @@
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <5.8.0"
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.15.0.tgz",
-      "integrity": "sha512-k82RI9yGhr0QM3Dnq+egEpz9qB6Un+WLYhmoNcvl8ltMEededhh7otBVVIDDsEEttauwdY/hQoSsOv13lxrFzQ==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.18.0.tgz",
+      "integrity": "sha512-p6GLdY383i7h5b0Qrfbix3Vc3+J2k6QWw6UMUeY5JGfm3C5LbZ4QIZzJNoNOfgyRe0uuYKjvVOsO/jD4SJO+xg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "8.15.0",
-        "@typescript-eslint/types": "8.15.0",
-        "@typescript-eslint/typescript-estree": "8.15.0"
+        "@typescript-eslint/scope-manager": "8.18.0",
+        "@typescript-eslint/types": "8.18.0",
+        "@typescript-eslint/typescript-estree": "8.18.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -7155,22 +7229,18 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.8.0"
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.15.0.tgz",
-      "integrity": "sha512-h8vYOulWec9LhpwfAdZf2bjr8xIp0KNKnpgqSz0qqYYKAW/QZKw3ktRndbiAtUz4acH4QLQavwZBYCc0wulA/Q==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.18.0.tgz",
+      "integrity": "sha512-pCh/qEA8Lb1wVIqNvBke8UaRjJ6wrAWkJO5yyIbs8Yx6TNGYyfNjOo61tLv+WwLvoLPp4BQ8B7AHKijl8NGUfw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.15.0",
+        "@typescript-eslint/types": "8.18.0",
         "eslint-visitor-keys": "^4.2.0"
       },
       "engines": {
@@ -7195,22 +7265,22 @@
       }
     },
     "node_modules/@ungap/structured-clone": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
-      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.1.tgz",
+      "integrity": "sha512-fEzPV3hSkSMltkw152tJKNARhOupqbH96MZWyRjNaYZOMIzbrTeQDG+MTc6Mr2pgzFQzFxAfmhGDNP5QK++2ZA==",
       "dev": true,
       "license": "ISC"
     },
     "node_modules/@vitejs/plugin-react": {
-      "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.3.tgz",
-      "integrity": "sha512-NooDe9GpHGqNns1i8XDERg0Vsg5SSYRhRxxyTGogUdkdNt47jal+fbuYi+Yfq6pzRCKXyoPcWisfxE6RIM3GKA==",
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.4.tgz",
+      "integrity": "sha512-SCCPBJtYLdE8PX/7ZQAs1QAZ8Jqwih+0VBLum1EGqmCCQal+MIUqLCzj3ZUy8ufbC0cAM4LRlSTm7IQJwWT4ug==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/core": "^7.25.2",
-        "@babel/plugin-transform-react-jsx-self": "^7.24.7",
-        "@babel/plugin-transform-react-jsx-source": "^7.24.7",
+        "@babel/core": "^7.26.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.25.9",
+        "@babel/plugin-transform-react-jsx-source": "^7.25.9",
         "@types/babel__core": "^7.20.5",
         "react-refresh": "^0.14.2"
       },
@@ -7218,7 +7288,7 @@
         "node": "^14.18.0 || >=16.0.0"
       },
       "peerDependencies": {
-        "vite": "^4.2.0 || ^5.0.0"
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0"
       }
     },
     "node_modules/@vitest/expect": {
@@ -7277,9 +7347,9 @@
       }
     },
     "node_modules/@vitest/pretty-format": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.5.tgz",
-      "integrity": "sha512-4ZOwtk2bqG5Y6xRGHcveZVr+6txkH7M2e+nPFd6guSoN638v/1XQ0K06eOpi0ptVU/2tW/pIU4IoPotY/GZ9fw==",
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.8.tgz",
+      "integrity": "sha512-9HiSZ9zpqNLKlbIDRWOnAWqgcA7xu+8YxXSekhr0Ykab7PAYFkhkwoqVArPOtJhPmYeE2YHgKZlj3CP36z2AJQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7303,13 +7373,13 @@
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.5.tgz",
-      "integrity": "sha512-yfj6Yrp0Vesw2cwJbP+cl04OC+IHFsuQsrsJBL9pyGeQXE56v1UAOQco+SR55Vf1nQzfV0QJg1Qum7AaWUwwYg==",
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.8.tgz",
+      "integrity": "sha512-dwSoui6djdwbfFmIgbIjX2ZhIoG7Ex/+xpxyiEgIGzjliY8xGkcpITKTlp6B4MgtGkF2ilvm97cPM96XZaAgcA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "2.1.5",
+        "@vitest/pretty-format": "2.1.8",
         "loupe": "^3.1.2",
         "tinyrainbow": "^1.2.0"
       },
@@ -7510,6 +7580,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
       "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -8040,9 +8111,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.7.7",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
-      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
@@ -8590,17 +8661,16 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
-      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
         "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
         "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.1"
+        "set-function-length": "^1.2.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -8609,6 +8679,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz",
+      "integrity": "sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -8654,9 +8738,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001680",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz",
-      "integrity": "sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==",
+      "version": "1.0.30001687",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001687.tgz",
+      "integrity": "sha512-0S/FDhf4ZiqrTUiQ39dKeUjYRjkv7lOZU1Dgif2rIqrTzX/1wV2hfKu9TOm1IHkdSijfLswxTFzl/cvir+SLSQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -8766,9 +8850,9 @@
       }
     },
     "node_modules/chromatic": {
-      "version": "11.18.1",
-      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.18.1.tgz",
-      "integrity": "sha512-hkNT9vA6K9+PnE/khhZYBnRCOm8NonaQDs7RZ8YHFo7/lh1b/x/uFMkTjWjaj/mkM6QOR/evu5VcZMtcaauSlw==",
+      "version": "11.20.1",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.20.1.tgz",
+      "integrity": "sha512-cuuf707JDj4EeONIZkgfob4IYrhThfbAJybWmNOj89ealtKKzzlH+4pm5qhZjmXKsFrmPqTWzslbmfKsrXX6pg==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -8800,9 +8884,9 @@
       }
     },
     "node_modules/cipher-base": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.5.tgz",
-      "integrity": "sha512-xq7ICKB4TMHUx7Tz1L9O2SGKOhYMOTR32oir45Bq28/AQTpHogKgHcoYFSdRbMtddl+ozNXfXY9jWcgYKmde0w==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.6.tgz",
+      "integrity": "sha512-3Ek9H3X6pj5TgenXYtNWdaBon1tgYCaebd+XPg0keyjEbEfkD4KkmAxkQ/i1vYvxdcT5nscLBfq9VJRmCBcFSw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -9347,9 +9431,9 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
-      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -9649,9 +9733,9 @@
       }
     },
     "node_modules/dotenv": {
-      "version": "16.4.5",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
-      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "version": "16.4.7",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
+      "integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
       "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
@@ -9662,13 +9746,13 @@
       }
     },
     "node_modules/dotenv-cli": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/dotenv-cli/-/dotenv-cli-7.4.3.tgz",
-      "integrity": "sha512-lf1E+TL1xFeoOHy2hSO3kLkx3KX8CDi17ccn5z5dVCnk2PuWqUKAnBVgQmhfS0BPuzFbptTEHVcIKFsGF0NAcg==",
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/dotenv-cli/-/dotenv-cli-7.4.4.tgz",
+      "integrity": "sha512-XkBYCG0tPIes+YZr4SpfFv76SQrV/LeCE8CI7JSEMi3VR9MvTihCGTOtbIexD6i2mXF+6px7trb1imVCXSNMDw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "cross-spawn": "^7.0.3",
+        "cross-spawn": "^7.0.6",
         "dotenv": "^16.3.0",
         "dotenv-expand": "^10.0.0",
         "minimist": "^1.2.6"
@@ -9687,6 +9771,21 @@
         "node": ">=12"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.0.tgz",
+      "integrity": "sha512-9+Sj30DIu+4KvHqMfLUGLFYL2PkURSYMVXJyXe92nFRvlYq5hBjLEhblKB+vkd/WVlUYMWigiY07T91Fkk0+4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -9695,9 +9794,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.63",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.63.tgz",
-      "integrity": "sha512-ddeXKuY9BHo/mw145axlyWjlJ1UBt4WK3AlvkT7W2AbqfRQoacVoRUCF6wL3uIx/8wT9oLKXzI+rFqHHscByaA==",
+      "version": "1.5.72",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.72.tgz",
+      "integrity": "sha512-ZpSAUOZ2Izby7qnZluSrAlGgGQzucmFbN0n64dYzocYxnxV5ufurpj3VgEe4cUp7ir9LmeLxNYo8bVnlM8bQHw==",
       "dev": true,
       "license": "ISC"
     },
@@ -9872,14 +9971,11 @@
       }
     },
     "node_modules/es-define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "get-intrinsic": "^1.2.4"
-      },
       "engines": {
         "node": ">= 0.4"
       }
@@ -9967,15 +10063,15 @@
       }
     },
     "node_modules/es-to-primitive": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "is-callable": "^1.1.4",
-        "is-date-object": "^1.0.1",
-        "is-symbol": "^1.0.2"
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -10181,20 +10277,20 @@
       }
     },
     "node_modules/eslint-import-resolver-typescript": {
-      "version": "3.6.3",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.3.tgz",
-      "integrity": "sha512-ud9aw4szY9cCT1EWWdGv1L1XR6hh2PaRWif0j2QjQ0pgTY/69iw+W0Z4qZv5wHahOl8isEr+k/JnyAqNQkLkIA==",
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.7.0.tgz",
+      "integrity": "sha512-Vrwyi8HHxY97K5ebydMtffsWAn1SCR9eol49eCd5fJS4O1WV7PaAjbcjmbfJJSMz/t4Mal212Uz/fQZrOB8mow==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
         "@nolyfill/is-core-module": "1.0.39",
-        "debug": "^4.3.5",
+        "debug": "^4.3.7",
         "enhanced-resolve": "^5.15.0",
-        "eslint-module-utils": "^2.8.1",
         "fast-glob": "^3.3.2",
         "get-tsconfig": "^4.7.5",
         "is-bun-module": "^1.0.2",
-        "is-glob": "^4.0.3"
+        "is-glob": "^4.0.3",
+        "stable-hash": "^0.0.4"
       },
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
@@ -10909,21 +11005,6 @@
         "ramda": "0.29.0"
       }
     },
-    "node_modules/file-system-cache/node_modules/fs-extra": {
-      "version": "11.1.1",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
-      "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=14.14"
-      }
-    },
     "node_modules/filesize": {
       "version": "10.1.6",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.6.tgz",
@@ -11007,23 +11088,6 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
-    "node_modules/flat-cache/node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/flatted": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.2.tgz",
@@ -11135,6 +11199,21 @@
         "node": ">=10"
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -11206,9 +11285,9 @@
       }
     },
     "node_modules/fs-extra": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
-      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+      "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -11217,7 +11296,7 @@
         "universalify": "^2.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=14.14"
       }
     },
     "node_modules/fs-monkey": {
@@ -11299,17 +11378,20 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
-      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.5.tgz",
+      "integrity": "sha512-Y4+pKa7XeRUPWFNvOOYHkRYrfzW07oraURSvjDmRVOJ748OrVmeXtpE4+GCEHncjCjkTxPNRt8kEbxDhsn6VTg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "dunder-proto": "^1.0.0",
+        "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0"
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -11360,22 +11442,23 @@
       }
     },
     "node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "version": "10.3.10",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^2.3.5",
+        "minimatch": "^9.0.1",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+        "path-scurry": "^1.10.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
       },
       "engines": {
-        "node": "*"
+        "node": ">=16 || 14 >=14.17"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -11394,26 +11477,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/glob-promise": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/glob-promise/-/glob-promise-4.2.2.tgz",
-      "integrity": "sha512-xcUzJ8NWN5bktoTIX7eOclO1Npxd/dyVqUJxlLIDasT4C7KZyqlPIwkdJ0Ypiy3p2ZKahTjK4M9uC3sNSfNMzw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/glob": "^7.1.3"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://github.com/sponsors/ahmadnassri"
-      },
-      "peerDependencies": {
-        "glob": "^7.1.6"
-      }
-    },
     "node_modules/glob-to-regexp": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
@@ -11421,30 +11484,6 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
-    "node_modules/glob/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/glob/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -11482,13 +11521,13 @@
       }
     },
     "node_modules/gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "get-intrinsic": "^1.1.3"
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -11541,11 +11580,14 @@
       }
     },
     "node_modules/has-proto": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
-      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -11554,9 +11596,9 @@
       }
     },
     "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -11583,17 +11625,17 @@
       }
     },
     "node_modules/hash-base": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.0.4.tgz",
-      "integrity": "sha512-EeeoJKjTyt868liAlVmcv2ZsUfGHlE3Q+BICOXcZiwN3osr5Q/zFGYmTJpoIzuaSTAwndFy+GqhEwlU4L3j4Ow==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.0.5.tgz",
+      "integrity": "sha512-vXm0l45VbcHEVlTCzs8M+s0VeYsB2lnlAaThoLKGXr3bE/VWDOelNUnycUPEhKEaXARL2TEFjBOyUiM6+55KBg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.0.1"
+      "dependencies": {
+        "inherits": "^2.0.4",
+        "safe-buffer": "^5.2.1"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.10"
       }
     },
     "node_modules/hash.js": {
@@ -11950,13 +11992,16 @@
       }
     },
     "node_modules/is-bigint": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
-      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "has-bigints": "^1.0.1"
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -11976,14 +12021,14 @@
       }
     },
     "node_modules/is-boolean-object": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
-      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.0.tgz",
+      "integrity": "sha512-kR5g0+dXf/+kXnqI+lu0URKYPKgICtHGGNCDSB10AaUFj3o/HkB3u7WfpRBJGFopxxY0oH3ux7ZsDjLtK7xqvw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
+        "call-bind": "^1.0.7",
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -11993,9 +12038,9 @@
       }
     },
     "node_modules/is-bun-module": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-1.2.1.tgz",
-      "integrity": "sha512-AmidtEM6D6NmUiLOvvU7+IePxjEjOzra2h0pSrsfSAcXwl/83zLLXDByafUJy9k/rKK0pvXMLdwKwGHlX2Ke6Q==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-1.3.0.tgz",
+      "integrity": "sha512-DgXeu5UWI0IsMQundYb5UAOzm6G2eVnarJ0byP6Tm55iZNKceD59LNPA2L4VvsScTtHcw0yEkVwSf7PC+QoLSA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -12090,13 +12135,16 @@
       }
     },
     "node_modules/is-finalizationregistry": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz",
-      "integrity": "sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.0.tgz",
+      "integrity": "sha512-qfMdqbAQEwBw78ZyReKnlA8ezmPdb9BemzIIip/JkjaZUhitfXDkkr+3QTboW0JrSXT1QWyYShpvnNHGZ4c4yA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2"
+        "call-bind": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -12195,13 +12243,14 @@
       }
     },
     "node_modules/is-number-object": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
-      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.0.tgz",
+      "integrity": "sha512-KVSZV0Dunv9DTPkhXwcZ3Q+tUc9TsaE1ZwX5J2WMvsSGS6Md8TFPun5uwh0yRdrNerI6vf/tbJxqSx4c1ZI1Lw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "has-tostringtag": "^1.0.0"
+        "call-bind": "^1.0.7",
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -12221,14 +12270,16 @@
       }
     },
     "node_modules/is-regex": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.0.tgz",
+      "integrity": "sha512-B6ohK4ZmoftlUe+uvenXSbPJFo6U37BH7oO1B3nQH8f/7h27N56s85MhUtbFJAziz5dcmuR3i8ovUl35zp8pFA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
+        "call-bind": "^1.0.7",
+        "gopd": "^1.1.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -12267,13 +12318,14 @@
       }
     },
     "node_modules/is-string": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.0.tgz",
+      "integrity": "sha512-PlfzajuF9vSo5wErv3MJAKD/nqf9ngAs1NFQYm16nUYFO2IzxJ2hcm+IOCg+EEopdykNNUhVq5cz35cAUxU8+g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "has-tostringtag": "^1.0.0"
+        "call-bind": "^1.0.7",
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -12283,13 +12335,15 @@
       }
     },
     "node_modules/is-symbol": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.0.tgz",
+      "integrity": "sha512-qS8KkNNXUZ/I+nX6QT8ZS1/Yx0A444yhzdTKxCzKkNjQ9sHErBxJnJAgh+f5YhusYECEcjo4XcyH87hn6+ks0A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "has-symbols": "^1.0.2"
+        "call-bind": "^1.0.7",
+        "has-symbols": "^1.0.3",
+        "safe-regex-test": "^1.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -12582,6 +12636,12 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/kakao.maps.d.ts": {
+      "version": "0.1.40",
+      "resolved": "https://registry.npmjs.org/kakao.maps.d.ts/-/kakao.maps.d.ts-0.1.40.tgz",
+      "integrity": "sha512-nX69MB1ok04epe3OqS+/tEeWBbU31GSQbvDPJmQRRltzzqn6t4jBsO5v1nzalUjCKzwcH2CptOc767NZ7Hbu3g==",
+      "license": "MIT"
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -12627,13 +12687,16 @@
       }
     },
     "node_modules/lilconfig": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
       }
     },
     "node_modules/lines-and-columns": {
@@ -12712,6 +12775,12 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lottie-web": {
+      "version": "5.12.2",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==",
+      "license": "MIT"
+    },
     "node_modules/loupe": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.2.tgz",
@@ -12750,19 +12819,28 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.13",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.13.tgz",
-      "integrity": "sha512-8rYBO+MsWkgjDSOvLomYnzhdwEG51olQ4zL5KXnNJWV5MNmrb4rTZdrtkhxjnD/QyZUqR/Z/XDsUs/4ej2nx0g==",
+      "version": "0.30.15",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.15.tgz",
+      "integrity": "sha512-zXeaYRgZ6ldS1RJJUrMrYgNJ4fdwnyI6tVqoiIhyCyv5IVTK9BU8Ic2l253GGETQHxI4HNUwhJ3fjDhKqEoaAw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/magic-string/node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
       "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "semver": "^6.0.0"
       },
@@ -12795,6 +12873,7 @@
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
       "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "hash-base": "^3.0.0",
         "inherits": "^2.0.1",
@@ -12997,9 +13076,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "funding": [
         {
           "type": "github",
@@ -13079,9 +13158,9 @@
       }
     },
     "node_modules/next-auth": {
-      "version": "4.24.10",
-      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.24.10.tgz",
-      "integrity": "sha512-8NGqiRO1GXBcVfV8tbbGcUgQkAGsX4GRzzXXea4lDikAsJtD5KiEY34bfhUOjHLvr6rT6afpcxw2H8EZqOV6aQ==",
+      "version": "4.24.11",
+      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.24.11.tgz",
+      "integrity": "sha512-pCFXzIDQX7xmHFs4KVH4luCjaCbuPRtZ9oBUjUhOk84mZ9WVPf94n87TxYI4rSRf9HmfHEF8Yep3JrYDVOo3Cw==",
       "license": "ISC",
       "dependencies": {
         "@babel/runtime": "^7.20.13",
@@ -13098,8 +13177,8 @@
         "@auth/core": "0.34.2",
         "next": "^12.2.5 || ^13 || ^14 || ^15",
         "nodemailer": "^6.6.5",
-        "react": "^17.0.2 || ^18",
-        "react-dom": "^17.0.2 || ^18"
+        "react": "^17.0.2 || ^18 || ^19",
+        "react-dom": "^17.0.2 || ^18 || ^19"
       },
       "peerDependenciesMeta": {
         "@auth/core": {
@@ -13229,9 +13308,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.18",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
-      "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
       "dev": true,
       "license": "MIT"
     },
@@ -13463,9 +13542,9 @@
       }
     },
     "node_modules/openid-client": {
-      "version": "5.7.0",
-      "resolved": "https://registry.npmjs.org/openid-client/-/openid-client-5.7.0.tgz",
-      "integrity": "sha512-4GCCGZt1i2kTHpwvaC/sCpTpQqDnBzDzuJcJMbH+y1Q5qI8U8RBvoSh28svarXszZHR5BAMXbJPX1PGPRE3VOA==",
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/openid-client/-/openid-client-5.7.1.tgz",
+      "integrity": "sha512-jDBPgSVfTnkIh71Hg9pRvtJc6wTwqjRkN88+gCFtYWrlP4Yx2Dsrow8uPi3qLr/aeymPF3o2+dS+wOpglK04ew==",
       "license": "MIT",
       "dependencies": {
         "jose": "^4.15.9",
@@ -13562,13 +13641,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/package-json-from-dist": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
-      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0"
-    },
     "node_modules/pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
@@ -14000,76 +14072,27 @@
         }
       }
     },
-    "node_modules/postcss-load-config/node_modules/lilconfig": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
-      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
-    },
     "node_modules/postcss-loader": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-8.1.1.tgz",
-      "integrity": "sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==",
+      "version": "7.3.4",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.4.tgz",
+      "integrity": "sha512-iW5WTTBSC5BfsBJ9daFMPVrLT36MrNiC6fqOZTTaHjBNX6Pfd5p+hSBqe/fEeNd7pc13QiAyGt7VdGMw4eRC4A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "cosmiconfig": "^9.0.0",
+        "cosmiconfig": "^8.3.5",
         "jiti": "^1.20.0",
         "semver": "^7.5.4"
       },
       "engines": {
-        "node": ">= 18.12.0"
+        "node": ">= 14.15.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/webpack"
       },
       "peerDependencies": {
-        "@rspack/core": "0.x || 1.x",
         "postcss": "^7.0.0 || ^8.0.1",
         "webpack": "^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@rspack/core": {
-          "optional": true
-        },
-        "webpack": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/postcss-loader/node_modules/cosmiconfig": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
-      "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "env-paths": "^2.2.1",
-        "import-fresh": "^3.3.0",
-        "js-yaml": "^4.1.0",
-        "parse-json": "^5.2.0"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/d-fischer"
-      },
-      "peerDependencies": {
-        "typescript": ">=4.9.5"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
       }
     },
     "node_modules/postcss-modules-extract-imports": {
@@ -14197,9 +14220,9 @@
       "license": "MIT"
     },
     "node_modules/preact": {
-      "version": "10.24.3",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.3.tgz",
-      "integrity": "sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==",
+      "version": "10.25.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.25.1.tgz",
+      "integrity": "sha512-frxeZV2vhQSohQwJ7FvlqC40ze89+8friponWUFeVEkaCfhC6Eu4V0iND5C9CXz8JLndV07QRDeXzH1+Anz5Og==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -14235,9 +14258,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
+      "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
       "license": "MIT",
       "bin": {
         "prettier": "bin/prettier.cjs"
@@ -14385,6 +14408,7 @@
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
       "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6.0"
       }
@@ -14393,7 +14417,8 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/prop-types": {
       "version": "15.8.1",
@@ -14648,9 +14673,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.53.2",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.2.tgz",
-      "integrity": "sha512-YVel6fW5sOeedd1524pltpHX+jgU2u3DSDtXEaBORNdqiNrsX/nUI/iGXONegttg0mJVnfrIkiV0cmTU6Oo2xw==",
+      "version": "7.54.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.0.tgz",
+      "integrity": "sha512-PS05+UQy/IdSbJNojBypxAo9wllhHgGmyr8/dyGQcPoiMf3e7Dfb9PWYVRco55bLbxH9S+1yDDJeTdlYCSxO3A==",
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
@@ -14680,14 +14705,29 @@
       }
     },
     "node_modules/react-icons": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
-      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz",
+      "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==",
       "license": "MIT",
       "peerDependencies": {
         "react": "*"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.13.1.tgz",
+      "integrity": "sha512-tSzDaTy0qwNPLJHg8XZhlyHTgGW6drFKTtvjdL+p6um12rcnp8Z5XstE+QNBJ7c64n5o0Lj4ilUleA41bmDoMw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -14695,6 +14735,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-kakao-maps-sdk": {
+      "version": "1.1.27",
+      "resolved": "https://registry.npmjs.org/react-kakao-maps-sdk/-/react-kakao-maps-sdk-1.1.27.tgz",
+      "integrity": "sha512-1EwYkYsjTDRFqysKStDasFMrFTXcLx2AyRlqMoWD7ONWhRqpjx9M874hkhEEHrnypP2eSIhhDLe0EiSKp3bd2Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.15",
+        "kakao.maps.d.ts": "^0.1.39"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
+      }
+    },
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -14921,19 +14974,20 @@
       }
     },
     "node_modules/reflect.getprototypeof": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
-      "integrity": "sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.8.tgz",
+      "integrity": "sha512-B5dj6usc5dkk8uFliwjwDHM8To5/QwdKz9JcBZ8Ic4G1f0YmeeJTtE/ZTdgRFPAfxZFiUaPhZ1Jcs4qeagItGQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.1",
+        "dunder-proto": "^1.0.0",
+        "es-abstract": "^1.23.5",
         "es-errors": "^1.3.0",
         "get-intrinsic": "^1.2.4",
-        "globalthis": "^1.0.3",
-        "which-builtin-type": "^1.1.3"
+        "gopd": "^1.2.0",
+        "which-builtin-type": "^1.2.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -15005,16 +15059,16 @@
       }
     },
     "node_modules/regexpu-core": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.1.1.tgz",
-      "integrity": "sha512-k67Nb9jvwJcJmVpw0jPttR1/zVfnKf8Km0IPatrU/zJ5XeG3+Slx0xLXs9HByJSzXzrlz5EDvN6yLNMDc2qdnw==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.2.0.tgz",
+      "integrity": "sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "regenerate": "^1.4.2",
         "regenerate-unicode-properties": "^10.2.0",
         "regjsgen": "^0.8.0",
-        "regjsparser": "^0.11.0",
+        "regjsparser": "^0.12.0",
         "unicode-match-property-ecmascript": "^2.0.0",
         "unicode-match-property-value-ecmascript": "^2.1.0"
       },
@@ -15030,9 +15084,9 @@
       "license": "MIT"
     },
     "node_modules/regjsparser": {
-      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.11.2.tgz",
-      "integrity": "sha512-3OGZZ4HoLJkkAZx/48mTXJNlmqTGOzc0o9OWQPuWpkOlXXPbyN6OafCcoXUnBqE2D3f/T5L+pWc1kdEmnfnRsA==",
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.12.0.tgz",
+      "integrity": "sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -15187,6 +15241,69 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rimraf/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/rimraf/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rimraf/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ripemd160": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
@@ -15199,9 +15316,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.27.3",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.27.3.tgz",
-      "integrity": "sha512-SLsCOnlmGt9VoZ9Ek8yBK8tAdmPHeppkw+Xa7yDlCEhDTvwYei03JlWo1fdc7YTfLZ4tD8riJCUyAgTbszk1fQ==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.28.1.tgz",
+      "integrity": "sha512-61fXYl/qNVinKmGSTHAZ6Yy8I3YIJC/r2m9feHo6SwVAVcLT5MPwOUFe7EuURA/4m0NR8lXG4BBXuo/IZEsjMg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -15215,24 +15332,25 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.27.3",
-        "@rollup/rollup-android-arm64": "4.27.3",
-        "@rollup/rollup-darwin-arm64": "4.27.3",
-        "@rollup/rollup-darwin-x64": "4.27.3",
-        "@rollup/rollup-freebsd-arm64": "4.27.3",
-        "@rollup/rollup-freebsd-x64": "4.27.3",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.27.3",
-        "@rollup/rollup-linux-arm-musleabihf": "4.27.3",
-        "@rollup/rollup-linux-arm64-gnu": "4.27.3",
-        "@rollup/rollup-linux-arm64-musl": "4.27.3",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.27.3",
-        "@rollup/rollup-linux-riscv64-gnu": "4.27.3",
-        "@rollup/rollup-linux-s390x-gnu": "4.27.3",
-        "@rollup/rollup-linux-x64-gnu": "4.27.3",
-        "@rollup/rollup-linux-x64-musl": "4.27.3",
-        "@rollup/rollup-win32-arm64-msvc": "4.27.3",
-        "@rollup/rollup-win32-ia32-msvc": "4.27.3",
-        "@rollup/rollup-win32-x64-msvc": "4.27.3",
+        "@rollup/rollup-android-arm-eabi": "4.28.1",
+        "@rollup/rollup-android-arm64": "4.28.1",
+        "@rollup/rollup-darwin-arm64": "4.28.1",
+        "@rollup/rollup-darwin-x64": "4.28.1",
+        "@rollup/rollup-freebsd-arm64": "4.28.1",
+        "@rollup/rollup-freebsd-x64": "4.28.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.28.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.28.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.28.1",
+        "@rollup/rollup-linux-arm64-musl": "4.28.1",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.28.1",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.28.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.28.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.28.1",
+        "@rollup/rollup-linux-x64-gnu": "4.28.1",
+        "@rollup/rollup-linux-x64-musl": "4.28.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.28.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.28.1",
+        "@rollup/rollup-win32-x64-msvc": "4.28.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -15666,6 +15784,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stable-hash": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.4.tgz",
+      "integrity": "sha512-LjdcbuBeLcdETCrPn9i8AYAZ1eCtu4ECAWtP7UleOiZ9LzVxRzzUZEoZ8zB24nhkQnDWyET0I+3sWokSDS3E7g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/stackframe": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
@@ -15681,13 +15806,13 @@
       "license": "MIT"
     },
     "node_modules/storybook": {
-      "version": "8.4.5",
-      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.4.5.tgz",
-      "integrity": "sha512-9tfgabXnMibYp3SvoaJXXMD63Pw0SA9Hnf5v6TxysCYZs4DZ/04fAkK+9RW+K4C5JkV83qXMMlrsPj766R47fg==",
+      "version": "8.4.7",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.4.7.tgz",
+      "integrity": "sha512-RP/nMJxiWyFc8EVMH5gp20ID032Wvk+Yr3lmKidoegto5Iy+2dVQnUoElZb2zpbVXNHWakGuAkfI0dY1Hfp/vw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@storybook/core": "8.4.5"
+        "@storybook/core": "8.4.7"
       },
       "bin": {
         "getstorybook": "bin/index.cjs",
@@ -16094,43 +16219,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/sucrase/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/sucrase/node_modules/jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -16294,9 +16382,9 @@
       "license": "MIT"
     },
     "node_modules/tailwind-merge": {
-      "version": "2.5.4",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.4.tgz",
-      "integrity": "sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==",
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.5.tgz",
+      "integrity": "sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -16304,9 +16392,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.15",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.15.tgz",
-      "integrity": "sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==",
+      "version": "3.4.16",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.16.tgz",
+      "integrity": "sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -16319,7 +16407,7 @@
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
         "jiti": "^1.21.6",
-        "lilconfig": "^2.1.0",
+        "lilconfig": "^3.1.3",
         "micromatch": "^4.0.8",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
@@ -16386,9 +16474,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.36.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.36.0.tgz",
-      "integrity": "sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w==",
+      "version": "5.37.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.37.0.tgz",
+      "integrity": "sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -16549,9 +16637,9 @@
       }
     },
     "node_modules/ts-api-utils": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.0.tgz",
-      "integrity": "sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
+      "integrity": "sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -16706,9 +16794,9 @@
       }
     },
     "node_modules/typed-array-byte-offset": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz",
-      "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.3.tgz",
+      "integrity": "sha512-GsvTyUHTriq6o/bHcTd0vM7OQ9JEdlvluu9YISaA7+KzDzPaIzEeDFNkTfhdE3MYcNhNi0vq/LlegYgIs5yPAw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -16717,7 +16805,8 @@
         "for-each": "^0.3.3",
         "gopd": "^1.0.1",
         "has-proto": "^1.0.3",
-        "is-typed-array": "^1.1.13"
+        "is-typed-array": "^1.1.13",
+        "reflect.getprototypeof": "^1.0.6"
       },
       "engines": {
         "node": ">= 0.4"
@@ -16727,18 +16816,18 @@
       }
     },
     "node_modules/typed-array-length": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz",
-      "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
         "gopd": "^1.0.1",
-        "has-proto": "^1.0.3",
         "is-typed-array": "^1.1.13",
-        "possible-typed-array-names": "^1.0.0"
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
       },
       "engines": {
         "node": ">= 0.4"
@@ -16748,9 +16837,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.6.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
-      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
+      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -17536,17 +17625,17 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.96.1",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.96.1.tgz",
-      "integrity": "sha512-l2LlBSvVZGhL4ZrPwyr8+37AunkcYj5qh8o6u2/2rzoPc8gxFJkLj1WxNgooi9pnoc06jh0BjuXnamM4qlujZA==",
+      "version": "5.97.1",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.97.1.tgz",
+      "integrity": "sha512-EksG6gFY3L1eFMROS/7Wzgrii5mBAFe4rIr3r2BTfo7bcc+DWwFZ4OJ/miOuHJO/A85HwyI4eQ0F6IKXesO7Fg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.6",
-        "@webassemblyjs/ast": "^1.12.1",
-        "@webassemblyjs/wasm-edit": "^1.12.1",
-        "@webassemblyjs/wasm-parser": "^1.12.1",
+        "@webassemblyjs/ast": "^1.14.1",
+        "@webassemblyjs/wasm-edit": "^1.14.1",
+        "@webassemblyjs/wasm-parser": "^1.14.1",
         "acorn": "^8.14.0",
         "browserslist": "^4.24.0",
         "chrome-trace-event": "^1.0.2",
@@ -17713,34 +17802,38 @@
       }
     },
     "node_modules/which-boxed-primitive": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
-      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.0.tgz",
+      "integrity": "sha512-Ei7Miu/AXe2JJ4iNF5j/UphAgRoma4trE6PtisM09bPygb3egMH3YLW/befsWb1A1AxvNSFidOFTB18XtnIIng==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "is-bigint": "^1.0.1",
-        "is-boolean-object": "^1.1.0",
-        "is-number-object": "^1.0.4",
-        "is-string": "^1.0.5",
-        "is-symbol": "^1.0.3"
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.0",
+        "is-number-object": "^1.1.0",
+        "is-string": "^1.1.0",
+        "is-symbol": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/which-builtin-type": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.1.4.tgz",
-      "integrity": "sha512-bppkmBSsHFmIMSl8BO9TbsyzsvGjVoppt8xUiGzwiu/bhDCGxnpOKCxgqj6GuyHE0mINMDecBFPlOm2hzY084w==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.0.tgz",
+      "integrity": "sha512-I+qLGQ/vucCby4tf5HsLmGueEla4ZhwTBSqaooS+Y0BuxN4Cp+okmGuV+8mXZ84KDI9BA+oklo+RzKg0ONdSUA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
+        "call-bind": "^1.0.7",
         "function.prototype.name": "^1.1.6",
         "has-tostringtag": "^1.0.2",
         "is-async-function": "^2.0.0",
         "is-date-object": "^1.0.5",
-        "is-finalizationregistry": "^1.0.2",
+        "is-finalizationregistry": "^1.1.0",
         "is-generator-function": "^1.0.10",
         "is-regex": "^1.1.4",
         "is-weakref": "^1.0.2",
@@ -17776,9 +17869,9 @@
       }
     },
     "node_modules/which-typed-array": {
-      "version": "1.1.15",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
-      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.16.tgz",
+      "integrity": "sha512-g+N+GAWiRj66DngFwHvISJd+ITsyphZvD1vChfVg6cEdnzy53GzB3oy0fUNlvhz7H7+MiqhYr26qxQShCpKTTQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -17963,18 +18056,18 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.23.8",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
-      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz",
+      "integrity": "sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
     },
     "node_modules/zustand": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.1.tgz",
-      "integrity": "sha512-pRET7Lao2z+n5R/HduXMio35TncTlSW68WsYBq2Lg1ASspsNGjpwLAsij3RpouyV6+kHMwwwzP0bZPD70/Jx/w==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.2.tgz",
+      "integrity": "sha512-8qNdnJVJlHlrKXi50LDqqUNmUbuBjoKLrYQBnoChIbVph7vni+sY+YpvdjXG9YLd/Bxr6scMcR+rm5H3aSqPaw==",
       "license": "MIT",
       "engines": {
         "node": ">=12.20.0"
diff --git a/package.json b/package.json
index b20c6546..ce8baade 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
+    "@lottiefiles/react-lottie-player": "^3.5.4",
     "@tanstack/react-query": "^5.59.19",
     "axios": "^1.7.7",
     "date-fns": "^4.1.0",
@@ -22,11 +23,13 @@
     "next-auth": "^4.24.10",
     "prettier": "^3.3.3",
     "react": "^18",
-    "react-datepicker": "^7.4.0",
+    "react-datepicker": "^7.5.0",
     "react-dom": "^18",
     "react-hook-form": "^7.53.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
+    "react-intersection-observer": "^9.13.1",
+    "react-kakao-maps-sdk": "^1.1.27",
     "react-modal": "^3.16.1",
     "react-spinners": "^0.14.1",
     "tailwind-merge": "^2.5.4",
@@ -35,8 +38,11 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
+    "@jridgewell/gen-mapping": "^0.3.7",
+    "@jridgewell/source-map": "^0.3.6",
     "@storybook/addon-essentials": "^8.4.4",
     "@storybook/addon-interactions": "^8.4.4",
+    "@storybook/addon-links": "^8.4.7",
     "@storybook/addon-onboarding": "^8.4.4",
     "@storybook/addon-styling": "^2.0.0",
     "@storybook/blocks": "^8.4.4",
@@ -49,18 +55,20 @@
     "@tanstack/react-query-devtools": "^5.59.20",
     "@types/node": "^20",
     "@types/react": "^18.3.11",
+    "@types/react-datepicker": "^6.2.0",
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^8.9.0",
     "@typescript-eslint/parser": "^8.9.0",
     "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
-    "chromatic": "^11.18.1",
+    "chromatic": "^11.20.0",
     "dotenv-cli": "^7.4.3",
     "eslint": "^8.57.1",
     "eslint-config-next": "14.2.15",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-storybook": "^0.11.0",
+    "kakao.maps.d.ts": "^0.1.40",
     "postcss": "^8.4.47",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "storybook": "^8.4.4",
diff --git a/public/404.json b/public/404.json
new file mode 100644
index 00000000..4feba3b0
--- /dev/null
+++ b/public/404.json
@@ -0,0 +1,7825 @@
+{
+  "v": "4.8.0",
+  "meta": { "g": "LottieFiles AE 3.2.2", "a": "", "k": "", "d": "", "tc": "" },
+  "fr": 60,
+  "ip": 0,
+  "op": 361,
+  "w": 373,
+  "h": 162,
+  "nm": "404",
+  "ddd": 0,
+  "assets": [],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 1,
+      "ty": 3,
+      "nm": "0",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 0, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": {
+          "a": 1,
+          "k": [
+            {
+              "i": { "x": 0.833, "y": 0.833 },
+              "o": { "x": 0.167, "y": 0.167 },
+              "t": 0,
+              "s": [186.5, 81, 0],
+              "to": [0, -1.5, 0],
+              "ti": [0, 0, 0]
+            },
+            {
+              "i": { "x": 0.833, "y": 0.833 },
+              "o": { "x": 0.167, "y": 0.167 },
+              "t": 180,
+              "s": [186.5, 72, 0],
+              "to": [0, 0, 0],
+              "ti": [0, -1.5, 0]
+            },
+            { "t": 360, "s": [186.5, 81, 0] }
+          ],
+          "ix": 2
+        },
+        "a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
+        "s": { "a": 0, "k": [47, 47, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 2,
+      "ty": 4,
+      "nm": "Path 60",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [330.64, 70.289, 0], "ix": 2 },
+        "a": { "a": 0, "k": [40.651, 70.21, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0.018],
+                    [0, 0],
+                    [0, 0.006],
+                    [0.004, 0.017],
+                    [0.004, 0.021],
+                    [0.007, 0.017],
+                    [0.003, 0.007],
+                    [0.003, 0.007],
+                    [0.013, 0.014],
+                    [0.014, 0.013],
+                    [0.017, 0.011],
+                    [0.011, 0.004],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0.007],
+                    [0.003, 0.017],
+                    [0.003, 0.021],
+                    [0.007, 0.017],
+                    [0.004, 0.006],
+                    [0.004, 0.007],
+                    [0.014, 0.014],
+                    [0.014, 0.014],
+                    [0.017, 0.01],
+                    [0.01, 0.003],
+                    [0, 0],
+                    [0.017, 0.007],
+                    [0.027, 0.003],
+                    [0.028, 0],
+                    [0.024, -0.007],
+                    [0.031, -0.01],
+                    [0.013, -0.01],
+                    [0, 0],
+                    [0, 0],
+                    [-0.003, 0.014],
+                    [-0.004, 0.028],
+                    [0, 0.014],
+                    [0, 0.017],
+                    [0.007, 0.024],
+                    [0.007, 0.014],
+                    [0.007, 0.018],
+                    [0.007, 0.014],
+                    [0.004, 0.007],
+                    [0.006, 0.01],
+                    [0.017, 0.013],
+                    [0.021, 0.013],
+                    [0.01, 0.003],
+                    [0, 0],
+                    [0.017, 0.007],
+                    [0.027, 0.003],
+                    [0.024, 0],
+                    [0.024, -0.007],
+                    [0.028, -0.01],
+                    [0.017, -0.01],
+                    [0, 0],
+                    [0.01, -0.003],
+                    [0.01, -0.01],
+                    [0.013, -0.017],
+                    [0.013, -0.024],
+                    [0.004, -0.01],
+                    [0.003, -0.004],
+                    [0.004, -0.003],
+                    [0, 0],
+                    [0.003, -0.003],
+                    [0.007, -0.027],
+                    [0, -0.028],
+                    [0, -0.003],
+                    [0, 0],
+                    [-0.003, -0.017],
+                    [-0.01, -0.027],
+                    [-0.013, -0.024],
+                    [-0.017, -0.02],
+                    [-0.024, -0.018],
+                    [-0.017, -0.007],
+                    [0, 0],
+                    [0, 0],
+                    [-0.003, -0.017],
+                    [-0.01, -0.028],
+                    [-0.014, -0.024],
+                    [-0.017, -0.024],
+                    [-0.024, -0.018],
+                    [-0.018, -0.007],
+                    [0, 0],
+                    [-0.011, -0.007],
+                    [-0.014, -0.004],
+                    [-0.003, -0.003],
+                    [-0.044, 0],
+                    [-0.045, 0.014],
+                    [-0.003, 0.003],
+                    [-0.01, 0.007],
+                    [-0.01, 0.007],
+                    [0, 0],
+                    [-0.014, 0.01],
+                    [-0.02, 0.024],
+                    [-0.014, 0.024],
+                    [-0.007, 0.024],
+                    [-0.003, 0.03],
+                    [0, 0.017],
+                    [0, 0],
+                    [0, 0],
+                    [-0.014, 0.01],
+                    [-0.02, 0.024],
+                    [-0.014, 0.024],
+                    [-0.007, 0.024],
+                    [-0.003, 0.031]
+                  ],
+                  "o": [
+                    [0, -0.017],
+                    [0, 0],
+                    [0, 0],
+                    [0, -0.021],
+                    [-0.003, -0.021],
+                    [-0.006, -0.017],
+                    [-0.004, -0.007],
+                    [-0.003, -0.007],
+                    [-0.01, -0.017],
+                    [-0.014, -0.014],
+                    [-0.013, -0.014],
+                    [-0.007, -0.003],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, -0.02],
+                    [-0.004, -0.02],
+                    [-0.007, -0.017],
+                    [-0.003, -0.007],
+                    [-0.003, -0.007],
+                    [-0.01, -0.017],
+                    [-0.014, -0.013],
+                    [-0.014, -0.013],
+                    [-0.007, -0.003],
+                    [0, 0],
+                    [0, 0],
+                    [-0.028, -0.01],
+                    [-0.028, -0.007],
+                    [-0.027, 0],
+                    [-0.03, 0.007],
+                    [-0.017, 0.007],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.011, -0.024],
+                    [0, -0.013],
+                    [0, -0.017],
+                    [0, -0.024],
+                    [0, -0.014],
+                    [-0.007, -0.017],
+                    [-0.007, -0.013],
+                    [-0.003, -0.007],
+                    [-0.007, -0.011],
+                    [-0.014, -0.014],
+                    [-0.017, -0.017],
+                    [-0.007, -0.004],
+                    [0, 0],
+                    [0, 0],
+                    [-0.028, -0.01],
+                    [-0.028, -0.007],
+                    [-0.028, 0],
+                    [-0.031, 0.007],
+                    [-0.017, 0.007],
+                    [0, 0],
+                    [0, 0],
+                    [-0.011, 0.007],
+                    [-0.014, 0.014],
+                    [-0.018, 0.018],
+                    [-0.004, 0.007],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.014, 0.027],
+                    [-0.007, 0.028],
+                    [0, 0.006],
+                    [0, 0],
+                    [0, 0.017],
+                    [0.003, 0.031],
+                    [0.01, 0.027],
+                    [0.014, 0.024],
+                    [0.021, 0.024],
+                    [0.014, 0.01],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0.017],
+                    [0.004, 0.031],
+                    [0.011, 0.027],
+                    [0.013, 0.024],
+                    [0.021, 0.024],
+                    [0.014, 0.01],
+                    [0, 0],
+                    [0.01, 0.007],
+                    [0.01, 0.007],
+                    [0.003, 0],
+                    [0.045, 0.014],
+                    [0.045, 0],
+                    [0.003, 0],
+                    [0.01, -0.004],
+                    [0.011, -0.003],
+                    [0, 0],
+                    [0, 0],
+                    [0.024, -0.017],
+                    [0.017, -0.021],
+                    [0.014, -0.024],
+                    [0.01, -0.027],
+                    [0, -0.018],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.024, -0.018],
+                    [0.017, -0.02],
+                    [0.014, -0.024],
+                    [0.01, -0.028],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [81.292, 119.048],
+                    [81.302, 118.996],
+                    [81.302, 98.036],
+                    [81.299, 98.012],
+                    [81.292, 97.957],
+                    [81.278, 97.898],
+                    [81.258, 97.847],
+                    [81.251, 97.823],
+                    [81.234, 97.802],
+                    [81.2, 97.758],
+                    [81.158, 97.717],
+                    [81.114, 97.682],
+                    [81.093, 97.665],
+                    [73.471, 93.263],
+                    [73.471, 64.295],
+                    [73.467, 64.271],
+                    [73.461, 64.216],
+                    [73.447, 64.158],
+                    [73.426, 64.107],
+                    [73.419, 64.083],
+                    [73.402, 64.062],
+                    [73.368, 64.017],
+                    [73.327, 63.976],
+                    [73.282, 63.942],
+                    [73.262, 63.925],
+                    [54.423, 53.048],
+                    [54.372, 53.031],
+                    [54.29, 53.004],
+                    [54.207, 52.997],
+                    [54.128, 53.004],
+                    [54.043, 53.031],
+                    [53.995, 53.048],
+                    [42.844, 59.484],
+                    [66.349, 12.923],
+                    [66.359, 12.882],
+                    [66.38, 12.81],
+                    [66.387, 12.769],
+                    [66.387, 12.718],
+                    [66.38, 12.649],
+                    [66.373, 12.608],
+                    [66.349, 12.556],
+                    [66.335, 12.515],
+                    [66.318, 12.495],
+                    [66.298, 12.464],
+                    [66.253, 12.423],
+                    [66.198, 12.375],
+                    [66.178, 12.358],
+                    [44.853, 0.051],
+                    [44.802, 0.034],
+                    [44.72, 0.007],
+                    [44.641, 0],
+                    [44.562, 0.007],
+                    [44.479, 0.034],
+                    [44.428, 0.051],
+                    [31.014, 7.797],
+                    [30.994, 7.814],
+                    [30.963, 7.835],
+                    [30.922, 7.879],
+                    [30.874, 7.938],
+                    [30.856, 7.958],
+                    [30.853, 7.969],
+                    [30.846, 7.975],
+                    [0.044, 67.837],
+                    [0.041, 67.851],
+                    [0.017, 67.933],
+                    [0, 68.016],
+                    [0, 68.029],
+                    [0, 88.037],
+                    [0.01, 88.088],
+                    [0.027, 88.174],
+                    [0.061, 88.246],
+                    [0.106, 88.311],
+                    [0.171, 88.37],
+                    [0.212, 88.404],
+                    [40.358, 111.583],
+                    [40.358, 129.119],
+                    [40.368, 129.17],
+                    [40.385, 129.256],
+                    [40.42, 129.328],
+                    [40.464, 129.396],
+                    [40.529, 129.455],
+                    [40.571, 129.489],
+                    [59.409, 140.365],
+                    [59.44, 140.379],
+                    [59.474, 140.393],
+                    [59.484, 140.396],
+                    [59.621, 140.42],
+                    [59.759, 140.396],
+                    [59.769, 140.393],
+                    [59.803, 140.379],
+                    [59.834, 140.365],
+                    [73.248, 132.619],
+                    [73.289, 132.585],
+                    [73.354, 132.527],
+                    [73.399, 132.458],
+                    [73.433, 132.386],
+                    [73.45, 132.301],
+                    [73.461, 132.249],
+                    [73.461, 123.763],
+                    [81.083, 119.36],
+                    [81.124, 119.326],
+                    [81.189, 119.267],
+                    [81.234, 119.199],
+                    [81.268, 119.127],
+                    [81.285, 119.041]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 1,
+              "ty": "sh",
+              "ix": 2,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.01, -0.004],
+                    [-0.014, -0.004],
+                    [-0.007, -0.004],
+                    [-0.042, 0],
+                    [-0.045, 0.017],
+                    [-0.003, 0.003],
+                    [-0.01, 0.007],
+                    [-0.01, 0.007],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.01, 0.007],
+                    [0.01, 0.007],
+                    [0.007, 0],
+                    [0.041, 0.014],
+                    [0.048, 0],
+                    [0, 0],
+                    [0.01, -0.004],
+                    [0.011, -0.004],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [72.607, 132.006],
+                    [60.05, 139.258],
+                    [60.05, 122.96],
+                    [67.244, 127.116],
+                    [67.275, 127.13],
+                    [67.309, 127.144],
+                    [67.333, 127.154],
+                    [67.457, 127.174],
+                    [67.594, 127.147],
+                    [67.604, 127.144],
+                    [67.638, 127.13],
+                    [67.669, 127.116],
+                    [72.603, 124.267],
+                    [72.603, 132.009]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 2",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 2,
+              "ty": "sh",
+              "ix": 3,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0.01, 0.028],
+                    [0.013, 0.024],
+                    [0.017, 0.021],
+                    [0.024, 0.017],
+                    [0.017, 0.007],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.003, -0.014],
+                    [0.003, -0.028],
+                    [0, -0.014],
+                    [0, -0.017],
+                    [-0.007, -0.024],
+                    [-0.007, -0.014],
+                    [-0.007, -0.017],
+                    [-0.007, -0.013],
+                    [-0.007, -0.01],
+                    [-0.007, -0.007],
+                    [-0.006, -0.006],
+                    [-0.034, -0.024],
+                    [-0.004, -0.003],
+                    [0, 0],
+                    [-0.01, -0.007],
+                    [-0.01, -0.003],
+                    [-0.052, 0],
+                    [-0.048, 0.018],
+                    [-0.01, 0.007],
+                    [-0.034, 0.038],
+                    [-0.004, 0.003],
+                    [-0.017, 0.031],
+                    [-0.004, 0.007],
+                    [-0.007, 0.028],
+                    [0, 0.031],
+                    [0, 0.007],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, -0.007],
+                    [-0.003, -0.017],
+                    [-0.003, -0.021],
+                    [-0.007, -0.017],
+                    [-0.003, -0.007],
+                    [-0.007, -0.011],
+                    [-0.01, -0.01],
+                    [-0.007, -0.006],
+                    [-0.003, -0.003],
+                    [-0.027, -0.021],
+                    [-0.004, -0.003],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.007, 0.003],
+                    [0.028, 0.007],
+                    [0.027, 0.004],
+                    [0.007, 0],
+                    [0.017, -0.003],
+                    [0.031, -0.01],
+                    [0.024, -0.014],
+                    [0.02, -0.017],
+                    [0.017, -0.024],
+                    [0.01, -0.014],
+                    [0.004, -0.007],
+                    [0.007, -0.027],
+                    [0.003, -0.028],
+                    [0, -0.007],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.004, 0.017]
+                  ],
+                  "o": [
+                    [-0.003, -0.031],
+                    [-0.01, -0.027],
+                    [-0.014, -0.024],
+                    [-0.021, -0.024],
+                    [-0.014, -0.011],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.011, 0.024],
+                    [0, 0.013],
+                    [0, 0.017],
+                    [0, 0.024],
+                    [0, 0.013],
+                    [0.007, 0.017],
+                    [0.007, 0.014],
+                    [0.006, 0.011],
+                    [0.007, 0.007],
+                    [0.007, 0.007],
+                    [0.028, 0.031],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.01, 0.007],
+                    [0.048, 0.018],
+                    [0.051, 0],
+                    [0.01, -0.003],
+                    [0.045, -0.021],
+                    [0, 0],
+                    [0.024, -0.024],
+                    [0.003, -0.007],
+                    [0.014, -0.024],
+                    [0.007, -0.027],
+                    [0, -0.011],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0.02],
+                    [0.004, 0.021],
+                    [0.007, 0.017],
+                    [0.003, 0.007],
+                    [0.007, 0.01],
+                    [0.007, 0.01],
+                    [0.007, 0.007],
+                    [0, 0],
+                    [0.024, 0.024],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.027, -0.014],
+                    [-0.027, -0.006],
+                    [-0.01, 0],
+                    [-0.017, 0],
+                    [-0.031, 0.004],
+                    [-0.024, 0.011],
+                    [-0.024, 0.013],
+                    [-0.024, 0.021],
+                    [-0.01, 0.014],
+                    [-0.003, 0.007],
+                    [-0.014, 0.027],
+                    [-0.007, 0.028],
+                    [0, 0.01],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, -0.017],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [41.198, 111.285],
+                    [41.181, 111.199],
+                    [41.147, 111.127],
+                    [41.102, 111.062],
+                    [41.037, 111.004],
+                    [40.996, 110.969],
+                    [0.85, 87.79],
+                    [0.85, 68.136],
+                    [31.398, 8.768],
+                    [51.972, 20.645],
+                    [22.178, 79.67],
+                    [22.168, 79.712],
+                    [22.147, 79.784],
+                    [22.14, 79.825],
+                    [22.14, 79.876],
+                    [22.147, 79.945],
+                    [22.154, 79.986],
+                    [22.178, 80.037],
+                    [22.192, 80.078],
+                    [22.212, 80.106],
+                    [22.229, 80.13],
+                    [22.246, 80.15],
+                    [22.342, 80.233],
+                    [22.346, 80.236],
+                    [40.567, 90.756],
+                    [40.598, 90.77],
+                    [40.632, 90.783],
+                    [40.78, 90.814],
+                    [40.927, 90.783],
+                    [40.961, 90.77],
+                    [41.081, 90.687],
+                    [41.085, 90.681],
+                    [41.15, 90.598],
+                    [41.157, 90.574],
+                    [41.184, 90.495],
+                    [41.201, 90.41],
+                    [41.205, 90.386],
+                    [41.205, 61.912],
+                    [59.186, 72.295],
+                    [59.186, 101.266],
+                    [59.189, 101.29],
+                    [59.196, 101.344],
+                    [59.21, 101.403],
+                    [59.231, 101.454],
+                    [59.237, 101.478],
+                    [59.258, 101.506],
+                    [59.282, 101.536],
+                    [59.303, 101.56],
+                    [59.306, 101.567],
+                    [59.388, 101.633],
+                    [59.392, 101.636],
+                    [67.014, 106.039],
+                    [67.014, 126.009],
+                    [59.82, 121.853],
+                    [59.796, 121.846],
+                    [59.714, 121.818],
+                    [59.632, 121.801],
+                    [59.608, 121.798],
+                    [59.556, 121.808],
+                    [59.467, 121.825],
+                    [59.395, 121.86],
+                    [59.327, 121.904],
+                    [59.268, 121.969],
+                    [59.234, 122.007],
+                    [59.227, 122.031],
+                    [59.2, 122.113],
+                    [59.183, 122.196],
+                    [59.176, 122.22],
+                    [59.176, 139.261],
+                    [41.195, 128.879],
+                    [41.195, 111.343],
+                    [41.184, 111.292]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 3",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 3,
+              "ty": "sh",
+              "ix": 4,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [44.641, 0.915],
+                    [65.097, 12.725],
+                    [52.541, 19.977],
+                    [32.084, 8.168]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 4",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 4,
+              "ty": "sh",
+              "ix": 5,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [54.197, 53.909],
+                    [72.178, 64.292],
+                    [59.621, 71.544],
+                    [41.64, 61.161],
+                    [42.018, 60.942],
+                    [42.024, 60.942],
+                    [42.024, 60.938]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 5",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 5,
+              "ty": "sh",
+              "ix": 6,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [67.46, 105.284],
+                    [60.479, 101.255],
+                    [73.035, 94.003],
+                    [80.017, 98.032],
+                    [67.457, 105.284]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 6",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 6,
+              "ty": "sh",
+              "ix": 7,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [72.61, 93.259],
+                    [60.054, 100.511],
+                    [60.054, 72.285],
+                    [72.61, 65.032]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 7",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 7,
+              "ty": "sh",
+              "ix": 8,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [23.419, 79.856],
+                    [35.976, 72.603],
+                    [40.351, 75.131],
+                    [40.351, 89.631],
+                    [23.416, 79.856]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 8",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 8,
+              "ty": "sh",
+              "ix": 9,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [40.355, 74.143],
+                    [36.545, 71.942],
+                    [40.355, 64.391],
+                    [40.355, 74.14]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 9",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 9,
+              "ty": "sh",
+              "ix": 10,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0.006, -0.004],
+                    [0.014, -0.014],
+                    [0.014, -0.014],
+                    [0.01, -0.018],
+                    [0.004, -0.01],
+                    [0.003, -0.007],
+                    [0.007, -0.018],
+                    [0.004, -0.021],
+                    [0, -0.017],
+                    [0, -0.007],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [-0.018, 0.01],
+                    [-0.014, 0.014],
+                    [-0.014, 0.014],
+                    [-0.004, 0.006],
+                    [-0.003, 0.007],
+                    [-0.007, 0.017],
+                    [-0.007, 0.02],
+                    [-0.003, 0.02],
+                    [0, 0.01],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [40.567, 60.787],
+                    [40.547, 60.805],
+                    [40.502, 60.839],
+                    [40.461, 60.88],
+                    [40.427, 60.925],
+                    [40.409, 60.945],
+                    [40.403, 60.969],
+                    [40.382, 61.021],
+                    [40.368, 61.079],
+                    [40.361, 61.134],
+                    [40.358, 61.158],
+                    [40.358, 62.488],
+                    [35.657, 71.801],
+                    [23.597, 78.765],
+                    [52.87, 20.776],
+                    [64.929, 13.811],
+                    [41.483, 60.259],
+                    [40.574, 60.784]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 10",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 10,
+              "ty": "sh",
+              "ix": 11,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [72.823, 123.145],
+                    [67.889, 125.995],
+                    [67.889, 106.025],
+                    [80.449, 98.773],
+                    [80.449, 118.743],
+                    [72.826, 123.145]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 11",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.149019607843, 0.149019607843, 0.149019607843, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 60",
+          "np": 13,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 3,
+      "ty": 4,
+      "nm": "Path 59",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [40.648, 68.169, 0], "ix": 2 },
+        "a": { "a": 0, "k": [40.648, 68.169, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0.003, 0.02],
+                    [0.007, 0.018],
+                    [0.004, 0.007],
+                    [0.004, 0.007],
+                    [0.014, 0.014],
+                    [0.014, 0.014],
+                    [0.017, 0.01],
+                    [0.01, 0.003],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0.006],
+                    [0.003, 0.017],
+                    [0.004, 0.021],
+                    [0.007, 0.017],
+                    [0.003, 0.007],
+                    [0.003, 0.011],
+                    [0.014, 0.014],
+                    [0.014, 0.013],
+                    [0.017, 0.011],
+                    [0.01, 0.004],
+                    [0, 0],
+                    [0.017, 0.007],
+                    [0.027, 0.003],
+                    [0.028, 0],
+                    [0.027, -0.007],
+                    [0.027, -0.01],
+                    [0.017, -0.01],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0.004],
+                    [-0.003, 0.01],
+                    [0, 0.024],
+                    [0.004, 0.017],
+                    [0.003, 0.011],
+                    [0.007, 0.024],
+                    [0.01, 0.014],
+                    [0, 0.003],
+                    [0.003, 0.01],
+                    [0.017, 0.017],
+                    [0.017, 0.013],
+                    [0.013, 0.007],
+                    [0.01, 0.003],
+                    [0, 0],
+                    [0.017, 0.007],
+                    [0.027, 0.007],
+                    [0.028, 0],
+                    [0.027, -0.007],
+                    [0.027, -0.01],
+                    [0.017, -0.01],
+                    [0, 0],
+                    [0.01, -0.004],
+                    [0.017, -0.017],
+                    [0.014, -0.018],
+                    [0.01, -0.01],
+                    [0.003, -0.01],
+                    [0.007, -0.014],
+                    [0.003, -0.014],
+                    [0, 0],
+                    [0.004, -0.021],
+                    [0, -0.024],
+                    [0, 0],
+                    [-0.003, -0.017],
+                    [-0.01, -0.028],
+                    [-0.013, -0.024],
+                    [-0.017, -0.024],
+                    [-0.024, -0.018],
+                    [-0.017, -0.007],
+                    [0, 0],
+                    [-0.01, -0.006],
+                    [-0.013, -0.003],
+                    [-0.003, 0],
+                    [-0.048, 0],
+                    [-0.044, 0.017],
+                    [-0.003, 0],
+                    [-0.011, 0.007],
+                    [-0.01, 0.007],
+                    [0, 0],
+                    [0, 0],
+                    [-0.003, -0.017],
+                    [-0.01, -0.027],
+                    [-0.014, -0.024],
+                    [-0.017, -0.024],
+                    [-0.024, -0.017],
+                    [-0.017, -0.007],
+                    [0, 0],
+                    [-0.01, -0.007],
+                    [-0.014, -0.004],
+                    [-0.003, 0],
+                    [-0.048, 0],
+                    [-0.044, 0.017],
+                    [-0.003, 0],
+                    [-0.01, 0.007],
+                    [-0.01, 0.007],
+                    [0, 0],
+                    [-0.014, 0.011],
+                    [-0.021, 0.024],
+                    [-0.013, 0.024],
+                    [-0.007, 0.024],
+                    [-0.004, 0.031],
+                    [0, 0.018],
+                    [0, 0],
+                    [0, 0],
+                    [-0.017, 0.01],
+                    [-0.017, 0.024],
+                    [-0.013, 0.02],
+                    [-0.007, 0.024],
+                    [-0.004, 0.031],
+                    [0, 0.018],
+                    [0, 0],
+                    [0, 0.007],
+                    [0.003, 0.017]
+                  ],
+                  "o": [
+                    [-0.004, -0.02],
+                    [-0.007, -0.017],
+                    [-0.003, -0.006],
+                    [-0.003, -0.006],
+                    [-0.01, -0.017],
+                    [-0.014, -0.013],
+                    [-0.014, -0.014],
+                    [-0.007, -0.004],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, -0.018],
+                    [-0.003, -0.021],
+                    [-0.007, -0.017],
+                    [-0.004, -0.007],
+                    [-0.004, -0.007],
+                    [-0.011, -0.017],
+                    [-0.013, -0.014],
+                    [-0.013, -0.014],
+                    [-0.007, -0.003],
+                    [0, 0],
+                    [0, 0],
+                    [-0.028, -0.01],
+                    [-0.028, -0.007],
+                    [-0.027, 0],
+                    [-0.028, 0.007],
+                    [-0.018, 0.007],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.004, -0.013],
+                    [0.004, -0.024],
+                    [0, -0.017],
+                    [0, -0.011],
+                    [-0.004, -0.024],
+                    [-0.007, -0.017],
+                    [0, 0],
+                    [-0.004, -0.007],
+                    [-0.014, -0.021],
+                    [-0.014, -0.014],
+                    [-0.01, -0.007],
+                    [-0.007, -0.003],
+                    [0, 0],
+                    [0, 0],
+                    [-0.028, -0.01],
+                    [-0.028, -0.007],
+                    [-0.027, 0],
+                    [-0.031, 0.007],
+                    [-0.017, 0.007],
+                    [0, 0],
+                    [0, 0],
+                    [-0.021, 0.014],
+                    [-0.014, 0.014],
+                    [-0.01, 0.01],
+                    [-0.003, 0.007],
+                    [-0.007, 0.014],
+                    [-0.007, 0.014],
+                    [0, 0],
+                    [-0.007, 0.02],
+                    [-0.003, 0.02],
+                    [0, 0],
+                    [0, 0.018],
+                    [0.003, 0.031],
+                    [0.01, 0.027],
+                    [0.014, 0.024],
+                    [0.021, 0.024],
+                    [0.014, 0.01],
+                    [0, 0],
+                    [0.01, 0.007],
+                    [0.01, 0.007],
+                    [0, 0],
+                    [0.048, 0.017],
+                    [0.048, 0],
+                    [0, 0],
+                    [0.011, -0.003],
+                    [0.01, -0.003],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0.017],
+                    [0.004, 0.031],
+                    [0.011, 0.028],
+                    [0.013, 0.024],
+                    [0.021, 0.024],
+                    [0.013, 0.01],
+                    [0, 0],
+                    [0.01, 0.007],
+                    [0.01, 0.007],
+                    [0, 0],
+                    [0.048, 0.017],
+                    [0.048, 0],
+                    [0, 0],
+                    [0.01, -0.004],
+                    [0.011, -0.004],
+                    [0, 0],
+                    [0, 0],
+                    [0.024, -0.017],
+                    [0.017, -0.02],
+                    [0.014, -0.024],
+                    [0.01, -0.028],
+                    [0, -0.017],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.024, -0.017],
+                    [0.017, -0.021],
+                    [0.014, -0.024],
+                    [0.01, -0.028],
+                    [0, -0.017],
+                    [0, 0],
+                    [0, 0],
+                    [0, -0.02],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [81.296, 76.166],
+                    [81.282, 76.108],
+                    [81.261, 76.056],
+                    [81.254, 76.032],
+                    [81.237, 76.012],
+                    [81.203, 75.967],
+                    [81.162, 75.926],
+                    [81.117, 75.892],
+                    [81.097, 75.875],
+                    [73.474, 71.472],
+                    [73.474, 51.554],
+                    [73.471, 51.53],
+                    [73.464, 51.475],
+                    [73.45, 51.416],
+                    [73.43, 51.365],
+                    [73.423, 51.341],
+                    [73.406, 51.32],
+                    [73.371, 51.276],
+                    [73.33, 51.235],
+                    [73.286, 51.2],
+                    [73.265, 51.183],
+                    [59.851, 43.437],
+                    [59.8, 43.42],
+                    [59.718, 43.393],
+                    [59.635, 43.386],
+                    [59.553, 43.393],
+                    [59.471, 43.42],
+                    [59.419, 43.437],
+                    [54.211, 46.444],
+                    [66.376, 8.295],
+                    [66.376, 8.284],
+                    [66.383, 8.247],
+                    [66.39, 8.171],
+                    [66.39, 8.12],
+                    [66.38, 8.085],
+                    [66.359, 8.013],
+                    [66.339, 7.962],
+                    [66.339, 7.952],
+                    [66.322, 7.931],
+                    [66.277, 7.876],
+                    [66.236, 7.832],
+                    [66.202, 7.811],
+                    [66.181, 7.794],
+                    [52.76, 0.051],
+                    [52.709, 0.034],
+                    [52.627, 0.007],
+                    [52.544, 0],
+                    [52.462, 0.007],
+                    [52.38, 0.034],
+                    [52.328, 0.051],
+                    [31.014, 12.358],
+                    [30.994, 12.375],
+                    [30.939, 12.419],
+                    [30.894, 12.461],
+                    [30.87, 12.495],
+                    [30.853, 12.515],
+                    [30.839, 12.56],
+                    [30.819, 12.598],
+                    [0.02, 108.028],
+                    [0.013, 108.093],
+                    [0, 108.158],
+                    [0, 128.165],
+                    [0.01, 128.217],
+                    [0.027, 128.303],
+                    [0.061, 128.375],
+                    [0.106, 128.443],
+                    [0.171, 128.502],
+                    [0.212, 128.536],
+                    [13.626, 136.282],
+                    [13.657, 136.295],
+                    [13.691, 136.309],
+                    [13.698, 136.309],
+                    [13.839, 136.337],
+                    [13.979, 136.309],
+                    [13.986, 136.309],
+                    [14.021, 136.295],
+                    [14.051, 136.282],
+                    [40.351, 121.095],
+                    [40.351, 122.645],
+                    [40.361, 122.696],
+                    [40.378, 122.782],
+                    [40.413, 122.854],
+                    [40.457, 122.923],
+                    [40.523, 122.981],
+                    [40.564, 123.015],
+                    [53.981, 130.761],
+                    [54.012, 130.775],
+                    [54.046, 130.789],
+                    [54.053, 130.789],
+                    [54.194, 130.816],
+                    [54.334, 130.789],
+                    [54.341, 130.789],
+                    [54.375, 130.775],
+                    [54.406, 130.761],
+                    [73.245, 119.885],
+                    [73.286, 119.85],
+                    [73.351, 119.792],
+                    [73.395, 119.724],
+                    [73.43, 119.652],
+                    [73.447, 119.566],
+                    [73.457, 119.514],
+                    [73.457, 101.979],
+                    [81.08, 97.576],
+                    [81.121, 97.542],
+                    [81.186, 97.484],
+                    [81.23, 97.419],
+                    [81.265, 97.347],
+                    [81.282, 97.261],
+                    [81.292, 97.209],
+                    [81.292, 76.248],
+                    [81.289, 76.224],
+                    [81.282, 76.17]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 1,
+              "ty": "sh",
+              "ix": 2,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0.017, -0.01],
+                    [0.017, -0.024],
+                    [0.014, -0.021],
+                    [0.007, -0.024],
+                    [0.003, -0.031],
+                    [0, -0.017],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0.007],
+                    [0.007, 0.027],
+                    [0.014, 0.027],
+                    [0.003, 0.006],
+                    [0.011, 0.018],
+                    [0.024, 0.017],
+                    [0.02, 0.013],
+                    [0.024, 0.007],
+                    [0.031, 0.004],
+                    [0.017, 0],
+                    [0.007, -0.004],
+                    [0.028, -0.007],
+                    [0.028, -0.013],
+                    [0.007, -0.003],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, -0.003],
+                    [0, -0.031],
+                    [-0.003, -0.021],
+                    [-0.007, -0.021],
+                    [-0.014, -0.027],
+                    [0, -0.004],
+                    [-0.034, -0.03],
+                    [-0.006, -0.007],
+                    [-0.042, -0.014],
+                    [-0.007, -0.003],
+                    [-0.003, 0],
+                    [-0.038, 0],
+                    [-0.003, 0],
+                    [-0.003, 0],
+                    [-0.038, 0.01],
+                    [-0.013, 0.007],
+                    [-0.017, 0.007],
+                    [0, 0],
+                    [-0.004, 0.003],
+                    [-0.024, 0.027],
+                    [-0.004, 0.003],
+                    [-0.007, 0.007],
+                    [-0.007, 0.01],
+                    [-0.007, 0.01],
+                    [-0.004, 0.007],
+                    [-0.007, 0.017],
+                    [-0.004, 0.021],
+                    [0, 0.017],
+                    [0, 0.007],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, -0.007],
+                    [-0.007, -0.027],
+                    [-0.013, -0.027],
+                    [-0.003, -0.007],
+                    [-0.024, -0.024],
+                    [-0.004, -0.003],
+                    [-0.045, -0.021],
+                    [-0.01, -0.003],
+                    [-0.052, 0],
+                    [-0.048, 0.021],
+                    [-0.01, 0.003],
+                    [-0.01, 0.007],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [-0.024, 0.017],
+                    [-0.017, 0.021],
+                    [-0.013, 0.024],
+                    [-0.01, 0.027],
+                    [0, 0.017],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, -0.027],
+                    [-0.007, -0.028],
+                    [-0.003, -0.007],
+                    [-0.011, -0.018],
+                    [-0.017, -0.024],
+                    [-0.021, -0.017],
+                    [-0.024, -0.014],
+                    [-0.028, -0.01],
+                    [-0.017, 0],
+                    [-0.011, 0],
+                    [-0.028, 0],
+                    [-0.027, 0.007],
+                    [-0.007, 0.004],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.01, 0.031],
+                    [0, 0.024],
+                    [0, 0.024],
+                    [0.01, 0.031],
+                    [0, 0],
+                    [0.024, 0.041],
+                    [0.007, 0.007],
+                    [0.035, 0.027],
+                    [0.006, 0],
+                    [0, 0],
+                    [0.038, 0.01],
+                    [0, 0],
+                    [0, 0],
+                    [0.038, 0],
+                    [0.014, -0.003],
+                    [0.017, -0.007],
+                    [0, 0],
+                    [0, 0],
+                    [0.031, -0.017],
+                    [0, 0],
+                    [0.006, -0.007],
+                    [0.01, -0.01],
+                    [0.007, -0.01],
+                    [0.003, -0.007],
+                    [0.006, -0.017],
+                    [0.007, -0.02],
+                    [0.003, -0.017],
+                    [0, -0.01],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0.027],
+                    [0.007, 0.027],
+                    [0.004, 0.007],
+                    [0.017, 0.031],
+                    [0, 0],
+                    [0.034, 0.035],
+                    [0.01, 0.007],
+                    [0.048, 0.018],
+                    [0.048, 0],
+                    [0.014, -0.003],
+                    [0.011, -0.004],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [72.826, 101.362],
+                    [72.785, 101.396],
+                    [72.72, 101.454],
+                    [72.675, 101.52],
+                    [72.641, 101.592],
+                    [72.624, 101.677],
+                    [72.614, 101.729],
+                    [72.614, 119.264],
+                    [54.632, 129.647],
+                    [54.632, 112.605],
+                    [54.629, 112.581],
+                    [54.612, 112.499],
+                    [54.584, 112.417],
+                    [54.578, 112.393],
+                    [54.543, 112.351],
+                    [54.485, 112.286],
+                    [54.42, 112.242],
+                    [54.348, 112.207],
+                    [54.262, 112.19],
+                    [54.211, 112.18],
+                    [54.187, 112.187],
+                    [54.104, 112.204],
+                    [54.022, 112.231],
+                    [53.998, 112.238],
+                    [40.581, 119.984],
+                    [14.281, 135.171],
+                    [14.281, 115.972],
+                    [45.004, 20.762],
+                    [65.217, 9.093],
+                    [53.052, 47.243],
+                    [49.112, 59.598],
+                    [41.243, 84.272],
+                    [35.578, 102.041],
+                    [35.578, 102.051],
+                    [35.568, 102.147],
+                    [35.564, 102.216],
+                    [35.585, 102.281],
+                    [35.616, 102.373],
+                    [35.616, 102.384],
+                    [35.701, 102.486],
+                    [35.725, 102.507],
+                    [35.839, 102.569],
+                    [35.856, 102.579],
+                    [35.866, 102.579],
+                    [35.979, 102.596],
+                    [35.986, 102.596],
+                    [35.989, 102.596],
+                    [36.106, 102.579],
+                    [36.147, 102.562],
+                    [36.199, 102.541],
+                    [54.416, 92.025],
+                    [54.42, 92.018],
+                    [54.502, 91.953],
+                    [54.506, 91.946],
+                    [54.526, 91.922],
+                    [54.55, 91.891],
+                    [54.571, 91.864],
+                    [54.578, 91.84],
+                    [54.598, 91.788],
+                    [54.612, 91.73],
+                    [54.619, 91.675],
+                    [54.622, 91.651],
+                    [54.622, 62.684],
+                    [72.603, 52.301],
+                    [72.603, 80.775],
+                    [72.607, 80.799],
+                    [72.624, 80.881],
+                    [72.651, 80.963],
+                    [72.658, 80.987],
+                    [72.723, 81.07],
+                    [72.727, 81.076],
+                    [72.847, 81.159],
+                    [72.881, 81.172],
+                    [73.029, 81.203],
+                    [73.176, 81.172],
+                    [73.21, 81.159],
+                    [73.241, 81.145],
+                    [80.435, 76.993],
+                    [80.435, 96.962],
+                    [72.812, 101.365]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 2",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 2,
+              "ty": "sh",
+              "ix": 3,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [53.772, 113.353],
+                    [53.772, 129.65],
+                    [41.212, 122.398],
+                    [41.212, 120.601],
+                    [53.772, 113.349]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 3",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 3,
+              "ty": "sh",
+              "ix": 4,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.003, -0.02],
+                    [0, -0.024],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.007, 0.021],
+                    [-0.004, 0.021],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [0.857, 108.226],
+                    [31.477, 13.362],
+                    [44.133, 20.669],
+                    [13.438, 115.77],
+                    [13.431, 115.835],
+                    [13.417, 115.9],
+                    [13.417, 135.164],
+                    [0.86, 127.912],
+                    [0.86, 108.22]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 4",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 4,
+              "ty": "sh",
+              "ix": 5,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [52.544, 0.916],
+                    [65.104, 8.168],
+                    [44.647, 19.98],
+                    [32.087, 12.728]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 5",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 5,
+              "ty": "sh",
+              "ix": 6,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [59.625, 44.305],
+                    [72.182, 51.557],
+                    [54.2, 61.94],
+                    [50.027, 59.533],
+                    [53.813, 47.665],
+                    [59.625, 44.312]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 6",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 6,
+              "ty": "sh",
+              "ix": 7,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [73.467, 72.463],
+                    [80.02, 76.245],
+                    [73.467, 80.027],
+                    [73.467, 72.46]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 7",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 7,
+              "ty": "sh",
+              "ix": 8,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [49.76, 60.362],
+                    [53.772, 62.677],
+                    [53.772, 90.904],
+                    [42.158, 84.2]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 8",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 8,
+              "ty": "sh",
+              "ix": 9,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [41.891, 85.037],
+                    [53.34, 91.648],
+                    [36.723, 101.242]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 9",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.149019607843, 0.149019607843, 0.149019607843, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 59",
+          "np": 11,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 4,
+      "ty": 4,
+      "nm": "Path 58",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [-1.738, -36.504, 0], "ix": 2 },
+        "a": { "a": 0, "k": [37.896, 22.058, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, -0.035],
+                    [-0.004, -0.02],
+                    [0, 0],
+                    [-0.007, -0.024],
+                    [-0.01, -0.021],
+                    [-0.042, -0.034],
+                    [0, 0],
+                    [0, 0],
+                    [-0.031, -0.017],
+                    [-0.01, -0.004],
+                    [0, 0],
+                    [0, 0],
+                    [-0.027, -0.006],
+                    [-0.017, -0.003],
+                    [0, 0],
+                    [-0.007, 0],
+                    [-0.031, 0.006],
+                    [0, 0],
+                    [0, 0],
+                    [-0.003, 0],
+                    [-0.028, 0.013],
+                    [0, 0],
+                    [-0.003, 0],
+                    [-0.007, 0.007],
+                    [0, 0],
+                    [-0.007, 0.003],
+                    [-0.007, 0.004],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.003, 0.004],
+                    [-0.024, 0.041],
+                    [0, 0],
+                    [0, 0],
+                    [-0.007, 0.02],
+                    [-0.007, 0.031],
+                    [0, 0.034],
+                    [0.003, 0.021],
+                    [0, 0],
+                    [0.007, 0.017],
+                    [0.014, 0.027],
+                    [0.018, 0.02],
+                    [0.017, 0.017],
+                    [0, 0],
+                    [0.024, 0.01],
+                    [0.024, 0.007],
+                    [0, 0],
+                    [0.024, 0.004],
+                    [0.024, 0],
+                    [0, 0],
+                    [0.021, -0.004],
+                    [0.017, 0],
+                    [0, 0],
+                    [0.014, -0.004],
+                    [0.013, -0.007],
+                    [0, 0],
+                    [0.003, -0.003],
+                    [0.003, -0.007],
+                    [0, 0],
+                    [0.004, -0.004],
+                    [0.004, -0.004],
+                    [0, 0],
+                    [0.017, -0.017],
+                    [0.014, -0.017],
+                    [0, 0],
+                    [0.007, -0.02],
+                    [0.007, -0.03]
+                  ],
+                  "o": [
+                    [-0.007, 0.034],
+                    [0, 0.02],
+                    [0, 0],
+                    [0.003, 0.027],
+                    [0.006, 0.021],
+                    [0.024, 0.048],
+                    [0, 0],
+                    [0, 0],
+                    [0.028, 0.024],
+                    [0.01, 0.007],
+                    [0, 0],
+                    [0, 0],
+                    [0.027, 0.011],
+                    [0.018, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.031, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.028, -0.007],
+                    [0, 0],
+                    [0, 0],
+                    [0.007, -0.003],
+                    [0, 0],
+                    [0, 0],
+                    [0.007, -0.004],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.035, -0.027],
+                    [0, 0],
+                    [0, 0],
+                    [0.014, -0.017],
+                    [0.014, -0.028],
+                    [0.006, -0.034],
+                    [0, -0.021],
+                    [0, 0],
+                    [0, -0.021],
+                    [-0.011, -0.031],
+                    [-0.014, -0.024],
+                    [-0.013, -0.018],
+                    [0, 0],
+                    [-0.021, -0.017],
+                    [-0.021, -0.014],
+                    [0, 0],
+                    [-0.024, -0.011],
+                    [-0.024, -0.003],
+                    [0, 0],
+                    [-0.02, 0],
+                    [-0.017, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.013, 0.003],
+                    [0, 0],
+                    [0, 0],
+                    [-0.007, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.007, 0.003],
+                    [0, 0],
+                    [-0.021, 0.014],
+                    [-0.017, 0.017],
+                    [0, 0],
+                    [-0.014, 0.017],
+                    [-0.014, 0.028],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [0.011, 33.901],
+                    [0.004, 34.001],
+                    [0.001, 34.062],
+                    [0.526, 37.728],
+                    [0.55, 37.803],
+                    [0.57, 37.865],
+                    [0.67, 37.992],
+                    [2.871, 39.881],
+                    [4.65, 41.41],
+                    [4.743, 41.465],
+                    [4.774, 41.486],
+                    [7.723, 42.631],
+                    [10.696, 43.783],
+                    [10.781, 43.8],
+                    [10.829, 43.814],
+                    [17.18, 44.116],
+                    [17.2, 44.116],
+                    [17.296, 44.106],
+                    [24.038, 42.535],
+                    [24.041, 42.535],
+                    [24.044, 42.535],
+                    [24.127, 42.508],
+                    [31.235, 39.178],
+                    [31.245, 39.171],
+                    [31.266, 39.161],
+                    [67.087, 18.478],
+                    [67.101, 18.468],
+                    [67.122, 18.457],
+                    [68.15, 17.727],
+                    [68.157, 17.72],
+                    [71.109, 15.622],
+                    [72.889, 14.356],
+                    [72.899, 14.346],
+                    [72.992, 14.25],
+                    [75.193, 11.106],
+                    [75.718, 10.355],
+                    [75.742, 10.297],
+                    [75.78, 10.207],
+                    [75.787, 10.108],
+                    [75.79, 10.046],
+                    [75.265, 6.381],
+                    [75.245, 6.326],
+                    [75.214, 6.237],
+                    [75.162, 6.172],
+                    [75.121, 6.117],
+                    [71.144, 2.698],
+                    [71.079, 2.664],
+                    [71.017, 2.626],
+                    [65.095, 0.329],
+                    [65.027, 0.318],
+                    [64.961, 0.301],
+                    [58.611, 0],
+                    [58.549, 0.01],
+                    [58.495, 0.01],
+                    [51.746, 1.584],
+                    [51.705, 1.601],
+                    [51.661, 1.611],
+                    [44.553, 4.941],
+                    [44.539, 4.951],
+                    [44.522, 4.958],
+                    [8.7, 25.641],
+                    [8.686, 25.655],
+                    [8.669, 25.662],
+                    [2.902, 29.766],
+                    [2.85, 29.821],
+                    [2.799, 29.869],
+                    [0.073, 33.764],
+                    [0.049, 33.822],
+                    [0.011, 33.911]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 1,
+              "ty": "sh",
+              "ix": 2,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.024, 0.003],
+                    [0.024, 0],
+                    [0, 0],
+                    [0.02, -0.003],
+                    [0.02, 0],
+                    [0, 0],
+                    [0.014, -0.003],
+                    [0.013, -0.007],
+                    [0, 0],
+                    [0.003, -0.003],
+                    [0.003, -0.007],
+                    [0, 0],
+                    [0.004, -0.004],
+                    [0.004, -0.004],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.024, -0.01],
+                    [-0.021, -0.004],
+                    [0, 0],
+                    [-0.021, 0],
+                    [-0.021, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.013, 0.003],
+                    [0, 0],
+                    [0, 0],
+                    [-0.007, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.007, 0.003],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [3.461, 30.411],
+                    [9.149, 26.361],
+                    [44.937, 5.698],
+                    [51.986, 2.396],
+                    [58.632, 0.847],
+                    [64.855, 1.141],
+                    [70.643, 3.387],
+                    [74.446, 6.652],
+                    [74.922, 9.991],
+                    [74.494, 10.602],
+                    [72.337, 13.688],
+                    [70.619, 14.912],
+                    [67.855, 16.877],
+                    [65.099, 15.807],
+                    [65.03, 15.797],
+                    [64.965, 15.779],
+                    [58.615, 15.478],
+                    [58.553, 15.488],
+                    [58.495, 15.488],
+                    [51.746, 17.062],
+                    [51.705, 17.079],
+                    [51.661, 17.089],
+                    [44.553, 20.419],
+                    [44.539, 20.429],
+                    [44.522, 20.436],
+                    [8.7, 41.119],
+                    [8.686, 41.133],
+                    [8.669, 41.14],
+                    [7.819, 41.743],
+                    [5.151, 40.708],
+                    [3.426, 39.226],
+                    [1.348, 37.44],
+                    [0.872, 34.1],
+                    [3.457, 30.404]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 2",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 2,
+              "ty": "sh",
+              "ix": 3,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [66.648, 17.741],
+                    [30.858, 38.403],
+                    [23.808, 41.705],
+                    [17.163, 43.255],
+                    [10.939, 42.957],
+                    [8.775, 42.117],
+                    [9.149, 41.853],
+                    [44.937, 21.19],
+                    [51.986, 17.888],
+                    [58.632, 16.338],
+                    [64.855, 16.633],
+                    [67.019, 17.473],
+                    [66.648, 17.737]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 3",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.149019607843, 0.149019607843, 0.149019607843, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 58",
+          "np": 5,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 5,
+      "ty": 4,
+      "nm": "Path 57",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [-1.639, -20.046, 0], "ix": 2 },
+        "a": { "a": 0, "k": [66.345, 46.218, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0.01, 0.021],
+                    [0.013, 0.024],
+                    [0, 0],
+                    [0.014, 0.014],
+                    [0.014, 0.014],
+                    [0, 0],
+                    [0.01, 0.007],
+                    [0.01, 0.007],
+                    [0, 0],
+                    [0.007, 0.004],
+                    [0.01, 0.007],
+                    [0, 0],
+                    [0.007, 0.007],
+                    [0.011, 0.004],
+                    [0, 0],
+                    [0.011, 0.004],
+                    [0.01, 0],
+                    [0, 0],
+                    [0.01, 0],
+                    [0.011, 0],
+                    [0, 0],
+                    [0.01, 0.003],
+                    [0.01, 0],
+                    [0, 0],
+                    [0.011, 0],
+                    [0.01, 0],
+                    [0, 0],
+                    [0.01, 0],
+                    [0.01, -0.003],
+                    [0, 0],
+                    [0.01, -0.003],
+                    [0.011, -0.007],
+                    [0, 0],
+                    [0.004, 0],
+                    [0.003, -0.004],
+                    [0, 0],
+                    [0.003, -0.004],
+                    [0.003, -0.007],
+                    [0, 0],
+                    [0.011, -0.007],
+                    [0.01, -0.011],
+                    [0, 0],
+                    [0.011, -0.017],
+                    [0.01, -0.017],
+                    [0, 0],
+                    [0.007, -0.024],
+                    [0.004, -0.024],
+                    [0, 0],
+                    [0, -0.01],
+                    [0, -0.014],
+                    [0, 0],
+                    [-0.003, -0.014],
+                    [0, -0.017],
+                    [0, 0],
+                    [-0.028, -0.041],
+                    [0, 0],
+                    [-0.024, -0.024],
+                    [0, -0.003],
+                    [0, 0],
+                    [-0.01, -0.01],
+                    [-0.01, -0.007],
+                    [0, 0],
+                    [-0.007, -0.007],
+                    [-0.004, -0.003],
+                    [0, 0],
+                    [-0.01, -0.007],
+                    [-0.007, 0],
+                    [0, 0],
+                    [-0.01, -0.007],
+                    [-0.01, -0.003],
+                    [0, 0],
+                    [-0.014, -0.004],
+                    [-0.007, -0.003],
+                    [0, 0],
+                    [-0.01, 0],
+                    [-0.006, 0],
+                    [0, 0],
+                    [-0.003, 0],
+                    [-0.017, 0.003],
+                    [0, 0],
+                    [-0.01, 0.004],
+                    [-0.013, 0.007],
+                    [0, 0],
+                    [-0.007, 0],
+                    [-0.01, 0.007],
+                    [0, 0],
+                    [-0.004, 0.004],
+                    [-0.007, 0.003],
+                    [0, 0],
+                    [-0.004, 0],
+                    [-0.004, 0.003],
+                    [0, 0],
+                    [-0.01, 0.007],
+                    [-0.01, 0.01],
+                    [0, 0],
+                    [-0.021, 0.035],
+                    [0, 0],
+                    [-0.007, 0.052],
+                    [0, 0],
+                    [0, 0.014],
+                    [0, 0.013],
+                    [0, 0],
+                    [0.004, 0.017],
+                    [0, 0.014]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [-0.007, -0.024],
+                    [-0.01, -0.024],
+                    [0, 0],
+                    [0, 0],
+                    [-0.01, -0.013],
+                    [0, 0],
+                    [0, 0],
+                    [-0.01, -0.007],
+                    [0, 0],
+                    [0, 0],
+                    [-0.007, -0.003],
+                    [0, 0],
+                    [0, 0],
+                    [-0.006, -0.004],
+                    [0, 0],
+                    [0, 0],
+                    [-0.01, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.011, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.01, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.01, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.01, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.011, 0.004],
+                    [0, 0],
+                    [0, 0],
+                    [-0.003, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.004, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.01, 0.007],
+                    [0, 0],
+                    [0, 0],
+                    [-0.01, 0.013],
+                    [0, 0],
+                    [-0.014, 0.024],
+                    [-0.011, 0.024],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0.014],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0.017],
+                    [0, 0],
+                    [0.01, 0.052],
+                    [0, 0],
+                    [0.017, 0.031],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.011, 0.007],
+                    [0, 0],
+                    [0, 0],
+                    [0.007, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.003, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.007, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.003, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.007, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.017, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.01, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.013, -0.003],
+                    [0, 0],
+                    [0, 0],
+                    [0.003, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.003, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.01, -0.007],
+                    [0, 0],
+                    [0.027, -0.028],
+                    [0, 0],
+                    [0.024, -0.044],
+                    [0, 0],
+                    [0, 0],
+                    [0, -0.013],
+                    [0, 0],
+                    [0, 0],
+                    [0, -0.017],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [132.691, 26.015],
+                    [131.687, 21.685],
+                    [131.656, 21.619],
+                    [131.629, 21.547],
+                    [128.817, 17.244],
+                    [128.779, 17.206],
+                    [128.748, 17.162],
+                    [124.133, 12.889],
+                    [124.102, 12.872],
+                    [124.078, 12.848],
+                    [117.659, 8.607],
+                    [117.635, 8.596],
+                    [117.615, 8.579],
+                    [110.29, 4.89],
+                    [110.266, 4.883],
+                    [110.242, 4.869],
+                    [102.85, 2.219],
+                    [102.822, 2.215],
+                    [102.795, 2.205],
+                    [95.334, 0.59],
+                    [95.303, 0.59],
+                    [95.275, 0.583],
+                    [87.745, 0.004],
+                    [87.718, 0.004],
+                    [87.687, 0],
+                    [80.226, 0.436],
+                    [80.198, 0.442],
+                    [80.168, 0.442],
+                    [72.915, 1.865],
+                    [72.888, 1.876],
+                    [72.857, 1.879],
+                    [65.811, 4.29],
+                    [65.787, 4.303],
+                    [65.759, 4.31],
+                    [58.919, 7.708],
+                    [58.908, 7.715],
+                    [58.895, 7.719],
+                    [13.448, 33.957],
+                    [13.438, 33.967],
+                    [13.424, 33.974],
+                    [7.595, 37.89],
+                    [7.567, 37.917],
+                    [7.533, 37.938],
+                    [3.384, 41.984],
+                    [3.353, 42.032],
+                    [3.316, 42.073],
+                    [0.847, 46.253],
+                    [0.823, 46.325],
+                    [0.795, 46.393],
+                    [0.007, 50.703],
+                    [0.007, 50.741],
+                    [0, 50.779],
+                    [0, 66.271],
+                    [0.01, 66.315],
+                    [0.01, 66.363],
+                    [0.97, 70.721],
+                    [1.029, 70.858],
+                    [3.806, 75.179],
+                    [3.871, 75.258],
+                    [3.871, 75.261],
+                    [8.462, 79.54],
+                    [8.493, 79.561],
+                    [8.517, 79.585],
+                    [14.933, 83.83],
+                    [14.96, 83.844],
+                    [14.974, 83.857],
+                    [22.295, 87.547],
+                    [22.329, 87.561],
+                    [22.343, 87.567],
+                    [29.735, 90.218],
+                    [29.766, 90.225],
+                    [29.79, 90.235],
+                    [37.251, 91.85],
+                    [37.296, 91.854],
+                    [37.31, 91.857],
+                    [44.84, 92.437],
+                    [44.87, 92.437],
+                    [44.894, 92.437],
+                    [52.356, 92.001],
+                    [52.366, 92.001],
+                    [52.414, 91.998],
+                    [59.666, 90.575],
+                    [59.69, 90.564],
+                    [59.724, 90.557],
+                    [66.771, 88.147],
+                    [66.785, 88.14],
+                    [66.822, 88.126],
+                    [73.663, 84.728],
+                    [73.67, 84.721],
+                    [73.687, 84.715],
+                    [119.134, 58.477],
+                    [119.144, 58.47],
+                    [119.158, 58.463],
+                    [125.072, 54.499],
+                    [125.1, 54.472],
+                    [125.134, 54.451],
+                    [129.328, 50.378],
+                    [129.4, 50.288],
+                    [131.875, 46.105],
+                    [131.927, 45.961],
+                    [132.685, 41.668],
+                    [132.685, 41.63],
+                    [132.691, 41.593],
+                    [132.691, 26.101],
+                    [132.681, 26.053],
+                    [132.681, 26.005]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 1,
+              "ty": "sh",
+              "ix": 2,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [-0.028, -0.042],
+                    [0, 0],
+                    [-0.024, -0.024],
+                    [0, -0.003],
+                    [0, 0],
+                    [-0.011, -0.01],
+                    [-0.011, -0.007],
+                    [0, 0],
+                    [-0.006, -0.007],
+                    [-0.003, -0.003],
+                    [0, 0],
+                    [-0.01, -0.007],
+                    [-0.007, 0],
+                    [0, 0],
+                    [-0.01, -0.007],
+                    [-0.01, -0.003],
+                    [0, 0],
+                    [-0.013, -0.004],
+                    [-0.004, 0],
+                    [0, 0],
+                    [-0.01, 0],
+                    [-0.007, 0],
+                    [0, 0],
+                    [-0.004, 0],
+                    [-0.017, 0.004],
+                    [0, 0],
+                    [-0.01, 0.003],
+                    [-0.01, 0.007],
+                    [0, 0],
+                    [-0.006, 0],
+                    [-0.01, 0.007],
+                    [0, 0],
+                    [-0.004, 0.004],
+                    [-0.007, 0.004],
+                    [0, 0],
+                    [-0.004, 0],
+                    [-0.003, 0.003],
+                    [0, 0],
+                    [-0.011, 0.007],
+                    [-0.01, 0.01],
+                    [0, 0],
+                    [-0.021, 0.034],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.011, 0.052],
+                    [0, 0],
+                    [0.017, 0.031],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.01, 0.007],
+                    [0, 0],
+                    [0, 0],
+                    [0.007, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.004, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.007, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.004, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.017, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.01, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.014, -0.004],
+                    [0, 0],
+                    [0, 0],
+                    [0.003, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.003, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0.01, -0.007],
+                    [0, 0],
+                    [0.027, -0.027],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [128.704, 49.812],
+                    [124.579, 53.817],
+                    [118.708, 57.753],
+                    [73.286, 83.977],
+                    [66.483, 87.355],
+                    [59.491, 89.745],
+                    [52.294, 91.154],
+                    [44.891, 91.586],
+                    [37.423, 91.014],
+                    [30.02, 89.412],
+                    [22.679, 86.779],
+                    [15.402, 83.113],
+                    [9.038, 78.899],
+                    [4.509, 74.678],
+                    [1.8, 70.468],
+                    [0.867, 66.229],
+                    [0.867, 54.722],
+                    [0.98, 55.236],
+                    [1.039, 55.374],
+                    [3.816, 59.694],
+                    [3.881, 59.773],
+                    [3.881, 59.776],
+                    [8.473, 64.055],
+                    [8.504, 64.076],
+                    [8.528, 64.1],
+                    [14.943, 68.345],
+                    [14.97, 68.359],
+                    [14.984, 68.372],
+                    [22.305, 72.062],
+                    [22.339, 72.076],
+                    [22.353, 72.083],
+                    [29.746, 74.733],
+                    [29.776, 74.74],
+                    [29.8, 74.75],
+                    [37.262, 76.365],
+                    [37.306, 76.369],
+                    [37.317, 76.369],
+                    [44.846, 76.948],
+                    [44.877, 76.948],
+                    [44.901, 76.948],
+                    [52.363, 76.513],
+                    [52.373, 76.513],
+                    [52.421, 76.509],
+                    [59.673, 75.086],
+                    [59.697, 75.076],
+                    [59.731, 75.069],
+                    [66.778, 72.659],
+                    [66.791, 72.652],
+                    [66.829, 72.638],
+                    [73.67, 69.24],
+                    [73.677, 69.233],
+                    [73.694, 69.226],
+                    [119.14, 42.988],
+                    [119.151, 42.981],
+                    [119.164, 42.975],
+                    [125.079, 39.011],
+                    [125.107, 38.983],
+                    [125.141, 38.963],
+                    [129.335, 34.889],
+                    [129.407, 34.8],
+                    [131.841, 30.685],
+                    [131.841, 41.558],
+                    [131.104, 45.738],
+                    [128.697, 49.805]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 2",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 2,
+              "ty": "sh",
+              "ix": 3,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [4.032, 42.56],
+                    [8.113, 38.579],
+                    [13.897, 34.69],
+                    [59.32, 8.466],
+                    [66.123, 5.089],
+                    [73.114, 2.699],
+                    [80.312, 1.289],
+                    [87.715, 0.857],
+                    [95.183, 1.43],
+                    [102.586, 3.035],
+                    [109.927, 5.668],
+                    [117.203, 9.334],
+                    [123.574, 13.544],
+                    [128.124, 17.758],
+                    [130.864, 21.952],
+                    [131.831, 26.125],
+                    [131.104, 30.253],
+                    [128.697, 34.32],
+                    [124.572, 38.325],
+                    [118.702, 42.261],
+                    [73.279, 68.486],
+                    [66.476, 71.863],
+                    [59.484, 74.253],
+                    [52.287, 75.662],
+                    [44.884, 76.094],
+                    [37.416, 75.522],
+                    [30.013, 73.917],
+                    [22.672, 71.284],
+                    [15.396, 67.618],
+                    [9.032, 63.404],
+                    [4.502, 59.183],
+                    [1.793, 54.972],
+                    [0.867, 50.775],
+                    [1.625, 46.626],
+                    [4.025, 42.563]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 3",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.149019607843, 0.149019607843, 0.149019607843, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 57",
+          "np": 5,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 6,
+      "ty": 4,
+      "nm": "Path 56",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [61.279, 53.122, 0], "ix": 2 },
+        "a": { "a": 0, "k": [11.763, 9.311, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [23.526, 7.746],
+                    [4.688, 18.622],
+                    [0, 15.917],
+                    [3.944, 3.559],
+                    [10.112, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 56",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 7,
+      "ty": 4,
+      "nm": "Path 55",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [48.596, 10.448, 0], "ix": 2 },
+        "a": { "a": 0, "k": [17.365, 10.026, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [34.731, 7.746],
+                    [13.417, 20.052],
+                    [0, 12.306],
+                    [21.314, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 55",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 8,
+      "ty": 4,
+      "nm": "Path 54",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [45.094, 93.283, 0], "ix": 2 },
+        "a": { "a": 0, "k": [9.111, 8.885, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [18.221, 7.249],
+                    [0, 17.769],
+                    [5.668, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 54",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 9,
+      "ty": 4,
+      "nm": "Path 53",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [22.538, 64.316, 0], "ix": 2 },
+        "a": { "a": 0, "k": [22.11, 51.588, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [44.219, 7.746],
+                    [13.418, 103.176],
+                    [0, 95.43],
+                    [30.802, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 53",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 10,
+      "ty": 4,
+      "nm": "Path 52",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [7.137, 122.035, 0], "ix": 2 },
+        "a": { "a": 0, "k": [6.709, 13.877, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [13.418, 7.746],
+                    [13.418, 27.753],
+                    [0, 20.007],
+                    [0, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 52",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 11,
+      "ty": 4,
+      "nm": "Path 51",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [47.928, 75.688, 0], "ix": 2 },
+        "a": { "a": 0, "k": [6.277, 15.96, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [12.553, 2.705],
+                    [12.553, 31.92],
+                    [0, 24.671],
+                    [7.865, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 51",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 12,
+      "ty": 4,
+      "nm": "Path 50",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [76.962, 76.246, 0], "ix": 2 },
+        "a": { "a": 0, "k": [3.92, 4.525, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [7.839, 4.523],
+                    [0, 9.049],
+                    [0, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 50",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 13,
+      "ty": 4,
+      "nm": "Path 49",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [47.495, 121.5, 0], "ix": 2 },
+        "a": { "a": 0, "k": [6.709, 8.891, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [13.418, 0],
+                    [13.418, 17.782],
+                    [0, 10.036],
+                    [0, 7.745]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 49",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 14,
+      "ty": 4,
+      "nm": "Path 48",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [47.364, 72.04, 0], "ix": 2 },
+        "a": { "a": 0, "k": [33.518, 63.872, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [67.035, 68.077],
+                    [67.035, 89.038],
+                    [59.196, 93.564],
+                    [59.196, 111.346],
+                    [40.358, 122.223],
+                    [40.358, 104.441],
+                    [26.941, 112.186],
+                    [0, 127.743],
+                    [0, 107.736],
+                    [30.801, 12.306],
+                    [52.116, 0],
+                    [39.614, 39.202],
+                    [35.67, 51.56],
+                    [27.805, 76.231],
+                    [22.137, 94],
+                    [40.358, 83.48],
+                    [40.358, 54.265],
+                    [59.196, 43.389],
+                    [59.196, 63.554],
+                    [59.196, 72.603]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 48",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 15,
+      "ty": 4,
+      "nm": "Path 47",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [77.437, -65.045, 0], "ix": 2 },
+        "a": { "a": 0, "k": [0.26, 2.208, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [0, 0],
+                    [0.521, 3.669],
+                    [0, 4.416]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 47",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 16,
+      "ty": 4,
+      "nm": "Path 46",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [-78.563, -9.326, 0], "ix": 2 },
+        "a": { "a": 0, "k": [1.362, 4.727, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [0, 3.896],
+                    [2.723, 0],
+                    [2.723, 9.454],
+                    [0.525, 7.565]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 46",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 17,
+      "ty": 4,
+      "nm": "Path 45",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [72.648, -63.987, 0], "ix": 2 },
+        "a": { "a": 0, "k": [1.991, 6.124, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [0, 0],
+                    [3.981, 3.419],
+                    [3.981, 7.835],
+                    [1.78, 10.983],
+                    [0, 12.248]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 45",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 18,
+      "ty": 4,
+      "nm": "Path 44",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [-69.531, -10.85, 0], "ix": 2 },
+        "a": { "a": 0, "k": [2.884, 8.115, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [5.767, 15.492],
+                    [4.732, 16.229],
+                    [1.779, 15.087],
+                    [0, 13.558],
+                    [0, 4.104],
+                    [5.767, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 44",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 19,
+      "ty": 4,
+      "nm": "Path 43",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [-25.287, -33.634, 0], "ix": 2 },
+        "a": { "a": 0, "k": [17.911, 18.086, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [35.822, 15.492],
+                    [0, 36.172],
+                    [0, 20.68],
+                    [35.822, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 43",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 20,
+      "ty": 4,
+      "nm": "Path 42",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [20.383, -59.176, 0], "ix": 2 },
+        "a": { "a": 0, "k": [3.554, 9.41, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [7.108, 15.492],
+                    [0, 18.821],
+                    [0, 3.329],
+                    [7.108, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 42",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 21,
+      "ty": 4,
+      "nm": "Path 41",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [35.123, -64.391, 0], "ix": 2 },
+        "a": { "a": 0, "k": [3.374, 8.533, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [6.748, 15.492],
+                    [0, 17.066],
+                    [0, 1.574],
+                    [6.748, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 41",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 22,
+      "ty": 4,
+      "nm": "Path 40",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [49.057, -65.746, 0], "ix": 2 },
+        "a": { "a": 0, "k": [3.175, 7.896, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [6.35, 15.793],
+                    [0, 15.492],
+                    [0, 0],
+                    [6.35, 0.302]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 40",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 23,
+      "ty": 4,
+      "nm": "Path 39",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [62.113, -64.198, 0], "ix": 2 },
+        "a": { "a": 0, "k": [2.961, 8.322, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [2.973, 16.644],
+                    [0, 15.491],
+                    [0, 0],
+                    [5.922, 2.297],
+                    [5.922, 14.545]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 39",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 24,
+      "ty": 4,
+      "nm": "Path 38",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [-1.628, -36.512, 0], "ix": 2 },
+        "a": { "a": 0, "k": [65.919, 38.051, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [38.822, 59.381],
+                    [45.172, 59.683],
+                    [51.92, 58.109],
+                    [59.028, 54.78],
+                    [94.85, 34.097],
+                    [95.886, 33.36],
+                    [98.835, 31.261],
+                    [100.614, 29.996],
+                    [102.815, 26.851],
+                    [103.34, 26.101],
+                    [102.815, 22.435],
+                    [98.835, 19.016],
+                    [92.913, 16.719],
+                    [86.562, 16.417],
+                    [79.814, 17.991],
+                    [72.706, 21.321],
+                    [36.885, 42.004],
+                    [31.117, 46.108],
+                    [28.391, 50.003],
+                    [28.916, 53.669],
+                    [31.117, 55.558],
+                    [32.897, 57.088],
+                    [35.846, 58.233],
+                    [38.818, 59.385]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 1,
+              "ty": "sh",
+              "ix": 2,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [14.748, 67.563],
+                    [8.332, 63.318],
+                    [3.737, 59.035],
+                    [0.96, 54.715],
+                    [0, 50.357],
+                    [0.788, 46.046],
+                    [3.257, 41.867],
+                    [7.406, 37.821],
+                    [13.235, 33.905],
+                    [58.682, 7.667],
+                    [65.523, 4.269],
+                    [72.569, 1.858],
+                    [79.821, 0.435],
+                    [87.283, 0],
+                    [94.812, 0.579],
+                    [102.274, 2.194],
+                    [109.666, 4.845],
+                    [116.987, 8.534],
+                    [123.406, 12.776],
+                    [128.021, 17.048],
+                    [130.833, 21.352],
+                    [131.838, 25.682],
+                    [131.08, 29.975],
+                    [128.604, 34.158],
+                    [124.411, 38.232],
+                    [118.496, 42.196],
+                    [73.049, 68.434],
+                    [66.209, 71.832],
+                    [59.162, 74.242],
+                    [51.91, 75.665],
+                    [44.449, 76.101],
+                    [36.919, 75.521],
+                    [29.458, 73.906],
+                    [22.065, 71.256],
+                    [14.741, 67.566]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 2",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 38",
+          "np": 4,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 25,
+      "ty": 4,
+      "nm": "Path 37",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [-102.707, 46.686, 0], "ix": 2 },
+        "a": { "a": 0, "k": [3.66, 9.59, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [7.321, 19.181],
+                    [0, 15.492],
+                    [0, 0],
+                    [7.321, 3.689]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 37",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 26,
+      "ty": 4,
+      "nm": "Path 36",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [-87.055, 53.431, 0], "ix": 2 },
+        "a": { "a": 0, "k": [3.696, 9.072, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [7.392, 18.143],
+                    [0, 15.492],
+                    [0, 0],
+                    [7.392, 2.651]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 36",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 27,
+      "ty": 4,
+      "nm": "Path 35",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [-71.257, 57.969, 0], "ix": 2 },
+        "a": { "a": 0, "k": [3.729, 8.554, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [7.458, 17.107],
+                    [0, 15.492],
+                    [0, 0],
+                    [7.458, 1.615]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 35",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 28,
+      "ty": 4,
+      "nm": "Path 34",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [-55.313, 60.303, 0], "ix": 2 },
+        "a": { "a": 0, "k": [3.765, 8.035, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [7.53, 16.071],
+                    [0, 15.492],
+                    [0, 0],
+                    [7.53, 0.579]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 34",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 29,
+      "ty": 4,
+      "nm": "Path 33",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [-39.365, 60.456, 0], "ix": 2 },
+        "a": { "a": 0, "k": [3.73, 7.964, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [7.461, 15.492],
+                    [0, 15.927],
+                    [0, 0.435],
+                    [7.461, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 33",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 30,
+      "ty": 4,
+      "nm": "Path 32",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [-23.712, 58.483, 0], "ix": 2 },
+        "a": { "a": 0, "k": [3.626, 8.456, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [7.253, 15.489],
+                    [0, 16.912],
+                    [0, 1.42],
+                    [7.253, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 32",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 31,
+      "ty": 4,
+      "nm": "Path 31",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [-8.5, 54.405, 0], "ix": 2 },
+        "a": { "a": 0, "k": [3.523, 8.949, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [7.046, 15.492],
+                    [0, 17.899],
+                    [0, 2.41],
+                    [7.046, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 31",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 32,
+      "ty": 4,
+      "nm": "Path 30",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [6.277, 48.233, 0], "ix": 2 },
+        "a": { "a": 0, "k": [3.422, 9.443, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [6.844, 15.489],
+                    [0, 18.887],
+                    [0, 3.395],
+                    [6.844, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 30",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 33,
+      "ty": 4,
+      "nm": "Path 29",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [61.905, 16.702, 0], "ix": 2 },
+        "a": { "a": 0, "k": [22.724, 20.865, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [45.447, 15.492],
+                    [0, 41.73],
+                    [0, 26.241],
+                    [45.447, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 29",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 34,
+      "ty": 4,
+      "nm": "Path 28",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [116.542, -15.428, 0], "ix": 2 },
+        "a": { "a": 0, "k": [2.956, 9.728, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [5.911, 15.492],
+                    [0, 19.456],
+                    [0, 3.964],
+                    [5.911, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 28",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 35,
+      "ty": 4,
+      "nm": "Path 27",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [127.292, -23.979, 0], "ix": 2 },
+        "a": { "a": 0, "k": [2.097, 9.783, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [4.194, 15.492],
+                    [0, 19.566],
+                    [0, 4.074],
+                    [4.194, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 27",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 36,
+      "ty": 4,
+      "nm": "Path 26",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [134.386, -32.763, 0], "ix": 2 },
+        "a": { "a": 0, "k": [1.237, 9.837, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [2.475, 15.492],
+                    [0, 19.675],
+                    [0, 4.183],
+                    [2.475, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 26",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 37,
+      "ty": 4,
+      "nm": "Path 25",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [137.826, -41.78, 0], "ix": 2 },
+        "a": { "a": 0, "k": [0.379, 9.893, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [0.758, 15.492],
+                    [0, 19.785],
+                    [0, 4.293],
+                    [0.758, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 25",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 38,
+      "ty": 4,
+      "nm": "Path 24",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [-140.856, 10.781, 0], "ix": 2 },
+        "a": { "a": 0, "k": [0.481, 9.925, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [0.963, 19.85],
+                    [0, 15.492],
+                    [0, 0],
+                    [0.963, 4.358]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 24",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 39,
+      "ty": 4,
+      "nm": "Path 23",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [-136.877, 20.013, 0], "ix": 2 },
+        "a": { "a": 0, "k": [1.389, 9.906, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [2.778, 19.812],
+                    [0, 15.492],
+                    [0, 0],
+                    [2.778, 4.321]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 23",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 40,
+      "ty": 4,
+      "nm": "Path 22",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [-129.033, 29.166, 0], "ix": 2 },
+        "a": { "a": 0, "k": [2.298, 9.887, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [4.595, 19.774],
+                    [0, 15.492],
+                    [0, 0],
+                    [4.595, 4.286]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 22",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 41,
+      "ty": 4,
+      "nm": "Path 21",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [-117.32, 38.246, 0], "ix": 2 },
+        "a": { "a": 0, "k": [3.207, 9.868, 0], "ix": 1 },
+        "s": { "a": 0, "k": [212.766, 212.766, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [6.415, 19.737],
+                    [0, 15.488],
+                    [0, 0],
+                    [6.415, 4.245]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 21",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 42,
+      "ty": 4,
+      "nm": "Path 20",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [346.897, 62.805, 0], "ix": 2 },
+        "a": { "a": 0, "k": [16.127, 9.312, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [18.838, 18.623],
+                    [0, 7.746],
+                    [1.021, 7.156],
+                    [13.417, 0],
+                    [32.255, 10.877]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 20",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 43,
+      "ty": 4,
+      "nm": "Path 19",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [334.246, 46.372, 0], "ix": 2 },
+        "a": { "a": 0, "k": [21.699, 33.565, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [0, 67.131],
+                    [29.979, 7.746],
+                    [43.397, 0],
+                    [19.243, 47.843],
+                    [18.222, 48.433],
+                    [18.222, 49.866],
+                    [13.418, 59.385]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 19",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 44,
+      "ty": 4,
+      "nm": "Path 18",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [338.578, 10.527, 0], "ix": 2 },
+        "a": { "a": 0, "k": [17.366, 10.026, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [21.314, 20.052],
+                    [0, 7.746],
+                    [13.418, 0],
+                    [34.732, 12.306]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 18",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 45,
+      "ty": 4,
+      "nm": "Path 17",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [356.315, 131.187, 0], "ix": 2 },
+        "a": { "a": 0, "k": [6.708, 8.891, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [0, 0],
+                    [7.838, 4.523],
+                    [13.417, 1.303],
+                    [13.417, 10.037],
+                    [0, 17.783]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 17",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 46,
+      "ty": 4,
+      "nm": "Path 16",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [321.658, 81.325, 0], "ix": 2 },
+        "a": { "a": 0, "k": [9.111, 9.133, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [18.222, 18.266],
+                    [0, 7.746],
+                    [13.418, 0],
+                    [18.222, 2.774]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 16",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 47,
+      "ty": 4,
+      "nm": "Path 15",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [356.315, 82.853, 0], "ix": 2 },
+        "a": { "a": 0, "k": [6.708, 18.482, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [0, 36.963],
+                    [0, 7.746],
+                    [13.417, 0],
+                    [13.417, 29.217]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 15",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 48,
+      "ty": 4,
+      "nm": "Path 14",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [360.235, 99.724, 0], "ix": 2 },
+        "a": { "a": 0, "k": [10.628, 6.136, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [7.838, 12.272],
+                    [0, 7.746],
+                    [13.417, 0],
+                    [21.256, 4.527]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 14",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 49,
+      "ty": 4,
+      "nm": "Path 13",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [364.155, 112.466, 0], "ix": 2 },
+        "a": { "a": 0, "k": [6.708, 14.352, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [0, 28.703],
+                    [0, 7.746],
+                    [13.417, 0],
+                    [13.417, 20.957],
+                    [5.578, 25.483]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 13",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 50,
+      "ty": 4,
+      "nm": "Path 12",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [323.929, 74.161, 0], "ix": 2 },
+        "a": { "a": 0, "k": [33.518, 65.915, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [67.035, 97.614],
+                    [67.035, 118.572],
+                    [59.196, 114.049],
+                    [59.196, 131.831],
+                    [40.358, 120.955],
+                    [40.358, 103.173],
+                    [0, 79.87],
+                    [0, 59.862],
+                    [30.801, 0],
+                    [52.115, 12.307],
+                    [22.136, 71.692],
+                    [40.358, 82.212],
+                    [40.358, 66.72],
+                    [40.358, 54.427],
+                    [40.358, 52.994],
+                    [59.196, 63.871],
+                    [59.196, 93.088]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 12",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 51,
+      "ty": 4,
+      "nm": "Path 11",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 24, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [331.561, 129.957, 0], "ix": 2 },
+        "a": { "a": 0, "k": [40.454, 28.386, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [13.331, 0],
+                    [0, 7.784],
+                    [0.531, 11.696],
+                    [34.066, 44.696],
+                    [55.027, 56.772],
+                    [66.798, 50.01],
+                    [67.559, 50.621],
+                    [80.908, 42.741],
+                    [80.308, 38.695],
+                    [72.305, 34.251],
+                    [71.612, 28.11],
+                    [41.28, 16.366]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 11",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 52,
+      "ty": 4,
+      "nm": "Path 10",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 24, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [186.994, 120.911, 0], "ix": 2 },
+        "a": { "a": 0, "k": [66.072, 36.224, 0], "ix": 1 },
+        "s": {
+          "a": 1,
+          "k": [
+            {
+              "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
+              "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
+              "t": 0,
+              "s": [100, 100, 100]
+            },
+            {
+              "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.833] },
+              "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0.167] },
+              "t": 180,
+              "s": [79.27, 79.27, 100]
+            },
+            { "t": 360, "s": [100, 100, 100] }
+          ],
+          "ix": 6
+        }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [7.553, 15.3],
+                    [7.707, 0.438],
+                    [28.725, -14.766],
+                    [7.139, -7.365],
+                    [-15.646, -12.382],
+                    [-16.483, -0.912],
+                    [-14.683, 8.051],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [-31.668, -9.187],
+                    [-3.775, 1.859],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [130.355, 14.288],
+                    [113.121, 0],
+                    [17.478, 25.079],
+                    [3.163, 35.482],
+                    [8.783, 59.941],
+                    [40.682, 72.319],
+                    [71.947, 65.862],
+                    [119.094, 38.633]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 1,
+              "ty": "sh",
+              "ix": 2,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0.065, -0.147],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [-0.031, 0.137],
+                    [-1.272, 2.87],
+                    [0, 0],
+                    [-11.394, 6.553],
+                    [-10.366, -3.134],
+                    [2.448, -4.729],
+                    [0, 0],
+                    [0, 0],
+                    [12.19, 2.781]
+                  ],
+                  "v": [
+                    [103.15, 19.912],
+                    [103.002, 20.34],
+                    [94.78, 27.846],
+                    [58.721, 48.546],
+                    [38.498, 52.819],
+                    [28.873, 46.496],
+                    [37.815, 38.123],
+                    [48.695, 31.858],
+                    [91.361, 12.937]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 2",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 10",
+          "np": 4,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 53,
+      "ty": 4,
+      "nm": "Path 9",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 24, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [41.527, 137.41, 0], "ix": 2 },
+        "a": { "a": 0, "k": [40.406, 24.229, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [13.825, 48.457],
+                    [47.202, 45.838],
+                    [68.431, 33.607],
+                    [59.735, 28.481],
+                    [74.205, 20.128],
+                    [73.142, 14.432],
+                    [80.812, 9.951],
+                    [80.281, 6.001],
+                    [69.874, 0],
+                    [39.381, 9.464],
+                    [40.255, 13.709],
+                    [0, 36.912],
+                    [0.607, 40.862]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.152941176471, 0.682352941176, 0.376470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Path 9",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 3600,
+      "st": 0,
+      "bm": 0
+    }
+  ],
+  "markers": []
+}
diff --git a/public/android-icon-192x192.png b/public/android-icon-192x192.png
new file mode 100644
index 00000000..6fec3554
Binary files /dev/null and b/public/android-icon-192x192.png differ
diff --git a/public/apple-icon-180x180.png b/public/apple-icon-180x180.png
new file mode 100644
index 00000000..e74a91e8
Binary files /dev/null and b/public/apple-icon-180x180.png differ
diff --git a/public/error.json b/public/error.json
new file mode 100644
index 00000000..6c76e254
--- /dev/null
+++ b/public/error.json
@@ -0,0 +1,2293 @@
+{
+  "v": "5.8.1",
+  "fr": 29.9700012207031,
+  "ip": 0,
+  "op": 301.000012259981,
+  "w": 1080,
+  "h": 1080,
+  "nm": "Composition 1",
+  "ddd": 0,
+  "assets": [
+    {
+      "id": "comp_0",
+      "nm": "Nuage",
+      "fr": 29.9700012207031,
+      "layers": [
+        {
+          "ddd": 0,
+          "ind": 1,
+          "ty": 4,
+          "nm": "Calque de forme 11",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": 0, "ix": 10 },
+            "p": { "a": 0, "k": [540, 540, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "d": 1,
+                  "ty": "el",
+                  "s": { "a": 0, "k": [54, 54], "ix": 2 },
+                  "p": { "a": 0, "k": [0, 0], "ix": 3 },
+                  "nm": "Tracé d'ellipse 1",
+                  "mn": "ADBE Vector Shape - Ellipse",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0.901960784314, 0.901960784314, 0.901960784314, 1], "ix": 4 },
+                  "o": { "a": 0, "k": 100, "ix": 5 },
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fond 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [-22, -239], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Ellipse 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        },
+        {
+          "ddd": 0,
+          "ind": 2,
+          "ty": 4,
+          "nm": "Calque de forme 12",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": 0, "ix": 10 },
+            "p": { "a": 0, "k": [544.675, 315.475, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [-54.5, -226.5, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [80, 80, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "d": 1,
+                  "ty": "el",
+                  "s": { "a": 0, "k": [31, 31], "ix": 2 },
+                  "p": { "a": 0, "k": [0, 0], "ix": 3 },
+                  "nm": "Tracé d'ellipse 1",
+                  "mn": "ADBE Vector Shape - Ellipse",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0.901960784314, 0.901960784314, 0.901960784314, 1], "ix": 4 },
+                  "o": { "a": 0, "k": 100, "ix": 5 },
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fond 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [-54.5, -226.5], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Ellipse 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        },
+        {
+          "ddd": 0,
+          "ind": 3,
+          "ty": 4,
+          "nm": "Calque de forme 10",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": 0, "ix": 10 },
+            "p": { "a": 0, "k": [540, 540, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "d": 1,
+                  "ty": "el",
+                  "s": { "a": 0, "k": [31, 31], "ix": 2 },
+                  "p": { "a": 0, "k": [0, 0], "ix": 3 },
+                  "nm": "Tracé d'ellipse 1",
+                  "mn": "ADBE Vector Shape - Ellipse",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0.901960784314, 0.901960784314, 0.901960784314, 1], "ix": 4 },
+                  "o": { "a": 0, "k": 100, "ix": 5 },
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fond 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [-54.5, -226.5], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Ellipse 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        },
+        {
+          "ddd": 0,
+          "ind": 4,
+          "ty": 4,
+          "nm": "Calque de forme 9",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": 0, "ix": 10 },
+            "p": { "a": 0, "k": [540, 540, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "ty": "rc",
+                  "d": 1,
+                  "s": { "a": 0, "k": [100, 20], "ix": 2 },
+                  "p": { "a": 0, "k": [0, 0], "ix": 3 },
+                  "r": { "a": 0, "k": 20, "ix": 4 },
+                  "nm": "Tracé rectangulaire 1",
+                  "mn": "ADBE Vector Shape - Rect",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0.901960784314, 0.901960784314, 0.901960784314, 1], "ix": 4 },
+                  "o": { "a": 0, "k": 100, "ix": 5 },
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fond 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [-26, -216], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Rectangle 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        }
+      ]
+    },
+    {
+      "id": "comp_1",
+      "nm": "éolienne",
+      "fr": 29.9700012207031,
+      "layers": [
+        {
+          "ddd": 0,
+          "ind": 1,
+          "ty": 0,
+          "nm": "Hélices",
+          "refId": "comp_2",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": {
+              "a": 1,
+              "k": [
+                { "i": { "x": [0.137], "y": [1] }, "o": { "x": [0.567], "y": [0] }, "t": 1, "s": [0] },
+                { "t": 300.00001221925, "s": [1440] }
+              ],
+              "ix": 10
+            },
+            "p": { "a": 0, "k": [800, 440, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [800, 440, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "w": 1080,
+          "h": 1080,
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        },
+        {
+          "ddd": 0,
+          "ind": 2,
+          "ty": 4,
+          "nm": "Socle eolienne",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": 0, "ix": 10 },
+            "p": { "a": 0, "k": [540, 540, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "ind": 0,
+                  "ty": "sh",
+                  "ix": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "i": [
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "o": [
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [264.75, -95],
+                        [257, -95],
+                        [242, 252],
+                        [288, 251]
+                      ],
+                      "c": true
+                    },
+                    "ix": 2
+                  },
+                  "nm": "Tracé 1",
+                  "mn": "ADBE Vector Shape - Group",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0.901960784314, 0.901960784314, 0.901960784314, 1], "ix": 4 },
+                  "o": { "a": 0, "k": 100, "ix": 5 },
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fond 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [0, 0], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Forme 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        }
+      ]
+    },
+    {
+      "id": "comp_2",
+      "nm": "Hélices",
+      "fr": 29.9700012207031,
+      "layers": [
+        {
+          "ddd": 0,
+          "ind": 1,
+          "ty": 4,
+          "nm": "Calque de forme 11",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": -239.6, "ix": 10 },
+            "p": { "a": 0, "k": [803, 442, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [263, -98, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "ind": 0,
+                  "ty": "sh",
+                  "ix": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "i": [
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "o": [
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [310, -98],
+                        [284, -92],
+                        [263, -96],
+                        [439, 10],
+                        [423, -17]
+                      ],
+                      "c": true
+                    },
+                    "ix": 2
+                  },
+                  "nm": "Tracé 1",
+                  "mn": "ADBE Vector Shape - Group",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0.901960784314, 0.901960784314, 0.901960784314, 1], "ix": 4 },
+                  "o": { "a": 0, "k": 100, "ix": 5 },
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fond 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [0, 0], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Forme 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        },
+        {
+          "ddd": 0,
+          "ind": 2,
+          "ty": 4,
+          "nm": "Calque de forme 10",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": -122.747, "ix": 10 },
+            "p": { "a": 0, "k": [803, 442, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [263, -98, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "ind": 0,
+                  "ty": "sh",
+                  "ix": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "i": [
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "o": [
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [310, -98],
+                        [284, -92],
+                        [263, -96],
+                        [439, 10],
+                        [423, -17]
+                      ],
+                      "c": true
+                    },
+                    "ix": 2
+                  },
+                  "nm": "Tracé 1",
+                  "mn": "ADBE Vector Shape - Group",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0.901960784314, 0.901960784314, 0.901960784314, 1], "ix": 4 },
+                  "o": { "a": 0, "k": 100, "ix": 5 },
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fond 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [0, 0], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Forme 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        },
+        {
+          "ddd": 0,
+          "ind": 3,
+          "ty": 4,
+          "nm": "Calque de forme 9",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": 0, "ix": 10 },
+            "p": { "a": 0, "k": [803, 442, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [263, -98, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "ind": 0,
+                  "ty": "sh",
+                  "ix": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "i": [
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "o": [
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [310, -98],
+                        [284, -92],
+                        [263, -96],
+                        [439, 10],
+                        [423, -17]
+                      ],
+                      "c": true
+                    },
+                    "ix": 2
+                  },
+                  "nm": "Tracé 1",
+                  "mn": "ADBE Vector Shape - Group",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0.901960784314, 0.901960784314, 0.901960784314, 1], "ix": 4 },
+                  "o": { "a": 0, "k": 100, "ix": 5 },
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fond 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [0, 0], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Forme 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        },
+        {
+          "ddd": 0,
+          "ind": 4,
+          "ty": 4,
+          "nm": "Calque de forme 8",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": 0, "ix": 10 },
+            "p": { "a": 0, "k": [800.5, 439.5, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [266.5, -94.5, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "d": 1,
+                  "ty": "el",
+                  "s": { "a": 0, "k": [27, 27], "ix": 2 },
+                  "p": { "a": 0, "k": [0, 0], "ix": 3 },
+                  "nm": "Tracé d'ellipse 1",
+                  "mn": "ADBE Vector Shape - Ellipse",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0.901960784314, 0.901960784314, 0.901960784314, 1], "ix": 4 },
+                  "o": { "a": 0, "k": 100, "ix": 5 },
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fond 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [266.5, -94.5], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Ellipse 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        }
+      ]
+    },
+    {
+      "id": "comp_3",
+      "nm": "plot base",
+      "fr": 29.9700012207031,
+      "layers": [
+        {
+          "ddd": 0,
+          "ind": 1,
+          "ty": 4,
+          "nm": "Calque de forme 8",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": 0, "ix": 10 },
+            "p": { "a": 0, "k": [541, 387.5, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [1, -152.5, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "ind": 0,
+                  "ty": "sh",
+                  "ix": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "i": [
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "o": [
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [13, -223],
+                        [-13, -223],
+                        [-52, -82],
+                        [54, -82]
+                      ],
+                      "c": true
+                    },
+                    "ix": 2
+                  },
+                  "nm": "Tracé 1",
+                  "mn": "ADBE Vector Shape - Group",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0.9019607843137255, 0.3764705882352941, 0.27058823529411763, 1], "ix": 4 },
+                  "o": { "a": 0, "k": 100, "ix": 5 },
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fond 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [0, 0], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Forme 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        },
+        {
+          "ddd": 0,
+          "ind": 2,
+          "ty": 4,
+          "nm": "Calque de forme 7",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": 0, "ix": 10 },
+            "p": { "a": 0, "k": [540, 502, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [0, -38, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "ind": 0,
+                  "ty": "sh",
+                  "ix": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "i": [
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "o": [
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [58, -56],
+                        [-59, -56],
+                        [-70, -20],
+                        [70, -20]
+                      ],
+                      "c": true
+                    },
+                    "ix": 2
+                  },
+                  "nm": "Tracé 1",
+                  "mn": "ADBE Vector Shape - Group",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0.9019607843137255, 0.3764705882352941, 0.27058823529411763, 1], "ix": 4 },
+                  "o": { "a": 0, "k": 100, "ix": 5 },
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fond 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [0, 0], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Forme 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        },
+        {
+          "ddd": 0,
+          "ind": 3,
+          "ty": 4,
+          "nm": "Calque de forme 5",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": 0, "ix": 10 },
+            "p": { "a": 0, "k": [539.75, 606.25, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [-0.25, 66.25, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "ty": "rc",
+                  "d": 1,
+                  "s": { "a": 0, "k": [256.5, 28.5], "ix": 2 },
+                  "p": { "a": 0, "k": [0, 0], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 4 },
+                  "nm": "Tracé rectangulaire 1",
+                  "mn": "ADBE Vector Shape - Rect",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0.7647058823529411, 0.3215686274509804, 0.23137254901960785, 1], "ix": 4 },
+                  "o": { "a": 0, "k": 100, "ix": 5 },
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fond 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [-0.25, 66.25], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Rectangle 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        },
+        {
+          "ddd": 0,
+          "ind": 4,
+          "ty": 4,
+          "nm": "Calque de forme 6",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": 0, "ix": 10 },
+            "p": { "a": 0, "k": [540, 572, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [0, 32, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "ind": 0,
+                  "ty": "sh",
+                  "ix": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "i": [
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "o": [
+                        [0, 0],
+                        [0, 0],
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [78, 3],
+                        [-76, 3],
+                        [-93, 60],
+                        [93, 61]
+                      ],
+                      "c": true
+                    },
+                    "ix": 2
+                  },
+                  "nm": "Tracé 1",
+                  "mn": "ADBE Vector Shape - Group",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0.9019607843137255, 0.3764705882352941, 0.27058823529411763, 1], "ix": 4 },
+                  "o": { "a": 0, "k": 100, "ix": 5 },
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fond 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [0, 0], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Forme 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        }
+      ]
+    },
+    {
+      "id": "comp_4",
+      "nm": "Tree",
+      "fr": 29.9700012207031,
+      "layers": [
+        {
+          "ddd": 0,
+          "ind": 1,
+          "ty": 4,
+          "nm": "Calque de forme 10",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": 0, "ix": 10 },
+            "p": { "a": 0, "k": [540, 540, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "ind": 0,
+                  "ty": "sh",
+                  "ix": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "i": [
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "o": [
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [-171.5, -79.5],
+                        [-152.5, -45]
+                      ],
+                      "c": false
+                    },
+                    "ix": 2
+                  },
+                  "nm": "Tracé 1",
+                  "mn": "ADBE Vector Shape - Group",
+                  "hd": false
+                },
+                {
+                  "ty": "st",
+                  "c": { "a": 0, "k": [0.850980451995, 0.84313731474, 0.84313731474, 1], "ix": 3 },
+                  "o": { "a": 0, "k": 100, "ix": 4 },
+                  "w": { "a": 0, "k": 7, "ix": 5 },
+                  "lc": 1,
+                  "lj": 1,
+                  "ml": 4,
+                  "bm": 0,
+                  "nm": "Contour 1",
+                  "mn": "ADBE Vector Graphic - Stroke",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [0, 0], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Forme 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        },
+        {
+          "ddd": 0,
+          "ind": 2,
+          "ty": 4,
+          "nm": "Calque de forme 9",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": 0, "ix": 10 },
+            "p": { "a": 0, "k": [540, 540, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "ind": 0,
+                  "ty": "sh",
+                  "ix": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "i": [
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "o": [
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [-154.5, -23.5],
+                        [-137.5, -48.5]
+                      ],
+                      "c": false
+                    },
+                    "ix": 2
+                  },
+                  "nm": "Tracé 1",
+                  "mn": "ADBE Vector Shape - Group",
+                  "hd": false
+                },
+                {
+                  "ty": "st",
+                  "c": { "a": 0, "k": [0.850980451995, 0.84313731474, 0.84313731474, 1], "ix": 3 },
+                  "o": { "a": 0, "k": 100, "ix": 4 },
+                  "w": { "a": 0, "k": 7, "ix": 5 },
+                  "lc": 1,
+                  "lj": 1,
+                  "ml": 4,
+                  "bm": 0,
+                  "nm": "Contour 1",
+                  "mn": "ADBE Vector Graphic - Stroke",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [0, 0], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Forme 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        },
+        {
+          "ddd": 0,
+          "ind": 3,
+          "ty": 4,
+          "nm": "Calque de forme 7",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": 0, "ix": 10 },
+            "p": { "a": 0, "k": [386, 620, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [-154, 80, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "ind": 0,
+                  "ty": "sh",
+                  "ix": 1,
+                  "ks": {
+                    "a": 0,
+                    "k": {
+                      "i": [
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "o": [
+                        [0, 0],
+                        [0, 0]
+                      ],
+                      "v": [
+                        [-154, 256],
+                        [-154, -96]
+                      ],
+                      "c": false
+                    },
+                    "ix": 2
+                  },
+                  "nm": "Tracé 1",
+                  "mn": "ADBE Vector Shape - Group",
+                  "hd": false
+                },
+                {
+                  "ty": "st",
+                  "c": { "a": 0, "k": [0.850980392157, 0.844306078144, 0.844306078144, 1], "ix": 3 },
+                  "o": { "a": 0, "k": 100, "ix": 4 },
+                  "w": { "a": 0, "k": 10, "ix": 5 },
+                  "lc": 1,
+                  "lj": 1,
+                  "ml": 4,
+                  "bm": 0,
+                  "nm": "Contour 1",
+                  "mn": "ADBE Vector Graphic - Stroke",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [0, 0], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Forme 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        },
+        {
+          "ddd": 0,
+          "ind": 4,
+          "ty": 4,
+          "nm": "Calque de forme 8",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": 0, "ix": 10 },
+            "p": { "a": 0, "k": [384, 475, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [-156, -65, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "ty": "rc",
+                  "d": 1,
+                  "s": { "a": 0, "k": [96, 222], "ix": 2 },
+                  "p": { "a": 0, "k": [0, 0], "ix": 3 },
+                  "r": { "a": 0, "k": 62, "ix": 4 },
+                  "nm": "Tracé rectangulaire 1",
+                  "mn": "ADBE Vector Shape - Rect",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0.949019667682, 0.949019667682, 0.949019667682, 1], "ix": 4 },
+                  "o": { "a": 0, "k": 100, "ix": 5 },
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fond 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [-156, -65], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Rectangle 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        }
+      ]
+    },
+    {
+      "id": "comp_5",
+      "nm": "ground",
+      "fr": 29.9700012207031,
+      "layers": [
+        {
+          "ddd": 0,
+          "ind": 1,
+          "ty": 4,
+          "nm": "Calque de forme 2",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": 0, "ix": 10 },
+            "p": { "a": 0, "k": [515, 795.5, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [-273.5, 78, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [662, 317, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "ty": "rc",
+                  "d": 1,
+                  "s": { "a": 0, "k": [59, 2], "ix": 2 },
+                  "p": { "a": 0, "k": [0, 0], "ix": 3 },
+                  "r": { "a": 0, "k": 2371, "ix": 4 },
+                  "nm": "Tracé rectangulaire 1",
+                  "mn": "ADBE Vector Shape - Rect",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0.133333333333, 0.145098039216, 0.235294132607, 1], "ix": 4 },
+                  "o": { "a": 0, "k": 100, "ix": 5 },
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fond 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [-273.5, 78], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Rectangle 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        },
+        {
+          "ddd": 0,
+          "ind": 2,
+          "ty": 4,
+          "nm": "Calque de forme 4",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": 0, "ix": 10 },
+            "p": { "a": 0, "k": [817, 795.5, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [-273.5, 78, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [78, 317, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "ty": "rc",
+                  "d": 1,
+                  "s": { "a": 0, "k": [59, 2], "ix": 2 },
+                  "p": { "a": 0, "k": [0, 0], "ix": 3 },
+                  "r": { "a": 0, "k": 2371, "ix": 4 },
+                  "nm": "Tracé rectangulaire 1",
+                  "mn": "ADBE Vector Shape - Rect",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0.133333333333, 0.145098039216, 0.235294132607, 1], "ix": 4 },
+                  "o": { "a": 0, "k": 100, "ix": 5 },
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fond 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [-273.5, 78], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Rectangle 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        },
+        {
+          "ddd": 0,
+          "ind": 3,
+          "ty": 4,
+          "nm": "Calque de forme 3",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": 0, "ix": 10 },
+            "p": { "a": 0, "k": [752, 795.5, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [-273.5, 78, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [89, 317, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "ty": "rc",
+                  "d": 1,
+                  "s": { "a": 0, "k": [59, 2], "ix": 2 },
+                  "p": { "a": 0, "k": [0, 0], "ix": 3 },
+                  "r": { "a": 0, "k": 2371, "ix": 4 },
+                  "nm": "Tracé rectangulaire 1",
+                  "mn": "ADBE Vector Shape - Rect",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0.133333333333, 0.145098039216, 0.235294132607, 1], "ix": 4 },
+                  "o": { "a": 0, "k": 100, "ix": 5 },
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fond 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [-273.5, 78], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Rectangle 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        },
+        {
+          "ddd": 0,
+          "ind": 4,
+          "ty": 4,
+          "nm": "Calque de forme 1",
+          "sr": 1,
+          "ks": {
+            "o": { "a": 0, "k": 100, "ix": 11 },
+            "r": { "a": 0, "k": 0, "ix": 10 },
+            "p": { "a": 0, "k": [270, 795.5, 0], "ix": 2, "l": 2 },
+            "a": { "a": 0, "k": [-273.5, 78, 0], "ix": 1, "l": 2 },
+            "s": { "a": 0, "k": [102, 317, 100], "ix": 6, "l": 2 }
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "ty": "rc",
+                  "d": 1,
+                  "s": { "a": 0, "k": [59, 2], "ix": 2 },
+                  "p": { "a": 0, "k": [0, 0], "ix": 3 },
+                  "r": { "a": 0, "k": 2371, "ix": 4 },
+                  "nm": "Tracé rectangulaire 1",
+                  "mn": "ADBE Vector Shape - Rect",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": { "a": 0, "k": [0.133333333333, 0.145098039216, 0.235294132607, 1], "ix": 4 },
+                  "o": { "a": 0, "k": 100, "ix": 5 },
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fond 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": { "a": 0, "k": [-273.5, 78], "ix": 2 },
+                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
+                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
+                  "r": { "a": 0, "k": 0, "ix": 6 },
+                  "o": { "a": 0, "k": 100, "ix": 7 },
+                  "sk": { "a": 0, "k": 0, "ix": 4 },
+                  "sa": { "a": 0, "k": 0, "ix": 5 },
+                  "nm": "Transformer "
+                }
+              ],
+              "nm": "Rectangle 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 630.000025660426,
+          "st": 0,
+          "bm": 0
+        }
+      ]
+    }
+  ],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 1,
+      "ty": 0,
+      "nm": "Nuage",
+      "refId": "comp_0",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 1,
+          "k": [
+            { "i": { "x": [0.667], "y": [1] }, "o": { "x": [0.333], "y": [0] }, "t": 0, "s": [0] },
+            { "i": { "x": [0.833], "y": [1] }, "o": { "x": [0.333], "y": [0] }, "t": 51, "s": [100] },
+            { "i": { "x": [0.833], "y": [1] }, "o": { "x": [0.167], "y": [0] }, "t": 234, "s": [100] },
+            { "t": 299.00001217852, "s": [0] }
+          ],
+          "ix": 11
+        },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": {
+          "a": 1,
+          "k": [
+            {
+              "i": { "x": 0.284, "y": 1 },
+              "o": { "x": 0.387, "y": 0 },
+              "t": 0,
+              "s": [704, 380, 0],
+              "to": [-36.667, 0, 0],
+              "ti": [36.667, 0, 0]
+            },
+            { "t": 299.00001217852, "s": [484, 380, 0] }
+          ],
+          "ix": 2,
+          "l": 2
+        },
+        "a": { "a": 0, "k": [514, 308, 0], "ix": 1, "l": 2 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+      },
+      "ao": 0,
+      "w": 1080,
+      "h": 1080,
+      "ip": 0,
+      "op": 630.000025660426,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 2,
+      "ty": 4,
+      "nm": "Calque de forme 7",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [540, 540, 0], "ix": 2, "l": 2 },
+        "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0.5, -0.5],
+                    [0, 0.5],
+                    [0, -1],
+                    [0, -0.5],
+                    [0, 0],
+                    [0.5, -0.5],
+                    [0, 0],
+                    [0.5, -0.5],
+                    [-0.5, -0.5]
+                  ],
+                  "o": [
+                    [-19, -5],
+                    [-34, -13],
+                    [-18.5, 1.5],
+                    [-17, 10.5],
+                    [0, 0],
+                    [17, -19.5],
+                    [6.5, -4],
+                    [-3.5, -13],
+                    [11.5, -19.5]
+                  ],
+                  "v": [
+                    [263.5, 176],
+                    [242.5, 196],
+                    [218, 213],
+                    [209.5, 232.5],
+                    [215, 254.5],
+                    [297, 253.5],
+                    [289.5, 225],
+                    [294, 210],
+                    [271.5, 204]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Tracé 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.83137254902, 0.821591725069, 0.821591725069, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fond 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transformer "
+            }
+          ],
+          "nm": "Forme 1",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 630.000025660426,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 3,
+      "ty": 0,
+      "nm": "éolienne",
+      "refId": "comp_1",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [804, 796, 0], "ix": 2, "l": 2 },
+        "a": { "a": 0, "k": [804, 796, 0], "ix": 1, "l": 2 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+      },
+      "ao": 0,
+      "w": 1080,
+      "h": 1080,
+      "ip": 0,
+      "op": 630.000025660426,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 4,
+      "ty": 0,
+      "nm": "plot base",
+      "refId": "comp_3",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": {
+          "a": 1,
+          "k": [
+            { "i": { "x": [0.667], "y": [1] }, "o": { "x": [0.333], "y": [0] }, "t": 0, "s": [0] },
+            { "i": { "x": [0.667], "y": [1] }, "o": { "x": [0.333], "y": [0] }, "t": 7.368, "s": [6] },
+            { "i": { "x": [0.667], "y": [1] }, "o": { "x": [0.333], "y": [0] }, "t": 14.736, "s": [-5] },
+            { "i": { "x": [0.667], "y": [1] }, "o": { "x": [0.333], "y": [0] }, "t": 22.264, "s": [4] },
+            { "i": { "x": [0.667], "y": [1] }, "o": { "x": [0.333], "y": [0] }, "t": 29.633, "s": [-2] },
+            { "t": 37.0000015070409, "s": [0] }
+          ],
+          "ix": 10
+        },
+        "p": {
+          "a": 1,
+          "k": [
+            {
+              "i": { "x": 0.667, "y": 1 },
+              "o": { "x": 0.333, "y": 0 },
+              "t": 0,
+              "s": [540, 792, 0],
+              "to": [0, -2.667, 0],
+              "ti": [0, 2, 0]
+            },
+            {
+              "i": { "x": 0.667, "y": 1 },
+              "o": { "x": 0.333, "y": 0 },
+              "t": 7.368,
+              "s": [540, 776, 0],
+              "to": [0, -2, 0],
+              "ti": [0, -1.333, 0]
+            },
+            {
+              "i": { "x": 0.667, "y": 1 },
+              "o": { "x": 0.333, "y": 0 },
+              "t": 14.736,
+              "s": [540, 780, 0],
+              "to": [0, 1.333, 0],
+              "ti": [0, -1.333, 0]
+            },
+            {
+              "i": { "x": 0.667, "y": 1 },
+              "o": { "x": 0.333, "y": 0 },
+              "t": 22.264,
+              "s": [540, 784, 0],
+              "to": [0, 1.333, 0],
+              "ti": [0, -2, 0]
+            },
+            {
+              "i": { "x": 0.667, "y": 1 },
+              "o": { "x": 0.333, "y": 0 },
+              "t": 29.633,
+              "s": [540, 788, 0],
+              "to": [0, 2, 0],
+              "ti": [0, -1.333, 0]
+            },
+            { "t": 37.0000015070409, "s": [540, 796, 0] }
+          ],
+          "ix": 2,
+          "l": 2
+        },
+        "a": { "a": 0, "k": [540, 616, 0], "ix": 1, "l": 2 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+      },
+      "ao": 0,
+      "w": 1080,
+      "h": 1080,
+      "ip": 0,
+      "op": 630.000025660426,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 5,
+      "ty": 0,
+      "nm": "éolienne",
+      "refId": "comp_1",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [670, 796, 0], "ix": 2, "l": 2 },
+        "a": { "a": 0, "k": [804, 796, 0], "ix": 1, "l": 2 },
+        "s": { "a": 0, "k": [63, 63, 100], "ix": 6, "l": 2 }
+      },
+      "ao": 0,
+      "w": 1080,
+      "h": 1080,
+      "ip": 0,
+      "op": 630.000025660426,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 6,
+      "ty": 0,
+      "nm": "Tree",
+      "refId": "comp_4",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [280, 790, 0], "ix": 2, "l": 2 },
+        "a": { "a": 0, "k": [384, 790, 0], "ix": 1, "l": 2 },
+        "s": { "a": 0, "k": [82, 82, 100], "ix": 6, "l": 2 }
+      },
+      "ao": 0,
+      "w": 1080,
+      "h": 1080,
+      "ip": 0,
+      "op": 630.000025660426,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 7,
+      "ty": 0,
+      "nm": "Tree",
+      "refId": "comp_4",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [540, 540, 0], "ix": 2, "l": 2 },
+        "a": { "a": 0, "k": [540, 540, 0], "ix": 1, "l": 2 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+      },
+      "ao": 0,
+      "w": 1080,
+      "h": 1080,
+      "ip": 0,
+      "op": 630.000025660426,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 8,
+      "ty": 4,
+      "nm": "Arbuste",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [68, 540, 0], "ix": 2, "l": 2 },
+        "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0.5, -0.5],
+                    [0, 0.5],
+                    [0, -1],
+                    [0, -0.5],
+                    [0, 0],
+                    [0.5, -0.5],
+                    [0, 0],
+                    [0.5, -0.5],
+                    [-0.5, -0.5]
+                  ],
+                  "o": [
+                    [-19, -5],
+                    [-34, -13],
+                    [-18.5, 1.5],
+                    [-17, 10.5],
+                    [0, 0],
+                    [17, -19.5],
+                    [6.5, -4],
+                    [-3.5, -13],
+                    [11.5, -19.5]
+                  ],
+                  "v": [
+                    [263.5, 176],
+                    [242.5, 196],
+                    [218, 213],
+                    [209.5, 232.5],
+                    [215, 254.5],
+                    [297, 253.5],
+                    [289.5, 225],
+                    [294, 210],
+                    [271.5, 204]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Tracé 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.901960784314, 0.901960784314, 0.901960784314, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fond 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transformer "
+            }
+          ],
+          "nm": "Forme 1",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 630.000025660426,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 9,
+      "ty": 0,
+      "nm": "ground",
+      "refId": "comp_5",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [540, 540, 0], "ix": 2, "l": 2 },
+        "a": { "a": 0, "k": [540, 540, 0], "ix": 1, "l": 2 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+      },
+      "ao": 0,
+      "w": 1080,
+      "h": 1080,
+      "ip": 0,
+      "op": 630.000025660426,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 10,
+      "ty": 0,
+      "nm": "Nuage",
+      "refId": "comp_0",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 1,
+          "k": [
+            { "i": { "x": [0.667], "y": [1] }, "o": { "x": [0.333], "y": [0] }, "t": 0, "s": [0] },
+            { "i": { "x": [0.667], "y": [1] }, "o": { "x": [0.333], "y": [0] }, "t": 51, "s": [100] },
+            { "i": { "x": [0.667], "y": [1] }, "o": { "x": [0.333], "y": [0] }, "t": 234, "s": [100] },
+            { "t": 299.00001217852, "s": [0] }
+          ],
+          "ix": 11
+        },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": {
+          "a": 1,
+          "k": [
+            {
+              "i": { "x": 0.667, "y": 1 },
+              "o": { "x": 0.333, "y": 0 },
+              "t": 0,
+              "s": [193, 606, 0],
+              "to": [56.5, 0, 0],
+              "ti": [-56.5, 0, 0]
+            },
+            { "t": 299.00001217852, "s": [532, 606, 0] }
+          ],
+          "ix": 2,
+          "l": 2
+        },
+        "a": { "a": 0, "k": [514, 308, 0], "ix": 1, "l": 2 },
+        "s": { "a": 0, "k": [60, 60, 100], "ix": 6, "l": 2 }
+      },
+      "ao": 0,
+      "w": 1080,
+      "h": 1080,
+      "ip": 0,
+      "op": 630.000025660426,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 11,
+      "ty": 4,
+      "nm": "Calque de forme 6",
+      "td": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [572, 712, 0], "ix": 2, "l": 2 },
+        "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ty": "rc",
+              "d": 1,
+              "s": { "a": 0, "k": [784, 628], "ix": 2 },
+              "p": { "a": 0, "k": [0, 0], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 4 },
+              "nm": "Tracé rectangulaire 1",
+              "mn": "ADBE Vector Shape - Rect",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.909803921569, 0.909803921569, 0.909803921569, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fond 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [-36, -234], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transformer "
+            }
+          ],
+          "nm": "Rectangle 1",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 630.000025660426,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 12,
+      "ty": 4,
+      "nm": "Calque de forme 5",
+      "tt": 1,
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [540, 716, 0], "ix": 2, "l": 2 },
+        "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": { "a": 0, "k": [728, 728], "ix": 2 },
+              "p": { "a": 0, "k": [0, 0], "ix": 3 },
+              "nm": "Tracé d'ellipse 1",
+              "mn": "ADBE Vector Shape - Ellipse",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.976470588235, 0.976470588235, 0.976470588235, 1], "ix": 4 },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fond 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [8, -140], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transformer "
+            }
+          ],
+          "nm": "Ellipse 1",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 630.000025660426,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 14,
+      "ty": 1,
+      "nm": "Blanc uni 1",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [540, 540, 0], "ix": 2, "l": 2 },
+        "a": { "a": 0, "k": [540, 540, 0], "ix": 1, "l": 2 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+      },
+      "ao": 0,
+      "sw": 1080,
+      "sh": 1080,
+      "sc": "#ffffff",
+      "ip": 0,
+      "op": 630.000025660426,
+      "st": 0,
+      "bm": 0
+    }
+  ],
+  "markers": []
+}
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
new file mode 100644
index 00000000..774ba28a
Binary files /dev/null and b/public/favicon-16x16.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
new file mode 100644
index 00000000..603780c9
Binary files /dev/null and b/public/favicon-32x32.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 00000000..25ca695a
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/icons/social/social_google.svg b/public/icons/social/social_google.svg
new file mode 100644
index 00000000..9836d42e
--- /dev/null
+++ b/public/icons/social/social_google.svg
@@ -0,0 +1,14 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="36" cy="36" r="35.25" stroke="#F2F2F2" stroke-width="1.5"/>
+<g clip-path="url(#clip0_4178_5317)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.5006 36.3072C49.5017 35.381 49.4179 34.4565 49.2501 33.5449H36.2725V38.7669H43.6866C43.5327 39.592 43.2098 40.378 42.7374 41.0775C42.265 41.777 41.6528 42.3754 40.9379 42.8366V46.2246H45.3893C47.9939 43.8744 49.4967 40.4126 49.4967 36.3047L49.5006 36.3072Z" fill="#3E82F1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.2759 49.4973C39.9953 49.4973 43.1139 48.2891 45.3927 46.2275L40.9414 42.8395C39.7072 43.6496 38.1291 44.1291 36.2759 44.1291C32.6876 44.1291 29.6508 41.7534 28.5685 38.5625H23.9653V42.0612C25.112 44.2973 26.8706 46.177 29.0445 47.4901C31.2185 48.8033 33.7222 49.4982 36.2759 49.4973Z" fill="#32A753"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.5683 38.5633C27.9921 36.9003 27.9921 35.0973 28.5683 33.4342V29.9355H23.9651C23.0017 31.8173 22.5 33.8935 22.5 35.9988C22.5 38.1041 23.0017 40.1803 23.9651 42.062L28.5683 38.5633Z" fill="#F9BB00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.2758 27.8682C38.299 27.8682 40.1146 28.5499 41.5421 29.8878L45.4925 26.0152C43.1072 23.8366 39.9887 22.5 36.2784 22.5C33.7246 22.4991 31.2209 23.194 29.047 24.5072C26.873 25.8203 25.1145 27.7 23.9678 29.9361L28.5709 33.4348C29.6533 30.2439 32.6901 27.8682 36.2784 27.8682H36.2758Z" fill="#E74133"/>
+</g>
+<defs>
+<clipPath id="clip0_4178_5317">
+<rect width="27" height="27" fill="white" transform="translate(22.5 22.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icons/social/social_kakao.png b/public/icons/social/social_kakao.png
new file mode 100644
index 00000000..f3438295
Binary files /dev/null and b/public/icons/social/social_kakao.png differ
diff --git a/public/icons/social/social_kakao.svg b/public/icons/social/social_kakao.svg
new file mode 100644
index 00000000..dac90e6b
--- /dev/null
+++ b/public/icons/social/social_kakao.svg
@@ -0,0 +1,12 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="36" cy="36" r="35.25" stroke="#F2F2F2" stroke-width="1.5"/>
+<g clip-path="url(#clip0_4178_5324)">
+<path d="M31.9629 35.0875H33.6908L32.8268 32.6934L31.9629 35.0875Z" fill="#331D1E"/>
+<path d="M36 22.5C27.7154 22.5 21 27.664 21 34.0349C21 38.1536 23.8082 41.7716 28.0312 43.8085C27.8019 44.5808 26.5543 48.7798 26.5053 49.1103C26.5053 49.1103 26.475 49.3579 26.6394 49.4522C26.6944 49.4792 26.7545 49.4951 26.816 49.4987C26.8775 49.5023 26.9392 49.4937 26.9971 49.4733C27.4702 49.4086 32.4779 45.9833 33.3433 45.3939C34.2235 45.5131 35.1113 45.5718 36 45.5697C44.2846 45.5697 51 40.4058 51 34.0349C51 27.664 44.2846 22.5 36 22.5ZM28.5764 32.2441C28.5577 33.8759 28.5909 35.5921 28.5635 37.1985C28.5548 37.7119 28.2519 37.8653 27.8423 38.0116C27.796 38.0275 27.7462 38.0309 27.6981 38.0214C27.2293 37.9314 26.8558 37.7682 26.8442 37.1999C26.8111 35.5949 26.8543 33.8759 26.8313 32.2441C26.4346 32.2287 25.8692 32.2596 25.5014 32.2441C24.9909 32.2118 24.6361 31.8953 24.6577 31.424C24.6793 30.9528 24.9375 30.6138 25.5101 30.6053C26.863 30.5857 28.5389 30.5857 29.8918 30.6053C30.4688 30.6138 30.7255 30.9542 30.7428 31.424C30.7601 31.8939 30.4111 32.2118 29.9019 32.2441C29.5385 32.2596 28.9745 32.2287 28.5764 32.2441ZM35.8457 37.9342C35.6727 38.011 35.4848 38.0508 35.2947 38.051C34.9341 38.051 34.6587 37.9103 34.5736 37.6782L34.1409 36.5838H31.5072L31.0745 37.6782C30.9909 37.9075 30.7154 38.051 30.3534 38.051C30.1637 38.051 29.9763 38.0111 29.8038 37.9342C29.5644 37.8273 29.3351 37.5319 29.5976 36.7357L31.6731 31.4212C31.7601 31.1871 31.916 30.9833 32.1212 30.8351C32.3265 30.687 32.5719 30.6012 32.8269 30.5885C33.0817 30.6026 33.3267 30.6891 33.5317 30.8373C33.7367 30.9855 33.8928 31.189 33.9808 31.4226L36.049 36.7343C36.313 37.5319 36.0837 37.8329 35.8457 37.9342ZM40.2188 37.9342H37.4423C37.2273 37.9384 37.0193 37.8593 36.8639 37.7143C36.7085 37.5693 36.6183 37.3702 36.613 37.1605V31.4325C36.6222 31.21 36.7193 30.9996 36.884 30.8454C37.0486 30.6911 37.2681 30.605 37.4964 30.605C37.7247 30.605 37.9442 30.6911 38.1088 30.8454C38.2735 30.9996 38.3706 31.21 38.3798 31.4325V36.3911H40.2188C40.3269 36.3847 40.4353 36.4 40.5373 36.436C40.6392 36.472 40.7325 36.5279 40.8114 36.6004C40.8903 36.6729 40.9532 36.7603 40.9962 36.8574C41.0391 36.9544 41.0613 37.059 41.0613 37.1647C41.0613 37.2705 41.0391 37.3751 40.9962 37.4721C40.9532 37.5692 40.8903 37.6566 40.8114 37.7291C40.7325 37.8015 40.6392 37.8575 40.5373 37.8935C40.4353 37.9295 40.3269 37.9448 40.2188 37.9384V37.9342ZM46.9976 37.2984C46.9751 37.4649 46.9022 37.621 46.7881 37.7469C46.6741 37.8727 46.5242 37.9625 46.3576 38.0048C46.1909 38.0471 46.0152 38.04 45.8527 37.9843C45.6903 37.9286 45.5485 37.8269 45.4457 37.6922L43.4163 35.0716L43.1163 35.3642V37.2055C43.1163 37.4294 43.0252 37.6441 42.8629 37.8023C42.7006 37.9606 42.4805 38.0495 42.251 38.0495C42.0214 38.0495 41.8013 37.9606 41.639 37.8023C41.4768 37.6441 41.3856 37.4294 41.3856 37.2055V31.4381C41.3856 31.2143 41.4768 30.9996 41.639 30.8413C41.8013 30.683 42.0214 30.5941 42.251 30.5941C42.4805 30.5941 42.7006 30.683 42.8629 30.8413C43.0252 30.9996 43.1163 31.2143 43.1163 31.4381V33.2471L45.5308 30.8923C45.594 30.8314 45.669 30.7833 45.7515 30.7509C45.8339 30.7186 45.9222 30.7025 46.0111 30.7038C46.2272 30.7093 46.4335 30.7925 46.5906 30.9374C46.7477 31.0823 46.8443 31.2786 46.862 31.4887C46.8698 31.5825 46.857 31.6768 46.8244 31.7654C46.7918 31.8539 46.7402 31.9346 46.6731 32.0022L44.6971 33.9251L46.8274 36.678C46.9653 36.8566 47.025 37.0812 46.9933 37.3026L46.9976 37.2984Z" fill="#331D1E"/>
+</g>
+<defs>
+<clipPath id="clip0_4178_5324">
+<rect width="30" height="27" fill="white" transform="translate(21 22.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/emptyComment-md.svg b/public/images/emptyComment-md.svg
new file mode 100644
index 00000000..ab78b5d1
--- /dev/null
+++ b/public/images/emptyComment-md.svg
@@ -0,0 +1,173 @@
+<svg width="264" height="204" viewBox="0 0 264 204" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="264" height="204" fill="#FCFCFC"/>
+<circle cx="132" cy="60" r="60" fill="url(#paint0_linear_1240_71249)"/>
+<g filter="url(#filter0_di_1240_71249)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M128.311 25.5H133C136.314 25.5 139 28.1863 139 31.5V34.5C139 36.1569 137.657 37.5 136 37.5H109C107.343 37.5 106 36.1569 106 34.5V31.5C106 28.1863 108.686 25.5 112 25.5H116.689C117.355 22.9122 119.704 21 122.5 21C125.296 21 127.645 22.9122 128.311 25.5Z" fill="#D9D9D9"/>
+</g>
+<g filter="url(#filter1_b_1240_71249)">
+<rect x="94" y="30" width="57" height="69" rx="6" fill="url(#paint1_linear_1240_71249)" fill-opacity="0.5"/>
+</g>
+<g filter="url(#filter2_bdi_1240_71249)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M163.192 47.5607C162.607 46.9749 161.657 46.9749 161.071 47.5607L154.379 54.2529L167.299 67.1732L164.715 69.7575L151.795 56.8371L134.741 73.891C134.234 74.3981 133.925 75.0702 133.871 75.7853L133.026 86.9179C132.957 87.8338 133.719 88.5965 134.635 88.527L145.768 87.6824C146.483 87.6282 147.155 87.3195 147.662 86.8124L173.993 60.482C174.578 59.8963 174.578 58.9465 173.993 58.3607L163.192 47.5607Z" fill="url(#paint2_linear_1240_71249)" fill-opacity="0.8" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter3_bdi_1240_71249)">
+<rect x="104.5" y="43.5" width="36" height="3" rx="1.5" fill="url(#paint3_linear_1240_71249)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter4_bdi_1240_71249)">
+<rect x="104.5" y="54" width="36" height="3" rx="1.5" fill="url(#paint4_linear_1240_71249)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter5_bdi_1240_71249)">
+<rect x="104.5" y="64.5" width="24" height="3" rx="1.5" fill="url(#paint5_linear_1240_71249)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter6_bdi_1240_71249)">
+<rect x="104.5" y="75" width="15" height="3" rx="1.5" fill="url(#paint6_linear_1240_71249)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<path d="M70.0811 164.232V165.393H55.8252V164.232H70.0811ZM68.4111 161.613V162.738H57.6357V157.43H68.3057V158.59H58.9893V161.613H68.4111ZM62.9443 166.764C66.3018 166.764 68.3057 167.783 68.3232 169.576C68.3057 171.387 66.3018 172.389 62.9443 172.389C59.5693 172.389 57.5479 171.387 57.5479 169.576C57.5479 167.783 59.5693 166.764 62.9443 166.764ZM62.9443 167.836C60.4307 167.854 58.9365 168.486 58.9541 169.576C58.9365 170.684 60.4307 171.299 62.9443 171.299C65.4229 171.299 66.9346 170.684 66.9346 169.576C66.9346 168.486 65.4229 167.854 62.9443 167.836ZM85.6729 165.41V166.553H71.3643V165.41H77.833V163.758H73.2275V159.943H82.4385V158.326H73.1748V157.201H83.8271V160.98H74.5986V162.65H84.1611V163.758H79.1865V165.41H85.6729ZM83.915 167.748V172.283H82.5264V168.873H72.9639V167.748H83.915ZM96.0264 161.93V163.055H92.8623V165.234C94.3213 165.173 95.7803 165.067 97.1338 164.918L97.2393 165.938C93.8818 166.395 90.1553 166.5 87.2197 166.5L87.0088 165.375C88.3799 165.366 89.918 165.349 91.4912 165.287V163.055H88.4326V157.816H95.9033V158.959H89.8213V161.93H96.0264ZM99.8232 156.814V168.504H98.4346V156.814H99.8232ZM100.333 170.93V172.09H89.6807V167.695H91.0518V170.93H100.333ZM113.71 158.168V159.311H109.087V163.986C111.17 163.995 112.699 163.916 114.483 163.547L114.606 164.689C112.655 165.059 111.056 165.129 108.735 165.129H107.733V158.168H113.71ZM120.284 156.797V167.133H118.966V162.053H116.769V165.779H115.485V157.096H116.769V160.893H118.966V156.797H120.284ZM115.749 167.027C115.749 169.119 118.386 170.859 121.128 171.281L120.53 172.354C118.21 171.932 116.004 170.701 115.063 168.926C114.114 170.701 111.899 171.932 109.597 172.354L108.999 171.281C111.724 170.859 114.36 169.119 114.378 167.027V166.43H115.749V167.027ZM134.997 157.482V158.484C134.997 159.548 134.997 160.884 134.646 162.65H136.878V163.758H122.569V162.65H133.257C133.608 160.91 133.626 159.627 133.626 158.607H124.38V157.482H134.997ZM135.05 165.34V169.277H125.681V171.123H135.454V172.248H124.292V168.188H133.679V166.447H124.274V165.34H135.05ZM151.011 156.797V172.459H149.622V156.797H151.011ZM142.696 158.01C145.017 158.027 146.687 160.137 146.687 163.459C146.687 166.781 145.017 168.891 142.696 168.891C140.358 168.891 138.706 166.781 138.706 163.459C138.706 160.137 140.358 158.027 142.696 158.01ZM142.696 159.24C141.132 159.258 140.042 160.91 140.042 163.459C140.042 166.008 141.132 167.66 142.696 167.66C144.261 167.66 145.351 166.008 145.351 163.459C145.351 160.91 144.261 159.258 142.696 159.24ZM161.312 165.973V167.924H164.159V165.973H165.442V172.213H160.011V165.973H161.312ZM161.312 171.123H164.159V168.979H161.312V171.123ZM169.907 167.203C169.89 168.855 170.874 170.578 172.79 171.281L172.069 172.336C170.628 171.756 169.679 170.657 169.204 169.348C168.703 170.631 167.754 171.738 166.374 172.336L165.653 171.281C167.534 170.508 168.536 168.785 168.536 167.203V165.867H169.907V167.203ZM162.507 157.5C164.599 157.5 166.198 158.687 166.497 160.488H169.767V156.797H171.155V165.076H169.767V161.631H166.515C166.233 163.477 164.625 164.689 162.507 164.689C160.134 164.689 158.446 163.23 158.446 161.086C158.446 158.959 160.134 157.5 162.507 157.5ZM162.507 158.66C160.907 158.66 159.765 159.662 159.765 161.086C159.765 162.527 160.907 163.547 162.507 163.547C164.089 163.547 165.214 162.527 165.214 161.086C165.214 159.662 164.089 158.66 162.507 158.66ZM177.958 158.01C180.085 158.027 181.614 159.847 181.843 162.773H185.341V156.797H186.712V172.459H185.341V163.916H181.86C181.693 166.975 180.138 168.891 177.958 168.891C175.655 168.891 174.038 166.781 174.038 163.459C174.038 160.137 175.655 158.027 177.958 158.01ZM177.958 159.24C176.411 159.258 175.356 160.91 175.356 163.459C175.356 166.008 176.411 167.66 177.958 167.66C179.487 167.66 180.56 166.008 180.56 163.459C180.56 160.91 179.487 159.258 177.958 159.24ZM203.622 169.26V170.42H189.313V169.26H192.864V165.041C191.528 164.347 190.72 163.222 190.72 161.807C190.72 159.381 193.093 157.799 196.433 157.781C199.772 157.799 202.146 159.381 202.146 161.807C202.146 163.195 201.363 164.312 200.071 165.006V169.26H203.622ZM196.433 158.924C193.866 158.906 192.056 160.066 192.056 161.807C192.056 163.547 193.866 164.725 196.433 164.725C198.981 164.725 200.81 163.547 200.81 161.807C200.81 160.066 198.981 158.906 196.433 158.924ZM194.218 169.26H198.683V165.533C198.006 165.718 197.25 165.814 196.433 165.814C195.633 165.814 194.886 165.727 194.218 165.551V169.26ZM206.522 171.105C205.907 171.105 205.38 170.596 205.397 169.963C205.38 169.348 205.907 168.838 206.522 168.838C207.138 168.838 207.647 169.348 207.647 169.963C207.647 170.596 207.138 171.105 206.522 171.105ZM8.10059 184.168V185.311H3.47754V189.986C5.56055 189.995 7.08984 189.916 8.87402 189.547L8.99707 190.689C7.0459 191.059 5.44629 191.129 3.12598 191.129H2.12402V184.168H8.10059ZM14.6748 182.797V193.133H13.3564V188.053H11.1592V191.779H9.87598V183.096H11.1592V186.893H13.3564V182.797H14.6748ZM10.1396 193.027C10.1396 195.119 12.7764 196.859 15.5186 197.281L14.9209 198.354C12.6006 197.932 10.3945 196.701 9.4541 194.926C8.50488 196.701 6.29004 197.932 3.9873 198.354L3.38965 197.281C6.11426 196.859 8.75098 195.119 8.76855 193.027V192.43H10.1396V193.027ZM29.3877 183.482V184.484C29.3877 185.548 29.3877 186.884 29.0361 188.65H31.2686V189.758H16.96V188.65H27.6475C27.999 186.91 28.0166 185.627 28.0166 184.607H18.7705V183.482H29.3877ZM29.4404 191.34V195.277H20.0713V197.123H29.8447V198.248H18.6826V194.188H28.0693V192.447H18.665V191.34H29.4404ZM39.6357 183.078C43.1162 183.078 45.1553 184.027 45.1553 185.768C45.1553 187.543 43.1162 188.492 39.6357 188.51C36.1553 188.492 34.0986 187.543 34.0986 185.768C34.0986 184.027 36.1553 183.078 39.6357 183.078ZM39.6357 184.115C37.0342 184.115 35.5225 184.748 35.54 185.768C35.5225 186.857 37.0342 187.455 39.6357 187.455C42.2197 187.455 43.749 186.857 43.749 185.768C43.749 184.748 42.2197 184.115 39.6357 184.115ZM46.7549 189.564V190.689H32.5166V189.564H46.7549ZM44.9268 192.043V195.541H35.6455V197.158H45.4014V198.248H34.2744V194.521H43.5732V193.098H34.2393V192.043H44.9268ZM66.8467 190.232V191.393H52.5908V190.232H66.8467ZM65.1768 187.613V188.738H54.4014V183.43H65.0713V184.59H55.7549V187.613H65.1768ZM59.71 192.764C63.0674 192.764 65.0713 193.783 65.0889 195.576C65.0713 197.387 63.0674 198.389 59.71 198.389C56.335 198.389 54.3135 197.387 54.3135 195.576C54.3135 193.783 56.335 192.764 59.71 192.764ZM59.71 193.836C57.1963 193.854 55.7021 194.486 55.7197 195.576C55.7021 196.684 57.1963 197.299 59.71 197.299C62.1885 197.299 63.7002 196.684 63.7002 195.576C63.7002 194.486 62.1885 193.854 59.71 193.836ZM82.4385 191.41V192.553H68.1299V191.41H74.5986V189.758H69.9932V185.943H79.2041V184.326H69.9404V183.201H80.5928V186.98H71.3643V188.65H80.9268V189.758H75.9521V191.41H82.4385ZM80.6807 193.748V198.283H79.292V194.873H69.7295V193.748H80.6807ZM95.7979 182.797V189.248H98.417V190.391H95.7979V198.424H94.4268V182.797H95.7979ZM92.915 185.311V186.453H83.6162V185.311H87.6416V182.99H89.0127V185.311H92.915ZM88.3447 187.754C90.5596 187.754 92.1592 189.23 92.1768 191.34C92.1592 193.449 90.5596 194.926 88.3447 194.926C86.1123 194.926 84.4951 193.449 84.5127 191.34C84.4951 189.23 86.1123 187.754 88.3447 187.754ZM88.3447 188.914C86.8857 188.914 85.8135 189.934 85.8311 191.34C85.8135 192.764 86.8857 193.766 88.3447 193.748C89.7861 193.766 90.8408 192.764 90.8584 191.34C90.8408 189.934 89.7861 188.914 88.3447 188.914ZM111.794 184.379V185.943C111.776 187.859 111.776 190.004 111.214 193.15L109.808 192.992C110.405 190.004 110.405 187.807 110.405 185.943V185.521H100.772V184.379H111.794ZM113.499 195.066V196.209H99.2607V195.066H104.851V189.477H106.204V195.066H113.499ZM124.45 183.939C126.911 183.939 128.651 185.434 128.651 187.613C128.651 189.793 126.911 191.287 124.45 191.287C121.989 191.287 120.214 189.793 120.231 187.613C120.214 185.434 121.989 183.939 124.45 183.939ZM124.45 185.152C122.78 185.152 121.567 186.154 121.585 187.613C121.567 189.072 122.78 190.074 124.45 190.074C126.103 190.074 127.298 189.072 127.298 187.613C127.298 186.154 126.103 185.152 124.45 185.152ZM132.149 182.797V198.459H130.778V182.797H132.149ZM119.423 193.836C122.306 193.836 126.278 193.818 129.741 193.309L129.847 194.328C126.278 194.996 122.429 195.014 119.616 195.014L119.423 193.836ZM147.847 182.814V194.469H146.458V190.689H142.257V189.547H146.458V187.174H142.468C141.369 189.644 138.97 191.524 135.771 192.553L135.155 191.445C138.812 190.241 141.325 187.991 141.624 185.17H135.929V184.027H143.136C143.136 184.73 143.039 185.407 142.872 186.049H146.458V182.814H147.847ZM148.251 196.93V198.09H137.897V193.309H139.304V196.93H148.251ZM157.567 183.078C161.048 183.078 163.087 184.027 163.087 185.768C163.087 187.543 161.048 188.492 157.567 188.51C154.087 188.492 152.03 187.543 152.03 185.768C152.03 184.027 154.087 183.078 157.567 183.078ZM157.567 184.115C154.966 184.115 153.454 184.748 153.472 185.768C153.454 186.857 154.966 187.455 157.567 187.455C160.151 187.455 161.681 186.857 161.681 185.768C161.681 184.748 160.151 184.115 157.567 184.115ZM164.687 189.564V190.689H150.448V189.564H164.687ZM162.858 192.043V195.541H153.577V197.158H163.333V198.248H152.206V194.521H161.505V193.098H152.171V192.043H162.858ZM177.589 192.676C180.946 192.676 183.073 193.73 183.073 195.541C183.073 197.334 180.946 198.389 177.589 198.389C174.249 198.389 172.122 197.334 172.122 195.541C172.122 193.73 174.249 192.676 177.589 192.676ZM177.589 193.73C175.093 193.748 173.476 194.434 173.493 195.541C173.476 196.631 175.093 197.299 177.589 197.299C180.085 197.299 181.685 196.631 181.702 195.541C181.685 194.434 180.085 193.748 177.589 193.73ZM182.95 183.605V184.924C182.95 186.189 182.95 187.455 182.511 189.072L181.157 188.914C181.579 187.297 181.579 186.154 181.579 184.924V184.73H172.228V183.605H182.95ZM184.761 190.092V191.217H170.54V190.092H176.429V187.068H177.782V190.092H184.761ZM200.37 191.709V192.852H196.591V198.424H195.202V192.852H191.194V198.424H189.771V192.852H186.062V191.709H200.37ZM193.181 183.43C196.468 183.43 198.683 184.748 198.683 186.84C198.683 188.914 196.468 190.232 193.181 190.215C189.894 190.232 187.679 188.914 187.679 186.84C187.679 184.748 189.894 183.43 193.181 183.43ZM193.181 184.555C190.737 184.555 189.085 185.451 189.103 186.84C189.085 188.229 190.737 189.107 193.181 189.107C195.606 189.107 197.276 188.229 197.276 186.84C197.276 185.451 195.606 184.555 193.181 184.555ZM209.44 185.504V186.629H201.601V185.504H204.853V183.271H206.224V185.504H209.44ZM205.521 187.684C207.489 187.684 208.896 189.16 208.913 191.234C208.896 193.326 207.489 194.82 205.521 194.82C203.569 194.82 202.163 193.326 202.163 191.234C202.163 189.16 203.569 187.684 205.521 187.684ZM205.521 188.844C204.29 188.861 203.394 189.863 203.394 191.234C203.394 192.623 204.29 193.625 205.521 193.607C206.769 193.625 207.683 192.623 207.683 191.234C207.683 189.863 206.769 188.861 205.521 188.844ZM214.942 182.797V198.424H213.624V190.531H211.55V197.65H210.249V183.184H211.55V189.389H213.624V182.797H214.942ZM231.501 195.277V196.42H217.192V195.277H223.626V191.902H218.88V183.904H220.269V186.734H228.39V183.904H229.743V191.902H224.979V195.277H231.501ZM220.269 190.777H228.39V187.859H220.269V190.777ZM237.39 187.244C237.39 189.723 238.603 192.412 240.677 193.643L239.886 194.715C238.383 193.801 237.302 192.131 236.757 190.232C236.177 192.307 235.017 194.091 233.452 195.049L232.573 194.012C234.735 192.746 236.054 189.969 236.054 187.297V184.273H237.39V187.244ZM246.144 182.797V198.424H244.808V182.797H246.144ZM242.909 183.131V197.633H241.608V189.582H238.954V188.404H241.608V183.131H242.909ZM262.614 195.26V196.42H248.306V195.26H251.856V191.041C250.521 190.347 249.712 189.222 249.712 187.807C249.712 185.381 252.085 183.799 255.425 183.781C258.765 183.799 261.138 185.381 261.138 187.807C261.138 189.195 260.355 190.312 259.063 191.006V195.26H262.614ZM255.425 184.924C252.858 184.906 251.048 186.066 251.048 187.807C251.048 189.547 252.858 190.725 255.425 190.725C257.974 190.725 259.802 189.547 259.802 187.807C259.802 186.066 257.974 184.906 255.425 184.924ZM253.21 195.26H257.675V191.533C256.998 191.718 256.242 191.814 255.425 191.814C254.625 191.814 253.878 191.727 253.21 191.551V195.26Z" fill="#999999"/>
+<defs>
+<filter id="filter0_di_1240_71249" x="97" y="18" width="51" height="37.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="9"/>
+<feGaussianBlur stdDeviation="4.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.956863 0 0 0 0 0.956863 0 0 0 0 0.956863 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71249"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71249" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-3" dy="-3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.992157 0 0 0 0 0.976471 0 0 0 0 0.94902 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71249"/>
+</filter>
+<filter id="filter1_b_1240_71249" x="88" y="24" width="69" height="81" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71249"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71249" result="shape"/>
+</filter>
+<filter id="filter2_bdi_1240_71249" x="121.022" y="35.1211" width="71.4102" height="71.4102" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="1.5"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71249"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="3" dy="3"/>
+<feGaussianBlur stdDeviation="7.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71249" result="effect2_dropShadow_1240_71249"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71249" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-3" dy="-3"/>
+<feGaussianBlur stdDeviation="7.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71249"/>
+</filter>
+<filter id="filter3_bdi_1240_71249" x="86.5" y="25.5" width="84" height="51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71249"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="6" dy="6"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71249" result="effect2_dropShadow_1240_71249"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71249" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="12" dy="12"/>
+<feGaussianBlur stdDeviation="7.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71249"/>
+</filter>
+<filter id="filter4_bdi_1240_71249" x="86.5" y="36" width="84" height="51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71249"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="6" dy="6"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71249" result="effect2_dropShadow_1240_71249"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71249" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="12" dy="12"/>
+<feGaussianBlur stdDeviation="7.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71249"/>
+</filter>
+<filter id="filter5_bdi_1240_71249" x="86.5" y="46.5" width="72" height="51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71249"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="6" dy="6"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71249" result="effect2_dropShadow_1240_71249"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71249" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="12" dy="12"/>
+<feGaussianBlur stdDeviation="7.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71249"/>
+</filter>
+<filter id="filter6_bdi_1240_71249" x="86.5" y="57" width="63" height="51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71249"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="6" dy="6"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71249" result="effect2_dropShadow_1240_71249"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71249" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="12" dy="12"/>
+<feGaussianBlur stdDeviation="7.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71249"/>
+</filter>
+<linearGradient id="paint0_linear_1240_71249" x1="94.5" y1="16.5" x2="163.5" y2="109.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F4F3F2"/>
+<stop offset="1" stop-color="#F4F3F2"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1240_71249" x1="122.5" y1="30" x2="122.5" y2="99" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DADADA" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#DADADA" stop-opacity="0.8"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1240_71249" x1="162.942" y1="51.687" x2="167.291" y2="78.9441" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DEDEDE"/>
+<stop offset="0.5" stop-color="#DEDEDE"/>
+<stop offset="1" stop-color="#DEDEDE"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1240_71249" x1="112.854" y1="43.6869" x2="112.974" y2="46.5219" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCFCFC"/>
+<stop offset="0.5" stop-color="#FCFCFC"/>
+<stop offset="1" stop-color="#FCFCFC"/>
+</linearGradient>
+<linearGradient id="paint4_linear_1240_71249" x1="112.854" y1="54.1869" x2="112.974" y2="57.0219" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCFCFC"/>
+<stop offset="0.5" stop-color="#FCFCFC"/>
+<stop offset="1" stop-color="#FCFCFC"/>
+</linearGradient>
+<linearGradient id="paint5_linear_1240_71249" x1="110.069" y1="64.6869" x2="110.249" y2="67.5156" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCFCFC"/>
+<stop offset="0.5" stop-color="#FCFCFC"/>
+<stop offset="1" stop-color="#FCFCFC"/>
+</linearGradient>
+<linearGradient id="paint6_linear_1240_71249" x1="107.981" y1="75.1869" x2="108.266" y2="77.998" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCFCFC"/>
+<stop offset="0.5" stop-color="#FCFCFC"/>
+<stop offset="1" stop-color="#FCFCFC"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/emptyComment-sm.svg b/public/images/emptyComment-sm.svg
new file mode 100644
index 00000000..27d6fd15
--- /dev/null
+++ b/public/images/emptyComment-sm.svg
@@ -0,0 +1,173 @@
+<svg width="206" height="152" viewBox="0 0 206 152" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="206" height="152" fill="#FCFCFC"/>
+<circle cx="103" cy="40" r="40" fill="url(#paint0_linear_1240_71246)"/>
+<g filter="url(#filter0_di_1240_71246)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M93.126 17C93.5701 15.2748 95.1362 14 97 14C98.8638 14 100.43 15.2748 100.874 17H104C106.209 17 108 18.7909 108 21V23C108 24.1046 107.105 25 106 25H88C86.8954 25 86 24.1046 86 23V21C86 18.7909 87.7909 17 90 17H93.126Z" fill="#DADADA"/>
+</g>
+<g filter="url(#filter1_b_1240_71246)">
+<rect x="78" y="20" width="38" height="46" rx="4" fill="url(#paint1_linear_1240_71246)" fill-opacity="0.5"/>
+</g>
+<g filter="url(#filter2_bdi_1240_71246)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M124.128 31.7071C123.737 31.3166 123.104 31.3166 122.714 31.7071L118.253 36.1684L126.866 44.7821L125.143 46.505L116.53 37.8912L105.16 49.2606C104.822 49.5987 104.616 50.0468 104.58 50.5236L104.017 57.9452C103.971 58.5559 104.479 59.0644 105.09 59.018L112.512 58.455C112.988 58.4188 113.436 58.213 113.775 57.8749L131.328 40.3214C131.719 39.9308 131.719 39.2977 131.328 38.9072L124.128 31.7071Z" fill="url(#paint2_linear_1240_71246)" fill-opacity="0.8" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter3_bdi_1240_71246)">
+<rect x="85" y="29" width="24" height="2" rx="1" fill="url(#paint3_linear_1240_71246)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter4_bdi_1240_71246)">
+<rect x="85" y="43" width="16" height="2" rx="1" fill="url(#paint4_linear_1240_71246)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter5_bdi_1240_71246)">
+<rect x="85" y="50" width="10" height="2" rx="1" fill="url(#paint5_linear_1240_71246)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter6_bdi_1240_71246)">
+<rect x="85" y="36" width="24" height="2" rx="1" fill="url(#paint6_linear_1240_71246)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<path d="M54.8408 115.736V116.639H43.7529V115.736H54.8408ZM53.542 113.699V114.574H45.1611V110.445H53.46V111.348H46.2139V113.699H53.542ZM49.29 117.705C51.9014 117.705 53.46 118.498 53.4736 119.893C53.46 121.301 51.9014 122.08 49.29 122.08C46.665 122.08 45.0928 121.301 45.0928 119.893C45.0928 118.498 46.665 117.705 49.29 117.705ZM49.29 118.539C47.335 118.553 46.1729 119.045 46.1865 119.893C46.1729 120.754 47.335 121.232 49.29 121.232C51.2178 121.232 52.3936 120.754 52.3936 119.893C52.3936 119.045 51.2178 118.553 49.29 118.539ZM66.9678 116.652V117.541H55.8389V116.652H60.8701V115.367H57.2881V112.4H64.4521V111.143H57.2471V110.268H65.5322V113.207H58.3545V114.506H65.792V115.367H61.9229V116.652H66.9678ZM65.6006 118.471V121.998H64.5205V119.346H57.083V118.471H65.6006ZM75.0205 113.945V114.82H72.5596V116.516C73.6943 116.468 74.8291 116.386 75.8818 116.27L75.9639 117.062C73.3525 117.418 70.4541 117.5 68.1709 117.5L68.0068 116.625C69.0732 116.618 70.2695 116.604 71.4932 116.557V114.82H69.1143V110.746H74.9248V111.635H70.1943V113.945H75.0205ZM77.9736 109.967V119.059H76.8936V109.967H77.9736ZM78.3701 120.945V121.848H70.085V118.43H71.1514V120.945H78.3701ZM88.7744 111.02V111.908H85.1787V115.545C86.7988 115.552 87.9883 115.49 89.376 115.203L89.4717 116.092C87.9541 116.379 86.71 116.434 84.9053 116.434H84.126V111.02H88.7744ZM93.8877 109.953V117.992H92.8623V114.041H91.1533V116.939H90.1553V110.186H91.1533V113.139H92.8623V109.953H93.8877ZM90.3604 117.91C90.3604 119.537 92.4111 120.891 94.5439 121.219L94.0791 122.053C92.2744 121.725 90.5586 120.768 89.8271 119.387C89.0889 120.768 87.3662 121.725 85.5752 122.053L85.1104 121.219C87.2295 120.891 89.2803 119.537 89.2939 117.91V117.445H90.3604V117.91ZM105.331 110.486V111.266C105.331 112.093 105.331 113.132 105.058 114.506H106.794V115.367H95.665V114.506H103.978C104.251 113.152 104.265 112.154 104.265 111.361H97.0732V110.486H105.331ZM105.372 116.598V119.66H98.085V121.096H105.687V121.971H97.0049V118.812H104.306V117.459H96.9912V116.598H105.372ZM117.786 109.953V122.135H116.706V109.953H117.786ZM111.319 110.896C113.124 110.91 114.423 112.551 114.423 115.135C114.423 117.719 113.124 119.359 111.319 119.359C109.501 119.359 108.216 117.719 108.216 115.135C108.216 112.551 109.501 110.91 111.319 110.896ZM111.319 111.854C110.103 111.867 109.255 113.152 109.255 115.135C109.255 117.117 110.103 118.402 111.319 118.402C112.536 118.402 113.384 117.117 113.384 115.135C113.384 113.152 112.536 111.867 111.319 111.854ZM125.798 117.09V118.607H128.013V117.09H129.011V121.943H124.786V117.09H125.798ZM125.798 121.096H128.013V119.428H125.798V121.096ZM132.483 118.047C132.47 119.332 133.235 120.672 134.726 121.219L134.165 122.039C133.044 121.588 132.306 120.733 131.937 119.715C131.547 120.713 130.809 121.574 129.735 122.039L129.175 121.219C130.638 120.617 131.417 119.277 131.417 118.047V117.008H132.483V118.047ZM126.728 110.5C128.354 110.5 129.599 111.423 129.831 112.824H132.374V109.953H133.454V116.393H132.374V113.713H129.845C129.626 115.148 128.375 116.092 126.728 116.092C124.882 116.092 123.569 114.957 123.569 113.289C123.569 111.635 124.882 110.5 126.728 110.5ZM126.728 111.402C125.483 111.402 124.595 112.182 124.595 113.289C124.595 114.41 125.483 115.203 126.728 115.203C127.958 115.203 128.833 114.41 128.833 113.289C128.833 112.182 127.958 111.402 126.728 111.402ZM138.745 110.896C140.399 110.91 141.589 112.325 141.767 114.602H144.487V109.953H145.554V122.135H144.487V115.49H141.78C141.65 117.869 140.44 119.359 138.745 119.359C136.954 119.359 135.696 117.719 135.696 115.135C135.696 112.551 136.954 110.91 138.745 110.896ZM138.745 111.854C137.542 111.867 136.722 113.152 136.722 115.135C136.722 117.117 137.542 118.402 138.745 118.402C139.935 118.402 140.769 117.117 140.769 115.135C140.769 113.152 139.935 111.867 138.745 111.854ZM158.706 119.646V120.549H147.577V119.646H150.339V116.365C149.3 115.825 148.671 114.95 148.671 113.85C148.671 111.963 150.517 110.732 153.114 110.719C155.712 110.732 157.558 111.963 157.558 113.85C157.558 114.93 156.949 115.798 155.944 116.338V119.646H158.706ZM153.114 111.607C151.118 111.594 149.71 112.496 149.71 113.85C149.71 115.203 151.118 116.119 153.114 116.119C155.097 116.119 156.519 115.203 156.519 113.85C156.519 112.496 155.097 111.594 153.114 111.607ZM151.392 119.646H154.864V116.748C154.338 116.892 153.75 116.967 153.114 116.967C152.492 116.967 151.911 116.898 151.392 116.762V119.646ZM160.962 121.082C160.483 121.082 160.073 120.686 160.087 120.193C160.073 119.715 160.483 119.318 160.962 119.318C161.44 119.318 161.837 119.715 161.837 120.193C161.837 120.686 161.44 121.082 160.962 121.082ZM6.63379 135.02V135.908H3.03809V139.545C4.6582 139.552 5.84766 139.49 7.23535 139.203L7.33105 140.092C5.81348 140.379 4.56934 140.434 2.76465 140.434H1.98535V135.02H6.63379ZM11.7471 133.953V141.992H10.7217V138.041H9.0127V140.939H8.01465V134.186H9.0127V137.139H10.7217V133.953H11.7471ZM8.21973 141.91C8.21973 143.537 10.2705 144.891 12.4033 145.219L11.9385 146.053C10.1338 145.725 8.41797 144.768 7.68652 143.387C6.94824 144.768 5.22559 145.725 3.43457 146.053L2.96973 145.219C5.08887 144.891 7.13965 143.537 7.15332 141.91V141.445H8.21973V141.91ZM23.1904 134.486V135.266C23.1904 136.093 23.1904 137.132 22.917 138.506H24.6533V139.367H13.5244V138.506H21.8369C22.1104 137.152 22.124 136.154 22.124 135.361H14.9326V134.486H23.1904ZM23.2314 140.598V143.66H15.9443V145.096H23.5459V145.971H14.8643V142.812H22.165V141.459H14.8506V140.598H23.2314ZM31.1611 134.172C33.8682 134.172 35.4541 134.91 35.4541 136.264C35.4541 137.645 33.8682 138.383 31.1611 138.396C28.4541 138.383 26.8545 137.645 26.8545 136.264C26.8545 134.91 28.4541 134.172 31.1611 134.172ZM31.1611 134.979C29.1377 134.979 27.9619 135.471 27.9756 136.264C27.9619 137.111 29.1377 137.576 31.1611 137.576C33.1709 137.576 34.3604 137.111 34.3604 136.264C34.3604 135.471 33.1709 134.979 31.1611 134.979ZM36.6982 139.217V140.092H25.624V139.217H36.6982ZM35.2764 141.145V143.865H28.0576V145.123H35.6455V145.971H26.9912V143.072H34.2236V141.965H26.9639V141.145H35.2764ZM52.3252 139.736V140.639H41.2373V139.736H52.3252ZM51.0264 137.699V138.574H42.6455V134.445H50.9443V135.348H43.6982V137.699H51.0264ZM46.7744 141.705C49.3857 141.705 50.9443 142.498 50.958 143.893C50.9443 145.301 49.3857 146.08 46.7744 146.08C44.1494 146.08 42.5771 145.301 42.5771 143.893C42.5771 142.498 44.1494 141.705 46.7744 141.705ZM46.7744 142.539C44.8193 142.553 43.6572 143.045 43.6709 143.893C43.6572 144.754 44.8193 145.232 46.7744 145.232C48.7021 145.232 49.8779 144.754 49.8779 143.893C49.8779 143.045 48.7021 142.553 46.7744 142.539ZM64.4521 140.652V141.541H53.3232V140.652H58.3545V139.367H54.7725V136.4H61.9365V135.143H54.7314V134.268H63.0166V137.207H55.8389V138.506H63.2764V139.367H59.4072V140.652H64.4521ZM63.085 142.471V145.998H62.0049V143.346H54.5674V142.471H63.085ZM74.8428 133.953V138.971H76.8799V139.859H74.8428V146.107H73.7764V133.953H74.8428ZM72.6006 135.908V136.797H65.3682V135.908H68.499V134.104H69.5654V135.908H72.6006ZM69.0459 137.809C70.7686 137.809 72.0127 138.957 72.0264 140.598C72.0127 142.238 70.7686 143.387 69.0459 143.387C67.3096 143.387 66.0518 142.238 66.0654 140.598C66.0518 138.957 67.3096 137.809 69.0459 137.809ZM69.0459 138.711C67.9111 138.711 67.0771 139.504 67.0908 140.598C67.0771 141.705 67.9111 142.484 69.0459 142.471C70.167 142.484 70.9873 141.705 71.001 140.598C70.9873 139.504 70.167 138.711 69.0459 138.711ZM87.2842 135.184V136.4C87.2705 137.891 87.2705 139.559 86.833 142.006L85.7393 141.883C86.2041 139.559 86.2041 137.85 86.2041 136.4V136.072H78.7119V135.184H87.2842ZM88.6104 143.496V144.385H77.5361V143.496H81.8838V139.148H82.9365V143.496H88.6104ZM97.1279 134.842C99.042 134.842 100.396 136.004 100.396 137.699C100.396 139.395 99.042 140.557 97.1279 140.557C95.2139 140.557 93.833 139.395 93.8467 137.699C93.833 136.004 95.2139 134.842 97.1279 134.842ZM97.1279 135.785C95.8291 135.785 94.8857 136.564 94.8994 137.699C94.8857 138.834 95.8291 139.613 97.1279 139.613C98.4131 139.613 99.3428 138.834 99.3428 137.699C99.3428 136.564 98.4131 135.785 97.1279 135.785ZM103.116 133.953V146.135H102.05V133.953H103.116ZM93.2178 142.539C95.46 142.539 98.5498 142.525 101.243 142.129L101.325 142.922C98.5498 143.441 95.5557 143.455 93.3682 143.455L93.2178 142.539ZM115.325 133.967V143.031H114.245V140.092H110.978V139.203H114.245V137.357H111.142C110.287 139.278 108.421 140.741 105.933 141.541L105.454 140.68C108.298 139.743 110.253 137.993 110.485 135.799H106.056V134.91H111.661C111.661 135.457 111.586 135.983 111.456 136.482H114.245V133.967H115.325ZM115.64 144.945V145.848H107.587V142.129H108.681V144.945H115.64ZM122.886 134.172C125.593 134.172 127.179 134.91 127.179 136.264C127.179 137.645 125.593 138.383 122.886 138.396C120.179 138.383 118.579 137.645 118.579 136.264C118.579 134.91 120.179 134.172 122.886 134.172ZM122.886 134.979C120.862 134.979 119.687 135.471 119.7 136.264C119.687 137.111 120.862 137.576 122.886 137.576C124.896 137.576 126.085 137.111 126.085 136.264C126.085 135.471 124.896 134.979 122.886 134.979ZM128.423 139.217V140.092H117.349V139.217H128.423ZM127.001 141.145V143.865H119.782V145.123H127.37V145.971H118.716V143.072H125.948V141.965H118.688V141.145H127.001ZM138.458 141.637C141.069 141.637 142.724 142.457 142.724 143.865C142.724 145.26 141.069 146.08 138.458 146.08C135.86 146.08 134.206 145.26 134.206 143.865C134.206 142.457 135.86 141.637 138.458 141.637ZM138.458 142.457C136.517 142.471 135.259 143.004 135.272 143.865C135.259 144.713 136.517 145.232 138.458 145.232C140.399 145.232 141.644 144.713 141.657 143.865C141.644 143.004 140.399 142.471 138.458 142.457ZM142.628 134.582V135.607C142.628 136.592 142.628 137.576 142.286 138.834L141.233 138.711C141.562 137.453 141.562 136.564 141.562 135.607V135.457H134.288V134.582H142.628ZM144.036 139.627V140.502H132.976V139.627H137.556V137.275H138.608V139.627H144.036ZM156.177 140.885V141.773H153.237V146.107H152.157V141.773H149.04V146.107H147.933V141.773H145.048V140.885H156.177ZM150.585 134.445C153.142 134.445 154.864 135.471 154.864 137.098C154.864 138.711 153.142 139.736 150.585 139.723C148.028 139.736 146.306 138.711 146.306 137.098C146.306 135.471 148.028 134.445 150.585 134.445ZM150.585 135.32C148.685 135.32 147.399 136.018 147.413 137.098C147.399 138.178 148.685 138.861 150.585 138.861C152.472 138.861 153.771 138.178 153.771 137.098C153.771 136.018 152.472 135.32 150.585 135.32ZM163.231 136.059V136.934H157.134V136.059H159.663V134.322H160.729V136.059H163.231ZM160.183 137.754C161.714 137.754 162.808 138.902 162.821 140.516C162.808 142.143 161.714 143.305 160.183 143.305C158.665 143.305 157.571 142.143 157.571 140.516C157.571 138.902 158.665 137.754 160.183 137.754ZM160.183 138.656C159.226 138.67 158.528 139.449 158.528 140.516C158.528 141.596 159.226 142.375 160.183 142.361C161.153 142.375 161.864 141.596 161.864 140.516C161.864 139.449 161.153 138.67 160.183 138.656ZM167.511 133.953V146.107H166.485V139.969H164.872V145.506H163.86V134.254H164.872V139.08H166.485V133.953H167.511ZM180.39 143.66V144.549H169.261V143.66H174.265V141.035H170.573V134.814H171.653V137.016H177.97V134.814H179.022V141.035H175.317V143.66H180.39ZM171.653 140.16H177.97V137.891H171.653V140.16ZM184.97 137.412C184.97 139.34 185.913 141.432 187.526 142.389L186.911 143.223C185.742 142.512 184.901 141.213 184.478 139.736C184.026 141.35 183.124 142.737 181.907 143.482L181.224 142.676C182.905 141.691 183.931 139.531 183.931 137.453V135.102H184.97V137.412ZM191.778 133.953V146.107H190.739V133.953H191.778ZM189.263 134.213V145.492H188.251V139.23H186.187V138.314H188.251V134.213H189.263ZM204.589 143.646V144.549H193.46V143.646H196.222V140.365C195.183 139.825 194.554 138.95 194.554 137.85C194.554 135.963 196.399 134.732 198.997 134.719C201.595 134.732 203.44 135.963 203.44 137.85C203.44 138.93 202.832 139.798 201.827 140.338V143.646H204.589ZM198.997 135.607C197.001 135.594 195.593 136.496 195.593 137.85C195.593 139.203 197.001 140.119 198.997 140.119C200.979 140.119 202.401 139.203 202.401 137.85C202.401 136.496 200.979 135.594 198.997 135.607ZM197.274 143.646H200.747V140.748C200.221 140.892 199.633 140.967 198.997 140.967C198.375 140.967 197.794 140.898 197.274 140.762V143.646Z" fill="#999999"/>
+<defs>
+<filter id="filter0_di_1240_71246" x="80" y="12" width="34" height="25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.956863 0 0 0 0 0.956863 0 0 0 0 0.956863 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71246"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71246" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2" dy="-2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.992157 0 0 0 0 0.976471 0 0 0 0 0.94902 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71246"/>
+</filter>
+<filter id="filter1_b_1240_71246" x="70" y="12" width="54" height="62" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71246"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71246" result="shape"/>
+</filter>
+<filter id="filter2_bdi_1240_71246" x="96.0142" y="23.4141" width="47.6069" height="47.6055" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="1"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71246"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71246" result="effect2_dropShadow_1240_71246"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71246" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2" dy="-2"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71246"/>
+</filter>
+<filter id="filter3_bdi_1240_71246" x="73" y="17" width="56" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71246"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71246" result="effect2_dropShadow_1240_71246"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71246" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="8" dy="8"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71246"/>
+</filter>
+<filter id="filter4_bdi_1240_71246" x="73" y="31" width="48" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71246"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71246" result="effect2_dropShadow_1240_71246"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71246" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="8" dy="8"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71246"/>
+</filter>
+<filter id="filter5_bdi_1240_71246" x="73" y="38" width="42" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71246"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71246" result="effect2_dropShadow_1240_71246"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71246" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="8" dy="8"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71246"/>
+</filter>
+<filter id="filter6_bdi_1240_71246" x="73" y="24" width="56" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71246"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71246" result="effect2_dropShadow_1240_71246"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71246" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="8" dy="8"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71246"/>
+</filter>
+<linearGradient id="paint0_linear_1240_71246" x1="78" y1="11" x2="124" y2="73" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F4F3F2"/>
+<stop offset="1" stop-color="#F4F3F2"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1240_71246" x1="97" y1="20" x2="97" y2="66" gradientUnits="userSpaceOnUse">
+<stop offset="0.035" stop-color="#DADADA" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#DADADA" stop-opacity="0.8"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1240_71246" x1="123.961" y1="34.458" x2="126.861" y2="52.6294" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DEDEDE"/>
+<stop offset="0.5" stop-color="#DEDEDE"/>
+<stop offset="1" stop-color="#DEDEDE"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1240_71246" x1="90.5692" y1="29.1246" x2="90.6491" y2="31.0146" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCFCFC"/>
+<stop offset="0.5" stop-color="#FCFCFC"/>
+<stop offset="1" stop-color="#FCFCFC"/>
+</linearGradient>
+<linearGradient id="paint4_linear_1240_71246" x1="88.7128" y1="43.1246" x2="88.8324" y2="45.0104" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCFCFC"/>
+<stop offset="0.5" stop-color="#FCFCFC"/>
+<stop offset="1" stop-color="#FCFCFC"/>
+</linearGradient>
+<linearGradient id="paint5_linear_1240_71246" x1="87.3205" y1="50.1246" x2="87.5107" y2="51.9987" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCFCFC"/>
+<stop offset="0.5" stop-color="#FCFCFC"/>
+<stop offset="1" stop-color="#FCFCFC"/>
+</linearGradient>
+<linearGradient id="paint6_linear_1240_71246" x1="90.5692" y1="36.1246" x2="90.6491" y2="38.0146" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCFCFC"/>
+<stop offset="0.5" stop-color="#FCFCFC"/>
+<stop offset="1" stop-color="#FCFCFC"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/modal/closed-gray-md.svg b/public/images/modal/closed-gray-md.svg
new file mode 100644
index 00000000..1231d195
--- /dev/null
+++ b/public/images/modal/closed-gray-md.svg
@@ -0,0 +1,94 @@
+<svg width="120" height="130" viewBox="0 0 120 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="60" cy="60" r="60" fill="url(#paint0_linear_1240_71193)"/>
+<g filter="url(#filter0_di_1240_71193)">
+<g filter="url(#filter1_di_1240_71193)">
+<path d="M24 23C24 19.6863 26.6863 17 30 17H60L71.5 31L84 46V83C84 86.3137 81.3137 89 78 89H30C26.6863 89 24 86.3137 24 83V23Z" fill="url(#paint1_linear_1240_71193)" fill-opacity="0.8" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter2_d_1240_71193)">
+<path d="M60 17L72 31.5L84 46H66C62.6863 46 60 43.3137 60 40V17Z" fill="url(#paint2_linear_1240_71193)" shape-rendering="crispEdges"/>
+</g>
+</g>
+<g filter="url(#filter3_bdi_1240_71193)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M84.293 94.4406C92.752 87.8767 94.9819 75.8295 89.1273 66.6079C82.9109 56.8166 69.9341 53.9185 60.1428 60.1349C50.3515 66.3513 47.4534 79.3281 53.6698 89.1194C59.5247 98.3415 71.3769 101.449 80.9162 96.5847L88.4697 108.482C89.0618 109.415 90.2976 109.691 91.2302 109.099C92.1627 108.507 92.4387 107.271 91.8466 106.338L84.293 94.4406Z" fill="url(#paint3_linear_1240_71193)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_di_1240_71193" x="12" y="5" width="80" height="92" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2" dy="-2"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.952116 0 0 0 0 0.952116 0 0 0 0 0.952116 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71193"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71193" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-4" dy="-4"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71193"/>
+</filter>
+<filter id="filter1_di_1240_71193" x="18" y="15" width="72" height="86" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71193"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71193" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2" dy="-2"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.975436 0 0 0 0 0.973848 0 0 0 0 0.973848 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71193"/>
+</filter>
+<filter id="filter2_d_1240_71193" x="54" y="17" width="36" height="41" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71193"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71193" result="shape"/>
+</filter>
+<filter id="filter3_bdi_1240_71193" x="38.396" y="44.8594" width="74.0054" height="84.5508" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="1"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71193"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71193" result="effect2_dropShadow_1240_71193"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71193" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="8" dy="8"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71193"/>
+</filter>
+<linearGradient id="paint0_linear_1240_71193" x1="22.5" y1="16.5" x2="91.5" y2="109.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F4F3F2"/>
+<stop offset="1" stop-color="#F4F3F2"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1240_71193" x1="54" y1="17" x2="54" y2="89" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DADADA"/>
+<stop offset="0.525" stop-color="#D8D8D8" stop-opacity="0.9515"/>
+<stop offset="1" stop-color="#C3C3C3" stop-opacity="0.8"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1240_71193" x1="72" y1="17" x2="72" y2="46" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CECECE"/>
+<stop offset="0.525" stop-color="#CECECE" stop-opacity="0.9515"/>
+<stop offset="1" stop-color="#CECECE" stop-opacity="0.95"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1240_71193" x1="60.1433" y1="60.1332" x2="82.6547" y2="95.5907" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CECECE"/>
+<stop offset="1" stop-color="#CECECE"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/modal/closed-gray-sm.svg b/public/images/modal/closed-gray-sm.svg
new file mode 100644
index 00000000..c44d4f3d
--- /dev/null
+++ b/public/images/modal/closed-gray-sm.svg
@@ -0,0 +1,94 @@
+<svg width="82" height="91" viewBox="0 0 82 91" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="40" cy="41" r="40" fill="url(#paint0_linear_1240_71184)"/>
+<g filter="url(#filter0_di_1240_71184)">
+<g filter="url(#filter1_di_1240_71184)">
+<path d="M19 18C19 14.6863 21.6863 12 25 12H41.6308L48.8601 20.8009L56.7181 30.2304V51.2617C56.7181 54.5754 54.0318 57.2617 50.7181 57.2617H25C21.6863 57.2617 19 54.5754 19 51.2617V18Z" fill="url(#paint1_linear_1240_71184)" fill-opacity="0.8" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter2_d_1240_71184)">
+<path d="M41.6309 12L49.1745 21.1152L56.7181 30.2304H47.6309C44.3172 30.2304 41.6309 27.5441 41.6309 24.2304V12Z" fill="url(#paint2_linear_1240_71184)" fill-opacity="0.8" shape-rendering="crispEdges"/>
+</g>
+</g>
+<g filter="url(#filter3_bdi_1240_71184)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56.9023 60.6779C62.2203 56.5516 63.6223 48.9781 59.9417 43.1809C56.0339 37.0258 47.8762 35.2039 41.7211 39.1118C35.5659 43.0196 33.7441 51.1772 37.6519 57.3324C41.3324 63.1296 48.7828 65.0828 54.7794 62.0256L59.5279 69.5048C59.9 70.091 60.677 70.2645 61.2632 69.8924C61.8494 69.5202 62.0229 68.7433 61.6507 68.1571L56.9023 60.6779Z" fill="url(#paint3_linear_1240_71184)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_di_1240_71184" x="7" y="0" width="57.7183" height="65.2617" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2" dy="-2"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.997016 0 0 0 0 0.995639 0 0 0 0 0.993804 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71184"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71184" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-4" dy="-4"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.988917 0 0 0 0 0.987847 0 0 0 0 0.98592 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71184"/>
+</filter>
+<filter id="filter1_di_1240_71184" x="13" y="10" width="49.7183" height="59.2617" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71184"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71184" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2" dy="-2"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.992157 0 0 0 0 0.976471 0 0 0 0 0.94902 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71184"/>
+</filter>
+<filter id="filter2_d_1240_71184" x="35.6309" y="12" width="27.0874" height="30.2305" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71184"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71184" result="shape"/>
+</filter>
+<filter id="filter3_bdi_1240_71184" x="23.5938" y="25.0547" width="58.4062" height="65.0352" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="1"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71184"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.911735 0 0 0 0 0.911735 0 0 0 0 0.911735 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71184" result="effect2_dropShadow_1240_71184"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71184" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2" dy="-2"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.703906 0 0 0 0 0.703906 0 0 0 0 0.703906 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71184"/>
+</filter>
+<linearGradient id="paint0_linear_1240_71184" x1="15" y1="12" x2="61" y2="74" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F4F3F2"/>
+<stop offset="1" stop-color="#F4F3F2"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1240_71184" x1="37.859" y1="12" x2="37.859" y2="57.2617" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E0E0E0"/>
+<stop offset="0.525" stop-color="#D4D4D4" stop-opacity="0.9515"/>
+<stop offset="1" stop-color="#BFBFBF" stop-opacity="0.8"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1240_71184" x1="49.1745" y1="12" x2="49.1745" y2="30.2304" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CECECE"/>
+<stop offset="0.525" stop-color="#CECECE" stop-opacity="0.9515"/>
+<stop offset="1" stop-color="#CECECE" stop-opacity="0.95"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1240_71184" x1="41.7212" y1="39.1127" x2="62.0004" y2="73.9983" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F0F0F0" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#C2C2C2" stop-opacity="0.6"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/modal/closed-orange-md.svg b/public/images/modal/closed-orange-md.svg
new file mode 100644
index 00000000..711c05cf
--- /dev/null
+++ b/public/images/modal/closed-orange-md.svg
@@ -0,0 +1,94 @@
+<svg width="120" height="130" viewBox="0 0 120 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="60" cy="60" r="60" fill="url(#paint0_linear_1240_71106)"/>
+<g filter="url(#filter0_di_1240_71106)">
+<g filter="url(#filter1_di_1240_71106)">
+<path d="M24 23C24 19.6863 26.6863 17 30 17H60L71.5 31L84 46V83C84 86.3137 81.3137 89 78 89H30C26.6863 89 24 86.3137 24 83V23Z" fill="url(#paint1_linear_1240_71106)" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter2_d_1240_71106)">
+<path d="M60 17L72 31.5L84 46H66C62.6863 46 60 43.3137 60 40V17Z" fill="url(#paint2_linear_1240_71106)" shape-rendering="crispEdges"/>
+</g>
+</g>
+<g filter="url(#filter3_bdi_1240_71106)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M84.293 94.4406C92.752 87.8767 94.9819 75.8295 89.1273 66.6079C82.9109 56.8166 69.9341 53.9185 60.1428 60.1349C50.3515 66.3513 47.4534 79.3281 53.6698 89.1194C59.5247 98.3415 71.3769 101.449 80.9162 96.5847L88.4697 108.482C89.0618 109.415 90.2976 109.691 91.2302 109.099C92.1627 108.507 92.4387 107.271 91.8466 106.338L84.293 94.4406Z" fill="url(#paint3_linear_1240_71106)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_di_1240_71106" x="12" y="5" width="80" height="92" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2" dy="-2"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.929259 0 0 0 0 0.857919 0 0 0 0 0.762798 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71106"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71106" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-4" dy="-4"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.996078 0 0 0 0 0.976471 0 0 0 0 0.941176 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71106"/>
+</filter>
+<filter id="filter1_di_1240_71106" x="18" y="15" width="72" height="86" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71106"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71106" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2" dy="-2"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.992157 0 0 0 0 0.976471 0 0 0 0 0.94902 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71106"/>
+</filter>
+<filter id="filter2_d_1240_71106" x="54" y="17" width="36" height="41" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71106"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71106" result="shape"/>
+</filter>
+<filter id="filter3_bdi_1240_71106" x="38.396" y="44.8594" width="74.0054" height="84.5508" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71106"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71106" result="effect2_dropShadow_1240_71106"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71106" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="8" dy="8"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71106"/>
+</filter>
+<linearGradient id="paint0_linear_1240_71106" x1="22.5" y1="16.5" x2="91.5" y2="109.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFF7EB"/>
+<stop offset="1" stop-color="#FFFAF4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1240_71106" x1="54" y1="17" x2="54" y2="89" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F89A05"/>
+<stop offset="0.525" stop-color="#F89A05" stop-opacity="0.9515"/>
+<stop offset="1" stop-color="#FBA824" stop-opacity="0.95"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1240_71106" x1="72" y1="17" x2="72" y2="46" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E68E03"/>
+<stop offset="0.525" stop-color="#E68E03" stop-opacity="0.9515"/>
+<stop offset="1" stop-color="#E68E03" stop-opacity="0.95"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1240_71106" x1="60.1433" y1="60.1332" x2="82.6547" y2="95.5907" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCC369"/>
+<stop offset="1" stop-color="#F8DEB5"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/modal/closed-orange-sm.svg b/public/images/modal/closed-orange-sm.svg
new file mode 100644
index 00000000..5ddfb79c
--- /dev/null
+++ b/public/images/modal/closed-orange-sm.svg
@@ -0,0 +1,94 @@
+<svg width="82" height="91" viewBox="0 0 82 91" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="40" cy="41" r="40" fill="url(#paint0_linear_1240_71115)"/>
+<g filter="url(#filter0_di_1240_71115)">
+<g filter="url(#filter1_di_1240_71115)">
+<path d="M19 18C19 14.6863 21.6863 12 25 12H41.6308L48.8601 20.8009L56.7181 30.2304V51.2617C56.7181 54.5754 54.0318 57.2617 50.7181 57.2617H25C21.6863 57.2617 19 54.5754 19 51.2617V18Z" fill="url(#paint1_linear_1240_71115)" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter2_d_1240_71115)">
+<path d="M41.6309 12L49.1745 21.1152L56.7181 30.2304H47.6309C44.3172 30.2304 41.6309 27.5441 41.6309 24.2304V12Z" fill="url(#paint2_linear_1240_71115)" shape-rendering="crispEdges"/>
+</g>
+</g>
+<g filter="url(#filter3_bdi_1240_71115)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56.9023 60.6779C62.2203 56.5516 63.6223 48.9781 59.9417 43.1809C56.0339 37.0258 47.8762 35.2039 41.7211 39.1118C35.5659 43.0196 33.7441 51.1772 37.6519 57.3324C41.3324 63.1296 48.7828 65.0828 54.7794 62.0256L59.5279 69.5048C59.9 70.091 60.677 70.2645 61.2632 69.8924C61.8494 69.5202 62.0229 68.7433 61.6507 68.1571L56.9023 60.6779Z" fill="url(#paint3_linear_1240_71115)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_di_1240_71115" x="7" y="0" width="57.7183" height="65.2617" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2" dy="-2"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.929259 0 0 0 0 0.857919 0 0 0 0 0.762798 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71115"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71115" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-4" dy="-4"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.996078 0 0 0 0 0.976471 0 0 0 0 0.941176 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71115"/>
+</filter>
+<filter id="filter1_di_1240_71115" x="13" y="10" width="49.7183" height="59.2617" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71115"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71115" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2" dy="-2"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.992157 0 0 0 0 0.976471 0 0 0 0 0.94902 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71115"/>
+</filter>
+<filter id="filter2_d_1240_71115" x="35.6309" y="12" width="27.0874" height="30.2305" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71115"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71115" result="shape"/>
+</filter>
+<filter id="filter3_bdi_1240_71115" x="23.5938" y="25.0547" width="58.4062" height="65.0352" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71115"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71115" result="effect2_dropShadow_1240_71115"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71115" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="8" dy="8"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71115"/>
+</filter>
+<linearGradient id="paint0_linear_1240_71115" x1="15" y1="12" x2="61" y2="74" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFF7EB"/>
+<stop offset="1" stop-color="#FFFAF4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1240_71115" x1="37.859" y1="12" x2="37.859" y2="57.2617" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F89A05"/>
+<stop offset="0.525" stop-color="#F89A05" stop-opacity="0.9515"/>
+<stop offset="1" stop-color="#FBA824" stop-opacity="0.95"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1240_71115" x1="49.1745" y1="12" x2="49.1745" y2="30.2304" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E68E03"/>
+<stop offset="0.525" stop-color="#E68E03" stop-opacity="0.9515"/>
+<stop offset="1" stop-color="#E68E03" stop-opacity="0.95"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1240_71115" x1="41.7212" y1="39.1127" x2="55.8729" y2="61.4026" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCC369"/>
+<stop offset="1" stop-color="#F8DEB5"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/modal/profile/default-profile-md.svg b/public/images/modal/profile/default-profile-md.svg
new file mode 100644
index 00000000..52aee865
--- /dev/null
+++ b/public/images/modal/profile/default-profile-md.svg
@@ -0,0 +1,9 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="60" cy="60" r="48" fill="#F7F7F7" stroke="#E6E6E6" stroke-width="4"/>
+<circle cx="60" cy="49" r="11" fill="#E6E6E6"/>
+<path d="M39 80C39 71.1634 46.1634 64 55 64H65C73.8366 64 81 71.1634 81 80C81 81.1046 80.1046 82 79 82H41C39.8954 82 39 81.1046 39 80Z" fill="#E6E6E6"/>
+<rect x="72.5" y="72.5" width="39" height="39" rx="19.5" fill="#EFEFEF"/>
+<rect x="72.5" y="72.5" width="39" height="39" rx="19.5" stroke="white" stroke-width="3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96.783 84.1633C96.4706 83.8509 95.964 83.8509 95.6516 84.1633L93.3866 86.4283L97.7047 90.7464L96.7612 91.6899L92.4431 87.3718L86.3494 93.4656C86.0789 93.7361 85.9143 94.0945 85.8853 94.4759L85.6133 98.0608C85.5763 98.5494 85.9831 98.9561 86.4716 98.9191L90.0565 98.6471C90.4379 98.6181 90.7964 98.4535 91.0668 98.183L100.369 88.8808C100.681 88.5684 100.681 88.0619 100.369 87.7494L96.783 84.1633Z" fill="#C4C4C4"/>
+<rect x="84.7998" y="100" width="15.2" height="1.6" fill="#C4C4C4"/>
+</svg>
diff --git a/public/images/modal/profile/default-profile-sm.svg b/public/images/modal/profile/default-profile-sm.svg
new file mode 100644
index 00000000..112934cd
--- /dev/null
+++ b/public/images/modal/profile/default-profile-sm.svg
@@ -0,0 +1,9 @@
+<svg width="110" height="110" viewBox="0 0 110 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="55" cy="55" r="38.5" fill="#F7F7F7" stroke="#E6E6E6" stroke-width="3"/>
+<circle cx="55" cy="46" r="10" fill="#E6E6E6"/>
+<path d="M36 72.2222C36 64.3675 42.3675 58 50.2222 58H59.7778C67.6325 58 74 64.3675 74 72.2222C74 73.2041 73.2041 74 72.2222 74H37.7778C36.7959 74 36 73.2041 36 72.2222Z" fill="#E6E6E6"/>
+<rect x="70" y="70" width="26" height="26" rx="13" fill="#EFEFEF"/>
+<rect x="70" y="70" width="26" height="26" rx="13" stroke="white" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M85.9422 77.5618C85.6297 77.2494 85.1232 77.2494 84.8108 77.5618L78.3141 84.0584C78.0436 84.3289 77.879 84.6873 77.8501 85.0688L77.6837 87.2615C77.6467 87.75 78.0534 88.1568 78.542 88.1197L80.7347 87.9534C81.1161 87.9244 81.4745 87.7598 81.745 87.4893L86.0624 83.1719L82.6321 79.7416L83.3183 79.0555L86.7486 82.4858L88.2417 80.9927C88.5541 80.6802 88.5541 80.1737 88.2417 79.8613L85.9422 77.5618Z" fill="#C4C4C4"/>
+<rect x="77.8003" y="89" width="11.2" height="0.8" fill="#C4C4C4"/>
+</svg>
diff --git a/public/images/modal/profile/edit-pen-md.svg b/public/images/modal/profile/edit-pen-md.svg
new file mode 100644
index 00000000..3e3965b2
--- /dev/null
+++ b/public/images/modal/profile/edit-pen-md.svg
@@ -0,0 +1,6 @@
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.5" y="1.5" width="39" height="39" rx="19.5" fill="#EFEFEF"/>
+<rect x="1.5" y="1.5" width="39" height="39" rx="19.5" stroke="white" stroke-width="3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.783 13.1633C25.4706 12.8509 24.964 12.8509 24.6516 13.1633L22.3866 15.4283L26.7047 19.7464L25.7612 20.6899L21.4431 16.3718L15.3494 22.4656C15.0789 22.7361 14.9143 23.0945 14.8853 23.4759L14.6133 27.0608C14.5763 27.5494 14.9831 27.9561 15.4716 27.9191L19.0565 27.6471C19.4379 27.6181 19.7964 27.4535 20.0668 27.183L29.3691 17.8808C29.6815 17.5684 29.6815 17.0619 29.3691 16.7494L25.783 13.1633Z" fill="#C4C4C4"/>
+<rect x="13.7998" y="29" width="15.2" height="1.6" fill="#C4C4C4"/>
+</svg>
diff --git a/public/images/modal/profile/edit-pen-sm.svg b/public/images/modal/profile/edit-pen-sm.svg
new file mode 100644
index 00000000..a26e1311
--- /dev/null
+++ b/public/images/modal/profile/edit-pen-sm.svg
@@ -0,0 +1,6 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="26" height="26" rx="13" fill="#EFEFEF"/>
+<rect x="1" y="1" width="26" height="26" rx="13" stroke="white" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9422 8.56178C16.6297 8.24936 16.1232 8.24936 15.8108 8.56178L9.31412 15.0584C9.04364 15.3289 8.87902 15.6873 8.85008 16.0688L8.68372 18.2615C8.64666 18.75 9.05343 19.1568 9.54195 19.1197L11.7347 18.9534C12.1161 18.9244 12.4745 18.7598 12.745 18.4893L17.0624 14.1719L13.6321 10.7416L14.3183 10.0555L17.7486 13.4858L19.2417 11.9927C19.5541 11.6802 19.5541 11.1737 19.2417 10.8613L16.9422 8.56178Z" fill="#C4C4C4"/>
+<rect x="8.80029" y="20" width="11.2" height="0.8" fill="#C4C4C4"/>
+</svg>
diff --git a/public/images/modal/warning-gray-md.svg b/public/images/modal/warning-gray-md.svg
new file mode 100644
index 00000000..5620cd57
--- /dev/null
+++ b/public/images/modal/warning-gray-md.svg
@@ -0,0 +1,87 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="60" cy="60" r="60" fill="url(#paint0_linear_1240_71093)"/>
+<g filter="url(#filter0_b_1240_71093)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56.8898 22.1754L24.0011 46.5009L24.0041 46.5039H24V85.5039C24 87.1608 25.3431 88.5039 27 88.5039H93C94.6569 88.5039 96 87.1608 96 85.5039V46.5039H95.9974L96.0011 46.5001L64.0904 22.2241C61.9678 20.6093 59.034 20.5895 56.8898 22.1754Z" fill="url(#paint1_linear_1240_71093)"/>
+</g>
+<g filter="url(#filter1_d_1240_71093)">
+<rect x="28.5" y="34.5" width="63" height="51" rx="6" fill="url(#paint2_linear_1240_71093)" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter2_b_1240_71093)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.8182 50L60 82.25L95.1818 50H96V89C96 90.6569 94.6569 92 93 92H27C25.3431 92 24 90.6569 24 89V50H24.8182Z" fill="#FAFAFA" fill-opacity="0.2"/>
+</g>
+<g filter="url(#filter3_bi_1240_71093)">
+<rect x="57" y="43.5" width="6" height="18" rx="3" fill="url(#paint3_radial_1240_71093)"/>
+</g>
+<g filter="url(#filter4_bi_1240_71093)">
+<circle cx="60" cy="67.5" r="3" fill="url(#paint4_radial_1240_71093)"/>
+</g>
+<defs>
+<filter id="filter0_b_1240_71093" x="15" y="12" width="90.001" height="85.5039" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="4.5"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71093"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71093" result="shape"/>
+</filter>
+<filter id="filter1_d_1240_71093" x="22.5" y="34.5" width="75" height="63" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71093"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71093" result="shape"/>
+</filter>
+<filter id="filter2_b_1240_71093" x="16" y="42" width="88" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71093"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71093" result="shape"/>
+</filter>
+<filter id="filter3_bi_1240_71093" x="45" y="31.5" width="30" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="6"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71093"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71093" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71093"/>
+</filter>
+<filter id="filter4_bi_1240_71093" x="45" y="52.5" width="30" height="30" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="6"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71093"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71093" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71093"/>
+</filter>
+<linearGradient id="paint0_linear_1240_71093" x1="22.5" y1="16.5" x2="91.5" y2="109.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F4F3F2"/>
+<stop offset="1" stop-color="#F4F3F2"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1240_71093" x1="60.0005" y1="21" x2="60.0005" y2="88.5025" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DEDEDE"/>
+<stop offset="1" stop-color="#DEDEDE"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1240_71093" x1="60" y1="34.5" x2="60" y2="85.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CECECE" stop-opacity="0.9"/>
+<stop offset="0.69" stop-color="#CECECE" stop-opacity="0.8"/>
+<stop offset="1" stop-color="#BEBEBE" stop-opacity="0.8"/>
+</linearGradient>
+<radialGradient id="paint3_radial_1240_71093" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(60 52.5) rotate(90) scale(9 3)">
+<stop stop-color="white"/>
+<stop offset="0.805" stop-color="white" stop-opacity="0.8"/>
+</radialGradient>
+<radialGradient id="paint4_radial_1240_71093" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(60 67.5) rotate(90) scale(3)">
+<stop stop-color="white"/>
+<stop offset="0.805" stop-color="white" stop-opacity="0.8"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/public/images/modal/warning-gray-sm.svg b/public/images/modal/warning-gray-sm.svg
new file mode 100644
index 00000000..954dee87
--- /dev/null
+++ b/public/images/modal/warning-gray-sm.svg
@@ -0,0 +1,87 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="40" cy="40" r="40" fill="url(#paint0_linear_1240_71067)"/>
+<g filter="url(#filter0_b_1240_71067)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64 33.0034V59C64 60.1046 63.1046 61 62 61H18C16.8954 61 16 60.1046 16 59V33H16.005L37.9265 16.7862C39.356 15.7289 41.3119 15.7421 42.727 16.8187L63.9972 33H64V33.0021L64.0007 33.0027L64 33.0034Z" fill="url(#paint1_linear_1240_71067)"/>
+</g>
+<g filter="url(#filter1_d_1240_71067)">
+<rect x="19" y="25" width="42" height="34" rx="6" fill="url(#paint2_linear_1240_71067)" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter2_b_1240_71067)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 35L40 57L64 35V61C64 62.1046 63.1046 63 62 63H18C16.8954 63 16 62.1046 16 61V35Z" fill="#FEF7EC" fill-opacity="0.2"/>
+</g>
+<g filter="url(#filter3_bi_1240_71067)">
+<rect x="39" y="33" width="2" height="10" rx="1" fill="url(#paint3_radial_1240_71067)"/>
+</g>
+<g filter="url(#filter4_bi_1240_71067)">
+<circle cx="40" cy="46" r="1" fill="url(#paint4_radial_1240_71067)"/>
+</g>
+<defs>
+<filter id="filter0_b_1240_71067" x="7" y="7.00391" width="66.001" height="62.9961" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="4.5"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71067"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71067" result="shape"/>
+</filter>
+<filter id="filter1_d_1240_71067" x="13" y="25" width="54" height="46" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71067"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71067" result="shape"/>
+</filter>
+<filter id="filter2_b_1240_71067" x="10" y="29" width="60" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71067"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71067" result="shape"/>
+</filter>
+<filter id="filter3_bi_1240_71067" x="31" y="25" width="18" height="26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71067"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71067" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71067"/>
+</filter>
+<filter id="filter4_bi_1240_71067" x="31" y="37" width="18" height="18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71067"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71067" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71067"/>
+</filter>
+<linearGradient id="paint0_linear_1240_71067" x1="15" y1="11" x2="61" y2="73" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F4F3F2"/>
+<stop offset="1" stop-color="#F4F3F2"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1240_71067" x1="40.0004" y1="16" x2="40.0004" y2="61.0017" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DEDEDE"/>
+<stop offset="1" stop-color="#DEDEDE"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1240_71067" x1="40" y1="25" x2="40" y2="59" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CECECE" stop-opacity="0.9"/>
+<stop offset="0.69" stop-color="#CECECE" stop-opacity="0.8"/>
+<stop offset="1" stop-color="#BEBEBE" stop-opacity="0.8"/>
+</linearGradient>
+<radialGradient id="paint3_radial_1240_71067" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(40 38) rotate(90) scale(5 1)">
+<stop stop-color="white"/>
+<stop offset="0.805" stop-color="white" stop-opacity="0.8"/>
+</radialGradient>
+<radialGradient id="paint4_radial_1240_71067" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(40 46) rotate(90)">
+<stop stop-color="white"/>
+<stop offset="0.805" stop-color="white" stop-opacity="0.8"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/public/images/modal/warning-orange-md.svg b/public/images/modal/warning-orange-md.svg
new file mode 100644
index 00000000..e4f966a7
--- /dev/null
+++ b/public/images/modal/warning-orange-md.svg
@@ -0,0 +1,87 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="60" cy="60" r="60" fill="url(#paint0_linear_1240_71080)"/>
+<g filter="url(#filter0_b_1240_71080)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56.8898 22.1754L24.0011 46.5009L24.0041 46.5039H24V85.5039C24 87.1608 25.3431 88.5039 27 88.5039H93C94.6569 88.5039 96 87.1608 96 85.5039V46.5039H95.9974L96.0011 46.5001L64.0904 22.2241C61.9678 20.6093 59.034 20.5895 56.8898 22.1754Z" fill="url(#paint1_linear_1240_71080)"/>
+</g>
+<g filter="url(#filter1_d_1240_71080)">
+<rect x="28.5" y="34.5" width="63" height="51" rx="6" fill="url(#paint2_linear_1240_71080)" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter2_b_1240_71080)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 49.5L60 82.5L96 49.5V88.5C96 90.1569 94.6569 91.5 93 91.5H27C25.3431 91.5 24 90.1569 24 88.5V49.5Z" fill="#FEF7EC" fill-opacity="0.2"/>
+</g>
+<g filter="url(#filter3_bi_1240_71080)">
+<rect x="57" y="43.5" width="6" height="18" rx="3" fill="url(#paint3_radial_1240_71080)"/>
+</g>
+<g filter="url(#filter4_bi_1240_71080)">
+<circle cx="60" cy="67.5" r="3" fill="url(#paint4_radial_1240_71080)"/>
+</g>
+<defs>
+<filter id="filter0_b_1240_71080" x="15" y="12" width="90.001" height="85.5039" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="4.5"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71080"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71080" result="shape"/>
+</filter>
+<filter id="filter1_d_1240_71080" x="22.5" y="34.5" width="75" height="63" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0 0.958203 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71080"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71080" result="shape"/>
+</filter>
+<filter id="filter2_b_1240_71080" x="15" y="40.5" width="90" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="4.5"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71080"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71080" result="shape"/>
+</filter>
+<filter id="filter3_bi_1240_71080" x="45" y="31.5" width="30" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="6"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71080"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71080" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71080"/>
+</filter>
+<filter id="filter4_bi_1240_71080" x="45" y="52.5" width="30" height="30" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="6"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71080"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71080" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71080"/>
+</filter>
+<linearGradient id="paint0_linear_1240_71080" x1="22.5" y1="16.5" x2="91.5" y2="109.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFF7EB"/>
+<stop offset="1" stop-color="#FFFAF4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1240_71080" x1="60.0005" y1="21" x2="60.0005" y2="88.5025" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCC369"/>
+<stop offset="1" stop-color="#F8DEB5"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1240_71080" x1="60" y1="34.5" x2="60" y2="85.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F89A05"/>
+<stop offset="0.525" stop-color="#F89A05" stop-opacity="0.9515"/>
+<stop offset="1" stop-color="#FBA824" stop-opacity="0.95"/>
+</linearGradient>
+<radialGradient id="paint3_radial_1240_71080" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(60 52.5) rotate(90) scale(9 3)">
+<stop stop-color="white"/>
+<stop offset="0.805" stop-color="white" stop-opacity="0.8"/>
+</radialGradient>
+<radialGradient id="paint4_radial_1240_71080" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(60 67.5) rotate(90) scale(3)">
+<stop stop-color="white"/>
+<stop offset="0.805" stop-color="white" stop-opacity="0.8"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/public/images/modal/warning-orange-sm.svg b/public/images/modal/warning-orange-sm.svg
new file mode 100644
index 00000000..631edfe7
--- /dev/null
+++ b/public/images/modal/warning-orange-sm.svg
@@ -0,0 +1,70 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="40" cy="40" r="40" fill="url(#paint0_linear_1240_71054)"/>
+<g filter="url(#filter0_b_1240_71054)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64 33.0034V59C64 60.1046 63.1046 61 62 61H18C16.8954 61 16 60.1046 16 59V33H16.005L37.9265 16.7862C39.356 15.7289 41.3119 15.7421 42.727 16.8187L63.9972 33H64V33.0021L64.0007 33.0027L64 33.0034Z" fill="url(#paint1_linear_1240_71054)"/>
+</g>
+<rect x="19" y="25" width="42" height="34" rx="4" fill="#F89A05"/>
+<g filter="url(#filter1_b_1240_71054)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 35L40 57L64 35V61C64 62.1046 63.1046 63 62 63H18C16.8954 63 16 62.1046 16 61V35Z" fill="#FEF7EC" fill-opacity="0.2"/>
+</g>
+<g filter="url(#filter2_bi_1240_71054)">
+<rect x="39" y="33" width="2" height="10" rx="1" fill="url(#paint2_radial_1240_71054)"/>
+</g>
+<g filter="url(#filter3_bi_1240_71054)">
+<circle cx="40" cy="46" r="1" fill="url(#paint3_radial_1240_71054)"/>
+</g>
+<defs>
+<filter id="filter0_b_1240_71054" x="10" y="10.0039" width="60.001" height="56.9961" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71054"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71054" result="shape"/>
+</filter>
+<filter id="filter1_b_1240_71054" x="10" y="29" width="60" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71054"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71054" result="shape"/>
+</filter>
+<filter id="filter2_bi_1240_71054" x="31" y="25" width="18" height="26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71054"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71054" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71054"/>
+</filter>
+<filter id="filter3_bi_1240_71054" x="31" y="37" width="18" height="18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71054"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71054" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71054"/>
+</filter>
+<linearGradient id="paint0_linear_1240_71054" x1="15" y1="11" x2="61" y2="73" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFF7EB"/>
+<stop offset="1" stop-color="#FFFAF4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1240_71054" x1="40.0004" y1="16" x2="40.0004" y2="61.0017" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCC369"/>
+<stop offset="1" stop-color="#F8DEB5"/>
+</linearGradient>
+<radialGradient id="paint2_radial_1240_71054" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(40 38) rotate(90) scale(5 1)">
+<stop stop-color="white"/>
+<stop offset="0.805" stop-color="white" stop-opacity="0.8"/>
+</radialGradient>
+<radialGradient id="paint3_radial_1240_71054" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(40 46) rotate(90)">
+<stop stop-color="white"/>
+<stop offset="0.805" stop-color="white" stop-opacity="0.8"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/public/images/modal/writing-gray-md.svg b/public/images/modal/writing-gray-md.svg
new file mode 100644
index 00000000..2045c0a5
--- /dev/null
+++ b/public/images/modal/writing-gray-md.svg
@@ -0,0 +1,171 @@
+<svg width="121" height="120" viewBox="0 0 121 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="60" cy="60" r="60" fill="url(#paint0_linear_1240_71169)"/>
+<g filter="url(#filter0_di_1240_71169)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56.311 25.5H61C64.3137 25.5 67 28.1863 67 31.5V34.5C67 36.1569 65.6569 37.5 64 37.5H37C35.3431 37.5 34 36.1569 34 34.5V31.5C34 28.1863 36.6863 25.5 40 25.5H44.689C45.3551 22.9122 47.7042 21 50.5 21C53.2958 21 55.6449 22.9122 56.311 25.5Z" fill="#D9D9D9"/>
+</g>
+<g filter="url(#filter1_b_1240_71169)">
+<rect x="22" y="30" width="57" height="69" rx="6" fill="url(#paint1_linear_1240_71169)" fill-opacity="0.5"/>
+</g>
+<g filter="url(#filter2_bdi_1240_71169)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M91.1925 47.5607C90.6067 46.9749 89.657 46.9749 89.0712 47.5607L82.379 54.2529L95.2993 67.1732L92.715 69.7575L79.7947 56.8371L62.7409 73.891C62.2337 74.3981 61.925 75.0702 61.8708 75.7853L61.0262 86.9179C60.9567 87.8338 61.7194 88.5965 62.6354 88.527L73.7679 87.6824C74.483 87.6282 75.1551 87.3195 75.6623 86.8124L101.993 60.482C102.578 59.8963 102.578 58.9465 101.993 58.3607L91.1925 47.5607Z" fill="url(#paint2_linear_1240_71169)" fill-opacity="0.8" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter3_bdi_1240_71169)">
+<rect x="32.5" y="43.5" width="36" height="3" rx="1.5" fill="url(#paint3_linear_1240_71169)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter4_bdi_1240_71169)">
+<rect x="32.5" y="54" width="36" height="3" rx="1.5" fill="url(#paint4_linear_1240_71169)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter5_bdi_1240_71169)">
+<rect x="32.5" y="64.5" width="24" height="3" rx="1.5" fill="url(#paint5_linear_1240_71169)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter6_bdi_1240_71169)">
+<rect x="32.5" y="75" width="15" height="3" rx="1.5" fill="url(#paint6_linear_1240_71169)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_di_1240_71169" x="25" y="18" width="51" height="37.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="9"/>
+<feGaussianBlur stdDeviation="4.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.956863 0 0 0 0 0.956863 0 0 0 0 0.956863 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71169"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71169" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-3" dy="-3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.992157 0 0 0 0 0.976471 0 0 0 0 0.94902 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71169"/>
+</filter>
+<filter id="filter1_b_1240_71169" x="16" y="24" width="69" height="81" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71169"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71169" result="shape"/>
+</filter>
+<filter id="filter2_bdi_1240_71169" x="49.022" y="35.1211" width="71.4102" height="71.4102" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="1.5"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71169"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="3" dy="3"/>
+<feGaussianBlur stdDeviation="7.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71169" result="effect2_dropShadow_1240_71169"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71169" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-3" dy="-3"/>
+<feGaussianBlur stdDeviation="7.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71169"/>
+</filter>
+<filter id="filter3_bdi_1240_71169" x="14.5" y="25.5" width="84" height="51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71169"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="6" dy="6"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71169" result="effect2_dropShadow_1240_71169"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71169" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="12" dy="12"/>
+<feGaussianBlur stdDeviation="7.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71169"/>
+</filter>
+<filter id="filter4_bdi_1240_71169" x="14.5" y="36" width="84" height="51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71169"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="6" dy="6"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71169" result="effect2_dropShadow_1240_71169"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71169" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="12" dy="12"/>
+<feGaussianBlur stdDeviation="7.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71169"/>
+</filter>
+<filter id="filter5_bdi_1240_71169" x="14.5" y="46.5" width="72" height="51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71169"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="6" dy="6"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71169" result="effect2_dropShadow_1240_71169"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71169" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="12" dy="12"/>
+<feGaussianBlur stdDeviation="7.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71169"/>
+</filter>
+<filter id="filter6_bdi_1240_71169" x="14.5" y="57" width="63" height="51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71169"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="6" dy="6"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71169" result="effect2_dropShadow_1240_71169"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71169" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="12" dy="12"/>
+<feGaussianBlur stdDeviation="7.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71169"/>
+</filter>
+<linearGradient id="paint0_linear_1240_71169" x1="22.5" y1="16.5" x2="91.5" y2="109.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F4F3F2"/>
+<stop offset="1" stop-color="#F4F3F2"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1240_71169" x1="50.5" y1="30" x2="50.5" y2="99" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DADADA" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#DADADA" stop-opacity="0.8"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1240_71169" x1="90.9416" y1="51.687" x2="95.2914" y2="78.9441" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DEDEDE"/>
+<stop offset="0.5" stop-color="#DEDEDE"/>
+<stop offset="1" stop-color="#DEDEDE"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1240_71169" x1="40.8538" y1="43.6869" x2="40.9737" y2="46.5219" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCFCFC"/>
+<stop offset="0.5" stop-color="#FCFCFC"/>
+<stop offset="1" stop-color="#FCFCFC"/>
+</linearGradient>
+<linearGradient id="paint4_linear_1240_71169" x1="40.8538" y1="54.1869" x2="40.9737" y2="57.0219" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCFCFC"/>
+<stop offset="0.5" stop-color="#FCFCFC"/>
+<stop offset="1" stop-color="#FCFCFC"/>
+</linearGradient>
+<linearGradient id="paint5_linear_1240_71169" x1="38.0692" y1="64.6869" x2="38.2486" y2="67.5156" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCFCFC"/>
+<stop offset="0.5" stop-color="#FCFCFC"/>
+<stop offset="1" stop-color="#FCFCFC"/>
+</linearGradient>
+<linearGradient id="paint6_linear_1240_71169" x1="35.9807" y1="75.1869" x2="36.2661" y2="77.998" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCFCFC"/>
+<stop offset="0.5" stop-color="#FCFCFC"/>
+<stop offset="1" stop-color="#FCFCFC"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/modal/writing-gray-sm.svg b/public/images/modal/writing-gray-sm.svg
new file mode 100644
index 00000000..537cef3c
--- /dev/null
+++ b/public/images/modal/writing-gray-sm.svg
@@ -0,0 +1,171 @@
+<svg width="81" height="80" viewBox="0 0 81 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="40" cy="40" r="40" fill="url(#paint0_linear_1240_71139)"/>
+<g filter="url(#filter0_di_1240_71139)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.126 17C30.5701 15.2748 32.1362 14 34 14C35.8638 14 37.4299 15.2748 37.874 17H41C43.2091 17 45 18.7909 45 21V23C45 24.1046 44.1046 25 43 25H25C23.8954 25 23 24.1046 23 23V21C23 18.7909 24.7909 17 27 17H30.126Z" fill="#DADADA"/>
+</g>
+<g filter="url(#filter1_b_1240_71139)">
+<rect x="15" y="20" width="38" height="46" rx="4" fill="url(#paint1_linear_1240_71139)" fill-opacity="0.5"/>
+</g>
+<g filter="url(#filter2_bdi_1240_71139)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M61.128 31.7071C60.7375 31.3166 60.1043 31.3166 59.7138 31.7071L55.2525 36.1684L63.8662 44.7821L62.1434 46.505L53.5297 37.8912L42.1603 49.2606C41.8222 49.5987 41.6164 50.0468 41.5802 50.5236L41.0171 57.9452C40.9708 58.5559 41.4793 59.0644 42.0899 59.018L49.5116 58.455C49.9884 58.4188 50.4364 58.213 50.7745 57.8749L68.3281 40.3214C68.7186 39.9308 68.7186 39.2977 68.3281 38.9072L61.128 31.7071Z" fill="url(#paint2_linear_1240_71139)" fill-opacity="0.8" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter3_bdi_1240_71139)">
+<rect x="22" y="29" width="24" height="2" rx="1" fill="url(#paint3_linear_1240_71139)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter4_bdi_1240_71139)">
+<rect x="22" y="43" width="16" height="2" rx="1" fill="url(#paint4_linear_1240_71139)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter5_bdi_1240_71139)">
+<rect x="22" y="50" width="10" height="2" rx="1" fill="url(#paint5_linear_1240_71139)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter6_bdi_1240_71139)">
+<rect x="22" y="36" width="24" height="2" rx="1" fill="url(#paint6_linear_1240_71139)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_di_1240_71139" x="17" y="12" width="34" height="25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.956863 0 0 0 0 0.956863 0 0 0 0 0.956863 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71139"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71139" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2" dy="-2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.992157 0 0 0 0 0.976471 0 0 0 0 0.94902 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71139"/>
+</filter>
+<filter id="filter1_b_1240_71139" x="7" y="12" width="54" height="62" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71139"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71139" result="shape"/>
+</filter>
+<filter id="filter2_bdi_1240_71139" x="33.0142" y="23.4141" width="47.6069" height="47.6055" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="1"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71139"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71139" result="effect2_dropShadow_1240_71139"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71139" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2" dy="-2"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71139"/>
+</filter>
+<filter id="filter3_bdi_1240_71139" x="10" y="17" width="56" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71139"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71139" result="effect2_dropShadow_1240_71139"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71139" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="8" dy="8"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71139"/>
+</filter>
+<filter id="filter4_bdi_1240_71139" x="10" y="31" width="48" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71139"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71139" result="effect2_dropShadow_1240_71139"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71139" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="8" dy="8"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71139"/>
+</filter>
+<filter id="filter5_bdi_1240_71139" x="10" y="38" width="42" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71139"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71139" result="effect2_dropShadow_1240_71139"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71139" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="8" dy="8"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71139"/>
+</filter>
+<filter id="filter6_bdi_1240_71139" x="10" y="24" width="56" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71139"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71139" result="effect2_dropShadow_1240_71139"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71139" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="8" dy="8"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71139"/>
+</filter>
+<linearGradient id="paint0_linear_1240_71139" x1="15" y1="11" x2="61" y2="73" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F4F3F2"/>
+<stop offset="1" stop-color="#F4F3F2"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1240_71139" x1="34" y1="20" x2="34" y2="66" gradientUnits="userSpaceOnUse">
+<stop offset="0.035" stop-color="#DADADA" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#DADADA" stop-opacity="0.8"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1240_71139" x1="60.9607" y1="34.458" x2="63.8606" y2="52.6294" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DEDEDE"/>
+<stop offset="0.5" stop-color="#DEDEDE"/>
+<stop offset="1" stop-color="#DEDEDE"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1240_71139" x1="27.5692" y1="29.1246" x2="27.6491" y2="31.0146" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCFCFC"/>
+<stop offset="0.5" stop-color="#FCFCFC"/>
+<stop offset="1" stop-color="#FCFCFC"/>
+</linearGradient>
+<linearGradient id="paint4_linear_1240_71139" x1="25.7128" y1="43.1246" x2="25.8324" y2="45.0104" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCFCFC"/>
+<stop offset="0.5" stop-color="#FCFCFC"/>
+<stop offset="1" stop-color="#FCFCFC"/>
+</linearGradient>
+<linearGradient id="paint5_linear_1240_71139" x1="24.3205" y1="50.1246" x2="24.5107" y2="51.9987" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCFCFC"/>
+<stop offset="0.5" stop-color="#FCFCFC"/>
+<stop offset="1" stop-color="#FCFCFC"/>
+</linearGradient>
+<linearGradient id="paint6_linear_1240_71139" x1="27.5692" y1="36.1246" x2="27.6491" y2="38.0146" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCFCFC"/>
+<stop offset="0.5" stop-color="#FCFCFC"/>
+<stop offset="1" stop-color="#FCFCFC"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/modal/writing-orange-md.svg b/public/images/modal/writing-orange-md.svg
new file mode 100644
index 00000000..93aea358
--- /dev/null
+++ b/public/images/modal/writing-orange-md.svg
@@ -0,0 +1,171 @@
+<svg width="121" height="120" viewBox="0 0 121 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="60" cy="60" r="60" fill="url(#paint0_linear_1240_71154)"/>
+<g filter="url(#filter0_di_1240_71154)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56.311 25.5H61C64.3137 25.5 67 28.1863 67 31.5V34.5C67 36.1569 65.6569 37.5 64 37.5H37C35.3431 37.5 34 36.1569 34 34.5V31.5C34 28.1863 36.6863 25.5 40 25.5H44.689C45.3551 22.9122 47.7042 21 50.5 21C53.2958 21 55.6449 22.9122 56.311 25.5Z" fill="#F89A05"/>
+</g>
+<g filter="url(#filter1_b_1240_71154)">
+<rect x="22" y="30" width="57" height="69" rx="6" fill="url(#paint1_linear_1240_71154)" fill-opacity="0.5"/>
+</g>
+<g filter="url(#filter2_bdi_1240_71154)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M91.1925 47.5607C90.6067 46.9749 89.657 46.9749 89.0712 47.5607L82.379 54.2529L95.2993 67.1732L92.715 69.7575L79.7947 56.8371L62.7409 73.891C62.2337 74.3981 61.925 75.0702 61.8708 75.7853L61.0262 86.9179C60.9567 87.8338 61.7194 88.5965 62.6354 88.527L73.7679 87.6824C74.483 87.6282 75.1551 87.3195 75.6623 86.8124L101.993 60.482C102.578 59.8963 102.578 58.9465 101.993 58.3607L91.1925 47.5607Z" fill="url(#paint2_linear_1240_71154)" fill-opacity="0.8" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter3_bdi_1240_71154)">
+<rect x="32.5" y="43.5" width="36" height="3" rx="1.5" fill="url(#paint3_linear_1240_71154)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter4_bdi_1240_71154)">
+<rect x="32.5" y="54" width="36" height="3" rx="1.5" fill="url(#paint4_linear_1240_71154)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter5_bdi_1240_71154)">
+<rect x="32.5" y="64.5" width="24" height="3" rx="1.5" fill="url(#paint5_linear_1240_71154)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter6_bdi_1240_71154)">
+<rect x="32.5" y="75" width="15" height="3" rx="1.5" fill="url(#paint6_linear_1240_71154)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_di_1240_71154" x="25" y="18" width="51" height="37.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="9"/>
+<feGaussianBlur stdDeviation="4.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.956863 0 0 0 0 0.956863 0 0 0 0 0.956863 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71154"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71154" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-3" dy="-3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.992157 0 0 0 0 0.976471 0 0 0 0 0.94902 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71154"/>
+</filter>
+<filter id="filter1_b_1240_71154" x="16" y="24" width="69" height="81" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71154"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71154" result="shape"/>
+</filter>
+<filter id="filter2_bdi_1240_71154" x="49.022" y="35.1211" width="71.4102" height="71.4102" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="1.5"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71154"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="3" dy="3"/>
+<feGaussianBlur stdDeviation="7.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71154" result="effect2_dropShadow_1240_71154"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71154" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-3" dy="-3"/>
+<feGaussianBlur stdDeviation="7.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71154"/>
+</filter>
+<filter id="filter3_bdi_1240_71154" x="14.5" y="25.5" width="84" height="51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71154"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="6" dy="6"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71154" result="effect2_dropShadow_1240_71154"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71154" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="12" dy="12"/>
+<feGaussianBlur stdDeviation="7.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71154"/>
+</filter>
+<filter id="filter4_bdi_1240_71154" x="14.5" y="36" width="84" height="51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71154"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="6" dy="6"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71154" result="effect2_dropShadow_1240_71154"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71154" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="12" dy="12"/>
+<feGaussianBlur stdDeviation="7.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71154"/>
+</filter>
+<filter id="filter5_bdi_1240_71154" x="14.5" y="46.5" width="72" height="51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71154"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="6" dy="6"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71154" result="effect2_dropShadow_1240_71154"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71154" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="12" dy="12"/>
+<feGaussianBlur stdDeviation="7.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71154"/>
+</filter>
+<filter id="filter6_bdi_1240_71154" x="14.5" y="57" width="63" height="51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="3"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71154"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="6" dy="6"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71154" result="effect2_dropShadow_1240_71154"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71154" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="12" dy="12"/>
+<feGaussianBlur stdDeviation="7.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71154"/>
+</filter>
+<linearGradient id="paint0_linear_1240_71154" x1="22.5" y1="16.5" x2="91.5" y2="109.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFF7EB"/>
+<stop offset="1" stop-color="#FFFAF4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1240_71154" x1="50.5" y1="30" x2="50.5" y2="99" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCC369"/>
+<stop offset="1" stop-color="#F8DEB5"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1240_71154" x1="90.9416" y1="51.687" x2="95.2914" y2="78.9441" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F89A05"/>
+<stop offset="0.5" stop-color="#F89A05"/>
+<stop offset="1" stop-color="#F89A05"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1240_71154" x1="40.8538" y1="43.6869" x2="40.9737" y2="46.5219" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F89A05"/>
+<stop offset="0.5" stop-color="#F89A05"/>
+<stop offset="1" stop-color="#F89A05"/>
+</linearGradient>
+<linearGradient id="paint4_linear_1240_71154" x1="40.8538" y1="54.1869" x2="40.9737" y2="57.0219" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F89A05"/>
+<stop offset="0.5" stop-color="#F89A05"/>
+<stop offset="1" stop-color="#F89A05"/>
+</linearGradient>
+<linearGradient id="paint5_linear_1240_71154" x1="38.0692" y1="64.6869" x2="38.2486" y2="67.5156" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F89A05"/>
+<stop offset="0.5" stop-color="#F89A05"/>
+<stop offset="1" stop-color="#F89A05"/>
+</linearGradient>
+<linearGradient id="paint6_linear_1240_71154" x1="35.9807" y1="75.1869" x2="36.2661" y2="77.998" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F89A05"/>
+<stop offset="0.5" stop-color="#F89A05"/>
+<stop offset="1" stop-color="#F89A05"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/modal/writing-orange-sm.svg b/public/images/modal/writing-orange-sm.svg
new file mode 100644
index 00000000..c3cc6357
--- /dev/null
+++ b/public/images/modal/writing-orange-sm.svg
@@ -0,0 +1,171 @@
+<svg width="81" height="80" viewBox="0 0 81 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="40" cy="40" r="40" fill="url(#paint0_linear_1240_71124)"/>
+<g filter="url(#filter0_di_1240_71124)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.126 17C30.5701 15.2748 32.1362 14 34 14C35.8638 14 37.4299 15.2748 37.874 17H41C43.2091 17 45 18.7909 45 21V23C45 24.1046 44.1046 25 43 25H25C23.8954 25 23 24.1046 23 23V21C23 18.7909 24.7909 17 27 17H30.126Z" fill="#F89A05"/>
+</g>
+<g filter="url(#filter1_b_1240_71124)">
+<rect x="15" y="20" width="38" height="46" rx="4" fill="url(#paint1_linear_1240_71124)" fill-opacity="0.5"/>
+</g>
+<g filter="url(#filter2_bdi_1240_71124)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M61.128 31.7071C60.7375 31.3166 60.1043 31.3166 59.7138 31.7071L55.2525 36.1684L63.8662 44.7821L62.1434 46.505L53.5297 37.8912L42.1603 49.2606C41.8222 49.5987 41.6164 50.0468 41.5802 50.5236L41.0171 57.9452C40.9708 58.5559 41.4793 59.0644 42.0899 59.018L49.5116 58.455C49.9884 58.4188 50.4364 58.213 50.7745 57.8749L68.3281 40.3214C68.7186 39.9308 68.7186 39.2977 68.3281 38.9072L61.128 31.7071Z" fill="url(#paint2_linear_1240_71124)" fill-opacity="0.8" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter3_bdi_1240_71124)">
+<rect x="22" y="29" width="24" height="2" rx="1" fill="url(#paint3_linear_1240_71124)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter4_bdi_1240_71124)">
+<rect x="22" y="36" width="24" height="2" rx="1" fill="url(#paint4_linear_1240_71124)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter5_bdi_1240_71124)">
+<rect x="22" y="43" width="16" height="2" rx="1" fill="url(#paint5_linear_1240_71124)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter6_bdi_1240_71124)">
+<rect x="22" y="50" width="10" height="2" rx="1" fill="url(#paint6_linear_1240_71124)" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_di_1240_71124" x="17" y="12" width="34" height="25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.956863 0 0 0 0 0.956863 0 0 0 0 0.956863 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1240_71124"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1240_71124" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2" dy="-2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.992157 0 0 0 0 0.976471 0 0 0 0 0.94902 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_1240_71124"/>
+</filter>
+<filter id="filter1_b_1240_71124" x="11" y="16" width="46" height="54" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71124"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1240_71124" result="shape"/>
+</filter>
+<filter id="filter2_bdi_1240_71124" x="33.0142" y="23.4141" width="47.6069" height="47.6055" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="1"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71124"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71124" result="effect2_dropShadow_1240_71124"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71124" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2" dy="-2"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71124"/>
+</filter>
+<filter id="filter3_bdi_1240_71124" x="10" y="17" width="56" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71124"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71124" result="effect2_dropShadow_1240_71124"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71124" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="8" dy="8"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71124"/>
+</filter>
+<filter id="filter4_bdi_1240_71124" x="10" y="24" width="56" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71124"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71124" result="effect2_dropShadow_1240_71124"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71124" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="8" dy="8"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71124"/>
+</filter>
+<filter id="filter5_bdi_1240_71124" x="10" y="31" width="48" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71124"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71124" result="effect2_dropShadow_1240_71124"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71124" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="8" dy="8"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71124"/>
+</filter>
+<filter id="filter6_bdi_1240_71124" x="10" y="38" width="42" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1240_71124"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.981102 0 0 0 0 0.716495 0 0 0 0 0.30018 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_1240_71124" result="effect2_dropShadow_1240_71124"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1240_71124" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="8" dy="8"/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980392 0 0 0 0 0.952941 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_1240_71124"/>
+</filter>
+<linearGradient id="paint0_linear_1240_71124" x1="15" y1="11" x2="61" y2="73" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFF7EB"/>
+<stop offset="1" stop-color="#FFFAF4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1240_71124" x1="34" y1="20" x2="34" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCC369"/>
+<stop offset="1" stop-color="#F8DEB5"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1240_71124" x1="60.9607" y1="34.458" x2="63.8606" y2="52.6294" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F89A05"/>
+<stop offset="0.5" stop-color="#F89A05"/>
+<stop offset="1" stop-color="#F89A05"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1240_71124" x1="27.5692" y1="29.1246" x2="27.6491" y2="31.0146" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F89A05"/>
+<stop offset="0.5" stop-color="#F89A05"/>
+<stop offset="1" stop-color="#F89A05"/>
+</linearGradient>
+<linearGradient id="paint4_linear_1240_71124" x1="27.5692" y1="36.1246" x2="27.6491" y2="38.0146" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F89A05"/>
+<stop offset="0.5" stop-color="#F89A05"/>
+<stop offset="1" stop-color="#F89A05"/>
+</linearGradient>
+<linearGradient id="paint5_linear_1240_71124" x1="25.7128" y1="43.1246" x2="25.8324" y2="45.0104" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F89A05"/>
+<stop offset="0.5" stop-color="#F89A05"/>
+<stop offset="1" stop-color="#F89A05"/>
+</linearGradient>
+<linearGradient id="paint6_linear_1240_71124" x1="24.3205" y1="50.1246" x2="24.5107" y2="51.9987" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F89A05"/>
+<stop offset="0.5" stop-color="#F89A05"/>
+<stop offset="1" stop-color="#F89A05"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/loding.json b/public/loding.json
new file mode 100644
index 00000000..1bcf9c6d
--- /dev/null
+++ b/public/loding.json
@@ -0,0 +1 @@
+{"v":"4.8.0","meta":{"g":"LottieFiles AE 1.0.0","a":"","k":"","d":"","tc":""},"fr":60,"ip":0,"op":180,"w":800,"h":600,"nm":"Loading","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Vector 61","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[606.034,164.112,0],"ix":2},"a":{"a":0,"k":[188,-134,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[187.024,-138.985],[-187.024,27.984],[-164.637,138.985],[-136.653,59.698]],"o":[[187.024,-138.985],[-187.024,27.984],[-164.637,138.985],[-136.653,59.698]],"v":[[187.024,-138.985],[-187.024,27.984],[-164.637,138.985],[-136.653,59.698]],"c":true},"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.2205,0.7595,0.2385,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Vector 61","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":180,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":2,"ty":4,"nm":"Vector 60","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[380.256,299.511,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[246.256,-152.511],[-246.256,-40.576],[35.446,152.511]],"o":[[246.256,-152.511],[-246.256,-40.576],[35.446,152.511]],"v":[[246.256,-152.511],[-246.256,-40.576],[35.446,152.511]],"c":true},"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.7843,0.902,0.7882,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Vector 60","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":180,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":3,"ty":4,"nm":"Vector 62","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[286.977,397.453,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[33.58,-10.727],[-33.58,39.643],[-8.395,-39.643]],"o":[[33.58,-10.727],[-33.58,39.643],[-8.395,-39.643]],"v":[[33.58,-10.727],[-33.58,39.643],[-8.395,-39.643]],"c":true},"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.2144,0.4256,0.2214,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Vector 62","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":180,"st":0,"bm":0,"completed":true}]}],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Union","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":36,"s":[0]},{"i":{"x":[0.708],"y":[1]},"o":{"x":[0.302],"y":[0]},"t":45,"s":[100]},{"i":{"x":[0.78],"y":[1]},"o":{"x":[0.426],"y":[0]},"t":149,"s":[100]},{"t":155,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":36,"s":[134.969,417.489,0],"to":null,"ti":null},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":155,"s":[664.499,417.489,0],"to":null,"ti":null},{"t":188,"s":[933.969,417.489,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[79.082,79.082,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[147.38,147.38],"ix":2},"p":{"a":0,"k":[0,-2.798],"ix":3},"nm":"Контур эллипса 1","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"d":1,"ty":"el","s":{"a":0,"k":[87.682,87.682],"ix":2},"p":{"a":0,"k":[-89.548,27.051],"ix":3},"nm":"Контур эллипса 2","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"d":1,"ty":"el","s":{"a":0,"k":[87.682,87.682],"ix":2},"p":{"a":0,"k":[87.682,27.051],"ix":3},"nm":"Контур эллипса 3","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"d":1,"ty":"el","s":{"a":0,"k":[57.833,57.833],"ix":2},"p":{"a":0,"k":[138.052,47.572],"ix":3},"nm":"Контур эллипса 4","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"d":1,"ty":"el","s":{"a":0,"k":[46.639,46.639],"ix":2},"p":{"a":0,"k":[-143.649,53.169],"ix":3},"nm":"Контур эллипса 5","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ty":"rc","d":1,"s":{"a":0,"k":[281.702,29.849],"ix":2},"p":{"a":0,"k":[-3.731,61.564],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Контур прямоугольника 1","mn":"ADBE Vector Shape - Rect","hd":false,"_render":true},{"ty":"mm","mm":1,"nm":"Объединить контуры 1","mn":"ADBE Vector Filter - Merge","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.833,0.9514,0.967,1],"ix":4},"o":{"a":0,"k":80,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Union","np":8,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":36,"op":216,"st":36,"bm":0,"completed":true},{"ddd":0,"ind":3,"ty":0,"nm":"plain","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.585],"y":[0.813]},"o":{"x":[0.167],"y":[-0.101]},"t":0,"s":[2.766]},{"i":{"x":[0.821],"y":[1]},"o":{"x":[0.239],"y":[0.372]},"t":40,"s":[25.678]},{"i":{"x":[0.657],"y":[0.477]},"o":{"x":[0.265],"y":[0]},"t":78,"s":[32]},{"i":{"x":[0.622],"y":[0.568]},"o":{"x":[0.222],"y":[0.283]},"t":120,"s":[21.309]},{"t":181,"s":[2.766]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.357},"t":0,"s":[432,290.765,0],"to":null,"ti":null},{"i":{"x":0.64,"y":0.863},"o":{"x":0.333,"y":0},"t":36,"s":[432,252,0],"to":null,"ti":null},{"i":{"x":0.711,"y":1},"o":{"x":0.275,"y":0.174},"t":81,"s":[432,341.695,0],"to":null,"ti":null},{"i":{"x":0.606,"y":0.479},"o":{"x":0.171,"y":0},"t":123,"s":[432,392,0],"to":null,"ti":null},{"t":181,"s":[432,290.765,0]}],"ix":2},"a":{"a":0,"k":[432,272,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":800,"h":600,"ip":0,"op":180,"st":0,"bm":0,"completed":true,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Vector 61","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[606.034,164.112,0],"ix":2},"a":{"a":0,"k":[188,-134,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[187.024,-138.985],[-187.024,27.984],[-164.637,138.985],[-136.653,59.698]],"o":[[187.024,-138.985],[-187.024,27.984],[-164.637,138.985],[-136.653,59.698]],"v":[[187.024,-138.985],[-187.024,27.984],[-164.637,138.985],[-136.653,59.698]],"c":true},"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.2205,0.7595,0.2385,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Vector 61","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":180,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":2,"ty":4,"nm":"Vector 60","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[380.256,299.511,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[246.256,-152.511],[-246.256,-40.576],[35.446,152.511]],"o":[[246.256,-152.511],[-246.256,-40.576],[35.446,152.511]],"v":[[246.256,-152.511],[-246.256,-40.576],[35.446,152.511]],"c":true},"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.7843,0.902,0.7882,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Vector 60","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":180,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":3,"ty":4,"nm":"Vector 62","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[286.977,397.453,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[33.58,-10.727],[-33.58,39.643],[-8.395,-39.643]],"o":[[33.58,-10.727],[-33.58,39.643],[-8.395,-39.643]],"v":[[33.58,-10.727],[-33.58,39.643],[-8.395,-39.643]],"c":true},"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.2144,0.4256,0.2214,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Vector 62","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":180,"st":0,"bm":0,"completed":true}]},{"ddd":0,"ind":4,"ty":4,"nm":"Union","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":11,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":16,"s":[100]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":171,"s":[100]},{"t":179,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":11,"s":[628.969,159.489,0],"to":null,"ti":null},{"t":179,"s":[170.969,159.489,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[147.38,147.38],"ix":2},"p":{"a":0,"k":[0,-2.798],"ix":3},"nm":"Контур эллипса 1","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"d":1,"ty":"el","s":{"a":0,"k":[87.682,87.682],"ix":2},"p":{"a":0,"k":[-89.548,27.051],"ix":3},"nm":"Контур эллипса 2","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"d":1,"ty":"el","s":{"a":0,"k":[87.682,87.682],"ix":2},"p":{"a":0,"k":[87.682,27.051],"ix":3},"nm":"Контур эллипса 3","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"d":1,"ty":"el","s":{"a":0,"k":[57.833,57.833],"ix":2},"p":{"a":0,"k":[138.052,47.572],"ix":3},"nm":"Контур эллипса 4","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"d":1,"ty":"el","s":{"a":0,"k":[46.639,46.639],"ix":2},"p":{"a":0,"k":[-143.649,53.169],"ix":3},"nm":"Контур эллипса 5","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ty":"rc","d":1,"s":{"a":0,"k":[281.702,29.849],"ix":2},"p":{"a":0,"k":[-3.731,61.564],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Контур прямоугольника 1","mn":"ADBE Vector Shape - Rect","hd":false,"_render":true},{"ty":"mm","mm":1,"nm":"Объединить контуры 1","mn":"ADBE Vector Filter - Merge","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.698,0.9216,0.949,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Union","np":8,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":180,"st":0,"bm":0,"completed":true}],"markers":[],"__complete":true}
\ No newline at end of file
diff --git a/public/noapply.json b/public/noapply.json
new file mode 100644
index 00000000..a854ea40
--- /dev/null
+++ b/public/noapply.json
@@ -0,0 +1 @@
+{"v":"5.7.6","fr":60,"ip":0,"op":242,"w":1200,"h":1200,"nm":"Paper_Quest","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Layer 28","parent":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":7.003,"ix":10},"p":{"a":0,"k":[0.947,-7.82,0],"ix":2,"l":2},"a":{"a":0,"k":[1507.003,1194.226,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1499.714,1265.574],[1492.431,1264.19],[1489.201,1252.18],[1507.685,1238.565],[1507.033,1220.431],[1504.32,1200.197],[1518.439,1199.55],[1528.952,1234.517],[1507.203,1261.271]],"o":[[1495.2189999999998,1265.574],[1488.088,1257.6070000000002],[1500.273,1244.872],[1509.677,1232.469],[1501.867,1205.162],[1513.4759999999999,1197.095],[1524.42,1217.203],[1521.645,1251.281],[1501.383,1265.107]],"v":[[1498.061,1265.574],[1490.749,1261.64],[1493.234,1249.518],[1509.206,1235.97],[1503.415,1209.74],[1508.898,1198.647],[1519.989,1204.126],[1525.375,1242.729],[1502.865,1264.129]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.36,0.44,0.3627,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1485.663,1242.03],[1480.082,1241.8580000000002],[1472.2160000000001,1234.816],[1479.547,1214.739],[1480.7150000000001,1212.399],[1494.308,1199.108],[1503.305,1195.7910000000002],[1510,1208.242],[1495.304,1222.609],[1490.314,1236.28]],"o":[[1481.095,1242.03],[1474.5520000000001,1239.8390000000002],[1473.874,1230.276],[1479.996,1213.511],[1481.65,1211.485],[1497.765,1195.7279999999998],[1510.06,1202.702],[1506.545,1211.62],[1495.304,1222.609],[1489.018,1239.829]],"v":[[1482.094,1242.03],[1479.093,1241.497],[1473.874,1230.276],[1479.547,1214.739],[1481.65,1211.485],[1494.308,1199.108],[1506.684,1199.247],[1506.545,1211.62],[1495.304,1222.609],[1490.314,1236.28]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.36,0.44,0.3627,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 2","np":1,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1491.334,1264.798],[1484.106,1263.473],[1480.673,1251.578],[1497.695,1207.339],[1496.821,1203.748],[1515,1187],[1519.511,1246.091]],"o":[[1486.8400000000001,1264.798],[1479.6670000000001,1257.028],[1506.235,1233.983],[1496.9279999999999,1205.032],[1498,1187],[1518.744,1217.114],[1493.063,1264.298]],"v":[[1489.623,1264.798],[1482.409,1261.007],[1484.655,1248.839],[1497.321,1206.211],[1496.908,1202.509],[1514.501,1202.516],[1494.577,1263.254]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.36,0.44,0.3627,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 3","np":1,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":2,"ty":4,"nm":"Hose 2::Wrist","parent":20,"hd":true,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-6,"ix":10,"x":"var $bm_rt;\nfunction parentTotal() {\n    var parentVal = 0;\n    var layerChain = 'thisLayer';\n    while (eval([layerChain][0]).hasParent) {\n        layerChain = $bm_sum(layerChain, '.parent');\n        parentVal = $bm_sum(parentVal, eval([layerChain][0]).rotation);\n    }\n    return parentVal;\n}\ntry {\n    var eff = thisLayer(4)('RubberHose 2');\n    var autoRotate = eff('Auto Rotate End');\n    if (autoRotate == 1) {\n        var a = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name).toComp([\n            0,\n            0,\n            0\n        ]);\n        var b = thisComp.layer(thisLayer(2)('Admin')(2)('B')(2)(1)._name).toComp([\n            0,\n            0,\n            0\n        ]);\n        var s = length(a, b);\n        var sFac = eff('Parent Scale');\n        var realism = eff('Realism');\n        var bendDir = $bm_div(eff('Bend Direction'), 100);\n        var hoseLength = $bm_div(eff('Hose Length'), 2);\n        var bendRad = eff('Bend Radius');\n        var autoFlop = eff('AutoFlop');\n        var baseRot = $bm_sub(180, radiansToDegrees(Math.atan2($bm_sub(b[0], a[0]), $bm_sub(b[1], a[1]))));\n        var outerRad = $bm_mul(Math.sin(0.78539816339), s);\n        var straight = $bm_div($bm_mul(1.4142135623731, outerRad), 2);\n        straight /= Math.max(Math.abs(sFac), 0.001);\n        var roundShrink = linear(Math.abs(bendRad), 0, 100, 1, 0.87);\n        var innerRad;\n        if (hoseLength > straight) {\n            innerRad = $bm_sum(straight, $bm_mul(Math.sqrt($bm_sub(Math.pow(hoseLength, 2), Math.pow(straight, 2))), roundShrink));\n            innerRad = linear(realism, 0, 100, hoseLength, innerRad);\n            innerRad = linear(Math.abs(bendDir), straight, innerRad);\n        } else {\n            innerRad = straight;\n        }\n        innerRad = linear(Math.abs(autoFlop), straight, innerRad);\n        var flopDir = 1;\n        if (bendDir < 0) {\n            flopDir = -1;\n        }\n        flopDir *= autoFlop;\n        var opp = $bm_mul($bm_sub(innerRad, straight), flopDir);\n        var theta = Math.atan($bm_div(opp, Math.max(straight, 0.001)));\n        var bendAngle = radiansToDegrees(theta);\n        if (sFac < 0) {\n            baseRot *= -1;\n        }\n        bendRad *= $bm_div($bm_div(theta, $bm_neg(Math.PI)), linear(s, hoseLength, 0, 2, 0.9));\n        var parentRot = hasParent ? parentTotal() : 0;\n        var rotCalc = $bm_sub($bm_sub($bm_sum(baseRot, bendAngle), bendRad), parentRot);\n        $bm_rt = $bm_sum(rotCalc, value);\n    } else {\n        $bm_rt = value;\n    }\n} catch (e) {\n    $bm_rt = value;\n}"},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[1412.194,-2110.283,0],"to":null,"ti":null},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":70,"s":[1428.169,-2109.585,0],"to":null,"ti":null},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":90,"s":[1424.509,-2109.9,0],"to":null,"ti":null},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":111,"s":[1431.237,-2109.745,0],"to":null,"ti":null},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":131,"s":[1423.345,-2110.033,0],"to":null,"ti":null},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":153,"s":[1431.137,-2109.747,0],"to":null,"ti":null},{"t":210,"s":[1412.194,-2110.283,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100],"ix":6,"l":2}},"ao":0,"ef":[{"ty":5,"nm":"RubberHose 2","np":18,"mn":"Pseudo/3bf5uID/RubberHose_2","ix":1,"en":1,"ef":[{"ty":0,"nm":"Hose Length","mn":"Pseudo/3bf5uID/RubberHose_2-0001","ix":1,"v":{"a":0,"k":210,"ix":1}},{"ty":0,"nm":"Bend Radius","mn":"Pseudo/3bf5uID/RubberHose_2-0002","ix":2,"v":{"a":0,"k":36,"ix":2}},{"ty":0,"nm":"Realism","mn":"Pseudo/3bf5uID/RubberHose_2-0003","ix":3,"v":{"a":0,"k":50,"ix":3}},{"ty":0,"nm":"Bend Direction","mn":"Pseudo/3bf5uID/RubberHose_2-0004","ix":4,"v":{"a":0,"k":100,"ix":4}},{"ty":7,"nm":"Auto Rotate Start","mn":"Pseudo/3bf5uID/RubberHose_2-0005","ix":5,"v":{"a":0,"k":1,"ix":5}},{"ty":7,"nm":"Auto Rotate End","mn":"Pseudo/3bf5uID/RubberHose_2-0006","ix":6,"v":{"a":0,"k":1,"ix":6}},{"ty":6,"nm":"Math Stuff","mn":"Pseudo/3bf5uID/RubberHose_2-0007","ix":7,"v":0},{"ty":3,"nm":"A","mn":"Pseudo/3bf5uID/RubberHose_2-0008","ix":8,"v":{"a":0,"k":[0,0],"ix":8,"x":"var $bm_rt;\n$bm_rt = thisLayer.toComp([\n    0,\n    0,\n    0\n]);"}},{"ty":3,"nm":"B","mn":"Pseudo/3bf5uID/RubberHose_2-0009","ix":9,"v":{"a":0,"k":[0,0],"ix":9,"x":"var $bm_rt;\ntry {\n    var b = thisLayer(2)('Admin')(2)('B')(2)(1)._name;\n    $bm_rt = thisComp.layer(b).toComp([\n        0,\n        0,\n        0\n    ]);\n} catch (err) {\n    $bm_rt = value;\n}"}},{"ty":0,"nm":"Outer Radius","mn":"Pseudo/3bf5uID/RubberHose_2-0010","ix":10,"v":{"a":0,"k":0,"ix":10,"x":"var $bm_rt;\nvar a = thisLayer(4)('RubberHose 2')('A');\nvar b = thisLayer(4)('RubberHose 2')('B');\nvar s = length(a, b);\n$bm_rt = $bm_mul(Math.sin(0.78539816339), s);"}},{"ty":0,"nm":"Inner Radius","mn":"Pseudo/3bf5uID/RubberHose_2-0011","ix":11,"v":{"a":0,"k":0,"ix":11,"x":"var $bm_rt;\nvar eff = thisLayer(4)('RubberHose 2');\nvar bendRad = eff('Bend Radius');\nvar hoseLength = $bm_div(eff('Hose Length'), 2);\nvar realism = eff('Realism');\nvar bendDir = $bm_div(eff('Bend Direction'), 100);\nvar sFac = eff('Parent Scale');\nvar straight = eff('Straight');\nvar autoFlop = eff('AutoFlop');\nvar roundShrink = linear(Math.abs(bendRad), 0, 100, 1, 0.87);\nvar innerRad;\nif (hoseLength > straight) {\n    innerRad = $bm_sum(straight, $bm_mul(Math.sqrt($bm_sub(Math.pow(hoseLength, 2), Math.pow(straight, 2))), roundShrink));\n    innerRad = linear(realism, 0, 100, hoseLength, innerRad);\n    innerRad = linear(Math.abs(bendDir), straight, innerRad);\n} else {\n    innerRad = straight;\n}\ninnerRad *= Math.abs(sFac);\ninnerRad = linear(Math.abs(autoFlop), $bm_mul(straight, Math.max(Math.abs(sFac), 0.001)), innerRad);\n$bm_rt = innerRad;"}},{"ty":0,"nm":"Straight","mn":"Pseudo/3bf5uID/RubberHose_2-0012","ix":12,"v":{"a":0,"k":0,"ix":12,"x":"var $bm_rt;\nvar sFac = thisLayer(4)('RubberHose 2')('Parent Scale');\nvar outerRad = $bm_div(thisLayer(4)('RubberHose 2')('Outer Radius'), Math.max(Math.abs(sFac), 0.001));\n;\n$bm_rt = $bm_div($bm_mul(1.4142135623731, outerRad), 2);"}},{"ty":0,"nm":"Base Rotation","mn":"Pseudo/3bf5uID/RubberHose_2-0013","ix":13,"v":{"a":0,"k":0,"ix":13,"x":"var $bm_rt;\nvar a = thisLayer(4)('RubberHose 2')('A');\nvar b = thisLayer(4)('RubberHose 2')('B');\n$bm_rt = radiansToDegrees(Math.atan2($bm_sub(a[1], b[1]), $bm_sub(a[0], b[0])));"}},{"ty":0,"nm":"AutoFlop","mn":"Pseudo/3bf5uID/RubberHose_2-0014","ix":14,"v":{"a":0,"k":0,"ix":14,"x":"var $bm_rt;\nvar hasAF = false, isEnabled = false, output;\ntry {\n    var lyrAF = thisComp.layer($bm_sum(thisLayer._name.split('::')[0], '::AutoFlop'));\n    isEnabled = lyrAF(4)('Enable')(1);\n    var falloffAngle = lyrAF(4)('Falloff')(1);\n    hasAF = true;\n    var a = thisLayer.toComp([\n        0,\n        0,\n        0\n    ]);\n    var b = thisComp.layer(thisLayer(2)('Admin')(2)('B')(2)(1)._name).toComp([\n        0,\n        0,\n        0\n    ]);\n} catch (e) {\n}\nif (hasAF && isEnabled == 1) {\n    var threshRot = lyrAF('ADBE Transform Group')('ADBE Rotate Z');\n    threshRot %= 360;\n    var ctrlAngle = $bm_neg(radiansToDegrees(Math.atan2($bm_sub(b[0], a[0]), $bm_sub(b[1], a[1]))));\n    var offsetAngle = $bm_sub(threshRot, ctrlAngle);\n    offsetAngle %= 360;\n    var sign = offsetAngle > 0 && offsetAngle < 180 || offsetAngle < -180 ? -1 : 1;\n    var absAngle = Math.abs(offsetAngle);\n    if (absAngle > 90) {\n        absAngle = Math.abs($bm_sub(absAngle, 180));\n    }\n    if (absAngle > 90) {\n        absAngle = Math.abs($bm_sub(absAngle, 180));\n    }\n    output = linear(absAngle, 0, falloffAngle, 0, 1);\n    output *= sign;\n} else {\n    output = 1;\n}\n$bm_rt = output;"}},{"ty":0,"nm":"Parent Scale","mn":"Pseudo/3bf5uID/RubberHose_2-0015","ix":15,"v":{"a":0,"k":0,"ix":15,"x":"var $bm_rt;\nvar sFactor = 1;\nvar scaleNorm = 0;\nvar layerChain = 'thisLayer';\nwhile (eval([layerChain][0]).hasParent) {\n    layerChain = $bm_sum(layerChain, '.parent');\n    scaleNorm = $bm_div(eval(layerChain)('ADBE Transform Group')('ADBE Scale')[0], 100);\n    sFactor = $bm_mul(sFactor, scaleNorm);\n}\n$bm_rt = sFactor;"}},{"ty":6,"nm":"","mn":"Pseudo/3bf5uID/RubberHose_2-0016","ix":16,"v":0}]}],"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[100,100],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Circle","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-75,0],[25,0]],"o":[[-75,0],[75,0]],"v":[[-75,0],[75,0]],"c":false},"ix":2},"nm":"01","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0,-30],[0,30]],"o":[[0,-30],[0,30]],"v":[[0,-30],[0,30]],"c":false},"ix":2},"nm":"02","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[30,30],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"ControlShape","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0,1,0.0333,1],"ix":3,"x":"var $bm_rt;\nif (thisLayer.active) {\n    try {\n        var eff = thisLayer(4)('RubberHose 2');\n        var a = thisLayer.toComp([\n            0,\n            0,\n            0\n        ]);\n        var b = eff('B');\n        var straight = eff('Straight');\n        var hoseLength = $bm_div(eff('Hose Length'), 2);\n        if (straight > hoseLength) {\n            $bm_rt = [\n                0.51,\n                0.83,\n                0.98,\n                1\n            ];\n        } else {\n            $bm_rt = value;\n        }\n    } catch (err) {\n        $bm_rt = value;\n    }\n} else {\n    $bm_rt = value;\n}"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Control Point","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 2::Wrist","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[135,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"A","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[20,20],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 2::Shoulder","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"B","np":1,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"2.09","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"cl":"09","_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Version","np":1,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Admin","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":3,"ty":4,"nm":"Hose 2::Shoulder","parent":20,"hd":true,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-6,"ix":10,"x":"var $bm_rt;\nfunction parentTotal() {\n    var parentVal = 0;\n    var layerChain = 'thisLayer';\n    while (eval([layerChain][0]).hasParent) {\n        layerChain = $bm_sum(layerChain, '.parent');\n        parentVal = $bm_sum(parentVal, eval([layerChain][0]).rotation);\n    }\n    return parentVal;\n}\ntry {\n    var eff = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    var autoRotate = eff('Auto Rotate Start');\n    if (autoRotate == 1) {\n        var a = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name).toComp([\n            0,\n            0,\n            0\n        ]);\n        var b = thisComp.layer(thisLayer(2)('Admin')(2)('B')(2)(1)._name).toComp([\n            0,\n            0,\n            0\n        ]);\n        var s = length(a, b);\n        var sFac = eff('Parent Scale');\n        var realism = eff('Realism');\n        var bendDir = $bm_div(eff('Bend Direction'), 100);\n        var hoseLength = $bm_div(eff('Hose Length'), 2);\n        var bendRad = eff('Bend Radius');\n        var autoFlop = eff('AutoFlop');\n        var baseRot = $bm_sub(180, radiansToDegrees(Math.atan2($bm_sub(b[0], a[0]), $bm_sub(b[1], a[1]))));\n        var outerRad = $bm_mul(Math.sin(0.78539816339), s);\n        var straight = $bm_div($bm_mul(1.4142135623731, outerRad), 2);\n        straight /= Math.max(Math.abs(sFac), 0.001);\n        var roundShrink = linear(Math.abs(bendRad), 0, 100, 1, 0.87);\n        var innerRad;\n        if (hoseLength > straight) {\n            innerRad = $bm_sum(straight, $bm_mul(Math.sqrt($bm_sub(Math.pow(hoseLength, 2), Math.pow(straight, 2))), roundShrink));\n            innerRad = linear(realism, 0, 100, hoseLength, innerRad);\n            innerRad = linear(Math.abs(bendDir), straight, innerRad);\n        } else {\n            innerRad = straight;\n        }\n        innerRad = linear(Math.abs(autoFlop), straight, innerRad);\n        var flopDir = 1;\n        if (bendDir < 0) {\n            flopDir = -1;\n        }\n        flopDir *= autoFlop;\n        var opp = $bm_mul($bm_sub(innerRad, straight), flopDir);\n        var theta = Math.atan($bm_div(opp, Math.max(straight, 0.001)));\n        var bendAngle = radiansToDegrees(theta);\n        if (sFac < 0) {\n            baseRot *= -1;\n        }\n        bendRad *= $bm_div($bm_div(theta, $bm_neg(Math.PI)), linear(s, hoseLength, 0, 2, 0.9));\n        var parentRot = hasParent ? parentTotal() : 0;\n        var rotCalc = $bm_sub($bm_sum($bm_sub(baseRot, bendAngle), bendRad), parentRot);\n        $bm_rt = $bm_sum(rotCalc, value);\n    } else {\n        $bm_rt = value;\n    }\n} catch (e) {\n    $bm_rt = value;\n}"},"p":{"a":0,"k":[1429.005,-2331.711,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[100,100],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Circle","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-75,0],[75,0]],"o":[[-75,0],[75,0]],"v":[[-75,0],[75,0]],"c":false},"ix":2},"nm":"01","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0,-30],[0,30]],"o":[[0,-30],[0,30]],"v":[[0,-30],[0,30]],"c":false},"ix":2},"nm":"02","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[30,30],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"ControlShape","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0,1,0.0333,1],"ix":3,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name);\n    $bm_rt = ctrl(2)('Control Point')(2)('Stroke 1')('Color');\n} catch (e) {\n    $bm_rt = value;\n}"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Control Point","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 2::Wrist","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[135,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"A","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[20,20],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 2::Shoulder","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"B","np":1,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"2.09","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"cl":"09","_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Version","np":1,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Admin","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":4,"ty":4,"nm":"Hose 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10,"x":"var $bm_rt;\nfunction parentTotal() {\n    var parentVal = 0;\n    var layerChain = 'thisLayer';\n    while (eval([layerChain][0]).hasParent) {\n        layerChain = $bm_sum(layerChain, '.parent');\n        parentVal = $bm_sum(parentVal, eval([layerChain][0]).rotation);\n    }\n    return parentVal;\n}\nvar r = 0;\nif (thisLayer.hasParent) {\n    r = $bm_neg(parentTotal());\n}\n$bm_rt = r;"},"p":{"a":0,"k":[600,600,0],"ix":2,"l":2,"x":"var $bm_rt;\nvar p = [\n    0,\n    0\n];\ntry {\n    if (thisLayer.hasParent) {\n        p = parent.fromComp([\n            0,\n            0,\n            0\n        ]);\n    }\n    $bm_rt = p;\n} catch (err) {\n    $bm_rt = p;\n}"},"a":{"a":0,"k":[0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2,"x":"var $bm_rt;\n$bm_rt = $bm_div(value, length(toComp([\n    0,\n    0\n]), toComp([\n    0.7071,\n    0.7071\n]))) || 0.001;"}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":4,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":500,"ix":6,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"is":{"a":0,"k":0,"ix":8,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"or":{"a":0,"k":113,"ix":7,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"os":{"a":0,"k":0,"ix":9,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"ix":1,"nm":"LineForCurve","mn":"ADBE Vector Shape - Star","hd":false,"_render":true},{"ty":"tm","s":{"a":0,"k":0,"ix":1,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"e":{"a":0,"k":0,"ix":2,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"o":{"a":0,"k":-90,"ix":3,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"m":1,"ix":2,"nm":"Line Halfer","mn":"ADBE Vector Filter - Trim","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"a":{"a":0,"k":[0,0],"ix":1,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"s":{"a":0,"k":[100,100],"ix":3,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"r":{"a":0,"k":45,"ix":6,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"o":{"a":0,"k":100,"ix":7,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"sk":{"a":0,"k":0,"ix":4,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"sa":{"a":0,"k":0,"ix":5,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"nm":"Transform","_render":true}],"nm":"Arc","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.36,0.44,0.3627,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":18,"ix":5,"x":"var $bm_rt;\nvar sFac = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2')('Parent Scale');\n$bm_rt = Math.abs($bm_mul(value, sFac));"},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('A');\n} catch (err) {\n    $bm_rt = value;\n}"},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"BaseHose","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Style","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 2::Wrist","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[135,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"A","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[200,200],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 2::Shoulder","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"B","np":1,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"2.09","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"cl":"09","_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Version","np":1,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":4,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":200,"ix":6,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('Inner Radius');\n} catch (err) {\n    $bm_rt = value;\n}"},"is":{"a":0,"k":100,"ix":8,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('Bend Radius');\n} catch (err) {\n    $bm_rt = value;\n}"},"or":{"a":0,"k":200,"ix":7,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('Outer Radius');\n} catch (err) {\n    $bm_rt = value;\n}"},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"LineForCurve","mn":"ADBE Vector Shape - Star","hd":false,"_render":true},{"ty":"tm","s":{"a":0,"k":0.01,"ix":1},"e":{"a":0,"k":24.99,"ix":2},"o":{"a":0,"k":-90,"ix":3,"x":"var $bm_rt;\n$bm_rt = -90;"},"m":1,"ix":2,"nm":"Line Halfer","mn":"ADBE Vector Filter - Trim","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1,"x":"var $bm_rt;\nvar s = thisProperty.propertyGroup(2)(2)(1)(7);\n$bm_rt = [\n    -s,\n    0\n];"},"s":{"a":0,"k":[100,100],"ix":3,"x":"var $bm_rt;\nvar flop;\ntry {\n    var eff = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    var bendDir = eff('Bend Direction');\n    var autoFlop = eff('AutoFlop');\n    flop = bendDir > 0 ? 1 : -1;\n    autoFlop > 0 ? 0 : flop *= -1;\n    var s = flop == 1 ? [\n        -100,\n        100\n    ] : [\n        100,\n        100\n    ];\n    if (eff('Parent Scale') < 0) {\n        s = [\n            $bm_neg(s[0]),\n            s[1]\n        ];\n    }\n    $bm_rt = s;\n} catch (err) {\n    $bm_rt = value;\n}\n;"},"r":{"a":0,"k":45,"ix":6,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    var baseRot = ctrl('Base Rotation');\n    var flop = content('Admin').content('ArcMath').transform.scale[0];\n    var rotOffset = flop < 0 ? -45 : 225;\n    $bm_rt = $bm_sum(baseRot, rotOffset);\n} catch (err) {\n    $bm_rt = value;\n}"},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"ArcMath","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('A');\n} catch (err) {\n    $bm_rt = value;\n}"},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Admin","np":4,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":5,"ty":4,"nm":"Layer 21","parent":6,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":70,"s":[135.389]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":90,"s":[116.389]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":111,"s":[135.389]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":131,"s":[116.389]},{"t":152,"s":[135.389]}],"ix":10},"p":{"a":0,"k":[0.734,-5.344,0],"ix":2,"l":2},"a":{"a":0,"k":[1583.807,-3558.261,0],"ix":1,"l":2},"s":{"a":0,"k":[230,230,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1620.417,-3570.445],[1616.884,-3574.862],[1605.286,-3573.504],[1598.862,-3574.966],[1587.8990000000001,-3569.873],[1584.486,-3563.448],[1584.058,-3562.698],[1583.0539999999999,-3552.9300000000003],[1588.569,-3557.376],[1590.625,-3556.895],[1594.85,-3558.1820000000002],[1596.606,-3555.971],[1596.589,-3551.203],[1599.189,-3550.356],[1602.367,-3551.252],[1603.298,-3553.963],[1605.2810000000002,-3552.995],[1606.775,-3552.9959999999996],[1610.253,-3554.735],[1609.789,-3559.527],[1613.932,-3559.2780000000002],[1617.834,-3559.933],[1617.617,-3565.569],[1615.11,-3566.206],[1616.5910000000001,-3567.16]],"o":[[1618.935,-3574.016],[1610.6650000000002,-3572.279],[1600.063,-3574.692],[1595.129,-3574.966],[1584.614,-3563.967],[1584.255,-3562.825],[1577.17,-3557.188],[1588.417,-3557.221],[1589.568,-3557.04],[1592.468,-3557.549],[1596.828,-3557.2180000000003],[1595.635,-3553.197],[1598.7949999999998,-3550.421],[1601.017,-3550.356],[1603.035,-3553.1349999999998],[1604.076,-3553.801],[1606.717,-3552.995],[1608.765,-3553.0939999999996],[1610.097,-3557.9],[1611.787,-3559.814],[1615.9499999999998,-3558.789],[1618.761,-3563.674],[1615.733,-3566.045],[1615.3799999999999,-3566.811],[1619.5710000000001,-3568.397]],"v":[[1619.676,-3572.23],[1615.102,-3574.121],[1601.726,-3574.314],[1597.78,-3574.966],[1584.883,-3564.451],[1584.46,-3562.93],[1583.871,-3562.549],[1588.244,-3557.083],[1588.709,-3557.538],[1591.632,-3557.252],[1596.829,-3557.976],[1596.274,-3555.016],[1598.408,-3550.558],[1599.577,-3550.356],[1602.876,-3552.687],[1603.508,-3554.982],[1606.659,-3552.995],[1606.834,-3552.999],[1610.158,-3556.666],[1609.116,-3561.194],[1614.08,-3559.242],[1618.297,-3561.803],[1615.749,-3566.041],[1614.174,-3566.574],[1617.786,-3567.656]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.36,0.44,0.3627,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":6,"ty":4,"nm":"Hose 1::Wrist","parent":20,"hd":true,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-6,"ix":10,"x":"var $bm_rt;\nfunction parentTotal() {\n    var parentVal = 0;\n    var layerChain = 'thisLayer';\n    while (eval([layerChain][0]).hasParent) {\n        layerChain = $bm_sum(layerChain, '.parent');\n        parentVal = $bm_sum(parentVal, eval([layerChain][0]).rotation);\n    }\n    return parentVal;\n}\ntry {\n    var eff = thisLayer(4)('RubberHose 2');\n    var autoRotate = eff('Auto Rotate End');\n    if (autoRotate == 1) {\n        var a = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name).toComp([\n            0,\n            0,\n            0\n        ]);\n        var b = thisComp.layer(thisLayer(2)('Admin')(2)('B')(2)(1)._name).toComp([\n            0,\n            0,\n            0\n        ]);\n        var s = length(a, b);\n        var sFac = eff('Parent Scale');\n        var realism = eff('Realism');\n        var bendDir = $bm_div(eff('Bend Direction'), 100);\n        var hoseLength = $bm_div(eff('Hose Length'), 2);\n        var bendRad = eff('Bend Radius');\n        var autoFlop = eff('AutoFlop');\n        var baseRot = $bm_sub(180, radiansToDegrees(Math.atan2($bm_sub(b[0], a[0]), $bm_sub(b[1], a[1]))));\n        var outerRad = $bm_mul(Math.sin(0.78539816339), s);\n        var straight = $bm_div($bm_mul(1.4142135623731, outerRad), 2);\n        straight /= Math.max(Math.abs(sFac), 0.001);\n        var roundShrink = linear(Math.abs(bendRad), 0, 100, 1, 0.87);\n        var innerRad;\n        if (hoseLength > straight) {\n            innerRad = $bm_sum(straight, $bm_mul(Math.sqrt($bm_sub(Math.pow(hoseLength, 2), Math.pow(straight, 2))), roundShrink));\n            innerRad = linear(realism, 0, 100, hoseLength, innerRad);\n            innerRad = linear(Math.abs(bendDir), straight, innerRad);\n        } else {\n            innerRad = straight;\n        }\n        innerRad = linear(Math.abs(autoFlop), straight, innerRad);\n        var flopDir = 1;\n        if (bendDir < 0) {\n            flopDir = -1;\n        }\n        flopDir *= autoFlop;\n        var opp = $bm_mul($bm_sub(innerRad, straight), flopDir);\n        var theta = Math.atan($bm_div(opp, Math.max(straight, 0.001)));\n        var bendAngle = radiansToDegrees(theta);\n        if (sFac < 0) {\n            baseRot *= -1;\n        }\n        bendRad *= $bm_div($bm_div(theta, $bm_neg(Math.PI)), linear(s, hoseLength, 0, 2, 0.9));\n        var parentRot = hasParent ? parentTotal() : 0;\n        var rotCalc = $bm_sub($bm_sub($bm_sum(baseRot, bendAngle), bendRad), parentRot);\n        $bm_rt = $bm_sum(rotCalc, value);\n    } else {\n        $bm_rt = value;\n    }\n} catch (e) {\n    $bm_rt = value;\n}"},"p":{"a":1,"k":[{"i":{"x":0.117,"y":0.117},"o":{"x":0.333,"y":0.333},"t":0,"s":[1050.058,-2490.597,0],"to":null,"ti":null},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":70,"s":[1050.058,-2490.597,0],"to":[0.144,-1.463,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":90.564,"s":[1050.921,-2499.375,0],"to":null,"ti":null},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":111.125,"s":[1050.058,-2490.597,0],"to":null,"ti":null},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":131.188,"s":[1050.921,-2499.375,0],"to":[0,0,0],"ti":[0.144,-1.463,0]},{"i":{"x":0.117,"y":0.117},"o":{"x":0.615,"y":0.615},"t":153,"s":[1050.058,-2490.597,0],"to":null,"ti":null},{"t":210,"s":[1050.058,-2490.597,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100],"ix":6,"l":2}},"ao":0,"ef":[{"ty":5,"nm":"RubberHose 2","np":18,"mn":"Pseudo/3bf5uID/RubberHose_2","ix":1,"en":1,"ef":[{"ty":0,"nm":"Hose Length","mn":"Pseudo/3bf5uID/RubberHose_2-0001","ix":1,"v":{"a":0,"k":270,"ix":1}},{"ty":0,"nm":"Bend Radius","mn":"Pseudo/3bf5uID/RubberHose_2-0002","ix":2,"v":{"a":0,"k":30,"ix":2}},{"ty":0,"nm":"Realism","mn":"Pseudo/3bf5uID/RubberHose_2-0003","ix":3,"v":{"a":0,"k":50,"ix":3}},{"ty":0,"nm":"Bend Direction","mn":"Pseudo/3bf5uID/RubberHose_2-0004","ix":4,"v":{"a":0,"k":100,"ix":4}},{"ty":7,"nm":"Auto Rotate Start","mn":"Pseudo/3bf5uID/RubberHose_2-0005","ix":5,"v":{"a":0,"k":1,"ix":5}},{"ty":7,"nm":"Auto Rotate End","mn":"Pseudo/3bf5uID/RubberHose_2-0006","ix":6,"v":{"a":0,"k":1,"ix":6}},{"ty":6,"nm":"Math Stuff","mn":"Pseudo/3bf5uID/RubberHose_2-0007","ix":7,"v":0},{"ty":3,"nm":"A","mn":"Pseudo/3bf5uID/RubberHose_2-0008","ix":8,"v":{"a":0,"k":[0,0],"ix":8,"x":"var $bm_rt;\n$bm_rt = thisLayer.toComp([\n    0,\n    0,\n    0\n]);"}},{"ty":3,"nm":"B","mn":"Pseudo/3bf5uID/RubberHose_2-0009","ix":9,"v":{"a":0,"k":[0,0],"ix":9,"x":"var $bm_rt;\ntry {\n    var b = thisLayer(2)('Admin')(2)('B')(2)(1)._name;\n    $bm_rt = thisComp.layer(b).toComp([\n        0,\n        0,\n        0\n    ]);\n} catch (err) {\n    $bm_rt = value;\n}"}},{"ty":0,"nm":"Outer Radius","mn":"Pseudo/3bf5uID/RubberHose_2-0010","ix":10,"v":{"a":0,"k":0,"ix":10,"x":"var $bm_rt;\nvar a = thisLayer(4)('RubberHose 2')('A');\nvar b = thisLayer(4)('RubberHose 2')('B');\nvar s = length(a, b);\n$bm_rt = $bm_mul(Math.sin(0.78539816339), s);"}},{"ty":0,"nm":"Inner Radius","mn":"Pseudo/3bf5uID/RubberHose_2-0011","ix":11,"v":{"a":0,"k":0,"ix":11,"x":"var $bm_rt;\nvar eff = thisLayer(4)('RubberHose 2');\nvar bendRad = eff('Bend Radius');\nvar hoseLength = $bm_div(eff('Hose Length'), 2);\nvar realism = eff('Realism');\nvar bendDir = $bm_div(eff('Bend Direction'), 100);\nvar sFac = eff('Parent Scale');\nvar straight = eff('Straight');\nvar autoFlop = eff('AutoFlop');\nvar roundShrink = linear(Math.abs(bendRad), 0, 100, 1, 0.87);\nvar innerRad;\nif (hoseLength > straight) {\n    innerRad = $bm_sum(straight, $bm_mul(Math.sqrt($bm_sub(Math.pow(hoseLength, 2), Math.pow(straight, 2))), roundShrink));\n    innerRad = linear(realism, 0, 100, hoseLength, innerRad);\n    innerRad = linear(Math.abs(bendDir), straight, innerRad);\n} else {\n    innerRad = straight;\n}\ninnerRad *= Math.abs(sFac);\ninnerRad = linear(Math.abs(autoFlop), $bm_mul(straight, Math.max(Math.abs(sFac), 0.001)), innerRad);\n$bm_rt = innerRad;"}},{"ty":0,"nm":"Straight","mn":"Pseudo/3bf5uID/RubberHose_2-0012","ix":12,"v":{"a":0,"k":0,"ix":12,"x":"var $bm_rt;\nvar sFac = thisLayer(4)('RubberHose 2')('Parent Scale');\nvar outerRad = $bm_div(thisLayer(4)('RubberHose 2')('Outer Radius'), Math.max(Math.abs(sFac), 0.001));\n;\n$bm_rt = $bm_div($bm_mul(1.4142135623731, outerRad), 2);"}},{"ty":0,"nm":"Base Rotation","mn":"Pseudo/3bf5uID/RubberHose_2-0013","ix":13,"v":{"a":0,"k":0,"ix":13,"x":"var $bm_rt;\nvar a = thisLayer(4)('RubberHose 2')('A');\nvar b = thisLayer(4)('RubberHose 2')('B');\n$bm_rt = radiansToDegrees(Math.atan2($bm_sub(a[1], b[1]), $bm_sub(a[0], b[0])));"}},{"ty":0,"nm":"AutoFlop","mn":"Pseudo/3bf5uID/RubberHose_2-0014","ix":14,"v":{"a":0,"k":0,"ix":14,"x":"var $bm_rt;\nvar hasAF = false, isEnabled = false, output;\ntry {\n    var lyrAF = thisComp.layer($bm_sum(thisLayer._name.split('::')[0], '::AutoFlop'));\n    isEnabled = lyrAF(4)('Enable')(1);\n    var falloffAngle = lyrAF(4)('Falloff')(1);\n    hasAF = true;\n    var a = thisLayer.toComp([\n        0,\n        0,\n        0\n    ]);\n    var b = thisComp.layer(thisLayer(2)('Admin')(2)('B')(2)(1)._name).toComp([\n        0,\n        0,\n        0\n    ]);\n} catch (e) {\n}\nif (hasAF && isEnabled == 1) {\n    var threshRot = lyrAF('ADBE Transform Group')('ADBE Rotate Z');\n    threshRot %= 360;\n    var ctrlAngle = $bm_neg(radiansToDegrees(Math.atan2($bm_sub(b[0], a[0]), $bm_sub(b[1], a[1]))));\n    var offsetAngle = $bm_sub(threshRot, ctrlAngle);\n    offsetAngle %= 360;\n    var sign = offsetAngle > 0 && offsetAngle < 180 || offsetAngle < -180 ? -1 : 1;\n    var absAngle = Math.abs(offsetAngle);\n    if (absAngle > 90) {\n        absAngle = Math.abs($bm_sub(absAngle, 180));\n    }\n    if (absAngle > 90) {\n        absAngle = Math.abs($bm_sub(absAngle, 180));\n    }\n    output = linear(absAngle, 0, falloffAngle, 0, 1);\n    output *= sign;\n} else {\n    output = 1;\n}\n$bm_rt = output;"}},{"ty":0,"nm":"Parent Scale","mn":"Pseudo/3bf5uID/RubberHose_2-0015","ix":15,"v":{"a":0,"k":0,"ix":15,"x":"var $bm_rt;\nvar sFactor = 1;\nvar scaleNorm = 0;\nvar layerChain = 'thisLayer';\nwhile (eval([layerChain][0]).hasParent) {\n    layerChain = $bm_sum(layerChain, '.parent');\n    scaleNorm = $bm_div(eval(layerChain)('ADBE Transform Group')('ADBE Scale')[0], 100);\n    sFactor = $bm_mul(sFactor, scaleNorm);\n}\n$bm_rt = sFactor;"}},{"ty":6,"nm":"","mn":"Pseudo/3bf5uID/RubberHose_2-0016","ix":16,"v":0}]}],"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[100,100],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Circle","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-75,0],[75,0]],"o":[[-75,0],[75,0]],"v":[[-75,0],[75,0]],"c":false},"ix":2},"nm":"01","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0,-30],[0,30]],"o":[[0,-30],[0,30]],"v":[[0,-30],[0,30]],"c":false},"ix":2},"nm":"02","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[30,30],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"ControlShape","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0,1,0.0333,1],"ix":3,"x":"var $bm_rt;\nif (thisLayer.active) {\n    try {\n        var eff = thisLayer(4)('RubberHose 2');\n        var a = thisLayer.toComp([\n            0,\n            0,\n            0\n        ]);\n        var b = eff('B');\n        var straight = eff('Straight');\n        var hoseLength = $bm_div(eff('Hose Length'), 2);\n        if (straight > hoseLength) {\n            $bm_rt = [\n                0.51,\n                0.83,\n                0.98,\n                1\n            ];\n        } else {\n            $bm_rt = value;\n        }\n    } catch (err) {\n        $bm_rt = value;\n    }\n} else {\n    $bm_rt = value;\n}"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Control Point","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 1::Wrist","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[135,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"A","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[20,20],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 1::Shoulder","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"B","np":1,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"2.09","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"cl":"09","_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Version","np":1,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Admin","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":7,"ty":4,"nm":"Hose 1::Shoulder","parent":20,"hd":true,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-6,"ix":10,"x":"var $bm_rt;\nfunction parentTotal() {\n    var parentVal = 0;\n    var layerChain = 'thisLayer';\n    while (eval([layerChain][0]).hasParent) {\n        layerChain = $bm_sum(layerChain, '.parent');\n        parentVal = $bm_sum(parentVal, eval([layerChain][0]).rotation);\n    }\n    return parentVal;\n}\ntry {\n    var eff = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    var autoRotate = eff('Auto Rotate Start');\n    if (autoRotate == 1) {\n        var a = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name).toComp([\n            0,\n            0,\n            0\n        ]);\n        var b = thisComp.layer(thisLayer(2)('Admin')(2)('B')(2)(1)._name).toComp([\n            0,\n            0,\n            0\n        ]);\n        var s = length(a, b);\n        var sFac = eff('Parent Scale');\n        var realism = eff('Realism');\n        var bendDir = $bm_div(eff('Bend Direction'), 100);\n        var hoseLength = $bm_div(eff('Hose Length'), 2);\n        var bendRad = eff('Bend Radius');\n        var autoFlop = eff('AutoFlop');\n        var baseRot = $bm_sub(180, radiansToDegrees(Math.atan2($bm_sub(b[0], a[0]), $bm_sub(b[1], a[1]))));\n        var outerRad = $bm_mul(Math.sin(0.78539816339), s);\n        var straight = $bm_div($bm_mul(1.4142135623731, outerRad), 2);\n        straight /= Math.max(Math.abs(sFac), 0.001);\n        var roundShrink = linear(Math.abs(bendRad), 0, 100, 1, 0.87);\n        var innerRad;\n        if (hoseLength > straight) {\n            innerRad = $bm_sum(straight, $bm_mul(Math.sqrt($bm_sub(Math.pow(hoseLength, 2), Math.pow(straight, 2))), roundShrink));\n            innerRad = linear(realism, 0, 100, hoseLength, innerRad);\n            innerRad = linear(Math.abs(bendDir), straight, innerRad);\n        } else {\n            innerRad = straight;\n        }\n        innerRad = linear(Math.abs(autoFlop), straight, innerRad);\n        var flopDir = 1;\n        if (bendDir < 0) {\n            flopDir = -1;\n        }\n        flopDir *= autoFlop;\n        var opp = $bm_mul($bm_sub(innerRad, straight), flopDir);\n        var theta = Math.atan($bm_div(opp, Math.max(straight, 0.001)));\n        var bendAngle = radiansToDegrees(theta);\n        if (sFac < 0) {\n            baseRot *= -1;\n        }\n        bendRad *= $bm_div($bm_div(theta, $bm_neg(Math.PI)), linear(s, hoseLength, 0, 2, 0.9));\n        var parentRot = hasParent ? parentTotal() : 0;\n        var rotCalc = $bm_sub($bm_sum($bm_sub(baseRot, bendAngle), bendRad), parentRot);\n        $bm_rt = $bm_sum(rotCalc, value);\n    } else {\n        $bm_rt = value;\n    }\n} catch (e) {\n    $bm_rt = value;\n}"},"p":{"a":0,"k":[1077.308,-2319.873,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[100,100],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Circle","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-75,0],[75,0]],"o":[[-75,0],[75,0]],"v":[[-75,0],[75,0]],"c":false},"ix":2},"nm":"01","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0,-30],[0,30]],"o":[[0,-30],[0,30]],"v":[[0,-30],[0,30]],"c":false},"ix":2},"nm":"02","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[30,30],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"ControlShape","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0,1,0.0333,1],"ix":3,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name);\n    $bm_rt = ctrl(2)('Control Point')(2)('Stroke 1')('Color');\n} catch (e) {\n    $bm_rt = value;\n}"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Control Point","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 1::Wrist","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[135,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"A","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[20,20],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 1::Shoulder","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"B","np":1,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"2.09","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"cl":"09","_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Version","np":1,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Admin","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":8,"ty":4,"nm":"Hose 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10,"x":"var $bm_rt;\nfunction parentTotal() {\n    var parentVal = 0;\n    var layerChain = 'thisLayer';\n    while (eval([layerChain][0]).hasParent) {\n        layerChain = $bm_sum(layerChain, '.parent');\n        parentVal = $bm_sum(parentVal, eval([layerChain][0]).rotation);\n    }\n    return parentVal;\n}\nvar r = 0;\nif (thisLayer.hasParent) {\n    r = $bm_neg(parentTotal());\n}\n$bm_rt = r;"},"p":{"a":0,"k":[600,600,0],"ix":2,"l":2,"x":"var $bm_rt;\nvar p = [\n    0,\n    0\n];\ntry {\n    if (thisLayer.hasParent) {\n        p = parent.fromComp([\n            0,\n            0,\n            0\n        ]);\n    }\n    $bm_rt = p;\n} catch (err) {\n    $bm_rt = p;\n}"},"a":{"a":0,"k":[0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2,"x":"var $bm_rt;\n$bm_rt = $bm_div(value, length(toComp([\n    0,\n    0\n]), toComp([\n    0.7071,\n    0.7071\n]))) || 0.001;"}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":4,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":500,"ix":6,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"is":{"a":0,"k":0,"ix":8,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"or":{"a":0,"k":113,"ix":7,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"os":{"a":0,"k":0,"ix":9,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"ix":1,"nm":"LineForCurve","mn":"ADBE Vector Shape - Star","hd":false,"_render":true},{"ty":"tm","s":{"a":0,"k":0,"ix":1,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"e":{"a":0,"k":0,"ix":2,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"o":{"a":0,"k":-90,"ix":3,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"m":1,"ix":2,"nm":"Line Halfer","mn":"ADBE Vector Filter - Trim","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"a":{"a":0,"k":[0,0],"ix":1,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"s":{"a":0,"k":[100,100],"ix":3,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"r":{"a":0,"k":45,"ix":6,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"o":{"a":0,"k":100,"ix":7,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"sk":{"a":0,"k":0,"ix":4,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"sa":{"a":0,"k":0,"ix":5,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"nm":"Transform","_render":true}],"nm":"Arc","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.36,0.44,0.3627,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":18,"ix":5,"x":"var $bm_rt;\nvar sFac = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2')('Parent Scale');\n$bm_rt = Math.abs($bm_mul(value, sFac));"},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('A');\n} catch (err) {\n    $bm_rt = value;\n}"},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"BaseHose","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Style","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 1::Wrist","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[135,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"A","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[200,200],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 1::Shoulder","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"B","np":1,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"2.09","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"cl":"09","_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Version","np":1,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":4,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":200,"ix":6,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('Inner Radius');\n} catch (err) {\n    $bm_rt = value;\n}"},"is":{"a":0,"k":100,"ix":8,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('Bend Radius');\n} catch (err) {\n    $bm_rt = value;\n}"},"or":{"a":0,"k":200,"ix":7,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('Outer Radius');\n} catch (err) {\n    $bm_rt = value;\n}"},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"LineForCurve","mn":"ADBE Vector Shape - Star","hd":false,"_render":true},{"ty":"tm","s":{"a":0,"k":0.01,"ix":1},"e":{"a":0,"k":24.99,"ix":2},"o":{"a":0,"k":-90,"ix":3,"x":"var $bm_rt;\n$bm_rt = -90;"},"m":1,"ix":2,"nm":"Line Halfer","mn":"ADBE Vector Filter - Trim","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1,"x":"var $bm_rt;\nvar s = thisProperty.propertyGroup(2)(2)(1)(7);\n$bm_rt = [\n    -s,\n    0\n];"},"s":{"a":0,"k":[100,100],"ix":3,"x":"var $bm_rt;\nvar flop;\ntry {\n    var eff = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    var bendDir = eff('Bend Direction');\n    var autoFlop = eff('AutoFlop');\n    flop = bendDir > 0 ? 1 : -1;\n    autoFlop > 0 ? 0 : flop *= -1;\n    var s = flop == 1 ? [\n        -100,\n        100\n    ] : [\n        100,\n        100\n    ];\n    if (eff('Parent Scale') < 0) {\n        s = [\n            $bm_neg(s[0]),\n            s[1]\n        ];\n    }\n    $bm_rt = s;\n} catch (err) {\n    $bm_rt = value;\n}\n;"},"r":{"a":0,"k":45,"ix":6,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    var baseRot = ctrl('Base Rotation');\n    var flop = content('Admin').content('ArcMath').transform.scale[0];\n    var rotOffset = flop < 0 ? -45 : 225;\n    $bm_rt = $bm_sum(baseRot, rotOffset);\n} catch (err) {\n    $bm_rt = value;\n}"},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"ArcMath","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('A');\n} catch (err) {\n    $bm_rt = value;\n}"},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Admin","np":4,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":9,"ty":4,"nm":"Isolation Mode","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[569.137,533.277,0],"ix":2,"l":2},"a":{"a":0,"k":[1251.137,-3620.723,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":10,"ty":4,"nm":"Shape Layer 10","parent":20,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":4,"ix":10},"p":{"a":0,"k":[1261.363,-2390.59,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":11,"ty":4,"nm":"Layer 23","parent":10,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[116.734,7.59,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[53.413,53.413],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.7843,0.902,0.7882,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":12,"ty":4,"nm":"Layer 20","parent":10,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-118.936,46.611,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[53.413,53.413],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.7843,0.902,0.7882,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":13,"ty":4,"nm":"Layer 22","parent":14,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-1.265,"ix":10},"p":{"a":0,"k":[36.474,47.678,0],"ix":2,"l":2},"a":{"a":0,"k":[1379.406,891.857,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1394.879,913.747],[1388.866,913.368],[1358.93,882.686],[1360.095,871.4440000000001],[1374.12,871.807],[1379.089,887.512],[1401.8590000000002,905.187]],"o":[[1390.37,913.747],[1363.6470000000002,898.801],[1357.272,876.213],[1369.401,869.0550000000001],[1375.602,877.097],[1400.427,899.836],[1397.8210000000001,912.178]],"v":[[1391.857,913.747],[1387.487,912.572],[1358.471,880.894],[1364.775,870.244],[1375.385,876.399],[1396.242,897.419],[1399.44,909.372]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.36,0.44,0.3627,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":14,"ty":4,"nm":"Shape Layer 9","parent":10,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[7.098,55.994,0],"ix":2,"l":2},"a":{"a":0,"k":[-12.75,60.692,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-46.5,76.5],[-19.848,42.698]],"o":[[-46.5,76.5],[67.404,51.21]],"v":[[-46.5,76.5],[34.5,48]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.36,0.44,0.3627,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":16,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.117],"y":[1]},"o":{"x":[0.447],"y":[0]},"t":0,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":70,"s":[0]},{"i":{"x":[0.139],"y":[1]},"o":{"x":[0.615],"y":[0]},"t":153,"s":[0]},{"t":210,"s":[10]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.117],"y":[1]},"o":{"x":[0.447],"y":[0]},"t":0,"s":[90]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":70,"s":[100]},{"i":{"x":[0.139],"y":[1]},"o":{"x":[0.615],"y":[0]},"t":153,"s":[100]},{"t":210,"s":[90]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":15,"ty":4,"nm":"Layer 9","parent":10,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-2,"ix":10},"p":{"a":0,"k":[20.116,-13.81,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.117,0.117,0.667],"y":[1,1,1]},"o":{"x":[0.447,0.447,0.333],"y":[0,0,0]},"t":0,"s":[100,75,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":70,"s":[100,112.5,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":90.189,"s":[100,111.532,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":111.5,"s":[100,112.5,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":130.568,"s":[100,111.532,100]},{"i":{"x":[0.139,0.139,0.667],"y":[1,1,1]},"o":{"x":[0.615,0.615,0.333],"y":[0,0,0]},"t":153,"s":[100,112.5,100]},{"t":210,"s":[100,75,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[25.629,36.216],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.36,0.44,0.3627,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":16,"ty":4,"nm":"Layer 10","parent":10,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-2,"ix":10},"p":{"a":0,"k":[-79.086,-10.869,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.117,0.117,0.667],"y":[1,1,1]},"o":{"x":[0.447,0.447,0.333],"y":[0,0,0]},"t":0,"s":[100,75,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":70,"s":[100,112.5,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":90.189,"s":[100,111.532,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":111.5,"s":[100,112.5,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":130.568,"s":[100,111.532,100]},{"i":{"x":[0.139,0.139,0.667],"y":[1,1,1]},"o":{"x":[0.615,0.615,0.333],"y":[0,0,0]},"t":153,"s":[100,112.5,100]},{"t":210,"s":[100,75,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[25.242,36.216],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.36,0.44,0.3627,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":17,"ty":4,"nm":"Layer 8","parent":10,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-2,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.117,"y":1},"o":{"x":0.447,"y":0},"t":0,"s":[-83.613,-87.036,0],"to":[-0.233,-3.325,0],"ti":[0.232,1.742,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":70,"s":[-85.008,-106.987,0],"to":[-0.232,-1.742,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":90.189,"s":[-85.007,-97.487,0],"to":null,"ti":null},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":111.5,"s":[-85.008,-106.987,0],"to":null,"ti":null},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":131.689,"s":[-85.007,-97.487,0],"to":[0,0,0],"ti":[-0.232,-1.742,0]},{"i":{"x":0.139,"y":1},"o":{"x":0.615,"y":0},"t":153,"s":[-85.008,-106.987,0],"to":[0.232,1.742,0],"ti":[-0.233,-3.325,0]},{"t":210,"s":[-83.613,-87.036,0]}],"ix":2,"l":2},"a":{"a":0,"k":[1188.282,-3771.241,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1175.663,-3750.828],[1169.68,-3751.19],[1162.6180000000002,-3759.6580000000004],[1203.001,-3791.654],[1212.703,-3787.737],[1208.858,-3774.2270000000003],[1190.338,-3773.242]],"o":[[1171.153,-3750.828],[1164.112,-3754.322],[1180.438,-3791.337],[1208.785,-3791.654],[1212.703,-3778.116],[1203.282,-3774.1180000000004],[1178.634,-3752.435]],"v":[[1172.606,-3750.828],[1168.323,-3751.954],[1164.986,-3763.869],[1203.953,-3791.654],[1212.703,-3782.904],[1204.09,-3774.155],[1180.24,-3755.29]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.36,0.44,0.3627,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":18,"ty":4,"nm":"Layer 7","parent":10,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-2,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.117,"y":1},"o":{"x":0.447,"y":0},"t":0,"s":[27.957,-109.353,0],"to":[-0.233,-3.325,0],"ti":[0.232,1.742,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":70,"s":[26.562,-129.304,0],"to":[-0.232,-1.742,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":90.189,"s":[26.563,-119.804,0],"to":null,"ti":null},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":111.5,"s":[26.562,-129.304,0],"to":null,"ti":null},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":131.689,"s":[26.563,-119.804,0],"to":[0,0,0],"ti":[-0.232,-1.742,0]},{"i":{"x":0.139,"y":1},"o":{"x":0.615,"y":0},"t":153,"s":[26.562,-129.304,0],"to":[0.232,1.742,0],"ti":[-0.233,-3.325,0]},{"t":210,"s":[27.957,-109.353,0]}],"ix":2,"l":2},"a":{"a":0,"k":[1307.42,-3785.409,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1326.498,-3766.864],[1319.102,-3768.37],[1293.7830000000001,-3786.526],[1282.937,-3787.357],[1282.777,-3801.513],[1314.01,-3810.67],[1333.609,-3770.621]],"o":[[1321.9930000000002,-3766.864],[1306.478,-3789.279],[1287.738,-3784.732],[1280.101,-3796.596],[1288.473,-3803.261],[1334.938,-3775.9990000000003],[1328.057,-3767.271]],"v":[[1324.957,-3766.864],[1317.459,-3771.092],[1292.374,-3786.154],[1281.519,-3791.976],[1287.396,-3802.93],[1332.44,-3780.137],[1329.471,-3768.125]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.36,0.44,0.3627,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":19,"ty":4,"nm":"Layer 5","parent":20,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1380.224,-2591.864,0],"ix":2,"l":2},"a":{"a":0,"k":[1455.531,2202.926,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1393.731,2133.054],[1391.209,2162.692],[1390.5790000000002,2232.745],[1406.031,2268.989],[1441.538,2264.719],[1519.917,2272.798]],"o":[[1393.731,2133.054],[1391.209,2205.394],[1395.959,2259.104],[1430.928,2266.4249999999997],[1489.977,2264.719],[1519.917,2272.798]],"v":[[1393.731,2133.054],[1391.209,2192.33],[1393.276,2245.959],[1418.565,2267.698],[1464.412,2264.719],[1519.917,2272.798]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.698,0.9216,0.949,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":20,"ty":4,"nm":"Body","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.117],"y":[1]},"o":{"x":[0.447],"y":[0]},"t":0,"s":[-4]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":70,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":90,"s":[-2]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":111.125,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":131.689,"s":[-2]},{"i":{"x":[0.139],"y":[1]},"o":{"x":[0.615],"y":[0]},"t":153,"s":[0]},{"t":210,"s":[-4]}],"ix":10},"p":{"a":0,"k":[584.997,837.992,0],"ix":2,"l":2},"a":{"a":0,"k":[1232.997,-2157.008,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1416.275,-2157.052],[1103.841,-2157.052],[1065.933,-2169.18],[1075.823,-2325.176],[1066.856,-2548.9100000000003],[1083.359,-2651.1169999999997],[1162.4080000000001,-2661.626],[1303.653,-2668.044],[1314.768,-2665.57],[1442.357,-2524.298],[1447.664,-2512.067],[1455.232,-2439.531],[1449.697,-2244.8849999999998]],"o":[[1398.509,-2157.052],[1086.0749999999998,-2157.052],[1069.9579999999999,-2253.683],[1075.823,-2498.964],[1059.538,-2643.241],[1133.757,-2656.6169999999997],[1269.3580000000002,-2668.6110000000003],[1309.333,-2668.044],[1318.704,-2661.194],[1446.0919999999999,-2520.145],[1452.1979999999999,-2473.6090000000004],[1456.427,-2247.817],[1427.5739999999998,-2173.288]],"v":[[1398.509,-2157.052],[1103.841,-2157.052],[1066.992,-2191.421],[1075.823,-2406.165],[1061.832,-2613.675],[1101.02,-2653.044],[1209.256,-2664.686],[1303.653,-2668.044],[1318.704,-2661.194],[1442.357,-2524.298],[1448.338,-2506.349],[1455.562,-2386.574],[1433.177,-2191.421]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.5621,0.8234,0.8579,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[1.59,0.743],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":21,"ty":4,"nm":"Shape Layer 8","parent":20,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-4.704,"ix":10},"p":{"a":0,"k":[1186.414,-2341.468,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[5.5,18],[28.5,5.5]],"o":[[5.5,18],[77.594,40.089]],"v":[[5.5,18],[50.5,21]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.2217,0.9183,0.2449,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":18,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tm","s":{"a":0,"k":45.668,"ix":1},"e":{"a":0,"k":54.332,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":22,"ty":4,"nm":"Shape Layer 6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-0.43,"ix":10},"p":{"a":0,"k":[560.966,956.075,0],"ix":2,"l":2},"a":{"a":0,"k":[11.508,4.957,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[12.992,7.5],[-33.517,7.25]],"o":[[12.992,7.5],[-33.517,7.25]],"v":[[12.992,7.5],[-33.517,7.25]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.36,0.44,0.3627,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":17,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":5,"k":{"a":0,"k":[0,0.379,0.548,0.885,0.123,0.351,0.495,0.784,0.247,0.323,0.443,0.683,0.623,0.206,0.272,0.402,1,0.09,0.102,0.122,0,1,0.5,0.5,1,0],"ix":9}},"s":{"a":0,"k":[0,0],"ix":5},"e":{"a":0,"k":[100,0],"ix":6},"t":2,"h":{"a":0,"k":0,"ix":7},"a":{"a":0,"k":0,"ix":8},"nm":"Gradient Fill 1","mn":"ADBE Vector Graphic - G-Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":23,"ty":4,"nm":"Hose 3::Wrist","hd":true,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10,"x":"var $bm_rt;\nfunction parentTotal() {\n    var parentVal = 0;\n    var layerChain = 'thisLayer';\n    while (eval([layerChain][0]).hasParent) {\n        layerChain = $bm_sum(layerChain, '.parent');\n        parentVal = $bm_sum(parentVal, eval([layerChain][0]).rotation);\n    }\n    return parentVal;\n}\ntry {\n    var eff = thisLayer(4)('RubberHose 2');\n    var autoRotate = eff('Auto Rotate End');\n    if (autoRotate == 1) {\n        var a = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name).toComp([\n            0,\n            0,\n            0\n        ]);\n        var b = thisComp.layer(thisLayer(2)('Admin')(2)('B')(2)(1)._name).toComp([\n            0,\n            0,\n            0\n        ]);\n        var s = length(a, b);\n        var sFac = eff('Parent Scale');\n        var realism = eff('Realism');\n        var bendDir = $bm_div(eff('Bend Direction'), 100);\n        var hoseLength = $bm_div(eff('Hose Length'), 2);\n        var bendRad = eff('Bend Radius');\n        var autoFlop = eff('AutoFlop');\n        var baseRot = $bm_sub(180, radiansToDegrees(Math.atan2($bm_sub(b[0], a[0]), $bm_sub(b[1], a[1]))));\n        var outerRad = $bm_mul(Math.sin(0.78539816339), s);\n        var straight = $bm_div($bm_mul(1.4142135623731, outerRad), 2);\n        straight /= Math.max(Math.abs(sFac), 0.001);\n        var roundShrink = linear(Math.abs(bendRad), 0, 100, 1, 0.87);\n        var innerRad;\n        if (hoseLength > straight) {\n            innerRad = $bm_sum(straight, $bm_mul(Math.sqrt($bm_sub(Math.pow(hoseLength, 2), Math.pow(straight, 2))), roundShrink));\n            innerRad = linear(realism, 0, 100, hoseLength, innerRad);\n            innerRad = linear(Math.abs(bendDir), straight, innerRad);\n        } else {\n            innerRad = straight;\n        }\n        innerRad = linear(Math.abs(autoFlop), straight, innerRad);\n        var flopDir = 1;\n        if (bendDir < 0) {\n            flopDir = -1;\n        }\n        flopDir *= autoFlop;\n        var opp = $bm_mul($bm_sub(innerRad, straight), flopDir);\n        var theta = Math.atan($bm_div(opp, Math.max(straight, 0.001)));\n        var bendAngle = radiansToDegrees(theta);\n        if (sFac < 0) {\n            baseRot *= -1;\n        }\n        bendRad *= $bm_div($bm_div(theta, $bm_neg(Math.PI)), linear(s, hoseLength, 0, 2, 0.9));\n        var parentRot = hasParent ? parentTotal() : 0;\n        var rotCalc = $bm_sub($bm_sub($bm_sum(baseRot, bendAngle), bendRad), parentRot);\n        $bm_rt = $bm_sum(rotCalc, value);\n    } else {\n        $bm_rt = value;\n    }\n} catch (e) {\n    $bm_rt = value;\n}"},"p":{"a":0,"k":[561,955,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100],"ix":6,"l":2}},"ao":0,"ef":[{"ty":5,"nm":"RubberHose 2","np":18,"mn":"Pseudo/3bf5uID/RubberHose_2","ix":1,"en":1,"ef":[{"ty":0,"nm":"Hose Length","mn":"Pseudo/3bf5uID/RubberHose_2-0001","ix":1,"v":{"a":0,"k":240,"ix":1}},{"ty":0,"nm":"Bend Radius","mn":"Pseudo/3bf5uID/RubberHose_2-0002","ix":2,"v":{"a":0,"k":90,"ix":2}},{"ty":0,"nm":"Realism","mn":"Pseudo/3bf5uID/RubberHose_2-0003","ix":3,"v":{"a":0,"k":0,"ix":3}},{"ty":0,"nm":"Bend Direction","mn":"Pseudo/3bf5uID/RubberHose_2-0004","ix":4,"v":{"a":0,"k":-45,"ix":4}},{"ty":7,"nm":"Auto Rotate Start","mn":"Pseudo/3bf5uID/RubberHose_2-0005","ix":5,"v":{"a":0,"k":1,"ix":5}},{"ty":7,"nm":"Auto Rotate End","mn":"Pseudo/3bf5uID/RubberHose_2-0006","ix":6,"v":{"a":0,"k":1,"ix":6}},{"ty":6,"nm":"Math Stuff","mn":"Pseudo/3bf5uID/RubberHose_2-0007","ix":7,"v":0},{"ty":3,"nm":"A","mn":"Pseudo/3bf5uID/RubberHose_2-0008","ix":8,"v":{"a":0,"k":[0,0],"ix":8,"x":"var $bm_rt;\n$bm_rt = thisLayer.toComp([\n    0,\n    0,\n    0\n]);"}},{"ty":3,"nm":"B","mn":"Pseudo/3bf5uID/RubberHose_2-0009","ix":9,"v":{"a":0,"k":[0,0],"ix":9,"x":"var $bm_rt;\ntry {\n    var b = thisLayer(2)('Admin')(2)('B')(2)(1)._name;\n    $bm_rt = thisComp.layer(b).toComp([\n        0,\n        0,\n        0\n    ]);\n} catch (err) {\n    $bm_rt = value;\n}"}},{"ty":0,"nm":"Outer Radius","mn":"Pseudo/3bf5uID/RubberHose_2-0010","ix":10,"v":{"a":0,"k":0,"ix":10,"x":"var $bm_rt;\nvar a = thisLayer(4)('RubberHose 2')('A');\nvar b = thisLayer(4)('RubberHose 2')('B');\nvar s = length(a, b);\n$bm_rt = $bm_mul(Math.sin(0.78539816339), s);"}},{"ty":0,"nm":"Inner Radius","mn":"Pseudo/3bf5uID/RubberHose_2-0011","ix":11,"v":{"a":0,"k":0,"ix":11,"x":"var $bm_rt;\nvar eff = thisLayer(4)('RubberHose 2');\nvar bendRad = eff('Bend Radius');\nvar hoseLength = $bm_div(eff('Hose Length'), 2);\nvar realism = eff('Realism');\nvar bendDir = $bm_div(eff('Bend Direction'), 100);\nvar sFac = eff('Parent Scale');\nvar straight = eff('Straight');\nvar autoFlop = eff('AutoFlop');\nvar roundShrink = linear(Math.abs(bendRad), 0, 100, 1, 0.87);\nvar innerRad;\nif (hoseLength > straight) {\n    innerRad = $bm_sum(straight, $bm_mul(Math.sqrt($bm_sub(Math.pow(hoseLength, 2), Math.pow(straight, 2))), roundShrink));\n    innerRad = linear(realism, 0, 100, hoseLength, innerRad);\n    innerRad = linear(Math.abs(bendDir), straight, innerRad);\n} else {\n    innerRad = straight;\n}\ninnerRad *= Math.abs(sFac);\ninnerRad = linear(Math.abs(autoFlop), $bm_mul(straight, Math.max(Math.abs(sFac), 0.001)), innerRad);\n$bm_rt = innerRad;"}},{"ty":0,"nm":"Straight","mn":"Pseudo/3bf5uID/RubberHose_2-0012","ix":12,"v":{"a":0,"k":0,"ix":12,"x":"var $bm_rt;\nvar sFac = thisLayer(4)('RubberHose 2')('Parent Scale');\nvar outerRad = $bm_div(thisLayer(4)('RubberHose 2')('Outer Radius'), Math.max(Math.abs(sFac), 0.001));\n;\n$bm_rt = $bm_div($bm_mul(1.4142135623731, outerRad), 2);"}},{"ty":0,"nm":"Base Rotation","mn":"Pseudo/3bf5uID/RubberHose_2-0013","ix":13,"v":{"a":0,"k":0,"ix":13,"x":"var $bm_rt;\nvar a = thisLayer(4)('RubberHose 2')('A');\nvar b = thisLayer(4)('RubberHose 2')('B');\n$bm_rt = radiansToDegrees(Math.atan2($bm_sub(a[1], b[1]), $bm_sub(a[0], b[0])));"}},{"ty":0,"nm":"AutoFlop","mn":"Pseudo/3bf5uID/RubberHose_2-0014","ix":14,"v":{"a":0,"k":0,"ix":14,"x":"var $bm_rt;\nvar hasAF = false, isEnabled = false, output;\ntry {\n    var lyrAF = thisComp.layer($bm_sum(thisLayer._name.split('::')[0], '::AutoFlop'));\n    isEnabled = lyrAF(4)('Enable')(1);\n    var falloffAngle = lyrAF(4)('Falloff')(1);\n    hasAF = true;\n    var a = thisLayer.toComp([\n        0,\n        0,\n        0\n    ]);\n    var b = thisComp.layer(thisLayer(2)('Admin')(2)('B')(2)(1)._name).toComp([\n        0,\n        0,\n        0\n    ]);\n} catch (e) {\n}\nif (hasAF && isEnabled == 1) {\n    var threshRot = lyrAF('ADBE Transform Group')('ADBE Rotate Z');\n    threshRot %= 360;\n    var ctrlAngle = $bm_neg(radiansToDegrees(Math.atan2($bm_sub(b[0], a[0]), $bm_sub(b[1], a[1]))));\n    var offsetAngle = $bm_sub(threshRot, ctrlAngle);\n    offsetAngle %= 360;\n    var sign = offsetAngle > 0 && offsetAngle < 180 || offsetAngle < -180 ? -1 : 1;\n    var absAngle = Math.abs(offsetAngle);\n    if (absAngle > 90) {\n        absAngle = Math.abs($bm_sub(absAngle, 180));\n    }\n    if (absAngle > 90) {\n        absAngle = Math.abs($bm_sub(absAngle, 180));\n    }\n    output = linear(absAngle, 0, falloffAngle, 0, 1);\n    output *= sign;\n} else {\n    output = 1;\n}\n$bm_rt = output;"}},{"ty":0,"nm":"Parent Scale","mn":"Pseudo/3bf5uID/RubberHose_2-0015","ix":15,"v":{"a":0,"k":0,"ix":15,"x":"var $bm_rt;\nvar sFactor = 1;\nvar scaleNorm = 0;\nvar layerChain = 'thisLayer';\nwhile (eval([layerChain][0]).hasParent) {\n    layerChain = $bm_sum(layerChain, '.parent');\n    scaleNorm = $bm_div(eval(layerChain)('ADBE Transform Group')('ADBE Scale')[0], 100);\n    sFactor = $bm_mul(sFactor, scaleNorm);\n}\n$bm_rt = sFactor;"}},{"ty":6,"nm":"","mn":"Pseudo/3bf5uID/RubberHose_2-0016","ix":16,"v":0}]}],"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[100,100],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Circle","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-75,0],[75,0]],"o":[[-75,0],[75,0]],"v":[[-75,0],[75,0]],"c":false},"ix":2},"nm":"01","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0,-30],[0,30]],"o":[[0,-30],[0,30]],"v":[[0,-30],[0,30]],"c":false},"ix":2},"nm":"02","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[30,30],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"ControlShape","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0,1,0.0333,1],"ix":3,"x":"var $bm_rt;\nif (thisLayer.active) {\n    try {\n        var eff = thisLayer(4)('RubberHose 2');\n        var a = thisLayer.toComp([\n            0,\n            0,\n            0\n        ]);\n        var b = eff('B');\n        var straight = eff('Straight');\n        var hoseLength = $bm_div(eff('Hose Length'), 2);\n        if (straight > hoseLength) {\n            $bm_rt = [\n                0.51,\n                0.83,\n                0.98,\n                1\n            ];\n        } else {\n            $bm_rt = value;\n        }\n    } catch (err) {\n        $bm_rt = value;\n    }\n} else {\n    $bm_rt = value;\n}"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Control Point","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 3::Wrist","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[135,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"A","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[20,20],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 3::Shoulder","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"B","np":1,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"2.09","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"cl":"09","_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Version","np":1,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Admin","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":24,"ty":4,"nm":"Hose 3::Shoulder","parent":20,"hd":true,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10,"x":"var $bm_rt;\nfunction parentTotal() {\n    var parentVal = 0;\n    var layerChain = 'thisLayer';\n    while (eval([layerChain][0]).hasParent) {\n        layerChain = $bm_sum(layerChain, '.parent');\n        parentVal = $bm_sum(parentVal, eval([layerChain][0]).rotation);\n    }\n    return parentVal;\n}\ntry {\n    var eff = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    var autoRotate = eff('Auto Rotate Start');\n    if (autoRotate == 1) {\n        var a = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name).toComp([\n            0,\n            0,\n            0\n        ]);\n        var b = thisComp.layer(thisLayer(2)('Admin')(2)('B')(2)(1)._name).toComp([\n            0,\n            0,\n            0\n        ]);\n        var s = length(a, b);\n        var sFac = eff('Parent Scale');\n        var realism = eff('Realism');\n        var bendDir = $bm_div(eff('Bend Direction'), 100);\n        var hoseLength = $bm_div(eff('Hose Length'), 2);\n        var bendRad = eff('Bend Radius');\n        var autoFlop = eff('AutoFlop');\n        var baseRot = $bm_sub(180, radiansToDegrees(Math.atan2($bm_sub(b[0], a[0]), $bm_sub(b[1], a[1]))));\n        var outerRad = $bm_mul(Math.sin(0.78539816339), s);\n        var straight = $bm_div($bm_mul(1.4142135623731, outerRad), 2);\n        straight /= Math.max(Math.abs(sFac), 0.001);\n        var roundShrink = linear(Math.abs(bendRad), 0, 100, 1, 0.87);\n        var innerRad;\n        if (hoseLength > straight) {\n            innerRad = $bm_sum(straight, $bm_mul(Math.sqrt($bm_sub(Math.pow(hoseLength, 2), Math.pow(straight, 2))), roundShrink));\n            innerRad = linear(realism, 0, 100, hoseLength, innerRad);\n            innerRad = linear(Math.abs(bendDir), straight, innerRad);\n        } else {\n            innerRad = straight;\n        }\n        innerRad = linear(Math.abs(autoFlop), straight, innerRad);\n        var flopDir = 1;\n        if (bendDir < 0) {\n            flopDir = -1;\n        }\n        flopDir *= autoFlop;\n        var opp = $bm_mul($bm_sub(innerRad, straight), flopDir);\n        var theta = Math.atan($bm_div(opp, Math.max(straight, 0.001)));\n        var bendAngle = radiansToDegrees(theta);\n        if (sFac < 0) {\n            baseRot *= -1;\n        }\n        bendRad *= $bm_div($bm_div(theta, $bm_neg(Math.PI)), linear(s, hoseLength, 0, 2, 0.9));\n        var parentRot = hasParent ? parentTotal() : 0;\n        var rotCalc = $bm_sub($bm_sum($bm_sub(baseRot, bendAngle), bendRad), parentRot);\n        $bm_rt = $bm_sum(rotCalc, value);\n    } else {\n        $bm_rt = value;\n    }\n} catch (e) {\n    $bm_rt = value;\n}"},"p":{"a":0,"k":[1214.754,-2185.322,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[100,100],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Circle","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-75,0],[75,0]],"o":[[-75,0],[75,0]],"v":[[-75,0],[75,0]],"c":false},"ix":2},"nm":"01","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0,-30],[0,30]],"o":[[0,-30],[0,30]],"v":[[0,-30],[0,30]],"c":false},"ix":2},"nm":"02","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[30,30],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"ControlShape","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0,1,0.0333,1],"ix":3,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name);\n    $bm_rt = ctrl(2)('Control Point')(2)('Stroke 1')('Color');\n} catch (e) {\n    $bm_rt = value;\n}"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Control Point","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 3::Wrist","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[135,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"A","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[20,20],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 3::Shoulder","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"B","np":1,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"2.09","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"cl":"09","_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Version","np":1,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Admin","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":25,"ty":4,"nm":"Hose 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10,"x":"var $bm_rt;\nfunction parentTotal() {\n    var parentVal = 0;\n    var layerChain = 'thisLayer';\n    while (eval([layerChain][0]).hasParent) {\n        layerChain = $bm_sum(layerChain, '.parent');\n        parentVal = $bm_sum(parentVal, eval([layerChain][0]).rotation);\n    }\n    return parentVal;\n}\nvar r = 0;\nif (thisLayer.hasParent) {\n    r = $bm_neg(parentTotal());\n}\n$bm_rt = r;"},"p":{"a":0,"k":[600,600,0],"ix":2,"l":2,"x":"var $bm_rt;\nvar p = [\n    0,\n    0\n];\ntry {\n    if (thisLayer.hasParent) {\n        p = parent.fromComp([\n            0,\n            0,\n            0\n        ]);\n    }\n    $bm_rt = p;\n} catch (err) {\n    $bm_rt = p;\n}"},"a":{"a":0,"k":[0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2,"x":"var $bm_rt;\n$bm_rt = $bm_div(value, length(toComp([\n    0,\n    0\n]), toComp([\n    0.7071,\n    0.7071\n]))) || 0.001;"}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":4,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":500,"ix":6,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"is":{"a":0,"k":0,"ix":8,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"or":{"a":0,"k":113,"ix":7,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"os":{"a":0,"k":0,"ix":9,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"ix":1,"nm":"LineForCurve","mn":"ADBE Vector Shape - Star","hd":false,"_render":true},{"ty":"tm","s":{"a":0,"k":0,"ix":1,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"e":{"a":0,"k":0,"ix":2,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"o":{"a":0,"k":-90,"ix":3,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"m":1,"ix":2,"nm":"Line Halfer","mn":"ADBE Vector Filter - Trim","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"a":{"a":0,"k":[0,0],"ix":1,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"s":{"a":0,"k":[100,100],"ix":3,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"r":{"a":0,"k":45,"ix":6,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"o":{"a":0,"k":100,"ix":7,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"sk":{"a":0,"k":0,"ix":4,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"sa":{"a":0,"k":0,"ix":5,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"nm":"Transform","_render":true}],"nm":"Arc","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.36,0.44,0.3627,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":19,"ix":5,"x":"var $bm_rt;\nvar sFac = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2')('Parent Scale');\n$bm_rt = Math.abs($bm_mul(value, sFac));"},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('A');\n} catch (err) {\n    $bm_rt = value;\n}"},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"BaseHose","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Style","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 3::Wrist","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[135,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"A","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[200,200],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 3::Shoulder","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"B","np":1,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"2.09","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"cl":"09","_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Version","np":1,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":4,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":200,"ix":6,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('Inner Radius');\n} catch (err) {\n    $bm_rt = value;\n}"},"is":{"a":0,"k":100,"ix":8,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('Bend Radius');\n} catch (err) {\n    $bm_rt = value;\n}"},"or":{"a":0,"k":200,"ix":7,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('Outer Radius');\n} catch (err) {\n    $bm_rt = value;\n}"},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"LineForCurve","mn":"ADBE Vector Shape - Star","hd":false,"_render":true},{"ty":"tm","s":{"a":0,"k":0.01,"ix":1},"e":{"a":0,"k":24.99,"ix":2},"o":{"a":0,"k":-90,"ix":3,"x":"var $bm_rt;\n$bm_rt = -90;"},"m":1,"ix":2,"nm":"Line Halfer","mn":"ADBE Vector Filter - Trim","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1,"x":"var $bm_rt;\nvar s = thisProperty.propertyGroup(2)(2)(1)(7);\n$bm_rt = [\n    -s,\n    0\n];"},"s":{"a":0,"k":[100,100],"ix":3,"x":"var $bm_rt;\nvar flop;\ntry {\n    var eff = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    var bendDir = eff('Bend Direction');\n    var autoFlop = eff('AutoFlop');\n    flop = bendDir > 0 ? 1 : -1;\n    autoFlop > 0 ? 0 : flop *= -1;\n    var s = flop == 1 ? [\n        -100,\n        100\n    ] : [\n        100,\n        100\n    ];\n    if (eff('Parent Scale') < 0) {\n        s = [\n            $bm_neg(s[0]),\n            s[1]\n        ];\n    }\n    $bm_rt = s;\n} catch (err) {\n    $bm_rt = value;\n}\n;"},"r":{"a":0,"k":45,"ix":6,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    var baseRot = ctrl('Base Rotation');\n    var flop = content('Admin').content('ArcMath').transform.scale[0];\n    var rotOffset = flop < 0 ? -45 : 225;\n    $bm_rt = $bm_sum(baseRot, rotOffset);\n} catch (err) {\n    $bm_rt = value;\n}"},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"ArcMath","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('A');\n} catch (err) {\n    $bm_rt = value;\n}"},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Admin","np":4,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":26,"ty":4,"nm":"Shape Layer 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-1.911,"ix":10},"p":{"a":0,"k":[632.683,959.754,0],"ix":2,"l":2},"a":{"a":0,"k":[124.655,5.764,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[169,6.5],[122.5,5]],"o":[[169,6.5],[122.5,5]],"v":[[169,6.5],[122.5,5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.36,0.44,0.3627,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":17,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":5,"k":{"a":0,"k":[0,0.379,0.548,0.885,0.123,0.351,0.495,0.784,0.247,0.323,0.443,0.683,0.623,0.206,0.272,0.402,1,0.09,0.102,0.122,0,1,0.5,0.5,1,0],"ix":9}},"s":{"a":0,"k":[0,0],"ix":5},"e":{"a":0,"k":[100,0],"ix":6},"t":2,"h":{"a":0,"k":0,"ix":7},"a":{"a":0,"k":0,"ix":8},"nm":"Gradient Fill 1","mn":"ADBE Vector Graphic - G-Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":27,"ty":4,"nm":"Hose 4::Wrist","hd":true,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10,"x":"var $bm_rt;\nfunction parentTotal() {\n    var parentVal = 0;\n    var layerChain = 'thisLayer';\n    while (eval([layerChain][0]).hasParent) {\n        layerChain = $bm_sum(layerChain, '.parent');\n        parentVal = $bm_sum(parentVal, eval([layerChain][0]).rotation);\n    }\n    return parentVal;\n}\ntry {\n    var eff = thisLayer(4)('RubberHose 2');\n    var autoRotate = eff('Auto Rotate End');\n    if (autoRotate == 1) {\n        var a = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name).toComp([\n            0,\n            0,\n            0\n        ]);\n        var b = thisComp.layer(thisLayer(2)('Admin')(2)('B')(2)(1)._name).toComp([\n            0,\n            0,\n            0\n        ]);\n        var s = length(a, b);\n        var sFac = eff('Parent Scale');\n        var realism = eff('Realism');\n        var bendDir = $bm_div(eff('Bend Direction'), 100);\n        var hoseLength = $bm_div(eff('Hose Length'), 2);\n        var bendRad = eff('Bend Radius');\n        var autoFlop = eff('AutoFlop');\n        var baseRot = $bm_sub(180, radiansToDegrees(Math.atan2($bm_sub(b[0], a[0]), $bm_sub(b[1], a[1]))));\n        var outerRad = $bm_mul(Math.sin(0.78539816339), s);\n        var straight = $bm_div($bm_mul(1.4142135623731, outerRad), 2);\n        straight /= Math.max(Math.abs(sFac), 0.001);\n        var roundShrink = linear(Math.abs(bendRad), 0, 100, 1, 0.87);\n        var innerRad;\n        if (hoseLength > straight) {\n            innerRad = $bm_sum(straight, $bm_mul(Math.sqrt($bm_sub(Math.pow(hoseLength, 2), Math.pow(straight, 2))), roundShrink));\n            innerRad = linear(realism, 0, 100, hoseLength, innerRad);\n            innerRad = linear(Math.abs(bendDir), straight, innerRad);\n        } else {\n            innerRad = straight;\n        }\n        innerRad = linear(Math.abs(autoFlop), straight, innerRad);\n        var flopDir = 1;\n        if (bendDir < 0) {\n            flopDir = -1;\n        }\n        flopDir *= autoFlop;\n        var opp = $bm_mul($bm_sub(innerRad, straight), flopDir);\n        var theta = Math.atan($bm_div(opp, Math.max(straight, 0.001)));\n        var bendAngle = radiansToDegrees(theta);\n        if (sFac < 0) {\n            baseRot *= -1;\n        }\n        bendRad *= $bm_div($bm_div(theta, $bm_neg(Math.PI)), linear(s, hoseLength, 0, 2, 0.9));\n        var parentRot = hasParent ? parentTotal() : 0;\n        var rotCalc = $bm_sub($bm_sub($bm_sum(baseRot, bendAngle), bendRad), parentRot);\n        $bm_rt = $bm_sum(rotCalc, value);\n    } else {\n        $bm_rt = value;\n    }\n} catch (e) {\n    $bm_rt = value;\n}"},"p":{"a":0,"k":[632,958,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100],"ix":6,"l":2}},"ao":0,"ef":[{"ty":5,"nm":"RubberHose 2","np":18,"mn":"Pseudo/3bf5uID/RubberHose_2","ix":1,"en":1,"ef":[{"ty":0,"nm":"Hose Length","mn":"Pseudo/3bf5uID/RubberHose_2-0001","ix":1,"v":{"a":0,"k":240,"ix":1}},{"ty":0,"nm":"Bend Radius","mn":"Pseudo/3bf5uID/RubberHose_2-0002","ix":2,"v":{"a":0,"k":0,"ix":2}},{"ty":0,"nm":"Realism","mn":"Pseudo/3bf5uID/RubberHose_2-0003","ix":3,"v":{"a":0,"k":0,"ix":3}},{"ty":0,"nm":"Bend Direction","mn":"Pseudo/3bf5uID/RubberHose_2-0004","ix":4,"v":{"a":0,"k":0,"ix":4}},{"ty":7,"nm":"Auto Rotate Start","mn":"Pseudo/3bf5uID/RubberHose_2-0005","ix":5,"v":{"a":0,"k":1,"ix":5}},{"ty":7,"nm":"Auto Rotate End","mn":"Pseudo/3bf5uID/RubberHose_2-0006","ix":6,"v":{"a":0,"k":1,"ix":6}},{"ty":6,"nm":"Math Stuff","mn":"Pseudo/3bf5uID/RubberHose_2-0007","ix":7,"v":0},{"ty":3,"nm":"A","mn":"Pseudo/3bf5uID/RubberHose_2-0008","ix":8,"v":{"a":0,"k":[0,0],"ix":8,"x":"var $bm_rt;\n$bm_rt = thisLayer.toComp([\n    0,\n    0,\n    0\n]);"}},{"ty":3,"nm":"B","mn":"Pseudo/3bf5uID/RubberHose_2-0009","ix":9,"v":{"a":0,"k":[0,0],"ix":9,"x":"var $bm_rt;\ntry {\n    var b = thisLayer(2)('Admin')(2)('B')(2)(1)._name;\n    $bm_rt = thisComp.layer(b).toComp([\n        0,\n        0,\n        0\n    ]);\n} catch (err) {\n    $bm_rt = value;\n}"}},{"ty":0,"nm":"Outer Radius","mn":"Pseudo/3bf5uID/RubberHose_2-0010","ix":10,"v":{"a":0,"k":0,"ix":10,"x":"var $bm_rt;\nvar a = thisLayer(4)('RubberHose 2')('A');\nvar b = thisLayer(4)('RubberHose 2')('B');\nvar s = length(a, b);\n$bm_rt = $bm_mul(Math.sin(0.78539816339), s);"}},{"ty":0,"nm":"Inner Radius","mn":"Pseudo/3bf5uID/RubberHose_2-0011","ix":11,"v":{"a":0,"k":0,"ix":11,"x":"var $bm_rt;\nvar eff = thisLayer(4)('RubberHose 2');\nvar bendRad = eff('Bend Radius');\nvar hoseLength = $bm_div(eff('Hose Length'), 2);\nvar realism = eff('Realism');\nvar bendDir = $bm_div(eff('Bend Direction'), 100);\nvar sFac = eff('Parent Scale');\nvar straight = eff('Straight');\nvar autoFlop = eff('AutoFlop');\nvar roundShrink = linear(Math.abs(bendRad), 0, 100, 1, 0.87);\nvar innerRad;\nif (hoseLength > straight) {\n    innerRad = $bm_sum(straight, $bm_mul(Math.sqrt($bm_sub(Math.pow(hoseLength, 2), Math.pow(straight, 2))), roundShrink));\n    innerRad = linear(realism, 0, 100, hoseLength, innerRad);\n    innerRad = linear(Math.abs(bendDir), straight, innerRad);\n} else {\n    innerRad = straight;\n}\ninnerRad *= Math.abs(sFac);\ninnerRad = linear(Math.abs(autoFlop), $bm_mul(straight, Math.max(Math.abs(sFac), 0.001)), innerRad);\n$bm_rt = innerRad;"}},{"ty":0,"nm":"Straight","mn":"Pseudo/3bf5uID/RubberHose_2-0012","ix":12,"v":{"a":0,"k":0,"ix":12,"x":"var $bm_rt;\nvar sFac = thisLayer(4)('RubberHose 2')('Parent Scale');\nvar outerRad = $bm_div(thisLayer(4)('RubberHose 2')('Outer Radius'), Math.max(Math.abs(sFac), 0.001));\n;\n$bm_rt = $bm_div($bm_mul(1.4142135623731, outerRad), 2);"}},{"ty":0,"nm":"Base Rotation","mn":"Pseudo/3bf5uID/RubberHose_2-0013","ix":13,"v":{"a":0,"k":0,"ix":13,"x":"var $bm_rt;\nvar a = thisLayer(4)('RubberHose 2')('A');\nvar b = thisLayer(4)('RubberHose 2')('B');\n$bm_rt = radiansToDegrees(Math.atan2($bm_sub(a[1], b[1]), $bm_sub(a[0], b[0])));"}},{"ty":0,"nm":"AutoFlop","mn":"Pseudo/3bf5uID/RubberHose_2-0014","ix":14,"v":{"a":0,"k":0,"ix":14,"x":"var $bm_rt;\nvar hasAF = false, isEnabled = false, output;\ntry {\n    var lyrAF = thisComp.layer($bm_sum(thisLayer._name.split('::')[0], '::AutoFlop'));\n    isEnabled = lyrAF(4)('Enable')(1);\n    var falloffAngle = lyrAF(4)('Falloff')(1);\n    hasAF = true;\n    var a = thisLayer.toComp([\n        0,\n        0,\n        0\n    ]);\n    var b = thisComp.layer(thisLayer(2)('Admin')(2)('B')(2)(1)._name).toComp([\n        0,\n        0,\n        0\n    ]);\n} catch (e) {\n}\nif (hasAF && isEnabled == 1) {\n    var threshRot = lyrAF('ADBE Transform Group')('ADBE Rotate Z');\n    threshRot %= 360;\n    var ctrlAngle = $bm_neg(radiansToDegrees(Math.atan2($bm_sub(b[0], a[0]), $bm_sub(b[1], a[1]))));\n    var offsetAngle = $bm_sub(threshRot, ctrlAngle);\n    offsetAngle %= 360;\n    var sign = offsetAngle > 0 && offsetAngle < 180 || offsetAngle < -180 ? -1 : 1;\n    var absAngle = Math.abs(offsetAngle);\n    if (absAngle > 90) {\n        absAngle = Math.abs($bm_sub(absAngle, 180));\n    }\n    if (absAngle > 90) {\n        absAngle = Math.abs($bm_sub(absAngle, 180));\n    }\n    output = linear(absAngle, 0, falloffAngle, 0, 1);\n    output *= sign;\n} else {\n    output = 1;\n}\n$bm_rt = output;"}},{"ty":0,"nm":"Parent Scale","mn":"Pseudo/3bf5uID/RubberHose_2-0015","ix":15,"v":{"a":0,"k":0,"ix":15,"x":"var $bm_rt;\nvar sFactor = 1;\nvar scaleNorm = 0;\nvar layerChain = 'thisLayer';\nwhile (eval([layerChain][0]).hasParent) {\n    layerChain = $bm_sum(layerChain, '.parent');\n    scaleNorm = $bm_div(eval(layerChain)('ADBE Transform Group')('ADBE Scale')[0], 100);\n    sFactor = $bm_mul(sFactor, scaleNorm);\n}\n$bm_rt = sFactor;"}},{"ty":6,"nm":"","mn":"Pseudo/3bf5uID/RubberHose_2-0016","ix":16,"v":0}]}],"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[100,100],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Circle","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-75,0],[75,0]],"o":[[-75,0],[75,0]],"v":[[-75,0],[75,0]],"c":false},"ix":2},"nm":"01","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0,-30],[0,30]],"o":[[0,-30],[0,30]],"v":[[0,-30],[0,30]],"c":false},"ix":2},"nm":"02","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[30,30],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"ControlShape","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0,1,0.0333,1],"ix":3,"x":"var $bm_rt;\nif (thisLayer.active) {\n    try {\n        var eff = thisLayer(4)('RubberHose 2');\n        var a = thisLayer.toComp([\n            0,\n            0,\n            0\n        ]);\n        var b = eff('B');\n        var straight = eff('Straight');\n        var hoseLength = $bm_div(eff('Hose Length'), 2);\n        if (straight > hoseLength) {\n            $bm_rt = [\n                0.51,\n                0.83,\n                0.98,\n                1\n            ];\n        } else {\n            $bm_rt = value;\n        }\n    } catch (err) {\n        $bm_rt = value;\n    }\n} else {\n    $bm_rt = value;\n}"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Control Point","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 4::Wrist","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[135,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"A","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[20,20],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 4::Shoulder","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"B","np":1,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"2.09","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"cl":"09","_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Version","np":1,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Admin","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":28,"ty":4,"nm":"Hose 4::Shoulder","parent":20,"hd":true,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10,"x":"var $bm_rt;\nfunction parentTotal() {\n    var parentVal = 0;\n    var layerChain = 'thisLayer';\n    while (eval([layerChain][0]).hasParent) {\n        layerChain = $bm_sum(layerChain, '.parent');\n        parentVal = $bm_sum(parentVal, eval([layerChain][0]).rotation);\n    }\n    return parentVal;\n}\ntry {\n    var eff = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    var autoRotate = eff('Auto Rotate Start');\n    if (autoRotate == 1) {\n        var a = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name).toComp([\n            0,\n            0,\n            0\n        ]);\n        var b = thisComp.layer(thisLayer(2)('Admin')(2)('B')(2)(1)._name).toComp([\n            0,\n            0,\n            0\n        ]);\n        var s = length(a, b);\n        var sFac = eff('Parent Scale');\n        var realism = eff('Realism');\n        var bendDir = $bm_div(eff('Bend Direction'), 100);\n        var hoseLength = $bm_div(eff('Hose Length'), 2);\n        var bendRad = eff('Bend Radius');\n        var autoFlop = eff('AutoFlop');\n        var baseRot = $bm_sub(180, radiansToDegrees(Math.atan2($bm_sub(b[0], a[0]), $bm_sub(b[1], a[1]))));\n        var outerRad = $bm_mul(Math.sin(0.78539816339), s);\n        var straight = $bm_div($bm_mul(1.4142135623731, outerRad), 2);\n        straight /= Math.max(Math.abs(sFac), 0.001);\n        var roundShrink = linear(Math.abs(bendRad), 0, 100, 1, 0.87);\n        var innerRad;\n        if (hoseLength > straight) {\n            innerRad = $bm_sum(straight, $bm_mul(Math.sqrt($bm_sub(Math.pow(hoseLength, 2), Math.pow(straight, 2))), roundShrink));\n            innerRad = linear(realism, 0, 100, hoseLength, innerRad);\n            innerRad = linear(Math.abs(bendDir), straight, innerRad);\n        } else {\n            innerRad = straight;\n        }\n        innerRad = linear(Math.abs(autoFlop), straight, innerRad);\n        var flopDir = 1;\n        if (bendDir < 0) {\n            flopDir = -1;\n        }\n        flopDir *= autoFlop;\n        var opp = $bm_mul($bm_sub(innerRad, straight), flopDir);\n        var theta = Math.atan($bm_div(opp, Math.max(straight, 0.001)));\n        var bendAngle = radiansToDegrees(theta);\n        if (sFac < 0) {\n            baseRot *= -1;\n        }\n        bendRad *= $bm_div($bm_div(theta, $bm_neg(Math.PI)), linear(s, hoseLength, 0, 2, 0.9));\n        var parentRot = hasParent ? parentTotal() : 0;\n        var rotCalc = $bm_sub($bm_sum($bm_sub(baseRot, bendAngle), bendRad), parentRot);\n        $bm_rt = $bm_sum(rotCalc, value);\n    } else {\n        $bm_rt = value;\n    }\n} catch (e) {\n    $bm_rt = value;\n}"},"p":{"a":0,"k":[1278.418,-2177.249,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[100,100],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Circle","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-75,0],[75,0]],"o":[[-75,0],[75,0]],"v":[[-75,0],[75,0]],"c":false},"ix":2},"nm":"01","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0,-30],[0,30]],"o":[[0,-30],[0,30]],"v":[[0,-30],[0,30]],"c":false},"ix":2},"nm":"02","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[30,30],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"ControlShape","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0,1,0.0333,1],"ix":3,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name);\n    $bm_rt = ctrl(2)('Control Point')(2)('Stroke 1')('Color');\n} catch (e) {\n    $bm_rt = value;\n}"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Control Point","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 4::Wrist","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[135,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"A","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[20,20],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 4::Shoulder","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"B","np":1,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"2.09","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"cl":"09","_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Version","np":1,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Admin","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":29,"ty":4,"nm":"Hose 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10,"x":"var $bm_rt;\nfunction parentTotal() {\n    var parentVal = 0;\n    var layerChain = 'thisLayer';\n    while (eval([layerChain][0]).hasParent) {\n        layerChain = $bm_sum(layerChain, '.parent');\n        parentVal = $bm_sum(parentVal, eval([layerChain][0]).rotation);\n    }\n    return parentVal;\n}\nvar r = 0;\nif (thisLayer.hasParent) {\n    r = $bm_neg(parentTotal());\n}\n$bm_rt = r;"},"p":{"a":0,"k":[600,600,0],"ix":2,"l":2,"x":"var $bm_rt;\nvar p = [\n    0,\n    0\n];\ntry {\n    if (thisLayer.hasParent) {\n        p = parent.fromComp([\n            0,\n            0,\n            0\n        ]);\n    }\n    $bm_rt = p;\n} catch (err) {\n    $bm_rt = p;\n}"},"a":{"a":0,"k":[0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2,"x":"var $bm_rt;\n$bm_rt = $bm_div(value, length(toComp([\n    0,\n    0\n]), toComp([\n    0.7071,\n    0.7071\n]))) || 0.001;"}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":4,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":500,"ix":6,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"is":{"a":0,"k":0,"ix":8,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"or":{"a":0,"k":113,"ix":7,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"os":{"a":0,"k":0,"ix":9,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"ix":1,"nm":"LineForCurve","mn":"ADBE Vector Shape - Star","hd":false,"_render":true},{"ty":"tm","s":{"a":0,"k":0,"ix":1,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"e":{"a":0,"k":0,"ix":2,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"o":{"a":0,"k":-90,"ix":3,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(1).propertyIndex;\n$bm_rt = thisLayer(2)('Admin')(2)('ArcMath')(2)(grp)(p);"},"m":1,"ix":2,"nm":"Line Halfer","mn":"ADBE Vector Filter - Trim","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"a":{"a":0,"k":[0,0],"ix":1,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"s":{"a":0,"k":[100,100],"ix":3,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"r":{"a":0,"k":45,"ix":6,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"o":{"a":0,"k":100,"ix":7,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"sk":{"a":0,"k":0,"ix":4,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"sa":{"a":0,"k":0,"ix":5,"x":"var $bm_rt;\nvar p = thisProperty.propertyIndex;\nvar grp = thisProperty.propertyGroup(2).propertyIndex;\n$bm_rt = content('Admin').content('ArcMath')('ADBE Vector Transform Group')(p);"},"nm":"Transform","_render":true}],"nm":"Arc","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.36,0.44,0.3627,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":19,"ix":5,"x":"var $bm_rt;\nvar sFac = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2')('Parent Scale');\n$bm_rt = Math.abs($bm_mul(value, sFac));"},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('A');\n} catch (err) {\n    $bm_rt = value;\n}"},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"BaseHose","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Style","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 4::Wrist","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[135,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"A","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[200,200],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Hose 4::Shoulder","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"B","np":1,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"2.09","np":0,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"cl":"09","_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Version","np":1,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":4,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":200,"ix":6,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('Inner Radius');\n} catch (err) {\n    $bm_rt = value;\n}"},"is":{"a":0,"k":100,"ix":8,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('Bend Radius');\n} catch (err) {\n    $bm_rt = value;\n}"},"or":{"a":0,"k":200,"ix":7,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('Outer Radius');\n} catch (err) {\n    $bm_rt = value;\n}"},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"LineForCurve","mn":"ADBE Vector Shape - Star","hd":false,"_render":true},{"ty":"tm","s":{"a":0,"k":0.01,"ix":1},"e":{"a":0,"k":24.99,"ix":2},"o":{"a":0,"k":-90,"ix":3,"x":"var $bm_rt;\n$bm_rt = -90;"},"m":1,"ix":2,"nm":"Line Halfer","mn":"ADBE Vector Filter - Trim","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1,"x":"var $bm_rt;\nvar s = thisProperty.propertyGroup(2)(2)(1)(7);\n$bm_rt = [\n    -s,\n    0\n];"},"s":{"a":0,"k":[100,100],"ix":3,"x":"var $bm_rt;\nvar flop;\ntry {\n    var eff = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    var bendDir = eff('Bend Direction');\n    var autoFlop = eff('AutoFlop');\n    flop = bendDir > 0 ? 1 : -1;\n    autoFlop > 0 ? 0 : flop *= -1;\n    var s = flop == 1 ? [\n        -100,\n        100\n    ] : [\n        100,\n        100\n    ];\n    if (eff('Parent Scale') < 0) {\n        s = [\n            $bm_neg(s[0]),\n            s[1]\n        ];\n    }\n    $bm_rt = s;\n} catch (err) {\n    $bm_rt = value;\n}\n;"},"r":{"a":0,"k":45,"ix":6,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    var baseRot = ctrl('Base Rotation');\n    var flop = content('Admin').content('ArcMath').transform.scale[0];\n    var rotOffset = flop < 0 ? -45 : 225;\n    $bm_rt = $bm_sum(baseRot, rotOffset);\n} catch (err) {\n    $bm_rt = value;\n}"},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"ArcMath","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2,"x":"var $bm_rt;\ntry {\n    var ctrl = thisComp.layer(thisLayer(2)('Admin')(2)('A')(2)(1)._name)(4)('RubberHose 2');\n    $bm_rt = ctrl('A');\n} catch (err) {\n    $bm_rt = value;\n}"},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Admin","np":4,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":30,"ty":4,"nm":"BG","hd":true,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[600,600,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1200,1200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":true,"_render":true},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":1440,"st":0,"bm":0,"completed":true}],"markers":[],"__complete":true}
\ No newline at end of file
diff --git a/public/search.json b/public/search.json
new file mode 100644
index 00000000..ba76e952
--- /dev/null
+++ b/public/search.json
@@ -0,0 +1 @@
+{"v":"5.5.7","meta":{"g":"LottieFiles AE 0.1.21","a":"","k":"","d":"","tc":"#000000"},"fr":24,"ip":0,"op":96,"w":350,"h":250,"nm":"Search","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Fields - 1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0]},{"t":8,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.23,"y":1},"o":{"x":0.77,"y":0},"t":0,"s":[176,47.951,0],"to":null,"ti":null},{"t":25,"s":[176,127.951,0]}],"ix":2},"a":{"a":0,"k":[-12,18.951,0],"ix":1},"s":{"a":0,"k":[194,194,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-38.5,14.098],[-37.113,11],[11.773,11],[14.871,12.387],[14.871,14.098],[13.484,17.195],[-35.402,17.195],[-38.5,15.809000000000001]],"o":[[-38.5,12.387],[-35.402,11],[13.484,11],[14.871,14.098],[14.871,15.809000000000001],[11.773,17.195],[-37.113,17.195],[-38.5,14.098]],"v":[[-38.5,14.098],[-35.402,11],[11.773,11],[14.871,14.098],[14.871,14.098],[11.773,17.195],[-35.402,17.195],[-38.5,14.098]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.97,0.97,0.97,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-37.113,21.777],[22.421,21.777],[25.519,23.164],[25.519,24.875],[24.131999999999998,27.973],[-35.402,27.973],[-38.5,26.586],[-38.5,24.875]],"o":[[-35.402,21.777],[24.131999999999998,21.777],[25.519,24.875],[25.519,26.586],[22.421,27.973],[-37.113,27.973],[-38.5,24.875],[-38.5,23.164]],"v":[[-35.402,21.777],[22.421,21.777],[25.519,24.875],[25.519,24.875],[22.421,27.973],[-35.402,27.973],[-38.5,24.875],[-38.5,24.875]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.97,0.97,0.97,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-58.605,11],[-44.5,11],[-42.5,11.895],[-42.5,26],[-43.395,28],[-57.5,28],[-59.5,27.105],[-59.5,13]],"o":[[-57.5,11],[-43.395,11],[-42.5,13],[-42.5,27.105],[-44.5,28],[-58.605,28],[-59.5,26],[-59.5,11.895]],"v":[[-57.5,11],[-44.5,11],[-42.5,13],[-42.5,26],[-44.5,28],[-57.5,28],[-59.5,26],[-59.5,13]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.7843,0.902,0.7882,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-64.593,3.333],[38.241,3.333],[42.5,5.241],[42.5,30.309],[40.592999999999996,34.568],[-62.241,34.568],[-66.5,32.661],[-66.5,7.593]],"o":[[-62.241,3.333],[40.592999999999996,3.333],[42.5,7.593],[42.5,32.661],[38.241,34.568],[-64.593,34.568],[-66.5,30.309],[-66.5,5.241]],"v":[[-62.241,3.333],[38.241,3.333],[42.5,7.593],[42.5,30.309],[38.241,34.568],[-62.241,34.568],[-66.5,30.309],[-66.5,7.593]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.99,0.99,0.99,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":222,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":2,"ty":4,"nm":"Fields - 2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":14,"s":[100]},{"t":20,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.23,"y":1},"o":{"x":0.77,"y":0},"t":0,"s":[176,127.951,0],"to":null,"ti":null},{"t":25,"s":[176,197.951,0]}],"ix":2},"a":{"a":0,"k":[-12,18.951,0],"ix":1},"s":{"a":0,"k":[194,194,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-38.5,14.098],[-37.113,11],[11.773,11],[14.871,12.387],[14.871,14.098],[13.484,17.195],[-35.402,17.195],[-38.5,15.809000000000001]],"o":[[-38.5,12.387],[-35.402,11],[13.484,11],[14.871,14.098],[14.871,15.809000000000001],[11.773,17.195],[-37.113,17.195],[-38.5,14.098]],"v":[[-38.5,14.098],[-35.402,11],[11.773,11],[14.871,14.098],[14.871,14.098],[11.773,17.195],[-35.402,17.195],[-38.5,14.098]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.97,0.97,0.97,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-37.113,21.777],[22.421,21.777],[25.519,23.164],[25.519,24.875],[24.131999999999998,27.973],[-35.402,27.973],[-38.5,26.586],[-38.5,24.875]],"o":[[-35.402,21.777],[24.131999999999998,21.777],[25.519,24.875],[25.519,26.586],[22.421,27.973],[-37.113,27.973],[-38.5,24.875],[-38.5,23.164]],"v":[[-35.402,21.777],[22.421,21.777],[25.519,24.875],[25.519,24.875],[22.421,27.973],[-35.402,27.973],[-38.5,24.875],[-38.5,24.875]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.97,0.97,0.97,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-58.605,11],[-44.5,11],[-42.5,11.895],[-42.5,26],[-43.395,28],[-57.5,28],[-59.5,27.105],[-59.5,13]],"o":[[-57.5,11],[-43.395,11],[-42.5,13],[-42.5,27.105],[-44.5,28],[-58.605,28],[-59.5,26],[-59.5,11.895]],"v":[[-57.5,11],[-44.5,11],[-42.5,13],[-42.5,26],[-44.5,28],[-57.5,28],[-59.5,26],[-59.5,13]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.7843,0.902,0.7882,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-64.593,3.333],[38.241,3.333],[42.5,5.241],[42.5,30.309],[40.592999999999996,34.568],[-62.241,34.568],[-66.5,32.661],[-66.5,7.593]],"o":[[-62.241,3.333],[40.592999999999996,3.333],[42.5,7.593],[42.5,32.661],[38.241,34.568],[-64.593,34.568],[-66.5,30.309],[-66.5,5.241]],"v":[[-62.241,3.333],[38.241,3.333],[42.5,7.593],[42.5,30.309],[38.241,34.568],[-62.241,34.568],[-66.5,30.309],[-66.5,7.593]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.99,0.99,0.99,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":222,"st":0,"bm":0,"completed":true}]}],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Glass - 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.2],"y":[1]},"o":{"x":[0.74],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.2],"y":[1]},"o":{"x":[0.8],"y":[0]},"t":32,"s":[92]},{"i":{"x":[0.2],"y":[1]},"o":{"x":[0.8],"y":[0]},"t":64,"s":[2.99]},{"t":98,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.2,"y":1},"o":{"x":0.74,"y":0},"t":0,"s":[288.578,98.008,0],"to":null,"ti":null},{"i":{"x":0.2,"y":1},"o":{"x":0.8,"y":0},"t":32,"s":[74.578,167.008,0],"to":null,"ti":null},{"i":{"x":0.2,"y":1},"o":{"x":0.8,"y":0},"t":64,"s":[249.63099999999997,165.989,0],"to":null,"ti":null},{"t":98,"s":[288.578,98.008,0]}],"ix":2},"a":{"a":0,"k":[47.578,-14.992,0],"ix":1},"s":{"a":0,"k":[200.99999999999997,200.99999999999997,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[54.493,-11.608],[56.526999999999994,-12.378],[64.563,-4.422],[65.353,-2.362],[61.005,1.938],[58.971000000000004,2.709],[50.935,-5.248],[50.145,-7.307999999999999]],"o":[[55.272000000000006,-12.379000000000001],[57.306,-11.607],[65.35300000000001,-3.639],[64.562,-1.579],[60.226,2.709],[58.192,1.938],[50.145,-6.031000000000001],[50.936,-8.091]],"v":[[54.493,-11.608],[57.306,-11.607],[64.563,-4.422],[64.562,-1.579],[61.005,1.938],[58.192,1.938],[50.935,-5.248],[50.936,-8.091]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.29,0.29,0.29,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[47.91,-14.59],[54.804,-7.695]],"o":[[47.91,-14.59],[54.804,-7.695]],"v":[[47.91,-14.59],[54.804,-7.695]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.29,0.29,0.29,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":5,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[22.033,22.033],"ix":2},"p":{"a":0,"k":[41.016,-21.484],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.29,0.29,0.29,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":5,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.99,0.99,0.99,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 3","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":222,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":2,"ty":0,"nm":"Loop Container - 1","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[175,125,0],"ix":2},"a":{"a":0,"k":[175,125,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":0,"k":{"i":[[300.914,68.5],[54,68.5],[54,180],[300.914,180]],"o":[[300.914,68.5],[54,68.5],[54,180],[300.914,180]],"v":[[300.914,68.5],[54,68.5],[54,180],[300.914,180]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"w":350,"h":250,"ip":65,"op":110,"st":65,"bm":0,"completed":true,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Fields - 1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0]},{"t":8,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.23,"y":1},"o":{"x":0.77,"y":0},"t":0,"s":[176,47.951,0],"to":null,"ti":null},{"t":25,"s":[176,127.951,0]}],"ix":2},"a":{"a":0,"k":[-12,18.951,0],"ix":1},"s":{"a":0,"k":[194,194,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-38.5,14.098],[-37.113,11],[11.773,11],[14.871,12.387],[14.871,14.098],[13.484,17.195],[-35.402,17.195],[-38.5,15.809000000000001]],"o":[[-38.5,12.387],[-35.402,11],[13.484,11],[14.871,14.098],[14.871,15.809000000000001],[11.773,17.195],[-37.113,17.195],[-38.5,14.098]],"v":[[-38.5,14.098],[-35.402,11],[11.773,11],[14.871,14.098],[14.871,14.098],[11.773,17.195],[-35.402,17.195],[-38.5,14.098]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.97,0.97,0.97,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-37.113,21.777],[22.421,21.777],[25.519,23.164],[25.519,24.875],[24.131999999999998,27.973],[-35.402,27.973],[-38.5,26.586],[-38.5,24.875]],"o":[[-35.402,21.777],[24.131999999999998,21.777],[25.519,24.875],[25.519,26.586],[22.421,27.973],[-37.113,27.973],[-38.5,24.875],[-38.5,23.164]],"v":[[-35.402,21.777],[22.421,21.777],[25.519,24.875],[25.519,24.875],[22.421,27.973],[-35.402,27.973],[-38.5,24.875],[-38.5,24.875]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.97,0.97,0.97,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-58.605,11],[-44.5,11],[-42.5,11.895],[-42.5,26],[-43.395,28],[-57.5,28],[-59.5,27.105],[-59.5,13]],"o":[[-57.5,11],[-43.395,11],[-42.5,13],[-42.5,27.105],[-44.5,28],[-58.605,28],[-59.5,26],[-59.5,11.895]],"v":[[-57.5,11],[-44.5,11],[-42.5,13],[-42.5,26],[-44.5,28],[-57.5,28],[-59.5,26],[-59.5,13]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.7843,0.902,0.7882,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-64.593,3.333],[38.241,3.333],[42.5,5.241],[42.5,30.309],[40.592999999999996,34.568],[-62.241,34.568],[-66.5,32.661],[-66.5,7.593]],"o":[[-62.241,3.333],[40.592999999999996,3.333],[42.5,7.593],[42.5,32.661],[38.241,34.568],[-64.593,34.568],[-66.5,30.309],[-66.5,5.241]],"v":[[-62.241,3.333],[38.241,3.333],[42.5,7.593],[42.5,30.309],[38.241,34.568],[-62.241,34.568],[-66.5,30.309],[-66.5,7.593]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.99,0.99,0.99,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":222,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":2,"ty":4,"nm":"Fields - 2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":14,"s":[100]},{"t":20,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.23,"y":1},"o":{"x":0.77,"y":0},"t":0,"s":[176,127.951,0],"to":null,"ti":null},{"t":25,"s":[176,197.951,0]}],"ix":2},"a":{"a":0,"k":[-12,18.951,0],"ix":1},"s":{"a":0,"k":[194,194,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-38.5,14.098],[-37.113,11],[11.773,11],[14.871,12.387],[14.871,14.098],[13.484,17.195],[-35.402,17.195],[-38.5,15.809000000000001]],"o":[[-38.5,12.387],[-35.402,11],[13.484,11],[14.871,14.098],[14.871,15.809000000000001],[11.773,17.195],[-37.113,17.195],[-38.5,14.098]],"v":[[-38.5,14.098],[-35.402,11],[11.773,11],[14.871,14.098],[14.871,14.098],[11.773,17.195],[-35.402,17.195],[-38.5,14.098]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.97,0.97,0.97,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-37.113,21.777],[22.421,21.777],[25.519,23.164],[25.519,24.875],[24.131999999999998,27.973],[-35.402,27.973],[-38.5,26.586],[-38.5,24.875]],"o":[[-35.402,21.777],[24.131999999999998,21.777],[25.519,24.875],[25.519,26.586],[22.421,27.973],[-37.113,27.973],[-38.5,24.875],[-38.5,23.164]],"v":[[-35.402,21.777],[22.421,21.777],[25.519,24.875],[25.519,24.875],[22.421,27.973],[-35.402,27.973],[-38.5,24.875],[-38.5,24.875]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.97,0.97,0.97,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-58.605,11],[-44.5,11],[-42.5,11.895],[-42.5,26],[-43.395,28],[-57.5,28],[-59.5,27.105],[-59.5,13]],"o":[[-57.5,11],[-43.395,11],[-42.5,13],[-42.5,27.105],[-44.5,28],[-58.605,28],[-59.5,26],[-59.5,11.895]],"v":[[-57.5,11],[-44.5,11],[-42.5,13],[-42.5,26],[-44.5,28],[-57.5,28],[-59.5,26],[-59.5,13]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.7843,0.902,0.7882,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-64.593,3.333],[38.241,3.333],[42.5,5.241],[42.5,30.309],[40.592999999999996,34.568],[-62.241,34.568],[-66.5,32.661],[-66.5,7.593]],"o":[[-62.241,3.333],[40.592999999999996,3.333],[42.5,7.593],[42.5,32.661],[38.241,34.568],[-64.593,34.568],[-66.5,30.309],[-66.5,5.241]],"v":[[-62.241,3.333],[38.241,3.333],[42.5,7.593],[42.5,30.309],[38.241,34.568],[-62.241,34.568],[-66.5,30.309],[-66.5,7.593]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.99,0.99,0.99,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":222,"st":0,"bm":0,"completed":true}]},{"ddd":0,"ind":3,"ty":0,"nm":"Loop Container - 2","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[175,125,0],"ix":2},"a":{"a":0,"k":[175,125,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":0,"k":{"i":[[300.914,68.5],[54,68.5],[54,180],[300.914,180]],"o":[[300.914,68.5],[54,68.5],[54,180],[300.914,180]],"v":[[300.914,68.5],[54,68.5],[54,180],[300.914,180]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"w":350,"h":250,"ip":32,"op":65,"st":32,"bm":0,"completed":true,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Fields - 1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0]},{"t":8,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.23,"y":1},"o":{"x":0.77,"y":0},"t":0,"s":[176,47.951,0],"to":null,"ti":null},{"t":25,"s":[176,127.951,0]}],"ix":2},"a":{"a":0,"k":[-12,18.951,0],"ix":1},"s":{"a":0,"k":[194,194,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-38.5,14.098],[-37.113,11],[11.773,11],[14.871,12.387],[14.871,14.098],[13.484,17.195],[-35.402,17.195],[-38.5,15.809000000000001]],"o":[[-38.5,12.387],[-35.402,11],[13.484,11],[14.871,14.098],[14.871,15.809000000000001],[11.773,17.195],[-37.113,17.195],[-38.5,14.098]],"v":[[-38.5,14.098],[-35.402,11],[11.773,11],[14.871,14.098],[14.871,14.098],[11.773,17.195],[-35.402,17.195],[-38.5,14.098]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.97,0.97,0.97,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-37.113,21.777],[22.421,21.777],[25.519,23.164],[25.519,24.875],[24.131999999999998,27.973],[-35.402,27.973],[-38.5,26.586],[-38.5,24.875]],"o":[[-35.402,21.777],[24.131999999999998,21.777],[25.519,24.875],[25.519,26.586],[22.421,27.973],[-37.113,27.973],[-38.5,24.875],[-38.5,23.164]],"v":[[-35.402,21.777],[22.421,21.777],[25.519,24.875],[25.519,24.875],[22.421,27.973],[-35.402,27.973],[-38.5,24.875],[-38.5,24.875]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.97,0.97,0.97,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-58.605,11],[-44.5,11],[-42.5,11.895],[-42.5,26],[-43.395,28],[-57.5,28],[-59.5,27.105],[-59.5,13]],"o":[[-57.5,11],[-43.395,11],[-42.5,13],[-42.5,27.105],[-44.5,28],[-58.605,28],[-59.5,26],[-59.5,11.895]],"v":[[-57.5,11],[-44.5,11],[-42.5,13],[-42.5,26],[-44.5,28],[-57.5,28],[-59.5,26],[-59.5,13]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.7843,0.902,0.7882,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-64.593,3.333],[38.241,3.333],[42.5,5.241],[42.5,30.309],[40.592999999999996,34.568],[-62.241,34.568],[-66.5,32.661],[-66.5,7.593]],"o":[[-62.241,3.333],[40.592999999999996,3.333],[42.5,7.593],[42.5,32.661],[38.241,34.568],[-64.593,34.568],[-66.5,30.309],[-66.5,5.241]],"v":[[-62.241,3.333],[38.241,3.333],[42.5,7.593],[42.5,30.309],[38.241,34.568],[-62.241,34.568],[-66.5,30.309],[-66.5,7.593]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.99,0.99,0.99,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":222,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":2,"ty":4,"nm":"Fields - 2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":14,"s":[100]},{"t":20,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.23,"y":1},"o":{"x":0.77,"y":0},"t":0,"s":[176,127.951,0],"to":null,"ti":null},{"t":25,"s":[176,197.951,0]}],"ix":2},"a":{"a":0,"k":[-12,18.951,0],"ix":1},"s":{"a":0,"k":[194,194,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-38.5,14.098],[-37.113,11],[11.773,11],[14.871,12.387],[14.871,14.098],[13.484,17.195],[-35.402,17.195],[-38.5,15.809000000000001]],"o":[[-38.5,12.387],[-35.402,11],[13.484,11],[14.871,14.098],[14.871,15.809000000000001],[11.773,17.195],[-37.113,17.195],[-38.5,14.098]],"v":[[-38.5,14.098],[-35.402,11],[11.773,11],[14.871,14.098],[14.871,14.098],[11.773,17.195],[-35.402,17.195],[-38.5,14.098]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.97,0.97,0.97,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-37.113,21.777],[22.421,21.777],[25.519,23.164],[25.519,24.875],[24.131999999999998,27.973],[-35.402,27.973],[-38.5,26.586],[-38.5,24.875]],"o":[[-35.402,21.777],[24.131999999999998,21.777],[25.519,24.875],[25.519,26.586],[22.421,27.973],[-37.113,27.973],[-38.5,24.875],[-38.5,23.164]],"v":[[-35.402,21.777],[22.421,21.777],[25.519,24.875],[25.519,24.875],[22.421,27.973],[-35.402,27.973],[-38.5,24.875],[-38.5,24.875]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.97,0.97,0.97,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-58.605,11],[-44.5,11],[-42.5,11.895],[-42.5,26],[-43.395,28],[-57.5,28],[-59.5,27.105],[-59.5,13]],"o":[[-57.5,11],[-43.395,11],[-42.5,13],[-42.5,27.105],[-44.5,28],[-58.605,28],[-59.5,26],[-59.5,11.895]],"v":[[-57.5,11],[-44.5,11],[-42.5,13],[-42.5,26],[-44.5,28],[-57.5,28],[-59.5,26],[-59.5,13]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.7843,0.902,0.7882,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-64.593,3.333],[38.241,3.333],[42.5,5.241],[42.5,30.309],[40.592999999999996,34.568],[-62.241,34.568],[-66.5,32.661],[-66.5,7.593]],"o":[[-62.241,3.333],[40.592999999999996,3.333],[42.5,7.593],[42.5,32.661],[38.241,34.568],[-64.593,34.568],[-66.5,30.309],[-66.5,5.241]],"v":[[-62.241,3.333],[38.241,3.333],[42.5,7.593],[42.5,30.309],[38.241,34.568],[-62.241,34.568],[-66.5,30.309],[-66.5,7.593]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.99,0.99,0.99,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":222,"st":0,"bm":0,"completed":true}]},{"ddd":0,"ind":4,"ty":0,"nm":"Loop Container - 3","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[175,125,0],"ix":2},"a":{"a":0,"k":[175,125,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":0,"k":{"i":[[300.914,68.5],[54,68.5],[54,180],[300.914,180]],"o":[[300.914,68.5],[54,68.5],[54,180],[300.914,180]],"v":[[300.914,68.5],[54,68.5],[54,180],[300.914,180]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"w":350,"h":250,"ip":0,"op":33,"st":0,"bm":0,"completed":true,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Fields - 1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0]},{"t":8,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.23,"y":1},"o":{"x":0.77,"y":0},"t":0,"s":[176,47.951,0],"to":null,"ti":null},{"t":25,"s":[176,127.951,0]}],"ix":2},"a":{"a":0,"k":[-12,18.951,0],"ix":1},"s":{"a":0,"k":[194,194,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-38.5,14.098],[-37.113,11],[11.773,11],[14.871,12.387],[14.871,14.098],[13.484,17.195],[-35.402,17.195],[-38.5,15.809000000000001]],"o":[[-38.5,12.387],[-35.402,11],[13.484,11],[14.871,14.098],[14.871,15.809000000000001],[11.773,17.195],[-37.113,17.195],[-38.5,14.098]],"v":[[-38.5,14.098],[-35.402,11],[11.773,11],[14.871,14.098],[14.871,14.098],[11.773,17.195],[-35.402,17.195],[-38.5,14.098]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.97,0.97,0.97,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-37.113,21.777],[22.421,21.777],[25.519,23.164],[25.519,24.875],[24.131999999999998,27.973],[-35.402,27.973],[-38.5,26.586],[-38.5,24.875]],"o":[[-35.402,21.777],[24.131999999999998,21.777],[25.519,24.875],[25.519,26.586],[22.421,27.973],[-37.113,27.973],[-38.5,24.875],[-38.5,23.164]],"v":[[-35.402,21.777],[22.421,21.777],[25.519,24.875],[25.519,24.875],[22.421,27.973],[-35.402,27.973],[-38.5,24.875],[-38.5,24.875]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.97,0.97,0.97,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-58.605,11],[-44.5,11],[-42.5,11.895],[-42.5,26],[-43.395,28],[-57.5,28],[-59.5,27.105],[-59.5,13]],"o":[[-57.5,11],[-43.395,11],[-42.5,13],[-42.5,27.105],[-44.5,28],[-58.605,28],[-59.5,26],[-59.5,11.895]],"v":[[-57.5,11],[-44.5,11],[-42.5,13],[-42.5,26],[-44.5,28],[-57.5,28],[-59.5,26],[-59.5,13]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.7843,0.902,0.7882,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-64.593,3.333],[38.241,3.333],[42.5,5.241],[42.5,30.309],[40.592999999999996,34.568],[-62.241,34.568],[-66.5,32.661],[-66.5,7.593]],"o":[[-62.241,3.333],[40.592999999999996,3.333],[42.5,7.593],[42.5,32.661],[38.241,34.568],[-64.593,34.568],[-66.5,30.309],[-66.5,5.241]],"v":[[-62.241,3.333],[38.241,3.333],[42.5,7.593],[42.5,30.309],[38.241,34.568],[-62.241,34.568],[-66.5,30.309],[-66.5,7.593]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.99,0.99,0.99,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":222,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":2,"ty":4,"nm":"Fields - 2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":14,"s":[100]},{"t":20,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.23,"y":1},"o":{"x":0.77,"y":0},"t":0,"s":[176,127.951,0],"to":null,"ti":null},{"t":25,"s":[176,197.951,0]}],"ix":2},"a":{"a":0,"k":[-12,18.951,0],"ix":1},"s":{"a":0,"k":[194,194,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-38.5,14.098],[-37.113,11],[11.773,11],[14.871,12.387],[14.871,14.098],[13.484,17.195],[-35.402,17.195],[-38.5,15.809000000000001]],"o":[[-38.5,12.387],[-35.402,11],[13.484,11],[14.871,14.098],[14.871,15.809000000000001],[11.773,17.195],[-37.113,17.195],[-38.5,14.098]],"v":[[-38.5,14.098],[-35.402,11],[11.773,11],[14.871,14.098],[14.871,14.098],[11.773,17.195],[-35.402,17.195],[-38.5,14.098]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.97,0.97,0.97,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-37.113,21.777],[22.421,21.777],[25.519,23.164],[25.519,24.875],[24.131999999999998,27.973],[-35.402,27.973],[-38.5,26.586],[-38.5,24.875]],"o":[[-35.402,21.777],[24.131999999999998,21.777],[25.519,24.875],[25.519,26.586],[22.421,27.973],[-37.113,27.973],[-38.5,24.875],[-38.5,23.164]],"v":[[-35.402,21.777],[22.421,21.777],[25.519,24.875],[25.519,24.875],[22.421,27.973],[-35.402,27.973],[-38.5,24.875],[-38.5,24.875]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.97,0.97,0.97,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-58.605,11],[-44.5,11],[-42.5,11.895],[-42.5,26],[-43.395,28],[-57.5,28],[-59.5,27.105],[-59.5,13]],"o":[[-57.5,11],[-43.395,11],[-42.5,13],[-42.5,27.105],[-44.5,28],[-58.605,28],[-59.5,26],[-59.5,11.895]],"v":[[-57.5,11],[-44.5,11],[-42.5,13],[-42.5,26],[-44.5,28],[-57.5,28],[-59.5,26],[-59.5,13]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.7843,0.902,0.7882,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-64.593,3.333],[38.241,3.333],[42.5,5.241],[42.5,30.309],[40.592999999999996,34.568],[-62.241,34.568],[-66.5,32.661],[-66.5,7.593]],"o":[[-62.241,3.333],[40.592999999999996,3.333],[42.5,7.593],[42.5,32.661],[38.241,34.568],[-64.593,34.568],[-66.5,30.309],[-66.5,5.241]],"v":[[-62.241,3.333],[38.241,3.333],[42.5,7.593],[42.5,30.309],[38.241,34.568],[-62.241,34.568],[-66.5,30.309],[-66.5,7.593]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.99,0.99,0.99,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":222,"st":0,"bm":0,"completed":true}]},{"ddd":0,"ind":5,"ty":4,"nm":"Sparkle - 2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":93,"s":[100]},{"t":103,"s":[0]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.19],"y":[1]},"o":{"x":[0.81],"y":[0]},"t":78,"s":[0]},{"t":103,"s":[-180]}],"ix":10},"p":{"a":0,"k":[225.524,69.17,0],"ix":2},"a":{"a":0,"k":[32.024,-44.33,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.19,0.19,0.19],"y":[1,1,1]},"o":{"x":[0.81,0.81,0.81],"y":[0,0,0]},"t":78,"s":[0,0,100]},{"t":98,"s":[49,49,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[32.61,-30.16],[30.166999999999998,-30.615000000000002],[27.61,-39.6],[27.467,-39.822],[19.54,-41.99],[17.55,-43.658],[18.749,-46.326],[27.28,-48.77],[27.505,-48.919999999999995],[29.67,-56.84],[30.576,-58.325],[33.873,-58.045],[36.43,-49.06],[36.57,-48.830999999999996],[44.5,-46.67],[46.20099999999999,-45.528],[45.609,-42.499],[36.78,-39.94],[36.561,-39.787],[34.39,-31.87],[33.479,-30.357000000000003]],"o":[[31.389,-29.885],[29.83,-31.82],[27.567,-39.725],[27.34,-39.86],[18.281,-42.347],[18.131,-45.708],[19.54,-46.55],[27.408,-48.815000000000005],[27.54,-49.05],[29.895000000000003,-57.682],[32.650999999999996,-58.775],[34.21,-56.84],[36.466,-48.931000000000004],[36.7,-48.8],[45.495,-46.412],[46.269,-43.449],[44.61,-42.17],[36.656,-39.89],[36.52,-39.66],[34.173,-31.012],[32.61,-30.19]],"v":[[32.61,-30.16],[29.83,-31.82],[27.61,-39.6],[27.34,-39.86],[19.54,-41.99],[17.907,-44.917],[19.54,-46.55],[27.28,-48.77],[27.54,-49.05],[29.67,-56.84],[31.43,-58.5],[34.21,-56.84],[36.43,-49.06],[36.7,-48.8],[44.5,-46.67],[46.23,-44.5],[44.61,-42.17],[36.78,-39.94],[36.52,-39.66],[34.39,-31.87],[32.61,-30.19]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.344,0.836,0.3604,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":78,"op":110,"st":78,"bm":0,"completed":true},{"ddd":0,"ind":6,"ty":4,"nm":"Sparkle - 3","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":57,"s":[100]},{"t":73,"s":[0]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.19],"y":[1]},"o":{"x":[0.81],"y":[0]},"t":42,"s":[0]},{"t":73,"s":[-180]}],"ix":10},"p":{"a":0,"k":[295.024,175.67,0],"ix":2},"a":{"a":0,"k":[32.024,-44.33,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.19,0.19,0.19],"y":[1,1,1]},"o":{"x":[0.81,0.81,0.81],"y":[0,0,0]},"t":42,"s":[0,0,100]},{"t":62,"s":[49,49,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[32.61,-30.16],[30.166999999999998,-30.615000000000002],[27.61,-39.6],[27.467,-39.822],[19.54,-41.99],[17.55,-43.658],[18.749,-46.326],[27.28,-48.77],[27.505,-48.919999999999995],[29.67,-56.84],[30.576,-58.325],[33.873,-58.045],[36.43,-49.06],[36.57,-48.830999999999996],[44.5,-46.67],[46.20099999999999,-45.528],[45.609,-42.499],[36.78,-39.94],[36.561,-39.787],[34.39,-31.87],[33.479,-30.357000000000003]],"o":[[31.389,-29.885],[29.83,-31.82],[27.567,-39.725],[27.34,-39.86],[18.281,-42.347],[18.131,-45.708],[19.54,-46.55],[27.408,-48.815000000000005],[27.54,-49.05],[29.895000000000003,-57.682],[32.650999999999996,-58.775],[34.21,-56.84],[36.466,-48.931000000000004],[36.7,-48.8],[45.495,-46.412],[46.269,-43.449],[44.61,-42.17],[36.656,-39.89],[36.52,-39.66],[34.173,-31.012],[32.61,-30.19]],"v":[[32.61,-30.16],[29.83,-31.82],[27.61,-39.6],[27.34,-39.86],[19.54,-41.99],[17.907,-44.917],[19.54,-46.55],[27.28,-48.77],[27.54,-49.05],[29.67,-56.84],[31.43,-58.5],[34.21,-56.84],[36.43,-49.06],[36.7,-48.8],[44.5,-46.67],[46.23,-44.5],[44.61,-42.17],[36.78,-39.94],[36.52,-39.66],[34.39,-31.87],[32.61,-30.19]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.344,0.836,0.3604,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":42,"op":74,"st":42,"bm":0,"completed":true},{"ddd":0,"ind":7,"ty":4,"nm":"Sparkle - 4","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":31,"s":[100]},{"t":47,"s":[0]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.19],"y":[1]},"o":{"x":[0.81],"y":[0]},"t":16,"s":[0]},{"t":47,"s":[-180]}],"ix":10},"p":{"a":0,"k":[41.024,157.17,0],"ix":2},"a":{"a":0,"k":[32.024,-44.33,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.19,0.19,0.19],"y":[1,1,1]},"o":{"x":[0.81,0.81,0.81],"y":[0,0,0]},"t":16,"s":[0,0,100]},{"t":36,"s":[49,49,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[32.61,-30.16],[30.166999999999998,-30.615000000000002],[27.61,-39.6],[27.467,-39.822],[19.54,-41.99],[17.55,-43.658],[18.749,-46.326],[27.28,-48.77],[27.505,-48.919999999999995],[29.67,-56.84],[30.576,-58.325],[33.873,-58.045],[36.43,-49.06],[36.57,-48.830999999999996],[44.5,-46.67],[46.20099999999999,-45.528],[45.609,-42.499],[36.78,-39.94],[36.561,-39.787],[34.39,-31.87],[33.479,-30.357000000000003]],"o":[[31.389,-29.885],[29.83,-31.82],[27.567,-39.725],[27.34,-39.86],[18.281,-42.347],[18.131,-45.708],[19.54,-46.55],[27.408,-48.815000000000005],[27.54,-49.05],[29.895000000000003,-57.682],[32.650999999999996,-58.775],[34.21,-56.84],[36.466,-48.931000000000004],[36.7,-48.8],[45.495,-46.412],[46.269,-43.449],[44.61,-42.17],[36.656,-39.89],[36.52,-39.66],[34.173,-31.012],[32.61,-30.19]],"v":[[32.61,-30.16],[29.83,-31.82],[27.61,-39.6],[27.34,-39.86],[19.54,-41.99],[17.907,-44.917],[19.54,-46.55],[27.28,-48.77],[27.54,-49.05],[29.67,-56.84],[31.43,-58.5],[34.21,-56.84],[36.43,-49.06],[36.7,-48.8],[44.5,-46.67],[46.23,-44.5],[44.61,-42.17],[36.78,-39.94],[36.52,-39.66],[34.39,-31.87],[32.61,-30.19]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.344,0.836,0.3604,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":16,"op":48,"st":16,"bm":0,"completed":true}],"markers":[],"__complete":true}
\ No newline at end of file
diff --git a/public/site.webmanifest b/public/site.webmanifest
new file mode 100644
index 00000000..28351826
--- /dev/null
+++ b/public/site.webmanifest
@@ -0,0 +1,16 @@
+{
+  "name": "워크루트",
+  "short_name": "워크루트",
+  "description": "일을 통해 자신의 뿌리를 내리며 성장하는 구인구직 사이트",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#FF6B2C",
+  "icons": [
+    {
+      "src": "/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
index f14b167c..c159138b 100644
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -1,13 +1,14 @@
 "use client";
-
-import { useAuth } from "@/hooks/useAuth";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
+import { useLogin } from "@/hooks/queries/auth/useLogin";
 import { type LoginSchema, loginSchema } from "@/schemas/authSchema";
 import { zodResolver } from "@hookform/resolvers/zod";
+import Image from "next/image";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
 
 export default function LoginPage() {
-  const { login, isLoginPending } = useAuth();
+  const { login, isPending } = useLogin();
   const {
     register,
     handleSubmit,
@@ -21,24 +22,24 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gradient-to-r from-blue-500 to-purple-600 px-4 py-12 sm:px-6 lg:px-8">
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-r from-lime-200 to-lime-300 px-4 py-12 sm:px-6 lg:px-8">
       <div className="w-full max-w-md space-y-8 rounded-lg bg-white p-8 shadow-lg">
         <div>
-          <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">로그인</h2>
-          <p className="mt-2 text-center text-sm text-gray-600">
+          <h2 className="text-grayscale-900 text-center text-3xl font-bold tracking-tight">로그인</h2>
+          <p className="text-grayscale-600 mt-2 text-center text-sm">
             아직 계정이 없으신가요?{" "}
-            <Link href="/signup" className="font-medium text-blue-600 hover:text-blue-500">
+            <Link href="/signup" className="font-medium text-lime-600 hover:text-lime-500">
               회원가입하기
             </Link>
           </p>
         </div>
         <form className="mt-8 space-y-6" onSubmit={handleSubmit(onSubmit)}>
-          <div className="space-y-4 rounded-md shadow-sm">
+          <div className="space-y-4 rounded-md">
             <div>
               <input
                 {...register("email")}
                 type="email"
-                className="relative block w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
+                className="text-grayscale-900 relative block w-full rounded-lg border border-grayscale-300 px-3 py-2 placeholder-grayscale-500 focus:border-lime-500 focus:outline-none focus:ring-lime-500 sm:text-sm"
                 placeholder="이메일"
               />
               {errors.email && <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>}
@@ -47,7 +48,7 @@ export default function LoginPage() {
               <input
                 {...register("password")}
                 type="password"
-                className="relative block w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
+                className="text-grayscale-900 relative block w-full rounded-lg border border-grayscale-300 px-3 py-2 placeholder-grayscale-500 focus:border-lime-500 focus:outline-none focus:ring-lime-500 sm:text-sm"
                 placeholder="비밀번호"
               />
               {errors.password && <p className="mt-1 text-sm text-red-600">{errors.password.message}</p>}
@@ -57,12 +58,33 @@ export default function LoginPage() {
           <div>
             <button
               type="submit"
-              disabled={isLoginPending}
-              className="group relative flex w-full justify-center rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-blue-400"
+              disabled={isPending}
+              className="group relative flex w-full justify-center rounded-lg bg-lime-600 px-4 py-2 text-sm font-medium text-white hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-offset-2 disabled:bg-lime-300"
             >
-              {isLoginPending ? "로그인 중..." : "로그인"}
+              {isPending ? <DotLoadingSpinner /> : "로그인"}
             </button>
           </div>
+          <div className="flex items-center justify-center">
+            <hr className="flex-grow border-t border-grayscale-200" />
+            <span className="mx-4 text-sm text-grayscale-400">SNS 계정으로 로그인하기</span>
+            <hr className="flex-grow border-t border-grayscale-200" />
+          </div>
+          <div className="flex justify-center space-x-6">
+            <Link
+              href={`https://accounts.google.com/o/oauth2/v2/auth?scope=https://www.googleapis.com/auth/userinfo.profile&response_type=code&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI}&client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&state=${encodeURIComponent(
+                JSON.stringify({ provider: "google", action: "login" })
+              )}`}
+            >
+              <Image src="/icons/social/social_google.svg" width={72} height={72} alt="구글 로그인" />
+            </Link>
+            <Link
+              href={`https://kauth.kakao.com/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI}&response_type=code&state=${encodeURIComponent(
+                JSON.stringify({ provider: "kakao", action: "login" })
+              )}`}
+            >
+              <Image src="/icons/social/social_kakao.svg" width={72} height={72} alt="카카오 로그인" />
+            </Link>
+          </div>
         </form>
       </div>
     </div>
diff --git a/src/app/(auth)/signup/applicant/page.tsx b/src/app/(auth)/signup/applicant/page.tsx
new file mode 100644
index 00000000..6b6b606a
--- /dev/null
+++ b/src/app/(auth)/signup/applicant/page.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import { useSignup } from "@/hooks/queries/auth/useSignup";
+import { type SignupSchema, signupSchema } from "@/schemas/authSchema";
+import { userRoles } from "@/constants/userRoles";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+import Image from "next/image";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
+
+export default function ApplicantSignupPage() {
+  const { signup, isPending } = useSignup();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<SignupSchema>({
+    resolver: zodResolver(signupSchema),
+    defaultValues: {
+      role: userRoles.APPLICANT,
+      phoneNumber: "",
+    },
+    mode: "all",
+  });
+
+  const onSubmit = (data: SignupSchema) => {
+    signup(data);
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-r from-lime-200 to-lime-300 px-4 py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md space-y-8 rounded-lg bg-white p-8 shadow-lg">
+        <div>
+          <h2 className="text-grayscale-900 text-center text-3xl font-bold tracking-tight">지원자 회원가입</h2>
+          <p className="text-grayscale-600 mt-2 text-center text-sm">
+            이미 계정이 있으신가요?{" "}
+            <Link href="/login" className="font-medium text-lime-600 hover:text-lime-500">
+              로그인하기
+            </Link>
+          </p>
+        </div>
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit(onSubmit)} noValidate>
+          <div className="space-y-4 rounded-md">
+            <input type="hidden" {...register("role")} value={userRoles.APPLICANT} />
+            <div>
+              <input
+                {...register("email")}
+                type="email"
+                className="text-grayscale-900 relative block w-full rounded-lg border border-grayscale-300 px-3 py-2 placeholder-grayscale-500 focus:border-lime-500 focus:outline-none focus:ring-lime-500 sm:text-sm"
+                placeholder="이메일"
+              />
+              {errors.email && <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>}
+            </div>
+            <div>
+              <input
+                {...register("name")}
+                type="text"
+                className="text-grayscale-900 relative block w-full rounded-lg border border-grayscale-300 px-3 py-2 placeholder-grayscale-500 focus:border-lime-500 focus:outline-none focus:ring-lime-500 sm:text-sm"
+                placeholder="이름"
+              />
+              {errors.name && <p className="mt-1 text-sm text-red-600">{errors.name.message}</p>}
+            </div>
+            <div>
+              <input
+                {...register("nickname")}
+                type="text"
+                className="text-grayscale-900 relative block w-full rounded-lg border border-grayscale-300 px-3 py-2 placeholder-grayscale-500 focus:border-lime-500 focus:outline-none focus:ring-lime-500 sm:text-sm"
+                placeholder="닉네임"
+              />
+              {errors.nickname && <p className="mt-1 text-sm text-red-600">{errors.nickname.message}</p>}
+            </div>
+            <div>
+              <input
+                {...register("password")}
+                type="password"
+                className="text-grayscale-900 relative block w-full rounded-lg border border-grayscale-300 px-3 py-2 placeholder-grayscale-500 focus:border-lime-500 focus:outline-none focus:ring-lime-500 sm:text-sm"
+                placeholder="비밀번호"
+              />
+              {errors.password && <p className="mt-1 text-sm text-red-600">{errors.password.message}</p>}
+            </div>
+            <div>
+              <input
+                {...register("confirmPassword")}
+                type="password"
+                className="text-grayscale-900 relative block w-full rounded-lg border border-grayscale-300 px-3 py-2 placeholder-grayscale-500 focus:border-lime-500 focus:outline-none focus:ring-lime-500 sm:text-sm"
+                placeholder="비밀번호 확인"
+              />
+              {errors.confirmPassword && <p className="mt-1 text-sm text-red-600">{errors.confirmPassword.message}</p>}
+            </div>
+            <div>
+              <input
+                {...register("phoneNumber")}
+                type="tel"
+                className="text-grayscale-900 relative block w-full rounded-lg border border-grayscale-300 px-3 py-2 placeholder-grayscale-500 focus:border-lime-500 focus:outline-none focus:ring-lime-500 sm:text-sm"
+                placeholder="전화번호 (예: 010-1234-5678)"
+              />
+              {errors.phoneNumber && <p className="mt-1 text-sm text-red-600">{errors.phoneNumber.message}</p>}
+            </div>
+          </div>
+          <div>
+            <button
+              type="submit"
+              disabled={isPending}
+              className="group relative flex w-full justify-center rounded-lg bg-lime-600 px-4 py-2 text-sm font-medium text-white hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-offset-2 disabled:bg-lime-300"
+            >
+              {isPending ? <DotLoadingSpinner /> : "회원가입"}
+            </button>
+          </div>
+          <div className="flex items-center justify-center">
+            <hr className="flex-grow border-t border-grayscale-200" />
+            <span className="mx-4 text-sm text-grayscale-400">SNS 계정으로 회원가입하기</span>
+            <hr className="flex-grow border-t border-grayscale-200" />
+          </div>
+          <div className="flex justify-center space-x-4">
+            <Link
+              href={`https://accounts.google.com/o/oauth2/v2/auth?scope=https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile&response_type=code&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI}&client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&state=${encodeURIComponent(
+                JSON.stringify({ provider: "google", action: "signup", role: "APPLICANT" })
+              )}`}
+            >
+              <Image src="/icons/social/social_google.svg" width={72} height={72} alt="구글 회원가입" />
+            </Link>
+            <Link
+              href={`https://kauth.kakao.com/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI}&response_type=code&state=${encodeURIComponent(
+                JSON.stringify({ provider: "kakao", action: "signup", role: "APPLICANT" })
+              )}`}
+            >
+              <Image src="/icons/social/social_kakao.svg" width={72} height={72} alt="카카오 회원가입" />
+            </Link>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(auth)/signup/owner/page.tsx b/src/app/(auth)/signup/owner/page.tsx
new file mode 100644
index 00000000..1eb89131
--- /dev/null
+++ b/src/app/(auth)/signup/owner/page.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import { useSignup } from "@/hooks/queries/auth/useSignup";
+import { type SignupSchema, signupSchema } from "@/schemas/authSchema";
+import { userRoles } from "@/constants/userRoles";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+import Image from "next/image";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
+
+export default function OwnerSignupPage() {
+  const { signup, isPending } = useSignup();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<SignupSchema>({
+    resolver: zodResolver(signupSchema),
+    defaultValues: {
+      role: userRoles.OWNER,
+      storeName: "",
+      storePhoneNumber: "",
+      location: "",
+    },
+    mode: "all",
+  });
+
+  const onSubmit = (data: SignupSchema) => {
+    signup(data);
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-r from-lime-200 to-lime-300 px-4 py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md space-y-8 rounded-lg bg-white p-8 shadow-lg">
+        <div>
+          <h2 className="text-grayscale-900 text-center text-3xl font-bold tracking-tight">사장님 회원가입</h2>
+          <p className="text-grayscale-600 mt-2 text-center text-sm">
+            이미 계정이 있으신가요?{" "}
+            <Link href="/login" className="font-medium text-lime-600 hover:text-lime-500">
+              로그인하기
+            </Link>
+          </p>
+        </div>
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit(onSubmit)} noValidate>
+          <div className="space-y-4 rounded-md">
+            <input type="hidden" {...register("role")} value={userRoles.OWNER} />
+            <div>
+              <input
+                {...register("email")}
+                type="email"
+                className="text-grayscale-900 relative block w-full rounded-lg border border-grayscale-300 px-3 py-2 placeholder-grayscale-500 focus:border-lime-500 focus:outline-none focus:ring-lime-500 sm:text-sm"
+                placeholder="이메일"
+              />
+              {errors.email && <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>}
+            </div>
+            <div>
+              <input
+                {...register("name")}
+                type="text"
+                className="text-grayscale-900 relative block w-full rounded-lg border border-grayscale-300 px-3 py-2 placeholder-grayscale-500 focus:border-lime-500 focus:outline-none focus:ring-lime-500 sm:text-sm"
+                placeholder="이름"
+              />
+              {errors.name && <p className="mt-1 text-sm text-red-600">{errors.name.message}</p>}
+            </div>
+            <div>
+              <input
+                {...register("nickname")}
+                type="text"
+                className="text-grayscale-900 relative block w-full rounded-lg border border-grayscale-300 px-3 py-2 placeholder-grayscale-500 focus:border-lime-500 focus:outline-none focus:ring-lime-500 sm:text-sm"
+                placeholder="닉네임"
+              />
+              {errors.nickname && <p className="mt-1 text-sm text-red-600">{errors.nickname.message}</p>}
+            </div>
+            <div>
+              <input
+                {...register("password")}
+                type="password"
+                className="text-grayscale-900 relative block w-full rounded-lg border border-grayscale-300 px-3 py-2 placeholder-grayscale-500 focus:border-lime-500 focus:outline-none focus:ring-lime-500 sm:text-sm"
+                placeholder="비밀번호"
+              />
+              {errors.password && <p className="mt-1 text-sm text-red-600">{errors.password.message}</p>}
+            </div>
+            <div>
+              <input
+                {...register("confirmPassword")}
+                type="password"
+                className="text-grayscale-900 relative block w-full rounded-lg border border-grayscale-300 px-3 py-2 placeholder-grayscale-500 focus:border-lime-500 focus:outline-none focus:ring-lime-500 sm:text-sm"
+                placeholder="비밀번호 확인"
+              />
+              {errors.confirmPassword && <p className="mt-1 text-sm text-red-600">{errors.confirmPassword.message}</p>}
+            </div>
+            <div>
+              <input
+                {...register("storeName")}
+                type="text"
+                className="text-grayscale-900 relative block w-full rounded-lg border border-grayscale-300 px-3 py-2 placeholder-grayscale-500 focus:border-lime-500 focus:outline-none focus:ring-lime-500 sm:text-sm"
+                placeholder="가게 이름"
+              />
+              {errors.storeName && <p className="mt-1 text-sm text-red-600">{errors.storeName.message}</p>}
+            </div>
+            <div>
+              <input
+                {...register("storePhoneNumber")}
+                type="tel"
+                className="text-grayscale-900 relative block w-full rounded-lg border border-grayscale-300 px-3 py-2 placeholder-grayscale-500 focus:border-lime-500 focus:outline-none focus:ring-lime-500 sm:text-sm"
+                placeholder="가게 전화번호 (예: 02-1234-5678)"
+              />
+              {errors.storePhoneNumber && (
+                <p className="mt-1 text-sm text-red-600">{errors.storePhoneNumber.message}</p>
+              )}
+            </div>
+            <div>
+              <input
+                {...register("location")}
+                type="text"
+                className="text-grayscale-900 relative block w-full rounded-lg border border-grayscale-300 px-3 py-2 placeholder-grayscale-500 focus:border-lime-500 focus:outline-none focus:ring-lime-500 sm:text-sm"
+                placeholder="가게 위치"
+              />
+              {errors.location && <p className="mt-1 text-sm text-red-600">{errors.location.message}</p>}
+            </div>
+          </div>
+          <div>
+            <button
+              type="submit"
+              disabled={isPending}
+              className="group relative flex w-full justify-center rounded-lg bg-lime-600 px-4 py-2 text-sm font-medium text-white hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-offset-2 disabled:bg-lime-300"
+            >
+              {isPending ? <DotLoadingSpinner /> : "회원가입"}
+            </button>
+          </div>
+          <div className="flex items-center justify-center">
+            <hr className="flex-grow border-t border-grayscale-200" />
+            <span className="mx-4 text-sm text-grayscale-400">SNS 계정으로 회원가입하기</span>
+            <hr className="flex-grow border-t border-grayscale-200" />
+          </div>
+          <div className="flex justify-center space-x-4">
+            <Link
+              href={`https://accounts.google.com/o/oauth2/v2/auth?scope=https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile&response_type=code&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI}&client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&state=${encodeURIComponent(
+                JSON.stringify({ provider: "google", action: "signup", role: "OWNER" })
+              )}`}
+            >
+              <Image src="/icons/social/social_google.svg" width={72} height={72} alt="구글 회원가입" />
+            </Link>
+            <Link
+              href={`https://kauth.kakao.com/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI}&response_type=code&state=${encodeURIComponent(
+                JSON.stringify({ provider: "kakao", action: "signup", role: "OWNER" })
+              )}`}
+            >
+              <Image src="/icons/social/social_kakao.svg" width={72} height={72} alt="카카오 회원가입" />
+            </Link>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(auth)/signup/page.tsx b/src/app/(auth)/signup/page.tsx
index af552181..6ae81fef 100644
--- a/src/app/(auth)/signup/page.tsx
+++ b/src/app/(auth)/signup/page.tsx
@@ -1,207 +1,62 @@
 "use client";
 
-import { useAuth } from "@/hooks/useAuth";
-import { type SignupSchema, signupSchema } from "@/schemas/authSchema";
-import { ROLES } from "@/schemas/commonSchema";
-import { zodResolver } from "@hookform/resolvers/zod";
 import Link from "next/link";
-import { useEffect } from "react";
-import { FieldErrors, useForm } from "react-hook-form";
+import { FaUser } from "react-icons/fa";
+import { MdStorefront } from "react-icons/md";
 
 export default function SignupPage() {
-  const { signup, isSignupPending } = useAuth();
-  const {
-    register,
-    handleSubmit,
-    watch,
-    setValue,
-    formState: { errors },
-  } = useForm<SignupSchema>({
-    resolver: zodResolver(signupSchema),
-    defaultValues: {
-      role: ROLES.APPLICANT,
-      phoneNumber: "",
-      storeName: "",
-      storePhoneNumber: "",
-      location: "",
-    },
-    mode: "all",
-  });
-
-  const selectedRole = watch("role");
-  const formValues = watch();
-
-  const isFormComplete = () => {
-    const baseFields = ["email", "password", "confirmPassword", "name", "nickname"];
-    const baseFieldsComplete = baseFields.every((field) => formValues[field as keyof SignupSchema]?.trim() !== "");
-
-    if (selectedRole === ROLES.OWNER) {
-      return (
-        baseFieldsComplete &&
-        formValues.storeName?.trim() !== "" &&
-        formValues.storePhoneNumber?.trim() !== "" &&
-        formValues.location?.trim() !== ""
-      );
-    }
-
-    return baseFieldsComplete && formValues.phoneNumber?.trim() !== "";
-  };
-
-  useEffect(() => {
-    if (selectedRole === ROLES.APPLICANT) {
-      setValue("storeName", "");
-      setValue("storePhoneNumber", "");
-      setValue("location", "");
-    } else if (selectedRole === ROLES.OWNER) {
-      setValue("phoneNumber", "");
-    }
-  }, [selectedRole, setValue]);
-
-  const onSubmit = (data: SignupSchema) => {
-    if (data.role === ROLES.OWNER) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { phoneNumber, ...ownerData } = data;
-      signup(ownerData as SignupSchema);
-    } else {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { storeName, storePhoneNumber, location, ...applicantData } = data;
-      signup(applicantData as SignupSchema);
-    }
-  };
-
-  const onError = (errors: FieldErrors<SignupSchema>) => {
-    console.error("Form validation errors:", errors);
-  };
-
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gradient-to-r from-blue-500 to-purple-600 px-4 py-12 sm:px-6 lg:px-8">
-      <div className="w-full max-w-md space-y-8 rounded-lg bg-white p-8 shadow-lg">
+    <div className="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
+      <div className="w-full max-w-4xl space-y-8 rounded-lg bg-white p-8">
         <div>
-          <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">회원가입</h2>
-          <p className="mt-2 text-center text-sm text-gray-600">
+          <h2 className="text-grayscale-900 text-center text-3xl font-bold tracking-tight">회원 유형 선택</h2>
+          <p className="text-grayscale-600 mt-2 text-center text-sm">
             이미 계정이 있으신가요?{" "}
-            <Link href="/login" className="font-medium text-blue-600 hover:text-blue-500">
+            <Link href="/login" className="font-medium text-lime-600 hover:text-lime-500">
               로그인하기
             </Link>
           </p>
         </div>
-        <form className="mt-8 space-y-6" onSubmit={handleSubmit(onSubmit, onError)} noValidate>
-          <div className="space-y-4 rounded-md shadow-sm">
-            <div>
-              <input
-                {...register("email")}
-                type="email"
-                className="relative block w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
-                placeholder="이메일"
-              />
-              {errors.email && <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>}
-            </div>
-            <div>
-              <input
-                {...register("name")}
-                type="text"
-                className="relative block w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
-                placeholder="이름"
-              />
-              {errors.name && <p className="mt-1 text-sm text-red-600">{errors.name.message}</p>}
-            </div>
-            <div>
-              <input
-                {...register("nickname")}
-                type="text"
-                className="relative block w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
-                placeholder="닉네임"
-              />
-              {errors.nickname && <p className="mt-1 text-sm text-red-600">{errors.nickname.message}</p>}
+
+        <div className="mt-10 flex flex-col gap-8 sm:flex-row">
+          {/* 지원자 회원가입 카드 */}
+          <Link
+            href="/signup/applicant"
+            className="flex flex-1 flex-col items-center rounded-lg border-2 border-transparent bg-lime-50 p-8 transition-all hover:scale-105 hover:border-lime-600 hover:shadow-xl"
+          >
+            <div className="flex h-24 w-24 items-center justify-center rounded-full bg-lime-100">
+              <FaUser className="h-12 w-12 text-lime-600" />
             </div>
-            <div>
-              <input
-                {...register("password")}
-                type="password"
-                className="relative block w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
-                placeholder="비밀번호"
-              />
-              {errors.password && <p className="mt-1 text-sm text-red-600">{errors.password.message}</p>}
+            <h3 className="text-grayscale-900 mt-6 text-2xl font-semibold">지원자로 가입</h3>
+            <p className="text-grayscale-600 mt-2 text-center">
+              알바를 찾고 계신가요?
+              <br />
+              지원자로 가입하여 알바 정보를 확인하세요.
+            </p>
+            <div className="mt-6 rounded-lg bg-lime-600 px-6 py-3 text-white transition-colors hover:bg-lime-700">
+              지원자로 가입하기
             </div>
-            <div>
-              <input
-                {...register("confirmPassword")}
-                type="password"
-                className="relative block w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
-                placeholder="비밀번호 확인"
-              />
-              {errors.confirmPassword && <p className="mt-1 text-sm text-red-600">{errors.confirmPassword.message}</p>}
+          </Link>
+
+          {/* 사장님 회원가입 카드 */}
+          <Link
+            href="/signup/owner"
+            className="flex flex-1 flex-col items-center rounded-lg border-2 border-transparent bg-lime-50 p-8 transition-all hover:scale-105 hover:border-lime-600 hover:shadow-lg"
+          >
+            <div className="flex h-24 w-24 items-center justify-center rounded-full bg-lime-100">
+              <MdStorefront className="h-14 w-14 text-lime-600" />
             </div>
-            <div className="flex gap-4">
-              <label className="flex items-center">
-                <input {...register("role")} type="radio" value={ROLES.APPLICANT} className="mr-2" defaultChecked />
-                지원자
-              </label>
-              <label className="flex items-center">
-                <input {...register("role")} type="radio" value={ROLES.OWNER} className="mr-2" />
-                사장님
-              </label>
+            <h3 className="text-grayscale-900 mt-6 text-2xl font-semibold">사장님으로 가입</h3>
+            <p className="text-grayscale-600 mt-2 text-center">
+              직원을 구하고 계신가요?
+              <br />
+              사장님으로 가입하여 구인 공고를 등록하세요.
+            </p>
+            <div className="mt-6 rounded-lg bg-lime-600 px-6 py-3 text-white transition-colors hover:bg-lime-700">
+              사장님으로 가입하기
             </div>
-            {errors.role && <p className="mt-1 text-sm text-red-600">{errors.role.message}</p>}
-            {selectedRole === ROLES.APPLICANT && (
-              <div>
-                <input
-                  {...register("phoneNumber")}
-                  type="tel"
-                  className="relative block w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
-                  placeholder="전화번호 (예: 010-1234-5678)"
-                />
-                {errors.phoneNumber && <p className="mt-1 text-sm text-red-600">{errors.phoneNumber.message}</p>}
-              </div>
-            )}
-            {selectedRole === ROLES.OWNER && (
-              <>
-                <div>
-                  <input
-                    {...register("storeName")}
-                    type="text"
-                    className="relative block w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
-                    placeholder="가게 이름"
-                  />
-                  {errors.storeName && <p className="mt-1 text-sm text-red-600">{errors.storeName.message}</p>}
-                </div>
-                <div>
-                  <input
-                    {...register("storePhoneNumber")}
-                    type="tel"
-                    className="relative block w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
-                    placeholder="가게 전화번호 (예: 02-1234-5678)"
-                  />
-                  {errors.storePhoneNumber && (
-                    <p className="mt-1 text-sm text-red-600">{errors.storePhoneNumber.message}</p>
-                  )}
-                </div>
-                <div>
-                  <input
-                    {...register("location")}
-                    type="text"
-                    className="relative block w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
-                    placeholder="가게 위치"
-                  />
-                  {errors.location && <p className="mt-1 text-sm text-red-600">{errors.location.message}</p>}
-                </div>
-              </>
-            )}
-          </div>
-          <div>
-            <button
-              type="submit"
-              disabled={isSignupPending}
-              className={`group relative flex w-full justify-center rounded-lg px-4 py-2 text-sm font-medium text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
-                isSignupPending || !isFormComplete()
-                  ? "cursor-not-allowed bg-blue-300"
-                  : "bg-blue-600 hover:bg-blue-700"
-              }`}
-            >
-              {isSignupPending ? "회원가입 중..." : "회원가입"}
-            </button>
-          </div>
-        </form>
+          </Link>
+        </div>
       </div>
     </div>
   );
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index cd58ee8e..46a33bb2 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -3,12 +3,12 @@
 import { useEffect, useState, useRef } from "react";
 import Link from "next/link";
 import Image from "next/image";
-
-import Footer from "../components/layout/Footer";
+import { useUser } from "@/hooks/queries/user/me/useUser";
 
 export default function Home() {
   const [visibleSections, setVisibleSections] = useState(new Set<string>());
   const observer = useRef<IntersectionObserver | null>(null);
+  const { user } = useUser();
 
   useEffect(() => {
     // 클라이언트 환경에서만 IntersectionObserver 실행
@@ -47,50 +47,56 @@ export default function Home() {
   ];
 
   return (
-    <div className="flex min-h-screen min-w-[320px] flex-col">
-      <main className="flex-grow">
-        {/* 히어로 섹션 */}
-        <section className="bg-black text-black relative flex flex-col items-center py-10">
-          <div className="relative z-0 w-full max-w-[320px] text-center sm:max-w-[80%] lg:max-w-[964px]">
-            {/* 상자 내부의 텍스트와 버튼 */}
-            <h1 className="font-nexon-bold mb-2 mt-6 text-2xl leading-tight text-green-500 sm:text-3xl md:text-4xl lg:text-5xl lg:leading-relaxed">
-              WorkRoot
-            </h1>
-            <p className="font-nexon-regular mb-4 text-base leading-snug sm:text-lg md:text-xl lg:text-2xl lg:leading-relaxed">
-              한 곳에서 관리하는 알바 구인 플랫폼
-            </p>
+    <div className="flex min-w-[320px] flex-grow flex-col">
+      {/* 히어로 섹션 */}
+      <section className="bg-black text-black relative flex flex-col items-center py-10">
+        <div className="relative z-0 w-full max-w-[320px] text-center sm:max-w-[80%] lg:max-w-[964px]">
+          {/* 상자 내부의 텍스트와 버튼 */}
+          <h1 className="font-nexon-bold mb-2 mt-6 text-2xl leading-tight text-green-500 sm:text-3xl md:text-4xl lg:text-5xl lg:leading-relaxed">
+            WorkRoot
+          </h1>
+          <p className="font-nexon-regular mb-4 text-base leading-snug sm:text-lg md:text-xl lg:text-2xl lg:leading-relaxed">
+            한 곳에서 관리하는 알바 구인 플랫폼
+          </p>
+          {user ? (
+            <Link href="/albalist">
+              <p className="font-nexon-regular text-black inline-block rounded-lg bg-green-500 px-4 py-2 text-sm sm:px-6 sm:py-3 sm:text-base md:px-8 md:py-4 md:text-lg lg:px-10 lg:py-5 lg:text-xl">
+                알바 둘러보기
+              </p>
+            </Link>
+          ) : (
             <Link href="/login">
               <p className="font-nexon-regular text-black inline-block rounded-lg bg-green-500 px-4 py-2 text-sm sm:px-6 sm:py-3 sm:text-base md:px-8 md:py-4 md:text-lg lg:px-10 lg:py-5 lg:text-xl">
-                알바를 시작하기
+                알바 시작하기
               </p>
             </Link>
-          </div>
+          )}
+        </div>
 
-          {/* 배경 이미지 */}
-          <div className="relative mt-8 aspect-[964/520] w-[320px] sm:w-[70vw] lg:w-[964px]">
-            <Image src="/images/01.png" alt="Hero Background" layout="fill" className="rounded-lg object-contain" />
-          </div>
-        </section>
+        {/* 배경 이미지 */}
+        <div className="relative mt-8 aspect-[964/520] w-[320px] sm:w-[70vw] lg:w-[964px]">
+          <Image src="/images/01.png" alt="Hero Background" fill className="rounded-lg object-contain" priority />
+        </div>
+      </section>
 
-        {/* UI 섹션 */}
-        <section className="py-8 md:py-16">
-          <div className="container mx-auto px-4">
-            <div className="flex flex-col gap-4 md:gap-6 md:py-10 lg:gap-10 lg:py-20">
-              {sections.map((section) => (
-                <div
-                  key={section.id}
-                  data-id={section.id}
-                  className={`relative flex h-[300px] w-full transform items-center justify-center rounded-lg opacity-0 transition-all duration-700 ease-in-out md:h-[400px] lg:h-[500px] ${
-                    visibleSections.has(section.id) ? "scale-100 opacity-100" : "scale-90"
-                  }`}
-                >
-                  <Image src={section.src} alt={section.alt} layout="fill" className="rounded-lg object-contain" />
-                </div>
-              ))}
-            </div>
+      {/* UI 섹션 */}
+      <section className="py-8 md:py-16">
+        <div className="container mx-auto px-4">
+          <div className="flex flex-col gap-4 md:gap-6 md:py-10 lg:gap-10 lg:py-20">
+            {sections.map((section) => (
+              <div
+                key={section.id}
+                data-id={section.id}
+                className={`relative flex h-[300px] w-full transform items-center justify-center rounded-lg opacity-0 transition-all duration-700 ease-in-out md:h-[400px] lg:h-[500px] ${
+                  visibleSections.has(section.id) ? "scale-100 opacity-100" : "scale-90"
+                }`}
+              >
+                <Image src={section.src} alt={section.alt} fill className="rounded-lg object-contain" />
+              </div>
+            ))}
           </div>
-        </section>
-      </main>
+        </div>
+      </section>
     </div>
   );
 }
diff --git a/src/app/(pages)/(albaform)/addform/page.tsx b/src/app/(pages)/(albaform)/addform/page.tsx
new file mode 100644
index 00000000..e9269d06
--- /dev/null
+++ b/src/app/(pages)/(albaform)/addform/page.tsx
@@ -0,0 +1,323 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { FormProvider, useForm } from "react-hook-form";
+import axios from "axios";
+import TabMenuDropdown from "@/app/components/button/dropdown/TabMenuDropdown";
+import Button from "@/app/components/button/default/Button";
+import { toast } from "react-hot-toast";
+import { useMutation } from "@tanstack/react-query";
+import RecruitContentSection from "./section/RecruitContentSection";
+import RecruitConditionSection from "./section/RecruitConditionSection";
+import WorkConditionSection from "./section/WorkConditionSection";
+import useEditing from "@/hooks/useEditing";
+import { SubmitFormDataType } from "@/types/addform";
+import CustomFormModal from "@/app/components/modal/modals/confirm/CustomFormModal";
+import tempSave from "@/utils/tempSave";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
+import useUploadImages from "@/hooks/queries/user/me/useImageUpload";
+
+export default function AddFormPage() {
+  const router = useRouter();
+  const [formId, setFormId] = useState<number | undefined>(undefined);
+  // 리액트 훅폼에서 관리할 데이터 타입 지정 및 메서드 호출 (상위 컴포넌트 = useForm 사용)
+  const methods = useForm<SubmitFormDataType>({
+    mode: "onChange",
+    defaultValues: {
+      isPublic: true,
+      hourlyWage: "10,030",
+      isNegotiableWorkDays: false,
+      workDays: [],
+      workEndTime: "",
+      workStartTime: "",
+      workEndDate: "",
+      workStartDate: "",
+      location: "",
+      preferred: "",
+      age: "",
+      education: "",
+      gender: "",
+      numberOfPositions: undefined,
+      recruitmentEndDate: undefined,
+      recruitmentStartDate: undefined,
+      description: "",
+      title: "",
+      imageUrls: [],
+      imageFiles: [],
+    },
+  });
+
+  const {
+    setValue,
+    handleSubmit,
+    formState: { isDirty, isValid },
+  } = methods;
+
+  // 훅폼에서 관리하는 전체 데이터를 가져오는 함수
+  const currentValues: SubmitFormDataType = methods.watch();
+
+  // 이미지 업로드 api 처리를 위해 별도 변수에 할당
+  const imageFiles = currentValues.imageFiles;
+  const [, setSelectedOption] = useState<string>("");
+  const [showTempDataModal, setShowTempDataModal] = useState(false);
+
+  const { uploadImages } = useUploadImages();
+
+  // 각각의 탭 작성중 여부
+  const { isEditingRecruitContent, isEditingRecruitCondition, isEditingWorkCondition } = useEditing(currentValues);
+
+  // tab 선택 시 Url params 수정 & 하위 폼 데이터 임시저장
+  const searchParams = useSearchParams();
+  const currentParam = searchParams.get("tab");
+  const [prevOption, setPrevOption] = useState<string | null>(null);
+  const initialLoad = currentParam === null; // 초기 로딩 여부 확인
+  const [loading, setLoading] = useState(false);
+
+  // 폼 제출 리액트쿼리
+  const mutation = useMutation({
+    mutationFn: async () => {
+      setLoading(true);
+      // 이미지 필수 체크
+      if (!imageFiles || imageFiles.length === 0) {
+        toast.error("이미지를 첨부해주세요.");
+        throw new Error("이미지는 필수입니다.");
+      }
+
+      // 이미지 업로드 처리
+      let uploadedUrls: string[] = [];
+      try {
+        if (currentValues.imageUrls.length !== currentValues.imageFiles.length) {
+          uploadedUrls = await uploadImages(Array.from(imageFiles));
+        } else {
+          uploadedUrls = currentValues.imageUrls;
+        }
+        if (!uploadedUrls.length) {
+          toast.error("이미지 업로드에 실패했습니다.");
+          throw new Error("이미지 업로드 실패");
+        }
+        setValue("imageUrls", uploadedUrls);
+      } catch (error) {
+        console.error("이미지 업로드 중 오류 발생:", error);
+        toast.error("이미지 업로드 중 오류가 발생했습니다.");
+        throw error;
+      }
+
+      const excludedKeys = ["displayDate", "workDateRange", "recruitDateRange", "imageFiles"];
+
+      // 원하는 필드만 포함된 새로운 객체 만들기
+      const filteredData = Object.entries(currentValues)
+        .filter(([key]) => !excludedKeys.includes(key))
+        .reduce((acc: Partial<SubmitFormDataType>, [key, value]) => {
+          if (key === "numberOfPositions") {
+            acc[key] = Number(value);
+          } else if (key === "hourlyWage") {
+            // 문자열이면 콤마 제거 후 숫자로 변환
+            acc[key] = typeof value === "string" ? String(Number(value.replace(/,/g, ""))) : String(Number(value));
+          } else if (key === "imageUrls") {
+            // 업로드된 이미지 URL 사용
+            acc[key] = uploadedUrls;
+          } else {
+            acc[key as keyof SubmitFormDataType] = value;
+          }
+          return acc;
+        }, {});
+
+      const response = await axios.post("/api/forms", filteredData);
+      const id = response.data.id;
+      setFormId(id);
+    },
+    onSuccess: () => {
+      if (typeof window !== "undefined") {
+        window.localStorage.removeItem("tempAddFormData");
+      }
+      setLoading(false);
+      toast.success("알바폼을 등록했습니다.");
+    },
+    onError: (error) => {
+      setLoading(false);
+      toast.error("에러가 발생했습니다.");
+      console.error(error);
+      onTempSave();
+    },
+  });
+
+  useEffect(() => {
+    if (formId) {
+      router.push(`/alba/${formId}`);
+    }
+  }, [formId]);
+
+  // 폼데이터 임시 저장 함수
+  const onTempSave = async () => {
+    // 이미지 처리 로직
+    if (currentValues.imageUrls.length !== currentValues.imageFiles.length) {
+      try {
+        const uploadedUrls = await uploadImages(Array.from(imageFiles));
+        if (uploadedUrls && uploadedUrls.length > 0) {
+          setValue("imageUrls", [...uploadedUrls]);
+        } else {
+          setValue("imageUrls", [...currentValues.imageUrls]);
+        }
+      } catch (error) {
+        console.error("임시저장 - 이미지 업로드 중 오류 발생:", error);
+        setValue("imageUrls", []);
+      }
+    }
+    tempSave("addformData", currentValues);
+  };
+
+  const handleOptionChange = async (option: string) => {
+    setSelectedOption(option);
+    if (!initialLoad && option !== currentParam && option !== prevOption && isDirty) {
+      await onTempSave();
+      setPrevOption(option);
+    }
+    const params = {
+      "모집 내용": "recruit-content",
+      "모집 조건": "recruit-condition",
+      "근무 조건": "work-condition",
+    }[option];
+    router.push(`/addform?tab=${params}`);
+  };
+
+  useEffect(() => {
+    switch (currentParam) {
+      case "recruit-content":
+        setSelectedOption("모집 내용");
+        break;
+      case "recruit-condition":
+        setSelectedOption("모집 조건");
+        break;
+      case "work-condition":
+        setSelectedOption("근무 조건");
+        break;
+      default:
+        setSelectedOption("모집 내용");
+    }
+  }, [currentParam]);
+
+  const renderChildren = () => {
+    switch (currentParam) {
+      case "recruit-content":
+        return <RecruitContentSection key="recruitContent" />;
+      case "recruit-condition":
+        return <RecruitConditionSection key="recruitCondition" />;
+      case "work-condition":
+        return <WorkConditionSection key="workCondition" />;
+      default:
+        return <RecruitContentSection key="recruitContent" />;
+    }
+  };
+
+  // 임시저장 데이터 로드 함수
+  const loadTempData = () => {
+    const tempData = localStorage.getItem("tempAddFormData");
+    if (tempData) {
+      const parsedData: SubmitFormDataType = JSON.parse(tempData);
+
+      // 기본 필드들 설정
+      Object.entries(parsedData).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+          setValue(key as keyof SubmitFormDataType, value);
+        }
+      });
+
+      // 날짜 관련 필드들은 Date 객체로 변환
+      if (parsedData.recruitmentStartDate && parsedData.recruitmentEndDate) {
+        setValue("recruitmentStartDate", parsedData.recruitmentStartDate);
+        setValue("recruitmentEndDate", parsedData.recruitmentEndDate);
+      }
+
+      if (parsedData.workStartDate && parsedData.workEndDate) {
+        setValue("workStartDate", parsedData.workStartDate);
+        setValue("workEndDate", parsedData.workEndDate);
+      }
+
+      // 이미지 URL 설정
+      if (parsedData.imageUrls?.length > 0) {
+        setValue("imageUrls", parsedData.imageUrls);
+      }
+    }
+  };
+
+  // 임시저장 데이터 초기화
+  const clearTempData = () => {
+    localStorage.removeItem("tempAddFormData");
+  };
+
+  // 임시저장 데이터 확인 및 모달 표시
+  useEffect(() => {
+    const tempData = localStorage.getItem("tempAddFormData");
+    if (tempData) {
+      setShowTempDataModal(true);
+    }
+  }, []);
+
+  // 모달 확인 버튼 핸들러
+  const handleConfirmTemp = () => {
+    loadTempData();
+    setShowTempDataModal(false);
+  };
+
+  // 모달 취소 버튼 핸들러
+  const handleCancelTemp = () => {
+    clearTempData();
+    setShowTempDataModal(false);
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <div className="relative pb-10 lg:pb-0">
+        <aside className="flex flex-col items-center justify-between rounded-[24px] bg-background-200 lg:fixed lg:left-[108px] lg:top-[64px] lg:m-10 lg:h-[80vh] lg:p-10">
+          <TabMenuDropdown
+            options={[
+              {
+                label: "모집 내용",
+                isEditing: isEditingRecruitContent || currentParam === "recruit-content",
+              },
+              { label: "모집 조건", isEditing: isEditingRecruitCondition || currentParam === "recruit-condition" },
+              { label: "근무 조건", isEditing: isEditingWorkCondition || currentParam === "work-condition" },
+            ]}
+            onChange={handleOptionChange}
+            currentParam={currentParam || ""}
+          />
+          <div className="absolute -bottom-[160px] mb-20 flex w-full flex-col gap-2 lg:relative lg:bottom-0 lg:mb-0">
+            <Button
+              type="button"
+              variant="outlined"
+              width="md"
+              color="orange"
+              className="lg: h-[58px] w-[320px] border bg-background-100 lg:h-[72px] lg:w-full lg:text-xl lg:leading-8"
+              onClick={() => onTempSave()}
+            >
+              임시 저장
+            </Button>
+            <Button
+              type="submit"
+              variant="solid"
+              width="md"
+              color="orange"
+              className="lg: h-[58px] w-[320px] lg:h-[72px] lg:w-full lg:text-xl lg:leading-8"
+              disabled={!isValid}
+              onClick={handleSubmit(() => mutation.mutate())}
+            >
+              {loading ? <DotLoadingSpinner /> : "작성 완료"}
+            </Button>
+          </div>
+        </aside>
+        {renderChildren()}
+        {/* 임시저장 데이터 확인 모달 */}
+        <CustomFormModal
+          isOpen={showTempDataModal}
+          title="임시저장 데이터 확인"
+          content="임시저장된 데이터가 있습니다. 이어서 작성하시겠습니까?"
+          confirmText="이어서 작성하기"
+          cancelText="새로 작성하기"
+          onConfirm={handleConfirmTemp}
+          onCancel={handleCancelTemp}
+          closeOnOverlayClick={false}
+        />
+      </div>
+    </FormProvider>
+  );
+}
diff --git a/src/app/(pages)/(albaform)/addform/section/RecruitConditionSection.tsx b/src/app/(pages)/(albaform)/addform/section/RecruitConditionSection.tsx
new file mode 100644
index 00000000..516ff9f5
--- /dev/null
+++ b/src/app/(pages)/(albaform)/addform/section/RecruitConditionSection.tsx
@@ -0,0 +1,53 @@
+"use client";
+import { useFormContext } from "react-hook-form";
+import InputDropdown from "@/app/components/button/dropdown/InputDropdown";
+import Label from "../../component/Label";
+
+// 알바폼 만들기 - 사장님- 2-모집조건
+export default function RecruitConditionSection() {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
+
+  return (
+    <div className="relative">
+      <form className="my-8 flex flex-col gap-4">
+        <Label>모집인원</Label>
+        <InputDropdown
+          {...register("numberOfPositions", { required: "모집 인원을 선택해주세요" })}
+          options={["1", "2", "3", "4", "5", "직접 입력"]}
+          errormessage={errors.numberOfPositions?.message as string}
+        />
+
+        <Label>성별</Label>
+        <InputDropdown
+          {...register("gender", { required: "성별을 선택해주세요" })}
+          options={["성별 무관", "남성", "여성", "직접 입력"]}
+          errormessage={errors.gender?.message as string}
+        />
+
+        <Label>학력</Label>
+        <InputDropdown
+          {...register("education", { required: "학력을 선택해주세요" })}
+          options={["고등학교 졸업", "대학교 졸업", "대학교 졸업 예정", "대학원 졸업", "학력 무관", "직접 입력"]}
+          errormessage={errors.education?.message as string}
+        />
+
+        <Label>연령</Label>
+        <InputDropdown
+          {...register("age", { required: "연령을 선택해주세요" })}
+          options={["10대", "20대", "30대", "40대", "50대", "60대", "연령 무관", "직접 입력"]}
+          errormessage={errors.age?.message as string}
+        />
+
+        <Label>우대사항</Label>
+        <InputDropdown
+          {...register("preferred", { required: "우대사항을 선택해주세요" })}
+          options={["유사 업무 경험 우대", "운전 가능", "직접 입력"]}
+          errormessage={errors.preferred?.message as string}
+        />
+      </form>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/(albaform)/addform/section/RecruitContentSection.tsx b/src/app/(pages)/(albaform)/addform/section/RecruitContentSection.tsx
new file mode 100644
index 00000000..95d1ad02
--- /dev/null
+++ b/src/app/(pages)/(albaform)/addform/section/RecruitContentSection.tsx
@@ -0,0 +1,102 @@
+"use client";
+import BaseInput from "@/app/components/input/text/BaseInput";
+import BaseTextArea from "@/app/components/input/textarea/BaseTextArea";
+import ImageInput from "@/app/components/input/file/ImageInput/ImageInput";
+import DatePickerInput from "@/app/components/input/dateTimeDaypicker/DatePickerInput";
+import { cn } from "@/lib/tailwindUtil";
+import { useFormContext } from "react-hook-form";
+import { useState } from "react";
+import Label from "../../component/Label";
+
+// 알바폼 만들기 - 사장님 - 1-모집내용
+
+export default function RecruitContentSection() {
+  // 이미지 파일을 로컬 상태에 저장
+  const [initialImageList, setInitialImageList] = useState<{ file: File; url: string; id: string }[]>([]);
+
+  //훅폼 하위 컴포넌트에서는 useFormcontext에서 메서드 호출
+  const {
+    register,
+    setValue,
+    formState: { errors },
+  } = useFormContext();
+
+  // 날짜 선택
+  const [recruitmentDateRange, setRecruitmentDateRange] = useState<[Date | null, Date | null]>([null, null]);
+  const handleRecruitmentDateChange = (dates: [Date | null, Date | null]) => {
+    setRecruitmentDateRange(dates);
+    const [start, end] = dates;
+    if (start) setValue("recruitmentStartDate", start.toISOString());
+    if (end) setValue("recruitmentEndDate", end.toISOString());
+  };
+
+  // 이미지 파일 change핸들러
+  const handleChangeImages = (files: File[]) => {
+    setValue("imageFiles", files);
+
+    const newImages = files.map((file: File) => ({
+      file,
+      url: URL.createObjectURL(file),
+      id: crypto.randomUUID(),
+    }));
+
+    setInitialImageList(newImages);
+  };
+
+  const errorTextStyle =
+    "absolute -bottom-[26px] right-1 text-[13px] text-sm font-medium leading-[22px] text-state-error lg:text-base lg:leading-[26px]";
+
+  return (
+    <div className="relative">
+      <form className="my-8 flex flex-col gap-4">
+        <Label>알바폼 제목</Label>
+        <BaseInput
+          {...register("title", { required: "제목을 입력해주세요" })}
+          type="text"
+          variant="white"
+          placeholder="제목을 입력해주세요."
+          errormessage={errors.title?.message as string}
+        />
+
+        <Label>소개글</Label>
+        <BaseTextArea
+          {...register("description", {
+            required: "자기소개를 입력해주세요",
+            maxLength: { value: 200, message: "최대 200자까지 입력 가능합니다." },
+          })}
+          variant="white"
+          placeholder="최대 200자까지 입력 가능합니다."
+          errormessage={errors.description?.message as string}
+        />
+
+        <div className="relative flex flex-col gap-2">
+          <Label>모집 기간</Label>
+          <DatePickerInput
+            startDateName="recruitmentStartDate"
+            endDateName="recruitmentEndDate"
+            startDate={recruitmentDateRange[0] || undefined}
+            endDate={recruitmentDateRange[1] || undefined}
+            onChange={handleRecruitmentDateChange}
+            required={true}
+            errormessage={!recruitmentDateRange[0] || !recruitmentDateRange[1]}
+            displayValue="recruitDateRange"
+          />
+          {!recruitmentDateRange[0] ||
+            (!recruitmentDateRange[1] && <p className={cn(errorTextStyle, "")}> 모집 기간은 필수입니다.</p>)}
+        </div>
+
+        <Label>이미지 첨부</Label>
+        <div>
+          <ImageInput
+            {...register("imageUrls", { required: "이미지는 필수입니다." })}
+            onChange={(files: File[]) => {
+              handleChangeImages(files);
+            }}
+            initialImageList={initialImageList}
+          />
+          {errors.imageUrls && <p className={cn(errorTextStyle, "")}>{errors.imageUrls.message as string}</p>}
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/(albaform)/addform/section/WorkConditionSection.tsx b/src/app/(pages)/(albaform)/addform/section/WorkConditionSection.tsx
new file mode 100644
index 00000000..ad343bba
--- /dev/null
+++ b/src/app/(pages)/(albaform)/addform/section/WorkConditionSection.tsx
@@ -0,0 +1,189 @@
+"use client";
+
+import { useFormContext } from "react-hook-form";
+import { useState, ChangeEvent, MouseEvent, useCallback, useEffect } from "react";
+import { cn } from "@/lib/tailwindUtil";
+import DatePickerInput from "@/app/components/input/dateTimeDaypicker/DatePickerInput";
+import TimePickerInput from "@/app/components/input/dateTimeDaypicker/TimePickerInput";
+import DayPickerList from "@/app/components/input/dateTimeDaypicker/DayPickerList";
+import BaseInput from "@/app/components/input/text/BaseInput";
+import CheckBtn from "@/app/components/button/default/CheckBtn";
+import formatMoney from "@/utils/formatMoney";
+import Label from "../../component/Label";
+import Script from "next/script";
+import LocationInput from "@/app/components/input/text/LocationInput";
+import { toast } from "react-hot-toast";
+
+// 알바폼 만들기 - 사장님 - 3-근무조건
+export default function WorkConditionSection() {
+  const {
+    register,
+    setValue,
+    trigger,
+    watch,
+    formState: { errors },
+  } = useFormContext();
+
+  // 근무 날짜 지정
+  const [workDateRange, setWorkDateRange] = useState<[Date | null, Date | null]>([null, null]);
+  const handleWorkDateChange = (dates: [Date | null, Date | null]) => {
+    setWorkDateRange(dates);
+    const [start, end] = dates;
+    if (start) setValue("workStartDate", start.toISOString());
+    if (end) setValue("workEndDate", end.toISOString());
+  };
+
+  //근무 시간 지정
+  const workStartTime = watch("workStartTime");
+  const workEndTime = watch("workEndTime");
+
+  //근무 요일 지정
+  const [selectedWorkDays, setSelectedWorkDays] = useState<string[]>([]);
+  const negotiable = watch("isNegotiableWorkDays");
+
+  const handleClickDay = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    const day = e.currentTarget.textContent;
+    if (day) {
+      if (selectedWorkDays.includes(day)) {
+        // 이미 선택한 요일을 클릭했을때
+        setSelectedWorkDays((prev) => prev.filter((d: string) => d !== day));
+      } else {
+        setSelectedWorkDays([...selectedWorkDays, day]);
+      }
+      setValue("workDays", [...selectedWorkDays, day]);
+      trigger("workDays");
+    }
+    if (negotiable) {
+      setSelectedWorkDays([]);
+    }
+  };
+
+  // 최저시급 상수 수정 (2025년 기준)
+  const MINIMUM_WAGE = 10030;
+
+  // 시급 상태 추가
+  const [displayWage, setDisplayWage] = useState<string>(formatMoney(MINIMUM_WAGE.toString()));
+
+  // 컴포넌트 마운트 시 최저시급으로 초기화
+  useEffect(() => {
+    setValue("hourlyWage", MINIMUM_WAGE);
+  }, [setValue]);
+
+  // 시급 변경 핸들러 수정
+  const handleWageChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value.replace(/,/g, "");
+    const numericValue = Number(value);
+    setValue("hourlyWage", numericValue);
+    setDisplayWage(formatMoney(value));
+  };
+
+  const errorTextStyle =
+    "absolute -bottom-[26px] right-1 text-[13px] text-sm font-medium leading-[22px] text-state-error lg:text-base lg:leading-[26px]";
+
+  // 주소 변경 핸들러만 유지
+  const handleAddressChange = useCallback(
+    (fullAddress: string) => {
+      setValue("location", fullAddress);
+      trigger("location");
+    },
+    [setValue, trigger]
+  );
+
+  return (
+    <div className="relative">
+      <Script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js" strategy="afterInteractive" />
+
+      <form className="my-8 flex flex-col gap-8">
+        <Label>근무 위치</Label>
+        <div className="relative">
+          <LocationInput
+            onAddressChange={handleAddressChange}
+            errormessage={errors.location?.message as string}
+            variant="white"
+            value={watch("location")}
+          />
+        </div>
+
+        <div className="relative flex flex-col gap-2">
+          <Label>근무 기간</Label>
+          <DatePickerInput
+            startDateName="workStartDate"
+            endDateName="workEndDate"
+            startDate={workDateRange[0] || undefined}
+            endDate={workDateRange[1] || undefined}
+            onChange={handleWorkDateChange}
+            required={true}
+            errormessage={!workDateRange[0] || !workDateRange[1]}
+            displayValue="workDateRange"
+          />
+          {!workDateRange[0] ||
+            (!workDateRange[1] && <p className={cn(errorTextStyle, "")}> 근무 기간은 필수입니다.</p>)}
+        </div>
+
+        <Label>근무 시간</Label>
+        <div className="relative flex gap-7 lg:gap-9">
+          <TimePickerInput
+            variant="white"
+            value={workStartTime}
+            {...register("workStartTime", { required: "근무 시작 시간을 선택해주세요" })}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              setValue("workStartTime", e.target.value, { shouldDirty: true });
+            }}
+          />
+          <TimePickerInput
+            variant="white"
+            value={workEndTime}
+            {...register("workEndTime", { required: "근무 시작 시간을 선택해주세요." })}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              setValue("workEndTime", e.target.value);
+            }}
+          />
+          {!errors.workStartDate ||
+            (!errors.workEndDate && !workStartTime && !workEndTime && (
+              <p className={cn(errorTextStyle, "")}>근무 시간을 선택해주세요.</p>
+            ))}
+        </div>
+
+        {/* 요일 협의 가능하다면 근무요일은 선택하지 않아도 됨 */}
+        <div className="flex flex-col gap-4">
+          <Label>근무 요일</Label>
+          <DayPickerList workDays={selectedWorkDays} onClick={handleClickDay} disabled={negotiable} />
+
+          <div className="relative flex flex-col pl-[14px]">
+            <CheckBtn
+              label="요일 협의 가능"
+              checked={watch("isNegotiableWorkDays")}
+              {...register("isNegotiableWorkDays")}
+            />
+            {selectedWorkDays.length === 0 && !negotiable && (
+              <p className={cn(errorTextStyle, "")}>근무 요일을 선택해주세요.</p>
+            )}
+          </div>
+        </div>
+        <div className="flex flex-col gap-4">
+          <Label>시급</Label>
+          <BaseInput
+            {...register("hourlyWage", {
+              required: "시급을 작성해주세요.",
+              min: {
+                value: MINIMUM_WAGE,
+                message: `최저시급(${formatMoney(MINIMUM_WAGE.toString())}원) 이상을 입력해주세요.`,
+              },
+            })}
+            value={displayWage}
+            onChange={handleWageChange}
+            variant="white"
+            afterString="원"
+            errormessage={errors.hourlyWage?.message as string}
+          />
+        </div>
+
+        <div className="relative flex flex-col gap-4">
+          <Label>공개 설정</Label>
+          <CheckBtn label="공개 설정" checked={watch("isPublic")} {...register("isPublic")} className="pl-[14px]" />
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/components/ApplyStatus.tsx b/src/app/(pages)/(albaform)/alba/[formId]/components/ApplyStatus.tsx
new file mode 100644
index 00000000..1f32a84b
--- /dev/null
+++ b/src/app/(pages)/(albaform)/alba/[formId]/components/ApplyStatus.tsx
@@ -0,0 +1,17 @@
+import ApplyStatusCard from "@/app/components/card/cardList/apply/ApplyStatusCard";
+import React from "react";
+
+interface ApplyStatusProps {
+  formId: number;
+}
+
+export default function ApplyStatus({ formId }: ApplyStatusProps) {
+  return (
+    <>
+      <div className="mt-20 space-y-6 border-t-2 pt-20 text-2xl">
+        <p className="text-3xl font-bold">지원 현황</p>
+        <ApplyStatusCard formId={formId} />
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/components/FormActions.tsx b/src/app/(pages)/(albaform)/alba/[formId]/components/FormActions.tsx
new file mode 100644
index 00000000..945d835f
--- /dev/null
+++ b/src/app/(pages)/(albaform)/alba/[formId]/components/FormActions.tsx
@@ -0,0 +1,86 @@
+"use client";
+import React, { useState } from "react"; // useState 추가
+import Link from "next/link";
+import { useUser } from "@/hooks/queries/user/me/useUser";
+import { FormDetailResponse } from "@/types/response/form";
+import FloatingBtn from "@/app/components/button/default/FloatingBtn";
+import { FaEdit } from "react-icons/fa";
+import { MdDeleteForever } from "react-icons/md";
+import { CiMemoPad } from "react-icons/ci";
+import axios from "axios";
+import toast from "react-hot-toast";
+import { useRouter } from "next/navigation";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
+import { HiMail } from "react-icons/hi";
+import { HiDocumentText } from "react-icons/hi";
+interface FormActionsProps {
+  formId: string | number;
+  albaFormDetailData: FormDetailResponse;
+}
+
+export default function FormActions({ formId, albaFormDetailData }: FormActionsProps) {
+  const { user } = useUser();
+  const router = useRouter();
+  const isMyAlbaForm = user?.id === albaFormDetailData.ownerId;
+  const isOwnerRole = user?.role === "OWNER";
+
+  const buttonStyle = "h-10 lg:h-16 w-full rounded-lg font-bold ";
+  const [isLoading, setIsLoading] = useState(false);
+
+  if (!user) return null;
+
+  const handleDelete = async () => {
+    setIsLoading(true);
+    try {
+      await axios.delete(`/api/forms/${formId}`);
+      toast.success("성공적으로 삭제되었습니다.");
+      router.push(`/albalist`);
+    } catch (error) {
+      console.error(error);
+      toast.error("삭제 중 오류가 발생했습니다.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // 사장님이면 수정하기/삭제하기 버튼
+  if (isOwnerRole) {
+    if (!isMyAlbaForm) return null;
+    return (
+      <div className="space-y-4 text-2xl">
+        <Link href={`/alba/${formId}/edit`}>
+          <FloatingBtn className={`${buttonStyle}`} icon={<FaEdit />} disabled={isLoading}>
+            {isLoading ? <DotLoadingSpinner /> : "수정하기"}
+          </FloatingBtn>
+        </Link>
+        <FloatingBtn
+          variant="white"
+          className={buttonStyle}
+          icon={<MdDeleteForever />}
+          onClick={handleDelete}
+          disabled={isLoading}
+        >
+          {isLoading ? <DotLoadingSpinner /> : "삭제하기"}
+        </FloatingBtn>
+      </div>
+    );
+  }
+
+  // 사장님이 아니면 지원하기/내 지원내역 보기 버튼
+  if (!isOwnerRole) {
+    return (
+      <div className="space-y-4 text-2xl">
+        <Link href={`/apply/${formId}`}>
+          <FloatingBtn className={`${buttonStyle} mb-4`} icon={<HiMail />}>
+            {isLoading ? <DotLoadingSpinner /> : "지원하기"}
+          </FloatingBtn>
+        </Link>
+        <Link href={`/myapply/${formId}`}>
+          <FloatingBtn variant="white" className={buttonStyle} icon={<HiDocumentText />}>
+            {isLoading ? <DotLoadingSpinner /> : "내 지원내역 보기"}
+          </FloatingBtn>
+        </Link>
+      </div>
+    );
+  }
+}
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/components/FormDetail.tsx b/src/app/(pages)/(albaform)/alba/[formId]/components/FormDetail.tsx
new file mode 100644
index 00000000..a766e461
--- /dev/null
+++ b/src/app/(pages)/(albaform)/alba/[formId]/components/FormDetail.tsx
@@ -0,0 +1,34 @@
+import { FormDetailResponse } from "@/types/response/form";
+import React from "react";
+import toast from "react-hot-toast";
+
+interface FormDetailsProps {
+  albaFormDetailData: FormDetailResponse;
+}
+
+export default function FormDetails({ albaFormDetailData }: FormDetailsProps) {
+  const handleCopyLocation = () => {
+    navigator.clipboard.writeText(albaFormDetailData.location);
+    toast.success("근무지역이 복사되었습니다.");
+  };
+
+  return (
+    <>
+      <div className="mb-4 flex items-end gap-4">
+        <span className="text-lg text-black-400 underline lg:text-2xl">{albaFormDetailData.storeName || "가게명"}</span>
+        <span className="text-md text-grayscale-500 lg:text-xl">{albaFormDetailData.location || "위치"}</span>
+      </div>
+      <p className="text-3xl font-bold">{albaFormDetailData.title}</p>
+      <div className="space-y-32">
+        <div className="whitespace-pre-wrap text-2xl">{albaFormDetailData.description}</div>
+        <p className="text-3xl font-bold">근무 지역</p>
+      </div>
+      <div className="flex space-x-5 text-2xl">
+        <p>{albaFormDetailData.location}</p>
+        <button type="button" className="text-xl text-primary-orange-300" onClick={handleCopyLocation}>
+          복사
+        </button>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/components/FormHeader.tsx b/src/app/(pages)/(albaform)/alba/[formId]/components/FormHeader.tsx
new file mode 100644
index 00000000..e5d1574c
--- /dev/null
+++ b/src/app/(pages)/(albaform)/alba/[formId]/components/FormHeader.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import Chip from "@/app/components/chip/Chip";
+import { FormDetailResponse } from "@/types/response/form";
+import { formatDateTime } from "@/utils/formatters";
+
+interface FormHeaderProps {
+  albaFormDetailData: FormDetailResponse;
+}
+
+export default function FormHeader({ albaFormDetailData }: FormHeaderProps) {
+  const recruitmentStatus = new Date(albaFormDetailData.recruitmentEndDate) > new Date() ? "모집중" : "모집완료";
+  return (
+    <div className="flex items-center">
+      <Chip
+        label={albaFormDetailData.isPublic ? "공개" : "비공개"}
+        variant={albaFormDetailData.isPublic ? "positive" : "negative"}
+      />
+      <Chip label={recruitmentStatus} variant="positive" />
+      <p className="ml-2 text-lg text-grayscale-500">
+        {formatDateTime(albaFormDetailData.createdAt.toLocaleString())} 등록
+      </p>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/components/FormImage.tsx b/src/app/(pages)/(albaform)/alba/[formId]/components/FormImage.tsx
new file mode 100644
index 00000000..b8a9a9c4
--- /dev/null
+++ b/src/app/(pages)/(albaform)/alba/[formId]/components/FormImage.tsx
@@ -0,0 +1,41 @@
+import Image from "next/image";
+import Indicator from "@/app/components/pagination/Indicator";
+import { isValidS3Url } from "@/utils/checkS3Url";
+
+interface FormImageProps {
+  imageUrls: string[];
+  currentPage: number;
+  onPageChange: (page: number) => void;
+}
+
+export default function FormImage({ imageUrls, currentPage, onPageChange }: FormImageProps) {
+  return (
+    <div className="relative flex h-[300px] justify-center lg:h-[562px]">
+      {/* 이미지 표시 */}
+      {imageUrls?.map((imageUrl, index) => (
+        <div
+          key={imageUrl}
+          className={`absolute h-full w-auto transition-opacity duration-300 ${
+            index === currentPage ? "opacity-100" : "opacity-0"
+          }`}
+        >
+          <Image
+            src={imageUrl}
+            alt={`알바 이미지 ${index + 1}`}
+            width={1200}
+            height={800}
+            className="h-full w-full object-cover"
+            priority={index === 0}
+          />
+        </div>
+      ))}
+
+      {/* 인디케이터 */}
+      {imageUrls.filter((url) => isValidS3Url(url)).length > 1 && (
+        <div className="absolute bottom-4 left-1/2 -translate-x-1/2">
+          <Indicator imageCount={imageUrls?.length ?? 0} currentPage={currentPage} onPageChange={onPageChange} />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/components/RecruitInformation.tsx b/src/app/(pages)/(albaform)/alba/[formId]/components/RecruitInformation.tsx
new file mode 100644
index 00000000..c346ef01
--- /dev/null
+++ b/src/app/(pages)/(albaform)/alba/[formId]/components/RecruitInformation.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import RecruitDetail from "@/app/components/card/cardList/RecruitDetail";
+import RecruitIcon from "@/app/components/card/cardList/RecruitIcon";
+import RecruitCondition from "@/app/components/card/cardList/RecruitCondition";
+import { FormDetailResponse } from "@/types/response/form";
+import FormActions from "./FormActions";
+
+interface RecruitInformationProps {
+  albaFormDetailData: FormDetailResponse;
+  formId: number;
+}
+
+export default function RecruitInformation({ albaFormDetailData, formId }: RecruitInformationProps) {
+  const recruitmentDetails = {
+    hourlyWage: albaFormDetailData.hourlyWage,
+    recruitmentStartDate: new Date(albaFormDetailData.recruitmentStartDate),
+    recruitmentEndDate: new Date(albaFormDetailData.recruitmentEndDate),
+    isNegotiableWorkDays: albaFormDetailData.isNegotiableWorkDays,
+    workDays: albaFormDetailData.workDays,
+    workStartTime: albaFormDetailData.workStartTime,
+    workEndTime: albaFormDetailData.workEndTime,
+  };
+
+  return (
+    <div className="flex flex-col gap-10 lg:pl-6">
+      <RecruitIcon {...recruitmentDetails} />
+      <RecruitDetail recruitData={albaFormDetailData} />
+      <div className="flex flex-col gap-6">
+        <span className="text-3xl font-bold">모집 조건</span>
+        <RecruitCondition recruitData={albaFormDetailData} />
+      </div>
+      <div>
+        <div className="hidden lg:block">
+          <FormActions formId={formId} albaFormDetailData={albaFormDetailData} />
+        </div>
+        <div className="block lg:hidden">
+          <FormActions formId={formId} albaFormDetailData={albaFormDetailData} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/edit/page.tsx b/src/app/(pages)/(albaform)/alba/[formId]/edit/page.tsx
new file mode 100644
index 00000000..8e319f06
--- /dev/null
+++ b/src/app/(pages)/(albaform)/alba/[formId]/edit/page.tsx
@@ -0,0 +1,247 @@
+"use client";
+// 알바폼 수정 페이지 (사장님)
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { FormProvider, useForm } from "react-hook-form";
+import axios from "axios";
+import TabMenuDropdown from "@/app/components/button/dropdown/TabMenuDropdown";
+import Button from "@/app/components/button/default/Button";
+import { toast } from "react-hot-toast";
+import { useMutation } from "@tanstack/react-query";
+import { useUpdateProfile } from "@/hooks/queries/user/me/useUpdateProfile";
+import RecruitContentSection from "../../../addform/section/RecruitContentSection";
+import RecruitConditionSection from "../../../addform/section/RecruitConditionSection";
+import WorkConditionSection from "../../../addform/section/WorkConditionSection";
+import { SubmitFormDataType } from "@/types/addform";
+import useEditing from "@/hooks/useEditing";
+import useFormDetail from "@/hooks/queries/form/detail/useFormDetail";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+import formatMoney from "@/utils/formatMoney";
+import tempSave from "@/utils/tempSave";
+
+export default function EditFormPage() {
+  const router = useRouter();
+  const [formIdState, setFormIdState] = useState<number>(0);
+  const formId = useParams().formId;
+
+  useEffect(() => {
+    // formId가 문자열로 전달되므로 숫자로 변환하여 상태에 저장
+    if (formId) {
+      setFormIdState(Number(formId)); // formId를 숫자로 변환하여 상태에 저장
+    }
+  }, [formId]);
+
+  const { albaFormDetailData, isLoading, error } = useFormDetail({ formId: formIdState });
+
+  const methods = useForm<SubmitFormDataType>({
+    mode: "onChange",
+  });
+
+  const {
+    reset,
+    setValue,
+    handleSubmit,
+    formState: { isDirty, isValid },
+  } = methods;
+
+  // 훅폼에서 관리하는 전체 데이터를 가져오는 함수
+  const currentValues: SubmitFormDataType = methods.watch();
+  const imageFiles = currentValues.imageFiles;
+  // 탭 선택 옵션 관리
+  const [selectedOption, setSelectedOption] = useState("모집 내용");
+  // 이미지 업로드 훅
+  const { uploadImageMutation } = useUpdateProfile();
+  // 각각의 탭 작성중 여부
+  const { isEditingRecruitContent, isEditingRecruitCondition, isEditingWorkCondition } = useEditing(currentValues);
+
+  // 비동기 데이터로 폼 상태 업데이트
+  useEffect(() => {
+    if (albaFormDetailData) {
+      reset({
+        isPublic: albaFormDetailData.isPublic,
+        hourlyWage: formatMoney(String(albaFormDetailData.hourlyWage)), // 쉼표 추가하기
+        isNegotiableWorkDays: albaFormDetailData.isNegotiableWorkDays,
+        workDays: albaFormDetailData.workDays,
+        workEndTime: albaFormDetailData.workEndTime,
+        workStartTime: albaFormDetailData.workStartTime,
+        workEndDate: albaFormDetailData.workEndDate, // display값에 반영하기
+        workStartDate: albaFormDetailData.workStartDate,
+        location: albaFormDetailData.location,
+        preferred: albaFormDetailData.preferred, //value 반영하기
+        age: albaFormDetailData.age, //value 반영하기
+        education: albaFormDetailData.education, //value 반영하기
+        gender: albaFormDetailData.gender, //value 반영하기
+        numberOfPositions: albaFormDetailData.numberOfPositions, //value 반영하기
+        recruitmentEndDate: albaFormDetailData.recruitmentEndDate, // display값에 반영하기
+        recruitmentStartDate: albaFormDetailData.recruitmentStartDate,
+        description: albaFormDetailData.description,
+        title: albaFormDetailData.title,
+        imageUrls: albaFormDetailData.imageUrls, // 프리뷰 반영하기
+      });
+    }
+  }, [albaFormDetailData, reset]);
+
+  // 이미지 업로드 api
+  const uploadImages = async (files: File[]) => {
+    if (currentValues.imageUrls.length !== currentValues.imageFiles.length) {
+      const uploadedUrls: string[] = [];
+
+      // 전체 파일 배열을 순회하면서 업로드 로직 진행
+      for (const file of files) {
+        // 파일 크기 체크
+        const maxSize = 5 * 1024 * 1024; // 5MB
+        if (file.size > maxSize) {
+          toast.error(`5MB 이상의 파일은 업로드할 수 없습니다.`);
+          continue;
+        }
+        const formData = new FormData();
+        formData.append("image", file);
+        try {
+          const uploadResponse = await uploadImageMutation.mutateAsync(file);
+          if (uploadResponse?.url) {
+            uploadedUrls.push(uploadResponse.url);
+          }
+        } catch (uploadError) {
+          console.error(`파일 ${file.name} 업로드 실패:`, uploadError);
+        }
+      }
+      return uploadedUrls;
+    } else {
+      return currentValues.imageUrls;
+    }
+  };
+
+  // 폼데이터 임시 저장 함수
+  const onTempSave = async () => {
+    // 이미지 처리 로직
+    if (imageFiles && imageFiles.length > 0) {
+      try {
+        const uploadedUrls = await uploadImages(Array.from(imageFiles));
+        if (uploadedUrls && uploadedUrls.length > 0) {
+          setValue("imageUrls", [...uploadedUrls]);
+        } else {
+          setValue("imageUrls", [...currentValues.imageUrls]);
+        }
+      } catch (error) {
+        console.error("임시저장 - 이미지 업로드 중 오류 발생:", error);
+        setValue("imageUrls", []);
+      }
+    }
+    tempSave("addformData", currentValues);
+  };
+
+  // 수정된 폼 제출 리액트쿼리
+  const mutation = useMutation({
+    mutationFn: async () => {
+      const excludedKeys = ["displayDate", "workDateRange", "recruitDateRange", "imageFiles"];
+
+      // 원하는 필드만 포함된 새로운 객체 만들기
+      const filteredData = Object.entries(currentValues)
+        .filter(([key]) => !excludedKeys.includes(key)) // 제외할 키를 필터링
+        .reduce((acc: Partial<SubmitFormDataType>, [key, value]) => {
+          if (key === "numberOfPositions") {
+            // numberOfPositions는 숫자형으로 변환
+            acc[key] = Number(value);
+          } else if (key === "hourlyWage") {
+            // hourlyWage는 쉼표를 제거하고 숫자형으로 변환
+            if (value.includes(",")) acc[key] = String(Number(value.replaceAll(/,/g, ""))); // 쉼표 제거 후 숫자형 변환
+          } else {
+            acc[key as keyof SubmitFormDataType] = value; // 나머지 값은 그대로 추가
+          }
+          return acc;
+        }, {});
+      await axios.patch(`/api/forms/${formId}`, filteredData);
+    },
+    onSuccess: () => {
+      if (typeof window !== "undefined") {
+        window.localStorage.removeItem("tempAddFormData");
+      }
+      toast.success("알바폼을 수정했습니다.");
+      router.push(`/alba/${formId}`);
+    },
+    onError: (error) => {
+      console.error("에러가 발생했습니다.", error);
+      toast.error("에러가 발생했습니다.");
+    },
+  });
+
+  // tab 선택 시 Url params 수정 & 하위 폼 데이터 임시저장
+  const searchParams = useSearchParams();
+  const currentParam = searchParams.get("tab");
+  const [prevOption, setPrevOption] = useState<string | null>(null);
+  const initialLoad = currentParam === null; // 초기 로딩 여부 확인
+
+  const handleOptionChange = async (option: string) => {
+    onTempSave();
+    setSelectedOption(option);
+    if (!initialLoad && option !== currentParam && option !== prevOption && isDirty) {
+      setPrevOption(option);
+    }
+    const params = {
+      "모집 내용": "recruit-content",
+      "모집 조건": "recruit-condition",
+      "근무 조건": "work-condition",
+    }[option];
+    router.push(`/alba/${formId}/edit?tab=${params}`);
+  };
+
+  const renderChildren = () => {
+    switch (selectedOption) {
+      case "모집 내용":
+        return <RecruitContentSection key="recruitContent" />;
+      case "모집 조건":
+        return <RecruitConditionSection key="recruitCondition" />;
+      case "근무 조건":
+        return <WorkConditionSection key="workCondition" />;
+      default:
+        return <></>;
+    }
+  };
+
+  if (isLoading)
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    );
+
+  if (error) {
+    return <div>Error: 데이터를 불러오는데 문제가 발생했습니다.</div>;
+  }
+
+  return (
+    <FormProvider {...methods}>
+      <div className="relative">
+        <aside className="flex flex-col items-center justify-between rounded-[24px] bg-background-200 lg:fixed lg:left-[108px] lg:top-[64px] lg:m-10 lg:h-[80vh] lg:p-10">
+          <TabMenuDropdown
+            options={[
+              {
+                label: "모집 내용",
+                isEditing: isEditingRecruitContent || initialLoad || currentParam === "recruit-content",
+              },
+              { label: "모집 조건", isEditing: isEditingRecruitCondition || currentParam === "recruit-condition" },
+              { label: "근무 조건", isEditing: isEditingWorkCondition || currentParam === "work-condition" },
+            ]}
+            onChange={handleOptionChange}
+            currentParam={currentParam || ""}
+          />
+          <div className="absolute -bottom-[120px] mb-10 flex w-[320px] lg:relative lg:bottom-0 lg:w-full">
+            <Button
+              type="submit"
+              variant="solid"
+              width="md"
+              color="orange"
+              className="h-[58px] w-full lg:h-[72px] lg:text-xl lg:leading-8"
+              disabled={!isValid}
+              onClick={handleSubmit(() => mutation.mutate())}
+            >
+              수정하기
+            </Button>
+          </div>
+        </aside>
+        {renderChildren()}
+      </div>
+    </FormProvider>
+  );
+}
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/page.tsx b/src/app/(pages)/(albaform)/alba/[formId]/page.tsx
new file mode 100644
index 00000000..68f62233
--- /dev/null
+++ b/src/app/(pages)/(albaform)/alba/[formId]/page.tsx
@@ -0,0 +1,141 @@
+"use client";
+// 알바폼 상세 페이지
+import { useParams } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import { useUser } from "@/hooks/queries/user/me/useUser";
+import { useFormDetail } from "@/hooks/queries/form/detail/useFormDetail";
+import { Map, MapMarker, useKakaoLoader } from "react-kakao-maps-sdk";
+import Script from "next/script";
+import FormHeader from "./components/FormHeader";
+import FormDetails from "./components/FormDetail";
+import RecruitInformation from "./components/RecruitInformation";
+import ApplyStatus from "./components/ApplyStatus";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+import FormImage from "./components/FormImage";
+import ScrapBtn from "@/app/components/button/default/ScrapBtn";
+import { IoShareSocialSharp } from "react-icons/io5";
+import ExpandedFloatingBtn from "@/app/components/button/default/ExpandedFloatingBtn";
+
+interface Coords {
+  lat: number;
+  lng: number;
+}
+
+declare global {
+  interface Window {
+    Kakao: any;
+    kakao: any;
+  }
+}
+
+export default function AlbaFormDetailPage() {
+  const { formId } = useParams();
+  const [formIdState, setFormIdState] = useState<number>(0);
+  const [currentPage, setCurrentPage] = useState<number>(0);
+  const { user } = useUser();
+
+  // 카카오맵 관련 상태
+  const [coords, setCoords] = useState<Coords>({ lat: 37.5665, lng: 126.978 });
+  const [loading, error] = useKakaoLoader({
+    appkey: process.env.NEXT_PUBLIC_KAKAO_APP_KEY as string,
+    libraries: ["services"],
+  });
+
+  // 카카오 SDK 초기화
+  useEffect(() => {
+    if (window.Kakao && !window.Kakao.isInitialized()) {
+      window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_APP_KEY);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (formId) {
+      setFormIdState(Number(formId));
+    }
+  }, [formId]);
+
+  const { albaFormDetailData, isLoading } = useFormDetail({ formId: formIdState });
+  const isOwner = user?.role === "OWNER";
+  const isAuthor = user?.id === albaFormDetailData?.ownerId;
+
+  // 주소로 좌표 검색
+  useEffect(() => {
+    if (!albaFormDetailData?.location) return;
+
+    if (typeof window === "undefined" || !window.kakao?.maps?.services) return;
+
+    const geocoder = new window.kakao.maps.services.Geocoder();
+    geocoder.addressSearch(albaFormDetailData.location, (result: any[], status: string) => {
+      if (status === window.kakao.maps.services.Status.OK && result.length > 0) {
+        const { x, y } = result[0];
+        setCoords({ lat: parseFloat(y), lng: parseFloat(x) });
+      }
+    });
+  }, [albaFormDetailData?.location]);
+
+  // 사용자 데이터가 로딩 중인지 확인
+  if (!user) {
+    return <LoadingSpinner />;
+  }
+
+  if (isLoading)
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    );
+
+  return (
+    <div className="container flex min-h-screen flex-col px-4 lg:px-0">
+      {/* 카카오 공유 스트립트 */}
+      <Script src="https://developers.kakao.com/sdk/js/kakao.min.js" strategy="beforeInteractive" />
+      {/* 사진영역 */}
+      {albaFormDetailData && (
+        <FormImage
+          imageUrls={albaFormDetailData.imageUrls}
+          currentPage={currentPage}
+          onPageChange={(page) => setCurrentPage(page)}
+        />
+      )}
+      <div className="mt-4 flex flex-col justify-between lg:mt-20 lg:flex-row">
+        {/* 왼쪽 영역 */}
+        <div className="w-full space-y-10 lg:w-[770px]">
+          {albaFormDetailData && (
+            <>
+              <FormHeader albaFormDetailData={albaFormDetailData} />
+              <FormDetails albaFormDetailData={albaFormDetailData} />
+            </>
+          )}
+          {/* 카카오맵 스크립트 */}
+          <Script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js" strategy="afterInteractive" />
+
+          {/* 지도 영역 */}
+          <div className="h-[280px] lg:h-[320px]">
+            {error && <div className="text-red-500">Map load error: {String(error)}</div>}
+            {!loading && !error && albaFormDetailData && (
+              <Map center={coords} style={{ width: "100%", height: "100%" }} level={3}>
+                <MapMarker position={coords}>
+                  <div className="whitespace-nowrap p-2 text-center">
+                    <p className="">{albaFormDetailData.storeName}</p>
+                  </div>
+                </MapMarker>
+              </Map>
+            )}
+          </div>
+        </div>
+
+        {/* 오른쪽 영역 */}
+        <div className="flex w-full flex-col space-y-12 lg:w-[640px]">
+          {albaFormDetailData && <RecruitInformation albaFormDetailData={albaFormDetailData} formId={formIdState} />}
+        </div>
+      </div>
+      {/* 지원 현황 */}
+      {isOwner && isAuthor && <ApplyStatus formId={formIdState} />}
+
+      <div className="fixed right-10 top-1/2 flex flex-col items-end gap-5">
+        <ScrapBtn formId={formIdState} />
+        <ExpandedFloatingBtn icon={<IoShareSocialSharp />} variant="orange" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/(albaform)/apply/[formId]/page.tsx b/src/app/(pages)/(albaform)/apply/[formId]/page.tsx
new file mode 100644
index 00000000..ffa9dc0e
--- /dev/null
+++ b/src/app/(pages)/(albaform)/apply/[formId]/page.tsx
@@ -0,0 +1,230 @@
+"use client";
+import BaseInput from "@/app/components/input/text/BaseInput";
+import BaseTextArea from "@/app/components/input/textarea/BaseTextArea";
+import UploadInput from "@/app/components/input/file/UploadInput";
+import Button from "@/app/components/button/default/Button";
+import { useForm } from "react-hook-form";
+import { cn } from "@/lib/tailwindUtil";
+import axios from "axios";
+import toast from "react-hot-toast";
+import { useParams, useRouter } from "next/navigation";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import Label from "../../component/Label";
+import uploadResume from "@/utils/uploadResume";
+import tempSave from "@/utils/tempSave";
+interface ApplyFormData {
+  name: string;
+  phoneNumber: string;
+  experienceMonths: number;
+  resume: FileList;
+  introduction: string;
+  password: string;
+  resumeId: number;
+  resumeName: string;
+}
+// 알바폼 만들기 - 지원자 (지원하기)
+export default function Apply() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid, isDirty },
+    trigger,
+    clearErrors,
+    getValues,
+    setValue,
+  } = useForm<ApplyFormData>({
+    mode: "onChange",
+    defaultValues: {
+      name: "",
+      phoneNumber: "",
+      experienceMonths: 0,
+      resumeId: 0,
+      resumeName: "",
+      introduction: "",
+      password: "",
+    },
+  });
+
+  const formId = useParams().formId;
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  const onTempSave = async () => {
+    try {
+      const values = getValues();
+      const uploadedResume = await uploadResume(values.resume);
+      setValue("resumeId", uploadedResume.resumeId);
+      setValue("resumeName", uploadedResume.resumeName);
+    } catch (error) {
+      console.error("Error uploading resume:", error);
+      toast.error("이력서 업로드에 실패했습니다.");
+    }
+  };
+
+  // 폼 제출 리액트쿼리
+  const mutation = useMutation({
+    mutationFn: async () => {
+      // 이력서 업로드 및 임시저장 먼저 수행
+      await onTempSave();
+
+      // 최신 값을 가져오기
+      const values = getValues();
+      const { resume, ...submitData } = values;
+
+      const response = await axios.post(`/api/forms/${formId}/applications`, submitData);
+      return response.data;
+    },
+
+    onSuccess: () => {
+      // 로컬 스토리지 데이터 삭제
+      if (typeof window !== "undefined") {
+        window.localStorage.removeItem("tempAddFormData");
+      }
+
+      // 내 지원서 목록 캐시 무효화
+      queryClient.invalidateQueries({ queryKey: ["myApplications"] });
+
+      toast.success("지원이 완료되었습니다.");
+      router.push("/myalbaform");
+    },
+
+    onError: (error) => {
+      console.error("지원하기에 실패했습니다.", error);
+      toast.error("지원하기에 실패했습니다.");
+      // 에러 발생 시 자동으로 임시저장
+      onTempSave();
+    },
+  });
+
+  const errorTextStyle =
+    "absolute -bottom-[26px] right-1 text-[13px] text-sm font-medium leading-[22px] text-state-error lg:text-base lg:leading-[26px]";
+
+  return (
+    <form className="my-8 flex flex-col gap-4" onSubmit={handleSubmit(() => mutation.mutate())}>
+      <Label>이름</Label>
+      <BaseInput
+        {...register("name", { required: "이름은 필수입니다" })}
+        type="text"
+        variant="white"
+        placeholder="이름을 입력해주세요."
+        errormessage={errors.name?.message}
+      />
+
+      <Label>연락처</Label>
+      <BaseInput
+        {...register("phoneNumber", {
+          required: "연락처는 필수입니다",
+          pattern: {
+            value: /^[0-9]+$/,
+            message: "숫자만 입력해주세요",
+          },
+        })}
+        type="text"
+        variant="white"
+        placeholder="숫자만 입력해주세요"
+        errormessage={errors.phoneNumber?.message}
+      />
+
+      <Label>경력(개월 수)</Label>
+      <BaseInput
+        {...register("experienceMonths", {
+          required: "경력은 필수입니다",
+        })}
+        type="number"
+        variant="white"
+        placeholder="숫자만 입력해주세요"
+        errormessage={errors.experienceMonths?.message}
+      />
+
+      <div className="relative flex w-full flex-col gap-4">
+        <Label>이력서</Label>
+        <UploadInput
+          {...register("resume", {
+            required: "이력서를 업로드해주세요.",
+            validate: (file: FileList) => {
+              if (!file) {
+                return "이력서는 필수입니다";
+              }
+              const allowedTypes = [
+                "application/pdf",
+                "application/msword",
+                "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+              ];
+              if (!allowedTypes.includes(file[0].type)) {
+                return "PDF 또는 Word 문서만 업로드 가능합니다.";
+              }
+              return true;
+            },
+            onChange: (e) => {
+              if (e.target.files) {
+                clearErrors("resume");
+              }
+              trigger("resume");
+            },
+          })}
+          accept=".pdf,.doc,.docx"
+          variant="upload"
+          placeholder="파일 업로드하기"
+        />
+        {errors.resume && <p className={cn(errorTextStyle, "")}>{errors.resume.message}</p>}
+      </div>
+
+      <Label>자기소개</Label>
+      <BaseTextArea
+        {...register("introduction", {
+          required: "자기소개를 입력해주세요",
+          maxLength: { value: 200, message: "최대 200자까지 입력 가능합니다." },
+        })}
+        variant="white"
+        placeholder="최대 200자까지 입력 가능합니다."
+        errormessage={errors.introduction?.message}
+      />
+
+      <div className="relative">
+        <Label>비밀번호</Label>
+        <div className="absolute right-0 top-0 mt-[6px] text-xs font-normal leading-[18px] text-grayscale-400">
+          지원내역 확인에 사용됩니다.
+        </div>
+      </div>
+      <div>
+        <BaseInput
+          {...register("password", {
+            required: "비밀번호는 필수입니다.",
+            minLength: { value: 8, message: "8자리 이상 입력해주세요." },
+            pattern: {
+              value: /^([a-z]|[A-Z]|[0-9]|[!@#$%^&*])+$/,
+              message: "영문, 숫자, 특수문자 조합으로 입력해주세요.",
+            },
+          })}
+          type="password"
+          variant="white"
+          placeholder="비밀번호를 입력해주세요."
+          errormessage={errors.password?.message}
+        />
+      </div>
+      <div className="lg:flex-2 mt-4 flex w-full flex-col gap-[10px] lg:mt-8 lg:flex-row">
+        <Button
+          type="button"
+          variant="outlined"
+          width="md"
+          color="orange"
+          className="h-[58px] w-full border lg:h-[72px] lg:text-xl lg:leading-8"
+          onClick={onTempSave}
+          disabled={!isDirty}
+        >
+          임시 저장
+        </Button>
+        <Button
+          type="submit"
+          variant="solid"
+          width="md"
+          color="orange"
+          className="h-[58px] w-full lg:h-[72px] lg:text-xl lg:leading-8"
+          disabled={!isValid || !isDirty}
+        >
+          작성 완료
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/src/app/(pages)/(albaform)/component/ApplyHeader.tsx b/src/app/(pages)/(albaform)/component/ApplyHeader.tsx
new file mode 100644
index 00000000..460a9107
--- /dev/null
+++ b/src/app/(pages)/(albaform)/component/ApplyHeader.tsx
@@ -0,0 +1,14 @@
+import Button from "@/app/components/button/default/Button";
+
+const ApplyHeader = ({ title, onCancel }: { title: string; onCancel: () => void }) => {
+  return (
+    <div className="flex w-full items-center justify-between pb-5">
+      <h1 className="text-xl font-semibold leading-5 text-black-500 lg:text-[32px] lg:leading-[46px]">{title}</h1>
+      <Button className="h-10 text-grayscale-50" color="gray" width="xs" onClick={onCancel}>
+        작성 취소
+      </Button>
+    </div>
+  );
+};
+
+export default ApplyHeader;
diff --git a/src/app/(pages)/(albaform)/component/Label.tsx b/src/app/(pages)/(albaform)/component/Label.tsx
new file mode 100644
index 00000000..fbf3156f
--- /dev/null
+++ b/src/app/(pages)/(albaform)/component/Label.tsx
@@ -0,0 +1,27 @@
+import { cn } from "@/lib/tailwindUtil";
+import { ReactNode } from "react";
+
+const Label = ({
+  children,
+  required = true,
+  className,
+}: {
+  children: ReactNode;
+  required?: boolean;
+  className?: string;
+}) => {
+  return (
+    <div className={cn("flex items-baseline gap-[2px]", className)}>
+      <span className="text-sm font-medium leading-6 text-black-400 lg:text-xl lg:leading-8 lg:text-black-300">
+        {children}
+      </span>
+      {required && (
+        <span className="items-baseline pt-[2px] text-sm font-normal leading-6 text-primary-orange-300 lg:text-xl lg:leading-8">
+          *
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default Label;
diff --git a/src/app/(pages)/(albaform)/layout.tsx b/src/app/(pages)/(albaform)/layout.tsx
new file mode 100644
index 00000000..fc018f1f
--- /dev/null
+++ b/src/app/(pages)/(albaform)/layout.tsx
@@ -0,0 +1,74 @@
+"use client";
+import { ReactNode, Suspense } from "react";
+import { cn } from "@/lib/tailwindUtil";
+import ApplyHeader from "./component/ApplyHeader";
+import useModalStore from "@/store/modalStore";
+import { usePathname, useRouter } from "next/navigation";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+
+export default function Layout({ children }: { children: ReactNode }) {
+  const { openModal } = useModalStore();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const formPath = ["edit", "addform", "apply"];
+  //formPath 배열의 원소 중 포함되는게 있는지 여부 확인
+
+  const isForm: boolean = pathname.split("/").some((path) => formPath.includes(path));
+  const isFormWithTab: boolean = pathname.split("/").some((path) => path === "addform" || path === "edit");
+  const title = pathname.split("/").includes("apply") && isForm ? "알바폼 지원하기" : "알바폼 만들기";
+
+  // 폼 작성 페이지 레이아웃
+  const FormStyle = cn(
+    "mx-auto my-10 w-[327px] pb-[70px] lg:w-[680px] lg:pb-0 lg:pl-10",
+    isFormWithTab ? "lg:ml-[600px]" : ""
+  );
+
+  // 상세 페이지 레이아웃
+  const DetailStyle = "mx-auto max-w-screen-xl  px-4 py-4 sm:px-6 md:py-8";
+
+  return (
+    <div className={cn(isForm ? FormStyle : DetailStyle)}>
+      {isForm && (
+        <ApplyHeader
+          title={title}
+          onCancel={() =>
+            openModal("customForm", {
+              isOpen: true,
+              title: "폼 작성 취소",
+              content: "작성을 취소하시겠습니까?",
+              onConfirm: () => {
+                openModal("customForm", {
+                  isOpen: false,
+                  title: "",
+                  content: "",
+                  onConfirm: () => {},
+                  onCancel: () => {},
+                });
+                router.back();
+              },
+              onCancel: () => {
+                openModal("customForm", {
+                  isOpen: false,
+                  title: "",
+                  content: "",
+                  onConfirm: () => {},
+                  onCancel: () => {},
+                });
+              },
+            })
+          }
+        />
+      )}
+      <Suspense
+        fallback={
+          <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+            <LoadingSpinner />
+          </div>
+        }
+      >
+        {children}
+      </Suspense>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/albaList/layout.tsx b/src/app/(pages)/albaList/layout.tsx
new file mode 100644
index 00000000..9c07cced
--- /dev/null
+++ b/src/app/(pages)/albaList/layout.tsx
@@ -0,0 +1,18 @@
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+import { Suspense } from "react";
+
+export default function AlbaListLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 py-8">
+      <Suspense
+        fallback={
+          <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+            <LoadingSpinner />
+          </div>
+        }
+      >
+        {children}
+      </Suspense>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/albaList/page.tsx b/src/app/(pages)/albaList/page.tsx
index cc655d8a..8f1e70b1 100644
--- a/src/app/(pages)/albaList/page.tsx
+++ b/src/app/(pages)/albaList/page.tsx
@@ -1,5 +1,175 @@
 "use client";
 
+import React, { useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+import { useForms } from "@/hooks/queries/form/useForms";
+import FilterDropdown from "@/app/components/button/dropdown/FilterDropdown";
+import { filterRecruitingOptions } from "@/constants/filterOptions";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+import SortSection from "@/app/components/layout/forms/SortSection";
+import AlbaListItem from "@/app/components/card/cardList/AlbaListItem";
+import SearchSection from "@/app/components/layout/forms/SearchSection";
+import { useUser } from "@/hooks/queries/user/me/useUser";
+import Link from "next/link";
+import { IoAdd } from "react-icons/io5";
+import { userRoles } from "@/constants/userRoles";
+import FloatingBtn from "@/app/components/button/default/FloatingBtn";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+import ContentSection from "@/app/components/layout/ContentSection";
+
+const FORMS_PER_PAGE = 10;
+
 export default function AlbaList() {
-  return <div>AlbaList</div>;
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const { user } = useUser();
+  const isOwner = user?.role === userRoles.OWNER;
+
+  // URL 쿼리 파라미터에서 필터 상태와 키워드 가져오기
+  const isRecruiting = searchParams.get("isRecruiting");
+  const keyword = searchParams.get("keyword");
+  const orderBy = searchParams.get("orderBy");
+
+  // 초기 마운트 시 필 값 설정
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams);
+    if (!params.has("isRecruiting")) {
+      params.set("isRecruiting", "true");
+      router.push(`${pathname}?${params.toString()}`);
+    }
+  }, []);
+
+  // 무한 스크롤을 위한 Intersection Observer 설정
+  const { ref, inView } = useInView({
+    threshold: 0.1,
+    triggerOnce: false,
+    rootMargin: "100px",
+  });
+
+  // 알바폼 목록 조회
+  const { data, isLoading, error, hasNextPage, fetchNextPage, isFetchingNextPage } = useForms({
+    limit: FORMS_PER_PAGE,
+    isRecruiting: isRecruiting === "true" ? true : isRecruiting === "false" ? false : undefined,
+    keyword: keyword || undefined,
+    orderBy: orderBy || undefined,
+  });
+
+  // 모집 여부 필터 변경 함수
+  const handleRecruitingFilter = (selected: string) => {
+    const option = filterRecruitingOptions.find((opt) => opt.label === selected);
+    if (option) {
+      const params = new URLSearchParams(searchParams);
+      if (selected === "전체") {
+        params.delete("isRecruiting");
+      } else {
+        params.set("isRecruiting", String(option.value));
+      }
+      router.push(`${pathname}?${params.toString()}`);
+    }
+  };
+
+  // 현재 필터 상태에 따른 초기값 설정
+  const getInitialRecruitingValue = (isRecruiting: string | null) => {
+    if (!isRecruiting) return "전체";
+    const option = filterRecruitingOptions.find((opt) => String(opt.value) === isRecruiting);
+    return option?.label || "전체";
+  };
+
+  // 스크롤이 하단에 도달하면 다음 페이지 로드
+  useEffect(() => {
+    if (inView && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [inView, hasNextPage, fetchNextPage, isFetchingNextPage]);
+
+  // 에러 상태 처리
+  if (error) {
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <p className="text-red-500">알바 목록을 불러오는데 실패했습니다.</p>
+      </div>
+    );
+  }
+
+  // 로딩 상태 처리
+  if (isLoading)
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    );
+
+  return (
+    <div className="flex min-h-screen flex-col items-center">
+      {/* 검색 섹션과 필터 드롭다운을 고정 위치로 설정 */}
+      <div className="fixed left-0 right-0 top-16 z-30 bg-white shadow-sm">
+        {/* 검색 섹션 */}
+        <div className="w-full border-b border-line-100">
+          <div className="mx-auto flex max-w-screen-xl flex-col gap-4 px-4 py-4 md:px-6 lg:px-8">
+            <div className="flex items-center justify-between">
+              <SearchSection pathname={pathname} />
+            </div>
+          </div>
+        </div>
+
+        {/* 필터 드롭다운 섹션 */}
+        <div className="w-full border-b border-line-100">
+          <div className="mx-auto flex max-w-screen-xl items-center justify-between gap-2 px-4 py-4 md:px-6 lg:px-8">
+            <FilterDropdown
+              options={filterRecruitingOptions.map((option) => option.label)}
+              initialValue={getInitialRecruitingValue(isRecruiting)}
+              onChange={handleRecruitingFilter}
+            />
+            <div className="flex items-center gap-4">
+              <SortSection pathname={pathname} searchParams={searchParams} />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 메인 콘텐츠 영역 */}
+      <div className="w-full pt-[132px]">
+        {/* 폼 만들기 버튼 - 고정 위치 */}
+        {isOwner && (
+          <Link href="/addform" className="fixed bottom-[50%] right-[5%] z-30 translate-y-1/2">
+            <FloatingBtn icon={<IoAdd className="size-6" />} variant="orange">
+              폼 만들기
+            </FloatingBtn>
+          </Link>
+        )}
+
+        {!data?.pages?.[0]?.data?.length ? (
+          <div className="flex h-[calc(100vh-200px)] flex-col items-center justify-center">
+            <p className="text-grayscale-500">등록된 알바 공고가 없습니다.</p>
+          </div>
+        ) : (
+          <div className="mx-auto mt-4 w-full max-w-screen-xl px-3">
+            <ContentSection>
+              {data?.pages.map((page) => (
+                <React.Fragment key={page.nextCursor}>
+                  {page.data.map((form) => (
+                    <div key={form.id}>
+                      <Link href={`/alba/${form.id}`}>
+                        <AlbaListItem {...form} />
+                      </Link>
+                    </div>
+                  ))}
+                </React.Fragment>
+              ))}
+            </ContentSection>
+
+            {/* 무한 스크롤 트리거 영역 */}
+            <div ref={ref} className="h-4 w-full">
+              {isFetchingNextPage && (
+                <div className="flex justify-center py-4">
+                  <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary-orange-300 border-t-transparent" />
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
 }
diff --git a/src/app/(pages)/albaTalk/[albatalkId]/edit/page.tsx b/src/app/(pages)/albaTalk/[albatalkId]/edit/page.tsx
new file mode 100644
index 00000000..8435e455
--- /dev/null
+++ b/src/app/(pages)/albaTalk/[albatalkId]/edit/page.tsx
@@ -0,0 +1,251 @@
+"use client";
+
+import React, { useState, useCallback, useEffect } from "react";
+import { useForm, SubmitHandler, Controller } from "react-hook-form";
+import { useRouter } from "next/navigation";
+import Button from "@/app/components/button/default/Button";
+import BaseInput from "@/app/components/input/text/BaseInput";
+import ImageInputPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputPlaceHolder";
+import { useEditPost } from "@/hooks/queries/post/useEditPost";
+import { usePostDetail } from "@/hooks/queries/post/usePostDetail";
+import axios from "axios";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
+import { PostSchema } from "@/schemas/postSchema";
+import toast from "react-hot-toast";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+
+interface ImageInputType {
+  file: File | null;
+  url: string;
+  id: string;
+}
+
+export default function EditTalk({ params }: { params: { albatalkId: string } }) {
+  const [imageList, setImageList] = useState<ImageInputType[]>([]);
+  const router = useRouter();
+  const postId = params.albatalkId;
+
+  const { data: post, isLoading, error } = usePostDetail(postId);
+  const { mutate: editPost, isPending } = useEditPost(postId);
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+    reset,
+  } = useForm<PostSchema>({
+    defaultValues: {
+      title: "",
+      content: "",
+      imageUrl: "",
+    },
+  });
+
+  // 게시글 데이터로 폼 초기화
+  useEffect(() => {
+    if (post) {
+      reset({
+        title: post.title,
+        content: post.content,
+        imageUrl: post.imageUrl || "",
+      });
+
+      if (post.imageUrl) {
+        setImageList([
+          {
+            file: null,
+            url: post.imageUrl,
+            id: "initial-image",
+          },
+        ]);
+      } else {
+        setImageList([]);
+      }
+    }
+  }, [post, reset]);
+
+  // 에러 처리
+  useEffect(() => {
+    if (error) {
+      toast.error("게시글을 불러오는데 실패했습니다.");
+      router.push("/albatalk");
+    }
+  }, [error, router]);
+
+  const uploadImage = useCallback(async (file: File): Promise<string> => {
+    const formData = new FormData();
+    formData.append("image", file);
+
+    try {
+      const response = await axios.post("/api/images/upload", formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      });
+
+      if (response.status === 201 && response.data?.url) {
+        return response.data.url;
+      }
+
+      throw new Error("이미지 업로드에 실패했습니다.");
+    } catch (error) {
+      toast.error("이미지 업로드에 실패했습니다.");
+      console.error("이미지 업로드 실패:", error);
+      throw error;
+    }
+  }, []);
+
+  const handleImagesChange = useCallback(
+    (newImages: ImageInputType[]) => {
+      setImageList(newImages);
+      const imageUrls = newImages.map((img) => img.url).join(",");
+      setValue("imageUrl", imageUrls);
+    },
+    [setValue]
+  );
+
+  const onSubmit: SubmitHandler<PostSchema> = async (data) => {
+    try {
+      if (!data.title) {
+        toast.error("제목을 입력하세요.");
+        return;
+      }
+
+      if (!data.content) {
+        toast.error("내용을 입력하세요.");
+        return;
+      }
+
+      const postData: PostSchema = {
+        title: data.title,
+        content: data.content,
+        imageUrl: imageList.map((img) => img.url).join(","),
+      };
+
+      editPost(postData, {
+        onSuccess: () => {
+          router.push(`/albatalk/${postId}`);
+        },
+      });
+    } catch (error) {
+      console.error("게시글 수정 실패:", error);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  if (!post) return null;
+
+  return (
+    <div className="flex w-full flex-col bg-grayscale-50 px-6 font-nexon lg:px-10">
+      <div className="w-full max-w-[1480px] rounded-md bg-white">
+        <div className="mb-[40px] flex h-[58px] w-full items-center justify-between border-b border-line-100 md:h-[78px] lg:h-[126px]">
+          <div className="flex items-center text-[18px] font-semibold md:text-[20px] lg:text-[32px]">
+            게시글 수정하기
+          </div>
+          <div className="hidden space-x-1 font-semibold md:flex md:space-x-2 lg:space-x-4">
+            <Button
+              color="gray"
+              className="text-grayscale-50md:h-[46px] text-white md:w-[108px] md:text-[14px] lg:h-[58px] lg:w-[180px] lg:text-[18px]"
+              onClick={() => router.push("/albaTalk")}
+            >
+              취소
+            </Button>
+            <Button
+              className="text-grayscale-50 md:h-[46px] md:w-[108px] md:text-[14px] lg:h-[58px] lg:w-[180px] lg:text-[18px]"
+              onClick={handleSubmit(onSubmit)}
+              disabled={isPending}
+            >
+              {isPending ? <DotLoadingSpinner /> : "수정하기"}
+            </Button>
+          </div>
+        </div>
+        <form className="mx-auto max-w-[1432px] space-y-6 md:space-y-8" onSubmit={handleSubmit(onSubmit)}>
+          <div className="w-full">
+            <label
+              htmlFor="title"
+              className="mb-2 flex items-center text-[16px] font-medium text-black-300 md:text-[18px] lg:text-[20px]"
+            >
+              제목<span className="ml-1 text-primary-orange-300">*</span>
+            </label>
+            <Controller
+              name="title"
+              control={control}
+              rules={{ required: "제목을 입력하세요." }}
+              render={({ field }) => (
+                <BaseInput
+                  {...field}
+                  type="text"
+                  variant="white"
+                  name="title"
+                  size="w-full h-[52px] md:h-[54px] lg:h-[64px]"
+                  placeholder="제목을 입력하세요"
+                  errormessage={errors.title?.message}
+                />
+              )}
+            />
+          </div>
+
+          <div className="w-full">
+            <label
+              htmlFor="content"
+              className="mb-2 flex items-center text-[16px] font-medium text-black-300 md:text-[18px] lg:text-[20px]"
+            >
+              내용<span className="ml-1 text-primary-orange-300">*</span>
+            </label>
+            <Controller
+              name="content"
+              control={control}
+              rules={{ required: "내용을 입력하세요." }}
+              render={({ field }) => (
+                <textarea
+                  {...field}
+                  className="h-[240px] w-full resize-none rounded-lg bg-background-200 p-[14px] text-[16px] placeholder:text-grayscale-400 focus:outline-none focus:ring-2 focus:ring-primary-orange-300 md:text-[18px] lg:text-[20px]"
+                  placeholder="내용을 입력하세요"
+                />
+              )}
+            />
+          </div>
+
+          <div className="w-full">
+            <label
+              htmlFor="image"
+              className="mb-2 block text-[16px] font-medium text-black-300 md:text-[18px] lg:text-[20px]"
+            >
+              이미지
+            </label>
+            <ImageInputPlaceHolder
+              onImageUpload={uploadImage}
+              onImagesChange={handleImagesChange}
+              initialImages={imageList}
+            />
+          </div>
+        </form>
+      </div>
+      {/* 모바일 버전 버튼 */}
+      <div className="flex w-full flex-col items-center justify-center space-y-2 rounded-t-lg bg-white py-10 font-semibold md:hidden">
+        <Button
+          color="gray"
+          className="mb-2 h-[58px] w-full rounded-[8px] bg-grayscale-100 text-white hover:bg-grayscale-200"
+          onClick={() => router.push("/albaTalk")}
+        >
+          취소
+        </Button>
+        <Button
+          className="h-[58px] w-full rounded-[8px] bg-primary-orange-300 text-white hover:bg-orange-400"
+          onClick={handleSubmit(onSubmit)}
+          disabled={isPending}
+        >
+          {isPending ? <DotLoadingSpinner /> : "수정하기"}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/albaTalk/[albatalkId]/page.tsx b/src/app/(pages)/albaTalk/[albatalkId]/page.tsx
new file mode 100644
index 00000000..97f6aef4
--- /dev/null
+++ b/src/app/(pages)/albaTalk/[albatalkId]/page.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { PostDetailSection } from "./sections/PostDetailSection";
+import { CommentsSection } from "./sections/CommentsSection";
+
+export default function PostDetailPage() {
+  const { albatalkId } = useParams();
+
+  return (
+    <div className="mx-auto flex w-full min-w-[375px] max-w-screen-xl flex-col items-center px-4">
+      <PostDetailSection postId={albatalkId.toString()} />
+      <CommentsSection postId={albatalkId.toString()} />
+    </div>
+  );
+}
diff --git a/src/app/(pages)/albaTalk/[albatalkId]/sections/CommentsSection.tsx b/src/app/(pages)/albaTalk/[albatalkId]/sections/CommentsSection.tsx
new file mode 100644
index 00000000..ed18e96a
--- /dev/null
+++ b/src/app/(pages)/albaTalk/[albatalkId]/sections/CommentsSection.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import Image from "next/image";
+import Comment from "@/app/components/card/board/Comment";
+import BaseTextArea from "@/app/components/input/textarea/BaseTextArea";
+import Button from "@/app/components/button/default/Button";
+import { useAddComment } from "@/hooks/queries/post/comment/useAddComment";
+import { useUser } from "@/hooks/queries/user/me/useUser";
+import { useComments } from "@/hooks/queries/post/comment/useComments";
+import Pagination from "@/app/components/pagination/Pagination";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
+
+interface CommentsSectionProps {
+  postId: string;
+}
+
+export function CommentsSection({ postId }: CommentsSectionProps): JSX.Element {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [newComment, setNewComment] = useState("");
+
+  const { user } = useUser();
+  const {
+    data: commentsData,
+    isPending: isCommentsLoading,
+    error: commentsError,
+  } = useComments(postId, {
+    page: currentPage,
+    pageSize: 10,
+  });
+
+  const addComment = useAddComment(postId);
+
+  const handleAddComment = useCallback(() => {
+    if (newComment.trim()) {
+      addComment.mutate(
+        { content: newComment },
+        {
+          onSuccess: () => setNewComment(""),
+        }
+      );
+    }
+  }, [addComment, newComment]);
+
+  const handlePageChange = useCallback((page: number) => {
+    setCurrentPage(page);
+    const commentSection = document.querySelector("#comments-section");
+    if (commentSection) {
+      commentSection.scrollIntoView({ behavior: "smooth" });
+    }
+  }, []);
+
+  if (isCommentsLoading) {
+    return (
+      <div className="flex h-[200px] items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  if (commentsError) {
+    return <div className="text-center text-state-error">댓글을 불러오는데 실패했습니다.</div>;
+  }
+
+  return (
+    <section className="w-full" aria-label="댓글 섹션">
+      <div className="mb-6 text-[16px] font-semibold text-black-400 md:text-[20px] lg:text-[24px]">
+        댓글({commentsData?.totalItemCount ?? 0})
+      </div>
+
+      <BaseTextArea
+        name="newComment"
+        placeholder="댓글을 입력해주세요."
+        value={newComment}
+        onChange={(e) => setNewComment(e.target.value)}
+        size="h-[120px] w-full lg:h-[144px]"
+        variant="white"
+      />
+      <div className="flex justify-end pb-10 pt-4">
+        <Button
+          onClick={handleAddComment}
+          disabled={addComment.isPending || !newComment.trim()}
+          className="h-[50px] w-[108px] rounded-lg text-[14px] font-medium lg:h-[64px] lg:w-[214px]"
+        >
+          {addComment.isPending ? <DotLoadingSpinner /> : "등록하기"}
+        </Button>
+      </div>
+
+      <div className="mb-6">
+        {commentsData?.data?.length ? (
+          <>
+            {commentsData.data.map((comment) => (
+              <Comment
+                key={comment.id}
+                id={comment.id.toString()}
+                nickname={comment.writer.nickname}
+                updatedAt={comment.createdAt}
+                content={comment.content}
+                isAuthor={comment.writer.id === user?.id}
+              />
+            ))}
+          </>
+        ) : (
+          <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 rounded-lg bg-white p-5">
+            <Image src="/images/emptyComment-md.svg" alt="No comments" width={206} height={204} className="mb-4" />
+          </div>
+        )}
+      </div>
+
+      {(commentsData?.totalPages ?? 0) > 1 && (
+        <div className="mt-12 flex justify-center">
+          <Pagination
+            currentPage={currentPage}
+            totalPage={commentsData?.totalPages ?? 0}
+            onPageChange={handlePageChange}
+          />
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/src/app/(pages)/albaTalk/[albatalkId]/sections/PostDetailSection.tsx b/src/app/(pages)/albaTalk/[albatalkId]/sections/PostDetailSection.tsx
new file mode 100644
index 00000000..627a6d8a
--- /dev/null
+++ b/src/app/(pages)/albaTalk/[albatalkId]/sections/PostDetailSection.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import { useUser } from "@/hooks/queries/user/me/useUser";
+import { useLikePost } from "@/hooks/queries/post/useLikePost";
+import { useDeletePost } from "@/hooks/queries/post/useDeletePost";
+import Image from "next/image";
+import { formatLocalDate } from "@/utils/workDayFormatter";
+import KebabDropdown from "@/app/components/button/dropdown/KebabDropdown";
+import useModalStore from "@/store/modalStore";
+import useWidth from "@/hooks/useWidth";
+import { usePostDetail } from "@/hooks/queries/post/usePostDetail";
+import { useRouter } from "next/navigation";
+
+export function PostDetailSection({ postId }: { postId: string }) {
+  const { isDesktop } = useWidth();
+  const { user } = useUser();
+  const router = useRouter();
+  const { data: post } = usePostDetail(postId);
+  const { likePost, unlikePost } = useLikePost(postId);
+  const deletePost = useDeletePost(postId);
+  const { openModal } = useModalStore();
+
+  const handleLikeClick = () => {
+    if (post?.isLiked) {
+      unlikePost.mutate();
+    } else {
+      likePost.mutate();
+    }
+  };
+
+  const handleDelete = () => {
+    openModal("customForm", {
+      isOpen: true,
+      title: "게시글을 삭제할까요?",
+      content: "삭제된 게시글은 복구할 수 없습니다.",
+      confirmText: "삭제하기",
+      cancelText: "취소",
+      onConfirm: () => {
+        deletePost.mutate(undefined, {
+          onSuccess: () => {
+            openModal("customForm", {
+              isOpen: false,
+              title: "",
+              content: "",
+              onConfirm: () => {},
+              onCancel: () => {},
+            });
+            router.push("/albatalk");
+          },
+        });
+      },
+      onCancel: () =>
+        openModal("customForm", {
+          isOpen: false,
+          title: "",
+          content: "",
+          onConfirm: () => {},
+          onCancel: () => {},
+        }),
+    });
+  };
+
+  const handleEdit = () => {
+    router.push(`/albatalk/${postId}/edit`);
+  };
+
+  const dropdownOptions = [
+    { label: "수정하기", onClick: handleEdit },
+    { label: "삭제하기", onClick: handleDelete, disabled: deletePost.isPending },
+  ];
+
+  return (
+    <section className="mb-12 w-full rounded-lg bg-white">
+      {/* Header */}
+      <div className="mb-4 flex items-center justify-between">
+        <h1 className="text-[16px] font-semibold md:text-[20px] lg:text-[24px]">{post?.title}</h1>
+        {post?.writer.id === user?.id && <KebabDropdown options={dropdownOptions} />}
+      </div>
+
+      {/* Divider Line */}
+      <div className="my-[9px] flex items-center justify-center lg:my-[16px]">
+        <div className="w-full bg-line-100" style={{ height: "1px" }}></div>
+      </div>
+
+      {/* Author Info */}
+      <div className="mb-4 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Image
+            src="/icons/user/user-profile-sm.svg"
+            alt="User Icon"
+            className="rounded-full"
+            width={32}
+            height={32}
+          />
+          <div className="flex items-center gap-2">
+            <span className="font-medium text-black-400">{post?.writer.nickname}</span>
+            <span className="text-grayscale-400">|</span>
+            <span className="text-sm text-grayscale-400">{formatLocalDate(post?.createdAt || new Date())}</span>
+          </div>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-1">
+            <Image
+              src={`/icons/comment/${isDesktop ? "comment-md.svg" : "comment-sm.svg"}`}
+              alt="Comment Icon"
+              width={24}
+              height={24}
+            />
+            <span className="text-sm text-grayscale-500">{post?.commentCount}</span>
+          </div>
+          <div className="flex cursor-pointer items-center gap-1" onClick={handleLikeClick}>
+            <Image
+              src={`/icons/like/${
+                post?.isLiked
+                  ? isDesktop
+                    ? "like-md-active.svg"
+                    : "like-sm-active.svg"
+                  : isDesktop
+                    ? "like-md.svg"
+                    : "like-sm.svg"
+              }`}
+              alt="Like Icon"
+              width={24}
+              height={24}
+            />
+            <span className="text-sm text-grayscale-500">{post?.likeCount}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="mb-6 whitespace-pre-wrap text-sm leading-[1.6] text-black-400 md:text-base lg:text-lg">
+        {post?.content}
+      </div>
+
+      {/* Image */}
+      <div className="mb-6">
+        {post?.imageUrl ? (
+          <div className="relative aspect-square w-full max-w-[600px] overflow-hidden rounded-lg">
+            <Image
+              src={post.imageUrl}
+              alt="Post Image"
+              fill
+              sizes="(max-width: 768px) 100vw, 600px"
+              className="object-contain"
+              priority
+            />
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/(pages)/albaTalk/add/page.tsx b/src/app/(pages)/albaTalk/add/page.tsx
new file mode 100644
index 00000000..ec27d991
--- /dev/null
+++ b/src/app/(pages)/albaTalk/add/page.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import React, { useState, useCallback } from "react";
+import { useForm, SubmitHandler, Controller } from "react-hook-form";
+import { useRouter } from "next/navigation";
+import Button from "@/app/components/button/default/Button";
+import BaseInput from "@/app/components/input/text/BaseInput";
+import ImageInputPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputPlaceHolder";
+import { useAddPost } from "@/hooks/queries/post/useAddPost";
+import axios from "axios";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
+import { PostSchema } from "@/schemas/postSchema";
+import toast from "react-hot-toast";
+
+interface ImageInputType {
+  file: File | null;
+  url: string;
+  id: string;
+}
+
+export default function AddTalk() {
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<PostSchema>({ defaultValues: { title: "", content: "" } });
+
+  const [imageList, setImageList] = useState<ImageInputType[]>([]);
+  const router = useRouter();
+  const { mutate: createPost, isPending } = useAddPost();
+
+  const uploadImage = useCallback(async (file: File): Promise<string> => {
+    const formData = new FormData();
+    formData.append("image", file);
+
+    try {
+      const response = await axios.post("/api/images/upload", formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      });
+
+      if (response.status === 201 && response.data?.url) {
+        return response.data.url;
+      }
+
+      throw new Error("이미지 업로드에 실패했습니다.");
+    } catch (error) {
+      toast.error("이미지 업로드에 실패했습니다.");
+      console.error("이미지 업로드 실패:", error);
+      throw error;
+    }
+  }, []);
+
+  const handleImagesChange = useCallback(
+    (newImages: ImageInputType[]) => {
+      setImageList(newImages);
+      const imageUrls = newImages.map((img) => img.url).join(",");
+      setValue("imageUrl", imageUrls);
+    },
+    [setValue]
+  );
+
+  const onSubmit: SubmitHandler<PostSchema> = async (data) => {
+    try {
+      if (!data.title || !data.content) {
+        toast.error("제목과 내용을 입력하세요.");
+        return;
+      }
+
+      const postData: PostSchema = {
+        title: data.title,
+        content: data.content,
+        imageUrl: imageList.map((img) => img.url).join(","),
+      };
+
+      createPost(postData, {
+        onSuccess: (response) => {
+          router.push(`/albatalk/${response.id}`);
+        },
+      });
+    } catch (error) {
+      console.error("게시글 등록 실패:", error);
+    }
+  };
+
+  return (
+    <div className="flex w-full flex-col bg-grayscale-50 px-6 font-nexon lg:px-10">
+      <div className="w-full max-w-[1480px] rounded-md bg-white">
+        <div className="mb-[40px] flex h-[58px] w-full items-center justify-between border-b border-line-100 md:h-[78px] lg:h-[126px]">
+          <div className="flex items-center text-[18px] font-semibold md:text-[20px] lg:text-[32px]">게시글 쓰기</div>
+          <div className="hidden space-x-1 font-semibold md:flex md:space-x-2 lg:space-x-4">
+            <Button
+              color="gray"
+              className="text-grayscale-50md:h-[46px] text-white md:w-[108px] md:text-[14px] lg:h-[58px] lg:w-[180px] lg:text-[18px]"
+              onClick={() => router.push("/albaTalk")}
+            >
+              취소
+            </Button>
+            <Button
+              className="text-grayscale-50 md:h-[46px] md:w-[108px] md:text-[14px] lg:h-[58px] lg:w-[180px] lg:text-[18px]"
+              onClick={handleSubmit(onSubmit)}
+              disabled={isPending}
+            >
+              {isPending ? <DotLoadingSpinner /> : "등록하기"}
+            </Button>
+          </div>
+        </div>
+        <form className="mx-auto max-w-[1432px] space-y-6 md:space-y-8" onSubmit={handleSubmit(onSubmit)}>
+          <div className="w-full">
+            <label
+              htmlFor="title"
+              className="mb-2 flex items-center text-[16px] font-medium text-black-300 md:text-[18px] lg:text-[20px]"
+            >
+              제목<span className="ml-1 text-primary-orange-300">*</span>
+            </label>
+            <Controller
+              name="title"
+              control={control}
+              rules={{ required: "제목을 입력하세요." }}
+              render={({ field }) => (
+                <BaseInput
+                  {...field}
+                  type="text"
+                  variant="white"
+                  name="title"
+                  size="w-full h-[52px] md:h-[54px] lg:h-[64px]"
+                  placeholder="제목을 입력하세요"
+                  errormessage={errors.title?.message}
+                />
+              )}
+            />
+          </div>
+
+          <div className="w-full">
+            <label
+              htmlFor="content"
+              className="mb-2 flex items-center text-[16px] font-medium text-black-300 md:text-[18px] lg:text-[20px]"
+            >
+              내용<span className="ml-1 text-primary-orange-300">*</span>
+            </label>
+            <Controller
+              name="content"
+              control={control}
+              rules={{ required: "내용을 입력하세요." }}
+              render={({ field }) => (
+                <textarea
+                  {...field}
+                  className="h-[240px] w-full resize-none rounded-lg bg-background-200 p-[14px] text-[16px] placeholder:text-grayscale-400 focus:outline-none focus:ring-2 focus:ring-primary-orange-300 md:text-[18px] lg:text-[20px]"
+                  placeholder="내용을 입력하세요"
+                />
+              )}
+            />
+          </div>
+
+          <div className="w-full">
+            <label
+              htmlFor="image"
+              className="mb-2 block text-[16px] font-medium text-black-300 md:text-[18px] lg:text-[20px]"
+            >
+              이미지
+            </label>
+            <ImageInputPlaceHolder onImageUpload={uploadImage} onImagesChange={handleImagesChange} />
+          </div>
+        </form>
+      </div>
+      {/* 모바일 버전 버튼 */}
+      <div className="flex w-full flex-col items-center justify-center space-y-2 rounded-t-lg bg-white py-10 font-semibold md:hidden">
+        <Button
+          color="gray"
+          className="mb-2 h-[58px] w-full rounded-[8px] bg-grayscale-100 text-white hover:bg-grayscale-200"
+          onClick={() => router.push("/albaTalk")}
+        >
+          취소
+        </Button>
+        <Button
+          className="h-[58px] w-full rounded-[8px] bg-primary-orange-300 text-white hover:bg-orange-400"
+          onClick={handleSubmit(onSubmit)}
+          disabled={isPending}
+        >
+          {isPending ? <DotLoadingSpinner /> : "등록하기"}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/albaTalk/layout.tsx b/src/app/(pages)/albaTalk/layout.tsx
new file mode 100644
index 00000000..fca6c8a0
--- /dev/null
+++ b/src/app/(pages)/albaTalk/layout.tsx
@@ -0,0 +1,18 @@
+import { Suspense } from "react";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+
+export default function AlbaTalkLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 py-8">
+      <Suspense
+        fallback={
+          <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+            <LoadingSpinner />
+          </div>
+        }
+      >
+        {children}
+      </Suspense>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/albaTalk/page.tsx b/src/app/(pages)/albaTalk/page.tsx
index a421692d..ce7ab31a 100644
--- a/src/app/(pages)/albaTalk/page.tsx
+++ b/src/app/(pages)/albaTalk/page.tsx
@@ -1,5 +1,141 @@
 "use client";
 
+import React, { useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+import { usePosts } from "@/hooks/queries/post/usePosts";
+import { usePathname, useSearchParams } from "next/navigation";
+import SortSection from "@/app/components/layout/posts/SortSection";
+import SearchSection from "@/app/components/layout/forms/SearchSection";
+import { useUser } from "@/hooks/queries/user/me/useUser";
+import Link from "next/link";
+import { RiEdit2Fill } from "react-icons/ri";
+import FloatingBtn from "@/app/components/button/default/FloatingBtn";
+import CardBoard from "@/app/components/card/board/CardBoard";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+import { useRouter } from "next/navigation";
+import ContentSection from "@/app/components/layout/ContentSection";
+
+const POSTS_PER_PAGE = 10;
+
 export default function AlbaTalk() {
-  return <div>AlbaTalk</div>;
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const { user } = useUser();
+
+  // URL 쿼리 파라미터에서 키워드와 정렬 기준 가져오기
+  const keyword = searchParams.get("keyword");
+  const orderBy = searchParams.get("orderBy");
+
+  // 무한 스크롤을 위한 Intersection Observer 설정
+  const { ref, inView } = useInView({
+    threshold: 0.1,
+    triggerOnce: false,
+    rootMargin: "100px",
+  });
+
+  // 게시글 목록 조회
+  const { data, isLoading, error, hasNextPage, fetchNextPage, isFetchingNextPage } = usePosts({
+    limit: POSTS_PER_PAGE,
+    keyword: keyword || undefined,
+    orderBy: orderBy || undefined,
+  });
+
+  // 스크롤이 하단에 도달하면 다음 페이지 로드
+  useEffect(() => {
+    if (inView && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [inView, hasNextPage, fetchNextPage, isFetchingNextPage]);
+
+  // 에러 상태 처리
+  if (error) {
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <p className="text-red-500">게시글 목록을 불러오는데 실패했습니다.</p>
+      </div>
+    );
+  }
+
+  // 로딩 상태 처리
+  if (isLoading) {
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center">
+      {/* 검색 섹션과 정렬 옵션을 고정 위치로 설정 */}
+      <div className="fixed left-0 right-0 top-16 z-30 bg-white shadow-sm">
+        {/* 검색 섹션 */}
+        <div className="w-full border-b border-line-100">
+          <div className="mx-auto flex max-w-screen-xl flex-col gap-4 px-4 py-4 md:px-6 lg:px-8">
+            <div className="flex items-center justify-between">
+              <SearchSection pathname={pathname} />
+            </div>
+          </div>
+        </div>
+
+        {/* 정렬 옵션 섹션 */}
+        <div className="w-full border-b border-line-100">
+          <div className="mx-auto flex max-w-screen-xl items-center justify-end gap-2 px-4 py-4 md:px-6 lg:px-8">
+            <div className="flex items-center gap-4">
+              <SortSection pathname={pathname} searchParams={searchParams} />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 메인 콘텐츠 영역 */}
+      <div className="w-full pt-[132px]">
+        {/* 글쓰기 버튼 - 고정 위치 수정 */}
+        {user && (
+          <Link href="/albatalk/add" className="fixed bottom-[50%] right-[8%] z-30 translate-y-1/2">
+            <FloatingBtn icon={<RiEdit2Fill className="size-6" />} variant="orange" />
+          </Link>
+        )}
+
+        {!data?.pages?.[0]?.data?.length ? (
+          <div className="flex h-[calc(100vh-200px)] flex-col items-center justify-center">
+            <p className="text-grayscale-500">등록된 게시글이 없습니다.</p>
+          </div>
+        ) : (
+          <div className="mx-auto mt-4 w-full max-w-screen-xl px-3">
+            <ContentSection>
+              {data?.pages.map((page) => (
+                <React.Fragment key={page.nextCursor}>
+                  {page.data.map((post) => (
+                    <div className="cursor-pointer" key={post.id} onClick={() => router.push(`/albatalk/${post.id}`)}>
+                      <CardBoard
+                        id={post.id.toString()}
+                        title={post.title}
+                        content={post.content}
+                        nickname={post.writer.nickname}
+                        updatedAt={post.updatedAt}
+                        commentCount={post.commentCount}
+                        likeCount={post.likeCount}
+                        isAuthor={post.writer.id === user?.id}
+                      />
+                    </div>
+                  ))}
+                </React.Fragment>
+              ))}
+            </ContentSection>
+
+            {/* 무한 스크롤 트리거 영역 */}
+            <div ref={ref} className="h-4 w-full">
+              {isFetchingNextPage && (
+                <div className="flex justify-center py-4">
+                  <LoadingSpinner />
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
 }
diff --git a/src/app/(pages)/kakao-map/page.tsx b/src/app/(pages)/kakao-map/page.tsx
new file mode 100644
index 00000000..3ee65863
--- /dev/null
+++ b/src/app/(pages)/kakao-map/page.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import React, { useState, useCallback } from "react";
+import Script from "next/script";
+import { Map, MapMarker, useKakaoLoader } from "react-kakao-maps-sdk";
+
+interface Coords {
+  lat: number;
+  lng: number;
+}
+
+declare global {
+  interface Window {
+    daum: {
+      Postcode: new (config: {
+        oncomplete: (data: { address: string; zonecode: string; [key: string]: any }) => void;
+      }) => { open: () => void };
+    };
+  }
+}
+
+const KakaoMapPage = () => {
+  const [address, setAddress] = useState("");
+  const [coords, setCoords] = useState<Coords>({ lat: 37.5665, lng: 126.978 });
+
+  // useKakaoLoader를 사용해 Kakao Maps 스크립트 로드
+  const [loading, error] = useKakaoLoader({
+    appkey: process.env.NEXT_PUBLIC_KAKAO_APP_KEY as string,
+    libraries: ["services"], // 추가 옵션으로 services 라이브러리를 로드
+  });
+
+  // 주소 검색 함수 (주소 → 좌표 변환)
+  const searchAddress = useCallback(() => {
+    if (!address) return;
+    if (typeof window === "undefined" || !window.kakao?.maps?.services) {
+      console.error("Kakao Maps Services not available yet");
+      return;
+    }
+
+    const geocoder = new window.kakao.maps.services.Geocoder();
+    geocoder.addressSearch(address, (result: any[], status: string) => {
+      if (status === window.kakao.maps.services.Status.OK && result.length > 0) {
+        const { x, y } = result[0]; // x: 경도, y: 위도
+        setCoords({ lat: parseFloat(y), lng: parseFloat(x) });
+      } else {
+        alert("주소를 찾을 수 없습니다. 정확한 주소를 입력해주세요.");
+      }
+    });
+  }, [address]);
+
+  // 우편번호 검색 버튼 클릭 시 팝업 열기
+  const handleOpenPostcode = useCallback(() => {
+    if (typeof window === "undefined" || !window.daum) return;
+
+    new window.daum.Postcode({
+      oncomplete: (data) => {
+        setAddress(data.address);
+      },
+    }).open();
+  }, []);
+
+  return (
+    <div className="container mx-auto p-4">
+      {/* Daum Postcode 스크립트 로드 */}
+      <Script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js" strategy="afterInteractive" />
+
+      <h1 className="mb-4 text-2xl font-bold">우편번호 검색으로 주소 입력 & 지도 표시 (useKakaoLoader)</h1>
+      <div className="mb-4 flex gap-2">
+        <input
+          type="text"
+          placeholder="주소를 입력하세요"
+          value={address}
+          onChange={(e) => setAddress(e.target.value)}
+          className="flex-1 border p-2"
+        />
+        <button
+          type="button"
+          onClick={handleOpenPostcode}
+          className="rounded bg-green-500 p-2 text-white hover:bg-green-600"
+        >
+          우편번호 찾기
+        </button>
+        <button
+          type="button"
+          onClick={searchAddress}
+          disabled={loading || !!error}
+          className="rounded bg-blue-500 p-2 text-white hover:bg-blue-600 disabled:bg-gray-400"
+        >
+          검색
+        </button>
+      </div>
+
+      <div className="h-96 w-full border">
+        {error && <div className="text-red-500">Map load error: {String(error)}</div>}
+        {/* {loading && !error && (
+          <div className="flex h-full items-center justify-center text-gray-500">Kakao Maps 로딩 중...</div>
+        )} */}
+        {!loading && !error && (
+          <Map center={coords} style={{ width: "100%", height: "100%" }} level={3}>
+            <MapMarker position={coords}>현재 위치</MapMarker>
+          </Map>
+        )}
+      </div>
+
+      {coords && !loading && !error && (
+        <div className="mt-4 text-lg text-gray-700">
+          <p>위도: {coords.lat}</p>
+          <p>경도: {coords.lng}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default KakaoMapPage;
diff --git a/src/app/(pages)/myAlbaform/(role)/applicant/components/ApplicantSortSection.tsx b/src/app/(pages)/myAlbaform/(role)/applicant/components/ApplicantSortSection.tsx
new file mode 100644
index 00000000..68f7eb67
--- /dev/null
+++ b/src/app/(pages)/myAlbaform/(role)/applicant/components/ApplicantSortSection.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import React from "react";
+import FilterDropdown from "@/app/components/button/dropdown/FilterDropdown";
+import { formStatusOptions } from "@/constants/formOptions";
+import { useRouter } from "next/navigation";
+
+const APPLICANT_SORT_OPTIONS = [
+  { label: "전체", value: "" },
+  { label: "최신순", value: formStatusOptions.INTERVIEW_PENDING },
+  { label: "시급높은순", value: formStatusOptions.INTERVIEW_COMPLETED },
+  { label: "지원자 많은순", value: formStatusOptions.HIRED },
+  { label: "스크랩 많은순", value: formStatusOptions.REJECTED },
+];
+
+interface ApplicantSortSectionProps {
+  pathname: string;
+  searchParams: URLSearchParams;
+}
+
+export default function ApplicantSortSection({ pathname, searchParams }: ApplicantSortSectionProps) {
+  const router = useRouter();
+  const currentOrderBy = searchParams.get("orderBy") || "";
+
+  const currentLabel =
+    APPLICANT_SORT_OPTIONS.find((opt) => opt.value === currentOrderBy)?.label || APPLICANT_SORT_OPTIONS[0].label;
+
+  const handleSortChange = (selected: string) => {
+    const option = APPLICANT_SORT_OPTIONS.find((opt) => opt.label === selected);
+    if (option) {
+      const params = new URLSearchParams(searchParams);
+      params.set("orderBy", option.value);
+      router.push(`${pathname}?${params.toString()}`);
+    }
+  };
+
+  return (
+    <FilterDropdown
+      options={APPLICANT_SORT_OPTIONS.map((option) => option.label)}
+      className="!w-28 md:!w-40"
+      initialValue={currentLabel}
+      onChange={handleSortChange}
+    />
+  );
+}
diff --git a/src/app/(pages)/myAlbaform/(role)/applicant/page.tsx b/src/app/(pages)/myAlbaform/(role)/applicant/page.tsx
new file mode 100644
index 00000000..b2708b2f
--- /dev/null
+++ b/src/app/(pages)/myAlbaform/(role)/applicant/page.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import React from "react";
+import { useEffect } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useInView } from "react-intersection-observer";
+import { useUser } from "@/hooks/queries/user/me/useUser";
+import { userRoles } from "@/constants/userRoles";
+import SearchSection from "@/app/components/layout/forms/SearchSection";
+import MyApplicationListItem from "@/app/components/card/cardList/MyApplicationListItem";
+import { useMyApplications } from "@/hooks/queries/user/me/useMyApplications";
+import ApplicantSortSection from "./components/ApplicantSortSection";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+import ContentSection from "@/app/components/layout/ContentSection";
+
+const APPLICATIONS_PER_PAGE = 10;
+
+export default function ApplicantPage() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const { user, isLoading: isUserLoading } = useUser();
+
+  // 무한 스크롤을 위한 Intersection Observer 설정
+  const { ref, inView } = useInView({
+    threshold: 0.1,
+    triggerOnce: false,
+    rootMargin: "100px",
+  });
+
+  // 검색 및 정렬 상태 관리
+  const status = searchParams.get("status") || undefined;
+  const keyword = searchParams.get("keyword") || undefined;
+
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading: isLoadingData,
+    error,
+  } = useMyApplications({
+    limit: APPLICATIONS_PER_PAGE,
+    status,
+    keyword,
+  });
+
+  useEffect(() => {
+    if (!isUserLoading) {
+      if (!user) {
+        router.push("/login");
+      } else if (user.role === userRoles.OWNER) {
+        router.push("/myalbaform/owner");
+      }
+    }
+  }, [user, isUserLoading, router]);
+
+  // 스크롤이 하단에 도달하면 다음 페이지 로드
+  useEffect(() => {
+    if (inView && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  // 에러 상태 처리
+  if (error) {
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <p className="text-red-500">지원 내역을 불러오는데 실패했습니다.</p>
+      </div>
+    );
+  }
+
+  // 로딩 상태 처리
+  if (isUserLoading || isLoadingData) {
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center">
+      {/* 검색 섹션과 필터를 고정 위치로 설정 */}
+      <div className="fixed left-0 right-0 top-16 z-30 bg-white shadow-sm">
+        {/* 검색 섹션 */}
+        <div className="w-full border-b border-line-100">
+          <div className="mx-auto flex max-w-screen-xl flex-col gap-4 px-4 py-4 md:px-6 lg:px-8">
+            <SearchSection pathname={pathname} />
+          </div>
+        </div>
+
+        {/* 필터 섹션 */}
+        <div className="w-full border-b border-line-100">
+          <div className="mx-auto flex max-w-screen-xl items-center justify-between gap-2 px-4 py-4 md:px-6 lg:px-8">
+            <ApplicantSortSection pathname={pathname} searchParams={searchParams} />
+          </div>
+        </div>
+      </div>
+
+      {/* 메인 콘텐츠 영역 */}
+      <div className="w-full pt-[132px]">
+        {!data?.pages?.[0]?.data?.length ? (
+          <div className="flex h-[calc(100vh-200px)] flex-col items-center justify-center">
+            <p className="text-grayscale-500">지원 내역이 없습니다.</p>
+          </div>
+        ) : (
+          <div className="mx-auto mt-4 w-full max-w-screen-xl px-3">
+            <ContentSection>
+              {data?.pages.map((page) => (
+                <React.Fragment key={page.nextCursor}>
+                  {page.data.map((application) => (
+                    <div key={application.id}>
+                      <MyApplicationListItem
+                        id={application.id}
+                        createdAt={application.createdAt}
+                        updatedAt={application.updatedAt}
+                        status={application.status}
+                        resumeId={application.resumeId}
+                        resumeName={application.resumeName}
+                        form={application.form}
+                      />
+                    </div>
+                  ))}
+                </React.Fragment>
+              ))}
+            </ContentSection>
+
+            {/* 무한 스크롤 트리거 영역 */}
+            <div ref={ref} className="h-4 w-full">
+              {isFetchingNextPage && (
+                <div className="flex justify-center py-4">
+                  <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary-orange-300 border-t-transparent" />
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/myAlbaform/(role)/owner/page.tsx b/src/app/(pages)/myAlbaform/(role)/owner/page.tsx
new file mode 100644
index 00000000..3b378949
--- /dev/null
+++ b/src/app/(pages)/myAlbaform/(role)/owner/page.tsx
@@ -0,0 +1,232 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+import { useMyForms } from "@/hooks/queries/user/me/useMyForms";
+import FilterDropdown from "@/app/components/button/dropdown/FilterDropdown";
+import { filterRecruitingOptions, filterPublicOptions } from "@/constants/filterOptions";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+import SortSection from "@/app/components/layout/forms/SortSection";
+import AlbaListItem from "@/app/components/card/cardList/AlbaListItem";
+import SearchSection from "@/app/components/layout/forms/SearchSection";
+import { useUser } from "@/hooks/queries/user/me/useUser";
+import Link from "next/link";
+import { IoAdd } from "react-icons/io5";
+import { userRoles } from "@/constants/userRoles";
+import FloatingBtn from "@/app/components/button/default/FloatingBtn";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+import ContentSection from "@/app/components/layout/ContentSection";
+
+const FORMS_PER_PAGE = 10;
+
+export default function AlbaList() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const { user, isLoading } = useUser();
+  const isOwner = user?.role === userRoles.OWNER;
+
+  useEffect(() => {
+    if (!isLoading) {
+      if (!user) {
+        router.push("/login");
+      } else if (user.role !== userRoles.OWNER) {
+        router.push("/myalbaform/applicant");
+      }
+    }
+  }, [user, isLoading, router]);
+
+  // URL 쿼리 파라미터에서 필터 상태와 키워드 가져오기
+  const isPublic = searchParams.get("isPublic");
+  const isRecruiting = searchParams.get("isRecruiting");
+  const keyword = searchParams.get("keyword");
+  const orderBy = searchParams.get("orderBy");
+
+  // 초기 마운트 시 필터 값 설정
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams);
+    let needsUpdate = false;
+
+    if (!params.has("isPublic")) {
+      params.set("isPublic", "true");
+      needsUpdate = true;
+    }
+    if (!params.has("isRecruiting")) {
+      params.set("isRecruiting", "true");
+      needsUpdate = true;
+    }
+    if (needsUpdate) {
+      router.push(`${pathname}?${params.toString()}`);
+    }
+  }, []);
+
+  // 무한 스크롤을 위한 Intersection Observer 설정
+  const { ref, inView } = useInView({
+    threshold: 0.1,
+    triggerOnce: false,
+    rootMargin: "100px",
+  });
+
+  // 알바폼 목록 조회
+  const {
+    data,
+    isLoading: isLoadingData,
+    error,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = useMyForms({
+    limit: FORMS_PER_PAGE,
+    isPublic: isPublic === "true" ? true : isPublic === "false" ? false : undefined,
+    isRecruiting: isRecruiting === "true" ? true : isRecruiting === "false" ? false : undefined,
+    keyword: keyword || undefined,
+    orderBy: orderBy || undefined,
+  });
+
+  // 공개 여부 필터 변경 함수
+  const handlePublicFilter = (selected: string) => {
+    const option = filterPublicOptions.find((opt) => opt.label === selected);
+    if (option) {
+      const params = new URLSearchParams(searchParams);
+      if (selected === "전체") {
+        params.delete("isPublic");
+      } else {
+        params.set("isPublic", String(option.value));
+      }
+      router.push(`${pathname}?${params.toString()}`);
+    }
+  };
+
+  // 현재 필터 상태에 따른 초기값 설정
+  const getInitialPublicValue = (isPublic: string | null) => {
+    if (!isPublic) return "전체";
+    const option = filterPublicOptions.find((opt) => String(opt.value) === isPublic);
+    return option?.label || "전체";
+  };
+
+  // 모집 여부 필터 변경 함수
+  const handleRecruitingFilter = (selected: string) => {
+    const option = filterRecruitingOptions.find((opt) => opt.label === selected);
+    if (option) {
+      const params = new URLSearchParams(searchParams);
+      if (selected === "전체") {
+        params.delete("isRecruiting");
+      } else {
+        params.set("isRecruiting", String(option.value));
+      }
+      router.push(`${pathname}?${params.toString()}`);
+    }
+  };
+
+  // 현재 필터 상태에 따른 초기값 설정
+  const getInitialRecruitingValue = (isRecruiting: string | null) => {
+    if (!isRecruiting) return "전체";
+    const option = filterRecruitingOptions.find((opt) => String(opt.value) === isRecruiting);
+    return option?.label || "전체";
+  };
+
+  // 스크롤이 하단에 도달하면 다음 페이지 로드
+  useEffect(() => {
+    if (inView && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [inView, hasNextPage, fetchNextPage, isFetchingNextPage]);
+
+  // 에러 상태 처리
+  if (error) {
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <p className="text-red-500">알바 목록을 불러오는데 실패했습니다.</p>
+      </div>
+    );
+  }
+
+  // 로딩 상태 처리
+  if (isLoadingData) {
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center">
+      {/* 검색 섹션과 필터 드롭다운을 고정 위치로 설정 */}
+      <div className="fixed left-0 right-0 top-16 z-30 bg-white shadow-sm">
+        {/* 검색 섹션 */}
+        <div className="w-full border-b border-line-100">
+          <div className="mx-auto flex max-w-screen-xl flex-col gap-4 px-4 py-4 md:px-6 lg:px-8">
+            <div className="flex items-center justify-between">
+              <SearchSection pathname={pathname} />
+            </div>
+          </div>
+        </div>
+
+        {/* 필터 드롭다운 섹션 */}
+        <div className="w-full border-b border-line-100">
+          <div className="mx-auto flex max-w-screen-xl items-center justify-between gap-2 px-4 py-4 md:px-6 lg:px-8">
+            <div className="flex items-center gap-2">
+              <FilterDropdown
+                options={filterPublicOptions.map((option) => option.label)}
+                initialValue={getInitialPublicValue(isPublic)}
+                onChange={handlePublicFilter}
+              />
+              <FilterDropdown
+                options={filterRecruitingOptions.map((option) => option.label)}
+                initialValue={getInitialRecruitingValue(isRecruiting)}
+                onChange={handleRecruitingFilter}
+              />
+            </div>
+            <div className="flex items-center gap-4">
+              <SortSection pathname={pathname} searchParams={searchParams} />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 메인 콘텐츠 영역 */}
+      <div className="w-full pt-[132px]">
+        {/* 폼 만들기 버튼 - 고정 위치 */}
+        {isOwner && (
+          <Link href="/addform" className="fixed bottom-[50%] right-4 z-[9999] translate-y-1/2">
+            <FloatingBtn icon={<IoAdd className="size-6" />} variant="orange">
+              폼 만들기
+            </FloatingBtn>
+          </Link>
+        )}
+
+        {!data?.pages?.[0]?.data?.length ? (
+          <div className="flex h-[calc(100vh-200px)] flex-col items-center justify-center">
+            <p className="text-grayscale-500">등록된 알바 공고가 없습니다.</p>
+          </div>
+        ) : (
+          <div className="mx-auto mt-4 w-full max-w-screen-xl px-3">
+            <ContentSection>
+              {data?.pages.map((page) => (
+                <React.Fragment key={page.nextCursor}>
+                  {page.data.map((form) => (
+                    <div key={form.id}>
+                      <Link href={`/alba/${form.id}`}>
+                        <AlbaListItem {...form} />
+                      </Link>
+                    </div>
+                  ))}
+                </React.Fragment>
+              ))}
+            </ContentSection>
+
+            {/* 무한 스크롤 트리거 영역 */}
+            <div ref={ref} className="h-4 w-full">
+              {isFetchingNextPage && (
+                <div className="flex justify-center py-4">
+                  <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary-orange-300 border-t-transparent" />
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/myAlbaform/layout.tsx b/src/app/(pages)/myAlbaform/layout.tsx
new file mode 100644
index 00000000..8e7d7314
--- /dev/null
+++ b/src/app/(pages)/myAlbaform/layout.tsx
@@ -0,0 +1,18 @@
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+import React, { Suspense } from "react";
+
+export default function MyAlbaFormLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 py-8">
+      <Suspense
+        fallback={
+          <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+            <LoadingSpinner />
+          </div>
+        }
+      >
+        {children}
+      </Suspense>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/myAlbaform/page.tsx b/src/app/(pages)/myAlbaform/page.tsx
index e1eb5199..de9746bf 100644
--- a/src/app/(pages)/myAlbaform/page.tsx
+++ b/src/app/(pages)/myAlbaform/page.tsx
@@ -1,5 +1,36 @@
 "use client";
 
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useUser } from "@/hooks/queries/user/me/useUser";
+import { userRoles } from "@/constants/userRoles";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+
 export default function MyAlbaForm() {
-  return <div>MyAlbaForm</div>;
+  const router = useRouter();
+  const { user, isLoading } = useUser();
+
+  useEffect(() => {
+    if (!isLoading) {
+      if (!user) {
+        router.push("/login");
+      } else {
+        if (user.role === userRoles.OWNER) {
+          router.push("/myalbaform/owner");
+        } else {
+          router.push("/myalbaform/applicant");
+        }
+      }
+    }
+  }, [user, isLoading, router]);
+
+  if (isLoading) {
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  return null;
 }
diff --git a/src/app/(pages)/myapply/[formId]/page.tsx b/src/app/(pages)/myapply/[formId]/page.tsx
new file mode 100644
index 00000000..49596bf6
--- /dev/null
+++ b/src/app/(pages)/myapply/[formId]/page.tsx
@@ -0,0 +1,44 @@
+import CardChipIcon from "@/app/components/card/cardList/CardChipIcon";
+import Chip from "@/app/components/chip/Chip";
+import React from "react";
+
+// 알바폼 지원내역 상세 페이지
+export default function MyApplyPage({ formId }: { formId: number }) {
+  return (
+    <div className="container flex min-h-screen flex-col">
+      <div className="h-[562px] bg-black-100">지도영역</div>
+      <div className="mt-20 w-[770px] space-y-10">
+        <div className="flex items-center">
+          <Chip label="공개여부" variant="positive" />
+          <Chip label="모집중" variant="positive" />
+          <p className="text-sm text-grayscale-500">2024. 05. 04 12:30:54 등록</p>
+        </div>
+        <div className="mb-4 flex gap-4">
+          <span className="text-base text-black-400 underline">코드잇</span>
+          <span className="text-grayscale-500">서울 종로구 ・ 경력 무관</span>
+        </div>
+        <p className="text-3xl font-bold">코드잇 스터디카페 관리 (주말 오전) 모집합니다 서울 종로구 용산구 서대문 </p>
+        <CardChipIcon
+          formData={{
+            updatedAt: new Date(),
+            createdAt: new Date(),
+            isPublic: true,
+            scrapCount: 0,
+            applyCount: 0,
+            imageUrls: [],
+            recruitmentEndDate: new Date(),
+            recruitmentStartDate: new Date(),
+            title: "제목",
+            id: 1,
+          }}
+        />
+        <div className="text-2xl">
+          코드잇 스터디 카페입니다. 주말 토, 일 오픈업무 하실 분 구합니다. 성실하게 일하실 분들만 지원 바랍니다. 작성한
+          이력서(사진 부착)를 알바폼에 첨부해주시고, 아래와 같이 문자 보내주세요. 근무 중 전화통화 불가합니다. 예)
+          OOO입니다. __에 거주합니다. 알바폼 지원. 이력서 검토 후 면접진행자에 한해 면접일정 개별 연락드리겠습니다. 많은
+          지원 바랍니다.
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/myapply/layout.tsx b/src/app/(pages)/myapply/layout.tsx
new file mode 100644
index 00000000..94c8728f
--- /dev/null
+++ b/src/app/(pages)/myapply/layout.tsx
@@ -0,0 +1,18 @@
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+import React, { Suspense } from "react";
+
+export default function MyApplyLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 py-8">
+      <Suspense
+        fallback={
+          <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+            <LoadingSpinner />
+          </div>
+        }
+      >
+        {children}
+      </Suspense>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/mypage/components/FilterBar/SortSection.tsx b/src/app/(pages)/mypage/components/FilterBar/SortSection.tsx
new file mode 100644
index 00000000..c3a70baa
--- /dev/null
+++ b/src/app/(pages)/mypage/components/FilterBar/SortSection.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import React from "react";
+import { useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import { useMySortStore } from "@/store/mySortStore";
+import FilterDropdown from "@/app/components/button/dropdown/FilterDropdown";
+import { SORT_OPTIONS, DEFAULT_SORT_VALUES } from "./constants";
+
+export default function SortSection() {
+  const searchParams = useSearchParams();
+  const currentTab = (searchParams.get("tab") || "posts") as keyof typeof SORT_OPTIONS;
+  const { orderBy, setOrderBy } = useMySortStore();
+  const options = SORT_OPTIONS[currentTab];
+  const currentLabel = options.find((opt) => opt.value === orderBy[currentTab])?.label || options[0].label;
+  const isReadOnly = currentTab === "comments";
+
+  useEffect(() => {
+    setOrderBy(currentTab, DEFAULT_SORT_VALUES[currentTab]);
+  }, [currentTab, setOrderBy]);
+
+  const handleSortChange = (selected: string) => {
+    const option = options.find((opt) => opt.label === selected);
+    if (option) {
+      setOrderBy(currentTab, option.value);
+    }
+  };
+
+  return (
+    <FilterDropdown
+      options={options.map((option) => option.label)}
+      className="!w-28 md:!w-40"
+      initialValue={currentLabel}
+      onChange={handleSortChange}
+      readOnly={isReadOnly}
+    />
+  );
+}
diff --git a/src/app/(pages)/mypage/components/FilterBar/TabMenu.tsx b/src/app/(pages)/mypage/components/FilterBar/TabMenu.tsx
new file mode 100644
index 00000000..96b61223
--- /dev/null
+++ b/src/app/(pages)/mypage/components/FilterBar/TabMenu.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/tailwindUtil";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { TABS } from "./constants";
+
+export default function TabMenu() {
+  const searchParams = useSearchParams();
+  const currentTab = searchParams.get("tab") || "posts";
+
+  const createQueryString = (tab: string) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("tab", tab);
+
+    if (tab !== "scrap") {
+      params.delete("isPublic");
+      params.delete("isRecruiting");
+    }
+
+    return params.toString();
+  };
+
+  const getLinkClassName = (value: string) => {
+    return cn(
+      "py-4 py-2 text-sm font-medium transition-colors sm:text-base",
+      "hover:text-grayscale-900",
+      currentTab === value ? "border-b-2 border-primary-orange-300 text-grayscale-900" : "text-grayscale-500"
+    );
+  };
+
+  return (
+    <div className="flex gap-4 lg:gap-8">
+      {TABS.map((tab) => (
+        <Link key={tab.value} href={`/mypage?${createQueryString(tab.value)}`} className={getLinkClassName(tab.value)}>
+          {tab.name}
+        </Link>
+      ))}
+    </div>
+  );
+}
diff --git a/src/app/(pages)/mypage/components/FilterBar/constants.ts b/src/app/(pages)/mypage/components/FilterBar/constants.ts
new file mode 100644
index 00000000..505805ed
--- /dev/null
+++ b/src/app/(pages)/mypage/components/FilterBar/constants.ts
@@ -0,0 +1,29 @@
+import { postSortOptions } from "@/constants/postOptions";
+import { formSortOptions } from "@/constants/formOptions";
+
+export const TABS = [
+  { name: "내가 쓴 글", value: "posts" },
+  { name: "내가 쓴 댓글", value: "comments" },
+  { name: "스크랩", value: "scrap" },
+] as const;
+
+export const SORT_OPTIONS = {
+  posts: [
+    { label: "최신순", value: postSortOptions.MOST_RECENT },
+    { label: "댓글순", value: postSortOptions.MOST_COMMENTED },
+    { label: "좋아요순", value: postSortOptions.MOST_LIKED },
+  ],
+  comments: [{ label: "최신순", value: postSortOptions.MOST_RECENT }],
+  scrap: [
+    { label: "최신순", value: formSortOptions.MOST_RECENT },
+    { label: "시급높은순", value: formSortOptions.HIGHEST_WAGE },
+    { label: "지원자 많은순", value: formSortOptions.MOST_APPLIED },
+    { label: "스크랩 많은순", value: formSortOptions.MOST_SCRAPPED },
+  ],
+} as const;
+
+export const DEFAULT_SORT_VALUES = {
+  posts: postSortOptions.MOST_RECENT,
+  comments: postSortOptions.MOST_RECENT,
+  scrap: formSortOptions.MOST_RECENT,
+} as const;
diff --git a/src/app/(pages)/mypage/components/FilterBar/index.tsx b/src/app/(pages)/mypage/components/FilterBar/index.tsx
new file mode 100644
index 00000000..13e0bd74
--- /dev/null
+++ b/src/app/(pages)/mypage/components/FilterBar/index.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import TabMenu from "./TabMenu";
+import SortSection from "./SortSection";
+import Button from "@/app/components/button/default/Button";
+import KebabDropdown from "@/app/components/button/dropdown/KebabDropdown";
+import { userRoles } from "@/constants/userRoles";
+import useModalStore from "@/store/modalStore";
+import { useUser } from "@/hooks/queries/user/me/useUser";
+
+export default function FilterBar() {
+  const { user, isLoading } = useUser();
+  const { openModal } = useModalStore();
+
+  if (isLoading) {
+    return null;
+  }
+
+  if (!user) {
+    return null;
+  }
+
+  const handleEditProfile = () => {
+    if (user.role === userRoles.APPLICANT) {
+      openModal("editMyProfile", {
+        fields: ["이름", "닉네임", "전화번호"],
+        onSubmit: () => {},
+      });
+    } else if (user.role === userRoles.OWNER) {
+      openModal("editOwnerProfile", {
+        fields: ["닉네임", "가게 이름", "가게 전화번호", "사장님 전화번호", "가게 위치"],
+        onSubmit: () => {},
+      });
+    }
+  };
+
+  const handleChangePassword = () => {
+    openModal("changePassword", {
+      fields: ["현재 비밀번호", "새 비밀번호", "새 비밀번호 확인"],
+      onSubmit: () => {},
+    });
+  };
+
+  const dropdownOptions = [
+    { label: "내 정보 수정", onClick: handleEditProfile },
+    { label: "비밀번호 변경", onClick: handleChangePassword },
+  ];
+
+  return (
+    <div className="w-full bg-white">
+      {/* 마이페이지 섹션 */}
+      <div className="flex items-center justify-between">
+        <h1 className="text-grayscale-900 py-4 text-xl font-bold sm:py-6 sm:text-2xl">마이페이지</h1>
+        {/* sm, md에서는 케밥 메뉴, lg 이상에서는 버튼 */}
+        <div>
+          <div className="hidden lg:flex lg:gap-2">
+            <Button variant="solid" width="sm" onClick={handleEditProfile}>
+              내 정보 수정
+            </Button>
+            <Button variant="outlined" width="sm" onClick={handleChangePassword}>
+              비밀번호 변경
+            </Button>
+          </div>
+          <div className="lg:hidden">
+            <KebabDropdown options={dropdownOptions} />
+          </div>
+        </div>
+      </div>
+
+      {/* 탭 메뉴 섹션 */}
+      <nav className="border-b border-line-100">
+        <div className="mx-auto flex max-w-screen-xl items-center justify-between py-4">
+          <TabMenu />
+          <SortSection />
+        </div>
+      </nav>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/mypage/components/sections/CommentsSection.tsx b/src/app/(pages)/mypage/components/sections/CommentsSection.tsx
new file mode 100644
index 00000000..8b6ee157
--- /dev/null
+++ b/src/app/(pages)/mypage/components/sections/CommentsSection.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import React from "react";
+import { useState, useEffect } from "react";
+import { useMyComments } from "@/hooks/queries/user/me/useMyComments";
+import Pagination from "@/app/components/pagination/Pagination";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+import BoardComment from "@/app/components/card/board/BoardComment";
+import ContentSection from "@/app/components/layout/ContentSection";
+import useWidth from "@/hooks/useWidth";
+
+export default function CommentsSection() {
+  const [currentPage, setCurrentPage] = useState(1);
+  const { isMobile, isTablet, isDesktop } = useWidth();
+
+  // 화면 크기에 따른 페이지당 댓글 수 계산
+  const getCommentsPerPage = () => {
+    if (isMobile) return 2; // 1열 x 2줄 = 2개
+    if (isTablet) return 4; // 2열 x 2줄 = 4개
+    if (isDesktop) return 6; // 3열 x 2줄 = 6개
+    return 8; // xl 사이즈: 4열 x 2줄 = 8개
+  };
+
+  const commentsPerPage = getCommentsPerPage();
+
+  const { data, isLoading, error } = useMyComments({
+    page: currentPage,
+    pageSize: commentsPerPage,
+  });
+
+  const totalPages = data ? Math.ceil(data.totalItemCount / commentsPerPage) : 0;
+
+  // 화면 크기가 변경될 때 현재 페이지 재조정
+  useEffect(() => {
+    const newTotalPages = data ? Math.ceil(data.totalItemCount / commentsPerPage) : 0;
+    if (currentPage > newTotalPages && newTotalPages > 0) {
+      setCurrentPage(newTotalPages);
+    }
+  }, [commentsPerPage, data, currentPage]);
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    window.scrollTo(0, 0);
+  };
+
+  if (error) {
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <p className="text-red-500">댓글을 불러오는데 실패했습니다.</p>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  if (!data?.data?.length) {
+    return (
+      <div className="flex h-[calc(100vh-200px)] flex-col items-center justify-center">
+        <p className="text-grayscale-500">작성한 댓글이 없습니다.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center">
+      <div className="mx-auto mt-4 w-full max-w-screen-xl px-3">
+        <ContentSection>
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {data.data.map((comment) => (
+              <div key={comment.id} className="flex justify-center">
+                <BoardComment
+                  id={comment.id.toString()}
+                  postId={comment.post.id.toString()}
+                  postTitle={comment.post.title}
+                  comment={comment.content}
+                  updatedAt={comment.updatedAt}
+                  isAuthor={true}
+                />
+              </div>
+            ))}
+          </div>
+        </ContentSection>
+
+        {/* 페이지네이션 */}
+        {totalPages > 1 && (
+          <div className="mt-12 flex justify-center">
+            <Pagination totalPage={totalPages} currentPage={currentPage} onPageChange={handlePageChange} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/mypage/components/sections/PostsSection.tsx b/src/app/(pages)/mypage/components/sections/PostsSection.tsx
new file mode 100644
index 00000000..a9c16576
--- /dev/null
+++ b/src/app/(pages)/mypage/components/sections/PostsSection.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+import { useMyPosts } from "@/hooks/queries/user/me/useMyPosts";
+import { useMySortStore } from "@/store/mySortStore";
+import { useProfileStringValue } from "@/hooks/queries/user/me/useProfileStringValue";
+import Link from "next/link";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+import ContentSection from "@/app/components/layout/ContentSection";
+import SortSection from "@/app/components/layout/posts/SortSection";
+import { usePathname, useSearchParams } from "next/navigation";
+import Image from "next/image";
+import { formatLocalDate } from "@/utils/workDayFormatter";
+import useWidth from "@/hooks/useWidth";
+
+export default function PostsSection() {
+  const { orderBy } = useMySortStore();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const { isMobile, isTablet, isDesktop } = useWidth();
+  useProfileStringValue();
+
+  // 화면 크기에 따른 페이지당 게시글 수 계산
+  const getPostsPerPage = () => {
+    if (isMobile) return 2; // 1열 x 2줄 = 2개
+    if (isTablet) return 4; // 2열 x 2줄 = 4개
+    if (isDesktop) return 6; // 3열 x 2줄 = 6개
+    return 8; // xl 사이즈: 4열 x 2줄 = 8개
+  };
+
+  const postsPerPage = getPostsPerPage();
+
+  const { ref, inView } = useInView({
+    threshold: 0.1,
+    triggerOnce: false,
+    rootMargin: "100px",
+  });
+
+  const { data, isLoading, error, hasNextPage, fetchNextPage, isFetchingNextPage } = useMyPosts({
+    limit: postsPerPage,
+    orderBy: orderBy.posts,
+  });
+
+  useEffect(() => {
+    if (inView && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [inView, hasNextPage, fetchNextPage, isFetchingNextPage]);
+
+  if (error) {
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <p className="text-red-500">게시글을 불러오는데 실패했습니다.</p>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center">
+      {/* 정렬 옵션 섹션 */}
+      <div className="fixed left-0 right-0 top-16 z-30 bg-white shadow-sm">
+        <div className="w-full border-b border-line-100">
+          <div className="mx-auto flex max-w-screen-xl items-center justify-end gap-2 px-4 py-4 md:px-6 lg:px-8">
+            <div className="flex items-center gap-4">
+              <SortSection pathname={pathname} searchParams={searchParams} />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 메인 콘텐츠 영역 */}
+      <div className="w-full">
+        {!data?.pages?.[0]?.data?.length ? (
+          <div className="flex h-[calc(100vh-200px)] flex-col items-center justify-center">
+            <p className="text-grayscale-500">작성한 게시글이 없습니다.</p>
+          </div>
+        ) : (
+          <div className="mx-auto mt-4 w-full max-w-screen-xl px-3">
+            <ContentSection>
+              <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                {data.pages.map((page) => (
+                  <React.Fragment key={page.nextCursor}>
+                    {page.data.map((post) => (
+                      <div key={post.id} className="flex justify-center">
+                        <Link
+                          href={`/albatalk/${post.id}`}
+                          className="block cursor-pointer transition-transform duration-300 hover:scale-[1.02]"
+                        >
+                          <div className="rounded-lg border border-grayscale-100 bg-white p-6">
+                            <div className="flex flex-col gap-4">
+                              {/* 제목 */}
+                              <h3 className="text-lg font-semibold text-black-400 md:text-xl">{post.title}</h3>
+
+                              {/* 내용 */}
+                              <p className="line-clamp-2 text-sm text-grayscale-400 md:text-base">{post.content}</p>
+
+                              {/* 하단 정보 */}
+                              <div className="flex items-center justify-between">
+                                <div className="flex items-center gap-2">
+                                  <span className="text-sm font-medium text-black-400 md:text-base">
+                                    {post.writer.nickname}
+                                  </span>
+                                  <span className="text-grayscale-400">|</span>
+                                  <span className="text-sm text-grayscale-400 md:text-base">
+                                    {formatLocalDate(post.updatedAt)}
+                                  </span>
+                                </div>
+                                <div className="flex items-center gap-4">
+                                  <div className="flex items-center gap-1">
+                                    <Image src="/icons/comment/comment-sm.svg" alt="댓글" width={20} height={20} />
+                                    <span className="text-sm text-grayscale-400">{post.commentCount}</span>
+                                  </div>
+                                  <div className="flex items-center gap-1">
+                                    <Image src="/icons/like/like-sm.svg" alt="좋아요" width={20} height={20} />
+                                    <span className="text-sm text-grayscale-400">{post.likeCount}</span>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </Link>
+                      </div>
+                    ))}
+                  </React.Fragment>
+                ))}
+              </div>
+            </ContentSection>
+
+            {/* 무한 스크롤 트리거 영역 */}
+            <div ref={ref} className="h-4 w-full">
+              {isFetchingNextPage && (
+                <div className="flex justify-center py-4">
+                  <LoadingSpinner />
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/mypage/components/sections/ScrapsSection.tsx b/src/app/(pages)/mypage/components/sections/ScrapsSection.tsx
new file mode 100644
index 00000000..012aae93
--- /dev/null
+++ b/src/app/(pages)/mypage/components/sections/ScrapsSection.tsx
@@ -0,0 +1,183 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+import { useMyScraps } from "@/hooks/queries/user/me/useMyScraps";
+import { useMySortStore } from "@/store/mySortStore";
+import type { FormListType } from "@/types/response/form";
+import FilterDropdown from "@/app/components/button/dropdown/FilterDropdown";
+import { filterPublicOptions, filterRecruitingOptions } from "@/constants/filterOptions";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+import AlbaListItem from "@/app/components/card/cardList/AlbaListItem";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+import Link from "next/link";
+import ContentSection from "@/app/components/layout/ContentSection";
+
+const SCRAPS_PER_PAGE = 10;
+
+export default function ScrapsSection() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  // URL 쿼리 파라미터에서 필터 상태 가져오기
+  const isPublic = searchParams.get("isPublic");
+  const isRecruiting = searchParams.get("isRecruiting");
+  const { orderBy } = useMySortStore();
+
+  // 초기 마운트 시 필터 값 설정
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams);
+    let needsUpdate = false;
+
+    if (!params.has("isPublic")) {
+      params.set("isPublic", "true");
+      needsUpdate = true;
+    }
+    if (!params.has("isRecruiting")) {
+      params.set("isRecruiting", "true");
+      needsUpdate = true;
+    }
+    if (needsUpdate) {
+      params.set("tab", "scrap");
+      router.push(`${pathname}?${params.toString()}`);
+    }
+  }, []);
+
+  // 무한 스크롤을 위한 Intersection Observer 설정
+  const { ref, inView } = useInView({
+    threshold: 0.1,
+    triggerOnce: true,
+    rootMargin: "100px",
+  });
+
+  // 내가 스크랩한 폼 목록 조회
+  const { data, isLoading, error, hasNextPage, fetchNextPage, isFetchingNextPage } = useMyScraps({
+    limit: SCRAPS_PER_PAGE,
+    orderBy: orderBy.scrap,
+    isPublic: isPublic === "true" ? true : isPublic === "false" ? false : undefined,
+    isRecruiting: isRecruiting === "true" ? true : isRecruiting === "false" ? false : undefined,
+  });
+
+  // 공개 여부 필터 변경 함수
+  const handlePublicFilter = (selected: string) => {
+    const option = filterPublicOptions.find((opt) => opt.label === selected);
+    if (option) {
+      const params = new URLSearchParams(searchParams);
+      if (selected === "전체") {
+        params.delete("isPublic");
+      } else {
+        params.set("isPublic", String(option.value));
+      }
+      params.set("tab", "scrap");
+      router.push(`${pathname}?${params.toString()}`);
+    }
+  };
+
+  // 모집 여부 필터 변경 함수
+  const handleRecruitingFilter = (selected: string) => {
+    const option = filterRecruitingOptions.find((opt) => opt.label === selected);
+    if (option) {
+      const params = new URLSearchParams(searchParams);
+      if (selected === "전체") {
+        params.delete("isRecruiting");
+      } else {
+        params.set("isRecruiting", String(option.value));
+      }
+      params.set("tab", "scrap");
+      router.push(`${pathname}?${params.toString()}`);
+    }
+  };
+
+  // 현재 필터 상태에 따른 초기값 설정을 위한 함수들
+  const getInitialPublicValue = (isPublic: string | null) => {
+    if (!isPublic) return "전체";
+    const option = filterPublicOptions.find((opt) => String(opt.value) === isPublic);
+    return option?.label || "전체";
+  };
+
+  const getInitialRecruitingValue = (isRecruiting: string | null) => {
+    if (!isRecruiting) return "전체";
+    const option = filterRecruitingOptions.find((opt) => String(opt.value) === isRecruiting);
+    return option?.label || "전체";
+  };
+
+  // 스크롤이 하단에 도달하면 다음 페이지 로드
+  useEffect(() => {
+    if (inView && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [inView, hasNextPage, fetchNextPage, isFetchingNextPage]);
+
+  // 에러 상태 처리
+  if (error) {
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <p className="text-red-500">스크랩을 불러오는데 실패했습니다.</p>
+      </div>
+    );
+  }
+
+  // 로딩 상태 처리
+  if (isLoading) {
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* 필터 드롭다운 섹션 */}
+      <div className="w-full border-b border-line-100">
+        <div className="mx-auto flex max-w-screen-xl items-center justify-between gap-2 py-4">
+          <div className="flex items-center gap-2">
+            <FilterDropdown
+              options={filterPublicOptions.map((option) => option.label)}
+              initialValue={getInitialPublicValue(isPublic)}
+              onChange={handlePublicFilter}
+            />
+            <FilterDropdown
+              options={filterRecruitingOptions.map((option) => option.label)}
+              initialValue={getInitialRecruitingValue(isRecruiting)}
+              onChange={handleRecruitingFilter}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* 스크랩 목록 렌더링 */}
+      {!data?.pages?.[0]?.data?.length ? (
+        <div className="flex h-[calc(100vh-200px)] flex-col items-center justify-center">
+          <p className="text-grayscale-500">스크랩한 공고가 없습니다.</p>
+        </div>
+      ) : (
+        <div className="mx-auto mt-4 w-full max-w-screen-xl px-3">
+          <ContentSection>
+            {data?.pages.map((page) => (
+              <React.Fragment key={page.nextCursor}>
+                {page.data.map((scrap: FormListType) => (
+                  <div key={scrap.id}>
+                    <Link href={`/alba/${scrap.id}/`}>
+                      <AlbaListItem {...scrap} />
+                    </Link>
+                  </div>
+                ))}
+              </React.Fragment>
+            ))}
+          </ContentSection>
+
+          {/* 무한 스크롤 트리거 영역 */}
+          <div ref={ref} className="h-4 w-full">
+            {isFetchingNextPage && (
+              <div className="flex justify-center py-4">
+                <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary-orange-300 border-t-transparent" />
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(pages)/mypage/layout.tsx b/src/app/(pages)/mypage/layout.tsx
new file mode 100644
index 00000000..cf931ebc
--- /dev/null
+++ b/src/app/(pages)/mypage/layout.tsx
@@ -0,0 +1,18 @@
+import { Suspense } from "react";
+import FilterBar from "./components/FilterBar";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+
+interface MypageLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function MypageLayout({ children }: MypageLayoutProps) {
+  return (
+    <div className="mx-auto flex w-full min-w-[327px] max-w-screen-xl flex-col px-6">
+      <Suspense fallback={<LoadingSpinner />}>
+        <FilterBar />
+        {children}
+      </Suspense>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/mypage/page.tsx b/src/app/(pages)/mypage/page.tsx
index cb864b6b..6e625d72 100644
--- a/src/app/(pages)/mypage/page.tsx
+++ b/src/app/(pages)/mypage/page.tsx
@@ -1,5 +1,19 @@
 "use client";
 
-export default function Mypage() {
-  return <div>Mypage</div>;
+import { useSearchParams } from "next/navigation";
+import PostsSection from "./components/sections/PostsSection";
+import CommentsSection from "./components/sections/CommentsSection";
+import ScrapsSection from "./components/sections/ScrapsSection";
+
+export default function MyPage() {
+  const searchParams = useSearchParams();
+  const currentTab = searchParams.get("tab") || "posts";
+
+  const TabContent = {
+    posts: <PostsSection />,
+    comments: <CommentsSection />,
+    scrap: <ScrapsSection />,
+  }[currentTab];
+
+  return TabContent;
 }
diff --git a/src/app/api/(file)/images/upload/route.ts b/src/app/api/(file)/images/upload/route.ts
new file mode 100644
index 00000000..bc922c44
--- /dev/null
+++ b/src/app/api/(file)/images/upload/route.ts
@@ -0,0 +1,36 @@
+import { cookies } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+
+export async function POST(req: NextRequest) {
+  const accessToken = cookies().get("accessToken")?.value;
+
+  if (!accessToken) {
+    console.log("No access token found");
+    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+  }
+
+  try {
+    const formData = await req.formData();
+    try {
+      const response = await apiClient.post("/images/upload", formData, {
+        headers: {
+          Accept: "application/json",
+          Authorization: `Bearer ${accessToken}`,
+          "Content-Type": "multipart/form-data",
+        },
+      });
+      if (response.status === 201 && response.data?.url) {
+        return NextResponse.json(response.data, { status: 201 });
+      }
+
+      throw new Error("이미지 업로드에 실패했습니다.");
+    } catch (error) {
+      console.error("Upload failed:", error);
+      return NextResponse.json({ message: "이미지 업로드에 실패했습니다." }, { status: 500 });
+    }
+  } catch (error) {
+    console.error("File upload error:", error);
+    return NextResponse.json({ message: "파일 업로드 중 오류가 발생했습니다." }, { status: 500 });
+  }
+}
diff --git a/src/app/api/(file)/resume/[resumeId]/download/route.ts b/src/app/api/(file)/resume/[resumeId]/download/route.ts
new file mode 100644
index 00000000..489178c9
--- /dev/null
+++ b/src/app/api/(file)/resume/[resumeId]/download/route.ts
@@ -0,0 +1,42 @@
+import { AxiosError } from "axios";
+import { cookies } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+
+export async function GET(req: NextRequest, { params }: { params: { resumeId: string } }) {
+  try {
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const response = await apiClient.get(`/${params.resumeId}/download`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+      responseType: "arraybuffer",
+    });
+
+    // Content-Disposition 헤더에서 파일명 추출
+    const contentDisposition = response.headers["content-disposition"];
+    const filenameMatch = contentDisposition?.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
+    const filename = filenameMatch ? filenameMatch[1].replace(/['"]/g, "") : "resume.pdf";
+
+    // 파일 다운로드를 위한 응답 헤더 설정
+    return new NextResponse(response.data, {
+      headers: {
+        "Content-Type": response.headers["content-type"] || "application/pdf",
+        "Content-Disposition": `attachment; filename="${filename}"`,
+      },
+    });
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`GET /api/resume/${params.resumeId}/download error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/(file)/resume/upload/route.ts b/src/app/api/(file)/resume/upload/route.ts
new file mode 100644
index 00000000..8ce67d05
--- /dev/null
+++ b/src/app/api/(file)/resume/upload/route.ts
@@ -0,0 +1,56 @@
+import apiClient from "@/lib/apiClient";
+import { cookies } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(req: NextRequest) {
+  const accessToken = cookies().get("accessToken")?.value;
+
+  if (!accessToken) {
+    console.log("No access token found");
+    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+  }
+
+  try {
+    const formData = await req.formData();
+    const file = formData.get("file");
+    if (!file) {
+      console.log("No file found in request");
+      return NextResponse.json({ error: "파일이 필요합니다." }, { status: 400 });
+    }
+
+    // FormData 생성 및 파일 추가
+    const uploadFormData = new FormData();
+    uploadFormData.append("file", file);
+
+    const response = await apiClient.post("/resume/upload", uploadFormData, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "multipart/form-data",
+      },
+    });
+
+    if (response.data && typeof response.data === "object") {
+      const { resumeId, resumeName } = response.data;
+
+      if (resumeId && resumeName) {
+        return NextResponse.json({ resumeId, resumeName }, { status: 200 });
+      }
+    }
+
+    throw new Error("Invalid response format from file API");
+  } catch (error: any) {
+    console.error("Upload error:", {
+      message: error.message,
+      response: error.response?.data,
+      status: error.response?.status,
+    });
+
+    return NextResponse.json(
+      {
+        message: "Upload failed",
+        details: error.response?.data || error.message,
+      },
+      { status: error.response?.status || 500 }
+    );
+  }
+}
diff --git a/src/app/api/applications/[applicationId]/route.ts b/src/app/api/applications/[applicationId]/route.ts
new file mode 100644
index 00000000..3f025c28
--- /dev/null
+++ b/src/app/api/applications/[applicationId]/route.ts
@@ -0,0 +1,60 @@
+import { AxiosError } from "axios";
+import { cookies } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+
+// 지원서 상세 조회
+export async function GET(req: NextRequest, { params }: { params: { applicationId: string } }) {
+  try {
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const response = await apiClient.get(`/applications/${params.applicationId}`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`GET /api/applications/${params.applicationId} error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
+
+// 지원서 상태 수정
+export async function PATCH(req: NextRequest, { params }: { params: { applicationId: string } }) {
+  try {
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const body = await req.json();
+
+    const response = await apiClient.patch(`/applications/${params.applicationId}`, body, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`PATCH /api/applications/${params.applicationId} error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/auth/refresh/route.ts b/src/app/api/auth/refresh/route.ts
index bf02a06c..2cd9d192 100644
--- a/src/app/api/auth/refresh/route.ts
+++ b/src/app/api/auth/refresh/route.ts
@@ -4,10 +4,26 @@ import { NextResponse } from "next/server";
 import apiClient from "@/lib/apiClient";
 
 export const POST = async (): Promise<NextResponse> => {
+  const cookieStore = cookies();
+  const refreshToken = cookieStore.get("refreshToken");
+
+  if (!refreshToken) {
+    return new NextResponse(
+      JSON.stringify({
+        message: "리프레시 토큰이 없습니다. 다시 로그인해주세요.",
+      }),
+      {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  }
+
   try {
-    const refreshToken = cookies().get("refreshToken")?.value;
     // 토큰 갱신
-    const refreshResponse = await apiClient.post("/auth/refresh", { refreshToken });
+    const refreshResponse = await apiClient.post("/auth/refresh", {
+      refreshToken: refreshToken.value,
+    });
     const { accessToken } = refreshResponse.data;
 
     if (!accessToken) {
@@ -23,21 +39,7 @@ export const POST = async (): Promise<NextResponse> => {
       path: "/",
     });
 
-    // 새로운 accessToken으로 사용자 정보 조회
-    const userResponse = await apiClient.get("/users/me", {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-      },
-    });
-
-    const user = userResponse.data;
-
-    if (!user) {
-      return NextResponse.json({ message: "사용자 정보를 찾을 수 없습니다." }, { status: 404 });
-    }
-
-    // user 정보 반환
-    return NextResponse.json({ user }, { status: 200 });
+    return NextResponse.json(refreshResponse.data, { status: 200 });
   } catch (error: unknown) {
     if (error instanceof AxiosError) {
       console.error("Refresh token error:", error);
diff --git a/src/app/api/auth/signup/route.ts b/src/app/api/auth/signup/route.ts
index d0462325..ed21e197 100644
--- a/src/app/api/auth/signup/route.ts
+++ b/src/app/api/auth/signup/route.ts
@@ -2,22 +2,43 @@ import { AxiosError } from "axios";
 import { NextRequest, NextResponse } from "next/server";
 
 import apiClient from "@/lib/apiClient";
+import { userRoles } from "@/constants/userRoles";
 
 export const POST = async (request: NextRequest): Promise<NextResponse> => {
   try {
-    const { email, name, nickname, password, role, storeName, storePhoneNumber, phoneNumber, location } =
-      await request.json();
-    const response = await apiClient.post("/auth/sign-up", {
-      email,
-      name,
-      nickname,
-      password,
-      role,
-      storeName,
-      storePhoneNumber,
-      phoneNumber,
-      location,
-    });
+    const requestData = await request.json();
+    const { role } = requestData;
+
+    let data;
+    if (role === userRoles.APPLICANT) {
+      // 지원자의 경우 필요한 필드만 추출
+      const { email, password, name, nickname, phoneNumber, role } = requestData;
+
+      data = {
+        email,
+        password,
+        name,
+        nickname,
+        phoneNumber,
+        role,
+      };
+    } else {
+      // 사장님의 경우 필요한 필드만 추출
+      const { email, password, name, nickname, storeName, storePhoneNumber, location, role } = requestData;
+
+      data = {
+        email,
+        password,
+        name,
+        nickname,
+        storeName,
+        storePhoneNumber,
+        location,
+        role,
+      };
+    }
+
+    const response = await apiClient.post("/auth/sign-up", data);
     const { accessToken, refreshToken, user } = response.data;
 
     return NextResponse.json({ accessToken, refreshToken, user }, { status: 200 });
@@ -28,6 +49,6 @@ export const POST = async (request: NextRequest): Promise<NextResponse> => {
         return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
       }
     }
-    return NextResponse.json({ message: "로그인 실패" }, { status: 500 });
+    return NextResponse.json({ message: "회원가입 실패" }, { status: 500 });
   }
 };
diff --git a/src/app/api/comments/[commentId]/route.ts b/src/app/api/comments/[commentId]/route.ts
new file mode 100644
index 00000000..fd69fea3
--- /dev/null
+++ b/src/app/api/comments/[commentId]/route.ts
@@ -0,0 +1,60 @@
+import { AxiosError } from "axios";
+import { cookies } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+
+// 댓글 수정
+export async function PATCH(req: NextRequest, { params }: { params: { commentId: string } }) {
+  try {
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const body = await req.json();
+
+    const response = await apiClient.patch(`/comments/${params.commentId}`, body, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`PATCH /api/comments/${params.commentId} error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
+
+// 댓글 삭제
+export async function DELETE(req: NextRequest, { params }: { params: { commentId: string } }) {
+  try {
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const response = await apiClient.delete(`/comments/${params.commentId}`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`DELETE /api/comments/${params.commentId} error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/forms/[formId]/applications/myApplication/route.ts b/src/app/api/forms/[formId]/applications/myApplication/route.ts
new file mode 100644
index 00000000..dc9917f8
--- /dev/null
+++ b/src/app/api/forms/[formId]/applications/myApplication/route.ts
@@ -0,0 +1,31 @@
+import { AxiosError } from "axios";
+import { cookies } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+
+// 회원의 내 지원 내역 조회
+export async function GET(req: NextRequest, { params }: { params: { formId: string } }) {
+  try {
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const response = await apiClient.get(`/forms/${params.formId}/applications/my-application`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`GET /api/forms/${params.formId}/applications/myApplication error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/forms/[formId]/applications/myApplication/verify/route.ts b/src/app/api/forms/[formId]/applications/myApplication/verify/route.ts
new file mode 100644
index 00000000..7d14274d
--- /dev/null
+++ b/src/app/api/forms/[formId]/applications/myApplication/verify/route.ts
@@ -0,0 +1,31 @@
+import { AxiosError } from "axios";
+import { NextRequest, NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+
+// 비회원의 내 지원 내역 조회
+export async function POST(req: NextRequest, { params }: { params: { formId: string } }) {
+  try {
+    const body = await req.json();
+    const { name, phone, password } = body;
+
+    if (!name || !phone || !password) {
+      return NextResponse.json({ message: "이름, 전화번호, 비밀번호가 필요합니다." }, { status: 400 });
+    }
+
+    const response = await apiClient.post(`/forms/${params.formId}/applications/my-application/verify`, {
+      name,
+      phone,
+      password,
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`POST /api/forms/${params.formId}/applications/myApplication/verify error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/forms/[formId]/applications/route.ts b/src/app/api/forms/[formId]/applications/route.ts
new file mode 100644
index 00000000..5cc41938
--- /dev/null
+++ b/src/app/api/forms/[formId]/applications/route.ts
@@ -0,0 +1,76 @@
+import { AxiosError } from "axios";
+import { cookies } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+
+// 지원하기
+export async function POST(req: NextRequest, { params }: { params: { formId: string } }) {
+  try {
+    const accessToken = cookies().get("accessToken")?.value;
+    const body = await req.json();
+    console.log("apply 라우트에서 body출력", body);
+
+    // 토큰 없어도 비회원 apply 가능
+    if (!accessToken) {
+      const response = await apiClient.post(`/forms/${params.formId}/applications`, body, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      return NextResponse.json(response.data);
+    } else {
+      const response = await apiClient.post(`/forms/${params.formId}/applications`, body, {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "Content-Type": "application/json",
+        },
+      });
+      return NextResponse.json(response.data);
+    }
+  } catch (error: unknown) {
+    console.error(error);
+    if (error instanceof AxiosError) {
+      console.error(`POST /api/forms/${params.formId}/applications error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
+
+// 지원 현황 목록 조회
+export async function GET(req: NextRequest, { params }: { params: { formId: string } }) {
+  try {
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const { searchParams } = new URL(req.url);
+    const queryParams = {
+      formId: params.formId,
+      limit: searchParams.get("limit"),
+      cursor: searchParams.get("cursor"),
+      orderByExperience: searchParams.get("orderByExperience"),
+      orderByStatus: searchParams.get("orderByStatus"),
+    };
+    const response = await apiClient.get(`/forms/${params.formId}/applications`, {
+      params: queryParams,
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`GET /api/forms/${params.formId}/applications error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/forms/[formId]/route.ts b/src/app/api/forms/[formId]/route.ts
new file mode 100644
index 00000000..d395112d
--- /dev/null
+++ b/src/app/api/forms/[formId]/route.ts
@@ -0,0 +1,89 @@
+import { AxiosError } from "axios";
+import { cookies } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+
+// 알바폼 상세 조회(로그인 여부에 따라 다른 응답)
+export async function GET(req: NextRequest, { params }: { params: { formId: string } }) {
+  try {
+    const accessToken = cookies().get("accessToken")?.value;
+
+    // 로그인한 유저의 경우 토큰과 함께 요청
+    if (accessToken) {
+      const response = await apiClient.get(`/forms/${params.formId}`, {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+      return NextResponse.json(response.data);
+    }
+
+    // 로그인하지 않은 유저의 경우 토큰 없이 요청
+    const response = await apiClient.get(`/forms/${params.formId}`);
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`GET /api/forms/${params.formId} error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
+
+// 알바폼 수정
+export async function PATCH(req: NextRequest, { params }: { params: { formId: string } }) {
+  try {
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const body = await req.json();
+
+    const response = await apiClient.patch(`/forms/${params.formId}`, body, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`수정api요청 실패 : /api/forms/${params.formId} error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
+
+// 알바폼 삭제
+export async function DELETE(req: NextRequest, { params }: { params: { formId: string } }) {
+  try {
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const response = await apiClient.delete(`/forms/${params.formId}`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`DELETE /api/forms/${params.formId} error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/forms/[formId]/scrap/route.ts b/src/app/api/forms/[formId]/scrap/route.ts
new file mode 100644
index 00000000..c1d41ca1
--- /dev/null
+++ b/src/app/api/forms/[formId]/scrap/route.ts
@@ -0,0 +1,62 @@
+import { AxiosError } from "axios";
+import { cookies } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+
+// 알바폼 스크랩
+export async function POST(req: NextRequest, { params }: { params: { formId: string } }) {
+  try {
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const response = await apiClient.post(
+      `/forms/${params.formId}/scrap`,
+      {},
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      }
+    );
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`POST /api/forms/${params.formId}/scrap error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
+
+// 알바폼 스크랩 취소
+export async function DELETE(req: NextRequest, { params }: { params: { formId: string } }) {
+  try {
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const response = await apiClient.delete(`/forms/${params.formId}/scrap`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`DELETE /api/forms/${params.formId}/scrap error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/forms/route.ts b/src/app/api/forms/route.ts
new file mode 100644
index 00000000..a0d4b518
--- /dev/null
+++ b/src/app/api/forms/route.ts
@@ -0,0 +1,67 @@
+import { AxiosError } from "axios";
+import { cookies } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+import { cleanedParameters } from "@/utils/cleanedParameters";
+
+// 알바폼 생성
+export async function POST(req: NextRequest) {
+  try {
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const body = await req.json();
+
+    const response = await apiClient.post("/forms", body, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+    console.log(response.data);
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error("POST /api/forms error:", error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
+
+// 알바폼 목록 조회
+export async function GET(req: NextRequest) {
+  try {
+    const { searchParams } = new URL(req.url);
+    const params = {
+      cursor: searchParams.get("cursor"),
+      limit: searchParams.get("limit"),
+      orderBy: searchParams.get("orderBy"),
+      keyword: searchParams.get("keyword"),
+      isRecruiting: searchParams.get("isRecruiting"),
+    };
+
+    // null, undefined, 빈 문자열을 가진 파라미터 제거
+    const cleanedParams = cleanedParameters(params);
+
+    const response = await apiClient.get("/forms", {
+      params: cleanedParams,
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error("GET /api/forms error:", error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/oauth/apps/route.ts b/src/app/api/oauth/apps/route.ts
new file mode 100644
index 00000000..ec1f8736
--- /dev/null
+++ b/src/app/api/oauth/apps/route.ts
@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from "next/server";
+import { AxiosError } from "axios";
+import apiClient from "@/lib/apiClient";
+import { cookies } from "next/headers";
+
+// OAuth 앱 등록/수정 API
+export async function POST(request: NextRequest) {
+  try {
+    // 쿠키에서 액세스 토큰 가져오기
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    // 요청 본문 파싱
+    const body = await request.json();
+
+    // OAuth 앱 등록/수정 요청
+    const response = await apiClient.post("/oauth/apps", body, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    // 응답 데이터 처리
+    const responseData = response.data;
+    console.log("OAuth 앱 등록/수정 성공:", responseData);
+
+    return NextResponse.json(responseData);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error("POST /api/oauth/apps error:", error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/oauth/callback/google/route.ts b/src/app/api/oauth/callback/google/route.ts
new file mode 100644
index 00000000..3c310836
--- /dev/null
+++ b/src/app/api/oauth/callback/google/route.ts
@@ -0,0 +1,144 @@
+import { NextRequest, NextResponse } from "next/server";
+import axios from "axios";
+import { decodeJwt } from "@/middleware";
+import apiClient from "@/lib/apiClient";
+import { OauthLoginUser, OauthResponse, OauthSignupUser } from "@/types/oauth/oauth";
+import { cookies } from "next/headers";
+import { RedirectError } from "@/utils/oauthLoginError";
+
+export const GET = async (request: NextRequest) => {
+  const searchParams = request.nextUrl.searchParams;
+  const code = searchParams.get("code");
+  const state = searchParams.get("state");
+
+  if (!code || !state) {
+    return NextResponse.json({ message: `${!code ? "Code" : "State"} not found` }, { status: 400 });
+  }
+
+  let parsedState;
+  try {
+    parsedState = JSON.parse(decodeURIComponent(state));
+  } catch {
+    return NextResponse.json({ message: "Invalid state format" }, { status: 400 });
+  }
+
+  const { provider, action, role } = parsedState;
+  const GOOGLE_TOKEN_URL = "https://oauth2.googleapis.com/token";
+  const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;
+  const clientSecret = process.env.NEXT_PUBLIC_GOOGLE_SECRET;
+  const redirectUri = process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI;
+
+  if (!clientId || !clientSecret || !redirectUri) {
+    return NextResponse.json({ message: "Environment variables not set" }, { status: 500 });
+  }
+
+  try {
+    // Google Access Token 요청
+    const { data: tokenResponse } = await axios.post(GOOGLE_TOKEN_URL, null, {
+      params: {
+        code,
+        client_id: clientId,
+        client_secret: clientSecret,
+        redirect_uri: redirectUri,
+        grant_type: "authorization_code",
+      },
+    });
+
+    const { id_token } = tokenResponse;
+    const decodedIdToken = decodeJwt(id_token);
+    if (!decodedIdToken) {
+      return NextResponse.json({ message: "Invalid ID token" }, { status: 400 });
+    }
+
+    const googleUser: { signup: OauthSignupUser; login: OauthLoginUser } = {
+      signup: {
+        role,
+        name: decodedIdToken.name,
+        token: id_token,
+      },
+      login: {
+        token: id_token,
+        redirectUri,
+      },
+    };
+
+    // role이 APPLICANT일 경우 추가 정보 설정
+    if (role === "APPLICANT") {
+      googleUser.signup.storeName = "x";
+      googleUser.signup.storePhoneNumber = "x";
+      googleUser.signup.location = "x";
+    }
+
+    const processUser = async () => {
+      if (action === "signup") {
+        try {
+          const response = await apiClient.post<OauthResponse>(`/oauth/sign-up/${provider}`, googleUser.signup);
+          console.log("구글 회원가입 성공:", response.data);
+        } catch (error: any) {
+          if (error.response?.status === 400) {
+            console.log("이미 등록된 사용자입니다. 로그인 시도 중...");
+            await loginUser();
+          } else {
+            throw new Error("회원가입 중 서버 오류");
+          }
+        }
+        return NextResponse.redirect(new URL("/mypage", request.url));
+      } else if (action === "login") {
+        await loginUser();
+      } else {
+        throw new Error("잘못된 작업 에러");
+      }
+    };
+
+    const loginUser = async () => {
+      try {
+        const { data: loginResponse } = await axios.post<OauthResponse>(
+          `${process.env.NEXT_PUBLIC_DOMAIN_URL}/api/oauth/login/${provider}`,
+          googleUser.login
+        );
+        console.log("구글 로그인 성공:", loginResponse);
+
+        // 쿠키 저장
+        const { accessToken, refreshToken } = loginResponse;
+        setCookies(accessToken, refreshToken);
+      } catch (error: any) {
+        if (error.response?.status === 403) {
+          console.log("회원가입이 필요합니다. 회원가입 페이지로 이동합니다...");
+          throw new RedirectError("/signup");
+        } else {
+          console.error("구글 로그인 중 오류:", error.message || error);
+          throw new Error("로그인 중 서버 오류");
+        }
+      }
+    };
+
+    const setCookies = (accessToken: string, refreshToken: string) => {
+      cookies().set("accessToken", accessToken, {
+        httpOnly: true,
+        secure: process.env.NODE_ENV === "production",
+        sameSite: "lax",
+        path: "/",
+      });
+      cookies().set("refreshToken", refreshToken, {
+        httpOnly: true,
+        secure: process.env.NODE_ENV === "production",
+        sameSite: "lax",
+        path: "/",
+      });
+    };
+
+    try {
+      await processUser();
+    } catch (error) {
+      if (error instanceof RedirectError) {
+        return NextResponse.redirect(new URL(error.redirectPath, request.url));
+      }
+      throw error;
+    }
+  } catch (error: any) {
+    console.error("OAuth 처리 중 오류:", error.message || error);
+    return NextResponse.json({ message: error.message || "서버 오류" }, { status: 500 });
+  }
+
+  return NextResponse.redirect(new URL("/mypage", request.url));
+};
diff --git a/src/app/api/oauth/callback/kakao/route.ts b/src/app/api/oauth/callback/kakao/route.ts
new file mode 100644
index 00000000..50a4ba0d
--- /dev/null
+++ b/src/app/api/oauth/callback/kakao/route.ts
@@ -0,0 +1,108 @@
+import { NextRequest, NextResponse } from "next/server";
+import axios from "axios";
+import apiClient from "@/lib/apiClient";
+import { OauthLoginUser, OauthResponse, OauthSignupUser } from "@/types/oauth/oauth";
+import { cookies } from "next/headers";
+import { RedirectError } from "@/utils/oauthLoginError";
+
+export const GET = async (request: NextRequest) => {
+  const searchParams = request.nextUrl.searchParams;
+  const code = searchParams.get("code");
+  const state = searchParams.get("state");
+
+  if (!code || !state) {
+    return NextResponse.json({ message: `${!code ? "Code" : "State"} not found` }, { status: 400 });
+  }
+
+  let parsedState;
+  try {
+    parsedState = JSON.parse(decodeURIComponent(state));
+  } catch {
+    return NextResponse.json({ message: "Invalid state format" }, { status: 400 });
+  }
+
+  const { provider, action, role } = parsedState;
+  const redirectUri = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI;
+
+  if (!redirectUri) {
+    return NextResponse.json({ message: "Environment variables not set" }, { status: 500 });
+  }
+
+  const kakaoUser: { signup: OauthSignupUser; login: OauthLoginUser } = {
+    signup: {
+      role: role || "user", // 기본 역할 설정
+      name: "", // Kakao는 이름을 제공하지 않으므로 기본값
+      token: code, // 인가 코드 전달
+    },
+    login: {
+      token: code, // 인가 코드 전달
+      redirectUri, // 리다이렉트 URI 포함
+    },
+  };
+
+  const processUser = async () => {
+    if (action === "signup") {
+      try {
+        const response = await apiClient.post(`/oauth/sign-up/${provider}`, kakaoUser.signup);
+        console.log("카카오 회원가입 성공:", response.data);
+      } catch (error: any) {
+        if (error.response?.status === 400) {
+          console.log("이미 등록된 사용자입니다. 로그인 시도 중...");
+          await loginUser();
+        } else {
+          throw new Error("회원가입 중 서버 오류");
+        }
+      }
+    } else if (action === "login") {
+      await loginUser();
+    } else {
+      throw new Error("Invalid action");
+    }
+  };
+
+  const loginUser = async () => {
+    try {
+      const { data: loginResponse } = await axios.post<OauthResponse>(
+        `${process.env.NEXT_PUBLIC_DOMAIN_URL}/api/oauth/login/${provider}`,
+        kakaoUser.login
+      );
+      console.log("카카오 로그인 성공:", loginResponse);
+
+      // 쿠키 저장
+      const { accessToken, refreshToken } = loginResponse;
+      setCookies(accessToken, refreshToken);
+    } catch (error: any) {
+      if (error.response?.status === 403) {
+        console.log("회원가입이 필요합니다. 회원가입 시도 중...");
+        //회원가입 페이지로 리다이렉트
+        throw new RedirectError("/signup");
+      } else {
+        throw new Error("회원가입 중 서버 오류");
+      }
+    }
+  };
+
+  const setCookies = (accessToken: string, refreshToken: string) => {
+    cookies().set("accessToken", accessToken, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === "production",
+      sameSite: "lax",
+      path: "/",
+    });
+    cookies().set("refreshToken", refreshToken, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === "production",
+      sameSite: "lax",
+      path: "/",
+    });
+  };
+
+  try {
+    await processUser();
+  } catch (error: any) {
+    console.error("OAuth 처리 중 오류:", error.message || error);
+    return NextResponse.json({ message: error.message || "서버 오류" }, { status: 500 });
+  }
+
+  return NextResponse.redirect(new URL("/mypage", request.url));
+};
diff --git a/src/app/api/oauth/login/[provider]/route.ts b/src/app/api/oauth/login/[provider]/route.ts
new file mode 100644
index 00000000..59289963
--- /dev/null
+++ b/src/app/api/oauth/login/[provider]/route.ts
@@ -0,0 +1,32 @@
+import { AxiosError } from "axios";
+import { NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+
+// OAuth 로그인 API
+export async function POST(request: Request, { params }: { params: { provider: string } }) {
+  try {
+    console.log("/api/oauth/login");
+    const provider = params.provider;
+
+    // provider 유효성 검사
+    if (!["google", "kakao"].includes(provider)) {
+      return NextResponse.json({ message: "Invalid provider" }, { status: 400 });
+    }
+
+    // 요청 본문 파싱
+    const body = await request.json();
+    console.log("Received body:", body); // 요청 본문 로그 출력
+    // OAuth 로그인 요청
+    const response = await apiClient.post(`/oauth/sign-in/${provider}`, body);
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`POST /api/oauth/sign-in/${params.provider} error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "서버오류" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/oauth/signup/[provider]/route.ts b/src/app/api/oauth/signup/[provider]/route.ts
new file mode 100644
index 00000000..2156bd79
--- /dev/null
+++ b/src/app/api/oauth/signup/[provider]/route.ts
@@ -0,0 +1,50 @@
+import { AxiosError } from "axios";
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+
+// OAuth 회원가입 API
+export async function POST(request: Request, { params }: { params: { provider: string } }) {
+  try {
+    const provider = params.provider;
+
+    // provider 유효성 검사
+    if (!["google", "kakao"].includes(provider)) {
+      return NextResponse.json({ message: "Invalid provider" }, { status: 400 });
+    }
+
+    // 요청 본문 파싱
+    const body = await request.json();
+
+    // OAuth 회원가입 요청
+    const response = await apiClient.post(`/oauth/sign-up/${provider}`, body);
+
+    // 응답에서 토큰 추출
+    const { accessToken, refreshToken } = response.data;
+
+    // 쿠키에 토큰 저장
+    cookies().set("accessToken", accessToken, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === "production",
+      sameSite: "lax",
+      path: "/",
+    });
+
+    cookies().set("refreshToken", refreshToken, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === "production",
+      sameSite: "lax",
+      path: "/",
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`POST /api/oauth/sign-up/${params.provider} error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/posts/[postId]/comments/route.ts b/src/app/api/posts/[postId]/comments/route.ts
new file mode 100644
index 00000000..3704daaa
--- /dev/null
+++ b/src/app/api/posts/[postId]/comments/route.ts
@@ -0,0 +1,67 @@
+import { AxiosError } from "axios";
+import { cookies } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+
+// 댓글 작성
+export async function POST(req: NextRequest, { params }: { params: { postId: string } }) {
+  try {
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const body = await req.json();
+
+    const response = await apiClient.post(`/posts/${params.postId}/comments`, body, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`POST /api/posts/${params.postId}/comments error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
+
+// 댓글 목록 조회
+export async function GET(req: NextRequest, { params }: { params: { postId: string } }) {
+  try {
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const { searchParams } = new URL(req.url);
+    const queryParams = {
+      page: searchParams.get("page"),
+      limit: searchParams.get("limit"),
+    };
+
+    const response = await apiClient.get(`/posts/${params.postId}/comments`, {
+      params: queryParams,
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`GET /api/posts/${params.postId}/comments error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/posts/[postId]/like/route.ts b/src/app/api/posts/[postId]/like/route.ts
new file mode 100644
index 00000000..a269cab1
--- /dev/null
+++ b/src/app/api/posts/[postId]/like/route.ts
@@ -0,0 +1,67 @@
+import { AxiosError } from "axios";
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+
+// 게시글 좋아요 API
+export async function POST(request: Request, { params }: { params: { postId: string } }) {
+  try {
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const postId = params.postId;
+
+    // body를 빈 객체로 전송
+    const response = await apiClient.post(
+      `/posts/${postId}/like`,
+      {},
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      }
+    );
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`POST /api/posts/${params.postId}/like error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
+
+// 게시글 좋아요 취소 API
+export async function DELETE(request: Request, { params }: { params: { postId: string } }) {
+  try {
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const postId = params.postId;
+
+    const response = await apiClient.delete(`/posts/${postId}/like`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`DELETE /api/posts/${params.postId}/like error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/posts/[postId]/route.ts b/src/app/api/posts/[postId]/route.ts
new file mode 100644
index 00000000..8f423708
--- /dev/null
+++ b/src/app/api/posts/[postId]/route.ts
@@ -0,0 +1,98 @@
+import { AxiosError } from "axios";
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+
+// 게시글 상세 조회 API
+export async function GET(request: Request, { params }: { params: { postId: string } }) {
+  try {
+    const postId = params.postId;
+    const accessToken = cookies().get("accessToken")?.value;
+
+    // 로그인한 유저의 경우 토큰과 함께 요청
+    if (accessToken) {
+      const response = await apiClient.get(`/posts/${postId}`, {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+      return NextResponse.json(response.data);
+    }
+
+    // 로그인하지 않은 유저의 경우 토큰 없이 요청
+    const response = await apiClient.get(`/posts/${postId}`);
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`GET /api/posts/${params.postId} error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
+
+// 게시글 수정 API
+export async function PATCH(request: Request, { params }: { params: { postId: string } }) {
+  try {
+    // 쿠키에서 액세스 토큰 가져오기
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const postId = params.postId;
+    // 요청 본문 파싱
+    const body = await request.json();
+
+    // 게시글 수정 요청
+    const response = await apiClient.patch(`/posts/${postId}`, body, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`PATCH /api/posts/${params.postId} error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
+
+// 게시글 삭제 API
+export async function DELETE(request: Request, { params }: { params: { postId: string } }) {
+  try {
+    // 쿠키에서 액세스 토큰 가져오기
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const postId = params.postId;
+
+    // 게시글 삭제 요청
+    await apiClient.delete(`/posts/${postId}`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return new NextResponse(null, { status: 204 });
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error(`DELETE /api/posts/${params.postId} error:`, error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/posts/route.ts b/src/app/api/posts/route.ts
new file mode 100644
index 00000000..20f20a2c
--- /dev/null
+++ b/src/app/api/posts/route.ts
@@ -0,0 +1,69 @@
+import { AxiosError } from "axios";
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+import { cleanedParameters } from "@/utils/cleanedParameters";
+
+// 게시글 목록 조회 API
+export async function GET(request: Request) {
+  try {
+    // URL 쿼리 파라미터 파싱
+    const { searchParams } = new URL(request.url);
+    const params = {
+      cursor: searchParams.get("cursor"), // 페이지네이션 커서
+      limit: searchParams.get("limit"), // 한 페이지당 항목 수
+      orderBy: searchParams.get("orderBy"), // 정렬 기준
+      keyword: searchParams.get("keyword"), // 검색 키워드
+    };
+
+    // null, undefined, 빈 문자열을 가진 파라미터 제거
+    const cleanedParams = cleanedParameters(params);
+
+    // 게시글 목록 조회 요청
+    const response = await apiClient.get("/posts", {
+      params: cleanedParams,
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error("GET /api/posts error:", error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
+
+// 게시글 등록 API
+export async function POST(request: Request) {
+  try {
+    // 쿠키에서 액세스 토큰 가져오기
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    // 요청 본문 파싱
+    const body = await request.json();
+
+    // 게시글 등록 요청
+    const response = await apiClient.post("/posts", body, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error("POST /api/posts error:", error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/users/me/applications/route.ts b/src/app/api/users/me/applications/route.ts
new file mode 100644
index 00000000..f8043632
--- /dev/null
+++ b/src/app/api/users/me/applications/route.ts
@@ -0,0 +1,47 @@
+import { AxiosError } from "axios";
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+import { cleanedParameters } from "@/utils/cleanedParameters";
+
+// 내가 지원한 알바폼 목록 조회 API
+export async function GET(request: Request) {
+  try {
+    // 쿠키에서 액세스 토큰 가져오기
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    // URL 쿼리 파라미터 파싱
+    const { searchParams } = new URL(request.url);
+    const params = {
+      cursor: searchParams.get("cursor"), // 페이지네이션 커서
+      limit: searchParams.get("limit"), // 한 페이지당 항목 수
+      status: searchParams.get("status"), // 지원 상태 필터
+      keyword: searchParams.get("keyword"), // 검색 키워드
+    };
+
+    // null, undefined, 빈 문자열을 가진 파라미터 제거
+    const cleanedParams = cleanedParameters(params);
+
+    // 지원 목록 조회 요청
+    const response = await apiClient.get("/users/me/applications", {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+      params: cleanedParams,
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error("GET /api/users/me/applications error:", error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/users/me/comments/route.ts b/src/app/api/users/me/comments/route.ts
new file mode 100644
index 00000000..5f082823
--- /dev/null
+++ b/src/app/api/users/me/comments/route.ts
@@ -0,0 +1,45 @@
+import { AxiosError } from "axios";
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+import { cleanedParameters } from "@/utils/cleanedParameters";
+
+// 내가 작성한 댓글 목록 조회 API
+export async function GET(request: Request) {
+  try {
+    // 쿠키에서 액세스 토큰 가져오기
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    // URL 쿼리 파라미터 파싱
+    const { searchParams } = new URL(request.url);
+    const params = {
+      page: searchParams.get("page"), // 페이지네이션 커서
+      pageSize: searchParams.get("pageSize"), // 한 페이지당 항목 수
+    };
+
+    // null, undefined, 빈 문자열을 가진 파라미터 제거
+    const cleanedParams = cleanedParameters(params);
+
+    // 내가 작성한 댓글 목록 조회 요청
+    const response = await apiClient.get("/users/me/comments", {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+      params: cleanedParams,
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error("GET /api/users/me/comments error:", error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/users/me/forms/route.ts b/src/app/api/users/me/forms/route.ts
new file mode 100644
index 00000000..9e7d2d89
--- /dev/null
+++ b/src/app/api/users/me/forms/route.ts
@@ -0,0 +1,49 @@
+import { AxiosError } from "axios";
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+import { cleanedParameters } from "@/utils/cleanedParameters";
+
+// 내가 생성한 알바폼 목록 조회 API
+export async function GET(request: Request) {
+  try {
+    // 쿠키에서 액세스 토큰 가져오기
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    // URL 쿼리 파라미터 파싱
+    const { searchParams } = new URL(request.url);
+    const params = {
+      cursor: searchParams.get("cursor"), // 페이지네이션 커서
+      limit: searchParams.get("limit"), // 한 페이지당 항목 수
+      orderBy: searchParams.get("orderBy"), // 정렬 기준
+      keyword: searchParams.get("keyword"), // 검색 키워드
+      isPublic: searchParams.get("isPublic"), // 공개 여부
+      isRecruiting: searchParams.get("isRecruiting"), // 모집 중 여부
+    };
+
+    // null, undefined, 빈 문자열을 가진 파라미터 제거
+    const cleanedParams = cleanedParameters(params);
+
+    // 알바폼 목록 조회 요청
+    const response = await apiClient.get("/users/me/forms", {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+      params: cleanedParams,
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error("GET /api/users/me/forms error:", error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/users/me/password/route.ts b/src/app/api/users/me/password/route.ts
new file mode 100644
index 00000000..152b7612
--- /dev/null
+++ b/src/app/api/users/me/password/route.ts
@@ -0,0 +1,35 @@
+import { AxiosError } from "axios";
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+
+// 비밀번호 변경 API
+export async function PATCH(request: Request) {
+  try {
+    // 쿠키에서 액세스 토큰 가져오기
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    // 요청 본문 파싱 (현재 비밀번호, 새 비밀번호)
+    const body = await request.json();
+    // 비밀번호 변경 요청
+    const response = await apiClient.patch("/users/me/password", body, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error("PATCH /api/users/me/password error:", error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/users/me/posts/route.ts b/src/app/api/users/me/posts/route.ts
new file mode 100644
index 00000000..0f615d2b
--- /dev/null
+++ b/src/app/api/users/me/posts/route.ts
@@ -0,0 +1,46 @@
+import { AxiosError } from "axios";
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+import { cleanedParameters } from "@/utils/cleanedParameters";
+
+// 내가 작성한 게시글 목록 조회 API
+export async function GET(request: Request) {
+  try {
+    // 쿠키에서 액세스 토큰 가져오기
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    // URL 쿼리 파라미터 파싱
+    const { searchParams } = new URL(request.url);
+    const params = {
+      cursor: searchParams.get("cursor"), // 페이지네이션 커서
+      limit: searchParams.get("limit"), // 한 페이지당 항목 수
+      orderBy: searchParams.get("orderBy"), // 정렬 기준 (최신순, 댓글수 순, 좋아요순 등)
+    };
+
+    // null, undefined, 빈 문자열을 가진 파라미터 제거
+    const cleanedParams = cleanedParameters(params);
+
+    // 내가 작성한 게시글 목록 조회 요청
+    const response = await apiClient.get("/users/me/posts", {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+      params: cleanedParams,
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error("GET /api/users/me/posts error:", error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/users/me/route.ts b/src/app/api/users/me/route.ts
index 923bfa2b..eae7b7e8 100644
--- a/src/app/api/users/me/route.ts
+++ b/src/app/api/users/me/route.ts
@@ -3,34 +3,79 @@ import { cookies } from "next/headers";
 import { NextResponse } from "next/server";
 import apiClient from "@/lib/apiClient";
 
+// 내 정보 조회 API
 export async function GET() {
   try {
+    // 쿠키에서 액세스 토큰 가져오기
     const accessToken = cookies().get("accessToken")?.value;
 
     if (!accessToken) {
-      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+      return new Response(null, { status: 200 });
     }
 
+    // 내 정보 조회 요청
     const response = await apiClient.get("/users/me", {
       headers: {
         Authorization: `Bearer ${accessToken}`,
       },
     });
 
-    const user = response.data;
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      if (error.response?.status === 401) {
+        return new Response(null, { status: 200 });
+      }
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
+
+// 내 정보 수정 API
+export async function PATCH(request: Request) {
+  try {
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    const body = await request.json();
 
-    if (!user) {
-      return NextResponse.json({ message: "User not found" }, { status: 404 });
+    const response = await apiClient.patch("/users/me", body, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (response.status === 200 && response.data) {
+      return NextResponse.json(response.data);
     }
 
-    return NextResponse.json(user);
+    throw new Error("Failed to update user profile");
   } catch (error: unknown) {
     if (error instanceof AxiosError) {
-      console.error("GET /api/users/me error:", error);
+      console.error("PATCH /api/users/me error:", {
+        status: error.response?.status,
+        data: error.response?.data,
+        message: error.message,
+      });
+
       if (error.response) {
-        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+        return NextResponse.json(
+          {
+            message: error.response.data.message,
+            details: error.response.data.details,
+          },
+          { status: error.response.status }
+        );
       }
     }
+    console.error("Unexpected error:", error);
     return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
   }
 }
diff --git a/src/app/api/users/me/scrap/route.ts b/src/app/api/users/me/scrap/route.ts
new file mode 100644
index 00000000..3aa0a8f9
--- /dev/null
+++ b/src/app/api/users/me/scrap/route.ts
@@ -0,0 +1,48 @@
+import { AxiosError } from "axios";
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+import apiClient from "@/lib/apiClient";
+import { cleanedParameters } from "@/utils/cleanedParameters";
+
+// 내가 스크랩한 알바폼 목록 조회 API
+export async function GET(request: Request) {
+  try {
+    // 쿠키에서 액세스 토큰 가져오기
+    const accessToken = cookies().get("accessToken")?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+    }
+
+    // URL 쿼리 파라미터 파싱
+    const { searchParams } = new URL(request.url);
+    const params: Record<string, string | null> = {
+      cursor: searchParams.get("cursor"),
+      limit: searchParams.get("limit"),
+      orderBy: searchParams.get("orderBy"),
+      isPublic: searchParams.get("isPublic"),
+      isRecruiting: searchParams.get("isRecruiting"),
+    };
+
+    // null, undefined, 빈 문자열을 가진 파라미터 제거
+    const cleanedParams = cleanedParameters(params);
+
+    // 스크랩 목록 조회 요청
+    const response = await apiClient.get("/users/me/scrap", {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+      params: cleanedParams,
+    });
+
+    return NextResponse.json(response.data);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      console.error("GET /api/users/me/scrap error:", error);
+      if (error.response) {
+        return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
+      }
+    }
+    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+  }
+}
diff --git a/src/app/clientLayout.tsx b/src/app/clientLayout.tsx
index 2c9323aa..30305828 100644
--- a/src/app/clientLayout.tsx
+++ b/src/app/clientLayout.tsx
@@ -1,16 +1,14 @@
 "use client";
 
+import React, { useState } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import dynamic from "next/dynamic";
-import { useState } from "react";
 import { Toaster } from "react-hot-toast";
+import ModalLayout from "@/app/components/modal/ModalLayout";
 
-// 클라이언트 사이드에서만 동적으로 로드
 const ReactQueryDevtools = dynamic(
   () => import("@tanstack/react-query-devtools").then((mod) => mod.ReactQueryDevtools),
-  {
-    ssr: false,
-  }
+  { ssr: false }
 );
 
 export default function ClientLayout({ children }: { children: React.ReactNode }) {
@@ -46,6 +44,7 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
         }}
       />
       {process.env.NODE_ENV === "development" && <ReactQueryDevtools initialIsOpen={false} />}
+      <ModalLayout />
     </QueryClientProvider>
   );
 }
diff --git a/src/app/components/button/Button.tsx b/src/app/components/button/Button.tsx
deleted file mode 100644
index 7839c1f0..00000000
--- a/src/app/components/button/Button.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, { ButtonHTMLAttributes } from "react";
-
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "solid" | "outlined";
-  width?: "xs" | "sm" | "md" | "lg";
-  radius?: "lg" | "full";
-  disabled?: boolean;
-}
-
-/**
- * 버튼 컴포넌트
- * @param variant - 버튼 스타일 solid | outlined
- * @param width - 버튼 너비 xs | sm | md | lg
- * @param radius - 버튼 모서리 둥글기 md | full
- * @param disabled - 비활성화 여부 true | false
- * @param children - 버튼 내용 (텍스트, 아이콘 등)
- * @param props - 버튼 속성 (onClick, type 등)
- * @returns 버튼 컴포넌트
- */
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className = "", variant = "solid", width = "md", radius = "lg", disabled, children, ...props }, ref) => {
-    const baseStyles = "inline-flex items-center justify-center transition-colors font-medium h-12";
-
-    const variants = {
-      solid: [
-        "bg-primary-orange-300 text-gray-100",
-        "hover:bg-primary-orange-200",
-        "focus:ring-1 focus:ring-primary-orange-200 focus:outline-none",
-        "disabled:bg-gray-100 disabled:cursor-not-allowed text-white",
-      ].join(" "),
-      outlined: [
-        "border-2 border-primary-orange-300 text-primary-orange-300",
-        "hover: hover:border-primary-orange-200 hover:text-primary-orange-200",
-        "focus:ring-1 focus:ring-primary-orange-200 focus:outline-none",
-        "disabled:border-gray-100 disabled:text-gray-100 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-      ].join(" "),
-    };
-
-    const widths = {
-      xs: "w-[80px]",
-      sm: "w-[180px]",
-      md: "w-[327px]",
-      lg: "w-[640px]",
-    };
-
-    const radiuses = {
-      lg: "rounded-lg",
-      full: "rounded-full",
-    };
-
-    return (
-      <button
-        ref={ref}
-        className={`${baseStyles} ${variants[variant]} ${widths[width]} ${radiuses[radius]} ${className}`.trim()}
-        disabled={disabled}
-        {...props}
-      >
-        {children}
-      </button>
-    );
-  }
-);
-
-Button.displayName = "DefaultButton"; // 컴포넌트가 개발자 도구에서 DefaultButton로 표시됨
-
-export default Button;
diff --git a/src/app/components/button/default/BookmarkBtn.tsx b/src/app/components/button/default/BookmarkBtn.tsx
new file mode 100644
index 00000000..20079c1a
--- /dev/null
+++ b/src/app/components/button/default/BookmarkBtn.tsx
@@ -0,0 +1,35 @@
+"use client";
+import React, { useState } from "react";
+import { FaBookmark, FaRegBookmark } from "react-icons/fa";
+import { cn } from "@/lib/tailwindUtil";
+
+interface BookmarkBtnProps {
+  className?: string;
+}
+
+const BookmarkBtn = ({ className = "" }: BookmarkBtnProps) => {
+  const [isBookmarked, setIsBookmarked] = useState(false);
+
+  const toggleBookmark = () => {
+    setIsBookmarked((prev) => !prev);
+  };
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary-orange-50 p-2 transition-colors",
+        className
+      )}
+      onClick={toggleBookmark}
+    >
+      {isBookmarked ? (
+        <FaBookmark className={cn("text-xl text-primary-orange-300")} />
+      ) : (
+        <FaRegBookmark className={cn("text-xl text-primary-orange-300")} />
+      )}
+    </button>
+  );
+};
+
+export default BookmarkBtn;
diff --git a/src/app/components/button/default/Button.tsx b/src/app/components/button/default/Button.tsx
new file mode 100644
index 00000000..9d39aa88
--- /dev/null
+++ b/src/app/components/button/default/Button.tsx
@@ -0,0 +1,76 @@
+"use client";
+import React, { ButtonHTMLAttributes, ReactNode } from "react";
+import { cn } from "@/lib/tailwindUtil";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "solid" | "outlined";
+  width?: "xs" | "sm" | "md" | "lg";
+  radius?: "lg" | "full";
+  color?: "orange" | "gray";
+  icon?: ReactNode;
+}
+/**
+ * 버튼 컴포넌트
+ * @param variant - 버튼 스타일 solid | outlined
+ * @param width - 버튼 너비 xs | sm | md | lg
+ * @param radius - 버튼 모서리 둥글기 lg | full
+ * @param color - 버튼 색상 orange | gray
+ * @param disabled - 비활성화 여부
+ * @param icon - 버튼 내 아이콘
+ * @param children - 버튼 내용
+ * @param props - 추가 버튼 속성
+ * @returns 버튼 컴포넌트
+ */
+const Button = ({
+  className = "",
+  variant = "solid",
+  width = "md",
+  radius = "lg",
+  color = "orange",
+  icon,
+  disabled = false,
+  children,
+  ...props
+}: ButtonProps) => {
+  const baseStyles = "inline-flex items-center justify-center transition-colors font-medium h-12";
+
+  const colorStyles = {
+    orange: {
+      solid:
+        "bg-primary-orange-300 text-white hover:bg-primary-orange-200 focus:ring-1 focus:ring-primary-orange-200 focus:outline-none disabled:bg-grayscale-100 disabled:cursor-not-allowed",
+      outlined:
+        "border-2 border-primary-orange-300 text-primary-orange-300 hover:border-primary-orange-200 hover:text-primary-orange-200 focus:ring-1 focus:ring-primary-orange-200 focus:outline-none disabled:border-grayscale-100 disabled:text-grayscale-100 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+    },
+    gray: {
+      solid:
+        "bg-grayscale-100 text-grayscale-900 hover:bg-grayscale-200 focus:ring-1 focus:ring-grayscale-200 focus:outline-none disabled:bg-grayscale-50 disabled:cursor-not-allowed",
+      outlined:
+        "border-2 border-grayscale-200 text-grayscale-900 hover:border-grayscale-300 hover:bg-grayscale-50 focus:ring-1 focus:ring-grayscale-200 focus:outline-none disabled:border-grayscale-100 disabled:text-grayscale-100 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+    },
+  };
+
+  const widths = {
+    xs: "w-[60px] md:w-[80px]",
+    sm: "w-[120px] md:w-[180px]",
+    md: "w-[240px] lg:w-[327px]",
+    lg: "w-[480px] xl:w-[640px]",
+  };
+
+  const radiuses = {
+    lg: "rounded-lg",
+    full: "rounded-full",
+  };
+
+  return (
+    <button
+      className={cn(baseStyles, colorStyles[color][variant], widths[width], radiuses[radius], className)}
+      disabled={disabled}
+      {...props}
+    >
+      {icon && <span className="mr-2">{icon}</span>}
+      {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/src/app/components/button/default/CheckBtn.tsx b/src/app/components/button/default/CheckBtn.tsx
new file mode 100644
index 00000000..d04b29b6
--- /dev/null
+++ b/src/app/components/button/default/CheckBtn.tsx
@@ -0,0 +1,41 @@
+"use client";
+import React, { forwardRef, InputHTMLAttributes } from "react";
+import { cn } from "@/lib/tailwindUtil";
+
+interface CheckBtnProps extends InputHTMLAttributes<HTMLInputElement> {
+  label: string; // 체크박스의 레이블
+  name: string; // 체크박스의 name 속성
+  checked?: boolean; // 체크박스가 선택된 상태인지 여부
+  disabled?: boolean; // 체크박스가 비활성화된 상태인지 여부
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  className?: string;
+}
+
+const CheckBtn = forwardRef<HTMLInputElement, CheckBtnProps>(
+  ({ label, name, checked = true, disabled = false, onChange, className, ...props }, ref) => {
+    return (
+      <label
+        htmlFor={name}
+        className={cn(
+          "flex items-center gap-[10px] rounded-lg text-sm lg:text-base",
+          disabled ? "cursor-not-allowed text-grayscale-400" : "text-black cursor-pointer",
+          className
+        )}
+      >
+        <input
+          type="checkbox"
+          id={name}
+          name={name}
+          checked={checked}
+          onChange={onChange}
+          disabled={disabled}
+          ref={ref}
+          {...props}
+        />
+        {label}
+      </label>
+    );
+  }
+);
+CheckBtn.displayName = "CheckBtn";
+export default CheckBtn;
diff --git a/src/app/components/button/default/ExpandedFloatingBtn.tsx b/src/app/components/button/default/ExpandedFloatingBtn.tsx
new file mode 100644
index 00000000..d600697f
--- /dev/null
+++ b/src/app/components/button/default/ExpandedFloatingBtn.tsx
@@ -0,0 +1,72 @@
+"use client";
+import React, { useState, ButtonHTMLAttributes, ReactNode } from "react";
+import { cn } from "@/lib/tailwindUtil";
+import { IoShareSocialSharp } from "react-icons/io5"; // 기본 공유 아이콘
+import { FaLink } from "react-icons/fa"; // 링크 및 카카오톡 아이콘
+import { FcShare } from "react-icons/fc";
+import shareToKakao from "@/utils/shareToKakao";
+import toast from "react-hot-toast";
+import Image from "next/image";
+
+interface ExpandedFloatingBtnProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "orange" | "white";
+  icon?: ReactNode;
+}
+
+const ExpandedFloatingBtn = ({ variant = "orange", className, ...props }: ExpandedFloatingBtnProps) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const baseStyles = "inline-flex items-center justify-center transition-colors font-medium rounded-full";
+  const expandedStyles = "h-32 px-1 bg-primary-orange-200  hover:bg-primary-orange-100";
+  const collapsedStyles = "h-12 w-full";
+
+  const variants = {
+    orange: "bg-primary-orange-300 text-white hover:bg-primary-orange-200",
+    white: "bg-white text-primary-orange-300 border border-primary-orange-300 hover:bg-primary-grayscale-100",
+  };
+
+  const handleToggle = () => {
+    setIsExpanded((prev) => !prev);
+  };
+
+  const handleLinkCopy = () => {
+    navigator.clipboard.writeText(window.location.href);
+    toast.success("링크가 복사되었습니다.");
+  };
+
+  return (
+    <button
+      className={cn(baseStyles, variants[variant], isExpanded ? expandedStyles : collapsedStyles, className)}
+      onClick={handleToggle}
+      {...props}
+    >
+      {isExpanded ? (
+        // 확장된 상태일 때 카카오톡 및 링크 아이콘 표시
+        <div className="flex flex-col">
+          <button onClick={() => shareToKakao()} className="flex items-center">
+            <div>
+              <Image
+                src="/icons/social/social_kakao.png"
+                layout="fixed"
+                width={50}
+                height={50}
+                objectFit="cover"
+                alt="카카오톡"
+              />
+            </div>
+          </button>
+          <button onClick={handleLinkCopy} className="mt-2 flex items-center">
+            <div className="rounded-full bg-blue-50 p-3 text-2xl">
+              <FcShare />
+            </div>
+          </button>
+        </div>
+      ) : (
+        // 기본 상태일 때 공유 아이콘 표시
+        <IoShareSocialSharp className="text-2xl" />
+      )}
+    </button>
+  );
+};
+
+export default ExpandedFloatingBtn;
diff --git a/src/app/components/button/default/FloatingBtn.tsx b/src/app/components/button/default/FloatingBtn.tsx
new file mode 100644
index 00000000..29f07307
--- /dev/null
+++ b/src/app/components/button/default/FloatingBtn.tsx
@@ -0,0 +1,28 @@
+"use client";
+import React, { ButtonHTMLAttributes, ReactNode } from "react";
+import { cn } from "@/lib/tailwindUtil";
+
+interface FloatingBtnProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "orange" | "white";
+  icon?: ReactNode;
+}
+
+const FloatingBtn = ({ variant = "orange", icon, children, className, ...props }: FloatingBtnProps) => {
+  const baseStyles = "inline-flex items-center justify-center transition-colors font-medium rounded-full h-12";
+
+  const variants = {
+    orange: "bg-primary-orange-300 text-white hover:bg-primary-orange-200",
+    white: "bg-white text-primary-orange-300 border border-primary-orange-300 hover:bg-primary-grayscale-100",
+  };
+
+  const widthStyles = children ? "w-auto px-3" : "w-12";
+
+  return (
+    <button type="button" className={cn(baseStyles, variants[variant], widthStyles, className)} {...props}>
+      {icon && <span className="text-2xl">{icon}</span>}
+      <span className={cn(children ? "ml-2" : "", "hidden sm:inline")}>{children}</span>
+    </button>
+  );
+};
+
+export default FloatingBtn;
diff --git a/src/app/components/button/default/FrameRadioBtn.tsx b/src/app/components/button/default/FrameRadioBtn.tsx
new file mode 100644
index 00000000..dd81ffc3
--- /dev/null
+++ b/src/app/components/button/default/FrameRadioBtn.tsx
@@ -0,0 +1,47 @@
+"use client";
+import React, { ButtonHTMLAttributes } from "react";
+import { cn } from "@/lib/tailwindUtil";
+
+interface FrameRadioBtnProps extends ButtonHTMLAttributes<HTMLInputElement> {
+  label: string; // 라디오 버튼의 레이블을 추가
+  name: string; // 라디오 버튼의 name 속성
+  value: string; // 라디오 버튼의 value 속성
+  checked?: boolean; // 라디오 버튼이 선택된 상태인지 여부
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  width?: "sm" | "md"; // 버튼 너비
+  disabled?: boolean; // 라디오 버튼이 비활성화된 상태인지 여부
+}
+
+const FrameRadioBtn = ({ width = "sm", checked = false, disabled = false, ...props }: FrameRadioBtnProps) => {
+  const baseStyles = "flex items-center justify-between rounded-lg border px-5 py-4";
+
+  const widths = {
+    sm: "w-[252px]",
+    md: "w-[360px]",
+  };
+
+  const bgColor = disabled ? "" : checked ? "bg-primary-orange-50" : "bg-white";
+  const borderColor = disabled ? "border-primary-grayscale-200" : "border-primary-orange-300";
+  const textColor = disabled ? "text-grayscale-400" : "text-black";
+  const cursorStyle = disabled ? "cursor-not-allowed" : "cursor-pointer";
+
+  return (
+    <div className={cn(baseStyles, widths[width], bgColor, borderColor, cursorStyle)}>
+      <label htmlFor={props.value} className={cn("text-sm", textColor)}>
+        {props.label}
+      </label>
+      <input
+        type="radio"
+        id={props.value}
+        name={props.name}
+        value={props.value}
+        checked={checked}
+        onChange={disabled ? undefined : props.onChange}
+        disabled={disabled}
+        className="radio-custom ml-2"
+      />
+    </div>
+  );
+};
+
+export default FrameRadioBtn;
diff --git a/src/app/components/button/default/RadioBtn.tsx b/src/app/components/button/default/RadioBtn.tsx
new file mode 100644
index 00000000..e02dc9d4
--- /dev/null
+++ b/src/app/components/button/default/RadioBtn.tsx
@@ -0,0 +1,87 @@
+"use client";
+import React, { ButtonHTMLAttributes } from "react";
+import { cn } from "@/lib/tailwindUtil";
+import { positionOptions } from "@/constants/positionOptions";
+
+export interface RadioBtnProps extends ButtonHTMLAttributes<HTMLInputElement> {
+  key: string;
+  label: string;
+  name: string;
+  value: string;
+  checked?: boolean;
+  position?: typeof positionOptions.POSITION_LEFT | typeof positionOptions.POSITION_RIGHT;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const RadioBtn = ({
+  key,
+  label,
+  name,
+  value,
+  checked,
+  position = positionOptions.POSITION_LEFT,
+  className,
+  onChange,
+  ...props
+}: RadioBtnProps) => {
+  const handleClick = () => {
+    const event = {
+      target: { value },
+      currentTarget: { value },
+      bubbles: true,
+      preventDefault: () => {},
+      stopPropagation: () => {},
+    } as React.ChangeEvent<HTMLInputElement>;
+
+    if (onChange) {
+      onChange(event);
+    }
+  };
+
+  const input = (
+    <input
+      key={key}
+      type="radio"
+      id={props.id || value}
+      name={name}
+      value={value}
+      checked={checked}
+      onChange={onChange}
+      className="radio-custom cursor-pointer"
+      {...props}
+    />
+  );
+
+  const labelElement = label && (
+    <label htmlFor={props.id || value} className="cursor-pointer text-sm lg:text-lg">
+      {label}
+    </label>
+  );
+
+  return (
+    <div
+      onClick={handleClick}
+      className={cn(
+        "flex w-full cursor-pointer items-center rounded-lg border border-grayscale-200 p-4 transition-colors lg:px-6 lg:py-[17px]",
+        checked && "border-primary-orange-300 bg-primary-orange-50",
+        !checked && "hover:border-grayscale-300 hover:bg-grayscale-50",
+        position === positionOptions.POSITION_RIGHT ? "justify-between" : "gap-2",
+        className
+      )}
+    >
+      {position === positionOptions.POSITION_LEFT ? (
+        <>
+          {input}
+          {labelElement}
+        </>
+      ) : (
+        <>
+          {labelElement}
+          {input}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default RadioBtn;
diff --git a/src/app/components/button/default/RadioGroup.tsx b/src/app/components/button/default/RadioGroup.tsx
new file mode 100644
index 00000000..62f6cf21
--- /dev/null
+++ b/src/app/components/button/default/RadioGroup.tsx
@@ -0,0 +1,34 @@
+"use client";
+import React from "react";
+import { RadioBtnProps } from "./RadioBtn";
+
+interface RadioGroupProps<T extends string> {
+  value: T;
+  onValueChange: (value: T) => void;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const RadioGroup = <T extends string>({ value, onValueChange, className, children }: RadioGroupProps<T>) => {
+  return (
+    <div className={className} role="radiogroup">
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement<RadioBtnProps>(child)) {
+          return React.cloneElement(child, {
+            ...child.props,
+            checked: value === child.props.value,
+            onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+              onValueChange(e.target.value as T);
+              if (child.props.onChange) {
+                child.props.onChange(e);
+              }
+            },
+          });
+        }
+        return child;
+      })}
+    </div>
+  );
+};
+
+export default RadioGroup;
diff --git a/src/app/components/button/default/ScrapBtn.tsx b/src/app/components/button/default/ScrapBtn.tsx
new file mode 100644
index 00000000..b09014fa
--- /dev/null
+++ b/src/app/components/button/default/ScrapBtn.tsx
@@ -0,0 +1,61 @@
+"use client";
+import React, { useState } from "react";
+import { FaBookmark, FaRegBookmark } from "react-icons/fa";
+import { cn } from "@/lib/tailwindUtil";
+import axios from "axios";
+import toast from "react-hot-toast";
+
+interface ScrapBtnProps {
+  className?: string;
+  formId: number;
+}
+
+const ScrapBtn = ({ className = "", formId }: ScrapBtnProps) => {
+  const [isScraped, setIsScraped] = useState(false);
+
+  const toggleScrap = () => {
+    setIsScraped((prev) => !prev);
+  };
+
+  const handleScrap = () => {
+    toggleScrap();
+    if (!isScraped) {
+      // 스크랩
+      try {
+        axios.post(`/api/forms/${formId}/scrap`, { formId });
+        toast.success("스크랩 되었습니다.");
+      } catch (error) {
+        toggleScrap();
+      }
+    }
+    if (isScraped) {
+      // 스크랩 취소
+      try {
+        axios.delete(`/api/forms/${formId}/scrap`);
+        toast.success("스크랩이 취소되었습니다.");
+      } catch (error) {
+        toggleScrap();
+      }
+      return;
+    }
+  };
+  console.log(isScraped);
+
+  return (
+    <button
+      className={cn(
+        "inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary-orange-50 p-2 transition-colors",
+        className
+      )}
+      onClick={handleScrap}
+    >
+      {isScraped ? (
+        <FaBookmark className={cn("text-xl text-primary-orange-300")} />
+      ) : (
+        <FaRegBookmark className={cn("text-xl text-primary-orange-300")} />
+      )}
+    </button>
+  );
+};
+
+export default ScrapBtn;
diff --git a/src/app/components/button/dropdown/DropdownList.tsx b/src/app/components/button/dropdown/DropdownList.tsx
new file mode 100644
index 00000000..707a79b8
--- /dev/null
+++ b/src/app/components/button/dropdown/DropdownList.tsx
@@ -0,0 +1,90 @@
+"use client";
+import { cn } from "@/lib/tailwindUtil";
+import { useEffect, useRef } from "react";
+
+// 드롭다운 메뉴의 각 항목 컴포넌트
+const DropdownItem = ({
+  item,
+  onSelect,
+  itemStyle,
+}: {
+  item: string;
+  onSelect: (item: string | null) => void;
+  itemStyle?: string;
+}) => {
+  // 항목 클릭 핸들러
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation(); // 이벤트 버블링 방지
+    onSelect(item);
+  };
+
+  return (
+    <li
+      onClick={handleClick}
+      className={cn(
+        "flex w-full cursor-pointer bg-grayscale-50 px-[10px] py-2 text-sm font-normal leading-[18px] text-black-100 hover:bg-primary-orange-50 lg:text-lg lg:leading-[26px]",
+        itemStyle
+      )}
+    >
+      {item}
+    </li>
+  );
+};
+
+// 드롭다운 메뉴 리스트 컴포넌트
+const DropdownList = ({
+  list,
+  onSelect,
+  wrapperStyle,
+  itemStyle,
+}: {
+  list: string[];
+  onSelect: (item: string | null) => void;
+  wrapperStyle?: string;
+  itemStyle?: string;
+}) => {
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // 외부 클릭 감지 및 드롭다운 닫기
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        event.preventDefault();
+        onSelect(null);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside, { capture: true });
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside, { capture: true });
+    };
+  }, [onSelect]);
+
+  // 컨테이너 클릭 이벤트 처리
+  const handleContainerClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <div
+      role="menu"
+      aria-orientation="vertical"
+      aria-labelledby="options-menu"
+      ref={dropdownRef}
+      onClick={handleContainerClick}
+      className={cn(
+        "absolute left-0 right-0 z-10 mt-[6px] rounded border border-grayscale-100 bg-grayscale-50 pr-[2px] pt-1",
+        wrapperStyle
+      )}
+    >
+      <ul className="scrollbar-custom flex max-h-[150px] flex-col">
+        {list.map((item) => (
+          <DropdownItem key={item} item={item} onSelect={onSelect} itemStyle={itemStyle} />
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default DropdownList;
diff --git a/src/app/components/button/dropdown/FilterDropdown.tsx b/src/app/components/button/dropdown/FilterDropdown.tsx
new file mode 100644
index 00000000..38cc9780
--- /dev/null
+++ b/src/app/components/button/dropdown/FilterDropdown.tsx
@@ -0,0 +1,109 @@
+"use client";
+import React, { useState, useRef, useEffect } from "react";
+import { IoIosArrowDown } from "react-icons/io";
+import { cn } from "@/lib/tailwindUtil";
+import DropdownList from "./dropdownComponent/DropdownList";
+
+interface FilterDropdownProps {
+  options: readonly string[];
+  className?: string;
+  onChange?: (selected: string) => void;
+  initialValue?: string;
+  readOnly?: boolean;
+}
+
+// 필터링 옵션을 선택할 수 있는 드롭다운 컴포넌트
+const FilterDropdown = ({ options, className = "", onChange, initialValue, readOnly = false }: FilterDropdownProps) => {
+  // 드롭다운 상태 관리
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedLabel, setSelectedLabel] = useState(initialValue || options[0]);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // 외부 클릭 감지하여 드롭다운 닫기
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  // initialValue가 변경되면 선택된 라벨 업데이트
+  useEffect(() => {
+    if (initialValue) {
+      setSelectedLabel(initialValue);
+    }
+  }, [initialValue]);
+
+  // 드롭다운 토글 핸들러
+  const toggleDropdown = () => {
+    if (readOnly) return;
+    setIsOpen((prev) => !prev);
+  };
+
+  // 옵션 선택 핸들러
+  const handleSelect = (option: string | null) => {
+    if (option !== null) {
+      setSelectedLabel(option);
+      setIsOpen(false);
+      onChange?.(option);
+    } else {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <div
+      ref={dropdownRef}
+      className={cn(
+        "relative inline-block text-left",
+        "w-20 text-xs md:w-32 md:text-lg",
+        readOnly && "cursor-default opacity-70",
+        className
+      )}
+    >
+      <button
+        type="button"
+        className={cn(
+          "flex w-full items-center justify-between rounded-md border p-2 font-medium shadow-sm",
+          "text-grayscale-700 hover:bg-primary-orange-50",
+          selectedLabel === options[0]
+            ? "border border-grayscale-100 bg-white"
+            : "border-primary-orange-300 bg-primary-orange-50"
+        )}
+        onClick={(e) => {
+          e.preventDefault();
+          toggleDropdown();
+        }}
+        disabled={readOnly}
+      >
+        <span className={selectedLabel === options[0] ? "text-black-100" : "text-primary-orange-300"}>
+          {selectedLabel}
+        </span>
+        <IoIosArrowDown
+          className={cn(
+            "text-orange-400 transition-transform duration-200",
+            isOpen && "rotate-180",
+            selectedLabel === options[0] ? "text-grayscale-200" : "text-primary-orange-300"
+          )}
+        />
+      </button>
+
+      {isOpen && !readOnly && (
+        <DropdownList
+          list={Array.from(options)}
+          onSelect={handleSelect}
+          wrapperStyle={className}
+          itemStyle="md:text-lg text-xs"
+        />
+      )}
+    </div>
+  );
+};
+
+export default FilterDropdown;
diff --git a/src/app/components/button/dropdown/InputDropdown.tsx b/src/app/components/button/dropdown/InputDropdown.tsx
new file mode 100644
index 00000000..8bbce79b
--- /dev/null
+++ b/src/app/components/button/dropdown/InputDropdown.tsx
@@ -0,0 +1,157 @@
+"use client";
+import React, { forwardRef, useEffect, useState, useRef, useCallback } from "react";
+import { IoMdArrowDropdown } from "react-icons/io";
+import { cn } from "@/lib/tailwindUtil";
+import DropdownList from "./dropdownComponent/DropdownList";
+import { useFormContext } from "react-hook-form";
+
+interface InputDropdownProps {
+  options: string[];
+  className?: string;
+  errormessage?: string;
+  name: string;
+  value?: string;
+}
+
+// 직접 입력이 가능한 드롭다운 컴포넌트
+const InputDropdown = forwardRef<HTMLInputElement, InputDropdownProps>(
+  ({ options, className = "", errormessage, name }, ref) => {
+    // 드롭다운 상태 관리
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+    const [selectedValue, setSelectedValue] = useState<string>("");
+    const [isCustomInput, setIsCustomInput] = useState<boolean>(false);
+    const { setValue, watch } = useFormContext();
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    // 외부 클릭 감지하여 드롭다운 닫기
+    useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+          setIsOpen(false);
+        }
+      };
+
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, []);
+
+    // 드롭다운 토글 핸들러
+    const toggleDropdown = (e: React.MouseEvent) => {
+      e.preventDefault();
+      setIsOpen((prev) => !prev);
+    };
+
+    // 옵션 선택 핸들러
+    const handleSelect = useCallback(
+      (option: string | null) => {
+        if (!option) {
+          setIsOpen(false);
+          return;
+        }
+
+        if (option === "직접 입력") {
+          setIsCustomInput(true);
+          setSelectedValue("");
+          setValue(name, "", { shouldDirty: true });
+          setIsOpen(false);
+          return;
+        }
+
+        setSelectedValue(option);
+        setIsCustomInput(false);
+        setValue(name, option, { shouldDirty: true });
+        setIsOpen(false);
+      },
+      [name, setValue]
+    );
+
+    // 입력값 변경 핸들러
+    const handleInputChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (isCustomInput) {
+          const value = e.target.value;
+          setSelectedValue(value);
+          setValue(name, value, { shouldDirty: true });
+        }
+      },
+      [isCustomInput, name, setValue]
+    );
+
+    // 입력 필드 클릭 핸들러
+    const handleInputClick = useCallback(
+      (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (!isCustomInput) {
+          setIsOpen(true);
+        }
+      },
+      [isCustomInput]
+    );
+
+    // 폼 값 변경 감지하여 입력값 동기화
+    useEffect(() => {
+      const value = watch(name);
+      if (value !== undefined) {
+        setSelectedValue(value);
+      }
+    }, [name, watch]);
+
+    const textStyle = "text-base";
+
+    const errorStyle = errormessage ? "!border-state-error" : "";
+    const errorTextStyle =
+      "absolute -bottom-[26px] text-[13px] text-sm font-medium leading-[22px] text-state-error lg:text-base lg:leading-[26px]";
+
+    return (
+      <div
+        ref={dropdownRef}
+        className={cn("relative inline-block text-left", "w-80 lg:w-[640px]", textStyle, className, errorStyle)}
+      >
+        <div
+          onClick={isCustomInput ? undefined : toggleDropdown}
+          className={cn(
+            "rounded-md border border-transparent bg-background-200 p-2",
+            !isCustomInput && "cursor-pointer hover:border-grayscale-200 hover:bg-background-300",
+            isOpen && "ring-1 ring-grayscale-300"
+          )}
+        >
+          <input
+            type="text"
+            ref={ref}
+            value={selectedValue}
+            onChange={handleInputChange}
+            onClick={handleInputClick}
+            readOnly={!isCustomInput}
+            className={cn(
+              "flex w-full items-center justify-between px-4 py-2 font-medium focus:outline-none",
+              isCustomInput ? "cursor-text bg-transparent" : "cursor-pointer bg-transparent",
+              "text-grayscale-700"
+            )}
+            placeholder={isCustomInput ? "직접 입력하세요" : "선택"}
+          />
+          <button
+            type="button"
+            className="absolute right-3 top-3.5 text-3xl"
+            onClick={(e) => {
+              e.stopPropagation();
+              if (isCustomInput) {
+                setIsCustomInput(false);
+                setSelectedValue("");
+                setValue(name, "", { shouldDirty: true });
+              }
+            }}
+          >
+            <IoMdArrowDropdown className={cn("transition-transform duration-200", isOpen && "rotate-180")} />
+          </button>
+        </div>
+        {isOpen && <DropdownList list={options} onSelect={handleSelect} itemStyle={textStyle} />}
+        {errormessage && <p className={cn(errorTextStyle, "right-0 pr-2")}>{errormessage}</p>}
+      </div>
+    );
+  }
+);
+InputDropdown.displayName = "InputDropdown";
+
+export default InputDropdown;
diff --git a/src/app/components/button/dropdown/KebabDropdown.tsx b/src/app/components/button/dropdown/KebabDropdown.tsx
new file mode 100644
index 00000000..01b24fe1
--- /dev/null
+++ b/src/app/components/button/dropdown/KebabDropdown.tsx
@@ -0,0 +1,65 @@
+"use client";
+import React, { useState, useRef, useEffect } from "react";
+import { BsThreeDotsVertical } from "react-icons/bs";
+import { cn } from "@/lib/tailwindUtil";
+
+interface KebabDropdownProps {
+  options: { label: string; onClick: () => void }[];
+  className?: string;
+}
+
+const KebabDropdown = ({ options, className = "" }: KebabDropdownProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div ref={dropdownRef} className={cn("relative inline-block text-left", className)}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="rounded-full p-2 hover:bg-grayscale-50"
+        aria-label="메뉴 더보기"
+      >
+        <BsThreeDotsVertical className="text-xl text-grayscale-400" />
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 z-50 mt-2 w-40 rounded-lg border border-grayscale-100 bg-white shadow-lg">
+          <div className="py-1">
+            {options.map((option, index) => (
+              <button
+                type="button"
+                key={`${index}-${option.label}`}
+                onClick={() => {
+                  option.onClick();
+                  setIsOpen(false);
+                }}
+                className={cn(
+                  "w-full px-6 py-2 text-left text-sm hover:bg-primary-orange-50",
+                  "text-grayscale-700 hover:text-primary-orange-300"
+                )}
+              >
+                {option.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default KebabDropdown;
diff --git a/src/app/components/button/dropdown/SortDropdown.tsx b/src/app/components/button/dropdown/SortDropdown.tsx
new file mode 100644
index 00000000..8f511a01
--- /dev/null
+++ b/src/app/components/button/dropdown/SortDropdown.tsx
@@ -0,0 +1,74 @@
+"use client";
+import React, { useState } from "react";
+import { IoIosArrowDown } from "react-icons/io";
+import { cn } from "@/lib/tailwindUtil";
+
+interface SortProps {
+  label: string;
+  options: string[];
+  className?: string;
+  onSortChange: (option: string) => void;
+}
+
+const SortDropdown = ({ label, options, className = "", onSortChange }: SortProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedLabel, setSelectedLabel] = useState(label);
+
+  const toggleDropdown = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  const handleSelect = (option: string) => {
+    setSelectedLabel(option);
+    onSortChange(option);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className={cn("relative inline-block text-left", "w-20 text-xs md:w-32 md:text-lg", className)}>
+      <div>
+        <button
+          type="button"
+          onClick={toggleDropdown}
+          className={cn(
+            "text-grayscale-700 flex w-full items-center justify-between rounded-md font-medium",
+            "bg-transparent"
+          )}
+        >
+          <span>{selectedLabel}</span>
+          <span className={cn("transition-transform duration-200", isOpen ? "rotate-180" : "")}>
+            <IoIosArrowDown className="text-grayscale-200" />
+          </span>
+        </button>
+      </div>
+
+      {isOpen && (
+        <div
+          className={cn(
+            "ring-black absolute right-0 z-10 mt-2 overflow-y-auto rounded-md bg-white",
+            "h-30 w-20 md:w-32 md:p-1 md:text-lg"
+          )}
+        >
+          <div role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
+            <ul>
+              {options.map((option) => (
+                <li
+                  key={option}
+                  onClick={() => handleSelect(option)}
+                  className={cn(
+                    "cursor-pointer rounded-md py-2 text-center",
+                    "hover:text-grayscale-700 text-grayscale-200 hover:bg-primary-orange-50 hover:font-bold"
+                  )}
+                >
+                  {option}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SortDropdown;
diff --git a/src/app/components/button/dropdown/TabMenuDropdown.tsx b/src/app/components/button/dropdown/TabMenuDropdown.tsx
new file mode 100644
index 00000000..5e83df49
--- /dev/null
+++ b/src/app/components/button/dropdown/TabMenuDropdown.tsx
@@ -0,0 +1,91 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { IoIosArrowDown } from "react-icons/io";
+import { cn } from "@/lib/tailwindUtil";
+import useWidth from "@/hooks/useWidth";
+
+interface TopMenuDropdownProps {
+  options: { label: string; isEditing: boolean }[];
+  className?: string;
+  onChange?: (menu: string) => void;
+  currentParam: string;
+}
+
+const EditingChip = ({ className = "", selected }: { className?: string; selected?: boolean }) => {
+  const chipStyle = "rounded-2xl border lg:border-[1.5px] px-2 py-1 text-xs lg:text-base";
+  const selectedStyle = "border-grayscale-100 bg-white bg-opacity-20 text-white";
+  const defaultStyle = "bg-background-100 border-grayscale-100 text-grayscale-300";
+  return <span className={cn(chipStyle, selected ? selectedStyle : defaultStyle, className)}>작성중</span>;
+};
+
+const TabMenuDropdown = ({ options, className = "", onChange, currentParam = "" }: TopMenuDropdownProps) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [selectedLabel, setSelectedLabel] = useState<string>(options[0].label); // 선택된 값 (label을 저장)
+  const { isDesktop } = useWidth();
+
+  useEffect(() => {
+    switch (currentParam) {
+      case "recruit-content":
+        setSelectedLabel("모집 내용");
+        break;
+      case "recruit-condition":
+        setSelectedLabel("모집 조건");
+        break;
+      case "work-condition":
+        setSelectedLabel("근무 조건");
+        break;
+      default:
+        setSelectedLabel("모집 내용");
+    }
+  }, []);
+
+  const handleOptionClick = (label: string) => {
+    setSelectedLabel(label); // 선택된 레이블을 저장
+    setIsOpen((prev) => !prev);
+    onChange?.(label);
+  };
+
+  const baseStyle = "mr-4 inline-flex size-5 lg:size-7 items-center justify-center rounded-2xl text-center text-sm";
+
+  const listStyle =
+    "relative flex justify-between items-center w-[327px] lg:w-[372px] h-[52px] lg:h-[78px] cursor-pointer px-6 py-3 lg:py-6 lg:px-8 hover:bg-background-300 text-left text-sm lg:text-xl font-bold text-black-100 lg:hover:rounded-[20px]";
+  const selectedStyle =
+    "focus:outline-none text-white bg-primary-orange-300 lg:rounded-[20px] hover:bg-primary-orange-300";
+  const wrapperStyle = `border border-line-200 lg:border-none cursor-pointer flex flex-col rounded-2xl overflow-hidden ${className}`;
+
+  const numberStyle = `${baseStyle} bg-background-300 font-semibold text-grayscale-200`;
+  const selectedIndexStyle = `bg-primary-orange-50 text-primary-orange-300`;
+
+  // 모바일일때는 클릭 시 메뉴 펼치기 & 메뉴 선택 시 메뉴 닫기 (ArrowIcon 표시)
+  return (
+    <ul className={cn(wrapperStyle)}>
+      {options.map((option, idx) => {
+        const selected = selectedLabel === option.label;
+        return (
+          <li
+            role="button"
+            className={cn(listStyle, selected && selectedStyle, !selected && !isOpen && !isDesktop && "hidden")}
+            key={option.label}
+            onClick={() => handleOptionClick(option.label)}
+          >
+            <span className="relative">
+              <span className={cn(numberStyle, selected && selectedIndexStyle)}>{idx + 1}</span>
+              <span>{option.label}</span>
+              <EditingChip
+                selected={selected}
+                className={cn("ml-3 lg:absolute lg:-right-[190px] lg:-top-[2px]", option.isEditing ? "" : "invisible")}
+              />
+            </span>
+            <button type="button" className={cn("flex items-center", !selected && "hidden")}>
+              <IoIosArrowDown
+                className={cn("size-5 transition-transform duration-200 lg:hidden", isOpen && "rotate-180")}
+              />
+            </button>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+export default TabMenuDropdown;
diff --git a/src/app/components/button/dropdown/dropdownComponent/DropdownList.tsx b/src/app/components/button/dropdown/dropdownComponent/DropdownList.tsx
new file mode 100644
index 00000000..94b36876
--- /dev/null
+++ b/src/app/components/button/dropdown/dropdownComponent/DropdownList.tsx
@@ -0,0 +1,85 @@
+"use client";
+import { cn } from "@/lib/tailwindUtil";
+import { useEffect, useRef } from "react";
+
+const DropdownItem = ({
+  item,
+  onSelect,
+  itemStyle,
+}: {
+  item: string;
+  onSelect: (item: string | null) => void;
+  itemStyle?: string;
+}) => {
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onSelect(item);
+  };
+
+  return (
+    <li
+      onClick={handleClick}
+      className={cn(
+        "flex w-full cursor-pointer bg-grayscale-50 px-[10px] py-2 text-sm font-normal leading-[18px] text-black-100 hover:bg-primary-orange-50 lg:text-lg lg:leading-[26px]",
+        itemStyle
+      )}
+    >
+      {item}
+    </li>
+  );
+};
+
+const DropdownList = ({
+  list,
+  onSelect,
+  wrapperStyle,
+  itemStyle,
+}: {
+  list: string[];
+  onSelect: (item: string | null) => void;
+  wrapperStyle?: string;
+  itemStyle?: string;
+}) => {
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        event.preventDefault();
+        onSelect(null);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside, { capture: true });
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside, { capture: true });
+    };
+  }, [onSelect]);
+
+  const handleContainerClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <div
+      role="menu"
+      aria-orientation="vertical"
+      aria-labelledby="options-menu"
+      ref={dropdownRef}
+      onClick={handleContainerClick}
+      className={cn(
+        "absolute left-0 right-0 z-10 mt-[6px] rounded border border-grayscale-100 bg-grayscale-50 pr-[2px] pt-1",
+        wrapperStyle
+      )}
+    >
+      <ul className="scrollbar-custom flex max-h-[150px] flex-col">
+        {list.map((item) => (
+          <DropdownItem key={item} item={item} onSelect={onSelect} itemStyle={itemStyle} />
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default DropdownList;
diff --git a/src/app/components/card/board/BoardComment.tsx b/src/app/components/card/board/BoardComment.tsx
new file mode 100644
index 00000000..38125921
--- /dev/null
+++ b/src/app/components/card/board/BoardComment.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import Image from "next/image";
+import { formatLocalDate } from "@/utils/workDayFormatter";
+import KebabDropdown from "@/app/components/button/dropdown/KebabDropdown";
+import useModalStore from "@/store/modalStore";
+import { useDeleteComment } from "@/hooks/queries/post/comment/useDeleteComment";
+import { useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+
+export interface BoardCommentProps {
+  id: string;
+  postId: string;
+  postTitle: string;
+  comment: string;
+  updatedAt: Date;
+  isAuthor?: boolean;
+}
+
+const BoardComment = ({ id, postId, postTitle, comment, updatedAt, isAuthor = false }: BoardCommentProps) => {
+  const { openModal } = useModalStore();
+  const queryClient = useQueryClient();
+  const deleteComment = useDeleteComment(id);
+  const router = useRouter();
+
+  const handleDelete = () => {
+    openModal("customForm", {
+      isOpen: true,
+      title: "댓글을 삭제할까요?",
+      content: "삭제된 댓글은 복구할 수 없습니다.",
+      confirmText: "삭제하기",
+      cancelText: "취소",
+      onConfirm: () => {
+        deleteComment.mutate(undefined, {
+          onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ["comments"] });
+            openModal("customForm", {
+              isOpen: false,
+              title: "",
+              content: "",
+              onConfirm: () => {},
+              onCancel: () => {},
+            });
+          },
+        });
+      },
+      onCancel: () => {
+        openModal("customForm", {
+          isOpen: false,
+          title: "",
+          content: "",
+          onConfirm: () => {},
+          onCancel: () => {},
+        });
+      },
+    });
+  };
+
+  const dropdownOptions = [
+    {
+      label: "게시글 보기",
+      onClick: () => router.push(`/albatalk/${postId}`),
+    },
+    {
+      label: "삭제하기",
+      onClick: handleDelete,
+    },
+  ];
+
+  return (
+    <div
+      className={`flex w-[327px] flex-col rounded-[16px] border border-line-100 bg-grayscale-50 p-3 md:w-[280px] lg:w-[320px] lg:p-4 xl:w-[380px]`}
+      style={{ minHeight: "202px" }}
+    >
+      {/* Comment Section */}
+      <div className="mb-4">
+        <div className="w-full rounded-lg bg-white p-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Image
+                src="/icons/user/user-profile-sm.svg"
+                alt="User Icon"
+                className="rounded-full"
+                width={24}
+                height={24}
+                sizes="(max-width: 600px) 24px, (max-width: 1480px) 28px, 30px"
+              />
+              <div className="flex items-center gap-1">
+                <span className="text-grayscale-400">|</span>
+                <span className="font-nexon text-[12px] text-grayscale-400 md:text-[14px] lg:text-[16px]">
+                  {formatLocalDate(updatedAt)}
+                </span>
+              </div>
+            </div>
+
+            {isAuthor && <KebabDropdown options={dropdownOptions} />}
+          </div>
+
+          <div className="mt-3">{comment}</div>
+        </div>
+      </div>
+
+      {/* Divider Line */}
+      <div className="my-[9px] flex items-center justify-center lg:my-[16px]">
+        <div className="w-full bg-line-100" style={{ height: "1px" }}></div>
+      </div>
+
+      {/* Post Section */}
+      <div className="line-clamp-2 font-nexon text-[12px] font-medium text-black-100 lg:text-[16px]">{postTitle}</div>
+    </div>
+  );
+};
+
+export default BoardComment;
diff --git a/src/app/components/card/board/CardBoard.tsx b/src/app/components/card/board/CardBoard.tsx
new file mode 100644
index 00000000..4b6502e4
--- /dev/null
+++ b/src/app/components/card/board/CardBoard.tsx
@@ -0,0 +1,189 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { formatLocalDate } from "@/utils/workDayFormatter";
+import useWidth from "@/hooks/useWidth";
+import KebabDropdown from "@/app/components/button/dropdown/KebabDropdown";
+import useModalStore from "@/store/modalStore";
+import { useDeletePost } from "@/hooks/queries/post/useDeletePost";
+
+export interface CardBoardProps {
+  id: string;
+  title: string;
+  content: string;
+  nickname: string;
+  updatedAt: Date;
+  commentCount: number;
+  likeCount: number;
+  variant?: "default" | "primary";
+  isAuthor?: boolean;
+}
+
+const CardBoard = ({
+  id,
+  title,
+  content,
+  nickname,
+  updatedAt,
+  commentCount,
+  likeCount,
+  variant = "default",
+  isAuthor = false,
+}: CardBoardProps) => {
+  const { isDesktop } = useWidth();
+  const router = useRouter();
+  const [isLiked, setIsLiked] = useState(false);
+  const [likeDisplayCount, setLikeDisplayCount] = useState(likeCount);
+  const { openModal } = useModalStore();
+
+  const deletePost = useDeletePost(id);
+
+  const handleDelete = () => {
+    openModal("customForm", {
+      isOpen: true,
+      title: "게시글을 삭제할까요?",
+      content: "삭제된 게시글은 복구할 수 없습니다.",
+      confirmText: "삭제하기",
+      cancelText: "취소",
+      onConfirm: () => {
+        deletePost.mutate(undefined, {
+          onSuccess: () => {
+            openModal("customForm", {
+              isOpen: false,
+              title: "",
+              content: "",
+              onConfirm: () => undefined,
+              onCancel: () => undefined,
+            });
+          },
+        });
+      },
+      onCancel: () => {
+        openModal("customForm", {
+          isOpen: false,
+          title: "",
+          content: "",
+          onConfirm: () => undefined,
+          onCancel: () => undefined,
+        });
+      },
+    });
+  };
+
+  const handleEditTalk = () => {
+    router.push(`/albatalk/${id}/edit`);
+  };
+
+  const dropdownOptions = [
+    { label: "수정하기", onClick: handleEditTalk },
+    {
+      label: "삭제하기",
+      onClick: handleDelete,
+      disabled: deletePost.isPending,
+    },
+  ];
+
+  const handleLikeClick = (e: React.MouseEvent<HTMLImageElement>) => {
+    e.stopPropagation();
+    if (isLiked) {
+      setLikeDisplayCount((prev) => prev - 1);
+    } else {
+      setLikeDisplayCount((prev) => prev + 1);
+    }
+    setIsLiked((prev) => !prev);
+  };
+
+  return (
+    <div
+      className={`h-[220px] w-[320px] rounded-[16px] border p-4 lg:h-[240px] lg:w-[360px] ${
+        variant === "primary" ? "border-primary-orange-100 bg-primary-orange-50" : "border-line-100 bg-grayscale-50"
+      } cursor-pointer`}
+      onClick={() => router.push(`/albatalk/${id}`)}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          router.push(`/albatalk/${id}`);
+        }
+      }}
+    >
+      <div className="flex h-full flex-col justify-between">
+        <div className="flex flex-col">
+          <div className="mb-2 flex items-center justify-between">
+            <h2 className="line-clamp-2 flex-1 font-nexon text-[16px] font-semibold text-black-400 lg:text-[18px]">
+              {title}
+            </h2>
+            {isAuthor && (
+              <div onClick={(e) => e.stopPropagation()}>
+                <KebabDropdown options={dropdownOptions} />
+              </div>
+            )}
+          </div>
+          <div className="line-clamp-2 whitespace-pre-wrap break-all font-nexon text-xs font-normal leading-[1.5] text-grayscale-500 lg:text-base">
+            {content}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 lg:gap-3">
+            <Image
+              src={`/icons/user/${isDesktop ? "user-profile-md.svg" : "user-profile-sm.svg"}`}
+              alt="User Icon"
+              width={28}
+              height={28}
+              className="shrink-0"
+            />
+            <div className="flex min-w-0 items-center gap-1">
+              <span className="truncate font-nexon text-[14px] font-normal text-grayscale-500 lg:text-[16px]">
+                {nickname}
+              </span>
+              <span className="shrink-0 text-grayscale-500">|</span>
+              <span className="shrink-0 whitespace-nowrap font-nexon text-[14px] font-normal text-grayscale-500 lg:text-[16px]">
+                {formatLocalDate(updatedAt)}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex shrink-0 items-center gap-1 lg:gap-2">
+            <div className="flex items-center gap-1">
+              <Image
+                src={`/icons/comment/${isDesktop ? "comment-md.svg" : "comment-sm.svg"}`}
+                alt="Comment Icon"
+                width={22}
+                height={22}
+              />
+              <span className="font-nexon text-[14px] font-normal text-grayscale-500 lg:text-[16px]">
+                {commentCount}
+              </span>
+            </div>
+            <div className="flex items-center gap-1">
+              <Image
+                src={`/icons/like/${
+                  isLiked
+                    ? isDesktop
+                      ? "like-md-active.svg"
+                      : "like-sm-active.svg"
+                    : isDesktop
+                      ? "like-md.svg"
+                      : "like-sm.svg"
+                }`}
+                alt="Like Icon"
+                width={22}
+                height={22}
+                className="cursor-pointer"
+                onClick={handleLikeClick}
+              />
+              <span className="font-nexon text-[14px] font-normal text-grayscale-500 lg:text-[16px]">
+                {likeDisplayCount}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CardBoard;
diff --git a/src/app/components/card/board/Comment.tsx b/src/app/components/card/board/Comment.tsx
new file mode 100644
index 00000000..842c0367
--- /dev/null
+++ b/src/app/components/card/board/Comment.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import Image from "next/image";
+import { formatLocalDate } from "@/utils/workDayFormatter";
+import { useState } from "react";
+import BaseTextArea from "@/app/components/input/textarea/BaseTextArea";
+import Button from "@/app/components/button/default/Button";
+import KebabDropdown from "@/app/components/button/dropdown/KebabDropdown";
+import useModalStore from "@/store/modalStore";
+import { useEditComment } from "@/hooks/queries/post/comment/useEditComment";
+import { useDeleteComment } from "@/hooks/queries/post/comment/useDeleteComment";
+import { useQueryClient } from "@tanstack/react-query";
+
+export interface CommentProps {
+  id: string;
+  nickname: string;
+  updatedAt: Date;
+  content: string;
+  isAuthor?: boolean;
+}
+
+const Comment = ({ id, nickname, updatedAt, content, isAuthor = false }: CommentProps) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedContent, setEditedContent] = useState(content);
+  const { openModal } = useModalStore();
+  const queryClient = useQueryClient();
+
+  const editComment = useEditComment(id);
+  const deleteComment = useDeleteComment(id);
+
+  const handleEdit = () => {
+    if (editedContent.trim() === "") return;
+
+    editComment.mutate(
+      { content: editedContent },
+      {
+        onSuccess: () => {
+          setIsEditing(false);
+          queryClient.invalidateQueries({ queryKey: ["comments"] });
+        },
+      }
+    );
+  };
+
+  const handleDelete = () => {
+    openModal("customForm", {
+      isOpen: true,
+      title: "댓글을 삭제할까요?",
+      content: "삭제된 댓글은 복구할 수 없습니다.",
+      confirmText: "삭제하기",
+      cancelText: "취소",
+      onConfirm: () => {
+        deleteComment.mutate(undefined, {
+          onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ["comments"] });
+            openModal("customForm", {
+              isOpen: false,
+              title: "",
+              content: "",
+              onConfirm: () => {},
+              onCancel: () => {},
+            });
+          },
+        });
+      },
+      onCancel: () => {
+        openModal("customForm", {
+          isOpen: false,
+          title: "",
+          content: "",
+          onConfirm: () => {},
+          onCancel: () => {},
+        });
+      },
+    });
+  };
+
+  const dropdownOptions = [
+    { label: "수정하기", onClick: () => setIsEditing(true) },
+    { label: "삭제하기", onClick: handleDelete },
+  ];
+
+  if (isEditing) {
+    return (
+      <div className="space-y-4">
+        <BaseTextArea
+          name="comment"
+          value={editedContent}
+          onChange={(e) => setEditedContent(e.target.value)}
+          placeholder="댓글을 입력해주세요."
+          className="h-[90px] w-[344px] resize-none rounded-lg bg-background-200 p-4 md:w-[742px] lg:h-[100px] lg:w-[994px] xl:w-[1410px]"
+          size="h-[120px] w-[375px] md:w-[768px] lg:w-[1024px] xl:w-[1440px] lg:h-[144px]"
+          variant="white"
+        />
+        <div className="flex justify-end gap-2">
+          <Button
+            onClick={() => setIsEditing(false)}
+            className="h-[40px] w-[80px] bg-grayscale-300 text-sm hover:bg-grayscale-200 lg:h-[48px] lg:w-[100px]"
+          >
+            취소
+          </Button>
+          <Button
+            onClick={handleEdit}
+            disabled={editComment.isPending || editedContent.trim() === ""}
+            className="h-[40px] w-[80px] text-sm lg:h-[48px] lg:w-[100px]"
+          >
+            {editComment.isPending ? "수정 중..." : "수정하기"}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full rounded-lg border border-line-200 bg-white p-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Image
+            src="/icons/user/user-profile-sm.svg"
+            alt="User Icon"
+            className="rounded-full"
+            width={24}
+            height={24}
+            sizes="(max-width: 600px) 24px, (max-width: 1480px) 28px, 30px"
+          />
+          {nickname && (
+            <div className="flex items-center gap-1">
+              <span className="font-nexon text-[14px] font-medium text-black-400 md:text-[16px] lg:text-[18px]">
+                {nickname}
+              </span>
+              <span className="text-grayscale-400">|</span>
+              <span className="font-nexon text-[12px] text-grayscale-400 md:text-[14px] lg:text-[16px]">
+                {formatLocalDate(updatedAt)}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {isAuthor && <KebabDropdown options={dropdownOptions} />}
+      </div>
+
+      <div className="mt-3">
+        <p className="whitespace-pre-wrap break-words font-nexon text-[14px] leading-[1.6] text-black-400 md:text-[16px] lg:text-[18px]">
+          {content}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Comment;
diff --git a/src/app/components/card/board/CommentDetail.tsx b/src/app/components/card/board/CommentDetail.tsx
new file mode 100644
index 00000000..2b311299
--- /dev/null
+++ b/src/app/components/card/board/CommentDetail.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+import Image from "next/image";
+import BaseTextArea from "@/app/components/input/textarea/BaseTextArea";
+import Button from "@/app/components/button/default/Button";
+
+export interface CommentDetailProps {
+  id: number;
+  userName: string;
+  userImageUrl?: string;
+  date: string;
+  comment: string;
+  isAuthor: boolean;
+  onEdit: (id: number, newContent: string) => void;
+  onDelete: (id: number) => void;
+}
+
+const CommentDetail: React.FC<CommentDetailProps> = ({
+  id,
+  userName,
+  userImageUrl,
+  date,
+  comment,
+  isAuthor,
+  onEdit,
+  onDelete,
+}) => {
+  const [showOptions, setShowOptions] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedComment, setEditedComment] = useState(comment);
+  const [imageError, setImageError] = useState(false);
+  const optionsRef = useRef<HTMLDivElement>(null);
+
+  const handleEdit = () => {
+    onEdit(id, editedComment);
+    setIsEditing(false);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (optionsRef.current && !optionsRef.current.contains(event.target as Node)) {
+        setShowOptions(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return (
+    <div className="relative flex h-auto min-h-[128px] w-full flex-col border border-line-200 p-4 sm:min-h-[122px] lg:min-h-[148px]">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-1">
+          {imageError || !userImageUrl ? (
+            <div className="relative h-6 w-6 rounded-full bg-gray-300">
+              <span className="absolute inset-0 flex items-center justify-center text-xs text-gray-600">
+                {userName?.[0]?.toUpperCase() || "?"}
+              </span>
+            </div>
+          ) : (
+            <Image
+              src={userImageUrl}
+              alt={`${userName || "User"}'s profile`}
+              width={24}
+              height={24}
+              className="rounded-full"
+              onError={() => setImageError(true)}
+            />
+          )}
+          <div className="flex items-center gap-1 truncate">
+            <span className="truncate font-nexon text-xs text-grayscale-500 sm:text-sm lg:text-base">
+              {userName || "Anonymous"}
+            </span>
+            <span className="mx-1 text-grayscale-500"> | </span>
+            <span className="font-nexon text-xs text-grayscale-500 sm:text-sm lg:text-base">{date}</span>
+          </div>
+        </div>
+
+        {isAuthor && (
+          <div className="relative" ref={optionsRef}>
+            <button
+              type="button"
+              onClick={() => setShowOptions(!showOptions)}
+              className="text-grayscale-500"
+              aria-label="Options"
+            >
+              <Image src="/icons/menu/kebab-menu-md.svg" alt="Menu" width={28} height={28} />
+            </button>
+            {showOptions && (
+              <div className="absolute right-0 mt-2 w-[80px] rounded-lg bg-white shadow-lg sm:w-[132px] lg:w-[132px]">
+                <div className="flex h-[68px] flex-col justify-center gap-2 p-2 sm:h-[104px] lg:h-[104px]">
+                  <button
+                    onClick={() => {
+                      setIsEditing(true);
+                      setShowOptions(false);
+                    }}
+                    className="rounded-md bg-grayscale-50 p-2 text-xs text-grayscale-400 hover:bg-orange-50 hover:text-black-400 sm:text-sm"
+                  >
+                    수정하기
+                  </button>
+                  <button
+                    onClick={() => {
+                      if (confirm("정말로 삭제하시겠습니까?")) {
+                        onDelete(id);
+                      }
+                      setShowOptions(false);
+                    }}
+                    className="rounded-md bg-grayscale-50 p-2 text-xs text-grayscale-400 hover:bg-orange-50 hover:text-black-400 sm:text-sm"
+                  >
+                    삭제하기
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {isEditing ? (
+        <div className="mt-4">
+          <BaseTextArea
+            name="editComment"
+            variant="white"
+            placeholder="댓글을 수정해주세요."
+            value={editedComment}
+            onChange={(e) => setEditedComment(e.target.value)}
+            size="w-full h-[132px] sm:h-[132px] lg:h-[160px]"
+          />
+          <div className="mt-2 flex justify-end space-x-2">
+            <Button onClick={handleEdit}>저장</Button>
+            <Button onClick={() => setIsEditing(false)} variant="outlined">
+              취소
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div className="mt-4 w-full overflow-hidden text-xs leading-normal sm:text-sm lg:text-base">
+          <p className="font-nexon text-black-400">{comment}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CommentDetail;
diff --git a/src/app/components/card/cardList/AlbaListItem.tsx b/src/app/components/card/cardList/AlbaListItem.tsx
new file mode 100644
index 00000000..a9a7cfc9
--- /dev/null
+++ b/src/app/components/card/cardList/AlbaListItem.tsx
@@ -0,0 +1,232 @@
+import Image from "next/image";
+import { formatLocalDate } from "@/utils/workDayFormatter";
+import { getRecruitmentStatus, getRecruitmentDday } from "@/utils/recruitDateFormatter";
+import { BsThreeDotsVertical } from "react-icons/bs";
+import Chip from "@/app/components/chip/Chip";
+import { useState, useEffect, useRef } from "react";
+import { useRouter } from "next/navigation";
+import useModalStore from "@/store/modalStore";
+import Indicator from "@/app/components/pagination/Indicator";
+import { FormListType } from "@/types/response/form";
+import { useFormScrap } from "@/hooks/queries/form/useFormScap";
+import { MdOutlineImage } from "react-icons/md";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
+import { isValidS3Url } from "@/utils/checkS3Url";
+
+/**
+ * 알바폼 리스트 아이템 컴포넌트
+ * 알바폼 정보를 카드 형태로 표시하며, 이미지 인디케이터와 지원하기/스크랩 기능을 포함
+ */
+const AlbaListItem = ({
+  id,
+  imageUrls,
+  isPublic,
+  recruitmentStartDate,
+  recruitmentEndDate,
+  title,
+  applyCount,
+  scrapCount,
+}: FormListType) => {
+  // 라우터 및 상태 관리
+  const router = useRouter();
+  const { openModal } = useModalStore();
+  const { scrap, isLoading: isScrapLoading } = useFormScrap(id);
+  const [showDropdown, setShowDropdown] = useState(false); // 드롭다운 메뉴 표시 상태
+  const [currentImageIndex, setCurrentImageIndex] = useState(0); // 현재 이미지 인덱스
+  const dropdownRef = useRef<HTMLDivElement>(null); // 드롭다운 메뉴 참조
+  const [imageError, setImageError] = useState(false);
+
+  // 모집 상태 및 D-day 계산
+  const recruitmentStatus = getRecruitmentStatus(recruitmentEndDate);
+  const dDay = getRecruitmentDday(recruitmentEndDate);
+
+  // 드롭다운 메뉴 외부 클릭 감지
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setShowDropdown(false);
+      }
+    };
+
+    if (showDropdown) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showDropdown]);
+
+  // 드롭다운 토글 핸들러 수정
+  const handleDropdownToggle = (e: React.MouseEvent) => {
+    e.preventDefault(); // Link 클릭 방지
+    e.stopPropagation(); // 이벤트 전파 방지
+    setShowDropdown(!showDropdown);
+  };
+
+  // 드롭다운 메뉴 아이템 클릭 핸들러 수정
+  const handleFormApplication = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setShowDropdown(false);
+    openModal("customForm", {
+      isOpen: true,
+      title: "지원하기",
+      content: "지원하시겠습니까?",
+      onConfirm: () => {
+        openModal("customForm", {
+          isOpen: false,
+          title: "",
+          content: "",
+          onConfirm: () => {},
+          onCancel: () => {},
+        });
+        router.push(`/apply/${id}`);
+      },
+      onCancel: () => {
+        openModal("customForm", {
+          isOpen: false,
+          title: "",
+          content: "",
+          onConfirm: () => {},
+          onCancel: () => {},
+        });
+      },
+    });
+  };
+
+  const handleFormScrap = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setShowDropdown(false);
+    openModal("customForm", {
+      isOpen: true,
+      title: "스크랩 확인",
+      content: "스크랩하시겠습니까?",
+      onConfirm: () => {
+        openModal("customForm", {
+          isOpen: false,
+          title: "",
+          content: "",
+          onConfirm: () => {},
+          onCancel: () => {},
+        });
+        scrap();
+      },
+      onCancel: () => {
+        openModal("customForm", {
+          isOpen: false,
+          title: "",
+          content: "",
+          onConfirm: () => {},
+          onCancel: () => {},
+        });
+      },
+    });
+  };
+
+  return (
+    <div className="relative h-auto w-[327px] overflow-hidden rounded-xl border border-line-200 bg-white shadow-md transition-transform duration-300 hover:scale-[1.02] lg:w-[372px]">
+      {/* 이미지 슬라이더 영역 */}
+      <div className="relative h-[200px] overflow-hidden rounded-t-xl lg:h-[240px]">
+        {imageUrls[currentImageIndex] && !imageError ? (
+          isValidS3Url(imageUrls[currentImageIndex]) ? (
+            <Image
+              src={imageUrls[currentImageIndex]}
+              alt={`Recruit Image ${currentImageIndex + 1}`}
+              fill
+              className="object-cover transition-opacity duration-300"
+              onError={() => setImageError(true)}
+            />
+          ) : (
+            <div className="flex h-full w-full items-center justify-center bg-grayscale-100">
+              <MdOutlineImage className="size-20 text-grayscale-400" />
+            </div>
+          )
+        ) : (
+          <div className="flex h-full w-full items-center justify-center bg-grayscale-100">
+            <MdOutlineImage className="size-20 text-grayscale-400" />
+          </div>
+        )}
+
+        {/* 이미지 인디케이터 - 유효한 이미지가 2개 이상이고 에러가 없을 때만 표시 */}
+        {imageUrls.filter((url) => isValidS3Url(url)).length > 1 && !imageError && (
+          <div className="absolute bottom-4 left-1/2 -translate-x-1/2">
+            <Indicator
+              imageCount={imageUrls.length}
+              currentPage={currentImageIndex}
+              onPageChange={setCurrentImageIndex}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* 콘텐츠 영역 */}
+      <div className="relative flex h-[140px] flex-col justify-between p-2 lg:h-[160px]">
+        {/* 상단 영역 */}
+        <div className="flex flex-col gap-4">
+          {/* 상태 표시 영역 (공개여부, 모집상태, 날짜) */}
+          <div className="flex items-center justify-between">
+            <div className="flex flex-col gap-1 text-grayscale-500">
+              <div className="flex items-center justify-between">
+                <Chip label={isPublic ? "공개" : "비공개"} variant={isPublic ? "positive" : "negative"} />
+                <Chip label={recruitmentStatus} variant={recruitmentStatus === "모집 중" ? "positive" : "negative"} />
+                <span className="ml-4 text-xs font-medium tracking-tighter text-grayscale-500 md:inline lg:text-sm">
+                  {formatLocalDate(recruitmentStartDate, true)} ~ {formatLocalDate(recruitmentEndDate, true)}
+                </span>
+              </div>
+            </div>
+            {/* 케밥 메뉴 */}
+            <div ref={dropdownRef} className="relative">
+              <button
+                type="button"
+                className="hover:text-grayscale-700 text-grayscale-500"
+                onClick={handleDropdownToggle}
+              >
+                <BsThreeDotsVertical className="h-6 w-6" />
+              </button>
+              {/* 드롭다운 메뉴 */}
+              {showDropdown && (
+                <div className="absolute right-0 top-8 z-10 w-32 rounded-lg border border-grayscale-200 bg-white py-2 shadow-lg">
+                  <button
+                    className="w-full px-4 py-2 text-left text-sm hover:bg-primary-orange-100"
+                    onClick={handleFormApplication}
+                  >
+                    지원하기
+                  </button>
+                  <button
+                    className="w-full px-4 py-2 text-left text-sm hover:bg-primary-orange-100 disabled:opacity-50"
+                    onClick={handleFormScrap}
+                    disabled={isScrapLoading}
+                  >
+                    {isScrapLoading ? <DotLoadingSpinner /> : "스크랩"}
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* 제목 */}
+          <div className="text-grayscale-900 truncate pl-2 text-base font-bold lg:text-lg">{title}</div>
+        </div>
+
+        {/* 통계 정보 영역 - mt-auto 제거하고 부모 컨테이너에 justify-between 추가 */}
+        <div className="text-grayscale-700 mt-4 flex h-[50px] items-center justify-between rounded-2xl border border-grayscale-100 text-sm lg:text-base">
+          <div className="flex flex-1 items-center justify-center">
+            <span className="font-medium">지원자 {applyCount}명</span>
+          </div>
+          <div className="h-5 w-[1px] bg-grayscale-200/50" />
+          <div className="flex flex-1 items-center justify-center">
+            <span className="font-medium">스크랩 {scrapCount}명</span>
+          </div>
+          <div className="h-5 w-[1px] bg-grayscale-200/50" />
+          <div className="flex flex-1 items-center justify-center">
+            <span className="font-medium">{dDay}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AlbaListItem;
diff --git a/src/app/components/card/cardList/CardChipIcon.tsx b/src/app/components/card/cardList/CardChipIcon.tsx
new file mode 100644
index 00000000..4444eba5
--- /dev/null
+++ b/src/app/components/card/cardList/CardChipIcon.tsx
@@ -0,0 +1,34 @@
+"use client";
+import React from "react";
+import { FormListType } from "@/types/response/form";
+import { cn } from "@/lib/tailwindUtil";
+import { FaBookmark } from "react-icons/fa6";
+import { MdPeopleAlt } from "react-icons/md";
+
+interface CardChipIconProps {
+  formData: FormListType;
+}
+
+// chip icon
+const CardChipIcon = ({ formData }: CardChipIconProps) => {
+  const propsStyle = "flex items-center gap-4 md:gap-6";
+  const iconStyle = "text-sm md:text-xl";
+  const titleStyle = "min-w-[60px] md:min-w-[80px]";
+  return (
+    <div className="flex w-[327px] flex-col gap-3 rounded-lg border border-line-100 bg-white p-3 text-xs md:w-[770px] md:gap-5 md:px-5 md:py-8 md:text-lg">
+      <div className={cn(propsStyle)}>
+        <FaBookmark className={cn(iconStyle, "text-primary-orange-300")} />
+        <span className={cn(titleStyle)}>스크랩</span>
+        <strong>{formData.scrapCount}개</strong>
+      </div>
+
+      <div className={cn(propsStyle)}>
+        <MdPeopleAlt className={cn(iconStyle)} />
+        <span className={cn(titleStyle)}>지원현황</span>
+        <strong>현재까지 {formData.applyCount}명이 알바폼에 지원했어요!</strong>
+      </div>
+    </div>
+  );
+};
+
+export default CardChipIcon;
diff --git a/src/app/components/card/cardList/MyApplicationListItem.tsx b/src/app/components/card/cardList/MyApplicationListItem.tsx
new file mode 100644
index 00000000..1a64f63b
--- /dev/null
+++ b/src/app/components/card/cardList/MyApplicationListItem.tsx
@@ -0,0 +1,109 @@
+import { getRecruitmentStatus } from "@/utils/recruitDateFormatter";
+import { formatLocalDate } from "@/utils/workDayFormatter";
+import Chip from "@/app/components/chip/Chip";
+import Image from "next/image";
+import { ApplyStatus } from "@/types/application";
+import axios from "axios";
+import toast from "react-hot-toast";
+import { MyApplicationType } from "@/types/response/user";
+import { MdOutlineImage } from "react-icons/md";
+import translateStatus, { getStatusVariant } from "@/utils/translateStatus";
+
+const MyApplicationListItem = ({ createdAt, status, resumeId, resumeName, form }: MyApplicationType) => {
+  // 이력서 다운로드 핸들러
+  const handleResumeDownload = async () => {
+    try {
+      // API를 통해 이력서 파일을 다운로드
+      const response = await axios.get(`/api/resume/${resumeId}/download`, {
+        responseType: "blob",
+      });
+
+      // Blob 객체 생성 및 다운로드 링크 생성
+      const blob = new Blob([response.data], { type: "application/pdf" });
+      const url = window.URL.createObjectURL(blob);
+
+      // 가상의 링크를 생성하여 다운로드 실행
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = resumeName || `이력서_${resumeId}.pdf`;
+      document.body.appendChild(link);
+      link.click();
+
+      // 메모리 정리
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(link);
+
+      toast.success("이력서가 다운로드되었습니다.");
+    } catch (error) {
+      console.error("Resume download error:", error);
+      toast.error("이력서 다운로드에 실패했습니다.");
+    }
+  };
+
+  return (
+    <div className="relative h-auto w-[327px] overflow-hidden rounded-xl border border-grayscale-200 bg-white p-4 shadow-md transition-transform duration-300 hover:scale-[1.02] lg:w-[372px]">
+      <div className="flex h-full flex-col">
+        {/* 상단 영역: 지원일시와 이력서 링크 */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 text-sm text-grayscale-500 md:text-base">
+            <span>지원일시</span>
+            <span>|</span>
+            <span>{formatLocalDate(createdAt, true)}</span>
+          </div>
+          {resumeId > 0 && (
+            <button
+              type="button"
+              onClick={handleResumeDownload}
+              className="decoration-grayscale-600/50 hover:text-grayscale-600 hover:decoration-grayscale-600 text-sm font-medium text-grayscale-500 underline decoration-1 underline-offset-4 hover:cursor-pointer md:text-base"
+            >
+              이력서 보기
+            </button>
+          )}
+        </div>
+
+        {/* 중앙 컨텐츠 영역: 가게 정보, 제목, 설명 */}
+        <div className="flex-1 space-y-3 py-4">
+          {/* 가게 프로필 이미지와 이름 */}
+          <div className="flex items-center gap-2">
+            <div className="relative h-10 w-10 overflow-hidden rounded-full md:h-14 md:w-14">
+              {form.owner.imageUrl ? (
+                <Image src={form.owner.imageUrl} alt={form.owner.storeName} fill className="object-cover" />
+              ) : (
+                <div className="flex h-full w-full items-center justify-center bg-grayscale-100">
+                  <MdOutlineImage className="size-6 text-grayscale-400" />
+                </div>
+              )}
+            </div>
+            <span className="text-grayscale-900 text-base font-medium md:text-lg">{form.owner.storeName}</span>
+          </div>
+
+          {/* 공고 제목 */}
+          <div className="text-grayscale-900 text-lg font-bold md:text-xl">{form.title}</div>
+
+          {/* 공고 설명 (2줄 제한) */}
+          <p className="text-grayscale-600 line-clamp-2 text-sm md:line-clamp-2 md:text-base">{form.description}</p>
+        </div>
+
+        {/* 하단 상태 표시 영역: 지원 상태와 모집 상태 */}
+        <div className="text-grayscale-700 mt-4 flex h-[50px] items-center justify-start gap-2 rounded-2xl text-sm lg:text-base">
+          <div className="rounded-[4px] border border-primary-orange-300 bg-primary-orange-50">
+            <Chip
+              label={translateStatus(status as ApplyStatus)}
+              variant={getStatusVariant(status as ApplyStatus)}
+              textStyle="font-bold"
+            />
+          </div>
+          <div className="rounded-[4px] border border-primary-orange-300 bg-primary-orange-50">
+            <Chip
+              label={getRecruitmentStatus(form.recruitmentEndDate)}
+              variant={getRecruitmentStatus(form.recruitmentEndDate) === "모집 중" ? "positive" : "negative"}
+              textStyle="font-bold"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MyApplicationListItem;
diff --git a/src/app/components/card/cardList/RecruitCondition.tsx b/src/app/components/card/cardList/RecruitCondition.tsx
new file mode 100644
index 00000000..a1ac33bc
--- /dev/null
+++ b/src/app/components/card/cardList/RecruitCondition.tsx
@@ -0,0 +1,46 @@
+"use client";
+import React from "react";
+import { FormDetailResponse } from "@/types/response/form";
+import { cn } from "@/lib/tailwindUtil";
+
+interface RecruitConditionProps {
+  recruitData: FormDetailResponse;
+}
+
+// 모집조건 카드 컴포넌트
+const RecruitCondition = ({ recruitData }: RecruitConditionProps) => {
+  const titleStyle = "text-black-200 min-w-28 lg:min-w-[120px]";
+  return (
+    <div className="flex w-full flex-col gap-5 rounded-lg border border-line-100 bg-white p-4 text-sm lg:w-[640px] lg:p-6 lg:text-lg">
+      <div className="flex">
+        <span className={cn(titleStyle)}>모집 인원</span>
+        <div>
+          <strong>{recruitData.numberOfPositions}명</strong>
+          <span className="text-grayscale-500 lg:text-base">(인원미정)</span>
+        </div>
+      </div>
+
+      <div className="flex">
+        <span className={cn(titleStyle)}>성별</span>
+        <strong>{recruitData.gender}</strong>
+      </div>
+
+      <div className="flex">
+        <span className={cn(titleStyle)}>학력</span>
+        <strong>{recruitData.education}</strong>
+      </div>
+
+      <div className="flex">
+        <span className={cn(titleStyle)}>연령</span>
+        <strong>{recruitData.age}</strong>
+      </div>
+
+      <div className="flex">
+        <span className={cn(titleStyle)}>우대사항</span>
+        <strong>{recruitData.preferred}</strong>
+      </div>
+    </div>
+  );
+};
+
+export default RecruitCondition;
diff --git a/src/app/components/card/cardList/RecruitDetail.tsx b/src/app/components/card/cardList/RecruitDetail.tsx
new file mode 100644
index 00000000..57742419
--- /dev/null
+++ b/src/app/components/card/cardList/RecruitDetail.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { FormDetailResponse } from "@/types/response/form";
+import { cn } from "@/lib/tailwindUtil";
+
+// 모집상세 카드 컴포넌트
+const Devider = () => <div className="border-b-[1px] border-line-200" />;
+
+interface RecruitDetailProps {
+  recruitData: FormDetailResponse;
+}
+
+const RecruitDetail = ({ recruitData }: RecruitDetailProps) => {
+  const titleStyle = "text-black-100";
+  const propsStyle = "flex items-center justify-between md:py-4";
+
+  return (
+    <div className="flex h-[156px] w-full flex-col justify-center gap-3 rounded-lg border border-line-100 bg-white px-6 py-3 text-sm md:h-[336px] md:gap-6 md:text-lg">
+      <div className={cn(propsStyle)}>
+        <div>
+          <span className={cn(titleStyle)}>모집 기간</span>
+          <strong className="orange-black-100 ml-4 text-primary-orange-300">D-10</strong>
+        </div>
+        <strong>
+          {new Date(recruitData.recruitmentStartDate).toLocaleDateString()} ~{" "}
+          {new Date(recruitData.recruitmentEndDate).toLocaleDateString()}
+        </strong>
+      </div>
+      <Devider />
+      {/* 가게 전화번호 */}
+      <div className={cn(propsStyle)}>
+        <span className={cn(titleStyle)}>가게 전화번호</span>
+        <strong>{recruitData.storePhoneNumber}</strong>
+      </div>
+      <Devider />
+      {/* 사장님 전화번호 */}
+      <div className={cn(propsStyle)}>
+        <span className={cn(titleStyle)}>사장님 전화번호</span>
+        <strong>{recruitData.phoneNumber}</strong>
+      </div>
+    </div>
+  );
+};
+
+export default RecruitDetail;
diff --git a/src/app/components/card/cardList/RecruitIcon.tsx b/src/app/components/card/cardList/RecruitIcon.tsx
new file mode 100644
index 00000000..886298eb
--- /dev/null
+++ b/src/app/components/card/cardList/RecruitIcon.tsx
@@ -0,0 +1,91 @@
+import { formatLocalDate, getWorkDaysDisplay } from "@/utils/workDayFormatter";
+import RecruitIconItem from "./RecruitIconItem";
+import React from "react";
+
+// 채용 공고 아이콘 컴포넌트의 Props 인터페이스
+interface RecruitIconProps {
+  hourlyWage: number;
+  recruitmentStartDate: Date;
+  recruitmentEndDate: Date;
+  isNegotiableWorkDays: boolean;
+  workDays?: string[];
+  workStartTime: string;
+  workEndTime: string;
+}
+
+// 채용 공고의 근무 조건을 아이콘으로 표시하는 컴포넌트
+export const RecruitIcon = ({
+  hourlyWage,
+  recruitmentStartDate,
+  recruitmentEndDate,
+  isNegotiableWorkDays,
+  workDays = [],
+  workStartTime,
+  workEndTime,
+}: RecruitIconProps) => {
+  // 모집 기간을 반응형으로 표시하는 컴포넌트
+  const periodValue = (
+    <React.Fragment>
+      {/* 모바일에서 표시되는 기간 형식 */}
+      <span className="whitespace-normal lg:hidden">
+        {formatLocalDate(recruitmentStartDate)}~{formatLocalDate(recruitmentEndDate)}
+      </span>
+      {/* 데스크탑에서 표시되는 기간 형식 */}
+      <span className="hidden whitespace-normal lg:inline">
+        {formatLocalDate(recruitmentStartDate, true)}~
+        <br />
+        {formatLocalDate(recruitmentEndDate, true)}
+      </span>
+    </React.Fragment>
+  );
+
+  // 근무 조건 데이터 배열
+  const conditions = [
+    {
+      icon: {
+        sm: "/icons/coin/coin-sm.svg",
+        md: "/icons/coin/coin-md.svg",
+      },
+      label: "시급",
+      value: `${hourlyWage.toLocaleString()}원`,
+    },
+    {
+      icon: {
+        sm: "/icons/calendar/calendar-clock-sm.svg",
+        md: "/icons/calendar/calendar-clock-md.svg",
+      },
+      label: "기간",
+      value: periodValue,
+    },
+    {
+      icon: {
+        sm: "/icons/calendar/calendar-sm.svg",
+        md: "/icons/calendar/calendar-md.svg",
+      },
+      label: "요일",
+      value: getWorkDaysDisplay(isNegotiableWorkDays, workDays),
+    },
+    {
+      icon: {
+        sm: "/icons/clock/clock-sm.svg",
+        md: "/icons/clock/clock-md.svg",
+      },
+      label: "시간",
+      value: `${workStartTime}~${workEndTime}`,
+    },
+  ];
+
+  return (
+    // 반응형 컨테이너
+    <div className="h-auto w-full">
+      {/* 2x2 그리드 레이아웃 */}
+      <div className="grid h-full grid-cols-2 gap-2">
+        {conditions.map((condition, index) => (
+          <RecruitIconItem key={index} icon={condition.icon} label={condition.label} value={condition.value} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default RecruitIcon;
diff --git a/src/app/components/card/cardList/RecruitIconItem.tsx b/src/app/components/card/cardList/RecruitIconItem.tsx
new file mode 100644
index 00000000..f0877e43
--- /dev/null
+++ b/src/app/components/card/cardList/RecruitIconItem.tsx
@@ -0,0 +1,31 @@
+import Image from "next/image";
+
+interface RecruitIconItemProps {
+  icon: {
+    sm: string;
+    md: string;
+  };
+  label: string;
+  value: string | React.ReactNode;
+}
+
+// 채용 공고의 근무 조건을 아이콘으로 표시하는 컴포넌트의 아이템 컴포넌트
+const RecruitIconItem = ({ icon, label, value }: RecruitIconItemProps) => {
+  return (
+    <div className="flex h-[54px] items-start gap-2 overflow-hidden rounded-lg border border-grayscale-200 p-2 lg:h-[150px] lg:gap-6 lg:p-[30px]">
+      <div className="flex h-9 w-9 items-center justify-center rounded-full bg-grayscale-100 bg-opacity-30 lg:h-14 lg:w-14">
+        <div className="block lg:hidden">
+          <Image src={icon.sm} alt={label} width={24} height={24} />
+        </div>
+        <div className="hidden lg:block">
+          <Image src={icon.md} alt={label} width={36} height={36} />
+        </div>
+      </div>
+      <div className="flex-1">
+        <div className="text-grayscale-600 text-sm font-medium lg:text-xl">{label}</div>
+        <div className="text-sm font-semibold text-primary-orange-300 lg:h-[68px] lg:text-2xl">{value}</div>
+      </div>
+    </div>
+  );
+};
+export default RecruitIconItem;
diff --git a/src/app/components/card/cardList/ScrapListItem.tsx b/src/app/components/card/cardList/ScrapListItem.tsx
new file mode 100644
index 00000000..04cefb10
--- /dev/null
+++ b/src/app/components/card/cardList/ScrapListItem.tsx
@@ -0,0 +1,196 @@
+import Image from "next/image";
+import { formatLocalDate } from "@/utils/workDayFormatter";
+import { getRecruitmentStatus, getRecruitmentDday } from "@/utils/recruitDateFormatter";
+import { BsThreeDotsVertical } from "react-icons/bs";
+import Chip from "@/app/components/chip/Chip";
+import { useState, useEffect, useRef } from "react";
+import useModalStore from "@/store/modalStore";
+import Indicator from "../../pagination/Indicator";
+import { FormListType } from "@/types/response/form";
+import { useFormScrap } from "@/hooks/queries/form/useFormScap";
+import { useRouter } from "next/navigation";
+import { MdOutlineImage } from "react-icons/md";
+import { S3_URL } from "@/constants/config";
+import DotLoadingSpinner from "../../loading-spinner/DotLoadingSpinner";
+
+/**
+ * 알바폼 스크랩 리스트 아이템 컴포넌트
+ * 알바폼 스크랩 정보를 카드 형태로 표시하며, 이미지 인디케이터와 지원하기/스크랩 취소 기능을 포함
+ */
+const ScrapListItem = ({
+  id,
+  imageUrls,
+  isPublic,
+  recruitmentStartDate,
+  recruitmentEndDate,
+  title,
+  applyCount,
+  scrapCount,
+}: FormListType) => {
+  const { openModal } = useModalStore();
+  const router = useRouter();
+  const { unscrap, isLoading: isUnscrapLoading } = useFormScrap(id);
+  const [showDropdown, setShowDropdown] = useState(false); // 드롭다운 메뉴 표시 상태
+  const [currentImageIndex, setCurrentImageIndex] = useState(0); // 현재 표시 중인 이미지 인덱스
+  const dropdownRef = useRef<HTMLDivElement>(null); // 드롭다운 메뉴 참조
+  const [imageError, setImageError] = useState(false);
+
+  // 모집 상태 및 D-day 계산
+  const recruitmentStatus = getRecruitmentStatus(recruitmentEndDate);
+  const dDay = getRecruitmentDday(recruitmentEndDate);
+
+  // 드롭다운 메뉴 외부 클릭 감지
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setShowDropdown(false);
+      }
+    };
+
+    if (showDropdown) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showDropdown]);
+
+  // 지원하기
+  const handleFormApplication = () => {
+    setShowDropdown(false);
+    openModal("customForm", {
+      isOpen: true,
+      title: "지원하기",
+      content: "지원하시겠습니까?",
+      onConfirm: () => {
+        router.push(`/apply/${id}`);
+      },
+      onCancel: () => {},
+    });
+  };
+
+  // 스크랩 취소
+  const handleFormUnscrap = () => {
+    setShowDropdown(false);
+    openModal("customForm", {
+      isOpen: true,
+      title: "스크랩 취소 확인",
+      content: "스크랩을 취소하시겠습니까?",
+      onConfirm: () => {
+        unscrap();
+      },
+      onCancel: () => {},
+    });
+  };
+
+  // S3 URL 체크 함수 추가
+  const isValidS3Url = (url: string) => {
+    return url.startsWith(S3_URL);
+  };
+
+  return (
+    <div className="relative h-auto w-[327px] overflow-hidden rounded-xl border border-grayscale-200 bg-white shadow-md transition-transform duration-300 hover:scale-[1.02] lg:w-[372px]">
+      {/* 이미지 슬라이더 영역 */}
+      <div className="relative h-[200px] overflow-hidden rounded-t-xl lg:h-[240px]">
+        {imageUrls[currentImageIndex] && !imageError ? (
+          isValidS3Url(imageUrls[currentImageIndex]) ? (
+            <Image
+              src={imageUrls[currentImageIndex]}
+              alt={`Recruit Image ${currentImageIndex + 1}`}
+              fill
+              className="object-cover transition-opacity duration-300"
+              onError={() => setImageError(true)}
+            />
+          ) : (
+            <div className="flex h-full w-full items-center justify-center bg-grayscale-100">
+              <MdOutlineImage className="size-20 text-grayscale-400" />
+            </div>
+          )
+        ) : (
+          <div className="flex h-full w-full items-center justify-center bg-grayscale-100">
+            <MdOutlineImage className="size-20 text-grayscale-400" />
+          </div>
+        )}
+
+        {/* 이미지 인디케이터 - 유효한 이미지가 2개 이상이고 에러가 없을 때만 표시 */}
+        {imageUrls.filter((url) => isValidS3Url(url)).length > 1 && !imageError && (
+          <div className="absolute bottom-4 left-1/2 -translate-x-1/2">
+            <Indicator
+              imageCount={imageUrls.length}
+              currentPage={currentImageIndex}
+              onPageChange={setCurrentImageIndex}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* 콘텐츠 영역 */}
+      <div className="relative flex h-[140px] flex-col justify-between p-2 lg:h-[160px]">
+        {/* 상단 영역 */}
+        <div className="flex flex-col gap-4">
+          {/* 상태 표시 영역 (공개여부, 모집상태, 날짜) */}
+          <div className="flex items-center justify-between">
+            <div className="flex flex-col gap-1 text-grayscale-500">
+              <div className="flex items-center justify-between">
+                <Chip label={isPublic ? "공개" : "비공개"} variant={isPublic ? "positive" : "negative"} />
+                <Chip label={recruitmentStatus} variant={recruitmentStatus === "모집 중" ? "positive" : "negative"} />
+                <span className="text-xs font-medium tracking-tighter text-grayscale-500 md:inline lg:text-sm">
+                  {formatLocalDate(recruitmentStartDate, true)} ~ {formatLocalDate(recruitmentEndDate, true)}
+                </span>
+              </div>
+            </div>
+            {/* 케밥 메뉴 */}
+            <div ref={dropdownRef} className="relative">
+              <button
+                type="button"
+                className="hover:text-grayscale-700 text-grayscale-500"
+                onClick={() => setShowDropdown(!showDropdown)}
+              >
+                <BsThreeDotsVertical className="h-6 w-6" />
+              </button>
+              {/* 드롭다운 메뉴 */}
+              {showDropdown && (
+                <div className="absolute right-0 top-8 z-10 w-32 rounded-lg border border-grayscale-200 bg-white py-2 shadow-lg">
+                  <button
+                    className="w-full px-4 py-2 text-left text-sm hover:bg-primary-orange-100"
+                    onClick={handleFormApplication}
+                  >
+                    지원하기
+                  </button>
+                  <button
+                    className="w-full px-4 py-2 text-left text-sm hover:bg-primary-orange-100 disabled:opacity-50"
+                    onClick={handleFormUnscrap}
+                    disabled={isUnscrapLoading}
+                  >
+                    {isUnscrapLoading ? <DotLoadingSpinner /> : "스크랩 취소"}
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* 제목 */}
+          <div className="text-grayscale-900 truncate pl-2 text-base font-bold lg:text-lg">{title}</div>
+        </div>
+
+        {/* 통계 정보 영역 */}
+        <div className="text-grayscale-700 mt-4 flex h-[50px] items-center justify-between rounded-2xl border border-grayscale-100 text-sm lg:text-base">
+          <div className="flex flex-1 items-center justify-center">
+            <span className="font-medium">지원자 {applyCount}명</span>
+          </div>
+          <div className="h-5 w-[1px] bg-grayscale-200/50" />
+          <div className="flex flex-1 items-center justify-center">
+            <span className="font-medium">스크랩 {scrapCount}명</span>
+          </div>
+          <div className="h-5 w-[1px] bg-grayscale-200/50" />
+          <div className="flex flex-1 items-center justify-center">
+            <span className="font-medium">{dDay}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ScrapListItem;
diff --git a/src/app/components/card/cardList/SubmitContCard.tsx b/src/app/components/card/cardList/SubmitContCard.tsx
new file mode 100644
index 00000000..eb14abc8
--- /dev/null
+++ b/src/app/components/card/cardList/SubmitContCard.tsx
@@ -0,0 +1,37 @@
+"use client";
+import { ApplicationResponse } from "@/types/response/application";
+import React from "react";
+import { cn } from "@/lib/tailwindUtil";
+
+interface SubmitContCardProps {
+  submitContData: ApplicationResponse;
+}
+
+// 제출내용 카드 컴포넌트
+const Devider = () => <div className="border-b-[1px] border-line-200" />;
+
+const SubmitContCard = ({ submitContData }: SubmitContCardProps) => {
+  const titleStyle = "text-black-100";
+  const propsStyle = "flex items-center justify-between py-4";
+
+  return (
+    <div className="flex w-[770px] flex-col justify-center gap-4 bg-white px-6 text-base">
+      <div className={cn(propsStyle)}>
+        <span className={cn(titleStyle)}>이름</span>
+        <strong>{submitContData.name}</strong>
+      </div>
+      <Devider />
+      <div className={cn(propsStyle)}>
+        <span className={cn(titleStyle)}>연락처</span>
+        <strong>{submitContData.phoneNumber}</strong>
+      </div>
+      <Devider />
+      <div className={cn(propsStyle)}>
+        <span className={cn(titleStyle)}>경력</span>
+        <strong>{submitContData.experienceMonths} 개월</strong>
+      </div>
+    </div>
+  );
+};
+
+export default SubmitContCard;
diff --git a/src/app/components/card/cardList/apply/ApplyStatusCard.tsx b/src/app/components/card/cardList/apply/ApplyStatusCard.tsx
new file mode 100644
index 00000000..ed43ec59
--- /dev/null
+++ b/src/app/components/card/cardList/apply/ApplyStatusCard.tsx
@@ -0,0 +1,85 @@
+"use client";
+import React, { useState } from "react";
+import { useApplyStatus } from "@/hooks/queries/form/detail/useApplyStatus";
+import translateStatus from "@/utils/translateStatus";
+import { SkeletonRow } from "./SkeletonRow";
+import { ApplyStatus } from "@/types/application";
+import { Player } from "@lottiefiles/react-lottie-player";
+import TableHeader from "./TableHeader";
+
+interface ApplyStatusCardProps {
+  formId: number;
+}
+
+// 지원현황 카드 컴포넌트
+const ApplyStatusCard = ({ formId }: ApplyStatusCardProps) => {
+  const [experienceSort, setExperienceSort] = useState<"asc" | "desc">("asc");
+  const [statusSort, setStatusSort] = useState<"asc" | "desc">("desc");
+
+  const { applyStatusData, isLoading } = useApplyStatus({
+    formId,
+    limit: 30,
+    cursor: 0,
+    orderByExperience: experienceSort,
+    orderByStatus: statusSort,
+  });
+
+  const toggleExperienceSort = () => setExperienceSort((prev) => (prev === "asc" ? "desc" : "asc"));
+  const toggleStatusSort = () => setStatusSort((prev) => (prev === "asc" ? "desc" : "asc"));
+
+  // 지원 현황 로딩 중
+  if (isLoading) {
+    return (
+      <div className="w-[375px] text-xs md:w-[770px] md:text-base">
+        <div className="scrollbar-custom h-[360px] overflow-y-auto md:h-[400px]">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <SkeletonRow key={index} />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // 지원자가 없을 때
+  if (!applyStatusData?.data || applyStatusData.data.length === 0) {
+    return (
+      <div className="mb-4 h-auto w-[375px] text-xs md:w-[770px] md:text-base">
+        <div className="flex flex-col items-center justify-center text-grayscale-500">
+          <Player autoplay loop src="/noapply.json" className="w-1/2" />
+          <p>지원자가 없습니다.</p>
+        </div>
+      </div>
+    );
+  }
+
+  // 지원자가 있을 때
+  return (
+    <div className="w-[375px] text-xs md:w-[770px] md:text-base">
+      <div className="flex flex-col">
+        {/* Thead */}
+        <TableHeader
+          experienceSort={experienceSort}
+          statusSort={statusSort}
+          toggleExperienceSort={toggleExperienceSort}
+          toggleStatusSort={toggleStatusSort}
+        />
+
+        {/* Tbody */}
+        <div className="scrollbar-custom h-[360px] overflow-y-auto md:h-[400px]">
+          {applyStatusData.data.map((application) => (
+            <div key={application.id} className="grid grid-cols-[1fr_2fr_1fr_1fr] border-b border-line-100 px-6 py-4">
+              <span className="w-2/5">{application.name}</span>
+              <span className="w-1/4">{application.phoneNumber}</span>
+              <span className="w-2/5">{application.experienceMonths}개월</span>
+              <span className="w-1/4" style={{ whiteSpace: "nowrap" }}>
+                {translateStatus(application.status as ApplyStatus)}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ApplyStatusCard;
diff --git a/src/app/components/card/cardList/apply/MyApplicationListItem.tsx b/src/app/components/card/cardList/apply/MyApplicationListItem.tsx
new file mode 100644
index 00000000..0cfb5584
--- /dev/null
+++ b/src/app/components/card/cardList/apply/MyApplicationListItem.tsx
@@ -0,0 +1,106 @@
+import { getRecruitmentStatus } from "@/utils/recruitDateFormatter";
+import { formatLocalDate } from "@/utils/workDayFormatter";
+import Chip from "@/app/components/chip/Chip";
+import Image from "next/image";
+import { ApplyStatus } from "@/types/application";
+import axios from "axios";
+import toast from "react-hot-toast";
+import { MyApplicationType } from "@/types/response/user";
+import { MdOutlineImage } from "react-icons/md";
+import translateStatus, { getStatusVariant } from "@/utils/translateStatus";
+
+const MyApplicationListItem = ({ createdAt, status, resumeId, resumeName, form }: MyApplicationType) => {
+  // 이력서 다운로드 핸들러
+  const handleResumeDownload = async () => {
+    try {
+      // API를 통해 이력서 파일을 다운로드
+      const response = await axios.get(`/api/resume/${resumeId}/download`, {
+        responseType: "blob",
+      });
+
+      // Blob 객체 생성 및 다운로드 링크 생성
+      const blob = new Blob([response.data], { type: "application/pdf" });
+      const url = window.URL.createObjectURL(blob);
+
+      // 가상의 링크를 생성하여 다운로드 실행
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = resumeName || `이력서_${resumeId}.pdf`;
+      document.body.appendChild(link);
+      link.click();
+
+      // 메모리 정리
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(link);
+
+      toast.success("이력서가 다운로드되었습니다.");
+    } catch (error) {
+      console.error("Resume download error:", error);
+      toast.error("이력서 다운로드에 실패했습니다.");
+    }
+  };
+
+  return (
+    <div className="relative h-auto w-[327px] overflow-hidden rounded-xl border border-grayscale-200 bg-white p-4 shadow-md transition-transform duration-300 hover:scale-[1.02] lg:w-[372px]">
+      <div className="flex h-full flex-col">
+        {/* 상단 영역: 지원일시와 이력서 링크 */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 text-sm text-grayscale-500 md:text-base">
+            <span>지원일시</span>
+            <span>|</span>
+            <span>{formatLocalDate(createdAt, true)}</span>
+          </div>
+          <button
+            onClick={handleResumeDownload}
+            className="decoration-grayscale-600/50 hover:text-grayscale-600 hover:decoration-grayscale-600 text-sm font-medium text-grayscale-500 underline decoration-1 underline-offset-4 hover:cursor-pointer md:text-base"
+          >
+            이력서 보기
+          </button>
+        </div>
+
+        {/* 중앙 컨텐츠 영역: 가게 정보, 제목, 설명 */}
+        <div className="flex-1 space-y-3 py-4">
+          {/* 가게 프로필 이미지와 이름 */}
+          <div className="flex items-center gap-2">
+            <div className="relative h-10 w-10 overflow-hidden rounded-full md:h-14 md:w-14">
+              {form.owner.imageUrl ? (
+                <Image src={form.owner.imageUrl} alt={form.owner.storeName} fill className="object-cover" />
+              ) : (
+                <div className="flex h-full w-full items-center justify-center bg-grayscale-100">
+                  <MdOutlineImage className="size-6 text-grayscale-400" />
+                </div>
+              )}
+            </div>
+            <span className="text-grayscale-900 text-base font-medium md:text-lg">{form.owner.storeName}</span>
+          </div>
+
+          {/* 공고 제목 */}
+          <div className="text-grayscale-900 text-lg font-bold md:text-xl">{form.title}</div>
+
+          {/* 공고 설명 (2줄 제한) */}
+          <p className="text-grayscale-600 line-clamp-2 text-sm md:line-clamp-2 md:text-base">{form.description}</p>
+        </div>
+
+        {/* 하단 상태 표시 영역: 지원 상태와 모집 상태 */}
+        <div className="text-grayscale-700 mt-4 flex h-[50px] items-center justify-start gap-2 rounded-2xl text-sm lg:text-base">
+          <div className="rounded-[4px] border border-primary-orange-300 bg-primary-orange-50">
+            <Chip
+              label={translateStatus(status as ApplyStatus)}
+              variant={getStatusVariant(status as ApplyStatus)}
+              textStyle="font-bold"
+            />
+          </div>
+          <div className="rounded-[4px] border border-primary-orange-300 bg-primary-orange-50">
+            <Chip
+              label={getRecruitmentStatus(form.recruitmentEndDate)}
+              variant={getRecruitmentStatus(form.recruitmentEndDate) === "모집 중" ? "positive" : "negative"}
+              textStyle="font-bold"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MyApplicationListItem;
diff --git a/src/app/components/card/cardList/apply/SkeletonRow.tsx b/src/app/components/card/cardList/apply/SkeletonRow.tsx
new file mode 100644
index 00000000..1c6d6b41
--- /dev/null
+++ b/src/app/components/card/cardList/apply/SkeletonRow.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+export const SkeletonRow: React.FC = () => (
+  <div className="grid animate-pulse grid-cols-[1fr_2fr_1fr_1fr] border-b border-line-100 px-6 py-4">
+    {[1, 2, 3, 4].map((index) => (
+      <div
+        key={index}
+        className={`h-4 ${index === 1 || index === 3 ? "w-2/5" : "w-1/4"} rounded bg-grayscale-200`}
+      ></div>
+    ))}
+  </div>
+);
diff --git a/src/app/components/card/cardList/apply/TableHeader.tsx b/src/app/components/card/cardList/apply/TableHeader.tsx
new file mode 100644
index 00000000..c7e45486
--- /dev/null
+++ b/src/app/components/card/cardList/apply/TableHeader.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { FaSortAmountDown } from "react-icons/fa";
+import { cn } from "@/lib/tailwindUtil";
+
+interface TableHeaderProps {
+  experienceSort: "asc" | "desc";
+  statusSort: "asc" | "desc";
+  toggleExperienceSort: () => void;
+  toggleStatusSort: () => void;
+}
+
+const TableHeader = ({ experienceSort, statusSort, toggleExperienceSort, toggleStatusSort }: TableHeaderProps) => {
+  const theadStyle = "font-semibold text-grayscale-700";
+  const sortIconStyle = "text-primary-orange-300 transition-transform hover:scale-110";
+
+  return (
+    <div className="sticky grid grid-cols-[1fr_2fr_1fr_1fr] border-b border-line-100 px-6 py-4">
+      <span className={`${theadStyle} w-2/5`}>이름</span>
+      <span className={`${theadStyle} w-1/4`}>전화번호</span>
+      <div className="flex w-2/5 items-center gap-2">
+        <span className={theadStyle}>경력</span>
+        <button onClick={toggleExperienceSort}>
+          <FaSortAmountDown className={cn(sortIconStyle, experienceSort === "desc" && "rotate-180")} />
+        </button>
+      </div>
+      <div className="flex w-1/4 items-center gap-2">
+        <span className={theadStyle} style={{ whiteSpace: "nowrap" }}>
+          상태
+        </span>
+        <button onClick={toggleStatusSort}>
+          <FaSortAmountDown className={cn(sortIconStyle, statusSort === "desc" && "rotate-180")} />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default TableHeader;
diff --git a/src/app/components/chip/Chip.tsx b/src/app/components/chip/Chip.tsx
new file mode 100644
index 00000000..6dc154e3
--- /dev/null
+++ b/src/app/components/chip/Chip.tsx
@@ -0,0 +1,45 @@
+"use client";
+import React from "react";
+import { cn } from "@/lib/tailwindUtil";
+
+interface ChipProps {
+  label: string;
+  variant?: "positive" | "negative";
+  border?: boolean;
+  icon?: React.ReactElement;
+  textStyle?: string;
+}
+/**
+ * @param label
+ * @param variant : "positive" | "negative";
+ * @param border : boolean
+ * @param icon
+ * @param textStyle - 추가 스타일
+ */
+const Chip: React.FC<ChipProps> = ({
+  label = "Label",
+  variant,
+  border,
+  icon,
+  textStyle = "text-sm md:text-base",
+}: ChipProps) => {
+  const wrapperStyle = "rounded flex items-center justify-center m-1";
+  const paddingStyle = icon
+    ? "px-[8px] py-1 md:px-[12px] md:py-1 lg:px-[8px] lg:py-[6px]"
+    : "px-2 py-1 md:px-2 lg:py-[6px] lg:px-2";
+  const variantStyle =
+    variant === "positive" ? "bg-primary-orange-50 text-primary-orange-300" : "bg-line-100 text-grayscale-200";
+  const baseTextStyle =
+    "text-xs leading-[18px] md:leading-[20px] lg:text-sm lg:leading-[22px] font-medium tracking-tighter whitespace-nowrap";
+  const borderStyle = border ? "border border-primary-orange-100" : "";
+  const iconStyle = "flex items-center justify-center";
+
+  return (
+    <div className={cn(wrapperStyle, paddingStyle, variantStyle, borderStyle)}>
+      {icon && <span className={iconStyle}>{icon}</span>}
+      <span className={cn(baseTextStyle, textStyle)}>{label}</span>
+    </div>
+  );
+};
+
+export default Chip;
diff --git a/src/app/components/chip/ChipWithIcon.tsx b/src/app/components/chip/ChipWithIcon.tsx
new file mode 100644
index 00000000..406a77a6
--- /dev/null
+++ b/src/app/components/chip/ChipWithIcon.tsx
@@ -0,0 +1,15 @@
+"use client";
+import { FaBookmark, FaRegBookmark } from "react-icons/fa";
+import Chip from "./Chip";
+
+const ChipWithIcon = ({ label = "Label", isBookmarked = false }: { label: string; isBookmarked: boolean }) => {
+  const iconStyle = "text-grayscale-400 text-[12px] lg:text-[16px]";
+  const icon = isBookmarked ? (
+    <FaBookmark strokeWidth={1.5} className={iconStyle} />
+  ) : (
+    <FaRegBookmark strokeWidth={1.5} className={iconStyle} width={"0.5em"} />
+  );
+  return <Chip variant="negative" label={label} icon={icon} textStyle="text-grayscale-400 !important" />;
+};
+
+export default ChipWithIcon;
diff --git a/src/app/components/input/BaseTextArea.tsx b/src/app/components/input/BaseTextArea.tsx
deleted file mode 100644
index 3d748e05..00000000
--- a/src/app/components/input/BaseTextArea.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { BaseTextAreaProps } from "@/types/textInput";
-
-const BaseTextArea = (props: BaseTextAreaProps) => {
-  // 공통 스타일
-  const baseStyle = "resize-none focus:outline-none h-full w-full";
-  const textStyle =
-    "text-black-400 placeholder:text-grayscale-400 text-sm font-normal leading-[26px] lg:text-base lg:leading-8";
-
-  // variant에 따른 배경색 & border 스타일
-  const variantStyle =
-    props.variant === "white"
-      ? "bg-background-200 border border-transparent hover:border-line-200 [&:has(textarea:focus)]:border-grayscale-400"
-      : "bg-transparent border-[0.5px] border-grayscale-200 caret-primary-orange-300 hover:border-grayscale-300 [&:has(textarea:focus)]:border-primary-orange-300";
-
-  const textAreaBgStyle = props.variant === "white" ? "bg-background-200" : "bg-transparent";
-  const textareaStyle = `${baseStyle} ${textAreaBgStyle} ${textStyle} ${props.className || ""}`;
-
-  const errorStyle = props.errorMessage ? "border-state-error" : "";
-  const wrapperStyle = `group p-[14px] lg:py-[18px] relative rounded-lg w-[327px] lg:w-[640px] h-[132px] lg:h-[160px] ${variantStyle} ${errorStyle}`;
-
-  return (
-    <>
-      <label className="hidden">{props.name}</label>
-      <div className={wrapperStyle}>
-        <textarea id={props.name} placeholder={props.placeholder} disabled={props.disabled} className={textareaStyle} />
-        {props.errorMessage && (
-          <span className="absolute -bottom-[22px] right-0 text-[13px] text-sm font-medium leading-[22px] text-state-error lg:text-base lg:leading-[26px]">
-            {props.errorMessage}
-          </span>
-        )}
-      </div>
-    </>
-  );
-};
-
-export default BaseTextArea;
diff --git a/src/app/components/input/CommonInput.tsx b/src/app/components/input/CommonInput.tsx
deleted file mode 100644
index b22eb8d1..00000000
--- a/src/app/components/input/CommonInput.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-"use client";
-
-import { ChangeEvent, useState } from "react";
-import { LuEye, LuEyeOff } from "react-icons/lu";
-
-interface InputProp {
-  type: string;
-  name?: string;
-  register?: (name: string) => { onChange: (e: ChangeEvent<HTMLInputElement>) => void; onBlur: () => void; ref: any };
-  errors?: boolean;
-  rules?: boolean;
-  size?: string;
-  value?: string;
-  placeholder?: string;
-  className?: string;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
-}
-
-const CommonInput = (props: InputProp) => {
-  const [eyeOn, setEyeOn] = useState(false);
-  const toggleType = () => {
-    setEyeOn(!eyeOn);
-  };
-  const inputType = props.type === "password" && eyeOn ? "text" : props.type;
-
-  return (
-    <>
-      <label className="hidden">{props.name}</label>
-      <input
-        id={props.name}
-        type={inputType}
-        placeholder={props.placeholder}
-        value={props.value}
-        className={`rounded-lg border-[0.5px] p-[14px] font-normal ${props.className}`}
-        onChange={props.onChange}
-      />
-      {props.type === "password" && (
-        <div onClick={toggleType} className="cursor-pointer">
-          {eyeOn ? <LuEye /> : <LuEyeOff />}
-        </div>
-      )}
-      {props.errors && <p className="text-sm text-red-500">{props.errors}</p>}
-    </>
-  );
-};
-
-export default CommonInput;
diff --git a/src/app/components/input/TransparentTextArea.tsx b/src/app/components/input/TransparentTextArea.tsx
deleted file mode 100644
index dc3488c8..00000000
--- a/src/app/components/input/TransparentTextArea.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import BaseTextArea from "./BaseTextArea";
-import { BaseTextAreaProps } from "@/types/textInput";
-
-type TransparentTextAreaProps = Omit<BaseTextAreaProps, "variant">;
-
-const TransparentTextArea = (props: TransparentTextAreaProps) => {
-  return <BaseTextArea {...props} variant="transparent" />;
-};
-
-export default TransparentTextArea;
diff --git a/src/app/components/input/WhiteTextArea.tsx b/src/app/components/input/WhiteTextArea.tsx
deleted file mode 100644
index fc8ceef8..00000000
--- a/src/app/components/input/WhiteTextArea.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import BaseTextArea from "./BaseTextArea";
-import { BaseTextAreaProps } from "@/types/textInput";
-
-type WhiteTextAreaProps = Omit<BaseTextAreaProps, "variant">;
-
-const WhiteTextArea = (props: WhiteTextAreaProps) => {
-  return <BaseTextArea {...props} variant="white" />;
-};
-
-export default WhiteTextArea;
diff --git a/src/app/components/input/applicantCountInput/ApplicantCountInput.tsx b/src/app/components/input/applicantCountInput/ApplicantCountInput.tsx
new file mode 100644
index 00000000..41034adf
--- /dev/null
+++ b/src/app/components/input/applicantCountInput/ApplicantCountInput.tsx
@@ -0,0 +1,25 @@
+"use client";
+import { useDropdownOpen } from "@/hooks/useDropdownOpen";
+import BaseInput from "../text/BaseInput";
+import { IoMdArrowDropdown, IoMdArrowDropup } from "react-icons/io";
+
+const ApplicantCountInput = () => {
+  const { isOpen } = useDropdownOpen();
+  const iconStyle = "text-black-400 size-9";
+  const arrowIcon = isOpen ? <IoMdArrowDropup className={iconStyle} /> : <IoMdArrowDropdown className={iconStyle} />;
+  return (
+    <div>
+      <BaseInput
+        name="applicantCount"
+        type="text"
+        placeholder="00명 (인원미정)"
+        variant="white"
+        afterIcon={arrowIcon}
+        anotherHoverStyle=""
+      />
+      {/* 드롭다운 추가 */}
+    </div>
+  );
+};
+
+export default ApplicantCountInput;
diff --git a/src/app/components/input/dateTimeDaypicker/DatePickerHeader.tsx b/src/app/components/input/dateTimeDaypicker/DatePickerHeader.tsx
new file mode 100644
index 00000000..01b5bd34
--- /dev/null
+++ b/src/app/components/input/dateTimeDaypicker/DatePickerHeader.tsx
@@ -0,0 +1,39 @@
+import { MdKeyboardArrowLeft, MdKeyboardArrowRight } from "react-icons/md";
+
+interface DatePickerHeaderProps {
+  date: Date;
+  decreaseMonth: () => void;
+  increaseMonth: () => void;
+  prevMonthButtonDisabled: boolean;
+  nextMonthButtonDisabled: boolean;
+}
+
+const DatePickerHeader = ({
+  date,
+  decreaseMonth,
+  increaseMonth,
+  prevMonthButtonDisabled,
+  nextMonthButtonDisabled,
+}: DatePickerHeaderProps) => {
+  const iconStyle = "size-6 lg:size-9 text-grayscale-200";
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="lg:h-15 z-20 flex h-12 items-center justify-center text-sm font-semibold leading-6 lg:text-lg lg:font-normal lg:leading-[26px]">
+        기간 선택
+      </div>
+      <div className="lg:h-15 mb-2 flex h-12 items-center justify-between px-[14px] py-3">
+        <button type="button" onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
+          <MdKeyboardArrowLeft className={iconStyle} />
+        </button>
+        <span className="text-base font-semibold leading-[26px] text-black-400 lg:text-[20px] lg:leading-8">
+          {`${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, "0")}`}
+        </span>
+        <button type="button" onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
+          <MdKeyboardArrowRight className={iconStyle} />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default DatePickerHeader;
diff --git a/src/app/components/input/dateTimeDaypicker/DatePickerInput.tsx b/src/app/components/input/dateTimeDaypicker/DatePickerInput.tsx
new file mode 100644
index 00000000..cec7063a
--- /dev/null
+++ b/src/app/components/input/dateTimeDaypicker/DatePickerInput.tsx
@@ -0,0 +1,140 @@
+"use client";
+import BaseInput from "../text/BaseInput";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import { ko } from "date-fns/locale";
+import { IoIosClose, IoMdArrowDropup } from "react-icons/io";
+import { BsCalendar4 } from "react-icons/bs";
+import { useDropdownOpen } from "@/hooks/useDropdownOpen";
+import { useFormContext } from "react-hook-form";
+import DatePickerHeader from "./DatePickerHeader";
+import { useEffect, useRef } from "react";
+interface DatePickerInputProps {
+  startDateName: string;
+  endDateName: string;
+  startDate?: Date;
+  endDate?: Date;
+  onChange: (dates: [Date | null, Date | null]) => void;
+  required?: boolean;
+  errormessage?: boolean;
+  displayValue: string;
+}
+const DatePickerInput = ({
+  startDateName,
+  endDateName,
+  startDate,
+  endDate,
+  onChange,
+  required,
+  errormessage,
+  displayValue,
+}: DatePickerInputProps) => {
+  const { setValue, watch } = useFormContext();
+  const { isOpen, handleOpenDropdown } = useDropdownOpen();
+  const dateValue = watch(displayValue);
+
+  useEffect(() => {
+    const currentValue = watch(displayValue);
+    if (currentValue) {
+      setValue(displayValue, currentValue);
+    }
+  }, [displayValue, watch, setValue]);
+
+  const iconStyle = "text-black-400 size-9 transition-transform duration-200";
+
+  const formatDisplayDate = (start: Date, end?: Date) => {
+    const formatToDisplay = (date: Date) => {
+      return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, "0")}/${date.getDate().toString().padStart(2, "0")}`;
+    };
+
+    if (start && end) {
+      return `${formatToDisplay(start)} ~ ${formatToDisplay(end)}`;
+    }
+    return formatToDisplay(start);
+  };
+
+  const handleChange = (update: [Date | null, Date | null]) => {
+    const [start, end] = update;
+
+    if (start) {
+      setValue(displayValue, formatDisplayDate(start, end || undefined));
+      setValue(startDateName, start.toISOString());
+    }
+    if (start && end && end > start) {
+      setValue(displayValue, formatDisplayDate(start, end));
+      setValue(endDateName, end.toISOString());
+      handleOpenDropdown();
+    }
+    onChange(update);
+  };
+
+  //피커 바깥쪽 클릭 시 창 닫힘
+  const pickerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (pickerRef.current && !pickerRef.current.contains(e.target as Node)) {
+        handleOpenDropdown();
+      }
+    };
+    window.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      window.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [handleOpenDropdown]);
+
+  return (
+    <div className="relative">
+      <div onClick={handleOpenDropdown}>
+        <BaseInput
+          type="text"
+          placeholder="시작일 ~ 종료일"
+          variant="white"
+          beforeIcon={<BsCalendar4 className="size-4 text-grayscale-200 lg:size-8" />}
+          afterIcon={<IoMdArrowDropup className={`${iconStyle} ${isOpen ? "rotate-180" : ""}`} />}
+          value={dateValue || ""}
+          readOnly
+          required={required}
+          wrapperClassName="cursor-pointer"
+          innerClassName="cursor-pointer"
+          errormessage={errormessage}
+        />
+        {isOpen && (
+          <>
+            <div
+              className="absolute z-20 mt-1 h-[388px] w-[327px] rounded-lg bg-white lg:h-[584px] lg:w-[640px]"
+              ref={pickerRef}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+              }}
+            >
+              <DatePicker
+                inline
+                selectsRange
+                locale={ko}
+                startDate={startDate}
+                endDate={endDate}
+                onChange={handleChange}
+                renderCustomHeader={(props) => <DatePickerHeader {...props} />}
+              />
+            </div>
+            <button
+              type="button"
+              onClick={() => handleOpenDropdown()}
+              onMouseDown={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+              }}
+              className="absolute left-[14px] top-[78px] z-30 cursor-pointer lg:top-[84px]"
+            >
+              <IoIosClose className="size-6 text-black-100 lg:size-9" />
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DatePickerInput;
diff --git a/src/app/components/input/dateTimeDaypicker/DayPickerBtn.tsx b/src/app/components/input/dateTimeDaypicker/DayPickerBtn.tsx
new file mode 100644
index 00000000..92cb5891
--- /dev/null
+++ b/src/app/components/input/dateTimeDaypicker/DayPickerBtn.tsx
@@ -0,0 +1,47 @@
+import { cn } from "@/lib/tailwindUtil";
+import { MouseEvent } from "react";
+import toast from "react-hot-toast";
+
+const DayPickerBtn = ({
+  selected,
+  value,
+  onClick,
+  disabled,
+}: {
+  selected: boolean;
+  value: string;
+  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+}) => {
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    if (disabled) {
+      toast.error("요일 협의가 가능한 경우 근무 요일을 선택하실 수 없습니다.");
+    }
+    onClick(e);
+  };
+  const defaultStyle = "bg-background-200 text-grayscale-500";
+  const activeStyle = "bg-primary-orange-300 text-white";
+  const disabledStyle = "bg-grayscale-200 text-grayscale-500";
+  const textStyle =
+    "placeholder:text-base placeholder:leading-[26px] lg:placeholder:text-xl lg:placeholder:leading-8 lg:text-xl font-normal lg:leading-8 text-base leading-[26px]";
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={handleClick}
+        disabled={disabled}
+        className={cn(
+          "h-12 w-[38px] rounded-xl bg-background-200 focus:outline-none lg:h-[64px] lg:w-[50px] lg:rounded-2xl",
+          textStyle,
+          selected ? activeStyle : defaultStyle,
+          disabled ? disabledStyle : ""
+        )}
+      >
+        {value}
+      </button>
+    </div>
+  );
+};
+
+export default DayPickerBtn;
diff --git a/src/app/components/input/dateTimeDaypicker/DayPickerList.tsx b/src/app/components/input/dateTimeDaypicker/DayPickerList.tsx
new file mode 100644
index 00000000..24df4288
--- /dev/null
+++ b/src/app/components/input/dateTimeDaypicker/DayPickerList.tsx
@@ -0,0 +1,21 @@
+"use client";
+import { MouseEvent } from "react";
+import DayPickerBtn from "./DayPickerBtn";
+interface DayPickerProps {
+  workDays: string[];
+  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+}
+const DayPickerList = ({ onClick, workDays, disabled }: DayPickerProps) => {
+  const daysToRender = ["일", "월", "화", "수", "목", "금", "토"];
+
+  return (
+    <div className="flex gap-2">
+      {daysToRender.map((day) => (
+        <DayPickerBtn key={day} value={day} selected={workDays.includes(day)} onClick={onClick} disabled={disabled} />
+      ))}
+    </div>
+  );
+};
+
+export default DayPickerList;
diff --git a/src/app/components/input/dateTimeDaypicker/TimePickerInput.tsx b/src/app/components/input/dateTimeDaypicker/TimePickerInput.tsx
new file mode 100644
index 00000000..a8d48e7a
--- /dev/null
+++ b/src/app/components/input/dateTimeDaypicker/TimePickerInput.tsx
@@ -0,0 +1,107 @@
+"use client";
+import { LuClock } from "react-icons/lu";
+import { IoMdArrowDropup } from "react-icons/io";
+import BaseInput from "../text/BaseInput";
+import { useDropdownOpen } from "@/hooks/useDropdownOpen";
+import DropdownList from "../../button/dropdown/dropdownComponent/DropdownList";
+import { forwardRef, useRef, useEffect, useCallback } from "react";
+import { BaseInputProps } from "@/types/textInput";
+import { cn } from "@/lib/tailwindUtil";
+
+// 시간 선택을 위한 입력 컴포넌트
+const TimePickerInput = forwardRef<HTMLInputElement, BaseInputProps>((props, ref) => {
+  const { value, onChange, errormessage } = props;
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const { isOpen, handleOpenDropdown, setIsOpen } = useDropdownOpen();
+
+  // 외부 클릭 감지하여 드롭다운 닫기
+  const handleClickOutside = useCallback(
+    (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    },
+    [setIsOpen]
+  );
+
+  // 외부 클릭 이벤트 리스너 등록
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [handleClickOutside]);
+
+  // 시간 선택 핸들러
+  const handleSelect = useCallback(
+    (time: string | null) => {
+      if (!time) {
+        setIsOpen(false);
+        return;
+      }
+
+      if (onChange) {
+        const event = {
+          target: { value: time, name: props.name },
+        } as React.ChangeEvent<HTMLInputElement>;
+        onChange(event);
+      }
+
+      setIsOpen(false);
+    },
+    [onChange, props.name, setIsOpen]
+  );
+
+  // 24시간 형식의 시간 옵션 생성 (00:00 ~ 23:00)
+  const timeOption = Array.from({ length: 24 }, (_, index) => {
+    const hour = index.toString().padStart(2, "0");
+    return `${hour}:00`;
+  });
+
+  // 클릭 이벤트 핸들러
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      handleOpenDropdown();
+    },
+    [handleOpenDropdown]
+  );
+
+  return (
+    <div ref={dropdownRef} className="relative">
+      <div onClick={handleClick}>
+        <BaseInput
+          ref={ref}
+          type="text"
+          readOnly
+          variant="white"
+          placeholder="00:00"
+          value={value || ""}
+          size="w-[150px] h-[54px] lg:w-[210px] lg:h-[64px]"
+          beforeIcon={<LuClock className="size-5 text-grayscale-400 lg:size-8" strokeWidth="1" />}
+          afterIcon={
+            <IoMdArrowDropup
+              className={cn(
+                "size-6 text-black-400 transition-transform duration-200 lg:size-9",
+                isOpen && "rotate-180"
+              )}
+            />
+          }
+          errormessage={errormessage}
+        />
+      </div>
+      {isOpen && (
+        <DropdownList
+          list={timeOption}
+          onSelect={handleSelect}
+          wrapperStyle="w-[150px] lg:w-[210px]"
+          itemStyle="pl-[35px] text-base font-normal leading-[26px] lg:text-lg lg:leading-8"
+        />
+      )}
+    </div>
+  );
+});
+
+TimePickerInput.displayName = "TimePickerInput";
+
+export default TimePickerInput;
diff --git a/src/app/components/input/file/BaseFileInput.tsx b/src/app/components/input/file/BaseFileInput.tsx
new file mode 100644
index 00000000..5d767849
--- /dev/null
+++ b/src/app/components/input/file/BaseFileInput.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { cn } from "@/lib/tailwindUtil";
+import { BaseFileInputProps } from "@/types/textInput";
+import { forwardRef } from "react";
+
+const BaseFileInput = forwardRef<HTMLInputElement, BaseFileInputProps>((props, ref) => {
+  /**
+   * @param name: string;
+   * @param variant: "upload" | "download";
+   * @param size?: string;
+   * @param file?: File | null;
+   * @param onFileAction?: (file: File | null) => void;
+   * @param icon?: React.ReactNode;
+   * @param actionIcon?: React.ReactNode;
+   * @param placeholder?: string;
+   * @param accept?: string;
+   */
+  const colorStyle = {
+    bgColor: "bg-background-200",
+    borderColor: "border border-transparent",
+    hoverColor: "hover:border-grayscale-200 hover:bg-background-300",
+    focusColor: "[&:has(input:focus)]:border-primary-orange-300 caret-primary-orange-300",
+    innerHoverColor: "hover:bg-background-300",
+  };
+
+  const defaultSize = "w-[327px] h-[54px] lg:w-[640px] lg:h-[64px]";
+  const sizeStyles = props.size || defaultSize;
+
+  const wrapperColorStyle = `${colorStyle.bgColor} ${colorStyle.borderColor} ${colorStyle.hoverColor} ${colorStyle.focusColor}`;
+  const wrapperStyle = `relative flex gap-2 items-center justify-between rounded-lg border-[0.5px] p-[14px] lg:py-4 ${wrapperColorStyle} ${sizeStyles}`;
+
+  const innerColorStyle = `${colorStyle.innerHoverColor}`;
+  const fakeInputStyle = `text-grayscale-400 flex items-center border-none text-base leading-[26px] lg:text-xl lg:leading-[32px] ${innerColorStyle}`;
+  const fileName =
+    props.file && "!text-black-400 underline lg:text-xl font-normal lg:leading-8 text-base leading-[26px]";
+
+  // 라벨 클릭 시 input 클릭 - 파일 선택 창 열기 / 파일 다운로드
+  const handleFileSelect = () => {
+    if (props.variant === "upload") {
+      // ref가 함수인 경우와 객체인 경우 모두 처리
+      if (typeof ref === "function") {
+        // input 요소를 찾아서 클릭
+        const fileInput = document.querySelector(`input[name="${props.name}"]`);
+        if (fileInput) {
+          (fileInput as HTMLInputElement).click();
+        }
+      } else if (ref && "current" in ref) {
+        ref.current?.click();
+      }
+    }
+    /**
+     * @TODO 파일 다운로드 기능 추가
+     */
+  };
+
+  return (
+    <>
+      <div className={wrapperStyle} onClick={handleFileSelect} role="button" tabIndex={0}>
+        <span className={cn(fakeInputStyle, fileName)}>{props.file ? props.file.name : props.placeholder}</span>
+        {props.variant === "upload" && (
+          <input
+            type="file"
+            name={props.name}
+            onChange={(e) => props.onFileAction?.(e.target.files?.[0] || null)}
+            ref={ref}
+            className="hidden"
+            accept={props.accept}
+          />
+        )}
+        {props.variant === "upload" && props.actionIcon}
+        {props.variant === "download" && props.icon}
+      </div>
+    </>
+  );
+});
+
+BaseFileInput.displayName = "BaseFileInput";
+
+export default BaseFileInput;
diff --git a/src/app/components/input/file/DownloadInput.tsx b/src/app/components/input/file/DownloadInput.tsx
new file mode 100644
index 00000000..a33920e2
--- /dev/null
+++ b/src/app/components/input/file/DownloadInput.tsx
@@ -0,0 +1,25 @@
+import BaseFileInput from "./BaseFileInput";
+import { BaseFileInputProps } from "@/types/textInput";
+import Image from "next/image";
+
+const DownloadInput = (props: BaseFileInputProps) => {
+  return (
+    <BaseFileInput
+      {...props}
+      variant="download"
+      icon={
+        <div className="size-6 lg:size-8">
+          <Image
+            src={"/icons/download/download-sm.svg"}
+            alt="업로드"
+            height={24}
+            width={24}
+            className="h-full w-full"
+          />
+        </div>
+      }
+    />
+  );
+};
+
+export default DownloadInput;
diff --git a/src/app/components/input/file/ImageInput/ImageInput.tsx b/src/app/components/input/file/ImageInput/ImageInput.tsx
new file mode 100644
index 00000000..78859009
--- /dev/null
+++ b/src/app/components/input/file/ImageInput/ImageInput.tsx
@@ -0,0 +1,114 @@
+"use client";
+import { HiUpload } from "react-icons/hi";
+import { forwardRef, useState, useEffect } from "react";
+import { toast } from "react-hot-toast";
+import PreviewItem from "./PreviewItem";
+import { cn } from "@/lib/tailwindUtil";
+interface ImageInputType {
+  file: File | null;
+  url: string;
+  id: string;
+}
+
+interface ImageInputProps {
+  name: string;
+  onChange?: (files: File[]) => void;
+  initialImageList: ImageInputType[];
+}
+
+const ImageInput = forwardRef<HTMLInputElement, ImageInputProps>((props, ref) => {
+  const [imageList, setImageList] = useState<ImageInputType[]>(props.initialImageList || []);
+
+  useEffect(() => {
+    if (props.initialImageList?.length > 0) {
+      setImageList(props.initialImageList);
+    }
+  }, [props.initialImageList]);
+
+  const handleFileChange = (selectedFile: File | null) => {
+    if (selectedFile) {
+      if (!selectedFile.type.startsWith("image/")) {
+        toast.error("이미지 파일만 업로드할 수 있습니다.");
+        return;
+      } else if (selectedFile && imageList.length >= 3) {
+        toast.error("이미지는 최대 3개까지 업로드할 수 있습니다.");
+        return;
+      }
+
+      const newImageList = [
+        ...imageList,
+        {
+          file: selectedFile,
+          url: URL.createObjectURL(selectedFile),
+          id: crypto.randomUUID(),
+        },
+      ];
+
+      setImageList(newImageList);
+      props.onChange?.(newImageList.map((img) => img.file).filter((file) => file !== null) as File[]);
+    }
+  };
+
+  const handleOpenFileSelector = () => {
+    if (typeof ref === "function") {
+      // input 요소를 찾아서 클릭
+      const fileInput = document.querySelector(`input[name="${props.name}"]`);
+      if (fileInput) {
+        (fileInput as HTMLInputElement).click();
+      }
+    } else if (ref && "current" in ref) {
+      ref.current?.click();
+    }
+  };
+
+  const handleDeleteImage = (targetId: string) => {
+    const targetImage = imageList.find((image) => image.id === targetId);
+    if (targetImage) {
+      URL.revokeObjectURL(targetImage.url); // URL 객체 해제
+    }
+    const newImageList = imageList.filter((image) => image.id !== targetId);
+    setImageList(newImageList);
+    props.onChange?.(newImageList.map((img) => img.file).filter((file) => file !== null));
+  };
+
+  const colorStyle = {
+    bgColor: "bg-background-200",
+    borderColor: "border-[0.5px] border-transparent",
+    hoverColor: "hover:border-grayscale-200 hover:bg-background-300",
+    innerHoverColor: "hover:bg-background-300",
+  };
+
+  return (
+    // 인풋 + 프리뷰 wrapper
+    <div className="flex gap-5 lg:gap-6">
+      <div
+        onClick={handleOpenFileSelector}
+        className={cn(
+          "relative size-20 cursor-pointer rounded-lg lg:size-[116px]",
+          colorStyle.bgColor,
+          colorStyle.borderColor,
+          colorStyle.hoverColor
+        )}
+      >
+        <input
+          ref={ref}
+          type="file"
+          name={props.name}
+          accept="image/*"
+          onChange={(e) => handleFileChange(e.target.files?.[0] || null)}
+          className="hidden"
+        />
+        <div className="pointer-events-none absolute top-0 z-10 p-7 lg:p-10">
+          <HiUpload className="text-[24px] text-grayscale-400 lg:text-[36px]" />
+        </div>
+      </div>
+      {imageList.map((image) => (
+        <PreviewItem key={image.id} image={image} handleDeleteImage={handleDeleteImage} placeholder={false} />
+      ))}
+    </div>
+  );
+});
+
+ImageInput.displayName = "ImageInput";
+
+export default ImageInput;
diff --git a/src/app/components/input/file/ImageInput/ImageInputPlaceHolder.tsx b/src/app/components/input/file/ImageInput/ImageInputPlaceHolder.tsx
new file mode 100644
index 00000000..e087b268
--- /dev/null
+++ b/src/app/components/input/file/ImageInput/ImageInputPlaceHolder.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { HiUpload } from "react-icons/hi";
+import { useState, useRef, useEffect } from "react";
+import { toast } from "react-hot-toast";
+import PreviewItem from "./PreviewItem";
+
+interface ImageInputType {
+  file: File | null;
+  url: string;
+  id: string;
+}
+
+interface ImageInputPlaceHolderProps {
+  onImageUpload: (file: File) => Promise<string>;
+  onImagesChange: (images: ImageInputType[]) => void;
+  size?: "small" | "large";
+  initialImages?: ImageInputType[];
+}
+
+const ImageInputPlaceHolder: React.FC<ImageInputPlaceHolderProps> = ({
+  onImageUpload,
+  onImagesChange,
+  size = "large",
+  initialImages = [],
+}) => {
+  const [imageList, setImageList] = useState<ImageInputType[]>(initialImages);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (JSON.stringify(imageList) !== JSON.stringify(initialImages)) {
+      setImageList(initialImages);
+    }
+  }, [initialImages]);
+
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = event.target.files?.[0];
+    if (selectedFile) {
+      if (!selectedFile.type.startsWith("image/")) {
+        toast.error("이미지 파일만 업로드할 수 있습니다.");
+        return;
+      } else if (imageList.length >= 3) {
+        toast.error("이미지는 최대 3개까지 업로드할 수 있습니다.");
+        return;
+      }
+      try {
+        const uploadedUrl = await onImageUpload(selectedFile);
+        const newImageList = [...imageList, { file: null, url: uploadedUrl, id: crypto.randomUUID() }];
+        setImageList(newImageList);
+        onImagesChange(newImageList);
+      } catch (error) {
+        console.error("이미지 업로드 중 오류:", error);
+        toast.error("이미지 업로드에 실패했습니다.");
+      }
+    }
+  };
+
+  const handleDeleteImage = (targetId: string) => {
+    const newImageList = imageList.filter((image) => image.id !== targetId);
+    setImageList(newImageList);
+    onImagesChange(newImageList);
+  };
+
+  const handleImageButtonClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const sizeClass = size === "small" ? "size-[160px]" : "size-[160px] lg:size-[240px]";
+  const gapClass = size === "small" ? "gap-5" : "gap-5 lg:gap-6";
+
+  return (
+    <div className={`flex ${gapClass}`}>
+      <div className="relative">
+        <button
+          type="button"
+          onClick={handleImageButtonClick}
+          className={`${sizeClass} flex flex-col items-center justify-center rounded-lg bg-gray-100 hover:bg-gray-200`}
+        >
+          <HiUpload className="text-[36px] text-grayscale-200" />
+          <p className="mt-2 text-grayscale-500">이미지 넣기</p>
+        </button>
+        <input ref={fileInputRef} type="file" className="hidden" onChange={handleFileChange} accept="image/*" />
+      </div>
+      {imageList.map((image) => (
+        <PreviewItem key={image.id} image={image} handleDeleteImage={handleDeleteImage} placeholder={true} />
+      ))}
+    </div>
+  );
+};
+
+export default ImageInputPlaceHolder;
diff --git a/src/app/components/input/file/ImageInput/PreviewItem.tsx b/src/app/components/input/file/ImageInput/PreviewItem.tsx
new file mode 100644
index 00000000..eb276c3f
--- /dev/null
+++ b/src/app/components/input/file/ImageInput/PreviewItem.tsx
@@ -0,0 +1,28 @@
+import Image from "next/image";
+
+const PreviewItem = ({
+  image,
+  handleDeleteImage,
+  placeholder,
+}: {
+  image: { url: string; id: string };
+  handleDeleteImage: (id: string) => void;
+  placeholder: boolean;
+}) => {
+  const { url, id } = image;
+  const size = placeholder ? "size-[160px] lg:size-[240px]" : "size-20 lg:size-[116px]";
+  return (
+    <div className={`relative ${size}`}>
+      {/* 이미지 미리보기 */}
+      <Image src={url} alt="미리보기" fill className="overflow-hidden rounded-lg object-cover" />
+      <div
+        onClick={() => handleDeleteImage(id)}
+        className="absolute -right-2 -top-2 z-10 flex size-6 cursor-pointer items-center justify-center rounded-full lg:-right-3 lg:-top-3 lg:size-9"
+      >
+        <Image src={"/icons/x/x-circle-md.svg"} alt="삭제" height={24} width={24} className="h-full w-full" />
+      </div>
+    </div>
+  );
+};
+
+export default PreviewItem;
diff --git a/src/app/components/input/file/UploadInput.tsx b/src/app/components/input/file/UploadInput.tsx
new file mode 100644
index 00000000..c75cb351
--- /dev/null
+++ b/src/app/components/input/file/UploadInput.tsx
@@ -0,0 +1,84 @@
+import BaseFileInput from "./BaseFileInput";
+import { BaseFileInputProps } from "@/types/textInput";
+import Image from "next/image";
+import { forwardRef, useState } from "react";
+const UploadInput = forwardRef<HTMLInputElement, BaseFileInputProps>((props, ref) => {
+  /**
+   * @param name: string; - 필수값
+   * @param variant: "upload" | "download"; - 필수값
+   * @param placeholder: string; - 필수값
+   * @param size?: string;
+   * @param file?: File | null;
+   * @param onFileAction?: (file: File | null) => void;
+   * @param icon?: React.ReactNode;
+   * @param actionIcon?: React.ReactNode;
+   * @param isImage?: boolean;
+   * @param accept?: string;
+   */
+  const [file, setFile] = useState<File | null>(null);
+
+  const handleChangeFile = (newFile: File | null) => {
+    setFile(newFile);
+
+    // react-hook-form의 onChange 호출
+    if (props.onChange) {
+      const dataTransfer = new DataTransfer();
+      if (newFile) {
+        dataTransfer.items.add(newFile);
+      }
+
+      // input 엘리먼트의 files 속성 직접 설정
+      if (ref && "current" in ref && ref.current) {
+        ref.current.files = dataTransfer.files;
+      }
+      const event = {
+        target: {
+          name: props.name,
+          files: dataTransfer.files,
+          value: newFile ? newFile.name : "",
+          type: "file",
+        },
+      } as unknown as Event;
+
+      props.onChange(event);
+    }
+  };
+  const handleDeleteFile = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    setFile(null);
+    // react-hook-form의 onChange 호출
+    if (props.onChange) {
+      const event = {
+        target: {
+          files: [],
+        },
+      } as unknown as Event;
+      props.onChange(event);
+    }
+  };
+  return (
+    <BaseFileInput
+      {...props}
+      ref={ref}
+      file={file}
+      placeholder="파일 업로드하기"
+      onFileAction={handleChangeFile}
+      accept={props.accept}
+      actionIcon={
+        file ? (
+          <button type="button" onClick={handleDeleteFile} className="absolute right-[14px] size-6 lg:size-8">
+            <Image src={"/icons/x/x-circle-md.svg"} alt="삭제" height={24} width={24} className="h-full w-full" />
+          </button>
+        ) : (
+          <div className="size-6 lg:size-8">
+            <Image src={"/icons/upload/upload-sm.svg"} alt="업로드" height={24} width={24} className="h-full w-full" />
+          </div>
+        )
+      }
+    />
+  );
+});
+
+UploadInput.displayName = "UploadInput";
+
+export default UploadInput;
diff --git a/src/app/components/input/payInput/PayInput.tsx b/src/app/components/input/payInput/PayInput.tsx
new file mode 100644
index 00000000..b0e2e95a
--- /dev/null
+++ b/src/app/components/input/payInput/PayInput.tsx
@@ -0,0 +1,7 @@
+import BaseInput from "../text/BaseInput";
+
+const PayInput = () => {
+  return <BaseInput name="pay" type="text" placeholder="9860" variant="white" afterString="원" />;
+};
+
+export default PayInput;
diff --git a/src/app/components/input/text/BaseInput.tsx b/src/app/components/input/text/BaseInput.tsx
new file mode 100644
index 00000000..880bc2d5
--- /dev/null
+++ b/src/app/components/input/text/BaseInput.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import { forwardRef, useState } from "react";
+import { LuEye, LuEyeOff } from "react-icons/lu";
+import { BaseInputProps } from "@/types/textInput";
+
+/** 
+@param name: string - 필수값
+@param type: "text" | "password" | ... - 필수값
+@param variant: "white" | "transparent";
+@param size: "w-[00px] h-[00px] lg:w-[00px] lg:h-[00px]" - 기본값: "w-[327px] h-[54px] lg:w-[640px] lg:h-[64px]"
+@param placeholder: string
+@param errormessage: string - 에러메시지 + 테두리 색상 변경
+@param feedbackMessage: string - 메시지만 띄우고 색상 변경 X
+@param disabled: boolean
+@param wrapperClassName?: string; - 부가적인 tailwind css 클래스
+@param innerClassName?: string; - 부가적인 tailwind css 클래스
+@param beforeIcon?: React.ReactNode; - 앞에 위치하는 아이콘
+@param afterIcon?: React.ReactNode; - 뒤에 위치하는 아이콘
+@param anotherHoverStyle?: string; - 추가적인 hover 스타일 - 없으면 기본값
+*/
+
+const BaseInput = forwardRef<HTMLInputElement, BaseInputProps>(
+  (
+    {
+      variant,
+      size,
+      errormessage,
+      feedbackMessage,
+      wrapperClassName,
+      innerClassName,
+      beforeIcon,
+      afterIcon,
+      afterString,
+      anotherHoverStyle,
+      type,
+      name,
+      value,
+      placeholder,
+      disabled,
+      readOnly,
+      onChange,
+      onBlur,
+      ...rest
+    },
+    ref
+  ) => {
+    const [eyeOn, setEyeOn] = useState(false);
+    const toggleType = () => {
+      setEyeOn(!eyeOn);
+    };
+
+    const inputType = type === "password" && eyeOn ? "text" : type;
+
+    const variants = {
+      white: {
+        bgColor: "bg-background-200",
+        borderColor: "border border-transparent",
+        hoverColor: anotherHoverStyle || "hover:border-grayscale-200 hover:bg-background-300",
+        focusColor: "[&:has(input:focus)]:border-primary-orange-300 caret-primary-orange-300",
+      },
+      transparent: {
+        bgColor: "bg-transparent",
+        borderColor: "border-[0.5px] border-grayscale-200",
+        hoverColor: "hover:border-grayscale-300",
+        focusColor: "[&:has(input:focus)]:border-primary-orange-300 caret-primary-orange-300",
+      },
+    };
+
+    const defaultSize = "w-[327px] h-[54px] lg:w-[640px] lg:h-[64px]";
+    const sizeStyles = size || defaultSize;
+
+    // input style
+    const baseStyle = "focus:outline-none h-full w-full";
+    const textStyle =
+      "text-black-400 placeholder:text-grayscale-400 placeholder:text-base placeholder:leading-[26px] lg:placeholder:text-xl lg:placeholder:leading-8 lg:text-xl font-normal lg:leading-8 text-base leading-[26px]";
+
+    // wrapperStyle
+    const variantStyle = `${variants[variant].bgColor} ${variants[variant].borderColor} ${variants[variant].hoverColor} ${variants[variant].focusColor}`;
+    const errorStyle = errormessage ? "!border-state-error" : "";
+    const errorTextStyle =
+      "absolute -bottom-[26px] text-[13px] text-sm font-medium leading-[22px] text-state-error lg:text-base lg:leading-[26px]";
+
+    const wrapperStyle = `relative flex gap-2 items-center justify-between rounded-lg border-[0.5px] p-[14px] lg:py-4 ${variantStyle} ${sizeStyles} ${errorStyle} ${wrapperClassName}`;
+    const inputStyle = `bg-transparent ${baseStyle} ${textStyle} ${innerClassName}`;
+
+    return (
+      <div>
+        <div className={wrapperStyle}>
+          {beforeIcon && <div className="flex items-center justify-center">{beforeIcon}</div>}
+          <label className="hidden">{name}</label>
+          <input
+            ref={ref}
+            name={name}
+            type={inputType}
+            value={value}
+            placeholder={placeholder}
+            disabled={disabled}
+            readOnly={readOnly}
+            onChange={onChange}
+            onBlur={onBlur}
+            className={inputStyle}
+            {...rest}
+          />
+          {type === "password" && (
+            <div onClick={toggleType} className="cursor-pointer">
+              {eyeOn ? (
+                <LuEye className="size-5 text-grayscale-200 lg:size-7" />
+              ) : (
+                <LuEyeOff className="size-5 text-grayscale-200 lg:size-7" />
+              )}
+            </div>
+          )}
+          {afterIcon && <div>{afterIcon}</div>}
+          {afterString && (
+            <div className="text-sm font-normal leading-[26px] text-black-400 lg:text-xl lg:leading-8">
+              {afterString}
+            </div>
+          )}
+          {errormessage && <span className={`${errorTextStyle} right-0 pr-2`}>{errormessage}</span>}
+          {feedbackMessage && <span className={`${errorTextStyle} left-0 pl-2`}>{feedbackMessage}</span>}
+        </div>
+      </div>
+    );
+  }
+);
+
+BaseInput.displayName = "BaseInput";
+
+export default BaseInput;
diff --git a/src/app/components/input/text/LocationInput.tsx b/src/app/components/input/text/LocationInput.tsx
new file mode 100644
index 00000000..0faa2faf
--- /dev/null
+++ b/src/app/components/input/text/LocationInput.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { IoLocationSharp } from "react-icons/io5";
+import BaseInput from "./BaseInput";
+import { BaseInputProps } from "@/types/textInput";
+import { forwardRef, useCallback, useState, useEffect } from "react";
+import Script from "next/script";
+
+interface LocationInputProps extends BaseInputProps {
+  onAddressChange?: (fullAddress: string) => void;
+  readOnly?: boolean;
+  value?: string;
+}
+
+const LocationInput = forwardRef<HTMLInputElement, LocationInputProps>(
+  (
+    { type = "text", variant, errormessage, feedbackMessage, onAddressChange, readOnly = true, value, ...props },
+    ref
+  ) => {
+    const [address, setAddress] = useState("");
+
+    useEffect(() => {
+      if (value) {
+        setAddress(value);
+      }
+    }, [value]);
+
+    const handleOpenPostcode = useCallback(() => {
+      if (typeof window === "undefined" || !window.daum) return;
+
+      new window.daum.Postcode({
+        oncomplete: (data) => {
+          const newAddress = data.address;
+          setAddress(newAddress);
+          onAddressChange?.(newAddress);
+        },
+      }).open();
+    }, [onAddressChange]);
+
+    return (
+      <>
+        <Script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js" strategy="afterInteractive" />
+        <div className="relative w-full">
+          <BaseInput
+            ref={ref}
+            type={type}
+            variant={variant || "white"}
+            beforeIcon={<IoLocationSharp className="size-5 text-grayscale-100 lg:size-8" />}
+            placeholder="클릭하여 주소를 검색하세요"
+            value={address}
+            readOnly={readOnly}
+            errormessage={errormessage}
+            feedbackMessage={feedbackMessage}
+            onClick={handleOpenPostcode}
+            {...props}
+          />
+        </div>
+      </>
+    );
+  }
+);
+
+LocationInput.displayName = "LocationInput";
+
+export default LocationInput;
diff --git a/src/app/components/input/text/ReadOnlyInput.tsx b/src/app/components/input/text/ReadOnlyInput.tsx
new file mode 100644
index 00000000..2e764c17
--- /dev/null
+++ b/src/app/components/input/text/ReadOnlyInput.tsx
@@ -0,0 +1,24 @@
+import { cn } from "@/lib/tailwindUtil";
+import BaseInput from "./BaseInput";
+import { BaseInputProps } from "@/types/textInput";
+
+interface ReadOnlyInputProps extends Omit<BaseInputProps, "variant"> {
+  value: string;
+}
+
+const ReadOnlyInput = ({ value, ...props }: ReadOnlyInputProps) => {
+  return (
+    <div className="relative w-full">
+      <BaseInput
+        {...props}
+        variant="transparent"
+        readOnly={true}
+        value={value}
+        wrapperClassName={cn("w-full", props.wrapperClassName)}
+        innerClassName={cn("text-grayscale-500", props.innerClassName)}
+      />
+    </div>
+  );
+};
+
+export default ReadOnlyInput;
diff --git a/src/app/components/input/text/SearchInput.tsx b/src/app/components/input/text/SearchInput.tsx
new file mode 100644
index 00000000..a108fa72
--- /dev/null
+++ b/src/app/components/input/text/SearchInput.tsx
@@ -0,0 +1,34 @@
+import { FiSearch } from "react-icons/fi";
+import { ChangeEventHandler } from "react";
+
+interface SearchInputProps {
+  value?: string;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  placeholder?: string;
+  className?: string;
+}
+
+const SearchInput = ({ value, onChange, placeholder, className }: SearchInputProps) => {
+  return (
+    <div className="relative w-full">
+      {/* 검색 아이콘 */}
+      <div className="absolute left-3 top-1/2 -translate-y-1/2">
+        <FiSearch className="size-5 text-grayscale-400" />
+      </div>
+
+      {/* 검색 입력창 */}
+      <input
+        type="text"
+        name="search"
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder || "어떤 알바를 찾고 계세요?"}
+        className={`rounded-lg border border-grayscale-200 pl-11 pr-4 text-sm placeholder:text-grayscale-400 focus:border-grayscale-300 focus:outline-none ${
+          className || ""
+        }`}
+      />
+    </div>
+  );
+};
+
+export default SearchInput;
diff --git a/src/app/components/input/textarea/BaseTextArea.tsx b/src/app/components/input/textarea/BaseTextArea.tsx
new file mode 100644
index 00000000..cf9c9e43
--- /dev/null
+++ b/src/app/components/input/textarea/BaseTextArea.tsx
@@ -0,0 +1,68 @@
+import { forwardRef } from "react";
+import { BaseTextAreaProps } from "@/types/textInput";
+/**
+@param variant: "white" | "transparent" - 필수값
+@param name: string - 필수값
+@param size: "w-[00px] h-[00px] lg:w-[00px] lg:h-[00px]" - 기본값: "w-[327px] h-[132px] lg:w-[640px] lg:h-[160px]"
+@param placeholder: string
+@param errormessage: string - 에러메시지 + 테두리 색상 변경
+@param disabled: boolean
+@param wrapperClassName?: string; - 부가적인 tailwind css 클래스
+@param innerClassName?: string; - 부가적인 tailwind css 클래스
+*/
+
+const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>((props, ref) => {
+  const variantStyles = {
+    white: {
+      bg: "bg-background-200",
+      border: "border-[0.5px] border-transparent",
+      focus: "[&:has(textarea:focus)]:border-grayscale-400",
+      hover: "hover:border-grayscale-200 hover:bg-background-300",
+    },
+    transparent: {
+      bg: "bg-transparent",
+      border: "border-[0.5px] border-grayscale-200",
+      focus: "[&:has(textarea:focus)]:border-primary-orange-300 caret-primary-orange-300",
+      hover: "hover:border-grayscale-300",
+    },
+  };
+  const defaultSize = "w-[327px] h-[132px] lg:w-[640px] lg:h-[160px] md:w-[480px] lg:w-full";
+  const sizeStyles = props.size || defaultSize;
+
+  // textareaStyle
+  const baseStyle = "resize-none focus:outline-none h-full w-full";
+  const textStyle =
+    "text-black-400 placeholder:text-grayscale-400 placeholder:text-base placeholder:leading-[26px] lg:placeholder:text-xl lg:placeholder:leading-8 lg:text-xl font-normal lg:leading-8 text-base leading-[26px]";
+
+  //  wrapperStyle
+  const variantStyle = `${variantStyles[props.variant].border} ${variantStyles[props.variant].hover} ${variantStyles[props.variant].focus}`;
+  const errorStyle = props.errormessage ? "!border-[0.5px] border-state-error" : "";
+
+  const bgStyle = variantStyles[props.variant].bg;
+
+  const textareaStyle = `bg-transparent whitespace-pre-wrap ${baseStyle} ${textStyle} ${props.innerClassName || ""}`;
+  const wrapperStyle = `p-[14px] lg:py-[18px] relative rounded-lg ${sizeStyles} ${variantStyle} ${bgStyle} ${errorStyle} ${props.wrapperClassName}`;
+
+  return (
+    <div className={wrapperStyle}>
+      <label className="hidden">{props.name}</label>
+      <textarea
+        id={props.name}
+        placeholder={props.placeholder}
+        disabled={props.disabled}
+        className={`${textareaStyle} scrollbar-custom`}
+        ref={ref}
+        {...props}
+      />
+      {props.errormessage && (
+        <span className="absolute -bottom-[26px] right-0 pr-2 text-[13px] text-sm font-medium leading-[22px] text-state-error lg:text-base lg:leading-[26px]">
+          {props.errormessage}
+        </span>
+      )}
+    </div>
+  );
+});
+
+BaseTextArea.displayName = "BaseTextArea";
+
+export default BaseTextArea;
diff --git a/src/app/components/layout/ContentSection.tsx b/src/app/components/layout/ContentSection.tsx
new file mode 100644
index 00000000..732aa663
--- /dev/null
+++ b/src/app/components/layout/ContentSection.tsx
@@ -0,0 +1,4 @@
+const ContentSection = ({ children }: { children: React.ReactNode }) => {
+  return <div className="flex flex-wrap justify-center gap-6">{children}</div>;
+};
+export default ContentSection;
diff --git a/src/app/components/layout/Footer.tsx b/src/app/components/layout/Footer.tsx
index 6301701b..bf0164f5 100644
--- a/src/app/components/layout/Footer.tsx
+++ b/src/app/components/layout/Footer.tsx
@@ -1,6 +1,6 @@
 export default function Footer() {
   return (
-    <footer className="bg-gray-800 p-4 text-white">
+    <footer className="bg-primary-grayscale-800 p-4 text-white">
       <div className="container mx-auto text-center">
         <p>&copy; 2024 FE9 Advanced Project Template. All rights reserved.</p>
       </div>
diff --git a/src/app/components/layout/Header.tsx b/src/app/components/layout/Header.tsx
index e8a4ba61..a64e9bf8 100644
--- a/src/app/components/layout/Header.tsx
+++ b/src/app/components/layout/Header.tsx
@@ -2,156 +2,162 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { cn } from "@/lib/tailwindUtil";
-import { useState, useEffect } from "react";
-import { useAuth } from "@/hooks/useAuth";
+import { useLogout } from "@/hooks/queries/auth/useLogout";
+import { useState } from "react";
+import { toast } from "react-hot-toast";
+import { useUser } from "@/hooks/queries/user/me/useUser";
 
 export default function Header() {
-  const [isSideMenuOpen, setIsSideMenuOpen] = useState(false);
-  const { user, logout, refresh, isLoading } = useAuth();
+  const { logout } = useLogout();
+  const { user, isLoading } = useUser();
   const pathname = usePathname();
-  const [isFirstRefresh, setIsFirstRefresh] = useState(true);
-
-  // 컴포넌트 마운트 시 한 번만 refresh 시도
-  useEffect(() => {
-    if (!user && isFirstRefresh) {
-      refresh();
-      setIsFirstRefresh(false);
-    }
-  }, [user, refresh, isFirstRefresh]);
+  const router = useRouter();
+  const [isSideMenuOpen, setIsSideMenuOpen] = useState(false);
 
-  const handleLogout = () => {
-    try {
-      logout();
-      setIsSideMenuOpen(false);
-    } catch (error) {
-      console.error("로그아웃 실패:", error);
-    }
+  // 인증이 필요없는 공개 경로들
+  const handleLogout = async () => {
+    logout();
+    toast.success("로그아웃되었습니다!");
+    setIsSideMenuOpen(false);
+    router.push("/login");
   };
 
   const getLinkClassName = (path: string) => {
+    const isActive = pathname === path || pathname.startsWith(`${path}/`);
+
     return cn(
       "font-medium transition-colors h-16 flex items-center",
       "hover:text-lime-900",
-      pathname === path
-        ? "text-lime-900 font-bold text-base sm:text-base md:text-lg"
-        : "text-lime-700 text-sm sm:text-base"
+      isActive ? "text-lime-900 text-sm md:text-base lg:text-lg lg:font-bold" : "text-lime-700 text-sm md:text-base"
     );
   };
-
+  const headerStyle =
+    "fixed left-0 right-0 top-0 z-40 border-b border-b-line-100 bg-lime-100 -tracking-widest md:tracking-normal";
+  const navStyle = "mx-auto flex h-16 min-w-[327px] items-center justify-between px-6 max-w-screen-xl ";
+  const menuStyle = "ml-4 flex h-16 items-center gap-4 md:ml-8 md:gap-6 lg:ml-[46px]";
+  const buttonStyle = "rounded-lg border-2 px-2 py-1 text-sm md:px-3 md:py-1.5 md:text-base lg:px-4 lg:py-2";
+  const skeletonStyle = "w-16 animate-pulse bg-lime-200";
+  // 로딩 시간이 1초 이상일 때만 스켈레톤 UI 표시
   if (isLoading) {
     return (
-      <header className="bg-lime-100 shadow-md">
-        <div className="container mx-auto px-4">
-          <nav className="flex h-16 items-center justify-between">
-            <div className="flex items-center">
-              <Link href="/" className="text-xl text-white hover:text-blue-100">
-                <Image
-                  src="/logo.svg"
-                  alt="Work Root Logo"
-                  width={200}
-                  height={60}
-                  className="w-32 hover:opacity-90 sm:w-40 md:w-[200px]"
-                />
-              </Link>
+      <header className={headerStyle}>
+        <nav className={navStyle}>
+          {/* 로고와 메인 네비게이션 */}
+          <div className="flex items-center">
+            {/* 로고 스켈레톤 - 이미지로 대체*/}
+            <Image
+              src="/logo.svg"
+              alt="Work Root Logo"
+              width={200}
+              height={60}
+              className="w-32 hover:opacity-90 sm:w-40 md:w-[200px]"
+            />
 
-              <div className="ml-4 flex h-16 space-x-3 sm:ml-6 sm:space-x-4 md:ml-10 md:space-x-6">
-                <Link href="/albaList" className={getLinkClassName("/albaList")}>
-                  알바 목록
-                </Link>
-                <Link href="/albaTalk" className={getLinkClassName("/albaTalk")}>
-                  알바 토크
-                </Link>
-              </div>
+            {/* 메뉴 스켈레톤 - 실제 메뉴와 동일한 위치에 배치 */}
+            <div className={menuStyle}>
+              <div className={cn("h-6", skeletonStyle)} />
+              <div className={cn("h-6", skeletonStyle)} />
             </div>
+          </div>
 
-            <div className="hidden space-x-4 md:flex">
-              <div className="h-8 w-20 animate-pulse rounded-lg bg-lime-200" />
-              <div className="h-8 w-20 animate-pulse rounded-lg bg-lime-200" />
-            </div>
-          </nav>
-        </div>
+          {/* 로그인/회원가입 버튼 스켈레톤 */}
+          <div className="flex items-center gap-2 lg:gap-4">
+            <div className={cn("h-8", skeletonStyle)} />
+            <div className={cn("h-8", skeletonStyle)} />
+          </div>
+        </nav>
       </header>
     );
   }
 
   return (
-    <header className="bg-lime-100 shadow-md">
-      <div className="container mx-auto px-4">
-        <nav className="flex h-16 items-center justify-between">
-          <div className="flex items-center">
-            <Link href="/" className="text-xl text-white hover:text-blue-100">
-              <Image
-                src="/logo.svg"
-                alt="Work Root Logo"
-                width={200}
-                height={60}
-                className="w-32 hover:opacity-90 sm:w-40 md:w-[200px]"
-              />
-            </Link>
+    <header className={headerStyle}>
+      <nav className={navStyle}>
+        {/* 로고와 메인 네비게이션 */}
+        <div className="flex items-center">
+          <Link href="/" className="text-xl text-white hover:text-blue-100">
+            <Image
+              src="/logo.svg"
+              alt="WorkRoot"
+              width={200}
+              height={60}
+              className="w-32 hover:opacity-90 md:w-[200px]"
+            />
+          </Link>
 
-            <div className="ml-4 flex h-16 space-x-3 sm:ml-6 sm:space-x-4 md:ml-10 md:space-x-6">
-              <Link href="/albaList" className={getLinkClassName("/albaList")}>
-                알바 목록
-              </Link>
-              <Link href="/albaTalk" className={getLinkClassName("/albaTalk")}>
-                알바 토크
+          <div className={menuStyle}>
+            <Link href="/albalist" className={getLinkClassName("/albalist")}>
+              알바 목록
+            </Link>
+            <Link href="/albatalk" className={getLinkClassName("/albatalk")}>
+              알바 토크
+            </Link>
+            {user && (
+              <Link href="/myalbaform" className={getLinkClassName("/myalbaform")}>
+                내 알바폼
               </Link>
-              {user && (
-                <Link href="/myAlbaform" className={getLinkClassName("/myAlbaform")}>
-                  내 알바폼
-                </Link>
-              )}
-            </div>
+            )}
           </div>
+        </div>
 
-          <ul className="flex items-center space-x-3 sm:space-x-4 md:space-x-6">
-            {!user ? (
-              <>
-                <li className="flex items-center">
-                  <Link
-                    href="/login"
-                    className="rounded-lg border-2 border-lime-700 px-2 py-1 text-sm text-lime-700 transition-colors hover:bg-lime-700 hover:text-white sm:px-3 sm:py-1.5 sm:text-base md:px-4 md:py-2"
-                  >
-                    로그인
-                  </Link>
-                </li>
-                <li className="flex items-center">
-                  <Link
-                    href="/signup"
-                    className="rounded-lg bg-lime-700 px-2 py-1 text-sm font-semibold text-white transition-colors hover:bg-lime-800 sm:px-3 sm:py-1.5 sm:text-base md:px-4 md:py-2"
-                  >
-                    회원가입
-                  </Link>
-                </li>
-              </>
-            ) : null}
-          </ul>
-
-          {user && (
-            <button onClick={() => setIsSideMenuOpen(true)} className="block" aria-label="메뉴 열기">
+        {/* 로그인/회원가입 또는 메뉴 버튼 */}
+        <ul className="flex items-center gap-2 lg:gap-4">
+          {!user ? (
+            <>
+              <li className="flex items-center">
+                <Link
+                  href="/login"
+                  className={cn(
+                    buttonStyle,
+                    "border-lime-700 px-2 py-1 text-sm text-lime-700 transition-colors hover:bg-lime-700 hover:text-white"
+                  )}
+                >
+                  로그인
+                </Link>
+              </li>
+              <li className="flex items-center">
+                <Link
+                  href="/signup"
+                  className={cn(
+                    buttonStyle,
+                    "border-lime-700 bg-lime-700 text-white transition-colors hover:bg-lime-800"
+                  )}
+                >
+                  회원가입
+                </Link>
+              </li>
+            </>
+          ) : (
+            <button type="button" onClick={() => setIsSideMenuOpen(true)} className="block" aria-label="메뉴 열기">
               <Image src="/icons/menu/menu-sm.svg" width={24} height={24} alt="메뉴" className="block sm:hidden" />
               <Image src="/icons/menu/menu-md.svg" width={36} height={36} alt="메뉴" className="hidden sm:block" />
             </button>
           )}
-        </nav>
-      </div>
+        </ul>
+      </nav>
 
+      {/* 사이드바 오버레이 */}
       {isSideMenuOpen && (
-        <div className="bg-black fixed inset-0 z-40 bg-opacity-50" onClick={() => setIsSideMenuOpen(false)} />
+        <div className="bg-black fixed inset-0 z-30 bg-opacity-50" onClick={() => setIsSideMenuOpen(false)} />
       )}
 
+      {/* 사이드바 */}
       <div
         className={cn(
-          "fixed right-0 top-0 z-50 h-full w-64 transform bg-white shadow-lg transition-transform duration-300 ease-in-out",
+          "fixed right-0 top-0 z-40 h-full w-40 transform bg-white shadow-lg transition-transform duration-300 ease-in-out md:w-64",
           isSideMenuOpen ? "translate-x-0" : "translate-x-full"
         )}
       >
-        <div className="flex flex-col p-6">
+        <div className="flex w-full flex-col p-6">
           <div className="mb-6 flex items-center justify-between">
-            <span className="text-lg font-bold text-lime-700">메뉴</span>
-            <button onClick={() => setIsSideMenuOpen(false)} className="text-gray-500 hover:text-gray-700">
+            <span className="px-3 text-lg font-bold text-lime-700">메뉴</span>
+            <button
+              type="button"
+              onClick={() => setIsSideMenuOpen(false)}
+              className="hover:text-grayscale-700 text-grayscale-500"
+            >
               ✕
             </button>
           </div>
@@ -160,12 +166,13 @@ export default function Header() {
             <>
               <Link
                 href="/mypage"
-                className="mb-4 rounded-lg bg-lime-50 px-4 py-3 text-lime-700 hover:bg-lime-100"
+                className="mb-4 flex items-center justify-center rounded-lg bg-lime-50 px-4 py-3 text-lime-700 hover:bg-lime-100"
                 onClick={() => setIsSideMenuOpen(false)}
               >
                 마이페이지
               </Link>
               <button
+                type="button"
                 onClick={handleLogout}
                 className="rounded-lg border-2 border-lime-700 px-4 py-3 text-lime-700 hover:bg-lime-700 hover:text-white"
               >
diff --git a/src/app/components/layout/forms/SearchSection.tsx b/src/app/components/layout/forms/SearchSection.tsx
new file mode 100644
index 00000000..332bda1b
--- /dev/null
+++ b/src/app/components/layout/forms/SearchSection.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { useState } from "react";
+import SearchInput from "@/app/components/input/text/SearchInput";
+import Button from "../../button/default/Button";
+
+export default function SearchSection({ pathname }: { pathname: string }) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [keyword, setKeyword] = useState(searchParams.get("keyword") || "");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const params = new URLSearchParams(searchParams);
+
+    if (keyword.trim()) {
+      params.set("keyword", keyword);
+    } else {
+      params.delete("keyword");
+    }
+
+    router.push(`${pathname}?${params.toString()}`);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="w-full">
+      <div className="mx-auto flex items-center gap-4">
+        <SearchInput
+          value={keyword}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setKeyword(e.target.value)}
+          className="text:lg lg:text:xl h-[52px] w-full border-none bg-background-200 hover:bg-background-300"
+        />
+        <Button type="submit" width="sm">
+          검색
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/src/app/components/layout/forms/SortSection.tsx b/src/app/components/layout/forms/SortSection.tsx
new file mode 100644
index 00000000..1483a0a6
--- /dev/null
+++ b/src/app/components/layout/forms/SortSection.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import React from "react";
+import FilterDropdown from "@/app/components/button/dropdown/FilterDropdown";
+import { formSortOptions } from "@/constants/formOptions";
+import { useRouter } from "next/navigation";
+
+const SORT_OPTIONS = [
+  { label: "최신순", value: formSortOptions.MOST_RECENT },
+  { label: "시급높은순", value: formSortOptions.HIGHEST_WAGE },
+  { label: "지원자 많은순", value: formSortOptions.MOST_APPLIED },
+  { label: "스크랩 많은순", value: formSortOptions.MOST_SCRAPPED },
+];
+
+interface SortSectionProps {
+  pathname: string;
+  searchParams: URLSearchParams;
+}
+
+export default function SortSection({ pathname, searchParams }: SortSectionProps) {
+  const router = useRouter();
+  const currentOrderBy = searchParams.get("orderBy") || formSortOptions.MOST_RECENT;
+
+  const currentLabel = SORT_OPTIONS.find((opt) => opt.value === currentOrderBy)?.label || SORT_OPTIONS[0].label;
+
+  const handleSortChange = (selected: string) => {
+    const option = SORT_OPTIONS.find((opt) => opt.label === selected);
+    if (option) {
+      const params = new URLSearchParams(searchParams);
+      params.set("orderBy", option.value);
+      router.push(`${pathname}?${params.toString()}`);
+    }
+  };
+
+  return (
+    <FilterDropdown
+      options={SORT_OPTIONS.map((option) => option.label)}
+      className="!w-28 md:!w-40"
+      initialValue={currentLabel}
+      onChange={handleSortChange}
+    />
+  );
+}
diff --git a/src/app/components/layout/posts/SortSection.tsx b/src/app/components/layout/posts/SortSection.tsx
new file mode 100644
index 00000000..3f71ee4b
--- /dev/null
+++ b/src/app/components/layout/posts/SortSection.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import React from "react";
+import FilterDropdown from "@/app/components/button/dropdown/FilterDropdown";
+import { postSortOptions } from "@/constants/postOptions";
+import { useRouter } from "next/navigation";
+
+const SORT_OPTIONS = [
+  { label: "최신순", value: postSortOptions.MOST_RECENT },
+  { label: "댓글 많은순", value: postSortOptions.MOST_COMMENTED },
+  { label: "좋아요 많은순", value: postSortOptions.MOST_LIKED },
+];
+
+interface SortSectionProps {
+  pathname: string;
+  searchParams: URLSearchParams;
+}
+
+export default function SortSection({ pathname, searchParams }: SortSectionProps) {
+  const router = useRouter();
+  const currentOrderBy = searchParams.get("orderBy") || postSortOptions.MOST_RECENT;
+
+  const currentLabel = SORT_OPTIONS.find((opt) => opt.value === currentOrderBy)?.label || SORT_OPTIONS[0].label;
+
+  const handleSortChange = (selected: string) => {
+    const option = SORT_OPTIONS.find((opt) => opt.label === selected);
+    if (option) {
+      const params = new URLSearchParams(searchParams);
+      params.set("orderBy", option.value);
+      router.push(`${pathname}?${params.toString()}`);
+    }
+  };
+
+  return (
+    <FilterDropdown
+      options={SORT_OPTIONS.map((option) => option.label)}
+      className="!w-28 md:!w-40"
+      initialValue={currentLabel}
+      onChange={handleSortChange}
+    />
+  );
+}
diff --git a/src/app/components/loading-spinner/DotLoadingSpinner.tsx b/src/app/components/loading-spinner/DotLoadingSpinner.tsx
new file mode 100644
index 00000000..749e0a14
--- /dev/null
+++ b/src/app/components/loading-spinner/DotLoadingSpinner.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { cn } from "@/lib/tailwindUtil";
+import React from "react";
+
+export default function DotLoadingSpinner() {
+  const dotStyle = "h-2 w-2 animate-bounce rounded-full ";
+  return (
+    <div className="flex justify-center py-2">
+      <div className="flex items-center justify-center">
+        <div className={cn(dotStyle, "bg-orange-200")} style={{ animationDelay: "0s" }}></div> {/* 연한 오렌지 */}
+        <div className={cn(dotStyle, "ml-2 bg-green-200")} style={{ animationDelay: "0.2s" }}></div> {/* 연한 그린 */}
+        <div className={cn(dotStyle, "ml-2 bg-blue-200")} style={{ animationDelay: "0.4s" }}></div> {/* 연한 블루 */}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/loading-spinner/LoadingSpinner.tsx b/src/app/components/loading-spinner/LoadingSpinner.tsx
new file mode 100644
index 00000000..e89be82d
--- /dev/null
+++ b/src/app/components/loading-spinner/LoadingSpinner.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { Player } from "@lottiefiles/react-lottie-player";
+import React from "react";
+
+export default function LoadingSpinner() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center px-4">
+      <Player
+        autoplay
+        loop
+        src="/loding.json"
+        className="mb-8 w-full max-w-[300px] sm:max-w-[400px] lg:max-w-[500px]"
+      />
+      <div className="flex flex-col justify-center gap-4">
+        <div className="text-center text-base font-semibold text-primary-orange-400 lg:text-lg">
+          페이지 이동 중 입니다
+        </div>
+        <div className="text-center text-sm font-normal text-primary-orange-400 lg:text-base">
+          잠시만 기다려주세요...
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/loading-spinner/NoApplySpinner.tsx b/src/app/components/loading-spinner/NoApplySpinner.tsx
new file mode 100644
index 00000000..48c53e84
--- /dev/null
+++ b/src/app/components/loading-spinner/NoApplySpinner.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { Player } from "@lottiefiles/react-lottie-player";
+import React from "react";
+
+export default function NoApplySpinner() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-white px-4">
+      <Player
+        autoplay
+        loop
+        src="/search.json"
+        className="mb-8 w-full max-w-[300px] sm:max-w-[400px] lg:max-w-[500px]"
+      />
+      <div className="flex flex-col justify-center gap-4">
+        <div className="text-center text-base font-semibold text-primary-orange-400 lg:text-lg"></div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/loading-spinner/SearchSpinner.tsx b/src/app/components/loading-spinner/SearchSpinner.tsx
new file mode 100644
index 00000000..744bed45
--- /dev/null
+++ b/src/app/components/loading-spinner/SearchSpinner.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { Player } from "@lottiefiles/react-lottie-player";
+import React from "react";
+
+export default function SearchSpinner() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-white px-4">
+      <Player
+        autoplay
+        loop
+        src="/search.json"
+        className="mb-8 w-full max-w-[300px] sm:max-w-[400px] lg:max-w-[500px]"
+      />
+      <div className="flex flex-col justify-center gap-4">
+        <div className="text-center text-base font-semibold text-primary-orange-400 lg:text-lg">검색 중 입니다</div>
+        <div className="text-center text-sm font-normal text-primary-orange-400 lg:text-base">
+          잠시만 기다려주세요...
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/modal/ModalLayout.tsx b/src/app/components/modal/ModalLayout.tsx
new file mode 100644
index 00000000..3b8a5a37
--- /dev/null
+++ b/src/app/components/modal/ModalLayout.tsx
@@ -0,0 +1,71 @@
+import { createPortal } from "react-dom";
+import useModalStore from "@/store/modalStore";
+import FormContinueModal from "./modals/alert/FormContinueModal";
+import ApplicationDetailModal from "./modals/alert/ApplicationDetailModal";
+import RecruitmentClosedModal from "./modals/alert/RecruitmentClosedModal";
+import DeleteFormModal from "./modals/confirm/DeleteFormModal";
+import SelectProgressModal from "./modals/confirm/SelectProgressModal";
+import ChangePasswordModal from "./modals/form/ChangePasswordModal";
+import EditMyProfileModal from "./modals/form/EditMyProfileModal";
+import EditOwnerProfileModal from "./modals/form/EditOwnerProfileModal";
+import CustomFormModal from "./modals/confirm/CustomFormModal";
+import { ModalType } from "@/types/modal";
+import { useEffect } from "react";
+
+// 모달 컴포넌트 매핑
+const ModalComponents = {
+  applicationDetail: ApplicationDetailModal,
+  formContinue: FormContinueModal,
+  recruitmentClosed: RecruitmentClosedModal,
+  deleteForm: DeleteFormModal,
+  selectProgress: SelectProgressModal,
+  changePassword: ChangePasswordModal,
+  editMyProfile: EditMyProfileModal,
+  editOwnerProfile: EditOwnerProfileModal,
+  customForm: CustomFormModal,
+} as const;
+
+const ModalLayout = () => {
+  const { isOpen, modalType, modalProps, closeModal } = useModalStore();
+
+  // 모달이 열릴 때 body 스크롤 방지
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+
+    // 컴포넌트가 언마운트될 때 스크롤 상태 복구
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen]);
+
+  if (!isOpen || !modalType || !modalProps) return null;
+
+  if (!Object.keys(ModalComponents).includes(modalType)) {
+    console.error(`Unknown modal type: ${modalType}`);
+    return null;
+  }
+
+  const ModalComponent = ModalComponents[modalType as ModalType];
+
+  return createPortal(
+    <div
+      className="!z-99999 fixed inset-0 flex items-center justify-center"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) closeModal();
+      }}
+      role="dialog"
+      aria-modal="true"
+    >
+      <div className="w-full max-w-md" onClick={(e) => e.stopPropagation()}>
+        <ModalComponent isOpen={isOpen} onClose={closeModal} {...(modalProps as any)} />
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export default ModalLayout;
diff --git a/src/app/components/modal/modals/alert/ApplicationDetailModal.tsx b/src/app/components/modal/modals/alert/ApplicationDetailModal.tsx
new file mode 100644
index 00000000..da7cf415
--- /dev/null
+++ b/src/app/components/modal/modals/alert/ApplicationDetailModal.tsx
@@ -0,0 +1,119 @@
+import { cn } from "@/lib/tailwindUtil";
+import Button from "@/app/components/button/default/Button";
+import ReadOnlyInput from "@/app/components/input/text/ReadOnlyInput";
+import { formatDateTime } from "@/utils/formatters";
+import Image from "next/image";
+import Link from "next/link";
+
+interface ApplicationDetailModalProps {
+  formId: string;
+  applicationDate?: string;
+  applicationStatus?: string;
+  name: string;
+  phone: string;
+  password: string;
+  isOpen: boolean;
+  onClose: () => void;
+  className?: string;
+}
+
+const ApplicationDetailModal = ({
+  formId,
+  applicationDate,
+  applicationStatus,
+  name,
+  phone,
+  isOpen,
+  onClose,
+  className,
+}: ApplicationDetailModalProps) => {
+  if (!isOpen) return null;
+
+  const defaultFields = [
+    {
+      name: "name",
+      label: "이름",
+      type: "text",
+      value: name,
+    },
+    {
+      name: "phone",
+      label: "전화번호",
+      type: "tel",
+      value: phone,
+    },
+    {
+      name: "password",
+      label: "비밀번호",
+      type: "password",
+      value: "••••••••",
+    },
+  ];
+
+  return (
+    <div
+      className={cn(
+        "relative w-[375px] overflow-hidden rounded-3xl bg-white p-6 shadow-lg lg:w-[440px] lg:p-10",
+        className
+      )}
+    >
+      <div className="flex h-full flex-col">
+        <div className="mb-6 lg:mb-8">
+          <div className="text-lg font-semibold lg:text-2xl">내 지원 내역</div>
+        </div>
+
+        <div className="space-y-4 lg:space-y-5">
+          {applicationDate && (
+            <div className="flex items-center justify-between text-sm lg:text-base">
+              <span className="text-muted-foreground">지원일시</span>
+              <span>{formatDateTime(applicationDate)}</span>
+            </div>
+          )}
+
+          {applicationStatus && (
+            <div className="flex items-center justify-between text-sm lg:text-base">
+              <span className="text-muted-foreground">진행 상태</span>
+              <span className="rounded bg-primary-orange-50 px-2 py-1 font-semibold text-primary-orange-300">
+                {applicationStatus}
+              </span>
+            </div>
+          )}
+        </div>
+
+        <div className="mt-6 space-y-4 lg:mt-8 lg:space-y-6">
+          {defaultFields.map((field) => (
+            <div key={field.name} className="space-y-2">
+              <label htmlFor={field.name} className="text-muted-foreground block text-sm lg:text-base">
+                {field.label}
+              </label>
+              <ReadOnlyInput
+                name={field.name}
+                type={field.type}
+                value={field.value}
+                size="w-full h-[48px] lg:h-[54px]"
+              />
+            </div>
+          ))}
+        </div>
+
+        <Link href={`/forms/${formId}`} className="block">
+          <Button type="button" className="mt-6 h-[58px] !w-full text-base font-medium lg:mt-8 lg:h-[72px] lg:text-lg">
+            지원 내역 상세보기
+          </Button>
+        </Link>
+
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="모달 닫기"
+          className="hover:text-grayscale-600 absolute right-4 top-4 flex size-8 items-center justify-center rounded-full bg-white text-grayscale-400 lg:right-10 lg:top-10"
+        >
+          <Image src="/icons/x/x-sm.svg" alt="" width={16} height={16} className="block sm:hidden" />
+          <Image src="/icons/x/x-md.svg" alt="" width={20} height={20} className="hidden sm:block" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ApplicationDetailModal;
diff --git a/src/app/components/modal/modals/alert/FormContinueModal.tsx b/src/app/components/modal/modals/alert/FormContinueModal.tsx
new file mode 100644
index 00000000..ae0a8319
--- /dev/null
+++ b/src/app/components/modal/modals/alert/FormContinueModal.tsx
@@ -0,0 +1,67 @@
+import { cn } from "@/lib/tailwindUtil";
+import Button from "@/app/components/button/default/Button";
+import Image from "next/image";
+import Link from "next/link";
+
+interface FormContinueModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  className?: string;
+}
+
+const FormContinueModal = ({ isOpen, onClose, className }: FormContinueModalProps) => {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={cn(
+        "relative left-1/2 w-[375px] -translate-x-1/2 rounded-3xl bg-white p-6 shadow-lg lg:w-[520px] lg:p-10",
+        className
+      )}
+    >
+      <div className="relative h-full">
+        <button
+          type="button"
+          onClick={onClose}
+          className="hover:text-grayscale-600 absolute right-0 top-0 flex items-center justify-center text-grayscale-400"
+        >
+          <Image src="/icons/x/x-sm.svg" alt="close" width={16} height={16} className="block sm:hidden" />
+          <Image src="/icons/x/x-md.svg" alt="close" width={20} height={20} className="hidden sm:block" />
+        </button>
+        <div className="flex h-full flex-col items-center text-center">
+          <div className="relative mb-6 flex h-20 w-20 items-center justify-center lg:h-[120px] lg:w-[120px]">
+            <Image
+              src="/images/modal/closed-orange-sm.svg"
+              alt="warning"
+              width={80}
+              height={80}
+              className="block sm:hidden"
+            />
+            <Image
+              src="/images/modal/closed-orange-md.svg"
+              alt="warning"
+              width={120}
+              height={120}
+              className="hidden sm:block"
+            />
+          </div>
+          <h2 className="mb-2 text-lg font-bold lg:text-xl">작성 중인 알바폼이 있어요!</h2>
+          <p className="text-grayscale-600 mb-6 text-sm lg:text-base">이어서 작성하시겠어요?</p>
+
+          <div className="mt-auto">
+            <Link href="/" className="block">
+              <Button
+                type="button"
+                className="h-[58px] w-[327px] text-base font-medium lg:h-[72px] lg:w-[360px] lg:text-lg"
+              >
+                이어쓰기
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FormContinueModal;
diff --git a/src/app/components/modal/modals/alert/RecruitmentClosedModal.tsx b/src/app/components/modal/modals/alert/RecruitmentClosedModal.tsx
new file mode 100644
index 00000000..0f97d5fa
--- /dev/null
+++ b/src/app/components/modal/modals/alert/RecruitmentClosedModal.tsx
@@ -0,0 +1,65 @@
+import Button from "@/app/components/button/default/Button";
+import Link from "next/dist/client/link";
+import { cn } from "@/lib/tailwindUtil";
+import Image from "next/image";
+
+interface RecruitmentClosedModalProps {
+  formId: string;
+  isOpen: boolean;
+  onClose: () => void;
+  className?: string;
+}
+
+const RecruitmentClosedModal = ({ formId, isOpen, onClose, className }: RecruitmentClosedModalProps) => {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={cn(
+        "relative left-1/2 w-[375px] -translate-x-1/2 rounded-3xl bg-white p-6 shadow-lg lg:w-[520px] lg:p-10",
+        className
+      )}
+    >
+      <div className="relative h-full">
+        <button
+          type="button"
+          onClick={onClose}
+          className="hover:text-grayscale-600 absolute right-0 top-0 flex items-center justify-center text-grayscale-400"
+        >
+          <Image src="/icons/x/x-sm.svg" alt="close" width={16} height={16} className="block sm:hidden" />
+          <Image src="/icons/x/x-md.svg" alt="close" width={20} height={20} className="hidden sm:block" />
+        </button>
+        <div className="flex h-full flex-col items-center text-center">
+          <div className="relative mb-6 flex h-20 w-20 items-center justify-center lg:h-[120px] lg:w-[120px]">
+            <Image
+              src="/images/modal/closed-orange-sm.svg"
+              alt="warning"
+              width={80}
+              height={80}
+              className="block sm:hidden"
+            />
+            <Image
+              src="/images/modal/closed-orange-md.svg"
+              alt="warning"
+              width={120}
+              height={120}
+              className="hidden sm:block"
+            />
+          </div>
+          <h2 className="mb-2 text-lg font-bold lg:text-xl">모집 마감</h2>
+          <p className="text-grayscale-600 mb-6 text-sm lg:text-base">모집이 종료된 알바폼입니다.</p>
+
+          <div className="mt-auto">
+            <Link href={`/forms/${formId}`} className="block">
+              <Button className="h-[58px] w-[327px] text-base font-medium lg:h-[72px] lg:w-[360px] lg:text-lg">
+                홈으로 가기
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RecruitmentClosedModal;
diff --git a/src/app/components/modal/modals/confirm/CustomFormModal.tsx b/src/app/components/modal/modals/confirm/CustomFormModal.tsx
new file mode 100644
index 00000000..0e3a4775
--- /dev/null
+++ b/src/app/components/modal/modals/confirm/CustomFormModal.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { cn } from "@/lib/tailwindUtil";
+import Button from "@/app/components/button/default/Button";
+import Image from "next/image";
+import type { CustomFormModalProps } from "@/types/modal";
+
+const CustomFormModal = ({
+  isOpen,
+  title,
+  content,
+  confirmText = "확인",
+  cancelText = "취소",
+  onConfirm,
+  onCancel,
+  className,
+  closeOnOverlayClick = true,
+}: CustomFormModalProps) => {
+  if (!isOpen) return null;
+
+  const handleConfirm = (e: React.MouseEvent) => {
+    e.preventDefault();
+    onConfirm?.();
+  };
+
+  const handleCancel = (e: React.MouseEvent) => {
+    e.preventDefault();
+    onCancel?.();
+  };
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget && closeOnOverlayClick) {
+      onCancel?.();
+    }
+  };
+
+  return (
+    <>
+      <div className="bg-black fixed inset-0 z-50 bg-opacity-50" onClick={handleOverlayClick} />
+
+      <div
+        className={cn(
+          "fixed left-1/2 top-1/2 z-50 w-[375px] -translate-x-1/2 -translate-y-1/2 rounded-3xl bg-white p-6 shadow-lg lg:w-[520px] lg:p-10",
+          className
+        )}
+      >
+        <div className="relative h-full">
+          <div className="flex h-full flex-col items-center text-center lg:pt-8">
+            <div className="flex items-center justify-center">
+              <div className="relative mb-6 h-20 w-20 lg:h-[120px] lg:w-[120px]">
+                <Image
+                  src="/images/modal/warning-orange-sm.svg"
+                  alt="warning"
+                  width={80}
+                  height={80}
+                  className="block sm:hidden"
+                />
+                <Image
+                  src="/images/modal/warning-orange-md.svg"
+                  alt="warning"
+                  width={120}
+                  height={120}
+                  className="hidden sm:block"
+                />
+              </div>
+            </div>
+            <h2 className="mb-2 text-lg font-bold lg:text-xl">{title}</h2>
+            <p className="text-grayscale-600 mb-6 text-sm lg:text-base">{content}</p>
+
+            <div className="mt-auto flex w-full flex-col items-center gap-3">
+              <Button
+                onClick={handleConfirm}
+                className="h-[48px] w-[300px] text-base font-medium lg:h-[62px] lg:w-[360px] lg:text-lg"
+              >
+                {confirmText}
+              </Button>
+              <Button
+                variant="outlined"
+                onClick={handleCancel}
+                className="h-[48px] w-[300px] text-base font-medium hover:border-primary-orange-50 hover:bg-primary-orange-100 hover:text-white lg:h-[62px] lg:w-[360px] lg:text-lg"
+              >
+                {cancelText}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default CustomFormModal;
diff --git a/src/app/components/modal/modals/confirm/DeleteFormModal.tsx b/src/app/components/modal/modals/confirm/DeleteFormModal.tsx
new file mode 100644
index 00000000..fe0b5571
--- /dev/null
+++ b/src/app/components/modal/modals/confirm/DeleteFormModal.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { cn } from "@/lib/tailwindUtil";
+import Button from "@/app/components/button/default/Button";
+import Image from "next/image";
+import axios from "axios";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import type { ConfirmFormModalProps } from "@/types/modal";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
+
+const DeleteFormModal = ({ id, isOpen, onClose, onConfirm, className }: ConfirmFormModalProps) => {
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (isDeleting) return;
+
+    try {
+      setIsDeleting(true);
+      await axios.delete(`/api/forms/${id}`);
+      toast.success("알바폼이 삭제되었습니다.");
+      onConfirm?.();
+      onClose?.();
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        const errormessage = error.response?.data?.message || "알바폼 삭제에 실패했습니다.";
+        toast.error(errormessage);
+      } else {
+        toast.error("알바폼 삭제 중 오류가 발생했습니다.");
+      }
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "relative left-1/2 w-[375px] -translate-x-1/2 rounded-3xl bg-white p-6 shadow-lg lg:w-[520px] lg:p-10",
+        className
+      )}
+    >
+      <div className="relative h-full">
+        <form onSubmit={handleSubmit} className="flex h-full flex-col items-center text-center lg:pt-8">
+          <div className="relative mb-6 h-20 w-20 items-center justify-center lg:h-[120px] lg:w-[120px]">
+            <Image
+              src="/images/modal/warning-orange-sm.svg"
+              alt="warning"
+              width={80}
+              height={80}
+              className="block sm:hidden"
+            />
+            <Image
+              src="/images/modal/warning-orange-md.svg"
+              alt="warning"
+              width={120}
+              height={120}
+              className="hidden sm:block"
+            />
+          </div>
+          <h2 className="mb-2 text-lg font-bold lg:text-xl">알바폼을 삭제할까요?</h2>
+          <p className="text-grayscale-600 mb-6 text-sm lg:text-base">삭제 후 정보를 복구할 수 없어요.</p>
+
+          <div className="mt-auto flex w-full flex-col items-center gap-3">
+            <Button
+              type="submit"
+              disabled={isDeleting}
+              className="h-[48px] w-[300px] text-base font-medium lg:h-[62px] lg:w-[360px] lg:text-lg"
+            >
+              {isDeleting ? <DotLoadingSpinner /> : "삭제하기"}
+            </Button>
+            <Button
+              type="button"
+              variant="outlined"
+              onClick={onClose}
+              disabled={isDeleting}
+              className="h-[48px] w-[300px] text-base font-medium hover:border-primary-orange-50 hover:bg-primary-orange-100 hover:text-white lg:h-[62px] lg:w-[360px] lg:text-lg"
+            >
+              다음에 할게요
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default DeleteFormModal;
diff --git a/src/app/components/modal/modals/confirm/SelectProgressModal.tsx b/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
new file mode 100644
index 00000000..53172e39
--- /dev/null
+++ b/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
@@ -0,0 +1,109 @@
+import { useState } from "react";
+import { cn } from "@/lib/tailwindUtil";
+import RadioBtn from "@/app/components/button/default/RadioBtn";
+import RadioGroup from "@/app/components/button/default/RadioGroup";
+import Button from "@/app/components/button/default/Button";
+import { ApplyStatus, applicationStatus } from "@/types/application";
+import { positionOptions } from "@/constants/positionOptions";
+import axios from "axios";
+import toast from "react-hot-toast";
+import type { ConfirmFormModalProps } from "@/types/modal";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
+
+const SelectProgressModal = ({ id, isOpen, onClose, className }: ConfirmFormModalProps) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [selectedValue, setSelectedValue] = useState<ApplyStatus>(applicationStatus.INTERVIEW_PENDING);
+
+  if (!isOpen) return null;
+
+  const radioOptions = [
+    { id: "rejected", value: applicationStatus.REJECTED, label: "거절" },
+    { id: "interviewPending", value: applicationStatus.INTERVIEW_PENDING, label: "면접대기" },
+    { id: "interviewCompleted", value: applicationStatus.INTERVIEW_COMPLETED, label: "면접 완료" },
+    { id: "hired", value: applicationStatus.HIRED, label: "채용 완료" },
+  ] as const;
+
+  const handleValueChange = (value: ApplyStatus) => {
+    setSelectedValue(value);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (isSubmitting) return;
+
+    try {
+      setIsSubmitting(true);
+      await axios.patch(`/api/applications/${id}`, {
+        status: selectedValue,
+      });
+
+      toast.success("진행상태가 변경되었습니다.");
+      onClose?.();
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        const errormessage = error.response?.data?.message || "진행상태 변경에 실패했습니다.";
+        toast.error(errormessage);
+      } else {
+        toast.error("진행상태 변경 중 오류가 발생했습니다.");
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleCancel = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  return (
+    <>
+      <div className="bg-black fixed inset-0 z-50 bg-opacity-50" onClick={onClose} />
+      <div className={cn("w-[375px] rounded-3xl bg-white p-6 shadow-lg lg:w-[440px] lg:p-10", className)}>
+        <form onSubmit={handleSubmit} className="flex h-full flex-col items-center">
+          <div className="text-center">
+            <h2 className="mb-2 text-lg font-bold lg:mb-3 lg:text-2xl">진행상태 선택</h2>
+            <p className="text-muted-foreground mb-6 text-sm lg:mb-8 lg:text-base">현재 진행상태를 알려주세요.</p>
+          </div>
+          <div className="h-auto w-full">
+            <RadioGroup value={selectedValue} onValueChange={handleValueChange} className="space-y-3">
+              {radioOptions.map((option) => (
+                <RadioBtn
+                  key={option.id}
+                  label={option.label}
+                  name="progress-status"
+                  value={option.value}
+                  id={option.id}
+                  position={positionOptions.POSITION_RIGHT}
+                  className="text-sm lg:text-base"
+                  disabled={isSubmitting}
+                />
+              ))}
+            </RadioGroup>
+          </div>
+          <div className="mt-[30px] flex w-full justify-between lg:w-[360px]">
+            <Button
+              type="button"
+              onClick={handleCancel}
+              color="gray"
+              disabled={isSubmitting}
+              className="h-[58px] w-[158px] text-base font-medium text-white lg:h-[72px] lg:w-[176px] lg:text-lg"
+            >
+              취소
+            </Button>
+            <Button
+              type="submit"
+              disabled={isSubmitting}
+              className="h-[58px] w-[158px] text-base font-medium lg:h-[72px] lg:w-[176px] lg:text-lg"
+            >
+              {isSubmitting ? <DotLoadingSpinner /> : "선택하기"}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </>
+  );
+};
+
+export default SelectProgressModal;
diff --git a/src/app/components/modal/modals/form/ChangePasswordModal.tsx b/src/app/components/modal/modals/form/ChangePasswordModal.tsx
new file mode 100644
index 00000000..73100aa1
--- /dev/null
+++ b/src/app/components/modal/modals/form/ChangePasswordModal.tsx
@@ -0,0 +1,143 @@
+import { cn } from "@/lib/tailwindUtil";
+import BaseInput from "@/app/components/input/text/BaseInput";
+import { passwordSchema } from "@/schemas/commonSchema";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useLogout } from "@/hooks/queries/auth/useLogout";
+import { usePassword } from "@/hooks/queries/user/me/useChangePassword";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
+import Button from "@/app/components/button/default/Button";
+
+interface ChangePasswordModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  className?: string;
+}
+
+const changePasswordSchema = z
+  .object({
+    currentPassword: z.string().min(1, "현재 비밀번호를 입력해주세요"),
+    newPassword: passwordSchema,
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    message: "새 비밀번호가 일치하지 않습니다",
+    path: ["confirmPassword"],
+  })
+  .refine((data) => data.currentPassword !== data.newPassword, {
+    message: "새 비밀번호는 현재 비밀번호와 달라야 합니다",
+    path: ["newPassword"],
+  });
+
+type ChangePasswordFormData = z.infer<typeof changePasswordSchema>;
+
+const defaultFields = [
+  {
+    name: "currentPassword" as const,
+    label: "현재 비밀번호",
+    placeholder: "현재 비밀번호를 입력해주세요.",
+    type: "password",
+  },
+  {
+    name: "newPassword" as const,
+    label: "새 비밀번호",
+    placeholder: "새로운 비밀번호를 입력해주세요.",
+    type: "password",
+  },
+  {
+    name: "confirmPassword" as const,
+    label: "새 비밀번호 확인",
+    placeholder: "새로운 비밀번호를 다시 한번 입력해주세요.",
+    type: "password",
+  },
+] as const;
+
+const ChangePasswordModal = ({ isOpen, onClose, className }: ChangePasswordModalProps) => {
+  const { mutate: changePassword, isPending } = usePassword();
+  const { logout } = useLogout();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<ChangePasswordFormData>({
+    resolver: zodResolver(changePasswordSchema),
+    mode: "onChange",
+    defaultValues: {
+      currentPassword: "",
+      newPassword: "",
+      confirmPassword: "",
+    },
+  });
+
+  if (!isOpen) return null;
+
+  const onSubmitHandler = async (data: ChangePasswordFormData) => {
+    if (isPending) return;
+
+    changePassword(
+      {
+        currentPassword: data.currentPassword,
+        newPassword: data.newPassword,
+      },
+      {
+        onSuccess: () => {
+          reset();
+          onClose();
+          logout();
+        },
+      }
+    );
+  };
+
+  return (
+    <div
+      className={cn(
+        "relative left-1/2 w-[375px] -translate-x-1/2 overflow-hidden rounded-2xl bg-white p-6 shadow-lg lg:w-[720px] lg:p-10",
+        className
+      )}
+    >
+      <div className="mb-8 h-[46px] text-center text-xl font-semibold lg:mb-12 lg:text-2xl">비밀번호 변경</div>
+      <form onSubmit={handleSubmit(onSubmitHandler)} className="space-y-4 lg:space-y-6">
+        {defaultFields.map((field) => (
+          <div key={field.name} className="h-[88px] space-y-1.5 lg:h-[114px] lg:space-y-2">
+            <label className="text-grayscale-700 block text-sm font-semibold lg:px-2 lg:text-base">{field.label}</label>
+            <div className="flex w-full flex-col items-center">
+              <BaseInput
+                {...register(field.name)}
+                type={field.type}
+                placeholder={field.placeholder}
+                variant="white"
+                disabled={isPending}
+                size="w-[327px] h-[54px] lg:w-[640px] lg:h-[64px]"
+                errormessage={errors[field.name]?.message}
+                innerClassName="placeholder:text-sm placeholder:leading-[26px] font-normal text-sm leading-[26px]"
+              />
+            </div>
+          </div>
+        ))}
+
+        <div className="mt-4 flex h-[58px] gap-3 lg:mt-6 lg:h-[72px]">
+          <Button
+            color="gray"
+            onClick={() => {
+              onClose();
+              reset();
+            }}
+            disabled={isPending}
+            className="h-full text-base font-medium text-white lg:text-lg"
+          >
+            취소
+          </Button>
+          <Button type="submit" disabled={isPending} className="h-full text-base font-medium lg:text-lg">
+            {isPending ? <DotLoadingSpinner /> : "변경하기"}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default ChangePasswordModal;
diff --git a/src/app/components/modal/modals/form/EditMyProfileModal.tsx b/src/app/components/modal/modals/form/EditMyProfileModal.tsx
new file mode 100644
index 00000000..1069f093
--- /dev/null
+++ b/src/app/components/modal/modals/form/EditMyProfileModal.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import { cn } from "@/lib/tailwindUtil";
+import { useState, useRef, useEffect } from "react";
+import Image from "next/image";
+import { FiUser, FiEdit2 } from "react-icons/fi";
+import BaseInput from "@/app/components/input/text/BaseInput";
+import { useUser } from "@/hooks/queries/user/me/useUser";
+import { useUpdateProfile } from "@/hooks/queries/user/me/useUpdateProfile";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { nicknameSchema, mobilePhoneSchema } from "@/schemas/commonSchema";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
+import Button from "@/app/components/button/default/Button";
+
+interface EditMyProfileModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  className?: string;
+}
+
+const editMyProfileSchema = z.object({
+  name: z.string().min(2, "이름은 2자 이상이어야 합니다").max(10, "이름은 10자 이하여야 합니다"),
+  nickname: nicknameSchema,
+  phone: mobilePhoneSchema,
+});
+
+type EditMyProfileFormData = z.infer<typeof editMyProfileSchema>;
+
+const EditMyProfileModal = ({ isOpen, onClose, className }: EditMyProfileModalProps) => {
+  const { user } = useUser();
+  const { updateProfile, isUpdating } = useUpdateProfile();
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string>("");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<EditMyProfileFormData>({
+    resolver: zodResolver(editMyProfileSchema),
+    mode: "onChange",
+    defaultValues: {
+      name: "",
+      nickname: "",
+      phone: "",
+    },
+  });
+
+  useEffect(() => {
+    if (user) {
+      reset({
+        name: user.name || "",
+        nickname: user.nickname || "",
+        phone: user.phoneNumber || "",
+      });
+      setPreviewUrl(user.imageUrl || "");
+    }
+  }, [user, reset]);
+
+  if (!isOpen) return null;
+
+  const handleImageClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) {
+      console.error("No file selected");
+      return;
+    }
+
+    setSelectedFile(file);
+    setPreviewUrl(URL.createObjectURL(file));
+  };
+
+  const onSubmitHandler = async (data: EditMyProfileFormData) => {
+    if (isUpdating) return;
+
+    const success = await updateProfile(
+      {
+        name: data.name,
+        nickname: data.nickname,
+        phoneNumber: data.phone,
+      },
+      selectedFile
+    );
+
+    if (success) {
+      onClose();
+    }
+  };
+
+  const fields = [
+    { name: "name", label: "이름", postPosition: "을" },
+    { name: "nickname", label: "닉네임", postPosition: "을" },
+    { name: "phone", label: "연락처", postPosition: "를" },
+  ] as const;
+
+  return (
+    <div
+      className={cn(
+        "relative left-1/2 w-[375px] -translate-x-1/2 overflow-hidden rounded-2xl bg-white p-6 shadow-lg lg:w-[540px] lg:p-10",
+        className
+      )}
+    >
+      <h2 className="h-[26px] text-center text-[18px] font-semibold lg:h-[46px] lg:text-[32px]">내 정보 수정</h2>
+
+      <form
+        onSubmit={handleSubmit(onSubmitHandler)}
+        className="flex h-[calc(100%-26px)] flex-col lg:h-[calc(100%-46px)]"
+      >
+        <div className="flex-1 space-y-2 lg:space-y-8">
+          <div className="relative my-6 flex justify-center lg:my-8">
+            <div className="relative h-[110px] w-[110px] lg:h-[120px] lg:w-[120px]">
+              <button
+                type="button"
+                onClick={handleImageClick}
+                className="h-full w-full overflow-hidden rounded-full bg-grayscale-100"
+              >
+                {previewUrl ? (
+                  <Image
+                    src={previewUrl}
+                    alt="Profile"
+                    width={120}
+                    height={120}
+                    className="h-full w-full object-cover"
+                  />
+                ) : (
+                  <FiUser className="h-full w-full bg-grayscale-100 p-6 text-grayscale-200" />
+                )}
+              </button>
+              <button
+                type="button"
+                onClick={handleImageClick}
+                className="absolute bottom-1 right-1 flex h-8 w-8 items-center justify-center rounded-full border-[2px] border-white bg-grayscale-100 shadow-lg"
+              >
+                <FiEdit2 className="text-grayscale-600 h-4 w-4" />
+              </button>
+            </div>
+            <input ref={fileInputRef} type="file" accept="image/*" onChange={handleImageChange} className="hidden" />
+          </div>
+
+          {fields.map((field) => (
+            <div key={field.name} className="space-y-1.5 lg:space-y-2">
+              <label className="text-grayscale-700 block px-2 text-sm font-semibold lg:text-base">
+                {field.label}
+                <span className="text-orange-500">*</span>
+              </label>
+              <div className="flex w-full flex-col items-center">
+                <BaseInput
+                  {...register(field.name)}
+                  type="text"
+                  placeholder={`${field.label}${field.postPosition} 입력해주세요.`}
+                  variant="white"
+                  size="w-[327px] h-[54px] lg:w-[460px] lg:h-[64px]"
+                  wrapperClassName="px-[14px] lg:px-[20px]"
+                  disabled={isUpdating}
+                  errormessage={errors[field.name]?.message}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-4 flex h-[58px] w-full justify-between gap-3 lg:mt-6 lg:h-[72px]">
+          <Button
+            color="gray"
+            onClick={() => {
+              onClose();
+              reset();
+            }}
+            disabled={isUpdating}
+            className="h-[58px] w-[158px] text-base font-medium text-white lg:h-[72] lg:w-[314px] lg:text-lg"
+          >
+            취소
+          </Button>
+          <Button
+            type="submit"
+            disabled={isUpdating}
+            className="h-[58px] w-[158px] text-base font-medium lg:h-[72] lg:w-[314px] lg:text-lg"
+          >
+            {isUpdating ? <DotLoadingSpinner /> : "수정하기"}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default EditMyProfileModal;
diff --git a/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx b/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx
new file mode 100644
index 00000000..556f5897
--- /dev/null
+++ b/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx
@@ -0,0 +1,227 @@
+"use client";
+
+import { cn } from "@/lib/tailwindUtil";
+import { useState, useRef, useEffect } from "react";
+import Image from "next/image";
+import { FiUser, FiEdit2, FiMapPin } from "react-icons/fi";
+import BaseInput from "@/app/components/input/text/BaseInput";
+import { useUser } from "@/hooks/queries/user/me/useUser";
+import { useUpdateProfile } from "@/hooks/queries/user/me/useUpdateProfile";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { nicknameSchema, storePhoneSchema, mobilePhoneSchema } from "@/schemas/commonSchema";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
+import Button from "@/app/components/button/default/Button";
+
+interface EditOwnerProfileModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  className?: string;
+}
+
+const editOwnerProfileSchema = z.object({
+  nickname: nicknameSchema,
+  storeName: z.string().min(2, "가게 이름은 2자 이상이어야 합니다").max(20, "가게 이름은 20자 이하여야 합니다"),
+  storePhoneNumber: storePhoneSchema,
+  phoneNumber: mobilePhoneSchema.optional().or(z.literal("")),
+  location: z.string().min(1, "가게 위치를 입력해주세요"),
+});
+
+type EditOwnerProfileFormData = z.infer<typeof editOwnerProfileSchema>;
+
+type Field = {
+  name: keyof EditOwnerProfileFormData;
+  label: string;
+  postPosition: string;
+  required: boolean;
+  hint?: string;
+  icon?: React.ReactNode;
+};
+
+const EditOwnerProfileModal = ({ isOpen, onClose, className }: EditOwnerProfileModalProps) => {
+  const { user } = useUser();
+  const { updateProfile, isUpdating } = useUpdateProfile();
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string>("");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<EditOwnerProfileFormData>({
+    resolver: zodResolver(editOwnerProfileSchema),
+    mode: "onChange",
+    defaultValues: {
+      nickname: "",
+      storeName: "",
+      storePhoneNumber: "",
+      phoneNumber: "",
+      location: "",
+    },
+  });
+
+  useEffect(() => {
+    if (user) {
+      reset({
+        nickname: user.nickname || "",
+        storeName: user.storeName || "",
+        storePhoneNumber: user.storePhoneNumber || "",
+        phoneNumber: user.phoneNumber || "",
+        location: user.location || "",
+      });
+      setPreviewUrl(user.imageUrl || "");
+    }
+  }, [user, reset]);
+
+  if (!isOpen) return null;
+
+  const handleImageClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setSelectedFile(file);
+    setPreviewUrl(URL.createObjectURL(file));
+  };
+
+  const onSubmitHandler = async (data: EditOwnerProfileFormData) => {
+    if (isUpdating) return;
+
+    const success = await updateProfile(
+      {
+        nickname: data.nickname,
+        storeName: data.storeName,
+        storePhoneNumber: data.storePhoneNumber,
+        phoneNumber: data.phoneNumber,
+        location: data.location,
+      },
+      selectedFile
+    );
+
+    if (success) {
+      onClose();
+    }
+  };
+
+  const fields: Field[] = [
+    { name: "nickname", label: "닉네임", postPosition: "을", required: true },
+    {
+      name: "storeName",
+      label: "가게 이름",
+      postPosition: "을",
+      required: true,
+    },
+    { name: "storePhoneNumber", label: "가게 전화번호", postPosition: "를", required: true },
+    { name: "phoneNumber", label: "사장님 전화번호", postPosition: "를", required: false },
+    {
+      name: "location",
+      label: "가게 위치",
+      postPosition: "를",
+      required: true,
+      icon: <FiMapPin className="h-5 w-5 text-grayscale-400" />,
+    },
+  ];
+
+  return (
+    <div
+      className={cn(
+        "relative left-1/2 w-[375px] -translate-x-1/2 overflow-hidden rounded-2xl bg-white p-6 shadow-lg lg:h-[80vh] lg:w-[540px] lg:p-10",
+        className
+      )}
+    >
+      <h2 className="py-2 text-center text-[18px] font-semibold lg:text-[24px]">사장님 정보 관리</h2>
+
+      <form onSubmit={handleSubmit(onSubmitHandler)} className="relative flex flex-col">
+        <div className="scrollbar-custom h-[calc(100vh-400px)] pr-2">
+          <div className="space-y-8 lg:space-y-12">
+            <div className="mt-6 flex justify-center">
+              <div className="relative h-[80px] w-[80px] lg:h-[100px] lg:w-[100px]">
+                <button
+                  type="button"
+                  onClick={handleImageClick}
+                  className="h-full w-full overflow-hidden rounded-full bg-grayscale-100"
+                >
+                  {previewUrl ? (
+                    <Image
+                      src={previewUrl}
+                      alt="Profile"
+                      width={120}
+                      height={120}
+                      className="h-full w-full object-cover"
+                    />
+                  ) : (
+                    <FiUser className="h-full w-full p-6 text-grayscale-200" />
+                  )}
+                </button>
+                <button
+                  type="button"
+                  onClick={handleImageClick}
+                  className="absolute bottom-1 right-1 flex h-8 w-8 items-center justify-center rounded-full border-[2px] border-white bg-grayscale-100 shadow-lg"
+                >
+                  <FiEdit2 className="text-grayscale-600 h-4 w-4" />
+                </button>
+              </div>
+              <input ref={fileInputRef} type="file" accept="image/*" onChange={handleImageChange} className="hidden" />
+            </div>
+
+            {fields.map((field) => (
+              <div key={field.name} className="h-[64px] space-y-1">
+                <label className="text-grayscale-700 block px-2 pb-1 text-sm font-medium lg:text-base lg:font-semibold">
+                  {field.label}
+                  {field.required && <span className="text-orange-500">*</span>}
+                </label>
+                <div className="flex w-full flex-col items-center">
+                  <div className="relative w-full">
+                    <BaseInput
+                      {...register(field.name)}
+                      type="text"
+                      placeholder={field.hint || `${field.label}${field.postPosition} 입력해주세요.`}
+                      variant="white"
+                      size="w-full"
+                      wrapperClassName={`px-[14px] lg:px-[20px] ${field.icon ? "pl-[40px] lg:pl-[48px]" : ""}`}
+                      disabled={isUpdating}
+                      errormessage={errors[field.name]?.message}
+                    />
+                    {field.icon && (
+                      <div className="absolute left-4 top-1/2 -translate-y-1/2 lg:left-5">{field.icon}</div>
+                    )}
+                  </div>
+                  {field.hint && (
+                    <div className="mt-1 w-full px-2 text-left">
+                      <p className="text-sm text-orange-500 lg:text-base">{field.hint}</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="sticky bottom-0 w-full border-grayscale-100 bg-white pt-6 lg:pt-10">
+          <div className="flex h-[58px] justify-between gap-3 lg:h-[72px]">
+            <Button
+              type="button"
+              color="gray"
+              onClick={onClose}
+              disabled={isUpdating}
+              className="h-full text-sm font-semibold text-white lg:text-base"
+            >
+              취소
+            </Button>
+            <Button type="submit" disabled={isUpdating} className="h-full text-sm font-semibold lg:text-base">
+              {isUpdating ? <DotLoadingSpinner /> : "수정하기"}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default EditOwnerProfileModal;
diff --git a/src/app/components/pagination/Indicator.tsx b/src/app/components/pagination/Indicator.tsx
new file mode 100644
index 00000000..21af1c25
--- /dev/null
+++ b/src/app/components/pagination/Indicator.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { GoDotFill } from "react-icons/go";
+
+interface IndicatorProps {
+  imageCount: number;
+  currentPage: number;
+  onPageChange: (page: number) => void;
+}
+
+const Indicator = ({ imageCount, currentPage, onPageChange }: IndicatorProps) => {
+  const activeStyle = "lg:size-5 text-primary-orange-300 opacity-60 size:3";
+  const defaultStyle = "lg:size-3 text-primary-orange-100 opacity-60 size:1";
+
+  // 이미지 개수 만큼 동적으로 생성
+  const indicators = Array(imageCount)
+    .fill(null)
+    .map((_, index) => (
+      <GoDotFill
+        key={index}
+        onClick={() => onPageChange(index)}
+        className={currentPage === index ? activeStyle : defaultStyle}
+      />
+    ));
+
+  return (
+    <button
+      type="button"
+      className="flex items-center justify-between gap-1 rounded-full bg-primary-orange-50 bg-opacity-70 p-1 lg:gap-2 lg:p-2"
+    >
+      {indicators}
+    </button>
+  );
+};
+
+export default Indicator;
diff --git a/src/app/components/pagination/Pagination.tsx b/src/app/components/pagination/Pagination.tsx
new file mode 100644
index 00000000..bae1f139
--- /dev/null
+++ b/src/app/components/pagination/Pagination.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import PaginationBtn from "./paginationComponent/PaginationBtn";
+import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
+import useWidth from "@/hooks/useWidth";
+import { cn } from "@/lib/tailwindUtil";
+
+interface PaginationProps {
+  totalPage: number;
+  currentPage: number;
+  onPageChange: (page: number) => void;
+}
+
+const Pagination = ({ totalPage, currentPage, onPageChange }: PaginationProps): JSX.Element => {
+  const { isMobile } = useWidth();
+
+  const maxPageShow = isMobile ? 3 : 5;
+  const paginationNum = totalPage > maxPageShow ? maxPageShow : totalPage;
+  const initialPageList = Array(paginationNum)
+    .fill(null)
+    .map((_, index) => index + 1);
+  const [pageList, setPageList] = useState<number[]>(initialPageList);
+
+  useEffect(() => {
+    const calculatePageList = () => {
+      const currentGroup = Math.ceil(currentPage / maxPageShow);
+      const start = (currentGroup - 1) * maxPageShow + 1;
+      const end = Math.min(start + maxPageShow - 1, totalPage);
+
+      return Array(end - start + 1)
+        .fill(null)
+        .map((_, index) => start + index);
+    };
+
+    setPageList(calculatePageList());
+  }, [currentPage, totalPage, maxPageShow]);
+
+  const firstPage = pageList[0];
+  const lastPage = pageList[pageList.length - 1];
+
+  const prevDisabled = firstPage === 1;
+  const nextDisabled = lastPage === totalPage || totalPage <= maxPageShow;
+
+  const handleClickPrevBtn = () => {
+    const newPage = Math.max(firstPage - maxPageShow, 1);
+    onPageChange(newPage);
+  };
+
+  const handleClickNextBtn = () => {
+    const newPage = Math.min(lastPage + 1, totalPage);
+    onPageChange(newPage);
+  };
+
+  const handleChangePage = (page: number) => {
+    onPageChange(page);
+  };
+
+  const activeStyle = "text-black-400 font-semibold";
+  const defaultStyle = "text-grayscale-200 font-medium lg:font-normal";
+
+  return (
+    <nav className="flex gap-1" aria-label="페이지네이션">
+      <PaginationBtn
+        onClick={handleClickPrevBtn}
+        disabled={prevDisabled}
+        extraStyle="mr-[6px]"
+        aria-label="이전 페이지"
+      >
+        <IoIosArrowBack className={cn(prevDisabled ? defaultStyle : activeStyle)} />
+      </PaginationBtn>
+
+      <ul className="flex gap-1">
+        {pageList.map((page) => (
+          <li key={page}>
+            <PaginationBtn
+              onClick={() => handleChangePage(page)}
+              extraStyle={page === currentPage ? activeStyle : ""}
+              aria-label={`${page}페이지`}
+              aria-current={page === currentPage}
+            >
+              {page}
+            </PaginationBtn>
+          </li>
+        ))}
+      </ul>
+
+      {totalPage > maxPageShow + 2 && lastPage < totalPage - 1 && (
+        <>
+          <li>
+            <PaginationBtn>...</PaginationBtn>
+          </li>
+          <li>
+            <PaginationBtn
+              onClick={() => handleChangePage(totalPage)}
+              extraStyle={totalPage === currentPage ? activeStyle : ""}
+              aria-label={`${totalPage}페이지`}
+            >
+              {totalPage}
+            </PaginationBtn>
+          </li>
+        </>
+      )}
+
+      <PaginationBtn
+        onClick={handleClickNextBtn}
+        disabled={nextDisabled}
+        extraStyle="ml-[6px]"
+        aria-label="다음 페이지"
+      >
+        <IoIosArrowForward className={cn(nextDisabled ? defaultStyle : activeStyle)} />
+      </PaginationBtn>
+    </nav>
+  );
+};
+
+export default Pagination;
diff --git a/src/app/components/pagination/PaginationCard.tsx b/src/app/components/pagination/PaginationCard.tsx
new file mode 100644
index 00000000..0b5b9719
--- /dev/null
+++ b/src/app/components/pagination/PaginationCard.tsx
@@ -0,0 +1,13 @@
+const PaginationCard = ({ imageCount, selectedId }: { imageCount: number; selectedId: number }) => {
+  const activeStyle = "text-grayscale-50 font-semibold leading-[20px]";
+  const defaultStyle = "text-grayscale-200 font-medium lg:font-normal";
+  return (
+    <div className="flex items-center gap-1 rounded-[100px] bg-[#000] px-[10px] py-[2px] text-xs opacity-20 lg:gap-2 lg:px-4 lg:py-2 lg:text-lg lg:leading-[26px]">
+      <span className={activeStyle}>{selectedId + 1}</span>
+      <span className={defaultStyle}>/</span>
+      <span className={defaultStyle}>{imageCount}</span>
+    </div>
+  );
+};
+
+export default PaginationCard;
diff --git a/src/app/components/pagination/paginationComponent/PaginationBtn.tsx b/src/app/components/pagination/paginationComponent/PaginationBtn.tsx
new file mode 100644
index 00000000..46b56650
--- /dev/null
+++ b/src/app/components/pagination/paginationComponent/PaginationBtn.tsx
@@ -0,0 +1,33 @@
+import { cn } from "@/lib/tailwindUtil";
+
+interface PaginationBtnProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  extraStyle?: string;
+  "aria-label"?: string;
+  "aria-current"?: boolean;
+}
+
+const PaginationBtn = ({
+  children,
+  onClick,
+  disabled,
+  extraStyle,
+  "aria-label": ariaLabel,
+  "aria-current": ariaCurrent,
+}: PaginationBtnProps) => {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`flex h-8 w-8 items-center justify-center rounded-lg text-sm hover:bg-grayscale-100 disabled:cursor-not-allowed disabled:opacity-50 lg:h-10 lg:w-10 lg:text-base ${extraStyle}`}
+      aria-label={ariaLabel}
+      aria-current={ariaCurrent}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default PaginationBtn;
diff --git a/src/app/components/popUp/Toast.tsx b/src/app/components/popUp/Toast.tsx
new file mode 100644
index 00000000..1356c193
--- /dev/null
+++ b/src/app/components/popUp/Toast.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import CloseButton from "./closeButton";
+
+interface ToastProps {
+  onClose: () => void;
+}
+
+export default function Toast({ onClose }: ToastProps) {
+  return (
+    <div className="relative left-1/2 top-4 flex h-[48px] w-[327px] -translate-x-1/2 transform items-center rounded-lg bg-primary-blue-300 px-4 font-nexon text-grayscale-50 shadow-md md:h-[64px] md:w-[640px]">
+      <div className="flex w-full items-center justify-start md:justify-center">
+        <Image
+          src="/icons/check/check-circle-md.svg"
+          alt="체크 아이콘"
+          width={30}
+          height={30}
+          className="mr-2 hidden md:block"
+        />
+        <Image
+          src="/icons/check/check-circle-sm.svg"
+          alt="체크 아이콘"
+          width={20}
+          height={20}
+          className="mr-2 block md:hidden"
+        />
+        <p className="text-[12px] md:text-[18px]">정보가 수정되었습니다.</p>
+      </div>
+      <CloseButton onClose={onClose} />
+    </div>
+  );
+}
diff --git a/src/app/components/popUp/closeButton.tsx b/src/app/components/popUp/closeButton.tsx
new file mode 100644
index 00000000..42f9a413
--- /dev/null
+++ b/src/app/components/popUp/closeButton.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+
+interface CloseButtonProps {
+  onClose: () => void;
+}
+
+export default function CloseButton({ onClose }: CloseButtonProps) {
+  return (
+    <button type="button" onClick={onClose} className="absolute right-2 top-1/2 -translate-y-1/2 transform md:right-4">
+      <Image
+        src="/icons/x/x-md.svg"
+        alt="닫기"
+        width={30}
+        height={30}
+        className="hidden cursor-pointer hover:opacity-70 sm:block"
+      />
+      <Image
+        src="/icons/x/x-sm.svg"
+        alt="닫기"
+        width={20}
+        height={20}
+        className="block cursor-pointer hover:opacity-70 sm:hidden"
+      />
+    </button>
+  );
+}
diff --git a/src/app/components/popUp/popUp.tsx b/src/app/components/popUp/popUp.tsx
new file mode 100644
index 00000000..fc96774b
--- /dev/null
+++ b/src/app/components/popUp/popUp.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import CloseButton from "./closeButton";
+
+interface PopupProps {
+  viewers: number;
+  onClose: () => void;
+}
+
+export default function Popup({ viewers, onClose }: PopupProps) {
+  return (
+    <div className="relative left-1/2 top-4 flex h-[48px] w-[327px] -translate-x-1/2 transform items-center rounded-lg bg-primary-blue-300 px-6 font-nexon text-grayscale-50 shadow-md md:h-[84px] md:w-[1165px] md:px-8">
+      <div className="flex w-full items-center">
+        <Image
+          src="/icons/user/user-md.svg"
+          alt="유저 아이콘"
+          width={30}
+          height={30}
+          className="mr-3 hidden md:block"
+        />
+        <Image
+          src="/icons/user/user-sm.svg"
+          alt="유저 아이콘"
+          width={20}
+          height={20}
+          className="mr-3 block md:hidden"
+        />
+        <p className="text-[12px] md:text-[18px]">
+          현재 <strong className="text-primary-orange-300">{viewers}명</strong>이 알바폼을 보는 중이에요!
+        </p>
+      </div>
+      <CloseButton onClose={onClose} />
+    </div>
+  );
+}
diff --git a/src/app/components/popUp/toolTip.tsx b/src/app/components/popUp/toolTip.tsx
new file mode 100644
index 00000000..0625f1ea
--- /dev/null
+++ b/src/app/components/popUp/toolTip.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import CloseButton from "./closeButton";
+
+interface TooltipProps {
+  onClose: () => void;
+}
+
+export default function Tooltip({ onClose }: TooltipProps) {
+  return (
+    <div className="relative left-4 flex h-[48px] w-[327px] items-center rounded-lg bg-primary-blue-300 pl-3 font-nexon text-grayscale-50 shadow-md md:h-[79px] md:w-[476px] md:pl-4">
+      <div className="flex w-full items-center">
+        <Image
+          src="/icons/info/info-md.svg"
+          alt="정보 아이콘"
+          width={30}
+          height={30}
+          className="mr-2 hidden md:block"
+        />
+        <Image
+          src="/icons/info/info-sm.svg"
+          alt="정보 아이콘"
+          width={20}
+          height={20}
+          className="mr-2 block md:hidden"
+        />
+        <p className="text-[12px] md:text-[18px]">알바폼 현재 진행상태를 변경할 수 있어요!</p>
+      </div>
+      <CloseButton onClose={onClose} />
+    </div>
+  );
+}
diff --git a/src/app/error.tsx b/src/app/error.tsx
new file mode 100644
index 00000000..65af1a33
--- /dev/null
+++ b/src/app/error.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { Player } from "@lottiefiles/react-lottie-player"; // Lottie 애니메이션 Player
+import { handleError } from "@/utils/handleError";
+import { AuthenticationError } from "@/types/error";
+import { getErrorMessage } from "@/utils/getErrorMessage";
+import Button from "./components/button/default/Button";
+
+interface GlobalErrorProps {
+  error: Error; // 에러 객체 타입
+  reset: () => void; // 상태 초기화 함수
+}
+
+export default function GlobalError({ error, reset }: GlobalErrorProps) {
+  useEffect(() => {
+    handleError(error); // 콘솔에 로그 기록
+  }, [error]);
+
+  const isAuthError =
+    error instanceof AuthenticationError || (error instanceof Error && error.message.includes("Authentication"));
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-white px-4">
+      {/* Lottie 애니메이션 */}
+      <Player
+        autoplay
+        loop
+        src="/error.json" // public 폴더의 Lottie 파일
+        className="mb-8 w-full max-w-[300px] sm:max-w-[400px] lg:max-w-[500px]"
+      />
+
+      {/* 에러 메시지 */}
+      <h1 className="mb-4 text-center text-3xl font-bold text-red-600">Something went wrong</h1>
+      <p className="text-grayscale-700 mb-8 text-center text-lg">{getErrorMessage(error)}</p>
+
+      {/* 버튼 영역 */}
+      <div className="flex gap-4">
+        {isAuthError ? (
+          <Button variant="solid" width="sm" radius="lg" onClick={() => (window.location.href = "/login")}>
+            로그인하기
+          </Button>
+        ) : (
+          <Button variant="solid" width="sm" radius="lg" onClick={reset}>
+            다시 시도
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 59fb3519..5728264f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,28 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
-/* textarea 스크롤바 커스텀*/
-textarea::-webkit-scrollbar {
-  width: 4px;
-}
-
-textarea::-webkit-scrollbar-track {
-  background: transparent;
-}
-textarea::-webkit-scrollbar-thumb {
-  background: #c4c4c4;
-  border-radius: 9999px;
-}
-
-textarea::-webkit-scrollbar-thumb:hover {
-  background: #ababab;
-}
 /* 학교안심 둥근미소 R */
 @font-face {
   font-family: "HakgyoansimDunggeunmisoTTF-R";
   src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-R.woff2") format("woff2");
   font-weight: 400;
-  font-style: normal;
 }
 
 /* 학교안심 둥근미소 B */
@@ -31,30 +14,24 @@ textarea::-webkit-scrollbar-thumb:hover {
   font-family: "HakgyoansimDunggeunmisoTTF-B";
   src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-B.woff2") format("woff2");
   font-weight: 700;
-  font-style: normal;
 }
 
 /* 넥슨 폰트 */
 @font-face {
-  font-family: "NEXON Lv1 Gothic OTF Light";
-  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Light.woff")
-    format("woff");
-  font-weight: 300;
-  font-style: normal;
-}
-@font-face {
-  font-family: "NEXON Lv1 Gothic OTF Regular";
-  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Regular.woff")
-    format("woff");
+  font-family: "NEXON Lv1 Gothic OTF";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff") format("woff");
   font-weight: 400;
   font-style: normal;
+  font-display: swap;
 }
+
 @font-face {
-  font-family: "NEXON Lv1 Gothic OTF Bold";
-  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Bold.woff")
+  font-family: "NEXON Lv1 Gothic OTF";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Bold.woff")
     format("woff");
   font-weight: 700;
   font-style: normal;
+  font-display: swap;
 }
 
 /* 기본적인 스타일을 정의 */
@@ -63,7 +40,22 @@ textarea::-webkit-scrollbar-thumb:hover {
     @apply font-nexon;
   }
 }
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: gray;
+}
 
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+}
+
+li {
+  list-style: none;
+}
 /* 재사용 가능한 컴포넌트 스타일을 정의 */
 @layer components {
   .font-school-regular {
@@ -94,3 +86,250 @@ textarea::-webkit-scrollbar-thumb:hover {
     text-wrap: balance;
   }
 }
+/* 라디오 버튼 커스텀 스타일 */
+input[type="radio"].radio-custom {
+  -webkit-appearance: none; /* 웹킷 브라우저에서 기본 스타일 제거 */
+  -moz-appearance: none; /* 모질라 브라우저에서 기본 스타일 제거 */
+  appearance: none; /* 기본 브라우저에서 기본 스타일 제거 */
+  width: 18px;
+  height: 18px;
+  border: 2px solid #fbaf37; /* 체크되지 않았을 때의 테두리 색상 */
+  border-radius: 50%;
+  outline: none; /* focus 시에 나타나는 기본 스타일 제거 */
+  cursor: pointer;
+}
+
+/* 비활성화 상태에서의 라디오 버튼 스타일 */
+input[type="radio"].radio-custom:disabled {
+  border-color: #d1d5db;
+  cursor: not-allowed;
+}
+
+input[type="radio"].radio-custom:checked {
+  background-color: #fbaf37;
+  border: 3px solid white;
+  box-shadow: 0 0 0 1.6px #fbaf37;
+}
+
+/* 체크박스 본 스타일 */
+input[type="checkbox"] {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 2px solid #fbaf37;
+  border-radius: 4px;
+  outline: none;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+/* 체크박스 비활성화 상태 스타일 */
+input[type="checkbox"]:disabled {
+  border-color: #d1d5db;
+  background-color: #f3f4f6;
+  cursor: not-allowed;
+}
+
+/* 체크박스 선택 상태 */
+input[type="checkbox"]:checked {
+  background-color: #fbaf37;
+}
+
+/* 체크 표시 추가 */
+input[type="checkbox"]:checked::before {
+  content: "✔";
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  font-size: 10px;
+}
+
+/* 비활성화된 체크박스 */
+input[type="checkbox"]:disabled {
+  background-color: #f3f4f6;
+  border-color: #d1d5db;
+  cursor: not-allowed;
+}
+/* 스크롤바 커스텀 "scrollbar-custom" 를 className에 추가해서 적용 */
+.scrollbar-custom {
+  overflow-y: auto; /* 기본 overflow-y-auto 추가 */
+}
+.scrollbar-custom::-webkit-scrollbar {
+  width: 4px;
+}
+.scrollbar-custom::-webkit-scrollbar-track {
+  background: transparent;
+}
+.scrollbar-custom::-webkit-scrollbar-thumb {
+  background: #fcc369;
+  border-radius: 9999px;
+}
+
+.scrollbar-custom::-webkit-scrollbar-thumb:hover {
+  background: #fbaf37;
+}
+
+/*------------------- date picker 커스텀 --------------------*/
+/* 너비 채우기 */
+.react-datepicker-wrapper {
+  @apply border-[0.5px] border-grayscale-100;
+}
+
+.react-datepicker,
+.react-datepicker__month-container {
+  @apply mb-4 w-full lg:mb-6 !important;
+}
+
+.react-datepicker__month {
+  @apply m-0 !important;
+}
+/* week 스타일 */
+.react-datepicker__week,
+.react-datepicker__day-names {
+  @apply flex px-2 lg:px-4;
+}
+/* 모든 날짜 셀에 대한 기본 크기 설정 */
+.react-datepicker__day {
+  @apply my-[7px] flex h-7 w-full items-center justify-center text-[13px] font-medium leading-[22px] text-black-400 lg:my-[14px] lg:h-10 lg:text-[20px] lg:leading-8 !important;
+}
+/* 요일 헤더 스타일 */
+.react-datepicker__day-name {
+  @apply flex h-[42px] w-full items-center justify-center text-[13px] font-medium leading-[22px] text-grayscale-500 lg:h-16 lg:text-[20px] lg:leading-8 !important;
+}
+
+.react-datepicker__day-name,
+.react-datepicker__day,
+.react-datepicker__time-name {
+  @apply mx-0 !important;
+}
+
+/* 헤더 스타일 */
+.react-datepicker .react-datepicker__header {
+  @apply bg-white;
+}
+.react-datepicker__header,
+.react-datepicker__header--custom {
+  @apply border-transparent !important;
+}
+
+/* 현재 달이 아닌 날짜 스타일 */
+.react-datepicker__day--outside-month {
+  @apply text-grayscale-300 !important;
+}
+
+/* date range */
+.react-datepicker__day--in-selecting-range,
+.react-datepicker__day--in-range,
+.react-datepicker__month-text--in-selecting-range,
+.react-datepicker__month-text--in-range,
+.react-datepicker__quarter-text--in-selecting-range,
+.react-datepicker__quarter-text--in-range,
+.react-datepicker__year-text--in-selecting-range,
+.react-datepicker__year-text--in-range,
+.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--outside-month) {
+  @apply bg-primary-orange-50 text-black-400 opacity-80 !important;
+}
+/* 범위의 첫 날짜에 대한 스타일 */
+.react-datepicker__day--range-start.react-datepicker__day--in-range {
+  @apply bg-primary-orange-50 !important;
+  background: linear-gradient(to left, #fff7eb 50%, transparent 50%) !important;
+}
+
+/* 범위의 마지막 날짜에 대한 스타일 */
+.react-datepicker__day--range-end.react-datepicker__day--in-range {
+  @apply bg-primary-orange-50 !important;
+  background: linear-gradient(to right, #fff7eb 50%, transparent 50%) !important;
+}
+
+/* Start, End 날짜 스타일 - 선택 순서와 관계없이 항상 적용 */
+.react-datepicker__day--range-start,
+.react-datepicker__day--selecting-range-start,
+.react-datepicker__day--range-end,
+.react-datepicker__day--selecting-range-end,
+.react-datepicker__day--selected {
+  @apply relative text-grayscale-50 !important;
+  z-index: 1;
+}
+
+/* Start, End 날짜의 원형 배경 스타일 */
+.react-datepicker__day--range-start::before,
+.react-datepicker__day--selecting-range-start::before,
+.react-datepicker__day--range-end::before,
+.react-datepicker__day--selecting-range-end::before,
+.react-datepicker__day--selected::before {
+  @apply absolute left-1/2 top-1/2 h-7 w-7 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-orange-300 content-[''] lg:h-10 lg:w-10 !important;
+  z-index: -1;
+}
+
+/* 날짜 호버 스타일 */
+.react-datepicker__day:hover,
+.react-datepicker__day--selecting-range-start:hover,
+.react-datepicker__day--selecting-range-end:hover {
+  @apply bg-primary-orange-50 !important;
+}
+/* 오늘 날짜 기본 스타일 */
+.react-datepicker__day--today {
+  @apply border-transparent bg-transparent font-bold !important;
+  color: theme("colors.black.400") !important;
+}
+/* 오늘 날짜가 범위 안에 있을 때의 스타일 */
+.react-datepicker__day--today.react-datepicker__day--in-range {
+  @apply bg-primary-orange-50 !important;
+}
+
+/* 오늘 날짜가 시작일이나 종료일일 때의 스타일 */
+.react-datepicker__day--today.react-datepicker__day--range-start::before,
+.react-datepicker__day--today.react-datepicker__day--range-end::before {
+  @apply bg-primary-orange-300 !important;
+}
+
+/* 종료일 스타일 */
+.react-datepicker__day--selecting-range-end,
+.react-datepicker__day--selected {
+  @apply relative text-grayscale-50 !important;
+  background: linear-gradient(to right, #fff7eb 50%, transparent 50%) !important;
+}
+
+/* 범위 선택 중 종료일 스타일 유지 */
+.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-end,
+.react-datepicker__day--in-range.react-datepicker__day--range-end {
+  @apply text-grayscale-50 !important;
+  background: linear-gradient(to right, #fff7eb 50%, transparent 50%) !important;
+}
+
+/* 시작일 스타일 */
+.react-datepicker__day--selecting-range-start,
+.react-datepicker__day--selected {
+  @apply relative text-grayscale-50 !important;
+  background: linear-gradient(to right, #fff7eb 50%, transparent 50%) !important;
+}
+
+/* 범위 선택 중 시작일 스타일 유지 */
+.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start,
+.react-datepicker__day--in-range.react-datepicker__day--range-start {
+  @apply text-grayscale-50 !important;
+  background: linear-gradient(to left, #fff7eb 50%, transparent 50%) !important;
+}
+
+/* 첫번째 날짜 선택 후 이전 날짜에 호버했을때 첫번째 날짜 스타일 */
+.react-datepicker__day--keyboard-selected,
+.react-datepicker__month-text--keyboard-selected,
+.react-datepicker__quarter-text--keyboard-seleted,
+.react-datepicker__year-text--keyboard-selected {
+  @apply bg-grayscale-50 !important;
+}
+
+/* --------------------- date picker커스텀 끝--------------------- */
+
+.bg-black50 {
+  @apply !bg-[#141414] !bg-opacity-50;
+}
+
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
+
+/* 또는 */
+
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap");
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index aa989f21..5f2aefdd 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -8,17 +8,13 @@ import { viewport } from "./viewport";
 
 export { metadata, viewport };
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="ko">
-      <body>
+      <body className="scrollbar-custom">
         <ClientLayout>
           <Header />
-          {children}
+          <main className="min-h-[80vh] pt-16">{children}</main>
         </ClientLayout>
       </body>
     </html>
diff --git a/src/app/metadata.ts b/src/app/metadata.ts
index e19aab68..8cee4c40 100644
--- a/src/app/metadata.ts
+++ b/src/app/metadata.ts
@@ -1,32 +1,39 @@
-import type { Metadata } from "next";
+import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "워크루트",
-  description: "워크루트(WorkRoot) 프로젝트",
-  keywords: ["워크루트", "WorkRoot", "알바", "알바천국", "알바천국 프로젝트"],
-  authors: [{ name: "FE9-2" }],
-  openGraph: {
-    title: "워크루트",
-    description: "워크루트(WorkRoot) 프로젝트",
-    url: "https://workroot.life",
-    siteName: "워크루트(WorkRoot)",
-    images: [
+  title: "알바폼",
+  description: "알바 구인구직 서비스",
+  icons: {
+    // 기본 favicon
+    icon: [
       {
-        url: "https://workroot.life/og-image.jpg",
-        width: 1200,
-        height: 630,
+        url: "/favicon.ico",
+        sizes: "any",
+      },
+    ],
+    // Apple 기기를 위한 아이콘
+    apple: [
+      {
+        url: "/apple-icon-180x180.png",
+        sizes: "180x180",
+      },
+    ],
+    // PWA를 위한 아이콘들
+    other: [
+      {
+        rel: "icon",
+        type: "image/png",
+        sizes: "32x32",
+        url: "/favicon-32x32.png",
+      },
+      {
+        rel: "icon",
+        type: "image/png",
+        sizes: "16x16",
+        url: "/favicon-16x16.png",
       },
     ],
-    locale: "ko_KR",
-    type: "website",
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "워크루트",
-    description: "워크루트(WorkRoot) 프로젝트",
-    images: ["https://workroot.life/og-image.jpg"],
-  },
-  verification: {
-    google: "구글 인증 코드",
   },
+  // 웹 앱 매니페스트
+  manifest: "/site.webmanifest",
 };
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 957d2a9c..00d461c2 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,20 +1,46 @@
-import { Metadata, Viewport } from "next/types";
-
-export const viewport: Viewport = {
-  width: "device-width",
-  initialScale: 1,
-};
-
-export const metadata: Metadata = {
-  title: "페이지를 찾을 수 없습니다",
-  description: "요청하신 페이지를 찾을 수 없습니다.",
-};
+"use client";
+import Link from "next/link";
+import { Player } from "@lottiefiles/react-lottie-player"; // Lottie Player import
+import Button from "./components/button/default/Button";
 
 export default function NotFound() {
   return (
-    <div>
-      <h2>페이지를 찾을 수 없습니다</h2>
-      <p>요청하신 페이지를 찾을 수 없습니다.</p>
+    <div className="flex min-h-screen flex-col items-center justify-center bg-white px-4">
+      {/* Lottie 애니메이션 */}
+      <Player
+        autoplay
+        loop
+        src="/404.json" // JSON 파일 경로
+        style={{ height: "300px", width: "300px" }} // 애니메이션 크기 설정
+        className="mb-8"
+      />
+
+      {/* 에러 메시지 */}
+      <div className="mb-8 px-4 text-center">
+        <h1 className="text-grayscale-800 mb-4 text-2xl font-bold">페이지가 존재하지 않습니다</h1>
+        <p className="text-grayscale-600 text-base">URL이 올바른지 확인해 보시거나, 아래 버튼을 눌러 이동해 주세요</p>
+      </div>
+
+      {/* 버튼 */}
+      <div className="flex flex-wrap justify-center gap-4">
+        {/* 홈으로 버튼 */}
+        <Link href="/" passHref>
+          <Button variant="solid" width="sm" radius="full" className="bg-green-500 text-white hover:bg-green-600">
+            홈으로
+          </Button>
+        </Link>
+
+        {/* 뒤로 가기 버튼 */}
+        <Button
+          variant="solid"
+          width="sm"
+          radius="full"
+          className="hover:bg-grayscale-600 bg-grayscale-500 text-white"
+          onClick={() => window.history.back()}
+        >
+          뒤로 가기
+        </Button>
+      </div>
     </div>
   );
 }
diff --git a/src/app/stories/Input.stories.ts b/src/app/stories/Input.stories.ts
deleted file mode 100644
index 10e61253..00000000
--- a/src/app/stories/Input.stories.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import CommonInput from "@/app/components/input/CommonInput";
-
-export default {
-  title: "Test/Input",
-  component: CommonInput,
-  args: {
-    color: "#d9d9d9",
-  },
-};
-
-export const Text = {
-  args: {
-    type: "text",
-  },
-};
-export const Password = {
-  args: {
-    type: "password",
-  },
-};
diff --git a/src/app/stories/TextArea.stories.ts b/src/app/stories/TextArea.stories.ts
deleted file mode 100644
index 53aee084..00000000
--- a/src/app/stories/TextArea.stories.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import BaseTextArea from "@/app/components/input/BaseTextArea";
-
-enum BorderColor {
-  ERROR = "border-state-error",
-}
-
-export default {
-  title: "Test/TextArea",
-  component: BaseTextArea,
-  args: {
-    placeholder:
-      "값을 입력해보세요. hover, focus 테스트를 해보세요. 브라우저 창 크기를 줄이면 반응형 디자인을 확인할 수 있습니다.",
-    disabled: false,
-  },
-  argTypes: {
-    variant: { control: "radio", options: ["white", "transparent"], defaultValue: "white" },
-  },
-};
-export const whiteTextArea = {
-  args: {
-    variant: "white",
-  },
-};
-
-export const transparentTextArea = {
-  args: {
-    variant: "transparent",
-  },
-};
-
-export const textArea_with_error = {
-  args: {
-    borderColor: BorderColor.ERROR,
-    placeholder: "에러 상태 테스트",
-    errorMessage: "가게 이름(상호명)을 필수로 입력해주세요", // 필수값 검증
-  },
-};
diff --git a/src/app/stories/design-system/components/buttons/Button.stories.tsx b/src/app/stories/design-system/components/buttons/Button.stories.tsx
index 7000e692..6c2b9187 100644
--- a/src/app/stories/design-system/components/buttons/Button.stories.tsx
+++ b/src/app/stories/design-system/components/buttons/Button.stories.tsx
@@ -1,8 +1,8 @@
-import Button from "@/app/components/button/Button";
+import Button from "@/app/components/button/default/Button";
 import type { Meta, StoryObj } from "@storybook/react";
-
+import { RiEdit2Fill } from "react-icons/ri";
 const meta = {
-  title: "Design System/Components/Button",
+  title: "Design System/Components/Button/DefaultButton",
   component: Button,
   parameters: {
     layout: "centered",
@@ -15,7 +15,7 @@ const meta = {
     },
     width: {
       control: "radio",
-      options: ["xs", "sm", "md", "lg"],
+      options: ["xs", "sm", "md", "lg", "auto"],
     },
     disabled: {
       control: "boolean",
@@ -24,6 +24,9 @@ const meta = {
       control: "radio",
       options: ["lg", "full"],
     },
+    icon: {
+      control: false,
+    },
   },
 } satisfies Meta<typeof Button>;
 
@@ -81,3 +84,13 @@ export const OutlinedDisabled: Story = {
     disabled: true,
   },
 };
+
+export const WithIcon: Story = {
+  args: {
+    children: "Button with Icon",
+    variant: "solid",
+    width: "md",
+    radius: "lg",
+    icon: <RiEdit2Fill />,
+  },
+};
diff --git a/src/app/stories/design-system/components/buttons/CheckBtn.stories.tsx b/src/app/stories/design-system/components/buttons/CheckBtn.stories.tsx
new file mode 100644
index 00000000..68e7cc48
--- /dev/null
+++ b/src/app/stories/design-system/components/buttons/CheckBtn.stories.tsx
@@ -0,0 +1,54 @@
+import CheckBtn from "@/app/components/button/default/CheckBtn";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof CheckBtn> = {
+  title: "Design System/Components/Button/CheckBtn",
+  component: CheckBtn,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    label: { control: "text" },
+    name: { control: "text" },
+    value: { control: "text" },
+    checked: { control: "boolean" },
+    disabled: { control: "boolean" },
+    onChange: { action: "changed" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CheckBtn>;
+
+// 기본 사용법
+export const Default: Story = {
+  args: {
+    label: "Option 1",
+    name: "options",
+    value: "option1",
+    checked: false,
+    disabled: false,
+  },
+};
+
+// 선택된 체크박스 예시
+export const Checked: Story = {
+  args: {
+    label: "Option 2",
+    name: "options",
+    value: "option2",
+    checked: true,
+    disabled: false,
+  },
+};
+
+// 비활성화된 체크박스 예시
+export const Disabled: Story = {
+  args: {
+    label: "Option 3",
+    name: "options",
+    value: "option3",
+    checked: false,
+    disabled: true,
+  },
+};
diff --git a/src/app/stories/design-system/components/buttons/FloatingBtn.stories.tsx b/src/app/stories/design-system/components/buttons/FloatingBtn.stories.tsx
new file mode 100644
index 00000000..73ce6341
--- /dev/null
+++ b/src/app/stories/design-system/components/buttons/FloatingBtn.stories.tsx
@@ -0,0 +1,45 @@
+import FloatingBtn from "@/app/components/button/default/FloatingBtn";
+import type { Meta, StoryObj } from "@storybook/react";
+import { RiEdit2Fill } from "react-icons/ri";
+
+const meta: Meta<typeof FloatingBtn> = {
+  title: "Design System/Components/Button/FloatingBtn",
+  component: FloatingBtn,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    variant: {
+      control: "radio",
+      options: ["orange", "white"],
+    },
+    children: {
+      control: "text",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FloatingBtn>;
+
+export const OrangeCircle: Story = {
+  args: {
+    variant: "orange",
+    icon: <RiEdit2Fill />,
+  },
+};
+
+export const WhiteCircle: Story = {
+  args: {
+    variant: "white",
+    icon: <RiEdit2Fill />,
+  },
+};
+
+export const IconWithLabel: Story = {
+  args: {
+    variant: "orange",
+    icon: <RiEdit2Fill />,
+    children: "텍스트",
+  },
+};
diff --git a/src/app/stories/design-system/components/buttons/FrameRadioBtn.stories.tsx b/src/app/stories/design-system/components/buttons/FrameRadioBtn.stories.tsx
new file mode 100644
index 00000000..147b8035
--- /dev/null
+++ b/src/app/stories/design-system/components/buttons/FrameRadioBtn.stories.tsx
@@ -0,0 +1,44 @@
+import FrameRadioBtn from "@/app/components/button/default/FrameRadioBtn";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof FrameRadioBtn> = {
+  title: "Design System/Components/Button/FrameRadioBtn",
+  component: FrameRadioBtn,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    label: { control: "text" },
+    name: { control: "text" },
+    value: { control: "text" },
+    checked: { control: "boolean" },
+    onChange: { action: "changed" },
+    width: { control: "radio", options: ["sm", "md"] },
+    disabled: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FrameRadioBtn>;
+
+// 기본 사용법
+export const Default: Story = {
+  args: {
+    label: "Option 1",
+    name: "options",
+    value: "option1",
+    checked: false,
+    width: "sm",
+  },
+};
+
+// 선택된 라디오 버튼 예시
+export const Checked: Story = {
+  args: {
+    label: "Option 2",
+    name: "options",
+    value: "option2",
+    checked: true,
+    width: "sm",
+  },
+};
diff --git a/src/app/stories/design-system/components/buttons/RadioBtn.stories.tsx b/src/app/stories/design-system/components/buttons/RadioBtn.stories.tsx
new file mode 100644
index 00000000..c490bc1b
--- /dev/null
+++ b/src/app/stories/design-system/components/buttons/RadioBtn.stories.tsx
@@ -0,0 +1,30 @@
+import RadioBtn from "@/app/components/button/default/RadioBtn";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof RadioBtn> = {
+  title: "Design System/Components/Button/RadioBtn",
+  component: RadioBtn,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    label: { control: "text" },
+    name: { control: "text" },
+    value: { control: "text" },
+    checked: { control: "boolean" },
+    onChange: { action: "changed" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RadioBtn>;
+
+// 기본 사용법
+export const Default: Story = {
+  args: {
+    label: "Option 1",
+    name: "options",
+    value: "option1",
+    checked: true,
+  },
+};
diff --git a/src/app/stories/design-system/components/buttons/ScrapBtn.stories.tsx b/src/app/stories/design-system/components/buttons/ScrapBtn.stories.tsx
new file mode 100644
index 00000000..e38617ab
--- /dev/null
+++ b/src/app/stories/design-system/components/buttons/ScrapBtn.stories.tsx
@@ -0,0 +1,24 @@
+import ScrapBtn from "@/app/components/button/default/ScrapBtn";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof ScrapBtn> = {
+  title: "Design System/Components/Button/ScrapBtn",
+  component: ScrapBtn,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrapBtn>;
+
+export const Bookmarked: Story = {
+  args: {},
+  render: (args) => {
+    return (
+      <div>
+        <ScrapBtn {...args} />
+      </div>
+    );
+  },
+};
diff --git a/src/app/stories/design-system/components/card/board/Comment.stories.tsx b/src/app/stories/design-system/components/card/board/Comment.stories.tsx
new file mode 100644
index 00000000..7e733251
--- /dev/null
+++ b/src/app/stories/design-system/components/card/board/Comment.stories.tsx
@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Comment from "@/app/components/card/board/Comment";
+
+const meta: Meta<typeof Comment> = {
+  title: "Design System/Components/Card/Board/Comment",
+  component: Comment,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[327px] lg:w-[477px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Comment>;
+
+export const Default: Story = {
+  args: {
+    id: "1",
+    nickname: "홍길동",
+    updatedAt: new Date("2024.03.21"),
+    content: "안녕하세요. 지원하고 싶어서 문의드립니다. 현재 근무 중이신 분들은 몇 분이나 계신가요?",
+    isAuthor: false,
+  },
+};
+
+export const AuthorComment: Story = {
+  args: {
+    id: "2",
+    nickname: "홍길동",
+    updatedAt: new Date("2024.03.21"),
+    content: "안녕하세요. 지원하고 싶어서 문의드립니다. 현재 근무 중이신 분들은 몇 분이나 계신가요?",
+    isAuthor: true,
+  },
+};
+
+export const LongComment: Story = {
+  args: {
+    id: "3",
+    nickname: "김철수",
+    updatedAt: new Date("2024.03.22"),
+    content:
+      "안녕하세요. 문의드립니다. 현재 근무 중이신 분들은 몇 분이나 계신가요? 그리고 주말 근무는 어떻게 되나요? 야간 근무도 있나요? 자세한 설명 부탁드립니다.",
+    isAuthor: false,
+  },
+};
+
+export const LongAuthorComment: Story = {
+  args: {
+    id: "4",
+    nickname: "김철수",
+    updatedAt: new Date("2024.03.22"),
+    content:
+      "안녕하세요. 문의드립니다. 현재 근무 중이신 분들은 몇 분이나 계신가요? 그리고 주말 근무는 어떻게 되나요? 야간 근무도 있나요? 자세한 설명 부탁드립니다.",
+    isAuthor: true,
+  },
+};
diff --git a/src/app/stories/design-system/components/card/cardList/AlbaListItem.stories.tsx b/src/app/stories/design-system/components/card/cardList/AlbaListItem.stories.tsx
new file mode 100644
index 00000000..237118b0
--- /dev/null
+++ b/src/app/stories/design-system/components/card/cardList/AlbaListItem.stories.tsx
@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ModalLayout from "@/app/components/modal/ModalLayout";
+import AlbaListItem from "@/app/components/card/cardList/AlbaListItem";
+
+const meta: Meta<typeof AlbaListItem> = {
+  title: "Design System/Components/Card/CardList/AlbaListItem",
+  component: AlbaListItem,
+  parameters: {
+    layout: "centered",
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        push: () => {},
+        replace: () => {},
+        prefetch: () => {},
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="bg-white p-4">
+        <Story />
+        <ModalLayout />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof AlbaListItem>;
+
+const mockProps = {
+  id: 1,
+  imageUrls: [
+    "https://images.unsplash.com/photo-1514933651103-005eec06c04b?q=80&w=1974&auto=format&fit=crop",
+    "https://images.unsplash.com/photo-1574126154517-d1e0d89ef734?q=80&w=1974&auto=format&fit=crop",
+    "https://images.unsplash.com/photo-1554118811-1e0d58224f24?q=80&w=2047&auto=format&fit=crop",
+    "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?q=80&w=2070&auto=format&fit=crop",
+    "https://images.unsplash.com/photo-1523242942815-1ba8fc07f592?q=80&w=2070&auto=format&fit=crop",
+  ],
+  isPublic: true,
+  recruitmentStartDate: new Date("2024-06-01"),
+  recruitmentEndDate: new Date("2024-12-31"),
+  title: "서울 강남구 카페 직원 모집합니다",
+  applyCount: 5,
+  scrapCount: 10,
+};
+
+// 640px 미만
+export const Mobile: Story = {
+  args: {
+    ...mockProps,
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile1", // 320px
+    },
+  },
+};
+
+// sm (640px ~ 768px)
+export const Tablet: Story = {
+  args: {
+    ...mockProps,
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: "tablet", // 640px
+    },
+  },
+};
+
+// md 이상 (768px 이상)
+export const Desktop: Story = {
+  args: {
+    ...mockProps,
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: "desktop", // 768px 이상
+    },
+  },
+};
+
+// 비공개 게시글
+export const PrivatePost: Story = {
+  args: {
+    ...mockProps,
+    isPublic: false,
+  },
+};
+
+// 긴 제목
+export const LongTitle: Story = {
+  args: {
+    ...mockProps,
+    title: "서울 강남구 카페에서 주말 아르바이트 직원을 모집합니다. 경력자 우대, 성실한 분 환영합니다.",
+  },
+};
+
+// 높은 지원자/스크랩 수
+export const HighStats: Story = {
+  args: {
+    ...mockProps,
+    applyCount: 999,
+    scrapCount: 999,
+  },
+};
+
+// 마감 임박
+export const NearDeadline: Story = {
+  args: {
+    ...mockProps,
+    recruitmentEndDate: new Date(Date.now() + 24 * 60 * 60 * 1000), // 내일
+  },
+};
diff --git a/src/app/stories/design-system/components/card/cardList/CardChipIcon.stories.tsx b/src/app/stories/design-system/components/card/cardList/CardChipIcon.stories.tsx
new file mode 100644
index 00000000..c28cfd63
--- /dev/null
+++ b/src/app/stories/design-system/components/card/cardList/CardChipIcon.stories.tsx
@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { FormListType } from "@/types/response/form";
+import CardChipIcon from "@/app/components/card/cardList/CardChipIcon";
+
+const meta: Meta<typeof CardChipIcon> = {
+  title: "Design System/Components/Card/CardList/CardChipIcon",
+  component: CardChipIcon,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CardChipIcon>;
+
+const mockFormData: FormListType = {
+  updatedAt: new Date(),
+  createdAt: new Date(),
+  isPublic: true,
+  scrapCount: 5,
+  applyCount: 10,
+  imageUrls: ["url1", "url2"],
+  recruitmentEndDate: new Date(),
+  recruitmentStartDate: new Date(),
+  title: "모집 제목",
+  id: 1,
+};
+
+export const Default: Story = {
+  args: {
+    formData: mockFormData,
+  },
+};
diff --git a/src/app/stories/design-system/components/card/cardList/MyApplicationListItem.stories.tsx b/src/app/stories/design-system/components/card/cardList/MyApplicationListItem.stories.tsx
new file mode 100644
index 00000000..f02e727e
--- /dev/null
+++ b/src/app/stories/design-system/components/card/cardList/MyApplicationListItem.stories.tsx
@@ -0,0 +1,109 @@
+import MyApplicationListItem from "@/app/components/card/cardList/MyApplicationListItem";
+import { applicationStatus } from "@/types/application";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof MyApplicationListItem> = {
+  title: "Design System/Components/Card/CardList/MyApplicationListItem",
+  component: MyApplicationListItem,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MyApplicationListItem>;
+
+const mockProps = {
+  id: 1,
+  createdAt: new Date("2024-03-21T14:30:00"),
+  updatedAt: new Date("2024-03-21T14:30:00"),
+  status: applicationStatus.INTERVIEW_PENDING,
+  resumeName: "이력서.pdf",
+  resumeId: 123,
+  form: {
+    owner: {
+      imageUrl: "https://images.unsplash.com/photo-1514933651103-005eec06c04b?q=80&w=1974&auto=format&fit=crop",
+      storeName: "스타벅스 강남점",
+      id: 1,
+    },
+    recruitmentEndDate: new Date("2024-12-31T00:00:00.000Z"),
+    recruitmentStartDate: new Date("2024-06-01T00:00:00.000Z"),
+    description:
+      "스타벅스 강남점에서 함께할 파트타이머를 모집합니다. 주말 근무 가능자 우대, 경력자 우대, 장기 근무자 우대",
+    title: "스타벅스 강남점 파트타이머 모집",
+    id: 1,
+  },
+};
+
+// 기본 상태
+export const Default: Story = {
+  args: {
+    ...mockProps,
+  },
+};
+
+// 면접 대기 상태
+export const InterviewPending: Story = {
+  args: {
+    ...mockProps,
+    status: applicationStatus.INTERVIEW_PENDING,
+  },
+};
+
+// 면접 완료 상태
+export const InterviewCompleted: Story = {
+  args: {
+    ...mockProps,
+    status: applicationStatus.INTERVIEW_COMPLETED,
+  },
+};
+
+// 채용 완료 상태
+export const Hired: Story = {
+  args: {
+    ...mockProps,
+    status: applicationStatus.HIRED,
+  },
+};
+
+// 거절 상태
+export const Rejected: Story = {
+  args: {
+    ...mockProps,
+    status: applicationStatus.REJECTED,
+  },
+};
+
+// 모집 종료된 공고
+export const RecruitmentClosed: Story = {
+  args: {
+    ...mockProps,
+    form: {
+      ...mockProps.form,
+      recruitmentEndDate: new Date("2024-01-01T00:00:00.000Z"),
+    },
+  },
+};
+
+// 긴 설명
+export const LongDescription: Story = {
+  args: {
+    ...mockProps,
+    form: {
+      ...mockProps.form,
+      description:
+        "스타벅스 강남점에서 함께할 파트타이머를 모집합니다. 주말 근무 가능자 우대, 경력자 우대, 장기 근무자 우대. 스타벅스 강남점에서 함께할 파트타이머를 모집합니다. 주말 근무 가능자 우대, 경력자 우대, 장기 근무자 우대.",
+    },
+  },
+};
+
+// 긴 제목
+export const LongTitle: Story = {
+  args: {
+    ...mockProps,
+    form: {
+      ...mockProps.form,
+      title: "스타벅스 강남점 파트타이머 모집 - 주말 근무 가능자 우대, 경력자 우대, 장기 근무자 우대",
+    },
+  },
+};
diff --git a/src/app/stories/design-system/components/card/cardList/RecruitCondition.stories.tsx b/src/app/stories/design-system/components/card/cardList/RecruitCondition.stories.tsx
new file mode 100644
index 00000000..81c73c6b
--- /dev/null
+++ b/src/app/stories/design-system/components/card/cardList/RecruitCondition.stories.tsx
@@ -0,0 +1,52 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { FormDetailResponse } from "@/types/response/form";
+import RecruitCondition from "@/app/components/card/cardList/RecruitCondition";
+
+const meta: Meta<typeof RecruitCondition> = {
+  title: "Design System/Components/Card/CardList/RecruitCondition",
+  component: RecruitCondition,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RecruitCondition>;
+
+const mockRecruitData: FormDetailResponse = {
+  updatedAt: "2024-12-11T04:43:46.052Z",
+  createdAt: "2024-12-11T04:43:46.052Z",
+  preferred: "업무 관련 자격증 소지, 유사업무 경험 우대, 인근 거주 우대",
+  age: "20세 이상",
+  education: "고등학교 졸업",
+  gender: "무관",
+  numberOfPositions: 3,
+  isPublic: true,
+  hourlyWage: 10000,
+  isNegotiableWorkDays: true,
+  workDays: ["월요일", "화요일"],
+  workEndTime: "18:00",
+  workStartTime: "09:00",
+  workEndDate: "2024-12-11T04:43:46.052Z",
+  workStartDate: "2024-12-11T04:43:46.052Z",
+  location: "서울",
+  imageUrls: ["url1", "url2"],
+  recruitmentEndDate: "2024-12-11T04:43:46.052Z",
+  recruitmentStartDate: "2024-12-11T04:43:46.052Z",
+  description: "모집설명",
+  title: "모집제목",
+  ownerId: 1,
+  id: 1,
+  scrapCount: 0,
+  applyCount: 0,
+  isScrapped: false,
+  phoneNumber: "010-1234-5678",
+  storePhoneNumber: "02-123-4567",
+  storeName: "가게이름",
+};
+
+export const Default: Story = {
+  args: {
+    recruitData: mockRecruitData,
+  },
+};
diff --git a/src/app/stories/design-system/components/card/cardList/RecruitDetail.stories.tsx b/src/app/stories/design-system/components/card/cardList/RecruitDetail.stories.tsx
new file mode 100644
index 00000000..f271bb6f
--- /dev/null
+++ b/src/app/stories/design-system/components/card/cardList/RecruitDetail.stories.tsx
@@ -0,0 +1,52 @@
+import { Meta, StoryObj } from "@storybook/react";
+import RecruitDetail from "@/app/components/card/cardList/RecruitDetail";
+import { FormDetailResponse } from "@/types/response/form";
+
+const meta: Meta<typeof RecruitDetail> = {
+  title: "Design System/Components/Card/CardList/RecruitDetail",
+  component: RecruitDetail,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RecruitDetail>;
+
+const mockRecruitData: FormDetailResponse = {
+  updatedAt: "2024-12-11T04:43:46.052Z",
+  createdAt: "2024-12-11T04:43:46.052Z",
+  preferred: "string",
+  age: "string",
+  education: "string",
+  gender: "string",
+  numberOfPositions: 1,
+  isPublic: true,
+  hourlyWage: 10000,
+  isNegotiableWorkDays: true,
+  workDays: ["월요일", "화요일"],
+  workEndTime: "18:00",
+  workStartTime: "09:00",
+  workEndDate: "2024-12-11T04:43:46.052Z",
+  workStartDate: "2024-12-11T04:43:46.052Z",
+  location: "서울",
+  imageUrls: ["url1", "url2"],
+  recruitmentEndDate: "2024-12-11T04:43:46.052Z",
+  recruitmentStartDate: "2024-12-11T04:43:46.052Z",
+  description: "모집 설명",
+  title: "모집 제목",
+  ownerId: 1,
+  id: 1,
+  scrapCount: 0,
+  applyCount: 0,
+  isScrapped: false,
+  phoneNumber: "010-1234-5678",
+  storePhoneNumber: "02-123-4567",
+  storeName: "가게 이름",
+};
+
+export const Default: Story = {
+  args: {
+    recruitData: mockRecruitData,
+  },
+};
diff --git a/src/app/stories/design-system/components/card/cardList/RecruitIcon.stories.tsx b/src/app/stories/design-system/components/card/cardList/RecruitIcon.stories.tsx
new file mode 100644
index 00000000..3831c8b7
--- /dev/null
+++ b/src/app/stories/design-system/components/card/cardList/RecruitIcon.stories.tsx
@@ -0,0 +1,91 @@
+import RecruitIcon from "@/app/components/card/cardList/RecruitIcon";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof RecruitIcon> = {
+  title: "Design System/Components/Card/CardList/RecruitIcon",
+  component: RecruitIcon,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RecruitIcon>;
+
+const mockProps = {
+  hourlyWage: 10000,
+  recruitmentStartDate: new Date("2024-06-01"),
+  recruitmentEndDate: new Date("2024-12-31"),
+  workStartTime: "06:00",
+  workEndTime: "21:00",
+  isNegotiableWorkDays: false,
+  workDays: ["MONDAY", "WEDNESDAY", "FRIDAY"],
+};
+
+// 640px 미만
+export const Mobile: Story = {
+  args: {
+    ...mockProps,
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile1", // 320px
+    },
+  },
+};
+
+// sm (640px ~ 768px)
+export const Tablet: Story = {
+  args: {
+    ...mockProps,
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: "tablet", // 640px
+    },
+  },
+};
+
+// md 이상 (768px 이상)
+export const Desktop: Story = {
+  args: {
+    ...mockProps,
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: "desktop", // 768px 이상
+    },
+  },
+};
+
+// 연속된 요일 케이스
+export const ConsecutiveDays: Story = {
+  args: {
+    ...mockProps,
+    workDays: ["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY"],
+  },
+};
+
+// 부분 연속 요일 케이스
+export const PartialConsecutiveDays: Story = {
+  args: {
+    ...mockProps,
+    workDays: ["MONDAY", "TUESDAY", "WEDNESDAY", "FRIDAY"],
+  },
+};
+
+// 주말 연속 요일 케이스
+export const WeekendConsecutiveDays: Story = {
+  args: {
+    ...mockProps,
+    workDays: ["MONDAY", "TUESDAY", "SATURDAY", "SUNDAY"],
+  },
+};
+
+// 요일협의 가능한 케이스
+export const NegotiableWorkDays: Story = {
+  args: {
+    ...mockProps,
+    isNegotiableWorkDays: true,
+  },
+};
diff --git a/src/app/stories/design-system/components/card/cardList/ScapListItem.stories.tsx b/src/app/stories/design-system/components/card/cardList/ScapListItem.stories.tsx
new file mode 100644
index 00000000..b2a66e85
--- /dev/null
+++ b/src/app/stories/design-system/components/card/cardList/ScapListItem.stories.tsx
@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ModalLayout from "@/app/components/modal/ModalLayout";
+import ScrapListItem from "@/app/components/card/cardList/ScrapListItem";
+
+const meta: Meta<typeof ScrapListItem> = {
+  title: "Design System/Components/Card/CardList/ScrapListItem",
+  component: ScrapListItem,
+  parameters: {
+    layout: "centered",
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        push: () => {},
+        replace: () => {},
+        prefetch: () => {},
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="bg-white p-4">
+        <Story />
+        <ModalLayout />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrapListItem>;
+
+const mockProps = {
+  id: 1,
+  imageUrls: [
+    "https://images.unsplash.com/photo-1514933651103-005eec06c04b?q=80&w=1974&auto=format&fit=crop",
+    "https://images.unsplash.com/photo-1574126154517-d1e0d89ef734?q=80&w=1974&auto=format&fit=crop",
+    "https://images.unsplash.com/photo-1554118811-1e0d58224f24?q=80&w=2047&auto=format&fit=crop",
+    "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?q=80&w=2070&auto=format&fit=crop",
+    "https://images.unsplash.com/photo-1523242942815-1ba8fc07f592?q=80&w=2070&auto=format&fit=crop",
+  ],
+  isPublic: true,
+  recruitmentStartDate: new Date("2024-06-01"),
+  recruitmentEndDate: new Date("2024-12-31"),
+  title: "서울 강남구 카페 직원 모집합니다",
+  applyCount: 5,
+  scrapCount: 10,
+};
+
+// 640px 미만
+export const Mobile: Story = {
+  args: {
+    ...mockProps,
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile1", // 320px
+    },
+  },
+};
+
+// sm (640px ~ 768px)
+export const Tablet: Story = {
+  args: {
+    ...mockProps,
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: "tablet", // 640px
+    },
+  },
+};
+
+// md 이상 (768px 이상)
+export const Desktop: Story = {
+  args: {
+    ...mockProps,
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: "desktop", // 768px 이상
+    },
+  },
+};
+
+// 비공개 게시글
+export const PrivatePost: Story = {
+  args: {
+    ...mockProps,
+    isPublic: false,
+  },
+};
+
+// 긴 제목
+export const LongTitle: Story = {
+  args: {
+    ...mockProps,
+    title: "서울 강남구 카페에서 주말 아르바이트 직원을 모집합니다. 경력자 우대, 성실한 분 환영합니다.",
+  },
+};
+
+// 높은 지원자/스크랩 수
+export const HighStats: Story = {
+  args: {
+    ...mockProps,
+    applyCount: 999,
+    scrapCount: 999,
+  },
+};
+
+// 마감 임박
+export const NearDeadline: Story = {
+  args: {
+    ...mockProps,
+    recruitmentEndDate: new Date(Date.now() + 24 * 60 * 60 * 1000), // 내일
+  },
+};
diff --git a/src/app/stories/design-system/components/card/cardList/SubmitContCard.stories.tsx b/src/app/stories/design-system/components/card/cardList/SubmitContCard.stories.tsx
new file mode 100644
index 00000000..0385a07d
--- /dev/null
+++ b/src/app/stories/design-system/components/card/cardList/SubmitContCard.stories.tsx
@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ApplicationResponse } from "@/types/response/application";
+import SubmitContCard from "@/app/components/card/cardList/SubmitContCard";
+
+const meta: Meta<typeof SubmitContCard> = {
+  title: "Design System/Components/Card/CardList/SubmitContCard",
+  component: SubmitContCard,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SubmitContCard>;
+
+const mockData: ApplicationResponse = {
+  applicantId: 1,
+  updatedAt: new Date(),
+  createdAt: new Date(),
+  status: "submitted",
+  introduction: "안녕하세요, 저는 지원자입니다.",
+  resumeName: "이력서.pdf",
+  resumeId: 123,
+  experienceMonths: 12,
+  phoneNumber: "010-1234-5678",
+  name: "홍길동",
+  id: 1,
+};
+
+// Default 스토리 정의
+export const Default: Story = {
+  args: {
+    submitContData: mockData,
+  },
+};
diff --git a/src/app/stories/design-system/components/chip/Chip.stories.tsx b/src/app/stories/design-system/components/chip/Chip.stories.tsx
new file mode 100644
index 00000000..23554b4b
--- /dev/null
+++ b/src/app/stories/design-system/components/chip/Chip.stories.tsx
@@ -0,0 +1,22 @@
+import "react-datepicker/dist/react-datepicker.css";
+import { Meta, StoryObj } from "@storybook/react";
+import Chip from "@/app/components/chip/Chip";
+
+const meta = {
+  title: "Design System/Components/Chip/DefaultChip",
+  component: Chip,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+
+type Story = StoryObj<typeof Chip>;
+
+export const DefaultChip: Story = {
+  args: {
+    label: "스크랩",
+    variant: "positive",
+  },
+};
diff --git a/src/app/stories/design-system/components/chip/ChipwithIcon.stories.tsx b/src/app/stories/design-system/components/chip/ChipwithIcon.stories.tsx
new file mode 100644
index 00000000..48646436
--- /dev/null
+++ b/src/app/stories/design-system/components/chip/ChipwithIcon.stories.tsx
@@ -0,0 +1,29 @@
+import "react-datepicker/dist/react-datepicker.css";
+import { Meta, StoryObj } from "@storybook/react";
+import ChipWithIcon from "@/app/components/chip/ChipWithIcon";
+import { FaBookmark, FaRegBookmark } from "react-icons/fa";
+
+const meta = {
+  title: "Design System/Components/Chip",
+  component: ChipWithIcon,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    isBookmarked: {
+      control: "boolean",
+      defaultValue: false,
+    },
+  },
+} satisfies Meta<typeof ChipWithIcon>;
+
+export default meta;
+
+type Story = StoryObj<typeof ChipWithIcon>;
+
+export const ScrapChip: Story = {
+  args: {
+    label: "스크랩",
+  },
+  render: (args: any) => <ChipWithIcon {...args} icon={args.isBookmarked ? <FaBookmark /> : <FaRegBookmark />} />,
+};
diff --git a/src/app/stories/design-system/components/dropdown/FilterDropdown.stories.tsx b/src/app/stories/design-system/components/dropdown/FilterDropdown.stories.tsx
new file mode 100644
index 00000000..67fd7df9
--- /dev/null
+++ b/src/app/stories/design-system/components/dropdown/FilterDropdown.stories.tsx
@@ -0,0 +1,59 @@
+import { Meta, StoryObj } from "@storybook/react";
+import FilterDropdown from "@/app/components/button/dropdown/FilterDropdown";
+
+const meta: Meta<typeof FilterDropdown> = {
+  title: "Design System/Components/Dropdown/FilterDropdown",
+  component: FilterDropdown,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    className: {
+      control: "text",
+      description: "추가적인 스타일링을 위한 클래스",
+    },
+    readOnly: {
+      control: "boolean",
+      description: "읽기 전용 여부",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FilterDropdown>;
+
+export const Small: Story = {
+  args: {
+    options: ["전체", "공개", "비공개"],
+    className: "w-20",
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    options: ["전체", "모집 중", "모집 마감"],
+    className: "w-28",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    options: ["최신순", "시급높은순", "지원자 많은순", "스크랩 많은순"],
+    className: "w-36",
+  },
+};
+
+export const CustomWidth: Story = {
+  args: {
+    options: ["전체", "거절", "면접 대기", "면접 완료", "채용 완료"],
+    className: "w-[180px]",
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    options: ["최신순"],
+    className: "w-28",
+    readOnly: true,
+  },
+};
diff --git a/src/app/stories/design-system/components/dropdown/InputDropdownBtn.stories.tsx b/src/app/stories/design-system/components/dropdown/InputDropdownBtn.stories.tsx
new file mode 100644
index 00000000..2d75a571
--- /dev/null
+++ b/src/app/stories/design-system/components/dropdown/InputDropdownBtn.stories.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import { useForm, FormProvider } from "react-hook-form";
+import InputDropdown from "@/app/components/button/dropdown/InputDropdown";
+
+const meta = {
+  title: "Design System/Components/Dropdown/InputDropdown",
+  component: InputDropdown,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof InputDropdown>;
+
+export default meta;
+type Story = StoryObj<typeof InputDropdown>;
+
+const Template = (args: any) => {
+  const methods = useForm({
+    defaultValues: {
+      [args.name]: "", // 기본 값 설정
+    },
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <form>
+        <InputDropdown {...args} />
+      </form>
+    </FormProvider>
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <Template {...args} />,
+  args: {
+    options: ["Option 1", "Option 2", "직접입력"],
+    className: "",
+    name: "dropdown", // `useFormContext`에서 사용할 필드 이름
+  },
+};
+
+export const Error: Story = {
+  render: (args) => <Template {...args} />,
+  args: {
+    options: ["Option 1", "Option 2", "직접입력"],
+    className: "",
+    name: "dropdown", // 동일한 필드 이름
+    errormessage: "에러 메시지",
+  },
+};
diff --git a/src/app/stories/design-system/components/dropdown/KebabDropdown.stories.tsx b/src/app/stories/design-system/components/dropdown/KebabDropdown.stories.tsx
new file mode 100644
index 00000000..92c4fdec
--- /dev/null
+++ b/src/app/stories/design-system/components/dropdown/KebabDropdown.stories.tsx
@@ -0,0 +1,58 @@
+import { Meta, StoryObj } from "@storybook/react";
+import KebabDropdown from "@/app/components/button/dropdown/KebabDropdown";
+
+const meta: Meta<typeof KebabDropdown> = {
+  title: "Design System/Components/Dropdown/KebabDropdown",
+  component: KebabDropdown,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    options: {
+      description: "드롭다운 메뉴 옵션들",
+      control: {
+        type: "object",
+      },
+    },
+    className: {
+      description: "추가적인 스타일링을 위한 클래스",
+      control: "text",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof KebabDropdown>;
+
+// 기본 케밥 메뉴 드롭다운
+export const Default: Story = {
+  args: {
+    options: [
+      { label: "내 정보 수정", onClick: () => console.log("내 정보 수정 클릭") },
+      { label: "비밀번호 변경", onClick: () => console.log("비밀번호 변경 클릭") },
+    ],
+  },
+};
+
+// 여러 옵션이 있는 케밥 메뉴 드롭다운
+export const MultipleOptions: Story = {
+  args: {
+    options: [
+      { label: "프로필 보기", onClick: () => console.log("프로필 보기 클릭") },
+      { label: "내 정보 수정", onClick: () => console.log("내 정보 수정 클릭") },
+      { label: "비밀번호 변경", onClick: () => console.log("비밀번호 변경 클릭") },
+      { label: "로그아웃", onClick: () => console.log("로그아웃 클릭") },
+    ],
+  },
+};
+
+// 커스텀 스타일이 적용된 케밥 메뉴 드롭다운
+export const CustomStyle: Story = {
+  args: {
+    options: [
+      { label: "수정하기", onClick: () => console.log("수정하기 클릭") },
+      { label: "삭제하기", onClick: () => console.log("삭제하기 클릭") },
+    ],
+    className: "bg-grayscale-50 p-2 rounded-full",
+  },
+};
diff --git a/src/app/stories/design-system/components/dropdown/SortDropdown.stories.tsx b/src/app/stories/design-system/components/dropdown/SortDropdown.stories.tsx
new file mode 100644
index 00000000..47abfecf
--- /dev/null
+++ b/src/app/stories/design-system/components/dropdown/SortDropdown.stories.tsx
@@ -0,0 +1,26 @@
+import SortDropdown from "@/app/components/button/dropdown/SortDropdown";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof SortDropdown> = {
+  title: "Design System/Components/Dropdown/SortDropdown",
+  component: SortDropdown,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    label: { control: "text" },
+    className: { control: "text" },
+    onSortChange: { action: "sort changed" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SortDropdown>;
+
+export const SortDropdownBtn: Story = {
+  args: {
+    label: "Sort",
+    options: ["최신순", "시급높은순", "지원자 많은순", "스크랩 많은순"],
+    className: "",
+  },
+};
diff --git a/src/app/stories/design-system/components/dropdown/TabMenuDropdown.stories.tsx b/src/app/stories/design-system/components/dropdown/TabMenuDropdown.stories.tsx
new file mode 100644
index 00000000..153ac7b8
--- /dev/null
+++ b/src/app/stories/design-system/components/dropdown/TabMenuDropdown.stories.tsx
@@ -0,0 +1,39 @@
+import TabMenuDropdown from "@/app/components/button/dropdown/TabMenuDropdown";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof TabMenuDropdown> = {
+  title: "Design System/Components/Dropdown/TabMenuDropdown",
+  component: TabMenuDropdown,
+  argTypes: {
+    options: {
+      description: "드롭다운에서 선택 가능한 옵션들",
+      control: {
+        type: "object",
+      },
+    },
+  },
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TabMenuDropdown>;
+
+export const Default: Story = {
+  args: {
+    options: [
+      { label: "모집 내용", isEditing: true },
+      { label: "모집 조건", isEditing: false },
+      { label: "근무 조건", isEditing: false },
+    ],
+  },
+  render: (args) => {
+    // 기본 값을 전달합니다.
+    const mockSearchParams = new URLSearchParams("?tab=recruit-content");
+    const currentParam = mockSearchParams.get("tab") || "recruit-content";
+
+    return <TabMenuDropdown {...args} currentParam={currentParam} />;
+  },
+};
diff --git a/src/app/stories/design-system/components/input/file/Download.stories.tsx b/src/app/stories/design-system/components/input/file/Download.stories.tsx
new file mode 100644
index 00000000..d4976c36
--- /dev/null
+++ b/src/app/stories/design-system/components/input/file/Download.stories.tsx
@@ -0,0 +1,21 @@
+import DownloadInput from "@/app/components/input/file/DownloadInput";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Design System/Components/FileInput/Download",
+  component: DownloadInput,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof DownloadInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof DownloadInput>;
+
+export const Download: Story = {
+  args: {
+    variant: "download",
+    placeholder: "파일 다운로드하기 (현재는 기능 X)",
+  },
+};
diff --git a/src/app/stories/design-system/components/input/file/Upload.stories.tsx b/src/app/stories/design-system/components/input/file/Upload.stories.tsx
new file mode 100644
index 00000000..8012b7a9
--- /dev/null
+++ b/src/app/stories/design-system/components/input/file/Upload.stories.tsx
@@ -0,0 +1,27 @@
+import UploadInput from "@/app/components/input/file/UploadInput";
+import { Meta, StoryObj } from "@storybook/react";
+
+// 파일 객체 생성
+const file = new File(["content"], "example.pdf", { type: "application/pdf" });
+
+const meta = {
+  title: "Design System/Components/FileInput/Upload",
+  component: UploadInput,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof UploadInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof UploadInput>;
+
+export const Upload: Story = {
+  args: {
+    name: "upload",
+    variant: "upload",
+    accept: ".pdf,.doc,.docx",
+    placeholder: "파일 업로드하기",
+    file, // File 객체 전달
+  },
+};
diff --git a/src/app/stories/design-system/components/input/image/ImageInput.stories.tsx b/src/app/stories/design-system/components/input/image/ImageInput.stories.tsx
new file mode 100644
index 00000000..d7d3bf7b
--- /dev/null
+++ b/src/app/stories/design-system/components/input/image/ImageInput.stories.tsx
@@ -0,0 +1,20 @@
+import ImageInput from "@/app/components/input/file/ImageInput/ImageInput";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Design System/Components/FileInput",
+  component: ImageInput,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof ImageInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof ImageInput>;
+
+export const Upload_Image: Story = {
+  args: {
+    name: "uploadImage",
+  },
+};
diff --git a/src/app/stories/design-system/components/input/image/ImageInputPlaceHolder.stories.tsx b/src/app/stories/design-system/components/input/image/ImageInputPlaceHolder.stories.tsx
new file mode 100644
index 00000000..aa254d6f
--- /dev/null
+++ b/src/app/stories/design-system/components/input/image/ImageInputPlaceHolder.stories.tsx
@@ -0,0 +1,31 @@
+import ImageInputPlaceHolder from "@/app/components/input/file/ImageInput/ImageInputPlaceHolder";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Design System/Components/FileInput",
+  component: ImageInputPlaceHolder,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof ImageInputPlaceHolder>;
+
+export default meta;
+
+type Story = StoryObj<typeof ImageInputPlaceHolder>;
+
+export const UploadImagePlaceHolder: Story = {
+  args: {
+    onImageUpload: async (file) => {
+      // Mock image upload function
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(URL.createObjectURL(file)); // Returns a mock URL
+        }, 1000);
+      });
+    },
+    onImagesChange: (images) => {
+      // Log the image list for demonstration
+      console.log("Images changed:", images);
+    },
+  },
+};
diff --git a/src/app/stories/design-system/components/input/picker/DatePicker.stories.tsx b/src/app/stories/design-system/components/input/picker/DatePicker.stories.tsx
new file mode 100644
index 00000000..153d5913
--- /dev/null
+++ b/src/app/stories/design-system/components/input/picker/DatePicker.stories.tsx
@@ -0,0 +1,37 @@
+import DatePickerInput from "@/app/components/input/dateTimeDaypicker/DatePickerInput";
+import "react-datepicker/dist/react-datepicker.css";
+import { Meta, StoryObj } from "@storybook/react";
+import { FormProvider, useForm } from "react-hook-form";
+
+const meta = {
+  title: "Design System/Components/Date-Time-Day Picker/DatePicker",
+  component: DatePickerInput,
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => {
+      const methods = useForm();
+      return (
+        <FormProvider {...methods}>
+          <Story />
+        </FormProvider>
+      );
+    },
+  ],
+} satisfies Meta<typeof DatePickerInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof DatePickerInput>;
+
+export const DatePicker: Story = {
+  render: () => (
+    <DatePickerInput
+      startDateName="startDate"
+      endDateName="endDate"
+      displayValue="2024.01.02 ~ 2024.03.03"
+      onChange={() => {}}
+    />
+  ),
+};
diff --git a/src/app/stories/design-system/components/input/picker/DayPicker.stories.tsx b/src/app/stories/design-system/components/input/picker/DayPicker.stories.tsx
new file mode 100644
index 00000000..268e2333
--- /dev/null
+++ b/src/app/stories/design-system/components/input/picker/DayPicker.stories.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import DayPickerList from "@/app/components/input/dateTimeDaypicker/DayPickerList";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Design System/Components/Date-Time-Day Picker/DayPicker",
+  component: DayPickerList,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof DayPickerList>;
+
+export default meta;
+
+type Story = StoryObj<typeof DayPickerList>;
+
+export const DayPicker: Story = {
+  args: {},
+  render: () => {
+    const StoryComponent = () => {
+      const [selectedDays, setSelectedDays] = useState<string[]>(["월", "화"]);
+
+      const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        const day = e.currentTarget.textContent || "";
+        setSelectedDays((prev) => (prev.includes(day) ? prev.filter((d) => d !== day) : [...prev, day]));
+      };
+
+      return (
+        <>
+          <div className="text-grayscale-600 my-4">요일 선택 (토글)</div>
+          <DayPickerList workDays={selectedDays} onClick={handleClick} disabled={true} />
+          <div className="mt-4">
+            <strong>Selected Days:</strong> {selectedDays.join(", ") || "None"}
+          </div>
+        </>
+      );
+    };
+
+    return <StoryComponent />;
+  },
+};
diff --git a/src/app/stories/design-system/components/input/picker/TimePicker.stories.tsx b/src/app/stories/design-system/components/input/picker/TimePicker.stories.tsx
new file mode 100644
index 00000000..89d095b7
--- /dev/null
+++ b/src/app/stories/design-system/components/input/picker/TimePicker.stories.tsx
@@ -0,0 +1,29 @@
+import TimePickerInput from "@/app/components/input/dateTimeDaypicker/TimePickerInput";
+import { Meta, StoryObj } from "@storybook/react";
+import { FormProvider, useForm } from "react-hook-form";
+
+const meta = {
+  title: "Design System/Components/Date-Time-Day Picker/TimePicker",
+  component: TimePickerInput,
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => {
+      const methods = useForm();
+      return (
+        <FormProvider {...methods}>
+          <Story />
+        </FormProvider>
+      );
+    },
+  ],
+} satisfies Meta<typeof TimePickerInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof TimePickerInput>;
+
+export const TimePicker: Story = {
+  args: {},
+};
diff --git a/src/app/stories/design-system/components/input/text/Input.stories.tsx b/src/app/stories/design-system/components/input/text/Input.stories.tsx
new file mode 100644
index 00000000..b7b07c75
--- /dev/null
+++ b/src/app/stories/design-system/components/input/text/Input.stories.tsx
@@ -0,0 +1,95 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { BaseInputProps } from "@/types/textInput";
+import BaseInput from "@/app/components/input/text/BaseInput";
+
+type StoryProps = BaseInputProps & {
+  _storySize?: "mobile" | "desktop";
+};
+
+const meta = {
+  title: "Design System/Components/TextInput/TextInput",
+  component: BaseInput,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "radio",
+      options: ["white", "transparent"],
+    },
+    type: {
+      control: "radio",
+      options: ["text", "password"],
+    },
+    _storySize: {
+      control: "radio",
+      options: ["mobile", "desktop"],
+      description: "입력창 크기 설정",
+    },
+    disabled: {
+      control: "boolean",
+    },
+  },
+} satisfies Meta<StoryProps>;
+
+export default meta;
+
+const storySizeMap = {
+  mobile: "w-[327px] h-[54px]",
+  desktop: "lg:w-[640px] lg:h-[64px]",
+};
+
+type Story = StoryObj<typeof BaseInput>;
+export const Default_Hover_Focus: Story = {
+  args: {
+    type: "text",
+    variant: "white",
+    placeholder: "텍스트 입력",
+  },
+  render: (args) => {
+    const { _storySize, ...rest } = args as StoryProps;
+    const sizeClass = _storySize ? storySizeMap[_storySize] : "";
+
+    const StoryComponent = () => <BaseInput {...rest} size={sizeClass} />;
+
+    return (
+      <div className="space-y-4">
+        <div>
+          <p className="mb-2 text-sm text-grayscale-500">기본 상태:</p>
+          <StoryComponent />
+        </div>
+        <div>
+          <p className="mb-2 text-sm text-grayscale-500">Hover 상태:</p>
+          <div className="[&>div>div]:border-grayscale-200 [&>div>div]:bg-background-300">
+            <StoryComponent />
+          </div>
+        </div>
+        <div>
+          <p className="mb-2 text-sm text-grayscale-500">Focus 상태:</p>
+          <div className="[&>div>div]:border-primary-orange-300">
+            <StoryComponent />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Error: Story = {
+  args: {
+    type: "text",
+    variant: "white",
+    placeholder: "텍스트 입력",
+    errormessage: "에러 메시지",
+  },
+};
+
+export const Feedback: Story = {
+  args: {
+    type: "text",
+    variant: "white",
+    placeholder: "텍스트 입력",
+    feedbackMessage: "피드백 메시지",
+  },
+};
diff --git a/src/app/stories/design-system/components/input/text/LocationInput.stories.tsx b/src/app/stories/design-system/components/input/text/LocationInput.stories.tsx
new file mode 100644
index 00000000..6962bc90
--- /dev/null
+++ b/src/app/stories/design-system/components/input/text/LocationInput.stories.tsx
@@ -0,0 +1,48 @@
+import LocationInput from "@/app/components/input/text/LocationInput";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Design System/Components/TextInput/LocationInput",
+  component: LocationInput,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: { name: "location", type: "text", placeholder: "위치를 입력해주세요." },
+  argTypes: {
+    errormessage: {
+      description: "에러 메시지를 표시합니다",
+      control: "text",
+    },
+    feedbackMessage: {
+      description: "피드백 메시지를 표시합니다",
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof LocationInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof LocationInput>;
+
+export const Location: Story = {
+  args: { name: "location", placeholder: "위치를 입력해주세요." },
+  argTypes: {
+    errormessage: {
+      description: "에러 메시지를 표시합니다",
+      control: "text",
+    },
+    feedbackMessage: {
+      description: "피드백 메시지를 표시합니다",
+      control: "text",
+    },
+  },
+};
+
+export const error: Story = {
+  args: { errormessage: "잘못된 주소입니다." },
+};
+
+export const feedback: Story = {
+  args: { feedbackMessage: "가게 위치를 필수로 설정해주세요." },
+};
diff --git a/src/app/stories/design-system/components/input/text/SearchInput.stories.tsx b/src/app/stories/design-system/components/input/text/SearchInput.stories.tsx
new file mode 100644
index 00000000..17f37ecf
--- /dev/null
+++ b/src/app/stories/design-system/components/input/text/SearchInput.stories.tsx
@@ -0,0 +1,52 @@
+import SearchInput from "@/app/components/input/text/SearchInput";
+import { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+const meta = {
+  title: "Design System/Components/TextInput/SearchInput",
+  component: SearchInput,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    value: {
+      description: "검색어 값",
+      control: "text",
+    },
+    placeholder: {
+      description: "플레이스홀더 텍스트",
+      control: "text",
+    },
+    className: {
+      description: "추가 스타일 클래스",
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof SearchInput>;
+
+export default meta;
+type Story = StoryObj<typeof SearchInput>;
+
+// 상호작용을 위한 래퍼 컴포넌트
+const SearchInputWithHooks = (args: Story["args"]) => {
+  const [value, setValue] = useState("");
+  return <SearchInput {...args} value={value} onChange={(e) => setValue(e.target.value)} />;
+};
+
+export const Default: Story = {
+  render: (args) => <SearchInputWithHooks {...args} />,
+};
+
+export const WithPlaceholder: Story = {
+  render: (args) => <SearchInputWithHooks {...args} />,
+  args: {
+    placeholder: "검색어를 입력하세요",
+  },
+};
+
+export const WithCustomStyle: Story = {
+  render: (args) => <SearchInputWithHooks {...args} />,
+  args: {
+    className: "bg-gray-100",
+  },
+};
diff --git a/src/app/stories/design-system/components/input/text/TextArea.stories.tsx b/src/app/stories/design-system/components/input/text/TextArea.stories.tsx
new file mode 100644
index 00000000..2317f522
--- /dev/null
+++ b/src/app/stories/design-system/components/input/text/TextArea.stories.tsx
@@ -0,0 +1,86 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { BaseTextAreaProps } from "@/types/textInput";
+import BaseTextArea from "@/app/components/input/textarea/BaseTextArea";
+
+type StoryProps = BaseTextAreaProps & {
+  _storySize?: "mobile" | "desktop";
+};
+const meta = {
+  title: "Design System/Components/TextInput/TextArea",
+  component: BaseTextArea,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    placeholder:
+      "값을 입력해보세요. hover, focus 테스트를 해보세요. 브라우저 창 크기를 줄이면 반응형 디자인을 확인할 수 있습니다.",
+    disabled: false,
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: { control: "radio", options: ["white", "transparent"], defaultValue: "white" },
+    _storySize: {
+      control: "radio",
+      options: ["mobile", "desktop"],
+      description: "스토리북 전용 사이즈 옵션",
+    },
+  },
+} satisfies Meta<StoryProps>;
+
+export default meta;
+// 스토리북 전용 사이즈 매핑
+const storySizeMap = {
+  mobile: "w-[327px] h-[132px]",
+  desktop: "lg:w-[640px] lg:h-[160px]",
+};
+
+type Story = StoryObj<typeof BaseTextArea>;
+
+export const Default_Hover_Focus: Story = {
+  args: {
+    variant: "white",
+  },
+  render: (args) => {
+    const { _storySize, ...rest } = args as StoryProps;
+    const sizeClass = _storySize ? storySizeMap[_storySize] : undefined;
+
+    const StoryComponent = () => <BaseTextArea {...rest} size={sizeClass} />;
+
+    return (
+      <div className="space-y-4">
+        <div>
+          <p className="mb-2 text-sm text-grayscale-500">기본 상태:</p>
+          <StoryComponent />
+        </div>
+        <div>
+          <p className="mb-2 text-sm text-grayscale-500">Hover 상태:</p>
+          <div className="[&>div]:bg-background200 [&>div]:border-grayscale-200">
+            <StoryComponent />
+          </div>
+        </div>
+        <div>
+          <p className="mb-2 text-sm text-grayscale-500">Focus 상태:</p>
+          <div className="[&>div]:border-grayscale-400">
+            <StoryComponent />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const textArea_with_error: Story = {
+  args: {
+    variant: "white",
+    placeholder: "에러 상태 테스트",
+    errormessage: "가게 이름(상호명)을 필수로 입력해주세요",
+  },
+  render: (args) => {
+    const { _storySize, ...rest } = args as StoryProps;
+    const sizeClass = _storySize ? storySizeMap[_storySize] : undefined;
+
+    const StoryComponent = () => <BaseTextArea {...rest} size={sizeClass} />;
+
+    return <StoryComponent />;
+  },
+};
diff --git a/src/app/stories/design-system/components/layout/Header.tsx b/src/app/stories/design-system/components/layout/Header.tsx
new file mode 100644
index 00000000..43fb4e76
--- /dev/null
+++ b/src/app/stories/design-system/components/layout/Header.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { cn } from "@/lib/tailwindUtil";
+
+export default function Header() {
+  const getLinkClassName = (path: string) => {
+    return cn(
+      "font-medium transition-colors h-16 flex items-center",
+      "hover:text-lime-900",
+      "text-lime-700 text-sm sm:text-base"
+    );
+  };
+
+  return (
+    <header className="fixed left-0 right-0 top-0 z-50 bg-lime-100 -tracking-widest md:tracking-normal">
+      <div className="container mx-auto px-4">
+        <nav className="flex h-16 items-center justify-between">
+          {/* 로고와 메인 네비게이션 */}
+          <div className="flex items-center">
+            <Link href="/" className="text-xl text-white hover:text-blue-100">
+              <Image
+                src="/logo.svg"
+                alt="Work Root Logo"
+                width={200}
+                height={60}
+                className="w-32 hover:opacity-90 sm:w-40 md:w-[200px]"
+              />
+            </Link>
+
+            <div className="ml-4 flex h-16 space-x-2 sm:ml-6 sm:space-x-4 md:ml-10 md:space-x-6">
+              <Link href="/albalist" className={getLinkClassName("/albalist")}>
+                알바 목록
+              </Link>
+              <Link href="/albatalk" className={getLinkClassName("/albatalk")}>
+                알바 토크
+              </Link>
+              <Link href="/myalbaform" className={getLinkClassName("/myalbaform")}>
+                내 알바폼
+              </Link>
+            </div>
+          </div>
+
+          {/* 로그인/회원가입 버튼 */}
+          <ul className="flex items-center space-x-2 sm:space-x-4 md:space-x-6">
+            <li className="flex items-center">
+              <Link
+                href="/login"
+                className="rounded-lg border-2 border-lime-700 px-2 py-1 text-sm text-lime-700 transition-colors hover:bg-lime-700 hover:text-white sm:px-3 sm:py-1.5 sm:text-base md:px-4 md:py-2"
+              >
+                로그인
+              </Link>
+            </li>
+            <li className="flex items-center">
+              <Link
+                href="/signup"
+                className="rounded-lg bg-lime-700 px-2 py-1 text-sm font-semibold text-white transition-colors hover:bg-lime-800 sm:px-3 sm:py-1.5 sm:text-base md:px-4 md:py-2"
+              >
+                회원가입
+              </Link>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+}
diff --git a/src/app/stories/design-system/components/layout/SearchSection.tsx b/src/app/stories/design-system/components/layout/SearchSection.tsx
new file mode 100644
index 00000000..808b5fed
--- /dev/null
+++ b/src/app/stories/design-system/components/layout/SearchSection.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { useState } from "react";
+import SearchInput from "@/app/components/input/text/SearchInput";
+
+export default function SearchSection() {
+  const [keyword, setKeyword] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // 스토리북에서는 실제 검색 기능을 수행하지 않습니다
+    console.log("Search keyword:", keyword);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="w-full">
+      <div className="mx-auto flex items-center justify-between gap-4">
+        <div className="w-[270px] md:w-[500px] lg:w-[700px] xl:w-[900px] 2xl:w-[1100px]">
+          <SearchInput
+            value={keyword}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setKeyword(e.target.value)}
+            className="h-10 w-full bg-background-200 hover:bg-background-300"
+          />
+        </div>
+        <button
+          type="submit"
+          className="rounded-lg bg-[#FFB800] px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-[#FFA800] md:px-8 md:text-base lg:px-12 lg:text-lg xl:px-16 xl:text-xl"
+        >
+          검색
+        </button>
+      </div>
+    </form>
+  );
+}
diff --git a/src/app/stories/design-system/components/layout/SortSection.tsx b/src/app/stories/design-system/components/layout/SortSection.tsx
new file mode 100644
index 00000000..157d3a07
--- /dev/null
+++ b/src/app/stories/design-system/components/layout/SortSection.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import React from "react";
+import FilterDropdown from "@/app/components/button/dropdown/FilterDropdown";
+import { formSortOptions } from "@/constants/formOptions";
+
+const SORT_OPTIONS = [
+  { label: "최신순", value: formSortOptions.MOST_RECENT },
+  { label: "시급높은순", value: formSortOptions.HIGHEST_WAGE },
+  { label: "지원자 많은순", value: formSortOptions.MOST_APPLIED },
+  { label: "스크랩 많은순", value: formSortOptions.MOST_SCRAPPED },
+];
+
+export default function StorySortSection() {
+  const currentLabel = SORT_OPTIONS[0].label;
+
+  const handleSortChange = (selected: string) => {
+    const option = SORT_OPTIONS.find((opt) => opt.label === selected);
+    if (option) {
+      console.log("Sort changed to:", option.value);
+    }
+  };
+
+  return (
+    <FilterDropdown
+      options={SORT_OPTIONS.map((option) => option.label)}
+      className="!w-28 md:!w-40"
+      initialValue={currentLabel}
+      onChange={handleSortChange}
+    />
+  );
+}
diff --git a/src/app/stories/design-system/components/modal/ModalLayout.stories.tsx b/src/app/stories/design-system/components/modal/ModalLayout.stories.tsx
new file mode 100644
index 00000000..6cfd895a
--- /dev/null
+++ b/src/app/stories/design-system/components/modal/ModalLayout.stories.tsx
@@ -0,0 +1,155 @@
+import ModalLayout from "@/app/components/modal/ModalLayout";
+import useModalStore from "@/store/modalStore";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof ModalLayout> = {
+  title: "Design System/Components/Modal/ModalLayout",
+  component: ModalLayout,
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="bg-white">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ModalLayout>;
+
+const ModalTester = () => {
+  const { openModal } = useModalStore();
+
+  const modalButtons = [
+    {
+      label: "내 지원 내역",
+      type: "detail",
+      onClick: () =>
+        openModal("applicationDetail", {
+          id: "123",
+          title: "지원서 상세",
+          applicationDate: "2024-03-21 14:30",
+          applicationStatus: "서류 검토중",
+          name: "홍길동",
+          phone: "010-1234-5678",
+          password: "••••••••",
+        }),
+    },
+    {
+      label: "이어쓰기",
+      type: "alert",
+      onClick: () =>
+        openModal("formContinue", {
+          title: "작성 중인 지원서",
+          message: "이어서 작성하시겠습니까?",
+          buttonText: "이어서 작성하기",
+          onButtonClick: () => console.log("이어서 작성하기 클릭"),
+        }),
+    },
+    {
+      label: "모집 마감",
+      type: "alert",
+      onClick: () =>
+        openModal("recruitmentClosed", {
+          title: "모집 완료",
+          message: "해당 공고는 모집이 완료되었습니다.",
+          buttonText: "확인",
+          onButtonClick: () => console.log("확인 클릭"),
+        }),
+    },
+    {
+      label: "알바폼 삭제",
+      type: "confirm",
+      onClick: () =>
+        openModal("deleteForm", {
+          id: "123",
+          isOpen: true,
+          title: "알바폼 삭제할까요?",
+          message: "삭제 후 정보를 복구할 수 없어요.",
+          onConfirm: () => console.log("삭제 확인"),
+          onCancel: () => console.log("삭제 취소"),
+        }),
+    },
+    {
+      label: "진행상태 선택",
+      type: "confirm",
+      onClick: () =>
+        openModal("selectProgress", {
+          id: "123",
+          isOpen: true,
+          title: "진행상태 선택",
+          message: "현재 진행상태를 알려주세요.",
+          onConfirm: () => console.log("상태 변경 확인"),
+          onCancel: () => console.log("상태 변경 취소"),
+        }),
+    },
+    {
+      label: "비밀번호 변경",
+      type: "form",
+      onClick: () =>
+        openModal("changePassword", {
+          fields: ["현재 비밀번호", "새 비밀번호", "새 비밀번호 확인"],
+          onSubmit: (data) => console.log("비밀번호 변경:", data),
+        }),
+    },
+    {
+      label: "내 정보 수정",
+      type: "form",
+      onClick: () =>
+        openModal("editMyProfile", {
+          fields: ["이름", "이메일", "전화번호"],
+          onSubmit: (data) => console.log("내 정보 수정:", data),
+        }),
+    },
+    {
+      label: "사장님 정보 관리",
+      type: "form",
+      onClick: () =>
+        openModal("editOwnerProfile", {
+          fields: ["상호명", "대표자명", "사업자등록번호"],
+          onSubmit: (data) => console.log("사장님 정보 관리:", data),
+        }),
+    },
+  ];
+
+  const buttonStyles = {
+    detail: "bg-primary-blue-200 hover:bg-primary-blue-300",
+    alert: "bg-primary-orange-200 hover:bg-primary-orange-300",
+    confirm: "bg-state-error hover:bg-state-error/90",
+    form: "bg-primary-blue-100 hover:bg-primary-blue-200",
+  };
+
+  return (
+    <div className="mx-auto max-w-4xl rounded-lg bg-background-100 p-8 shadow-lg">
+      <div className="mb-8 space-y-4">
+        <h2 className="text-xl font-bold text-black-400">모달 테스트</h2>
+        <div className="grid grid-cols-2 gap-4 md:grid-cols-3">
+          {modalButtons.map((button, index) => (
+            <button
+              type="button"
+              key={index}
+              onClick={button.onClick}
+              className={`rounded-md px-4 py-2 text-sm text-white transition-colors ${
+                buttonStyles[button.type as keyof typeof buttonStyles]
+              }`}
+            >
+              {button.label}
+            </button>
+          ))}
+        </div>
+      </div>
+      <ModalLayout />
+    </div>
+  );
+};
+
+export const ModalTest: Story = {
+  render: () => (
+    <div className="min-h-[600px] bg-background-200 p-4">
+      <ModalTester />
+    </div>
+  ),
+};
diff --git a/src/app/stories/design-system/components/modal/alert/ApplicationDetailModal.stories.tsx b/src/app/stories/design-system/components/modal/alert/ApplicationDetailModal.stories.tsx
new file mode 100644
index 00000000..df609c49
--- /dev/null
+++ b/src/app/stories/design-system/components/modal/alert/ApplicationDetailModal.stories.tsx
@@ -0,0 +1,26 @@
+import ApplicationDetailModal from "@/app/components/modal/modals/alert/ApplicationDetailModal";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof ApplicationDetailModal> = {
+  title: "Design System/Components/Modal/Modals/ApplicationDetailModal",
+  component: ApplicationDetailModal,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ApplicationDetailModal>;
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    formId: "123",
+    applicationDate: "2024-03-21 14:30",
+    applicationStatus: "서류 검토중",
+    name: "홍길동",
+    phone: "010-1234-5678",
+    password: "••••••••",
+    onClose: () => console.log("모달 닫기"),
+  },
+};
diff --git a/src/app/stories/design-system/components/modal/alert/FormContinueModal.stories.tsx b/src/app/stories/design-system/components/modal/alert/FormContinueModal.stories.tsx
new file mode 100644
index 00000000..4e911d8b
--- /dev/null
+++ b/src/app/stories/design-system/components/modal/alert/FormContinueModal.stories.tsx
@@ -0,0 +1,20 @@
+import FormContinueModal from "@/app/components/modal/modals/alert/FormContinueModal";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof FormContinueModal> = {
+  title: "Design System/Components/Modal/Modals/FormContinueModal",
+  component: FormContinueModal,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FormContinueModal>;
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    onClose: () => console.log("모달 닫기"),
+  },
+};
diff --git a/src/app/stories/design-system/components/modal/alert/RecruitmentClosedModal.stories.tsx b/src/app/stories/design-system/components/modal/alert/RecruitmentClosedModal.stories.tsx
new file mode 100644
index 00000000..11679ac0
--- /dev/null
+++ b/src/app/stories/design-system/components/modal/alert/RecruitmentClosedModal.stories.tsx
@@ -0,0 +1,20 @@
+import RecruitmentClosedModal from "@/app/components/modal/modals/alert/RecruitmentClosedModal";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof RecruitmentClosedModal> = {
+  title: "Design System/Components/Modal/Modals/RecruitmentClosedModal",
+  component: RecruitmentClosedModal,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RecruitmentClosedModal>;
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    onClose: () => console.log("모달 닫기"),
+  },
+};
diff --git a/src/app/stories/design-system/components/modal/confirm/CustomFormModal.stories.tsx b/src/app/stories/design-system/components/modal/confirm/CustomFormModal.stories.tsx
new file mode 100644
index 00000000..6d4e4779
--- /dev/null
+++ b/src/app/stories/design-system/components/modal/confirm/CustomFormModal.stories.tsx
@@ -0,0 +1,99 @@
+import CustomFormModal from "@/app/components/modal/modals/confirm/CustomFormModal";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof CustomFormModal> = {
+  title: "Design System/Components/Modal/Modals/CustomFormModal",
+  component: CustomFormModal,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    title: { control: "text" },
+    content: { control: "text" },
+    confirmText: { control: "text" },
+    cancelText: { control: "text" },
+    isOpen: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CustomFormModal>;
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    title: "작업을 진행하시겠습니까?",
+    content: "이 작업은 되돌릴 수 없습니다.",
+    confirmText: "확인",
+    cancelText: "취소",
+    onConfirm: () => console.log("확인 클릭"),
+    onCancel: () => console.log("취소 클릭"),
+    className: "",
+  },
+};
+
+export const Processing: Story = {
+  args: {
+    ...Default.args,
+  },
+};
+
+export const CustomText: Story = {
+  args: {
+    ...Default.args,
+    title: "회원 탈퇴",
+    content: "정말로 탈퇴하시겠습니까?",
+    confirmText: "탈퇴하기",
+    cancelText: "다시 생각해볼게요",
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    ...Default.args,
+    title: "중요 안내",
+    content: "이 작업은 시스템에 큰 영향을 미칠 수 있습니다. 신중하게 결정해주시기 바랍니다. 계속 진행하시겠습니까?",
+    confirmText: "계속 진행",
+    cancelText: "돌아가기",
+  },
+};
+
+export const SignupTypeSelection: Story = {
+  args: {
+    ...Default.args,
+    title: "회원 유형 선택",
+    content: "가입하실 회원 유형을 선택해주세요.",
+    confirmText: "지원자로 가입",
+    cancelText: "사장님으로 가입",
+  },
+};
+
+export const SignupCompletion: Story = {
+  args: {
+    ...Default.args,
+    title: "회원가입 완료",
+    content: "회원가입이 완료되었습니다. 메인 페이지로 이동하시겠습니까?",
+    confirmText: "메인으로 이동",
+    cancelText: "로그인 페이지로 이동",
+  },
+};
+
+export const ApplicationSubmit: Story = {
+  args: {
+    ...Default.args,
+    title: "지원서 제출",
+    content: "작성하신 지원서를 제출하시겠습니까? 제출 후에는 수정이 불가능합니다.",
+    confirmText: "제출하기",
+    cancelText: "다시 검토하기",
+  },
+};
+
+export const StoreRegistration: Story = {
+  args: {
+    ...Default.args,
+    title: "가게 등록",
+    content: "입력하신 정보로 가게를 등록하시겠습니까? 등록 후 수정이 가능합니다.",
+    confirmText: "가게 등록하기",
+    cancelText: "정보 수정하기",
+  },
+};
diff --git a/src/app/stories/design-system/components/modal/confirm/DeleteFormModal.stories.tsx b/src/app/stories/design-system/components/modal/confirm/DeleteFormModal.stories.tsx
new file mode 100644
index 00000000..c33ff108
--- /dev/null
+++ b/src/app/stories/design-system/components/modal/confirm/DeleteFormModal.stories.tsx
@@ -0,0 +1,23 @@
+import DeleteFormModal from "@/app/components/modal/modals/confirm/DeleteFormModal";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof DeleteFormModal> = {
+  title: "Design System/Components/Modal/Modals/DeleteFormModal",
+  component: DeleteFormModal,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DeleteFormModal>;
+
+export const Default: Story = {
+  args: {
+    id: "123",
+    isOpen: true,
+    onClose: () => console.log("모달 닫기"),
+    onConfirm: () => console.log("삭제 확인"),
+    className: "",
+  },
+};
diff --git a/src/app/stories/design-system/components/modal/confirm/SelectProgressModal.stories.tsx b/src/app/stories/design-system/components/modal/confirm/SelectProgressModal.stories.tsx
new file mode 100644
index 00000000..7d976900
--- /dev/null
+++ b/src/app/stories/design-system/components/modal/confirm/SelectProgressModal.stories.tsx
@@ -0,0 +1,23 @@
+import SelectProgressModal from "@/app/components/modal/modals/confirm/SelectProgressModal";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof SelectProgressModal> = {
+  title: "Design System/Components/Modal/Modals/SelectProgressModal",
+  component: SelectProgressModal,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SelectProgressModal>;
+
+export const Default: Story = {
+  args: {
+    id: "123",
+    isOpen: true,
+    onClose: () => console.log("모달 닫기"),
+    onConfirm: () => console.log("상태 변경 확인"),
+    className: "",
+  },
+};
diff --git a/src/app/stories/design-system/components/modal/form/ChangePasswordModal.stories.tsx b/src/app/stories/design-system/components/modal/form/ChangePasswordModal.stories.tsx
new file mode 100644
index 00000000..e2205101
--- /dev/null
+++ b/src/app/stories/design-system/components/modal/form/ChangePasswordModal.stories.tsx
@@ -0,0 +1,49 @@
+import ChangePasswordModal from "@/app/components/modal/modals/form/ChangePasswordModal";
+import type { Meta, StoryObj } from "@storybook/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+
+// React Query 클라이언트 생성
+const queryClient = new QueryClient();
+
+// Next.js Router 모킹
+const MockNextRouter = ({ children }: { children: React.ReactNode }) => {
+  const mockRouter = {
+    push: () => Promise.resolve(),
+    refresh: () => Promise.resolve(),
+    prefetch: () => Promise.resolve(),
+    replace: () => Promise.resolve(),
+  };
+
+  // @ts-expect-error - 스토리북 테스트용 모킹
+  useRouter.mockImplementation(() => mockRouter);
+
+  return <>{children}</>;
+};
+
+const meta: Meta<typeof ChangePasswordModal> = {
+  title: "Design System/Components/Modal/Modals/ChangePasswordModal",
+  component: ChangePasswordModal,
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <MockNextRouter>
+        <QueryClientProvider client={queryClient}>
+          <Story />
+        </QueryClientProvider>
+      </MockNextRouter>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ChangePasswordModal>;
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    onClose: () => console.log("모달 닫기"),
+  },
+};
diff --git a/src/app/stories/design-system/components/modal/form/EditMyProfileModal.stories.tsx b/src/app/stories/design-system/components/modal/form/EditMyProfileModal.stories.tsx
new file mode 100644
index 00000000..3e4512ba
--- /dev/null
+++ b/src/app/stories/design-system/components/modal/form/EditMyProfileModal.stories.tsx
@@ -0,0 +1,20 @@
+import EditMyProfileModal from "@/app/components/modal/modals/form/EditMyProfileModal";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof EditMyProfileModal> = {
+  title: "Design System/Components/Modal/Modals/EditMyProfileModal",
+  component: EditMyProfileModal,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EditMyProfileModal>;
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    onClose: () => console.log("모달 닫기"),
+  },
+};
diff --git a/src/app/stories/design-system/components/modal/form/EditOwnerProfileModal.stories.tsx b/src/app/stories/design-system/components/modal/form/EditOwnerProfileModal.stories.tsx
new file mode 100644
index 00000000..4a1397b8
--- /dev/null
+++ b/src/app/stories/design-system/components/modal/form/EditOwnerProfileModal.stories.tsx
@@ -0,0 +1,20 @@
+import EditOwnerProfileModal from "@/app/components/modal/modals/form/EditOwnerProfileModal";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof EditOwnerProfileModal> = {
+  title: "Design System/Components/Modal/Modals/EditOwnerProfileModal",
+  component: EditOwnerProfileModal,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EditOwnerProfileModal>;
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    onClose: () => console.log("모달 닫기"),
+  },
+};
diff --git a/src/app/stories/design-system/components/pagination/Indicator.stories.tsx b/src/app/stories/design-system/components/pagination/Indicator.stories.tsx
new file mode 100644
index 00000000..eec718f1
--- /dev/null
+++ b/src/app/stories/design-system/components/pagination/Indicator.stories.tsx
@@ -0,0 +1,55 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Indicator from "@/app/components/pagination/Indicator";
+import { useState } from "react";
+
+const meta = {
+  title: "Design System/Components/Pagination/Indicator",
+  component: Indicator,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Indicator>;
+
+export default meta;
+
+type Story = StoryObj<typeof Indicator>;
+
+// 상호작용 가능한 Indicator를 위한 래퍼 컴포넌트
+const IndicatorWrapper = ({ imageCount }: { imageCount: number }) => {
+  const [currentPage, setCurrentPage] = useState(0);
+
+  return <Indicator imageCount={imageCount} currentPage={currentPage} onPageChange={setCurrentPage} />;
+};
+
+// 3개 이미지 인디케이터
+export const ThreeImages: Story = {
+  render: () => <IndicatorWrapper imageCount={3} />,
+};
+
+// 5개 이미지 인디케이터
+export const FiveImages: Story = {
+  render: () => <IndicatorWrapper imageCount={5} />,
+};
+
+// 단일 이미지 인디케이터
+export const SingleImage: Story = {
+  render: () => <IndicatorWrapper imageCount={1} />,
+};
+
+// 많은 이미지 인디케이터
+export const ManyImages: Story = {
+  render: () => <IndicatorWrapper imageCount={8} />,
+};
+
+// 기본 Props로 렌더링되는 인디케이터
+export const Default: Story = {
+  render: () => <IndicatorWrapper imageCount={3} />,
+  parameters: {
+    docs: {
+      description: {
+        story: "기본적으로 3개의 인디케이터를 보여주며, 클릭하여 페이지를 변경할 수 있습니다.",
+      },
+    },
+  },
+};
diff --git a/src/app/stories/design-system/components/pagination/Pagination.stories.tsx b/src/app/stories/design-system/components/pagination/Pagination.stories.tsx
new file mode 100644
index 00000000..81776a56
--- /dev/null
+++ b/src/app/stories/design-system/components/pagination/Pagination.stories.tsx
@@ -0,0 +1,43 @@
+import "react-datepicker/dist/react-datepicker.css";
+import { Meta, StoryObj } from "@storybook/react";
+import Pagination from "@/app/components/pagination/Pagination";
+
+const meta = {
+  title: "Design System/Components/Pagination",
+  component: Pagination,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: "윈도우 너비에 따라 최대 페이지네이션 개수가 달라집니다. (mobile : 3 , desktop: 5)",
+      },
+    },
+  },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+
+type Story = StoryObj<typeof Pagination>;
+
+export const DefaultPagination: Story = {
+  args: {
+    totalPage: 8,
+    currentPage: 1,
+    onPageChange: (page: number) => console.log(`페이지 ${page}로 이동`),
+  },
+  argTypes: {
+    totalPage: {
+      control: { type: "number", min: 1, max: 100 },
+      description: "전체 페이지 수",
+    },
+    currentPage: {
+      control: { type: "number", min: 1 },
+      description: "현재 페이지",
+    },
+    onPageChange: {
+      action: "clicked",
+      description: "페이지 변경 핸들러",
+    },
+  },
+};
diff --git a/src/app/stories/design-system/components/pagination/PaginationCard.stories.tsx b/src/app/stories/design-system/components/pagination/PaginationCard.stories.tsx
new file mode 100644
index 00000000..1b62406d
--- /dev/null
+++ b/src/app/stories/design-system/components/pagination/PaginationCard.stories.tsx
@@ -0,0 +1,25 @@
+import "react-datepicker/dist/react-datepicker.css";
+import { Meta, StoryObj } from "@storybook/react";
+import PaginationCard from "@/app/components/pagination/PaginationCard";
+
+const meta = {
+  title: "Design System/Components/Pagination",
+  component: PaginationCard,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof PaginationCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof PaginationCard>;
+
+export const Card: Story = {
+  args: {
+    imageCount: 3,
+    selectedId: 1,
+  },
+  argTypes: {
+    selectedId: { control: "radio", options: [0, 1, 2] },
+  },
+};
diff --git a/src/app/stories/design-system/pages/albaList/mock/data.tsx b/src/app/stories/design-system/pages/albaList/mock/data.tsx
new file mode 100644
index 00000000..f930258b
--- /dev/null
+++ b/src/app/stories/design-system/pages/albaList/mock/data.tsx
@@ -0,0 +1,67 @@
+import { FormListType } from "@/types/response/form";
+
+const titles = [
+  "편의점 야간 알바 구합니다",
+  "주말 카페 알바 모집",
+  "피자집 배달 직원 구함",
+  "학원 사무보조 알바",
+  "서빙 알바 급구",
+  "물류센터 상하차",
+  "마트 진열 알바",
+  "영화관 매점 알바",
+  "호텔 룸메이드 모집",
+  "주차관리 알바",
+];
+
+const images = [
+  "https://images.unsplash.com/photo-1514933651103-005eec06c04b?q=80&w=1974&auto=format&fit=crop",
+  "https://images.unsplash.com/photo-1574126154517-d1e0d89ef734?q=80&w=1974&auto=format&fit=crop",
+  "https://images.unsplash.com/photo-1554118811-1e0d58224f24?q=80&w=2047&auto=format&fit=crop",
+  "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?q=80&w=2070&auto=format&fit=crop",
+  "https://images.unsplash.com/photo-1523242942815-1ba8fc07f592?q=80&w=2070&auto=format&fit=crop",
+];
+
+// 단일 알바 데이터 생성
+function generateMockForm(id: number): FormListType {
+  const now = new Date();
+  const startDate = new Date();
+  const endDate = new Date();
+
+  startDate.setDate(now.getDate() + Math.floor(Math.random() * 7));
+  endDate.setDate(startDate.getDate() + Math.floor(Math.random() * 30) + 7);
+
+  return {
+    id,
+    title: titles[Math.floor(Math.random() * titles.length)],
+    applyCount: Math.floor(Math.random() * 50),
+    scrapCount: Math.floor(Math.random() * 30),
+    recruitmentEndDate: endDate,
+    recruitmentStartDate: startDate,
+    imageUrls: [images[Math.floor(Math.random() * images.length)]],
+    isPublic: Math.random() > 0.2,
+    createdAt: now,
+    updatedAt: now,
+  } as FormListType;
+}
+
+// 전체 데이터 풀 생성 (100개)
+const TOTAL_ITEMS = 100;
+const mockDataPool = Array.from({ length: TOTAL_ITEMS }, (_, index) => generateMockForm(index + 1));
+
+// 무한 스크롤용 데이터 가져오기
+export function fetchMockData(page: number, limit: number = 10) {
+  const start = (page - 1) * limit;
+  const end = start + limit;
+  const hasMore = end < TOTAL_ITEMS;
+
+  return {
+    items: mockDataPool.slice(start, end),
+    hasMore,
+    nextPage: hasMore ? page + 1 : null,
+  };
+}
+
+// 초기 데이터 가져오기
+export function getInitialMockData(limit: number = 10) {
+  return fetchMockData(1, limit);
+}
diff --git a/src/app/stories/design-system/pages/albaList/page.stories.tsx b/src/app/stories/design-system/pages/albaList/page.stories.tsx
new file mode 100644
index 00000000..4c4f5110
--- /dev/null
+++ b/src/app/stories/design-system/pages/albaList/page.stories.tsx
@@ -0,0 +1,180 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import AlbaList from "./page";
+import { FormListType } from "@/types/response/form";
+import { fetchMockData, getInitialMockData } from "./mock/data";
+import React, { useState, useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+
+const meta = {
+  title: "Design System/Pages/AlbaList/Page",
+  component: AlbaList,
+  parameters: {
+    layout: "fullscreen",
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof AlbaList>;
+
+export default meta;
+type Story = StoryObj<typeof AlbaList>;
+
+// 무한 스크롤 기능을 가진 컨테이너 컴포넌트
+const InfiniteScrollContainer = () => {
+  const [items, setItems] = useState<FormListType[]>([]);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { ref, inView } = useInView({
+    threshold: 0,
+    rootMargin: "100px",
+  });
+
+  // 초기 데이터 로드
+  useEffect(() => {
+    const loadInitialData = async () => {
+      setIsLoading(true);
+      const initialData = getInitialMockData();
+      setItems(initialData.items);
+      setHasMore(initialData.hasMore);
+      setIsLoading(false);
+    };
+    loadInitialData();
+  }, []);
+
+  // 무한 스크롤 기능
+  useEffect(() => {
+    if (inView && hasMore && !isLoading) {
+      const loadMoreData = async () => {
+        setIsLoading(true);
+        await new Promise((resolve) => setTimeout(resolve, 800));
+        const nextData = fetchMockData(page + 1);
+        setItems((prev) => [...prev, ...nextData.items]);
+        setHasMore(nextData.hasMore);
+        setPage((prev) => prev + 1);
+        setIsLoading(false);
+      };
+      loadMoreData();
+    }
+  }, [inView, hasMore, page, isLoading]);
+
+  return <AlbaList mockData={[items]} isLoading={isLoading} onInView={() => {}} scrollRef={ref} />;
+};
+
+// 기본 기능 테스트
+export const Default: Story = {
+  render: () => (
+    <>
+      <InfiniteScrollContainer />
+    </>
+  ),
+};
+
+// 데바일 - 아이폰
+export const IPhone12: Story = {
+  render: () => (
+    <>
+      <InfiniteScrollContainer />
+    </>
+  ),
+  parameters: {
+    viewport: {
+      defaultViewport: "iphone12",
+    },
+  },
+};
+
+export const IPhone12Pro: Story = {
+  render: () => (
+    <>
+      <InfiniteScrollContainer />
+    </>
+  ),
+  parameters: {
+    viewport: {
+      defaultViewport: "iphone12promax",
+    },
+  },
+};
+
+// 데바일 - 갤럭시
+export const GalaxyS8: Story = {
+  render: () => (
+    <>
+      <InfiniteScrollContainer />
+    </>
+  ),
+  parameters: {
+    viewport: {
+      defaultViewport: "galaxys8",
+    },
+  },
+};
+
+export const GalaxyS20: Story = {
+  render: () => (
+    <>
+      <InfiniteScrollContainer />
+    </>
+  ),
+  parameters: {
+    viewport: {
+      defaultViewport: "galaxys20",
+    },
+  },
+};
+
+// 태블릿 - 아이패드
+export const IPadMini: Story = {
+  render: () => (
+    <>
+      <InfiniteScrollContainer />
+    </>
+  ),
+  parameters: {
+    viewport: {
+      defaultViewport: "ipadMini",
+    },
+  },
+};
+
+export const IPadAir: Story = {
+  render: () => (
+    <>
+      <InfiniteScrollContainer />
+    </>
+  ),
+  parameters: {
+    viewport: {
+      defaultViewport: "ipadAir",
+    },
+  },
+};
+
+export const IPadPro: Story = {
+  render: () => (
+    <>
+      <InfiniteScrollContainer />
+    </>
+  ),
+  parameters: {
+    viewport: {
+      defaultViewport: "ipadPro",
+    },
+  },
+};
+
+// 데스크톱 뷰
+export const Desktop: Story = {
+  render: () => (
+    <>
+      <InfiniteScrollContainer />
+    </>
+  ),
+  parameters: {
+    viewport: {
+      defaultViewport: "desktop",
+    },
+  },
+};
diff --git a/src/app/stories/design-system/pages/albaList/page.tsx b/src/app/stories/design-system/pages/albaList/page.tsx
new file mode 100644
index 00000000..3657a4f7
--- /dev/null
+++ b/src/app/stories/design-system/pages/albaList/page.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+import FilterDropdown from "@/app/components/button/dropdown/FilterDropdown";
+import { filterRecruitingOptions } from "@/constants/filterOptions";
+import { FormListType } from "@/types/response/form";
+import AlbaListItem from "@/app/components/card/cardList/AlbaListItem";
+import { fetchMockData, getInitialMockData } from "./mock/data";
+import StorySortSection from "@/app/stories/design-system/components/layout/SortSection";
+import StorySearchSection from "@/app/stories/design-system/components/layout/SearchSection";
+import Header from "@/app/stories/design-system/components/layout/Header";
+import Link from "next/link";
+import { IoAdd } from "react-icons/io5";
+import FloatingBtn from "@/app/components/button/default/FloatingBtn";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+import ContentSection from "@/app/components/layout/ContentSection";
+
+interface AlbaListProps {
+  mockData?: FormListType[][];
+  isLoading?: boolean;
+  onInView?: () => void;
+  scrollRef?: (node?: Element | null) => void;
+}
+
+const AlbaList: React.FC<AlbaListProps> = () => {
+  const [items, setItems] = useState<FormListType[]>([]);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { ref, inView } = useInView({
+    threshold: 0.1,
+    triggerOnce: false,
+    rootMargin: "100px",
+  });
+
+  // 초기 데이터 로드
+  useEffect(() => {
+    const loadInitialData = async () => {
+      setIsLoading(true);
+      const initialData = getInitialMockData();
+      setItems(initialData.items);
+      setHasMore(initialData.hasMore);
+      setIsLoading(false);
+    };
+    loadInitialData();
+  }, []);
+
+  // 무한 스크롤
+  useEffect(() => {
+    if (inView && hasMore && !isLoading) {
+      const loadMoreData = async () => {
+        setIsLoading(true);
+        await new Promise((resolve) => setTimeout(resolve, 800));
+        const nextData = fetchMockData(page + 1);
+        setItems((prev) => [...prev, ...nextData.items]);
+        setHasMore(nextData.hasMore);
+        setPage((prev) => prev + 1);
+        setIsLoading(false);
+      };
+      loadMoreData();
+    }
+  }, [inView, hasMore, page, isLoading]);
+
+  // 로딩 상태 처리
+  if (isLoading && items.length === 0) {
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <Header />
+      <div className="flex min-h-screen flex-col items-center">
+        {/* 검색 섹션과 필터 드롭다운을 고정 위치로 설 */}
+        <div className="fixed left-0 right-0 top-16 z-30 bg-white shadow-sm">
+          {/* 검색 섹션 */}
+          <div className="w-full border-b border-grayscale-100">
+            <div className="mx-auto flex max-w-screen-xl flex-col gap-4 px-4 py-4 md:px-6 lg:px-8">
+              <div className="flex items-center justify-between">
+                <StorySearchSection />
+              </div>
+            </div>
+          </div>
+
+          {/* 필터 드롭다운 섹션 */}
+          <div className="w-full border-b border-grayscale-100">
+            <div className="mx-auto flex max-w-screen-xl items-center justify-between gap-2 px-4 py-4 md:px-6 lg:px-8">
+              <FilterDropdown
+                options={filterRecruitingOptions.map((option) => option.label)}
+                initialValue="전체"
+                onChange={() => {}}
+              />
+              <div className="flex items-center gap-4">
+                <StorySortSection />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 메인 콘텐츠 영역 */}
+        <div className="w-full pt-[132px]">
+          {/* 폼 만들기 버튼 - 고정 위치 */}
+          <div className="fixed bottom-[50%] right-4 z-[9999] translate-y-1/2">
+            <Link
+              href="/addform"
+              className="flex items-center gap-2 rounded-lg bg-[#FFB800] px-4 py-3 text-base font-semibold text-white shadow-lg transition-all hover:bg-[#FFA800] md:px-6 md:text-lg"
+            >
+              <FloatingBtn icon={<IoAdd className="size-6" />} variant="orange">
+                폼 만들기
+              </FloatingBtn>
+            </Link>
+          </div>
+
+          {items.length === 0 ? (
+            <div className="flex h-[calc(100vh-200px)] flex-col items-center justify-center">
+              <p className="text-grayscale-500">등록된 알바 공고가 없습니다.</p>
+            </div>
+          ) : (
+            <div className="mx-auto mt-4 w-full max-w-screen-xl px-3">
+              <ContentSection>
+                {items.map((form) => (
+                  <div key={form.id}>
+                    <AlbaListItem {...form} />
+                  </div>
+                ))}
+              </ContentSection>
+
+              {/* 무한 스크롤 트리거 영역 */}
+              <div ref={ref} className="h-4 w-full">
+                {isLoading && (
+                  <div className="flex justify-center py-4">
+                    <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary-orange-300 border-t-transparent" />
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default AlbaList;
diff --git a/src/constants/config.ts b/src/constants/config.ts
index aa3ffd59..d8b8ccad 100644
--- a/src/constants/config.ts
+++ b/src/constants/config.ts
@@ -1,3 +1,5 @@
 export const API_URL = process.env.NEXT_PUBLIC_API_URL;
 
 export const TEAM_NAME = process.env.NEXT_PUBLIC_TEAM_ID;
+
+export const S3_URL = "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com";
diff --git a/src/constants/filterOptions.ts b/src/constants/filterOptions.ts
new file mode 100644
index 00000000..911cd296
--- /dev/null
+++ b/src/constants/filterOptions.ts
@@ -0,0 +1,11 @@
+export const filterPublicOptions = [
+  { label: "전체", value: null },
+  { label: "공개", value: true },
+  { label: "비공개", value: false },
+] as const;
+
+export const filterRecruitingOptions = [
+  { label: "전체", value: null },
+  { label: "모집중", value: true },
+  { label: "모집마감", value: false },
+] as const;
diff --git a/src/constants/formOptions.ts b/src/constants/formOptions.ts
new file mode 100644
index 00000000..dd23226b
--- /dev/null
+++ b/src/constants/formOptions.ts
@@ -0,0 +1,13 @@
+export const formSortOptions = {
+  MOST_RECENT: "mostRecent",
+  HIGHEST_WAGE: "highestWage",
+  MOST_APPLIED: "mostApplied",
+  MOST_SCRAPPED: "mostScrapped",
+} as const;
+
+export const formStatusOptions = {
+  REJECTED: "REJECTED",
+  INTERVIEW_PENDING: "INTERVIEW_PENDING",
+  INTERVIEW_COMPLETED: "INTERVIEW_COMPLETED",
+  HIRED: "HIRED",
+} as const;
diff --git a/src/constants/oauthProviders.ts b/src/constants/oauthProviders.ts
new file mode 100644
index 00000000..3d9cc8dc
--- /dev/null
+++ b/src/constants/oauthProviders.ts
@@ -0,0 +1,4 @@
+export const oauthProviders = {
+  GOOGLE: "google",
+  KAKAO: "kakao",
+} as const;
diff --git a/src/constants/positionOptions.ts b/src/constants/positionOptions.ts
new file mode 100644
index 00000000..684396d4
--- /dev/null
+++ b/src/constants/positionOptions.ts
@@ -0,0 +1,4 @@
+export const positionOptions = {
+  POSITION_LEFT: "left",
+  POSITION_RIGHT: "right",
+};
diff --git a/src/constants/postOptions.ts b/src/constants/postOptions.ts
new file mode 100644
index 00000000..aac59e66
--- /dev/null
+++ b/src/constants/postOptions.ts
@@ -0,0 +1,5 @@
+export const postSortOptions = {
+  MOST_RECENT: "mostRecent",
+  MOST_COMMENTED: "mostCommented",
+  MOST_LIKED: "mostLiked",
+} as const;
diff --git a/src/constants/userRoles.ts b/src/constants/userRoles.ts
new file mode 100644
index 00000000..819d282b
--- /dev/null
+++ b/src/constants/userRoles.ts
@@ -0,0 +1,4 @@
+export const userRoles = {
+  OWNER: "OWNER",
+  APPLICANT: "APPLICANT",
+} as const;
diff --git a/src/constants/workDayOptions.ts b/src/constants/workDayOptions.ts
new file mode 100644
index 00000000..0fe88580
--- /dev/null
+++ b/src/constants/workDayOptions.ts
@@ -0,0 +1,9 @@
+export const workDayOptions = {
+  MONDAY: "월",
+  TUESDAY: "화",
+  WEDNESDAY: "수",
+  THURSDAY: "목",
+  FRIDAY: "금",
+  SATURDAY: "토",
+  SUNDAY: "일",
+};
diff --git a/src/hooks/queries/auth/useLogin.ts b/src/hooks/queries/auth/useLogin.ts
new file mode 100644
index 00000000..479414fe
--- /dev/null
+++ b/src/hooks/queries/auth/useLogin.ts
@@ -0,0 +1,44 @@
+import { LoginSchema } from "@/schemas/authSchema";
+import { AuthResponse } from "@/types/response/auth";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import { useRouter } from "next/navigation";
+import { toast } from "react-hot-toast";
+
+export const useLogin = () => {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  const loginMutation = useMutation({
+    mutationFn: async (data: LoginSchema) => {
+      try {
+        const response = await axios.post<AuthResponse>("/api/auth/login", data, {
+          withCredentials: false,
+        });
+        return response.data;
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          throw new Error(error.response?.data?.message || "로그인 중 오류가 발생했습니다.");
+        }
+        throw error;
+      }
+    },
+    onSuccess: (data) => {
+      if (data?.user) {
+        queryClient.setQueryData(["user"], { user: data.user });
+        toast.success("로그인되었습니다!");
+        router.push("/");
+        router.refresh();
+      }
+    },
+    onError: (error: Error) => {
+      toast.error(error.message);
+    },
+  });
+
+  return {
+    login: (data: LoginSchema) => loginMutation.mutate(data),
+    isPending: loginMutation.isPending,
+    error: loginMutation.error,
+  };
+};
diff --git a/src/hooks/queries/auth/useLogout.ts b/src/hooks/queries/auth/useLogout.ts
new file mode 100644
index 00000000..46c3bb93
--- /dev/null
+++ b/src/hooks/queries/auth/useLogout.ts
@@ -0,0 +1,30 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import { useRouter } from "next/navigation";
+import { toast } from "react-hot-toast";
+
+export const useLogout = () => {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  const logoutMutation = useMutation({
+    mutationFn: async () => {
+      const response = await axios.post("/api/auth/logout");
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.clear();
+      router.push("/");
+      router.refresh();
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "로그아웃 중 오류가 발생했습니다.");
+    },
+  });
+
+  return {
+    logout: () => logoutMutation.mutate(),
+    isPending: logoutMutation.isPending,
+    error: logoutMutation.error,
+  };
+};
diff --git a/src/hooks/queries/auth/useRefreshToken.ts b/src/hooks/queries/auth/useRefreshToken.ts
new file mode 100644
index 00000000..4157a5b9
--- /dev/null
+++ b/src/hooks/queries/auth/useRefreshToken.ts
@@ -0,0 +1,27 @@
+import { useMutation } from "@tanstack/react-query";
+import axios from "axios";
+
+export const useRefreshToken = () => {
+  const refreshMutation = useMutation({
+    mutationFn: async () => {
+      try {
+        const response = await axios.post("/api/auth/refresh");
+        return response.data;
+      } catch (error) {
+        if (axios.isAxiosError(error) && error.response?.status === 400) {
+          return null;
+        }
+        throw error;
+      }
+    },
+    onError: (error: Error) => {
+      console.error("Token refresh failed:", error);
+    },
+  });
+
+  return {
+    refresh: () => refreshMutation.mutate(),
+    isPending: refreshMutation.isPending,
+    error: refreshMutation.error,
+  };
+};
diff --git a/src/hooks/queries/auth/useSignup.ts b/src/hooks/queries/auth/useSignup.ts
new file mode 100644
index 00000000..5c94d795
--- /dev/null
+++ b/src/hooks/queries/auth/useSignup.ts
@@ -0,0 +1,39 @@
+import { SignupSchema } from "@/schemas/authSchema";
+import { AuthResponse } from "@/types/response/auth";
+import { useMutation } from "@tanstack/react-query";
+import axios from "axios";
+import { useRouter } from "next/navigation";
+import { toast } from "react-hot-toast";
+
+export const useSignup = () => {
+  const router = useRouter();
+
+  const signupMutation = useMutation<AuthResponse, Error, SignupSchema>({
+    mutationFn: async (data: SignupSchema) => {
+      try {
+        const response = await axios.post<AuthResponse>("/api/auth/signup", data, {
+          withCredentials: false,
+        });
+        return response.data;
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          throw new Error(error.response?.data?.message || "회원가입 중 오류가 발생했습니다.");
+        }
+        throw error;
+      }
+    },
+    onSuccess: () => {
+      toast.success("회원가입이 완료되었습니다!");
+      router.push("/");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message);
+    },
+  });
+
+  return {
+    signup: (data: SignupSchema) => signupMutation.mutate(data),
+    isPending: signupMutation.isPending,
+    error: signupMutation.error,
+  };
+};
diff --git a/src/hooks/queries/form/detail/useApplyStatus.ts b/src/hooks/queries/form/detail/useApplyStatus.ts
new file mode 100644
index 00000000..3d522b62
--- /dev/null
+++ b/src/hooks/queries/form/detail/useApplyStatus.ts
@@ -0,0 +1,38 @@
+// 지원 현황 목록 조회
+
+import { ApplicationListResponse } from "@/types/response/application";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+
+interface UseApplyStatusProps {
+  formId: number;
+  limit: number;
+  cursor?: number;
+  orderByExperience?: string;
+  orderByStatus?: string;
+}
+
+export const useApplyStatus = (props: UseApplyStatusProps) => {
+  const query = useQuery<ApplicationListResponse>({
+    queryKey: ["applyStatus", props.formId, props.limit, props.cursor, props.orderByExperience, props.orderByStatus],
+    queryFn: async () => {
+      const response = await axios.get(`/api/forms/${props.formId}/applications`, {
+        params: {
+          limit: props.limit,
+          cursor: props.cursor,
+          orderByExperience: props.orderByExperience,
+          orderByStatus: props.orderByStatus,
+        },
+      });
+      return response.data;
+    },
+    enabled: !!props.formId,
+  });
+
+  return {
+    ...query,
+    applyStatusData: query.data,
+    isPending: query.isPending,
+    error: query.error,
+  };
+};
diff --git a/src/hooks/queries/form/detail/useFormDetail.ts b/src/hooks/queries/form/detail/useFormDetail.ts
new file mode 100644
index 00000000..5c8fed31
--- /dev/null
+++ b/src/hooks/queries/form/detail/useFormDetail.ts
@@ -0,0 +1,31 @@
+import { FormDetailResponse } from "@/types/response/form";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+
+interface UseFormDetailParams {
+  formId?: number;
+}
+
+export const useFormDetail = ({ formId }: UseFormDetailParams) => {
+  const query = useQuery<FormDetailResponse>({
+    queryKey: ["formDetail", formId],
+    queryFn: async () => {
+      if (!formId) {
+        throw new Error("formId가 없습니다.");
+      }
+      const response = await axios.get(`/api/forms/${formId}`);
+      return response.data;
+    },
+    enabled: !!formId, // formId가 유효한 경우에만 쿼리 실행
+  });
+
+  return {
+    ...query,
+    albaFormDetailData: query.data,
+    isPending: query.isPending,
+    error: query.error,
+    refetch: query.refetch,
+  };
+};
+
+export default useFormDetail;
diff --git a/src/hooks/queries/form/useFormApplication.ts b/src/hooks/queries/form/useFormApplication.ts
new file mode 100644
index 00000000..9a0de3f6
--- /dev/null
+++ b/src/hooks/queries/form/useFormApplication.ts
@@ -0,0 +1,39 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import toast from "react-hot-toast";
+import { ApplicationSchema } from "@/schemas/applicationSchema";
+
+export const useFormApplication = (formId: number) => {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: async (data: ApplicationSchema) => {
+      const response = await axios.post(`/api/forms/${formId}/applications`, data);
+      return response.data;
+    },
+    onSuccess: () => {
+      // 지원 성공 시 관련 쿼리 무효화
+      queryClient.invalidateQueries({ queryKey: ["forms", formId] });
+      toast.success("지원이 완료되었습니다.");
+    },
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const errorMessage = error.response?.data?.message || "지원에 실패했습니다.";
+        console.error("Apply form error:", {
+          status: error.response?.status,
+          data: error.response?.data,
+        });
+        toast.error(errorMessage);
+      } else {
+        console.error("Unexpected error:", error);
+        toast.error("지원 중 오류가 발생했습니다.");
+      }
+    },
+  });
+
+  return {
+    formApplication: mutation.mutate,
+    isLoading: mutation.isPending,
+    error: mutation.error,
+  };
+};
diff --git a/src/hooks/queries/form/useFormScap.ts b/src/hooks/queries/form/useFormScap.ts
new file mode 100644
index 00000000..5e0f8a8b
--- /dev/null
+++ b/src/hooks/queries/form/useFormScap.ts
@@ -0,0 +1,52 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import toast from "react-hot-toast";
+
+export const useFormScrap = (formId: number) => {
+  const queryClient = useQueryClient();
+
+  const scrapMutation = useMutation({
+    mutationFn: async () => {
+      const response = await axios.post(`/api/forms/${formId}/scrap`);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["forms", formId] });
+      toast.success("스크랩이 완료되었습니다.");
+    },
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const errorMessage = error.response?.data?.message || "스크랩에 실패했습니다.";
+        toast.error(errorMessage);
+      } else {
+        toast.error("스크랩 중 오류가 발생했습니다.");
+      }
+    },
+  });
+
+  const unscrapMutation = useMutation({
+    mutationFn: async () => {
+      const response = await axios.delete(`/api/forms/${formId}/scrap`);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["forms", formId] });
+      toast.success("스크랩이 취소되었습니다.");
+    },
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const errorMessage = error.response?.data?.message || "스크랩 취소에 실패했습니다.";
+        toast.error(errorMessage);
+      } else {
+        toast.error("스크랩 취소 중 오류가 발생했습니다.");
+      }
+    },
+  });
+
+  return {
+    scrap: scrapMutation.mutate,
+    unscrap: unscrapMutation.mutate,
+    isLoading: scrapMutation.isPending || unscrapMutation.isPending,
+    error: scrapMutation.error || unscrapMutation.error,
+  };
+};
diff --git a/src/hooks/queries/form/useForms.ts b/src/hooks/queries/form/useForms.ts
new file mode 100644
index 00000000..6e75405e
--- /dev/null
+++ b/src/hooks/queries/form/useForms.ts
@@ -0,0 +1,53 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import axios from "axios";
+import type { FormListResponse } from "@/types/response/form";
+import toast from "react-hot-toast";
+
+interface UseFormsParams {
+  limit?: number;
+  orderBy?: string;
+  keyword?: string;
+  isRecruiting?: boolean;
+}
+
+export const useForms = ({ limit = 10, orderBy, keyword, isRecruiting }: UseFormsParams = {}) => {
+  const query = useInfiniteQuery<FormListResponse>({
+    queryKey: ["forms", { limit, orderBy, keyword, isRecruiting }],
+    queryFn: async ({ pageParam }) => {
+      try {
+        const response = await axios.get("/api/forms", {
+          params: {
+            cursor: pageParam,
+            limit,
+            orderBy,
+            keyword,
+            isRecruiting,
+          },
+          withCredentials: false,
+        });
+        return response.data;
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          const errorMessage = error.response?.data?.message || "알바폼 목록을 불러오는데 실패했습니다.";
+          toast.error(errorMessage);
+        }
+        throw error;
+      }
+    },
+    getNextPageParam: (lastPage) => {
+      if (!lastPage.nextCursor || lastPage.data.length === 0) {
+        return undefined;
+      }
+      return lastPage.nextCursor;
+    },
+    initialPageParam: undefined,
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 30,
+  });
+
+  return {
+    ...query,
+    isPending: query.isPending,
+    error: query.error,
+  };
+};
diff --git a/src/hooks/queries/post/comment/useAddComment.ts b/src/hooks/queries/post/comment/useAddComment.ts
new file mode 100644
index 00000000..750bc639
--- /dev/null
+++ b/src/hooks/queries/post/comment/useAddComment.ts
@@ -0,0 +1,55 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import toast from "react-hot-toast";
+import { CommentType } from "@/types/response/comment";
+
+interface AddCommentRequest {
+  content: string;
+}
+
+export const useAddComment = (postId: string) => {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: async (data: AddCommentRequest) => {
+      const response = await axios.post<CommentType>(`/api/posts/${postId}/comments`, data, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      return response.data;
+    },
+    onSuccess: () => {
+      toast.success("댓글이 등록되었습니다!", {
+        style: {
+          textAlign: "center",
+        },
+      });
+      // 댓글 목록과 게시글 상세 캐시 무효화
+      queryClient.invalidateQueries({ queryKey: ["comments", postId] });
+      queryClient.invalidateQueries({ queryKey: ["post", postId] });
+    },
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const errorMessage = error.response?.data?.message || "댓글 등록에 실패했습니다.";
+        toast.error(errorMessage, {
+          style: {
+            textAlign: "center",
+          },
+        });
+      } else {
+        toast.error("댓글 등록 중 오류가 발생했습니다.", {
+          style: {
+            textAlign: "center",
+          },
+        });
+      }
+    },
+  });
+
+  return {
+    ...mutation,
+    isPending: mutation.isPending,
+    error: mutation.error,
+  };
+};
diff --git a/src/hooks/queries/post/comment/useComments.ts b/src/hooks/queries/post/comment/useComments.ts
new file mode 100644
index 00000000..5d4292fe
--- /dev/null
+++ b/src/hooks/queries/post/comment/useComments.ts
@@ -0,0 +1,50 @@
+import { CommentListResponse } from "@/types/response/comment";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import toast from "react-hot-toast";
+
+interface CommentsParams {
+  page?: number;
+  pageSize?: number;
+}
+
+export const useComments = (postId: string, params: CommentsParams = { page: 1, pageSize: 10 }) => {
+  const query = useQuery({
+    queryKey: ["comments", postId, params.page, params.pageSize],
+    queryFn: async () => {
+      try {
+        const { data } = await axios.get<CommentListResponse>(`/api/posts/${postId}/comments`, {
+          params: {
+            page: params.page,
+            pageSize: params.pageSize,
+          },
+        });
+        return data;
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          const errorMessage = error.response?.data?.message || "댓글을 불러오는데 실패했습니다.";
+          toast.error(errorMessage, {
+            style: {
+              textAlign: "center",
+            },
+          });
+        } else {
+          toast.error("댓글을 불러오는 중 오류가 발생했습니다.", {
+            style: {
+              textAlign: "center",
+            },
+          });
+        }
+        throw error;
+      }
+    },
+    staleTime: 1000 * 60, // 1분
+    gcTime: 1000 * 60 * 5, // 5분
+  });
+
+  return {
+    ...query,
+    isPending: query.isPending,
+    error: query.error,
+  };
+};
diff --git a/src/hooks/queries/post/comment/useDeleteComment.ts b/src/hooks/queries/post/comment/useDeleteComment.ts
new file mode 100644
index 00000000..c00d6f3e
--- /dev/null
+++ b/src/hooks/queries/post/comment/useDeleteComment.ts
@@ -0,0 +1,45 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import toast from "react-hot-toast";
+
+export const useDeleteComment = (commentId: string) => {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: async () => {
+      const response = await axios.delete(`/api/comments/${commentId}`);
+      return response.data;
+    },
+    onSuccess: () => {
+      toast.success("댓글이 삭제되었습니다!", {
+        style: {
+          textAlign: "center",
+        },
+      });
+      // 댓글 목록과 게시글 상세 캐시 무효화
+      queryClient.invalidateQueries({ queryKey: ["comments", commentId] });
+    },
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const errorMessage = error.response?.data?.message || "댓글 삭제에 실패했습니다.";
+        toast.error(errorMessage, {
+          style: {
+            textAlign: "center",
+          },
+        });
+      } else {
+        toast.error("댓글 삭제 중 오류가 발생했습니다.", {
+          style: {
+            textAlign: "center",
+          },
+        });
+      }
+    },
+  });
+
+  return {
+    ...mutation,
+    isPending: mutation.isPending,
+    error: mutation.error,
+  };
+};
diff --git a/src/hooks/queries/post/comment/useEditComment.ts b/src/hooks/queries/post/comment/useEditComment.ts
new file mode 100644
index 00000000..0cdeb25e
--- /dev/null
+++ b/src/hooks/queries/post/comment/useEditComment.ts
@@ -0,0 +1,54 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import toast from "react-hot-toast";
+import { CommentType } from "@/types/response/comment";
+
+interface EditCommentRequest {
+  content: string;
+}
+
+export const useEditComment = (commentId: string) => {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: async (data: EditCommentRequest) => {
+      const response = await axios.patch<CommentType>(`/api/comments/${commentId}`, data, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      return response.data;
+    },
+    onSuccess: () => {
+      toast.success("댓글이 수정되었습니다!", {
+        style: {
+          textAlign: "center",
+        },
+      });
+      // 댓글 목록과 게시글 상세 캐시 무효화
+      queryClient.invalidateQueries({ queryKey: ["comments", commentId] });
+    },
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const errorMessage = error.response?.data?.message || "댓글 수정에 실패했습니다.";
+        toast.error(errorMessage, {
+          style: {
+            textAlign: "center",
+          },
+        });
+      } else {
+        toast.error("댓글 수정 중 오류가 발생했습니다.", {
+          style: {
+            textAlign: "center",
+          },
+        });
+      }
+    },
+  });
+
+  return {
+    ...mutation,
+    isPending: mutation.isPending,
+    error: mutation.error,
+  };
+};
diff --git a/src/hooks/queries/post/useAddPost.ts b/src/hooks/queries/post/useAddPost.ts
new file mode 100644
index 00000000..2b56efe7
--- /dev/null
+++ b/src/hooks/queries/post/useAddPost.ts
@@ -0,0 +1,54 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import toast from "react-hot-toast";
+import { PostDetailResponse } from "@/types/response/post";
+import { PostSchema } from "@/schemas/postSchema";
+
+export const useAddPost = () => {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation<PostDetailResponse, Error, PostSchema>({
+    mutationFn: async (data: PostSchema) => {
+      const response = await axios.post<PostDetailResponse>("/api/posts", data, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+        withCredentials: true,
+      });
+      return response.data;
+    },
+    onSuccess: (data) => {
+      toast.success("게시글이 등록되었습니다!", {
+        style: {
+          textAlign: "center",
+        },
+      });
+      // 게시글 목록 캐시 무효화
+      queryClient.invalidateQueries({ queryKey: ["posts"] });
+      return data; // 응답 데이터 반환
+    },
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const errorMessage = error.response?.data?.message || "게시글 등록에 실패했습니다.";
+        toast.error(errorMessage, {
+          style: {
+            textAlign: "center",
+          },
+        });
+      } else {
+        toast.error("게시글 등록 중 오류가 발생했습니다.", {
+          style: {
+            textAlign: "center",
+          },
+        });
+      }
+      throw error; // 에러를 다시 throw하여 컴포넌트에서 처리할 수 있도록 함
+    },
+  });
+
+  return {
+    ...mutation,
+    isPending: mutation.isPending,
+    error: mutation.error,
+  };
+};
diff --git a/src/hooks/queries/post/useDeletePost.ts b/src/hooks/queries/post/useDeletePost.ts
new file mode 100644
index 00000000..30a09198
--- /dev/null
+++ b/src/hooks/queries/post/useDeletePost.ts
@@ -0,0 +1,47 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import toast from "react-hot-toast";
+
+export const useDeletePost = (postId: string) => {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: async () => {
+      await axios.delete(`/api/posts/${postId}`, {
+        withCredentials: true,
+      });
+    },
+    onSuccess: () => {
+      toast.success("게시글이 삭제되었습니다!", {
+        style: {
+          textAlign: "center",
+        },
+      });
+      // 게시글 목록과 상세 캐시 무효화
+      queryClient.invalidateQueries({ queryKey: ["posts"] });
+      queryClient.invalidateQueries({ queryKey: ["post", postId] });
+    },
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const errorMessage = error.response?.data?.message || "게시글 삭제에 실패했습니다.";
+        toast.error(errorMessage, {
+          style: {
+            textAlign: "center",
+          },
+        });
+      } else {
+        toast.error("게시글 삭제 중 오류가 발생했습니다.", {
+          style: {
+            textAlign: "center",
+          },
+        });
+      }
+    },
+  });
+
+  return {
+    ...mutation,
+    isPending: mutation.isPending,
+    error: mutation.error,
+  };
+};
diff --git a/src/hooks/queries/post/useEditPost.ts b/src/hooks/queries/post/useEditPost.ts
new file mode 100644
index 00000000..47e6339e
--- /dev/null
+++ b/src/hooks/queries/post/useEditPost.ts
@@ -0,0 +1,52 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import toast from "react-hot-toast";
+import { PostSchema } from "@/schemas/postSchema";
+
+export const useEditPost = (postId: string) => {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: async (data: PostSchema) => {
+      const response = await axios.patch(`/api/posts/${postId}`, data, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+        withCredentials: true,
+      });
+      return response.data;
+    },
+    onSuccess: () => {
+      toast.success("게시글이 수정되었습니다!", {
+        style: {
+          textAlign: "center",
+        },
+      });
+      // 캐시 무효화
+      queryClient.invalidateQueries({ queryKey: ["post", postId] });
+      queryClient.invalidateQueries({ queryKey: ["posts"] });
+    },
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const errorMessage = error.response?.data?.message || "게시글 수정에 실패했습니다.";
+        toast.error(errorMessage, {
+          style: {
+            textAlign: "center",
+          },
+        });
+      } else {
+        toast.error("게시글 수정 중 오류가 발생했습니다.", {
+          style: {
+            textAlign: "center",
+          },
+        });
+      }
+    },
+  });
+
+  return {
+    ...mutation,
+    isPending: mutation.isPending,
+    error: mutation.error,
+  };
+};
diff --git a/src/hooks/queries/post/useLikePost.ts b/src/hooks/queries/post/useLikePost.ts
new file mode 100644
index 00000000..4e29e38e
--- /dev/null
+++ b/src/hooks/queries/post/useLikePost.ts
@@ -0,0 +1,90 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import toast from "react-hot-toast";
+
+interface LikePostResponse {
+  message: string;
+}
+
+export const useLikePost = (postId: string) => {
+  const queryClient = useQueryClient();
+
+  const likePostMutation = useMutation({
+    mutationFn: async () => {
+      const response = await axios.post<LikePostResponse>(`/api/posts/${postId}/like`);
+      return response.data;
+    },
+    onSuccess: () => {
+      toast.success("게시글을 좋아요 했습니다!", {
+        style: {
+          textAlign: "center",
+        },
+      });
+      // 게시글 상세 및 목록 캐시 무효화
+      queryClient.invalidateQueries({ queryKey: ["post", postId] });
+      queryClient.invalidateQueries({ queryKey: ["posts"] });
+    },
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const errorMessage = error.response?.data?.message || "좋아요 등록에 실패했습니다.";
+        toast.error(errorMessage, {
+          style: {
+            textAlign: "center",
+          },
+        });
+      } else {
+        toast.error("좋아요 등록 중 오류가 발생했습니다.", {
+          style: {
+            textAlign: "center",
+          },
+        });
+      }
+    },
+  });
+
+  const unlikePostMutation = useMutation({
+    mutationFn: async () => {
+      const response = await axios.delete<LikePostResponse>(`/api/posts/${postId}/like`);
+      return response.data;
+    },
+    onSuccess: () => {
+      toast.success("게시글 좋아요를 취소했습니다!", {
+        style: {
+          textAlign: "center",
+        },
+      });
+      // 게시글 상세 및 목록 캐시 무효화
+      queryClient.invalidateQueries({ queryKey: ["post", postId] });
+      queryClient.invalidateQueries({ queryKey: ["posts"] });
+    },
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const errorMessage = error.response?.data?.message || "좋아요 취소에 실패했습니다.";
+        toast.error(errorMessage, {
+          style: {
+            textAlign: "center",
+          },
+        });
+      } else {
+        toast.error("좋아요 취소 중 오류가 발생했습니다.", {
+          style: {
+            textAlign: "center",
+          },
+        });
+      }
+    },
+  });
+
+  return {
+    likePost: {
+      ...likePostMutation,
+      isPending: likePostMutation.isPending,
+      error: likePostMutation.error,
+    },
+    unlikePost: {
+      ...unlikePostMutation,
+      isPending: unlikePostMutation.isPending,
+      error: unlikePostMutation.error,
+    },
+  };
+};
diff --git a/src/hooks/queries/post/usePostDetail.ts b/src/hooks/queries/post/usePostDetail.ts
new file mode 100644
index 00000000..46be8a66
--- /dev/null
+++ b/src/hooks/queries/post/usePostDetail.ts
@@ -0,0 +1,38 @@
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import toast from "react-hot-toast";
+import { PostDetailResponse } from "@/types/response/post";
+
+export const usePostDetail = (postId: string) => {
+  return useQuery({
+    queryKey: ["post", postId],
+    queryFn: async (): Promise<PostDetailResponse> => {
+      try {
+        const { data } = await axios.get(`/api/posts/${postId}`, {
+          withCredentials: false,
+        });
+        return data;
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          const errorMessage = error.response?.data?.message || "게시글을 불러오는데 실패했습니다.";
+          toast.error(errorMessage, {
+            style: {
+              textAlign: "center",
+            },
+          });
+        } else {
+          toast.error("게시글을 불러오는 중 오류가 발생했습니다.", {
+            style: {
+              textAlign: "center",
+            },
+          });
+        }
+        throw error;
+      }
+    },
+    enabled: !!postId,
+    retry: 1,
+    staleTime: 1000 * 60 * 5, // 5분
+    gcTime: 1000 * 60 * 10, // 10분
+  });
+};
diff --git a/src/hooks/queries/post/usePosts.ts b/src/hooks/queries/post/usePosts.ts
new file mode 100644
index 00000000..679e196b
--- /dev/null
+++ b/src/hooks/queries/post/usePosts.ts
@@ -0,0 +1,51 @@
+import { PostListResponse } from "@/types/response/post";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import axios from "axios";
+import toast from "react-hot-toast";
+
+interface UsePostsParams {
+  limit?: number;
+  orderBy?: string;
+  keyword?: string;
+}
+
+export const usePosts = ({ limit = 10, orderBy, keyword }: UsePostsParams = {}) => {
+  const query = useInfiniteQuery<PostListResponse>({
+    queryKey: ["posts", { limit, orderBy, keyword }],
+    queryFn: async ({ pageParam }) => {
+      try {
+        const response = await axios.get("/api/posts", {
+          params: {
+            cursor: pageParam,
+            limit,
+            orderBy,
+            keyword,
+          },
+          withCredentials: false,
+        });
+        return response.data;
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          const errorMessage = error.response?.data?.message || "알바 토크를 불러오는데 실패했습니다.";
+          toast.error(errorMessage);
+        }
+        throw error;
+      }
+    },
+    getNextPageParam: (lastPage) => {
+      if (!lastPage.nextCursor || lastPage.data.length === 0) {
+        return undefined;
+      }
+      return lastPage.nextCursor;
+    },
+    initialPageParam: undefined,
+    staleTime: 1000 * 60 * 5, // 5분
+    gcTime: 1000 * 60 * 30, // 30분
+  });
+
+  return {
+    ...query,
+    isPending: query.isPending,
+    error: query.error,
+  };
+};
diff --git a/src/hooks/queries/user/me/useChangePassword.ts b/src/hooks/queries/user/me/useChangePassword.ts
new file mode 100644
index 00000000..85f95141
--- /dev/null
+++ b/src/hooks/queries/user/me/useChangePassword.ts
@@ -0,0 +1,39 @@
+import axios from "axios";
+import toast from "react-hot-toast";
+import { useMutation } from "@tanstack/react-query";
+
+interface PasswordData {
+  currentPassword: string;
+  newPassword: string;
+}
+
+export const usePassword = () => {
+  const mutation = useMutation({
+    mutationFn: async (data: PasswordData) => {
+      const response = await axios.patch("/api/users/me/password", data);
+      return response.data;
+    },
+    onSuccess: () => {
+      toast.success("비밀번호가 변경되었습니다!\n다시 로그인해주세요.", {
+        style: {
+          whiteSpace: "pre-line",
+          textAlign: "center",
+        },
+      });
+    },
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const errorMessage = error.response?.data?.message || "비밀번호 변경에 실패했습니다.";
+        toast.error(errorMessage);
+      } else {
+        toast.error("비밀번호 변경 중 오류가 발생했습니다.");
+      }
+    },
+  });
+
+  return {
+    ...mutation,
+    isPending: mutation.isPending,
+    error: mutation.error,
+  };
+};
diff --git a/src/hooks/queries/user/me/useImageUpload.ts b/src/hooks/queries/user/me/useImageUpload.ts
new file mode 100644
index 00000000..3c7943dd
--- /dev/null
+++ b/src/hooks/queries/user/me/useImageUpload.ts
@@ -0,0 +1,34 @@
+import { useUpdateProfile } from "@/hooks/queries/user/me/useUpdateProfile";
+import renameFile from "@/utils/renameFile";
+import toast from "react-hot-toast";
+
+const useUploadImages = () => {
+  const { uploadImageMutation } = useUpdateProfile();
+
+  const uploadImages = async (files: File[]) => {
+    const uploadedUrls: string[] = [];
+
+    for (const file of files) {
+      const maxSize = 5 * 1024 * 1024; // 5MB
+      if (file.size > maxSize) {
+        toast.error(`5MB 이상의 파일은 업로드할 수 없습니다.`);
+        continue;
+      }
+
+      try {
+        const uploadResponse = await uploadImageMutation.mutateAsync(renameFile(file));
+        if (uploadResponse?.url) {
+          uploadedUrls.push(uploadResponse.url);
+        }
+      } catch (uploadError) {
+        console.error(`파일 ${file.name} 업로드 실패:`, uploadError);
+      }
+    }
+
+    return uploadedUrls;
+  };
+
+  return { uploadImages };
+};
+
+export default useUploadImages;
diff --git a/src/hooks/queries/user/me/useMyApplications.ts b/src/hooks/queries/user/me/useMyApplications.ts
new file mode 100644
index 00000000..f6b939a1
--- /dev/null
+++ b/src/hooks/queries/user/me/useMyApplications.ts
@@ -0,0 +1,51 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { MyApplicationListResponse } from "@/types/response/user";
+import toast from "react-hot-toast";
+
+interface UseMyApplicationsParams {
+  limit?: number;
+  status?: string;
+  keyword?: string;
+}
+
+export const useMyApplications = ({ limit = 10, status, keyword }: UseMyApplicationsParams = {}) => {
+  const query = useInfiniteQuery<MyApplicationListResponse>({
+    queryKey: ["myApplications", { limit, status, keyword }],
+    queryFn: async ({ pageParam }) => {
+      try {
+        const response = await axios.get<MyApplicationListResponse>("/api/users/me/applications", {
+          params: {
+            cursor: pageParam,
+            limit,
+            status,
+            keyword,
+          },
+          withCredentials: true,
+        });
+        return response.data;
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          const errorMessage = error.response?.data?.message || "내 지원서 목록을 불러오는데 실패했습니다.";
+          toast.error(errorMessage);
+        }
+        throw error;
+      }
+    },
+    getNextPageParam: (lastPage) => {
+      if (!lastPage.nextCursor || lastPage.data.length === 0) {
+        return undefined;
+      }
+      return lastPage.nextCursor;
+    },
+    initialPageParam: undefined,
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 30,
+  });
+
+  return {
+    ...query,
+    isPending: query.isPending,
+    error: query.error,
+  };
+};
diff --git a/src/hooks/queries/user/me/useMyComments.ts b/src/hooks/queries/user/me/useMyComments.ts
new file mode 100644
index 00000000..b1594d2f
--- /dev/null
+++ b/src/hooks/queries/user/me/useMyComments.ts
@@ -0,0 +1,51 @@
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { MyCommentListResponse } from "@/types/response/user";
+import toast from "react-hot-toast";
+
+interface MyCommentsParams {
+  page?: number;
+  pageSize?: number;
+}
+
+export const useMyComments = (params: MyCommentsParams = { page: 1, pageSize: 10 }) => {
+  const query = useQuery({
+    queryKey: ["myComments", params.page, params.pageSize],
+    queryFn: async () => {
+      try {
+        const response = await axios.get<MyCommentListResponse>("/api/users/me/comments", {
+          params: {
+            page: params.page,
+            pageSize: params.pageSize,
+          },
+          withCredentials: true,
+        });
+        return response.data;
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          const errorMessage = error.response?.data?.message || "내 댓글을 불러오는데 실패했습니다.";
+          toast.error(errorMessage, {
+            style: {
+              textAlign: "center",
+            },
+          });
+        } else {
+          toast.error("내 댓글을 불러오는 중 오류가 발생했습니다.", {
+            style: {
+              textAlign: "center",
+            },
+          });
+        }
+        throw error;
+      }
+    },
+    staleTime: 1000 * 60, // 1분
+    gcTime: 1000 * 60 * 5, // 5분
+  });
+
+  return {
+    ...query,
+    isPending: query.isPending,
+    error: query.error,
+  };
+};
diff --git a/src/hooks/queries/user/me/useMyForms.ts b/src/hooks/queries/user/me/useMyForms.ts
new file mode 100644
index 00000000..1076c7a7
--- /dev/null
+++ b/src/hooks/queries/user/me/useMyForms.ts
@@ -0,0 +1,55 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { MyFormListResponse } from "@/types/response/user";
+import toast from "react-hot-toast";
+
+interface UseMyFormsParams {
+  limit?: number;
+  orderBy?: string;
+  keyword?: string;
+  isPublic?: boolean;
+  isRecruiting?: boolean;
+}
+
+export const useMyForms = ({ limit = 10, orderBy, keyword, isPublic, isRecruiting }: UseMyFormsParams = {}) => {
+  const query = useInfiniteQuery<MyFormListResponse>({
+    queryKey: ["myForms", { limit, orderBy, keyword, isPublic, isRecruiting }],
+    queryFn: async ({ pageParam }) => {
+      try {
+        const response = await axios.get<MyFormListResponse>("/api/users/me/forms", {
+          params: {
+            cursor: pageParam,
+            limit,
+            orderBy,
+            keyword,
+            isPublic,
+            isRecruiting,
+          },
+          withCredentials: true,
+        });
+        return response.data;
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          const errorMessage = error.response?.data?.message || "내 알바폼 목록을 불러오는데 실패했습니다.";
+          toast.error(errorMessage);
+        }
+        throw error;
+      }
+    },
+    getNextPageParam: (lastPage) => {
+      if (!lastPage.nextCursor || lastPage.data.length === 0) {
+        return undefined;
+      }
+      return lastPage.nextCursor;
+    },
+    initialPageParam: undefined,
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 30,
+  });
+
+  return {
+    ...query,
+    isPending: query.isPending,
+    error: query.error,
+  };
+};
diff --git a/src/hooks/queries/user/me/useMyPosts.ts b/src/hooks/queries/user/me/useMyPosts.ts
new file mode 100644
index 00000000..51dca9bc
--- /dev/null
+++ b/src/hooks/queries/user/me/useMyPosts.ts
@@ -0,0 +1,49 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { MyPostListResponse } from "@/types/response/user";
+import toast from "react-hot-toast";
+
+interface UseMyPostsParams {
+  limit?: number;
+  orderBy?: string;
+}
+
+export const useMyPosts = ({ limit = 10, orderBy }: UseMyPostsParams = {}) => {
+  const query = useInfiniteQuery<MyPostListResponse>({
+    queryKey: ["myPosts", { limit, orderBy }],
+    queryFn: async ({ pageParam }) => {
+      try {
+        const response = await axios.get<MyPostListResponse>("/api/users/me/posts", {
+          params: {
+            cursor: pageParam,
+            limit,
+            orderBy,
+          },
+          withCredentials: true,
+        });
+        return response.data;
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          const errorMessage = error.response?.data?.message || "내 게시글 목록을 불러오는데 실패했습니다.";
+          toast.error(errorMessage);
+        }
+        throw error;
+      }
+    },
+    getNextPageParam: (lastPage) => {
+      if (!lastPage.nextCursor || lastPage.data.length === 0) {
+        return undefined;
+      }
+      return lastPage.nextCursor;
+    },
+    initialPageParam: undefined,
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 30,
+  });
+
+  return {
+    ...query,
+    isPending: query.isPending,
+    error: query.error,
+  };
+};
diff --git a/src/hooks/queries/user/me/useMyScraps.ts b/src/hooks/queries/user/me/useMyScraps.ts
new file mode 100644
index 00000000..694cc8e5
--- /dev/null
+++ b/src/hooks/queries/user/me/useMyScraps.ts
@@ -0,0 +1,53 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { MyFormListResponse } from "@/types/response/user";
+import toast from "react-hot-toast";
+
+interface UseMyScrapsParams {
+  limit?: number;
+  orderBy?: string;
+  isPublic?: boolean;
+  isRecruiting?: boolean;
+}
+
+export const useMyScraps = ({ limit = 10, orderBy, isPublic, isRecruiting }: UseMyScrapsParams = {}) => {
+  const query = useInfiniteQuery<MyFormListResponse>({
+    queryKey: ["myScraps", { limit, orderBy, isPublic, isRecruiting }],
+    queryFn: async ({ pageParam }) => {
+      try {
+        const response = await axios.get<MyFormListResponse>("/api/users/me/scrap", {
+          params: {
+            cursor: pageParam,
+            limit,
+            orderBy,
+            isPublic: isPublic === undefined ? null : isPublic,
+            isRecruiting: isRecruiting === undefined ? null : isRecruiting,
+          },
+          withCredentials: true,
+        });
+        return response.data;
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          const errorMessage = error.response?.data?.message || "스크랩한 알바폼 목록을 불러오는데 실패했습니다.";
+          toast.error(errorMessage);
+        }
+        throw error;
+      }
+    },
+    getNextPageParam: (lastPage) => {
+      if (!lastPage.nextCursor || lastPage.data.length === 0) {
+        return undefined;
+      }
+      return lastPage.nextCursor;
+    },
+    initialPageParam: undefined,
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 30,
+  });
+
+  return {
+    ...query,
+    isPending: query.isPending,
+    error: query.error,
+  };
+};
diff --git a/src/hooks/queries/user/me/useProfileStringValue.ts b/src/hooks/queries/user/me/useProfileStringValue.ts
new file mode 100644
index 00000000..6fa3985c
--- /dev/null
+++ b/src/hooks/queries/user/me/useProfileStringValue.ts
@@ -0,0 +1,55 @@
+import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import type { QueryKey, UseQueryOptions } from "@tanstack/react-query";
+
+const VALID_USER_INFO_KEY = "isUserInfoValid";
+
+export const useProfileStringValue = () => {
+  const queryClient = useQueryClient();
+
+  const { data: isUserInfoValid = false } = useQuery({
+    queryKey: [VALID_USER_INFO_KEY],
+    queryFn: async () => {
+      const userData = queryClient.getQueryData<{ user: any }>(["user"]);
+      const user = userData?.user;
+
+      if (!user) return false;
+      const isProfileComplete = Object.values(user).some(
+        (value) => value !== null && value !== undefined && value === "string"
+      );
+
+      if (isProfileComplete) {
+        toast.error("내 정보를 수정하세요", {
+          duration: 3000,
+          position: "top-center",
+          id: "profile-string-toast",
+        });
+      }
+
+      return isProfileComplete;
+    },
+    enabled: !!queryClient.getQueryData(["user"]),
+    staleTime: 0,
+    refetchOnMount: true,
+  });
+
+  // user 쿼리 변경 감지
+  useQuery<unknown, Error, unknown, QueryKey>({
+    queryKey: ["user"],
+    queryFn: () => null,
+    enabled: false,
+    onSettled: () => {
+      // user 데이터가 변경되면 profileStringValue 쿼리 재실행
+      queryClient.invalidateQueries({ queryKey: [VALID_USER_INFO_KEY] });
+    },
+  } as UseQueryOptions);
+
+  const { mutate: setIsUserInfoValid } = useMutation({
+    mutationFn: (newValue: boolean) => Promise.resolve(newValue),
+    onSuccess: (newValue) => {
+      queryClient.setQueryData([VALID_USER_INFO_KEY], newValue);
+    },
+  });
+
+  return { isUserInfoValid, setIsUserInfoValid };
+};
diff --git a/src/hooks/queries/user/me/useUpdateProfile.ts b/src/hooks/queries/user/me/useUpdateProfile.ts
new file mode 100644
index 00000000..efbbc6d9
--- /dev/null
+++ b/src/hooks/queries/user/me/useUpdateProfile.ts
@@ -0,0 +1,90 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import toast from "react-hot-toast";
+
+interface UpdateProfileData {
+  name?: string;
+  nickname?: string;
+  phoneNumber?: string;
+  imageUrl?: string;
+  storeName?: string;
+  storePhoneNumber?: string;
+  location?: string;
+}
+
+export const useUpdateProfile = () => {
+  const queryClient = useQueryClient();
+
+  const updateProfileMutation = useMutation({
+    mutationFn: async (data: UpdateProfileData) => {
+      const response = await axios.patch("/api/users/me", data);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["user"] });
+      toast.success("프로필이 성공적으로 수정되었습니다.");
+    },
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const errorMessage = error.response?.data?.message || "프로필 수정에 실패했습니다.";
+        console.error("Profile update error:", {
+          status: error.response?.status,
+          data: error.response?.data,
+        });
+        toast.error(errorMessage);
+      } else {
+        console.error("Unexpected error:", error);
+        toast.error("프로필 수정 중 오류가 발생했습니다.");
+      }
+    },
+  });
+
+  const uploadImageMutation = useMutation({
+    mutationFn: async (file: File) => {
+      const formData = new FormData();
+      formData.append("image", file);
+
+      const response = await axios.post("/api/images/upload", formData, {
+        withCredentials: true,
+      });
+      return response.data;
+    },
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const errorMessage = error.response?.data?.message || "이미지 업로드에 실패했습니다.";
+        toast.error(errorMessage);
+      } else {
+        toast.error("이미지 업로드 중 오류가 발생했습니다.");
+      }
+    },
+  });
+
+  const updateProfile = async (data: UpdateProfileData, imageFile?: File | null) => {
+    try {
+      let imageUrl = data.imageUrl;
+
+      if (imageFile) {
+        const uploadResponse = await uploadImageMutation.mutateAsync(imageFile);
+        if (uploadResponse?.url) {
+          imageUrl = uploadResponse.url;
+        }
+      }
+
+      await updateProfileMutation.mutateAsync({
+        ...data,
+        imageUrl,
+      });
+
+      return true;
+    } catch (error) {
+      console.error(error);
+      return false;
+    }
+  };
+
+  return {
+    updateProfile,
+    uploadImageMutation,
+    isUpdating: updateProfileMutation.isPending || uploadImageMutation.isPending,
+  };
+};
diff --git a/src/hooks/queries/user/me/useUser.ts b/src/hooks/queries/user/me/useUser.ts
new file mode 100644
index 00000000..0185c4bd
--- /dev/null
+++ b/src/hooks/queries/user/me/useUser.ts
@@ -0,0 +1,43 @@
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { UserResponse } from "@/types/response/user";
+import toast from "react-hot-toast";
+
+export const useUser = () => {
+  const userQuery = useQuery<{ user: UserResponse | null }>({
+    queryKey: ["user"],
+    queryFn: async () => {
+      try {
+        const response = await axios.get("/api/users/me", {
+          withCredentials: true,
+        });
+
+        const userData = {
+          user: response.data,
+        };
+
+        return userData;
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          if (error.response?.status === 401) {
+            return { user: null };
+          } else {
+            toast.error("사용자 정보를 불러오는 데 실패했습니다." + error.response?.data.message);
+          }
+        }
+        throw error;
+      }
+    },
+    retry: false,
+    staleTime: 0,
+    gcTime: 1000 * 60 * 30,
+  });
+
+  return {
+    user: userQuery.data?.user || null,
+    refetch: userQuery.refetch,
+    isLoading: userQuery.isLoading,
+    error: userQuery.error,
+    isPending: userQuery.isPending,
+  };
+};
diff --git a/src/hooks/useApplyCard.ts b/src/hooks/useApplyCard.ts
new file mode 100644
index 00000000..6185a9aa
--- /dev/null
+++ b/src/hooks/useApplyCard.ts
@@ -0,0 +1,32 @@
+import { useState } from "react";
+import { useApplyStatus } from "@/hooks/queries/form/detail/useApplyStatus";
+
+export const useApplyStatusCard = (formId: number) => {
+  const [experienceSort, setExperienceSort] = useState<"asc" | "desc">("asc");
+  const [statusSort, setStatusSort] = useState<"asc" | "desc">("desc");
+
+  const { applyStatusData, isLoading } = useApplyStatus({
+    formId,
+    limit: 30,
+    cursor: 0,
+    orderByExperience: experienceSort,
+    orderByStatus: statusSort,
+  });
+
+  const toggleExperienceSort = () => {
+    setExperienceSort((prev) => (prev === "asc" ? "desc" : "asc"));
+  };
+
+  const toggleStatusSort = () => {
+    setStatusSort((prev) => (prev === "asc" ? "desc" : "asc"));
+  };
+
+  return {
+    data: applyStatusData?.data || [],
+    isLoading,
+    experienceSort,
+    statusSort,
+    toggleExperienceSort,
+    toggleStatusSort,
+  };
+};
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
deleted file mode 100644
index 7cf5de41..00000000
--- a/src/hooks/useAuth.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { LoginSchema, SignupSchema } from "@/schemas/authSchema";
-import { useUserStore } from "@/store/userStore";
-import { AuthResponse, AuthUser } from "@/types/auth";
-import { UserDetail } from "@/types/user";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import axios from "axios";
-import { useRouter } from "next/navigation";
-import { toast } from "react-hot-toast";
-
-export const useAuth = () => {
-  const router = useRouter();
-  const setUser = useUserStore((state) => state.setUser);
-  const storeUser = useUserStore((state) => state.user);
-  const queryClient = useQueryClient();
-
-  // 토큰 갱신 mutation
-  const refreshMutation = useMutation({
-    mutationFn: async () => {
-      const response = await axios.post<{ user: UserDetail }>(
-        "/api/auth/refresh",
-        {},
-        {
-          withCredentials: true,
-        }
-      );
-      return response.data;
-    },
-    onSuccess: (data) => {
-      if (data?.user) {
-        const UserDetail = data.user as unknown as UserDetail;
-        const user = { ...UserDetail } as unknown as AuthUser;
-        setUser(user);
-        queryClient.invalidateQueries({ queryKey: ["user"] });
-      }
-    },
-    onError: (error: Error) => {
-      console.error("Token refresh failed:", error);
-      setUser(null);
-      router.push("/login");
-    },
-  });
-
-  // 회원가입 mutation
-  const signupMutation = useMutation<AuthResponse, Error, SignupSchema>({
-    mutationFn: async (data: SignupSchema) => {
-      const response = await axios.post<AuthResponse>("/api/auth/signup", data, {
-        withCredentials: true,
-      });
-      return response.data;
-    },
-    onSuccess: () => {
-      toast.success("회원가입이 완료되었습니다!");
-      router.push("/login");
-    },
-    onError: (error: Error) => {
-      toast.error(error.message || "회원가입 중 오류가 발생했습니다.");
-    },
-  });
-
-  // 로그인 mutation
-  const loginMutation = useMutation({
-    mutationFn: async (data: LoginSchema) => {
-      const response = await axios.post<AuthResponse>("/api/auth/login", data, {
-        withCredentials: true,
-      });
-      return response.data;
-    },
-    onSuccess: (data) => {
-      setUser(data.user as AuthUser);
-      toast.success("로그인되었습니다!");
-      router.push("/");
-      router.refresh();
-    },
-    onError: (error: Error) => {
-      toast.error(error.message || "로그인 중 오류가 발생했습니다.");
-    },
-  });
-
-  // 로그아��� mutation
-  const logoutMutation = useMutation({
-    mutationFn: async () => {
-      const response = await axios.post<AuthResponse>(
-        "/api/auth/logout",
-        {},
-        {
-          withCredentials: true,
-        }
-      );
-      return response.data;
-    },
-    onSuccess: () => {
-      setUser(null);
-      queryClient.clear(); // 모든 쿼리 캐시 초기화
-      toast.success("로그아웃되었습니다!");
-      router.push("/login");
-      router.refresh();
-    },
-    onError: (error: Error) => {
-      toast.error(error.message || "로그아웃 중 오류가 발생했습니다.");
-    },
-  });
-
-  const signup = (data: SignupSchema) => signupMutation.mutate(data);
-  const login = (data: LoginSchema) => loginMutation.mutate(data);
-  const logout = () => logoutMutation.mutate();
-  const refresh = () => refreshMutation.mutate();
-
-  return {
-    signup,
-    login,
-    logout,
-    refresh,
-    user: storeUser,
-    isSignupPending: signupMutation.isPending,
-    isLoginPending: loginMutation.isPending,
-    isLogoutPending: logoutMutation.isPending,
-    isRefreshPending: refreshMutation.isPending,
-    signupError: signupMutation.error,
-    loginError: loginMutation.error,
-    logoutError: logoutMutation.error,
-    isLoading: refreshMutation.isPending,
-    refreshError: refreshMutation.error,
-  };
-};
diff --git a/src/hooks/useDropdownOpen.ts b/src/hooks/useDropdownOpen.ts
new file mode 100644
index 00000000..f0f9e291
--- /dev/null
+++ b/src/hooks/useDropdownOpen.ts
@@ -0,0 +1,15 @@
+"use client";
+
+import { useState, useCallback } from "react";
+
+// 드롭다운 메뉴의 열림/닫힘 상태를 관리하는 커스텀 훅
+export const useDropdownOpen = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // 드롭다운 메뉴 토글 핸들러
+  const handleOpenDropdown = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  return { isOpen, setIsOpen, handleOpenDropdown };
+};
diff --git a/src/hooks/useEditing.ts b/src/hooks/useEditing.ts
new file mode 100644
index 00000000..ae9a6e46
--- /dev/null
+++ b/src/hooks/useEditing.ts
@@ -0,0 +1,31 @@
+import { SubmitFormDataType } from "@/types/addform";
+import { useMemo } from "react";
+
+const useEditing = (data: SubmitFormDataType) => {
+  const isEditingRecruitContent = useMemo(() => {
+    return data.title !== "" || data.description !== "" || data.recruitmentStartDate !== undefined;
+  }, [data.title, data.description, data.recruitmentStartDate]);
+
+  const isEditingRecruitCondition = useMemo(() => {
+    return (
+      data.gender !== "" ||
+      (data.numberOfPositions ?? 0) > 0 ||
+      data.education !== "" ||
+      data.age !== "" ||
+      data.preferred !== ""
+    );
+  }, [data.gender, data.numberOfPositions, data.education, data.age, data.preferred]);
+
+  const isEditingWorkCondition = useMemo(() => {
+    return (
+      data.location !== "" ||
+      data.workStartTime !== "" ||
+      data.workStartDate !== "" ||
+      (Number(data.hourlyWage) ?? 0) > 10030
+    );
+  }, [data.location, data.workStartTime, data.workStartDate, data.hourlyWage]);
+
+  return { isEditingRecruitContent, isEditingRecruitCondition, isEditingWorkCondition };
+};
+
+export default useEditing;
diff --git a/src/hooks/useFile.ts b/src/hooks/useFile.ts
new file mode 100644
index 00000000..542501f5
--- /dev/null
+++ b/src/hooks/useFile.ts
@@ -0,0 +1,20 @@
+import { MouseEvent, useState } from "react";
+
+export const useFile = () => {
+  const [file, setFile] = useState<File | null>(null);
+
+  const handleChangeFile = (newFile: File | null) => {
+    setFile(newFile);
+  };
+
+  const handleDeleteFile = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    setFile(null);
+  };
+  return {
+    file,
+    setFile,
+    handleChangeFile,
+    handleDeleteFile,
+  };
+};
diff --git a/src/hooks/useUser.ts b/src/hooks/useUser.ts
deleted file mode 100644
index 24c05f27..00000000
--- a/src/hooks/useUser.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import axios from "axios";
-import { toast } from "react-hot-toast";
-import { useUserStore } from "@/store/userStore";
-import { UserDetail } from "@/types/user";
-import { AuthUser } from "@/types/auth";
-import { useEffect } from "react";
-
-async function fetchUser() {
-  try {
-    const response = await axios.get("/api/users/me", {
-      withCredentials: true,
-    });
-    return response.data;
-  } catch (error) {
-    if (axios.isAxiosError(error)) {
-      if (error.response?.status === 401) {
-        return { user: null };
-      }
-      throw new Error(error.response?.data?.message || "사용자 정보를 가져오는데 실패했습니다.");
-    }
-    throw error;
-  }
-}
-
-export function useUser() {
-  const setUser = useUserStore((state) => state.setUser);
-  const storeUser = useUserStore((state) => state.user);
-
-  const { data, isLoading, error, refetch } = useQuery({
-    queryKey: ["user"],
-    queryFn: fetchUser,
-    retry: false,
-    staleTime: 1000 * 60 * 5, // 5분
-    gcTime: 1000 * 60 * 30, // 30분
-  });
-
-  useEffect(() => {
-    if (data?.user) {
-      const UserDetail = data.user as unknown as UserDetail;
-      const user = { ...UserDetail } as unknown as AuthUser;
-      setUser(user);
-    } else if (!isLoading) {
-      setUser(null);
-    }
-  }, [data, isLoading, setUser]);
-
-  useEffect(() => {
-    if (error instanceof Error && error.message !== "Unauthorized") {
-      toast.error(error.message || "사용자 정보를 가져오는데 실패했습니다.");
-      setUser(null);
-    }
-  }, [error, setUser]);
-
-  const isAuthenticated = !!storeUser;
-
-  return {
-    user: storeUser,
-    isLoading,
-    error,
-    isAuthenticated,
-    refetch,
-  };
-}
diff --git a/src/hooks/useWidth.ts b/src/hooks/useWidth.ts
new file mode 100644
index 00000000..606ed8c3
--- /dev/null
+++ b/src/hooks/useWidth.ts
@@ -0,0 +1,34 @@
+"use client";
+
+import debounce from "@/utils/debounce";
+import { useEffect, useState } from "react";
+
+const BREAKPOINTS = {
+  TABLET: 768,
+  DESKTOP: 1024,
+  DESKTOP_LARGE: 1440,
+};
+
+const useWidth = () => {
+  const [width, setWidth] = useState<number>(0);
+
+  useEffect(() => {
+    setWidth(window.innerWidth);
+
+    const handleResize = debounce(() => {
+      setWidth(window.innerWidth);
+    }, 100);
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const isMobile = width < BREAKPOINTS.TABLET;
+  const isTablet = width >= BREAKPOINTS.TABLET && width < BREAKPOINTS.DESKTOP;
+  const isDesktop = width >= BREAKPOINTS.DESKTOP && width < BREAKPOINTS.DESKTOP_LARGE;
+  const isDesktopLarge = width >= BREAKPOINTS.DESKTOP_LARGE;
+
+  return { isMobile, isTablet, isDesktop, isDesktopLarge, width };
+};
+
+export default useWidth;
diff --git a/src/middleware.ts b/src/middleware.ts
index c49f7e2c..c7fdf445 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -3,7 +3,17 @@ import type { NextRequest } from "next/server";
 
 export function middleware(request: NextRequest) {
   // 인증이 필요없는 공개 경로들을 정의
-  const publicPatterns = ["/", "/login", "/signup", "/_next", "/favicon.ico", /\.(jpg|jpeg|gif|png|svg)$/];
+  const publicPatterns = [
+    "/",
+    "/_next",
+    "/favicon.ico",
+    "/login",
+    "/signup",
+    "/signup/applicant",
+    "/signup/owner",
+    "/api/auth/refresh",
+    /\.(jpg|jpeg|gif|png|svg)$/,
+  ];
 
   // 현재 요청된 경로가 공개 경로에 해당하는지 확인
   const isPublicPath = publicPatterns.some((pattern) => {
@@ -13,28 +23,67 @@ export function middleware(request: NextRequest) {
     return pattern.test(request.nextUrl.pathname);
   });
 
-  // 쿠키에서 인증 토큰 확인
-  const token = request.cookies.get("accessToken")?.value;
+  // 공개 경로가 아닌 경우에만 토큰 체크
+  if (!isPublicPath) {
+    const token = request.cookies.get("accessToken")?.value;
 
-  // 로그인되지 않은 사용자가 보호된 페이지 접근 시 로그인 페이지로 리다이렉트
-  if (!isPublicPath && !token) {
-    return NextResponse.redirect(new URL("/login", request.url));
+    if (!token) {
+      // 토큰이 없는 경우 로그인 페이지로 리다이렉트
+      return NextResponse.redirect(new URL("/login", request.url));
+    }
+
+    try {
+      // 토큰이 있는 경우 API 요청에 토큰 추가
+      const requestHeaders = new Headers(request.headers);
+      requestHeaders.set("Authorization", `Bearer ${token}`);
+
+      // API 요청인 경우 헤더만 수정
+      if (request.nextUrl.pathname.startsWith("/api/")) {
+        return NextResponse.next({
+          request: {
+            headers: requestHeaders,
+          },
+        });
+      }
+
+      // 일반 페이지 요청의 경우 그대로 진행
+      return NextResponse.next();
+    } catch (error) {
+      console.error("Middleware error:", error);
+      return NextResponse.redirect(new URL("/login", request.url));
+    }
   }
 
   return NextResponse.next();
 }
 
-// 미들웨어 적용 경로 설정
+// JWT 토큰 디코딩 함수
+export function decodeJwt(token: string) {
+  try {
+    const base64Url = token.split(".")[1];
+    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+    const jsonPayload = decodeURIComponent(
+      atob(base64)
+        .split("")
+        .map((c) => "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2))
+        .join("")
+    );
+    return JSON.parse(jsonPayload);
+  } catch (error) {
+    console.error("JWT 토큰 디코딩 오류:", error);
+    return null;
+  }
+}
+
 export const config = {
   matcher: [
     /*
-     * 다음으로 시작하는 경로를 제외한 모든 요청 경로에 매칭:
-     * - api (API 라우트)
-     * - _next/static (정적 파일)
-     * - _next/image (이미지 최적화 파일)
-     * - favicon.ico (파비콘)
-     * - public 폴더
+     * Match all request paths except for the ones starting with:
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     * - public folder
      */
-    "/((?!api|_next/static|_next/image|favicon.ico|public/).*)",
+    "/((?!_next/static|_next/image|favicon.ico|public/).*)",
   ],
 };
diff --git a/src/schemas/applicationSchema.ts b/src/schemas/applicationSchema.ts
new file mode 100644
index 00000000..c201d652
--- /dev/null
+++ b/src/schemas/applicationSchema.ts
@@ -0,0 +1,15 @@
+import { z } from "zod";
+import { passwordSchema, mobilePhoneSchema } from "./commonSchema";
+
+// 지원서 등록
+export const applicationSchema = z.object({
+  password: passwordSchema,
+  introduction: z.string(),
+  resumeName: z.string(),
+  resumeId: z.number(),
+  experienceMonths: z.number(),
+  phoneNumber: mobilePhoneSchema,
+  name: z.string(),
+});
+
+export type ApplicationSchema = z.infer<typeof applicationSchema>;
diff --git a/src/schemas/authSchema.ts b/src/schemas/authSchema.ts
index bc18ccdd..d7becdb3 100644
--- a/src/schemas/authSchema.ts
+++ b/src/schemas/authSchema.ts
@@ -1,6 +1,7 @@
 import { z } from "zod";
 
-import { ROLES, emailSchema, passwordSchema, phoneSchema, roleSchema } from "./commonSchema";
+import { emailSchema, nicknameSchema, passwordSchema, roleSchema } from "./commonSchema";
+import { userRoles } from "@/constants/userRoles";
 
 export const loginSchema = z.object({
   email: emailSchema,
@@ -9,41 +10,73 @@ export const loginSchema = z.object({
 
 export type LoginSchema = z.infer<typeof loginSchema>;
 
-// 공통 필드 스키마
-const baseSignupSchema = {
-  email: emailSchema,
-  password: passwordSchema,
-  confirmPassword: passwordSchema,
-  name: z.string().min(1, "이름을 입력해주세요."),
-  nickname: z.string().min(2, "닉네임은 최소 2자 이상이어야 합니다."),
-  role: roleSchema,
-};
-
-// 사장님 스키마
-const ownerSchema = z.object({
-  ...baseSignupSchema,
-  storeName: z.string().min(1, "가게 이름을 입력해주세요."),
-  storePhoneNumber: phoneSchema,
-  location: z.string().min(1, "가게 위치를 입력해주세요."),
-  phoneNumber: z.string().optional().nullable(),
-});
+export const signupSchema = z
+  .object({
+    email: emailSchema,
+    password: passwordSchema,
+    confirmPassword: passwordSchema,
+    name: z.string().min(1, "이름을 입력해주세요"),
+    nickname: nicknameSchema,
+    role: roleSchema,
 
-// 지원자 스키마
-const applicantSchema = z.object({
-  ...baseSignupSchema,
-  phoneNumber: phoneSchema,
-  storeName: z.string().optional().nullable(),
-  storePhoneNumber: z.string().optional().nullable(),
-  location: z.string().optional().nullable(),
-});
+    // 지원자 전용 필드
+    phoneNumber: z.string().optional(),
 
-export const signupSchema = z
-  .discriminatedUnion("role", [
-    ownerSchema.extend({ role: z.literal(ROLES.OWNER) }),
-    applicantSchema.extend({ role: z.literal(ROLES.APPLICANT) }),
-  ])
+    // 사장님 전용 필드
+    storeName: z.string().optional(),
+    storePhoneNumber: z.string().optional(),
+    location: z.string().optional(),
+  })
+  .refine(
+    (data) => {
+      if (data.role === userRoles.APPLICANT) {
+        return data.phoneNumber?.match(/^(010)-\d{4}-\d{4}$/);
+      }
+      return true;
+    },
+    {
+      message: "올바른 전화번호 형식이 아닙니다 (예: 010-1234-5678)",
+      path: ["phoneNumber"],
+    }
+  )
+  .refine(
+    (data) => {
+      if (data.role === userRoles.OWNER) {
+        return data.storeName?.trim() !== "";
+      }
+      return true;
+    },
+    {
+      message: "가게 이름을 입력해주세요",
+      path: ["storeName"],
+    }
+  )
+  .refine(
+    (data) => {
+      if (data.role === userRoles.OWNER) {
+        return data.storePhoneNumber?.match(/^(02|0[0-9]{2})-\d{3,4}-\d{4}$/);
+      }
+      return true;
+    },
+    {
+      message: "올바른 전화번호 형식이 아닙니다 (예: 02-123-4567)",
+      path: ["storePhoneNumber"],
+    }
+  )
+  .refine(
+    (data) => {
+      if (data.role === userRoles.OWNER) {
+        return data.location?.trim() !== "";
+      }
+      return true;
+    },
+    {
+      message: "가게 위치를 입력해주세요",
+      path: ["location"],
+    }
+  )
   .refine((data) => data.password === data.confirmPassword, {
-    message: "비밀번호가 일치하지 않습니다.",
+    message: "비밀번호가 일치하지 않습니다",
     path: ["confirmPassword"],
   });
 
diff --git a/src/schemas/commonSchema.ts b/src/schemas/commonSchema.ts
index 6e2b41e4..1fc7c591 100644
--- a/src/schemas/commonSchema.ts
+++ b/src/schemas/commonSchema.ts
@@ -1,7 +1,13 @@
+import { formSortOptions, formStatusOptions } from "@/constants/formOptions";
+import { oauthProviders } from "@/constants/oauthProviders";
+import { postSortOptions } from "@/constants/postOptions";
+import { userRoles } from "@/constants/userRoles";
 import { z } from "zod";
 
+// 이메일 스키마
 export const emailSchema = z.string().email("올바른 이메일 형식이 아닙니다.");
 
+// 비밀번호 스키마
 export const passwordSchema = z
   .string()
   .min(8, "비밀번호는 최소 8자 이상이어야 합니다")
@@ -10,6 +16,7 @@ export const passwordSchema = z
     "비밀번호는 영문, 숫자, 특수문자(@$!%*?&#)를 모두 포함해야 합니다"
   );
 
+// 날짜 스키마
 export const dateSchema = z
   .string()
   .datetime({ message: "유효한 ISO 8601 형식의 날짜여야 합니다" })
@@ -18,28 +25,88 @@ export const dateSchema = z
     return isoRegex.test(date);
   }, "UTC 타임존(Z)이 포함된 ISO 8601 형식이어야 합니다");
 
-export const imageUrlSchema = z.string().url("올바른 이미지 URL이 아닙니다.");
+// URL 스키마
+export const urlSchema = z.string().url("올바른 이미지 URL이 아닙니다.");
 
-export const phoneRegex = /^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/;
+// 역할 스키마
+export const roleSchema = z.enum([userRoles.OWNER, userRoles.APPLICANT], {
+  errorMap: () => ({ message: "사장님 또는 지원자를 선택해주세요" }),
+});
+
+// 닉네임 스키마
+export const nicknameSchema = z
+  .string()
+  .min(2, "닉네임은 최소 2자 이상이어야 합니다.")
+  .max(10, "닉네임은 최대 10자까지 가능합니다.")
+  .regex(/^[가-힣a-zA-Z0-9]+$/, "닉네임은 한글, 영문, 숫자만 사용할 수 있습니다.");
+
+// 지원서 정렬 스키마
+export const formSortSchema = z
+  .enum([
+    formSortOptions.MOST_RECENT,
+    formSortOptions.HIGHEST_WAGE,
+    formSortOptions.MOST_APPLIED,
+    formSortOptions.MOST_SCRAPPED,
+  ])
+  .optional()
+  .default(formSortOptions.MOST_RECENT);
+
+// 게시글 상태 스키마
+export const formStatusSchema = z
+  .enum([
+    formStatusOptions.REJECTED,
+    formStatusOptions.INTERVIEW_PENDING,
+    formStatusOptions.INTERVIEW_COMPLETED,
+    formStatusOptions.HIRED,
+  ])
+  .optional()
+  .default(formStatusOptions.REJECTED);
 
-export const phoneSchema = z
+// 게시글 정렬 스키마
+export const postSortSchema = z
+  .enum([postSortOptions.MOST_RECENT, postSortOptions.MOST_COMMENTED, postSortOptions.MOST_LIKED])
+  .optional()
+  .default(postSortOptions.MOST_RECENT);
+
+// 소셜 로그인 제공자 스키마
+export const providerSchema = z.enum([oauthProviders.GOOGLE, oauthProviders.KAKAO], {
+  errorMap: () => ({ message: "지원하지 않는 소셜 로그인 제공자입니다." }),
+});
+
+// 모바일 전화번호 정규식 (010만 허용)
+export const mobilePhoneRegex = /^(010)-?([0-9]{4})-?([0-9]{4})$/;
+
+// 가게용 전화번호 정규식 (010, 070, 02 허용)
+export const storePhoneRegex = /^(02|070|010)-?([0-9]{3,4})-?([0-9]{4})$/;
+
+// 모바일 전화번호 스키마 (010만 허용)
+export const mobilePhoneSchema = z
   .string()
-  .regex(phoneRegex, "올바른 전화번호 형식이 아닙니다")
+  .regex(mobilePhoneRegex, "올바른 휴대폰 번호 형식이 아닙니다 (010-xxxx-xxxx)")
   .transform((val) => {
     const nums = val.replace(/[^0-9]/g, "");
-    if (nums.length === 10) {
-      return `${nums.slice(0, 3)}-${nums.slice(3, 6)}-${nums.slice(6)}`;
+    return `${nums.slice(0, 3)}-${nums.slice(3, 7)}-${nums.slice(7)}`;
+  });
+
+// 가게용 전화번호 스키마 (010, 070, 02 허용)
+export const storePhoneSchema = z
+  .string()
+  .regex(storePhoneRegex, "올바른 전화번호 형식이 아닙니다 (010, 070, 02만 허용)")
+  .transform((val) => {
+    const nums = val.replace(/[^0-9]/g, "");
+    if (nums.startsWith("02")) {
+      if (nums.length === 9) {
+        return `${nums.slice(0, 2)}-${nums.slice(2, 5)}-${nums.slice(5)}`;
+      }
+      if (nums.length === 10) {
+        return `${nums.slice(0, 2)}-${nums.slice(2, 6)}-${nums.slice(6)}`;
+      }
+    }
+    if (nums.startsWith("070")) {
+      return `${nums.slice(0, 3)}-${nums.slice(3, 7)}-${nums.slice(7)}`;
+    }
+    if (nums.length === 11) {
+      return `${nums.slice(0, 3)}-${nums.slice(3, 7)}-${nums.slice(7)}`;
     }
     return val;
   });
-
-export const ROLES = {
-  OWNER: "OWNER",
-  APPLICANT: "APPLICANT",
-} as const;
-
-export const roleSchema = z.enum([ROLES.OWNER, ROLES.APPLICANT], {
-  errorMap: () => ({ message: "사장님 또는 지원자를 선택해주세요" }),
-});
-
-export type Role = z.infer<typeof roleSchema>;
diff --git a/src/schemas/formSchema.ts b/src/schemas/formSchema.ts
new file mode 100644
index 00000000..0330d493
--- /dev/null
+++ b/src/schemas/formSchema.ts
@@ -0,0 +1,27 @@
+import { z } from "zod";
+import { urlSchema } from "./commonSchema";
+
+// 알바폼 생성/수정
+export const formSchema = z.object({
+  isPublic: z.boolean(),
+  hourlyWage: z.number().min(1, "시급을 입력해주세요."),
+  isNegotiableWorkDays: z.boolean(),
+  workDays: z.array(z.string()),
+  workEndTime: z.string(),
+  workStartTime: z.string(),
+  workEndDate: z.string(),
+  workStartDate: z.string(),
+  location: z.string(),
+  preferred: z.string(),
+  age: z.string(),
+  education: z.string(),
+  gender: z.string(),
+  numberOfPositions: z.number().min(1, "모집 인원을 입력해주세요."),
+  imageUrls: z.array(urlSchema),
+  recruitmentEndDate: z.string(),
+  recruitmentStartDate: z.string(),
+  description: z.string(),
+  title: z.string(),
+});
+
+export type FormSchema = z.infer<typeof formSchema>;
diff --git a/src/schemas/oauthSchema.ts b/src/schemas/oauthSchema.ts
new file mode 100644
index 00000000..a873bd3c
--- /dev/null
+++ b/src/schemas/oauthSchema.ts
@@ -0,0 +1,10 @@
+import { z } from "zod";
+import { providerSchema } from "./commonSchema";
+
+// 소셜 로그인
+export const oauthSchema = z.object({
+  appKey: z.string(),
+  provider: providerSchema,
+});
+
+export type OauthSchema = z.infer<typeof oauthSchema>;
diff --git a/src/schemas/postSchema.ts b/src/schemas/postSchema.ts
new file mode 100644
index 00000000..c9d67372
--- /dev/null
+++ b/src/schemas/postSchema.ts
@@ -0,0 +1,11 @@
+import { z } from "zod";
+import { urlSchema } from "./commonSchema";
+
+// 게시글 등록/수정
+export const postSchema = z.object({
+  imageUrl: urlSchema,
+  content: z.string().min(1, "내용을 입력해주세요."),
+  title: z.string().min(1, "제목을 입력해주세요."),
+});
+
+export type PostSchema = z.infer<typeof postSchema>;
diff --git a/src/schemas/userSchema.ts b/src/schemas/userSchema.ts
new file mode 100644
index 00000000..608d4500
--- /dev/null
+++ b/src/schemas/userSchema.ts
@@ -0,0 +1,23 @@
+import { z } from "zod";
+import { nicknameSchema, passwordSchema, mobilePhoneSchema, storePhoneSchema, urlSchema } from "./commonSchema";
+
+// 내 정보 수정 스키마
+export const userPatchSchema = z.object({
+  location: z.string().optional(),
+  phoneNumber: mobilePhoneSchema.optional(),
+  storePhoneNumber: storePhoneSchema.optional(),
+  storeName: z.string().optional(),
+  imageUrl: urlSchema.optional(),
+  nickname: nicknameSchema.optional(),
+  name: z.string().min(1, "이름을 입력해주세요.").optional(),
+});
+
+export type UserPatchSchema = z.infer<typeof userPatchSchema>;
+
+// 비밀번호 변경 스키마
+export const userPasswordSchema = z.object({
+  newPassword: passwordSchema,
+  currentPassword: z.string().min(1, "현재 비밀번호를 입력해주세요."),
+});
+
+export type UserPasswordSchema = z.infer<typeof userPasswordSchema>;
diff --git a/src/store/modalStore.ts b/src/store/modalStore.ts
new file mode 100644
index 00000000..f62a2ea8
--- /dev/null
+++ b/src/store/modalStore.ts
@@ -0,0 +1,20 @@
+import { create } from "zustand";
+import type { ModalPropsMap, ModalType } from "@/types/modal";
+
+interface ModalState {
+  isOpen: boolean;
+  modalType: ModalType | null;
+  modalProps: Partial<ModalPropsMap[keyof ModalPropsMap]>;
+  openModal: <T extends ModalType>(type: T, props: ModalPropsMap[T]) => void;
+  closeModal: () => void;
+}
+
+const useModalStore = create<ModalState>((set) => ({
+  isOpen: false,
+  modalType: null,
+  modalProps: {},
+  openModal: (type, props) => set({ isOpen: true, modalType: type, modalProps: props }),
+  closeModal: () => set({ isOpen: false, modalType: null, modalProps: {} }),
+}));
+
+export default useModalStore;
diff --git a/src/store/mySortStore.ts b/src/store/mySortStore.ts
new file mode 100644
index 00000000..7732cb92
--- /dev/null
+++ b/src/store/mySortStore.ts
@@ -0,0 +1,29 @@
+import { create } from "zustand";
+import { postSortOptions } from "@/constants/postOptions";
+import { formSortOptions } from "@/constants/formOptions";
+
+type MyPageTabType = "posts" | "comments" | "scrap";
+
+interface MySortState {
+  orderBy: {
+    posts: string;
+    comments: string;
+    scrap: string;
+  };
+  setOrderBy: (tabType: MyPageTabType, value: string) => void;
+}
+
+export const useMySortStore = create<MySortState>((set) => ({
+  orderBy: {
+    posts: postSortOptions.MOST_RECENT,
+    comments: postSortOptions.MOST_RECENT,
+    scrap: formSortOptions.MOST_RECENT,
+  },
+  setOrderBy: (tabType, value) =>
+    set((state) => ({
+      orderBy: {
+        ...state.orderBy,
+        [tabType]: value,
+      },
+    })),
+}));
diff --git a/src/store/userStore.ts b/src/store/userStore.ts
deleted file mode 100644
index 53c26dc6..00000000
--- a/src/store/userStore.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { AuthUser } from "@/types/auth";
-import { create } from "zustand";
-
-interface UserState {
-  user: AuthUser | null;
-  loading: boolean;
-  setUser: (user: AuthUser | null) => void;
-  setLoading: (loading: boolean) => void;
-}
-
-export const useUserStore = create<UserState>((set) => ({
-  user: null,
-  loading: true,
-  setUser: (user) => set({ user }),
-  setLoading: (loading) => set({ loading }),
-}));
diff --git a/src/types/addform.d.ts b/src/types/addform.d.ts
new file mode 100644
index 00000000..d86941e6
--- /dev/null
+++ b/src/types/addform.d.ts
@@ -0,0 +1,22 @@
+export interface SubmitFormDataType {
+  isPublic: boolean;
+  hourlyWage: string;
+  isNegotiableWorkDays: boolean;
+  workDays: string[];
+  workEndTime: string;
+  workStartTime: string;
+  workEndDate: string;
+  workStartDate: string;
+  location: string;
+  preferred: string;
+  age: string;
+  education: string;
+  gender: string;
+  numberOfPositions: number;
+  imageUrls: string[];
+  recruitmentEndDate: string | undefined;
+  recruitmentStartDate: string | undefined;
+  description: string;
+  title: string;
+  imageFiles: File[];
+}
diff --git a/src/types/application.ts b/src/types/application.ts
new file mode 100644
index 00000000..aecd2679
--- /dev/null
+++ b/src/types/application.ts
@@ -0,0 +1,9 @@
+export const applicationStatus = {
+  ALL: "",
+  REJECTED: "REJECTED",
+  INTERVIEW_PENDING: "INTERVIEW_PENDING",
+  INTERVIEW_COMPLETED: "INTERVIEW_COMPLETED",
+  HIRED: "HIRED",
+} as const;
+
+export type ApplyStatus = (typeof applicationStatus)[keyof typeof applicationStatus];
diff --git a/src/types/auth.d.ts b/src/types/auth.d.ts
deleted file mode 100644
index e6ea26c3..00000000
--- a/src/types/auth.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export interface AuthUser {
-  id: string;
-  email: string;
-  nickname: string;
-  image: string;
-  teamId: string;
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-export interface AuthResponse {
-  accessToken: string;
-  refreshToken: string;
-  user: User;
-}
diff --git a/src/types/error.ts b/src/types/error.ts
new file mode 100644
index 00000000..b02ccb12
--- /dev/null
+++ b/src/types/error.ts
@@ -0,0 +1,13 @@
+import { AxiosError } from "axios";
+import { ZodError } from "zod";
+
+// 인증 에러 타입 추가
+export class AuthenticationError extends Error {
+  constructor(message: string = "인증이 필요합니다.") {
+    super(message);
+    this.name = "AuthenticationError";
+  }
+}
+
+// AppError 타입 확장
+export type AppError = Error | AxiosError | ZodError | AggregateError | AuthenticationError;
diff --git a/src/types/kakao.d.ts b/src/types/kakao.d.ts
new file mode 100644
index 00000000..2034301f
--- /dev/null
+++ b/src/types/kakao.d.ts
@@ -0,0 +1,63 @@
+interface KakaoLatLng {
+  getLat(): number;
+  getLng(): number;
+  equals(latlng: KakaoLatLng): boolean;
+  toString(): string;
+}
+
+interface KakaoMap {
+  setCenter(latlng: KakaoLatLng): void;
+  getLevel(): number;
+  setLevel(level: number): void;
+}
+
+interface KakaoMarker {
+  setMap(map: KakaoMap | null): void;
+  getPosition(): KakaoLatLng;
+  setPosition(position: KakaoLatLng): void;
+  setImage(image: any): void;
+  setDraggable(draggable: boolean): void;
+  setClickable(clickable: boolean): void;
+  setZIndex(zIndex: number): void;
+  setOpacity(opacity: number): void;
+  setTitle(title: string): void;
+}
+
+interface KakaoMaps {
+  load(callback: () => void): void;
+  services: {
+    Geocoder: new () => {
+      addressSearch(address: string, callback: (result: any[], status: string) => void): void;
+    };
+    Status: {
+      OK: string;
+    };
+  };
+  Map: new (container: HTMLElement, options: { center: KakaoLatLng; level: number }) => KakaoMap;
+  LatLng: new (lat: number, lng: number) => KakaoLatLng;
+  Marker: new (options: {
+    position: KakaoLatLng;
+    map?: KakaoMap;
+    image?: any;
+    title?: string;
+    draggable?: boolean;
+    clickable?: boolean;
+    zIndex?: number;
+    opacity?: number;
+    altitude?: number;
+    range?: number;
+  }) => KakaoMarker;
+  event: {
+    addListener(target: KakaoMap | KakaoMarker, type: string, handler: (...args: any[]) => void): void;
+    removeListener(target: KakaoMap | KakaoMarker, type: string, handler: (...args: any[]) => void): void;
+    trigger(target: KakaoMap | KakaoMarker, type: string, data?: any): void;
+  };
+}
+
+declare global {
+  interface Window {
+    kakao: {
+      maps: KakaoMaps;
+    };
+  }
+}
diff --git a/src/types/modal.d.ts b/src/types/modal.d.ts
new file mode 100644
index 00000000..7200f2ca
--- /dev/null
+++ b/src/types/modal.d.ts
@@ -0,0 +1,70 @@
+export type ModalType =
+  | "applicationDetail"
+  | "formContinue"
+  | "recruitmentClosed"
+  | "customForm"
+  | "deleteForm"
+  | "selectProgress"
+  | "changePassword"
+  | "editMyProfile"
+  | "editOwnerProfile";
+
+type BaseModalProps = {
+  onClose?: () => void;
+};
+
+type FormModalProps = BaseModalProps & {
+  fields: string[];
+  onSubmit: (data: Record<string, string>) => void;
+};
+
+type AlertModalProps = BaseModalProps & {
+  title: string;
+  message?: string;
+  buttonText: string;
+  onButtonClick: () => void;
+};
+
+type CustomFormModalProps = BaseModalProps & {
+  isOpen: boolean;
+  title: string;
+  content: string;
+  className?: string;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  closeOnOverlayClick?: boolean;
+};
+
+type ConfirmFormModalProps = BaseModalProps & {
+  id: string;
+  isOpen: boolean;
+  className?: string;
+  title: string;
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+};
+
+type ApplicationDetailProps = BaseModalProps & {
+  id: string;
+  title: string;
+  applicationDate?: string;
+  applicationStatus?: string;
+  name: string;
+  phone: string;
+  password: string;
+};
+
+export type ModalPropsMap = {
+  applicationDetail: ApplicationDetailProps;
+  formContinue: AlertModalProps;
+  recruitmentClosed: AlertModalProps;
+  customForm: CustomFormModalProps;
+  deleteForm: ConfirmFormModalProps;
+  selectProgress: ConfirmFormModalProps;
+  changePassword: FormModalProps;
+  editMyProfile: FormModalProps;
+  editOwnerProfile: FormModalProps;
+};
diff --git a/src/types/oauth/oauth.d.ts b/src/types/oauth/oauth.d.ts
new file mode 100644
index 00000000..ca4ca5a8
--- /dev/null
+++ b/src/types/oauth/oauth.d.ts
@@ -0,0 +1,22 @@
+export interface OauthSignupUser {
+  location?: string;
+  phoneNumber?: string;
+  storePhoneNumber?: string;
+  storeName?: string;
+  role: string;
+  nickname?: string;
+  name: string;
+  redirectUri?: string;
+  token: string;
+}
+
+export interface OauthLoginUser {
+  redirectUri: string;
+  token: string;
+}
+
+export interface OauthResponse {
+  use: KakaoSignupUser;
+  refreshToken: string;
+  accessToken: string;
+}
diff --git a/src/types/response/application.d.ts b/src/types/response/application.d.ts
new file mode 100644
index 00000000..f2686cdf
--- /dev/null
+++ b/src/types/response/application.d.ts
@@ -0,0 +1,20 @@
+// 지원 등록/상세/수정 응답
+export interface ApplicationResponse {
+  applicantId: number;
+  updatedAt: Date;
+  createdAt: Date;
+  status: string;
+  introduction: string;
+  resumeName: string;
+  resumeId: number;
+  experienceMonths: number;
+  phoneNumber: string;
+  name: string;
+  id: number;
+}
+
+// 지원 목록 응답
+export interface ApplicationListResponse {
+  data: Array<ApplicationResponse>;
+  nextCursor: number | null;
+}
diff --git a/src/types/response/auth.d.ts b/src/types/response/auth.d.ts
new file mode 100644
index 00000000..c19f5ee2
--- /dev/null
+++ b/src/types/response/auth.d.ts
@@ -0,0 +1,8 @@
+import { UserResponse } from "./user";
+
+// 로그인 응답
+export interface AuthResponse {
+  accessToken: string;
+  refreshToken: string;
+  user: UserResponse;
+}
diff --git a/src/types/response/comment.d.ts b/src/types/response/comment.d.ts
new file mode 100644
index 00000000..6984b3be
--- /dev/null
+++ b/src/types/response/comment.d.ts
@@ -0,0 +1,23 @@
+// 댓글 작성자 타입
+export interface WriterType {
+  id: number;
+  nickname: string;
+  imageUrl: string;
+}
+
+// 댓글 작성/수정 타입
+export interface CommentType {
+  id: number;
+  content: string;
+  createdAt: Date;
+  updatedAt: Date;
+  writer: WriterType;
+}
+
+// 댓글 목록 응답
+export interface CommentListResponse {
+  currentPage: number;
+  totalPages: number;
+  totalItemCount: number;
+  data: Array<CommentType>;
+}
diff --git a/src/types/response/form.d.ts b/src/types/response/form.d.ts
new file mode 100644
index 00000000..f2e14d45
--- /dev/null
+++ b/src/types/response/form.d.ts
@@ -0,0 +1,78 @@
+// 알바폼 생성/수정 응답
+export interface FormResponse {
+  updatedAt: Date;
+  createdAt: Date;
+  preferred: string;
+  age: string;
+  education: string;
+  gender: string;
+  numberOfPositions: number;
+  isPublic: boolean;
+  hourlyWage: number;
+  isNegotiableWorkDays: boolean;
+  workDays: Array<string>;
+  workEndTime: string;
+  workStartTime: string;
+  workEndDate: Date;
+  workStartDate: Date;
+  location: string;
+  recruitmentEndDate: Date;
+  recruitmentStartDate: Date;
+  description: string;
+  title: string;
+  ownerId: number;
+  id: number;
+}
+
+// 알바폼 목록 타입
+export interface FormListType {
+  updatedAt: Date;
+  createdAt: Date;
+  isPublic: boolean;
+  scrapCount: number;
+  applyCount: number;
+  imageUrls: Array<string>;
+  recruitmentEndDate: Date;
+  recruitmentStartDate: Date;
+  title: string;
+  id: number;
+}
+
+// 알바폼 목록 응답
+export interface FormListResponse {
+  data: Array<FormListType>;
+  nextCursor: number | null;
+}
+
+// 알바폼 상세 조회/스크랩 응답
+export interface FormDetailResponse {
+  updatedAt: string;
+  createdAt: string;
+  preferred: string;
+  age: string;
+  education: string;
+  gender: string;
+  numberOfPositions: number;
+  isPublic: boolean;
+  hourlyWage: number;
+  isNegotiableWorkDays: boolean;
+  workDays: Array<string>;
+  workEndTime: string;
+  workStartTime: string;
+  workEndDate: string;
+  workStartDate: string;
+  location: string;
+  imageUrls: Array<string>;
+  recruitmentEndDate: string;
+  recruitmentStartDate: string;
+  description: string;
+  title: string;
+  ownerId: number;
+  id: number;
+  scrapCount: number;
+  applyCount: number;
+  isScrapped: boolean;
+  phoneNumber: string;
+  storePhoneNumber: string;
+  storeName: string;
+}
diff --git a/src/types/response/post.d.ts b/src/types/response/post.d.ts
new file mode 100644
index 00000000..3f5f1fac
--- /dev/null
+++ b/src/types/response/post.d.ts
@@ -0,0 +1,39 @@
+// 게시글 작성자 타입
+export interface WriterType {
+  id: number;
+  nickname: string;
+  imageUrl: string;
+}
+
+// 게시글 등록/상세/수정/좋아요 응답
+export interface PostDetailResponse {
+  writer: WriterType;
+  updatedAt: Date;
+  createdAt: Date;
+  commentCount: number;
+  likeCount: number;
+  imageUrl: string;
+  content: string;
+  title: string;
+  id: number;
+  isLiked: boolean;
+}
+
+// 게시글 목록 타입
+export interface PostListType {
+  writer: WriterType;
+  updatedAt: Date;
+  createdAt: Date;
+  commentCount: number;
+  likeCount: number;
+  imageUrl: string;
+  content: string;
+  title: string;
+  id: number;
+}
+
+// 게시글 목록 응답
+export interface PostListResponse {
+  data: Array<PostListType>;
+  nextCursor: number | null;
+}
diff --git a/src/types/response/resume.d.ts b/src/types/response/resume.d.ts
new file mode 100644
index 00000000..75995ba6
--- /dev/null
+++ b/src/types/response/resume.d.ts
@@ -0,0 +1,5 @@
+// 이력서 업로드 응답
+export interface ResumeUploadResponse {
+  resumeName: string;
+  resumeId: number;
+}
diff --git a/src/types/response/user.d.ts b/src/types/response/user.d.ts
new file mode 100644
index 00000000..cd693fe8
--- /dev/null
+++ b/src/types/response/user.d.ts
@@ -0,0 +1,77 @@
+import { FormListType } from "./form";
+import { PostListType } from "./post";
+
+// 유저 응답
+export interface UserResponse {
+  location: string;
+  phoneNumber: string;
+  storePhoneNumber: string;
+  storeName: string;
+  role: string;
+  imageUrl: string;
+  nickname: string;
+  name: string;
+  email: string;
+  id: number;
+}
+
+// 내가 생성한 또는 스크랩한 알바폼 목록 응답
+export interface MyFormListResponse {
+  data: Array<FormListType>;
+  nextCursor: number | null;
+}
+
+// 내가 지원한 알바폼 타입
+export interface MyApplicationType {
+  updatedAt: Date;
+  createdAt: Date;
+  status: string;
+  resumeName: string;
+  resumeId: number;
+  form: {
+    owner: {
+      imageUrl: string;
+      storeName: string;
+      id: number;
+    };
+    recruitmentEndDate: Date;
+    recruitmentStartDate: Date;
+    description: string;
+    title: string;
+    id: number;
+  };
+  id: number;
+}
+
+// 내가 지원한 알바폼 목록 응답
+export interface MyApplicationListResponse {
+  data: Array<MyApplicationType>;
+  nextCursor: number | null;
+}
+
+// 내가 작성한 게시글 목록 응답
+export interface MyPostListResponse {
+  data: Array<PostListType>;
+  nextCursor: number | null;
+}
+
+// 내가 작성한 댓글 타입
+export interface MyCommentType {
+  post: {
+    content: string;
+    title: string;
+    id: number;
+  };
+  updatedAt: Date;
+  createdAt: Date;
+  content: string;
+  id: number;
+}
+
+// 내가 작성한 댓글 목록 응답
+export interface MyCommentListResponse {
+  data: Array<MyCommentType>;
+  totalCount: number;
+  currentPage: number;
+  totalItemCount: number;
+}
diff --git a/src/types/textInput.d.ts b/src/types/textInput.d.ts
index daff70a5..dffb186b 100644
--- a/src/types/textInput.d.ts
+++ b/src/types/textInput.d.ts
@@ -1,10 +1,34 @@
-export interface BaseTextAreaProps {
-  name: string;
+export interface BaseTextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  variant: "white" | "transparent";
+  size?: string;
+  errormessage?: string;
+  wrapperClassName?: string;
+  innerClassName?: string;
+}
+
+export interface BaseInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   variant: "white" | "transparent";
-  rules?: boolean;
   size?: string;
-  placeholder?: string;
-  className?: string;
-  disabled?: boolean;
-  errorMessage?: string;
+  errormessage?: string | boolean;
+  feedbackMessage?: string;
+  beforeIcon?: React.ReactNode;
+  afterIcon?: React.ReactNode;
+  afterString?: string;
+  wrapperClassName?: string;
+  innerClassName?: string;
+  anotherHoverStyle?: string;
+}
+
+export interface BaseFileInputProps {
+  name: string;
+  variant: "upload" | "download";
+  size?: string;
+  file?: File | null;
+  onFileAction?: (file: File | null) => void;
+  icon?: React.ReactNode;
+  actionIcon?: React.ReactNode;
+  placeholder: string;
+  onChange?: (event: Event) => void;
+  accept?: string;
+  isImage?: boolean;
 }
diff --git a/src/types/user.d.ts b/src/types/user.d.ts
deleted file mode 100644
index 42f4025d..00000000
--- a/src/types/user.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export interface UserDetail {
-  location: string;
-  phoneNumber: string;
-  storePhoneNumber: string;
-  storeName: string;
-  role: string;
-  imageUrl: string;
-  nickname: string;
-  name: string;
-  email: string;
-  id: number;
-}
diff --git a/src/utils/checkS3Url.ts b/src/utils/checkS3Url.ts
new file mode 100644
index 00000000..00db4372
--- /dev/null
+++ b/src/utils/checkS3Url.ts
@@ -0,0 +1,6 @@
+import { S3_URL } from "@/constants/config";
+
+// S3 URL 체크 함수
+export const isValidS3Url = (url: string) => {
+  return url.startsWith(S3_URL);
+};
diff --git a/src/utils/cleanedParameters.ts b/src/utils/cleanedParameters.ts
new file mode 100644
index 00000000..7508e461
--- /dev/null
+++ b/src/utils/cleanedParameters.ts
@@ -0,0 +1,16 @@
+/**
+ * URL 쿼리 파라미터에서 null, undefined, 빈 문자열, 'null' 문자열을 제거하는 함수
+ * @param params - 정제할 파라미터 객체
+ * @returns 정제된 파라미터 객체
+ */
+export const cleanedParameters = (params: Record<string, string | null>) => {
+  return Object.entries(params).reduce(
+    (acc, [key, value]) => {
+      if (value !== null && value !== undefined && value !== "" && value !== "null") {
+        acc[key] = value;
+      }
+      return acc;
+    },
+    {} as Record<string, string>
+  );
+};
diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts
new file mode 100644
index 00000000..e1e682b3
--- /dev/null
+++ b/src/utils/debounce.ts
@@ -0,0 +1,13 @@
+const debounce = (func: any, delay: number) => {
+  let timeoutId: NodeJS.Timeout;
+
+  return (...args: any[]) => {
+    clearTimeout(timeoutId);
+
+    timeoutId = setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+};
+
+export default debounce;
diff --git a/src/utils/formatMoney.ts b/src/utils/formatMoney.ts
new file mode 100644
index 00000000..07f13486
--- /dev/null
+++ b/src/utils/formatMoney.ts
@@ -0,0 +1,9 @@
+const formatMoney = (value: string) => {
+  let numericValue = value.replaceAll(/,/g, "");
+  if (numericValue.startsWith("0")) {
+    numericValue = numericValue.slice(1);
+  }
+  const formatNumber = numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return formatNumber;
+};
+export default formatMoney;
diff --git a/src/utils/formatters.ts b/src/utils/formatters.ts
index 81e9a8b8..1a5a822c 100644
--- a/src/utils/formatters.ts
+++ b/src/utils/formatters.ts
@@ -2,6 +2,17 @@ export const formatDate = (date: string): string => {
   return new Date(date).toLocaleDateString("ko-KR");
 };
 
+export const formatDateTime = (date: string): string => {
+  const d = new Date(date);
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1);
+  const day = String(d.getDate());
+  const hours = String(d.getHours());
+  const minutes = String(d.getMinutes()).padStart(2, "0");
+
+  return `${year}년 ${month}월 ${day}일 ${hours}:${minutes}`;
+};
+
 export const formatCurrency = (amount: number): string => {
   return new Intl.NumberFormat("ko-KR", {
     style: "currency",
diff --git a/src/utils/getErrorMessage.ts b/src/utils/getErrorMessage.ts
new file mode 100644
index 00000000..5231757d
--- /dev/null
+++ b/src/utils/getErrorMessage.ts
@@ -0,0 +1,22 @@
+import { AxiosError } from "axios";
+import { ZodError } from "zod";
+import { AuthenticationError } from "../types/error"; // 인증 에러 추가
+
+export function getErrorMessage(error: Error): string {
+  if (error instanceof ZodError) {
+    return "잘못된 입력입니다. 데이터를 확인해주세요.";
+  }
+  if (error instanceof AxiosError) {
+    if (error.response?.status === 401) {
+      return "인증되지 않았습니다. 로그인 해주세요.";
+    }
+    if (error.response?.status === 403) {
+      return "이 리소스에 접근할 권한이 없습니다.";
+    }
+    return error.response?.data?.message || "데이터를 가져오지 못했습니다.";
+  }
+  if (error instanceof AuthenticationError) {
+    return error.message;
+  }
+  return error.message || "알 수 없는 에러가 발생했습니다.";
+}
diff --git a/src/utils/getMetaContentByProperty.ts b/src/utils/getMetaContentByProperty.ts
new file mode 100644
index 00000000..8020a53e
--- /dev/null
+++ b/src/utils/getMetaContentByProperty.ts
@@ -0,0 +1,8 @@
+const getMetaContentByProperty = (property: string) => {
+  const metaTag = document.querySelector(`meta[property='${property}']`) as HTMLMetaElement;
+  console.log("getMetaContentByProperty metaTag 출력", metaTag);
+
+  return metaTag ? metaTag.content : null;
+};
+
+export default getMetaContentByProperty;
diff --git a/src/utils/handleError.ts b/src/utils/handleError.ts
new file mode 100644
index 00000000..94dc50b7
--- /dev/null
+++ b/src/utils/handleError.ts
@@ -0,0 +1,40 @@
+import { AxiosError } from "axios";
+import { ZodError } from "zod";
+import { AuthenticationError } from "../types/error";
+
+type AppError = Error | AxiosError | ZodError | AggregateError | AuthenticationError;
+
+export function handleError(error: AppError) {
+  // ZodError 처리
+  if (error instanceof ZodError) {
+    console.error("Validation Error:", error.errors);
+    return;
+  }
+
+  // AxiosError 처리
+  if (error instanceof AxiosError) {
+    const status = error.response?.status;
+
+    if (status === 401 || status === 403) {
+      console.error("Authentication Error:", error.response?.data || error.message);
+    } else {
+      console.error("API Error:", error.response?.data || error.message);
+    }
+    return;
+  }
+
+  // AggregateError 처리
+  if (error instanceof AggregateError) {
+    console.error("Multiple Errors:", error.errors);
+    return;
+  }
+
+  // AuthenticationError 처리
+  if (error instanceof AuthenticationError) {
+    console.error("Authentication Error:", error.message);
+    return;
+  }
+
+  // 기본 처리 (예상치 못한 에러)
+  console.error("General Error:", error.message || "An unknown error occurred.");
+}
diff --git a/src/utils/kakaoShare.ts b/src/utils/kakaoShare.ts
new file mode 100644
index 00000000..cc50ca08
--- /dev/null
+++ b/src/utils/kakaoShare.ts
@@ -0,0 +1,52 @@
+declare global {
+  interface Window {
+    Kakao: any;
+  }
+}
+
+export const handleShare = (templateArgs: {
+  title: string;
+  description: string;
+  imageUrl: string;
+  mobileWebUrl: string;
+  webUrl: string;
+}) => {
+  if (typeof window === "undefined" || !window.Kakao) {
+    alert("카카오 SDK가 로드되지 않았습니다.");
+    return;
+  }
+
+  const { Kakao } = window;
+
+  if (!Kakao.isInitialized()) {
+    alert("카카오 SDK가 초기화되지 않았습니다.");
+    return;
+  }
+
+  try {
+    Kakao.Share.sendDefault({
+      objectType: "feed", // 피드 템플릿
+      content: {
+        title: templateArgs.title, // 공유할 제목
+        description: templateArgs.description, // 설명
+        imageUrl: templateArgs.imageUrl, // 공유할 이미지 URL
+        link: {
+          mobileWebUrl: templateArgs.mobileWebUrl, // 모바일 웹 URL
+          webUrl: templateArgs.webUrl, // 웹 URL
+        },
+      },
+      buttons: [
+        {
+          title: "자세히 보기", // 버튼 제목
+          link: {
+            mobileWebUrl: templateArgs.mobileWebUrl, // 버튼 클릭 시 이동할 URL
+            webUrl: templateArgs.webUrl, // 버튼 클릭 시 이동할 URL
+          },
+        },
+      ],
+    });
+  } catch (error) {
+    console.error("카카오 공유 중 오류 발생:", error);
+    alert("공유 중 오류가 발생했습니다. 콘솔을 확인하세요.");
+  }
+};
diff --git a/src/utils/oauthLoginError.ts b/src/utils/oauthLoginError.ts
new file mode 100644
index 00000000..ac54f41d
--- /dev/null
+++ b/src/utils/oauthLoginError.ts
@@ -0,0 +1,10 @@
+export class RedirectError extends Error {
+  redirectPath: string;
+
+  constructor(redirectPath: string) {
+    super("Redirect required");
+    this.redirectPath = redirectPath;
+
+    Object.setPrototypeOf(this, RedirectError.prototype);
+  }
+}
diff --git a/src/utils/recruitDateFormatter.ts b/src/utils/recruitDateFormatter.ts
new file mode 100644
index 00000000..ee5416cb
--- /dev/null
+++ b/src/utils/recruitDateFormatter.ts
@@ -0,0 +1,28 @@
+export const getRecruitmentStatus = (endDate: Date): "모집 중" | "모집 종료" => {
+  const today = new Date();
+  const recruitmentEndDate = new Date(endDate);
+
+  // 시간을 00:00:00으로 설정하여 날짜만 비교
+  today.setHours(0, 0, 0, 0);
+  recruitmentEndDate.setHours(0, 0, 0, 0);
+
+  return today <= recruitmentEndDate ? "모집 중" : "모집 종료";
+};
+
+export const getRecruitmentDday = (endDate: Date): string => {
+  const today = new Date();
+  const recruitmentEndDate = new Date(endDate);
+
+  // 시간을 00:00:00으로 설정하여 날짜만 비교
+  today.setHours(0, 0, 0, 0);
+  recruitmentEndDate.setHours(0, 0, 0, 0);
+
+  const diffTime = recruitmentEndDate.getTime() - today.getTime();
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+  if (diffDays < 0) {
+    return "마감";
+  }
+
+  return `마감 D-${diffDays}`;
+};
diff --git a/src/utils/renameFile.ts b/src/utils/renameFile.ts
new file mode 100644
index 00000000..1354d16a
--- /dev/null
+++ b/src/utils/renameFile.ts
@@ -0,0 +1,12 @@
+// 파일 이름을 임의의 값으로 수정하는 함수(한글 파일명 인코딩 방지)
+
+const renameFile = (file: File) => {
+  const now = new Date();
+  const timestamp = now.toISOString().replace(/[-:T]/g, "").slice(0, 14);
+  const fileExtension = file.name.split(".").pop(); // 확장자 추출
+  const newFileName = `${timestamp}.${fileExtension}`; // 새로운 이름 생성
+
+  const renamedFile = new File([file], newFileName, { type: file.type });
+  return renamedFile;
+};
+export default renameFile;
diff --git a/src/utils/shareToKakao.ts b/src/utils/shareToKakao.ts
new file mode 100644
index 00000000..43b7c601
--- /dev/null
+++ b/src/utils/shareToKakao.ts
@@ -0,0 +1,27 @@
+import getMetaContentByProperty from "./getMetaContentByProperty";
+
+const shareToKakao = () => {
+  const { Kakao, location } = window;
+
+  const url = String(new URL(location.href));
+
+  const ogTitle = getMetaContentByProperty("og:title") || "WorkRoot";
+  const ogDescription =
+    getMetaContentByProperty("og:description") || `🌳 "일"을 통해 자신의 뿌리를 내리며 "성장"하는 구인구직 사이트`;
+  const ogImage = getMetaContentByProperty("og:image") || "/logo.svg";
+
+  Kakao.Link.sendDefault({
+    objectType: "feed",
+    content: {
+      title: ogTitle,
+      description: ogDescription,
+      imageUrl: ogImage,
+      link: {
+        mobileWebUrl: url,
+        webUrl: url,
+      },
+    },
+  });
+};
+
+export default shareToKakao;
diff --git a/src/utils/tempSave.ts b/src/utils/tempSave.ts
new file mode 100644
index 00000000..9c2cb885
--- /dev/null
+++ b/src/utils/tempSave.ts
@@ -0,0 +1,11 @@
+import toast from "react-hot-toast";
+
+// 폼데이터 임시 저장 함수
+const tempSave = async (name: string, data: any) => {
+  if (typeof window !== "undefined") {
+    window.localStorage.setItem(name, JSON.stringify(data));
+  }
+  toast.success("임시 저장되었습니다.");
+  console.log("임시저장 데이터", data);
+};
+export default tempSave;
diff --git a/src/utils/translateStatus.ts b/src/utils/translateStatus.ts
new file mode 100644
index 00000000..1236dd12
--- /dev/null
+++ b/src/utils/translateStatus.ts
@@ -0,0 +1,34 @@
+import { applicationStatus, ApplyStatus } from "@/types/application";
+
+// 지원 상태에 따른 Chip 컴포넌트의 variant를 반환하는 함수
+export const getStatusVariant = (status: ApplyStatus) => {
+  switch (status) {
+    case applicationStatus.HIRED:
+      return "positive";
+    case applicationStatus.REJECTED:
+      return "negative";
+    default:
+      return "positive";
+  }
+};
+
+// 상태를 한글로 변환하는 함수
+const statusMap: { [key: string]: string } = {
+  ALL: "전체",
+  HIRED: "채용 완료",
+  REJECTED: "거절",
+  INTERVIEW_PENDING: "면접 대기",
+  INTERVIEW_COMPLETED: "면접 완료",
+};
+
+// 상태를 변환하는 함수
+export const getStatusMap = (status: ApplyStatus) => {
+  return statusMap[status] || status;
+};
+
+// 기본 내보내기
+const translateStatus = (status: ApplyStatus) => {
+  return getStatusMap(status);
+};
+
+export default translateStatus;
diff --git a/src/utils/uploadResume.ts b/src/utils/uploadResume.ts
new file mode 100644
index 00000000..1e810788
--- /dev/null
+++ b/src/utils/uploadResume.ts
@@ -0,0 +1,31 @@
+import axios from "axios";
+import toast from "react-hot-toast";
+
+// 이력서 업로드 api -> id, name 반환
+const uploadResume = async (file: FileList) => {
+  const uploadedFile: { resumeName: string; resumeId: number } = {
+    resumeName: "",
+    resumeId: 0,
+  };
+  const formData = new FormData();
+  formData.append("file", file[0]);
+  try {
+    const response = await axios.post(`/api/resume/upload`, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+      timeout: 5000, // 5초 타임아웃 설정
+    });
+    console.log("이력서 업로드", response.data);
+    return {
+      resumeName: response.data.resumeName,
+      resumeId: response.data.resumeId,
+    };
+  } catch (error) {
+    console.error("Error uploading resume:", error);
+    toast.error("이력서 업로드에 실패했습니다.");
+  }
+  return uploadedFile;
+};
+
+export default uploadResume;
diff --git a/src/utils/workDayFormatter.ts b/src/utils/workDayFormatter.ts
new file mode 100644
index 00000000..0de3774c
--- /dev/null
+++ b/src/utils/workDayFormatter.ts
@@ -0,0 +1,60 @@
+import { workDayOptions } from "@/constants/workDayOptions";
+
+export const formatLocalDate = (date: Date, isMd: boolean = false) => {
+  // 유효한 Date 객체인지 확인
+  if (!(date instanceof Date) || isNaN(date.getTime())) {
+    return new Date().toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" });
+  }
+
+  const year = isMd ? date.getFullYear().toString() : date.getFullYear().toString().slice(2);
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}.${month}.${day}`;
+};
+
+export const getWorkDaysDisplay = (isNegotiableWorkDays: boolean, workDays: string[] = []) => {
+  if (isNegotiableWorkDays) return "요일 협의";
+  if (!workDays.length) return "-";
+
+  // 요일 순서 정의
+  const dayOrder = ["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY", "SATURDAY", "SUNDAY"];
+
+  // 한글 요일을 영어 요일로 변환
+  const translatedWorkDays = workDays.map((day) => {
+    const key = (Object.keys(workDayOptions) as Array<keyof typeof workDayOptions>).find(
+      (k) => workDayOptions[k] === day
+    );
+    return key ? key : day; // 변환된 요일 또는 원래 요일 반환
+  });
+
+  // 유효한 요일만 필터링
+  const validWorkDays = translatedWorkDays.filter((day) => dayOrder.includes(day));
+  const sortedDays = validWorkDays.sort((a, b) => dayOrder.indexOf(a) - dayOrder.indexOf(b));
+  // console.log("getWorkDaysDisplay", sortedDays);
+
+  const result: string[] = [];
+  let startDay = sortedDays[0];
+  let prevIndex = dayOrder.indexOf(sortedDays[0]);
+
+  for (let i = 1; i <= sortedDays.length; i++) {
+    const currentDay = sortedDays[i];
+    const currentIndex = currentDay ? dayOrder.indexOf(currentDay) : -1;
+
+    if (i === sortedDays.length || currentIndex !== prevIndex + 1) {
+      // 연속되지 않은 경우나 마지막 요일인 경우
+      const endDay = sortedDays[i - 1];
+      const startDayKor = workDayOptions[startDay as keyof typeof workDayOptions];
+      const endDayKor = workDayOptions[endDay as keyof typeof workDayOptions];
+
+      if (startDay === endDay) {
+        result.push(startDayKor);
+      } else {
+        result.push(`${startDayKor}~${endDayKor}`);
+      }
+      startDay = currentDay;
+    }
+    prevIndex = currentIndex;
+  }
+
+  return result.filter((day) => day).join(", "); // 빈 문자열 필터링 후 join
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1cdbcaa9..002749dc 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -5,7 +5,7 @@ const config: Config = {
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-    "./stories/**/*.{js,ts,jsx,tsx}", // Storybook의 스토리 파일 경로 추가
+    "./stories/**/*.{js,ts,jsx,tsx}",
     "./src/app/globals.css",
     "./src/stories/**/*.{js,ts,jsx,tsx,mdx}",
   ],
@@ -20,7 +20,8 @@ const config: Config = {
           400: "#1F1F1F",
           500: "#040404",
         },
-        gray: {
+        grayscale: {
+          50: "#FFFFFF",
           100: "#DEDEDE",
           200: "#C4C4C4",
           300: "#ABABAB",
@@ -55,18 +56,9 @@ const config: Config = {
         },
       },
       fontFamily: {
-        nexon: [
-          "NEXON Lv1 Gothic OTF",
-          "sans-serif",
-          "-apple-system",
-          "BlinkMacSystemFont",
-          "system-ui",
-          "Helvetica Neue",
-          "Apple SD Gothic Neo",
-          "sans-serif",
-          "sans-serif",
-        ],
+        nexon: ["NEXON Lv1 Gothic OTF", "sans-serif"],
         school: ["HakgyoansimDunggeunmisoTTF-R", "HakgyoansimDunggeunmisoTTF-B", "sans-serif"],
+        sans: ["Pretendard", "sans-serif"],
       },
     },
   },
diff --git a/tsconfig.json b/tsconfig.json
index 9a91796c..34179cf2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,8 +20,10 @@
     "paths": {
       "@/*": ["./src/*"]
     },
-    "types": ["./src/types/auth", "@hookform/resolvers"]
+    "baseUrl": ".",
+    "typeRoots": ["./node_modules/@types"],
+    "downlevelIteration": true // 이 플래그를 추가
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "custom.d.ts"],
-  "exclude": ["node_modules"]
+  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx", ".next/types/**/*.ts", "custom.d.ts", "kakao.maps.d.ts"],
+  "exclude": ["node_modules", ".next", ".storybook", "storybook-static"]
 }