diff --git a/src/components/AppBar.tsx b/src/components/AppBar.tsx
index d90b048b5..c55e1c99f 100644
--- a/src/components/AppBar.tsx
+++ b/src/components/AppBar.tsx
@@ -18,7 +18,7 @@ export const AppBar: React.FC = () => {
     <div>
 
       {/* NavBar / Header */}
-      <div className="navbar flex flex-row md:mb-2 shadow-lg bg-neutral text-neutral-content">
+      <div className="navbar flex flex-row md:mb-2 shadow-lg bg-black text-neutral-content border-b border-zinc-600">
         <div className="navbar-start">
           <label htmlFor="my-drawer" className="btn btn-square btn-ghost">
 
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 243134a80..8f79e0501 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -3,7 +3,7 @@ import { FC } from 'react';
 export const Footer: FC = () => {
     return (
         <div className="">
-            <footer className="mx-auto  flex flex-row p-2 text-center items-center footer bg-neutral text-neutral-content">
+            <footer className="mx-auto  flex flex-row p-2 text-center items-center footer bg-black text-neutral-content">
                 <div className="pl-2">
                         <svg width="100%" height="22" viewBox="0 0 101 88" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M100.48 69.3817L83.8068 86.8015C83.4444 87.1799 83.0058 87.4816 82.5185 87.6878C82.0312 87.894 81.5055 88.0003 80.9743 88H1.93563C1.55849 88 1.18957 87.8926 0.874202 87.6912C0.558829 87.4897 0.31074 87.2029 0.160416 86.8659C0.0100923 86.529 -0.0359181 86.1566 0.0280382 85.7945C0.0919944 85.4324 0.263131 85.0964 0.520422 84.8278L17.2061 67.408C17.5676 67.0306 18.0047 66.7295 18.4904 66.5234C18.9762 66.3172 19.5002 66.2104 20.0301 66.2095H99.0644C99.4415 66.2095 99.8104 66.3169 100.126 66.5183C100.441 66.7198 100.689 67.0067 100.84 67.3436C100.99 67.6806 101.036 68.0529 100.972 68.415C100.908 68.7771 100.737 69.1131 100.48 69.3817ZM83.8068 34.3032C83.4444 33.9248 83.0058 33.6231 82.5185 33.4169C82.0312 33.2108 81.5055 33.1045 80.9743 33.1048H1.93563C1.55849 33.1048 1.18957 33.2121 0.874202 33.4136C0.558829 33.6151 0.31074 33.9019 0.160416 34.2388C0.0100923 34.5758 -0.0359181 34.9482 0.0280382 35.3103C0.0919944 35.6723 0.263131 36.0083 0.520422 36.277L17.2061 53.6968C17.5676 54.0742 18.0047 54.3752 18.4904 54.5814C18.9762 54.7875 19.5002 54.8944 20.0301 54.8952H99.0644C99.4415 54.8952 99.8104 54.7879 100.126 54.5864C100.441 54.3849 100.689 54.0981 100.84 53.7612C100.99 53.4242 101.036 53.0518 100.972 52.6897C100.908 52.3277 100.737 51.9917 100.48 51.723L83.8068 34.3032ZM1.93563 21.7905H80.9743C81.5055 21.7907 82.0312 21.6845 82.5185 21.4783C83.0058 21.2721 83.4444 20.9704 83.8068 20.592L100.48 3.17219C100.737 2.90357 100.908 2.56758 100.972 2.2055C101.036 1.84342 100.99 1.47103 100.84 1.13408C100.689 0.79713 100.441 0.510296 100.126 0.308823C99.8104 0.107349 99.4415 1.24074e-05 99.0644 0L20.0301 0C19.5002 0.000878397 18.9762 0.107699 18.4904 0.313848C18.0047 0.519998 17.5676 0.821087 17.2061 1.19848L0.524723 18.6183C0.267681 18.8866 0.0966198 19.2223 0.0325185 19.5839C-0.0315829 19.9456 0.0140624 20.3177 0.163856 20.6545C0.31365 20.9913 0.561081 21.2781 0.875804 21.4799C1.19053 21.6817 1.55886 21.7896 1.93563 21.7905Z" fill="url(#paint0_linear_174_4403)" />
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 7b4bc286d..65f4beffe 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -8,6 +8,11 @@ body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  background-image: radial-gradient(
+    circle farthest-side at 50% 100%,rgba(1, 9, 18, 0),
+    rgba(1, 6, 14, 0.6) 36%,
+    rgba(1, 14, 29, 0.6) 55%,
+    rgba(49, 18, 93, 0.4));
 }
 
 a {
diff --git a/src/views/basics/index.tsx b/src/views/basics/index.tsx
index 830b13001..a25ee0373 100644
--- a/src/views/basics/index.tsx
+++ b/src/views/basics/index.tsx
@@ -9,7 +9,7 @@ export const BasicsView: FC = ({ }) => {
   return (
     <div className="md:hero mx-auto p-4">
       <div className="md:hero-content flex flex-col">
-        <h1 className="text-center text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-tr from-[#9945FF] to-[#14F195]">
+        <h1 className="text-center text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-tr from-[#2500FF] to-[#14F195]">
           Basics
         </h1>
         {/* CONTENT GOES HERE */}
diff --git a/tailwind.config.js b/tailwind.config.js
index 61718b994..c6c379392 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,12 +14,12 @@ module.exports = {
     // TODO: Theme needs works
     themes: [
       {
-        'solana': {                          /* your theme name */
+        'solana': { 
           fontFamily: {
             display: ['PT Mono, monospace'],
             body: ['Inter, sans-serif'],
           },
-          'primary': '#2a2a2a',           /* Primary color */
+          'primary': '#000000',           /* Primary color */
           'primary-focus': '#9945FF',     /* Primary color - focused */
           'primary-content': '#ffffff',   /* Foreground content color to use on primary color */
 
@@ -35,7 +35,7 @@ module.exports = {
           'neutral-focus': '#2a2e37',     /* Neutral color - focused */
           'neutral-content': '#ffffff',   /* Foreground content color to use on neutral color */
 
-          'base-100': '#181818',          /* Base color of page, used for blank backgrounds */
+          'base-100': '#000000',          /* Base color of page, used for blank backgrounds */
           'base-200': '#35363a',          /* Base color, a little darker */
           'base-300': '#222222',          /* Base color, even more darker */
           'base-content': '#f9fafb',      /* Foreground content color to use on base color */