diff --git a/apps/desktop/src/styles/theme.css b/apps/desktop/src/styles/theme.css
index e5152122a3..1e31aa6328 100644
--- a/apps/desktop/src/styles/theme.css
+++ b/apps/desktop/src/styles/theme.css
@@ -13,163 +13,98 @@
 @tailwind utilities;
 
 :root {
-	/* Light theme variables */
-	--gray-50: #ffffff; /* Pure white background */
-	--gray-100: #f8f9fb; /* Soft background */
-	--gray-200: #e4e6ed; /* Light borders/dividers */
-	--gray-300: #c7ccda; /* Subtle highlights */
-	--gray-400: #868e9f; /* Secondary text - slightly softened */
-	--gray-450: #4a4a4a; /* Adjusted to maintain balance */
-	--gray-500: #161b26; /* Primary text - deep, rich contrast */
-
-	--gray-50-transparent-50: rgba(255, 255, 255, 0.5);
-	--gray-100-transparent-50: rgba(248, 249, 251, 0.5);
-	--gray-200-transparent-50: rgba(228, 230, 237, 0.5);
-	--gray-300-transparent-50: rgba(207, 210, 214, 0.5);
-	--gray-400-transparent-50: rgba(134, 138, 143, 0.5);
-	--gray-450-transparent-50: rgba(234, 236, 239, 0.5);
-	--gray-500-transparent-50: rgba(22, 27, 38, 0.5);
-
-	--transparent-window: rgba(255, 255, 255, 0.7);
-
-	--text-primary: rgba(18, 22, 31, 0.95); /* Section titles, headings */
-	--text-secondary: rgba(18, 22, 31, 0.85); /* Important labels */
-	--text-tertiary: rgba(18, 22, 31, 0.65); /* Descriptions */
-
-	--black-transparent-5: rgba(18, 22, 31, 0.05);
-	--black-transparent-10: rgba(18, 22, 31, 0.1);
-	--black-transparent-20: rgba(18, 22, 31, 0.2);
-	--black-transparent-40: rgba(18, 22, 31, 0.4);
-	--black-transparent-60: rgba(18, 22, 31, 0.6);
-	--black-transparent-80: rgba(18, 22, 31, 0.8);
-
-	--white-transparent-5: rgba(255, 255, 255, 0.05);
-	--white-transparent-10: rgba(255, 255, 255, 0.1);
-	--white-transparent-20: rgba(255, 255, 255, 0.2);
-	--white-transparent-40: rgba(255, 255, 255, 0.4);
-	--white-transparent-60: rgba(255, 255, 255, 0.6);
-	--white-transparent-80: rgba(255, 255, 255, 0.8);
-
-	--solid-white: #ffffff;
-
-	--blue-50: #ebf1ff;
-	--blue-100: #adc9ff;
-	--blue-200: #85adff;
-	--blue-300: #4785ff;
-	--blue-400: #3f75e0;
-	--blue-500: rgb(54, 102, 197);
-
-	--blue-transparent-0: rgba(34, 64, 122, 0);
-	--blue-transparent-10: rgba(34, 64, 122, 0.1);
-	--blue-transparent-20: rgba(34, 64, 122, 0.2);
-
-	--red-50: #ffebee;
-	--red-100: #ffadbb;
-	--red-200: #ff8599;
-	--red-300: #ff4766;
-	--red-400: #e03f5a;
-
-	--red-transparent-20: rgba(255, 71, 102, 0.2);
-
-	--shadow-s: 0px 8px 16px 0px rgba(18, 22, 31, 0.04);
+  /* Light theme variables */
+  --gray-50: #ffffff;
+  --gray-100: #f7f8fa;
+  --gray-200: #e7eaf0;
+  --gray-300: #c9cedb;
+  --gray-400: #8991a3;
+  --gray-500: #12161f;
+
+  --text-primary: rgba(18, 22, 31, 0.95); /* Section titles, headings */
+  --text-secondary: rgba(18, 22, 31, 0.85); /* Important labels */
+  --text-tertiary: rgba(18, 22, 31, 0.65); /* Descriptions */
+
+  --black-transparent-5: rgba(18, 22, 31, 0.05);
+  --black-transparent-10: rgba(18, 22, 31, 0.1);
+  --black-transparent-20: rgba(18, 22, 31, 0.2);
+  --black-transparent-40: rgba(18, 22, 31, 0.4);
+  --black-transparent-60: rgba(18, 22, 31, 0.6);
+  --black-transparent-80: rgba(18, 22, 31, 0.8);
+
+  --white-transparent-5: rgba(255, 255, 255, 0.05);
+  --white-transparent-10: rgba(255, 255, 255, 0.1);
+  --white-transparent-20: rgba(255, 255, 255, 0.2);
+  --white-transparent-40: rgba(255, 255, 255, 0.4);
+
+  --blue-50: #ffe8ec;
+  --blue-100: #d4879a;
+  --blue-200: #b05068;
+  --blue-300: #800020;
+  --blue-400: #660019;
+
+  --blue-transparent-10: rgba(128, 0, 32, 0.1);
+  --blue-transparent-20: rgba(128, 0, 32, 0.2);
+
+  --red-50: #ffebee;
+  --red-100: #ffadbb;
+  --red-200: #ff8599;
+  --red-300: #ff4766;
+  --red-400: #e03f5a;
+
+  --red-transparent-20: rgba(255, 71, 102, 0.2);
+
+  --shadow-s: 0px 8px 16px 0px rgba(18, 22, 31, 0.04);
 }
 
 /* Dark theme variables */
 :root.dark {
-	color-scheme: dark;
-	/* Main background colors */
-	--gray-50: #141414; /* Main background - slightly darker */
-	--gray-100: #181818; /* Secondary background */
-	--gray-200: #222222; /* Borders and dividers */
-	--gray-300: #323232; /* Subtle highlights */
-	--gray-400: #868686; /* Secondary text - slightly softer */
-	--gray-450: #eaeaea; /* Adjusted to be more balanced */
-	--gray-500: #ffffff; /* Primary text - titles/headings */
-
-	--gray-50-transparent-50: rgba(20, 20, 20, 0.5);
-	--gray-100-transparent-50: rgba(24, 24, 24, 0.5);
-	--gray-200-transparent-50: rgba(34, 34, 34, 0.5);
-	--gray-300-transparent-50: rgba(50, 50, 50, 0.5);
-	--gray-400-transparent-50: rgba(134, 134, 134, 0.5);
-	--gray-450-transparent-50: rgba(234, 234, 234, 0.5);
-	--gray-500-transparent-50: rgba(255, 255, 255, 0.5);
-
-	--transparent-window: rgba(22, 22, 22, 0.7);
-
-	/* Add new variables for text hierarchy */
-	--text-primary: rgba(255, 255, 255, 0.95); /* Section titles, headings */
-	--text-secondary: rgba(255, 255, 255, 0.85); /* Important labels */
-	--text-tertiary: rgba(255, 255, 255, 0.65); /* Descriptions */
-
-	/* Transparent overlays - adjusted for better contrast */
-	--black-transparent-5: rgba(255, 255, 255, 0.05);
-	--black-transparent-10: rgba(255, 255, 255, 0.1);
-	--black-transparent-20: rgba(255, 255, 255, 0.2);
-	--black-transparent-40: rgba(255, 255, 255, 0.4);
-	--black-transparent-60: rgba(255, 255, 255, 0.6);
-	--black-transparent-80: rgba(255, 255, 255, 0.8);
-
-	/* White transparencies */
-	--white-transparent-5: rgba(18, 22, 31, 0.05);
-	--white-transparent-10: rgba(18, 22, 31, 0.1);
-	--white-transparent-20: rgba(18, 22, 31, 0.2);
-	--white-transparent-40: rgba(18, 22, 31, 0.4);
-	--white-transparent-60: rgba(18, 22, 31, 0.6);
-	--white-transparent-80: rgba(18, 22, 31, 0.8);
-
-	--solid-white: #ffffff;
-
-	/* Accent colors remain mostly the same but adjusted for dark theme */
-	--blue-50: #1a2438;
-	--blue-100: #243352;
-	--blue-200: #2e426b;
-	--blue-300: #4785ff;
-	--blue-400: #5c8fff;
-
-	--blue-transparent-10: rgba(71, 133, 255, 0.1);
-	--blue-transparent-20: rgba(71, 133, 255, 0.2);
-
-	--red-50: #2c1a1e;
-	--red-100: #52232c;
-	--red-200: #6b2c39;
-	--red-300: #ff4766;
-	--red-400: #ff5c7a;
-
-	--red-transparent-20: rgba(255, 71, 102, 0.2);
-
-	--shadow-s: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
-}
-
-.dark .dark-button-shadow {
-	box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
-}
-
-.dark-button-shadow {
-	box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.2) inset;
-}
-
-.dark .gray-button-shadow {
-	box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.1) inset;
-}
-
-.gray-button-shadow {
-	box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.4) inset;
-}
-
-.dark .gray-button-border {
-	@apply border-gray-2;
-}
-
-.gray-button-border {
-	@apply border-gray-8;
-}
-
-.dark .dark-button-border {
-	@apply border-gray-2;
-}
-
-.dark-button-border {
-	@apply border-gray-12;
+  /* Main background colors */
+  --gray-50: #1e1e1e; /* Main background */
+  --gray-100: #242424; /* Secondary background */
+  --gray-200: #2a2a2a; /* Borders and dividers */
+  --gray-300: #3a3a3a; /* Subtle highlights */
+  --gray-400: #9d9d9d; /* Secondary text - descriptions */
+  --gray-500: #ffffff; /* Primary text - titles/headings (back to white) */
+
+  /* Add new variables for text hierarchy */
+  --text-primary: rgba(255, 255, 255, 0.95); /* Section titles, headings */
+  --text-secondary: rgba(255, 255, 255, 0.85); /* Important labels */
+  --text-tertiary: rgba(255, 255, 255, 0.65); /* Descriptions */
+
+  /* Transparent overlays - adjusted for better contrast */
+  --black-transparent-5: rgba(255, 255, 255, 0.05);
+  --black-transparent-10: rgba(255, 255, 255, 0.1);
+  --black-transparent-20: rgba(255, 255, 255, 0.2);
+  --black-transparent-40: rgba(255, 255, 255, 0.4);
+  --black-transparent-60: rgba(255, 255, 255, 0.6);
+  --black-transparent-80: rgba(255, 255, 255, 0.8);
+
+  /* White transparencies */
+  --white-transparent-5: rgba(18, 22, 31, 0.05);
+  --white-transparent-10: rgba(18, 22, 31, 0.1);
+  --white-transparent-20: rgba(18, 22, 31, 0.2);
+  --white-transparent-40: rgba(18, 22, 31, 0.4);
+
+  /* Accent colors remain mostly the same but adjusted for dark theme */
+  --blue-50: #2c1018;
+  --blue-100: #421820;
+  --blue-200: #5a2028;
+  --blue-300: #800020;
+  --blue-400: #a83040;
+
+  --blue-transparent-10: rgba(128, 0, 32, 0.1);
+  --blue-transparent-20: rgba(128, 0, 32, 0.2);
+
+  --red-50: #2c1a1e;
+  --red-100: #52232c;
+  --red-200: #6b2c39;
+  --red-300: #ff4766;
+  --red-400: #ff5c7a;
+
+  --red-transparent-20: rgba(255, 71, 102, 0.2);
+
+  --shadow-s: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
 }
 
 [data-transparent-window] {
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 20a677a014..1c08f2c254 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -10,28 +10,26 @@
 @tailwind utilities;
 
 :root {
-	--primary: #005cb1;
-	--primary-2: #004c93;
-	--primary-3: #003b73;
-	--secondary: #2eb4ff;
-	--secondary-2: #1696e0;
-	--secondary-3: #117ebd;
-	--tertiary: #c5eaff;
-	--tertiary-2: #d3e5ff;
-	--tertiary-3: #e0edff;
-	--filler: #efefef;
-	--filler-2: #e4e4e4;
-	--filler-3: #e2e2e2;
-	--filler-txt: #b3b3b3;
-	--text-primary: #0d1b2a;
-	--text-secondary: #ffffff;
-	--shadow-gray-11: hsl(0, 0%, 13%);
-	--header-height: 80px;
-	--vh100-offset: calc(100vh - var(--header-height));
-	--foreground-rgb: #000000;
-	--background-start-rgb: 214, 219, 220;
-	--background-end-rgb: 255, 255, 255;
-	--gradient-border-radius: 12px;
+  --primary: #800020;
+  --primary-2: #660019;
+  --primary-3: #4d0013;
+  --secondary: #c94060;
+  --secondary-2: #a8303e;
+  --secondary-3: #8b1a2a;
+  --tertiary: #ffe0e5;
+  --tertiary-2: #ffc8d0;
+  --tertiary-3: #ffb0bc;
+  --filler: #efefef;
+  --filler-2: #e4e4e4;
+  --filler-3: #e2e2e2;
+  --filler-txt: #b3b3b3;
+  --text-primary: #0d1b2a;
+  --text-secondary: #ffffff;
+  --header-height: 80px;
+  --vh100-offset: calc(100vh - var(--header-height));
+  --foreground-rgb: #000000;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -376,6 +374,35 @@ label {
 }
 
 .inner-play-button-border-two::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  border-radius: 100px;
+  background: linear-gradient(to bottom, #8b1a2a 20%, transparent 90%);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+
+.inner-play-button-border::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  border-radius: 100px;
+  background: linear-gradient(to bottom, #fff 10%, transparent 50%);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+
+.custom-bg {
+  background: linear-gradient(180deg, #800020 0%, #c94060 100%);
 	content: "";
 	position: absolute;
 	inset: 0;
diff --git a/packages/ui-solid/icons/logo-full-dark.svg b/packages/ui-solid/icons/logo-full-dark.svg
index ada743fb8e..f6f9c0845e 100644
--- a/packages/ui-solid/icons/logo-full-dark.svg
+++ b/packages/ui-solid/icons/logo-full-dark.svg
@@ -1,7 +1,7 @@
 <svg width="103" height="40" viewBox="0 0 103 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M32 0.25H8C3.71979 0.25 0.25 3.71979 0.25 8V32C0.25 36.2802 3.71979 39.75 8 39.75H32C36.2802 39.75 39.75 36.2802 39.75 32V8C39.75 3.71979 36.2802 0.25 32 0.25Z" fill="white"/>
 <path d="M32 0.25H8C3.71979 0.25 0.25 3.71979 0.25 8V32C0.25 36.2802 3.71979 39.75 8 39.75H32C36.2802 39.75 39.75 36.2802 39.75 32V8C39.75 3.71979 36.2802 0.25 32 0.25Z" stroke="#E7EAF0" stroke-width="0.5"/>
-<path d="M20 36C28.8365 36 36 28.8365 36 20C36 11.1635 28.8365 4 20 4C11.1635 4 4 11.1635 4 20C4 28.8365 11.1635 36 20 36Z" fill="#12161F"/>
+<path d="M20 36C28.8365 36 36 28.8365 36 20C36 11.1635 28.8365 4 20 4C11.1635 4 4 11.1635 4 20C4 28.8365 11.1635 36 20 36Z" fill="#800020"/>
 <path d="M20.0001 33C27.1797 33 33 27.1797 33 20.0001C33 12.8203 27.1797 7 20.0001 7C12.8203 7 7 12.8204 7 20.0001C7 27.1797 12.8204 33 20.0001 33Z" fill="#C9CEDB"/>
 <path d="M20.0001 30.0002C25.5229 30.0002 30.0002 25.5229 30.0002 20.0001C30.0002 14.4773 25.5229 10.0002 20.0001 10.0002C14.4773 10.0002 10.0002 14.4773 10.0002 20.0001C10.0002 25.5229 14.4773 30.0002 20.0001 30.0002Z" fill="white"/>
 <path d="M58.416 30.448C53.012 30.448 49.204 26.584 49.204 20.088C49.204 13.704 52.872 9.672 58.472 9.672C63.54 9.672 66.256 12.332 67.096 16.84L63.288 17.036C62.812 14.432 61.216 12.836 58.472 12.836C55.084 12.836 52.984 15.664 52.984 20.088C52.984 24.568 55.14 27.284 58.444 27.284C61.384 27.284 62.952 25.576 63.4 22.72L67.208 22.916C66.424 27.592 63.456 30.448 58.416 30.448ZM74.6451 30.336C71.5091 30.336 69.4371 28.852 69.4371 26.248C69.4371 23.672 71.0331 22.3 74.3091 21.656L79.2651 20.676C79.2651 18.576 78.2851 17.484 76.4091 17.484C74.6451 17.484 73.6931 18.296 73.3571 19.808L69.6891 19.64C70.2771 16.504 72.6851 14.712 76.4091 14.712C80.6651 14.712 82.8491 16.952 82.8491 20.928V26.36C82.8491 27.172 83.1291 27.396 83.6891 27.396H84.1651V30C83.9411 30.056 83.3531 30.112 82.8771 30.112C81.2531 30.112 80.0491 29.524 79.7411 27.676C79.0131 29.272 77.1091 30.336 74.6451 30.336ZM75.3731 27.732C77.7531 27.732 79.2651 26.22 79.2651 23.952V23.112L75.4011 23.896C73.8051 24.204 73.1611 24.876 73.1611 25.912C73.1611 27.088 73.9451 27.732 75.3731 27.732ZM86.8741 34.2V15.048H90.3181L90.3741 17.26C91.2421 15.608 92.8941 14.712 94.8541 14.712C99.1101 14.712 101.21 18.212 101.21 22.524C101.21 26.836 99.0821 30.336 94.8261 30.336C92.9221 30.336 91.2701 29.412 90.4581 27.956V34.2H86.8741ZM93.9861 27.424C96.1701 27.424 97.4861 25.604 97.4861 22.524C97.4861 19.444 96.1701 17.624 93.9861 17.624C91.8021 17.624 90.4581 19.276 90.4581 22.524C90.4581 25.772 91.7741 27.424 93.9861 27.424Z" fill="white"/>
diff --git a/packages/ui-solid/icons/logo-full.svg b/packages/ui-solid/icons/logo-full.svg
index 61f9aa7c5a..9d41e8f244 100644
--- a/packages/ui-solid/icons/logo-full.svg
+++ b/packages/ui-solid/icons/logo-full.svg
@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="103" height="40" viewBox="0 0 103 40" fill="none">
 <rect x="0.25" y="0.25" width="39.5" height="39.5" rx="7.75" fill="white"/>
 <rect x="0.25" y="0.25" width="39.5" height="39.5" rx="7.75" stroke="#E7EAF0" stroke-width="0.5"/>
-<path d="M20 36C28.8365 36 36 28.8365 36 20C36 11.1635 28.8365 4 20 4C11.1635 4 4 11.1635 4 20C4 28.8365 11.1635 36 20 36Z" fill="#4785FF"/>
-<path d="M20.0001 33C27.1797 33 33 27.1797 33 20.0001C33 12.8203 27.1797 7 20.0001 7C12.8203 7 7 12.8204 7 20.0001C7 27.1797 12.8204 33 20.0001 33Z" fill="#ADC9FF"/>
+<path d="M20 36C28.8365 36 36 28.8365 36 20C36 11.1635 28.8365 4 20 4C11.1635 4 4 11.1635 4 20C4 28.8365 11.1635 36 20 36Z" fill="#800020"/>
+<path d="M20.0001 33C27.1797 33 33 27.1797 33 20.0001C33 12.8203 27.1797 7 20.0001 7C12.8203 7 7 12.8204 7 20.0001C7 27.1797 12.8204 33 20.0001 33Z" fill="#D4879A"/>
 <path d="M20.0001 30.0002C25.5229 30.0002 30.0002 25.5229 30.0002 20.0001C30.0002 14.4773 25.5229 10.0002 20.0001 10.0002C14.4773 10.0002 10.0002 14.4773 10.0002 20.0001C10.0002 25.5229 14.4773 30.0002 20.0001 30.0002Z" fill="white"/>
 <path d="M58.416 30.448C53.012 30.448 49.204 26.584 49.204 20.088C49.204 13.704 52.872 9.672 58.472 9.672C63.54 9.672 66.256 12.332 67.096 16.84L63.288 17.036C62.812 14.432 61.216 12.836 58.472 12.836C55.084 12.836 52.984 15.664 52.984 20.088C52.984 24.568 55.14 27.284 58.444 27.284C61.384 27.284 62.952 25.576 63.4 22.72L67.208 22.916C66.424 27.592 63.456 30.448 58.416 30.448ZM74.6451 30.336C71.5091 30.336 69.4371 28.852 69.4371 26.248C69.4371 23.672 71.0331 22.3 74.3091 21.656L79.2651 20.676C79.2651 18.576 78.2851 17.484 76.4091 17.484C74.6451 17.484 73.6931 18.296 73.3571 19.808L69.6891 19.64C70.2771 16.504 72.6851 14.712 76.4091 14.712C80.6651 14.712 82.8491 16.952 82.8491 20.928V26.36C82.8491 27.172 83.1291 27.396 83.6891 27.396H84.1651V30C83.9411 30.056 83.3531 30.112 82.8771 30.112C81.2531 30.112 80.0491 29.524 79.7411 27.676C79.0131 29.272 77.1091 30.336 74.6451 30.336ZM75.3731 27.732C77.7531 27.732 79.2651 26.22 79.2651 23.952V23.112L75.4011 23.896C73.8051 24.204 73.1611 24.876 73.1611 25.912C73.1611 27.088 73.9451 27.732 75.3731 27.732ZM86.8741 34.2V15.048H90.3181L90.3741 17.26C91.2421 15.608 92.8941 14.712 94.8541 14.712C99.1101 14.712 101.21 18.212 101.21 22.524C101.21 26.836 99.0821 30.336 94.8261 30.336C92.9221 30.336 91.2701 29.412 90.4581 27.956V34.2H86.8741ZM93.9861 27.424C96.1701 27.424 97.4861 25.604 97.4861 22.524C97.4861 19.444 96.1701 17.624 93.9861 17.624C91.8021 17.624 90.4581 19.276 90.4581 22.524C90.4581 25.772 91.7741 27.424 93.9861 27.424Z" fill="#12161F"/>
 </svg>
\ No newline at end of file
diff --git a/packages/ui-solid/icons/logo.svg b/packages/ui-solid/icons/logo.svg
index 6ff67855db..a534eb5a57 100644
--- a/packages/ui-solid/icons/logo.svg
+++ b/packages/ui-solid/icons/logo.svg
@@ -1,7 +1,7 @@
 <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect x="0.5" y="0.5" width="79" height="79" rx="15.5" fill="white"/>
 <rect x="0.5" y="0.5" width="79" height="79" rx="15.5" stroke="#E7EAF0"/>
-<path d="M40 72C57.6731 72 72 57.6731 72 40C72 22.3269 57.6731 8 40 8C22.3269 8 8 22.3269 8 40C8 57.6731 22.3269 72 40 72Z" fill="#4785FF"/>
-<path d="M40.0001 66C54.3595 66 66 54.3595 66 40.0001C66 25.6405 54.3595 14 40.0001 14C25.6405 14 14 25.6408 14 40.0001C14 54.3595 25.6408 66 40.0001 66Z" fill="#ADC9FF"/>
+<path d="M40 72C57.6731 72 72 57.6731 72 40C72 22.3269 57.6731 8 40 8C22.3269 8 8 22.3269 8 40C8 57.6731 22.3269 72 40 72Z" fill="#800020"/>
+<path d="M40.0001 66C54.3595 66 66 54.3595 66 40.0001C66 25.6405 54.3595 14 40.0001 14C25.6405 14 14 25.6408 14 40.0001C14 54.3595 25.6408 66 40.0001 66Z" fill="#D4879A"/>
 <path d="M39.9999 60C51.0455 60 60 51.0455 60 39.9998C60 28.9542 51.0455 20 39.9999 20C28.9542 20 20 28.9542 20 39.9998C20 51.0455 28.9542 60 39.9999 60Z" fill="white"/>
 </svg>
diff --git a/packages/ui/src/components/icons/Logo.tsx b/packages/ui/src/components/icons/Logo.tsx
index 2235462ba7..927d7565aa 100644
--- a/packages/ui/src/components/icons/Logo.tsx
+++ b/packages/ui/src/components/icons/Logo.tsx
@@ -43,6 +43,43 @@ export const Logo = ({
           strokeWidth="0.5"
           rx="7.75"
         ></rect> */}
+        <path
+          fill="#800020"
+          d="M20 36c8.837 0 16-7.163 16-16 0-8.836-7.163-16-16-16-8.836 0-16 7.164-16 16 0 8.837 7.164 16 16 16z"
+        ></path>
+        <path
+          fill="#D4879A"
+          d="M20 33c7.18 0 13-5.82 13-13S27.18 7 20 7 7 12.82 7 20s5.82 13 13 13z"
+        ></path>
+        <path
+          fill="#fff"
+          d="M20 30c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10z"
+        ></path>
+        <path
+          fill={white ? "#ffffff" : "#12161F"}
+          d="M58.416 30.448c-5.404 0-9.212-3.864-9.212-10.36 0-6.384 3.668-10.416 9.268-10.416 5.068 0 7.784 2.66 8.624 7.168l-3.808.196c-.476-2.604-2.072-4.2-4.816-4.2-3.388 0-5.488 2.828-5.488 7.252 0 4.48 2.156 7.196 5.46 7.196 2.94 0 4.508-1.708 4.956-4.564l3.808.196c-.784 4.676-3.752 7.532-8.792 7.532zm16.23-.112c-3.137 0-5.209-1.484-5.209-4.088 0-2.576 1.596-3.948 4.872-4.592l4.956-.98c0-2.1-.98-3.192-2.856-3.192-1.764 0-2.716.812-3.052 2.324l-3.668-.168c.588-3.136 2.996-4.928 6.72-4.928 4.256 0 6.44 2.24 6.44 6.216v5.432c0 .812.28 1.036.84 1.036h.476V30c-.224.056-.812.112-1.288.112-1.624 0-2.828-.588-3.136-2.436-.728 1.596-2.632 2.66-5.096 2.66zm.727-2.604c2.38 0 3.892-1.512 3.892-3.78v-.84l-3.864.784c-1.596.308-2.24.98-2.24 2.016 0 1.176.784 1.82 2.212 1.82zM86.874 34.2V15.048h3.444l.056 2.212c.868-1.652 2.52-2.548 4.48-2.548 4.256 0 6.356 3.5 6.356 7.812s-2.128 7.812-6.384 7.812c-1.904 0-3.556-.924-4.368-2.38V34.2h-3.584zm7.112-6.776c2.184 0 3.5-1.82 3.5-4.9s-1.316-4.9-3.5-4.9-3.528 1.652-3.528 4.9 1.316 4.9 3.528 4.9z"
+        ></path>
+      </svg>
+      {showVersion && (
+        <span
+          className={`text-[10px] font-medium ${
+            white ? "text-white" : "text-gray-500"
+          }`}
+        >
+          v{process.env.appVersion}
+        </span>
+      )}
+      {showBeta && (
+        <span
+          className={`text-[10px] font-medium min-w-[52px] ${
+            white ? "text-white" : "text-gray-500"
+          }`}
+        >
+          Beta v{process.env.appVersion}
+        </span>
+      )}
+    </div>
+  );
 				<path
 					fill="#4785FF"
 					d="M20 36c8.837 0 16-7.163 16-16 0-8.836-7.163-16-16-16-8.836 0-16 7.164-16 16 0 8.837 7.164 16 16 16z"
diff --git a/packages/ui/src/components/icons/LogoBadge.tsx b/packages/ui/src/components/icons/LogoBadge.tsx
index 9476402200..afc0ad1989 100644
--- a/packages/ui/src/components/icons/LogoBadge.tsx
+++ b/packages/ui/src/components/icons/LogoBadge.tsx
@@ -1,4 +1,26 @@
 export const LogoBadge = ({ className }: { className: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      fill="none"
+      viewBox="0 0 40 40"
+    >
+      <rect width="40" height="40" fill="#fff" rx="8"></rect>
+      <path
+        fill="#800020"
+        d="M20 36c8.837 0 16-7.163 16-16 0-8.836-7.163-16-16-16-8.836 0-16 7.164-16 16 0 8.837 7.164 16 16 16z"
+      ></path>
+      <path
+        fill="#D4879A"
+        d="M20 33c7.18 0 13-5.82 13-13S27.18 7 20 7 7 12.82 7 20s5.82 13 13 13z"
+      ></path>
+      <path
+        fill="#fff"
+        d="M20 30c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10z"
+      ></path>
+    </svg>
+  );
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/ui/style/tailwind.config.js b/packages/ui/style/tailwind.config.js
index d91300eff7..5153e5952a 100644
--- a/packages/ui/style/tailwind.config.js
+++ b/packages/ui/style/tailwind.config.js
@@ -1,3 +1,150 @@
+module.exports = function (app, options) {
+  const config = {
+    content: [
+      `../../apps/*/pages/**/*.{js,ts,jsx,tsx,mdx}`,
+      `../../apps/*/components/**/*.{js,ts,jsx,tsx,mdx}`,
+      `../../apps/*/app/**/*.{js,ts,jsx,tsx,mdx}`,
+      `../../apps/*/src/**/*.{js,ts,jsx,tsx,mdx}`,
+      "../../packages/*/src/**/*.{ts,tsx,html,stories.tsx}",
+    ],
+    theme: {
+      fontWeight: {
+        thin: "300",
+        hairline: "300",
+        extralight: "300",
+        light: "300",
+        normal: "400",
+        medium: "500",
+        semibold: "500",
+        bold: "600",
+        extrabold: "600",
+        "extra-bold": "600",
+      },
+      extend: {
+        colors: {
+          border: "hsl(var(--border))",
+          input: "hsl(var(--input))",
+          ring: "hsl(var(--ring))",
+          background: "hsl(var(--background))",
+          foreground: "hsl(var(--foreground))",
+          primary: {
+            DEFAULT: "var(--primary)",
+            foreground: "hsl(var(--primary-foreground))",
+          },
+          "primary-2": "var(--primary-2)",
+          "primary-3": "var(--primary-3)",
+          secondary: {
+            DEFAULT: "var(--secondary)",
+            foreground: "var(--secondary-foreground)",
+          },
+          "secondary-2": "var(--secondary-2)",
+          "secondary-3": "var(--secondary-3)",
+          tertiary: "var(--tertiary)",
+          "tertiary-2": "var(--tertiary-2)",
+          "tertiary-3": "var(--tertiary-3)",
+          filler: "var(--filler)",
+          "filler-2": "var(--filler-2)",
+          "filler-3": "var(--filler-3)",
+          "filler-txt": "var(--filler-txt)",
+          "hover-1": "var(--hover-1)",
+          "hover-2": "var(--hover-2)",
+          destructive: {
+            DEFAULT: "hsl(var(--destructive))",
+            foreground: "hsl(var(--destructive-foreground))",
+          },
+          muted: {
+            DEFAULT: "hsl(var(--muted))",
+            foreground: "hsl(var(--muted-foreground))",
+          },
+          accent: {
+            DEFAULT: "hsl(var(--accent))",
+            foreground: "hsl(var(--accent-foreground))",
+          },
+          popover: {
+            DEFAULT: "hsl(var(--popover))",
+            foreground: "hsl(var(--popover-foreground))",
+          },
+          card: {
+            DEFAULT: "hsl(var(--card))",
+            foreground: "hsl(var(--card-foreground))",
+          },
+          gray: {
+            50: "#FFFFFF",
+            100: "#F7F8FA",
+            200: "#E7EAF0",
+            300: "#C9CEDB",
+            400: "#8991A3",
+            500: "#12161F",
+          },
+          "black-transparent": {
+            5: "rgba(18,22,31,0.05)",
+            10: "rgba(18,22,31,0.1)",
+            20: "rgba(18,22,31,0.2)",
+            40: "rgba(18,22,31,0.4)",
+            60: "rgba(18,22,31,0.6)",
+            80: "rgba(18,22,31,0.8)",
+          },
+          "white-transparent": {
+            5: "rgba(255,255,255,0.05)",
+            10: "rgba(255,255,255,0.1)",
+            20: "rgba(255,255,255,0.2)",
+            40: "rgba(255,255,255,0.4)",
+          },
+          blue: {
+            50: "#FFE8EC",
+            100: "#D4879A",
+            200: "#B05068",
+            300: "#800020",
+            400: "#660019",
+          },
+          "blue-transparent": {
+            10: "rgba(128,0,32,0.1)",
+            20: "rgba(128,0,32,0.2)",
+          },
+          red: {
+            50: "#FFEBEE",
+            100: "#FFADBB",
+            200: "#FF8599",
+            300: "#FF4766",
+            400: "#E03F5A",
+          },
+          "red-transparent": {
+            20: "rgba(255,71,102,0.2)",
+          },
+        },
+        backgroundImage: {
+          "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+          "gradient-conic":
+            "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+        },
+        fontFamily: {
+          primary: ['var(--font-geist-sans)', 'sans-serif'],
+        },
+        keyframes: {
+          flyEmoji: {
+            "0%": {
+              transform: "translateY(0) scale(1)",
+              opacity: "0.7",
+            },
+            "100%": {
+              transform: "translateY(-150px) scale(2.5)",
+              opacity: "0",
+            },
+          },
+        },
+        animation: {
+          flyEmoji: "flyEmoji 1.5s forwards",
+        },
+      },
+    },
+    plugins: [
+      require("tailwindcss-animate"),
+      require("@tailwindcss/typography"),
+      require("@kobalte/tailwindcss"),
+      require("tailwind-scrollbar"),
+    ],
+  };
+  return config;
 module.exports = (__app, _options) => {
 	// Function to generate color scales for Radix colors
 	function getColorScale(name, alpha = false) {