diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index ca9b16b..8916883 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -2,44 +2,62 @@ import React, { Component } from 'react';
 import { NavLink } from 'react-router-dom';
 import { connect } from 'react-redux';
 
+function AuthMenu(props) {
+  if (!props.showMenu) {
+    return null;
+  }
+
+  return (
+    <div className="ui menu dropdown" style={{display: "inline"}}>
+      <div className="ui left icon input">
+        <input type="text" placeholder="Username">
+        </input>
+        <i className="users icon"></i>
+      </div>
+      <div className="ui left icon input">
+        <input type="text" placeholder="Password">
+        </input>
+        <i className="lock icon"></i>
+      </div>
+      <div className="fluid ui buttons">
+        <button className="ui button">Sign Up</button>
+        <div className="or"></div>
+        <button className="ui positive button">Sign In</button>
+      </div>
+    </div>
+    )
+}
+
 class NavBar extends Component {
   constructor (props) {
     super(props)
     this.state = {
         logged_in: false,
-        auth_menu_visible: false
+        auth_menu_visible: false,
+        where_in_auth_menu: false,
     }
+    this.handleLoginDropdown = this.handleLoginDropdown.bind(this)
   }
-  componentDidMount() {
+
+  handleLoginDropdown() {
+    this.setState(state => ({
+      auth_menu_visible: !state.auth_menu_visible
+    }));
   }
+
   render() {
     return (
-     <div className="ui four item secondary menu">
-       <NavLink exact to="/" className='item'>sudoscientist:~#</NavLink>
-       <NavLink to="/posts/" className='item' activeClassName='active'>Posts</NavLink>
-       <NavLink to="/about/" className='item' activeClassName='active'>About</NavLink>
-       <div className="item ui dropdown">
-         <div className="text">Login</div>
-         <i className="dropdown icon"></i>
-         <div className="ui menu" style={{display: "inline"}}>
-           <div className="ui left icon input">
-             <input type="text" placeholder="Username">
-             </input>
-             <i className="users icon"></i>
-           </div>
-           <div className="ui left icon input">
-             <input type="text" placeholder="Password">
-             </input>
-             <i className="lock icon"></i>
-           </div>
-           <div className="fluid ui buttons">
-             <button className="ui button">Sign Up</button>
-             <div className="or"></div>
-             <button className="ui positive button">Sign In</button>
-           </div>
+     <div>
+       <div className="ui four item secondary menu">
+         <NavLink exact to="/" className='item'>sudoscientist:~#</NavLink>
+         <NavLink to="/posts/" className='item' activeClassName='active'>Posts</NavLink>
+         <NavLink to="/about/" className='item' activeClassName='active'>About</NavLink>
+         <div onClick={this.handleLoginDropdown} className='item ui button dropdown'>
+           Login
+           <i className="dropdown icon"></i>
+           <AuthMenu showMenu={this.state.auth_menu_visible}></AuthMenu>
          </div>
        </div>
-
      </div>
     );
   }
@@ -48,7 +66,7 @@ class NavBar extends Component {
 const mapStateToProps = (state) => {
     return {
         logged_in: state.logged_in,
-        auth_menu_collapsed: state.auth_menu_collapsed
+        auth_menu_visible: state.auth_menu_visible
     };
 }