diff --git a/src/components/WebexInMeeting/WebexInMeeting.css b/src/components/WebexInMeeting/WebexInMeeting.css
deleted file mode 100644
index e170d2c28..000000000
--- a/src/components/WebexInMeeting/WebexInMeeting.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.in-meeting {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.in-meeting .remote-media {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.in-meeting .local-media {
-  position: absolute;
-  bottom: 25%;
-  right: 3%;
-  width: 20%;
-  height: 20%;
-  z-index: 1;
-}
diff --git a/src/components/WebexInMeeting/WebexInMeeting.js b/src/components/WebexInMeeting/WebexInMeeting.js
index 5ebf9215b..83cb217a5 100644
--- a/src/components/WebexInMeeting/WebexInMeeting.js
+++ b/src/components/WebexInMeeting/WebexInMeeting.js
@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 
 import {WebexLocalMedia, WebexRemoteMedia} from '..';
 
-import './WebexInMeeting.css';
+import './WebexInMeeting.scss';
 
 /**
  * Webex In-Meeting component displays the remote stream plus
  * the local stream at the bottom right corner.
  *
- * @param {object} props
- * @returns {object} JSX of the component
+ * @param {string} props.meetingID  ID of the meeting for which to show media
+ * @returns {Object} JSX of the component
  */
 export default function WebexInMeeting({meetingID}) {
   return (
diff --git a/src/components/WebexInMeeting/WebexInMeeting.scss b/src/components/WebexInMeeting/WebexInMeeting.scss
new file mode 100644
index 000000000..c87dcbe1d
--- /dev/null
+++ b/src/components/WebexInMeeting/WebexInMeeting.scss
@@ -0,0 +1,29 @@
+$shadow-offset: 0.25rem;
+$shadow-blur: 1rem;
+$shadow-spread: -0.125rem;
+$shadow-color: rgba(0, 0, 0, 0.2);
+
+.in-meeting {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .remote-media {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .local-media {
+    position: absolute;
+    bottom: 2rem;
+    right: 2rem;
+
+    width: 13.5rem;
+    height: 7.5rem;
+
+    box-shadow: $shadow-offset $shadow-offset $shadow-blur $shadow-spread $shadow-color;
+    border-radius: 0.25rem;
+    z-index: 1;
+  }
+}
diff --git a/src/components/WebexInMeeting/WebexInMeeting.stories.js b/src/components/WebexInMeeting/WebexInMeeting.stories.js
index 7380bd750..f21d5adeb 100644
--- a/src/components/WebexInMeeting/WebexInMeeting.stories.js
+++ b/src/components/WebexInMeeting/WebexInMeeting.stories.js
@@ -6,23 +6,17 @@ import {WebexJSONAdapter} from '../../adapters';
 
 import {WebexInMeeting, WebexDataProvider} from '..';
 
-// Setup for the stories
 const stories = storiesOf('Webex InMeeting', module);
 const webexAdapter = new WebexJSONAdapter(jsonData);
-const wrapperStyle = {height: '500px', width: '800px', border: '1px solid black'};
 
 stories.add('remote and local media enabled', () => (
-  <div style={wrapperStyle}>
-    <WebexDataProvider adapter={webexAdapter}>
-      <WebexInMeeting meetingID="remote&localMedia" />
-    </WebexDataProvider>
-  </div>
+  <WebexDataProvider adapter={webexAdapter}>
+    <WebexInMeeting meetingID="remote&localMedia" />
+  </WebexDataProvider>
 ));
 
 stories.add('only remote media enabled', () => (
-  <div style={wrapperStyle}>
-    <WebexDataProvider adapter={webexAdapter}>
-      <WebexInMeeting meetingID="remoteMedia" />
-    </WebexDataProvider>
-  </div>
+  <WebexDataProvider adapter={webexAdapter}>
+    <WebexInMeeting meetingID="remoteMedia" />
+  </WebexDataProvider>
 ));