diff --git a/src/plugins/Modal.js b/src/plugins/Modal.js
index 7589240c0..ed3b92005 100644
--- a/src/plugins/Modal.js
+++ b/src/plugins/Modal.js
@@ -45,12 +45,15 @@ export default class Modal extends Plugin {
 
         modalTabs.appendChild(modalTab)
         modalTab.outerHTML = `
-          <li>
-            <button class="UppyModalTabs-tab"
+          <li class="UppyModalTab">
+            <button class="UppyModalTab-btn"
                role="tab"
                aria-controls="${callerPluginName}"
                href="#${callerPluginName}">
-              ${callerPluginName}
+               <svg class="UppyModalTab-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
+                 <path d="M2.955 14.93l2.667-4.62H16l-2.667 4.62H2.955zm2.378-4.62l-2.666 4.62L0 10.31l5.19-8.99 2.666 4.62-2.523 4.37zm10.523-.25h-5.333l-5.19-8.99h5.334l5.19 8.99z"></path>
+               </svg>
+              <span class="UppyModalTab-name">${callerPluginName}</span>
             </button>
           </li>
         `
@@ -78,23 +81,10 @@ export default class Modal extends Plugin {
 
           <button class="UppyModal-close" title="Close uploader modal" data-modal-hide>×</button>
 
-          <ul class="UppyModalTabs" role="tablist">
-            <li><button class="UppyModalTabs-tab" role="tab" aria-controls="dragdrop" href="#dragdrop">Dizzy</button></li>
-            <li><button class="UppyModalTabs-tab" role="tab" aria-controls="dropbox" href="#dropbox">Ninja</button></li>
-            <li><button class="UppyModalTabs-tab" role="tab" aria-controls="instagram" href="#instagram">Missy</button></li>
-          </ul>
+          <ul class="UppyModalTabs" role="tablist"></ul>
+
+          <div class="UppyModalСontent"></div>
 
-          <div class="UppyModalСontent">
-            <div class="UppyModalContent-panel" role="tabpanel" id="dragdrop">
-              123
-            </div>
-            <div class="UppyModalContent-panel" role="tabpanel" id="dropbox">
-              456
-            </div>
-            <div class="UppyModalContent-panel" role="tabpanel" id="instagram">
-              789
-            </div>
-          </div>
           <div class="UppyModal-progressContainer">
             progress here
           </div>
@@ -115,7 +105,7 @@ export default class Modal extends Plugin {
   }
 
   initEvents () {
-    const tabs = Utils.qsa('.UppyModalTabs-tab')
+    const tabs = Utils.qsa('.UppyModalTab-btn')
     this.tabPanels = []
     tabs.forEach(tab => {
       const tabId = tab.getAttribute('href')
diff --git a/src/scss/_modal.scss b/src/scss/_modal.scss
index 0a0b8cbc2..c90040e9e 100644
--- a/src/scss/_modal.scss
+++ b/src/scss/_modal.scss
@@ -71,9 +71,45 @@ body {
   transition: 300ms width;
   white-space: nowrap;
   width: 55px;
+
+  &:hover {
+    transition: width 300ms ease-out;
+    width: 200px;
+  }
+
+  &:hover .UppyModalTab-name {
+    display: inline;
+    opacity: 1;
+    transition: opacity 300ms 40ms;
+  }
 }
 
-.UppyModalTabs-tab {
+.UppyModalTab {
+
+}
+
+.UppyModalHeader {
+  background-color: #fff;
+  padding: 11px 0;
+  width: 100%;
+}
+
+.UppyModalTab-name {
+  color: #eee;
+  font-size: 14px;
+  opacity: 0;
+  transition: opacity 400ms 40ms;
+  vertical-align: middle;
+}
+
+.UppyModalTab-btn {
+  width: 100%;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+  text-align: left;
   margin-bottom: 8px;
   padding: 12px;
 
@@ -82,70 +118,32 @@ body {
   }
 }
 
-// .UppyModalDialog {
-//   width: 100%;
-// }
-
-.UppyModalHeader {
-  background-color: #fff;
-  padding: 11px 0;
-  width: 100%;
-}
-
-.UppyModalTabs span {
-  color: #eee;
-  font-size: 14px;
-  opacity: 0;
-  transition: opacity 400ms 40ms;
-  vertical-align: middle;
-}
-
-.UppyModalTabs:hover span {
-  display: inline;
-  opacity: 1;
-  transition: opacity 300ms 40ms;
-}
-
-.UppyModalTabs:hover {
-  transition: width 300ms ease-out;
-  width: 200px;
-}
-
-.UppyModalTabs-tab {
-  background-color: transparent;
-  border: 0;
-  cursor: pointer;
-  outline: none;
-  padding: 0;
-  text-align: center;
-}
-
-.UppyModalTabs-tab svg {
+.UppyModalTab-icon {
   fill: #eee;
   margin-right: 8px;
   width: 28px;
   vertical-align: middle;
 }
 
-.tab span {
+.UppyModalTab-name {
   display: inline-block;
 }
 
-.UppyModalHeader-logo svg {
-  fill: #eee;
-  width: 20px;
-}
+// .UppyModalHeader-logo svg {
+//   fill: #eee;
+//   width: 20px;
+// }
 
-.UppyModalHeader-logo {
-  background-color: #78bdf2;
-  padding: 10px 17px 6px 17px;
-}
+// .UppyModalHeader-logo {
+//   background-color: #78bdf2;
+//   padding: 10px 17px 6px 17px;
+// }
 
-.UppyModalHeader-title {
-  font-size: 14px;
-  text-align: center;
-  vertical-align: middle;
-}
+// .UppyModalHeader-title {
+//   font-size: 14px;
+//   text-align: center;
+//   vertical-align: middle;
+// }
 
 .UppySidebarTab--instagram svg {
   width: 26px;