diff --git a/CustomerWebApp/src/assets/icons/LogoHorizontal.js b/CustomerWebApp/src/assets/icons/LogoHorizontal.js
index a6bbcc7..ac53f7a 100644
--- a/CustomerWebApp/src/assets/icons/LogoHorizontal.js
+++ b/CustomerWebApp/src/assets/icons/LogoHorizontal.js
@@ -2,12 +2,24 @@ import * as React from "react";
 
 function LogoHorizontal(props) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 175.496 41.29" {...props}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 175.496 41.29"
+      {...props}
+    >
       <path
         fill={props.color || "#febb2c"}
         d="M21.928 41.291a49.48 49.48 0 01-2.1-.063C9.102 40.694.396 32.181.011 21.847a21.267 21.267 0 014.8-14.488A21 21 0 0118.188.119a16.847 16.847 0 012.315-.114h.141q4.89-.005 9.78 0h9.3a2.7 2.7 0 012.319 1.3 2.689 2.689 0 01.1 2.649l-1.129 2.183-1.786 3.441c-2.262 4.356-4.6 8.86-6.866 13.305a3.63 3.63 0 01-3.555 2.228h-.074c-2.91-.031-6.011-.046-10.054-.046q-2.649 0-5.3.005H9.791a15.76 15.76 0 001.361 2.475 11.264 11.264 0 009.4 4.859c.867.018 1.784.026 2.888.026h1.407a1.607 1.607 0 011.37.767 1.608 1.608 0 01.058 1.575l-2.909 5.647a1.607 1.607 0 01-1.428.871zm-7.491-25.1c3.589 0 7.438-.005 11.328-.047a1.444 1.444 0 00.156-.227c1.028-1.89 2.03-3.841 3-5.727l.678-1.318-1.329-.008c-1.24-.008-2.461-.015-3.671-.015-1.878 0-3.416.018-4.837.06a10.716 10.716 0 00-6.841 2.834 11.175 11.175 0 00-3.171 4.446z"
       />
-      <text fill="#0b0b0b" fontSize={32} fontStyle="italic" fontWeight={700} transform="translate(50.496 32)">
+      <text
+        fill="#0b0b0b"
+        fontSize={32}
+        fontStyle="italic"
+        fontWeight={700}
+        transform="translate(50.496 32)"
+      >
         <tspan x={0} y={0}>
           {"enatega"}
         </tspan>
diff --git a/CustomerWebApp/src/components/Footer/Footer.js b/CustomerWebApp/src/components/Footer/Footer.js
index e86b396..519edb8 100644
--- a/CustomerWebApp/src/components/Footer/Footer.js
+++ b/CustomerWebApp/src/components/Footer/Footer.js
@@ -1,247 +1,366 @@
-import { Box, Container, Button, Divider, Link, Grid, makeStyles, Typography } from "@material-ui/core";
+// import { Box, Container, Button, Divider, Link, Grid, makeStyles, Typography } from "@material-ui/core";
+// import React from "react";
+// import clsx from "clsx";
+// import FacebookIcon from "@material-ui/icons/Facebook";
+// import InstagramIcon from "@material-ui/icons/Instagram";
+// import ArrowRightIcon from "@material-ui/icons/ArrowRight";
+// import EnategaLogo from "../../assets/images/enategaFooter.png";
+// import AppleIcon from "../../assets/icons/AppleIcon";
+// import LogoHorizontal from "../../assets/icons/LogoHorizontal";
+
+// const useStyles = makeStyles((theme) => ({
+//   titleStyle: {
+//     ...theme.typography.subtitle2,
+//     color: theme.palette.text.disabled,
+//   },
+//   copyRightText: {
+//     ...theme.typography.subtitle2,
+//     fontWeight: theme.typography.fontWeightRegular,
+//     color: theme.palette.primary.light,
+//     paddingRight: "1vw",
+//     fontSize: "1vw",
+//   },
+//   footerText: {
+//     ...theme.typography.caption,
+//     color: theme.palette.text.disabled,
+//     margin: "0px 10px",
+//     "&:hover": {
+//       color: theme.palette.primary.main,
+//     },
+//   },
+//   iconStyles: {
+//     color: theme.palette.text.disabled,
+//     "&:hover": {
+//       color: theme.palette.primary.main,
+//     },
+//   },
+//   font700: {
+//     fontWeight: theme.typography.fontWeightMedium,
+//   },
+//   btnText: {
+//     width: "inherit",
+//     fontSize: "1vw",
+//     textTransform: "inherit",
+//     padding: theme.spacing(0, 1),
+//   },
+//   marginB: {
+//     marginBottom: theme.spacing(2),
+//   },
+//   loginBtn: {
+//     marginBottom: theme.spacing(2),
+//     padding: theme.spacing(1, 1, 1, 2),
+//     borderRadius: 20,
+//     backgroundColor: theme.palette.grey[100],
+//     "&:disabled": {
+//       backgroundColor: theme.palette.grey[100],
+//     },
+//     "&:hover": {
+//       opacity: 0.9,
+//       backgroundColor: theme.palette.grey[50],
+//     },
+//   },
+//   btmBtn: {
+//     marginTop: theme.spacing(5),
+//     padding: theme.spacing(1, 3, 1, 3),
+//     borderRadius: "4vw",
+//     borderStyle: "solid",
+//     borderColor: theme.palette.text.primary,
+//     borderWidth: 2,
+//     "&:disabled": {
+//       backgroundColor: theme.palette.grey[100],
+//     },
+//     "&:hover": {
+//       opacity: 0.9,
+//       backgroundColor: theme.palette.grey[50],
+//     },
+//   },
+// }));
+
+// function Footer() {
+//   const classes = useStyles();
+//   return (
+//     <>
+//       <Container
+//         maxWidth="xl"
+//         style={{
+//           marginTop: "5vw",
+//         }}
+//       >
+//         <Box
+//           style={{
+//             display: "flex",
+//             justifyContent: "space-between",
+//             margin: "20px 0px",
+//             paddingLeft: "17vw",
+//             paddingRight: "17vw",
+//           }}
+//         >
+//           <Box>
+//             <LogoHorizontal width={"10vw"} height={"3vw"} color={"#000"} />
+//             {/* <img style={{ width: "10vw", height: "3vw" }} src={EnategaLogo} /> */}
+//             <Box />
+//             <Button
+//               variant="outlined"
+//               disableElevation
+//               className={classes.btmBtn}
+//               // style={{display:"inline-block"}}
+//               endIcon={<ArrowRightIcon style={{ width: "3vw", height: "3vw" }} />}
+//             >
+//               <Typography
+//                 variant="h1"
+//                 color="textPrimary"
+//                 align="left"
+//                 className={clsx(classes.font700, classes.btnText)}
+//               >
+//                 Start browsing
+//               </Typography>
+//             </Button>
+//           </Box>
+//           <Box style={{ display: "flex" }}>
+//             <Box>
+//               <Button
+//                 variant="contained"
+//                 disableElevation
+//                 className={classes.loginBtn}
+//                 // style={{display:"inline-block"}}
+//                 startIcon={<AppleIcon style={{ width: "1.5vw", height: "1.5vw" }} />}
+//               >
+//                 <Typography
+//                   variant="button"
+//                   color="textSecondary"
+//                   align="left"
+//                   className={clsx(classes.font700, classes.btnText)}
+//                 >
+//                   Download for Apple ios
+//                 </Typography>
+//               </Button>
+//               <Box style={{ display: "block" }} />
+//               <Button
+//                 variant="contained"
+//                 disableElevation
+//                 // style={{display:'block'}}
+//                 className={classes.loginBtn}
+//                 startIcon={<AppleIcon style={{ width: "1.5vw", height: "1.5vw" }} />}
+//               >
+//                 <Typography
+//                   variant="button"
+//                   color="textSecondary"
+//                   align="left"
+//                   className={clsx(classes.font700, classes.btnText)}
+//                 >
+//                   Download for Android
+//                 </Typography>
+//               </Button>
+//             </Box>
+//             <Box>
+//               <Link href="https://www.facebook.com/enatega">
+//                 <Typography
+//                   variant="button"
+//                   color="textPrimary"
+//                   //   align="left"
+//                   className={clsx(classes.font700, classes.btnText)}
+//                 >
+//                   Facebook
+//                 </Typography>
+//               </Link>
+//               <Box className={classes.marginB} />
+//               <Link href="https://www.facebook.com/enatega">
+//                 <Typography
+//                   variant="button"
+//                   color="textPrimary"
+//                   //   align="left"
+//                   className={clsx(classes.font700, classes.btnText)}
+//                 >
+//                   LinkedIn
+//                 </Typography>
+//               </Link>
+//               <Box className={classes.marginB} />
+//               <Link href="https://www.facebook.com/enatega">
+//                 <Typography
+//                   variant="button"
+//                   color="textPrimary"
+//                   //   align="left"
+//                   className={clsx(classes.font700, classes.btnText)}
+//                 >
+//                   Instagram
+//                 </Typography>
+//               </Link>
+//               <Box className={classes.marginB} />
+//               <Link href="https://www.facebook.com/enatega">
+//                 <Typography
+//                   variant="button"
+//                   color="textPrimary"
+//                   //   align="left"
+//                   className={clsx(classes.font700, classes.btnText)}
+//                 >
+//                   Youtube
+//                 </Typography>
+//               </Link>
+//             </Box>
+//             {/* <Link href="https://www.facebook.com/enatega">
+//             <FacebookIcon className={classes.iconStyles} fontSize="large" />
+//           </Link>
+//           <Link href="https://www.instagram.com/enatega.nb/">
+//             <InstagramIcon style={{ marginLeft: "20px" }} className={classes.iconStyles} fontSize="large" />
+//           </Link> */}
+//           </Box>
+//         </Box>
+//         {/* <Divider style={{ width: "100%" }} light orientation="horizontal" /> */}
+
+//         {/* <Divider style={{ width: "100%" }} light orientation="horizontal" /> */}
+//       </Container>
+//       <Box
+//         style={{
+//           width: "100%",
+//           height: "5vw",
+//           borderTopLeftRadius: 30,
+//           borderTopRightRadius: 30,
+//           backgroundColor: "black",
+//           marginTop: "30px",
+//           textAlign: "center",
+//         }}
+//       >
+//         <Box
+//           style={{
+//             display: "flex",
+//             textAlign: "center",
+//             margin: "auto",
+//             alignItems: "center",
+//             height: "100%",
+//             justifyContent: "space-between",
+//             alignItems: "center",
+//             width: "70%",
+//           }}
+//         >
+//           <Typography className={classes.copyRightText}>
+//             Enatega {"    "}© {new Date().getFullYear()} All right reserved
+//           </Typography>
+//           <Box style={{ display: "flex" }}>
+//             <Typography className={classes.copyRightText}>Privacy Policy</Typography>
+//             <Typography className={classes.copyRightText}>Terms&Conditions</Typography>
+//           </Box>
+//         </Box>
+//       </Box>
+//     </>
+//   );
+// }
+
+// export default Footer;
+
 import React from "react";
-import clsx from "clsx";
-import FacebookIcon from "@material-ui/icons/Facebook";
-import InstagramIcon from "@material-ui/icons/Instagram";
+import {
+  Box,
+  Button,
+  Container,
+  Link,
+  makeStyles,
+  Typography,
+} from "@material-ui/core";
 import ArrowRightIcon from "@material-ui/icons/ArrowRight";
-import EnategaLogo from "../../assets/images/enategaFooter.png";
-import AppleIcon from "../../assets/icons/AppleIcon";
+import AppleIcon from "@material-ui/icons/Apple";
 import LogoHorizontal from "../../assets/icons/LogoHorizontal";
 
 const useStyles = makeStyles((theme) => ({
-  titleStyle: {
-    ...theme.typography.subtitle2,
-    color: theme.palette.text.disabled,
+  footer: {
+    backgroundColor: "black",
+    paddingTop: theme.spacing(4),
+    paddingBottom: theme.spacing(2),
+    color: "white",
   },
-  copyRightText: {
-    ...theme.typography.subtitle2,
-    fontWeight: theme.typography.fontWeightRegular,
-    color: theme.palette.primary.light,
-    paddingRight: "1vw",
-    fontSize: "1vw",
+  footerContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    textAlign: "center",
   },
-  footerText: {
-    ...theme.typography.caption,
-    color: theme.palette.text.disabled,
-    margin: "0px 10px",
-    "&:hover": {
-      color: theme.palette.primary.main,
-    },
-  },
-  iconStyles: {
-    color: theme.palette.text.disabled,
-    "&:hover": {
-      color: theme.palette.primary.main,
-    },
-  },
-  font700: {
-    fontWeight: theme.typography.fontWeightMedium,
-  },
-  btnText: {
-    width: "inherit",
-    fontSize: "1vw",
-    textTransform: "inherit",
-    padding: theme.spacing(0, 1),
-  },
-  marginB: {
-    marginBottom: theme.spacing(2),
-  },
-  loginBtn: {
-    marginBottom: theme.spacing(2),
-    padding: theme.spacing(1, 1, 1, 2),
-    borderRadius: 20,
-    backgroundColor: theme.palette.grey[100],
-    "&:disabled": {
-      backgroundColor: theme.palette.grey[100],
-    },
-    "&:hover": {
-      opacity: 0.9,
-      backgroundColor: theme.palette.grey[50],
-    },
-  },
-  btmBtn: {
-    marginTop: theme.spacing(5),
-    padding: theme.spacing(1, 3, 1, 3),
+  button: {
+    backgroundColor: "white",
+    margin: theme.spacing(2, 0),
     borderRadius: "4vw",
-    borderStyle: "solid",
-    borderColor: theme.palette.text.primary,
-    borderWidth: 2,
-    "&:disabled": {
-      backgroundColor: theme.palette.grey[100],
-    },
+    border: "2px solid white",
+    fontSize: "1rem",
+    padding: theme.spacing(1, 3),
+    textTransform: "none",
     "&:hover": {
-      opacity: 0.9,
       backgroundColor: theme.palette.grey[50],
     },
   },
+  logo: {
+    width: "15%",
+    marginBottom: theme.spacing(2),
+  },
+  socialLinks: {
+    marginTop: theme.spacing(2),
+    "& a": {
+      color: "white",
+      margin: theme.spacing(0, 2),
+      textDecoration: "none",
+      "&:hover": {
+        color: theme.palette.primary.main,
+      },
+    },
+  },
+  copyright: {
+    marginTop: theme.spacing(2),
+    "& p": {
+      color: "white",
+      margin: theme.spacing(0, 1),
+      fontSize: "0.9rem",
+    },
+  },
 }));
 
 function Footer() {
   const classes = useStyles();
-  return (
-    <>
-      <Container
-        maxWidth="xl"
-        style={{
-          marginTop: "5vw",
-        }}
-      >
-        <Box
-          style={{
-            display: "flex",
-            justifyContent: "space-between",
-            margin: "20px 0px",
-            paddingLeft: "17vw",
-            paddingRight: "17vw",
-          }}
-        >
-          <Box>
-            <LogoHorizontal width={"10vw"} height={"3vw"} color={"#000"} />
-            {/* <img style={{ width: "10vw", height: "3vw" }} src={EnategaLogo} /> */}
-            <Box />
-            <Button
-              variant="outlined"
-              disableElevation
-              className={classes.btmBtn}
-              // style={{display:"inline-block"}}
-              endIcon={<ArrowRightIcon style={{ width: "3vw", height: "3vw" }} />}
-            >
-              <Typography
-                variant="h1"
-                color="textPrimary"
-                align="left"
-                className={clsx(classes.font700, classes.btnText)}
-              >
-                Start browsing
-              </Typography>
-            </Button>
-          </Box>
-          <Box style={{ display: "flex" }}>
-            <Box>
-              <Button
-                variant="contained"
-                disableElevation
-                className={classes.loginBtn}
-                // style={{display:"inline-block"}}
-                startIcon={<AppleIcon style={{ width: "1.5vw", height: "1.5vw" }} />}
-              >
-                <Typography
-                  variant="button"
-                  color="textSecondary"
-                  align="left"
-                  className={clsx(classes.font700, classes.btnText)}
-                >
-                  Download for Apple ios
-                </Typography>
-              </Button>
-              <Box style={{ display: "block" }} />
-              <Button
-                variant="contained"
-                disableElevation
-                // style={{display:'block'}}
-                className={classes.loginBtn}
-                startIcon={<AppleIcon style={{ width: "1.5vw", height: "1.5vw" }} />}
-              >
-                <Typography
-                  variant="button"
-                  color="textSecondary"
-                  align="left"
-                  className={clsx(classes.font700, classes.btnText)}
-                >
-                  Download for Android
-                </Typography>
-              </Button>
-            </Box>
-            <Box>
-              <Link href="https://www.facebook.com/enatega">
-                <Typography
-                  variant="button"
-                  color="textPrimary"
-                  //   align="left"
-                  className={clsx(classes.font700, classes.btnText)}
-                >
-                  Facebook
-                </Typography>
-              </Link>
-              <Box className={classes.marginB} />
-              <Link href="https://www.facebook.com/enatega">
-                <Typography
-                  variant="button"
-                  color="textPrimary"
-                  //   align="left"
-                  className={clsx(classes.font700, classes.btnText)}
-                >
-                  LinkedIn
-                </Typography>
-              </Link>
-              <Box className={classes.marginB} />
-              <Link href="https://www.facebook.com/enatega">
-                <Typography
-                  variant="button"
-                  color="textPrimary"
-                  //   align="left"
-                  className={clsx(classes.font700, classes.btnText)}
-                >
-                  Instagram
-                </Typography>
-              </Link>
-              <Box className={classes.marginB} />
-              <Link href="https://www.facebook.com/enatega">
-                <Typography
-                  variant="button"
-                  color="textPrimary"
-                  //   align="left"
-                  className={clsx(classes.font700, classes.btnText)}
-                >
-                  Youtube
-                </Typography>
-              </Link>
-            </Box>
-            {/* <Link href="https://www.facebook.com/enatega">
-            <FacebookIcon className={classes.iconStyles} fontSize="large" />
-          </Link>
-          <Link href="https://www.instagram.com/enatega.nb/">
-            <InstagramIcon style={{ marginLeft: "20px" }} className={classes.iconStyles} fontSize="large" />
-          </Link> */}
-          </Box>
-        </Box>
-        {/* <Divider style={{ width: "100%" }} light orientation="horizontal" /> */}
 
-        {/* <Divider style={{ width: "100%" }} light orientation="horizontal" /> */}
+  return (
+    <footer className={classes.footer}>
+      <Container maxWidth="xl">
+        <div className={classes.footerContainer}>
+          <LogoHorizontal className={classes.logo} color="red" />
+          <Button
+            variant="outlined"
+            className={classes.button}
+            endIcon={<ArrowRightIcon />}
+          >
+            Start browsing
+          </Button>
+          <div>
+            <Button
+              variant="contained"
+              className={classes.button}
+              startIcon={<AppleIcon />}
+            >
+              Download for Apple iOS
+            </Button>
+            <Button
+              variant="contained"
+              className={classes.button}
+              startIcon={<AppleIcon />}
+            >
+              Download for Android
+            </Button>
+          </div>
+          <div className={classes.socialLinks}>
+            <Link href="https://www.facebook.com/enatega">Facebook</Link>
+            <Link href="https://www.linkedin.com/enatega">LinkedIn</Link>
+            <Link href="https://www.instagram.com/enatega">Instagram</Link>
+            <Link href="https://www.youtube.com/enatega">YouTube</Link>
+          </div>
+        </div>
       </Container>
-      <Box
-        style={{
-          width: "100%",
-          height: "5vw",
-          borderTopLeftRadius: 30,
-          borderTopRightRadius: 30,
-          backgroundColor: "black",
-          marginTop: "30px",
-          textAlign: "center",
-        }}
-      >
-        <Box
-          style={{
-            display: "flex",
-            textAlign: "center",
-            margin: "auto",
-            alignItems: "center",
-            height: "100%",
-            justifyContent: "space-between",
-            alignItems: "center",
-            width: "70%",
-          }}
-        >
-          <Typography className={classes.copyRightText}>
-            Enatega {"    "}© {new Date().getFullYear()} All right reserved
+      <Box className={classes.footerContainer}>
+        <Typography className={classes.copyright}>
+          Enatega © {new Date().getFullYear()} All rights reserved
+        </Typography>
+        <div>
+          <Typography className={classes.copyright}>Privacy Policy</Typography>
+          <Typography className={classes.copyright}>
+            Terms & Conditions
           </Typography>
-          <Box style={{ display: "flex" }}>
-            <Typography className={classes.copyRightText}>Privacy Policy</Typography>
-            <Typography className={classes.copyRightText}>Terms&Conditions</Typography>
-          </Box>
-        </Box>
+        </div>
       </Box>
-    </>
+    </footer>
   );
 }