diff --git a/site/postcss.config.js b/site/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/site/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/site/src/components/Background.jsx b/site/src/components/Background.jsx
index f4d9ceb..98ce629 100644
--- a/site/src/components/Background.jsx
+++ b/site/src/components/Background.jsx
@@ -6,8 +6,8 @@ const Background = styled.div`
   width: 100%;
   left: 0;
   top: 0;
-  border-bottom: solid 1px #f0f3f8;
-  background: #ffffff;
+  border-bottom: solid 1px var(--strokeBorderDefault);
+  background: var(--fillBgPrimary);
 `;
 
 export default Background;
diff --git a/site/src/components/Bounty/BountyLogo.jsx b/site/src/components/Bounty/BountyLogo.jsx
index 3204be1..b9d01ed 100644
--- a/site/src/components/Bounty/BountyLogo.jsx
+++ b/site/src/components/Bounty/BountyLogo.jsx
@@ -8,7 +8,7 @@ const Wrapper = styled.div`
   height: 64px;
   border: 1px solid #d2d9e2;
   border-radius: 50%;
-  background: #f0f3f8;
+  background: var(--fillBgTertiary);
   overflow: hidden;
 
   img.logo {
diff --git a/site/src/components/Bounty/Detail/Meta/JoinGroupButton.jsx b/site/src/components/Bounty/Detail/Meta/JoinGroupButton.jsx
index adf571c..b4cddfe 100644
--- a/site/src/components/Bounty/Detail/Meta/JoinGroupButton.jsx
+++ b/site/src/components/Bounty/Detail/Meta/JoinGroupButton.jsx
@@ -10,7 +10,7 @@ const JoinGroup = styled.div`
   width: 99px;
   height: 32px;
 
-  background: #F0F3F8;
+  background: var(--fillBgTertiary);
   border-radius: 18px;
 
   font-style: normal;
@@ -18,15 +18,15 @@ const JoinGroup = styled.div`
   font-size: 12px;
   line-height: 16px;
 
-  color: #A1A8B3;
+  color: #a1a8b3;
   cursor: pointer;
 
   :hover {
     svg path {
-      fill: #6848FF;
+      fill: #6848ff;
     }
-    color: #6848FF;
-    background: #F2F0FF;
+    color: #6848ff;
+    background: #f2f0ff;
   }
 `;
 
diff --git a/site/src/components/Bounty/Detail/Meta/Share.jsx b/site/src/components/Bounty/Detail/Meta/Share.jsx
index f3d02a7..0078605 100644
--- a/site/src/components/Bounty/Detail/Meta/Share.jsx
+++ b/site/src/components/Bounty/Detail/Meta/Share.jsx
@@ -17,7 +17,7 @@ const ShareButton = styled(FlexCenter)`
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background-color: #f0f3f8;
+  background-color: var(--fillBgTertiary);
   :hover {
     cursor: pointer;
     ${(p) =>
diff --git a/site/src/components/Bounty/Import/BountyLogo.jsx b/site/src/components/Bounty/Import/BountyLogo.jsx
index d36a0ad..31c1670 100644
--- a/site/src/components/Bounty/Import/BountyLogo.jsx
+++ b/site/src/components/Bounty/Import/BountyLogo.jsx
@@ -11,7 +11,7 @@ const LogoContainer = styled.div`
   height: 80px;
   border: 1px solid #d2d9e2;
   border-radius: 50%;
-  background: #f0f3f8;
+  background: var(--fillBgTertiary);
   overflow: hidden;
 
   div.upload {
diff --git a/site/src/components/Bounty/Import/styled.jsx b/site/src/components/Bounty/Import/styled.jsx
index af4918b..f5c2d17 100644
--- a/site/src/components/Bounty/Import/styled.jsx
+++ b/site/src/components/Bounty/Import/styled.jsx
@@ -30,7 +30,7 @@ export const Wrapper = styled.div`
 export const Box = styled.div`
   box-shadow: 0px 4px 31px rgba(26, 33, 44, 0.04),
     0px 0.751293px 3.88168px rgba(26, 33, 44, 0.03);
-  border: 1px solid #f0f3f8;
+  border: 1px solid var(--strokeBorderDefault);
   padding: 32px;
   background-color: white;
   @media screen and (max-width: 900px) {
diff --git a/site/src/components/ChildBounty/Detail/MetaEdit/index.jsx b/site/src/components/ChildBounty/Detail/MetaEdit/index.jsx
index bd65be1..62e7a80 100644
--- a/site/src/components/ChildBounty/Detail/MetaEdit/index.jsx
+++ b/site/src/components/ChildBounty/Detail/MetaEdit/index.jsx
@@ -21,7 +21,7 @@ import { useHandleSigningError } from "@/hooks/useHandleSigningError";
 const Box = styled.div`
   box-shadow: 0px 4px 31px rgba(26, 33, 44, 0.04),
     0px 0.751293px 3.88168px rgba(26, 33, 44, 0.03);
-  border: 1px solid #f0f3f8;
+  border: 1px solid var(--strokeBorderDefault);
   padding: 32px;
   background-color: white;
   @media screen and (max-width: 900px) {
diff --git a/site/src/components/ChildBounty/Import/index.jsx b/site/src/components/ChildBounty/Import/index.jsx
index 8a79c42..1eec12d 100644
--- a/site/src/components/ChildBounty/Import/index.jsx
+++ b/site/src/components/ChildBounty/Import/index.jsx
@@ -53,7 +53,7 @@ const Wrapper = styled.div`
 const Box = styled.div`
   box-shadow: 0px 4px 31px rgba(26, 33, 44, 0.04),
     0px 0.751293px 3.88168px rgba(26, 33, 44, 0.03);
-  border: 1px solid #f0f3f8;
+  border: 1px solid var(--strokeBorderDefault);
   padding: 32px;
   background-color: white;
   @media screen and (max-width: 900px) {
diff --git a/site/src/components/Common/Detail/DisabledInputBountyId.jsx b/site/src/components/Common/Detail/DisabledInputBountyId.jsx
index b70e44c..a3fd1a5 100644
--- a/site/src/components/Common/Detail/DisabledInputBountyId.jsx
+++ b/site/src/components/Common/Detail/DisabledInputBountyId.jsx
@@ -10,11 +10,7 @@ const InputAndError = styled.div`
   gap: 8px;
 `;
 
-export default function DisabledInputBountyId({
-  title,
-  tooltip,
-  bountyId,
-}) {
+export default function DisabledInputBountyId({ title, tooltip, bountyId }) {
   return (
     <>
       <Title>
@@ -31,7 +27,7 @@ export default function DisabledInputBountyId({
         <Input
           defaultValue={bountyId}
           placeholder="0"
-          style={{ background: "#f0f3f8" }}
+          style={{ background: "var(--fillBgTertiary)" }}
         />
       </InputAndError>
     </>
diff --git a/site/src/components/Common/Import/BountyMeta.jsx b/site/src/components/Common/Import/BountyMeta.jsx
index eb8e232..7671aa7 100644
--- a/site/src/components/Common/Import/BountyMeta.jsx
+++ b/site/src/components/Common/Import/BountyMeta.jsx
@@ -97,7 +97,7 @@ const SignatoriesDivider = styled.div`
   flex-grow: 1;
   display: inline-block;
   height: 1px;
-  background: #f0f3f8;
+  background: var(--fillBgTertiary);
 `;
 
 const Field = styled.div`
diff --git a/site/src/components/Discussion/Item.jsx b/site/src/components/Discussion/Item.jsx
index f343a0b..2d5a356 100644
--- a/site/src/components/Discussion/Item.jsx
+++ b/site/src/components/Discussion/Item.jsx
@@ -17,7 +17,7 @@ import ActionBar from "./ActionBar";
 const ContentWrapper = styled.div`
   margin: 8px 0 0 28px;
   padding-bottom: 20px;
-  border-bottom: solid 1px #f0f3f8;
+  border-bottom: solid 1px var(--strokeBorderDefault);
   > :first-child {
     ${p_14_normal};
   }
diff --git a/site/src/components/MobileMenu.jsx b/site/src/components/MobileMenu.jsx
index b0bb846..3177ade 100644
--- a/site/src/components/MobileMenu.jsx
+++ b/site/src/components/MobileMenu.jsx
@@ -39,7 +39,7 @@ const FloatingWrapper = styled.ul`
   }
 
   > :not(:last-child) {
-    border-bottom: 1px solid #f0f3f8;
+    border-bottom: 1px solid var(--strokeBorderDefault);
   }
 `;
 
diff --git a/site/src/components/NodeSelect.jsx b/site/src/components/NodeSelect.jsx
index f9719e9..db98bde 100644
--- a/site/src/components/NodeSelect.jsx
+++ b/site/src/components/NodeSelect.jsx
@@ -50,7 +50,7 @@ const Select = styled(Flex)`
 `;
 
 const Options = styled.div`
-  background: #ffffff;
+  background: var(--fillBgPrimary);
   box-shadow: 0px 6px 22px rgba(30, 33, 52, 0.11),
     0px 1.34018px 4.91399px rgba(30, 33, 52, 0.0655718),
     0px 0.399006px 1.46302px rgba(30, 33, 52, 0.0444282);
diff --git a/site/src/components/Notification/NotificationTabs.jsx b/site/src/components/Notification/NotificationTabs.jsx
index cfab4f6..0958c1f 100644
--- a/site/src/components/Notification/NotificationTabs.jsx
+++ b/site/src/components/Notification/NotificationTabs.jsx
@@ -6,7 +6,7 @@ import { MOBILE_SIZE } from "@osn/constants";
 import { netural_grey_200 } from "@osn/common-ui/es/styles/colors";
 
 const TabsWrapper = styled.div`
-  background-color: #fff;
+  background-color: var(--fillBgPrimary);
   padding-top: 40px;
   border-bottom: 1px solid ${netural_grey_200};
   @media screen and (max-width: ${MOBILE_SIZE}px) {
diff --git a/site/src/components/User/ConnectedAccount.jsx b/site/src/components/User/ConnectedAccount.jsx
index 26e2c82..3e93e69 100644
--- a/site/src/components/User/ConnectedAccount.jsx
+++ b/site/src/components/User/ConnectedAccount.jsx
@@ -80,8 +80,8 @@ const MenuWrapper = styled.div`
   position: absolute;
   right: 0;
   top: 100%;
-  background: #ffffff;
-  border: 1px solid #f0f3f8;
+  background: var(--fillBgPrimary);
+  border: 1px solid var(--strokeBorderDefault);
   padding: 16px 16px 8px;
   z-index: 1;
 
@@ -112,7 +112,7 @@ const MenuItem = styled.div`
 
 const MenuDivider = styled.div`
   height: 1px;
-  background: #f0f3f8;
+  background: var(--fillBgTertiary);
   margin: 12px 0;
 `;
 
diff --git a/site/src/index.css b/site/src/index.css
index a2b7545..80a291c 100644
--- a/site/src/index.css
+++ b/site/src/index.css
@@ -2,8 +2,6 @@ body {
   margin: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #1e2134;
-  background: #fbfcfe;
 }
 
 body * {
@@ -52,8 +50,8 @@ body a:hover {
   font-style: normal;
   font-weight: 400;
   src: url("/fonts/inter-v3-latin-regular.woff2") format("woff2"),
-    /* Super Modern Browsers */
-      url("/fonts/inter-v3-latin-regular.woff") format("woff");
+    /* Super Modern Browsers */ url("/fonts/inter-v3-latin-regular.woff")
+      format("woff");
 }
 
 @font-face {
diff --git a/site/src/index.jsx b/site/src/index.jsx
index 2449fe5..bb12195 100644
--- a/site/src/index.jsx
+++ b/site/src/index.jsx
@@ -7,6 +7,7 @@ import store from "./store";
 import "./index.css";
 import "semantic-ui-css/semantic.min.css";
 import "react-mde/lib/styles/css/react-mde-all.css";
+import "@osn/common-ui/styles/index.css";
 
 const root = createRoot(document.getElementById("root"));
 root.render(
diff --git a/site/src/pages/404.jsx b/site/src/pages/404.jsx
index 8dabad9..6ce9984 100644
--- a/site/src/pages/404.jsx
+++ b/site/src/pages/404.jsx
@@ -1,9 +1,5 @@
 import styled from "styled-components";
-import {
-  h3_36_bold,
-  h4_24_bold,
-  p_16_normal,
-} from "@osn/common-ui";
+import { h3_36_bold, h4_24_bold, p_16_normal } from "@osn/common-ui";
 import { Link } from "react-router-dom";
 
 const Wrapper = styled.div`
@@ -14,12 +10,12 @@ const Wrapper = styled.div`
 `;
 
 const Section = styled.div`
-  background: #fff;
-  border-top: 1px solid #f0f3f8;
+  background-color: var(--fillBgPrimary);
+  border-top: 1px solid var(--strokeBorderDefault);
   @media screen and (max-width: 800px) {
     border-top: none;
   }
-  border-bottom: 1px solid #f0f3f8;
+  border-bottom: 1px solid var(--strokeBorderDefault);
 `;
 
 const H1 = styled.h1`
diff --git a/site/src/pages/Home.jsx b/site/src/pages/Home.jsx
index 0ed5b37..3460f39 100644
--- a/site/src/pages/Home.jsx
+++ b/site/src/pages/Home.jsx
@@ -37,8 +37,8 @@ const BountiesWrapper = styled.div`
   ${(p) =>
     p.bg &&
     css`
-      border-bottom: solid 1px #f0f3f8;
-      background-color: #ffffff;
+      border-bottom: solid 1px var(--strokeBorderDefault);
+      background-color: var(--fillBgPrimary);
       padding-bottom: 40px;
     `}
 `;
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
new file mode 100644
index 0000000..020e20e
--- /dev/null
+++ b/site/tailwind.config.js
@@ -0,0 +1,5 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  presets: [require("@osn/common-ui/tailwind/preset.js")],
+  content: ["./src/**/*.{js,jsx}"],
+};