From eb37a25a2056bd07635b97a0637cdb6a4d786485 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Mon, 30 Jun 2025 15:57:40 +0900
Subject: [PATCH 1/6] Update devup.json

---
 apps/landing/devup.json | 64 +++++++++++++++++++++++++++++------------
 1 file changed, 45 insertions(+), 19 deletions(-)

diff --git a/apps/landing/devup.json b/apps/landing/devup.json
index ecf8808d..9055ce58 100644
--- a/apps/landing/devup.json
+++ b/apps/landing/devup.json
@@ -38,7 +38,7 @@
                 "kakaoButtonActive": "#B77D00"
             },
             "dark": {
-                "primary": "#737FE4",
+                "primary": "#6670F9",
                 "secondary": "#2A4586",
                 "link": "#006BFF",
                 "text": "#EDEDED",
@@ -237,7 +237,7 @@
                 {
                     "fontFamily": "Pretendard",
                     "fontStyle": "normal",
-                    "fontWeight": 600,
+                    "fontWeight": 700,
                     "fontSize": "24px",
                     "lineHeight": 1.3,
                     "letterSpacing": "-0.03em"
@@ -350,7 +350,7 @@
                 {
                     "fontFamily": "Pretendard",
                     "fontStyle": "normal",
-                    "fontWeight": 600,
+                    "fontWeight": 700,
                     "fontSize": "30px",
                     "lineHeight": 1.3,
                     "letterSpacing": "-0.03em"
@@ -427,14 +427,27 @@
                     "letterSpacing": "-0.03em"
                 }
             ],
-            "captionBold": {
-                "fontFamily": "Pretendard",
-                "fontStyle": "normal",
-                "fontWeight": 700,
-                "fontSize": "14px",
-                "lineHeight": 1.3,
-                "letterSpacing": "-0.03em"
-            },
+            "captionBold": [
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 700,
+                    "fontSize": "13px",
+                    "lineHeight": 1.3,
+                    "letterSpacing": "-0.03em"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 700,
+                    "fontSize": "14px",
+                    "lineHeight": 1.3,
+                    "letterSpacing": "-0.03em"
+                }
+            ],
             "textSbold": {
                 "fontFamily": "Pretendard",
                 "fontStyle": "normal",
@@ -485,14 +498,27 @@
                     "letterSpacing": "-0.03em"
                 }
             ],
-            "bodyReg": {
-                "fontFamily": "Pretendard",
-                "fontStyle": "normal",
-                "fontWeight": 400,
-                "fontSize": "16px",
-                "lineHeight": 1.5,
-                "letterSpacing": "-0.03em"
-            },
+            "bodyReg": [
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 400,
+                    "fontSize": "14px",
+                    "lineHeight": 1.5,
+                    "letterSpacing": "-0.03em"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 400,
+                    "fontSize": "16px",
+                    "lineHeight": 1.5,
+                    "letterSpacing": "-0.03em"
+                }
+            ],
             "smallBold": {
                 "fontFamily": "Pretendard",
                 "fontStyle": "normal",

From 2ae27cf1c049c13f20f12606d3f40128dbd2ca86 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Mon, 30 Jun 2025 16:37:38 +0900
Subject: [PATCH 2/6] Publish components page with card images

---
 .../public/images/components/button.svg       |  10 +
 .../public/images/components/checkbox.svg     |  10 +
 .../public/images/components/color-picker.svg |  34 ++
 .../public/images/components/date-picker.svg  |  41 ++
 .../public/images/components/dropdown.svg     |   9 +
 .../public/images/components/label.svg        |   7 +
 .../images/components/layout/bottom-sheet.svg |  10 +
 .../images/components/layout/confirm.svg      |   9 +
 .../images/components/layout/footer.svg       |  10 +
 .../images/components/layout/header.svg       |  11 +
 .../public/images/components/layout/menu.svg  |   7 +
 .../images/components/layout/snackbar.svg     |   8 +
 .../public/images/components/layout/tab.svg   |  10 +
 .../images/components/layout/tooltip.svg      |  19 +
 .../public/images/components/pagination.svg   |  12 +
 .../public/images/components/progress-bar.svg |  16 +
 .../public/images/components/radio.svg        |   9 +
 .../public/images/components/search.svg       |   5 +
 .../public/images/components/select.svg       |   6 +
 .../public/images/components/slider.svg       |  20 +
 .../public/images/components/stepper.svg      |   8 +
 .../public/images/components/text-area.svg    |   5 +
 .../public/images/components/text-box.svg     |  16 +
 .../images/components/theme/theme-button.svg  |   4 +
 .../public/images/components/toggle.svg       |   4 +
 .../public/images/components/uploader.svg     |  15 +
 .../src/app/(detail)/components/Card.tsx      |  23 +
 .../src/app/(detail)/components/layout.tsx    |  28 ++
 .../src/app/(detail)/components/page.tsx      | 460 ++++++++++++++++++
 apps/landing/src/components/Header/index.tsx  |  10 +
 30 files changed, 836 insertions(+)
 create mode 100644 apps/landing/public/images/components/button.svg
 create mode 100644 apps/landing/public/images/components/checkbox.svg
 create mode 100644 apps/landing/public/images/components/color-picker.svg
 create mode 100644 apps/landing/public/images/components/date-picker.svg
 create mode 100644 apps/landing/public/images/components/dropdown.svg
 create mode 100644 apps/landing/public/images/components/label.svg
 create mode 100644 apps/landing/public/images/components/layout/bottom-sheet.svg
 create mode 100644 apps/landing/public/images/components/layout/confirm.svg
 create mode 100644 apps/landing/public/images/components/layout/footer.svg
 create mode 100644 apps/landing/public/images/components/layout/header.svg
 create mode 100644 apps/landing/public/images/components/layout/menu.svg
 create mode 100644 apps/landing/public/images/components/layout/snackbar.svg
 create mode 100644 apps/landing/public/images/components/layout/tab.svg
 create mode 100644 apps/landing/public/images/components/layout/tooltip.svg
 create mode 100644 apps/landing/public/images/components/pagination.svg
 create mode 100644 apps/landing/public/images/components/progress-bar.svg
 create mode 100644 apps/landing/public/images/components/radio.svg
 create mode 100644 apps/landing/public/images/components/search.svg
 create mode 100644 apps/landing/public/images/components/select.svg
 create mode 100644 apps/landing/public/images/components/slider.svg
 create mode 100644 apps/landing/public/images/components/stepper.svg
 create mode 100644 apps/landing/public/images/components/text-area.svg
 create mode 100644 apps/landing/public/images/components/text-box.svg
 create mode 100644 apps/landing/public/images/components/theme/theme-button.svg
 create mode 100644 apps/landing/public/images/components/toggle.svg
 create mode 100644 apps/landing/public/images/components/uploader.svg
 create mode 100644 apps/landing/src/app/(detail)/components/Card.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/layout.tsx
 create mode 100644 apps/landing/src/app/(detail)/components/page.tsx

diff --git a/apps/landing/public/images/components/button.svg b/apps/landing/public/images/components/button.svg
new file mode 100644
index 00000000..c60ce22b
--- /dev/null
+++ b/apps/landing/public/images/components/button.svg
@@ -0,0 +1,10 @@
+<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="69.5" y="30.5" width="119" height="35" rx="7.5" stroke="#C8C7D1"/>
+<rect x="69" y="74" width="120" height="36" rx="8" fill="#6159D4"/>
+<path d="M182.954 106.629V102.615C182.954 102.615 182.954 101.277 184.292 101.277C185.63 101.277 185.63 102.615 185.63 102.615V106.629" fill="#FFFFFE"/>
+<path d="M185.63 106.629L185.63 103.284C185.63 103.284 185.63 101.946 186.967 101.946C188.305 101.946 188.305 103.284 188.305 103.284V106.629" fill="#FFFFFE"/>
+<path d="M188.305 106.629L188.305 103.953C188.305 103.953 188.305 102.615 189.643 102.615C190.981 102.615 190.981 103.953 190.981 103.953V110.309C190.981 110.309 191.65 116.998 184.961 116.998C184.961 116.998 182.5 117.129 180.278 114.991L175.595 109.64C175.595 109.64 174.257 108.302 175.595 106.964C175.595 106.964 176.598 105.96 178.271 107.633L179.432 108.794C179.744 109.106 180.278 108.885 180.278 108.444V97.5977C180.278 97.5977 180.278 96.2598 181.616 96.2598C182.954 96.2598 182.954 97.5977 182.954 97.5977V106.629" fill="#FFFFFE"/>
+<path d="M182.954 106.629V102.615C182.954 102.615 182.954 101.277 184.292 101.277C185.63 101.277 185.63 102.615 185.63 102.615V106.629L185.63 103.284C185.63 103.284 185.63 101.946 186.967 101.946C188.305 101.946 188.305 103.284 188.305 103.284V106.629L188.305 103.953C188.305 103.953 188.305 102.615 189.643 102.615C190.981 102.615 190.981 103.953 190.981 103.953V110.309C190.981 110.309 191.65 116.998 184.961 116.998C184.961 116.998 182.5 117.129 180.278 114.991L175.595 109.64C175.595 109.64 174.257 108.302 175.595 106.964C175.595 106.964 176.598 105.96 178.271 107.633L179.432 108.794C179.744 109.106 180.278 108.885 180.278 108.444V97.5977C180.278 97.5977 180.278 96.2598 181.616 96.2598C182.954 96.2598 182.954 97.5977 182.954 97.5977V106.629Z" stroke="#000001" stroke-miterlimit="10"/>
+<path d="M109.806 47.5742C109.689 46.707 109.068 46.1562 108.118 46.1562C106.864 46.1562 106.103 47.1055 106.103 48.7578C106.103 50.4688 106.888 51.3594 108.107 51.3594C109.021 51.3594 109.653 50.8672 109.806 50.0352L111.821 50.0469C111.657 51.5586 110.368 53.1172 108.071 53.1172C105.775 53.1172 104.064 51.5469 104.064 48.7578C104.064 45.957 105.81 44.3984 108.071 44.3984C110.11 44.3984 111.61 45.5469 111.821 47.5742H109.806ZM114.59 44.5156V53H112.61V44.5156H114.59ZM115.496 53V46.6367H117.476V53H115.496ZM116.492 45.875C115.93 45.875 115.473 45.4531 115.473 44.9258C115.473 44.3984 115.93 43.9766 116.492 43.9766C117.055 43.9766 117.523 44.3984 117.523 44.9258C117.523 45.4531 117.055 45.875 116.492 45.875ZM121.335 53.1172C119.331 53.1172 118.136 51.7812 118.136 49.8359C118.136 47.8906 119.343 46.5547 121.335 46.5547C123.081 46.5547 124.218 47.5625 124.265 49.1094H122.425C122.331 48.4648 121.956 48.0547 121.359 48.0547C120.632 48.0547 120.152 48.6758 120.152 49.8125C120.152 50.9609 120.62 51.582 121.359 51.582C121.921 51.582 122.343 51.2188 122.425 50.5391H124.265C124.206 52.0859 123.105 53.1172 121.335 53.1172ZM124.924 53V44.5156H126.905V48.9453H126.987L128.827 46.6367H131.077L128.792 49.4023L131.17 53H128.885L127.327 50.5625L126.905 51.0547V53H124.924ZM133.755 53V46.6367H135.63V47.7969H135.7C135.97 47.0234 136.626 46.5547 137.505 46.5547C138.384 46.5547 139.064 47.0352 139.228 47.7969H139.298C139.544 47.0469 140.283 46.5547 141.22 46.5547C142.415 46.5547 143.247 47.3633 143.247 48.7109V53H141.267V49.1562C141.267 48.5117 140.892 48.1602 140.365 48.1602C139.79 48.1602 139.45 48.5703 139.45 49.1797V53H137.552V49.1328C137.552 48.5352 137.189 48.1602 136.661 48.1602C136.111 48.1602 135.736 48.582 135.736 49.2266V53H133.755ZM147.094 53.1172C145.102 53.1172 143.883 51.875 143.883 49.8477C143.883 47.8789 145.114 46.5547 147.024 46.5547C148.805 46.5547 150.094 47.6914 150.094 49.8008V50.3047H145.829V50.3398C145.829 51.1602 146.333 51.6875 147.13 51.6875C147.669 51.6875 148.067 51.4531 148.231 51.0781H150.071C149.837 52.3203 148.747 53.1172 147.094 53.1172ZM145.829 49.1445H148.255C148.243 48.4648 147.751 47.9844 147.071 47.9844C146.368 47.9844 145.858 48.4824 145.829 49.1445ZM153.074 44.5156L152.898 50.4102H151.223L151.047 44.5156H153.074ZM152.055 53.1172C151.469 53.1172 150.988 52.6484 151 52.0508C150.988 51.4766 151.469 51.0078 152.055 51.0078C152.617 51.0078 153.109 51.4766 153.121 52.0508C153.109 52.6484 152.617 53.1172 152.055 53.1172Z" fill="#2F2F2F"/>
+<path d="M109.806 91.5742C109.689 90.707 109.068 90.1562 108.118 90.1562C106.864 90.1562 106.103 91.1055 106.103 92.7578C106.103 94.4688 106.888 95.3594 108.107 95.3594C109.021 95.3594 109.653 94.8672 109.806 94.0352L111.821 94.0469C111.657 95.5586 110.368 97.1172 108.071 97.1172C105.775 97.1172 104.064 95.5469 104.064 92.7578C104.064 89.957 105.81 88.3984 108.071 88.3984C110.11 88.3984 111.61 89.5469 111.821 91.5742H109.806ZM114.59 88.5156V97H112.61V88.5156H114.59ZM115.496 97V90.6367H117.476V97H115.496ZM116.492 89.875C115.93 89.875 115.473 89.4531 115.473 88.9258C115.473 88.3984 115.93 87.9766 116.492 87.9766C117.055 87.9766 117.523 88.3984 117.523 88.9258C117.523 89.4531 117.055 89.875 116.492 89.875ZM121.335 97.1172C119.331 97.1172 118.136 95.7812 118.136 93.8359C118.136 91.8906 119.343 90.5547 121.335 90.5547C123.081 90.5547 124.218 91.5625 124.265 93.1094H122.425C122.331 92.4648 121.956 92.0547 121.359 92.0547C120.632 92.0547 120.152 92.6758 120.152 93.8125C120.152 94.9609 120.62 95.582 121.359 95.582C121.921 95.582 122.343 95.2188 122.425 94.5391H124.265C124.206 96.0859 123.105 97.1172 121.335 97.1172ZM124.924 97V88.5156H126.905V92.9453H126.987L128.827 90.6367H131.077L128.792 93.4023L131.17 97H128.885L127.327 94.5625L126.905 95.0547V97H124.924ZM133.755 97V90.6367H135.63V91.7969H135.7C135.97 91.0234 136.626 90.5547 137.505 90.5547C138.384 90.5547 139.064 91.0352 139.228 91.7969H139.298C139.544 91.0469 140.283 90.5547 141.22 90.5547C142.415 90.5547 143.247 91.3633 143.247 92.7109V97H141.267V93.1562C141.267 92.5117 140.892 92.1602 140.365 92.1602C139.79 92.1602 139.45 92.5703 139.45 93.1797V97H137.552V93.1328C137.552 92.5352 137.189 92.1602 136.661 92.1602C136.111 92.1602 135.736 92.582 135.736 93.2266V97H133.755ZM147.094 97.1172C145.102 97.1172 143.883 95.875 143.883 93.8477C143.883 91.8789 145.114 90.5547 147.024 90.5547C148.805 90.5547 150.094 91.6914 150.094 93.8008V94.3047H145.829V94.3398C145.829 95.1602 146.333 95.6875 147.13 95.6875C147.669 95.6875 148.067 95.4531 148.231 95.0781H150.071C149.837 96.3203 148.747 97.1172 147.094 97.1172ZM145.829 93.1445H148.255C148.243 92.4648 147.751 91.9844 147.071 91.9844C146.368 91.9844 145.858 92.4824 145.829 93.1445ZM153.074 88.5156L152.898 94.4102H151.223L151.047 88.5156H153.074ZM152.055 97.1172C151.469 97.1172 150.988 96.6484 151 96.0508C150.988 95.4766 151.469 95.0078 152.055 95.0078C152.617 95.0078 153.109 95.4766 153.121 96.0508C153.109 96.6484 152.617 97.1172 152.055 97.1172Z" fill="white"/>
+</svg>
diff --git a/apps/landing/public/images/components/checkbox.svg b/apps/landing/public/images/components/checkbox.svg
new file mode 100644
index 00000000..31a9df3f
--- /dev/null
+++ b/apps/landing/public/images/components/checkbox.svg
@@ -0,0 +1,10 @@
+<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="67.5" y="33.5" width="17" height="17" rx="1.5" stroke="#C8C7D1"/>
+<rect opacity="0.4" x="93" y="38" width="100" height="8" rx="2" fill="#2F2F2F"/>
+<rect x="67" y="61" width="18" height="18" rx="2" fill="white"/>
+<rect x="67" y="61" width="18" height="18" rx="2" fill="#6159D4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M81.6474 66.8071C82.0992 67.2337 82.1195 67.9457 81.6929 68.3975L75.3179 75.1475C75.1021 75.3759 74.8007 75.5037 74.4865 75.4999C74.1723 75.4961 73.874 75.3611 73.6638 75.1276L70.2888 71.3776C69.8732 70.9158 69.9106 70.2044 70.3724 69.7888C70.8342 69.3732 71.5456 69.4106 71.9612 69.8724L74.5199 72.7154L80.0571 66.8526C80.4837 66.4008 81.1957 66.3805 81.6474 66.8071Z" fill="white"/>
+<rect opacity="0.4" x="93" y="66" width="100" height="8" rx="2" fill="#2F2F2F"/>
+<rect x="67.5" y="89.5" width="17" height="17" rx="1.5" stroke="#C8C7D1"/>
+<rect opacity="0.4" x="93" y="94" width="100" height="8" rx="2" fill="#2F2F2F"/>
+</svg>
diff --git a/apps/landing/public/images/components/color-picker.svg b/apps/landing/public/images/components/color-picker.svg
new file mode 100644
index 00000000..47aa68b1
--- /dev/null
+++ b/apps/landing/public/images/components/color-picker.svg
@@ -0,0 +1,34 @@
+<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="79.5" y="22.5" width="99" height="95" rx="7.5" stroke="#C8C7D1"/>
+<g clip-path="url(#clip0_560_2665)">
+<rect x="84" y="27" width="90" height="86" rx="4" fill="url(#paint0_linear_560_2665)"/>
+<rect x="84" y="27" width="90" height="86" rx="4" fill="url(#paint1_linear_560_2665)" style="mix-blend-mode:multiply"/>
+<g filter="url(#filter0_d_560_2665)">
+<rect x="145" y="41" width="10" height="10" rx="5" fill="#774CC5"/>
+<rect x="145" y="41" width="10" height="10" rx="5" stroke="white" stroke-width="2"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_560_2665" x="140" y="36" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_560_2665"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_560_2665" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_560_2665" x1="129" y1="27" x2="129" y2="113" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1"/>
+</linearGradient>
+<linearGradient id="paint1_linear_560_2665" x1="84" y1="70" x2="174" y2="70" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#5A05F5"/>
+</linearGradient>
+<clipPath id="clip0_560_2665">
+<rect x="84" y="27" width="90" height="86" rx="4" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/landing/public/images/components/date-picker.svg b/apps/landing/public/images/components/date-picker.svg
new file mode 100644
index 00000000..8602d514
--- /dev/null
+++ b/apps/landing/public/images/components/date-picker.svg
@@ -0,0 +1,41 @@
+<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="80.5" y="22.5" width="99" height="95" rx="7.5" stroke="#C8C7D1"/>
+<path d="M113.289 39L113.282 38.1484L115.313 36.2812C115.844 35.7734 116.125 35.4609 116.125 35.0156C116.125 34.5156 115.743 34.2031 115.227 34.2031C114.696 34.2031 114.352 34.5391 114.352 35.0781H113.235C113.227 33.9688 114.047 33.2656 115.243 33.2656C116.453 33.2656 117.258 33.9531 117.258 34.9375C117.258 35.5781 116.946 36.1094 115.782 37.1641L114.922 38V38.0312H117.336V39H113.289ZM120.128 39.0781C118.713 39.0781 117.854 38.0234 117.854 36.1719C117.854 34.3203 118.713 33.2656 120.128 33.2656C121.542 33.2656 122.401 34.3281 122.401 36.1719C122.401 38.0312 121.542 39.0781 120.128 39.0781ZM120.128 38.1094C120.784 38.1094 121.206 37.4766 121.198 36.1719C121.198 34.8828 120.784 34.2266 120.128 34.2266C119.471 34.2266 119.057 34.8828 119.057 36.1719C119.049 37.4766 119.471 38.1094 120.128 38.1094ZM122.973 39L122.966 38.1484L124.997 36.2812C125.528 35.7734 125.809 35.4609 125.809 35.0156C125.809 34.5156 125.427 34.2031 124.911 34.2031C124.38 34.2031 124.036 34.5391 124.036 35.0781H122.919C122.911 33.9688 123.731 33.2656 124.927 33.2656C126.138 33.2656 126.942 33.9531 126.942 34.9375C126.942 35.5781 126.63 36.1094 125.466 37.1641L124.606 38V38.0312H127.02V39H122.973ZM129.694 39.0781C128.515 39.0781 127.655 38.3828 127.632 37.4062H128.773C128.796 37.8516 129.202 38.1484 129.694 38.1484C130.28 38.1484 130.694 37.7344 130.694 37.1484C130.694 36.5469 130.273 36.1328 129.679 36.125C129.257 36.125 128.96 36.2812 128.788 36.6016H127.726L128.03 33.3438H131.515V34.3047H128.999L128.843 35.7344H128.89C129.101 35.4531 129.523 35.2578 130.023 35.2578C131.062 35.2578 131.835 36.0312 131.835 37.1172C131.835 38.2578 130.968 39.0781 129.694 39.0781ZM136.285 33.3438H137.449V37.2891C137.449 38.3906 136.675 39.0781 135.535 39.0781C134.511 39.0781 133.707 38.5391 133.714 37.4219H134.886C134.894 37.8672 135.167 38.1328 135.589 38.1328C136.035 38.1328 136.285 37.8438 136.285 37.2891V33.3438ZM140.857 37.1953V34.7578H142.013V39H140.904V38.2344H140.857C140.662 38.7266 140.209 39.0547 139.568 39.0547C138.717 39.0547 138.138 38.4531 138.138 37.4609V34.7578H139.295V37.2578C139.295 37.7578 139.584 38.0781 140.037 38.0781C140.459 38.0781 140.857 37.7734 140.857 37.1953ZM143.828 36.5469V39H142.672V34.7578H143.773V35.5H143.82C144.016 35.0078 144.469 34.7031 145.094 34.7031C145.977 34.7031 146.562 35.3047 146.555 36.2969V39H145.406V36.5C145.406 35.9766 145.117 35.6641 144.641 35.6641C144.156 35.6641 143.828 35.9844 143.828 36.5469Z" fill="#2F2F2F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96.5272 33.2257C96.7132 33.4155 96.7132 33.7233 96.5272 33.9132L94.483 36L96.5272 38.0868C96.7132 38.2766 96.7132 38.5844 96.5272 38.7743C96.3413 38.9641 96.0398 38.9641 95.8538 38.7743L93.4728 36.3437C93.2869 36.1539 93.2869 35.8461 93.4728 35.6562L95.8538 33.2257C96.0398 33.0359 96.3413 33.0359 96.5272 33.2257Z" fill="#A9A8AB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M163.473 33.2257C163.287 33.4155 163.287 33.7233 163.473 33.9132L165.517 36L163.473 38.0868C163.287 38.2766 163.287 38.5844 163.473 38.7743C163.659 38.9641 163.96 38.9641 164.146 38.7743L166.527 36.3437C166.713 36.1539 166.713 35.8461 166.527 35.6562L164.146 33.2257C163.96 33.0359 163.659 33.0359 163.473 33.2257Z" fill="#A9A8AB"/>
+<rect opacity="0.7" x="90" y="50" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="102" y="50" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="114" y="50" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="126" y="50" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="138" y="50" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="150" y="50" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="162" y="50" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="90" y="62" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="102" y="62" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="114" y="62" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="126" y="62" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="138" y="62" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="150" y="62" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="162" y="62" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="90" y="74" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="102" y="74" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="114" y="74" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="126" y="74" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="138" y="74" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="150" y="74" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="162" y="74" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="90" y="86" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="102" y="86" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="114" y="86" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="126" y="86" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="138" y="86" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="150" y="86" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="162" y="86" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="90" y="98" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="102" y="98" width="8" height="8" rx="2" fill="#C9C9C9"/>
+<rect opacity="0.7" x="114" y="98" width="8" height="8" rx="2" fill="#F2F2F2"/>
+<rect opacity="0.7" x="126" y="98" width="8" height="8" rx="2" fill="#F2F2F2"/>
+<rect opacity="0.7" x="138" y="98" width="8" height="8" rx="2" fill="#F2F2F2"/>
+<rect opacity="0.7" x="150" y="98" width="8" height="8" rx="2" fill="#F2F2F2"/>
+<rect opacity="0.7" x="162" y="98" width="8" height="8" rx="2" fill="#F2F2F2"/>
+</svg>
diff --git a/apps/landing/public/images/components/dropdown.svg b/apps/landing/public/images/components/dropdown.svg
new file mode 100644
index 00000000..ae09726b
--- /dev/null
+++ b/apps/landing/public/images/components/dropdown.svg
@@ -0,0 +1,9 @@
+<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="43.5" y="14.5" width="173" height="35" rx="7.5" stroke="#C8C7D1"/>
+<rect x="43.5" y="54.5" width="173" height="71" rx="7.5" stroke="#C8C7D1"/>
+<path d="M60.6094 30.2812C60.3984 29.1914 59.4961 28.582 58.418 28.582C56.9531 28.582 55.8633 29.707 55.8633 31.7578C55.8633 33.8203 56.9648 34.9336 58.418 34.9336C59.4844 34.9336 60.3867 34.3359 60.6094 33.2578L61.9102 33.2695C61.6406 34.9453 60.2695 36.1172 58.4062 36.1172C56.1914 36.1172 54.5859 34.4648 54.5859 31.7578C54.5859 29.0391 56.2031 27.3984 58.4062 27.3984C60.1992 27.3984 61.6172 28.4531 61.9102 30.2812H60.6094ZM64.0931 32.2266V36H62.8392V27.5156H64.0697V30.6797H64.1517C64.4564 29.9883 65.0423 29.5547 66.0384 29.5547C67.3509 29.5547 68.2181 30.3633 68.2181 31.957V36H66.9642V32.1094C66.9642 31.1719 66.4603 30.6328 65.6166 30.6328C64.7377 30.6328 64.0931 31.207 64.0931 32.2266ZM72.0652 36.1289C70.2605 36.1289 69.0886 34.8164 69.0886 32.8477C69.0886 30.8672 70.2605 29.5547 72.0652 29.5547C73.8581 29.5547 75.03 30.8672 75.03 32.8477C75.03 34.8164 73.8581 36.1289 72.0652 36.1289ZM72.0652 35.0859C73.2136 35.0859 73.7644 34.0664 73.7644 32.8477C73.7644 31.6289 73.2136 30.5859 72.0652 30.5859C70.8933 30.5859 70.3425 31.6289 70.3425 32.8477C70.3425 34.0664 70.8933 35.0859 72.0652 35.0859ZM78.5958 36.1289C76.7911 36.1289 75.6192 34.8164 75.6192 32.8477C75.6192 30.8672 76.7911 29.5547 78.5958 29.5547C80.3888 29.5547 81.5606 30.8672 81.5606 32.8477C81.5606 34.8164 80.3888 36.1289 78.5958 36.1289ZM78.5958 35.0859C79.7442 35.0859 80.295 34.0664 80.295 32.8477C80.295 31.6289 79.7442 30.5859 78.5958 30.5859C77.4239 30.5859 76.8731 31.6289 76.8731 32.8477C76.8731 34.0664 77.4239 35.0859 78.5958 35.0859ZM86.0053 31.3711C85.8881 30.8672 85.4897 30.5391 84.7983 30.5391C84.0834 30.5391 83.5678 30.9141 83.5795 31.3945C83.5678 31.7695 83.8725 32.0391 84.5756 32.2031L85.5834 32.4375C86.7553 32.6953 87.3178 33.2578 87.3295 34.1602C87.3178 35.3086 86.3569 36.1289 84.728 36.1289C83.2045 36.1289 82.2905 35.4492 82.1381 34.2656H83.4155C83.5209 34.8398 83.9662 35.1211 84.7162 35.1211C85.5248 35.1211 86.0405 34.793 86.0522 34.2539C86.0405 33.8438 85.7358 33.5742 85.0678 33.4219L84.0717 33.2109C82.9233 32.9531 82.3256 32.3438 82.3256 31.4648C82.3256 30.3281 83.31 29.5547 84.7866 29.5547C86.2045 29.5547 87.0834 30.2812 87.2123 31.3711H86.0053ZM90.9305 36.1289C89.0555 36.1289 87.907 34.8398 87.907 32.8594C87.907 30.9023 89.0789 29.5547 90.8484 29.5547C92.3016 29.5547 93.6727 30.457 93.6727 32.7539V33.1992H89.1492C89.1844 34.4062 89.8934 35.0977 90.9422 35.0977C91.657 35.0977 92.1141 34.793 92.325 34.4062H93.5906C93.3094 35.4375 92.325 36.1289 90.9305 36.1289ZM89.1609 32.2617H92.4422C92.4422 31.2891 91.8211 30.5859 90.8602 30.5859C89.8582 30.5859 89.2078 31.3594 89.1609 32.2617ZM104.601 31.7578C104.601 34.4648 102.972 36.1172 100.781 36.1172C98.5659 36.1172 96.9487 34.4648 96.9487 31.7578C96.9487 29.0391 98.5659 27.3984 100.781 27.3984C102.972 27.3984 104.601 29.0391 104.601 31.7578ZM103.324 31.7578C103.324 29.6953 102.234 28.582 100.781 28.582C99.3159 28.582 98.2261 29.6953 98.2261 31.7578C98.2261 33.8203 99.3159 34.9336 100.781 34.9336C102.234 34.9336 103.324 33.8203 103.324 31.7578ZM106.843 32.2266V36H105.589V29.6367H106.796V30.6797H106.866C107.171 30 107.792 29.5547 108.741 29.5547C110.054 29.5547 110.909 30.375 110.909 31.957V36H109.667V32.1094C109.667 31.1836 109.163 30.6328 108.319 30.6328C107.464 30.6328 106.843 31.207 106.843 32.2266ZM114.815 36.1289C112.94 36.1289 111.791 34.8398 111.791 32.8594C111.791 30.9023 112.963 29.5547 114.733 29.5547C116.186 29.5547 117.557 30.457 117.557 32.7539V33.1992H113.033C113.069 34.4062 113.778 35.0977 114.826 35.0977C115.541 35.0977 115.998 34.793 116.209 34.4062H117.475C117.194 35.4375 116.209 36.1289 114.815 36.1289ZM113.045 32.2617H116.326C116.326 31.2891 115.705 30.5859 114.744 30.5859C113.742 30.5859 113.092 31.3594 113.045 32.2617Z" fill="#999999"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M198.806 30.1464C198.992 29.9512 199.294 29.9512 199.48 30.1464L202 32.7929L204.52 30.1464C204.706 29.9512 205.008 29.9512 205.194 30.1464C205.38 30.3417 205.38 30.6583 205.194 30.8536L202.337 33.8536C202.151 34.0488 201.849 34.0488 201.663 33.8536L198.806 30.8536C198.62 30.6583 198.62 30.3417 198.806 30.1464Z" fill="#272727"/>
+<rect x="47" y="58" width="166" height="30" rx="5" fill="#ECECEC"/>
+<rect opacity="0.4" x="54" y="69" width="100" height="8" rx="2" fill="#2F2F2F"/>
+<rect opacity="0.4" x="54" y="102" width="86" height="8" rx="2" fill="#2F2F2F"/>
+</svg>
diff --git a/apps/landing/public/images/components/label.svg b/apps/landing/public/images/components/label.svg
new file mode 100644
index 00000000..7947b18a
--- /dev/null
+++ b/apps/landing/public/images/components/label.svg
@@ -0,0 +1,7 @@
+<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.65 49.9544C103.855 49.2958 103.957 48.8321 103.957 48.5635C103.957 48.295 103.908 48.1127 103.809 48.0168C102.905 48.0168 102.252 48.0647 101.849 48.1607L101.838 48.2854L101.94 48.4005C102.138 48.6371 102.236 48.8897 102.236 49.1583C102.236 49.3373 102.142 49.7274 101.952 50.3285C101.762 50.9233 101.667 51.3389 101.667 51.5755C101.667 51.8058 101.743 51.9912 101.895 52.1319C102.047 52.2662 102.255 52.3333 102.521 52.3333C102.787 52.3333 103.076 52.2694 103.387 52.1415C103.699 52.0072 103.912 51.9017 104.026 51.8249C104.14 51.7482 104.231 51.6843 104.299 51.6331L104.105 51.2974L103.969 51.3549C103.665 51.4764 103.49 51.5372 103.444 51.5372C103.376 51.5372 103.342 51.438 103.342 51.2398C103.342 51.0352 103.444 50.6067 103.65 49.9544Z" fill="#9B9BA6"/>
+<path d="M102.43 46.4628C102.43 46.6739 102.506 46.8433 102.658 46.9712C102.81 47.0927 103.019 47.1535 103.285 47.1535C103.551 47.1535 103.79 47.0735 104.003 46.9137C104.223 46.7538 104.333 46.5715 104.333 46.3669C104.333 46.1559 104.257 45.9864 104.105 45.8585C103.953 45.7306 103.741 45.6667 103.467 45.6667C103.194 45.6667 102.951 45.7466 102.738 45.9065C102.533 46.0663 102.43 46.2518 102.43 46.4628Z" fill="#9B9BA6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M103 55C106.314 55 109 52.3137 109 49C109 45.6863 106.314 43 103 43C99.6863 43 97 45.6863 97 49C97 52.3137 99.6863 55 103 55ZM107.667 49C107.667 51.5773 105.577 53.6667 103 53.6667C100.423 53.6667 98.3333 51.5773 98.3333 49C98.3333 46.4227 100.423 44.3333 103 44.3333C105.577 44.3333 107.667 46.4227 107.667 49Z" fill="#9B9BA6"/>
+<rect x="43" y="45" width="48" height="8" rx="2" fill="#6159D4"/>
+<rect x="43.5" y="64.5" width="173" height="35" rx="7.5" stroke="#C8C7D1"/>
+</svg>
diff --git a/apps/landing/public/images/components/layout/bottom-sheet.svg b/apps/landing/public/images/components/layout/bottom-sheet.svg
new file mode 100644
index 00000000..03b0ef58
--- /dev/null
+++ b/apps/landing/public/images/components/layout/bottom-sheet.svg
@@ -0,0 +1,10 @@
+<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_560_2794" fill="white">
+<path d="M43 53C43 48.5817 46.5817 45 51 45H209C213.418 45 217 48.5817 217 53V140H43V53Z"/>
+</mask>
+<path d="M42 53C42 48.0294 46.0294 44 51 44H209C213.971 44 218 48.0294 218 53H216C216 49.134 212.866 46 209 46H51C47.134 46 44 49.134 44 53H42ZM217 140H43H217ZM42 140V53C42 48.0294 46.0294 44 51 44V46C47.134 46 44 49.134 44 53V140H42ZM209 44C213.971 44 218 48.0294 218 53V140H216V53C216 49.134 212.866 46 209 46V44Z" fill="#C8C7D1" mask="url(#path-1-inside-1_560_2794)"/>
+<rect x="110" y="53" width="40" height="4" rx="2" fill="#C3C3C3"/>
+<rect x="65" y="78" width="130" height="30" rx="5" fill="#ECECEC"/>
+<rect x="65" y="114" width="91" height="7" rx="2" fill="#ECECEC"/>
+<rect x="65" y="125" width="91" height="7" rx="2" fill="#ECECEC"/>
+</svg>
diff --git a/apps/landing/public/images/components/layout/confirm.svg b/apps/landing/public/images/components/layout/confirm.svg
new file mode 100644
index 00000000..50da256b
--- /dev/null
+++ b/apps/landing/public/images/components/layout/confirm.svg
@@ -0,0 +1,9 @@
+<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="42.5" y="22.5" width="173" height="94" rx="7.5" stroke="#C8C7D1"/>
+<circle cx="66" cy="46" r="8.33333" fill="#F3B238"/>
+<path d="M66.0003 48.5C66.6905 48.5002 67.2503 49.0598 67.2503 49.75C67.2503 50.4402 66.6905 50.9998 66.0003 51C65.31 51 64.7503 50.4404 64.7503 49.75C64.7503 49.0596 65.31 48.5 66.0003 48.5ZM66.4164 41C66.8766 41 67.6664 41.3321 67.6664 41.7412L67.2503 46.5557C67.2503 47.1692 66.6905 47.6668 66.0003 47.667C65.31 47.667 64.7504 47.1693 64.7503 46.5557L64.3333 41.7412C64.3333 41.3321 65.1231 41 65.5833 41H66.4164Z" fill="white"/>
+<rect opacity="0.7" x="57" y="65" width="40" height="6" rx="2" fill="#2F2F2F"/>
+<rect opacity="0.4" x="57" y="76" width="86" height="6" rx="2" fill="#2F2F2F"/>
+<rect x="121.5" y="93.5" width="41" height="15" rx="3.5" stroke="#C8C7D1"/>
+<rect x="166" y="93" width="42" height="16" rx="4" fill="#6159D4"/>
+</svg>
diff --git a/apps/landing/public/images/components/layout/footer.svg b/apps/landing/public/images/components/layout/footer.svg
new file mode 100644
index 00000000..56d36b44
--- /dev/null
+++ b/apps/landing/public/images/components/layout/footer.svg
@@ -0,0 +1,10 @@
+<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="42.5" y="23.5" width="173" height="94" rx="7.5" stroke="#C8C7D1"/>
+<path d="M42 31C42 26.5817 45.5817 23 50 23H208C212.418 23 216 26.5817 216 31V36H42V31Z" fill="#363636"/>
+<circle cx="51" cy="30" r="3" fill="#E13953"/>
+<circle cx="60" cy="30" r="3" fill="#F4DF44"/>
+<circle cx="69" cy="30" r="3" fill="#4FBD56"/>
+<rect x="60" y="44" width="60" height="8" rx="2" fill="#ECECEC"/>
+<rect x="60" y="58" width="138" height="28" rx="2" fill="#ECECEC"/>
+<path d="M42 97H216V110C216 114.418 212.418 118 208 118H50C45.5817 118 42 114.418 42 110V97Z" fill="#6159D4"/>
+</svg>
diff --git a/apps/landing/public/images/components/layout/header.svg b/apps/landing/public/images/components/layout/header.svg
new file mode 100644
index 00000000..a19d070c
--- /dev/null
+++ b/apps/landing/public/images/components/layout/header.svg
@@ -0,0 +1,11 @@
+<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M43 102H217V110C217 114.418 213.418 118 209 118H51C46.5817 118 43 114.418 43 110V102Z" fill="#ECECEC"/>
+<rect x="43.5" y="23.5" width="173" height="94" rx="7.5" stroke="#C8C7D1"/>
+<path d="M43 31C43 26.5817 46.5817 23 51 23H209C213.418 23 217 26.5817 217 31V36H43V31Z" fill="#363636"/>
+<circle cx="52" cy="30" r="3" fill="#E13953"/>
+<circle cx="61" cy="30" r="3" fill="#F4DF44"/>
+<circle cx="70" cy="30" r="3" fill="#4FBD56"/>
+<rect x="61" y="54" width="60" height="8" rx="2" fill="#ECECEC"/>
+<rect x="61" y="68" width="138" height="28" rx="2" fill="#ECECEC"/>
+<rect x="43" y="36" width="174" height="10" fill="#6159D4"/>
+</svg>
diff --git a/apps/landing/public/images/components/layout/menu.svg b/apps/landing/public/images/components/layout/menu.svg
new file mode 100644
index 00000000..804b3250
--- /dev/null
+++ b/apps/landing/public/images/components/layout/menu.svg
@@ -0,0 +1,7 @@
+<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="60" y="16" width="140" height="108" rx="4" fill="#FBFBFB"/>
+<rect x="65" y="53" width="130" height="30" rx="5" fill="#EDECF7"/>
+<rect opacity="0.4" x="74" y="30" width="66" height="8" rx="2" fill="#2F2F2F"/>
+<rect opacity="0.4" x="74" y="64" width="66" height="8" rx="2" fill="#2F2F2F"/>
+<rect opacity="0.4" x="74" y="98" width="66" height="8" rx="2" fill="#2F2F2F"/>
+</svg>
diff --git a/apps/landing/public/images/components/layout/snackbar.svg b/apps/landing/public/images/components/layout/snackbar.svg
new file mode 100644
index 00000000..b9fb7ae5
--- /dev/null
+++ b/apps/landing/public/images/components/layout/snackbar.svg
@@ -0,0 +1,8 @@
+<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="43" y="39" width="174" height="28" rx="4" fill="#29292C" fill-opacity="0.8"/>
+<circle cx="58" cy="53" r="6.66667" fill="#3AAE6E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M61.3068 50.8984C61.7311 51.252 61.7884 51.8826 61.4349 52.3068L58.1015 56.3068C57.9217 56.5227 57.6593 56.6529 57.3786 56.6656C57.098 56.6784 56.8249 56.5724 56.6262 56.3738L54.6262 54.3738C54.2357 53.9832 54.2357 53.3501 54.6262 52.9595C55.0167 52.569 55.6499 52.569 56.0404 52.9595L57.2661 54.1852L59.8984 51.0265C60.252 50.6022 60.8826 50.5449 61.3068 50.8984Z" fill="white"/>
+<rect x="43" y="73" width="174" height="28" rx="4" fill="#29292C" fill-opacity="0.8"/>
+<circle cx="58" cy="87" r="6.66667" fill="#F64E4E"/>
+<path d="M59.7812 83.9326C60.1363 83.5777 60.7124 83.5776 61.0674 83.9326C61.4224 84.2876 61.4223 84.8637 61.0674 85.2187L59.2861 87L61.0674 88.7812C61.4223 89.1363 61.4224 89.7124 61.0674 90.0674C60.7124 90.4224 60.1363 90.4223 59.7812 90.0674L58 88.2861L56.2187 90.0674C55.8637 90.4223 55.2876 90.4224 54.9326 90.0674C54.5776 89.7124 54.5777 89.1363 54.9326 88.7812L56.7139 87L54.9326 85.2187C54.5777 84.8637 54.5776 84.2876 54.9326 83.9326C55.2876 83.5776 55.8637 83.5777 56.2187 83.9326L58 85.7139L59.7812 83.9326Z" fill="white"/>
+</svg>
diff --git a/apps/landing/public/images/components/layout/tab.svg b/apps/landing/public/images/components/layout/tab.svg
new file mode 100644
index 00000000..8a8813bc
--- /dev/null
+++ b/apps/landing/public/images/components/layout/tab.svg
@@ -0,0 +1,10 @@
+<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-outside-1_560_2773" maskUnits="userSpaceOnUse" x="54.5" y="55" width="50" height="32" fill="black">
+<rect fill="white" x="54.5" y="55" width="50" height="32"/>
+<path d="M54.5 55H104.5V85H54.5V55Z"/>
+</mask>
+<path d="M104.5 85V83H54.5V85V87H104.5V85Z" fill="#6159D4" mask="url(#path-1-outside-1_560_2773)"/>
+<path d="M66.8867 66.9688V65.5156H73.8359V66.9688H71.2344V74H69.4883V66.9688H66.8867ZM73.4788 72.2188C73.4788 70.8008 74.6272 70.332 75.8459 70.2617C76.303 70.2324 77.1584 70.1914 77.428 70.1797V69.6641C77.4163 69.1367 77.053 68.8203 76.4084 68.8203C75.8225 68.8203 75.4475 69.0898 75.3538 69.5234H73.7014C73.8069 68.4219 74.7678 67.5547 76.4553 67.5547C77.8381 67.5547 79.1506 68.1758 79.1506 69.7109V74H77.51V73.1211H77.4631C77.1467 73.707 76.5491 74.1172 75.5998 74.1172C74.3811 74.1172 73.4788 73.4844 73.4788 72.2188ZM75.1428 72.1719C75.1428 72.6641 75.5413 72.9219 76.092 72.9219C76.8772 72.9219 77.4397 72.3945 77.428 71.7266V71.2578C77.1643 71.2695 76.426 71.3105 76.1272 71.3398C75.5295 71.3984 75.1428 71.6797 75.1428 72.1719ZM80.27 74V65.5156H82.0044V68.7031H82.0513C82.2973 68.1875 82.8013 67.5547 83.8677 67.5547C85.2739 67.5547 86.4575 68.6445 86.4575 70.8242C86.4575 72.9453 85.3208 74.1055 83.8677 74.1055C82.8247 74.1055 82.2973 73.5078 82.0513 72.9805H81.9809V74H80.27ZM81.9692 70.8125C81.9692 71.9609 82.4614 72.7227 83.3169 72.7227C84.2075 72.7227 84.6763 71.9375 84.6763 70.8125C84.6763 69.6992 84.2075 68.9375 83.3169 68.9375C82.4497 68.9375 81.9692 69.6641 81.9692 70.8125ZM90.9753 65.5156V74H89.2058V67.1914H89.1589L87.2136 68.4102V66.8516L89.3113 65.5156H90.9753Z" fill="#6159D4"/>
+<path d="M116.969 66.4531V65.5156H123.367V66.4531H120.707V74H119.641V66.4531H116.969ZM123.113 72.1953C123.113 70.7305 124.402 70.4023 125.503 70.3203C125.908 70.291 126.939 70.2383 127.226 70.2266V69.7109C127.226 68.9023 126.745 68.4336 125.785 68.4336C124.976 68.4336 124.495 68.8086 124.355 69.2891H123.3C123.429 68.2695 124.425 67.5547 125.831 67.5547C126.663 67.5547 128.222 67.8008 128.222 69.8047V74H127.226V73.1328H127.179C126.968 73.5664 126.382 74.1523 125.281 74.1523C124.074 74.1523 123.113 73.4375 123.113 72.1953ZM124.12 72.2422C124.12 72.9102 124.683 73.25 125.456 73.25C126.593 73.25 127.226 72.4883 127.226 71.6914V71.0469L125.62 71.1641C124.706 71.2227 124.12 71.5508 124.12 72.2422ZM129.608 74V65.5156H130.616V68.6445H130.698C130.921 68.3047 131.296 67.5547 132.538 67.5547C134.132 67.5547 135.257 68.8203 135.257 70.8359C135.257 72.8516 134.132 74.1289 132.55 74.1289C131.331 74.1289 130.921 73.3789 130.698 73.0273H130.581V74H129.608ZM130.592 70.8125C130.592 72.2422 131.237 73.2266 132.397 73.2266C133.604 73.2266 134.237 72.1719 134.237 70.8125C134.237 69.4883 133.628 68.457 132.397 68.457C131.225 68.457 130.592 69.4062 130.592 70.8125ZM136.197 74L136.186 73.2266L139.08 70.1797C140.088 69.1133 140.568 68.5391 140.568 67.7539C140.568 66.8867 139.83 66.3125 138.881 66.3125C137.873 66.3125 137.229 66.957 137.229 67.9062H136.233C136.221 66.4062 137.381 65.3984 138.916 65.3984C140.451 65.3984 141.553 66.4297 141.553 67.7539C141.553 68.7031 141.108 69.4414 139.608 70.9883L137.662 72.9922V73.0625H141.705V74H136.197Z" fill="#878594"/>
+<path d="M166.969 66.4531V65.5156H173.367V66.4531H170.707V74H169.641V66.4531H166.969ZM173.113 72.1953C173.113 70.7305 174.402 70.4023 175.503 70.3203C175.908 70.291 176.939 70.2383 177.226 70.2266V69.7109C177.226 68.9023 176.745 68.4336 175.785 68.4336C174.976 68.4336 174.495 68.8086 174.355 69.2891H173.3C173.429 68.2695 174.425 67.5547 175.831 67.5547C176.663 67.5547 178.222 67.8008 178.222 69.8047V74H177.226V73.1328H177.179C176.968 73.5664 176.382 74.1523 175.281 74.1523C174.074 74.1523 173.113 73.4375 173.113 72.1953ZM174.12 72.2422C174.12 72.9102 174.683 73.25 175.456 73.25C176.593 73.25 177.226 72.4883 177.226 71.6914V71.0469L175.62 71.1641C174.706 71.2227 174.12 71.5508 174.12 72.2422ZM179.608 74V65.5156H180.616V68.6445H180.698C180.921 68.3047 181.296 67.5547 182.538 67.5547C184.132 67.5547 185.257 68.8203 185.257 70.8359C185.257 72.8516 184.132 74.1289 182.55 74.1289C181.331 74.1289 180.921 73.3789 180.698 73.0273H180.581V74H179.608ZM180.592 70.8125C180.592 72.2422 181.237 73.2266 182.397 73.2266C183.604 73.2266 184.237 72.1719 184.237 70.8125C184.237 69.4883 183.628 68.457 182.397 68.457C181.225 68.457 180.592 69.4062 180.592 70.8125ZM189.127 74.1172C187.44 74.1172 186.233 73.2148 186.174 71.8672H187.24C187.299 72.6758 188.108 73.1797 189.115 73.1797C190.229 73.1797 191.049 72.5703 191.049 71.6914C191.049 70.7656 190.311 70.1094 188.986 70.1094H188.295V69.1836H188.986C190.018 69.1836 190.733 68.6094 190.733 67.7305C190.733 66.8867 190.111 66.3125 189.15 66.3125C188.248 66.3125 187.416 66.8164 187.369 67.6484H186.35C186.408 66.3008 187.65 65.3984 189.162 65.3984C190.779 65.3984 191.764 66.4531 191.752 67.6719C191.764 68.6328 191.201 69.3477 190.311 69.5938V69.6523C191.412 69.8281 192.092 70.6133 192.08 71.6914C192.092 73.0859 190.815 74.1172 189.127 74.1172Z" fill="#878594"/>
+</svg>
diff --git a/apps/landing/public/images/components/layout/tooltip.svg b/apps/landing/public/images/components/layout/tooltip.svg
new file mode 100644
index 00000000..5cdda76d
--- /dev/null
+++ b/apps/landing/public/images/components/layout/tooltip.svg
@@ -0,0 +1,19 @@
+<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_560_2769)">
+<rect x="100" y="49" width="60" height="36" rx="4" fill="black" fill-opacity="0.75"/>
+<path d="M110.547 63.1953V62.1016H118.012V63.1953H114.908V72H113.664V63.1953H110.547ZM121.037 72.1504C119.014 72.1504 117.646 70.6328 117.646 68.3223C117.646 66.0117 119.014 64.4805 121.037 64.4805C123.047 64.4805 124.4 66.0117 124.4 68.3223C124.4 70.6328 123.047 72.1504 121.037 72.1504ZM121.037 71.1113C122.527 71.1113 123.225 69.7988 123.225 68.3223C123.225 66.8457 122.527 65.5195 121.037 65.5195C119.519 65.5195 118.822 66.8457 118.822 68.3223C118.822 69.7988 119.519 71.1113 121.037 71.1113ZM128.56 72.1504C126.537 72.1504 125.17 70.6328 125.17 68.3223C125.17 66.0117 126.537 64.4805 128.56 64.4805C130.57 64.4805 131.924 66.0117 131.924 68.3223C131.924 70.6328 130.57 72.1504 128.56 72.1504ZM128.56 71.1113C130.051 71.1113 130.748 69.7988 130.748 68.3223C130.748 66.8457 130.051 65.5195 128.56 65.5195C127.043 65.5195 126.346 66.8457 126.346 68.3223C126.346 69.7988 127.043 71.1113 128.56 71.1113ZM134.224 62.1016V72H133.049V62.1016H134.224ZM138.918 64.5762V65.5605H137.359V69.8672C137.359 70.8242 137.824 70.9746 138.33 70.9746C138.549 70.9746 138.849 70.9609 139.027 70.9473V72.041C138.849 72.0684 138.549 72.0957 138.207 72.0957C137.222 72.0957 136.17 71.4805 136.17 70.168V65.5605H135.049V64.5762H136.17V62.7988H137.359V64.5762H138.918ZM140.015 72V64.5762H141.191V72H140.015ZM140.603 63.3457C140.152 63.3457 139.783 63.0039 139.783 62.5664C139.783 62.1289 140.152 61.7871 140.603 61.7871C141.054 61.7871 141.437 62.1289 141.437 62.5664C141.437 63.0039 141.054 63.3457 140.603 63.3457ZM142.644 74.7891V64.5762H143.779V65.752H143.916C144.162 65.3555 144.626 64.4805 146.062 64.4805C147.921 64.4805 149.22 65.957 149.22 68.3086C149.22 70.6602 147.921 72.1504 146.076 72.1504C144.654 72.1504 144.162 71.2754 143.916 70.8652H143.82V74.7891H142.644ZM143.792 68.2812C143.792 69.9492 144.544 71.0977 145.912 71.0977C147.32 71.0977 148.044 69.8672 148.044 68.2812C148.044 66.7363 147.334 65.5332 145.912 65.5332C144.517 65.5332 143.792 66.6406 143.792 68.2812Z" fill="white"/>
+<path d="M130 91L125 85H135L130 91Z" fill="black" fill-opacity="0.75"/>
+</g>
+<defs>
+<filter id="filter0_d_560_2769" x="90" y="39" width="80" height="62" 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="2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_560_2769"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_560_2769" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/apps/landing/public/images/components/pagination.svg b/apps/landing/public/images/components/pagination.svg
new file mode 100644
index 00000000..34aff044
--- /dev/null
+++ b/apps/landing/public/images/components/pagination.svg
@@ -0,0 +1,12 @@
+<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="47.5" y="55.5" width="29" height="29" rx="7.5" stroke="#C8C7D1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63.7803 65.2092C64.0732 65.4882 64.0732 65.9404 63.7803 66.2194L59.8107 70L63.7803 73.7806C64.0732 74.0596 64.0732 74.5118 63.7803 74.7908C63.4874 75.0697 63.0126 75.0697 62.7197 74.7908L58.2197 70.5051C57.9268 70.2261 57.9268 69.7739 58.2197 69.4949L62.7197 65.2092C63.0126 64.9303 63.4874 64.9303 63.7803 65.2092Z" fill="#2F2F2F"/>
+<rect x="81.5" y="55.5" width="29" height="29" rx="7.5" stroke="#C8C7D1"/>
+<path d="M97.3398 64.6016V74.5H95.5488V66.3379H95.4941L93.1836 67.8145V66.1875L95.6309 64.6016H97.3398Z" fill="#2F2F2F"/>
+<rect x="115" y="55" width="30" height="30" rx="8" fill="#EAE8FC"/>
+<path d="M125.718 75V72.9932L129.658 69.6826C130.464 68.9941 130.962 68.4961 130.962 67.7344C130.962 66.9141 130.376 66.4014 129.556 66.4014C128.735 66.4014 128.179 66.9141 128.179 67.8223H125.527C125.527 65.6104 127.124 64.248 129.556 64.248C132.061 64.248 133.672 65.5371 133.672 67.5C133.672 68.7305 133.057 69.7705 130.669 71.7773L129.6 72.7002V72.7588H133.789V75H125.718Z" fill="#6159D4"/>
+<rect x="149.5" y="55.5" width="29" height="29" rx="7.5" stroke="#C8C7D1"/>
+<path d="M163.916 74.6367C161.797 74.6367 160.293 73.4883 160.252 71.8203H162.043C162.098 72.6133 162.891 73.1328 163.916 73.1328C165.01 73.1328 165.789 72.5312 165.789 71.6562C165.789 70.7676 165.023 70.125 163.738 70.125H162.85V68.7578H163.738C164.791 68.7578 165.529 68.1699 165.516 67.3086C165.529 66.4746 164.9 65.9141 163.93 65.9141C163 65.9141 162.193 66.4336 162.166 67.2676H160.457C160.498 65.5996 162.002 64.4648 163.943 64.4648C165.953 64.4648 167.252 65.6953 167.238 67.2129C167.252 68.3203 166.514 69.127 165.434 69.3457V69.4277C166.828 69.6191 167.621 70.5078 167.607 71.752C167.621 73.4199 166.062 74.6367 163.916 74.6367Z" fill="#2F2F2F"/>
+<rect x="212.5" y="84.5" width="29" height="29" rx="7.5" transform="rotate(-180 212.5 84.5)" stroke="#C8C7D1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M196.22 74.7908C195.927 74.5118 195.927 74.0596 196.22 73.7806L200.189 70L196.22 66.2194C195.927 65.9404 195.927 65.4882 196.22 65.2092C196.513 64.9303 196.987 64.9303 197.28 65.2092L201.78 69.4949C202.073 69.7739 202.073 70.2261 201.78 70.5051L197.28 74.7908C196.987 75.0697 196.513 75.0697 196.22 74.7908Z" fill="#2F2F2F"/>
+</svg>
diff --git a/apps/landing/public/images/components/progress-bar.svg b/apps/landing/public/images/components/progress-bar.svg
new file mode 100644
index 00000000..a4a30894
--- /dev/null
+++ b/apps/landing/public/images/components/progress-bar.svg
@@ -0,0 +1,16 @@
+<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_560_2677)">
+<rect x="50" y="68" width="23.3333" height="6" rx="2" fill="#6159D4"/>
+<rect x="77.3334" y="68" width="23.3333" height="6" rx="2" fill="#6159D4"/>
+<rect x="104.667" y="68" width="23.3333" height="6" rx="2" fill="#6159D4"/>
+<rect x="132" y="68" width="23.3333" height="6" rx="2" fill="#DADADA"/>
+<rect x="159.333" y="68" width="23.3333" height="6" rx="2" fill="#DADADA"/>
+<rect x="186.667" y="68" width="23.3333" height="6" rx="2" fill="#DADADA"/>
+</g>
+<path d="M195.357 59.1172C193.599 59.1172 192.345 58.168 192.298 56.7852H193.611C193.657 57.5352 194.396 58.0039 195.345 58.0039C196.365 58.0039 197.115 57.4414 197.115 56.6211C197.115 55.7891 196.411 55.1797 195.204 55.1797H194.478V54.125H195.204C196.165 54.125 196.845 53.5859 196.845 52.7773C196.845 52.0039 196.271 51.4766 195.368 51.4766C194.513 51.4766 193.763 51.9453 193.728 52.7188H192.486C192.521 51.3359 193.798 50.3984 195.38 50.3984C197.044 50.3984 198.099 51.4531 198.087 52.707C198.099 53.668 197.501 54.3711 196.587 54.5938V54.6523C197.747 54.8164 198.415 55.5898 198.415 56.668C198.415 58.0859 197.115 59.1172 195.357 59.1172ZM202.719 50.1172L199.989 60.2773H198.876L201.606 50.1172H202.719ZM206.344 59.1172C204.773 59.1055 203.133 58.1797 203.133 55.0391C203.133 52.0859 204.41 50.3984 206.449 50.3984C208.008 50.3984 209.098 51.3711 209.297 52.7188H208.02C207.855 52.0273 207.305 51.5234 206.449 51.5234C205.137 51.5234 204.375 52.6719 204.375 54.582H204.469C204.926 53.8672 205.723 53.4336 206.648 53.4336C208.16 53.4336 209.379 54.5938 209.379 56.2227C209.379 57.8633 208.172 59.1289 206.344 59.1172ZM206.332 58.0391C207.363 58.0391 208.125 57.2422 208.125 56.2461C208.125 55.2734 207.387 54.4883 206.367 54.4883C205.324 54.4883 204.539 55.3086 204.527 56.2578C204.539 57.1953 205.289 58.0391 206.332 58.0391Z" fill="#999999"/>
+<defs>
+<clipPath id="clip0_560_2677">
+<rect x="50" y="68" width="160" height="6" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/landing/public/images/components/radio.svg b/apps/landing/public/images/components/radio.svg
new file mode 100644
index 00000000..11004145
--- /dev/null
+++ b/apps/landing/public/images/components/radio.svg
@@ -0,0 +1,9 @@
+<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="67.5" y="33.5" width="17" height="17" rx="8.5" stroke="#C8C7D1"/>
+<rect opacity="0.4" x="93" y="38" width="100" height="8" rx="2" fill="#2F2F2F"/>
+<rect x="67.5" y="61.5" width="17" height="17" rx="8.5" stroke="#6159D4"/>
+<circle cx="76" cy="70" r="6" fill="#6159D4"/>
+<rect opacity="0.4" x="93" y="66" width="100" height="8" rx="2" fill="#2F2F2F"/>
+<rect x="67.5" y="89.5" width="17" height="17" rx="8.5" stroke="#C8C7D1"/>
+<rect opacity="0.4" x="93" y="94" width="100" height="8" rx="2" fill="#2F2F2F"/>
+</svg>
diff --git a/apps/landing/public/images/components/search.svg b/apps/landing/public/images/components/search.svg
new file mode 100644
index 00000000..3147e39d
--- /dev/null
+++ b/apps/landing/public/images/components/search.svg
@@ -0,0 +1,5 @@
+<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="43.5" y="52.5" width="173" height="35" rx="7.5" stroke="#C8C7D1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M61.0838 73.3291C60.2042 73.8962 59.1633 74.2241 58.0477 74.2241C54.8917 74.2241 52.3334 71.5996 52.3334 68.3621C52.3334 65.1245 54.8917 62.5 58.0477 62.5C61.2036 62.5 63.7619 65.1245 63.7619 68.3621C63.7619 69.7537 63.2893 71.032 62.4996 72.0374C62.5101 72.0472 62.5205 72.0573 62.5306 72.0678L65.3878 74.9988C65.7597 75.3804 65.7597 75.999 65.3878 76.3805C65.0158 76.7621 64.4128 76.7621 64.0409 76.3805L61.1837 73.4495C61.1468 73.4115 61.1135 73.3713 61.0838 73.3291ZM62.5119 68.3621C62.5119 70.9395 60.4833 72.9741 58.0477 72.9741C55.612 72.9741 53.5834 70.9395 53.5834 68.3621C53.5834 65.7846 55.612 63.75 58.0477 63.75C60.4833 63.75 62.5119 65.7846 62.5119 68.3621Z" fill="#A9A8B4"/>
+<path d="M79.8148 74V65.5156H82.8383C84.807 65.5156 85.7797 66.6992 85.7797 68.2695C85.7797 69.8281 84.807 71.0234 82.8383 71.0234H81.1039V74H79.8148ZM81.1039 69.9219H82.7094C83.9633 69.9219 84.4789 69.2188 84.4789 68.2695C84.4789 67.3086 83.9633 66.6172 82.7094 66.6172H81.1039V69.9219ZM87.9275 65.5156V74H86.6736V65.5156H87.9275ZM88.798 72.207C88.798 70.7539 90.0284 70.3789 91.1769 70.2969C91.5987 70.2676 92.5538 70.2148 92.8527 70.2031L92.8409 69.6992C92.8409 68.9844 92.4073 68.5625 91.5519 68.5625C90.8136 68.5625 90.3683 68.9023 90.2394 69.3711H88.9972C89.1144 68.3164 90.0987 67.5547 91.5987 67.5547C92.6066 67.5547 94.0948 67.9297 94.0948 69.7695V74H92.8761V73.1328H92.8292C92.5831 73.6133 91.9972 74.1406 90.9425 74.1406C89.7355 74.1406 88.798 73.4492 88.798 72.207ZM90.0167 72.2188C90.0167 72.8281 90.5206 73.1445 91.2237 73.1445C92.2433 73.1445 92.8527 72.4648 92.8527 71.7031V71.1172L91.3527 71.2227C90.5323 71.2812 90.0167 71.5859 90.0167 72.2188ZM97.9419 74.1289C96.0903 74.1289 94.9653 72.7578 94.9653 70.8477C94.9653 68.9023 96.1255 67.5547 97.9184 67.5547C99.3716 67.5547 100.426 68.4102 100.555 69.6992H99.3364C99.2075 69.1016 98.727 68.5977 97.9419 68.5977C96.9106 68.5977 96.2192 69.4531 96.2192 70.8125C96.2192 72.207 96.8989 73.0625 97.9419 73.0625C98.645 73.0625 99.1841 72.6758 99.3364 71.9844H100.555C100.415 73.2148 99.4419 74.1289 97.9419 74.1289ZM104.121 74.1289C102.246 74.1289 101.097 72.8398 101.097 70.8594C101.097 68.9023 102.269 67.5547 104.039 67.5547C105.492 67.5547 106.863 68.457 106.863 70.7539V71.1992H102.34C102.375 72.4062 103.084 73.0977 104.133 73.0977C104.847 73.0977 105.305 72.793 105.515 72.4062H106.781C106.5 73.4375 105.515 74.1289 104.121 74.1289ZM102.351 70.2617H105.633C105.633 69.2891 105.012 68.5859 104.051 68.5859C103.049 68.5859 102.398 69.3594 102.351 70.2617ZM108.999 70.2266V74H107.745V65.5156H108.976V68.6797H109.058C109.362 67.9883 109.948 67.5547 110.945 67.5547C112.257 67.5547 113.124 68.3633 113.124 69.957V74H111.87V70.1094C111.87 69.1719 111.366 68.6328 110.523 68.6328C109.644 68.6328 108.999 69.207 108.999 70.2266ZM116.971 74.1289C115.167 74.1289 113.995 72.8164 113.995 70.8477C113.995 68.8672 115.167 67.5547 116.971 67.5547C118.764 67.5547 119.936 68.8672 119.936 70.8477C119.936 72.8164 118.764 74.1289 116.971 74.1289ZM116.971 73.0859C118.12 73.0859 118.67 72.0664 118.67 70.8477C118.67 69.6289 118.12 68.5859 116.971 68.5859C115.799 68.5859 115.249 69.6289 115.249 70.8477C115.249 72.0664 115.799 73.0859 116.971 73.0859ZM122.06 65.5156V74H120.807V65.5156H122.06ZM125.603 74.1289C124.068 74.1289 122.943 72.8867 122.943 70.8359C122.943 68.7617 124.079 67.5547 125.615 67.5547C126.798 67.5547 127.232 68.2695 127.454 68.668H127.513V65.5156H128.767V74H127.548V73.0039H127.454C127.22 73.4258 126.763 74.1289 125.603 74.1289ZM125.884 73.0625C126.95 73.0625 127.548 72.1484 127.548 70.8125C127.548 69.4883 126.962 68.6211 125.884 68.6211C124.771 68.6211 124.22 69.5586 124.22 70.8125C124.22 72.0898 124.794 73.0625 125.884 73.0625ZM132.778 74.1289C130.903 74.1289 129.755 72.8398 129.755 70.8594C129.755 68.9023 130.926 67.5547 132.696 67.5547C134.149 67.5547 135.52 68.457 135.52 70.7539V71.1992H130.997C131.032 72.4062 131.741 73.0977 132.79 73.0977C133.505 73.0977 133.962 72.793 134.172 72.4062H135.438C135.157 73.4375 134.172 74.1289 132.778 74.1289ZM131.008 70.2617H134.29C134.29 69.2891 133.669 68.5859 132.708 68.5859C131.706 68.5859 131.055 69.3594 131.008 70.2617ZM136.402 74V67.6367H137.609V68.6445H137.68C137.914 67.9648 138.547 67.543 139.297 67.543C139.449 67.543 139.695 67.5547 139.824 67.5664V68.7617C139.719 68.7383 139.426 68.6914 139.168 68.6914C138.301 68.6914 137.656 69.2891 137.656 70.1211V74H136.402Z" fill="#999999"/>
+</svg>
diff --git a/apps/landing/public/images/components/select.svg b/apps/landing/public/images/components/select.svg
new file mode 100644
index 00000000..ef44b290
--- /dev/null
+++ b/apps/landing/public/images/components/select.svg
@@ -0,0 +1,6 @@
+<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="42.5" y="34.5" width="173" height="71" rx="7.5" stroke="#C8C7D1"/>
+<rect x="46" y="38" width="166" height="30" rx="5" fill="#ECECEC"/>
+<rect opacity="0.4" x="53" y="49" width="100" height="8" rx="2" fill="#2F2F2F"/>
+<rect opacity="0.4" x="53" y="82" width="86" height="8" rx="2" fill="#2F2F2F"/>
+</svg>
diff --git a/apps/landing/public/images/components/slider.svg b/apps/landing/public/images/components/slider.svg
new file mode 100644
index 00000000..0810c472
--- /dev/null
+++ b/apps/landing/public/images/components/slider.svg
@@ -0,0 +1,20 @@
+<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="40" y="67" width="180" height="6" rx="3" fill="#E0E0E0"/>
+<rect x="40" y="67" width="120" height="6" fill="#6159D4"/>
+<circle cx="160" cy="70.5" r="16" fill="#6159D4" fill-opacity="0.2"/>
+<g filter="url(#filter0_d_560_2659)">
+<circle cx="160" cy="70.5" r="8" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_560_2659" x="148" y="58.5" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_560_2659"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_560_2659" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/apps/landing/public/images/components/stepper.svg b/apps/landing/public/images/components/stepper.svg
new file mode 100644
index 00000000..a8f8fba4
--- /dev/null
+++ b/apps/landing/public/images/components/stepper.svg
@@ -0,0 +1,8 @@
+<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="64.5" y="56.5" width="27" height="27" rx="5.5" stroke="#C8C7D1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M73 70C73 69.4477 73.3731 69 73.8333 69H82.1667C82.6269 69 83 69.4477 83 70C83 70.5523 82.6269 71 82.1667 71H73.8333C73.3731 71 73 70.5523 73 70Z" fill="#1A1A1A"/>
+<rect x="100.5" y="52.5" width="59" height="35" rx="7.5" stroke="#C8C7D1"/>
+<rect x="168.5" y="56.5" width="27" height="27" rx="5.5" stroke="#C8C7D1"/>
+<path d="M182.833 65.8333C182.833 65.3731 182.46 65 182 65C181.54 65 181.167 65.3731 181.167 65.8333V69.1667H177.833C177.373 69.1667 177 69.5398 177 70C177 70.4602 177.373 70.8333 177.833 70.8333H181.167V74.1667C181.167 74.6269 181.54 75 182 75C182.46 75 182.833 74.6269 182.833 74.1667V70.8333H186.167C186.627 70.8333 187 70.4602 187 70C187 69.5398 186.627 69.1667 186.167 69.1667H182.833V65.8333Z" fill="#1A1A1A"/>
+<path d="M127.547 65.5156V74H126.247V66.8047H126.2L124.172 68.1289V66.8984L126.282 65.5156H127.547ZM132.297 74.1172C130.328 74.1172 129.18 72.5352 129.18 69.7578C129.18 67.0039 130.352 65.3984 132.297 65.3984C134.242 65.3984 135.414 67.0039 135.414 69.7578C135.414 72.5352 134.254 74.1172 132.297 74.1172ZM132.297 73.0039C133.445 73.0039 134.125 71.8789 134.125 69.7578C134.125 67.6484 133.434 66.4883 132.297 66.4883C131.16 66.4883 130.469 67.6484 130.469 69.7578C130.469 71.8789 131.148 73.0039 132.297 73.0039Z" fill="#2F2F2F"/>
+</svg>
diff --git a/apps/landing/public/images/components/text-area.svg b/apps/landing/public/images/components/text-area.svg
new file mode 100644
index 00000000..b6203f36
--- /dev/null
+++ b/apps/landing/public/images/components/text-area.svg
@@ -0,0 +1,5 @@
+<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="43.5" y="19.5" width="173" height="94" rx="7.5" stroke="#C8C7D1"/>
+<path d="M54.0149 40V31.5156H57.0383C59.007 31.5156 59.9797 32.6992 59.9797 34.2695C59.9797 35.8281 59.007 37.0234 57.0383 37.0234H55.3039V40H54.0149ZM55.3039 35.9219H56.9094C58.1633 35.9219 58.6789 35.2188 58.6789 34.2695C58.6789 33.3086 58.1633 32.6172 56.9094 32.6172H55.3039V35.9219ZM62.1275 31.5156V40H60.8736V31.5156H62.1275ZM62.998 38.207C62.998 36.7539 64.2284 36.3789 65.3769 36.2969C65.7988 36.2676 66.7538 36.2148 67.0527 36.2031L67.0409 35.6992C67.0409 34.9844 66.6074 34.5625 65.7519 34.5625C65.0136 34.5625 64.5683 34.9023 64.4394 35.3711H63.1972C63.3144 34.3164 64.2988 33.5547 65.7988 33.5547C66.8066 33.5547 68.2949 33.9297 68.2949 35.7695V40H67.0761V39.1328H67.0292C66.7831 39.6133 66.1972 40.1406 65.1425 40.1406C63.9355 40.1406 62.998 39.4492 62.998 38.207ZM64.2167 38.2188C64.2167 38.8281 64.7206 39.1445 65.4238 39.1445C66.4433 39.1445 67.0527 38.4648 67.0527 37.7031V37.1172L65.5527 37.2227C64.7324 37.2812 64.2167 37.5859 64.2167 38.2188ZM72.1419 40.1289C70.2903 40.1289 69.1653 38.7578 69.1653 36.8477C69.1653 34.9023 70.3255 33.5547 72.1184 33.5547C73.5716 33.5547 74.6263 34.4102 74.7552 35.6992H73.5364C73.4075 35.1016 72.927 34.5977 72.1419 34.5977C71.1106 34.5977 70.4192 35.4531 70.4192 36.8125C70.4192 38.207 71.0989 39.0625 72.1419 39.0625C72.845 39.0625 73.3841 38.6758 73.5364 37.9844H74.7552C74.6145 39.2148 73.6419 40.1289 72.1419 40.1289ZM78.3209 40.1289C76.4459 40.1289 75.2975 38.8398 75.2975 36.8594C75.2975 34.9023 76.4694 33.5547 78.2389 33.5547C79.692 33.5547 81.0631 34.457 81.0631 36.7539V37.1992H76.5397C76.5749 38.4062 77.2838 39.0977 78.3327 39.0977C79.0475 39.0977 79.5045 38.793 79.7155 38.4062H80.9811C80.6999 39.4375 79.7155 40.1289 78.3209 40.1289ZM76.5514 36.2617H79.8327C79.8327 35.2891 79.2116 34.5859 78.2506 34.5859C77.2487 34.5859 76.5983 35.3594 76.5514 36.2617ZM83.1992 36.2266V40H81.9453V31.5156H83.1758V34.6797H83.2578C83.5625 33.9883 84.1484 33.5547 85.1445 33.5547C86.457 33.5547 87.3242 34.3633 87.3242 35.957V40H86.0703V36.1094C86.0703 35.1719 85.5664 34.6328 84.7227 34.6328C83.8438 34.6328 83.1992 35.207 83.1992 36.2266ZM91.1713 40.1289C89.3666 40.1289 88.1947 38.8164 88.1947 36.8477C88.1947 34.8672 89.3666 33.5547 91.1713 33.5547C92.9642 33.5547 94.1361 34.8672 94.1361 36.8477C94.1361 38.8164 92.9642 40.1289 91.1713 40.1289ZM91.1713 39.0859C92.3197 39.0859 92.8705 38.0664 92.8705 36.8477C92.8705 35.6289 92.3197 34.5859 91.1713 34.5859C89.9994 34.5859 89.4486 35.6289 89.4486 36.8477C89.4486 38.0664 89.9994 39.0859 91.1713 39.0859ZM96.2605 31.5156V40H95.0066V31.5156H96.2605ZM99.8028 40.1289C98.2677 40.1289 97.1427 38.8867 97.1427 36.8359C97.1427 34.7617 98.2794 33.5547 99.8145 33.5547C100.998 33.5547 101.432 34.2695 101.654 34.668H101.713V31.5156H102.967V40H101.748V39.0039H101.654C101.42 39.4258 100.963 40.1289 99.8028 40.1289ZM100.084 39.0625C101.15 39.0625 101.748 38.1484 101.748 36.8125C101.748 35.4883 101.162 34.6211 100.084 34.6211C98.9708 34.6211 98.42 35.5586 98.42 36.8125C98.42 38.0898 98.9942 39.0625 100.084 39.0625ZM106.978 40.1289C105.103 40.1289 103.955 38.8398 103.955 36.8594C103.955 34.9023 105.126 33.5547 106.896 33.5547C108.349 33.5547 109.72 34.457 109.72 36.7539V37.1992H105.197C105.232 38.4062 105.941 39.0977 106.99 39.0977C107.705 39.0977 108.162 38.793 108.373 38.4062H109.638C109.357 39.4375 108.373 40.1289 106.978 40.1289ZM105.208 36.2617H108.49C108.49 35.2891 107.869 34.5859 106.908 34.5859C105.906 34.5859 105.255 35.3594 105.208 36.2617ZM110.602 40V33.6367H111.809V34.6445H111.88C112.114 33.9648 112.747 33.543 113.497 33.543C113.649 33.543 113.895 33.5547 114.024 33.5664V34.7617C113.919 34.7383 113.626 34.6914 113.368 34.6914C112.501 34.6914 111.856 35.2891 111.856 36.1211V40H110.602Z" fill="#999999"/>
+<path d="M199.257 126.078C197.944 126.078 197.179 125.023 197.179 123.172C197.179 121.336 197.96 120.266 199.257 120.266C200.554 120.266 201.335 121.336 201.335 123.172C201.335 125.023 200.562 126.078 199.257 126.078ZM199.257 125.336C200.022 125.336 200.476 124.586 200.476 123.172C200.476 121.766 200.015 120.992 199.257 120.992C198.499 120.992 198.038 121.766 198.038 123.172C198.038 124.586 198.491 125.336 199.257 125.336ZM204.15 120.078L202.329 126.852H201.587L203.407 120.078H204.15ZM206.667 120.344V126H205.8V121.203H205.769L204.417 122.086V121.266L205.824 120.344H206.667ZM209.834 126.078C208.521 126.078 207.756 125.023 207.756 123.172C207.756 121.336 208.537 120.266 209.834 120.266C211.131 120.266 211.912 121.336 211.912 123.172C211.912 125.023 211.138 126.078 209.834 126.078ZM209.834 125.336C210.599 125.336 211.052 124.586 211.052 123.172C211.052 121.766 210.592 120.992 209.834 120.992C209.076 120.992 208.615 121.766 208.615 123.172C208.615 124.586 209.068 125.336 209.834 125.336ZM214.531 126.078C213.219 126.078 212.453 125.023 212.453 123.172C212.453 121.336 213.234 120.266 214.531 120.266C215.828 120.266 216.609 121.336 216.609 123.172C216.609 125.023 215.836 126.078 214.531 126.078ZM214.531 125.336C215.297 125.336 215.75 124.586 215.75 123.172C215.75 121.766 215.289 120.992 214.531 120.992C213.773 120.992 213.312 121.766 213.312 123.172C213.312 124.586 213.766 125.336 214.531 125.336Z" fill="#999999"/>
+</svg>
diff --git a/apps/landing/public/images/components/text-box.svg b/apps/landing/public/images/components/text-box.svg
new file mode 100644
index 00000000..6c8371e7
--- /dev/null
+++ b/apps/landing/public/images/components/text-box.svg
@@ -0,0 +1,16 @@
+<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="43.5" y="74.5" width="173" height="35" rx="7.5" stroke="#C8C7D1"/>
+<path d="M204.458 87.1753C204.773 86.7788 205.345 86.6787 205.78 86.9585C206.245 87.2571 206.379 87.8758 206.081 88.3404L200.68 96.7417C200.382 97.206 199.763 97.341 199.299 97.0425C198.834 96.7439 198.701 96.1251 198.999 95.6607L199.607 94.7124C198.154 94.1292 197.326 93.0923 196.789 92.4165C196.763 92.3842 196.738 92.3524 196.714 92.3218C196.597 92.1761 196.568 91.982 196.637 91.8101C197.099 90.6519 198.92 88.8492 202 88.8491C202.462 88.8491 202.895 88.8925 203.301 88.9654L204.398 87.2583L204.458 87.1753ZM205.487 90.4429C205.652 90.1903 205.996 90.1229 206.224 90.3198C206.803 90.8186 207.184 91.3625 207.363 91.8101C207.432 91.9819 207.403 92.1761 207.287 92.3218C207.262 92.3525 207.237 92.3841 207.211 92.4165C206.576 93.2146 205.538 94.5213 203.542 94.9829C203.083 95.0888 202.781 94.5826 203.039 94.188C203.123 94.0597 203.256 93.9712 203.404 93.9331C204.838 93.5657 205.643 92.6626 206.228 91.9351C206.093 91.7094 205.885 91.4482 205.603 91.19C205.393 90.9975 205.331 90.6815 205.487 90.4429ZM202 89.8999C199.634 89.9 198.249 91.1377 197.772 91.9351C198.3 92.5906 199.006 93.3868 200.189 93.8072L200.726 92.9712C200.51 92.7035 200.38 92.3664 200.38 91.9995C200.38 91.1298 201.105 90.4245 202 90.4243C202.117 90.4243 202.231 90.4366 202.341 90.4595L202.678 89.9351C202.461 89.9122 202.235 89.8999 202 89.8999Z" fill="#A9A8B4"/>
+<rect x="43.5" y="30.5" width="173" height="35" rx="7.5" stroke="#C8C7D1"/>
+<circle cx="202" cy="48" r="6" fill="black" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M199.717 45.7172C199.873 45.561 200.127 45.561 200.283 45.7172L202 47.4343L203.717 45.7172C203.873 45.561 204.127 45.561 204.283 45.7172C204.439 45.8734 204.439 46.1266 204.283 46.2828L202.566 48L204.283 49.7172C204.439 49.8734 204.439 50.1266 204.283 50.2828C204.127 50.4391 203.873 50.4391 203.717 50.2828L202 48.5657L200.283 50.2828C200.127 50.4391 199.873 50.4391 199.717 50.2828C199.561 50.1266 199.561 49.8734 199.717 49.7172L201.434 48L199.717 46.2828C199.561 46.1266 199.561 45.8734 199.717 45.7172Z" fill="white"/>
+<path d="M53.8148 52V43.5156H56.8383C58.807 43.5156 59.7797 44.6992 59.7797 46.2695C59.7797 47.8281 58.807 49.0234 56.8383 49.0234H55.1039V52H53.8148ZM55.1039 47.9219H56.7094C57.9633 47.9219 58.4789 47.2188 58.4789 46.2695C58.4789 45.3086 57.9633 44.6172 56.7094 44.6172H55.1039V47.9219ZM61.9275 43.5156V52H60.6736V43.5156H61.9275ZM62.798 50.207C62.798 48.7539 64.0284 48.3789 65.1769 48.2969C65.5987 48.2676 66.5538 48.2148 66.8527 48.2031L66.8409 47.6992C66.8409 46.9844 66.4073 46.5625 65.5519 46.5625C64.8136 46.5625 64.3683 46.9023 64.2394 47.3711H62.9972C63.1144 46.3164 64.0987 45.5547 65.5987 45.5547C66.6066 45.5547 68.0948 45.9297 68.0948 47.7695V52H66.8761V51.1328H66.8292C66.5831 51.6133 65.9972 52.1406 64.9425 52.1406C63.7355 52.1406 62.798 51.4492 62.798 50.207ZM64.0167 50.2188C64.0167 50.8281 64.5206 51.1445 65.2237 51.1445C66.2433 51.1445 66.8527 50.4648 66.8527 49.7031V49.1172L65.3527 49.2227C64.5323 49.2812 64.0167 49.5859 64.0167 50.2188ZM71.9419 52.1289C70.0903 52.1289 68.9653 50.7578 68.9653 48.8477C68.9653 46.9023 70.1255 45.5547 71.9184 45.5547C73.3716 45.5547 74.4262 46.4102 74.5552 47.6992H73.3364C73.2075 47.1016 72.727 46.5977 71.9419 46.5977C70.9106 46.5977 70.2192 47.4531 70.2192 48.8125C70.2192 50.207 70.8989 51.0625 71.9419 51.0625C72.645 51.0625 73.1841 50.6758 73.3364 49.9844H74.5552C74.4145 51.2148 73.4419 52.1289 71.9419 52.1289ZM78.1209 52.1289C76.2459 52.1289 75.0975 50.8398 75.0975 48.8594C75.0975 46.9023 76.2694 45.5547 78.0389 45.5547C79.492 45.5547 80.8631 46.457 80.8631 48.7539V49.1992H76.3397C76.3748 50.4062 77.0838 51.0977 78.1327 51.0977C78.8475 51.0977 79.3045 50.793 79.5155 50.4062H80.7811C80.4998 51.4375 79.5155 52.1289 78.1209 52.1289ZM76.3514 48.2617H79.6327C79.6327 47.2891 79.0116 46.5859 78.0506 46.5859C77.0487 46.5859 76.3983 47.3594 76.3514 48.2617ZM82.9992 48.2266V52H81.7453V43.5156H82.9758V46.6797H83.0578C83.3625 45.9883 83.9484 45.5547 84.9445 45.5547C86.257 45.5547 87.1242 46.3633 87.1242 47.957V52H85.8703V48.1094C85.8703 47.1719 85.3664 46.6328 84.5227 46.6328C83.6437 46.6328 82.9992 47.207 82.9992 48.2266ZM90.9712 52.1289C89.1666 52.1289 87.9947 50.8164 87.9947 48.8477C87.9947 46.8672 89.1666 45.5547 90.9712 45.5547C92.7642 45.5547 93.9361 46.8672 93.9361 48.8477C93.9361 50.8164 92.7642 52.1289 90.9712 52.1289ZM90.9712 51.0859C92.1197 51.0859 92.6705 50.0664 92.6705 48.8477C92.6705 47.6289 92.1197 46.5859 90.9712 46.5859C89.7994 46.5859 89.2486 47.6289 89.2486 48.8477C89.2486 50.0664 89.7994 51.0859 90.9712 51.0859ZM96.0605 43.5156V52H94.8066V43.5156H96.0605ZM99.6028 52.1289C98.0677 52.1289 96.9427 50.8867 96.9427 48.8359C96.9427 46.7617 98.0794 45.5547 99.6145 45.5547C100.798 45.5547 101.232 46.2695 101.454 46.668H101.513V43.5156H102.767V52H101.548V51.0039H101.454C101.22 51.4258 100.763 52.1289 99.6028 52.1289ZM99.8841 51.0625C100.95 51.0625 101.548 50.1484 101.548 48.8125C101.548 47.4883 100.962 46.6211 99.8841 46.6211C98.7708 46.6211 98.22 47.5586 98.22 48.8125C98.22 50.0898 98.7942 51.0625 99.8841 51.0625ZM106.778 52.1289C104.903 52.1289 103.755 50.8398 103.755 48.8594C103.755 46.9023 104.926 45.5547 106.696 45.5547C108.149 45.5547 109.52 46.457 109.52 48.7539V49.1992H104.997C105.032 50.4062 105.741 51.0977 106.79 51.0977C107.505 51.0977 107.962 50.793 108.172 50.4062H109.438C109.157 51.4375 108.172 52.1289 106.778 52.1289ZM105.008 48.2617H108.29C108.29 47.2891 107.669 46.5859 106.708 46.5859C105.706 46.5859 105.055 47.3594 105.008 48.2617ZM110.402 52V45.6367H111.609V46.6445H111.68C111.914 45.9648 112.547 45.543 113.297 45.543C113.449 45.543 113.695 45.5547 113.824 45.5664V46.7617C113.719 46.7383 113.426 46.6914 113.168 46.6914C112.301 46.6914 111.656 47.2891 111.656 48.1211V52H110.402Z" fill="#999999"/>
+<circle cx="57" cy="92" r="3" fill="#2F2F2F"/>
+<circle cx="66" cy="92" r="3" fill="#2F2F2F"/>
+<circle cx="75" cy="92" r="3" fill="#2F2F2F"/>
+<circle cx="84" cy="92" r="3" fill="#2F2F2F"/>
+<circle cx="93" cy="92" r="3" fill="#2F2F2F"/>
+<circle cx="102" cy="92" r="3" fill="#2F2F2F"/>
+<circle cx="111" cy="92" r="3" fill="#2F2F2F"/>
+<circle cx="120" cy="92" r="3" fill="#2F2F2F"/>
+</svg>
diff --git a/apps/landing/public/images/components/theme/theme-button.svg b/apps/landing/public/images/components/theme/theme-button.svg
new file mode 100644
index 00000000..98823510
--- /dev/null
+++ b/apps/landing/public/images/components/theme/theme-button.svg
@@ -0,0 +1,4 @@
+<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M108 79.3333C108.327 79.3333 108.642 79.4532 108.886 79.6702C109.13 79.8873 109.286 80.1863 109.324 80.5106L109.333 80.6666V82C109.333 82.3398 109.203 82.6667 108.97 82.9138C108.736 83.1609 108.417 83.3096 108.078 83.3295C107.739 83.3494 107.405 83.2391 107.144 83.0209C106.884 82.8028 106.716 82.4934 106.676 82.156L106.667 82V80.6666C106.667 80.313 106.807 79.9739 107.057 79.7238C107.307 79.4738 107.646 79.3333 108 79.3333ZM116.417 76.5466L116.543 76.6573L117.476 77.5906C117.715 77.8306 117.854 78.1525 117.864 78.4911C117.875 78.8297 117.756 79.1596 117.532 79.4137C117.308 79.6678 116.995 79.827 116.658 79.8592C116.321 79.8913 115.984 79.7938 115.716 79.5866L115.591 79.476L114.657 78.5426C114.427 78.3129 114.289 78.0071 114.269 77.6826C114.248 77.3582 114.347 77.0374 114.547 76.7807C114.746 76.524 115.033 76.3491 115.352 76.2888C115.671 76.2285 116.002 76.287 116.281 76.4533L116.417 76.5466ZM101.343 76.6573C101.572 76.8869 101.71 77.1924 101.731 77.5164C101.751 77.8404 101.652 78.1608 101.453 78.4173L101.343 78.5426L100.409 79.476C100.169 79.7151 99.8474 79.8539 99.5088 79.8643C99.1702 79.8746 98.8404 79.7557 98.5863 79.5316C98.3322 79.3076 98.1729 78.9952 98.1408 78.658C98.1087 78.3208 98.2061 77.9839 98.4133 77.716L98.524 77.5906L99.4573 76.6573C99.7074 76.4073 100.046 76.2669 100.4 76.2669C100.754 76.2669 101.093 76.4073 101.343 76.6573ZM97.3333 68.6666C97.6732 68.667 98.0001 68.7971 98.2472 69.0304C98.4943 69.2637 98.643 69.5826 98.6629 69.9218C98.6828 70.2611 98.5724 70.5951 98.3543 70.8557C98.1362 71.1163 97.8268 71.2838 97.4893 71.324L97.3333 71.3333H96C95.6602 71.3329 95.3333 71.2028 95.0862 70.9695C94.8391 70.7362 94.6904 70.4174 94.6704 70.0781C94.6505 69.7388 94.7609 69.4048 94.979 69.1442C95.1971 68.8836 95.5065 68.7161 95.844 68.676L96 68.6666H97.3333ZM120 68.6666C120.34 68.667 120.667 68.7971 120.914 69.0304C121.161 69.2637 121.31 69.5826 121.33 69.9218C121.349 70.2611 121.239 70.5951 121.021 70.8557C120.803 71.1163 120.493 71.2838 120.156 71.324L120 71.3333H118.667C118.327 71.3329 118 71.2028 117.753 70.9695C117.506 70.7362 117.357 70.4174 117.337 70.0781C117.317 69.7388 117.428 69.4048 117.646 69.1442C117.864 68.8836 118.173 68.7161 118.511 68.676L118.667 68.6666H120ZM100.284 60.4133L100.409 60.524L101.343 61.4573C101.582 61.6972 101.721 62.0192 101.731 62.3578C101.741 62.6964 101.622 63.0262 101.398 63.2803C101.174 63.5344 100.862 63.6937 100.525 63.7258C100.187 63.7579 99.8507 63.6605 99.5827 63.4533L99.4573 63.3426L98.524 62.4093C98.2948 62.1795 98.1573 61.8741 98.1372 61.5501C98.1171 61.2262 98.2158 60.9061 98.4149 60.6498C98.614 60.3934 98.8997 60.2185 99.2185 60.1578C99.5373 60.0971 99.8673 60.1547 100.147 60.32L100.284 60.4133ZM117.476 60.524C117.706 60.7536 117.843 61.059 117.864 61.3831C117.884 61.7071 117.786 62.0274 117.587 62.284L117.476 62.4093L116.543 63.3426C116.303 63.5818 115.981 63.7206 115.642 63.7309C115.304 63.7413 114.974 63.6223 114.72 63.3983C114.466 63.1742 114.306 62.8619 114.274 62.5247C114.242 62.1874 114.339 61.8506 114.547 61.5826L114.657 61.4573L115.591 60.524C115.841 60.274 116.18 60.1336 116.533 60.1336C116.887 60.1336 117.226 60.274 117.476 60.524ZM108 56.6666C108.327 56.6667 108.642 56.7866 108.886 57.0036C109.13 57.2206 109.286 57.5196 109.324 57.844L109.333 58V59.3333C109.333 59.6731 109.203 60 108.97 60.2471C108.736 60.4942 108.417 60.6429 108.078 60.6629C107.739 60.6828 107.405 60.5724 107.144 60.3543C106.884 60.1362 106.716 59.8268 106.676 59.4893L106.667 59.3333V58C106.667 57.6463 106.807 57.3072 107.057 57.0572C107.307 56.8071 107.646 56.6666 108 56.6666ZM108 63.3333C109.306 63.3332 110.584 63.7169 111.674 64.4366C112.764 65.1564 113.618 66.1805 114.131 67.3818C114.644 68.5831 114.793 69.9086 114.559 71.1937C114.325 72.4788 113.719 73.6669 112.816 74.6104C111.912 75.5539 110.752 76.2113 109.478 76.5008C108.204 76.7903 106.874 76.6993 105.651 76.239C104.429 75.7787 103.368 74.9694 102.602 73.9116C101.836 72.8539 101.397 71.5943 101.34 70.2893L101.333 70L101.34 69.7106C101.415 67.9943 102.149 66.373 103.39 65.1848C104.63 63.9967 106.282 63.3334 108 63.3333Z" fill="#2F2F2F"/>
+<path d="M138 70C138 63.3823 143.364 58.0179 149.982 58.0179H152.06L151.02 59.8152C150.326 61.0135 149.982 62.4381 149.982 64.009C149.982 65.2474 150.256 66.4706 150.785 67.5906C151.313 68.7105 152.083 69.6995 153.04 70.4865C153.996 71.2735 155.115 71.8389 156.316 72.1422C157.516 72.4455 158.769 72.4791 159.985 72.2406L162 71.8488L161.349 73.7971C159.762 78.5515 155.274 81.982 149.982 81.982C143.364 81.982 138 76.6176 138 70Z" fill="#2F2F2F"/>
+</svg>
diff --git a/apps/landing/public/images/components/toggle.svg b/apps/landing/public/images/components/toggle.svg
new file mode 100644
index 00000000..4f25e8cf
--- /dev/null
+++ b/apps/landing/public/images/components/toggle.svg
@@ -0,0 +1,4 @@
+<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="105" y="56" width="50" height="28" rx="14" fill="#6159D4"/>
+<circle cx="141" cy="70" r="10" fill="white"/>
+</svg>
diff --git a/apps/landing/public/images/components/uploader.svg b/apps/landing/public/images/components/uploader.svg
new file mode 100644
index 00000000..473b2fc7
--- /dev/null
+++ b/apps/landing/public/images/components/uploader.svg
@@ -0,0 +1,15 @@
+<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="63" y="24" width="118" height="78" rx="7" stroke="#6159D4" stroke-width="2" stroke-dasharray="4 4"/>
+<rect x="92" y="70" width="59" height="15" rx="2" fill="#DADADA"/>
+<rect x="131.5" y="50.5" width="67" height="67" rx="3.5" fill="white"/>
+<rect x="131.5" y="50.5" width="67" height="67" rx="3.5" stroke="#2F2F2F"/>
+<path d="M131 62C136.523 62 141 57.5228 141 52C141 46.4772 136.523 42 131 42C125.477 42 121 46.4772 121 52C121 57.5228 125.477 62 131 62Z" fill="#2CA353"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M132.25 47.0498V56.9498H129.75V47.0498H132.25Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M126.05 50.75H135.95V53.25H126.05V50.75Z" fill="white"/>
+<path d="M171 81.75H165.75V77.25H167.25V80.25H171V81.75Z" fill="#C3C2C8"/>
+<path d="M168 83.25H162V84.75H168V83.25Z" fill="#C3C2C8"/>
+<path d="M168 86.25H162V87.75H168V86.25Z" fill="#C3C2C8"/>
+<path d="M165.96 78L169.5 80.955V90H160.5V78H165.96ZM166.5 76.5H160.5C159.675 76.5 159 77.175 159 78V90C159 90.825 159.675 91.5 160.5 91.5H169.5C170.325 91.5 171 90.825 171 90V80.25L166.5 76.5Z" fill="#C3C2C8"/>
+<path d="M168.38 56.2398V57.7398H175.38V56.2398V55.2398C175.38 54.4455 176.102 53.7045 176.287 53.5192C176.678 53.1287 177.787 53.0192 177.787 52.0192V50.0192C177.787 50.0192 177.572 48.5192 176.287 48.5192C175.423 48.5192 175.38 49.2398 175.38 49.2398V48.2398C175.38 48.2398 175.287 47.5192 174.38 47.2398C173.663 47.0192 172.38 47.1751 172.38 47.466V48.2398C172.38 48.2398 171.82 47.5192 171.413 47.2398C170.93 46.9089 169.87 46.9315 169.552 47.2398C169.212 47.5689 169.459 48.2398 169.287 48.2398C169.115 48.2398 168.787 47.5192 168.38 47.2398C167.972 46.9604 166.598 47.1108 166.287 47.5192C165.855 48.0881 165.843 48.7074 166.226 49.2398C166.787 50.0192 167.287 49.962 167.38 50.2398C167.472 50.5177 167.38 51.2398 167.38 51.2398H166.38C166.016 51.2398 165.477 51.2398 165.287 51.5192C164.868 52.2398 164.915 52.6744 165.38 53.2398C165.427 53.2971 166.38 54.2398 166.38 54.2398L167.38 55.2398L168.38 56.2398Z" fill="white"/>
+<path d="M168.38 57.7398V56.2398L167.38 55.2398L166.38 54.2398C166.38 54.2398 165.427 53.2971 165.38 53.2398C164.915 52.6744 164.868 52.2398 165.287 51.5192C165.477 51.2398 166.016 51.2398 166.38 51.2398C166.787 51.2398 167.38 51.2398 167.38 51.2398C167.38 51.2398 167.472 50.5177 167.38 50.2398C167.287 49.962 166.787 50.0192 166.226 49.2398C165.843 48.7074 165.855 48.0881 166.287 47.5192C166.598 47.1108 167.972 46.9604 168.38 47.2398C168.787 47.5192 169.115 48.2398 169.287 48.2398C169.459 48.2398 169.212 47.5689 169.552 47.2398C169.87 46.9315 170.93 46.9089 171.413 47.2398C171.82 47.5192 172.38 48.2398 172.38 48.2398V47.466C172.38 47.1751 173.663 47.0192 174.38 47.2398C175.287 47.5192 175.38 48.2398 175.38 48.2398V49.2398C175.38 49.2398 175.423 48.5192 176.287 48.5192C177.787 48.5192 177.787 50.0192 177.787 50.0192V52.0192C177.787 53.0192 176.678 53.1287 176.287 53.5192C176.102 53.7045 175.38 54.4455 175.38 55.2398V56.2398V57.7398" stroke="#2F2F2F" stroke-linejoin="round"/>
+</svg>
diff --git a/apps/landing/src/app/(detail)/components/Card.tsx b/apps/landing/src/app/(detail)/components/Card.tsx
new file mode 100644
index 00000000..b891b5df
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/Card.tsx
@@ -0,0 +1,23 @@
+import { VStack } from '@devup-ui/react'
+
+export default function Card({ children }: { children: React.ReactNode }) {
+  return (
+    <VStack
+      _active={{
+        boxShadow: 'none',
+        transform: 'scale(0.95)',
+      }}
+      _hover={{
+        boxShadow: '0 0 20px 0 rgba(0, 0, 0, 0.15)',
+      }}
+      bg="$containerBackground"
+      border="1px solid $border"
+      borderRadius="10px"
+      cursor="pointer"
+      maxW="260px"
+      transition="all 0.2s ease"
+    >
+      {children}
+    </VStack>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/layout.tsx b/apps/landing/src/app/(detail)/components/layout.tsx
new file mode 100644
index 00000000..ccb21c56
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/layout.tsx
@@ -0,0 +1,28 @@
+import { Box, Flex } from '@devup-ui/react'
+
+import { LeftMenu } from '../docs/LeftMenu'
+import { RightIndex } from '../docs/RightIndex'
+
+export default function Layout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <>
+      <Flex maxW="1920px" minH="calc(100vh - 500px)" mx="auto">
+        <Box display={['none', null, 'initial']} p="20px 16px" w="220px">
+          <Box pos="sticky" top={['70px', null, '90px']}>
+            <LeftMenu />
+          </Box>
+        </Box>
+        <Box className="markdown-body" flex={1}>
+          {children}
+        </Box>
+        <Box display={['none', null, null, 'initial']}>
+          <Box pos="sticky" top={['50px', null, '70px']}>
+            <RightIndex />
+          </Box>
+        </Box>
+      </Flex>
+    </>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/page.tsx b/apps/landing/src/app/(detail)/components/page.tsx
new file mode 100644
index 00000000..4572eb89
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/page.tsx
@@ -0,0 +1,460 @@
+import { Center, Flex, Image, Text, VStack } from '@devup-ui/react'
+
+import Card from './Card'
+
+export default function Page() {
+  return (
+    <VStack flex="1" gap="16px" maxW="100%" px="60px" py="40px">
+      <Text color="$primary" typography="captionBold">
+        Overview
+      </Text>
+      <Text color="$title" typography="h4">
+        Devup UI Components
+      </Text>
+      <Text color="$text" typography="bodyReg">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
+        venenatis, elit in hendrerit porta, augue ante scelerisque diam, ac
+        egestas lacus est nec urna. Cras commodo risus hendrerit, suscipit nibh
+        at, porttitor dui. Vivamus tincidunt pretium nibh et pulvinar. Nam quis
+        tristique neque, vitae facilisis justo. Ut non tristique dui.
+      </Text>
+      <VStack gap="16px" overflow="visible" py="30px">
+        <Text color="$title" typography="h6">
+          Form
+        </Text>
+        <Flex alignItems="center" flexWrap="wrap" gap="20px" overflow="visible">
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/button.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Button
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/text-box.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Text Box
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/text-area.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Text area
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/dropdown.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Dropdown
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/radio.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Radio
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/checkbox.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Checkbox
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/stepper.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Stepper
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/toggle.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Toggle
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/slider.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Slider
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/date-picker.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Date picker
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/color-picker.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Color picker
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/uploader.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Uploader
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/pagination.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Pagination
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/progress-bar.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Progress bar
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/search.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Search
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/select.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Select
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/label.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Label
+              </Text>
+            </Flex>
+          </Card>
+        </Flex>
+      </VStack>
+      <VStack gap="16px" overflow="visible" py="30px">
+        <Text color="$title" typography="h6">
+          Layout
+        </Text>
+        <Flex alignItems="center" flexWrap="wrap" gap="20px" overflow="visible">
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/layout/footer.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Footer
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/layout/tooltip.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Tooltip
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/layout/tab.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Tab
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/layout/menu.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Menu
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/layout/header.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Header
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/layout/confirm.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Confirm
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/layout/snackbar.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Snackbar
+              </Text>
+            </Flex>
+          </Card>
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/layout/bottom-sheet.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Bottom sheet
+              </Text>
+            </Flex>
+          </Card>
+        </Flex>
+      </VStack>
+      <VStack gap="16px" overflow="visible" py="30px">
+        <Text color="$title" typography="h6">
+          Theme
+        </Text>
+        <Flex alignItems="center" flexWrap="wrap" gap="20px" overflow="visible">
+          <Card>
+            <Center h="140px">
+              <Image src="/images/components/theme/theme-button.svg" />
+            </Center>
+            <Flex
+              alignItems="center"
+              borderTop="1px solid $border"
+              gap="10px"
+              px="16px"
+              py="12px"
+            >
+              <Text color="$text" textAlign="right" typography="buttonSmid">
+                Theme Button
+              </Text>
+            </Flex>
+          </Card>
+        </Flex>
+      </VStack>
+    </VStack>
+  )
+}
diff --git a/apps/landing/src/components/Header/index.tsx b/apps/landing/src/components/Header/index.tsx
index a5b86dd1..5ccc0bd7 100644
--- a/apps/landing/src/components/Header/index.tsx
+++ b/apps/landing/src/components/Header/index.tsx
@@ -93,6 +93,16 @@ export function Header() {
             <Menu keyword="docs">Docs</Menu>
           </Link>
         </Flex>
+        <Flex alignItems="center" px="24px">
+          <Link
+            className={css({
+              textDecoration: 'none',
+            })}
+            href="/components"
+          >
+            <Menu keyword="components">Components</Menu>
+          </Link>
+        </Flex>
         <Flex alignItems="center" px="24px">
           <Link
             className={css({

From f3bd30fbd125a4a9c647568f2bf0a995d5c8f57a Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Mon, 30 Jun 2025 16:53:53 +0900
Subject: [PATCH 3/6] Add left menu for components page

---
 .../src/app/(detail)/components/LeftMenu.tsx  | 55 +++++++++++++++++++
 .../src/app/(detail)/components/layout.tsx    |  2 +-
 .../components/{ => overview}/page.tsx        |  2 +-
 apps/landing/src/components/Header/index.tsx  |  2 +-
 4 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 apps/landing/src/app/(detail)/components/LeftMenu.tsx
 rename apps/landing/src/app/(detail)/components/{ => overview}/page.tsx (99%)

diff --git a/apps/landing/src/app/(detail)/components/LeftMenu.tsx b/apps/landing/src/app/(detail)/components/LeftMenu.tsx
new file mode 100644
index 00000000..8e7613ee
--- /dev/null
+++ b/apps/landing/src/app/(detail)/components/LeftMenu.tsx
@@ -0,0 +1,55 @@
+import { VStack } from '@devup-ui/react'
+
+import { MenuItem } from '../docs/MenuItem'
+
+export function LeftMenu() {
+  return (
+    <VStack gap="6px">
+      <MenuItem to="/components/overview">Overview</MenuItem>
+      <MenuItem
+        subMenu={[
+          { to: '/components/form/button', children: 'Button' },
+          { to: '/components/form/text-box', children: 'Text box' },
+          { to: '/components/form/text-area', children: 'Text area' },
+          { to: '/components/form/dropdown', children: 'Dropdown' },
+          { to: '/components/form/radio', children: 'Radio' },
+          { to: '/components/form/checkbox', children: 'Checkbox' },
+          { to: '/components/form/stepper', children: 'Stepper' },
+          { to: '/components/form/toggle', children: 'Toggle' },
+          { to: '/components/form/slider', children: 'Slider' },
+          { to: '/components/form/date-picker', children: 'Date picker' },
+          { to: '/components/form/color-picker', children: 'Color picker' },
+          { to: '/components/form/uploader', children: 'Uploader' },
+          { to: '/components/form/pagination', children: 'Pagination' },
+          { to: '/components/form/progress-bar', children: 'Progress Bar' },
+          { to: '/components/form/search', children: 'Search' },
+          { to: '/components/form/select', children: 'Select' },
+          { to: '/components/form/label', children: 'Label' },
+        ]}
+      >
+        Form
+      </MenuItem>
+      <MenuItem
+        subMenu={[
+          { to: '/components/layout/footer', children: 'Footer' },
+          { to: '/components/layout/tooltip', children: 'Tooltip' },
+          { to: '/components/layout/tab', children: 'Tab' },
+          { to: '/components/layout/menu', children: 'Menu' },
+          { to: '/components/layout/header', children: 'Header' },
+          { to: '/components/layout/confirm', children: 'Confirm' },
+          { to: '/components/layout/snackbar', children: 'Snackbar' },
+          { to: '/components/layout/bottom-sheet', children: 'Bottom sheet' },
+        ]}
+      >
+        Layout
+      </MenuItem>
+      <MenuItem
+        subMenu={[
+          { to: '/components/theme/theme-button', children: 'Theme Button' },
+        ]}
+      >
+        Theme
+      </MenuItem>
+    </VStack>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/components/layout.tsx b/apps/landing/src/app/(detail)/components/layout.tsx
index ccb21c56..c918f6ea 100644
--- a/apps/landing/src/app/(detail)/components/layout.tsx
+++ b/apps/landing/src/app/(detail)/components/layout.tsx
@@ -1,7 +1,7 @@
 import { Box, Flex } from '@devup-ui/react'
 
-import { LeftMenu } from '../docs/LeftMenu'
 import { RightIndex } from '../docs/RightIndex'
+import { LeftMenu } from './LeftMenu'
 
 export default function Layout({
   children,
diff --git a/apps/landing/src/app/(detail)/components/page.tsx b/apps/landing/src/app/(detail)/components/overview/page.tsx
similarity index 99%
rename from apps/landing/src/app/(detail)/components/page.tsx
rename to apps/landing/src/app/(detail)/components/overview/page.tsx
index 4572eb89..ed762d46 100644
--- a/apps/landing/src/app/(detail)/components/page.tsx
+++ b/apps/landing/src/app/(detail)/components/overview/page.tsx
@@ -1,6 +1,6 @@
 import { Center, Flex, Image, Text, VStack } from '@devup-ui/react'
 
-import Card from './Card'
+import Card from '../Card'
 
 export default function Page() {
   return (
diff --git a/apps/landing/src/components/Header/index.tsx b/apps/landing/src/components/Header/index.tsx
index 5ccc0bd7..286b3354 100644
--- a/apps/landing/src/components/Header/index.tsx
+++ b/apps/landing/src/components/Header/index.tsx
@@ -98,7 +98,7 @@ export function Header() {
             className={css({
               textDecoration: 'none',
             })}
-            href="/components"
+            href="/components/overview"
           >
             <Menu keyword="components">Components</Menu>
           </Link>

From 1f3cb71269867a65ad6f85aff0dd0055da996163 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Tue, 1 Jul 2025 10:53:27 +0900
Subject: [PATCH 4/6] Change component image svgs to tsx

---
 .../public/images/components/button.svg       |  10 -
 .../public/images/components/checkbox.svg     |  10 -
 .../public/images/components/color-picker.svg |  34 --
 .../public/images/components/date-picker.svg  |  41 --
 .../public/images/components/dropdown.svg     |   9 -
 .../public/images/components/label.svg        |   7 -
 .../images/components/layout/bottom-sheet.svg |  10 -
 .../images/components/layout/confirm.svg      |   9 -
 .../images/components/layout/footer.svg       |  10 -
 .../images/components/layout/header.svg       |  11 -
 .../public/images/components/layout/menu.svg  |   7 -
 .../images/components/layout/snackbar.svg     |   8 -
 .../public/images/components/layout/tab.svg   |  10 -
 .../images/components/layout/tooltip.svg      |  19 -
 .../public/images/components/pagination.svg   |  12 -
 .../public/images/components/progress-bar.svg |  16 -
 .../public/images/components/radio.svg        |   9 -
 .../public/images/components/search.svg       |   5 -
 .../public/images/components/select.svg       |   6 -
 .../public/images/components/slider.svg       |  20 -
 .../public/images/components/stepper.svg      |   8 -
 .../public/images/components/text-area.svg    |   5 -
 .../public/images/components/text-box.svg     |  16 -
 .../images/components/theme/theme-button.svg  |   4 -
 .../public/images/components/toggle.svg       |   4 -
 .../public/images/components/uploader.svg     |  15 -
 .../src/app/(detail)/components/Card.tsx      |   1 -
 .../src/app/(detail)/components/layout.tsx    |   4 +-
 .../app/(detail)/components/overview/page.tsx | 100 +++--
 .../icons/components/IconBottomSheetComp.tsx  |  63 +++
 .../icons/components/IconButtonComponent.tsx  |  64 ++++
 .../icons/components/IconCheckboxComp.tsx     |  80 ++++
 .../icons/components/IconColorPickerComp.tsx  | 125 ++++++
 .../icons/components/IconConfirmComp.tsx      |  70 ++++
 .../icons/components/IconDatePickerComp.tsx   | 362 ++++++++++++++++++
 .../icons/components/IconDropdownComp.tsx     |  78 ++++
 .../icons/components/IconFooterComp.tsx       |  58 +++
 .../icons/components/IconHeaderComp.tsx       |  65 ++++
 .../icons/components/IconLabelComp.tsx        |  46 +++
 .../icons/components/IconMenuComp.tsx         |  66 ++++
 .../icons/components/IconPagination.tsx       |  89 +++++
 .../icons/components/IconProgressBar.tsx      |  82 ++++
 .../icons/components/IconRadioComp.tsx        |  75 ++++
 .../icons/components/IconSearchComp.tsx       |  42 ++
 .../icons/components/IconSelectComp.tsx       |  56 +++
 .../icons/components/IconSliderComp.tsx       |  84 ++++
 .../icons/components/IconSnackbarComp.tsx     |  51 +++
 .../icons/components/IconStepperComp.tsx      |  61 +++
 .../icons/components/IconTabComp.tsx          |  50 +++
 .../icons/components/IconTextAreaComp.tsx     |  42 ++
 .../icons/components/IconTextBoxComp.tsx      |  62 +++
 .../icons/components/IconThemeButtonComp.tsx  |  30 ++
 .../icons/components/IconToggleComp.tsx       |  31 ++
 .../icons/components/IconTooltipComp.tsx      |  74 ++++
 .../icons/components/IconUploaderComp.tsx     |  93 +++++
 .../icons/components/componentIcons.ts        |  55 +++
 56 files changed, 2122 insertions(+), 352 deletions(-)
 delete mode 100644 apps/landing/public/images/components/button.svg
 delete mode 100644 apps/landing/public/images/components/checkbox.svg
 delete mode 100644 apps/landing/public/images/components/color-picker.svg
 delete mode 100644 apps/landing/public/images/components/date-picker.svg
 delete mode 100644 apps/landing/public/images/components/dropdown.svg
 delete mode 100644 apps/landing/public/images/components/label.svg
 delete mode 100644 apps/landing/public/images/components/layout/bottom-sheet.svg
 delete mode 100644 apps/landing/public/images/components/layout/confirm.svg
 delete mode 100644 apps/landing/public/images/components/layout/footer.svg
 delete mode 100644 apps/landing/public/images/components/layout/header.svg
 delete mode 100644 apps/landing/public/images/components/layout/menu.svg
 delete mode 100644 apps/landing/public/images/components/layout/snackbar.svg
 delete mode 100644 apps/landing/public/images/components/layout/tab.svg
 delete mode 100644 apps/landing/public/images/components/layout/tooltip.svg
 delete mode 100644 apps/landing/public/images/components/pagination.svg
 delete mode 100644 apps/landing/public/images/components/progress-bar.svg
 delete mode 100644 apps/landing/public/images/components/radio.svg
 delete mode 100644 apps/landing/public/images/components/search.svg
 delete mode 100644 apps/landing/public/images/components/select.svg
 delete mode 100644 apps/landing/public/images/components/slider.svg
 delete mode 100644 apps/landing/public/images/components/stepper.svg
 delete mode 100644 apps/landing/public/images/components/text-area.svg
 delete mode 100644 apps/landing/public/images/components/text-box.svg
 delete mode 100644 apps/landing/public/images/components/theme/theme-button.svg
 delete mode 100644 apps/landing/public/images/components/toggle.svg
 delete mode 100644 apps/landing/public/images/components/uploader.svg
 create mode 100644 apps/landing/src/components/icons/components/IconBottomSheetComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconButtonComponent.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconCheckboxComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconColorPickerComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconConfirmComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconDatePickerComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconDropdownComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconFooterComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconHeaderComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconLabelComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconMenuComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconPagination.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconProgressBar.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconRadioComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconSearchComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconSelectComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconSliderComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconSnackbarComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconStepperComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconTabComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconTextAreaComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconTextBoxComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconThemeButtonComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconToggleComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconTooltipComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/IconUploaderComp.tsx
 create mode 100644 apps/landing/src/components/icons/components/componentIcons.ts

diff --git a/apps/landing/public/images/components/button.svg b/apps/landing/public/images/components/button.svg
deleted file mode 100644
index c60ce22b..00000000
--- a/apps/landing/public/images/components/button.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="69.5" y="30.5" width="119" height="35" rx="7.5" stroke="#C8C7D1"/>
-<rect x="69" y="74" width="120" height="36" rx="8" fill="#6159D4"/>
-<path d="M182.954 106.629V102.615C182.954 102.615 182.954 101.277 184.292 101.277C185.63 101.277 185.63 102.615 185.63 102.615V106.629" fill="#FFFFFE"/>
-<path d="M185.63 106.629L185.63 103.284C185.63 103.284 185.63 101.946 186.967 101.946C188.305 101.946 188.305 103.284 188.305 103.284V106.629" fill="#FFFFFE"/>
-<path d="M188.305 106.629L188.305 103.953C188.305 103.953 188.305 102.615 189.643 102.615C190.981 102.615 190.981 103.953 190.981 103.953V110.309C190.981 110.309 191.65 116.998 184.961 116.998C184.961 116.998 182.5 117.129 180.278 114.991L175.595 109.64C175.595 109.64 174.257 108.302 175.595 106.964C175.595 106.964 176.598 105.96 178.271 107.633L179.432 108.794C179.744 109.106 180.278 108.885 180.278 108.444V97.5977C180.278 97.5977 180.278 96.2598 181.616 96.2598C182.954 96.2598 182.954 97.5977 182.954 97.5977V106.629" fill="#FFFFFE"/>
-<path d="M182.954 106.629V102.615C182.954 102.615 182.954 101.277 184.292 101.277C185.63 101.277 185.63 102.615 185.63 102.615V106.629L185.63 103.284C185.63 103.284 185.63 101.946 186.967 101.946C188.305 101.946 188.305 103.284 188.305 103.284V106.629L188.305 103.953C188.305 103.953 188.305 102.615 189.643 102.615C190.981 102.615 190.981 103.953 190.981 103.953V110.309C190.981 110.309 191.65 116.998 184.961 116.998C184.961 116.998 182.5 117.129 180.278 114.991L175.595 109.64C175.595 109.64 174.257 108.302 175.595 106.964C175.595 106.964 176.598 105.96 178.271 107.633L179.432 108.794C179.744 109.106 180.278 108.885 180.278 108.444V97.5977C180.278 97.5977 180.278 96.2598 181.616 96.2598C182.954 96.2598 182.954 97.5977 182.954 97.5977V106.629Z" stroke="#000001" stroke-miterlimit="10"/>
-<path d="M109.806 47.5742C109.689 46.707 109.068 46.1562 108.118 46.1562C106.864 46.1562 106.103 47.1055 106.103 48.7578C106.103 50.4688 106.888 51.3594 108.107 51.3594C109.021 51.3594 109.653 50.8672 109.806 50.0352L111.821 50.0469C111.657 51.5586 110.368 53.1172 108.071 53.1172C105.775 53.1172 104.064 51.5469 104.064 48.7578C104.064 45.957 105.81 44.3984 108.071 44.3984C110.11 44.3984 111.61 45.5469 111.821 47.5742H109.806ZM114.59 44.5156V53H112.61V44.5156H114.59ZM115.496 53V46.6367H117.476V53H115.496ZM116.492 45.875C115.93 45.875 115.473 45.4531 115.473 44.9258C115.473 44.3984 115.93 43.9766 116.492 43.9766C117.055 43.9766 117.523 44.3984 117.523 44.9258C117.523 45.4531 117.055 45.875 116.492 45.875ZM121.335 53.1172C119.331 53.1172 118.136 51.7812 118.136 49.8359C118.136 47.8906 119.343 46.5547 121.335 46.5547C123.081 46.5547 124.218 47.5625 124.265 49.1094H122.425C122.331 48.4648 121.956 48.0547 121.359 48.0547C120.632 48.0547 120.152 48.6758 120.152 49.8125C120.152 50.9609 120.62 51.582 121.359 51.582C121.921 51.582 122.343 51.2188 122.425 50.5391H124.265C124.206 52.0859 123.105 53.1172 121.335 53.1172ZM124.924 53V44.5156H126.905V48.9453H126.987L128.827 46.6367H131.077L128.792 49.4023L131.17 53H128.885L127.327 50.5625L126.905 51.0547V53H124.924ZM133.755 53V46.6367H135.63V47.7969H135.7C135.97 47.0234 136.626 46.5547 137.505 46.5547C138.384 46.5547 139.064 47.0352 139.228 47.7969H139.298C139.544 47.0469 140.283 46.5547 141.22 46.5547C142.415 46.5547 143.247 47.3633 143.247 48.7109V53H141.267V49.1562C141.267 48.5117 140.892 48.1602 140.365 48.1602C139.79 48.1602 139.45 48.5703 139.45 49.1797V53H137.552V49.1328C137.552 48.5352 137.189 48.1602 136.661 48.1602C136.111 48.1602 135.736 48.582 135.736 49.2266V53H133.755ZM147.094 53.1172C145.102 53.1172 143.883 51.875 143.883 49.8477C143.883 47.8789 145.114 46.5547 147.024 46.5547C148.805 46.5547 150.094 47.6914 150.094 49.8008V50.3047H145.829V50.3398C145.829 51.1602 146.333 51.6875 147.13 51.6875C147.669 51.6875 148.067 51.4531 148.231 51.0781H150.071C149.837 52.3203 148.747 53.1172 147.094 53.1172ZM145.829 49.1445H148.255C148.243 48.4648 147.751 47.9844 147.071 47.9844C146.368 47.9844 145.858 48.4824 145.829 49.1445ZM153.074 44.5156L152.898 50.4102H151.223L151.047 44.5156H153.074ZM152.055 53.1172C151.469 53.1172 150.988 52.6484 151 52.0508C150.988 51.4766 151.469 51.0078 152.055 51.0078C152.617 51.0078 153.109 51.4766 153.121 52.0508C153.109 52.6484 152.617 53.1172 152.055 53.1172Z" fill="#2F2F2F"/>
-<path d="M109.806 91.5742C109.689 90.707 109.068 90.1562 108.118 90.1562C106.864 90.1562 106.103 91.1055 106.103 92.7578C106.103 94.4688 106.888 95.3594 108.107 95.3594C109.021 95.3594 109.653 94.8672 109.806 94.0352L111.821 94.0469C111.657 95.5586 110.368 97.1172 108.071 97.1172C105.775 97.1172 104.064 95.5469 104.064 92.7578C104.064 89.957 105.81 88.3984 108.071 88.3984C110.11 88.3984 111.61 89.5469 111.821 91.5742H109.806ZM114.59 88.5156V97H112.61V88.5156H114.59ZM115.496 97V90.6367H117.476V97H115.496ZM116.492 89.875C115.93 89.875 115.473 89.4531 115.473 88.9258C115.473 88.3984 115.93 87.9766 116.492 87.9766C117.055 87.9766 117.523 88.3984 117.523 88.9258C117.523 89.4531 117.055 89.875 116.492 89.875ZM121.335 97.1172C119.331 97.1172 118.136 95.7812 118.136 93.8359C118.136 91.8906 119.343 90.5547 121.335 90.5547C123.081 90.5547 124.218 91.5625 124.265 93.1094H122.425C122.331 92.4648 121.956 92.0547 121.359 92.0547C120.632 92.0547 120.152 92.6758 120.152 93.8125C120.152 94.9609 120.62 95.582 121.359 95.582C121.921 95.582 122.343 95.2188 122.425 94.5391H124.265C124.206 96.0859 123.105 97.1172 121.335 97.1172ZM124.924 97V88.5156H126.905V92.9453H126.987L128.827 90.6367H131.077L128.792 93.4023L131.17 97H128.885L127.327 94.5625L126.905 95.0547V97H124.924ZM133.755 97V90.6367H135.63V91.7969H135.7C135.97 91.0234 136.626 90.5547 137.505 90.5547C138.384 90.5547 139.064 91.0352 139.228 91.7969H139.298C139.544 91.0469 140.283 90.5547 141.22 90.5547C142.415 90.5547 143.247 91.3633 143.247 92.7109V97H141.267V93.1562C141.267 92.5117 140.892 92.1602 140.365 92.1602C139.79 92.1602 139.45 92.5703 139.45 93.1797V97H137.552V93.1328C137.552 92.5352 137.189 92.1602 136.661 92.1602C136.111 92.1602 135.736 92.582 135.736 93.2266V97H133.755ZM147.094 97.1172C145.102 97.1172 143.883 95.875 143.883 93.8477C143.883 91.8789 145.114 90.5547 147.024 90.5547C148.805 90.5547 150.094 91.6914 150.094 93.8008V94.3047H145.829V94.3398C145.829 95.1602 146.333 95.6875 147.13 95.6875C147.669 95.6875 148.067 95.4531 148.231 95.0781H150.071C149.837 96.3203 148.747 97.1172 147.094 97.1172ZM145.829 93.1445H148.255C148.243 92.4648 147.751 91.9844 147.071 91.9844C146.368 91.9844 145.858 92.4824 145.829 93.1445ZM153.074 88.5156L152.898 94.4102H151.223L151.047 88.5156H153.074ZM152.055 97.1172C151.469 97.1172 150.988 96.6484 151 96.0508C150.988 95.4766 151.469 95.0078 152.055 95.0078C152.617 95.0078 153.109 95.4766 153.121 96.0508C153.109 96.6484 152.617 97.1172 152.055 97.1172Z" fill="white"/>
-</svg>
diff --git a/apps/landing/public/images/components/checkbox.svg b/apps/landing/public/images/components/checkbox.svg
deleted file mode 100644
index 31a9df3f..00000000
--- a/apps/landing/public/images/components/checkbox.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="67.5" y="33.5" width="17" height="17" rx="1.5" stroke="#C8C7D1"/>
-<rect opacity="0.4" x="93" y="38" width="100" height="8" rx="2" fill="#2F2F2F"/>
-<rect x="67" y="61" width="18" height="18" rx="2" fill="white"/>
-<rect x="67" y="61" width="18" height="18" rx="2" fill="#6159D4"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M81.6474 66.8071C82.0992 67.2337 82.1195 67.9457 81.6929 68.3975L75.3179 75.1475C75.1021 75.3759 74.8007 75.5037 74.4865 75.4999C74.1723 75.4961 73.874 75.3611 73.6638 75.1276L70.2888 71.3776C69.8732 70.9158 69.9106 70.2044 70.3724 69.7888C70.8342 69.3732 71.5456 69.4106 71.9612 69.8724L74.5199 72.7154L80.0571 66.8526C80.4837 66.4008 81.1957 66.3805 81.6474 66.8071Z" fill="white"/>
-<rect opacity="0.4" x="93" y="66" width="100" height="8" rx="2" fill="#2F2F2F"/>
-<rect x="67.5" y="89.5" width="17" height="17" rx="1.5" stroke="#C8C7D1"/>
-<rect opacity="0.4" x="93" y="94" width="100" height="8" rx="2" fill="#2F2F2F"/>
-</svg>
diff --git a/apps/landing/public/images/components/color-picker.svg b/apps/landing/public/images/components/color-picker.svg
deleted file mode 100644
index 47aa68b1..00000000
--- a/apps/landing/public/images/components/color-picker.svg
+++ /dev/null
@@ -1,34 +0,0 @@
-<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="79.5" y="22.5" width="99" height="95" rx="7.5" stroke="#C8C7D1"/>
-<g clip-path="url(#clip0_560_2665)">
-<rect x="84" y="27" width="90" height="86" rx="4" fill="url(#paint0_linear_560_2665)"/>
-<rect x="84" y="27" width="90" height="86" rx="4" fill="url(#paint1_linear_560_2665)" style="mix-blend-mode:multiply"/>
-<g filter="url(#filter0_d_560_2665)">
-<rect x="145" y="41" width="10" height="10" rx="5" fill="#774CC5"/>
-<rect x="145" y="41" width="10" height="10" rx="5" stroke="white" stroke-width="2"/>
-</g>
-</g>
-<defs>
-<filter id="filter0_d_560_2665" x="140" y="36" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_560_2665"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_560_2665" result="shape"/>
-</filter>
-<linearGradient id="paint0_linear_560_2665" x1="129" y1="27" x2="129" y2="113" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1"/>
-</linearGradient>
-<linearGradient id="paint1_linear_560_2665" x1="84" y1="70" x2="174" y2="70" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#5A05F5"/>
-</linearGradient>
-<clipPath id="clip0_560_2665">
-<rect x="84" y="27" width="90" height="86" rx="4" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/landing/public/images/components/date-picker.svg b/apps/landing/public/images/components/date-picker.svg
deleted file mode 100644
index 8602d514..00000000
--- a/apps/landing/public/images/components/date-picker.svg
+++ /dev/null
@@ -1,41 +0,0 @@
-<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="80.5" y="22.5" width="99" height="95" rx="7.5" stroke="#C8C7D1"/>
-<path d="M113.289 39L113.282 38.1484L115.313 36.2812C115.844 35.7734 116.125 35.4609 116.125 35.0156C116.125 34.5156 115.743 34.2031 115.227 34.2031C114.696 34.2031 114.352 34.5391 114.352 35.0781H113.235C113.227 33.9688 114.047 33.2656 115.243 33.2656C116.453 33.2656 117.258 33.9531 117.258 34.9375C117.258 35.5781 116.946 36.1094 115.782 37.1641L114.922 38V38.0312H117.336V39H113.289ZM120.128 39.0781C118.713 39.0781 117.854 38.0234 117.854 36.1719C117.854 34.3203 118.713 33.2656 120.128 33.2656C121.542 33.2656 122.401 34.3281 122.401 36.1719C122.401 38.0312 121.542 39.0781 120.128 39.0781ZM120.128 38.1094C120.784 38.1094 121.206 37.4766 121.198 36.1719C121.198 34.8828 120.784 34.2266 120.128 34.2266C119.471 34.2266 119.057 34.8828 119.057 36.1719C119.049 37.4766 119.471 38.1094 120.128 38.1094ZM122.973 39L122.966 38.1484L124.997 36.2812C125.528 35.7734 125.809 35.4609 125.809 35.0156C125.809 34.5156 125.427 34.2031 124.911 34.2031C124.38 34.2031 124.036 34.5391 124.036 35.0781H122.919C122.911 33.9688 123.731 33.2656 124.927 33.2656C126.138 33.2656 126.942 33.9531 126.942 34.9375C126.942 35.5781 126.63 36.1094 125.466 37.1641L124.606 38V38.0312H127.02V39H122.973ZM129.694 39.0781C128.515 39.0781 127.655 38.3828 127.632 37.4062H128.773C128.796 37.8516 129.202 38.1484 129.694 38.1484C130.28 38.1484 130.694 37.7344 130.694 37.1484C130.694 36.5469 130.273 36.1328 129.679 36.125C129.257 36.125 128.96 36.2812 128.788 36.6016H127.726L128.03 33.3438H131.515V34.3047H128.999L128.843 35.7344H128.89C129.101 35.4531 129.523 35.2578 130.023 35.2578C131.062 35.2578 131.835 36.0312 131.835 37.1172C131.835 38.2578 130.968 39.0781 129.694 39.0781ZM136.285 33.3438H137.449V37.2891C137.449 38.3906 136.675 39.0781 135.535 39.0781C134.511 39.0781 133.707 38.5391 133.714 37.4219H134.886C134.894 37.8672 135.167 38.1328 135.589 38.1328C136.035 38.1328 136.285 37.8438 136.285 37.2891V33.3438ZM140.857 37.1953V34.7578H142.013V39H140.904V38.2344H140.857C140.662 38.7266 140.209 39.0547 139.568 39.0547C138.717 39.0547 138.138 38.4531 138.138 37.4609V34.7578H139.295V37.2578C139.295 37.7578 139.584 38.0781 140.037 38.0781C140.459 38.0781 140.857 37.7734 140.857 37.1953ZM143.828 36.5469V39H142.672V34.7578H143.773V35.5H143.82C144.016 35.0078 144.469 34.7031 145.094 34.7031C145.977 34.7031 146.562 35.3047 146.555 36.2969V39H145.406V36.5C145.406 35.9766 145.117 35.6641 144.641 35.6641C144.156 35.6641 143.828 35.9844 143.828 36.5469Z" fill="#2F2F2F"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M96.5272 33.2257C96.7132 33.4155 96.7132 33.7233 96.5272 33.9132L94.483 36L96.5272 38.0868C96.7132 38.2766 96.7132 38.5844 96.5272 38.7743C96.3413 38.9641 96.0398 38.9641 95.8538 38.7743L93.4728 36.3437C93.2869 36.1539 93.2869 35.8461 93.4728 35.6562L95.8538 33.2257C96.0398 33.0359 96.3413 33.0359 96.5272 33.2257Z" fill="#A9A8AB"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M163.473 33.2257C163.287 33.4155 163.287 33.7233 163.473 33.9132L165.517 36L163.473 38.0868C163.287 38.2766 163.287 38.5844 163.473 38.7743C163.659 38.9641 163.96 38.9641 164.146 38.7743L166.527 36.3437C166.713 36.1539 166.713 35.8461 166.527 35.6562L164.146 33.2257C163.96 33.0359 163.659 33.0359 163.473 33.2257Z" fill="#A9A8AB"/>
-<rect opacity="0.7" x="90" y="50" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="102" y="50" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="114" y="50" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="126" y="50" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="138" y="50" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="150" y="50" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="162" y="50" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="90" y="62" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="102" y="62" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="114" y="62" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="126" y="62" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="138" y="62" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="150" y="62" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="162" y="62" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="90" y="74" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="102" y="74" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="114" y="74" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="126" y="74" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="138" y="74" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="150" y="74" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="162" y="74" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="90" y="86" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="102" y="86" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="114" y="86" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="126" y="86" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="138" y="86" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="150" y="86" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="162" y="86" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="90" y="98" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="102" y="98" width="8" height="8" rx="2" fill="#C9C9C9"/>
-<rect opacity="0.7" x="114" y="98" width="8" height="8" rx="2" fill="#F2F2F2"/>
-<rect opacity="0.7" x="126" y="98" width="8" height="8" rx="2" fill="#F2F2F2"/>
-<rect opacity="0.7" x="138" y="98" width="8" height="8" rx="2" fill="#F2F2F2"/>
-<rect opacity="0.7" x="150" y="98" width="8" height="8" rx="2" fill="#F2F2F2"/>
-<rect opacity="0.7" x="162" y="98" width="8" height="8" rx="2" fill="#F2F2F2"/>
-</svg>
diff --git a/apps/landing/public/images/components/dropdown.svg b/apps/landing/public/images/components/dropdown.svg
deleted file mode 100644
index ae09726b..00000000
--- a/apps/landing/public/images/components/dropdown.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="43.5" y="14.5" width="173" height="35" rx="7.5" stroke="#C8C7D1"/>
-<rect x="43.5" y="54.5" width="173" height="71" rx="7.5" stroke="#C8C7D1"/>
-<path d="M60.6094 30.2812C60.3984 29.1914 59.4961 28.582 58.418 28.582C56.9531 28.582 55.8633 29.707 55.8633 31.7578C55.8633 33.8203 56.9648 34.9336 58.418 34.9336C59.4844 34.9336 60.3867 34.3359 60.6094 33.2578L61.9102 33.2695C61.6406 34.9453 60.2695 36.1172 58.4062 36.1172C56.1914 36.1172 54.5859 34.4648 54.5859 31.7578C54.5859 29.0391 56.2031 27.3984 58.4062 27.3984C60.1992 27.3984 61.6172 28.4531 61.9102 30.2812H60.6094ZM64.0931 32.2266V36H62.8392V27.5156H64.0697V30.6797H64.1517C64.4564 29.9883 65.0423 29.5547 66.0384 29.5547C67.3509 29.5547 68.2181 30.3633 68.2181 31.957V36H66.9642V32.1094C66.9642 31.1719 66.4603 30.6328 65.6166 30.6328C64.7377 30.6328 64.0931 31.207 64.0931 32.2266ZM72.0652 36.1289C70.2605 36.1289 69.0886 34.8164 69.0886 32.8477C69.0886 30.8672 70.2605 29.5547 72.0652 29.5547C73.8581 29.5547 75.03 30.8672 75.03 32.8477C75.03 34.8164 73.8581 36.1289 72.0652 36.1289ZM72.0652 35.0859C73.2136 35.0859 73.7644 34.0664 73.7644 32.8477C73.7644 31.6289 73.2136 30.5859 72.0652 30.5859C70.8933 30.5859 70.3425 31.6289 70.3425 32.8477C70.3425 34.0664 70.8933 35.0859 72.0652 35.0859ZM78.5958 36.1289C76.7911 36.1289 75.6192 34.8164 75.6192 32.8477C75.6192 30.8672 76.7911 29.5547 78.5958 29.5547C80.3888 29.5547 81.5606 30.8672 81.5606 32.8477C81.5606 34.8164 80.3888 36.1289 78.5958 36.1289ZM78.5958 35.0859C79.7442 35.0859 80.295 34.0664 80.295 32.8477C80.295 31.6289 79.7442 30.5859 78.5958 30.5859C77.4239 30.5859 76.8731 31.6289 76.8731 32.8477C76.8731 34.0664 77.4239 35.0859 78.5958 35.0859ZM86.0053 31.3711C85.8881 30.8672 85.4897 30.5391 84.7983 30.5391C84.0834 30.5391 83.5678 30.9141 83.5795 31.3945C83.5678 31.7695 83.8725 32.0391 84.5756 32.2031L85.5834 32.4375C86.7553 32.6953 87.3178 33.2578 87.3295 34.1602C87.3178 35.3086 86.3569 36.1289 84.728 36.1289C83.2045 36.1289 82.2905 35.4492 82.1381 34.2656H83.4155C83.5209 34.8398 83.9662 35.1211 84.7162 35.1211C85.5248 35.1211 86.0405 34.793 86.0522 34.2539C86.0405 33.8438 85.7358 33.5742 85.0678 33.4219L84.0717 33.2109C82.9233 32.9531 82.3256 32.3438 82.3256 31.4648C82.3256 30.3281 83.31 29.5547 84.7866 29.5547C86.2045 29.5547 87.0834 30.2812 87.2123 31.3711H86.0053ZM90.9305 36.1289C89.0555 36.1289 87.907 34.8398 87.907 32.8594C87.907 30.9023 89.0789 29.5547 90.8484 29.5547C92.3016 29.5547 93.6727 30.457 93.6727 32.7539V33.1992H89.1492C89.1844 34.4062 89.8934 35.0977 90.9422 35.0977C91.657 35.0977 92.1141 34.793 92.325 34.4062H93.5906C93.3094 35.4375 92.325 36.1289 90.9305 36.1289ZM89.1609 32.2617H92.4422C92.4422 31.2891 91.8211 30.5859 90.8602 30.5859C89.8582 30.5859 89.2078 31.3594 89.1609 32.2617ZM104.601 31.7578C104.601 34.4648 102.972 36.1172 100.781 36.1172C98.5659 36.1172 96.9487 34.4648 96.9487 31.7578C96.9487 29.0391 98.5659 27.3984 100.781 27.3984C102.972 27.3984 104.601 29.0391 104.601 31.7578ZM103.324 31.7578C103.324 29.6953 102.234 28.582 100.781 28.582C99.3159 28.582 98.2261 29.6953 98.2261 31.7578C98.2261 33.8203 99.3159 34.9336 100.781 34.9336C102.234 34.9336 103.324 33.8203 103.324 31.7578ZM106.843 32.2266V36H105.589V29.6367H106.796V30.6797H106.866C107.171 30 107.792 29.5547 108.741 29.5547C110.054 29.5547 110.909 30.375 110.909 31.957V36H109.667V32.1094C109.667 31.1836 109.163 30.6328 108.319 30.6328C107.464 30.6328 106.843 31.207 106.843 32.2266ZM114.815 36.1289C112.94 36.1289 111.791 34.8398 111.791 32.8594C111.791 30.9023 112.963 29.5547 114.733 29.5547C116.186 29.5547 117.557 30.457 117.557 32.7539V33.1992H113.033C113.069 34.4062 113.778 35.0977 114.826 35.0977C115.541 35.0977 115.998 34.793 116.209 34.4062H117.475C117.194 35.4375 116.209 36.1289 114.815 36.1289ZM113.045 32.2617H116.326C116.326 31.2891 115.705 30.5859 114.744 30.5859C113.742 30.5859 113.092 31.3594 113.045 32.2617Z" fill="#999999"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M198.806 30.1464C198.992 29.9512 199.294 29.9512 199.48 30.1464L202 32.7929L204.52 30.1464C204.706 29.9512 205.008 29.9512 205.194 30.1464C205.38 30.3417 205.38 30.6583 205.194 30.8536L202.337 33.8536C202.151 34.0488 201.849 34.0488 201.663 33.8536L198.806 30.8536C198.62 30.6583 198.62 30.3417 198.806 30.1464Z" fill="#272727"/>
-<rect x="47" y="58" width="166" height="30" rx="5" fill="#ECECEC"/>
-<rect opacity="0.4" x="54" y="69" width="100" height="8" rx="2" fill="#2F2F2F"/>
-<rect opacity="0.4" x="54" y="102" width="86" height="8" rx="2" fill="#2F2F2F"/>
-</svg>
diff --git a/apps/landing/public/images/components/label.svg b/apps/landing/public/images/components/label.svg
deleted file mode 100644
index 7947b18a..00000000
--- a/apps/landing/public/images/components/label.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M103.65 49.9544C103.855 49.2958 103.957 48.8321 103.957 48.5635C103.957 48.295 103.908 48.1127 103.809 48.0168C102.905 48.0168 102.252 48.0647 101.849 48.1607L101.838 48.2854L101.94 48.4005C102.138 48.6371 102.236 48.8897 102.236 49.1583C102.236 49.3373 102.142 49.7274 101.952 50.3285C101.762 50.9233 101.667 51.3389 101.667 51.5755C101.667 51.8058 101.743 51.9912 101.895 52.1319C102.047 52.2662 102.255 52.3333 102.521 52.3333C102.787 52.3333 103.076 52.2694 103.387 52.1415C103.699 52.0072 103.912 51.9017 104.026 51.8249C104.14 51.7482 104.231 51.6843 104.299 51.6331L104.105 51.2974L103.969 51.3549C103.665 51.4764 103.49 51.5372 103.444 51.5372C103.376 51.5372 103.342 51.438 103.342 51.2398C103.342 51.0352 103.444 50.6067 103.65 49.9544Z" fill="#9B9BA6"/>
-<path d="M102.43 46.4628C102.43 46.6739 102.506 46.8433 102.658 46.9712C102.81 47.0927 103.019 47.1535 103.285 47.1535C103.551 47.1535 103.79 47.0735 104.003 46.9137C104.223 46.7538 104.333 46.5715 104.333 46.3669C104.333 46.1559 104.257 45.9864 104.105 45.8585C103.953 45.7306 103.741 45.6667 103.467 45.6667C103.194 45.6667 102.951 45.7466 102.738 45.9065C102.533 46.0663 102.43 46.2518 102.43 46.4628Z" fill="#9B9BA6"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M103 55C106.314 55 109 52.3137 109 49C109 45.6863 106.314 43 103 43C99.6863 43 97 45.6863 97 49C97 52.3137 99.6863 55 103 55ZM107.667 49C107.667 51.5773 105.577 53.6667 103 53.6667C100.423 53.6667 98.3333 51.5773 98.3333 49C98.3333 46.4227 100.423 44.3333 103 44.3333C105.577 44.3333 107.667 46.4227 107.667 49Z" fill="#9B9BA6"/>
-<rect x="43" y="45" width="48" height="8" rx="2" fill="#6159D4"/>
-<rect x="43.5" y="64.5" width="173" height="35" rx="7.5" stroke="#C8C7D1"/>
-</svg>
diff --git a/apps/landing/public/images/components/layout/bottom-sheet.svg b/apps/landing/public/images/components/layout/bottom-sheet.svg
deleted file mode 100644
index 03b0ef58..00000000
--- a/apps/landing/public/images/components/layout/bottom-sheet.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-inside-1_560_2794" fill="white">
-<path d="M43 53C43 48.5817 46.5817 45 51 45H209C213.418 45 217 48.5817 217 53V140H43V53Z"/>
-</mask>
-<path d="M42 53C42 48.0294 46.0294 44 51 44H209C213.971 44 218 48.0294 218 53H216C216 49.134 212.866 46 209 46H51C47.134 46 44 49.134 44 53H42ZM217 140H43H217ZM42 140V53C42 48.0294 46.0294 44 51 44V46C47.134 46 44 49.134 44 53V140H42ZM209 44C213.971 44 218 48.0294 218 53V140H216V53C216 49.134 212.866 46 209 46V44Z" fill="#C8C7D1" mask="url(#path-1-inside-1_560_2794)"/>
-<rect x="110" y="53" width="40" height="4" rx="2" fill="#C3C3C3"/>
-<rect x="65" y="78" width="130" height="30" rx="5" fill="#ECECEC"/>
-<rect x="65" y="114" width="91" height="7" rx="2" fill="#ECECEC"/>
-<rect x="65" y="125" width="91" height="7" rx="2" fill="#ECECEC"/>
-</svg>
diff --git a/apps/landing/public/images/components/layout/confirm.svg b/apps/landing/public/images/components/layout/confirm.svg
deleted file mode 100644
index 50da256b..00000000
--- a/apps/landing/public/images/components/layout/confirm.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="42.5" y="22.5" width="173" height="94" rx="7.5" stroke="#C8C7D1"/>
-<circle cx="66" cy="46" r="8.33333" fill="#F3B238"/>
-<path d="M66.0003 48.5C66.6905 48.5002 67.2503 49.0598 67.2503 49.75C67.2503 50.4402 66.6905 50.9998 66.0003 51C65.31 51 64.7503 50.4404 64.7503 49.75C64.7503 49.0596 65.31 48.5 66.0003 48.5ZM66.4164 41C66.8766 41 67.6664 41.3321 67.6664 41.7412L67.2503 46.5557C67.2503 47.1692 66.6905 47.6668 66.0003 47.667C65.31 47.667 64.7504 47.1693 64.7503 46.5557L64.3333 41.7412C64.3333 41.3321 65.1231 41 65.5833 41H66.4164Z" fill="white"/>
-<rect opacity="0.7" x="57" y="65" width="40" height="6" rx="2" fill="#2F2F2F"/>
-<rect opacity="0.4" x="57" y="76" width="86" height="6" rx="2" fill="#2F2F2F"/>
-<rect x="121.5" y="93.5" width="41" height="15" rx="3.5" stroke="#C8C7D1"/>
-<rect x="166" y="93" width="42" height="16" rx="4" fill="#6159D4"/>
-</svg>
diff --git a/apps/landing/public/images/components/layout/footer.svg b/apps/landing/public/images/components/layout/footer.svg
deleted file mode 100644
index 56d36b44..00000000
--- a/apps/landing/public/images/components/layout/footer.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="42.5" y="23.5" width="173" height="94" rx="7.5" stroke="#C8C7D1"/>
-<path d="M42 31C42 26.5817 45.5817 23 50 23H208C212.418 23 216 26.5817 216 31V36H42V31Z" fill="#363636"/>
-<circle cx="51" cy="30" r="3" fill="#E13953"/>
-<circle cx="60" cy="30" r="3" fill="#F4DF44"/>
-<circle cx="69" cy="30" r="3" fill="#4FBD56"/>
-<rect x="60" y="44" width="60" height="8" rx="2" fill="#ECECEC"/>
-<rect x="60" y="58" width="138" height="28" rx="2" fill="#ECECEC"/>
-<path d="M42 97H216V110C216 114.418 212.418 118 208 118H50C45.5817 118 42 114.418 42 110V97Z" fill="#6159D4"/>
-</svg>
diff --git a/apps/landing/public/images/components/layout/header.svg b/apps/landing/public/images/components/layout/header.svg
deleted file mode 100644
index a19d070c..00000000
--- a/apps/landing/public/images/components/layout/header.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M43 102H217V110C217 114.418 213.418 118 209 118H51C46.5817 118 43 114.418 43 110V102Z" fill="#ECECEC"/>
-<rect x="43.5" y="23.5" width="173" height="94" rx="7.5" stroke="#C8C7D1"/>
-<path d="M43 31C43 26.5817 46.5817 23 51 23H209C213.418 23 217 26.5817 217 31V36H43V31Z" fill="#363636"/>
-<circle cx="52" cy="30" r="3" fill="#E13953"/>
-<circle cx="61" cy="30" r="3" fill="#F4DF44"/>
-<circle cx="70" cy="30" r="3" fill="#4FBD56"/>
-<rect x="61" y="54" width="60" height="8" rx="2" fill="#ECECEC"/>
-<rect x="61" y="68" width="138" height="28" rx="2" fill="#ECECEC"/>
-<rect x="43" y="36" width="174" height="10" fill="#6159D4"/>
-</svg>
diff --git a/apps/landing/public/images/components/layout/menu.svg b/apps/landing/public/images/components/layout/menu.svg
deleted file mode 100644
index 804b3250..00000000
--- a/apps/landing/public/images/components/layout/menu.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="60" y="16" width="140" height="108" rx="4" fill="#FBFBFB"/>
-<rect x="65" y="53" width="130" height="30" rx="5" fill="#EDECF7"/>
-<rect opacity="0.4" x="74" y="30" width="66" height="8" rx="2" fill="#2F2F2F"/>
-<rect opacity="0.4" x="74" y="64" width="66" height="8" rx="2" fill="#2F2F2F"/>
-<rect opacity="0.4" x="74" y="98" width="66" height="8" rx="2" fill="#2F2F2F"/>
-</svg>
diff --git a/apps/landing/public/images/components/layout/snackbar.svg b/apps/landing/public/images/components/layout/snackbar.svg
deleted file mode 100644
index b9fb7ae5..00000000
--- a/apps/landing/public/images/components/layout/snackbar.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="43" y="39" width="174" height="28" rx="4" fill="#29292C" fill-opacity="0.8"/>
-<circle cx="58" cy="53" r="6.66667" fill="#3AAE6E"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M61.3068 50.8984C61.7311 51.252 61.7884 51.8826 61.4349 52.3068L58.1015 56.3068C57.9217 56.5227 57.6593 56.6529 57.3786 56.6656C57.098 56.6784 56.8249 56.5724 56.6262 56.3738L54.6262 54.3738C54.2357 53.9832 54.2357 53.3501 54.6262 52.9595C55.0167 52.569 55.6499 52.569 56.0404 52.9595L57.2661 54.1852L59.8984 51.0265C60.252 50.6022 60.8826 50.5449 61.3068 50.8984Z" fill="white"/>
-<rect x="43" y="73" width="174" height="28" rx="4" fill="#29292C" fill-opacity="0.8"/>
-<circle cx="58" cy="87" r="6.66667" fill="#F64E4E"/>
-<path d="M59.7812 83.9326C60.1363 83.5777 60.7124 83.5776 61.0674 83.9326C61.4224 84.2876 61.4223 84.8637 61.0674 85.2187L59.2861 87L61.0674 88.7812C61.4223 89.1363 61.4224 89.7124 61.0674 90.0674C60.7124 90.4224 60.1363 90.4223 59.7812 90.0674L58 88.2861L56.2187 90.0674C55.8637 90.4223 55.2876 90.4224 54.9326 90.0674C54.5776 89.7124 54.5777 89.1363 54.9326 88.7812L56.7139 87L54.9326 85.2187C54.5777 84.8637 54.5776 84.2876 54.9326 83.9326C55.2876 83.5776 55.8637 83.5777 56.2187 83.9326L58 85.7139L59.7812 83.9326Z" fill="white"/>
-</svg>
diff --git a/apps/landing/public/images/components/layout/tab.svg b/apps/landing/public/images/components/layout/tab.svg
deleted file mode 100644
index 8a8813bc..00000000
--- a/apps/landing/public/images/components/layout/tab.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-outside-1_560_2773" maskUnits="userSpaceOnUse" x="54.5" y="55" width="50" height="32" fill="black">
-<rect fill="white" x="54.5" y="55" width="50" height="32"/>
-<path d="M54.5 55H104.5V85H54.5V55Z"/>
-</mask>
-<path d="M104.5 85V83H54.5V85V87H104.5V85Z" fill="#6159D4" mask="url(#path-1-outside-1_560_2773)"/>
-<path d="M66.8867 66.9688V65.5156H73.8359V66.9688H71.2344V74H69.4883V66.9688H66.8867ZM73.4788 72.2188C73.4788 70.8008 74.6272 70.332 75.8459 70.2617C76.303 70.2324 77.1584 70.1914 77.428 70.1797V69.6641C77.4163 69.1367 77.053 68.8203 76.4084 68.8203C75.8225 68.8203 75.4475 69.0898 75.3538 69.5234H73.7014C73.8069 68.4219 74.7678 67.5547 76.4553 67.5547C77.8381 67.5547 79.1506 68.1758 79.1506 69.7109V74H77.51V73.1211H77.4631C77.1467 73.707 76.5491 74.1172 75.5998 74.1172C74.3811 74.1172 73.4788 73.4844 73.4788 72.2188ZM75.1428 72.1719C75.1428 72.6641 75.5413 72.9219 76.092 72.9219C76.8772 72.9219 77.4397 72.3945 77.428 71.7266V71.2578C77.1643 71.2695 76.426 71.3105 76.1272 71.3398C75.5295 71.3984 75.1428 71.6797 75.1428 72.1719ZM80.27 74V65.5156H82.0044V68.7031H82.0513C82.2973 68.1875 82.8013 67.5547 83.8677 67.5547C85.2739 67.5547 86.4575 68.6445 86.4575 70.8242C86.4575 72.9453 85.3208 74.1055 83.8677 74.1055C82.8247 74.1055 82.2973 73.5078 82.0513 72.9805H81.9809V74H80.27ZM81.9692 70.8125C81.9692 71.9609 82.4614 72.7227 83.3169 72.7227C84.2075 72.7227 84.6763 71.9375 84.6763 70.8125C84.6763 69.6992 84.2075 68.9375 83.3169 68.9375C82.4497 68.9375 81.9692 69.6641 81.9692 70.8125ZM90.9753 65.5156V74H89.2058V67.1914H89.1589L87.2136 68.4102V66.8516L89.3113 65.5156H90.9753Z" fill="#6159D4"/>
-<path d="M116.969 66.4531V65.5156H123.367V66.4531H120.707V74H119.641V66.4531H116.969ZM123.113 72.1953C123.113 70.7305 124.402 70.4023 125.503 70.3203C125.908 70.291 126.939 70.2383 127.226 70.2266V69.7109C127.226 68.9023 126.745 68.4336 125.785 68.4336C124.976 68.4336 124.495 68.8086 124.355 69.2891H123.3C123.429 68.2695 124.425 67.5547 125.831 67.5547C126.663 67.5547 128.222 67.8008 128.222 69.8047V74H127.226V73.1328H127.179C126.968 73.5664 126.382 74.1523 125.281 74.1523C124.074 74.1523 123.113 73.4375 123.113 72.1953ZM124.12 72.2422C124.12 72.9102 124.683 73.25 125.456 73.25C126.593 73.25 127.226 72.4883 127.226 71.6914V71.0469L125.62 71.1641C124.706 71.2227 124.12 71.5508 124.12 72.2422ZM129.608 74V65.5156H130.616V68.6445H130.698C130.921 68.3047 131.296 67.5547 132.538 67.5547C134.132 67.5547 135.257 68.8203 135.257 70.8359C135.257 72.8516 134.132 74.1289 132.55 74.1289C131.331 74.1289 130.921 73.3789 130.698 73.0273H130.581V74H129.608ZM130.592 70.8125C130.592 72.2422 131.237 73.2266 132.397 73.2266C133.604 73.2266 134.237 72.1719 134.237 70.8125C134.237 69.4883 133.628 68.457 132.397 68.457C131.225 68.457 130.592 69.4062 130.592 70.8125ZM136.197 74L136.186 73.2266L139.08 70.1797C140.088 69.1133 140.568 68.5391 140.568 67.7539C140.568 66.8867 139.83 66.3125 138.881 66.3125C137.873 66.3125 137.229 66.957 137.229 67.9062H136.233C136.221 66.4062 137.381 65.3984 138.916 65.3984C140.451 65.3984 141.553 66.4297 141.553 67.7539C141.553 68.7031 141.108 69.4414 139.608 70.9883L137.662 72.9922V73.0625H141.705V74H136.197Z" fill="#878594"/>
-<path d="M166.969 66.4531V65.5156H173.367V66.4531H170.707V74H169.641V66.4531H166.969ZM173.113 72.1953C173.113 70.7305 174.402 70.4023 175.503 70.3203C175.908 70.291 176.939 70.2383 177.226 70.2266V69.7109C177.226 68.9023 176.745 68.4336 175.785 68.4336C174.976 68.4336 174.495 68.8086 174.355 69.2891H173.3C173.429 68.2695 174.425 67.5547 175.831 67.5547C176.663 67.5547 178.222 67.8008 178.222 69.8047V74H177.226V73.1328H177.179C176.968 73.5664 176.382 74.1523 175.281 74.1523C174.074 74.1523 173.113 73.4375 173.113 72.1953ZM174.12 72.2422C174.12 72.9102 174.683 73.25 175.456 73.25C176.593 73.25 177.226 72.4883 177.226 71.6914V71.0469L175.62 71.1641C174.706 71.2227 174.12 71.5508 174.12 72.2422ZM179.608 74V65.5156H180.616V68.6445H180.698C180.921 68.3047 181.296 67.5547 182.538 67.5547C184.132 67.5547 185.257 68.8203 185.257 70.8359C185.257 72.8516 184.132 74.1289 182.55 74.1289C181.331 74.1289 180.921 73.3789 180.698 73.0273H180.581V74H179.608ZM180.592 70.8125C180.592 72.2422 181.237 73.2266 182.397 73.2266C183.604 73.2266 184.237 72.1719 184.237 70.8125C184.237 69.4883 183.628 68.457 182.397 68.457C181.225 68.457 180.592 69.4062 180.592 70.8125ZM189.127 74.1172C187.44 74.1172 186.233 73.2148 186.174 71.8672H187.24C187.299 72.6758 188.108 73.1797 189.115 73.1797C190.229 73.1797 191.049 72.5703 191.049 71.6914C191.049 70.7656 190.311 70.1094 188.986 70.1094H188.295V69.1836H188.986C190.018 69.1836 190.733 68.6094 190.733 67.7305C190.733 66.8867 190.111 66.3125 189.15 66.3125C188.248 66.3125 187.416 66.8164 187.369 67.6484H186.35C186.408 66.3008 187.65 65.3984 189.162 65.3984C190.779 65.3984 191.764 66.4531 191.752 67.6719C191.764 68.6328 191.201 69.3477 190.311 69.5938V69.6523C191.412 69.8281 192.092 70.6133 192.08 71.6914C192.092 73.0859 190.815 74.1172 189.127 74.1172Z" fill="#878594"/>
-</svg>
diff --git a/apps/landing/public/images/components/layout/tooltip.svg b/apps/landing/public/images/components/layout/tooltip.svg
deleted file mode 100644
index 5cdda76d..00000000
--- a/apps/landing/public/images/components/layout/tooltip.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_560_2769)">
-<rect x="100" y="49" width="60" height="36" rx="4" fill="black" fill-opacity="0.75"/>
-<path d="M110.547 63.1953V62.1016H118.012V63.1953H114.908V72H113.664V63.1953H110.547ZM121.037 72.1504C119.014 72.1504 117.646 70.6328 117.646 68.3223C117.646 66.0117 119.014 64.4805 121.037 64.4805C123.047 64.4805 124.4 66.0117 124.4 68.3223C124.4 70.6328 123.047 72.1504 121.037 72.1504ZM121.037 71.1113C122.527 71.1113 123.225 69.7988 123.225 68.3223C123.225 66.8457 122.527 65.5195 121.037 65.5195C119.519 65.5195 118.822 66.8457 118.822 68.3223C118.822 69.7988 119.519 71.1113 121.037 71.1113ZM128.56 72.1504C126.537 72.1504 125.17 70.6328 125.17 68.3223C125.17 66.0117 126.537 64.4805 128.56 64.4805C130.57 64.4805 131.924 66.0117 131.924 68.3223C131.924 70.6328 130.57 72.1504 128.56 72.1504ZM128.56 71.1113C130.051 71.1113 130.748 69.7988 130.748 68.3223C130.748 66.8457 130.051 65.5195 128.56 65.5195C127.043 65.5195 126.346 66.8457 126.346 68.3223C126.346 69.7988 127.043 71.1113 128.56 71.1113ZM134.224 62.1016V72H133.049V62.1016H134.224ZM138.918 64.5762V65.5605H137.359V69.8672C137.359 70.8242 137.824 70.9746 138.33 70.9746C138.549 70.9746 138.849 70.9609 139.027 70.9473V72.041C138.849 72.0684 138.549 72.0957 138.207 72.0957C137.222 72.0957 136.17 71.4805 136.17 70.168V65.5605H135.049V64.5762H136.17V62.7988H137.359V64.5762H138.918ZM140.015 72V64.5762H141.191V72H140.015ZM140.603 63.3457C140.152 63.3457 139.783 63.0039 139.783 62.5664C139.783 62.1289 140.152 61.7871 140.603 61.7871C141.054 61.7871 141.437 62.1289 141.437 62.5664C141.437 63.0039 141.054 63.3457 140.603 63.3457ZM142.644 74.7891V64.5762H143.779V65.752H143.916C144.162 65.3555 144.626 64.4805 146.062 64.4805C147.921 64.4805 149.22 65.957 149.22 68.3086C149.22 70.6602 147.921 72.1504 146.076 72.1504C144.654 72.1504 144.162 71.2754 143.916 70.8652H143.82V74.7891H142.644ZM143.792 68.2812C143.792 69.9492 144.544 71.0977 145.912 71.0977C147.32 71.0977 148.044 69.8672 148.044 68.2812C148.044 66.7363 147.334 65.5332 145.912 65.5332C144.517 65.5332 143.792 66.6406 143.792 68.2812Z" fill="white"/>
-<path d="M130 91L125 85H135L130 91Z" fill="black" fill-opacity="0.75"/>
-</g>
-<defs>
-<filter id="filter0_d_560_2769" x="90" y="39" width="80" height="62" 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="2"/>
-<feGaussianBlur stdDeviation="1.5"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_560_2769"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_560_2769" result="shape"/>
-</filter>
-</defs>
-</svg>
diff --git a/apps/landing/public/images/components/pagination.svg b/apps/landing/public/images/components/pagination.svg
deleted file mode 100644
index 34aff044..00000000
--- a/apps/landing/public/images/components/pagination.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="47.5" y="55.5" width="29" height="29" rx="7.5" stroke="#C8C7D1"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M63.7803 65.2092C64.0732 65.4882 64.0732 65.9404 63.7803 66.2194L59.8107 70L63.7803 73.7806C64.0732 74.0596 64.0732 74.5118 63.7803 74.7908C63.4874 75.0697 63.0126 75.0697 62.7197 74.7908L58.2197 70.5051C57.9268 70.2261 57.9268 69.7739 58.2197 69.4949L62.7197 65.2092C63.0126 64.9303 63.4874 64.9303 63.7803 65.2092Z" fill="#2F2F2F"/>
-<rect x="81.5" y="55.5" width="29" height="29" rx="7.5" stroke="#C8C7D1"/>
-<path d="M97.3398 64.6016V74.5H95.5488V66.3379H95.4941L93.1836 67.8145V66.1875L95.6309 64.6016H97.3398Z" fill="#2F2F2F"/>
-<rect x="115" y="55" width="30" height="30" rx="8" fill="#EAE8FC"/>
-<path d="M125.718 75V72.9932L129.658 69.6826C130.464 68.9941 130.962 68.4961 130.962 67.7344C130.962 66.9141 130.376 66.4014 129.556 66.4014C128.735 66.4014 128.179 66.9141 128.179 67.8223H125.527C125.527 65.6104 127.124 64.248 129.556 64.248C132.061 64.248 133.672 65.5371 133.672 67.5C133.672 68.7305 133.057 69.7705 130.669 71.7773L129.6 72.7002V72.7588H133.789V75H125.718Z" fill="#6159D4"/>
-<rect x="149.5" y="55.5" width="29" height="29" rx="7.5" stroke="#C8C7D1"/>
-<path d="M163.916 74.6367C161.797 74.6367 160.293 73.4883 160.252 71.8203H162.043C162.098 72.6133 162.891 73.1328 163.916 73.1328C165.01 73.1328 165.789 72.5312 165.789 71.6562C165.789 70.7676 165.023 70.125 163.738 70.125H162.85V68.7578H163.738C164.791 68.7578 165.529 68.1699 165.516 67.3086C165.529 66.4746 164.9 65.9141 163.93 65.9141C163 65.9141 162.193 66.4336 162.166 67.2676H160.457C160.498 65.5996 162.002 64.4648 163.943 64.4648C165.953 64.4648 167.252 65.6953 167.238 67.2129C167.252 68.3203 166.514 69.127 165.434 69.3457V69.4277C166.828 69.6191 167.621 70.5078 167.607 71.752C167.621 73.4199 166.062 74.6367 163.916 74.6367Z" fill="#2F2F2F"/>
-<rect x="212.5" y="84.5" width="29" height="29" rx="7.5" transform="rotate(-180 212.5 84.5)" stroke="#C8C7D1"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M196.22 74.7908C195.927 74.5118 195.927 74.0596 196.22 73.7806L200.189 70L196.22 66.2194C195.927 65.9404 195.927 65.4882 196.22 65.2092C196.513 64.9303 196.987 64.9303 197.28 65.2092L201.78 69.4949C202.073 69.7739 202.073 70.2261 201.78 70.5051L197.28 74.7908C196.987 75.0697 196.513 75.0697 196.22 74.7908Z" fill="#2F2F2F"/>
-</svg>
diff --git a/apps/landing/public/images/components/progress-bar.svg b/apps/landing/public/images/components/progress-bar.svg
deleted file mode 100644
index a4a30894..00000000
--- a/apps/landing/public/images/components/progress-bar.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_560_2677)">
-<rect x="50" y="68" width="23.3333" height="6" rx="2" fill="#6159D4"/>
-<rect x="77.3334" y="68" width="23.3333" height="6" rx="2" fill="#6159D4"/>
-<rect x="104.667" y="68" width="23.3333" height="6" rx="2" fill="#6159D4"/>
-<rect x="132" y="68" width="23.3333" height="6" rx="2" fill="#DADADA"/>
-<rect x="159.333" y="68" width="23.3333" height="6" rx="2" fill="#DADADA"/>
-<rect x="186.667" y="68" width="23.3333" height="6" rx="2" fill="#DADADA"/>
-</g>
-<path d="M195.357 59.1172C193.599 59.1172 192.345 58.168 192.298 56.7852H193.611C193.657 57.5352 194.396 58.0039 195.345 58.0039C196.365 58.0039 197.115 57.4414 197.115 56.6211C197.115 55.7891 196.411 55.1797 195.204 55.1797H194.478V54.125H195.204C196.165 54.125 196.845 53.5859 196.845 52.7773C196.845 52.0039 196.271 51.4766 195.368 51.4766C194.513 51.4766 193.763 51.9453 193.728 52.7188H192.486C192.521 51.3359 193.798 50.3984 195.38 50.3984C197.044 50.3984 198.099 51.4531 198.087 52.707C198.099 53.668 197.501 54.3711 196.587 54.5938V54.6523C197.747 54.8164 198.415 55.5898 198.415 56.668C198.415 58.0859 197.115 59.1172 195.357 59.1172ZM202.719 50.1172L199.989 60.2773H198.876L201.606 50.1172H202.719ZM206.344 59.1172C204.773 59.1055 203.133 58.1797 203.133 55.0391C203.133 52.0859 204.41 50.3984 206.449 50.3984C208.008 50.3984 209.098 51.3711 209.297 52.7188H208.02C207.855 52.0273 207.305 51.5234 206.449 51.5234C205.137 51.5234 204.375 52.6719 204.375 54.582H204.469C204.926 53.8672 205.723 53.4336 206.648 53.4336C208.16 53.4336 209.379 54.5938 209.379 56.2227C209.379 57.8633 208.172 59.1289 206.344 59.1172ZM206.332 58.0391C207.363 58.0391 208.125 57.2422 208.125 56.2461C208.125 55.2734 207.387 54.4883 206.367 54.4883C205.324 54.4883 204.539 55.3086 204.527 56.2578C204.539 57.1953 205.289 58.0391 206.332 58.0391Z" fill="#999999"/>
-<defs>
-<clipPath id="clip0_560_2677">
-<rect x="50" y="68" width="160" height="6" rx="3" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/landing/public/images/components/radio.svg b/apps/landing/public/images/components/radio.svg
deleted file mode 100644
index 11004145..00000000
--- a/apps/landing/public/images/components/radio.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="67.5" y="33.5" width="17" height="17" rx="8.5" stroke="#C8C7D1"/>
-<rect opacity="0.4" x="93" y="38" width="100" height="8" rx="2" fill="#2F2F2F"/>
-<rect x="67.5" y="61.5" width="17" height="17" rx="8.5" stroke="#6159D4"/>
-<circle cx="76" cy="70" r="6" fill="#6159D4"/>
-<rect opacity="0.4" x="93" y="66" width="100" height="8" rx="2" fill="#2F2F2F"/>
-<rect x="67.5" y="89.5" width="17" height="17" rx="8.5" stroke="#C8C7D1"/>
-<rect opacity="0.4" x="93" y="94" width="100" height="8" rx="2" fill="#2F2F2F"/>
-</svg>
diff --git a/apps/landing/public/images/components/search.svg b/apps/landing/public/images/components/search.svg
deleted file mode 100644
index 3147e39d..00000000
--- a/apps/landing/public/images/components/search.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="43.5" y="52.5" width="173" height="35" rx="7.5" stroke="#C8C7D1"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M61.0838 73.3291C60.2042 73.8962 59.1633 74.2241 58.0477 74.2241C54.8917 74.2241 52.3334 71.5996 52.3334 68.3621C52.3334 65.1245 54.8917 62.5 58.0477 62.5C61.2036 62.5 63.7619 65.1245 63.7619 68.3621C63.7619 69.7537 63.2893 71.032 62.4996 72.0374C62.5101 72.0472 62.5205 72.0573 62.5306 72.0678L65.3878 74.9988C65.7597 75.3804 65.7597 75.999 65.3878 76.3805C65.0158 76.7621 64.4128 76.7621 64.0409 76.3805L61.1837 73.4495C61.1468 73.4115 61.1135 73.3713 61.0838 73.3291ZM62.5119 68.3621C62.5119 70.9395 60.4833 72.9741 58.0477 72.9741C55.612 72.9741 53.5834 70.9395 53.5834 68.3621C53.5834 65.7846 55.612 63.75 58.0477 63.75C60.4833 63.75 62.5119 65.7846 62.5119 68.3621Z" fill="#A9A8B4"/>
-<path d="M79.8148 74V65.5156H82.8383C84.807 65.5156 85.7797 66.6992 85.7797 68.2695C85.7797 69.8281 84.807 71.0234 82.8383 71.0234H81.1039V74H79.8148ZM81.1039 69.9219H82.7094C83.9633 69.9219 84.4789 69.2188 84.4789 68.2695C84.4789 67.3086 83.9633 66.6172 82.7094 66.6172H81.1039V69.9219ZM87.9275 65.5156V74H86.6736V65.5156H87.9275ZM88.798 72.207C88.798 70.7539 90.0284 70.3789 91.1769 70.2969C91.5987 70.2676 92.5538 70.2148 92.8527 70.2031L92.8409 69.6992C92.8409 68.9844 92.4073 68.5625 91.5519 68.5625C90.8136 68.5625 90.3683 68.9023 90.2394 69.3711H88.9972C89.1144 68.3164 90.0987 67.5547 91.5987 67.5547C92.6066 67.5547 94.0948 67.9297 94.0948 69.7695V74H92.8761V73.1328H92.8292C92.5831 73.6133 91.9972 74.1406 90.9425 74.1406C89.7355 74.1406 88.798 73.4492 88.798 72.207ZM90.0167 72.2188C90.0167 72.8281 90.5206 73.1445 91.2237 73.1445C92.2433 73.1445 92.8527 72.4648 92.8527 71.7031V71.1172L91.3527 71.2227C90.5323 71.2812 90.0167 71.5859 90.0167 72.2188ZM97.9419 74.1289C96.0903 74.1289 94.9653 72.7578 94.9653 70.8477C94.9653 68.9023 96.1255 67.5547 97.9184 67.5547C99.3716 67.5547 100.426 68.4102 100.555 69.6992H99.3364C99.2075 69.1016 98.727 68.5977 97.9419 68.5977C96.9106 68.5977 96.2192 69.4531 96.2192 70.8125C96.2192 72.207 96.8989 73.0625 97.9419 73.0625C98.645 73.0625 99.1841 72.6758 99.3364 71.9844H100.555C100.415 73.2148 99.4419 74.1289 97.9419 74.1289ZM104.121 74.1289C102.246 74.1289 101.097 72.8398 101.097 70.8594C101.097 68.9023 102.269 67.5547 104.039 67.5547C105.492 67.5547 106.863 68.457 106.863 70.7539V71.1992H102.34C102.375 72.4062 103.084 73.0977 104.133 73.0977C104.847 73.0977 105.305 72.793 105.515 72.4062H106.781C106.5 73.4375 105.515 74.1289 104.121 74.1289ZM102.351 70.2617H105.633C105.633 69.2891 105.012 68.5859 104.051 68.5859C103.049 68.5859 102.398 69.3594 102.351 70.2617ZM108.999 70.2266V74H107.745V65.5156H108.976V68.6797H109.058C109.362 67.9883 109.948 67.5547 110.945 67.5547C112.257 67.5547 113.124 68.3633 113.124 69.957V74H111.87V70.1094C111.87 69.1719 111.366 68.6328 110.523 68.6328C109.644 68.6328 108.999 69.207 108.999 70.2266ZM116.971 74.1289C115.167 74.1289 113.995 72.8164 113.995 70.8477C113.995 68.8672 115.167 67.5547 116.971 67.5547C118.764 67.5547 119.936 68.8672 119.936 70.8477C119.936 72.8164 118.764 74.1289 116.971 74.1289ZM116.971 73.0859C118.12 73.0859 118.67 72.0664 118.67 70.8477C118.67 69.6289 118.12 68.5859 116.971 68.5859C115.799 68.5859 115.249 69.6289 115.249 70.8477C115.249 72.0664 115.799 73.0859 116.971 73.0859ZM122.06 65.5156V74H120.807V65.5156H122.06ZM125.603 74.1289C124.068 74.1289 122.943 72.8867 122.943 70.8359C122.943 68.7617 124.079 67.5547 125.615 67.5547C126.798 67.5547 127.232 68.2695 127.454 68.668H127.513V65.5156H128.767V74H127.548V73.0039H127.454C127.22 73.4258 126.763 74.1289 125.603 74.1289ZM125.884 73.0625C126.95 73.0625 127.548 72.1484 127.548 70.8125C127.548 69.4883 126.962 68.6211 125.884 68.6211C124.771 68.6211 124.22 69.5586 124.22 70.8125C124.22 72.0898 124.794 73.0625 125.884 73.0625ZM132.778 74.1289C130.903 74.1289 129.755 72.8398 129.755 70.8594C129.755 68.9023 130.926 67.5547 132.696 67.5547C134.149 67.5547 135.52 68.457 135.52 70.7539V71.1992H130.997C131.032 72.4062 131.741 73.0977 132.79 73.0977C133.505 73.0977 133.962 72.793 134.172 72.4062H135.438C135.157 73.4375 134.172 74.1289 132.778 74.1289ZM131.008 70.2617H134.29C134.29 69.2891 133.669 68.5859 132.708 68.5859C131.706 68.5859 131.055 69.3594 131.008 70.2617ZM136.402 74V67.6367H137.609V68.6445H137.68C137.914 67.9648 138.547 67.543 139.297 67.543C139.449 67.543 139.695 67.5547 139.824 67.5664V68.7617C139.719 68.7383 139.426 68.6914 139.168 68.6914C138.301 68.6914 137.656 69.2891 137.656 70.1211V74H136.402Z" fill="#999999"/>
-</svg>
diff --git a/apps/landing/public/images/components/select.svg b/apps/landing/public/images/components/select.svg
deleted file mode 100644
index ef44b290..00000000
--- a/apps/landing/public/images/components/select.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="42.5" y="34.5" width="173" height="71" rx="7.5" stroke="#C8C7D1"/>
-<rect x="46" y="38" width="166" height="30" rx="5" fill="#ECECEC"/>
-<rect opacity="0.4" x="53" y="49" width="100" height="8" rx="2" fill="#2F2F2F"/>
-<rect opacity="0.4" x="53" y="82" width="86" height="8" rx="2" fill="#2F2F2F"/>
-</svg>
diff --git a/apps/landing/public/images/components/slider.svg b/apps/landing/public/images/components/slider.svg
deleted file mode 100644
index 0810c472..00000000
--- a/apps/landing/public/images/components/slider.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="40" y="67" width="180" height="6" rx="3" fill="#E0E0E0"/>
-<rect x="40" y="67" width="120" height="6" fill="#6159D4"/>
-<circle cx="160" cy="70.5" r="16" fill="#6159D4" fill-opacity="0.2"/>
-<g filter="url(#filter0_d_560_2659)">
-<circle cx="160" cy="70.5" r="8" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_d_560_2659" x="148" y="58.5" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_560_2659"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_560_2659" result="shape"/>
-</filter>
-</defs>
-</svg>
diff --git a/apps/landing/public/images/components/stepper.svg b/apps/landing/public/images/components/stepper.svg
deleted file mode 100644
index a8f8fba4..00000000
--- a/apps/landing/public/images/components/stepper.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="64.5" y="56.5" width="27" height="27" rx="5.5" stroke="#C8C7D1"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M73 70C73 69.4477 73.3731 69 73.8333 69H82.1667C82.6269 69 83 69.4477 83 70C83 70.5523 82.6269 71 82.1667 71H73.8333C73.3731 71 73 70.5523 73 70Z" fill="#1A1A1A"/>
-<rect x="100.5" y="52.5" width="59" height="35" rx="7.5" stroke="#C8C7D1"/>
-<rect x="168.5" y="56.5" width="27" height="27" rx="5.5" stroke="#C8C7D1"/>
-<path d="M182.833 65.8333C182.833 65.3731 182.46 65 182 65C181.54 65 181.167 65.3731 181.167 65.8333V69.1667H177.833C177.373 69.1667 177 69.5398 177 70C177 70.4602 177.373 70.8333 177.833 70.8333H181.167V74.1667C181.167 74.6269 181.54 75 182 75C182.46 75 182.833 74.6269 182.833 74.1667V70.8333H186.167C186.627 70.8333 187 70.4602 187 70C187 69.5398 186.627 69.1667 186.167 69.1667H182.833V65.8333Z" fill="#1A1A1A"/>
-<path d="M127.547 65.5156V74H126.247V66.8047H126.2L124.172 68.1289V66.8984L126.282 65.5156H127.547ZM132.297 74.1172C130.328 74.1172 129.18 72.5352 129.18 69.7578C129.18 67.0039 130.352 65.3984 132.297 65.3984C134.242 65.3984 135.414 67.0039 135.414 69.7578C135.414 72.5352 134.254 74.1172 132.297 74.1172ZM132.297 73.0039C133.445 73.0039 134.125 71.8789 134.125 69.7578C134.125 67.6484 133.434 66.4883 132.297 66.4883C131.16 66.4883 130.469 67.6484 130.469 69.7578C130.469 71.8789 131.148 73.0039 132.297 73.0039Z" fill="#2F2F2F"/>
-</svg>
diff --git a/apps/landing/public/images/components/text-area.svg b/apps/landing/public/images/components/text-area.svg
deleted file mode 100644
index b6203f36..00000000
--- a/apps/landing/public/images/components/text-area.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="43.5" y="19.5" width="173" height="94" rx="7.5" stroke="#C8C7D1"/>
-<path d="M54.0149 40V31.5156H57.0383C59.007 31.5156 59.9797 32.6992 59.9797 34.2695C59.9797 35.8281 59.007 37.0234 57.0383 37.0234H55.3039V40H54.0149ZM55.3039 35.9219H56.9094C58.1633 35.9219 58.6789 35.2188 58.6789 34.2695C58.6789 33.3086 58.1633 32.6172 56.9094 32.6172H55.3039V35.9219ZM62.1275 31.5156V40H60.8736V31.5156H62.1275ZM62.998 38.207C62.998 36.7539 64.2284 36.3789 65.3769 36.2969C65.7988 36.2676 66.7538 36.2148 67.0527 36.2031L67.0409 35.6992C67.0409 34.9844 66.6074 34.5625 65.7519 34.5625C65.0136 34.5625 64.5683 34.9023 64.4394 35.3711H63.1972C63.3144 34.3164 64.2988 33.5547 65.7988 33.5547C66.8066 33.5547 68.2949 33.9297 68.2949 35.7695V40H67.0761V39.1328H67.0292C66.7831 39.6133 66.1972 40.1406 65.1425 40.1406C63.9355 40.1406 62.998 39.4492 62.998 38.207ZM64.2167 38.2188C64.2167 38.8281 64.7206 39.1445 65.4238 39.1445C66.4433 39.1445 67.0527 38.4648 67.0527 37.7031V37.1172L65.5527 37.2227C64.7324 37.2812 64.2167 37.5859 64.2167 38.2188ZM72.1419 40.1289C70.2903 40.1289 69.1653 38.7578 69.1653 36.8477C69.1653 34.9023 70.3255 33.5547 72.1184 33.5547C73.5716 33.5547 74.6263 34.4102 74.7552 35.6992H73.5364C73.4075 35.1016 72.927 34.5977 72.1419 34.5977C71.1106 34.5977 70.4192 35.4531 70.4192 36.8125C70.4192 38.207 71.0989 39.0625 72.1419 39.0625C72.845 39.0625 73.3841 38.6758 73.5364 37.9844H74.7552C74.6145 39.2148 73.6419 40.1289 72.1419 40.1289ZM78.3209 40.1289C76.4459 40.1289 75.2975 38.8398 75.2975 36.8594C75.2975 34.9023 76.4694 33.5547 78.2389 33.5547C79.692 33.5547 81.0631 34.457 81.0631 36.7539V37.1992H76.5397C76.5749 38.4062 77.2838 39.0977 78.3327 39.0977C79.0475 39.0977 79.5045 38.793 79.7155 38.4062H80.9811C80.6999 39.4375 79.7155 40.1289 78.3209 40.1289ZM76.5514 36.2617H79.8327C79.8327 35.2891 79.2116 34.5859 78.2506 34.5859C77.2487 34.5859 76.5983 35.3594 76.5514 36.2617ZM83.1992 36.2266V40H81.9453V31.5156H83.1758V34.6797H83.2578C83.5625 33.9883 84.1484 33.5547 85.1445 33.5547C86.457 33.5547 87.3242 34.3633 87.3242 35.957V40H86.0703V36.1094C86.0703 35.1719 85.5664 34.6328 84.7227 34.6328C83.8438 34.6328 83.1992 35.207 83.1992 36.2266ZM91.1713 40.1289C89.3666 40.1289 88.1947 38.8164 88.1947 36.8477C88.1947 34.8672 89.3666 33.5547 91.1713 33.5547C92.9642 33.5547 94.1361 34.8672 94.1361 36.8477C94.1361 38.8164 92.9642 40.1289 91.1713 40.1289ZM91.1713 39.0859C92.3197 39.0859 92.8705 38.0664 92.8705 36.8477C92.8705 35.6289 92.3197 34.5859 91.1713 34.5859C89.9994 34.5859 89.4486 35.6289 89.4486 36.8477C89.4486 38.0664 89.9994 39.0859 91.1713 39.0859ZM96.2605 31.5156V40H95.0066V31.5156H96.2605ZM99.8028 40.1289C98.2677 40.1289 97.1427 38.8867 97.1427 36.8359C97.1427 34.7617 98.2794 33.5547 99.8145 33.5547C100.998 33.5547 101.432 34.2695 101.654 34.668H101.713V31.5156H102.967V40H101.748V39.0039H101.654C101.42 39.4258 100.963 40.1289 99.8028 40.1289ZM100.084 39.0625C101.15 39.0625 101.748 38.1484 101.748 36.8125C101.748 35.4883 101.162 34.6211 100.084 34.6211C98.9708 34.6211 98.42 35.5586 98.42 36.8125C98.42 38.0898 98.9942 39.0625 100.084 39.0625ZM106.978 40.1289C105.103 40.1289 103.955 38.8398 103.955 36.8594C103.955 34.9023 105.126 33.5547 106.896 33.5547C108.349 33.5547 109.72 34.457 109.72 36.7539V37.1992H105.197C105.232 38.4062 105.941 39.0977 106.99 39.0977C107.705 39.0977 108.162 38.793 108.373 38.4062H109.638C109.357 39.4375 108.373 40.1289 106.978 40.1289ZM105.208 36.2617H108.49C108.49 35.2891 107.869 34.5859 106.908 34.5859C105.906 34.5859 105.255 35.3594 105.208 36.2617ZM110.602 40V33.6367H111.809V34.6445H111.88C112.114 33.9648 112.747 33.543 113.497 33.543C113.649 33.543 113.895 33.5547 114.024 33.5664V34.7617C113.919 34.7383 113.626 34.6914 113.368 34.6914C112.501 34.6914 111.856 35.2891 111.856 36.1211V40H110.602Z" fill="#999999"/>
-<path d="M199.257 126.078C197.944 126.078 197.179 125.023 197.179 123.172C197.179 121.336 197.96 120.266 199.257 120.266C200.554 120.266 201.335 121.336 201.335 123.172C201.335 125.023 200.562 126.078 199.257 126.078ZM199.257 125.336C200.022 125.336 200.476 124.586 200.476 123.172C200.476 121.766 200.015 120.992 199.257 120.992C198.499 120.992 198.038 121.766 198.038 123.172C198.038 124.586 198.491 125.336 199.257 125.336ZM204.15 120.078L202.329 126.852H201.587L203.407 120.078H204.15ZM206.667 120.344V126H205.8V121.203H205.769L204.417 122.086V121.266L205.824 120.344H206.667ZM209.834 126.078C208.521 126.078 207.756 125.023 207.756 123.172C207.756 121.336 208.537 120.266 209.834 120.266C211.131 120.266 211.912 121.336 211.912 123.172C211.912 125.023 211.138 126.078 209.834 126.078ZM209.834 125.336C210.599 125.336 211.052 124.586 211.052 123.172C211.052 121.766 210.592 120.992 209.834 120.992C209.076 120.992 208.615 121.766 208.615 123.172C208.615 124.586 209.068 125.336 209.834 125.336ZM214.531 126.078C213.219 126.078 212.453 125.023 212.453 123.172C212.453 121.336 213.234 120.266 214.531 120.266C215.828 120.266 216.609 121.336 216.609 123.172C216.609 125.023 215.836 126.078 214.531 126.078ZM214.531 125.336C215.297 125.336 215.75 124.586 215.75 123.172C215.75 121.766 215.289 120.992 214.531 120.992C213.773 120.992 213.312 121.766 213.312 123.172C213.312 124.586 213.766 125.336 214.531 125.336Z" fill="#999999"/>
-</svg>
diff --git a/apps/landing/public/images/components/text-box.svg b/apps/landing/public/images/components/text-box.svg
deleted file mode 100644
index 6c8371e7..00000000
--- a/apps/landing/public/images/components/text-box.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="43.5" y="74.5" width="173" height="35" rx="7.5" stroke="#C8C7D1"/>
-<path d="M204.458 87.1753C204.773 86.7788 205.345 86.6787 205.78 86.9585C206.245 87.2571 206.379 87.8758 206.081 88.3404L200.68 96.7417C200.382 97.206 199.763 97.341 199.299 97.0425C198.834 96.7439 198.701 96.1251 198.999 95.6607L199.607 94.7124C198.154 94.1292 197.326 93.0923 196.789 92.4165C196.763 92.3842 196.738 92.3524 196.714 92.3218C196.597 92.1761 196.568 91.982 196.637 91.8101C197.099 90.6519 198.92 88.8492 202 88.8491C202.462 88.8491 202.895 88.8925 203.301 88.9654L204.398 87.2583L204.458 87.1753ZM205.487 90.4429C205.652 90.1903 205.996 90.1229 206.224 90.3198C206.803 90.8186 207.184 91.3625 207.363 91.8101C207.432 91.9819 207.403 92.1761 207.287 92.3218C207.262 92.3525 207.237 92.3841 207.211 92.4165C206.576 93.2146 205.538 94.5213 203.542 94.9829C203.083 95.0888 202.781 94.5826 203.039 94.188C203.123 94.0597 203.256 93.9712 203.404 93.9331C204.838 93.5657 205.643 92.6626 206.228 91.9351C206.093 91.7094 205.885 91.4482 205.603 91.19C205.393 90.9975 205.331 90.6815 205.487 90.4429ZM202 89.8999C199.634 89.9 198.249 91.1377 197.772 91.9351C198.3 92.5906 199.006 93.3868 200.189 93.8072L200.726 92.9712C200.51 92.7035 200.38 92.3664 200.38 91.9995C200.38 91.1298 201.105 90.4245 202 90.4243C202.117 90.4243 202.231 90.4366 202.341 90.4595L202.678 89.9351C202.461 89.9122 202.235 89.8999 202 89.8999Z" fill="#A9A8B4"/>
-<rect x="43.5" y="30.5" width="173" height="35" rx="7.5" stroke="#C8C7D1"/>
-<circle cx="202" cy="48" r="6" fill="black" fill-opacity="0.2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M199.717 45.7172C199.873 45.561 200.127 45.561 200.283 45.7172L202 47.4343L203.717 45.7172C203.873 45.561 204.127 45.561 204.283 45.7172C204.439 45.8734 204.439 46.1266 204.283 46.2828L202.566 48L204.283 49.7172C204.439 49.8734 204.439 50.1266 204.283 50.2828C204.127 50.4391 203.873 50.4391 203.717 50.2828L202 48.5657L200.283 50.2828C200.127 50.4391 199.873 50.4391 199.717 50.2828C199.561 50.1266 199.561 49.8734 199.717 49.7172L201.434 48L199.717 46.2828C199.561 46.1266 199.561 45.8734 199.717 45.7172Z" fill="white"/>
-<path d="M53.8148 52V43.5156H56.8383C58.807 43.5156 59.7797 44.6992 59.7797 46.2695C59.7797 47.8281 58.807 49.0234 56.8383 49.0234H55.1039V52H53.8148ZM55.1039 47.9219H56.7094C57.9633 47.9219 58.4789 47.2188 58.4789 46.2695C58.4789 45.3086 57.9633 44.6172 56.7094 44.6172H55.1039V47.9219ZM61.9275 43.5156V52H60.6736V43.5156H61.9275ZM62.798 50.207C62.798 48.7539 64.0284 48.3789 65.1769 48.2969C65.5987 48.2676 66.5538 48.2148 66.8527 48.2031L66.8409 47.6992C66.8409 46.9844 66.4073 46.5625 65.5519 46.5625C64.8136 46.5625 64.3683 46.9023 64.2394 47.3711H62.9972C63.1144 46.3164 64.0987 45.5547 65.5987 45.5547C66.6066 45.5547 68.0948 45.9297 68.0948 47.7695V52H66.8761V51.1328H66.8292C66.5831 51.6133 65.9972 52.1406 64.9425 52.1406C63.7355 52.1406 62.798 51.4492 62.798 50.207ZM64.0167 50.2188C64.0167 50.8281 64.5206 51.1445 65.2237 51.1445C66.2433 51.1445 66.8527 50.4648 66.8527 49.7031V49.1172L65.3527 49.2227C64.5323 49.2812 64.0167 49.5859 64.0167 50.2188ZM71.9419 52.1289C70.0903 52.1289 68.9653 50.7578 68.9653 48.8477C68.9653 46.9023 70.1255 45.5547 71.9184 45.5547C73.3716 45.5547 74.4262 46.4102 74.5552 47.6992H73.3364C73.2075 47.1016 72.727 46.5977 71.9419 46.5977C70.9106 46.5977 70.2192 47.4531 70.2192 48.8125C70.2192 50.207 70.8989 51.0625 71.9419 51.0625C72.645 51.0625 73.1841 50.6758 73.3364 49.9844H74.5552C74.4145 51.2148 73.4419 52.1289 71.9419 52.1289ZM78.1209 52.1289C76.2459 52.1289 75.0975 50.8398 75.0975 48.8594C75.0975 46.9023 76.2694 45.5547 78.0389 45.5547C79.492 45.5547 80.8631 46.457 80.8631 48.7539V49.1992H76.3397C76.3748 50.4062 77.0838 51.0977 78.1327 51.0977C78.8475 51.0977 79.3045 50.793 79.5155 50.4062H80.7811C80.4998 51.4375 79.5155 52.1289 78.1209 52.1289ZM76.3514 48.2617H79.6327C79.6327 47.2891 79.0116 46.5859 78.0506 46.5859C77.0487 46.5859 76.3983 47.3594 76.3514 48.2617ZM82.9992 48.2266V52H81.7453V43.5156H82.9758V46.6797H83.0578C83.3625 45.9883 83.9484 45.5547 84.9445 45.5547C86.257 45.5547 87.1242 46.3633 87.1242 47.957V52H85.8703V48.1094C85.8703 47.1719 85.3664 46.6328 84.5227 46.6328C83.6437 46.6328 82.9992 47.207 82.9992 48.2266ZM90.9712 52.1289C89.1666 52.1289 87.9947 50.8164 87.9947 48.8477C87.9947 46.8672 89.1666 45.5547 90.9712 45.5547C92.7642 45.5547 93.9361 46.8672 93.9361 48.8477C93.9361 50.8164 92.7642 52.1289 90.9712 52.1289ZM90.9712 51.0859C92.1197 51.0859 92.6705 50.0664 92.6705 48.8477C92.6705 47.6289 92.1197 46.5859 90.9712 46.5859C89.7994 46.5859 89.2486 47.6289 89.2486 48.8477C89.2486 50.0664 89.7994 51.0859 90.9712 51.0859ZM96.0605 43.5156V52H94.8066V43.5156H96.0605ZM99.6028 52.1289C98.0677 52.1289 96.9427 50.8867 96.9427 48.8359C96.9427 46.7617 98.0794 45.5547 99.6145 45.5547C100.798 45.5547 101.232 46.2695 101.454 46.668H101.513V43.5156H102.767V52H101.548V51.0039H101.454C101.22 51.4258 100.763 52.1289 99.6028 52.1289ZM99.8841 51.0625C100.95 51.0625 101.548 50.1484 101.548 48.8125C101.548 47.4883 100.962 46.6211 99.8841 46.6211C98.7708 46.6211 98.22 47.5586 98.22 48.8125C98.22 50.0898 98.7942 51.0625 99.8841 51.0625ZM106.778 52.1289C104.903 52.1289 103.755 50.8398 103.755 48.8594C103.755 46.9023 104.926 45.5547 106.696 45.5547C108.149 45.5547 109.52 46.457 109.52 48.7539V49.1992H104.997C105.032 50.4062 105.741 51.0977 106.79 51.0977C107.505 51.0977 107.962 50.793 108.172 50.4062H109.438C109.157 51.4375 108.172 52.1289 106.778 52.1289ZM105.008 48.2617H108.29C108.29 47.2891 107.669 46.5859 106.708 46.5859C105.706 46.5859 105.055 47.3594 105.008 48.2617ZM110.402 52V45.6367H111.609V46.6445H111.68C111.914 45.9648 112.547 45.543 113.297 45.543C113.449 45.543 113.695 45.5547 113.824 45.5664V46.7617C113.719 46.7383 113.426 46.6914 113.168 46.6914C112.301 46.6914 111.656 47.2891 111.656 48.1211V52H110.402Z" fill="#999999"/>
-<circle cx="57" cy="92" r="3" fill="#2F2F2F"/>
-<circle cx="66" cy="92" r="3" fill="#2F2F2F"/>
-<circle cx="75" cy="92" r="3" fill="#2F2F2F"/>
-<circle cx="84" cy="92" r="3" fill="#2F2F2F"/>
-<circle cx="93" cy="92" r="3" fill="#2F2F2F"/>
-<circle cx="102" cy="92" r="3" fill="#2F2F2F"/>
-<circle cx="111" cy="92" r="3" fill="#2F2F2F"/>
-<circle cx="120" cy="92" r="3" fill="#2F2F2F"/>
-</svg>
diff --git a/apps/landing/public/images/components/theme/theme-button.svg b/apps/landing/public/images/components/theme/theme-button.svg
deleted file mode 100644
index 98823510..00000000
--- a/apps/landing/public/images/components/theme/theme-button.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="259" height="140" viewBox="0 0 259 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M108 79.3333C108.327 79.3333 108.642 79.4532 108.886 79.6702C109.13 79.8873 109.286 80.1863 109.324 80.5106L109.333 80.6666V82C109.333 82.3398 109.203 82.6667 108.97 82.9138C108.736 83.1609 108.417 83.3096 108.078 83.3295C107.739 83.3494 107.405 83.2391 107.144 83.0209C106.884 82.8028 106.716 82.4934 106.676 82.156L106.667 82V80.6666C106.667 80.313 106.807 79.9739 107.057 79.7238C107.307 79.4738 107.646 79.3333 108 79.3333ZM116.417 76.5466L116.543 76.6573L117.476 77.5906C117.715 77.8306 117.854 78.1525 117.864 78.4911C117.875 78.8297 117.756 79.1596 117.532 79.4137C117.308 79.6678 116.995 79.827 116.658 79.8592C116.321 79.8913 115.984 79.7938 115.716 79.5866L115.591 79.476L114.657 78.5426C114.427 78.3129 114.289 78.0071 114.269 77.6826C114.248 77.3582 114.347 77.0374 114.547 76.7807C114.746 76.524 115.033 76.3491 115.352 76.2888C115.671 76.2285 116.002 76.287 116.281 76.4533L116.417 76.5466ZM101.343 76.6573C101.572 76.8869 101.71 77.1924 101.731 77.5164C101.751 77.8404 101.652 78.1608 101.453 78.4173L101.343 78.5426L100.409 79.476C100.169 79.7151 99.8474 79.8539 99.5088 79.8643C99.1702 79.8746 98.8404 79.7557 98.5863 79.5316C98.3322 79.3076 98.1729 78.9952 98.1408 78.658C98.1087 78.3208 98.2061 77.9839 98.4133 77.716L98.524 77.5906L99.4573 76.6573C99.7074 76.4073 100.046 76.2669 100.4 76.2669C100.754 76.2669 101.093 76.4073 101.343 76.6573ZM97.3333 68.6666C97.6732 68.667 98.0001 68.7971 98.2472 69.0304C98.4943 69.2637 98.643 69.5826 98.6629 69.9218C98.6828 70.2611 98.5724 70.5951 98.3543 70.8557C98.1362 71.1163 97.8268 71.2838 97.4893 71.324L97.3333 71.3333H96C95.6602 71.3329 95.3333 71.2028 95.0862 70.9695C94.8391 70.7362 94.6904 70.4174 94.6704 70.0781C94.6505 69.7388 94.7609 69.4048 94.979 69.1442C95.1971 68.8836 95.5065 68.7161 95.844 68.676L96 68.6666H97.3333ZM120 68.6666C120.34 68.667 120.667 68.7971 120.914 69.0304C121.161 69.2637 121.31 69.5826 121.33 69.9218C121.349 70.2611 121.239 70.5951 121.021 70.8557C120.803 71.1163 120.493 71.2838 120.156 71.324L120 71.3333H118.667C118.327 71.3329 118 71.2028 117.753 70.9695C117.506 70.7362 117.357 70.4174 117.337 70.0781C117.317 69.7388 117.428 69.4048 117.646 69.1442C117.864 68.8836 118.173 68.7161 118.511 68.676L118.667 68.6666H120ZM100.284 60.4133L100.409 60.524L101.343 61.4573C101.582 61.6972 101.721 62.0192 101.731 62.3578C101.741 62.6964 101.622 63.0262 101.398 63.2803C101.174 63.5344 100.862 63.6937 100.525 63.7258C100.187 63.7579 99.8507 63.6605 99.5827 63.4533L99.4573 63.3426L98.524 62.4093C98.2948 62.1795 98.1573 61.8741 98.1372 61.5501C98.1171 61.2262 98.2158 60.9061 98.4149 60.6498C98.614 60.3934 98.8997 60.2185 99.2185 60.1578C99.5373 60.0971 99.8673 60.1547 100.147 60.32L100.284 60.4133ZM117.476 60.524C117.706 60.7536 117.843 61.059 117.864 61.3831C117.884 61.7071 117.786 62.0274 117.587 62.284L117.476 62.4093L116.543 63.3426C116.303 63.5818 115.981 63.7206 115.642 63.7309C115.304 63.7413 114.974 63.6223 114.72 63.3983C114.466 63.1742 114.306 62.8619 114.274 62.5247C114.242 62.1874 114.339 61.8506 114.547 61.5826L114.657 61.4573L115.591 60.524C115.841 60.274 116.18 60.1336 116.533 60.1336C116.887 60.1336 117.226 60.274 117.476 60.524ZM108 56.6666C108.327 56.6667 108.642 56.7866 108.886 57.0036C109.13 57.2206 109.286 57.5196 109.324 57.844L109.333 58V59.3333C109.333 59.6731 109.203 60 108.97 60.2471C108.736 60.4942 108.417 60.6429 108.078 60.6629C107.739 60.6828 107.405 60.5724 107.144 60.3543C106.884 60.1362 106.716 59.8268 106.676 59.4893L106.667 59.3333V58C106.667 57.6463 106.807 57.3072 107.057 57.0572C107.307 56.8071 107.646 56.6666 108 56.6666ZM108 63.3333C109.306 63.3332 110.584 63.7169 111.674 64.4366C112.764 65.1564 113.618 66.1805 114.131 67.3818C114.644 68.5831 114.793 69.9086 114.559 71.1937C114.325 72.4788 113.719 73.6669 112.816 74.6104C111.912 75.5539 110.752 76.2113 109.478 76.5008C108.204 76.7903 106.874 76.6993 105.651 76.239C104.429 75.7787 103.368 74.9694 102.602 73.9116C101.836 72.8539 101.397 71.5943 101.34 70.2893L101.333 70L101.34 69.7106C101.415 67.9943 102.149 66.373 103.39 65.1848C104.63 63.9967 106.282 63.3334 108 63.3333Z" fill="#2F2F2F"/>
-<path d="M138 70C138 63.3823 143.364 58.0179 149.982 58.0179H152.06L151.02 59.8152C150.326 61.0135 149.982 62.4381 149.982 64.009C149.982 65.2474 150.256 66.4706 150.785 67.5906C151.313 68.7105 152.083 69.6995 153.04 70.4865C153.996 71.2735 155.115 71.8389 156.316 72.1422C157.516 72.4455 158.769 72.4791 159.985 72.2406L162 71.8488L161.349 73.7971C159.762 78.5515 155.274 81.982 149.982 81.982C143.364 81.982 138 76.6176 138 70Z" fill="#2F2F2F"/>
-</svg>
diff --git a/apps/landing/public/images/components/toggle.svg b/apps/landing/public/images/components/toggle.svg
deleted file mode 100644
index 4f25e8cf..00000000
--- a/apps/landing/public/images/components/toggle.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="105" y="56" width="50" height="28" rx="14" fill="#6159D4"/>
-<circle cx="141" cy="70" r="10" fill="white"/>
-</svg>
diff --git a/apps/landing/public/images/components/uploader.svg b/apps/landing/public/images/components/uploader.svg
deleted file mode 100644
index 473b2fc7..00000000
--- a/apps/landing/public/images/components/uploader.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg width="260" height="140" viewBox="0 0 260 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="63" y="24" width="118" height="78" rx="7" stroke="#6159D4" stroke-width="2" stroke-dasharray="4 4"/>
-<rect x="92" y="70" width="59" height="15" rx="2" fill="#DADADA"/>
-<rect x="131.5" y="50.5" width="67" height="67" rx="3.5" fill="white"/>
-<rect x="131.5" y="50.5" width="67" height="67" rx="3.5" stroke="#2F2F2F"/>
-<path d="M131 62C136.523 62 141 57.5228 141 52C141 46.4772 136.523 42 131 42C125.477 42 121 46.4772 121 52C121 57.5228 125.477 62 131 62Z" fill="#2CA353"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M132.25 47.0498V56.9498H129.75V47.0498H132.25Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M126.05 50.75H135.95V53.25H126.05V50.75Z" fill="white"/>
-<path d="M171 81.75H165.75V77.25H167.25V80.25H171V81.75Z" fill="#C3C2C8"/>
-<path d="M168 83.25H162V84.75H168V83.25Z" fill="#C3C2C8"/>
-<path d="M168 86.25H162V87.75H168V86.25Z" fill="#C3C2C8"/>
-<path d="M165.96 78L169.5 80.955V90H160.5V78H165.96ZM166.5 76.5H160.5C159.675 76.5 159 77.175 159 78V90C159 90.825 159.675 91.5 160.5 91.5H169.5C170.325 91.5 171 90.825 171 90V80.25L166.5 76.5Z" fill="#C3C2C8"/>
-<path d="M168.38 56.2398V57.7398H175.38V56.2398V55.2398C175.38 54.4455 176.102 53.7045 176.287 53.5192C176.678 53.1287 177.787 53.0192 177.787 52.0192V50.0192C177.787 50.0192 177.572 48.5192 176.287 48.5192C175.423 48.5192 175.38 49.2398 175.38 49.2398V48.2398C175.38 48.2398 175.287 47.5192 174.38 47.2398C173.663 47.0192 172.38 47.1751 172.38 47.466V48.2398C172.38 48.2398 171.82 47.5192 171.413 47.2398C170.93 46.9089 169.87 46.9315 169.552 47.2398C169.212 47.5689 169.459 48.2398 169.287 48.2398C169.115 48.2398 168.787 47.5192 168.38 47.2398C167.972 46.9604 166.598 47.1108 166.287 47.5192C165.855 48.0881 165.843 48.7074 166.226 49.2398C166.787 50.0192 167.287 49.962 167.38 50.2398C167.472 50.5177 167.38 51.2398 167.38 51.2398H166.38C166.016 51.2398 165.477 51.2398 165.287 51.5192C164.868 52.2398 164.915 52.6744 165.38 53.2398C165.427 53.2971 166.38 54.2398 166.38 54.2398L167.38 55.2398L168.38 56.2398Z" fill="white"/>
-<path d="M168.38 57.7398V56.2398L167.38 55.2398L166.38 54.2398C166.38 54.2398 165.427 53.2971 165.38 53.2398C164.915 52.6744 164.868 52.2398 165.287 51.5192C165.477 51.2398 166.016 51.2398 166.38 51.2398C166.787 51.2398 167.38 51.2398 167.38 51.2398C167.38 51.2398 167.472 50.5177 167.38 50.2398C167.287 49.962 166.787 50.0192 166.226 49.2398C165.843 48.7074 165.855 48.0881 166.287 47.5192C166.598 47.1108 167.972 46.9604 168.38 47.2398C168.787 47.5192 169.115 48.2398 169.287 48.2398C169.459 48.2398 169.212 47.5689 169.552 47.2398C169.87 46.9315 170.93 46.9089 171.413 47.2398C171.82 47.5192 172.38 48.2398 172.38 48.2398V47.466C172.38 47.1751 173.663 47.0192 174.38 47.2398C175.287 47.5192 175.38 48.2398 175.38 48.2398V49.2398C175.38 49.2398 175.423 48.5192 176.287 48.5192C177.787 48.5192 177.787 50.0192 177.787 50.0192V52.0192C177.787 53.0192 176.678 53.1287 176.287 53.5192C176.102 53.7045 175.38 54.4455 175.38 55.2398V56.2398V57.7398" stroke="#2F2F2F" stroke-linejoin="round"/>
-</svg>
diff --git a/apps/landing/src/app/(detail)/components/Card.tsx b/apps/landing/src/app/(detail)/components/Card.tsx
index b891b5df..f9e1b4f2 100644
--- a/apps/landing/src/app/(detail)/components/Card.tsx
+++ b/apps/landing/src/app/(detail)/components/Card.tsx
@@ -14,7 +14,6 @@ export default function Card({ children }: { children: React.ReactNode }) {
       border="1px solid $border"
       borderRadius="10px"
       cursor="pointer"
-      maxW="260px"
       transition="all 0.2s ease"
     >
       {children}
diff --git a/apps/landing/src/app/(detail)/components/layout.tsx b/apps/landing/src/app/(detail)/components/layout.tsx
index c918f6ea..d8579415 100644
--- a/apps/landing/src/app/(detail)/components/layout.tsx
+++ b/apps/landing/src/app/(detail)/components/layout.tsx
@@ -8,7 +8,7 @@ export default function Layout({
 }: Readonly<{ children: React.ReactNode }>) {
   return (
     <>
-      <Flex maxW="1920px" minH="calc(100vh - 500px)" mx="auto">
+      <Flex maxW="1920px" minH="calc(100vh - 500px)" mx="auto" w="100%">
         <Box display={['none', null, 'initial']} p="20px 16px" w="220px">
           <Box pos="sticky" top={['70px', null, '90px']}>
             <LeftMenu />
@@ -17,7 +17,7 @@ export default function Layout({
         <Box className="markdown-body" flex={1}>
           {children}
         </Box>
-        <Box display={['none', null, null, 'initial']}>
+        <Box display={['none', null, null, null, null, 'initial']}>
           <Box pos="sticky" top={['50px', null, '70px']}>
             <RightIndex />
           </Box>
diff --git a/apps/landing/src/app/(detail)/components/overview/page.tsx b/apps/landing/src/app/(detail)/components/overview/page.tsx
index ed762d46..ae4e3b61 100644
--- a/apps/landing/src/app/(detail)/components/overview/page.tsx
+++ b/apps/landing/src/app/(detail)/components/overview/page.tsx
@@ -1,10 +1,12 @@
-import { Center, Flex, Image, Text, VStack } from '@devup-ui/react'
+import { Center, Flex, Grid, Text, VStack } from '@devup-ui/react'
+
+import * as Icons from '@/components/icons/components/componentIcons'
 
 import Card from '../Card'
 
 export default function Page() {
   return (
-    <VStack flex="1" gap="16px" maxW="100%" px="60px" py="40px">
+    <VStack gap="16px" px={['16px', '30px', '60px']} py={['24px', '40px']}>
       <Text color="$primary" typography="captionBold">
         Overview
       </Text>
@@ -22,10 +24,20 @@ export default function Page() {
         <Text color="$title" typography="h6">
           Form
         </Text>
-        <Flex alignItems="center" flexWrap="wrap" gap="20px" overflow="visible">
+        <Grid
+          gap={['10px', null, null, null, '20px']}
+          gridTemplateColumns={[
+            'repeat(1, 1fr)',
+            'repeat(3, 1fr)',
+            null,
+            'repeat(4, 1fr)',
+            'repeat(5, 1fr)',
+          ]}
+          overflow="visible"
+        >
           <Card>
             <Center h="140px">
-              <Image src="/images/components/button.svg" />
+              <Icons.IconButtonComponent />
             </Center>
             <Flex
               alignItems="center"
@@ -41,7 +53,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/text-box.svg" />
+              <Icons.IconTextBoxComp />
             </Center>
             <Flex
               alignItems="center"
@@ -57,7 +69,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/text-area.svg" />
+              <Icons.IconTextAreaComp />
             </Center>
             <Flex
               alignItems="center"
@@ -73,7 +85,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/dropdown.svg" />
+              <Icons.IconDropdownComp />
             </Center>
             <Flex
               alignItems="center"
@@ -89,7 +101,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/radio.svg" />
+              <Icons.IconRadioComp />
             </Center>
             <Flex
               alignItems="center"
@@ -105,7 +117,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/checkbox.svg" />
+              <Icons.IconCheckboxComp />
             </Center>
             <Flex
               alignItems="center"
@@ -121,7 +133,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/stepper.svg" />
+              <Icons.IconStepperComp />
             </Center>
             <Flex
               alignItems="center"
@@ -137,7 +149,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/toggle.svg" />
+              <Icons.IconToggleComp />
             </Center>
             <Flex
               alignItems="center"
@@ -153,7 +165,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/slider.svg" />
+              <Icons.IconSliderComp />
             </Center>
             <Flex
               alignItems="center"
@@ -169,7 +181,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/date-picker.svg" />
+              <Icons.IconDatePickerComp />
             </Center>
             <Flex
               alignItems="center"
@@ -185,7 +197,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/color-picker.svg" />
+              <Icons.IconColorPickerComp />
             </Center>
             <Flex
               alignItems="center"
@@ -201,7 +213,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/uploader.svg" />
+              <Icons.IconUploaderComp />
             </Center>
             <Flex
               alignItems="center"
@@ -217,7 +229,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/pagination.svg" />
+              <Icons.IconPagination />
             </Center>
             <Flex
               alignItems="center"
@@ -233,7 +245,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/progress-bar.svg" />
+              <Icons.IconProgressBar />
             </Center>
             <Flex
               alignItems="center"
@@ -249,7 +261,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/search.svg" />
+              <Icons.IconSearchComp />
             </Center>
             <Flex
               alignItems="center"
@@ -265,7 +277,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/select.svg" />
+              <Icons.IconSelectComp />
             </Center>
             <Flex
               alignItems="center"
@@ -281,7 +293,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/label.svg" />
+              <Icons.IconLabelComp />
             </Center>
             <Flex
               alignItems="center"
@@ -295,16 +307,26 @@ export default function Page() {
               </Text>
             </Flex>
           </Card>
-        </Flex>
+        </Grid>
       </VStack>
       <VStack gap="16px" overflow="visible" py="30px">
         <Text color="$title" typography="h6">
           Layout
         </Text>
-        <Flex alignItems="center" flexWrap="wrap" gap="20px" overflow="visible">
+        <Grid
+          gap={['10px', null, null, null, '20px']}
+          gridTemplateColumns={[
+            'repeat(1, 1fr)',
+            'repeat(3, 1fr)',
+            null,
+            'repeat(4, 1fr)',
+            'repeat(5, 1fr)',
+          ]}
+          overflow="visible"
+        >
           <Card>
             <Center h="140px">
-              <Image src="/images/components/layout/footer.svg" />
+              <Icons.IconFooterComp />
             </Center>
             <Flex
               alignItems="center"
@@ -320,7 +342,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/layout/tooltip.svg" />
+              <Icons.IconTooltipComp />
             </Center>
             <Flex
               alignItems="center"
@@ -336,7 +358,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/layout/tab.svg" />
+              <Icons.IconTabComp />
             </Center>
             <Flex
               alignItems="center"
@@ -352,7 +374,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/layout/menu.svg" />
+              <Icons.IconMenuComp />
             </Center>
             <Flex
               alignItems="center"
@@ -368,7 +390,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/layout/header.svg" />
+              <Icons.IconHeaderComp />
             </Center>
             <Flex
               alignItems="center"
@@ -384,7 +406,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/layout/confirm.svg" />
+              <Icons.IconConfirmComp />
             </Center>
             <Flex
               alignItems="center"
@@ -400,7 +422,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/layout/snackbar.svg" />
+              <Icons.IconSnackbarComp />
             </Center>
             <Flex
               alignItems="center"
@@ -416,7 +438,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Image src="/images/components/layout/bottom-sheet.svg" />
+              <Icons.IconBottomSheetComp />
             </Center>
             <Flex
               alignItems="center"
@@ -430,16 +452,26 @@ export default function Page() {
               </Text>
             </Flex>
           </Card>
-        </Flex>
+        </Grid>
       </VStack>
       <VStack gap="16px" overflow="visible" py="30px">
         <Text color="$title" typography="h6">
           Theme
         </Text>
-        <Flex alignItems="center" flexWrap="wrap" gap="20px" overflow="visible">
+        <Grid
+          gap={['10px', null, null, null, '20px']}
+          gridTemplateColumns={[
+            'repeat(1, 1fr)',
+            'repeat(3, 1fr)',
+            null,
+            'repeat(4, 1fr)',
+            'repeat(5, 1fr)',
+          ]}
+          overflow="visible"
+        >
           <Card>
             <Center h="140px">
-              <Image src="/images/components/theme/theme-button.svg" />
+              <Icons.IconThemeButtonComp />
             </Center>
             <Flex
               alignItems="center"
@@ -453,7 +485,7 @@ export default function Page() {
               </Text>
             </Flex>
           </Card>
-        </Flex>
+        </Grid>
       </VStack>
     </VStack>
   )
diff --git a/apps/landing/src/components/icons/components/IconBottomSheetComp.tsx b/apps/landing/src/components/icons/components/IconBottomSheetComp.tsx
new file mode 100644
index 00000000..a377bdb9
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconBottomSheetComp.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import { useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconBottomSheetComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  const theme = useTheme()
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 260 140"
+      width="260"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask fill="white" id="path-1-inside-1_560_2794">
+        <path d="M43 53C43 48.5817 46.5817 45 51 45H209C213.418 45 217 48.5817 217 53V140H43V53Z" />
+      </mask>
+      <path
+        d="M42 53C42 48.0294 46.0294 44 51 44H209C213.971 44 218 48.0294 218 53H216C216 49.134 212.866 46 209 46H51C47.134 46 44 49.134 44 53H42ZM217 140H43H217ZM42 140V53C42 48.0294 46.0294 44 51 44V46C47.134 46 44 49.134 44 53V140H42ZM209 44C213.971 44 218 48.0294 218 53V140H216V53C216 49.134 212.866 46 209 46V44Z"
+        fill={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        mask="url(#path-1-inside-1_560_2794)"
+      />
+      <rect
+        fill={theme === 'light' ? '#C3C3C3' : '#575757'}
+        height="4"
+        rx="2"
+        width="40"
+        x="110"
+        y="53"
+      />
+      <rect
+        fill={theme === 'light' ? '#ECECEC' : '#3a3a3a'}
+        height="30"
+        rx="5"
+        width="130"
+        x="65"
+        y="78"
+      />
+      <rect
+        fill={theme === 'light' ? '#ECECEC' : '#3a3a3a'}
+        height="7"
+        rx="2"
+        width="91"
+        x="65"
+        y="114"
+      />
+      <rect
+        fill={theme === 'light' ? '#ECECEC' : '#3a3a3a'}
+        height="7"
+        rx="2"
+        width="91"
+        x="65"
+        y="125"
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconButtonComponent.tsx b/apps/landing/src/components/icons/components/IconButtonComponent.tsx
new file mode 100644
index 00000000..9419579c
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconButtonComponent.tsx
@@ -0,0 +1,64 @@
+'use client'
+
+import { css, useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconButtonComponent({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  const theme = useTheme()
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 259 140"
+      width="259"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        height="35"
+        rx="7.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="119"
+        x="69.5"
+        y="30.5"
+      />
+      <rect
+        className={css({ fill: '$primary' })}
+        height="36"
+        rx="8"
+        width="120"
+        x="69"
+        y="74"
+      />
+      <path
+        className={css({ fill: '$base' })}
+        d="M182.954 106.629V102.615C182.954 102.615 182.954 101.277 184.292 101.277C185.63 101.277 185.63 102.615 185.63 102.615V106.629"
+      />
+      <path
+        className={css({ fill: '$base' })}
+        d="M185.63 106.629L185.63 103.284C185.63 103.284 185.63 101.946 186.967 101.946C188.305 101.946 188.305 103.284 188.305 103.284V106.629"
+      />
+      <path
+        className={css({ fill: '$base' })}
+        d="M188.305 106.629L188.305 103.953C188.305 103.953 188.305 102.615 189.643 102.615C190.981 102.615 190.981 103.953 190.981 103.953V110.309C190.981 110.309 191.65 116.998 184.961 116.998C184.961 116.998 182.5 117.129 180.278 114.991L175.595 109.64C175.595 109.64 174.257 108.302 175.595 106.964C175.595 106.964 176.598 105.96 178.271 107.633L179.432 108.794C179.744 109.106 180.278 108.885 180.278 108.444V97.5977C180.278 97.5977 180.278 96.2598 181.616 96.2598C182.954 96.2598 182.954 97.5977 182.954 97.5977V106.629"
+      />
+      <path
+        className={css({ stroke: '$negativeBase' })}
+        d="M182.954 106.629V102.615C182.954 102.615 182.954 101.277 184.292 101.277C185.63 101.277 185.63 102.615 185.63 102.615V106.629L185.63 103.284C185.63 103.284 185.63 101.946 186.967 101.946C188.305 101.946 188.305 103.284 188.305 103.284V106.629L188.305 103.953C188.305 103.953 188.305 102.615 189.643 102.615C190.981 102.615 190.981 103.953 190.981 103.953V110.309C190.981 110.309 191.65 116.998 184.961 116.998C184.961 116.998 182.5 117.129 180.278 114.991L175.595 109.64C175.595 109.64 174.257 108.302 175.595 106.964C175.595 106.964 176.598 105.96 178.271 107.633L179.432 108.794C179.744 109.106 180.278 108.885 180.278 108.444V97.5977C180.278 97.5977 180.278 96.2598 181.616 96.2598C182.954 96.2598 182.954 97.5977 182.954 97.5977V106.629Z"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M109.806 47.5742C109.689 46.707 109.068 46.1562 108.118 46.1562C106.864 46.1562 106.103 47.1055 106.103 48.7578C106.103 50.4688 106.888 51.3594 108.107 51.3594C109.021 51.3594 109.653 50.8672 109.806 50.0352L111.821 50.0469C111.657 51.5586 110.368 53.1172 108.071 53.1172C105.775 53.1172 104.064 51.5469 104.064 48.7578C104.064 45.957 105.81 44.3984 108.071 44.3984C110.11 44.3984 111.61 45.5469 111.821 47.5742H109.806ZM114.59 44.5156V53H112.61V44.5156H114.59ZM115.496 53V46.6367H117.476V53H115.496ZM116.492 45.875C115.93 45.875 115.473 45.4531 115.473 44.9258C115.473 44.3984 115.93 43.9766 116.492 43.9766C117.055 43.9766 117.523 44.3984 117.523 44.9258C117.523 45.4531 117.055 45.875 116.492 45.875ZM121.335 53.1172C119.331 53.1172 118.136 51.7812 118.136 49.8359C118.136 47.8906 119.343 46.5547 121.335 46.5547C123.081 46.5547 124.218 47.5625 124.265 49.1094H122.425C122.331 48.4648 121.956 48.0547 121.359 48.0547C120.632 48.0547 120.152 48.6758 120.152 49.8125C120.152 50.9609 120.62 51.582 121.359 51.582C121.921 51.582 122.343 51.2188 122.425 50.5391H124.265C124.206 52.0859 123.105 53.1172 121.335 53.1172ZM124.924 53V44.5156H126.905V48.9453H126.987L128.827 46.6367H131.077L128.792 49.4023L131.17 53H128.885L127.327 50.5625L126.905 51.0547V53H124.924ZM133.755 53V46.6367H135.63V47.7969H135.7C135.97 47.0234 136.626 46.5547 137.505 46.5547C138.384 46.5547 139.064 47.0352 139.228 47.7969H139.298C139.544 47.0469 140.283 46.5547 141.22 46.5547C142.415 46.5547 143.247 47.3633 143.247 48.7109V53H141.267V49.1562C141.267 48.5117 140.892 48.1602 140.365 48.1602C139.79 48.1602 139.45 48.5703 139.45 49.1797V53H137.552V49.1328C137.552 48.5352 137.189 48.1602 136.661 48.1602C136.111 48.1602 135.736 48.582 135.736 49.2266V53H133.755ZM147.094 53.1172C145.102 53.1172 143.883 51.875 143.883 49.8477C143.883 47.8789 145.114 46.5547 147.024 46.5547C148.805 46.5547 150.094 47.6914 150.094 49.8008V50.3047H145.829V50.3398C145.829 51.1602 146.333 51.6875 147.13 51.6875C147.669 51.6875 148.067 51.4531 148.231 51.0781H150.071C149.837 52.3203 148.747 53.1172 147.094 53.1172ZM145.829 49.1445H148.255C148.243 48.4648 147.751 47.9844 147.071 47.9844C146.368 47.9844 145.858 48.4824 145.829 49.1445ZM153.074 44.5156L152.898 50.4102H151.223L151.047 44.5156H153.074ZM152.055 53.1172C151.469 53.1172 150.988 52.6484 151 52.0508C150.988 51.4766 151.469 51.0078 152.055 51.0078C152.617 51.0078 153.109 51.4766 153.121 52.0508C153.109 52.6484 152.617 53.1172 152.055 53.1172Z"
+        fill="currentColor"
+      />
+      <path
+        d="M109.806 91.5742C109.689 90.707 109.068 90.1562 108.118 90.1562C106.864 90.1562 106.103 91.1055 106.103 92.7578C106.103 94.4688 106.888 95.3594 108.107 95.3594C109.021 95.3594 109.653 94.8672 109.806 94.0352L111.821 94.0469C111.657 95.5586 110.368 97.1172 108.071 97.1172C105.775 97.1172 104.064 95.5469 104.064 92.7578C104.064 89.957 105.81 88.3984 108.071 88.3984C110.11 88.3984 111.61 89.5469 111.821 91.5742H109.806ZM114.59 88.5156V97H112.61V88.5156H114.59ZM115.496 97V90.6367H117.476V97H115.496ZM116.492 89.875C115.93 89.875 115.473 89.4531 115.473 88.9258C115.473 88.3984 115.93 87.9766 116.492 87.9766C117.055 87.9766 117.523 88.3984 117.523 88.9258C117.523 89.4531 117.055 89.875 116.492 89.875ZM121.335 97.1172C119.331 97.1172 118.136 95.7812 118.136 93.8359C118.136 91.8906 119.343 90.5547 121.335 90.5547C123.081 90.5547 124.218 91.5625 124.265 93.1094H122.425C122.331 92.4648 121.956 92.0547 121.359 92.0547C120.632 92.0547 120.152 92.6758 120.152 93.8125C120.152 94.9609 120.62 95.582 121.359 95.582C121.921 95.582 122.343 95.2188 122.425 94.5391H124.265C124.206 96.0859 123.105 97.1172 121.335 97.1172ZM124.924 97V88.5156H126.905V92.9453H126.987L128.827 90.6367H131.077L128.792 93.4023L131.17 97H128.885L127.327 94.5625L126.905 95.0547V97H124.924ZM133.755 97V90.6367H135.63V91.7969H135.7C135.97 91.0234 136.626 90.5547 137.505 90.5547C138.384 90.5547 139.064 91.0352 139.228 91.7969H139.298C139.544 91.0469 140.283 90.5547 141.22 90.5547C142.415 90.5547 143.247 91.3633 143.247 92.7109V97H141.267V93.1562C141.267 92.5117 140.892 92.1602 140.365 92.1602C139.79 92.1602 139.45 92.5703 139.45 93.1797V97H137.552V93.1328C137.552 92.5352 137.189 92.1602 136.661 92.1602C136.111 92.1602 135.736 92.582 135.736 93.2266V97H133.755ZM147.094 97.1172C145.102 97.1172 143.883 95.875 143.883 93.8477C143.883 91.8789 145.114 90.5547 147.024 90.5547C148.805 90.5547 150.094 91.6914 150.094 93.8008V94.3047H145.829V94.3398C145.829 95.1602 146.333 95.6875 147.13 95.6875C147.669 95.6875 148.067 95.4531 148.231 95.0781H150.071C149.837 96.3203 148.747 97.1172 147.094 97.1172ZM145.829 93.1445H148.255C148.243 92.4648 147.751 91.9844 147.071 91.9844C146.368 91.9844 145.858 92.4824 145.829 93.1445ZM153.074 88.5156L152.898 94.4102H151.223L151.047 88.5156H153.074ZM152.055 97.1172C151.469 97.1172 150.988 96.6484 151 96.0508C150.988 95.4766 151.469 95.0078 152.055 95.0078C152.617 95.0078 153.109 95.4766 153.121 96.0508C153.109 96.6484 152.617 97.1172 152.055 97.1172Z"
+        fill="white"
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconCheckboxComp.tsx b/apps/landing/src/components/icons/components/IconCheckboxComp.tsx
new file mode 100644
index 00000000..801e0b71
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconCheckboxComp.tsx
@@ -0,0 +1,80 @@
+'use client'
+
+import { css, useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconCheckboxComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  const theme = useTheme()
+  return (
+    <svg
+      fill="none"
+      height="140"
+      viewBox="0 0 259 140"
+      width="259"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        height="17"
+        rx="1.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="17"
+        x="67.5"
+        y="33.5"
+      />
+      <rect
+        className={css({ fill: '$text' })}
+        height="8"
+        opacity="0.4"
+        rx="2"
+        width="100"
+        x="93"
+        y="38"
+      />
+      <rect fill="white" height="18" rx="2" width="18" x="67" y="61" />
+      <rect
+        className={css({ fill: '$primary' })}
+        height="18"
+        rx="2"
+        width="18"
+        x="67"
+        y="61"
+      />
+      <path
+        clipRule="evenodd"
+        d="M81.6474 66.8071C82.0992 67.2337 82.1195 67.9457 81.6929 68.3975L75.3179 75.1475C75.1021 75.3759 74.8007 75.5037 74.4865 75.4999C74.1723 75.4961 73.874 75.3611 73.6638 75.1276L70.2888 71.3776C69.8732 70.9158 69.9106 70.2044 70.3724 69.7888C70.8342 69.3732 71.5456 69.4106 71.9612 69.8724L74.5199 72.7154L80.0571 66.8526C80.4837 66.4008 81.1957 66.3805 81.6474 66.8071Z"
+        fill="white"
+        fillRule="evenodd"
+      />
+      <rect
+        className={css({ fill: '$text' })}
+        height="8"
+        opacity="0.4"
+        rx="2"
+        width="100"
+        x="93"
+        y="66"
+      />
+      <rect
+        height="17"
+        rx="1.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="17"
+        x="67.5"
+        y="89.5"
+      />
+      <rect
+        className={css({ fill: '$text' })}
+        height="8"
+        opacity="0.4"
+        rx="2"
+        width="100"
+        x="93"
+        y="94"
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconColorPickerComp.tsx b/apps/landing/src/components/icons/components/IconColorPickerComp.tsx
new file mode 100644
index 00000000..4e3cfb2b
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconColorPickerComp.tsx
@@ -0,0 +1,125 @@
+'use client'
+
+import { useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconColorPickerComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  const theme = useTheme()
+
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 259 140"
+      width="259"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        height="95"
+        rx="7.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="99"
+        x="79.5"
+        y="22.5"
+      />
+      <g clipPath="url(#clip0_560_2665)">
+        <rect
+          fill="url(#paint0_linear_560_2665)"
+          height="86"
+          rx="4"
+          width="90"
+          x="84"
+          y="27"
+        />
+        <rect
+          fill="url(#paint1_linear_560_2665)"
+          height="86"
+          rx="4"
+          style={{ mixBlendMode: 'multiply' }}
+          width="90"
+          x="84"
+          y="27"
+        />
+        <g filter="url(#filter0_d_560_2665)">
+          <rect fill="#774CC5" height="10" rx="5" width="10" x="145" y="41" />
+          <rect
+            height="10"
+            rx="5"
+            stroke="white"
+            strokeWidth="2"
+            width="10"
+            x="145"
+            y="41"
+          />
+        </g>
+      </g>
+      <defs>
+        <filter
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+          height="20"
+          id="filter0_d_560_2665"
+          width="20"
+          x="140"
+          y="36"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            result="hardAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+          />
+          <feBlend
+            in2="BackgroundImageFix"
+            mode="normal"
+            result="effect1_dropShadow_560_2665"
+          />
+          <feBlend
+            in="SourceGraphic"
+            in2="effect1_dropShadow_560_2665"
+            mode="normal"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id="paint0_linear_560_2665"
+          x1="129"
+          x2="129"
+          y1="27"
+          y2="113"
+        >
+          <stop stopColor="white" />
+          <stop offset="1" />
+        </linearGradient>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id="paint1_linear_560_2665"
+          x1="84"
+          x2="174"
+          y1="70"
+          y2="70"
+        >
+          <stop stopColor="white" />
+          <stop offset="1" stopColor="#5A05F5" />
+        </linearGradient>
+        <clipPath id="clip0_560_2665">
+          <rect fill="white" height="86" rx="4" width="90" x="84" y="27" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconConfirmComp.tsx b/apps/landing/src/components/icons/components/IconConfirmComp.tsx
new file mode 100644
index 00000000..23d7d40c
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconConfirmComp.tsx
@@ -0,0 +1,70 @@
+'use client'
+
+import { css, useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconConfirmComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  const theme = useTheme()
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 259 140"
+      width="259"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        height="94"
+        rx="7.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="173"
+        x="42.5"
+        y="22.5"
+      />
+      <circle cx="66" cy="46" fill="#F3B238" r="8.33333" />
+      <path
+        d="M66.0003 48.5C66.6905 48.5002 67.2503 49.0598 67.2503 49.75C67.2503 50.4402 66.6905 50.9998 66.0003 51C65.31 51 64.7503 50.4404 64.7503 49.75C64.7503 49.0596 65.31 48.5 66.0003 48.5ZM66.4164 41C66.8766 41 67.6664 41.3321 67.6664 41.7412L67.2503 46.5557C67.2503 47.1692 66.6905 47.6668 66.0003 47.667C65.31 47.667 64.7504 47.1693 64.7503 46.5557L64.3333 41.7412C64.3333 41.3321 65.1231 41 65.5833 41H66.4164Z"
+        fill="white"
+      />
+      <rect
+        className={css({ fill: '$text' })}
+        height="6"
+        opacity="0.7"
+        rx="2"
+        width="40"
+        x="57"
+        y="65"
+      />
+      <rect
+        className={css({ fill: '$text' })}
+        height="6"
+        opacity="0.4"
+        rx="2"
+        width="86"
+        x="57"
+        y="76"
+      />
+      <rect
+        height="15"
+        rx="3.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="41"
+        x="121.5"
+        y="93.5"
+      />
+      <rect
+        className={css({ fill: '$primary' })}
+        height="16"
+        rx="4"
+        width="42"
+        x="166"
+        y="93"
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconDatePickerComp.tsx b/apps/landing/src/components/icons/components/IconDatePickerComp.tsx
new file mode 100644
index 00000000..ee939368
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconDatePickerComp.tsx
@@ -0,0 +1,362 @@
+'use client'
+
+import { css, useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconDatePickerComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  const theme = useTheme()
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 259 140"
+      width="259"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        height="95"
+        rx="7.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="99"
+        x="80.5"
+        y="22.5"
+      />
+      <path
+        className={css({ fill: '$text' })}
+        d="M113.289 39L113.282 38.1484L115.313 36.2812C115.844 35.7734 116.125 35.4609 116.125 35.0156C116.125 34.5156 115.743 34.2031 115.227 34.2031C114.696 34.2031 114.352 34.5391 114.352 35.0781H113.235C113.227 33.9688 114.047 33.2656 115.243 33.2656C116.453 33.2656 117.258 33.9531 117.258 34.9375C117.258 35.5781 116.946 36.1094 115.782 37.1641L114.922 38V38.0312H117.336V39H113.289ZM120.128 39.0781C118.713 39.0781 117.854 38.0234 117.854 36.1719C117.854 34.3203 118.713 33.2656 120.128 33.2656C121.542 33.2656 122.401 34.3281 122.401 36.1719C122.401 38.0312 121.542 39.0781 120.128 39.0781ZM120.128 38.1094C120.784 38.1094 121.206 37.4766 121.198 36.1719C121.198 34.8828 120.784 34.2266 120.128 34.2266C119.471 34.2266 119.057 34.8828 119.057 36.1719C119.049 37.4766 119.471 38.1094 120.128 38.1094ZM122.973 39L122.966 38.1484L124.997 36.2812C125.528 35.7734 125.809 35.4609 125.809 35.0156C125.809 34.5156 125.427 34.2031 124.911 34.2031C124.38 34.2031 124.036 34.5391 124.036 35.0781H122.919C122.911 33.9688 123.731 33.2656 124.927 33.2656C126.138 33.2656 126.942 33.9531 126.942 34.9375C126.942 35.5781 126.63 36.1094 125.466 37.1641L124.606 38V38.0312H127.02V39H122.973ZM129.694 39.0781C128.515 39.0781 127.655 38.3828 127.632 37.4062H128.773C128.796 37.8516 129.202 38.1484 129.694 38.1484C130.28 38.1484 130.694 37.7344 130.694 37.1484C130.694 36.5469 130.273 36.1328 129.679 36.125C129.257 36.125 128.96 36.2812 128.788 36.6016H127.726L128.03 33.3438H131.515V34.3047H128.999L128.843 35.7344H128.89C129.101 35.4531 129.523 35.2578 130.023 35.2578C131.062 35.2578 131.835 36.0312 131.835 37.1172C131.835 38.2578 130.968 39.0781 129.694 39.0781ZM136.285 33.3438H137.449V37.2891C137.449 38.3906 136.675 39.0781 135.535 39.0781C134.511 39.0781 133.707 38.5391 133.714 37.4219H134.886C134.894 37.8672 135.167 38.1328 135.589 38.1328C136.035 38.1328 136.285 37.8438 136.285 37.2891V33.3438ZM140.857 37.1953V34.7578H142.013V39H140.904V38.2344H140.857C140.662 38.7266 140.209 39.0547 139.568 39.0547C138.717 39.0547 138.138 38.4531 138.138 37.4609V34.7578H139.295V37.2578C139.295 37.7578 139.584 38.0781 140.037 38.0781C140.459 38.0781 140.857 37.7734 140.857 37.1953ZM143.828 36.5469V39H142.672V34.7578H143.773V35.5H143.82C144.016 35.0078 144.469 34.7031 145.094 34.7031C145.977 34.7031 146.562 35.3047 146.555 36.2969V39H145.406V36.5C145.406 35.9766 145.117 35.6641 144.641 35.6641C144.156 35.6641 143.828 35.9844 143.828 36.5469Z"
+      />
+      <path
+        clipRule="evenodd"
+        d="M96.5272 33.2257C96.7132 33.4155 96.7132 33.7233 96.5272 33.9132L94.483 36L96.5272 38.0868C96.7132 38.2766 96.7132 38.5844 96.5272 38.7743C96.3413 38.9641 96.0398 38.9641 95.8538 38.7743L93.4728 36.3437C93.2869 36.1539 93.2869 35.8461 93.4728 35.6562L95.8538 33.2257C96.0398 33.0359 96.3413 33.0359 96.5272 33.2257Z"
+        fill="#A9A8AB"
+        fillRule="evenodd"
+      />
+      <path
+        clipRule="evenodd"
+        d="M163.473 33.2257C163.287 33.4155 163.287 33.7233 163.473 33.9132L165.517 36L163.473 38.0868C163.287 38.2766 163.287 38.5844 163.473 38.7743C163.659 38.9641 163.96 38.9641 164.146 38.7743L166.527 36.3437C166.713 36.1539 166.713 35.8461 166.527 35.6562L164.146 33.2257C163.96 33.0359 163.659 33.0359 163.473 33.2257Z"
+        fill="#A9A8AB"
+        fillRule="evenodd"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="90"
+        y="50"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="102"
+        y="50"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="114"
+        y="50"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="126"
+        y="50"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="138"
+        y="50"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="150"
+        y="50"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="162"
+        y="50"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="90"
+        y="62"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="102"
+        y="62"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="114"
+        y="62"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="126"
+        y="62"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="138"
+        y="62"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="150"
+        y="62"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="162"
+        y="62"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="90"
+        y="74"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="102"
+        y="74"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="114"
+        y="74"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="126"
+        y="74"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="138"
+        y="74"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="150"
+        y="74"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="162"
+        y="74"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="90"
+        y="86"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="102"
+        y="86"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="114"
+        y="86"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="126"
+        y="86"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="138"
+        y="86"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="150"
+        y="86"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="162"
+        y="86"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="90"
+        y="98"
+      />
+      <rect
+        fill={theme === 'light' ? '#C9C9C9' : '#636363'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="102"
+        y="98"
+      />
+      <rect
+        fill={theme === 'light' ? '#F2F2F2' : '#343333'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="114"
+        y="98"
+      />
+      <rect
+        fill={theme === 'light' ? '#F2F2F2' : '#343333'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="126"
+        y="98"
+      />
+      <rect
+        fill={theme === 'light' ? '#F2F2F2' : '#343333'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="138"
+        y="98"
+      />
+      <rect
+        fill={theme === 'light' ? '#F2F2F2' : '#343333'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="150"
+        y="98"
+      />
+      <rect
+        fill={theme === 'light' ? '#F2F2F2' : '#343333'}
+        height="8"
+        opacity="0.7"
+        rx="2"
+        width="8"
+        x="162"
+        y="98"
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconDropdownComp.tsx b/apps/landing/src/components/icons/components/IconDropdownComp.tsx
new file mode 100644
index 00000000..ca3f0670
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconDropdownComp.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import { css, useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconDropdownComp({
+  className,
+  ...props
+}: {
+  className?: string
+  props?: SVGProps<SVGSVGElement>
+}) {
+  const theme = useTheme()
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 260 140"
+      width="260"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        height="35"
+        rx="7.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="173"
+        x="43.5"
+        y="14.5"
+      />
+      <rect
+        height="71"
+        rx="7.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="173"
+        x="43.5"
+        y="54.5"
+      />
+      <path
+        d="M60.6094 30.2812C60.3984 29.1914 59.4961 28.582 58.418 28.582C56.9531 28.582 55.8633 29.707 55.8633 31.7578C55.8633 33.8203 56.9648 34.9336 58.418 34.9336C59.4844 34.9336 60.3867 34.3359 60.6094 33.2578L61.9102 33.2695C61.6406 34.9453 60.2695 36.1172 58.4062 36.1172C56.1914 36.1172 54.5859 34.4648 54.5859 31.7578C54.5859 29.0391 56.2031 27.3984 58.4062 27.3984C60.1992 27.3984 61.6172 28.4531 61.9102 30.2812H60.6094ZM64.0931 32.2266V36H62.8392V27.5156H64.0697V30.6797H64.1517C64.4564 29.9883 65.0423 29.5547 66.0384 29.5547C67.3509 29.5547 68.2181 30.3633 68.2181 31.957V36H66.9642V32.1094C66.9642 31.1719 66.4603 30.6328 65.6166 30.6328C64.7377 30.6328 64.0931 31.207 64.0931 32.2266ZM72.0652 36.1289C70.2605 36.1289 69.0886 34.8164 69.0886 32.8477C69.0886 30.8672 70.2605 29.5547 72.0652 29.5547C73.8581 29.5547 75.03 30.8672 75.03 32.8477C75.03 34.8164 73.8581 36.1289 72.0652 36.1289ZM72.0652 35.0859C73.2136 35.0859 73.7644 34.0664 73.7644 32.8477C73.7644 31.6289 73.2136 30.5859 72.0652 30.5859C70.8933 30.5859 70.3425 31.6289 70.3425 32.8477C70.3425 34.0664 70.8933 35.0859 72.0652 35.0859ZM78.5958 36.1289C76.7911 36.1289 75.6192 34.8164 75.6192 32.8477C75.6192 30.8672 76.7911 29.5547 78.5958 29.5547C80.3888 29.5547 81.5606 30.8672 81.5606 32.8477C81.5606 34.8164 80.3888 36.1289 78.5958 36.1289ZM78.5958 35.0859C79.7442 35.0859 80.295 34.0664 80.295 32.8477C80.295 31.6289 79.7442 30.5859 78.5958 30.5859C77.4239 30.5859 76.8731 31.6289 76.8731 32.8477C76.8731 34.0664 77.4239 35.0859 78.5958 35.0859ZM86.0053 31.3711C85.8881 30.8672 85.4897 30.5391 84.7983 30.5391C84.0834 30.5391 83.5678 30.9141 83.5795 31.3945C83.5678 31.7695 83.8725 32.0391 84.5756 32.2031L85.5834 32.4375C86.7553 32.6953 87.3178 33.2578 87.3295 34.1602C87.3178 35.3086 86.3569 36.1289 84.728 36.1289C83.2045 36.1289 82.2905 35.4492 82.1381 34.2656H83.4155C83.5209 34.8398 83.9662 35.1211 84.7162 35.1211C85.5248 35.1211 86.0405 34.793 86.0522 34.2539C86.0405 33.8438 85.7358 33.5742 85.0678 33.4219L84.0717 33.2109C82.9233 32.9531 82.3256 32.3438 82.3256 31.4648C82.3256 30.3281 83.31 29.5547 84.7866 29.5547C86.2045 29.5547 87.0834 30.2812 87.2123 31.3711H86.0053ZM90.9305 36.1289C89.0555 36.1289 87.907 34.8398 87.907 32.8594C87.907 30.9023 89.0789 29.5547 90.8484 29.5547C92.3016 29.5547 93.6727 30.457 93.6727 32.7539V33.1992H89.1492C89.1844 34.4062 89.8934 35.0977 90.9422 35.0977C91.657 35.0977 92.1141 34.793 92.325 34.4062H93.5906C93.3094 35.4375 92.325 36.1289 90.9305 36.1289ZM89.1609 32.2617H92.4422C92.4422 31.2891 91.8211 30.5859 90.8602 30.5859C89.8582 30.5859 89.2078 31.3594 89.1609 32.2617ZM104.601 31.7578C104.601 34.4648 102.972 36.1172 100.781 36.1172C98.5659 36.1172 96.9487 34.4648 96.9487 31.7578C96.9487 29.0391 98.5659 27.3984 100.781 27.3984C102.972 27.3984 104.601 29.0391 104.601 31.7578ZM103.324 31.7578C103.324 29.6953 102.234 28.582 100.781 28.582C99.3159 28.582 98.2261 29.6953 98.2261 31.7578C98.2261 33.8203 99.3159 34.9336 100.781 34.9336C102.234 34.9336 103.324 33.8203 103.324 31.7578ZM106.843 32.2266V36H105.589V29.6367H106.796V30.6797H106.866C107.171 30 107.792 29.5547 108.741 29.5547C110.054 29.5547 110.909 30.375 110.909 31.957V36H109.667V32.1094C109.667 31.1836 109.163 30.6328 108.319 30.6328C107.464 30.6328 106.843 31.207 106.843 32.2266ZM114.815 36.1289C112.94 36.1289 111.791 34.8398 111.791 32.8594C111.791 30.9023 112.963 29.5547 114.733 29.5547C116.186 29.5547 117.557 30.457 117.557 32.7539V33.1992H113.033C113.069 34.4062 113.778 35.0977 114.826 35.0977C115.541 35.0977 115.998 34.793 116.209 34.4062H117.475C117.194 35.4375 116.209 36.1289 114.815 36.1289ZM113.045 32.2617H116.326C116.326 31.2891 115.705 30.5859 114.744 30.5859C113.742 30.5859 113.092 31.3594 113.045 32.2617Z"
+        fill={theme === 'light' ? '#999' : '#4C4C4C'}
+      />
+      <path
+        clipRule="evenodd"
+        d="M198.806 30.1464C198.992 29.9512 199.294 29.9512 199.48 30.1464L202 32.7929L204.52 30.1464C204.706 29.9512 205.008 29.9512 205.194 30.1464C205.38 30.3417 205.38 30.6583 205.194 30.8536L202.337 33.8536C202.151 34.0488 201.849 34.0488 201.663 33.8536L198.806 30.8536C198.62 30.6583 198.62 30.3417 198.806 30.1464Z"
+        fill="#272727"
+        fillRule="evenodd"
+      />
+      <rect
+        fill={theme === 'light' ? '#ECECEC' : '#3A3A3A'}
+        height="30"
+        rx="5"
+        width="166"
+        x="47"
+        y="58"
+      />
+      <rect
+        className={css({ fill: '$text' })}
+        height="8"
+        opacity="0.4"
+        rx="2"
+        width="100"
+        x="54"
+        y="69"
+      />
+      <rect
+        className={css({ fill: '$text' })}
+        height="8"
+        opacity="0.4"
+        rx="2"
+        width="86"
+        x="54"
+        y="102"
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconFooterComp.tsx b/apps/landing/src/components/icons/components/IconFooterComp.tsx
new file mode 100644
index 00000000..8e3b517b
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconFooterComp.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import { css, useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconFooterComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  const theme = useTheme()
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 259 140"
+      width="259"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        height="94"
+        rx="7.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="173"
+        x="42.5"
+        y="23.5"
+      />
+      <path
+        d="M42 31C42 26.5817 45.5817 23 50 23H208C212.418 23 216 26.5817 216 31V36H42V31Z"
+        fill="#363636"
+      />
+      <circle cx="51" cy="30" fill="#E13953" r="3" />
+      <circle cx="60" cy="30" fill="#F4DF44" r="3" />
+      <circle cx="69" cy="30" fill="#4FBD56" r="3" />
+      <rect
+        fill={theme === 'light' ? '#ECECEC' : '#3a3a3a'}
+        height="8"
+        rx="2"
+        width="60"
+        x="60"
+        y="44"
+      />
+      <rect
+        fill={theme === 'light' ? '#ECECEC' : '#3a3a3a'}
+        height="28"
+        rx="2"
+        width="138"
+        x="60"
+        y="58"
+      />
+      <path
+        className={css({ fill: '$primary' })}
+        d="M42 97H216V110C216 114.418 212.418 118 208 118H50C45.5817 118 42 114.418 42 110V97Z"
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconHeaderComp.tsx b/apps/landing/src/components/icons/components/IconHeaderComp.tsx
new file mode 100644
index 00000000..5fbd660a
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconHeaderComp.tsx
@@ -0,0 +1,65 @@
+'use client'
+
+import { css, useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconHeaderComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  const theme = useTheme()
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 259 140"
+      width="259"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M43 102H217V110C217 114.418 213.418 118 209 118H51C46.5817 118 43 114.418 43 110V102Z"
+        fill={theme === 'light' ? '#ECECEC' : '#3a3a3a'}
+      />
+      <rect
+        height="94"
+        rx="7.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="173"
+        x="43.5"
+        y="23.5"
+      />
+      <path
+        d="M43 31C43 26.5817 46.5817 23 51 23H209C213.418 23 217 26.5817 217 31V36H43V31Z"
+        fill="#363636"
+      />
+      <circle cx="52" cy="30" fill="#E13953" r="3" />
+      <circle cx="61" cy="30" fill="#F4DF44" r="3" />
+      <circle cx="70" cy="30" fill="#4FBD56" r="3" />
+      <rect
+        fill={theme === 'light' ? '#ECECEC' : '#3a3a3a'}
+        height="8"
+        rx="2"
+        width="60"
+        x="61"
+        y="54"
+      />
+      <rect
+        fill={theme === 'light' ? '#ECECEC' : '#3a3a3a'}
+        height="28"
+        rx="2"
+        width="138"
+        x="61"
+        y="68"
+      />
+      <rect
+        className={css({ fill: '$primary' })}
+        height="10"
+        width="174"
+        x="43"
+        y="36"
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconLabelComp.tsx b/apps/landing/src/components/icons/components/IconLabelComp.tsx
new file mode 100644
index 00000000..1ec314aa
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconLabelComp.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+import { useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconLabelComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  const theme = useTheme()
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 260 140"
+      width="260"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M103.65 49.9544C103.855 49.2958 103.957 48.8321 103.957 48.5635C103.957 48.295 103.908 48.1127 103.809 48.0168C102.905 48.0168 102.252 48.0647 101.849 48.1607L101.838 48.2854L101.94 48.4005C102.138 48.6371 102.236 48.8897 102.236 49.1583C102.236 49.3373 102.142 49.7274 101.952 50.3285C101.762 50.9233 101.667 51.3389 101.667 51.5755C101.667 51.8058 101.743 51.9912 101.895 52.1319C102.047 52.2662 102.255 52.3333 102.521 52.3333C102.787 52.3333 103.076 52.2694 103.387 52.1415C103.699 52.0072 103.912 51.9017 104.026 51.8249C104.14 51.7482 104.231 51.6843 104.299 51.6331L104.105 51.2974L103.969 51.3549C103.665 51.4764 103.49 51.5372 103.444 51.5372C103.376 51.5372 103.342 51.438 103.342 51.2398C103.342 51.0352 103.444 50.6067 103.65 49.9544Z"
+        fill="#9B9BA6"
+      />
+      <path
+        d="M102.43 46.4628C102.43 46.6739 102.506 46.8433 102.658 46.9712C102.81 47.0927 103.019 47.1535 103.285 47.1535C103.551 47.1535 103.79 47.0735 104.003 46.9137C104.223 46.7538 104.333 46.5715 104.333 46.3669C104.333 46.1559 104.257 45.9864 104.105 45.8585C103.953 45.7306 103.741 45.6667 103.467 45.6667C103.194 45.6667 102.951 45.7466 102.738 45.9065C102.533 46.0663 102.43 46.2518 102.43 46.4628Z"
+        fill="#9B9BA6"
+      />
+      <path
+        clipRule="evenodd"
+        d="M103 55C106.314 55 109 52.3137 109 49C109 45.6863 106.314 43 103 43C99.6863 43 97 45.6863 97 49C97 52.3137 99.6863 55 103 55ZM107.667 49C107.667 51.5773 105.577 53.6667 103 53.6667C100.423 53.6667 98.3333 51.5773 98.3333 49C98.3333 46.4227 100.423 44.3333 103 44.3333C105.577 44.3333 107.667 46.4227 107.667 49Z"
+        fill="#9B9BA6"
+        fillRule="evenodd"
+      />
+      <rect fill="#6159D4" height="8" rx="2" width="48" x="43" y="45" />
+      <rect
+        height="35"
+        rx="7.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="173"
+        x="43.5"
+        y="64.5"
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconMenuComp.tsx b/apps/landing/src/components/icons/components/IconMenuComp.tsx
new file mode 100644
index 00000000..33c34eae
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconMenuComp.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import { css, useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconMenuComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  const theme = useTheme()
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 260 140"
+      width="260"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        fill={theme === 'light' ? '#FBFBFB' : '#262626'}
+        height="108"
+        rx="4"
+        width="140"
+        x="60"
+        y="16"
+      />
+      <rect
+        fill={theme === 'light' ? '#EDECF7' : '#3f3f3f'}
+        height="30"
+        rx="5"
+        width="130"
+        x="65"
+        y="53"
+      />
+      <rect
+        className={css({ fill: '$text' })}
+        height="8"
+        opacity="0.4"
+        rx="2"
+        width="66"
+        x="74"
+        y="30"
+      />
+      <rect
+        className={css({ fill: '$text' })}
+        height="8"
+        opacity="0.4"
+        rx="2"
+        width="66"
+        x="74"
+        y="64"
+      />
+      <rect
+        className={css({ fill: '$text' })}
+        height="8"
+        opacity="0.4"
+        rx="2"
+        width="66"
+        x="74"
+        y="98"
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconPagination.tsx b/apps/landing/src/components/icons/components/IconPagination.tsx
new file mode 100644
index 00000000..6eca1f17
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconPagination.tsx
@@ -0,0 +1,89 @@
+'use client'
+
+import { css, useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconPagination({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  const theme = useTheme()
+
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 260 140"
+      width="260"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        height="29"
+        rx="7.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="29"
+        x="47.5"
+        y="55.5"
+      />
+      <path
+        className={css({ fill: '$text' })}
+        clipRule="evenodd"
+        d="M63.7803 65.2092C64.0732 65.4882 64.0732 65.9404 63.7803 66.2194L59.8107 70L63.7803 73.7806C64.0732 74.0596 64.0732 74.5118 63.7803 74.7908C63.4874 75.0697 63.0126 75.0697 62.7197 74.7908L58.2197 70.5051C57.9268 70.2261 57.9268 69.7739 58.2197 69.4949L62.7197 65.2092C63.0126 64.9303 63.4874 64.9303 63.7803 65.2092Z"
+        fillRule="evenodd"
+      />
+      <rect
+        height="29"
+        rx="7.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="29"
+        x="81.5"
+        y="55.5"
+      />
+      <path
+        className={css({ fill: '$text' })}
+        d="M97.3398 64.6016V74.5H95.5488V66.3379H95.4941L93.1836 67.8145V66.1875L95.6309 64.6016H97.3398Z"
+      />
+      <rect
+        className={css({ fill: '$menuActive' })}
+        height="30"
+        rx="8"
+        width="30"
+        x="115"
+        y="55"
+      />
+      <path
+        className={css({ fill: '$primary' })}
+        d="M125.718 75V72.9932L129.658 69.6826C130.464 68.9941 130.962 68.4961 130.962 67.7344C130.962 66.9141 130.376 66.4014 129.556 66.4014C128.735 66.4014 128.179 66.9141 128.179 67.8223H125.527C125.527 65.6104 127.124 64.248 129.556 64.248C132.061 64.248 133.672 65.5371 133.672 67.5C133.672 68.7305 133.057 69.7705 130.669 71.7773L129.6 72.7002V72.7588H133.789V75H125.718Z"
+      />
+      <rect
+        height="29"
+        rx="7.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="29"
+        x="149.5"
+        y="55.5"
+      />
+      <path
+        className={css({ fill: '$text' })}
+        d="M163.916 74.6367C161.797 74.6367 160.293 73.4883 160.252 71.8203H162.043C162.098 72.6133 162.891 73.1328 163.916 73.1328C165.01 73.1328 165.789 72.5312 165.789 71.6562C165.789 70.7676 165.023 70.125 163.738 70.125H162.85V68.7578H163.738C164.791 68.7578 165.529 68.1699 165.516 67.3086C165.529 66.4746 164.9 65.9141 163.93 65.9141C163 65.9141 162.193 66.4336 162.166 67.2676H160.457C160.498 65.5996 162.002 64.4648 163.943 64.4648C165.953 64.4648 167.252 65.6953 167.238 67.2129C167.252 68.3203 166.514 69.127 165.434 69.3457V69.4277C166.828 69.6191 167.621 70.5078 167.607 71.752C167.621 73.4199 166.062 74.6367 163.916 74.6367Z"
+      />
+      <rect
+        height="29"
+        rx="7.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        transform="rotate(-180 212.5 84.5)"
+        width="29"
+        x="212.5"
+        y="84.5"
+      />
+      <path
+        className={css({ fill: '$text' })}
+        clipRule="evenodd"
+        d="M196.22 74.7908C195.927 74.5118 195.927 74.0596 196.22 73.7806L200.189 70L196.22 66.2194C195.927 65.9404 195.927 65.4882 196.22 65.2092C196.513 64.9303 196.987 64.9303 197.28 65.2092L201.78 69.4949C202.073 69.7739 202.073 70.2261 201.78 70.5051L197.28 74.7908C196.987 75.0697 196.513 75.0697 196.22 74.7908Z"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconProgressBar.tsx b/apps/landing/src/components/icons/components/IconProgressBar.tsx
new file mode 100644
index 00000000..cc8b98ec
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconProgressBar.tsx
@@ -0,0 +1,82 @@
+'use client'
+
+import { css, useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconProgressBar({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  const theme = useTheme()
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 260 140"
+      width="260"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_560_2677)">
+        <rect
+          className={css({ fill: '$primary' })}
+          height="6"
+          rx="2"
+          width="23.3333"
+          x="50"
+          y="68"
+        />
+        <rect
+          className={css({ fill: '$primary' })}
+          height="6"
+          rx="2"
+          width="23.3333"
+          x="77.3334"
+          y="68"
+        />
+        <rect
+          className={css({ fill: '$primary' })}
+          height="6"
+          rx="2"
+          width="23.3333"
+          x="104.667"
+          y="68"
+        />
+        <rect
+          fill={theme === 'light' ? '#DADADA' : '#444'}
+          height="6"
+          rx="2"
+          width="23.3333"
+          x="132"
+          y="68"
+        />
+        <rect
+          fill={theme === 'light' ? '#DADADA' : '#444'}
+          height="6"
+          rx="2"
+          width="23.3333"
+          x="159.333"
+          y="68"
+        />
+        <rect
+          fill={theme === 'light' ? '#DADADA' : '#444'}
+          height="6"
+          rx="2"
+          width="23.3333"
+          x="186.667"
+          y="68"
+        />
+      </g>
+      <path
+        d="M195.357 59.1172C193.599 59.1172 192.345 58.168 192.298 56.7852H193.611C193.657 57.5352 194.396 58.0039 195.345 58.0039C196.365 58.0039 197.115 57.4414 197.115 56.6211C197.115 55.7891 196.411 55.1797 195.204 55.1797H194.478V54.125H195.204C196.165 54.125 196.845 53.5859 196.845 52.7773C196.845 52.0039 196.271 51.4766 195.368 51.4766C194.513 51.4766 193.763 51.9453 193.728 52.7188H192.486C192.521 51.3359 193.798 50.3984 195.38 50.3984C197.044 50.3984 198.099 51.4531 198.087 52.707C198.099 53.668 197.501 54.3711 196.587 54.5938V54.6523C197.747 54.8164 198.415 55.5898 198.415 56.668C198.415 58.0859 197.115 59.1172 195.357 59.1172ZM202.719 50.1172L199.989 60.2773H198.876L201.606 50.1172H202.719ZM206.344 59.1172C204.773 59.1055 203.133 58.1797 203.133 55.0391C203.133 52.0859 204.41 50.3984 206.449 50.3984C208.008 50.3984 209.098 51.3711 209.297 52.7188H208.02C207.855 52.0273 207.305 51.5234 206.449 51.5234C205.137 51.5234 204.375 52.6719 204.375 54.582H204.469C204.926 53.8672 205.723 53.4336 206.648 53.4336C208.16 53.4336 209.379 54.5938 209.379 56.2227C209.379 57.8633 208.172 59.1289 206.344 59.1172ZM206.332 58.0391C207.363 58.0391 208.125 57.2422 208.125 56.2461C208.125 55.2734 207.387 54.4883 206.367 54.4883C205.324 54.4883 204.539 55.3086 204.527 56.2578C204.539 57.1953 205.289 58.0391 206.332 58.0391Z"
+        fill={theme === 'light' ? '#999999' : '#4C4C4C'}
+      />
+      <defs>
+        <clipPath id="clip0_560_2677">
+          <rect fill="white" height="6" rx="3" width="160" x="50" y="68" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconRadioComp.tsx b/apps/landing/src/components/icons/components/IconRadioComp.tsx
new file mode 100644
index 00000000..182e033b
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconRadioComp.tsx
@@ -0,0 +1,75 @@
+'use client'
+
+import { css, useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconRadioComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  const theme = useTheme()
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 259 140"
+      width="259"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        height="17"
+        rx="8.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="17"
+        x="67.5"
+        y="33.5"
+      />
+      <rect
+        className={css({ fill: '$text' })}
+        height="8"
+        opacity="0.4"
+        rx="2"
+        width="100"
+        x="93"
+        y="38"
+      />
+      <rect
+        className={css({ stroke: '$primary' })}
+        height="17"
+        rx="8.5"
+        width="17"
+        x="67.5"
+        y="61.5"
+      />
+      <circle className={css({ fill: '$primary' })} cx="76" cy="70" r="6" />
+      <rect
+        className={css({ fill: '$text' })}
+        height="8"
+        opacity="0.4"
+        rx="2"
+        width="100"
+        x="93"
+        y="66"
+      />
+      <rect
+        height="17"
+        rx="8.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="17"
+        x="67.5"
+        y="89.5"
+      />
+      <rect
+        className={css({ fill: '$text' })}
+        height="8"
+        opacity="0.4"
+        rx="2"
+        width="100"
+        x="93"
+        y="94"
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconSearchComp.tsx b/apps/landing/src/components/icons/components/IconSearchComp.tsx
new file mode 100644
index 00000000..08cb5509
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconSearchComp.tsx
@@ -0,0 +1,42 @@
+'use client'
+
+import { css, useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconSearchComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  const theme = useTheme()
+
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 259 140"
+      width="259"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        height="35"
+        rx="7.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="173"
+        x="43.5"
+        y="52.5"
+      />
+      <path
+        className={css({ fill: '$caption' })}
+        clipRule="evenodd"
+        d="M61.0838 73.3291C60.2042 73.8962 59.1633 74.2241 58.0477 74.2241C54.8917 74.2241 52.3334 71.5996 52.3334 68.3621C52.3334 65.1245 54.8917 62.5 58.0477 62.5C61.2036 62.5 63.7619 65.1245 63.7619 68.3621C63.7619 69.7537 63.2893 71.032 62.4996 72.0374C62.5101 72.0472 62.5205 72.0573 62.5306 72.0678L65.3878 74.9988C65.7597 75.3804 65.7597 75.999 65.3878 76.3805C65.0158 76.7621 64.4128 76.7621 64.0409 76.3805L61.1837 73.4495C61.1468 73.4115 61.1135 73.3713 61.0838 73.3291ZM62.5119 68.3621C62.5119 70.9395 60.4833 72.9741 58.0477 72.9741C55.612 72.9741 53.5834 70.9395 53.5834 68.3621C53.5834 65.7846 55.612 63.75 58.0477 63.75C60.4833 63.75 62.5119 65.7846 62.5119 68.3621Z"
+        fillRule="evenodd"
+      />
+      <path
+        d="M79.8148 74V65.5156H82.8383C84.807 65.5156 85.7797 66.6992 85.7797 68.2695C85.7797 69.8281 84.807 71.0234 82.8383 71.0234H81.1039V74H79.8148ZM81.1039 69.9219H82.7094C83.9633 69.9219 84.4789 69.2188 84.4789 68.2695C84.4789 67.3086 83.9633 66.6172 82.7094 66.6172H81.1039V69.9219ZM87.9275 65.5156V74H86.6736V65.5156H87.9275ZM88.798 72.207C88.798 70.7539 90.0284 70.3789 91.1769 70.2969C91.5987 70.2676 92.5538 70.2148 92.8527 70.2031L92.8409 69.6992C92.8409 68.9844 92.4073 68.5625 91.5519 68.5625C90.8136 68.5625 90.3683 68.9023 90.2394 69.3711H88.9972C89.1144 68.3164 90.0987 67.5547 91.5987 67.5547C92.6066 67.5547 94.0948 67.9297 94.0948 69.7695V74H92.8761V73.1328H92.8292C92.5831 73.6133 91.9972 74.1406 90.9425 74.1406C89.7355 74.1406 88.798 73.4492 88.798 72.207ZM90.0167 72.2188C90.0167 72.8281 90.5206 73.1445 91.2237 73.1445C92.2433 73.1445 92.8527 72.4648 92.8527 71.7031V71.1172L91.3527 71.2227C90.5323 71.2812 90.0167 71.5859 90.0167 72.2188ZM97.9419 74.1289C96.0903 74.1289 94.9653 72.7578 94.9653 70.8477C94.9653 68.9023 96.1255 67.5547 97.9184 67.5547C99.3716 67.5547 100.426 68.4102 100.555 69.6992H99.3364C99.2075 69.1016 98.727 68.5977 97.9419 68.5977C96.9106 68.5977 96.2192 69.4531 96.2192 70.8125C96.2192 72.207 96.8989 73.0625 97.9419 73.0625C98.645 73.0625 99.1841 72.6758 99.3364 71.9844H100.555C100.415 73.2148 99.4419 74.1289 97.9419 74.1289ZM104.121 74.1289C102.246 74.1289 101.097 72.8398 101.097 70.8594C101.097 68.9023 102.269 67.5547 104.039 67.5547C105.492 67.5547 106.863 68.457 106.863 70.7539V71.1992H102.34C102.375 72.4062 103.084 73.0977 104.133 73.0977C104.847 73.0977 105.305 72.793 105.515 72.4062H106.781C106.5 73.4375 105.515 74.1289 104.121 74.1289ZM102.351 70.2617H105.633C105.633 69.2891 105.012 68.5859 104.051 68.5859C103.049 68.5859 102.398 69.3594 102.351 70.2617ZM108.999 70.2266V74H107.745V65.5156H108.976V68.6797H109.058C109.362 67.9883 109.948 67.5547 110.945 67.5547C112.257 67.5547 113.124 68.3633 113.124 69.957V74H111.87V70.1094C111.87 69.1719 111.366 68.6328 110.523 68.6328C109.644 68.6328 108.999 69.207 108.999 70.2266ZM116.971 74.1289C115.167 74.1289 113.995 72.8164 113.995 70.8477C113.995 68.8672 115.167 67.5547 116.971 67.5547C118.764 67.5547 119.936 68.8672 119.936 70.8477C119.936 72.8164 118.764 74.1289 116.971 74.1289ZM116.971 73.0859C118.12 73.0859 118.67 72.0664 118.67 70.8477C118.67 69.6289 118.12 68.5859 116.971 68.5859C115.799 68.5859 115.249 69.6289 115.249 70.8477C115.249 72.0664 115.799 73.0859 116.971 73.0859ZM122.06 65.5156V74H120.807V65.5156H122.06ZM125.603 74.1289C124.068 74.1289 122.943 72.8867 122.943 70.8359C122.943 68.7617 124.079 67.5547 125.615 67.5547C126.798 67.5547 127.232 68.2695 127.454 68.668H127.513V65.5156H128.767V74H127.548V73.0039H127.454C127.22 73.4258 126.763 74.1289 125.603 74.1289ZM125.884 73.0625C126.95 73.0625 127.548 72.1484 127.548 70.8125C127.548 69.4883 126.962 68.6211 125.884 68.6211C124.771 68.6211 124.22 69.5586 124.22 70.8125C124.22 72.0898 124.794 73.0625 125.884 73.0625ZM132.778 74.1289C130.903 74.1289 129.755 72.8398 129.755 70.8594C129.755 68.9023 130.926 67.5547 132.696 67.5547C134.149 67.5547 135.52 68.457 135.52 70.7539V71.1992H130.997C131.032 72.4062 131.741 73.0977 132.79 73.0977C133.505 73.0977 133.962 72.793 134.172 72.4062H135.438C135.157 73.4375 134.172 74.1289 132.778 74.1289ZM131.008 70.2617H134.29C134.29 69.2891 133.669 68.5859 132.708 68.5859C131.706 68.5859 131.055 69.3594 131.008 70.2617ZM136.402 74V67.6367H137.609V68.6445H137.68C137.914 67.9648 138.547 67.543 139.297 67.543C139.449 67.543 139.695 67.5547 139.824 67.5664V68.7617C139.719 68.7383 139.426 68.6914 139.168 68.6914C138.301 68.6914 137.656 69.2891 137.656 70.1211V74H136.402Z"
+        fill={theme === 'light' ? '#999999' : '#4c4c4c'}
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconSelectComp.tsx b/apps/landing/src/components/icons/components/IconSelectComp.tsx
new file mode 100644
index 00000000..82495bca
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconSelectComp.tsx
@@ -0,0 +1,56 @@
+'use client'
+
+import { css, useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconSelectComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  const theme = useTheme()
+  return (
+    <svg
+      fill="none"
+      height="140"
+      viewBox="0 0 259 140"
+      width="259"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        height="71"
+        rx="7.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="173"
+        x="42.5"
+        y="34.5"
+      />
+      <rect
+        fill={theme === 'light' ? '#ECECEC' : '#3A3A3A'}
+        height="30"
+        rx="5"
+        width="166"
+        x="46"
+        y="38"
+      />
+      <rect
+        className={css({ fill: '$text' })}
+        height="8"
+        opacity="0.4"
+        rx="2"
+        width="100"
+        x="53"
+        y="49"
+      />
+      <rect
+        className={css({ fill: '$text' })}
+        height="8"
+        opacity="0.4"
+        rx="2"
+        width="86"
+        x="53"
+        y="82"
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconSliderComp.tsx b/apps/landing/src/components/icons/components/IconSliderComp.tsx
new file mode 100644
index 00000000..767af99e
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconSliderComp.tsx
@@ -0,0 +1,84 @@
+'use client'
+
+import { css } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconSliderComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 260 140"
+      width="260"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        className={css({ fill: '$border' })}
+        height="6"
+        rx="3"
+        width="180"
+        x="40"
+        y="67"
+      />
+      <rect
+        className={css({ fill: '$primary' })}
+        height="6"
+        width="120"
+        x="40"
+        y="67"
+      />
+      <circle
+        className={css({ fill: '$primary' })}
+        cx="160"
+        cy="70.5"
+        fillOpacity="0.2"
+        r="16"
+      />
+      <g filter="url(#filter0_d_560_2659)">
+        <circle cx="160" cy="70.5" fill="white" r="8" />
+      </g>
+      <defs>
+        <filter
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+          height="24"
+          id="filter0_d_560_2659"
+          width="24"
+          x="148"
+          y="58.5"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            result="hardAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+          />
+          <feBlend
+            in2="BackgroundImageFix"
+            mode="normal"
+            result="effect1_dropShadow_560_2659"
+          />
+          <feBlend
+            in="SourceGraphic"
+            in2="effect1_dropShadow_560_2659"
+            mode="normal"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconSnackbarComp.tsx b/apps/landing/src/components/icons/components/IconSnackbarComp.tsx
new file mode 100644
index 00000000..87fa4731
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconSnackbarComp.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import { SVGProps } from 'react'
+
+export default function IconSnackbarComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 260 140"
+      width="260"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        fill="#29292C"
+        fillOpacity="0.8"
+        height="28"
+        rx="4"
+        width="174"
+        x="43"
+        y="39"
+      />
+      <circle cx="58" cy="53" fill="#3AAE6E" r="6.66667" />
+      <path
+        clipRule="evenodd"
+        d="M61.3068 50.8984C61.7311 51.252 61.7884 51.8826 61.4349 52.3068L58.1015 56.3068C57.9217 56.5227 57.6593 56.6529 57.3786 56.6656C57.098 56.6784 56.8249 56.5724 56.6262 56.3738L54.6262 54.3738C54.2357 53.9832 54.2357 53.3501 54.6262 52.9595C55.0167 52.569 55.6499 52.569 56.0404 52.9595L57.2661 54.1852L59.8984 51.0265C60.252 50.6022 60.8826 50.5449 61.3068 50.8984Z"
+        fill="white"
+        fillRule="evenodd"
+      />
+      <rect
+        fill="#29292C"
+        fillOpacity="0.8"
+        height="28"
+        rx="4"
+        width="174"
+        x="43"
+        y="73"
+      />
+      <circle cx="58" cy="87" fill="#F64E4E" r="6.66667" />
+      <path
+        d="M59.7812 83.9326C60.1363 83.5777 60.7124 83.5776 61.0674 83.9326C61.4224 84.2876 61.4223 84.8637 61.0674 85.2187L59.2861 87L61.0674 88.7812C61.4223 89.1363 61.4224 89.7124 61.0674 90.0674C60.7124 90.4224 60.1363 90.4223 59.7812 90.0674L58 88.2861L56.2187 90.0674C55.8637 90.4223 55.2876 90.4224 54.9326 90.0674C54.5776 89.7124 54.5777 89.1363 54.9326 88.7812L56.7139 87L54.9326 85.2187C54.5777 84.8637 54.5776 84.2876 54.9326 83.9326C55.2876 83.5776 55.8637 83.5777 56.2187 83.9326L58 85.7139L59.7812 83.9326Z"
+        fill="white"
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconStepperComp.tsx b/apps/landing/src/components/icons/components/IconStepperComp.tsx
new file mode 100644
index 00000000..f0938cf6
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconStepperComp.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import { css, useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconStepperComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  const theme = useTheme()
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 260 140"
+      width="260"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        height="27"
+        rx="5.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="27"
+        x="64.5"
+        y="56.5"
+      />
+      <path
+        className={css({ fill: '$title' })}
+        clipRule="evenodd"
+        d="M73 70C73 69.4477 73.3731 69 73.8333 69H82.1667C82.6269 69 83 69.4477 83 70C83 70.5523 82.6269 71 82.1667 71H73.8333C73.3731 71 73 70.5523 73 70Z"
+        fillRule="evenodd"
+      />
+      <rect
+        height="35"
+        rx="7.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="59"
+        x="100.5"
+        y="52.5"
+      />
+      <rect
+        height="27"
+        rx="5.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="27"
+        x="168.5"
+        y="56.5"
+      />
+      <path
+        className={css({ fill: '$title' })}
+        d="M182.833 65.8333C182.833 65.3731 182.46 65 182 65C181.54 65 181.167 65.3731 181.167 65.8333V69.1667H177.833C177.373 69.1667 177 69.5398 177 70C177 70.4602 177.373 70.8333 177.833 70.8333H181.167V74.1667C181.167 74.6269 181.54 75 182 75C182.46 75 182.833 74.6269 182.833 74.1667V70.8333H186.167C186.627 70.8333 187 70.4602 187 70C187 69.5398 186.627 69.1667 186.167 69.1667H182.833V65.8333Z"
+      />
+      <path
+        className={css({ fill: '$text' })}
+        d="M127.547 65.5156V74H126.247V66.8047H126.2L124.172 68.1289V66.8984L126.282 65.5156H127.547ZM132.297 74.1172C130.328 74.1172 129.18 72.5352 129.18 69.7578C129.18 67.0039 130.352 65.3984 132.297 65.3984C134.242 65.3984 135.414 67.0039 135.414 69.7578C135.414 72.5352 134.254 74.1172 132.297 74.1172ZM132.297 73.0039C133.445 73.0039 134.125 71.8789 134.125 69.7578C134.125 67.6484 133.434 66.4883 132.297 66.4883C131.16 66.4883 130.469 67.6484 130.469 69.7578C130.469 71.8789 131.148 73.0039 132.297 73.0039Z"
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconTabComp.tsx b/apps/landing/src/components/icons/components/IconTabComp.tsx
new file mode 100644
index 00000000..17241d43
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconTabComp.tsx
@@ -0,0 +1,50 @@
+'use client'
+
+import { SVGProps } from 'react'
+
+export default function IconTabComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 260 140"
+      width="260"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask
+        fill="black"
+        height="32"
+        id="path-1-outside-1_560_2773"
+        maskUnits="userSpaceOnUse"
+        width="50"
+        x="54.5"
+        y="55"
+      >
+        <rect fill="white" height="32" width="50" x="54.5" y="55" />
+        <path d="M54.5 55H104.5V85H54.5V55Z" />
+      </mask>
+      <path
+        d="M104.5 85V83H54.5V85V87H104.5V85Z"
+        fill="#6159D4"
+        mask="url(#path-1-outside-1_560_2773)"
+      />
+      <path
+        d="M66.8867 66.9688V65.5156H73.8359V66.9688H71.2344V74H69.4883V66.9688H66.8867ZM73.4788 72.2188C73.4788 70.8008 74.6272 70.332 75.8459 70.2617C76.303 70.2324 77.1584 70.1914 77.428 70.1797V69.6641C77.4163 69.1367 77.053 68.8203 76.4084 68.8203C75.8225 68.8203 75.4475 69.0898 75.3538 69.5234H73.7014C73.8069 68.4219 74.7678 67.5547 76.4553 67.5547C77.8381 67.5547 79.1506 68.1758 79.1506 69.7109V74H77.51V73.1211H77.4631C77.1467 73.707 76.5491 74.1172 75.5998 74.1172C74.3811 74.1172 73.4788 73.4844 73.4788 72.2188ZM75.1428 72.1719C75.1428 72.6641 75.5413 72.9219 76.092 72.9219C76.8772 72.9219 77.4397 72.3945 77.428 71.7266V71.2578C77.1643 71.2695 76.426 71.3105 76.1272 71.3398C75.5295 71.3984 75.1428 71.6797 75.1428 72.1719ZM80.27 74V65.5156H82.0044V68.7031H82.0513C82.2973 68.1875 82.8013 67.5547 83.8677 67.5547C85.2739 67.5547 86.4575 68.6445 86.4575 70.8242C86.4575 72.9453 85.3208 74.1055 83.8677 74.1055C82.8247 74.1055 82.2973 73.5078 82.0513 72.9805H81.9809V74H80.27ZM81.9692 70.8125C81.9692 71.9609 82.4614 72.7227 83.3169 72.7227C84.2075 72.7227 84.6763 71.9375 84.6763 70.8125C84.6763 69.6992 84.2075 68.9375 83.3169 68.9375C82.4497 68.9375 81.9692 69.6641 81.9692 70.8125ZM90.9753 65.5156V74H89.2058V67.1914H89.1589L87.2136 68.4102V66.8516L89.3113 65.5156H90.9753Z"
+        fill="#6159D4"
+      />
+      <path
+        d="M116.969 66.4531V65.5156H123.367V66.4531H120.707V74H119.641V66.4531H116.969ZM123.113 72.1953C123.113 70.7305 124.402 70.4023 125.503 70.3203C125.908 70.291 126.939 70.2383 127.226 70.2266V69.7109C127.226 68.9023 126.745 68.4336 125.785 68.4336C124.976 68.4336 124.495 68.8086 124.355 69.2891H123.3C123.429 68.2695 124.425 67.5547 125.831 67.5547C126.663 67.5547 128.222 67.8008 128.222 69.8047V74H127.226V73.1328H127.179C126.968 73.5664 126.382 74.1523 125.281 74.1523C124.074 74.1523 123.113 73.4375 123.113 72.1953ZM124.12 72.2422C124.12 72.9102 124.683 73.25 125.456 73.25C126.593 73.25 127.226 72.4883 127.226 71.6914V71.0469L125.62 71.1641C124.706 71.2227 124.12 71.5508 124.12 72.2422ZM129.608 74V65.5156H130.616V68.6445H130.698C130.921 68.3047 131.296 67.5547 132.538 67.5547C134.132 67.5547 135.257 68.8203 135.257 70.8359C135.257 72.8516 134.132 74.1289 132.55 74.1289C131.331 74.1289 130.921 73.3789 130.698 73.0273H130.581V74H129.608ZM130.592 70.8125C130.592 72.2422 131.237 73.2266 132.397 73.2266C133.604 73.2266 134.237 72.1719 134.237 70.8125C134.237 69.4883 133.628 68.457 132.397 68.457C131.225 68.457 130.592 69.4062 130.592 70.8125ZM136.197 74L136.186 73.2266L139.08 70.1797C140.088 69.1133 140.568 68.5391 140.568 67.7539C140.568 66.8867 139.83 66.3125 138.881 66.3125C137.873 66.3125 137.229 66.957 137.229 67.9062H136.233C136.221 66.4062 137.381 65.3984 138.916 65.3984C140.451 65.3984 141.553 66.4297 141.553 67.7539C141.553 68.7031 141.108 69.4414 139.608 70.9883L137.662 72.9922V73.0625H141.705V74H136.197Z"
+        fill="#878594"
+      />
+      <path
+        d="M166.969 66.4531V65.5156H173.367V66.4531H170.707V74H169.641V66.4531H166.969ZM173.113 72.1953C173.113 70.7305 174.402 70.4023 175.503 70.3203C175.908 70.291 176.939 70.2383 177.226 70.2266V69.7109C177.226 68.9023 176.745 68.4336 175.785 68.4336C174.976 68.4336 174.495 68.8086 174.355 69.2891H173.3C173.429 68.2695 174.425 67.5547 175.831 67.5547C176.663 67.5547 178.222 67.8008 178.222 69.8047V74H177.226V73.1328H177.179C176.968 73.5664 176.382 74.1523 175.281 74.1523C174.074 74.1523 173.113 73.4375 173.113 72.1953ZM174.12 72.2422C174.12 72.9102 174.683 73.25 175.456 73.25C176.593 73.25 177.226 72.4883 177.226 71.6914V71.0469L175.62 71.1641C174.706 71.2227 174.12 71.5508 174.12 72.2422ZM179.608 74V65.5156H180.616V68.6445H180.698C180.921 68.3047 181.296 67.5547 182.538 67.5547C184.132 67.5547 185.257 68.8203 185.257 70.8359C185.257 72.8516 184.132 74.1289 182.55 74.1289C181.331 74.1289 180.921 73.3789 180.698 73.0273H180.581V74H179.608ZM180.592 70.8125C180.592 72.2422 181.237 73.2266 182.397 73.2266C183.604 73.2266 184.237 72.1719 184.237 70.8125C184.237 69.4883 183.628 68.457 182.397 68.457C181.225 68.457 180.592 69.4062 180.592 70.8125ZM189.127 74.1172C187.44 74.1172 186.233 73.2148 186.174 71.8672H187.24C187.299 72.6758 188.108 73.1797 189.115 73.1797C190.229 73.1797 191.049 72.5703 191.049 71.6914C191.049 70.7656 190.311 70.1094 188.986 70.1094H188.295V69.1836H188.986C190.018 69.1836 190.733 68.6094 190.733 67.7305C190.733 66.8867 190.111 66.3125 189.15 66.3125C188.248 66.3125 187.416 66.8164 187.369 67.6484H186.35C186.408 66.3008 187.65 65.3984 189.162 65.3984C190.779 65.3984 191.764 66.4531 191.752 67.6719C191.764 68.6328 191.201 69.3477 190.311 69.5938V69.6523C191.412 69.8281 192.092 70.6133 192.08 71.6914C192.092 73.0859 190.815 74.1172 189.127 74.1172Z"
+        fill="#878594"
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconTextAreaComp.tsx b/apps/landing/src/components/icons/components/IconTextAreaComp.tsx
new file mode 100644
index 00000000..5eb28586
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconTextAreaComp.tsx
@@ -0,0 +1,42 @@
+'use client'
+
+import { useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconTextAreaComp({
+  className,
+  ...props
+}: {
+  className?: string
+  props?: SVGProps<SVGSVGElement>
+}) {
+  const theme = useTheme()
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 260 140"
+      width="260"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        height="94"
+        rx="7.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="173"
+        x="43.5"
+        y="19.5"
+      />
+      <path
+        d="M54.0149 40V31.5156H57.0383C59.007 31.5156 59.9797 32.6992 59.9797 34.2695C59.9797 35.8281 59.007 37.0234 57.0383 37.0234H55.3039V40H54.0149ZM55.3039 35.9219H56.9094C58.1633 35.9219 58.6789 35.2188 58.6789 34.2695C58.6789 33.3086 58.1633 32.6172 56.9094 32.6172H55.3039V35.9219ZM62.1275 31.5156V40H60.8736V31.5156H62.1275ZM62.998 38.207C62.998 36.7539 64.2284 36.3789 65.3769 36.2969C65.7988 36.2676 66.7538 36.2148 67.0527 36.2031L67.0409 35.6992C67.0409 34.9844 66.6074 34.5625 65.7519 34.5625C65.0136 34.5625 64.5683 34.9023 64.4394 35.3711H63.1972C63.3144 34.3164 64.2988 33.5547 65.7988 33.5547C66.8066 33.5547 68.2949 33.9297 68.2949 35.7695V40H67.0761V39.1328H67.0292C66.7831 39.6133 66.1972 40.1406 65.1425 40.1406C63.9355 40.1406 62.998 39.4492 62.998 38.207ZM64.2167 38.2188C64.2167 38.8281 64.7206 39.1445 65.4238 39.1445C66.4433 39.1445 67.0527 38.4648 67.0527 37.7031V37.1172L65.5527 37.2227C64.7324 37.2812 64.2167 37.5859 64.2167 38.2188ZM72.1419 40.1289C70.2903 40.1289 69.1653 38.7578 69.1653 36.8477C69.1653 34.9023 70.3255 33.5547 72.1184 33.5547C73.5716 33.5547 74.6263 34.4102 74.7552 35.6992H73.5364C73.4075 35.1016 72.927 34.5977 72.1419 34.5977C71.1106 34.5977 70.4192 35.4531 70.4192 36.8125C70.4192 38.207 71.0989 39.0625 72.1419 39.0625C72.845 39.0625 73.3841 38.6758 73.5364 37.9844H74.7552C74.6145 39.2148 73.6419 40.1289 72.1419 40.1289ZM78.3209 40.1289C76.4459 40.1289 75.2975 38.8398 75.2975 36.8594C75.2975 34.9023 76.4694 33.5547 78.2389 33.5547C79.692 33.5547 81.0631 34.457 81.0631 36.7539V37.1992H76.5397C76.5749 38.4062 77.2838 39.0977 78.3327 39.0977C79.0475 39.0977 79.5045 38.793 79.7155 38.4062H80.9811C80.6999 39.4375 79.7155 40.1289 78.3209 40.1289ZM76.5514 36.2617H79.8327C79.8327 35.2891 79.2116 34.5859 78.2506 34.5859C77.2487 34.5859 76.5983 35.3594 76.5514 36.2617ZM83.1992 36.2266V40H81.9453V31.5156H83.1758V34.6797H83.2578C83.5625 33.9883 84.1484 33.5547 85.1445 33.5547C86.457 33.5547 87.3242 34.3633 87.3242 35.957V40H86.0703V36.1094C86.0703 35.1719 85.5664 34.6328 84.7227 34.6328C83.8438 34.6328 83.1992 35.207 83.1992 36.2266ZM91.1713 40.1289C89.3666 40.1289 88.1947 38.8164 88.1947 36.8477C88.1947 34.8672 89.3666 33.5547 91.1713 33.5547C92.9642 33.5547 94.1361 34.8672 94.1361 36.8477C94.1361 38.8164 92.9642 40.1289 91.1713 40.1289ZM91.1713 39.0859C92.3197 39.0859 92.8705 38.0664 92.8705 36.8477C92.8705 35.6289 92.3197 34.5859 91.1713 34.5859C89.9994 34.5859 89.4486 35.6289 89.4486 36.8477C89.4486 38.0664 89.9994 39.0859 91.1713 39.0859ZM96.2605 31.5156V40H95.0066V31.5156H96.2605ZM99.8028 40.1289C98.2677 40.1289 97.1427 38.8867 97.1427 36.8359C97.1427 34.7617 98.2794 33.5547 99.8145 33.5547C100.998 33.5547 101.432 34.2695 101.654 34.668H101.713V31.5156H102.967V40H101.748V39.0039H101.654C101.42 39.4258 100.963 40.1289 99.8028 40.1289ZM100.084 39.0625C101.15 39.0625 101.748 38.1484 101.748 36.8125C101.748 35.4883 101.162 34.6211 100.084 34.6211C98.9708 34.6211 98.42 35.5586 98.42 36.8125C98.42 38.0898 98.9942 39.0625 100.084 39.0625ZM106.978 40.1289C105.103 40.1289 103.955 38.8398 103.955 36.8594C103.955 34.9023 105.126 33.5547 106.896 33.5547C108.349 33.5547 109.72 34.457 109.72 36.7539V37.1992H105.197C105.232 38.4062 105.941 39.0977 106.99 39.0977C107.705 39.0977 108.162 38.793 108.373 38.4062H109.638C109.357 39.4375 108.373 40.1289 106.978 40.1289ZM105.208 36.2617H108.49C108.49 35.2891 107.869 34.5859 106.908 34.5859C105.906 34.5859 105.255 35.3594 105.208 36.2617ZM110.602 40V33.6367H111.809V34.6445H111.88C112.114 33.9648 112.747 33.543 113.497 33.543C113.649 33.543 113.895 33.5547 114.024 33.5664V34.7617C113.919 34.7383 113.626 34.6914 113.368 34.6914C112.501 34.6914 111.856 35.2891 111.856 36.1211V40H110.602Z"
+        fill={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+      />
+      <path
+        d="M199.257 126.078C197.944 126.078 197.179 125.023 197.179 123.172C197.179 121.336 197.96 120.266 199.257 120.266C200.554 120.266 201.335 121.336 201.335 123.172C201.335 125.023 200.562 126.078 199.257 126.078ZM199.257 125.336C200.022 125.336 200.476 124.586 200.476 123.172C200.476 121.766 200.015 120.992 199.257 120.992C198.499 120.992 198.038 121.766 198.038 123.172C198.038 124.586 198.491 125.336 199.257 125.336ZM204.15 120.078L202.329 126.852H201.587L203.407 120.078H204.15ZM206.667 120.344V126H205.8V121.203H205.769L204.417 122.086V121.266L205.824 120.344H206.667ZM209.834 126.078C208.521 126.078 207.756 125.023 207.756 123.172C207.756 121.336 208.537 120.266 209.834 120.266C211.131 120.266 211.912 121.336 211.912 123.172C211.912 125.023 211.138 126.078 209.834 126.078ZM209.834 125.336C210.599 125.336 211.052 124.586 211.052 123.172C211.052 121.766 210.592 120.992 209.834 120.992C209.076 120.992 208.615 121.766 208.615 123.172C208.615 124.586 209.068 125.336 209.834 125.336ZM214.531 126.078C213.219 126.078 212.453 125.023 212.453 123.172C212.453 121.336 213.234 120.266 214.531 120.266C215.828 120.266 216.609 121.336 216.609 123.172C216.609 125.023 215.836 126.078 214.531 126.078ZM214.531 125.336C215.297 125.336 215.75 124.586 215.75 123.172C215.75 121.766 215.289 120.992 214.531 120.992C213.773 120.992 213.312 121.766 213.312 123.172C213.312 124.586 213.766 125.336 214.531 125.336Z"
+        fill={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconTextBoxComp.tsx b/apps/landing/src/components/icons/components/IconTextBoxComp.tsx
new file mode 100644
index 00000000..e7b9a6aa
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconTextBoxComp.tsx
@@ -0,0 +1,62 @@
+'use client'
+
+import { css, useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconTextBoxComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  const theme = useTheme()
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 260 140"
+      width="260"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        height="35"
+        rx="7.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="173"
+        x="43.5"
+        y="74.5"
+      />
+      <path
+        d="M204.458 87.1753C204.773 86.7788 205.345 86.6787 205.78 86.9585C206.245 87.2571 206.379 87.8758 206.081 88.3404L200.68 96.7417C200.382 97.206 199.763 97.341 199.299 97.0425C198.834 96.7439 198.701 96.1251 198.999 95.6607L199.607 94.7124C198.154 94.1292 197.326 93.0923 196.789 92.4165C196.763 92.3842 196.738 92.3524 196.714 92.3218C196.597 92.1761 196.568 91.982 196.637 91.8101C197.099 90.6519 198.92 88.8492 202 88.8491C202.462 88.8491 202.895 88.8925 203.301 88.9654L204.398 87.2583L204.458 87.1753ZM205.487 90.4429C205.652 90.1903 205.996 90.1229 206.224 90.3198C206.803 90.8186 207.184 91.3625 207.363 91.8101C207.432 91.9819 207.403 92.1761 207.287 92.3218C207.262 92.3525 207.237 92.3841 207.211 92.4165C206.576 93.2146 205.538 94.5213 203.542 94.9829C203.083 95.0888 202.781 94.5826 203.039 94.188C203.123 94.0597 203.256 93.9712 203.404 93.9331C204.838 93.5657 205.643 92.6626 206.228 91.9351C206.093 91.7094 205.885 91.4482 205.603 91.19C205.393 90.9975 205.331 90.6815 205.487 90.4429ZM202 89.8999C199.634 89.9 198.249 91.1377 197.772 91.9351C198.3 92.5906 199.006 93.3868 200.189 93.8072L200.726 92.9712C200.51 92.7035 200.38 92.3664 200.38 91.9995C200.38 91.1298 201.105 90.4245 202 90.4243C202.117 90.4243 202.231 90.4366 202.341 90.4595L202.678 89.9351C202.461 89.9122 202.235 89.8999 202 89.8999Z"
+        fill="#A9A8B4"
+      />
+      <rect
+        height="35"
+        rx="7.5"
+        stroke={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+        width="173"
+        x="43.5"
+        y="30.5"
+      />
+      <circle cx="202" cy="48" fill="black" fillOpacity="0.2" r="6" />
+      <path
+        clipRule="evenodd"
+        d="M199.717 45.7172C199.873 45.561 200.127 45.561 200.283 45.7172L202 47.4343L203.717 45.7172C203.873 45.561 204.127 45.561 204.283 45.7172C204.439 45.8734 204.439 46.1266 204.283 46.2828L202.566 48L204.283 49.7172C204.439 49.8734 204.439 50.1266 204.283 50.2828C204.127 50.4391 203.873 50.4391 203.717 50.2828L202 48.5657L200.283 50.2828C200.127 50.4391 199.873 50.4391 199.717 50.2828C199.561 50.1266 199.561 49.8734 199.717 49.7172L201.434 48L199.717 46.2828C199.561 46.1266 199.561 45.8734 199.717 45.7172Z"
+        fill="white"
+        fillRule="evenodd"
+      />
+      <path
+        d="M53.8148 52V43.5156H56.8383C58.807 43.5156 59.7797 44.6992 59.7797 46.2695C59.7797 47.8281 58.807 49.0234 56.8383 49.0234H55.1039V52H53.8148ZM55.1039 47.9219H56.7094C57.9633 47.9219 58.4789 47.2188 58.4789 46.2695C58.4789 45.3086 57.9633 44.6172 56.7094 44.6172H55.1039V47.9219ZM61.9275 43.5156V52H60.6736V43.5156H61.9275ZM62.798 50.207C62.798 48.7539 64.0284 48.3789 65.1769 48.2969C65.5987 48.2676 66.5538 48.2148 66.8527 48.2031L66.8409 47.6992C66.8409 46.9844 66.4073 46.5625 65.5519 46.5625C64.8136 46.5625 64.3683 46.9023 64.2394 47.3711H62.9972C63.1144 46.3164 64.0987 45.5547 65.5987 45.5547C66.6066 45.5547 68.0948 45.9297 68.0948 47.7695V52H66.8761V51.1328H66.8292C66.5831 51.6133 65.9972 52.1406 64.9425 52.1406C63.7355 52.1406 62.798 51.4492 62.798 50.207ZM64.0167 50.2188C64.0167 50.8281 64.5206 51.1445 65.2237 51.1445C66.2433 51.1445 66.8527 50.4648 66.8527 49.7031V49.1172L65.3527 49.2227C64.5323 49.2812 64.0167 49.5859 64.0167 50.2188ZM71.9419 52.1289C70.0903 52.1289 68.9653 50.7578 68.9653 48.8477C68.9653 46.9023 70.1255 45.5547 71.9184 45.5547C73.3716 45.5547 74.4262 46.4102 74.5552 47.6992H73.3364C73.2075 47.1016 72.727 46.5977 71.9419 46.5977C70.9106 46.5977 70.2192 47.4531 70.2192 48.8125C70.2192 50.207 70.8989 51.0625 71.9419 51.0625C72.645 51.0625 73.1841 50.6758 73.3364 49.9844H74.5552C74.4145 51.2148 73.4419 52.1289 71.9419 52.1289ZM78.1209 52.1289C76.2459 52.1289 75.0975 50.8398 75.0975 48.8594C75.0975 46.9023 76.2694 45.5547 78.0389 45.5547C79.492 45.5547 80.8631 46.457 80.8631 48.7539V49.1992H76.3397C76.3748 50.4062 77.0838 51.0977 78.1327 51.0977C78.8475 51.0977 79.3045 50.793 79.5155 50.4062H80.7811C80.4998 51.4375 79.5155 52.1289 78.1209 52.1289ZM76.3514 48.2617H79.6327C79.6327 47.2891 79.0116 46.5859 78.0506 46.5859C77.0487 46.5859 76.3983 47.3594 76.3514 48.2617ZM82.9992 48.2266V52H81.7453V43.5156H82.9758V46.6797H83.0578C83.3625 45.9883 83.9484 45.5547 84.9445 45.5547C86.257 45.5547 87.1242 46.3633 87.1242 47.957V52H85.8703V48.1094C85.8703 47.1719 85.3664 46.6328 84.5227 46.6328C83.6437 46.6328 82.9992 47.207 82.9992 48.2266ZM90.9712 52.1289C89.1666 52.1289 87.9947 50.8164 87.9947 48.8477C87.9947 46.8672 89.1666 45.5547 90.9712 45.5547C92.7642 45.5547 93.9361 46.8672 93.9361 48.8477C93.9361 50.8164 92.7642 52.1289 90.9712 52.1289ZM90.9712 51.0859C92.1197 51.0859 92.6705 50.0664 92.6705 48.8477C92.6705 47.6289 92.1197 46.5859 90.9712 46.5859C89.7994 46.5859 89.2486 47.6289 89.2486 48.8477C89.2486 50.0664 89.7994 51.0859 90.9712 51.0859ZM96.0605 43.5156V52H94.8066V43.5156H96.0605ZM99.6028 52.1289C98.0677 52.1289 96.9427 50.8867 96.9427 48.8359C96.9427 46.7617 98.0794 45.5547 99.6145 45.5547C100.798 45.5547 101.232 46.2695 101.454 46.668H101.513V43.5156H102.767V52H101.548V51.0039H101.454C101.22 51.4258 100.763 52.1289 99.6028 52.1289ZM99.8841 51.0625C100.95 51.0625 101.548 50.1484 101.548 48.8125C101.548 47.4883 100.962 46.6211 99.8841 46.6211C98.7708 46.6211 98.22 47.5586 98.22 48.8125C98.22 50.0898 98.7942 51.0625 99.8841 51.0625ZM106.778 52.1289C104.903 52.1289 103.755 50.8398 103.755 48.8594C103.755 46.9023 104.926 45.5547 106.696 45.5547C108.149 45.5547 109.52 46.457 109.52 48.7539V49.1992H104.997C105.032 50.4062 105.741 51.0977 106.79 51.0977C107.505 51.0977 107.962 50.793 108.172 50.4062H109.438C109.157 51.4375 108.172 52.1289 106.778 52.1289ZM105.008 48.2617H108.29C108.29 47.2891 107.669 46.5859 106.708 46.5859C105.706 46.5859 105.055 47.3594 105.008 48.2617ZM110.402 52V45.6367H111.609V46.6445H111.68C111.914 45.9648 112.547 45.543 113.297 45.543C113.449 45.543 113.695 45.5547 113.824 45.5664V46.7617C113.719 46.7383 113.426 46.6914 113.168 46.6914C112.301 46.6914 111.656 47.2891 111.656 48.1211V52H110.402Z"
+        fill={theme === 'light' ? '#C8C7D1' : '#4D4C53'}
+      />
+      <circle className={css({ fill: '$text' })} cx="57" cy="92" r="3" />
+      <circle className={css({ fill: '$text' })} cx="66" cy="92" r="3" />
+      <circle className={css({ fill: '$text' })} cx="75" cy="92" r="3" />
+      <circle className={css({ fill: '$text' })} cx="84" cy="92" r="3" />
+      <circle className={css({ fill: '$text' })} cx="93" cy="92" r="3" />
+      <circle className={css({ fill: '$text' })} cx="102" cy="92" r="3" />
+      <circle className={css({ fill: '$text' })} cx="111" cy="92" r="3" />
+      <circle className={css({ fill: '$text' })} cx="120" cy="92" r="3" />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconThemeButtonComp.tsx b/apps/landing/src/components/icons/components/IconThemeButtonComp.tsx
new file mode 100644
index 00000000..f7106502
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconThemeButtonComp.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { css } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconThemeButtonComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 259 140"
+      width="259"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        className={css({ fill: '$text' })}
+        d="M108 79.3333C108.327 79.3333 108.642 79.4532 108.886 79.6702C109.13 79.8873 109.286 80.1863 109.324 80.5106L109.333 80.6666V82C109.333 82.3398 109.203 82.6667 108.97 82.9138C108.736 83.1609 108.417 83.3096 108.078 83.3295C107.739 83.3494 107.405 83.2391 107.144 83.0209C106.884 82.8028 106.716 82.4934 106.676 82.156L106.667 82V80.6666C106.667 80.313 106.807 79.9739 107.057 79.7238C107.307 79.4738 107.646 79.3333 108 79.3333ZM116.417 76.5466L116.543 76.6573L117.476 77.5906C117.715 77.8306 117.854 78.1525 117.864 78.4911C117.875 78.8297 117.756 79.1596 117.532 79.4137C117.308 79.6678 116.995 79.827 116.658 79.8592C116.321 79.8913 115.984 79.7938 115.716 79.5866L115.591 79.476L114.657 78.5426C114.427 78.3129 114.289 78.0071 114.269 77.6826C114.248 77.3582 114.347 77.0374 114.547 76.7807C114.746 76.524 115.033 76.3491 115.352 76.2888C115.671 76.2285 116.002 76.287 116.281 76.4533L116.417 76.5466ZM101.343 76.6573C101.572 76.8869 101.71 77.1924 101.731 77.5164C101.751 77.8404 101.652 78.1608 101.453 78.4173L101.343 78.5426L100.409 79.476C100.169 79.7151 99.8474 79.8539 99.5088 79.8643C99.1702 79.8746 98.8404 79.7557 98.5863 79.5316C98.3322 79.3076 98.1729 78.9952 98.1408 78.658C98.1087 78.3208 98.2061 77.9839 98.4133 77.716L98.524 77.5906L99.4573 76.6573C99.7074 76.4073 100.046 76.2669 100.4 76.2669C100.754 76.2669 101.093 76.4073 101.343 76.6573ZM97.3333 68.6666C97.6732 68.667 98.0001 68.7971 98.2472 69.0304C98.4943 69.2637 98.643 69.5826 98.6629 69.9218C98.6828 70.2611 98.5724 70.5951 98.3543 70.8557C98.1362 71.1163 97.8268 71.2838 97.4893 71.324L97.3333 71.3333H96C95.6602 71.3329 95.3333 71.2028 95.0862 70.9695C94.8391 70.7362 94.6904 70.4174 94.6704 70.0781C94.6505 69.7388 94.7609 69.4048 94.979 69.1442C95.1971 68.8836 95.5065 68.7161 95.844 68.676L96 68.6666H97.3333ZM120 68.6666C120.34 68.667 120.667 68.7971 120.914 69.0304C121.161 69.2637 121.31 69.5826 121.33 69.9218C121.349 70.2611 121.239 70.5951 121.021 70.8557C120.803 71.1163 120.493 71.2838 120.156 71.324L120 71.3333H118.667C118.327 71.3329 118 71.2028 117.753 70.9695C117.506 70.7362 117.357 70.4174 117.337 70.0781C117.317 69.7388 117.428 69.4048 117.646 69.1442C117.864 68.8836 118.173 68.7161 118.511 68.676L118.667 68.6666H120ZM100.284 60.4133L100.409 60.524L101.343 61.4573C101.582 61.6972 101.721 62.0192 101.731 62.3578C101.741 62.6964 101.622 63.0262 101.398 63.2803C101.174 63.5344 100.862 63.6937 100.525 63.7258C100.187 63.7579 99.8507 63.6605 99.5827 63.4533L99.4573 63.3426L98.524 62.4093C98.2948 62.1795 98.1573 61.8741 98.1372 61.5501C98.1171 61.2262 98.2158 60.9061 98.4149 60.6498C98.614 60.3934 98.8997 60.2185 99.2185 60.1578C99.5373 60.0971 99.8673 60.1547 100.147 60.32L100.284 60.4133ZM117.476 60.524C117.706 60.7536 117.843 61.059 117.864 61.3831C117.884 61.7071 117.786 62.0274 117.587 62.284L117.476 62.4093L116.543 63.3426C116.303 63.5818 115.981 63.7206 115.642 63.7309C115.304 63.7413 114.974 63.6223 114.72 63.3983C114.466 63.1742 114.306 62.8619 114.274 62.5247C114.242 62.1874 114.339 61.8506 114.547 61.5826L114.657 61.4573L115.591 60.524C115.841 60.274 116.18 60.1336 116.533 60.1336C116.887 60.1336 117.226 60.274 117.476 60.524ZM108 56.6666C108.327 56.6667 108.642 56.7866 108.886 57.0036C109.13 57.2206 109.286 57.5196 109.324 57.844L109.333 58V59.3333C109.333 59.6731 109.203 60 108.97 60.2471C108.736 60.4942 108.417 60.6429 108.078 60.6629C107.739 60.6828 107.405 60.5724 107.144 60.3543C106.884 60.1362 106.716 59.8268 106.676 59.4893L106.667 59.3333V58C106.667 57.6463 106.807 57.3072 107.057 57.0572C107.307 56.8071 107.646 56.6666 108 56.6666ZM108 63.3333C109.306 63.3332 110.584 63.7169 111.674 64.4366C112.764 65.1564 113.618 66.1805 114.131 67.3818C114.644 68.5831 114.793 69.9086 114.559 71.1937C114.325 72.4788 113.719 73.6669 112.816 74.6104C111.912 75.5539 110.752 76.2113 109.478 76.5008C108.204 76.7903 106.874 76.6993 105.651 76.239C104.429 75.7787 103.368 74.9694 102.602 73.9116C101.836 72.8539 101.397 71.5943 101.34 70.2893L101.333 70L101.34 69.7106C101.415 67.9943 102.149 66.373 103.39 65.1848C104.63 63.9967 106.282 63.3334 108 63.3333Z"
+      />
+      <path
+        className={css({ fill: '$text' })}
+        d="M138 70C138 63.3823 143.364 58.0179 149.982 58.0179H152.06L151.02 59.8152C150.326 61.0135 149.982 62.4381 149.982 64.009C149.982 65.2474 150.256 66.4706 150.785 67.5906C151.313 68.7105 152.083 69.6995 153.04 70.4865C153.996 71.2735 155.115 71.8389 156.316 72.1422C157.516 72.4455 158.769 72.4791 159.985 72.2406L162 71.8488L161.349 73.7971C159.762 78.5515 155.274 81.982 149.982 81.982C143.364 81.982 138 76.6176 138 70Z"
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconToggleComp.tsx b/apps/landing/src/components/icons/components/IconToggleComp.tsx
new file mode 100644
index 00000000..1ce5271f
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconToggleComp.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import { css } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconToggleComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 260 140"
+      width="260"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        className={css({ fill: '$primary' })}
+        height="28"
+        rx="14"
+        width="50"
+        x="105"
+        y="56"
+      />
+      <circle cx="141" cy="70" fill="white" r="10" />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconTooltipComp.tsx b/apps/landing/src/components/icons/components/IconTooltipComp.tsx
new file mode 100644
index 00000000..1d592c66
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconTooltipComp.tsx
@@ -0,0 +1,74 @@
+'use client'
+
+import { SVGProps } from 'react'
+
+export default function IconTooltipComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 260 140"
+      width="260"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g filter="url(#filter0_d_560_2769)">
+        <rect
+          fill="black"
+          fillOpacity="0.75"
+          height="36"
+          rx="4"
+          width="60"
+          x="100"
+          y="49"
+        />
+        <path
+          d="M110.547 63.1953V62.1016H118.012V63.1953H114.908V72H113.664V63.1953H110.547ZM121.037 72.1504C119.014 72.1504 117.646 70.6328 117.646 68.3223C117.646 66.0117 119.014 64.4805 121.037 64.4805C123.047 64.4805 124.4 66.0117 124.4 68.3223C124.4 70.6328 123.047 72.1504 121.037 72.1504ZM121.037 71.1113C122.527 71.1113 123.225 69.7988 123.225 68.3223C123.225 66.8457 122.527 65.5195 121.037 65.5195C119.519 65.5195 118.822 66.8457 118.822 68.3223C118.822 69.7988 119.519 71.1113 121.037 71.1113ZM128.56 72.1504C126.537 72.1504 125.17 70.6328 125.17 68.3223C125.17 66.0117 126.537 64.4805 128.56 64.4805C130.57 64.4805 131.924 66.0117 131.924 68.3223C131.924 70.6328 130.57 72.1504 128.56 72.1504ZM128.56 71.1113C130.051 71.1113 130.748 69.7988 130.748 68.3223C130.748 66.8457 130.051 65.5195 128.56 65.5195C127.043 65.5195 126.346 66.8457 126.346 68.3223C126.346 69.7988 127.043 71.1113 128.56 71.1113ZM134.224 62.1016V72H133.049V62.1016H134.224ZM138.918 64.5762V65.5605H137.359V69.8672C137.359 70.8242 137.824 70.9746 138.33 70.9746C138.549 70.9746 138.849 70.9609 139.027 70.9473V72.041C138.849 72.0684 138.549 72.0957 138.207 72.0957C137.222 72.0957 136.17 71.4805 136.17 70.168V65.5605H135.049V64.5762H136.17V62.7988H137.359V64.5762H138.918ZM140.015 72V64.5762H141.191V72H140.015ZM140.603 63.3457C140.152 63.3457 139.783 63.0039 139.783 62.5664C139.783 62.1289 140.152 61.7871 140.603 61.7871C141.054 61.7871 141.437 62.1289 141.437 62.5664C141.437 63.0039 141.054 63.3457 140.603 63.3457ZM142.644 74.7891V64.5762H143.779V65.752H143.916C144.162 65.3555 144.626 64.4805 146.062 64.4805C147.921 64.4805 149.22 65.957 149.22 68.3086C149.22 70.6602 147.921 72.1504 146.076 72.1504C144.654 72.1504 144.162 71.2754 143.916 70.8652H143.82V74.7891H142.644ZM143.792 68.2812C143.792 69.9492 144.544 71.0977 145.912 71.0977C147.32 71.0977 148.044 69.8672 148.044 68.2812C148.044 66.7363 147.334 65.5332 145.912 65.5332C144.517 65.5332 143.792 66.6406 143.792 68.2812Z"
+          fill="white"
+        />
+        <path d="M130 91L125 85H135L130 91Z" fill="black" fillOpacity="0.75" />
+      </g>
+      <defs>
+        <filter
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+          height="62"
+          id="filter0_d_560_2769"
+          width="80"
+          x="90"
+          y="39"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            result="hardAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          />
+          <feOffset dy="2" />
+          <feGaussianBlur stdDeviation="1.5" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+          />
+          <feBlend
+            in2="BackgroundImageFix"
+            mode="normal"
+            result="effect1_dropShadow_560_2769"
+          />
+          <feBlend
+            in="SourceGraphic"
+            in2="effect1_dropShadow_560_2769"
+            mode="normal"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/IconUploaderComp.tsx b/apps/landing/src/components/icons/components/IconUploaderComp.tsx
new file mode 100644
index 00000000..487309ac
--- /dev/null
+++ b/apps/landing/src/components/icons/components/IconUploaderComp.tsx
@@ -0,0 +1,93 @@
+'use client'
+
+import { css, useTheme } from '@devup-ui/react'
+import { SVGProps } from 'react'
+
+export default function IconUploaderComp({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  const theme = useTheme()
+
+  return (
+    <svg
+      className={className}
+      fill="none"
+      height="140"
+      viewBox="0 0 260 140"
+      width="260"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        height="78"
+        rx="7"
+        stroke={theme === 'light' ? '#6159D4' : '#6159D4'}
+        strokeDasharray="4 4"
+        strokeWidth="2"
+        width="118"
+        x="63"
+        y="24"
+      />
+      <rect
+        fill={theme === 'light' ? '#DADADA' : '#444'}
+        height="15"
+        rx="2"
+        width="59"
+        x="92"
+        y="70"
+      />
+      <rect
+        fill={theme === 'light' ? '#fff' : '#191919'}
+        height="67"
+        rx="3.5"
+        width="67"
+        x="131.5"
+        y="50.5"
+      />
+      <rect
+        className={css({ stroke: '$text' })}
+        height="67"
+        rx="3.5"
+        width="67"
+        x="131.5"
+        y="50.5"
+      />
+      <path
+        d="M131 62C136.523 62 141 57.5228 141 52C141 46.4772 136.523 42 131 42C125.477 42 121 46.4772 121 52C121 57.5228 125.477 62 131 62Z"
+        fill="#2CA353"
+      />
+      <path
+        clipRule="evenodd"
+        d="M132.25 47.0498V56.9498H129.75V47.0498H132.25Z"
+        fill="white"
+        fillRule="evenodd"
+      />
+      <path
+        clipRule="evenodd"
+        d="M126.05 50.75H135.95V53.25H126.05V50.75Z"
+        fill="white"
+        fillRule="evenodd"
+      />
+      <path
+        d="M171 81.75H165.75V77.25H167.25V80.25H171V81.75Z"
+        fill="#C3C2C8"
+      />
+      <path d="M168 83.25H162V84.75H168V83.25Z" fill="#C3C2C8" />
+      <path d="M168 86.25H162V87.75H168V86.25Z" fill="#C3C2C8" />
+      <path
+        d="M165.96 78L169.5 80.955V90H160.5V78H165.96ZM166.5 76.5H160.5C159.675 76.5 159 77.175 159 78V90C159 90.825 159.675 91.5 160.5 91.5H169.5C170.325 91.5 171 90.825 171 90V80.25L166.5 76.5Z"
+        fill="#C3C2C8"
+      />
+      <path
+        className={css({ fill: '$base' })}
+        d="M168.38 56.2398V57.7398H175.38V56.2398V55.2398C175.38 54.4455 176.102 53.7045 176.287 53.5192C176.678 53.1287 177.787 53.0192 177.787 52.0192V50.0192C177.787 50.0192 177.572 48.5192 176.287 48.5192C175.423 48.5192 175.38 49.2398 175.38 49.2398V48.2398C175.38 48.2398 175.287 47.5192 174.38 47.2398C173.663 47.0192 172.38 47.1751 172.38 47.466V48.2398C172.38 48.2398 171.82 47.5192 171.413 47.2398C170.93 46.9089 169.87 46.9315 169.552 47.2398C169.212 47.5689 169.459 48.2398 169.287 48.2398C169.115 48.2398 168.787 47.5192 168.38 47.2398C167.972 46.9604 166.598 47.1108 166.287 47.5192C165.855 48.0881 165.843 48.7074 166.226 49.2398C166.787 50.0192 167.287 49.962 167.38 50.2398C167.472 50.5177 167.38 51.2398 167.38 51.2398H166.38C166.016 51.2398 165.477 51.2398 165.287 51.5192C164.868 52.2398 164.915 52.6744 165.38 53.2398C165.427 53.2971 166.38 54.2398 166.38 54.2398L167.38 55.2398L168.38 56.2398Z"
+      />
+      <path
+        className={css({ stroke: '$text' })}
+        d="M168.38 57.7398V56.2398L167.38 55.2398L166.38 54.2398C166.38 54.2398 165.427 53.2971 165.38 53.2398C164.915 52.6744 164.868 52.2398 165.287 51.5192C165.477 51.2398 166.016 51.2398 166.38 51.2398C166.787 51.2398 167.38 51.2398 167.38 51.2398C167.38 51.2398 167.472 50.5177 167.38 50.2398C167.287 49.962 166.787 50.0192 166.226 49.2398C165.843 48.7074 165.855 48.0881 166.287 47.5192C166.598 47.1108 167.972 46.9604 168.38 47.2398C168.787 47.5192 169.115 48.2398 169.287 48.2398C169.459 48.2398 169.212 47.5689 169.552 47.2398C169.87 46.9315 170.93 46.9089 171.413 47.2398C171.82 47.5192 172.38 48.2398 172.38 48.2398V47.466C172.38 47.1751 173.663 47.0192 174.38 47.2398C175.287 47.5192 175.38 48.2398 175.38 48.2398V49.2398C175.38 49.2398 175.423 48.5192 176.287 48.5192C177.787 48.5192 177.787 50.0192 177.787 50.0192V52.0192C177.787 53.0192 176.678 53.1287 176.287 53.5192C176.102 53.7045 175.38 54.4455 175.38 55.2398V56.2398V57.7398"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
diff --git a/apps/landing/src/components/icons/components/componentIcons.ts b/apps/landing/src/components/icons/components/componentIcons.ts
new file mode 100644
index 00000000..d49d60e1
--- /dev/null
+++ b/apps/landing/src/components/icons/components/componentIcons.ts
@@ -0,0 +1,55 @@
+import IconBottomSheetComp from '@/components/icons/components/IconBottomSheetComp'
+import IconButtonComponent from '@/components/icons/components/IconButtonComponent'
+import IconCheckboxComp from '@/components/icons/components/IconCheckboxComp'
+import IconColorPickerComp from '@/components/icons/components/IconColorPickerComp'
+import IconConfirmComp from '@/components/icons/components/IconConfirmComp'
+import IconDatePickerComp from '@/components/icons/components/IconDatePickerComp'
+import IconDropdownComp from '@/components/icons/components/IconDropdownComp'
+import IconFooterComp from '@/components/icons/components/IconFooterComp'
+import IconHeaderComp from '@/components/icons/components/IconHeaderComp'
+import IconLabelComp from '@/components/icons/components/IconLabelComp'
+import IconMenuComp from '@/components/icons/components/IconMenuComp'
+import IconPagination from '@/components/icons/components/IconPagination'
+import IconProgressBar from '@/components/icons/components/IconProgressBar'
+import IconRadioComp from '@/components/icons/components/IconRadioComp'
+import IconSearchComp from '@/components/icons/components/IconSearchComp'
+import IconSelectComp from '@/components/icons/components/IconSelectComp'
+import IconSliderComp from '@/components/icons/components/IconSliderComp'
+import IconSnackbarComp from '@/components/icons/components/IconSnackbarComp'
+import IconStepperComp from '@/components/icons/components/IconStepperComp'
+import IconTabComp from '@/components/icons/components/IconTabComp'
+import IconTextAreaComp from '@/components/icons/components/IconTextAreaComp'
+import IconTextBoxComp from '@/components/icons/components/IconTextBoxComp'
+import IconThemeButtonComp from '@/components/icons/components/IconThemeButtonComp'
+import IconToggleComp from '@/components/icons/components/IconToggleComp'
+import IconTooltipComp from '@/components/icons/components/IconTooltipComp'
+import IconUploaderComp from '@/components/icons/components/IconUploaderComp'
+
+export {
+  IconBottomSheetComp,
+  IconButtonComponent,
+  IconCheckboxComp,
+  IconColorPickerComp,
+  IconConfirmComp,
+  IconDatePickerComp,
+  IconDropdownComp,
+  IconFooterComp,
+  IconHeaderComp,
+  IconLabelComp,
+  IconMenuComp,
+  IconPagination,
+  IconProgressBar,
+  IconRadioComp,
+  IconSearchComp,
+  IconSelectComp,
+  IconSliderComp,
+  IconSnackbarComp,
+  IconStepperComp,
+  IconTabComp,
+  IconTextAreaComp,
+  IconTextBoxComp,
+  IconThemeButtonComp,
+  IconToggleComp,
+  IconTooltipComp,
+  IconUploaderComp,
+}

From 306af1560cc49ee2637bf73c802e6255d055e6f7 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Tue, 1 Jul 2025 10:54:20 +0900
Subject: [PATCH 5/6] Rename icon index file

---
 apps/landing/src/app/(detail)/components/overview/page.tsx      | 2 +-
 .../components/icons/components/{componentIcons.ts => index.ts} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename apps/landing/src/components/icons/components/{componentIcons.ts => index.ts} (100%)

diff --git a/apps/landing/src/app/(detail)/components/overview/page.tsx b/apps/landing/src/app/(detail)/components/overview/page.tsx
index ae4e3b61..5b2996b4 100644
--- a/apps/landing/src/app/(detail)/components/overview/page.tsx
+++ b/apps/landing/src/app/(detail)/components/overview/page.tsx
@@ -1,6 +1,6 @@
 import { Center, Flex, Grid, Text, VStack } from '@devup-ui/react'
 
-import * as Icons from '@/components/icons/components/componentIcons'
+import * as Icons from '@/components/icons/components'
 
 import Card from '../Card'
 
diff --git a/apps/landing/src/components/icons/components/componentIcons.ts b/apps/landing/src/components/icons/components/index.ts
similarity index 100%
rename from apps/landing/src/components/icons/components/componentIcons.ts
rename to apps/landing/src/components/icons/components/index.ts

From 1b6c0897928502c62cd969d2ca3c8e37a633f819 Mon Sep 17 00:00:00 2001
From: Hanbin Cho <forestream@devfive.kr>
Date: Tue, 1 Jul 2025 11:34:45 +0900
Subject: [PATCH 6/6] Fix responsive design

---
 .../app/(detail)/components/overview/page.tsx | 55 +++++++++----------
 .../icons/components/IconCheckboxComp.tsx     |  1 +
 .../icons/components/IconSelectComp.tsx       |  1 +
 3 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/apps/landing/src/app/(detail)/components/overview/page.tsx b/apps/landing/src/app/(detail)/components/overview/page.tsx
index 5b2996b4..dc03f213 100644
--- a/apps/landing/src/app/(detail)/components/overview/page.tsx
+++ b/apps/landing/src/app/(detail)/components/overview/page.tsx
@@ -1,4 +1,4 @@
-import { Center, Flex, Grid, Text, VStack } from '@devup-ui/react'
+import { Center, css, Flex, Grid, Text, VStack } from '@devup-ui/react'
 
 import * as Icons from '@/components/icons/components'
 
@@ -33,11 +33,10 @@ export default function Page() {
             'repeat(4, 1fr)',
             'repeat(5, 1fr)',
           ]}
-          overflow="visible"
         >
           <Card>
             <Center h="140px">
-              <Icons.IconButtonComponent />
+              <Icons.IconButtonComponent className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -53,7 +52,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconTextBoxComp />
+              <Icons.IconTextBoxComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -69,7 +68,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconTextAreaComp />
+              <Icons.IconTextAreaComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -85,7 +84,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconDropdownComp />
+              <Icons.IconDropdownComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -101,7 +100,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconRadioComp />
+              <Icons.IconRadioComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -117,7 +116,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconCheckboxComp />
+              <Icons.IconCheckboxComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -133,7 +132,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconStepperComp />
+              <Icons.IconStepperComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -149,7 +148,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconToggleComp />
+              <Icons.IconToggleComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -165,7 +164,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconSliderComp />
+              <Icons.IconSliderComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -181,7 +180,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconDatePickerComp />
+              <Icons.IconDatePickerComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -197,7 +196,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconColorPickerComp />
+              <Icons.IconColorPickerComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -213,7 +212,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconUploaderComp />
+              <Icons.IconUploaderComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -229,7 +228,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconPagination />
+              <Icons.IconPagination className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -245,7 +244,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconProgressBar />
+              <Icons.IconProgressBar className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -261,7 +260,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconSearchComp />
+              <Icons.IconSearchComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -277,7 +276,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconSelectComp />
+              <Icons.IconSelectComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -293,7 +292,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconLabelComp />
+              <Icons.IconLabelComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -326,7 +325,7 @@ export default function Page() {
         >
           <Card>
             <Center h="140px">
-              <Icons.IconFooterComp />
+              <Icons.IconFooterComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -342,7 +341,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconTooltipComp />
+              <Icons.IconTooltipComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -358,7 +357,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconTabComp />
+              <Icons.IconTabComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -374,7 +373,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconMenuComp />
+              <Icons.IconMenuComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -390,7 +389,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconHeaderComp />
+              <Icons.IconHeaderComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -406,7 +405,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconConfirmComp />
+              <Icons.IconConfirmComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -422,7 +421,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconSnackbarComp />
+              <Icons.IconSnackbarComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -438,7 +437,7 @@ export default function Page() {
           </Card>
           <Card>
             <Center h="140px">
-              <Icons.IconBottomSheetComp />
+              <Icons.IconBottomSheetComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
@@ -471,7 +470,7 @@ export default function Page() {
         >
           <Card>
             <Center h="140px">
-              <Icons.IconThemeButtonComp />
+              <Icons.IconThemeButtonComp className={css({ w: '100%' })} />
             </Center>
             <Flex
               alignItems="center"
diff --git a/apps/landing/src/components/icons/components/IconCheckboxComp.tsx b/apps/landing/src/components/icons/components/IconCheckboxComp.tsx
index 801e0b71..a48bb156 100644
--- a/apps/landing/src/components/icons/components/IconCheckboxComp.tsx
+++ b/apps/landing/src/components/icons/components/IconCheckboxComp.tsx
@@ -10,6 +10,7 @@ export default function IconCheckboxComp({
   const theme = useTheme()
   return (
     <svg
+      className={className}
       fill="none"
       height="140"
       viewBox="0 0 259 140"
diff --git a/apps/landing/src/components/icons/components/IconSelectComp.tsx b/apps/landing/src/components/icons/components/IconSelectComp.tsx
index 82495bca..ab5380a7 100644
--- a/apps/landing/src/components/icons/components/IconSelectComp.tsx
+++ b/apps/landing/src/components/icons/components/IconSelectComp.tsx
@@ -10,6 +10,7 @@ export default function IconSelectComp({
   const theme = useTheme()
   return (
     <svg
+      className={className}
       fill="none"
       height="140"
       viewBox="0 0 259 140"