diff --git a/dashboard/README.md b/dashboard/README.md
index 8062f56..8723aa5 100644
--- a/dashboard/README.md
+++ b/dashboard/README.md
@@ -19,6 +19,7 @@ npm install axios  # for API connection
 npm install react-router-dom  # for organizing the router
 npm install dotenv  # for setting environment variables
 npm install react-icons
+npm install react-zoom-pan-pinch
 
 # Start dev server, ensuring the API url is added as environment variable
 VITE_API_BASE_URL="http://<name-of-server>:<port-of-server>" npm run dev
diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
index d5cbc58..a27a1e3 100644
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
@@ -8,12 +8,19 @@
       "name": "portal",
       "version": "0.0.0",
       "dependencies": {
+        "@xterm/addon-fit": "^0.10.0",
+        "@xterm/xterm": "^5.5.0",
         "axios": "^1.7.9",
         "dotenv": "^16.4.7",
+        "leaflet": "^1.9.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-icons": "^5.4.0",
+        "react-leaflet": "^4.2.1",
         "react-router-dom": "^7.1.1",
+        "react-xtermjs": "^1.0.9",
+        "react-zoom-pan-pinch": "^3.6.1",
+        "shpjs": "^6.1.0",
         "webpack-dev-server": "^5.2.0"
       },
       "devDependencies": {
@@ -1092,6 +1099,17 @@
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
       "license": "MIT"
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
+      "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.30.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.30.1.tgz",
@@ -1896,6 +1914,21 @@
         }
       }
     },
+    "node_modules/@xterm/addon-fit": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz",
+      "integrity": "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@xterm/xterm": "^5.0.0"
+      }
+    },
+    "node_modules/@xterm/xterm": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
+      "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
+      "license": "MIT"
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -2400,6 +2433,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/but-unzip": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/but-unzip/-/but-unzip-0.1.4.tgz",
+      "integrity": "sha512-Q5/55MTk0PHjxtYyZBbhIVMJP0+FNc/AOKBrrnqaxnbJR4I7w+R4CMRNYMxUQrKmCLrih7D1p4/nwZHMn7IToA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/bytes": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -4996,6 +5035,12 @@
         "shell-quote": "^1.8.1"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -5129,6 +5174,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mgrs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz",
+      "integrity": "sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA==",
+      "license": "MIT"
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -5540,6 +5591,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/parsedbf": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parsedbf/-/parsedbf-2.0.0.tgz",
+      "integrity": "sha512-WNjKn/cwgGBkXqQLif+2VMEahcRHkBRU0/RfBWZ7Vj7snRNNW63yW1mVuuHRDyXTRxuGCzAHHBcr/Fn+U/bXjQ==",
+      "license": "MIT"
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -5724,6 +5781,16 @@
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "license": "MIT"
     },
+    "node_modules/proj4": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.15.0.tgz",
+      "integrity": "sha512-LqCNEcPdI03BrCHxPLj29vsd5afsm+0sV1H/O3nTDKrv8/LA01ea1z4QADDMjUqxSXWnrmmQDjqFm1J/uZ5RLw==",
+      "license": "MIT",
+      "dependencies": {
+        "mgrs": "1.0.0",
+        "wkt-parser": "^1.4.0"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -5865,6 +5932,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-leaflet": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
+      "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^2.1.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -5915,6 +5996,29 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/react-xtermjs": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/react-xtermjs/-/react-xtermjs-1.0.9.tgz",
+      "integrity": "sha512-lrK1xiWfgxAC+4shtMHh0Irxg2t5t7JbTtpP0W7GIf1gQ9SHW/djmyiLpQSA75mN1DpT0bKeqj1fOKd0XX8RBA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "@xterm/xterm": "^5.5.0"
+      }
+    },
+    "node_modules/react-zoom-pan-pinch": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.6.1.tgz",
+      "integrity": "sha512-SdPqdk7QDSV7u/WulkFOi+cnza8rEZ0XX4ZpeH7vx3UZEg7DoyuAy3MCmm+BWv/idPQL2Oe73VoC0EhfCN+sZQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -6578,6 +6682,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/shpjs": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/shpjs/-/shpjs-6.1.0.tgz",
+      "integrity": "sha512-uaUpod7uIWetJK80yiiedZ3x4z9ZAPgDVT89N27+8F97Z8ZOqmu88P96I6CBC8N+YyERqdneZNT/wNFUEnzNpw==",
+      "license": "MIT",
+      "dependencies": {
+        "but-unzip": "^0.1.4",
+        "parsedbf": "^2.0.0",
+        "proj4": "^2.1.4"
+      }
+    },
     "node_modules/side-channel": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
@@ -7713,6 +7828,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/wkt-parser": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.4.0.tgz",
+      "integrity": "sha512-qpwO7Ihds/YYDTi1aADFTI1Sm9YC/tTe3SHD24EeIlZxy7Ik6a1b4HOz7jAi0xdUAw487duqpo8OGu+Tf4nwlQ==",
+      "license": "MIT"
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
diff --git a/dashboard/package.json b/dashboard/package.json
index 1452f91..5c70f24 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -11,12 +11,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
     "axios": "^1.7.9",
     "dotenv": "^16.4.7",
+    "leaflet": "^1.9.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",
+    "react-leaflet": "^4.2.1",
     "react-router-dom": "^7.1.1",
+    "react-xtermjs": "^1.0.9",
+    "react-zoom-pan-pinch": "^3.6.1",
+    "shpjs": "^6.1.0",
     "webpack-dev-server": "^5.2.0"
   },
   "devDependencies": {
diff --git a/dashboard/src/App.css b/dashboard/src/App.css
index 0b1003d..fac0065 100644
--- a/dashboard/src/App.css
+++ b/dashboard/src/App.css
@@ -15,6 +15,24 @@
   overflow-y: auto; /* scrollable with overflowing content */
   padding: 1rem; /* Optional: Add some padding */
 }
+.btn {
+  background-color: #0a4777;
+  border-color: #0a4777;
+  color: #fff;
+  marginBottom: 10px;
+}
+/* Close Button for menus and widgets */
+.close-button {
+    align-self: flex-end;
+    font-size: 24px;
+    font-weight: bold;
+    color: white;
+    background: none;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 20px;
+}
+
 
 
 .logo {
diff --git a/dashboard/src/App.jsx b/dashboard/src/App.jsx
index be8e427..45962e8 100644
--- a/dashboard/src/App.jsx
+++ b/dashboard/src/App.jsx
@@ -10,6 +10,7 @@ import Device from './views/device';
 import DiskManagement from './views/diskManagement'
 import WaterLevel from './views/waterLevel'
 import CameraAim from './views/cameraAim'
+import Calibration from './views/calibration'
 import api from './api'
 
 const App = () => {
@@ -27,6 +28,8 @@ const App = () => {
                     <Route path="/disk_management" element={<DiskManagement />} />
                     <Route path="/water_level" element={<WaterLevel />} />
                     <Route path="/camera_aim" element={<CameraAim />} />
+                    <Route path="/calibration" element={<Calibration />} />
+
                 </Routes>
                 </div>
                 <Footer />
diff --git a/dashboard/src/nav/Footer.css b/dashboard/src/nav/Footer.css
index cb1c3e4..393c8f9 100644
--- a/dashboard/src/nav/Footer.css
+++ b/dashboard/src/nav/Footer.css
@@ -1,5 +1,5 @@
 .footer {
-  background-color: #2c3e50; /* Consistent color */
+  background-color: #0a4777; /* Consistent color */
   color: white;
   text-align: center;
   padding: 1rem;
diff --git a/dashboard/src/nav/Footer.jsx b/dashboard/src/nav/Footer.jsx
index fd7716a..d3a02ec 100644
--- a/dashboard/src/nav/Footer.jsx
+++ b/dashboard/src/nav/Footer.jsx
@@ -2,7 +2,7 @@ import './Footer.css'
 
 const Footer = () => {
     return (
-      <footer className="footer bg-primary">
+      <footer className="footer">
         <div className="footer-content">
           <img src="./public/orc_favicon.svg" alt="ORC Logo" width="20" className="footer-logo"/>
             {' '}
diff --git a/dashboard/src/nav/Navbar.css b/dashboard/src/nav/Navbar.css
index 259ac60..2b70d3d 100644
--- a/dashboard/src/nav/Navbar.css
+++ b/dashboard/src/nav/Navbar.css
@@ -1,60 +1,4 @@
-.navbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 20px;
-  background-color: #007bff;
-  color: white;
-}
 
-.navbar-toggler {
-    cursor: pointer;
-    border: none;
-    background: none;
-    color: white;
-}
-
-.navbar-logo {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.navbar-logo img {
-  width: 40px;
-  height: 40px;
-}
-
-.navbar-toggle {
-  display: none; /* Hidden by default */
-  background: none;
-  border: none;
-  color: white;
-  font-size: 1.5rem;
-  cursor: pointer;
-}
-
-/* Default Full-Width Navbar */
-.navbar-collapse {
-  display: flex;
-}
-
-.navbar-collapse ul {
-  list-style: none;
-  display: flex;
-  margin: 0;
-  padding: 0;
-}
-
-.navbar-collapse a {
-  color: white;
-  text-decoration: none;
-  font-weight: bold;
-}
-
-.navbar-collapse a:hover {
-  color: lightgray;
-}
 
 /* Navbar Styles */
 .navbar {
@@ -62,17 +6,34 @@
     justify-content: space-between;
     align-items: center;
     padding: 10px 20px;
-    background-color: #007bff;
+    background-color: #0a4777;
     color: white;
+    height: 70px;
 }
 
 .navbar-toggler {
+    position: relative;
     cursor: pointer;
+    z-index: 1;
     border: none;
     background: none;
     color: white;
 }
 
+.navbar-toggler:hover::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 50px; /* Adjust the size of the circle */
+    height: 50px; /* Same as width for a circular shape */
+    background-color: rgba(255, 255, 255, 0.1); /* Light-colored translucent circle */
+    border-radius: 50%; /* Makes it a perfect circle */
+    z-index: -1; /* Ensures the circle is behind the icon */
+}
+
+
 .navbar-brand {
     display: flex;
     align-items: center;
@@ -145,16 +106,11 @@
     background-color: #007bff;
 }
 
-/* Sidebar Close Button */
-.close-sidebar {
-    align-self: flex-end;
-    font-size: 24px;
-    font-weight: bold;
-    color: white;
-    background: none;
-    border: none;
-    cursor: pointer;
-    margin-bottom: 20px;
+.sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between; /* Ensures space between the button and brand */
+    padding: 0.5rem 1rem;
 }
 
 /* Overlay for the Sidebar */
diff --git a/dashboard/src/nav/Navbar.jsx b/dashboard/src/nav/Navbar.jsx
index dff95c3..1205554 100644
--- a/dashboard/src/nav/Navbar.jsx
+++ b/dashboard/src/nav/Navbar.jsx
@@ -18,15 +18,11 @@ const Navbar = () => {
 
     return (
         <>
-            <nav className='navbar navbar-dark bg-primary'>
+            <nav className='navbar navbar-dark'>
                 <div className='container-fluid'>
                     <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" onClick={handleToggle}>
                         <span className="navbar-toggler-icon"></span>
                     </button>
-                    <a className='navbar-brand' href="#">
-                        <img src="./public/orc_favicon.svg" alt="ORC Logo" width="30" height="30" className="d-inline-block align-text-top"/>
-                    {' '} NodeORC
-                    </a>
                     <div className="navbar-right">
                         <FaWifi className="wifi-button" onClick={handleWiFiButtonClick}
                         />
@@ -35,11 +31,17 @@ const Navbar = () => {
                 </div>
             </nav>
             <div className={`sidebar ${isOpen ? 'open' : ''}`}>
-                <button className="close-sidebar" onClick={handleToggle}>
-                    &times;
-                </button>
-
+                <div className="sidebar-header">
+                    <a className='navbar-brand' href="#">
+                        <img src="./public/orc_favicon.svg" alt="ORC Logo" width="30" height="30" className="d-inline-block align-text-top"/>
+                    {' '} NodeORC
+                    </a>
+                    <button className="close-button" onClick={handleToggle}>
+                        &times;
+                    </button>
+                </div>
                 <ul className="sidebar-nav">
+                    <hr/>
                     <li>
                         <NavLink
                             className={({ isActive }) => isActive ? "sidebar-link active" : "sidebar-link"}
@@ -75,6 +77,8 @@ const Navbar = () => {
                             Aim your camera in the field
                         </NavLink>
                     </li>
+                    <hr/>
+
                 </ul>
             </div>
             {isOpen && <div className="sidebar-overlay" onClick={handleToggle}></div>}
diff --git a/dashboard/src/views/calibration.css b/dashboard/src/views/calibration.css
new file mode 100644
index 0000000..add57fa
--- /dev/null
+++ b/dashboard/src/views/calibration.css
@@ -0,0 +1,46 @@
+.tabbed-form-container {
+  margin: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.tabbed-layout {
+  display: flex;
+  border: 1px solid #ccc;
+}
+
+.tabs-column {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  background-color: #f9f9f9;
+  border-right: 1px solid #ccc;
+}
+
+.tabs-column button {
+  padding: 15px 10px;
+  text-align: left;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  border-bottom: 1px solid #ccc;
+  font-size: 16px;
+}
+
+.tabs-column button.active-tab {
+  background-color: #007bff;
+  color: white;
+  font-weight: bold;
+}
+
+.tab-content {
+  flex: 1;
+  padding: 20px;
+}
+.img-calibration {
+  width: 100%;
+  height: auto;
+  cursor: crosshair;
+  pointer-events: auto !important;
+}
diff --git a/dashboard/src/views/calibration.jsx b/dashboard/src/views/calibration.jsx
new file mode 100644
index 0000000..58e5ee8
--- /dev/null
+++ b/dashboard/src/views/calibration.jsx
@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import ControlPointsTab from './calibrationTabs/controlPointsTab'
+import './calibration.css'; // Ensure the styles reflect the updated layout.
+
+const Calibration = () => {
+  const [activeTab, setActiveTab] = useState('video');
+  const [formData, setFormData] = useState({
+    video: '',
+    controlPoints: '',
+    recipe: '',
+  });
+
+  const handleTabChange = (tab) => {
+    setActiveTab(tab);
+  };
+
+  const handleInputChange = (tab, value) => {
+    setFormData((prev) => ({
+      ...prev,
+      [tab]: value,
+    }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log('Form submitted:', formData);
+    alert('Form submitted successfully!');
+  };
+
+  return (
+    <div className="tabbed-form-container">
+      {/* Form container */}
+      <form onSubmit={handleSubmit} className="tabbed-layout">
+        {/* Tabs column */}
+        <div className="tabs-column">
+          <button
+            className={activeTab === 'video' ? 'active-tab' : ''}
+            onClick={(e) => {
+              e.preventDefault();
+              handleTabChange('video');
+            }}
+          >
+            Video
+          </button>
+          <button
+            className={activeTab === 'controlPoints' ? 'active-tab' : ''}
+            onClick={(e) => {
+              e.preventDefault();
+              handleTabChange('controlPoints');
+            }}
+          >
+            Control Points
+          </button>
+          <button
+            className={activeTab === 'recipe' ? 'active-tab' : ''}
+            onClick={(e) => {
+              e.preventDefault();
+              handleTabChange('recipe');
+            }}
+          >
+            Recipe
+          </button>
+        </div>
+
+        {/* Tab content */}
+        <div className="tab-content">
+          {activeTab === 'video' && (
+            <div>
+              <label>Video URL</label>
+              <input
+                type="text"
+                value={formData.video}
+                onChange={(e) => handleInputChange('video', e.target.value)}
+              />
+            </div>
+          )}
+          {activeTab === 'controlPoints' && (
+              <ControlPointsTab
+              />
+          )}
+          {activeTab === 'recipe' && (
+            <div>
+              <label>Recipe Details</label>
+              <textarea
+                value={formData.recipe}
+                onChange={(e) =>
+                  handleInputChange('recipe', e.target.value)
+                }
+              ></textarea>
+            </div>
+          )}
+        </div>
+      </form>
+
+      {/* Submit button section */}
+      <div className="form-actions">
+        <button type="submit" className="btn" onClick={handleSubmit}>
+          Submit
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Calibration;
\ No newline at end of file
diff --git a/dashboard/src/views/calibrationTabs/XyzWidget.jsx b/dashboard/src/views/calibrationTabs/XyzWidget.jsx
new file mode 100644
index 0000000..0859d67
--- /dev/null
+++ b/dashboard/src/views/calibrationTabs/XyzWidget.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import './widget.css'
+
+const XYZWidget = ({ id, coordinates, onUpdate, onDelete }) => {
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    onUpdate(id, { ...coordinates, [name]: value });
+  };
+
+  const handleDelete = () => {
+    onDelete(id);
+  };
+
+  return (
+    <div className="widget">
+      <div style={{ display: 'flex', gap: '10px' }}>
+          <label>
+            X:
+            <input
+              type="number"
+              name="x"
+              value={coordinates.x || ''}
+              onChange={handleChange}
+            />
+          </label>
+          <label>
+            Y:
+            <input
+              type="number"
+              name="y"
+              value={coordinates.y || ''}
+              onChange={handleChange}
+            />
+          </label>
+          <label>
+            Z:
+            <input
+              type="number"
+              name="z"
+              value={coordinates.z || ''}
+              onChange={handleChange}
+            />
+          </label>
+      </div>
+      <div style={{ marginTop: '10px', display: 'flex', gap: '10px' }}>
+          <label>
+            row:
+            <input
+              type="number"
+              name="row"
+              step="1"
+              value={coordinates.row || ''}
+              onChange={handleChange}
+            />
+          </label>
+          <label>
+            column:
+            <input
+              type="number"
+              name="col"
+              step="1"
+              value={coordinates.col || ''}
+              onChange={handleChange}
+            />
+          </label>
+          <button className="close-button" onClick={handleDelete}>
+            &times;
+          </button>
+      </div>
+    </div>
+  );
+};
+
+export default XYZWidget;
diff --git a/dashboard/src/views/calibrationTabs/controlPointsTab.jsx b/dashboard/src/views/calibrationTabs/controlPointsTab.jsx
new file mode 100644
index 0000000..0e49b9b
--- /dev/null
+++ b/dashboard/src/views/calibrationTabs/controlPointsTab.jsx
@@ -0,0 +1,188 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { TransformWrapper, TransformComponent, useTransformContext, useTransformEffect, useTransformInit } from 'react-zoom-pan-pinch';
+import XYZWidget from './XyzWidget';
+
+const ControlPointsTab = () => {
+  const [widgets, setWidgets] = useState([]);
+  const [nextId, setNextId] = useState(1);  // widget ids increment automatically
+  const [selectedWidgetId, setSelectedWidgetId] = useState(null); // To track which widget is being updated
+  const [dots, setDots] = useState([]); // Array of { x, y, id } objects
+  const imageRef = useRef(null);  // Reference to image within TransFormWrapper
+
+  const addWidget = () => {
+    setWidgets((prevWidgets) => [
+      ...prevWidgets,
+      { id: nextId, coordinates: { x: '', y: '', z: '', row: '', col: ''  } },
+    ]);
+    setNextId((prevId) => prevId + 1); // increment the unique id for the next widget
+
+  };
+
+  const updateWidget = (id, updatedCoordinates) => {
+    setWidgets((prevWidgets) =>
+      prevWidgets.map((widget) =>
+        widget.id === id ? { ...widget, coordinates: updatedCoordinates } : widget
+      )
+    );
+  };
+
+  const deleteWidget = (id) => {
+    setWidgets((prevWidgets) => prevWidgets.filter((widget) => widget.id !== id));
+    // also delete the dot
+  };
+
+const HandlePhotoClickContext = () => {
+  const [transformState, setTransformState] = useState(null);  // state of zoom is stored here
+
+  useTransformInit(({state, instance}) => {
+    // ensure the zoom/pan state is stored in a react state at the mounting of the photo element
+    setTransformState(state);
+  }, []);
+
+  useTransformEffect(({ state, instance }) => {
+    setTransformState(state); // Update the transformState on every transformation
+  });
+
+  const handlePhotoClick = (event) => {
+//       console.log(transformState);
+    event.stopPropagation();
+    if (!transformState) {
+      console.error("TransformContext state is null or uninitialized");
+      return;
+    }
+
+    const imgElement = imageRef.current;
+    if (!imgElement) return;
+    //  The <img> element
+    const boundingBox = imgElement.getBoundingClientRect(); // The rendered image dimensions on screen
+    // Get the (x, y) position of the click relative to the visible image
+    const clickX = event.clientX - boundingBox.left;
+    const clickY = event.clientY - boundingBox.top;
+    // Account for current zoom and pan state
+    const { previousScale, scale, positionX, positionY } = transformState;
+
+    // Use normalized coordinates relative to the original image dimensions
+    const normalizedX = clickX / boundingBox.width;  // X in percentage of displayed width
+    const normalizedY = clickY / boundingBox.height; // Y in percentage of displayed height
+
+    // Get the original image dimensions
+    const originalWidth = imgElement.naturalWidth; // Original image width (pixels)
+    const originalHeight = imgElement.naturalHeight; // Original image height (pixels)
+
+    // Adjust for zoom scale using zoom state
+    const adjustedX = clickX / scale;
+    const adjustedY = clickY / scale;
+    // Calculate the row and column on the **original image** (as percentages)
+    const originalRow = Math.round(normalizedY * originalHeight * 100) / 100;
+    const originalCol = Math.round(normalizedX * originalWidth * 100) / 100;
+
+   // Add the new dot to the state with the ID of the associated widget
+  if (!selectedWidgetId) {
+    alert("Please select a widget to update its row/column.");
+    return;
+  }
+
+  // Update the dots
+  setDots((prevDots) => ({
+    ...prevDots,
+    [selectedWidgetId]: { x: adjustedX, y: adjustedY },
+  }));
+
+  updateWidget(selectedWidgetId, {
+    ...widgets.find((widget) => widget.id === selectedWidgetId).coordinates,
+    row: originalRow,
+    col: originalCol,
+  });
+  }
+  return (
+      <TransformComponent>
+        <img
+          className="img-calibration"
+          ref={imageRef}
+          onClick={handlePhotoClick}
+          src="/frame_001.jpg" // Replace with the photo's path or URL
+          alt="img-calibration"
+        />
+      {/* Render colored dots */}
+      {Object.entries(dots).map(([widgetId, dot]) => {
+        const imgElement = imageRef.current;
+        const boundingBox = imgElement.getBoundingClientRect();
+//         console.log(boundingBox);
+        return (
+          <div
+            key={widgetId}
+            style={{
+              position: "absolute",
+              top: `${dot.y}px`,
+              left: `${dot.x}px`,
+              transform: "translate(-50%, -50%)",
+              width: "20px",
+              height: "20px",
+              backgroundColor: "red", // Change color as needed
+              borderRadius: "50%",
+              transform: "translate(-50%, -50%)", // Center the dot
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "#fff",
+              fontSize: "8px",
+              fontWeight: "bold",
+            }}
+          >
+          {widgetId}
+          </div>
+        );
+       })}
+    </TransformComponent>
+  );
+};
+
+  return (
+    <div>
+      <h1>Camera calibration</h1>
+      <div style={{ display: 'flex', margin: '20px' }}>
+          <div style={{ flex: 1, border: '1px solid black', marginRight: '20px', position: 'relative' }}>
+             <TransformWrapper>
+                 <HandlePhotoClickContext
+                   selectedWidgetId={selectedWidgetId}
+                   setDots={setDots}
+                   setWidgets={setWidgets}
+                 />
+            </TransformWrapper>
+            <div style={{ textAlign: 'center', marginTop: '10px', color: '#555' }}>
+              Click on the photo to select row/column
+            </div>
+          </div>
+      <div>
+      <div style={{ flex: 1 }}>
+          <button onClick={addWidget} className="btn">Add Widget</button>
+          {widgets.map((widget) => (
+            <div key={widget.id} onClick={(event) =>
+                setSelectedWidgetId(widget.id)
+              }
+              style={{
+                border: selectedWidgetId === widget.id ? '4px solid red' : '1px solid black',
+                marginBottom: '10px',
+                padding: '10px',
+                color: 'white',
+                cursor: 'pointer',
+              }}
+            >
+              <XYZWidget
+                id={widget.id}
+                coordinates={widget.coordinates}
+                onUpdate={(id, coordinates) => updateWidget(id, coordinates)}
+                onDelete={deleteWidget}
+              />
+            </div>
+          ))}
+      </div>
+        </div>
+      </div>
+      <h2>Current Coordinates:</h2>
+      <pre>{JSON.stringify(widgets, null, 2)}</pre>
+    </div>
+  );
+};
+
+export default ControlPointsTab;
diff --git a/dashboard/src/views/calibrationTabs/widget.css b/dashboard/src/views/calibrationTabs/widget.css
new file mode 100644
index 0000000..f55ad9a
--- /dev/null
+++ b/dashboard/src/views/calibrationTabs/widget.css
@@ -0,0 +1,10 @@
+.widget {
+  border: 1px solid black;
+  margin: 10px;
+  padding: 10px;
+  background-color: #0a4777;
+  color: white;
+  fontSize: 6px;
+  borderRadius: 5px;
+
+}
\ No newline at end of file
diff --git a/dashboard/src/views/device.jsx b/dashboard/src/views/device.jsx
index cddda15..23a71e4 100644
--- a/dashboard/src/views/device.jsx
+++ b/dashboard/src/views/device.jsx
@@ -2,7 +2,6 @@ import React, {useState, useEffect} from 'react';
 import api from '../api';
 import Message from './message'
 
-
 const Device = () => {
 
     const [device, updateDevice] = useState([]);
@@ -200,7 +199,7 @@ const Device = () => {
                     </label>
                     <input type='text' className='form-control' id='message' name='message' onChange={handleInputChange} value={formData.message}/>
                 </div>
-                <button type='submit' className='btn btn-primary'>
+                <button type='submit' className='btn'>
                     Submit
                 </button>
 
diff --git a/dashboard/src/views/diskManagement.jsx b/dashboard/src/views/diskManagement.jsx
index 5a9ab10..fc90a4b 100644
--- a/dashboard/src/views/diskManagement.jsx
+++ b/dashboard/src/views/diskManagement.jsx
@@ -127,7 +127,7 @@ const DiskManagement = () => {
                     </label>
                     <input type='number' className='form-control' id='frequency' name='frequency' step="1" onChange={handleInputChange} value={formData.frequency} />
                 </div>
-                <button type='submit' className='btn btn-primary'>
+                <button type='submit' className='btn'>
                     Submit
                 </button>
 
diff --git a/dashboard/src/views/home.jsx b/dashboard/src/views/home.jsx
index 22379c6..c3ab9e0 100644
--- a/dashboard/src/views/home.jsx
+++ b/dashboard/src/views/home.jsx
@@ -1,13 +1,37 @@
 import React, {useState, useEffect} from 'react';
-
+import { FaTimes } from 'react-icons/fa';
 import reactLogo from '/react.svg'
 import orcLogo from '/orc_favicon.svg'
 import api from "../api"
 
 const Home = () => {
   const [count, setCount] = useState(0)
+  const [showMessage, setShowMessage] = useState(true);
+
   return (
     <>
+    {showMessage && (
+        <div style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          backgroundColor: '#0e6bb1',
+          color: '#fff',
+          padding: '10px',
+          borderBottom: '1px solid #ccc'
+        }}>
+          <span style={{ display: 'flex', alignItems: 'center' }}>
+            <strong style={{ marginRight: '8px', fontSize: '18px' }}>!</strong>
+            <span>Welcome to NodeORC configuration!</span>
+          </span>
+          <FaTimes
+            onClick={() => setShowMessage(false)} // Hide the message on clicking
+          />
+
+        </div>
+      )}
+
+
       <div>
         <a href="https://vite.dev" target="_blank">
           <img src={orcLogo} className="logo" alt="Vite logo" />
diff --git a/dashboard/src/views/waterLevel.jsx b/dashboard/src/views/waterLevel.jsx
index 674bd57..ea8ce13 100644
--- a/dashboard/src/views/waterLevel.jsx
+++ b/dashboard/src/views/waterLevel.jsx
@@ -148,7 +148,7 @@ const WaterLevel = () => {
 {/*                     <input type='text' className='form-control' id='script' name='script' placeholder="#!/bin/bash&#10;...write your script" onChange={handleInputChange} value={formData.script} style={{ height: '300px' }}/> */}
                     <textarea className='form-control' id='script' name='script' placeholder="#!/bin/bash&#10;...write your script" onChange={handleInputChange} value={formData.script} style={{ height: '300px' }}/>
                 </div>
-                <button type='submit' className='btn btn-primary'>
+                <button type='submit' className='btn'>
                     Submit
                 </button>
             </form>