diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json
index 51afb1356..3ba3b059c 100644
--- a/zubhub_frontend/zubhub/public/locales/en/translation.json
+++ b/zubhub_frontend/zubhub/public/locales/en/translation.json
@@ -1084,7 +1084,9 @@
          "mediaServerError": "Sorry media server is down we couldn't upload your files! try again later",
          "uploadError": "error occurred while downloading file : "
       }
-   }
+   },
+   "tooltipMore": " more",
+   "tooltipUnpublished": "Unpublished"
  },
 
   "activityDetails": {
diff --git a/zubhub_frontend/zubhub/src/assets/js/colors.js b/zubhub_frontend/zubhub/src/assets/js/colors.js
index 0cdb70aa2..bb93007c3 100644
--- a/zubhub_frontend/zubhub/src/assets/js/colors.js
+++ b/zubhub_frontend/zubhub/src/assets/js/colors.js
@@ -12,7 +12,8 @@ export const colors = {
     red: '#f44336',
     'blue-light': '#00B8C433',
     'blue-dark': '#7BA8AB',
-    'blue-pale': '#DBECFF'
+    'blue-pale': '#DBECFF',
+    border: '#7E5B4B',
 }
 
 export const borders = {
diff --git a/zubhub_frontend/zubhub/src/assets/js/muiTheme.js b/zubhub_frontend/zubhub/src/assets/js/muiTheme.js
index 53022e34f..90846a854 100644
--- a/zubhub_frontend/zubhub/src/assets/js/muiTheme.js
+++ b/zubhub_frontend/zubhub/src/assets/js/muiTheme.js
@@ -32,4 +32,17 @@ export const theme = createTheme({
       },
     },
   },
+  categoryColors: {
+    Animations: '#FCB07F',
+    Art: '#F8D991',
+    Science: '#FBC9B3',
+    Coding: '#65B4BD',
+    Electronics: '#F1D27C',
+    Toys: '#FAC5C2',
+    Games: '#6065A4',
+    Mechanical: '#F571AE',
+    Music: '#F1FC73',
+    Robotics: '#A66CA9',
+    Structures: '#FAE393',
+  }
 });
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/components/activity/activityStyle.js b/zubhub_frontend/zubhub/src/assets/js/styles/components/activity/activityStyle.js
index bbbeaf037..fb1a1270e 100644
--- a/zubhub_frontend/zubhub/src/assets/js/styles/components/activity/activityStyle.js
+++ b/zubhub_frontend/zubhub/src/assets/js/styles/components/activity/activityStyle.js
@@ -1,15 +1,16 @@
+import { colors } from "../../../colors";
+
 export const style = theme => ({
   activityCardContainer: {
     position: 'relative',
-    // maxWidth: '350px',
-    // minWidth: '300px',
-    height: '95%',
+    width: '100%',
+    textAlign: 'left',
   },
   activityCard: {
     maxWidth: '100%',
-    borderRadius: '15px',
+    height: '33em',
+    borderRadius: '20px',
     position: 'relative!important',
-    height: '100%',
   },
   opacity: {
     backgroundColor: 'black',
@@ -27,58 +28,42 @@ export const style = theme => ({
     objectFit: 'cover',
     height: '100%',
   },
+  unpublishedCardImage: {
+    filter: 'brightness(60%)'
+  },
+  publishStyle: {
+    position: 'absolute',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: 'white',
+    top: '1em',
+    right: '1em',
+    zIndex: 1,
+    backgroundColor: colors.gray,
+    padding: '0.2em 1em',
+    borderRadius: '50px',
+    fontWeight: 700,
+    fontSize: '1.05rem',
+  },
   mediaBoxStyle: {
     width: '100%',
-    height: '17em',
+    height: '13em',
     position: 'relative',
     padding: '2%',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
   },
-  activityTagsBox: {
-    position: 'absolute',
-    top: '10px',
-    right: '10%',
-    display: 'flex',
-  },
-  activityTagPill: {
-    backgroundColor: 'white',
-    color: 'var(--text-color2)',
-    border: '1px solid var(--text-color2)',
-    '&:hover': {
-      backgroundColor: 'var(--text-color2)',
-      color: 'white',
-      border: '1px solid white',
-    },
-  },
-  activityTagsShowMore: {
-    '&:hover': {
-      backgroundColor: 'white',
-      color: 'var(--text-color2)',
-      border: '1px solid white',
-    },
-  },
-  tagsShowMoreIconContainer: {
-    //position: 'absolute',
-  },
-  tagsShowMoreList: {
-    position: 'absolute',
-    right: '0%',
-    backgroundColor: 'white',
-    maxHeight: '12em',
-    overflow: 'auto',
-    borderRadius: '10px',
-  },
-
   activityCardContent: {
     width: '100%',
-    position: 'relative',
-  },
-  activityCardInfoBox: {
-    height: '100%',
+    padding: '16px',
+    "&:last-child": {
+      paddingBottom: '12px'
+    },
     display: 'flex',
-    justifyContent: 'space-between',
+    flexDirection: 'column',
+    justifyContent: 'space-between'
   },
   projectsCount: {
     color: 'white',
@@ -92,10 +77,70 @@ export const style = theme => ({
     marginLeft: '5px',
   },
   activityTitle: {
-    fontSize: '1.1rem',
-    fontWeight: '900',
+    fontSize: '1.3rem',
+    fontWeight: 700,
     color: 'var(--text-color1)',
-    // width: '80%',
-    textAlign: '-webkit-auto',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  },
+  activityDescription: {
+    height: '48px',
+    margin: '8px 0',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    display: '-webkit-box',
+    '-webkit-line-clamp': 2,
+    '-webkit-box-orient': 'vertical',
+  },
+  activityCategoryContainer: {
+    margin: '12px 0',
+    display: 'flex',
+    flexWrap: 'nowrap',
+    gap: '8px',
+  },
+  activityCategory: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    fontSize: '0.9em',
+    padding: '2px 10px',
+    border: '1px solid #7E5B4B',
+    borderRadius: '10em',
+    background: '#F1D27C'
+  },
+  footer: {
+    marginTop: 10,
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    overflow: 'hidden',
+  },
+  captionStyle: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  captionIconStyle: {
+    backgroundColor: '#eee',
+    padding: '2px 7px',
+    borderRadius: 25,
+    justifyContent: 'space-between',
+    fontWeight: '600',
+    display: 'flex',
+    alignItems: 'center',
+    marginRight: '1em',
+    '& svg': {
+      fill: 'rgba(0,0,0,0.54)',
+      marginRight: '0.5em',
+      fontSize:'1.1rem',
+    },
   },
+  date: {
+    fontSize: '0.9rem',
+    fontWeight: '600',
+    marginLeft: 'auto',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  }
 });
diff --git a/zubhub_frontend/zubhub/src/components/activity/activity.jsx b/zubhub_frontend/zubhub/src/components/activity/activity.jsx
index 6fc49839a..9faf52a4e 100644
--- a/zubhub_frontend/zubhub/src/components/activity/activity.jsx
+++ b/zubhub_frontend/zubhub/src/components/activity/activity.jsx
@@ -1,12 +1,10 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import clsx from 'clsx';
 import { makeStyles } from '@mui/styles';
 import { style } from '../../assets/js/styles/components/activity/activityStyle';
-import BookmarkIcon from '@mui/icons-material/Bookmark';
-import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
 import {
   getActivities,
   activityToggleSave,
@@ -19,172 +17,92 @@ import {
   CardMedia,
   Typography,
   Box,
-  List,
-  ListItem,
-  ListItemText,
-  Grid,
-  Fab,
+  Tooltip,
 } from '@mui/material';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import { MdPublicOff } from 'react-icons/md';
 import commonStyles from '../../assets/js/styles';
-import Creator from '../creator/creator';
-import { toggleSave } from './activityScripts';
-import CustomButton from '../button/Button';
+import { dFormatter } from '../../assets/js/utils/scripts';
+import EmojiObjectsIcon from '@mui/icons-material/EmojiObjects';
+import Categories from '../categories/Categories';
+import Creators from '../creators/Creators';
 
 const useCommonStyles = makeStyles(commonStyles);
 const useStyles = makeStyles(style);
 function Activity(props) {
   const { activity, t } = { ...props };
-  const [tagsShowMore, setTagsShowMore] = useState(false);
   const classes = useStyles();
   const common_classes = useCommonStyles();
-  const topMarginCoefficient = activity.creator?.length < 6 ? 2 : 1;
-  const [state, handleSetState] = useState({ loading: false });
-
   return (
     <div className={classes.activityCardContainer}>
-      {activity.creators?.length > 0
-        ? activity.creators.map((creator, index) => (
-            <Creator
-              key={index}
-              creator={creator}
-              top={index * topMarginCoefficient - 1 + 'em'}
-            />
-          ))
-        : ''}
       <Link
         to={`/activities/${activity.id}`}
         className={common_classes.textDecorationNone}
         onClick={e => props.setActivity(activity)}
       >
         <Card className={clsx(classes.activityCard)}>
+          {!activity.publish && (
+            <Tooltip title={t('activities.tooltipUnpublished')} placement="right-start" arrow>
+              <Box className={classes.publishStyle}>
+                <MdPublicOff />
+              </Box>
+            </Tooltip>
+          )}
           <CardMedia title={activity.title} className={classes.mediaBoxStyle}>
             <img
               src={activity.images[0] ? activity.images[0].image.file_url : ''}
               alt={activity.title}
-              className={classes.activityCardImage}
+              className={clsx(classes.activityCardImage, !activity.publish && classes.unpublishedCardImage )}
             />
-
-            <Box className={classes.activityTagsBox}>
-              {activity.tags?.length > 0
-                ? activity.tags.slice(0, 3).map(tag => (
-                    <Typography
-                      className={
-                        common_classes.baseTagStyle +
-                        ' ' +
-                        classes.activityTagPill
-                      }
-                      key={tag.id}
-                    >
-                      {tag.name}
-                    </Typography>
-                  ))
-                : ''}
-              {activity.tags?.length > 3 ? (
-                <div
-                  className={classes.tagsShowMoreIconContainer}
-                  onMouseOver={() => setTagsShowMore(true)}
-                  onMouseOut={() => setTagsShowMore(false)}
-                >
-                  <Typography
-                    className={
-                      common_classes.baseTagStyle +
-                      ' ' +
-                      classes.activityTagsShowMore
-                    }
-                    key="activityTagsShowMore"
-                  >
-                    {['+', activity.tags.length - 3].join('')}
-                  </Typography>
-                </div>
-              ) : (
-                ''
-              )}
-            </Box>
-
-            {tagsShowMore ? (
-              <Box
-                className={classes.tagsShowMoreList}
-                onMouseEnter={() => setTagsShowMore(true)}
-                onMouseLeave={() => setTagsShowMore(false)}
-              >
-                <List
-                  sx={{
-                    width: '100%',
-                    maxWidth: '150px',
-                    backgroundColor: 'background.paper',
-
-                    '& ul': { padding: 0 },
-                  }}
-                >
-                  {activity.tags?.map(tag => (
-                    <ListItem key={`tag-${tag.id}`}>
-                      <ListItemText primary={tag.name} />
-                    </ListItem>
-                  ))}
-                </List>
-              </Box>
-            ) : (
-              ''
-            )}
           </CardMedia>
           <CardActions>
             <CardContent className={classes.activityCardContent}>
-              <Fab
-                className={common_classes.fabButtonStyle}
-                size="small"
-                aria-label="save button"
-                onClick={e =>
-                  toggleSave(
-                    e,
-                    activity.id,
-                    props.auth,
-                    props.navigate,
-                    handleSetState,
-                    props.activityToggleSave,
-                    t,
-                  )
-                }
+              <Typography
+                variant="h5"
+                component="h2"
+                className={classes.activityTitle}
               >
-                {props.auth && activity.saved_by.includes(props.auth.id) ? (
-                  <BookmarkIcon aria-label="unsave" />
-                ) : (
-                  <BookmarkBorderIcon aria-label="save" />
-                )}
-              </Fab>
-              <Grid
-                container
-                className={clsx(
-                  classes.activityCardInfoBox,
-                  common_classes.alignCenter,
-                )}
+                {activity.title}
+              </Typography>
+              <Typography
+                variant="subtitle2"
+                color="textSecondary"
+                component="p"
+                className={classes.activityDescription}
               >
-                <Grid item xs={6} sm={6}>
+                {activity.introduction.replace(/(<([^>]+)>)/gi, "")}
+              </Typography>
+              {activity.category.length > 0 && (
+                <Categories categories={activity.category} />
+              )}
+              <Creators creators={activity?.creators} />
+              <Box className={classes.footer}>
+                <Box className={classes.captionStyle}>
                   <Typography
-                    variant="h6"
-                    component="h6"
-                    className={classes.activityTitle}
+                    className={classes.captionIconStyle}
+                    color="textSecondary"
+                    variant="caption"
+                    component="span"
                   >
-                    {activity.title}
+                    <VisibilityIcon /> {activity.views_count}
                   </Typography>
-                </Grid>
-                <Grid item>
-                  <Link
-                    to={`/activities/${activity.id}/linkedProjects`}
-                    className={common_classes.textDecorationNone}
-                    onClick={e => props.setActivity(activity)}
+                  <Typography
+                    className={classes.captionIconStyle}
+                    color="textSecondary"
+                    variant="caption"
+                    component="span"
                   >
-                    <Typography
-                      variant="caption"
-                      className={classes.projectsCount}
-                    >
-                      {`${t('activities.LinkedProjects')} `}{' '}
-                      <span
-                        className={classes.projectsCountNumber}
-                      >{` ${activity.inspired_projects.length}`}</span>
-                    </Typography>
-                  </Link>
-                </Grid>
-              </Grid>
+                    <EmojiObjectsIcon /> {activity.inspired_projects.length}
+                  </Typography>
+                </Box>
+                <Typography color="textSecondary" variant="caption" component="span" className={classes.date}>
+                  {`
+                    ${dFormatter(activity.created_on).value} 
+                    ${t(`date.${dFormatter(activity.created_on).key}`)} 
+                    ${t('date.ago',)}
+                  `}
+                </Typography>
+              </Box>
             </CardContent>
           </CardActions>
         </Card>
diff --git a/zubhub_frontend/zubhub/src/components/categories/Categories.jsx b/zubhub_frontend/zubhub/src/components/categories/Categories.jsx
new file mode 100644
index 000000000..96b54d290
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/components/categories/Categories.jsx
@@ -0,0 +1,24 @@
+import { makeStyles, useTheme } from "@mui/styles";
+import { styles } from "./categories.styles";
+import Chip from "@mui/material/Chip";
+
+const Categories = ({ categories }) => {
+  const classes = makeStyles(styles)();
+  const theme = useTheme();
+  return (
+    <div className={classes.container}>
+      {categories?.map(category => (
+        <Chip
+          key={category}
+          label={category}
+          variant="outlined"
+          className={classes.chip}
+          size="small"
+          style={{ background: theme.categoryColors[category]}}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Categories;
\ No newline at end of file
diff --git a/zubhub_frontend/zubhub/src/components/categories/categories.styles.js b/zubhub_frontend/zubhub/src/components/categories/categories.styles.js
new file mode 100644
index 000000000..9271484e9
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/components/categories/categories.styles.js
@@ -0,0 +1,18 @@
+import { colors } from "../../assets/js/colors";
+
+export const styles = theme => ({
+  container: {
+    border: '2px olid red',
+    margin: '12px 0',
+    display: 'flex',
+    flexWrap: 'nowrap',
+    gap: '8px',
+  },
+  chip: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    fontSize: '0.9em',
+    border: `1px solid ${colors.border}`,
+    borderRadius: '10em',
+  },
+});
\ No newline at end of file
diff --git a/zubhub_frontend/zubhub/src/components/creators/Creators.jsx b/zubhub_frontend/zubhub/src/components/creators/Creators.jsx
new file mode 100644
index 000000000..33818df21
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/components/creators/Creators.jsx
@@ -0,0 +1,120 @@
+import { makeStyles } from '@mui/styles';
+import { Link } from 'react-router-dom';
+import {
+  Typography,
+  Box,
+  Avatar,
+  Tooltip,
+} from '@mui/material';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import commonStyles from '../../assets/js/styles';
+import { creatorsStyles } from './creators.styles';
+
+const useCommonStyles = makeStyles(commonStyles);
+const useStyles = makeStyles(creatorsStyles);
+
+const Creators = ({ creators }) => {
+  const classes = useStyles();
+  const common_classes = useCommonStyles();
+  const { t } = useTranslation();
+
+  return (
+    <>
+    {creators.length === 1 ?
+      creators.map(creator => (
+        <Link
+          to={{ pathname: `/creators/${creator.username}`, state: { prevPath: window.location.prevPath }}}
+          className={common_classes.textDecorationNone}
+        >
+          <Box className={classes.creatorBox}>
+            <Avatar 
+              className={classes.creatorAvatar}
+              src={creator.avatar}
+              alt={creator.username}
+            />
+            <Tooltip
+              title={creator.username}
+              placement="bottom"
+              arrow
+              className={classes.creatorUsernameTooltip}
+            >
+              <Box>
+                <Typography
+                  color="textSecondary"
+                  variant="caption"
+                  component="p"
+                  className={classes.creatorUsername}
+                >
+                  {creator.username}
+                </Typography>
+                {creator.tags.map(tag => (
+                  <Typography
+                    color="textPrimary"
+                    className={classes.creatorTag}
+                    component="p"
+                  >
+                    {tag}
+                  </Typography>
+                ))}
+              </Box>
+            </Tooltip>
+          </Box>
+        </Link>
+      ))
+      : (
+        <Box className={classes.creatorBox}>
+          <Box className={clsx(creators?.length === 2 ? classes.twoCreatorBox : classes.multipleCreatorBox)}>
+            {creators.slice(0, 3).map((creator, index) => (
+              <Tooltip
+                key={creator.id}
+                title={index === 2 && creators.length > 3 ?
+                  `${creators.length - 2} ${t('activities.tooltipMore')}` :
+                  creator.username
+                }
+                placement="bottom"
+                arrow
+                className={classes.creatorUsernameTooltip}
+                style={{ zIndex: index }}
+              >
+                {index === 2 && creators.length > 3 ? (
+                  <Avatar className={classes.creatorAvatar}>
+                    {`+${creators.length - 2}`}
+                  </Avatar>
+                ): (
+                  <Avatar 
+                    className={classes.creatorAvatar}
+                    src={creator.avatar}
+                    alt={creator.username}
+                  />
+                )}
+              </Tooltip>
+            ))}
+          </Box>
+          <Box>
+            <Typography
+              color="textSecondary"
+              variant="caption"
+              component="p"
+              className={classes.creatorUsername}
+            >
+              {creators[creators.length - 1].username}
+            </Typography>
+            {creators[creators.length - 1].tags.map(tag => (
+              <Typography
+                color="textPrimary"
+                className={classes.creatorTag}
+                component="p"
+              >
+                {tag}
+              </Typography>
+            ))}
+          </Box>
+        </Box>
+      )
+    }
+    </>
+  )
+}
+
+export default Creators;
\ No newline at end of file
diff --git a/zubhub_frontend/zubhub/src/components/creators/creators.styles.js b/zubhub_frontend/zubhub/src/components/creators/creators.styles.js
new file mode 100644
index 000000000..a4e565835
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/components/creators/creators.styles.js
@@ -0,0 +1,50 @@
+export const creatorsStyles = theme => ({
+  creatorBox: {
+    margin: '15px 0 0.5em 0',
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    flexWrap: 'nowrap',
+    gap: '15px',
+    overflow: 'hidden',
+  },
+  twoCreatorBox: {
+    minWidth: '4em',
+    transition: '0.4s',
+    display: 'grid',
+    gridTemplateColumns: '1.5em 1.5em',
+    '&:hover': {
+      gridTemplateColumns: '3.2em 3.2em',
+    },
+  },
+  multipleCreatorBox: {
+    minWidth: '5.5em',
+    transition: '0.4s',
+    display: 'grid',
+    gridTemplateColumns: '1.5em 1.5em 1.5em',
+    '&:hover': {
+      gridTemplateColumns: '3.2em 3.2em 3.2em',
+    },
+  },
+  creatorAvatar: {
+    boxShadow: `0 3px 5px 2px rgba(0, 0, 0, .12)`,
+    background: 'white',
+    color: 'black',
+  },
+  creatorUsernameTooltip: {
+    marginRight: 'auto',
+    fontWeight: '400',
+  },
+  creatorUsername: {
+    flex: 1,
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    fontWeight: '600',
+    fontSize: '1.1em'
+  },
+  creatorTag: {
+    fontWeight: '500',
+    fontSize: '0.9rem',
+  },
+})
\ No newline at end of file