feat(admin,admin-ui,medusa): Add Medusa Admin plugin (#3334)

2023-03-03 10:09:16 +01:00
parent d6b1ad1ccd
commit 40de54b010
928 changed files with 85441 additions and 384 deletions
--- a/packages/admin-ui/ui/src/App.tsx
+++ b/packages/admin-ui/ui/src/App.tsx
@@ -0,0 +1,45 @@
+import { lazy, Suspense } from "react"
+import {
+  createBrowserRouter,
+  createRoutesFromElements,
+  Route,
+  RouterProvider,
+} from "react-router-dom"
+import Spinner from "./components/atoms/spinner"
+
+const NotFound = lazy(() => import("./pages/404"))
+const Dashboard = lazy(() => import("./pages/a"))
+const IndexPage = lazy(() => import("./pages/index"))
+const InvitePage = lazy(() => import("./pages/invite"))
+const LoginPage = lazy(() => import("./pages/login"))
+const ResetPasswordPage = lazy(() => import("./pages/reset-password"))
+
+const router = createBrowserRouter(
+  createRoutesFromElements(
+    <>
+      <Route path="/" element={<IndexPage />} />
+      <Route path="a/*" element={<Dashboard />} />
+      <Route path="invite" element={<InvitePage />} />
+      <Route path="login" element={<LoginPage />} />
+      <Route path="reset-password" element={<ResetPasswordPage />} />
+      <Route path="*" element={<NotFound />} />
+    </>
+  ),
+  {
+    basename: __BASE__,
+  }
+)
+
+const Loading = () => (
+  <div className="bg-grey-5 text-grey-90 flex h-screen w-full items-center justify-center">
+    <Spinner variant="secondary" />
+  </div>
+)
+
+const App = () => (
+  <Suspense fallback={<Loading />}>
+    <RouterProvider router={router} />
+  </Suspense>
+)
+
+export default App
--- a/packages/admin-ui/ui/src/assets/styles/emoji-picker.css
+++ b/packages/admin-ui/ui/src/assets/styles/emoji-picker.css
@@ -0,0 +1,107 @@
+.emoji-picker-react {
+    padding: 16px !important;
+    border: none !important;
+}
+
+.emoji-picker-react .emoji-group {
+    padding: 0 !important;
+    font-size: 12px !important;
+    font-weight: 400 !important;
+}
+
+.emoji-picker-react .emoji-group:before {
+    font-family: "Inter" !important;
+    text-transform: none !important;
+    font-size: 12px !important;
+    font-weight: 600 !important;
+}
+
+.emoji-picker-react .native {
+    font-size: 24px !important;
+}
+
+.emoji-picker-react .emoji {
+    color: #F3F4F6 !important;
+}
+
+.emoji-picker-react input.emoji-search {
+    background-color: #F9FAFB !important;
+    border-radius: 4px !important;
+    border-color: #E5E7EB !important;
+    margin: 0 !important;
+    width: 100% !important;
+    font-size: 12px !important;
+    font-family: "Inter" !important;
+    color: #111827 !important;
+    caret-color: #7C3AED !important;
+}
+
+.emoji-picker-react input.emoji-search::placeholder {
+    font-size: 12px !important;
+    font-family: "Inter" !important;
+    color: #9CA3AF !important;
+}
+
+.emoji-picker-react .emoji-categories button.icn-smileys_people {
+ background-image: url("../svg/happy.svg") !important;
+}
+
+.emoji-picker-react .emoji-categories button.icn-animals_nature {
+    background-image: url("../svg/sprout.svg") !important;
+}
+
+.emoji-picker-react .emoji-categories button.icn-food_drink {
+    background-image: url("../svg/carrot.svg") !important;
+}
+
+.emoji-picker-react .emoji-categories button.icn-travel_places {
+    background-image: url("../svg/plane.svg") !important;
+}
+
+.emoji-picker-react .emoji-categories button.icn-activities {
+    background-image: url("../svg/controller.svg") !important;
+}
+
+.emoji-picker-react .emoji-categories button.icn-objects {
+    background-image: url("../svg/lightbulb.svg") !important;
+}
+
+.emoji-picker-react .emoji-categories button.icn-symbols {
+    background-image: url("../svg/heart.svg") !important;
+}
+
+.emoji-picker-react .emoji-categories button.icn-flags {
+    background-image: url("../svg/flag.svg") !important;
+}
+
+.emoji-picker-react .emoji-categories button {
+    width: 32px !important;
+    height: 32px !important;
+    border-radius: 4px !important;
+}
+
+.emoji-picker-react .emoji-categories button.active {
+    background-color: white !important;
+}
+
+.emoji-picker-react .emoji-categories {
+    background-color: #F3F4F6 !important;
+    padding: 4px !important;
+    border-radius: 4px !important;
+    margin-bottom: 8px !important;
+}
+
+.emoji-picker-react .active-category-indicator-wrapper .active-category-indicator {
+    display: none !important;
+}
+
+.emoji-scroll-wrapper {
+    overflow-x: hidden !important;
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+}
+
+.emoji-scroll-wrapper::-webkit-scrollbar {
+    /* chrome */
+    display: none;
+}
--- a/packages/admin-ui/ui/src/assets/styles/global.css
+++ b/packages/admin-ui/ui/src/assets/styles/global.css
@@ -0,0 +1,456 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "Inter";
+  src: url("../../fonts/Inter-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("../../fonts/Inter-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto Mono";
+  src: url("../../fonts/RobotoMono-Bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto Mono";
+  src: url("../../fonts/RobotoMono-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@layer base {
+  html {
+    @apply overflow-hidden;
+  }
+}
+
+@layer components {
+  .inter-5xlarge-regular {
+    @apply font-sans text-5xlarge leading-4xlarge font-normal;
+  }
+  .inter-5xlarge-semibold {
+    @apply font-sans text-5xlarge leading-4xlarge font-semibold;
+  }
+
+  .inter-4xlarge-regular {
+    @apply font-sans text-4xlarge leading-3xlarge font-normal;
+  }
+  .inter-4xlarge-semibold {
+    @apply font-sans text-4xlarge leading-3xlarge font-semibold;
+  }
+
+  .inter-3xlarge-regular {
+    @apply font-sans text-3xlarge leading-2xlarge font-normal;
+  }
+  .inter-3xlarge-semibold {
+    @apply font-sans text-3xlarge leading-2xlarge font-semibold;
+  }
+
+  .inter-2xlarge-regular {
+    @apply font-sans text-2xlarge leading-xlarge font-normal;
+  }
+  .inter-2xlarge-semibold {
+    @apply font-sans text-2xlarge leading-xlarge font-semibold;
+  }
+
+  .inter-xlarge-regular {
+    @apply font-sans text-xlarge leading-large font-normal;
+  }
+  .inter-xlarge-semibold {
+    @apply font-sans text-xlarge leading-large font-semibold;
+  }
+
+  .inter-large-regular {
+    @apply font-sans text-large leading-base font-normal;
+  }
+  .inter-large-semibold {
+    @apply font-sans text-large leading-base font-semibold;
+  }
+
+  .inter-base-regular {
+    @apply font-sans text-base leading-base font-normal;
+  }
+  .inter-base-semibold {
+    @apply font-sans text-base leading-base font-semibold;
+  }
+
+  .inter-small-regular {
+    @apply font-sans text-small leading-small font-normal;
+  }
+  .inter-small-semibold {
+    @apply font-sans text-small leading-small font-semibold;
+  }
+
+  .inter-xsmall-regular {
+    @apply font-sans text-xsmall leading-xsmall font-normal;
+  }
+  .inter-xsmall-semibold {
+    @apply font-sans text-xsmall leading-xsmall font-semibold;
+  }
+
+  .mono-5xlarge-regular {
+    @apply font-mono text-5xlarge leading-4xlarge font-normal;
+  }
+  .mono-5xlarge-semibold {
+    @apply font-mono text-5xlarge leading-4xlarge font-bold;
+  }
+
+  .mono-4xlarge-regular {
+    @apply font-mono text-4xlarge leading-3xlarge font-normal;
+  }
+  .mono-4xlarge-semibold {
+    @apply font-mono text-4xlarge leading-3xlarge font-bold;
+  }
+
+  .mono-3xlarge-regular {
+    @apply font-mono text-3xlarge leading-2xlarge font-normal;
+  }
+  .mono-3xlarge-semibold {
+    @apply font-mono text-3xlarge leading-2xlarge font-bold;
+  }
+
+  .mono-2xlarge-regular {
+    @apply font-mono text-2xlarge leading-xlarge font-normal;
+  }
+  .mono-2xlarge-semibold {
+    @apply font-mono text-2xlarge leading-xlarge font-bold;
+  }
+
+  .mono-xlarge-regular {
+    @apply font-mono text-xlarge leading-large font-normal;
+  }
+  .mono-xlarge-semibold {
+    @apply font-mono text-xlarge leading-large font-bold;
+  }
+
+  .mono-large-regular {
+    @apply font-mono text-large leading-base font-normal;
+  }
+  .mono-large-semibold {
+    @apply font-mono text-large leading-base font-bold;
+  }
+
+  .mono-base-regular {
+    @apply font-mono text-base leading-base font-normal;
+  }
+  .mono-base-semibold {
+    @apply font-mono text-base leading-base font-bold;
+  }
+
+  .mono-small-regular {
+    @apply font-mono text-small leading-small font-normal;
+  }
+  .mono-small-semibold {
+    @apply font-mono text-small leading-small font-bold;
+  }
+
+  .mono-xsmall-regular {
+    @apply font-mono text-xsmall leading-xsmall font-normal;
+  }
+  .mono-xsmall-semibold {
+    @apply font-mono text-xsmall leading-xsmall font-bold;
+  }
+
+  .radio-outer-ring > span.indicator[data-state="checked"] {
+    @apply rounded-circle shadow-violet-60 shadow-[0_0_0_2px];
+  }
+
+  .bold-active-item + span {
+    @apply inter-base-semibold;
+  }
+}
+
+@layer components {
+  .react-select-container {
+    @apply p-0 -mx-3 border-0 mb-1 cursor-text h-6;
+
+    .react-select__control {
+      @apply border-0 bg-inherit shadow-none;
+    }
+
+    .react-select__control,
+    .react-select__control--is-focused,
+    .react-select__control--menu-is-open {
+      @apply h-6 p-0 m-0 !important;
+    }
+
+    .react-select__value-container--is-multi,
+    .react-select__value-container--has-value {
+      @apply h-6 pl-3 p-0 m-0 !important;
+    }
+
+    .react-select__menu,
+    .react-select__menu-list {
+      @apply rounded-t-none mt-0 z-[110] !important;
+    }
+
+    .react-select__value-container {
+      @apply pl-3 pr-0;
+    }
+
+    .react-select__indicators {
+      @apply p-0 h-full items-center flex pr-3;
+
+      .react-select__indicator {
+        @apply p-0;
+      }
+    }
+
+    .react-select__input {
+      @apply w-full mt-0 min-w-[120px] pt-0 !important;
+    }
+
+    .react-select__option,
+    .react-select__option--is-focused,
+    .react-select__option--is-selected {
+      @apply bg-grey-0 hover:bg-grey-5 !important;
+    }
+
+    .react-select__multi-value,
+    .react-select__input-container {
+      @apply my-0 py-0;
+    }
+  }
+}
+
+@layer components {
+  .badge {
+    @apply w-min py-0.5 px-2 rounded-rounded inter-small-semibold;
+  }
+
+  .badge-disabled {
+    @apply bg-grey-50 bg-opacity-10 text-grey-50;
+  }
+
+  .badge-primary {
+    @apply bg-violet-60 bg-opacity-10 text-violet-60;
+  }
+
+  .badge-danger {
+    @apply bg-rose-50 bg-opacity-10 text-rose-50;
+  }
+
+  .badge-success {
+    @apply bg-teal-50 bg-opacity-10 text-teal-50;
+  }
+
+  .badge-warning {
+    @apply bg-yellow-40 bg-opacity-20 text-yellow-60;
+  }
+
+  .badge-ghost {
+    @apply text-grey-90 border border-grey-20 whitespace-nowrap;
+  }
+
+  .badge-default {
+    @apply inter-small-regular bg-grey-10 text-grey-90 whitespace-nowrap;
+  }
+
+  .btn {
+    @apply flex items-center justify-center rounded-rounded focus:outline-none focus:shadow-cta;
+  }
+
+  .btn-large {
+    @apply inter-base-semibold px-large py-small;
+  }
+
+  .btn-medium {
+    @apply inter-base-semibold px-base py-xsmall;
+  }
+
+  .btn-small {
+    @apply inter-small-semibold px-small py-[6px];
+  }
+
+  .btn-primary {
+    @apply bg-violet-60 text-grey-0 hover:bg-violet-50 active:bg-violet-70  disabled:bg-grey-20 disabled:text-grey-40;
+  }
+
+  .btn-secondary {
+    @apply bg-grey-0 text-grey-90 border border-grey-20 hover:bg-grey-5 active:bg-grey-5 active:text-violet-60  focus:border-violet-60 disabled:bg-grey-0 disabled:text-grey-30;
+  }
+
+  .btn-danger {
+    @apply bg-grey-0 text-rose-50 border border-grey-20 hover:bg-grey-10 active:bg-grey-20 disabled:bg-grey-0 disabled:text-grey-30;
+  }
+
+  .btn-nuclear {
+    @apply bg-rose-50 text-grey-0 hover:bg-rose-40 active:bg-rose-60 disabled:bg-grey-20 disabled:text-grey-40;
+  }
+
+  .btn-ghost {
+    @apply bg-transparent text-grey-90 hover:bg-grey-5 active:bg-grey-5 active:text-violet-60  focus:border-violet-60 disabled:bg-transparent disabled:text-grey-30;
+  }
+
+  .btn-primary-large {
+    @apply btn btn-large btn-primary;
+  }
+  .btn-primary-medium {
+    @apply btn btn-medium;
+  }
+  .btn-primary-small {
+    @apply btn btn-small;
+  }
+  .btn-secondary-large {
+    @apply btn btn-large btn-seconday;
+  }
+  .btn-secondary-medium {
+    @apply btn btn-medium btn-seconday;
+  }
+  .btn-secondary-small {
+    @apply btn btn-small btn-seconday;
+  }
+  .btn-ghost-large {
+    @apply btn btn-large btn-ghost;
+  }
+  .btn-ghost-medium {
+    @apply btn btn-medium btn-ghost;
+  }
+  .btn-ghost-small {
+    @apply btn btn-small btn-ghost;
+  }
+}
+
+@layer components {
+  .date-picker {
+    @apply border-0 outline-none pt-6 !important;
+
+    .react-datepicker__month-container {
+      .react-datepicker__header {
+        @apply bg-inherit border-0;
+      }
+    }
+
+    .react-datepicker__day-names {
+      @apply inter-base-semibold pt-4;
+
+      .react-datepicker__day-name {
+        @apply w-[40px] m-0;
+      }
+    }
+
+    .react-datepicker__month {
+      @apply m-0;
+    }
+    .react-datepicker__day {
+      @apply inter-base-regular;
+    }
+    .react-datepicker__day--today {
+      @apply text-grey-90 inter-base-semibold bg-grey-10 rounded !important;
+    }
+
+    .react-datepicker__day--outside-month,
+    .past {
+      @apply text-grey-40 !important;
+    }
+
+    .date {
+      @apply text-grey-90 m-[0px] w-[38px] h-[38px] align-middle relative leading-none pt-3;
+      :hover {
+        @apply cursor-pointer;
+      }
+    }
+    .chosen,
+    .react-datepicker__day--keyboard-selected {
+      @apply bg-violet-60 text-grey-0 inter-base-semibold leading-none !important;
+    }
+  }
+
+  .time-list::-webkit-scrollbar {
+    /* chrome */
+    display: none;
+  }
+
+  .time-list {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .vice-city {
+    @apply bg-gradient-to-tr from-vice-start to-vice-stop;
+  }
+
+  .hidden-actions[data-state="open"] {
+    opacity: 1;
+  }
+
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  ::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply rounded-rounded bg-grey-30;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-grey-40;
+  }
+
+  .accordion-margin-transition {
+    @apply transition-[margin] duration-300 ease-[cubic-bezier(0.87,0,0.13,1)];
+  }
+
+  .col-tree:last-child .bottom-half-dash {
+    @apply border-none;
+  }
+}
+
+.scrolling-touch {
+  -webkit-overflow-scrolling: touch;
+}
+.scrolling-auto {
+  -webkit-overflow-scrolling: auto;
+}
+
+/* Classes to remove number spinners from inputs of type number */
+/* Chrome, Safari, Edge, Opera */
+.remove-number-spinner::-webkit-outer-spin-button,
+.remove-number-spinner::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+.remove-number-spinner {
+  -moz-appearance: textfield;
+}
--- a/packages/admin-ui/ui/src/assets/svg/carrot.svg
+++ b/packages/admin-ui/ui/src/assets/svg/carrot.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4292 12.3984L10.556 10.5251M2.47656 17.5004C2.47656 17.5004 9.99245 14.8351 12.1703 12.6573C12.4888 12.3393 12.7416 11.9617 12.9141 11.546C13.0867 11.1303 13.1757 10.6847 13.176 10.2346C13.1764 9.78457 13.0881 9.33883 12.9162 8.92288C12.7443 8.50693 12.4921 8.12891 12.1741 7.81041C11.8561 7.49191 11.4785 7.23917 11.0628 7.0666C10.6471 6.89404 10.2015 6.80504 9.75147 6.80469C9.3014 6.80434 8.85566 6.89263 8.43971 7.06454C8.02376 7.23645 7.64575 7.48861 7.32724 7.80661C5.14177 9.99208 2.47656 17.5004 2.47656 17.5004ZM7.32724 11.6369L5.76619 10.0835L7.32724 11.6369Z" stroke="#9CA3AF" stroke-width="1.52298" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.5003 7.82962C17.5003 7.82962 16.4876 6.30664 14.8351 6.30664C13.5863 6.30664 12.1699 7.82962 12.1699 7.82962C12.1699 7.82962 13.1827 9.3526 14.8351 9.3526C16.4876 9.3526 17.5003 7.82962 17.5003 7.82962Z" stroke="#9CA3AF" stroke-width="1.52298" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.1695 2.49805C12.1695 2.49805 10.6465 3.51083 10.6465 5.16326C10.6465 6.81569 12.1695 7.82847 12.1695 7.82847C12.1695 7.82847 13.6924 6.42733 13.6924 5.16326C13.6924 3.51083 12.1695 2.49805 12.1695 2.49805Z" stroke="#9CA3AF" stroke-width="1.52298" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/packages/admin-ui/ui/src/assets/svg/controller.svg
+++ b/packages/admin-ui/ui/src/assets/svg/controller.svg
@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.47266 8.89453H8.47266" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.97266 7.39453V10.3945" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.4512 9.58398H12.4599" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.1055 7.71289H14.1142" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.99 4.5H6.01C5.26771 4.50018 4.55184 4.78865 4.00078 5.30965C3.44971 5.83065 3.10258 6.54717 3.0265 7.32071C3.022 7.36157 3.019 7.40007 3.01375 7.44014C2.953 7.96971 2.5 11.9297 2.5 13.1429C2.5 13.768 2.73705 14.3676 3.15901 14.8096C3.58097 15.2517 4.15326 15.5 4.75 15.5C5.5 15.5 5.875 15.1071 6.25 14.7143L7.3105 13.6033C7.59174 13.3086 7.97321 13.1429 8.371 13.1429H11.629C12.0268 13.1429 12.4083 13.3086 12.6895 13.6033L13.75 14.7143C14.125 15.1071 14.5 15.5 15.25 15.5C15.8467 15.5 16.419 15.2517 16.841 14.8096C17.2629 14.3676 17.5 13.768 17.5 13.1429C17.5 11.9289 17.047 7.96971 16.9863 7.44014C16.981 7.40086 16.978 7.36157 16.9735 7.3215C16.8976 6.54782 16.5505 5.8311 15.9995 5.30994C15.4484 4.78878 14.7324 4.5002 13.99 4.5V4.5Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/packages/admin-ui/ui/src/assets/svg/flag.svg
+++ b/packages/admin-ui/ui/src/assets/svg/flag.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.16602 12.25C4.16602 12.25 4.91602 11.5 7.16602 11.5C9.41602 11.5 10.916 13 13.166 13C15.416 13 16.166 12.25 16.166 12.25V3.25C16.166 3.25 15.416 4 13.166 4C10.916 4 9.41602 2.5 7.16602 2.5C4.91602 2.5 4.16602 3.25 4.16602 3.25V12.25Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.16602 17.5V12.25" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/packages/admin-ui/ui/src/assets/svg/happy.svg
+++ b/packages/admin-ui/ui/src/assets/svg/happy.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.66602 11.666C6.66602 11.666 7.91602 13.3327 9.99935 13.3327C12.0827 13.3327 13.3327 11.666 13.3327 11.666" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 8H8.00875" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 8H12.0088" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/packages/admin-ui/ui/src/assets/svg/heart.svg
+++ b/packages/admin-ui/ui/src/assets/svg/heart.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.316 4.52475C15.9399 4.14732 15.493 3.84785 15.0008 3.64351C14.5087 3.43917 13.9811 3.33398 13.4483 3.33398C12.9154 3.33398 12.3878 3.43917 11.8957 3.64351C11.4036 3.84785 10.9567 4.14732 10.5806 4.52475L10.0033 5.10955L9.42596 4.52475C9.04984 4.14732 8.6029 3.84785 8.11079 3.64351C7.61868 3.43917 7.09108 3.33398 6.55823 3.33398C6.02538 3.33398 5.49778 3.43917 5.00567 3.64351C4.51356 3.84785 4.06663 4.14732 3.6905 4.52475C2.10107 6.11419 2.0036 8.79823 4.00539 10.8375L10.0033 16.8354L16.0011 10.8375C18.0029 8.79823 17.9054 6.11419 16.316 4.52475Z" stroke="#9CA3AF" stroke-width="1.49947" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/packages/admin-ui/ui/src/assets/svg/lightbulb.svg
+++ b/packages/admin-ui/ui/src/assets/svg/lightbulb.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.875 14.25H12.125" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.58398 17.084H11.4173" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.1887 11.416C12.3162 10.7218 12.6492 10.1835 13.1875 9.64518C13.5295 9.33033 13.801 8.94664 13.9842 8.51934C14.1673 8.09205 14.2579 7.63083 14.25 7.16602C14.25 6.03885 13.8022 4.95784 13.0052 4.16081C12.2082 3.36378 11.1272 2.91602 10 2.91602C8.87283 2.91602 7.79183 3.36378 6.9948 4.16081C6.19777 4.95784 5.75 6.03885 5.75 7.16602C5.75 7.87435 5.91292 8.7456 6.8125 9.64518C7.32537 10.1141 7.67525 10.7345 7.81125 11.416" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/packages/admin-ui/ui/src/assets/svg/plane.svg
+++ b/packages/admin-ui/ui/src/assets/svg/plane.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9856 15.1639L12.6495 9.07732L15.2474 6.47938C16.3608 5.36598 16.732 3.88144 16.3608 3.13918C15.6186 2.76804 14.134 3.13918 13.0206 4.25258L10.4227 6.85052L4.33608 5.51443C3.96495 5.44021 3.66804 5.58866 3.51959 5.88557L3.29691 6.2567C3.14845 6.62783 3.22268 6.99897 3.51959 7.22165L7.45361 9.81959L5.96907 12.0464H3.74227L3 12.7887L5.2268 14.2732L6.71134 16.5L7.45361 15.7577V13.5309L9.68041 12.0464L12.2784 15.9804C12.501 16.2773 12.8722 16.3515 13.2433 16.2031L13.6144 16.0546C13.9113 15.832 14.0598 15.5351 13.9856 15.1639V15.1639Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/packages/admin-ui/ui/src/assets/svg/search.svg
+++ b/packages/admin-ui/ui/src/assets/svg/search.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.9696 18.0303C17.2625 18.3232 17.7374 18.3232 18.0302 18.0303C18.3231 17.7374 18.3231 17.2626 18.0302 16.9697L16.9696 18.0303ZM14.4052 13.3447C14.1124 13.0518 13.6375 13.0518 13.3446 13.3447C13.0517 13.6376 13.0517 14.1124 13.3446 14.4053L14.4052 13.3447ZM15.0833 9.16667C15.0833 12.4344 12.4344 15.0833 9.16667 15.0833V16.5833C13.2628 16.5833 16.5833 13.2628 16.5833 9.16667H15.0833ZM9.16667 15.0833C5.89898 15.0833 3.25 12.4344 3.25 9.16667H1.75C1.75 13.2628 5.07055 16.5833 9.16667 16.5833V15.0833ZM3.25 9.16667C3.25 5.89898 5.89898 3.25 9.16667 3.25V1.75C5.07055 1.75 1.75 5.07055 1.75 9.16667H3.25ZM9.16667 3.25C12.4344 3.25 15.0833 5.89898 15.0833 9.16667H16.5833C16.5833 5.07055 13.2628 1.75 9.16667 1.75V3.25ZM18.0302 16.9697L14.4052 13.3447L13.3446 14.4053L16.9696 18.0303L18.0302 16.9697Z" fill="#9CA3AF"/>
+</svg>
--- a/packages/admin-ui/ui/src/assets/svg/sprout.svg
+++ b/packages/admin-ui/ui/src/assets/svg/sprout.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.83398 16.666H14.1673" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.33398 16.6673C12.9173 14.584 9.00065 11.334 10.834 8.33398" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.91732 7.83349C8.83398 8.50016 9.41732 9.66683 9.83398 10.9168C8.16732 11.2502 6.91732 11.2502 5.83398 10.6668C4.83398 10.1668 3.91732 9.08349 3.33398 7.16683C5.66732 6.75016 7.00065 7.16683 7.91732 7.83349V7.83349Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.7498 5.00065C11.1145 5.99362 10.7949 7.15577 10.8332 8.33398C12.4165 8.25065 13.5832 7.83398 14.4165 7.16732C15.2498 6.33398 15.7498 5.25065 15.8332 3.33398C13.5832 3.41732 12.4998 4.16732 11.7498 5.00065Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/packages/admin-ui/ui/src/assets/svg/star.svg
+++ b/packages/admin-ui/ui/src/assets/svg/star.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 2.5L12.3175 7.195L17.5 7.9525L13.75 11.605L14.635 16.765L10 14.3275L5.365 16.765L6.25 11.605L2.5 7.9525L7.6825 7.195L10 2.5Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/packages/admin-ui/ui/src/components/atoms/avatar/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/avatar/index.tsx
@@ -0,0 +1,62 @@
+import * as RadixAvatar from "@radix-ui/react-avatar"
+import clsx from "clsx"
+import React from "react"
+import Spinner from "../spinner"
+
+type AvatarProps = {
+  user?: {
+    img?: string
+    first_name?: string
+    last_name?: string
+    email?: string
+  }
+  font?: string
+  color?: string
+  isLoading?: boolean
+}
+
+const Avatar: React.FC<AvatarProps> = ({
+  user,
+  font = "inter-small-semibold",
+  color = "bg-violet-60",
+  isLoading = false,
+}) => {
+  let username: string
+
+  if (user?.first_name && user?.last_name) {
+    username = user.first_name + " " + user.last_name
+  } else if (user?.email) {
+    username = user.email
+  } else {
+    username = "Medusa user"
+  }
+
+  return (
+    <RadixAvatar.Root
+      className={clsx(
+        "w-full h-full items-center justify-center overflow-hidden select-none rounded-circle",
+        color
+      )}
+    >
+      <RadixAvatar.Image
+        src={user?.img}
+        alt={username}
+        className="object-cover w-full h-full rounded-circle"
+      />
+      <RadixAvatar.Fallback
+        className={clsx(
+          "w-full h-full flex items-center justify-center bg-inherit text-grey-0 rounded-circle",
+          font
+        )}
+      >
+        {isLoading ? (
+          <Spinner size="small" variant="primary" />
+        ) : (
+          username.slice(0, 1).toUpperCase()
+        )}
+      </RadixAvatar.Fallback>
+    </RadixAvatar.Root>
+  )
+}
+
+export default Avatar
--- a/packages/admin-ui/ui/src/components/atoms/back-button/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/back-button/index.tsx
@@ -0,0 +1,29 @@
+import clsx from "clsx"
+import React from "react"
+import { useNavigate } from "react-router-dom"
+import ArrowLeftIcon from "../../fundamentals/icons/arrow-left-icon"
+
+type Props = {
+  path?: string
+  label?: string
+  className?: string
+}
+
+const BackButton = ({ path, label = "Go back", className }: Props) => {
+  const navigate = useNavigate()
+  return (
+    <button
+      onClick={() => {
+        path ? navigate(path) : navigate(-1)
+      }}
+      className={clsx("px-small py-xsmall", className)}
+    >
+      <div className="flex items-center gap-x-xsmall text-grey-50 inter-grey-40 inter-small-semibold">
+        <ArrowLeftIcon size={20} />
+        <span className="ml-1">{label}</span>
+      </div>
+    </button>
+  )
+}
+
+export default BackButton
--- a/packages/admin-ui/ui/src/components/atoms/checkbox/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/checkbox/index.tsx
@@ -0,0 +1,32 @@
+import clsx from "clsx"
+import React, { ReactNode, useImperativeHandle } from "react"
+
+export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  label: ReactNode
+}
+
+const Checkbox = React.forwardRef(
+  ({ label, value, className, id, ...rest }: CheckboxProps, ref) => {
+    const checkboxRef = React.useRef<HTMLInputElement>(null)
+
+    useImperativeHandle(ref, () => checkboxRef.current)
+    return (
+      <label
+        className={clsx("flex items-center cursor-pointer", className)}
+        htmlFor={id}
+      >
+        <input
+          type="checkbox"
+          ref={checkboxRef}
+          className="form-checkbox w-[20px] h-[20px] rounded-base text-violet-60 focus:ring-0 mr-small border-grey-30"
+          value={value}
+          id={id}
+          {...rest}
+        />
+        {label}
+      </label>
+    )
+  }
+)
+
+export default Checkbox
--- a/packages/admin-ui/ui/src/components/atoms/copy-to-clipboard/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/copy-to-clipboard/index.tsx
@@ -0,0 +1,58 @@
+import clsx from "clsx"
+import React, { useEffect } from "react"
+import useClipboard from "../../../hooks/use-clipboard"
+import useNotification from "../../../hooks/use-notification"
+import Button from "../../fundamentals/button"
+import ClipboardCopyIcon from "../../fundamentals/icons/clipboard-copy-icon"
+
+type CopyToClipboardProps = {
+  value: string
+  displayValue?: string
+  successDuration?: number
+  showValue?: boolean
+  iconSize?: number
+  onCopy?: () => void
+}
+
+const CopyToClipboard: React.FC<CopyToClipboardProps> = ({
+  value,
+  displayValue,
+  successDuration = 3000,
+  showValue = true,
+  iconSize = 20,
+  onCopy = () => {},
+}) => {
+  const [isCopied, handleCopy] = useClipboard(value, {
+    onCopied: onCopy,
+    successDuration: successDuration,
+  })
+  const notification = useNotification()
+
+  useEffect(() => {
+    if (isCopied) {
+      notification("Success", "Copied!", "success")
+    }
+  }, [isCopied])
+
+  return (
+    <div className="flex items-center inter-small-regular text-grey-50 gap-x-xsmall">
+      <Button
+        variant="ghost"
+        size="small"
+        className={clsx("p-0 text-grey-50", {
+          ["text-violet-60"]: isCopied,
+        })}
+        onClick={handleCopy}
+      >
+        <ClipboardCopyIcon size={iconSize} />
+      </Button>
+      {showValue && (
+        <span className="w-full truncate">
+          {displayValue ? displayValue : value}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default CopyToClipboard
--- a/packages/admin-ui/ui/src/components/atoms/date-picker/custom-header.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/date-picker/custom-header.tsx
@@ -0,0 +1,44 @@
+import { ReactDatePickerCustomHeaderProps } from "react-datepicker"
+import NativeSelect from "../../molecules/native-select"
+import { getYearRange, monthNames } from "./utils"
+
+const CustomHeader = ({
+  date,
+  changeYear,
+  changeMonth,
+}: ReactDatePickerCustomHeaderProps) => {
+  const month = date.getMonth()
+  const monthName = monthNames[month]
+
+  const year = date.getFullYear()
+  return (
+    <div className="flex w-full gap-4 items-center">
+      <div className="flex flex-1 items-center justify-end gap-3">
+        <NativeSelect
+          defaultValue={monthName}
+          onValueChange={(v) => changeMonth(monthNames.indexOf(v))}
+        >
+          {monthNames.map((month) => (
+            <NativeSelect.Item key={month} value={month}>
+              {month}
+            </NativeSelect.Item>
+          ))}
+        </NativeSelect>
+      </div>
+      <div className="flex flex-1 items-center justify-start gap-3">
+        <NativeSelect
+          defaultValue={year.toString()}
+          onValueChange={(v) => changeYear(parseInt(v, 10))}
+        >
+          {getYearRange().map((year) => (
+            <NativeSelect.Item key={year} value={year.toString()}>
+              {year.toString()}
+            </NativeSelect.Item>
+          ))}
+        </NativeSelect>
+      </div>
+    </div>
+  )
+}
+
+export default CustomHeader
--- a/packages/admin-ui/ui/src/components/atoms/date-picker/date-picker.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/date-picker/date-picker.tsx
@@ -0,0 +1,115 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import clsx from "clsx"
+import moment from "moment"
+import React, { useEffect, useState } from "react"
+import ReactDatePicker from "react-datepicker"
+import "react-datepicker/dist/react-datepicker.css"
+import Button from "../../fundamentals/button"
+import ArrowDownIcon from "../../fundamentals/icons/arrow-down-icon"
+import InputContainer from "../../fundamentals/input-container"
+import InputHeader from "../../fundamentals/input-header"
+import CustomHeader from "./custom-header"
+import { DateTimePickerProps } from "./types"
+
+const getDateClassname = (d, tempDate) => {
+  return moment(d).format("YY,MM,DD") === moment(tempDate).format("YY,MM,DD")
+    ? "date chosen"
+    : `date ${
+        moment(d).format("YY,MM,DD") < moment(new Date()).format("YY,MM,DD")
+          ? "past"
+          : ""
+      }`
+}
+
+const DatePicker: React.FC<DateTimePickerProps> = ({
+  date,
+  onSubmitDate,
+  label = "start date",
+  required = false,
+  tooltipContent,
+  tooltip,
+}) => {
+  const [tempDate, setTempDate] = useState(date)
+  const [isOpen, setIsOpen] = useState(false)
+
+  useEffect(() => setTempDate(date), [isOpen])
+
+  const submitDate = () => {
+    // update only date, month and year
+    const newDate = new Date(date.getTime())
+    newDate.setUTCDate(tempDate.getUTCDate())
+    newDate.setUTCMonth(tempDate.getUTCMonth())
+    newDate.setUTCFullYear(tempDate.getUTCFullYear())
+
+    onSubmitDate(newDate)
+    setIsOpen(false)
+  }
+
+  return (
+    <div className="w-full">
+      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverPrimitive.Trigger asChild>
+          <button
+            className={clsx("w-full rounded-rounded border ", {
+              "shadow-input border-violet-60": isOpen,
+              "border-grey-20": !isOpen,
+            })}
+          >
+            <InputContainer className="border-0 shadown-none focus-within:shadow-none">
+              <div className="w-full flex text-grey-50 pr-0.5 justify-between">
+                <InputHeader
+                  {...{
+                    label,
+                    required,
+                    tooltipContent,
+                    tooltip,
+                  }}
+                />
+                <ArrowDownIcon size={16} />
+              </div>
+              <label className="w-full text-left">
+                {moment(date).format("ddd, DD MMM YYYY")}
+              </label>
+            </InputContainer>
+          </button>
+        </PopoverPrimitive.Trigger>
+        <PopoverPrimitive.Content
+          side="top"
+          sideOffset={8}
+          className="rounded-rounded px-8  border border-grey-20 bg-grey-0 w-full shadow-dropdown"
+        >
+          <CalendarComponent date={tempDate} onChange={setTempDate} />
+          <div className="flex w-full mb-8 mt-5">
+            <Button
+              variant="ghost"
+              size="medium"
+              onClick={() => setIsOpen(false)}
+              className="mr-2 w-1/3 flex justify-center border border-grey-20"
+            >
+              Cancel
+            </Button>
+            <Button
+              size="medium"
+              variant="primary"
+              onClick={() => submitDate()}
+              className="w-2/3 flex justify-center"
+            >{`Set ${label}`}</Button>
+          </div>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Root>
+    </div>
+  )
+}
+
+export const CalendarComponent = ({ date, onChange }) => (
+  <ReactDatePicker
+    selected={date}
+    inline
+    onChange={onChange}
+    calendarClassName="date-picker"
+    dayClassName={(d) => getDateClassname(d, date)}
+    renderCustomHeader={({ ...props }) => <CustomHeader {...props} />}
+  />
+)
+
+export default DatePicker
--- a/packages/admin-ui/ui/src/components/atoms/date-picker/time-picker.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/date-picker/time-picker.tsx
@@ -0,0 +1,102 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import clsx from "clsx"
+import { isNil } from "lodash"
+import moment from "moment"
+import React, { useEffect, useState } from "react"
+import ArrowDownIcon from "../../fundamentals/icons/arrow-down-icon"
+import ClockIcon from "../../fundamentals/icons/clock-icon"
+import InputContainer from "../../fundamentals/input-container"
+import InputHeader from "../../fundamentals/input-header"
+import NumberScroller from "../number-scroller"
+import { DateTimePickerProps } from "./types"
+
+const TimePicker: React.FC<DateTimePickerProps> = ({
+  date,
+  onSubmitDate,
+  label = "start date",
+  required = false,
+  tooltipContent,
+  tooltip,
+}) => {
+  const [selectedMinute, setSelectedMinute] = useState(
+    new Date(date)?.getUTCMinutes()
+  )
+  const [selectedHour, setSelectedHour] = useState(
+    new Date(date)?.getUTCHours()
+  )
+
+  useEffect(() => {
+    setSelectedMinute(new Date(date)?.getUTCMinutes())
+    setSelectedHour(new Date(date)?.getUTCHours())
+  }, [date])
+
+  useEffect(() => {
+    if (date && !isNil(selectedHour) && !isNil(selectedMinute)) {
+      const newDate = new Date(new Date(date).getTime())
+      newDate.setUTCHours(selectedHour)
+      newDate.setUTCMinutes(selectedMinute)
+      onSubmitDate(newDate)
+    }
+  }, [selectedMinute, selectedHour])
+
+  const [isOpen, setIsOpen] = useState(false)
+
+  const minuteNumbers = [...Array(60).keys()]
+  const hourNumbers = [...Array(24).keys()]
+
+  return (
+    <div className="w-full">
+      <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverPrimitive.Trigger asChild>
+          <button
+            className={clsx("w-full rounded-rounded border ", {
+              "shadow-input border-violet-60": isOpen,
+              "border-grey-20": !isOpen,
+            })}
+          >
+            <InputContainer className="border-0 shadown-none focus-within:shadow-none">
+              <div className="w-full flex text-grey-50 pr-0.5 justify-between">
+                <InputHeader
+                  {...{
+                    label,
+                    required,
+                    tooltipContent,
+                    tooltip,
+                  }}
+                />
+                <ArrowDownIcon size={16} />
+              </div>
+              <div className="w-full items-center flex text-left text-grey-40">
+                <ClockIcon size={16} />
+                <span className="mx-1">UTC</span>
+                <span className="text-grey-90">
+                  {moment.utc(date).format("HH:mm")}
+                </span>
+              </div>
+            </InputContainer>
+          </button>
+        </PopoverPrimitive.Trigger>
+        <PopoverPrimitive.Content
+          side="top"
+          sideOffset={8}
+          className="rounded-rounded scrollbar-hide border px-6 pt-6 pb-4 border-grey-20 bg-grey-0 w-full flex shadow-dropdown"
+        >
+          <NumberScroller
+            numbers={hourNumbers}
+            selected={selectedHour}
+            onSelect={(n) => setSelectedHour(n)}
+            className="pr-4"
+          />
+          <NumberScroller
+            numbers={minuteNumbers}
+            selected={selectedMinute}
+            onSelect={(n) => setSelectedMinute(n)}
+          />
+          <div className="absolute bottom-4 left-0 right-0 bg-gradient-to-b from-transparent to-grey-0 h-xlarge z-10" />
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Root>
+    </div>
+  )
+}
+
+export default TimePicker
--- a/packages/admin-ui/ui/src/components/atoms/date-picker/types.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/date-picker/types.tsx
@@ -0,0 +1,6 @@
+import { InputHeaderProps } from "../../fundamentals/input-header"
+
+export type DateTimePickerProps = {
+  date: Date
+  onSubmitDate: (newDate: Date) => void
+} & InputHeaderProps
--- a/packages/admin-ui/ui/src/components/atoms/date-picker/utils.ts
+++ b/packages/admin-ui/ui/src/components/atoms/date-picker/utils.ts
@@ -0,0 +1,25 @@
+export const range = (start, end) => {
+  const range: number[] = []
+  for (let i = start; i <= end; i++) {
+    range.push(i)
+  }
+  return range
+}
+
+export const getYearRange = (step = 20) =>
+  range(new Date().getFullYear() - step, new Date().getFullYear() + step)
+
+export const monthNames = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+]
--- a/packages/admin-ui/ui/src/components/atoms/fade-wrapper/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/fade-wrapper/index.tsx
@@ -0,0 +1,47 @@
+import clsx from "clsx"
+import React, { useEffect, useState } from "react"
+
+type FadeProps = {
+  isVisible: boolean
+  isFullScreen?: boolean
+  start?: string
+  transitionClass?: string
+  end?: string
+  classname?: string
+  children?: React.ReactNode
+}
+
+const Fade: React.FC<FadeProps> = ({
+  isVisible,
+  start,
+  end,
+  classname,
+  children,
+  isFullScreen = false,
+}) => {
+  const [show, setShow] = useState(false)
+
+  useEffect(() => {
+    if (show && !isVisible) {
+      setTimeout(() => setShow(false), 100)
+    } else {
+      setShow(isVisible)
+    }
+  })
+
+  const classes = {
+    [start || "scale-[0.98] opacity-0"]: !isVisible,
+    [end || "scale-100 opacity-100"]: isVisible,
+    "absolute inset-0": show && isFullScreen,
+  }
+
+  return (
+    <div
+      className={clsx("transition-all duration-100 z-50", classes, classname)}
+    >
+      {show ? children : null}
+    </div>
+  )
+}
+
+export default Fade
--- a/packages/admin-ui/ui/src/components/atoms/file-upload-field/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/file-upload-field/index.tsx
@@ -0,0 +1,105 @@
+import clsx from "clsx"
+import React, { useRef, useState } from "react"
+
+type FileUploadFieldProps = {
+  onFileChosen: (files: File[]) => void
+  filetypes: string[]
+  errorMessage?: string
+  placeholder?: React.ReactElement | string
+  className?: string
+  multiple?: boolean
+  text?: React.ReactElement | string
+}
+
+const defaultText = (
+  <span>
+    Drop your images here, or{" "}
+    <span className="text-violet-60">click to browse</span>
+  </span>
+)
+
+const FileUploadField: React.FC<FileUploadFieldProps> = ({
+  onFileChosen,
+  filetypes,
+  errorMessage,
+  className,
+  text = defaultText,
+  placeholder = "",
+  multiple = false,
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [fileUploadError, setFileUploadError] = useState(false)
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const fileList = e.target.files
+
+    if (fileList) {
+      onFileChosen(Array.from(fileList))
+    }
+  }
+
+  const handleFileDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    setFileUploadError(false)
+
+    e.preventDefault()
+
+    const files: File[] = []
+
+    if (e.dataTransfer.items) {
+      // Use DataTransferItemList interface to access the file(s)
+      for (let i = 0; i < e.dataTransfer.items.length; i++) {
+        // If dropped items aren't files, reject them
+        if (e.dataTransfer.items[i].kind === "file") {
+          const file = e.dataTransfer.items[i].getAsFile()
+          if (file && filetypes.indexOf(file.type) > -1) {
+            files.push(file)
+          }
+        }
+      }
+    } else {
+      // Use DataTransfer interface to access the file(s)
+      for (let i = 0; i < e.dataTransfer.files.length; i++) {
+        if (filetypes.indexOf(e.dataTransfer.files[i].type) > -1) {
+          files.push(e.dataTransfer.files[i])
+        }
+      }
+    }
+    if (files.length === 1) {
+      onFileChosen(files)
+    } else {
+      setFileUploadError(true)
+    }
+  }
+
+  return (
+    <div
+      onClick={() => inputRef?.current?.click()}
+      onDrop={handleFileDrop}
+      onDragOver={(e) => e.preventDefault()}
+      className={clsx(
+        "flex flex-col select-none inter-base-regular text-grey-50 cursor-pointer items-center justify-center w-full h-full rounded-rounded border-2 border-dashed border-grey-20 transition-colors hover:border-violet-60 hover:text-grey-40",
+        className
+      )}
+    >
+      <div className="flex flex-col items-center">
+        <p>{text}</p>
+        {placeholder}
+      </div>
+      {fileUploadError && (
+        <span className="text-rose-60">
+          {errorMessage || "Please upload an image file"}
+        </span>
+      )}
+      <input
+        ref={inputRef}
+        accept={filetypes.join(", ")}
+        multiple={multiple}
+        type="file"
+        onChange={handleFileUpload}
+        className="hidden"
+      />
+    </div>
+  )
+}
+
+export default FileUploadField
--- a/packages/admin-ui/ui/src/components/atoms/includes-tax-tooltip/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/includes-tax-tooltip/index.tsx
@@ -0,0 +1,26 @@
+import clsx from "clsx"
+import React from "react"
+import TaxesIcon from "../../fundamentals/icons/taxes-icon"
+import Tooltip from "../tooltip"
+
+type Props = {
+  includesTax?: boolean
+}
+
+const IncludesTaxTooltip = ({ includesTax }: Props) => {
+  return (
+    <Tooltip content={includesTax ? "Tax incl. price" : "Tax excl. price"}>
+      <div className="w-large h-large rounded-rounded border border-grey-20 flex items-center justify-center">
+        <TaxesIcon
+          size={16}
+          className={clsx({
+            "text-grey-50": includesTax,
+            "text-grey-30": !includesTax,
+          })}
+        />
+      </div>
+    </Tooltip>
+  )
+}
+
+export default IncludesTaxTooltip
--- a/packages/admin-ui/ui/src/components/atoms/input-error/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/input-error/index.tsx
@@ -0,0 +1,73 @@
+import { ErrorMessage } from "@hookform/error-message"
+import clsx from "clsx"
+import React from "react"
+import { MultipleFieldErrors } from "react-hook-form"
+import Tooltip from "../tooltip"
+
+type InputErrorProps = {
+  errors?: { [x: string]: unknown }
+  name?: string
+  className?: string
+}
+
+const InputError = ({ errors, name, className }: InputErrorProps) => {
+  if (!errors || !name) {
+    return null
+  }
+
+  return (
+    <ErrorMessage
+      name={name}
+      errors={errors}
+      render={({ message, messages }) => {
+        return (
+          <div
+            className={clsx("text-rose-50 inter-small-regular mt-2", className)}
+          >
+            {messages ? (
+              <MultipleMessages messages={messages} />
+            ) : (
+              <p>{message}</p>
+            )}
+          </div>
+        )
+      }}
+    />
+  )
+}
+
+const MultipleMessages = ({ messages }: { messages: MultipleFieldErrors }) => {
+  const errors = Object.entries(messages).map(([_, message]) => message)
+
+  const displayedError = errors[0]
+  const remainderErrors = errors.slice(1)
+
+  return (
+    <div className="flex items-center gap-x-1 cursor-default">
+      <p>{displayedError}</p>
+      {remainderErrors?.length > 0 && (
+        <Tooltip
+          content={
+            <div className="text-rose-50 inter-small-regular">
+              {remainderErrors.map((e, i) => {
+                return (
+                  <p key={i}>
+                    {Array.from(Array(i + 1)).map((_) => "*")}
+                    {e}
+                  </p>
+                )
+              })}
+            </div>
+          }
+        >
+          <p>
+            +{remainderErrors.length}{" "}
+            {remainderErrors.length > 1 ? "errors" : "error"}
+          </p>
+        </Tooltip>
+      )}
+    </div>
+  )
+}
+
+export default InputError
--- a/packages/admin-ui/ui/src/components/atoms/loading-container/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/loading-container/index.tsx
@@ -0,0 +1,32 @@
+import * as React from "react"
+import Spinner from "../spinner"
+
+type LoadingContainerProps = {
+  isLoading: boolean
+  placeholder?: React.ReactElement
+  children: React.ReactElement | React.ReactElement[]
+}
+
+const LoadingContainer = ({
+  isLoading,
+  children,
+  placeholder,
+  ...props
+}: LoadingContainerProps) => {
+  placeholder = placeholder || <Spinner size="large" variant="secondary" />
+
+  if (isLoading) {
+    return (
+      <div
+        className="pt-2xlarge flex min-h-[756px] w-full items-center justify-center"
+        {...props}
+      >
+        {placeholder}
+      </div>
+    )
+  }
+
+  return children as React.ReactElement
+}
+
+export default LoadingContainer
--- a/packages/admin-ui/ui/src/components/atoms/notification/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/notification/index.tsx
@@ -0,0 +1,62 @@
+import React from "react"
+import type { Toast } from "react-hot-toast"
+import { toast as globalToast } from "react-hot-toast"
+import AlertIcon from "../../fundamentals/icons/alert-icon"
+import CheckCircleIcon from "../../fundamentals/icons/check-circle-icon"
+import CrossIcon from "../../fundamentals/icons/cross-icon"
+import InfoIcon from "../../fundamentals/icons/info-icon"
+import XCircleIcon from "../../fundamentals/icons/x-circle-icon"
+import ToasterContainer from "../toaster-container"
+
+export type NotificationTypes = "success" | "warning" | "error" | "info"
+
+type NotificationProps = {
+  toast: Toast
+  type: NotificationTypes
+  title: string
+  message: string
+}
+
+const Notification: React.FC<NotificationProps> = ({
+  toast,
+  type,
+  title,
+  message,
+}) => {
+  const onDismiss = () => {
+    globalToast.dismiss(toast.id)
+  }
+
+  return (
+    <ToasterContainer visible={toast.visible} className="w-[380px]">
+      <div>{getIcon(type)}</div>
+      <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow text-white">
+        <span className="inter-small-semibold">{title}</span>
+        <span className="inter-small-regular text-grey-20">{message}</span>
+      </div>
+      <div>
+        <button onClick={onDismiss}>
+          <CrossIcon size={ICON_SIZE} className="text-grey-40" />
+        </button>
+        <span className="sr-only">Close</span>
+      </div>
+    </ToasterContainer>
+  )
+}
+
+const ICON_SIZE = 20
+
+function getIcon(type: NotificationTypes) {
+  switch (type) {
+    case "success":
+      return <CheckCircleIcon size={ICON_SIZE} className="text-emerald-40" />
+    case "warning":
+      return <AlertIcon size={ICON_SIZE} className="text-orange-40" />
+    case "error":
+      return <XCircleIcon size={ICON_SIZE} className="text-rose-40" />
+    default:
+      return <InfoIcon size={ICON_SIZE} className="text-grey-40" />
+  }
+}
+
+export default Notification
--- a/packages/admin-ui/ui/src/components/atoms/number-scroller/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/number-scroller/index.tsx
@@ -0,0 +1,47 @@
+import clsx from "clsx"
+import React from "react"
+
+type NumberScrollerProps = {
+  numbers: number[]
+  selected: number
+  onSelect: (value: number) => void
+} & React.HTMLAttributes<HTMLDivElement>
+
+const NumberScroller: React.FC<NumberScrollerProps> = ({
+  numbers,
+  selected,
+  onSelect,
+  className,
+  ...props
+}) => {
+  return (
+    <div
+      {...props}
+      className={clsx(
+        "flex flex-col time-list h-[305px] overflow-y-auto",
+        className
+      )}
+    >
+      {numbers.map((n, i) => {
+        return (
+          <div
+            key={i}
+            className={clsx(
+              "w-[40px] h-[40px] last:mb-4 rounded inter-base-regular hover:bg-grey-20",
+              {
+                "bg-violet-60 hover:bg-violet-50 text-grey-0 inter-base-semibold":
+                  n === selected,
+              }
+            )}
+          >
+            <button onClick={() => onSelect(n)} className="w-full h-full py-2">
+              {n.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
+            </button>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default NumberScroller
--- a/packages/admin-ui/ui/src/components/atoms/os-shortcut/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/os-shortcut/index.tsx
@@ -0,0 +1,50 @@
+import React from "react"
+
+type OSShortcutProps = {
+  winModifiers: string | string[]
+  macModifiers: string | string[]
+  keys: string[] | string
+}
+
+const OSShortcut = ({ winModifiers, macModifiers, keys }: OSShortcutProps) => {
+  const isMac =
+    typeof window !== "undefined" &&
+    navigator?.platform?.toUpperCase().indexOf("MAC") >= 0
+      ? true
+      : false
+
+  let modifiers: string
+
+  if (isMac) {
+    if (Array.isArray(macModifiers)) {
+      modifiers = macModifiers.join("")
+    } else {
+      modifiers = macModifiers
+    }
+  } else {
+    if (Array.isArray(winModifiers)) {
+      modifiers = winModifiers.join(" + ")
+    } else {
+      modifiers = winModifiers
+    }
+  }
+
+  let input: string
+
+  if (Array.isArray(keys)) {
+    input = keys.join(" + ")
+  } else {
+    input = keys
+  }
+
+  return (
+    <div className="flex items-center text-grey-40">
+      <p className="m-0 inter-base-semibold">
+        <span className="inter-base-semibold">{modifiers} </span>
+        {input}
+      </p>
+    </div>
+  )
+}
+
+export default OSShortcut
--- a/packages/admin-ui/ui/src/components/atoms/page-description/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/page-description/index.tsx
@@ -0,0 +1,20 @@
+import React from "react"
+
+type PageDescriptionProps = {
+  title?: string
+  subtitle?: string
+}
+
+const PageDescription: React.FC<PageDescriptionProps> = ({
+  title,
+  subtitle,
+}) => {
+  return (
+    <div className="mb-xlarge">
+      <h1 className="inter-2xlarge-semibold mb-xsmall">{title}</h1>
+      <h2 className="inter-base-regular text-grey-50">{subtitle}</h2>
+    </div>
+  )
+}
+
+export default PageDescription
--- a/packages/admin-ui/ui/src/components/atoms/save-notification/error-state.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/save-notification/error-state.tsx
@@ -0,0 +1,49 @@
+import React, { useEffect } from "react"
+import type { Toast } from "react-hot-toast"
+import CrossIcon from "../../fundamentals/icons/cross-icon"
+import XCircleIcon from "../../fundamentals/icons/x-circle-icon"
+import ToasterContainer from "../toaster-container"
+
+type SavingStateProps = {
+  toast: Toast
+  title?: string
+  message?: string
+  onDismiss: () => void
+}
+
+const ErrorState: React.FC<SavingStateProps> = ({
+  toast,
+  title = "Error",
+  message = "An error occured while trying to save your changes. Please try again.",
+  onDismiss,
+}) => {
+  useEffect(() => {
+    const life = setTimeout(() => {
+      onDismiss()
+    }, 2000)
+
+    return () => {
+      clearTimeout(life)
+    }
+  }, [toast])
+
+  return (
+    <ToasterContainer visible={toast.visible} className="w-[448px]">
+      <div>
+        <XCircleIcon size={20} className="text-rose-40" />
+      </div>
+      <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow">
+        <span className="inter-small-semibold">{title}</span>
+        <span className="inter-small-regular text-grey-50">{message}</span>
+      </div>
+      <div>
+        <button onClick={onDismiss}>
+          <CrossIcon size={20} className="text-grey-40" />
+        </button>
+        <span className="sr-only">Close</span>
+      </div>
+    </ToasterContainer>
+  )
+}
+
+export default ErrorState
--- a/packages/admin-ui/ui/src/components/atoms/save-notification/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/save-notification/index.tsx
@@ -0,0 +1,94 @@
+import React, { ReactNode } from "react"
+import type { Toast } from "react-hot-toast"
+import { toast as globalToast } from "react-hot-toast"
+import RefreshIcon from "../../fundamentals/icons/refresh-icon"
+import ToasterContainer from "../toaster-container"
+import ErrorState from "./error-state"
+import SavingState from "./saving-state"
+import SuccessState from "./success-state"
+
+type SaveNotificationProps = {
+  toast: Toast
+  icon?: ReactNode
+  title?: string
+  message?: string
+  onSave: () => Promise<void>
+  reset: () => void
+}
+
+const SaveNotification: React.FC<SaveNotificationProps> = ({
+  toast,
+  icon,
+  title = "Unsaved changes",
+  message = "You have unsaved changes. Do you want to save and publish or discard them?",
+  onSave,
+  reset,
+}) => {
+  const onDismiss = () => {
+    reset()
+    globalToast.dismiss(toast.id)
+  }
+
+  const handleSave = () => {
+    globalToast.custom((t) => <SavingState toast={t} />, {
+      id: toast.id,
+    })
+
+    onSave()
+      .then(() => {
+        globalToast.custom(
+          (t) => <SuccessState toast={t} onDismiss={onDismiss} />,
+          {
+            id: toast.id,
+          }
+        )
+      })
+      .catch((_err) => {
+        globalToast.custom(
+          (t) => <ErrorState toast={t} onDismiss={onDismiss} />,
+          {
+            id: toast.id,
+          }
+        )
+      })
+  }
+
+  return (
+    <ToasterContainer visible={toast.visible} className="p-0 pl-base w-[448px]">
+      <div className="py-base">{getIcon(icon)}</div>
+      <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow py-base">
+        <span className="inter-small-semibold">{title}</span>
+        <span className="inter-small-regular text-grey-50">{message}</span>
+      </div>
+      <div className="flex flex-col inter-small-semibold border-l border-grey-20 h-full">
+        <button
+          onClick={handleSave}
+          className="inter-small-semibold flex items-center justify-center h-1/2 border-b border-grey-20 px-base text-violet-60"
+        >
+          Publish
+        </button>
+        <button
+          className="inter-small-semibold flex items-center justify-center h-1/2 px-base"
+          onClick={onDismiss}
+        >
+          Discard
+        </button>
+      </div>
+    </ToasterContainer>
+  )
+}
+
+const ICON_SIZE = 20
+
+function getIcon(icon?: any) {
+  if (icon) {
+    return React.cloneElement(icon, {
+      size: ICON_SIZE,
+      className: "text-grey-90",
+    })
+  } else {
+    return <RefreshIcon size={20} className="text-grey-90" />
+  }
+}
+
+export default SaveNotification
--- a/packages/admin-ui/ui/src/components/atoms/save-notification/saving-state.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/save-notification/saving-state.tsx
@@ -0,0 +1,30 @@
+import React from "react"
+import type { Toast } from "react-hot-toast"
+import Spinner from "../spinner"
+import ToasterContainer from "../toaster-container"
+
+type SavingStateProps = {
+  toast: Toast
+  title?: string
+  message?: string
+}
+
+const SavingState: React.FC<SavingStateProps> = ({
+  toast,
+  title = "Saving changes",
+  message = "Hang on, this may take a few moments.",
+}) => {
+  return (
+    <ToasterContainer visible={toast.visible} className="w-[448px]">
+      <div>
+        <Spinner variant="secondary" size="large" />
+      </div>
+      <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow">
+        <span className="inter-small-semibold">{title}</span>
+        <span className="inter-small-regular text-grey-50">{message}</span>
+      </div>
+    </ToasterContainer>
+  )
+}
+
+export default SavingState
--- a/packages/admin-ui/ui/src/components/atoms/save-notification/success-state.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/save-notification/success-state.tsx
@@ -0,0 +1,49 @@
+import React, { useEffect } from "react"
+import type { Toast } from "react-hot-toast"
+import CheckCircleIcon from "../../fundamentals/icons/check-circle-icon"
+import CrossIcon from "../../fundamentals/icons/cross-icon"
+import ToasterContainer from "../toaster-container"
+
+type SavingStateProps = {
+  toast: Toast
+  title?: string
+  message?: string
+  onDismiss: () => void
+}
+
+const SuccessState: React.FC<SavingStateProps> = ({
+  toast,
+  title = "Success",
+  message = "Your changes have been saved.",
+  onDismiss,
+}) => {
+  useEffect(() => {
+    const life = setTimeout(() => {
+      onDismiss()
+    }, 2000)
+
+    return () => {
+      clearTimeout(life)
+    }
+  }, [toast])
+
+  return (
+    <ToasterContainer visible={toast.visible} className="w-[448px]">
+      <div>
+        <CheckCircleIcon size={20} className="text-emerald-40" />
+      </div>
+      <div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow">
+        <span className="inter-small-semibold">{title}</span>
+        <span className="inter-small-regular text-grey-50">{message}</span>
+      </div>
+      <div>
+        <button onClick={onDismiss}>
+          <CrossIcon size={20} className="text-grey-40" />
+        </button>
+        <span className="sr-only">Close</span>
+      </div>
+    </ToasterContainer>
+  )
+}
+
+export default SuccessState
--- a/packages/admin-ui/ui/src/components/atoms/settings-card/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/settings-card/index.tsx
@@ -0,0 +1,56 @@
+import React from "react"
+import { Link } from "react-router-dom"
+import ChevronRightIcon from "../../fundamentals/icons/chevron-right-icon"
+
+type SettingsCardProps = {
+  icon: React.ReactNode
+  heading: string
+  description: string
+  to?: string
+  externalLink?: string
+  disabled?: boolean
+}
+
+const SettingsCard: React.FC<SettingsCardProps> = ({
+  icon,
+  heading,
+  description,
+  to = null,
+  externalLink = null,
+  disabled = false,
+}) => {
+  if (disabled) {
+    to = null
+  }
+
+  return (
+    <Link to={to ?? ""} className="flex flex-1 items-center">
+      <button
+        className="bg-grey-0 rounded-rounded p-large border-grey-20 group flex h-full flex-1 items-center border"
+        disabled={disabled}
+        onClick={() => {
+          if (externalLink) {
+            window.location.href = externalLink
+          }
+        }}
+      >
+        <div className="h-2xlarge w-2xlarge bg-violet-20 rounded-circle text-violet-60 group-disabled:bg-grey-10 group-disabled:text-grey-40 flex items-center justify-center">
+          {icon}
+        </div>
+        <div className="mx-large flex-1 text-left">
+          <h3 className="inter-large-semibold text-grey-90 group-disabled:text-grey-40 m-0">
+            {heading}
+          </h3>
+          <p className="inter-base-regular text-grey-50 group-disabled:text-grey-40 m-0">
+            {description}
+          </p>
+        </div>
+        <div className="text-grey-40 group-disabled:text-grey-30">
+          <ChevronRightIcon />
+        </div>
+      </button>
+    </Link>
+  )
+}
+
+export default SettingsCard
--- a/packages/admin-ui/ui/src/components/atoms/skeleton/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/skeleton/index.tsx
@@ -0,0 +1,25 @@
+import clsx from "clsx"
+import { PropsWithChildren } from "react"
+import { useSkeleton } from "../../../providers/skeleton-provider"
+
+type Props = PropsWithChildren<{
+  isLoading?: boolean
+}>
+
+const Skeleton = ({ children, isLoading }: Props) => {
+  const { isLoading: providerState = false } = useSkeleton()
+
+  const state = isLoading || providerState
+
+  return (
+    <div
+      className={clsx("h-fit w-fit", {
+        "bg-grey-10 rounded-rounded animate-pulse [&>*]:opacity-0": state,
+      })}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default Skeleton
--- a/packages/admin-ui/ui/src/components/atoms/spinner.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/spinner.tsx
@@ -0,0 +1,35 @@
+import clsx from "clsx"
+import React from "react"
+
+type SpinnerProps = {
+  size?: "large" | "medium" | "small"
+  variant?: "primary" | "secondary"
+}
+
+const Spinner: React.FC<SpinnerProps> = ({
+  size = "large",
+  variant = "primary",
+}) => {
+  return (
+    <div
+      className={clsx(
+        "flex items-center justify-center",
+        { "h-[24px] w-[24px]": size === "large" },
+        { "h-[20px] w-[20px]": size === "medium" },
+        { "h-[16px] w-[16px]": size === "small" }
+      )}
+    >
+      <div className="flex items-center justify-center relative w-full h-full">
+        <div
+          className={clsx(
+            "animate-ring border-2 h-4/5 w-4/5 rounded-circle border-transparent",
+            { "border-t-grey-0": variant === "primary" },
+            { "border-t-violet-60": variant === "secondary" }
+          )}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default Spinner
--- a/packages/admin-ui/ui/src/components/atoms/switch/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/switch/index.tsx
@@ -0,0 +1,26 @@
+import * as RadixSwitch from "@radix-ui/react-switch"
+import clsx from "clsx"
+import React from "react"
+
+/**
+ * A controlled switch component atom.
+ */
+function Switch(props: RadixSwitch.SwitchProps) {
+  return (
+    <RadixSwitch.Root
+      {...props}
+      disabled={props.disabled}
+      className={clsx(
+        "w-8 h-[18px] rounded-full transition-bg bg-gray-300 radix-state-checked:bg-violet-60"
+      )}
+    >
+      <RadixSwitch.Thumb
+        className={clsx(
+          "w-2 h-2 bg-white rounded-full block transition-transform translate-x-[5px] radix-state-checked:translate-x-[19px]"
+        )}
+      />
+    </RadixSwitch.Root>
+  )
+}
+
+export default Switch
--- a/packages/admin-ui/ui/src/components/atoms/text-input/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/text-input/index.tsx
@@ -0,0 +1,19 @@
+import React from "react"
+import clsx from "clsx"
+
+type TextInputProps = React.InputHTMLAttributes<HTMLInputElement>
+
+const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
+  ({ className, ...props }, ref) => (
+    <input
+      ref={ref}
+      className={clsx(
+        "placeholder:inter-base-regular placeholder-grey-40 focus:outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+
+export default TextInput
--- a/packages/admin-ui/ui/src/components/atoms/thumbnail/index.ts
+++ b/packages/admin-ui/ui/src/components/atoms/thumbnail/index.ts
@@ -0,0 +1 @@
+export { Thumbnail as default } from "./thumbnail"
--- a/packages/admin-ui/ui/src/components/atoms/thumbnail/thumbnail.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/thumbnail/thumbnail.tsx
@@ -0,0 +1,30 @@
+import clsx from "clsx"
+import ImagePlaceholderIcon from "../../fundamentals/icons/image-placeholder-icon"
+
+type Props = {
+  src?: string | null
+  className?: string
+  size?: "small" | "medium" | "large"
+}
+
+export const Thumbnail = ({ src, className, size = "small" }: Props) => {
+  return (
+    <div
+      className={clsx(
+        "bg-grey-5 flex items-center justify-center overflow-hidden rounded-rounded",
+        {
+          "w-[30px] h-10": size === "small",
+          "w-9 h-12": size === "medium",
+          "w-[170px] h-[226px]": size === "large",
+        },
+        className
+      )}
+    >
+      {src ? (
+        <img src={src} className="object-cover object-center flex-1" />
+      ) : (
+        <ImagePlaceholderIcon />
+      )}
+    </div>
+  )
+}
--- a/packages/admin-ui/ui/src/components/atoms/toaster-container/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/toaster-container/index.tsx
@@ -0,0 +1,33 @@
+import clsx from "clsx"
+import React from "react"
+
+type ToasterContainerProps = {
+  visible: boolean
+} & React.HTMLAttributes<HTMLDivElement>
+
+const ToasterContainer: React.FC<ToasterContainerProps> = ({
+  children,
+  visible,
+  className,
+  ...rest
+}) => {
+  return (
+    <div
+      className={clsx(
+        "flex items-start bg-grey-90 p-base border rounded-rounded shadow-toaster mb-xsmall last:mb-0",
+        {
+          "animate-enter": visible,
+        },
+        {
+          "animate-leave": !visible,
+        },
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default ToasterContainer
--- a/packages/admin-ui/ui/src/components/atoms/tooltip/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/tooltip/index.tsx
@@ -0,0 +1,58 @@
+import * as RadixTooltip from "@radix-ui/react-tooltip"
+import clsx from "clsx"
+import React from "react"
+
+export type TooltipProps = RadixTooltip.TooltipContentProps &
+  Pick<
+    RadixTooltip.TooltipProps,
+    "open" | "defaultOpen" | "onOpenChange" | "delayDuration"
+  > & {
+    content: React.ReactNode
+    side?: "bottom" | "left" | "top" | "right"
+    onClick?: React.ButtonHTMLAttributes<HTMLButtonElement>["onClick"]
+  }
+
+const Tooltip = ({
+  children,
+  content,
+  open,
+  defaultOpen,
+  onOpenChange,
+  delayDuration,
+  className,
+  side,
+  onClick,
+  ...props
+}: TooltipProps) => {
+  return (
+    <RadixTooltip.Provider delayDuration={100}>
+      <RadixTooltip.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}
+        delayDuration={delayDuration}
+      >
+        <RadixTooltip.Trigger onClick={onClick} asChild={true}>
+          <span>{children}</span>
+        </RadixTooltip.Trigger>
+        <RadixTooltip.Content
+          side={side ?? "bottom"}
+          sideOffset={8}
+          align="center"
+          className={clsx(
+            "inter-small-semibold text-grey-50",
+            "bg-grey-0 py-2 px-3 shadow-dropdown rounded-rounded",
+            "border border-solid border-grey-20",
+            "max-w-[220px]",
+            className
+          )}
+          {...props}
+        >
+          {content}
+        </RadixTooltip.Content>
+      </RadixTooltip.Root>
+    </RadixTooltip.Provider>
+  )
+}
+
+export default Tooltip
--- a/packages/admin-ui/ui/src/components/atoms/two-step-delete/index.tsx
+++ b/packages/admin-ui/ui/src/components/atoms/two-step-delete/index.tsx
@@ -0,0 +1,110 @@
+import clsx from "clsx"
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react"
+import TrashIcon from "../../fundamentals/icons/trash-icon"
+import Spinner from "../spinner"
+import Tooltip from "../tooltip"
+
+type Props = {
+  onDelete: () => void
+  deleting?: boolean
+  className?: string
+  children?: React.ReactNode
+}
+
+const TwoStepDelete = forwardRef<HTMLButtonElement, Props>(
+  ({ onDelete, deleting = false, children, className }: Props, ref) => {
+    const [armed, setArmed] = useState(false)
+    const innerRef = useRef<HTMLButtonElement>(null)
+
+    useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
+      ref,
+      () => innerRef.current
+    )
+
+    const handleTwoStepDelete = () => {
+      if (!armed) {
+        setArmed(true)
+        return
+      }
+
+      onDelete()
+      setArmed(false)
+    }
+
+    const disarmOnClickOutside = useCallback(
+      (e: MouseEvent) => {
+        if (innerRef.current && !innerRef.current.contains(e.target as Node)) {
+          if (armed) {
+            setArmed(false)
+          }
+        }
+      },
+      [armed]
+    )
+
+    useEffect(() => {
+      document.addEventListener("mousedown", disarmOnClickOutside)
+
+      return () => {
+        document.removeEventListener("mousedown", disarmOnClickOutside)
+      }
+    }, [disarmOnClickOutside])
+
+    return (
+      <button
+        className={clsx(
+          "transition-all rounded-lg border flex items-center justify-center",
+          {
+            "bg-rose-50 border-rose-50 px-3 py-1.5": armed,
+            "bg-transparent border-gray-20 p-1.5": !armed,
+          },
+          {
+            "!bg-grey-40 !border-grey-40 !p-1.5": deleting,
+          },
+          className
+        )}
+        disabled={deleting}
+        onClick={handleTwoStepDelete}
+        ref={innerRef}
+      >
+        <div
+          className={clsx("text-rose-50 inter-small-semibold", {
+            hidden: armed || deleting,
+          })}
+        >
+          {children || <TrashIcon className="text-grey-50" size={20} />}
+        </div>
+        <span
+          className={clsx("text-white inter-small-semibold", {
+            hidden: !armed || deleting,
+          })}
+        >
+          <Tooltip
+            content="Are you sure?"
+            side="top"
+            sideOffset={16}
+            open={armed}
+          >
+            Confirm
+          </Tooltip>
+        </span>
+        <span
+          className={clsx("flex items-center justify-center", {
+            hidden: !deleting,
+          })}
+        >
+          <Spinner size="medium" />
+        </span>
+      </button>
+    )
+  }
+)
+
+export default TwoStepDelete
--- a/packages/admin-ui/ui/src/components/declarative-toaster/index.tsx
+++ b/packages/admin-ui/ui/src/components/declarative-toaster/index.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import { toast, ToastOptions } from "react-hot-toast"
+
+export type ToasterProps = {
+  visible: boolean
+  children: React.ReactElement
+} & ToastOptions
+
+const Toaster = ({ visible, children, ...options }: ToasterProps) => {
+  React.useEffect(() => {
+    if (visible) {
+      toast.custom((t) => React.cloneElement(children, { toast: t }), {
+        ...options,
+      })
+    } else {
+      toast.dismiss(options.id)
+    }
+  }, [visible, children])
+
+  return null
+}
+
+export default Toaster
--- a/packages/admin-ui/ui/src/components/fundamentals/badge/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/badge/index.tsx
@@ -0,0 +1,43 @@
+import clsx from "clsx"
+import React from "react"
+
+type BadgeProps = {
+  variant:
+    | "primary"
+    | "danger"
+    | "success"
+    | "warning"
+    | "ghost"
+    | "default"
+    | "disabled"
+} & React.HTMLAttributes<HTMLDivElement>
+
+const Badge: React.FC<BadgeProps> = ({
+  children,
+  variant,
+  onClick,
+  className,
+  ...props
+}) => {
+  const variantClassname = clsx({
+    ["badge-primary"]: variant === "primary",
+    ["badge-danger"]: variant === "danger",
+    ["badge-success"]: variant === "success",
+    ["badge-warning"]: variant === "warning",
+    ["badge-ghost"]: variant === "ghost",
+    ["badge-default"]: variant === "default",
+    ["badge-disabled"]: variant === "disabled",
+  })
+
+  return (
+    <div
+      className={clsx("badge", variantClassname, className)}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default Badge
--- a/packages/admin-ui/ui/src/components/fundamentals/button/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/button/index.tsx
@@ -0,0 +1,71 @@
+import clsx from "clsx"
+import React, { Children } from "react"
+import Spinner from "../../atoms/spinner"
+
+export type ButtonProps = {
+  variant: "primary" | "secondary" | "ghost" | "danger" | "nuclear"
+  size?: "small" | "medium" | "large"
+  loading?: boolean
+} & React.ButtonHTMLAttributes<HTMLButtonElement>
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = "primary",
+      size = "large",
+      loading = false,
+      children,
+      ...attributes
+    },
+    ref
+  ) => {
+    const handleClick = (e) => {
+      if (!loading && attributes.onClick) {
+        attributes.onClick(e)
+      }
+    }
+
+    const variantClassname = clsx({
+      ["btn-primary"]: variant === "primary",
+      ["btn-secondary"]: variant === "secondary",
+      ["btn-ghost"]: variant === "ghost",
+      ["btn-danger"]: variant === "danger",
+      ["btn-nuclear"]: variant === "nuclear",
+    })
+
+    const sizeClassname = clsx({
+      ["btn-large"]: size === "large",
+      ["btn-medium"]: size === "medium",
+      ["btn-small"]: size === "small",
+    })
+
+    return (
+      <button
+        {...attributes}
+        className={clsx(
+          "btn",
+          variantClassname,
+          sizeClassname,
+          attributes.className
+        )}
+        disabled={attributes.disabled || loading}
+        ref={ref}
+        onClick={handleClick}
+      >
+        {loading ? (
+          <Spinner size={size} variant={"secondary"} />
+        ) : (
+          Children.map(children, (child, i) => {
+            return (
+              <span key={i} className="mr-xsmall last:mr-0">
+                {child}
+              </span>
+            )
+          })
+        )}
+      </button>
+    )
+  }
+)
+
+export default Button
--- a/packages/admin-ui/ui/src/components/fundamentals/details-icon/contact.svg
+++ b/packages/admin-ui/ui/src/components/fundamentals/details-icon/contact.svg
@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4444 17H4.55556C3.7 17 3 16.35 3 15.5556V5.44444C3 4.65 3.7 4 4.55556 4H15.4444C16.3 4 17 4.65 17 5.44444V15.5556C17 16.35 16.3 17 15.4444 17Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13 2.43994V3.43994" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 2.43994V3.43994" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 10.7632C11.1046 10.7632 12 9.86775 12 8.76318C12 7.65861 11.1046 6.76318 10 6.76318C8.89543 6.76318 8 7.65861 8 8.76318C8 9.86775 8.89543 10.7632 10 10.7632Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 14.2979C12.88 13.6312 11.52 13.2979 10 13.2979C8.48 13.2979 7.12 13.6979 6 14.2979" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/packages/admin-ui/ui/src/components/fundamentals/details-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/details-icon/index.tsx
@@ -0,0 +1,57 @@
+import React from "react"
+import IconProps from "../icons/types/icon-type"
+
+const DetailsIcon: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M15.4444 17H4.55556C3.7 17 3 16.35 3 15.5556V5.44444C3 4.65 3.7 4 4.55556 4H15.4444C16.3 4 17 4.65 17 5.44444V15.5556C17 16.35 16.3 17 15.4444 17Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13 2.43994V3.43994"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7 2.43994V3.43994"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 10.7632C11.1046 10.7632 12 9.86775 12 8.76318C12 7.65861 11.1046 6.76318 10 6.76318C8.89543 6.76318 8 7.65861 8 8.76318C8 9.86775 8.89543 10.7632 10 10.7632Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14 14.2979C12.88 13.6312 11.52 13.2979 10 13.2979C8.48 13.2979 7.12 13.6979 6 14.2979"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default DetailsIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/feature-toggle.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/feature-toggle.tsx
@@ -0,0 +1,21 @@
+import React from "react"
+import { useFeatureFlag } from "../../providers/feature-flag-provider"
+
+export type FeatureToggleProps = {
+  featureFlag: string
+  showOnlyWhenDisabled?: boolean
+  children?: React.ReactNode
+}
+
+const FeatureToggle: React.FC<FeatureToggleProps> = ({
+  featureFlag,
+  showOnlyWhenDisabled = false,
+  children,
+}) => {
+  const { isFeatureEnabled } = useFeatureFlag()
+
+  const showContent = isFeatureEnabled(featureFlag) === !showOnlyWhenDisabled
+  return showContent ? <>{children}</> : null
+}
+
+export default FeatureToggle
--- a/packages/admin-ui/ui/src/components/fundamentals/icon-badge/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icon-badge/index.tsx
@@ -0,0 +1,36 @@
+import clsx from "clsx"
+import React from "react"
+import Badge from "../badge"
+
+type IconBadgeProps = {
+  variant?:
+    | "primary"
+    | "danger"
+    | "success"
+    | "warning"
+    | "ghost"
+    | "default"
+    | "disabled"
+} & React.HTMLAttributes<HTMLDivElement>
+
+const IconBadge: React.FC<IconBadgeProps> = ({
+  children,
+  variant,
+  className,
+  ...rest
+}) => {
+  return (
+    <Badge
+      variant={variant ?? "default"}
+      className={clsx(
+        "flex items-center justify-center aspect-square w-[40px] h-[40px] border-2 border-white outline outline-1 outline-grey-20",
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </Badge>
+  )
+}
+
+export default IconBadge
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/alert-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/alert-icon/index.tsx
@@ -0,0 +1,43 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const AlertIcon: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 6.66669V10"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 13.3333H10.0088"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default AlertIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/arrow-down-icon.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/arrow-down-icon.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "./types/icon-type"
+
+const ArrowDownIcon: React.FC<IconProps> = ({
+  size = "24px",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M8 3.33331V12.6666"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.667 8L8.00033 12.6667L3.33366 8"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ArrowDownIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/arrow-left-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/arrow-left-icon/index.tsx
@@ -0,0 +1,35 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const ArrowLeftIcon: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M3.75 10H16.875"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <path
+        d="M8.125 5L3.125 10L8.125 15"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ArrowLeftIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/arrow-right-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/arrow-right-icon/index.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const ArrowRightIcon: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M3.33301 8H12.6663"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8 3.33331L12.6667 7.99998L8 12.6666"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ArrowRightIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/arrow-top-right-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/arrow-top-right-icon/index.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const ArrowTopRightIcon: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M15.0129 4.98792L4.93799 15.0628M15.0129 4.98792L7.93994 4.93713M15.0129 4.98792L15.0636 12.0608"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ArrowTopRightIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/arrow-up-icon.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/arrow-up-icon.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "./types/icon-type"
+
+const ArrowUpIcon: React.FC<IconProps> = ({
+  size = "24px",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M8 12.6667V3.33335"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.33301 8L7.99967 3.33333L12.6663 8"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ArrowUpIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/back-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/back-icon/index.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const BackIcon: React.FC<IconProps> = ({
+  size = "24",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M3.33301 2.91669V7.91669H8.33301"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.41396 11.6784C3.57168 13.1642 4.14444 13.9943 5.18922 15.0653C6.23401 16.1363 7.6093 16.8262 9.0944 17.0244C10.5795 17.2226 12.0883 16.9175 13.3787 16.1581C14.6691 15.3988 15.6663 14.2291 16.2103 12.8369C16.7542 11.4446 16.8134 9.91052 16.3783 8.48073C15.9432 7.05094 15.039 5.80836 13.8109 4.95238C12.5828 4.0964 11.1019 3.67666 9.60596 3.76051C8.10998 3.84436 6.68561 4.42693 5.56142 5.41475L3.33301 7.41474"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default BackIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/backspace-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/backspace-icon/index.tsx
@@ -0,0 +1,42 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const BackspaceIcon: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.5 6.66675L10.1667 9.33341"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.1667 6.66675L7.5 9.33341"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.56137 11.8559L2.55004 9.49392H2.55004C1.81665 8.63293 1.81665 7.36691 2.55004 6.50592L4.56137 4.14392V4.14392C4.9991 3.62949 5.64058 3.33312 6.31604 3.33325H11.6954V3.33325C12.9682 3.33325 14 4.36509 14 5.63792C14 5.63792 14 5.63792 14 5.63792V10.3619V10.3619C14 11.6348 12.9682 12.6666 11.6954 12.6666H6.31604V12.6666C5.64058 12.6667 4.99911 12.3704 4.56137 11.8559V11.8559Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default BackspaceIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/bell-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/bell-icon/index.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const BellIcon: React.FC<IconProps> = ({
+  size = "24",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M14 20C13.7968 20.3042 13.505 20.5566 13.154 20.7321C12.803 20.9076 12.4051 21 12 21C11.5949 21 11.197 20.9076 10.846 20.7321C10.495 20.5566 10.2032 20.3042 10 20"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17.3333 8.2C17.3333 6.82087 16.7714 5.49823 15.7712 4.52304C14.771 3.54786 13.4145 3 12 3C10.5855 3 9.22896 3.54786 8.22876 4.52304C7.22857 5.49823 6.66667 6.82087 6.66667 8.2C6.66667 14.2667 4 16 4 16H20C20 16 17.3333 14.2667 17.3333 8.2Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default BellIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/bell-noti-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/bell-noti-icon/index.tsx
@@ -0,0 +1,41 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+type IBellNotiIconProps = IconProps & {
+  accentColor?: string
+}
+
+const BellNotiIcon: React.FC<IBellNotiIconProps> = ({
+  size = "24px",
+  color = "currentColor",
+  accentColor = "#F43F5E",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M14 20C13.7968 20.3042 13.505 20.5566 13.154 20.7321C12.803 20.9076 12.4051 21 12 21C11.5949 21 11.197 20.9076 10.846 20.7321C10.495 20.5566 10.2032 20.3042 10 20"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.4735 11.7793C18.0077 11.9228 17.5129 12 17.0001 12C16.9947 12 16.9894 12 16.9841 12C17.2526 13.1526 17.6265 14.0517 18.0122 14.7412C18.1157 14.9262 18.2197 15.0955 18.3223 15.25H5.67782C5.78041 15.0955 5.88443 14.9262 5.98793 14.7412C6.72391 13.4256 7.41673 11.347 7.41673 8.2C7.41673 7.026 7.89488 5.89613 8.7524 5.06004C9.61057 4.22333 10.7784 3.75 12.0001 3.75C12.372 3.75 12.7391 3.79389 13.0938 3.87856C13.4571 3.42462 13.8978 3.03537 14.3959 2.73085C13.6453 2.41632 12.831 2.25 12.0001 2.25C10.3927 2.25 8.84747 2.87238 7.70525 3.98604C6.56238 5.10034 5.91673 6.61575 5.91673 8.2C5.91673 8.46632 5.9114 8.7235 5.90126 8.97181L3.58406 15.3759C3.31067 15.5581 3.18742 15.8975 3.28099 16.2132C3.37538 16.5316 3.66795 16.75 4.00006 16.75H20.0001C20.3322 16.75 20.6247 16.5316 20.7191 16.2132C20.8127 15.8975 20.6895 15.5582 20.4161 15.376M3.59055 15.3713L3.59037 15.3718L3.58947 15.3724L3.58787 15.3734L3.58537 15.3751L3.58406 15.3759L3.58945 15.3721C3.5898 15.3718 3.59017 15.3716 3.59055 15.3713ZM3.59055 15.3713L5.90099 8.97837C5.79921 11.4485 5.22124 13.0393 4.67886 14.0088C4.37901 14.5448 4.08562 14.8989 3.87883 15.1117C3.77524 15.2183 3.69289 15.29 3.6417 15.3316C3.61711 15.3516 3.5997 15.3646 3.59055 15.3713ZM20.4108 15.3725L20.4123 15.3734L20.4148 15.3751L20.4157 15.3757C20.4146 15.3749 20.413 15.3737 20.4107 15.3721C20.4019 15.3657 20.384 15.3524 20.3584 15.3316C20.3072 15.29 20.2249 15.2183 20.1213 15.1117C19.9145 14.8989 19.6211 14.5448 19.3213 14.0088C19.0206 13.4713 18.7089 12.7428 18.4735 11.7793M5.90099 8.97837L7.70525 3.98604L5.90126 8.97181C5.90117 8.974 5.90108 8.97619 5.90099 8.97837Z"
+        fill={color}
+      />
+      <circle cx="17" cy="7" r="3" fill={accentColor} />
+    </svg>
+  )
+}
+
+export default BellNotiIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/bell-off-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/bell-off-icon/index.tsx
@@ -0,0 +1,57 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const BellOffIcon: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M11.2971 16.7566C11.1653 16.9839 10.976 17.1726 10.7483 17.3037C10.5206 17.4349 10.2624 17.5039 9.99964 17.5039C9.73686 17.5039 9.47869 17.4349 9.25097 17.3037C9.02326 17.1726 8.83401 16.9839 8.70215 16.7566"
+        stroke={color}
+        strokeWidth="1.49999"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.9723 10.7567C14.6386 9.53526 14.4795 8.27274 14.4998 7.00671"
+        stroke={color}
+        strokeWidth="1.49999"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.69498 5.7016C5.56468 6.1243 5.49894 6.56426 5.49998 7.00659C5.49998 12.2566 3.25 13.7565 3.25 13.7565H13.7499"
+        stroke={color}
+        strokeWidth="1.49999"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.4994 7.00665C14.5006 6.19145 14.2804 5.39124 13.8622 4.69148C13.444 3.99173 12.8435 3.41871 12.125 3.03365C11.4065 2.64859 10.5969 2.46595 9.78261 2.50523C8.96836 2.54451 8.18007 2.80424 7.50195 3.25667"
+        stroke={color}
+        strokeWidth="1.49999"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.5 2.50665L17.4999 17.5065"
+        stroke={color}
+        strokeWidth="1.49999"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default BellOffIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/buildings-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/buildings-icon/index.tsx
@@ -0,0 +1,64 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const BuildingsIcon: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={`0 0 20 20`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M17.0141 16.5422V8.79964C17.0141 8.5943 16.9325 8.39736 16.7873 8.25216C16.6421 8.10696 16.4452 8.02539 16.2398 8.02539H13.1428"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.07739 16.5422V4.15414C3.07739 3.94879 3.15897 3.75186 3.30417 3.60666C3.44937 3.46146 3.6463 3.37988 3.85165 3.37988H12.3684C12.5738 3.37988 12.7707 3.46146 12.9159 3.60666C13.0611 3.75186 13.1427 3.94879 13.1427 4.15414V16.5422"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.98071 6.6521H10.2391"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.98071 9.96094H10.2391"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.98087 16.5422H10.2393V13.2089H5.98087V16.5422Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17.7885 16.5422H2.30347"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default BuildingsIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/cancel-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/cancel-icon/index.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const CancelIcon: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 5L15 15"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default CancelIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/cart-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/cart-icon/index.tsx
@@ -0,0 +1,49 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const CartIcon: React.FC<IconProps> = ({
+  size = "24",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M5.70291 11.7848L4.18457 5.34766H16.6736C17.3175 5.34766 17.7893 5.89045 17.633 6.45189L16.2997 11.242C16.0969 11.9695 15.4084 12.5043 14.5776 12.579L7.83552 13.1848C6.83054 13.2745 5.91162 12.6713 5.70291 11.7848V11.7848Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.18418 5.34722L3.54123 2.68213H1.83594"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.2117 15.7988C13.7978 15.7988 13.4618 16.1349 13.4659 16.5488C13.4659 16.9628 13.8019 17.2988 14.2158 17.2988C14.6298 17.2988 14.9658 16.9628 14.9658 16.5488C14.9638 16.1349 14.6277 15.7988 14.2117 15.7988Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.20104 15.7988C6.78655 15.7988 6.45003 16.1344 6.45414 16.5478C6.45003 16.9632 6.7886 17.2988 7.20309 17.2988C7.61758 17.2988 7.9541 16.9632 7.9541 16.5499C7.9541 16.1344 7.61758 15.7988 7.20104 15.7988Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+export default CartIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/cash-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/cash-icon/index.tsx
@@ -0,0 +1,99 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const CashIcon: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M3.75 7.5H2.5"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.75 12.5H2.5"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.33366 10H1.66699"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.69727 4.6967C5.74616 3.64781 7.08253 2.9335 8.53739 2.64411C9.99225 2.35472 11.5002 2.50325 12.8707 3.07091C14.2411 3.63856 15.4125 4.59986 16.2366 5.83323C17.0607 7.0666 17.5006 8.51664 17.5006 10C17.5006 11.4834 17.0607 12.9334 16.2366 14.1668C15.4125 15.4001 14.2411 16.3614 12.8707 16.9291C11.5002 17.4968 9.99225 17.6453 8.53739 17.3559C7.08253 17.0665 5.74616 16.3522 4.69727 15.3033"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 6.25V7.00737"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.125 8.52196C8.17767 8.07456 8.40336 7.66555 8.75379 7.38246C9.10421 7.09936 9.55152 6.96468 10 7.00722"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 13.7501V12.9927"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.875 11.4778C11.8223 11.9252 11.5966 12.3343 11.2462 12.6174C10.8958 12.9004 10.4485 13.0351 10 12.9926"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.8273 8.19148C11.6899 7.8243 11.4381 7.51099 11.1091 7.29776C10.7801 7.08453 10.3913 6.98266 10 7.00718"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.17188 11.8083C8.30928 12.1755 8.56105 12.4888 8.89004 12.702C9.21904 12.9152 9.60785 13.0171 9.99913 12.9926"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.125 8.52216C8.125 8.83316 8.23276 9.13455 8.42993 9.37506C8.6271 9.61556 8.90151 9.78033 9.20647 9.84132L10.7935 10.1587C11.0985 10.2197 11.3729 10.3845 11.5701 10.625C11.7672 10.8655 11.875 11.1669 11.875 11.4779"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default CashIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/channels-icon.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/channels-icon.tsx
@@ -0,0 +1,65 @@
+import React from "react"
+
+import IconProps from "./types/icon-type"
+
+const ChannelsIcon: React.FC<IconProps> = ({
+  size = "24px",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M17.6627 7.05C18.7811 7.05 19.6877 6.14338 19.6877 5.025C19.6877 3.90662 18.7811 3 17.6627 3C16.5443 3 15.6377 3.90662 15.6377 5.025C15.6377 6.14338 16.5443 7.05 17.6627 7.05Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17.6627 14.025C18.7811 14.025 19.6877 13.1184 19.6877 12C19.6877 10.8816 18.7811 9.97498 17.6627 9.97498C16.5443 9.97498 15.6377 10.8816 15.6377 12C15.6377 13.1184 16.5443 14.025 17.6627 14.025Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.5123 14.025C6.63068 14.025 7.5373 13.1184 7.5373 12C7.5373 10.8816 6.63068 9.97498 5.5123 9.97498C4.39393 9.97498 3.4873 10.8816 3.4873 12C3.4873 13.1184 4.39393 14.025 5.5123 14.025Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17.6627 21C18.7811 21 19.6877 20.0933 19.6877 18.975C19.6877 17.8566 18.7811 16.95 17.6627 16.95C16.5443 16.95 15.6377 17.8566 15.6377 18.975C15.6377 20.0933 16.5443 21 17.6627 21Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.6369 5.02502H13.3869C12.3924 5.02502 11.5869 5.83052 11.5869 6.82502V17.175C11.5869 18.1695 12.3924 18.975 13.3869 18.975H15.6369"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.6361 12H7.53613"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ChannelsIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/check-circle-fill-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/check-circle-fill-icon/index.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const CheckCircleFillIcon: React.FC<IconProps> = ({
+  size = "24",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18 10C18 14.4184 14.4184 18 10 18C5.5816 18 2 14.4184 2 10C2 5.5816 5.5816 2 10 2C14.4184 2 18 5.5816 18 10ZM13.9053 8.28033C14.1982 7.98744 14.1982 7.51256 13.9053 7.21967C13.6124 6.92678 13.1376 6.92678 12.8447 7.21967L8.875 11.1893L7.15533 9.46967C6.86244 9.17678 6.38756 9.17678 6.09467 9.46967C5.80178 9.76256 5.80178 10.2374 6.09467 10.5303L8.34467 12.7803C8.63756 13.0732 9.11244 13.0732 9.40533 12.7803L13.9053 8.28033Z"
+        fill={color}
+      />
+    </svg>
+  )
+}
+
+export default CheckCircleFillIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/check-circle-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/check-circle-icon/index.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const CheckCircleIcon: React.FC<IconProps> = ({
+  size = "24",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M10 17.5C14.1422 17.5 17.5 14.1422 17.5 10C17.5 5.85775 14.1422 2.5 10 2.5C5.85775 2.5 2.5 5.85775 2.5 10C2.5 14.1422 5.85775 17.5 10 17.5Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.5 9.99998L9.16667 11.6666L12.5 8.33331"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default CheckCircleIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/check-icon.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/check-icon.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+import IconProps from "./types/icon-type"
+
+const CheckIcon: React.FC<IconProps> = ({
+  size = "24px",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M13.3334 4L6.00008 11.3333L2.66675 8"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default CheckIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/chevron-down.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/chevron-down.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+import IconProps from "./types/icon-type"
+
+const ChevronDownIcon: React.FC<IconProps> = ({
+  size = "24px",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M4 6L8 10L12 6"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ChevronDownIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/chevron-left-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/chevron-left-icon/index.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const ChevronLeftIcon: React.FC<IconProps> = ({
+  size = "24",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M9 12L5 8L9 4"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ChevronLeftIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/chevron-right-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/chevron-right-icon/index.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const ChevronRightIcon: React.FC<IconProps> = ({
+  size = "24",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M6 12L10 8L6 4"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ChevronRightIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/chevron-up.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/chevron-up.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+import IconProps from "./types/icon-type"
+
+const ChevronUpIcon: React.FC<IconProps> = ({
+  size = "24px",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M5 12.5L10 7.5L15 12.5"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ChevronUpIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/clipboard-copy-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/clipboard-copy-icon/index.tsx
@@ -0,0 +1,50 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const ClipboardCopyIcon: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M12.917 4.16669H14.3753C14.7621 4.16669 15.133 4.32277 15.4065 4.6006C15.68 4.87843 15.8337 5.25526 15.8337 5.64817V8.33335M7.08366 4.16669H5.62533C5.23855 4.16669 4.86762 4.32277 4.59413 4.6006C4.32064 4.87843 4.16699 5.25526 4.16699 5.64817V16.0185C4.16699 16.4115 4.32064 16.7883 4.59413 17.0661C4.86762 17.3439 5.23855 17.5 5.62533 17.5H14.3753C14.7621 17.5 15.133 17.3439 15.4065 17.0661C15.68 16.7883 15.8337 16.4115 15.8337 16.0185V15"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.875 2.5H8.125C7.77982 2.5 7.5 2.8731 7.5 3.33333V5C7.5 5.46024 7.77982 5.83333 8.125 5.83333H11.875C12.2202 5.83333 12.5 5.46024 12.5 5V3.33333C12.5 2.8731 12.2202 2.5 11.875 2.5Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17.5 11.6667H10"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.5 9.16669L10 11.6667L12.5 14.1667"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ClipboardCopyIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/clock-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/clock-icon/index.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const ClockIcon: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8 4.66669V8.16669L10 9.33335"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ClockIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/coins-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/coins-icon/index.tsx
@@ -0,0 +1,50 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const CoinsIcon: React.FC<IconProps> = ({
+  size = "24",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M8.39844 13.2534C11.1599 13.2534 13.3984 11.0148 13.3984 8.25336C13.3984 5.49193 11.1599 3.25336 8.39844 3.25336C5.63701 3.25336 3.39844 5.49193 3.39844 8.25336C3.39844 11.0148 5.63701 13.2534 8.39844 13.2534Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M18.187 11.7466C18.8282 12.1161 19.3757 12.6281 19.7872 13.2431C20.1987 13.8582 20.4631 14.5596 20.56 15.2932C20.6569 16.0268 20.5837 16.7729 20.346 17.4737C20.1083 18.1744 19.7125 18.8111 19.1892 19.3343C18.666 19.8576 18.0293 20.2534 17.3286 20.4911C16.6278 20.7288 15.8818 20.802 15.1481 20.7051C14.4145 20.6082 13.7131 20.3438 13.0981 19.9323C12.4831 19.5208 11.971 18.9733 11.6016 18.3321"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.39844 6.75336H8.39844V9.75336"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.9874 13.6536L16.5964 14.2129L14.1602 16.4501"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default CoinsIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/corner-down-right-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/corner-down-right-icon/index.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const CornerDownRightIcon: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M10 6.66602L13.3333 9.99935L10 13.3327"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.66797 2.66602V7.33268C2.66797 8.03993 2.94892 8.7182 3.44902 9.2183C3.94911 9.7184 4.62739 9.99935 5.33464 9.99935H13.3346"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default CornerDownRightIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/cross-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/cross-icon/index.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const CrossIcon: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M15 5L5 15"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 5L15 15"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default CrossIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/crosshair-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/crosshair-icon/index.tsx
@@ -0,0 +1,57 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const CrosshairIcon: React.FC<IconProps> = ({
+  size = "24",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M21 12H17"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7 12H3"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 7V3"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 21V17"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default CrosshairIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/customer-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/customer-icon/index.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const CustomerIcon: React.FC<IconProps> = ({
+  size = "24",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default CustomerIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/details-icon.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/details-icon.tsx
@@ -0,0 +1,57 @@
+import React from "react"
+import IconProps from "./types/icon-type"
+
+const DetailsIcon: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M15.4444 17H4.55556C3.7 17 3 16.35 3 15.5556V5.44444C3 4.65 3.7 4 4.55556 4H15.4444C16.3 4 17 4.65 17 5.44444V15.5556C17 16.35 16.3 17 15.4444 17Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13 2.43994V3.43994"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7 2.43994V3.43994"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 10.7632C11.1046 10.7632 12 9.86775 12 8.76318C12 7.65861 11.1046 6.76318 10 6.76318C8.89543 6.76318 8 7.65861 8 8.76318C8 9.86775 8.89543 10.7632 10 10.7632Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14 14.2979C12.88 13.6312 11.52 13.2979 10 13.2979C8.48 13.2979 7.12 13.6979 6 14.2979"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default DetailsIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/discord-icon.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/discord-icon.tsx
@@ -0,0 +1,26 @@
+import React from "react"
+import IconProps from "./types/icon-type"
+
+const DiscordIcon: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M18.9308 5.63282C17.6561 5.04792 16.2892 4.61699 14.8599 4.37018C14.8339 4.36541 14.8079 4.37732 14.7945 4.40112C14.6187 4.7138 14.4239 5.12172 14.2876 5.44234C12.7503 5.2122 11.221 5.2122 9.71527 5.44234C9.57887 5.11459 9.37707 4.7138 9.20048 4.40112C9.18707 4.37811 9.16107 4.36621 9.13504 4.37018C7.70659 4.6162 6.33963 5.04713 5.06411 5.63282C5.05307 5.63758 5.04361 5.64552 5.03732 5.65583C2.44449 9.52947 1.73421 13.3079 2.08265 17.0395C2.08423 17.0577 2.09447 17.0752 2.10867 17.0863C3.81934 18.3426 5.47642 19.1052 7.10273 19.6108C7.12876 19.6187 7.15634 19.6092 7.1729 19.5877C7.55761 19.0624 7.90054 18.5085 8.19456 17.9259C8.21192 17.8918 8.19535 17.8513 8.15989 17.8378C7.61594 17.6315 7.098 17.3799 6.59977 17.0942C6.56037 17.0712 6.55721 17.0148 6.59347 16.9879C6.69831 16.9093 6.80318 16.8275 6.9033 16.745C6.92141 16.7299 6.94665 16.7268 6.96794 16.7363C10.2411 18.2307 13.7846 18.2307 17.0191 16.7363C17.0404 16.726 17.0657 16.7292 17.0846 16.7442C17.1847 16.8268 17.2895 16.9093 17.3952 16.9879C17.4314 17.0148 17.4291 17.0712 17.3897 17.0942C16.8914 17.3855 16.3735 17.6315 15.8288 17.837C15.7933 17.8505 15.7775 17.8918 15.7949 17.9259C16.0952 18.5076 16.4381 19.0616 16.8157 19.587C16.8315 19.6092 16.8599 19.6187 16.8859 19.6108C18.5201 19.1052 20.1772 18.3426 21.8879 17.0863C21.9028 17.0752 21.9123 17.0585 21.9139 17.0403C22.3309 12.7261 21.2154 8.9787 18.9568 5.65662C18.9513 5.64552 18.9419 5.63758 18.9308 5.63282ZM8.68335 14.7673C7.69792 14.7673 6.88594 13.8626 6.88594 12.7515C6.88594 11.6405 7.68217 10.7358 8.68335 10.7358C9.69239 10.7358 10.4965 11.6484 10.4807 12.7515C10.4807 13.8626 9.68451 14.7673 8.68335 14.7673ZM15.329 14.7673C14.3435 14.7673 13.5316 13.8626 13.5316 12.7515C13.5316 11.6405 14.3278 10.7358 15.329 10.7358C16.338 10.7358 17.1421 11.6484 17.1264 12.7515C17.1264 13.8626 16.338 14.7673 15.329 14.7673Z"
+        fill={color}
+      />
+    </svg>
+  )
+}
+
+export default DiscordIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/dollar-sign-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/dollar-sign-icon/index.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const DollarSignIcon: React.FC<IconProps> = ({
+  size = "24",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M12 3V21"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17 6H9.5C8.57174 6 7.6815 6.31607 7.02513 6.87868C6.36875 7.44129 6 8.20435 6 9C6 9.79565 6.36875 10.5587 7.02513 11.1213C7.6815 11.6839 8.57174 12 9.5 12H14.5C15.4283 12 16.3185 12.3161 16.9749 12.8787C17.6313 13.4413 18 14.2044 18 15C18 15.7956 17.6313 16.5587 16.9749 17.1213C16.3185 17.6839 15.4283 18 14.5 18H6"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default DollarSignIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/down-left/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/down-left/index.tsx
@@ -0,0 +1,34 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const DownLeftIcon: React.FC<IconProps> = ({
+  size = "16",
+  color = "#9CA3AF",
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.00033 6.66663L2.66699 9.99996L6.00033 13.3333"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.3337 2.66663V7.33329C13.3337 8.04054 13.0527 8.71881 12.5526 9.21891C12.0525 9.71901 11.3742 9.99996 10.667 9.99996H2.66699"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default DownLeftIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/download-icon.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/download-icon.tsx
@@ -0,0 +1,42 @@
+import React, { FC } from "react"
+import IconProps from "./types/icon-type"
+
+const DownloadIcon: FC<IconProps> = (props) => {
+  const { fill, size, ...attributes } = props
+  const line = fill || "#111827"
+
+  return (
+    <svg
+      width={size || 20}
+      height={size || 20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5"
+        stroke={line}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.83203 8.33301L9.9987 12.4997L14.1654 8.33301"
+        stroke={line}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 12.5V2.5"
+        stroke={line}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default DownloadIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/duplicate-icon.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/duplicate-icon.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "./types/icon-type"
+
+const DuplicateIcon: React.FC<IconProps> = ({
+  size = "20px",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M16.0894 8.33333H9.74326C8.9644 8.33333 8.33301 8.96472 8.33301 9.74358V16.0897C8.33301 16.8686 8.9644 17.5 9.74326 17.5H16.0894C16.8683 17.5 17.4997 16.8686 17.4997 16.0897V9.74358C17.4997 8.96472 16.8683 8.33333 16.0894 8.33333Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.61538 11.6667H3.91026C3.53623 11.6667 3.17753 11.5181 2.91305 11.2536C2.64858 10.9891 2.5 10.6304 2.5 10.2564V3.91026C2.5 3.53623 2.64858 3.17753 2.91305 2.91305C3.17753 2.64858 3.53623 2.5 3.91026 2.5H10.2564C10.6304 2.5 10.9891 2.64858 11.2536 2.91305C11.5181 3.17753 11.6667 3.53623 11.6667 3.91026V4.61538"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default DuplicateIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/edit-icon.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/edit-icon.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "./types/icon-type"
+
+const EditIcon: React.FC<IconProps> = ({
+  size = "24px",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M9 3H4.55556C4.143 3 3.74733 3.16389 3.45561 3.45561C3.16389 3.74733 3 4.143 3 4.55556V15.4444C3 15.857 3.16389 16.2527 3.45561 16.5444C3.74733 16.8361 4.143 17 4.55556 17H15.4444C15.857 17 16.2527 16.8361 16.5444 16.5444C16.8361 16.2527 17 15.857 17 15.4444V11"
+        stroke={color}
+        strokeWidth="1.4667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.4356 3.43999C14.7173 3.15827 15.0994 3 15.4978 3C15.8962 3 16.2783 3.15827 16.56 3.43999C16.8417 3.72171 17 4.1038 17 4.50221C17 4.90062 16.8417 5.28272 16.56 5.56443L9.8326 12.2919L7 13L7.70815 10.1674L14.4356 3.43999Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default EditIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/edit-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/edit-icon/index.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const EditIcon: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M9 3H4.55556C4.143 3 3.74733 3.16389 3.45561 3.45561C3.16389 3.74733 3 4.143 3 4.55556V15.4444C3 15.857 3.16389 16.2527 3.45561 16.5444C3.74733 16.8361 4.143 17 4.55556 17H15.4444C15.857 17 16.2527 16.8361 16.5444 16.5444C16.8361 16.2527 17 15.857 17 15.4444V11"
+        stroke={color}
+        strokeWidth="1.4667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.4356 3.43999C14.7173 3.15827 15.0994 3 15.4978 3C15.8962 3 16.2783 3.15827 16.56 3.43999C16.8417 3.72171 17 4.1038 17 4.50221C17 4.90062 16.8417 5.28272 16.56 5.56443L9.8326 12.2919L7 13L7.70815 10.1674L14.4356 3.43999Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default EditIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/export-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/export-icon/index.tsx
@@ -0,0 +1,43 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const ExportIcon: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 21 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M17.5 13V15.6667C17.5 16.0203 17.3361 16.3594 17.0444 16.6095C16.7527 16.8595 16.357 17 15.9444 17H5.05556C4.643 17 4.24733 16.8595 3.95561 16.6095C3.66389 16.3594 3.5 16.0203 3.5 15.6667V13"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.6673 6.92057L10.5007 2.75391L6.33398 6.92057"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.5 2.75391V12.7539"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ExportIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/eye-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/eye-icon/index.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const EyeIcon: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M2.5 10C2.5 10 5.22727 4.58337 10 4.58337C14.7727 4.58337 17.5 10 17.5 10C17.5 10 14.7727 15.4167 10 15.4167C5.22727 15.4167 2.5 10 2.5 10Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.99965 12.0739C11.145 12.0739 12.0735 11.1454 12.0735 10C12.0735 8.85465 11.145 7.92615 9.99965 7.92615C8.85428 7.92615 7.92578 8.85465 7.92578 10C7.92578 11.1454 8.85428 12.0739 9.99965 12.0739Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default EyeIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/eye-off-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/eye-off-icon/index.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const EyeOffIcon: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M8.56818 4.70906C9.0375 4.59921 9.518 4.54429 10 4.54543C14.7727 4.54543 17.5 9.99997 17.5 9.99997C17.0861 10.7742 16.5925 11.5032 16.0273 12.175M11.4455 11.4454C11.2582 11.6464 11.0324 11.8076 10.7815 11.9194C10.5306 12.0312 10.2597 12.0913 9.98506 12.0961C9.71042 12.101 9.43761 12.0505 9.18292 11.9476C8.92822 11.8447 8.69686 11.6916 8.50262 11.4973C8.30839 11.3031 8.15527 11.0718 8.05239 10.8171C7.94952 10.5624 7.899 10.2896 7.90384 10.0149C7.90869 9.74027 7.9688 9.46941 8.0806 9.2185C8.19239 8.9676 8.35358 8.74178 8.55455 8.55452M14.05 14.05C12.8845 14.9384 11.4653 15.4306 10 15.4545C5.22727 15.4545 2.5 9.99997 2.5 9.99997C3.34811 8.41945 4.52441 7.03857 5.95 5.94997L14.05 14.05Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.5 2.5L17.5 17.5"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default EyeOffIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/fast-delivery-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/fast-delivery-icon/index.tsx
@@ -0,0 +1,64 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const FastDeliveryIcon: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M3.02901 6.12695H2.25439"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.80363 3.8031H2.25439"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.8734 16.1969H3.02881"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.0861 3.8031L13.3224 6.34927C13.224 6.67693 12.9219 6.90157 12.5803 6.90157H10.1697C9.65067 6.90157 9.27886 6.40117 9.42758 5.90464L10.0581 3.8031"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M6.90088 10.7745H8.55081"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.2125 13.0985H6.01087C4.76529 13.0985 3.87216 11.8978 4.23003 10.7049L5.9032 5.1277C6.13946 4.34146 6.86295 3.8031 7.68405 3.8031H15.8865C17.1321 3.8031 18.0252 5.00376 17.6673 6.19667L15.9941 11.7739C15.7579 12.5601 15.0336 13.0985 14.2125 13.0985Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default FastDeliveryIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/file-icon.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/file-icon.tsx
@@ -0,0 +1,55 @@
+import React, { FC } from "react"
+import IconProps from "./types/icon-type"
+
+const FileIcon: FC<IconProps> = (props) => {
+  const { fill, size, ...attributes } = props
+  const line = fill || "#2DD4BF"
+  return (
+    <svg
+      width={size || 20}
+      height={size || 20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M13.333 17.5H14.1663C14.8294 17.5 15.4653 17.2366 15.9341 16.7678C16.4029 16.2989 16.6663 15.663 16.6663 15V7.09109C16.6663 6.42805 16.4029 5.79217 15.9341 5.32333L13.843 3.23223C13.3742 2.76339 12.7383 2.5 12.0752 2.5H5.83301C5.16997 2.5 4.53408 2.76339 4.06524 3.23223C3.5964 3.70107 3.33301 4.33696 3.33301 5V7.5"
+        stroke={line}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.6663 7.08333H13.7497C13.3076 7.08333 12.8837 6.90774 12.5712 6.59518C12.2586 6.28262 12.083 5.85869 12.083 5.41667V2.5"
+        stroke={line}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.99967 10H9.16634C9.60837 10 10.0323 10.1756 10.3449 10.4882C10.6574 10.8007 10.833 11.2246 10.833 11.6667V15.8333C10.833 16.2754 10.6574 16.6993 10.3449 17.0118C10.0323 17.3244 9.60837 17.5 9.16634 17.5H4.99967C4.55765 17.5 4.13372 17.3244 3.82116 17.0118C3.5086 16.6993 3.33301 16.2754 3.33301 15.8333V11.6667C3.33301 11.2246 3.5086 10.8007 3.82116 10.4882C4.13372 10.1756 4.55765 10 4.99967 10V10Z"
+        stroke={line}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.833 13.75H3.33301"
+        stroke={line}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.08301 10V17.5"
+        stroke={line}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default FileIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/gear-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/gear-icon/index.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const GearIcon: React.FC<IconProps> = ({
+  size = "24",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M12.1952 3H11.8048C11.3342 3 10.8829 3.18964 10.5502 3.52721C10.2174 3.86477 10.0305 4.32261 10.0305 4.8V4.962C10.0302 5.27765 9.94806 5.58767 9.79235 5.86095C9.63663 6.13424 9.41282 6.36117 9.14336 6.519L8.76188 6.744C8.49215 6.90198 8.18618 6.98515 7.87472 6.98515C7.56327 6.98515 7.2573 6.90198 6.98757 6.744L6.8545 6.672C6.44735 6.43374 5.96365 6.3691 5.50957 6.49228C5.05549 6.61546 4.66815 6.91638 4.43256 7.329L4.23739 7.671C4.00252 8.08404 3.93881 8.57475 4.06023 9.0354C4.18165 9.49605 4.47828 9.889 4.88501 10.128L5.01808 10.218C5.28625 10.3751 5.50923 10.6006 5.66486 10.8721C5.8205 11.1437 5.90337 11.4519 5.90524 11.766V12.225C5.90648 12.5422 5.82508 12.8541 5.66929 13.1291C5.5135 13.4041 5.28885 13.6324 5.01808 13.791L4.88501 13.872C4.47828 14.111 4.18165 14.5039 4.06023 14.9646C3.93881 15.4253 4.00252 15.916 4.23739 16.329L4.43256 16.671C4.66815 17.0836 5.05549 17.3845 5.50957 17.5077C5.96365 17.6309 6.44735 17.5663 6.8545 17.328L6.98757 17.256C7.2573 17.098 7.56327 17.0148 7.87472 17.0148C8.18618 17.0148 8.49215 17.098 8.76188 17.256L9.14336 17.481C9.41282 17.6388 9.63663 17.8658 9.79235 18.139C9.94806 18.4123 10.0302 18.7223 10.0305 19.038V19.2C10.0305 19.6774 10.2174 20.1352 10.5502 20.4728C10.8829 20.8104 11.3342 21 11.8048 21H12.1952C12.6658 21 13.1171 20.8104 13.4498 20.4728C13.7826 20.1352 13.9695 19.6774 13.9695 19.2V19.038C13.9698 18.7223 14.0519 18.4123 14.2077 18.139C14.3634 17.8658 14.5872 17.6388 14.8566 17.481L15.2381 17.256C15.5078 17.098 15.8138 17.0148 16.1253 17.0148C16.4367 17.0148 16.7427 17.098 17.0124 17.256L17.1455 17.328C17.5527 17.5663 18.0364 17.6309 18.4904 17.5077C18.9445 17.3845 19.3319 17.0836 19.5674 16.671L19.7626 16.32C19.9975 15.907 20.0612 15.4163 19.9398 14.9556C19.8184 14.4949 19.5217 14.102 19.115 13.863L18.9819 13.791C18.7111 13.6324 18.4865 13.4041 18.3307 13.1291C18.1749 12.8541 18.0935 12.5422 18.0948 12.225V11.775C18.0935 11.4578 18.1749 11.1459 18.3307 10.8709C18.4865 10.5959 18.7111 10.3676 18.9819 10.209L19.115 10.128C19.5217 9.889 19.8184 9.49605 19.9398 9.0354C20.0612 8.57475 19.9975 8.08404 19.7626 7.671L19.5674 7.329C19.3319 6.91638 18.9445 6.61546 18.4904 6.49228C18.0364 6.3691 17.5527 6.43374 17.1455 6.672L17.0124 6.744C16.7427 6.90198 16.4367 6.98515 16.1253 6.98515C15.8138 6.98515 15.5078 6.90198 15.2381 6.744L14.8566 6.519C14.5872 6.36117 14.3634 6.13424 14.2077 5.86095C14.0519 5.58767 13.9698 5.27765 13.9695 4.962V4.8C13.9695 4.32261 13.7826 3.86477 13.4498 3.52721C13.1171 3.18964 12.6658 3 12.1952 3Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default GearIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/gift-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/gift-icon/index.tsx
@@ -0,0 +1,57 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const GiftIcon: React.FC<IconProps> = ({
+  size = "24",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M19 11.5V19.5H5V11.5"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M21 7.5H3V11.5H21V7.5Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 19.5V7.5"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 7.5H8.14286C7.57454 7.5 7.02949 7.23661 6.62763 6.76777C6.22576 6.29893 6 5.66304 6 5C6 4.33696 6.22576 3.70107 6.62763 3.23223C7.02949 2.76339 7.57454 2.5 8.14286 2.5C11.1429 2.5 12 7.5 12 7.5Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 7.5H15.8571C16.4255 7.5 16.9705 7.23661 17.3724 6.76777C17.7742 6.29893 18 5.66304 18 5C18 4.33696 17.7742 3.70107 17.3724 3.23223C16.9705 2.76339 16.4255 2.5 15.8571 2.5C12.8571 2.5 12 7.5 12 7.5Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default GiftIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/grip-icon.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/grip-icon.tsx
@@ -0,0 +1,64 @@
+import React from "react"
+import IconProps from "./types/icon-type"
+
+const GripIcon: React.FC<IconProps> = ({
+  size = "24px",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M7.49935 10.8337C7.95959 10.8337 8.33268 10.4606 8.33268 10.0003C8.33268 9.54009 7.95959 9.16699 7.49935 9.16699C7.03911 9.16699 6.66602 9.54009 6.66602 10.0003C6.66602 10.4606 7.03911 10.8337 7.49935 10.8337Z"
+        stroke={color}
+        strokeWidth="1.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.49935 4.99967C7.95959 4.99967 8.33268 4.62658 8.33268 4.16634C8.33268 3.7061 7.95959 3.33301 7.49935 3.33301C7.03911 3.33301 6.66602 3.7061 6.66602 4.16634C6.66602 4.62658 7.03911 4.99967 7.49935 4.99967Z"
+        stroke={color}
+        strokeWidth="1.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.49935 16.6667C7.95959 16.6667 8.33268 16.2936 8.33268 15.8333C8.33268 15.3731 7.95959 15 7.49935 15C7.03911 15 6.66602 15.3731 6.66602 15.8333C6.66602 16.2936 7.03911 16.6667 7.49935 16.6667Z"
+        stroke={color}
+        strokeWidth="1.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.4993 10.8337C12.9596 10.8337 13.3327 10.4606 13.3327 10.0003C13.3327 9.54009 12.9596 9.16699 12.4993 9.16699C12.0391 9.16699 11.666 9.54009 11.666 10.0003C11.666 10.4606 12.0391 10.8337 12.4993 10.8337Z"
+        stroke={color}
+        strokeWidth="1.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.4993 4.99967C12.9596 4.99967 13.3327 4.62658 13.3327 4.16634C13.3327 3.7061 12.9596 3.33301 12.4993 3.33301C12.0391 3.33301 11.666 3.7061 11.666 4.16634C11.666 4.62658 12.0391 4.99967 12.4993 4.99967Z"
+        stroke={color}
+        strokeWidth="1.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.4993 16.6667C12.9596 16.6667 13.3327 16.2936 13.3327 15.8333C13.3327 15.3731 12.9596 15 12.4993 15C12.0391 15 11.666 15.3731 11.666 15.8333C11.666 16.2936 12.0391 16.6667 12.4993 16.6667Z"
+        stroke={color}
+        strokeWidth="1.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default GripIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/happy-icon/index.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/happy-icon/index.tsx
@@ -0,0 +1,50 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const HappyIcon: React.FC<IconProps> = ({
+  size = "24",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8 14C8 14 9.5 16 12 16C14.5 16 16 14 16 14"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9 9H9.01"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15 9H15.01"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default HappyIcon
--- a/packages/admin-ui/ui/src/components/fundamentals/icons/help-circle.tsx
+++ b/packages/admin-ui/ui/src/components/fundamentals/icons/help-circle.tsx
@@ -0,0 +1,43 @@
+import React from "react"
+import IconProps from "./types/icon-type"
+
+const HelpCircleIcon: React.FC<IconProps> = ({
+  size = "24px",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.08594 9.03573C9.32104 8.36739 9.78509 7.80383 10.3959 7.44486C11.0067 7.08588 11.7248 6.95466 12.4231 7.07444C13.1214 7.19421 13.7548 7.55725 14.211 8.09925C14.6673 8.64126 14.917 9.32725 14.9159 10.0357C14.9159 12.0357 11.9159 13.0357 11.9159 13.0357"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.9961 16.4316H12.0061"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default HelpCircleIcon
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export { Thumbnail as default } from "./thumbnail"`