diff --git a/src/MediaControl.css b/src/MediaControl.css
new file mode 100644
index 0000000..a823172
--- /dev/null
+++ b/src/MediaControl.css
@@ -0,0 +1,8 @@
+.media-control{
+    background-color: #111111;
+    height: 54px;
+    border-radius: 10px;
+    overflow: hidden;
+    display: flex;
+    justify-content: flex-start;
+}
\ No newline at end of file
diff --git a/src/MediaControl.js b/src/MediaControl.js
index b081df4..dab660c 100644
--- a/src/MediaControl.js
+++ b/src/MediaControl.js
@@ -1,3 +1,22 @@
-import React from 'react';
+import React, { Component } from 'react';
+import './MediaControl.css';
+import PlayButton from './MediaControlComponents/Buttons/PlayButton';
+import ClosedCaptionsButton from './MediaControlComponents/Buttons/ClosedCaptionsButton';
+import ExpandButton from './MediaControlComponents/Buttons/ExpandButton';
+import PauseButton from './MediaControlComponents/Buttons/PauseButton';
+import CollapseButton from './MediaControlComponents/Buttons/CollapseButton';
 
-export default () => <div>Media Control goes here.</div>;
+class MediaControl extends Component{
+
+    render(){
+        return <div className="media-control">
+            <PlayButton />
+            <ClosedCaptionsButton/>
+            <ExpandButton />
+            <PauseButton />
+            <CollapseButton />
+        </div>
+    }
+}
+
+export default MediaControl;
diff --git a/src/MediaControlComponents/Buttons/Button.css b/src/MediaControlComponents/Buttons/Button.css
new file mode 100644
index 0000000..efcf6e6
--- /dev/null
+++ b/src/MediaControlComponents/Buttons/Button.css
@@ -0,0 +1,15 @@
+.button{
+    height: 20px;
+    margin: 8px;
+    color: white;
+    
+}
+
+.button-outer{
+    height: 54px;
+    width: 54px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #1C1C1C;
+}
\ No newline at end of file
diff --git a/src/MediaControlComponents/Buttons/ClosedCaptionsButton.js b/src/MediaControlComponents/Buttons/ClosedCaptionsButton.js
new file mode 100644
index 0000000..26eaf9c
--- /dev/null
+++ b/src/MediaControlComponents/Buttons/ClosedCaptionsButton.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import './Button.css';
+import ClosedCaptions from './../../icons/ClosedCaptions';
+
+class ClosedCaptionsButton extends Component{
+
+    render(){
+        return <div className='button-outer'>
+            <ClosedCaptions className='button' />
+            </div>
+    }
+}
+
+export default ClosedCaptionsButton;
\ No newline at end of file
diff --git a/src/MediaControlComponents/Buttons/CollapseButton.js b/src/MediaControlComponents/Buttons/CollapseButton.js
new file mode 100644
index 0000000..a22905d
--- /dev/null
+++ b/src/MediaControlComponents/Buttons/CollapseButton.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import './Button.css';
+import Collapse from './../../icons/Collapse';
+
+class CollapseButton extends Component{
+
+    render(){
+        return <div className='button-outer'>
+            <Collapse className='button'/>
+        </div>
+    }
+}
+
+export default CollapseButton;
\ No newline at end of file
diff --git a/src/MediaControlComponents/Buttons/ExpandButton.js b/src/MediaControlComponents/Buttons/ExpandButton.js
new file mode 100644
index 0000000..d99de4d
--- /dev/null
+++ b/src/MediaControlComponents/Buttons/ExpandButton.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import './Button.css';
+import Expand from './../../icons/Expand';
+
+class ExpandButton extends Component{
+
+    render(){
+        return <div className='button-outer'>
+                    <Expand className='button'/>
+                </div>
+    }
+}
+
+export default ExpandButton;
\ No newline at end of file
diff --git a/src/MediaControlComponents/Buttons/PauseButton.js b/src/MediaControlComponents/Buttons/PauseButton.js
new file mode 100644
index 0000000..98258d2
--- /dev/null
+++ b/src/MediaControlComponents/Buttons/PauseButton.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import './Button.css';
+import Pause from './../../icons/Pause';
+
+class PauseButton extends Component{
+
+    render(){
+        return <div className='button-outer'>
+            <Pause className='button'/>
+        </div>
+    }
+}
+
+export default PauseButton;
\ No newline at end of file
diff --git a/src/MediaControlComponents/Buttons/PlayButton.js b/src/MediaControlComponents/Buttons/PlayButton.js
new file mode 100644
index 0000000..46f6374
--- /dev/null
+++ b/src/MediaControlComponents/Buttons/PlayButton.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import './Button.css';
+import PlayIcon from './../../icons/Play';
+
+class PlayButton extends Component{
+
+    render(){
+        return <div className='button-outer'>
+                    <PlayIcon className='button'/>
+                </div>
+    }
+}
+
+export default PlayButton;
\ No newline at end of file
diff --git a/src/MediaControlComponents/ProgressBar.js b/src/MediaControlComponents/ProgressBar.js
new file mode 100644
index 0000000..0073ae4
--- /dev/null
+++ b/src/MediaControlComponents/ProgressBar.js
@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+
+class ProgressBar extends Component{
+
+    render(){
+        return <div>ProgressBar</div>
+    }
+}
+
+export default ProgressBar;
\ No newline at end of file
diff --git a/src/MediaControlComponents/Timer.js b/src/MediaControlComponents/Timer.js
new file mode 100644
index 0000000..393cabd
--- /dev/null
+++ b/src/MediaControlComponents/Timer.js
@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+
+class Timer extends Component{
+
+    render(){
+        return <div>Timer</div>
+    }
+}
+
+export default Timer;
\ No newline at end of file
diff --git a/src/MyClass.js b/src/MyClass.js
index 18f308a..bcbda46 100644
--- a/src/MyClass.js
+++ b/src/MyClass.js
@@ -21,13 +21,9 @@ class MyClass {
   }
 
   refreshData(data) {
-    this.items = [];
-    data.forEach(item => {
-      items.push({
-        id: item.id,
-        name: item.name
-      });
-    });
+    this.items = data.map(item => (
+     {id: item.id, name: item.name}
+    ));
   }
 
   startTimer() {