diff --git a/package.json b/package.json
index ed24ff5..f5cfadb 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sirus-next",
   "private": true,
-  "version": "1.3.1",
+  "version": "2.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,14 +10,15 @@
     "tauri": "tauri"
   },
   "dependencies": {
-    "vue": "^3.3.4",
-    "@tauri-apps/api": "^1.5.2"
+    "@iconify/vue": "^4.1.1",
+    "@tauri-apps/api": "^1.5.2",
+    "vue": "^3.3.4"
   },
   "devDependencies": {
+    "@tauri-apps/cli": "^1.5.8",
     "@vitejs/plugin-vue": "^4.2.3",
     "typescript": "^5.0.2",
     "vite": "^5.0.0",
-    "vue-tsc": "^1.8.5",
-    "@tauri-apps/cli": "^1.5.8"
+    "vue-tsc": "^1.8.5"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index feb3132..6d7e15a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@iconify/vue':
+    specifier: ^4.1.1
+    version: 4.1.1(vue@3.4.17)
   '@tauri-apps/api':
     specifier: ^1.5.2
     version: 1.5.3
@@ -261,6 +264,19 @@ packages:
     dev: true
     optional: true
 
+  /@iconify/types@2.0.0:
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+    dev: false
+
+  /@iconify/vue@4.1.1(vue@3.4.17):
+    resolution: {integrity: sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==}
+    peerDependencies:
+      vue: '>=3'
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.4.17(typescript@5.3.3)
+    dev: false
+
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
 
diff --git a/screenshots/SCR-20240215-ecpv.jpeg b/screenshots/SCR-20240215-ecpv.jpeg
new file mode 100644
index 0000000..e2ef215
Binary files /dev/null and b/screenshots/SCR-20240215-ecpv.jpeg differ
diff --git a/screenshots/SCR-20240215-ecyv.jpeg b/screenshots/SCR-20240215-ecyv.jpeg
new file mode 100644
index 0000000..d5a7081
Binary files /dev/null and b/screenshots/SCR-20240215-ecyv.jpeg differ
diff --git a/screenshots/SCR-20240215-edbw.jpeg b/screenshots/SCR-20240215-edbw.jpeg
new file mode 100644
index 0000000..e0508ae
Binary files /dev/null and b/screenshots/SCR-20240215-edbw.jpeg differ
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index eae6f3a..9cfaa43 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -2785,7 +2785,7 @@ checksum = "38b58827f4464d87d377d175e90bf58eb00fd8716ff0a62f80356b5e61555d0d"
 
 [[package]]
 name = "sirus-next"
-version = "1.3.1"
+version = "2.0.4"
 dependencies = [
  "lib_rusty_torrent",
  "reqwest",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index d659c76..89c8965 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "sirus-next"
-version = "1.3.1"
+version = "2.0.4"
 description = "Sirus Next Launcher"
 authors = ["Nikolay Kost <jilizart@gmail.com>"]
 edition = "2021"
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 043c664..b7b6943 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -51,7 +51,9 @@
         "resizable": false,
         "title": "sirus-next",
         "width": 1366,
-        "height": 900,
+        "height": 768,
+        "maxWidth": 1366,
+        "maxHeight": 768,
         "minWidth": 1366,
         "minHeight": 600,
         "center": true,
diff --git a/src/App.vue b/src/App.vue
index f3b3679..0039627 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,11 +7,13 @@ import Layout from "./components/Layout.vue";
 import ProgressBar from "./components/ProgressBar.vue";
 import ServerStatus from "./components/ServerStatus.vue";
 import Button from "./components/Button.vue";
+import Addons from "./components/Addons.vue";
 import UsersIcon from "./components/UsersIcon.vue";
 import DropdownMenu from "./components/DropdownMenu.vue";
-import AccountOutline from "./components/AccountOutline.vue";
+import AccountOutlineIcon from "./components/AccountOutlineIcon.vue";
 import ChevronDown from "./components/ChevronDown.vue";
 import Link from "./components/Link.vue";
+import { Icon } from "@iconify/vue";
 
 import { getVersion } from "@tauri-apps/api/app";
 
@@ -69,10 +71,10 @@ onMounted(async () => {
 
 <template>
   <Layout>
-    <template v-slot:header>
+    <template #header>
       <na class="primary-nav">
-        <Button variant="nav" href="#">Community</Button>
         <Button variant="nav" href="#">News</Button>
+        <Button variant="nav" href="#">Addons</Button>
         <DropdownMenu open-on="hover">
           <Button variant="nav"> Game Info </Button>
           <template #primary>
@@ -99,7 +101,7 @@ onMounted(async () => {
         </DropdownMenu>
         <DropdownMenu open-on="hover">
           <Button variant="nav">
-            <AccountOutline /> Account <ChevronDown />
+            <AccountOutlineIcon />&nbsp;Account <ChevronDown />
           </Button>
           <template #primary>
             <div class="dropdown-login">
@@ -117,10 +119,11 @@ onMounted(async () => {
       </aside>
     </template>
 
+    <Addons />
     <CardFull v-if="cardItem" :item="cardItem" @back="hideCard" />
     <CardList v-else :items="items" @show="showCard" />
 
-    <template v-slot:aside>
+    <template #aside>
       <div id="logo"></div>
       <div class="users-online">
         <UsersIcon /> {{ online }} <span class="users-online-meta">online</span>
@@ -140,9 +143,20 @@ onMounted(async () => {
 
       <ServerStatus :items="statusRealms" />
     </template>
-    <template v-slot:footer>
+    <template #footer>
       <section class="footer-content">
-        <Button variant="play">Play</Button>
+        <div class="play-button">
+          <Button class="play-button-run" variant="play"> Play </Button>
+          <Button class="play-button-edit" variant="play">
+            <Icon
+              icon="mdi:settings"
+              width="1.5rem"
+              height="1.5rem"
+              color="white"
+            />
+          </Button>
+        </div>
+
         <ProgressBar />
         <div class="meta">Version: {{ version }}</div>
       </section>
@@ -151,6 +165,26 @@ onMounted(async () => {
 </template>
 
 <style scoped>
+.play-button {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+}
+
+button.play-button-run {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  min-width: 200px;
+}
+
+.play-button-edit {
+  border-left: 1px solid hsl(15, 100%, 40%);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  min-width: 40px;
+  padding: 0 4px;
+}
+
 .primary-nav,
 .aside-nav {
   display: flex;
diff --git a/src/api.ts b/src/api.ts
index 885e319..2928fca 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -27,6 +27,16 @@ export type StatusResponse = {
 
 export type StatusRealm = StatusResponse["realms"][0];
 
+export type AddonItem = {
+  id: number;
+  name: string;
+  version: string;
+  category: number;
+  downloads: number;
+  repo_updated_at: string;
+  repository: string;
+};
+
 export function httpGet<T>(url: string) {
   return fetch<T>(url, {
     method: "GET",
diff --git a/src/components/AccountOutline.vue b/src/components/AccountOutlineIcon.vue
similarity index 100%
rename from src/components/AccountOutline.vue
rename to src/components/AccountOutlineIcon.vue
diff --git a/src/components/AddonCard.vue b/src/components/AddonCard.vue
new file mode 100644
index 0000000..7dccbfb
--- /dev/null
+++ b/src/components/AddonCard.vue
@@ -0,0 +1,346 @@
+<script setup lang="ts">
+const angle = 135;
+
+const palettes = [
+  {
+    from: "#f40076",
+    to: "#df98fa",
+  },
+  {
+    from: "#f06966",
+    to: "#fad6a6",
+  },
+  {
+    from: "#ff0076",
+    to: "#590fb7",
+  },
+  {
+    from: "#9055ff",
+    to: "#13e2da",
+  },
+  {
+    from: "#0b63f6",
+    to: "#003cc5",
+  },
+  {
+    from: "#d6ff7f",
+    to: "#00b3cc",
+  },
+  {
+    from: "#e233ff",
+    to: "#ff6b00",
+  },
+  {
+    from: "#df98fa",
+    to: "#9055ff",
+  },
+  {
+    from: "#ed7b84",
+    to: "#9055ff",
+  },
+  {
+    from: "#402565",
+    to: "#30be96",
+  },
+  {
+    from: "#402662",
+    to: "#3900a6",
+  },
+  {
+    from: "#f14658",
+    to: "#dc2537",
+  },
+  {
+    from: "#f40076",
+    to: "#342711",
+  },
+  {
+    from: "#000066",
+    to: "#6699ff",
+  },
+  {
+    from: "#cb5eee",
+    to: "#4be1ec",
+  },
+  {
+    from: "#fa7cbb",
+    to: "#f14658",
+  },
+  {
+    from: "#737dfe",
+    to: "#ffcac9",
+  },
+  {
+    from: "#2f80ed",
+    to: "#b2ffda",
+  },
+];
+const generateGradient = (text: string) => {
+  const len = text.length;
+  const plen = palettes.length;
+  const item = palettes[len % plen];
+
+  return `linear-gradient(${angle}deg, ${item.from}, ${item.to})`;
+};
+
+import Button from "./Button.vue";
+import { Icon } from "@iconify/vue";
+
+function timeSince(date: string) {
+  var seconds = Math.floor(
+    (new Date().getTime() - new Date(date).getTime()) / 1000
+  );
+
+  var interval = seconds / 31536000;
+
+  if (interval > 1) {
+    return Math.floor(interval) + " years";
+  }
+  interval = seconds / 2592000;
+  if (interval > 1) {
+    return Math.floor(interval) + " months";
+  }
+  interval = seconds / 86400;
+  if (interval > 1) {
+    return Math.floor(interval) + " days";
+  }
+  interval = seconds / 3600;
+  if (interval > 1) {
+    return Math.floor(interval) + " hours";
+  }
+  interval = seconds / 60;
+  if (interval > 1) {
+    return Math.floor(interval) + " minutes";
+  }
+  return Math.floor(seconds) + " seconds";
+}
+
+function kFormatter(num: number) {
+  const sign = Math.sign(num);
+
+  if (Math.abs(num) > 999) {
+    const val = parseFloat((Math.abs(num) / 1000).toFixed(1));
+
+    return `${sign * val}K`;
+  }
+
+  return String(sign * Math.abs(num));
+}
+
+function versionFormatter(version: string) {
+  const parts = version.split(".");
+  const [major, minor] = parts;
+
+  if (parts.length === 1) {
+    return `${major}.0`;
+  }
+
+  if (parts.length === 2) {
+    return `${major}.${minor}.0`;
+  }
+
+  return version;
+}
+
+const { item, isInstalled, isInstalling, isRemoving } = defineProps<{
+  isInstalled?: boolean;
+  isInstalling?: boolean;
+  isRemoving?: boolean;
+  item: {
+    name: string;
+    version: string;
+    downloads: number;
+    repo_updated_at: string;
+  };
+}>();
+</script>
+
+<template>
+  <div class="addon-card">
+    <div
+      class="addon-card-header"
+      :style="{ background: generateGradient(item.name) }"
+    >
+      <div class="addon-card-title">
+        {{ item.name }}
+        <Icon
+          icon="bitcoin-icons:verify-filled"
+          width="1.5rem"
+          height="1.5rem"
+          color="#6cdb00"
+        />
+      </div>
+      <div class="addon-card-version">
+        ver
+        <span class="addon-card-bigger">
+          {{ versionFormatter(item.version) }}
+        </span>
+      </div>
+    </div>
+
+    <div class="addon-card-desc">
+      <p>
+        <strong>RaidRoll</strong> - это модификация, которую можно использовать
+        для распределения добычи в рейде. В списке перечислены все игроки с
+        идентификатором рядом с их именем. Затем он выполняет бросок и
+        объявляет, кто является победителем (на основании идентификатора). Вы
+        также можете отслеживать броски, сделанные игроками на любой выпавшей
+        добыче. Эта функция поддерживает систему распределения добычи EPGP.
+        Аддон также содержит трекер лута, который можно использовать для
+        объявления или отслеживания выпавшего лута.
+      </p>
+      \n
+      <p>
+        <em
+          >Спасибо игроку
+          <a href="https://forum.sirus.su/members/17os86.175882/">Os</a>
+          за перевод описания на Русский Язык.</em
+        >
+      </p>
+    </div>
+
+    <div class="addon-card-body">
+      <div class="addon-card-meta">
+        <div class="addon-card-downloads">
+          <span class="addon-card-bigger">{{
+            kFormatter(item.downloads)
+          }}</span>
+          downloads
+        </div>
+        <div class="addon-card-updated">
+          {{ timeSince(item.repo_updated_at) }} ago
+        </div>
+      </div>
+      <div class="addon-card-actions">
+        <div class="addon-card-status">
+          <div v-if="isInstalled" class="addon-card-status-text">
+            <Icon icon="ic:round-check" width="1rem" height="1rem" /> Installed
+          </div>
+          <div v-if="isInstalling" class="addon-card-status-text">
+            <Icon icon="line-md:loading-loop" width="1rem" height="1rem" />
+            Installing addon
+          </div>
+          <div v-if="isRemoving" class="addon-card-status-text">
+            <Icon icon="line-md:loading-loop" width="1rem" height="1rem" />
+            Removing addon
+          </div>
+        </div>
+        <Button v-if="!isInstalled" variant="install" :disabled="isInstalling"
+          >Install</Button
+        >
+        <Button v-if="isInstalled" variant="remove">Remove</Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.addon-card {
+  background: rgba(49, 51, 57, 1);
+  border-radius: 8px;
+  min-height: 180px;
+  min-width: 280px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.addon-card-header {
+  position: relative;
+  padding: 16px;
+  border-radius: 8px 8px 0 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  min-height: 80px;
+}
+
+.addon-card-header::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 8px 8px 0 0;
+  background: rgba(49, 51, 57, 0.2);
+  background: linear-gradient(
+    180deg,
+    rgba(49, 51, 57, 0.6) 12%,
+    rgba(255, 255, 255, 0) 96%
+  );
+  z-index: 1;
+}
+
+.addon-card-title {
+  z-index: 2;
+  color: white;
+  font-size: 18px;
+  font-weight: 700;
+  text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, 0.8);
+  display: inline-flex;
+  gap: 4px;
+}
+
+.addon-card-updated {
+  z-index: 2;
+  color: white;
+  font-size: 12px;
+  text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+.addon-card-body {
+  padding: 16px;
+  border-radius: 0 0 8px 8px;
+  align-self: flex-end;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+}
+
+.addon-card-meta {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.addon-card-version,
+.addon-card-status,
+.addon-card-downloads {
+  z-index: 2;
+  color: white;
+  font-size: 12px;
+  text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+.addon-card-status {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.addon-card-status-text {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.addon-card-bigger {
+  font-size: 16px;
+}
+
+.addon-card-actions {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.addon-card-desc {
+  display: none;
+}
+</style>
diff --git a/src/components/Addons.vue b/src/components/Addons.vue
new file mode 100644
index 0000000..0ee5d94
--- /dev/null
+++ b/src/components/Addons.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import AddonCard from "./AddonCard.vue";
+
+const items = [
+  {
+    id: 1,
+    name: "Bartender4",
+    version: "4",
+    category: 18,
+    downloads: 308630,
+    repo_updated_at: "2023-09-02 22:11:03",
+    repository: "sirus-addons\/Bartender4",
+  },
+  {
+    id: 3,
+    name: "TipTac",
+    version: "3",
+    category: 21,
+    downloads: 72387,
+    repo_updated_at: "2023-11-11 11:11:15",
+    repository: "sirus-addons\/TipTac",
+  },
+  {
+    id: 4,
+    name: "MoveAnything",
+    version: "11",
+    category: 17,
+    downloads: 170789,
+    repo_updated_at: "2024-01-05 10:19:23",
+    repository: "sirus-addons\/MoveAnything",
+  },
+  {
+    id: 7,
+    name: "DrDamage",
+    version: "3",
+    category: 20,
+    downloads: 241227,
+    repo_updated_at: "2023-09-02 22:12:13",
+    repository: "sirus-addons\/DrDamage",
+  },
+  {
+    id: 8,
+    name: "RaidRoll",
+    version: "2",
+    category: 14,
+    downloads: 87974,
+    repo_updated_at: "2021-05-21 18:38:14",
+    repository: "sirus-addons\/RaidRoll",
+  },
+];
+</script>
+
+<template>
+  <div class="addons-list">
+    <div class="addons-category">
+      <div class="addons-category-title">Addons Category</div>
+      <div class="addons-category-list">
+        <AddonCard
+          v-for="item in items"
+          :item="item"
+          :is-removing="item.id === 4"
+          :is-installing="item.id === 7"
+          :is-installed="item.id === 8"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.addons-list {
+  max-height: 500px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  /* padding: 8px; */
+  border-radius: 8px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.addons-category {
+  padding: 8px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.addons-category-title {
+  padding: 0 16px;
+  color: white;
+  font-size: 16px;
+  font-weight: 700;
+  text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+.addons-category-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+</style>
diff --git a/src/components/Button.vue b/src/components/Button.vue
index 419c2ea..5a33a97 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -2,7 +2,8 @@
 import { reactive } from "vue";
 import { open } from "@tauri-apps/api/shell";
 
-const { variant, text, href } = defineProps<{
+const { variant, text, href, disabled } = defineProps<{
+  disabled?: boolean;
   variant?: string;
   text?: string;
   href?: string;
@@ -13,6 +14,7 @@ const emit = defineEmits(["click"]);
 const classObject = reactive({
   [`variant-${variant}`]: !!variant,
   [`text-${text}`]: !!text,
+  disabled: disabled,
 });
 
 const onClick = (e: MouseEvent) => {
@@ -63,6 +65,10 @@ button:hover {
   cursor: pointer;
 }
 
+button.disabled {
+  opacity: 0.6;
+}
+
 .variant-play {
   background: #aa2409;
   height: 56px;
@@ -94,6 +100,34 @@ button:hover {
   font-weight: 600;
 }
 
+button.variant-install {
+  height: 32px;
+  color: #fff;
+  background: #0074e0;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+button.variant-remove {
+  height: 32px;
+  color: #fff;
+  background: #b10000;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+}
+
 button.variant-nav {
   font-size: 18px;
   font-weight: 600;
diff --git a/src/components/CardFull.vue b/src/components/CardFull.vue
index b4d57a1..bd5cc32 100644
--- a/src/components/CardFull.vue
+++ b/src/components/CardFull.vue
@@ -31,7 +31,7 @@ const emit = defineEmits(["back"]);
   overflow-y: scroll;
   overflow-x: hidden;
   padding: 8px;
-  background: rgba(0, 0, 0, 0.8);
+  background: rgba(49, 51, 57, 0.8);
   border-radius: 8px;
 }
 
@@ -43,7 +43,6 @@ const emit = defineEmits(["back"]);
 
 .card-full-title {
   color: white;
-  font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
   font-size: 52px;
   font-weight: 700;
   text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, 0.8);
diff --git a/src/components/DropdownMenu.vue b/src/components/DropdownMenu.vue
index 981bb38..48fa9b4 100644
--- a/src/components/DropdownMenu.vue
+++ b/src/components/DropdownMenu.vue
@@ -56,7 +56,7 @@ const withSecondary = slots?.secondary?.();
   position: relative;
   perspective: 1000px;
   display: inline-block;
-  z-index: 1;
+  z-index: 4;
 }
 
 .dropdown-menu {
diff --git a/src/components/Layout.vue b/src/components/Layout.vue
index 5d77e76..7d22478 100644
--- a/src/components/Layout.vue
+++ b/src/components/Layout.vue
@@ -40,6 +40,7 @@ div#app {
   padding-top: 54px;
   padding-bottom: 12px;
   border: 1px solid #44454c;
+  overflow: hidden;
 }
 
 div#container {
diff --git a/src/components/LoadingLoopIcon.vue b/src/components/LoadingLoopIcon.vue
new file mode 100644
index 0000000..c7e4602
--- /dev/null
+++ b/src/components/LoadingLoopIcon.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { defineComponent } from "vue";
+
+defineComponent({
+  name: "LineMdLoadingLoop",
+});
+</script>
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-dasharray="15"
+      stroke-dashoffset="15"
+      stroke-linecap="round"
+      stroke-width="2"
+      d="M12 3C16.9706 3 21 7.02944 21 12"
+    >
+      <animate
+        fill="freeze"
+        attributeName="stroke-dashoffset"
+        dur="0.3s"
+        values="15;0"
+      />
+      <animateTransform
+        attributeName="transform"
+        dur="1.5s"
+        repeatCount="indefinite"
+        type="rotate"
+        values="0 12 12;360 12 12"
+      />
+    </path>
+  </svg>
+</template>
diff --git a/src/components/RoundCheckIcon.vue b/src/components/RoundCheckIcon.vue
new file mode 100644
index 0000000..6dd0a91
--- /dev/null
+++ b/src/components/RoundCheckIcon.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { defineComponent } from "vue";
+
+defineComponent({
+  name: "IcRoundCheck",
+});
+</script>
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M9 16.17L5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41z"
+    />
+  </svg>
+</template>
diff --git a/src/styles.css b/src/styles.css
index 0ee1d19..c4f19e7 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -43,3 +43,47 @@ body {
 button {
   font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
 }
+
+:root {
+  --meka-color-bnet-blue-800: #003f7a;
+  --meka-color-bnet-blue-700: #005aad;
+  --meka-color-bnet-blue-600: #0074e0;
+  --meka-color-bnet-blue-500: #148eff;
+  --meka-color-bnet-blue-400: #47a6ff;
+  --meka-color-bnet-blue-300: #7abfff;
+  --meka-color-bnet-blue-200: #add8ff;
+  --meka-color-bnet-blue-100: #e0f0ff;
+  --meka-color-bnet-gray-700: #111218;
+  --meka-color-bnet-gray-600: #15171e;
+  --meka-color-bnet-gray-500: #1a1c23;
+  --meka-color-bnet-gray-400: #22242c;
+  --meka-color-bnet-gray-300: #292b33;
+  --meka-color-bnet-gray-100: #d5d7dd;
+  --meka-color-bnet-gray-50: #ebecef;
+  --meka-color-bnet-green-600: #54a800;
+  --meka-color-bnet-green-500: #6cdb00;
+  --meka-color-bnet-yellow-600: #cc9000;
+  --meka-color-bnet-yellow-500: #ffb400;
+  --meka-color-bnet-red-900: #420000;
+  --meka-color-bnet-red-800: #580000;
+  --meka-color-bnet-red-600: #b10000;
+  --meka-color-bnet-red-500: #dd0000;
+  --meka-color-bnet-white: #ffffff;
+  --meka-color-bnet-white-84: rgba(255, 255, 255, 0.84);
+  --meka-color-bnet-white-72: rgba(255, 255, 255, 0.72);
+  --meka-color-bnet-white-60: rgba(255, 255, 255, 0.6);
+  --meka-color-bnet-white-48: rgba(255, 255, 255, 0.48);
+  --meka-color-bnet-white-36: rgba(255, 255, 255, 0.36);
+  --meka-color-bnet-white-24: rgba(255, 255, 255, 0.24);
+  --meka-color-bnet-white-18: rgba(255, 255, 255, 0.18);
+  --meka-color-bnet-white-12: rgba(255, 255, 255, 0.12);
+  --meka-color-bnet-white-6: rgba(255, 255, 255, 0.06);
+  --meka-color-bnet-white-3: rgba(255, 255, 255, 0.03);
+  --meka-color-bnet-black: #000000;
+  --meka-color-bnet-black-72: rgba(0, 0, 0, 0.72);
+  --meka-color-bnet-black-60: rgba(0, 0, 0, 0.6);
+  --meka-color-bnet-black-48: rgba(0, 0, 0, 0.48);
+  --meka-color-bnet-black-24: rgba(0, 0, 0, 0.24);
+  --meka-color-bnet-black-12: rgba(0, 0, 0, 0.12);
+  --meka-color-bnet-black-6: rgba(0, 0, 0, 0.06);
+}