diff --git a/package.json b/package.json
index feb3be9c9..7943d7eea 100644
--- a/package.json
+++ b/package.json
@@ -98,11 +98,11 @@
     "react-responsive": "3.0.0",
     "react-slick": "0.16.0",
     "react-string-replace": "0.4.1",
+    "scratch-gui": "0.1.0-prerelease.20190207214203",
     "react-telephone-input": "4.3.4",
     "redux": "3.5.2",
     "redux-thunk": "2.0.1",
     "sass-loader": "6.0.6",
-    "scratch-gui": "0.1.0-prerelease.20190204170342",
     "scratch-l10n": "latest",
     "scratchr2_translations": "git://github.com/LLK/scratchr2_translations.git#master",
     "slick-carousel": "1.6.0",
diff --git a/src/components/forms/toggle-slider.jsx b/src/components/forms/toggle-slider.jsx
new file mode 100644
index 000000000..c2bafb72b
--- /dev/null
+++ b/src/components/forms/toggle-slider.jsx
@@ -0,0 +1,24 @@
+const classNames = require('classnames');
+const PropTypes = require('prop-types');
+const React = require('react');
+
+require('./toggle-slider.scss');
+
+const ToggleSlider = props => (
+    <label className={classNames('toggle-switch', props.className)} >
+        <input
+            checked={props.checked}
+            type="checkbox"
+            onChange={props.onChange}
+        />
+        <span className="slider" />
+    </label>
+);
+
+ToggleSlider.propTypes = {
+    checked: PropTypes.bool,
+    className: PropTypes.string,
+    onChange: PropTypes.func
+};
+
+module.exports = ToggleSlider;
diff --git a/src/components/forms/toggle-slider.scss b/src/components/forms/toggle-slider.scss
new file mode 100644
index 000000000..2704b8141
--- /dev/null
+++ b/src/components/forms/toggle-slider.scss
@@ -0,0 +1,48 @@
+@import "../../colors";
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 38px;
+  height: 24px;
+  top: -.125rem;
+  margin-left: .625rem;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-switch .slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: $ui-dark-gray;
+  border-radius: 12px;
+  transition: .4s;
+}
+
+.toggle-switch .slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: $ui-white;
+  border-radius: 50%;
+  transition: .4s;
+}
+
+.toggle-switch input:checked + .slider {
+  background-color: $ui-aqua;
+}
+
+.toggle-switch input:checked + .slider:before {
+  transform: translateX(14px);
+}
diff --git a/src/components/login/login.jsx b/src/components/login/login.jsx
index 116d3fd9a..bd8449c3b 100644
--- a/src/components/login/login.jsx
+++ b/src/components/login/login.jsx
@@ -7,6 +7,7 @@ const Form = require('../forms/form.jsx');
 const Input = require('../forms/input.jsx');
 const Button = require('../forms/button.jsx');
 const Spinner = require('../spinner/spinner.jsx');
+const FlexRow = require('../flex-row/flex-row.jsx');
 
 require('./login.scss');
 
@@ -59,34 +60,35 @@ class Login extends React.Component {
                         name="password"
                         type="password"
                     />
-                    {this.state.waiting ? [
-                        <Button
-                            className="submit-button white"
-                            disabled="disabled"
-                            key="submitButton"
-                            type="submit"
+                    <FlexRow className="submit-row">
+                        {this.state.waiting ? [
+                            <Button
+                                className="submit-button white"
+                                disabled="disabled"
+                                key="submitButton"
+                                type="submit"
+                            >
+                                <Spinner
+                                    className="spinner"
+                                    color="blue"
+                                />
+                            </Button>
+                        ] : [
+                            <Button
+                                className="submit-button white"
+                                key="submitButton"
+                                type="submit"
+                            >
+                                <FormattedMessage id="general.signIn" />
+                            </Button>
+                        ]}
+                        <a
+                            href="/accounts/password_reset/"
+                            key="passwordResetLink"
                         >
-                            <Spinner
-                                className="spinner"
-                                color="blue"
-                            />
-                        </Button>
-                    ] : [
-                        <Button
-                            className="submit-button white"
-                            key="submitButton"
-                            type="submit"
-                        >
-                            <FormattedMessage id="general.signIn" />
-                        </Button>
-                    ]}
-                    <a
-                        className="right"
-                        href="/accounts/password_reset/"
-                        key="passwordResetLink"
-                    >
-                        <FormattedMessage id="login.needHelp" />
-                    </a>
+                            <FormattedMessage id="login.needHelp" />
+                        </a>
+                    </FlexRow>
                     {error}
                 </Form>
             </div>
diff --git a/src/components/login/login.scss b/src/components/login/login.scss
index f6c809e88..7ddd4a317 100644
--- a/src/components/login/login.scss
+++ b/src/components/login/login.scss
@@ -28,22 +28,23 @@
         font-weight: bold;
     }
 
-    .right {
-        float: right;
-    }
-
     .spinner {
         margin: 0 .8rem;
         width: 1rem;
         vertical-align: middle;
     }
+    
+    .submit-row {
+        justify-content: space-between;
+        flex-direction: row; // override 'column' layout at small widths
+    }
 
     .submit-button {
         margin-top: 5px;
     }
 
     a {
-        margin-top: 15px;
+        margin: auto 0;
         color: $ui-white;
 
         &:link,
diff --git a/src/views/preview/l10n.json b/src/views/preview/l10n.json
index 155e77797..ffe5659c4 100644
--- a/src/views/preview/l10n.json
+++ b/src/views/preview/l10n.json
@@ -10,7 +10,8 @@
     "project.videoSensingChip": "Video Sensing",
     "project.needsConnection": "Needs Connection",
     "project.comments.header": "Comments",
-    "project.comments.turnOff": "Turn off commenting",
+    "project.comments.toggleOff": "Commenting off",
+    "project.comments.toggleOn": "Commenting on",
     "project.comments.turnedOff": "Sorry, comment posting has been turned off for this project.",
     "project.share.notShared": "This project is not shared — so only you can see it. Click share to let everyone see it!",
     "project.share.sharedLong": "Congratulations on sharing your project! Other people can now try it out, give comments, and remix it.",
diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx
index bad39785a..92f20cc42 100644
--- a/src/views/preview/presentation.jsx
+++ b/src/views/preview/presentation.jsx
@@ -25,6 +25,7 @@ const Stats = require('./stats.jsx');
 const StudioList = require('./studio-list.jsx');
 const Subactions = require('./subactions.jsx');
 const InplaceInput = require('../../components/forms/inplace-input.jsx');
+const ToggleSlider = require('../../components/forms/toggle-slider.jsx');
 const TopLevelComment = require('./comment/top-level-comment.jsx');
 const ComposeComment = require('./comment/compose-comment.jsx');
 const ExtensionChip = require('./extension-chip.jsx');
@@ -547,15 +548,16 @@ const PreviewPresentation = ({
                                         <h4><FormattedMessage id="project.comments.header" /></h4>
                                         {canToggleComments ? (
                                             <div>
-                                                <label>
-                                                    <input
-                                                        checked={!projectInfo.comments_allowed}
-                                                        className="comments-allowed-input"
-                                                        type="checkbox"
-                                                        onChange={onToggleComments}
-                                                    />
-                                                    <FormattedMessage id="project.comments.turnOff" />
-                                                </label>
+                                                {projectInfo.comments_allowed ? (
+                                                    <FormattedMessage id="project.comments.toggleOn" />
+                                                ) : (
+                                                    <FormattedMessage id="project.comments.toggleOff" />
+                                                )}
+                                                <ToggleSlider
+                                                    checked={projectInfo.comments_allowed}
+                                                    className="comments-allowed-input"
+                                                    onChange={onToggleComments}
+                                                />
                                             </div>
                                         ) : null}
                                     </FlexRow>