diff --git a/src/components/common/Comment.tsx b/src/components/common/Comment.tsx
index 07a9ee54..bb516157 100644
--- a/src/components/common/Comment.tsx
+++ b/src/components/common/Comment.tsx
@@ -175,7 +175,7 @@ export const Comment: React.FC<{
                       subdomain: comment.character.handle,
                     })
                   }
-                  className="font-medium text-theme-color"
+                  className="font-medium text-accent"
                 >
                   {comment?.character?.metadata?.content?.name}
                 </UniLink>{" "}
diff --git a/src/components/common/ConnectButton.tsx b/src/components/common/ConnectButton.tsx
index 02593517..67b4711d 100644
--- a/src/components/common/ConnectButton.tsx
+++ b/src/components/common/ConnectButton.tsx
@@ -95,7 +95,7 @@ export const ConnectButton: React.FC<{
               if (!mounted || !account || !chain) {
                 return (
                   <Button
-                    className="text-theme-color"
+                    className="text-accent"
                     onClick={openConnectModal}
                     style={{ height: "30px" }}
                     variant={variant || "primary"}
diff --git a/src/components/dashboard/DashboardLayout.tsx b/src/components/dashboard/DashboardLayout.tsx
index 4d565ce5..c7ed36cd 100644
--- a/src/components/dashboard/DashboardLayout.tsx
+++ b/src/components/dashboard/DashboardLayout.tsx
@@ -113,7 +113,7 @@ export function DashboardLayout({
                 subdomain,
                 domain: userSite.data?.[0]?.custom_domain,
               })}
-              className="space-x-2 border rounded-lg bg-gray-100 border-gray-200 text-gray-500 hover-text-theme-color flex w-full h-12 items-center justify-center transition-colors"
+              className="space-x-2 border rounded-lg bg-gray-100 border-gray-200 text-gray-500 hover:text-accent flex w-full h-12 items-center justify-center transition-colors"
             >
               <span className="i-bi:box-arrow-up-right"></span>
               <span>View Site</span>
diff --git a/src/components/main/MainLayout.tsx b/src/components/main/MainLayout.tsx
index 0f4be374..fb725ccc 100644
--- a/src/components/main/MainLayout.tsx
+++ b/src/components/main/MainLayout.tsx
@@ -32,8 +32,8 @@ export function MainLayout({
           <div className="space-x-14 text-zinc-500 flex">
             {tabs?.map((tab, index) => (
               <Link
-                activeClass="text-theme-color"
-                className="cursor-pointer items-center hidden sm:flex hover-text-theme-color"
+                activeClass="text-accent"
+                className="cursor-pointer items-center hidden sm:flex hover:text-accent"
                 to={tab}
                 spy={true}
                 smooth={true}
@@ -45,7 +45,7 @@ export function MainLayout({
             ))}
             <UniLink
               href={GITHUB_LINK}
-              className="items-center hidden sm:flex hover-text-theme-color"
+              className="items-center hidden sm:flex hover:text-accent"
             >
               GitHub
             </UniLink>
@@ -64,7 +64,7 @@ export function MainLayout({
             )}
             {DISCORD_LINK && (
               <UniLink className="flex items-center" href={DISCORD_LINK}>
-                <span className="inline-block i-mdi-discord text-2xl hover-text-theme-color"></span>
+                <span className="inline-block i-mdi-discord text-2xl hover:text-accent"></span>
               </UniLink>
             )}
           </span>
@@ -74,7 +74,7 @@ export function MainLayout({
               href={getSiteLink({
                 subdomain: "blog",
               })}
-              className="hover-text-theme-color"
+              className="hover:text-accent"
             >
               {APP_NAME}
             </UniLink>
diff --git a/src/components/site/PostFooter.tsx b/src/components/site/PostFooter.tsx
index 260be6fa..c7dcc8d6 100644
--- a/src/components/site/PostFooter.tsx
+++ b/src/components/site/PostFooter.tsx
@@ -297,7 +297,7 @@ export const PostFooter: React.FC<{
           <div className="p-5">
             Your like has been permanently stored on the blockchain, view them{" "}
             <UniLink
-              className="text-theme-color"
+              className="text-accent"
               href={`${CSB_SCAN}/tx/${isLike.data?.list?.[0]?.transactionHash}`}
             >
               here
@@ -318,7 +318,7 @@ export const PostFooter: React.FC<{
             Your minting has been permanently stored on the blockchain, view
             them{" "}
             <UniLink
-              className="text-theme-color"
+              className="text-accent"
               href={`${CSB_SCAN}/tx/${isMint.data?.list?.[0]?.transactionHash}`}
             >
               here
diff --git a/src/components/site/SiteFooter.tsx b/src/components/site/SiteFooter.tsx
index 3a185af9..742b4b9c 100644
--- a/src/components/site/SiteFooter.tsx
+++ b/src/components/site/SiteFooter.tsx
@@ -13,13 +13,13 @@ export const SiteFooter: React.FC<{
         <div className="max-w-screen-md mx-auto px-5 py-10 text-xs">
           <p className="font-medium text-base">
             &copy;{" "}
-            <UniLink href="/" className="hover-text-theme-color">
+            <UniLink href="/" className="hover:text-accent">
               {site?.username}
             </UniLink>{" "}
             · Powered by{" "}
             <UniLink
               href={`https://${OUR_DOMAIN}`}
-              className="hover-text-theme-color"
+              className="hover:text-accent"
             >
               {APP_NAME}
             </UniLink>
diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx
index 43a4fa8e..51a3edb2 100644
--- a/src/components/site/SiteHeader.tsx
+++ b/src/components/site/SiteHeader.tsx
@@ -41,7 +41,7 @@ const HeaderLink: React.FC<{ link: HeaderLinkType }> = ({ link }) => {
       onClick={link.onClick}
       className={clsx(
         `h-10 flex items-center border-b-2 space-x-1 hover:border-gray-500 hover:text-gray-700`,
-        active ? `text-theme-color border-accent` : `border-transparent`,
+        active ? `text-accent border-accent` : `border-transparent`,
       )}
     >
       {link.icon && <span>{link.icon}</span>}
@@ -222,7 +222,7 @@ export const SiteHeader: React.FC<{
                 <Button
                   variant="text"
                   onClick={handleClickSubscribe}
-                  className="space-x-1 group align-middle text-theme-color mx-5"
+                  className="space-x-1 group align-middle text-accent mx-5"
                   isLoading={
                     subscription.data
                       ? unsubscribeFromSite.isLoading ||
diff --git a/src/components/ui/EditorToolbar.tsx b/src/components/ui/EditorToolbar.tsx
index 13b70d35..d15bb454 100644
--- a/src/components/ui/EditorToolbar.tsx
+++ b/src/components/ui/EditorToolbar.tsx
@@ -40,7 +40,7 @@ export const EditorToolbar: FC<EditorToolbarProps> = ({
             className={clsx(
               "w-7 h-7 transition-colors text-lg border border-transparent rounded flex items-center justify-center",
               active
-                ? `bg-theme-color text-white border-theme-color`
+                ? `text-white bg-accent border-accent`
                 : disabled
                 ? `text-zinc-400 cursor-not-allowed`
                 : `text-zinc-400 group-hover:text-zinc-600 hover:text-zinc-500 hover:border-zinc-300 hover:bg-zinc-100`,
diff --git a/src/css/prose.css b/src/css/prose.css
index 945fcef7..0bf1d975 100644
--- a/src/css/prose.css
+++ b/src/css/prose.css
@@ -59,7 +59,7 @@
 }
 
 .prose a {
-  @apply text-theme-color-dark;
+  @apply text-accent-dark;
   @apply hover:underline;
 }
 
@@ -103,7 +103,7 @@
 }
 
 .prose .callout {
-  @apply border border-zinc-100 bg-zinc-50 text-theme-color rounded-xl p-5 md:p-8 font-normal;
+  @apply border border-zinc-100 bg-zinc-50 text-accent rounded-xl p-5 md:p-8 font-normal;
   @apply -mx-5 md:-mx-8 my-10;
 }
 
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
index 0f230d39..2099ac5e 100644
--- a/src/css/tailwind.css
+++ b/src/css/tailwind.css
@@ -71,19 +71,19 @@ body {
 .button.is-primary {
   --shadow-color-button: var(--theme-color-dark);
   @apply text-white;
-  fill: var(--theme-color);
-  background-color: var(--theme-color);
+  @apply fill-accent;
+  @apply bg-accent;
   opacity: 0.9;
 }
 
 .button.is-primary:hover {
   opacity: 1;
-  background-color: var(--theme-color);
+  @apply bg-accent;
 }
 
 .button.is-primary:focus {
   opacity: 1;
-  background-color: var(--theme-color);
+  @apply bg-accent;
 }
 
 .button.is-secondary {
@@ -183,7 +183,7 @@ body {
 }
 
 .input:focus {
-  border-color: var(--theme-color);
+  @apply border-accent;
 }
 
 .input.is-block {
@@ -250,27 +250,7 @@ textarea.input {
   @apply underline;
 }
 
-.text-theme-color {
-  color: var(--theme-color);
-}
-
-.hover-text-theme-color:hover {
-  color: var(--theme-color);
-}
-
-.border-theme-color {
-  border-color: var(--theme-color);
-}
-
-.bg-theme-color {
-  background-color: var(--theme-color);
-}
-
-.text-theme-color-dark {
-  color: var(--theme-color-dark);
-}
-
 ::selection {
-  background-color: var(--theme-color);
+  @apply bg-accent;
   color: #fff;
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 769ed278..6112c9cf 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -126,7 +126,7 @@ export default function Home({ region }: { region: string | null }) {
             </h3>
             <div className="my-10 sm:my-16">
               <Button
-                className="text-theme-color w-80 h-10"
+                className="text-accent w-80 h-10"
                 onClick={() =>
                   addressIn ? router.push("/dashboard") : openConnectModal?.()
                 }
@@ -232,7 +232,7 @@ export default function Home({ region }: { region: string | null }) {
             {addressIn ? (
               <UniLink
                 href="/dashboard"
-                className="text-theme-color inline-flex items-center space-x-2"
+                className="text-accent inline-flex items-center space-x-2"
               >
                 <Button size="xl">Try {APP_NAME} Today</Button>
               </UniLink>
diff --git a/tailwind.config.js b/tailwind.config.js
index 0ed3f422..dd02fcf3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,6 +11,7 @@ module.exports = {
       colors: {
         border: "var(--border-color)",
         accent: "var(--theme-color)",
+        "accent-dark": "var(--theme-color-dark)",
       },
       spacing: {
         sidebar: `240px`,