diff --git a/src/components/input-group/input-group.css b/src/components/input-group/input-group.css
index 6ca8661c..6c9d8b83 100644
--- a/src/components/input-group/input-group.css
+++ b/src/components/input-group/input-group.css
@@ -1,7 +1,7 @@
 @import '../../css/units.css';
 
 .input-group + .input-group {
-    margin-left: calc(3 * $grid-unit);
+    margin-left: calc(2 * $grid-unit);
 }
 
 .disabled {
@@ -9,9 +9,3 @@
     /* Prevent any user actions */
     pointer-events: none;
 }
-
-@media only screen and (max-width: 1095px) {
-    .input-group + .input-group {
-        margin-left: calc(2 * $grid-unit);
-    }
-}
diff --git a/src/components/labeled-icon-button/labeled-icon-button.css b/src/components/labeled-icon-button/labeled-icon-button.css
index 54a755e4..f150fda6 100644
--- a/src/components/labeled-icon-button/labeled-icon-button.css
+++ b/src/components/labeled-icon-button/labeled-icon-button.css
@@ -15,8 +15,8 @@ $border-radius: 0.25rem;
 }
 
 .edit-field-icon {
-    width: 1.5rem;
-    height: 1.5rem;
+    width: 1.25rem;
+    height: 1.25rem;
     flex-grow: 1;
     vertical-align: middle;
 }
diff --git a/src/components/paint-editor/paint-editor.css b/src/components/paint-editor/paint-editor.css
index e643a0b9..9e28b9f9 100644
--- a/src/components/paint-editor/paint-editor.css
+++ b/src/components/paint-editor/paint-editor.css
@@ -4,7 +4,7 @@
 .editor-container {
     display: flex;
     flex-direction: column;
-    padding: calc(4 * $grid-unit);
+    padding: calc(3 * $grid-unit);
 }
 
 .row {
@@ -30,7 +30,7 @@
 
 .mod-dashed-border {
     border-right: 1px dashed $ui-pane-border;
-    padding-right: calc(3 * $grid-unit);
+    padding-right: calc(2 * $grid-unit);
 }
 
 .mod-unselect {
@@ -48,7 +48,7 @@ $border-radius: 0.25rem;
     border: 1px solid $ui-pane-border;
     border-radius: 0;
     border-left: none;
-    padding: calc(2 * $grid-unit);
+    padding: .35rem;
 }
 
 .button-group-button:last-of-type {
@@ -110,16 +110,16 @@ $border-radius: 0.25rem;
 }
 
 .menu-item-icon {
-    margin-right: calc(2* $grid-unit);
+    margin-right: calc(2 * $grid-unit);
 }
 
 .mod-mode-tools {
-    margin-left: calc(3 * $grid-unit);
+    margin-left: calc(2 * $grid-unit);
 }
 
 .canvas-container {
-    width: 500px;
-    height: 400px;
+    width: 480px;
+    height: 360px;
     box-sizing: content-box;
     border: 1px solid #e8edf1;
     border-radius: .25rem;
@@ -143,13 +143,14 @@ $border-radius: 0.25rem;
     flex-direction: row-reverse;
 }
 
-@media only screen and (max-width: 1095px) {
+@media only screen and (max-width: $full-size-paint) {
+    .editor-container {
+        padding: calc(3 * $grid-unit) $grid-unit;
+    }
+
     .mode-selector {
+        margin-right: $grid-unit;
         flex-direction: column;
         justify-content: flex-start;
     }
-
-    .mod-dashed-border {
-        padding-right: calc(2 * $grid-unit);
-    }
 }
diff --git a/src/components/paint-editor/paint-editor.jsx b/src/components/paint-editor/paint-editor.jsx
index 40cee25c..d68c3c2c 100644
--- a/src/components/paint-editor/paint-editor.jsx
+++ b/src/components/paint-editor/paint-editor.jsx
@@ -122,13 +122,22 @@ class PaintEditorComponent extends React.Component {
                         <div className={styles.row}>
                             {/* Name field */}
                             <InputGroup>
-                                <Label text={this.props.intl.formatMessage(messages.costume)}>
+                                <MediaQuery minWidth={layout.fullSizeEditorMinWidth}>
+                                    <Label text={this.props.intl.formatMessage(messages.costume)}>
+                                        <BufferedInput
+                                            type="text"
+                                            value={this.props.name}
+                                            onSubmit={this.props.onUpdateName}
+                                        />
+                                    </Label>
+                                </MediaQuery>
+                                <MediaQuery maxWidth={layout.fullSizeEditorMinWidth - 1}>
                                     <BufferedInput
                                         type="text"
                                         value={this.props.name}
                                         onSubmit={this.props.onUpdateName}
                                     />
-                                </Label>
+                                </MediaQuery>
                             </InputGroup>
 
                             {/* Undo/Redo */}
@@ -205,20 +214,22 @@ class PaintEditorComponent extends React.Component {
                                 />
                             </InputGroup>
 
-                            <InputGroup>
-                                <MediaQuery minWidth={layout.fullSizeMinWidth}>
-                                    <LabeledIconButton
-                                        disabled={!shouldShowBringForward()}
-                                        imgSrc={sendFrontIcon}
-                                        title={this.props.intl.formatMessage(messages.front)}
-                                        onClick={this.props.onSendToFront}
-                                    />
-                                    <LabeledIconButton
-                                        disabled={!shouldShowSendBackward()}
-                                        imgSrc={sendBackIcon}
-                                        title={this.props.intl.formatMessage(messages.back)}
-                                        onClick={this.props.onSendToBack}
-                                    />
+                            <MediaQuery minWidth={layout.fullSizeEditorMinWidth}>
+                                <div className={styles.row}>
+                                    <InputGroup>
+                                        <LabeledIconButton
+                                            disabled={!shouldShowBringForward()}
+                                            imgSrc={sendFrontIcon}
+                                            title={this.props.intl.formatMessage(messages.front)}
+                                            onClick={this.props.onSendToFront}
+                                        />
+                                        <LabeledIconButton
+                                            disabled={!shouldShowSendBackward()}
+                                            imgSrc={sendBackIcon}
+                                            title={this.props.intl.formatMessage(messages.back)}
+                                            onClick={this.props.onSendToBack}
+                                        />
+                                    </InputGroup>
 
                                     {/* To be rotation point */}
                                     {/* <InputGroup>
@@ -229,8 +240,10 @@ class PaintEditorComponent extends React.Component {
                                             onClick={function () {}}
                                         />
                                     </InputGroup> */}
-                                </MediaQuery>
-                                <MediaQuery maxWidth={layout.fullSizeMinWidth - 1}>
+                                </div>
+                            </MediaQuery>
+                            <MediaQuery maxWidth={layout.fullSizeEditorMinWidth - 1}>
+                                <InputGroup>
                                     <Dropdown
                                         className={styles.modUnselect}
                                         enterExitTransitionDurationMs={0}
@@ -280,8 +293,8 @@ class PaintEditorComponent extends React.Component {
                                     >
                                         {this.props.intl.formatMessage(messages.more)}
                                     </Dropdown>
-                                </MediaQuery>
-                            </InputGroup>
+                                </InputGroup>
+                            </MediaQuery>
                         </div>
 
                         {/* Second Row */}
diff --git a/src/components/tool-select-base/tool-select-base.css b/src/components/tool-select-base/tool-select-base.css
index ce601ccd..d6b87b4a 100644
--- a/src/components/tool-select-base/tool-select-base.css
+++ b/src/components/tool-select-base/tool-select-base.css
@@ -1,15 +1,16 @@
 @import '../../css/colors.css';
+@import "../../css/units.css";
 
 $border-radius: .25rem;
 
 .mod-tool-select {
     display: inline-block;
-    margin: .25rem;
+    margin: $grid-unit;
     border: none;
     border-radius: $border-radius;
     outline: none;
     background: none;
-    padding: 0.25rem;
+    padding: $grid-unit;
     font-size: 0.85rem;
     transition: 0.2s;
 }
@@ -28,3 +29,9 @@ img.tool-select-icon {
     flex-grow: 1;
     vertical-align: middle;
 }
+
+@media only screen and (max-width: $full-size-paint) {
+    .mod-tool-select {
+        margin: 0;
+    }
+}
diff --git a/src/containers/paper-canvas.css b/src/containers/paper-canvas.css
index 82e8e028..ef983c99 100644
--- a/src/containers/paper-canvas.css
+++ b/src/containers/paper-canvas.css
@@ -1,6 +1,6 @@
 .paper-canvas {
-    width: 500px;
-    height: 400px;
+    width: 480px;
+    height: 360px;
     margin: auto;  
     position: relative;
     background-color: #fff;
diff --git a/src/containers/paper-canvas.jsx b/src/containers/paper-canvas.jsx
index a53d8c7e..e4ef7edf 100644
--- a/src/containers/paper-canvas.jsx
+++ b/src/containers/paper-canvas.jsx
@@ -150,9 +150,9 @@ class PaperCanvas extends React.Component {
         return (
             <canvas
                 className={styles.paperCanvas}
-                height="400px"
+                height="360px"
                 ref={this.setCanvas}
-                width="500px"
+                width="480px"
                 onWheel={this.handleWheel}
             />
         );
diff --git a/src/css/units.css b/src/css/units.css
index c9e15169..07cbf5d6 100644
--- a/src/css/units.css
+++ b/src/css/units.css
@@ -4,7 +4,9 @@ See https://github.com/LLK/scratch-paint/issues/13 */
 
 /* ACTUALLY, THIS IS EDITED ;)
 THIS WAS CHANGED ON 10/25/2017 BY @mewtaylor TO ADD A VARIABLE FOR THE SMALLEST
-GRID UNITS.*/
+GRID UNITS.
+
+ALSO EDITED ON 11/13/2017 TO ADD IN CONTANTS FOR LAYOUT FROM `layout-contents.js`*/
 
 $space: 0.5rem;
 $grid-unit: .25rem;
@@ -18,3 +20,7 @@ $stage-menu-height: 2.75rem;
 $library-header-height: 4.375rem;
 
 $form-radius: calc($space / 2);
+
+/* layout contants from `layout-constants.js`, minus 1px */
+$full-size: 1095px;
+$full-size-paint: 1249px;
diff --git a/src/lib/layout-constants.js b/src/lib/layout-constants.js
index fa583248..d19dda60 100644
--- a/src/lib/layout-constants.js
+++ b/src/lib/layout-constants.js
@@ -1,3 +1,3 @@
 export default {
-    fullSizeMinWidth: 1096
+    fullSizeEditorMinWidth: 1250
 };