diff --git a/src/components/About/About.js b/src/components/About/About.js
index b8467463..88a23adc 100644
--- a/src/components/About/About.js
+++ b/src/components/About/About.js
@@ -3,7 +3,7 @@ import React from 'react'
 import AboutTimeline from './AboutTimeline/AboutTimeline'
 import HeaderBanner from '../Shared/HeaderBanner/HeaderBanner'
 import './About.css'
-import Carousel from './AboutCarousel/carousel'
+import AboutCarousel from './AboutCarousel/AboutCarousel'
 import RoborregosVideo from './VideoPlayer/Responsive-Video-Player'
 
 const About = () => {
@@ -21,7 +21,7 @@ const About = () => {
         iconColorScheme={{ primary: '#FF7549', secondary: '#C43F65' }}
       />
       <RoborregosVideo />
-      <Carousel />
+      <AboutCarousel />
       <AboutTimeline />
     </>
   )
diff --git a/src/components/About/AboutCarousel/AboutCarousel.css b/src/components/About/AboutCarousel/AboutCarousel.css
new file mode 100644
index 00000000..f1ee8cd2
--- /dev/null
+++ b/src/components/About/AboutCarousel/AboutCarousel.css
@@ -0,0 +1,71 @@
+.about-carousel {
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  position: relative;
+}
+
+.about-carousel .full-size-slide,
+.about-carousel .small-size-slide {
+  width: 100%;
+  height: 100vh;
+}
+
+/* Full-Size styles */
+.full-size-slide {
+  padding-left: 5%;  
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.full-size-slide .full-size-slide__image{
+  height: 100%;
+  width: 63%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.full-size-slide .full-size-slide__text-container{
+  height: 100%;
+  width: 32.5%;
+  color:white;
+  
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+.full-size-slide .full-size-slide__text-container>h1{
+  font-size: 3vw;
+}
+.full-size-slide .full-size-slide__text-container>p{
+  font-size: 1.75vw;
+}
+
+/* Small-Size styles */
+.small-size-slide {
+  height: 100vh;
+  width: 100%;
+  color:white;
+  /* add background opacity to div with background image */
+  box-shadow: inset 0 0 0 1000px rgba(0,0,0,.6);
+
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.small-size-slide>h1{
+  width: 75%;
+  font-size: 5vh;
+  text-align: center;
+}
+.small-size-slide>p{
+  width: 75%;  
+  font-size: 2.75vh;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/src/components/About/AboutCarousel/AboutCarousel.js b/src/components/About/AboutCarousel/AboutCarousel.js
new file mode 100644
index 00000000..5cf3a67d
--- /dev/null
+++ b/src/components/About/AboutCarousel/AboutCarousel.js
@@ -0,0 +1,105 @@
+// @flow
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
+import React from 'react'
+import Carousel from 'react-material-ui-carousel'
+import ArrowBackIcon from '@material-ui/icons/ArrowBackIos'
+import ArrowForwardIcon from '@material-ui/icons/ArrowForwardIos'
+import { makeStyles, withStyles } from '@material-ui/core/styles'
+import useWindowSize from '../../../hooks/useWindowSize'
+import { SMALL_WIDTH } from '../../../constants'
+import HighPerformanceTeam from '../../../images/about/carousel/High-Performance.jpg'
+import SocialProjects from '../../../images/about/carousel/Social-Projects.jpg'
+import Events from '../../../images/about/carousel/Events.jpg'
+import StudentCommunity from '../../../images/about/carousel/Student-Community.jpg'
+
+import './AboutCarousel.css'
+
+const images = [
+  {
+    title: 'High-Performance Team',
+    subtitle: "We participate in different national and international competitions for autonomous robots such as Mexico's TMR (Torneo Mexicano de Robótica), RoboCup, and IEEE LARC (Latin American Robotics Competition). As a team, we want to demonstrate the potential of Mexico in the development and innovation of technology.",
+    img: HighPerformanceTeam,
+  },
+
+  {
+    title: 'Social Projects',
+    subtitle: 'We like to share everything we’ve learned with the community, giving free classes, workshops and participating in webinars where we can talk and teach about all the technologies we’ve used and all the experiences we’ve had that inspire us.',
+    img: SocialProjects,
+  },
+
+  {
+    title: 'Events & Outreach',
+    subtitle: 'We participate in congresses and events such as INCMty, Conexión Tec, The International Congress of Mechatronics - Automatization and Technology, Semana i and many more.',
+    img: Events,
+  },
+
+  {
+    title: 'Student Community',
+    subtitle: 'To reach our community, we give free workshops about useful technologies such as: ROS, Git and Machine Learning, as well as our annual biggest event: Candidates, where the team gives weekly classes of basic programming, mechanics and electronics for anyone in the university interested, and organize a robotics tournament to get new members',
+    img: StudentCommunity,
+  },
+]
+
+const slidesFullView = images.map((image) => (
+  <div className="full-size-slide">
+    <div className="full-size-slide__text-container">
+      <h1>{image.title}</h1>
+      <p>{image.subtitle}</p>
+    </div>
+    <div className="full-size-slide__image" style={{ backgroundImage: `url(${image.img})` }} />
+  </div>
+))
+const slidesSmallView = images.map((image) => (
+  <div className="small-size-slide" style={{ backgroundImage: `url(${image.img})` }}>
+    <h1>{image.title}</h1>
+    <p>{image.subtitle}</p>
+  </div>
+))
+
+const arrowStyles = {
+  root: {
+    fontSize: '5vh !important',
+    color: 'white !important',
+  },
+}
+const ArrowForward = withStyles(arrowStyles)(ArrowForwardIcon)
+const ArrowBack = withStyles(arrowStyles)(ArrowBackIcon)
+
+const useStyles = makeStyles({
+  root: {
+    backgroundColor: 'transparent !important',
+    opacity: '1 !important',
+    color: 'white !important',
+    margin: 0,
+  },
+})
+
+function AboutCarousel() {
+  const { width } = useWindowSize()
+  const classes = useStyles()
+
+  return (
+    <Carousel
+      className="about-carousel"
+      navButtonsAlwaysVisible
+      navButtonsProps={{ className: classes.root }}
+      autoPlay={false}
+      indicatorContainerProps={{
+        style: {
+          display: 'none',
+        },
+      }}
+      NextIcon={<ArrowForward />}
+      PrevIcon={<ArrowBack />}
+    >
+      { (width > SMALL_WIDTH
+        ? slidesFullView.map((element) => element)
+        : slidesSmallView.map((element) => element)) }
+    </Carousel>
+  )
+}
+
+export default AboutCarousel
diff --git a/src/components/About/AboutCarousel/carousel.css b/src/components/About/AboutCarousel/carousel.css
deleted file mode 100644
index ca26d26a..00000000
--- a/src/components/About/AboutCarousel/carousel.css
+++ /dev/null
@@ -1,141 +0,0 @@
-.carousel{
-    width:100%;
-    height: 100%;
-    background-color: black;
-    display: flex;
-
-}
-
-.leftcarouselInner{
-    height:100%;
-    flex: 40%;
-    background-color: black;
-    display: flex;
-    background-repeat: no-repeat;
-    background-size: cover;
-
-}
-.rightcarouselInner{
-    height:100%;
-    flex: 60%;
-    background-position: center;
-    display: flex;
-    background-repeat: no-repeat;
-    background-size: cover;
-
-}
-
-
-.leftleft{
-    height:100%;
-    flex: 12.5%;
-    background-color: black;
-    display: grid;
-    place-items: center;
-    color:white;
-    cursor:pointer;
-}
-.leftright{
-    height:100%;
-    flex: 75%;
-    background-color: black;
-    display: grid;
-    color:white;
-    position: relative;
-}
-.text-container{
-    
-    margin: 0;
-    position: absolute;
-    top: 50%;
-    -ms-transform: translateY(-50%);
-    transform: translateY(-50%);
-
-    
-}
-.text-container>h1{
-    font-size: 3vw;
-    
-    
-}
-.text-container>p{
-    font-size: 1.75vw;
-
-}
-
-
-.left3{
-    height:100%;
-    flex: 12.5%;
-    background-color: black;
-
-}
-.rightleft{
-    height:100%;
-    flex: 90%;
-    background-position: center;
-}
-.rightright{
-    height:100%;
-    flex: 8.333%;
-    display: grid;
-    place-items: center;
-    color:white;
-    cursor:pointer;
-}
-
-.smallcarousel{
-    width:100%;
-    height: 100%;
-    background-color: black;
-    display: flex;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-}
-.left{
-    height:100%;
-    flex: 12.5%;
-    display: grid;
-    place-items: center;
-    color:white;
-    cursor:pointer;
-    background-color: rgb(0,0,0,.6);
-}
-.center{
-    height:100%;
-    flex: 75%;
-    display: grid;
-    color:white;
-    position: relative;
-    background-color: rgb(0,0,0,.6);
-}
-
-.right{
-    height:100%;
-    flex: 12.5%;
-    display: grid;
-    place-items: center;
-    color:white;
-    cursor:pointer;
-    background-color: rgb(0,0,0,.6);
-}
-.SmallText-Container{
-    margin: 0;
-    position: absolute;
-    top: 50%;
-    -ms-transform: translateY(-50%);
-    transform: translateY(-50%);
-}
-
-.SmallText-Container>h1{
-    font-size: 5vh;
-    text-align: center;
-    
-    
-}
-.SmallText-Container>p{
-    font-size: 2.75vh;
-    text-align: center;
-
-}
\ No newline at end of file
diff --git a/src/components/About/AboutCarousel/carousel.js b/src/components/About/AboutCarousel/carousel.js
deleted file mode 100644
index da5426e8..00000000
--- a/src/components/About/AboutCarousel/carousel.js
+++ /dev/null
@@ -1,149 +0,0 @@
-// @flow
-
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-
-import React, { useState } from 'react'
-import './carousel.css'
-import ArrowBackIcon from '@material-ui/icons/ArrowBackIos'
-import ArrowForwardIcon from '@material-ui/icons/ArrowForwardIos'
-import { withStyles } from '@material-ui/core/styles'
-import useWindowSize from '../../../hooks/useWindowSize'
-import { SMALL_WIDTH } from '../../../constants'
-import HighPerformanceTeam from '../../../images/about/carousel/High-Performance.jpg'
-import SocialProjects from '../../../images/about/carousel/Social-Projects.jpg'
-import Events from '../../../images/about/carousel/Events.jpg'
-import StudentCommunity from '../../../images/about/carousel/Student-Community.jpg'
-
-const images = [
-  {
-    title: 'High-Performance Team',
-    subtitle: "We participate in different national and international competitions for autonomous robots such as Mexico's TMR (Torneo Mexicano de Robótica), RoboCup, and IEEE LARC (Latin American Robotics Competition). As a team, we want to demonstrate the potential of Mexico in the development and innovation of technology.",
-    img: HighPerformanceTeam,
-  },
-
-  {
-    title: 'Social Projects',
-    subtitle: 'We like to share everything we’ve learned with the community, giving free classes, workshops and participating in webinars where we can talk and teach about all the technologies we’ve used and all the experiences we’ve had that inspire us.',
-    img: SocialProjects,
-  },
-
-  {
-    title: 'Events & Outreach',
-    subtitle: 'We participate in congresses and events such as INCMty, Conexión Tec, The International Congress of Mechatronics - Automatization and Technology, Semana i and many more.',
-    img: Events,
-  },
-
-  {
-    title: 'Student Community',
-    subtitle: 'To reach our community, we give free workshops about useful technologies such as: ROS, Git and Machine Learning, as well as our annual biggest event: Candidates, where the team gives weekly classes of basic programming, mechanics and electronics for anyone in the university interested, and organize a robotics tournament to get new members',
-    img: StudentCommunity,
-  },
-
-]
-
-const ArrowForward = withStyles({
-  root: {
-    fontSize: '5vh !important',
-    opacity: '1 !important',
-    color: 'white !important',
-  },
-})(ArrowForwardIcon)
-const ArrowBack = withStyles({
-  root: {
-    fontSize: '5vh !important',
-    opacity: '1 !important',
-    color: 'white !important',
-  },
-})(ArrowBackIcon)
-
-function Carousel() {
-  const { width } = useWindowSize()
-  const [currImg, setCurrImg] = useState(0)
-  if (width > SMALL_WIDTH) {
-    return (
-      <div className="carousel">
-        <div className="leftcarouselInner">
-          <div
-            className="leftleft"
-            onClick={() => {
-              if (currImg === 0) {
-                setCurrImg(3)
-              }
-              if (currImg > 0) {
-                setCurrImg(currImg - 1)
-              }
-            }}
-          >
-            <ArrowBack />
-          </div>
-          <div className="leftright">
-            <div className="text-container">
-              <h1>{images[currImg].title}</h1>
-              <p>{images[currImg].subtitle}</p>
-            </div>
-
-          </div>
-          <div className="left3" />
-        </div>
-        <div className="rightcarouselInner" style={{ backgroundImage: `url(${images[currImg].img})` }}>
-          <div className="rightleft" />
-          <div
-            className="rightright"
-            onClick={() => {
-              if (currImg === 3) {
-                setCurrImg(0)
-              }
-              if (currImg < 3) {
-                setCurrImg(currImg + 1)
-              }
-            }}
-          >
-            <ArrowForward />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="smallcarousel" style={{ backgroundImage: `url(${images[currImg].img})` }}>
-      <div
-        className="left"
-        onClick={() => {
-          if (currImg === 0) {
-            setCurrImg(3)
-          }
-          if (currImg > 0) {
-            setCurrImg(currImg - 1)
-          }
-        }}
-      >
-        <ArrowBack />
-      </div>
-      <div className="center">
-        <div className="SmallText-Container">
-          <h1>{images[currImg].title}</h1>
-          <p>{images[currImg].subtitle}</p>
-        </div>
-
-      </div>
-      <div
-        className="right"
-        onClick={() => {
-          if (currImg === 3) {
-            setCurrImg(0)
-          }
-          if (currImg < 3) {
-            setCurrImg(currImg + 1)
-          }
-        }}
-      >
-        <ArrowForward />
-      </div>
-    </div>
-
-  )
-}
-
-export default Carousel