diff --git a/components/login.jsx b/components/login.jsx
index 3e7a084c1..8067aa50a 100644
--- a/components/login.jsx
+++ b/components/login.jsx
@@ -88,15 +88,19 @@ var Login = React.createClass({
       );
     } else if (this.state.username) {
       content = (
-        <span>
-          Logged in as {this.state.username} | <a href="" onClick={this.handleLogoutClick}>Logout</a>
-        </span>
+        <div>
+          <span className="login-text">Logged in as {this.state.username}</span>
+          <a href="" onClick={this.handleLogoutClick}>Logout</a>
+        </div>
       );
     } else {
       content = (
-        <span>
-          <Link to="join">Create an account</Link> | <a href="" onClick={this.handleLoginClick}>Log in</a>
-        </span>
+        <div>
+          <span className="login-text">
+            <img src="/img/logo-webmaker-flat.svg" alt="Webmaker logo"/><a href="" onClick={this.handleLoginClick}>Log in</a>
+          </span>
+          <Link to="join">Create an account</Link>
+        </div>
       );
     }
 
diff --git a/img/logo-webmaker-flat.svg b/img/logo-webmaker-flat.svg
new file mode 100644
index 000000000..5dcbe0a71
--- /dev/null
+++ b/img/logo-webmaker-flat.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="149px" height="154.5px" viewBox="0 0 149 154.5" enable-background="new 0 0 149 154.5" xml:space="preserve">
+<path fill="#FFFFFF" d="M136.108,72.651c-0.072-1.171-0.177-2.325-0.315-3.474c-1.828-3.613-5.844-4.888-9.843-4.474
+	c-7.076,0.724-13.129,4.568-18.93,8.628v27.966c6.065-6.17,11.721-11.92,16.163-16.46c5.087-5.209,11.627-11.318,11.837-11.528
+	C135.379,72.944,135.754,72.746,136.108,72.651z"/>
+<path fill="#FFFFFF" d="M134.318,76.789l0.845-0.84c0.436-0.524,0.779-1.104,1.016-1.734c-0.005-0.166-0.005-0.337-0.011-0.503
+	c-0.226-0.071-0.491-0.017-0.69,0.183l-3.419,3.414c0.397,0.072,0.751,0.171,1.055,0.309
+	C133.545,77.38,133.948,77.098,134.318,76.789z"/>
+<path fill="#FFFFFF" d="M126.9,82.462c-0.271,0.276-0.304,0.696-0.061,0.934c0.237,0.237,0.657,0.215,0.928-0.061l4.099-4.099
+	c-0.47,0.149-0.961,0.271-1.48,0.359c-0.182,0.028-0.37-0.011-0.508-0.104L126.9,82.462z"/>
+<path fill="#FFFFFF" d="M136.235,76.297c-0.525,0.679-1.171,1.287-1.944,1.8c-0.066,0.072-0.138,0.139-0.204,0.21
+	c1.79,1.895,0.718,5.806,1.298,8.413c0.552-3.331,0.856-6.739,0.856-10.225C136.24,76.43,136.235,76.363,136.235,76.297z"/>
+<path fill="#FFFFFF" d="M133.567,86.08c-0.099-1.889,0.492-4.921-0.563-6.662c-2.226,2.271-5.054,5.126-7.617,7.617
+	C113.03,99.016,91.67,120.028,77.27,133.849c-1.806,1.734-3.502,3.336-5.065,4.8c0.596,0.022,1.193,0.05,1.795,0.05
+	c30.032,0,55.088-21.261,60.943-49.536C134.158,88.521,133.645,87.538,133.567,86.08z"/>
+<path fill="#FFFFFF" d="M55.274,65.653v28.982c4.397,0.586,8.882,0.083,13.312-1.116V69.603c0-6.319-0.922-7.799-4.618-7.799
+	C61.516,61.803,58.136,63.062,55.274,65.653z"/>
+<path fill="#FFFFFF" d="M76.22,132.788c8.401-8.7,19.443-19.94,29.53-30.198H94.128V82.086c-4.132,2.724-8.473,5.491-12.98,7.85
+	v12.654H68.586v-7.645c-3.772,0.972-7.617,1.431-11.517,1.144c-0.602-0.044-1.198-0.116-1.795-0.199v6.7H42.31V90.615
+	c-7.54-5.596-12.036-14.848-10.622-25.05c0.834-5.987,3.463-13.29,9.081-16.438c3.53-1.977,10.037-3.159,11.567,1.817
+	c0.011,0.033,0,0.061,0,0.094l0.077-0.022c0.878,1.364,1.271,2.579,1.762,5.143c3.458-3.37,7.728-5.143,12.367-5.143
+	c4.198,0,7.65,1.364,10.318,4.143c0.707,0.701,1.403,1.602,2.005,2.485c4.645-4.75,8.788-6.628,14.356-6.628
+	c3.966,0,7.728,1.182,10.025,3.154c2.856,2.475,3.772,5.452,3.772,12.384V72c1.79-1.182,3.59-2.337,5.419-3.452
+	c5.292-3.209,12.39-6.264,18.725-4.612c1.757,0.458,3.148,1.243,4.204,2.215C130.43,36.726,104.844,14.3,74,14.3
+	c-34.374,0-62.235,27.845-62.235,62.196c0,33.241,26.088,60.385,58.916,62.108C72.337,136.842,74.198,134.887,76.22,132.788z"/>
+<path fill="#FFFFFF" d="M50.772,51.363C48.812,45,40.211,50.17,37.891,53.407c-2.53,3.529-4.198,7.684-4.623,12.02
+	c-0.845,8.694,1.944,18.101,9.042,23.674V67.233c0-7.319-0.514-10.473-1.895-12.964l10.412-2.822
+	C50.811,51.419,50.784,51.396,50.772,51.363z"/>
+<path fill="#FFFFFF" d="M89.969,61.897c-2.491,0-5.966,1.69-8.821,4.253v22.315c3.789-1.955,7.424-4.165,10.804-6.335
+	c0.729-0.47,1.453-0.945,2.176-1.425V69.133C94.128,63.062,93.421,61.897,89.969,61.897z"/>
+</svg>
diff --git a/less/components/sidebar.less b/less/components/sidebar.less
index 4f94d1c56..948ab8fca 100644
--- a/less/components/sidebar.less
+++ b/less/components/sidebar.less
@@ -110,7 +110,17 @@ html.no-js .sidebar {
 }
 
 .sidebar-login {
-  padding: 1rem (@grid-gutter-width / 2) 3rem
+  padding: 1rem (@grid-gutter-width / 2) 3rem;
+  .login-text {
+    img {
+      width: 2.8rem;
+      margin-right: .5rem;
+    }
+    &:after {
+      content: "|";
+      padding: 0 .8rem;
+    }
+  }
 }
 
 .sidebar-menu {
diff --git a/test/browser/login.test.jsx b/test/browser/login.test.jsx
index 457c764cf..8b092cdbf 100644
--- a/test/browser/login.test.jsx
+++ b/test/browser/login.test.jsx
@@ -49,12 +49,10 @@ describe("login", function() {
 
   it("triggers login when user clicks login link", function() {
     var links = TestUtils.scryRenderedDOMComponentsWithTag(login, 'a');
-
-    // We should have a "create an account link" followed by a
-    // "Log in" link.
+    // We should have a "Log in" link followed by a "create an account" link
     links.length.should.equal(2);
 
-    TestUtils.Simulate.click(links[1]);
+    TestUtils.Simulate.click(links[0]);
     teachAPI.startLogin.callCount.should.equal(1);
     login.state.loggingIn.should.be.true;
   });