diff --git a/src/components/AuthPages/VerifyYou/index2.jsx b/src/components/AuthPages/VerifyYou/index2.jsx
index 5c28f52..6e1031d 100644
--- a/src/components/AuthPages/VerifyYou/index2.jsx
+++ b/src/components/AuthPages/VerifyYou/index2.jsx
@@ -28,21 +28,14 @@ export default function VerifyYou() {
                 </span>
               </div>
               <div className="input-area">
-                <div className="mb-5">
+              <div className="mb-5">
                   <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                    <b>Verify Email.</b> Help us secure your WrenchBoard account
-                    by verifying your email registration address. Verification
-                    will let you access all of WrenchBoard's features.
+                    Please <span className="font-semibold tracking-wide">verify your email</span> to secure your account.
                   </p>
                 </div>
                 <div className="mb-5">
                   <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                    If you do not receive the confirmation message within a few
-                    minutes of signing up, please check your Junk E-mail folder
-                    just in case the confirmation email got delivered there
-                    instead of your inbox. If so, select the confirmation
-                    message and click Not Junk, which will allow future messages
-                    to get through.
+                    If you don't see the confirmation email, check your <span className='font-semibold tracking-wide'>Junk</span> or <span className='font-semibold tracking-wide'>Spam</span> folder and mark it as "Not Junk"
                   </p>
                 </div>
               </div>
diff --git a/src/components/Referral/ReferralDisplay.jsx b/src/components/Referral/ReferralDisplay.jsx
index ddb48ba..1714da3 100644
--- a/src/components/Referral/ReferralDisplay.jsx
+++ b/src/components/Referral/ReferralDisplay.jsx
@@ -7,6 +7,7 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
 import ReferralTable from "../MyWallet/WalletComponent/ReferralTable";
+import TabButton from "../customTabs/TabButton";
 
 const validationSchema = Yup.object().shape({
   ref_email: Yup.string()
@@ -105,123 +106,165 @@ function ReferralDisplay() {
     sendReferralMsg({...values}); // FUNCTION TO SEND REFERRAL MESSAGE
   };
 
+  const [selectedTab, setSelectedTab] = useState("Send Referral");
+  const tabs = [  //STATE FOR SWITCHING BETWEEN TABS
+      {
+        id: 1,
+        title: "Send Referral",
+        iconName: "history",
+      },
+      {
+        id: 2,
+        title: "Referral List",
+        iconName: "history",
+      },
+  ]
+
   useEffect(() => {
     allReferrals();
   }, [refHistoryReload]);
 
   return (
-    <div className="content-wrapper w-full lg:flex xl:space-x-8  bottomMargin">
-      <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
-        <div className="sm:flex justify-between items-center mb-6">
-          <div className="mb-5 sm:mb-0">
-            <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
-              <span>Refer a Friend</span>
-            </h1>
+    <div className="w-full h-full p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow lg:flex lg:px-10 px-4 justify-between">
+      <div className="content-tab-items lg:w-[230px] w-full mr-2">
+          <div className='overflow-hidden mb-5 lg:mb-0 py-2 lg:py-8'>
+              {tabs.map((item) => (
+                  <div key={item.id} className='w-full'>
+                      <TabButton 
+                          key={item.id}
+                          item={item.title}
+                          iconName={item.iconName}
+                          selectedTab={selectedTab}
+                          setSelectedTab={setSelectedTab}
+                      />
+                  </div>
+              ))}
           </div>
-        </div>
+      </div>
+      <div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
+      <div className="flex-1 overflow-y-auto min-h-[520px]">
+        <>
+          <div className='hidden'>
+              <div className="sm:flex justify-between items-center mb-6">
+                <div className="mb-5 sm:mb-0">
+                  <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
+                    <span>Refer a Friend</span>
+                  </h1>
+                </div>
+              </div>
+          </div>
+          {selectedTab == 'Send Referral' &&
+            <div className="referral w-full p-4">
+              <h2 className="mb-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+                Send Referral
+              </h2>
+              <Formik
+                initialValues={initialValues}
+                validationSchema={validationSchema}
+                onSubmit={handleSubmit}
+              >
+                {(props) => (
+                  <Form className="referral-info">
+                    <div className="block md:mb-6 md:flex gap-10">
+                      {/* Firstname */}
+                      <div className="field w-full mb-6 md:mb-0">
+                        <InputCom
+                          fieldClass="px-6"
+                          label="Firstname"
+                          type="text"
+                          name="ref_firstname"
+                          placeholder="Firstname"
+                          value={props.values.ref_firstname}
+                          inputHandler={props.handleChange}
+                          blurHandler={props.handleBlur}
+                        />
+                        {props.errors.ref_firstname &&
+                          props.touched.ref_firstname && (
+                            <p className="text-sm text-red-500">
+                              {props.errors.ref_firstname}
+                            </p>
+                          )}
+                      </div>
 
-        <div className="referral w-full  md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
-          <h2 className="mb-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
-            Send Referral
-          </h2>
-          <Formik
-            initialValues={initialValues}
-            validationSchema={validationSchema}
-            onSubmit={handleSubmit}
-          >
-            {(props) => (
-              <Form className="referral-info">
-                <div className="block md:mb-6 md:flex gap-10">
-                  {/* Firstname */}
-                  <div className="field w-full mb-6 md:mb-0">
-                    <InputCom
-                      fieldClass="px-6"
-                      label="Firstname"
-                      type="text"
-                      name="ref_firstname"
-                      placeholder="Firstname"
-                      value={props.values.ref_firstname}
-                      inputHandler={props.handleChange}
-                      blurHandler={props.handleBlur}
-                    />
-                    {props.errors.ref_firstname &&
-                      props.touched.ref_firstname && (
+                      {/* Lastname */}
+                      <div className="field w-full mb-6 md:mb-0">
+                        <InputCom
+                          fieldClass="px-6"
+                          label="Lastname"
+                          type="text"
+                          name="ref_lastname"
+                          placeholder="Lastname"
+                          value={props.values.ref_lastname}
+                          inputHandler={props.handleChange}
+                          blurHandler={props.handleBlur}
+                        />
+                        {props.errors.ref_lastname &&
+                          props.touched.ref_lastname && (
+                            <p className="text-sm text-red-500">
+                              {props.errors.ref_lastname}
+                            </p>
+                          )}
+                      </div>
+                    </div>
+
+                    <div className="field w-full mb-6">
+                      <InputCom
+                        fieldClass="px-6"
+                        label="Email"
+                        type="text"
+                        name="ref_email"
+                        placeholder="Email"
+                        value={props.values.ref_email}
+                        inputHandler={props.handleChange}
+                        blurHandler={props.handleBlur}
+                      />
+                      {props.errors.ref_email && props.touched.ref_email && (
                         <p className="text-sm text-red-500">
-                          {props.errors.ref_firstname}
+                          {props.errors.ref_email}
                         </p>
                       )}
-                  </div>
+                    </div>
 
-                  {/* Lastname */}
-                  <div className="field w-full mb-6 md:mb-0">
-                    <InputCom
-                      fieldClass="px-6"
-                      label="Lastname"
-                      type="text"
-                      name="ref_lastname"
-                      placeholder="Lastname"
-                      value={props.values.ref_lastname}
-                      inputHandler={props.handleChange}
-                      blurHandler={props.handleBlur}
-                    />
-                    {props.errors.ref_lastname &&
-                      props.touched.ref_lastname && (
-                        <p className="text-sm text-red-500">
-                          {props.errors.ref_lastname}
-                        </p>
+                    <hr />
+                    {error.message != "" && (
+                      <p className="text-base text-red-500 py-2">{error.message}</p>
+                    )}
+                    <div className="referral-btn flex justify-end items-center py-4">
+                      {error.loading ? (
+                        <LoadingSpinner size="6" color="sky-blue" />
+                      ) : (
+                        <button
+                          type="submit"
+                          className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                        >
+                          Send Message
+                        </button>
                       )}
-                  </div>
-                </div>
-
-                <div className="field w-full mb-6">
-                  <InputCom
-                    fieldClass="px-6"
-                    label="Email"
-                    type="text"
-                    name="ref_email"
-                    placeholder="Email"
-                    value={props.values.ref_email}
-                    inputHandler={props.handleChange}
-                    blurHandler={props.handleBlur}
-                  />
-                  {props.errors.ref_email && props.touched.ref_email && (
-                    <p className="text-sm text-red-500">
-                      {props.errors.ref_email}
-                    </p>
-                  )}
-                </div>
-
-                <hr />
-                {error.message != "" && (
-                  <p className="text-base text-red-500 py-2">{error.message}</p>
+                    </div>
+                  </Form>
                 )}
-                <div className="referral-btn flex justify-end items-center py-4 border-b-4">
-                  {error.loading ? (
-                    <LoadingSpinner size="6" color="sky-blue" />
-                  ) : (
-                    <button
-                      type="submit"
-                      className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                    >
-                      Send Message
-                    </button>
-                  )}
-                </div>
-              </Form>
-            )}
-          </Formik>
-        </div>
+              </Formik>
+            </div>
+          }
+
+          {selectedTab == 'Referral List' &&
+            <>
+              <div className="w-full p-4">
+                <h2 className="mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+                  Referral List
+                </h2>
+                {referralList.loading ? (
+                  <LoadingSpinner size="22" color="sky-blue" />
+                ) : (
+                  <ReferralTable history={referralList} />
+                )}
+              </div>
+            </>
+          }
+        </>
+
+
 
-        <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
-          <h2 className="mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
-            Referral List
-          </h2>
-          {referralList.loading ? (
-            <LoadingSpinner size="32" color="sky-blue" />
-          ) : (
-            <ReferralTable history={referralList} />
-          )}
-        </div>
       </div>
     </div>
   );
diff --git a/src/services/UsersService.js b/src/services/UsersService.js
index 98d3903..ba65ced 100644
--- a/src/services/UsersService.js
+++ b/src/services/UsersService.js
@@ -208,7 +208,7 @@ class usersService {
   // }
   getHeroJBanners() {
     var postData = {
-      uuid: localStorage.getItem("uid"),
+      uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       page: 0,