diff --git a/webpack/css/_index.scss b/webpack/css/_index.scss
index 1d94772a9..d6e67cdf0 100644
--- a/webpack/css/_index.scss
+++ b/webpack/css/_index.scss
@@ -2,6 +2,7 @@
 @import "temp";
 // Node Modules
 @import "../../node_modules/@blueprintjs/core/dist/blueprint.css";
+@import "../../node_modules/@blueprintjs/datetime/dist/blueprint-datetime.css";
 // Partials
 @import "animations";
 @import "colors";
diff --git a/webpack/css/farm_designer/farm_designer.scss b/webpack/css/farm_designer/farm_designer.scss
index b449c2437..c6cd4051b 100644
--- a/webpack/css/farm_designer/farm_designer.scss
+++ b/webpack/css/farm_designer/farm_designer.scss
@@ -209,17 +209,18 @@
 
 .garden-map-legend {
   position: fixed;
-  top: 11rem;
-  right: -12rem;
+  top: 110px;
+  right: -120px;
   transition: all 0.4s ease;
   box-shadow: 0px 1px 4px #555;
+  max-width: 336px;
   &.active {
-    transform: translateX(-14rem);
+    transform: translateX(-140px);
   }
   .content {
     background: $light_green;
-    padding: 1rem;
-    border-radius: 0.5rem;
+    padding: 10px;
+    border-radius: 5px;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
diff --git a/webpack/farm_designer/farm_events/edit_fe_form.tsx b/webpack/farm_designer/farm_events/edit_fe_form.tsx
index e7325b6cb..428178918 100644
--- a/webpack/farm_designer/farm_events/edit_fe_form.tsx
+++ b/webpack/farm_designer/farm_events/edit_fe_form.tsx
@@ -236,7 +236,8 @@ export class EditFEForm extends React.Component<EditFEProps, State> {
               />
             </Col>
             <Col xs={6}>
-              <BlurableInput type="time"
+              <BlurableInput
+                type="time"
                 className="add-event-start-time"
                 name="start_time"
                 value={this.fieldGet("startTime")}
diff --git a/webpack/farm_designer/map/garden_map_legend.tsx b/webpack/farm_designer/map/garden_map_legend.tsx
index 79944f1f8..c7712cf99 100644
--- a/webpack/farm_designer/map/garden_map_legend.tsx
+++ b/webpack/farm_designer/map/garden_map_legend.tsx
@@ -22,75 +22,77 @@ export function GardenMapLegend(props: GardenMapLegendProps) {
   let minusBtnClass = (zoomLvl && zoomLvl <= 0.4) ? "disabled" : "";
   let menuClass = legendMenuOpen ? "active" : "";
 
-  return <div
-    className={"garden-map-legend " + menuClass}
-    style={{ zoom: 1 }}>
+  return (
     <div
-      className={"menu-pullout " + menuClass}
-      onClick={toggle("legendMenuOpen")}>
-      <span>
-        {t("Menu")}
-      </span>
-      <i className="fa fa-2x fa-arrow-left" />
-    </div>
-    <div className="content">
-      <div className="zoom-buttons">
-        <button
-          className={"fb-button plus-button green top " + plusBtnClass}
-          onClick={zoom(0.1)}>
-          <i className="fa fa-2x fa-plus" />
-        </button>
-        <button
-          className={"fb-button plus-button green bottom " + minusBtnClass}
-          onClick={zoom(-0.1)}>
-          <i className="fa fa-2x fa-minus" />
-        </button>
+      className={"garden-map-legend " + menuClass}
+      style={{ zoom: 1 }}>
+      <div
+        className={"menu-pullout " + menuClass}
+        onClick={toggle("legendMenuOpen")}>
+        <span>
+          {t("Menu")}
+        </span>
+        <i className="fa fa-2x fa-arrow-left" />
       </div>
-      <div className="toggle-buttons">
-        <LayerToggle
-          value={showPlants}
-          label={t("Plants?")}
-          onClick={toggle("showPlants")}
-        />
-        <LayerToggle
-          value={showPoints}
-          label={t("Points?")}
-          onClick={toggle("showPoints")}
-        />
-        <LayerToggle
-          value={showSpread}
-          label={t("Spread?")}
-          onClick={toggle("showSpread")}
-        />
-        <LayerToggle
-          value={showFarmbot}
-          label={t("FarmBot?")}
-          onClick={toggle("showFarmbot")}
-        />
-      </div>
-      <div className="farmbot-origin">
-        <label>
-          {t("Origin")}
-        </label>
-        <div className="quadrants">
-          <div
-            className={"quadrant " + (botOriginQuadrant === 2 && "selected")}
-            onClick={updateBotOriginQuadrant(2)}
+      <div className="content">
+        <div className="zoom-buttons">
+          <button
+            className={"fb-button plus-button green top " + plusBtnClass}
+            onClick={zoom(0.1)}>
+            <i className="fa fa-2x fa-plus" />
+          </button>
+          <button
+            className={"fb-button plus-button green bottom " + minusBtnClass}
+            onClick={zoom(-0.1)}>
+            <i className="fa fa-2x fa-minus" />
+          </button>
+        </div>
+        <div className="toggle-buttons">
+          <LayerToggle
+            value={showPlants}
+            label={t("Plants?")}
+            onClick={toggle("showPlants")}
           />
-          <div
-            className={"quadrant " + (botOriginQuadrant === 1 && "selected")}
-            onClick={updateBotOriginQuadrant(1)}
+          <LayerToggle
+            value={showPoints}
+            label={t("Points?")}
+            onClick={toggle("showPoints")}
           />
-          <div
-            className={"quadrant " + (botOriginQuadrant === 3 && "selected")}
-            onClick={updateBotOriginQuadrant(3)}
+          <LayerToggle
+            value={showSpread}
+            label={t("Spread?")}
+            onClick={toggle("showSpread")}
           />
-          <div
-            className={"quadrant " + (botOriginQuadrant === 4 && "selected")}
-            onClick={updateBotOriginQuadrant(4)}
+          <LayerToggle
+            value={showFarmbot}
+            label={t("FarmBot?")}
+            onClick={toggle("showFarmbot")}
           />
         </div>
+        <div className="farmbot-origin">
+          <label>
+            {t("Origin")}
+          </label>
+          <div className="quadrants">
+            <div
+              className={"quadrant " + (botOriginQuadrant === 2 && "selected")}
+              onClick={updateBotOriginQuadrant(2)}
+            />
+            <div
+              className={"quadrant " + (botOriginQuadrant === 1 && "selected")}
+              onClick={updateBotOriginQuadrant(1)}
+            />
+            <div
+              className={"quadrant " + (botOriginQuadrant === 3 && "selected")}
+              onClick={updateBotOriginQuadrant(3)}
+            />
+            <div
+              className={"quadrant " + (botOriginQuadrant === 4 && "selected")}
+              onClick={updateBotOriginQuadrant(4)}
+            />
+          </div>
+        </div>
       </div>
     </div>
-  </div>
+  );
 }
diff --git a/webpack/farm_designer/map/layers/spread_layer.tsx b/webpack/farm_designer/map/layers/spread_layer.tsx
index 29deee2db..aab067432 100644
--- a/webpack/farm_designer/map/layers/spread_layer.tsx
+++ b/webpack/farm_designer/map/layers/spread_layer.tsx
@@ -2,11 +2,7 @@ import * as React from "react";
 import { Component } from "react";
 import { TaggedPlantPointer } from "../../../resources/tagged_resources";
 import { BotOriginQuadrant } from "../../interfaces";
-import {
-  round,
-  scale,
-  getXYFromQuadrant
-} from "../util";
+import { round, scale, getXYFromQuadrant } from "../util";
 import { cachedCrop } from "../../../open_farm/index";
 
 interface SpreadLayerProps {
@@ -18,20 +14,23 @@ interface SpreadLayerProps {
 
 export function SpreadLayer(props: SpreadLayerProps) {
   let { plants, visible, currentPlant, botOriginQuadrant } = props;
-
-  return <g>
-    {
-      plants.map((p, index) => {
-        let isSelected = p === currentPlant;
-        return (visible || isSelected) ?
-          <SpreadCircle
-            plant={p}
-            key={index}
-            quadrant={botOriginQuadrant}
-          /> : <g key={index} />;
-      })
-    }
-  </g>;
+  return (
+    <g>
+      {
+        plants.map((p, index) => {
+          let isSelected = p === currentPlant;
+          return (visible || isSelected) ?
+            <SpreadCircle
+              plant={p}
+              key={index}
+              quadrant={botOriginQuadrant}
+            />
+            :
+            <g key={index} />;
+        })
+      }
+    </g>
+  );
 }
 
 interface SpreadCircleProps {
@@ -48,7 +47,7 @@ export class SpreadCircle extends
 
   state: SpreadCircleState = { spread: undefined };
 
-  componentWillReceiveProps() {
+  componentDidMount() {
     cachedCrop(this.props.plant.body.openfarm_slug)
       .then(({ spread }) => this.setState({ spread }));
   }
diff --git a/webpack/front_page/front_page.tsx b/webpack/front_page/front_page.tsx
index a76336e48..0feda8050 100644
--- a/webpack/front_page/front_page.tsx
+++ b/webpack/front_page/front_page.tsx
@@ -30,14 +30,13 @@ export class FrontPage extends React.Component<{}, Partial<FrontPageState>> {
   }
 
   componentDidMount() {
+    if (Session.get()) { window.location.href = "/app/controls"; }
     logInit();
     API.setBaseUrl(API.fetchBrowserLocation());
     this.setState({
       serverURL: API.fetchHostName(),
       serverPort: API.inferPort()
     });
-    // RICK CHECK ME ON THIS PLZ -CV
-    if (Session.get()) { window.location.href = "/app/controls"; }
   }
 
   set = (name: keyof FrontPageState) =>
@@ -120,7 +119,8 @@ export class FrontPage extends React.Component<{}, Partial<FrontPageState>> {
       }).catch(error => {
         let errorMessage = prettyPrintApiErrors(error);
         if (errorMessage.toLowerCase().includes("not found")) {
-          errorMessage = "That email address is not associated with an account.";
+          errorMessage =
+            `That email address is not associated with an account.`;
         }
         log(errorMessage);
       });
@@ -136,7 +136,8 @@ export class FrontPage extends React.Component<{}, Partial<FrontPageState>> {
             <label>{t("I agree to the terms of use")}</label>
             <input type="checkbox"
               onChange={this.set("agreeToTerms").bind(this)}
-              value={this.state.agreeToTerms ? "false" : "true"} />
+              value={this.state.agreeToTerms ? "false" : "true"}
+            />
           </div>
           <ul>
             <li>
@@ -173,192 +174,197 @@ export class FrontPage extends React.Component<{}, Partial<FrontPageState>> {
     let expandIcon = showServerOpts ? "minus" : "plus";
     let { toggleServerOpts } = this;
 
-    return (
-      <div className="static-page">
-        <Row>
-          <Col xs={12}>
-            <h1 className="text-center">
-              {t("Welcome to the")}
-              <br className="hidden-sm hidden-md hidden-lg hidden-xl" />
-              &nbsp;
-              {t("FarmBot Web App")}
-            </h1>
-          </Col>
-        </Row>
-
-        <div className="inner-width">
+    // If the user is already logged in, don't show this page.
+    if (!Session.get()) {
+      return (
+        <div className="static-page">
           <Row>
-            <h2 className="text-center">
-              <Col xs={12}>
-                {t("Setup, customize, and control FarmBot from your")}
+            <Col xs={12}>
+              <h1 className="text-center">
+                {t("Welcome to the")}
+                <br className="hidden-sm hidden-md hidden-lg hidden-xl" />
                 &nbsp;
-            <span className="hidden-xs hidden-sm hidden-md">
-                  {t("computer")}
-                </span>
-                <span className="hidden-xs hidden-lg hidden-xl">
-                  {t("tablet")}
-                </span>
-                <span className="hidden-sm hidden-md hidden-lg hidden-xl">
-                  {t("smartphone")}
-                </span>
-              </Col>
-            </h2>
+                {t("FarmBot Web App")}
+              </h1>
+            </Col>
           </Row>
-          <img
-            className="hidden-xs hidden-sm col-md-7"
-            src="/app-resources/img/farmbot-desktop.png"
-          />
-          <img
-            className="hidden-xs hidden-md hidden-lg hidden-xl col-sm-7"
-            src="/app-resources/img/farmbot-tablet.png"
-          />
-          <Row>
-            {!forgotPassword && (
+
+          <div className="inner-width">
+            <Row>
+              <h2 className="text-center">
+                <Col xs={12}>
+                  {t("Setup, customize, and control FarmBot from your")}
+                  &nbsp;
+              <span className="hidden-xs hidden-sm hidden-md">
+                    {t("computer")}
+                  </span>
+                  <span className="hidden-xs hidden-lg hidden-xl">
+                    {t("tablet")}
+                  </span>
+                  <span className="hidden-sm hidden-md hidden-lg hidden-xl">
+                    {t("smartphone")}
+                  </span>
+                </Col>
+              </h2>
+            </Row>
+            <img
+              className="hidden-xs hidden-sm col-md-7"
+              src="/app-resources/img/farmbot-desktop.png"
+            />
+            <img
+              className="hidden-xs hidden-md hidden-lg hidden-xl col-sm-7"
+              src="/app-resources/img/farmbot-tablet.png"
+            />
+            <Row>
+              {!forgotPassword && (
+                <Col xs={12} sm={5}>
+                  <Widget>
+                    <WidgetHeader title={"Login"}>
+                      <button
+                        className="fb-button gray"
+                        onClick={toggleServerOpts}
+                      >
+                        <i className={`fa fa-${expandIcon}`} />
+                      </button>
+                    </WidgetHeader>
+                    <WidgetBody>
+                      <form onSubmit={this.submitLogin.bind(this)}>
+                        <label>
+                          {t("Email")}
+                        </label>
+                        <input
+                          type="email"
+                          value={this.state.email}
+                          onChange={this.set("email").bind(this)}
+                        />
+                        <label>
+                          {t("Password")}
+                        </label>
+                        <input
+                          type="password"
+                          onChange={this.set("loginPassword").bind(this)}
+                        />
+                        <a
+                          className="forgot-password"
+                          onClick={this.toggleForgotPassword.bind(this)}
+                        >
+                          {t("Forgot password?")}
+                        </a>
+                        {this.state.showServerOpts &&
+                          <div>
+                            <label>
+                              {t("Server URL")}
+                            </label>
+                            <input
+                              type="text"
+                              onChange={this.set("serverURL").bind(this)}
+                              value={this.state.serverURL}
+                            />
+                            <label>
+                              {t("Server Port")}
+                            </label>
+                            <input
+                              type="text"
+                              onChange={this.set("serverPort").bind(this)}
+                              value={this.state.serverPort}
+                            />
+                          </div>
+                        }
+                        <Row>
+                          <button
+                            className="fb-button green pull-right"
+                            style={buttonStylesUniqueToOnlyThisPage}
+                          >
+                            {t("Login")}
+                          </button>
+                        </Row>
+                      </form>
+                    </WidgetBody>
+                  </Widget>
+                </Col>
+              )}
+              {forgotPassword && (
+                <Col xs={12} sm={5}>
+                  <Widget>
+                    <WidgetHeader title={"Reset Password"}>
+                      <button
+                        className="fb-button gray"
+                        onClick={this.toggleForgotPassword.bind(this)}
+                      >
+                        {t("BACK")}
+                      </button>
+                    </WidgetHeader>
+                    <WidgetBody>
+                      <form onSubmit={this.submitForgotPassword.bind(this)}>
+                        <label>{t("Enter Email")}</label>
+                        <input
+                          type="email"
+                          value={this.state.email}
+                          onChange={this.set("email").bind(this)}
+                        />
+                        <Row>
+                          <button
+                            className="fb-button green"
+                            style={buttonStylesUniqueToOnlyThisPage}
+                          >
+                            {t("Reset Password")}
+                          </button>
+                        </Row>
+                      </form>
+                    </WidgetBody>
+                  </Widget>
+                </Col>
+              )}
               <Col xs={12} sm={5}>
                 <Widget>
-                  <WidgetHeader title={"Login"}>
-                    <button
-                      className="fb-button gray"
-                      onClick={toggleServerOpts}
-                    >
-                      <i className={`fa fa-${expandIcon}`} />
-                    </button>
-                  </WidgetHeader>
+                  <WidgetHeader title={"Create An Account"} />
                   <WidgetBody>
-                    <form onSubmit={this.submitLogin.bind(this)}>
+                    <form onSubmit={this.submitRegistration.bind(this)}>
                       <label>
                         {t("Email")}
                       </label>
                       <input
                         type="email"
-                        value={this.state.email}
-                        onChange={this.set("email").bind(this)}
+                        onChange={this.set("regEmail").bind(this)}
+                      />
+                      <label>
+                        {t("Name")}
+                      </label>
+                      <input
+                        type="text"
+                        onChange={this.set("regName").bind(this)}
                       />
                       <label>
                         {t("Password")}
                       </label>
                       <input
                         type="password"
-                        onChange={this.set("loginPassword").bind(this)}
+                        onChange={this.set("regPassword").bind(this)}
                       />
-                      <a
-                        className="forgot-password"
-                        onClick={this.toggleForgotPassword.bind(this)}
-                      >
-                        {t("Forgot password?")}
-                      </a>
-                      {this.state.showServerOpts &&
-                        <div>
-                          <label>
-                            {t("Server URL")}
-                          </label>
-                          <input
-                            type="text"
-                            onChange={this.set("serverURL").bind(this)}
-                            value={this.state.serverURL}
-                          />
-                          <label>
-                            {t("Server Port")}
-                          </label>
-                          <input
-                            type="text"
-                            onChange={this.set("serverPort").bind(this)}
-                            value={this.state.serverPort}
-                          />
-                        </div>
-                      }
-                      <Row>
-                        <button
-                          className="fb-button green pull-right"
-                          style={buttonStylesUniqueToOnlyThisPage}
-                        >
-                          {t("Login")}
-                        </button>
-                      </Row>
-                    </form>
-                  </WidgetBody>
-                </Widget>
-              </Col>
-            )}
-            {forgotPassword && (
-              <Col xs={12} sm={5}>
-                <Widget>
-                  <WidgetHeader title={"Reset Password"}>
-                    <button
-                      className="fb-button gray"
-                      onClick={this.toggleForgotPassword.bind(this)}
-                    >
-                      {t("BACK")}
-                    </button>
-                  </WidgetHeader>
-                  <WidgetBody>
-                    <form onSubmit={this.submitForgotPassword.bind(this)}>
-                      <label>{t("Enter Email")}</label>
+                      <label>{t("Verify Password")}</label>
                       <input
-                        type="email"
-                        value={this.state.email}
-                        onChange={this.set("email").bind(this)}
+                        type="password"
+                        onChange={this.set("regConfirmation").bind(this)}
                       />
+                      {this.maybeRenderTos()}
                       <Row>
                         <button
                           className="fb-button green"
                           style={buttonStylesUniqueToOnlyThisPage}
                         >
-                          {t("Reset Password")}
+                          {t("Create Account")}
                         </button>
                       </Row>
                     </form>
                   </WidgetBody>
                 </Widget>
               </Col>
-            )}
-            <Col xs={12} sm={5}>
-              <Widget>
-                <WidgetHeader title={"Create An Account"} />
-                <WidgetBody>
-                  <form onSubmit={this.submitRegistration.bind(this)}>
-                    <label>
-                      {t("Email")}
-                    </label>
-                    <input
-                      type="email"
-                      onChange={this.set("regEmail").bind(this)}
-                    />
-                    <label>
-                      {t("Name")}
-                    </label>
-                    <input
-                      type="text"
-                      onChange={this.set("regName").bind(this)}
-                    />
-                    <label>
-                      {t("Password")}
-                    </label>
-                    <input
-                      type="password"
-                      onChange={this.set("regPassword").bind(this)}
-                    />
-                    <label>{t("Verify Password")}</label>
-                    <input
-                      type="password"
-                      onChange={this.set("regConfirmation").bind(this)}
-                    />
-                    {this.maybeRenderTos()}
-                    <Row>
-                      <button
-                        className="fb-button green"
-                        style={buttonStylesUniqueToOnlyThisPage}
-                      >
-                        {t("Create Account")}
-                      </button>
-                    </Row>
-                  </form>
-                </WidgetBody>
-              </Widget>
-            </Col>
-          </Row>
+            </Row>
+          </div>
         </div>
-      </div>
-    );
+      );
+    } else {
+      return <div />;
+    }
   }
 }
diff --git a/yarn.lock b/yarn.lock
index a23f1fa46..295260f76 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1395,13 +1395,13 @@ debug@2.6.4:
   dependencies:
     ms "0.7.3"
 
-debug@^2.1.1, debug@^2.2.0, debug@^2.4.5, debug@^2.6.3, debug@^2.6.6:
+debug@^2.1.1, debug@^2.2.0, debug@^2.4.5, debug@^2.6.6:
   version "2.6.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.6.tgz#a9fa6fbe9ca43cf1e79f73b75c0189cbb7d6db5a"
   dependencies:
     ms "0.7.3"
 
-debug@^2.6.8:
+debug@^2.6.3, debug@^2.6.8:
   version "2.6.8"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
   dependencies: