diff --git a/amp-client/src/Axios/axios.js b/amp-client/src/Axios/axios.js
index 456e7712..cd4b1bec 100644
--- a/amp-client/src/Axios/axios.js
+++ b/amp-client/src/Axios/axios.js
@@ -1,11 +1,11 @@
 import axios from "axios";
 
-const axiosBaseUrl = axios.create({
+const axiosInstance = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL + '/api/v1',
   headers: { "Content-Type": "application/json" },
 });
 
-axiosBaseUrl.interceptors.request.use((config) => {
+axiosInstance.interceptors.request.use((config) => {
   const token = localStorage.getItem("Token");
   if (token) {
     config.headers.Authorization = `Bearer ${token}`;
@@ -13,4 +13,4 @@ axiosBaseUrl.interceptors.request.use((config) => {
   return config;
 });
 
-export default axiosBaseUrl;
\ No newline at end of file
+export default axiosInstance;
\ No newline at end of file
diff --git a/amp-client/src/Components/ClientComponents/ClientNavbar/ClientNavbar.jsx b/amp-client/src/Components/ClientComponents/ClientNavbar/ClientNavbar.jsx
index 69607d24..d1e7d9c1 100644
--- a/amp-client/src/Components/ClientComponents/ClientNavbar/ClientNavbar.jsx
+++ b/amp-client/src/Components/ClientComponents/ClientNavbar/ClientNavbar.jsx
@@ -2,7 +2,7 @@ import "./styles.css";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import logo from "../../../assets/logo.png";
-import axiosBaseUrl from "../../../Axios/axios";
+import axiosInstance from "../../../Axios/axios";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faUserCircle,
diff --git a/amp-client/src/Components/CommonComponents/InputField/InputField.jsx b/amp-client/src/Components/CommonComponents/InputField/InputField.jsx
index 937e5ac2..a645bb86 100644
--- a/amp-client/src/Components/CommonComponents/InputField/InputField.jsx
+++ b/amp-client/src/Components/CommonComponents/InputField/InputField.jsx
@@ -1,25 +1,91 @@
-import './styles.css'
+import "./styles.css";
 
-const InputField = ({ label, placeholder, value, onChange, width, textarea, type }) => {
+const InputField = ({
+  label,
+  placeholder,
+  value,
+  onChange,
+  width,
+  textarea,
+  type,
+  required = true,
+}) => {
   return (
-    <div className="input-field-container" style={{ width: width || '100%' }}>
-      <label className="subtitle black-color">{label}*</label>
+    <div className="input-field-container" style={{ width: width || "100%" }}>
+      <label className="subtitle black-color">
+        {label}
+        {required ? <span>*</span> : null}
+      </label>
       {textarea ? (
         <textarea
           placeholder={placeholder}
           value={value}
           onChange={onChange}
+          required={required}
         />
       ) : (
         <input
-          type={type?type:"text"}
+          type={type || "text"}
           placeholder={placeholder}
           value={value}
           onChange={onChange}
+          required={required}
         />
       )}
     </div>
   );
-}
+};
 
-export default InputField
\ No newline at end of file
+// V2
+// const InputField = ({
+//   label,
+//   placeholder,
+//   value,
+//   onChange,
+//   width,
+//   textarea,
+//   type,
+//   required = true,
+// }) => {
+//   return (
+//     <div className="input-field-container" style={{ width: width || "100%" }}>
+//       <label className="subtitle black-color">
+//         {label} {required && <span>*</span>}
+//       </label>
+//       {textarea ? (
+//         <textarea placeholder={placeholder} value={value} onChange={onChange} />
+//       ) : (
+//         <input
+//           type={type || "text"}
+//           placeholder={placeholder}
+//           value={value}
+//           onChange={onChange}
+//         />
+//       )}
+//     </div>
+//   );
+// };
+
+// const InputField = ({ label, placeholder, value, onChange, width, textarea, type }) => {
+//   return (
+//     <div className="input-field-container" style={{ width: width || '100%' }}>
+//       <label className="subtitle black-color">{label}*</label>
+//       {textarea ? (
+//         <textarea
+//           placeholder={placeholder}
+//           value={value}
+//           onChange={onChange}
+//         />
+//       ) : (
+//         <input
+//           type={type?type:"text"}
+//           placeholder={placeholder}
+//           value={value}
+//           onChange={onChange}
+//         />
+//       )}
+//     </div>
+//   );
+// }
+
+export default InputField;
diff --git a/amp-client/src/Components/CommonComponents/LogoutButton/LogoutButton.jsx b/amp-client/src/Components/CommonComponents/LogoutButton/LogoutButton.jsx
index b7aa2a9a..a164a094 100644
--- a/amp-client/src/Components/CommonComponents/LogoutButton/LogoutButton.jsx
+++ b/amp-client/src/Components/CommonComponents/LogoutButton/LogoutButton.jsx
@@ -1,5 +1,4 @@
 import "./styles.css";
-import axiosBaseUrl from "../../../Axios/axios";
 import { useLogout } from "../../../Hooks/useLogoutHook";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSignOutAlt } from "@fortawesome/free-solid-svg-icons";
diff --git a/amp-client/src/Components/LandingPageComponents/ContactUs/ContactUsSection.jsx b/amp-client/src/Components/LandingPageComponents/ContactUs/ContactUsSection.jsx
index 93e3ede0..614d8892 100644
--- a/amp-client/src/Components/LandingPageComponents/ContactUs/ContactUsSection.jsx
+++ b/amp-client/src/Components/LandingPageComponents/ContactUs/ContactUsSection.jsx
@@ -1,9 +1,68 @@
 import "./styles.css";
+import { useState } from "react";
+import { toast } from "react-toastify";
 import contactUs from "../../../assets/contact-us.png";
 import InputField from "../../CommonComponents/InputField/InputField";
 import ActionButton from "../../CommonComponents/ActionButton/ActionButton";
+import sendContactMessage from "../Services/ContactUsService/ContactUsService";
 
 const ContactUsSection = ({ id }) => {
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    phone_number: "",
+    message: "",
+  });
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleInputChange = (field) => (e) => {
+    setFormData((prevData) => ({
+      ...prevData,
+      [field]: e.target.value,
+    }));
+  };
+
+  const handleSubmit = async () => {
+    if (!formData.name || !formData.email || !formData.phone_number) {
+      toast.error("Please fill all required fields");
+      return;
+    }
+
+    // Email validation
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(formData.email)) {
+      toast.error("Please enter a valid email address");
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const result = await sendContactMessage(formData);
+
+      if (result.success) {
+        toast.success("Message sent successfully! We'll get back to you soon.");
+
+        // Reset form
+        setFormData({
+          name: "",
+          email: "",
+          phone_number: "",
+          message: "",
+        });
+      } else {
+        toast.error(
+          result.error || "Failed to send message. Please try again."
+        );
+      }
+    } catch (error) {
+      toast.error("An unexpected error occurred. Please try again later.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   return (
     <div id={id}>
       <div className="section-center">
@@ -17,12 +76,48 @@ const ContactUsSection = ({ id }) => {
           <img src={contactUs} alt="Contact Us" className="contact-image" />
         </div>
         <div className="contact-form">
-          <h2 className="section-titles primary-color section-center">Contact Us</h2>
-          <InputField label="Full Name" placeholder="Full Name" width="80%" />
-          <InputField label="Email" placeholder="Email" width="80%" />
-          <InputField label="Phone Number" placeholder="Phone Number" width="80%" />
-          <InputField label="Message" placeholder="Message" textarea width="80%" />
-          <ActionButton backgroundColor="#233a7e" color="white" text="Submit" width="60%" />
+          <h2 className="section-titles primary-color section-center less-margin">
+            Contact Us
+          </h2>
+
+          <InputField
+            label="Full Name"
+            placeholder="Full Name"
+            width="80%"
+            value={formData.name}
+            onChange={handleInputChange("name")}
+          />
+          <InputField
+            label="Email"
+            placeholder="Email"
+            width="80%"
+            type="email"
+            value={formData.email}
+            onChange={handleInputChange("email")}
+          />
+          <InputField
+            label="Phone Number"
+            placeholder="Phone Number"
+            width="80%"
+            value={formData.phone_number}
+            onChange={handleInputChange("phone_number")}
+          />
+          <InputField
+            label="Message"
+            placeholder="Message (Optional)"
+            textarea
+            width="80%"
+            value={formData.message}
+            onChange={handleInputChange("message")}
+            required={false}
+          />
+          <ActionButton
+            backgroundColor="#233a7e"
+            color="white"
+            text={isSubmitting ? "Submitting..." : "Submit"}
+            width="60%"
+            onClick={handleSubmit}
+          />
         </div>
       </section>
     </div>
diff --git a/amp-client/src/Components/LandingPageComponents/ContactUs/styles.css b/amp-client/src/Components/LandingPageComponents/ContactUs/styles.css
index a7ecb3b7..fc6b6707 100644
--- a/amp-client/src/Components/LandingPageComponents/ContactUs/styles.css
+++ b/amp-client/src/Components/LandingPageComponents/ContactUs/styles.css
@@ -1,7 +1,11 @@
 /* ContactUsSection.css */
 .section-center {
   text-align: center;
-  padding: 30px;
+  padding-top: 30px;
+}
+
+.less-margin {
+  margin-bottom: 0px;
 }
 
 .contact-us-section {
diff --git a/amp-client/src/Components/LandingPageComponents/LoginForm/LoginForm.jsx b/amp-client/src/Components/LandingPageComponents/LoginForm/LoginForm.jsx
index 726f6aaf..5e4c57d5 100644
--- a/amp-client/src/Components/LandingPageComponents/LoginForm/LoginForm.jsx
+++ b/amp-client/src/Components/LandingPageComponents/LoginForm/LoginForm.jsx
@@ -1,52 +1,20 @@
 import "./styles.css";
 import { useState } from "react";
-import { toast } from "react-toastify";
-import { useNavigate } from "react-router-dom";
-import axiosBaseUrl from "../../../Axios/axios";
-import { useDispatch, useSelector } from "react-redux";
-import { storeData } from "../../../Redux/Slices/UserSlice";
+import { useSelector } from "react-redux";
 import InputField from "../../CommonComponents/InputField/InputField";
 import ActionButton from "../../CommonComponents/ActionButton/ActionButton";
-import { toggleLoad } from "../../../Redux/Slices/loadingSlice";
+import useLoginFormService from "../Services/LoginFormService/LoginFormService";
 
 const LoginForm = ({ onClose }) => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
 
+  const { handleLogin } = useLoginFormService();
   const loading = useSelector((state) => state.loading.loadingState);
 
-  const dispatch = useDispatch();
-
-  const navigate = useNavigate();
-
-  const handleLogin = async (e) => {
+  const onSubmit = (e) => {
     e.preventDefault();
-
-    try {
-      dispatch(toggleLoad(true));
-
-      const response = await axiosBaseUrl.post("/login", { email, password });
-      
-      const userType = response.data.data.user_type;
-
-      localStorage.setItem("Token", response.data.data.token);
-      dispatch(storeData(response.data.data));
-
-      if (userType === "Client") {
-        toast.success("Hello Client");
-        navigate("/client/dashboard");
-      } else if (userType === "Provider") {
-        toast.success("Hello Provider");
-        navigate("/provider/dashboard");
-      } else if (userType === "Admin") {
-        toast.success("Hello Admin");
-        navigate("/admin/navigation-page");
-      }
-    } catch (error) {
-      toast.error("Login failed. Please try again.");
-    } finally {
-      dispatch(toggleLoad(false));
-    }
+    handleLogin(email, password);
   };
 
   return (
@@ -79,13 +47,13 @@ const LoginForm = ({ onClose }) => {
                 width="70%"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-              />              
+              />
               <ActionButton
                 backgroundColor="#F9A43A"
                 color="#233A7E"
                 text={<h3>Login</h3>}
                 width="70%"
-                onClick={handleLogin}
+                onClick={onSubmit}
                 margin="5px"
               />
             </>
diff --git a/amp-client/src/Components/LandingPageComponents/Services/ContactUsService/ContactUsService.js b/amp-client/src/Components/LandingPageComponents/Services/ContactUsService/ContactUsService.js
new file mode 100644
index 00000000..e025943f
--- /dev/null
+++ b/amp-client/src/Components/LandingPageComponents/Services/ContactUsService/ContactUsService.js
@@ -0,0 +1,21 @@
+// ContactUsService.js
+import axiosInstance from "../../../../Axios/axios";
+
+const sendContactMessage = async (contactData) => {
+  try {
+    const response = await axiosInstance.post("/insertMessage", contactData);
+    return {
+      success: true,
+      data: response.data,
+    };
+  } catch (error) {
+    console.error("Error sending contact message:", error);
+    return {
+      success: false,
+      error: error.response?.data?.message || "Failed to send message",
+    };
+  }
+};
+
+export default sendContactMessage;
+
diff --git a/amp-client/src/Components/LandingPageComponents/Services/LoginFormService/LoginFormService.js b/amp-client/src/Components/LandingPageComponents/Services/LoginFormService/LoginFormService.js
new file mode 100644
index 00000000..8e252f07
--- /dev/null
+++ b/amp-client/src/Components/LandingPageComponents/Services/LoginFormService/LoginFormService.js
@@ -0,0 +1,50 @@
+import { toast } from "react-toastify";
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import axiosInstance from "../../../../Axios/axios";
+import { storeData } from "../../../../Redux/Slices/UserSlice";
+import { toggleLoad } from "../../../../Redux/Slices/loadingSlice";
+
+const useLoginFormService = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  const handleLogin = async (email, password) => {
+    try {
+      dispatch(toggleLoad(true));
+
+      const response = await axiosInstance.post("/login", { email, password });
+      const userData = response.data.data;
+
+      localStorage.setItem("Token", userData.token);
+      dispatch(storeData(userData));
+
+      const userType = userData.user_type;
+
+      switch (userType) {
+        case "Client":
+          toast.success("Hello Client");
+          navigate("/client/dashboard");
+          break;
+        case "Provider":
+          toast.success("Hello Provider");
+          navigate("/provider/dashboard");
+          break;
+        case "Admin":
+          toast.success("Hello Admin");
+          navigate("/admin/navigation-page");
+          break;
+        default:
+          toast.warn("Unknown user type.");
+      }
+    } catch (error) {
+      toast.error("Login failed. Please try again.");
+    } finally {
+      dispatch(toggleLoad(false));
+    }
+  };
+
+  return { handleLogin };
+};
+
+export default useLoginFormService;
diff --git a/amp-client/src/Hooks/useLogoutHook.js b/amp-client/src/Hooks/useLogoutHook.js
index c57a3354..1a897886 100644
--- a/amp-client/src/Hooks/useLogoutHook.js
+++ b/amp-client/src/Hooks/useLogoutHook.js
@@ -1,5 +1,5 @@
 import { toast } from "react-toastify";
-import axiosBaseUrl from "../Axios/axios";
+import axiosInstance from "../Axios/axios";
 import { useDispatch } from "react-redux";
 import { persistor } from "../Redux/store";
 import { useNavigate } from "react-router-dom";
@@ -11,7 +11,7 @@ export const useLogout = () => {
 
   const handleLogout = async () => {
     try {
-      const response = await axiosBaseUrl.post("/logout");
+      const response = await axiosInstance.post("/logout");
       if (response.data.success === true) {
         localStorage.clear();
         await persistor.purge();
diff --git a/amp-client/src/Pages/ClientPages/ClientDashboard/ClientDashboard.jsx b/amp-client/src/Pages/ClientPages/ClientDashboard/ClientDashboard.jsx
index d7b37ff1..8a672e9a 100644
--- a/amp-client/src/Pages/ClientPages/ClientDashboard/ClientDashboard.jsx
+++ b/amp-client/src/Pages/ClientPages/ClientDashboard/ClientDashboard.jsx
@@ -1,9 +1,10 @@
 import "./styles.css";
 import { Line, Bar } from "react-chartjs-2";
 import { useState, useEffect } from "react";
-import axiosBaseUrl from "../../../Axios/axios";
 import { useDispatch, useSelector } from "react-redux";
 import { toggleLoad } from "../../../Redux/Slices/loadingSlice";
+import ClientDashboardService from "../Services/ClientDashboardService/ClientDashboardService";
+
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -16,6 +17,7 @@ import {
   Legend,
   Filler,
 } from "chart.js";
+
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -36,21 +38,21 @@ const ClientDashboard = () => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    const fetchDashboardData = async () => {
+    const fetchData = async () => {
       dispatch(toggleLoad(true));
       try {
-        const response = await axiosBaseUrl.get(
-          `/clients/clientDashboardData/${userId}`
-        );
-        setDashboardData(response.data.data);
-        dispatch(toggleLoad(false));
-      } catch (error) {
-        setError(error.message);
+        const data = await ClientDashboardService.fetchClientDashboardData(userId);
+        setDashboardData(data);
+      } catch (err) {
+        setError(err.message);
+      } finally {
         dispatch(toggleLoad(false));
       }
     };
 
-    fetchDashboardData();
+    if (userId) {
+      fetchData();
+    }
   }, [userId, dispatch]);
 
   if (loading) {
@@ -98,8 +100,8 @@ const ClientDashboard = () => {
     datasets: [
       {
         label: "Cumulative Power Usage (in Kilowatts)",
-        data: Object.values(dashboardData.cumulativePowerUsage).map(
-          (arr) => Math.max(...arr)
+        data: Object.values(dashboardData.cumulativePowerUsage).map((arr) =>
+          Math.max(...arr)
         ),
         backgroundColor: "rgba(255, 193, 7, 0.6)",
         borderColor: "#ffc107",
diff --git a/amp-client/src/Pages/ClientPages/ClientPowerPlan/ClientPowerPlan.jsx b/amp-client/src/Pages/ClientPages/ClientPowerPlan/ClientPowerPlan.jsx
index 47f1e290..1a3dcaac 100644
--- a/amp-client/src/Pages/ClientPages/ClientPowerPlan/ClientPowerPlan.jsx
+++ b/amp-client/src/Pages/ClientPages/ClientPowerPlan/ClientPowerPlan.jsx
@@ -1,88 +1,74 @@
 import "./styles.css";
 import { useState } from "react";
-import axiosBaseUrl from "../../../Axios/axios";
-import { useDispatch, useSelector } from "react-redux";
-import { toggleLoad } from "../../../Redux/Slices/loadingSlice";
+import { useSelector } from "react-redux";
+import ClientPowerPlanService from "../Services/ClientPowerPlanService/ClientPowerPlanService";
 
 const ClientPowerPlan = () => {
   const [reportData, setReportData] = useState(null);
   const loading = useSelector((state) => state.loading.loadingState);
   const userId = useSelector((state) => state.user.id);
-  const dispatch = useDispatch();
 
-  const fetchPowerPlanReport = async () => {
-    dispatch(toggleLoad(true));
-    setReportData(null);
-
-    try {
-      const response = await axiosBaseUrl.get(`clients/clientReport/${userId}`);
-      const data = response.data;
-      setReportData(data.data);
-    } catch (error) {
-      console.error("Error fetching power plan report:", error);
-      setReportData(null);
-    } finally {
-      dispatch(toggleLoad(false));
-    }
-  };
+  const { fetchPowerPlanReport } = ClientPowerPlanService();
 
   return (
-    <>
-      <div className="client-power-plan-container">
-        <h2>Power Plan</h2>
-        {!reportData && !loading && (
-          <div className="generate-report-section">
-            <p>Click On the Button to generate the power plan for this month</p>
-            <button onClick={fetchPowerPlanReport} className="generate-button">
-              Generate Power Plan
-            </button>
-          </div>
-        )}
+    <div className="client-power-plan-container">
+      <h2>Power Plan</h2>
 
-        {loading ? (
-          <div className="spinner-container">
-            <div className="spinner"></div>
-          </div>
-        ) : (
-          reportData && (
-            <div className="report-display">
-              <h3>Report Summary</h3>
-              <p>{reportData.summary}</p>
+      {!reportData && !loading && (
+        <div className="generate-report-section">
+          <p>Click On the Button to generate the power plan for this month</p>
+          <button
+            onClick={() => fetchPowerPlanReport(userId, setReportData)}
+            className="generate-button"
+          >
+            Generate Power Plan
+          </button>
+        </div>
+      )}
 
-              <div className="insight-section">
-                <h4>Voltage Insights</h4>
-                <p>{reportData.voltageInsights}</p>
-              </div>
+      {loading ? (
+        <div className="spinner-container">
+          <div className="spinner"></div>
+        </div>
+      ) : (
+        reportData && (
+          <div className="report-display">
+            <h3>Report Summary</h3>
+            <p>{reportData.summary}</p>
 
-              <div className="insight-section">
-                <h4>Power Insights</h4>
-                <p>{reportData.powerInsights}</p>
-              </div>
+            <div className="insight-section">
+              <h4>Voltage Insights</h4>
+              <p>{reportData.voltageInsights}</p>
+            </div>
 
-              <div className="insight-section">
-                <h4>Energy Insights</h4>
-                <p>{reportData.energyInsights}</p>
-              </div>
+            <div className="insight-section">
+              <h4>Power Insights</h4>
+              <p>{reportData.powerInsights}</p>
+            </div>
 
-              <div className="recommendations-section">
-                <h4>Recommendations</h4>
-                <ul>
-                  {reportData.recommendations
-                    .split("\n")
-                    .map((recommendation, index) => (
-                      <li key={index}>{recommendation}</li>
-                    ))}
-                </ul>
-              </div>
-              <div className="centering-button">
+            <div className="insight-section">
+              <h4>Energy Insights</h4>
+              <p>{reportData.energyInsights}</p>
+            </div>
+
+            <div className="recommendations-section">
+              <h4>Recommendations</h4>
+              <ul>
+                {reportData.recommendations
+                  .split("\n")
+                  .map((recommendation, index) => (
+                    <li key={index}>{recommendation}</li>
+                  ))}
+              </ul>
+            </div>
 
+            <div className="centering-button">
               <button className="download-button">Download Plan Report</button>
-              </div>
             </div>
-          )
-        )}
-      </div>
-    </>
+          </div>
+        )
+      )}
+    </div>
   );
 };
 
diff --git a/amp-client/src/Pages/ClientPages/ClientProfile/ClientProfile.jsx b/amp-client/src/Pages/ClientPages/ClientProfile/ClientProfile.jsx
index aa8f694a..4681a10c 100644
--- a/amp-client/src/Pages/ClientPages/ClientProfile/ClientProfile.jsx
+++ b/amp-client/src/Pages/ClientPages/ClientProfile/ClientProfile.jsx
@@ -1,18 +1,17 @@
 import "./styles.css";
 import { useState } from "react";
 import { toast } from "react-toastify";
-import { useNavigate } from "react-router-dom";
 import "react-toastify/dist/ReactToastify.css";
-import axiosBaseUrl from "../../../Axios/axios";
 import InputField from "../../../Components/CommonComponents/InputField/InputField";
 import ActionButton from "../../../Components/CommonComponents/ActionButton/ActionButton";
+import ClientProfileService from "../Services/ClientProfileService/ClientProfileService";
 
 const ClientProfile = () => {
   const [currentPassword, setCurrentPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
 
-  const navigate = useNavigate();
+  const { updatePassword } = ClientProfileService();
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -22,22 +21,7 @@ const ClientProfile = () => {
       return;
     }
 
-    const password = newPassword;
-
-    try {
-      const response = await axiosBaseUrl.post("/clients/editProfile", {
-        password,
-      });
-
-      if (response.data.success) {
-        toast.success("Password updated successfully.");
-        setTimeout(() => navigate("/client/dashboard"), 1000);
-      } else {
-        toast.error(response.data.message || "Failed to update password.");
-      }
-    } catch (error) {
-      toast.error("An error occurred. Please try again.");
-    }
+    await updatePassword({ password: newPassword });
   };
 
   return (
diff --git a/amp-client/src/Pages/ClientPages/Services/ClientDashboardService/ClientDashboardService.js b/amp-client/src/Pages/ClientPages/Services/ClientDashboardService/ClientDashboardService.js
new file mode 100644
index 00000000..73ea0090
--- /dev/null
+++ b/amp-client/src/Pages/ClientPages/Services/ClientDashboardService/ClientDashboardService.js
@@ -0,0 +1,15 @@
+// ClientDashboardService.js
+import axiosInstance from "../../../../Axios/axios";
+
+const ClientDashboardService = {
+  async fetchClientDashboardData(userId) {
+    try {
+      const response = await axiosInstance.get(`/clients/clientDashboardData/${userId}`);
+      return response.data.data;
+    } catch (error) {
+      throw new Error(error.response?.data?.message || error.message);
+    }
+  },
+};
+
+export default ClientDashboardService;
diff --git a/amp-client/src/Pages/ClientPages/Services/ClientPowerPlanService/ClientPowerPlanService.js b/amp-client/src/Pages/ClientPages/Services/ClientPowerPlanService/ClientPowerPlanService.js
new file mode 100644
index 00000000..572d3b5f
--- /dev/null
+++ b/amp-client/src/Pages/ClientPages/Services/ClientPowerPlanService/ClientPowerPlanService.js
@@ -0,0 +1,29 @@
+import { useDispatch } from "react-redux";
+import { toggleLoad } from "../../../../Redux/Slices/loadingSlice";
+import axiosInstance from "../../../../Axios/axios";
+
+const ClientPowerPlanService = () => {
+  const dispatch = useDispatch();
+
+  const fetchPowerPlanReport = async (userId, setReportData) => {
+    dispatch(toggleLoad(true));
+    setReportData(null);
+
+    try {
+      const response = await axiosInstance.get(
+        `clients/clientReport/${userId}`
+      );
+      const data = response.data;
+      setReportData(data.data);
+    } catch (error) {
+      console.error("Error fetching power plan report:", error);
+      setReportData(null);
+    } finally {
+      dispatch(toggleLoad(false));
+    }
+  };
+
+  return { fetchPowerPlanReport };
+};
+
+export default ClientPowerPlanService;
diff --git a/amp-client/src/Pages/ClientPages/Services/ClientProfileService/ClientProfileService.js b/amp-client/src/Pages/ClientPages/Services/ClientProfileService/ClientProfileService.js
new file mode 100644
index 00000000..a5ab912d
--- /dev/null
+++ b/amp-client/src/Pages/ClientPages/Services/ClientProfileService/ClientProfileService.js
@@ -0,0 +1,28 @@
+import { toast } from "react-toastify";
+import { useNavigate } from "react-router-dom";
+import axiosInstance from "../../../../Axios/axios";
+
+const ClientProfileService = () => {
+  const navigate = useNavigate();
+
+  const updatePassword = async ({ password }) => {
+    try {
+      const response = await axiosInstance.post("/clients/editProfile", {
+        password,
+      });
+
+      if (response.data.success) {
+        toast.success("Password updated successfully.");
+        setTimeout(() => navigate("/client/dashboard"), 1000);
+      } else {
+        toast.error(response.data.message || "Failed to update password.");
+      }
+    } catch (error) {
+      toast.error("An error occurred. Please try again.");
+    }
+  };
+
+  return { updatePassword };
+};
+
+export default ClientProfileService;
diff --git a/amp-client/src/Pages/ProviderPages/ProviderDashboard/ProviderDashboard.jsx b/amp-client/src/Pages/ProviderPages/ProviderDashboard/ProviderDashboard.jsx
index 71d2e650..4b227bd5 100644
--- a/amp-client/src/Pages/ProviderPages/ProviderDashboard/ProviderDashboard.jsx
+++ b/amp-client/src/Pages/ProviderPages/ProviderDashboard/ProviderDashboard.jsx
@@ -1,8 +1,8 @@
 import "./styles.css";
-import axiosBaseUrl from "../../../Axios/axios";
 import { useEffect, useState, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { toggleLoad } from "../../../Redux/Slices/loadingSlice";
+import ProviderDashboardService from "../Services/ProviderDashboardService/ProviderDashboardService";
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -41,112 +41,60 @@ ChartJS.register(
 const ProviderDashboard = () => {
   const userId = useSelector((state) => state.user.id);
   const dispatch = useDispatch();
-  const [overviewData, setOverviewData] = useState(null);
-  const [powerUsageByClient, setPowerUsageByClient] = useState([]);
-  const [voltageDistribution, setVoltageDistribution] = useState([]);
-  const [metricsSummary, setMetricsSummary] = useState(null);
-  const [totalPowerUsage, setTotalPowerUsage] = useState([]);
-  const [averageVoltage, setAverageVoltage] = useState([]);
-  const [totalUsers, setTotalUsers] = useState(null);
-  const [allMetrics, setAllMetrics] = useState([]);
-  const [totalLines, setTotalLines] = useState(null);
+
+  // State declarations
+  const [dashboardData, setDashboardData] = useState({
+    overviewData: null,
+    powerUsageByClient: [],
+    voltageDistribution: [],
+    metricsSummary: null,
+    totalPowerUsage: [],
+    averageVoltage: [],
+    totalUsers: null,
+    allMetrics: [],
+    totalLines: null,
+  });
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
 
-  const powerByClientChartRef = useRef(null);
-  const voltageDistributionChartRef = useRef(null);
-  const metricsSummaryChartRef = useRef(null);
-  const clientCountChartRef = useRef(null);
-  const totalPowerUsageChartRef = useRef(null);
-  const averageVoltageChartRef = useRef(null);
+  // Destructure data from state for easier access
+  const {
+    overviewData,
+    powerUsageByClient,
+    voltageDistribution,
+    metricsSummary,
+    totalPowerUsage,
+    averageVoltage,
+    totalUsers,
+    allMetrics,
+    totalLines,
+  } = dashboardData;
+
+  // Chart refs for cleanup
+  const chartRefs = {
+    powerByClientChart: useRef(null),
+    voltageDistributionChart: useRef(null),
+    metricsSummaryChart: useRef(null),
+    clientCountChart: useRef(null),
+    totalPowerUsageChart: useRef(null),
+    averageVoltageChart: useRef(null),
+  };
 
+  // Fetch data on component mount
   useEffect(() => {
     const fetchDashboardData = async () => {
       dispatch(toggleLoad(true));
       setLoading(true);
       setError(null);
-      try {
-        const overviewResponse = await axiosBaseUrl.get(
-          `/providers/overview/${userId}`
-        );
-        setOverviewData(overviewResponse.data.data);
 
-        const powerByClientResponse = await axiosBaseUrl.get(
-          `/providers/powerUsageByClient/${userId}`
-        );
-        setPowerUsageByClient(powerByClientResponse.data.data);
-
-        const voltageDistributionResponse = await axiosBaseUrl.get(
-          `/providers/voltageDistribution/${userId}`
-        );
-        const voltageData = voltageDistributionResponse.data.data.map(
-          (v) => v.voltage
-        );
-        const voltageCounts = {};
-        voltageData.forEach((v) => {
-          const roundedVoltage = Math.round(v);
-          voltageCounts[roundedVoltage] =
-            (voltageCounts[roundedVoltage] || 0) + 1;
-        });
-        setVoltageDistribution(
-          Object.entries(voltageCounts).sort(
-            (a, b) => parseInt(a[0]) - parseInt(b[0])
-          )
-        );
-
-        const metricsSummaryResponse = await axiosBaseUrl.get(
-          `/providers/metricsSummary/${userId}`
-        );
-        setMetricsSummary(metricsSummaryResponse.data.data);
-
-        const totalPowerUsageResponse = await axiosBaseUrl.get(
-          `/providers/totalPowerUsage/${userId}`
-        );
-        const totalPowerUsageArray = Object.entries(
-          totalPowerUsageResponse.data.data
-        ).map(([date, power]) => ({
-          timestamp: new Date(date).toISOString(),
-          total_power: power,
-        }));
-        setTotalPowerUsage(totalPowerUsageArray);
-
-        const averageVoltageResponse = await axiosBaseUrl.get(
-          `/providers/averageVoltage/${userId}`
-        );
-        const averageVoltageArray = Object.entries(
-          averageVoltageResponse.data.data
-        ).map(([date, voltage]) => ({
-          timestamp: new Date(date).toISOString(),
-          average_voltage: voltage,
-        }));
-        setAverageVoltage(averageVoltageArray);
-
-        const usersResponse = await axiosBaseUrl.get(
-          `/providers/getAllUsers/${userId}`
-        );
-        setTotalUsers(usersResponse?.data?.data?.length);
-
-        const allMetricsResponse = await axiosBaseUrl.get(
-          `/providers/getAllMetrics/${userId}`
-        );
-        setAllMetrics(
-          Array.isArray(allMetricsResponse?.data?.data)
-            ? allMetricsResponse.data.data
-            : []
-        );
-
-        const linesResponse = await axiosBaseUrl.get(
-          `/providers/getAllLines/${userId}`
+      try {
+        const data = await ProviderDashboardService.fetchAllDashboardData(
+          userId
         );
-        setTotalLines(linesResponse?.data?.data?.length);
+        setDashboardData(data);
       } catch (err) {
-        if (err.code === "ECONNABORTED") {
-          setError("Request timed out. Please try again.");
-        } else {
-          setError(err.message || "Failed to fetch dashboard data for charts");
-        }
-        // setError(err.message || "Failed to fetch dashboard data for charts");
-        console.error("Error fetching dashboard data for charts:", err);
+        setError(err.message || "Failed to fetch dashboard data");
+        console.error("Error fetching dashboard data:", err);
       } finally {
         setLoading(false);
         dispatch(toggleLoad(false));
@@ -155,334 +103,320 @@ const ProviderDashboard = () => {
 
     fetchDashboardData();
 
+    // Cleanup function for chart instances
     return () => {
-      if (powerByClientChartRef.current) {
-        powerByClientChartRef.current.destroy();
-      }
-      if (voltageDistributionChartRef.current) {
-        voltageDistributionChartRef.current.destroy();
-      }
-      if (metricsSummaryChartRef.current) {
-        metricsSummaryChartRef.current.destroy();
-      }
-      if (clientCountChartRef.current) {
-        clientCountChartRef.current.destroy();
-      }
-      if (totalPowerUsageChartRef.current) {
-        totalPowerUsageChartRef.current.destroy();
-      }
-      if (averageVoltageChartRef.current) {
-        averageVoltageChartRef.current.destroy();
-      }
+      Object.values(chartRefs).forEach((ref) => {
+        if (ref.current) {
+          ref.current.destroy();
+        }
+      });
     };
   }, [userId, dispatch]);
 
-  const chartOptions = {
-    responsive: true,
-    maintainAspectRatio: true,
-    plugins: {
-      legend: {
-        position: "bottom",
-      },
-      title: {
-        display: true,
-        text: "Chart",
-        font: {
-          size: 14,
+  // Chart configuration objects
+  const chartConfigs = {
+    standard: {
+      responsive: true,
+      maintainAspectRatio: true,
+      plugins: {
+        legend: { position: "bottom" },
+        title: {
+          display: true,
+          text: "Chart",
+          font: { size: 14 },
         },
       },
-    },
-    scales: {
-      y: {
-        beginAtZero: true,
+      scales: {
+        y: { beginAtZero: true },
       },
     },
-  };
 
-  const voltageLineChartOptions = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        position: "bottom",
-      },
-      title: {
-        display: true,
-        font: {
-          size: 14,
+    voltage: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: { position: "bottom" },
+        title: {
+          display: true,
+          font: { size: 14 },
         },
       },
-    },
-    scales: {
-      y: {
-        beginAtZero: true,
-        min: 200,
-        max: 250,
+      scales: {
+        y: {
+          beginAtZero: true,
+          min: 200,
+          max: 250,
+        },
       },
     },
-  };
 
-  const lineChartOptions = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        position: "bottom",
-      },
-      title: {
-        display: true,
-        font: {
-          size: 14,
+    line: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: { position: "bottom" },
+        title: {
+          display: true,
+          font: { size: 14 },
         },
       },
-    },
-    scales: {
-      y: {
-        beginAtZero: true,
-        // min: 100,
+      scales: {
+        y: { beginAtZero: true },
       },
     },
   };
 
-  const powerByClientData = {
-    labels: powerUsageByClient.map((client) => client.client_name),
-    datasets: [
-      {
-        label: "Power Usage (kWh)",
-        data: powerUsageByClient.map((client) => client.total_power),
-        backgroundColor: [
-          "rgba(255, 99, 132, 0.6)",
-          "rgba(54, 162, 235, 0.6)",
-          "rgba(255, 206, 86, 0.6)",
-          "rgba(75, 192, 192, 0.6)",
-          "rgba(153, 102, 255, 0.6)",
-          "rgba(255, 159, 64, 0.6)",
-        ],
-        borderColor: [
-          "rgba(255, 99, 132, 1)",
-          "rgba(54, 162, 235, 1)",
-          "rgba(255, 206, 86, 1)",
-          "rgba(75, 192, 192, 1)",
-          "rgba(153, 102, 255, 1)",
-          "rgba(255, 159, 64, 1)",
-        ],
-        borderWidth: 1,
-      },
-    ],
-  };
+  // Chart data preparation
+  const chartData = {
+    powerByClient: {
+      labels: powerUsageByClient.map((client) => client.client_name),
+      datasets: [
+        {
+          label: "Power Usage (kWh)",
+          data: powerUsageByClient.map((client) => client.total_power),
+          backgroundColor: [
+            "rgba(255, 99, 132, 0.6)",
+            "rgba(54, 162, 235, 0.6)",
+            "rgba(255, 206, 86, 0.6)",
+            "rgba(75, 192, 192, 0.6)",
+            "rgba(153, 102, 255, 0.6)",
+            "rgba(255, 159, 64, 0.6)",
+          ],
+          borderColor: [
+            "rgba(255, 99, 132, 1)",
+            "rgba(54, 162, 235, 1)",
+            "rgba(255, 206, 86, 1)",
+            "rgba(75, 192, 192, 1)",
+            "rgba(153, 102, 255, 1)",
+            "rgba(255, 159, 64, 1)",
+          ],
+          borderWidth: 1,
+        },
+      ],
+    },
 
-  const voltageDistributionData = {
-    labels: voltageDistribution.map((v) => v[0]),
-    datasets: [
-      {
-        label: "Frequency",
-        data: voltageDistribution.map((v) => v[1]),
-        backgroundColor: "rgba(3, 60, 173, 0.8)",
-        borderColor: "rgb(201, 203, 207)",
-        borderWidth: 1,
-      },
-    ],
-  };
+    voltageDistribution: {
+      labels: voltageDistribution.map((v) => v[0]),
+      datasets: [
+        {
+          label: "Frequency",
+          data: voltageDistribution.map((v) => v[1]),
+          backgroundColor: "rgba(3, 60, 173, 0.8)",
+          borderColor: "rgb(201, 203, 207)",
+          borderWidth: 1,
+        },
+      ],
+    },
 
-  const metricsSummaryPieData = {
-    labels: [
-      "Min Power",
-      "Max Power",
-      "Avg Power",
-      "Min Voltage",
-      "Max Voltage",
-      "Avg Voltage",
-    ],
-    datasets: [
-      {
-        label: "Metrics",
-        data: [
-          metricsSummary?.minPower,
-          metricsSummary?.maxPower,
-          metricsSummary?.avgPower,
-          metricsSummary?.minVoltage,
-          metricsSummary?.maxVoltage,
-          metricsSummary?.avgVoltage,
-        ],
-        backgroundColor: [
-          "rgba(255, 99, 132, 0.7)",
-          "rgba(54, 162, 235, 0.7)",
-          "rgba(255, 206, 86, 0.7)",
-          "rgba(75, 192, 192, 0.7)",
-          "rgba(153, 102, 255, 0.7)",
-          "rgba(255, 159, 64, 0.7)",
-        ],
-        borderColor: [
-          "rgba(255, 99, 132, 1)",
-          "rgba(54, 162, 235, 1)",
-          "rgba(255, 206, 86, 1)",
-          "rgba(75, 192, 192, 1)",
-          "rgba(153, 102, 255, 1)",
-          "rgba(255, 159, 64, 1)",
-        ],
-        borderWidth: 1,
-      },
-    ],
-  };
+    metricsSummary: {
+      labels: [
+        "Min Power",
+        "Max Power",
+        "Avg Power",
+        "Min Voltage",
+        "Max Voltage",
+        "Avg Voltage",
+      ],
+      datasets: [
+        {
+          label: "Metrics",
+          data: [
+            metricsSummary?.minPower,
+            metricsSummary?.maxPower,
+            metricsSummary?.avgPower,
+            metricsSummary?.minVoltage,
+            metricsSummary?.maxVoltage,
+            metricsSummary?.avgVoltage,
+          ],
+          backgroundColor: [
+            "rgba(255, 99, 132, 0.7)",
+            "rgba(54, 162, 235, 0.7)",
+            "rgba(255, 206, 86, 0.7)",
+            "rgba(75, 192, 192, 0.7)",
+            "rgba(153, 102, 255, 0.7)",
+            "rgba(255, 159, 64, 0.7)",
+          ],
+          borderColor: [
+            "rgba(255, 99, 132, 1)",
+            "rgba(54, 162, 235, 1)",
+            "rgba(255, 206, 86, 1)",
+            "rgba(75, 192, 192, 1)",
+            "rgba(153, 102, 255, 1)",
+            "rgba(255, 159, 64, 1)",
+          ],
+          borderWidth: 1,
+        },
+      ],
+    },
 
-  const clientCountData = {
-    labels: ["Total Clients"],
-    datasets: [
-      {
-        label: "Number of Clients",
-        data: [overviewData?.totalClients || 0],
-        backgroundColor: ["rgba(99, 255, 132, 0.7)"],
-        borderColor: ["rgba(99, 255, 132, 1)"],
-        borderWidth: 1,
-      },
-    ],
-  };
+    clientCount: {
+      labels: ["Total Clients"],
+      datasets: [
+        {
+          label: "Number of Clients",
+          data: [overviewData?.totalClients || 0],
+          backgroundColor: ["rgba(99, 255, 132, 0.7)"],
+          borderColor: ["rgba(99, 255, 132, 1)"],
+          borderWidth: 1,
+        },
+      ],
+    },
 
-  const totalPowerUsageData = {
-    labels: Array.isArray(totalPowerUsage)
-      ? totalPowerUsage.map((item) =>
-          item.timestamp
-            ? new Date(item.timestamp).toLocaleDateString()
-            : "Invalid"
-        )
-      : [],
-    datasets: [
-      {
-        label: "Total Power Usage (kWh)",
-        data: Array.isArray(totalPowerUsage)
-          ? totalPowerUsage.map((item) => item.total_power)
-          : [],
-        fill: false,
-        backgroundColor: "rgba(75, 192, 192, 0.6)",
-        borderColor: "rgba(75, 192, 192, 1)",
-        tension: 0.1,
-      },
-    ],
+    totalPowerUsage: {
+      labels: totalPowerUsage.map((item) =>
+        new Date(item.timestamp).toLocaleDateString()
+      ),
+      datasets: [
+        {
+          label: "Total Power Usage (kWh)",
+          data: totalPowerUsage.map((item) => item.total_power),
+          fill: false,
+          backgroundColor: "rgba(75, 192, 192, 0.6)",
+          borderColor: "rgba(75, 192, 192, 1)",
+          tension: 0.1,
+        },
+      ],
+    },
+
+    averageVoltage: {
+      labels: averageVoltage.map((item) =>
+        new Date(item.timestamp).toLocaleDateString()
+      ),
+      datasets: [
+        {
+          label: "Average Voltage (V)",
+          data: averageVoltage.map((item) => item.average_voltage),
+          fill: false,
+          backgroundColor: "rgba(255, 159, 64, 0.6)",
+          borderColor: "rgba(255, 159, 64, 1)",
+          tension: 0.1,
+        },
+      ],
+    },
   };
 
-  const averageVoltageData = {
-    labels: Array.isArray(averageVoltage)
-      ? averageVoltage.map((item) =>
-          new Date(item.timestamp).toLocaleDateString()
-        )
-      : [],
-    datasets: [
-      {
-        label: "Average Voltage (V)",
-        data: Array.isArray(averageVoltage)
-          ? averageVoltage.map((item) => item.average_voltage)
-          : [],
-        fill: false,
-        backgroundColor: "rgba(255, 159, 64, 0.6)",
-        borderColor: "rgba(255, 159, 64, 1)",
-        tension: 0.1,
-      },
-    ],
+  // Helper function to check if data is available
+  const hasData = (data) => {
+    if (Array.isArray(data)) {
+      return data.length > 0;
+    }
+    return data !== null && data !== undefined;
   };
 
   return (
     <div className="provider-dashboard-container">
       <div className="main-content">
-        <h2 className="main-content-title section-titles">Dashboard</h2>
+        <h2 className="main-content-title section-titles un-centered">Dashboard</h2>
+
+        {/* Loading state */}
         {loading && (
           <div className="spinner-container">
             <div className="spinner"></div>
             <p>Loading dashboard data...</p>
           </div>
         )}
+
+        {/* Error state */}
         {error && (
           <div className="error-message">
             Error loading dashboard data: {error}
           </div>
         )}
+
+        {/* Dashboard content */}
         {!loading && !error && (
           <div className="charts-row">
+            {/* Power Usage By Client Chart */}
             <div className="chart-widget">
               <h3>Client Power Usage Distribution</h3>
-              {powerUsageByClient.length > 0 ? (
+              {hasData(powerUsageByClient) ? (
                 <Bar
                   key="powerByClientChart"
-                  data={powerByClientData}
-                  options={lineChartOptions}
-                  ref={powerByClientChartRef}
+                  data={chartData.powerByClient}
+                  options={chartConfigs.line}
+                  ref={chartRefs.powerByClientChart}
                 />
               ) : (
                 <p>No power usage data available for clients this month.</p>
               )}
             </div>
 
+            {/* Voltage Distribution Chart */}
             <div className="chart-widget voltage-distribution-widget">
               <h3>Voltage Frequency Distribution</h3>
-              {voltageDistribution.length > 0 ? (
+              {hasData(voltageDistribution) ? (
                 <Line
                   key="voltageDistributionChart"
-                  data={voltageDistributionData}
-                  options={lineChartOptions}
-                  // options={chartOptions}
-                  ref={voltageDistributionChartRef}
+                  data={chartData.voltageDistribution}
+                  options={chartConfigs.line}
+                  ref={chartRefs.voltageDistributionChart}
                 />
               ) : (
                 <p>No voltage distribution data available.</p>
               )}
             </div>
 
+            {/* Metrics Summary Chart */}
             <div className="chart-widget">
               <h3>Key Metrics Snapshot</h3>
-              {metricsSummary ? (
+              {hasData(metricsSummary) ? (
                 <Doughnut
                   key="metricsSummaryChart"
-                  data={metricsSummaryPieData}
-                  options={chartOptions}
-                  ref={metricsSummaryChartRef}
+                  data={chartData.metricsSummary}
+                  options={chartConfigs.standard}
+                  ref={chartRefs.metricsSummaryChart}
                 />
               ) : (
                 <p>No metrics summary data available.</p>
               )}
             </div>
 
+            {/* Client Count Chart */}
             <div className="chart-widget">
               <h3>Total Client Count</h3>
-              {overviewData ? (
+              {hasData(overviewData) ? (
                 <Pie
                   key="clientCountChart"
-                  data={clientCountData}
-                  options={chartOptions}
-                  ref={clientCountChartRef}
+                  data={chartData.clientCount}
+                  options={chartConfigs.standard}
+                  ref={chartRefs.clientCountChart}
                 />
               ) : (
                 <p>No overview data available to display client count.</p>
               )}
             </div>
 
+            {/* Total Power Usage Chart */}
             <div className="chart-widget">
               <h3>Total Power Usage Over Time</h3>
-              {totalPowerUsage !== null && totalPowerUsage !== undefined ? (
+              {hasData(totalPowerUsage) ? (
                 <Line
                   key="totalPowerUsageChart"
-                  data={totalPowerUsageData}
-                  options={lineChartOptions}
-                  ref={totalPowerUsageChartRef}
+                  data={chartData.totalPowerUsage}
+                  options={chartConfigs.line}
+                  ref={chartRefs.totalPowerUsageChart}
                 />
               ) : (
                 <p>No total power usage data available.</p>
               )}
             </div>
 
+            {/* Average Voltage Chart */}
             <div className="chart-widget">
               <h3>Average Voltage Over Time</h3>
-              {averageVoltage !== null && averageVoltage !== undefined ? (
+              {hasData(averageVoltage) ? (
                 <Line
                   key="averageVoltageChart"
-                  data={averageVoltageData}
-                  options={voltageLineChartOptions}
-                  // options={chartOptions}
-                  ref={averageVoltageChartRef}
+                  data={chartData.averageVoltage}
+                  options={chartConfigs.voltage}
+                  ref={chartRefs.averageVoltageChart}
                 />
               ) : (
                 <p>No average voltage data available.</p>
               )}
             </div>
 
+            {/* Metric Cards */}
             <div className="metric-card">
               <h3>Total Users</h3>
               <p className="metric-value">
@@ -497,9 +431,10 @@ const ProviderDashboard = () => {
               </p>
             </div>
 
+            {/* All Metrics Table */}
             <div className="chart-widget all-metrics-widget">
               <h3>All Metrics</h3>
-              {allMetrics && Object.keys(allMetrics).length > 0 ? (
+              {hasData(allMetrics) ? (
                 <div className="scrollable-table">
                   <table>
                     <thead>
diff --git a/amp-client/src/Pages/ProviderPages/ProviderDashboard/styles.css b/amp-client/src/Pages/ProviderPages/ProviderDashboard/styles.css
index cf34789a..e6ddc0fb 100644
--- a/amp-client/src/Pages/ProviderPages/ProviderDashboard/styles.css
+++ b/amp-client/src/Pages/ProviderPages/ProviderDashboard/styles.css
@@ -6,6 +6,10 @@
   margin-right: 15px;
 }
 
+.un-centered {
+  text-align: left;
+}
+
 .spinner-container {
   display: flex;
   flex-direction: column;
diff --git a/amp-client/src/Pages/ProviderPages/ProviderPowerPrediction/ProviderPowerPrediction.jsx b/amp-client/src/Pages/ProviderPages/ProviderPowerPrediction/ProviderPowerPrediction.jsx
index 4bafcda1..b5e0845e 100644
--- a/amp-client/src/Pages/ProviderPages/ProviderPowerPrediction/ProviderPowerPrediction.jsx
+++ b/amp-client/src/Pages/ProviderPages/ProviderPowerPrediction/ProviderPowerPrediction.jsx
@@ -1,8 +1,8 @@
 import "./styles.css";
 import { useState } from "react";
-import axiosBaseUrl from "../../../Axios/axios";
 import { useDispatch, useSelector } from "react-redux";
 import { toggleLoad } from "../../../Redux/Slices/loadingSlice";
+import ProviderPowerPredictionService from "../Services/ProviderPowerPredictionService/ProviderPowerPredictionService";
 
 const ProviderPowerPrediction = () => {
   const [predictionData, setPredictionData] = useState(null);
@@ -14,11 +14,10 @@ const ProviderPowerPrediction = () => {
     setPredictionData(null);
 
     try {
-      const response = await axiosBaseUrl.get("/providers/providerReport");
-      const data = response.data;
-      setPredictionData(data.data);
+      const data = await ProviderPowerPredictionService.fetchPowerPrediction();
+      setPredictionData(data);
     } catch (error) {
-      console.error("Error fetching power prediction:", error);
+      console.error("Error fetching power prediction:", error.message);
       setPredictionData(null);
     } finally {
       dispatch(toggleLoad(false));
@@ -27,9 +26,6 @@ const ProviderPowerPrediction = () => {
 
   return (
     <div className="provider-power-prediction-container">
-      {/* <div className="fixing">
-
-      </div> */}
       <div className="main-content">
         <h1 className="main-content-title section-titles">Power Prediction</h1>
 
@@ -83,8 +79,8 @@ const ProviderPowerPrediction = () => {
                   <ul>
                     {predictionData.recommendations
                       .split("\n")
-                      .map((recommendation, index) => (
-                        <li key={index}>{recommendation}</li>
+                      .map((rec, idx) => (
+                        <li key={idx}>{rec}</li>
                       ))}
                   </ul>
                 </div>
diff --git a/amp-client/src/Pages/ProviderPages/Services/ProviderDashboardService/ProviderDashboardService.js b/amp-client/src/Pages/ProviderPages/Services/ProviderDashboardService/ProviderDashboardService.js
new file mode 100644
index 00000000..97032e3d
--- /dev/null
+++ b/amp-client/src/Pages/ProviderPages/Services/ProviderDashboardService/ProviderDashboardService.js
@@ -0,0 +1,178 @@
+import axiosInstance from "../../../../Axios/axios";
+
+const ProviderDashboardService = {
+  getOverviewData: async (userId) => {
+    try {
+      const response = await axiosInstance.get(`/providers/overview/${userId}`);
+      return response.data.data;
+    } catch (error) {
+      throw ProviderDashboardService.formatError(error, "overview data");
+    }
+  },
+
+  getPowerUsageByClient: async (userId) => {
+    try {
+      const response = await axiosInstance.get(
+        `/providers/powerUsageByClient/${userId}`
+      );
+      return response.data.data;
+    } catch (error) {
+      throw ProviderDashboardService.formatError(
+        error,
+        "power usage by client"
+      );
+    }
+  },
+
+  getVoltageDistribution: async (userId) => {
+    try {
+      const response = await axiosInstance.get(
+        `/providers/voltageDistribution/${userId}`
+      );
+      const voltageData = response.data.data.map((v) => v.voltage);
+
+      // Process voltage data into frequency distribution
+      const voltageCounts = {};
+      voltageData.forEach((v) => {
+        const roundedVoltage = Math.round(v);
+        voltageCounts[roundedVoltage] =
+          (voltageCounts[roundedVoltage] || 0) + 1;
+      });
+
+      // Sort by voltage value (ascending)
+      return Object.entries(voltageCounts).sort(
+        (a, b) => parseInt(a[0]) - parseInt(b[0])
+      );
+    } catch (error) {
+      throw ProviderDashboardService.formatError(error, "voltage distribution");
+    }
+  },
+
+  getMetricsSummary: async (userId) => {
+    try {
+      const response = await axiosInstance.get(
+        `/providers/metricsSummary/${userId}`
+      );
+      return response.data.data;
+    } catch (error) {
+      throw ProviderDashboardService.formatError(error, "metrics summary");
+    }
+  },
+
+  getTotalPowerUsage: async (userId) => {
+    try {
+      const response = await axiosInstance.get(
+        `/providers/totalPowerUsage/${userId}`
+      );
+      return Object.entries(response.data.data).map(([date, power]) => ({
+        timestamp: new Date(date).toISOString(),
+        total_power: power,
+      }));
+    } catch (error) {
+      throw ProviderDashboardService.formatError(error, "total power usage");
+    }
+  },
+
+  getAverageVoltage: async (userId) => {
+    try {
+      const response = await axiosInstance.get(
+        `/providers/averageVoltage/${userId}`
+      );
+      return Object.entries(response.data.data).map(([date, voltage]) => ({
+        timestamp: new Date(date).toISOString(),
+        average_voltage: voltage,
+      }));
+    } catch (error) {
+      throw ProviderDashboardService.formatError(error, "average voltage");
+    }
+  },
+
+  getTotalUsers: async (userId) => {
+    try {
+      const response = await axiosInstance.get(
+        `/providers/getAllUsers/${userId}`
+      );
+      return response?.data?.data?.length || 0;
+    } catch (error) {
+      throw ProviderDashboardService.formatError(error, "total users");
+    }
+  },
+
+  getAllMetrics: async (userId) => {
+    try {
+      const response = await axiosInstance.get(
+        `/providers/getAllMetrics/${userId}`
+      );
+      return Array.isArray(response?.data?.data) ? response.data.data : [];
+    } catch (error) {
+      throw ProviderDashboardService.formatError(error, "all metrics");
+    }
+  },
+
+  getTotalLines: async (userId) => {
+    try {
+      const response = await axiosInstance.get(
+        `/providers/getAllLines/${userId}`
+      );
+      return response?.data?.data?.length || 0;
+    } catch (error) {
+      throw ProviderDashboardService.formatError(error, "total lines");
+    }
+  },
+
+  formatError: (error, dataType) => {
+    let errorMessage = `Failed to fetch ${dataType}`;
+
+    if (error.code === "ECONNABORTED") {
+      errorMessage = `Request for ${dataType} timed out. Please try again.`;
+    } else if (error.response) {
+      errorMessage = `Server error (${error.response.status}) while fetching ${dataType}`;
+    }
+
+    const formattedError = new Error(errorMessage);
+    formattedError.originalError = error;
+    return formattedError;
+  },
+
+  fetchAllDashboardData: async (userId) => {
+    try {
+      const [
+        overviewData,
+        powerUsageByClient,
+        voltageDistribution,
+        metricsSummary,
+        totalPowerUsage,
+        averageVoltage,
+        totalUsers,
+        allMetrics,
+        totalLines,
+      ] = await Promise.all([
+        ProviderDashboardService.getOverviewData(userId),
+        ProviderDashboardService.getPowerUsageByClient(userId),
+        ProviderDashboardService.getVoltageDistribution(userId),
+        ProviderDashboardService.getMetricsSummary(userId),
+        ProviderDashboardService.getTotalPowerUsage(userId),
+        ProviderDashboardService.getAverageVoltage(userId),
+        ProviderDashboardService.getTotalUsers(userId),
+        ProviderDashboardService.getAllMetrics(userId),
+        ProviderDashboardService.getTotalLines(userId),
+      ]);
+
+      return {
+        overviewData,
+        powerUsageByClient,
+        voltageDistribution,
+        metricsSummary,
+        totalPowerUsage,
+        averageVoltage,
+        totalUsers,
+        allMetrics,
+        totalLines,
+      };
+    } catch (error) {
+      throw error;
+    }
+  },
+};
+
+export default ProviderDashboardService;
diff --git a/amp-client/src/Pages/ProviderPages/Services/ProviderPowerPredictionService/ProviderPowerPredictionService.js b/amp-client/src/Pages/ProviderPages/Services/ProviderPowerPredictionService/ProviderPowerPredictionService.js
new file mode 100644
index 00000000..6685ed0f
--- /dev/null
+++ b/amp-client/src/Pages/ProviderPages/Services/ProviderPowerPredictionService/ProviderPowerPredictionService.js
@@ -0,0 +1,15 @@
+// ProviderPowerPredictionService.js
+import axiosInstance from "../../../../Axios/axios";
+
+const ProviderPowerPredictionService = {
+  async fetchPowerPrediction() {
+    try {
+      const response = await axiosInstance.get("/providers/providerReport");
+      return response.data.data;
+    } catch (error) {
+      throw new Error(error.response?.data?.message || error.message);
+    }
+  },
+};
+
+export default ProviderPowerPredictionService;
diff --git a/amp-client/src/Pages/ProviderPages/Services/ProviderProfile/ProviderProfile.js b/amp-client/src/Pages/ProviderPages/Services/ProviderProfile/ProviderProfile.js
new file mode 100644
index 00000000..a8045130
--- /dev/null
+++ b/amp-client/src/Pages/ProviderPages/Services/ProviderProfile/ProviderProfile.js
@@ -0,0 +1 @@
+import axiosInstance from "../../../../Axios/axios";
\ No newline at end of file
diff --git a/amp-client/src/Pages/ProviderPages/Services/ProviderUsersService/ProviderUsersService.js b/amp-client/src/Pages/ProviderPages/Services/ProviderUsersService/ProviderUsersService.js
new file mode 100644
index 00000000..a8045130
--- /dev/null
+++ b/amp-client/src/Pages/ProviderPages/Services/ProviderUsersService/ProviderUsersService.js
@@ -0,0 +1 @@
+import axiosInstance from "../../../../Axios/axios";
\ No newline at end of file
diff --git a/amp-laravel/app/Http/Requests/ContactMessageRequest.php b/amp-laravel/app/Http/Requests/ContactMessageRequest.php
index b8fe3386..aaa6b7f1 100644
--- a/amp-laravel/app/Http/Requests/ContactMessageRequest.php
+++ b/amp-laravel/app/Http/Requests/ContactMessageRequest.php
@@ -25,7 +25,7 @@ public function rules(): array
             'name' => 'required|string|max:255',
             'email' => 'required|email|max:255',
             'phone_number' => 'required|string|max:20',
-            'message' => 'sometimes|required|string|max:1000',
+            'message' => 'nullable|string|max:1000',
         ];
     }
 }
diff --git a/amp-laravel/app/Http/Requests/Provider/EditProfileRequest.php b/amp-laravel/app/Http/Requests/Provider/EditProfileRequest.php
index a531c093..4875858d 100644
--- a/amp-laravel/app/Http/Requests/Provider/EditProfileRequest.php
+++ b/amp-laravel/app/Http/Requests/Provider/EditProfileRequest.php
@@ -22,7 +22,6 @@ public function authorize(): bool
     public function rules(): array
     {
         return [
-            'name' => 'sometimes|required|string|max:255',
             'email' => 'sometimes|required|email|max:255',
             'password' => 'sometimes|nullable|string|min:6',
             'phone_number' => 'sometimes|required|string|max:20',
diff --git a/amp-laravel/app/Services/Provider/ProviderEditProfileService.php b/amp-laravel/app/Services/Provider/ProviderEditProfileService.php
index 14c37b6f..b78baeed 100644
--- a/amp-laravel/app/Services/Provider/ProviderEditProfileService.php
+++ b/amp-laravel/app/Services/Provider/ProviderEditProfileService.php
@@ -10,10 +10,6 @@ public static function editProfile(array $data)
     {
         $user = JWTAuth::user();
 
-        if (isset($data['name'])) {
-            $user->name = $data['name'];
-        }
-
         if (isset($data['email'])) {
             $user->email = $data['email'];
         }
diff --git a/amp-laravel/database/migrations/2025_04_28_175033_create_contact_forms_table.php b/amp-laravel/database/migrations/2025_04_28_175033_create_contact_forms_table.php
index a6f7c3f7..1d3c8cb5 100644
--- a/amp-laravel/database/migrations/2025_04_28_175033_create_contact_forms_table.php
+++ b/amp-laravel/database/migrations/2025_04_28_175033_create_contact_forms_table.php
@@ -16,7 +16,7 @@ public function up(): void
             $table->string('name');
             $table->string('email');
             $table->string('phone_number');
-            $table->text('message');
+            $table->text('message')->nullable();
             $table->timestamps();
         });
     }
diff --git a/amp-laravel/routes/api.php b/amp-laravel/routes/api.php
index d762b32c..842dba67 100644
--- a/amp-laravel/routes/api.php
+++ b/amp-laravel/routes/api.php
@@ -58,7 +58,7 @@
     Route::post("/lines", [IotController::class, "masterLines"]);
     
     // Public Route for Contact Message Submission
-    // Route::post("/insertMessage", [AuthController::class, "insertMessage"]);
+    Route::post("/insertMessage", [AuthController::class, "insertMessage"]);
     
     //Unauthenticated Users
     Route::post("/login", [AuthController::class, "login"])->name("login");