diff --git a/assets/js/components/Options.jsx b/assets/js/components/Options.jsx
index ed637f4..2ab63ac 100644
--- a/assets/js/components/Options.jsx
+++ b/assets/js/components/Options.jsx
@@ -142,11 +142,12 @@ var Options = React.createClass({
             }
 
             return (
-                <SitesList
-                    handleChange={that._updateWhitelistState}
-                    label="Whitelist"
-                    sites={that.state.whitelist}
-                    helpText="Sites that you want to show in your reports." />
+              <SitesList
+                  handleChange={that._updateWhitelistState}
+                  label="Whitelist"
+                  sites={that.state.whitelist}
+                  placeholder="http://google.com&#10;http://myproject.com@@MyProject"
+                  helpText="Sites that you want to show in your reports. You can assign URL to project by adding @@YourProject at the end of line." />
             );
 
         };
diff --git a/assets/js/components/WakaTime.jsx b/assets/js/components/WakaTime.jsx
index bea26f9..b505e46 100644
--- a/assets/js/components/WakaTime.jsx
+++ b/assets/js/components/WakaTime.jsx
@@ -67,6 +67,8 @@ var Wakatime = React.createClass({
                         totalTimeLoggedToday: grand_total.text
                     });
                 });
+
+                wakatime.recordHeartbeat();
             }
             else {
                 changeExtensionState('notSignedIn');
diff --git a/assets/js/core/WakaTimeCore.js b/assets/js/core/WakaTimeCore.js
index 2c10bc3..1885c66 100644
--- a/assets/js/core/WakaTimeCore.js
+++ b/assets/js/core/WakaTimeCore.js
@@ -3,7 +3,6 @@
 
 var $ = require('jquery');
 var moment = require('moment');
-
 var config = require('./../config');
 
 // Helpers
@@ -29,7 +28,6 @@ class WakaTimeCore {
 
     getTotalTimeLoggedToday() {
         var deferredObject = $.Deferred();
-
         var today = moment().format('YYYY-MM-DD');
 
         $.ajax({
@@ -63,14 +61,10 @@ class WakaTimeCore {
             url: config.currentUserApiUrl,
             dataType: 'json',
             success: (data) => {
-
                 deferredObject.resolve(data.data);
-
             },
             error: (xhr, status, err) => {
-
                 console.error(config.currentUserApiUrl, status, err.toString());
-
                 deferredObject.resolve(false);
             }
         });
@@ -83,7 +77,6 @@ class WakaTimeCore {
      * and sends it to WakaTime for logging.
      */
     recordHeartbeat() {
-
         chrome.storage.sync.get({
             loggingEnabled: config.loggingEnabled,
             loggingStyle: config.loggingStyle,
@@ -91,24 +84,27 @@ class WakaTimeCore {
             whitelist: ''
         }, (items) => {
             if (items.loggingEnabled === true) {
-
                 changeExtensionState('allGood');
 
                 chrome.idle.queryState(config.detectionIntervalInSeconds, (newState) => {
-
                     if (newState === 'active') {
                         // Get current tab URL.
                         chrome.tabs.query({active: true}, (tabs) => {
 
                             var currentActiveTab = tabs[0];
-
                             var debug = false;
+
                             // If the current active tab has devtools open
-                            if (in_array(currentActiveTab.id, this.tabsWithDevtoolsOpen)) debug = true;
+                            if (in_array(currentActiveTab.id, this.tabsWithDevtoolsOpen)) {
+                                debug = true;
+                            }
 
                             if (items.loggingStyle == 'blacklist') {
                                 if (! contains(currentActiveTab.url, items.blacklist)) {
-                                    this.sendHeartbeat(currentActiveTab.url, debug);
+                                    this.sendHeartbeat({
+                                        url: currentActiveTab.url,
+                                        project: false
+                                    }, debug);
                                 }
                                 else {
                                     changeExtensionState('blacklisted');
@@ -117,8 +113,9 @@ class WakaTimeCore {
                             }
 
                             if (items.loggingStyle == 'whitelist') {
-                                if (contains(currentActiveTab.url, items.whitelist)) {
-                                    this.sendHeartbeat(currentActiveTab.url, debug);
+                                var heartbeat = this.getHeartbeat(currentActiveTab.url, items.whitelist);
+                                if (heartbeat.url) {
+                                    this.sendHeartbeat(heartbeat, debug);
                                 }
                                 else {
                                     changeExtensionState('whitelisted');
@@ -136,6 +133,50 @@ class WakaTimeCore {
         });
     }
 
+    /**
+     * Creates an array from list using \n as delimiter
+     * and checks if any element in list is contained in the url.
+     * Also checks if element is assigned to a project using @@ as delimiter
+     *
+     * @param url
+     * @param list
+     * @returns {object}
+     */
+    getHeartbeat(url, list) {
+        var lines = list.split('\n');
+
+        for (var i = 0; i < lines.length; i ++) {
+            // Trim all lines from the list one by one
+            var cleanLine = lines[i].trim();
+
+            // If by any chance one line in the list is empty, ignore it
+            if (cleanLine === '') {
+                continue;
+            }
+
+            // If url contains the current line return object
+            if (url.indexOf(cleanLine.split('@@')[0]) > -1) {
+                if (cleanLine.split('@@')[1]) {
+                    return {
+                        url: cleanLine.split('@@')[0],
+                        project: cleanLine.split('@@')[1]
+                    };
+                }
+                else {
+                    return {
+                        url: cleanLine.split('@@')[0],
+                        project: false
+                    };
+                }
+            }
+        }
+
+        return {
+            url: false,
+            project: false
+        };
+    }
+
     /**
      * Creates payload for the heartbeat and returns it as JSON.
      *
@@ -145,12 +186,12 @@ class WakaTimeCore {
      * @returns {*}
      * @private
      */
-    _preparePayload(entity, type, debug = false) {
+    _preparePayload(heartbeat, type, debug = false) {
         return JSON.stringify({
-            entity: entity,
+            entity: heartbeat.url,
             type: type,
             time: moment().format('X'),
-            project: '<<LAST_PROJECT>>',
+            project: heartbeat.project || '<<LAST_PROJECT>>',
             is_debugging: debug,
             plugin: 'chrome-wakatime/' + config.version
         });
@@ -182,34 +223,24 @@ class WakaTimeCore {
      * @param entity
      * @param debug
      */
-    sendHeartbeat(entity, debug) {
-
+    sendHeartbeat(heartbeat, debug) {
         var payload = null;
 
         this._getLoggingType().done((loggingType) => {
-
             // Get only the domain from the entity.
             // And send that in heartbeat
             if (loggingType == 'domain') {
-
-                var domain = getDomainFromUrl(entity);
-
-                payload = this._preparePayload(domain, 'domain', debug);
-
+                heartbeat.url = getDomainFromUrl(heartbeat.url);
+                payload = this._preparePayload(heartbeat, 'domain', debug);
                 console.log(payload);
-
                 this.sendAjaxRequestToApi(payload);
-
             }
             // Send entity in heartbeat
             else if (loggingType == 'url') {
-                payload = this._preparePayload(entity, 'url', debug);
-
+                payload = this._preparePayload(heartbeat, 'url', debug);
                 console.log(payload);
-
                 this.sendAjaxRequestToApi(payload);
             }
-
         });
     }
 
diff --git a/assets/less/bootstrap/bootstrap.less b/assets/less/bootstrap/bootstrap.less
index 1c04778..f0aa08f 100644
--- a/assets/less/bootstrap/bootstrap.less
+++ b/assets/less/bootstrap/bootstrap.less
@@ -1,6 +1,6 @@
 /*!
- * Bootstrap v3.3.6 (http://getbootstrap.com)
- * Copyright 2011-2015 Twitter, Inc.
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2016 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
diff --git a/assets/less/bootstrap/button-groups.less b/assets/less/bootstrap/button-groups.less
index 293245a..16db0c6 100644
--- a/assets/less/bootstrap/button-groups.less
+++ b/assets/less/bootstrap/button-groups.less
@@ -59,7 +59,7 @@
     .border-right-radius(0);
   }
 }
-// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
+// Need .dropdown-toggle since :last-child doesn't apply, given that a .dropdown-menu is used immediately after it
 .btn-group > .btn:last-child:not(:first-child),
 .btn-group > .dropdown-toggle:not(:first-child) {
   .border-left-radius(0);
diff --git a/assets/less/bootstrap/forms.less b/assets/less/bootstrap/forms.less
index e8b071a..9377d38 100644
--- a/assets/less/bootstrap/forms.less
+++ b/assets/less/bootstrap/forms.less
@@ -181,7 +181,7 @@ input[type="search"] {
 // set a pixel line-height that matches the given height of the input, but only
 // for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
 //
-// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
+// Note that as of 9.3, iOS doesn't support `week`.
 
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
   input[type="date"],
diff --git a/assets/less/bootstrap/input-groups.less b/assets/less/bootstrap/input-groups.less
index 5f73eec..d0763db 100644
--- a/assets/less/bootstrap/input-groups.less
+++ b/assets/less/bootstrap/input-groups.less
@@ -29,7 +29,7 @@
 
     width: 100%;
     margin-bottom: 0;
-    
+
     &:focus {
       z-index: 3;
     }
diff --git a/assets/less/bootstrap/mixins/tab-focus.less b/assets/less/bootstrap/mixins/tab-focus.less
index 1f1f05a..d12d236 100644
--- a/assets/less/bootstrap/mixins/tab-focus.less
+++ b/assets/less/bootstrap/mixins/tab-focus.less
@@ -1,9 +1,9 @@
 // WebKit-style focus
 
 .tab-focus() {
-  // Default
-  outline: thin dotted;
-  // WebKit
+  // WebKit-specific. Other browsers will keep their default outline style.
+  // (Initially tried to also force default via `outline: initial`,
+  // but that seems to erroneously remove the outline in Firefox altogether.)
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }
diff --git a/assets/less/bootstrap/panels.less b/assets/less/bootstrap/panels.less
index 425eb5e..65aa3a8 100644
--- a/assets/less/bootstrap/panels.less
+++ b/assets/less/bootstrap/panels.less
@@ -214,7 +214,7 @@
 }
 
 
-// Collapsable panels (aka, accordion)
+// Collapsible panels (aka, accordion)
 //
 // Wrap a series of panels in `.panel-group` to turn them into an accordion with
 // the help of our collapse JavaScript plugin.
diff --git a/assets/less/bootstrap/scaffolding.less b/assets/less/bootstrap/scaffolding.less
index 1929bfc..64a29c6 100644
--- a/assets/less/bootstrap/scaffolding.less
+++ b/assets/less/bootstrap/scaffolding.less
@@ -120,7 +120,7 @@ hr {
 
 // Only display content to screen readers
 //
-// See: http://a11yproject.com/posts/how-to-hide-content/
+// See: http://a11yproject.com/posts/how-to-hide-content
 
 .sr-only {
   position: absolute;
diff --git a/assets/less/bootstrap/theme.less b/assets/less/bootstrap/theme.less
index 8f51d91..fb61744 100644
--- a/assets/less/bootstrap/theme.less
+++ b/assets/less/bootstrap/theme.less
@@ -1,6 +1,6 @@
 /*!
- * Bootstrap v3.3.6 (http://getbootstrap.com)
- * Copyright 2011-2015 Twitter, Inc.
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2016 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
diff --git a/assets/less/bootstrap/variables.less b/assets/less/bootstrap/variables.less
index b057ef5..03b5498 100644
--- a/assets/less/bootstrap/variables.less
+++ b/assets/less/bootstrap/variables.less
@@ -111,7 +111,7 @@
 //** Global background color for active items (e.g., navs or dropdowns).
 @component-active-bg:       @brand-primary;
 
-//** Width of the `border` for generating carets that indicator dropdowns.
+//** Width of the `border` for generating carets that indicate dropdowns.
 @caret-width-base:          4px;
 //** Carets increase slightly in size for larger components.
 @caret-width-large:         5px;
diff --git a/screenshots/sc_7-options3.png b/screenshots/sc_7-options3.png
index 4e03f3f..8684f24 100644
Binary files a/screenshots/sc_7-options3.png and b/screenshots/sc_7-options3.png differ
diff --git a/screenshots/sc_7-options4.png b/screenshots/sc_7-options4.png
index 8465834..57b682f 100644
Binary files a/screenshots/sc_7-options4.png and b/screenshots/sc_7-options4.png differ
diff --git a/screenshots/sc_8-options.png b/screenshots/sc_8-options.png
index 00eea0e..9cb7181 100644
Binary files a/screenshots/sc_8-options.png and b/screenshots/sc_8-options.png differ