From 73f3f907376e4c3554ddc3965502484b3716f1dd Mon Sep 17 00:00:00 2001
From: eric <erotush77@gmail.com>
Date: Tue, 27 Feb 2024 18:20:56 +0300
Subject: [PATCH] Updated facilities page UI for small screen view port

---
 components/FacilitySideMenu.js |   5 +-
 components/HeaderLayout.js     |  42 ++--
 components/MainLayout.js       |  12 +-
 package.json                   |   2 +-
 pages/community-units/index.js | 437 +++++++++++++++++----------------
 pages/dashboard/index.js       |  26 +-
 pages/facilities/index.js      |  43 ++--
 pages/index.js                 |  10 +-
 8 files changed, 291 insertions(+), 286 deletions(-)

diff --git a/components/FacilitySideMenu.js b/components/FacilitySideMenu.js
index 049ccf44..36408b51 100644
--- a/components/FacilitySideMenu.js
+++ b/components/FacilitySideMenu.js
@@ -193,11 +193,14 @@ function FacilitySideMenu({ states, stateSetters, filters }) {
 
     return (
 
-        <div className='col-span-1 flex flex-col gap-3 md:col-start-1 md:mb-12 py-0 h-full bg-gray-50 shadow-md'>
+        <div className='col-span-1 flex flex-col gap-3 md:col-start-1 md:mb-12 pt-0 h-full rounded bg-gray-50 shadow-md'>
             <List
                 className='p-0 m-0'
                 component="nav"
                 aria-labelledby="nested-list-subheader"
+                style={{
+                    paddingTop: "0px !important"
+                }}
 
             >
                 {/* All Facilities */}
diff --git a/components/HeaderLayout.js b/components/HeaderLayout.js
index cf18fc90..bc202bc6 100644
--- a/components/HeaderLayout.js
+++ b/components/HeaderLayout.js
@@ -189,7 +189,7 @@ export default function HeaderLayout({
         {/* Logo And Title */}
         <div className='w-full fixed z-20 max-h-min bg-gray-100 flex'>
           {/* Heading */}
-          <div className="max-h-min md:w-[80%] w-full container flex md:mx-auto">
+          <div className="max-h-min md:w-[90%] w-full container flex md:mx-auto">
             {/* Heading */}
             <div className='w-full flex md:justify-between md:items-center justify-center py-4 max-h-min '>
               {/* Logo */}
@@ -208,16 +208,16 @@ export default function HeaderLayout({
 
               {/* Login / Logout button */}
               {isLoggedIn ? (
-                <div className="text-lg group hidden  duration-200 hover:rounded ease-in-out hover:border hover:border-blue-800 hover:text-blue-800 md:h-[40px] max-h-min px-3 md:flex gap-x-2 items-center text-blue-800 capitalize font-semibold">
+                <div className="text-lg group hidden  duration-200 hover:rounded ease-in-out hover:border hover:border-gray-800 hover:text-gray-800 md:h-[40px] max-h-min px-3 md:flex gap-x-2 items-center text-blue-800 capitalize font-semibold">
                   <Menu as="div" className="relative p-2" >
                     <Menu.Button
                       as="div"
                       className="flex items-center justify-center gap-1 cursor-pointer"
                     >
                       <span className="leading-none p-0 inline sm:hidden">
-                        <UserCircleIcon className="h-6 w-6 text-blue-800" />
+                        <UserCircleIcon className="h-6 w-6 text-gray-800" />
                       </span>
-                      <span className="leading-none p-0 hidden sm:inline">
+                      <span className="leading-none text-gray-800 p-0 hidden sm:inline">
                         {user.full_name || "My account"}
                       </span>
                       <span className="leading-none p-0">
@@ -234,7 +234,7 @@ export default function HeaderLayout({
                       <Menu.Item as="li" className="flex items-center w-full gap-1">
                         {({ active }) => (
                           <button
-                            className={`w-full text-blue-800 font-medium cursor-pointer flex items-center ${active && "text-blue-400"
+                            className={`w-full text-gray-800 font-medium cursor-pointer flex items-center ${active && "text-blue-400"
                               }`}
                             onClick={() => router.push('/account')}
                           >
@@ -253,7 +253,7 @@ export default function HeaderLayout({
                           <button
                             onClick={() => router.push('/logout')}
                             data-testid="logout"
-                            className={`w-full cursor-pointer flex text-blue-800 font-medium ${active && "text-blue-400"
+                            className={`w-full cursor-pointer flex items-center text-gray-800 font-medium ${active && "text-blue-400"
                               }`}
 
                           >
@@ -411,10 +411,10 @@ export default function HeaderLayout({
                       className="list-none rounded outline-none text-black bg-gray-100 shadow-md flex flex-col items-center justify-start gap-2 md:p-3 py-3 absolute mt-3  right-0  w-40 "
                     >
 
-                      <Menu.Item as="li" className="flex items-center w-full gap-1">
+                      <Menu.Item as="li" className="flex items-center px-3 w-full gap-1">
                         {({ active }) => (
                           <button
-                            className={`w-full text-blue-600 font-medium cursor-pointer flex items-center ${active && "text-blue-400"
+                            className={`w-full text-gray-800 font-medium cursor-pointer flex items-center ${active && "text-blue-400"
                               }`}
                             onClick={() => router.push('/account')}
                           >
@@ -427,13 +427,13 @@ export default function HeaderLayout({
                       
                       <Menu.Item
                         as="li"
-                        className={"flex items-center w-full gap-1 mt-2 border-t border-gray-300 py-2"}
+                        className={"flex items-center w-full px-3 gap-1 mt-2 border-t border-gray-300 py-2"}
                       >
                         {({ active }) => (
                           <button
                             onClick={() => router.push('/logout')}
                             data-testid="logout"
-                            className={`w-full cursor-pointer flex text-blue-600 font-medium ${active && "text-blue-400"
+                            className={`w-full cursor-pointer flex items-center text-gray-800 font-medium ${active && "text-blue-400"
                               }`}
 
                           >
@@ -467,12 +467,12 @@ export default function HeaderLayout({
           currentPath !== '/logout' &&
           <div style={{ backgroundColor: '#1651b6' }} className='w-full hidden top-[97px] fixed z-10  max-h-min md:flex justify-center'>
             {/* Wide view Port Nav bar */}
-            <nav className="hidden max-h-min md:w-full lg:w-[60%] container md:flex mx-auto ">
+            <nav className="hidden max-h-min md:w-full lg:w-[90%] container md:flex mx-auto ">
               <ul className='list-none w-full flex items-center  justify-between '>
               {
                   userID == 6 &&
                   !isLoggedIn &&
-                  <li className={`text-lg h-[80px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 `}>
+                  <li className={`text-lg h-[60px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 `}>
                     <Link href='/'>Home</Link>
                   </li>
                 }
@@ -481,21 +481,21 @@ export default function HeaderLayout({
                   userID !== 6 &&
                   isLoggedIn &&
 
-                  <li className={`text-lg h-[80px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/dashboard" && 'border-b-2 border-b-gray-50 bg-blue-500/85'} `}>
+                  <li className={`text-lg h-[60px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/dashboard" && 'border-b-2 border-b-gray-50 bg-blue-500/85'} `}>
                     <Link href='/dashboard'>Dashboard</Link>
                   </li>
                 }
 
                 {
                   userID &&
-                <li className={`text-lg h-[80px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/facilities" && 'border-b-2 border-b-gray-50 bg-blue-500/85'} ${currentPath == "/public/facilities" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
+                <li className={`text-lg h-[60px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/facilities" && 'border-b-2 border-b-gray-50 bg-blue-500/85'} ${currentPath == "/public/facilities" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
                   <Link href={`${userID !== 6 && isLoggedIn ? '/facilities' : '/public/facilities'}`}>Facilities</Link>
                 </li>
                 }
 
                 {
                   userID &&
-                <li className={`text-lg h-[80px]  flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/community-units" && 'border-b-2 border-b-gray-50 bg-blue-500/85'} ${currentPath == "/public/chu" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
+                <li className={`text-lg h-[60px]  flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/community-units" && 'border-b-2 border-b-gray-50 bg-blue-500/85'} ${currentPath == "/public/chu" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
                   <Link href={`${userID !== 6 && isLoggedIn ? '/community-units' : '/public/chu'}`}>Community Units</Link>
                 </li>
                 }
@@ -503,7 +503,7 @@ export default function HeaderLayout({
                 {
                   userID == 6 &&
                   !isLoggedIn &&
-                  <li className={`text-lg h-[80px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/public/about" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
+                  <li className={`text-lg h-[60px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/public/about" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
                     <Link href='/public/about'>About</Link>
                   </li>
                 }
@@ -511,7 +511,7 @@ export default function HeaderLayout({
 
                 {
                   userID == 6 &&
-                  <li className={`text-lg h-[80px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/public/faqs" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
+                  <li className={`text-lg h-[60px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/public/faqs" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
                   <Link href='/public/faqs'>FAQs</Link>
 
                   </li>
@@ -522,7 +522,7 @@ export default function HeaderLayout({
                     groupID == 1) &&
                   userID !== 6 &&
                   isLoggedIn &&
-                  <li className={`text-lg h-[80px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/user" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
+                  <li className={`text-lg h-[60px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/user" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
                     <Link href='/user'>Users</Link>
                   </li>
                 }
@@ -536,7 +536,7 @@ export default function HeaderLayout({
                       groupID == 5)
                   ) &&
                   isLoggedIn &&
-                  <li className={`text-lg h-[80px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/system_setup" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
+                  <li className={`text-lg h-[60px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/system_setup" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
                     <Link href='/system_setup'>System Setup</Link>
                   </li>
                 }
@@ -545,7 +545,7 @@ export default function HeaderLayout({
                   userID !== 6 &&
                   groupID !== 3 &&
                   isLoggedIn &&
-                  <li className={`text-lg h-[80px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/reports" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
+                  <li className={`text-lg h-[60px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/reports" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
                     <Link href='/reports'>Reports</Link>
                   </li>
                 }
@@ -556,7 +556,7 @@ export default function HeaderLayout({
                   (groupID == 7 ||
                     groupID == 5) &&
                   isLoggedIn &&
-                  <li className={`text-lg h-[80px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/admin_offices" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
+                  <li className={`text-lg h-[60px] flex text-center justify-center items-center group-hover:border-b-2 group-hover:border-b-gray-50 duration-200 ease-out hover:bg-blue-500/85 px-4 font-semibold capitalize text-gray-100 ${currentPath == "/admin_offices" && 'border-b-2 border-b-gray-50 bg-blue-500/85'}`}>
                     <Link href='/admin_offices'>Admin Offices</Link>
                   </li>
                 }
diff --git a/components/MainLayout.js b/components/MainLayout.js
index 29a63373..f66274b3 100644
--- a/components/MainLayout.js
+++ b/components/MainLayout.js
@@ -87,8 +87,10 @@ export default function MainLayout({ children, isLoading, searchTerm, isFullWidt
 
             </div> */}
             <HeaderLayout {...searchTerm} />
+            {/* 
+            + (isFullWidth ? "" : "max-w-screen-2xl") + (classes && classes.length > 0 ? classes.join(" ") : "") */}
 
-            <div className={"h-full w-full flex flex-col py-5 items-center " + (isFullWidth ? "" : "max-w-screen-2xl") + (classes && classes.length > 0 ? classes.join(" ") : "")}>
+            <div className={"h-full w-full flex flex-col py-5 items-center " }>
                
                 { children }
                 <Analytics />
@@ -99,7 +101,7 @@ export default function MainLayout({ children, isLoading, searchTerm, isFullWidt
           <div className="w-full flex flex-col mt-12 h-auto">
             <div className="w-full max-h-min py-8  bg-gray-500">
               <div className="flex flex-col gap-4 items-between">
-                <div className="md:w-[60%] w-full md:mx-auto flex justify-between p-4 md:p-0">
+                <div className="md:w-[90%] w-full md:mx-auto flex justify-between p-4 md:p-0">
                   <div className="flex flex-col text-gray-200 md:gap-2 gap-1">
                     <h2 className='text-blue-50 font-semibold mb-2 '>Contacts</h2>
                     <Link href="tel:+254 20 2717077" className="t">+254-20-2717077</Link>
@@ -159,10 +161,10 @@ export default function MainLayout({ children, isLoading, searchTerm, isFullWidt
 
             </div>
 
-            <div className="w-full max-h-min py-5  bg-gray-700">
-              <div className='md:w-[60%] w-full md:mx-auto max-h-min flex flex-col justify-center md:flex md:justify-between items-center md:py-4 md:px-0 text-center p-2'>
+            <div className="w-full max-h-min py-5 md:py-2  bg-gray-700">
+              <div className='md:w-[90%] w-full md:mx-auto max-h-min flex flex-col justify-center md:flex md:justify-between items-center md:py-4 md:px-0 text-center p-2'>
                 <p className='text-gray-400'>&copy; Copyright {new Date().getFullYear()}. All Rights Reserved. Republic of Kenya, Ministry of Health</p>
-                <p className='text-gray-400'>Version 3.0.1</p>
+                <p className='text-gray-400'>Version 3.0.0</p>
               </div>
             </div>
           </div>
diff --git a/package.json b/package.json
index 8ce7a407..5ffaae99 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kmhfr",
-  "version": "1.0.0",
+  "version": "3.0.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/pages/community-units/index.js b/pages/community-units/index.js
index 67f36479..49d18c1b 100644
--- a/pages/community-units/index.js
+++ b/pages/community-units/index.js
@@ -19,6 +19,7 @@ import { SearchIcon } from '@heroicons/react/outline'
 
 
 function CommunityUnit (props) {
+
 	const userCtx = React.useContext(UserContext);
 	const [user, setUser] = useState(userCtx);
 	const router = useRouter();
@@ -65,31 +66,31 @@ function CommunityUnit (props) {
 			</Head>
 
 			<MainLayout isLoading={false} searchTerm={props?.query?.searchTerm}>
-				<div className='w-full grid grid-cols-5 gap-4 py-2 my-4'>
+				<div className='w-full md:w-[85%] md:mx-auto grid grid-cols-1 md:grid-cols-5 gap-4 py-2 px-4 md:px-0 my-4'>
 					<div className='col-span-5 flex flex-col  md:gap-5 '>
 						<div className='flex flex-wrap items-center justify-between gap-2 text-sm md:text-base py-3'>
 							{/* Bread Crumbs */}
 
-							<div className='flex flex-row gap-2 text-sm md:text-base py-3'>
+							{/* <div className='flex flex-row gap-2 text-sm md:text-base py-3'>
 								<Link className='text-blue-700' href='/'>
 									Home
 								</Link>
 								{'/'}
 								<span className='text-gray-500'>Community Units</span>
-							</div>
+							</div> */}
 
 
-						<div className={"col-span-5 flex justify-between w-full bg-django-blue border drop-shadow  text-black p-4 md:divide-x md:divide-gray-200 items-center border-l-8 " + (true ? "border-blue-700" : "border-red-600")}>
+						<div className={"col-sapn-1 md:col-span-5 flex flex-col items-start md:flex-row md:justify-between w-full bg-django-blue border drop-shadow  text-black p-4 md:divide-x md:divide-gray-200 md:items-center border-l-8 " + (true ? "border-blue-700" : "border-red-600")}>
 							<h2 className='flex items-center text-xl font-bold text-black capitalize gap-2'>
 								{'Community Health Units'}
 							</h2>
 
 							{props?.current_url && props?.current_url.length > 5 && (
 								<Menu as='div' className='relative'>
-									<div className='flex items-center space-x-6 w-auto '>
+									<div className='flex mt-4 md:mt-0 flex-col items-start md:flex-row md:items-center gap-3 md:gap-0 md:space-x-6 w-auto '>
 										<Menu.Item
 											as='div'
-											className='px-4 py-2 bg-blue-700 text-white text-sm tracking-tighter font-semibold whitespace-nowrap  hover:bg-black focus:bg-black active:bg-black uppercase'>
+											className='px-4 py-2 bg-gray-600 rounded text-white text-sm tracking-tighter font-semibold whitespace-nowrap  hover:bg-black focus:bg-black active:bg-black uppercase'>
 											<button
 												onClick={() => {
 													router.push('/community-units/add');
@@ -102,12 +103,13 @@ function CommunityUnit (props) {
 
 										<Menu.Button
 											as='button'
-											className='px-4 py-2 bg-blue-700 text-white text-sm tracking-tighter font-medium flex items-center justify-center whitespace-nowrap  hover:bg-black focus:bg-black active:bg-black uppercase'>
+											className='px-4 py-2 bg-gray-600 rounded text-white text-sm tracking-tighter font-medium flex items-center justify-center whitespace-nowrap  hover:bg-black focus:bg-black active:bg-black uppercase'>
 											<DownloadIcon className='w-5 h-5 mr-1' />
 											<span className='text-base uppercase font-semibold'>Export</span>
 											<ChevronDownIcon className='w-4 h-4 ml-2' />
 										</Menu.Button>
 									</div>
+
 									<Menu.Items
 										as='ul'
 										className='absolute top-10 left-0 flex flex-col gap-y-1 items-center justify-start bg-white  shadow-lg border border-gray-200 p-1 w-full'>
@@ -200,228 +202,229 @@ function CommunityUnit (props) {
 					</div>
 					
 				 </div>
-					<div className='w-full grid grid-cols-5 gap-3 mb-12 place-content-start  border-gray-300'>
-							{/* Side Menu Filters*/}
 
-							<CommunityUnitSideMenu
-							qf={qf}
-							filters={filters}
-							_pathId={props?.path.split('id=')[1]}
-							/>
-
-							{/* Main body */}
-							
-							<div className="w-full md:col-span-4 mr-24 md:col-start-2 col-span-5 md:h-auto bg-gray-50 shadow-md">
-								 {/* Data Indicator section */}
-								   {/* Data Indicator section */}
-								   <div className='w-full p-2 flex justify-between border-b border-blue-600'>
-                                        {/* search input */}
-                                    
-                                        <Formik
-                                        initialValues={
-                                            {
-                                                q:""
-                                            }
-                                        }
-                                            onSubmit={(values) => {
-
-                                                const query = values.q.split(' ').join('+');
-                                                
-
-                                                // console.log({values})
-                                                switch((new URL(window.location.href))?.searchParams.get('qf')){
-                                                    case "all":
-                                                        router.push(`/community-units/?q=${query}&qf=all`)
-                                                        break;
-                                                    case "approved":
-                                                        router.push(`/community-units/?q=${query}&qf=approved&is_approved=true`)
-                                                        break;
-                                                    case "new_pending_approval":
-                                                        router.push(`/community-units/?q=${query}&qf=new_pending_approval&has_edits=false&pending_approval=true`)
-                                                        break;
-                                                    case "updated_pending_approval":
-                                                        router.push(`/community-units/?q=${query}&qf=updated_pending_approval&has_edits=true&is_approved=true`)
-                                                        break;
-                                                    default:
-                                                        router.push(`/community-units/?q=${query}&qf=is_rejected&is_rejected=true`)
-                                                        break;
-
-                                                
-                                                }
-
-                                            }}  
-                                        >
-
-                                        <Form
-                                        className="inline-flex flex-row justify-start flex-grow py-2 lg:py-0"
-                                        
-                                    >
-                                            
-                                        <Field
-                                        name="q"
-                                        id="search-input"
-                                        className="flex-none bg-transparent p-2 w-3/5 md:flex-grow-0 flex-grow shadow-sm border border-blue-600 placeholder-gray-600  focus:shadow-none focus:ring-black focus:border-black outline-none"
-                                        type="search"
-                                        
-                                        placeholder="Search a facility"
-                                        />
-                                        <button
-                                        type="submit"
-                                        className="bg-transparent border-t border-r border-b border-blue-600 text-black flex items-center justify-center px-4 py-1"
-                                        
-                                        >
-                                        <SearchIcon className="w-5 h-5 text-blue-600" />
-                                        </button>
-                                    </Form>
-                                    </Formik>
-
-                                        <h5 className="text-lg font-medium text-gray-800 pr-2">      
-                                            {props?.data?.count && props?.data?.count > 0 && <small className="text-gray-500 text-base">{props?.data?.start_index ?? ''} - {props?.data?.end_index ?? ''} of {props?.data?.count ?? ''} </small>}
-                                        </h5>
-                                    </div>
-                                  
-								<div className='flex-grow w-full flex flex-col items-center gap-1 order-last md:order-none'>
+				<div className='w-full md:w-[85%] md:mx-auto grid grid-cols-1 md:grid-cols-5 gap-3 mb-12 place-content-start px-4 md:px-0 border-gray-300'>
+						{/* Side Menu Filters*/}
+
+						<CommunityUnitSideMenu
+						qf={qf}
+						filters={filters}
+						_pathId={props?.path.split('id=')[1]}
+						/>
+
+						{/* Main body */}
+						
+						<div className="w-full md:col-span-4 mr-24 md:col-start-2 col-span-5 md:h-auto bg-gray-50 shadow-md">
+								{/* Data Indicator section */}
+								{/* Data Indicator section */}
+								<div className='w-full p-2 flex justify-between border-b border-blue-600'>
+									{/* search input */}
 								
-									<div className="flex flex-col justify-center items-center w-full">
+									<Formik
+									initialValues={
+										{
+											q:""
+										}
+									}
+										onSubmit={(values) => {
+
+											const query = values.q.split(' ').join('+');
+											
+
+											// console.log({values})
+											switch((new URL(window.location.href))?.searchParams.get('qf')){
+												case "all":
+													router.push(`/community-units/?q=${query}&qf=all`)
+													break;
+												case "approved":
+													router.push(`/community-units/?q=${query}&qf=approved&is_approved=true`)
+													break;
+												case "new_pending_approval":
+													router.push(`/community-units/?q=${query}&qf=new_pending_approval&has_edits=false&pending_approval=true`)
+													break;
+												case "updated_pending_approval":
+													router.push(`/community-units/?q=${query}&qf=updated_pending_approval&has_edits=true&is_approved=true`)
+													break;
+												default:
+													router.push(`/community-units/?q=${query}&qf=is_rejected&is_rejected=true`)
+													break;
+
+											
+											}
+
+										}}  
+									>
+
+									<Form
+									className="inline-flex flex-row justify-start flex-grow py-2 lg:py-0"
 									
-										{cus && cus.length > 0 ? (
-										cus.map((comm_unit, index) => (
-											<div
-												key={comm_unit.id}
-												className='grid grid-cols-8 gap-2 border-b border-gray-400 py-4 hover:bg-gray-50 w-full'>
-												<div className='px-2 col-span-8 md:col-span-8 lg:col-span-6 flex flex-col group items-center justify-start text-left'>
-													<h3 className='text-2xl  font-semibold w-full'>
-														<a
-															href={'/community-units/' + comm_unit.id}
-															className='cursor-pointer hover:text-blue-600 group-focus:text-blue-800 active:text-blue-800 '>
-															
-															{comm_unit.official_name ||
-																comm_unit.official_name ||
-																comm_unit.name}
-														</a>
-													</h3>
-
-													<div className="w-full grid grid-cols-4 gap-1">
-															<div className="flex flex-col items-start justify-start gap-0 leading-none whitespace-pre-wrap mb-2">
-                                                                <label className="text-xs text-gray-500 ">Code:</label>
-                                                                <span className="whitespace-pre-line font-semibold"># {comm_unit.code ? comm_unit.code : 'NO_CODE' || ' '}</span>
-                                                            </div>
-                                                          
-                                                            <div className="flex flex-col col-span-2 items-start justify-start gap-0 leading-none whitespace-pre-wrap">
-                                                                <label className="text-xs text-gray-500">Linked Facility:</label>
-                                                                <span className="whitespace-pre-line">{comm_unit.facility_name ?? ' '}</span>
-                                                            </div>
-													</div>
-
-													<div className="text-base grid grid-cols-2 md:grid-cols-4 items-center justify-start gap-3 w-full">
-                                                            <div className="flex flex-col items-start justify-start gap-0 leading-none whitespace-pre-wrap">
-                                                                <label className="text-xs text-gray-500">County:</label>
-                                                                <span className="whitespace-pre-line">{comm_unit.facility_county ||
-																	comm_unit.county ||
-																	'N/A'}
-																	</span>
-                                                            </div>
-                                                            <div className="flex flex-col items-start justify-start gap-0 leading-none whitespace-pre-wrap">
-                                                                <label className="text-xs text-gray-500">Sub-county:</label>
-                                                                <span className="whitespace-pre-line">{comm_unit.facility_subcounty ||
-																	comm_unit.sub_county ||
-																	'N/A'}</span>
-                                                            </div>
-                                                            <div className="flex flex-col items-start justify-start gap-0 leading-none whitespace-pre-wrap">
-                                                                <label className="text-xs text-gray-500">Ward:</label>
-                                                                <span className="whitespace-pre-line">{comm_unit.facility_ward || 'N/A'}</span>
-                                                            </div>
-                                                            <div className="flex flex-col items-start justify-start gap-0 leading-none whitespace-pre-wrap">
-                                                                <label className="text-xs text-gray-500">Constituency:</label>
-                                                                <span className="whitespace-pre-line">{comm_unit.constituency_name ||
-																	comm_unit.facility_constituency ||
-																	'N/A'}</span>
-                                                            </div>
-                                                    </div>
+								>
+										
+									<Field
+									name="q"
+									id="search-input"
+									className="flex-none bg-transparent p-2 w-3/5 md:flex-grow-0 flex-grow shadow-sm border border-blue-600 placeholder-gray-600  focus:shadow-none focus:ring-black focus:border-black outline-none"
+									type="search"
+									
+									placeholder="Search a facility"
+									/>
+									<button
+									type="submit"
+									className="bg-transparent border-t border-r border-b border-blue-600 text-black flex items-center justify-center px-4 py-1"
+									
+									>
+									<SearchIcon className="w-5 h-5 text-blue-600" />
+									</button>
+								</Form>
+								</Formik>
+
+									<h5 className="text-lg font-medium text-gray-800 pr-2">      
+										{props?.data?.count && props?.data?.count > 0 && <small className="text-gray-500 text-base">{props?.data?.start_index ?? ''} - {props?.data?.end_index ?? ''} of {props?.data?.count ?? ''} </small>}
+									</h5>
+								</div>
+								
+							<div className='flex-grow w-full flex flex-col items-center gap-1 order-last md:order-none'>
+							
+								<div className="flex flex-col justify-center items-center w-full">
+								
+									{cus && cus.length > 0 ? (
+									cus.map((comm_unit, index) => (
+										<div
+											key={comm_unit.id}
+											className='grid grid-cols-8 gap-2 border-b border-gray-400 py-4 hover:bg-gray-50 w-full'>
+											<div className='px-2 col-span-8 md:col-span-8 lg:col-span-6 flex flex-col group items-center justify-start text-left'>
+												<h3 className='text-2xl  font-semibold w-full'>
+													<a
+														href={'/community-units/' + comm_unit.id}
+														className='cursor-pointer hover:text-blue-600 group-focus:text-blue-800 active:text-blue-800 '>
+														
+														{comm_unit.official_name ||
+															comm_unit.official_name ||
+															comm_unit.name}
+													</a>
+												</h3>
+
+												<div className="w-full grid grid-cols-4 gap-1">
+														<div className="flex flex-col items-start justify-start gap-0 leading-none whitespace-pre-wrap mb-2">
+															<label className="text-xs text-gray-500 ">Code:</label>
+															<span className="whitespace-pre-line font-semibold"># {comm_unit.code ? comm_unit.code : 'NO_CODE' || ' '}</span>
+														</div>
+														
+														<div className="flex flex-col col-span-2 items-start justify-start gap-0 leading-none whitespace-pre-wrap">
+															<label className="text-xs text-gray-500">Linked Facility:</label>
+															<span className="whitespace-pre-line">{comm_unit.facility_name ?? ' '}</span>
+														</div>
 												</div>
 
-													<div className="col-span-8 md:col-span-8 lg:col-span-2 grid grid-cols-2 grid-rows-4 gap-x-2 gap-y-1 text-lg">
-                                                        {comm_unit.status_name && <span className={"shadow-sm col-start-2 leading-none whitespace-nowrap text-sm  py-1 px-2 bg-blue-200 font-semibold text-gray-900"}>{comm_unit.status_name}</span>}
-                                                        {comm_unit.has_edits && <span className={"shadow-sm leading-none whitespace-nowrap text-sm col-start-2 py-1 px-2 bg-blue-200 font-semibold text-gray-900"}>Has edits</span>}
-														{/* {!comm_unit.rejected ? <span className={"leading-none whitespace-nowrap text-sm  text-black py-1 px-2 " + (comm_unit.approved ? "bg-blue-200 text-black" : "bg-gray-400 text-black")}>{comm_unit.approved ? "Approved" : "Not approved"}</span> : <span className={"leading-none whitespace-nowrap text-sm  text-black py-1 px-2 " + "bg-gray-400 text-black"}>{comm_unit.rejected ? "Rejected" : ""}</span>} */}
-                                                    </div>
-									
+												<div className="text-base grid grid-cols-2 md:grid-cols-4 items-center justify-start gap-3 w-full">
+														<div className="flex flex-col items-start justify-start gap-0 leading-none whitespace-pre-wrap">
+															<label className="text-xs text-gray-500">County:</label>
+															<span className="whitespace-pre-line">{comm_unit.facility_county ||
+																comm_unit.county ||
+																'N/A'}
+																</span>
+														</div>
+														<div className="flex flex-col items-start justify-start gap-0 leading-none whitespace-pre-wrap">
+															<label className="text-xs text-gray-500">Sub-county:</label>
+															<span className="whitespace-pre-line">{comm_unit.facility_subcounty ||
+																comm_unit.sub_county ||
+																'N/A'}</span>
+														</div>
+														<div className="flex flex-col items-start justify-start gap-0 leading-none whitespace-pre-wrap">
+															<label className="text-xs text-gray-500">Ward:</label>
+															<span className="whitespace-pre-line">{comm_unit.facility_ward || 'N/A'}</span>
+														</div>
+														<div className="flex flex-col items-start justify-start gap-0 leading-none whitespace-pre-wrap">
+															<label className="text-xs text-gray-500">Constituency:</label>
+															<span className="whitespace-pre-line">{comm_unit.constituency_name ||
+																comm_unit.facility_constituency ||
+																'N/A'}</span>
+														</div>
+												</div>
+											</div>
+
+												<div className="col-span-8 md:col-span-8 lg:col-span-2 grid grid-cols-2 grid-rows-4 gap-x-2 gap-y-1 text-lg">
+													{comm_unit.status_name && <span className={"shadow-sm col-start-2 leading-none whitespace-nowrap text-sm  py-1 px-2 bg-blue-200 font-semibold text-gray-900"}>{comm_unit.status_name}</span>}
+													{comm_unit.has_edits && <span className={"shadow-sm leading-none whitespace-nowrap text-sm col-start-2 py-1 px-2 bg-blue-200 font-semibold text-gray-900"}>Has edits</span>}
+													{/* {!comm_unit.rejected ? <span className={"leading-none whitespace-nowrap text-sm  text-black py-1 px-2 " + (comm_unit.approved ? "bg-blue-200 text-black" : "bg-gray-400 text-black")}>{comm_unit.approved ? "Approved" : "Not approved"}</span> : <span className={"leading-none whitespace-nowrap text-sm  text-black py-1 px-2 " + "bg-gray-400 text-black"}>{comm_unit.rejected ? "Rejected" : ""}</span>} */}
 												</div>
 								
-										
-										))
-										) : (
-											<div className='w-[98%] flex my-4  rounded border border-yellow-600 items-center justify-start gap-2 bg-yellow-100  font-medium p-3'>
-												<span className='text-base text-gray-700'>
-													No community units found
-												</span>
-												<Link href={props.path || '/'}>
-													<a className='text-blue-700 hover:text-blue-800 group-focus:text-blue-800 active:text-blue-800'>
-														Refresh.
-													</a>
-												</Link>
 											</div>
-										)}
-										{cus && cus.length >= 30 && (
-											<ul className='list-none flex p-2 flex-row justify-end gap-2 w-full items-center my-2'>
-												<li className='text-base text-blue-500 cursor-pointer'>
-					
-													<a
-														href={
-															(() => 
-															props.path.includes('?page') ?
-															props.path.replace(/\?page=\d+/,`?page=${props?.data?.current_page}`)
-															:
-															props.path.includes('?q') && props.path.includes('&page') ?
-															props.path.replace(/&page=\d+/, `&page=${props?.data?.current_page}`)
-															:
-															props.path.includes('?q') ?
-															`${props.path}&page=${props?.data?.current_page}`                                    
-															:
-															`${props.path}?page=${props?.data?.current_page}`
-														)()
-														}
-														className='text-white  bg-blue-600 cursor-pointer font-semibold px-2 py-1 underline'>
-														{props?.data?.current_page}
-													</a>
-												</li>
-												{props?.data?.near_pages &&
-													props?.data?.near_pages.map((page) => (
-														<li key={page} className='text-base group text-blue-500'>
-
-															<a
-																href={
-																	(() => 
-																		props.path.includes('?page') ?
-																		props.path.replace(/\?page=\d+/,`?page=${page}`)
-																		:
-																		props.path.includes('?q') && props.path.includes('&page') ?
-																		props.path.replace(/&page=\d+/, `&page=${page}`)
-																		:
-																		props.path.includes('?q') ?
-																		`${props.path}&page=${page}`
-																		:
-																		`${props.path}?page=${page}`
 							
-																	)()
-																}
-																className='text-blue-800 p-2 hover:underline active:underline focus:underline'>
-																{page}
-															</a>
-														</li>
-													))}
-												<li className='text-sm text-gray-400 flex'>
-													<DotsHorizontalIcon className='h-3' />
-												</li>
-												
-											</ul>
-										)}
-									</div>
+									
+									))
+									) : (
+										<div className='w-[98%] flex my-4  rounded border border-yellow-600 items-center justify-start gap-2 bg-yellow-100  font-medium p-3'>
+											<span className='text-base text-gray-700'>
+												No community units found
+											</span>
+											<Link href={props.path || '/'}>
+												<a className='text-blue-700 hover:text-blue-800 group-focus:text-blue-800 active:text-blue-800'>
+													Refresh.
+												</a>
+											</Link>
+										</div>
+									)}
+									{cus && cus.length >= 30 && (
+										<ul className='list-none flex p-2 flex-row justify-end gap-2 w-full items-center my-2'>
+											<li className='text-base text-blue-500 cursor-pointer'>
+				
+												<a
+													href={
+														(() => 
+														props.path.includes('?page') ?
+														props.path.replace(/\?page=\d+/,`?page=${props?.data?.current_page}`)
+														:
+														props.path.includes('?q') && props.path.includes('&page') ?
+														props.path.replace(/&page=\d+/, `&page=${props?.data?.current_page}`)
+														:
+														props.path.includes('?q') ?
+														`${props.path}&page=${props?.data?.current_page}`                                    
+														:
+														`${props.path}?page=${props?.data?.current_page}`
+													)()
+													}
+													className='text-white  bg-blue-600 cursor-pointer font-semibold px-2 py-1 underline'>
+													{props?.data?.current_page}
+												</a>
+											</li>
+											{props?.data?.near_pages &&
+												props?.data?.near_pages.map((page) => (
+													<li key={page} className='text-base group text-blue-500'>
 
+														<a
+															href={
+																(() => 
+																	props.path.includes('?page') ?
+																	props.path.replace(/\?page=\d+/,`?page=${page}`)
+																	:
+																	props.path.includes('?q') && props.path.includes('&page') ?
+																	props.path.replace(/&page=\d+/, `&page=${page}`)
+																	:
+																	props.path.includes('?q') ?
+																	`${props.path}&page=${page}`
+																	:
+																	`${props.path}?page=${page}`
+						
+																)()
+															}
+															className='text-blue-800 p-2 hover:underline active:underline focus:underline'>
+															{page}
+														</a>
+													</li>
+												))}
+											<li className='text-sm text-gray-400 flex'>
+												<DotsHorizontalIcon className='h-3' />
+											</li>
+											
+										</ul>
+									)}
 								</div>
+
 							</div>
-					</div>
-					
+						</div>
+				</div>
+				
 				
 				
 				
diff --git a/pages/dashboard/index.js b/pages/dashboard/index.js
index 9da5ed3f..bb9baf6e 100644
--- a/pages/dashboard/index.js
+++ b/pages/dashboard/index.js
@@ -268,13 +268,13 @@ function Dashboard(props) {
 
                 <MainLayout isLoading={false} searchTerm={props?.query?.searchTerm}>
 
-                    <div className="w-full grid grid-cols-6 gap-4 px-1 md:px-4 py-2 my-4 main" ref={dwn}>
-                        <div className="col-span-6 flex flex-col gap-3 md:gap-5 mb-8 px-2">
+                    <div className="md:w-[85%] md:mx-auto grid grid-cols-6 gap-4 px-4 py-2 my-4 main" ref={dwn}>
+                        <div className="col-span-6 flex flex-col gap-3 md:gap-5 mb-8 ">
                             {/* Debug */}
                         
-                            <div className="no-print flex flex-row gap-2 text-sm md:text-base py-3">
-                                <Link className="text-blue-700" href="/" >Home</Link> {'/'}
-                                <span className="text-gray-600">Dashboard</span>
+                            <div className="no-print flex flex-row gap-2 md:text-base py-3">
+                                {/* <Link className="text-blue-700" href="/" >Home</Link>  */}
+                                <span className="text-gray-600 text-2xl">Dashboard</span> 
 
                             </div>
                             <div className="flex flex-col w-full md:flex-wrap lg:flex-row xl:flex-row gap-1 text-sm md:text-base items-center justify-between">
@@ -305,7 +305,7 @@ function Dashboard(props) {
                                             </>
                                             :
                                             <>
-                                                {groupID !== 7 && groupID !== 5 && <span className='text-gray-500 text-base text-center'> / </span>}
+                                                {groupID !== 7 || groupID !== 5 && <span className='text-gray-500 text-base text-center'> / </span>}
                                                 <small className="text-blue-900 text-base font-semibold">
                                                     {subcounties && subcounties?.subcounties && subcounties?.subcounties.find(ft => ft.id == drillDown?.subcounties)?.name != undefined ? subcounties.subcounties.find(ft => ft.id == drillDown?.subcounties)?.name + " Sub county" : !drillDown?.county && "" || ""}
 
@@ -332,7 +332,7 @@ function Dashboard(props) {
                                         <div className="w-full flex  items-center justify-end space-x-3 ">
                                             <div className="w-full max-w-xs flex flex-col items-start justify-start">
                                                 {/* <label htmlFor='Yearselector' className="text-gray-600 capitalize font-semibold text-sm ml-1">Filter by Year</label> */}
-                                                <Select id="Yearselector" className="w-full max-w-xs border border-blue-600"
+                                                <Select id="Yearselector" className="w-full max-w-xs rounded border border-gray-400"
                                                     options={Years}
                                                     placeholder='Filter by Year'
                                                     data-modal-target="defaultModal" data-modal-toggle="defaultModal"
@@ -484,10 +484,9 @@ function Dashboard(props) {
                                         </div>
 
                                     }
-                                    {user && isquarterOpen &&
+                                    {/* {user && isquarterOpen &&
                                         <div id="quarterdiv" visibility="collapsed" className="w-full flex  items-center justify-end space-x-3">
                                             <div id={quarters} className="w-full max-w-xs flex flex-col items-start justify-start">
-                                                {/* <label htmlFor={quarters} className="text-gray-600 capitalize font-semibold text-sm ml-1">Filter by Quarter</label> */}
 
                                                 <Select id="quarterselector" name={quarters} className="w-full max-w-xs  bg-django-blue border border-blue-600"
                                                     options={quarters}
@@ -595,9 +594,8 @@ function Dashboard(props) {
                                                 />
 
                                             </div>
-                                            {/* ~~~F L T R S~~~ */}
                                         </div>
-                                    }
+                                    } */}
 
                                     {/* filter by organizational units  */}
                                     {/* national */}
@@ -606,7 +604,7 @@ function Dashboard(props) {
                                             Object.keys(filters)?.map(ft => (
                                                 <div key={ft} className="w-full max-w-xs flex flex-col items-start justify-start" id='first'>
                                                     {/* <label htmlFor={ft} className="text-gray-600 capitalize font-semibold text-sm ml-1">{ft.split('_').join(' ')}</label> */}
-                                                    <Select name={ft} defaultValue={drillDown[ft] || "national"} id={ft} className="w-full max-w-xs bg-django-blue border border-blue-600"
+                                                    <Select name={ft} defaultValue={drillDown[ft] || "national"} id={ft} className="w-full max-w-xs rounded border border-gray-400"
                                                         styles={{
                                                             control: (baseStyles) => ({
                                                                 ...baseStyles,
@@ -692,7 +690,7 @@ function Dashboard(props) {
                                             Object.keys(subcounties)?.map(ft => (
                                                 <div key={ft} className="w-full max-w-xs flex flex-col items-start justify-start" id="second">
                                                     {/* <label htmlFor={ft} className="text-gray-600 capitalize font-semibold text-sm ml-1">{ft.split('_').join(' ').replace('ies', 'y')}</label> */}
-                                                    <Select name={ft} id={ft} className="w-full max-w-xs border border-blue-600"
+                                                    <Select name={ft} id={ft} className="w-full max-w-xs border rounded border-gray-400"
                                                         styles={{
                                                             control: (baseStyles) => ({
                                                                 ...baseStyles,
@@ -784,7 +782,7 @@ function Dashboard(props) {
                                                 Object.keys(wards)?.map(ft => (
                                                     <div key={ft} className="w-full max-w-xs flex flex-col items-start justify-start" id="third">
                                                         {/* <label htmlFor={ft} className="text-gray-600 capitalize font-semibold text-sm ml-1">{ft.split('_').join(' ').replace('s', '')}</label> */}
-                                                        <Select name={ft} defaultValue={drillDown[ft] || "Subcounty"} id={ft} className="w-full max-w-xs  bg-django-gree border border-blue-600"
+                                                        <Select name={ft} defaultValue={drillDown[ft] || "Subcounty"} id={ft} className="w-full max-w-xs  rounded border border-gray-400"
                                                             styles={{
                                                                 control: (baseStyles) => ({
                                                                     ...baseStyles,
diff --git a/pages/facilities/index.js b/pages/facilities/index.js
index bb8594e7..722a80f4 100644
--- a/pages/facilities/index.js
+++ b/pages/facilities/index.js
@@ -27,14 +27,12 @@ function FacilityHome (props){
     
     const router = useRouter()
 
-
    
     const facilities = props?.data?.results
     const filters = props?.filters
     let fltrs = filters
     const [drillDown, setDrillDown] = useState({})
     const userCtx = useContext(UserContext);
-    // console.log({userCtx})
 
     // const qf = props?.query?.qf ?? null
     if (filters && typeof filters === "object")
@@ -123,27 +121,26 @@ function FacilityHome (props){
             </Head>
 
             <MainLayout isLoading={false} searchTerm={props?.query?.searchTerm}>
-                <div className="w-full grid grid-cols-5 gap-3 md:mt-3 mb-12">
+                <div className="w-full md:w-[85%] md:mx-auto grid grid-cols-1 md:grid-cols-5 gap-3 md:mt-3 md:mb-12 mb-6 px-4 md:px-0">
 
                     {/* Header Matters */}
-                    <div className="col-span-5 flex flex-col gap-3 ">
+                    <div className="col-sapn-1 md:col-span-5 flex flex-col gap-3 ">
 
                           {/* Buttons section */}
 
                           <div className="flex flex-wrap gap-2 text-sm md:text-base py-3 items-center justify-between">
                           
 
-                            <div className="flex w-full flex-wrap items-center justify-between gap-2 text-sm md:text-base py-1">
+                            <div className="flex w-full flex-wrap items-start md:items-center justify-between gap-2 text-sm md:text-base py-1">
                             {/* Bread Crumbs */}
 
-                            <div className="flex flex-row items-center justify-between gap-2 text-sm md:text-base py-3">
-                                <Link className="text-blue-800" href="/">Home</Link> {'/'}
-                                <span className="text-gray-500">Facilities</span>
-                            </div>
+                            {/* <div className="flex flex-row items-center justify-between gap-2 text-sm md:text-base py-3">
+                                <span className="text-gray-600 text-2xl">Facilities</span> 
+                            </div> */}
 
 
-                                <div className={"col-span-5 flex justify-between w-full bg-django-blue border drop-shadow  text-black p-4 md:divide-x md:divide-gray-200 items-center border-l-8 " + (true ? "border-blue-700" : "border-red-600")}>
-                                    <h2 className='flex items-center text-xl font-bold text-blue-900 capitalize gap-2'>
+                                <div className={"col-span-1 md:col-span-5 flex justify-between w-full bg-django-blue border drop-shadow  text-black p-4 md:divide-x md:divide-gray-200 items-start md:items-center border-l-8 " + (true ? "border-blue-700" : "border-red-600")}>
+                                    <h2 className='flex items-center text-2xl font-bold text-blue-900 capitalize gap-2'>
                                         {title}
                                      </h2>
                                      {/* dropdown options to download data */}
@@ -156,12 +153,12 @@ function FacilityHome (props){
                                     userCtx?.groups[0]?.id == 2 || // SCHRIO
                                     userCtx?.groups[0]?.id == 7    // SuperAdmin
                                     /*allFctsSelected || pathId === 'all'*/) &&
-                                <div className='flex items-center space-x-6 w-auto'>
+                                <div className='flex flex-col gap-5 md:flex-row md:items-center md:space-x-6 w-auto'>
                                     {/* Facility Button */}
                                     {
                                        
                                          // Display add facility button if  user belong to SCHRIO group
-                                   <Menu.Item as="div"  className="px-4 py-2 bg-blue-700 text-white text-md tracking-tighter font-semibold whitespace-nowrap  hover:bg-black focus:bg-black active:bg-black uppercase">
+                                   <Menu.Item as="div"  className="px-3 py-2 bg-gray-600 rounded text-white text-md tracking-tighter font-semibold whitespace-nowrap  hover:bg-black focus:bg-black active:bg-black uppercase">
                                         <button  onClick={() => {router.push('/facilities/add?formId=0')}} className='flex items-center justify-center'>
 
                                             <span className='text-base uppercase font-semibold'>Add Facility</span>
@@ -171,7 +168,7 @@ function FacilityHome (props){
                                     }
 
                                      {/* Export Button */}
-                                     <Menu.Button as="button" className="px-4 py-2 bg-blue-700 text-white text-md tracking-tighter font-semibold flex items-center justify-center whitespace-nowrap  hover:bg-black focus:bg-black active:bg-black uppercase">
+                                     <Menu.Button as="button" className="px-3 py-2 bg-gray-600 rounded text-white text-md tracking-tighter font-semibold flex items-center justify-center whitespace-nowrap  hover:bg-black focus:bg-black active:bg-black uppercase">
                                         <DownloadIcon className="w-5 h-5 mr-1" />
                                         <span className='text-base uppercase font-semibold'>Export</span>
                                         <ChevronDownIcon className="w-4 h-4 ml-2" />
@@ -219,7 +216,8 @@ function FacilityHome (props){
 
                         </div>
 
-                        <div className="flex flex-wrap items-center justify-between gap-2 text-sm md:text-base ">
+                         {/* Hidden */}
+                        <div className="hidden flex-wrap items-center justify-between gap-2 text-sm md:text-base ">
                   
 
                             {/* Accordion Filter */}
@@ -442,9 +440,9 @@ function FacilityHome (props){
                    
                     
                     {/* Main Body */}
-                    <div className="w-full md:col-span-4 mr-24 md:col-start-2 col-span-5 md:h-auto bg-gray-50 shadow-md">
+                    <div className="w-full col-span-1 md:col-span-4 mr-24 md:col-start-2  md:h-auto bg-gray-50 shadow-md">
                                     {/* Data Indicator section */}
-                                    <div className='w-full p-2 flex justify-between border-b border-blue-600'>
+                                    <div className='w-full p-2 flex justify-between items-center border-b border-gray-400'>
                                         {/* search input */}
                                     
                                         <Formik
@@ -508,22 +506,22 @@ function FacilityHome (props){
                                         <Field
                                         name="q"
                                         id="search-input"
-                                        className="flex-none bg-transparent p-2 w-3/5 md:flex-grow-0 flex-grow shadow-sm border border-blue-600 placeholder-gray-600  focus:shadow-none focus:ring-black focus:border-black outline-none"
+                                        className="flex-none bg-transparent p-2 w-3/5 md:flex-grow-0 flex-grow shadow-sm rounded-tl rounded-bl border border-gray-400 placeholder-gray-600  focus:shadow-none focus:ring-black focus:border-black outline-none"
                                         type="search"
                                         
                                         placeholder="Search a facility"
                                         />
                                         <button
                                         type="submit"
-                                        className="bg-transparent border-t border-r border-b border-blue-600 text-black flex items-center justify-center px-4 py-1"
+                                        className="bg-transparent border-t border-r border-b rounded-tr rounded-br border-gray-400 text-black flex items-center justify-center px-4 py-1"
                                         
                                         >
-                                        <SearchIcon className="w-5 h-5 text-blue-600" />
+                                        <SearchIcon className="w-5 h-5 text-gray-600" />
                                         </button>
                                     </Form>
-                                    </Formik>
+                                         </Formik>
 
-                                        <h5 className="text-lg font-medium text-gray-800 pr-2">      
+                                        <h5 className="text-lg font-medium text-gray-800 md:pr-2">      
                                             {props?.data?.count && props?.data?.count > 0 && <small className="text-gray-500 text-base">{props?.data?.start_index ?? ''} - {props?.data?.end_index ?? ''} of {props?.data?.count ?? ''} </small>}
                                         </h5>
                                     </div>
@@ -579,6 +577,7 @@ function FacilityHome (props){
                                                             </div>
                                                         </div>
                                                     </div>
+
                                                     <div className="col-span-8 md:col-span-8 lg:col-span-2 grid grid-cols-2 grid-rows-4 gap-x-2 gap-y-1 text-lg">
                                                         {/* {console.log({facility})} */}
                                                         {/* {(facility?.operational || facility?.operation_status_name) ? <span className={"shadow-sm col-start-2 leading-none whitespace-nowrap text-sm  py-1 px-2 bg-blue-200 font-semibold text-blue-900"}>Operational</span> : ""} */}
diff --git a/pages/index.js b/pages/index.js
index b38c85f1..0e7a9cc4 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -174,19 +174,19 @@ function Home(props) {
             {/* Menu Heading */}
             <nav className="hidden max-h-min w-[60%] container md:flex mx-auto ">
               <ul className='list-none w-full flex items-center  justify-between '>
-               <li className={`text-lg h-[65px] flex items-center  hover:text-gray-100  duration-200 ease-out hover:bg-blue-800 px-4 ${router.asPath == "/" && 'border-b-2 text-gray-100 border-b-gray-50 bg-blue-800/85'} font-semibold capitalize text-blue-900 `}>
+               <li className={`text-lg h-[60px] flex items-center  hover:text-gray-100  duration-200 ease-out hover:bg-blue-800 px-4 ${router.asPath == "/" && 'border-b-2 text-gray-100 border-b-gray-50 bg-blue-800/85'} font-semibold capitalize text-blue-900 `}>
                   <Link href="/">Home</Link>
                 </li>
-                <li className='text-lg h-[65px] flex items-center  hover:text-gray-100  duration-200 ease-out hover:bg-blue-800 px-4 font-semibold capitalize text-blue-900 '>
+                <li className='text-lg h-[60px] flex items-center  hover:text-gray-100  duration-200 ease-out hover:bg-blue-800 px-4 font-semibold capitalize text-blue-900 '>
                   <Link href='/public/facilities'>Facilities</Link>
                 </li>
-                <li className='text-lg h-[65px] flex items-center  hover:text-gray-100  duration-200 ease-out hover:bg-blue-800 px-4 font-semibold capitalize text-blue-900 '>
+                <li className='text-lg h-[60px] flex items-center  hover:text-gray-100  duration-200 ease-out hover:bg-blue-800 px-4 font-semibold capitalize text-blue-900 '>
                   <Link href='/public/chu'>Community Units</Link>
                 </li>
-                <li className='text-lg h-[65px] flex items-center  hover:text-gray-100  duration-200 ease-out hover:bg-blue-800 px-4 font-semibold capitalize text-blue-900 '>
+                <li className='text-lg h-[60px] flex items-center  hover:text-gray-100  duration-200 ease-out hover:bg-blue-800 px-4 font-semibold capitalize text-blue-900 '>
                   <Link href="/public/about">About</Link>
                 </li>
-                <li className='text-lg h-[65px] flex items-center  hover:text-gray-100  duration-200 ease-out hover:bg-blue-800 px-4 font-semibold capitalize text-blue-900 '>
+                <li className='text-lg h-[60px] flex items-center  hover:text-gray-100  duration-200 ease-out hover:bg-blue-800 px-4 font-semibold capitalize text-blue-900 '>
                   <Link href="/public/faqs">FAQs</Link>
                 </li>