diff --git a/src/index.html b/src/index.html
index fcfc431..fe20f73 100644
--- a/src/index.html
+++ b/src/index.html
@@ -32,6 +32,8 @@
         <a id="btnAll">All-time</a>
         <a id="btnByDays">By days</a>
         <a id="settings">Settings</a>
+        <a id="btnSendData">Send Data</a>
+
         <div id='hintForUsers' class="hint-for-settings hide">
             <div id='closeHintBtn' class="close-hint">✖</div>
             <p class="title-block">In Web Activity Time Tracker you can:</p>
@@ -98,6 +100,14 @@
             </div>
         </div>
     </div>
+
+    <div id="sendDataPage" style="display:none;">
+        <h1>Send Data to Backend</h1>
+        <button id="btnSendDataToBackend">Send Data to Backend</button>
+        <p id="backendMessage"></p>
+    </div>
+    
+
     <div id="blockForChartBtn">
         <a class="button active chart-btn chart-btn-donut" id="donutChartBtn">Common chart</a>
         <a class="button chart-btn chart-btn-heatmap" id="heatMapChartBtn">Time chart</a>
@@ -119,4 +129,6 @@
 <script src="scripts/storage.js"></script>
 <script src="scripts/common.js"></script>
 <script src="scripts/ui.js"></script>
-<script src="scripts/webact.js"></script>
\ No newline at end of file
+<script src="scripts/webact.js"></script>
+
+<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
diff --git a/src/manifest.json b/src/manifest.json
index 585195d..623f46c 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -3,7 +3,7 @@
     
         "name": "Web Activity Time Tracker",
         "short_name": "Web Time Tracker",
-        "version": "1.7.2",
+        "version": "1.7.2.8",
         "minimum_chrome_version": "26",
 
         "description": "Track and limit time your activity in the browser every day.",
diff --git a/src/scripts/background.js b/src/scripts/background.js
index fcb61bc..8ac4131 100644
--- a/src/scripts/background.js
+++ b/src/scripts/background.js
@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 var tabs;
 var timeIntervalList;
@@ -23,454 +23,614 @@ var isHasPermissioForNetflix;
 var isHasPermissioForNotification;
 
 function updateSummaryTime() {
-    setInterval(backgroundCheck, SETTINGS_INTERVAL_CHECK_DEFAULT);
+  setInterval(backgroundCheck, SETTINGS_INTERVAL_CHECK_DEFAULT);
 }
 
 function updateStorage() {
-    setInterval(backgroundUpdateStorage, SETTINGS_INTERVAL_SAVE_STORAGE_DEFAULT);
+  setInterval(backgroundUpdateStorage, SETTINGS_INTERVAL_SAVE_STORAGE_DEFAULT);
 }
 
 function backgroundCheck() {
-    chrome.windows.getLastFocused({ populate: true }, function(currentWindow) {
-        if (currentWindow.focused) {
-            var activeTab = currentWindow.tabs.find(t => t.active === true);
-            if (activeTab !== undefined && activity.isValidPage(activeTab)) {
-                var activeUrl = extractHostname(activeTab.url);
-                var tab = activity.getTab(activeUrl);
-                if (tab === undefined) {
-                    activity.addTab(activeTab);
-                }
-
-                if (activity.isInBlackList(activeUrl)) {
-                    chrome.browserAction.setBadgeBackgroundColor({ color: '#fdb8b8' })
-                    chrome.browserAction.setBadgeText({
-                        tabId: activeTab.id,
-                        text: 'n/a'
-                    });
-                } else {
-                    if (tab !== undefined) {
-                        if (currentTab !== tab.url) {
-                            activity.setCurrentActiveTab(tab.url);
-                        }
-                        chrome.idle.queryState(parseInt(setting_interval_inactivity), function(state) {
-                            if (state === 'active') {
-                                mainTRacker(activeUrl, tab, activeTab);
-                            } else checkDOM(state, activeUrl, tab, activeTab);
-                        });
-                    }
-                }
+  chrome.windows.getLastFocused({ populate: true }, function (currentWindow) {
+    if (currentWindow.focused) {
+      var activeTab = currentWindow.tabs.find((t) => t.active === true);
+      if (activeTab !== undefined && activity.isValidPage(activeTab)) {
+        var activeUrl = extractHostname(activeTab.url);
+        var tab = activity.getTab(activeUrl);
+        if (tab === undefined) {
+          activity.addTab(activeTab);
+        }
+
+        if (activity.isInBlackList(activeUrl)) {
+          chrome.browserAction.setBadgeBackgroundColor({ color: "#fdb8b8" });
+          chrome.browserAction.setBadgeText({
+            tabId: activeTab.id,
+            text: "n/a",
+          });
+        } else {
+          if (tab !== undefined) {
+            if (currentTab !== tab.url) {
+              activity.setCurrentActiveTab(tab.url);
             }
-        } else activity.closeIntervalForCurrentTab();
-    });
+            chrome.idle.queryState(
+              parseInt(setting_interval_inactivity),
+              function (state) {
+                if (state === "active") {
+                  mainTRacker(activeUrl, tab, activeTab);
+                } else checkDOM(state, activeUrl, tab, activeTab);
+              }
+            );
+          }
+        }
+      }
+    } else activity.closeIntervalForCurrentTab();
+  });
 }
 
 function mainTRacker(activeUrl, tab, activeTab) {
-    if (activity.isLimitExceeded(activeUrl, tab) && !activity.wasDeferred(activeUrl)) {
-        setBlockPageToCurrent(activeTab.url, tab.days.at(-1).summary, tab.days.at(-1).counter);
-    }
-    if (!activity.isInBlackList(activeUrl)) {
-        if (activity.isNeedNotifyView(activeUrl, tab)) {
-            if (isHasPermissioForNotification) {
-                showNotification(activeUrl, tab);
-            } else {
-                checkPermissionsForNotifications(showNotification, activeUrl, tab);
-            }
-        }
-        tab.incSummaryTime();
-    }
-    if (setting_view_in_badge === true) {
-        chrome.browserAction.setBadgeBackgroundColor({ color: '#e7e7e7' })
-        var summary = tab.days.find(s => s.date === todayLocalDate()).summary;
-        chrome.browserAction.setBadgeText({
-            tabId: activeTab.id,
-            text: String(convertSummaryTimeToBadgeString(summary))
-        });
-    } else {
-        chrome.browserAction.setBadgeBackgroundColor({ color: [0, 0, 0, 0] })
-        chrome.browserAction.setBadgeText({
-            tabId: activeTab.id,
-            text: ''
-        });
+  if (
+    activity.isLimitExceeded(activeUrl, tab) &&
+    !activity.wasDeferred(activeUrl)
+  ) {
+    setBlockPageToCurrent(
+      activeTab.url,
+      tab.days.at(-1).summary,
+      tab.days.at(-1).counter
+    );
+  }
+  if (!activity.isInBlackList(activeUrl)) {
+    if (activity.isNeedNotifyView(activeUrl, tab)) {
+      if (isHasPermissioForNotification) {
+        showNotification(activeUrl, tab);
+      } else {
+        checkPermissionsForNotifications(showNotification, activeUrl, tab);
+      }
     }
+    tab.incSummaryTime();
+  }
+  if (setting_view_in_badge === true) {
+    chrome.browserAction.setBadgeBackgroundColor({ color: "#e7e7e7" });
+    var summary = tab.days.find((s) => s.date === todayLocalDate()).summary;
+    chrome.browserAction.setBadgeText({
+      tabId: activeTab.id,
+      text: String(convertSummaryTimeToBadgeString(summary)),
+    });
+  } else {
+    chrome.browserAction.setBadgeBackgroundColor({ color: [0, 0, 0, 0] });
+    chrome.browserAction.setBadgeText({
+      tabId: activeTab.id,
+      text: "",
+    });
+  }
 }
 
 function showNotification(activeUrl, tab) {
-    chrome.notifications.clear('watt-site-notification', function(wasCleared) {
-        if (!wasCleared) {
-            console.log('!wasCleared');
-
-            chrome.notifications.create(
-                'watt-site-notification', {
-                    type: 'basic',
-                    iconUrl: 'icons/128x128.png',
-                    title: "Web Activity Time Tracker",
-                    contextMessage: activeUrl + ' ' + convertShortSummaryTimeToString(tab.getTodayTime()),
-                    message: setting_notification_message
-                },
-                function(notificationId) {
-                    console.log(notificationId);
-                    chrome.notifications.clear('watt-site-notification', function(wasCleared) {
-                        if (wasCleared)
-                            notificationAction(activeUrl, tab);
-                    });
-                });
-        } else {
-            notificationAction(activeUrl, tab);
+  chrome.notifications.clear("watt-site-notification", function (wasCleared) {
+    if (!wasCleared) {
+      console.log("!wasCleared");
+
+      chrome.notifications.create(
+        "watt-site-notification",
+        {
+          type: "basic",
+          iconUrl: "icons/128x128.png",
+          title: "Web Activity Time Tracker",
+          contextMessage:
+            activeUrl +
+            " " +
+            convertShortSummaryTimeToString(tab.getTodayTime()),
+          message: setting_notification_message,
+        },
+        function (notificationId) {
+          console.log(notificationId);
+          chrome.notifications.clear(
+            "watt-site-notification",
+            function (wasCleared) {
+              if (wasCleared) notificationAction(activeUrl, tab);
+            }
+          );
         }
-    });
+      );
+    } else {
+      notificationAction(activeUrl, tab);
+    }
+  });
 }
 
 function notificationAction(activeUrl, tab) {
-    chrome.notifications.create(
-        'watt-site-notification', {
-            type: 'basic',
-            iconUrl: 'icons/128x128.png',
-            title: "Web Activity Time Tracker",
-            contextMessage: activeUrl + ' ' + convertShortSummaryTimeToString(tab.getTodayTime()),
-            message: setting_notification_message
-        });
+  chrome.notifications.create("watt-site-notification", {
+    type: "basic",
+    iconUrl: "icons/128x128.png",
+    title: "Web Activity Time Tracker",
+    contextMessage:
+      activeUrl + " " + convertShortSummaryTimeToString(tab.getTodayTime()),
+    message: setting_notification_message,
+  });
 }
 
 function setBlockPageToCurrent(currentUrl, summaryTime, counter) {
-    var blockUrl = chrome.runtime.getURL("block.html") + '?url=' + currentUrl
-    + '&summaryTime=' + summaryTime
-    + '&counter=' + counter;
-    chrome.tabs.query({ currentWindow: true, active: true }, function(tab) {
-        chrome.tabs.update(tab.id, { url: blockUrl });
-    });
+  var blockUrl =
+    chrome.runtime.getURL("block.html") +
+    "?url=" +
+    currentUrl +
+    "&summaryTime=" +
+    summaryTime +
+    "&counter=" +
+    counter;
+  chrome.tabs.query({ currentWindow: true, active: true }, function (tab) {
+    chrome.tabs.update(tab.id, { url: blockUrl });
+  });
 }
 
 function isVideoPlayedOnPage() {
-    var videoElement = document.getElementsByTagName('video')[0];
-    if (videoElement !== undefined && videoElement.currentTime > 0 && !videoElement.paused && !videoElement.ended && videoElement.readyState > 2) {
-        return true;
-    } else return false;
+  var videoElement = document.getElementsByTagName("video")[0];
+  if (
+    videoElement !== undefined &&
+    videoElement.currentTime > 0 &&
+    !videoElement.paused &&
+    !videoElement.ended &&
+    videoElement.readyState > 2
+  ) {
+    return true;
+  } else return false;
 }
 
 function checkDOM(state, activeUrl, tab, activeTab) {
-    if (state === 'idle' && isDomainEquals(activeUrl, "youtube.com")) {
-        trackForYT(mainTRacker, activeUrl, tab, activeTab);
-    } else if (state === 'idle' && isDomainEquals(activeUrl, "netflix.com")) {
-        trackForNetflix(mainTRacker, activeUrl, tab, activeTab);
-    } else activity.closeIntervalForCurrentTab();
+  if (state === "idle" && isDomainEquals(activeUrl, "youtube.com")) {
+    trackForYT(mainTRacker, activeUrl, tab, activeTab);
+  } else if (state === "idle" && isDomainEquals(activeUrl, "netflix.com")) {
+    trackForNetflix(mainTRacker, activeUrl, tab, activeTab);
+  } else activity.closeIntervalForCurrentTab();
 }
 
 function trackForYT(callback, activeUrl, tab, activeTab) {
-    if (isHasPermissioForYouTube) {
-        executeScriptYoutube(callback, activeUrl, tab, activeTab);
-    } else {
-        checkPermissionsForYT(executeScriptYoutube, activity.closeIntervalForCurrentTab, callback, activeUrl, tab, activeTab);
-    }
+  if (isHasPermissioForYouTube) {
+    executeScriptYoutube(callback, activeUrl, tab, activeTab);
+  } else {
+    checkPermissionsForYT(
+      executeScriptYoutube,
+      activity.closeIntervalForCurrentTab,
+      callback,
+      activeUrl,
+      tab,
+      activeTab
+    );
+  }
 }
 
 function trackForNetflix(callback, activeUrl, tab, activeTab) {
-    if (isHasPermissioForNetflix) {
-        executeScriptNetflix(callback, activeUrl, tab, activeTab);
-    } else {
-        checkPermissionsForNetflix(executeScriptNetflix, activity.closeIntervalForCurrentTab, callback, activeUrl, tab, activeTab);
-    }
+  if (isHasPermissioForNetflix) {
+    executeScriptNetflix(callback, activeUrl, tab, activeTab);
+  } else {
+    checkPermissionsForNetflix(
+      executeScriptNetflix,
+      activity.closeIntervalForCurrentTab,
+      callback,
+      activeUrl,
+      tab,
+      activeTab
+    );
+  }
 }
 
 function executeScriptYoutube(callback, activeUrl, tab, activeTab) {
-    chrome.tabs.executeScript({ code: "var videoElement = document.getElementsByTagName('video')[0]; (videoElement !== undefined && videoElement.currentTime > 0 && !videoElement.paused && !videoElement.ended && videoElement.readyState > 2);" }, (results) => {
-        if (results !== undefined && results[0] !== undefined && results[0] === true)
-            callback(activeUrl, tab, activeTab);
-        else activity.closeIntervalForCurrentTab();
-    });
+  chrome.tabs.executeScript(
+    {
+      code: "var videoElement = document.getElementsByTagName('video')[0]; (videoElement !== undefined && videoElement.currentTime > 0 && !videoElement.paused && !videoElement.ended && videoElement.readyState > 2);",
+    },
+    (results) => {
+      if (
+        results !== undefined &&
+        results[0] !== undefined &&
+        results[0] === true
+      )
+        callback(activeUrl, tab, activeTab);
+      else activity.closeIntervalForCurrentTab();
+    }
+  );
 }
 
 function executeScriptNetflix(callback, activeUrl, tab, activeTab) {
-    chrome.tabs.executeScript({ code: "var videoElement = document.getElementsByTagName('video')[0]; (videoElement !== undefined && videoElement.currentTime > 0 && !videoElement.paused && !videoElement.ended && videoElement.readyState > 2);" }, (results) => {
-        if (results !== undefined && results[0] !== undefined && results[0] === true) {
-            callback(activeUrl, tab, activeTab);
-        } else {
-            activity.closeIntervalForCurrentTab();
-        }
-    });
+  chrome.tabs.executeScript(
+    {
+      code: "var videoElement = document.getElementsByTagName('video')[0]; (videoElement !== undefined && videoElement.currentTime > 0 && !videoElement.paused && !videoElement.ended && videoElement.readyState > 2);",
+    },
+    (results) => {
+      if (
+        results !== undefined &&
+        results[0] !== undefined &&
+        results[0] === true
+      ) {
+        callback(activeUrl, tab, activeTab);
+      } else {
+        activity.closeIntervalForCurrentTab();
+      }
+    }
+  );
 }
 
 function backgroundUpdateStorage() {
-    if (tabs != undefined && tabs.length > 0)
-        storage.saveTabs(tabs);
-    if (timeIntervalList != undefined && timeIntervalList.length > 0)
-        storage.saveValue(STORAGE_TIMEINTERVAL_LIST, timeIntervalList);
+  if (tabs != undefined && tabs.length > 0) storage.saveTabs(tabs);
+  if (timeIntervalList != undefined && timeIntervalList.length > 0)
+    storage.saveValue(STORAGE_TIMEINTERVAL_LIST, timeIntervalList);
 }
 
 function setDefaultSettings() {
-    storage.saveValue(SETTINGS_INTERVAL_INACTIVITY, SETTINGS_INTERVAL_INACTIVITY_DEFAULT);
-    storage.saveValue(SETTINGS_INTERVAL_RANGE, SETTINGS_INTERVAL_RANGE_DEFAULT);
-    storage.saveValue(SETTINGS_VIEW_TIME_IN_BADGE, SETTINGS_VIEW_TIME_IN_BADGE_DEFAULT);
-    storage.saveValue(SETTINGS_BLOCK_DEFERRAL, SETTINGS_BLOCK_DEFERRAL_DEFAULT);
-    storage.saveValue(SETTINGS_DARK_MODE, SETTINGS_DARK_MODE_DEFAULT);
-    storage.saveValue(SETTINGS_INTERVAL_SAVE_STORAGE, SETTINGS_INTERVAL_SAVE_STORAGE_DEFAULT);
-    storage.saveValue(STORAGE_NOTIFICATION_MESSAGE, STORAGE_NOTIFICATION_MESSAGE_DEFAULT);
+  storage.saveValue(
+    SETTINGS_INTERVAL_INACTIVITY,
+    SETTINGS_INTERVAL_INACTIVITY_DEFAULT
+  );
+  storage.saveValue(SETTINGS_INTERVAL_RANGE, SETTINGS_INTERVAL_RANGE_DEFAULT);
+  storage.saveValue(
+    SETTINGS_VIEW_TIME_IN_BADGE,
+    SETTINGS_VIEW_TIME_IN_BADGE_DEFAULT
+  );
+  storage.saveValue(SETTINGS_BLOCK_DEFERRAL, SETTINGS_BLOCK_DEFERRAL_DEFAULT);
+  storage.saveValue(SETTINGS_DARK_MODE, SETTINGS_DARK_MODE_DEFAULT);
+  storage.saveValue(
+    SETTINGS_INTERVAL_SAVE_STORAGE,
+    SETTINGS_INTERVAL_SAVE_STORAGE_DEFAULT
+  );
+  storage.saveValue(
+    STORAGE_NOTIFICATION_MESSAGE,
+    STORAGE_NOTIFICATION_MESSAGE_DEFAULT
+  );
 }
 
 function checkSettingsImEmpty() {
-    chrome.storage.local.getBytesInUse(['inactivity_interval'], function(item) {
-        if (item == 0) {
-            setDefaultSettings();
-        }
-    });
+  chrome.storage.local.getBytesInUse(["inactivity_interval"], function (item) {
+    if (item == 0) {
+      setDefaultSettings();
+    }
+  });
 }
 
 function setDefaultValueForNewSettings() {
-    loadNotificationMessage();
+  loadNotificationMessage();
 }
 
 function addListener() {
-    chrome.tabs.onActivated.addListener(function(info) {
-        chrome.tabs.get(info.tabId, function(tab) {
-            activity.addTab(tab);
-        });
+  chrome.tabs.onActivated.addListener(function (info) {
+    chrome.tabs.get(info.tabId, function (tab) {
+      activity.addTab(tab);
     });
+  });
 
-    chrome.webNavigation.onCompleted.addListener(function(details) {
-        chrome.tabs.get(details.tabId, function(tab) {
-            activity.updateFavicon(tab);
-        });
-    });
-    chrome.runtime.onInstalled.addListener(function(details) {
-        if (details.reason == 'install') {
-            storage.saveValue(SETTINGS_SHOW_HINT, SETTINGS_SHOW_HINT_DEFAULT);
-            setDefaultSettings();
-        }
-        if (details.reason == 'update') {
-            storage.saveValue(SETTINGS_SHOW_HINT, SETTINGS_SHOW_HINT_DEFAULT);
-            checkSettingsImEmpty();
-            setDefaultValueForNewSettings();
-            isNeedDeleteTimeIntervalFromTabs = true;
-        }
-    });
-    chrome.storage.onChanged.addListener(function(changes, namespace) {
-        for (var key in changes) {
-            if (key === STORAGE_BLACK_LIST) {
-                loadBlackList();
-            }
-            if (key === STORAGE_RESTRICTION_LIST) {
-                loadRestrictionList();
-            }
-            if (key === STORAGE_NOTIFICATION_LIST) {
-                loadNotificationList();
-            }
-            if (key === STORAGE_NOTIFICATION_MESSAGE) {
-                loadNotificationMessage();
-            }
-            if (key === SETTINGS_INTERVAL_INACTIVITY) {
-                storage.getValue(SETTINGS_INTERVAL_INACTIVITY, function(item) { setting_interval_inactivity = item; });
-            }
-            if (key === SETTINGS_VIEW_TIME_IN_BADGE) {
-                storage.getValue(SETTINGS_VIEW_TIME_IN_BADGE, function(item) { setting_view_in_badge = item; });
-            }
-            if (key === SETTINGS_BLOCK_DEFERRAL) {
-                storage.getValue(SETTINGS_BLOCK_DEFERRAL, function(item) { setting_block_deferral = item; });
-            }
-            if (key === SETTINGS_DARK_MODE) {
-                storage.getValue(SETTINGS_DARK_MODE, function(item) { setting_dark_mode = item; });
-            }
-        }
+  chrome.webNavigation.onCompleted.addListener(function (details) {
+    chrome.tabs.get(details.tabId, function (tab) {
+      activity.updateFavicon(tab);
     });
+  });
+  chrome.runtime.onInstalled.addListener(function (details) {
+    if (details.reason == "install") {
+      storage.saveValue(SETTINGS_SHOW_HINT, SETTINGS_SHOW_HINT_DEFAULT);
+      setDefaultSettings();
+    }
+    if (details.reason == "update") {
+      storage.saveValue(SETTINGS_SHOW_HINT, SETTINGS_SHOW_HINT_DEFAULT);
+      checkSettingsImEmpty();
+      setDefaultValueForNewSettings();
+      isNeedDeleteTimeIntervalFromTabs = true;
+    }
+  });
+  chrome.storage.onChanged.addListener(function (changes, namespace) {
+    for (var key in changes) {
+      if (key === STORAGE_BLACK_LIST) {
+        loadBlackList();
+      }
+      if (key === STORAGE_RESTRICTION_LIST) {
+        loadRestrictionList();
+      }
+      if (key === STORAGE_NOTIFICATION_LIST) {
+        loadNotificationList();
+      }
+      if (key === STORAGE_NOTIFICATION_MESSAGE) {
+        loadNotificationMessage();
+      }
+      if (key === SETTINGS_INTERVAL_INACTIVITY) {
+        storage.getValue(SETTINGS_INTERVAL_INACTIVITY, function (item) {
+          setting_interval_inactivity = item;
+        });
+      }
+      if (key === SETTINGS_VIEW_TIME_IN_BADGE) {
+        storage.getValue(SETTINGS_VIEW_TIME_IN_BADGE, function (item) {
+          setting_view_in_badge = item;
+        });
+      }
+      if (key === SETTINGS_BLOCK_DEFERRAL) {
+        storage.getValue(SETTINGS_BLOCK_DEFERRAL, function (item) {
+          setting_block_deferral = item;
+        });
+      }
+      if (key === SETTINGS_DARK_MODE) {
+        storage.getValue(SETTINGS_DARK_MODE, function (item) {
+          setting_dark_mode = item;
+        });
+      }
+    }
+  });
 
-    chrome.runtime.setUninstallURL("https://docs.google.com/forms/d/e/1FAIpQLSdImHtvey6sg5mzsQwWfAQscgZOOV52blSf9HkywSXJhuQQHg/viewform");
+  chrome.runtime.setUninstallURL(
+    "https://docs.google.com/forms/d/e/1FAIpQLSdImHtvey6sg5mzsQwWfAQscgZOOV52blSf9HkywSXJhuQQHg/viewform"
+  );
 }
 
 function loadTabs() {
-    storage.loadTabs(STORAGE_TABS, function(items) {
-        tabs = [];
-        if (items != undefined) {
-            for (var i = 0; i < items.length; i++) {
-                tabs.push(new Tab(items[i].url, items[i].favicon, items[i].days, items[i].summaryTime, items[i].counter));
-            }
-            if (isNeedDeleteTimeIntervalFromTabs)
-                deleteTimeIntervalFromTabs();
-        }
-    });
+  storage.loadTabs(STORAGE_TABS, function (items) {
+    tabs = [];
+    if (items != undefined) {
+      for (var i = 0; i < items.length; i++) {
+        tabs.push(
+          new Tab(
+            items[i].url,
+            items[i].favicon,
+            items[i].days,
+            items[i].summaryTime,
+            items[i].counter
+          )
+        );
+      }
+      if (isNeedDeleteTimeIntervalFromTabs) deleteTimeIntervalFromTabs();
+    }
+  });
 }
 
 function deleteTimeIntervalFromTabs() {
-    tabs.forEach(function(item) {
-        item.days.forEach(function(day) {
-            if (day.time != undefined)
-                day.time = [];
-        })
-    })
+  tabs.forEach(function (item) {
+    item.days.forEach(function (day) {
+      if (day.time != undefined) day.time = [];
+    });
+  });
 }
 
 function deleteYesterdayTimeInterval() {
-    timeIntervalList = timeIntervalList.filter(x => x.day == todayLocalDate());
+  timeIntervalList = timeIntervalList.filter((x) => x.day == todayLocalDate());
 }
 
 function loadBlackList() {
-    storage.getValue(STORAGE_BLACK_LIST, function(items) {
-        setting_black_list = items;
-    })
+  storage.getValue(STORAGE_BLACK_LIST, function (items) {
+    setting_black_list = items;
+  });
 }
 
 function loadTimeIntervals() {
-    storage.getValue(STORAGE_TIMEINTERVAL_LIST, function(items) {
-        timeIntervalList = [];
-        if (items != undefined) {
-            for (var i = 0; i < items.length; i++) {
-                timeIntervalList.push(new TimeInterval(items[i].day, items[i].domain, items[i].intervals));
-            }
-            deleteYesterdayTimeInterval();
-        }
-    });
+  storage.getValue(STORAGE_TIMEINTERVAL_LIST, function (items) {
+    timeIntervalList = [];
+    if (items != undefined) {
+      for (var i = 0; i < items.length; i++) {
+        timeIntervalList.push(
+          new TimeInterval(items[i].day, items[i].domain, items[i].intervals)
+        );
+      }
+      deleteYesterdayTimeInterval();
+    }
+  });
 }
 
 function loadRestrictionList() {
-    storage.getValue(STORAGE_RESTRICTION_LIST, function(items) {
-        setting_restriction_list = items;
-    })
+  storage.getValue(STORAGE_RESTRICTION_LIST, function (items) {
+    setting_restriction_list = items;
+  });
 }
 
 function loadNotificationList() {
-    storage.getValue(STORAGE_NOTIFICATION_LIST, function(items) {
-        setting_notification_list = items;
-    });
+  storage.getValue(STORAGE_NOTIFICATION_LIST, function (items) {
+    setting_notification_list = items;
+  });
 }
 
 function loadNotificationMessage() {
-    storage.getValue(STORAGE_NOTIFICATION_MESSAGE, function(item) {
-        setting_notification_message = item;
-        if (isEmpty(setting_notification_message)) {
-            storage.saveValue(STORAGE_NOTIFICATION_MESSAGE, STORAGE_NOTIFICATION_MESSAGE_DEFAULT);
-            setting_notification_message = STORAGE_NOTIFICATION_MESSAGE_DEFAULT;
-        }
-    });
+  storage.getValue(STORAGE_NOTIFICATION_MESSAGE, function (item) {
+    setting_notification_message = item;
+    if (isEmpty(setting_notification_message)) {
+      storage.saveValue(
+        STORAGE_NOTIFICATION_MESSAGE,
+        STORAGE_NOTIFICATION_MESSAGE_DEFAULT
+      );
+      setting_notification_message = STORAGE_NOTIFICATION_MESSAGE_DEFAULT;
+    }
+  });
 }
 
 function loadSettings() {
-    storage.getValue(SETTINGS_INTERVAL_INACTIVITY, function(item) { setting_interval_inactivity = item; });
-    storage.getValue(SETTINGS_VIEW_TIME_IN_BADGE, function(item) { setting_view_in_badge = item; });
-    storage.getValue(SETTINGS_BLOCK_DEFERRAL, function(item) { setting_block_deferral = item; });
-    storage.getValue(SETTINGS_DARK_MODE, function(item) { setting_dark_mode = item; });
+  storage.getValue(SETTINGS_INTERVAL_INACTIVITY, function (item) {
+    setting_interval_inactivity = item;
+  });
+  storage.getValue(SETTINGS_VIEW_TIME_IN_BADGE, function (item) {
+    setting_view_in_badge = item;
+  });
+  storage.getValue(SETTINGS_BLOCK_DEFERRAL, function (item) {
+    setting_block_deferral = item;
+  });
+  storage.getValue(SETTINGS_DARK_MODE, function (item) {
+    setting_dark_mode = item;
+  });
 }
 
 function loadAddDataFromStorage() {
-    loadTabs();
-    loadTimeIntervals();
-    loadBlackList();
-    loadRestrictionList();
-    loadNotificationList();
-    loadNotificationMessage();
-    loadSettings();
+  loadTabs();
+  loadTimeIntervals();
+  loadBlackList();
+  loadRestrictionList();
+  loadNotificationList();
+  loadNotificationMessage();
+  loadSettings();
 }
 
 function loadPermissions() {
-    checkPermissionsForYT();
-    checkPermissionsForNetflix();
-    checkPermissionsForNotifications();
+  checkPermissionsForYT();
+  checkPermissionsForNetflix();
+  checkPermissionsForNotifications();
 }
 
 function checkPermissionsForYT(callbackIfTrue, callbackIfFalse, ...props) {
-    chrome.permissions.contains({
-        permissions: ['tabs'],
-        origins: ["https://www.youtube.com/*"]
-    }, function(result) {
-        if (callbackIfTrue != undefined && result)
-            callbackIfTrue(...props);
-        if (callbackIfFalse != undefined && !result)
-            callbackIfFalse();
-        isHasPermissioForYouTube = result;
-    });
+  chrome.permissions.contains(
+    {
+      permissions: ["tabs"],
+      origins: ["https://www.youtube.com/*"],
+    },
+    function (result) {
+      if (callbackIfTrue != undefined && result) callbackIfTrue(...props);
+      if (callbackIfFalse != undefined && !result) callbackIfFalse();
+      isHasPermissioForYouTube = result;
+    }
+  );
 }
 
 function checkPermissionsForNetflix(callbackIfTrue, callbackIfFalse, ...props) {
-    chrome.permissions.contains({
-        permissions: ['tabs'],
-        origins: ["https://www.netflix.com/*"]
-    }, function(result) {
-        if (callbackIfTrue != undefined && result)
-            callbackIfTrue(...props);
-        if (callbackIfFalse != undefined && !result)
-            callbackIfFalse();
-        isHasPermissioForNetflix = result;
-    });
+  chrome.permissions.contains(
+    {
+      permissions: ["tabs"],
+      origins: ["https://www.netflix.com/*"],
+    },
+    function (result) {
+      if (callbackIfTrue != undefined && result) callbackIfTrue(...props);
+      if (callbackIfFalse != undefined && !result) callbackIfFalse();
+      isHasPermissioForNetflix = result;
+    }
+  );
 }
 
 function checkPermissionsForNotifications(callback, ...props) {
-    chrome.permissions.contains({
-        permissions: ["notifications"]
-    }, function(result) {
-        if (callback != undefined && result)
-            callback(...props);
-        isHasPermissioForNotification = result;
-    });
+  chrome.permissions.contains(
+    {
+      permissions: ["notifications"],
+    },
+    function (result) {
+      if (callback != undefined && result) callback(...props);
+      isHasPermissioForNotification = result;
+    }
+  );
 }
 
 function createFile(data, type, fileName) {
-    var file = new Blob([data], { type: type });
-    var downloadLink;
-    downloadLink = document.createElement("a");
-    downloadLink.download = fileName;
-    downloadLink.href = window.URL.createObjectURL(file);
-    downloadLink.style.display = "none";
-    document.body.appendChild(downloadLink);
-    downloadLink.click();
-  }
-  
-  function toCsv(tabsData) {
-    var str = "domain,date,time(sec)\r\n";
-    for (var i = 0; i < tabsData.length; i++) {
-      for (var y = 0; y < tabsData[i].days.length; y++) {
-        var line =
-          tabsData[i].url +
-          "," +
-          new Date(tabsData[i].days[y].date).toLocaleDateString() +
-          "," +
-          tabsData[i].days[y].summary;
-        str += line + "\r\n";
-      }
+  var file = new Blob([data], { type: type });
+  var downloadLink;
+  downloadLink = document.createElement("a");
+  downloadLink.download = fileName;
+  downloadLink.href = window.URL.createObjectURL(file);
+  downloadLink.style.display = "none";
+  document.body.appendChild(downloadLink);
+  downloadLink.click();
+}
+
+function toCsv(tabsData) {
+  var str = "domain,date,time(sec)\r\n";
+  for (var i = 0; i < tabsData.length; i++) {
+    for (var y = 0; y < tabsData[i].days.length; y++) {
+      var line =
+        tabsData[i].url +
+        "," +
+        new Date(tabsData[i].days[y].date).toLocaleDateString() +
+        "," +
+        tabsData[i].days[y].summary;
+      str += line + "\r\n";
     }
-  
-    createFile(str, "text/csv", "domains.csv");
-  }
-  
-  function exportToCSV() {
-    storage.getValue(STORAGE_TABS, function (item) {
-      toCsv(item);
-    });
   }
-  
-  storage.getValue("SETTINGS_PERIODIC_HOUR_DOWNLOAD", function (hour) {
-    storage.getValue("SETTINGS_PERIODIC_MINUTE_DOWNLOAD", function (minute) {
-      if (typeof hour !== "number" || typeof minute !== "number") {
-        return;
-      } else {
-          autoDownloadCsv(hour, minute);
-      }
-    });
+
+  createFile(str, "text/csv", "domains.csv");
+}
+
+function exportToCSV() {
+  storage.getValue(STORAGE_TABS, function (item) {
+    toCsv(item);
   });
-  
-  function autoDownloadCsv(hour, minute) {
-    var now = new Date();
-    var triggerTime = new Date(
-      now.getFullYear(),
-      now.getMonth(),
-      now.getDate(),
-      hour,
-      minute,
-      0,
-      0
-    );
-  
-    if (triggerTime < now) {
-      triggerTime.setDate(triggerTime.getDate() + 1);
+}
+
+storage.getValue("SETTINGS_PERIODIC_HOUR_DOWNLOAD", function (hour) {
+  storage.getValue("SETTINGS_PERIODIC_MINUTE_DOWNLOAD", function (minute) {
+    if (typeof hour !== "number" || typeof minute !== "number") {
+      return;
+    } else {
+      autoDownloadCsv(hour, minute);
     }
-    chrome.alarms.create("periodic_Download", {
-      when: triggerTime.getTime(),
-      periodInMinutes: 1440, // 24 hours
-    });
-    chrome.alarms.onAlarm.addListener(function (alarm) {
-      if (alarm.name === "periodic_Download") {
-        exportToCSV();
-      }
-    });
+  });
+});
+
+function autoDownloadCsv(hour, minute) {
+  var now = new Date();
+  var triggerTime = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate(),
+    hour,
+    minute,
+    0,
+    0
+  );
+
+  if (triggerTime < now) {
+    triggerTime.setDate(triggerTime.getDate() + 1);
   }
-  
+  chrome.alarms.create("periodic_Download", {
+    when: triggerTime.getTime(),
+    periodInMinutes: 1440, // 24 hours
+  });
+  chrome.alarms.onAlarm.addListener(function (alarm) {
+    if (alarm.name === "periodic_Download") {
+      exportToCSV();
+    }
+  });
+}
+
 loadPermissions();
 addListener();
 loadAddDataFromStorage();
 updateSummaryTime();
-updateStorage();
\ No newline at end of file
+updateStorage();
+
+chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
+  console.log("chrome listener triggered in background.js");
+  if (request.action === "sendBrowserActivityData") {
+    console.log("triggering sendBrowserActivityData function");
+    sendBrowserActivityData();
+  }
+});
+
+// background.js
+
+async function sendBrowserActivityData() {
+  // const tabsData = getTabsData();
+  const currentDate = new Date().toLocaleDateString("en-US"); // Get the current date in mm/dd/yyyy format
+  const dailyActivities = [];
+
+  // Iterate through the tabsData and create DailyActivity objects
+  for (const tabData of tabs) {
+    for (const day of tabData.days) {
+      console.log(day.date, currentDate);
+      if (day.date === currentDate) {
+        console.log("triggered");
+        dailyActivities.push({
+          url: tabData.url,
+          date: currentDate,
+          seconds: day.summary,
+        });
+      }
+    }
+  }
+
+  const baseUrl = 'http://3.92.212.148:8094/api/v1/dailyActivity/addActivities';
+
+  const param1 = "computer1"
+
+  const urlWithParams = `${baseUrl}?computer=${encodeURIComponent(param1)}`;
+
+  // Send the dailyActivities list to the backend
+  const response = await fetch(urlWithParams, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(dailyActivities),
+  });
+
+  // Parse the response as JSON
+  const responseData = await response.json();
+
+  console.log(responseData);
+
+  // Send the message back to the content script
+  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    chrome.tabs.sendMessage(tabs[0].id, { action: 'updateBackendMessage', message: responseData.message });
+  });
+}
diff --git a/src/scripts/ui.js b/src/scripts/ui.js
index 443c03d..623dffb 100644
--- a/src/scripts/ui.js
+++ b/src/scripts/ui.js
@@ -1,413 +1,541 @@
-'use strict';
+"use strict";
 
 class UI {
-    getTableOfSite() {
-        return document.getElementById('resultTable');
+  getTableOfSite() {
+    return document.getElementById("resultTable");
+  }
+
+  setUIForToday() {
+    document.getElementById("btnToday").classList.add("active");
+    document.getElementById("btnAll").classList.remove("active");
+    document.getElementById("btnByDays").classList.remove("active");
+    document.getElementById("btnSendData").classList.remove("active");
+    document.getElementById("blockForChartBtn").classList.remove("hide");
+    document.getElementById("stats").classList.add("hide");
+    document.getElementById("labelForTimeInterval").classList.add("hide");
+    this.setUIForDonutChart();
+
+    this.clearUI();
+  }
+
+  setUIForAll() {
+    document.getElementById("btnAll").classList.add("active");
+    document.getElementById("btnToday").classList.remove("active");
+    document.getElementById("btnByDays").classList.remove("active");
+    document.getElementById("btnSendData").classList.remove("active");
+    document.getElementById("blockForChartBtn").classList.add("hide");
+    document.getElementById("stats").classList.remove("hide");
+    document.getElementById("labelForTimeInterval").classList.add("hide");
+
+    this.clearUI();
+  }
+
+  setUIForByDays(range) {
+    document.getElementById("btnByDays").classList.add("active");
+    document.getElementById("btnAll").classList.remove("active");
+    document.getElementById("btnToday").classList.remove("active");
+    document.getElementById("btnSendData").classList.remove("active");
+    document.getElementById("blockForChartBtn").classList.add("hide");
+    document.getElementById("stats").classList.add("hide");
+    document.getElementById("labelForTimeInterval").classList.add("hide");
+
+    this.clearUI();
+    this.addBlockForCalendar(range);
+  }
+
+  clearUI() {
+    document.getElementById("resultTable").innerHTML = null;
+    document.getElementById("chart").innerHTML = null;
+    document.getElementById("timeChart").innerHTML = null;
+    document.getElementById("byDays").innerHTML = null;
+    document.getElementById("sendDataPage").style.display = "none";
+  }
+
+  setUIForDonutChart() {
+    document.getElementById("donutChartBtn").classList.add("active");
+    document.getElementById("heatMapChartBtn").classList.remove("active");
+    document.getElementById("timeChart").innerHTML = null;
+    document.getElementById("labelForTimeInterval").classList.add("hide");
+  }
+
+  setUIForTimeChart() {
+    document.getElementById("donutChartBtn").classList.remove("active");
+    document.getElementById("heatMapChartBtn").classList.add("active");
+    document.getElementById("chart").innerHTML = null;
+    document.getElementById("labelForTimeInterval").classList.remove("hide");
+  }
+
+  setUIForSendData() {
+    document.getElementById('btnSendData').classList.add('active');
+    
+    // Remove the 'active' class from the other buttons
+    document.getElementById('btnToday').classList.remove('active');
+    document.getElementById('btnAll').classList.remove('active');
+    document.getElementById('btnByDays').classList.remove('active');
+    
+    // Hide the unnecessary elements
+    document.getElementById('blockForChartBtn').classList.add('hide');
+    document.getElementById('stats').classList.add('hide');
+    document.getElementById('labelForTimeInterval').classList.add('hide');
+
+    // Clear the UI
+    this.clearUI();
+
+    // Hide the main content and show the send data page
+    document.getElementById("sendDataPage").style.display = "block";
+  }
+
+  fillEmptyBlock(elementName) {
+    document.getElementById(elementName).innerHTML =
+      '<p class="no-data">No data</p>';
+  }
+
+  fillEmptyBlockForDaysIfInvalid() {
+    document.getElementById("tableForDaysBlock").innerHTML =
+      '<p class="no-data">Invalid date</p>';
+  }
+
+  fillEmptyBlockForDays() {
+    document.getElementById("tableForDaysBlock").innerHTML =
+      '<p class="no-data">No data</p>';
+  }
+
+  addHrAfterChart() {
+    document.getElementById("chart").appendChild(document.createElement("hr"));
+  }
+
+  setActiveTooltipe(currentTab) {
+    if (currentTab !== "") {
+      var element = document.getElementById(currentTab);
+      if (element !== null) {
+        var event = new Event("mouseenter");
+        document.getElementById(currentTab).dispatchEvent(event);
+      }
     }
-
-    setUIForToday() {
-        document.getElementById('btnToday').classList.add('active');
-        document.getElementById('btnAll').classList.remove('active');
-        document.getElementById('btnByDays').classList.remove('active');
-        document.getElementById('blockForChartBtn').classList.remove('hide');
-        document.getElementById('stats').classList.add('hide');
-        document.getElementById('labelForTimeInterval').classList.add('hide');
-        this.setUIForDonutChart();
-
-        this.clearUI();
-    }
-
-    setUIForAll() {
-        document.getElementById('btnAll').classList.add('active');
-        document.getElementById('btnToday').classList.remove('active');
-        document.getElementById('btnByDays').classList.remove('active');
-        document.getElementById('blockForChartBtn').classList.add('hide');
-        document.getElementById('stats').classList.remove('hide');
-        document.getElementById('labelForTimeInterval').classList.add('hide');
-
-        this.clearUI();
-    }
-
-    setUIForByDays(range) {
-        document.getElementById('btnByDays').classList.add('active');
-        document.getElementById('btnAll').classList.remove('active');
-        document.getElementById('btnToday').classList.remove('active');
-        document.getElementById('blockForChartBtn').classList.add('hide');
-        document.getElementById('stats').classList.add('hide');
-        document.getElementById('labelForTimeInterval').classList.add('hide');
-
-        this.clearUI();
-        this.addBlockForCalendar(range);
-    }
-
-    clearUI() {
-        document.getElementById('resultTable').innerHTML = null;
-        document.getElementById('chart').innerHTML = null;
-        document.getElementById('timeChart').innerHTML = null;
-        document.getElementById('byDays').innerHTML = null;
-    }
-
-    setUIForDonutChart() {
-        document.getElementById('donutChartBtn').classList.add('active');
-        document.getElementById('heatMapChartBtn').classList.remove('active');
-        document.getElementById('timeChart').innerHTML = null;
-        document.getElementById('labelForTimeInterval').classList.add('hide');
-    }
-
-    setUIForTimeChart() {
-        document.getElementById('donutChartBtn').classList.remove('active');
-        document.getElementById('heatMapChartBtn').classList.add('active');
-        document.getElementById('chart').innerHTML = null;
-        document.getElementById('labelForTimeInterval').classList.remove('hide');
-    }
-
-    fillEmptyBlock(elementName) {
-        document.getElementById(elementName).innerHTML = '<p class="no-data">No data</p>';
-    }
-
-    fillEmptyBlockForDaysIfInvalid() {
-        document.getElementById('tableForDaysBlock').innerHTML = '<p class="no-data">Invalid date</p>';
-    }
-
-    fillEmptyBlockForDays() {
-        document.getElementById('tableForDaysBlock').innerHTML = '<p class="no-data">No data</p>';
+  }
+
+  drawChart(tabs) {
+    var donut = donutChart()
+      .width(550)
+      .height(230)
+      .cornerRadius(5) // sets how rounded the corners are on each slice
+      .padAngle(0.02) // effectively dictates the gap between slices
+      .variable("percentage")
+      .category("url");
+
+    if (setting_dark_mode) donut.darkMode(true);
+    else donut.darkMode(false);
+
+    d3.select("#chart")
+      .datum(tabs) // bind data to the div
+      .call(donut); // draw chart in div
+  }
+
+  drawTimeChart(tabs) {
+    drawIntervalChart(tabs);
+  }
+
+  drawBarChart(days) {
+    d3.select("#barChart").datum(days);
+    barChart(days, setting_dark_mode);
+  }
+
+  addTableHeader(currentTypeOfList, counterOfSite, totalTime, totalDays) {
+    function fillSummaryTime(totalTime) {
+      let arrayTime = getArrayTime(totalTime);
+      let stringTime = "";
+      if (arrayTime.days > 0) stringTime += arrayTime.days + " days ";
+      stringTime += arrayTime.hours + " hours ";
+      stringTime += arrayTime.mins + " minutes ";
+      return stringTime;
     }
 
-    addHrAfterChart() {
-        document.getElementById('chart').appendChild(document.createElement('hr'));
+    var p = document.createElement("p");
+    p.classList.add("table-header");
+    if (currentTypeOfList === TypeListEnum.ToDay)
+      p.innerHTML = `Today (${counterOfSite} sites) <br> <strong>${convertShortSummaryTimeToLongString(
+        totalTime
+      )}</strong>`;
+    if (currentTypeOfList === TypeListEnum.All && totalDays !== undefined) {
+      if (totalDays.countOfDays > 0) {
+        p.innerHTML =
+          "Aggregate data since " +
+          new Date(totalDays.minDate).toLocaleDateString() +
+          " (" +
+          totalDays.countOfDays +
+          " days) (" +
+          counterOfSite +
+          " sites) <br> <strong>" +
+          fillSummaryTime(totalTime) +
+          "</strong>";
+      } else {
+        p.innerHTML =
+          "Aggregate data since " +
+          new Date().toLocaleDateString() +
+          " (" +
+          counterOfSite +
+          " sites) <br>  <strong>" +
+          convertShortSummaryTimeToLongString(totalTime) +
+          "</strong>";
+      }
     }
 
-
-    setActiveTooltipe(currentTab) {
-        if (currentTab !== '') {
-            var element = document.getElementById(currentTab);
-            if (element !== null) {
-                var event = new Event("mouseenter");
-                document.getElementById(currentTab).dispatchEvent(event);
-            }
+    this.getTableOfSite().appendChild(p);
+  }
+
+  addLineToTableOfSite(
+    tab,
+    currentTab,
+    summaryTime,
+    typeOfList,
+    counter,
+    blockName
+  ) {
+    var div = document.createElement("div");
+    var tabUrlString = tab.url;
+    div.addEventListener("mouseenter", function () {
+      if (document.getElementById("chart").innerHTML !== "") {
+        var item = document.getElementById(tab.url);
+        if (item !== null) {
+          item.dispatchEvent(new Event("mouseenter"));
+          item.classList.add("mouse-over");
+        } else {
+          document
+            .getElementById("Others")
+            .dispatchEvent(new Event("mouseenter"));
+          document.getElementById("Others").classList.add("mouse-over");
         }
+      }
+    });
+    div.addEventListener("mouseout", function () {
+      if (document.getElementById("chart").innerHTML !== "") {
+        var item = document.getElementById(tab.url);
+        if (item !== null) {
+          item.classList.remove("mouse-over");
+        } else document.getElementById("Others").classList.remove("mouse-over");
+      }
+    });
+    div.classList.add("inline-flex");
+
+    var divForImg = document.createElement("div");
+    var img = document.createElement("img");
+    img.setAttribute("height", 27);
+    if (tab.favicon !== undefined || tab.favicon == null)
+      img.setAttribute("src", tab.favicon);
+    else img.setAttribute("src", "/icons/empty.png");
+    divForImg.classList.add("block-img");
+    divForImg.appendChild(img);
+
+    var divForPath = document.createElement("div");
+
+    var url = this.createElement("p", ["p-url"], tabUrlString);
+    url.setAttribute("href", "https://" + tabUrlString);
+    url.addEventListener("click", function (e) {
+      if (e.target.attributes.href.value != undefined)
+        chrome.tabs.create({ url: e.target.attributes.href.value });
+    });
+
+    var visits = this.createElement(
+      "p",
+      ["p-visits"],
+      (function () {
+        if (counter == 0) return "0 visits";
+        if (counter > 1) return `${counter} visits`;
+        if (counter == 1) return `${counter} visit`;
+      })()
+    );
+
+    divForPath.appendChild(url);
+    divForPath.appendChild(visits);
+
+    if (tab.url == currentTab) {
+      var divForImage = document.createElement("div");
+      div.classList.add("span-active-url");
+      var imgCurrentDomain = document.createElement("img");
+      imgCurrentDomain.setAttribute("src", "/icons/eye.png");
+      imgCurrentDomain.setAttribute("height", 20);
+      imgCurrentDomain.classList.add("margin-left-5");
+      divForImage.appendChild(imgCurrentDomain);
+      var currentDomainTooltip = this.createElement(
+        "span",
+        ["tooltiptext"],
+        "Current domain"
+      );
+      divForImage.classList.add("tooltip", "current-url");
+      divForImage.appendChild(currentDomainTooltip);
+      url.appendChild(divForImage);
     }
 
-    drawChart(tabs) {
-        var donut = donutChart()
-            .width(550)
-            .height(230)
-            .cornerRadius(5) // sets how rounded the corners are on each slice
-            .padAngle(0.020) // effectively dictates the gap between slices
-            .variable('percentage')
-            .category('url');
-
-        if (setting_dark_mode)
-            donut.darkMode(true);
-        else donut.darkMode(false);
-
-        d3.select('#chart')
-            .datum(tabs) // bind data to the div
-            .call(donut); // draw chart in div
-    }
-
-    drawTimeChart(tabs) {
-        drawIntervalChart(tabs);
-    }
-
-    drawBarChart(days) {
-        d3.select('#barChart').datum(days);
-        barChart(days, setting_dark_mode);
-    }
-
-    addTableHeader(currentTypeOfList, counterOfSite, totalTime, totalDays) {
-        function fillSummaryTime(totalTime){
-            let arrayTime = getArrayTime(totalTime);
-            let stringTime = '';
-            if (arrayTime.days > 0) stringTime += arrayTime.days + ' days ';
-            stringTime += arrayTime.hours + ' hours ';
-            stringTime += arrayTime.mins + ' minutes ';
-            return stringTime;
-        }
-
-        var p = document.createElement('p');
-        p.classList.add('table-header');
-        if (currentTypeOfList === TypeListEnum.ToDay)
-            p.innerHTML = `Today (${counterOfSite} sites) <br> <strong>${convertShortSummaryTimeToLongString(totalTime)}</strong>`;
-        if (currentTypeOfList === TypeListEnum.All && totalDays !== undefined) {
-            if (totalDays.countOfDays > 0) {
-                p.innerHTML = 'Aggregate data since ' + new Date(totalDays.minDate).toLocaleDateString() + ' (' + totalDays.countOfDays + ' days) (' + counterOfSite + ' sites) <br> <strong>' + fillSummaryTime(totalTime)  + '</strong>';
-            } else {
-                p.innerHTML = 'Aggregate data since ' + new Date().toLocaleDateString() + ' (' + counterOfSite + ' sites) <br>  <strong>' + convertShortSummaryTimeToLongString(totalTime)  + '</strong>';
-            }
+    if (typeOfList !== undefined && typeOfList === TypeListEnum.ToDay) {
+      if (restrictionList !== undefined && restrictionList.length > 0) {
+        var item = restrictionList.find((x) =>
+          isDomainEquals(x.domain, tab.url)
+        );
+        if (item !== undefined) {
+          var divLimit = this.createElement("div", ["tooltip", "inline-block"]);
+          var limitIcon = this.createElement("img", [
+            "margin-left-5",
+            "tooltip",
+          ]);
+          limitIcon.height = 20;
+          limitIcon.src = "/icons/limit.png";
+          var tooltip = this.createElement(
+            "span",
+            ["tooltiptext"],
+            "Daily limit is " + convertShortSummaryTimeToLongString(item.time)
+          );
+          divLimit = this.appendChild(divLimit, [limitIcon, tooltip]);
+          url.appendChild(divLimit);
         }
-
-        this.getTableOfSite().appendChild(p);
+      }
     }
 
-    addLineToTableOfSite(tab, currentTab, summaryTime, typeOfList, counter, blockName) {
-        var div = document.createElement('div');
-        var tabUrlString = tab.url;
-        div.addEventListener('mouseenter', function() {
-            if (document.getElementById('chart').innerHTML !== '') {
-                var item = document.getElementById(tab.url);
-                if (item !== null) {
-                    item.dispatchEvent(new Event('mouseenter'));
-                    item.classList.add('mouse-over');
-                } else {
-                    document.getElementById('Others').dispatchEvent(new Event('mouseenter'));
-                    document.getElementById('Others').classList.add('mouse-over');
-                }
-            }
-        });
-        div.addEventListener('mouseout', function() {
-            if (document.getElementById('chart').innerHTML !== '') {
-                var item = document.getElementById(tab.url);
-                if (item !== null) {
-                    item.classList.remove('mouse-over');
-                } else document.getElementById('Others').classList.remove('mouse-over');
-            }
-        });
-        div.classList.add('inline-flex');
-
-        var divForImg = document.createElement('div');
-        var img = document.createElement('img');
-        img.setAttribute('height', 27);
-        if (tab.favicon !== undefined || tab.favicon == null)
-            img.setAttribute('src', tab.favicon);
-        else img.setAttribute('src', '/icons/empty.png');
-        divForImg.classList.add('block-img');
-        divForImg.appendChild(img);
-
-        var divForPath = document.createElement('div');
-
-        var url = this.createElement('p', ['p-url'], tabUrlString);
-        url.setAttribute('href', 'https://' + tabUrlString);
-        url.addEventListener('click', function(e){
-            if (e.target.attributes.href.value != undefined)
-                chrome.tabs.create({ url: e.target.attributes.href.value })
-        })
-
-        var visits = this.createElement('p', ['p-visits'], function() {
-            if (counter == 0) return '0 visits';
-            if (counter > 1) return `${counter} visits`;
-            if (counter == 1) return `${counter} visit`;
-        }());
-
-        divForPath.appendChild(url);
-        divForPath.appendChild(visits);
-
-        if (tab.url == currentTab) {
-            var divForImage = document.createElement('div');
-            div.classList.add('span-active-url');
-            var imgCurrentDomain = document.createElement('img');
-            imgCurrentDomain.setAttribute('src', '/icons/eye.png');
-            imgCurrentDomain.setAttribute('height', 20);
-            imgCurrentDomain.classList.add('margin-left-5');
-            divForImage.appendChild(imgCurrentDomain);
-            var currentDomainTooltip = this.createElement('span', ['tooltiptext'], 'Current domain');
-            divForImage.classList.add('tooltip', 'current-url');
-            divForImage.appendChild(currentDomainTooltip);
-            url.appendChild(divForImage);
-        }
-
-        if (typeOfList !== undefined && typeOfList === TypeListEnum.ToDay) {
-            if (restrictionList !== undefined && restrictionList.length > 0) {
-                var item = restrictionList.find(x => isDomainEquals(x.domain, tab.url));
-                if (item !== undefined) {
-                    var divLimit = this.createElement('div', ['tooltip', 'inline-block']);
-                    var limitIcon = this.createElement('img', ['margin-left-5', 'tooltip']);
-                    limitIcon.height = 20;
-                    limitIcon.src = '/icons/limit.png';
-                    var tooltip = this.createElement('span', ['tooltiptext'], "Daily limit is " + convertShortSummaryTimeToLongString(item.time));
-                    divLimit = this.appendChild(divLimit, [limitIcon, tooltip]);
-                    url.appendChild(divLimit);
-                }
-            }
-        }
-
-        var spanPercentage = this.createElement('span', ['span-percentage'], getPercentage(summaryTime));
-        var spanTime = this.createElement('span', ['span-time']);
-        this.createElementsForTotalTime(summaryTime, typeOfList, spanTime);
-
-        div = this.appendChild(div, [divForImg, divForPath, spanPercentage, spanTime]);
-        if (blockName !== undefined)
-            document.getElementById(blockName).appendChild(div);
-        else
-            this.getTableOfSite().appendChild(div);
+    var spanPercentage = this.createElement(
+      "span",
+      ["span-percentage"],
+      getPercentage(summaryTime)
+    );
+    var spanTime = this.createElement("span", ["span-time"]);
+    this.createElementsForTotalTime(summaryTime, typeOfList, spanTime);
+
+    div = this.appendChild(div, [
+      divForImg,
+      divForPath,
+      spanPercentage,
+      spanTime,
+    ]);
+    if (blockName !== undefined)
+      document.getElementById(blockName).appendChild(div);
+    else this.getTableOfSite().appendChild(div);
+  }
+
+  createElementsForTotalTime(summaryTime, typeOfList, parentElement) {
+    var arr = getArrayTime(summaryTime);
+    var isNextPartActiv = false;
+    var getCssClass = function (item) {
+      if (item > 0) {
+        isNextPartActiv = true;
+        return ["span-active-time"];
+      } else {
+        if (isNextPartActiv) return ["span-active-time"];
+        return null;
+      }
+    };
+    if (typeOfList === TypeListEnum.All) {
+      var spanForDays = this.createElement(
+        "span",
+        getCssClass(arr.days),
+        arr.days + "d "
+      );
+      this.appendChild(parentElement, [spanForDays]);
     }
-
-    createElementsForTotalTime(summaryTime, typeOfList, parentElement) {
-        var arr = getArrayTime(summaryTime);
-        var isNextPartActiv = false;
-        var getCssClass = function(item) {
-            if (item > 0) {
-                isNextPartActiv = true;
-                return ['span-active-time'];
-            } else {
-                if (isNextPartActiv)
-                    return ['span-active-time'];
-                return null;
-            }
-        };
-        if (typeOfList === TypeListEnum.All) {
-            var spanForDays = this.createElement('span', getCssClass(arr.days), arr.days + 'd ');
-            this.appendChild(parentElement, [spanForDays]);
-        }
-        var spanForHour = this.createElement('span', getCssClass(arr.hours), arr.hours + 'h ');
-        var spanForMin = this.createElement('span', getCssClass(arr.mins), arr.mins + 'm ');
-        var spanForSec = this.createElement('span', getCssClass(arr.seconds), arr.seconds + 's ');
-        this.appendChild(parentElement, [spanForHour, spanForMin, spanForSec]);
+    var spanForHour = this.createElement(
+      "span",
+      getCssClass(arr.hours),
+      arr.hours + "h "
+    );
+    var spanForMin = this.createElement(
+      "span",
+      getCssClass(arr.mins),
+      arr.mins + "m "
+    );
+    var spanForSec = this.createElement(
+      "span",
+      getCssClass(arr.seconds),
+      arr.seconds + "s "
+    );
+    this.appendChild(parentElement, [spanForHour, spanForMin, spanForSec]);
+  }
+
+  addExpander() {
+    if (document.getElementById("expander") === null) {
+      var div = this.createElement("div", ["expander"], "Show all");
+      div.id = "expander";
+      div.addEventListener("click", function () {
+        ui.expand();
+      });
+      this.getTableOfSite().appendChild(div);
     }
-
-    addExpander() {
-        if (document.getElementById('expander') === null) {
-            var div = this.createElement('div', ['expander'], 'Show all');
-            div.id = 'expander';
-            div.addEventListener('click', function() {
-                ui.expand();
-            });
-            this.getTableOfSite().appendChild(div);
-        }
-    }
-
-    expand() {
-        getTabsForExpander();
-        this.getTableOfSite().removeChild(document.getElementById('expander'));
+  }
+
+  expand() {
+    getTabsForExpander();
+    this.getTableOfSite().removeChild(document.getElementById("expander"));
+  }
+
+  addBlockForCalendar(range) {
+    var div = document.getElementById("byDays");
+    var barChart = document.createElement("div");
+    barChart.id = "barChart";
+
+    var from = this.createElement("span", null, "From");
+    var to = this.createElement("span", null, "To");
+
+    var calendarFirst = document.createElement("input");
+    calendarFirst.id = "dateFrom";
+    calendarFirst.type = "date";
+    var previousDate = new Date();
+    previousDate.setDate(previousDate.getDate() - getDateFromRange(range));
+    calendarFirst.valueAsDate = new Date(
+      Date.UTC(
+        previousDate.getFullYear(),
+        previousDate.getMonth(),
+        previousDate.getDate()
+      )
+    );
+
+    var calendarTwo = document.createElement("input");
+    calendarTwo.id = "dateTo";
+    calendarTwo.type = "date";
+    calendarTwo.valueAsDate = new Date(
+      Date.UTC(
+        new Date().getFullYear(),
+        new Date().getMonth(),
+        new Date().getDate()
+      )
+    );
+
+    var tableForDaysBlock = document.createElement("div");
+    tableForDaysBlock.id = "tableForDaysBlock";
+
+    div = this.appendChild(div, [
+      barChart,
+      from,
+      calendarFirst,
+      to,
+      calendarTwo,
+    ]);
+
+    div.append(tableForDaysBlock);
+
+    document.getElementById("dateFrom").addEventListener("change", function () {
+      getTabsByDays(tabsFromStorage);
+    });
+
+    document.getElementById("dateTo").addEventListener("change", function () {
+      getTabsByDays(tabsFromStorage);
+    });
+  }
+
+  getDateRange() {
+    return {
+      from: new Date(document.getElementById("dateFrom").value),
+      to: new Date(document.getElementById("dateTo").value),
+    };
+  }
+
+  fillListOfDays(days, allDays) {
+    var parent = document.getElementById("tableForDaysBlock");
+    parent.innerHTML = null;
+    document.getElementById("barChart").innerHTML = null;
+    if (days.length > 0) {
+      var daysForBarChart = this.fillDaysForBarChart(days, allDays);
+      this.drawBarChart(daysForBarChart);
+
+      var header = this.createElement("div", ["table-header"]);
+
+      var headerTitleDate = this.createElement(
+        "span",
+        ["header-title-day"],
+        "Day"
+      );
+      var headerTitleTime = this.createElement(
+        "span",
+        ["header-title-time"],
+        "Summary time"
+      );
+
+      header = this.appendChild(header, [headerTitleDate, headerTitleTime]);
+      parent.appendChild(header);
+
+      for (var i = 0; i < days.length; i++) {
+        var check = this.createElement("input", ["toggle"]);
+        check.type = "checkbox";
+        check.id = days[i].date;
+
+        var label = this.createElement("label", ["day-block", "lbl-toggle"]);
+        label.setAttribute("for", days[i].date);
+        var span = this.createElement(
+          "p",
+          ["day"],
+          new Date(days[i].date).toLocaleDateString()
+        );
+        var spanTime = this.createElement("p", ["span-time"]);
+        this.createElementsForTotalTime(
+          days[i].total,
+          TypeListEnum.ByDays,
+          spanTime
+        );
+
+        label = this.appendChild(label, [span, spanTime]);
+        parent = this.appendChild(parent, [check, label]);
+
+        var div = this.createElement(
+          "div",
+          ["collapsible-content"],
+          convertSummaryTimeToString(days[i].total)
+        );
+        div.id = days[i].date + "_block";
+        parent.appendChild(div);
+
+        document
+          .getElementById(days[i].date)
+          .addEventListener("click", function () {
+            var element = document.getElementById(this.id + "_block");
+            element.innerHTML = null;
+            getTabsFromStorageByDay(this.id, this.id + "_block");
+          });
+      }
+    } else {
+      this.fillEmptyBlock("tableForDaysBlock");
     }
-
-    addBlockForCalendar(range) {
-        var div = document.getElementById('byDays');
-        var barChart = document.createElement('div');
-        barChart.id = 'barChart';
-
-        var from = this.createElement('span', null, 'From');
-        var to = this.createElement('span', null, 'To');
-
-        var calendarFirst = document.createElement('input');
-        calendarFirst.id = 'dateFrom';
-        calendarFirst.type = 'date';
-        var previousDate = new Date();
-        previousDate.setDate(previousDate.getDate() - getDateFromRange(range));
-        calendarFirst.valueAsDate = new Date(Date.UTC(previousDate.getFullYear(), previousDate.getMonth(), previousDate.getDate()));
-
-        var calendarTwo = document.createElement('input');
-        calendarTwo.id = 'dateTo';
-        calendarTwo.type = 'date';
-        calendarTwo.valueAsDate = new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()));
-
-        var tableForDaysBlock = document.createElement('div');
-        tableForDaysBlock.id = 'tableForDaysBlock';
-
-        div = this.appendChild(div, [barChart, from, calendarFirst, to, calendarTwo]);
-
-        div.append(tableForDaysBlock);
-
-        document.getElementById('dateFrom').addEventListener('change', function() {
-            getTabsByDays(tabsFromStorage);
+  }
+
+  fillDaysForBarChart(days, allDays) {
+    var resultList = [];
+    allDays.forEach((element) => {
+      var day = days.find((x) => x.date == element);
+      if (day !== undefined) {
+        resultList.push({
+          date: day.date,
+          total: day.total,
         });
-
-        document.getElementById('dateTo').addEventListener('change', function() {
-            getTabsByDays(tabsFromStorage);
+      } else
+        resultList.push({
+          date: element,
+          total: 0,
         });
-    }
-
-    getDateRange() {
-        return {
-            'from': new Date(document.getElementById('dateFrom').value),
-            'to': new Date(document.getElementById('dateTo').value)
-        };
-    }
-
-    fillListOfDays(days, allDays) {
-        var parent = document.getElementById('tableForDaysBlock');
-        parent.innerHTML = null;
-        document.getElementById('barChart').innerHTML = null;
-        if (days.length > 0) {
-            var daysForBarChart = this.fillDaysForBarChart(days, allDays);
-            this.drawBarChart(daysForBarChart);
-
-            var header = this.createElement('div', ['table-header']);
+    });
 
-            var headerTitleDate = this.createElement('span', ['header-title-day'], 'Day');
-            var headerTitleTime = this.createElement('span', ['header-title-time'], 'Summary time');
+    return resultList;
+  }
 
-            header = this.appendChild(header, [headerTitleDate, headerTitleTime]);
-            parent.appendChild(header);
-
-            for (var i = 0; i < days.length; i++) {
-                var check = this.createElement('input', ['toggle']);
-                check.type = 'checkbox';
-                check.id = days[i].date;
-
-                var label = this.createElement('label', ['day-block', 'lbl-toggle']);
-                label.setAttribute('for', days[i].date);
-                var span = this.createElement('p', ['day'], new Date(days[i].date).toLocaleDateString());
-                var spanTime = this.createElement('p', ['span-time']);
-                this.createElementsForTotalTime(days[i].total, TypeListEnum.ByDays, spanTime);
-
-                label = this.appendChild(label, [span, spanTime]);
-                parent = this.appendChild(parent, [check, label]);
-
-                var div = this.createElement('div', ['collapsible-content'], convertSummaryTimeToString(days[i].total));
-                div.id = days[i].date + '_block';
-                parent.appendChild(div);
-
-                document.getElementById(days[i].date).addEventListener('click', function() {
-                    var element = document.getElementById(this.id + '_block');
-                    element.innerHTML = null;
-                    getTabsFromStorageByDay(this.id, this.id + '_block')
-                });
-            }
-
-        } else {
-            this.fillEmptyBlock('tableForDaysBlock');
-        }
+  createElement(type, css, innerText) {
+    var element = document.createElement(type);
+    if (css !== undefined && css !== null) {
+      for (let i = 0; i < css.length; i++) element.classList.add(css[i]);
     }
+    if (innerText !== undefined) element.innerHTML = innerText;
 
-    fillDaysForBarChart(days, allDays) {
-        var resultList = [];
-        allDays.forEach(element => {
-            var day = days.find(x => x.date == element);
-            if (day !== undefined) {
-                resultList.push({
-                    'date': day.date,
-                    'total': day.total
-                });
-            } else resultList.push({
-                'date': element,
-                'total': 0
-            });
-        });
+    return element;
+  }
 
-        return resultList;
-    }
+  appendChild(element, children) {
+    for (let i = 0; i < children.length; i++) element.appendChild(children[i]);
 
-    createElement(type, css, innerText) {
-        var element = document.createElement(type);
-        if (css !== undefined && css !== null) {
-            for (let i = 0; i < css.length; i++)
-                element.classList.add(css[i]);
-        }
-        if (innerText !== undefined)
-            element.innerHTML = innerText;
+    return element;
+  }
 
-        return element;
-    }
+  setPreloader() {
+    document.getElementById("preloader").classList.add("preloader");
+  }
 
-    appendChild(element, children) {
-        for (let i = 0; i < children.length; i++)
-            element.appendChild(children[i]);
+  setMode() {
+    if (setting_dark_mode) document.body.classList.add("dark-mode");
+  }
 
-        return element;
-    }
-
-    setPreloader() {
-        document.getElementById('preloader').classList.add('preloader');
-    }
-
-    setMode(){
-        if (setting_dark_mode)
-            document.body.classList.add('dark-mode');
-    }
-
-    removePreloader() {
-        document.getElementById('preloader').classList.remove('preloader');
-        document.getElementById('preloader').classList.add('hide');
-    }
-}
\ No newline at end of file
+  removePreloader() {
+    document.getElementById("preloader").classList.remove("preloader");
+    document.getElementById("preloader").classList.add("hide");
+  }
+}
diff --git a/src/scripts/webact.js b/src/scripts/webact.js
index 9082ed6..36a8a3b 100644
--- a/src/scripts/webact.js
+++ b/src/scripts/webact.js
@@ -87,34 +87,42 @@ document.addEventListener('DOMContentLoaded', function () {
         ui.setUIForToday();
         getDataFromStorage();
     });
+
     document.getElementById('donutChartBtn').addEventListener('click', function () {
         ui.setUIForDonutChart();
         getDataFromStorage();
     });
+
     document.getElementById('heatMapChartBtn').addEventListener('click', function () {
         ui.setUIForTimeChart();
         getTimeIntervalList();
     });
+
     document.getElementById('btnAll').addEventListener('click', function () {
         currentTypeOfList = TypeListEnum.All;
         ui.setUIForAll();
         getDataFromStorage();
     });
+
     document.getElementById('btnByDays').addEventListener('click', function () {
         currentTypeOfList = TypeListEnum.ByDays;
         ui.setUIForByDays(setting_range_days);
         getDataFromStorageByDays();
     });
+
     document.getElementById('statInActiveDayIcon').addEventListener('click', function () {
         fillBlockWithInActiveDay();
     });
+
     document.getElementById('statActiveDayIcon').addEventListener('click', function () {
         fillBlockWithActiveDay();
     });
+
     document.getElementById('closeHintBtn').addEventListener('click', function () {
         document.getElementById('hintForUsers').classList.add('hide');
         storage.saveValue(SETTINGS_SHOW_HINT, false);
     });
+
     document.getElementById('settings').addEventListener('click', function () {
         if (chrome.runtime.openOptionsPage) {
             chrome.runtime.openOptionsPage();
@@ -122,6 +130,17 @@ document.addEventListener('DOMContentLoaded', function () {
             window.open(chrome.runtime.getURL('options.html'));
         }
     });
+
+    document.getElementById('btnSendData').addEventListener('click', function () {
+        // Call a method from ui.js to handle the UI update
+        ui.setUIForSendData();
+    });
+
+    document.getElementById('btnSendDataToBackend').addEventListener('click', function () {
+        // Call a method from ui.js to handle the UI update
+
+        chrome.runtime.sendMessage({ action: "sendBrowserActivityData" });
+    });
 });
 
 firstInitPage();
@@ -556,4 +575,6 @@ function fillValuesForBlockWithInActiveDay(prefix, dayValue, timeValue, flag) {
         document.getElementById(prefix).value = dayValue;
         document.getElementById(prefix + 'Time').value = timeValue;
     }
-}
\ No newline at end of file
+}
+
+