diff --git a/README b/README
index 169be64..a979e29 100644
--- a/README
+++ b/README
@@ -4,11 +4,10 @@ integrates Asana into your web experience in the following ways:
 
   * Creates a button in your button-bar which, when clicked, pops up a
     QuickAdd window to create a new task associated with the current web page.
-    It will populate the task name with the page title by default, and
-    put the URL in the notes, along with any text you may have selected
-    when you pressed the button.
+    You can click a button to populate the task name with the page title and
+    the URL and current selected text in the notes.
 
-  * Installs the special Asana TAB+Q keyboard shortcut. When this key combo
+  * Installs the special Asana ALT+A keyboard shortcut. When this key combo
     is pressed from any web page, it brings up the same popup.
     This functionality will operate on any window opened after the extension
     is loaded.
diff --git a/api_bridge.js b/api_bridge.js
index 38b2286..a9b6843 100644
--- a/api_bridge.js
+++ b/api_bridge.js
@@ -1,14 +1,13 @@
 /**
  * Functionality to communicate with the Asana API. This should get loaded
  * in the "server" portion of the chrome extension because it will make
- * HTTP requests and needs cross-domain priveleges.
+ * HTTP requests and needs cross-domain privileges.
  *
  * The bridge does not need to use an auth token to connect to
- * the API, because since it is a browser extension it can access
- * the user's cookies, and can use them to authenticate to the API.
- * This capability is specific to browser extensions, and other
- * types of applications would have to obtain an auth token to communicate
- * with the API.
+ * the API. Since it is a browser extension it can access the user's cookies
+ * and can use them to authenticate to the API. This capability is specific
+ * to browser extensions, and other types of applications would have to obtain
+ * an auth token to communicate with the API.
  */
 Asana.ApiBridge = {
 
@@ -17,6 +16,26 @@ Asana.ApiBridge = {
    */
   API_VERSION: "1.0",
 
+  /**
+   * @type {Integer} How long an entry stays in the cache.
+   */
+  CACHE_TTL_MS: 15 * 60 * 1000,
+
+  /**
+   * @type {Boolean} Set to true on the server (background page), which will
+   *     actually make the API requests. Clients will just talk to the API
+   *     through the ExtensionServer.
+   *
+   */
+  is_server: false,
+
+  /**
+   * @type {dict} Map from API path to cache entry for recent GET requests.
+   *     date {Date} When cache entry was last refreshed
+   *     response {*} Cached request.
+   */
+  _cache: {},
+
   /**
    * @param opt_options {dict} Options to use; if unspecified will be loaded.
    * @return {String} The base URL to use for API requests.
@@ -37,9 +56,64 @@ Asana.ApiBridge = {
    *     data {dict} Object representing response of API call, depends on
    *         method. Only available if response was a 200.
    *     error {String?} Error message, if there was a problem.
+   * @param options {dict?}
+   *     miss_cache {Boolean} Do not check cache before requesting
    */
-  request: function(http_method, path, params, callback) {
-    var url = this.baseApiUrl() + path;
+  request: function(http_method, path, params, callback, options) {
+    var me = this;
+    http_method = http_method.toUpperCase();
+
+    // If we're not the server page, send a message to it to make the
+    // API request.
+    if (!me.is_server) {
+      console.info("Client API Request", http_method, path, params);
+      chrome.runtime.sendMessage({
+        type: "api",
+        method: http_method,
+        path: path,
+        params: params,
+        options: options || {}
+      }, callback);
+      return;
+    }
+
+    console.info("Server API Request", http_method, path, params);
+
+    // Serve from cache first.
+    if (!options.miss_cache && http_method === "GET") {
+      var data = me._readCache(path, new Date());
+      if (data) {
+        console.log("Serving request from cache", path);
+        callback(data);
+        return;
+      }
+    }
+
+    // Be polite to Asana API and tell them who we are.
+    var manifest = chrome.runtime.getManifest();
+    var client_name = [
+      "chrome-extension",
+      chrome.i18n.getMessage("@@extension_id"),
+      manifest.version,
+      manifest.name
+    ].join(":");
+
+    var url = me.baseApiUrl() + path;
+    var body_data;
+    if (http_method === "PUT" || http_method === "POST") {
+      // POST/PUT request, put params in body
+      body_data = {
+        data: params,
+        options: { client_name: client_name }
+      };
+    } else {
+      // GET/DELETE request, add params as URL parameters.
+      var url_params = Asana.update({ opt_client_name: client_name }, params);
+      url += "?" + $.param(url_params);
+    }
+
+    console.log("Making request to API", http_method, url);
+
     chrome.cookies.get({
       url: url,
       name: 'ticket'
@@ -63,6 +137,9 @@ Asana.ApiBridge = {
         },
         accept: "application/json",
         success: function(data, status, xhr) {
+          if (http_method === "GET") {
+            me._writeCache(path, data, new Date());
+          }
           callback(data);
         },
         error: function(xhr, status, error) {
@@ -80,7 +157,7 @@ Asana.ApiBridge = {
             }
             callback(response);
           } else {
-            callback({ error: error || status });
+            callback({ errors: [{message: error || status }]});
           }
         },
         xhrFields: {
@@ -88,12 +165,27 @@ Asana.ApiBridge = {
         }
       };
       if (http_method === "POST" || http_method === "PUT") {
-        attrs.data = JSON.stringify({data: params});
+        attrs.data = JSON.stringify(body_data);
         attrs.dataType = "json";
         attrs.processData = false;
         attrs.contentType = "application/json";
       }
       $.ajax(attrs);
     });
+  },
+
+  _readCache: function(path, date) {
+    var entry = this._cache[path];
+    if (entry && entry.date >= date - this.CACHE_TTL_MS) {
+      return entry.response;
+    }
+    return null;
+  },
+
+  _writeCache: function(path, response, date) {
+    this._cache[path] = {
+      response: response,
+      date: date
+    };
   }
 };
diff --git a/asana.js b/asana.js
index 719d6b7..a4d1d41 100644
--- a/asana.js
+++ b/asana.js
@@ -1,4 +1,68 @@
 /**
  * Define the top-level Asana namespace.
  */
-Asana = {};
\ No newline at end of file
+Asana = {
+
+  // When popping up a window, the size given is for the content.
+  // When resizing the same window, the size must include the chrome. Sigh.
+  CHROME_TITLEBAR_HEIGHT: 24,
+  // Natural dimensions of popup window. The Chrome popup window adds 10px
+  // bottom padding, so we must add that as well when considering how tall
+  // our popup window should be.
+  POPUP_UI_HEIGHT: 310 + 10,
+  POPUP_UI_WIDTH: 410,
+  // Size of popup when expanded to include assignee list.
+  POPUP_EXPANDED_UI_HEIGHT: 310 + 10 + 129,
+
+  // If the modifier key is TAB, amount of time user has from pressing it
+  // until they can press Q and still get the popup to show up.
+  QUICK_ADD_WINDOW_MS: 5000
+
+
+};
+
+/**
+ * Things borrowed from asana library.
+ */
+
+
+Asana.update = function(to, from) {
+  for (var k in from) {
+    to[k] = from[k];
+  }
+  return to;
+};
+
+Asana.Node = {
+
+  /**
+   * Ensures that the bottom of the element is visible. If it is not then it
+   * will be scrolled up enough to be visible.
+   *
+   * Note: this does not take account of the size of the window. That's ok for
+   * now because the scrolling element is not the top-level element.
+   */
+  ensureBottomVisible: function(node) {
+    var el = $(node);
+    var pos = el.position();
+    var element_from_point = document.elementFromPoint(
+        pos.left, pos.top + el.height());
+    if (element_from_point === null ||
+        $(element_from_point).closest(node).size() === 0) {
+      node.scrollIntoView(/*alignWithTop=*/ false);
+    }
+  }
+
+};
+
+if (!RegExp.escape) {
+  // Taken from http://simonwillison.net/2006/Jan/20/escape/
+  RegExp.escape = function(text, opt_do_not_escape_spaces) {
+    if (opt_do_not_escape_spaces !== true) {
+      return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); // nolint
+    } else {
+      // only difference is lack of escaping \s
+      return text.replace(/[-[\]{}()*+?.,\\^$|#]/g, "\\$&"); // nolint
+    }
+  };
+}
diff --git a/background.html b/background.html
deleted file mode 100644
index ea54961..0000000
--- a/background.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<html>
-<head>
-	<script src="asana.js"></script>
-	<script src="api_bridge.js"></script>
-	<script src="extension_server.js"></script>
-    <script src="options.js"></script>
-	<script>
-
-    Asana.ExtensionServer.listen();
-
-  </script>
-</head>
-</html>
\ No newline at end of file
diff --git a/background.js b/background.js
new file mode 100644
index 0000000..fb62544
--- /dev/null
+++ b/background.js
@@ -0,0 +1,26 @@
+Asana.ExtensionServer.listen();
+Asana.ServerModel.startPrimingCache();
+
+// Modify referer header sent to typekit, to allow it to serve to us.
+// See http://stackoverflow.com/questions/12631853/google-chrome-extensions-with-typekit-fonts
+chrome.webRequest.onBeforeSendHeaders.addListener(function(details) {
+  var requestHeaders = details.requestHeaders;
+  for (var i = 0; i < requestHeaders.length; ++i) {
+    if (requestHeaders[i].name.toLowerCase() === 'referer') {
+      // The request was certainly not initiated by a Chrome extension...
+      return;
+    }
+  }
+  // Set Referer
+  requestHeaders.push({
+    name: 'referer',
+    // Host must match the domain in our Typekit kit settings
+    value: 'https://abkfopjdddhbjkiamjhkmogkcfedcnml'
+  });
+  return {
+    requestHeaders: requestHeaders
+  };
+}, {
+  urls: ['*://use.typekit.net/*'],
+  types: ['stylesheet', 'script']
+}, ['requestHeaders','blocking']);
diff --git a/click_commandeer.js b/click_commandeer.js
new file mode 100644
index 0000000..8961675
--- /dev/null
+++ b/click_commandeer.js
@@ -0,0 +1,16 @@
+document.onclick = clickHandler;
+
+function clickHandler(e){
+  if (!e) e = window.event;
+
+  var closestAnchor = $(e.target).closest("A");
+  if (closestAnchor.length === 1){
+    var link_url = closestAnchor.prop("href");
+    if (link_url.indexOf("https://app.asana.com") === 0) {
+      console.log("Asana chrome extension intercepting link ctrl-click")
+      var fragment = link_url.substr("https://app.asana.com".length)
+      chrome.runtime.sendMessage({fragment: fragment});
+      e.preventDefault();
+    }
+  }
+}
diff --git a/extension_server.js b/extension_server.js
index eaeb190..5d74ce3 100644
--- a/extension_server.js
+++ b/extension_server.js
@@ -9,22 +9,19 @@ Asana.ExtensionServer = {
    * requests from page clients, which can't make cross-domain requests.
    */
   listen: function() {
-    var self = this;
-    chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
+    var me = this;
+
+    // Mark our Api Bridge as the server side (the one that actually makes
+    // API requests to Asana vs. just forwarding them to the server window).
+    Asana.ApiBridge.is_server = true;
+
+    chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
       if (request.type === "api") {
         // Request to the API. Pass it on to the bridge.
-        Asana.ApiBridge.api(
-            request.method, request.path, request.data || {}, sendResponse);
-
-      } else if (request.type === "quick_add") {
-        // QuickAdd request, made from a content window.
-        // Open up a new popup, and set the request information on its window
-        // (see popup.html for how it's used)
-        var popup = window.open(
-            chrome.extension.getURL('popup.html') + '?external=true',
-            "asana_quick_add",
-            "dependent=1,resizable=0,location=0,menubar=0,status=0,toolbar=0,width=410,height=310");
-        popup.quick_add_request = request;
+        Asana.ApiBridge.request(
+            request.method, request.path, request.params, sendResponse,
+            request.options || {});
+        return true;  // will call sendResponse asynchronously
       }
     });
   }
diff --git a/icon128.png b/icon128.png
index f08c0e3..acef4ef 100644
Binary files a/icon128.png and b/icon128.png differ
diff --git a/icon16.png b/icon16.png
new file mode 100644
index 0000000..50d7b38
Binary files /dev/null and b/icon16.png differ
diff --git a/icon48.png b/icon48.png
new file mode 100644
index 0000000..2274029
Binary files /dev/null and b/icon48.png differ
diff --git a/load_typekit.js b/load_typekit.js
new file mode 100644
index 0000000..2681b36
--- /dev/null
+++ b/load_typekit.js
@@ -0,0 +1,74 @@
+/**
+ * Loads the appropriate typekit resource for fonts in the popup.
+ */
+
+(function() {
+
+  // From luna_page.js
+  var ISO3316_LANGUAGE_CODES_FOR_NON_LATIN1 = [
+    'cs', // Czech
+    // The only German character that seems to not be in our font is 0159
+    // (see http://alt-codes.org/list/german/) and it seems close enough to
+    // not warrant loading a heavier font so commenting out.
+//     'de', // German
+
+    'hu', // Hungarian
+    'pl', // Polish
+    'ro', // Romanian
+    'hr', // Croatian
+    'sk', // Slovak
+    'sl', // Slovene
+    'eo', // Esperanto
+    'gl', // Galician
+    'mt', // Maltese
+    'tr', // Turkish
+    'et', // Estonian
+    'lv', // Latvian
+    'lt', // Lithuanian
+    'iu', 'ik', 'kl', // Eskimo
+    'se', // "Northern" Sami
+
+//    Cyrillic - seems like this shouldn't be an issue (see comment below)
+//    but we've gotten specific reports
+
+    'bg', // Bulgarian
+    'be', // Byelorussian aka Belarisuian,
+    'mk', // Macedonian
+    'ru', // Russian
+    'sr', // Serbian
+    'uk' // Ukrainian
+
+//    Commented out languages with no Latin characters since
+//    other languages only look bad when they mix Latin characters
+//    from our font with extended characters from the system font.
+
+//     'el', // Greek
+
+    // Skipping Arabic since RTL
+    // Skipping Hebrew since RTL
+    // Couldn't find Lappish in http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
+    // Couldn't find Nordic
+    // Couldn't find Inuit
+  ];
+
+  // If the page could be in a language which is not covered by our latin1
+  // font, then load the (larger) full font.
+  chrome.i18n.getAcceptLanguages(function(language_list) {
+    var languages = language_list.join(",");
+    var non_latin1 = ISO3316_LANGUAGE_CODES_FOR_NON_LATIN1.filter(function(code) {
+      return languages.indexOf(code) !== -1;
+    });
+    Asana.TYPEKIT_ID = non_latin1.length > 0 ? "hra6rda" : "sli4yxq";
+    console.info("Accepting languages: " + languages + " using typekit " +
+        Asana.TYPEKIT_ID);
+
+    var head = document.getElementsByTagName('head')[0];
+    var script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = 'https://use.typekit.net/' + Asana.TYPEKIT_ID + '.js';
+    script.onload = function() {
+      try{Typekit.load();}catch(e){}
+    };
+    head.appendChild(script);
+  });
+})();
diff --git a/manifest.json b/manifest.json
index e67fc44..d9cae26 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,12 +1,23 @@
 {
   "manifest_version": 2,
   "name": "Asana Extension for Chrome",
-  "version": "0.9.1",
-  "description": "Integrates Asana with your browsing experience.",
+  "version": "1.1.0",
+  "description": "Quickly add tasks to Asana from any web page.",
   "icons": {
-    "128": "icon128.png"
+    "128": "icon128.png",
+    "48": "icon48.png",
+    "16": "icon16.png"
   },
-  "minimum_chrome_version": "16",
+  "minimum_chrome_version": "25",
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "exclude_matches": ["*://app.asana.com/*"],
+      "js": [ "jquery-1.7.1.min.js", "click_commandeer.js" ],
+      "run_at": "document_end"
+    }
+  ],
 
   "browser_action": {
     "default_icon": "icon19.png",
@@ -14,30 +25,36 @@
     "default_popup": "popup.html"
   },
   "background": {
-    "page": "background.html"
+    "persistent": true,
+    "scripts": [
+      "jquery-1.7.1.min.js",
+      "navigator.js",
+      "asana.js",
+      "api_bridge.js",
+      "extension_server.js",
+      "server_model.js",
+      "options.js",
+      "background.js"
+    ]
   },
-  "options_page": "options.html",
+  "incognito": "split",
+  "offline_enabled": false,
+
   "permissions": [
     "tabs",
-    "*://*/*",
     "cookies",
+    "webRequest",
+    "webRequestBlocking",
+    "webNavigation",
     "*://*.asana.com/*",
-    "*://localhost.org/*"
+    "*://use.typekit.net/*"
   ],
-
-  "content_scripts": [{
-    "matches": [
-      "<all_urls>"
-    ],
-    "exclude_matches": [
-      "*://*.asana.com/*"
-    ],
-    "js": [
-      "asana.js",
-      "selection_client.js",
-      "quick_add_client.js"
-    ],
-    "run_at": "document_start",
-    "all_frames": false
-  }]
+  "content_security_policy": "script-src 'self' https://use.typekit.net; object-src 'self'",
+  "commands": {
+    "_execute_browser_action": {
+      "suggested_key": {
+        "default": "Alt+Shift+A"
+      }
+    }
+  }
 }
diff --git a/navigator.js b/navigator.js
new file mode 100644
index 0000000..eac74ce
--- /dev/null
+++ b/navigator.js
@@ -0,0 +1,66 @@
+console.log("LOADED");
+
+/**
+ * Finds an existing Asana tab (if there is one) and instructs it to navigate
+ * using the provided fragment.
+ * @param fragment
+ * @param tabToAvoid
+ * @param callback
+ */
+function navigateExistingAsana(fragment, tabToAvoid, callback) {
+  chrome.tabs.query({
+    url: "https://app.asana.com/*",
+    currentWindow: true
+  }, function(asanaTabs) {
+    chrome.tabs.getSelected(function (currentTab) {
+
+      asanaTabs = asanaTabs.filter(function (eachAsanaTab) {
+        // Filter out the tab that just opened, we don't want to reuse that!
+        return eachAsanaTab.id !== tabToAvoid &&
+            // Filter out the tab that's currently focused
+            eachAsanaTab.id !== currentTab.id;
+      })
+
+      if (asanaTabs.length > 0) {
+        var chosenAsanaTab = asanaTabs[0]
+        chrome.tabs.highlight({tabs:chosenAsanaTab.index}, function() {})
+        chrome.tabs.executeScript(chosenAsanaTab.id, {
+          code: "window.postMessage('fragment|" + fragment + "', '*')"
+        })
+        callback(true)
+      }
+
+      callback(false)
+    })
+  })
+}
+
+// Add a handler for naviagtions to app.asana.com, but only if they happened in
+// the background (ie the user right clicked and chose open in new window)
+var urlFilter = {hostEquals: "app.asana.com"}
+chrome.webNavigation.onBeforeNavigate.addListener(function (event) {
+  // Check the url being navigated to follows the exact pattern we expect
+  if (event.url.lastIndexOf("https://app.asana.com") !== 0) return
+
+  // Get the part of the url that asana needs as a fragment
+  var fragment = event.url.substr("https://app.asana.com".length)
+
+  chrome.tabs.get(event.tabId, function(tab) {
+    if (!tab.highlighted) {
+      navigateExistingAsana(fragment, event.tabId, function(succeeded) {
+        if (succeeded) {
+          chrome.tabs.remove(tab.id)
+        }
+      })
+    }
+  })
+
+}, {url: [urlFilter]})
+
+chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
+  if (!sender.tab) {
+    return;
+  }
+
+  navigateExistingAsana(request.fragment, -1, function(b) {});
+});
\ No newline at end of file
diff --git a/nopicture.png b/nopicture.png
new file mode 100644
index 0000000..be98f2a
Binary files /dev/null and b/nopicture.png differ
diff --git a/common.css b/options.css
similarity index 71%
rename from common.css
rename to options.css
index 7c816a7..337d8b7 100644
--- a/common.css
+++ b/options.css
@@ -1,3 +1,4 @@
+/* Common styles? */
 body, td, div {
   font-size: 14px;
   font-family: "Helvetica Neue", Arial, sans-serif;
@@ -5,8 +6,8 @@ body, td, div {
 }
 
 .close-x {
+  display: block;
   cursor: pointer;
-  float: right;
   width: 14px;
   height: 14px;
   background-image: url(sprite.png);
@@ -75,4 +76,60 @@ a:link, a:visited {
 }
 a:hover {
   text-decoration: underline;
+}
+
+
+
+/* Styles for options.html */
+body {
+  padding: 0;
+  margin: 0;
+  background-color: #DDE4EA;
+}
+body, td, div {
+  font-size: 13px;
+}
+
+#layout {
+  width: 100%;
+}
+#options {
+  width: 600px;
+  min-width: 600px;
+  max-width: 600px;
+}
+
+#status {
+  height: 30px;
+}
+
+.v-spacer {
+  height: 100px;
+}
+.form {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+td.field-name {
+    width: 150px;
+    padding: 2px 2px 2px 0;
+    vertical-align: top;
+}
+td.field-value {
+    padding: 2px 0 2px 2px;
+    vertical-align: top;
+}
+td.field-notes {
+    font-size: 11px;
+    margin-top: 12px;
+    padding: 2px 0 2px 2px;
+    vertical-align: top;
+}
+td.field-spacer {
+    height: 12px;
+}
+
+#reset_button {
+    margin-left: 10px;
 }
\ No newline at end of file
diff --git a/options.html b/options.html
index e44be0a..fdede4a 100644
--- a/options.html
+++ b/options.html
@@ -1,4 +1,13 @@
 <html>
+<!--
+This page is no longer in use.
+
+To enable it, simply add the following line to the top level dict
+in manifest.json:
+
+  "options_page": "options.html",
+
+-->
 <head><title>Asana Options</title>
 <script type="text/javascript" src="asana.js"></script>
 <script type="text/javascript" src="options.js"></script>
@@ -6,8 +15,7 @@
 <script type="text/javascript" src="api_bridge.js"></script>
 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
 <script type="text/javascript" src="jquery-ui-1.8.10.custom.min.js"></script>
-<link rel="stylesheet" href="common.css"/>
-<link rel="stylesheet" href="options_style.css"/>
+<link rel="stylesheet" href="options.css"/>
 <script type="text/javascript" src="options_page.js"></script>
 </head>
 
@@ -19,22 +27,6 @@
   <td id="options">
 
   <table class="form">
-    <tr>
-      <td class="field-name">Default Workspace:</td>
-      <td class="field-value">
-        <div id="domains_group">Loading...</div>
-      </td>
-    </tr>
-    <tr>
-      <td class="field-name"></td>
-      <td class="field-notes">
-        The default workspace where new tasks are added. You can always select
-        a different workspace when you're creating a task.
-      </td>
-    </tr>
-
-    <tr><td colspan="2" class="field-spacer"></td></tr>
-
     <tr>
       <td class="field-name">Asana Host:</td>
       <td class="field-value">
diff --git a/options.js b/options.js
index 3ad9b54..e2f10c7 100644
--- a/options.js
+++ b/options.js
@@ -23,6 +23,14 @@ Asana.Options = {
     return 'https://' + options.asana_host_port + '/';
   },
 
+  /**
+   * @param opt_options {dict} Options to use; if unspecified will be loaded.
+   * @return {String} The URL for the signup page.
+   */
+  signupUrl: function(opt_options) {
+    return 'http://asana.com/?utm_source=chrome&utm_medium=ext&utm_campaign=ext';
+  },
+
   /**
    * @return {dict} Default options.
    */
diff --git a/options_style.css b/options_style.css
deleted file mode 100644
index fe382ed..0000000
--- a/options_style.css
+++ /dev/null
@@ -1,53 +0,0 @@
-/* Styles for options.html */
-body {
-  padding: 0;
-  margin: 0;
-  background-color: #DDE4EA;
-}
-body, td, div {
-  font-size: 13px;
-}
-
-#layout {
-  width: 100%;
-}
-#options {
-  width: 600px;
-  min-width: 600px;
-  max-width: 600px;
-}
-
-#status {
-  height: 30px;
-}
-
-.v-spacer {
-  height: 100px;
-}
-.form {
-    border: 0;
-    margin: 0;
-    padding: 0;
-}
-td.field-name {
-    width: 150px;
-    padding: 2px 2px 2px 0;
-    vertical-align: top;
-}
-td.field-value {
-    padding: 2px 0 2px 2px;
-    vertical-align: top;
-}
-td.field-notes {
-    font-size: 11px;
-    margin-top: 12px;
-    padding: 2px 0 2px 2px;
-    vertical-align: top;
-}
-td.field-spacer {
-    height: 12px;
-}
-
-#reset_button {
-    margin-left: 10px;
-}
\ No newline at end of file
diff --git a/popup.css b/popup.css
new file mode 100644
index 0000000..8fb2d96
--- /dev/null
+++ b/popup.css
@@ -0,0 +1,499 @@
+/* Styles for popup.html */
+
+/* Common widgets, from Asana app */
+
+.close-x {
+  display: block;
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  margin: 8px 0px 0px -4px;
+  background-position: -175px 0px;
+}
+.close-x:hover {
+  background-position: -175px -25px;
+}
+
+.dropdown-arrow {
+  background-position: -150px 0px;
+  width: 16px;
+  height: 16px;
+  margin: 5px auto;  
+}
+
+.dropdown-arrow:hover, #workspace_select:hover ~ .button .dropdown-arrow {
+  background-position: -150px -25px;
+}
+
+.dropdown-arrow:hover, #workspace_select:focus ~ .button .dropdown-arrow {
+  background-position: -150px -25px;
+}
+
+.button {
+  border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  box-shadow: inset 0px -1px rgba(0,0,0,0.12);
+  -webkit-box-shadow: inset 0px -1px rgba(0,0,0,0.12);
+  display:inline-block;
+  padding: 4px 10px 5px;
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+  text-align: center;
+}
+.button .button-text {
+  display: inline-block;
+}
+
+.default-button {
+  color: #596573;
+  text-shadow: 0px 1px white;
+  border: 1px solid #C0CCD7;
+  background-color: #F2F2F2;
+  background-image: -webkit-gradient(linear,left top,left bottom,from(white), color-stop(10%, #F2F2F2));
+}
+.default-button:hover {
+  background-color: #F2F2F2;
+  background-image: -webkit-gradient(linear,left top,left bottom,from(white), color-stop(100%, #CED7E0));
+  border: 1px solid #C0CCD7;
+}
+.default-button:hover .button-text {
+  color: #596573;
+  text-shadow: 0px 1px white;
+}
+.default-button:focus {
+  box-shadow: 0px 0px 6px 3px rgba(31,141,214,0.3);
+  -webkit-box-shadow: 0px 0px 6px 3px rgba(31,141,214,0.3);
+  outline: none;
+}
+
+.primary-button {
+  color: white;
+  text-shadow: 0px -1px #114D97;
+  border: 1px solid #114D97;
+  background-color: #1F8DD6;
+  background-image: -webkit-gradient(linear,left top,left bottom,from(#74C1ED), color-stop(10%, #1F8DD6));
+}
+.primary-button:hover {
+  background-color: #1F8DD6;
+  background-image: -webkit-gradient(linear,left top,left bottom,from(#74C1ED), color-stop(100%, #1F8DD6));
+  border: 1px solid #114D97;
+}
+.primary-button:hover .button-text {
+  color: white;
+  text-shadow: 0px -1px #114D97;
+}
+.primary-button:focus {
+  box-shadow: 0px 0px 6px 3px rgba(31,141,214,0.3);
+  -webkit-box-shadow: 0px 0px 6px 3px rgba(31,141,214,0.3);
+  outline: none;
+}
+
+.primary-button.disabled, .primary-button.disabled:hover {
+  background: #F2F2F2;
+  border-color: #CCCCCC;
+  outline: none;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+}
+.primary-button.disabled .button-text, .primary-button.disabled:hover .button-text {
+  color: #999999;
+  text-shadow: none;
+}
+
+.big-button {
+  padding: 10px 20px;
+  border-radius: 6px;
+}
+
+.big-button .button-text {
+  font-size: 18px;
+}
+
+a:link, a:visited {
+  color: #1F8DD6;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+
+::-webkit-scrollbar{
+  width: 14px;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(0,0,0,.05);
+  box-shadow: inset 0px -1px rgba(0,0,0,.12);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0,0,0, .08);
+}
+
+::-webkit-scrollbar-track {
+  background-color: rgba(0,0,0, .05);
+}
+
+textarea::-webkit-scrollbar {
+  width: 7px;
+  background: #E5F1FF;
+}
+textarea::-webkit-scrollbar-thumb {
+  background: rgba(116, 193, 237, 0.3);
+}
+textarea::-webkit-scrollbar-thumb:hover {
+  background: rgba(116, 193, 237, 0.5);
+}
+
+
+/* Popup-specific layout */
+
+body {
+  overflow: hidden;
+  /* Also affects Asana.POPUP_UI_WIDTH and Asana.POPUP_UI_HEIGHT */
+  width: 410px;
+  height: 310px;  /* keep this correct for the window-based (non-button) version */
+  padding: 0px;
+  margin: 0px;
+  background-color: #fff;
+  font-size: 14px;
+  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
+}
+
+a, input, textarea {
+  outline: none;
+}
+
+.sprite {
+  background-image: url('./sprite.png');
+  background-repeat: no-repeat;
+  display: inline-block;
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2) {
+	.sprite {
+    background-image: url('./sprite-retina.png');
+    background-size: 250px 75px;
+  }
+}
+
+.left-column {
+  display: inline-block;
+  margin-left: 12px;
+  width: 24px;
+  height: 24px;
+  vertical-align: middle;
+}
+.middle-column {
+  display: inline-block;
+  width: 304px;
+  padding: 0 8px 0 8px;
+  vertical-align: middle;
+}
+.right-column {
+  display: inline-block;
+  margin-right: 8px;
+  margin-left: 4px;
+  width: 32px;
+  height: 32px;
+  vertical-align: middle;
+  text-align: center;
+}
+
+.left-column .sprite {
+  margin-top: 3px;
+  height: 18px;
+  width: 24px;
+}
+
+/* Popup areas */
+
+.banner {
+  font-size: 19px;
+  font-weight: 600;
+  background-color:#f2f2f2;
+  color: #596573;
+  text-shadow: 0px 1px #fff;
+  border-bottom: 1px solid #c0ccd7;
+  -webkit-border-radius: 1px 1px 0px 0px;
+  background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(100%, #edf1f4));
+}
+
+.notes-row .left-column, .notes-row .middle-column, .notes-row .right-column,
+.assignee-row .left-column, .assignee-row .middle-column, .assignee-row .right-column {
+  vertical-align: top;
+}
+
+.banner .middle-column {
+  line-height: 46px;
+  padding-top: 2px;
+}
+
+.banner .button {
+  height: 26px;
+  width: 26px;
+  border: 1px solid #c0ccd7;
+  box-shadow: 0px 1px 0px 0px white;
+  padding: 0;
+}
+
+#workspace_select:hover ~ .button {
+  border: 1px solid #afbcc8;
+  background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(100%, #dde4ea));
+}
+
+#workspace_select:focus ~ .button {
+  border: 1px solid #74C1ED;
+  box-shadow: 0px 0px 5px 1px rgba(31, 141, 214, 0.3);
+}
+
+.banner-add {
+  position: relative;
+}
+
+.banner-add #workspace {
+  font-weight: 200;
+}
+
+.icon-checkbox {
+  background-position: -25px 0px;
+}
+
+.sprite.icon-notes {
+  margin-top: 5px;
+  background-position: -50px 0px;
+}
+
+.sprite.icon-assignee {
+  margin-top: 6px;
+  background-position: -75px 0px;
+}
+
+#workspace_select_container {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 100%;
+}
+
+#workspace_select {
+  opacity: 0;
+  position: absolute;
+  right: 0px;
+  top: -4px;
+  padding: 8px 0px;
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.name-row {
+  padding-top: 11px;
+  padding-bottom: 12px;
+}
+
+.name-row .left-column .sprite { margin-top: 2px; }
+
+#name_input, #notes_input, #assignee, #assignee_input {
+  width: 100%;
+}
+
+.name-row #name_input {
+  font-size: 20px;
+}
+
+.notes-row {
+  border-bottom: 1px solid #e5e5e5;
+  padding-bottom: 4px;
+}
+
+.assignee-row {
+  padding-top: 8px;
+}
+
+.notes-row #notes_input {
+  resize: none;
+  height: 96px;
+}
+
+#use_page_details {
+  width: 20px;
+  height: 20px;
+  position: relative;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  padding: 5px 2px 3px 6px;
+  cursor: pointer;
+}
+
+#use_page_details:not(.disabled):hover {
+  border: 1px solid #e5e5e5;
+}
+
+#use_page_details.disabled {
+  opacity: .25;
+  cursor: default;
+}
+
+#use_page_details:not(.disabled):hover .icon-use-link-arrow {
+  background-position: -225px -25px;
+}
+
+.icon-use-link {
+  height: 16px;
+  width: 16px;
+  background-size: 16px 16px;
+}
+
+.icon-use-link.no-favicon {
+  height: 18px;
+  width: 18px;
+  background-position: -200px 0px;
+  background-size: auto auto;
+}
+
+#use_page_details:not(.disabled):hover .icon-use-link.no-favicon {
+  background-position: -200px -25px;
+}
+
+.icon-use-link-arrow {
+  height: 18px;
+  width: 18px;
+  background-position: -225px 0px;
+  position: absolute;
+  top: 7px;
+  left: 3px;
+}
+
+#assignee {
+  font-weight: 600;
+}
+
+#assignee .user-photo-frame {
+  margin: -5px 7px -5px 0px;
+}
+
+#assignee .unassigned {
+  color: #a9a9a9;
+  font-weight: normal;
+}
+
+.user {
+  line-height: 34px;
+  font-size: 12px;
+  font-weight: 600;
+  padding-left: 54px;
+  cursor: pointer;
+}
+
+.user.selected {
+  background-color: #1F8DD6;
+  color: white;
+}
+
+.user-photo-frame {
+  height: 27px;
+  width: 27px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 7px;
+}
+.user-photo {
+  height: 27px;
+  width: 27px;
+  background-size: 27px 27px;
+  background-repeat: no-repeat;
+  border-radius: 2px;
+}
+.user-name {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#assignee_list_container {
+  /* Also affects Asana.POPUP_EXPANDED_UI_HEIGHT */
+  height: 121px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  border-bottom: 1px solid #e5e5e5;
+  margin-top: 8px;
+}
+
+.footer {
+  padding: 14px 0px;
+}
+
+
+#success, #error {
+  width: 175px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 15px;
+  font-size: 12px;
+  line-height: 17px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#success a, #error a {
+  font-weight: 600;
+  text-decoration: none;
+  color: #5998c0;
+}
+
+#login_view {
+  width: 100%;
+  height: 100%;
+  background-color: #edf1f4;
+}
+
+#login_view .content {
+  padding-top: 65px;
+  width: 250px;
+  margin: 0 auto;
+  text-align: center;
+  font-size: 19px;
+  font-weight: 400;
+  color: #596573;
+}
+
+#login_view .button {
+  margin-top: 24px;
+}
+
+#login_view #signup_button {
+  margin-right: 8px;
+}
+
+.icon-success, .icon-error {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 3px;
+}
+
+.icon-success { background-position: -100px 0px; }
+.icon-error { background-position: -125px 0px; margin-right: 7px; }
+
+input, textarea, #assignee {
+  color: #212F40;
+  padding: 6px 5px;
+  border: 1px solid transparent;
+  -webkit-border-radius: 3px;
+  font-size: 14px;
+  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
+  color: #212F40;
+  margin: 0;
+}
+
+input:hover, textarea:hover, #assignee:hover {
+  border: 1px solid #cccccc;
+  -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.1);
+}
+
+input:focus, textarea:focus {
+  border: 1px solid #74C1ED;
+  box-shadow: 0px 0px 5px 1px rgba(31, 141, 214, 0.3);
+}
\ No newline at end of file
diff --git a/popup.html b/popup.html
index 5d3aecf..1c77a10 100644
--- a/popup.html
+++ b/popup.html
@@ -1,3 +1,10 @@
+<!DOCTYPE html>
+<!--
+The above DOCTYPE declaration is actually required for Chrome to
+properly resize the window as content size changes. See:
+http://stackoverflow.com/questions/9498685/resize-popup-html-in-chrome-extension
+-->
+
 <html>
 <head>
   <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
@@ -6,74 +13,109 @@
   <script type="text/javascript" src="options.js"></script>
   <script type="text/javascript" src="api_bridge.js"></script>
   <script type="text/javascript" src="server_model.js"></script>
-  <link rel="stylesheet" href="common.css"/>
-  <link rel="stylesheet" href="popup_style.css"/>
+  <script type="text/javascript" src="load_typekit.js"></script>
+  <link rel="stylesheet" href="popup.css"/>
+  <title>
+    Asana Quick Add
+  </title>
 </head>
 
 <body>
 
-  <div id="banner">
-    Add to Asana
-    <a id="close-banner" class="close-x"></a>
-  </div>
-
-  <div id="error" style="display:none">
-    <span class="error-icon"></span>
-    Sorry, an error occurred. Please try again later.
-  </div>
+  <div id="add_view" style="display:none">
+    <div class="banner">
+      <div class="left-column">
+        <div id="logo" class="sprite"></div>
+      </div>
+      <div class="middle-column">
+        <span class="banner-add">
+          Add to
+          <span id="workspace"></span>
+          <div id="workspace_select_container">
+            <select id="workspace_select"><option>Loading...</option></select>
+            <div class="button"><div class="dropdown-arrow sprite"></div></div>
+          </div>
+        </span>
+      </div>
+      <div class="right-column">
+        <a id="close_popup" class="sprite close-x" tabindex="-1"></a>
+      </div>
+    </div>
+    <div class="name-row">
+      <div class="left-column">
+        <span class="icon-checkbox sprite"></span>
+      </div>
+      <div class="middle-column">
+        <input id="name_input" tabindex="0" placeholder="Task" />
+      </div>
+      <div class="right-column">
+        <div id="use_page_details" title="Insert page title and URL"><div class="icon-use-link-arrow sprite"></div><div class="icon-use-link"></div></div>
+      </div>
+    </div>
+    <div class="notes-row">
+      <div class="left-column">
+        <span class="icon-notes sprite"></span>
+      </div>
+      <div class="middle-column">
+        <textarea id="notes_input" tabindex="0" placeholder="Description"></textarea>
+      </div>
+      <div class="right-column"></div>
+    </div>
+    <div class="assignee-row">
+      <div class="left-column">
+        <span class="icon-assignee sprite"></span>
+      </div>
+      <div class="middle-column">
+        <input id="assignee_input" placeholder="Assignee" />
+        <div id="assignee" tabindex="0"></div>
+      </div>
+      <div class="right-column"></div>
+    </div>
 
-  <div id="content">
-    <div id="add_view" style="display:none">
-      <table class="form">
-        <tr>
-          <td class="field-name">Name:</td>
-          <td class="field-value">
-            <input id="name"/>
-          </td>
-        </tr>
+    <div id="assignee_list_container">
+      <div id="assignee_list"></div>
+    </div>
 
-        <tr>
-          <td class="field-name">Notes:</td>
-          <td class="field-value">
-            <textarea id="notes"></textarea>
-          </td>
-        </tr>
 
-        <tr>
-          <td class="field-name">Workspace:</td>
-          <td class="field-value">
-            <select id="workspace"><option>Loading...</option></select>
-          </td>
-        </tr>
+    <div class="footer">
+      <div class="left-column"></div>
+      <div class="middle-column">
+        <div id="add_button" tabindex="0" class="button primary-button disabled">
+          <span class="button-text">Add to Asana</span>
+        </div>
+        <div id="error" style="display:none">
+          <div class="sprite icon-error"></div>
+          Error. Please try again.
+        </div>
+        <div id="success" style="display:none">
+          <div class="sprite icon-success"></div>
+          Added <a id="new_task_link" target="_blank" href=""></a>
+        </div>
+      </div>
+    </div>
 
-        <tr>
-          <td class="field-name">Assignee:</td>
-          <td class="field-value">
-            <select id="assignee"><option>Loading...</option></select>
-          </td>
-        </tr>
 
-        <tr>
-          <td class="field-name"></td>
-          <td class="field-value">
-            <div id="add_button" tabindex="0" class="button primary-button disabled">
-              <span class="button-text">Add to Asana</span>
-            </div>
-          </td>
-        </tr>
-      </table>
-    </div>
+  </div>
 
-    <div id="success_view" style="display:none">
-      <span class="success-icon"></span>
-      Created task <a id="new_task_link" target="_blank" href=""></a>.
+  <div id="login_view" style="display:none">
+    <div class="banner">
+      <div class="left-column">
+        <div id="logo" class="sprite"></div>
+      </div>
+      <div class="middle-column">
+        <span class="banner-add">
+          Add to Asana
+        </span>
+      </div>
+      <div class="right-column">
+        <a id="close_login" class="sprite close-x" tabindex="-1"></a>
+      </div>
     </div>
-
-    <div id="login_view" style="display:none">
-      Please <a id="login_link" href="#">log into Asana</a> to start adding
-      tasks.
+    <div class="content">
+      You must log in to Asana before you can add tasks.
+      <span id="signup_button" class="primary-button button big-button"><span class="button-text">Sign Up</span></span>
+      <span id="login_button" class="default-button button big-button"><span class="button-text">Log In</span></span>
     </div>
-
   </div>
 
 </body>
diff --git a/popup.js b/popup.js
index 11b2b4b..0e7c14b 100644
--- a/popup.js
+++ b/popup.js
@@ -1,32 +1,75 @@
-window.addEventListener('load', function() {
-
-  // Our default error handler.
-  Asana.ServerModel.onError = function(response) {
-    showError(response.errors[0].message);
-  };
-
-  // Ah, the joys of asynchronous programming.
-  // To initialize, we've got to gather various bits of information.
-  // Starting with a reference to the window and tab that were active when
-  // the popup was opened ...
-  chrome.windows.getCurrent(function(w) {
+/**
+ * Code for the popup UI.
+ */
+Popup = {
+
+  // Is this an external popup window? (vs. the one from the menu)
+  is_external: false,
+
+  // Options loaded when popup opened.
+  options: null,
+
+  // Info from page we were triggered from
+  page_title: null,
+  page_url: null,
+  page_selection: null,
+  favicon_url: null,
+
+  // State to track so we only log events once.
+  has_edited_name: false,
+  has_edited_notes: false,
+  has_reassigned: false,
+  has_used_page_details: false,
+  is_first_add: true,
+
+  // Data from API cached for this popup.
+  workspaces: null,
+  users: null,
+  user_id: null,
+  
+  // Typeahead ui element
+  typeahead: null,
+
+  onLoad: function() {
+    var me = this;
+
+    me.is_external = ('' + window.location.search).indexOf("external=true") !== -1;
+
+    // Our default error handler.
+    Asana.ServerModel.onError = function(response) {
+      me.showError(response.errors[0].message);
+    };
+
+    // Ah, the joys of asynchronous programming.
+    // To initialize, we've got to gather various bits of information.
+    // Starting with a reference to the window and tab that were active when
+    // the popup was opened ...
     chrome.tabs.query({
       active: true,
-      windowId: w.id
+      currentWindow: true
     }, function(tabs) {
+      var tab = tabs[0];
       // Now load our options ...
       Asana.ServerModel.options(function(options) {
+        me.options = options;
         // And ensure the user is logged in ...
         Asana.ServerModel.isLoggedIn(function(is_logged_in) {
           if (is_logged_in) {
             if (window.quick_add_request) {
+              Asana.ServerModel.logEvent({
+                name: "ChromeExtension-Open-QuickAdd"
+              });
               // If this was a QuickAdd request (set by the code popping up
               // the window in Asana.ExtensionServer), then we have all the
               // info we need and should show the add UI right away.
-              showAddUi(
+              me.showAddUi(
                   quick_add_request.url, quick_add_request.title,
-                  quick_add_request.selected_text, options);
+                  quick_add_request.selected_text,
+                  quick_add_request.favicon_url);
             } else {
+              Asana.ServerModel.logEvent({
+                name: "ChromeExtension-Open-Button"
+              });
               // Otherwise we want to get the selection from the tab that
               // was active when we were opened. So we set up a listener
               // to listen for the selection send event from the content
@@ -34,190 +77,696 @@ window.addEventListener('load', function() {
               var selection = "";
               var listener = function(request, sender, sendResponse) {
                 if (request.type === "selection") {
-                  chrome.extension.onRequest.removeListener(listener);
+                  chrome.runtime.onMessage.removeListener(listener);
                   console.info("Asana popup got selection");
                   selection = "\n" + request.value;
                 }
               };
-              chrome.extension.onRequest.addListener(listener);
-
-              // ... and then we make a request to the content window to
-              // send us the selection.
-              var tab = tabs[0];
-              chrome.tabs.executeScript(tab.id, {
-                code: "(Asana && Asana.SelectionClient) ? Asana.SelectionClient.sendSelection() : 0"
-              }, function() {
-                // The requests appear to be handled synchronously, so the
-                // selection should have been sent by the time we get this
-                // completion callback. If the timing ever changes, however,
-                // that could break and we would never show the add UI.
-                // So this could be made more robust.
-                showAddUi(tab.url, tab.title, selection, options);
-              });
+              chrome.runtime.onMessage.addListener(listener);
+              me.showAddUi(tab.url, tab.title, '', tab.favIconUrl);
             }
           } else {
             // The user is not even logged in. Prompt them to do so!
-            showLogin(Asana.Options.loginUrl(options));
+            me.showLogin(
+                Asana.Options.loginUrl(options),
+                Asana.Options.signupUrl(options));
           }
         });
       });
     });
-  });
-});
 
-// Helper to show a named view.
-var showView = function(name) {
-  ["login", "add", "success"].forEach(function(view_name) {
-    $("#" + view_name + "_view").css("display", view_name === name ? "" : "none");
-  });
-};
+    // Wire up some events to DOM elements on the page.
 
-// Show the add UI
-var showAddUi = function(url, title, selected_text, options) {
-  var self = this;
-  showView("add");
-  $("#notes").val(url + selected_text);
-  $("#name").val(title);
-  $("#name").focus();
-  $("#name").select();
-  Asana.ServerModel.me(function(user) {
-    // Just to cache result.
-    Asana.ServerModel.workspaces(function(workspaces) {
-      $("#workspace").html("");
-      workspaces.forEach(function(workspace) {
-        $("#workspace").append(
-            "<option value='" + workspace.id + "'>" + workspace.name + "</option>");
-      });
-      $("#workspace").val(options.default_workspace_id);
-      onWorkspaceChanged();
-      $("#workspace").change(onWorkspaceChanged);
+    $(window).keydown(function(e) {
+      // Close the popup if the ESCAPE key is pressed.
+      if (e.which === 27) {
+        if (me.is_first_add) {
+          Asana.ServerModel.logEvent({
+            name: "ChromeExtension-Abort"
+          });
+        }
+        window.close();
+      } else if (e.which === 9) {
+        // Don't let ourselves TAB to focus the document body, so if we're
+        // at the beginning or end of the tab ring, explicitly focus the
+        // other end (setting body.tabindex = -1 does not prevent this)
+        if (e.shiftKey && document.activeElement === me.firstInput().get(0)) {
+          me.lastInput().focus();
+          e.preventDefault();
+        } else if (!e.shiftKey && document.activeElement === me.lastInput().get(0)) {
+          me.firstInput().focus();
+          e.preventDefault();
+        }
+      }
     });
-  });
-};
 
-// Enable/disable the add button.
-var setAddEnabled = function(enabled) {
-  var button = $("#add_button");
-  if (enabled) {
-    button.removeClass("disabled");
-    button.addClass("enabled");
-    button.click(function() {
-      createTask();
-      return false;
-    });
-    button.keydown(function(e) {
-      if (e.keyCode === 13) {
-        createTask();
+    // Close if the X is clicked.
+    $(".close-x").click(function() {
+      if (me.is_first_add) {
+        Asana.ServerModel.logEvent({
+          name: "ChromeExtension-Abort"
+        });
       }
+      window.close();
     });
-  } else {
-    button.removeClass("enabled");
-    button.addClass("disabled");
-    button.unbind('click');
-    button.unbind('keydown');
-  }
-};
 
-// Set the add button as being "working", waiting for the Asana request
-// to complete.
-var setAddWorking = function(working) {
-  setAddEnabled(!working);
-  $("#add_button").find(".button-text").text(
-      working ? "Adding..." : "Add to Asana");
-};
+    $("#name_input").keyup(function() {
+      if (!me.has_edited_name && $("#name_input").val() !== "") {
+        me.has_edited_name = true;
+        Asana.ServerModel.logEvent({
+          name: "ChromeExtension-ChangedTaskName"
+        });
+      }
+      me.maybeDisablePageDetailsButton();
+    });
+    $("#notes_input").keyup(function() {
+      if (!me.has_edited_notes && $("#notes_input").val() !== "") {
+        me.has_edited_notes= true;
+        Asana.ServerModel.logEvent({
+          name: "ChromeExtension-ChangedTaskNotes"
+        });
+      }
+      me.maybeDisablePageDetailsButton();
+    });
 
-// When the user changes the workspace, update the list of users.
-var onWorkspaceChanged = function() {
-  var workspace_id = readWorkspaceId();
-  $("#assignee").html("<option>Loading...</option>");
-  setAddEnabled(false);
-  Asana.ServerModel.users(workspace_id, function(users) {
-    $("#assignee").html("");
-    users = users.sort(function(a, b) {
-      return (a.name < b.name) ? -1 : ((a.name > b.name) ? 1 : 0);
+    // The page details button fills in fields with details from the page
+    // in the current tab (cached when the popup opened).
+    var use_page_details_button = $("#use_page_details");
+    use_page_details_button.click(function() {
+      if (!(use_page_details_button.hasClass('disabled'))) {
+        // Page title -> task name
+        $("#name_input").val(me.page_title);
+        // Page url + selection -> task notes
+        var notes = $("#notes_input");
+        notes.val(notes.val() + me.page_url + "\n" + me.page_selection);
+        // Disable the page details button once used.        
+        use_page_details_button.addClass('disabled');
+        if (!me.has_used_page_details) {
+          me.has_used_page_details = true;
+          Asana.ServerModel.logEvent({
+            name: "ChromeExtension-UsedPageDetails"
+          });
+        }
+      }
     });
-    users.forEach(function(user) {
-      $("#assignee").append(
-          "<option value='" + user.id + "'>" + user.name + "</option>");
+
+    // Make a typeahead for assignee
+    me.typeahead = new UserTypeahead("assignee");
+  },
+
+  maybeDisablePageDetailsButton: function() {
+    if ($("#name_input").val() !== "" || $("#notes_input").val() !== "") {
+      $("#use_page_details").addClass('disabled');
+    } else {
+      $("#use_page_details").removeClass('disabled');
+    }
+  },
+
+  setExpandedUi: function(is_expanded) {
+    if (this.is_external) {
+      window.resizeTo(
+          Asana.POPUP_UI_WIDTH,
+          (is_expanded ? Asana.POPUP_EXPANDED_UI_HEIGHT : Asana.POPUP_UI_HEIGHT)
+              + Asana.CHROME_TITLEBAR_HEIGHT);
+    }
+  },
+
+  showView: function(name) {
+    ["login", "add"].forEach(function(view_name) {
+      $("#" + view_name + "_view").css("display", view_name === name ? "" : "none");
     });
+  },
+
+  showAddUi: function(url, title, selected_text, favicon_url) {
+    var me = this;
+
+    // Store off info from page we got triggered from.
+    me.page_url = url;
+    me.page_title = title;
+    me.page_selection = selected_text;
+    me.favicon_url = favicon_url;
+
+    // Populate workspace selector and select default.
     Asana.ServerModel.me(function(user) {
-      $("#assignee").val(user.id);
+      me.user_id = user.id;
+      Asana.ServerModel.workspaces(function(workspaces) {
+        me.workspaces = workspaces;
+        var select = $("#workspace_select");
+        select.html("");
+        workspaces.forEach(function(workspace) {
+          $("#workspace_select").append(
+              "<option value='" + workspace.id + "'>" + workspace.name + "</option>");
+        });
+        if (workspaces.length > 1) {
+          $("workspace_select_container").show();
+        } else {
+          $("workspace_select_container").hide();
+        }
+        select.val(me.options.default_workspace_id);
+        me.onWorkspaceChanged();
+        select.change(function() {
+          if (select.val() !== me.options.default_workspace_id) {
+            Asana.ServerModel.logEvent({
+              name: "ChromeExtension-ChangedWorkspace"
+            });
+          }
+          me.onWorkspaceChanged();
+        });
+
+        // Set initial UI state
+        me.resetFields();
+        me.showView("add");
+        var name_input = $("#name_input");
+        name_input.focus();
+        name_input.select();
+
+        if (favicon_url) {
+          $(".icon-use-link").css("background-image", "url(" + favicon_url + ")");
+        } else {
+          $(".icon-use-link").addClass("no-favicon sprite");
+        }
+      });
     });
-    setAddEnabled(true);
-  });
-};
+  },
 
-var readAssignee = function() {
-  return $("#assignee").val();
-};
+  /**
+   * @param enabled {Boolean} True iff the add button should be clickable.
+   */
+  setAddEnabled: function(enabled) {
+    var me = this;
+    var button = $("#add_button");
+    if (enabled) {
+      // Update appearance and add handlers.
+      button.removeClass("disabled");
+      button.addClass("enabled");
+      button.click(function() {
+        me.createTask();
+        return false;
+      });
+      button.keydown(function(e) {
+        if (e.keyCode === 13) {
+          me.createTask();
+        }
+      });
+    } else {
+      // Update appearance and remove handlers.
+      button.removeClass("enabled");
+      button.addClass("disabled");
+      button.unbind('click');
+      button.unbind('keydown');
+    }
+  },
 
-var readWorkspaceId = function() {
-  return $("#workspace").val();
-};
+  showError: function(message) {
+    console.log("Error: " + message);
+    $("#error").css("display", "inline-block");
+  },
+
+  hideError: function() {
+    $("#error").css("display", "none");
+  },
+
+  /**
+   * Clear inputs for new task entry.
+   */
+  resetFields: function() {
+    $("#name_input").val("");
+    $("#notes_input").val("");
+    this.typeahead.setSelectedUserId(this.user_id);
+  },
+
+  /**
+   * Set the add button as being "working", waiting for the Asana request
+   * to complete.
+   */
+  setAddWorking: function(working) {
+    this.setAddEnabled(!working);
+    $("#add_button").find(".button-text").text(
+        working ? "Adding..." : "Add to Asana");
+  },
+
+  /**
+   * Update the list of users as a result of setting/changing the workspace.
+   */
+  onWorkspaceChanged: function() {
+    var me = this;
+    var workspace_id = me.selectedWorkspaceId();
+
+    // Update selected workspace
+    $("#workspace").html($("#workspace_select option:selected").text());
+
+    // Save selection as new default.
+    me.options.default_workspace_id = workspace_id;
+    Asana.ServerModel.saveOptions(me.options, function() {});
+
+    // Update assignee list.
+    me.setAddEnabled(false);
+    Asana.ServerModel.users(workspace_id, function(users) {
+      me.typeahead.updateUsers(users);
+      me.setAddEnabled(true);
+    });
+  },
+
+  /**
+   * @param id {Integer}
+   * @return {dict} Workspace data for the given workspace.
+   */
+  workspaceById: function(id) {
+    var found = null;
+    this.workspaces.forEach(function(w) {
+      if (w.id === id) {
+        found = w;
+      }
+    });
+    return found;
+  },
+
+  /**
+   * @return {Integer} ID of the selected workspace.
+   */
+  selectedWorkspaceId: function() {
+    return parseInt($("#workspace_select").val(), 10);
+  },
+
+  /**
+   * Create a task in asana using the data in the form.
+   */
+  createTask: function() {
+    var me = this;
 
-var createTask = function() {
-  console.info("Creating task");
-  hideError();
-  setAddWorking(true);
-  Asana.ServerModel.createTask(
-      readWorkspaceId(),
-      {
-        name: $("#name").val(),
-        notes: $("#notes").val(),
-        assignee: readAssignee()
-      },
-      function(task) {
-        setAddWorking(false);
-        showSuccess(task);
-      },
-      function(response) {
-        setAddWorking(false);
-        showError(response.errors[0].message);
+    // Update UI to reflect attempt to create task.
+    console.info("Creating task");
+    me.hideError();
+    me.setAddWorking(true);
+
+    if (!me.is_first_add) {
+      Asana.ServerModel.logEvent({
+        name: "ChromeExtension-CreateTask-MultipleTasks"
       });
-};
+    }
 
-var showError = function(message) {
-  console.log("Error: " + message);
-  $("#error").css("display", "");
-};
+    Asana.ServerModel.createTask(
+        me.selectedWorkspaceId(),
+        {
+          name: $("#name_input").val(),
+          notes: $("#notes_input").val(),
+          // Default assignee to self
+          assignee: me.typeahead.selected_user_id || me.user_id
+        },
+        function(task) {
+          // Success! Show task success, then get ready for another input.
+          Asana.ServerModel.logEvent({
+            name: "ChromeExtension-CreateTask-Success"
+          });
+          me.setAddWorking(false);
+          me.showSuccess(task);
+          me.resetFields();
+          $("#name_input").focus();
+        },
+        function(response) {
+          // Failure. :( Show error, but leave form available for retry.
+          Asana.ServerModel.logEvent({
+            name: "ChromeExtension-CreateTask-Failure"
+          });
+          me.setAddWorking(false);
+          me.showError(response.errors[0].message);
+        });
+  },
 
-var hideError = function() {
-  $("#error").css("display", "none");
-};
+  /**
+   * Helper to show a success message after a task is added.
+   */
+  showSuccess: function(task) {
+    var me = this;
+    Asana.ServerModel.taskViewUrl(task, function(url) {
+      var name = task.name.replace(/^\s*/, "").replace(/\s*$/, "");
+      var link = $("#new_task_link");
+      link.attr("href", url);
+      link.text(name !== "" ? name : "Task");
+      link.unbind("click");
+      link.click(function() {
+        chrome.tabs.create({url: url});
+        window.close();
+        return false;
+      });
+
+      // Reset logging for multi-add
+      me.has_edited_name = true;
+      me.has_edited_notes = true;
+      me.has_reassigned = true;
+      me.is_first_add = false;
+
+      $("#success").css("display", "inline-block");
+    });
+  },
 
-// Helper to show a success message after a task is added.
-var showSuccess = function(task) {
-  Asana.ServerModel.taskViewUrl(task, function(url) {
-    var name = task.name.replace(/^\s*/, "").replace(/\s*$/, "");
-    $("#new_task_link").attr("href", url);
-    $("#new_task_link").text(name !== "" ? name : "unnamed task");
-    $("#new_task_link").unbind("click");
-    $("#new_task_link").click(function() {
-      chrome.tabs.create({url: url});
+  /**
+   * Show the login page.
+   */
+  showLogin: function(login_url, signup_url) {
+    var me = this;
+    $("#login_button").click(function() {
+      chrome.tabs.create({url: login_url});
       window.close();
       return false;
     });
-    showView("success");
-  });
+    $("#signup_button").click(function() {
+      chrome.tabs.create({url: signup_url});
+      window.close();
+      return false;
+    });
+    me.showView("login");
+  },
+
+  firstInput: function() {
+    return $("#workspace_select");
+  },
+
+  lastInput: function() {
+    return $("#add_button");
+  }
 };
 
-// Helper to show the login page.
-var showLogin = function(url) {
-  $("#login_link").attr("href", url);
-  $("#login_link").unbind("click");
-  $("#login_link").click(function() {
-    chrome.tabs.create({url: url});
-    window.close();
-    return false;
+/**
+ * A jQuery-based typeahead similar to the Asana application, which allows
+ * the user to select another user in the workspace by typing in a portion
+ * of their name and selecting from a filtered dropdown.
+ *
+ * Expects elements with the following IDs already in the DOM
+ *   ID: the element where the current assignee will be displayed.
+ *   ID_input: an input element where the user can edit the assignee
+ *   ID_list: an empty DOM whose children will be populated from the users
+ *       in the selected workspace, filtered by the input text.
+ *   ID_list_container: a DOM element containing ID_list which will be
+ *       shown or hidden based on whether the user is interacting with the
+ *       typeahead.
+ *
+ * @param id {String} Base ID of the typeahead element.
+ * @constructor
+ */
+UserTypeahead = function(id) {
+  var me = this;
+  me.id = id;
+  me.users = [];
+  me.filtered_users = [];
+  me.user_id_to_user = {};
+  me.selected_user_id = null;
+  me.user_id_to_select = null;
+  me.has_focus = false;
+
+  // Store off UI elements.
+  me.input = $("#" + id + "_input");
+  me.label = $("#" + id);
+  me.list = $("#" + id + "_list");
+  me.list_container = $("#" + id + "_list_container");
+
+  // Open on focus.
+  me.input.focus(function() {
+    me.user_id_to_select = me.selected_user_id;
+    if (me.selected_user_id !== null) {
+      // If a user was already selected, fill the field with their name
+      // and select it all.
+      var assignee_name = me.user_id_to_user[me.selected_user_id].name;
+      me.input.val(assignee_name);
+    } else {
+      me.input.val("");
+    }
+    me.has_focus = true;
+    Popup.setExpandedUi(true);
+    me._updateFilteredUsers();
+    me.render();
+    me._ensureSelectedUserVisible();
   });
-  showView("login");
+
+  // Close on blur. A natural blur does not cause us to accept the current
+  // selection - there had to be a user action taken that causes us to call
+  // `confirmSelection`, which would have updated user_id_to_select.
+  me.input.blur(function() {
+    me.selected_user_id = me.user_id_to_select;
+    me.has_focus = false;
+    if (!Popup.has_reassigned) {
+      Popup.has_reassigned = true;
+      Asana.ServerModel.logEvent({
+        name: (me.selected_user_id === Popup.user_id || me.selected_user_id === null) ?
+            "ChromeExtension-AssignToSelf" :
+            "ChromeExtension-AssignToOther"
+      });
+    }
+    me.render();
+    Popup.setExpandedUi(false);
+  });
+
+  // Handle keyboard within input
+  me.input.keydown(function(e) {
+    if (e.which === 13) {
+      // Enter accepts selection, focuses next UI element.
+      me._confirmSelection();
+      $("#add_button").focus();
+      return false;
+    } else if (e.which === 9) {
+      // Tab accepts selection. Browser default behavior focuses next element.
+      me._confirmSelection();
+      return true;
+    } else if (e.which === 27) {
+      // Abort selection. Stop propagation to avoid closing the whole
+      // popup window.
+      e.stopPropagation();
+      me.input.blur();
+      return false;
+    } else if (e.which === 40) {
+      // Down: select next.
+      var index = me._indexOfSelectedUser();
+      if (index === -1 && me.filtered_users.length > 0) {
+        me.setSelectedUserId(me.filtered_users[0].id);
+      } else if (index >= 0 && index < me.filtered_users.length) {
+        me.setSelectedUserId(me.filtered_users[index + 1].id);
+      }
+      me._ensureSelectedUserVisible();
+      e.preventDefault();
+    } else if (e.which === 38) {
+      // Up: select prev.
+      var index = me._indexOfSelectedUser();
+      if (index > 0) {
+        me.setSelectedUserId(me.filtered_users[index - 1].id);
+      }
+      me._ensureSelectedUserVisible();
+      e.preventDefault();
+    }
+  });
+
+  // When the input changes value, update and re-render our filtered list.
+  me.input.bind("input", function() {
+    me._updateFilteredUsers();
+    me._renderList();
+  });
+
+  // A user clicking or tabbing to the label should open the typeahead
+  // and select what's already there.
+  me.label.focus(function() {
+    me.input.focus();
+    me.input.get(0).setSelectionRange(0, me.input.val().length);
+  });
+
+  me.render();
 };
 
-// Close the popup if the ESCAPE key is pressed.
-window.addEventListener("keydown", function(e) {
-  if (e.keyCode === 27) {
-    window.close();
+Asana.update(UserTypeahead, {
+
+  SILHOUETTE_URL: "./nopicture.png",
+
+  /**
+   * @param user {dict}
+   * @returns {jQuery} photo element
+   */
+  photoForUser: function(user) {
+    var photo = $('<div class="user-photo"></div>"');
+    var url = user.photo ? user.photo.image_60x60 : UserTypeahead.SILHOUETTE_URL;
+    photo.css("background-image", "url(" + url + ")");
+    return $('<div class="user-photo-frame"></div>').append(photo);
   }
-}, /*capture=*/false);
 
-$("#close-banner").click(function() { window.close(); });
+});
+
+Asana.update(UserTypeahead.prototype, {
+
+  /**
+   * Render the typeahead, changing elements and content as needed.
+   */
+  render: function() {
+    var me = this;
+    me._renderLabel();
+
+    if (this.has_focus) {
+      // Focused - show the list and input instead of the label.
+      me._renderList();
+      me.input.show();
+      me.label.hide();
+      me.list_container.show();
+    } else {
+      // Not focused - show the label, not the list or input.
+      me.input.hide();
+      me.label.show();
+      me.list_container.hide();
+    }
+  },
+
+  /**
+   * Update the set of all (unfiltered) users available in the typeahead.
+   *
+   * @param users {dict[]}
+   */
+  updateUsers: function(users) {
+    var me = this;
+    // Build a map from user ID to user
+    var this_user = null;
+    var users_without_this_user = [];
+    me.user_id_to_user = {};
+    users.forEach(function(user) {
+      if (user.id === Popup.user_id) {
+        this_user = user;
+      } else {
+        users_without_this_user.push(user);
+      }
+      me.user_id_to_user[user.id] = user;
+    });
+
+    // Put current user at the beginning of the list.
+    // We really should have found this user, but if not .. let's not crash.
+    me.users = this_user ?
+        [this_user].concat(users_without_this_user) : users_without_this_user;
+
+    // If selected user is not in this workspace, unselect them.
+    if (!(me.selected_user_id in me.user_id_to_user)) {
+      me.selected_user_id = null;
+      me.input.val("");
+    }
+    me._updateFilteredUsers();
+    me.render();
+  },
+
+  _renderLabel: function() {
+    var me = this;
+    me.label.empty();
+    var selected_user = me.user_id_to_user[me.selected_user_id];
+    if (selected_user) {
+      if (selected_user.photo) {
+        me.label.append(UserTypeahead.photoForUser(selected_user));
+      }
+      me.label.append($('<div class="user-name">').text(selected_user.name));
+    } else {
+      me.label.append($('<span class="unassigned">').text("Assignee"));
+    }
+  },
+
+  _renderList: function() {
+    var me = this;
+    me.list.empty();
+    me.filtered_users.forEach(function(user) {
+      me.list.append(me._entryForUser(user, user.id === me.selected_user_id));
+    });
+  },
+
+  _entryForUser: function(user, is_selected) {
+    var me = this;
+    var node = $('<div id="user_' + user.id + '" class="user"></div>');
+    node.append(UserTypeahead.photoForUser(user));
+    node.append($('<div class="user-name">').text(user.name));
+    if (is_selected) {
+      node.addClass("selected");
+    }
+
+    // Select on mouseover.
+    node.mouseenter(function() {
+      me.setSelectedUserId(user.id);
+    });
+
+    // Select and confirm on click. We listen to `mousedown` because a click
+    // will take focus away from the input, hiding the user list and causing
+    // us not to get the ensuing `click` event.
+    node.mousedown(function() {
+      me.setSelectedUserId(user.id);
+      me._confirmSelection();
+    });
+    return node;
+  },
+
+  /**
+   * Generates a regular expression that will match strings which contain words
+   * that start with the words in filter_text. The matching is case-insensitive
+   * and the matching words do not need to be consecutive but they must be in
+   * the same order as those in filter_text.
+   *
+   * @param filter_text {String|null} The input text used to generate the regular
+   *  expression.
+   * @returns {Regexp}
+   */
+  _regexpFromFilterText: function(filter_text) {
+    if (!filter_text || filter_text.trim() === '') {
+      return null;
+    } else {
+      var escaped_filter_text = RegExp.escape(
+          filter_text.trim(),
+          /*opt_do_not_escape_spaces=*/true);
+      var parts = escaped_filter_text.trim().split(/\s+/).map(function(word) {
+        return "(" + word + ")";
+      }).join("(.*\\s+)");
+      return new RegExp("(?:\\b|^|(?=\\W))" + parts, "i");
+    }
+  },
+
+  _confirmSelection: function() {
+    this.user_id_to_select = this.selected_user_id;
+  },
+
+  _updateFilteredUsers: function() {
+    var regexp = this._regexpFromFilterText(this.input.val());
+    this.filtered_users = this.users.filter(function(user) {
+      if (regexp !== null) {
+        var parts = user.name.split(regexp);
+        return parts.length > 1;
+      } else {
+        return user.name.trim() !== "";  // no filter
+      }
+    });
+  },
+
+  _indexOfSelectedUser: function() {
+    var me = this;
+    var selected_user = me.user_id_to_user[me.selected_user_id];
+    if (selected_user) {
+      return me.filtered_users.indexOf(selected_user);
+    } else {
+      return -1;
+    }
+  },
+
+  /**
+   * Helper to call this when the selection was changed by something that
+   * was not the mouse (which is pointing directly at a visible element),
+   * to ensure the selected user is always visible in the list.
+   */
+  _ensureSelectedUserVisible: function() {
+    var index = this._indexOfSelectedUser();
+    if (index !== -1) {
+      var node = this.list.children().get(index);
+      Asana.Node.ensureBottomVisible(node);
+    }
+  },
+
+  setSelectedUserId: function(id) {
+    if (this.selected_user_id !== null) {
+      $("#user_" + this.selected_user_id).removeClass("selected");
+    }
+    this.selected_user_id = id;
+    if (this.selected_user_id !== null) {
+      $("#user_" + this.selected_user_id).addClass("selected");
+    }
+    this._renderLabel();
+  }
+
+});
+
+
+$(window).load(function() {
+  Popup.onLoad();
+});
diff --git a/popup_style.css b/popup_style.css
deleted file mode 100644
index 15e99c7..0000000
--- a/popup_style.css
+++ /dev/null
@@ -1,128 +0,0 @@
-/* Styles for popup.html */
-body {
-  overflow: hidden;
-  width: 410px;
-  height: 310px;  /* keep this correct for the window-based (non-button) version */
-  padding: 0px;
-  margin: 0px;
-  margin-top: 1px;
-  background-color: #fff;
-  border: 1px solid #AFBCC8;
-  -webkit-border-radius: 6px;
-  font-size: 14px;
-  font-family: "Helvetica Neue", Arial, sans-serif;
-}
-
-
-#banner {
-  font-size: 17px;
-  font-weight: 800;
-  background-color:#f2f2f2;
-  padding: 10px 14px 8px;
-  color: #596573;
-  text-transform: uppercase;
-  text-shadow: 0px 1px #fff;
-  border-bottom: 1px solid #E5E5E5;
-  -webkit-box-shadow: inset 0px -1px rgba(0,0,0,0.1);
-  -webkit-border-radius: 5px 5px 0px 0px;
-
-}
-
-#content {
-  padding: 10px 14px;
-  width: 100%;
-}
-
-#error {
-  width: 100%;
-  padding: 10px 14px;
-  background-color: #434C56;
-  font-weight: 500;
-  color: #ECF0F3;
-}
-.error-icon {
-  background-image: url(sprite.png);
-  background-position: 0px 0px;
-  background-repeat: no-repeat;
-  width: 19px;
-  min-width: 19px;
-  height: 16px;
-  min-height: 16px;
-  margin-bottom: -2px;
-  display: inline-block;
-
-}
-
-
-#add_view {
-  padding-bottom: 12px;
-}
-
-.form {
-  border: 0;
-  margin: 0;
-  padding: 0;
-}
-.field-name {
-  width: 80px;
-  padding: 6px 2px 2px 0px;
-  vertical-align: top;
-  font-size: 12px;
-  font-weight: bold;
-  color: #999999;
-  
-}
-.field-value {
-    width: 294px;
-    padding: 2px 0 2px 2px;
-    vertical-align: top;
-}
-#name {
-    width: 100%;
-}
-#notes {
-    width: 100%;
-    height: 100px;
-}
-#add_button {
-    margin-top: 10px;
-}
-
-#login_view {
-    padding-top: 10px;
-    width: 100%;
-    text-align: center;
-    font-weight: 600;
-    width: 382px;
-}
-#success_view {
-    padding-top: 84px;
-    text-align: center;
-    font-weight: 600;
-    width: 382px;
-    
-}
-.success-icon {
-  background-image: url(sprite.png);
-  background-position: 0px -50px;
-  background-repeat: no-repeat;
-  width: 19px;
-  min-width: 19px;
-  height: 16px;
-  min-height: 16px;
-  margin-bottom: -2px;
-  display: inline-block;
-
-}
-input, textarea {
-  -webkit-border-radius: 3px;
-  border: 1px solid rgba(0,0,0,0.2);
-  color: #212F40;
-  padding: 4px 5px 3px;
-  -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.1), 0px 1px #fff;
-}
-select, input, textarea {
-  font-size: 14px;
-  font-family: "Helvetica Neue", Arial, sans-serif;
-  color: #212F40;
-}
\ No newline at end of file
diff --git a/quick_add_client.js b/quick_add_client.js
deleted file mode 100644
index 538dcb3..0000000
--- a/quick_add_client.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * A module to run in a content window to enable QuickAdd from that window.
- * That is, pressing Tab+Q anywhere in the window will open the same popup
- * as is available from the chrome menu.
- *
- * This is not a perfect solution (though it might be refined further with
- * a little more effort). For one thing, we don't swallow the TAB key because
- * we don't want to interfere with the underlying page (especially if the user
- * wasn't going to press TAB+Q). So using the hotkey may cause you to focus
- * a new input on the page before opening the popup.
- *
- * Also, there's no way to trigger the chrome extension popup itself, so this
- * opens a new window with the popup content in it. This looks slightly
- * different than the real popup (and appears in a different place), but it
- * does the job.
- */
-Asana.QuickAddClient = {
-
-  _tab_down_time: 0,
-
-  keyDown: function(e) {
-    var self = Asana.QuickAddClient;
-    if (e.keyCode === 9) {
-      // Mark tab key as pressed at the current time.
-      // If the Q key gets pressed soon enough afterward, we've hit our
-      // hotkey combo.
-      self._tab_down_time = new Date().getTime();
-    } else if (e.keyCode === 81) {
-      if (new Date().getTime() < self._tab_down_time + 5000) {  // 5s timeout
-        self._tab_down_time = 0;
-        // Tab-Q!
-        // We cannot open the popup programmatically.
-        // http://code.google.com/chrome/extensions/faq.html#faq-open-popups
-        // So we do this roundabout thing.
-        chrome.extension.sendRequest({
-          type: "quick_add",
-          url: window.location.href,
-          title: document.title,
-          selected_text: "" + window.getSelection()
-        });
-        e.preventDefault();
-        return false;
-      }
-    }
-  },
-
-  keyUp: function(e) {
-    var self = Asana.QuickAddClient;
-    if (e.keyCode === 9) {
-      // Mark tab key as released.
-      self._tab_down_time = 0;
-    }
-  },
-
-  listen: function() {
-    // Don't run against Asana, which already has a QuickAdd feature. ;)
-    if (!/^https?:\/\/app[.]asana[.]com/.test(window.location.href) &&
-        !/^https?:\/\/localhost/.test(window.location.href)) {
-      window.addEventListener("keydown", Asana.QuickAddClient.keyDown, true);
-      window.addEventListener("keyup", Asana.QuickAddClient.keyUp, true);
-    }
-  }
-};
-
-Asana.QuickAddClient.listen();
diff --git a/selection_client.js b/selection_client.js
deleted file mode 100644
index 049b979..0000000
--- a/selection_client.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Module to install on a page that allows sending of the selection over to
- * the popup window when the user pops up the new task window. The popup
- * calls this method on our content window, and we get the selection
- * and send it back.
- */
-Asana.SelectionClient = {
-  // We get called when added to asana.
-  sendSelection: function() {
-    var selected_text = "" + window.getSelection();
-    console.info("Sending selection to Asana popup");
-    chrome.extension.sendRequest({
-      type: "selection",
-      value: selected_text
-    });
-  }
-};
diff --git a/server_model.js b/server_model.js
index 62ca5a4..52e4ce4 100644
--- a/server_model.js
+++ b/server_model.js
@@ -7,7 +7,10 @@
  */
 Asana.ServerModel = {
 
-  _cached_user: null,
+  // Make requests to API to refresh cache at this interval.
+  CACHE_REFRESH_INTERVAL_MS: 15 * 60 * 1000,
+
+  _url_to_cached_image: {},
 
   /**
    * Called by the model whenever a request is made and error occurs.
@@ -23,12 +26,23 @@ Asana.ServerModel = {
    * Requests the user's preferences for the extension.
    *
    * @param callback {Function(options)} Callback on completion.
-   *     workspaces {dict[]} See Asana.Options for details.
+   *     options {dict} See Asana.Options for details.
    */
   options: function(callback) {
     callback(Asana.Options.loadOptions());
   },
 
+  /**
+   * Saves the user's preferences for the extension.
+   *
+   * @param options {dict} See Asana.Options for details.
+   * @param callback {Function()} Callback on completion.
+   */
+  saveOptions: function(options, callback) {
+    Asana.Options.saveOptions(options);
+    callback();
+  },
+
   /**
    * Determine if the user is logged in.
    *
@@ -65,12 +79,12 @@ Asana.ServerModel = {
    * @param callback {Function(workspaces)} Callback on success.
    *     workspaces {dict[]}
    */
-  workspaces: function(callback, errback) {
+  workspaces: function(callback, errback, options) {
     var self = this;
     Asana.ApiBridge.request("GET", "/workspaces", {},
         function(response) {
           self._makeCallback(response, callback, errback);
-        });
+        }, options);
   },
 
   /**
@@ -79,12 +93,14 @@ Asana.ServerModel = {
    * @param callback {Function(users)} Callback on success.
    *     users {dict[]}
    */
-  users: function(workspace_id, callback) {
+  users: function(workspace_id, callback, errback, options) {
     var self = this;
-    Asana.ApiBridge.request("GET", "/workspaces/" + workspace_id + "/users", {},
+    Asana.ApiBridge.request(
+        "GET", "/workspaces/" + workspace_id + "/users",
+        { opt_fields: "name,photo.image_60x60" },
         function(response) {
-          self._makeCallback(response, callback);
-        });
+          self._makeCallback(response, callback, errback);
+        }, options);
   },
 
   /**
@@ -93,19 +109,12 @@ Asana.ServerModel = {
    * @param callback {Function(user)} Callback on success.
    *     user {dict[]}
    */
-  me: function(callback) {
+  me: function(callback, errback, options) {
     var self = this;
-    if (self._cached_user !== null) {
-      callback(self._cached_user);
-    } else {
-      Asana.ApiBridge.request("GET", "/users/me", {},
-          function(response) {
-            if (!response.errors) {
-              self._cached_user = response.data;
-            }
-            self._makeCallback(response, callback);
-          });
-    }
+    Asana.ApiBridge.request("GET", "/users/me", {},
+        function(response) {
+          self._makeCallback(response, callback, errback);
+        }, options);
   },
 
   /**
@@ -125,12 +134,72 @@ Asana.ServerModel = {
         });
   },
 
+  logEvent: function(event) {
+    Asana.ApiBridge.request(
+        "POST",
+        "/logs",
+        event,
+        function(response) {});
+  },
+
   _makeCallback: function(response, callback, errback) {
     if (response.errors) {
       (errback || this.onError).call(null, response);
     } else {
       callback(response.data);
     }
+  },
+
+  _cacheUserPhoto: function(user) {
+    var me = this;
+    if (user.photo) {
+      var url = user.photo.image_60x60;
+      if (!(url in me._url_to_cached_image)) {
+        var image = new Image();
+        image.src = url;
+        me._url_to_cached_image[url] = image;
+      }
+    }
+  },
+
+  /**
+   * Start fetching all the data needed by the extension so it is available
+   * whenever a popup is opened.
+   */
+  startPrimingCache: function() {
+    var me = this;
+    me._cache_refresh_interval = setInterval(function() {
+      me.refreshCache();
+    }, me.CACHE_REFRESH_INTERVAL_MS);
+    me.refreshCache();
+  },
+
+  refreshCache: function() {
+    var me = this;
+    // Fetch logged-in user.
+    me.me(function(user) {
+      if (!user.errors) {
+        // Fetch list of workspaces.
+        me.workspaces(function(workspaces) {
+          if (!workspaces.errors) {
+            var i = 0;
+            // Fetch users in each workspace.
+            var fetchUsers = function() {
+              me.users(workspaces[i].id, function(users) {
+                // Prefetch images too
+                users.forEach(function(user) {
+                  me._cacheUserPhoto(user);
+                });
+                if (++i < workspaces.length) {
+                  fetchUsers();
+                }
+              }, null, { miss_cache: true });
+            };
+            fetchUsers();
+          }
+        }, null, { miss_cache: true })
+      }
+    }, null, { miss_cache: true });
   }
 
 };
\ No newline at end of file
diff --git a/sprite-retina.png b/sprite-retina.png
new file mode 100644
index 0000000..8352fc0
Binary files /dev/null and b/sprite-retina.png differ
diff --git a/sprite.png b/sprite.png
index 7f59048..7a3f0ec 100644
Binary files a/sprite.png and b/sprite.png differ