From 7766c7b50330507f5ce8c2bd6edc5f9a7d2b8f57 Mon Sep 17 00:00:00 2001
From: deepak-linux <deepak008@live.com>
Date: Sun, 1 Sep 2024 12:45:14 +0530
Subject: [PATCH 1/3] feat: :sparkles: caching implement to load web page
 faster

---
 README.md                                     |   8 +-
 src/routes/cpu_info.py                        |   5 +-
 src/routes/disk_info.py                       |  10 +-
 src/routes/homepage.py                        |   2 +-
 src/routes/memory_info.py                     |  22 +--
 .../dasbhboard_comp/other/boot_time.html      |  13 +-
 src/utils.py                                  | 127 +++++++++++++-----
 7 files changed, 128 insertions(+), 59 deletions(-)

diff --git a/README.md b/README.md
index 624765f..6da4e75 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,7 @@ It will install the SystemGuard app and its dependencies in the crontab and it w
 ```bash
 # install miniconda3 if not installed already
 wget https://raw.githubusercontent.com/codeperfectplus/HackScripts/main/setup/install_miniconda.sh
-chmod +x install_miniconda.sh && ./install_miniconda.sh
+chmod +x install_miniconda.sh && sudo ./install_miniconda.sh
 ```
 
 ## Features 🚀
@@ -84,6 +84,12 @@ chmod +x install_miniconda.sh && ./install_miniconda.sh
 
 A Docker image has not been created for this project because it requires access to the host machine in order to retrieve server stats. Therefore, it is not possible to obtain server stats from within a Docker container.
 
+## Upcoming Features 📅
+
+- Threshold notifications
+- Customizable dashboards
+- Plugin support to make SystemGuard even more powerful.
+
 ## Acknowledgments
 
 | Project        | License             | Repository                                      |
diff --git a/src/routes/cpu_info.py b/src/routes/cpu_info.py
index dde796d..68307f8 100644
--- a/src/routes/cpu_info.py
+++ b/src/routes/cpu_info.py
@@ -2,15 +2,16 @@
 from flask import render_template, blueprints
 
 from src.config import app
-from src.utils import get_cpu_core_count, get_cpu_frequency, cpu_usage_percent, get_cpu_temp
+from src.utils import get_cpu_core_count, get_cpu_frequency, cpu_usage_percent, get_cpu_temp, get_cached_value
 
 cpu_info_bp = blueprints.Blueprint("cpu_usage", __name__)
 
 @app.route("/cpu_usage")
 def cpu_usage():
     current_temp, high_temp, critical_temp = get_cpu_temp()
+    cpu_core = get_cached_value("cpu_core", get_cpu_core_count)
     system_info = {
-        "cpu_core": get_cpu_core_count(),
+        "cpu_core": cpu_core,
         "cpu_frequency": get_cpu_frequency(),
         "cpu_percent": cpu_usage_percent(),
         "current_temp": current_temp,
diff --git a/src/routes/disk_info.py b/src/routes/disk_info.py
index 39bce50..4b82c6f 100644
--- a/src/routes/disk_info.py
+++ b/src/routes/disk_info.py
@@ -3,16 +3,18 @@
 from flask import render_template, blueprints
 
 from src.config import app
+from src.utils import get_cached_value, get_disk_free, get_disk_total, get_disk_used, get_disk_usage_percent
 
 disk_info_bp = blueprints.Blueprint("disk_usage", __name__)
 
 @app.route("/disk_usage")
 def disk_usage():
+    disk_total = get_cached_value("disk_total", get_disk_total)
     system_info = {
-        "disk_usage": psutil.disk_usage("/").percent,
-        "disk_total": round(psutil.disk_usage("/").total / (1024**3), 2),  # In GB
-        "disk_used": round(psutil.disk_usage("/").used / (1024**3), 2),  # In GB
-        "disk_free": round(psutil.disk_usage("/").free / (1024**3), 2),  # In GB
+        "disk_usage": get_disk_usage_percent(),
+        "disk_total": disk_total,
+        "disk_used": get_disk_used(),
+        "disk_free": get_disk_free(),
     }
     return render_template("disk_info.html", system_info=system_info)
 
diff --git a/src/routes/homepage.py b/src/routes/homepage.py
index 811ee25..2933e2d 100644
--- a/src/routes/homepage.py
+++ b/src/routes/homepage.py
@@ -1,5 +1,5 @@
 import datetime
-from flask import render_template, blueprints
+from flask import render_template, blueprints, session
 
 from src.config import app
 from src.models import SpeedTestResult, DashboardSettings, SystemInfo
diff --git a/src/routes/memory_info.py b/src/routes/memory_info.py
index bd58f1c..ba0ca32 100644
--- a/src/routes/memory_info.py
+++ b/src/routes/memory_info.py
@@ -1,23 +1,23 @@
 import psutil
 from flask import render_template, blueprints
 
-from src.utils import swap_memory_info
-
 from src.config import app
+from src.utils import get_cached_value, get_memory_percent, get_memory_available, get_memory_used, get_swap_memory_info
 
 memory_info_bp = blueprints.Blueprint("memory_usage", __name__)
 
+
 @app.route("/memory_usage")
 def memory_usage():
-    total_swap, used_swap, free_swap = swap_memory_info()
+    
+    memory_available = get_cached_value("memory_available", get_memory_available) 
     system_info = {
-        "memory_percent": psutil.virtual_memory().percent,
-        "memory_available": round(
-            psutil.virtual_memory().available / (1024**3), 2
-        ),  # In GB
-        "memory_used": round(psutil.virtual_memory().used / (1024**3), 2),  # In GB,
-        "total_swap": round(total_swap / (1024**3), 2),  # In GB
-        "used_swap": round(used_swap / (1024**3), 2),  # In GB
-        "free_swap": round(free_swap / (1024**3), 2),  # In GB
+        "memory_percent": get_memory_percent(),
+        "memory_available": memory_available,
+        "memory_used": get_memory_used(),
     }
+
+    swap_info = get_swap_memory_info()
+    system_info.update(swap_info)
+
     return render_template("memory_info.html", system_info=system_info)
diff --git a/src/templates/dasbhboard_comp/other/boot_time.html b/src/templates/dasbhboard_comp/other/boot_time.html
index 03eb341..957ff2d 100644
--- a/src/templates/dasbhboard_comp/other/boot_time.html
+++ b/src/templates/dasbhboard_comp/other/boot_time.html
@@ -10,11 +10,16 @@ <h5 class="card-title">Server Time <i class="fas fa-clock"></i></h5>
 <script>
 // Function to format time in HH:MM:SS
 function formatTime(hours, minutes, seconds) {
+    let date = new Date();
+    let day = date.getDate().toString().padStart(2, '0');
+    let month = (date.getMonth() + 1).toString().padStart(2, '0');
+    let year = date.getFullYear().toString().padStart(2, '0');
+    let formattedDate = year + '-' + month + '-' + day;
+    let formattedTime = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
     return [
-        hours.toString().padStart(2, '0'),
-        minutes.toString().padStart(2, '0'),
-        seconds.toString().padStart(2, '0')
-    ].join(':');
+        formattedDate,
+        formattedTime
+    ].join(' ');
 }
 
 // Initialize the time from the server
diff --git a/src/utils.py b/src/utils.py
index b8272dd..4c8bd04 100644
--- a/src/utils.py
+++ b/src/utils.py
@@ -1,10 +1,13 @@
 import os
+import time
 import datetime
 import subprocess
 import psutil
+from pprint import pprint
 
-from src.config import app, db
-from src.models import SystemInfo
+# Simple in-memory cache for specific data with individual timestamps
+cache = {}
+CACHE_EXPIRATION = 3600  # Cache expiration time in seconds (1 hour)
 
 def format_uptime(uptime_seconds):
     """Convert uptime from seconds to a human-readable format."""
@@ -16,7 +19,6 @@ def format_uptime(uptime_seconds):
     minutes = int(uptime_seconds // 60)
     return f"{days} days, {hours} hours, {minutes} minutes"
 
-
 def datetimeformat(value, format='%Y-%m-%d %H:%M:%S'):
     return value.strftime(format)
 
@@ -42,9 +44,7 @@ def get_established_connections():
             elif ':' in conn.laddr.ip:
                 ipv6_set.add(conn.laddr.ip)
 
-    # ipv4_dict = [ip for ip in ipv4_dict if ip.startswith('192.168')]
-    # return ipv4_dict[0] if ipv4_dict else "N/A", ipv6_dict
-    ipv4 = [ip for ip in ipv4_set if ip.startswith('192.168')][0]
+    ipv4 = [ip for ip in ipv4_set if ip.startswith('192.168')][0] if ipv4_set else "N/A"
     ipv6 = list(ipv6_set)[0] if ipv6_set else "N/A"
 
     return ipv4, ipv6
@@ -64,27 +64,17 @@ def run_speedtest():
             elif "Ping:" in line:
                 ping = line.split("Ping: ")[1]
 
-        return {"download_speed": download_speed, "upload_speed": upload_speed, "ping": ping,
-                "status": "Success"}
+        return {"download_speed": download_speed, "upload_speed": upload_speed, "ping": ping, "status": "Success"}
 
     except subprocess.CalledProcessError as e:
-        error = {"status": "Error", "message": e.stderr}
-        return error
+        return {"status": "Error", "message": e.stderr}
 
     except Exception as e:
-        error = {"status": "Error", "message": str(e)}
-        return error
+        return {"status": "Error", "message": str(e)}
 
 def get_cpu_frequency():
-    cpu_freq = psutil.cpu_freq().current  # In MHz
-    return round(cpu_freq)
+    return round(psutil.cpu_freq().current)
 
-def swap_memory_info():
-    swap = psutil.swap_memory()
-    swap_total = swap.total
-    swap_used = swap.used
-    swap_percent = swap.percent
-    return swap_total, swap_used, swap_percent
 
 def get_cpu_core_count():
     return psutil.cpu_count(logical=True)
@@ -94,11 +84,7 @@ def cpu_usage_percent():
 
 def get_cpu_temp():
     temp = psutil.sensors_temperatures().get('coretemp', [{'current': 'N/A'}])[0]
-    current_temp = temp.current
-    high_temp = temp.high
-    critical_temp = temp.critical
-    return current_temp, high_temp, critical_temp
-
+    return temp.current, temp.high, temp.critical
 
 def get_top_processes(number=5):
     """Get the top processes by memory usage."""
@@ -109,23 +95,96 @@ def get_top_processes(number=5):
     ]
     return processes
 
+def get_disk_free():
+    """Returns the free disk space in GB."""
+    return round(psutil.disk_usage("/").free / (1024**3), 2)
+
+def get_disk_used():
+    """Returns the used disk space in GB."""
+    return round(psutil.disk_usage("/").used / (1024**3), 2)
+
+def get_disk_total():
+    """Returns the total disk space in GB."""
+    return round(psutil.disk_usage("/").total / (1024**3), 2)
+
+def get_disk_usage_percent():
+    """Returns the percentage of disk used."""
+    return psutil.disk_usage("/").percent
+
+
+def get_memory_percent():
+    """Returns the percentage of memory used."""
+    return psutil.virtual_memory().percent
+
+def get_memory_available():
+    """Returns the available memory in GB."""
+    return round(psutil.virtual_memory().available / (1024**3), 2)
+
+
+def get_memory_used():
+    """Returns the used memory in GB."""
+    return round(psutil.virtual_memory().used / (1024**3), 2)
+
+
+def get_memory_used():
+    """Returns the used memory in GB."""
+    return round(psutil.virtual_memory().used / (1024**3), 2)
+
+def get_swap_memory_info():
+    """Returns the total, used, and free swap memory in GB."""
+    swap = psutil.swap_memory()
+    total_swap = swap.total
+    used_swap = swap.used
+    free_swap = total_swap - used_swap  # Calculate free swap memory
+
+    return {
+        "total_swap": round(total_swap / (1024**3), 2),  # In GB
+        "used_swap": round(used_swap / (1024**3), 2),    # In GB
+        "free_swap": round(free_swap / (1024**3), 2),    # In GB
+    }
+
+def get_cached_value(key, fresh_value_func):
+    """ Get a cached value if available and not expired, otherwise get fresh value. """
+    current_time = time.time()
+    # if key not in cache, create a new entry
+    if key not in cache:
+        cache[key] = {'value': None, 'timestamp': 0}
+
+    # Check if cache is valid
+    if cache[key]['value'] is not None and (current_time - cache[key]['timestamp'] < CACHE_EXPIRATION):
+        print(key, cache[key]['value'])
+        return cache[key]['value']
+
+    # Fetch fresh value
+    print(f"Fetching fresh {key}...")
+    fresh_value = fresh_value_func()
+
+    # Store value in cache
+    cache[key]['value'] = fresh_value
+    cache[key]['timestamp'] = current_time
+
+    return fresh_value
 
 def get_system_info():
-    """ Get system information and store it in the database. """
+    """ Get system information with caching for certain values and fresh data for others. """
     print("Getting system information...")
 
-    # Gathering system information
-    ipv4_dict, _ = get_established_connections()
-    boot_time = datetime.datetime.fromtimestamp(psutil.boot_time())
-    uptime = format_uptime(datetime.datetime.now() - boot_time)
+    # Get cached or fresh values
+    username = get_cached_value('username', os.getlogin)
+    ipv4_dict = get_cached_value('ipv4', lambda: get_established_connections()[0])
+    boot_time = get_cached_value('boot_time', lambda: datetime.datetime.fromtimestamp(psutil.boot_time()))
+    uptime = get_cached_value('uptime', lambda: format_uptime(datetime.datetime.now() - boot_time))
+
+    # Gathering fresh system information
     battery_info = psutil.sensors_battery()
     memory_info = psutil.virtual_memory()
     disk_info = psutil.disk_usage('/')
     net_io = psutil.net_io_counters()
     current_server_time = datetime.datetime.now()
+
     # Prepare system information dictionary
     info = {
-        'username': os.getlogin(),
+        'username': username,
         'cpu_percent': cpu_usage_percent(),
         'memory_percent': round(memory_info.percent, 2),
         'disk_usage': round(disk_info.percent, 2),
@@ -145,9 +204,5 @@ def get_system_info():
         'current_server_time': datetimeformat(current_server_time),
     }
 
-    # # Adding system info to the database
-    # with app.app_context():
-    #     db.session.add(SystemInfo(**info))
-    #     db.session.commit()
-
     return info
+

From 51314e98e18b4d35a9678e335635bd6abf32a0cb Mon Sep 17 00:00:00 2001
From: deepak-linux <deepak008@live.com>
Date: Sun, 1 Sep 2024 18:06:39 +0530
Subject: [PATCH 2/3] feat: enable cache and other buttons added in settings

---
 src/models.py                                 | 15 +++-
 src/routes/cpu_info.py                        |  5 ++
 src/routes/disk_info.py                       |  4 +
 src/routes/memory_info.py                     |  5 +-
 src/routes/network_info.py                    |  5 ++
 src/routes/process.py                         |  4 +
 src/routes/settings.py                        | 15 +++-
 src/scripts/locustfile.py                     |  5 +-
 src/static/css/404.css                        | 35 ++++++++
 src/static/css/settings.css                   | 87 +++++++++++++++----
 .../memory/dashboard_memory.html              |  9 +-
 .../dasbhboard_comp/other/speedtest.html      | 15 +++-
 src/templates/error/404.html                  | 13 +++
 src/templates/ext/navbar.html                 | 10 +++
 src/templates/settings.html                   | 70 ++++++++++++++-
 src/utils.py                                  | 27 ++++--
 16 files changed, 288 insertions(+), 36 deletions(-)
 create mode 100644 src/static/css/404.css

diff --git a/src/models.py b/src/models.py
index c0ac68a..d91f5d8 100644
--- a/src/models.py
+++ b/src/models.py
@@ -25,6 +25,13 @@ class DashboardSettings(db.Model):
     speedtest_cooldown = db.Column(db.Integer, default=1)
     number_of_speedtests = db.Column(db.Integer, default=1)
     timezone = db.Column(db.String(50), default="Asia/Kolkata")
+    is_cpu_info_enabled = db.Column(db.Boolean, default=True)
+    is_memory_info_enabled = db.Column(db.Boolean, default=True)
+    is_disk_info_enabled = db.Column(db.Boolean, default=True)
+    is_network_info_enabled = db.Column(db.Boolean, default=True)
+    is_process_info_enabled = db.Column(db.Boolean, default=True)
+    is_speedtest_enabled = db.Column(db.Boolean, default=True)
+    enable_cache = db.Column(db.Boolean, default=True)
 
     def __repr__(self):
         return f"<DashboardSettings {self.speedtest_cooldown}, {self.timezone}, {self.number_of_speedtests}>"
@@ -76,4 +83,10 @@ class User(db.Model, UserMixin):
         hashed_password = generate_password_hash('adminpassword')
         admin_user = User(username='admin', password=hashed_password, user_level='admin')
         db.session.add(admin_user)
-        db.session.commit()
\ No newline at end of file
+        db.session.commit()
+
+# ibject for all templates
+@app.context_processor
+def inject_settings():
+    settings = DashboardSettings.query.first()
+    return dict(settings=settings)
diff --git a/src/routes/cpu_info.py b/src/routes/cpu_info.py
index 68307f8..d60c585 100644
--- a/src/routes/cpu_info.py
+++ b/src/routes/cpu_info.py
@@ -3,11 +3,16 @@
 
 from src.config import app
 from src.utils import get_cpu_core_count, get_cpu_frequency, cpu_usage_percent, get_cpu_temp, get_cached_value
+from src.models import DashboardSettings
 
 cpu_info_bp = blueprints.Blueprint("cpu_usage", __name__)
 
 @app.route("/cpu_usage")
 def cpu_usage():
+    settings = DashboardSettings.query.first()
+    if not settings.is_cpu_info_enabled:
+        return render_template("error/404.html")
+    
     current_temp, high_temp, critical_temp = get_cpu_temp()
     cpu_core = get_cached_value("cpu_core", get_cpu_core_count)
     system_info = {
diff --git a/src/routes/disk_info.py b/src/routes/disk_info.py
index 4b82c6f..5841965 100644
--- a/src/routes/disk_info.py
+++ b/src/routes/disk_info.py
@@ -4,11 +4,15 @@
 
 from src.config import app
 from src.utils import get_cached_value, get_disk_free, get_disk_total, get_disk_used, get_disk_usage_percent
+from src.models import DashboardSettings
 
 disk_info_bp = blueprints.Blueprint("disk_usage", __name__)
 
 @app.route("/disk_usage")
 def disk_usage():
+    settings = DashboardSettings.query.first()
+    if not settings.is_disk_info_enabled:
+        return render_template("error/404.html")
     disk_total = get_cached_value("disk_total", get_disk_total)
     system_info = {
         "disk_usage": get_disk_usage_percent(),
diff --git a/src/routes/memory_info.py b/src/routes/memory_info.py
index ba0ca32..d58216e 100644
--- a/src/routes/memory_info.py
+++ b/src/routes/memory_info.py
@@ -3,13 +3,16 @@
 
 from src.config import app
 from src.utils import get_cached_value, get_memory_percent, get_memory_available, get_memory_used, get_swap_memory_info
+from src.models import DashboardSettings
 
 memory_info_bp = blueprints.Blueprint("memory_usage", __name__)
 
 
 @app.route("/memory_usage")
 def memory_usage():
-    
+    settings = DashboardSettings.query.first()
+    if not settings.is_memory_info_enabled:
+        return render_template("error/404.html")
     memory_available = get_cached_value("memory_available", get_memory_available) 
     system_info = {
         "memory_percent": get_memory_percent(),
diff --git a/src/routes/network_info.py b/src/routes/network_info.py
index 8b37da4..0070f24 100644
--- a/src/routes/network_info.py
+++ b/src/routes/network_info.py
@@ -3,10 +3,15 @@
 
 from src.config import app
 from src.utils import get_established_connections
+from src.models import DashboardSettings
+
 network_info_bp = blueprints.Blueprint("network_stats", __name__)
 
 @app.route("/network_stats")
 def network_stats():
+    settings = DashboardSettings.query.first()
+    if not settings.is_network_info_enabled:
+        return render_template("error/404.html")
     net_io = psutil.net_io_counters()
     ipv4_ip, ipv6_ip = get_established_connections()
     system_info = {
diff --git a/src/routes/process.py b/src/routes/process.py
index f1b5cb1..0f9ff02 100644
--- a/src/routes/process.py
+++ b/src/routes/process.py
@@ -3,12 +3,16 @@
 from flask_login import login_required, current_user
 from src.config import app
 from src.utils import get_top_processes
+from src.models import DashboardSettings
 
 process_bp = blueprints.Blueprint("process", __name__)
 
 @app.route("/process", methods=["GET", "POST"])
 @login_required
 def process():
+    settings = DashboardSettings.query.first()
+    if not settings.is_process_info_enabled:
+        return render_template("error/404.html")
     if current_user.user_level != "admin":
         flash("You do not have permission to view this page.", "danger")
         return redirect(url_for("dashboard"))
diff --git a/src/routes/settings.py b/src/routes/settings.py
index 7a4b34b..22a16b2 100644
--- a/src/routes/settings.py
+++ b/src/routes/settings.py
@@ -1,5 +1,4 @@
 from flask import render_template, request, flash, blueprints
-
 from src.config import app, db
 from src.models import DashboardSettings
 
@@ -7,14 +6,24 @@
 
 @app.route("/settings", methods=["GET", "POST"])
 def settings():
-    # Fetch the settings from the database and update them
+    # Fetch the settings from the database
     settings = DashboardSettings.query.first()
     if settings:
         if request.method == "POST":
+            # Update settings from the form inputs
             settings.speedtest_cooldown = int(request.form["speedtest_cooldown"])
             settings.number_of_speedtests = int(request.form["number_of_speedtests"])
             settings.timezone = request.form["timezone"]
+            settings.is_cpu_info_enabled = "is_cpu_info_enabled" in request.form
+            settings.is_memory_info_enabled = "is_memory_info_enabled" in request.form
+            settings.is_disk_info_enabled = "is_disk_info_enabled" in request.form
+            settings.is_network_info_enabled = "is_network_info_enabled" in request.form
+            settings.is_process_info_enabled = "is_process_info_enabled" in request.form
+            settings.is_speedtest_enabled = "is_speedtest_enabled" in request.form
+            settings.enable_cache = "enable_cache" in request.form
+
+            # Commit the changes to the database
             db.session.commit()
             flash("Settings updated successfully!", "success")
+        
         return render_template("settings.html", settings=settings)
-
diff --git a/src/scripts/locustfile.py b/src/scripts/locustfile.py
index 085e8cc..e1192b2 100644
--- a/src/scripts/locustfile.py
+++ b/src/scripts/locustfile.py
@@ -1,3 +1,5 @@
+import os
+
 from locust import HttpUser, TaskSet, task, between
 from locust.exception import StopUser
 
@@ -44,5 +46,4 @@ class WebsiteUser(HttpUser):
     wait_time = between(1, 5)  # Time to wait between tasks
 
 if __name__ == "__main__":
-    import os
-    # os.system("locust -f locustfile.py --host=http://localhost:5000")
+    os.system("locust -f locustfile.py --host=http://localhost:5000")
diff --git a/src/static/css/404.css b/src/static/css/404.css
new file mode 100644
index 0000000..1ea0de0
--- /dev/null
+++ b/src/static/css/404.css
@@ -0,0 +1,35 @@
+.container {
+    text-align: center;
+    background-color: #ffffff;
+    padding: 30px 50px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    font-size: 100px;
+    margin: 0;
+    color: #dc3545;
+}
+
+p {
+    font-size: 20px;
+    margin: 20px 0;
+    color: #6c757d;
+}
+
+.btn {
+    display: inline-block;
+    padding: 10px 20px;
+    font-size: 16px;
+    color: #ffffff;
+    background-color: #007bff;
+    border: none;
+    border-radius: 4px;
+    text-decoration: none;
+    transition: background-color 0.3s ease;
+}
+
+.btn:hover {
+    background-color: #0056b3;
+}
diff --git a/src/static/css/settings.css b/src/static/css/settings.css
index b83761a..1fd51ca 100644
--- a/src/static/css/settings.css
+++ b/src/static/css/settings.css
@@ -1,44 +1,93 @@
-.container {
+.settings-container {
     max-width: 600px;
-    margin: auto;
-    background: white;
+    margin: 0 auto;
     padding: 20px;
+    background-color: #f8f9fa;
     border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    margin-bottom: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
-h1 {
+.settings-title {
+    font-size: 28px;
+    color: #343a40;
     margin-bottom: 20px;
-    font-size: 24px;
+    text-align: center;
+}
+
+.settings-form {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
 }
 
 .form-group {
-    margin-bottom: 15px;
+    display: flex;
+    flex-direction: row;
+    align-items: center; /* Align items vertically in the center */
+    justify-content: space-between; /* Space out label and input */
+    margin-bottom: 10px;
 }
 
 .form-group label {
-    display: block;
-    margin-bottom: 5px;
-    font-weight: bold;
+    font-weight: 600;
+    color: #495057;
+    margin-right: 10px; /* Add some space between the label and checkbox */
 }
 
-.form-group input,
+.form-group input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    margin: 0; /* Remove any default margin */
+}
+
+.form-group input[type="number"],
 .form-group select {
-    width: 100%;
     padding: 8px;
-    box-sizing: border-box;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+    background-color: #ffffff;
+    font-size: 16px;
+    width: 100%;
+}
+
+@media (max-width: 576px) {
+    .form-group {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .form-group label {
+        margin-bottom: 5px;
+    }
 }
 
-.btn {
+.btn-primary {
+    padding: 10px 20px;
     background-color: #007bff;
-    color: white;
-    padding: 10px 15px;
+    color: #ffffff;
     border: none;
-    border-radius: 5px;
+    border-radius: 4px;
     cursor: pointer;
+    font-size: 16px;
+    text-align: center;
+    transition: background-color 0.3s ease;
 }
 
-.btn:hover {
+.btn-primary:hover {
     background-color: #0056b3;
 }
+
+@media (max-width: 576px) {
+    .settings-container {
+        padding: 15px;
+    }
+
+    .settings-title {
+        font-size: 24px;
+    }
+
+    .btn-primary {
+        width: 100%;
+    }
+}
diff --git a/src/templates/dasbhboard_comp/memory/dashboard_memory.html b/src/templates/dasbhboard_comp/memory/dashboard_memory.html
index 10b4282..f275d5f 100644
--- a/src/templates/dasbhboard_comp/memory/dashboard_memory.html
+++ b/src/templates/dasbhboard_comp/memory/dashboard_memory.html
@@ -1 +1,8 @@
-<div class="col-md-6 col-lg-4 mb-4"><div class="card bg-dashboard-memory"><div class="card-body"><h5 class="card-title">Memory Usages(Dashboard) <i class="fas fa-memory"></i></h5><p class="card-text fs-4">{{ system_info['dashboard_memory_usage']}}</p></div></div></div>
\ No newline at end of file
+<div class="col-md-6 col-lg-4 mb-4">
+    <div class="card bg-dashboard-memory">
+        <div class="card-body">
+            <h5 class="card-title">Memory Usages(Dashboard) <i class="fas fa-memory"></i></h5>
+            <p class="card-text fs-4">{{ system_info['dashboard_memory_usage']}} MB</p>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/templates/dasbhboard_comp/other/speedtest.html b/src/templates/dasbhboard_comp/other/speedtest.html
index 27feb53..3d637ab 100644
--- a/src/templates/dasbhboard_comp/other/speedtest.html
+++ b/src/templates/dasbhboard_comp/other/speedtest.html
@@ -1 +1,14 @@
-<div class="col-md-12 mb-4"><div class="card bg-speedtest"><div class="card-body"><h5 class="card-title">Perform Speed Test <i class="fas fa-clock"></i></h5>{% if speedtest_result %} <p class="card-text fs-4">Download Speed:{{ speedtest_result["download_speed"]}}</p><p class="card-text fs-4">Upload Speed:{{ speedtest_result["upload_speed"]}}</p><p class="card-text fs-4">Test Last Performed:{{ last_timestamp}}</p><p class="card-text fs-4">Try again test in :{{ next_test_time}} mins</p>{% endif %} {% if show_prompt %} <a href="{{ url_for('speedtest')}}" class="btn btn-light">Run Speed Test</a>{% endif %} </div></div></div>
\ No newline at end of file
+{% if settings.is_speedtest_enabled %}
+<div class="col-md-12 mb-4">
+    <div class="card bg-speedtest">
+        <div class="card-body">
+            <h5 class="card-title">Perform Speed Test <i class="fas fa-clock"></i></h5>{% if speedtest_result %} <p
+                class="card-text fs-4">Download Speed:{{ speedtest_result["download_speed"]}}</p>
+            <p class="card-text fs-4">Upload Speed:{{ speedtest_result["upload_speed"]}}</p>
+            <p class="card-text fs-4">Test Last Performed:{{ last_timestamp}}</p>
+            <p class="card-text fs-4">Try again test in :{{ next_test_time}} mins</p>{% endif %} {% if show_prompt %} <a
+                href="{{ url_for('speedtest')}}" class="btn btn-light">Run Speed Test</a>{% endif %}
+        </div>
+    </div>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/src/templates/error/404.html b/src/templates/error/404.html
index e69de29..f614122 100644
--- a/src/templates/error/404.html
+++ b/src/templates/error/404.html
@@ -0,0 +1,13 @@
+{% extends 'base.html' %}
+{% block title %}Page not found{% endblock %}
+{% block extra_head %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/404.css')}}">
+{% endblock %}
+
+{% block content %}
+<div class="container">
+    <h1>404</h1>
+    <p>Oops! The page you are looking for does not exist.</p>
+    <a href="{{ url_for('dashboard') }}" class="btn">Go Back Home</a>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/src/templates/ext/navbar.html b/src/templates/ext/navbar.html
index 2be91e9..7b5fb02 100644
--- a/src/templates/ext/navbar.html
+++ b/src/templates/ext/navbar.html
@@ -9,42 +9,52 @@
     </button>
     <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="navbar-nav">
+            {% if settings.is_cpu_info_enabled %}
             <li class="nav-item">
                 <a class="nav-link {% if request.endpoint == 'cpu_usage' %}active{% endif %}" 
                    href="{{ url_for('cpu_usage') }}">
                     <i class="fas fa-microchip mr-1"></i>CPU Info
                 </a>
             </li>
+            {% endif %}
+            {% if settings.is_memory_info_enabled %}
             <li class="nav-item">
                 <a class="nav-link {% if request.endpoint == 'memory_usage' %}active{% endif %}" 
                    href="{{ url_for('memory_usage') }}">
                     <i class="fas fa-memory mr-1"></i>Memory Info
                 </a>
             </li>
+            {% endif %}
+            {% if settings.is_disk_info_enabled %}
             <li class="nav-item">
                 <a class="nav-link {% if request.endpoint == 'disk_usage' %}active{% endif %}" 
                    href="{{ url_for('disk_usage') }}">
                     <i class="fas fa-hdd mr-1"></i>Disk Info
                 </a>
             </li>
+            {% endif %}
+            {% if settings.is_network_info_enabled %}
             <li class="nav-item">
                 <a class="nav-link {% if request.endpoint == 'network_stats' %}active{% endif %}" 
                    href="{{ url_for('network_stats') }}">
                     <i class="fas fa-network-wired mr-1"></i>Network Info
                 </a>
             </li>
+            {% endif %}
             <li class="nav-item">
                 <a class="nav-link {% if request.endpoint == 'settings' %}active{% endif %}" 
                    href="{{ url_for('settings') }}">
                     <i class="fas fa-cog mr-1"></i>Settings
                 </a>
             </li>
+            {% if settings.is_process_info_enabled and current_user.user_level == 'admin' %}
             <li class="nav-item">
                 <a class="nav-link {% if request.endpoint == 'process' %}active{% endif %}" 
                    href="{{ url_for('process') }}">
                     <i class="fas fa-tasks mr-1"></i>Process
                 </a>
             </li>
+            {% endif %}
         </ul>
         <!-- Authentication Links on the Most Right Corner -->
         <ul class="navbar-nav ml-auto">
diff --git a/src/templates/settings.html b/src/templates/settings.html
index 8a33068..58c780f 100644
--- a/src/templates/settings.html
+++ b/src/templates/settings.html
@@ -1 +1,69 @@
-{% extends 'base.html' %}{% block title %}CPU Usage Details{% endblock %}{% block extra_head %}<link rel="stylesheet" href="{{ url_for('static', filename='css/settings.css')}}">{% endblock %}{% block content %}<h1>Settings</h1><form method="POST">{% include 'ext/message.html' %} <div class="form-group"><label for="speedtest_cooldown">Speedtest Cooldown (minutes):</label><input type="number" id="speedtest_cooldown" name="speedtest_cooldown" value="{{ settings.speedtest_cooldown}}" min="1" required></div><div class="form-group"><label for="number_of_speedtests">Number of Speedtests Allowed per Hour:</label><input type="number" id="number_of_speedtests" name="number_of_speedtests" value="{{ settings.number_of_speedtests}}" min="1" required></div><div class="form-group"><label for="timezone">Timezone:</label><select id="timezone" name="timezone"><option value="Asia/Kolkata"{% if settings.timezone=="Asia/Kolkata" %}selected{% endif %}>Asia/Kolkata </option><option value="America/New_York"{% if settings.timezone=="America/New_York" %}selected{% endif %}>America/New_York</option><option value="Europe/London"{% if settings.timezone=="Europe/London" %}selected{% endif %}>Europe/London </option></select></div><button type="submit" class="btn btn-primary">Save Settings</button></form>{% endblock %}
\ No newline at end of file
+{% extends 'base.html' %}
+{% block title %}Settings{% endblock %}
+{% block extra_head %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/settings.css') }}">
+{% endblock %}
+{% block content %}
+<div class="settings-container">
+    <h1 class="settings-title">Settings</h1>
+    <form method="POST" class="settings-form">
+        {% include 'ext/message.html' %}
+        
+        <div class="form-group">
+            <label for="speedtest_cooldown">Speedtest Cooldown (hours):</label>
+            <input type="number" id="speedtest_cooldown" name="speedtest_cooldown" value="{{ settings.speedtest_cooldown }}" min="1" required>
+        </div>
+        
+        <div class="form-group">
+            <label for="number_of_speedtests">Number of Speedtests Allowed per Hour:</label>
+            <input type="number" id="number_of_speedtests" name="number_of_speedtests" value="{{ settings.number_of_speedtests }}" min="1" required>
+        </div>
+        
+        <div class="form-group">
+            <label for="timezone">Timezone:</label>
+            <select id="timezone" name="timezone">
+                <option value="Asia/Kolkata" {% if settings.timezone == "Asia/Kolkata" %}selected{% endif %}>Asia/Kolkata</option>
+                <option value="America/New_York" {% if settings.timezone == "America/New_York" %}selected{% endif %}>America/New_York</option>
+                <option value="Europe/London" {% if settings.timezone == "Europe/London" %}selected{% endif %}>Europe/London</option>
+            </select>
+        </div>
+
+        <div class="form-group">
+            <label for="is_cpu_info_enabled">Enable CPU Information:</label>
+            <input type="checkbox" id="is_cpu_info_enabled" name="is_cpu_info_enabled" {% if settings.is_cpu_info_enabled %}checked{% endif %}>
+        </div>
+
+        <div class="form-group">
+            <label for="is_memory_info_enabled">Enable Memory Information:</label>
+            <input type="checkbox" id="is_memory_info_enabled" name="is_memory_info_enabled" {% if settings.is_memory_info_enabled %}checked{% endif %}>
+        </div>
+        
+        <div class="form-group">
+            <label for="is_disk_info_enabled">Enable Disk Information:</label>
+            <input type="checkbox" id="is_disk_info_enabled" name="is_disk_info_enabled" {% if settings.is_disk_info_enabled %}checked{% endif %}>
+        </div>
+        
+        <div class="form-group">
+            <label for="is_network_info_enabled">Enable Network Information:</label>
+            <input type="checkbox" id="is_network_info_enabled" name="is_network_info_enabled" {% if settings.is_network_info_enabled %}checked{% endif %}>
+        </div>
+
+        <div class="form-group">
+            <label for="is_speedtest_enabled">Enable Speedtest:</label>
+            <input type="checkbox" id="is_speedtest_enabled" name="is_speedtest_enabled" {% if settings.is_speedtest_enabled %}checked{% endif %}>
+        </div>
+
+        <div class="form-group">
+            <label for="is_process_info_enabled">Process Info Enabled:</label>
+            <input type="checkbox" id="is_process_info_enabled" name="is_process_info_enabled" {% if settings.is_process_info_enabled %}checked{% endif %}>
+        </div>
+        
+        <div class="form-group">
+            <label for="enable_cache">Enable Caching:</label>
+            <input type="checkbox" id="enable_cache" name="enable_cache" {% if settings.enable_cache %}checked{% endif %}>
+        </div>
+
+        <button type="submit" class="btn btn-primary">Save Settings</button>
+    </form>
+</div>
+{% endblock %}
diff --git a/src/utils.py b/src/utils.py
index 4c8bd04..5114b69 100644
--- a/src/utils.py
+++ b/src/utils.py
@@ -5,8 +5,11 @@
 import psutil
 from pprint import pprint
 
+from src.models import DashboardSettings
+
 # Simple in-memory cache for specific data with individual timestamps
 cache = {}
+enable_cahce = True
 CACHE_EXPIRATION = 3600  # Cache expiration time in seconds (1 hour)
 
 def format_uptime(uptime_seconds):
@@ -26,11 +29,15 @@ def get_flask_memory_usage():
     """
     Returns the memory usage of the current Flask application in MB.
     """
-    pid = os.getpid()
-    process = psutil.Process(pid)
-    memory_info = process.memory_info()
-    memory_in_mb = memory_info.rss / (1024 ** 2)
-    return f"{round(memory_in_mb)} MB"
+    try:
+        pid = os.getpid()  # Get the current process ID
+        process = psutil.Process(pid)  # Get the process information using psutil
+        memory_info = process.memory_info()  # Get the memory usage information
+        memory_in_mb = memory_info.rss / (1024 ** 2)  # Convert bytes to MB
+        return round(memory_in_mb)  # Return the memory usage rounded to 2 decimal places
+    except Exception as e:
+        print(f"Error getting memory usage: {e}")
+        return None
 
 def get_established_connections():
     connections = psutil.net_connections()
@@ -145,14 +152,20 @@ def get_swap_memory_info():
 
 def get_cached_value(key, fresh_value_func):
     """ Get a cached value if available and not expired, otherwise get fresh value. """
+    settings = DashboardSettings.query.first()
+    if settings:
+        enable_cahce = settings.enable_cache
+
+    print("Cache enabled:", enable_cahce)
+    
     current_time = time.time()
     # if key not in cache, create a new entry
     if key not in cache:
         cache[key] = {'value': None, 'timestamp': 0}
 
     # Check if cache is valid
-    if cache[key]['value'] is not None and (current_time - cache[key]['timestamp'] < CACHE_EXPIRATION):
-        print(key, cache[key]['value'])
+    if enable_cahce and cache[key]['value'] is not None and (current_time - cache[key]['timestamp'] < CACHE_EXPIRATION):
+        # print(key, cache[key]['value'])
         return cache[key]['value']
 
     # Fetch fresh value

From 1b12587d6694ef600949d867e1917989367345f1 Mon Sep 17 00:00:00 2001
From: deepak-linux <deepak008@live.com>
Date: Sun, 1 Sep 2024 18:45:13 +0530
Subject: [PATCH 3/3] feat: more toggle and navbar improved

---
 src/models.py                                 |  26 ++-
 src/routes/settings.py                        |  15 +-
 src/static/css/settings.css                   |  47 ++---
 src/static/css/style.css                      |  74 ++++----
 .../dasbhboard_comp/battery/percentage.html   |  11 +-
 src/templates/dasbhboard_comp/cpu/core.html   |  13 +-
 .../dasbhboard_comp/cpu/current_temp.html     |  11 +-
 src/templates/dasbhboard_comp/cpu/usages.html |  11 +-
 src/templates/dasbhboard_comp/disk/usage.html |  11 +-
 .../memory/dashboard_memory.html              |   4 +-
 .../dasbhboard_comp/memory/usage.html         |  11 +-
 .../dasbhboard_comp/network/stats.html        |   4 +-
 .../dasbhboard_comp/other/boot_time.html      |   2 +
 .../dasbhboard_comp/other/uptime.html         |  11 +-
 .../dasbhboard_comp/other/username.html       |  11 +-
 src/templates/ext/navbar.html                 |  16 +-
 src/templates/settings.html                   | 168 +++++++++++++-----
 src/templates/speedtest_result.html           |  26 ++-
 18 files changed, 347 insertions(+), 125 deletions(-)

diff --git a/src/models.py b/src/models.py
index d91f5d8..64f96af 100644
--- a/src/models.py
+++ b/src/models.py
@@ -22,16 +22,36 @@ def __repr__(self):
 class DashboardSettings(db.Model):
     __tablename__ = "DashboardSettings"
     id = db.Column(db.Integer, primary_key=True)
+    
+    # speedtest setting
     speedtest_cooldown = db.Column(db.Integer, default=1)
     number_of_speedtests = db.Column(db.Integer, default=1)
+
+    # general settings
     timezone = db.Column(db.String(50), default="Asia/Kolkata")
+    enable_cache = db.Column(db.Boolean, default=True)
+
+    # page enable/disable
     is_cpu_info_enabled = db.Column(db.Boolean, default=True)
     is_memory_info_enabled = db.Column(db.Boolean, default=True)
     is_disk_info_enabled = db.Column(db.Boolean, default=True)
     is_network_info_enabled = db.Column(db.Boolean, default=True)
-    is_process_info_enabled = db.Column(db.Boolean, default=True)
-    is_speedtest_enabled = db.Column(db.Boolean, default=True)
-    enable_cache = db.Column(db.Boolean, default=True)
+    is_process_info_enabled = db.Column(db.Boolean, default=False)
+
+
+    # card enable/disable
+    is_user_card_enabled = db.Column(db.Boolean, default=True)
+    is_server_card_enabled = db.Column(db.Boolean, default=True)
+    is_battery_card_enabled = db.Column(db.Boolean, default=True)
+    is_cpu_core_card_enabled = db.Column(db.Boolean, default=True)
+    is_cpu_usage_card_enabled = db.Column(db.Boolean, default=True)
+    is_cpu_temp_card_enabled = db.Column(db.Boolean, default=True)
+    is_dashboard_memory_card_enabled = db.Column(db.Boolean, default=True)
+    is_memory_usage_card_enabled = db.Column(db.Boolean, default=True)
+    is_disk_usage_card_enabled = db.Column(db.Boolean, default=True)
+    is_system_uptime_card_enabled = db.Column(db.Boolean, default=True)
+    is_network_statistic_card_enabled = db.Column(db.Boolean, default=True)
+    is_speedtest_enabled = db.Column(db.Boolean, default=False)
 
     def __repr__(self):
         return f"<DashboardSettings {self.speedtest_cooldown}, {self.timezone}, {self.number_of_speedtests}>"
diff --git a/src/routes/settings.py b/src/routes/settings.py
index 22a16b2..27153c1 100644
--- a/src/routes/settings.py
+++ b/src/routes/settings.py
@@ -19,9 +19,22 @@ def settings():
             settings.is_disk_info_enabled = "is_disk_info_enabled" in request.form
             settings.is_network_info_enabled = "is_network_info_enabled" in request.form
             settings.is_process_info_enabled = "is_process_info_enabled" in request.form
-            settings.is_speedtest_enabled = "is_speedtest_enabled" in request.form
             settings.enable_cache = "enable_cache" in request.form
 
+            # <!-- is_user_card_enabled -->
+            settings.is_user_card_enabled = "is_user_card_enabled" in request.form
+            settings.is_server_card_enabled = "is_server_card_enabled" in request.form
+            settings.is_battery_card_enabled = "is_battery_card_enabled" in request.form
+            settings.is_cpu_core_card_enabled = "is_cpu_core_card_enabled" in request.form
+            settings.is_cpu_usage_card_enabled = "is_cpu_usage_card_enabled" in request.form
+            settings.is_cpu_temp_card_enabled = "is_cpu_temp_card_enabled" in request.form
+            settings.is_dashboard_memory_card_enabled = "is_dashboard_memory_card_enabled" in request.form
+            settings.is_memory_usage_card_enabled = "is_memory_usage_card_enabled" in request.form
+            settings.is_disk_usage_card_enabled = "is_disk_usage_card_enabled" in request.form
+            settings.is_system_uptime_card_enabled = "is_system_uptime_card_enabled" in request.form
+            settings.is_network_statistic_card_enabled = "is_network_statistic_card_enabled" in request.form
+            settings.is_speedtest_enabled = "is_speedtest_enabled" in request.form
+
             # Commit the changes to the database
             db.session.commit()
             flash("Settings updated successfully!", "success")
diff --git a/src/static/css/settings.css b/src/static/css/settings.css
index 1fd51ca..36ae2da 100644
--- a/src/static/css/settings.css
+++ b/src/static/css/settings.css
@@ -1,5 +1,5 @@
 .settings-container {
-    max-width: 600px;
+    max-width: 800px;
     margin: 0 auto;
     padding: 20px;
     background-color: #f8f9fa;
@@ -8,37 +8,49 @@
 }
 
 .settings-title {
-    font-size: 28px;
+    font-size: 32px;
     color: #343a40;
-    margin-bottom: 20px;
+    margin-bottom: 30px;
     text-align: center;
 }
 
 .settings-form {
     display: flex;
     flex-direction: column;
-    gap: 15px;
+    gap: 20px;
+}
+
+.settings-section {
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    padding: 15px;
+    background-color: #ffffff;
+}
+
+.section-title {
+    font-size: 24px;
+    color: #495057;
+    margin-bottom: 15px;
 }
 
 .form-group {
     display: flex;
     flex-direction: row;
-    align-items: center; /* Align items vertically in the center */
-    justify-content: space-between; /* Space out label and input */
-    margin-bottom: 10px;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 15px;
 }
 
 .form-group label {
     font-weight: 600;
     color: #495057;
-    margin-right: 10px; /* Add some space between the label and checkbox */
 }
 
 .form-group input[type="checkbox"] {
     width: 20px;
     height: 20px;
     cursor: pointer;
-    margin: 0; /* Remove any default margin */
+    margin: 0;
 }
 
 .form-group input[type="number"],
@@ -51,19 +63,8 @@
     width: 100%;
 }
 
-@media (max-width: 576px) {
-    .form-group {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .form-group label {
-        margin-bottom: 5px;
-    }
-}
-
 .btn-primary {
-    padding: 10px 20px;
+    padding: 12px 25px;
     background-color: #007bff;
     color: #ffffff;
     border: none;
@@ -78,13 +79,13 @@
     background-color: #0056b3;
 }
 
-@media (max-width: 576px) {
+@media (max-width: 768px) {
     .settings-container {
         padding: 15px;
     }
 
     .settings-title {
-        font-size: 24px;
+        font-size: 28px;
     }
 
     .btn-primary {
diff --git a/src/static/css/style.css b/src/static/css/style.css
index 7936fb4..22b2ad9 100644
--- a/src/static/css/style.css
+++ b/src/static/css/style.css
@@ -58,63 +58,67 @@ body {
     font-size: 2.5rem;
 }
 
+/* Navbar Styles */
 /* Navbar Styles */
 .navbar {
-    background-color: #0056b3; /* Dark blue background */
-    padding: 0.75rem 1rem; /* Increased padding for a more substantial navbar */
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
-    border-radius: 0.5rem; /* Slightly rounded corners */
+    background-color: #ffffff;
+    border-bottom: 1px solid #dee2e6;
+    padding: 0.5rem 1rem;
 }
 
 .navbar-brand {
-    font-size: 1.75rem; /* Slightly larger and bolder for prominence */
-    color: #000000; /* White text color for contrast */
-    font-weight: bold; /* Added weight for emphasis */
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #007bff;
+}
+
+.navbar-nav {
+    display: flex;
+    align-items: center;
 }
 
-.navbar-nav .nav-link {
-    color: #000000; /* White text color */
-    font-size: 1.125rem; /* Slightly larger font for readability */
-    padding: 0.5rem 1rem; /* More padding for clickable area */
-    transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition */
+.nav-item {
+    margin-left: 1rem;
 }
 
-.navbar-nav .nav-link:hover {
-    color: #0056b3; /* Blue text on hover */
-    background-color: #f8f9fa; /* Light gray background on hover */
-    border-radius: 0.25rem;
+.nav-link {
+    color: #495057;
+    font-size: 1rem;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.nav-link:hover, .nav-link.active {
+    color: #ffffff;
+    background-color: #007bff;
+    text-decoration: none;
 }
 
-/* Active Page Styling */
-.navbar-nav .nav-link.active {
-    background-color: #003d80; /* Darker blue for the active page */
-    color: #ffffff; /* Keep the text white */
-    border-radius: 0.25rem; /* Match the hover effect */
+.nav-link i {
+    font-size: 1.2rem;
 }
 
 .navbar-toggler {
-    border: none; /* Remove default border */
-    outline: none; /* Remove focus outline */
-    padding: 0.25rem 0.5rem; /* Smaller padding for a sleek look */
+    border: none;
 }
 
 .navbar-toggler-icon {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
-    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); /* Add subtle shadow */
+    background-image: url('data:image/svg+xml;charset=utf8,...'); /* Include your own icon URL or SVG here */
 }
 
-/* Responsive Styles */
-@media (max-width: 767.98px) {
-    .navbar-nav .nav-link {
-        padding-right: 1rem;
-        padding-left: 1rem;
-        text-align: center; /* Center-align links on smaller screens */
-    }
+/* Add margin-right to space out authentication links */
+.navbar-nav.ml-auto .nav-item {
+    margin-left: 1rem;
+}
 
-    .navbar-brand {
-        font-size: 1.5rem; /* Adjust brand size on smaller screens */
+/* Responsive adjustments */
+@media (max-width: 992px) {
+    .navbar-nav {
+        margin-top: 0.5rem;
     }
 }
+/* end of navbar styles */
 
 .btn-primary {
     margin-top: 1rem; /* Adds space above buttons */
diff --git a/src/templates/dasbhboard_comp/battery/percentage.html b/src/templates/dasbhboard_comp/battery/percentage.html
index d4e5e84..6b98d8c 100644
--- a/src/templates/dasbhboard_comp/battery/percentage.html
+++ b/src/templates/dasbhboard_comp/battery/percentage.html
@@ -1 +1,10 @@
-<div class="col-md-6 col-lg-4 mb-4"><div class="card battery-card" data-battery="{{ system_info['battery_percent']}}"><div class="card-body"><h5 class="card-title">Battery Percentage <i class="fas fa-battery-three-quarters"></i></h5><p class="card-text fs-4">{{ system_info['battery_percent']}}%</p></div></div></div>
\ No newline at end of file
+{% if settings.is_battery_card_enabled %}
+<div class="col-md-6 col-lg-4 mb-4">
+    <div class="card battery-card" data-battery="{{ system_info['battery_percent']}}">
+        <div class="card-body">
+            <h5 class="card-title">Battery Percentage <i class="fas fa-battery-three-quarters"></i></h5>
+            <p class="card-text fs-4">{{ system_info['battery_percent']}}%</p>
+        </div>
+    </div>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/src/templates/dasbhboard_comp/cpu/core.html b/src/templates/dasbhboard_comp/cpu/core.html
index 22ac313..bb9e620 100644
--- a/src/templates/dasbhboard_comp/cpu/core.html
+++ b/src/templates/dasbhboard_comp/cpu/core.html
@@ -1 +1,12 @@
-<div class="col-md-6 col-lg-4 mb-4"><div class="card bg-cpu" data-cpu="{{ system_info['cpu_percent']}}"><div class="card-body"><h5 class="card-title">CPU Cores <i class="fas fa-microchip"></i></h5><p class="card-text fs-4">{{ system_info['cpu_core']}}</p><div class="cpu-core-visualization">{% for i in range(system_info['cpu_core']) %} <div class="cpu-core-bar"></div>{% endfor %} </div></div></div></div>
\ No newline at end of file
+{% if settings.is_cpu_core_card_enabled %}
+<div class="col-md-6 col-lg-4 mb-4">
+    <div class="card bg-cpu" data-cpu="{{ system_info['cpu_percent']}}">
+        <div class="card-body">
+            <h5 class="card-title">CPU Cores <i class="fas fa-microchip"></i></h5>
+            <p class="card-text fs-4">{{ system_info['cpu_core']}}</p>
+            <div class="cpu-core-visualization">{% for i in range(system_info['cpu_core']) %} <div class="cpu-core-bar">
+                </div>{% endfor %} </div>
+        </div>
+    </div>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/src/templates/dasbhboard_comp/cpu/current_temp.html b/src/templates/dasbhboard_comp/cpu/current_temp.html
index 87f294c..dbc894d 100644
--- a/src/templates/dasbhboard_comp/cpu/current_temp.html
+++ b/src/templates/dasbhboard_comp/cpu/current_temp.html
@@ -1 +1,10 @@
-<div class="col-md-6 col-lg-4 mb-4"><div class="card cpu-card bg-cpu" data-cpu-usage="{{ system_info['cpu_percent']}}%" shadow-sm border-0 rounded-3"><div class="card-body"><h5 class="card-title">CPU Temperature <i class="fas fa-microchip"></i></h5><p class="card-text fs-4">{{ system_info['current_temp']}}%</p></div></div></div>
\ No newline at end of file
+{% if settings.is_cpu_temp_card_enabled %}
+<div class="col-md-6 col-lg-4 mb-4">
+    <div class="card cpu-card bg-cpu" data-cpu-usage="{{ system_info['cpu_percent']}}%" shadow-sm border-0 rounded-3">
+        <div class="card-body">
+            <h5 class="card-title">CPU Temperature <i class="fas fa-microchip"></i></h5>
+            <p class="card-text fs-4">{{ system_info['current_temp']}}%</p>
+        </div>
+    </div>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/src/templates/dasbhboard_comp/cpu/usages.html b/src/templates/dasbhboard_comp/cpu/usages.html
index c8fa76b..de8fd7c 100644
--- a/src/templates/dasbhboard_comp/cpu/usages.html
+++ b/src/templates/dasbhboard_comp/cpu/usages.html
@@ -1 +1,10 @@
-<div class="col-md-6 col-lg-4 mb-4"><div class="card cpu-card bg-cpu" data-cpu-usage="{{ system_info['cpu_percent']}}%" shadow-sm border-0 rounded-3"><div class="card-body"><h5 class="card-title">CPU Usage <i class="fas fa-microchip"></i></h5><p class="card-text fs-4">{{ system_info['cpu_percent']}}%</p></div></div></div>
\ No newline at end of file
+{% if settings.is_cpu_usage_card_enabled %}
+<div class="col-md-6 col-lg-4 mb-4">
+    <div class="card cpu-card bg-cpu" data-cpu-usage="{{ system_info['cpu_percent']}}%" shadow-sm border-0 rounded-3">
+        <div class="card-body">
+            <h5 class="card-title">CPU Usage <i class="fas fa-microchip"></i></h5>
+            <p class="card-text fs-4">{{ system_info['cpu_percent']}}%</p>
+        </div>
+    </div>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/src/templates/dasbhboard_comp/disk/usage.html b/src/templates/dasbhboard_comp/disk/usage.html
index f458d1f..2457c9e 100644
--- a/src/templates/dasbhboard_comp/disk/usage.html
+++ b/src/templates/dasbhboard_comp/disk/usage.html
@@ -1 +1,10 @@
-<div class="col-md-6 col-lg-4 mb-4"><div class="card bg-disk shadow-sm border-0 rounded-3"><div class="card-body"><h5 class="card-title">Disk Usage <i class="fas fa-hdd"></i></h5><p class="card-text fs-4">{{ system_info['disk_usage']}}%</p></div></div></div>
\ No newline at end of file
+{% if settings.is_disk_usage_card_enabled %}
+<div class="col-md-6 col-lg-4 mb-4">
+    <div class="card bg-disk shadow-sm border-0 rounded-3">
+        <div class="card-body">
+            <h5 class="card-title">Disk Usage <i class="fas fa-hdd"></i></h5>
+            <p class="card-text fs-4">{{ system_info['disk_usage']}}%</p>
+        </div>
+    </div>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/src/templates/dasbhboard_comp/memory/dashboard_memory.html b/src/templates/dasbhboard_comp/memory/dashboard_memory.html
index f275d5f..bdb4a1b 100644
--- a/src/templates/dasbhboard_comp/memory/dashboard_memory.html
+++ b/src/templates/dasbhboard_comp/memory/dashboard_memory.html
@@ -1,3 +1,4 @@
+{% if settings.is_dashboard_memory_card_enabled %}
 <div class="col-md-6 col-lg-4 mb-4">
     <div class="card bg-dashboard-memory">
         <div class="card-body">
@@ -5,4 +6,5 @@ <h5 class="card-title">Memory Usages(Dashboard) <i class="fas fa-memory"></i></h
             <p class="card-text fs-4">{{ system_info['dashboard_memory_usage']}} MB</p>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/src/templates/dasbhboard_comp/memory/usage.html b/src/templates/dasbhboard_comp/memory/usage.html
index cf7d4d9..3faf869 100644
--- a/src/templates/dasbhboard_comp/memory/usage.html
+++ b/src/templates/dasbhboard_comp/memory/usage.html
@@ -1 +1,10 @@
-<div class="col-md-6 col-lg-4 mb-4"><div class="card bg-memory" data-memory="{{ system_info['memory_percent']}}" shadow-sm border-0 rounded-3"><div class="card-body"><h5 class="card-title">Memory Usage <i class="fas fa-memory"></i></h5><p class="card-text fs-4">{{ system_info['memory_percent']}}%</p></div></div></div>
\ No newline at end of file
+{% if settings.is_memory_usage_card_enabled %}
+<div class="col-md-6 col-lg-4 mb-4">
+    <div class="card bg-memory" data-memory="{{ system_info['memory_percent']}}" shadow-sm border-0 rounded-3">
+        <div class="card-body">
+            <h5 class="card-title">Memory Usage <i class="fas fa-memory"></i></h5>
+            <p class="card-text fs-4">{{ system_info['memory_percent']}}%</p>
+        </div>
+    </div>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/src/templates/dasbhboard_comp/network/stats.html b/src/templates/dasbhboard_comp/network/stats.html
index 47d9a5a..0b5d61e 100644
--- a/src/templates/dasbhboard_comp/network/stats.html
+++ b/src/templates/dasbhboard_comp/network/stats.html
@@ -1 +1,3 @@
-<div class="col-md-6 col-lg-6 mb-4"><div class="card bg-network"><div class="card-body text-center"><h5 class="card-title">Network Statistics <i class="fas fa-network-wired"></i></h5><p class="card-text fs-4">D:{{ system_info['network_sent']}} MB / U:{{ system_info['network_received']}} MB</p></div></div></div>
\ No newline at end of file
+{% if settings.is_network_statistic_card_enabled %}
+<div class="col-md-6 col-lg-6 mb-4"><div class="card bg-network"><div class="card-body text-center"><h5 class="card-title">Network Statistics <i class="fas fa-network-wired"></i></h5><p class="card-text fs-4">D:{{ system_info['network_sent']}} MB / U:{{ system_info['network_received']}} MB</p></div></div></div>
+{% endif %}
\ No newline at end of file
diff --git a/src/templates/dasbhboard_comp/other/boot_time.html b/src/templates/dasbhboard_comp/other/boot_time.html
index 957ff2d..49e482f 100644
--- a/src/templates/dasbhboard_comp/other/boot_time.html
+++ b/src/templates/dasbhboard_comp/other/boot_time.html
@@ -1,3 +1,4 @@
+{% if settings.is_server_card_enabled %}
 <div class="col-md-6 col-lg-4 mb-4">
     <div class="card bg-boot">
         <div class="card-body">
@@ -6,6 +7,7 @@ <h5 class="card-title">Server Time <i class="fas fa-clock"></i></h5>
         </div>
     </div>
 </div>
+{% endif %}
 
 <script>
 // Function to format time in HH:MM:SS
diff --git a/src/templates/dasbhboard_comp/other/uptime.html b/src/templates/dasbhboard_comp/other/uptime.html
index 744917f..24a6645 100644
--- a/src/templates/dasbhboard_comp/other/uptime.html
+++ b/src/templates/dasbhboard_comp/other/uptime.html
@@ -1 +1,10 @@
-<div class="col-md-6 col-lg-6 mb-4"><div class="card bg-uptime" data-disk="{{ system_info['disk_usage']}}" shadow-sm border-0 rounded-3><div class="card-body bg-uptime"><h5 class="card-title">System Uptime <i class="fas fa-clock"></i></h5><p class="card-text fs-4">{{ system_info['uptime']}}</p></div></div></div>
\ No newline at end of file
+{% if settings.is_system_uptime_card_enabled %}
+<div class="col-md-6 col-lg-6 mb-4">
+    <div class="card bg-uptime" data-disk="{{ system_info['disk_usage']}}" shadow-sm border-0 rounded-3>
+        <div class="card-body bg-uptime">
+            <h5 class="card-title">System Uptime <i class="fas fa-clock"></i></h5>
+            <p class="card-text fs-4">{{ system_info['uptime']}}</p>
+        </div>
+    </div>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/src/templates/dasbhboard_comp/other/username.html b/src/templates/dasbhboard_comp/other/username.html
index 2ec1d36..7d69145 100644
--- a/src/templates/dasbhboard_comp/other/username.html
+++ b/src/templates/dasbhboard_comp/other/username.html
@@ -1 +1,10 @@
-<div class="col-md-6 col-lg-4 mb-4"><div class="card bg-username"><div class="card-body"><h5 class="card-title">Username <i class="fas fa-user"></i></h5><p class="card-text fs-4">{{ system_info['username']}}</p></div></div></div>
\ No newline at end of file
+{% if settings.is_user_card_enabled %}
+<div class="col-md-6 col-lg-4 mb-4">
+    <div class="card bg-username">
+        <div class="card-body">
+            <h5 class="card-title">Username <i class="fas fa-user"></i></h5>
+            <p class="card-text fs-4">{{ system_info['username']}}</p>
+        </div>
+    </div>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/src/templates/ext/navbar.html b/src/templates/ext/navbar.html
index 7b5fb02..9c4dd66 100644
--- a/src/templates/ext/navbar.html
+++ b/src/templates/ext/navbar.html
@@ -8,7 +8,7 @@
         <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarNav">
-        <ul class="navbar-nav">
+        <ul class="navbar-nav mr-auto">
             {% if settings.is_cpu_info_enabled %}
             <li class="nav-item">
                 <a class="nav-link {% if request.endpoint == 'cpu_usage' %}active{% endif %}" 
@@ -41,12 +41,6 @@
                 </a>
             </li>
             {% endif %}
-            <li class="nav-item">
-                <a class="nav-link {% if request.endpoint == 'settings' %}active{% endif %}" 
-                   href="{{ url_for('settings') }}">
-                    <i class="fas fa-cog mr-1"></i>Settings
-                </a>
-            </li>
             {% if settings.is_process_info_enabled and current_user.user_level == 'admin' %}
             <li class="nav-item">
                 <a class="nav-link {% if request.endpoint == 'process' %}active{% endif %}" 
@@ -55,8 +49,14 @@
                 </a>
             </li>
             {% endif %}
+            <li class="nav-item">
+                <a class="nav-link {% if request.endpoint == 'settings' %}active{% endif %}" 
+                   href="{{ url_for('settings') }}">
+                    <i class="fas fa-cog mr-1"></i>Settings
+                </a>
+            </li>
         </ul>
-        <!-- Authentication Links on the Most Right Corner -->
+        <!-- Authentication Links on the Right Side -->
         <ul class="navbar-nav ml-auto">
             {% if current_user.is_authenticated %}
             <li class="nav-item">
diff --git a/src/templates/settings.html b/src/templates/settings.html
index 58c780f..d229b92 100644
--- a/src/templates/settings.html
+++ b/src/templates/settings.html
@@ -9,59 +9,139 @@ <h1 class="settings-title">Settings</h1>
     <form method="POST" class="settings-form">
         {% include 'ext/message.html' %}
         
-        <div class="form-group">
-            <label for="speedtest_cooldown">Speedtest Cooldown (hours):</label>
-            <input type="number" id="speedtest_cooldown" name="speedtest_cooldown" value="{{ settings.speedtest_cooldown }}" min="1" required>
-        </div>
-        
-        <div class="form-group">
-            <label for="number_of_speedtests">Number of Speedtests Allowed per Hour:</label>
-            <input type="number" id="number_of_speedtests" name="number_of_speedtests" value="{{ settings.number_of_speedtests }}" min="1" required>
-        </div>
-        
-        <div class="form-group">
-            <label for="timezone">Timezone:</label>
-            <select id="timezone" name="timezone">
-                <option value="Asia/Kolkata" {% if settings.timezone == "Asia/Kolkata" %}selected{% endif %}>Asia/Kolkata</option>
-                <option value="America/New_York" {% if settings.timezone == "America/New_York" %}selected{% endif %}>America/New_York</option>
-                <option value="Europe/London" {% if settings.timezone == "Europe/London" %}selected{% endif %}>Europe/London</option>
-            </select>
+        <div class="settings-section">
+            <h2 class="section-title">Speedtest Settings</h2>
+            <div class="form-group">
+                <label for="speedtest_cooldown">Speedtest Cooldown (hours):</label>
+                <input type="number" id="speedtest_cooldown" name="speedtest_cooldown" value="{{ settings.speedtest_cooldown }}" min="1" required>
+            </div>
+            
+            <div class="form-group">
+                <label for="number_of_speedtests">Number of Speedtests Allowed per Hour:</label>
+                <input type="number" id="number_of_speedtests" name="number_of_speedtests" value="{{ settings.number_of_speedtests }}" min="1" required>
+            </div>
         </div>
 
-        <div class="form-group">
-            <label for="is_cpu_info_enabled">Enable CPU Information:</label>
-            <input type="checkbox" id="is_cpu_info_enabled" name="is_cpu_info_enabled" {% if settings.is_cpu_info_enabled %}checked{% endif %}>
-        </div>
+        <div class="settings-section">
+            <h2 class="section-title">General Settings</h2>
+            <div class="form-group">
+                <label for="timezone">Timezone:</label>
+                <select id="timezone" name="timezone">
+                    <option value="Asia/Kolkata" {% if settings.timezone == "Asia/Kolkata" %}selected{% endif %}>Asia/Kolkata</option>
+                    <option value="America/New_York" {% if settings.timezone == "America/New_York" %}selected{% endif %}>America/New_York</option>
+                    <option value="Europe/London" {% if settings.timezone == "Europe/London" %}selected{% endif %}>Europe/London</option>
+                </select>
+            </div>
 
-        <div class="form-group">
-            <label for="is_memory_info_enabled">Enable Memory Information:</label>
-            <input type="checkbox" id="is_memory_info_enabled" name="is_memory_info_enabled" {% if settings.is_memory_info_enabled %}checked{% endif %}>
-        </div>
-        
-        <div class="form-group">
-            <label for="is_disk_info_enabled">Enable Disk Information:</label>
-            <input type="checkbox" id="is_disk_info_enabled" name="is_disk_info_enabled" {% if settings.is_disk_info_enabled %}checked{% endif %}>
-        </div>
-        
-        <div class="form-group">
-            <label for="is_network_info_enabled">Enable Network Information:</label>
-            <input type="checkbox" id="is_network_info_enabled" name="is_network_info_enabled" {% if settings.is_network_info_enabled %}checked{% endif %}>
+            <div class="form-group">
+                <label for="enable_cache">Enable Caching:</label>
+                <input type="checkbox" id="enable_cache" name="enable_cache" {% if settings.enable_cache %}checked{% endif %}>
+            </div>
         </div>
 
-        <div class="form-group">
-            <label for="is_speedtest_enabled">Enable Speedtest:</label>
-            <input type="checkbox" id="is_speedtest_enabled" name="is_speedtest_enabled" {% if settings.is_speedtest_enabled %}checked{% endif %}>
-        </div>
+        <div class="settings-section">
+            <h2 class="section-title">Feature Toggles</h2>
+            <div class="form-group">
+                <label for="is_cpu_info_enabled">Enable CPU Information:</label>
+                <input type="checkbox" id="is_cpu_info_enabled" name="is_cpu_info_enabled" {% if settings.is_cpu_info_enabled %}checked{% endif %}>
+            </div>
+
+            <div class="form-group">
+                <label for="is_memory_info_enabled">Enable Memory Information:</label>
+                <input type="checkbox" id="is_memory_info_enabled" name="is_memory_info_enabled" {% if settings.is_memory_info_enabled %}checked{% endif %}>
+            </div>
+            
+            <div class="form-group">
+                <label for="is_disk_info_enabled">Enable Disk Information:</label>
+                <input type="checkbox" id="is_disk_info_enabled" name="is_disk_info_enabled" {% if settings.is_disk_info_enabled %}checked{% endif %}>
+            </div>
+            
+            <div class="form-group">
+                <label for="is_network_info_enabled">Enable Network Information:</label>
+                <input type="checkbox" id="is_network_info_enabled" name="is_network_info_enabled" {% if settings.is_network_info_enabled %}checked{% endif %}>
+            </div>
 
-        <div class="form-group">
-            <label for="is_process_info_enabled">Process Info Enabled:</label>
-            <input type="checkbox" id="is_process_info_enabled" name="is_process_info_enabled" {% if settings.is_process_info_enabled %}checked{% endif %}>
+            <div class="form-group">
+                <label for="is_process_info_enabled">Enable Process Information:</label>
+                <input type="checkbox" id="is_process_info_enabled" name="is_process_info_enabled" {% if settings.is_process_info_enabled %}checked{% endif %}>
+            </div>
         </div>
+
+        <div class="settings-section">
+            <h2 class="section-title">Card Toggles</h2>
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="is_user_card_enabled">Enable User Card:</label>
+                    <input type="checkbox" id="is_user_card_enabled" name="is_user_card_enabled" {% if settings.is_user_card_enabled %}checked{% endif %}>
+                </div>
         
-        <div class="form-group">
-            <label for="enable_cache">Enable Caching:</label>
-            <input type="checkbox" id="enable_cache" name="enable_cache" {% if settings.enable_cache %}checked{% endif %}>
+                <div class="form-group">
+                    <label for="is_server_card_enabled">Enable Server Card:</label>
+                    <input type="checkbox" id="is_server_card_enabled" name="is_server_card_enabled" {% if settings.is_server_card_enabled %}checked{% endif %}>
+                </div>
+            </div>
+        
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="is_battery_card_enabled">Enable Battery Card:</label>
+                    <input type="checkbox" id="is_battery_card_enabled" name="is_battery_card_enabled" {% if settings.is_battery_card_enabled %}checked{% endif %}>
+                </div>
+        
+                <div class="form-group">
+                    <label for="is_cpu_core_card_enabled">Enable CPU Core Card:</label>
+                    <input type="checkbox" id="is_cpu_core_card_enabled" name="is_cpu_core_card_enabled" {% if settings.is_cpu_core_card_enabled %}checked{% endif %}>
+                </div>
+            </div>
+        
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="is_cpu_usage_card_enabled">Enable CPU Usage Card:</label>
+                    <input type="checkbox" id="is_cpu_usage_card_enabled" name="is_cpu_usage_card_enabled" {% if settings.is_cpu_usage_card_enabled %}checked{% endif %}>
+                </div>
+        
+                <div class="form-group">
+                    <label for="is_cpu_temp_card_enabled">Enable CPU Temp Card:</label>
+                    <input type="checkbox" id="is_cpu_temp_card_enabled" name="is_cpu_temp_card_enabled" {% if settings.is_cpu_temp_card_enabled %}checked{% endif %}>
+                </div>
+            </div>
+        
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="is_dashboard_memory_card_enabled">Enable Dashboard Memory Card:</label>
+                    <input type="checkbox" id="is_dashboard_memory_card_enabled" name="is_dashboard_memory_card_enabled" {% if settings.is_dashboard_memory_card_enabled %}checked{% endif %}>
+                </div>
+        
+                <div class="form-group">
+                    <label for="is_memory_usage_card_enabled">Enable Memory Usage Card:</label>
+                    <input type="checkbox" id="is_memory_usage_card_enabled" name="is_memory_usage_card_enabled" {% if settings.is_memory_usage_card_enabled %}checked{% endif %}>
+                </div>
+            </div>
+        
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="is_disk_usage_card_enabled">Enable Disk Usage Card:</label>
+                    <input type="checkbox" id="is_disk_usage_card_enabled" name="is_disk_usage_card_enabled" {% if settings.is_disk_usage_card_enabled %}checked{% endif %}>
+                </div>
+        
+                <div class="form-group">
+                    <label for="is_system_uptime_card_enabled">Enable System Uptime Card:</label>
+                    <input type="checkbox" id="is_system_uptime_card_enabled" name="is_system_uptime_card_enabled" {% if settings.is_system_uptime_card_enabled %}checked{% endif %}>
+                </div>
+            </div>
+        
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="is_network_statistic_card_enabled">Enable Network Statistic Card:</label>
+                    <input type="checkbox" id="is_network_statistic_card_enabled" name="is_network_statistic_card_enabled" {% if settings.is_network_statistic_card_enabled %}checked{% endif %}>
+                </div>
+        
+                <div class="form-group">
+                    <label for="is_speedtest_enabled">Enable Speedtest Card:</label>
+                    <input type="checkbox" id="is_speedtest_enabled" name="is_speedtest_enabled" {% if settings.is_speedtest_enabled %}checked{% endif %}>
+                </div>
+            </div>
         </div>
+        
 
         <button type="submit" class="btn btn-primary">Save Settings</button>
     </form>
diff --git a/src/templates/speedtest_result.html b/src/templates/speedtest_result.html
index c188e0a..8de063a 100644
--- a/src/templates/speedtest_result.html
+++ b/src/templates/speedtest_result.html
@@ -1 +1,25 @@
-{% extends 'base.html' %}{% block title %}Speed Test Result{% endblock %}{% block content %}<div class="container mt-5"><div class="row justify-content-center"><div class="col-md-8"><div class="card shadow-sm border-0 rounded-3"><div class="card-body"><h1 class="card-title text-center mb-4">Speed Test Result</h1>{% if speedtest_result %} <ul class="list-group list-group-flush"><li class="list-group-item d-flex justify-content-between align-items-center"><strong>Download Speed:</strong><span>{{ speedtest_result.download_speed}}</span></li><li class="list-group-item d-flex justify-content-between align-items-center"><strong>Upload Speed:</strong><span>{{ speedtest_result.upload_speed}}</span></li><li class="list-group-item d-flex justify-content-between align-items-center"><strong>Ping:</strong><span>{{ speedtest_result.ping}}</span></li><li class="list-group-item d-flex justify-content-between align-items-center"><strong>Source:</strong><span>{{ source}}</span></li>{% if source=="Database" %} <li class="list-group-item d-flex justify-content-between align-items-center"><strong>Cooldown time:</strong><span>{{ remaining_time_for_next_test}} mins</span></li>{% endif %} </ul>{% else %} <div class="alert alert-warning text-center" role="alert">No speed test results available. </div>{% endif %} <div class="text-center mt-4"><a href="{{ url_for('dashboard')}}" class="btn btn-light">Back to Dashboard</a></div></div></div></div></div></div>{% endblock %}
\ No newline at end of file
+{% extends 'base.html' %}{% block title %}Speed Test Result{% endblock %}{% block content %}<div class="container mt-5">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card shadow-sm border-0 rounded-3">
+                <div class="card-body">
+                    <h1 class="card-title text-center mb-4">Speed Test Result</h1>{% if speedtest_result %} <ul
+                        class="list-group list-group-flush">
+                        <li class="list-group-item d-flex justify-content-between align-items-center"><strong>Download
+                                Speed:</strong><span>{{ speedtest_result.download_speed}}</span></li>
+                        <li class="list-group-item d-flex justify-content-between align-items-center"><strong>Upload
+                                Speed:</strong><span>{{ speedtest_result.upload_speed}}</span></li>
+                        <li class="list-group-item d-flex justify-content-between align-items-center">
+                            <strong>Ping:</strong><span>{{ speedtest_result.ping}}</span></li>
+                        <li class="list-group-item d-flex justify-content-between align-items-center">
+                            <strong>Source:</strong><span>{{ source}}</span></li>{% if source=="Database" %} <li
+                            class="list-group-item d-flex justify-content-between align-items-center"><strong>Cooldown
+                                time:</strong><span>{{ remaining_time_for_next_test}} mins</span></li>{% endif %}
+                    </ul>{% else %} <div class="alert alert-warning text-center" role="alert">No speed test results
+                        available. </div>{% endif %} <div class="text-center mt-4"><a href="{{ url_for('dashboard')}}"
+                            class="btn btn-light">Back to Dashboard</a></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>{% endblock %}
\ No newline at end of file