diff --git a/src/app/globals.css b/src/app/globals.css
index 07b2626..fd4ffed 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -204,122 +204,6 @@
   }
 }
 
-:root {
-  --relay-kit-font-family: "Plus Jakarta Sans";
-  --relay-kit-primary: #7132f5;
-  --relay-kit-primary-hover: #7132f5e5;
-  --relay-kit-primary-disabled: #7032f59c;
-  --relay-kit-subtle-bg: #f5f3ff;
-  --relay-kit-subtle-border: #e9e5ff;
-  --relay-kit-text: #1a1523;
-  --relay-kit-text-subtle: #64618b;
-  --relay-kit-text-error: #dc2626;
-  --relay-kit-text-success: #16a34a;
-
-  --relay-kit-button-secondary-bg: #f5f3ff;
-  --relay-kit-button-secondary-hover: #e9e5ff;
-
-  --relay-kit-input-bg: #f5f3ff;
-  --relay-kit-input-radius: 16px;
-
-  --relay-kit-skeleton-bg: #f5f3ff;
-
-  --relay-kit-dropdown-bg: #ffffff;
-  --relay-kit-dropdown-radius: 16px;
-
-  --relay-kit-widget-bg: #ffffff;
-  --relay-kit-widget-radius: 16px;
-  --relay-kit-widget-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
-  --relay-kit-widget-card-bg: #f8f7ff;
-  --relay-kit-widget-card-radius: 16px;
-  --relay-kit-widget-selector-bg: #f5f3ff;
-  --relay-kit-widget-selector-hover: #e9e5ff;
-
-  --relay-kit-widget-swap-border: #dedbf0;
-  --relay-kit-widget-swap-radius: 16px;
-
-  --relay-kit-modal-bg: #ffffff;
-  --relay-kit-modal-radius: 16px;
-}
-
-.dark {
-  --relay-kit-subtle-bg: #6451aa26;
-  --relay-kit-subtle-border: #261e2f;
-
-  --relay-kit-text: #ffffff;
-  --relay-kit-text-subtle: #ffffff80;
-  --relay-kit-text-error: #ff4d4d;
-  --relay-kit-text-success: #4caf50;
-
-  --relay-kit-button-secondary-bg: #261e2f;
-  --relay-kit-button-secondary-hover: #211a29;
-
-  --relay-kit-input-bg: #261e2f;
-
-  --relay-kit-skeleton-bg: #261e2f;
-  --relay-kit-dropdown-bg: #211a29ad;
-
-  --relay-kit-widget-bg: #2b2a4e;
-  --relay-kit-widget-card-bg: red;
-  --relay-kit-widget-selector-bg: #211a29ad;
-  --relay-kit-widget-selector-hover: #211a29;
-
-  --relay-kit-widget-swap-border: #161c33;
-
-  --relay-kit-modal-bg: #160f1f;
-}
-
-/* Relay UI Kit CSS overrides (properties we cannot change through the theme) */
-
-.relay-bg_widget-selector-background {
-  border-radius: 999px !important;
-}
-
-.relay-kit-reset button {
-  border-radius: 999px !important;
-}
-
-.relay-kit-reset button[aria-label="Swap"],
-.relay-kit-reset button[aria-label="Connect wallet"] {
-  padding-top: 20px !important;
-  padding-bottom: 20px !important;
-  font-size: 20px !important;
-}
-
-div[type="button"] > button {
-  padding: 22px !important;
-  padding-left: 8px !important;
-  padding-right: 12px !important;
-}
-
-.relay-kit-reset img {
-  border-radius: 999px !important;
-  width: 32px !important;
-}
-
-.relay-bg_secondary-button-background {
-  padding: 12px !important;
-  padding-left: 16px !important;
-  padding-right: 16px !important;
-}
-
-.relay-bg_secondary-button-background > div {
-  font-weight: bold !important;
-  color: var(--ink-text-on-secondary) !important;
-}
-
-.relay-h_24 {
-  height: 32px !important;
-}
-
-.relay-w_24 {
-  width: 32px !important;
-}
-
-.relay-fw_500:not(#\#):not(#\#):not(#\#):not(#\#) {
-  font-weight: 700 !important;
-}
-
 /* A fix that must be applied to all h- so that they don't cut off the text */
 .ink\:text-h1 {
   margin-top: -4px;
diff --git a/src/components/RelayKitUI/RelayKitUI.css b/src/components/RelayKitUI/RelayKitUI.css
new file mode 100644
index 0000000..98ec73f
--- /dev/null
+++ b/src/components/RelayKitUI/RelayKitUI.css
@@ -0,0 +1,92 @@
+:root {
+  --relay-kit-font-family: "Plus Jakarta Sans";
+  --relay-kit-primary: var(--ink-button-primary);
+  --relay-kit-primary-hover: var(--ink-button-primary-hover);
+  --relay-kit-primary-disabled: var(--ink-button-secondary);
+  --relay-kit-subtle-bg: var(--ink-background-dark);
+  --relay-kit-subtle-border: var(--ink-background-dark);
+  --relay-kit-text: var(--ink-text-default);
+  --relay-kit-text-subtle: var(--ink-text-secondary);
+  --relay-kit-text-error: var(--ink-status-error);
+  --relay-kit-text-success: var(--ink-status-success);
+
+  --relay-kit-button-secondary-bg: var(--ink-button-secondary);
+  --relay-kit-button-secondary-hover: var(--ink-button-secondary-hover);
+
+  --relay-kit-input-bg: var(--ink-button-secondary);
+  --relay-kit-input-radius: var(--ink-radius-full);
+
+  --relay-kit-skeleton-bg: var(--ink-background-container);
+
+  --relay-kit-dropdown-bg: var(--ink-background-primary);
+  --relay-kit-dropdown-radius: var(--ink-radius-sm);
+
+  --relay-kit-widget-bg: color-mix(
+    in srgb,
+    var(--ink-button-primary) 8%,
+    var(--ink-background-dark)
+  );
+  --relay-kit-widget-radius: var(--ink-radius-sm);
+  --relay-kit-widget-shadow: 0px 4px 30px var(--ink-background-light);
+  --relay-kit-widget-card-bg: var(--ink-background-container);
+  --relay-kit-widget-card-radius: var(--ink-radius-sm);
+  --relay-kit-widget-selector-bg: var(--ink-background-container);
+  --relay-kit-widget-selector-hover: var(--ink-background-container);
+
+  --relay-kit-widget-swap-border: var(--ink-button-secondary);
+  --relay-kit-widget-swap-radius: var(--ink-radius-sm);
+
+  --relay-kit-modal-bg: var(--ink-background-light);
+  --relay-kit-modal-radius: var(--ink-radius-sm);
+}
+
+:root .relay-kit-reset {
+  --relay-colors-button-disabled-color: var(--ink-text-on-secondary-disabled);
+}
+
+/* Relay UI Kit CSS overrides (properties we cannot change through the theme) */
+
+.relay-bg_widget-selector-background {
+  border-radius: 999px !important;
+}
+
+.relay-kit-reset button {
+  border-radius: 999px !important;
+}
+
+.relay-kit-reset button[aria-label="Swap"],
+.relay-kit-reset button[aria-label="Connect wallet"] {
+  padding-top: 20px !important;
+  padding-bottom: 20px !important;
+  font-size: 20px !important;
+}
+
+div[type="button"] > button {
+  padding: 22px !important;
+  padding-left: 8px !important;
+  padding-right: 12px !important;
+}
+
+.relay-kit-reset img {
+  border-radius: 999px !important;
+  width: 32px !important;
+}
+
+.relay-bg_secondary-button-background {
+  padding: var(--ink-spacing-1) var(--ink-spacing-2) !important;
+}
+
+.relay-h_24 {
+  height: 32px !important;
+}
+
+.relay-w_24 {
+  width: 32px !important;
+}
+
+/** 
+Fixes transparency `Search for a chain` input in the modals.
+*/
+.relay-snap-align_start {
+  background-color: var(--relay-colors-modal-background);
+}
diff --git a/src/components/RelayKitUI.tsx b/src/components/RelayKitUI/RelayKitUI.tsx
similarity index 98%
rename from src/components/RelayKitUI.tsx
rename to src/components/RelayKitUI/RelayKitUI.tsx
index dd02f49..71d74d6 100644
--- a/src/components/RelayKitUI.tsx
+++ b/src/components/RelayKitUI/RelayKitUI.tsx
@@ -8,6 +8,7 @@ import { RelayLogo } from "@/components/icons/RelayLogo";
 import { EXTERNAL_LINKS, Link } from "@/routing";
 
 import "@reservoir0x/relay-kit-ui/styles.css";
+import "./RelayKitUI.css";
 
 export const RelayKitUI: React.FC = () => {
   const { openConnectModal } = useConnectModal();
diff --git a/src/components/RelayKitUI/index.ts b/src/components/RelayKitUI/index.ts
new file mode 100644
index 0000000..f69090b
--- /dev/null
+++ b/src/components/RelayKitUI/index.ts
@@ -0,0 +1 @@
+export * from "./RelayKitUI";