diff --git a/src/components/History/index.jsx b/src/components/History/index.jsx
index 88d0fee..9386635 100644
--- a/src/components/History/index.jsx
+++ b/src/components/History/index.jsx
@@ -241,7 +241,7 @@ export default function History() {
                 </div>
                 {/* END OF RECENT ACTIVITY SECTION */}
             </div>
-            <HistoryTable />
+            {/*<HistoryTable />*/}
           </div>
         </div>
       </Layout>
diff --git a/src/components/Referral/ReferralDisplay.jsx b/src/components/Referral/ReferralDisplay.jsx
index 50fb65e..37180dc 100644
--- a/src/components/Referral/ReferralDisplay.jsx
+++ b/src/components/Referral/ReferralDisplay.jsx
@@ -116,9 +116,20 @@ function ReferralDisplay() {
   }, [refHistoryReload]);
 
   return (
-    <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
-      <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-        <div className="referral w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
+    <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>
+
+        </div>
+
+        <div className="referral w-full  md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
           <h2 className="text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
             Send Referral
           </h2>
@@ -203,20 +214,20 @@ function ReferralDisplay() {
             )}
           </Formik>
         </div>
-      </div>
 
-      <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-        <div className="referral w-full md:p-8 p-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+        <div className="w-full md:p-8 p-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto 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" />
+              <LoadingSpinner size="32" color="sky-blue" />
           ) : (
-            <ReferralTable history={referralList} />
+              <ReferralTable history={referralList} />
           )}
         </div>
       </div>
+
+
     </div>
   );
 }
diff --git a/src/index.css b/src/index.css
index 1691b9b..26c3962 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,6 +10,9 @@
   src: url("./assets/fonts/Product Sans Bold.ttf");
 }
 
+.referral{
+  margin-bottom: 20px
+}
 .heroSilderTitle{
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
   font-family: sans; color: white;