diff --git a/site/components/UtilitiesTabs.js b/site/components/UtilitiesTabs.js
index f2b2a65..19fc90e 100644
--- a/site/components/UtilitiesTabs.js
+++ b/site/components/UtilitiesTabs.js
@@ -38,11 +38,11 @@ function UtilitiesTabs() {
       {utilities.map(({ title, text, href, onClick = () => null }) => (
         <Link href={href} key={title} onClick={onClick}>
           <div
-            className="border-slate-300 hover:bg-slate-100 flex flex-col gap-2 justify-start p-6 w-full h-32 border rounded-xl lg:w-96"
+            className="border-grayscale-300/55 hover:bg-grayscale-50 shadow-grayscale-950 flex flex-col gap-2 justify-start p-6 w-full h-32 border rounded-xl shadow-sm lg:w-96"
             key={title}
           >
-            <h4 className="text-black text-base">{title}</h4>
-            <p className="text-slate-500 text-sm">{text}</p>
+            <h4 className="text-grayscale-950 text-base">{title}</h4>
+            <p className="text-grayscale-500 text-sm">{text}</p>
           </div>
         </Link>
       ))}
diff --git a/site/components/layout/Breadcrumb.js b/site/components/layout/Breadcrumb.js
index aab1b0e..f961310 100644
--- a/site/components/layout/Breadcrumb.js
+++ b/site/components/layout/Breadcrumb.js
@@ -11,20 +11,20 @@ const Breadcrumb = function ({ title }) {
   const { utilities } = useContext(PureContext)
 
   return (
-    <div className="flex flex-row gap-2 items-center px-8 py-4 border md:gap-1 md:px-0 md:border-0">
+    <div className="flex flex-row gap-2 items-center px-8 py-4 border md:gap-1 md:px-0 md:py-0 md:border-0">
       <Link className="text-slate-600 text-sm" href="/">
         Pure Finance {t('tools')}
       </Link>
       <p className="text-slate-400">/</p>
       <Dropdown
         Selector={({ isOpen }) => (
-          <div className="text-orange-950 flex gap-1 items-center px-1 py-2 text-sm rounded-xl">
+          <div className="text-orange-950 flex gap-3 items-center px-1 py-2 text-sm rounded-xl">
             {title}
             <SvgContainer
-              className={`w-6 h-6 text-slate-400 ${
+              className={`w-3 text-grayscale-400 ${
                 isOpen ? 'transform rotate-180' : ''
               }`}
-              name="caret"
+              name="chevron"
             />
           </div>
         )}
diff --git a/site/components/layout/Footer.js b/site/components/layout/Footer.js
deleted file mode 100644
index b0f0ee3..0000000
--- a/site/components/layout/Footer.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import Link from 'next/link'
-import { useTranslations } from 'next-intl'
-
-import SvgContainer from '../svg/SvgContainer'
-
-const Footer = function () {
-  const t = useTranslations()
-  return (
-    <div className="flex items-center justify-between mt-8 p-8 text-gray-500 border-t-2">
-      <div>
-        <p>{t('copyright')}</p>
-      </div>
-      <div className="flex gap-3">
-        <Link href="https://x.com/hemi_xyz" target="_blank">
-          <SvgContainer className="w-6" name="twitter" />
-        </Link>
-        <Link href="https://discord.gg/hemixyz" target="_blank">
-          <SvgContainer className="w-6" name="discord" />
-        </Link>
-        <Link href="https://github.com/hemilabs" target="_blank">
-          <SvgContainer className="w-6" name="github" />
-        </Link>
-        <Link href="https://www.linkedin.com/company/hemi-labs" target="_blank">
-          <SvgContainer className="w-6" name="linkedin" />
-        </Link>
-      </div>
-    </div>
-  )
-}
-
-export default Footer
diff --git a/site/components/layout/HelperBox.js b/site/components/layout/HelperBox.js
index a2d2ad2..22856cf 100644
--- a/site/components/layout/HelperBox.js
+++ b/site/components/layout/HelperBox.js
@@ -15,36 +15,40 @@ const HelperBox = ({ helperText, className = '' }) => {
       <div className="flex flex-col justify-between h-full">
         <div>
           {helperText.title && (
-            <h1 className="text-2xl font-normal">{helperText.title}</h1>
+            <h1 className="text-grayscale-950 text-2xl font-normal">
+              {helperText.title}
+            </h1>
           )}
           {helperText.text && (
-            <h4 className="text-slate-500 mt-4 text-sm">{helperText.text}</h4>
+            <h4 className="text-grayscale-500 mt-4 text-sm">
+              {helperText.text}
+            </h4>
           )}
         </div>
         <div className="mt-32">
-          <h4 className="text-slate-500 mb-4 pb-2 text-sm border-b">
+          <h4 className="border-grayscale-300/55 text-grayscale-400 mb-4 pb-2 text-sm border-b">
             {t('got-questions')}
           </h4>
           {helperText.questions.map(({ title, answer }) => (
             <div
-              className="border-slate-20 mt-2 px-4 py-3 border rounded-xl"
+              className="border-grayscale-300/55 mt-2 px-4 py-3 border rounded-xl"
               key={title}
             >
               <Dropdown
                 Selector={({ isOpen }) => (
-                  <div className="flex items-center justify-between text-black text-sm">
+                  <div className="text-grayscale-950 flex items-center justify-between text-sm">
                     {title}
                     <SvgContainer
-                      className={`w-6 h-6 fill-current ${
+                      className={`w-3 text-grayscale-950 ${
                         isOpen ? 'transform rotate-180' : ''
                       }`}
-                      name="caret"
+                      name="chevron"
                     />
                   </div>
                 )}
-                className="text-gray-600 cursor-pointer"
+                className="cursor-pointer"
               >
-                <div className="text-slate-500 py-4 text-sm">{answer}</div>
+                <div className="text-grayscale-500 py-4 text-sm">{answer}</div>
               </Dropdown>
             </div>
           ))}
diff --git a/site/components/layout/HomeFooter.js b/site/components/layout/HomeFooter.js
new file mode 100644
index 0000000..86fe9fb
--- /dev/null
+++ b/site/components/layout/HomeFooter.js
@@ -0,0 +1,43 @@
+import Link from 'next/link'
+import { useTranslations } from 'next-intl'
+
+import SvgContainer from '../svg/SvgContainer'
+
+const HomeFooter = function () {
+  const t = useTranslations()
+  return (
+    <div className="border-slate-300/55 flex items-center justify-between mt-8 p-8 text-gray-500 border-t">
+      <div>
+        <p>{t('copyright')}</p>
+      </div>
+      <div className="flex gap-3">
+        <Link href="https://x.com/hemi_xyz" target="_blank">
+          <SvgContainer
+            className="text-grayscale-500 hover:text-grayscale-950 w-6"
+            name="twitter"
+          />
+        </Link>
+        <Link href="https://discord.gg/hemixyz" target="_blank">
+          <SvgContainer
+            className="text-grayscale-500 hover:text-grayscale-950 w-6"
+            name="discord"
+          />
+        </Link>
+        <Link href="https://github.com/hemilabs" target="_blank">
+          <SvgContainer
+            className="text-grayscale-500 hover:text-grayscale-950 w-6"
+            name="github"
+          />
+        </Link>
+        <Link href="https://www.linkedin.com/company/hemi-labs" target="_blank">
+          <SvgContainer
+            className="text-grayscale-500 hover:text-grayscale-950 w-6"
+            name="linkedin"
+          />
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default HomeFooter
diff --git a/site/components/layout/HomeLayout.js b/site/components/layout/HomeLayout.js
index adb1ff6..897e39c 100644
--- a/site/components/layout/HomeLayout.js
+++ b/site/components/layout/HomeLayout.js
@@ -1,9 +1,9 @@
 import { inter } from '../../fonts'
 import Navbar from '../Navbar'
 
-import Footer from './Footer'
 import Head from './Head'
 import Hero from './Hero'
+import HomeFooter from './HomeFooter'
 
 const HomeLayout = ({ children, title }) => (
   <>
@@ -12,7 +12,9 @@ const HomeLayout = ({ children, title }) => (
       <Navbar />
       <Hero />
       <div className="container">{children}</div>
-      <Footer />
+      <div className="container">
+        <HomeFooter />
+      </div>
     </div>
   </>
 )
diff --git a/site/components/layout/ToolsFooter.js b/site/components/layout/ToolsFooter.js
new file mode 100644
index 0000000..0925aa0
--- /dev/null
+++ b/site/components/layout/ToolsFooter.js
@@ -0,0 +1,43 @@
+import Link from 'next/link'
+import { useTranslations } from 'next-intl'
+
+import SvgContainer from '../svg/SvgContainer'
+
+const ToolsFooter = function () {
+  const t = useTranslations()
+  return (
+    <div className="flex items-center justify-between m-6 text-gray-500">
+      <div>
+        <p>{t('copyright')}</p>
+      </div>
+      <div className="flex gap-3">
+        <Link href="https://x.com/hemi_xyz" target="_blank">
+          <SvgContainer
+            className="text-grayscale-500 hover:text-grayscale-950 w-6"
+            name="twitter"
+          />
+        </Link>
+        <Link href="https://discord.gg/hemixyz" target="_blank">
+          <SvgContainer
+            className="text-grayscale-500 hover:text-grayscale-950 w-6"
+            name="discord"
+          />
+        </Link>
+        <Link href="https://github.com/hemilabs" target="_blank">
+          <SvgContainer
+            className="text-grayscale-500 hover:text-grayscale-950 w-6"
+            name="github"
+          />
+        </Link>
+        <Link href="https://www.linkedin.com/company/hemi-labs" target="_blank">
+          <SvgContainer
+            className="text-grayscale-500 hover:text-grayscale-950 w-6"
+            name="linkedin"
+          />
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default ToolsFooter
diff --git a/site/components/layout/ToolsLayout.js b/site/components/layout/ToolsLayout.js
index 779ef12..9db9c46 100644
--- a/site/components/layout/ToolsLayout.js
+++ b/site/components/layout/ToolsLayout.js
@@ -1,9 +1,9 @@
 import { inter } from '../../fonts'
 import Navbar from '../Navbar'
 
-import Footer from './Footer'
 import Head from './Head'
 import HelperBox from './HelperBox'
+import ToolsFooter from './ToolsFooter'
 
 const ToolsLayout = ({
   children,
@@ -14,7 +14,7 @@ const ToolsLayout = ({
 }) => (
   <>
     <Head title={title} />
-    <div className={`w-full h-full ${inter.className} flex`}>
+    <div className={`w-full h-max min-h-screen ${inter.className} flex`}>
       <div className="flex flex-col justify-between lg:w-8/12 xl:w-7/12">
         <div>
           <Navbar
@@ -25,7 +25,7 @@ const ToolsLayout = ({
           <div className="container flex justify-center py-8">{children}</div>
           <HelperBox className="lg:hidden" helperText={helperText} />
         </div>
-        <Footer />
+        <ToolsFooter />
       </div>
       <HelperBox
         className="hidden lg:block lg:w-4/12 xl:w-5/12"
diff --git a/site/components/layout/UtilFormBox.js b/site/components/layout/UtilFormBox.js
index 5d31951..8ed27d9 100644
--- a/site/components/layout/UtilFormBox.js
+++ b/site/components/layout/UtilFormBox.js
@@ -2,9 +2,11 @@ const UtilFormBox = ({ title, text, className, children }) => (
   <div
     className={`bg-white rounded-2xl px-8 py-12 w-full border border-slate-100 md:max-w-lg ${className}`}
   >
-    {title && <h1 className="text-2xl font-normal">{title}</h1>}
-    {text && <h4 className="text-slate-500 mt-4 text-sm">{text}</h4>}
-    <div className="mt-8">{children}</div>
+    {title && (
+      <h1 className="text-grayscale-950 text-2xl font-normal">{title}</h1>
+    )}
+    {text && <h4 className="text-grayscale-500 mt-2 text-sm">{text}</h4>}
+    <div className="mt-4">{children}</div>
   </div>
 )
 
diff --git a/site/components/svg/Chevron.js b/site/components/svg/Chevron.js
new file mode 100644
index 0000000..e249ed0
--- /dev/null
+++ b/site/components/svg/Chevron.js
@@ -0,0 +1,12 @@
+const Chevron = props => (
+  <svg viewBox="0 0 9 6" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      clip-rule="evenodd"
+      d="M0.220011 1.22C0.360637 1.07955 0.551261 1.00066 0.750011 1.00066C0.948762 1.00066 1.13939 1.07955 1.28001 1.22L4.00001 3.94L6.72001 1.22C6.78867 1.14631 6.87147 1.08721 6.96347 1.04622C7.05547 1.00523 7.15479 0.983186 7.25549 0.981409C7.35619 0.979633 7.45622 0.998157 7.54961 1.03588C7.643 1.0736 7.72783 1.12974 7.79905 1.20096C7.87027 1.27218 7.92641 1.35701 7.96413 1.4504C8.00185 1.54379 8.02038 1.64382 8.0186 1.74452C8.01683 1.84523 7.99478 1.94454 7.95379 2.03654C7.9128 2.12854 7.8537 2.21134 7.78001 2.28L4.53001 5.53C4.38939 5.67045 4.19876 5.74934 4.00001 5.74934C3.80126 5.74934 3.61064 5.67045 3.47001 5.53L0.220011 2.28C0.0795608 2.13938 0.000671387 1.94875 0.000671387 1.75C0.000671387 1.55125 0.0795608 1.36063 0.220011 1.22Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+    />
+  </svg>
+)
+
+export default Chevron
diff --git a/site/components/svg/Discord.js b/site/components/svg/Discord.js
index 5f530fb..dca5f91 100644
--- a/site/components/svg/Discord.js
+++ b/site/components/svg/Discord.js
@@ -9,7 +9,7 @@ const Discord = props => (
   >
     <path
       d="M16.5583 4.44162C15.4499 3.92496 14.2499 3.54996 12.9999 3.33329C12.989 3.33294 12.9781 3.335 12.968 3.33932C12.9579 3.34364 12.9489 3.35011 12.9416 3.35829C12.7916 3.63329 12.6166 3.99162 12.4999 4.26662C11.1741 4.06662 9.82577 4.06662 8.49994 4.26662C8.38327 3.98329 8.20827 3.63329 8.04994 3.35829C8.0416 3.34162 8.0166 3.33329 7.9916 3.33329C6.7416 3.54996 5.54993 3.92496 4.43327 4.44162C4.42493 4.44162 4.4166 4.44996 4.40827 4.45829C2.1416 7.84996 1.5166 11.15 1.82493 14.4166C1.82493 14.4333 1.83327 14.45 1.84993 14.4583C3.34993 15.5583 4.7916 16.225 6.2166 16.6666C6.2416 16.675 6.2666 16.6666 6.27493 16.65C6.60827 16.1916 6.90827 15.7083 7.1666 15.2C7.18327 15.1666 7.1666 15.1333 7.13327 15.125C6.65827 14.9416 6.20827 14.725 5.7666 14.475C5.73327 14.4583 5.73327 14.4083 5.75827 14.3833C5.84994 14.3166 5.9416 14.2416 6.03327 14.175C6.04993 14.1583 6.07493 14.1583 6.0916 14.1666C8.95827 15.475 12.0499 15.475 14.8833 14.1666C14.8999 14.1583 14.9249 14.1583 14.9416 14.175C15.0333 14.25 15.1249 14.3166 15.2166 14.3916C15.2499 14.4166 15.2499 14.4666 15.2083 14.4833C14.7749 14.7416 14.3166 14.95 13.8416 15.1333C13.8083 15.1416 13.7999 15.1833 13.8083 15.2083C14.0749 15.7166 14.3749 16.2 14.6999 16.6583C14.7249 16.6666 14.7499 16.675 14.7749 16.6666C16.2083 16.225 17.6499 15.5583 19.1499 14.4583C19.1666 14.45 19.1749 14.4333 19.1749 14.4166C19.5416 10.6416 18.5666 7.36662 16.5916 4.45829C16.5833 4.44996 16.5749 4.44162 16.5583 4.44162ZM7.59994 12.425C6.7416 12.425 6.02493 11.6333 6.02493 10.6583C6.02493 9.68329 6.72494 8.89162 7.59994 8.89162C8.48327 8.89162 9.18327 9.69162 9.17493 10.6583C9.17493 11.6333 8.47494 12.425 7.59994 12.425ZM13.4083 12.425C12.5499 12.425 11.8333 11.6333 11.8333 10.6583C11.8333 9.68329 12.5333 8.89162 13.4083 8.89162C14.2916 8.89162 14.9916 9.69162 14.9833 10.6583C14.9833 11.6333 14.2916 12.425 13.4083 12.425Z"
-      fill="#737373"
+      fill="currentColor"
     />
   </svg>
 )
diff --git a/site/components/svg/Github.js b/site/components/svg/Github.js
index eb3d9da..a923088 100644
--- a/site/components/svg/Github.js
+++ b/site/components/svg/Github.js
@@ -9,7 +9,7 @@ const Github = props => (
   >
     <path
       d="M10.5001 1.66663C9.40573 1.66663 8.3221 1.88217 7.31105 2.30096C6.30001 2.71975 5.38135 3.33358 4.60752 4.1074C3.04472 5.67021 2.16675 7.78982 2.16675 9.99996C2.16675 13.6833 4.55841 16.8083 7.86675 17.9166C8.28341 17.9833 8.41675 17.725 8.41675 17.5V16.0916C6.10841 16.5916 5.61675 14.975 5.61675 14.975C5.23341 14.0083 4.69175 13.75 4.69175 13.75C3.93341 13.2333 4.75008 13.25 4.75008 13.25C5.58341 13.3083 6.02508 14.1083 6.02508 14.1083C6.75008 15.375 7.97508 15 8.45008 14.8C8.52508 14.2583 8.74175 13.8916 8.97508 13.6833C7.12508 13.475 5.18341 12.7583 5.18341 9.58329C5.18341 8.65829 5.50008 7.91663 6.04175 7.32496C5.95841 7.11663 5.66675 6.24996 6.12508 5.12496C6.12508 5.12496 6.82508 4.89996 8.41675 5.97496C9.07508 5.79163 9.79175 5.69996 10.5001 5.69996C11.2084 5.69996 11.9251 5.79163 12.5834 5.97496C14.1751 4.89996 14.8751 5.12496 14.8751 5.12496C15.3334 6.24996 15.0417 7.11663 14.9584 7.32496C15.5001 7.91663 15.8167 8.65829 15.8167 9.58329C15.8167 12.7666 13.8667 13.4666 12.0084 13.675C12.3084 13.9333 12.5834 14.4416 12.5834 15.2166V17.5C12.5834 17.725 12.7167 17.9916 13.1417 17.9166C16.4501 16.8 18.8334 13.6833 18.8334 9.99996C18.8334 8.90561 18.6179 7.82198 18.1991 6.81093C17.7803 5.79988 17.1665 4.88122 16.3926 4.1074C15.6188 3.33358 14.7002 2.71975 13.6891 2.30096C12.6781 1.88217 11.5944 1.66663 10.5001 1.66663Z"
-      fill="#737373"
+      fill="currentColor"
     />
   </svg>
 )
diff --git a/site/components/svg/Linkedin.js b/site/components/svg/Linkedin.js
index 5c76133..fd8eb47 100644
--- a/site/components/svg/Linkedin.js
+++ b/site/components/svg/Linkedin.js
@@ -9,7 +9,7 @@ const Linkedin = props => (
   >
     <path
       d="M6.28329 4.16665C6.28306 4.60867 6.10726 5.03251 5.79454 5.34491C5.48182 5.65732 5.05781 5.8327 4.61578 5.83248C4.17376 5.83226 3.74992 5.65645 3.43752 5.34373C3.12511 5.03102 2.94973 4.60701 2.94995 4.16498C2.95017 3.72295 3.12598 3.29912 3.4387 2.98671C3.75141 2.67431 4.17542 2.49892 4.61745 2.49915C5.05948 2.49937 5.48331 2.67517 5.79572 2.98789C6.10812 3.30061 6.28351 3.72462 6.28329 4.16665ZM6.33329 7.06665H2.99995V17.5H6.33329V7.06665ZM11.6 7.06665H8.28329V17.5H11.5666V12.025C11.5666 8.97498 15.5416 8.69165 15.5416 12.025V17.5H18.8333V10.8916C18.8333 5.74998 12.95 5.94165 11.5666 8.46665L11.6 7.06665Z"
-      fill="#737373"
+      fill="currentColor"
     />
   </svg>
 )
diff --git a/site/components/svg/Twitter.js b/site/components/svg/Twitter.js
index 7ed6532..d9cb3d9 100644
--- a/site/components/svg/Twitter.js
+++ b/site/components/svg/Twitter.js
@@ -9,7 +9,7 @@ const Twitter = props => (
   >
     <path
       d="M25.101 2.25H29.4239L19.9796 13.0515L31.0901 27.75H22.3907L15.5771 18.8355L7.78065 27.75H3.45513L13.5567 16.1965L2.89844 2.25H11.8187L17.9777 10.3982L25.101 2.25ZM23.5838 25.1607H25.9791L10.5171 4.70323H7.94663L23.5838 25.1607Z"
-      fill="#808080"
+      fill="currentColor"
     />
   </svg>
 )
diff --git a/site/components/svg/index.js b/site/components/svg/index.js
index 34fbe83..31db3bf 100644
--- a/site/components/svg/index.js
+++ b/site/components/svg/index.js
@@ -2,6 +2,7 @@ import arrows from './Arrows'
 import caret from './Caret'
 import check from './Check'
 import checkmark from './Checkmark'
+import chevron from './Chevron'
 import close from './Close'
 import coinbasewallet from './CoinbaseWallet'
 import copy from './Copy'
@@ -25,6 +26,7 @@ const icons = {
   caret,
   check,
   checkmark,
+  chevron,
   close,
   coinbasewallet,
   copy,
diff --git a/site/pages/[locale]/merkle-claims.js b/site/pages/[locale]/merkle-claims.js
index c63d219..4d29cd5 100644
--- a/site/pages/[locale]/merkle-claims.js
+++ b/site/pages/[locale]/merkle-claims.js
@@ -131,6 +131,7 @@ function MerkleClaims() {
           value={claimID}
         />
         <InputBalance
+          className="mt-4"
           disabled
           placeholder="-"
           title={t('balance')}
@@ -143,6 +144,7 @@ function MerkleClaims() {
         {/* TODO disable the button if not claimable! */}
         <Button
           className="flex justify-center mt-8"
+          disabled={!claimID}
           onClick={handleClaimSubmit}
         >
           {t('claim')}
diff --git a/site/styles/index.css b/site/styles/index.css
index 0d18ee0..ec064dd 100644
--- a/site/styles/index.css
+++ b/site/styles/index.css
@@ -10,5 +10,5 @@
 }
 
 body {
-  @apply bg-gray-100;
+  @apply bg-white;
 }
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
index 146f905..5f666c2 100644
--- a/site/tailwind.config.js
+++ b/site/tailwind.config.js
@@ -56,6 +56,19 @@ module.exports = {
           800: '#333535',
           900: '#1A1B1B',
           950: '#000202'
+        },
+        grayscale: {
+          50: '#FAFAFA',
+          100: '#E5E6E6',
+          200: '#CCCCCC',
+          300: '#D4D4D8',
+          400: '#A3A3A3',
+          500: '#737373',
+          600: '#666767',
+          700: '#4D4E4E',
+          800: '#333535',
+          900: '#1A1B1B',
+          950: '#0A0A0A'
         }
       },
       gridTemplateColumns: {