diff --git a/.gitignore b/.gitignore
index 861a239..cd9c325 100644
--- a/.gitignore
+++ b/.gitignore
@@ -75,3 +75,5 @@ renv/staging/
 .idea/
 .vscode/
 
+# Env files
+.env
\ No newline at end of file
diff --git a/webapps/data_validation_tool/index.html b/webapps/data_validation_tool/index.html
index 81652e9..6d59447 100644
--- a/webapps/data_validation_tool/index.html
+++ b/webapps/data_validation_tool/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SmartCane Data Validation Tool</title>
     <link rel="stylesheet" href="../theme.css">
+    <link rel="icon" type="image/x-icon" href="../res/check.png">
     <style>
         * {
             margin: 0;
@@ -30,22 +31,6 @@
             gap: 20px;
         }
         
-        .back-btn {
-            background: rgba(255,255,255,0.2);
-            color: white;
-            border: 1px solid rgba(255,255,255,0.3);
-            padding: 8px 12px;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 14px;
-            transition: background 0.3s ease;
-            flex-shrink: 0;
-        }
-        
-        .back-btn:hover {
-            background: rgba(255,255,255,0.3);
-        }
-        
         header h1 {
             font-size: 24px;
             font-weight: 600;
diff --git a/webapps/geojson_viewer/index.html b/webapps/geojson_viewer/index.html
new file mode 100644
index 0000000..48032be
--- /dev/null
+++ b/webapps/geojson_viewer/index.html
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GeoJSON Viewer</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
+    <link rel="stylesheet" href="../theme.css">
+    <link rel="icon" type="image/x-icon" href="../res/pin.png">
+    <style>
+        /* Layout styling adapted from sugar_mill_locator to match theme */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: #faf8f3;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        
+        /* Header matches the locator tool */
+        header {
+            background: linear-gradient(135deg, var(--sc-primary) 0%, var(--sc-primary-light) 100%);
+            color: white;
+            padding: 15px 20px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        h1 {
+            font-size: 20px;
+            font-weight: 600;
+            margin: 0;
+            flex: 1;
+            text-align: center;
+        }
+
+        .header-controls {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+
+        /* Main Container */
+        .container {
+            display: flex;
+            flex: 1;
+            overflow: hidden;
+            height: calc(100vh - 60px);
+            background: white;
+        }
+        
+        /* Map takes remaining space */
+        #map {
+            flex: 1;
+            position: relative;
+            background: #e0e0e0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+        }
+        
+        /* Sidebar Panel styling */
+        .panel {
+            width: 360px;
+            background: var(--sc-light);
+            border-left: 1px solid var(--sc-border);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            box-shadow: -2px 0 8px rgba(0,0,0,0.08);
+            z-index: 2;
+        }
+        
+        .panel-header {
+            background: linear-gradient(135deg, var(--sc-primary) 0%, var(--sc-primary-light) 100%);
+            color: white;
+            padding: 15px;
+            font-weight: 600;
+            font-size: 14px;
+            flex-shrink: 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .panel-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 15px;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        
+        .panel-section {
+            background: white;
+            padding: 15px;
+            border-radius: 8px;
+            border: 1px solid var(--sc-border);
+            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+        }
+        
+        .section-title {
+            font-weight: 600;
+            font-size: 13px;
+            color: var(--sc-text);
+            margin-bottom: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            border-bottom: 1px solid #eee;
+            padding-bottom: 8px;
+        }
+
+        /* File Input Styling */
+        .file-input-wrapper {
+            position: relative;
+            margin-bottom: 10px;
+        }
+
+        .file-input-label {
+            display: block;
+            padding: 12px;
+            background: #f8f9fa;
+            border: 2px dashed var(--sc-primary-light);
+            border-radius: 6px;
+            text-align: center;
+            cursor: pointer;
+            color: var(--sc-primary);
+            font-weight: 600;
+            font-size: 13px;
+            transition: all 0.3s;
+        }
+
+        .file-input-label:hover {
+            background: #eef7f6;
+            transform: translateY(-1px);
+        }
+
+        input[type="file"] {
+            display: none;
+        }
+
+        .file-name {
+            font-size: 12px;
+            color: var(--sc-text-muted);
+            margin-top: 5px;
+            text-align: center;
+            word-break: break-all;
+        }
+
+        /* Stats & Summary */
+        .stat-item {
+            display: flex;
+            justify-content: space-between;
+            font-size: 13px;
+            padding: 6px 0;
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .stat-item:last-child { border-bottom: none; }
+        
+        .stat-label { color: var(--sc-text-muted); }
+        .stat-value { font-weight: 600; color: var(--sc-text); }
+
+        /* Feature List */
+        .features-list {
+            max-height: 200px;
+            overflow-y: auto;
+            border: 1px solid #eee;
+            border-radius: 4px;
+        }
+
+        .feature-item {
+            padding: 8px 10px;
+            font-size: 12px;
+            border-bottom: 1px solid #eee;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+
+        .feature-item:hover { background: #f5f5f5; }
+        .feature-item.active { 
+            background: var(--sc-primary-light); 
+            color: white; 
+        }
+
+        /* Buttons */
+        .btn-group {
+            display: flex;
+            gap: 8px;
+        }
+
+        button {
+            padding: 8px 12px;
+            border: none;
+            border-radius: 4px;
+            font-size: 13px;
+            cursor: pointer;
+            transition: all 0.2s;
+            flex: 1;
+        }
+
+        /* Use theme colors via variables where possible, or match hex */
+        .btn-primary { background: var(--sc-primary); color: white; }
+        .btn-primary:hover { background: var(--sc-primary-light); }
+        
+        .btn-secondary { background: #f0f0f0; color: #333; border: 1px solid #ddd; }
+        .btn-secondary:hover { background: #e0e0e0; }
+
+        .btn-danger { background: var(--sc-danger); color: white; }
+        .btn-danger:hover { background: #c0392b; }
+
+        /* Map Controls (Satellite Toggle) */
+        .map-toggle-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            background: rgba(255,255,255,0.2);
+            padding: 5px 10px;
+            border-radius: 4px;
+            font-size: 13px;
+        }
+        
+        /* Modal Styling (Matching Locator) */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .modal.active { display: flex; }
+        
+        .modal-content {
+            background: white;
+            border-radius: 8px;
+            width: 90%;
+            max-width: 500px;
+            max-height: 85vh;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        }
+        
+        .modal-header {
+            background: linear-gradient(135deg, var(--sc-primary) 0%, var(--sc-primary-light) 100%);
+            color: white;
+            padding: 15px 20px;
+            border-radius: 8px 8px 0 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .modal-header h2 { font-size: 16px; margin: 0; }
+        
+        .modal-body {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .modal-property {
+            display: flex;       /* Enables side-by-side layout */
+            align-items: baseline;
+            padding: 8px 0;
+            border-bottom: 1px solid #eee;
+        }
+        
+        .modal-property:last-child {
+            border-bottom: none;
+        }
+
+        .modal-property-key {
+            flex: 0 0 40%;       /* First column: fixed 40% width */
+            font-weight: 700;    /* Bold text */
+            color: var(--sc-primary);
+            padding-right: 15px;
+            font-size: 13px;
+        }
+
+        .modal-property-value {
+            flex: 1;             /* Second column: takes remaining space */
+            color: #333;
+            word-break: break-word;
+            font-size: 13px;
+        }
+        
+        .close-btn {
+            background: none;
+            border: none;
+            color: white;
+            font-size: 24px;
+            padding: 0;
+            cursor: pointer;
+            opacity: 0.8;
+            flex: 0;
+        }
+        .close-btn:hover { opacity: 1; }
+
+        /* Property Table in Modal/Sidebar */
+        .property-row {
+            border-bottom: 1px solid #eee;
+            padding: 8px 0;
+            font-size: 13px;
+        }
+        .property-key { font-weight: 600; color: var(--sc-primary); display: block; margin-bottom: 2px; }
+        .property-value { color: #333; word-break: break-word; }
+
+        /* Alert Messages */
+        .alert {
+            padding: 10px;
+            border-radius: 4px;
+            margin-bottom: 15px;
+            font-size: 12px;
+            display: none;
+        }
+        .alert.active { display: block; }
+        .alert-error { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
+        .alert-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
+
+        /* Search Input */
+        .search-input {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid var(--sc-border);
+            border-radius: 4px;
+            font-size: 13px;
+        }
+        .search-input:focus {
+            outline: none;
+            border-color: var(--sc-primary);
+            box-shadow: 0 0 0 2px rgba(42, 171, 149, 0.1);
+        }
+
+        /* Attribute Table */
+        .table-wrapper {
+            overflow-x: auto;
+            border: 1px solid #eee;
+            border-radius: 4px;
+        }
+        .attribute-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 12px;
+        }
+        .attribute-table th {
+            background: #f8f9fa;
+            text-align: left;
+            padding: 8px;
+            font-weight: 600;
+            color: var(--sc-text);
+            border-bottom: 2px solid #eee;
+        }
+        .attribute-table td {
+            padding: 8px;
+            border-bottom: 1px solid #eee;
+            color: var(--sc-text);
+        }
+
+        /* Scrollbar Styling */
+        ::-webkit-scrollbar { width: 6px; height: 6px; }
+        ::-webkit-scrollbar-track { background: #f1f1f1; }
+        ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: #bbb; }
+    </style>
+</head>
+<body>
+    <script>
+        if (sessionStorage.getItem('authenticated') !== 'true') {
+            window.location.href = '../login.html';
+        }
+    </script>
+    
+    <header>
+        <button class="back-btn" onclick="window.location.href='../';" title="Back to main tools">← Back</button>
+        <h1>📍 GeoJSON Viewer</h1>
+        <div class="header-controls">
+            <label class="map-toggle-wrapper" style="cursor: pointer;">
+                <input type="checkbox" id="mapToggle">
+                <span>🛰️ Satellite</span>
+            </label>
+            <label class="map-toggle-wrapper" style="cursor: pointer;">
+                <input type="checkbox" id="labelsToggle">
+                <span>Labels</span>
+            </label>
+        </div>
+    </header>
+
+    <div class="container">
+        <div id="map"></div>
+
+        <div class="panel">
+            <div class="panel-header">Controls & Data</div>
+            
+            <div class="panel-content">
+                <div class="alert alert-error" id="errorMessage"></div>
+                <div class="alert alert-success" id="successMessage"></div>
+
+                <div class="panel-section">
+                    <div class="section-title">📁 Upload File</div>
+                    <div class="file-input-wrapper">
+                        <label for="geojsonFile" class="file-input-label">
+                            Choose GeoJSON File
+                        </label>
+                        <input type="file" id="geojsonFile" accept=".geojson,.json" />
+                        <div class="file-name" id="fileName">No file selected</div>
+                    </div>
+                    <div class="btn-group">
+                        <button id="clearBtn" class="btn-secondary">Clear</button>
+                        <button id="downloadBtn" class="btn-primary" style="display: none;">Download</button>
+                    </div>
+                </div>
+
+                <div class="panel-section" id="summarySection" style="display: none;">
+                    <div class="section-title">📊 Project Summary</div>
+                    <div class="stat-item">
+                        <span class="stat-label">Client:</span>
+                        <span class="stat-value" id="clientName">-</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">Fields:</span>
+                        <span class="stat-value" id="totalFields">0</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">Area (ha):</span>
+                        <span class="stat-value" id="totalHectares">0</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">Area (ac):</span>
+                        <span class="stat-value" id="totalAcres">0</span>
+                    </div>
+                </div>
+
+                <div class="panel-section" id="statsSection" style="display: none;">
+                    <div class="section-title">ℹ️ Data Stats</div>
+                    <div class="stat-item">
+                        <span class="stat-label">Features:</span>
+                        <span class="stat-value" id="featureCount">0</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">Type:</span>
+                        <span class="stat-value" id="geomType">-</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">Bounds:</span>
+                        <span class="stat-value" id="bounds">-</span>
+                    </div>
+                </div>
+
+                <div class="panel-section" id="featuresSection" style="display: none;">
+                    <div class="section-title">🗺️ Features</div>
+                    <div style="margin-bottom: 10px;">
+                        <input 
+                            type="text" 
+                            id="featureSearch" 
+                            class="search-input"
+                            placeholder="Search by code..." 
+                        />
+                    </div>
+                    <div class="features-list" id="featuresList"></div>
+                </div>
+
+                <div class="panel-section" id="propertiesSection" style="display: none;">
+                    <div class="section-title">📋 Selected Properties</div>
+                    <div id="propertiesContent" style="font-size: 13px; color: #666;">
+                        Select a feature to view details
+                    </div>
+                </div>
+
+                <div class="panel-section" id="tableSection" style="display: none;">
+                    <div class="section-title">📋 Data Table</div>
+                    <div class="table-wrapper">
+                        <table class="attribute-table" id="attributeTable">
+                            <thead><tr id="tableHeader"></tr></thead>
+                            <tbody id="tableBody"></tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal" id="featureModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 id="modalTitle">Feature Details</h2>
+                <button class="close-btn" onclick="closeFeatureModal()">&times;</button>
+            </div>
+            <div class="modal-body" id="modalBody">
+                </div>
+            <div style="padding: 15px; border-top: 1px solid #eee; text-align: right;">
+                <button class="btn-secondary" onclick="closeFeatureModal()">Close</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/webapps/geojson_viewer.html b/webapps/geojson_viewer/script.js
similarity index 54%
rename from webapps/geojson_viewer.html
rename to webapps/geojson_viewer/script.js
index 8b766d6..858573f 100644
--- a/webapps/geojson_viewer.html
+++ b/webapps/geojson_viewer/script.js
@@ -1,841 +1,20 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GeoJSON Viewer</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
-    <link rel="stylesheet" href="theme.css">
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            padding: 20px;
-        }
-
-        .container {
-            max-width: 1400px;
-            margin: 0 auto;
-            background: white;
-            border-radius: 12px;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-            overflow: hidden;
-        }
-
-        .header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            padding: 30px;
-            text-align: center;
-        }
-
-        .header h1 {
-            font-size: 2.5em;
-            margin-bottom: 10px;
-        }
-
-        .header p {
-            font-size: 1.1em;
-            opacity: 0.9;
-        }
-
-        .map-controls {
-            position: absolute;
-            top: 20px;
-            right: 20px;
-            z-index: 400;
-            background: white;
-            padding: 12px;
-            border-radius: 8px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            gap: 12px;
-        }
-
-        .map-controls label {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            cursor: pointer;
-            font-size: 0.9em;
-            color: #333;
-            font-weight: 500;
-        }
-
-        .map-controls-group {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            border-top: 1px solid #e0e0e0;
-            padding-top: 8px;
-        }
-
-        .map-controls-group:first-child {
-            border-top: none;
-            padding-top: 0;
-        }
-
-        .toggle-switch {
-            position: relative;
-            display: inline-block;
-            width: 50px;
-            height: 24px;
-        }
-
-        .toggle-switch input {
-            opacity: 0;
-            width: 0;
-            height: 0;
-        }
-
-        .toggle-slider {
-            position: absolute;
-            cursor: pointer;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: #ccc;
-            transition: 0.3s;
-            border-radius: 24px;
-        }
-
-        .toggle-slider:before {
-            position: absolute;
-            content: "";
-            height: 18px;
-            width: 18px;
-            left: 3px;
-            bottom: 3px;
-            background-color: white;
-            transition: 0.3s;
-            border-radius: 50%;
-        }
-
-        input:checked + .toggle-slider {
-            background-color: #667eea;
-        }
-
-        input:checked + .toggle-slider:before {
-            transform: translateX(26px);
-        }
-
-        .toggle-label {
-            font-size: 0.85em;
-            color: #666;
-            min-width: 60px;
-            text-align: right;
-        }
-
-        .content {
-            display: flex;
-            height: calc(100vh - 200px);
-            gap: 0;
-        }
-
-        .sidebar {
-            width: 350px;
-            background: #f8f9fa;
-            border-right: 1px solid #e0e0e0;
-            padding: 25px;
-            overflow-y: auto;
-        }
-
-        .map-container {
-            flex: 1;
-            position: relative;
-            background: #e0e0e0;
-        }
-
-        #map {
-            width: 100%;
-            height: 100%;
-        }
-
-        .upload-section {
-            margin-bottom: 30px;
-        }
-
-        .upload-section h2 {
-            font-size: 1.2em;
-            color: #333;
-            margin-bottom: 15px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .file-input-wrapper {
-            position: relative;
-            display: block;
-        }
-
-        .file-input-label {
-            display: block;
-            padding: 15px 20px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            border-radius: 8px;
-            cursor: pointer;
-            text-align: center;
-            font-weight: 600;
-            transition: transform 0.2s, box-shadow 0.2s;
-            border: 2px dashed transparent;
-        }
-
-        .file-input-label:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
-        }
-
-        input[type="file"] {
-            display: none;
-        }
-
-        .file-name {
-            margin-top: 10px;
-            padding: 10px;
-            background: #e3f2fd;
-            border-left: 4px solid #2196f3;
-            border-radius: 4px;
-            font-size: 0.9em;
-            color: #1565c0;
-            display: none;
-        }
-
-        .file-name.active {
-            display: block;
-        }
-
-        .stats-section {
-            margin-bottom: 30px;
-            padding: 15px;
-            background: white;
-            border-radius: 8px;
-            border-left: 4px solid #667eea;
-        }
-
-        .stat-item {
-            display: flex;
-            justify-content: space-between;
-            padding: 8px 0;
-            border-bottom: 1px solid #f0f0f0;
-            font-size: 0.95em;
-        }
-
-        .stat-item:last-child {
-            border-bottom: none;
-        }
-
-        .stat-label {
-            color: #666;
-            font-weight: 500;
-        }
-
-        .stat-value {
-            color: #333;
-            font-weight: 600;
-        }
-
-        .features-section h2 {
-            font-size: 1.2em;
-            color: #333;
-            margin-bottom: 15px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .features-list {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            max-height: 400px;
-            overflow-y: auto;
-        }
-
-        .feature-item {
-            padding: 10px;
-            background: white;
-            border: 1px solid #e0e0e0;
-            border-radius: 6px;
-            cursor: pointer;
-            transition: all 0.2s;
-            font-size: 0.9em;
-            color: #333;
-        }
-
-        .feature-item:hover {
-            background: #f0f0f0;
-            border-color: #667eea;
-            transform: translateX(4px);
-        }
-
-        .feature-item.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            border-color: transparent;
-        }
-
-        .properties-section {
-            margin-top: 20px;
-            padding: 15px;
-            background: white;
-            border-radius: 8px;
-            border-left: 4px solid #667eea;
-            display: none;
-        }
-
-        .properties-section.active {
-            display: block;
-        }
-
-        .properties-section h3 {
-            font-size: 1em;
-            color: #333;
-            margin-bottom: 12px;
-        }
-
-        .property-row {
-            display: flex;
-            flex-direction: column;
-            padding: 8px 0;
-            border-bottom: 1px solid #f0f0f0;
-            font-size: 0.85em;
-        }
-
-        .property-row:last-child {
-            border-bottom: none;
-        }
-
-        .property-key {
-            color: #666;
-            font-weight: 600;
-            margin-bottom: 4px;
-        }
-
-        .property-value {
-            color: #333;
-            word-break: break-word;
-            background: #f5f5f5;
-            padding: 6px;
-            border-radius: 4px;
-            font-family: 'Courier New', monospace;
-            font-size: 0.8em;
-        }
-
-        .no-data {
-            text-align: center;
-            color: #999;
-            padding: 20px;
-            font-size: 0.95em;
-        }
-
-        .controls-section {
-            margin-bottom: 20px;
-            display: flex;
-            gap: 8px;
-        }
-
-        button {
-            flex: 1;
-            padding: 10px;
-            background: #f0f0f0;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 0.9em;
-            color: #333;
-            transition: all 0.2s;
-        }
-
-        button:hover {
-            background: #e0e0e0;
-            border-color: #999;
-        }
-
-        button.danger {
-            background: #ffebee;
-            color: #c62828;
-            border-color: #ef5350;
-        }
-
-        button.danger:hover {
-            background: #ffcdd2;
-        }
-
-        .spinner {
-            display: inline-block;
-            width: 16px;
-            height: 16px;
-            border: 3px solid #f3f3f3;
-            border-top: 3px solid #667eea;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-
-        .tooltip {
-            background: rgba(0, 0, 0, 0.8);
-            color: white;
-            padding: 8px 12px;
-            border-radius: 4px;
-            font-size: 0.85em;
-            white-space: nowrap;
-            z-index: 1000;
-        }
-
-        @media (max-width: 1024px) {
-            .content {
-                flex-direction: column;
-                height: auto;
-            }
-
-            .sidebar {
-                width: 100%;
-                border-right: none;
-                border-bottom: 1px solid #e0e0e0;
-                max-height: 300px;
-            }
-
-            #map {
-                height: 500px;
-            }
-        }
-
-        .error-message {
-            padding: 12px;
-            background: #ffebee;
-            color: #c62828;
-            border: 1px solid #ef5350;
-            border-radius: 6px;
-            margin-bottom: 15px;
-            display: none;
-            font-size: 0.9em;
-        }
-
-        .error-message.active {
-            display: block;
-        }
-
-        .success-message {
-            padding: 12px;
-            background: #e8f5e9;
-            color: #2e7d32;
-            border: 1px solid #66bb6a;
-            border-radius: 6px;
-            margin-bottom: 15px;
-            display: none;
-            font-size: 0.9em;
-        }
-
-        .success-message.active {
-            display: block;
-        }
-
-        /* Modal Popup Styles */
-        .modal {
-            display: none;
-            position: fixed;
-            z-index: 1000;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.5);
-            animation: fadeIn 0.3s ease;
-        }
-
-        .modal.active {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-
-        .modal-content {
-            background: white;
-            border-radius: 12px;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-            max-width: 500px;
-            width: 90%;
-            max-height: 80vh;
-            overflow-y: auto;
-            animation: slideUp 0.3s ease;
-        }
-
-        @keyframes slideUp {
-            from {
-                transform: translateY(50px);
-                opacity: 0;
-            }
-            to {
-                transform: translateY(0);
-                opacity: 1;
-            }
-        }
-
-        .modal-header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            padding: 20px;
-            border-radius: 12px 12px 0 0;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .modal-header h2 {
-            margin: 0;
-            font-size: 1.5em;
-        }
-
-        .modal-close {
-            background: rgba(255, 255, 255, 0.2);
-            border: none;
-            color: white;
-            font-size: 24px;
-            cursor: pointer;
-            padding: 0;
-            width: 30px;
-            height: 30px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: background 0.2s;
-        }
-
-        .modal-close:hover {
-            background: rgba(255, 255, 255, 0.3);
-        }
-
-        .modal-body {
-            padding: 25px;
-        }
-
-        .modal-property {
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 20px;
-            padding-bottom: 20px;
-            border-bottom: 1px solid #e0e0e0;
-        }
-
-        .modal-property:last-child {
-            border-bottom: none;
-            margin-bottom: 0;
-            padding-bottom: 0;
-        }
-
-        .modal-property-key {
-            font-weight: 700;
-            color: #333;
-            font-size: 0.95em;
-            margin-bottom: 8px;
-            color: #667eea;
-        }
-
-        .modal-property-value {
-            color: #555;
-            font-size: 0.95em;
-            line-height: 1.5;
-            word-break: break-word;
-            background: #f8f9fa;
-            padding: 12px;
-            border-radius: 6px;
-            font-family: 'Courier New', monospace;
-            font-size: 0.9em;
-        }
-
-        .modal-empty {
-            text-align: center;
-            color: #999;
-            padding: 40px 20px;
-        }
-
-        .summary-section {
-            margin-bottom: 25px;
-            padding: 20px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-radius: 8px;
-            color: white;
-        }
-
-        .summary-section h2 {
-            font-size: 1.1em;
-            margin-bottom: 15px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .summary-stat {
-            display: flex;
-            justify-content: space-between;
-            padding: 8px 0;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-            font-size: 0.95em;
-        }
-
-        .summary-stat:last-child {
-            border-bottom: none;
-        }
-
-        .summary-label {
-            font-weight: 500;
-            opacity: 0.9;
-        }
-
-        .summary-value {
-            font-weight: 600;
-            text-align: right;
-        }
-
-        .table-section {
-            margin-bottom: 20px;
-        }
-
-        .table-section h3 {
-            font-size: 1.1em;
-            color: #333;
-            margin-bottom: 12px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .attribute-table {
-            width: 100%;
-            border-collapse: collapse;
-            background: white;
-            border: 1px solid #e0e0e0;
-            border-radius: 6px;
-            overflow: hidden;
-            font-size: 0.85em;
-        }
-
-        .attribute-table thead {
-            background: #f5f5f5;
-            border-bottom: 2px solid #ddd;
-        }
-
-        .attribute-table th {
-            padding: 10px;
-            text-align: left;
-            font-weight: 600;
-            color: #333;
-            border-right: 1px solid #e0e0e0;
-        }
-
-        .attribute-table th:last-child {
-            border-right: none;
-        }
-
-        .attribute-table td {
-            padding: 10px;
-            border-right: 1px solid #e0e0e0;
-            border-bottom: 1px solid #f0f0f0;
-            color: #555;
-            word-break: break-word;
-        }
-
-        .attribute-table td:last-child {
-            border-right: none;
-        }
-
-        .attribute-table tbody tr:hover {
-            background: #f9f9f9;
-        }
-
-        .attribute-table tbody tr:last-child td {
-            border-bottom: none;
-        }
-
-        .table-wrapper {
-            overflow-x: auto;
-            max-height: 400px;
-            overflow-y: auto;
-            border: 1px solid #e0e0e0;
-            border-radius: 6px;
-        }
-
-        @media (max-width: 1024px) {
-            .attribute-table {
-                font-size: 0.75em;
-            }
-
-            .attribute-table th,
-            .attribute-table td {
-                padding: 6px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <h1>📍 GeoJSON Viewer</h1>
-            <p>Upload a GeoJSON file to visualize features on an interactive map</p>
-        </div>
-
-        <div class="content">
-            <div class="sidebar">
-                <div class="error-message" id="errorMessage"></div>
-                <div class="success-message" id="successMessage"></div>
-
-                <div class="summary-section" id="summarySection" style="display: none;">
-                    <h2>📊 Project Summary</h2>
-                    <div class="summary-stat">
-                        <span class="summary-label">Client/Project:</span>
-                        <span class="summary-value" id="clientName">-</span>
-                    </div>
-                    <div class="summary-stat">
-                        <span class="summary-label">Total Fields:</span>
-                        <span class="summary-value" id="totalFields">0</span>
-                    </div>
-                    <div class="summary-stat">
-                        <span class="summary-label">Total Area (ha):</span>
-                        <span class="summary-value" id="totalHectares">0</span>
-                    </div>
-                    <div class="summary-stat">
-                        <span class="summary-label">Total Area (acres):</span>
-                        <span class="summary-value" id="totalAcres">0</span>
-                    </div>
-                </div>
-
-                <div class="upload-section">
-                    <h2>📁 Upload File</h2>
-                    <div class="file-input-wrapper">
-                        <label for="geojsonFile" class="file-input-label">
-                            Choose GeoJSON File
-                        </label>
-                        <input type="file" id="geojsonFile" accept=".geojson,.json" />
-                        <div class="file-name" id="fileName"></div>
-                    </div>
-                </div>
-
-                <div class="controls-section">
-                    <button id="clearBtn" title="Clear all data">Clear All</button>
-                    <button id="downloadBtn" title="Download current GeoJSON" style="display: none;">Download</button>
-                </div>
-
-                <div class="stats-section" id="statsSection" style="display: none;">
-                    <div class="stat-item">
-                        <span class="stat-label">Features:</span>
-                        <span class="stat-value" id="featureCount">0</span>
-                    </div>
-                    <div class="stat-item">
-                        <span class="stat-label">Type:</span>
-                        <span class="stat-value" id="geomType">-</span>
-                    </div>
-                    <div class="stat-item">
-                        <span class="stat-label">Bounds:</span>
-                        <span class="stat-value" id="bounds">-</span>
-                    </div>
-                </div>
-
-                <div class="table-section" id="tableSection" style="display: none;">
-                    <h3>📋 Attribute Table</h3>
-                    <div class="table-wrapper">
-                        <table class="attribute-table" id="attributeTable">
-                            <thead>
-                                <tr id="tableHeader"></tr>
-                            </thead>
-                            <tbody id="tableBody"></tbody>
-                        </table>
-                    </div>
-                </div>
-
-                <div class="features-section" id="featuresSection" style="display: none;">
-                    <h2>🗺️ Features</h2>
-                    <div style="margin-bottom: 15px;">
-                        <input 
-                            type="text" 
-                            id="featureSearch" 
-                            placeholder="Search by field code..." 
-                            style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.9em; box-sizing: border-box;"
-                        />
-                    </div>
-                    <div class="features-list" id="featuresList"></div>
-                </div>
-
-                <div class="properties-section" id="propertiesSection">
-                    <h3>📋 Properties</h3>
-                    <div id="propertiesContent" class="no-data">Select a feature to view properties</div>
-                </div>
-            </div>
-
-            <div class="map-container">
-                <div id="map"></div>
-                <div class="map-controls">
-                    <div class="map-controls-group">
-                        <label for="mapToggle">
-                            <span class="toggle-label" id="mapTypeLabel">OSM</span>
-                            <div class="toggle-switch">
-                                <input type="checkbox" id="mapToggle">
-                                <span class="toggle-slider"></span>
-                            </div>
-                            <span>🛰️</span>
-                        </label>
-                    </div>
-                    <div class="map-controls-group">
-                        <label for="labelsToggle">
-                            <div class="toggle-switch">
-                                <input type="checkbox" id="labelsToggle">
-                                <span class="toggle-slider"></span>
-                            </div>
-                            <span>Show Labels</span>
-                        </label>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Feature Details Modal -->
-        <div class="modal" id="featureModal">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h2 id="modalTitle">Feature Details</h2>
-                    <button class="modal-close" onclick="closeFeatureModal()">&times;</button>
-                </div>
-                <div class="modal-body" id="modalBody"></div>
-            </div>
-        </div>
-    </div>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
-    <script>
         // Initialize map layers
         const osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             attribution: '© OpenStreetMap contributors',
-            maxZoom: 19
+            maxNativeZoom: 19,
+            maxZoom: 23
         });
 
         const satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
             attribution: '© Esri, DigitalGlobe, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community',
-            maxZoom: 18
+            maxNativeZoom: 18,
+            maxZoom: 23
         });
 
         // Initialize map
-        const map = L.map('map').setView([0, 0], 2);
+        const map = L.map('map', {
+            maxZoom: 23
+        }).setView([0, 0], 2);
         osmLayer.addTo(map);
 
         let currentLayer = 'osm';
@@ -1063,14 +242,6 @@
             }
         }
 
-        // Show message
-        function showMessage(message, type = 'error') {
-            const el = type === 'error' ? errorMessage : successMessage;
-            el.textContent = message;
-            el.classList.add('active');
-            setTimeout(() => el.classList.remove('active'), 5000);
-        }
-
         // Handle file upload
         geojsonInput.addEventListener('change', (e) => {
             const file = e.target.files[0];
@@ -1565,6 +736,3 @@
                 }
             });
         });
-    </script>
-</body>
-</html>
diff --git a/webapps/index.html b/webapps/index.html
index d972006..6b7e6d8 100644
--- a/webapps/index.html
+++ b/webapps/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SmartCane Web Apps</title>
     <link rel="stylesheet" href="theme.css">
+    <link rel="icon" type="image/x-icon" href="./res/main.png">
     <style>
         * {
             margin: 0;
@@ -29,6 +30,8 @@
             color: white;
             margin-bottom: 50px;
             padding-bottom: 30px;
+            border-radius: 12px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
         }
         
         .logo-section {
@@ -36,7 +39,7 @@
             align-items: center;
             justify-content: center;
             gap: 20px;
-            margin-bottom: 30px;
+            padding-top: 20px;
         }
         
         .logo {
@@ -165,7 +168,6 @@
 </head>
 <body>
     <script>
-        // Check authentication on page load
         if (sessionStorage.getItem('authenticated') !== 'true') {
             window.location.href = 'login.html';
         }
@@ -225,7 +227,7 @@
                         <li>View feature properties</li>
                         <li>Download exports</li>
                     </ul>
-                    <a href="./geojson_viewer.html" class="app-btn">Open Viewer</a>
+                    <a href="./geojson_viewer" class="app-btn">Open Viewer</a>
                 </div>
             </div>
 
@@ -247,7 +249,7 @@
         </div>
         
         <footer>
-            <p>SmartCane • Resilience BV • 2025</p>
+            <p>SmartCane • Resilience BV • <span id="year"></span></p>
         </footer>
     </div>
     
@@ -256,6 +258,7 @@
             sessionStorage.removeItem('authenticated');
             window.location.href = 'login.html';
         }
+        document.getElementById("year").textContent = new Date().getFullYear();
     </script>
 </body>
 </html>
diff --git a/webapps/polygon_analysis_editor/index.html b/webapps/polygon_analysis_editor/index.html
index 9cdaa71..1c858cc 100644
--- a/webapps/polygon_analysis_editor/index.html
+++ b/webapps/polygon_analysis_editor/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Polygon Analysis & Editor</title>
     <link rel="stylesheet" href="../theme.css">
+    <link rel="icon" type="image/x-icon" href="../res/poly.png">
     <style>
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -23,20 +24,6 @@
             align-items: center;
             gap: 20px;
         }
-        .back-btn {
-            background: rgba(255,255,255,0.2);
-            color: white;
-            border: 1px solid rgba(255,255,255,0.3);
-            padding: 8px 12px;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 14px;
-            transition: background 0.3s ease;
-            flex-shrink: 0;
-        }
-        .back-btn:hover {
-            background: rgba(255,255,255,0.3);
-        }
         header h1 {
             font-size: 24px;
             font-weight: 600;
diff --git a/webapps/res/check.png b/webapps/res/check.png
new file mode 100644
index 0000000..c03575b
Binary files /dev/null and b/webapps/res/check.png differ
diff --git a/webapps/res/main.png b/webapps/res/main.png
new file mode 100644
index 0000000..82e59b5
Binary files /dev/null and b/webapps/res/main.png differ
diff --git a/webapps/res/map.png b/webapps/res/map.png
new file mode 100644
index 0000000..a125b92
Binary files /dev/null and b/webapps/res/map.png differ
diff --git a/webapps/res/pin.png b/webapps/res/pin.png
new file mode 100644
index 0000000..31918f8
Binary files /dev/null and b/webapps/res/pin.png differ
diff --git a/webapps/res/poly.png b/webapps/res/poly.png
new file mode 100644
index 0000000..f55f689
Binary files /dev/null and b/webapps/res/poly.png differ
diff --git a/webapps/sugar_mill_locator/index.html b/webapps/sugar_mill_locator/index.html
index 4f9c168..c27a2fc 100644
--- a/webapps/sugar_mill_locator/index.html
+++ b/webapps/sugar_mill_locator/index.html
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" />
     <link rel="stylesheet" href="https://unpkg.com/leaflet-measure@3.1.0/dist/leaflet-measure.css" />
     <link rel="stylesheet" href="../theme.css">
+    <link rel="icon" type="image/x-icon" href="../res/map.png">
     <style>
         * {
             margin: 0;
@@ -40,21 +41,6 @@
             text-align: center;
         }
         
-        .back-btn {
-            background: rgba(255,255,255,0.2);
-            color: white;
-            border: 1px solid rgba(255,255,255,0.3);
-            padding: 8px 12px;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 14px;
-            transition: background 0.3s ease;
-        }
-        
-        .back-btn:hover {
-            background: rgba(255,255,255,0.3);
-        }
-        
         .header-controls {
             display: flex;
             gap: 10px;
diff --git a/webapps/theme.css b/webapps/theme.css
index 60f78e4..9bd279b 100644
--- a/webapps/theme.css
+++ b/webapps/theme.css
@@ -26,7 +26,11 @@
 /* Apply to body gradients */
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background: linear-gradient(135deg, var(--sc-primary) 0%, var(--sc-primary-light) 100%);
+    background: linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--sc-primary), transparent 10%) 0%,
+        color-mix(in srgb, var(--sc-primary-light), transparent 10%) 100%
+    );
     color: var(--sc-text);
 }
 
@@ -56,6 +60,24 @@ header {
     background: var(--sc-accent-light);
 }
 
+.back-btn {
+    background: rgba(255,255,255,0.2);
+    color: white;
+    border: 1px solid rgba(255,255,255,0.3);
+    padding: 8px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background 0.3s ease;
+    flex-shrink: 0;
+    margin-top: 0;
+    flex: None;
+}
+        
+.back-btn:hover {
+    background: rgba(255,255,255,0.3);
+}
+
 /* Mode buttons */
 .mode-btn {
     background: rgba(255, 255, 255, 0.1);
