From 77fa8ca1841633aeb76b9001d64c859a18e6b6bd Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Tue, 7 Oct 2025 17:05:09 +0500
Subject: [PATCH] buttons, icons, input

---
 client/bun.lock                               |  3 +
 client/package.json                           |  1 +
 client/src/components/icons/AppsIcon.tsx      | 28 +++++++++
 client/src/components/icons/BellIcon.tsx      | 15 +++++
 client/src/components/icons/BookedIcon.tsx    | 14 +++++
 client/src/components/icons/BriefcaseIcon.tsx | 15 +++++
 client/src/components/icons/CalendarIcon.tsx  | 15 +++++
 .../src/components/icons/ChatFilledIcon.tsx   | 14 +++++
 client/src/components/icons/ChatIcon.tsx      | 15 +++++
 client/src/components/icons/ChatTextIcon.tsx  | 15 +++++
 client/src/components/icons/CheckIcon.tsx     | 14 +++++
 .../src/components/icons/ChevronDownIcon.tsx  | 15 +++++
 .../src/components/icons/ChevronLeftIcon.tsx  | 15 +++++
 .../src/components/icons/ChevronRightIcon.tsx | 15 +++++
 client/src/components/icons/ChevronUpIcon.tsx | 15 +++++
 client/src/components/icons/ClientIcon.tsx    | 22 +++++++
 client/src/components/icons/ClockIcon.tsx     | 15 +++++
 client/src/components/icons/CloseIcon.tsx     | 15 +++++
 client/src/components/icons/CogFilledIcon.tsx | 14 +++++
 client/src/components/icons/CogIcon.tsx       | 20 +++++++
 client/src/components/icons/CopyIcon.tsx      | 21 +++++++
 client/src/components/icons/CrownIcon.tsx     | 12 ++++
 .../components/icons/DocumentChartIcon.tsx    | 15 +++++
 client/src/components/icons/DownloadIcon.tsx  | 15 +++++
 client/src/components/icons/EditIcon.tsx      | 15 +++++
 .../src/components/icons/ExitFilledIcon.tsx   | 12 ++++
 .../src/components/icons/FullscreenIcon.tsx   | 15 +++++
 .../components/icons/HandRaisedFilledIcon.tsx | 12 ++++
 .../src/components/icons/HandRaisedIcon.tsx   | 15 +++++
 .../icons/HandRaisedOffFilledIcon.tsx         | 16 ++++++
 .../components/icons/HandRaisedOffIcon.tsx    | 12 ++++
 .../src/components/icons/HearthFilledIcon.tsx | 12 ++++
 .../src/components/icons/HomeFilledIcon.tsx   | 12 ++++
 client/src/components/icons/HomeIcon.tsx      | 14 +++++
 client/src/components/icons/LightningIcon.tsx | 12 ++++
 client/src/components/icons/LinkIcon.tsx      | 15 +++++
 client/src/components/icons/LoaderIcon.tsx    | 35 ++++++++++++
 client/src/components/icons/MagicIcon.tsx     | 12 ++++
 client/src/components/icons/MailIcon.tsx      | 15 +++++
 client/src/components/icons/ManagersIcon.tsx  | 36 ++++++++++++
 .../components/icons/MicrophoneFilledIcon.tsx | 16 ++++++
 .../src/components/icons/MicrophoneIcon.tsx   | 15 +++++
 .../icons/MicrophoneOffFilledIcon.tsx         | 20 +++++++
 .../components/icons/MicrophoneOffIcon.tsx    | 19 +++++++
 client/src/components/icons/MoreIcon.tsx      | 15 +++++
 .../src/components/icons/PhotoFilledIcon.tsx  | 12 ++++
 client/src/components/icons/PinIcon.tsx       | 14 +++++
 client/src/components/icons/PlusIcon.tsx      | 15 +++++
 client/src/components/icons/QRIcon.tsx        | 14 +++++
 .../src/components/icons/QuestionMarkIcon.tsx | 15 +++++
 client/src/components/icons/RestartIcon.tsx   | 14 +++++
 client/src/components/icons/ScreenIcon.tsx    | 22 +++++++
 client/src/components/icons/SearchIcon.tsx    | 22 +++++++
 client/src/components/icons/SendIcon.tsx      | 14 +++++
 .../src/components/icons/ShareFilledIcon.tsx  | 12 ++++
 client/src/components/icons/ShareIcon.tsx     | 15 +++++
 client/src/components/icons/SortIcon.tsx      | 12 ++++
 client/src/components/icons/SoundIcon.tsx     | 16 ++++++
 client/src/components/icons/StartIcon.tsx     | 13 +++++
 client/src/components/icons/TrashIcon.tsx     | 15 +++++
 client/src/components/icons/UnlinkIcon.tsx    | 13 +++++
 .../src/components/icons/UsersFilledIcon.tsx  | 18 ++++++
 client/src/components/icons/UsersIcon.tsx     | 15 +++++
 .../src/components/icons/VideoFilledIcon.tsx  | 12 ++++
 client/src/components/icons/VideoIcon.tsx     | 15 +++++
 .../components/icons/VideoOffFilledIcon.tsx   | 16 ++++++
 client/src/components/icons/VideoOffIcon.tsx  | 15 +++++
 client/src/components/icons/WarningIcon.tsx   | 12 ++++
 .../src/components/icons/XMarkFilledIcon.tsx  | 12 ++++
 client/src/components/icons/XMarkIcon.tsx     | 15 +++++
 client/src/components/ui/Button.tsx           | 57 +++++++++++++++++++
 client/src/components/ui/ControlButton.tsx    | 47 +++++++++++++++
 .../components/ui/FloatingActionButton.tsx    | 33 +++++++++++
 client/src/components/ui/Input.tsx            | 51 +++++++++++++++++
 client/src/index.css                          | 50 ++++++++++++++++
 client/tailwind.config.js                     | 11 ++--
 76 files changed, 1314 insertions(+), 6 deletions(-)
 create mode 100644 client/src/components/icons/AppsIcon.tsx
 create mode 100644 client/src/components/icons/BellIcon.tsx
 create mode 100644 client/src/components/icons/BookedIcon.tsx
 create mode 100644 client/src/components/icons/BriefcaseIcon.tsx
 create mode 100644 client/src/components/icons/CalendarIcon.tsx
 create mode 100644 client/src/components/icons/ChatFilledIcon.tsx
 create mode 100644 client/src/components/icons/ChatIcon.tsx
 create mode 100644 client/src/components/icons/ChatTextIcon.tsx
 create mode 100644 client/src/components/icons/CheckIcon.tsx
 create mode 100644 client/src/components/icons/ChevronDownIcon.tsx
 create mode 100644 client/src/components/icons/ChevronLeftIcon.tsx
 create mode 100644 client/src/components/icons/ChevronRightIcon.tsx
 create mode 100644 client/src/components/icons/ChevronUpIcon.tsx
 create mode 100644 client/src/components/icons/ClientIcon.tsx
 create mode 100644 client/src/components/icons/ClockIcon.tsx
 create mode 100644 client/src/components/icons/CloseIcon.tsx
 create mode 100644 client/src/components/icons/CogFilledIcon.tsx
 create mode 100644 client/src/components/icons/CogIcon.tsx
 create mode 100644 client/src/components/icons/CopyIcon.tsx
 create mode 100644 client/src/components/icons/CrownIcon.tsx
 create mode 100644 client/src/components/icons/DocumentChartIcon.tsx
 create mode 100644 client/src/components/icons/DownloadIcon.tsx
 create mode 100644 client/src/components/icons/EditIcon.tsx
 create mode 100644 client/src/components/icons/ExitFilledIcon.tsx
 create mode 100644 client/src/components/icons/FullscreenIcon.tsx
 create mode 100644 client/src/components/icons/HandRaisedFilledIcon.tsx
 create mode 100644 client/src/components/icons/HandRaisedIcon.tsx
 create mode 100644 client/src/components/icons/HandRaisedOffFilledIcon.tsx
 create mode 100644 client/src/components/icons/HandRaisedOffIcon.tsx
 create mode 100644 client/src/components/icons/HearthFilledIcon.tsx
 create mode 100644 client/src/components/icons/HomeFilledIcon.tsx
 create mode 100644 client/src/components/icons/HomeIcon.tsx
 create mode 100644 client/src/components/icons/LightningIcon.tsx
 create mode 100644 client/src/components/icons/LinkIcon.tsx
 create mode 100644 client/src/components/icons/LoaderIcon.tsx
 create mode 100644 client/src/components/icons/MagicIcon.tsx
 create mode 100644 client/src/components/icons/MailIcon.tsx
 create mode 100644 client/src/components/icons/ManagersIcon.tsx
 create mode 100644 client/src/components/icons/MicrophoneFilledIcon.tsx
 create mode 100644 client/src/components/icons/MicrophoneIcon.tsx
 create mode 100644 client/src/components/icons/MicrophoneOffFilledIcon.tsx
 create mode 100644 client/src/components/icons/MicrophoneOffIcon.tsx
 create mode 100644 client/src/components/icons/MoreIcon.tsx
 create mode 100644 client/src/components/icons/PhotoFilledIcon.tsx
 create mode 100644 client/src/components/icons/PinIcon.tsx
 create mode 100644 client/src/components/icons/PlusIcon.tsx
 create mode 100644 client/src/components/icons/QRIcon.tsx
 create mode 100644 client/src/components/icons/QuestionMarkIcon.tsx
 create mode 100644 client/src/components/icons/RestartIcon.tsx
 create mode 100644 client/src/components/icons/ScreenIcon.tsx
 create mode 100644 client/src/components/icons/SearchIcon.tsx
 create mode 100644 client/src/components/icons/SendIcon.tsx
 create mode 100644 client/src/components/icons/ShareFilledIcon.tsx
 create mode 100644 client/src/components/icons/ShareIcon.tsx
 create mode 100644 client/src/components/icons/SortIcon.tsx
 create mode 100644 client/src/components/icons/SoundIcon.tsx
 create mode 100644 client/src/components/icons/StartIcon.tsx
 create mode 100644 client/src/components/icons/TrashIcon.tsx
 create mode 100644 client/src/components/icons/UnlinkIcon.tsx
 create mode 100644 client/src/components/icons/UsersFilledIcon.tsx
 create mode 100644 client/src/components/icons/UsersIcon.tsx
 create mode 100644 client/src/components/icons/VideoFilledIcon.tsx
 create mode 100644 client/src/components/icons/VideoIcon.tsx
 create mode 100644 client/src/components/icons/VideoOffFilledIcon.tsx
 create mode 100644 client/src/components/icons/VideoOffIcon.tsx
 create mode 100644 client/src/components/icons/WarningIcon.tsx
 create mode 100644 client/src/components/icons/XMarkFilledIcon.tsx
 create mode 100644 client/src/components/icons/XMarkIcon.tsx
 create mode 100644 client/src/components/ui/Button.tsx
 create mode 100644 client/src/components/ui/ControlButton.tsx
 create mode 100644 client/src/components/ui/FloatingActionButton.tsx
 create mode 100644 client/src/components/ui/Input.tsx

diff --git a/client/bun.lock b/client/bun.lock
index d8fa90d..8abbecd 100644
--- a/client/bun.lock
+++ b/client/bun.lock
@@ -5,6 +5,7 @@
       "name": "client",
       "dependencies": {
         "@tanstack/react-query": "^5.90.2",
+        "clsx": "^2.1.1",
         "ky": "^1.11.0",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
@@ -278,6 +279,8 @@
 
     "chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],
 
+    "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
+
     "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
 
     "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
diff --git a/client/package.json b/client/package.json
index 1c15b10..ed448bf 100644
--- a/client/package.json
+++ b/client/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.90.2",
+    "clsx": "^2.1.1",
     "ky": "^1.11.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
diff --git a/client/src/components/icons/AppsIcon.tsx b/client/src/components/icons/AppsIcon.tsx
new file mode 100644
index 0000000..590b9f1
--- /dev/null
+++ b/client/src/components/icons/AppsIcon.tsx
@@ -0,0 +1,28 @@
+function AppsIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <mask id="a" fill="currentColor">
+        <rect width={8.58} height={8.58} rx={1} />
+      </mask>
+      <rect
+        width={8.58}
+        height={8.58}
+        rx={1}
+        transform="matrix(.87416 .48564 -.87416 .48564 10 3.5)"
+        stroke="currentColor"
+        strokeWidth={2.4}
+        mask="url(#a)"
+      />
+      <path
+        d="M10.875 14.894c-.483.268-1.266.268-1.749 0l-5.828-3.238c-.449-.25-.473-.65-.055-.914.23-.146.633-.154.88-.017l5.368 2.983a1 1 0 0 0 .868.003l5.48-2.964a.96.96 0 0 1 .828.003c.46.256.46.67 0 .926l-5 2.778z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.874 18.014c-.483.269-1.265.269-1.748 0l-5.91-3.282c-.416-.232-.48-.595-.154-.867l.026-.022c.215-.178.668-.205.945-.056l5.537 2.981c.24.13.62.13.86 0l5.537-2.981c.277-.15.73-.122.945.056l.026.022c.327.272.262.635-.155.867l-5.116 2.842z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default AppsIcon;
diff --git a/client/src/components/icons/BellIcon.tsx b/client/src/components/icons/BellIcon.tsx
new file mode 100644
index 0000000..621a788
--- /dev/null
+++ b/client/src/components/icons/BellIcon.tsx
@@ -0,0 +1,15 @@
+function BellIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.38 14.235a20 20 0 0 0 4.546-1.092A7.47 7.47 0 0 1 15 8.125V7.5a5 5 0 0 0-10 0v.625a7.47 7.47 0 0 1-1.927 5.018 20 20 0 0 0 4.546 1.092m4.762 0c-1.582.188-3.18.188-4.762 0m4.762 0a2.5 2.5 0 1 1-4.762 0"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default BellIcon;
diff --git a/client/src/components/icons/BookedIcon.tsx b/client/src/components/icons/BookedIcon.tsx
new file mode 100644
index 0000000..6f7743e
--- /dev/null
+++ b/client/src/components/icons/BookedIcon.tsx
@@ -0,0 +1,14 @@
+function BookedIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.429 6.421C6.429 4.531 8.027 3 10 3s3.571 1.531 3.571 3.421v2.053h.286c.629 0 1.143.492 1.143 1.094v4.79C15 15.26 14.229 16 13.286 16H6.714C5.771 16 5 15.261 5 14.358v-4.79c0-.602.514-1.094 1.143-1.094h.286zm5.714 0v2.053H7.857V6.42c0-1.134.959-2.053 2.143-2.053s2.143.919 2.143 2.053M10 10.013c-.284 0-.56.092-.782.262s-.376.407-.439.673c-.062.265-.028.543.096.787.125.245.333.442.59.558v1.654c0 .137.056.267.156.363s.237.15.379.15a.55.55 0 0 0 .379-.15.5.5 0 0 0 .157-.363v-1.654c.257-.116.464-.313.589-.557s.158-.523.096-.788a1.2 1.2 0 0 0-.44-.673 1.3 1.3 0 0 0-.781-.262"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default BookedIcon;
diff --git a/client/src/components/icons/BriefcaseIcon.tsx b/client/src/components/icons/BriefcaseIcon.tsx
new file mode 100644
index 0000000..35f7048
--- /dev/null
+++ b/client/src/components/icons/BriefcaseIcon.tsx
@@ -0,0 +1,15 @@
+function BriefcaseIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M16.875 11.792v3.541c0 .912-.656 1.697-1.56 1.817a40.4 40.4 0 0 1-10.63 0c-.904-.12-1.56-.905-1.56-1.817v-3.541m13.75 0a1.82 1.82 0 0 0 .625-1.384V7.255c0-.9-.64-1.68-1.53-1.812a40 40 0 0 0-2.845-.323m3.75 6.672q-.244.208-.56.316A20 20 0 0 1 10 13.125c-2.207 0-4.33-.357-6.314-1.017a1.7 1.7 0 0 1-.561-.316m0 0a1.82 1.82 0 0 1-.625-1.384V7.255c0-.9.64-1.68 1.53-1.812a40 40 0 0 1 2.845-.323m6.25 0v-.745A1.875 1.875 0 0 0 11.25 2.5h-2.5a1.875 1.875 0 0 0-1.875 1.875v.745m6.25 0a41 41 0 0 0-6.25 0M10 10.625h.007v.007H10z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default BriefcaseIcon;
diff --git a/client/src/components/icons/CalendarIcon.tsx b/client/src/components/icons/CalendarIcon.tsx
new file mode 100644
index 0000000..2ba1ea6
--- /dev/null
+++ b/client/src/components/icons/CalendarIcon.tsx
@@ -0,0 +1,15 @@
+function CalendarIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5.917 3v1.75M14.083 3v1.75M3 15.25V6.5a1.75 1.75 0 0 1 1.75-1.75h10.5A1.75 1.75 0 0 1 17 6.5v8.75m-14 0A1.75 1.75 0 0 0 4.75 17h10.5A1.75 1.75 0 0 0 17 15.25m-14 0V9.417a1.75 1.75 0 0 1 1.75-1.75h10.5A1.75 1.75 0 0 1 17 9.417v5.833"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default CalendarIcon;
diff --git a/client/src/components/icons/ChatFilledIcon.tsx b/client/src/components/icons/ChatFilledIcon.tsx
new file mode 100644
index 0000000..31efb3f
--- /dev/null
+++ b/client/src/components/icons/ChatFilledIcon.tsx
@@ -0,0 +1,14 @@
+function ChatFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.865 3.374a35.4 35.4 0 0 1 10.27 0c1.42.209 2.403 1.452 2.403 2.85v4.322c0 1.397-.983 2.64-2.403 2.85a35 35 0 0 1-4.252.362.28.28 0 0 0-.191.08l-3.004 3.004a.538.538 0 0 1-.919-.38v-2.84a35 35 0 0 1-1.904-.227c-1.42-.208-2.404-1.453-2.404-2.85v-4.32c0-1.398.984-2.643 2.404-2.85"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default ChatFilledIcon;
diff --git a/client/src/components/icons/ChatIcon.tsx b/client/src/components/icons/ChatIcon.tsx
new file mode 100644
index 0000000..a5d8606
--- /dev/null
+++ b/client/src/components/icons/ChatIcon.tsx
@@ -0,0 +1,15 @@
+function ChatIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.5 11.049c0 1.155.864 2.162 2.082 2.33q1.255.174 2.533.267V17l3.136-2.944c.212-.198.498-.313.798-.32a40 40 0 0 0 4.369-.357c1.218-.168 2.082-1.174 2.082-2.33V6.701c0-1.157-.864-2.163-2.082-2.331A40 40 0 0 0 10 4c-1.84 0-3.65.126-5.418.37C3.364 4.54 2.5 5.547 2.5 6.703z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ChatIcon;
diff --git a/client/src/components/icons/ChatTextIcon.tsx b/client/src/components/icons/ChatTextIcon.tsx
new file mode 100644
index 0000000..19e863e
--- /dev/null
+++ b/client/src/components/icons/ChatTextIcon.tsx
@@ -0,0 +1,15 @@
+function ChatTextIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6.292 7.792h6.5m-6.5 2.166h3.25M2.5 11.048c0 1.156.811 2.163 1.955 2.332q1.178.173 2.378.266V17l3.022-3.021a.82.82 0 0 1 .562-.24 35 35 0 0 0 4.21-.36c1.145-.168 1.956-1.174 1.956-2.33V6.701c0-1.157-.81-2.163-1.955-2.331A35 35 0 0 0 9.542 4a35 35 0 0 0-5.087.37C3.311 4.54 2.5 5.547 2.5 6.703z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ChatTextIcon;
diff --git a/client/src/components/icons/CheckIcon.tsx b/client/src/components/icons/CheckIcon.tsx
new file mode 100644
index 0000000..3c810ba
--- /dev/null
+++ b/client/src/components/icons/CheckIcon.tsx
@@ -0,0 +1,14 @@
+function CheckIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.456 6.113a.833.833 0 0 1-.069 1.177l-7.5 6.666a.833.833 0 0 1-1.143-.033L3.578 9.756a.833.833 0 0 1 1.178-1.179l3.611 3.611 6.913-6.144a.833.833 0 0 1 1.176.07"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default CheckIcon;
diff --git a/client/src/components/icons/ChevronDownIcon.tsx b/client/src/components/icons/ChevronDownIcon.tsx
new file mode 100644
index 0000000..910014a
--- /dev/null
+++ b/client/src/components/icons/ChevronDownIcon.tsx
@@ -0,0 +1,15 @@
+function ChevronDownIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m5 8 5 5 5-5"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ChevronDownIcon;
diff --git a/client/src/components/icons/ChevronLeftIcon.tsx b/client/src/components/icons/ChevronLeftIcon.tsx
new file mode 100644
index 0000000..69bfa4f
--- /dev/null
+++ b/client/src/components/icons/ChevronLeftIcon.tsx
@@ -0,0 +1,15 @@
+function ChevronLeftIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m11.25 5-5 5 5 5"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ChevronLeftIcon;
diff --git a/client/src/components/icons/ChevronRightIcon.tsx b/client/src/components/icons/ChevronRightIcon.tsx
new file mode 100644
index 0000000..5509b35
--- /dev/null
+++ b/client/src/components/icons/ChevronRightIcon.tsx
@@ -0,0 +1,15 @@
+function ChevronRightIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m8.75 5 5 5-5 5"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ChevronRightIcon;
diff --git a/client/src/components/icons/ChevronUpIcon.tsx b/client/src/components/icons/ChevronUpIcon.tsx
new file mode 100644
index 0000000..b7437c8
--- /dev/null
+++ b/client/src/components/icons/ChevronUpIcon.tsx
@@ -0,0 +1,15 @@
+function ChevronUpIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m11.25 5-5 5 5 5"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ChevronUpIcon;
diff --git a/client/src/components/icons/ClientIcon.tsx b/client/src/components/icons/ClientIcon.tsx
new file mode 100644
index 0000000..c2221cc
--- /dev/null
+++ b/client/src/components/icons/ClientIcon.tsx
@@ -0,0 +1,22 @@
+function ClientIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4 15.35V17h12V2H4v2.1M2.5 12h1.667M2.5 9.5h1.667M2.5 7h1.667"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 8.75a1.667 1.667 0 1 0 0-3.333 1.667 1.667 0 0 0 0 3.333Zm3.333 5.833a3.333 3.333 0 0 0-6.666 0"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ClientIcon;
diff --git a/client/src/components/icons/ClockIcon.tsx b/client/src/components/icons/ClockIcon.tsx
new file mode 100644
index 0000000..be88000
--- /dev/null
+++ b/client/src/components/icons/ClockIcon.tsx
@@ -0,0 +1,15 @@
+function ClockIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10 5.333V10h3.5m3.5 0a7.001 7.001 0 0 1-11.95 4.95A7 7 0 1 1 17 10"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ClockIcon;
diff --git a/client/src/components/icons/CloseIcon.tsx b/client/src/components/icons/CloseIcon.tsx
new file mode 100644
index 0000000..52d93c3
--- /dev/null
+++ b/client/src/components/icons/CloseIcon.tsx
@@ -0,0 +1,15 @@
+function CloseIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m10 10 4.167-4.166M10 10 5.834 5.833M10 10l4.167 4.167M10 10l-4.166 4.167"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default CloseIcon;
diff --git a/client/src/components/icons/CogFilledIcon.tsx b/client/src/components/icons/CogFilledIcon.tsx
new file mode 100644
index 0000000..9323009
--- /dev/null
+++ b/client/src/components/icons/CogFilledIcon.tsx
@@ -0,0 +1,14 @@
+function CogFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.232 1.875c-.765 0-1.416.553-1.542 1.306l-.148.893c-.017.1-.096.217-.248.29q-.428.206-.822.475c-.138.096-.278.105-.375.07L5.25 4.59a1.56 1.56 0 0 0-1.902.683l-.768 1.33a1.56 1.56 0 0 0 .36 1.988l.7.577c.08.065.142.19.128.358a6 6 0 0 0 0 .949c.013.167-.049.293-.127.358l-.701.577a1.56 1.56 0 0 0-.36 1.988l.768 1.33a1.56 1.56 0 0 0 1.902.682l.85-.318c.095-.036.235-.026.374.068q.39.268.82.475c.153.073.232.19.248.292l.149.892a1.56 1.56 0 0 0 1.541 1.306h1.537c.763 0 1.416-.552 1.542-1.306l.148-.893c.017-.1.095-.217.248-.291q.43-.207.82-.475c.14-.095.28-.104.375-.068l.85.318a1.56 1.56 0 0 0 1.9-.683l.77-1.33a1.56 1.56 0 0 0-.36-1.988l-.7-.577c-.08-.065-.142-.19-.129-.358a6.4 6.4 0 0 0 0-.949c-.013-.167.05-.293.128-.358l.7-.577c.59-.485.742-1.325.36-1.987l-.768-1.331a1.56 1.56 0 0 0-1.901-.682l-.85.318c-.095.036-.235.026-.375-.069a6 6 0 0 0-.82-.475c-.153-.072-.231-.189-.248-.29l-.15-.893a1.56 1.56 0 0 0-1.54-1.306zM10 13.125a3.125 3.125 0 1 0 0-6.25 3.125 3.125 0 0 0 0 6.25"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default CogFilledIcon;
diff --git a/client/src/components/icons/CogIcon.tsx b/client/src/components/icons/CogIcon.tsx
new file mode 100644
index 0000000..7f1200b
--- /dev/null
+++ b/client/src/components/icons/CogIcon.tsx
@@ -0,0 +1,20 @@
+function CogIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M7.618 17.988a8.33 8.33 0 0 1-3.623-2.21 2.5 2.5 0 0 0-2.16-4.1A8.4 8.4 0 0 1 2.049 7.5h.035a2.5 2.5 0 0 0 2.244-3.604 8.3 8.3 0 0 1 3.445-1.928 2.5 2.5 0 0 0 4.456 0 8.3 8.3 0 0 1 3.445 1.928A2.5 2.5 0 0 0 17.952 7.5a8.4 8.4 0 0 1 .212 4.18 2.5 2.5 0 0 0-2.16 4.1 8.33 8.33 0 0 1-3.622 2.208 2.501 2.501 0 0 0-4.764 0Z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 12.917a2.917 2.917 0 1 0 0-5.834 2.917 2.917 0 0 0 0 5.834Z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default CogIcon;
diff --git a/client/src/components/icons/CopyIcon.tsx b/client/src/components/icons/CopyIcon.tsx
new file mode 100644
index 0000000..f2b923d
--- /dev/null
+++ b/client/src/components/icons/CopyIcon.tsx
@@ -0,0 +1,21 @@
+function CopyIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6 5.725V4.03C6 3.461 6.462 3 7.031 3h8.938C16.539 3 17 3.462 17 4.031v8.938A1.03 1.03 0 0 1 15.969 14h-1.713"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.969 6H4.03A1.03 1.03 0 0 0 3 7.031v8.938C3 16.539 3.462 17 4.031 17h8.938A1.03 1.03 0 0 0 14 15.969V7.03A1.03 1.03 0 0 0 12.969 6Z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default CopyIcon;
diff --git a/client/src/components/icons/CrownIcon.tsx b/client/src/components/icons/CrownIcon.tsx
new file mode 100644
index 0000000..e32f8ba
--- /dev/null
+++ b/client/src/components/icons/CrownIcon.tsx
@@ -0,0 +1,12 @@
+function CrownIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m13.756 9.241 3.755-1.878L15.633 16H4.367L2.49 7.363l3.755 1.878L10 3.983zM10 10.371a1.503 1.503 0 1 0 .002 3.005A1.503 1.503 0 0 0 10 10.37"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default CrownIcon;
diff --git a/client/src/components/icons/DocumentChartIcon.tsx b/client/src/components/icons/DocumentChartIcon.tsx
new file mode 100644
index 0000000..570df34
--- /dev/null
+++ b/client/src/components/icons/DocumentChartIcon.tsx
@@ -0,0 +1,15 @@
+function DocumentChartIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M16.25 11.875V9.688a2.81 2.81 0 0 0-2.812-2.813h-1.25a.937.937 0 0 1-.938-.937v-1.25a2.81 2.81 0 0 0-2.812-2.813H6.875M7.5 13.75v.625m2.5-2.5v2.5M12.5 10v4.375m-3.75-12.5H4.688a.94.94 0 0 0-.938.938v14.375c0 .517.42.937.938.937h10.625c.517 0 .937-.42.937-.937V9.375a7.5 7.5 0 0 0-7.5-7.5"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default DocumentChartIcon;
diff --git a/client/src/components/icons/DownloadIcon.tsx b/client/src/components/icons/DownloadIcon.tsx
new file mode 100644
index 0000000..bc36ed3
--- /dev/null
+++ b/client/src/components/icons/DownloadIcon.tsx
@@ -0,0 +1,15 @@
+function DownloadIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.5 17.5h15M13.75 10 10 13.75 6.25 10m3.747-7.5v10.833"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default DownloadIcon;
diff --git a/client/src/components/icons/EditIcon.tsx b/client/src/components/icons/EditIcon.tsx
new file mode 100644
index 0000000..590e215
--- /dev/null
+++ b/client/src/components/icons/EditIcon.tsx
@@ -0,0 +1,15 @@
+function EditIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m14.052 3.74 1.406-1.408a1.563 1.563 0 0 1 2.21 2.21l-8.85 8.85a3.75 3.75 0 0 1-1.58.941L5 15l.667-2.238a3.75 3.75 0 0 1 .941-1.58zm0 0 2.198 2.197M15 11.667v3.958a1.875 1.875 0 0 1-1.875 1.875h-8.75A1.875 1.875 0 0 1 2.5 15.625v-8.75A1.875 1.875 0 0 1 4.375 5h3.958"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default EditIcon;
diff --git a/client/src/components/icons/ExitFilledIcon.tsx b/client/src/components/icons/ExitFilledIcon.tsx
new file mode 100644
index 0000000..da6ad5f
--- /dev/null
+++ b/client/src/components/icons/ExitFilledIcon.tsx
@@ -0,0 +1,12 @@
+function ExitFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M7.5 9.375a.626.626 0 0 0-.442 1.067.63.63 0 0 0 .442.183h5.501v-1.25zm6.934-1.434a.626.626 0 0 1 .883-.882l2.5 2.5a.625.625 0 0 1 0 .882l-2.5 2.5a.627.627 0 0 1-.868-.014.627.627 0 0 1-.015-.868l1.433-1.434H13.25v4.22a2.1 2.1 0 0 1-.66 1.524A2.3 2.3 0 0 1 11 17H6.5a2.3 2.3 0 0 1-1.59-.63 2.1 2.1 0 0 1-.66-1.524V5.154c0-.57.237-1.12.66-1.523C5.33 3.227 5.902 3 6.5 3H11a2.3 2.3 0 0 1 1.59.63c.423.405.66.953.66 1.524v4.221h2.617z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default ExitFilledIcon;
diff --git a/client/src/components/icons/FullscreenIcon.tsx b/client/src/components/icons/FullscreenIcon.tsx
new file mode 100644
index 0000000..2a20307
--- /dev/null
+++ b/client/src/components/icons/FullscreenIcon.tsx
@@ -0,0 +1,15 @@
+function FullscreenIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m2 18 5-5m-5 5v-5m0 5h5M18 2l-5 5m5-5v5m0-5h-5"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default FullscreenIcon;
diff --git a/client/src/components/icons/HandRaisedFilledIcon.tsx b/client/src/components/icons/HandRaisedFilledIcon.tsx
new file mode 100644
index 0000000..a2df6af
--- /dev/null
+++ b/client/src/components/icons/HandRaisedFilledIcon.tsx
@@ -0,0 +1,12 @@
+function HandRaisedFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10.605 2.8a.8.8 0 0 0-.23-.566.774.774 0 0 0-1.106 0 .8.8 0 0 0-.23.566v5.845q-.54.173-1.043.468V3.867a.8.8 0 0 0-.23-.566.774.774 0 0 0-1.106 0 .8.8 0 0 0-.23.566v7.777a3.1 3.1 0 0 1 1.326.571c.392.293.713.675.936 1.117a6.1 6.1 0 0 0-2.783-.665.52.52 0 0 1-.369-.156.54.54 0 0 1-.153-.378v-1.611A2.42 2.42 0 0 0 4.7 8.837a.773.773 0 0 0-1.093.013.81.81 0 0 0-.014 1.117.8.8 0 0 1 .23.562v2.138h.003a4.3 4.3 0 0 0 1.218 2.85l1.208 1.234A4.13 4.13 0 0 0 9.203 18h1.402a5.16 5.16 0 0 0 3.69-1.562 5.4 5.4 0 0 0 1.527-3.771V6a.8.8 0 0 0-.229-.566.774.774 0 0 0-1.107 0 .8.8 0 0 0-.229.566v3.925a5.2 5.2 0 0 0-1.043-.812V3.867a.8.8 0 0 0-.23-.566.774.774 0 0 0-1.107 0 .8.8 0 0 0-.229.566v4.64a5 5 0 0 0-1.043-.107z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default HandRaisedFilledIcon;
diff --git a/client/src/components/icons/HandRaisedIcon.tsx b/client/src/components/icons/HandRaisedIcon.tsx
new file mode 100644
index 0000000..66e3cbb
--- /dev/null
+++ b/client/src/components/icons/HandRaisedIcon.tsx
@@ -0,0 +1,15 @@
+function HandRaisedIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M11.357 4.343a1.24 1.24 0 0 1 .337-.849q.162-.168.374-.26a1.11 1.11 0 0 1 1.255.26q.162.17.25.39c.057.145.087.301.087.459v2.286m-2.303-2.286V3.2c0-.318-.121-.623-.337-.849A1.13 1.13 0 0 0 10.206 2c-.306 0-.599.126-.815.351-.216.226-.337.53-.337.849v1.143m2.303 0-.055 4.514M13.66 6.63c0-.319.122-.624.338-.849s.508-.351.814-.351.598.126.814.351.337.53.337.849v6.228c0 1.364-.52 2.672-1.445 3.637A4.84 4.84 0 0 1 11.028 18H9.553a3.76 3.76 0 0 1-2.714-1.172l-1.267-1.32a4.1 4.1 0 0 1-1.124-2.828l-.002-1.542a.52.52 0 0 0-.145-.359 1.244 1.244 0 0 1 0-1.698q.163-.167.373-.26a1.11 1.11 0 0 1 1.256.26 2.98 2.98 0 0 1 .819 2.048m6.911-4.5V10M9.054 4.343v5.086m0-5.086c0-.318-.121-.624-.337-.849a1.13 1.13 0 0 0-.815-.351c-.305 0-.598.126-.814.351s-.337.53-.337.849v7.943m0 0c.432 0 .86.088 1.258.26.4.173.762.425 1.067.744M6.75 12.286h-.002"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default HandRaisedIcon;
diff --git a/client/src/components/icons/HandRaisedOffFilledIcon.tsx b/client/src/components/icons/HandRaisedOffFilledIcon.tsx
new file mode 100644
index 0000000..e853aa0
--- /dev/null
+++ b/client/src/components/icons/HandRaisedOffFilledIcon.tsx
@@ -0,0 +1,16 @@
+function HandRaisedOffFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M17.873 16.867a.613.613 0 0 1 .018.866.613.613 0 0 1-.866-.018L2.6 3.29a.61.61 0 0 1-.017-.865.61.61 0 0 1 .865.017zM4.15 8.616a.78.78 0 0 1 .55.22c.438.448.684 1.053.687 1.685v1.613a.54.54 0 0 0 .153.377c.098.1.23.156.37.156a6.1 6.1 0 0 1 2.781.665 3.2 3.2 0 0 0-.935-1.116 3.1 3.1 0 0 0-1.325-.571v-1.502a.5.5 0 0 1 .853-.354l6.826 6.826A5.15 5.15 0 0 1 10.605 18H9.203a4.13 4.13 0 0 1-2.951-1.249l-1.208-1.235a4.3 4.3 0 0 1-1.219-2.849h-.003v-2.138a.8.8 0 0 0-.23-.561.81.81 0 0 1 .015-1.117.77.77 0 0 1 .543-.235"
+        fill="currentColor"
+      />
+      <path
+        d="M9.822 2c.208 0 .406.085.553.234a.8.8 0 0 1 .23.566v5.6q.527 0 1.043.108V3.866a.8.8 0 0 1 .229-.565.775.775 0 0 1 1.107 0c.147.15.229.353.229.565v5.247c.372.22.724.49 1.044.812V6c0-.212.083-.415.23-.565a.773.773 0 0 1 1.106 0 .8.8 0 0 1 .23.565v6.667a5.4 5.4 0 0 1-.828 2.878L8.366 8.916q.33-.161.673-.271V2.8a.8.8 0 0 1 .23-.566A.78.78 0 0 1 9.822 2M7.213 3.066c.207 0 .407.085.554.235a.8.8 0 0 1 .23.565v4.68L6.43 6.98V3.866a.8.8 0 0 1 .23-.565.77.77 0 0 1 .552-.235"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default HandRaisedOffFilledIcon;
diff --git a/client/src/components/icons/HandRaisedOffIcon.tsx b/client/src/components/icons/HandRaisedOffIcon.tsx
new file mode 100644
index 0000000..64e247e
--- /dev/null
+++ b/client/src/components/icons/HandRaisedOffIcon.tsx
@@ -0,0 +1,12 @@
+function HandRaisedOffFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5.116 8.13a1.7 1.7 0 0 1 1.03.347l.326.326a3 3 0 0 1 .88 2.122v.808q.462.075.896.262c.473.205.902.505 1.262.88a.601.601 0 0 1-.866.83 2.7 2.7 0 0 0-.872-.607 2.6 2.6 0 0 0-1.02-.212H6.75a.6.6 0 0 1-.6-.6l.001-.021v-1.116l-.002-.018a2.37 2.37 0 0 0-.65-1.633h-.002a.55.55 0 0 0-.38-.168.55.55 0 0 0-.382.167.64.64 0 0 0-.125.67q.044.113.122.195c.202.209.312.487.314.773v.003l.002 1.542c0 .909.348 1.777.958 2.413l1.266 1.32c.61.635 1.43.987 2.28.987h1.476c.873 0 1.721-.277 2.437-.787.264-.188.632-.185.861.044.24.24.236.632-.033.836a5.4 5.4 0 0 1-3.265 1.107H9.553a4.36 4.36 0 0 1-3.147-1.357l-1.266-1.32a4.7 4.7 0 0 1-1.291-3.241l-.002-1.513a1.8 1.8 0 0 1-.483-1.238 1.84 1.84 0 0 1 .504-1.265 1.75 1.75 0 0 1 1.248-.536m5.09-6.73c.472 0 .92.196 1.247.536.199.207.343.458.425.729a1.71 1.71 0 0 1 1.879.414 1.8 1.8 0 0 1 .504 1.263v.579a1.71 1.71 0 0 1 1.799.443c.325.34.504.795.504 1.265v6.228c0 .79-.161 1.564-.459 2.278l1.885 1.884a.6.6 0 1 1-.849.849L3.284 4.007a.599.599 0 1 1 .848-.848l2.02 2.02v-.837c0-.47.179-.925.504-1.264a1.71 1.71 0 0 1 1.88-.413 1.8 1.8 0 0 1 .424-.73 1.73 1.73 0 0 1 1.247-.536m0 1.2a.53.53 0 0 0-.382.167.63.63 0 0 0-.17.433v5.483l5.514 5.513c.127-.43.196-.88.196-1.339V6.63a.63.63 0 0 0-.17-.434.53.53 0 0 0-.382-.167.53.53 0 0 0-.381.167.6.6 0 0 0-.158.31l-.012.124V10a.6.6 0 0 1-1.2 0V4.343a.6.6 0 0 0-.045-.238.6.6 0 0 0-.125-.195.515.515 0 0 0-.763 0 .6.6 0 0 0-.17.433v.008l-.056 4.513a.6.6 0 0 1-1.199-.014l.055-4.514V3.2a.63.63 0 0 0-.17-.433.53.53 0 0 0-.382-.167M7.903 3.743a.53.53 0 0 0-.382.167.63.63 0 0 0-.17.433V6.38l1.103 1.102v-3.14l-.012-.121a.6.6 0 0 0-.158-.31.53.53 0 0 0-.38-.168"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default HandRaisedOffFilledIcon;
diff --git a/client/src/components/icons/HearthFilledIcon.tsx b/client/src/components/icons/HearthFilledIcon.tsx
new file mode 100644
index 0000000..705698f
--- /dev/null
+++ b/client/src/components/icons/HearthFilledIcon.tsx
@@ -0,0 +1,12 @@
+function HearthFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M15.6832 5.96499C14.3718 4.67834 12.2455 4.67834 10.9341 5.96499L10.0002 6.88122L9.06627 5.96499C7.75482 4.67834 5.62854 4.67834 4.31708 5.96499C3.00563 7.25165 3.00563 9.33772 4.31709 10.6244L10.0002 16.6667L15.6832 10.6244C16.9947 9.33772 16.9947 7.25165 15.6832 5.96499Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default HearthFilledIcon;
diff --git a/client/src/components/icons/HomeFilledIcon.tsx b/client/src/components/icons/HomeFilledIcon.tsx
new file mode 100644
index 0000000..c803a04
--- /dev/null
+++ b/client/src/components/icons/HomeFilledIcon.tsx
@@ -0,0 +1,12 @@
+function HomeFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.1 17v-3.56c0-.565-.221-1.109-.615-1.51A2.08 2.08 0 0 0 10 11.307c-.557 0-1.091.225-1.485.625s-.615.944-.615 1.51V17H4.4a1.4 1.4 0 0 1-.99-.417A1.44 1.44 0 0 1 3 15.576V7.84c0-.245.063-.487.182-.701s.29-.393.498-.52l5.6-3.416a1.38 1.38 0 0 1 1.44 0l5.6 3.417A1.43 1.43 0 0 1 17 7.84v7.736c0 .378-.148.74-.41 1.007a1.4 1.4 0 0 1-.99.417z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default HomeFilledIcon;
diff --git a/client/src/components/icons/HomeIcon.tsx b/client/src/components/icons/HomeIcon.tsx
new file mode 100644
index 0000000..de4400b
--- /dev/null
+++ b/client/src/components/icons/HomeIcon.tsx
@@ -0,0 +1,14 @@
+function HomeIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M16.667 8.184v6.65a1 1 0 0 1-1 1H13a1 1 0 0 1-1-1v-2a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1H4.334a1 1 0 0 1-1-1v-6.65a1 1 0 0 1 .385-.788l5.666-4.417a1 1 0 0 1 1.23 0l5.667 4.417a1 1 0 0 1 .385.788Z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="square"
+      />
+    </svg>
+  );
+}
+
+export default HomeIcon;
diff --git a/client/src/components/icons/LightningIcon.tsx b/client/src/components/icons/LightningIcon.tsx
new file mode 100644
index 0000000..bbd610a
--- /dev/null
+++ b/client/src/components/icons/LightningIcon.tsx
@@ -0,0 +1,12 @@
+function LightningIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8.71 3h4.91l-3 4.9h4.09L8.166 17l1.364-6.65H5.711z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default LightningIcon;
diff --git a/client/src/components/icons/LinkIcon.tsx b/client/src/components/icons/LinkIcon.tsx
new file mode 100644
index 0000000..98f109e
--- /dev/null
+++ b/client/src/components/icons/LinkIcon.tsx
@@ -0,0 +1,15 @@
+function LinkIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10.854 7.622a3.23 3.23 0 0 1 .892 5.201l-3.23 3.23a3.23 3.23 0 1 1-4.57-4.568l1.262-1.262m9.584-.446 1.262-1.262a3.23 3.23 0 1 0-4.57-4.569l-3.23 3.231a3.23 3.23 0 0 0 .892 5.2"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default LinkIcon;
diff --git a/client/src/components/icons/LoaderIcon.tsx b/client/src/components/icons/LoaderIcon.tsx
new file mode 100644
index 0000000..beb5561
--- /dev/null
+++ b/client/src/components/icons/LoaderIcon.tsx
@@ -0,0 +1,35 @@
+function LoaderIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g
+        clipPath="url(#paint0_angular_5431_46786_clip_path)"
+        data-figma-skip-parse="true"
+      >
+        <g transform="matrix(0.00466667 0.00466667 -0.00466667 0.00466667 10 10.0002)">
+          <foreignObject x={-1750} y={-1750} width={3500} height={3500}>
+            <div
+              style={{
+                background:
+                  "conic-gradient(from 90deg,rgba(123, 96, 243, 0.0195) 0deg,rgba(123, 96, 243, 1) 314.826deg,rgba(123, 96, 243, 0) 353.741deg,rgba(123, 96, 243, 0.0195) 360deg)",
+                height: "100%",
+                width: "100%",
+                opacity: 1,
+              }}
+            />
+          </foreignObject>
+        </g>
+      </g>
+      <path
+        d="M15.8333 10.0002C16.2935 10.0002 16.672 9.62558 16.6147 9.1689C16.4542 7.89178 15.9263 6.68189 15.0866 5.69075C14.0664 4.48659 12.6521 3.68341 11.0954 3.4241C9.5386 3.16479 7.94032 3.46618 6.58491 4.27464C5.2295 5.0831 4.20485 6.3462 3.69328 7.83921C3.18172 9.33221 3.2164 10.9583 3.79118 12.4281C4.36595 13.8979 5.44353 15.1162 6.83219 15.8661C8.22085 16.616 9.83053 16.849 11.3748 16.5235C12.6459 16.2556 13.8049 15.6237 14.7149 14.7134C15.0403 14.3879 14.971 13.8599 14.6075 13.5776C14.2439 13.2953 13.7244 13.3676 13.3857 13.6793C12.7279 14.2846 11.9157 14.7061 11.0311 14.8926C9.8729 15.1367 8.66567 14.9619 7.6242 14.3995C6.58274 13.8371 5.77457 12.9234 5.3435 11.8211C4.91243 10.7187 4.88642 9.49921 5.27008 8.37949C5.65375 7.25976 6.42221 6.31246 7.43875 5.70613C8.45528 5.0998 9.65396 4.87376 10.8215 5.06824C11.989 5.26271 13.0497 5.86509 13.8149 6.76819C14.3993 7.45798 14.7823 8.28905 14.9306 9.17059C15.007 9.62448 15.373 10.0002 15.8333 10.0002Z"
+        data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.48235294222831726,&#34;g&#34;:0.37647059559822083,&#34;b&#34;:0.95294117927551270,&#34;a&#34;:1.0},&#34;position&#34;:0.87451690435409546},{&#34;color&#34;:{&#34;r&#34;:0.48235294222831726,&#34;g&#34;:0.37647059559822083,&#34;b&#34;:0.95294117927551270,&#34;a&#34;:0.0},&#34;position&#34;:0.98261332511901855}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.48235294222831726,&#34;g&#34;:0.37647059559822083,&#34;b&#34;:0.95294117927551270,&#34;a&#34;:1.0},&#34;position&#34;:0.87451690435409546},{&#34;color&#34;:{&#34;r&#34;:0.48235294222831726,&#34;g&#34;:0.37647059559822083,&#34;b&#34;:0.95294117927551270,&#34;a&#34;:0.0},&#34;position&#34;:0.98261332511901855}],&#34;transform&#34;:{&#34;m00&#34;:9.3333330154418945,&#34;m01&#34;:-9.3333330154418945,&#34;m02&#34;:10.000001907348633,&#34;m10&#34;:9.3333330154418945,&#34;m11&#34;:9.3333330154418945,&#34;m12&#34;:0.66682958602905273},&#34;opacity&#34;:1.0,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"
+      />
+      <defs>
+        <clipPath id="paint0_angular_5431_46786_clip_path">
+          <path d="M15.8333 10.0002C16.2935 10.0002 16.672 9.62558 16.6147 9.1689C16.4542 7.89178 15.9263 6.68189 15.0866 5.69075C14.0664 4.48659 12.6521 3.68341 11.0954 3.4241C9.5386 3.16479 7.94032 3.46618 6.58491 4.27464C5.2295 5.0831 4.20485 6.3462 3.69328 7.83921C3.18172 9.33221 3.2164 10.9583 3.79118 12.4281C4.36595 13.8979 5.44353 15.1162 6.83219 15.8661C8.22085 16.616 9.83053 16.849 11.3748 16.5235C12.6459 16.2556 13.8049 15.6237 14.7149 14.7134C15.0403 14.3879 14.971 13.8599 14.6075 13.5776C14.2439 13.2953 13.7244 13.3676 13.3857 13.6793C12.7279 14.2846 11.9157 14.7061 11.0311 14.8926C9.8729 15.1367 8.66567 14.9619 7.6242 14.3995C6.58274 13.8371 5.77457 12.9234 5.3435 11.8211C4.91243 10.7187 4.88642 9.49921 5.27008 8.37949C5.65375 7.25976 6.42221 6.31246 7.43875 5.70613C8.45528 5.0998 9.65396 4.87376 10.8215 5.06824C11.989 5.26271 13.0497 5.86509 13.8149 6.76819C14.3993 7.45798 14.7823 8.28905 14.9306 9.17059C15.007 9.62448 15.373 10.0002 15.8333 10.0002Z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default LoaderIcon;
diff --git a/client/src/components/icons/MagicIcon.tsx b/client/src/components/icons/MagicIcon.tsx
new file mode 100644
index 0000000..4203355
--- /dev/null
+++ b/client/src/components/icons/MagicIcon.tsx
@@ -0,0 +1,12 @@
+function MagicIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.434 8.242a.83.83 0 0 1-.158.508.83.83 0 0 1-.434.317l-1.425.475a3 3 0 0 0-1.166.716 2.9 2.9 0 0 0-.717 1.167l-.5 1.417a.83.83 0 0 1-.3.425.9.9 0 0 1-.517.158.834.834 0 0 1-.833-.592l-.475-1.425a2.9 2.9 0 0 0-.717-1.166 3.2 3.2 0 0 0-1.166-.725L2.6 9.05a.9.9 0 0 1-.425-.308A.9.9 0 0 1 2 8.225a.83.83 0 0 1 .591-.833l1.434-.475a2.95 2.95 0 0 0 1.9-1.9L6.4 3.608A.83.83 0 0 1 7.192 3c.18 0 .355.05.509.142a.9.9 0 0 1 .333.425l.483 1.45a2.95 2.95 0 0 0 1.9 1.9l1.417.5a.83.83 0 0 1 .425.316.83.83 0 0 1 .175.509M16 14.51a.53.53 0 0 1-.09.29.53.53 0 0 1-.248.184l-.664.221a1.3 1.3 0 0 0-.496.306c-.138.14-.243.309-.306.494l-.227.653a.47.47 0 0 1-.185.247.53.53 0 0 1-.295.095.53.53 0 0 1-.301-.1.53.53 0 0 1-.18-.247l-.216-.658a1.3 1.3 0 0 0-.306-.49 1.16 1.16 0 0 0-.49-.305l-.66-.221a.5.5 0 0 1-.253-.184.525.525 0 0 1 .253-.774l.66-.216a1.32 1.32 0 0 0 .807-.805l.216-.647a.53.53 0 0 1 .169-.248.53.53 0 0 1 .29-.105.53.53 0 0 1 .3.084c.089.06.157.144.196.242l.222.674a1.31 1.31 0 0 0 .807.805l.66.227a.5.5 0 0 1 .242.184.5.5 0 0 1 .095.295M14.907 3.784A.55.55 0 0 0 15 3.505c0-.1-.033-.197-.093-.278a.55.55 0 0 0-.223-.163l-.344-.115a.6.6 0 0 1-.175-.109.5.5 0 0 1-.109-.18l-.114-.35a.55.55 0 0 0-.175-.223.5.5 0 0 0-.289-.087.55.55 0 0 0-.267.104.55.55 0 0 0-.153.218l-.114.338a.5.5 0 0 1-.11.18.5.5 0 0 1-.18.11l-.332.108a.5.5 0 0 0-.23.164A.5.5 0 0 0 12 3.5c0 .1.03.196.087.278.06.076.14.134.23.17l.338.108a.4.4 0 0 1 .174.11q.079.072.11.174l.114.338c.032.096.093.18.174.24a.6.6 0 0 0 .268.082.45.45 0 0 0 .283-.098.5.5 0 0 0 .158-.213l.12-.344a.46.46 0 0 1 .284-.283l.338-.115a.45.45 0 0 0 .23-.163"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default MagicIcon;
diff --git a/client/src/components/icons/MailIcon.tsx b/client/src/components/icons/MailIcon.tsx
new file mode 100644
index 0000000..c3def53
--- /dev/null
+++ b/client/src/components/icons/MailIcon.tsx
@@ -0,0 +1,15 @@
+function MailIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M18.125 5.625v8.75a1.875 1.875 0 0 1-1.875 1.875H3.75a1.875 1.875 0 0 1-1.875-1.875v-8.75m16.25 0A1.875 1.875 0 0 0 16.25 3.75H3.75a1.875 1.875 0 0 0-1.875 1.875m16.25 0v.202a1.88 1.88 0 0 1-.892 1.597l-6.25 3.846a1.88 1.88 0 0 1-1.966 0l-6.25-3.845a1.88 1.88 0 0 1-.892-1.597v-.203"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default MailIcon;
diff --git a/client/src/components/icons/ManagersIcon.tsx b/client/src/components/icons/ManagersIcon.tsx
new file mode 100644
index 0000000..d5a642c
--- /dev/null
+++ b/client/src/components/icons/ManagersIcon.tsx
@@ -0,0 +1,36 @@
+function ManagersIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8.264 8.611a2.43 2.43 0 1 0 0-4.861 2.43 2.43 0 0 0 0 4.861Z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.988 4.097a2.43 2.43 0 0 1 0 4.167"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.06 15.834v.416h10.416v-.416c0-1.556 0-2.334-.302-2.928a2.78 2.78 0 0 0-1.214-1.214c-.594-.303-1.372-.303-2.928-.303H7.504c-1.555 0-2.333 0-2.927.303a2.78 2.78 0 0 0-1.214 1.214c-.303.594-.303 1.372-.303 2.928Z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.946 16.25v-.417c0-1.555 0-2.333-.302-2.927a2.78 2.78 0 0 0-1.214-1.214"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ManagersIcon;
diff --git a/client/src/components/icons/MicrophoneFilledIcon.tsx b/client/src/components/icons/MicrophoneFilledIcon.tsx
new file mode 100644
index 0000000..8b045ba
--- /dev/null
+++ b/client/src/components/icons/MicrophoneFilledIcon.tsx
@@ -0,0 +1,16 @@
+function MicrophoneFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M7.333 4.667a2.667 2.667 0 1 1 5.333 0v5.866a2.666 2.666 0 1 1-5.333 0z"
+        fill="currentColor"
+      />
+      <path
+        d="M5.734 8.933a.533.533 0 0 1 .533.534v1.066a3.733 3.733 0 1 0 7.466 0V9.467a.533.533 0 0 1 1.067 0v1.066a4.8 4.8 0 0 1-4.267 4.771v1.63h2.134a.533.533 0 0 1 0 1.066H7.334a.533.533 0 0 1 0-1.067h2.133v-1.629a4.8 4.8 0 0 1-4.267-4.77V9.466a.533.533 0 0 1 .534-.534"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default MicrophoneFilledIcon;
diff --git a/client/src/components/icons/MicrophoneIcon.tsx b/client/src/components/icons/MicrophoneIcon.tsx
new file mode 100644
index 0000000..6a08aa1
--- /dev/null
+++ b/client/src/components/icons/MicrophoneIcon.tsx
@@ -0,0 +1,15 @@
+function MicrophoneIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10 15.143c1.326 0 2.598-.482 3.536-1.34.937-.856 1.464-2.02 1.464-3.232V9.43m-5 5.714c-1.326 0-2.598-.482-3.536-1.34C5.527 12.948 5 11.784 5 10.572V9.43m5 5.714V18m-3.125 0h6.25M10 12.857c-.663 0-1.299-.24-1.768-.67a2.2 2.2 0 0 1-.732-1.616V4.286c0-.606.263-1.188.732-1.617A2.62 2.62 0 0 1 10 2c.663 0 1.299.24 1.768.67.469.428.732 1.01.732 1.616v6.285c0 .607-.263 1.188-.732 1.617a2.62 2.62 0 0 1-1.768.67"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default MicrophoneIcon;
diff --git a/client/src/components/icons/MicrophoneOffFilledIcon.tsx b/client/src/components/icons/MicrophoneOffFilledIcon.tsx
new file mode 100644
index 0000000..9b940db
--- /dev/null
+++ b/client/src/components/icons/MicrophoneOffFilledIcon.tsx
@@ -0,0 +1,20 @@
+function MicrophoneOffFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M15.99 14.435a.6.6 0 1 1-.848.848L4.283 4.423a.6.6 0 1 1 .848-.847z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.34 11.895c.483.483.344 1.305-.34 1.305a2.667 2.667 0 0 1-2.667-2.667.682.682 0 0 1 1.164-.482zM10 2a2.67 2.67 0 0 1 2.666 2.667v5.866c0 .84-1.023.97-1.617.376l-3.13-3.13a2 2 0 0 1-.586-1.415V4.667A2.667 2.667 0 0 1 10 2"
+        fill="currentColor"
+      />
+      <path
+        d="M5.734 8.934a.533.533 0 0 1 .533.533v1.067a3.734 3.734 0 0 0 7.466 0V9.467a.533.533 0 0 1 1.067 0v1.067a4.8 4.8 0 0 1-4.267 4.77v1.63h2.134a.533.533 0 0 1 0 1.066H7.334a.533.533 0 0 1 0-1.066h2.133v-1.63a4.8 4.8 0 0 1-4.267-4.77V9.467a.533.533 0 0 1 .534-.533"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default MicrophoneOffFilledIcon;
diff --git a/client/src/components/icons/MicrophoneOffIcon.tsx b/client/src/components/icons/MicrophoneOffIcon.tsx
new file mode 100644
index 0000000..e9aeed0
--- /dev/null
+++ b/client/src/components/icons/MicrophoneOffIcon.tsx
@@ -0,0 +1,19 @@
+function MicrophoneOffIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M15.566 14.86 4.707 4M10 15.143c1.326 0 2.598-.482 3.536-1.34.937-.856 1.464-2.02 1.464-3.232V9.43m-5 5.714c-1.326 0-2.598-.482-3.536-1.34C5.527 12.948 5 11.784 5 10.572V9.43m5 5.714V18m-3.125 0h6.25"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.924 9.479a.6.6 0 0 1 .176.424v.668c0 .43.186.853.537 1.174a2.03 2.03 0 0 0 1.586.5c.242-.027.495.028.667.2.316.315.23.847-.207.94a3.3 3.3 0 0 1-.683.072 3.22 3.22 0 0 1-2.173-.826 2.8 2.8 0 0 1-.927-2.06v-.668a.6.6 0 0 1 1.024-.424m2.377-8.065c.697.063 1.36.345 1.872.813.586.536.927 1.276.927 2.06v6.284c0 .412-.096.81-.271 1.174-.16.33-.593.35-.852.091-.213-.213-.227-.547-.14-.836q.063-.21.063-.429V4.286c0-.429-.186-.853-.537-1.174a2 2 0 0 0-1.17-.504L10 2.6c-.52 0-1.01.19-1.363.512A1.6 1.6 0 0 0 8.1 4.286v2.225a.6.6 0 0 1-1.2 0V4.286c0-.783.34-1.523.927-2.06A3.22 3.22 0 0 1 10 1.4z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default MicrophoneOffIcon;
diff --git a/client/src/components/icons/MoreIcon.tsx b/client/src/components/icons/MoreIcon.tsx
new file mode 100644
index 0000000..6a0b702
--- /dev/null
+++ b/client/src/components/icons/MoreIcon.tsx
@@ -0,0 +1,15 @@
+function MoreIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10.008 10.005v-.007h-.006v.007zm-6 0v-.007h-.006v.007zm12 0v-.007h-.006v.007z"
+        stroke="currentColor"
+        strokeWidth={3}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default MoreIcon;
diff --git a/client/src/components/icons/PhotoFilledIcon.tsx b/client/src/components/icons/PhotoFilledIcon.tsx
new file mode 100644
index 0000000..0a45002
--- /dev/null
+++ b/client/src/components/icons/PhotoFilledIcon.tsx
@@ -0,0 +1,12 @@
+function PhotoFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m12.246 3.265 1.349 2.824h2.352c.603 0 1.327.488 1.327 1.09v8.73A1.09 1.09 0 0 1 16.184 17H3.817a1.09 1.09 0 0 1-1.09-1.09V7.18c0-.603.252-1.091.855-1.091h2.824l1.54-2.824zm-2.245 5.713a2.567 2.567 0 1 0 0 5.134 2.567 2.567 0 0 0 0-5.134"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default PhotoFilledIcon;
diff --git a/client/src/components/icons/PinIcon.tsx b/client/src/components/icons/PinIcon.tsx
new file mode 100644
index 0000000..594613f
--- /dev/null
+++ b/client/src/components/icons/PinIcon.tsx
@@ -0,0 +1,14 @@
+function PinIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.125 1.875H17.5a.625.625 0 0 1 .625.625v4.375a.625.625 0 1 1-1.25 0V4.008L6.692 14.192a.625.625 0 0 1-.884-.884L15.992 3.125h-2.867a.625.625 0 1 1 0-1.25m-8.75 3.75a1.25 1.25 0 0 0-1.25 1.25v8.75a1.25 1.25 0 0 0 1.25 1.25h8.75a1.25 1.25 0 0 0 1.25-1.25V8.75a.625.625 0 1 1 1.25 0v6.875a2.5 2.5 0 0 1-2.5 2.5h-8.75a2.5 2.5 0 0 1-2.5-2.5v-8.75a2.5 2.5 0 0 1 2.5-2.5h6.875a.625.625 0 1 1 0 1.25z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default PinIcon;
diff --git a/client/src/components/icons/PlusIcon.tsx b/client/src/components/icons/PlusIcon.tsx
new file mode 100644
index 0000000..3aa50f2
--- /dev/null
+++ b/client/src/components/icons/PlusIcon.tsx
@@ -0,0 +1,15 @@
+function PlusIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m10.025 4.167-.015 11.666M4.167 10h11.666"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default PlusIcon;
diff --git a/client/src/components/icons/QRIcon.tsx b/client/src/components/icons/QRIcon.tsx
new file mode 100644
index 0000000..3520db1
--- /dev/null
+++ b/client/src/components/icons/QRIcon.tsx
@@ -0,0 +1,14 @@
+function QRIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.5 4.063c0-.864.7-1.563 1.563-1.563h3.75c.863 0 1.562.7 1.562 1.563v3.75c0 .863-.7 1.562-1.562 1.562h-3.75A1.56 1.56 0 0 1 2.5 7.813zm1.563-.313a.31.31 0 0 0-.313.313v3.75c0 .172.14.312.313.312h3.75a.31.31 0 0 0 .312-.312v-3.75a.31.31 0 0 0-.312-.313zm6.562.313c0-.864.7-1.563 1.563-1.563h3.75c.862 0 1.562.7 1.562 1.563v3.75c0 .863-.7 1.562-1.562 1.562h-3.75a1.563 1.563 0 0 1-1.563-1.562zm1.563-.313a.313.313 0 0 0-.313.313v3.75c0 .172.14.312.313.312h3.75a.313.313 0 0 0 .312-.312v-3.75a.31.31 0 0 0-.312-.313zM5 5.625A.625.625 0 0 1 5.625 5h.625a.625.625 0 0 1 .625.625v.625a.625.625 0 0 1-.625.625h-.625A.625.625 0 0 1 5 6.25zm8.125 0A.625.625 0 0 1 13.75 5h.625a.625.625 0 0 1 .625.625v.625a.625.625 0 0 1-.625.625h-.625a.625.625 0 0 1-.625-.625zM2.5 12.188c0-.864.7-1.563 1.563-1.563h3.75c.863 0 1.562.7 1.562 1.563v3.75c0 .862-.7 1.562-1.562 1.562h-3.75A1.563 1.563 0 0 1 2.5 15.938zm1.563-.313a.31.31 0 0 0-.313.313v3.75c0 .172.14.312.313.312h3.75a.31.31 0 0 0 .312-.312v-3.75a.313.313 0 0 0-.312-.313zm6.562-.625a.624.624 0 0 1 .625-.625h.625a.624.624 0 0 1 .625.625v.625a.624.624 0 0 1-.625.625h-.625a.624.624 0 0 1-.625-.625zm5 0a.624.624 0 0 1 .625-.625h.625a.624.624 0 0 1 .625.625v.625a.624.624 0 0 1-.625.625h-.625a.624.624 0 0 1-.625-.625zM5 13.75a.625.625 0 0 1 .625-.625h.625a.625.625 0 0 1 .625.625v.625A.625.625 0 0 1 6.25 15h-.625A.625.625 0 0 1 5 14.375zm8.125 0a.624.624 0 0 1 .625-.625h.625a.624.624 0 0 1 .625.625v.625a.624.624 0 0 1-.625.625h-.625a.624.624 0 0 1-.625-.625zm-2.5 2.5a.624.624 0 0 1 .625-.625h.625a.624.624 0 0 1 .625.625v.625a.624.624 0 0 1-.625.625h-.625a.624.624 0 0 1-.625-.625zm5 0a.624.624 0 0 1 .625-.625h.625a.624.624 0 0 1 .625.625v.625a.624.624 0 0 1-.625.625h-.625a.624.624 0 0 1-.625-.625z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default QRIcon;
diff --git a/client/src/components/icons/QuestionMarkIcon.tsx b/client/src/components/icons/QuestionMarkIcon.tsx
new file mode 100644
index 0000000..001fa0d
--- /dev/null
+++ b/client/src/components/icons/QuestionMarkIcon.tsx
@@ -0,0 +1,15 @@
+function QuestionMarkIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8.35 6.515c.911-.797 2.389-.797 3.3 0s.911 2.09 0 2.887c-.158.14-.335.253-.521.344-.58.28-1.128.777-1.128 1.42v.584M17 10a7.001 7.001 0 0 1-11.95 4.95A7 7 0 1 1 17 10m-7 4.083h.006v.007H10z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default QuestionMarkIcon;
diff --git a/client/src/components/icons/RestartIcon.tsx b/client/src/components/icons/RestartIcon.tsx
new file mode 100644
index 0000000..4476b3c
--- /dev/null
+++ b/client/src/components/icons/RestartIcon.tsx
@@ -0,0 +1,14 @@
+function RestartIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.963 8.383a6.25 6.25 0 0 1 10.456-2.804l1.586 1.586h-2.652a.625.625 0 1 0 0 1.25h4.16a.625.625 0 0 0 .625-.625V3.63a.625.625 0 0 0-1.25 0v2.65l-1.584-1.583A7.5 7.5 0 0 0 2.755 8.058a.625.625 0 1 0 1.208.324m12.84 2.793a.625.625 0 0 0-.766.441A6.25 6.25 0 0 1 5.58 14.422l-1.585-1.586h2.653a.625.625 0 1 0 0-1.25H2.487a.625.625 0 0 0-.625.625v4.16a.625.625 0 1 0 1.25 0v-2.65l1.583 1.583a7.5 7.5 0 0 0 12.55-3.362.625.625 0 0 0-.442-.765"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default RestartIcon;
diff --git a/client/src/components/icons/ScreenIcon.tsx b/client/src/components/icons/ScreenIcon.tsx
new file mode 100644
index 0000000..d75d04a
--- /dev/null
+++ b/client/src/components/icons/ScreenIcon.tsx
@@ -0,0 +1,22 @@
+function ScreenIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M15.95 3.208H4.05c-.58 0-1.05.493-1.05 1.1v8.8c0 .608.47 1.1 1.05 1.1h11.9c.58 0 1.05-.492 1.05-1.1v-8.8c0-.607-.47-1.1-1.05-1.1Zm-5.95 11v3"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 17.208h10"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ScreenIcon;
diff --git a/client/src/components/icons/SearchIcon.tsx b/client/src/components/icons/SearchIcon.tsx
new file mode 100644
index 0000000..a549ca4
--- /dev/null
+++ b/client/src/components/icons/SearchIcon.tsx
@@ -0,0 +1,22 @@
+function SearchIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle
+        cx={9.583}
+        cy={9.583}
+        r={4.817}
+        stroke="currentColor"
+        strokeWidth={1.2}
+      />
+      <path
+        d="m15 15.833-2.5-2.5"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default SearchIcon;
diff --git a/client/src/components/icons/SendIcon.tsx b/client/src/components/icons/SendIcon.tsx
new file mode 100644
index 0000000..a98093d
--- /dev/null
+++ b/client/src/components/icons/SendIcon.tsx
@@ -0,0 +1,14 @@
+function SendIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.216 15.81a.5.5 0 0 1-.929.037l-1.543-3.473a.5.5 0 0 1 .082-.535l4.845-5.468L14 6l-.371.329-5.47 4.844a.5.5 0 0 1-.534.082L4.152 9.712a.5.5 0 0 1 .038-.929l9.83-3.44a.5.5 0 0 1 .637.637z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default SendIcon;
diff --git a/client/src/components/icons/ShareFilledIcon.tsx b/client/src/components/icons/ShareFilledIcon.tsx
new file mode 100644
index 0000000..872bdc0
--- /dev/null
+++ b/client/src/components/icons/ShareFilledIcon.tsx
@@ -0,0 +1,12 @@
+function ShareFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10.833 2.874a.5.5 0 0 1 .854-.354l6.283 6.283a.5.5 0 0 1-.01.717l-6.283 5.934a.5.5 0 0 1-.844-.364v-2.923a.477.477 0 0 0-.5-.485c-4.104.257-6.456 3.63-7.377 5.304-.106.194-.447.11-.44-.11.196-6.302 2.256-10.387 7.816-10.616a.52.52 0 0 0 .501-.51z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default ShareFilledIcon;
diff --git a/client/src/components/icons/ShareIcon.tsx b/client/src/components/icons/ShareIcon.tsx
new file mode 100644
index 0000000..db04a21
--- /dev/null
+++ b/client/src/components/icons/ShareIcon.tsx
@@ -0,0 +1,15 @@
+function ShareIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m10.833 1.667 7.5 7.5-7.5 7.083v-4.583c-5.833 0-8.333 6.25-8.333 6.25 0-7.084 2.083-11.667 8.333-11.667z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ShareIcon;
diff --git a/client/src/components/icons/SortIcon.tsx b/client/src/components/icons/SortIcon.tsx
new file mode 100644
index 0000000..bca8e8c
--- /dev/null
+++ b/client/src/components/icons/SortIcon.tsx
@@ -0,0 +1,12 @@
+function SortIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.857 11.526 10 14.39l-2.857-2.864a.669.669 0 1 0-.946.946l3.33 3.33a.667.667 0 0 0 .946 0l3.331-3.33a.67.67 0 0 0-.946-.946M7.142 8.474 9.999 5.61l2.858 2.865a.666.666 0 0 0 1.092-.216.67.67 0 0 0-.146-.73l-3.33-3.33a.666.666 0 0 0-.947 0l-3.33 3.33a.669.669 0 0 0 .946.946"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default SortIcon;
diff --git a/client/src/components/icons/SoundIcon.tsx b/client/src/components/icons/SoundIcon.tsx
new file mode 100644
index 0000000..f25ef87
--- /dev/null
+++ b/client/src/components/icons/SoundIcon.tsx
@@ -0,0 +1,16 @@
+function SoundIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M11.25 3.383c0-1.113-1.347-1.67-2.133-.883l-3.75 3.75h-1.61c-.951 0-1.932.553-2.217 1.587A8 8 0 0 0 1.25 10c0 .748.1 1.473.292 2.162.284 1.034 1.265 1.588 2.216 1.588h1.608l3.75 3.75c.787.787 2.134.23 2.134-.883zm4.237.872a.625.625 0 0 1 .883 0 8.124 8.124 0 0 1 0 11.49.625.625 0 0 1-.883-.883 6.873 6.873 0 0 0 0-9.724.625.625 0 0 1 0-.883"
+        fill="currentColor"
+      />
+      <path
+        d="M13.277 6.464a.624.624 0 0 1 .884 0 5 5 0 0 1 0 7.072.625.625 0 0 1-.883-.884 3.75 3.75 0 0 0 0-5.304.625.625 0 0 1 0-.883z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default SoundIcon;
diff --git a/client/src/components/icons/StartIcon.tsx b/client/src/components/icons/StartIcon.tsx
new file mode 100644
index 0000000..7c5a14f
--- /dev/null
+++ b/client/src/components/icons/StartIcon.tsx
@@ -0,0 +1,13 @@
+function StartIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width={20} height={20} rx={10} fill="#fff" fillOpacity={0.1} />
+      <path
+        d="M13.438 9.595a.5.5 0 0 1 0 .81l-4.645 3.353A.5.5 0 0 1 8 13.353V6.647a.5.5 0 0 1 .793-.405z"
+        fill="#D9D9D9"
+      />
+    </svg>
+  );
+}
+
+export default StartIcon;
diff --git a/client/src/components/icons/TrashIcon.tsx b/client/src/components/icons/TrashIcon.tsx
new file mode 100644
index 0000000..f66c612
--- /dev/null
+++ b/client/src/components/icons/TrashIcon.tsx
@@ -0,0 +1,15 @@
+function TrashIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m12.283 7.5-.288 7.5m-3.99 0-.288-7.5m8.306-2.675q.428.065.852.138m-.852-.138-.89 11.57a1.875 1.875 0 0 1-1.87 1.73H6.737a1.875 1.875 0 0 1-1.87-1.73l-.89-11.57m12.046 0a40 40 0 0 0-2.898-.33m-9.148.33q-.427.063-.852.137m.852-.137a40 40 0 0 1 2.898-.33m6.25 0V3.73c0-.984-.758-1.804-1.742-1.834a43 43 0 0 0-2.766 0c-.984.03-1.742.851-1.742 1.834v.763m6.25 0a41 41 0 0 0-6.25 0"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default TrashIcon;
diff --git a/client/src/components/icons/UnlinkIcon.tsx b/client/src/components/icons/UnlinkIcon.tsx
new file mode 100644
index 0000000..71ac358
--- /dev/null
+++ b/client/src/components/icons/UnlinkIcon.tsx
@@ -0,0 +1,13 @@
+function UnlinkIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6.381 7A3.38 3.38 0 0 0 3 10.381v.238A3.38 3.38 0 0 0 6.381 14h2.037a3.43 3.43 0 0 1-1.085-1.4H6.5c-2.8 0-2.8-4.2 0-4.2h2.1q.079.001.158.008L7.35 7zm5.201 0a3.43 3.43 0 0 1 1.085 1.4h.833c2.225.002 2.919 3.01.92 3.986l1.055 1.056A3.38 3.38 0 0 0 17 10.62v-.238A3.38 3.38 0 0 0 13.619 7zm-2.528.021 3.03 3.029a3.38 3.38 0 0 0-3.03-3.029m-.995 2.367c-.04.129-.103.412-.103.412a4 4 0 0 0-.056.581v.238A3.38 3.38 0 0 0 11.281 14h2.338q.332 0 .659-.066L12.943 12.6H11.4a2.1 2.1 0 0 1-1.974-2.8zm2.628.952a2.1 2.1 0 0 1-.113.86h.972z"
+        fill="currentColor"
+      />
+      <path d="M3.854 3 3 3.854 16.16 17l.84-.854z" fill="currentColor" />
+    </svg>
+  );
+}
+
+export default UnlinkIcon;
diff --git a/client/src/components/icons/UsersFilledIcon.tsx b/client/src/components/icons/UsersFilledIcon.tsx
new file mode 100644
index 0000000..7f3737b
--- /dev/null
+++ b/client/src/components/icons/UsersFilledIcon.tsx
@@ -0,0 +1,18 @@
+function UsersFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.875 5.625a3.125 3.125 0 1 1 6.25 0 3.125 3.125 0 0 1-6.25 0m6.25 2.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0m-11.25 0a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0m3.383 4.473A5.62 5.62 0 0 1 10 10a5.62 5.62 0 0 1 5.59 6.248.63.63 0 0 1-.31.474A10.6 10.6 0 0 1 10 18.125c-1.92 0-3.725-.51-5.28-1.403a.63.63 0 0 1-.31-.474 5.66 5.66 0 0 1 .848-3.65"
+        fill="currentColor"
+      />
+      <path
+        d="M4.235 11.878a6.9 6.9 0 0 0-1.09 4.28 8 8 0 0 1-1.47-.367l-.096-.034a.47.47 0 0 1-.31-.405l-.009-.101a3.125 3.125 0 0 1 2.975-3.373m12.62 4.28a6.9 6.9 0 0 0-1.09-4.28 3.127 3.127 0 0 1 2.975 3.373l-.008.1a.47.47 0 0 1-.311.406l-.096.033q-.709.251-1.47.367"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default UsersFilledIcon;
diff --git a/client/src/components/icons/UsersIcon.tsx b/client/src/components/icons/UsersIcon.tsx
new file mode 100644
index 0000000..cdc4d4a
--- /dev/null
+++ b/client/src/components/icons/UsersIcon.tsx
@@ -0,0 +1,15 @@
+function UsersIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.5 15.94c.71.206 1.447.31 2.187.31a7.8 7.8 0 0 0 3.435-.793 3.437 3.437 0 0 0-6.278-2.078m.656 2.561v-.002a5.3 5.3 0 0 0-.656-2.559m.656 2.561v.088A10.27 10.27 0 0 1 7.187 17.5c-1.943 0-3.76-.538-5.312-1.472l-.001-.09a5.312 5.312 0 0 1 9.97-2.559M10 5.313a2.813 2.813 0 1 1-5.625 0 2.813 2.813 0 0 1 5.625 0m6.875 1.875a2.188 2.188 0 1 1-4.375 0 2.188 2.188 0 0 1 4.375 0"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default UsersIcon;
diff --git a/client/src/components/icons/VideoFilledIcon.tsx b/client/src/components/icons/VideoFilledIcon.tsx
new file mode 100644
index 0000000..552cf38
--- /dev/null
+++ b/client/src/components/icons/VideoFilledIcon.tsx
@@ -0,0 +1,12 @@
+function VideoFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4.285 4.285a2.286 2.286 0 0 0-2.286 2.286v6.858a2.286 2.286 0 0 0 2.286 2.285h6.286a2.286 2.286 0 0 0 2.286-2.285V6.57a2.286 2.286 0 0 0-2.286-2.286zm11.764 10.858L14 13.093V6.906l2.05-2.05c.72-.72 1.95-.21 1.95.809v8.67c0 1.018-1.23 1.528-1.95.808"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default VideoFilledIcon;
diff --git a/client/src/components/icons/VideoIcon.tsx b/client/src/components/icons/VideoIcon.tsx
new file mode 100644
index 0000000..58f0ed7
--- /dev/null
+++ b/client/src/components/icons/VideoIcon.tsx
@@ -0,0 +1,15 @@
+function VideoIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m12.813 8.875 3.54-3.54a.562.562 0 0 1 .96.397v8.535a.562.562 0 0 1-.96.398l-3.54-3.54m-8.438 3.938h6.75a1.687 1.687 0 0 0 1.688-1.688v-6.75a1.687 1.687 0 0 0-1.688-1.687h-6.75a1.687 1.687 0 0 0-1.687 1.687v6.75a1.687 1.687 0 0 0 1.687 1.688"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default VideoIcon;
diff --git a/client/src/components/icons/VideoOffFilledIcon.tsx b/client/src/components/icons/VideoOffFilledIcon.tsx
new file mode 100644
index 0000000..a48d5b5
--- /dev/null
+++ b/client/src/components/icons/VideoOffFilledIcon.tsx
@@ -0,0 +1,16 @@
+function VideoOffFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.403 14.788q-.098.136-.216.257a2.3 2.3 0 0 1-1.616.669H4.285A2.286 2.286 0 0 1 2 13.429V6.57c0-.583.225-1.142.623-1.565zm3.646-9.932c.72-.72 1.95-.21 1.951.808v8.671c0 1.018-1.232 1.528-1.951.808L14 13.093V6.906zm-5.478-.57a2.287 2.287 0 0 1 2.285 2.285v6.858l-.005.11L3.68 4.368q.294-.083.605-.084z"
+        fill="currentColor"
+      />
+      <path
+        d="M17.565 16.644c.322.322.392.772.158 1.006s-.684.164-1.006-.158L1.809 2.584c-.321-.321-.392-.771-.158-1.006s.685-.163 1.006.158z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default VideoOffFilledIcon;
diff --git a/client/src/components/icons/VideoOffIcon.tsx b/client/src/components/icons/VideoOffIcon.tsx
new file mode 100644
index 0000000..cd3a055
--- /dev/null
+++ b/client/src/components/icons/VideoOffIcon.tsx
@@ -0,0 +1,15 @@
+function VideoOffIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m12.781 8.875 3.54-3.54a.563.563 0 0 1 .96.397v8.535a.562.562 0 0 1-.96.398l-3.54-3.54M9.97 15.063H4.344a1.687 1.687 0 0 1-1.688-1.688V7.75m9.631 6.818 1.057 1.057m-1.057-1.057c.305-.305.494-.727.494-1.193v-6.75a1.687 1.687 0 0 0-1.687-1.687h-6.75c-.466 0-.888.189-1.194.494m9.137 9.136L3.151 5.432m0 0L2.094 4.375"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default VideoOffIcon;
diff --git a/client/src/components/icons/WarningIcon.tsx b/client/src/components/icons/WarningIcon.tsx
new file mode 100644
index 0000000..fb79ca7
--- /dev/null
+++ b/client/src/components/icons/WarningIcon.tsx
@@ -0,0 +1,12 @@
+function WarningIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8.375 2.815c.722-1.25 2.527-1.25 3.249 0l6.128 10.623c.72 1.25-.181 2.812-1.623 2.812H3.87c-1.442 0-2.345-1.562-1.623-2.812zM10 12.743a.75.75 0 0 0-.75.75v.007c0 .414.336.75.75.75h.006a.75.75 0 0 0 .75-.75v-.007a.75.75 0 0 0-.75-.75zm0-6.493a.75.75 0 0 0-.75.75v3.125a.75.75 0 0 0 1.5 0V7a.75.75 0 0 0-.75-.75"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default WarningIcon;
diff --git a/client/src/components/icons/XMarkFilledIcon.tsx b/client/src/components/icons/XMarkFilledIcon.tsx
new file mode 100644
index 0000000..78e8a38
--- /dev/null
+++ b/client/src/components/icons/XMarkFilledIcon.tsx
@@ -0,0 +1,12 @@
+function XMarkFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10 3a7 7 0 1 1 0 14 7 7 0 0 1 0-14m2.424 4.576a.6.6 0 0 0-.848 0L10 9.152 8.424 7.576a.599.599 0 1 0-.848.848L9.152 10l-1.576 1.576a.599.599 0 1 0 .848.848L10 10.848l1.576 1.576a.599.599 0 1 0 .848-.848L10.848 10l1.576-1.576a.6.6 0 0 0 0-.848"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default XMarkFilledIcon;
diff --git a/client/src/components/icons/XMarkIcon.tsx b/client/src/components/icons/XMarkIcon.tsx
new file mode 100644
index 0000000..26f84ba
--- /dev/null
+++ b/client/src/components/icons/XMarkIcon.tsx
@@ -0,0 +1,15 @@
+function XMarkIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5 15 15 5M5 5l10 10"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default XMarkIcon;
diff --git a/client/src/components/ui/Button.tsx b/client/src/components/ui/Button.tsx
new file mode 100644
index 0000000..bbcd17f
--- /dev/null
+++ b/client/src/components/ui/Button.tsx
@@ -0,0 +1,57 @@
+import clsx from "clsx";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  variant?: "critical" | "tertiary" | "secondary" | "primary" | "cta" | "menu";
+  className?: string;
+  size?: "small" | "medium" | "large";
+  ref?: React.RefObject<HTMLButtonElement | null>;
+}
+
+function Button({
+  children,
+  variant = "primary",
+  className,
+  size = "medium",
+  ref,
+  type,
+  onClick,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      ref={ref}
+      {...props}
+      onClick={(e) => {
+        if (type !== "submit" && variant !== "menu") e.preventDefault();
+        onClick?.(e);
+      }}
+      className={clsx(
+        "transition-all cursor-pointer disabled:!cursor-default flex outline-none gap-2 items-center justify-center font-medium disabled:bg-[#F6F6F6] disabled:!text-[#D6D6D6]",
+        variant === "menu" &&
+          "text-[#7D7D7D] hover:bg-[#F3F3F3] active:bg-[#F3F1FD] active:text-[#7B60F3]",
+        variant === "cta" &&
+          "bg-[#7B60F3] text-white hover:bg-[#9184F6] active:bg-[#B3AAF9]",
+        variant === "primary" &&
+          "bg-[#F3F1FD] text-[#7B60F3] hover:bg-[#E1DEFC] active:bg-[#F3F1FD]",
+        variant === "secondary" &&
+          "bg-[#FFFFFF] hover:bg-[#F0F0F0] active:text-[#7B60F3] active:bg-[#F3F1FD]",
+        variant === "tertiary" &&
+          "bg-[#FFFFFF] hover:bg-[#F0F0F0] text-[#7D7D7D] active:text-[#141414] active:bg-[#F3F3F3]",
+        variant === "critical" &&
+          "text-[#FF4517] bg-[#FEF3F2] hover:bg-[#FEE4E2]",
+        size === "large" &&
+          "2xl:p-[1.111vw] p-4 button-m 2xl:rounded-[1.111vw] rounded-2xl",
+        size === "medium" &&
+          "2xl:p-[0.833vw] p-3 button-s 2xl:rounded-[0.833vw] rounded-xl",
+        size === "small" &&
+          "2xl:p-[0.556vw] p-2 button-s 2xl:rounded-[0.556vw] rounded-lg",
+        className
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default Button;
diff --git a/client/src/components/ui/ControlButton.tsx b/client/src/components/ui/ControlButton.tsx
new file mode 100644
index 0000000..0530f66
--- /dev/null
+++ b/client/src/components/ui/ControlButton.tsx
@@ -0,0 +1,47 @@
+import clsx from "clsx";
+
+interface ControlButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size: "small" | "large";
+  icon: React.ReactNode;
+  enabled: boolean;
+}
+
+function ControlButton({
+  size,
+  enabled,
+  icon,
+  className,
+  onClick,
+  ...props
+}: ControlButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      {...props}
+      className={clsx(
+        "backdrop-blur-[10px] rounded-full transition-all cursor-pointer disabled:!cursor-default outline-none",
+        size === "large" ? "2xl:p-[0.833vw] p-3" : "2xl:p-[0.417vw] p-[6px]",
+        !enabled
+          ? "bg-[#FF4517] hover:bg-[#FF4517]/85"
+          : size === "large"
+          ? "bg-[#FFFFFF]/15 hover:bg-[#FFFFFF]/25"
+          : "bg-[#141414]/15 hover:bg-[#141414]/25",
+        className
+      )}
+    >
+      <div
+        className={clsx(
+          "text-white",
+          size === "large"
+            ? "2xl:size-[1.111vw] size-4"
+            : "2xl:size-[0.833vw] size-3"
+        )}
+      >
+        {icon}
+      </div>
+    </button>
+  );
+}
+
+export default ControlButton;
diff --git a/client/src/components/ui/FloatingActionButton.tsx b/client/src/components/ui/FloatingActionButton.tsx
new file mode 100644
index 0000000..75f9641
--- /dev/null
+++ b/client/src/components/ui/FloatingActionButton.tsx
@@ -0,0 +1,33 @@
+import clsx from "clsx";
+
+interface FloatingActionButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  variant: "default" | "critical";
+}
+
+function FloatingActionButton({
+  children,
+  variant = "default",
+  className,
+  onClick,
+  ...props
+}: FloatingActionButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={clsx(
+        "2xl:p-[0.833vw] p-3 rounded-full transition-all cursor-pointer disabled:!cursor-default outline-none backdrop-blur-[10px]",
+        variant === "default" &&
+          "2xl:border-[0.069vw] border border-[#FFFFFF]/15 bg-[#000000]/15 hover:bg-[#000000]/25 hover:border-[#FFFFFF]/25 active:bg-[#7B60F3] active:border-[#FFFFFF]/25",
+        variant === "critical" && "bg-[#FF4517] hover:bg-[#FF4517]/85",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default FloatingActionButton;
diff --git a/client/src/components/ui/Input.tsx b/client/src/components/ui/Input.tsx
new file mode 100644
index 0000000..d78ab43
--- /dev/null
+++ b/client/src/components/ui/Input.tsx
@@ -0,0 +1,51 @@
+import clsx from "clsx";
+import LoaderIcon from "../icons/LoaderIcon";
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  isLoading?: boolean;
+  errorMessage?: string;
+  isError?: boolean;
+  mask?: string;
+}
+
+function Input({
+  isError,
+  placeholder,
+  errorMessage,
+  isLoading,
+  children,
+  ...props
+}: InputProps) {
+  return (
+    <div className="relative">
+      <input
+        placeholder=""
+        className={clsx(
+          isError
+            ? "hover:ring-[#FF4517] focus:ring-[#FF4517]"
+            : "hover:ring-[#7B60F3] focus:ring-[#7B60F3]",
+          "peer bg-[#F6F6F6] rounded-[0.833vw] px-[1.111vw] pt-[19px] pb-[11px] outline-none ring-1 ring-transparent transition-all inline-block w-full h-[3.889vw] text-m"
+        )}
+        {...props}
+      />
+      {children}
+      {placeholder && (
+        <span className="absolute caption-m font-medium text-[#7D7D7D] left-[1.111vw] top-1/2 -translate-y-1/2 pointer-events-none transition-all duration-300 peer-focus:caption-xs peer-focus:top-[0.556vw] peer-focus:translate-y-0 peer-[:not(:placeholder-shown)]:caption-xs peer-[:not(:placeholder-shown)]:top-[0.556vw] peer-[:not(:placeholder-shown)]:translate-y-0">
+          {placeholder + (props.required ? "*" : "")}
+        </span>
+      )}
+      {isError && (
+        <div className="text-red-500 font-medium caption-s 2xl:mt-[0.556vw] mt-2">
+          {errorMessage}
+        </div>
+      )}
+      {isLoading && (
+        <div className="size-[1.389vw] text-[#7B60F3] animate-spin z-1 absolute right-[1.111vw] top-1/2 -translate-y-1/2">
+          <LoaderIcon />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Input;
diff --git a/client/src/index.css b/client/src/index.css
index b5c61c9..58b68c2 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,3 +1,53 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  color: #141414;
+}
+
+@layer utilities {
+  .title-l {
+    @apply text-2xl leading-[120%] tracking-[-0.02em];
+  }
+
+  .title-m {
+    @apply text-xl leading-[110%] tracking-[-0.02em];
+  }
+
+  .title-s {
+    @apply text-base leading-[110%] tracking-[-0.02em];
+  }
+
+  .text-m {
+    @apply text-base leading-[125%] tracking-[-0.02em];
+  }
+
+  .text-s {
+    @apply text-sm leading-[115%] tracking-[-0.02em];
+  }
+
+  /* .text-xs {
+    @apply text-xs leading-[110%] tracking-[-0.02em];
+  } */
+
+  .button-m {
+    @apply text-sm leading-[115%] tracking-[-0.02em];
+  }
+
+  .button-s {
+    @apply text-xs leading-[130%] tracking-[-0.02em];
+  }
+
+  .caption-m {
+    @apply text-sm leading-[120%] tracking-[-0.02em];
+  }
+
+  .caption-s {
+    @apply text-xs leading-[120%] tracking-[-0.02em];
+  }
+
+  .caption-xs {
+    @apply text-[10px] leading-[110%] tracking-[-0.02em];
+  }
+}
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index d37737f..a350a14 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -1,12 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {},
+    screens: {
+      "2xl": { min: "1440px" },
+    },
   },
   plugins: [],
-}
-
+};