diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
index 1be747d..da75841 100644
--- a/src/components/home/Home.tsx
+++ b/src/components/home/Home.tsx
@@ -1,18 +1,20 @@
 import MeetingsPanel from "./MeetingsPanel";
 import ShortCuts from "./ShortCuts";
+import Container from "@mui/material/Container";
+import Grid from "@mui/material/Grid";
 
 const Home: React.FC = () => {
   return (
-        <div className="container-fluid">
-          <div className="row main-home">
-            <div className="col-8">
+        <Container className="main-home">
+          <Grid container>
+            <Grid item sm={8}>
               <MeetingsPanel />
-            </div>
-            <div className="col-4 short-cuts">
+            </Grid>
+            <Grid item sm={4}>
               <ShortCuts />
-            </div>
-          </div>
-        </div>
+            </Grid>
+          </Grid>
+        </Container>
   );
 };
 
diff --git a/src/components/home/Meeting.tsx b/src/components/home/Meeting.tsx
index 80cb4d2..4c4771a 100644
--- a/src/components/home/Meeting.tsx
+++ b/src/components/home/Meeting.tsx
@@ -1,13 +1,13 @@
-const Meeting: React.FC = () => {
+function Meeting(props: any) {
     return (
 
         <div className="row meeting">
             <div className="col-12">
                 <div className="row">
-                <label>Metting Name</label>
+                <label>{props.meetingName}</label>
                 </div>
                 <div className="row">
-                <label>Metting time</label>
+                <label>{props.meetingTime}</label>
                 </div>
             </div>
         </div>
diff --git a/src/components/home/MeetingsPanel.tsx b/src/components/home/MeetingsPanel.tsx
index 18f6e7f..56f5042 100644
--- a/src/components/home/MeetingsPanel.tsx
+++ b/src/components/home/MeetingsPanel.tsx
@@ -10,7 +10,8 @@ const MeetingsPanel: React.FC = () => {
             <label>Sunday, 03 Feb 2022</label>
             </div>
 
-            <Meeting />
+            <Meeting meetingName="first meeting" meetingTime="time" />
+            <Meeting meetingName="second meeting" meetingTime="time" />
         </div>
     );
   };
diff --git a/src/components/home/ShortCuts.tsx b/src/components/home/ShortCuts.tsx
index feb50fd..255acb7 100644
--- a/src/components/home/ShortCuts.tsx
+++ b/src/components/home/ShortCuts.tsx
@@ -1,56 +1,43 @@
-import people from "./images/people.png";
-import plus from "./images/plus.png";
-import phoneCall from "./images/phone-call.png";
-import circle from "./images/circle.png";
+import PeopleIcon from '@mui/icons-material/People';
+import AddIcon from '@mui/icons-material/Add';
+import PhoneEnabledIcon from '@mui/icons-material/PhoneEnabled';
+// import phoneCall from "./images/phone-call.png";
+import CircleIcon from '@mui/icons-material/Circle';
+import Button from "@mui/material/Button";
+import Grid from "@mui/material/Grid";
 
 const ShortCuts: React.FC = () => {
     return (
-        <>
-        <div className="row row-1">
-            <div className="col-6">
-            <div className="row">
-                <a className="tile btn">
-                <img src={people} />
-                </a>
-            </div>
-            <div className="row">
-                <label>New Meeting</label>
-            </div>
-            </div>
-            <div className="col-6">
-            <div className="row">
-                <a className="tile btn">
-                <img src={plus} />
-                </a>
-            </div>
-            <div className="row">
-                <label>Join</label>
-            </div>
-            </div>
+        <div className="short-cuts" >
+            <Grid className="row-1" container spacing={2}>
+                <Grid item sm={6}>
+                    <Button className="tile">
+                        <PeopleIcon className="icon" />
+                    </Button>
+                    <label>New Meeting</label>
+                </Grid>
+                <Grid item sm={6}>
+                    <Button className="tile">
+                        <AddIcon className="icon" />
+                    </Button>
+                    <label>Join</label>
+                </Grid>
+            </Grid>
+            <Grid className="row-2" container spacing={2}>
+                <Grid item sm={6}>
+                    <Button className="tile">
+                        <PhoneEnabledIcon className="icon" />
+                    </Button>
+                    <label>Call Favourites</label>
+                </Grid>
+                <Grid item sm={6}>
+                    <Button className="tile">
+                        <CircleIcon className="icon" />
+                    </Button>
+                    <label>Recordings</label>
+                </Grid>
+            </Grid>
         </div>
-        <div className="row row-2">
-            <div className="col-6">
-            <div className="row">
-                <a className="tile btn">
-                <img src={phoneCall} />
-                </a>
-            </div>
-            <div className="row">
-                <label>Call Favourites</label>
-            </div>
-            </div>
-            <div className="col-6">
-            <div className="row">
-                <a className="tile btn">
-                <img src={circle} />
-                </a>
-            </div>
-            <div className="row">
-                <label>Recordings</label>
-            </div>
-            </div>
-        </div>
-        </>
     );
   };
   
diff --git a/src/style/App.css b/src/style/App.css
index dc28bb3..8488b16 100644
--- a/src/style/App.css
+++ b/src/style/App.css
@@ -1,116 +1,49 @@
-.col-1 {
-  width: 8.33% !important;
-}
-
-.col-2 {
-  width: 16.66% !important;
-}
-
-.col-3 {
-  width: 25% !important;
-}
-
-.col-4 {
-  width: 33.33% !important;
-}
-
-.col-5 {
-  width: 41.66% !important;
-}
-
-.col-6 {
-  width: 50% !important;
-}
-
-.col-7 {
-  width: 58.33% !important;
-}
-
-.col-8 {
-  width: 66.66% !important;
-}
-
-.col-9 {
-  width: 75% !important;
-}
-
-.col-10 {
-  width: 83.33% !important;
-}
-
-.col-11 {
-  width: 91.66% !important;
-}
-
-.col-12 {
-  width: 100% !important;
-}
-
-[class*="col-"] {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
-}
-
-.row {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  max-width: 100%;
-}
-
-.row * {
+.full-width {
   width: 100%;
 }
 
-.container-fluid {
-  width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-label {
-  display: inline-block;
+.main-home {
+  max-width: 100% !important;
 }
 
 .main-home .meetings-panel {
-  display: block;
-  margin-top: 20vh;
-  margin-left: 10vw;
+  margin: auto;
+  margin-top: 15vh;
   border-style: solid;
   border-color: #D3D3D3;
   border-width: 2px;
-  width: 40vw;
-  height: 60vh;
   border-radius: 40px;
+  width: 65%;
+  height: 65vh;
   overflow: hidden;
 }
 
 .main-home .meetings-panel .row {
   width: 100%;
-  margin: 0;
 }
 
 .main-home .meetings-panel .current-time {
   text-align: center;
   background-color: grey;
+  padding-top: 1%;
+  padding-bottom: 1%;
 }
 
 .main-home .meetings-panel .current-date {
   text-align: center;
   background-color: grey;
+  padding-bottom: 1%;
 }
 
 .main-home .meetings-panel .meeting {
   background-color: #D3D3D3;
   text-align: center;
   margin-top: 15px;
+  line-height: 2;
 }
 
 .main-home .short-cuts .row-1 {
-  margin-top: 25vh;
+  margin-top: 30vh;
 }
 
 .main-home .short-cuts .row-2 {
@@ -118,21 +51,22 @@ label {
 }
 
 .main-home .short-cuts label {
-  width: 10vw;
+  display: inline-block;
+  width: 100px;
   text-align: center;
 }
 
 .main-home .short-cuts .tile {
+  margin-right: 100%;
   background-color: #D3D3D3;
-  width: 10vw;
-  height: 10vw;
-  border-radius: 1.5vw;
+  width: 100px;
+  height: 100px;
+  border-radius: 16px;
 }
 
-.main-home .short-cuts .tile img {
+.main-home .short-cuts .tile .icon {
+  color: black;
   width: 70%;
   height: 70%;
-  margin-top: 15%;
-  margin-left: 15%;
 }
 /*# sourceMappingURL=App.css.map */
\ No newline at end of file
diff --git a/src/style/App.css.map b/src/style/App.css.map
index e9cde3a..7961ebd 100644
--- a/src/style/App.css.map
+++ b/src/style/App.css.map
@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "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",
+    "mappings": "AG4CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AK7ClB,AAAA,UAAU,CAAC;EAGP,SAAS,EAAE,eAAe;CA6CM;;AAhDpC,AAII,UAJM,CAIN,eAAe,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,IAAI;EAChB,YAAY,EAAE,KAAK;EACnB,YAAY,EPRS,OAAO;EOS5B,YAAY,EAAE,GAAG;EACjB,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,MAAM;CAgBO;;AA7B/B,AAcQ,UAdE,CAIN,eAAe,CAUX,IAAI,CAAC;EACD,KAAK,EAAE,IAAI;CAAG;;AAf1B,AAgBQ,UAhBE,CAIN,eAAe,CAYX,aAAa,CAAC;EACV,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,IAAI;EACtB,WAAW,EAAE,EAAE;EACf,cAAc,EAAE,EAAE;CAAG;;AApBjC,AAqBQ,UArBE,CAIN,eAAe,CAiBX,aAAa,CAAC;EACV,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,IAAI;EACtB,cAAc,EAAE,EAAE;CAAG;;AAxBjC,AAyBQ,UAzBE,CAIN,eAAe,CAqBX,QAAQ,CAAC;EACL,gBAAgB,EP1BC,OAAO;EO2BxB,UAAU,EAAE,MAAM;EAClB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,CAAC;CAAG;;AA7B7B,AA+BQ,UA/BE,CA8BN,WAAW,CACP,MAAM,CAAC;EACH,UAAU,EAAE,IAAI;CAAG;;AAhC/B,AAiCQ,UAjCE,CA8BN,WAAW,CAGP,MAAM,CAAC;EACH,UAAU,EAAE,GAAG;CAAG;;AAlC9B,AAmCQ,UAnCE,CA8BN,WAAW,CAKP,KAAK,CAAC;EACF,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;CAAG;;AAtCjC,AAuCQ,UAvCE,CA8BN,WAAW,CASP,KAAK,CAAC;EACF,YAAY,EAAE,IAAI;EAClB,gBAAgB,EPzCC,OAAO;EO0CxB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,aAAa,EAAE,IAAI;CAIC;;AAhDhC,AA6CY,UA7CF,CA8BN,WAAW,CASP,KAAK,CAMD,KAAK,CAAC;EACF,KAAK,EAAE,KAAK;EACZ,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;CAAG",
     "sources": [
         "App.sass",
         "_variables.sass",
diff --git a/src/style/base/_base.sass b/src/style/base/_base.sass
index afa0261..f88dda4 100644
--- a/src/style/base/_base.sass
+++ b/src/style/base/_base.sass
@@ -1,42 +1,46 @@
-.col-1
-    width: 8.33% !important
-.col-2
-    width: 16.66% !important
-.col-3
-    width: 25% !important
-.col-4
-    width: 33.33% !important
-.col-5
-    width: 41.66% !important
-.col-6
-    width: 50% !important
-.col-7
-    width: 58.33% !important
-.col-8
-    width: 66.66% !important
-.col-9
-    width: 75% !important
-.col-10
-    width: 83.33% !important
-.col-11
-    width: 91.66% !important
-.col-12
-    width: 100% !important
+// .col-1
+//     width: 8.33% !important
+// .col-2
+//     width: 16.66% !important
+// .col-3
+//     width: 25% !important
+// .col-4
+//     width: 33.33% !important
+// .col-5
+//     width: 41.66% !important
+// .col-6
+//     width: 50% !important
+// .col-7
+//     width: 58.33% !important
+// .col-8
+//     width: 66.66% !important
+// .col-9
+//     width: 75% !important
+// .col-10
+//     width: 83.33% !important
+// .col-11
+//     width: 91.66% !important
+// .col-12
+//     width: 100% !important
 
-[class*="col-"]
-    flex: 0 0 auto
+// [class*="col-"]
+//     flex: 0 0 auto
 
-.row
-    box-sizing: border-box
-    display: flex
-    max-width: 100%
-    *
-        width: 100%
+// .row
+//     box-sizing: border-box
+//     display: flex
+//     max-width: 100%
+//     *
+//         width: 100%
 
-.container-fluid
-    width: 100%
-    margin-right: auto
-    margin-left: auto
+// .container-fluid
+//     width: 100%
+//     margin-right: auto
+//     margin-left: auto
 
-label
-    display: inline-block
\ No newline at end of file
+// label
+//     display: inline-block
+
+
+.full-width
+    width: 100%
\ No newline at end of file
diff --git a/src/style/modules/_mainHome.sass b/src/style/modules/_mainHome.sass
index 05255dc..f2334de 100644
--- a/src/style/modules/_mainHome.sass
+++ b/src/style/modules/_mainHome.sass
@@ -1,44 +1,49 @@
 .main-home
+    // margin: 0 !important
+    // width: 100% !important
+    max-width: 100% !important
     .meetings-panel
-        display: block
-        margin-top: 20vh
-        margin-left: 10vw
+        margin: auto
+        margin-top: 15vh
         border-style: solid
         border-color: $main-home-background-color
         border-width: 2px
-        width: 40vw
-        height: 60vh
         border-radius: 40px
+        width: 65%
+        height: 65vh
         overflow: hidden
         .row
             width: 100%
-            margin: 0
         .current-time
             text-align: center
             background-color: grey
+            padding-top: 1%
+            padding-bottom: 1%
         .current-date
             text-align: center
             background-color: grey
+            padding-bottom: 1%
         .meeting
             background-color: $main-home-background-color
             text-align: center
             margin-top: 15px
-
+            line-height: 2
     .short-cuts
         .row-1
-            margin-top: 25vh
+            margin-top: 30vh
         .row-2
             margin-top: 5vh
         label
-            width: 10vw
+            display: inline-block
+            width: 100px
             text-align: center
         .tile
+            margin-right: 100%
             background-color: $main-home-background-color
-            width: 10vw
-            height: 10vw
-            border-radius: 1.5vw
-            img
+            width: 100px
+            height: 100px
+            border-radius: 16px
+            .icon
+                color: black
                 width: 70%
-                height: 70%
-                margin-top: 15%
-                margin-left: 15%
\ No newline at end of file
+                height: 70%
\ No newline at end of file