diff --git a/.env b/.env
index f354dbc..27d706e 100644
--- a/.env
+++ b/.env
@@ -102,4 +102,7 @@ REACT_APP_NEW_LOGIN_LAYOUT=1
 
 #APP DOWNLOAD LINKS
 REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
-REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
\ No newline at end of file
+REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+
+# Displays the new family dashboard with boxes
+REACT_APP_SHOW_NEW_FAMILY_DASH=1
\ No newline at end of file
diff --git a/.env.development b/.env.development
index 8612111..158c2c7 100644
--- a/.env.development
+++ b/.env.development
@@ -70,4 +70,7 @@ REACT_APP_NEW_LOGIN_LAYOUT=1
 
 #APP DOWNLOAD LINKS
 REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
-REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
\ No newline at end of file
+REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+
+# Displays the new family dashboard with boxes
+REACT_APP_SHOW_NEW_FAMILY_DASH=1
\ No newline at end of file
diff --git a/.env.production b/.env.production
index d600cad..4268f04 100644
--- a/.env.production
+++ b/.env.production
@@ -77,3 +77,6 @@ REACT_APP_NEW_LOGIN_LAYOUT=1
 #APP DOWNLOAD LINKS
 REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
 REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+
+# Displays the new family dashboard with boxes
+REACT_APP_SHOW_NEW_FAMILY_DASH=0
diff --git a/src/components/Home/FamilyDash.jsx b/src/components/Home/FamilyDash.jsx
index 40fbc3d..dde6128 100644
--- a/src/components/Home/FamilyDash.jsx
+++ b/src/components/Home/FamilyDash.jsx
@@ -1,40 +1,73 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import ParentWaiting from "../MyOffers/ParentWaiting";
 import MyOffersFamilyTable from "../MyTasks/MyOffersFamilyTable";
 import FamilyActiveLSlde from "./FamilyActiveLSlde";
 import { Link } from "react-router-dom";
+import usersService from "../../services/UsersService";
 
 export default function FamilyDash({ familyOffers, MyActiveJobList }) {
   // console.log("PROPS IN FAMILY DASH->", familyOffers?.result_list);
+  
+  const userApi = new usersService();
 
   const trending = MyActiveJobList;
+
+  let [familyBannersList, setFamilyBannersList] = useState({loading:false, result:{}})
+
+  const getFamilyBanners = async () => { // FUNCTION TO GET FAMILY BANNERS
+    setFamilyBannersList({loading:true, result:[]});
+    try {
+      const res = await userApi.getFamilyBannersList();
+      setFamilyBannersList({loading:false, result:res.data});
+      // console.log('TEST RESPONSE', res)
+    } catch (error) {
+      setFamilyBannersList({loading:false, result:[]});
+      console.log("Error getting tasks");
+    }
+  };
+
+
+  useEffect(()=>{
+    getFamilyBanners()
+  },[])
+
   return (
     <div>
       <div className="home-page-wrapper">
         {/* <CommonHead commonHeadData={props.commonHeadData} /> */}
 
-        <div className="w-full mb-4 grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
-          {[1,2,3,4,5].map((item, index) => (
-            <Link to='/' className={`h-40 rounded-lg shadow-sm ${index%2==0 ? 'bg-red-200/50' : 'bg-sky-300/50'}`}>
-              <div >
+        {process.env.REACT_APP_SHOW_NEW_FAMILY_DASH == '1' &&
+        <>
+          {!familyBannersList.loading && familyBannersList?.result?.data && Object.keys(familyBannersList?.result?.data).length > 0 &&
+            // Loop for Family Banners
+            <div className="w-full mb-4 grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
+              {Object.keys(familyBannersList?.result?.data).map((item, index) => {
+                let content = familyBannersList?.result?.data[item]
+                return (
+                  <Link key={item} to='/' className={`p-2 h-40 rounded-lg shadow-sm flex justify-center items-center ${index%2==0 ? 'bg-red-200/50' : 'bg-sky-300/50'}`}>
+                    <div className="">
+                    {content.banner.text} for <span className="font-bold">{item}</span> content
+                    </div>
+                  </Link>
+                )
+              })}
+            </div>
+          }
+          
+          <div className="my-4">
+            <h1 className="my-4 text-26 font-bold text-dark-gray dark:text-white tracking-wide">Resources</h1>
+            <div className="w-full grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4">
+              {[1,2,3,4,5].map((item, index) => (
+                <Link key={index} to='/' className={`h-40 rounded-lg shadow-sm ${index%2==0 ? 'bg-red-200/50' : 'bg-sky-300/50'}`}>
+                  <div >
 
-              </div>
-            </Link>
-          ))}
-        </div>
-        
-        <div className="my-4">
-          <h1 className="my-4 text-26 font-bold text-dark-gray dark:text-white tracking-wide">Resources</h1>
-          <div className="w-full grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4">
-            {[1,2,3,4,5].map((item, index) => (
-              <Link to='/' className={`h-40 rounded-lg shadow-sm ${index%2==0 ? 'bg-red-200/50' : 'bg-sky-300/50'}`}>
-                <div >
-
-                </div>
-              </Link>
-            ))}
+                  </div>
+                </Link>
+              ))}
+            </div>
           </div>
-        </div>
+        </>
+        }
 
         {familyOffers?.result_list && familyOffers?.result_list.length > 0 && (
           <MyOffersFamilyTable
diff --git a/src/lib/apiConst.js b/src/lib/apiConst.js
index dade843..58f3375 100644
--- a/src/lib/apiConst.js
+++ b/src/lib/apiConst.js
@@ -132,6 +132,7 @@ export const apiConst = {
 
     WRENCHBOARD_ACCOUNT_HOMEBANNERS:   11200,
     WRENCHBOARD_ACCOUNT_PLAYGROUND:    11201,
+    WRENCHBOARD_ACCOUNT_FAMILY_BANNERS: 22005,
 
     WRENCHBOARD_ACCOUNT_RECENTS:       11202,
     WRENCHBOARD_ACCOUNT_NOTIFICATIONS: 11205,
diff --git a/src/services/UsersService.js b/src/services/UsersService.js
index bbc858c..1ed6f1c 100644
--- a/src/services/UsersService.js
+++ b/src/services/UsersService.js
@@ -1249,6 +1249,19 @@ class usersService {
     };
     return this.postAuxEnd("/familyrelinvite", postData);
   }
+  
+  // API FUNCTION TO FAMILY BANNERS
+  getFamilyBannersList() {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_ACCOUNT_FAMILY_BANNERS,
+      limit: 20,
+      offset: 1
+    };
+    return this.postAuxEnd("/familybanners", postData);
+  }
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)