diff --git a/index.html b/index.html
index 40815ebc..0460ddb8 100644
--- a/index.html
+++ b/index.html
@@ -2019,14 +2019,11 @@
             </div>
           </div>
         </div>
-
-        <!-- Theme Toggle -->
         <button class="theme-toggle btn" id="themeToggleBtn" type="button">
           <i class="fas fa-sun theme-icon-sun"></i>
           <i class="fas fa-moon theme-icon-moon" style="display: none;"></i>
           <span class="theme-text">Light</span>
         </button>
-
         <a href="login.html" class="btn btn-secondary" data-i18n="login">Login</a>
         <a href="faq.html" class="btn btn-secondary" data-i18n="faq">FAQ</a>
 
@@ -2473,6 +2470,7 @@ <h2 class="features-title serif">My Activity</h2>
           ">
         <!-- Service Usage Chart -->
         <div style="
+              background-color: #15ff00;
               background: var(--section-bg);
               border: 1px solid var(--border-color);
               border-radius: 8px;
@@ -2485,7 +2483,10 @@ <h2 class="features-title serif">My Activity</h2>
               ">
             Service Usage
           </h3>
-          <canvas id="serviceChart" height="200"></canvas>
+          <img src="agri.jpg" height="330" width="400" style="margin-left: 130px">
+          <!-- <canvas id="serviceChart" >
+            
+          </canvas> -->
         </div>
 
         <!-- Purchase/Sale History -->
@@ -2509,10 +2510,11 @@ <h2 class="features-title serif">My Activity</h2>
                 max-height: 250px;
                 overflow-y: auto;
               ">
-            <li style="color: var(--text-muted); padding: 0.5rem">
+            <!-- <li style="color: var(--text-muted); padding: 0.5rem">
               No transactions.
-            </li>
+            </li> -->
           </ul>
+          <img src="transaction.jpg" height="300" width="380" style="margin-left: 50px">
         </div>
       </div>
     </div>
diff --git a/index.js b/index.js
index d868d9ac..304c9a08 100644
--- a/index.js
+++ b/index.js
@@ -37,20 +37,18 @@ const refreshThemeStyles = () => {
 // Theme Management
 // Theme Management
 const applyTheme = (theme) => {
-  document.documentElement.setAttribute('data-theme', theme);
-  localStorage.setItem('theme', theme);
-
-  if (theme === 'dark') {
-    if (themeText) themeText.textContent = 'Light Mode';
-    if (moonIcon) moonIcon.style.display = 'none';
-    if (sunIcon) sunIcon.style.display = 'inline-block';
-  } else {
-    if (themeText) themeText.textContent = 'Dark Mode';
-    if (moonIcon) moonIcon.style.display = 'inline-block';
-    if (sunIcon) sunIcon.style.display = 'none';
-  }
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
 
-  refreshThemeStyles(); // ✅ ADD THIS LINE
+    if(theme === 'dark') {
+        if(themeText) themeText.textContent = 'Light';
+        if(moonIcon) moonIcon.style.display = 'none';
+        if(sunIcon) sunIcon.style.display = 'inline-block';
+    } else {
+        if(themeText) themeText.textContent = 'Dark';
+        if (moonIcon) moonIcon.style.display = 'inline-block';
+        if (sunIcon) sunIcon.style.display = 'none';
+    }
 };