diff --git a/frontend/src/components/item-card/item-card.jsx b/frontend/src/components/item-card/item-card.jsx
index 6f8757b..da082af 100644
--- a/frontend/src/components/item-card/item-card.jsx
+++ b/frontend/src/components/item-card/item-card.jsx
@@ -1,195 +1,201 @@
-import React, { useState } from 'react';
-import { CreditCard, Person, SignalCellularAlt } from '@mui/icons-material';
-import { Button, Card, CardActions, CardContent, CardHeader, Chip, Divider, Stack, Typography } from '@mui/material';
+import React, {useState} from 'react';
+import {CreditCard, Person, SignalCellularAlt} from '@mui/icons-material';
+import {Button, Card, CardActions, CardContent, CardHeader, Chip, Divider, Stack, Typography} from '@mui/material';
 import PropTypes from 'prop-types';
 import MoreInfoModal from './more-info-modal';
+import {Helper} from "../../utils/Helper.js";
 
-export const Presenter = ({ presenterName }) => (
-  <Stack flexDirection="row" alignItems="center" gap={1}>
-    <Person />
-    <Typography variant="body1" sx={{ fontSize: 14 }} color="text.secondary">
-      {presenterName}
-    </Typography>
-  </Stack>
+export const Presenter = ({presenterName}) => (
+    <Stack flexDirection="row" alignItems="center" gap={1}>
+        <Person/>
+        <Typography variant="body1" sx={{fontSize: 14}} color="text.secondary">
+            {presenterName}
+        </Typography>
+    </Stack>
 );
 
-export const Cost = ({ cost }) => (
-  <Stack flexDirection="row" alignItems="center" gap={1}>
-    <CreditCard />
-    <Typography variant="overline" sx={{ fontSize: 14 }} color="text.secondary">
-      {cost} T
-    </Typography>
-  </Stack>
+export const Cost = ({cost}) => (
+    <Stack flexDirection="row" alignItems="center" gap={1}>
+        <CreditCard/>
+        <Typography variant="overline" sx={{fontSize: 14}} color="text.secondary">
+            {cost} T
+        </Typography>
+    </Stack>
 );
 
-const CapacityChip = ({ capacity, isFull }) => (
-  <Chip
-    color={isFull ? 'error' : 'success'}
-    size="small"
-    label={isFull ? 'Capacity Full' : `Capacity ${capacity}`}
-    sx={{
-      mt: 1,
-    }}
-  />
+const CapacityChip = ({capacity, isFull, remainingCapacity}) => (
+    <Chip
+        color={isFull ? 'error' : 'success'}
+        size="small"
+        label={isFull ? 'Capacity Full' : `Capacity ${remainingCapacity}/${capacity}`}
+        sx={{
+            mt: 1,
+        }}
+    />
 );
 
-const Level = ({ name, color }) => (
-  <Stack flexDirection="row" alignItems="center" gap={1}>
-    <SignalCellularAlt />
-    <Typography variant="overline" sx={{ fontSize: 14 }} color={color}>
-      {name}
-    </Typography>
-  </Stack>
+const Level = ({name, color}) => (
+    <Stack flexDirection="row" alignItems="center" gap={1}>
+        <SignalCellularAlt/>
+        <Typography variant="overline" sx={{fontSize: 14}} color={color}>
+            {name}
+        </Typography>
+    </Stack>
 );
 
 export const levelComponentMapping = {
-  Elementary: <Level name="elementary" color="success.light" />,
-  Intermediate: <Level name="intermediate" color="secondary.main" />,
-  Advanced: <Level name="advanced" color="warning.light" />,
+    Elementary: <Level name="elementary" color="success.light"/>,
+    Intermediate: <Level name="intermediate" color="secondary.main"/>,
+    Advanced: <Level name="advanced" color="warning.light"/>,
 };
 
 const ItemCard = ({
-  title = 'Title',
-  isWorkshop = true,
-  description = 'Default Description',
-  startDate = '2021-08-27 06:00',
-  endDate = '2021-08-31 18:00',
-  presenterName = 'Presenter Name',
-  level = 'elementary',
-  cost = 50000,
-  purchaseState = 0, // 0 -> not purchased, 1 -> in cart, 2 -> purchased
-  hasProject = true,
-  prerequisites = 'List of prerequisites',
-  syllabus = 'List of syllabus',
-  capacity = 50,
-  isFull = false,
-  addToCalendarLink = 'https://google.com',
-  onClickAddToCart = () => {},
-  onClickRemoveFromCart = () => {},
-}) => {
-  const [moreInfoModalVisibility, setMoreInfoModalVisibility] = useState(false);
-  const hasBought = purchaseState === 2;
+                      title = 'Title',
+                      isWorkshop = true,
+                      description = 'Default Description',
+                      startDate = '2021-08-27 06:00',
+                      endDate = '2021-08-31 18:00',
+                      presenterName = 'Presenter Name',
+                      level = 'elementary',
+                      cost = 50000,
+                      purchaseState = 0, // 0 -> not purchased, 1 -> in cart, 2 -> purchased
+                      hasProject = true,
+                      prerequisites = 'List of prerequisites',
+                      syllabus = 'List of syllabus',
+                      remainingCapacity = 50,
+                      capacity = 50,
+                      isFull = false,
+                      addToCalendarLink = 'https://google.com',
+                      onClickAddToCart = () => {
+                      },
+                      onClickRemoveFromCart = () => {
+                      },
+                  }) => {
+    const [moreInfoModalVisibility, setMoreInfoModalVisibility] = useState(false);
+    const hasBought = purchaseState === 2;
 
-  const handleClickOnMoreInfo = () => {
-    setMoreInfoModalVisibility(true);
-  };
+    const handleClickOnMoreInfo = () => {
+        setMoreInfoModalVisibility(true);
+    };
 
-  const getActionComponent = () => {
-    switch (purchaseState) {
-      case 0:
-        return (
-          <Button variant="outlined" size="small" disabled={isFull} onClick={onClickAddToCart}>
-            Add to Cart
-          </Button>
-        );
-      case 1:
-        return (
-          <Button variant="text" color="error" size="small" disabled={isFull} onClick={onClickRemoveFromCart}>
-            Remove
-          </Button>
-        );
-      case 2:
-        return (
-          <Button size="small" href={addToCalendarLink} target="_blank">
-            Add to calendar
-          </Button>
-        );
-      default:
-        return null;
-    }
-  };
+    const getActionComponent = () => {
+        switch (purchaseState) {
+            case 0:
+                return (
+                    <Button variant="outlined" size="small" disabled={isFull} onClick={onClickAddToCart}>
+                        Add to Cart
+                    </Button>
+                );
+            case 1:
+                return (
+                    <Button variant="text" color="error" size="small" disabled={isFull} onClick={onClickRemoveFromCart}>
+                        Remove
+                    </Button>
+                );
+            case 2:
+                return (
+                    <Button size="small" href={addToCalendarLink} target="_blank">
+                        Add to calendar
+                    </Button>
+                );
+            default:
+                return null;
+        }
+    };
 
-  return (
-    <>
-      <MoreInfoModal
-        visibility={moreInfoModalVisibility}
-        onVisibilityChange={() => setMoreInfoModalVisibility(false)}
-        title={title}
-        presenterName={presenterName}
-        cost={cost}
-        purchaseState={purchaseState}
-        level={level}
-        hasProject={hasProject}
-        prerequisites={prerequisites}
-        syllabus={syllabus}
-        isFull={isFull}
-        addToCalendarLink={addToCalendarLink}
-        onClickAddToCart={onClickAddToCart}
-        onClickRemoveFromCart={onClickRemoveFromCart}
-      />
-      <Card
-        raised
-        sx={{
-          minWidth: 275,
-          maxWidth: 300,
-          maxHeight: 530,
-          minHeight: 330,
-          bgcolor: 'var(--background-color-lighter-20)',
-          borderRadius: '10px',
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
-        <CardHeader
-          title={title}
-          subheader={isWorkshop ? 'workshop' : 'presentation'}
-          titleTypographyProps={{ variant: 'subtitle1' }}
-          subheaderTypographyProps={{ variant: 'overline' }}
-          sx={{ bgcolor: isFull && !hasBought ? 'action.disabledBackground' : 'var(--background-color-lighter-60)' }}
-        />
-        <CardContent>
-          <Typography variant="body2" gutterBottom>
-            {description}
-          </Typography>
-          <Typography variant="body1" sx={{ fontSize: 14 }} color="text.secondary">
-            From: {new Date(startDate).toLocaleString('fa-IR-u-nu-latn')}
-          </Typography>
-          <Typography variant="body1" sx={{ fontSize: 14 }} color="text.secondary">
-            To: {new Date(endDate).toLocaleString('fa-IR-u-nu-latn')}
-          </Typography>
-          <Divider sx={{ my: 1 }} />
-          <Presenter presenterName={presenterName} />
-          {levelComponentMapping[level]}
-          {!hasBought && <Cost cost={cost} />}
-          {!hasBought && <CapacityChip isFull={isFull} capacity={capacity} />}
-        </CardContent>
-        <CardActions
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            px: 2,
-            gap: 1,
-            marginTop: 'auto',
-          }}
-        >
-          <Button size="small" onClick={handleClickOnMoreInfo}>
-            More Info
-          </Button>
-          {getActionComponent()}
-        </CardActions>
-      </Card>
-    </>
-  );
+    return (
+        <>
+            <MoreInfoModal
+                visibility={moreInfoModalVisibility}
+                onVisibilityChange={() => setMoreInfoModalVisibility(false)}
+                title={title}
+                presenterName={presenterName}
+                cost={cost}
+                purchaseState={purchaseState}
+                description={description}
+                level={level}
+                hasProject={hasProject}
+                prerequisites={prerequisites}
+                syllabus={syllabus}
+                isFull={isFull}
+                addToCalendarLink={addToCalendarLink}
+                onClickAddToCart={onClickAddToCart}
+                onClickRemoveFromCart={onClickRemoveFromCart}
+            />
+            <Card
+                raised
+                sx={{
+                    minWidth: 275,
+                    maxWidth: 300,
+                    maxHeight: 530,
+                    minHeight: 330,
+                    bgcolor: 'var(--background-color-lighter-20)',
+                    borderRadius: '10px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                }}
+            >
+                <CardHeader
+                    title={title}
+                    subheader={isWorkshop ? 'workshop' : 'presentation'}
+                    titleTypographyProps={{variant: 'subtitle1'}}
+                    subheaderTypographyProps={{variant: 'overline'}}
+                    sx={{bgcolor: isFull && !hasBought ? 'action.disabledBackground' : 'var(--background-color-lighter-60)'}}
+                />
+                <CardContent>
+                    <Typography variant="body2" gutterBottom>
+                        {Helper.omitLongString(description, 50)}
+                    </Typography>
+                    <Typography variant="body1" sx={{fontSize: 14}} color="text.secondary">
+                        From: {new Date(startDate).toLocaleString('fa-IR-u-nu-latn')}
+                    </Typography>
+                    <Typography variant="body1" sx={{fontSize: 14}} color="text.secondary">
+                        To: {new Date(endDate).toLocaleString('fa-IR-u-nu-latn')}
+                    </Typography>
+                    <Divider sx={{my: 1}}/>
+                    <Presenter presenterName={presenterName}/>
+                    {levelComponentMapping[level]}
+                    {!hasBought && <Cost cost={cost}/>}
+                    {!hasBought && <CapacityChip isFull={isFull} remainingCapacity={remainingCapacity} capacity={capacity}/>}
+                </CardContent>
+                <CardActions
+                    sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        px: 2,
+                        gap: 1,
+                        marginTop: 'auto',
+                    }}
+                >
+                    <Button size="small" onClick={handleClickOnMoreInfo}>
+                        More Info
+                    </Button>
+                    {getActionComponent()}
+                </CardActions>
+            </Card>
+        </>
+    );
 };
 
 ItemCard.propTypes = {
-  title: PropTypes.string,
-  isWorkshop: PropTypes.bool,
-  description: PropTypes.string,
-  startDate: PropTypes.string,
-  endDate: PropTypes.string,
-  presenterName: PropTypes.string,
-  level: PropTypes.string,
-  cost: PropTypes.number,
-  purchaseState: PropTypes.number,
-  hasProject: PropTypes.bool,
-  prerequisites: PropTypes.string,
-  syllabus: PropTypes.string,
-  capacity: PropTypes.number,
-  isFull: PropTypes.bool,
-  addToCalendarLink: PropTypes.string,
-  onClickAddToCart: PropTypes.func,
+    title: PropTypes.string,
+    isWorkshop: PropTypes.bool,
+    description: PropTypes.string,
+    startDate: PropTypes.string,
+    endDate: PropTypes.string,
+    presenterName: PropTypes.string,
+    level: PropTypes.string,
+    cost: PropTypes.number,
+    purchaseState: PropTypes.number,
+    hasProject: PropTypes.bool,
+    prerequisites: PropTypes.string,
+    syllabus: PropTypes.string,
+    capacity: PropTypes.number,
+    isFull: PropTypes.bool,
+    addToCalendarLink: PropTypes.string,
+    onClickAddToCart: PropTypes.func,
+    remainingCapacity: PropTypes.number
 };
 
 export default ItemCard;
diff --git a/frontend/src/components/item-card/more-info-modal.jsx b/frontend/src/components/item-card/more-info-modal.jsx
index ef7c147..c9daac4 100644
--- a/frontend/src/components/item-card/more-info-modal.jsx
+++ b/frontend/src/components/item-card/more-info-modal.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Checklist } from '@mui/icons-material';
 import ListIcon from '@mui/icons-material/List';
+import InfoIcon from '@mui/icons-material/Info';
 import {
   Dialog,
   DialogTitle,
@@ -10,7 +11,7 @@ import {
   Button,
   Divider,
   Stack,
-  Chip,
+  Chip, Icon, Box,
 } from '@mui/material';
 import PropTypes from 'prop-types';
 import { Cost, levelComponentMapping, Presenter } from './item-card';
@@ -46,6 +47,7 @@ const MoreInfoModal = ({
   presenterName,
   cost,
   level,
+    description,
   purchaseState,
   hasProject,
   prerequisites,
@@ -71,6 +73,14 @@ const MoreInfoModal = ({
     >
       <DialogTitle variant="h5">{title}</DialogTitle>
       <DialogContent>
+        <div style={{
+          display: "flex",
+          flexWrap: "nowrap",
+          justifyContent: "start",
+        }}>
+          <InfoIcon />
+          {description && <Box style={{marginLeft: "5px", paddingLeft: "5px", marginTop: "0px", marginBottom: "10px", borderLeft: "1px solid white"}}>{description}</Box>}
+        </div>
         <Presenter presenterName={presenterName} />
         {levelComponentMapping[level]}
         <Cost cost={cost} />
@@ -111,6 +121,7 @@ MoreInfoModal.propTypes = {
   prerequisites: PropTypes.string,
   syllabus: PropTypes.string,
   isFull: PropTypes.bool,
+  description: PropTypes.string,
   onClickAddToCart: PropTypes.func,
   onClickRemoveFromCart: PropTypes.func,
 };