diff --git a/src/index.css b/src/index.css
index 77bed34..ef92db3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,88 +1,443 @@
+@import "tailwindcss";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
-	margin: 0;
-	padding: 0;
-	background-color: rgba(251, 251, 251, 0.6);
+    margin: 0;
+    padding: 0;
+    background-color: rgba(251, 251, 251, 0.6);
 }
 
 * {
-	box-sizing: border-box;
+    box-sizing: border-box;
 }
+
 .datepicker {
-	margin-bottom: 5px !important;
+    margin-bottom: 5px !important;
 }
+
 .tabs .tab a:hover,
 .tabs .tab a.active {
-	background-color: transparent;
-	color: #3f51b5;
+    background-color: transparent;
+    color: #3f51b5;
 }
+
 .tabs {
-	background-color: transparent;
+    background-color: transparent;
 }
+
 .tabs .tab a {
-	color: #3f51b5;
+    color: #3f51b5;
 }
+
 .tabs .indicator {
-	background-color: #3f51b5;
+    background-color: #3f51b5;
 }
-.switch label input[type="checkbox"]:checked + .lever {
-	background-color: #3f51b5;
+
+.switch label input[type="checkbox"]:checked+.lever {
+    background-color: #3f51b5;
 }
-.switch label input[type="checkbox"]:checked + .lever:after {
-	background-color: #fcfcfc;
-	left: 24px;
+
+.switch label input[type="checkbox"]:checked+.lever:after {
+    background-color: #fcfcfc;
+    left: 24px;
 }
-[type="checkbox"].filled-in:checked + label:after {
-	border: 2px solid #3f51b5;
-	background-color: #3f51b5;
+
+[type="checkbox"].filled-in:checked+label:after {
+    border: 2px solid #3f51b5;
+    background-color: #3f51b5;
 }
+
 .btn:hover,
 .btn-large:hover {
-	background-color: #3f51b5;
+    background-color: #3f51b5;
 }
+
 a {
-	color: #3f51b5;
+    color: #3f51b5;
 }
+
 .btn,
 .btn-large {
-	background-color: #3f51b5;
+    background-color: #3f51b5;
 }
+
 li {
-	list-style-type: disc !important;
-	margin-left: 1rem;
+    list-style-type: disc !important;
+    margin-left: 1rem;
 }
-.selectedLabel {
-	font-weight: 400;
-	color: #333333;
+
+body,
+input,
+div,
+h3,
+h4,
+p,
+label,
+hr,
+#scrumReport {
+    transition: all 0.3s ease-in-out;
+}
+
+.dark-mode {
+    background: #1a1a1a !important;
+    color: #ffffff !important;
+    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
 }
 
-.unselectedLabel {
-	font-weight: 300; 
-	color: #666666; 
+.dark-mode .bg-white {
+    background-color: #2d2d2d !important;
+    border-color: #404040 !important;
+    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
 }
 
-.selectedLabel, .unselectedLabel {
-	transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out;
+.dark-mode input[type="text"],
+.dark-mode input[type="date"],
+.dark-mode #scrumReport {
+    background-color: #404040 !important;
+    border-color: #505050 !important;
+    color: #ffffff !important;
+    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+
+.dark-mode h3,
+.dark-mode h4,
+.dark-mode p,
+.dark-mode label {
+    color: #ffffff !important;
+    transition: color 0.3s ease-in-out;
+}
+
+.dark-mode hr {
+    border-color: #505050 !important;
+    transition: border-color 0.3s ease-in-out;
 }
 
 #scrumReport {
-    border: 1px solid #ccc;
-    padding: 10px;
-    min-height: 200px;
-    max-height: 400px;
-    overflow-y: auto;
-    background-color: white;
+    font-size: 13px !important;
+    line-height: 1.5 !important;
+}
+
+#scrumReport b {
+    font-size: 13px !important;
+}
+
+#scrumReport li {
+    font-size: 13px !important;
+    margin-bottom: 4px !important;
+}
+
+.dark-mode #scrumReport {
+    font-size: 13px !important;
+}
+
+.dark-mode #scrumReport b {
+    font-size: 13px !important;
+}
+
+.dark-mode #scrumReport li {
+    font-size: 13px !important;
+}
+
+.dark-mode a {
+    color: #00b7ff !important;
 }
 
-#scrumReport:focus {
+#refreshCache {
+    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+    border: none;
+    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
+    transition: all 0.2s ease;
+}
+
+#refreshCache:hover {
+    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
+    transform: translateY(-1px);
+}
+
+#refreshCache:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
+}
+
+#refreshCache i {
+    animation: spin 0s linear infinite;
+}
+
+#refreshCache.loading i {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Disabled state styling */
+.disabled-content {
+    opacity: 0.5 !important;
+    pointer-events: none !important;
+    user-select: none !important;
+}
+
+.disabled-content input,
+.disabled-content button,
+.disabled-content [contenteditable] {
+    cursor: not-allowed !important;
+}
+
+/* Dark mode disabled state */
+.dark-mode .disabled-content {
+    opacity: 0.4 !important;
+}
+
+.cache-info {
+    font-size: 11px;
+    color: #6b7280;
+    text-align: center;
+    margin-top: 8px;
+    line-height: 1.3;
+}
+
+.cache-info i {
+    margin-right: 4px;
+    font-size: 10px;
+}
+
+/* Dark mode for cache info */
+.dark-mode .cache-info {
+    color: #9ca3af;
+}
+
+#cacheInput {
+    transition: border-color 0.2s ease;
+}
+
+#cacheInput:focus {
     outline: none;
-    border-color: #26a69a;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* Update the settings button styles: */
+#settingsToggle {
+    transition: all 0.2s ease;
+    border: none;
+    cursor: pointer;
+    background: none !important;
+}
+
+#settingsToggle:hover {
+    transform: scale(1.05);
+    background: none !important;
 }
 
-#scrumReport a {
-    color: #26a69a;
-    text-decoration: none;
+#settingsToggle:active {
+    transform: scale(0.95);
 }
 
-#scrumReport a:hover {
+#settingsToggle img {
+    transition: transform 0.2s ease;
+    filter: brightness(0.9);
+}
+
+#settingsToggle.active img {
+    transform: rotate(45deg);
+    filter: brightness(1);
+}
+
+.dark-mode #settingsToggle {
+    background: none !important;
+}
+
+.dark-mode #settingsToggle:hover {
+    background: none !important;
+}
+
+.dark-mode #settingsToggle img {
+    filter: brightness(0.9);
+}
+
+.dark-mode #settingsToggle.active img {
+    filter: brightness(1);
+}
+
+.tooltip-container {
+    position: relative;
+    display: inline-block;
+    margin-left: 4px;
+}
+
+.question-icon {
+    color: #6b7280;
+    font-size: 14px;
+    cursor: help;
+    transition: color 0.2s ease;
+}
+
+.question-icon:hover {
+    color: #3b82f6;
+}
+
+.tooltip-bubble {
+    position: fixed !important;
+    z-index: 9999;
+    background: #f9fafb;
+    color: #222;
+    border-radius: 10px;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.12), 0 1.5px 4px 0 rgba(0, 0, 0, 0.08);
+    padding: 14px 18px;
+    font-size: 13px;
+    line-height: 1.5;
+    min-width: 220px;
+    max-width: 320px;
+    white-space: normal;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.18s;
+}
+
+.tooltip-container:hover .tooltip-bubble,
+.tooltip-container:focus-within .tooltip-bubble {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.tooltip-bubble a {
+    color: #2563eb;
     text-decoration: underline;
 }
+
+.tooltip-bubble::after {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+}
+
+
+.dark-mode .tooltip-bubble {
+    background: #f3f4f6;
+    color: #222;
+    border: 1px solid #374151;
+}
+
+.dark-mode .tooltip-bubble::after {
+    border-color: #374151 transparent transparent transparent;
+}
+
+.dark-mode .tooltip-container.tooltip-bottom .tooltip-bubble::after {
+    border-color: transparent transparent #374151 transparent;
+}
+
+.dark-mode .tooltip-container.tooltip-right .tooltip-bubble::after {
+    border-color: transparent #374151 transparent transparent;
+}
+
+#toggleTokenVisibility {
+    background: none;
+    border: none;
+    cursor: pointer;
+    margin-left: 8px;
+    padding: 0;
+    line-height: 1;
+}
+
+#tokenEyeIcon {
+    font-size: 18px;
+    vertical-align: middle;
+}
+
+@keyframes eye-rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    60% {
+        transform: rotate(180deg);
+    }
+
+    100% {
+        transform: rotate(180deg);
+    }
+}
+
+.eye-animating {
+    animation: eye-rotate 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.token-animating {
+    transition: box-shadow 0.3s, background-color 0.3s, color 0.3s, opacity 0.3s, transform 0.3s;
+    box-shadow: 0 0 0 2px #3b82f6;
+    opacity: 0.7;
+    transform: translateX(8px) scale(1.03);
+}
+
+.dark-mode #githubToken,
+.dark-mode .token-preview-char {
+    background: #404040 !important;
+    border-color: #505050 !important;
+    color: #fff !important;
+}
+
+.dark-mode .token-preview-dot {
+    background: #9ca3af !important;
+}
+
+.dark-mode .tooltip-container.tooltip-right .tooltip-bubble::after {
+    border-color: transparent #374151 transparent transparent;
+}
+
+#homeButton {
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-size: 1.5rem;
+}
+
+#homeButton:active {
+    background: #e5e7eb;
+}
+
+.dark-mode #homeButton:active {
+    background: #374151;
+}
+
+.dark-mode .token-preview-char {
+    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
+}
+
+.popup-commit-list {
+    margin: 8px 0 8px 18px;
+    padding-left: 0;
+    border-left: 2px solid #e0e7ff;
+    background: #f8fafc;
+    border-radius: 6px;
+}
+.popup-commit-list li {
+    list-style: none;
+    margin: 8px 0 8px 0;
+    padding-left: 0;
+}
+.popup-commit-list .commit-meta {
+    color: #64748b;
+    font-size: 11px;
+    margin-left: 8px;
+}
+.popup-commit-list a {
+    color: #2563eb;
+    font-weight: 500;
+    text-decoration: underline;
+}
\ No newline at end of file
diff --git a/src/manifest.json b/src/manifest.json
index 32710b4..cc5be11 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -1,11 +1,12 @@
+
 {
   "manifest_version": 3,
-  "name": "Scrum Helper Extension",
+  "name": "Scrum Helper",
   "version": "1.0",
-  "description": "This extension helps in writing Scrums in Google Groups, particularly related to FOSSASIA.",
+  "description": "This extension simplifies writing development reports by auto-filling content based on your Git activity.",
   "action": {
     "default_popup": "popup.html",
-    "default_title": "SCRUM Helper"
+    "default_title": "Scrum Helper"
   },
   "icons": {
     "96": "icons/icon.png",
@@ -17,20 +18,28 @@
   "content_scripts": [
     {
       "matches": [
-        "*://groups.google.com/forum/*", 
+        "*://groups.google.com/forum/*",
         "*://groups.google.com/g/*",
+        "*://groups.google.com/u/*/g/*",
         "*://mail.google.com/*",         
         "*://outlook.live.com/*",        
         "*://outlook.office.com/*",      
-        "*://mail.yahoo.com/*"          
+        "*://mail.yahoo.com/*"
       ],
-      "js": ["scripts/jquery-3.2.1.min.js", "scripts/scrumHelper.js",  "scripts/emailClientAdapter.js"] 
+      "js": ["scripts/jquery-3.2.1.min.js", "scripts/emailClientAdapter.js", "scripts/scrumHelper.js"]
     }
   ],
 
   "content_security_policy": {
     "extension_pages": "script-src 'self'; object-src 'self';"
   },
+  "web_accessible_resources": [{
+    "resources": [
+      "/icons/night-mode.png",
+      "icons/night-mode.png"
+    ],
+    "matches": ["<all_urls>"]
+  }],
   "permissions": [
     "tabs",
     "storage",
@@ -38,7 +47,6 @@
     "notifications"
   ],
   "host_permissions": [
-    "<all_urls>",
     "*://*.google.com/*",
     "*://*.outlook.live.com/*",
     "*://*.office.com/*",
diff --git a/src/popup.html b/src/popup.html
index 7a924f2..bf0f1c6 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -1,119 +1,303 @@
 <!DOCTYPE html>
 <html>
+
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
-	<link href="materialize/css/materialize.min.css" type="text/css" rel="stylesheet">
+	<link rel="stylesheet" href="./tailwindcss.css">
 	<link rel="stylesheet" type="text/css" href="index.css">
 	<script src="./scripts/fontawesome.js"></script>
 	<style type="text/css">
-	html,body{
-		width: 350px !important;
-		height: 600px !important;
-		max-height: 600px !important;
-		overflow-y: scroll;
-	}
-</style>
+		html,
+		body {
+			width: 375px !important;
+			height: 600px !important;
+			max-height: 600px !important;
+			overflow-y: scroll;
+			background: #eae4e4;
+		}
+	</style>
 </head>
+
 <body>
-	<div class="container">
-		<h4 class="center">SCRUM Helper</h4>
-		<h6 class="center">
-			SCRUM helper prefills the Scrums in google groups, with your FOSSASIA's contributions.
-		</h6>
-		<br />
-		<div class="row center">
-			<div class="switch">
-				<label>
+	<div class="pl-1 py-4 rounded-2xl">
+		<div class="bg-white px-4 py-4 mx-2 mb-2 rounded-3xl">
+			<div class="flex justify-between py-2">
+				<h3 id="scrumHelperHeading" class="text-3xl font-semibold cursor-pointer">Scrum Helper</h3>
+				<img src="icons/night-mode.png" alt="Night Mode" class="w-7 h-7 mx-3 cursor-pointer">
+			</div>
+			<div>
+				<p class="">Report your development progress by auto-fetching your Git activity for a selected period</p>
+			</div>
+
+			<div class="center mt-2 flex justify-between">
+				<label class="flex items-center justify-center gap-2 ">
 					Disable
-					<input type="checkbox" id="enable">
-					<span class="lever"></span>
+					<input type="checkbox" value="" id="enable" class="sr-only peer">
+					<div
+						class="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600">
+					</div>
+					<span class=""></span>
 					Enable
 				</label>
+				<div class="flex">
+					<button id="homeButton" title="Go to Report"
+						class="ml-1 p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition">
+						<i class="fa fa-home text-2xl text-gray-600 dark:text-gray-300"></i>
+					</button>
+					<button id="settingsToggle">
+						<img id="settingsIcon" src="icons/settings-light.png" alt="Settings" class="w-6 h-6 mx-3 cursor-pointer">
+					</button>
+				</div>
 			</div>
 		</div>
-		<div class="row">
-			<div class="col s12">
-				<ul class="tabs">
-					<li class="tab col s6" title="I am doing CodeHeat!"><a id="codeheatTab" href="#codeheatBox">CodeHeat</a></li>
-					<li class="tab col s6" title="I am doing GSoC!"><a id="gsocTab" href="#gsocBox">GSoC</a></li>
-				</ul>
-			</div>
-		</div>
-		<div class="row">
-            <div class="input-field col s12">
-                <input placeholder="Your Project Name" id="projectName" type="text">
-                <label for="projectName">Your Project Name</label>
-            </div>
-			<div class="input-field col s12">
-				<input placeholder="Required for getting data from github" id="githubUsername" type="text">
-				<label for="githubUsername">Your Github Username</label>
-			</div>
-			<div class="col s12"><span>Fetch your contributions between:</span>
-				<input type="checkbox" class="filled-in" id="lastWeekContribution"/>
-				<label for="lastWeekContribution">Show past <span id="noDays"></span> from today</label>
-			</div>
 
-			<div class="input-field col s6">
-				<div>Starting Date:</div>
-				<input id="startingDate" type="date" class="datepicker" placeholder=" ">
-				
-			</div>
-			<div class="input-field col s6">
-				<div>Ending Date</div>
-				<input id="endingDate" type="date" class="datepicker" placeholder=" ">
-			</div>
-			<div class="col s12">
-				<br />
-				<input type="checkbox" class="filled-in" id="showOpenLabel"/>
-				<label for="showOpenLabel">Show Open/Closed Label</label>
-			</div>
-			<div class="input-field col s12">
-				<input placeholder="Reason" id="userReason" type="text">
-				<label for="userReason">What is stopping you from doing your work?</label>
-			</div>
-			<div>
-				<h6>Scrum Report</h3>
-					<div id="scrumReport" contenteditable="true" 
-					class="materialize-textarea border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2" 
-					style="min-height: 200px; overflow-y: auto; white-space: pre-wrap;">
-			   </div>
-			</div>
-			<div style="display: flex; justify-content: space-between; gap: 10px;">
-				<button id="generateReport" class="btn waves-effect waves-light">
-					<i class="fa fa-refresh"></i> Generate Report
-				</button>
-				<button id="copyReport" class="btn waves-effect waves-light">
-					<i class="fa fa-copy"></i> Copy Report
-				</button>
-				
-			</div>
-			<div class="col s12">
-				
-				<h5>Note:</h5>
-				<h6>
-					<ul>
-						<li>The PRs fetched are according to the date last reviewed by anyone. So if you reviewed a PR 10 days back, and someone reviewed it 2 days back, it will appear in your last week's activity. See <a target="_blank" href="https://github.com/fossasia/scrum_helper/issues/20">this issue</a>.
-						</li>
-						<li>By using the extension you understand that there might be discrepancies in the SCRUM generated. You are advised to edit the SCRUM afterwards to remove any discrepancies.
-						</li>
-					</ul>
-				</h6>
+		<div class="rounded-2xl">
+			<div class=" border-gray-100 border-2 bg-white rounded-3xl px-4 py-4 mx-2 my-2">
+
+				<div id="reportSection" class="tab-content">
+					<div>
+						<h4>Your Project Name</h4>
+						<input id="projectName" type="text"
+							class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800  p-2 my-2"
+							placeholder="Enter your project name">
+					</div>
+					<div>
+						<h4>Your Github Username</h4>
+						<input id="githubUsername" type="text"
+							class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800  p-2 my-2"
+							placeholder="Required for fetching your contributions">
+					</div>
+
+					<div>
+						<p class="text-sm">Fetch your contributions between:</p>
+						<div class="flex justify-between items-center my-2 mx-4">
+							<div class="flex items-center gap-2">
+								<input type="radio" id="lastWeekContribution" name="timeframe" class="form-radio">
+								<label for="lastWeekContribution">Last 7 days</label>
+							</div>
+							<div class="flex items-center gap-2">
+								<input type="radio" id="yesterdayContribution" name="timeframe" class="form-radio">
+								<label for="yesterdayContribution">Last 1 day</label>
+							</div>
+						</div>
+
+						<div id="customDateContainer" class="flex justify-between items-center mt-2">
+							<div>
+								<label for="startingDate">Start Date:</label>
+								<input type="date" id="startingDate" class="border-2 border-gray-200 bg-gray-200 rounded-xl p-1">
+							</div>
+							<div>
+								<label for="endingDate">End Date:</label>
+								<input type="date" id="endingDate" class="border-2 border-gray-200 bg-gray-200 rounded-xl p-1">
+							</div>
+						</div>
+					</div>
+
+
+					<div class="my-4">
+						<p class="text-sm font-medium">What is blocking you from making progress?</p>
+						<input id="userReason" type="text" class="w-full text-gray-800 mt-3 rounded-xl px-4 py-1"
+							placeholder="Enter your reason">
+						<hr class="border-t-2 border-gray-700 mt-1 ">
+					</div>
+					<div>
+						<div>
+							<h6 class="text-base font-semibold">Scrum Report</h6>
+							<div id="scrumReport" contenteditable="true"
+								class="min-h-[200px] overflow-y-auto whitespace-pre-wrap border-2 border-gray-200 bg-gray-100 rounded-xl text-gray-800 p-2 my-2">
+							</div>
+						</div>
+						<div class="flex justify-between gap-2">
+							<button id="generateReport"
+								class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded">
+								<i class="fa fa-refresh"></i> Generate Report
+							</button>
+							<button id="copyReport"
+								class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded">
+								<i class="fa fa-copy"></i> Copy Report
+							</button>
+						</div>
+					</div>
+				</div>
+
+				<div id="settingsSection" class="tab-content hidden">
+					<div class="">
+						<div class="flex items-center mt-4">
+							<h4>Organization Name</h4>
+							<span class="tooltip-container ml-2">
+								<i class="fa fa-question-circle question-icon"></i>
+								<span class="tooltip-bubble">
+									<b>Which organization's GitHub activity?</b><br>
+									Enter the GitHub organization name to fetch activities for. Leave empty to fetch all your GitHub
+									activities across all organizations.
+									Organization name is not case-sensitive.
+								</span>
+							</span>
+						</div>
+						<div class="flex items-center mt-4 gap-2">
+							<input id="orgInput" type="text"
+								class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2"
+								placeholder="Enter organization name">
+							<button id="setOrgBtn" type="button"
+								class="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-xl text-base my-2 h-[44px] flex-shrink-0"
+								style="min-width:60px;">Set</button>
+						</div>
+					</div>
+					<div class="">
+						<div class="flex items-center justify-between">
+							<div class="flex">
+								<h4>Your Github Token</h4>
+								<span class="tooltip-container">
+									<i class="fa fa-question-circle question-icon"></i>
+									<span class="tooltip-bubble">
+										<b>Why is it recommended to add a GitHub token?</b><br>
+										Scrum Helper works without a GitHub token, but adding a personal access token is recommended for a
+										better experience. It raises your API limits, allows access to private repos (if permitted), and
+										improves accuracy and speed. Tokens are stored locally and never sent to us and used only to fetch
+										your git data. You can add one anytime in the extension settings.<br><br>
+										<b>How to obtain:</b><br>
+										1. Go to <a href="https://github.com/settings/tokens" target="_blank"
+											style="color:#2563eb;text-decoration:underline;">GitHub Developer Settings</a>.<br>
+										3. Click "Generate new token", select classic token<br>
+										4. Paste it here.<br>
+										<i>Keep your token secret!</i>
+									</span>
+								</span>
+							</div>
+							<button id="toggleTokenVisibility" type="button" class="focus:outline-none">
+								<i id="tokenEyeIcon" class="fa fa-eye text-gray-600"></i>
+							</button>
+						</div>
+						<input id="githubToken" type="password"
+							class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2 pr-10"
+							placeholder="Required for making authenticated requests">
+					</div>
+
+
+
+
+
+					<!-- Customization & Template Section -->
+					<div id="customizationSettings" class="my-6 p-4 border border-gray-200 rounded-xl bg-gray-50">
+						<h4 class="font-semibold text-lg mb-2">Customize Report Sections</h4>
+						<div class="mb-2" style="display: block;">
+							<label style="display:block; margin-bottom: 6px;"><input type="checkbox" id="showBlockers"> Show
+								Blockers</label>
+							<label style="display:block; margin-bottom: 6px;"><input type="checkbox" id="showTasks"> Show
+								Tasks</label>
+							<label style="display:block; margin-bottom: 6px;"><input type="checkbox" id="showPRs"> Show PRs</label>
+							<label style="display:block; margin-bottom: 6px;"><input type="checkbox" id="showIssues"> Show
+								Issues</label>
+							<label style="display:block; margin-bottom: 6px;"><input type="checkbox" id="showReviewedPRs"> Show
+								Reviewed PRs</label>
+							<label style="display:block; margin-bottom: 6px;"><input type="checkbox" id="showOpenLabel"> Show
+								Open/Closed Label</label>
+							<label style="display:block; margin-bottom: 6px;"><input type="checkbox" id="showCommits"
+									class="form-checkbox h-4 w-4 text-blue-600"> Show commits</label>
+						</div>
+						<hr style="margin: 18px 0; border: none; border-top: 1.5px dashed #e5e7eb;">
+						<div id="templateSection"
+							class="p-3 rounded-xl bg-gray-50 border border-gray-200 mb-2 flex flex-col w-full">
+							<h5 class="font-semibold text-base mb-2">Template</h5>
+							<div class="flex flex-col gap-2 w-full">
+								<div class="flex gap-2 items-center mb-1 w-full">
+									<input id="templateNameInput" type="text" class="border rounded p-1 flex-1"
+										placeholder="Template name">
+									<button id="saveNamedTemplateBtn" type="button"
+										class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-1 px-3 rounded">Save</button>
+								</div>
+								<div class="flex flex-col w-full mt-1">
+									<label class="block font-medium mb-1">Saved Templates:</label>
+									<ul id="templatesList" style="display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; width:100%;">
+									</ul>
+								</div>
+							</div>
+							<span id="namedTemplateMsg" class="text-green-600 text-sm ml-2" style="display:none;">Action
+								successful!</span>
+						</div>
+						<button id="saveTemplateBtn" type="button"
+							class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded mt-2">Save Template</button>
+						<span id="templateSavedMsg" class="text-green-600 text-sm ml-2" style="display:none;">Template saved!</span>
+					</div>
+					<div>
+						<p class="text-sm font-medium">Enter cache TTL <span class="text-sm font-normal">(in minutes)</span>
+							<span class="tooltip-container">
+								<i class="fa fa-question-circle question-icon"></i>
+								<span class="tooltip-bubble">
+									We are caching the data to avoid redundant calls. By default the cache expires after 10 minutes, you
+									can change it here to your desired time. We have given a refresh cache button in case you want to
+									fetch fresh data right now.
+								</span>
+							</span>
+						</p>
+						<input type="text" id="cacheInput"
+							class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800  p-2 my-2"
+							placeholder="Write Cache TTL in minutes (Default 10 minutes)">
+					</div>
+
+					<div class="">
+						<button id="refreshCache"
+							class="w-full mt-3 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded flex items-center justify-center gap-2 transition-colors duration-200">
+							<i class="fa fa-refresh"></i>
+							<span>Refresh Data (bypass cache)</span>
+						</button>
+						<p class="cache-info">
+							<i class="fa fa-info-circle"></i>
+							Use this button to fetch fresh data immediately.
+						</p>
+					</div>
+
+				</div>
+
+				<!-- asdfghjklkjhgfdsasdfghjkjhgfdsasdfghjk -->
+				<div class="border-gray-100 border-2 bg-white rounded-3xl px-4 py-2 mx-2 my-2">
+					<div>
+						<h4 class="font-semibold text-xl">Note:</h4>
+						<ul class="text-xs list-disc list-inside">
+							<li>The PRs fetched are based on the most recent review by any contributor. If you reviewed a PR 10 days
+								ago and someone else reviewed it 2 days ago, it will still appear in your activity for the past week.
+								(<a target="_blank" href="https://github.com/fossasia/scrum_helper/issues/20">See this issue</a>.)
+							</li>
+							<li>Please note that some discrepancies may occur in the generated SCRUM. We recommend manually reviewing
+								and editing the report to ensure accuracy before sharing
+							</li>
+
+						</ul>
+					</div>
+				</div>
 			</div>
-		</div>
 
-		<hr />
-		<footer>
-			<div class="center">
-				<a target="_blank" href="https://github.com/fossasia/scrum_helper"><h6><i class="fa fa-github" aria-hidden="true"></i> view code</h6></a>
+			<div class="mt-6 border-t border-gray-300">
+				<div class="bg-white rounded-3xl mx-2 mt-4 mb-2 p-4 border border-gray-100 shadow-sm">
+					<div class="flex items-center justify-center space-x-3">
+						<a target="_blank" href="https://github.com/fossasia/scrum_helper"
+							class="bg-blue-50 hover:bg-blue-100 text-blue-600 transition-all duration-200 rounded-lg px-4 py-2 flex items-center space-x-2">
+							<i class="fa fa-code text-sm"></i>
+							<span class="text-sm font-medium">View Code</span>
+						</a>
+						<a target="_blank" href="https://github.com/fossasia/scrum_helper/issues"
+							class="bg-blue-50 hover:bg-blue-100 text-blue-600 transition-all duration-200 rounded-lg px-4 py-2 flex items-center space-x-2">
+							<i class="fa fa-bug text-sm"></i>
+							<span class="text-sm font-medium">Report Issue</span>
+						</a>
+					</div>
+				</div>
+				<div class="mt-3 pt-3 border-t border-gray-200 flex justify-center items-center py-5">
+					<p class="text-xs text-gray-600 text-center">
+						Made with ❤️ by <strong>FOSSASIA</strong> •
+						<span class="text-gray-500 dark:text-gray-300">v2.0</span>
+					</p>
+				</div>
 			</div>
-		</footer>
+		</div>
 	</div>
 	<script src="scripts/jquery-3.2.1.min.js"></script>
 	<script type="text/javascript" type="text/javascript" src="materialize/js/materialize.min.js"></script>
-	<script src="scripts/scrumHelper.js"></script>
 	<script src="scripts/main.js"></script>
+	<script src="scripts/scrumHelper.js"></script>
 	<script src="scripts/popup.js"></script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/src/scripts/emailClientAdapter.js b/src/scripts/emailClientAdapter.js
index 2b24f71..74ebf48 100644
--- a/src/scripts/emailClientAdapter.js
+++ b/src/scripts/emailClientAdapter.js
@@ -1,4 +1,39 @@
+
+
 class EmailClientAdapter {
+	isNewConversation() {
+	const clientType = this.detectClient();
+	if (!clientType) return false;
+	const elements = this.getEditorElements();
+	if (!elements || !elements.subject) return false;
+	const currentSubject = elements.subject.value || '';
+	const isReplySubject = currentSubject.startsWith('Re:') || currentSubject.startsWith('Fwd:');	
+	let isReplyContext = false;
+
+	switch (clientType) {
+		case 'gmail': {
+            const editor = document.querySelector('.Am.Al.editable.LW-avf');
+            const isNewWindow = editor ? !!editor.closest('div[role="dialog"]') : false;
+            isReplyContext = !isNewWindow;
+            break;
+        }
+
+		case 'outlook': {
+            isReplyContext = !!document.querySelector('[aria-label="Reply"]');
+            break;
+        }
+
+		case 'yahoo': {
+            const header = document.querySelector('[data-test-id="compose-header-title"]');
+            if (header) {
+                const title = header.innerText.trim().toLowerCase();
+                isReplyContext = title.includes('reply') || title.includes('forward');
+            }
+            break;
+        }
+    }
+	return !(isReplySubject || isReplyContext);
+}
 	constructor() {
 		this.clientConfigs = {
 			'google-groups': {
@@ -11,7 +46,7 @@ class EmailClientAdapter {
 					subjectChange: 'input',
 				},
 			},
-			gmail: {
+			'gmail': {
 				selectors: {
 					body: 'div.editable.LW-avf[contenteditable="true"][role="textbox"]',
 					subject: 'input[name="subjectbox"][tabindex="1"]',
@@ -21,10 +56,13 @@ class EmailClientAdapter {
 					subjectChange: 'input',
 				},
 			},
-			outlook: {
+			'outlook': {
 				selectors: {
-					body: 'div[role="textbox"][contenteditable="true"][aria-multiline="true"][aria-label="Message body, press Alt+F10 to exit"]',
-					subject: 'input[aria-label="Subject"][type="text"][maxlength="255"][placeholder="Add a subject"]',
+					body: 'div[role="textbox"][contenteditable="true"][aria-multiline="true"]',
+					subject: [
+						'input[aria-label="Subject"][type="text"]',
+						'input[aria-label="Add a subject"][type="text"][role="textbox"][aria-multiline="false"]',
+					],
 				},
 				eventTypes: {
 					contentChange: 'input',
@@ -32,21 +70,29 @@ class EmailClientAdapter {
 				},
 				injectMethod: 'focusAndPaste', // Custom injection method
 			},
-			yahoo: {
+			'yahoo': {
 				selectors: {
 					body: [
-						'[aria-multiline="true"][aria-label="Message body"][contenteditable="true"][role="textbox"]',
+						// Desktop selectors
+						'#editor-container [contenteditable="true"][role="textbox"]',
+            '[aria-multiline="true"][aria-label="Message body"][contenteditable="true"][role="textbox"]',
 						'[aria-label="Message body"][contenteditable="true"]',
 						'[role="textbox"][contenteditable="true"]',
 						'[data-test-id*="compose"][contenteditable="true"]',
-						'.compose-editor [contenteditable="true"]'
+						'.compose-editor [contenteditable="true"]',
+						// Mobile selectors
+						'#editor-container-mobile [contenteditable="true"][role="textbox"]',
 					].join(', '),
-					subject:  [
-							'#compose-subject-input',
+					subject: [
+						// Desktop selectors
+						'#compose-subject-input, input[placeholder="Subject"][id="compose-subject-input"]',
+            '#compose-subject-input',
 							'input[placeholder="Subject"]',
 							'input[aria-label*="subject" i]',
-							'input[data-test-id*="subject" i]'
-						].join(', ')
+							'input[data-test-id*="subject" i]',
+						// Mobile selectors
+						'#compose-subject-input-mobile, input[placeholder="Subject"][id="compose-subject-input-mobile"]'
+					].join(', '),
 				},
 				eventTypes: {
 					contentChange: 'input',
@@ -168,3 +214,4 @@ class EmailClientAdapter {
 
 // Create global instance
 window.emailClientAdapter = new EmailClientAdapter();
+console.log('Email client adapter initialized');
diff --git a/src/scripts/main.js b/src/scripts/main.js
index 590d579..383e6e2 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1,15 +1,17 @@
-/* global $,Materialize*/
-var enableToggleElement = document.getElementById('enable');
-var githubUsernameElement = document.getElementById('githubUsername');
-var projectNameElement = document.getElementById('projectName');
-var lastWeekContributionElement = document.getElementById('lastWeekContribution');
-var startingDateElement = document.getElementById('startingDate');
-var endingDateElement = document.getElementById('endingDate');
-var showOpenLabelElement = document.getElementById('showOpenLabel');
-var userReasonElement = document.getElementById('userReason');
-var gsoc = 0; //0 means gsoc. 1 means gsoc
+let enableToggleElement = document.getElementById('enable');
+let githubUsernameElement = document.getElementById('githubUsername');
+let githubTokenElement = document.getElementById('githubToken');
+let cacheInputElement = document.getElementById('cacheInput');
+let projectNameElement = document.getElementById('projectName');
+let lastWeekContributionElement = document.getElementById('lastWeekContribution');
+let yesterdayContributionElement = document.getElementById('yesterdayContribution');
+let startingDateElement = document.getElementById('startingDate');
+let endingDateElement = document.getElementById('endingDate');
+let showOpenLabelElement = document.getElementById('showOpenLabel');
+let userReasonElement = document.getElementById('userReason');
+let showCommitsElement = document.getElementById('showCommits');
+
 function handleBodyOnLoad() {
-	// prefill name
 	chrome.storage.local.get(
 		[
 			'githubUsername',
@@ -18,19 +20,26 @@ function handleBodyOnLoad() {
 			'startingDate',
 			'endingDate',
 			'showOpenLabel',
-			'showClosedLabel',
 			'userReason',
 			'lastWeekContribution',
-			'gsoc',
-			'selectedTab',
+			'yesterdayContribution',
+			'cacheInput',
+			'githubToken',
+			'showCommits',
 		],
 		(items) => {
 			if (items.githubUsername) {
 				githubUsernameElement.value = items.githubUsername;
 			}
+			if (items.githubToken) {
+				githubTokenElement.value = items.githubToken;
+			}
 			if (items.projectName) {
 				projectNameElement.value = items.projectName;
 			}
+			if (items.cacheInput) {
+				cacheInputElement.value = items.cacheInput;
+			}
 			if (items.enableToggle) {
 				enableToggleElement.checked = items.enableToggle;
 			} else if (items.enableToggle !== false) {
@@ -57,70 +66,118 @@ function handleBodyOnLoad() {
 			if (items.lastWeekContribution) {
 				lastWeekContributionElement.checked = items.lastWeekContribution;
 				handleLastWeekContributionChange();
-			} else if (items.lastWeekContribution !== false) {
+			}
+			else if (items.lastWeekContribution !== false) {
 				lastWeekContributionElement.checked = true;
 				handleLastWeekContributionChange();
 			}
-			if (items.gsoc == 1) {
-				handleGsocClick();
-			} else {
-				handleCodeheatClick();
+			if (items.yesterdayContribution) {
+				yesterdayContributionElement.checked = items.yesterdayContribution;
+				handleYesterdayContributionChange();
+			}
+			else if (items.yesterdayContribution !== false) {
+				yesterdayContributionElement.checked = true;
+				handleYesterdayContributionChange();
 			}
-			if (items.selectedTab === 'gsoc') {
-				handleGsocClick();
-			} 
-			else {
-				handleCodeheatClick();
+			if (items.showCommits){
+				showCommitsElement.checked = items.showCommits;
+			} else {
+				showCommitsElement.checked = false;
+				handleShowCommitsChange();
 			}
-			
-			// initialize materialize tabs
-			$('.tabs').tabs('select_tab', items.selectedTab === 'gsoc' ? 'gsocBox' : 'codeheatBox' );
 		},
 	);
 }
+
+document.getElementById('refreshCache').addEventListener('click', async (e) => {
+	const button = e.currentTarget;
+	button.classList.add('loading');
+	button.disabled = true;
+
+	try {
+		const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+		await chrome.tabs.sendMessage(tabs[0].id, {
+			action: 'forceRefresh',
+			timestamp: Date.now()
+		});
+
+		// Reload the active tab to re-inject content
+		chrome.tabs.reload(tabs[0].id);
+
+		Materialize.toast({ html: 'Data refreshed successfully!', classes: 'green' });
+	} catch (err) {
+		console.log('Refresh successful',);
+	} finally {
+		setTimeout(() => {
+			button.classList.remove('loading');
+			button.disabled = false;
+		}, 500);
+	}
+});
+
 function handleEnableChange() {
-	var value = enableToggleElement.checked;
+	let value = enableToggleElement.checked;
 	chrome.storage.local.set({ enableToggle: value });
 }
 function handleStartingDateChange() {
-	var value = startingDateElement.value;
+	let value = startingDateElement.value;
 	chrome.storage.local.set({ startingDate: value });
 }
 function handleEndingDateChange() {
-	var value = endingDateElement.value;
+	let value = endingDateElement.value;
 	chrome.storage.local.set({ endingDate: value });
 }
 function handleLastWeekContributionChange() {
-	var value = lastWeekContributionElement.checked;
-	var labelElement = document.querySelector("label[for='lastWeekContribution']");
-
+	let value = lastWeekContributionElement.checked;
+	let labelElement = document.querySelector("label[for='lastWeekContribution']");
 	if (value) {
-			startingDateElement.disabled = true;
-			endingDateElement.disabled = true;
-			endingDateElement.value = getToday();
-			startingDateElement.value = getLastWeek();
-		        handleEndingDateChange();
-		        handleStartingDateChange();
-			labelElement.classList.add("selectedLabel");
-			labelElement.classList.remove("unselectedLabel");
+		startingDateElement.readOnly = true;
+		endingDateElement.readOnly = true;
+		endingDateElement.value = getToday();
+		startingDateElement.value = getLastWeek();
+		handleEndingDateChange();
+		handleStartingDateChange();
+		labelElement.classList.add("selectedLabel");
+		labelElement.classList.remove("unselectedLabel");
 	} else {
-			startingDateElement.disabled = false;
-			endingDateElement.disabled = false;
-			labelElement.classList.add("unselectedLabel");
-			labelElement.classList.remove("selectedLabel");
+		startingDateElement.readOnly = false;
+		endingDateElement.readOnly = false;
+		labelElement.classList.add("unselectedLabel");
+		labelElement.classList.remove("selectedLabel");
 	}
-	
+
 	chrome.storage.local.set({ lastWeekContribution: value });
 }
 
+function handleYesterdayContributionChange() {
+	let value = yesterdayContributionElement.checked;
+	let labelElement = document.querySelector("label[for='yesterdayContribution']");
+
+	if (value) {
+		startingDateElement.readOnly = true;
+		endingDateElement.readOnly = true;
+		endingDateElement.value = getToday();
+		startingDateElement.value = getYesterday();
+		handleEndingDateChange();
+		handleStartingDateChange();
+		labelElement.classList.add("selectedLabel");
+		labelElement.classList.remove("unselectedLabel");
+	} else {
+		startingDateElement.readOnly = false;
+		endingDateElement.readOnly = false;
+		labelElement.classList.add("unselectedLabel");
+		labelElement.classList.remove("selectedLabel");
+	}
+	chrome.storage.local.set({ yesterdayContribution: value });
+}
+
 function getLastWeek() {
-	var today = new Date();
-	var noDays_to_goback = gsoc == 0 ? 7 : 1;
-	var lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - noDays_to_goback);
-	var lastWeekMonth = lastWeek.getMonth() + 1;
-	var lastWeekDay = lastWeek.getDate();
-	var lastWeekYear = lastWeek.getFullYear();
-	var lastWeekDisplayPadded =
+	let today = new Date();
+	let lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
+	let lastWeekMonth = lastWeek.getMonth() + 1;
+	let lastWeekDay = lastWeek.getDate();
+	let lastWeekYear = lastWeek.getFullYear();
+	let lastWeekDisplayPadded =
 		('0000' + lastWeekYear.toString()).slice(-4) +
 		'-' +
 		('00' + lastWeekMonth.toString()).slice(-2) +
@@ -128,13 +185,27 @@ function getLastWeek() {
 		('00' + lastWeekDay.toString()).slice(-2);
 	return lastWeekDisplayPadded;
 }
+function getYesterday() {
+	let today = new Date();
+	let yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
+	let yesterdayMonth = yesterday.getMonth() + 1;
+	let yesterdayWeekDay = yesterday.getDate();
+	let yesterdayYear = yesterday.getFullYear();
+	let yesterdayPadded =
+		('0000' + yesterdayYear.toString()).slice(-4) +
+		'-' +
+		('00' + yesterdayMonth.toString()).slice(-2) +
+		'-' +
+		('00' + yesterdayWeekDay.toString()).slice(-2);
+	return yesterdayPadded;
+}
 function getToday() {
-	var today = new Date();
-	var Week = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-	var WeekMonth = Week.getMonth() + 1;
-	var WeekDay = Week.getDate();
-	var WeekYear = Week.getFullYear();
-	var WeekDisplayPadded =
+	let today = new Date();
+	let Week = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+	let WeekMonth = Week.getMonth() + 1;
+	let WeekDay = Week.getDate();
+	let WeekYear = Week.getFullYear();
+	let WeekDisplayPadded =
 		('0000' + WeekYear.toString()).slice(-4) +
 		'-' +
 		('00' + WeekMonth.toString()).slice(-2) +
@@ -144,56 +215,56 @@ function getToday() {
 }
 
 function handleGithubUsernameChange() {
-	var value = githubUsernameElement.value;
+	let value = githubUsernameElement.value;
 	chrome.storage.local.set({ githubUsername: value });
 }
+function handleGithubTokenChange() {
+	let value = githubTokenElement.value;
+	chrome.storage.local.set({ githubToken: value });
+}
 function handleProjectNameChange() {
-	var value = projectNameElement.value;
+	let value = projectNameElement.value;
 	chrome.storage.local.set({ projectName: value });
 }
+function handleCacheInputChange() {
+	let value = cacheInputElement.value;
+	chrome.storage.local.set({ cacheInput: value });
+}
 function handleOpenLabelChange() {
-	var value = showOpenLabelElement.checked;
-	var labelElement = document.querySelector("label[for='showOpenLabel']");
+	let value = showOpenLabelElement.checked;
+	let labelElement = document.querySelector("label[for='showOpenLabel']");
 
 	if (value) {
-			labelElement.classList.add("selectedLabel");
-			labelElement.classList.remove("unselectedLabel");
+		labelElement.classList.add("selectedLabel");
+		labelElement.classList.remove("unselectedLabel");
 	} else {
-			labelElement.classList.add("unselectedLabel");
-			labelElement.classList.remove("selectedLabel");
+		labelElement.classList.add("unselectedLabel");
+		labelElement.classList.remove("selectedLabel");
 	}
 
 	chrome.storage.local.set({ showOpenLabel: value });
 }
 
 function handleUserReasonChange() {
-	var value = userReasonElement.value;
+	let value = userReasonElement.value;
 	chrome.storage.local.set({ userReason: value });
 }
-function handleCodeheatClick() {
-	gsoc = 0;
-	$('#codeheatTab').addClass('active');
-	$('.tabs').tabs();
-	$('#noDays').text('7 days');
-	chrome.storage.local.set({ gsoc: 0, selectedTab: 'codeheat' });
-	handleLastWeekContributionChange();
-}
-function handleGsocClick() {
-	gsoc = 1;
-	$('#gsocTab').addClass('active');
-	$('.tabs').tabs();
-	$('#noDays').text('1 day');
-	chrome.storage.local.set({ gsoc: 1, selectedTab: 'gsoc' });
-	handleLastWeekContributionChange();
+
+function handleShowCommitsChange() {
+    let value = showCommitsElement.checked;
+    chrome.storage.local.set({ showCommits: value });
 }
+
 enableToggleElement.addEventListener('change', handleEnableChange);
 githubUsernameElement.addEventListener('keyup', handleGithubUsernameChange);
+githubTokenElement.addEventListener('keyup', handleGithubTokenChange);
+cacheInputElement.addEventListener('keyup', handleCacheInputChange);
 projectNameElement.addEventListener('keyup', handleProjectNameChange);
 startingDateElement.addEventListener('change', handleStartingDateChange);
+showCommitsElement.addEventListener('change', handleShowCommitsChange);
 endingDateElement.addEventListener('change', handleEndingDateChange);
 lastWeekContributionElement.addEventListener('change', handleLastWeekContributionChange);
+yesterdayContributionElement.addEventListener('change', handleYesterdayContributionChange);
 showOpenLabelElement.addEventListener('change', handleOpenLabelChange);
 userReasonElement.addEventListener('keyup', handleUserReasonChange);
-document.addEventListener('DOMContentLoaded', handleBodyOnLoad);
-document.getElementById('codeheatTab').addEventListener('click', handleCodeheatClick);
-document.getElementById('gsocTab').addEventListener('click', handleGsocClick);
+document.addEventListener('DOMContentLoaded', handleBodyOnLoad);
\ No newline at end of file
diff --git a/src/scripts/popup.js b/src/scripts/popup.js
index a9c2b4e..9b7864d 100644
--- a/src/scripts/popup.js
+++ b/src/scripts/popup.js
@@ -1,45 +1,861 @@
-document.addEventListener('DOMContentLoaded', function() {
-    const generateBtn = document.getElementById('generateReport');
-    const copyBtn = document.getElementById('copyReport');
-    
-    generateBtn.addEventListener('click', function() {
-        this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Generating...';
-        this.disabled = true;
-        
-        window.generateScrumReport();
-    });
-    
-    copyBtn.addEventListener('click', function() {
+function getLastWeek() {
+    let today = new Date();
+    let lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
+    let lastWeekMonth = lastWeek.getMonth() + 1;
+    let lastWeekDay = lastWeek.getDate();
+    let lastWeekYear = lastWeek.getFullYear();
+    let lastWeekDisplayPadded =
+        ('0000' + lastWeekYear.toString()).slice(-4) +
+        '-' +
+        ('00' + lastWeekMonth.toString()).slice(-2) +
+        '-' +
+        ('00' + lastWeekDay.toString()).slice(-2);
+    return lastWeekDisplayPadded;
+}
+
+function getToday() {
+    let today = new Date();
+    let WeekMonth = today.getMonth() + 1;
+    let WeekDay = today.getDate();
+    let WeekYear = today.getFullYear();
+    let WeekDisplayPadded =
+        ('0000' + WeekYear.toString()).slice(-4) +
+        '-' +
+        ('00' + WeekMonth.toString()).slice(-2) +
+        '-' +
+        ('00' + WeekDay.toString()).slice(-2);
+    return WeekDisplayPadded;
+}
+
+function getYesterday() {
+    let today = new Date();
+    let yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
+    let yesterdayMonth = yesterday.getMonth() + 1;
+    let yesterdayDay = yesterday.getDate();
+    let yesterdayYear = yesterday.getFullYear();
+    let yesterdayPadded =
+        ('0000' + yesterdayYear.toString()).slice(-4) +
+        '-' +
+        ('00' + yesterdayMonth.toString()).slice(-2) +
+        '-' +
+        ('00' + yesterdayDay.toString()).slice(-2);
+    return yesterdayPadded;
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    // Dark mode setup
+    const darkModeToggle = document.querySelector('img[alt="Night Mode"]');
+    const settingsIcon = document.getElementById('settingsIcon');
+    const body = document.body;
+    const homeButton = document.getElementById('homeButton');
+    const scrumHelperHeading = document.getElementById('scrumHelperHeading');
+    const settingsToggle = document.getElementById('settingsToggle');
+    const reportSection = document.getElementById('reportSection');
+    const settingsSection = document.getElementById('settingsSection');
+
+    let isSettingsVisible = false;
+    const githubTokenInput = document.getElementById('githubToken');
+    const toggleTokenBtn = document.getElementById('toggleTokenVisibility');
+    const tokenEyeIcon = document.getElementById('tokenEyeIcon');
+    let tokenVisible = false;
+
+    const orgInput = document.getElementById('orgInput');
+    const setOrgBtn = document.getElementById('setOrgBtn');
+
+    chrome.storage.local.get(['darkMode'], function (result) {
+        if (result.darkMode) {
+            body.classList.add('dark-mode');
+            darkModeToggle.src = 'icons/light-mode.png';
+            if (settingsIcon) {
+                settingsIcon.src = 'icons/settings-night.png'; // Changed from settings-night.png
+            }
+        }
+    });
+
+    toggleTokenBtn.addEventListener('click', function () {
+        tokenVisible = !tokenVisible;
+        githubTokenInput.type = tokenVisible ? 'text' : 'password';
+
+        tokenEyeIcon.classList.add('eye-animating');
+        setTimeout(() => tokenEyeIcon.classList.remove('eye-animating'), 400);
+        tokenEyeIcon.className = tokenVisible ? 'fa fa-eye-slash text-gray-600' : 'fa fa-eye text-gray-600';
+
+        githubTokenInput.classList.add('token-animating');
+        setTimeout(() => githubTokenInput.classList.remove('token-animating'), 300);
+    });
+
+    darkModeToggle.addEventListener('click', function () {
+        body.classList.toggle('dark-mode');
+        const isDarkMode = body.classList.contains('dark-mode');
+        chrome.storage.local.set({ darkMode: isDarkMode });
+        this.src = isDarkMode ? 'icons/light-mode.png' : 'icons/night-mode.png';
+        const settingsIcon = document.getElementById('settingsIcon');
+        if (settingsIcon) {
+            settingsIcon.src = isDarkMode ? 'icons/settings-night.png' : 'icons/settings-light.png';
+        }
+        renderTokenPreview();
+    });
+
+    function renderTokenPreview() {
+        tokenPreview.innerHTML = '';
+        const value = githubTokenInput.value;
+        const isDark = document.body.classList.contains('dark-mode');
+        for (let i = 0; i < value.length; i++) {
+            const charBox = document.createElement('span');
+            charBox.className = 'token-preview-char' + (isDark ? ' dark-mode' : '');
+            if (tokenVisible) {
+                charBox.textContent = value[i];
+            } else {
+                const dot = document.createElement('span');
+                dot.className = 'token-preview-dot' + (isDark ? ' dark-mode' : '');
+                charBox.appendChild(dot);
+            }
+            tokenPreview.appendChild(charBox);
+            setTimeout(() => charBox.classList.add('flip'), 10 + i * 30);
+        }
+    }
+
+    function updateContentState(enableToggle) {
+        const elementsToToggle = [
+            'startingDate',
+            'endingDate',
+            'userReason',
+            'generateReport',
+            'copyReport',
+            'refreshCache',
+            'showOpenLabel',
+            'scrumReport',
+            'githubUsername',
+            'githubToken',
+            'projectName',
+            'settingsToggle',
+
+        ];
+
+        const radios = document.querySelectorAll('input[name="timeframe"]');
+        const customDateContainer = document.getElementById('customDateContainer');
+
+        elementsToToggle.forEach(id => {
+            const element = document.getElementById(id);
+            if (element) {
+                element.disabled = !enableToggle;
+                if (!enableToggle) {
+                    element.style.opacity = '0.5';
+                    element.style.pointerEvents = 'none';
+                } else {
+                    element.style.opacity = '1';
+                    element.style.pointerEvents = 'auto';
+                }
+            }
+        });
+
+        radios.forEach(radio => {
+            radio.disabled = !enableToggle;
+            const label = document.querySelector(`label[for="${radio.id}"]`);
+            if (label) {
+                if (!enableToggle) {
+                    label.style.opacity = '0.5';
+                    label.style.pointerEvents = 'none';
+                } else {
+                    label.style.opacity = '1';
+                    label.style.pointerEvents = 'auto';
+                }
+            }
+        });
+
+
+        if (customDateContainer) {
+            if (!enableToggle) {
+                customDateContainer.style.opacity = '0.5';
+                customDateContainer.style.pointerEvents = 'none';
+            } else {
+                customDateContainer.style.opacity = '1';
+                customDateContainer.style.pointerEvents = 'auto';
+            }
+        }
+
         const scrumReport = document.getElementById('scrumReport');
-        
-        // Create container for HTML content
-        const tempDiv = document.createElement('div');
-        tempDiv.innerHTML = scrumReport.innerHTML;
-        document.body.appendChild(tempDiv);
-        tempDiv.style.position = 'absolute';
-        tempDiv.style.left = '-9999px';
-        
-        // Select the content
-        const range = document.createRange();
-        range.selectNode(tempDiv);
-        const selection = window.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
-        
-        try {
-            // Copy HTML content
-            const success = document.execCommand('copy');
-            if (!success) {
-                throw new Error('Copy command failed');
-            }
-            Materialize.toast('Report copied with formatting!', 3000, 'green');
-        } catch (err) {
-            console.error('Failed to copy:', err);
-            Materialize.toast('Failed to copy report', 3000, 'red');
-        } finally {
-            // Cleanup
+        if (scrumReport) {
+            scrumReport.contentEditable = enableToggle;
+            if (!enableToggle) {
+                scrumReport.innerHTML = '<p style="text-align: center; color: #999; padding: 20px;">Extension is disabled. Enable it from the options to generate scrum reports.</p>';
+            } else {
+                const disabledMessage = '<p style="text-align: center; color: #999; padding: 20px;">Extension is disabled. Enable it from the options to generate scrum reports.</p>';
+                if (scrumReport.innerHTML === disabledMessage) {
+                    scrumReport.innerHTML = '';
+                }
+            }
+        }
+    }
+
+    chrome.storage.local.get(['enableToggle'], (items) => {
+        const enableToggle = items.enableToggle !== false;
+        updateContentState(enableToggle);
+        if (!enableToggle) {
+            return;
+        }
+
+        initializePopup();
+    })
+
+    chrome.storage.onChanged.addListener((changes, namespace) => {
+        if (namespace === 'local' && changes.enableToggle) {
+            updateContentState(changes.enableToggle.newValue);
+            if (changes.enableToggle.newValue) {
+                // re-initialize if enabled
+                initializePopup();
+            }
+        }
+    });
+
+    function initializePopup() {
+
+        // Button setup
+        const generateBtn = document.getElementById('generateReport');
+        const copyBtn = document.getElementById('copyReport');
+
+        generateBtn.addEventListener('click', function () {
+            // Check org input value before generating report
+            let org = orgInput.value.trim().toLowerCase();
+            // Allow empty org to fetch all GitHub activities
+            chrome.storage.local.set({ orgName: org }, () => {
+                generateBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Generating...';
+                generateBtn.disabled = true;
+                window.generateScrumReport();
+            });
+        });
+
+        copyBtn.addEventListener('click', function () {
+            const scrumReport = document.getElementById('scrumReport');
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = scrumReport.innerHTML;
+            document.body.appendChild(tempDiv);
+            tempDiv.style.position = 'absolute';
+            tempDiv.style.left = '-9999px';
+
+            const range = document.createRange();
+            range.selectNode(tempDiv);
+            const selection = window.getSelection();
             selection.removeAllRanges();
-            document.body.removeChild(tempDiv);
+            selection.addRange(range);
+
+            try {
+                document.execCommand('copy');
+                this.innerHTML = '<i class="fa fa-check"></i> Copied!';
+                setTimeout(() => {
+                    this.innerHTML = '<i class="fa fa-copy"></i> Copy Report';
+                }, 2000);
+            } catch (err) {
+                console.error('Failed to copy: ', err);
+            } finally {
+                selection.removeAllRanges();
+                document.body.removeChild(tempDiv);
+            }
+        });
+
+        // Custom date container click handler
+        document.getElementById('customDateContainer').addEventListener('click', () => {
+            document.querySelectorAll('input[name="timeframe"]').forEach(radio => {
+                radio.checked = false
+                radio.dataset.wasChecked = 'false'
+            });
+
+            const startDateInput = document.getElementById('startingDate');
+            const endDateInput = document.getElementById('endingDate');
+            startDateInput.readOnly = false;
+            endDateInput.readOnly = false;
+
+            chrome.storage.local.set({
+                lastWeekContribution: false,
+                yesterdayContribution: false,
+                selectedTimeframe: null
+            });
+        });
+
+        chrome.storage.local.get([
+            'selectedTimeframe',
+            'lastWeekContribution',
+            'yesterdayContribution',
+            'startingDate',
+            'endingDate',
+        ], (items) => {
+            console.log('Restoring state:', items);
+
+
+            if (items.startingDate && items.endingDate && !items.lastWeekContribution && !items.yesterdayContribution) {
+                const startDateInput = document.getElementById('startingDate');
+                const endDateInput = document.getElementById('endingDate');
+
+                if (startDateInput && endDateInput) {
+
+                    startDateInput.value = items.startingDate;
+                    endDateInput.value = items.endingDate;
+                    startDateInput.readOnly = false;
+                    endDateInput.readOnly = false;
+                }
+                document.querySelectorAll('input[name="timeframe"]').forEach(radio => {
+                    radio.checked = false;
+                    radio.dataset.wasChecked = 'false';
+                })
+                return;
+            }
+
+            if (!items.selectedTimeframe) {
+                items.selectedTimeframe = 'yesterdayContribution';
+                items.lastWeekContribution = false;
+                items.yesterdayContribution = true;
+            }
+
+            const radio = document.getElementById(items.selectedTimeframe);
+            if (radio) {
+                radio.checked = true;
+                radio.dataset.wasChecked = 'true';
+
+                const startDateInput = document.getElementById('startingDate');
+                const endDateInput = document.getElementById('endingDate');
+
+                if (items.selectedTimeframe === 'lastWeekContribution') {
+                    startDateInput.value = getLastWeek();
+                    endDateInput.value = getToday();
+                } else {
+                    startDateInput.value = getYesterday();
+                    endDateInput.value = getToday();
+                }
+                startDateInput.readOnly = endDateInput.readOnly = true;
+
+                chrome.storage.local.set({
+                    startingDate: startDateInput.value,
+                    endingDate: endDateInput.value,
+                    lastWeekContribution: items.selectedTimeframe === 'lastWeekContribution',
+                    yesterdayContribution: items.selectedTimeframe === 'yesterdayContribution',
+                    selectedTimeframe: items.selectedTimeframe
+                });
+            }
+        });
+    }
+
+    function showReportView() {
+        isSettingsVisible = false;
+        reportSection.classList.remove('hidden');
+        settingsSection.classList.add('hidden');
+        settingsToggle.classList.remove('active');
+        console.log('Switched to report view');
+    }
+
+    function showSettingsView() {
+        isSettingsVisible = true;
+        reportSection.classList.add('hidden');
+        settingsSection.classList.remove('hidden');
+        settingsToggle.classList.add('active');
+        console.log('Switched to settings view');
+    }
+
+    if (settingsToggle) {
+        settingsToggle.addEventListener('click', function () {
+            if (isSettingsVisible) {
+                showReportView();
+            } else {
+                showSettingsView();
+            }
+        });
+    }
+
+    if (homeButton) {
+        homeButton.addEventListener('click', showReportView);
+    }
+    if (scrumHelperHeading) {
+        scrumHelperHeading.addEventListener('click', showReportView);
+    }
+
+    showReportView();
+
+    // Load org from storage or default
+    chrome.storage.local.get(['orgName'], function (result) {
+        orgInput.value = result.orgName || '';
+    });
+
+    // Auto-update orgName in storage on input change
+    orgInput.addEventListener('input', function () {
+        let org = orgInput.value.trim().toLowerCase();
+        // Allow empty org to fetch all GitHub activities
+        chrome.storage.local.set({ orgName: org }, function () {
+            chrome.storage.local.remove('githubCache'); // Clear cache on org change
+        });
+    });
+
+    // Add click event for setOrgBtn to set org
+    setOrgBtn.addEventListener('click', function () {
+        let org = orgInput.value.trim().toLowerCase();
+        // Do not default to any org, allow empty string
+        // if (!org) {
+        //     org = 'fossasia';
+        // }
+        console.log('[Org Check] Checking organization:', org);
+        if (!org) {
+            // If org is empty, clear orgName in storage but don't auto-generate report
+            chrome.storage.local.set({ orgName: '' }, function () {
+                console.log('[Org Check] Organization cleared from storage');
+            });
+            return;
+        }
+
+        setOrgBtn.disabled = true;
+        const originalText = setOrgBtn.innerHTML;
+        setOrgBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
+
+        fetch(`https://api.github.com/orgs/${org}`)
+            .then(res => {
+                if (res.status === 404) {
+                    setOrgBtn.disabled = false;
+                    setOrgBtn.innerHTML = originalText;
+                    const oldToast = document.getElementById('invalid-org-toast');
+                    if (oldToast) oldToast.parentNode.removeChild(oldToast);
+                    const toastDiv = document.createElement('div');
+                    toastDiv.id = 'invalid-org-toast';
+                    toastDiv.className = 'toast';
+                    toastDiv.style.background = '#dc2626';
+                    toastDiv.style.color = '#fff';
+                    toastDiv.style.fontWeight = 'bold';
+                    toastDiv.style.padding = '12px 24px';
+                    toastDiv.style.borderRadius = '8px';
+                    toastDiv.style.position = 'fixed';
+                    toastDiv.style.top = '24px';
+                    toastDiv.style.left = '50%';
+                    toastDiv.style.transform = 'translateX(-50%)';
+                    toastDiv.style.zIndex = '9999';
+                    toastDiv.innerText = 'Organization not found on GitHub.';
+                    document.body.appendChild(toastDiv);
+                    setTimeout(() => {
+                        if (toastDiv.parentNode) toastDiv.parentNode.removeChild(toastDiv);
+                    }, 3000);
+                    return;
+                }
+                const oldToast = document.getElementById('invalid-org-toast');
+                if (oldToast) oldToast.parentNode.removeChild(oldToast);
+
+                chrome.storage.local.set({ orgName: org }, function () {
+                    // Always clear the scrum report and show org changed message
+                    const scrumReport = document.getElementById('scrumReport');
+                    if (scrumReport) {
+                        scrumReport.innerHTML = '<p style="text-align: center; color: #666; padding: 20px;">Organization changed. Click Generate button to fetch the GitHub activities.</p>';
+                    }
+                    // Clear the githubCache for previous org
+                    chrome.storage.local.remove('githubCache');
+                    setOrgBtn.disabled = false;
+                    setOrgBtn.innerHTML = originalText;
+                    // Always show green toast: org is set
+                    const toastDiv = document.createElement('div');
+                    toastDiv.id = 'invalid-org-toast';
+                    toastDiv.className = 'toast';
+                    toastDiv.style.background = '#10b981';
+                    toastDiv.style.color = '#fff';
+                    toastDiv.style.fontWeight = 'bold';
+                    toastDiv.style.padding = '12px 24px';
+                    toastDiv.style.borderRadius = '8px';
+                    toastDiv.style.position = 'fixed';
+                    toastDiv.style.top = '24px';
+                    toastDiv.style.left = '50%';
+                    toastDiv.style.transform = 'translateX(-50%)';
+                    toastDiv.style.zIndex = '9999';
+                    toastDiv.innerText = 'Organization is set.';
+                    document.body.appendChild(toastDiv);
+                    setTimeout(() => {
+                        if (toastDiv.parentNode) toastDiv.parentNode.removeChild(toastDiv);
+                    }, 2500);
+
+                });
+            })
+            .catch((err) => {
+                setOrgBtn.disabled = false;
+                setOrgBtn.innerHTML = originalText;
+                const oldToast = document.getElementById('invalid-org-toast');
+                if (oldToast) oldToast.parentNode.removeChild(oldToast);
+                const toastDiv = document.createElement('div');
+                toastDiv.id = 'invalid-org-toast';
+                toastDiv.className = 'toast';
+                toastDiv.style.background = '#dc2626';
+                toastDiv.style.color = '#fff';
+                toastDiv.style.fontWeight = 'bold';
+                toastDiv.style.padding = '12px 24px';
+                toastDiv.style.borderRadius = '8px';
+                toastDiv.style.position = 'fixed';
+                toastDiv.style.top = '24px';
+                toastDiv.style.left = '50%';
+                toastDiv.style.transform = 'translateX(-50%)';
+                toastDiv.style.zIndex = '9999';
+                toastDiv.innerText = 'Error validating organization.';
+                document.body.appendChild(toastDiv);
+                setTimeout(() => {
+                    if (toastDiv.parentNode) toastDiv.parentNode.removeChild(toastDiv);
+                }, 3000);
+            });
+    });
+
+    let cacheInput = document.getElementById('cacheInput');
+    if (cacheInput) {
+        chrome.storage.local.get(['cacheInput'], function (result) {
+            if (result.cacheInput) {
+                cacheInput.value = result.cacheInput;
+            } else {
+                cacheInput.value = 10;
+            }
+        });
+
+        cacheInput.addEventListener('blur', function () {
+            let ttlValue = parseInt(this.value);
+            if (isNaN(ttlValue) || ttlValue <= 0 || this.value.trim() === '') {
+                ttlValue = 10;
+                this.value = ttlValue;
+                this.style.borderColor = '#ef4444';
+            } else if (ttlValue > 1440) {
+                ttlValue = 1440;
+                this.value = ttlValue;
+                this.style.borderColor = '#f59e0b';
+            } else {
+                this.style.borderColor = '#10b981';
+            }
+
+            chrome.storage.local.set({ cacheInput: ttlValue }, function () {
+                console.log('Cache TTL saved:', ttlValue, 'minutes');
+            });
+        });
+
+    }
+
+    // --- Customization Template Logic ---
+    const customizationDefaults = {
+        showBlockers: true,
+        showTasks: true,
+        showPRs: true,
+        showIssues: true,
+        showReviewedPRs: true,
+    };
+    const customizationKeys = Object.keys(customizationDefaults);
+    const customizationCheckboxes = {
+        showBlockers: document.getElementById('showBlockers'),
+        showTasks: document.getElementById('showTasks'),
+        showPRs: document.getElementById('showPRs'),
+        showIssues: document.getElementById('showIssues'),
+        showReviewedPRs: document.getElementById('showReviewedPRs'),
+    };
+
+    function loadCustomizationTemplate() {
+        chrome.storage.local.get(['customizationTemplate'], function (result) {
+            const prefs = result.customizationTemplate || customizationDefaults;
+            for (const key of customizationKeys) {
+                if (key.startsWith('show')) {
+                    if (customizationCheckboxes[key]) {
+                        customizationCheckboxes[key].checked = prefs[key] !== false;
+                    }
+                }
+            }
+        });
+    }
+
+    function saveCustomizationTemplate() {
+        const prefs = {};
+        for (const key of customizationKeys) {
+            if (key.startsWith('show')) {
+                prefs[key] = customizationCheckboxes[key] ? customizationCheckboxes[key].checked : true;
+            }
+        }
+        chrome.storage.local.set({ customizationTemplate: prefs }, function () {
+            if (templateSavedMsg) {
+                templateSavedMsg.style.display = 'inline';
+                setTimeout(() => { templateSavedMsg.style.display = 'none'; }, 1500);
+            }
+        });
+    }
+
+    if (saveTemplateBtn) {
+        saveTemplateBtn.addEventListener('click', saveCustomizationTemplate);
+    }
+    loadCustomizationTemplate();
+
+    // --- Named Template Management ---
+    const templateNameInput = document.getElementById('templateNameInput');
+    const saveNamedTemplateBtn = document.getElementById('saveNamedTemplateBtn');
+    const templatesList = document.getElementById('templatesList');
+    const namedTemplateMsg = document.getElementById('namedTemplateMsg');
+    const loadTemplateBtn = document.getElementById('loadTemplateBtn');
+    const deleteTemplateBtn = document.getElementById('deleteTemplateBtn');
+    let selectedTemplateName = null;
+
+    function getCurrentCustomizationConfig() {
+        const prefs = {};
+        for (const key of customizationKeys) {
+            if (key.startsWith('show')) {
+                prefs[key] = customizationCheckboxes[key] ? customizationCheckboxes[key].checked : true;
+            }
+        }
+        return prefs;
+    }
+
+    function updateTemplatesListUI(selectedName = null) {
+        chrome.storage.local.get(['templates'], function (result) {
+            const templates = result.templates || {};
+            templatesList.innerHTML = '';
+            Object.keys(templates).forEach(name => {
+                const li = document.createElement('li');
+                li.className = 'flex flex-row items-center gap-2 px-2 py-1 rounded hover:bg-blue-100';
+                const nameSpan = document.createElement('span');
+                nameSpan.textContent = name;
+                if (name === selectedName) {
+                    li.classList.add('bg-blue-200');
+                }
+                // Load button
+                const loadBtn = document.createElement('button');
+                loadBtn.title = 'Load Template';
+                loadBtn.className = 'text-green-600 hover:text-green-800 px-2 py-1 rounded';
+                loadBtn.innerHTML = '<i class="fa fa-play"></i>';
+                loadBtn.addEventListener('click', function (e) {
+                    e.stopPropagation();
+                    const config = templates[name];
+                    if (!config) return;
+                    for (const key of customizationKeys) {
+                        if (key.startsWith('show')) {
+                            if (customizationCheckboxes[key]) {
+                                customizationCheckboxes[key].checked = config[key] !== false;
+                            }
+                        }
+                    }
+                    chrome.storage.local.set({ customizationTemplate: config }, function () {
+                        showNamedTemplateMsg('Template loaded!');
+                    });
+                });
+                // Delete button
+                const deleteBtn = document.createElement('button');
+                deleteBtn.title = 'Delete Template';
+                deleteBtn.className = 'text-red-600 hover:text-red-800 px-2 py-1 rounded';
+                deleteBtn.innerHTML = '<i class="fa fa-trash"></i>';
+                deleteBtn.addEventListener('click', function (e) {
+                    e.stopPropagation();
+                    delete templates[name];
+                    chrome.storage.local.set({ templates }, function () {
+                        updateTemplatesListUI();
+                        showNamedTemplateMsg('Template deleted!');
+                    });
+                });
+                li.appendChild(nameSpan);
+                li.appendChild(loadBtn);
+                li.appendChild(deleteBtn);
+                templatesList.appendChild(li);
+            });
+        });
+    }
+
+    function showNamedTemplateMsg(msg) {
+        if (namedTemplateMsg) {
+            namedTemplateMsg.textContent = msg;
+            namedTemplateMsg.style.display = 'inline';
+            setTimeout(() => { namedTemplateMsg.style.display = 'none'; }, 1500);
+        }
+    }
+
+    if (saveNamedTemplateBtn) {
+        saveNamedTemplateBtn.addEventListener('click', function () {
+            const name = templateNameInput.value.trim();
+            if (!name) {
+                showNamedTemplateMsg('Enter a template name!');
+                return;
+            }
+            const config = getCurrentCustomizationConfig();
+            chrome.storage.local.get(['templates'], function (result) {
+                const templates = result.templates || {};
+                templates[name] = config;
+                chrome.storage.local.set({ templates }, function () {
+                    showNamedTemplateMsg('Template saved!');
+                    updateTemplatesListUI(name);
+                });
+            });
+        });
+    }
+
+    if (loadTemplateBtn) {
+        loadTemplateBtn.addEventListener('click', function () {
+            if (!selectedTemplateName) return;
+            chrome.storage.local.get(['templates'], function (result) {
+                const templates = result.templates || {};
+                const config = templates[selectedTemplateName];
+                if (!config) return;
+                // Apply config to UI
+                for (const key of customizationKeys) {
+                    if (key.startsWith('show')) {
+                        if (customizationCheckboxes[key]) {
+                            customizationCheckboxes[key].checked = config[key] !== false;
+                        }
+                    }
+                }
+                // Save as current customizationTemplate
+                chrome.storage.local.set({ customizationTemplate: config }, function () {
+                    showNamedTemplateMsg('Template loaded!');
+                });
+            });
+        });
+    }
+
+    if (deleteTemplateBtn) {
+        deleteTemplateBtn.addEventListener('click', function () {
+            if (!selectedTemplateName) return;
+            chrome.storage.local.get(['templates'], function (result) {
+                const templates = result.templates || {};
+                if (!templates[selectedTemplateName]) return;
+                delete templates[selectedTemplateName];
+                chrome.storage.local.set({ templates }, function () {
+                    selectedTemplateName = null;
+                    updateTemplatesListUI();
+                    showNamedTemplateMsg('Template deleted!');
+                });
+            });
+        });
+    }
+
+    updateTemplatesListUI();
+
+    // Add event listener for showOpenLabel checkbox to save its value
+    const showOpenLabelCheckbox = document.getElementById('showOpenLabel');
+    if (showOpenLabelCheckbox) {
+        showOpenLabelCheckbox.addEventListener('change', function () {
+            chrome.storage.local.set({ showOpenLabel: showOpenLabelCheckbox.checked });
+        });
+    }
+
+});
+
+// Tooltip bubble 
+document.querySelectorAll('.tooltip-container').forEach(container => {
+    const bubble = container.querySelector('.tooltip-bubble');
+    if (!bubble) return;
+
+    function positionTooltip() {
+        const icon = container.querySelector('.question-icon') || container;
+        const rect = icon.getBoundingClientRect();
+        const bubbleRect = bubble.getBoundingClientRect();
+        const padding = 8;
+
+        let top = rect.top + window.scrollY;
+        let left = rect.right + padding + window.scrollX;
+
+        if (left + bubbleRect.width > window.innerWidth - 10) {
+            left = rect.left - bubbleRect.width - padding + window.scrollX;
+        }
+        if (left < 8) left = 8;
+        if (top + bubbleRect.height > window.innerHeight - 10) {
+            top = rect.top - bubbleRect.height - padding + window.scrollY;
+        }
+        if (top < 8) top = 8;
+
+        bubble.style.left = left + 'px';
+        bubble.style.top = top + 'px';
+    }
+
+    container.addEventListener('mouseenter', positionTooltip);
+    container.addEventListener('focusin', positionTooltip);
+    container.addEventListener('mousemove', positionTooltip);
+    container.addEventListener('mouseleave', () => {
+        bubble.style.left = '';
+        bubble.style.top = '';
+    });
+    container.addEventListener('focusout', () => {
+        bubble.style.left = '';
+        bubble.style.top = '';
+    });
+});
+
+// Radio button click handlers with toggle functionality
+document.querySelectorAll('input[name="timeframe"]').forEach(radio => {
+    radio.addEventListener('click', function () {
+        if (this.dataset.wasChecked === 'true') {
+            this.checked = false;
+            this.dataset.wasChecked = 'false';
+
+            const startDateInput = document.getElementById('startingDate');
+            const endDateInput = document.getElementById('endingDate');
+            startDateInput.readOnly = false;
+            endDateInput.readOnly = false;
+
+            chrome.storage.local.set({
+                lastWeekContribution: false,
+                yesterdayContribution: false,
+                selectedTimeframe: null
+            });
+        } else {
+            document.querySelectorAll('input[name="timeframe"]').forEach(r => {
+                r.dataset.wasChecked = 'false';
+            });
+            this.dataset.wasChecked = 'true';
+            toggleRadio(this);
+        }
+    });
+});
+
+// refresh cache button
+document.getElementById('refreshCache').addEventListener('click', async function () {
+    const button = this;
+    const originalText = button.innerHTML;
+
+    button.classList.add('loading');
+    button.innerHTML = '<i class="fa fa-refresh fa-spin"></i><span>Refreshing...</span>';
+    button.disabled = true;
+
+    try {
+        // Clear local cache
+        await forceGithubDataRefresh();
+
+        // Clear the scrum report
+        const scrumReport = document.getElementById('scrumReport');
+        if (scrumReport) {
+            scrumReport.innerHTML = '<p style="text-align: center; color: #666; padding: 20px;">Cache cleared successfully. Click "Generate Report" to fetch fresh data.</p>';
         }
+
+        button.innerHTML = '<i class="fa fa-check"></i><span>Cache Cleared!</span>';
+        button.classList.remove('loading');
+
+        setTimeout(() => {
+            button.innerHTML = originalText;
+            button.disabled = false;
+        }, 2000);
+
+    } catch (error) {
+        console.error('Cache clear failed:', error);
+        button.innerHTML = '<i class="fa fa-exclamation-triangle"></i><span>Failed to clear cache</span>';
+        button.classList.remove('loading');
+
+        setTimeout(() => {
+            button.innerHTML = originalText;
+            button.disabled = false;
+        }, 3000);
+    }
+});
+
+function toggleRadio(radio) {
+    const startDateInput = document.getElementById('startingDate');
+    const endDateInput = document.getElementById('endingDate');
+
+    console.log('Toggling radio:', radio.id);
+
+    if (radio.id === 'lastWeekContribution') {
+        startDateInput.value = getLastWeek();
+        endDateInput.value = getToday();
+    } else if (radio.id === 'yesterdayContribution') {
+        startDateInput.value = getYesterday();
+        endDateInput.value = getToday();
+    }
+
+    startDateInput.readOnly = endDateInput.readOnly = true;
+
+    chrome.storage.local.set({
+        startingDate: startDateInput.value,
+        endingDate: endDateInput.value,
+        lastWeekContribution: radio.id === 'lastWeekContribution',
+        yesterdayContribution: radio.id === 'yesterdayContribution',
+        selectedTimeframe: radio.id,
+        githubCache: null // Clear cache to force new fetch
+    }, () => {
+        console.log('State saved, dates:', {
+            start: startDateInput.value,
+            end: endDateInput.value,
+            isLastWeek: radio.id === 'lastWeekContribution'
+        });
     });
-});
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/scripts/scrumHelper.js b/src/scripts/scrumHelper.js
index 2f8ade3..e90dd27 100644
--- a/src/scripts/scrumHelper.js
+++ b/src/scripts/scrumHelper.js
@@ -1,43 +1,74 @@
-var enableToggle = true;
+const DEBUG = true;
+function log(...args) {
+	if (DEBUG) {
+		console.log(`[SCRUM-HELPER]:`, ...args);
+	}
+}
+function logError(...args) {
+	if (DEBUG) {
+		console.error('[SCRUM-HELPER]:', ...args);
+	}
+}
+console.log('Script loaded, adapter exists:', !!window.emailClientAdapter);
+let refreshButton_Placed = false;
+let enableToggle = true;
+let hasInjectedContent = false;
+let scrumGenerationInProgress = false;
+
+let orgName = '';
+
 function allIncluded(outputTarget = 'email') {
+	if (scrumGenerationInProgress) {
+		console.warn('[SCRUM-HELPER]: Scrum generation already in progress, aborting new call.');
+		return;
+	}
+	scrumGenerationInProgress = true;
 	console.log('allIncluded called with outputTarget:', outputTarget);
-	console.log('Current window context:', window.location.href); 
-	/* global $*/
-	var scrumBody = null;
-	var scrumSubject = null;
-	var startingDate = '';
-	var endingDate = '';
-	var githubUsername = '';
-	var projectName = '';
-	var lastWeekArray = [];
-	var nextWeekArray = [];
-	var reviewedPrsArray = [];
-	var githubIssuesData = null;
-	var lastWeekContribution = false;
-	var githubPrsReviewData = null;
-	var githubUserData = null;
-	var githubPrsReviewDataProcessed = {};
-	var showOpenLabel = true;
-	var showClosedLabel = true;
-	var userReason = '';
-	var gsoc = 0; //0 means codeheat. 1 means gsoc
-
-	var pr_merged_button =
-		'<div style="vertical-align:middle;display: inline-block;padding: 0px 4px;font-size:9px;font-weight: 600;color: #fff;text-align: center;background-color: #6f42c1;border-radius: 3px;line-height: 12px;margin-bottom: 2px;" class="State State--purple">closed</div>';
-	var pr_unmerged_button =
+	console.log('Current window context:', window.location.href);
+	let scrumBody = null;
+	let scrumSubject = null;
+	let startingDate = '';
+	let endingDate = '';
+	let githubUsername = '';
+	let githubToken = '';
+	let projectName = '';
+	let lastWeekArray = [];
+	let nextWeekArray = [];
+	let reviewedPrsArray = [];
+	let githubIssuesData = null;
+	let lastWeekContribution = false;
+	let yesterdayContribution = false;
+	let githubPrsReviewData = null;
+	let githubUserData = null;
+	let githubPrsReviewDataProcessed = {};
+	let issuesDataProcessed = false;
+	let prsReviewDataProcessed = false;
+	let showOpenLabel = true;
+	let showCommits = false;
+	let userReason = '';
+
+	let pr_open_button =
 		'<div style="vertical-align:middle;display: inline-block;padding: 0px 4px;font-size:9px;font-weight: 600;color: #fff;text-align: center;background-color: #2cbe4e;border-radius: 3px;line-height: 12px;margin-bottom: 2px;"  class="State State--green">open</div>';
+	let pr_closed_button =
+		'<div style="vertical-align:middle;display: inline-block;padding: 0px 4px;font-size:9px;font-weight: 600;color: #fff;text-align: center;background-color:rgb(210, 20, 39);border-radius: 3px;line-height: 12px;margin-bottom: 2px;" class="State State--red">closed</div>';
+	let pr_merged_button =
+		'<div style="vertical-align:middle;display: inline-block;padding: 0px 4px;font-size:9px;font-weight: 600;color: #fff;text-align: center;background-color: #6f42c1;border-radius: 3px;line-height: 12px;margin-bottom: 2px;" class="State State--purple">merged</div>';
+	let pr_draft_button =
+		'<div style="vertical-align:middle;display: inline-block;padding: 0px 4px;font-size:9px;font-weight: 600;color: #fff;text-align: center;background-color: #808080;border-radius: 3px;line-height: 12px;margin-bottom: 2px;" class="State State--gray">draft</div>';
 
-	var issue_closed_button =
-		'<div style="vertical-align:middle;display: inline-block;padding: 0px 4px;font-size:9px;font-weight: 600;color: #fff;text-align: center;background-color: #6f42c1;border-radius: 3px;line-height: 12px;margin-bottom: 2px;" class="State State--purple">closed</div>';
-	var issue_opened_button =
+	let issue_closed_button =
+		'<div style="vertical-align:middle;display: inline-block;padding: 0px 4px;font-size:9px;font-weight: 600;color: #fff;text-align: center;background-color: #d73a49;border-radius: 3px;line-height: 12px;margin-bottom: 2px;" class="State State--red">closed</div>';
+	let issue_opened_button =
 		'<div style="vertical-align:middle;display: inline-block;padding: 0px 4px;font-size:9px;font-weight: 600;color: #fff;text-align: center;background-color: #2cbe4e;border-radius: 3px;line-height: 12px;margin-bottom: 2px;"  class="State State--green">open</div>';
 
-	// var linkStyle = '';
+
+	// let linkStyle = '';
 	function getChromeData() {
 		console.log("Getting Chrome data for context:", outputTarget);
 		chrome.storage.local.get(
 			[
 				'githubUsername',
+				'githubToken',
 				'projectName',
 				'enableToggle',
 				'startingDate',
@@ -45,68 +76,110 @@ function allIncluded(outputTarget = 'email') {
 				'showOpenLabel',
 				'showClosedLabel',
 				'lastWeekContribution',
+				'yesterdayContribution',
 				'userReason',
-				'gsoc',
+				'showCommits',
+				'githubCache',
+				'cacheInput',
+				'orgName'
 			],
 			(items) => {
 				console.log("Storage items received:", items);
-				if (items.gsoc) {
-					//gsoc
-					gsoc = 1;
-				} else {
-					gsoc = 0; //codeheat
-				}
-				if (items.lastWeekContribution) {
-					lastWeekContribution = true;
-					handleLastWeekContributionChange();
+
+
+				if (outputTarget === 'popup') {
+					const usernameFromDOM = document.getElementById('githubUsername')?.value;
+					const projectFromDOM = document.getElementById('projectName')?.value;
+					const reasonFromDOM = document.getElementById('userReason')?.value;
+					const tokenFromDOM = document.getElementById('githubToken')?.value;
+
+					items.githubUsername = usernameFromDOM || items.githubUsername;
+					items.projectName = projectFromDOM || items.projectName;
+					items.userReason = reasonFromDOM || items.userReason;
+					items.githubToken = tokenFromDOM || items.githubToken;
+
+					chrome.storage.local.set({
+						githubUsername: items.githubUsername,
+						projectName: items.projectName,
+						userReason: items.userReason,
+						githubToken: items.githubToken
+					});
 				}
+
+				githubUsername = items.githubUsername;
+				projectName = items.projectName;
+				userReason = items.userReason || 'No Blocker at the moment';
+				githubToken = items.githubToken;
+				lastWeekContribution = items.lastWeekContribution;
+				yesterdayContribution = items.yesterdayContribution;
+
 				if (!items.enableToggle) {
 					enableToggle = items.enableToggle;
 				}
-				if (items.endingDate && !lastWeekContribution) {
-					endingDate = items.endingDate;
-				}
-				if (items.startingDate && !lastWeekContribution) {
+
+				if (items.lastWeekContribution) {
+					handleLastWeekContributionChange();
+				} else if (items.yesterdayContribution) {
+					handleYesterdayContributionChange();
+				} else if (items.startingDate && items.endingDate) {
 					startingDate = items.startingDate;
+					endingDate = items.endingDate;
+				} else {
+					handleLastWeekContributionChange(); //on fresh unpack - default to last week.
+					if (outputTarget === 'popup') {
+						chrome.storage.local.set({ lastWeekContribution: true, yesterdayContribution: false });
+					}
 				}
-				if (items.githubUsername) {
-					githubUsername = items.githubUsername;
-					console.log("About to fetch GitHub data for:", githubUsername);  
+				if (githubUsername) {
+					console.log("About to fetch GitHub data for:", githubUsername);
 					fetchGithubData();
-				}  else {
-                    if (outputTarget === 'popup') {
-						console.log("No username found - popup context");  
-                        // Show error in popup
-                        const generateBtn = document.getElementById('generateReport');
-                        if (generateBtn) {
-                            generateBtn.innerHTML = '<i class="fa fa-refresh"></i> Generate Report';
-                            generateBtn.disabled = false;
-                        }
-                        Materialize.toast('Please enter your GitHub username', 3000);
-                    } else {
-						console.log("No username found - email context");  
-                        console.warn('No GitHub username found in storage');
-                    }
-                }
-				if (items.projectName) {
-					projectName = items.projectName;
+				} else {
+					if (outputTarget === 'popup') {
+						console.log("No username found - popup context");
+						// Show error in popup
+						const scrumReport = document.getElementById('scrumReport');
+						const generateBtn = document.getElementById('generateReport');
+						if (scrumReport) {
+							scrumReport.innerHTML = '<div class="error-message" style="color: #dc2626; font-weight: bold; padding: 10px;">Please enter your GitHub username to generate a report.</div>';
+						}
+						if (generateBtn) {
+							generateBtn.innerHTML = '<i class="fa fa-refresh"></i> Generate Report';
+							generateBtn.disabled = false;
+						}
+						scrumGenerationInProgress = false;
+					} else {
+						console.warn('No GitHub username found in storage');
+						scrumGenerationInProgress = false;
+					}
+					return;
+				}
+				if (items.cacheInput) {
+					cacheInput = items.cacheInput;
 				}
+				if (items.showCommits !== undefined) {
+					showCommits = items.showCommits;
+				} else {
+					showCommits = false; // Default value
+				}
+
 
 				if (!items.showOpenLabel) {
 					showOpenLabel = false;
 					pr_unmerged_button = '';
 					issue_opened_button = '';
-				}
-				if (!items.showClosedLabel) {
-					showClosedLabel = false;
 					pr_merged_button = '';
 					issue_closed_button = '';
 				}
-				if (items.userReason) {
-					userReason = items.userReason;
+				if (items.githubCache) {
+					githubCache.data = items.githubCache.data;
+					githubCache.cacheKey = items.githubCache.cacheKey;
+					githubCache.timestamp = items.githubCache.timestamp;
+					log('Restored cache from storage');
 				}
-				if (!items.userReason) {
-					userReason = 'No Blocker at the moment';
+
+				if (typeof items.orgName !== 'undefined') {
+					orgName = items.orgName || '';
+					console.log('[SCRUM-HELPER] orgName set to:', orgName);
 				}
 			},
 		);
@@ -117,14 +190,17 @@ function allIncluded(outputTarget = 'email') {
 		endingDate = getToday();
 		startingDate = getLastWeek();
 	}
+	function handleYesterdayContributionChange() {
+		endingDate = getToday();
+		startingDate = getYesterday();
+	}
 	function getLastWeek() {
-		var today = new Date();
-		var noDays_to_goback = gsoc == 0 ? 7 : 1;
-		var lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - noDays_to_goback);
-		var lastWeekMonth = lastWeek.getMonth() + 1;
-		var lastWeekDay = lastWeek.getDate();
-		var lastWeekYear = lastWeek.getFullYear();
-		var lastWeekDisplayPadded =
+		let today = new Date();
+		let lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
+		let lastWeekMonth = lastWeek.getMonth() + 1;
+		let lastWeekDay = lastWeek.getDate();
+		let lastWeekYear = lastWeek.getFullYear();
+		let lastWeekDisplayPadded =
 			('0000' + lastWeekYear.toString()).slice(-4) +
 			'-' +
 			('00' + lastWeekMonth.toString()).slice(-2) +
@@ -132,13 +208,27 @@ function allIncluded(outputTarget = 'email') {
 			('00' + lastWeekDay.toString()).slice(-2);
 		return lastWeekDisplayPadded;
 	}
+	function getYesterday() {
+		let today = new Date();
+		let yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
+		let yesterdayMonth = yesterday.getMonth() + 1;
+		let yesterdayDay = yesterday.getDate();
+		let yesterdayYear = yesterday.getFullYear();
+		let yesterdayPadded =
+			('0000' + yesterdayYear.toString()).slice(-4) +
+			'-' +
+			('00' + yesterdayMonth.toString()).slice(-2) +
+			'-' +
+			('00' + yesterdayDay.toString()).slice(-2);
+		return yesterdayPadded;
+	}
 	function getToday() {
-		var today = new Date();
-		var Week = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-		var WeekMonth = Week.getMonth() + 1;
-		var WeekDay = Week.getDate();
-		var WeekYear = Week.getFullYear();
-		var WeekDisplayPadded =
+		let today = new Date();
+		let Week = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+		let WeekMonth = Week.getMonth() + 1;
+		let WeekDay = Week.getDate();
+		let WeekYear = Week.getFullYear();
+		let WeekDisplayPadded =
 			('0000' + WeekYear.toString()).slice(-4) +
 			'-' +
 			('00' + WeekMonth.toString()).slice(-2) +
@@ -146,72 +236,405 @@ function allIncluded(outputTarget = 'email') {
 			('00' + WeekDay.toString()).slice(-2);
 		return WeekDisplayPadded;
 	}
-	// fetch github data
-	function fetchGithubData() {
-		var issueUrl = 'https://api.github.com/search/issues?q=author%3A' +
-			githubUsername +
-			'+org%3Afossasia+created%3A' +
-			startingDate +
-			'..' +
-			endingDate +
-			'&per_page=100';
-
-		$.ajax({
-			dataType: 'json',
-			type: 'GET',
-			url: issueUrl,
-			error: (xhr, textStatus, errorThrown) => {
-				console.error('Error fetching GitHub data:', {
-					status: xhr.status,
-					textStatus: textStatus,
-					error: errorThrown
-				});
-			},
-			success: (data) => {
-				githubIssuesData = data;
-				writeGithubIssuesPrs();
-			},
+
+	// Global cache object
+	let githubCache = {
+		data: null,
+		cacheKey: null,
+		timestamp: 0,
+		ttl: 10 * 60 * 1000, // cache valid for 10 mins
+		fetching: false,
+		queue: [],
+		errors: {},
+		errorTTL: 60 * 1000, // 1 min error cache 
+		subject: null,
+	};
+
+	async function getCacheTTL() {
+		return new Promise((resolve) => {
+			chrome.storage.local.get(['cacheInput'], function (result) {
+				const ttlMinutes = result.cacheInput || 10;
+				resolve(ttlMinutes * 60 * 1000);
+			});
+		});
+	}
+
+
+	function saveToStorage(data, subject = null) {
+		const cacheData = {
+			data: data,
+			cacheKey: githubCache.cacheKey,
+			timestamp: githubCache.timestamp,
+			subject: subject,
+		}
+		log(`Saving data to storage:`, {
+			cacheKey: githubCache.cacheKey,
+			timestamp: githubCache.timestamp,
+			hasSubject: !!subject,
 		});
 
-		// PR reviews fetch
-		var prUrl = 'https://api.github.com/search/issues?q=commenter%3A' +
-			githubUsername +
-			'+org%3Afossasia+updated%3A' +
-			startingDate +
-			'..' +
-			endingDate +
-			'&per_page=100';
-
-		$.ajax({
-			dataType: 'json',
-			type: 'GET',
-			url: prUrl,
-			error: (xhr, textStatus, errorThrown) => {
-				console.error('Error fetching PR reviews:', {
-					status: xhr.status,
-					textStatus: textStatus,
-					error: errorThrown
+		return new Promise((resolve) => {
+			chrome.storage.local.set({ githubCache: cacheData }, () => {
+				if (chrome.runtime.lastError) {
+					logError('Storage save failed: ', chrome.runtime.lastError);
+					resolve(false);
+				} else {
+					log('Cache saved successfuly');
+					githubCache.data = data;
+					githubCache.subject = subject;
+					resolve(true);
+				}
+			});
+		});
+	}
+
+	function loadFromStorage() {
+		log('Loading cache from storage');
+		return new Promise(async (resolve) => {
+			const currentTTL = await getCacheTTL();
+			chrome.storage.local.get('githubCache', (result) => {
+				const cache = result.githubCache;
+				if (!cache) {
+					log('No cache found in storage');
+					resolve(false);
+					return;
+				}
+				const isCacheExpired = (Date.now() - cache.timestamp) > currentTTL;
+				if (isCacheExpired) {
+					log('Cached data is expired');
+					resolve(false);
+					return;
+				}
+				log('Found valid cache:', {
+					cacheKey: cache.cacheKey,
+					age: `${((Date.now() - cache.timestamp) / 1000 / 60).toFixed(1)} minutes`,
 				});
-			},
-			success: (data) => {
-				githubPrsReviewData = data;
-				writeGithubPrsReviews();
-			},
+
+				githubCache.data = cache.data;
+				githubCache.cacheKey = cache.cacheKey;
+				githubCache.timestamp = cache.timestamp;
+				githubCache.subject = cache.subject;
+				githubCache.usedToken = cache.usedToken || false;
+
+
+				if (cache.subject && scrumSubject) {
+					scrumSubject.value = cache.subject;
+					scrumSubject.dispatchEvent(new Event('input', { bubbles: true }));
+				}
+				resolve(true);
+			});
 		});
-		// fetch github user data
-		var userUrl = 'https://api.github.com/users/' + githubUsername;
-		$.ajax({
-			dataType: 'json',
-			type: 'GET',
-			url: userUrl,
-			error: (xhr, textStatus, errorThrown) => {
-				// error
-			},
-			success: (data) => {
-				githubUserData = data;
+	}
+
+	async function fetchGithubData() {
+		const cacheKey = `${githubUsername}-${startingDate}-${endingDate}-${orgName || 'all'}`;
+
+		if (githubCache.fetching || (githubCache.cacheKey === cacheKey && githubCache.data)) {
+			log('Fetch already in progress or data already fetched. Skipping fetch.');
+			return;
+		}
+
+		log('Fetching Github data:', {
+			username: githubUsername,
+			startDate: startingDate,
+			endDate: endingDate,
+		});
+
+		log('CacheKey in cache:', githubCache.cacheKey);
+		log('Incoming cacheKey:', cacheKey);
+		log('Has data:', !!githubCache.data);
+
+		// Check if we need to load from storage
+		if (!githubCache.data && !githubCache.fetching) {
+			await loadFromStorage();
+		};
+
+		const currentTTL = await getCacheTTL();
+		githubCache.ttl = currentTTL;
+		log(`Caching for ${currentTTL / (60 * 1000)} minutes`);
+
+		const now = Date.now();
+		const isCacheFresh = (now - githubCache.timestamp) < githubCache.ttl;
+		const isCacheKeyMatch = githubCache.cacheKey === cacheKey;
+		const needsToken = !!githubToken;
+		const cacheUsedToken = !!githubCache.usedToken;
+		if (githubCache.data && isCacheFresh & isCacheKeyMatch) { //should be && check after rebase
+			if (needsToken & !cacheUsedToken) {
+				log('Cache was fetched without token, but user now has a token. Invalidating cache.');
+				githubCache.data = null;
+			} else {
+				log('Using cached data - cache is fresh and key matches');
+				processGithubData(githubCache.data);
+				return Promise.resolve();
+			}
+		}
+		// if cache key does not match our cache is stale, fetch new data
+		if (!isCacheKeyMatch) {
+			log('Cache key mismatch - fetching new Data');
+			githubCache.data = null;
+		} else if (!isCacheFresh) {
+			log('Cache is stale - fetching new data');
+		}
+
+		// if fetching is in progress, queue the calls and return a promise resolved when done
+		if (githubCache.fetching) {
+			log('Fetch in progress, queuing requests');
+			return new Promise((resolve, reject) => {
+				githubCache.queue.push({ resolve, reject });
+			});
+		}
+
+		githubCache.fetching = true;
+		githubCache.cacheKey = cacheKey;
+
+		const headers = {
+			'Accept': 'application/vnd.github.v3+json',
+		};
+
+		if (githubToken) {
+			log('Making authenticated requests.');
+			headers['Authorization'] = `token ${githubToken}`;
+
+		} else {
+			log('Making public requests');
+		}
+
+		// Build org part for query only if orgName is set and not empty
+		console.log('[SCRUM-HELPER] orgName before API query:', orgName);
+		console.log('[SCRUM-HELPER] orgName type:', typeof orgName);
+		console.log('[SCRUM-HELPER] orgName length:', orgName ? orgName.length : 0);
+		let orgPart = orgName && orgName.trim() ? `+org%3A${orgName}` : '';
+		console.log('[SCRUM-HELPER] orgPart for API:', orgPart);
+		console.log('[SCRUM-HELPER] orgPart length:', orgPart.length);
+		let issueUrl = `https://api.github.com/search/issues?q=author%3A${githubUsername}${orgPart}+updated%3A${startingDate}..${endingDate}&per_page=100`;
+		let prUrl = `https://api.github.com/search/issues?q=commenter%3A${githubUsername}${orgPart}+updated%3A${startingDate}..${endingDate}&per_page=100`;
+		console.log('[SCRUM-HELPER] issueUrl:', issueUrl);
+		console.log('[SCRUM-HELPER] prUrl:', prUrl);
+		let userUrl = `https://api.github.com/users/${githubUsername}`;
+
+		try {
+			// throttling 500ms to avoid burst
+			await new Promise(res => setTimeout(res, 500));
+
+			const [issuesRes, prRes, userRes] = await Promise.all([
+				fetch(issueUrl, { headers }),
+				fetch(prUrl, { headers }),
+				fetch(userUrl, { headers }),
+			]);
+
+			if (issuesRes.status === 401 || prRes.status === 401 || userRes.status === 401 ||
+				issuesRes.status === 403 || prRes.status === 403 || userRes.status === 403) {
+				showInvalidTokenMessage();
+				return;
+			}
+
+			if (issuesRes.status === 404 || prRes.status === 404) {
+				if (outputTarget === 'popup') {
+					Materialize.toast && Materialize.toast('Organization not found on GitHub', 3000);
+				}
+				throw new Error('Organization not found');
+			}
+
+			if (!issuesRes.ok) throw new Error(`Error fetching Github issues: ${issuesRes.status} ${issuesRes.statusText}`);
+			if (!prRes.ok) throw new Error(`Error fetching Github PR review data: ${prRes.status} ${prRes.statusText}`);
+			if (!userRes.ok) throw new Error(`Error fetching Github userdata: ${userRes.status} ${userRes.statusText}`);
+
+			githubIssuesData = await issuesRes.json();
+			githubPrsReviewData = await prRes.json();
+			githubUserData = await userRes.json();
+
+			if (githubIssuesData && githubIssuesData.items) {
+				log('Fetched githubIssuesData:', githubIssuesData.items.length, 'items');
+				// Collect open PRs
+				const openPRs = githubIssuesData.items.filter(
+					item => item.pull_request && item.state === 'open'
+				);
+				log('Open PRs for commit fetching:', openPRs.map(pr => pr.number));
+				// Fetch commits for open PRs (batch)
+				if (openPRs.length && githubToken) {
+					const commitMap = await fetchCommitsForOpenPRs(openPRs, githubToken, startingDate, endingDate);
+					log('Commit map returned from fetchCommitsForOpenPRs:', commitMap);
+					// Attach commits to PR objects
+					openPRs.forEach(pr => {
+						pr._allCommits = commitMap[pr.number] || [];
+						log(`Attached ${pr._allCommits.length} commits to PR #${pr.number}`);
+					});
+				}
+			}
+
+			// Cache the data
+			githubCache.data = { githubIssuesData, githubPrsReviewData, githubUserData };
+			githubCache.timestamp = Date.now();
+
+			await saveToStorage(githubCache.data);
+			processGithubData(githubCache.data);
+
+			// Resolve queued calls
+			githubCache.queue.forEach(({ resolve }) => resolve());
+			githubCache.queue = [];
+		} catch (err) {
+			logError('Fetch Failed:', err);
+			// Reject queued calls on error
+			githubCache.queue.forEach(({ reject }) => reject(err));
+			githubCache.queue = [];
+			githubCache.fetching = false;
+
+			if (outputTarget === 'popup') {
+				const generateBtn = document.getElementById('generateReport');
+				if (scrumReport) {
+					let errorMsg = 'An error occurred while generating the report.';
+					if (err) {
+						if (typeof err === 'string') errorMsg = err;
+						else if (err.message) errorMsg = err.message;
+						else errorMsg = JSON.stringify(err)
+					}
+					scrumReport.innerHTML = `<div class="error-message" style="color: #dc2626; font-weight: bold; padding: 10px;">${err.message || 'An error occurred while generating the report.'}</div>`;
+					generateBtn.innerHTML = '<i class="fa fa-refresh"></i> Generate Report';
+					generateBtn.disabled = false;
+				}
+				if (generateBtn) {
+					generateBtn.innerHTML = '<i class="fa fa-refresh"></i> Generate Report';
+					generateBtn.disabled = false;
+				}
+			}
+			scrumGenerationInProgress = false;
+			throw err;
+		} finally {
+			githubCache.fetching = false;
+		}
+	}
+
+	async function fetchCommitsForOpenPRs(prs, githubToken, startDate, endDate) {
+		log('fetchCommitsForOpenPRs called with PRs:', prs.map(pr => pr.number), 'startDate:', startDate, 'endDate:', endDate);
+		if (!prs.length) return {};
+		const since = new Date(startDate).toISOString();
+		const until = new Date(endDate + 'T23:59:59').toISOString();
+		let queries = prs.map((pr, idx) => {
+			const repoParts = pr.repository_url.split('/');
+			const owner = repoParts[repoParts.length - 2];
+			const repo = repoParts[repoParts.length - 1];
+			return `
+					pr${idx}: repository(owner: "${owner}", name: "${repo}") {
+						pullRequest(number: ${pr.number}) {
+							commits(first: 100) {
+								nodes {
+									commit {
+										messageHeadline
+										committedDate
+										url
+										author {
+											name
+											user { login }
+										}
+									}
+								}
+							}
+						}
+
+					}`;
+		}).join('\n');
+		const query = `query { ${queries} }`;
+		log('GraphQL query for commits:', query);
+		const res = await fetch('https://api.github.com/graphql', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				...(githubToken ? { Authorization: `bearer ${githubToken}` } : {})
 			},
+			body: JSON.stringify({ query })
+		});
+		log('fetchCommitsForOpenPRs response status:', res.status);
+		const data = await res.json();
+		log('fetchCommitsForOpenPRs response data:', data);
+		let commitMap = {};
+		prs.forEach((pr, idx) => {
+			const prData = data.data && data.data[`pr${idx}`] && data.data[`pr${idx}`].pullRequest;
+			if (prData && prData.commits && prData.commits.nodes) {
+				const allCommits = prData.commits.nodes.map(n => n.commit);
+				log(`PR #${pr.number} allCommits:`, allCommits);
+				const filteredCommits = allCommits.filter(commit => {
+					const commitDate = new Date(commit.committedDate);
+					const sinceDate = new Date(since);
+					const untilDate = new Date(until);
+					return commitDate >= sinceDate && commitDate <= untilDate;
+				});
+				log(`PR #${pr.number} filteredCommits:`, filteredCommits);
+				commitMap[pr.number] = filteredCommits;
+			} else {
+				log(`No commits found for PR #${pr.number}`);
+			}
+		});
+		return commitMap;
+	}
+	async function verifyCacheStatus() {
+		log('Cache Status: ', {
+			hasCachedData: !!githubCache.data,
+			cacheAge: githubCache.timestamp ? `${((Date.now() - githubCache.timestamp) / 1000 / 60).toFixed(1)} minutes` : `no cache`,
+			cacheKey: githubCache.cacheKey,
+			isFetching: githubCache.fetching,
+			queueLength: githubCache.queue.length
+		});
+		const storageData = await new Promise(resolve => {
+			chrome.storage.local.get('githubCache', resolve);
+		});
+		log('Storage Status:', {
+			hasStoredData: !!storageData.githubCache,
+			storedCacheKey: storageData.githubCache?.cacheKey,
+			storageAge: storageData.githubCache?.timestamp ?
+				`${((Date.now() - storageData.githubCache.timestamp) / 1000 / 60).toFixed(1)} minutes` :
+				'no data'
 		});
 	}
+	verifyCacheStatus();
+
+	function showInvalidTokenMessage() {
+		if (outputTarget === 'popup') {
+			const reportDiv = document.getElementById('scrumReport');
+			if (reportDiv) {
+				reportDiv.innerHTML = '<div class="error-message" style="color: #dc2626; font-weight: bold; padding: 10px;">Invalid or expired GitHub token. Please check your token in the settings and try again.</div>';
+				const generateBtn = document.getElementById('generateReport');
+				if (generateBtn) {
+					generateBtn.innerHTML = '<i class="fa fa-refresh"></i> Generate Report';
+					generateBtn.disabled = false;
+				}
+			} else {
+				alert('Invalid or expired GitHub token. Please check your token in the extension popup and try again.');
+			}
+		}
+	}
+
+	async function processGithubData(data) {
+		log('Processing Github data');
+		githubIssuesData = data.githubIssuesData;
+		githubPrsReviewData = data.githubPrsReviewData;
+		githubUserData = data.githubUserData;
+
+		log('GitHub data set:', {
+			issues: githubIssuesData?.items?.length || 0,
+			prs: githubPrsReviewData?.items?.length || 0,
+			user: githubUserData?.login
+		});
+
+
+		lastWeekArray = [];
+		nextWeekArray = [];
+		reviewedPrsArray = [];
+		githubPrsReviewDataProcessed = {};
+
+		issuesDataProcessed = false;
+		prsReviewDataProcessed = false;
+
+		// Update subject
+		if (!githubCache.subject && scrumSubject) {
+			scrumSubjectLoaded();
+		}
+		await Promise.all([
+			writeGithubIssuesPrs(),
+			writeGithubPrsReviews(),
+		])
+		log('Both data processing functions completed, generating scrum body');
+		writeScrumBody();
+	}
 
 	function formatDate(dateString) {
 		const date = new Date(dateString);
@@ -221,125 +644,231 @@ function allIncluded(outputTarget = 'email') {
 
 	//load initial text in scrum body
 	function writeScrumBody() {
-		if (!enableToggle) return;
+		if (!enableToggle || (outputTarget === 'email' && hasInjectedContent)) return;
+
+		if (outputTarget === 'email') {
+			if (!window.emailClientAdapter) {
+				console.error('Email client adapter not found');
+				return;
+			}
+			if (!window.emailClientAdapter.isNewConversation()) {
+				console.log('Not a new conversation, skipping scrum helper');
+				return;
+			}
+		}
+
+		// --- Customization Template Logic for popup ---
+		if (outputTarget === 'popup') {
+			chrome.storage.local.get(['customizationTemplate'], function (result) {
+				const prefs = result.customizationTemplate || {
+					showBlockers: true,
+					showTasks: true,
+					showPRs: true,
+					showIssues: true,
+					showReviewedPRs: true,
+				};
+
+				// Filter and build sections based on prefs
+				let lastWeekUl = '<ul>';
+				let i;
+				// PRs, Issues, Tasks, etc. are in lastWeekArray, reviewedPrsArray
+				let lastWeekItems = [];
+				if (prefs.showTasks) {
+					// Tasks are typically in lastWeekArray (non-PR/Issue items)
+					lastWeekItems = lastWeekItems.concat(lastWeekArray.filter(x => x && !x.includes('PR') && !x.includes('Issue')));
+				}
+				if (prefs.showPRs) {
+					lastWeekItems = lastWeekItems.concat(lastWeekArray.filter(x => x && x.includes('PR') && !x.includes('Reviewed')));
+				}
+				if (prefs.showIssues) {
+					lastWeekItems = lastWeekItems.concat(lastWeekArray.filter(x => x && x.includes('Issue')));
+				}
+				if (prefs.showReviewedPRs) {
+					lastWeekItems = lastWeekItems.concat(reviewedPrsArray);
+				}
+				// No sorting by repo/date
+				for (i = 0; i < lastWeekItems.length; i++) lastWeekUl += lastWeekItems[i];
+				lastWeekUl += '</ul>';
+
+				let nextWeekUl = '<ul>';
+				for (i = 0; i < nextWeekArray.length; i++) nextWeekUl += nextWeekArray[i];
+				nextWeekUl += '</ul>';
+
+				let weekOrDay = lastWeekContribution ? 'last week' : (yesterdayContribution ? 'yesterday' : 'the period');
+				let weekOrDay2 = lastWeekContribution ? 'this week' : 'today';
+
+				// Blockers section
+				let blockersSection = '';
+				if (prefs.showBlockers) {
+					blockersSection = `<b>3. What is blocking me from making progress?</b><br>\n${userReason}`;
+				}
+
+				// Create the complete content
+				let content;
+				if (lastWeekContribution == true || yesterdayContribution == true) {
+					content = `<b>1. What did I do ${weekOrDay}?</b><br>\n${lastWeekUl}<br>\n<b>2. What do I plan to do ${weekOrDay2}?</b><br>\n${nextWeekUl}<br>\n${blockersSection}`;
+				} else {
+					content = `<b>1. What did I do from ${formatDate(startingDate)} to ${formatDate(endingDate)}?</b><br>\n${lastWeekUl}<br>\n<b>2. What do I plan to do ${weekOrDay2}?</b><br>\n${nextWeekUl}<br>\n${blockersSection}`;
+				}
+
+				const scrumReport = document.getElementById('scrumReport');
+				if (scrumReport) {
+					log("found div, updating content");
+					scrumReport.innerHTML = content;
+
+					// Reset generate button
+					const generateBtn = document.getElementById('generateReport');
+					if (generateBtn) {
+						generateBtn.innerHTML = '<i class="fa fa-refresh"></i> Generate Report';
+						generateBtn.disabled = false;
+					}
+					scrumGenerationInProgress = false;
+				} else {
+					logError('Scrum report div not found');
+					scrumGenerationInProgress = false;
+				}
+			});
+			return; // Don't run the rest of the function for popup
+		}
+
+		if (outputTarget === 'email') {
+			if (!window.emailClientAdapter) {
+				console.error('Email client adapter not found');
+				return;
+			}
+			if (!window.emailClientAdapter.isNewConversation()) {
+				console.log('Not a new conversation, skipping scrum helper');
+				return;
+			}
+		}
 
 		setTimeout(() => {
 			// Generate content first
-			var lastWeekUl = '<ul>';
-			var i;
+			let lastWeekUl = '<ul>';
+			let i;
 			for (i = 0; i < lastWeekArray.length; i++) lastWeekUl += lastWeekArray[i];
 			for (i = 0; i < reviewedPrsArray.length; i++) lastWeekUl += reviewedPrsArray[i];
 			lastWeekUl += '</ul>';
 
-			var nextWeekUl = '<ul>';
+			let nextWeekUl = '<ul>';
 			for (i = 0; i < nextWeekArray.length; i++) nextWeekUl += nextWeekArray[i];
 			nextWeekUl += '</ul>';
 
-			var weekOrDay = gsoc == 1 ? 'yesterday' : 'last week';
-			var weekOrDay2 = gsoc == 1 ? 'today' : 'this week';
+			let weekOrDay = lastWeekContribution ? 'last week' : (yesterdayContribution ? 'yesterday' : 'the period');
+			let weekOrDay2 = lastWeekContribution ? 'this week' : 'today';
 
 			// Create the complete content
 			let content;
-        if (lastWeekContribution == true) {
-            content = `<b>1. What did I do ${weekOrDay}?</b><br>
+			if (lastWeekContribution == true || yesterdayContribution == true) {
+				content = `<b>1. What did I do ${weekOrDay}?</b><br>
 ${lastWeekUl}<br>
-<b>2. What I plan to do ${weekOrDay2}?</b><br>
+<b>2. What do I plan to do ${weekOrDay2}?</b><br>
 ${nextWeekUl}<br>
-<b>3. What is stopping me from doing my work?</b><br>
+<b>3. What is blocking me from making progress?</b><br>
 ${userReason}`;
-        } else {
-            content = `<b>1. What did I do from ${formatDate(startingDate)} to ${formatDate(endingDate)}?</b><br>
+			} else {
+				content = `<b>1. What did I do from ${formatDate(startingDate)} to ${formatDate(endingDate)}?</b><br>
 ${lastWeekUl}<br>
-<b>2. What I plan to do ${weekOrDay2}?</b><br>
+<b>2. What do I plan to do ${weekOrDay2}?</b><br>
 ${nextWeekUl}<br>
-<b>3. What is stopping me from doing my work?</b><br>
+<b>3. What is blocking me from making progress?</b><br>
 ${userReason}`;
-        }
+
+			}
+
 
 			if (outputTarget === 'popup') {
 				const scrumReport = document.getElementById('scrumReport');
 				if (scrumReport) {
-					console.log("found div, updating content");
+					log("found div, updating content");
 					scrumReport.innerHTML = content;
-					
+
 					// Reset generate button
 					const generateBtn = document.getElementById('generateReport');
 					if (generateBtn) {
 						generateBtn.innerHTML = '<i class="fa fa-refresh"></i> Generate Report';
 						generateBtn.disabled = false;
 					}
+					scrumGenerationInProgress = false;
+				} else {
+					logError('Scrum report div not found');
+					scrumGenerationInProgress = false;
 				}
 			} else {
-
 				const elements = window.emailClientAdapter.getEditorElements();
 				if (!elements || !elements.body) {
 					console.error('Email client editor not found');
 					return;
 				}
 				window.emailClientAdapter.injectContent(elements.body, content, elements.eventTypes.contentChange);
+				hasInjectedContent = true;
+				scrumGenerationInProgress = false;
 			}
-		});
+		}, 500);
 	}
 
-	function getProject() {
-		if (projectName != '') return projectName;
-
-		var project = '<project name>';
-		var url = window.location.href;
-		var projectUrl = url.substr(url.lastIndexOf('/') + 1);
-		if (projectUrl === 'susiai') project = 'SUSI.AI';
-		else if (projectUrl === 'open-event') project = 'Open Event';
-		return project;
-	}
+	//load initial scrum subject
 	function scrumSubjectLoaded() {
-		if (!enableToggle) return;
-		setTimeout(() => {
-			var name = githubUserData.name || githubUsername;
-			var project = getProject();
-			var curDate = new Date();
-			var year = curDate.getFullYear().toString();
-			var date = curDate.getDate();
-			var month = curDate.getMonth();
-			month++;
-			if (month < 10) month = '0' + month;
-			if (date < 10) date = '0' + date;
-			var dateCode = year.toString() + month.toString() + date.toString();
-			scrumSubject.value = '[Scrum] ' + name + ' - ' + project + ' - ' + dateCode + ' - False';
-			scrumSubject.dispatchEvent(new Event('input', { bubbles: true }));
-		});
+		try {
+			if (!enableToggle || hasInjectedContent) return;
+			if (!scrumSubject) {
+				console.error('Subject element not found');
+				return;
+			}
+			setTimeout(() => {
+				let name = githubUserData.name || githubUsername;
+				let project = projectName || '<project name>';
+				let curDate = new Date();
+				let year = curDate.getFullYear().toString();
+				let date = curDate.getDate();
+				let month = curDate.getMonth();
+				month++;
+				if (month < 10) month = '0' + month;
+				if (date < 10) date = '0' + date;
+				let dateCode = year.toString() + month.toString() + date.toString();
+
+				const subject = `[Scrum] ${name} - ${project} - ${dateCode}`;
+				log('Generated subject:', subject);
+				githubCache.subject = subject;
+				saveToStorage(githubCache.data, subject);
+
+				if (scrumSubject && scrumSubject.value !== subject) {
+					scrumSubject.value = subject;
+					scrumSubject.dispatchEvent(new Event('input', { bubbles: true }));
+				}
+			});
+		} catch (err) {
+			console.err('Error while setting subject: ', err);
+		}
 	}
 
 	function writeGithubPrsReviews() {
-		var items = githubPrsReviewData.items;
-		
+		let items = githubPrsReviewData.items;
+		log('Processing PR reviews:', {
+			hasItems: !!items,
+			itemCount: items?.length,
+			firstItem: items?.[0]
+		});
+		if (!items) {
+			logError('No Github PR review data available');
+			return;
+		}
 		reviewedPrsArray = [];
 		githubPrsReviewDataProcessed = {};
-		
-		for (var i = 0; i < items.length; i++) {
-			var item = items[i];
-			console.log(`Review item ${i + 1}/${items.length}:`, {
-				number: item.number,
-				author: item.user.login,
-				type: item.pull_request ? "PR" : "Issue",
-				state: item.state,
-				title: item.title
-			});
-			
-			if (item.user.login === githubUsername) {
-				continue;
-			}
-			
-			var repository_url = item.repository_url;
-			var project = repository_url.substr(repository_url.lastIndexOf('/') + 1);
-			var title = item.title;
-			var number = item.number;
-			var html_url = item.html_url;
-			
+		let i;
+		for (i = 0; i < items.length; i++) {
+			let item = items[i];
+			if (item.user.login == githubUsername || !item.pull_request) continue;
+			let repository_url = item.repository_url;
+			let project = repository_url.substr(repository_url.lastIndexOf('/') + 1);
+			let title = item.title;
+			let number = item.number;
+			let html_url = item.html_url;
 			if (!githubPrsReviewDataProcessed[project]) {
+				// first pr in this repo
 				githubPrsReviewDataProcessed[project] = [];
 			}
-			
-			var obj = {
+			let obj = {
 				number: number,
 				html_url: html_url,
 				title: title,
@@ -347,39 +876,44 @@ ${userReason}`;
 			};
 			githubPrsReviewDataProcessed[project].push(obj);
 		}
-		
-		for (var repo in githubPrsReviewDataProcessed) {
-			var repoLi = '<li><i>(' + repo + ')</i> - Reviewed ';
-			if (githubPrsReviewDataProcessed[repo].length > 1) {
-				repoLi += 'PRs - ';
-			} else {
+		for (let repo in githubPrsReviewDataProcessed) {
+			let repoLi =
+				'<li> \
+			<i>(' +
+				repo +
+				')</i> - Reviewed ';
+			if (githubPrsReviewDataProcessed[repo].length > 1) repoLi += 'PRs - ';
+			else {
 				repoLi += 'PR - ';
 			}
-			
 			if (githubPrsReviewDataProcessed[repo].length <= 1) {
-				for (var pr in githubPrsReviewDataProcessed[repo]) {
-					var pr_arr = githubPrsReviewDataProcessed[repo][pr];
-					var prText = '';
-					prText += `<a href='${pr_arr.html_url}' target='_blank'>#${pr_arr.number}</a> (${pr_arr.title}) `;
-					if (pr_arr.state === 'open') {
-						prText += issue_opened_button;
-					} else {
-						prText += issue_closed_button;
-					}
+				for (let pr in githubPrsReviewDataProcessed[repo]) {
+					let pr_arr = githubPrsReviewDataProcessed[repo][pr];
+					let prText = '';
+					prText +=
+						"<a href='" + pr_arr.html_url + "' target='_blank'>#" + pr_arr.number + '</a> (' + pr_arr.title + ') ';
+					if (pr_arr.state === 'open') prText += issue_opened_button;
+					else prText += issue_closed_button;
+
 					prText += '&nbsp;&nbsp;';
 					repoLi += prText;
 				}
 			} else {
 				repoLi += '<ul>';
-				for (var pr1 in githubPrsReviewDataProcessed[repo]) {
-					var pr_arr1 = githubPrsReviewDataProcessed[repo][pr1];
-					var prText1 = '';
-					prText1 += `<li><a href='${pr_arr1.html_url}' target='_blank'>#${pr_arr1.number}</a> (${pr_arr1.title}) `;
-					if (pr_arr1.state === 'open') {
-						prText1 += issue_opened_button;
-					} else {
-						prText1 += issue_closed_button;
-					}
+				for (let pr1 in githubPrsReviewDataProcessed[repo]) {
+					let pr_arr1 = githubPrsReviewDataProcessed[repo][pr1];
+					let prText1 = '';
+					prText1 +=
+						"<li><a href='" +
+						pr_arr1.html_url +
+						"' target='_blank'>#" +
+						pr_arr1.number +
+						'</a> (' +
+						pr_arr1.title +
+						') ';
+					if (pr_arr1.state === 'open') prText1 += issue_opened_button;
+					else prText1 += issue_closed_button;
+
 					prText1 += '&nbsp;&nbsp;</li>';
 					repoLi += prText1;
 				}
@@ -388,50 +922,214 @@ ${userReason}`;
 			repoLi += '</li>';
 			reviewedPrsArray.push(repoLi);
 		}
-		
-		writeScrumBody(); 
+
+		prsReviewDataProcessed = true;
+		if (outputTarget === 'email') {
+			triggerScrumGeneration();
+		}
+
+	}
+
+	function triggerScrumGeneration() {
+		if (issuesDataProcessed && prsReviewDataProcessed) {
+			log('Both data sets processed, generating scrum body.');
+			writeScrumBody();
+		} else {
+			log('Waiting for all data to be processed before generating scrum.', {
+				issues: issuesDataProcessed,
+				reviews: prsReviewDataProcessed,
+			});
+		}
 	}
-	function writeGithubIssuesPrs() {
-		var data = githubIssuesData;
-		var items = data.items;
-		
+
+	// Helper: calculate days between two yyyy-mm-dd strings
+	function getDaysBetween(start, end) {
+		const d1 = new Date(start);
+		const d2 = new Date(end);
+		return Math.ceil((d2 - d1) / (1000 * 60 * 60 * 24));
+	}
+
+	// Session cache object
+	let sessionMergedStatusCache = {};
+
+	// Helper to fetch PR details for merged status (REST, single PR)
+	async function fetchPrMergedStatusREST(owner, repo, number, headers) {
+		const cacheKey = `${owner}/${repo}#${number}`;
+		if (sessionMergedStatusCache[cacheKey] !== undefined) {
+			return sessionMergedStatusCache[cacheKey];
+		}
+		const url = `https://api.github.com/repos/${owner}/${repo}/pulls/${number}`;
+		try {
+			const res = await fetch(url, { headers });
+			if (!res.ok) return null;
+			const data = await res.json();
+			const merged = !!data.merged_at;
+			sessionMergedStatusCache[cacheKey] = merged;
+			return merged;
+		} catch (e) {
+			return null;
+		}
+	}
+
+	async function writeGithubIssuesPrs() {
+		log('writeGithubIssuesPrs called');
+		let items = githubIssuesData.items;
 		lastWeekArray = [];
 		nextWeekArray = [];
-		
-		for (var i = 0; i < items.length; i++) {
-			var item = items[i];	
-			var html_url = item.html_url;
-			var repository_url = item.repository_url;
-			var project = repository_url.substr(repository_url.lastIndexOf('/') + 1);
-			var title = item.title;
-			var number = item.number;
-			var li = '';
-			
+		if (!items) {
+			logError('No Github issues data available');
+			return;
+		}
+
+		const headers = { 'Accept': 'application/vnd.github.v3+json' };
+		if (githubToken) headers['Authorization'] = `token ${githubToken}`;
+		let useMergedStatus = false;
+		let fallbackToSimple = false;
+		let daysRange = getDaysBetween(startingDate, endingDate);
+		// For token users, always enable useMergedStatus (no 7-day limit)
+		if (githubToken) {
+			useMergedStatus = true;
+		} else if (daysRange <= 7) {
+			useMergedStatus = true;
+		}
+		// Collect PRs to batch fetch merged status
+		let prsToCheck = [];
+		for (let i = 0; i < items.length; i++) {
+			let item = items[i];
+			if (item.pull_request && item.state === 'closed' && useMergedStatus && !fallbackToSimple) {
+				let repository_url = item.repository_url;
+				let repoParts = repository_url.split('/');
+				let owner = repoParts[repoParts.length - 2];
+				let repo = repoParts[repoParts.length - 1];
+				prsToCheck.push({ owner, repo, number: item.number, idx: i });
+			}
+		}
+
+		let mergedStatusResults = {};
+		if (githubToken) {
+			// Use GraphQL batching for all cases
+			if (prsToCheck.length > 0) {
+				mergedStatusResults = await fetchPrsMergedStatusBatch(prsToCheck, headers);
+				log('Merged status results (GraphQL):', mergedStatusResults);
+			}
+		} else if (useMergedStatus) {
+			if (prsToCheck.length > 30) {
+				fallbackToSimple = true;
+				if (typeof Materialize !== 'undefined' && Materialize.toast) {
+					Materialize.toast('API limit exceeded. Please use a GitHub token for full status. Showing only open/closed PRs.', 5000);
+				}
+			} else {
+				// Use REST API for each PR, cache results
+				for (let pr of prsToCheck) {
+					let merged = await fetchPrMergedStatusREST(pr.owner, pr.repo, pr.number, headers);
+					mergedStatusResults[`${pr.owner}/${pr.repo}#${pr.number}`] = merged;
+				}
+				log('Merged status results (REST):', mergedStatusResults);
+			}
+		}
+		for (let i = 0; i < items.length; i++) {
+			let item = items[i];
+			let html_url = item.html_url;
+			let repository_url = item.repository_url;
+			let project = repository_url.substr(repository_url.lastIndexOf('/') + 1);
+			let title = item.title;
+			let number = item.number;
+			let li = '';
+			let isDraft = false;
+			if (item.pull_request && typeof item.draft !== 'undefined') {
+				isDraft = item.draft;
+			}
 			if (item.pull_request) {
-				if (item.state === 'closed') {
-					li = `<li><i>(${project})</i> - Made PR (#${number}) - <a href='${html_url}'>${title}</a> ${pr_merged_button}</li>`;
+
+				const prCreatedDate = new Date(item.created_at);
+				const startDate = new Date(startingDate);
+				const endDate = new Date(endingDate + 'T23:59:59');
+				const isNewPR = prCreatedDate >= startDate && prCreatedDate <= endDate;
+
+				if (!isNewPR) {
+					const hasCommitsInRange = showCommits && item._allCommits && item._allCommits.length > 0;
+
+					if (!hasCommitsInRange) {
+
+						continue; //skip these prs - created outside daterange with no commits
+					} else {
+
+					}
+				} else {
+
+				}
+				const prAction = isNewPR ? 'Made PR' : 'Existing PR';
+				if (isDraft) {
+					li = `<li><i>(${project})</i> - ${prAction} (#${number}) - <a href='${html_url}'>${title}</a> ${pr_draft_button}</li>`;
 				} else if (item.state === 'open') {
-					li = `<li><i>(${project})</i> - Made PR (#${number}) - <a href='${html_url}'>${title}</a> ${pr_unmerged_button}</li>`;
+					li = `<li><i>(${project})</i> - ${prAction} (#${number}) - <a href='${html_url}'>${title}</a> ${pr_open_button}`;
+					if (showCommits && item._allCommits && item._allCommits.length && !isNewPR) {
+						log(`[PR DEBUG] Rendering commits for existing PR #${number}:`, item._allCommits);
+						item._allCommits.forEach(commit => {
+							li += `<li style=\"list-style: disc; margin: 0 0 0 20px; padding: 0; color: #666;\"><span style=\"color:#2563eb;\">${commit.messageHeadline}</span><span style=\"color:#666; font-size: 11px;\"> (${new Date(commit.committedDate).toLocaleString()})</span></li>`;
+						});
+					}
+					li += `</li>`;
+				} else if (item.state === 'closed') {
+					let merged = null;
+					if ((githubToken || (useMergedStatus && !fallbackToSimple)) && mergedStatusResults) {
+						let repoParts = repository_url.split('/');
+						let owner = repoParts[repoParts.length - 2];
+						let repo = repoParts[repoParts.length - 1];
+						merged = mergedStatusResults[`${owner}/${repo}#${number}`];
+					}
+					if (merged === true) {
+						li = `<li><i>(${project})</i> - Made PR (#${number}) - <a href='${html_url}'>${title}</a> ${pr_merged_button}</li>`;
+					} else {
+						// Always show closed label for merged === false or merged === null/undefined
+						li = `<li><i>(${project})</i> - Made PR (#${number}) - <a href='${html_url}'>${title}</a> ${pr_closed_button}</li>`;
+					}
 				}
+				lastWeekArray.push(li);
+				continue;
 			} else {
-				if (item.state === 'open' && item.body && item.body.toUpperCase().indexOf('YES') > 0) {
-					var li2 = `<li><i>(${project})</i> - Work on Issue(#${number}) - <a href='${html_url}'>${title}</a> ${issue_opened_button}</li>`;
+				// is a issue
+				if (item.state === 'open' && item.body?.toUpperCase().indexOf('YES') > 0) {
+					let li2 =
+						'<li><i>(' +
+						project +
+						')</i> - Work on Issue(#' +
+						number +
+						") - <a href='" +
+						html_url +
+						"' target='_blank'>" +
+						title +
+						'</a> ' +
+						issue_opened_button +
+						'&nbsp;&nbsp;</li>';
 					nextWeekArray.push(li2);
 				}
 				if (item.state === 'open') {
 					li = `<li><i>(${project})</i> - Opened Issue(#${number}) - <a href='${html_url}'>${title}</a> ${issue_opened_button}</li>`;
 				} else if (item.state === 'closed') {
 					li = `<li><i>(${project})</i> - Opened Issue(#${number}) - <a href='${html_url}'>${title}</a> ${issue_closed_button}</li>`;
+				} else {
+					li =
+						'<li><i>(' +
+						project +
+						')</i> - Opened Issue(#' +
+						number +
+						") - <a href='" +
+						html_url +
+						"' target='_blank'>" +
+						title +
+						'</a> </li>';
 				}
 			}
-			if (li) {
-				lastWeekArray.push(li);
-			} else {
-			}
+			lastWeekArray.push(li);
+		}
+		issuesDataProcessed = true;
+		if (outputTarget === 'email') {
+			triggerScrumGeneration();
 		}
-		writeScrumBody();
 	}
-	var intervalBody = setInterval(() => {
+
+	let intervalBody = setInterval(() => {
 		if (!window.emailClientAdapter) return;
 
 		const elements = window.emailClientAdapter.getEditorElements();
@@ -439,40 +1137,163 @@ ${userReason}`;
 
 		clearInterval(intervalBody);
 		scrumBody = elements.body;
-		writeScrumBody();
+		// writeScrumBody(); // This call is premature and causes the issue.
 	}, 500);
 
-	var intervalSubject = setInterval(() => {
+	let intervalSubject = setInterval(() => {
 		if (!githubUserData || !window.emailClientAdapter) return;
 
 		const elements = window.emailClientAdapter.getEditorElements();
 		if (!elements || !elements.subject) return;
 
+		if (outputTarget === 'email' && !window.emailClientAdapter.isNewConversation()) {
+			console.log('Not a new conversation, skipping subject interval');
+			clearInterval(intervalSubject);
+			return;
+		}
+
 		clearInterval(intervalSubject);
 		scrumSubject = elements.subject;
-		scrumSubjectLoaded();
+
+		setTimeout(() => {
+			scrumSubjectLoaded();
+		}, 500);
 	}, 500);
 
-	//check for github safe writing for both issues/prs and pr reviews
-	var intervalWriteGithub = setInterval(() => {
-		if (scrumBody && githubUsername && githubIssuesData && githubPrsReviewData) {
-			clearInterval(intervalWriteGithub);
-			writeGithubIssuesPrs();
-			writeGithubPrsReviews();
+	// check for github safe writing
+	let intervalWriteGithubIssues = setInterval(() => {
+		if (outputTarget === 'popup') {
+			return;
+		} else {
+			if (scrumBody && githubUsername && githubIssuesData && githubPrsReviewData) {
+				clearInterval(intervalWriteGithubIssues);
+				clearInterval(intervalWriteGithubPrs);
+				writeGithubIssuesPrs();
+			}
+		}
+	}, 500);
+	let intervalWriteGithubPrs = setInterval(() => {
+		if (outputTarget === 'popup') {
+			return;
+		} else {
+			if (scrumBody && githubUsername && githubPrsReviewData && githubIssuesData) {
+				clearInterval(intervalWriteGithubPrs);
+				clearInterval(intervalWriteGithubIssues);
+				writeGithubPrsReviews();
+			}
 		}
 	}, 500);
+	if (!refreshButton_Placed) {
+		let intervalWriteButton = setInterval(() => {
+			if (document.getElementsByClassName('F0XO1GC-x-b').length == 3 && scrumBody && enableToggle) {
+				refreshButton_Placed = true;
+				clearInterval(intervalWriteButton);
+				let td = document.createElement('td');
+				let button = document.createElement('button');
+				button.style = 'background-image:none;background-color:#3F51B5;';
+				button.setAttribute('class', 'F0XO1GC-n-a F0XO1GC-G-a');
+				button.title = 'Rewrite your SCRUM using updated settings!';
+				button.id = 'refreshButton';
+				let elemText = document.createTextNode('↻ Rewrite SCRUM!');
+				button.appendChild(elemText);
+				td.appendChild(button);
+				document.getElementsByClassName('F0XO1GC-x-b')[0].children[0].children[0].appendChild(td);
+				document.getElementById('refreshButton').addEventListener('click', handleRefresh);
+			}
+		}, 1000);
+	}
+	function handleRefresh() {
+		hasInjectedContent = false; // Reset the flag before refresh
+		allIncluded();
+	}
 }
-allIncluded('email'); 
-$('button>span:contains(New conversation)').parent('button').click(() => {
-    allIncluded(); 
-});
 
-window.generateScrumReport = function() {
-    allIncluded('popup');
-};
+async function forceGithubDataRefresh() {
+	let showCommits = false;
+
+	await new Promise(resolve => {
+		chrome.storage.local.get('showCommits', (result) => {
+			if (result.showCommits !== undefined) {
+				showCommits = result.showCommits;
+			}
+			resolve();
+		});
+	});
+
+	if (typeof githubCache !== 'undefined') {
+		githubCache.data = null;
+		githubCache.cacheKey = null;
+		githubCache.timestamp = 0;
+		githubCache.subject = null;
+		githubCache.fetching = false;
+		githubCache.queue = [];
+	}
+
+	await new Promise(resolve => {
+		chrome.storage.local.remove('githubCache', resolve);
+	});
+
+	chrome.storage.local.set({ showCommits: showCommits });
 
-$('button>span:contains(New conversation)')
-	.parent('button')
-	.click(() => {
+	hasInjectedContent = false;
+
+	return { success: true };
+}
+
+
+// allIncluded('email');
+
+
+if (window.location.protocol.startsWith('http')) {
+	allIncluded('email');
+	$('button>span:contains(New conversation)').parent('button').click(() => {
 		allIncluded();
-	});
\ No newline at end of file
+	});
+}
+
+window.generateScrumReport = function () {
+	allIncluded('popup');
+}
+
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+	if (request.action === 'forceRefresh') {
+		forceGithubDataRefresh()
+			.then(result => sendResponse(result)).catch(err => {
+				console.error('Force refresh failed:', err);
+				sendResponse({ success: false, error: err.message });
+			});
+		return true;
+	}
+});
+
+async function fetchPrsMergedStatusBatch(prs, headers) {
+	// prs: Array of {owner, repo, number}
+	const results = {};
+	if (prs.length === 0) return results;
+	// Use GitHub GraphQL API for batching
+	const query = `query {
+${prs.map((pr, i) => `	repo${i}: repository(owner: \"${pr.owner}\", name: \"${pr.repo}\") {
+		pr${i}: pullRequest(number: ${pr.number}) { merged }
+	}`).join('\n')}
+}`;
+
+	try {
+		const res = await fetch('https://api.github.com/graphql', {
+			method: 'POST',
+			headers: {
+				...headers,
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({ query }),
+		});
+		if (!res.ok) return results;
+		const data = await res.json();
+		prs.forEach((pr, i) => {
+			const merged = data.data[`repo${i}`]?.[`pr${i}`]?.merged;
+			results[`${pr.owner}/${pr.repo}#${pr.number}`] = merged;
+		});
+		return results;
+	} catch (e) {
+		return results;
+	}
+}
\ No newline at end of file
diff --git a/src/tailwindcss.css b/src/tailwindcss.css
new file mode 100644
index 0000000..075fcc7
--- /dev/null
+++ b/src/tailwindcss.css
@@ -0,0 +1,863 @@
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    --color-green-400: oklch(79.2% 0.209 151.711);
+    --color-green-600: oklch(62.7% 0.194 149.214);
+    --color-blue-300: oklch(80.9% 0.105 251.813);
+    --color-blue-600: oklch(54.6% 0.245 262.881);
+    --color-blue-700: oklch(48.8% 0.243 264.376);
+    --color-blue-800: oklch(42.4% 0.199 265.638);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-600: oklch(44.6% 0.03 256.802);
+    --color-gray-700: oklch(37.3% 0.034 259.733);
+    --color-gray-800: oklch(27.8% 0.033 256.848);
+    --color-black: #000;
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .collapse {
+    visibility: collapse;
+  }
+  .visible {
+    visibility: visible;
+  }
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .relative {
+    position: relative;
+  }
+  .static {
+    position: static;
+  }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  .mx-2 {
+    margin-inline: calc(var(--spacing) * 2);
+  }
+  .mx-3 {
+    margin-inline: calc(var(--spacing) * 3);
+  }
+  .mx-4 {
+    margin-inline: calc(var(--spacing) * 4);
+  }
+  .my-2 {
+    margin-block: calc(var(--spacing) * 2);
+  }
+  .my-4 {
+    margin-block: calc(var(--spacing) * 4);
+  }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+  .mb-0 {
+    margin-bottom: calc(var(--spacing) * 0);
+  }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .block {
+    display: block;
+  }
+  .contents {
+    display: contents;
+  }
+  .flex {
+    display: flex;
+  }
+  .grid {
+    display: grid;
+  }
+  .hidden {
+    display: none;
+  }
+  .inline {
+    display: inline;
+  }
+  .inline-block {
+    display: inline-block;
+  }
+  .list-item {
+    display: list-item;
+  }
+  .table {
+    display: table;
+  }
+  .table-row {
+    display: table-row;
+  }
+  .table-row-group {
+    display: table-row-group;
+  }
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
+  .min-h-\[200px\] {
+    min-height: 200px;
+  }
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
+  .w-7 {
+    width: calc(var(--spacing) * 7);
+  }
+  .w-11 {
+    width: calc(var(--spacing) * 11);
+  }
+  .w-full {
+    width: 100%;
+  }
+  .border-collapse {
+    border-collapse: collapse;
+  }
+  .transform {
+    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .resize {
+    resize: both;
+  }
+  .list-inside {
+    list-style-position: inside;
+  }
+  .list-disc {
+    list-style-type: disc;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+  .rounded {
+    border-radius: 0.25rem;
+  }
+  .rounded-2xl {
+    border-radius: var(--radius-2xl);
+  }
+  .rounded-3xl {
+    border-radius: var(--radius-3xl);
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+  .border-t-2 {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 2px;
+  }
+  .border-black {
+    border-color: var(--color-black);
+  }
+  .border-gray-100 {
+    border-color: var(--color-gray-100);
+  }
+  .border-gray-200 {
+    border-color: var(--color-gray-200);
+  }
+  .border-gray-700 {
+    border-color: var(--color-gray-700);
+  }
+  .bg-blue-600 {
+    background-color: var(--color-blue-600);
+  }
+  .bg-gray-100 {
+    background-color: var(--color-gray-100);
+  }
+  .bg-gray-200 {
+    background-color: var(--color-gray-200);
+  }
+  .bg-green-400 {
+    background-color: var(--color-green-400);
+  }
+  .bg-green-600 {
+    background-color: var(--color-green-600);
+  }
+  .bg-white {
+    background-color: var(--color-white);
+  }
+  .p-1 {
+    padding: calc(var(--spacing) * 1);
+  }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
+  .pl-1 {
+    padding-left: calc(var(--spacing) * 1);
+  }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
+  .text-blue-600 {
+    color: var(--color-blue-600);
+  }
+  .text-gray-700 {
+    color: var(--color-gray-700);
+  }
+  .text-gray-800 {
+    color: var(--color-gray-800);
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .ease-in {
+    --tw-ease: var(--ease-in);
+    transition-timing-function: var(--ease-in);
+  }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
+  .peer-checked\:bg-blue-600 {
+    &:is(:where(.peer):checked ~ *) {
+      background-color: var(--color-blue-600);
+    }
+  }
+  .peer-focus\:ring-blue-300 {
+    &:is(:where(.peer):focus ~ *) {
+      --tw-ring-color: var(--color-blue-300);
+    }
+  }
+  .after\:absolute {
+    &::after {
+      content: var(--tw-content);
+      position: absolute;
+    }
+  }
+  .after\:start-\[2px\] {
+    &::after {
+      content: var(--tw-content);
+      inset-inline-start: 2px;
+    }
+  }
+  .after\:top-0\.5 {
+    &::after {
+      content: var(--tw-content);
+      top: calc(var(--spacing) * 0.5);
+    }
+  }
+  .after\:h-5 {
+    &::after {
+      content: var(--tw-content);
+      height: calc(var(--spacing) * 5);
+    }
+  }
+  .after\:w-5 {
+    &::after {
+      content: var(--tw-content);
+      width: calc(var(--spacing) * 5);
+    }
+  }
+  .after\:rounded-full {
+    &::after {
+      content: var(--tw-content);
+      border-radius: calc(infinity * 1px);
+    }
+  }
+  .after\:border {
+    &::after {
+      content: var(--tw-content);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+  .after\:border-gray-300 {
+    &::after {
+      content: var(--tw-content);
+      border-color: var(--color-gray-300);
+    }
+  }
+  .after\:bg-white {
+    &::after {
+      content: var(--tw-content);
+      background-color: var(--color-white);
+    }
+  }
+  .after\:transition-all {
+    &::after {
+      content: var(--tw-content);
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .after\:content-\[\'\'\] {
+    &::after {
+      content: var(--tw-content);
+      --tw-content: '';
+      content: var(--tw-content);
+    }
+  }
+  .peer-checked\:after\:translate-x-full {
+    &:is(:where(.peer):checked ~ *) {
+      &::after {
+        content: var(--tw-content);
+        --tw-translate-x: 100%;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
+  .peer-checked\:after\:border-white {
+    &:is(:where(.peer):checked ~ *) {
+      &::after {
+        content: var(--tw-content);
+        border-color: var(--color-white);
+      }
+    }
+  }
+  .hover\:bg-blue-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-blue-700);
+      }
+    }
+  }
+  .rtl\:peer-checked\:after\:-translate-x-full {
+    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      &:is(:where(.peer):checked ~ *) {
+        &::after {
+          content: var(--tw-content);
+          --tw-translate-x: -100%;
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+      }
+    }
+  }
+  .dark\:border-gray-600 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-gray-600);
+    }
+  }
+  .dark\:bg-gray-700 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-gray-700);
+    }
+  }
+  .dark\:peer-checked\:bg-blue-600 {
+    @media (prefers-color-scheme: dark) {
+      &:is(:where(.peer):checked ~ *) {
+        background-color: var(--color-blue-600);
+      }
+    }
+  }
+  .dark\:peer-focus\:ring-blue-800 {
+    @media (prefers-color-scheme: dark) {
+      &:is(:where(.peer):focus ~ *) {
+        --tw-ring-color: var(--color-blue-800);
+      }
+    }
+  }
+}
+body {
+  margin: 0;
+  padding: 0;
+  background-color: rgba(251, 251, 251, 0.6);
+}
+* {
+  box-sizing: border-box;
+}
+.datepicker {
+  margin-bottom: 5px !important;
+}
+.tabs .tab a:hover, .tabs .tab a.active {
+  background-color: transparent;
+  color: #3f51b5;
+}
+.tabs {
+  background-color: transparent;
+}
+.tabs .tab a {
+  color: #3f51b5;
+}
+.tabs .indicator {
+  background-color: #3f51b5;
+}
+.switch label input[type="checkbox"]:checked + .lever {
+  background-color: #3f51b5;
+}
+.switch label input[type="checkbox"]:checked + .lever:after {
+  background-color: #fcfcfc;
+  left: 24px;
+}
+[type="checkbox"].filled-in:checked + label:after {
+  border: 2px solid #3f51b5;
+  background-color: #3f51b5;
+}
+.btn:hover, .btn-large:hover {
+  background-color: #3f51b5;
+}
+a {
+  color: #3f51b5;
+}
+.btn, .btn-large {
+  background-color: #3f51b5;
+}
+li {
+  list-style-type: disc !important;
+  margin-left: 1rem;
+}
+.dark-mode {
+  background: #1a1a1a !important;
+  color: #ffffff !important;
+}
+.dark-mode .bg-white {
+  background-color: #2d2d2d !important;
+  border-color: #404040 !important;
+}
+.dark-mode input[type="text"], .dark-mode input[type="date"], .dark-mode #scrumReport {
+  background-color: #404040 !important;
+  border-color: #505050 !important;
+  color: #ffffff !important;
+}
+.dark-mode h3, .dark-mode h4, .dark-mode p, .dark-mode label {
+  color: #ffffff !important;
+}
+.dark-mode hr {
+  border-color: #505050 !important;
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateX(0);
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateY(0);
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateZ(0);
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: skewX(0);
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: skewY(0);
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-rotate-x: rotateX(0);
+      --tw-rotate-y: rotateY(0);
+      --tw-rotate-z: rotateZ(0);
+      --tw-skew-x: skewX(0);
+      --tw-skew-y: skewY(0);
+      --tw-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-ease: initial;
+      --tw-content: "";
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+    }
+  }
+}
\ No newline at end of file