From 717721aaae74e79c6f53b17c04bcc6164cd22966 Mon Sep 17 00:00:00 2001
From: Hemanth kumar <rajva5727@gmail.com>
Date: Sat, 24 Feb 2024 10:24:29 +0530
Subject: [PATCH 1/2] Update index.stories.jsx

---
 src/stories/CodeFeed/ExploreOrg/index.stories.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stories/CodeFeed/ExploreOrg/index.stories.jsx b/src/stories/CodeFeed/ExploreOrg/index.stories.jsx
index 1543ac13..3b9c2313 100644
--- a/src/stories/CodeFeed/ExploreOrg/index.stories.jsx
+++ b/src/stories/CodeFeed/ExploreOrg/index.stories.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { MemoryRouter } from "react-router";
-import ExploreOrg from "../../../components/MyFeed/ExploreOrgs";
+import ExploreOrg from "../../../components/MyFeed/discoverOrgs/OrgExplore";
 import ProviderWrapper from "../../../helpers/providerWrapper";
 
 export default {

From 2039e661bb3726d4727fb778b93ab2b15c4b9623 Mon Sep 17 00:00:00 2001
From: Hemu21 <rajva5727@gmail.com>
Date: Sat, 24 Feb 2024 11:10:44 +0530
Subject: [PATCH 2/2] Footer not visible #40 Fixed

---
 functions/package.json                        |   2 +-
 src/components/Footer/index.jsx               |   4 +-
 src/components/MyFeed/index.jsx               |  12 +-
 src/components/Notification/index.jsx         |   2 +
 src/components/Organization/index.jsx         | 222 ++++++-------
 src/components/Profile/index.jsx              |   2 +
 .../Tutorials/MyTutorials/index.jsx           |  32 +-
 src/components/Tutorials/index.jsx            | 258 +++++++--------
 src/components/UserDashboard/index.jsx        | 230 +++++++-------
 src/routes.jsx                                |  12 +-
 src/store/actions/tutorialsActions.js         | 294 +++++++++---------
 src/stories/HomePage/index.stories.jsx        |   2 +
 12 files changed, 559 insertions(+), 513 deletions(-)

diff --git a/functions/package.json b/functions/package.json
index f20d6f03..2579e905 100644
--- a/functions/package.json
+++ b/functions/package.json
@@ -10,7 +10,7 @@
     "logs": "firebase functions:log"
   },
   "engines": {
-    "node": "10"
+    "node": "16"
   },
   "dependencies": {
     "dotenv": "^16.0.1",
diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
index 784f8c9c..703c0bac 100644
--- a/src/components/Footer/index.jsx
+++ b/src/components/Footer/index.jsx
@@ -23,7 +23,7 @@ const Footer = () => {
       justifyContent: "flex-start"
     }
   });
-  const classes = useStyles();
+  const classes = useStyles;
   return (
     <footer className="light-grey-bg pt-16 pb-16">
       <Grid container direction="row">
@@ -33,7 +33,7 @@ const Footer = () => {
               <BrandName />
             </Link>
           </h2>
-          <p className="mb-">Live to learn, learn to live.</p>
+          <p className="mb-8">Live to learn, learn to live.</p>
         </Grid>
 
         <Grid item xs={12} sm={12} md={3} className="col-pad-24">
diff --git a/src/components/MyFeed/index.jsx b/src/components/MyFeed/index.jsx
index b88474c4..09ba988b 100644
--- a/src/components/MyFeed/index.jsx
+++ b/src/components/MyFeed/index.jsx
@@ -6,13 +6,17 @@ import PropTypes from "prop-types";
 import Carousel from "./Carousel/index";
 import OrgsExplore from "./discoverOrgs/OrgExplore";
 import CodelabzExplore from "./DiscoverCodelabz/CodelabzExplore";
+import Footer from "../Footer";
 
 const MyFeed = () => {
   return (
-    <Box style={{ background: "#F9F9F9", color: "#000000", height: "100%" }}>
-      <OrgsExplore />
-      <CodelabzExplore />
-    </Box>
+    <>
+      <Box style={{ background: "#F9F9F9", color: "#000000", height: "100%" }}>
+        <OrgsExplore />
+        <CodelabzExplore />
+      </Box>
+      <Footer />
+    </>
   );
 };
 
diff --git a/src/components/Notification/index.jsx b/src/components/Notification/index.jsx
index 9f00f6ee..fe05ab1e 100644
--- a/src/components/Notification/index.jsx
+++ b/src/components/Notification/index.jsx
@@ -15,6 +15,7 @@ import CardWithoutPicture from "../Card/CardWithoutPicture";
 import { MoreVertOutlined } from "@mui/icons-material";
 import NotificationBox from "./NotificationBox";
 import { notifications } from "./notifications";
+import Footer from "../Footer";
 const Notification = ({ background = "white", textColor = "black" }) => {
   const classes = useStyles();
   const [openMenu, setOpen] = useState(false);
@@ -168,6 +169,7 @@ const Notification = ({ background = "white", textColor = "black" }) => {
           </Grid>
         </Grid>
       </section>
+      <Footer />
     </>
   );
 };
diff --git a/src/components/Organization/index.jsx b/src/components/Organization/index.jsx
index 9e7c50b3..6298ec7c 100644
--- a/src/components/Organization/index.jsx
+++ b/src/components/Organization/index.jsx
@@ -24,6 +24,7 @@ import { useFirebase, useFirestore } from "react-redux-firebase";
 import { unPublishOrganization } from "../../store/actions";
 import useWindowSize from "../../helpers/customHooks/useWindowSize";
 import { useParams } from "react-router-dom";
+import Footer from "../Footer";
 
 const Organizations = () => {
   //Set All the organisations for this user
@@ -93,118 +94,121 @@ const Organizations = () => {
   const orgsOfUser = profileData.organizations;
 
   return (
-    <Container maxWidth="xl">
-      <Grid container className={classes.root} direction="column">
-        <Grid item>
-          <SwitchAccount
-            Heading="Switch Account"
-            name={currentOrgData.org_handle}
-            userOrgs={orgsOfUser}
-            avatar={{
-              value: currentOrgData.org_image
-            }}
-            buttonText={
-              currentOrgUpdate
-                ? "Loading.."
-                : currentOrgData.org_published
-                ? "Unpublish"
-                : "Publish"
-            }
-            buttonClick={unpublishOrganization}
-          />
-        </Grid>
-        <Grid item container direction="row">
-          {windowSize.width <= 750 ? (
-            <Grid item>
-              <IconButton onClick={handleClick}>
-                <MenuIcon />
-              </IconButton>
-              <Menu
-                elevation={10}
-                open={open}
-                anchorEl={anchorEl}
-                keepMounted
-                onClose={handleClose}
-                style={{
-                  marginTop: "3rem",
-                  zIndex: 999999
-                }}
-              >
-                {[
-                  {
-                    id: 1,
-                    name: "General",
-                    datatestid: "general-menu-item"
-                  },
-                  {
-                    id: 2,
-                    name: "Users",
-                    datatestid: "users-menu-item"
-                  },
-                  {
-                    id: 3,
-                    name: "Passwords",
-                    datatestid: "passwords-menu-item"
-                  },
-                  {
-                    id: 4,
-                    name: "Social media",
-                    datatestid: "socialmedia-menu-item"
-                  }
-                ].map(item => {
-                  return (
-                    <MenuItem
-                      key={`menu-item-${item.id}`}
-                      onClick={() => setSettingsMenu(item.id)}
-                    >{`${item.name}`}</MenuItem>
-                  );
-                })}
-              </Menu>
-            </Grid>
-          ) : (
-            <Grid item container xs={2}>
-              <SideBar
-                toggleSlider={toggleSlider}
-                open={openMenu}
-                menuItems={[
-                  {
-                    id: 1,
-                    name: "General",
-                    datatestid: "general-menu-item"
-                  },
-                  {
-                    id: 2,
-                    name: "Users",
-                    datatestid: "users-menu-item"
-                  },
-                  {
-                    id: 3,
-                    name: "Passwords",
-                    datatestid: "passwords-menu-item"
-                  },
-                  {
-                    id: 4,
-                    name: "Social media",
-                    datatestid: "socialmedia-menu-item"
-                  }
-                ]}
-                value={SettingsMenu}
-                onStateChange={item => {
-                  setSettingsMenu(item.id);
-                }}
-              />
-            </Grid>
-          )}
+    <>
+      <Container maxWidth="xl" style={{ minHeight: "80vh" }}>
+        <Grid container className={classes.root} direction="column">
+          <Grid item>
+            <SwitchAccount
+              Heading="Switch Account"
+              name={currentOrgData.org_handle}
+              userOrgs={orgsOfUser}
+              avatar={{
+                value: currentOrgData.org_image
+              }}
+              buttonText={
+                currentOrgUpdate
+                  ? "Loading.."
+                  : currentOrgData.org_published
+                  ? "Unpublish"
+                  : "Publish"
+              }
+              buttonClick={unpublishOrganization}
+            />
+          </Grid>
+          <Grid item container direction="row">
+            {windowSize.width <= 750 ? (
+              <Grid item>
+                <IconButton onClick={handleClick}>
+                  <MenuIcon />
+                </IconButton>
+                <Menu
+                  elevation={10}
+                  open={open}
+                  anchorEl={anchorEl}
+                  keepMounted
+                  onClose={handleClose}
+                  style={{
+                    marginTop: "3rem",
+                    zIndex: 999999
+                  }}
+                >
+                  {[
+                    {
+                      id: 1,
+                      name: "General",
+                      datatestid: "general-menu-item"
+                    },
+                    {
+                      id: 2,
+                      name: "Users",
+                      datatestid: "users-menu-item"
+                    },
+                    {
+                      id: 3,
+                      name: "Passwords",
+                      datatestid: "passwords-menu-item"
+                    },
+                    {
+                      id: 4,
+                      name: "Social media",
+                      datatestid: "socialmedia-menu-item"
+                    }
+                  ].map(item => {
+                    return (
+                      <MenuItem
+                        key={`menu-item-${item.id}`}
+                        onClick={() => setSettingsMenu(item.id)}
+                      >{`${item.name}`}</MenuItem>
+                    );
+                  })}
+                </Menu>
+              </Grid>
+            ) : (
+              <Grid item container xs={2}>
+                <SideBar
+                  toggleSlider={toggleSlider}
+                  open={openMenu}
+                  menuItems={[
+                    {
+                      id: 1,
+                      name: "General",
+                      datatestid: "general-menu-item"
+                    },
+                    {
+                      id: 2,
+                      name: "Users",
+                      datatestid: "users-menu-item"
+                    },
+                    {
+                      id: 3,
+                      name: "Passwords",
+                      datatestid: "passwords-menu-item"
+                    },
+                    {
+                      id: 4,
+                      name: "Social media",
+                      datatestid: "socialmedia-menu-item"
+                    }
+                  ]}
+                  value={SettingsMenu}
+                  onStateChange={item => {
+                    setSettingsMenu(item.id);
+                  }}
+                />
+              </Grid>
+            )}
 
-          <Grid item xs={windowSize.width <= 750 ? 12 : 10}>
-            {SettingsMenu === 1 && <General />}
-            {SettingsMenu === 2 && <Users />}
-            {SettingsMenu === 3 && <Passwords />}
-            {SettingsMenu === 4 && <Socialmedia />}
+            <Grid item xs={windowSize.width <= 750 ? 12 : 10}>
+              {SettingsMenu === 1 && <General />}
+              {SettingsMenu === 2 && <Users />}
+              {SettingsMenu === 3 && <Passwords />}
+              {SettingsMenu === 4 && <Socialmedia />}
+            </Grid>
           </Grid>
         </Grid>
-      </Grid>
-    </Container>
+      </Container>
+      <Footer />
+    </>
   );
 };
 
diff --git a/src/components/Profile/index.jsx b/src/components/Profile/index.jsx
index a48a8f06..f4566f10 100644
--- a/src/components/Profile/index.jsx
+++ b/src/components/Profile/index.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import UserProfile from "../User/UserProfile/UserProfile";
 import { useFirebase, useFirestore } from "react-redux-firebase";
 import { useDispatch, useSelector } from "react-redux";
+import Footer from "../Footer";
 
 const Profile = () => {
   const firebase = useFirebase();
@@ -14,6 +15,7 @@ const Profile = () => {
   return (
     <React.Fragment>
       <UserProfile profileData={profileData} />
+      <Footer />
     </React.Fragment>
   );
 };
diff --git a/src/components/Tutorials/MyTutorials/index.jsx b/src/components/Tutorials/MyTutorials/index.jsx
index 38f244e3..fae2a42d 100644
--- a/src/components/Tutorials/MyTutorials/index.jsx
+++ b/src/components/Tutorials/MyTutorials/index.jsx
@@ -10,6 +10,7 @@ import {
 // import UserTutorialsComponent from "./UserTutorials";
 import OrgTutorialsComponent from "./OrgTutorials";
 import Header from "./Search";
+import Footer from "../../Footer";
 
 const MyTutorials = () => {
   const [org_handles, setOrgHandles] = useState([]);
@@ -75,21 +76,24 @@ const MyTutorials = () => {
   };
 
   return (
-    <div className="row-footer-below" data-testId="tutorialMainBody">
-      <Grid container>
-        <Grid xs={12} className="mb-24">
-          <Header />
-        </Grid>
-        {organizations && organizations.length > 0 && (
-          <Grid xs={12} className="m-24">
-            <OrgTutorialsComponent
-              organizations={organizations}
-              user={userDetails}
-            />
+    <>
+      <div className="row-footer-below" data-testId="tutorialMainBody" style={{minHeight:"80vh"}}>
+        <Grid container>
+          <Grid xs={12} className="mb-24">
+            <Header />
           </Grid>
-        )}
-      </Grid>
-    </div>
+          {organizations && organizations.length > 0 && (
+            <Grid xs={12} className="m-24">
+              <OrgTutorialsComponent
+                organizations={organizations}
+                user={userDetails}
+              />
+            </Grid>
+          )}
+        </Grid>
+      </div>
+      <Footer />
+    </>
   );
 };
 
diff --git a/src/components/Tutorials/index.jsx b/src/components/Tutorials/index.jsx
index 0ac1daa8..a110f886 100644
--- a/src/components/Tutorials/index.jsx
+++ b/src/components/Tutorials/index.jsx
@@ -25,6 +25,7 @@ import HtmlTextRenderer from "./subComps/HtmlTextRenderer";
 import { Collapse, Button } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { makeStyles } from "@mui/styles";
+import Footer from "../Footer";
 
 const useStyles = makeStyles(theme => ({
   flexRow: {
@@ -174,150 +175,153 @@ const ViewTutorial = () => {
   if (tutorialData) {
     window.scrollTo(0, 0);
     return (
-      <Grid className="row-footer-below">
-        {allowEdit && (
+      <>
+        <Grid className="row-footer-below">
+          {allowEdit && (
+            <Grid>
+              <Grid xs={24} sm={24} md={24}>
+                <EditControls
+                  isPublished={tutorialData.isPublished}
+                  stepPanelVisible={stepPanelVisible}
+                  isDesktop={isDesktop}
+                  noteID={stepsData[currentStep].id}
+                  setMode={mode => setMode(mode)}
+                  mode={mode}
+                  toggleImageDrawer={() => setImageDrawerVisible(true)}
+                  tutorial_id={tutorialData.tutorial_id}
+                  toggleAddNewStep={() =>
+                    setAddNewStepModalVisible(!addNewStepModalVisible)
+                  }
+                  visibility={stepsData[currentStep].visibility}
+                  owner={owner}
+                  currentStep={currentStep}
+                  step_length={stepsData.length}
+                />
+              </Grid>
+            </Grid>
+          )}
+
           <Grid>
             <Grid xs={24} sm={24} md={24}>
-              <EditControls
-                isPublished={tutorialData.isPublished}
+              <TutorialHeading
                 stepPanelVisible={stepPanelVisible}
                 isDesktop={isDesktop}
-                noteID={stepsData[currentStep].id}
-                setMode={mode => setMode(mode)}
-                mode={mode}
-                toggleImageDrawer={() => setImageDrawerVisible(true)}
-                tutorial_id={tutorialData.tutorial_id}
-                toggleAddNewStep={() =>
-                  setAddNewStepModalVisible(!addNewStepModalVisible)
-                }
-                visibility={stepsData[currentStep].visibility}
-                owner={owner}
-                currentStep={currentStep}
-                step_length={stepsData.length}
+                setStepPanelVisible={setStepPanelVisible}
+                tutorialData={tutorialData}
+                timeRemaining={timeRemaining}
               />
             </Grid>
           </Grid>
-        )}
-
-        <Grid>
-          <Grid xs={24} sm={24} md={24}>
-            <TutorialHeading
-              stepPanelVisible={stepPanelVisible}
-              isDesktop={isDesktop}
-              setStepPanelVisible={setStepPanelVisible}
-              tutorialData={tutorialData}
-              timeRemaining={timeRemaining}
-            />
-          </Grid>
-        </Grid>
-        <Grid className={classes.flexRow}>
-          <ExpandMore
-            data-testid="tutorial-collapse-button"
-            expand={expand}
-            onClick={() => {
-              setExpand(prev => !prev);
-              setStepPanelVisible(prev => !prev);
-            }}
-            aria-expanded={expand}
-            aria-label="show more"
-          >
-            <ExpandMoreIcon className={classes.ExpandIcon} />
-          </ExpandMore>
-
-          <Grid
-            width={stepPanelVisible ? (isDesktop ? "55%" : "100%") : "0"}
-            padding={stepPanelVisible ? "0 2rem" : "0"}
-            className={classes.widthTransition}
-          >
-            <Collapse
-              data-testid="tutorial-steps-list"
-              in={expand}
-              timeout="auto"
-              unmountOnExit
-              orientation="horizontal"
-              className={classes.collapseContainer}
+          <Grid className={classes.flexRow}>
+            <ExpandMore
+              data-testid="tutorial-collapse-button"
+              expand={expand}
+              onClick={() => {
+                setExpand(prev => !prev);
+                setStepPanelVisible(prev => !prev);
+              }}
+              aria-expanded={expand}
+              aria-label="show more"
             >
-              <StepsPanel
-                currentStep={currentStep}
-                onChange={onChange}
-                stepsData={stepsData}
-                onClick={() => setStepPanelVisible(false)}
-                hideButton={isDesktop}
-                setCurrentStep={setCurrentStep}
-                setStepData={setStepData}
-              />
-            </Collapse>
-          </Grid>
+              <ExpandMoreIcon className={classes.ExpandIcon} />
+            </ExpandMore>
 
-          <Grid className={classes.editorContainer}>
-            <Grid className="tutorial-content" justify="center" container>
-              <Grid
-                xs={24}
-                sm={24}
-                md={20}
-                lg={18}
-                className="col-pad-24-s mt-24-od tutorial-paper"
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "10px"
-                }}
+            <Grid
+              width={stepPanelVisible ? (isDesktop ? "55%" : "100%") : "0"}
+              padding={stepPanelVisible ? "0 2rem" : "0"}
+              className={classes.widthTransition}
+            >
+              <Collapse
+                data-testid="tutorial-steps-list"
+                in={expand}
+                timeout="auto"
+                unmountOnExit
+                orientation="horizontal"
+                className={classes.collapseContainer}
               >
-                {!isDesktop && stepPanelVisible ? null : (
-                  <>
-                    {mode === "view" && (
-                      <div data-testId="tutorial-content">
-                        <HtmlTextRenderer html={currentStepContent} />
-                      </div>
-                    )}
-                    {mode === "edit" && (
-                      <>
-                        <StepsTitle
-                          currentStepNo={currentStepNo}
-                          owner={tutorialData.owner}
-                          tutorial_id={tutorialData.tutorial_id}
-                          step_id={stepsData[currentStep].id}
-                          step_title={stepsData[currentStep].title}
-                          step_time={stepsData[currentStep].time}
-                        />
+                <StepsPanel
+                  currentStep={currentStep}
+                  onChange={onChange}
+                  stepsData={stepsData}
+                  onClick={() => setStepPanelVisible(false)}
+                  hideButton={isDesktop}
+                  setCurrentStep={setCurrentStep}
+                  setStepData={setStepData}
+                />
+              </Collapse>
+            </Grid>
+
+            <Grid className={classes.editorContainer}>
+              <Grid className="tutorial-content" justify="center" container>
+                <Grid
+                  xs={24}
+                  sm={24}
+                  md={20}
+                  lg={18}
+                  className="col-pad-24-s mt-24-od tutorial-paper"
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "10px"
+                  }}
+                >
+                  {!isDesktop && stepPanelVisible ? null : (
+                    <>
+                      {mode === "view" && (
+                        <div data-testId="tutorial-content">
+                          <HtmlTextRenderer html={currentStepContent} />
+                        </div>
+                      )}
+                      {mode === "edit" && (
+                        <>
+                          <StepsTitle
+                            currentStepNo={currentStepNo}
+                            owner={tutorialData.owner}
+                            tutorial_id={tutorialData.tutorial_id}
+                            step_id={stepsData[currentStep].id}
+                            step_title={stepsData[currentStep].title}
+                            step_time={stepsData[currentStep].time}
+                          />
 
-                        <QuillEditor
-                          data={stepsData[currentStep].content}
-                          tutorial_id={tutorialData.tutorial_id}
-                          id={stepsData[currentStep].id}
-                          key={
-                            stepsData[currentStep].title +
-                            stepsData[currentStep].id
-                          }
-                          mode={mode}
-                        />
-                      </>
-                    )}
-                  </>
+                          <QuillEditor
+                            data={stepsData[currentStep].content}
+                            tutorial_id={tutorialData.tutorial_id}
+                            id={stepsData[currentStep].id}
+                            key={
+                              stepsData[currentStep].title +
+                              stepsData[currentStep].id
+                            }
+                            mode={mode}
+                          />
+                        </>
+                      )}
+                    </>
+                  )}
+                </Grid>
+                {imageDrawerVisible && (
+                  <ImageDrawer
+                    visible={imageDrawerVisible}
+                    onClose={() => setImageDrawerVisible(false)}
+                    owner={tutorialData.owner}
+                    tutorial_id={tutorialData.tutorial_id}
+                    imageURLs={tutorialData.imageURLs}
+                  />
                 )}
-              </Grid>
-              {imageDrawerVisible && (
-                <ImageDrawer
-                  visible={imageDrawerVisible}
-                  onClose={() => setImageDrawerVisible(false)}
-                  owner={tutorialData.owner}
+                <AddNewStepModal
+                  viewModal={addNewStepModalVisible}
+                  viewCallback={() =>
+                    setAddNewStepModalVisible(!addNewStepModalVisible)
+                  }
                   tutorial_id={tutorialData.tutorial_id}
-                  imageURLs={tutorialData.imageURLs}
+                  steps_length={stepsData.length}
+                  owner={tutorialData.owner}
                 />
-              )}
-              <AddNewStepModal
-                viewModal={addNewStepModalVisible}
-                viewCallback={() =>
-                  setAddNewStepModalVisible(!addNewStepModalVisible)
-                }
-                tutorial_id={tutorialData.tutorial_id}
-                steps_length={stepsData.length}
-                owner={tutorialData.owner}
-              />
+              </Grid>
             </Grid>
           </Grid>
         </Grid>
-      </Grid>
+        <Footer />
+      </>
     );
   } else {
     return <Spinner half />;
diff --git a/src/components/UserDashboard/index.jsx b/src/components/UserDashboard/index.jsx
index 01b832b0..dca932c5 100644
--- a/src/components/UserDashboard/index.jsx
+++ b/src/components/UserDashboard/index.jsx
@@ -25,6 +25,7 @@ import { Link, Route, Switch, useParams } from "react-router-dom";
 import { Avatar, Button } from "@mui/material";
 import { useSelector } from "react-redux";
 import useWindowSize from "../../helpers/customHooks/useWindowSize";
+import Footer from "../Footer";
 
 function UserDashboard() {
   const classes = useStyles();
@@ -88,122 +89,135 @@ function UserDashboard() {
   const profileData = useSelector(({ firebase: { profile } }) => profile);
   const [name, setName] = useState(getData(profileData.displayName));
   return (
-    <Box className={classes.root}>
-      <Box style={{ xs: { padding: 0 }, md: { padding: "0 30px" } }}>
-        <Box
-          style={{
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center"
-          }}
-        >
-          <Box style={{ display: "flex", alignItems: "center" }}>
-            {windowSize.width <= 960 && (
-              <IconButton>
-                <MenuIcon
-                  onClick={() => {
-                    toggleSlider();
-                  }}
-                ></MenuIcon>
-              </IconButton>
-            )}
-            <Avatar
-              aria-label="recipe"
-              className={classes.avatar}
-              data-testId="UserAvatar"
+    <>
+      <section style={{ minHeight: "90vh" }}>
+        <Box className={classes.root}>
+          <Box style={{ xs: { padding: 0 }, md: { padding: "0 30px" } }}>
+            <Box
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              }}
             >
-              {name.charAt(0).toUpperCase()}
-            </Avatar>
-            <Box marginLeft={1} data-testId="switchAccount">
-              <Typography className={classes.name}>{name}</Typography>
               <Box style={{ display: "flex", alignItems: "center" }}>
-                <Typography className={classes.account}>
-                  Personal account
-                </Typography>
-                <img src={SwitchImg} className={classes.image} alt="profile" />
-                <Typography
-                  className={classes.account}
-                  data-testId="switchAccount_switch"
+                {windowSize.width <= 960 && (
+                  <IconButton>
+                    <MenuIcon
+                      onClick={() => {
+                        toggleSlider();
+                      }}
+                    ></MenuIcon>
+                  </IconButton>
+                )}
+                <Avatar
+                  aria-label="recipe"
+                  className={classes.avatar}
+                  data-testId="UserAvatar"
                 >
-                  Switch
-                </Typography>
+                  {name.charAt(0).toUpperCase()}
+                </Avatar>
+                <Box marginLeft={1} data-testId="switchAccount">
+                  <Typography className={classes.name}>{name}</Typography>
+                  <Box style={{ display: "flex", alignItems: "center" }}>
+                    <Typography className={classes.account}>
+                      Personal account
+                    </Typography>
+                    <img
+                      src={SwitchImg}
+                      className={classes.image}
+                      alt="profile"
+                    />
+                    <Typography
+                      className={classes.account}
+                      data-testId="switchAccount_switch"
+                    >
+                      Switch
+                    </Typography>
+                  </Box>
+                </Box>
               </Box>
+              <Link to="/profile">
+                <Button className={classes.button}>Go to profile</Button>
+              </Link>
             </Box>
           </Box>
-          <Link to="/profile">
-            <Button className={classes.button}>Go to profile</Button>
-          </Link>
-        </Box>
-      </Box>
-      <Grid
-        container
-        data-testId="homepage"
-        spacing={2}
-        sx={{
-          p: 2
-        }}
-      >
-        {windowSize.width <= 960 && (
-          <div data-testId="homepageSidebarSmall">
-            <SideBar
-              open={openMenu}
-              menuItems={navLinks}
-              toggleSlider={toggleSlider}
-              notification={notification}
-              drawWidth={960}
-            />
-          </div>
-        )}
-        <Grid item className={classes.sidebar}>
-          <SideBar
-            open={openMenu}
-            toggleSlider={toggleSlider}
-            menuItems={navLinks}
-          />
-        </Grid>
-        <Grid
-          item
-          xs={12}
-          md={9}
-          style={{ xs: { padding: 0 }, md: { padding: "0 20px" } }}
-        >
-          <Typography className={classes.heading}>
-            {params.page.charAt(0).toUpperCase() + params.page.substr(1)}
-          </Typography>
-          {/* 
+          <Grid
+            container
+            data-testId="homepage"
+            spacing={2}
+            sx={{
+              p: 2
+            }}
+          >
+            {windowSize.width <= 960 && (
+              <div data-testId="homepageSidebarSmall">
+                <SideBar
+                  open={openMenu}
+                  menuItems={navLinks}
+                  toggleSlider={toggleSlider}
+                  notification={notification}
+                  drawWidth={960}
+                />
+              </div>
+            )}
+            <Grid item className={classes.sidebar}>
+              <SideBar
+                open={openMenu}
+                toggleSlider={toggleSlider}
+                menuItems={navLinks}
+              />
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              md={9}
+              style={{ xs: { padding: 0 }, md: { padding: "0 20px" } }}
+            >
+              <Typography className={classes.heading}>
+                {params.page.charAt(0).toUpperCase() + params.page.substr(1)}
+              </Typography>
+              {/* 
 				 	Router for the user dashboard 
 				  */}
-          <Switch>
-            <Route
-              exact
-              path={"/user-dashboard/profile"}
-              component={UserForm}
-            />
-            <Route
-              exact
-              path={"/user-dashboard/settings"}
-              component={UserAccount}
-            />
-            <Route
-              exact
-              path={"/user-dashboard/socials"}
-              component={ConnectSocials}
-            />
-            <Route exact path={"/user-dashboard/email"} component={UserEmail} />
-            <Route
-              exact
-              path={"/user-dashboard/password"}
-              component={UserPassword}
-            />
-            <Route
-              exact
-              path={"/user-dashboard/organizations"}
-              component={Organizations}
-            />
-          </Switch>
-        </Grid>
-      </Grid>
-    </Box>
+              <Switch>
+                <Route
+                  exact
+                  path={"/user-dashboard/profile"}
+                  component={UserForm}
+                />
+                <Route
+                  exact
+                  path={"/user-dashboard/settings"}
+                  component={UserAccount}
+                />
+                <Route
+                  exact
+                  path={"/user-dashboard/socials"}
+                  component={ConnectSocials}
+                />
+                <Route
+                  exact
+                  path={"/user-dashboard/email"}
+                  component={UserEmail}
+                />
+                <Route
+                  exact
+                  path={"/user-dashboard/password"}
+                  component={UserPassword}
+                />
+                <Route
+                  exact
+                  path={"/user-dashboard/organizations"}
+                  component={Organizations}
+                />
+              </Switch>
+            </Grid>
+          </Grid>
+        </Box>
+      </section>
+      <Footer />
+    </>
   );
 }
 
diff --git a/src/routes.jsx b/src/routes.jsx
index 39493a49..11731760 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -27,6 +27,7 @@ import MainNavbar from "./components/NavBar/new/MainNavbar";
 import UserDashboard from "./components/UserDashboard";
 import TutorialPage from "./components/TutorialPage";
 import Notification from "./components/Notification";
+import Footer from "./components/Footer";
 
 const AuthIsLoaded = ({ children }) => {
   const profile = useSelector(({ firebase: { profile } }) => profile);
@@ -90,7 +91,16 @@ const Routes = () => {
         <CodeLabzAppBar />
         {/* <Navbar /> */}
         <Switch>
-          <Route exact path={"/"} component={HomePage} />
+          <Route
+            exact
+            path={"/"}
+            render={props => (
+              <>
+                <HomePage {...props} type={"Home"} />
+                <Footer />
+              </>
+            )}
+          />
           <Route
             exact
             path={"/login"}
diff --git a/src/store/actions/tutorialsActions.js b/src/store/actions/tutorialsActions.js
index 7d273c1d..f6adedc4 100644
--- a/src/store/actions/tutorialsActions.js
+++ b/src/store/actions/tutorialsActions.js
@@ -230,36 +230,36 @@ export const getCurrentTutorialData =
 
 export const addNewTutorialStep =
   ({ owner, tutorial_id, title, time, id }) =>
-    async (firebase, firestore, dispatch) => {
-      try {
-        dispatch({ type: actions.CREATE_TUTORIAL_STEP_START });
+  async (firebase, firestore, dispatch) => {
+    try {
+      dispatch({ type: actions.CREATE_TUTORIAL_STEP_START });
 
-        await firestore
-          .collection("tutorials")
-          .doc(tutorial_id)
-          .collection("steps")
-          .doc(id)
-          .set({
-            content: `Switch to editor mode to begin <b>${title}</b> step`,
-            id,
-            time,
-            title,
-            visibility: true,
-            deleted: false
-          });
+      await firestore
+        .collection("tutorials")
+        .doc(tutorial_id)
+        .collection("steps")
+        .doc(id)
+        .set({
+          content: `Switch to editor mode to begin <b>${title}</b> step`,
+          id,
+          time,
+          title,
+          visibility: true,
+          deleted: false
+        });
 
-        await getCurrentTutorialData(owner, tutorial_id)(
-          firebase,
-          firestore,
-          dispatch
-        );
+      await getCurrentTutorialData(owner, tutorial_id)(
+        firebase,
+        firestore,
+        dispatch
+      );
 
-        dispatch({ type: actions.CREATE_TUTORIAL_STEP_SUCCESS });
-      } catch (e) {
-        console.log("CREATE_TUTORIAL_STEP_FAIL", e.message);
-        dispatch({ type: actions.CREATE_TUTORIAL_STEP_FAIL, payload: e.message });
-      }
-    };
+      dispatch({ type: actions.CREATE_TUTORIAL_STEP_SUCCESS });
+    } catch (e) {
+      console.log("CREATE_TUTORIAL_STEP_FAIL", e.message);
+      dispatch({ type: actions.CREATE_TUTORIAL_STEP_FAIL, payload: e.message });
+    }
+  };
 
 export const clearCreateTutorials = () => dispatch =>
   dispatch({ type: actions.CLEAR_CREATE_TUTORIALS_STATE });
@@ -305,78 +305,78 @@ export const setCurrentStepContent =
 
 export const hideUnHideStep =
   (owner, tutorial_id, step_id, visibility) =>
-    async (firebase, firestore, dispatch) => {
-      try {
-        /* not being used */
-        // const type = await checkUserOrOrgHandle(owner)(firebase);
-        await firestore
-          .collection("tutorials")
-          .doc(tutorial_id)
-          .collection("steps")
-          .doc(step_id)
-          .update({
-            [`visibility`]: !visibility,
-            updatedAt: firestore.FieldValue.serverTimestamp()
-          });
+  async (firebase, firestore, dispatch) => {
+    try {
+      /* not being used */
+      // const type = await checkUserOrOrgHandle(owner)(firebase);
+      await firestore
+        .collection("tutorials")
+        .doc(tutorial_id)
+        .collection("steps")
+        .doc(step_id)
+        .update({
+          [`visibility`]: !visibility,
+          updatedAt: firestore.FieldValue.serverTimestamp()
+        });
 
-        await getCurrentTutorialData(owner, tutorial_id)(
-          firebase,
-          firestore,
-          dispatch
-        );
-      } catch (e) {
-        console.log(e.message);
-      }
-    };
+      await getCurrentTutorialData(owner, tutorial_id)(
+        firebase,
+        firestore,
+        dispatch
+      );
+    } catch (e) {
+      console.log(e.message);
+    }
+  };
 
 export const publishUnpublishTutorial =
   (owner, tutorial_id, isPublished) =>
-    async (firebase, firestore, dispatch) => {
-      try {
-        await firestore
-          .collection("tutorials")
-          .doc(tutorial_id)
-          .update({
-            ["isPublished"]: !isPublished
-          });
+  async (firebase, firestore, dispatch) => {
+    try {
+      await firestore
+        .collection("tutorials")
+        .doc(tutorial_id)
+        .update({
+          ["isPublished"]: !isPublished
+        });
 
-        getCurrentTutorialData(owner, tutorial_id)(firebase, firestore, dispatch);
-      } catch (e) {
-        console.log(e.message);
-      }
-    };
+      getCurrentTutorialData(owner, tutorial_id)(firebase, firestore, dispatch);
+    } catch (e) {
+      console.log(e.message);
+    }
+  };
 
 export const removeStep =
   (owner, tutorial_id, step_id, current_step_no) =>
-    async (firebase, firestore, dispatch) => {
-      try {
-        await firestore
-          .collection("tutorials")
-          .doc(tutorial_id)
-          .collection("steps")
-          .doc(step_id)
-          .delete()
-
-        // const data = await firestore
-        //   .collection("tutorials")
-        //   .doc(tutorial_id)
-        //   .collection("steps")
-        //   .doc(step_id)
-        //   .get();
-
-        await setCurrentStepNo(
-          current_step_no > 0 ? current_step_no - 1 : current_step_no
-        )(dispatch);
-
-        await getCurrentTutorialData(owner, tutorial_id)(
-          firebase,
-          firestore,
-          dispatch
-        );
-      } catch (e) {
-        console.log(e.message);
-      }
-    };
+  async (firebase, firestore, dispatch) => {
+    try {
+      await firestore
+        .collection("tutorials")
+        .doc(tutorial_id)
+        .collection("steps")
+        .doc(step_id)
+        .delete();
+
+      // const data = await firestore
+      //   .collection("tutorials")
+      //   .doc(tutorial_id)
+      //   .collection("steps")
+      //   .doc(step_id)
+      //   .get();
+
+      await setCurrentStepNo(
+        current_step_no > 0 ? current_step_no - 1 : current_step_no
+      )(dispatch);
+
+      await getCurrentTutorialData(owner, tutorial_id)(
+        firebase,
+        firestore,
+        dispatch
+      );
+    } catch (e) {
+      console.log(e.message);
+    }
+  };
 
 export const setCurrentStep = data => async dispatch =>
   dispatch({ type: actions.SET_EDITOR_DATA, payload: data });
@@ -465,69 +465,69 @@ export const remoteTutorialImages =
 
 export const updateStepTitle =
   (owner, tutorial_id, step_id, step_title) =>
-    async (firebase, firestore, dispatch) => {
-      try {
-        const dbPath = `tutorials/${tutorial_id}/steps`;
-        await firestore
-          .collection(dbPath)
-          .doc(step_id)
-          .update({
-            [`title`]: step_title,
-            updatedAt: firestore.FieldValue.serverTimestamp()
-          });
+  async (firebase, firestore, dispatch) => {
+    try {
+      const dbPath = `tutorials/${tutorial_id}/steps`;
+      await firestore
+        .collection(dbPath)
+        .doc(step_id)
+        .update({
+          [`title`]: step_title,
+          updatedAt: firestore.FieldValue.serverTimestamp()
+        });
 
-        await getCurrentTutorialData(owner, tutorial_id)(
-          firebase,
-          firestore,
-          dispatch
-        );
-      } catch (e) {
-        console.log(e);
-      }
-    };
+      await getCurrentTutorialData(owner, tutorial_id)(
+        firebase,
+        firestore,
+        dispatch
+      );
+    } catch (e) {
+      console.log(e);
+    }
+  };
 
 export const updateStepTime =
   (owner, tutorial_id, step_id, step_time) =>
-    async (firebase, firestore, dispatch) => {
-      try {
-        const dbPath = `tutorials/${tutorial_id}/steps`;
-
-        await firestore
-          .collection(dbPath)
-          .doc(step_id)
-          .update({
-            [`time`]: step_time,
-            updatedAt: firestore.FieldValue.serverTimestamp()
-          });
+  async (firebase, firestore, dispatch) => {
+    try {
+      const dbPath = `tutorials/${tutorial_id}/steps`;
 
-        await getCurrentTutorialData(owner, tutorial_id)(
-          firebase,
-          firestore,
-          dispatch
-        );
-      } catch (e) {
-        console.log(e.message);
-      }
-    };
+      await firestore
+        .collection(dbPath)
+        .doc(step_id)
+        .update({
+          [`time`]: step_time,
+          updatedAt: firestore.FieldValue.serverTimestamp()
+        });
+
+      await getCurrentTutorialData(owner, tutorial_id)(
+        firebase,
+        firestore,
+        dispatch
+      );
+    } catch (e) {
+      console.log(e.message);
+    }
+  };
 
 export const setTutorialTheme =
   ({ tutorial_id, owner, bgColor, textColor }) =>
-    async (firebase, firestore, dispatch) => {
-      try {
-        const dbPath = `tutorials`;
+  async (firebase, firestore, dispatch) => {
+    try {
+      const dbPath = `tutorials`;
 
-        await firestore.collection(dbPath).doc(tutorial_id).update({
-          text_color: textColor,
-          background_color: bgColor,
-          updatedAt: firestore.FieldValue.serverTimestamp()
-        });
+      await firestore.collection(dbPath).doc(tutorial_id).update({
+        text_color: textColor,
+        background_color: bgColor,
+        updatedAt: firestore.FieldValue.serverTimestamp()
+      });
 
-        await getCurrentTutorialData(owner, tutorial_id)(
-          firebase,
-          firestore,
-          dispatch
-        );
-      } catch (e) {
-        console.log(e.message);
-      }
-    };
+      await getCurrentTutorialData(owner, tutorial_id)(
+        firebase,
+        firestore,
+        dispatch
+      );
+    } catch (e) {
+      console.log(e.message);
+    }
+  };
diff --git a/src/stories/HomePage/index.stories.jsx b/src/stories/HomePage/index.stories.jsx
index c8dd2a94..b69021ff 100644
--- a/src/stories/HomePage/index.stories.jsx
+++ b/src/stories/HomePage/index.stories.jsx
@@ -3,6 +3,7 @@ import React from "react";
 import ProviderWrapper from "../../helpers/providerWrapper";
 import Home from "../../components/HomePage/index";
 import { MemoryRouter } from "react-router-dom";
+import Footer from "../../components/Footer";
 
 export default {
   title: "Home/HomePage",
@@ -21,6 +22,7 @@ const Template = args => (
   <ProviderWrapper>
     <MemoryRouter>
       <Home {...args} />
+      <Footer />
     </MemoryRouter>
   </ProviderWrapper>
 );