diff --git a/src/components/common/AchievementModal.tsx b/src/components/common/AchievementModal.tsx
index a33ddecc..d761fc36 100644
--- a/src/components/common/AchievementModal.tsx
+++ b/src/components/common/AchievementModal.tsx
@@ -103,10 +103,10 @@ export const AchievementModal: React.FC<{
             />
           </Tilt>
           <div className="inline-flex flex-col flex-1 min-w-0 w-full space-y-1">
-            <span className="capitalize text-4xl font-medium truncate">
+            <span className="capitalize text-black text-4xl font-medium truncate">
               {group.info.title} {achievement && `#${achievement.tokenId}`}
             </span>
-            <span className="text-lg text-gray-100 capitalize truncate">
+            <span className="text-lg text-black capitalize truncate">
               {
                 (achievement || achievementMintable || achievementComming)!.info
                   .description
diff --git a/src/components/common/CharacterCard.tsx b/src/components/common/CharacterCard.tsx
index c92b43c5..41f11c5a 100644
--- a/src/components/common/CharacterCard.tsx
+++ b/src/components/common/CharacterCard.tsx
@@ -51,7 +51,7 @@ export const CharacterCard: React.FC<{
   return (
     <span
       className={cn(
-        "border-gray-100 rounded-lg text-sm block cursor-default",
+        "border-border border rounded-lg text-sm block cursor-default",
         style === "flat" ? "" : "p-4 bg-white shadow-xl",
         simple ? "space-y-1" : "space-y-2",
       )}
diff --git a/src/components/common/ConnectButton.tsx b/src/components/common/ConnectButton.tsx
index 79c4b583..410f9597 100644
--- a/src/components/common/ConnectButton.tsx
+++ b/src/components/common/ConnectButton.tsx
@@ -278,7 +278,7 @@ export const ConnectButton: React.FC<{
                   }
                   dropdown={
                     <div
-                      className={`text-gray-600 bg-white rounded-lg ring-1 ring-zinc-100 min-w-[140px] shadow-md py-2 ${
+                      className={`text-gray-600 bg-white rounded-lg ring-1 ring-border min-w-[140px] shadow-md py-2 ${
                         size === "base" ? "text-base" : "text-sm"
                       } mt-1`}
                     >
diff --git a/src/components/common/Logo.tsx b/src/components/common/Logo.tsx
index d940a4dc..559f36ea 100644
--- a/src/components/common/Logo.tsx
+++ b/src/components/common/Logo.tsx
@@ -43,6 +43,7 @@ export const Logo: React.FC<{
             width: width || 100,
             height: height || 100,
           }}
+          className="xlog-lottie-logo"
         />
       )
   }
diff --git a/src/components/dashboard/PagesManagerMenu.tsx b/src/components/dashboard/PagesManagerMenu.tsx
index 6ab624c1..62a632cf 100644
--- a/src/components/dashboard/PagesManagerMenu.tsx
+++ b/src/components/dashboard/PagesManagerMenu.tsx
@@ -166,7 +166,7 @@ export const PagesManagerMenu: FC<{
   }, [])
 
   return (
-    <Menu.Items className="text-sm absolute z-20 right-0 bg-white shadow-modal rounded-lg overflow-hidden py-2 w-64">
+    <Menu.Items className="text-sm absolute z-20 right-0 bg-white shadow-modal rounded-lg overflow-hidden py-2 w-64 ring-1 ring-border">
       {items.map((item) => {
         return (
           <Menu.Item key={item.text}>
diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx
index 87597982..1678f0d5 100644
--- a/src/components/site/SiteHeader.tsx
+++ b/src/components/site/SiteHeader.tsx
@@ -259,7 +259,7 @@ export const SiteHeader: React.FC<{
                         </Button>
                       }
                       dropdown={
-                        <div className="text-gray-600 bg-white rounded-lg ring-1 ring-zinc-100 shadow-md py-2 text-sm">
+                        <div className="text-gray-600 bg-white rounded-lg ring-1 ring-border shadow-md py-2 text-sm">
                           {moreMenuItems.map((item) => {
                             return (
                               <UniLink
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
index 052f5b66..f8f2d111 100644
--- a/src/css/tailwind.css
+++ b/src/css/tailwind.css
@@ -21,6 +21,10 @@
   border-color: var(--border-color);
 }
 
+html.dark {
+  color-scheme: dark;
+}
+
 ::-webkit-scrollbar {
   width: 10px;
   height: 10px;
@@ -385,3 +389,7 @@ textarea.input {
   border-right-color: currentColor;
   @apply animate-spin;
 }
+
+.xlog-lottie-logo path[fill="rgb(0,0,0)"] {
+  @apply fill-current;
+}