diff --git a/package.json b/package.json
index f1f39f0..4882112 100644
--- a/package.json
+++ b/package.json
@@ -1,48 +1,48 @@
 {
-  "name": "antd-vite-react-call-of-duty",
-  "homepage": "/dashboard/home",
-  "private": true,
-  "version": "1.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@ant-design/icons": "^6.0.0",
-    "@nivo/line": "^0.88.0",
-    "@nivo/pie": "^0.88.0",
-    "antd": "^5.15.2",
-    "axios": "^1.8.4",
-    "browser-image-compression": "^2.0.2",
-    "crypto-js": "^4.2.0",
-    "dayjs": "^1.11.13",
-    "exceljs": "^4.4.0",
-    "file-saver": "^2.0.5",
-    "html2canvas": "^1.4.1",
-    "jspdf": "^3.0.4",
-    "jspdf-autotable": "^5.0.2",
-    "mqtt": "^5.14.0",
-    "qrcode": "^1.5.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^4.11.0",
-    "react-router-dom": "^6.22.3",
-    "react-svg": "^16.3.0",
-    "recharts": "^3.6.0",
-    "sweetalert2": "^11.17.2"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.64",
-    "@types/react-dom": "^18.2.21",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "vite": "^5.1.6"
-  },
-  "packageManager": "pnpm@10.2.1+sha512.398035c7bd696d0ba0b10a688ed558285329d27ea994804a52bad9167d8e3a72bcb993f9699585d3ca25779ac64949ef422757a6c31102c12ab932e5cbe5cc92"
+    "name": "antd-vite-react-call-of-duty",
+    "homepage": "/dashboard/home",
+    "private": true,
+    "version": "1.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite --host 0.0.0.0 --port 8592",
+        "build": "vite build",
+        "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "@ant-design/icons": "^6.0.0",
+        "@nivo/line": "^0.88.0",
+        "@nivo/pie": "^0.88.0",
+        "antd": "^5.15.2",
+        "axios": "^1.8.4",
+        "browser-image-compression": "^2.0.2",
+        "crypto-js": "^4.2.0",
+        "dayjs": "^1.11.13",
+        "exceljs": "^4.4.0",
+        "file-saver": "^2.0.5",
+        "html2canvas": "^1.4.1",
+        "jspdf": "^3.0.4",
+        "jspdf-autotable": "^5.0.2",
+        "mqtt": "^5.14.0",
+        "qrcode": "^1.5.4",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-icons": "^4.11.0",
+        "react-router-dom": "^6.22.3",
+        "react-svg": "^16.3.0",
+        "recharts": "^3.6.0",
+        "sweetalert2": "^11.17.2"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.64",
+        "@types/react-dom": "^18.2.21",
+        "@vitejs/plugin-react": "^4.2.1",
+        "eslint": "^8.57.0",
+        "eslint-plugin-react": "^7.34.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.4.5",
+        "vite": "^5.1.6"
+    },
+    "packageManager": "pnpm@10.2.1+sha512.398035c7bd696d0ba0b10a688ed558285329d27ea994804a52bad9167d8e3a72bcb993f9699585d3ca25779ac64949ef422757a6c31102c12ab932e5cbe5cc92"
 }
diff --git a/src/App.jsx b/src/App.jsx
index 1cbda33..8ffcfc9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -36,7 +36,7 @@ import IndexNotification from './pages/notification/IndexNotification';
 import IndexRole from './pages/role/IndexRole';
 import IndexUser from './pages/user/IndexUser';
 import IndexContact from './pages/contact/IndexContact';
-import IndexWebControl from './pages/webControl/IndexWebControl';
+import IndexWhatsAppControl from './pages/whatsAppControl/IndexWhatsAppControl';
 import DetailNotificationTab from './pages/notificationDetail/IndexNotificationDetail';
 import IndexVerificationSparepart from './pages/verificationSparepart/IndexVerificationSparepart';
 
@@ -145,8 +145,8 @@ const App = () => {
                     <Route index element={<IndexUser />} />
                 </Route>
 
-                <Route path="/web-control" element={<ProtectedRoute />}>
-                    <Route index element={<IndexWebControl />} />
+                <Route path="/whatsapp-control" element={<ProtectedRoute />}>
+                    <Route index element={<IndexWhatsAppControl />} />
                 </Route>
 
                 <Route path="/contact" element={<ProtectedRoute />}>
diff --git a/src/api/web-control.jsx b/src/api/whatsapp-control.jsx
similarity index 90%
rename from src/api/web-control.jsx
rename to src/api/whatsapp-control.jsx
index 4162c6a..ae72673 100644
--- a/src/api/web-control.jsx
+++ b/src/api/whatsapp-control.jsx
@@ -9,6 +9,4 @@ const resetWA = async () => {
     return response.data;
 };
 
-export {
-    resetWA,
-};
+export { resetWA };
diff --git a/src/layout/LayoutMenu.jsx b/src/layout/LayoutMenu.jsx
index bfbc70d..9693e60 100644
--- a/src/layout/LayoutMenu.jsx
+++ b/src/layout/LayoutMenu.jsx
@@ -227,11 +227,11 @@ const allItems = [
         ),
     },
     {
-        key: 'web-control',
+        key: 'whatsapp-control',
         icon: <GlobalOutlined style={{ fontSize: '19px' }} />,
         label: (
-            <Link to="/web-control" className="fontMenus">
-                Web Control
+            <Link to="/whatsapp-control" className="fontMenus">
+                WhatsApp Control
             </Link>
         ),
     },
@@ -260,7 +260,7 @@ const LayoutMenu = () => {
         if (pathname === '/dashboard/home') return 'home';
         if (pathname === '/user') return 'user';
         if (pathname === '/role') return 'role';
-        if (pathname === '/web-control') return 'web-control';
+        if (pathname === '/whatsapp-control') return 'whatsapp-control';
         if (pathname === '/notification') return 'notification';
         if (pathname === '/jadwal-shift') return 'jadwal-shift';
         if (pathname === '/contact') return 'contact';
diff --git a/src/pages/webControl/IndexWebControl.jsx b/src/pages/whatsAppControl/IndexWhatsAppControl.jsx
similarity index 84%
rename from src/pages/webControl/IndexWebControl.jsx
rename to src/pages/whatsAppControl/IndexWhatsAppControl.jsx
index f48d3ab..69657f7 100644
--- a/src/pages/webControl/IndexWebControl.jsx
+++ b/src/pages/whatsAppControl/IndexWhatsAppControl.jsx
@@ -1,21 +1,21 @@
 import React, { useState, useEffect, memo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Button, Typography } from 'antd';
-import { resetWA } from '../../api/web-control';
+import { resetWA } from '../../api/whatsapp-control';
 import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
 import { ReloadOutlined } from '@ant-design/icons';
 
 const { Text } = Typography;
 
-const IndexWebControl = memo(function IndexWebControl() {
+const IndexWhatsAppControl = memo(function IndexWhatsAppControl() {
     const navigate = useNavigate();
     const { setBreadcrumbItems } = useBreadcrumb();
 
     const [isPlaying, setIsPlaying] = useState(true);
 
-    const url = "http://localhost:9531/qrview";
+    const url = import.meta.env.VITE_WHATSAPP_URL;
 
-    const handleReset = async() => {
+    const handleReset = async () => {
         setIsPlaying(false);
         await resetWA();
         setIsPlaying(true);
@@ -29,7 +29,7 @@ const IndexWebControl = memo(function IndexWebControl() {
                 {
                     title: (
                         <Text strong style={{ fontSize: '14px' }}>
-                            • Web Control Panel
+                            • WhatsApp Control Panel
                         </Text>
                     ),
                 },
@@ -41,10 +41,9 @@ const IndexWebControl = memo(function IndexWebControl() {
 
     return (
         <div style={{ padding: '20px' }}>
-
             <div style={{ marginBottom: 20 }}>
                 <Button type="primary" onClick={handleReset} style={{ marginRight: 10 }}>
-                    <ReloadOutlined/> Restart WhatsApp
+                    <ReloadOutlined /> Restart WhatsApp
                 </Button>
             </div>
 
@@ -58,7 +57,7 @@ const IndexWebControl = memo(function IndexWebControl() {
                 {isPlaying ? (
                     <iframe
                         src={url}
-                        title="Web Preview"
+                        title="WhatsApp Preview"
                         style={{
                             width: '100%',
                             height: '100%',
@@ -83,4 +82,4 @@ const IndexWebControl = memo(function IndexWebControl() {
     );
 });
 
-export default IndexWebControl;
\ No newline at end of file
+export default IndexWhatsAppControl;
diff --git a/src/pages/webControl/WebControlBackup.jsx b/src/pages/whatsAppControl/WebControlBackup.jsx
similarity index 87%
rename from src/pages/webControl/WebControlBackup.jsx
rename to src/pages/whatsAppControl/WebControlBackup.jsx
index 7d057f5..df9ba60 100644
--- a/src/pages/webControl/WebControlBackup.jsx
+++ b/src/pages/whatsAppControl/WebControlBackup.jsx
@@ -12,27 +12,27 @@ const IndexWebControl = memo(function IndexWebControl() {
     const { setBreadcrumbItems } = useBreadcrumb();
 
     const [isPlaying, setIsPlaying] = useState(true);
-    const [currentUrl, setCurrentUrl] = useState("http://localhost:9531");
+    const [currentUrl, setCurrentUrl] = useState('http://localhost:9531');
     const iframeRef = useRef(null);
 
-    const handleReset = async() => {
+    const handleReset = async () => {
         setIsPlaying(false);
         await resetWA();
         setIsPlaying(true);
         // Kembali ke halaman login setelah reset
-        setCurrentUrl("https://localhost:9531");
+        setCurrentUrl('https://localhost:9531');
         message.success('WhatsApp berhasil di-restart');
     };
 
     // Fungsi untuk redirect ke QR View
     const redirectToQRView = () => {
-        setCurrentUrl("https://localhost:9531/qrview");
+        setCurrentUrl('https://localhost:9531/qrview');
         message.info('Redirecting to QR View...');
     };
 
     // Fungsi untuk kembali ke login
     const backToLogin = () => {
-        setCurrentUrl("https://localhost:9531");
+        setCurrentUrl('https://localhost:9531');
         message.info('Back to login page');
     };
 
@@ -59,27 +59,31 @@ const IndexWebControl = memo(function IndexWebControl() {
             // Terima pesan dari domain manapun untuk testing
             console.log('Message received from:', event.origin);
             console.log('Message data:', event.data);
-            
+
             // Cek apakah ini pesan login success
             if (event.data) {
                 // Jika pesan adalah string
                 if (typeof event.data === 'string') {
                     const lowerData = event.data.toLowerCase();
-                    if (lowerData.includes('login') || 
-                        lowerData.includes('success') || 
+                    if (
+                        lowerData.includes('login') ||
+                        lowerData.includes('success') ||
                         lowerData.includes('authenticated') ||
-                        lowerData.includes('qrview')) {
+                        lowerData.includes('qrview')
+                    ) {
                         console.log('Login detected via string message');
                         redirectToQRView();
                     }
                 }
-                
+
                 // Jika pesan adalah object
                 if (typeof event.data === 'object') {
-                    if (event.data.type === 'LOGIN_SUCCESS' || 
+                    if (
+                        event.data.type === 'LOGIN_SUCCESS' ||
                         event.data.status === 'success' ||
                         event.data.logged_in === true ||
-                        event.data.redirect === true) {
+                        event.data.redirect === true
+                    ) {
                         console.log('Login detected via object message');
                         redirectToQRView();
                     }
@@ -88,7 +92,7 @@ const IndexWebControl = memo(function IndexWebControl() {
         };
 
         window.addEventListener('message', handleMessage);
-        
+
         return () => {
             window.removeEventListener('message', handleMessage);
         };
@@ -99,12 +103,12 @@ const IndexWebControl = memo(function IndexWebControl() {
         // Jika tidak ada pesan dari iframe, coba redirect otomatis setelah 10 detik
         // Asumsi: login biasanya selesai dalam 10 detik
         const timer = setTimeout(() => {
-            if (currentUrl === "https://localhost:9531") {
+            if (currentUrl === 'https://localhost:9531') {
                 console.log('Auto redirect after 10 seconds (fallback)');
                 redirectToQRView();
             }
         }, 10000);
-        
+
         return () => clearTimeout(timer);
     }, [currentUrl]);
 
@@ -112,7 +116,7 @@ const IndexWebControl = memo(function IndexWebControl() {
         <div style={{ padding: '20px' }}>
             <div style={{ marginBottom: 20, display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
                 <Button type="primary" onClick={handleReset}>
-                    <ReloadOutlined/> Restart WhatsApp
+                    <ReloadOutlined /> Restart WhatsApp
                 </Button>
                 {/* <Button onClick={redirectToQRView} type="default">
                     Redirect ke QR View
@@ -165,4 +169,4 @@ const IndexWebControl = memo(function IndexWebControl() {
     );
 });
 
-export default IndexWebControl;
\ No newline at end of file
+export default IndexWebControl;