diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json
index 983199552..b0a31927c 100644
--- a/zubhub_frontend/zubhub/public/locales/en/translation.json
+++ b/zubhub_frontend/zubhub/public/locales/en/translation.json
@@ -1089,6 +1089,12 @@
   },
 
  "activities": {
+  "title": "Activities",
+  "tabs": {
+    "published": "Published",
+    "unpublished": "Unpublished",
+    "ariaLabel": "Activity Tabs"
+  },
    "LinkedProjects": "Linked Projects",
    "errors": {
       "emptyList": "No activities created yet !",
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/activities/activitiesStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/activities/activitiesStyles.js
index cdd5a18bf..7ad17b4ca 100644
--- a/zubhub_frontend/zubhub/src/assets/js/styles/views/activities/activitiesStyles.js
+++ b/zubhub_frontend/zubhub/src/assets/js/styles/views/activities/activitiesStyles.js
@@ -1,10 +1,24 @@
 const styles = theme => ({
+  tabs: {
+    margin: '2em 0',
+    [theme.breakpoints.up('900')]: {
+      paddingRight: '1em',
+    },
+  },
+  tab: {
+    textTransform: 'none',
+    fontSize: '1.2em',
+    fontWeight: 600,
+  },
   activityListContainer: {
     marginTop: '2em',
     [theme.breakpoints.down('378')]: {
       marginTop: '3em',
     },
   },
+  activitiesContainer: {
+    marginTop: 0,
+  },
   activityBoxContainer: {
     padding: '5vh 10px',
     position: 'relative',
diff --git a/zubhub_frontend/zubhub/src/store/actions/activityActions.js b/zubhub_frontend/zubhub/src/store/actions/activityActions.js
index 4e1498b25..7300dd7e6 100644
--- a/zubhub_frontend/zubhub/src/store/actions/activityActions.js
+++ b/zubhub_frontend/zubhub/src/store/actions/activityActions.js
@@ -2,181 +2,155 @@ import { toast } from 'react-toastify';
 
 import API from '../../api/api';
 import * as at from '../actionTypes';
-let ActivityAPI = new API();
 
-export const setActivities = activities => {
-  return dispatch => {
-    dispatch({
-      type: at.SET_ACTIVITIES,
-      payload: { all_activities: activities },
-    });
-  };
+const ActivityAPI = new API();
+
+export const setActivities = activities => dispatch => {
+  dispatch({
+    type: at.SET_ACTIVITIES,
+    payload: { all_activities: activities },
+  });
 };
 
-export const setActivity = activity => {
-  return dispatch => {
-    dispatch({
-      type: at.SET_ACTIVITY,
-      payload: { activity: activity },
-    });
-  };
+export const setActivity = activity => dispatch => {
+  dispatch({
+    type: at.SET_ACTIVITY,
+    payload: { activity },
+  });
 };
 
 export const getMyActivities = ({ t, token }) => {
   console.log('getMyActivities', token);
-  return async dispatch => {
-    return ActivityAPI.getMyActivities(token)
+  return async dispatch =>
+    ActivityAPI.getMyActivities(token)
       .then(res => {
         console.log('result', res);
 
         if (res.status >= 200 && res.status < 300) {
-          let response = res.json();
+          const response = res.json();
           response.then(all => {
             console.log('all', all);
             dispatch({
               type: at.SET_ACTIVITIES,
               payload: {
-                all_activities: all,
+                userActivities: all,
               },
             });
           });
+        } else if (res.status === 403 && res.statusText === 'Forbidden') {
+          toast.warning(t('activityDetails.activity.delete.dialog.forbidden'));
         } else {
-          if (res.status === 403 && res.statusText === 'Forbidden') {
-            toast.warning(
-              t('activityDetails.activity.delete.dialog.forbidden'),
-            );
-          } else {
-            toast.warning(t('activities.errors.dialog.serverError'));
-          }
+          toast.warning(t('activities.errors.dialog.serverError'));
         }
       })
-      .catch(error => {
+      .catch(() => {
         toast.warning(t('activities.errors.dialog.serverError'));
       });
-  };
 };
 
 export const getUnPublishedActivities = ({ t, token }) => {
   console.log('getUnPublishedActivities', token);
-  return async dispatch => {
-    return ActivityAPI.getUnPublishedActivities(token)
+  return async dispatch =>
+    ActivityAPI.getUnPublishedActivities(token)
       .then(res => {
         console.log('result', res);
 
         if (res.status >= 200 && res.status < 300) {
-          let response = res.json();
+          const response = res.json();
           response.then(all => {
             console.log('all', all);
             dispatch({
               type: at.SET_ACTIVITIES,
               payload: {
-                all_activities: all,
+                unPublishedActivities: all,
               },
             });
           });
+        } else if (res.status === 403 && res.statusText === 'Forbidden') {
+          toast.warning(t('activityDetails.activity.delete.dialog.forbidden'));
         } else {
-          if (res.status === 403 && res.statusText === 'Forbidden') {
-            toast.warning(
-              t('activityDetails.activity.delete.dialog.forbidden'),
-            );
-          } else {
-            toast.warning(t('activities.errors.dialog.serverError'));
-          }
+          toast.warning(t('activities.errors.dialog.serverError'));
         }
       })
-      .catch(error => {
+      .catch(() => {
         toast.warning(t('activities.errors.dialog.serverError'));
       });
-  };
 };
 
-export const getActivities = t => {
-  return async dispatch => {
-    return ActivityAPI.getActivities()
-      .then(res => {
-        if (res.status >= 200 && res.status < 300) {
-          let response = res.json();
-          response.then(all => {
-            dispatch({
-              type: at.SET_ACTIVITIES,
-              payload: {
-                all_activities: all,
-              },
-            });
+export const getActivities = t => async dispatch =>
+  ActivityAPI.getActivities()
+    .then(res => {
+      if (res.status >= 200 && res.status < 300) {
+        const response = res.json();
+        response.then(all => {
+          dispatch({
+            type: at.SET_ACTIVITIES,
+            payload: {
+              all_activities: all,
+            },
           });
-        } else {
-          if (res.status === 403 && res.statusText === 'Forbidden') {
-            toast.warning(
-              t('activityDetails.activity.delete.dialog.forbidden'),
-            );
-          } else {
-            toast.warning(t('activities.errors.dialog.serverError'));
-          }
-        }
-      })
-      .catch(error => {
-        toast.warning(t('activities.errors.dialog.serverError'));
-      });
-  };
-};
-
-export const activityCountView = args => {
-  return async dispatch => {
-    try {
-      const result = await ActivityAPI.activityToggleSave(args);
-      dispatch({
-        type: at.SET_ACTIVITY,
-        payload: { activity: result },
-      });
-      return { loading: false };
-    } catch (error) {
-      if (error.message.startsWith('Unexpected')) {
-        toast.warning(args.t('projects.errors.unexpected'));
+        });
+      } else if (res.status === 403 && res.statusText === 'Forbidden') {
+        toast.warning(t('activityDetails.activity.delete.dialog.forbidden'));
       } else {
-        toast.warning(error.message);
+        toast.warning(t('activities.errors.dialog.serverError'));
       }
-      return { loading: false };
+    })
+    .catch(() => {
+      toast.warning(t('activities.errors.dialog.serverError'));
+    });
+
+export const activityCountView = args => async dispatch => {
+  try {
+    const result = await ActivityAPI.activityToggleSave(args);
+    dispatch({
+      type: at.SET_ACTIVITY,
+      payload: { activity: result },
+    });
+    return { loading: false };
+  } catch (error) {
+    if (error.message.startsWith('Unexpected')) {
+      toast.warning(args.t('projects.errors.unexpected'));
+    } else {
+      toast.warning(error.message);
     }
-  };
+    return { loading: false };
+  }
 };
 
-export const activityToggleSave = args => {
-  return async dispatch => {
-    try {
-      const result = await ActivityAPI.activityToggleSave(args);
-      dispatch({
-        type: at.SET_ACTIVITY,
-        payload: { activity: result },
-      });
-      return { loading: false };
-    } catch (error) {
-      if (error.message.startsWith('Unexpected')) {
-        toast.warning(args.t('projects.errors.unexpected'));
-      } else {
-        toast.warning(error.message);
-      }
-      return { loading: false };
+export const activityToggleSave = args => async dispatch => {
+  try {
+    const result = await ActivityAPI.activityToggleSave(args);
+    dispatch({
+      type: at.SET_ACTIVITY,
+      payload: { activity: result },
+    });
+    return { loading: false };
+  } catch (error) {
+    if (error.message.startsWith('Unexpected')) {
+      toast.warning(args.t('projects.errors.unexpected'));
+    } else {
+      toast.warning(error.message);
     }
-  };
+    return { loading: false };
+  }
 };
 
-export const activityTogglePublish = args => {
-  return async dispatch => {
-    try {
-      const result = await ActivityAPI.activityTogglePublish(args);
+export const activityTogglePublish = args => async dispatch => {
+  try {
+    const result = await ActivityAPI.activityTogglePublish(args);
 
-      dispatch({
-        type: at.SET_ACTIVITY,
-        payload: { activity: result },
-      });
-      return result;
-    } catch (error) {
-      if (error.message.startsWith('Unexpected')) {
-        toast.warning(args.t('projects.errors.unexpected'));
-      } else {
-        toast.warning(error.message);
-      }
-      return { error: error };
+    dispatch({
+      type: at.SET_ACTIVITY,
+      payload: { activity: result },
+    });
+    return result;
+  } catch (error) {
+    if (error.message.startsWith('Unexpected')) {
+      toast.warning(args.t('projects.errors.unexpected'));
+    } else {
+      toast.warning(error.message);
     }
-  };
+    return { error };
+  }
 };
diff --git a/zubhub_frontend/zubhub/src/store/reducers/activityReducer.js b/zubhub_frontend/zubhub/src/store/reducers/activityReducer.js
index b07334b3f..624f2cd4a 100644
--- a/zubhub_frontend/zubhub/src/store/reducers/activityReducer.js
+++ b/zubhub_frontend/zubhub/src/store/reducers/activityReducer.js
@@ -1,9 +1,11 @@
 import * as at from '../actionTypes';
+
 const default_state = {
   all_activities: [],
   published: [],
   unPublishedActivities: [],
   selectedActivity: {},
+  userActivities: [],
 };
 const activities = (state = default_state, action) => {
   switch (action.type) {
diff --git a/zubhub_frontend/zubhub/src/views/activities/activities.jsx b/zubhub_frontend/zubhub/src/views/activities/activities.jsx
index f84503861..8a9ac989c 100644
--- a/zubhub_frontend/zubhub/src/views/activities/activities.jsx
+++ b/zubhub_frontend/zubhub/src/views/activities/activities.jsx
@@ -1,10 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { connect, useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { Grid, Tab, Tabs, Typography } from '@mui/material';
 import { makeStyles } from '@mui/styles';
-import { Grid, Typography } from '@mui/material';
-import clsx from 'clsx';
-
 import {
   getActivities,
   getMyActivities,
@@ -23,73 +20,107 @@ import LoadingPage from '../loading/LoadingPage';
 const useStyles = makeStyles(styles);
 
 function Activities(props) {
-  const location = useLocation();
   const classes = useStyles();
   const [loading, setLoading] = useState(true);
   const { activities } = useSelector(state => state);
-  const [activityList, setActivityList] = useState([]);
-
+  const [activityList, setActivityList] = useState({
+    published: [],
+    unPublishedActivities: [],
+    userActivities: [],
+  });
+  const [tab, setTab] = useState('published');
   const commonClasses = makeStyles(DefaultStyles)();
+  const { t } = props;
 
   useEffect(() => {
-    setActivityList(activities.all_activities);
+    setActivityList(activities);
   }, [activities]);
 
-  const flagMap = {
-    staff: () =>
-      props.getUnPublishedActivities({
-        t: props.t,
-        token: props.auth.token,
-      }),
-    educator: () =>
-      props.getMyActivities({
-        t: props.t,
-        token: props.auth.token,
-      }),
-  };
-  useEffect(async () => {
+  useEffect(() => {
     setLoading(true);
-    if (location.state?.flag && flagMap[location.state.flag]) {
-      await flagMap[location.state.flag]();
-    } else {
+    async function getActivityList() {
+      if (props.auth?.tags.includes('staff')) {
+        await props.getUnPublishedActivities({
+          t: props.t,
+          token: props.auth.token,
+        });
+      } else if (props.auth?.tags.includes('educator')) {
+        await props.getMyActivities({
+          t: props.t,
+          token: props.auth.token,
+        });
+      }
       await props.getActivities(props.t);
     }
-    setActivityList(activities.all_activities);
+    getActivityList();
     setLoading(false);
-  }, [location]);
+  }, []);
+
+  const handleTabChange = (event, newTab) => {
+    setTab(newTab);
+  };
+
+  const ActivityCard = ({ activity }) => (
+    <Grid key={activity.id} item xs={12} sm={6} lg={4} align="center" className={classes.activityBoxContainer}>
+      <Activity
+        key={activity.id}
+        activity={activity}
+        auth={props.auth}
+        activityToggleSave={props.activityToggleSave}
+        t={props.t}
+        navigate={props.navigate}
+      />
+    </Grid>
+  );
 
   if (loading) {
     return <LoadingPage />;
   } else if (!activityList || activityList.length === 0) {
-    return <ErrorPage error={props.t('activities.errors.emptyList')} />;
+    return <ErrorPage error={t('activities.errors.emptyList')} />;
   } else {
     return (
-      <div className={clsx(classes.activityListContainer, commonClasses.smallScreenPadding)}>
-        <Typography style={{ marginBottom: 50 }} className={commonClasses.title1}>
-          Activities
-        </Typography>
-        <Grid container spacing={3}>
-          {activityList &&
-            activityList.map((activity, index) => (
-              <Grid
-                key={`activityContainer-${index}`}
-                item
-                xs={12}
-                sm={6}
-                lg={4}
-                align="center"
-                className={classes.activityBoxContainer}
-              >
-                <Activity
-                  key={`activity-${index}`}
-                  activity={activity}
-                  auth={props.auth}
-                  activityToggleSave={props.activityToggleSave}
-                  t={props.t}
-                  navigate={props.navigate}
-                />
-              </Grid>
-            ))}
+      <div className={commonClasses.smallScreenPadding}>
+        <Typography className={commonClasses.title1}>{t('activities.title')}</Typography>
+        {(props.auth?.tags.includes('staff') || props.auth?.tags.includes('educator')) && (
+          <Tabs
+            value={tab}
+            onChange={handleTabChange}
+            aria-label={t('activities.tabs.ariaLabel')}
+            indicatorColor="primary"
+            variant="fullWidth"
+            className={classes.tabs}
+          >
+            <Tab
+              value="published"
+              label={`${t('activities.tabs.published')} (${activityList.published?.length})`}
+              className={classes.tab}
+            />
+            <Tab
+              value="unpublished"
+              label={`${t('activities.tabs.unpublished')} (${
+                props.auth?.tags.includes('staff')
+                  ? activityList.unPublishedActivities?.length
+                  : activityList.userActivities.filter(activity => !activity.publish).length
+              })
+                  `}
+              className={classes.tab}
+            />
+          </Tabs>
+        )}
+        <Grid container spacing={3} className={classes.activitiesContainer}>
+          {activityList.published &&
+            tab === 'published' &&
+            activityList.published.map(activity => <ActivityCard activity={activity} key={activity.id} />)}
+          {activityList.unPublishedActivities &&
+            tab === 'unpublished' &&
+            props.auth?.tags.includes('staff') &&
+            activityList.unPublishedActivities.map(activity => <ActivityCard activity={activity} key={activity.id} />)}
+          {activityList.userActivities &&
+            tab === 'unpublished' &&
+            props.auth?.tags.includes('educator') &&
+            activityList.userActivities
+              .filter(activity => !activity.publish)
+              .map(activity => <ActivityCard activity={activity} key={activity.id} />)}
         </Grid>
       </div>
     );