diff --git a/.gitignore b/.gitignore
index afa6ef13..c9f2a5f0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,4 +14,5 @@ scripts/claims_dev.json
 venv/
 out/
 .vscode
-brownie-deploy/
\ No newline at end of file
+brownie-deploy/
+.idea
diff --git a/client/.prettierignore b/client/.prettierignore
new file mode 100644
index 00000000..65b715e2
--- /dev/null
+++ b/client/.prettierignore
@@ -0,0 +1,6 @@
+**/.git
+**/.svn
+**/.hg
+**/node_modules
+**.idea
+.next
diff --git a/client/components/Card.tsx b/client/components/Card.tsx
index ef855adb..ebee32ca 100644
--- a/client/components/Card.tsx
+++ b/client/components/Card.tsx
@@ -10,6 +10,7 @@ interface CardProps {
   noShadow?: Boolean;
   red?: Boolean;
   margin?: Boolean;
+  className?: string;
 }
 
 const Card: FunctionComponent<CardProps> = ({
@@ -21,20 +22,21 @@ const Card: FunctionComponent<CardProps> = ({
   noShadow,
   red,
   margin,
+  className,
 }) => {
   const classes = classNames(
-    "overflow-x-auto w-full rounded-lg border h-full",
+    "overflow-x-auto w-full rounded-lg border border-accent-content h-full",
     {
-      "bg-secondary-focus text-white border-black": dark && !alt,
-      "bg-white text-black": !dark && !alt,
+      "bg-secondary-focus text-white border-accent-content": dark && !alt,
+      "bg-accent-content text-white": !dark && !alt,
       "p-4 md:p-5": tightPadding && !noPadding,
       "p-6 md:p-10": !tightPadding && !noPadding,
-      "bg-gray-100": alt && !dark,
       "shadow-lg": !noShadow,
       "px-4 py-5 md:px-5 md:py-6": tightPadding && !noPadding && noShadow,
-      "bg-[#dd0a0a1a] border-[#dd0a0a] text-[#dd0a0a]": red,
+      "text-error": red,
       "mt-6 h-full": margin,
-    }
+    },
+    className
   );
 
   return <div className={classes}>{children}</div>;
diff --git a/client/components/CardDescription.tsx b/client/components/CardDescription.tsx
index 5b654228..0401d011 100644
--- a/client/components/CardDescription.tsx
+++ b/client/components/CardDescription.tsx
@@ -12,9 +12,7 @@ const CardDescription: FunctionComponent<CardDescription> = ({
   alt,
   large,
 }) => {
-  const classes = classNames("text-xs", {
-    "text-gray-300": alt,
-    "text-[#8293a4]": !alt,
+  const classes = classNames("text-xs text-neutral", {
     "text-base": large,
   });
 
diff --git a/client/components/CardLabel.tsx b/client/components/CardLabel.tsx
index 04970f9d..e9492a76 100644
--- a/client/components/CardLabel.tsx
+++ b/client/components/CardLabel.tsx
@@ -5,7 +5,7 @@ interface CardLabelProps {
 }
 
 const CardLabel: FunctionComponent<CardLabelProps> = ({ children }) => (
-  <div className="text-sm text-[#8293a4]">{children}</div>
+  <div className="text-sm text-neutral">{children}</div>
 );
 
 export default CardLabel;
diff --git a/client/components/CardStat.tsx b/client/components/CardStat.tsx
index 3c69b0f3..469a88e4 100644
--- a/client/components/CardStat.tsx
+++ b/client/components/CardStat.tsx
@@ -1,4 +1,5 @@
 import { FunctionComponent, ReactNode } from "react";
+import classnames from "classnames";
 
 interface CardStatProps {
   children: ReactNode;
@@ -12,13 +13,14 @@ const CardStat: FunctionComponent<CardStatProps> = ({
   small,
 }) => (
   <div
-    className={
+    className={classnames(
+      "font-header",
       large
         ? "text-4xl whitespace-nowrap"
         : small
         ? "text-xl whitespace-nowrap"
         : "text-2xl whitespace-nowrap"
-    }
+    )}
   >
     {children}
   </div>
diff --git a/client/components/CrossIcon.tsx b/client/components/CrossIcon.tsx
index b83c9596..7d00fcf5 100644
--- a/client/components/CrossIcon.tsx
+++ b/client/components/CrossIcon.tsx
@@ -2,7 +2,7 @@ import { FunctionComponent } from "react";
 import Image from "next/image";
 
 const CrossIcon: FunctionComponent = () => (
-  <Image src="/cross.svg" height={24} width={24} alt="Ineligible" />
+  <Image src="/cross-white.svg" height={24} width={24} alt="Ineligible" />
 );
 
 export default CrossIcon;
diff --git a/client/components/Footer.tsx b/client/components/Footer.tsx
index 28666a40..d154e798 100644
--- a/client/components/Footer.tsx
+++ b/client/components/Footer.tsx
@@ -2,13 +2,13 @@ import { FunctionComponent } from "react";
 import Wrapper from "components/Wrapper";
 
 const Footer: FunctionComponent = () => (
-  <footer className="footer footer-center py-6 bg-base-100 text-gray-400 text-xs">
+  <footer className="footer footer-center py-6 bg-primary-content text-neutral text-xs">
     <Wrapper>
       <div className="w-full space-y-3 sm:space-y-0 sm:flex items-center justify-between">
         <ul className="flex space-x-5 lg:space-x-7">
           <li>
             <a
-              className="text-gray-400 hover:text-black"
+              className="text-gray-400 hover:text-neutral-focus"
               href="https://analytics.ousd.com"
               target="_blank"
               rel="noopener noreferrer"
@@ -18,7 +18,7 @@ const Footer: FunctionComponent = () => (
           </li>
           <li>
             <a
-              className="text-gray-400 hover:text-black"
+              className="text-gray-400 hover:text-neutral-focus"
               href="https://angel.co/company/originprotocol/jobs"
               target="_blank"
               rel="noopener noreferrer"
@@ -28,7 +28,7 @@ const Footer: FunctionComponent = () => (
           </li>
           <li>
             <a
-              className="text-gray-400 hover:text-black"
+              className="text-gray-400 hover:text-neutral-focus"
               href="https://docs.ousd.com"
               target="_blank"
               rel="noopener noreferrer"
@@ -38,7 +38,7 @@ const Footer: FunctionComponent = () => (
           </li>
           <li>
             <a
-              className="text-gray-400 hover:text-black"
+              className="text-gray-400 hover:text-neutral-focus"
               href="https://originprotocol.com/tos"
               target="_blank"
               rel="noopener noreferrer"
@@ -48,7 +48,7 @@ const Footer: FunctionComponent = () => (
           </li>
           <li>
             <a
-              className="text-gray-400 hover:text-black"
+              className="text-gray-400 hover:text-neutral-focus"
               href="https://originprotocol.com/privacy"
               target="_blank"
               rel="noopener noreferrer"
@@ -58,7 +58,7 @@ const Footer: FunctionComponent = () => (
           </li>
           <li>
             <a
-              className="text-gray-400 hover:text-black"
+              className="text-gray-400 hover:text-neutral-focus"
               href="https://discord.gg/jyxpUSe"
               target="_blank"
               rel="noopener noreferrer"
@@ -69,7 +69,7 @@ const Footer: FunctionComponent = () => (
         </ul>
         <div className="flex space-x-5 lg:space-x-7">
           <a
-            className="text-gray-400 hover:text-black"
+            className="text-gray-400 hover:text-neutral-focus"
             href="https://originprotocol.com"
             target="_blank"
             rel="noopener noreferrer"
diff --git a/client/components/Header.tsx b/client/components/Header.tsx
index 207faa28..694990cc 100644
--- a/client/components/Header.tsx
+++ b/client/components/Header.tsx
@@ -34,7 +34,7 @@ const Header: FunctionComponent<HeaderProps> = ({ hideNav }) => {
   );
 
   const mobileMenuClassNames = classNames(
-    "flex flex-col pt-8 bg-white z-30 fixed top-0 h-screen w-72 transition transition-right duration-200 lg:hidden",
+    "flex flex-col pt-8 bg-secondary z-30 fixed top-0 h-screen w-72 transition transition-right duration-200 lg:hidden",
     {
       "-right-full": !menuIsOpen,
       "right-0": menuIsOpen,
@@ -45,34 +45,34 @@ const Header: FunctionComponent<HeaderProps> = ({ hideNav }) => {
     <>
       <header className="py-6 md:py-8 bg-secondary">
         <Wrapper>
-          <div className="flex items-center justify-between">
-            <div className="flex items-center">
-              <div className="flex-none -mb-3 mr-7 xl:mr-10">
+          <div className="flex flex-row items-center justify-between w-full">
+            <div className="flex flex-row items-center">
+              <div className="flex-none -mb-1 mr-7 xl:mr-10">
                 <Link href="/">
                   <Image
-                    width="204"
-                    height="29"
+                    width="174"
+                    height="24"
                     src="/logo.svg"
                     alt="OUSD Governance"
                   />
                 </Link>
               </div>
               {!hideNav && (
-                <ul className="space-x-7 xl:space-x-10 font-light h-0 invisible lg:h-auto lg:visible lg:flex">
+                <ul className="hidden lg:flex items-center space-x-7 xl:space-x-10 font-light h-0 lg:h-auto">
                   {navItems.map(({ href, label, external }) => (
                     <li key={label}>
                       <Link
-                        className="group text-sm text-white flex space-x-2"
+                        className="group text-sm text-neutral hover:text-neutral-focus flex space-x-2"
                         currentClassName="font-normal"
                         href={href}
                         type={external ? "external" : "internal"}
                         newWindow={external}
                       >
-                        <span className="group-hover:underline">{label}</span>
+                        <span>{label}</span>
                         {href === "/stake" && (
                           <div className="flex items-center">
                             <div
-                              className="w-0 h-0 
+                              className="w-0 h-0
                               border-t-[0.25rem] border-t-transparent
                               border-r-[0.4rem] border-r-white
                               border-b-[0.25rem] border-b-transparent
@@ -91,7 +91,7 @@ const Header: FunctionComponent<HeaderProps> = ({ hideNav }) => {
               )}
             </div>
             {!hideNav && (
-              <div className="flex-none flex items-center space-x-3 md:space-x-4">
+              <div className="flex flex-grow-1 flex-shrink-0 items-center space-x-3 md:space-x-4">
                 <button
                   className="flex lg:hidden"
                   onClick={() => setMenuIsOpen(true)}
@@ -131,7 +131,7 @@ const Header: FunctionComponent<HeaderProps> = ({ hideNav }) => {
               {navItems.map(({ href, label, external }) => (
                 <li key={label}>
                   <Link
-                    className="px-6 py-3 hover:text-gray-700 text-black border-l-4 border-white flex space-x-2"
+                    className="px-6 py-3 hover:text-neutral-focus text-neutral border-l-4 border-accent-content flex space-x-2"
                     currentClassName="font-normal border-primary"
                     href={href}
                     onClick={
@@ -144,7 +144,7 @@ const Header: FunctionComponent<HeaderProps> = ({ hideNav }) => {
                     {href === "/stake" && (
                       <div className="flex items-center">
                         <div
-                          className="w-0 h-0 
+                          className="w-0 h-0
                               border-t-[0.25rem] border-t-transparent
                               border-r-[0.4rem] border-r-primary
                               border-b-[0.25rem] border-b-transparent
diff --git a/client/components/LeaderboardTable.tsx b/client/components/LeaderboardTable.tsx
index 95bd7dbc..50a90fd7 100644
--- a/client/components/LeaderboardTable.tsx
+++ b/client/components/LeaderboardTable.tsx
@@ -14,7 +14,7 @@ export const LeaderboardTable = ({ voters }: { voters: Array }) => {
   return (
     <table className="table w-full">
       <thead>
-        <tr>
+        <tr className="bg-inherit border-accent border-opacity-[40%]">
           <th>Rank</th>
           <th>Address</th>
           <th>Votes</th>
@@ -25,19 +25,25 @@ export const LeaderboardTable = ({ voters }: { voters: Array }) => {
       <tbody>
         {voters.map((voter, index) => (
           <tr key={index}>
-            <td>{index + 1}</td>
-            <td>
+            <td className="bg-inherit border-accent border-opacity-[40%]">
+              {index + 1}
+            </td>
+            <td className="bg-inherit border-accent border-opacity-[40%]">
               <Address address={voter.address} />
             </td>
-            <td>
+            <td className="bg-inherit border-accent border-opacity-[40%]">
               <TokenAmount
                 amount={ethers.utils.formatUnits(
                   ethers.BigNumber.from(voter.votes)
                 )}
               />
             </td>
-            <td>{((voter.votes / totalSupplyVeOgv) * 100).toFixed(2)}%</td>
-            <td>{voter.proposalsVoted}</td>
+            <td className="bg-inherit border-accent border-opacity-[40%]">
+              {((voter.votes / totalSupplyVeOgv) * 100).toFixed(2)}%
+            </td>
+            <td className="bg-inherit border-accent border-opacity-[40%]">
+              {voter.proposalsVoted}
+            </td>
           </tr>
         ))}
       </tbody>
diff --git a/client/components/Modal.tsx b/client/components/Modal.tsx
index a94dc337..136e655a 100644
--- a/client/components/Modal.tsx
+++ b/client/components/Modal.tsx
@@ -23,7 +23,7 @@ const Modal: FunctionComponent<ModalProps> = ({
     <div className={className} style={{ marginTop: 0 }} onClick={handleClose}>
       <div
         onClick={(e) => e.stopPropagation()}
-        className="modal-box overflow-hidden bg-white"
+        className="modal-box overflow-hidden bg-secondary text-white"
       >
         {showCloseIcon && handleClose && (
           <button
diff --git a/client/components/PageTitle.tsx b/client/components/PageTitle.tsx
index 7bb33fc9..ca808b8d 100644
--- a/client/components/PageTitle.tsx
+++ b/client/components/PageTitle.tsx
@@ -10,6 +10,6 @@ export const PageTitle: FunctionComponent<PageTitleProps> = ({
   noBottomMargin,
 }) => (
   <div className={noBottomMargin ? "" : "pb-5"}>
-    <h1 className="text-2xl text-white mt-6">{children}</h1>
+    <h1 className="text-4xl text-white mt-6 font-bold">{children}</h1>
   </div>
 );
diff --git a/client/components/RangeInput.tsx b/client/components/RangeInput.tsx
index c214b8c3..912419f6 100644
--- a/client/components/RangeInput.tsx
+++ b/client/components/RangeInput.tsx
@@ -14,6 +14,7 @@ interface RangeInputProps {
   hideLabelFormatting?: Boolean;
 }
 
+// @ts-ignore
 const RangeInput: FunctionComponent<RangeInputProps> = ({
   label,
   counterUnit,
@@ -29,7 +30,7 @@ const RangeInput: FunctionComponent<RangeInputProps> = ({
   <>
     {!hideLabel && (
       <label className="label">
-        <span className="label-text text-lg flex justify-between items-center w-full">
+        <span className="label-text font-header text-white text-lg flex justify-between items-center w-full">
           <span>
             {label}&nbsp;
             {hideLabelFormatting ? value : <TokenAmount amount={value} />}
@@ -40,16 +41,22 @@ const RangeInput: FunctionComponent<RangeInputProps> = ({
     )}
     <div>
       <input
-        className="range range-lg range-accent"
+        className="range range-lg range-alt"
         type="range"
         min={min || "0"}
         max={max}
         value={value}
         onChange={onChange}
+        style={{
+          // @ts-ignore
+          "--value": value,
+          "--min": min,
+          "--max": max,
+        }}
       />
       {markers && markers.length > 0 && (
         <>
-          <div className="w-full flex justify-between text-xs text-gray-400">
+          <div className="w-full flex justify-between text-xs text-neutral">
             {markers.map((marker, index) => (
               <span key={index} className="flex flex-col items-center w-8">
                 <span>|</span>
diff --git a/client/components/SectionTitle.tsx b/client/components/SectionTitle.tsx
index 79a04552..0c47f186 100644
--- a/client/components/SectionTitle.tsx
+++ b/client/components/SectionTitle.tsx
@@ -1,5 +1,7 @@
 export const SectionTitle = ({ children, noMarginBottom = false }) => (
   <div className={noMarginBottom ? "" : "mb-5"}>
-    <h3 className="text-lg leading-6 font-medium">{children}</h3>
+    <h3 className="text-xl font-header leading-6 font-medium text-white">
+      {children}
+    </h3>
   </div>
 );
diff --git a/client/components/Web3Button.tsx b/client/components/Web3Button.tsx
index 24c44c02..2c12a156 100644
--- a/client/components/Web3Button.tsx
+++ b/client/components/Web3Button.tsx
@@ -12,7 +12,6 @@ import {
   websocketProvider,
 } from "constants/index";
 import { toast } from "react-toastify";
-import classNames from "classnames";
 import Link from "components/Link";
 import useShowDelegationModalOption from "utils/useShowDelegationModalOption";
 
@@ -81,6 +80,13 @@ if (typeof window !== "undefined") {
     network: "mainnet",
     cacheProvider: true,
     providerOptions,
+    theme: {
+      background: "#101113",
+      main: "rgb(199, 199, 199)",
+      secondary: "rgb(136, 136, 136)",
+      border: "rgba(195, 195, 195, 0.14)",
+      hover: "#141519",
+    },
   });
   useStore.setState({ web3Modal });
 }
@@ -188,22 +194,15 @@ export const Web3Button: FunctionComponent<Web3ButtonProps> = ({ inPage }) => {
     );
   }
 
-  const defaultClassName = classNames("", {
-    "btn btn-outline btn-sm border-[#bbc9da] text-white rounded-full text-sm capitalize font-normal hover:bg-white hover:text-secondary":
-      !inPage,
-    "btn btn-primary btn-lg rounded-full w-full h-[3.25rem] min-h-[3.25rem]":
-      inPage,
-  });
-
   return web3Provider ? (
     <div className="dropdown relative">
       {address && (
         <label
           tabIndex={0}
-          className="flex items-center space-x-2 p-2 md:px-4 border border-[#bbc9da] text-white rounded-full text-sm leading-none capitalize cursor-pointer"
+          className="flex items-center space-x-2 p-3 md:px-5 bg-secondary-content text-white rounded-full text-sm leading-none capitalize cursor-pointer"
         >
           <span className="w-3 h-3 bg-[#4bbc8a] rounded-full" />
-          <div className="invisible md:visible md:flex">
+          <div className="flex">
             {truncateEthAddress(address)}
             {web3Provider.network.name === "unknown" && " / Lh"}
             {web3Provider.network.name === "goerli" && " / Goer"}
@@ -212,27 +211,32 @@ export const Web3Button: FunctionComponent<Web3ButtonProps> = ({ inPage }) => {
       )}
       <div
         tabIndex={0}
-        className="dropdown-content absolute top-full mt-3 right-0 bg-white p-3 md:p-4 rounded-xl border shadow-sm w-36 lg:w-full no-animation"
+        className="flex flex-col space-y-2 dropdown-content absolute top-full mt-3 right-0 bg-secondary-content p-3 md:p-4 rounded-xl border-none shadow-sm w-48 lg:w-full no-animation"
       >
-        <button
-          className="btn btn-primary btn-sm rounded-btn w-full"
-          onClick={disconnect}
-        >
-          Disconnect
-        </button>
         {needToShowDelegation && (
           <Link
-            className="btn btn-sm rounded-btn w-full mt-2 whitespace-nowrap"
+            className="flex items-center justify-center text-sm py-2 text-white px-3 bg-gradient-to-r from-gradient-from to-gradient-to rounded-full"
             href="/register-vote"
           >
             Vote register
           </Link>
         )}
+        <button
+          className="text-sm py-1 text-white px-2 rounded-full"
+          onClick={disconnect}
+        >
+          Disconnect
+        </button>
       </div>
     </div>
   ) : (
-    <button className={defaultClassName} onClick={connect}>
-      {inPage ? "Connect wallet" : "Connect"}
-    </button>
+    <div className="flex items-center justify-center w-full">
+      <button
+        className="flex items-center justify-center text-sm py-2 text-white px-4 bg-gradient-to-r from-gradient-from to-gradient-to rounded-full"
+        onClick={connect}
+      >
+        {inPage ? "Connect wallet" : "Connect"}
+      </button>
+    </div>
   );
 };
diff --git a/client/components/Wrapper.tsx b/client/components/Wrapper.tsx
index 5511eba9..8c096be1 100644
--- a/client/components/Wrapper.tsx
+++ b/client/components/Wrapper.tsx
@@ -8,8 +8,8 @@ interface WrapperProps {
 
 const Wrapper: FunctionComponent<WrapperProps> = ({ children, narrow }) => {
   const classes = classNames("w-full mx-auto px-4", {
-    "max-w-2xl": narrow,
-    "max-w-2xl md:px-6 lg:max-w-6xl": !narrow,
+    "max-w-3xl": narrow,
+    "max-w-3xl md:px-6 lg:max-w-6xl": !narrow,
   });
 
   return <div className={classes}>{children}</div>;
diff --git a/client/components/claim/claim/ApyTooltip.tsx b/client/components/claim/claim/ApyTooltip.tsx
index 4df48200..af696842 100644
--- a/client/components/claim/claim/ApyTooltip.tsx
+++ b/client/components/claim/claim/ApyTooltip.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent } from "react";
 import ReactTooltip from "react-tooltip";
 import Icon from "@mdi/react";
-import { mdiAlertCircle } from "@mdi/js";
+import { mdiInformationOutline as InfoIcon } from "@mdi/js";
 
 interface ApyToolTipProps {}
 
@@ -30,12 +30,8 @@ const ApyToolTip: FunctionComponent<ApyToolTipProps> = () => {
           data-for="variable-apy"
           className="inline-flex space-x-1 items-center sm:justify-end w-auto mb-2"
         >
-          <span className="text-sm">Variable APY</span>
-          <Icon
-            path={mdiAlertCircle}
-            size={0.75}
-            className="text-secondary mx-auto"
-          />
+          <span className="text-sm text-neutral">Variable APY</span>
+          <Icon path={InfoIcon} size={0.75} className="text-neutral mx-auto" />
         </div>
       </div>
     </>
diff --git a/client/components/layout.tsx b/client/components/layout.tsx
index 8a4221ad..13816001 100644
--- a/client/components/layout.tsx
+++ b/client/components/layout.tsx
@@ -12,7 +12,7 @@ const Layout: FunctionComponent<LayoutProps> = ({ children, hideNav }) => (
   <div className="min-h-screen">
     <Header hideNav={hideNav} />
     <div className="relative">
-      <div className="bg-white pt-4 pb-16 min-h-[15rem]">
+      <div className="bg-primary-content pt-4 pb-16 min-h-[15rem]">
         <div className="w-full h-80 bg-secondary absolute top-0 z-0" />
         <div className="relative z-5">{children}</div>
       </div>
diff --git a/client/components/proposal/ProposalActionsTable.tsx b/client/components/proposal/ProposalActionsTable.tsx
index 4d07043a..d61c67b2 100644
--- a/client/components/proposal/ProposalActionsTable.tsx
+++ b/client/components/proposal/ProposalActionsTable.tsx
@@ -28,6 +28,7 @@ export const ProposalActionsTable = ({
   const [actionDeleteIndex, setActionDeleteIndex] = useState(null);
 
   let explorerPrefix: string | undefined;
+
   if (envNetwork === 1) {
     explorerPrefix = "https://etherscan.io/";
   } else if (envNetwork === 5) {
@@ -49,7 +50,7 @@ export const ProposalActionsTable = ({
       <div className="overflow-x-auto">
         <table className="table w-full">
           <thead>
-            <tr>
+            <tr className="bg-inherit border-accent border-opacity-[40%]">
               <td className="pl-0">Contract</td>
               <td>Function</td>
               <td>Argument Types</td>
@@ -60,13 +61,14 @@ export const ProposalActionsTable = ({
           <tbody>
             {proposalActions.targets.map((target, index) => (
               <tr key={index}>
-                <td className="pl-0">
+                <td className="pl-0 bg-inherit border-accent border-opacity-[40%]">
                   {explorerPrefix ? (
                     <a
-                      className="link link-primary"
+                      className="link link-primary gradient-link"
                       href={`${explorerPrefix}address/${target}`}
                       target="_blank"
                       rel="noreferrer"
+                      data-text={addressContractName(contracts, target)}
                     >
                       {addressContractName(contracts, target)}
                     </a>
@@ -74,17 +76,17 @@ export const ProposalActionsTable = ({
                     <>{addressContractName(contracts, target)}</>
                   )}
                 </td>
-                <td>
+                <td className="bg-inherit border-accent border-opacity-[40%]">
                   {functionNameFromSignature(proposalActions.signatures[index])}
                 </td>
-                <td>
+                <td className="bg-inherit border-accent border-opacity-[40%]">
                   {argumentsFromSignature(
                     proposalActions.signatures[index]
                   ).map((argument, index) => (
                     <div key={index}>{argument}</div>
                   ))}
                 </td>
-                <td>
+                <td className="bg-inherit border-accent border-opacity-[40%]">
                   {decodeCalldata(
                     proposalActions.signatures[index],
                     proposalActions.calldatas[index]
@@ -128,7 +130,7 @@ export const ProposalActionsTable = ({
                   })}
                 </td>
                 {ephemeral && (
-                  <td>
+                  <td className="bg-inherit border-accent border-opacity-[40%]">
                     <button
                       className="btn btn-muted btn-circle btn-xs"
                       onClick={() => {
diff --git a/client/components/proposal/ProposalDetail.tsx b/client/components/proposal/ProposalDetail.tsx
index 59e37095..42c9d961 100644
--- a/client/components/proposal/ProposalDetail.tsx
+++ b/client/components/proposal/ProposalDetail.tsx
@@ -162,14 +162,14 @@ export const ProposalDetail = ({
   return (
     <>
       <div className="sm:flex space-y-4 sm:space-y-0 justify-between items-center mb-6">
-        <div className="mr-4 relative max-w-lg">
-          <PageTitle noBottomMargin>
-            <div
+        <div className="mr-4 relative max-w-lg space-y-2">
+          <div className="text-white text-2xl font-header">
+            <h2
               className="break-words"
               dangerouslySetInnerHTML={{ __html: cleanTitle }}
             />
-          </PageTitle>
-          <div className="text-white opacity-70 text-md">
+          </div>
+          <div className="text-neutral text-sm">
             {id.toString().padStart(3, "0")}
             {lastTx &&
               ` • ${lastTx?.event} ${moment(lastTx?.createdAt).format(
@@ -189,6 +189,7 @@ export const ProposalDetail = ({
           hasVoted={hasVoted}
           votingActive={proposalState === 1}
         />
+        <br />
         <CardGroup twoCol horizontal>
           <Card tightPadding>
             <SectionTitle noMarginBottom>For</SectionTitle>
diff --git a/client/components/proposal/ProposalHistory.tsx b/client/components/proposal/ProposalHistory.tsx
index ed98d753..5a70af53 100644
--- a/client/components/proposal/ProposalHistory.tsx
+++ b/client/components/proposal/ProposalHistory.tsx
@@ -33,11 +33,12 @@ const ProposalHistory: FunctionComponent<ProposalHistoryProps> = ({
             transaction.event !== "Succeeded" &&
             transaction.event !== "Queued" &&
             transaction.event !== "Executed";
+
           const iconClasses = classNames(
             "h-7 w-7 rounded-full text-white flex items-center justify-center",
             {
               "bg-gray-500": isGrey,
-              "bg-accent": !isGrey,
+              "bg-success": !isGrey,
             }
           );
 
@@ -47,13 +48,14 @@ const ProposalHistory: FunctionComponent<ProposalHistoryProps> = ({
               className="flex space-x-4 items-center"
             >
               <span className={iconClasses}>
-                <Icon path={mdiCheck} size={0.66} />
+                <Icon path={mdiCheck} size={0.8} />
               </span>
               <div>
                 <div className="flex items-center space-x-1">
-                  <h3>{transaction.event}</h3>
+                  <h3 className="text-sm">{transaction.event}</h3>
                   {explorerPrefix && transaction.hash && (
                     <Link
+                      className="text-neutral"
                       href={`${explorerPrefix}tx/${transaction.hash}`}
                       newWindow
                     >
@@ -61,7 +63,7 @@ const ProposalHistory: FunctionComponent<ProposalHistoryProps> = ({
                     </Link>
                   )}
                 </div>
-                <p className="text-gray-500 text-sm">
+                <p className="text-neutral text-xs">
                   {moment(transaction.createdAt).format(
                     "MMM D, YYYY, HH:mm:ss"
                   )}
diff --git a/client/components/proposal/ProposalParameters.tsx b/client/components/proposal/ProposalParameters.tsx
index a0d298fe..0d847e0e 100644
--- a/client/components/proposal/ProposalParameters.tsx
+++ b/client/components/proposal/ProposalParameters.tsx
@@ -6,20 +6,20 @@ export const ProposalParameters = ({ proposal, state, quorum }) => {
   const endBlockTimestamp = useFutureBlockTime(proposal.endBlock);
 
   return (
-    <div className="bg-white shadow overflow-x-auto sm:rounded-lg mt-5">
-      <div className="border-t border-gray-100 px-4 py-5 sm:p-0">
-        <dl className="sm:divide-y sm:divide-gray-200">
+    <div className="bg-inherit overflow-x-auto sm:rounded-lg mt-5">
+      <div className="px-4 py-5 sm:p-0">
+        <dl className="sm:divide-y sm:divide-accent">
           {state === 1 && endBlockTimestamp !== 0 && (
-            <div className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-              <dt className="text-sm font-medium text-gray-400">Time Left</dt>
-              <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+            <div className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4">
+              <dt className="text-sm font-medium text-neutral">Time Left</dt>
+              <dd className="mt-1 text-sm text-white sm:mt-0 sm:col-span-2">
                 {toDaysMinutesSeconds(endBlockTimestamp)}
               </dd>
             </div>
           )}
-          <div className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-            <dt className="text-sm font-medium text-gray-400">Quorum</dt>
-            <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <div className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4">
+            <dt className="text-sm font-medium text-neutral">Quorum</dt>
+            <dd className="mt-1 text-sm text-white sm:mt-0 sm:col-span-2">
               <TokenAmount amount={quorum} />
             </dd>
           </div>
diff --git a/client/components/proposal/ProposalTable.tsx b/client/components/proposal/ProposalTable.tsx
index 58cd2e99..58608b65 100644
--- a/client/components/proposal/ProposalTable.tsx
+++ b/client/components/proposal/ProposalTable.tsx
@@ -53,7 +53,7 @@ const ProposalTable: FunctionComponent<ProposalTableProps> = ({
     <>
       <RegisterToVote />
       {title && <SectionTitle>{title}</SectionTitle>}
-      <div className="overflow-x-auto">
+      <div className="overflow-x-auto px-8 py-4 bg-secondary-content rounded-lg">
         <table className="table table-fixed w-full">
           <tbody>
             {proposalData.proposals?.map((proposal, index) => {
@@ -67,15 +67,16 @@ const ProposalTable: FunctionComponent<ProposalTableProps> = ({
               return (
                 <tr
                   key={index}
-                  className="cursor-pointer hover:bg-gray-100"
+                  className="cursor-pointer bg-inherit border-accent border-opacity-[40%]"
                   onClick={() => router.push(`/proposals/${proposal["0"]}`)}
                 >
-                  <td>
-                    <div className="space-y-1">
-                      <h3 className="text-lg truncate">
-                        <div dangerouslySetInnerHTML={{ __html: cleanTitle }} />
-                      </h3>
-                      <div className="text-gray-400 text-md">
+                  <td className="bg-inherit border-none px-0 py-8">
+                    <div className="space-y-2">
+                      <h3
+                        className="text-white truncate"
+                        dangerouslySetInnerHTML={{ __html: cleanTitle }}
+                      />
+                      <div className="text-neutral text-xs">
                         {id} •{" "}
                         {lastTx &&
                           `${lastTx?.event} ${moment(lastTx?.createdAt).format(
@@ -84,7 +85,7 @@ const ProposalTable: FunctionComponent<ProposalTableProps> = ({
                       </div>
                     </div>
                   </td>
-                  <td className="w-1/4 text-right">
+                  <td className="bg-inherit border-none w-1/4 text-right">
                     <StateTag state={proposalData.states[index]} />
                   </td>
                 </tr>
diff --git a/client/components/proposal/ProposalVoteStats.tsx b/client/components/proposal/ProposalVoteStats.tsx
index 779cdb0f..799b3728 100644
--- a/client/components/proposal/ProposalVoteStats.tsx
+++ b/client/components/proposal/ProposalVoteStats.tsx
@@ -27,7 +27,7 @@ export const ProposalVoteStats = ({
       <Card dark tightPadding>
         <div className="space-y-1">
           <CardLabel>Your Votes</CardLabel>
-          <div className="flex space-x-1 items-center">
+          <div className="flex space-x-2 items-center">
             <TokenIcon src="/veogv.svg" alt="veOGV" small />
             <CardStat small>
               <TokenAmount amount={votePower} />
@@ -38,7 +38,7 @@ export const ProposalVoteStats = ({
       <Card dark tightPadding>
         <div className="space-y-1 mb-4">
           <CardLabel>For Votes</CardLabel>
-          <div className="flex space-x-1 items-center">
+          <div className="flex space-x-2 items-center">
             <TokenIcon src="/veogv.svg" alt="veOGV" small />
             <CardStat small>
               <TokenAmount amount={proposal.forVotes} />
@@ -60,7 +60,7 @@ export const ProposalVoteStats = ({
       <Card dark tightPadding>
         <div className="space-y-1 mb-4">
           <CardLabel>Against Votes</CardLabel>
-          <div className="flex space-x-1 items-center">
+          <div className="flex space-x-2 items-center">
             <TokenIcon src="/veogv.svg" alt="veOGV" small />
             <CardStat small>
               <TokenAmount amount={proposal.againstVotes} />
@@ -80,9 +80,9 @@ export const ProposalVoteStats = ({
         )}
       </Card>
       <Card dark tightPadding>
-        <div className="space-y-1  mb-4">
+        <div className="space-y-1 mb-4">
           <CardLabel>Abstain Votes</CardLabel>
-          <div className="flex space-x-1 items-center">
+          <div className="flex space-x-2 items-center">
             <TokenIcon src="/veogv.svg" alt="veOGV" small />
             <CardStat small>
               <TokenAmount amount={proposal.abstainVotes} />
diff --git a/client/components/proposal/RegisterToVote.tsx b/client/components/proposal/RegisterToVote.tsx
index 63af084b..8177ef1d 100644
--- a/client/components/proposal/RegisterToVote.tsx
+++ b/client/components/proposal/RegisterToVote.tsx
@@ -63,7 +63,7 @@ const RegisterToVote: FunctionComponent<RegisterToVoteProps> = ({
 
   const hasTokensButUnregistered = veOgv.gt(0) && needToShowDelegation;
   const hasNoTokensAndUnregistered = veOgv.eq(0) && needToShowDelegation;
-  console.log("whiteRegisterCta", whiteRegisterCta, !whiteRegisterCta);
+
   const classes = classNames(
     "bg-accent text-white -my-10 -mx-6 p-10 md:-mx-10",
     {
@@ -100,13 +100,13 @@ const RegisterToVote: FunctionComponent<RegisterToVoteProps> = ({
 
   const VeOgvMessage = () => (
     <div className={!withCard ? "mb-20" : ""}>
-      <div className="bg-white -my-10 -mx-6 p-10 md:-mx-10">
-        <h2 className="text-lg font-bold mb-2">Stake OGV</h2>
+      <div className="bg-inherit -my-10 -mx-6 p-10 md:-mx-10">
+        <h2 className="text-lg font-bold mb-2 font-header">Stake OGV</h2>
         <p className="mb-8">
           First stake some OGV and gain veOGV to be eligible for voting
         </p>
         <Link
-          className="btn rounded-full normal-case space-x-2 btn-lg h-[3.25rem] min-h-[3.25rem] min-w-[10.25rem] btn-primary"
+          className="py-3 text-white px-6 bg-gradient-to-r from-gradient-from to-gradient-to rounded-full"
           href="/stake"
         >
           Stake
diff --git a/client/components/proposal/StateTag.tsx b/client/components/proposal/StateTag.tsx
index 0e506885..36a9f09a 100644
--- a/client/components/proposal/StateTag.tsx
+++ b/client/components/proposal/StateTag.tsx
@@ -1,14 +1,35 @@
+import classnames from "classnames";
+import { ReactNode } from "react";
+
+type StateBadgeProps = {
+  className: string;
+  children: ReactNode;
+};
+
+const StateBadge = ({ className, children }: StateBadgeProps) => (
+  <span
+    className={classnames(
+      "badge text-[12px] font-bold text-primary-content font-primary border-none",
+      className
+    )}
+  >
+    {children}
+  </span>
+);
+
 export const StateTag = ({ state }: { state: number }) => {
   return (
     <>
-      {state == 0 && <div className="badge badge-info">Pending</div>}
-      {state == 1 && <div className="badge badge-warning">Active</div>}
-      {state == 2 && <div className="badge badge-error">Cancelled</div>}
-      {state == 3 && <div className="badge badge-error">Defeated</div>}
-      {state == 4 && <div className="badge badge-error">Succeeded</div>}
-      {state == 5 && <div className="badge badge-success">Queued</div>}
-      {state == 6 && <div className="badge badge-success">Expired</div>}
-      {state == 7 && <div className="badge badge-success">Executed</div>}
+      {state == 0 && <StateBadge className="badge-info">Pending</StateBadge>}
+      {state == 1 && <StateBadge className="badge-warning">Active</StateBadge>}
+      {state == 2 && <StateBadge className="badge-error">Cancelled</StateBadge>}
+      {state == 3 && <StateBadge className="badge-error">Defeated</StateBadge>}
+      {state == 4 && <StateBadge className="badge-error">Succeeded</StateBadge>}
+      {state == 5 && <StateBadge className="badge-success">Queued</StateBadge>}
+      {state == 6 && <StateBadge className="badge-success">Expired</StateBadge>}
+      {state == 7 && (
+        <StateBadge className="badge-success">Executed</StateBadge>
+      )}
     </>
   );
 };
diff --git a/client/components/proposal/SupportTable.tsx b/client/components/proposal/SupportTable.tsx
index 4bd17bc9..6a4bb235 100644
--- a/client/components/proposal/SupportTable.tsx
+++ b/client/components/proposal/SupportTable.tsx
@@ -9,9 +9,9 @@ interface SupportTableProps {
 
 const SupportTable: FunctionComponent<SupportTableProps> = ({ voters }) => {
   return (
-    <table className="table table-compact w-full">
+    <table className="table table-compact w-full bg-inherit">
       <thead>
-        <tr>
+        <tr className="bg-inherit border-accent border-opacity-[40%]">
           <th className="pl-0">Address</th>
           <th>Votes</th>
         </tr>
@@ -19,26 +19,27 @@ const SupportTable: FunctionComponent<SupportTableProps> = ({ voters }) => {
       <tbody>
         {voters.map((voter) => {
           let votesBn;
-
           try {
             votesBn = BigNumber.from(voter.votes);
           } catch (e) {
             return (
-              <tr key={voter.address}>
-                <td className="pl-0">
+              <tr key={voter.address} className="bg-inherit">
+                <td className="pl-0 bg-inherit border-accent border-opacity-[40%]">
                   <Address address={voter.address} />
                 </td>
-                <td>-</td>
+                <td className="bg-inherit border-accent border-opacity-[40%]">
+                  -
+                </td>
               </tr>
             );
           }
 
           return (
-            <tr key={voter.address}>
-              <td className="pl-0">
+            <tr key={voter.address} className="bg-inherit">
+              <td className="pl-0 bg-inherit border-accent border-opacity-[40%]">
                 <Address address={voter.address} />
               </td>
-              <td>
+              <td className="bg-inherit border-accent border-opacity-[40%]">
                 <TokenAmount amount={ethers.utils.formatUnits(votesBn)} />
               </td>
             </tr>
@@ -46,9 +47,11 @@ const SupportTable: FunctionComponent<SupportTableProps> = ({ voters }) => {
         })}
 
         {voters.length < 1 && (
-          <tr>
-            <td className="pl-0">-</td>
-            <td>-</td>
+          <tr className="bg-inherit">
+            <td className="pl-0 bg-inherit border-accent border-opacity-[40%]">
+              -
+            </td>
+            <td className="bg-inherit border-accent border-opacity-[40%]">-</td>
           </tr>
         )}
       </tbody>
diff --git a/client/components/vote-escrow/AccountBalances.tsx b/client/components/vote-escrow/AccountBalances.tsx
index b542f6fa..61f41a46 100644
--- a/client/components/vote-escrow/AccountBalances.tsx
+++ b/client/components/vote-escrow/AccountBalances.tsx
@@ -26,7 +26,7 @@ const AccountBalances: FunctionComponent<AccountBalancesProps> = () => {
     <>
       <CardGroup horizontal fourCol>
         <Card dark tightPadding>
-          <div className="space-y-1">
+          <div className="space-y-2">
             <CardLabel>Balance</CardLabel>
             <div className="flex space-x-1 items-center">
               <TokenIcon src="/ogv.svg" alt="OGV" small />
@@ -38,7 +38,7 @@ const AccountBalances: FunctionComponent<AccountBalancesProps> = () => {
           </div>
         </Card>
         <Card dark tightPadding>
-          <div className="space-y-1">
+          <div className="space-y-2">
             <CardLabel>Staked</CardLabel>
             <div className="flex space-x-1 items-center">
               <TokenIcon src="/ogv.svg" alt="OGV" small />
@@ -50,7 +50,7 @@ const AccountBalances: FunctionComponent<AccountBalancesProps> = () => {
           </div>
         </Card>
         <Card dark tightPadding>
-          <div className="space-y-1">
+          <div className="space-y-2">
             <CardLabel>Vote Balance</CardLabel>
             <div className="flex space-x-1 items-center">
               <TokenIcon src="/veogv.svg" alt="veOGV" small />
@@ -62,7 +62,7 @@ const AccountBalances: FunctionComponent<AccountBalancesProps> = () => {
           </div>
         </Card>
         <Card dark tightPadding>
-          <div className="space-y-1">
+          <div className="space-y-2">
             <CardLabel>Accrued Rewards</CardLabel>
             <div className="flex space-x-1 items-center">
               <TokenIcon src="/ogv.svg" alt="OGV" small />
diff --git a/client/components/vote-escrow/LockupForm.tsx b/client/components/vote-escrow/LockupForm.tsx
index 4ac94724..81414911 100644
--- a/client/components/vote-escrow/LockupForm.tsx
+++ b/client/components/vote-escrow/LockupForm.tsx
@@ -17,12 +17,13 @@ import CardStat from "components/CardStat";
 import CardDescription from "components/CardDescription";
 import CardGroup from "components/CardGroup";
 import moment from "moment";
-import { mdiArrowRight, mdiAlertCircle } from "@mdi/js";
+import { mdiInformationOutline as InfoIcon } from "@mdi/js";
 import Icon from "@mdi/react";
 import ApyToolTip from "components/claim/claim/ApyTooltip";
 import { getRewardsApy } from "utils/apy";
 import numeral from "numeraljs";
 import { decimal18Bn } from "utils";
+import classnames from "classnames";
 
 interface LockupFormProps {
   existingLockup?: Object;
@@ -414,8 +415,6 @@ const LockupForm: FunctionComponent<LockupFormProps> = ({ existingLockup }) => {
     }
   };
 
-  const now = new Date();
-
   return (
     <Card>
       <div className="space-y-2">
@@ -461,7 +460,13 @@ const LockupForm: FunctionComponent<LockupFormProps> = ({ existingLockup }) => {
         <div className="space-y-6 pt-2 sm:pt-3">
           <div className="flex flex-col sm:text-right sm:w-1/3 sm:ml-auto">
             <ApyToolTip />
-            <Card noPadding noShadow red={!validLockup} dark={validLockup}>
+            <Card
+              noPadding
+              noShadow
+              red={!validLockup}
+              dark={validLockup}
+              className="!bg-primary-content"
+            >
               <div className="flex p-2 flex-col sm:items-end">
                 <div className="flex space-x-2 items-end">
                   <CardStat large>
@@ -469,19 +474,19 @@ const LockupForm: FunctionComponent<LockupFormProps> = ({ existingLockup }) => {
                       ? ogvLockupRewardApy.toFixed(2)
                       : (0.0).toFixed(2)}
                   </CardStat>
-                  <CardDescription large>%</CardDescription>
+                  <span className="text-neutral text-sm">%</span>
                 </div>
               </div>
             </Card>
           </div>
         </div>
         <div className="space-y-4">
-          <h2 className="text-2xl font-bold">Your stake summary</h2>
+          <h2 className="text-2xl font-bold font-header">Your stake summary</h2>
           <CardGroup horizontal twoCol>
-            <div className="space-y-2 flex flex-col">
-              <span className="text-sm">You are staking</span>
-              <Card tightPadding noShadow>
-                <div className="flex flex-col">
+            <div className="flex flex-col space-y-4">
+              <span className="text-sm text-neutral">Variable APY</span>
+              <Card tightPadding noShadow className="!border-1 !border-neutral">
+                <div className="flex flex-col justify-center">
                   <div className="flex space-x-[0.4rem] items-end">
                     <TokenIcon large src="/ogv.svg" alt="OGV" />
                     <CardStat large>
@@ -489,7 +494,7 @@ const LockupForm: FunctionComponent<LockupFormProps> = ({ existingLockup }) => {
                     </CardStat>
                     <CardDescription large>OGV</CardDescription>
                   </div>
-                  <div className="block text-xs italic ml-11 mt-1 text-gray-400">
+                  <div className="block text-xs ml-11 mt-1 text-gray-400">
                     Unlocks{" "}
                     {moment(
                       parseInt(blockTimestamp) * 1000 +
@@ -499,10 +504,10 @@ const LockupForm: FunctionComponent<LockupFormProps> = ({ existingLockup }) => {
                 </div>
               </Card>
             </div>
-            <div className="space-y-2 flex flex-col">
-              <span className="text-sm">Today you get</span>
-              <Card tightPadding noShadow>
-                <div className="flex">
+            <div className="flex flex-col space-y-4">
+              <span className="text-sm text-neutral">Variable APY</span>
+              <Card tightPadding noShadow className="!border-1 !border-neutral">
+                <div className="flex flex-col justify-center">
                   <div className="flex space-x-[0.4rem] items-end">
                     <TokenIcon large src="/veogv.svg" alt="veOGV" />
                     <CardStat large>
@@ -513,15 +518,6 @@ const LockupForm: FunctionComponent<LockupFormProps> = ({ existingLockup }) => {
                 </div>
               </Card>
             </div>
-            <div className="hidden sm:block absolute h-7 w-7 bg-white border rounded-full left-1/2 top-1/2 -ml-[14px]" />
-            <div className="hidden sm:block absolute h-full w-[8px] bg-white left-1/2 top-[20px] -ml-[4px]" />
-            <div className="rotate-90 sm:rotate-0 absolute h-7 w-7 left-1/2 top-1/2 mt-[15px] sm:mt-[6px] -ml-[16px] sm:-ml-[8px]">
-              <Icon
-                path={mdiArrowRight}
-                size={0.66}
-                className="text-gray-400"
-              />
-            </div>
           </CardGroup>
         </div>
         {transactionError && (
@@ -533,17 +529,17 @@ const LockupForm: FunctionComponent<LockupFormProps> = ({ existingLockup }) => {
         )}
         {balances?.accruedRewards.gt(0) && (
           <div className="pt-2">
-            <div className="flex space-x-4 bg-gray-100 p-4 pb-5 border-t-4 border-gray-300">
+            <div className="flex space-x-4 bg-primary-content p-4 pb-5 rounded-lg mt-4">
               <Icon
-                path={mdiAlertCircle}
+                path={InfoIcon}
                 size={1}
-                className="text-accent flex-shrink-0"
+                className="text-white flex-shrink-0"
               />
-              <div>
-                <span className="block text-md font-bold text-gray-900">
+              <div className="flex flex-col space-y-4">
+                <span className="block text-lg text-white font-header">
                   OGV rewards will be collected
                 </span>
-                <span className="block text-sm text-gray-700">
+                <span className="block text-sm text-white">
                   You have accrued{" "}
                   {<TokenAmount amount={balances?.accruedRewards} />} OGV in
                   staking rewards. This OGV will be transferred to your wallet
@@ -554,9 +550,21 @@ const LockupForm: FunctionComponent<LockupFormProps> = ({ existingLockup }) => {
             </div>
           </div>
         )}
-        <div className="flex pt-2">
+        <div className="flex flex-row items-center justify-end space-x-2 pt-6">
           <button
-            className="btn btn-primary md:btn-lg rounded-full mr-4 flex-1"
+            className={classnames(
+              "py-3 text-white px-6 bg-gradient-to-r from-gradient-from to-gradient-to rounded-full",
+              {
+                "cursor-not-allowed opacity-30":
+                  !lockupAmount ||
+                  !lockupDuration ||
+                  allowances.ogv.gte(ethers.utils.parseUnits(lockupAmount)) ||
+                  approvalStatus === "waiting-for-user" ||
+                  approvalStatus === "waiting-for-network" ||
+                  lockupStatus === "waiting-for-user" ||
+                  lockupStatus === "waiting-for-network",
+              }
+            )}
             disabled={
               !lockupAmount ||
               !lockupDuration ||
@@ -571,7 +579,14 @@ const LockupForm: FunctionComponent<LockupFormProps> = ({ existingLockup }) => {
             {approvalButtonText}
           </button>
           <button
-            className="btn btn-primary md:btn-lg rounded-full flex-1"
+            className={classnames(
+              "py-3 text-white px-6 bg-gradient-to-r from-gradient-from to-gradient-to rounded-full",
+              {
+                "cursor-not-allowed opacity-30": !existingLockup
+                  ? actionDisabledNewLockup
+                  : actionDisabledExistingLockup,
+              }
+            )}
             disabled={
               !existingLockup
                 ? actionDisabledNewLockup
diff --git a/client/components/vote-escrow/LockupTable.tsx b/client/components/vote-escrow/LockupTable.tsx
index f21ff6bc..3e6a14ab 100644
--- a/client/components/vote-escrow/LockupTable.tsx
+++ b/client/components/vote-escrow/LockupTable.tsx
@@ -21,7 +21,7 @@ const LockupTable: FunctionComponent<LockupTableProps> = ({ lockup }) => {
   return (
     <table className="table table-compact w-full">
       <thead>
-        <tr>
+        <tr className="bg-inherit border-accent border-opacity-[40%]">
           <th>OGV</th>
           <th>Time remaining</th>
           <th>Lockup ends</th>
@@ -30,14 +30,16 @@ const LockupTable: FunctionComponent<LockupTableProps> = ({ lockup }) => {
       </thead>
       <tbody>
         <tr key={`${lockup.lockupId}`}>
-          <td>
+          <td className="bg-inherit border-accent border-opacity-[40%]">
             <TokenAmount amount={lockup.amount} />
           </td>
-          <td>
+          <td className="bg-inherit border-accent border-opacity-[40%]">
             <TimeToDate epoch={lockup.end} />
           </td>
-          <td>{moment.unix(lockup.end).format("MMM D, YYYY")}</td>
-          <td>
+          <td className="bg-inherit border-accent border-opacity-[40%]">
+            {moment.unix(lockup.end).format("MMM D, YYYY")}
+          </td>
+          <td className="bg-inherit border-accent border-opacity-[40%]">
             <TokenAmount amount={lockup.points} />
           </td>
         </tr>
diff --git a/client/components/vote-escrow/LockupsTable.tsx b/client/components/vote-escrow/LockupsTable.tsx
index d8facbdb..c2252353 100644
--- a/client/components/vote-escrow/LockupsTable.tsx
+++ b/client/components/vote-escrow/LockupsTable.tsx
@@ -15,6 +15,7 @@ import Modal from "components/Modal";
 import { truncateEthAddress } from "utils";
 import EtherscanIcon from "components/EtherscanIcon";
 import ExternalLinkIcon from "../ExternalLinkIcon";
+import classnames from "classnames";
 
 const LockupsTable: FunctionComponent = () => {
   const { lockups, pendingTransactions, contracts, blockTimestamp, chainId } =
@@ -63,7 +64,7 @@ const LockupsTable: FunctionComponent = () => {
     <>
       <table className="table table-compact w-full mb-4">
         <thead>
-          <tr>
+          <tr className="border-accent border-opacity-[40%] text-neutral">
             <th>OGV</th>
             <th>Time remaining</th>
             <th>Lockup ends</th>
@@ -75,36 +76,46 @@ const LockupsTable: FunctionComponent = () => {
             lockups.map((lockup) => {
               return (
                 <>
-                  <tr key={`${lockup.lockupId}`}>
-                    <td>
+                  <tr
+                    key={`${lockup.lockupId}`}
+                    className="border-accent border-opacity-[40%]"
+                  >
+                    <td className="bg-inherit border-accent border-opacity-[40%]">
                       <TokenAmount amount={lockup.amount} />
                     </td>
-                    <td>
+                    <td className="bg-inherit border-accent border-opacity-[40%]">
                       <TimeToDate epoch={lockup.end} />
                     </td>
-                    <td>{moment.unix(lockup.end).format("MMM D, YYYY")}</td>
-                    <td>
+                    <td className="bg-inherit border-accent border-opacity-[40%]">
+                      {moment.unix(lockup.end).format("MMM D, YYYY")}
+                    </td>
+                    <td className="bg-inherit border-accent border-opacity-[40%]">
                       <TokenAmount amount={lockup.points} />
                     </td>
-                    <td>
+                    <td className="bg-inherit border-none">
                       <Link
-                        className="btn rounded-full btn-sm btn-primary"
+                        className="py-2 text-white px-4 bg-gradient-to-r from-gradient-from to-gradient-to rounded-full"
                         href={`/stake/${lockup.lockupId}`}
                       >
                         Extend
                       </Link>
                     </td>
-                    <td>
-                      <Button
-                        white
-                        small
+                    <td className="bg-inherit border-accent border-opacity-[40%]">
+                      <button
+                        className={classnames(
+                          "py-2 text-white px-4 bg-gradient-to-r from-gradient-from to-gradient-to rounded-full",
+                          {
+                            "cursor-not-allowed opacity-30":
+                              blockTimestamp < lockup.end,
+                          }
+                        )}
                         disabled={blockTimestamp < lockup.end}
                         onClick={() => handleUnlock(lockup.lockupId)}
                       >
                         Unstake
-                      </Button>
+                      </button>
                     </td>
-                    <td>
+                    <td className="bg-inherit border-accent border-opacity-[40%]">
                       <button
                         className="flex-shrink-0 flex items-center justify-center w-4 p-0"
                         onClick={() => {
@@ -129,7 +140,7 @@ const LockupsTable: FunctionComponent = () => {
         <h3 className="mb-4 text-lg">Transaction history</h3>
         <table className="table table-compact w-full">
           <thead>
-            <tr>
+            <tr className="bg-inherit border-accent border-opacity-[40%]">
               <th>Transaction time</th>
               <th>Event</th>
               <th>Transaction hash</th>
@@ -141,14 +152,17 @@ const LockupsTable: FunctionComponent = () => {
               modalLockup.transactions.map((transaction) => {
                 return (
                   <tr key={transaction.hash}>
-                    <td>
+                    <td className="bg-inherit border-accent border-opacity-[40%]">
                       {moment(transaction.createdAt).format(
                         "MMM D, YYYY, HH:mm:ss"
                       )}
                     </td>
-                    <td>{transaction.event}</td>
-                    <td>
+                    <td className="bg-inherit border-accent border-opacity-[40%]">
+                      {transaction.event}
+                    </td>
+                    <td className="bg-inherit border-accent border-opacity-[40%]">
                       <Link
+                        className="gradient-link"
                         href={
                           chainId === 5
                             ? `https://goerli.etherscan.io/tx/${transaction.hash}`
diff --git a/client/components/vote-escrow/YourLockups.tsx b/client/components/vote-escrow/YourLockups.tsx
index 4eac50eb..923a877c 100644
--- a/client/components/vote-escrow/YourLockups.tsx
+++ b/client/components/vote-escrow/YourLockups.tsx
@@ -113,16 +113,16 @@ const YourLockups: FunctionComponent<YourLockupsProps> = () => {
     <Card>
       <div className="mb-20">
         <div className="space-y-4 bg-accent text-white -my-10 -mx-6 p-10 md:-mx-10">
-          <h2 className="text-2xl space-y-1">
+          <h2 className="text-2xl space-y-1 font-header">
             <span className="block border-b pb-3 border-secondary/[.15]">
-              <span className="font-bold bg-secondary px-[4px] py-[1px] rounded">
+              <span className="font-bold bg-secondary px-[4px] py-[1px] rounded gradient-link-alt">
                 {totalPercentageOfLockedUpOgv.toFixed(2)}%
               </span>{" "}
               of all OGV is currently staked
             </span>
             <span className="block pt-2">
               OGV stakers earn{" "}
-              <span className="font-bold bg-secondary px-[4px] py-[1px] rounded">
+              <span className="font-bold bg-secondary px-[4px] py-[1px] rounded gradient-link-alt">
                 {stakingApy.toFixed(2)}%
               </span>{" "}
               variable APY
@@ -130,21 +130,21 @@ const YourLockups: FunctionComponent<YourLockupsProps> = () => {
           </h2>
         </div>
       </div>
-      {lockups.length > 0 && <SectionTitle>Your stakes</SectionTitle>}
-      {lockups.length > 0 && <LockupsTable lockups={lockups} />}
+      {lockups.length > 0 && (
+        <>
+          <SectionTitle>Your stakes</SectionTitle>
+          <LockupsTable lockups={lockups} />
+        </>
+      )}
       {!(ogv.eq(0) && lockups.length === 0) && (
-        <div className="space-y-3 flex flex-col md:space-y-0 md:flex-row md:space-x-2">
+        <div className="space-y-3 flex flex-col items-center md:space-y-0 md:flex-row md:space-x-2">
           <DisabledButtonToolTip
             show={ogv.eq(0)}
             text="You have no OGV to stake yet"
           >
             <div>
               <Link
-                className={
-                  ogv.eq(0)
-                    ? "w-full btn rounded-full normal-case space-x-2 btn-lg h-[3.25rem] min-h-[3.25rem] btn-disabled"
-                    : "w-full btn rounded-full normal-case space-x-2 btn-lg h-[3.25rem] min-h-[3.25rem] btn-primary"
-                }
+                className="flex items-center px-4 py-2 text-white bg-gradient-to-r from-gradient-from to-gradient-to rounded-full"
                 href="/stake/new"
               >
                 {lockups.length > 0
@@ -158,24 +158,29 @@ const YourLockups: FunctionComponent<YourLockupsProps> = () => {
             text="You have no rewards to collect yet"
           >
             <div>
-              <Button
+              <button
+                className="text-white px-4 py-2"
+                style={{
+                  background:
+                    "linear-gradient(#1E1F25, #1E1F25) padding-box,linear-gradient(to right, #B361E6 20%, #6A36FC 80%) border-box",
+                  borderRadius: "50em",
+                  border: "1px solid transparent",
+                  borderImage: "linear-gradient(90deg, #B361E6, #6A36FC) 1",
+                }}
                 onClick={handleCollectRewards}
                 disabled={
                   collectRewardsStatus !== "ready" || accruedRewards.eq(0)
                 }
-                large
-                alt
-                fullWidth
               >
                 {collectRewardsButtonText}
-              </Button>
+              </button>
             </div>
           </DisabledButtonToolTip>
         </div>
       )}
       {ogv.eq(0) && lockups.length === 0 && (
         <div className="space-y-4">
-          <p className="text-lg text-center">
+          <p className="text-lg text-center font-header">
             OGV is available on many top exchanges
           </p>
           <ul className="flex space-x-2 items-center justify-center">
@@ -216,7 +221,7 @@ const YourLockups: FunctionComponent<YourLockupsProps> = () => {
             <Link
               href="https://app.uniswap.org/#/swap?outputCurrency=0x9c354503C38481a7A7a51629142963F98eCC12D0&chain=mainnet"
               newWindow
-              className="btn rounded-full normal-case space-x-2 btn-lg h-[3.25rem] min-h-[3.25rem] w-full btn-primary"
+              className="flex items-center justify-center w-full py-3 text-white px-6 bg-gradient-to-r from-gradient-from to-gradient-to rounded-full"
             >
               Buy OGV
             </Link>
diff --git a/client/next.config.js b/client/next.config.js
index 9d199d26..2443d9b1 100644
--- a/client/next.config.js
+++ b/client/next.config.js
@@ -2,10 +2,10 @@
 // with Sentry.
 // https://nextjs.org/docs/api-reference/next.config.js/introduction
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
-const { withSentryConfig } = require('@sentry/nextjs');
+const { withSentryConfig } = require("@sentry/nextjs");
 
 const path = require("path");
-require('dotenv').config()
+require("dotenv").config();
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -22,23 +22,23 @@ const nextConfig = {
   },
   webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
     /* Add any environmental variables here and they will be available in the JS code under
-     * `process.env.[variable]`. 
+     * `process.env.[variable]`.
      *
      * Note: these get "baked in" to the code at build time when building for Goerli / Mainnet
      */
     const envVars = {
-      'production': {
-        NETWORK_ID: 1
+      production: {
+        NETWORK_ID: 1,
       },
-      'dev': {
+      development: {
         NETWORK_ID: 31337,
-        CLAIM_OPENS: 1657580400,
-        CLAIM_CLOSES: 1665356400,
+        CLAIM_OPENS: 1657584000,
+        CLAIM_CLOSES: 1665360000,
       },
-      'staging': {
-        NETWORK_ID: 5
+      staging: {
+        NETWORK_ID: 5,
       },
-    }
+    };
 
     /**
      * Returns environment variables as an object
@@ -46,11 +46,11 @@ const nextConfig = {
     const env = Object.keys(process.env)
       .concat(Object.keys(envVars[process.env.NODE_ENV]))
       .reduce((acc, curr) => {
-        acc[`process.env.${curr}`] = JSON.stringify(process.env[curr])
-        return acc
-      }, {})
+        acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
+        return acc;
+      }, {});
 
-    config.plugins.push(new webpack.DefinePlugin(env))
+    config.plugins.push(new webpack.DefinePlugin(env));
 
     if (isServer) {
       return {
@@ -68,7 +68,4 @@ const nextConfig = {
   },
 };
 
-module.exports = withSentryConfig(
-  nextConfig,
-  { silent: true },
-);
+module.exports = withSentryConfig(nextConfig, { silent: true });
diff --git a/client/package.json b/client/package.json
index fc257e5d..23f57a0e 100644
--- a/client/package.json
+++ b/client/package.json
@@ -8,9 +8,9 @@
     "email": "security@originprotocol.com"
   },
   "scripts": {
-    "dev:web": "NODE_ENV=dev next dev",
-    "dev:listener": "NODE_ENV=dev wait-on .next/server/listener.js && nodemon .next/server/listener.js",
-    "dev": "NODE_ENV=dev rm -f .next/server/listener.js && npm-run-all -p dev:listener dev:web",
+    "dev:web": "next dev",
+    "dev:listener": "wait-on .next/server/listener.js && nodemon .next/server/listener.js",
+    "dev": "rm -f .next/server/listener.js && npm-run-all -p dev:listener dev:web",
     "build": "next build && npx prisma migrate deploy",
     "start:listener": "node .next/server/listener.js",
     "start:web": "next start",
diff --git a/client/pages/_document.tsx b/client/pages/_document.tsx
index 4b24679b..8574114e 100644
--- a/client/pages/_document.tsx
+++ b/client/pages/_document.tsx
@@ -15,7 +15,7 @@ class OUSDGovernanceDocument extends Document {
           <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
           <link rel="icon" href="/favicon.ico" type="image/x-icon" />
         </Head>
-        <body className="bg-base-100">
+        <body className="bg-primary-content">
           <noscript>
             <iframe
               src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
diff --git a/client/pages/claim.tsx b/client/pages/claim.tsx
index c9430225..5a066bb2 100644
--- a/client/pages/claim.tsx
+++ b/client/pages/claim.tsx
@@ -1,20 +1,8 @@
-import { useState, useEffect } from "react";
 import type { NextPage } from "next";
 import Wrapper from "components/Wrapper";
-import StepTracker from "components/StepTracker";
-import Education from "@/components/claim/Education";
-import Eligibility from "@/components/claim/Eligibility";
-import HoldingPage from "components/holding/Page";
-import Claim from "components/claim/Claim";
-import { useStore } from "utils/store";
-import { claimOpenTimestampPassed, claimIsOpen } from "utils";
 import Seo from "components/Seo";
 import { PageTitle } from "components/PageTitle";
-import CardGroup from "components/CardGroup";
-import AccountBalances from "components/vote-escrow/AccountBalances";
-import YourLockups from "components/vote-escrow/YourLockups";
 import Card from "components/Card";
-import Button from "components/Button";
 import useClaim from "utils/useClaim";
 import { getRewardsApy } from "utils/apy";
 import Link from "components/Link";
@@ -34,53 +22,60 @@ const ClaimPage: NextPage<ClaimPageProps> = () => {
   return (
     <Wrapper narrow>
       <Seo title="Claim OGV" />
-      <PageTitle>Claim</PageTitle>
+      <PageTitle>OGV Claim</PageTitle>
       <Card margin>
         <div className="bg-accent text-white -mt-10 -mx-6 p-10 md:-mx-10 text-center">
-          <h2 className="text-[1.75rem] line-height-[2.125rem]">
+          <h2 className="text-2xl font-header">
             The claim period has now expired
           </h2>
-          <div className="mt-3 text-sm font-bold">
+          <div className="mt-4 text-sm">
             {`All unclaimed OGV was burned after 90 days. You can still buy OGV and stake it for up to four years. Current OGV stakers are earning a vAPY of ${stakingApy.toFixed(
               2
             )}%.`}
           </div>
-          <div className="mt-6">
+          <div className="mt-10">
             <Link
-              className={
-                "w-[15.5rem] btn rounded-full normal-case space-x-2 btn-lg h-[3.25rem] min-h-[3.25rem] bg-white border-none"
-              }
+              className="py-3 text-white px-6 bg-gradient-to-r from-gradient-from to-gradient-to rounded-full"
               href="/stake"
             >
               {"Create a new stake"}
             </Link>
           </div>
         </div>
-        <div className="-mb-10 -mx-6 p-10 md:-mx-10 text-center">
-          <div>
-            <Link
-              className={
-                "w-[15.5rem] btn rounded-full normal-case space-x-2 btn-lg h-[3.25rem] min-h-[3.25rem] btn-primary border-none"
-              }
-              href="https://blog.originprotocol.com/tokenomics-retroactive-rewards-and-prelaunch-liquidity-mining-campaign-for-ogv-1b20b8ab41c8"
-              type="external"
-              newWindow
+        <div className="flex flex-col items-center justify-center gap-6 mt-16 mb-8">
+          <Link
+            className="flex"
+            href="https://blog.originprotocol.com/tokenomics-retroactive-rewards-and-prelaunch-liquidity-mining-campaign-for-ogv-1b20b8ab41c8"
+            type="external"
+            newWindow
+          >
+            <div
+              className="text-white px-6 py-3"
+              style={{
+                background:
+                  "linear-gradient(#1E1F25, #1E1F25) padding-box,linear-gradient(to right, #B361E6 20%, #6A36FC 80%) border-box",
+                borderRadius: "50em",
+                border: "1px solid transparent",
+                borderImage: "linear-gradient(90deg, #B361E6, #6A36FC) 1",
+              }}
             >
-              {"Read about the airdrop"}
-            </Link>
-          </div>
-          <div className="mt-2">
-            <Link
-              className={
-                "w-[15.5rem] btn rounded-full normal-case space-x-2 btn-lg h-[3.25rem] min-h-[3.25rem] btn-primary border-none"
-              }
-              href="https://www.ousd.com/burn"
-              type="external"
-              newWindow
+              Read about the airdrop
+            </div>
+          </Link>
+          <Link href="https://www.ousd.com/burn" type="external" newWindow>
+            <div
+              className="text-white px-6 py-3"
+              style={{
+                background:
+                  "linear-gradient(#1E1F25, #1E1F25) padding-box,linear-gradient(to right, #B361E6 20%, #6A36FC 80%) border-box",
+                borderRadius: "50em",
+                border: "1px solid transparent",
+                borderImage: "linear-gradient(90deg, #B361E6, #6A36FC) 1",
+              }}
             >
-              {"See the OGV burn"}
-            </Link>
-          </div>
+              See the OGV burn
+            </div>
+          </Link>
         </div>
       </Card>
     </Wrapper>
diff --git a/client/pages/index.tsx b/client/pages/index.tsx
index 5abddda4..1b1bba70 100644
--- a/client/pages/index.tsx
+++ b/client/pages/index.tsx
@@ -140,18 +140,20 @@ const Home: NextPage<HomeProps> = ({
           {loading ? (
             <Loading />
           ) : (
-            <div className="space-y-4">
+            <div className="flex flex-col space-y-4">
               <ProposalTable
                 title="Recent Proposals"
                 proposalData={proposalData}
               />
               {proposalCount > 0 && (
-                <Link
-                  href="/proposals"
-                  className="btn rounded-full normal-case space-x-2 w-full btn-primary btn-outline disabled:border-gray-100 disabled:text-gray-300"
-                >
-                  View All Proposals
-                </Link>
+                <div className="flex flex-col items-center justify-center">
+                  <Link
+                    href="/proposals"
+                    className="py-3 text-white px-6 bg-gradient-to-r from-gradient-from to-gradient-to rounded-full"
+                  >
+                    View All Proposals
+                  </Link>
+                </div>
               )}
             </div>
           )}
@@ -161,12 +163,14 @@ const Home: NextPage<HomeProps> = ({
           <div className="space-y-4">
             <LeaderboardTable voters={voters} />
             {voters && voters.length > 0 && (
-              <Link
-                href="/leaderboard"
-                className="btn rounded-full normal-case space-x-2 w-full btn-primary btn-outline disabled:border-gray-100 disabled:text-gray-300"
-              >
-                View Leaderboard
-              </Link>
+              <div className="flex flex-col items-center justify-center">
+                <Link
+                  href="/leaderboard"
+                  className="py-3 text-white px-6 bg-gradient-to-r from-gradient-from to-gradient-to rounded-full"
+                >
+                  View Leaderboard
+                </Link>
+              </div>
             )}
           </div>
         </Card>
diff --git a/client/pages/proposals/[id].tsx b/client/pages/proposals/[id].tsx
index 1bfb6502..3a127b98 100644
--- a/client/pages/proposals/[id].tsx
+++ b/client/pages/proposals/[id].tsx
@@ -7,7 +7,7 @@ import { getCleanProposalContent } from "utils";
 import moment from "moment";
 import Link from "components/Link";
 import Icon from "@mdi/react";
-import { mdiArrowLeft } from "@mdi/js";
+import { mdiChevronLeft as LeftArrowIcon } from "@mdi/js";
 
 export async function getServerSideProps({
   res,
@@ -54,10 +54,10 @@ const ProposalPage: NextPage = ({
     <Wrapper narrow>
       <Seo title={cleanTitle} />
       <Link
-        className="mb-5 flex items-center uppercase text-xs font-bold text-gray-300 hover:text-white"
+        className="mb-5 flex text-xs items-center text-white"
         href="/proposals"
       >
-        <Icon className="mr-1" path={mdiArrowLeft} size={0.75} />
+        <Icon className="mr-2" path={LeftArrowIcon} size={0.8} />
         Proposals
       </Link>
       <ProposalDetail
diff --git a/client/pages/proposals/index.tsx b/client/pages/proposals/index.tsx
index a65d6a16..e8d001ea 100644
--- a/client/pages/proposals/index.tsx
+++ b/client/pages/proposals/index.tsx
@@ -6,7 +6,6 @@ import type { ProposalDataType } from "pages/index";
 import { Loading } from "components/Loading";
 import { ProposalTable } from "components/proposal/ProposalTable";
 import { PageTitle } from "components/PageTitle";
-import Card from "components/Card";
 import Wrapper from "components/Wrapper";
 import prisma from "lib/prisma";
 import Seo from "components/Seo";
@@ -88,13 +87,11 @@ const Proposal: NextPage = ({ proposals }) => {
   return (
     <Wrapper narrow>
       <Seo title="Proposals" />
-      <PageTitle>Proposals</PageTitle>
+      <PageTitle>Origin DeFi Governance</PageTitle>
       {loading ? (
         <Loading />
       ) : (
-        <Card>
-          <ProposalTable proposalData={proposalData} />
-        </Card>
+        <ProposalTable title="Proposals" proposalData={proposalData} />
       )}
     </Wrapper>
   );
diff --git a/client/pages/register-vote.tsx b/client/pages/register-vote.tsx
index 830eba73..58ba562b 100644
--- a/client/pages/register-vote.tsx
+++ b/client/pages/register-vote.tsx
@@ -1,8 +1,6 @@
 import { PageTitle } from "components/PageTitle";
-import CardGroup from "components/CardGroup";
+import { SectionTitle } from "components/SectionTitle";
 import Wrapper from "components/Wrapper";
-import AccountBalances from "components/vote-escrow/AccountBalances";
-import YourLockups from "components/vote-escrow/YourLockups";
 import Seo from "components/Seo";
 import RegisterToVote from "components/proposal/RegisterToVote";
 
@@ -10,7 +8,8 @@ export default function VoteEscrow() {
   return (
     <Wrapper narrow>
       <Seo title="Register Vote" />
-      <PageTitle>Register Vote</PageTitle>
+      <PageTitle>Origin DeFi Governance</PageTitle>
+      <SectionTitle>Register Vote</SectionTitle>
       <RegisterToVote whiteRegisterCta showNoVeOgvMessage withCard />
     </Wrapper>
   );
diff --git a/client/pages/stake/[id].tsx b/client/pages/stake/[id].tsx
index c5653a23..5863f482 100644
--- a/client/pages/stake/[id].tsx
+++ b/client/pages/stake/[id].tsx
@@ -49,19 +49,14 @@ const LockupSingle: NextPage<LockupSingleProps> = ({ lockupId }) => {
       <PageTitle>Extend Stake</PageTitle>
       <CardGroup>
         <AccountBalances />
-        {!lockup && <p className="text-gray-300">No stake found.</p>}
+        {!lockup && <p className="text-neutral">No stake found.</p>}
         {lockup && lockup?.user !== address && (
-          <p className="text-gray-300">This lockup isn&apos;t yours.</p>
+          <p className="text-neutral">This lockup isn&apos;t yours.</p>
         )}
         {lockup && lockup?.user === address && (
           <LockupForm existingLockup={lockup} />
         )}
       </CardGroup>
-      <div className="mt-6">
-        <Link className="btn rounded-full" href={`/stake`}>
-          &larr; Back to OGV Staking
-        </Link>
-      </div>
     </Wrapper>
   );
 };
diff --git a/client/pages/stake/index.tsx b/client/pages/stake/index.tsx
index 5d1c5b2b..3a192e3b 100644
--- a/client/pages/stake/index.tsx
+++ b/client/pages/stake/index.tsx
@@ -1,4 +1,5 @@
 import { PageTitle } from "components/PageTitle";
+import { SectionTitle } from "components/SectionTitle";
 import CardGroup from "components/CardGroup";
 import Wrapper from "components/Wrapper";
 import AccountBalances from "components/vote-escrow/AccountBalances";
@@ -9,7 +10,8 @@ export default function VoteEscrow() {
   return (
     <Wrapper narrow>
       <Seo title="Stake OGV" />
-      <PageTitle>OGV Staking</PageTitle>
+      <PageTitle>Origin DeFi Governance</PageTitle>
+      <SectionTitle>OGV Staking</SectionTitle>
       <CardGroup>
         <AccountBalances />
         <YourLockups />
diff --git a/client/pages/stake/new.tsx b/client/pages/stake/new.tsx
index 777069a1..4e74fdcd 100644
--- a/client/pages/stake/new.tsx
+++ b/client/pages/stake/new.tsx
@@ -8,6 +8,7 @@ import Link from "components/Link";
 import Seo from "components/Seo";
 import CardGroup from "components/CardGroup";
 import AccountBalances from "components/vote-escrow/AccountBalances";
+import { SectionTitle } from "@/components/SectionTitle";
 
 const LockupNew: NextPage = () => {
   const { web3Provider } = useStore();
@@ -23,16 +24,12 @@ const LockupNew: NextPage = () => {
   return (
     <Wrapper narrow>
       <Seo title="New Stake" />
-      <PageTitle>New Stake</PageTitle>
+      <PageTitle>Origin DeFi Governance</PageTitle>
+      <SectionTitle>OGV Staking</SectionTitle>
       <CardGroup>
         <AccountBalances />
         <LockupForm />
       </CardGroup>
-      <div className="mt-6">
-        <Link className="btn rounded-full" href={`/stake`}>
-          &larr; Back to OGV Staking
-        </Link>
-      </div>
     </Wrapper>
   );
 };
diff --git a/client/public/close-icon.svg b/client/public/close-icon.svg
index 4499565b..6fd433db 100644
--- a/client/public/close-icon.svg
+++ b/client/public/close-icon.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="17" viewBox="0 0 18 17">
     <g fill-rule="evenodd">
-        <path d="M-2 8L20 8 20 9 -2 9z" transform="rotate(-45 9 8.5)"/>
-        <path d="M-2 8L20 8 20 9 -2 9z" transform="rotate(45 9 8.5)"/>
+        <path d="M-2 8L20 8 20 9 -2 9z" transform="rotate(-45 9 8.5)" fill="#ffffff"/>
+        <path d="M-2 8L20 8 20 9 -2 9z" transform="rotate(45 9 8.5)" fill="#ffffff" />
     </g>
 </svg>
diff --git a/client/public/etherscan-icon.svg b/client/public/etherscan-icon.svg
index e87fad8b..013e324b 100644
--- a/client/public/etherscan-icon.svg
+++ b/client/public/etherscan-icon.svg
@@ -1,3 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path fill="#a4b0bf" fill-rule="evenodd" d="M4.95 21.704c5.357 3.897 12.858 2.714 16.755-2.644C23.197 17.008 24 14.537 24 12c0-.276-.013-.55-.031-.821-4.383 6.537-12.474 9.594-19.018 10.525m.037-10.278c0-.561.455-1.017 1.017-1.017h.005l1.694.005c.562 0 1.018.457 1.018 1.02v6.407c.191-.056.436-.116.704-.18.383-.09.654-.432.654-.826V8.887c0-.563.456-1.02 1.019-1.02h1.697c.563 0 1.019.457 1.019 1.02v7.377s.425-.172.839-.347c.314-.133.519-.441.519-.782V6.339c0-.562.456-1.019 1.018-1.019h1.698c.562 0 1.018.456 1.018 1.02v7.242c1.472-1.067 2.963-2.35 4.147-3.893.349-.455.447-1.055.26-1.597-1.64-4.784-6.108-8.021-11.163-8.09C5.498-.089 0 5.343 0 12c-.006 2.106.543 4.176 1.593 6.002.296.51.86.802 1.447.75.32-.029.72-.069 1.196-.124.428-.05.752-.411.752-.843v-6.36"/>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2_595)">
+<path d="M4.1459 9.49408C4.14592 9.38273 4.16793 9.2725 4.21067 9.1697C4.25341 9.06688 4.31603 8.97354 4.39495 8.895C4.47389 8.81645 4.56752 8.75427 4.67054 8.71203C4.77356 8.6698 4.8839 8.64832 4.99525 8.64883L6.40344 8.65342C6.62795 8.65342 6.84328 8.74262 7.00203 8.90137C7.1608 9.06014 7.25 9.27546 7.25 9.49998V14.8246C7.40852 14.7775 7.61213 14.7274 7.83492 14.6749C7.98967 14.6386 8.12759 14.551 8.22631 14.4264C8.32502 14.3018 8.37872 14.1475 8.37869 13.9885V7.38359C8.37869 7.15905 8.46787 6.94372 8.62662 6.78493C8.78538 6.62614 9.0007 6.53691 9.22525 6.53687H10.6362C10.8608 6.53691 11.0761 6.62614 11.2348 6.78493C11.3936 6.94372 11.4828 7.15905 11.4828 7.38359V13.5136C11.4828 13.5136 11.8361 13.3706 12.1802 13.2254C12.308 13.1713 12.4171 13.0808 12.4938 12.9652C12.5705 12.8495 12.6115 12.7138 12.6116 12.5751V5.26719C12.6116 5.0427 12.7008 4.82741 12.8595 4.66865C13.0182 4.50988 13.2335 4.42068 13.458 4.42064H14.869C15.0935 4.42064 15.3089 4.50983 15.4676 4.66859C15.6264 4.82734 15.7156 5.04267 15.7156 5.26719V11.2851C16.9389 10.3985 18.1785 9.33228 19.1623 8.05014C19.3051 7.86405 19.3995 7.64552 19.4372 7.41405C19.4749 7.18259 19.4548 6.94537 19.3785 6.72359C18.9231 5.41339 18.1993 4.21267 17.2533 3.19829C16.3072 2.1839 15.1598 1.37817 13.8845 0.832675C12.6092 0.28718 11.234 0.0139247 9.84707 0.0303963C8.46008 0.0468682 7.09182 0.352705 5.82984 0.928334C4.56784 1.50396 3.4399 2.3367 2.51821 3.37328C1.59653 4.40985 0.90138 5.62741 0.477264 6.94806C0.0531487 8.2687 -0.0905982 9.66334 0.0552215 11.0427C0.201041 12.4221 0.633218 13.7559 1.32409 14.9587C1.44444 15.1661 1.6215 15.335 1.83448 15.4453C2.04744 15.5557 2.28748 15.6029 2.52639 15.5816C2.79328 15.5582 3.12557 15.5249 3.52066 15.4785C3.69264 15.459 3.85143 15.3769 3.96675 15.2478C4.0821 15.1187 4.14592 14.9518 4.14607 14.7787L4.1459 9.49408Z" fill="white"/>
+<path d="M4.11511 18.0343C5.60237 19.1162 7.36 19.7657 9.19349 19.9108C11.027 20.0557 12.8649 19.6908 14.5038 18.8561C16.1427 18.0213 17.5187 16.7495 18.4797 15.1813C19.4405 13.613 19.9489 11.8095 19.9484 9.9703C19.9484 9.74079 19.9377 9.51372 19.9225 9.28799C16.28 14.7204 9.55462 17.2602 4.11542 18.0334" fill="#8B8B8B"/>
+</g>
+<defs>
+<clipPath id="clip0_2_595">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/client/public/fonts/Inter/Inter-Black.ttf b/client/public/fonts/Inter/Inter-Black.ttf
new file mode 100644
index 00000000..5aecf7dc
Binary files /dev/null and b/client/public/fonts/Inter/Inter-Black.ttf differ
diff --git a/client/public/fonts/Inter/Inter-Bold.ttf b/client/public/fonts/Inter/Inter-Bold.ttf
new file mode 100644
index 00000000..8e82c70d
Binary files /dev/null and b/client/public/fonts/Inter/Inter-Bold.ttf differ
diff --git a/client/public/fonts/Inter/Inter-ExtraBold.ttf b/client/public/fonts/Inter/Inter-ExtraBold.ttf
new file mode 100644
index 00000000..cb4b8217
Binary files /dev/null and b/client/public/fonts/Inter/Inter-ExtraBold.ttf differ
diff --git a/client/public/fonts/Inter/Inter-ExtraLight.ttf b/client/public/fonts/Inter/Inter-ExtraLight.ttf
new file mode 100644
index 00000000..64aee30a
Binary files /dev/null and b/client/public/fonts/Inter/Inter-ExtraLight.ttf differ
diff --git a/client/public/fonts/Inter/Inter-Light.ttf b/client/public/fonts/Inter/Inter-Light.ttf
new file mode 100644
index 00000000..9e265d89
Binary files /dev/null and b/client/public/fonts/Inter/Inter-Light.ttf differ
diff --git a/client/public/fonts/Inter/Inter-Medium.ttf b/client/public/fonts/Inter/Inter-Medium.ttf
new file mode 100644
index 00000000..b53fb1c4
Binary files /dev/null and b/client/public/fonts/Inter/Inter-Medium.ttf differ
diff --git a/client/public/fonts/Inter/Inter-Regular.ttf b/client/public/fonts/Inter/Inter-Regular.ttf
new file mode 100644
index 00000000..8d4eebf2
Binary files /dev/null and b/client/public/fonts/Inter/Inter-Regular.ttf differ
diff --git a/client/public/fonts/Inter/Inter-SemiBold.ttf b/client/public/fonts/Inter/Inter-SemiBold.ttf
new file mode 100644
index 00000000..c6aeeb16
Binary files /dev/null and b/client/public/fonts/Inter/Inter-SemiBold.ttf differ
diff --git a/client/public/fonts/Inter/Inter-Thin.ttf b/client/public/fonts/Inter/Inter-Thin.ttf
new file mode 100644
index 00000000..7aed55d5
Binary files /dev/null and b/client/public/fonts/Inter/Inter-Thin.ttf differ
diff --git a/client/public/fonts/Sailec/Sailec-Black.otf b/client/public/fonts/Sailec/Sailec-Black.otf
new file mode 100644
index 00000000..056342fd
Binary files /dev/null and b/client/public/fonts/Sailec/Sailec-Black.otf differ
diff --git a/client/public/fonts/Sailec/Sailec-BlackItalic.otf b/client/public/fonts/Sailec/Sailec-BlackItalic.otf
new file mode 100644
index 00000000..eb297609
Binary files /dev/null and b/client/public/fonts/Sailec/Sailec-BlackItalic.otf differ
diff --git a/client/public/fonts/Sailec/Sailec-Bold.otf b/client/public/fonts/Sailec/Sailec-Bold.otf
new file mode 100644
index 00000000..c6c988f1
Binary files /dev/null and b/client/public/fonts/Sailec/Sailec-Bold.otf differ
diff --git a/client/public/fonts/Sailec/Sailec-BoldItalic.otf b/client/public/fonts/Sailec/Sailec-BoldItalic.otf
new file mode 100644
index 00000000..4cf0842e
Binary files /dev/null and b/client/public/fonts/Sailec/Sailec-BoldItalic.otf differ
diff --git a/client/public/fonts/Sailec/Sailec-Hairline.otf b/client/public/fonts/Sailec/Sailec-Hairline.otf
new file mode 100644
index 00000000..5f3414e3
Binary files /dev/null and b/client/public/fonts/Sailec/Sailec-Hairline.otf differ
diff --git a/client/public/fonts/Sailec/Sailec-HairlineItalic.otf b/client/public/fonts/Sailec/Sailec-HairlineItalic.otf
new file mode 100644
index 00000000..25687a1c
Binary files /dev/null and b/client/public/fonts/Sailec/Sailec-HairlineItalic.otf differ
diff --git a/client/public/fonts/Sailec/Sailec-Light.otf b/client/public/fonts/Sailec/Sailec-Light.otf
new file mode 100644
index 00000000..7cc318f1
Binary files /dev/null and b/client/public/fonts/Sailec/Sailec-Light.otf differ
diff --git a/client/public/fonts/Sailec/Sailec-LightItalic.otf b/client/public/fonts/Sailec/Sailec-LightItalic.otf
new file mode 100644
index 00000000..848f1a56
Binary files /dev/null and b/client/public/fonts/Sailec/Sailec-LightItalic.otf differ
diff --git a/client/public/fonts/Sailec/Sailec-Medium.otf b/client/public/fonts/Sailec/Sailec-Medium.otf
new file mode 100644
index 00000000..7118cc0a
Binary files /dev/null and b/client/public/fonts/Sailec/Sailec-Medium.otf differ
diff --git a/client/public/fonts/Sailec/Sailec-MediumItalic.otf b/client/public/fonts/Sailec/Sailec-MediumItalic.otf
new file mode 100644
index 00000000..7c1c66f3
Binary files /dev/null and b/client/public/fonts/Sailec/Sailec-MediumItalic.otf differ
diff --git a/client/public/fonts/Sailec/Sailec-Regular.otf b/client/public/fonts/Sailec/Sailec-Regular.otf
new file mode 100644
index 00000000..93439fe4
Binary files /dev/null and b/client/public/fonts/Sailec/Sailec-Regular.otf differ
diff --git a/client/public/fonts/Sailec/Sailec-RegularItalic.otf b/client/public/fonts/Sailec/Sailec-RegularItalic.otf
new file mode 100644
index 00000000..d7f15edd
Binary files /dev/null and b/client/public/fonts/Sailec/Sailec-RegularItalic.otf differ
diff --git a/client/public/fonts/Sailec/Sailec-Thin.otf b/client/public/fonts/Sailec/Sailec-Thin.otf
new file mode 100644
index 00000000..1e50103d
Binary files /dev/null and b/client/public/fonts/Sailec/Sailec-Thin.otf differ
diff --git a/client/public/fonts/Sailec/Sailec-ThinItalic.otf b/client/public/fonts/Sailec/Sailec-ThinItalic.otf
new file mode 100644
index 00000000..86fc6702
Binary files /dev/null and b/client/public/fonts/Sailec/Sailec-ThinItalic.otf differ
diff --git a/client/public/logo.svg b/client/public/logo.svg
index aae3a39f..95ab3b21 100644
--- a/client/public/logo.svg
+++ b/client/public/logo.svg
@@ -1,12 +1,7 @@
-<svg width="204" height="29" viewBox="0 0 204 29" xmlns="http://www.w3.org/2000/svg">
-    <g fill-rule="nonzero" fill="none">
-        <path d="M98.45 20.466V.556h7.038c6.096 0 10.523 4.223 10.523 10.046 0 5.812-4.314 9.864-10.5 9.864h-7.06zm3.94-3.575h2.826c3.144 0 6.822-1.646 6.822-6.277 0-4.462-3.428-6.46-6.822-6.46h-2.827v12.737zm47.766 3.575V16.88h-8.071V.556h-3.94v19.91h12.01zm14.064 0V16.88h-8.07V.556h-3.94v19.91h12.01zm17.447 0-1.26-3.484h-9.501l-1.26 3.484h-4.132L173.2.556h4.983l7.708 19.91h-4.223zM175.219 5.29c-.102.102-.102.102-.794 1.918l-.5 1.328-1.77 4.95h6.992l-1.76-4.904c-.272-.738-.522-1.385-.715-1.896-.488-1.294-.488-1.294-.59-1.396l-.159-.16h-.545l-.159.16zm23.441 15.176-3.928-6.935h-3.121v6.935h-3.94V.556h7.436c4.904 0 7.821 2.452 7.821 6.561 0 2.645-1.283 4.586-3.61 5.46l-.624.239 4.643 7.65h-4.677zm-7.06-9.852h3.825c2.18 0 3.428-1.181 3.428-3.247 0-2.123-1.26-3.337-3.462-3.337h-3.792v6.584zM133.627 3.2C131.948 1.215 129.61.16 126.874.16c-2.736 0-5.074 1.056-6.754 3.042-1.578 1.873-2.452 4.473-2.452 7.31 0 2.838.874 5.438 2.463 7.31 1.692 1.987 3.996 3.043 6.743 3.043 2.736 0 5.051-1.056 6.743-3.042 1.589-1.873 2.463-4.473 2.463-7.31 0-2.838-.874-5.438-2.452-7.31zm-6.754 13.77c-3.178 0-5.051-2.419-5.051-6.46 0-1.861.374-3.36 1.123-4.472.875-1.294 2.237-1.987 3.928-1.987 1.691 0 3.054.682 3.928 1.987.749 1.101 1.123 2.61 1.123 4.472 0 4.041-1.861 6.46-5.05 6.46z" fill="#687F89"/>
-        <path d="m31.466 20.478-3.95-6.8h-3.247v6.8h-3.95V.556h6.97c4.892 0 7.82 2.645 7.82 6.652 0 2.736-1.339 4.722-3.757 5.721l4.552 7.537h-4.438v.012zm-7.197-10.33h3.53c2.191 0 3.213-1.419 3.213-2.929 0-1.566-1.056-2.962-3.213-2.962h-3.53v5.891zm13.44 10.33V.556h3.95v19.91h-3.95v.012zM59.981 18.4c-1.079 1.225-3.44 2.474-6.028 2.474-5.721 0-10.33-4.347-10.33-10.352S48.232.17 53.953.17c3.95.034 7.253 2.078 9.047 5.267l-4.041 1.056c-1.078-1.476-3.042-2.418-5.006-2.418-3.723 0-6.198 2.68-6.198 6.46 0 3.95 2.736 6.48 6.425 6.48 3.417 0 5.21-1.872 5.835-3.416v-.851h-5.529V9.535h8.9V20.49h-3.417c0-1.646.034-2.043.034-2.077h-.022V18.4zm6.197 2.077V.556h3.95v19.91h-3.95v.012zM90.538.556v19.91h-3.723l-5.664-7.684c-1.794-2.452-3.985-5.574-4.007-5.574h-.034c-.023 0 .034 2.872.034 6.822v6.425h-3.95V.556h3.723l5.778 7.765c1.362 1.793 3.87 5.346 3.893 5.346h.034c.034 0-.034-3.246-.034-6.595V.556h3.95zm-73.057 4.62L14.257 8.4c.125.636.193 1.34.193 2.1 0 4.075-1.918 6.516-5.13 6.516-1.34 0-2.464-.432-3.315-1.249l11.17-11.17a8.978 8.978 0 0 0-1.022-1.475c-.159-.193-.33-.364-.5-.545l-.068-.068c-.056-.046-.102-.103-.159-.148C13.803.851 11.715.045 9.331.045 6.572.045 4.21 1.101 2.52 3.11.93 4.995.045 7.617.045 10.49c0 1.907.386 3.7 1.113 5.244l3.246-3.247a11.053 11.053 0 0 1-.17-2.009c0-1.873.386-3.394 1.135-4.518.886-1.305 2.26-1.997 3.962-1.997 1.328 0 2.44.42 3.28 1.203L1.464 16.312a9.26 9.26 0 0 0 1.056 1.544c.08.09.159.181.25.272.09.102.193.204.295.307l.034.034c.034.034.057.068.09.09 1.624 1.544 3.724 2.362 6.142 2.362 2.77 0 5.13-1.056 6.833-3.065 1.6-1.896 2.486-4.507 2.486-7.379-.011-1.907-.42-3.734-1.169-5.3z" fill="#FFF"/>
-        <g opacity=".6" fill="#97A9B1">
-            <path d="M178.17.556h-4.982l-3.803 9.853h3.87l.67-1.861.5-1.329c.68-1.816.68-1.816.794-1.918l.16-.159h.544l.16.16c.101.101.101.101.59 1.395.192.511.43 1.17.715 1.896l.658 1.828h3.95L178.171.556zM195.096.556h-7.435v9.853h3.938V4.02h3.792c2.202 0 3.462 1.214 3.462 3.337 0 1.566-.727 2.633-2.032 3.053h5.233c.568-.908.874-2.02.874-3.292-.011-4.109-2.929-6.56-7.832-6.56zM152.21.557h3.94v9.853h-3.94zM105.488.556H98.45v9.853h3.94V4.143h2.826c3.348 0 6.72 1.941 6.822 6.266h3.973c-.102-5.72-4.495-9.853-10.523-9.853zM133.628 3.201C131.948 1.215 129.61.16 126.874.16c-2.736 0-5.074 1.056-6.754 3.042-1.566 1.85-2.43 4.404-2.452 7.208h4.155c.011-1.816.386-3.28 1.123-4.37.875-1.294 2.237-1.987 3.928-1.987 1.691 0 3.054.682 3.928 1.987.737 1.09 1.112 2.554 1.123 4.37h4.155c-.023-2.804-.885-5.358-2.452-7.208zM138.146.557h3.94v9.853h-3.94z"/>
-        </g>
-        <g fill="#4BBC8A">
-            <path d="M155.384 28.517c0-.294.011-.317.011-.35h-.011c-.295.248-.85.452-1.44.452-1.416 0-2.618-1.065-2.618-2.652 0-1.553 1.122-2.64 2.641-2.64 1.156 0 2.04.645 2.37 1.473l-1.214.328c-.192-.328-.578-.646-1.224-.646-.827 0-1.349.612-1.349 1.497 0 .906.59 1.496 1.497 1.496.702 0 1.133-.306 1.292-.522v-.238h-1.281v-1.133h2.414v2.958h-1.088v-.023zM159.691 23.315c1.553 0 2.686 1.088 2.686 2.652 0 1.553-1.133 2.652-2.686 2.652s-2.686-1.088-2.686-2.652 1.122-2.652 2.686-2.652zm0 4.148c.85 0 1.45-.578 1.45-1.496s-.611-1.496-1.45-1.496-1.45.578-1.45 1.496c-.012.907.6 1.496 1.45 1.496zM164.259 28.517l-1.825-5.1h1.394l.782 2.414c.318.952.442 1.349.442 1.372h.023c.011-.023.136-.42.442-1.35l.793-2.436h1.327l-1.825 5.1h-1.553zM168.124 23.417h3.718v1.133h-2.494v.873h1.836v1.02h-1.836v.93h2.528v1.133h-3.752zM174.358 26.829h-.544v1.677h-1.224v-5.1h1.938c1.28 0 2.029.668 2.029 1.722 0 .703-.34 1.213-.964 1.451l1.168 1.927h-1.451l-.952-1.677zm.25-.975c.453 0 .702-.227.702-.658 0-.419-.238-.68-.703-.68h-.782v1.338h.782zM178.518 25.469h-.023c0 .01.011.634.011 1.292v1.745h-1.224v-5.1h1.236l2.164 2.98h.023c0-.01-.011-.657-.011-1.212v-1.768h1.224v5.1h-1.247l-2.153-3.037zM184.026 27.667l-.306.85h-1.292l1.96-5.1h1.395l1.972 5.1h-1.303l-.306-.85h-2.12zm1.349-2.12c-.159-.419-.272-.747-.283-.747h-.023c-.011.011-.125.317-.283.748l-.363 1.02h1.315l-.363-1.02zM189.49 25.469h-.023c0 .01.011.634.011 1.292v1.745h-1.213v-5.1h1.236l2.165 2.98h.022c0-.01-.011-.657-.011-1.212v-1.768h1.224v5.1h-1.247l-2.165-3.037zM198.58 27.01c-.374.986-1.315 1.61-2.426 1.61-1.519 0-2.64-1.066-2.64-2.664 0-1.553 1.121-2.641 2.64-2.641 1.167 0 2.029.646 2.369 1.473l-1.213.33c-.26-.409-.68-.647-1.224-.647-.827 0-1.349.612-1.349 1.496 0 .907.556 1.496 1.349 1.496.669 0 1.088-.351 1.292-.77l1.202.317zM199.18 23.417h3.718v1.133h-2.494v.873h1.837v1.02h-1.848v.93h2.528v1.133h-3.752v-5.089z"/>
-        </g>
-    </g>
+<svg width="174" height="24" viewBox="0 0 174 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.8675 23.3456L31.3468 15.5724C31.2432 15.5724 31.1784 15.5724 31.0878 15.5724H27.6422V23.3456H23.1345V0.570988H31.0878C36.6706 0.570988 40.0125 3.59463 40.0125 8.1755C40.0125 11.303 38.484 13.5739 35.725 14.7159L40.9193 23.3326H35.8675V23.3456ZM27.6551 11.5365H31.6836C34.1836 11.5365 35.3494 9.91442 35.3494 8.18848C35.3494 6.39766 34.1447 4.80149 31.6836 4.80149H27.6551V11.5365ZM42.9918 23.3456V0.570988H47.4995V23.3326H42.9918V23.3456ZM68.406 20.9708C67.1755 22.3723 64.4812 23.7998 61.5278 23.7998C54.9994 23.7998 49.7404 18.8296 49.7404 11.9648C49.7404 5.09996 54.9994 0.12977 61.5278 0.12977C66.0356 0.168701 69.805 2.50456 71.8516 6.15109L67.2402 7.35795C66.0097 5.67095 63.7688 4.59386 61.5278 4.59386C57.2792 4.59386 54.4554 7.65643 54.4554 11.9778C54.4554 16.4938 57.5771 19.3876 61.7869 19.3876C65.6858 19.3876 67.7324 17.2464 68.4449 15.4816V14.5083H62.1496V10.8228H72.3049V23.3456H68.406C68.406 21.4639 68.4449 21.0098 68.4449 20.9708H68.406ZM75.4785 23.3456V0.570988H79.9862V23.3326H75.4785V23.3456ZM103.263 0.570988V23.3326H99.0145L92.5508 14.5472C90.5042 11.7442 88.0042 8.1755 87.9783 8.1755H87.9395C87.9136 8.1755 87.9783 11.4587 87.9783 15.9747V23.3197H83.4706V0.570988H87.7193L94.3125 9.44725C95.8669 11.4976 98.7295 15.5594 98.7554 15.5594H98.7943C98.8332 15.5594 98.7554 11.848 98.7554 8.01978V0.570988H103.263ZM19.9091 5.8656L16.2304 9.55107C16.3729 10.2778 16.4506 11.0824 16.4506 11.9518C16.4506 16.6105 14.2615 19.4006 10.5957 19.4006C9.06726 19.4006 7.78489 18.9075 6.8134 17.9731L19.5594 5.20377C19.2226 4.59385 18.834 4.03584 18.3936 3.51676C18.2122 3.29616 18.0179 3.1015 17.8236 2.89387C17.7977 2.86792 17.7718 2.84196 17.7459 2.81601C17.6812 2.7641 17.6293 2.69921 17.5646 2.64731C15.6993 0.908389 13.3289 0 10.5957 0C7.44811 0 4.75384 1.20686 2.8238 3.50379C0.997399 5.67095 0 8.66863 0 11.9518C0 14.1319 0.44041 16.1823 1.26942 17.9472L4.97404 14.2358C4.84451 13.535 4.77974 12.7694 4.77974 11.9388C4.77974 9.79763 5.22015 8.05871 6.07507 6.77399C7.08542 5.28164 8.65276 4.49004 10.5957 4.49004C12.1113 4.49004 13.3807 4.97019 14.3392 5.8656L1.61915 18.609C1.96889 19.2449 2.37044 19.8418 2.8238 20.3739C2.91448 20.4777 3.00515 20.5815 3.10878 20.6853C3.2124 20.8021 3.32898 20.9189 3.44556 21.0357C3.45851 21.0487 3.47147 21.0617 3.48442 21.0746C3.52328 21.1136 3.54919 21.1525 3.58805 21.1785C5.44036 22.9433 7.83671 23.8777 10.5957 23.8777C13.7563 23.8777 16.4506 22.6708 18.3936 20.3739C20.22 18.2067 21.2303 15.222 21.2303 11.9388C21.2303 9.73274 20.764 7.64345 19.9091 5.8656Z" fill="#0074F0"/>
+<path d="M120.259 0.711516H111.158V23.4806H120.198C126.56 23.4806 131.37 19.2799 131.37 12.0961C131.37 4.91224 126.621 0.711516 120.259 0.711516ZM120.259 3.8164C124.704 3.8164 127.748 6.64732 127.748 12.0961C127.748 17.5448 124.643 20.3758 120.229 20.3758H114.75V3.8164H120.259Z" fill="white"/>
+<path d="M149.072 15.2923C149.072 10.5436 146.241 7.59096 141.767 7.59096C137.231 7.59096 133.974 10.6045 133.974 15.688C133.974 20.741 137.261 23.785 141.858 23.785C145.48 23.785 148.311 21.5629 148.92 18.7929L145.48 18.6102C145.054 20.0105 143.745 20.8324 141.767 20.8324C139.392 20.8324 137.779 19.3408 137.596 16.9665H149.072V15.2923ZM141.736 10.5132C144.263 10.5132 145.541 12.0352 145.632 14.2878H137.627C137.779 11.8526 139.453 10.5132 141.736 10.5132Z" fill="white"/>
+<path d="M166.61 0.711516H152.303V23.4806H155.926V13.4659H164.753V10.2697H155.926V3.90772H166.61V0.711516Z" fill="white"/>
+<path d="M171.229 0.315796C170.072 0.315796 169.098 1.25944 169.098 2.4466C169.098 3.63376 170.041 4.5774 171.229 4.5774C172.416 4.5774 173.39 3.63376 173.39 2.4466C173.39 1.25944 172.416 0.315796 171.229 0.315796ZM172.933 7.86492H169.524V23.4806H172.933V7.86492Z" fill="white"/>
 </svg>
diff --git a/client/public/ogv.svg b/client/public/ogv.svg
index 95ea5ecb..a64e7604 100644
--- a/client/public/ogv.svg
+++ b/client/public/ogv.svg
@@ -1,11 +1,21 @@
-<svg width="818" height="818" viewBox="0 0 818 818" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M410.568 815.903C635.458 815.149 817.157 632.229 816.403 407.338C815.649 182.448 632.729 0.749358 407.839 1.50297C182.948 2.25657 1.24941 185.177 2.00302 410.068C2.75662 634.958 185.677 816.657 410.568 815.903Z" fill="#1E313F"/>
-<path opacity="0.2" d="M663.7 661.5C803.3 520.9 802.6 293.8 662 154.2C521.4 14.6 294.3 15.3 154.7 155.9L663.7 661.5Z" fill="white"/>
-<path d="M629.3 287.4L583 240.7L557.8 266.3C557.7 266.2 557.6 266.1 557.5 266L537 286.7L410.9 414.5L331.1 333.6C314.6 350.8 303.7 373.4 301.3 398.4L410.9 509.5L534.9 383.8C536.5 391.8 537.3 400.1 537.3 408.6C537.3 479.2 479.8 536.7 409.2 536.7C338.6 536.7 281.1 479.2 281.1 408.6C281.1 338 338.6 280.5 409.2 280.5C438.2 280.5 465 290.2 486.5 306.5L541.4 250.8C505.6 220.8 459.5 202.6 409.2 202.6C295.7 202.6 203.3 295 203.3 408.5C203.3 522.1 295.7 614.4 409.2 614.4C522.7 614.4 615.1 522 615.1 408.5C615.1 377.3 608.1 347.8 595.7 321.3L629.3 287.4Z" fill="white"/>
-<path d="M410.9 509.5L301.4 398.4C303.8 373.3 314.7 350.8 331.2 333.6L411 414.5V509.5H410.9Z" fill="url(#paint0_linear_1_7)"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_64_1422" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H24V24H0V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_64_1422)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9598 6.87233e-05C18.5872 -0.0221217 23.9777 5.33241 23.9999 11.9598C24.0221 18.5872 18.6676 23.9777 12.0402 23.9999C5.41283 24.0221 0.0222886 18.6676 6.87233e-05 12.0402C-0.0221217 5.41283 5.33241 0.0222592 11.9598 6.87233e-05Z" fill="#030C17"/>
+</g>
+<path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M19.4999 19.4498C23.6138 15.3064 23.5932 8.61389 19.4498 4.49997C15.3064 0.386044 8.61393 0.406673 4.5 4.55007L19.4999 19.4498Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.4861 8.42527L17.1217 7.04905L16.379 7.80347C16.3761 7.80052 16.3731 7.79758 16.3702 7.79463L15.7661 8.40464L12.05 12.1708L9.69832 9.78676C9.21207 10.2936 8.89086 10.9596 8.82013 11.6964L12.05 14.9704L15.7042 11.2661C15.7513 11.5019 15.7749 11.7465 15.7749 11.997C15.7749 14.0775 14.0804 15.772 11.9999 15.772C9.91934 15.772 8.22485 14.0775 8.22485 11.997C8.22485 9.91642 9.91934 8.22193 11.9999 8.22193C12.8545 8.22193 13.6443 8.50779 14.2779 8.98814L15.8958 7.34669C14.8407 6.46261 13.4822 5.92627 11.9999 5.92627C8.6551 5.92627 5.93213 8.64924 5.93213 11.994C5.93213 15.3417 8.6551 18.0618 11.9999 18.0618C15.3447 18.0618 18.0676 15.3388 18.0676 11.994C18.0676 11.0746 17.8613 10.2052 17.4959 9.42428L18.4861 8.42527Z" fill="white"/>
+<mask id="mask1_64_1422" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="8" y="9" width="5" height="6">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.82312 11.6964L12.05 14.9704H12.053V12.1708L9.70131 9.78674C9.21509 10.2936 8.89385 10.9567 8.82312 11.6964Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_64_1422)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.82312 11.6964L12.05 14.9704H12.053V12.1708L9.70131 9.78674C9.21509 10.2936 8.89385 10.9567 8.82312 11.6964Z" fill="url(#paint0_linear_64_1422)"/>
+</g>
 <defs>
-<linearGradient id="paint0_linear_1_7" x1="273.914" y1="334.472" x2="371.987" y2="422.435" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1D313F"/>
+<linearGradient id="paint0_linear_64_1422" x1="7.2062" y1="12.131" x2="10.5888" y2="13.3088" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1C313F"/>
 <stop offset="1" stop-color="white"/>
 </linearGradient>
 </defs>
diff --git a/client/public/veogv.svg b/client/public/veogv.svg
index 5334a53b..31e45800 100644
--- a/client/public/veogv.svg
+++ b/client/public/veogv.svg
@@ -1,13 +1,13 @@
-<svg width="883" height="881" viewBox="0 0 883 881" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M473.9 0.500009C249 1.20001 67.3 184.1 68 409C68.1 451.3 74.7 492 86.8 530.3C112.6 518 141.5 511 172 511C281.2 511 370 599.8 370 709C370 739.9 362.9 769.2 350.2 795.3C390 808.1 432.5 815 476.6 814.8C701.5 814 883.2 631.1 882.4 406.2C881.6 181.3 698.7 -0.299991 473.9 0.500009Z" fill="#1E313F"/>
-<path opacity="0.2" d="M729.7 660.5C869.3 519.9 868.6 292.8 728 153.2C587.4 13.6 360.3 14.3 220.7 154.9L729.7 660.5Z" fill="white"/>
-<path d="M695.3 286.4L649 239.7L623.8 265.3C623.7 265.2 623.6 265.1 623.5 265L603 285.7L476.9 413.5L397.1 332.6C380.6 349.8 369.7 372.4 367.3 397.4L476.9 508.5L600.9 382.8C602.5 390.8 603.3 399.1 603.3 407.6C603.3 478.2 545.8 535.7 475.2 535.7C404.6 535.7 347.1 478.2 347.1 407.6C347.1 337 404.6 279.5 475.2 279.5C504.2 279.5 531 289.2 552.5 305.5L607.4 249.8C571.6 219.8 525.5 201.6 475.2 201.6C361.7 201.6 269.3 294 269.3 407.5C269.3 521.1 361.7 613.4 475.2 613.4C588.7 613.4 681.1 521 681.1 407.5C681.1 376.3 674.1 346.8 661.7 320.3L695.3 286.4Z" fill="white"/>
-<path d="M476.9 508.5L367.4 397.4C369.8 372.3 380.7 349.8 397.2 332.6L477 413.5V508.5H476.9Z" fill="url(#paint0_linear_1_17)"/>
-<path d="M172 537.4C77.4 537.4 0.400024 614.4 0.400024 709C0.400024 803.6 77.4 880.6 172 880.6C266.6 880.6 343.6 803.6 343.6 709C343.6 614.4 266.7 537.4 172 537.4Z" fill="#00C483"/>
-<path d="M91.2 648.7L118.7 740.4L146 648.7H190.4L145.5 782H91.5L46.7 648.7H91.2Z" fill="white"/>
-<path d="M241.5 681.8V698.4H283V729.8H241.6V748.6H288.7V782H199.9V648.7H288.7V681.8H241.5V681.8Z" fill="white"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8843 7.16473e-05C6.76456 0.0191192 1.82036 4.99597 1.83941 11.1157C1.84213 12.2667 2.02172 13.3742 2.35097 14.4163C3.05301 14.0817 3.8394 13.8912 4.66933 13.8912C7.64075 13.8912 10.0571 16.3075 10.0571 19.2789C10.0571 20.1197 9.86387 20.917 9.5183 21.6272C10.6013 21.9755 11.7577 22.1633 12.9577 22.1578C19.0774 22.136 24.0216 17.1592 23.9999 11.0395C23.9781 4.91978 19.0013 -0.021697 12.8843 7.16473e-05Z" fill="#030C17"/>
+<path opacity="0.2" d="M19.8449 17.9592C23.6435 14.1334 23.6245 7.95378 19.7987 4.15516C15.9728 0.356532 9.79326 0.37558 5.99463 4.20142L19.8449 17.9592Z" fill="white"/>
+<path d="M18.9087 7.77964L17.6488 6.5089L16.9631 7.20549C16.9604 7.20277 16.9577 7.20005 16.955 7.19733L16.3971 7.7606L12.9659 11.2381L10.7944 9.03678C10.3455 9.50481 10.0489 10.1198 9.98355 10.8L12.9659 13.8232L16.34 10.4028C16.3835 10.6204 16.4053 10.8463 16.4053 11.0776C16.4053 12.9987 14.8407 14.5633 12.9196 14.5633C10.9985 14.5633 9.43389 12.9987 9.43389 11.0776C9.43389 9.15651 10.9985 7.59189 12.9196 7.59189C13.7087 7.59189 14.438 7.85583 15.023 8.29937L16.5169 6.78373C15.5427 5.9674 14.2883 5.47217 12.9196 5.47217C9.83117 5.47217 7.31689 7.98644 7.31689 11.0749C7.31689 14.166 9.83117 16.6776 12.9196 16.6776C16.008 16.6776 18.5223 14.1633 18.5223 11.0749C18.5223 10.2259 18.3318 9.42317 17.9944 8.70209L18.9087 7.77964Z" fill="white"/>
+<path d="M12.9659 13.8232L9.98633 10.8C10.0516 10.117 10.3482 9.5048 10.7972 9.03677L12.9686 11.2381V13.8232H12.9659Z" fill="url(#paint0_linear_64_776)"/>
+<path d="M4.66937 14.6095C2.09523 14.6095 0 16.7048 0 19.2789C0 21.8531 2.09523 23.9483 4.66937 23.9483C7.24351 23.9483 9.33874 21.8531 9.33874 19.2789C9.33874 16.7048 7.24623 14.6095 4.66937 14.6095Z" fill="#00C483"/>
+<path d="M2.47065 17.6381L3.21894 20.1333L3.9618 17.6381H5.16996L3.94819 21.2653H2.47881L1.25977 17.6381H2.47065Z" fill="white"/>
+<path d="M6.56068 18.5388V18.9905H7.68993V19.8449H6.5634V20.3565H7.84503V21.2653H5.42871V17.6381H7.84503V18.5388H6.56068Z" fill="white"/>
 <defs>
-<linearGradient id="paint0_linear_1_17" x1="339.914" y1="333.472" x2="437.987" y2="421.435" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint0_linear_64_776" x1="9.23841" y1="9.06051" x2="11.9071" y2="11.454" gradientUnits="userSpaceOnUse">
 <stop stop-color="#1D313F"/>
 <stop offset="1" stop-color="white"/>
 </linearGradient>
diff --git a/client/styles/globals.css b/client/styles/globals.css
index 9947847c..32a6baa8 100644
--- a/client/styles/globals.css
+++ b/client/styles/globals.css
@@ -1,10 +1,26 @@
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/Inter/Inter-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Sailec";
+  src: url("/fonts/Sailec/Sailec-Regular.otf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 body {
-  --toastify-font-family: Lato, sans-serif;
-  --toastify-color-dark: #0d3020;
+  --toastify-font-family: Inter, sans-serif;
+  --toastify-color-dark: #1e1f25;
   --toastify-color-success: #4bbc8a;
   --toastify-icon-color-success: var(--toastify-color-success);
   --toastify-color-warning: #fef3c8;
@@ -15,6 +31,26 @@ body {
   --toastify-icon-color-info: var(--toastify-color-info);
 }
 
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-corner {
+  background: #141519;
+}
+
+::-webkit-scrollbar-track {
+  background: #141519;
+  border-radius: 20px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #1e1f25;
+  border-radius: 20px;
+  border: 1px #141519;
+}
+
 a {
   color: hsl(var(--p));
 }
@@ -23,11 +59,14 @@ a {
   @apply text-sm;
 }
 
-[data-theme="origin-theme"] .table :where(thead,tfoot) :where(th,td):first-child {
+[data-theme="origin-theme"]
+  .table
+  :where(thead, tfoot)
+  :where(th, td):first-child {
   border-radius: 0;
 }
 
-[data-theme="origin-theme"] .table :where(thead,tfoot) :where(th,td) {
+[data-theme="origin-theme"] .table :where(thead, tfoot) :where(th, td) {
   @apply text-sm font-normal text-gray-400;
   background-color: transparent;
   text-transform: none;
@@ -59,22 +98,95 @@ a {
 }
 
 [data-theme="origin-theme"] .badge.badge-info {
-  border-color: hsl(var(--inc,var(--nc)) / calc(var(--tw-text-opacity) / 2));
+  border-color: hsl(var(--inc, var(--nc)) / calc(var(--tw-text-opacity) / 2));
 }
 
 [data-theme="origin-theme"] .badge.badge-warning {
-  border-color: hsl(var(--wac,var(--nc)) / calc(var(--tw-text-opacity) / 2));
+  border-color: hsl(var(--wac, var(--nc)) / calc(var(--tw-text-opacity) / 2));
 }
 
 [data-theme="origin-theme"] .badge.badge-error {
-  border-color: hsl(var(--erc,var(--nc)) / calc(var(--tw-text-opacity) / 2));
+  border-color: hsl(var(--erc, var(--nc)) / calc(var(--tw-text-opacity) / 2));
 }
 
 [data-theme="origin-theme"] .badge.badge-success {
-  border-color: hsl(var(--suc,var(--nc)) / calc(var(--tw-text-opacity) / 2));
+  border-color: hsl(var(--suc, var(--nc)) / calc(var(--tw-text-opacity) / 2));
 }
 
 .opaque-tooltip {
   opacity: 1 !important;
   border-radius: 0.5rem !important;
-}
\ No newline at end of file
+}
+
+.gradient-link {
+  font-weight: bold;
+  display: inline-block;
+  background: linear-gradient(90deg, #8c66fc -28.99%, #0274f1 144.97%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  -moz-text-fill-color: transparent;
+  -webkit-text-fill-color: transparent;
+  position: relative;
+}
+
+.gradient-link-alt {
+  font-weight: bold;
+  display: inline-block;
+  background: linear-gradient(91.16deg, #fedba8 -3.29%, #cf75d5 106.42%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  -moz-text-fill-color: transparent;
+  -webkit-text-fill-color: transparent;
+  position: relative;
+}
+
+.gradient-link-alt:after,
+.gradient-link:after {
+  background: none;
+  content: attr(data-text);
+  left: 0;
+  top: 0;
+  z-index: -1;
+  position: absolute;
+}
+
+.modal {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.range-alt {
+  --range: calc(var(--max) - var(--min));
+  --ratio: calc((var(--value) - var(--min)) / var(--range));
+  --sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
+  --range-shdw: none;
+}
+
+.range-alt::-webkit-slider-runnable-track {
+  background: linear-gradient(90deg, #8c66fc -28.99%, #0274f1 144.97%) 0 /
+      var(--sx) 100% no-repeat,
+    #141519;
+}
+
+.range-alt:hover::-webkit-slider-runnable-track {
+  background: linear-gradient(90deg, #8c66fc -28.99%, #0274f1 144.97%) 0 /
+      var(--sx) 100% no-repeat,
+    #141519;
+}
+
+.range-alt:active::-webkit-slider-runnable-track {
+  background: linear-gradient(90deg, #8c66fc -28.99%, #0274f1 144.97%) 0 /
+      var(--sx) 100% no-repeat,
+    #141519;
+}
+
+.range-alt::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 28px;
+  width: 28px;
+  border-radius: 100%;
+  background: linear-gradient(90deg, #8c66fc -28.99%, #0274f1 144.97%);
+  cursor: pointer;
+  border: none;
+}
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 93e4eaf4..f4d8d4c0 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -1,21 +1,24 @@
 const originTheme = {
-  fontFamily: "Lato, sans-serif",
-  primary: "#4bbc8a",
-  "primary-content": "#ffffff",
-  "primary-focus": "#39996e",
-  secondary: "#18402d",
-  "secondary-content": "#ffffff",
-  "secondary-focus": "#0d3020",
-  accent: "#4bbc8a",
-  "accent-content": "#ffffff",
+  fontFamily: "Inter, sans-serif",
+  primary: "#0274F1",
+  "primary-content": "#141519",
+  "primary-focus": "#141519",
+  secondary: "#101113",
+  "secondary-content": "#1E1F25",
+  "secondary-focus": "#1E1F25",
+  accent: "#101113",
+  "accent-content": "#1E1F25",
+  white: "#FAFBFB",
   warning: "#f0c102",
-  neutral: "#d8d8d8",
+  neutral: "#828699",
   "neutral-content": "#333333",
-  "neutral-focus": "#c2c2c2",
+  "neutral-focus": "#ffffff",
   "base-100": "#fafbfc",
   "base-200": "#f2f3f5",
   "base-300": "#cdd7e0",
-  "--border-color": "red",
+  success: "#66FE90",
+  error: "#FF4E4E",
+  "--border-color": "#FF4E4E",
   "--btn-text-case": "capitalize",
   "--rounded-btn": "0.6125rem",
   "--rounded-badge": "0.25rem",
@@ -29,8 +32,16 @@ module.exports = {
   theme: {
     extend: {
       transitionProperty: {
-        'all': 'all',
-        'right': 'right',
+        all: "all",
+        right: "right",
+      },
+      fontFamily: {
+        primary: ["Inter", "sans-serif"],
+        header: ["Sailec", "sans-serif"],
+      },
+      colors: {
+        "gradient-from": "#8C66FC",
+        "gradient-to": "#0274F1",
       },
     },
   },
@@ -39,11 +50,11 @@ module.exports = {
     styled: true,
     themes: [
       {
-        'origin-theme': {
+        "origin-theme": {
           ...require("daisyui/src/colors/themes")["[data-theme=light]"],
           ...originTheme,
-        }
-      }
+        },
+      },
     ],
     base: true,
     utils: true,
diff --git a/client/utils/index.tsx b/client/utils/index.tsx
index 047c3e8a..44af37b5 100644
--- a/client/utils/index.tsx
+++ b/client/utils/index.tsx
@@ -87,7 +87,7 @@ export const addressContractName = (contracts, address: string): string => {
 export const etherscanLink = (contracts, address: string) => {
   return (
     <a
-      className="link link-primary"
+      className="link link-primary gradient-link"
       href={`https://etherscan.io/address/${address}`}
       target="_blank"
       rel="noreferrer"