diff --git a/__tests__/components/__snapshots__/error.test.jsx.snap b/__tests__/components/__snapshots__/error.test.jsx.snap
index e804bff57..9c62f9ae0 100644
--- a/__tests__/components/__snapshots__/error.test.jsx.snap
+++ b/__tests__/components/__snapshots__/error.test.jsx.snap
@@ -6,7 +6,7 @@ exports[`ErrorComponet displays error cause and error message properly 1`] = `
     className="h-[38px]"
   >
     <div
-      className="h-[38px] bg-fcc-gray-90 text-white flex items-center flex-wrap p-1"
+      className="h-[38px] bg-fcc-gray-90 text-white flex items-center flex-wrap p-1 text-[18px]"
     >
       <div
         className="hidden lg:flex block flex-1 justify-end"
diff --git a/__tests__/components/__snapshots__/modal.test.jsx.snap b/__tests__/components/__snapshots__/modal.test.jsx.snap
index 43a6cdab4..20167ad4a 100644
--- a/__tests__/components/__snapshots__/modal.test.jsx.snap
+++ b/__tests__/components/__snapshots__/modal.test.jsx.snap
@@ -11,7 +11,7 @@ exports[`Modal Component renders header correctly 1`] = `
     className="flex justify-center"
   >
     <div
-      className="flex cursor-pointer justify-center p-4 m-6 rounded-md hover:bg-fcc-primary-yellow shadedow-lg border-solid border-color: inherit; border-2 pl-4 pr-4 bg-[#feac32] text-black"
+      className="flex cursor-pointer justify-center p-4 m-6 rounded-md shadow-lg border-solid border-[3px] border-[#feac32] bg-gradient-to-b from-[#fecc4c] to-[#ffac33] text-black text-[1.1rem] font-semibold hover:from-[#fecc4c] hover:to-[#fecc4c] hover:border-[#f1a02a]"
       onClick={[Function]}
     >
       Create Class
@@ -31,7 +31,7 @@ exports[`Modal Component renders whole form after header clicked 1`] = `
     className="flex justify-center"
   >
     <div
-      className="flex cursor-pointer justify-center p-4 m-6 rounded-md hover:bg-fcc-primary-yellow shadedow-lg border-solid border-color: inherit; border-2 pl-4 pr-4 bg-[#feac32] text-black"
+      className="flex cursor-pointer justify-center p-4 m-6 rounded-md shadow-lg border-solid border-[3px] border-[#feac32] bg-gradient-to-b from-[#fecc4c] to-[#ffac33] text-black text-[1.1rem] font-semibold hover:from-[#fecc4c] hover:to-[#fecc4c] hover:border-[#f1a02a]"
       onClick={[Function]}
     >
       Create Class
diff --git a/__tests__/components/__snapshots__/navbar.test.jsx.snap b/__tests__/components/__snapshots__/navbar.test.jsx.snap
index c583d7f59..cc17d97d0 100644
--- a/__tests__/components/__snapshots__/navbar.test.jsx.snap
+++ b/__tests__/components/__snapshots__/navbar.test.jsx.snap
@@ -5,7 +5,7 @@ exports[`Navbar rendering correctly renders correctly 1`] = `
   className="h-[38px]"
 >
   <div
-    className="h-[38px] bg-fcc-gray-90 text-white flex items-center flex-wrap p-1"
+    className="h-[38px] bg-fcc-gray-90 text-white flex items-center flex-wrap p-1 text-[18px]"
   >
     <div
       className="hidden lg:flex block flex-1 justify-end"
diff --git a/__tests__/components/modal.test.jsx b/__tests__/components/modal.test.jsx
index be6a037ab..a67e51cad 100644
--- a/__tests__/components/modal.test.jsx
+++ b/__tests__/components/modal.test.jsx
@@ -32,7 +32,7 @@ const sampleData = [
 
 const sampleUser = 'Ayomide';
 const className =
-  'flex cursor-pointer justify-center p-4 m-6 rounded-md hover:bg-fcc-primary-yellow shadedow-lg border-solid border-color: inherit; border-2 pl-4 pr-4 bg-[#feac32] text-black';
+  'flex cursor-pointer justify-center p-4 m-6 rounded-md shadow-lg border-solid border-[3px] border-[#feac32] bg-gradient-to-b from-[#fecc4c] to-[#ffac33] text-black text-[1.1rem] font-semibold hover:from-[#fecc4c] hover:to-[#fecc4c] hover:border-[#f1a02a]';
 
 describe('Modal Component', () => {
   it('renders header correctly', () => {
diff --git a/components/modal.js b/components/modal.js
index 97238a3af..de8c12021 100644
--- a/components/modal.js
+++ b/components/modal.js
@@ -71,7 +71,7 @@ export default function Modal({
         </div>
         <div className='flex justify-center'>
           <div
-            className='flex cursor-pointer justify-center p-4 m-6 rounded-md hover:bg-fcc-primary-yellow shadedow-lg border-solid border-color: inherit; border-2 pl-4 pr-4 bg-[#feac32] text-black'
+            className='flex cursor-pointer justify-center p-4 m-6 rounded-md shadow-lg border-solid border-[3px] border-[#feac32] bg-gradient-to-b from-[#fecc4c] to-[#ffac33] text-black text-[1.1rem] font-semibold hover:from-[#fecc4c] hover:to-[#fecc4c] hover:border-[#f1a02a]'
             onClick={clicked}
           >
             Create Class
diff --git a/components/navbar.js b/components/navbar.js
index 9d4c44adb..0f4cea554 100644
--- a/components/navbar.js
+++ b/components/navbar.js
@@ -6,7 +6,7 @@ import AuthButton from '../components/authButton';
 export default function Navbar({ children }) {
   return (
     <div className='h-[38px]'>
-      <div className='h-[38px] bg-fcc-gray-90 text-white flex items-center flex-wrap p-1'>
+      <div className='h-[38px] bg-fcc-gray-90 text-white flex items-center flex-wrap p-1 text-[18px]'>
         <div className='hidden lg:flex block flex-1 justify-end'></div>
         <Link href='/classes' className='flex items-center'>
           <Image
diff --git a/pages/admin/index.js b/pages/admin/index.js
index 0d9867762..e73ca0eef 100644
--- a/pages/admin/index.js
+++ b/pages/admin/index.js
@@ -76,10 +76,10 @@ export default function Home(props) {
           <link rel='icon' href='/favicon.ico' />
         </Head>
         <Navbar>
-          <div className='border-solid border-2 pl-4 pr-4'>
+          <div className='navButton'>
             <Link href={'/classes'}>Classes</Link>
           </div>
-          <div className='border-solid border-2 pl-4 pr-4'>
+          <div className='navButton'>
             <Link href={'/'}> Menu</Link>
           </div>
         </Navbar>
diff --git a/pages/classes/index.js b/pages/classes/index.js
index 598f38d68..88bf2c996 100644
--- a/pages/classes/index.js
+++ b/pages/classes/index.js
@@ -116,10 +116,10 @@ export default function Classes({
       {userSession && (
         <>
           <Navbar>
-            <div className='border-solid border-2 pl-4 pr-4'>
+            <div className='navButton'>
               <Link href={'/classes'}>Classes</Link>
             </div>
-            <div className='border-solid border-2 pl-4 pr-4'>
+            <div className='navButton'>
               <Link href={'/'}> Menu</Link>
             </div>
           </Navbar>
diff --git a/pages/dashboard/[id].js b/pages/dashboard/[id].js
index 95e003192..87f5e4678 100644
--- a/pages/dashboard/[id].js
+++ b/pages/dashboard/[id].js
@@ -91,10 +91,10 @@ export default function Home({
       {userSession && (
         <>
           <Navbar>
-            <div className='border-solid border-2 pl-4 pr-4'>
+            <div className='navButton'>
               <Link href={'/classes'}>Classes</Link>
             </div>
-            <div className='border-solid border-2 pl-4 pr-4'>
+            <div className='navButton'>
               <Link href={'/'}> Menu</Link>
             </div>
           </Navbar>
diff --git a/pages/dashboard/v2/[id].js b/pages/dashboard/v2/[id].js
index 0de21d81b..3d52eb04e 100644
--- a/pages/dashboard/v2/[id].js
+++ b/pages/dashboard/v2/[id].js
@@ -123,10 +123,10 @@ export default function Home({
       {userSession && (
         <>
           <Navbar>
-            <div className='border-solid border-2 pl-4 pr-4'>
+            <div className='navButton'>
               <Link href={'/classes'}>Classes</Link>
             </div>
-            <div className='border-solid border-2 pl-4 pr-4'>
+            <div className='navButton'>
               <Link href={'/'}> Menu</Link>
             </div>
           </Navbar>
diff --git a/pages/dashboard/v2/details/[id]/[studentEmail].js b/pages/dashboard/v2/details/[id]/[studentEmail].js
index 3ff38d353..6f737aa58 100644
--- a/pages/dashboard/v2/details/[id]/[studentEmail].js
+++ b/pages/dashboard/v2/details/[id]/[studentEmail].js
@@ -113,13 +113,13 @@ export default function StudentDetails({
       {userSession && (
         <>
           <Navbar>
-            <div className='border-solid border-2 pl-4 pr-4'>
+            <div className='navButton'>
               <Link href={`/dashboard/v2/${classroomID}`}>&lt;</Link>
             </div>
-            <div className='border-solid border-2 pl-4 pr-4'>
+            <div className='navButton'>
               <Link href={'/classes'}>Classes</Link>
             </div>
-            <div className='border-solid border-2 pl-4 pr-4'>
+            <div className='navButton'>
               <Link href={'/'}> Menu</Link>
             </div>
           </Navbar>
diff --git a/pages/index.js b/pages/index.js
index 20d336074..21e64e1c6 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -13,22 +13,22 @@ export default function Home() {
           <link rel='icon' href='/favicon.ico' />
         </Head>
         <Navbar>
-          <div className='border-solid border-2 pl-4 pr-4'>
+          <div className='navButton'>
             <Link href={'/classes'}>Classes</Link>
           </div>
-          <div className='border-solid border-2 pl-4 pr-4'>
+          <div className='navButton'>
             <Link href={'/'}> Menu</Link>
           </div>
         </Navbar>
         <div className={styles.boxx}>
-          <h1 className='text-[40px] text-center big-heading underline'>
+          <h1 className='text-2xl md:text-[40px] text-center big-heading underline'>
             Welcome to FreeCodeCamp Classroom Mode
           </h1>
         </div>
-        <div className={'p-6 ml-20 mr-20'}>
+        <div className={'p-6 mx-3 md:mx-20'}>
           <h1
             className={
-              'box-content bg-fcc-gray-15 h-100 w-100 p-4 border-4 border-fcc-gray-90 text-3xl'
+              'box-content bg-fcc-gray-15 h-100 w-100 p-4 border-4 border-fcc-gray-90 text-lg md:text-3xl'
             }
           >
             A self-hosted solution to help teachers plan and manage
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 69dd3d1db..281bb08f9 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -131,4 +131,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-top: 2rem;
 }
diff --git a/styles/globals.css b/styles/globals.css
index e8e93627b..abb6289c7 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -3,36 +3,16 @@
 @tailwind utilities;
 
 :root {
-  /* Colors  */
-  /* Light Gray  */
   --fcc-gray-00: #ffffff;
-  --fcc-gray-05: #f5f6f7;
-  --fcc-gray-10: #dfdfe2;
-  --fcc-gray-15: #d0d0d5;
-  /* Dark Gray  */
-  --fcc-gray-80: #2a2a40;
-  --fcc-gray-75: #3b3b4f;
-  --fcc-gray-85: #1b1b32;
   --fcc-gray-90: #0a0a23;
-
-  /* Primary Colors  */
-  --fcc-primary-purple: #dbb8ff;
-  --fcc-primary-yellow: #f1be32;
-  --fcc-primary-blue: #99c9ff;
-  --fcc-primary-lightGreen: #acd157;
-
-  /* Secondary Colors  */
-  --fcc-secondary-darkPurple: #5a01a7;
-  --fcc-secondary-darkYellow: #4d3800;
-  --fcc-secondary-darkBlue: #002ead;
-  --fcc-secondary-darkGreen: #00471b;
 }
 
 html,
 body {
   padding: 0;
   margin: 0;
-  font-family: 'Roboto Mono', monospace;
+  font-family: 'Lato', sans-serif;
+  font-size: clamp(18px, 1.5vw, 21.0625px);
 }
 
 a {
@@ -44,9 +24,15 @@ a {
   box-sizing: border-box;
 }
 
+.navButton {
+  border: 1px solid;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .toast-message {
   background: var(--fcc-gray-90);
   color: var(--fcc-gray-00);
   font-size: 20px;
-  --toastify-font-family: 'Roboto Mono', monospace;
+  --toastify-font-family: 'Lato', sans-serif;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 0ef18f55a..9f07a798e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -29,6 +29,7 @@ module.exports = {
           0o5: '#f5f6f7',
           10: '#dfdfe2',
           15: '#d0d0d5',
+          45: '#858591',
           // DARK GRAYs
           75: '#3b3b4f',
           80: '#2a2a40',
@@ -38,7 +39,7 @@ module.exports = {
 
         primary: {
           purple: '#dbb8ff',
-          yellow: '#f1be32',
+          yellow: '#ffbf00',
           blue: '#99c9ff',
           lightGreen: '#acd157'
         },
@@ -48,6 +49,16 @@ module.exports = {
           darkYellow: '#4d3800',
           darkBlue: '#002ead',
           darkGreen: '#00471b'
+        },
+
+        mid: {
+          blue: '#198eee',
+          purple: '#9400d3'
+        },
+
+        red: {
+          light: '#ffadad',
+          dark: '#850000'
         }
       },
       ...colors