From 1d9a2a09f72339f0adb4563655a383e4cec10fd8 Mon Sep 17 00:00:00 2001
From: Kanhaiya <kagrawal88628@gmail.com>
Date: Wed, 7 Dec 2022 18:24:23 +0530
Subject: [PATCH 1/8] feat(events): add calendar component for events page

---
 client/package.json                           |   2 +
 .../src/components/calendar/EventCalendar.js  | 373 ++++++++++++++++++
 client/src/components/calendar/NewEvent.js    | 114 ++++++
 client/src/pages/calender.jsx                 |   0
 client/yarn.lock                              |  61 +++
 5 files changed, 550 insertions(+)
 create mode 100644 client/src/components/calendar/EventCalendar.js
 create mode 100644 client/src/components/calendar/NewEvent.js
 create mode 100644 client/src/pages/calender.jsx

diff --git a/client/package.json b/client/package.json
index 6329b9b7..154289c8 100644
--- a/client/package.json
+++ b/client/package.json
@@ -23,6 +23,8 @@
     "@mui/material": "^5.8.3",
     "@mui/styles": "^5.8.3",
     "@mui/system": "^5.8.5",
+    "@mui/x-date-pickers": "^5.0.7",
+    "dayjs": "^1.11.6",
     "dotenv": "^10.0.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
diff --git a/client/src/components/calendar/EventCalendar.js b/client/src/components/calendar/EventCalendar.js
new file mode 100644
index 00000000..7a762a4d
--- /dev/null
+++ b/client/src/components/calendar/EventCalendar.js
@@ -0,0 +1,373 @@
+import React, { useEffect, useState } from 'react';
+import { useDate } from '../../hooks/useDate';
+import {
+  Button,
+  Card,
+  CardContent,
+  Container,
+  IconButton,
+  InputBase,
+  Link,
+  Typography,
+} from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import makeStyles from '@mui/styles/makeStyles';
+import { ChevronLeft, ChevronRight } from 'react-feather';
+import NewEvent from './NewEvent';
+import Backdrop from '@mui/material/Backdrop';
+
+const EventCalendar = () => {
+  const [nav, setNav] = useState(0);
+  const [open, setOpen] = useState(false);
+  const { days, currentMonthYear } = useDate(nav);
+  const [weekDays, setWeekDays] = useState([]);
+  const [date, setDate] = useState(null);
+
+  const selectedDate = date + ' ' + currentMonthYear;
+  const newSelectedDate = new Date(selectedDate);
+  var year = newSelectedDate.toLocaleString('default', { year: 'numeric' });
+  var month = newSelectedDate.toLocaleString('default', { month: '2-digit' });
+  var day = newSelectedDate.toLocaleString('default', { day: '2-digit' });
+
+  var formattedDate = day + '/' + month + '/' + year;
+  // console.log(formattedDate);
+  const handleChange = (days) => {
+    setOpen((prev) => !prev);
+    setDate(days);
+  };
+  useEffect(() => {
+    const newDays = [];
+    const _days = days;
+    for (let i = _days.length / 7; i >= 0; i--)
+      newDays.push(_days.splice(0, 7));
+
+    setWeekDays(newDays);
+  }, [nav, days]);
+
+  const classes = useStyles();
+  return (
+    <Container>
+      <Backdrop className={classes.eventBox} open={open}>
+        <NewEvent
+          handleChange={handleChange}
+          formattedDate={formattedDate}
+          className={classes.newEventBox}
+        />
+      </Backdrop>
+      <div className={classes.calendarHeader}>
+        <div className={classes.calendarActions}>
+          <ChevronLeft
+            className={classes.calendarAction}
+            onClick={() => setNav((prev) => prev - 1)}
+          />
+
+          <ChevronRight
+            className={classes.calendarAction}
+            onClick={() => setNav((prev) => prev + 1)}
+          />
+        </div>
+        <div>
+          <Typography variant='caption' display='block' gutterBottom>
+            Today
+          </Typography>
+        </div>
+        <div className={classes.currentMonth}>{currentMonthYear}</div>
+
+        <div className={classes.eventSearch}>
+          <div>
+            <IconButton type='button' aria-label='search'>
+              <SearchIcon />
+            </IconButton>
+            <InputBase
+              placeholder='Search for events'
+              inputProps={{ 'aria-label': 'search for events' }}
+            />
+          </div>
+          <div>
+            <Button variant='contained' className={classes.findEventsButton}>
+              Find Events
+            </Button>
+          </div>
+          <div className={classes.listMonthDay}>
+            <div>
+              <Link href='#' underline='none' className={classes.listChange}>
+                {'List'}
+              </Link>
+            </div>
+            <div>
+              <Link href='#' underline='none' className={classes.listChange}>
+                {'Month'}
+              </Link>
+            </div>
+            <div>
+              <Link href='#' underline='none' className={classes.listChange}>
+                {'Day'}
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Card className={classes.calendar}>
+        <CardContent>
+          <div className={classes.weekRow}>
+            <div className={classes.dayOfTheWeek}>MON</div>
+            <div className={classes.dayOfTheWeek}>TUE</div>
+            <div className={classes.dayOfTheWeek}>WED</div>
+            <div className={classes.dayOfTheWeek}>THU</div>
+            <div className={classes.dayOfTheWeek}>FRI</div>
+            <div className={classes.dayOfTheWeek}>SAT</div>
+            <div className={classes.dayOfTheWeek}>SUN</div>
+          </div>
+          <div className={classes.dayContainer}>
+            {weekDays.map((week, index) => (
+              <div className={classes.tableRow} key={index}>
+                {week.map((day, index) => (
+                  <div
+                    className={classes.dayValue}
+                    key={parseInt(day.value) + index}
+                    onClick={() => handleChange(day.value)}
+                  >
+                    <div
+                      className={
+                        day.isCurrentDay
+                          ? `${classes.today} ${classes.dayValue}`
+                          : `${classes.day}`
+                      }
+                    >
+                      {day.value}
+                      <div className={classes.eventColors}>
+                        {day.isCurrentDay && day.isInstituteHoliday && (
+                          <div className={classes.redDot}></div>
+                        )}
+                        {day.isCurrentDay && day.isInstituteHoliday && (
+                          <div>
+                            <Typography className={classes.eventsTitle}>
+                              Holiday
+                            </Typography>
+                          </div>
+                        )}
+                      </div>
+                      <div className={classes.eventColors}>
+                        {day.isCurrentDay && day.isInstituteEvent && (
+                          <div className={classes.greenDot}></div>
+                        )}
+                        {day.isCurrentDay && day.isInstituteEvent && (
+                          <div>
+                            <Typography className={classes.eventsTitle}>
+                              Independence Day
+                            </Typography>
+                          </div>
+                        )}
+                      </div>
+                      <div className={classes.eventColors}>
+                        {day.isCurrentDay && day.isClubEvent && (
+                          <div className={classes.yellowDot}></div>
+                        )}
+                        {day.isCurrentDay && day.isClubEvent && (
+                          <div>
+                            <Typography className={classes.eventsTitle}>
+                              Webinar
+                            </Typography>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+
+          <div className={classes.eventIndex}>
+            <div className={classes.eventFooter}>
+              <div className={classes.eventType}>
+                <div className={classes.redDot}></div>
+                Insti Holidays
+              </div>
+              <div className={classes.eventType}>
+                <div className={classes.yellowDot}></div>
+                Club Events
+              </div>
+              <div className={classes.eventType}>
+                <div className={classes.greenDot}></div>
+                Insti Events
+              </div>
+            </div>
+            <div>
+              <Button variant='contained' className={classes.syncButton}>
+                Sync with Google Calender
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </Container>
+  );
+};
+
+export default EventCalendar;
+
+const useStyles = makeStyles((theme) => ({
+  calendar: {
+    boxShadow: theme.shadows[0],
+    backgroundColor: theme.palette.primary.blue10,
+    height: '100%',
+  },
+  calendarHeader: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    margin: '48px 0 15px 0',
+  },
+  calendarActions: {
+    display: 'flex',
+  },
+  currentMonth: {
+    fontFamily: 'Source Sans Pro',
+    fontSize: '24px',
+    fontWeight: 600,
+    lineHeight: '28px',
+    display: 'flex',
+  },
+
+  eventSearch: {
+    width: '719px',
+    height: '40px',
+    border: '0.5px solid #DADADA',
+    borderRadius: '2px',
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+  findEventsButton: {
+    height: '36px',
+    borderRadius: '4px',
+    padding: '6px 20px 6px 20px',
+    gap: '10px',
+    top: '1px',
+  },
+  listMonthDay: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3,1fr)',
+    textAlign: 'center',
+    alignItems: 'center',
+  },
+  listChange: {
+    fontFamily: 'Source Sans Pro',
+    color: 'black',
+    fontWeight: 400,
+    fontSize: '16px',
+  },
+  weekRow: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(7,1fr)',
+    justifyItems: 'center',
+  },
+
+  dayOfTheWeek: {
+    fontFamily: 'IBM Plex Sans',
+    fontWeight: 600,
+    fontSize: '24px',
+    lineHeight: '32px',
+  },
+  dayContainer: {
+    display: 'grid',
+    rowGap: '30px',
+  },
+  tableRow: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(7,1fr)',
+    justifyItems: 'center',
+  },
+
+  dayValue: {
+    fontFamily: theme.typography.fontFamily,
+    boxSizing: 'border-box',
+    width: '129px',
+    height: '129px',
+    left: '170px',
+    top: '431px',
+    fontWeight: 600,
+    fontSize: '24px',
+    lineHeight: '32px',
+    backgroundColor: theme.palette.common.white,
+    boxShadow:
+      '0px 0px 1px rgba(0, 0, 0, 0.24), 0px 1px 3px rgba(0, 0, 0, 0.12)',
+    cursor: 'pointer',
+  },
+
+  eventBox: {
+    zIndex: 10,
+    width: '500',
+    height: '500',
+    backgroundColor: 'black',
+  },
+  day: {
+    fontFamily: theme.typography.fontFamily,
+    width: '29px',
+    height: '32px',
+    padding: '10px',
+  },
+  today: {
+    boxSizing: 'border-box',
+    border: '4px solid #006DCC',
+    padding: '10px',
+  },
+
+  eventColors: {
+    display: 'flex',
+    marginTop: '5px',
+    alignItems: 'center',
+  },
+  dateEvents: {
+    display: 'flex',
+    alignItems: 'center',
+    fontFamily: 'Source Sans Pro',
+    fontWeight: '400',
+    fontSize: '12px',
+  },
+  eventsTitle: {
+    fontFamily: 'Source Sans Pro',
+    fontSize: '12px',
+    fontWeight: '400',
+    lineHeight: '16px',
+  },
+  eventIndex: {
+    display: 'flex',
+    marginTop: '1rem',
+    justifyContent: 'space-between',
+  },
+  eventFooter: {
+    display: 'flex',
+    gap: '45px',
+  },
+  eventType: {
+    display: 'flex',
+    alignItems: 'center',
+    fontFamily: theme.typography.fontFamily,
+    fontWeight: 400,
+    fontSize: '16px',
+    lineHeight: '24px',
+    fontStyle: 'normal',
+  },
+
+  redDot: {
+    backgroundColor: theme.palette.accent.red,
+    width: '11px',
+    height: '11px',
+    borderRadius: '50%',
+    marginRight: '0.5rem',
+  },
+  yellowDot: {
+    backgroundColor: theme.palette.accent.yellow,
+    width: '11px',
+    height: '11px',
+    borderRadius: '50%',
+    marginRight: '0.5rem',
+  },
+  greenDot: {
+    backgroundColor: theme.palette.accent.green,
+    width: '11px',
+    height: '11px',
+    borderRadius: '50%',
+    marginRight: '0.5rem',
+  },
+}));
diff --git a/client/src/components/calendar/NewEvent.js b/client/src/components/calendar/NewEvent.js
new file mode 100644
index 00000000..d060e6eb
--- /dev/null
+++ b/client/src/components/calendar/NewEvent.js
@@ -0,0 +1,114 @@
+import {
+  Button,
+  Card,
+  TextField,
+  Autocomplete,
+  Typography,
+} from '@mui/material';
+import React, { useState } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+
+export const NewEvent = ({ onSave, handleChange, formattedDate }) => {
+  const [title, setTitle] = useState('');
+  const [startTime, setStartTime] = useState('');
+  const [endTime, setEndTime] = useState('');
+  const [error, setError] = useState(false);
+  const eventsName = [
+    { label: 'Insti Events' },
+    { label: 'Club Events' },
+    { label: 'Insti Holidays' },
+  ];
+  const classes = useStyles();
+  return (
+    <Card className={classes.newEvent}>
+      <div className={classes.clickedDate}>
+        <Typography variant='h5' gutterBottom>
+          {formattedDate}
+        </Typography>
+      </div>
+
+      <div className={classes.newEventHeader}>New Event</div>
+      <TextField
+        required
+        className={error ? 'error' : ''}
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        label='Event Title'
+      />
+
+      <Autocomplete
+        disablePortal
+        className={classes.eventType}
+        options={eventsName}
+        renderInput={(params) => <TextField {...params} label='Event Type' />}
+      />
+
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <TimePicker
+          label='Start'
+          value={startTime}
+          onChange={(newValue) => {
+            setStartTime(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+
+        <TimePicker
+          label='End'
+          value={endTime}
+          onChange={(newValue) => {
+            setEndTime(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} />}
+        />
+      </LocalizationProvider>
+
+      <Button
+        variant='contained'
+        onClick={() => {
+          if (title) {
+            setError(false);
+            onSave(title);
+          } else {
+            setError(true);
+          }
+        }}
+        className={classes.saveBtn}
+      >
+        Save
+      </Button>
+      <Button variant='contained' onClick={handleChange}>
+        Cancel
+      </Button>
+    </Card>
+  );
+};
+
+export default NewEvent;
+
+const useStyles = makeStyles((theme) => ({
+  newEvent: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '350px',
+    alignItems: 'flex-start',
+    gap: '10px',
+    backgroundColor: 'white',
+    zIndex: '20',
+    boxShadow: '0px 0px 3px black',
+    borderRadius: '5px',
+    position: 'absolute',
+    padding: '20px',
+  },
+  newEventHeader: {
+    fontWeight: 700,
+    fontFamily: theme.typography.fontFamily,
+    width: 300,
+  },
+  eventType: {
+    width: 300,
+  },
+}));
diff --git a/client/src/pages/calender.jsx b/client/src/pages/calender.jsx
new file mode 100644
index 00000000..e69de29b
diff --git a/client/yarn.lock b/client/yarn.lock
index b54f5b67..9c487f15 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -338,6 +338,39 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@date-io/core@^2.15.0", "@date-io/core@^2.16.0":
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/@date-io/core/-/core-2.16.0.tgz#7871bfc1d9bca9aa35ad444a239505589d0f22f6"
+  integrity sha512-DYmSzkr+jToahwWrsiRA2/pzMEtz9Bq1euJwoOuYwuwIYXnZFtHajY2E6a1VNVDc9jP8YUXK1BvnZH9mmT19Zg==
+
+"@date-io/date-fns@^2.15.0":
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-2.16.0.tgz#bd5e09b6ecb47ee55e593fc3a87e7b2caaa3da40"
+  integrity sha512-bfm5FJjucqlrnQcXDVU5RD+nlGmL3iWgkHTq3uAZWVIuBu6dDmGa3m8a6zo2VQQpu8ambq9H22UyUpn7590joA==
+  dependencies:
+    "@date-io/core" "^2.16.0"
+
+"@date-io/dayjs@^2.15.0":
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/@date-io/dayjs/-/dayjs-2.16.0.tgz#0d2c254ad8db1306fdc4b8eda197cb53c9af89dc"
+  integrity sha512-y5qKyX2j/HG3zMvIxTobYZRGnd1FUW2olZLS0vTj7bEkBQkjd2RO7/FEwDY03Z1geVGlXKnzIATEVBVaGzV4Iw==
+  dependencies:
+    "@date-io/core" "^2.16.0"
+
+"@date-io/luxon@^2.15.0":
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/@date-io/luxon/-/luxon-2.16.1.tgz#b08786614cb58831c729a15807753011e4acb966"
+  integrity sha512-aeYp5K9PSHV28946pC+9UKUi/xMMYoaGelrpDibZSgHu2VWHXrr7zWLEr+pMPThSs5vt8Ei365PO+84pCm37WQ==
+  dependencies:
+    "@date-io/core" "^2.16.0"
+
+"@date-io/moment@^2.15.0":
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/@date-io/moment/-/moment-2.16.1.tgz#ec6e0daa486871e0e6412036c6f806842a0eeed4"
+  integrity sha512-JkxldQxUqZBfZtsaCcCMkm/dmytdyq5pS1RxshCQ4fHhsvP5A7gSqPD22QbVXMcJydi3d3v1Y8BQdUKEuGACZQ==
+  dependencies:
+    "@date-io/core" "^2.16.0"
+
 "@emotion/babel-plugin@^11.10.0":
   version "11.10.2"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz#879db80ba622b3f6076917a1e6f648b1c7d008c7"
@@ -1240,6 +1273,24 @@
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
+"@mui/x-date-pickers@^5.0.7":
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-5.0.7.tgz#02f0b86cb463ecf38a7c0e1b925ab9f42a39919f"
+  integrity sha512-NhxG4tGj+NabxTCQxw4d5RVYl8yzBycHw3YbfawaPVRAsBk/1p3ktSdTbiEi/j+8IUrT8C7Kh/XMNNnOwub/3Q==
+  dependencies:
+    "@babel/runtime" "^7.18.9"
+    "@date-io/core" "^2.15.0"
+    "@date-io/date-fns" "^2.15.0"
+    "@date-io/dayjs" "^2.15.0"
+    "@date-io/luxon" "^2.15.0"
+    "@date-io/moment" "^2.15.0"
+    "@mui/utils" "^5.10.3"
+    "@types/react-transition-group" "^4.4.5"
+    clsx "^1.2.1"
+    prop-types "^15.7.2"
+    react-transition-group "^4.4.5"
+    rifm "^0.12.1"
+
 "@next/env@12.3.0":
   version "12.3.0"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-12.3.0.tgz#85f971fdc668cc312342761057c59cb8ab1abadf"
@@ -2524,6 +2575,11 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+dayjs@^1.11.6:
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.6.tgz#2e79a226314ec3ec904e3ee1dd5a4f5e5b1c7afb"
+  integrity sha512-zZbY5giJAinCG+7AGaw0wIhNZ6J8AhWuSXKvuc1KAyMiRsvGQWqh4L+MomvhdAYjN+lqvVCMq1I41e3YHvXkyQ==
+
 debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
@@ -6601,6 +6657,11 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
+rifm@^0.12.1:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.12.1.tgz#8fa77f45b7f1cda2a0068787ac821f0593967ac4"
+  integrity sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==
+
 rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"

From a619babf35cb4e3e0070436fa78a965557b2bd15 Mon Sep 17 00:00:00 2001
From: Kanhaiya <kagrawal88628@gmail.com>
Date: Thu, 8 Dec 2022 23:10:14 +0530
Subject: [PATCH 2/8] style: add gaps between weekdays and the days box.

---
 client/src/components/calendar/EventCalendar.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/calendar/EventCalendar.js b/client/src/components/calendar/EventCalendar.js
index 7a762a4d..a9238e76 100644
--- a/client/src/components/calendar/EventCalendar.js
+++ b/client/src/components/calendar/EventCalendar.js
@@ -260,6 +260,7 @@ const useStyles = makeStyles((theme) => ({
     display: 'grid',
     gridTemplateColumns: 'repeat(7,1fr)',
     justifyItems: 'center',
+    marginBottom: '12px',
   },
 
   dayOfTheWeek: {

From 434fbce5cdc5b045635a374d71af0d53a144cae6 Mon Sep 17 00:00:00 2001
From: Kanhaiya <kagrawal88628@gmail.com>
Date: Thu, 8 Dec 2022 23:11:05 +0530
Subject: [PATCH 3/8] feat: add a events page

---
 client/src/pages/calender.jsx |  0
 client/src/pages/events.jsx   | 86 +++++++++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+)
 delete mode 100644 client/src/pages/calender.jsx
 create mode 100644 client/src/pages/events.jsx

diff --git a/client/src/pages/calender.jsx b/client/src/pages/calender.jsx
deleted file mode 100644
index e69de29b..00000000
diff --git a/client/src/pages/events.jsx b/client/src/pages/events.jsx
new file mode 100644
index 00000000..5f1b278f
--- /dev/null
+++ b/client/src/pages/events.jsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import Head from 'next/head';
+
+// Components
+import Marginals from '../components/marginals/Marginals';
+import EventCalendar from '../components/calendar/EventCalendar';
+
+const AboutPage = () => {
+  return (
+    <>
+      <Head>
+        {/* <!-- =============== Primary Meta Tags =============== --> */}
+        <title>About | Monday Morning</title>
+        <meta name='title' content='About | Monday Morning' />
+        <meta
+          name='description'
+          content='Monday Morning is the official Student Media Body of National Institute Of Technology Rourkela. Monday Morning covers all the events, issues and activities going on inside the campus. Monday Morning also serves as a link between the administration and the students.'
+        />
+        <meta
+          name='keywords'
+          content='about, monday morning, mondaymorning, monday morning, mm, nit rkl, nit, nit rourkela, nitr, nitrkl, rkl, rourkela'
+        />
+
+        {/* <!-- =============== Open Graph / Facebook =============== --> */}
+        <meta property='og:type' content='website' />
+        <meta
+          property='og:url'
+          content='https://mondaymorning.nitrkl.ac.in/about'
+        />
+        <meta
+          property='og:site_name'
+          content='Monday Morning | The Student Media Body of NIT Rourkela, India'
+        />
+        <meta property='og:title' content='About | Monday Morning' />
+        <meta
+          property='og:description'
+          content='Monday Morning is the Media Body of National Institute Of Technology Rourkela. Monday Morning covers all the events, issues and activities going on inside the campus. Monday morning also serves as a link between the administration and the students.'
+        />
+        <meta
+          property='og:image'
+          itemProp='image'
+          content='/icon-256x256.png'
+        />
+        <meta
+          property='og:image:url'
+          content='https://mondaymorning.nitrkl.ac.in/icon-256x256.png'
+        />
+        <meta
+          property='og:image:secure_url'
+          content='https://mondaymorning.nitrkl.ac.in/icon-256x256.png'
+        />
+        <meta property='og:image:type' content='image/png' />
+
+        {/* <!-- =============== Twitter =============== --> */}
+        <meta property='twitter:card' content='summary_large_image' />
+        <meta
+          property='twitter:url'
+          content='https://mondaymorning.nitrkl.ac.in/about'
+        />
+        <meta property='twitter:title' content='Monday Morning' />
+        <meta
+          property='twitter:image'
+          content='https://mondaymorning.nitrkl.ac.in/icon-256x256.png'
+        />
+        <meta
+          property='twitter:description'
+          content='Monday Morning is the Media Body of National Institute Of Technology Rourkela. Monday Morning covers all the events, issues and activities going on inside the campus. Monday morning also serves as a link between the administration and the students.'
+        />
+      </Head>
+      <Marginals>
+        <EventCalendar />
+      </Marginals>
+    </>
+  );
+};
+
+export async function getServerSideProps() {
+  return {
+    redirect: {
+      destination: '/comingSoon',
+      permanent: false,
+    },
+  };
+}
+
+export default AboutPage;

From e4b3dcdfc1c89f37683f755f4d25ce2d7a98c5d0 Mon Sep 17 00:00:00 2001
From: Kanhaiya <kagrawal88628@gmail.com>
Date: Fri, 9 Dec 2022 11:40:06 +0530
Subject: [PATCH 4/8] chore: rename about to event.

---
 client/src/pages/events.jsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/src/pages/events.jsx b/client/src/pages/events.jsx
index 5f1b278f..3d6d53c6 100644
--- a/client/src/pages/events.jsx
+++ b/client/src/pages/events.jsx
@@ -5,33 +5,33 @@ import Head from 'next/head';
 import Marginals from '../components/marginals/Marginals';
 import EventCalendar from '../components/calendar/EventCalendar';
 
-const AboutPage = () => {
+const EventPage = () => {
   return (
     <>
       <Head>
         {/* <!-- =============== Primary Meta Tags =============== --> */}
-        <title>About | Monday Morning</title>
-        <meta name='title' content='About | Monday Morning' />
+        <title>Event | Monday Morning</title>
+        <meta name='title' content='Event | Monday Morning' />
         <meta
           name='description'
           content='Monday Morning is the official Student Media Body of National Institute Of Technology Rourkela. Monday Morning covers all the events, issues and activities going on inside the campus. Monday Morning also serves as a link between the administration and the students.'
         />
         <meta
           name='keywords'
-          content='about, monday morning, mondaymorning, monday morning, mm, nit rkl, nit, nit rourkela, nitr, nitrkl, rkl, rourkela'
+          content='event, monday morning, mondaymorning, monday morning, mm, nit rkl, nit, nit rourkela, nitr, nitrkl, rkl, rourkela'
         />
 
         {/* <!-- =============== Open Graph / Facebook =============== --> */}
         <meta property='og:type' content='website' />
         <meta
           property='og:url'
-          content='https://mondaymorning.nitrkl.ac.in/about'
+          content='https://mondaymorning.nitrkl.ac.in/event'
         />
         <meta
           property='og:site_name'
           content='Monday Morning | The Student Media Body of NIT Rourkela, India'
         />
-        <meta property='og:title' content='About | Monday Morning' />
+        <meta property='og:title' content='Event | Monday Morning' />
         <meta
           property='og:description'
           content='Monday Morning is the Media Body of National Institute Of Technology Rourkela. Monday Morning covers all the events, issues and activities going on inside the campus. Monday morning also serves as a link between the administration and the students.'
@@ -55,7 +55,7 @@ const AboutPage = () => {
         <meta property='twitter:card' content='summary_large_image' />
         <meta
           property='twitter:url'
-          content='https://mondaymorning.nitrkl.ac.in/about'
+          content='https://mondaymorning.nitrkl.ac.in/event'
         />
         <meta property='twitter:title' content='Monday Morning' />
         <meta
@@ -83,4 +83,4 @@ export async function getServerSideProps() {
   };
 }
 
-export default AboutPage;
+export default EventPage;

From 96adfd03cbcecbd596740a8b0d20690dd9fa4964 Mon Sep 17 00:00:00 2001
From: Kanhaiya <kagrawal88628@gmail.com>
Date: Fri, 9 Dec 2022 21:32:00 +0530
Subject: [PATCH 5/8] fix: flicker

---
 .../src/components/calendar/EventCalendar.js  | 132 +++++++++---------
 1 file changed, 68 insertions(+), 64 deletions(-)

diff --git a/client/src/components/calendar/EventCalendar.js b/client/src/components/calendar/EventCalendar.js
index a9238e76..5b3805d5 100644
--- a/client/src/components/calendar/EventCalendar.js
+++ b/client/src/components/calendar/EventCalendar.js
@@ -30,7 +30,6 @@ const EventCalendar = () => {
   var day = newSelectedDate.toLocaleString('default', { day: '2-digit' });
 
   var formattedDate = day + '/' + month + '/' + year;
-  // console.log(formattedDate);
   const handleChange = (days) => {
     setOpen((prev) => !prev);
     setDate(days);
@@ -109,73 +108,75 @@ const EventCalendar = () => {
       </div>
       <Card className={classes.calendar}>
         <CardContent>
-          <div className={classes.weekRow}>
-            <div className={classes.dayOfTheWeek}>MON</div>
-            <div className={classes.dayOfTheWeek}>TUE</div>
-            <div className={classes.dayOfTheWeek}>WED</div>
-            <div className={classes.dayOfTheWeek}>THU</div>
-            <div className={classes.dayOfTheWeek}>FRI</div>
-            <div className={classes.dayOfTheWeek}>SAT</div>
-            <div className={classes.dayOfTheWeek}>SUN</div>
-          </div>
-          <div className={classes.dayContainer}>
-            {weekDays.map((week, index) => (
-              <div className={classes.tableRow} key={index}>
-                {week.map((day, index) => (
-                  <div
-                    className={classes.dayValue}
-                    key={parseInt(day.value) + index}
-                    onClick={() => handleChange(day.value)}
-                  >
+          <div className={classes.calendarBox}>
+            <div className={classes.weekRow}>
+              <div className={classes.dayOfTheWeek}>MON</div>
+              <div className={classes.dayOfTheWeek}>TUE</div>
+              <div className={classes.dayOfTheWeek}>WED</div>
+              <div className={classes.dayOfTheWeek}>THU</div>
+              <div className={classes.dayOfTheWeek}>FRI</div>
+              <div className={classes.dayOfTheWeek}>SAT</div>
+              <div className={classes.dayOfTheWeek}>SUN</div>
+            </div>
+            <div className={classes.dayContainer}>
+              {weekDays.map((week, index) => (
+                <div className={classes.tableRow} key={index}>
+                  {week.map((day, index) => (
                     <div
-                      className={
-                        day.isCurrentDay
-                          ? `${classes.today} ${classes.dayValue}`
-                          : `${classes.day}`
-                      }
+                      className={classes.dayValue}
+                      key={parseInt(day.value) + index}
+                      onClick={() => handleChange(day.value)}
                     >
-                      {day.value}
-                      <div className={classes.eventColors}>
-                        {day.isCurrentDay && day.isInstituteHoliday && (
-                          <div className={classes.redDot}></div>
-                        )}
-                        {day.isCurrentDay && day.isInstituteHoliday && (
-                          <div>
-                            <Typography className={classes.eventsTitle}>
-                              Holiday
-                            </Typography>
-                          </div>
-                        )}
-                      </div>
-                      <div className={classes.eventColors}>
-                        {day.isCurrentDay && day.isInstituteEvent && (
-                          <div className={classes.greenDot}></div>
-                        )}
-                        {day.isCurrentDay && day.isInstituteEvent && (
-                          <div>
-                            <Typography className={classes.eventsTitle}>
-                              Independence Day
-                            </Typography>
-                          </div>
-                        )}
-                      </div>
-                      <div className={classes.eventColors}>
-                        {day.isCurrentDay && day.isClubEvent && (
-                          <div className={classes.yellowDot}></div>
-                        )}
-                        {day.isCurrentDay && day.isClubEvent && (
-                          <div>
-                            <Typography className={classes.eventsTitle}>
-                              Webinar
-                            </Typography>
-                          </div>
-                        )}
+                      <div
+                        className={
+                          day.isCurrentDay
+                            ? `${classes.today} ${classes.dayValue}`
+                            : `${classes.day}`
+                        }
+                      >
+                        {day.value}
+                        <div className={classes.eventColors}>
+                          {day.isCurrentDay && day.isInstituteHoliday && (
+                            <div className={classes.redDot}></div>
+                          )}
+                          {day.isCurrentDay && day.isInstituteHoliday && (
+                            <div>
+                              <Typography className={classes.eventsTitle}>
+                                Holiday
+                              </Typography>
+                            </div>
+                          )}
+                        </div>
+                        <div className={classes.eventColors}>
+                          {day.isCurrentDay && day.isInstituteEvent && (
+                            <div className={classes.greenDot}></div>
+                          )}
+                          {day.isCurrentDay && day.isInstituteEvent && (
+                            <div>
+                              <Typography className={classes.eventsTitle}>
+                                Independence Day
+                              </Typography>
+                            </div>
+                          )}
+                        </div>
+                        <div className={classes.eventColors}>
+                          {day.isCurrentDay && day.isClubEvent && (
+                            <div className={classes.yellowDot}></div>
+                          )}
+                          {day.isCurrentDay && day.isClubEvent && (
+                            <div>
+                              <Typography className={classes.eventsTitle}>
+                                Webinar
+                              </Typography>
+                            </div>
+                          )}
+                        </div>
                       </div>
                     </div>
-                  </div>
-                ))}
-              </div>
-            ))}
+                  ))}
+                </div>
+              ))}
+            </div>
           </div>
 
           <div className={classes.eventIndex}>
@@ -256,6 +257,9 @@ const useStyles = makeStyles((theme) => ({
     fontWeight: 400,
     fontSize: '16px',
   },
+  calendarBox: {
+    minHeight: '963px',
+  },
   weekRow: {
     display: 'grid',
     gridTemplateColumns: 'repeat(7,1fr)',

From 7157f38ec1a5984cdb22ba01340b900000c67385 Mon Sep 17 00:00:00 2001
From: Kanhaiya <kagrawal88628@gmail.com>
Date: Fri, 9 Dec 2022 22:02:52 +0530
Subject: [PATCH 6/8] fix: gap between day box and bottom

---
 .../src/components/calendar/EventCalendar.js  | 43 +++++++++----------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/client/src/components/calendar/EventCalendar.js b/client/src/components/calendar/EventCalendar.js
index 5b3805d5..8f7ab7d1 100644
--- a/client/src/components/calendar/EventCalendar.js
+++ b/client/src/components/calendar/EventCalendar.js
@@ -178,30 +178,29 @@ const EventCalendar = () => {
               ))}
             </div>
           </div>
-
-          <div className={classes.eventIndex}>
-            <div className={classes.eventFooter}>
-              <div className={classes.eventType}>
-                <div className={classes.redDot}></div>
-                Insti Holidays
-              </div>
-              <div className={classes.eventType}>
-                <div className={classes.yellowDot}></div>
-                Club Events
-              </div>
-              <div className={classes.eventType}>
-                <div className={classes.greenDot}></div>
-                Insti Events
-              </div>
-            </div>
-            <div>
-              <Button variant='contained' className={classes.syncButton}>
-                Sync with Google Calender
-              </Button>
-            </div>
-          </div>
         </CardContent>
       </Card>
+      <div className={classes.eventIndex}>
+        <div className={classes.eventFooter}>
+          <div className={classes.eventType}>
+            <div className={classes.redDot}></div>
+            Insti Holidays
+          </div>
+          <div className={classes.eventType}>
+            <div className={classes.yellowDot}></div>
+            Club Events
+          </div>
+          <div className={classes.eventType}>
+            <div className={classes.greenDot}></div>
+            Insti Events
+          </div>
+        </div>
+        <div>
+          <Button variant='contained' className={classes.syncButton}>
+            Sync with Google Calender
+          </Button>
+        </div>
+      </div>
     </Container>
   );
 };

From 5943d93c53309e85bc018f5e2b83bfb480cb4914 Mon Sep 17 00:00:00 2001
From: Kanhaiya <kagrawal88628@gmail.com>
Date: Wed, 14 Dec 2022 21:32:20 +0530
Subject: [PATCH 7/8] fix: remove events page

---
 client/src/pages/events.jsx | 86 -------------------------------------
 client/yarn.lock            | 27 +++++++-----
 2 files changed, 17 insertions(+), 96 deletions(-)
 delete mode 100644 client/src/pages/events.jsx

diff --git a/client/src/pages/events.jsx b/client/src/pages/events.jsx
deleted file mode 100644
index 3d6d53c6..00000000
--- a/client/src/pages/events.jsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from 'react';
-import Head from 'next/head';
-
-// Components
-import Marginals from '../components/marginals/Marginals';
-import EventCalendar from '../components/calendar/EventCalendar';
-
-const EventPage = () => {
-  return (
-    <>
-      <Head>
-        {/* <!-- =============== Primary Meta Tags =============== --> */}
-        <title>Event | Monday Morning</title>
-        <meta name='title' content='Event | Monday Morning' />
-        <meta
-          name='description'
-          content='Monday Morning is the official Student Media Body of National Institute Of Technology Rourkela. Monday Morning covers all the events, issues and activities going on inside the campus. Monday Morning also serves as a link between the administration and the students.'
-        />
-        <meta
-          name='keywords'
-          content='event, monday morning, mondaymorning, monday morning, mm, nit rkl, nit, nit rourkela, nitr, nitrkl, rkl, rourkela'
-        />
-
-        {/* <!-- =============== Open Graph / Facebook =============== --> */}
-        <meta property='og:type' content='website' />
-        <meta
-          property='og:url'
-          content='https://mondaymorning.nitrkl.ac.in/event'
-        />
-        <meta
-          property='og:site_name'
-          content='Monday Morning | The Student Media Body of NIT Rourkela, India'
-        />
-        <meta property='og:title' content='Event | Monday Morning' />
-        <meta
-          property='og:description'
-          content='Monday Morning is the Media Body of National Institute Of Technology Rourkela. Monday Morning covers all the events, issues and activities going on inside the campus. Monday morning also serves as a link between the administration and the students.'
-        />
-        <meta
-          property='og:image'
-          itemProp='image'
-          content='/icon-256x256.png'
-        />
-        <meta
-          property='og:image:url'
-          content='https://mondaymorning.nitrkl.ac.in/icon-256x256.png'
-        />
-        <meta
-          property='og:image:secure_url'
-          content='https://mondaymorning.nitrkl.ac.in/icon-256x256.png'
-        />
-        <meta property='og:image:type' content='image/png' />
-
-        {/* <!-- =============== Twitter =============== --> */}
-        <meta property='twitter:card' content='summary_large_image' />
-        <meta
-          property='twitter:url'
-          content='https://mondaymorning.nitrkl.ac.in/event'
-        />
-        <meta property='twitter:title' content='Monday Morning' />
-        <meta
-          property='twitter:image'
-          content='https://mondaymorning.nitrkl.ac.in/icon-256x256.png'
-        />
-        <meta
-          property='twitter:description'
-          content='Monday Morning is the Media Body of National Institute Of Technology Rourkela. Monday Morning covers all the events, issues and activities going on inside the campus. Monday morning also serves as a link between the administration and the students.'
-        />
-      </Head>
-      <Marginals>
-        <EventCalendar />
-      </Marginals>
-    </>
-  );
-};
-
-export async function getServerSideProps() {
-  return {
-    redirect: {
-      destination: '/comingSoon',
-      permanent: false,
-    },
-  };
-}
-
-export default EventPage;
diff --git a/client/yarn.lock b/client/yarn.lock
index 619c7770..9c540110 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -291,6 +291,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.20.6":
+  version "7.20.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.6.tgz#facf4879bfed9b5326326273a64220f099b0fce3"
+  integrity sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.18.10", "@babel/template@^7.3.3":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
@@ -1163,12 +1170,12 @@
   resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.4.tgz#6b208687f016e8f583ee14582b8a949d89b2f121"
   integrity sha512-VGekVa9dleJ+ii47+gXvKUV5a11T0nsjXN8bk5NqiJRQWRCAhbTHgsfZuctNcMeLW9FSf2gu6U0k2U6rhABKcA==
 
-"@mui/icons-material@^5.8.3":
-  version "5.10.3"
-  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.10.3.tgz#33bd1d973c4727ab55d02928fc8973b7f16fff55"
-  integrity sha512-o0kbUlsWCBtCE0wP33cGKbyryCh7kpm2EECYMPDmWrLhbA+HUODXIdhiTFS26szp2xXo9HY1lEx0ufeJ+tddYw==
+"@mui/icons-material@^5.10.16":
+  version "5.11.0"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.11.0.tgz#9ea6949278b2266d2683866069cd43009eaf6464"
+  integrity sha512-I2LaOKqO8a0xcLGtIozC9xoXjZAto5G5gh0FYUMAlbsIHNHIjn4Xrw9rvjY20vZonyiGrZNMAlAXYkY6JvhF6A==
   dependencies:
-    "@babel/runtime" "^7.18.9"
+    "@babel/runtime" "^7.20.6"
 
 "@mui/lab@^5.0.0-alpha.85":
   version "5.0.0-alpha.98"
@@ -2294,11 +2301,6 @@ character-entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
   integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
 
-chart.js@^3.9.1:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.9.1.tgz#3abf2c775169c4c71217a107163ac708515924b8"
-  integrity sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==
-
 cheerio-select@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-2.1.0.tgz#4d8673286b8126ca2a8e42740d5e3c4884ae21b4"
@@ -6516,6 +6518,11 @@ reflect.ownkeys@^0.2.0:
   resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
   integrity sha512-qOLsBKHCpSOFKK1NUOCGC5VyeufB6lEsFe92AL2bhIJsacZS1qdoOZSbPk3MYKuT2cFlRDnulKXuuElIrMjGUg==
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"

From ccf57db7c9b965326c9cae375c03e6bf9fc85591 Mon Sep 17 00:00:00 2001
From: Kanhaiya <kagrawal88628@gmail.com>
Date: Wed, 21 Dec 2022 15:38:25 +0530
Subject: [PATCH 8/8] fix: podcast style

---
 client/src/assets/placeholder/podcast.js | 15 ++++++------
 client/src/components/podcast/List.js    | 30 +++++++++++++-----------
 client/src/screens/Podcast.js            |  4 ++--
 3 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/client/src/assets/placeholder/podcast.js b/client/src/assets/placeholder/podcast.js
index a8270807..115dab0a 100644
--- a/client/src/assets/placeholder/podcast.js
+++ b/client/src/assets/placeholder/podcast.js
@@ -2,8 +2,7 @@
 export const PODCAST = Object.freeze([
   {
     cover: 'cover.png',
-    title: 'Interview-02: John Doe',
-    tags: ['Technology', 'Academics'],
+    title: '#1-Prof. Saroj Kumar Patel',
     authors: ['Debabrata Malik', 'Rama Krushna Behera'],
     duration: '3:21',
     description:
@@ -11,8 +10,8 @@ export const PODCAST = Object.freeze([
   },
   {
     cover: 'cover.png',
-    title: 'Interview-02: John Doe',
-    tags: ['Technology', 'Academics'],
+    title:
+      '#27-Sai Swarup Mohanty: Product Design Intern at Scaler,UX Design Intern at Upstox, Product Designer',
     authors: ['Debabrata Malik', 'Rama Krushna Behera'],
     duration: '3:20',
     description:
@@ -20,8 +19,8 @@ export const PODCAST = Object.freeze([
   },
   {
     cover: 'cover.png',
-    title: 'Interview-02: John Doe',
-    tags: ['Technology', 'Academics'],
+    title:
+      '#26-Rupesh Mahore: Research intern at Harvard, Former ISRO intern, Innovator of Oxyserve, TEDxSpeake',
     authors: ['Debabrata Malik', 'Rama Krushna Behera'],
     duration: '3:19',
     description:
@@ -29,8 +28,8 @@ export const PODCAST = Object.freeze([
   },
   {
     cover: 'cover.png',
-    title: 'Interview-02: John Doe',
-    tags: ['Technology', 'Academics'],
+    title:
+      '#25-Parul Rath: Former President of Clarion, Chief Coordinator of the Training Committee, Former intern at Citi Bank, Placed at ZS Associates, CH Class of 2022',
     authors: ['Debabrata Malik', 'Rama Krushna Behera'],
     duration: '3:18',
     description:
diff --git a/client/src/components/podcast/List.js b/client/src/components/podcast/List.js
index 212432f2..9cb41e3b 100644
--- a/client/src/components/podcast/List.js
+++ b/client/src/components/podcast/List.js
@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import Image from 'next/image';
+import theme from '../../config/themes/light';
 
 // Libraries
-import { Container, Paper } from '@mui/material';
+import { Container, Paper, useMediaQuery } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import { Table, TableHead, TableBody } from '@mui/material';
 import { Heart, PlayCircle } from 'react-feather';
@@ -15,19 +16,20 @@ import podcastCover from '../../assets/images/podcast_cover.png';
 
 const PodcastList = ({ spotify }) => {
   const Podcast = PODCAST;
+  const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const mediumScreen = useMediaQuery(theme.breakpoints.down('md'));
   const classes = useStyles();
   return (
     <Container>
-      {/* <div className={classes.wrapper}>
+      <div className={classes.wrapper}>
         <Paper>
           <Table>
             <TableHead>
               <tr className={classes.headerRow}>
                 <th></th>
                 <th>Title</th>
-                <th>Tags</th>
                 <th>Time</th>
-                <th>Favorite</th>
+                <th>Fav</th>
               </tr>
             </TableHead>
             <TableBody>
@@ -37,15 +39,11 @@ const PodcastList = ({ spotify }) => {
                     <td>
                       <PlayCircle />
                     </td>
-                    <td>{podcast.title}</td>
                     <td>
-                      {podcast.tags.map((tag, key, podcast) => {
-                        if (key === podcast.length - 1) {
-                          return <span key={key}> {tag} </span>;
-                        } else {
-                          return <span key={key}> {tag}, </span>;
-                        }
-                      })}
+                      {podcast.title.substring(
+                        0,
+                        smallScreen ? 10 : mediumScreen ? 50 : 80,
+                      )}
                     </td>
                     <td>{podcast.duration}</td>
                     <td>
@@ -57,11 +55,11 @@ const PodcastList = ({ spotify }) => {
             </TableBody>
           </Table>
         </Paper>
-      </div> */}
+      </div>
 
       <div>
         <iframe
-          src={`https://open.spotify.com/embed/episode/${spotify[0].id}`}
+          // src={`https://open.spotify.com/embed/episode/${spotify[0].id}`}
           width='100%'
           height='152'
           frameBorder='0'
@@ -86,6 +84,9 @@ const useStyles = makeStyles((theme) => ({
       fontSize: '1.5rem',
       textAlign: 'center',
       padding: '0.75rem',
+      [theme.breakpoints.down('sm')]: {
+        fontSize: '16px',
+      },
     },
     '& th:nth-child(2)': {
       textAlign: 'start',
@@ -105,6 +106,7 @@ const useStyles = makeStyles((theme) => ({
     '& td:nth-child(1)': {
       position: 'absolute',
       botton: '0rem',
+      marginTop: '0.1rem',
     },
     '& td:nth-child(2)': {
       textAlign: 'start',
diff --git a/client/src/screens/Podcast.js b/client/src/screens/Podcast.js
index 7efabc04..767b14d5 100644
--- a/client/src/screens/Podcast.js
+++ b/client/src/screens/Podcast.js
@@ -11,9 +11,9 @@ const Podcast = () => (
   <>
     <Container>
       <BackLink />
+      <LatestPodcast />
+      <PodcastList />
     </Container>
-    <LatestPodcast />
-    <PodcastList />
   </>
 );