diff --git a/react/src/components/App.css b/react/src/components/App.css
index f48de72..fee6ae3 100644
--- a/react/src/components/App.css
+++ b/react/src/components/App.css
@@ -7,8 +7,9 @@
 #lists {
   display: flex;
   flex-direction: row;
-  flex-grow: 0;
-  max-width: 40%;
+  flex-grow: 1;
+  width: 80%;
+  margin-right: 1rem;
 }
 
 .loading {
@@ -39,11 +40,12 @@
 #filters {
   display: flex;
   justify-content: center;
-  margin: 0.2rem 0.1rem;
-  margin-left: 0.5rem;
-  margin-right: 0.75rem;
+  margin: 0;
   align-self: center;
   flex-shrink: 0;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  position: sticky;
+  z-index: 5;
 }
 
 #filters button {
@@ -56,7 +58,7 @@
   display: flex;
   height: 2.5rem;
   position: relative;
-  z-index: 5;
+  z-index: 10;
 }
 
 #input {
@@ -74,15 +76,21 @@
   border: none;
 }
 
+#input::placeholder {
+  opacity: 0.35;
+}
+
+#input:focus::placeholder {
+  opacity: 0;
+}
+
 #add {
   color: black;
-  font-size: 1rem;
-  font-weight: 500;
-  flex-grow: 1;
+  flex-grow: 0;
   margin: 0;
   padding: 0;
   height: 100%;
-  max-width: 5rem;
+  max-width: 2rem;
   background-color: white;
   border: none;
 }
@@ -186,7 +194,6 @@ textarea.todo--input {
 
 .filter {
   margin: 0.1rem;
-  padding: 0.5rem;
   color: #555555;
   border: none;
   background: none;
diff --git a/react/src/components/App.js b/react/src/components/App.js
index 82c96fc..10b8881 100644
--- a/react/src/components/App.js
+++ b/react/src/components/App.js
@@ -10,7 +10,7 @@ import TodosContainer from '../containers/TodosContainer';
 import LoginForm from '../components/user/LoginForm';
 import SignupForm from '../components/user/SignupForm';
 
-export default class App extends React.Component {
+export default class App extends React.PureComponent {
   componentDidMount() {
     this.props.loadUser();
   }
diff --git a/react/src/components/Filters.js b/react/src/components/Filters.js
new file mode 100644
index 0000000..fa6869a
--- /dev/null
+++ b/react/src/components/Filters.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import FilterLink from '../containers/FilterLink';
+import { VisibilityFilters } from '../actions/todos';
+
+function Filters() {
+  return (
+    <div id="filters">
+      <FilterLink filter={VisibilityFilters.SHOW_ALL}>all</FilterLink>
+      <FilterLink filter={VisibilityFilters.SHOW_ACTIVE}>active</FilterLink>
+      <FilterLink filter={VisibilityFilters.SHOW_COMPLETED}>
+        completed
+      </FilterLink>
+    </div>
+  );
+}
+
+export default Filters;
diff --git a/react/src/components/Header.js b/react/src/components/Header.js
index 9b0104b..0478656 100644
--- a/react/src/components/Header.js
+++ b/react/src/components/Header.js
@@ -1,23 +1,12 @@
 import React from 'react';
-import FilterLink from '../containers/FilterLink';
 import UserHeader from '../components/UserHeader';
-import { VisibilityFilters } from '../actions/todos';
 import ListsContainer from '../containers/ListsContainer';
 
 export default function Header() {
   return (
     <div id="header">
       <UserHeader />
-      <div id="lists-header">
-        <ListsContainer />
-        <div id="filters">
-          <FilterLink filter={VisibilityFilters.SHOW_ALL}>all</FilterLink>
-          <FilterLink filter={VisibilityFilters.SHOW_ACTIVE}>active</FilterLink>
-          <FilterLink filter={VisibilityFilters.SHOW_COMPLETED}>
-            completed
-          </FilterLink>
-        </div>
-      </div>
+      <ListsContainer />
     </div>
   );
 }
diff --git a/react/src/components/Input.js b/react/src/components/Input.js
index 4351db6..24e7cce 100644
--- a/react/src/components/Input.js
+++ b/react/src/components/Input.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '@material-ui/core';
+import AddIcon from '@material-ui/icons/Add';
 
 function Input(props) {
   let input;
@@ -20,14 +21,15 @@ function Input(props) {
         }}
         id="input"
         type="text"
+        placeholder="Add something!"
         onKeyPress={e => {
           if (e.key === 'Enter') {
             submit();
           }
         }}
       />
-      <Button id="add" onClick={() => submit()}>
-        add
+      <Button style={{ borderRadius: 0 }} id="add" onClick={() => submit()}>
+        <AddIcon />
       </Button>
     </div>
   );
diff --git a/react/src/components/Lists.js b/react/src/components/Lists.js
index 0f146d2..de1df95 100644
--- a/react/src/components/Lists.js
+++ b/react/src/components/Lists.js
@@ -6,7 +6,7 @@ import SelectorContainer from '../containers/SelectorContainer';
 
 export default function Lists({ userLoaded, listsLoaded }) {
   return (
-    <React.Fragment>
+    <div id="lists-header">
       {userLoaded &&
         listsLoaded && (
           <div id="lists">
@@ -16,7 +16,7 @@ export default function Lists({ userLoaded, listsLoaded }) {
         )}
       {!userLoaded && <span className="loading">loading.</span>}
       {userLoaded && !listsLoaded && <span className="loading">loading..</span>}
-    </React.Fragment>
+    </div>
   );
 }
 
diff --git a/react/src/components/Todo.js b/react/src/components/Todo.js
index e466386..7261543 100644
--- a/react/src/components/Todo.js
+++ b/react/src/components/Todo.js
@@ -15,7 +15,7 @@ const disabledAction = {
   color: '#dddddd',
 };
 
-class Todo extends React.Component {
+class Todo extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
diff --git a/react/src/components/Todos.js b/react/src/components/Todos.js
index 1e9ff31..f79cfc9 100644
--- a/react/src/components/Todos.js
+++ b/react/src/components/Todos.js
@@ -4,8 +4,9 @@ import PropTypes from 'prop-types';
 import InputContainer from '../containers/InputContainer';
 import TodoListContainer from '../containers/TodoListContainer';
 import Header from './Header';
+import Filters from './Filters';
 
-export default class Todos extends React.Component {
+export default class Todos extends React.PureComponent {
   componentDidUpdate() {
     if (!this.props.user.user && !this.props.user.dirty) {
       this.props.history.replace('/login');
@@ -17,6 +18,7 @@ export default class Todos extends React.Component {
         <Header />
         <InputContainer />
         <TodoListContainer />
+        <Filters />
       </div>
     );
   }
diff --git a/react/src/components/user/LoginForm.js b/react/src/components/user/LoginForm.js
index caada8f..2d82c91 100644
--- a/react/src/components/user/LoginForm.js
+++ b/react/src/components/user/LoginForm.js
@@ -12,7 +12,7 @@ import '../Form.css';
 
 import { login, reset, loginJWT } from '../../actions/user';
 
-class LoginForm extends React.Component {
+class LoginForm extends React.PureComponent {
   componentDidMount() {
     const params = new URLSearchParams(new URL(window.location).search);
     if (params.has('jwt')) {
diff --git a/react/src/containers/FetchButton.js b/react/src/containers/FetchButton.js
index 45a5e76..87d9e2b 100644
--- a/react/src/containers/FetchButton.js
+++ b/react/src/containers/FetchButton.js
@@ -9,10 +9,9 @@ function FetchButton({ onClick, children }) {
   return (
     <ButtonBase
       style={{
+        marginLeft: 0,
         marginRight: 'auto',
-        padding: '0 0.5rem',
-        borderRadius: '7px',
-        marginLeft: '1rem',
+        padding: '0 1rem',
       }}
       onClick={e => {
         e.preventDefault();
diff --git a/react/src/containers/FilterLink.js b/react/src/containers/FilterLink.js
index 238bedd..4ffd188 100644
--- a/react/src/containers/FilterLink.js
+++ b/react/src/containers/FilterLink.js
@@ -12,10 +12,9 @@ function Link({ active, onClick, children }) {
   return (
     <ButtonBase
       style={{
-        margin: '0 0.2rem',
-        padding: '1rem 0.3rem',
+        padding: '0 1rem',
         color: active ? 'black' : '#444444',
-        borderRadius: '7px',
+        height: '2rem',
       }}
       className={classes.join(' ')}
       onClick={e => {
diff --git a/react/src/containers/LogoutLink.js b/react/src/containers/LogoutLink.js
index fa0a445..63ee862 100644
--- a/react/src/containers/LogoutLink.js
+++ b/react/src/containers/LogoutLink.js
@@ -9,9 +9,9 @@ function Link({ onClick, children }) {
   return (
     <ButtonBase
       style={{
-        marginRight: '1rem',
-        padding: '0 0.5rem',
-        borderRadius: '7px',
+        marginLeft: 'auto',
+        marginRight: 0,
+        padding: '0 1rem',
       }}
       onClick={e => {
         e.preventDefault();