diff --git a/internal_packages/theme-picker/lib/theme-option.jsx b/internal_packages/theme-picker/lib/theme-option.jsx
index a7e7c928d..4065807f6 100644
--- a/internal_packages/theme-picker/lib/theme-option.jsx
+++ b/internal_packages/theme-picker/lib/theme-option.jsx
@@ -100,8 +100,8 @@ class ThemeOption extends React.Component {
           ref="iframe"
           className={`theme-preview-${this.props.theme.name}`}
           frameBorder="0"
-          width="105px"
-          height="65px"
+          width="115px"
+          height="70px"
           flex="1" />
       </div>
     );
diff --git a/internal_packages/theme-picker/lib/theme-picker-store.jsx b/internal_packages/theme-picker/lib/theme-picker-store.jsx
index 82c243446..ed5feb859 100644
--- a/internal_packages/theme-picker/lib/theme-picker-store.jsx
+++ b/internal_packages/theme-picker/lib/theme-picker-store.jsx
@@ -15,7 +15,7 @@ class ThemePickerStore extends NylasStore {
     this.disposable = NylasEnv.commands.add("body", "window:launch-theme-picker", () => {
       Actions.openModal({
         component: (<ThemePicker />),
-        height: 400,
+        height: 390,
         width: 250,
       });
     });
diff --git a/internal_packages/theme-picker/lib/theme-picker.jsx b/internal_packages/theme-picker/lib/theme-picker.jsx
index cdeb1103a..0fb23191b 100644
--- a/internal_packages/theme-picker/lib/theme-picker.jsx
+++ b/internal_packages/theme-picker/lib/theme-picker.jsx
@@ -61,23 +61,23 @@ class ThemePicker extends React.Component {
       <div className="theme-picker">
         <Flexbox direction="column">
           <RetinaImg
-            style={{width: "14", height: "14", margin: "8px", WebkitFilter: "none"}}
+            style={{width: "14", height: "14", margin: "12px", WebkitFilter: "none"}}
             name="picker-close.png"
             mode={RetinaImg.Mode.ContentDark}
             onMouseDown={() => Actions.closeModal()} />
-          <h4 style={{color: "#313435"}}>Themes</h4>
-          <div style={{color: "rgba(35, 31, 32, 0.5)"}}>Click any theme to preview.</div>
-          <div style={{margin: "10px 5px 0 5px", height: "300px", overflow: "auto"}}>
+          <h4 style={{color: "#434648"}}>Themes</h4>
+          <div style={{color: "rgba(35, 31, 32, 0.5)", fontSize: "12px"}}>Click any theme to apply:</div>
+          <div style={{margin: "10px 5px 0 5px", height: "290px", overflow: "auto"}}>
             <Flexbox
               direction="row"
               height="auto"
               style={{alignItems: "flex-start", flexWrap: "wrap"}}>
               {this._renderThemeOptions()}
-              <div className="create-theme">
-                <a href="https://github.com/nylas/N1-theme-starter">Create a Theme</a>
-              </div>
             </Flexbox>
           </div>
+          <div className="create-theme">
+            <a href="https://github.com/nylas/N1-theme-starter">Create a Theme</a>
+          </div>
         </Flexbox>
       </div>
     );
diff --git a/internal_packages/theme-picker/preview-styles/theme-option.less b/internal_packages/theme-picker/preview-styles/theme-option.less
index cc4cb2cc9..9ce83253b 100644
--- a/internal_packages/theme-picker/preview-styles/theme-option.less
+++ b/internal_packages/theme-picker/preview-styles/theme-option.less
@@ -12,6 +12,8 @@ body {
 .theme-option {
   position: absolute;
   top: 0;
+  margin-top: 4px;
+  margin-left: 5px;
   width: 100px;
   height: 60px;
   background-color: @background-secondary;
@@ -22,6 +24,7 @@ body {
 
   &.active-true {
     border: 1px solid #3187e1;
+    box-shadow: 0 0 4px #9ecaed;
   }
 
   &.active-false {
@@ -30,8 +33,9 @@ body {
 
   .theme-name {
     font-family: @font-family;
-    font-size: 14px;
-    margin-top: 5px;
+    font-size: 12px;
+    font-weight: 600;
+    margin-top: 7px;
     height: 18px;
     overflow: hidden;
   }
diff --git a/internal_packages/theme-picker/styles/theme-picker.less b/internal_packages/theme-picker/styles/theme-picker.less
index 290424c36..39e075812 100644
--- a/internal_packages/theme-picker/styles/theme-picker.less
+++ b/internal_packages/theme-picker/styles/theme-picker.less
@@ -3,18 +3,14 @@
 .theme-picker {
   text-align: center;
   cursor: default;
-  .create-theme {
-    width: 100%;
-    text-align: center;
+  h4 {
+    font-size: 14.5px;
+    margin-top: -10px;
     margin-bottom: 5px;
-    a {
-      color: #3187e1;
-      text-decoration: none;
-      cursor: default;
-    }
   }
   .clickable-theme-option {
     width: 115px;
+    height: 70px;
     margin: 2px;
     top: -10px;
     iframe {
@@ -23,4 +19,14 @@
       z-index: 0;
     }
   }
+  .create-theme {
+    width: 100%;
+    text-align: center;
+    margin-top: 5px;
+    a {
+      color: #3187e1;
+      text-decoration: none;
+      cursor: default;
+    }
+  }
 }
diff --git a/static/components/modal.less b/static/components/modal.less
index f318bd0a1..a5d45fbdd 100644
--- a/static/components/modal.less
+++ b/static/components/modal.less
@@ -8,7 +8,7 @@
     position: absolute;
     background-color: @background-primary;
     border-radius: @border-radius-base;
-    box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.15), 0 -0.5px 0 rgba(0, 0, 0, 0.15), 0.5px 0 0 rgba(0, 0, 0, 0.15), -0.5px 0 0 rgba(0, 0, 0, 0.15), 0 4px 7px rgba(0,0,0,0.15);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.20), 0 0 1px rgba(0, 0, 0, 0.7);
   }
 }