diff --git a/app/components/Button/Button.js b/app/components/Button/Button.js
index 411031e44..27284174b 100644
--- a/app/components/Button/Button.js
+++ b/app/components/Button/Button.js
@@ -13,11 +13,11 @@ const RealButton = styled.button`
   color: ${color.white};
   border-radius: 4px;
   font-size: 15px;
-  min-width: 32px;
-  min-height: 32px;
+  height: 36px;
   text-decoration: none;
   flex-shrink: 0;
   outline: none;
+  cursor: pointer;
 
   &::-moz-focus-inner {
     padding: 0;
@@ -59,6 +59,7 @@ const RealButton = styled.button`
 
   &:disabled {
     background: ${color.slateLight};
+    cursor: default;
   }
 `;
 
@@ -71,23 +72,18 @@ const Label = styled.span`
 `;
 
 const Inner = styled.span`
-  padding: 4px 16px;
+  padding: 0 12px;
   display: flex;
   line-height: 28px;
   justify-content: center;
   align-items: center;
 
-  ${props => props.small && `
-    padding: 1px 10px;
-  `}
-
   ${props => props.hasIcon && (props.small ? 'padding-left: 6px;' : 'padding-left: 10px;')}
 `;
 
 export type Props = {
   type?: string,
   value?: string,
-  small?: boolean,
   icon?: React$Element<any>,
   className?: string,
   children?: React$Element<any>,
@@ -97,7 +93,6 @@ export default function Button({
   type = 'text',
   icon,
   children,
-  small,
   value,
   ...rest
 }: Props) {
@@ -106,7 +101,7 @@ export default function Button({
 
   return (
     <RealButton {...rest}>
-      <Inner hasIcon={hasIcon} small={small}>
+      <Inner hasIcon={hasIcon}>
         {hasIcon && icon}
         {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
       </Inner>
diff --git a/app/components/Input/Input.js b/app/components/Input/Input.js
index 7897b3b3e..38a552dce 100644
--- a/app/components/Input/Input.js
+++ b/app/components/Input/Input.js
@@ -60,11 +60,11 @@ export type Props = {
   className?: string,
 };
 
-export default function Input({ type, label, ...rest }: Props) {
+export default function Input({ type, label, className, ...rest }: Props) {
   const InputComponent = type === 'textarea' ? RealTextarea : RealInput;
 
   return (
-    <Wrapper>
+    <Wrapper className={className}>
       <label>
         {label && <LabelText>{label}</LabelText>}
         <Outline>
diff --git a/app/components/Labeled/Labeled.js b/app/components/Labeled/Labeled.js
index ec9e2f8fe..72909be45 100644
--- a/app/components/Labeled/Labeled.js
+++ b/app/components/Labeled/Labeled.js
@@ -12,12 +12,12 @@ type Props = {
 
 const Labeled = ({ label, children, ...props }: Props) => (
   <Flex column {...props}>
-    <Header>{label}</Header>
+    <Label>{label}</Label>
     {children}
   </Flex>
 );
 
-const Header = styled(Flex)`
+export const Label = styled(Flex)`
   margin-bottom: ${size.medium};  
   font-size: 13px;
   font-weight: 500;
diff --git a/app/components/Labeled/index.js b/app/components/Labeled/index.js
index 544f6a7b3..c68dffece 100644
--- a/app/components/Labeled/index.js
+++ b/app/components/Labeled/index.js
@@ -1,3 +1,4 @@
 // @flow
-import Labeled from './Labeled';
+import Labeled, { Label } from './Labeled';
 export default Labeled;
+export { Label };
diff --git a/app/components/Layout/components/SidebarLink.js b/app/components/Layout/components/SidebarLink.js
index 58ba5a323..3171b3da5 100644
--- a/app/components/Layout/components/SidebarLink.js
+++ b/app/components/Layout/components/SidebarLink.js
@@ -10,7 +10,7 @@ import CollapsedIcon from 'components/Icon/CollapsedIcon';
 
 const activeStyle = {
   color: color.black,
-  fontWeight: fontWeight.semiBold,
+  fontWeight: fontWeight.medium,
 };
 
 const StyledGoTo = styled(CollapsedIcon)`
diff --git a/app/components/Modal/Modal.js b/app/components/Modal/Modal.js
index 105f62291..3e5fcbb23 100644
--- a/app/components/Modal/Modal.js
+++ b/app/components/Modal/Modal.js
@@ -16,6 +16,10 @@ type Props = {
 };
 
 injectGlobal`
+  .ReactModal__Overlay {
+    z-index: 100;
+  }
+
   .ReactModal__Body--open {
     overflow: hidden;
   }
diff --git a/app/scenes/Settings/Settings.js b/app/scenes/Settings/Settings.js
index 7b3a02280..5d54313f3 100644
--- a/app/scenes/Settings/Settings.js
+++ b/app/scenes/Settings/Settings.js
@@ -11,6 +11,7 @@ import Flex from 'shared/components/Flex';
 import Button from 'components/Button';
 import Input from 'components/Input';
 import HelpText from 'components/HelpText';
+import { Label } from 'components/Labeled';
 import SlackAuthLink from 'components/SlackAuthLink';
 
 @observer class Settings extends React.Component {
@@ -28,10 +29,10 @@ import SlackAuthLink from 'components/SlackAuthLink';
       <Flex column>
         {showSlackSettings &&
           <Section>
-            <h2>Slack</h2>
+            <SectionLabel>Slack</SectionLabel>
             <HelpText>
               Connect Atlas to your Slack to instantly search for your documents
-              using <code>/atlas</code> command.
+              using <Code>/atlas</Code> command.
             </HelpText>
 
             <SlackAuthLink
@@ -49,7 +50,7 @@ import SlackAuthLink from 'components/SlackAuthLink';
           </Section>}
 
         <Section>
-          <h2>API access</h2>
+          <SectionLabel>API Access</SectionLabel>
           <HelpText>
             Create API tokens to hack on your Atlas.
             Learn more in <Link to="/developers">API documentation</Link>.
@@ -130,7 +131,7 @@ class InlineForm extends React.Component {
     return (
       <form onSubmit={this.handleSubmit}>
         <Flex auto>
-          <Input
+          <ApiKeyInput
             type="text"
             placeholder={validationError ? 'Please add a label' : placeholder}
             value={value || ''}
@@ -158,4 +159,22 @@ const Table = styled.table`
   }
 `;
 
+const SectionLabel = styled(Label)`
+  padding-bottom: 12px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #EAEBEA;
+`;
+
+const Code = styled.code`
+  padding: 4px 6px;
+  margin: 0 2px;
+  background: #EAEBEA;
+  border-radius: 4px;
+`;
+
+const ApiKeyInput = styled(Input)`
+  width: 100%;
+  margin-right: 12px;
+`;
+
 export default Settings;