diff --git a/site/components/Layout.js b/site/components/Layout.js
index 0061d3a..7e6024e 100644
--- a/site/components/Layout.js
+++ b/site/components/Layout.js
@@ -18,28 +18,24 @@ export default function Layout({ children, title='' }) {
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
         <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap" rel="stylesheet" />
-        <link rel="preload" href="/fonts/Restora/Restora.ttf" as="font" crossOrigin="" />
-        <link rel="preload" href="/fonts/Restora/RestoraBold.ttf" as="font" crossOrigin="" />
-        <link rel="preload" href="/fonts/Restora/RestoraExtraLight.otf" as="font" crossOrigin="" />
+        <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet"></link>
       </Head>
-      <body className="dark:bg-[#4a4e7d]">
-        <Nav />
-        <main>
-          {children}
-        </main>
-        <footer className="flex items-center justify-center w-full h-24 border-t mt-16">
-          <p className="flex items-center justify-center">
-            Created by
-            <a
-              href={siteConfig.authorUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <img src={siteConfig.authorLogo} alt={siteConfig.author} className="ml-2 h-6 block" />
-            </a>
-          </p>
-        </footer>
-      </body>
+      <Nav />
+      <main>
+        {children}
+      </main>
+      <footer className="flex items-center justify-center w-full h-24 mt-16">
+        <p className="flex items-center justify-center">
+          Created by
+          <a
+            href={siteConfig.authorUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src={siteConfig.authorLogo} alt={siteConfig.author} className="ml-2 h-6 block" />
+          </a>
+        </p>
+      </footer>
     </>
   )
 }
diff --git a/site/components/Nav.js b/site/components/Nav.js
index 7f7f89a..b7c314f 100644
--- a/site/components/Nav.js
+++ b/site/components/Nav.js
@@ -12,7 +12,7 @@ function classNames(...classes) {
 
 export default function Nav() {
   return (
-    <Disclosure as="nav" className="bg-[#4a4e7d] shadow">
+    <Disclosure as="nav" className="shadow">
       {({ open }) => (
         <>
           <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
diff --git a/site/next.config.mjs b/site/next.config.mjs
index 918d318..8073cd5 100644
--- a/site/next.config.mjs
+++ b/site/next.config.mjs
@@ -17,4 +17,8 @@ const withMDX = withMDXImp({
 export default withMDX({
   // Append the default value with md extensions
   pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
+  webpack: (config, { buildId, dev }) => {
+    config.resolve.symlinks = false
+    return config
+  }
 })
diff --git a/site/pages/_app.js b/site/pages/_app.js
index bdd812e..9eb4397 100644
--- a/site/pages/_app.js
+++ b/site/pages/_app.js
@@ -2,9 +2,9 @@ import { useEffect } from 'react'
 import Script from 'next/script'
 import { useRouter } from 'next/router'
 import { DefaultSeo } from 'next-seo'
-import 'tailwindcss/tailwind.css'
 import { ThemeProvider } from 'next-themes'
 
+import '../styles/global.css'
 import siteConfig from '../config/siteConfig.js'
 import Layout from '../components/Layout'
 import MdxPage from '../components/MDX'
diff --git a/site/pages/home.js b/site/pages/home.js
index f224abc..d11d063 100644
--- a/site/pages/home.js
+++ b/site/pages/home.js
@@ -1,15 +1,15 @@
 export default function Home(props) {
   return (
-  <div className="pt-10 bg-[#4a4e7d] sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden">
+  <div className="pt-10 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden">
     <div className="mx-auto max-w-7xl lg:px-8">
       <div className="lg:grid lg:grid-cols-2 lg:gap-8">
         <div className="mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 sm:text-center lg:px-0 lg:text-left lg:flex lg:items-center">
           <div className="lg:py-24">
             <h1 className="mt-4 text-4xl tracking-tight font-extrabold text-white sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl">
               <span className="block">Making Sense of</span>
-              <span className="block text-[#0cca4a]">Web3 (&amp; Crypto)</span>
+              <span className="block text-yellow-500">Web3 &amp; Crypto</span>
             </h1>
-            <p className="mt-3 font-serif text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
+            <p className="mt-3 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
               Web3 is a huge phenomenon but it can be hard to make sense of. We're here to help with introductions to key concepts and in-depth exploration of the claims for its concrete social and economic impact.
             </p>
             <div className="mt-10 sm:mt-12">
@@ -29,7 +29,7 @@ export default function Home(props) {
                   <div className="mt-3 sm:mt-0 sm:ml-3">
                     <button
                       type="submit"
-                      className="block w-full py-3 px-4 rounded-md shadow bg-[#0aae41] text-white font-medium hover:bg-[#0cca4a] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-300 focus:ring-offset-gray-900"
+                      className="block w-full py-3 px-4 rounded-md shadow bg-yellow-500 text-sm text-slate-50 font-medium hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-300 focus:ring-offset-gray-900"
                     >
                       Get Updates
                     </button>
@@ -41,10 +41,9 @@ export default function Home(props) {
         </div>
         <div className="mt-12 -mb-16 sm:-mb-48 lg:m-0 lg:relative">
           <div className="mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 lg:max-w-none lg:px-0">
-            {/* Illustration taken from Lucid Illustrations: https://lucid.pixsellz.io/ */}
             <img
               className="w-full lg:absolute lg:inset-y-0 lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
-              src="/img/skribbl.svg"
+              src="/img/undraw_digital_currency_qpak.svg"
               alt=""
             />
           </div>
diff --git a/site/styles/global.css b/site/styles/global.css
new file mode 100644
index 0000000..0387224
--- /dev/null
+++ b/site/styles/global.css
@@ -0,0 +1,29 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* FONTS */
+
+@layer base {
+  h1, h2, h3, h4, h5 {
+    @apply font-sans;
+  }
+}
+
+/* OTHERS */
+
+html {
+  scroll-behavior: smooth;
+}
+
+/* bg-neutral-800
+  @apply bg-slate-800
+*/
+body {
+  @apply bg-slate-900;
+  @apply text-slate-400;
+}
+
+.extra-small {
+  font-size: 0.50rem;
+}
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
index e1da14a..6bd19f5 100644
--- a/site/tailwind.config.js
+++ b/site/tailwind.config.js
@@ -10,9 +10,13 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        nunito: ["Nunito Sans", ...defaultTheme.fontFamily.sans],
+        sans: ["Inter", ...defaultTheme.fontFamily.sans],
         serif: ["Restora", ...defaultTheme.fontFamily.serif],
       },
+      colors: {
+        // life itself yellow
+        'yellow-li': '#f0ca5e'
+      }
     },
   },
   variants: {
