diff --git a/cypress/e2e/authed_tests/visit_routes.cy.js b/cypress/e2e/authed_tests/visit_routes.cy.js
index 79d76e00..8a6e88d8 100644
--- a/cypress/e2e/authed_tests/visit_routes.cy.js
+++ b/cypress/e2e/authed_tests/visit_routes.cy.js
@@ -84,6 +84,15 @@ describe("Authenticated Route Access Test | CodeLabz", () => {
     });
   });
 
+  it("Visit Bookmarks Page - Passing", function () {
+    cy.visit(`${this.base_url}bookmarks`);
+    cy.wait(5000);
+
+    cy.location().should(loc => {
+      expect(loc.href).to.eq(`${this.base_url}bookmarks`);
+    });
+  });
+
   it("Visit Organization Page - Passing", function () {
     cy.visit(`${this.base_url}org/codelabzorg`);
     cy.wait(5000);
diff --git a/cypress/e2e/unauthed_test/visit_routes.spec.cy.js b/cypress/e2e/unauthed_test/visit_routes.spec.cy.js
index 76dc5abd..0a9ac579 100644
--- a/cypress/e2e/unauthed_test/visit_routes.spec.cy.js
+++ b/cypress/e2e/unauthed_test/visit_routes.spec.cy.js
@@ -74,6 +74,15 @@ describe("Unauthenticated Routes Access Test | CodeLabz", () => {
     });
   });
 
+  it("Forbid Visit Bookmarks Page - Passing", function () {
+    cy.visit(`${this.base_url}bookmarks`);
+    cy.wait(5000);
+
+    cy.location().should(loc => {
+      expect(loc.href).to.eq(`${this.base_url}login`);
+    });
+  });
+
   it("Forbid Visit Organization Page - Passing", function () {
     cy.visit(`${this.base_url}org/settings/codelabzorg`);
     cy.wait(5000);
diff --git a/src/components/BookmarksPage/index.jsx b/src/components/BookmarksPage/index.jsx
new file mode 100644
index 00000000..7bbd5c87
--- /dev/null
+++ b/src/components/BookmarksPage/index.jsx
@@ -0,0 +1,391 @@
+import React, { useEffect, useState } from "react";
+import Card from "@mui/material/Card";
+import CardComponent from "../CodelabCard/index";
+import Typography from "@mui/material/Typography";
+import BottomNavigation from "@mui/material/BottomNavigation";
+import BottomNavigationAction from "@mui/material/BottomNavigationAction";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import Divider from "@mui/material/Divider";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import List from "@mui/material/List";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import TabContext from "@mui/lab/TabContext";
+import TabPanel from "@mui/lab/TabPanel";
+import EventAvailableIcon from "@mui/icons-material/EventAvailable";
+import EventSeatIcon from "@mui/icons-material/EventSeat";
+import SupervisorAccountIcon from "@mui/icons-material/SupervisorAccount";
+import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
+import useStyles from "./styles";
+import SideBar from "../SideBar/index";
+import TagCard from "../CardTabs/Tags/index";
+import EventsCard from "../CardTabs/Events/index";
+import OrgUser from "../../assets/images/org-user.svg";
+import UserCard from "../CardTabs/Users/index";
+import NewCodelabz from "../Topbar/NewCodelabz";
+import CardWithPicture from "../Card/CardWithPicture";
+import CardWithoutPicture from "../Card/CardWithoutPicture";
+import Activity from "../Topbar/Activity";
+import useWindowSize from "../../helpers/customHooks/useWindowSize";
+import NewTutorial from "../Tutorials/NewTutorial";
+import { useDispatch, useSelector } from "react-redux";
+import { useFirebase, useFirestore } from "react-redux-firebase";
+import {
+  getTutorialFeedData,
+  getTutorialFeedIdArray
+} from "../../store/actions/tutorialPageActions";
+import { UserIsAllowedUserDashboard } from "../../auth";
+
+function BookmarkPage({ background = "white", textColor = "black" }) {
+  const classes = useStyles();
+  const dispatch = useDispatch();
+  const firebase = useFirebase();
+  const firestore = useFirestore();
+  const [value, setValue] = useState(2);
+  const [selectedTab, setSelectedTab] = useState("1");
+  const [visibleModal, setVisibleModal] = useState(false);
+  const currentUser = firebase.auth().currentUser;
+  const [idList, setIdList] = useState([]);
+  const [footerContent, setFooterContent] = useState([
+    { name: "Help", link: "https://dev.codelabz.io/" },
+    { name: "About", link: "https://dev.codelabz.io/" },
+    { name: "Content Policy", link: "https://dev.codelabz.io/" },
+    { name: "Terms", link: "https://dev.codelabz.io/" },
+    { name: "Privacy Policy", link: "https://dev.codelabz.io/" },
+    {
+      name: `CodeLabz @${new Date().getFullYear()}`,
+      link: "https://dev.codelabz.io/"
+    }
+  ]);
+
+  const windowSize = useWindowSize();
+  const [openMenu, setOpen] = useState(false);
+  const toggleSlider = () => {
+    setOpen(!openMenu);
+  };
+  const [upcomingEvents, setUpEvents] = useState([
+    {
+      name: "Google Summer of Code",
+      img: [OrgUser],
+      date: "25 March, 2022"
+    },
+    {
+      name: "Google Summer of Code",
+      img: [OrgUser],
+      date: "25 March, 2022"
+    },
+    {
+      name: "Google Summer of Code",
+      img: [OrgUser],
+      date: "25 March, 2022"
+    },
+    {
+      name: "Google Summer of Code",
+      img: [OrgUser],
+      date: "25 March, 2022"
+    }
+  ]);
+  const [tags, setTags] = useState([
+    "HTML",
+    "JavaScript",
+    "Css",
+    "Python",
+    "React",
+    "Java",
+    "HTML",
+    "JavaScript",
+    "Css",
+    "Python",
+    "React",
+    "HTML",
+    "JavaScript",
+    "Css",
+    "Python",
+    "React",
+    "Java",
+    "HTML",
+    "JavaScript",
+    "Css",
+    "Python",
+    "React"
+  ]);
+
+  const [usersToFollow, setUsersToFollow] = useState([
+    {
+      name: "Janvi Thakkar",
+      img: [OrgUser],
+      desg: "Software Engineer",
+      onClick: {}
+    },
+    {
+      name: "Janvi Thakkar",
+      img: [OrgUser],
+      desg: "Software Engineer",
+      onClick: {}
+    },
+    {
+      name: "Janvi Thakkar",
+      img: [OrgUser],
+      desg: "Software Engineer",
+      onClick: {}
+    },
+    {
+      name: "Janvi Thakkar",
+      img: [OrgUser],
+      desg: "Software Engineer",
+      onClick: {}
+    }
+  ]);
+
+  const [contributors, setContributors] = useState([
+    {
+      name: "Janvi Thakkar",
+      img: [OrgUser],
+      desg: "Software Engineer",
+      onClick: {}
+    },
+    {
+      name: "Janvi Thakkar",
+      img: [OrgUser],
+      desg: "Software Engineer",
+      onClick: {}
+    },
+    {
+      name: "Janvi Thakkar",
+      img: [OrgUser],
+      desg: "Software Engineer",
+      onClick: {}
+    },
+    {
+      name: "Janvi Thakkar",
+      img: [OrgUser],
+      desg: "Software Engineer",
+      onClick: {}
+    }
+  ]);
+
+  const profileData = useSelector(({ firebase: { profile } }) => profile);
+  useEffect(() => {
+    const getFeed = async () => {
+      const tutorialIdArray = await getTutorialFeedIdArray(profileData.uid)(
+        firebase,
+        firestore,
+        dispatch
+      );
+      getTutorialFeedData(tutorialIdArray)(firebase, firestore, dispatch);
+    };
+    getFeed();
+    setIdList(profileData.bookmarks);
+  }, []);
+  const tutorials = useSelector(
+    ({
+      tutorialPage: {
+        feed: { homepageFeedArray }
+      }
+    }) => homepageFeedArray
+  );
+
+  const notification = () => {};
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+  const handleTabChange = (event, newValue) => {
+    setSelectedTab(newValue);
+  };
+  const closeModal = () => {
+    setVisibleModal(prev => !prev);
+  };
+  return (
+    <Card
+      className={classes.wrapper}
+      style={{ background: background }}
+      data-testId="bookmarkpage"
+    >
+      <Grid container justifyContent="center" className={classes.contentPart}>
+        <Grid item xs={2} className={classes.sideBody}>
+          {windowSize.width > 750 && (
+            <Grid
+              item
+              container
+              className={classes.leftSideCard}
+              direction="column"
+              style={{
+                width: "100%",
+                overflow: "auto",
+                backgroundColor: "transparent",
+                border: "none",
+                boxShadow: "none"
+              }}
+            >
+              <Grid item className={classes.outerSideBar}>
+                <SideBar open={openMenu} toggleSlider={toggleSlider} />
+              </Grid>
+            </Grid>
+          )}
+        </Grid>
+        <Grid
+          item
+          className={classes.mainBody}
+          data-testId="homepageMainBody"
+          xs={6}
+        >
+          <NewTutorial
+            viewModal={visibleModal}
+            onSidebarClick={e => closeModal(e)}
+          />
+          <Card className={classes.card}>
+            <Activity />
+          </Card>
+          <Box item sx={{ display: { md: "none" } }}>
+            <TagCard tags={tags} />
+          </Box>
+          {tutorials.map((tutorial,i) => {
+            let obj = idList.find(o => o.id === tutorial.tutorial_id)
+            if(obj==false && idList[i].isSave==false){
+                return <></>
+            } 
+            return !tutorial?.featured_image ? (
+              <CardWithoutPicture tutorial={tutorial} />
+            ) : (
+              <CardWithPicture tutorial={tutorial} />
+            );
+          })}
+          <Box
+            sx={{
+              width: "100%",
+              typography: "subtitle1",
+              display: { md: "none" }
+            }}
+          >
+            <TabContext value={selectedTab}>
+              <Tabs
+                value={selectedTab}
+                onChange={handleTabChange}
+                scrollButtons="on"
+                indicatorColor="primary"
+                textColor="primary"
+                aria-label="scrollable force tabs example"
+                style={{
+                  borderBottom: "1px solid gray",
+                  margin: "5px"
+                }}
+              >
+                <Tab
+                  icon={<EventAvailableIcon />}
+                  value="1"
+                  style={{ width: "25%" }}
+                />
+                <Tab
+                  icon={<EventSeatIcon />}
+                  value="2"
+                  style={{ width: "25%" }}
+                />
+                <Tab
+                  icon={<ThumbUpAltIcon />}
+                  value="3"
+                  style={{ width: "25%" }}
+                />
+                <Tab
+                  icon={<SupervisorAccountIcon />}
+                  value="4"
+                  style={{ width: "25%" }}
+                />
+              </Tabs>
+              <TabPanel value="1" style={{ padding: 0 }}>
+                <EventsCard title={"Upcoming Events"} events={upcomingEvents} />
+              </TabPanel>
+              <TabPanel value="2" style={{ padding: 0 }}>
+                <EventsCard title={"Popular Events"} events={upcomingEvents} />
+              </TabPanel>
+              <TabPanel value="3" style={{ padding: 0 }}>
+                <UserCard title={"Who to Follow"} users={usersToFollow} />
+              </TabPanel>
+              <TabPanel value="4" style={{ padding: 0 }}>
+                <UserCard title={"Contributors"} users={contributors} />
+              </TabPanel>
+            </TabContext>
+          </Box>
+        </Grid>
+
+        <Grid item className={classes.sideBody} xs={3}>
+          <Grid
+            item
+            container
+            alignContent="center"
+            direction="column"
+            style={{
+              width: "100%"
+            }}
+            data-testId="homepageTagSidebar"
+          >
+            <Grid item style={{ minWidth: "100%" }}>
+              <TagCard tags={tags} />
+            </Grid>
+          </Grid>
+          <Grid
+            container
+            alignContent="center"
+            direction="column"
+            style={{
+              width: "100%"
+            }}
+            data-testId="homepageUpcomingEvents"
+          >
+            <Grid item style={{ minWidth: "100%" }}>
+              <EventsCard title={"Upcoming Events"} events={upcomingEvents} />
+            </Grid>
+          </Grid>
+          <Grid
+            container
+            alignContent="center"
+            direction="column"
+            style={{
+              width: "100%"
+            }}
+            data-testId="homepageUsersToFollow"
+          >
+            <Grid item style={{ minWidth: "100%" }}>
+              <UserCard title={"Who to Follow"} users={usersToFollow} />
+            </Grid>
+          </Grid>
+          <Grid
+            container
+            alignContent="center"
+            direction="column"
+            style={{
+              width: "100%",
+              overflow: "auto",
+              maxHeight: "25rem",
+              backgroundColor: "transparent",
+              border: "none",
+              boxShadow: "none"
+            }}
+            data-testId="homepageContributors"
+          >
+            <Grid item style={{ minWidth: "100%" }}>
+              <UserCard title={"Contributors"} users={contributors} />
+            </Grid>
+          </Grid>
+
+          <Grid
+            container
+            alignContent="center"
+            direction="column"
+            style={{
+              width: "100%"
+            }}
+            data-testId="homepagePopularEventSidebar"
+          >
+            <Grid item style={{ minWidth: "100%" }}>
+              <EventsCard title={"Popular Events"} events={upcomingEvents} />
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Card>
+  );
+}
+
+export default UserIsAllowedUserDashboard(BookmarkPage);
diff --git a/src/components/BookmarksPage/styles.jsx b/src/components/BookmarksPage/styles.jsx
new file mode 100644
index 00000000..069d3bce
--- /dev/null
+++ b/src/components/BookmarksPage/styles.jsx
@@ -0,0 +1,100 @@
+import { makeStyles } from "@mui/styles";
+
+const useStyles = makeStyles(theme => ({
+  wrapper: {
+    display: "flex",
+    alignItems: "top",
+    justifyContent: "center",
+    height: "100%",
+    background: "#f2f2f2"
+  },
+  mainBody: {
+    display: "flex",
+    alignContent: "center",
+    justifyContent: "center",
+    height: "100%",
+    margin: "1rem 0 2rem 0",
+    flexDirection: "column"
+  },
+  sideBody: {
+    display: "flex",
+    alignContent: "center",
+    justifyContent: "center",
+    width: "fit-content",
+    margin: "1rem 1rem 2rem 1rem",
+    height: "100%",
+    flexDirection: "column",
+    [theme.breakpoints.down(960)]: {
+      display: "none"
+    },
+    maxWidth: "300px"
+  },
+  cardBody: {
+    display: "flex",
+    justifyContent: "space-between",
+    width: "100%",
+    alignItems: "center",
+    direction: "column"
+  },
+  sort: {
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexDirection: "row",
+    margin: "0rem 0 0rem 0"
+  },
+  sortedList: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-around",
+    flexDirection: "row",
+    width: "auto",
+    [theme.breakpoints.down(750)]: {
+      display: "none"
+    }
+  },
+  navigation: {
+    "&:selcted": {
+      border: "2px solid black"
+    }
+  },
+  sideCard: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "column",
+    maxHeight: "35rem",
+    margin: "0 0 2rem 0",
+    background: "white",
+    boxShadow: ".5px 2px 5px gray"
+  },
+
+  leftSideCard: {
+    display: "flex",
+    alignItems: "left",
+    justifyContent: "center",
+    flexDirection: "column",
+    maxHeight: "35rem",
+    margin: "0 0 2rem 0",
+    background: "white",
+    boxShadow: ".5px 2px 5px gray"
+  },
+
+  outerSideBar: {
+    minWidth: "100%"
+  },
+  contentPart: {
+    height: "100%",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    maxWidth: "1400px"
+  },
+  card: {
+    padding: "6px",
+    margin: "0 0.5rem 0 0.5rem"
+  }
+}));
+
+export default useStyles;
diff --git a/src/components/Topbar/Activity/index.jsx b/src/components/Topbar/Activity/index.jsx
index ae6199c2..daf7cefc 100644
--- a/src/components/Topbar/Activity/index.jsx
+++ b/src/components/Topbar/Activity/index.jsx
@@ -7,7 +7,7 @@ import EmojiEventsIcon from "@mui/icons-material/EmojiEvents";
 import { makeStyles } from "@mui/styles";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
-
+import { useLocation } from "react-router-dom";
 const useStyles = makeStyles(theme => ({
   root: {
     display: "flex",
@@ -21,7 +21,7 @@ const useStyles = makeStyles(theme => ({
 function Activity() {
   const classes = useStyles();
   const [List, setList] = useState(1);
-
+  const location = useLocation().pathname;
   const acitvitylist = [
     {
       id: 1,
@@ -45,7 +45,9 @@ function Activity() {
       <Grid container data-testId="activityCard">
         <div className={classes.root}>
           <Grid item>
-            <Typography variant="h6">Activity</Typography>
+            <Typography variant="h6">
+              {location == "/" ? "Activity" : "Bookmarks"}
+            </Typography>
           </Grid>
           <Grid item>
             <ActivityList
diff --git a/src/routes.jsx b/src/routes.jsx
index 39493a49..c5f422b8 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 BookmarkPage from "./components/BookmarksPage";
 
 const AuthIsLoaded = ({ children }) => {
   const profile = useSelector(({ firebase: { profile } }) => profile);
@@ -106,6 +107,15 @@ const Routes = () => {
             path={"/forgotpassword"}
             render={props => <AuthPage {...props} type={"forgotpassword"} />}
           />
+          <Route
+            exact
+            path={"/bookmarks"}
+            render={props => (
+              <>
+                <BookmarkPage {...props} />
+              </>
+            )}
+          />
           <Route
             exact
             path={"/manageusers"}