diff --git a/components/Account.jsx b/components/Account.jsx
index e18c3ec2..d00b1796 100644
--- a/components/Account.jsx
+++ b/components/Account.jsx
@@ -1,25 +1,26 @@
-/* eslint-disable max-len */
-/* eslint-disable */
-import React, { useState, useEffect, useContext, useCallback } from "react";
-import { useMoralis } from "react-moralis";
-import { Button, Card, Modal, Row, Col } from "antd";
-import { SelectOutlined } from "@ant-design/icons";
-import { Signer } from "casper-js-sdk";
-import { GlobalContext } from "../contexts/provider";
-import { useMoralisDapp } from "../MoralisDappProvider/MoralisDappProvider";
-import { getEllipsisTxt } from "../helpers/formatters";
-import Address from "./Address/Address";
-import { errorToast } from "../contexts/utils/toasts";
-import changeAuthModal from "../contexts/actions/authModal/index";
+import React, {
+  useState, useEffect, useContext, useCallback,
+} from 'react';
+import { useMoralis } from 'react-moralis';
+import {
+  Modal, Row, Col,
+} from 'antd';
+import { SelectOutlined } from '@ant-design/icons';
+import { Signer } from 'casper-js-sdk';
+import { GlobalContext } from '../contexts/provider';
+import { useMoralisDapp } from '../MoralisDappProvider/MoralisDappProvider';
+import { getEllipsisTxt } from '../helpers/formatters';
+import Address from './Address/Address';
+import { errorToast } from '../contexts/utils/toasts';
+import changeAuthModal from '../contexts/actions/authModal/index';
 import {
   handleLockSigner,
   handleUnlockSigner,
   isConnectedCasper,
-} from "../contexts/actions/signer/index";
-import styles from "../styles/account/account.module.css";
-import walletLogin from "../contexts/actions/auth/walletLogin";
-import ButtonComponent from "./profile/ButtonComponent";
-
+} from '../contexts/actions/signer/index';
+import styles from '../styles/account/account.module.css';
+import walletLogin from '../contexts/actions/auth/walletLogin';
+import ButtonComponent from './profile/ButtonComponent';
 
 const Account = () => {
   const { authenticate, isAuthenticated, logout } = useMoralis();
@@ -37,19 +38,19 @@ const Account = () => {
   } = useContext(GlobalContext);
 
   const SIGNER_EVENTS = {
-    connected: "signer:connected",
-    disconnected: "signer:disconnected",
-    tabUpdated: "signer:tabUpdated",
-    activeKeyChanged: "signer:activeKeyChanged",
-    locked: "signer:locked",
-    unlocked: "signer:unlocked",
+    connected: 'signer:connected',
+    disconnected: 'signer:disconnected',
+    tabUpdated: 'signer:tabUpdated',
+    activeKeyChanged: 'signer:activeKeyChanged',
+    locked: 'signer:locked',
+    unlocked: 'signer:unlocked',
   };
 
   const dispatchUnlockSinger = useCallback(
     (event) => {
       handleUnlockSigner(event.detail)(setSignerState);
     },
-    [isConnected, setSignerState]
+    [isConnected, setSignerState],
   );
 
   const dispatchDisconnectedSinger = useCallback(() => {
@@ -62,8 +63,8 @@ const Account = () => {
       SIGNER_EVENTS.activeKeyChanged,
       SIGNER_EVENTS.connected,
     ].forEach((event) => window.addEventListener(event, dispatchUnlockSinger));
-    [SIGNER_EVENTS.locked, SIGNER_EVENTS.disconnected].forEach((event) =>
-      window.addEventListener(event, dispatchDisconnectedSinger)
+    [SIGNER_EVENTS.locked, SIGNER_EVENTS.disconnected].forEach(
+      (event) => window.addEventListener(event, dispatchDisconnectedSinger),
     );
 
     return () => {
@@ -71,11 +72,9 @@ const Account = () => {
         SIGNER_EVENTS.unlocked,
         SIGNER_EVENTS.activeKeyChanged,
         SIGNER_EVENTS.connected,
-      ].forEach((event) =>
-        window.removeEventListener(event, dispatchUnlockSinger)
-      );
-      [SIGNER_EVENTS.locked, SIGNER_EVENTS.disconnected].forEach((event) =>
-        window.removeEventListener(event, dispatchDisconnectedSinger)
+      ].forEach((event) => window.removeEventListener(event, dispatchUnlockSinger));
+      [SIGNER_EVENTS.locked, SIGNER_EVENTS.disconnected].forEach(
+        (event) => window.removeEventListener(event, dispatchDisconnectedSinger),
       );
     };
   });
@@ -86,9 +85,7 @@ const Account = () => {
         SIGNER_EVENTS.unlocked,
         SIGNER_EVENTS.activeKeyChanged,
         SIGNER_EVENTS.connected,
-      ].forEach((event) =>
-        window.addEventListener(event, dispatchUnlockSinger)
-      );
+      ].forEach((event) => window.addEventListener(event, dispatchUnlockSinger));
     });
     if (error) {
       errorToast(error);
@@ -97,14 +94,14 @@ const Account = () => {
 
   const wallets = [
     {
-      icon: "/assets/images/metamask.png",
-      label: "MetaMask",
-      id: "MetaMask",
+      icon: '/assets/images/metamask.png',
+      label: 'MetaMask',
+      id: 'MetaMask',
     },
     {
-      icon: "/assets/images/casper.png",
-      label: "Casper",
-      id: "Casper",
+      icon: '/assets/images/casper.png',
+      label: 'Casper',
+      id: 'Casper',
     },
   ];
 
@@ -116,25 +113,20 @@ const Account = () => {
     changeAuthModal(!showModal)(setShowModal);
   };
 
-
   const metamaskConnectWallet = async () => {
     if (
-      chainId === process.env.NEXT_PUBLIC_NETWORK_ID_MAINNET ||
-      chainId === process.env.NEXT_PUBLIC_NETWORK_ID_TESTNET
+      chainId === process.env.NEXT_PUBLIC_NETWORK_ID_MAINNET
+      || chainId === process.env.NEXT_PUBLIC_NETWORK_ID_TESTNET
     ) {
-
-
       authenticate().then(() => {
         setWalletLoginRequest(true);
-      })
-      
-        
+      });
 
       if (isConnected === true) {
         await window.casperlabsHelper.disconnectFromSite();
       }
     } else {
-      errorToast("Wrong Chain, please connect to Polygon chain");
+      errorToast('Wrong Chain, please connect to Polygon chain');
       logout();
       setWalletLoginRequest(false);
     }
@@ -144,22 +136,28 @@ const Account = () => {
     const userToken = window.localStorage.getItem('jwtToken');
     const userInfo = window.localStorage.getItem('userInfo');
 
-    if (isAuthenticated && walletLoginRequest === true && (!userToken || !userInfo)) {
+    if (
+      isAuthenticated
+      && walletLoginRequest === true
+      && (!userToken || !userInfo)
+    ) {
       walletLogin(walletAddress, authenticate)(authDispatch);
-    } 
-  },[isAuthenticated, walletLoginRequest, typeof window !== 'undefined'
-  ? window.localStorage.getItem('jwtToken')
-  : null])
-
-
+    }
+  }, [
+    isAuthenticated,
+    walletLoginRequest,
+    typeof window !== 'undefined'
+      ? window.localStorage.getItem('jwtToken')
+      : null,
+  ]);
 
   useEffect(async () => {
     if (
-      chainId !== process.env.NEXT_PUBLIC_NETWORK_ID_MAINNET &&
-      chainId !== process.env.NEXT_PUBLIC_NETWORK_ID_TESTNET &&
-      showModal === true
+      chainId !== process.env.NEXT_PUBLIC_NETWORK_ID_MAINNET
+      && chainId !== process.env.NEXT_PUBLIC_NETWORK_ID_TESTNET
+      && showModal === true
     ) {
-      errorToast("Wrong Chain, please connect to Polygon chain");
+      errorToast('Wrong Chain, please connect to Polygon chain');
 
       try {
         logout();
@@ -194,20 +192,20 @@ const Account = () => {
         <div>
           <Modal
             style={{
-              background: "#1c1d37",
-              border: "1px solid #A259FF",
-              borderRadius: "20px",
+              background: 'var(--div-background-color)',
+              border: '1px solid #A259FF',
+              borderRadius: '20px',
             }}
             bodyStyle={{
-              marginTop: "30px",
-              background: "#1c1d37",
+              marginTop: '30px',
+              background: 'var(--div-background-color)',
             }}
             title={false}
             footer={false}
             visible={showModal}
             onCancel={closeAuthModal}
             closable={false}
-            width={"700px"}
+            width="700px"
           >
             <div className={styles.modalHeader}>
               <div />
@@ -227,22 +225,20 @@ const Account = () => {
               </h1>
             </div>
             <Row className="tw-mb-5">
-              <Col span={4} className="flex-1"></Col>
+              <Col span={4} className="flex-1" />
             </Row>
             <Row justify="center">
               {wallets.map((wallet) => (
                 <div
                   key={wallet.id}
                   className={`${styles.account} tw-py-3 tw-cursor-pointer tw-mr-6 hover:tw-shadow-xl tw-transition-all tw-duration-500 tw-mb-10`}
-                  onClick={() =>
-                    wallet.id === "MetaMask"
-                      ? metamaskConnectWallet()
-                      : casperConnectWallet()
-                  }
+                  onClick={() => (wallet.id === 'MetaMask'
+                    ? metamaskConnectWallet()
+                    : casperConnectWallet())}
                 >
                   <img
                     alt="wallet"
-                    className={`tw-w-32 tw-h-32`}
+                    className="tw-w-32 tw-h-32"
                     src={wallet.icon}
                   />
                   <div className="tw-mt-2 tw-text-white tw-font-bold">
@@ -253,7 +249,8 @@ const Account = () => {
             </Row>
             <div className="tw-text-center tw-font-bold tw-pt-2">
               <span className=" tw-text-white  tw-transition-all tw-duration-500">
-                Dont have a wallet? Sign up using{"  "}
+                Dont have a wallet? Sign up using
+                {'  '}
                 <span className="tw-text-blue-600">Email</span>
               </span>
             </div>
@@ -281,46 +278,52 @@ const Account = () => {
         footer={false}
         onCancel={() => setIsModalVisible(false)}
         style={{
-          background: "#1c1d37",
-          border: "1px solid #A259FF",
-          borderRadius: "20px",
+          background: 'var(--div-background-color)',
+          border: '1px solid #A259FF',
+          borderRadius: '20px',
         }}
         bodyStyle={{
-          marginTop: "30px",
-          background: "#1c1d37",
+          marginTop: '30px',
+          background: 'var(--div-background-color)',
         }}
         closable={false}
         width="700px"
       >
         <div className={styles.modalHeader}>
-              <div />
-              <div className={styles.modalWrapper}>
-                <div className={styles.modalImage}>
-                  <img src="/assets/images/mpicon.svg" alt="logo" />
-                </div>
-                <h2 className="tw-flex-1 tw-text-white tw-text-center tw-w-full tw-font-bold tw-text-lg">
-                 Connected Account
-                </h2>
-              </div>
-              <h1
-                className="tw-text-white tw-font-bold tw-text-2xl hover:tw-text-gray-500 tw-cursor-pointer"
-                onClick={() => setIsModalVisible(false)}
-              >
-                X
-              </h1>
+          <div />
+          <div className={styles.modalWrapper}>
+            <div className={styles.modalImage}>
+              <img src="/assets/images/mpicon.svg" alt="logo" />
             </div>
-            <Row className="tw-mb-5">
-              <Col span={4} className="flex-1"></Col>
-            </Row>
-          <Row justify="center" className="tw-flex tw-flex-col tw-p-3 tw-text-center">
+            <h2 className="tw-flex-1 tw-text-white tw-text-center tw-w-full tw-font-bold tw-text-lg">
+              Connected Account
+            </h2>
+          </div>
+          <h1
+            className="tw-text-white tw-font-bold tw-text-2xl hover:tw-text-gray-500 tw-cursor-pointer"
+            onClick={() => setIsModalVisible(false)}
+          >
+            X
+          </h1>
+        </div>
+        <Row className="tw-mb-5">
+          <Col span={4} className="flex-1" />
+        </Row>
+        <Row
+          justify="center"
+          className="tw-flex tw-flex-col tw-p-3 tw-text-center"
+        >
           <Address
             avatar="left"
             size={6}
             copyable
-            style={{ fontSize: "20px" }}
+            style={{ fontSize: '20px' }}
             address={activeKey}
           />
-          <div className="tw-text-center" style={{ marginTop: "10px", padding: "0 10px" }}>
+          <div
+            className="tw-text-center"
+            style={{ marginTop: '10px', padding: '0 10px' }}
+          >
             {!isConnected && activeKey === null ? (
               <a
                 href={`${process.env.NETWORK_URL}/address/${walletAddress}`}
@@ -328,34 +331,37 @@ const Account = () => {
                 rel="noreferrer"
                 className="tw-text-white"
               >
-                <SelectOutlined style={{ marginRight: "5px" }} />
+                <SelectOutlined style={{ marginRight: '5px' }} />
                 View on Explorer
               </a>
             ) : (
               <a
                 href={`${process.env.CASPER_URL}/account/${activeKey}`}
                 target="_blank"
-                  rel="noreferrer"
-                  className="tw-text-white"
+                rel="noreferrer"
+                className="tw-text-white"
               >
-                <SelectOutlined style={{ marginRight: "5px" }} />
+                <SelectOutlined style={{ marginRight: '5px' }} />
                 View on CSPR live
               </a>
             )}
           </div>
         </Row>
         <Row className="tw-py-3 tw-justify-center">
-        <ButtonComponent className="tw-w-full " text="Disconnect Wallet" func={async () => {
-            logout();
-            setWalletLoginRequest(false);
-            await window.casperlabsHelper.disconnectFromSite();
-            [SIGNER_EVENTS.locked, SIGNER_EVENTS.disconnected].forEach(
-              (event) =>
-                window.addEventListener(event, dispatchDisconnectedSinger)
-            );
-            setIsModalVisible(false);
-          }} />
-          </Row>
+          <ButtonComponent
+            className="tw-w-full "
+            text="Disconnect Wallet"
+            func={async () => {
+              logout();
+              setWalletLoginRequest(false);
+              await window.casperlabsHelper.disconnectFromSite();
+              [SIGNER_EVENTS.locked, SIGNER_EVENTS.disconnected].forEach(
+                (event) => window.addEventListener(event, dispatchDisconnectedSinger),
+              );
+              setIsModalVisible(false);
+            }}
+          />
+        </Row>
       </Modal>
     </>
   );
diff --git a/components/CreateProfile/CreateProfileInput.js b/components/CreateProfile/CreateProfileInput.js
index 341a3e5d..3c960a6c 100644
--- a/components/CreateProfile/CreateProfileInput.js
+++ b/components/CreateProfile/CreateProfileInput.js
@@ -5,7 +5,14 @@ import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 
 const CreateProfileInput = function ({
-  label, type, name, options, required, value, setValue, className,
+  label,
+  type,
+  name,
+  options,
+  required,
+  value,
+  setValue,
+  className,
 }) {
   const [colorPickerVisibility, setColorPickerVisibility] = useState(false);
 
@@ -40,22 +47,29 @@ const CreateProfileInput = function ({
     }
   };
 
-  const handleSwitchChange = () => (setValue ? {
-    value: options.find((option) => option.label === value),
-    onChange: (e) => { setValue(e.value); },
-  } : {});
+  const handleSwitchChange = () => (setValue
+    ? {
+      value: options.find((option) => option.label === value),
+      onChange: (e) => {
+        setValue(e.value);
+      },
+    }
+    : {});
 
   const handleColorChange = (color) => {
     setValue(color.hex);
   };
 
   const colourStyles = {
-    control: (styles) => ({ ...styles, backgroundColor: '#1C1D37' }),
+    control: (styles) => ({
+      ...styles,
+      backgroundColor: 'var(--div-background-color)',
+    }),
     option: (styles, {
       data, isDisabled, isFocused, isSelected,
     }) => ({
       ...styles,
-      backgroundColor: '#1C1D37',
+      backgroundColor: 'var(--div-background-color)',
       color: '#ddd',
       cursor: isDisabled ? 'not-allowed' : 'default',
     }),
@@ -101,15 +115,19 @@ const CreateProfileInput = function ({
             <div
               className="cpt-btn"
               onClick={() => setColorPickerVisibility(!colorPickerVisibility)}
-              style={colorPickerVisibility ? { backgroundColor: '#a159fe' } : { backgroundColor: '#a159fe' }}
+              style={
+                colorPickerVisibility
+                  ? { backgroundColor: '#a159fe' }
+                  : { backgroundColor: '#a159fe' }
+              }
             >
               {!colorPickerVisibility ? 'Pick a Color' : 'Close Color Picker'}
             </div>
           </div>
           {colorPickerVisibility && (
-          <div className="react-color">
-            <ChromePicker color={value} onChange={handleColorChange} />
-          </div>
+            <div className="react-color">
+              <ChromePicker color={value} onChange={handleColorChange} />
+            </div>
           )}
         </label>
       );
@@ -127,7 +145,9 @@ const CreateProfileInput = function ({
             className="datepicker"
             value={value}
             selected={value}
-            onChange={(date) => { setValue(date); }}
+            onChange={(date) => {
+              setValue(date);
+            }}
             dateFormat="MM/dd/yyyy"
             placeholder="mm/dd/yyyy"
             required
diff --git a/components/donate/DonateAmount.js b/components/donate/DonateAmount.js
index 469d0302..0eb2c86a 100644
--- a/components/donate/DonateAmount.js
+++ b/components/donate/DonateAmount.js
@@ -52,9 +52,14 @@ const DonateAmount = ({
           </button>
         </div>
       </div>
-
     </div>
-    <div style={{ background: '#1C1D37', padding: '2.5rem 0' }} className="mt-5">
+    <div
+      style={{
+        background: 'var(--div-background-color)',
+        padding: '2.5rem 0',
+      }}
+      className="mt-5"
+    >
       <div className="container step__bottom">
         <p>or donate a cusotm ammount</p>
         <div className="step__amount-custom">
diff --git a/components/homepage/HomepageDonate.js b/components/homepage/HomepageDonate.js
index 744a7cf9..8a2f3ba3 100644
--- a/components/homepage/HomepageDonate.js
+++ b/components/homepage/HomepageDonate.js
@@ -71,9 +71,7 @@ const HomepageDonate = () => {
     <section id="donate" className="homepage__donate">
       <div className="donate__container">
         <div className="container">
-          <h2 className="top__part__title">
-            Donate
-          </h2>
+          <h2 className="top__part__title">Donate</h2>
           <div className="tw-flex">
             <img
               src="/assets/images/home-page/about-title-icon.svg"
@@ -82,10 +80,10 @@ const HomepageDonate = () => {
               alt="blockchain"
             />
             <p className="donate__container-subtitle md:tw-text-base">
-              We rely on donations from everyday people just
-              like you to fund our strategic activism.
-              Please make a recurring donation to our organization so we can continue to fight to
-              bring marginalized communities into the STEM workforce.
+              We rely on donations from everyday people just like you to fund
+              our strategic activism. Please make a recurring donation to our
+              organization so we can continue to fight to bring marginalized
+              communities into the STEM workforce.
             </p>
           </div>
         </div>
@@ -123,7 +121,13 @@ const HomepageDonate = () => {
             </div>
           </div>
         </div>
-        <div style={{ background: '#1C1D37', padding: '2.5rem 0' }} className="tw-my-20">
+        <div
+          style={{
+            background: 'var(--div-background-color)',
+            padding: '2.5rem 0',
+          }}
+          className="tw-my-20"
+        >
           <div className="container step__payment-monthly">
             <div className="">
               <input
@@ -135,7 +139,6 @@ const HomepageDonate = () => {
                 }}
               />
               <label>Monthly Donation</label>
-
             </div>
             <div className="">
               <input
@@ -146,10 +149,9 @@ const HomepageDonate = () => {
                   setMonthly(false);
                 }}
               />
-              <label>I want to make a single  donation</label>
+              <label>I want to make a single donation</label>
             </div>
           </div>
-
         </div>
         <div>
           {count === 1 ? (
@@ -198,18 +200,6 @@ const HomepageDonate = () => {
             />
           ) : null}
         </div>
-        {/* <div className="donate__options">
-          <h2 className="tw-text-blue-900">Other ways to support us:</h2>
-          <div className="donation__option">
-            <a
-              href="https://commerce.coinbase.com/charges/ZT33MCJR"
-              target="_blank"
-              rel="noreferrer"
-            >
-              <i className="fab fa-bitcoin" />
-            </a>
-          </div>
-        </div> */}
       </div>
     </section>
   );
diff --git a/components/learn/SkeletonElement.js b/components/learn/SkeletonElement.js
index 0af8f11b..92481475 100644
--- a/components/learn/SkeletonElement.js
+++ b/components/learn/SkeletonElement.js
@@ -1,19 +1,23 @@
-import React from "react";
-import Skeleton from "react-loading-skeleton";
-import "./learn-css/Skeleton.module.css";
+import React from 'react';
+import Skeleton from 'react-loading-skeleton';
+import './learn-css/Skeleton.module.css';
 
 const SkeletonElement = () => (
   <div className="courses-details banner-bg ">
     <div
       className="row tw-pt-10"
-      style={{ backgroundColor: "#1c1d37", height: "100vh", width: "100vw" }}
+      style={{
+        backgroundColor: 'var(--div-background-color)',
+        height: '100vh',
+        width: '100vw',
+      }}
     >
       <div className="col-10 col-md-5 pr-0">
         {/* Course Sidebar */}
         <div className="pb-5 lg:pt-5">
           <div className="ml-md-4 mb-3 mt-4">
             <Skeleton
-              style={{ backgroundColor: "#dcdcdc" }}
+              style={{ backgroundColor: '#dcdcdc' }}
               width={0}
               height={10}
             />
@@ -23,14 +27,14 @@ const SkeletonElement = () => (
             <Skeleton
               width={150}
               height={15}
-              style={{ backgroundColor: "#dcdcdc" }}
+              style={{ backgroundColor: '#dcdcdc' }}
             />
             <div className="mt-4 pt-3">
               <h5 className="mb-3">
                 <Skeleton
                   width={170}
                   height={20}
-                  style={{ backgroundColor: "#dcdcdc" }}
+                  style={{ backgroundColor: '#dcdcdc' }}
                 />
               </h5>
               <div className="mb-2 d-flex align-items-center">
@@ -38,12 +42,12 @@ const SkeletonElement = () => (
                   className="mr-2"
                   width={25}
                   height={25}
-                  style={{ borderRadius: "50%", backgroundColor: "#dcdcdc" }}
+                  style={{ borderRadius: '50%', backgroundColor: '#dcdcdc' }}
                 />
                 <Skeleton
                   width={160}
                   height={13}
-                  style={{ backgroundColor: "#dcdcdc" }}
+                  style={{ backgroundColor: '#dcdcdc' }}
                 />
               </div>
               <div className="mb-2 d-flex align-items-center">
@@ -51,12 +55,12 @@ const SkeletonElement = () => (
                   className="mr-2"
                   width={25}
                   height={25}
-                  style={{ borderRadius: "50%", backgroundColor: "#dcdcdc" }}
+                  style={{ borderRadius: '50%', backgroundColor: '#dcdcdc' }}
                 />
                 <Skeleton
                   width={160}
                   height={13}
-                  style={{ backgroundColor: "#dcdcdc" }}
+                  style={{ backgroundColor: '#dcdcdc' }}
                 />
               </div>
             </div>
@@ -66,7 +70,7 @@ const SkeletonElement = () => (
                 <Skeleton
                   width={170}
                   height={20}
-                  style={{ backgroundColor: "#dcdcdc" }}
+                  style={{ backgroundColor: '#dcdcdc' }}
                 />
               </h5>
               <div className="mb-2 d-flex align-items-center">
@@ -74,12 +78,12 @@ const SkeletonElement = () => (
                   className="mr-2"
                   width={25}
                   height={25}
-                  style={{ borderRadius: "50%", backgroundColor: "#dcdcdc" }}
+                  style={{ borderRadius: '50%', backgroundColor: '#dcdcdc' }}
                 />
                 <Skeleton
                   width={160}
                   height={13}
-                  style={{ backgroundColor: "#dcdcdc" }}
+                  style={{ backgroundColor: '#dcdcdc' }}
                 />
               </div>
               <div className="mb-2 d-flex align-items-center">
@@ -87,12 +91,12 @@ const SkeletonElement = () => (
                   className="mr-2"
                   width={25}
                   height={25}
-                  style={{ borderRadius: "50%", backgroundColor: "#dcdcdc" }}
+                  style={{ borderRadius: '50%', backgroundColor: '#dcdcdc' }}
                 />
                 <Skeleton
                   width={160}
                   height={13}
-                  style={{ backgroundColor: "#dcdcdc" }}
+                  style={{ backgroundColor: '#dcdcdc' }}
                 />
               </div>
             </div>
@@ -102,7 +106,7 @@ const SkeletonElement = () => (
                 <Skeleton
                   width={170}
                   height={20}
-                  style={{ backgroundColor: "#dcdcdc" }}
+                  style={{ backgroundColor: '#dcdcdc' }}
                 />
               </h5>
               <div className="mb-2 d-flex align-items-center">
@@ -110,12 +114,12 @@ const SkeletonElement = () => (
                   className="mr-2"
                   width={25}
                   height={25}
-                  style={{ borderRadius: "50%", backgroundColor: "#dcdcdc" }}
+                  style={{ borderRadius: '50%', backgroundColor: '#dcdcdc' }}
                 />
                 <Skeleton
                   width={160}
                   height={13}
-                  style={{ backgroundColor: "#dcdcdc" }}
+                  style={{ backgroundColor: '#dcdcdc' }}
                 />
               </div>
               <div className="mb-2 d-flex align-items-center">
@@ -123,12 +127,12 @@ const SkeletonElement = () => (
                   className="mr-2"
                   width={25}
                   height={25}
-                  style={{ borderRadius: "50%", backgroundColor: "#dcdcdc" }}
+                  style={{ borderRadius: '50%', backgroundColor: '#dcdcdc' }}
                 />
                 <Skeleton
                   width={160}
                   height={13}
-                  style={{ backgroundColor: "#dcdcdc" }}
+                  style={{ backgroundColor: '#dcdcdc' }}
                 />
               </div>
             </div>
@@ -146,24 +150,24 @@ const SkeletonElement = () => (
                 <Skeleton
                   width={170}
                   height={20}
-                  style={{ backgroundColor: "#dcdcdc" }}
+                  style={{ backgroundColor: '#dcdcdc' }}
                 />
               </h1>
               <Skeleton
-                style={{ backgroundColor: "#dcdcdc" }}
+                style={{ backgroundColor: '#dcdcdc' }}
                 width={70}
                 height={10}
               />
               <div className=" mt-2 mb-2">
                 <Skeleton
                   height={6}
-                  style={{ backgroundColor: "#dcdcdc", width: "100%" }}
+                  style={{ backgroundColor: '#dcdcdc', width: '100%' }}
                 />
               </div>
               <div className=" mt-2 mb-2">
                 <Skeleton
                   height={6}
-                  style={{ backgroundColor: "#dcdcdc", width: "100%" }}
+                  style={{ backgroundColor: '#dcdcdc', width: '100%' }}
                 />
               </div>
             </div>
@@ -175,12 +179,12 @@ const SkeletonElement = () => (
             <Skeleton
               height={10}
               width={22}
-              style={{ backgroundColor: "#dcdcdc" }}
+              style={{ backgroundColor: '#dcdcdc' }}
             />
             <Skeleton
               height={10}
               width={22}
-              style={{ backgroundColor: "#dcdcdc" }}
+              style={{ backgroundColor: '#dcdcdc' }}
             />
           </div>
 
@@ -192,8 +196,8 @@ const SkeletonElement = () => (
                     <Skeleton
                       className="ml-3"
                       style={{
-                        backgroundColor: "#dcdcdc",
-                        borderRadius: "15px",
+                        backgroundColor: '#dcdcdc',
+                        borderRadius: '15px',
                       }}
                       width={70}
                       height={15}
@@ -205,19 +209,19 @@ const SkeletonElement = () => (
                     <Skeleton
                       width={170}
                       height={14}
-                      style={{ backgroundColor: "#dcdcdc" }}
+                      style={{ backgroundColor: '#dcdcdc' }}
                     />
                   </h4>
                 </div>
-                <div className="mb-1" style={{ padding: "0px 115px" }}>
+                <div className="mb-1" style={{ padding: '0px 115px' }}>
                   <div className="mt-1">
                     <Skeleton
                       className="mr-5"
                       height={6}
                       style={{
-                        backgroundColor: "#dcdcdc",
-                        width: "90%",
-                        marginLeft: "4rem",
+                        backgroundColor: '#dcdcdc',
+                        width: '90%',
+                        marginLeft: '4rem',
                       }}
                     />
                   </div>
@@ -226,9 +230,9 @@ const SkeletonElement = () => (
                       className="mr-5"
                       height={6}
                       style={{
-                        backgroundColor: "#dcdcdc",
-                        width: "90%",
-                        marginLeft: "4rem",
+                        backgroundColor: '#dcdcdc',
+                        width: '90%',
+                        marginLeft: '4rem',
                       }}
                     />
                   </div>
diff --git a/components/learn/courseDetails/ActivityDetails.js b/components/learn/courseDetails/ActivityDetails.js
index 31f71605..1ae6b4b0 100644
--- a/components/learn/courseDetails/ActivityDetails.js
+++ b/components/learn/courseDetails/ActivityDetails.js
@@ -58,7 +58,9 @@ const ActivityDetails = ({
   }
 
   const specificUserModules = userModules
-    && userModules.filter((eModule) => specificModules.some((module) => eModule.moduleId._id === module._id));
+    && userModules.filter(
+      (eModule) => specificModules.some((module) => eModule.moduleId._id === module._id),
+    );
 
   const userModulesId = [];
   specificUserModules.forEach((module) => {
@@ -77,8 +79,7 @@ const ActivityDetails = ({
         body: JSON.stringify({
           completionRate: 50,
         }),
-      })
-        .then((res) => res.json());
+      }).then((res) => res.json());
     }
   };
 
@@ -133,7 +134,7 @@ const ActivityDetails = ({
     <div className="banner-bg activity-pad">
       <div
         className="activity-styles d-flex flex-column justify-content-start align-items-center w-100"
-        style={{ backgroundColor: '#1C1D37' }}
+        style={{ backgroundColor: '--div-background-color' }}
       >
         {/* <div className="col-12 col-md-3 pr-0 scroll-sidebar">
           <CourseSidebar
@@ -144,26 +145,49 @@ const ActivityDetails = ({
           />
         </div> */}
 
-        <div className="d-flex flex-column justify-content-center align-items-center mb-4 mt-4" style={{ width: '80%' }}>
-          <div className="d-flex flew-row mb-2 align-items-center justify-content-start" style={{ height: '48px', textAlign: 'center', width: '100%' }}>
-            <button className="ml-3 mr-3" type="button" onClick={() => router.back()}>
+        <div
+          className="d-flex flex-column justify-content-center align-items-center mb-4 mt-4"
+          style={{ width: '80%' }}
+        >
+          <div
+            className="d-flex flew-row mb-2 align-items-center justify-content-start"
+            style={{ height: '48px', textAlign: 'center', width: '100%' }}
+          >
+            <button
+              className="ml-3 mr-3"
+              type="button"
+              onClick={() => router.back()}
+            >
               {/* return button */}
-              <FontAwesomeIcon icon={faArrowLeft} style={{ fontSize: '40px', color: 'white' }} className="icon" />
+              <FontAwesomeIcon
+                icon={faArrowLeft}
+                style={{ fontSize: '40px', color: 'white' }}
+                className="icon"
+              />
             </button>
-            <h3 className="tw-text-white text-center" style={{ fontSize: '28px', lineHeight: '48px', weight: '600' }}>
+            <h3
+              className="tw-text-white text-center"
+              style={{ fontSize: '28px', lineHeight: '48px', weight: '600' }}
+            >
               {moduleInfo.name}
             </h3>
-
           </div>
           {/* youtube player */}
-          <div className="banner-bg d-flex justify-content-center" style={{ borderRadius: '30px', width: '100%' }}>
+          <div
+            className="banner-bg d-flex justify-content-center"
+            style={{ borderRadius: '30px', width: '100%' }}
+          >
             <div className="player-wrapper" style={{ width: '95%' }}>
               <ReactPlayer
                 url={moduleInfo.url}
                 controls
                 width="100%"
                 height="700px"
-                style={{ height: '100%', maxWidth: '100%', overflowX: 'hidden' }}
+                style={{
+                  height: '100%',
+                  maxWidth: '100%',
+                  overflowX: 'hidden',
+                }}
                 onStart={onStart}
                 onEnded={handleWatch}
               />
@@ -192,7 +216,6 @@ const ActivityDetails = ({
           <div className="pt-4">
             <div className="menu-items">
               <div className="d-flex justify-content-between mx-5 nextPrev-icons">
-
                 {moduleInfo.elementKey !== specificModules.length - 1 && (
                   <>
                     {completed === false ? (
@@ -220,7 +243,10 @@ const ActivityDetails = ({
               <div className="w-100 mb-3">
                 <div className="course-weeks p-4 activityDetails">
                   <div className="d-flex flex-row justify-content-between">
-                    <div className="duration mt-3" style={{ color: 'white', fontSize: '17px' }}>
+                    <div
+                      className="duration mt-3"
+                      style={{ color: 'white', fontSize: '17px' }}
+                    >
                       <span>
                         <FontAwesomeIcon icon={faClock} />
                       </span>
@@ -232,30 +258,33 @@ const ActivityDetails = ({
                           ? 'green-activityStatus d-flex justify-content-center align-items-center'
                           : 'red-activityStatus d-flex justify-content-center align-items-center'
                       }
-                      style={
-                        {
-                          textAlign: 'center',
-                          fontSize: '17px',
-                          width: 'auto',
-                          paddingLeft: '10px',
-                          paddingRight: '10px',
-                        }
-                      }
+                      style={{
+                        textAlign: 'center',
+                        fontSize: '17px',
+                        width: 'auto',
+                        paddingLeft: '10px',
+                        paddingRight: '10px',
+                      }}
                     >
                       <span>{completionStatus}</span>
                     </p>
                   </div>
                   <div className="text-white activity-details">
                     <div className="mt-3">
-                      <p style={{ fontSize: '21px' }}>{moduleInfo.description}</p>
+                      <p style={{ fontSize: '21px' }}>
+                        {moduleInfo.description}
+                      </p>
                     </div>
                   </div>
                 </div>
               </div>
               {/* Buttons */}
               <div className="d-flex flex-row justify-content-between mb-4">
-                {/* <button className="lesson-button d-flex flex-row justify-content-center align-items-center p-3" style={{ lineHeight: '20px', border: '1px solid #6938EF', borderRadius: '20px' }}>
-                  <FontAwesomeIcon icon={faArrowLeft} style={{ fontSize: '17px', color: 'white' }} className="icon mr-2" />
+                {/* <button className="lesson-button d-flex
+                flex-row justify-content-center align-items-center p-3"
+                style={{ lineHeight: '20px', border: '1px solid #6938EF', borderRadius: '20px' }}>
+                  <FontAwesomeIcon icon={faArrowLeft}
+                   style={{ fontSize: '17px', color: 'white' }} className="icon mr-2" />
                   <p style={{ fontSize: '17px', color: 'white' }}>
                     Previous Lesson
                   </p>
@@ -263,10 +292,15 @@ const ActivityDetails = ({
                 <div className="d-flex flex-row">
                   <button
                     type="button"
-                    onClick={() => { (setWatched(true), setIsOpen(true)); }}
+                    onClick={() => {
+                      setWatched(true), setIsOpen(true);
+                    }}
                     className="quiz-button p-3"
                     style={{
-                      lineHeight: '20px', border: '1px solid #6938EF', borderRadius: '20px', background: '#6938EF',
+                      lineHeight: '20px',
+                      border: '1px solid #6938EF',
+                      borderRadius: '20px',
+                      background: '#6938EF',
                     }}
                   >
                     <p style={{ fontSize: '17px', color: 'white' }}>
@@ -278,16 +312,22 @@ const ActivityDetails = ({
                     onClick={forwardInfo}
                     data-dismiss="modal"
                     aria-label="Close"
-                    className="lesson-button d-flex flex-row justify-content-center p-3 ml-5 align-items-center" style={{ lineHeight: '20px', border: '1px solid #6938EF', borderRadius: '20px' }}>
+                    className="lesson-button d-flex flex-row justify-content-center
+                     p-3 ml-5 align-items-center"
+                     style={{ lineHeight: '20px',
+                      border: '1px solid #6938EF', borderRadius: '20px' }}>
                     <p className="mr-2" style={{ fontSize: '17px', color: 'white' }}>
                       Next Lesson
                     </p>
-                    <FontAwesomeIcon icon={faArrowRight} style={{ fontSize: '17px', color: 'white' }} className="icon" />
+                    <FontAwesomeIcon icon={faArrowRight}
+                    style={{ fontSize: '17px', color: 'white' }} className="icon" />
                   </button> */}
                 </div>
               </div>
               <div className="w-100 mb-3 d-flex flex-column mb-3">
-                <p style={{ fontSize: '28px', color: 'white' }}>Addtional Resources</p>
+                <p style={{ fontSize: '28px', color: 'white' }}>
+                  Addtional Resources
+                </p>
               </div>
             </div>
           </div>
@@ -377,7 +417,7 @@ const ActivityDetails = ({
           </div>
         </div>
       </div>
-    </div >
+    </div>
   );
 };
 
diff --git a/components/learn/courseDetails/coursesDetails.css b/components/learn/courseDetails/coursesDetails.css
index c07f642c..dbd4da1a 100644
--- a/components/learn/courseDetails/coursesDetails.css
+++ b/components/learn/courseDetails/coursesDetails.css
@@ -5,7 +5,7 @@
   color: #fff;
 }
 .course-sidebar {
-  background-color: #1c1d37;
+  background-color: var(--div-background-color);
   color: #fff;
   padding-bottom: 8rem;
   border: 1px solid #a259ff;
@@ -53,12 +53,12 @@
   border: 1px solid rgb(223, 222, 222);
   color: rgb(61, 61, 61) !important;
 }
-.lesson-button:hover{
-  background: #6938EF;
+.lesson-button:hover {
+  background: #6938ef;
 }
-.quiz-button:hover{
+.quiz-button:hover {
   background: white;
-  color: #6938EF;
+  color: #6938ef;
 }
 
 /* User Banner */
@@ -81,7 +81,7 @@
   border: 1px solid #a259ff;
   border-radius: 16px;
   margin-bottom: 2rem;
-  background: #1c1d37;
+  background: var(--div-background-color);
 }
 
 .progress-circle {
@@ -165,12 +165,12 @@
   color: rgb(204, 203, 203);
 }
 .course-weeks {
-  background: #1C1D37;
+  background: var(--div-background-color);
   box-shadow: inset -7px -7px 24px rgba(255, 255, 255, 0.04),
     inset 7px 7px 14px rgba(255, 255, 255, 0.09);
   border-radius: 16px;
   cursor: pointer;
-  border: 3px solid #6938EF;
+  border: 3px solid #6938ef;
   padding: 20px 0;
 }
 .course-weeks .progress {
@@ -184,7 +184,7 @@
   background: #14152b;
 }
 .modules-details {
-  background-color: #1c1d37;
+  background-color: var(--div-background-color);
   border: 1px solid #a259ff;
   border-radius: 16px;
   margin-bottom: 2rem;
diff --git a/components/settings/ProfileFourthStep.js b/components/settings/ProfileFourthStep.js
index 657c0316..9a0db98f 100644
--- a/components/settings/ProfileFourthStep.js
+++ b/components/settings/ProfileFourthStep.js
@@ -13,9 +13,7 @@ const DropdownIndicator = () => (
   />
 );
 
-const ProfileFourthStep = ({
-  data, step, setData,
-}) => {
+const ProfileFourthStep = ({ data, step, setData }) => {
   const [googleLink, setGoogleLink] = useState(data?.GoogleLink);
   const [figmaLink, setFigmaLink] = useState(data?.FigmaLink);
   const [clickupLink, setClickupLink] = useState(data?.ClickupLink);
@@ -39,17 +37,15 @@ const ProfileFourthStep = ({
     dribbleLink: true,
   });
   const [show, setShow] = useState(true);
-  const [missingLinks, setMissingLinks] = useState(
-    [
-      { label: facebookLink ? '' : 'Facebook', value: 'facebook' },
-      { label: figmaLink ? '' : 'Figma', value: 'figma' },
-      { label: clickupLink ? '' : 'Click up', value: 'clickup' },
-      { label: linkedinLink ? '' : 'LinkedIn', value: 'linkedin' },
-      { label: githubLink ? '' : 'Github', value: 'github' },
-      { label: dribbleLink ? '' : 'Dribble', value: 'dribble' },
-      { label: googleLink ? '' : 'Google', value: 'google' },
-    ],
-  );
+  const [missingLinks, setMissingLinks] = useState([
+    { label: facebookLink ? '' : 'Facebook', value: 'facebook' },
+    { label: figmaLink ? '' : 'Figma', value: 'figma' },
+    { label: clickupLink ? '' : 'Click up', value: 'clickup' },
+    { label: linkedinLink ? '' : 'LinkedIn', value: 'linkedin' },
+    { label: githubLink ? '' : 'Github', value: 'github' },
+    { label: dribbleLink ? '' : 'Dribble', value: 'dribble' },
+    { label: googleLink ? '' : 'Google', value: 'google' },
+  ]);
 
   // const [update, setUpdate] = useState(false);
 
@@ -117,15 +113,19 @@ const ProfileFourthStep = ({
       default:
         break;
     }
-    const updatedLinks = missingLinks.filter((item) => item.value !== link.value);
+    const updatedLinks = missingLinks.filter(
+      (item) => item.value !== link.value,
+    );
     setMissingLinks(updatedLinks);
-    if (facebookLink
+    if (
+      facebookLink
       && linkedinLink
       && dribbleLink
       && figmaLink
       && clickupLink
       && githubLink
-      && googleLink) {
+      && googleLink
+    ) {
       setShow(false);
     }
     setLink('');
@@ -137,15 +137,19 @@ const ProfileFourthStep = ({
       ...provided,
       // borderBottom: '1px dotted pink',
       color: 'white',
-      border: state.isSelected ? '2px solid #6938EF' : state.isFocused ? '2px solid #6938EF' : '2px solid transparent',
-      background: '#1C1D37',
+      border: state.isSelected
+        ? '2px solid #6938EF'
+        : state.isFocused
+          ? '2px solid #6938EF'
+          : '2px solid transparent',
+      background: ' var(--div-background-color);',
       borderRadius: '8px',
       padding: 20,
       width: '100%',
       cursor: 'pointer',
       ':active': {
         ...styles[':active'],
-        background: '#1C1D37',
+        background: ' var(--div-background-color);',
       },
     }),
     control: () => ({
@@ -157,10 +161,9 @@ const ProfileFourthStep = ({
     menu: (provided) => ({
       ...provided,
       // borderBottom: '1px dotted pink',
-      background: '#1C1D37',
+      background: ' var(--div-background-color);',
       padding: 5,
       border: '1px solid #6938EF',
-
     }),
     container: (provided) => ({
       ...provided,
@@ -180,7 +183,10 @@ const ProfileFourthStep = ({
       const transition = 'opacity 300ms';
 
       return {
-        ...provided, opacity, transition, color,
+        ...provided,
+        opacity,
+        transition,
+        color,
       };
     },
   };
@@ -195,328 +201,375 @@ const ProfileFourthStep = ({
       <div className={styles.title}>
         <h2>Social Links</h2>
       </div>
-      {googleLink
-      && (
-      <div className={`row ${styles.socialRow}`}>
-        <div className={`col ${styles.socialCol}`}>
-          <div>
-            {' '}
-            <i className="fab fa-google" />
+      {googleLink && (
+        <div className={`row ${styles.socialRow}`}>
+          <div className={`col ${styles.socialCol}`}>
+            <div>
+              {' '}
+              <i className="fab fa-google" />
+            </div>
+            <input
+              type="text"
+              value={googleLink}
+              onChange={(e) => setGoogleLink(e.target.value)}
+              disabled={edit.googleLink}
+            />
+            {edit.googleLink && (
+              <img
+                src="/assets/images/settings/edit.svg"
+                alt="edit"
+                onClick={() => setEdit({
+                  googleLink: false,
+                  figmaLink: true,
+                  clickupLink: true,
+                  facebookLink: true,
+                  linkedinLink: true,
+                  githubLink: true,
+                  dribbleLink: true,
+                })}
+              />
+            )}
+            {!edit.googleLink && (
+              <img
+                src="/assets/images/settings/white-check.svg"
+                alt="edit"
+                onClick={() => setEdit({
+                  googleLink: true,
+                  figmaLink: true,
+                  clickupLink: true,
+                  facebookLink: true,
+                  linkedinLink: true,
+                  githubLink: true,
+                  dribbleLink: true,
+                })}
+              />
+            )}
           </div>
-          <input type="text" value={googleLink} onChange={(e) => setGoogleLink(e.target.value)} disabled={edit.googleLink} />
-          {edit.googleLink && (
-          <img
-            src="/assets/images/settings/edit.svg"
-            alt="edit"
-            onClick={() => setEdit({
-              googleLink: false,
-              figmaLink: true,
-              clickupLink: true,
-              facebookLink: true,
-              linkedinLink: true,
-              githubLink: true,
-              dribbleLink: true,
-            })}
-          />
-          )}
-          {!edit.googleLink && (
-          <img
-            src="/assets/images/settings/white-check.svg"
-            alt="edit"
-            onClick={() => setEdit({
-              googleLink: true,
-              figmaLink: true,
-              clickupLink: true,
-              facebookLink: true,
-              linkedinLink: true,
-              githubLink: true,
-              dribbleLink: true,
-            })}
-          />
-          )}
         </div>
-      </div>
       )}
-      {(facebookLink || facebookLink === '')
-      && (
-      <div className={`row ${styles.socialRow}`}>
-        <div className={`col ${styles.socialCol}`}>
-          <div>
-            {' '}
-            <i className="fab fa-facebook-f" />
+      {(facebookLink || facebookLink === '') && (
+        <div className={`row ${styles.socialRow}`}>
+          <div className={`col ${styles.socialCol}`}>
+            <div>
+              {' '}
+              <i className="fab fa-facebook-f" />
+            </div>
+            <input
+              type="text"
+              value={facebookLink}
+              onChange={(e) => setFacebookLink(e.target.value)}
+              disabled={edit.facebookLink}
+            />
+            {edit.facebookLink && (
+              <img
+                src="/assets/images/settings/edit.svg"
+                alt="edit"
+                onClick={() => setEdit({
+                  googleLink: true,
+                  figmaLink: true,
+                  clickupLink: true,
+                  facebookLink: false,
+                  linkedinLink: true,
+                  githubLink: true,
+                  dribbleLink: true,
+                })}
+              />
+            )}
+            {!edit.facebookLink && (
+              <img
+                src="/assets/images/settings/white-check.svg"
+                alt="edit"
+                onClick={() => setEdit({
+                  googleLink: true,
+                  figmaLink: true,
+                  clickupLink: true,
+                  facebookLink: true,
+                  linkedinLink: true,
+                  githubLink: true,
+                  dribbleLink: true,
+                })}
+              />
+            )}
           </div>
-          <input type="text" value={facebookLink} onChange={(e) => setFacebookLink(e.target.value)} disabled={edit.facebookLink} />
-          {edit.facebookLink && (
-          <img
-            src="/assets/images/settings/edit.svg"
-            alt="edit"
-            onClick={() => setEdit({
-              googleLink: true,
-              figmaLink: true,
-              clickupLink: true,
-              facebookLink: false,
-              linkedinLink: true,
-              githubLink: true,
-              dribbleLink: true,
-            })}
-          />
-          )}
-          {!edit.facebookLink && (
-          <img
-            src="/assets/images/settings/white-check.svg"
-            alt="edit"
-            onClick={() => setEdit({
-              googleLink: true,
-              figmaLink: true,
-              clickupLink: true,
-              facebookLink: true,
-              linkedinLink: true,
-              githubLink: true,
-              dribbleLink: true,
-            })}
-          />
-          )}
         </div>
-      </div>
       )}
-      {(linkedinLink || linkedinLink === '')
-      && (
-      <div className={`row ${styles.socialRow}`}>
-        <div className={`col ${styles.socialCol}`}>
-          <div>
-            <i className="fab fa-linkedin-in" />
+      {(linkedinLink || linkedinLink === '') && (
+        <div className={`row ${styles.socialRow}`}>
+          <div className={`col ${styles.socialCol}`}>
+            <div>
+              <i className="fab fa-linkedin-in" />
+            </div>
+            <input
+              type="text"
+              value={linkedinLink}
+              onChange={(e) => setLinkedinLink(e.target.value)}
+              disabled={edit.linkedinLink}
+            />
+            {edit.linkedinLink && (
+              <img
+                src="/assets/images/settings/edit.svg"
+                alt="edit"
+                onClick={() => setEdit({
+                  googleLink: true,
+                  figmaLink: true,
+                  clickupLink: true,
+                  facebookLink: true,
+                  linkedinLink: false,
+                  githubLink: true,
+                  dribbleLink: true,
+                })}
+              />
+            )}
+            {!edit.linkedinLink && (
+              <img
+                src="/assets/images/settings/white-check.svg"
+                alt="edit"
+                onClick={() => setEdit({
+                  googleLink: true,
+                  figmaLink: true,
+                  clickupLink: true,
+                  facebookLink: true,
+                  linkedinLink: true,
+                  githubLink: true,
+                  dribbleLink: true,
+                })}
+              />
+            )}
           </div>
-          <input type="text" value={linkedinLink} onChange={(e) => setLinkedinLink(e.target.value)} disabled={edit.linkedinLink} />
-          {edit.linkedinLink && (
-          <img
-            src="/assets/images/settings/edit.svg"
-            alt="edit"
-            onClick={() => setEdit({
-              googleLink: true,
-              figmaLink: true,
-              clickupLink: true,
-              facebookLink: true,
-              linkedinLink: false,
-              githubLink: true,
-              dribbleLink: true,
-            })}
-          />
-          )}
-          {!edit.linkedinLink && (
-          <img
-            src="/assets/images/settings/white-check.svg"
-            alt="edit"
-            onClick={() => setEdit({
-              googleLink: true,
-              figmaLink: true,
-              clickupLink: true,
-              facebookLink: true,
-              linkedinLink: true,
-              githubLink: true,
-              dribbleLink: true,
-            })}
-          />
-          )}
         </div>
-      </div>
       )}
-      {(githubLink || githubLink === '')
-      && (
-      <div className={`row ${styles.socialRow}`}>
-        <div className={`col ${styles.socialCol}`}>
-          <div>
-            <i className="fab fa-github-alt" />
+      {(githubLink || githubLink === '') && (
+        <div className={`row ${styles.socialRow}`}>
+          <div className={`col ${styles.socialCol}`}>
+            <div>
+              <i className="fab fa-github-alt" />
+            </div>
+            <input
+              type="text"
+              value={githubLink}
+              onChange={(e) => setGithubLink(e.target.value)}
+              disabled={edit.githubLink}
+            />
+            {edit.githubLink && (
+              <img
+                src="/assets/images/settings/edit.svg"
+                alt="edit"
+                onClick={() => setEdit({
+                  googleLink: true,
+                  figmaLink: true,
+                  clickupLink: true,
+                  facebookLink: true,
+                  linkedinLink: true,
+                  githubLink: false,
+                  dribbleLink: true,
+                })}
+              />
+            )}
+            {!edit.githubLink && (
+              <img
+                src="/assets/images/settings/white-check.svg"
+                alt="edit"
+                onClick={() => setEdit({
+                  googleLink: true,
+                  figmaLink: true,
+                  clickupLink: true,
+                  facebookLink: true,
+                  linkedinLink: true,
+                  githubLink: true,
+                  dribbleLink: true,
+                })}
+              />
+            )}
           </div>
-          <input type="text" value={githubLink} onChange={(e) => setGithubLink(e.target.value)} disabled={edit.githubLink} />
-          {edit.githubLink && (
-          <img
-            src="/assets/images/settings/edit.svg"
-            alt="edit"
-            onClick={() => setEdit({
-              googleLink: true,
-              figmaLink: true,
-              clickupLink: true,
-              facebookLink: true,
-              linkedinLink: true,
-              githubLink: false,
-              dribbleLink: true,
-            })}
-          />
-          )}
-          {!edit.githubLink && (
-          <img
-            src="/assets/images/settings/white-check.svg"
-            alt="edit"
-            onClick={() => setEdit({
-              googleLink: true,
-              figmaLink: true,
-              clickupLink: true,
-              facebookLink: true,
-              linkedinLink: true,
-              githubLink: true,
-              dribbleLink: true,
-            })}
-          />
-          )}
         </div>
-      </div>
       )}
-      {(figmaLink || figmaLink === '')
-      && (
-      <div className={`row ${styles.socialRow}`}>
-        <div className={`col ${styles.socialCol}`}>
-          <div>
-            <i className="fab fa-figma" />
+      {(figmaLink || figmaLink === '') && (
+        <div className={`row ${styles.socialRow}`}>
+          <div className={`col ${styles.socialCol}`}>
+            <div>
+              <i className="fab fa-figma" />
+            </div>
+            <input
+              type="text"
+              value={figmaLink}
+              onChange={(e) => setFigmaLink(e.target.value)}
+              disabled={edit.figmaLink}
+            />
+            {edit.figmaLink && (
+              <img
+                src="/assets/images/settings/edit.svg"
+                alt="edit"
+                onClick={() => setEdit({
+                  googleLink: true,
+                  figmaLink: false,
+                  clickupLink: true,
+                  facebookLink: true,
+                  linkedinLink: true,
+                  githubLink: true,
+                  dribbleLink: true,
+                })}
+              />
+            )}
+            {!edit.figmaLink && (
+              <img
+                src="/assets/images/settings/white-check.svg"
+                alt="edit"
+                onClick={() => setEdit({
+                  googleLink: true,
+                  figmaLink: true,
+                  clickupLink: true,
+                  facebookLink: true,
+                  linkedinLink: true,
+                  githubLink: true,
+                  dribbleLink: true,
+                })}
+              />
+            )}
           </div>
-          <input type="text" value={figmaLink} onChange={(e) => setFigmaLink(e.target.value)} disabled={edit.figmaLink} />
-          {edit.figmaLink && (
-          <img
-            src="/assets/images/settings/edit.svg"
-            alt="edit"
-            onClick={() => setEdit({
-              googleLink: true,
-              figmaLink: false,
-              clickupLink: true,
-              facebookLink: true,
-              linkedinLink: true,
-              githubLink: true,
-              dribbleLink: true,
-            })}
-          />
-          )}
-          {!edit.figmaLink && (
-          <img
-            src="/assets/images/settings/white-check.svg"
-            alt="edit"
-            onClick={() => setEdit({
-              googleLink: true,
-              figmaLink: true,
-              clickupLink: true,
-              facebookLink: true,
-              linkedinLink: true,
-              githubLink: true,
-              dribbleLink: true,
-            })}
-          />
-          )}
         </div>
-      </div>
       )}
-      {(dribbleLink || dribbleLink === '')
-       && (
-       <div className={`row ${styles.socialRow}`}>
-         <div className={`col ${styles.socialCol}`}>
-           <div>
-             <i className="fas fa-basketball-ball" />
-           </div>
-           <input type="text" value={dribbleLink} onChange={(e) => setDribbleLink(e.target.value)} disabled={edit.dribbleLink} />
-           {edit.dribbleLink && (
-           <img
-             src="/assets/images/settings/edit.svg"
-             alt="edit"
-             onClick={() => setEdit({
-               googleLink: true,
-               figmaLink: true,
-               clickupLink: true,
-               facebookLink: true,
-               linkedinLink: true,
-               githubLink: true,
-               dribbleLink: false,
-             })}
-           />
-           )}
-           {!edit.dribbleLink && (
-           <img
-             src="/assets/images/settings/white-check.svg"
-             alt="edit"
-             onClick={() => setEdit({
-               googleLink: true,
-               figmaLink: true,
-               clickupLink: true,
-               facebookLink: true,
-               linkedinLink: true,
-               githubLink: true,
-               dribbleLink: true,
-             })}
-           />
-           )}
-         </div>
-       </div>
-       )}
-      {(clickupLink || clickupLink === '')
-      && (
-      <div className={`row ${styles.socialRow}`}>
-        <div className={`col ${styles.socialCol}`}>
-          <div>
-            <img
-              src="/assets/images/settings/clickup-icon.svg"
-              style={{ maxHeight: '22px' }}
-              alt="clickup-icon"
+      {(dribbleLink || dribbleLink === '') && (
+        <div className={`row ${styles.socialRow}`}>
+          <div className={`col ${styles.socialCol}`}>
+            <div>
+              <i className="fas fa-basketball-ball" />
+            </div>
+            <input
+              type="text"
+              value={dribbleLink}
+              onChange={(e) => setDribbleLink(e.target.value)}
+              disabled={edit.dribbleLink}
             />
+            {edit.dribbleLink && (
+              <img
+                src="/assets/images/settings/edit.svg"
+                alt="edit"
+                onClick={() => setEdit({
+                  googleLink: true,
+                  figmaLink: true,
+                  clickupLink: true,
+                  facebookLink: true,
+                  linkedinLink: true,
+                  githubLink: true,
+                  dribbleLink: false,
+                })}
+              />
+            )}
+            {!edit.dribbleLink && (
+              <img
+                src="/assets/images/settings/white-check.svg"
+                alt="edit"
+                onClick={() => setEdit({
+                  googleLink: true,
+                  figmaLink: true,
+                  clickupLink: true,
+                  facebookLink: true,
+                  linkedinLink: true,
+                  githubLink: true,
+                  dribbleLink: true,
+                })}
+              />
+            )}
           </div>
-          <input type="text" value={clickupLink} onChange={(e) => setClickupLink(e.target.value)} disabled={edit.clickupLink} />
-          {edit.clickupLink && (
-          <img
-            src="/assets/images/settings/edit.svg"
-            alt="edit"
-            onClick={() => setEdit({
-              googleLink: true,
-              figmaLink: true,
-              clickupLink: false,
-              facebookLink: true,
-              linkedinLink: true,
-              githubLink: true,
-              dribbleLink: true,
-            })}
-          />
-          )}
-          {!edit.clickupLink && (
-          <img
-            src="/assets/images/settings/white-check.svg"
-            alt="edit"
-            onClick={() => setEdit({
-              googleLink: true,
-              figmaLink: true,
-              clickupLink: true,
-              facebookLink: true,
-              linkedinLink: true,
-              githubLink: true,
-              dribbleLink: true,
-            })}
-          />
-          )}
         </div>
-      </div>
       )}
-      {show && (
-      <div className={`row ${styles.socialRow}`}>
-        <div className={`col ${styles.socialCol} ${addActive && styles.socailAdd} add-socail-links`}>
-          <div className="tw-flex">
-
-            <div className={`${styles.addLinkBtn} ${addActive && styles.socailAddBtn}`}>
+      {(clickupLink || clickupLink === '') && (
+        <div className={`row ${styles.socialRow}`}>
+          <div className={`col ${styles.socialCol}`}>
+            <div>
               <img
-                src="/assets/images/settings/plus.svg"
+                src="/assets/images/settings/clickup-icon.svg"
+                style={{ maxHeight: '22px' }}
                 alt="clickup-icon"
-                onClick={() => setAddActive(!addActive)}
               />
             </div>
+            <input
+              type="text"
+              value={clickupLink}
+              onChange={(e) => setClickupLink(e.target.value)}
+              disabled={edit.clickupLink}
+            />
+            {edit.clickupLink && (
+              <img
+                src="/assets/images/settings/edit.svg"
+                alt="edit"
+                onClick={() => setEdit({
+                  googleLink: true,
+                  figmaLink: true,
+                  clickupLink: false,
+                  facebookLink: true,
+                  linkedinLink: true,
+                  githubLink: true,
+                  dribbleLink: true,
+                })}
+              />
+            )}
+            {!edit.clickupLink && (
+              <img
+                src="/assets/images/settings/white-check.svg"
+                alt="edit"
+                onClick={() => setEdit({
+                  googleLink: true,
+                  figmaLink: true,
+                  clickupLink: true,
+                  facebookLink: true,
+                  linkedinLink: true,
+                  githubLink: true,
+                  dribbleLink: true,
+                })}
+              />
+            )}
+          </div>
+        </div>
+      )}
+      {show && (
+        <div className={`row ${styles.socialRow}`}>
+          <div
+            className={`col ${styles.socialCol} ${
+              addActive && styles.socailAdd
+            } add-socail-links`}
+          >
+            <div className="tw-flex">
+              <div
+                className={`${styles.addLinkBtn} ${
+                  addActive && styles.socailAddBtn
+                }`}
+              >
+                <img
+                  src="/assets/images/settings/plus.svg"
+                  alt="clickup-icon"
+                  onClick={() => setAddActive(!addActive)}
+                />
+              </div>
+            </div>
+            <input
+              type="button"
+              style={{ cursor: 'default' }}
+              value="Add a Social Links"
+            />
           </div>
-          <input type="button" style={{ cursor: 'default' }} value="Add a Social Links" />
         </div>
-      </div>
       )}
       {addActive && (
         <>
           <div className={`row ${styles.socialAddLink}`}>
             <div className={`col-7 ${styles.socialCol}`}>
-              <input type="text" value={newLink} onChange={(e) => setNewLink(e.target.value)} placeholder="Username/Link" />
+              <input
+                type="text"
+                value={newLink}
+                onChange={(e) => setNewLink(e.target.value)}
+                placeholder="Username/Link"
+              />
             </div>
             <div className="col-1" />
-            <div style={{ padding: '0' }} className={`col-4 ${styles.socialCol}`}>
+            <div
+              style={{ padding: '0' }}
+              className={`col-4 ${styles.socialCol}`}
+            >
               <Select
                 styles={customStyles}
                 components={{ DropdownIndicator }}
-                menuColor="#1C1D37"
+                menuColor=" var(--div-background-color);"
                 isClearable={false}
                 isSearchable={false}
                 onChange={(newValue) => setLink(newValue)}
@@ -528,13 +581,15 @@ const ProfileFourthStep = ({
           </div>
           <div className={`row ${styles.socialAddLink}`}>
             <div className="col-8" />
-            <div className={`col-4 ${styles.socialCol} ${styles.submitLinkBtn}`}>
-              <div onClick={addHandler} className="tw-w-full tw-flex tw-cursor-pointer tw-justify-evenly">
-                <img
-                  src="/assets/images/settings/plus.svg"
-                  alt="plus"
-                />
-                <p>Add  a social link</p>
+            <div
+              className={`col-4 ${styles.socialCol} ${styles.submitLinkBtn}`}
+            >
+              <div
+                onClick={addHandler}
+                className="tw-w-full tw-flex tw-cursor-pointer tw-justify-evenly"
+              >
+                <img src="/assets/images/settings/plus.svg" alt="plus" />
+                <p>Add a social link</p>
               </div>
             </div>
           </div>
diff --git a/components/settings/SettingSetup.js b/components/settings/SettingSetup.js
index 5d13e4a5..71ba05b5 100644
--- a/components/settings/SettingSetup.js
+++ b/components/settings/SettingSetup.js
@@ -11,7 +11,9 @@ const SettingSetup = ({
   data, setData, step, setStep, completeStep,
 }) => {
   const dates = {
-    HighSchoolYear: data?.enteredHighSchoolYear ? new Date(data.enteredHighSchoolYear) : new Date(),
+    HighSchoolYear: data?.enteredHighSchoolYear
+      ? new Date(data.enteredHighSchoolYear)
+      : new Date(),
     birthdayDate: data?.birthday ? new Date(data.birthday) : new Date(),
     GraduationYear: data?.expectedGraduationYear
       ? new Date(data.expectedGraduationYear)
@@ -30,8 +32,12 @@ const SettingSetup = ({
       ...provided,
       // borderBottom: '1px dotted pink',
       color: 'white',
-      border: state.isSelected ? '2px solid #6938EF' : state.isFocused ? '2px solid #6938EF' : '2px solid transparent',
-      background: '#1C1D37',
+      border: state.isSelected
+        ? '2px solid #6938EF'
+        : state.isFocused
+          ? '2px solid #6938EF'
+          : '2px solid transparent',
+      background: 'var(--div-background-color)',
       borderRadius: '8px',
       padding: 20,
       marginTop: 8,
@@ -40,7 +46,7 @@ const SettingSetup = ({
       fontWeight: 'bold',
       ':active': {
         ...styles[':active'],
-        background: '#1C1D37',
+        background: 'var(--div-background-color)',
       },
     }),
     control: () => ({
@@ -52,10 +58,9 @@ const SettingSetup = ({
     menu: (provided) => ({
       ...provided,
       // borderBottom: '1px dotted pink',
-      background: '#1C1D37',
+      background: 'var(--div-background-color)',
       padding: 5,
       border: '1px solid #6938EF',
-
     }),
     container: (provided) => ({
       ...provided,
@@ -74,141 +79,137 @@ const SettingSetup = ({
       const transition = 'opacity 300ms';
 
       return {
-        ...provided, opacity, transition, color,
+        ...provided,
+        opacity,
+        transition,
+        color,
       };
     },
   };
   return (
     <div className={styles.setupContainer}>
       <div className={styles.stepperWrapper}>
-        <div className={`${styles.stepperItem} ${step === 1 && styles.active} ${step > 1 && styles.completed}`}>
-
+        <div
+          className={`${styles.stepperItem} ${step === 1 && styles.active} ${
+            step > 1 && styles.completed
+          }`}
+        >
           {step === 1 && (
             <div onClick={() => setStep(1)} className={styles.stepCounter}>
-              <img
-                src="/assets/images/settings/profile-step1.svg"
-                alt="step"
-              />
+              <img src="/assets/images/settings/profile-step1.svg" alt="step" />
             </div>
           )}
           {step > 1 && (
             <div onClick={() => setStep(1)} className={styles.stepCounter}>
-              <img
-                src="/assets/images/settings/check.svg"
-                alt="step"
-              />
+              <img src="/assets/images/settings/check.svg" alt="step" />
             </div>
           )}
           <div className={styles.stepName}>1</div>
         </div>
-        <div className={`${styles.stepperItem} ${step === 2 && styles.active} ${step > 2 && styles.completed}`}>
+        <div
+          className={`${styles.stepperItem} ${step === 2 && styles.active} ${
+            step > 2 && styles.completed
+          }`}
+        >
           {step === 2 && (
-          <div onClick={() => setStep(2)} className={styles.stepCounter}>
-            <img
-              src="/assets/images/settings/profile-step1.svg"
-              alt="step"
-            />
-          </div>
+            <div onClick={() => setStep(2)} className={styles.stepCounter}>
+              <img src="/assets/images/settings/profile-step1.svg" alt="step" />
+            </div>
           )}
           {step > 2 && (
             <div onClick={() => setStep(2)} className={styles.stepCounter}>
-              <img
-                src="/assets/images/settings/check.svg"
-                alt="step"
-              />
+              <img src="/assets/images/settings/check.svg" alt="step" />
             </div>
           )}
           {step < 2 && (
-            <div onClick={() => setStep(2)} className={styles.stepCounter}>. . .</div>
+            <div onClick={() => setStep(2)} className={styles.stepCounter}>
+              . . .
+            </div>
           )}
           <div className={styles.stepNameEven}>2</div>
         </div>
-        <div className={`${styles.stepperItem} ${step === 3 && styles.active} ${step > 3 && styles.completed}`}>
+        <div
+          className={`${styles.stepperItem} ${step === 3 && styles.active} ${
+            step > 3 && styles.completed
+          }`}
+        >
           {step === 3 && (
-          <div onClick={() => setStep(3)} className={styles.stepCounter}>
-            <img
-              src="/assets/images/settings/profile-step1.svg"
-              alt="step"
-            />
-          </div>
+            <div onClick={() => setStep(3)} className={styles.stepCounter}>
+              <img src="/assets/images/settings/profile-step1.svg" alt="step" />
+            </div>
           )}
           {step > 3 && (
             <div onClick={() => setStep(3)} className={styles.stepCounter}>
-              <img
-                src="/assets/images/settings/check.svg"
-                alt="step"
-              />
+              <img src="/assets/images/settings/check.svg" alt="step" />
             </div>
           )}
           {step < 3 && (
-            <div onClick={() => setStep(3)} className={styles.stepCounter}>. . .</div>
+            <div onClick={() => setStep(3)} className={styles.stepCounter}>
+              . . .
+            </div>
           )}
           <div className={styles.stepName}>3</div>
         </div>
-        <div className={`${styles.stepperItem} ${step === 4 && styles.active} ${step > 4 && styles.completed}`}>
+        <div
+          className={`${styles.stepperItem} ${step === 4 && styles.active} ${
+            step > 4 && styles.completed
+          }`}
+        >
           {step === 4 && (
-          <div onClick={() => setStep(4)} className={styles.stepCounter}>
-            <img
-              src="/assets/images/settings/profile-step1.svg"
-              alt="step"
-            />
-          </div>
+            <div onClick={() => setStep(4)} className={styles.stepCounter}>
+              <img src="/assets/images/settings/profile-step1.svg" alt="step" />
+            </div>
           )}
           {step > 4 && (
             <div onClick={() => setStep(4)} className={styles.stepCounter}>
-              <img
-                src="/assets/images/settings/check.svg"
-                alt="step"
-              />
+              <img src="/assets/images/settings/check.svg" alt="step" />
             </div>
           )}
           {step < 4 && (
-            <div onClick={() => setStep(4)} className={styles.stepCounter}>. . .</div>
+            <div onClick={() => setStep(4)} className={styles.stepCounter}>
+              . . .
+            </div>
           )}
           <div className={styles.stepNameEven}>4</div>
         </div>
       </div>
-      {step === 1
-      && (
-      <ProfileFirstStep
-        setData={setData}
-        data={data}
-        step={step}
-        setStep={setStep}
-        dates={dates}
-        completeStep={completeStep}
-        customStyles={customStyles}
-      />
+      {step === 1 && (
+        <ProfileFirstStep
+          setData={setData}
+          data={data}
+          step={step}
+          setStep={setStep}
+          dates={dates}
+          completeStep={completeStep}
+          customStyles={customStyles}
+        />
       )}
-      {step === 2
-      && (
-      <ProfileSecondStep
-        setData={setData}
-        data={data}
-        step={step}
-        setStep={setStep}
-        dates={dates}
-        customStyles={customStyles}
-      />
+      {step === 2 && (
+        <ProfileSecondStep
+          setData={setData}
+          data={data}
+          step={step}
+          setStep={setStep}
+          dates={dates}
+          customStyles={customStyles}
+        />
       )}
-      {step === 3
-      && (
-      <ProfileThirdStep
-        setData={setData}
-        data={data}
-        step={step}
-        setStep={setStep}
-        customStyles={customStyles}
-      />
+      {step === 3 && (
+        <ProfileThirdStep
+          setData={setData}
+          data={data}
+          step={step}
+          setStep={setStep}
+          customStyles={customStyles}
+        />
       )}
-      {step === 4
-      && (
-      <ProfileFourthStep
-        setData={setData}
-        data={data}
-        step={step}
-        setStep={setStep}
-      />
+      {step === 4 && (
+        <ProfileFourthStep
+          setData={setData}
+          data={data}
+          step={step}
+          setStep={setStep}
+        />
       )}
     </div>
   );
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 66aa8b33..cf5a29d7 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;700&display=swap");
 
 /*
 * 1. common styles
@@ -38,7 +38,7 @@ img {
 }
 
 body {
-  font-family: 'Poppins';
+  font-family: "Poppins";
   color: #81868a;
   font-size: 16px;
   line-height: 34px;
@@ -164,7 +164,7 @@ a:visited {
   background-color: #fff;
   color: #81868a;
   font-size: 14px;
-  font-family: 'Poppins';
+  font-family: "Poppins";
   font-weight: 600;
   line-height: 48px;
   padding-top: 0;
@@ -173,7 +173,7 @@ a:visited {
   padding-right: 15px;
 }
 
-.bs-tooltip-auto[x-placement^='top'] .arrow::before,
+.bs-tooltip-auto[x-placement^="top"] .arrow::before,
 .bs-tooltip-top .arrow::before {
   border-top-color: #fff;
 }
@@ -305,7 +305,7 @@ a:visited {
 
 .cursor-follower.close-cursor:before {
   position: absolute;
-  content: '';
+  content: "";
   height: 25px;
   width: 2px;
   background: #fff;
@@ -318,7 +318,7 @@ a:visited {
 
 .cursor-follower.close-cursor:after {
   position: absolute;
-  content: '';
+  content: "";
   height: 25px;
   width: 2px;
   background: #fff;
@@ -701,12 +701,12 @@ a:visited {
   max-width: 33.33333%;
 }
 
-[class*='site-header__decor-inner-'] {
+[class*="site-header__decor-inner-"] {
   position: relative;
 }
 
-[class*='site-header__decor-inner-']::before {
-  content: '';
+[class*="site-header__decor-inner-"]::before {
+  content: "";
   position: absolute;
   bottom: 0;
   left: 0;
@@ -773,7 +773,7 @@ a:visited {
 }
 
 .header__search-btn::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -5px;
@@ -811,7 +811,7 @@ a:visited {
   padding-left: 30px;
 }
 
-.header__search-form button[type='submit'] {
+.header__search-form button[type="submit"] {
   border: none;
   outline: none;
   width: 46px;
@@ -839,8 +839,8 @@ a:visited {
   right: 10px;
 }
 
-.header__search-form button[type='submit']::before {
-  content: '';
+.header__search-form button[type="submit"]::before {
+  content: "";
   position: absolute;
   top: 0;
   left: -5px;
@@ -852,11 +852,11 @@ a:visited {
   transition: all 0.4s ease;
 }
 
-.header__search-form button[type='submit']:hover {
+.header__search-form button[type="submit"]:hover {
   color: #fff;
 }
 
-.header__search-form button[type='submit']:hover:before {
+.header__search-form button[type="submit"]:hover:before {
   left: 0;
 }
 
@@ -1016,7 +1016,7 @@ a:visited {
   margin: 0;
 }
 
-.banner-wrapper .banner-carousel-btn [class*='banner-carousel-btn__'] {
+.banner-wrapper .banner-carousel-btn [class*="banner-carousel-btn__"] {
   width: 60px;
   height: 60px;
   display: -webkit-box;
@@ -1041,12 +1041,12 @@ a:visited {
   z-index: 91;
 }
 
-.banner-wrapper .banner-carousel-btn [class*='banner-carousel-btn__'] i {
+.banner-wrapper .banner-carousel-btn [class*="banner-carousel-btn__"] i {
   font-size: 22px;
 }
 
-.banner-wrapper .banner-carousel-btn [class*='banner-carousel-btn__']::before {
-  content: '';
+.banner-wrapper .banner-carousel-btn [class*="banner-carousel-btn__"]::before {
+  content: "";
   position: absolute;
   top: 0;
   width: 100%;
@@ -1096,7 +1096,7 @@ a:visited {
 }
 
 .banner-one__slide:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -1130,7 +1130,7 @@ a:visited {
 .banner-one__tag-line {
   margin: 0;
   font-size: 50px;
-  font-family: 'Satisfy';
+  font-family: "Satisfy";
   color: white;
   text-decoration: underline;
   -webkit-animation-duration: 2s;
@@ -1179,7 +1179,7 @@ a:visited {
   backface-visibility: visible !important;
 }
 
-.banner-one [class*='banner-one__bubble-'] {
+.banner-one [class*="banner-one__bubble-"] {
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation-timing-function: linear;
@@ -1303,7 +1303,7 @@ a:visited {
 }
 
 .banner-one__cta-icon:before {
-  content: '';
+  content: "";
   width: 100%;
   height: 100%;
   border-radius: 50%;
@@ -1610,7 +1610,7 @@ a:visited {
 .slider-three__tag-line {
   margin: 0;
   font-size: 34px;
-  font-family: 'Satisfy';
+  font-family: "Satisfy";
   color: #ff00b8;
   text-decoration: underline;
   margin-bottom: 15px;
@@ -1642,7 +1642,7 @@ a:visited {
   padding-left: 30px;
 }
 
-.slider-three__search button[type='submit'] {
+.slider-three__search button[type="submit"] {
   width: 46px;
   height: 46px;
   border-radius: 50%;
@@ -1660,7 +1660,7 @@ a:visited {
   transition: all 0.4s ease;
 }
 
-.slider-three__search button[type='submit'] i {
+.slider-three__search button[type="submit"] i {
   font-size: 18px;
   color: #fff;
   line-height: 46px;
@@ -1668,8 +1668,8 @@ a:visited {
   transition: all 0.4s ease;
 }
 
-.slider-three__search button[type='submit']:before {
-  content: '';
+.slider-three__search button[type="submit"]:before {
+  content: "";
   width: 100%;
   height: 100%;
   border-radius: 50%;
@@ -1681,11 +1681,11 @@ a:visited {
   transition: all 0.4s ease;
 }
 
-.slider-three__search button[type='submit']:hover:before {
+.slider-three__search button[type="submit"]:hover:before {
   left: 0;
 }
 
-[class*='slider-three__icon-'] {
+[class*="slider-three__icon-"] {
   position: absolute;
 }
 
@@ -1861,7 +1861,7 @@ a:visited {
 }
 
 .contact-info-one__icon::before {
-  content: '';
+  content: "";
   width: 100%;
   height: 100%;
   border: 2px solid #ff00b8;
@@ -1878,22 +1878,22 @@ a:visited {
   color: #fff;
 }
 
-.contact-info-one [class*='col-lg-']:nth-child(2) .contact-info-one__icon {
+.contact-info-one [class*="col-lg-"]:nth-child(2) .contact-info-one__icon {
   background-color: #151371;
 }
 
 .contact-info-one
-  [class*='col-lg-']:nth-child(2)
+  [class*="col-lg-"]:nth-child(2)
   .contact-info-one__icon::before {
   border-color: #151371;
 }
 
-.contact-info-one [class*='col-lg-']:nth-child(3) .contact-info-one__icon {
+.contact-info-one [class*="col-lg-"]:nth-child(3) .contact-info-one__icon {
   background-color: #ffc700;
 }
 
 .contact-info-one
-  [class*='col-lg-']:nth-child(3)
+  [class*="col-lg-"]:nth-child(3)
   .contact-info-one__icon::before {
   border-color: #ffc700;
 }
@@ -1977,7 +1977,7 @@ a:visited {
   margin-right: -5px;
 }
 
-.contact-one .row.low-gutters > [class*='col-'] {
+.contact-one .row.low-gutters > [class*="col-"] {
   padding-left: 5px;
   padding-right: 5px;
 }
@@ -2009,7 +2009,7 @@ a:visited {
 }
 
 .gallery-one__single:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -2058,79 +2058,79 @@ a:visited {
   padding-bottom: 120px;
 }
 
-.faq-one [class*='col-lg-'] {
+.faq-one [class*="col-lg-"] {
   border-bottom: 1px solid #f1f1f1;
   padding-top: 70px;
   padding-bottom: 70px;
 }
 
-.faq-one [class*='col-lg-']:nth-child(odd) {
+.faq-one [class*="col-lg-"]:nth-child(odd) {
   padding-right: 76px;
 }
 
-.faq-one [class*='col-lg-']:nth-child(even) {
+.faq-one [class*="col-lg-"]:nth-child(even) {
   border-left: 1px solid #f1f1f1;
   padding-left: 76px;
 }
 
-.faq-one [class*='col-lg-']:nth-child(1),
-.faq-one [class*='col-lg-']:nth-child(2) {
+.faq-one [class*="col-lg-"]:nth-child(1),
+.faq-one [class*="col-lg-"]:nth-child(2) {
   padding-top: 0;
 }
 
-.faq-one [class*='col-lg-']:nth-child(1) .faq-one__icon span {
+.faq-one [class*="col-lg-"]:nth-child(1) .faq-one__icon span {
   background-color: #151371;
 }
 
-.faq-one [class*='col-lg-']:nth-child(1) .faq-one__icon span:before {
+.faq-one [class*="col-lg-"]:nth-child(1) .faq-one__icon span:before {
   border-color: #151371;
 }
 
-.faq-one [class*='col-lg-']:nth-child(1) .faq-one__icon span {
+.faq-one [class*="col-lg-"]:nth-child(1) .faq-one__icon span {
   background-color: #151371;
 }
 
-.faq-one [class*='col-lg-']:nth-child(1) .faq-one__icon span:before {
+.faq-one [class*="col-lg-"]:nth-child(1) .faq-one__icon span:before {
   border-color: #151371;
 }
 
-.faq-one [class*='col-lg-']:nth-child(2) .faq-one__icon span {
+.faq-one [class*="col-lg-"]:nth-child(2) .faq-one__icon span {
   background-color: #ffc700;
 }
 
-.faq-one [class*='col-lg-']:nth-child(2) .faq-one__icon span:before {
+.faq-one [class*="col-lg-"]:nth-child(2) .faq-one__icon span:before {
   border-color: #ffc700;
 }
 
-.faq-one [class*='col-lg-']:nth-child(3) .faq-one__icon span {
+.faq-one [class*="col-lg-"]:nth-child(3) .faq-one__icon span {
   background-color: #ff00b8;
 }
 
-.faq-one [class*='col-lg-']:nth-child(3) .faq-one__icon span:before {
+.faq-one [class*="col-lg-"]:nth-child(3) .faq-one__icon span:before {
   border-color: #ff00b8;
 }
 
-.faq-one [class*='col-lg-']:nth-child(4) .faq-one__icon span {
+.faq-one [class*="col-lg-"]:nth-child(4) .faq-one__icon span {
   background-color: #151371;
 }
 
-.faq-one [class*='col-lg-']:nth-child(4) .faq-one__icon span:before {
+.faq-one [class*="col-lg-"]:nth-child(4) .faq-one__icon span:before {
   border-color: #151371;
 }
 
-.faq-one [class*='col-lg-']:nth-child(5) .faq-one__icon span {
+.faq-one [class*="col-lg-"]:nth-child(5) .faq-one__icon span {
   background-color: #ffc700;
 }
 
-.faq-one [class*='col-lg-']:nth-child(5) .faq-one__icon span:before {
+.faq-one [class*="col-lg-"]:nth-child(5) .faq-one__icon span:before {
   border-color: #ffc700;
 }
 
-.faq-one [class*='col-lg-']:nth-child(6) .faq-one__icon span {
+.faq-one [class*="col-lg-"]:nth-child(6) .faq-one__icon span {
   background-color: #ff00b8;
 }
 
-.faq-one [class*='col-lg-']:nth-child(6) .faq-one__icon span:before {
+.faq-one [class*="col-lg-"]:nth-child(6) .faq-one__icon span:before {
   border-color: #ff00b8;
 }
 
@@ -2160,13 +2160,13 @@ a:visited {
   font-size: 30px;
   color: #fff;
   background-color: #ff00b8;
-  font-family: 'Satisfy';
+  font-family: "Satisfy";
   line-height: 70px;
   position: relative;
 }
 
 .faq-one__icon span::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -10px;
@@ -2242,7 +2242,7 @@ a:visited {
 }
 
 .cta-one__home-one::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -2263,7 +2263,7 @@ a:visited {
 }
 
 .diversity-one__home-one::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -2344,7 +2344,7 @@ a:visited {
 }
 
 .cta-two__icon span::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -15px;
@@ -2557,7 +2557,7 @@ a:visited {
   margin-top: 50px;
 }
 
-[class*='cta-five__members-'] {
+[class*="cta-five__members-"] {
   width: 71px;
   -webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2);
   box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2);
@@ -2605,7 +2605,7 @@ a:visited {
   right: 25%;
 }
 
-[class*='cta-five__bubble-'] {
+[class*="cta-five__bubble-"] {
   background-color: #ff00b8;
   -webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2);
   box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2);
@@ -2619,7 +2619,7 @@ a:visited {
   line-height: 47px;
 }
 
-[class*='cta-five__bubble-'] i.fa-rocket {
+[class*="cta-five__bubble-"] i.fa-rocket {
   font-size: 18px;
 }
 
@@ -2685,7 +2685,7 @@ a:visited {
 }
 
 .cta-six__title::before {
-  content: '';
+  content: "";
   width: 35px;
   height: 10px;
   background-color: #151371;
@@ -2699,7 +2699,7 @@ a:visited {
 .cta-six__title span {
   font-size: 40px;
   color: #ff00b8;
-  font-family: 'Satisfy';
+  font-family: "Satisfy";
   font-weight: 400;
 }
 
@@ -2893,7 +2893,7 @@ a:visited {
   margin: 0;
   font-size: 20px;
   color: #ff00b8;
-  font-family: 'Satisfy';
+  font-family: "Satisfy";
   line-height: 1em;
 }
 
@@ -2929,7 +2929,7 @@ a:visited {
 }
 
 .team-tab:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -3065,30 +3065,30 @@ a:visited {
   padding-bottom: 90px;
 }
 
-.program-one [class*='col-lg-']:nth-child(1) .program-one__tag-line,
-.program-one [class*='col-lg-']:nth-child(1) .program-one__price {
+.program-one [class*="col-lg-"]:nth-child(1) .program-one__tag-line,
+.program-one [class*="col-lg-"]:nth-child(1) .program-one__price {
   color: #151371;
 }
 
-.program-one [class*='col-lg-']:nth-child(1) .program-one__single:after {
+.program-one [class*="col-lg-"]:nth-child(1) .program-one__single:after {
   border-color: #151371;
 }
 
-.program-one [class*='col-lg-']:nth-child(2) .program-one__tag-line,
-.program-one [class*='col-lg-']:nth-child(2) .program-one__price {
+.program-one [class*="col-lg-"]:nth-child(2) .program-one__tag-line,
+.program-one [class*="col-lg-"]:nth-child(2) .program-one__price {
   color: #ff00b8;
 }
 
-.program-one [class*='col-lg-']:nth-child(2) .program-one__single:after {
+.program-one [class*="col-lg-"]:nth-child(2) .program-one__single:after {
   border-color: #ff00b8;
 }
 
-.program-one [class*='col-lg-']:nth-child(3) .program-one__tag-line,
-.program-one [class*='col-lg-']:nth-child(3) .program-one__price {
+.program-one [class*="col-lg-"]:nth-child(3) .program-one__tag-line,
+.program-one [class*="col-lg-"]:nth-child(3) .program-one__price {
   color: #ffc700;
 }
 
-.program-one [class*='col-lg-']:nth-child(3) .program-one__single:after {
+.program-one [class*="col-lg-"]:nth-child(3) .program-one__single:after {
   border-color: #ffc700;
 }
 
@@ -3102,7 +3102,7 @@ a:visited {
 }
 
 .program-one__single::before {
-  content: '';
+  content: "";
   position: absolute;
   right: 0;
   top: 0;
@@ -3115,7 +3115,7 @@ a:visited {
 }
 
 .program-one__single::after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -3218,30 +3218,30 @@ a:visited {
   padding-bottom: 90px;
 }
 
-.pricing-one [class*='col-lg-']:nth-child(1) .pricing-one__tag-line,
-.pricing-one [class*='col-lg-']:nth-child(1) .pricing-one__price {
+.pricing-one [class*="col-lg-"]:nth-child(1) .pricing-one__tag-line,
+.pricing-one [class*="col-lg-"]:nth-child(1) .pricing-one__price {
   color: #151371;
 }
 
-.pricing-one [class*='col-lg-']:nth-child(1) .pricing-one__single:after {
+.pricing-one [class*="col-lg-"]:nth-child(1) .pricing-one__single:after {
   border-color: #151371;
 }
 
-.pricing-one [class*='col-lg-']:nth-child(2) .pricing-one__tag-line,
-.pricing-one [class*='col-lg-']:nth-child(2) .pricing-one__price {
+.pricing-one [class*="col-lg-"]:nth-child(2) .pricing-one__tag-line,
+.pricing-one [class*="col-lg-"]:nth-child(2) .pricing-one__price {
   color: #ff00b8;
 }
 
-.pricing-one [class*='col-lg-']:nth-child(2) .pricing-one__single:after {
+.pricing-one [class*="col-lg-"]:nth-child(2) .pricing-one__single:after {
   border-color: #ff00b8;
 }
 
-.pricing-one [class*='col-lg-']:nth-child(3) .pricing-one__tag-line,
-.pricing-one [class*='col-lg-']:nth-child(3) .pricing-one__price {
+.pricing-one [class*="col-lg-"]:nth-child(3) .pricing-one__tag-line,
+.pricing-one [class*="col-lg-"]:nth-child(3) .pricing-one__price {
   color: #ffc700;
 }
 
-.pricing-one [class*='col-lg-']:nth-child(3) .pricing-one__single:after {
+.pricing-one [class*="col-lg-"]:nth-child(3) .pricing-one__single:after {
   border-color: #ffc700;
 }
 
@@ -3255,7 +3255,7 @@ a:visited {
 }
 
 .pricing-one__single::before {
-  content: '';
+  content: "";
   position: absolute;
   right: 0;
   top: 0;
@@ -3268,7 +3268,7 @@ a:visited {
 }
 
 .pricing-one__single::after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -3367,7 +3367,7 @@ a:visited {
 }
 
 .become-teacher__form:before {
-  content: '';
+  content: "";
   width: 197px;
   height: 268px;
   background-image: url(../images/dot-pattern-1-1.png);
@@ -3385,7 +3385,7 @@ a:visited {
 }
 
 .become-teacher__form-top::before {
-  content: '';
+  content: "";
   width: 38px;
   height: 10px;
   background-image: url(../images/become-form-angle.png);
@@ -3526,27 +3526,27 @@ a:visited {
   background-color: #ff00b8;
 }
 
-.course-one [class*='col-lg-']:nth-child(1) .course-one__category {
+.course-one [class*="col-lg-"]:nth-child(1) .course-one__category {
   background-color: #ffc700;
 }
 
-.course-one [class*='col-lg-']:nth-child(2) .course-one__category {
+.course-one [class*="col-lg-"]:nth-child(2) .course-one__category {
   background-color: #151371;
 }
 
-.course-one [class*='col-lg-']:nth-child(3) .course-one__category {
+.course-one [class*="col-lg-"]:nth-child(3) .course-one__category {
   background-color: #ff00b8;
 }
 
-.course-one [class*='col-lg-']:nth-child(4) .course-one__category {
+.course-one [class*="col-lg-"]:nth-child(4) .course-one__category {
   background-color: #151371;
 }
 
-.course-one [class*='col-lg-']:nth-child(5) .course-one__category {
+.course-one [class*="col-lg-"]:nth-child(5) .course-one__category {
   background-color: #ff00b8;
 }
 
-.course-one [class*='col-lg-']:nth-child(6) .course-one__category {
+.course-one [class*="col-lg-"]:nth-child(6) .course-one__category {
   background-color: #ffc700;
 }
 
@@ -3784,7 +3784,7 @@ a:visited {
 }
 
 .course-one__top-title::before {
-  content: '';
+  content: "";
   width: 145px;
   height: 60px;
   background-color: #f1f1f1;
@@ -3875,7 +3875,7 @@ a:visited {
 
 .course-details__progress-count {
   margin: 0;
-  font-family: 'Satisfy';
+  font-family: "Satisfy";
 }
 
 .course-details__progress-bar {
@@ -3900,7 +3900,7 @@ a:visited {
 }
 
 .course-details__progress-bar span:before {
-  content: '';
+  content: "";
   width: 15px;
   height: 15px;
   background-color: #ff00b8;
@@ -4142,7 +4142,7 @@ a:visited {
 }
 
 .course-details__tab-navs li a::before {
-  content: '';
+  content: "";
   width: 35px;
   height: 10px;
   background-color: #151371;
@@ -4428,7 +4428,7 @@ a:visited {
 }
 
 .course-details__meta-icon:before {
-  content: '';
+  content: "";
   position: absolute;
   left: -5px;
   top: 0;
@@ -4579,7 +4579,7 @@ a:visited {
 }
 
 .course-one__top-title.home-one:after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -4694,7 +4694,7 @@ a:visited {
 }
 
 .course-category-one__icon:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -10px;
@@ -4795,7 +4795,7 @@ a:visited {
 }
 
 .course-category-two__single:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0px;
@@ -4807,7 +4807,7 @@ a:visited {
 }
 
 .course-category-two__single:after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 10px;
@@ -4933,7 +4933,7 @@ a:visited {
 }
 
 .course-one.home-two:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -5039,7 +5039,7 @@ a:visited {
 }
 
 .course-category-three__content::before {
-  content: '';
+  content: "";
   width: 30px;
   height: 10px;
   background-color: #fff;
@@ -5094,7 +5094,7 @@ a:visited {
 }
 
 .inner-banner::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -5156,7 +5156,7 @@ a:visited {
 }
 
 .thm-breadcrumb li + li::before {
-  content: '.';
+  content: ".";
   color: #fff;
   margin-left: 15px;
   margin-right: 15px;
@@ -5272,7 +5272,7 @@ a:visited {
 
 .blog-one__meta a:before {
   position: absolute;
-  content: '';
+  content: "";
   width: 100%;
   height: 100%;
   border-radius: 50%;
@@ -5286,7 +5286,7 @@ a:visited {
 
 .blog-one__meta a:after {
   position: absolute;
-  content: '';
+  content: "";
   width: 100%;
   height: 100%;
   border-radius: 50%;
@@ -5676,7 +5676,7 @@ a:visited {
 }
 
 .blog-two:after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -5768,7 +5768,7 @@ a:visited {
 }
 
 .blog-two__date::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -10px;
@@ -5786,7 +5786,7 @@ a:visited {
 
 .blog-two__date span {
   font-weight: 400;
-  font-family: 'Satisfy';
+  font-family: "Satisfy";
   font-size: 18px;
   letter-spacing: 0em;
 }
@@ -5832,7 +5832,7 @@ a:visited {
 }
 
 .blog-two__meta a + a:before {
-  content: '.';
+  content: ".";
   font-size: 16px;
   font-weight: 600;
   color: #fff;
@@ -5937,7 +5937,7 @@ a:visited {
   color: #151371;
 }
 
-.search-popup__form button[type='submit'] {
+.search-popup__form button[type="submit"] {
   border: none;
   outline: none;
   width: 60px;
@@ -5954,7 +5954,7 @@ a:visited {
   transition: all 0.4s ease;
 }
 
-.search-popup__form button[type='submit']:hover {
+.search-popup__form button[type="submit"]:hover {
   background-color: #151371;
   color: #ff00b8;
 }
@@ -6050,8 +6050,8 @@ a:visited {
 }
 
 .sidebar__category-list-item a:before {
-  content: '\f105';
-  font-family: 'Font Awesome 5 Free';
+  content: "\f105";
+  font-family: "Font Awesome 5 Free";
   color: #151371;
   font-weight: 900;
   font-size: 14px;
@@ -6137,7 +6137,7 @@ a:visited {
   color: #81868a;
 }
 
-.sidebar__search-form button[type='submit'] {
+.sidebar__search-form button[type="submit"] {
   width: 41px;
   height: 41px;
   border-radius: 50%;
@@ -6155,7 +6155,7 @@ a:visited {
   transition: all 0.4s ease;
 }
 
-.sidebar__search-form button[type='submit'] i {
+.sidebar__search-form button[type="submit"] i {
   font-size: 14px;
   color: #fff;
   line-height: 41px;
@@ -6163,8 +6163,8 @@ a:visited {
   transition: all 0.4s ease;
 }
 
-.sidebar__search-form button[type='submit']:before {
-  content: '';
+.sidebar__search-form button[type="submit"]:before {
+  content: "";
   width: 100%;
   height: 100%;
   border-radius: 50%;
@@ -6176,7 +6176,7 @@ a:visited {
   transition: all 0.4s ease;
 }
 
-.sidebar__search-form button[type='submit']:hover:before {
+.sidebar__search-form button[type="submit"]:hover:before {
   left: 0;
 }
 
@@ -6201,7 +6201,7 @@ a:visited {
 }
 
 .about-one__img:before {
-  content: '';
+  content: "";
   width: 197px;
   height: 268px;
   position: absolute;
@@ -6362,7 +6362,7 @@ a:visited {
 }
 
 .about-two__image:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 50%;
   left: 50%;
@@ -6376,7 +6376,7 @@ a:visited {
 }
 
 .about-two__image:after {
-  content: '';
+  content: "";
   width: 100%;
   height: 100%;
   position: absolute;
@@ -6429,7 +6429,7 @@ a:visited {
 }
 
 .about-two__count:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 15px;
   left: 15px;
@@ -6475,7 +6475,7 @@ a:visited {
 }
 
 .video-one:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -6530,7 +6530,7 @@ a:visited {
 }
 
 .video-one__popup:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -10px;
@@ -6561,7 +6561,7 @@ a:visited {
 }
 
 .video-two::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -6621,7 +6621,7 @@ a:visited {
 }
 
 .video-two__popup:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -15px;
@@ -6651,7 +6651,7 @@ a:visited {
 }
 
 .video-three .container:before {
-  content: '';
+  content: "";
   width: 197px;
   height: 268px;
   position: absolute;
@@ -6736,7 +6736,7 @@ a:visited {
 }
 
 .video-three__popup:before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -10px;
@@ -6884,7 +6884,7 @@ a:visited {
 }
 
 .testimonials-one__qoute::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -5px;
@@ -7026,7 +7026,7 @@ a:visited {
 }
 
 .meeting-one__bubble:before {
-  content: '';
+  content: "";
   width: 24px;
   height: 17px;
   position: absolute;
@@ -7194,7 +7194,7 @@ a:visited {
 }
 
 .mailchimp-one__icon i:after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -10px;
@@ -7308,7 +7308,7 @@ html {
   width: 100%;
   z-index: 99;
   border-bottom: 1px solid #9379ff;
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
 }
 
 .homepage__topbar {
@@ -7454,7 +7454,7 @@ html {
   display: flex;
   align-items: center;
   position: relative;
-  font-family: 'Graphik', sans-serif;
+  font-family: "Graphik", sans-serif;
   letter-spacing: 0.5px;
   font-size: 0.9rem;
   font-weight: 500;
@@ -7606,7 +7606,7 @@ html {
   width: 250px;
   z-index: 999;
 
-  background-color: #1c1d37;
+  background-color: var(--div-background-color);
   color: #fff;
   border-radius: 5px 0 5px 5px;
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
@@ -7685,7 +7685,7 @@ html {
 .login-form {
   border-bottom: 1px solid rgba(255, 255, 255, 0.568);
   padding: 0.5rem 0 1.5rem 0;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   font-weight: normal;
 }
 
@@ -7718,7 +7718,7 @@ html {
 }
 
 .dropdown-login .login-input .fas {
-  font-family: 'Font Awesome 5 Free', 'Red Hat Display';
+  font-family: "Font Awesome 5 Free", "Red Hat Display";
 }
 
 .dropdown-login .login-input .form-control {
@@ -7768,7 +7768,7 @@ html {
 
   width: auto;
   border-radius: 0;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   padding: 0;
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 }
@@ -7856,7 +7856,7 @@ html {
   top: 100px;
   height: 500px;
   left: 0;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   overflow-y: scroll;
   overflow-x: scroll;
   -webkit-animation: fadeInDown 0.3s ease-in-out 0s 1 normal none running;
@@ -8036,7 +8036,7 @@ html {
   width: 100%;
   top: 100px;
   left: 0;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   overflow-y: scroll;
   overflow-x: scroll;
   -webkit-animation: fadeInDown 0.3s ease-in-out 0s 1 normal none running;
@@ -8342,7 +8342,7 @@ html {
 .homepage__hero {
   position: relative;
   padding-top: 120px;
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   color: #fff;
   background: #14152b;
 }
@@ -8461,7 +8461,7 @@ html {
 
 /*============================ homepage About ============================*/
 .homepage__about {
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   color: #fff;
   background: #14152b;
   padding-top: 100px;
@@ -8489,7 +8489,7 @@ html {
 
 /* gradient */
 .yt-lite::before {
-  content: '';
+  content: "";
   display: block;
   position: absolute;
   top: 0;
@@ -8506,7 +8506,7 @@ html {
   thanks https://css-tricks.com/responsive-iframes/
 */
 .yt-lite::after {
-  content: '';
+  content: "";
   display: block;
   padding-bottom: calc(100% / (16 / 9));
 }
@@ -8524,7 +8524,7 @@ html {
   width: 200px;
   height: 170px;
   /* background-color: #fff; */
-  background-image: url('/assets/images/home-page/play-button.png');
+  background-image: url("/assets/images/home-page/play-button.png");
   z-index: 1;
   opacity: 1;
   background-repeat: no-repeat;
@@ -8625,7 +8625,7 @@ html {
 /*============================ homepage get-started ============================*/
 .homepage__get-started {
   background: #14152b;
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   overflow-x: clip;
 }
 
@@ -8671,7 +8671,7 @@ html {
 .homepage__partners {
   background: #14152b;
   padding-top: 10rem;
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
 }
 
 .homepage__partners .allies-header h2 {
@@ -8702,7 +8702,7 @@ html {
 
 .see-all__line {
   display: block;
-  background-image: url('/assets/images/home-page/line.png');
+  background-image: url("/assets/images/home-page/line.png");
   height: 2px;
   background-size: contain;
   margin-bottom: 10px;
@@ -8844,7 +8844,7 @@ html {
 }
 
 .homepage__comment .card-body .card__header h2 {
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   font-style: normal;
   font-weight: bold;
   font-size: 24px;
@@ -8863,7 +8863,7 @@ html {
 
 .card__quote {
   padding: 1rem 0;
-  font-family: 'Roboto';
+  font-family: "Roboto";
   font-style: normal;
   font-weight: normal;
   font-size: 24px;
@@ -8871,7 +8871,7 @@ html {
 
 .card__header__position {
   color: #a7a7a7;
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   font-size: 20px;
   letter-spacing: 3.2px;
 }
@@ -8932,7 +8932,7 @@ blockquote.twitter-tweet {
 /* Donate amount */
 .homepage__donate {
   position: relative;
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   color: #fff;
   background: #14152b;
   padding: 60px 0;
@@ -9208,7 +9208,7 @@ p.donate__container-subtitle {
 
 .step__payment-option::before,
 .step__payment-option::after {
-  content: '';
+  content: "";
   display: flex;
   justify-self: center;
   border-radius: 50%;
@@ -9398,7 +9398,7 @@ p.donate__container-subtitle {
   line-height: 2;
   color: #6772e5;
   margin-top: 0.8rem;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
 }
 
 .donate__modal-content {
@@ -9467,9 +9467,9 @@ p.donate__container-subtitle {
 
 /*============================ Footer ============================*/
 .site-footer {
-  background-color: #1c1d37;
+  background-color: var(--div-background-color);
   overflow: hidden;
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   font-size: 24px;
 }
 
@@ -9572,7 +9572,7 @@ p.donate__container-subtitle {
 }
 
 .site-footer__scroll-top::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -5px;
@@ -10169,7 +10169,7 @@ p.donate__container-subtitle {
 /*===== minority app section =====*/
 .homepage__app {
   position: relative;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   color: #1e3a8a;
   /* background: linear-gradient(
       180deg,
@@ -10245,7 +10245,7 @@ p.donate__container-subtitle {
 .homepage__buy {
   width: 100%;
   background: linear-gradient(90deg, #ff00b8 0%, #ff655b 50.8%, #ffc700 100%);
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   color: white;
   position: relative;
   padding: 60px 0;
@@ -10381,7 +10381,7 @@ p.donate__container-subtitle {
 /* core principles section */
 .homepage__core {
   position: relative;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   color: #efefef;
   /* background: #151371; */
   background: #14152b;
@@ -10626,7 +10626,7 @@ p.donate__container-subtitle {
 }
 
 .popup_image_container-core::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -8px;
@@ -10772,7 +10772,7 @@ p.donate__container-subtitle {
 /* the minority wave section */
 .homepage__wave {
   position: relative;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   color: #1e3a8a;
   background: #efefef;
   padding: 60px 0;
@@ -10911,7 +10911,7 @@ p.donate__container-subtitle {
 /* the minority team section */
 .homepage__team {
   position: relative;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   color: #fff;
   /* background-image: linear-gradient(
     to top,
@@ -11007,7 +11007,7 @@ p.donate__container-subtitle {
 }
 
 .team__item-text h2::after {
-  content: '';
+  content: "";
   position: absolute;
   display: inline-block;
   height: 2px;
@@ -11166,7 +11166,7 @@ p.donate__container-subtitle {
 /* the minority testimonials section */
 .homepage__testimonials {
   position: relative;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   color: #fff;
   /* background-image: linear-gradient(
     to bottom,
@@ -11215,8 +11215,8 @@ p.donate__container-subtitle {
 }
 
 .homepage__testimonials-right h4::before {
-  font-family: 'Font Awesome 5 Free';
-  content: '\f10d';
+  font-family: "Font Awesome 5 Free";
+  content: "\f10d";
   position: absolute;
   color: #ffc700;
   font-weight: 900;
@@ -11242,7 +11242,7 @@ p.donate__container-subtitle {
 
 .homepage__testimonials
   .homepage-carousel-btn
-  [class*='homepage-carousel-btn__'] {
+  [class*="homepage-carousel-btn__"] {
   width: 50px;
   height: 50px;
   display: -webkit-box;
@@ -11269,13 +11269,13 @@ p.donate__container-subtitle {
 
 .homepage__testimonials
   .homepage-carousel-btn
-  [class*='homepage-carousel-btn__']:hover {
+  [class*="homepage-carousel-btn__"]:hover {
   background-color: rgba(255, 255, 255, 0.692);
 }
 
 .homepage__testimonials
   .homepage-carousel-btn
-  [class*='homepage-carousel-btn__']
+  [class*="homepage-carousel-btn__"]
   i {
   font-size: 22px;
   font-weight: bold;
@@ -11777,7 +11777,7 @@ p.donate__container-subtitle {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: url('/assets/images/icons/AdobeStock_263530636.jpeg');
+  background: url("/assets/images/icons/AdobeStock_263530636.jpeg");
   font-size: calc(0.5rem + 0.5vw);
   background-position: center;
 }
@@ -11814,11 +11814,11 @@ p.donate__container-subtitle {
 }
 
 .headerRight {
-  display: 'flex';
-  gap: '20px';
-  align-items: 'center';
-  font-size: '15px';
-  font-weight: '600';
+  display: "flex";
+  gap: "20px";
+  align-items: "center";
+  font-size: "15px";
+  font-weight: "600";
 }
 
 .slick-prev:before,
diff --git a/public/assets/scss/_homepage.scss b/public/assets/scss/_homepage.scss
index bd6a979b..7e2a2eb0 100644
--- a/public/assets/scss/_homepage.scss
+++ b/public/assets/scss/_homepage.scss
@@ -1,42 +1,44 @@
-.site-footer__social a svg:hover{
-    path,rect,circle{
-      stroke: #8040D2;
-    }
+.site-footer__social a svg:hover {
+  path,
+  rect,
+  circle {
+    stroke: #8040d2;
   }
-  .site-footer__social a #github-icon:hover{
-    path{
-      fill: #8040D2;
-      stroke: none;
-    }
+}
+.site-footer__social a #github-icon:hover {
+  path {
+    fill: #8040d2;
+    stroke: none;
   }
+}
 // profile settings profile image model
-.setting__profile-img-model div{
+.setting__profile-img-model div {
   margin: auto;
-  .ant-modal-content{
+  .ant-modal-content {
     box-shadow: none;
   }
-  .ant-modal-content .ant-modal-body{
+  .ant-modal-content .ant-modal-body {
     padding: 0;
-    img{
+    img {
       width: 100%;
     }
   }
 }
-// profile settings data picker styels 
-.settings-birthday-field .react-datepicker-wrapper{
+// profile settings data picker styels
+.settings-birthday-field .react-datepicker-wrapper {
   padding: 0;
 }
-.settings-phone-field .react-tel-input{
-  font-family: 'Poppins', sans-serif;
+.settings-phone-field .react-tel-input {
+  font-family: "Poppins", sans-serif;
 }
-.settings-phone-field .react-tel-input .special-label{
+.settings-phone-field .react-tel-input .special-label {
   display: none;
 }
 // profile settings phoneNumber field
-.settings-phone-field .react-tel-input input{
-  background: #24203B;
+.settings-phone-field .react-tel-input input {
+  background: #24203b;
   border-radius: 8px;
-  border: 1px solid #6938EF;
+  border: 1px solid #6938ef;
   height: 60px;
   width: 100%;
   color: rgb(255, 255, 255);
@@ -45,20 +47,20 @@
   font-size: 18px;
   font-weight: 500;
 }
-.settings-phone-field .react-tel-input input:focus{
-  border: 1px solid #6938EF;
+.settings-phone-field .react-tel-input input:focus {
+  border: 1px solid #6938ef;
   background: #fff;
-  color: #1C1D37;
+  color: var(--div-background-color);
 }
-.settings-phone-field .react-tel-input input:hover{
-  border: 1px solid #6938EF;
-  background: #24203B;
+.settings-phone-field .react-tel-input input:hover {
+  border: 1px solid #6938ef;
+  background: #24203b;
   color: #ffffff;
-} 
-.settings-phone-field .css-b62m3t-container .css-1s2u09g-control{
-  background: #24203B;
+}
+.settings-phone-field .css-b62m3t-container .css-1s2u09g-control {
+  background: #24203b;
   border-radius: 8px;
-  border: 1px solid #6938EF;
+  border: 1px solid #6938ef;
   min-height: 60px;
   width: 100%;
   color: rgb(3, 3, 3);
@@ -67,58 +69,61 @@
   font-weight: 500;
   padding-right: 70px;
 }
-.settings-phone-field .css-b62m3t-container .css-1s2u09g-control{
-  -moz-appearance:none; /* Firefox */
-  -webkit-appearance:none; /* Safari and Chrome */
-  appearance:none;
+.settings-phone-field .css-b62m3t-container .css-1s2u09g-control {
+  -moz-appearance: none; /* Firefox */
+  -webkit-appearance: none; /* Safari and Chrome */
+  appearance: none;
   background-image: url("/assets/images/settings/arrow-down.svg");
   background-repeat: no-repeat;
   background-position-x: 96%;
   background-position-y: 10px;
 }
-.settings-phone-field .css-b62m3t-container .css-1s2u09g-control >div{
+.settings-phone-field .css-b62m3t-container .css-1s2u09g-control > div {
   height: 100%;
 }
-.settings-phone-field .css-g1d714-ValueContainer{
+.settings-phone-field .css-g1d714-ValueContainer {
   padding: 1rem;
 }
-.settings-phone-field .css-b62m3t-container .css-1s2u09g-control  .css-319lph-ValueContainer{
+.settings-phone-field
+  .css-b62m3t-container
+  .css-1s2u09g-control
+  .css-319lph-ValueContainer {
   height: 100%;
   padding: 0px 8px;
 }
-.settings-phone-field .css-1okebmr-indicatorSeparator{
+.settings-phone-field .css-1okebmr-indicatorSeparator {
   display: none;
 }
-.settings-phone-field [class~='css-tlfecz-indicatorContainer']:last-of-type  {
+.settings-phone-field [class~="css-tlfecz-indicatorContainer"]:last-of-type {
   display: none;
 }
-.settings-phone-field .css-1hb7zxy-IndicatorsContainer{
+.settings-phone-field .css-1hb7zxy-IndicatorsContainer {
   // border-right: 2px solid #8040D2;
   margin-top: 10px;
 }
-.settings-phone-field .css-1pahdxg-control:hover{
-  border-color: #6938EF;
+.settings-phone-field .css-1pahdxg-control:hover {
+  border-color: #6938ef;
 }
-.settings-phone-field .css-1pahdxg-control{
+.settings-phone-field .css-1pahdxg-control {
   border-radius: 8px !important;
-  border: 1px solid #6938EF !important;
+  border: 1px solid #6938ef !important;
   background: #fff !important;
   box-shadow: none;
-  .css-1rhbuit-multiValue{
-    background: #1C1D37 !important;
+  .css-1rhbuit-multiValue {
+    background: var(--div-background-color);
   }
-  .css-12jo7m5{
+  .css-12jo7m5 {
     color: #fff;
   }
-  .css-tj5bde-Svg{
+  .css-tj5bde-Svg {
     fill: white;
   }
 }
-.settings-phone-field .css-1rhbuit-multiValue{
+.settings-phone-field .css-1rhbuit-multiValue {
   margin-right: 10px;
 }
 // Settings Profile Fourthstep
-.add-socail-links{
+.add-socail-links {
   padding: 0 !important;
 }
 // .add-socail-links > div{
@@ -147,7 +152,7 @@
 // .settings_socail-links-contaner ul .ant-dropdown-menu-item:hover {
 //   background: #6938EF;
 // }
-.add-socail-links input{
+.add-socail-links input {
   text-align: left;
   font-weight: bold !important;
-}
\ No newline at end of file
+}
diff --git a/styles/Careers/index.css b/styles/Careers/index.css
index 73dba6f6..59914c51 100644
--- a/styles/Careers/index.css
+++ b/styles/Careers/index.css
@@ -44,7 +44,7 @@
 }
 
 .saved-job-stub-description:before {
-  content: '';
+  content: "";
   height: 10px;
   width: 10px;
   background: red;
@@ -250,7 +250,7 @@
   border-radius: 10px 10px 0px 0px;
 }
 
-@import './normalizer.css';
+@import "./normalizer.css";
 
 * {
   --mpa-navy: #151371;
@@ -386,7 +386,7 @@
 }
 
 .company-stub-box3-diversity::after {
-  content: '';
+  content: "";
   position: absolute;
   height: 100%;
   width: 50%;
@@ -404,7 +404,7 @@
 }
 
 .company-stub-box3-diversity-score::before {
-  content: '';
+  content: "";
   height: 1.5px;
   width: 100%;
   position: absolute;
@@ -687,7 +687,7 @@
 }
 
 .companyType-custom-checkbox:after {
-  content: '';
+  content: "";
   height: 13px;
   width: 13px;
   border: solid 1px #151371;
@@ -700,7 +700,7 @@
 
 .companyType-custom-checkbox:before {
   display: none;
-  content: '';
+  content: "";
   position: absolute;
   height: 12px;
   width: 6px;
@@ -711,11 +711,11 @@
   transform: rotateZ(40deg);
 }
 
-input[type='date']::-webkit-calendar-picker-indicator {
+input[type="date"]::-webkit-calendar-picker-indicator {
   filter: invert(1);
 }
 
-input[type='time']::-webkit-calendar-picker-indicator {
+input[type="time"]::-webkit-calendar-picker-indicator {
   filter: invert(1);
 }
 
@@ -750,7 +750,7 @@ input[type='time']::-webkit-calendar-picker-indicator {
 }
 
 .jobType-custom-checkbox:after {
-  content: '';
+  content: "";
   height: 13px;
   width: 13px;
   border: solid 1px white;
@@ -763,7 +763,7 @@ input[type='time']::-webkit-calendar-picker-indicator {
 
 .jobType-custom-checkbox:before {
   display: none;
-  content: '';
+  content: "";
   position: absolute;
   height: 12px;
   width: 6px;
@@ -774,11 +774,11 @@ input[type='time']::-webkit-calendar-picker-indicator {
   transform: rotateZ(40deg);
 }
 
-input[type='date']::-webkit-calendar-picker-indicator {
+input[type="date"]::-webkit-calendar-picker-indicator {
   filter: invert(1);
 }
 
-input[type='time']::-webkit-calendar-picker-indicator {
+input[type="time"]::-webkit-calendar-picker-indicator {
   filter: invert(1);
 }
 
@@ -810,8 +810,8 @@ input[type='time']::-webkit-calendar-picker-indicator {
 
 .job-filter-item-title {
   color: white;
-  font-family: 'Red Hat Display';
-  background: #1c1d37;
+  font-family: "Red Hat Display";
+  background: var(--div-background-color);
   border: 1px solid #8040d2;
   width: 100%;
   box-sizing: border-box;
@@ -834,7 +834,7 @@ input[type='time']::-webkit-calendar-picker-indicator {
 
 .job-filter-item-form {
   color: white;
-  background: #1c1d37;
+  background: var(--div-background-color);
   margin-top: 8px;
   padding: 12px;
   border-radius: 10px;
@@ -947,7 +947,7 @@ input[type='time']::-webkit-calendar-picker-indicator {
   display: inline-block;
   color: white;
   font-size: 17px;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   /* padding: 1rem 1rem 1rem 2.5rem; */
   font-size: 0.8rem;
 }
@@ -1004,7 +1004,7 @@ input[type='time']::-webkit-calendar-picker-indicator {
   outline: none;
 }
 
-input[type='checkbox'] {
+input[type="checkbox"] {
   margin-right: 6px;
 }
 
@@ -1015,7 +1015,7 @@ input[type='checkbox'] {
   height: 20px;
 }
 
-.jobs-search-switch input[type='checkbox'] {
+.jobs-search-switch input[type="checkbox"] {
   opacity: 0;
   width: 0;
   height: 0;
@@ -1039,7 +1039,7 @@ input[type='checkbox'] {
 
 .jobs-search-slider:before {
   position: absolute;
-  content: '';
+  content: "";
   height: 12px;
   width: 12px;
   left: 4px;
@@ -1049,15 +1049,15 @@ input[type='checkbox'] {
   transition: 0.4s;
 }
 
-input[type='checkbox']:checked + .jobs-search-slider {
+input[type="checkbox"]:checked + .jobs-search-slider {
   background-color: #8040d2;
 }
 
-input[type='checkbox']:focus + .jobs-search-slider {
+input[type="checkbox"]:focus + .jobs-search-slider {
   box-shadow: 0 0 1px #8040d2;
 }
 
-input[type='checkbox']:checked + .jobs-search-slider:before {
+input[type="checkbox"]:checked + .jobs-search-slider:before {
   -webkit-transform: translateX(15px);
   -ms-transform: translateX(15px);
   transform: translateX(15px);
@@ -1129,7 +1129,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
     width: 100%;
     border-radius: 0 0 1rem 1rem;
     color: white;
-    background: #1c1d37;
+    background: var(--div-background-color);
   }
   .job-filter-reset:focus {
     outline: none;
@@ -1182,7 +1182,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
 }
 
 .jobsMain-search {
-  background-color: #1c1d37;
+  background-color: var(--div-background-color);
   padding-top: 20px;
   border: 1px solid #8040d2;
   box-sizing: border-box;
@@ -1281,8 +1281,8 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
   /* grid-column-gap: 1rem; */
   /* color: black; */
   grid-template-areas:
-    'list job'
-    'pagination job';
+    "list job"
+    "pagination job";
   row-gap: 25px;
 }
 
@@ -1347,7 +1347,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
 }
 
 .jobs-main-container-single {
-  background: #1c1d37;
+  background: var(--div-background-color);
   box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25);
   border-radius: 15px;
   padding: 20px;
@@ -1455,7 +1455,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
 }
 
 .current-job-view-box1-companyInfo-diversity::after {
-  content: '';
+  content: "";
   position: absolute;
   height: 100%;
   width: 50%;
@@ -1476,7 +1476,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
 }
 
 .current-job-view-box1-companyInfo-diversity-score::before {
-  content: '';
+  content: "";
   height: 1.5px;
   width: 100%;
   position: absolute;
@@ -1635,12 +1635,12 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
 }
 
 .job-stub {
-  background: #1c1d37;
+  background: var(--div-background-color);
   box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25);
   border-radius: 15px;
   padding: 20px;
   cursor: pointer;
-  border: 3px solid #1c1d37;
+  border: 3px solid var(--div-background-color);
   margin: 20px 0;
   box-sizing: border-box;
 }
@@ -1690,7 +1690,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
 }
 
 .job-stub-description:before {
-  content: '';
+  content: "";
   height: 10px;
   width: 10px;
   background: red;
@@ -1889,7 +1889,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
     grid-gap: 0.5em;
     padding: 100px;
     grid-template-columns: 0.5fr 1.2fr;
-    grid-template-areas: 'careerTopText careerTopPic';
+    grid-template-areas: "careerTopText careerTopPic";
   }
   .careerTopPic {
     grid-area: careerTopPic;
@@ -1903,7 +1903,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
     color: #33d2ff;
     width: 500px;
     height: 230px;
-    font-family: 'SF Pro Display', sans-serif !important;
+    font-family: "SF Pro Display", sans-serif !important;
     font-style: normal;
     font-weight: bold;
     font-size: 96px;
@@ -1929,7 +1929,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
     grid-gap: 0.5em;
     padding: 100px;
     grid-template-columns: 0.5fr 1.2fr;
-    grid-template-areas: 'careerTopText careerTopPic';
+    grid-template-areas: "careerTopText careerTopPic";
   }
   .careerTopPic {
     grid-area: careerTopPic;
@@ -1943,7 +1943,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
     color: #33d2ff;
     width: 287px;
     height: 150px;
-    font-family: 'SF Pro Display', sans-serif !important;
+    font-family: "SF Pro Display", sans-serif !important;
     font-style: normal;
     font-weight: bold;
     font-size: 55px;
@@ -1978,7 +1978,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
     color: #33d2ff;
     width: 287px;
     height: 150px;
-    font-family: 'SF Pro Display', sans-serif !important;
+    font-family: "SF Pro Display", sans-serif !important;
     font-style: normal;
     font-weight: bold;
     font-size: 55px;
@@ -2043,7 +2043,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
 }
 
 .saved-job-stub-description:before {
-  content: '';
+  content: "";
   height: 10px;
   width: 10px;
   background: red;
@@ -2135,7 +2135,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
     width: 100%;
   }
   .jobs-main-container-single {
-    background: #1c1d37;
+    background: var(--div-background-color);
   }
   .right-grid {
     padding: 1rem;
@@ -2224,7 +2224,7 @@ input[type='checkbox']:checked + .jobs-search-slider:before {
 
 .header_searchbar {
   color: white;
-  font-family: 'Red Hat Display', sans-serif;
+  font-family: "Red Hat Display", sans-serif;
   font-size: 2rem;
   margin-bottom: 1.5rem;
   display: flex;
diff --git a/styles/DashboardCSS/dashboard.scss b/styles/DashboardCSS/dashboard.scss
index fcd80b3d..b6774bbd 100644
--- a/styles/DashboardCSS/dashboard.scss
+++ b/styles/DashboardCSS/dashboard.scss
@@ -1,120 +1,119 @@
 @media only screen and (min-width: 768px) {
-  .outer-dashboard-container{
+  .outer-dashboard-container {
     max-width: 1460px;
     padding: 20px;
-    background: #14152B;
+    background: #14152b;
     color: white;
   }
-  .sidebar-item{
+  .sidebar-item {
     display: flex;
     flex-direction: column;
   }
-  .dashboard-overall-container{
+  .dashboard-overall-container {
     justify-content: center;
     max-width: 1540px;
     width: 100%;
   }
-  .dashboard-navbar-div{
+  .dashboard-navbar-div {
     width: 100%;
   }
-  .dashboard-navbar{
+  .dashboard-navbar {
     width: 80px;
   }
-  .navbar-dashboard-div{
+  .navbar-dashboard-div {
     height: 100%;
   }
 }
 @media only screen and (max-width: 767px) {
-  .sidebar-item{
+  .sidebar-item {
     display: flex;
     flex-direction: row;
   }
-  .show-sidebar-container{
-    background:rgba(0, 0, 0, 0.5);
+  .show-sidebar-container {
+    background: rgba(0, 0, 0, 0.5);
   }
-  .inner-dashboard-container{
+  .inner-dashboard-container {
     height: 100vh;
     width: 100vw;
   }
-  .outer-dashboard-container{
+  .outer-dashboard-container {
     width: 100%;
   }
-  .dashboard-navbar{
+  .dashboard-navbar {
     height: 100vh;
   }
-  .navbar-dashboard-div{
+  .navbar-dashboard-div {
     height: 100vh;
     position: fixed;
     overflow-y: scroll;
     overflow-x: hidden;
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
     z-index: 2;
   }
   .navbar-dashboard-div::-webkit-scrollbar {
-  display: none;
-}
-  .dashboard-overall-container{
+    display: none;
+  }
+  .dashboard-overall-container {
     padding: 0 !important;
     width: 100% !important;
   }
-  .navbar-dashboard-button{
+  .navbar-dashboard-button {
     background: #ff3587;
     border-radius: 2px;
     color: white;
   }
-  .navbar-dashboard-button-selected{
+  .navbar-dashboard-button-selected {
     background: white;
     color: #ff3587;
     border-radius: 2px;
   }
 }
-.navbar-dashboard-div{
-   background: #151371;
+.navbar-dashboard-div {
+  background: #151371;
 }
 
-.inner-dashboard-container{
-  font-family: 'Poppins', sans-serif;
-  background: #14152B;
+.inner-dashboard-container {
+  font-family: "Poppins", sans-serif;
+  background: #14152b;
   max-width: 1440px !important;
   height: auto;
-
 }
-.dashboard-navbar-button{
+.dashboard-navbar-button {
   padding: 20px 15px;
   cursor: pointer;
   color: white;
 }
 
-.dashboard-navbar-button:hover{
-  background: #6A0C8B;
+.dashboard-navbar-button:hover {
+  background: #6a0c8b;
 }
 
-.dashboard-navbar-button-selected{
+.dashboard-navbar-button-selected {
   background: white;
-  color: #6A0C8B;
+  color: #6a0c8b;
   padding: 20px 15px;
   cursor: pointer;
 }
 
-.component-mobile-button{
-  background: #1C1D37 ;
+.component-mobile-button {
+  background: var(--div-background-color);
   margin-bottom: 2%;
   border-radius: 5px;
   /* padding-left: 2%; */
   line-height: 32px;
 }
-.hide-mobile-component{
+.hide-mobile-component {
   display: none;
 }
-.component-mobile-button p{
+.component-mobile-button p {
   color: rgb(255, 255, 255);
-} 
+}
 
-.component-mobile-button>div> p{
+.component-mobile-button > div > p {
   font-size: 16px;
 }
-.open-component-button{
+.open-component-button {
   font-size: 24px;
   line-height: 32px;
   color: #ffffff;
@@ -141,39 +140,38 @@
   }
 }
 
-
-.dashboard-card{
+.dashboard-card {
   border-radius: 5px;
-  background: #1C1D37;
+  background: var(--div-background-color);
   padding: 12px 20px;
   box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25);
   // border-radius: 20px;
 }
 
-.missing-api-dashboard-card{
+.missing-api-dashboard-card {
   border: 0.5px solid yellow;
   border-radius: 5px;
   background: white;
   padding: 12px 20px;
 }
 
-.marked-date{
-  color:white;
+.marked-date {
+  color: white;
   font-weight: 500;
   background: #151371;
 }
 
-.overview-event-card{
+.overview-event-card {
   box-shadow: 0px 32px 41px rgb(0 0 0 / 25%);
   border-radius: 8px;
-  background: #24253D;
-  border: 1px solid #6938EF;
+  background: #24253d;
+  border: 1px solid #6938ef;
   padding: 8px;
   margin-bottom: 10px;
   line-height: 15px;
 }
-.overview-event-card:hover{
-  background: #6938EF;
+.overview-event-card:hover {
+  background: #6938ef;
 }
 
 .overview-event-thumbnail {
@@ -182,7 +180,7 @@
   border-radius: 50%;
 }
 
-.overview-event-status{
+.overview-event-status {
   line-height: 20px;
   font-size: 12px;
   font-weight: 700;
@@ -192,18 +190,18 @@
   max-width: 100px;
 }
 
-.more-details-button{
+.more-details-button {
   font-size: 32px;
   line-height: 32px;
   color: #151371;
 }
 
-.empty-events{
+.empty-events {
   width: 70px;
   height: 70px;
 }
 
-.empty-events-description{
+.empty-events-description {
   margin-bottom: 5px;
   text-align: center;
   line-height: 16px;
@@ -217,7 +215,7 @@
 .overview-career-button {
   white-space: nowrap;
   border-radius: 4px;
-  border: 1px solid #6938EF;
+  border: 1px solid #6938ef;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -226,67 +224,65 @@
   margin: 0px 5px;
 }
 .overview-career-button:hover {
-  background:#6938EF !important;
+  background: #6938ef !important;
 }
-.selected{
+.selected {
   border-radius: 4px;
-  border: 1px solid #6938EF;
-  background: #6938EF;
+  border: 1px solid #6938ef;
+  background: #6938ef;
 }
 
-.overview-career-button p{
-  font-size: 12px ;
+.overview-career-button p {
+  font-size: 12px;
   font-weight: 500;
-  color:#ffffff;
+  color: #ffffff;
   text-align: center;
   margin: 0;
 }
 
-
-.overview-career-cards-list{
-  padding: 7px 0 ;
-
+.overview-career-cards-list {
+  padding: 7px 0;
 }
 
 .overview-career-card {
   padding: 5px 10px;
   background: transparent;
   border-radius: 8px;
-  border: 1px solid #6938EF;
+  border: 1px solid #6938ef;
   width: 100%;
   height: 30%;
 }
 
-.overview-career-card:hover{
-  background: #6938EF;
-  .overview-career-all-image{
-    background: #1C1D37;
+.overview-career-card:hover {
+  background: #6938ef;
+  .overview-career-all-image {
+    background: var(--div-background-color);
   }
 }
 
-.overview-career-card-image img{
+.overview-career-card-image img {
   width: 35px;
   height: 35px;
   border-radius: 50%;
 }
 
-.overview-career-card-info{
+.overview-career-card-info {
   justify-content: center;
   align-items: flex-start;
 }
-.overview-career-card-info-title{
-  font-size:12px;
+.overview-career-card-info-title {
+  font-size: 12px;
   font-weight: 600;
   color: rgb(255, 255, 255);
   margin: 0;
 }
 
-.overview-career-card-info p{
+.overview-career-card-info p {
   font-size: 12px;
   margin: 0;
   white-space: normal;
 }
-.overview-career-card-jobtype> p{
+.overview-career-card-jobtype > p {
   padding: 2px 7px;
   font-size: 10px;
   background: #565656;
@@ -296,24 +292,21 @@
 }
 
 .overview-career-card-jobtype {
-
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
 }
 
-
-
 /* COURSES */
 .overview-courses-list::-webkit-scrollbar {
   display: none;
 }
 
-.overview-courses-list{
+.overview-courses-list {
   /* cursor: grab; */
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
 .overview-wrapper {
@@ -331,13 +324,18 @@
 .overview-filler {
   height: 100%;
   border-radius: inherit;
-  background: linear-gradient(90deg, #151371 0%, #AD079F 53.03%, #D304AB 70.87%);;
+  background: linear-gradient(
+    90deg,
+    #151371 0%,
+    #ad079f 53.03%,
+    #d304ab 70.87%
+  );
 }
 
-.overview-course-card{
+.overview-course-card {
   padding: 5px 10px;
-  background: #24253D;
-  border: 1px solid #6938EF;
+  background: #24253d;
+  border: 1px solid #6938ef;
   color: white;
   box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25);
   border-radius: 8px;
@@ -345,7 +343,7 @@
   margin-bottom: 2%;
 }
 
-.overview-courses-cards{
+.overview-courses-cards {
   overflow-x: hidden; /* Hide horizontal scrollbar */
   overflow-y: scroll;
 }
@@ -354,47 +352,45 @@
   display: none;
 } */
 
-.overview-course-card:hover{
-    background: #6938EF;
+.overview-course-card:hover {
+  background: #6938ef;
 }
 
-.overview-course-card-info p{
+.overview-course-card-info p {
   font-size: 12px;
   line-height: 16px;
 }
 
-
-.overview-course-card-info-title{
-  font-size:12px;
+.overview-course-card-info-title {
+  font-size: 12px;
   font-weight: 700;
   color: rgb(255, 255, 255);
   margin: 0;
 }
 
-.overview-course-card-description{
+.overview-course-card-description {
   font-size: 10px;
-  color: #DEDEDE;
+  color: #dedede;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
-  line-clamp: 2; 
+  line-clamp: 2;
   -webkit-box-orient: vertical;
 }
 
-.overview-course-currency p{
+.overview-course-currency p {
   line-height: 20px;
-  color: #33D2FF;
+  color: #33d2ff;
   margin: 0;
   text-align: center;
 }
 
-
 /* Startups Component */
 
-.overview-startup-card{
+.overview-startup-card {
   padding: 5px 10px;
-  background: #EFEFEF;
+  background: #efefef;
   border-radius: 10px;
   width: 100%;
   margin-bottom: 2%;
@@ -402,7 +398,7 @@
 
 /* Proposals */
 
-.proposal-card-info{
+.proposal-card-info {
   font-size: 12px;
   font-weight: 500;
   color: rgb(255, 255, 255);
@@ -411,25 +407,25 @@
   text-overflow: ellipsis;
 }
 
-.overview-proposal-card{
-  background: #EFEFEF;
+.overview-proposal-card {
+  background: #efefef;
   border-radius: 12px;
   width: 100%;
   margin-bottom: 2%;
   padding: 10px 10px;
 }
 
-.overview-proposal-cards{
+.overview-proposal-cards {
   overflow-y: scroll;
-    -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
 .overview-proposal-cards::-webkit-scrollbar {
   display: none;
 }
 
-.overview-proposal-button{
+.overview-proposal-button {
   font-size: 8px;
   font-weight: 700;
   line-height: 10px;
@@ -438,7 +434,7 @@
 
 /* Chapter Component */
 
-.overview-chapter-card-description{
+.overview-chapter-card-description {
   font-size: 10px;
   color: rgb(255, 255, 255);
   line-height: 16px;
@@ -446,7 +442,7 @@
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
-  line-clamp: 2; 
+  line-clamp: 2;
   -webkit-box-orient: vertical;
   margin: 5px 0;
 }
@@ -463,7 +459,7 @@
   cursor: pointer;
 }
 
-.project-button-selected{
+.project-button-selected {
   font-size: 10px;
   font-style: normal;
   font-weight: 700;
@@ -475,26 +471,25 @@
   border-bottom: 1px solid #151371;
 }
 
-
 /* WALLET DASHBOARD */
-.total-balance-card-dashboard-wallet{
-  background: #474BFF;
+.total-balance-card-dashboard-wallet {
+  background: #474bff;
   border-radius: 20px;
   width: 100%;
   height: 200px;
 }
 
-.inner-total-balance-card-dashboard-wallet{
+.inner-total-balance-card-dashboard-wallet {
   width: 90%;
   height: 100%;
-  border-bottom-right-radius: 20px ;
+  border-bottom-right-radius: 20px;
   border-top-right-radius: 20px;
   background: white;
   margin-left: 10%;
   padding: 20px;
 }
 
-.wallet-dashboard-button{
+.wallet-dashboard-button {
   border-radius: 50%;
   width: 70px;
   height: 70px;
@@ -504,8 +499,8 @@
   align-items: center;
 }
 
-.trans-card{
-  background: #F8F9FD;
+.trans-card {
+  background: #f8f9fd;
   /* background: green; */
   border-radius: 4px;
   padding: 20px;
@@ -514,76 +509,76 @@
   cursor: pointer;
 }
 
-.trans-card:hover{
+.trans-card:hover {
   background: #d0d7f2;
 }
 
-.trans-card-text{
+.trans-card-text {
   margin: 0;
   line-height: 18px;
 }
 
-.trends-button{
-  background: #C4C4C480;
+.trends-button {
+  background: #c4c4c480;
   border: 0px solid transparent;
   font-weight: 700;
   color: black;
 }
 
-.trends-button:hover{
+.trends-button:hover {
   background: #f8f9fd;
   border: 0px solid transparent;
 }
 
-.trends-button-selected{
-  background: #CFD0F6;
+.trends-button-selected {
+  background: #cfd0f6;
   border: 0px solid transparent;
   font-weight: 700;
-  color: #474BFF;
+  color: #474bff;
 }
 
-.wallet-transaction-form{
+.wallet-transaction-form {
   display: none;
   position: absolute;
   background: rgba(196, 196, 196, 0.3);
   backdrop-filter: blur(2px);
 }
 
-.dashboard-inner-bg{
-  background: #1C1D37;
+.dashboard-inner-bg {
+  background: var(--div-background-color);
   border-radius: 20px !important;
 }
-.row-custom-span-3{
+.row-custom-span-3 {
   grid-row: span 3 / span 3 !important;
 }
-.row-custom-span-6{
+.row-custom-span-6 {
   grid-row: span 6 / span 6 !important;
 }
-.overview-course-card-border-none{
+.overview-course-card-border-none {
   border: none;
   box-shadow: none;
 }
-.button-setting-transparent{
+.button-setting-transparent {
   background: transparent;
   font-size: 10px;
   width: 45%;
   border-radius: 100px;
-  border: 1px solid #6938EF;
+  border: 1px solid #6938ef;
 }
-.button-setting-transparent:hover{
-  background: #6938EF;
+.button-setting-transparent:hover {
+  background: #6938ef;
 }
 .button-setting-bg {
-  background: #6938EF;
+  background: #6938ef;
   font-size: 10px;
   border-radius: 100px;
   width: 45%;
   border: none;
 }
-.button-setting-bg:hover{
-  background-color: #6938EF;
+.button-setting-bg:hover {
+  background-color: #6938ef;
 }
-.chart-inner-text{
+.chart-inner-text {
   position: absolute;
   left: 50%;
   top: 50%;
@@ -591,22 +586,22 @@
   text-align: center;
   font-size: 10px;
 }
-.chart-static-text{
+.chart-static-text {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
   font-size: 10px;
-  color: #DEDEDE;
+  color: #dedede;
 }
-.chart-static-text span{
-  color: #FFFFFF;
+.chart-static-text span {
+  color: #ffffff;
   font-weight: 600;
   font-size: 16px;
   display: block;
-}  
-.chart-static-title{
+}
+.chart-static-title {
   position: absolute;
   font-weight: 600;
   color: white;
@@ -614,21 +609,21 @@
   top: 20%;
   white-space: nowrap;
 }
-.chart-inner-text span{
+.chart-inner-text span {
   display: block;
   font-size: 14px;
   font-weight: 500;
 }
-.button-more{
+.button-more {
   color: white;
-  background: #6938EF;
+  background: #6938ef;
   border-radius: 100px;
   padding: 10px 30px;
 }
-.button-more:hover{
+.button-more:hover {
   color: white;
-}  
-.view-course{
+}
+.view-course {
   font-size: 12px;
   padding: 0px 20px;
   display: flex;
@@ -636,16 +631,16 @@
   height: 80%;
   margin: auto 0 auto auto;
 }
-.overview-course-card:hover{
-  .view-course{
+.overview-course-card:hover {
+  .view-course {
     background: white;
-    color: #6938EF;
+    color: #6938ef;
   }
 }
-.mentorship-mentee-count{
+.mentorship-mentee-count {
   font-weight: bold;
   font-size: 24px;
-  background: #FE8F66;
+  background: #fe8f66;
   border-radius: 50%;
   height: 50px;
   width: 50px;
@@ -653,18 +648,18 @@
   align-items: center;
   justify-content: center;
 }
-.mentorship-mentee-title{
+.mentorship-mentee-title {
   margin: 20px 0;
   font-size: 16px;
   font-weight: bold;
 }
-.dashboard-projects-thumbnail:hover{
-  border:4px solid #78129E;
+.dashboard-projects-thumbnail:hover {
+  border: 4px solid #78129e;
 }
-.dashboard-projects-thumbnail-active{
-  border:4px solid #78129E;
+.dashboard-projects-thumbnail-active {
+  border: 4px solid #78129e;
 }
-.overview-career-all-image{
+.overview-career-all-image {
   width: 40px;
   height: 35px;
   background: rgb(105, 56, 239);
@@ -672,60 +667,60 @@
   border-radius: 50%;
   padding: 4px;
 }
-.overview-career-all-image img{
+.overview-career-all-image img {
   object-fit: contain;
 }
-.statistics-card{
-  background: #24253D;
-  border: 1px solid #6938EF;
+.statistics-card {
+  background: #24253d;
+  border: 1px solid #6938ef;
   box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25);
   border-radius: 8px;
   width: 100%;
   height: 20%;
   margin-bottom: 4%;
 }
-.statistics-charts{
+.statistics-charts {
   width: 100%;
   height: 20%;
   margin-bottom: 20px;
 }
-.static-card{
-  background: #24253D;
-  border: 1px solid #6938EF;
+.static-card {
+  background: #24253d;
+  border: 1px solid #6938ef;
   box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25);
   border-radius: 8px;
 }
-.dashboard-static-chart{
+.dashboard-static-chart {
   display: flex;
   align-items: center;
   margin: 0px 10px;
 }
-.static-chart-detail{
+.static-chart-detail {
   margin-top: 5%;
 }
-.static-chart-detail h2{
+.static-chart-detail h2 {
   font-size: 12px;
   font-weight: 600;
 }
-.static-chart-detail .labels{
-  color: #DEDEDE;
+.static-chart-detail .labels {
+  color: #dedede;
   font-weight: 500;
   font-size: 10px;
   display: flex;
   flex-direction: column;
   margin-top: 10px;
 }
-.static-chart-detail .labels .tag div{
+.static-chart-detail .labels .tag div {
   width: 15px;
   height: 15px;
   margin-right: 3px;
   border-radius: 2px;
 }
-.static-chart-detail .labels .tag{
+.static-chart-detail .labels .tag {
   display: flex;
   margin-bottom: 3px;
 }
-.overview-proposal-button{
+.overview-proposal-button {
   background: rgba(21, 147, 57, 0.65);
   border-radius: 6px;
   padding: 8px;
@@ -733,128 +728,128 @@
   font-weight: 500;
   letter-spacing: 0.5px;
   font-size: 12px;
-} 
-.dashboard-proposal-table-title{
+}
+.dashboard-proposal-table-title {
   font-style: normal;
   font-weight: 600;
   font-size: 12px;
   line-height: 15px;
-  color: #D8D8D8;
+  color: #d8d8d8;
 }
-.row-custom-6{
-  grid-row: span 6 / span 6 ;
+.row-custom-6 {
+  grid-row: span 6 / span 6;
 }
 @media only screen and (max-width: 1440px) {
-  .static-chart-detail .labels{
+  .static-chart-detail .labels {
     display: grid;
-    grid-template-columns: repeat(2,1fr);
+    grid-template-columns: repeat(2, 1fr);
     grid-gap: 10%;
   }
-  .static-chart-detail{
+  .static-chart-detail {
     margin-top: 5px;
   }
-  .dashboard-chapter-details{
+  .dashboard-chapter-details {
     margin-bottom: 10px !important;
     height: 70%;
   }
-  .dashboard-chapter-details .img-container{
-   height: 100%; 
-  } 
-  .dashboard-chapter-location{
+  .dashboard-chapter-details .img-container {
+    height: 100%;
+  }
+  .dashboard-chapter-location {
     margin-bottom: 10px !important;
   }
-  .dashboard-progress-tasklist{
+  .dashboard-progress-tasklist {
     height: 45px;
     margin-top: auto;
   }
-  .dashboard-progress-tasklist >div{
+  .dashboard-progress-tasklist > div {
     height: 100%;
   }
-  .dashboard-pofile-card{
+  .dashboard-pofile-card {
     flex-direction: row !important;
     flex-wrap: wrap;
     justify-content: space-evenly !important;
   }
-  .mentorship-mentee-title{
-    padding:5px 0;
+  .mentorship-mentee-title {
+    padding: 5px 0;
     margin: 0;
   }
 }
 @media only screen and (max-width: 1100px) {
-  .dashboard-pofile-card{
+  .dashboard-pofile-card {
     flex-direction: column !important;
     // min-width: 350px;
     // max-width: 450px;
     flex-wrap: initial;
     text-align: center;
   }
-  .inner-dashboard-container{
+  .inner-dashboard-container {
     width: 450px;
   }
-  .dashboard-progress-tasklist{
+  .dashboard-progress-tasklist {
     height: auto;
   }
-  .dashboard-progress-chart .chart-inner-text{
+  .dashboard-progress-chart .chart-inner-text {
     top: 37%;
   }
-  .dashboard-progress-chart .chart-inner-text p{
+  .dashboard-progress-chart .chart-inner-text p {
     font-size: 12px;
     line-height: 16px;
   }
-  .button-more{
+  .button-more {
     margin: 10px 0;
   }
-  .dashboard-card{
+  .dashboard-card {
     color: white;
   }
-  .dashboard-cards-tab{
+  .dashboard-cards-tab {
     flex-direction: column !important;
     align-items: flex-start !important;
   }
-  .dashboard-cards-tab >div{
+  .dashboard-cards-tab > div {
     margin: 10px 0;
   }
-  .dashboard-static-chart{
+  .dashboard-static-chart {
     width: 45%;
   }
-  .static-chart-detail .labels{
+  .static-chart-detail .labels {
     display: flex;
   }
-  .static-card{
+  .static-card {
     justify-content: space-evenly;
   }
-  .dashboard-chapter-location p{
+  .dashboard-chapter-location p {
     color: white;
   }
-  .overview-startups-card{
+  .overview-startups-card {
     height: 200px !important;
   }
-  .overview-course-tabs{
+  .overview-course-tabs {
     flex-wrap: wrap;
     height: fit-content !important;
   }
-  .overview-course-tabs div{
+  .overview-course-tabs div {
     margin: 5px 0;
   }
-  .button-more{
+  .button-more {
     padding: 5px 0;
     width: 100%;
     text-align: center;
     font-size: 12px;
   }
-  .overview-course-card-description{
+  .overview-course-card-description {
     display: none;
   }
-  .overview-course-card-info{
+  .overview-course-card-info {
     justify-content: center;
   }
-  .overview-course-currency{
+  .overview-course-currency {
     display: none !important;
   }
-  .overview-course-detail{
+  .overview-course-detail {
     width: 100%;
   }
-  .view-course{
+  .view-course {
     width: 100px;
     padding: 2px 0;
     height: fit-content;
@@ -862,18 +857,18 @@
     justify-content: center;
     margin: auto;
   }
-  .dashboard-projects-thumbnail{
+  .dashboard-projects-thumbnail {
     height: 200px;
   }
-  .overview-projects-swiper{
+  .overview-projects-swiper {
     height: fit-content !important;
   }
 }
 @media only screen and (max-width: 460px) {
-  .inner-dashboard-container{
+  .inner-dashboard-container {
     width: 100%;
   }
-  .overview-course-detail{
+  .overview-course-detail {
     width: 30% !important;
   }
-}  
+}
diff --git a/styles/ProfileCSS/profile.css b/styles/ProfileCSS/profile.css
index 3aec9533..342202b6 100644
--- a/styles/ProfileCSS/profile.css
+++ b/styles/ProfileCSS/profile.css
@@ -282,7 +282,6 @@
   color: rgb(168, 167, 167) !important;
 } */
 
-
 /* .pp-exp-edu-area .add-exp-edu .ee-fields input {
   border: 1px solid #8a8a8a;
   color: black;
@@ -387,7 +386,7 @@
   background-color: #a159fe;
 }
 
-.careerPic img{
+.careerPic img {
   border-radius: 30px;
   border: 5px solid #a159ff6e;
 }
@@ -515,7 +514,7 @@
   z-index: 99;
 }
 .profile-two-generate-avatar-popup {
-  background: #1c1d37;
+  background: var(--div-background-color);
   color: #fff;
   position: absolute;
   top: 120px;
@@ -557,7 +556,7 @@
 .profile-two-generate-avatar-popup .cp-body .cp-formGrid .cp-input {
   align-self: center;
   margin: 0;
-  background-color: #1c1d37;
+  background-color: var(--div-background-color);
 }
 .profile-two-generate-avatar-popup .cp-body .cp-formGrid .color-picker-toggle {
   display: flex;
@@ -634,51 +633,51 @@
   font-weight: bold;
 }
 /* Projects Section Swiper */
-.profile__project-card{
-  border: 1px solid #8040D2;
+.profile__project-card {
+  border: 1px solid #8040d2;
   border-radius: 15px;
-  padding: 15px;  
+  padding: 15px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 500px !important;
 }
-.profile__project-card img{
+.profile__project-card img {
   border-radius: 15px 15px 0px 0px;
   margin-bottom: 40px;
   height: 400px;
   object-fit: cover;
   width: 100%;
 }
-.profile__project-card .view-btn{
+.profile__project-card .view-btn {
   color: white;
   display: flex;
   align-items: center;
 }
-.profile__project-card .view-btn a{
+.profile__project-card .view-btn a {
   font-weight: 600;
   font-size: 18px;
   border-radius: 100px;
-  border: 1px solid #8040D2;
+  border: 1px solid #8040d2;
   width: 100%;
   text-align: center;
   padding: 13px 0;
-  transition: .4s ease;
+  transition: 0.4s ease;
 }
-.profile__project-card .view-btn a:hover{
-  background: #8040D2;
+.profile__project-card .view-btn a:hover {
+  background: #8040d2;
 }
-.profile__project-card .detail h2{
+.profile__project-card .detail h2 {
   font-size: 20px;
   font-weight: 600;
   white-space: nowrap;
   margin: 8px 0;
 }
-.fraction-p{
+.fraction-p {
   position: absolute;
   margin: 0;
 }
-.profile-projects-controllers{
+.profile-projects-controllers {
   width: 100%;
   display: flex;
   justify-content: flex-end;
@@ -691,49 +690,49 @@
   margin-top: 40px;
   margin-right: 30px;
 }
-.profile-projects-controllers p{
+.profile-projects-controllers p {
   color: white;
   margin: auto 30px;
   letter-spacing: 2.2px;
 }
-.profile-projects-controllers img{
+.profile-projects-controllers img {
   cursor: pointer;
-  transition: opacity .4s ease;
+  transition: opacity 0.4s ease;
 }
-.profile-projects-controllers img:hover{
+.profile-projects-controllers img:hover {
   opacity: 0.8;
 }
-.show-full-projects:hover{
-  color: #8040D2;
+.show-full-projects:hover {
+  color: #8040d2;
 }
-.profile__projects-slider .slick-slide > div{
+.profile__projects-slider .slick-slide > div {
   display: flex;
   justify-content: space-evenly;
 }
 @media screen and (max-width: 680px) {
-  .profile__project-card{
-    width: 400px!important;
+  .profile__project-card {
+    width: 400px !important;
   }
-  .profile-projects-controllers{
+  .profile-projects-controllers {
     justify-content: center;
   }
-  .profile-projects-controllers > div{
-    margin-right:0 ;
+  .profile-projects-controllers > div {
+    margin-right: 0;
   }
 }
 @media screen and (max-width: 400px) {
-  .profile__project-card{
-    width: 350px!important;
+  .profile__project-card {
+    width: 350px !important;
     margin: 0px 20px;
   }
-  .profile__project-container{
+  .profile__project-container {
     margin: 0;
     padding: 0;
   }
-  .profile__project-card .view-btn a{
+  .profile__project-card .view-btn a {
     font-size: 16px;
   }
-  .profile__project-card .detail h2{
+  .profile__project-card .detail h2 {
     font-size: 16px;
   }
-}
\ No newline at end of file
+}
diff --git a/styles/global-variables.css b/styles/global-variables.css
index f2e9210d..82d161fb 100644
--- a/styles/global-variables.css
+++ b/styles/global-variables.css
@@ -5,49 +5,49 @@
     -accent - Brighter/Highlighted version of color in the palette
 */
 :root {
-    /* -------------------- Color Palettes -------------------- */
-
-    /* Dark colors */
-    --dark-main: #141414;
-    --dark-low-contrast: #000000;
-    --dark-high-contrast: #3D3D3D;
-    --dark-accent: #666666;
-
-    /* Light colors */
-    --light-main: #ffffff;
-    --light-low-contrast: #efefef;
-    --light-high-contrast: #FAFAFA;
-    --light-accent: #F5F5F5;
-
-    /* Primary colors */
-    --primary-main: #474bff;
-    --primary-low-contrast: rgba(20,20,113,.9);
-    --primary-high-contrast: rgb(37, 99, 235);
-    --primary-accent: #151371;
-    --primary-accent-1: #21175f;
-    --primary-accent-2: #431e8d;
-
-    /* Secondary colors */
-    --secondary-main: #14152b;
-    --secondary-low-contrast: #10111f;
-    --secondary-high-contrast: #1c1d37;
-    --secondary-accent: rgba(196, 196, 196, 0.08);
-    --secondary-accent-1: #3e385d;
-
-    /* Tertiary colors */
-    --tertiary-main: #8040d2;
-    --tertiary-low-contrast: #6B38AD;
-    --tertiary-high-contrast: #9379ff;
-    --tertiary-accent: #ff47a7;
-    --tertiary-accent-1: #d56ee6;
-    --tertiary-accent-2: #461B7E;
-    --tertiary-accent-3: #3E256C;
-    --tertiary-accent-4: #6938ef;
-
-
-    /* -------------------- Border Highlight -------------------- */
-
-    --border-thin: 1px solid var(--tertiary-main);
-    --border: 1.5px solid var(--tertiary-main);
-    --border-thick: 2px solid var(--tertiary-main);
-}
\ No newline at end of file
+  /* -------------------- Color Palettes -------------------- */
+
+  /* Dark colors */
+  --div-background-color: #1c1d37;
+  --dark-main: #141414;
+  --dark-low-contrast: #000000;
+  --dark-high-contrast: #3d3d3d;
+  --dark-accent: #666666;
+
+  /* Light colors */
+  --light-main: #ffffff;
+  --light-low-contrast: #efefef;
+  --light-high-contrast: #fafafa;
+  --light-accent: #f5f5f5;
+
+  /* Primary colors */
+  --primary-main: #474bff;
+  --primary-low-contrast: rgba(20, 20, 113, 0.9);
+  --primary-high-contrast: rgb(37, 99, 235);
+  --primary-accent: #151371;
+  --primary-accent-1: #21175f;
+  --primary-accent-2: #431e8d;
+
+  /* Secondary colors */
+  --secondary-main: #14152b;
+  --secondary-low-contrast: #10111f;
+  --secondary-high-contrast: #1c1d37;
+  --secondary-accent: rgba(196, 196, 196, 0.08);
+  --secondary-accent-1: #3e385d;
+
+  /* Tertiary colors */
+  --tertiary-main: #8040d2;
+  --tertiary-low-contrast: #6b38ad;
+  --tertiary-high-contrast: #9379ff;
+  --tertiary-accent: #ff47a7;
+  --tertiary-accent-1: #d56ee6;
+  --tertiary-accent-2: #461b7e;
+  --tertiary-accent-3: #3e256c;
+  --tertiary-accent-4: #6938ef;
+
+  /* -------------------- Border Highlight -------------------- */
+
+  --border-thin: 1px solid var(--tertiary-main);
+  --border: 1.5px solid var(--tertiary-main);
+  --border-thick: 2px solid var(--tertiary-main);
+}
diff --git a/styles/settings/settingBodyNotificationsNotifications.module.css b/styles/settings/settingBodyNotificationsNotifications.module.css
index 6d2b4747..5c075855 100644
--- a/styles/settings/settingBodyNotificationsNotifications.module.css
+++ b/styles/settings/settingBodyNotificationsNotifications.module.css
@@ -4,7 +4,7 @@
   padding: 16px;
   width: 100%;
 }
-.notificationsContent h2{
+.notificationsContent h2 {
   font-weight: 600;
   font-size: 20px;
   margin: 30px 0;
@@ -30,14 +30,14 @@
   width: 3.5vw;
   height: 3.5vw;
 }
-.checkInput{
+.checkInput {
   display: flex;
   color: white;
   font-size: 20px;
   font-weight: 700;
   margin: 26px 0px;
 }
-.checkInput div{
+.checkInput div {
   border-radius: 2px;
   border: 3px solid #bbbbbb;
   width: 30px;
@@ -48,33 +48,33 @@
   margin-right: 15px;
   cursor: pointer;
 }
-.checkInput div i{
-  color: #1C1D37;
+.checkInput div i {
+  color: var(--div-background-color);
   display: none;
-}  
-.active div{
-  background: #6938EF;
-  border-color:#6938EF ;
-} 
+}
+.active div {
+  background: #6938ef;
+  border-color: #6938ef;
+}
 .active div i {
   display: initial;
   font-size: 21px;
-  -webkit-text-stroke: 1px #6938EF;
+  -webkit-text-stroke: 1px #6938ef;
 }
-.saveBtn{
+.saveBtn {
   display: flex;
   justify-content: center;
   margin-top: auto;
   margin-bottom: 80px;
 }
-.saveBtn a{
-  color: #FFFFFF !important;
+.saveBtn a {
+  color: #ffffff !important;
   border-radius: 44px;
   font-weight: 600;
   font-size: 18px;
-  padding: .9rem 5rem;
-  background: #6938EF;
+  padding: 0.9rem 5rem;
+  background: #6938ef;
+}
+.saveBtn a:active {
+  box-shadow: 0 0 2px 2px #6938ef;
 }
-.saveBtn a:active{
-  box-shadow: 0 0 2px 2px #6938EF;
-}
\ No newline at end of file
diff --git a/styles/settings/settingBodyOverview.module.css b/styles/settings/settingBodyOverview.module.css
index f9a0ce0c..d70a9984 100644
--- a/styles/settings/settingBodyOverview.module.css
+++ b/styles/settings/settingBodyOverview.module.css
@@ -15,8 +15,8 @@
   justify-content: space-between;
   padding-right: 20px;
 }
-.overviewContent h5 i{
-  cursor: pointer; 
+.overviewContent h5 i {
+  cursor: pointer;
 }
 .overviewContent h6 {
   font-size: 1vw;
@@ -51,8 +51,8 @@
   height: 100%;
 }
 .fiCompletion .progress svg circle {
-  fill: #1C1D37;
-  stroke: #6938EF;
+  fill: var(--div-background-color);
+  stroke: #6938ef;
   stroke-width: 8;
   transform: translate(2.5px, 2.5px);
   stroke-dasharray: 220;
@@ -71,7 +71,7 @@
 }
 .fiCompletion .completedProfile,
 .fiCompletion button {
-  background: #6938EF;
+  background: #6938ef;
   color: #ffffff;
   font-size: 20px;
   font-weight: bold;
@@ -79,7 +79,7 @@
   border-radius: 100px;
   width: fit-content;
   width: 100%;
-  padding: .9rem;
+  padding: 0.9rem;
 }
 .fiCompletion .completedProfile {
   color: #00aa4f;
@@ -105,12 +105,12 @@
 .fIProfile {
   color: white;
   margin: 20px 0;
-  border: 1px solid #6938EF;
+  border: 1px solid #6938ef;
   box-shadow: 0px 17px 25px rgb(0 0 0 / 25%);
   border-radius: 15px;
   padding-top: 15px;
 }
-.fIProfile h5{
+.fIProfile h5 {
   padding-left: 50px;
 }
 .fIProfile .userContent {
@@ -138,14 +138,14 @@
   width: 65%;
   font-weight: 400;
 }
-.infoValue a:hover{
-  color: #6938EF;
+.infoValue a:hover {
+  color: #6938ef;
 }
-.lineContainer{
+.lineContainer {
   padding: 0 10px;
   width: 100%;
 }
-.line{
+.line {
   background: rgba(147, 121, 255, 0.52);
   height: 1px;
   width: 100%;
@@ -498,7 +498,7 @@
   background: none;
   margin: 20px 0px 0px 20px;
   box-shadow: none;
-  position: relative
+  position: relative;
 }
 
 .progress:after {
@@ -506,34 +506,33 @@
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  border: 20px solid #3E385D;
-  ;
+  border: 20px solid #3e385d;
   position: absolute;
   top: 0;
-  left: 0
+  left: 0;
 }
 
-.progress>span {
+.progress > span {
   width: 50%;
   height: 100%;
   overflow: hidden;
   position: absolute;
   top: 0;
-  z-index: 1
+  z-index: 1;
 }
 
 .progress .progressLeft {
-  left: 0
+  left: 0;
 }
 
 .progress .progressBar {
   width: 100%;
   height: 100%;
   background: none;
-  border-width:20px;
+  border-width: 20px;
   border-style: solid;
   position: absolute;
-  top: 0
+  top: 0;
 }
 
 .progress .progressLeft .progressBar {
@@ -542,11 +541,11 @@
   border-bottom-right-radius: 80px;
   border-left: 0;
   -webkit-transform-origin: center left;
-  transform-origin: center left
+  transform-origin: center left;
 }
 
 .progress .progressRight {
-  right: 0
+  right: 0;
 }
 
 .progress .progressRight .progressBar {
@@ -562,7 +561,7 @@
   width: 90%;
   height: 90%;
   border-radius: 50%;
-  background: #1C1D37;
+  background: var(--div-background-color);
   font-size: 20px;
   font-weight: bold;
   color: #fff;
@@ -571,41 +570,41 @@
   top: 5%;
   left: 5%;
   display: flex;
-  justify-content: center; 
+  justify-content: center;
   align-items: center;
   font-weight: bold;
 }
 
 .progress.blue .progressBar {
-  border-color: #7653FF;
+  border-color: #7653ff;
 }
 
 /* Bottom body Items */
-.bodyBottom{
+.bodyBottom {
   display: grid;
   grid-template-columns: 48% 48%;
-  grid-column-gap:4%;
+  grid-column-gap: 4%;
   color: white;
   font-size: 16px;
   font-weight: 500;
 }
-.bottomItem{
+.bottomItem {
   display: flex;
   padding: 1rem 0rem;
   flex-direction: column;
-  background: #1C1D37;
-  border: 1px solid #6938EF;
+  background: var(--div-background-color);
+  border: 1px solid #6938ef;
   box-sizing: border-box;
   box-shadow: 0px 32px 41px rgb(0 0 0 / 25%);
   border-radius: 15px;
 }
-.bottomItem div{
+.bottomItem div {
   padding-left: 50px;
 }
-.lineContainer{
+.lineContainer {
   padding: 0 10px !important;
 }
-.bottomItem div h2{
+.bottomItem div h2 {
   color: white;
   font-size: 20px;
   font-weight: bold;
@@ -614,86 +613,88 @@
   justify-content: space-between;
   padding-right: 20px;
 }
-.bottomItem div h2 i{
- cursor: pointer; 
-}  
-.itemElement{
+.bottomItem div h2 i {
+  cursor: pointer;
+}
+.itemElement {
   display: flex;
   justify-content: space-between;
   padding-right: 2rem;
 }
-.itemElement img{
+.itemElement img {
   max-height: 24px;
   cursor: pointer;
 }
-.itemElement p{
+.itemElement p {
   cursor: pointer;
 }
 
 @media only screen and (max-width: 600px) {
-  .fiCompletion{
+  .fiCompletion {
     flex-flow: column;
     align-items: center;
   }
 }
 @media only screen and (max-width: 450px) {
-  .overviewContent h5{
+  .overviewContent h5 {
     font-size: 18px;
   }
-  .infoKey{
+  .infoKey {
     font-size: 16px;
   }
-  .bottomItem{
+  .bottomItem {
     margin-bottom: 20px;
   }
-  .bottomItem div h2{
+  .bottomItem div h2 {
     font-size: 18px;
   }
-  .bottomItem div{
+  .bottomItem div {
     padding-left: 20px;
   }
-  .itemElement{
+  .itemElement {
     padding-right: 0px;
   }
-  .userContent{
+  .userContent {
     padding-left: 20px !important;
   }
-  .fIProfile h5{
+  .fIProfile h5 {
     padding-left: 20px;
   }
   .walletContainer {
     padding-left: 5px !important;
   }
-  .walletRow{
+  .walletRow {
     width: 100%;
   }
-  .bodyBottom{
+  .bodyBottom {
     grid-template-columns: 100%;
   }
-  .itemElement img{
+  .itemElement img {
     margin: 0 !important;
   }
-  .fiCompletion button{
+  .fiCompletion button {
     font-size: 18px;
   }
-  .info p{
+  .info p {
     font-size: 16px;
   }
-  .fIProfile, .userContent, .uCLeft{
+  .fIProfile,
+  .userContent,
+  .uCLeft {
     width: 100% !important;
   }
   .fIProfile .userContent .info:nth-child(-n + 2) .infoValue {
     width: 100% !important;
   }
-  .walletRow h3{
+  .walletRow h3 {
     font-size: 14px;
-  }  
-  .walletRow p{
+  }
+  .walletRow p {
     font-size: 14px;
     margin-left: 4px;
     white-space: nowrap;
-  }  
-  .overviewContent{   
+  }
+  .overviewContent {
     padding: 10px;
   }
-}
\ No newline at end of file
+}
diff --git a/styles/settings/settingBodySecurityLogin.module.css b/styles/settings/settingBodySecurityLogin.module.css
index ed851a51..5c73c9f2 100644
--- a/styles/settings/settingBodySecurityLogin.module.css
+++ b/styles/settings/settingBodySecurityLogin.module.css
@@ -16,7 +16,7 @@
 .loginContent label p {
   font-weight: normal;
 }
-.sectionHeader{
+.sectionHeader {
   color: #646879;
   font-weight: 600;
   font-size: 18px;
@@ -24,41 +24,41 @@
   padding: 0px 18px;
   padding-top: 50px;
 }
-.active{
+.active {
   color: #fff;
 }
-.sectionHeader div{
+.sectionHeader div {
   cursor: pointer;
   padding: 0px 12px;
   padding-bottom: 18px;
   border-bottom: 6px solid transparent;
-  transition: color .4s ease;
+  transition: color 0.4s ease;
 }
-.sectionHeader div:hover{
-  color: #6938EF;
-}  
-.sectionHeader .active{ 
-  border-bottom-color: #6938EF;
+.sectionHeader div:hover {
+  color: #6938ef;
+}
+.sectionHeader .active {
+  border-bottom-color: #6938ef;
   transition: none;
-}  
-.active:hover{ 
+}
+.active:hover {
   color: #fff !important;
-}  
-.sectionHeader div:not(:last-child){
+}
+.sectionHeader div:not(:last-child) {
   margin-right: 30px;
 }
-.line{
+.line {
   height: 2px;
   width: 100%;
-  background: #6938EF;
+  background: #6938ef;
 }
-.login{
+.login {
   display: flex;
   flex-direction: column;
   padding: 0 18px;
   padding-top: 30px;
 }
-.login h2{
+.login h2 {
   font-weight: bold;
   font-size: 20px;
   margin-bottom: 20px;
@@ -70,7 +70,7 @@
   margin-top: 20px;
 }
 .login input {
-  background: #24203C;
+  background: #24203c;
   border-radius: 8px;
   font-size: 20px;
   outline: none;
@@ -79,64 +79,65 @@
   border: 1px solid #7b68b98a;
   font-weight: 500;
   margin-bottom: 30px;
-}  
-.passwordDes h3{
+}
+.passwordDes h3 {
   font-weight: 300;
   font-size: 18px;
   line-height: 27px;
   color: rgba(255, 255, 255, 0.85);
 }
-.passwordDes > div{
+.passwordDes > div {
   margin: 10px 0;
-  color: #FFA959;
+  color: #ffa959;
   display: flex;
 }
-.passwordDes div div:not(:last-child){
+.passwordDes div div:not(:last-child) {
   margin-right: 30px;
-}   
-.saveBtn{
+}
+.saveBtn {
   display: flex;
   justify-content: center;
   margin: 50px 0;
   margin-top: 20px;
 }
-.saveBtn a{
-  color: #FFFFFF !important;
+.saveBtn a {
+  color: #ffffff !important;
   border-radius: 44px;
   font-weight: 600;
   font-size: 18px;
-  padding: .9rem 4rem;
-  background: #6938EF;
+  padding: 0.9rem 4rem;
+  background: #6938ef;
 }
-.saveBtn a:active{
-  box-shadow: 0 0 2px 2px #6938EF;
+.saveBtn a:active {
+  box-shadow: 0 0 2px 2px #6938ef;
 }
-.warning{
+.warning {
   color: #eb3730;
   margin-top: -20px;
   font-size: 14px;
 }
 /* Account management */
-.deactivatetBtn,.deleteBtn {
+.deactivatetBtn,
+.deleteBtn {
   width: 80%;
   text-align: center;
   align-self: center;
   margin-bottom: 30px;
 }
-.deactivatetBtn a{
+.deactivatetBtn a {
   margin-top: 10px;
-  background: #FB8C00;
+  background: #fb8c00;
   border-radius: 44px;
-  color: #FFFFFF !important;
+  color: #ffffff !important;
   font-weight: 600;
   font-size: 20px;
   padding: 1rem 0rem;
   width: 100%;
   display: block;
 }
-.deleteBtn a{
-  color: #FFFFFF !important;
-  background: #DC2626;
+.deleteBtn a {
+  color: #ffffff !important;
+  background: #dc2626;
   border-radius: 44px;
   font-weight: 600;
   font-size: 20px;
@@ -144,7 +145,8 @@
   width: 100%;
   display: block;
 }
-.deactivatetBtn p,.deleteBtn p{
+.deactivatetBtn p,
+.deleteBtn p {
   color: #979797;
   font-weight: 300;
   font-size: 14px;
@@ -154,22 +156,22 @@
 .notificationsContent {
   display: flex;
   flex-direction: column;
-  padding:18px;
+  padding: 18px;
   width: 100%;
 }
-.notificationsContent h2{
+.notificationsContent h2 {
   font-weight: 600;
   font-size: 20px;
   margin-top: 40px;
 }
-.checkInput{
+.checkInput {
   display: flex;
   color: white;
   font-size: 20px;
   font-weight: 700;
   margin: 26px 0px;
 }
-.checkInput div{
+.checkInput div {
   border-radius: 2px;
   border: 3px solid #bbbbbb;
   width: 30px;
@@ -180,39 +182,39 @@
   margin-right: 15px;
   cursor: pointer;
 }
-.checkInput div i{
-  color: #1C1D37;
+.checkInput div i {
+  color: var(--div-background-color);
   display: none;
-}  
-.active div{
-  background: #6938EF;
-  border-color:#6938EF ;
-} 
+}
+.active div {
+  background: #6938ef;
+  border-color: #6938ef;
+}
 .active div i {
   display: initial;
   font-size: 21px;
-  -webkit-text-stroke: 1px #6938EF;
+  -webkit-text-stroke: 1px #6938ef;
 }
-.saveBtn{
+.saveBtn {
   display: flex;
   justify-content: center;
   margin-top: auto;
   margin: 40px 0;
 }
-.saveBtn a{
-  color: #FFFFFF !important;
+.saveBtn a {
+  color: #ffffff !important;
   border-radius: 44px;
   font-weight: 600;
   font-size: 18px;
-  padding: .9rem 5rem;
-  background: #6938EF;
+  padding: 0.9rem 5rem;
+  background: #6938ef;
 }
-.saveBtn a:active{
-  box-shadow: 0 0 2px 2px #6938EF;
+.saveBtn a:active {
+  box-shadow: 0 0 2px 2px #6938ef;
 }
 @media only screen and (max-width: 768px) {
-.sectionHeader div{
-  padding: 0px;
-  padding-bottom: 18px;
+  .sectionHeader div {
+    padding: 0px;
+    padding-bottom: 18px;
+  }
 }
-}
\ No newline at end of file
diff --git a/styles/settings/settingBodySecurityManagementModal.module.css b/styles/settings/settingBodySecurityManagementModal.module.css
index caabb060..dd32e103 100644
--- a/styles/settings/settingBodySecurityManagementModal.module.css
+++ b/styles/settings/settingBodySecurityManagementModal.module.css
@@ -13,7 +13,7 @@
 
 .modalADD {
   color: rgb(255, 255, 255);
-  background-color: #1C1D37;
+  background-color: var(--div-background-color);
   border-radius: 1vw;
   box-shadow: 1vw 2vw 2vw -2vw #000;
   font-weight: bold;
@@ -36,7 +36,7 @@
 
 .modalADD textarea {
   margin-top: 10px;
-  background-color: #24203C;
+  background-color: #24203c;
   border: 1px solid #7b68b98a;
   border-radius: 8px;
   padding: 14px;
@@ -63,31 +63,32 @@
   width: 47%;
 }
 .goBack {
-  background-color: #6938EF;
+  background-color: #6938ef;
   color: white;
 }
 
-.actionBtns .delete,.actionBtns .deactivate {
+.actionBtns .delete,
+.actionBtns .deactivate {
   background-color: #eb3730;
   color: white;
-  font-size: 14px ;
+  font-size: 14px;
   font-weight: bold;
   display: flex;
-  align-items: center ;
+  align-items: center;
   justify-content: center;
-  border-radius: 0.5vw ;
-  text-transform: capitalize ;
-  height: 5vh ;
+  border-radius: 0.5vw;
+  text-transform: capitalize;
+  height: 5vh;
   padding: 0;
   border: none;
   width: 47%;
 }
 .actionBtns .deactivate {
-  background-color: #FB8C00;
+  background-color: #fb8c00;
   color: rgb(255, 255, 255);
 }
- input.note {
-  color: #FB8C00 !important;
+input.note {
+  color: #fb8c00 !important;
 }
 .ps span.warn {
   color: #eb3730;
diff --git a/styles/settings/settingSetup.module.scss b/styles/settings/settingSetup.module.scss
index 0922fdd3..75ef9100 100644
--- a/styles/settings/settingSetup.module.scss
+++ b/styles/settings/settingSetup.module.scss
@@ -1,36 +1,36 @@
-.setupContainer{
-    width: 100%;
-    padding: 60px 30px;
+.setupContainer {
+  width: 100%;
+  padding: 60px 30px;
 }
 // Steps
 .stepperWrapper {
-    margin-top: auto;
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 20px;
+  margin-top: auto;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
 }
 .stepperItem {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
 
-@media (max-width: 768px) {
+  @media (max-width: 768px) {
     font-size: 12px;
+  }
 }
-}
-  
+
 .stepperItem::before {
-    position: absolute;
-    content: "";
-    border-bottom: 6px solid #3E385D;
-    width: 100%;
-    top: 30px;
-    left: -50%;
-    z-index: 2;
-}
-  
+  position: absolute;
+  content: "";
+  border-bottom: 6px solid #3e385d;
+  width: 100%;
+  top: 30px;
+  left: -50%;
+  z-index: 2;
+}
+
 // .stepperItem::after {
 // position: absolute;
 // content: "";
@@ -40,303 +40,308 @@
 // left: 50%;
 // z-index: 2;
 // }
-  
+
 .stepperItem .stepCounter {
-    position: relative;
-    z-index: 5;
-    display: flex;
-    justify-content: center;
-    // align-items: center;
-    width: 60px;
-    height: 60px;
-    padding: 10px;
-    border-radius: 50%;
-    background: rgba(62, 56, 93, 0.87);
-    margin-bottom: 6px;
-    color: #979797;
-    font-size: 20px;
-    font-weight: 800;
-    cursor: pointer;
-}
-.stepperItem .stepCounter img{
-    width: 100%;
-    height: 100%;
-}
-.stepperItem.active .stepCounter{
-    font-weight: bold;
-    background: #fff;
+  position: relative;
+  z-index: 5;
+  display: flex;
+  justify-content: center;
+  // align-items: center;
+  width: 60px;
+  height: 60px;
+  padding: 10px;
+  border-radius: 50%;
+  background: rgba(62, 56, 93, 0.87);
+  margin-bottom: 6px;
+  color: #979797;
+  font-size: 20px;
+  font-weight: 800;
+  cursor: pointer;
+}
+.stepperItem .stepCounter img {
+  width: 100%;
+  height: 100%;
+}
+.stepperItem.active .stepCounter {
+  font-weight: bold;
+  background: #fff;
 }
 
 .stepperItem.completed .stepCounter {
-    background: #6938EF;
-    img{
-        background: white;
-        border-radius: 50%;
-    }
-}
-.completed{
-    .stepName,.stepNameEven{
+  background: #6938ef;
+  img {
+    background: white;
+    border-radius: 50%;
+  }
+}
+.completed {
+  .stepName,
+  .stepNameEven {
     color: #fff;
-    }
+  }
 }
 .stepperItem.completed::after {
-    position: absolute;
-    content: "";
-    border-bottom: 6px solid #6938EF;
-    width: 100%;
-    top: 30px;
-    left: 50%;
-    z-index: 3;
+  position: absolute;
+  content: "";
+  border-bottom: 6px solid #6938ef;
+  width: 100%;
+  top: 30px;
+  left: 50%;
+  z-index: 3;
 }
 
 .stepperItem:first-child::before {
-content: none;
+  content: none;
 }
 .stepperItem:last-child::after {
-content: none;
+  content: none;
 }
-.stepName,.stepNameEven{
-    position: absolute;
-    color: #696969;
-    font-weight: 700;
-    font-size: 18px;
+.stepName,
+.stepNameEven {
+  position: absolute;
+  color: #696969;
+  font-weight: 700;
+  font-size: 18px;
 }
-.active .stepName,.active .stepNameEven{
-    color: #fff;
+.active .stepName,
+.active .stepNameEven {
+  color: #fff;
 }
-.stepName{
-    top: -50%;
+.stepName {
+  top: -50%;
 }
-  .stepNameEven{
-    bottom: -50%;
+.stepNameEven {
+  bottom: -50%;
 }
 // Input Fields
-.nameRow div input,.nameRow div select{
-    background: #24203B;
-    border-radius: 8px;
-    border: 1px solid #6938EF;
-    // height: 60px;
-    width: 100%;
-    color: rgb(255, 255, 255);
-    padding: 1rem;
-    outline: none;
-    font-size: 18px;
-    font-weight: 500;
-}
+.nameRow div input,
 .nameRow div select {
-    option {
-        font-size: 18px;
-        font-weight: 700;
-    }
-    option:checked {  
-        border: 3px solid #6938EF;
-        background: #6938EF;
-    }
-    option:hover {  
-        border: 3px solid #6938EF;
-        box-shadow: 0 0 10px 100px #2c3235 inset;
-    }
-}    
-.nameRow div select,.nameRow .DatePicker input{
-    -moz-appearance:none; /* Firefox */
-    -webkit-appearance:none; /* Safari and Chrome */
-    appearance:none;
-    background-image: url("/assets/images/settings/arrow-down.svg");
-    background-repeat: no-repeat;
-    background-position-x: 96%;
-    background-position-y: 10px;
-    cursor: pointer;
-}
-.DatePicker .react-datepicker-wrapper{
-    padding: 0;
+  background: #24203b;
+  border-radius: 8px;
+  border: 1px solid #6938ef;
+  // height: 60px;
+  width: 100%;
+  color: rgb(255, 255, 255);
+  padding: 1rem;
+  outline: none;
+  font-size: 18px;
+  font-weight: 500;
 }
-.nameRow {
-    margin: 20px 0;
-}
-.nameRow div label{
-    font-weight: bold;
-    color: #FFFFFF;
-    font-size: 20px;
-}
-.nameRow div input:focus{
-    border: 1px solid #6938EF;
-    background: #fff;
-    color: #1C1D37;
-}
-.title h2{
-    color: white;
-    font-size: 24px;
-    font-weight: 600;
-    margin: 50px 0;
-    padding-left: 15px;
-}
-.submitRow{
-    margin: 60px auto;
-    width: 80%;
-}
-.submitRow > div{
-    display: flex;
-    justify-content: space-between;
-    width: 50%;
-}
-.submitRow div a{
-    outline: none;
-    color: #FFFFFF!important;
-    background: transparent;
-    border-radius: 44px;
-    border: 1px solid #6938EF;
-    font-weight: 600;
+.nameRow div select {
+  option {
     font-size: 18px;
-    padding: 1rem 2rem;
-    transition: background .4s ease;
-}
-.submitRow div a:hover{
-    background: #6938EF;
+    font-weight: 700;
+  }
+  option:checked {
+    border: 3px solid #6938ef;
+    background: #6938ef;
+  }
+  option:hover {
+    border: 3px solid #6938ef;
+    box-shadow: 0 0 10px 100px #2c3235 inset;
+  }
+}
+.nameRow div select,
+.nameRow .DatePicker input {
+  -moz-appearance: none; /* Firefox */
+  -webkit-appearance: none; /* Safari and Chrome */
+  appearance: none;
+  background-image: url("/assets/images/settings/arrow-down.svg");
+  background-repeat: no-repeat;
+  background-position-x: 96%;
+  background-position-y: 10px;
+  cursor: pointer;
+}
+.DatePicker .react-datepicker-wrapper {
+  padding: 0;
 }
-.submitRow div input{
-    outline: none;
-    color: #FFFFFF;
-    border-radius: 44px;
-    font-weight: 600;
-    font-size: 18px;
-    padding: 1rem 2rem;
-    background: #6938EF;
-    min-width: 200px;
+.nameRow {
+  margin: 20px 0;
+}
+.nameRow div label {
+  font-weight: bold;
+  color: #ffffff;
+  font-size: 20px;
+}
+.nameRow div input:focus {
+  border: 1px solid #6938ef;
+  background: #fff;
+  color: var(--div-background-color);
+}
+.title h2 {
+  color: white;
+  font-size: 24px;
+  font-weight: 600;
+  margin: 50px 0;
+  padding-left: 15px;
+}
+.submitRow {
+  margin: 60px auto;
+  width: 80%;
+}
+.submitRow > div {
+  display: flex;
+  justify-content: space-between;
+  width: 50%;
+}
+.submitRow div a {
+  outline: none;
+  color: #ffffff !important;
+  background: transparent;
+  border-radius: 44px;
+  border: 1px solid #6938ef;
+  font-weight: 600;
+  font-size: 18px;
+  padding: 1rem 2rem;
+  transition: background 0.4s ease;
+}
+.submitRow div a:hover {
+  background: #6938ef;
+}
+.submitRow div input {
+  outline: none;
+  color: #ffffff;
+  border-radius: 44px;
+  font-weight: 600;
+  font-size: 18px;
+  padding: 1rem 2rem;
+  background: #6938ef;
+  min-width: 200px;
 }
 // Third Step
-.skillsList{
-    display: flex;
-    flex-wrap: wrap;
-    padding: 20px 15px;
-    width: 100%;
-}
-.skillsList div{
-    background: #6938EF;
-    border-radius: 44px;
-    padding: 10px 16px;
-    color: #FFFFFF;
-    font-weight: bold;
-    font-size: 16px;
-    margin: 10px;
-    display: flex;
-    align-items: center;
-}
-.skillsList div img{
-    max-height: 30px;
-    margin-left: 12px;
-    cursor: pointer;
-}
-.addButton{
-    display: flex;
-    align-items: flex-end;
-}
-.addButton a{
-    background: #24203B;
-    border-radius: 8px;
-    border: 1px solid #6938EF;
-    height: 60px;
-    width: 100%;
-    color: white !important;
-    padding: 1rem;
-    outline: none;
-    font-size: 18px;
-    text-align: center;
-    transition: 0.3s ease;
+.skillsList {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 20px 15px;
+  width: 100%;
+}
+.skillsList div {
+  background: #6938ef;
+  border-radius: 44px;
+  padding: 10px 16px;
+  color: #ffffff;
+  font-weight: bold;
+  font-size: 16px;
+  margin: 10px;
+  display: flex;
+  align-items: center;
+}
+.skillsList div img {
+  max-height: 30px;
+  margin-left: 12px;
+  cursor: pointer;
+}
+.addButton {
+  display: flex;
+  align-items: flex-end;
+}
+.addButton a {
+  background: #24203b;
+  border-radius: 8px;
+  border: 1px solid #6938ef;
+  height: 60px;
+  width: 100%;
+  color: white !important;
+  padding: 1rem;
+  outline: none;
+  font-size: 18px;
+  text-align: center;
+  transition: 0.3s ease;
 }
 
-.addButton a:hover{
-    background: #6938EF;
+.addButton a:hover {
+  background: #6938ef;
 }
 // Fourth Step
-.socialRow{
-    margin: 20px 0;
+.socialRow {
+  margin: 20px 0;
 }
-.socialRow{
-    margin: 20px 0;
+.socialRow {
+  margin: 20px 0;
 }
 .socialCol {
-    background: #24203B;
-    border-radius: 8px;
-    border: 1px solid #6938EF;
-    height: 60px;
-    width: 100%;
-    color: white;
-    padding: 1rem;
-    outline: none;
-    font-size: 18px;
-    font-weight: 500;
-    margin: 0 15px;
-    display: flex;
-}
-.socialCol> div {
-    margin: 0 1.7rem 0 1rem;
+  background: #24203b;
+  border-radius: 8px;
+  border: 1px solid #6938ef;
+  height: 60px;
+  width: 100%;
+  color: white;
+  padding: 1rem;
+  outline: none;
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0 15px;
+  display: flex;
+}
+.socialCol > div {
+  margin: 0 1.7rem 0 1rem;
 }
 .socialCol img {
-    cursor: pointer;
-}
-.socialCol input{
-    background: transparent;
-    border-radius: 8px;
-    height: 100%;
-    width: 100%;
-    color: white;
-    outline: none;
-    font-size: 18px;
-    font-weight: 500;
+  cursor: pointer;
+}
+.socialCol input {
+  background: transparent;
+  border-radius: 8px;
+  height: 100%;
+  width: 100%;
+  color: white;
+  outline: none;
+  font-size: 18px;
+  font-weight: 500;
 }
 .socialCol input:disabled {
-    color: #979797;
+  color: #979797;
 }
-.addLinkBtn{
-    padding: 6px;
-    min-width: 52px;
-    margin: auto;
+.addLinkBtn {
+  padding: 6px;
+  min-width: 52px;
+  margin: auto;
 }
-.addLinkBtn img{
-    border: 1px solid #6938EF;
-    border-radius: 50%;
-    padding: 5px;
+.addLinkBtn img {
+  border: 1px solid #6938ef;
+  border-radius: 50%;
+  padding: 5px;
 }
-.add-socail-links .addLinkBtn{
-    margin: 0;
+.add-socail-links .addLinkBtn {
+  margin: 0;
 }
-.newSocialLink{
-    max-height: 30px;
-    margin: auto;
-    margin-right: 15px;
+.newSocialLink {
+  max-height: 30px;
+  margin: auto;
+  margin-right: 15px;
 }
-.socailAdd{
-    background: #6938EF;
+.socailAdd {
+  background: #6938ef;
 }
-.socailAddBtn img{
-    border-color: #fff;
-    transform: rotate(135deg);
-    transition: .4s ease;
+.socailAddBtn img {
+  border-color: #fff;
+  transform: rotate(135deg);
+  transition: 0.4s ease;
 }
-.socialAddLink{
-    margin: 20px 0;
-    padding: 0 15px;
+.socialAddLink {
+  margin: 20px 0;
+  padding: 0 15px;
 }
-.socialAddLink .socialCol{
-    margin: 0;
+.socialAddLink .socialCol {
+  margin: 0;
 }
-.socialAddLink .socialCol >div{
-    margin: 0;
+.socialAddLink .socialCol > div {
+  margin: 0;
 }
-.submitLinkBtn{
-    transition:  .4s ease;
-    cursor: pointer;
-    padding: 1rem 5px;
+.submitLinkBtn {
+  transition: 0.4s ease;
+  cursor: pointer;
+  padding: 1rem 5px;
 }
-.submitLinkBtn:hover{
-    background: #6938EF;
+.submitLinkBtn:hover {
+  background: #6938ef;
 }
-.selectRow{
-    margin:0;
+.selectRow {
+  margin: 0;
 }
-.selectRow >div{
-    padding: 0px;
+.selectRow > div {
+  padding: 0px;
 }
-.selectRow .socialCol{
-    margin: 5px 0;
+.selectRow .socialCol {
+  margin: 5px 0;
 }
diff --git a/styles/settings/settingsLayout.module.scss b/styles/settings/settingsLayout.module.scss
index dbc309ec..7d77ad9e 100644
--- a/styles/settings/settingsLayout.module.scss
+++ b/styles/settings/settingsLayout.module.scss
@@ -1,5 +1,5 @@
 .settingsContainer {
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   background: #14152b;
   padding-top: 120px;
   overflow-x: clip;
@@ -15,7 +15,7 @@
   grid-column-gap: 50px;
   position: relative;
 }
-.backgroundShdow div{
+.backgroundShdow div {
   top: 400px;
   right: -70px;
   height: 320px;
@@ -27,7 +27,7 @@
   position: absolute;
   border-radius: 50%;
 }
-.backgroundShdow img{
+.backgroundShdow img {
   top: 400px;
   right: -100px;
   position: absolute;
@@ -35,24 +35,23 @@
 
 .settingsNavigation {
   display: flex;
-  flex-direction: column;  
+  flex-direction: column;
 }
-.settingsNavigation > div{
-  background: #1C1D37;
-  border: 1px solid #6938EF
-;
+.settingsNavigation > div {
+  background: var(--div-background-color);
+  border: 1px solid #6938ef;
   box-sizing: border-box;
   box-shadow: 0px 32px 41px rgba(0, 0, 0, 0.25);
   border-radius: 15px;
   padding: 1.5rem 0;
   // height: 100%;
-} 
-.navContainer{
+}
+.navContainer {
   // margin: auto 0;
   width: 100%;
   margin-bottom: 20px;
 }
-.navProfile{
+.navProfile {
   height: 100%;
   margin-bottom: 0;
   display: flex;
@@ -73,7 +72,7 @@
   position: relative;
   height: 200px;
 }
-.settingsNavigation .userDataHeader .imgDiv div{
+.settingsNavigation .userDataHeader .imgDiv div {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -88,16 +87,16 @@
   align-items: center;
   justify-content: center;
   opacity: 0;
-  transition: opacity .2s ease-out;
+  transition: opacity 0.2s ease-out;
 }
-.settingsNavigation .userDataHeader .imgDiv:hover{
-  div{
-  opacity: 1; 
+.settingsNavigation .userDataHeader .imgDiv:hover {
+  div {
+    opacity: 1;
   }
   .profileImg {
     opacity: 0.7;
   }
-} 
+}
 .settingsNavigation .userDataHeader .imgDiv .profileImg {
   cursor: pointer;
   border-radius: 100%;
@@ -106,7 +105,7 @@
   // max-width: 170px;
   opacity: 1;
   cursor: pointer;
-  transition: opacity .2s ease-out;
+  transition: opacity 0.2s ease-out;
 }
 
 .settingsNavigation .userDataHeader .textDiv {
@@ -128,7 +127,7 @@
   margin: 3px 0;
 }
 .settingsNavigation .userDataHeader .textDiv h4 {
-  color: #FFA959;
+  color: #ffa959;
   font-weight: bold;
   font-size: 20px;
 
@@ -156,11 +155,11 @@
 }
 
 .settingsNavigation nav .navHeader.activeLi h2 {
-  background: #6938EF;
+  background: #6938ef;
   border-radius: 44px;
 }
 .settingsNavigation nav .navHeader h2:hover {
-  border-color: #6938EF;
+  border-color: #6938ef;
   border-radius: 44px;
 }
 
@@ -211,31 +210,30 @@
 .specificSettings {
   display: flex;
   /* width: 66%; */
-  background: #1C1D37;
-  border: 1px solid #6938EF
-;
+  background: var(--div-background-color);
+  border: 1px solid #6938ef;
   box-sizing: border-box;
   box-shadow: 0px 32px 41px rgb(0 0 0 / 25%);
   border-radius: 15px;
 }
-.headerSection{
-  display: flex;  
+.headerSection {
+  display: flex;
   margin: 30px 0;
   width: fit-content;
-  background: linear-gradient(90.87deg, #9379FF -2.84%, #33D2FF 82.04%);
+  background: linear-gradient(90.87deg, #9379ff -2.84%, #33d2ff 82.04%);
   -webkit-background-clip: text;
-  background-clip:text;
+  background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-.headerSection p{
+.headerSection p {
   display: flex;
-  justify-content: center; 
+  justify-content: center;
   align-items: center;
   color: #ffffff;
   font-size: 28px;
   font-weight: 600;
 }
-.headerSection img{
+.headerSection img {
   max-width: 40px;
   margin-right: 30px;
   cursor: pointer;
@@ -249,17 +247,17 @@ img.editIcon {
   cursor: pointer;
   object-fit: contain;
 }
-.lineContainer{
+.lineContainer {
   padding: 0 10px;
   width: 100%;
 }
-.line{
+.line {
   background: rgba(147, 121, 255, 0.52);
   height: 1px;
   width: 90%;
   margin: 11px auto;
 }
-.btnSignOut{
+.btnSignOut {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -270,15 +268,14 @@ img.editIcon {
   width: fit-content;
 }
 .btnSignOut:hover {
-  color: #6938EF
-;
+  color: #6938ef;
 }
 @media only screen and (max-width: 992px) {
   .accountSettings {
     grid-template-columns: 100%;
     grid-row-gap: 20px;
   }
-}  
+}
 /* Progress Styleing */
 .progress {
   width: 130px;
@@ -287,7 +284,7 @@ img.editIcon {
   line-height: 130px;
   background: none;
   box-shadow: none;
-  position: relative
+  position: relative;
 }
 
 .progress:after {
@@ -295,33 +292,33 @@ img.editIcon {
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  border: 25px solid #3E385D;
+  border: 25px solid #3e385d;
   position: absolute;
   top: 0;
-  left: 0
+  left: 0;
 }
 
-.progress>span {
+.progress > span {
   width: 50%;
   height: 100%;
   overflow: hidden;
   position: absolute;
   top: 0;
-  z-index: 1
+  z-index: 1;
 }
 
 .progress .progressLeft {
-  left: 0
+  left: 0;
 }
 
 .progress .progressBar {
   width: 100%;
   height: 100%;
   background: none;
-  border-width:25px;
+  border-width: 25px;
   border-style: solid;
   position: absolute;
-  top: 0
+  top: 0;
 }
 
 .progress .progressLeft .progressBar {
@@ -330,11 +327,11 @@ img.editIcon {
   border-bottom-right-radius: 80px;
   border-left: 0;
   -webkit-transform-origin: center left;
-  transform-origin: center left
+  transform-origin: center left;
 }
 
 .progress .progressRight {
-  right: 0
+  right: 0;
 }
 
 .progress .progressRight .progressBar {
@@ -350,7 +347,7 @@ img.editIcon {
   width: 90%;
   height: 90%;
   border-radius: 50%;
-  background: #1C1D37;
+  background: var(--div-background-color);
   font-size: 20px;
   font-weight: bold;
   color: #fff;
@@ -359,26 +356,26 @@ img.editIcon {
   top: 5%;
   left: 5%;
   display: flex;
-  justify-content: center; 
+  justify-content: center;
   align-items: center;
   font-weight: bold;
 }
-.progress .progressValue p{
+.progress .progressValue p {
   font-size: 24px;
 }
 .progress.blue .progressBar {
-  border-color: #6938EF;
+  border-color: #6938ef;
 }
-.layoutProgress{
+.layoutProgress {
   display: flex;
   padding: 1rem;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
-.layoutProgress >p{
+.layoutProgress > p {
   font-size: 24px;
   font-weight: 700;
   color: white;
-  margin: 50px 0 10px; 
-} 
\ No newline at end of file
+  margin: 50px 0 10px;
+}