diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json
index 51afb1356..b4af827bf 100644
--- a/zubhub_frontend/zubhub/public/locales/en/translation.json
+++ b/zubhub_frontend/zubhub/public/locales/en/translation.json
@@ -649,7 +649,7 @@
     },
     "activityLog": {
       "activity": "Activity Log",
-      "addActivityLog": "Seems like there isn't any activity on your account yet! Get involved to see activity logs!" 
+      "addActivityLog": "Seems like there isn't any activity on your account yet! Get involved to see activity logs!"
     },
     "team": "Team",
     "createteam": "Create Team",
@@ -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": {
@@ -1191,4 +1193,4 @@
       "buttonLabel": "Get Started"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/zubhub_frontend/zubhub/src/assets/js/colors.js b/zubhub_frontend/zubhub/src/assets/js/colors.js
index 0cdb70aa2..96477fcf4 100644
--- a/zubhub_frontend/zubhub/src/assets/js/colors.js
+++ b/zubhub_frontend/zubhub/src/assets/js/colors.js
@@ -1,22 +1,23 @@
 export const colors = {
-    primary: '#02B7C4',
-    "primary-01": "#E5F8F9",
-    secondary: '#DC3545',
-    tertiary: '#FECB00',
-    'tertiary-dark': '#C18D30',
-    black: '#292535',
-    gray: '#7E7E7E',
-    light: '#C4C4C4',
-    white: '#fff',
-    green: '#22C55E',
-    red: '#f44336',
-    'blue-light': '#00B8C433',
-    'blue-dark': '#7BA8AB',
-    'blue-pale': '#DBECFF'
-}
+  primary: '#02B7C4',
+  'primary-01': '#E5F8F9',
+  secondary: '#DC3545',
+  tertiary: '#FECB00',
+  'tertiary-dark': '#C18D30',
+  black: '#292535',
+  gray: '#7E7E7E',
+  light: '#C4C4C4',
+  white: '#fff',
+  green: '#22C55E',
+  red: '#f44336',
+  'blue-light': '#00B8C433',
+  'blue-dark': '#7BA8AB',
+  'blue-pale': '#DBECFF',
+  border: '#7E5B4B',
+};
 
 export const borders = {
-    borderRadius: 20,
-    borderRadiusMd: 8,
-    borderRadiusSm: 4,
-}
\ No newline at end of file
+  borderRadius: 20,
+  borderRadiusMd: 8,
+  borderRadiusSm: 4,
+};
diff --git a/zubhub_frontend/zubhub/src/assets/js/muiTheme.js b/zubhub_frontend/zubhub/src/assets/js/muiTheme.js
index 53022e34f..048e7cc86 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..da73be0e7 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,17 @@
+import { colors } from '../../../colors';
+
+// eslint-disable-next-line no-unused-vars
 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,57 +29,41 @@ 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',
+    flexDirection: 'column',
     justifyContent: 'space-between',
   },
   projectsCount: {
@@ -92,10 +78,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..b832686aa 100644
--- a/zubhub_frontend/zubhub/src/components/activity/activity.jsx
+++ b/zubhub_frontend/zubhub/src/components/activity/activity.jsx
@@ -1,190 +1,90 @@
-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 { Card, CardActions, CardContent, CardMedia, Typography, Box, Tooltip } from '@mui/material';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import { MdPublicOff } from 'react-icons/md';
+import EmojiObjectsIcon from '@mui/icons-material/EmojiObjects';
 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,
-  setActivity,
-} from '../../store/actions/activityActions';
-import {
-  Card,
-  CardActions,
-  CardContent,
-  CardMedia,
-  Typography,
-  Box,
-  List,
-  ListItem,
-  ListItemText,
-  Grid,
-  Fab,
-} from '@mui/material';
+import { getActivities, activityToggleSave, setActivity } from '../../store/actions/activityActions';
 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 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)}
+        onClick={() => 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}>
+                {activity.title}
+              </Typography>
+              <Typography
+                variant="subtitle2"
+                color="textSecondary"
+                component="p"
+                className={classes.activityDescription}
               >
-                {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,
-                )}
-              >
-                <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>
@@ -198,25 +98,15 @@ Activity.propTypes = {
   activity: PropTypes.object.isRequired,
 };
 
-const mapStateToProps = state => {
-  return {
-    activities: state.activities,
-    auth: state.auth,
-  };
-};
+const mapStateToProps = state => ({
+  activities: state.activities,
+  auth: state.auth,
+});
 
-const mapDispatchToProps = dispatch => {
-  return {
-    getActivities: () => {
-      return dispatch(getActivities());
-    },
-    activityToggleSave: args => {
-      return dispatch(activityToggleSave(args));
-    },
-    setActivity: args => {
-      return dispatch(setActivity(args));
-    },
-  };
-};
+const mapDispatchToProps = dispatch => ({
+  getActivities: () => dispatch(getActivities()),
+  activityToggleSave: args => dispatch(activityToggleSave(args)),
+  setActivity: args => dispatch(setActivity(args)),
+});
 
 export default connect(mapStateToProps, mapDispatchToProps)(Activity);
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..7d90ddebc
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/components/categories/Categories.jsx
@@ -0,0 +1,24 @@
+import { makeStyles, useTheme } from '@mui/styles';
+import Chip from '@mui/material/Chip';
+import { styles } from './categories.styles';
+
+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;
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..96ecddf30
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/components/categories/categories.styles.js
@@ -0,0 +1,19 @@
+import { colors } from '../../assets/js/colors';
+
+// eslint-disable-next-line no-unused-vars
+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',
+  },
+});
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..3cd043d18
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/components/creators/Creators.jsx
@@ -0,0 +1,83 @@
+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}
+            key={creator.id}
+          >
+            <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, index) => (
+                    <Typography key={index} 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, index) => (
+              <Typography key={index} color="textPrimary" className={classes.creatorTag} component="p">
+                {tag}
+              </Typography>
+            ))}
+          </Box>
+        </Box>
+      )}
+    </>
+  );
+};
+
+export default Creators;
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..4fc4f1731
--- /dev/null
+++ b/zubhub_frontend/zubhub/src/components/creators/creators.styles.js
@@ -0,0 +1,51 @@
+// eslint-disable-next-line no-unused-vars
+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',
+  },
+});