diff --git a/packages/strapi-admin/admin/src/components/OnboardingVideo/styles.scss b/packages/strapi-admin/admin/src/components/OnboardingVideo/Li.js
similarity index 68%
rename from packages/strapi-admin/admin/src/components/OnboardingVideo/styles.scss
rename to packages/strapi-admin/admin/src/components/OnboardingVideo/Li.js
index 7f9d461030..e24184e4b9 100644
--- a/packages/strapi-admin/admin/src/components/OnboardingVideo/styles.scss
+++ b/packages/strapi-admin/admin/src/components/OnboardingVideo/Li.js
@@ -1,4 +1,6 @@
-li.listItem {
+import styled from 'styled-components';
+
+const Li = styled.li`
   display: block;
   padding: 17px 15px;
   cursor: pointer;
@@ -27,7 +29,7 @@ li.listItem {
       z-index: 1;
       width: 100%;
       height: 100%;
-      background-color: rgba(#0E7DE7, .8);
+      background-color: rgba(#0e7de7, 0.8);
     }
     img {
       position: relative;
@@ -100,45 +102,47 @@ li.listItem {
       line-height: 11px;
     }
   }
-}
 
-.hiddenPlayerWrapper {
-  display: none;
-}
+  .hiddenPlayerWrapper {
+    display: none;
+  }
 
-.videoModal {
-  margin-right: auto !important;
-  margin-left: auto !important;
-  .videoModalHeader {
-    padding-bottom: 0;
-    border-bottom: 0;
-    > h5 {
-      font-family: Lato;
-      font-weight: bold!important;
-      font-size: 1.8rem!important;
-      line-height: 3.1rem;
-      color: #333740;
+  .videoModal {
+    margin-right: auto !important;
+    margin-left: auto !important;
+    .videoModalHeader {
+      padding-bottom: 0;
+      border-bottom: 0;
+      > h5 {
+        font-family: Lato;
+        font-weight: bold !important;
+        font-size: 1.8rem !important;
+        line-height: 3.1rem;
+        color: #333740;
+      }
+      > button {
+        display: flex;
+        position: absolute;
+        right: 0;
+        top: 0;
+        margin-top: 0;
+        margin-right: 0;
+        padding: 10px;
+        cursor: pointer;
+        span {
+          line-height: 0.6em;
+        }
+      }
     }
-    > button {
-      display: flex;
-      position: absolute;
-      right: 0;
-      top: 0;
-      margin-top: 0;
-      margin-right: 0;
-      padding: 10px;
-      cursor: pointer;
-      span {
-        line-height: 0.6em;
+    .videoPlayer {
+      > button {
+        top: 50%;
+        margin-top: -0.75em;
+        left: 50%;
+        margin-left: -1.5em;
       }
     }
   }
-  .videoPlayer {
-    > button {
-      top: 50%;
-      margin-top: -0.75em;
-      left: 50%;
-      margin-left: -1.5em;
-    }
-  }
-}
+`;
+
+export default Li;
diff --git a/packages/strapi-admin/admin/src/components/OnboardingVideo/index.js b/packages/strapi-admin/admin/src/components/OnboardingVideo/index.js
index a582f3d7e4..c02a7c2aaf 100644
--- a/packages/strapi-admin/admin/src/components/OnboardingVideo/index.js
+++ b/packages/strapi-admin/admin/src/components/OnboardingVideo/index.js
@@ -10,10 +10,8 @@ import cn from 'classnames';
 
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { Player } from 'video-react';
-
 import 'video-react/dist/video-react.css';
-
-import styles from './styles.scss';
+import Li from './Li';
 
 class OnboardingVideo extends React.Component {
   componentDidMount() {
@@ -46,7 +44,7 @@ class OnboardingVideo extends React.Component {
     this.props.getVideoCurrentTime(
       this.props.id,
       curr,
-      this.props.video.duration,
+      this.props.video.duration
     );
   };
 
@@ -84,49 +82,47 @@ class OnboardingVideo extends React.Component {
 
   render() {
     const { video } = this.props;
-
     return (
-      <li
+      <Li
         key={this.props.id}
         onClick={this.props.onClick}
         id={this.props.id}
-        className={cn(styles.listItem, video.end && styles.finished)}
+        className={cn(video.end && 'finished')}
       >
-        <div className={styles.thumbWrapper}>
+        <div className="thumbWrapper">
           <img src={video.preview} alt="preview" />
-          <div className={styles.overlay} />
-          <div className={styles.play} />
+          <div className="overlay" />
+          <div className="play" />
         </div>
-        <div className={styles.txtWrapper}>
-          <p className={styles.title}>{video.title}</p>
-          <p className={styles.time}>
+        <div className="txtWrapper">
+          <p className="title">{video.title}</p>
+          <p className="time">
             {isNaN(video.duration)
               ? '\xA0'
               : `${Math.floor(video.duration / 60)}:${Math.floor(
-                video.duration,
-              ) % 60}`}
+                  video.duration
+                ) % 60}`}
           </p>
         </div>
 
         <Modal
           isOpen={video.isOpen}
           toggle={this.props.onClick} // eslint-disable-line react/jsx-handler-names
-          className={styles.videoModal}
+          className="videoModal"
           onOpened={this.handleModalOpen}
           onClosed={this.handleModalClose}
         >
           <ModalHeader
             toggle={this.props.onClick} // eslint-disable-line react/jsx-handler-names
-            className={styles.videoModalHeader}
+            className="videoModalHeader"
           >
             {video.title}
           </ModalHeader>
-          <ModalBody className={styles.modalBodyHelper}>
+          <ModalBody className="modalBodyHelper">
             <div>
               <Player
                 ref={this.player}
-                className={styles.videoPlayer}
-                // poster="/assets/poster.png"
+                className="videoPlayer"
                 src={video.video}
                 startTime={video.startTime}
                 preload="auto"
@@ -139,7 +135,7 @@ class OnboardingVideo extends React.Component {
         </Modal>
 
         {!this.props.video.duration && (
-          <div className={cn(styles.hiddenPlayerWrapper)}>
+          <div className="hiddenPlayerWrapper">
             <Player
               ref={this.hiddenPlayer}
               // poster="/assets/poster.png"
@@ -149,7 +145,7 @@ class OnboardingVideo extends React.Component {
             />
           </div>
         )}
-      </li>
+      </Li>
     );
   }
 }
diff --git a/packages/strapi-admin/admin/src/containers/Onboarding/styles.scss b/packages/strapi-admin/admin/src/containers/Onboarding/Wrapper.js
similarity index 76%
rename from packages/strapi-admin/admin/src/containers/Onboarding/styles.scss
rename to packages/strapi-admin/admin/src/containers/Onboarding/Wrapper.js
index bcbfc07c16..a4b803f259 100644
--- a/packages/strapi-admin/admin/src/containers/Onboarding/styles.scss
+++ b/packages/strapi-admin/admin/src/containers/Onboarding/Wrapper.js
@@ -1,4 +1,6 @@
-.videosWrapper {
+import styled, { keyframes } from 'styled-components';
+
+const Wrapper = styled.div`
   position: fixed;
   right: 15px;
   bottom: 15px;
@@ -45,10 +47,10 @@
     border-radius: 3px;
     overflow: hidden;
     &.shown {
-      animation: fadeIn 0.5s forwards;
+      animation: ${fadeIn} 0.5s forwards;
     }
     &.hide {
-      animation: fadeOut 0.5s forwards;
+      animation: ${fadeOut} 0.5s forwards;
     }
 
     ul {
@@ -81,36 +83,37 @@
       }
     }
   }
+`;
+
+const fadeIn = keyframes`
+0% {
+  width: auto;
+  height: auto;
+  opacity: 0;
 }
 
-@keyframes fadeIn {
-  0% {
-    width: auto;
-    height: auto;
-    opacity: 0;
-  }
-
-  5% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
+5% {
+  opacity: 0;
 }
 
-@keyframes fadeOut {
-  0% {
-    opacity: 1;
-  }
-
-  60% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
+100% {
+  opacity: 1;
 }
+`;
+const fadeOut = keyframes`
+0% {
+  opacity: 1;
+}
+
+60% {
+  opacity: 0;
+}
+
+100% {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+`;
+
+export default Wrapper;
diff --git a/packages/strapi-admin/admin/src/containers/Onboarding/index.js b/packages/strapi-admin/admin/src/containers/Onboarding/index.js
index 9cff0d2a54..29bfac719a 100644
--- a/packages/strapi-admin/admin/src/containers/Onboarding/index.js
+++ b/packages/strapi-admin/admin/src/containers/Onboarding/index.js
@@ -13,9 +13,8 @@ import { FormattedMessage } from 'react-intl';
 import { GlobalContext } from 'strapi-helper-plugin';
 import injectSaga from '../../utils/injectSaga';
 import injectReducer from '../../utils/injectReducer';
-
 import OnboardingVideo from '../../components/OnboardingVideo';
-
+import Wrapper from './Wrapper';
 import {
   getVideos,
   onClick,
@@ -28,8 +27,6 @@ import makeSelectOnboarding from './selectors';
 import reducer from './reducer';
 import saga from './saga';
 
-import styles from './styles.scss';
-
 export class Onboarding extends React.Component {
   static contextType = GlobalContext;
 
@@ -101,21 +98,18 @@ export class Onboarding extends React.Component {
     const style = showVideos ? {} : { maxWidth: 0 };
 
     return (
-      <div
+      <Wrapper
         style={style}
-        className={cn(
-          styles.videosWrapper,
-          videos.length > 0 ? styles.visible : styles.hidden
-        )}
+        className={cn(videos.length > 0 ? 'visible' : 'hidden')}
       >
         <div
           style={style}
           className={cn(
-            styles.videosContent,
-            this.state.showVideos ? styles.shown : styles.hide
+            'videosContent',
+            this.state.showVideos ? 'shown' : 'hide'
           )}
         >
-          <div className={styles.videosHeader}>
+          <div className="videosHeader">
             <p>
               <FormattedMessage id="app.components.Onboarding.title" />
             </p>
@@ -128,7 +122,7 @@ export class Onboarding extends React.Component {
               </p>
             )}
           </div>
-          <ul className={styles.onboardingList}>
+          <ul className="onboardingList">
             {videos.map((video, i) => {
               return (
                 <OnboardingVideo
@@ -146,17 +140,17 @@ export class Onboarding extends React.Component {
           </ul>
         </div>
 
-        <div className={styles.openBtn}>
+        <div className="openBtn">
           <button
             onClick={this.handleVideosToggle}
-            className={this.state.showVideos ? styles.active : ''}
+            className={this.state.showVideos ? 'active' : ''}
           >
             <i className="fa fa-question" />
             <i className="fa fa-times" />
             <span />
           </button>
         </div>
-      </div>
+      </Wrapper>
     );
   }
 }