diff --git a/components/calendar.module.css b/components/calendar.module.css
new file mode 100644
index 0000000..d83a0c3
--- /dev/null
+++ b/components/calendar.module.css
@@ -0,0 +1,43 @@
+
+.calendar {
+ margin: 0 10vw;
+ height: max-content;
+ max-width: 100vw;
+}
+
+.calendarWrapper {
+ padding-top: 45px;
+ vertical-align: top;
+ width: 80vw;
+}
+
+@media only screen and (max-width: 768px) {
+ .calendarWrapper {
+ display: flex;
+ width: 100%;
+ }
+ .nodelogo {
+ display: none;
+ }
+}
+
+.nodelogo {
+ left: -120px;
+ z-index: -1;
+ position: absolute;
+ top: 19vh;
+ transform: rotate(10deg);
+ max-width: 100vw;
+ opacity: .15;
+}
+
+.timelineHeader {
+ font-size: calc(20px + 4vw);
+ line-height: 6vw;
+ text-transform: uppercase;
+ margin-bottom: 0;
+ background-repeat: no-repeat;
+ background-position-y: 80%;
+ width: min-content;
+ padding-left: var(--gap);
+}
\ No newline at end of file
diff --git a/components/calendar.tsx b/components/calendar.tsx
new file mode 100644
index 0000000..b7aa52d
--- /dev/null
+++ b/components/calendar.tsx
@@ -0,0 +1,153 @@
+import React from 'react';
+import styles from './calendar.module.css';
+import { makeStyles } from '@material-ui/core/styles';
+import Timeline from '@material-ui/lab/Timeline';
+import TimelineItem from '@material-ui/lab/TimelineItem';
+import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
+import TimelineConnector from '@material-ui/lab/TimelineConnector';
+import TimelineContent from '@material-ui/lab/TimelineContent';
+import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
+import LaptopMacIcon from '@material-ui/icons/LaptopMac';
+import SubjectIcon from '@material-ui/icons/Subject';
+import Typography from '@material-ui/core/Typography';
+import Icon from '@material-ui/core/Icon';
+import hackSC from '../images/logo.png';
+import nodelogo from '../images/nodelogo.png';
+
+const useStyles = makeStyles(() => ({
+ title: {
+ fontSize: 'calc(12px + 2vw)',
+ lineHeight: 'calc(12px + 2.5vw)',
+ letterSpacing: '1px',
+ minWidth: '50vw',
+ font:
+ '--font-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
+ fontStyle: 'normal',
+ fontWeight: 'normal',
+ textTransform: 'uppercase',
+ },
+ date: {
+ color: 'var(--blue)',
+ fontSize: 'calc(12px + 1.5vw)',
+ wordWrap: 'normal',
+ maxWidth: '20vw',
+ },
+ dot: {
+ padding: '0px',
+ margin: '0px',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'transparent',
+ },
+ separator: {
+ height: 'calc(90px + 10vh)',
+ },
+ line: {
+ backgroundColor: '#FEDA22',
+ margin: '10px',
+ },
+ imageIcon: {
+ maxHeight: 'calc(20px + 4vw)',
+ maxWidth: 'calc(20px + 4vw)',
+ alignContent: 'center',
+ padding: '0px',
+ margin: '0px',
+ },
+ iconRoot: {
+ height: 'calc(20px + 4vw)',
+ width: 'calc(20px + 4vw)',
+ },
+}));
+
+export default function CalendarSection() {
+ const classes = useStyles();
+
+ return (
+ <>
+
+ Timeline
+ 
+
+
+
+
+
+ 00.00.00
+
+
+
+
+
+
+
+
+
+
+ Applications Released
+
+
+ Make sure to subscribe to our mailing list!
+
+
+
+
+
+
+ 00.00.00
+
+
+
+
+
+
+
+
+
+
+ Applications Due
+
+ Application Link: // link
+
+
+
+
+
+ 02.19.21 - 02.21.21
+
+
+
+
+
+ 
+
+
+ {/* */}
+
+
+
+
+
+
+
+ );
+};
+
+export default Calendar;
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..3f43021
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,5 @@
+// webpack.config.js
+{
+ /\.svg$/;
+ ['@svgr/webpack'];
+}