diff --git a/src/Config.js b/src/Config.js
new file mode 100644
index 0000000..cd74e7c
--- /dev/null
+++ b/src/Config.js
@@ -0,0 +1,4 @@
+export const baseUrl = process.env.REACT_APP_API_BASE_URL;
+export const apiWeb = process.env.REACT_APP_API_CONTACT;
+export const apiEmail = process.env.REACT_APP_EMAIL_KEY;
+
diff --git a/src/api/posts.js b/src/api/posts.js
index d5dc2a9..d6be352 100644
--- a/src/api/posts.js
+++ b/src/api/posts.js
@@ -1,11 +1,11 @@
 import axios from "axios";
-import Cookies from "js-cookie"; 
+import Cookies from "js-cookie";
+import { baseUrl } from "../Config";
 
-const PostUrl = process.env.REACT_APP_POST_URL;
-const UpdatePost = process.env.REACT_APP_UPDATE_POST;
-const DeletePost = process.env.REACT_APP_POST_DELETE;
-const PostId = process.env.REACT_APP_POST_ID;
 
+export const getTokenFromCookie = () => {
+  return Cookies.get("token") || "";
+};
 
 
 export const getTokenFromCookie = () => {
@@ -14,7 +14,7 @@ export const getTokenFromCookie = () => {
 
 
 export const getPostsRequest = async () =>
-  await axios.get(PostUrl, {});
+  await axios.get(`${baseUrl}/posts`, {});
 
 export const createPostRequest = async (post) => {
   const form = new FormData();
@@ -23,36 +23,40 @@ export const createPostRequest = async (post) => {
     form.append(key, post[key]);
   }
 
-  return await axios.post(PostUrl, form, {
+  return await axios.post(`${baseUrl}/posts`, form, {
     headers: {
       "Content-Type": "multipart/form-data",
-      Authorization: `Bearer ${getTokenFromCookie()}`, 
+      Authorization: `Bearer ${getTokenFromCookie()}`,
+
     },
   });
 };
 
 export const deletePostRequest = async (id) =>
-  await axios.delete(DeletePost + id, {
+
+  await axios.delete(`${baseUrl}/posts/${id}`, {
     headers: {
-      Authorization: `Bearer ${getTokenFromCookie()}`, 
+      Authorization: `Bearer ${getTokenFromCookie()}`,
+
     },
   });
 
 export const getPostRequest = async (id) =>
-  await axios.get(PostId + id);
-
-  export const updatePostRequest = async (id, formData) => {
-    try {
-      const response = await axios.put(`${UpdatePost}/${id}`, formData, {
-        headers: {
-          Authorization: `Bearer ${getTokenFromCookie()}`,
-          'Content-Type': 'multipart/form-data', 
-        },
-      });
-  
-      return response.data;
-    } catch (error) {
-      
-      throw error;
-    }
-  };
\ No newline at end of file
+
+  await axios.get(`${baseUrl}/posts/` + id);
+
+export const updatePostRequest = async (id, formData) => {
+  try {
+    const response = await axios.put(`${baseUrl}/posts/${id}`, formData, {
+      headers: {
+        Authorization: `Bearer ${getTokenFromCookie()}`,
+        "Content-Type": "multipart/form-data",
+      },
+    });
+
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
diff --git a/src/components/Comments.jsx b/src/components/Comments.jsx
index 476b272..c1d1b54 100644
--- a/src/components/Comments.jsx
+++ b/src/components/Comments.jsx
@@ -4,18 +4,26 @@ import axios from "axios";
 import toast from "react-hot-toast";
 import Cookies from "js-cookie";
 
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faTrash,
+  faPenToSquare,
+  faXmark,
+  faCheck,
+} from "@fortawesome/free-solid-svg-icons";
+import { baseUrl } from "../Config";
+
 export const Comment = ({ comment, onDelete, onEdit }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [editedText, setEditedText] = useState(comment.text);
 
   const handleDeleteComment = async () => {
     try {
-      await axios.delete(
-        `http://localhost:4000/api/posts/${comment._id}/comments/`,
-        {
-          withCredentials: true,
-        }
-      );
+
+      await axios.delete(`${baseUrl}/posts/${comment._id}/comments/`, {
+        withCredentials: true,
+      });
+
 
       onDelete(comment._id);
 
@@ -28,7 +36,9 @@ export const Comment = ({ comment, onDelete, onEdit }) => {
   const handleEditComment = async () => {
     try {
       const response = await axios.put(
-        `http://localhost:4000/api/posts/${comment._id}/comments/`,
+
+        `${baseUrl}/posts/${comment._id}/comments/`,
+
         { text: editedText },
         {
           withCredentials: true,
@@ -47,7 +57,9 @@ export const Comment = ({ comment, onDelete, onEdit }) => {
   };
 
   const canEditAndDelete =
-    comment?.commentator?.trim() === Cookies.get("username")?.trim()
+
+    comment?.commentator?.trim() === Cookies.get("username")?.trim();
+
 
   return (
     <div className=" mflex-1 border rounded-lg px-4 py-2 sm:px-6 sm:py-4 leading-relaxed my-2">
@@ -64,34 +76,42 @@ export const Comment = ({ comment, onDelete, onEdit }) => {
                   <>
                     <button
                       type="button"
-                      className="relative inline-flex items-center rounded-l-md bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+
+                      className="mx-1 flex items-center justify-center bg-green-500  rounded-sm hover:rounded-3xl hover:bg-green-600 transition-all duration-300 text-white"
+                      style={{ width: "20px", height: "20px" }}
                       onClick={handleEditComment}
                     >
-                      Save
+                      <FontAwesomeIcon icon={faCheck} />
                     </button>
                     <button
                       type="button"
-                      className="relative inline-flex items-center rounded-l-md bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                      className="flex items-center justify-center bg-red-500  rounded-sm hover:rounded-3xl hover:bg-red-600 transition-all duration-300 text-white"
+                      style={{ width: "20px", height: "20px" }}
                       onClick={() => setIsEditing(false)}
                     >
-                      Cancel
+                      <FontAwesomeIcon icon={faXmark} />
+
                     </button>
                   </>
                 ) : (
                   <>
                     <button
                       type="button"
-                      className="relative inline-flex items-center rounded-l-md bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+
+                      className="mx-1 flex items-center justify-center bg-blue-500  rounded-sm  hover:rounded-3xl hover:bg-blue-600 transition-all duration-300 text-white "
+                      style={{ width: "20px", height: "20px" }}
                       onClick={() => setIsEditing(true)}
                     >
-                      Edit
+                      <FontAwesomeIcon icon={faPenToSquare} />
                     </button>
                     <button
                       type="button"
-                      className="relative inline-flex items-center rounded-l-md bg-white px-2 py-1 text-xs font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                      className="flex items-center justify-center bg-red-500  rounded-sm hover:rounded-3xl hover:bg-red-600 transition-all duration-300 text-white"
+                      style={{ width: "20px", height: "20px" }}
                       onClick={handleDeleteComment}
                     >
-                      Delete
+                      <FontAwesomeIcon icon={faTrash} />
+
                     </button>
                   </>
                 )}
@@ -104,7 +124,13 @@ export const Comment = ({ comment, onDelete, onEdit }) => {
         <textarea
           value={editedText}
           onChange={(e) => setEditedText(e.target.value)}
-          className="text-sm text-gray-600 border p-1 mt-2 w-full"
+
+
+          className="px-3 py-2 border shadow-sm border-gray-300 rounded-md w-full block placeholder:text-gray-400 placeholder-gray-500
+          focus:outline-none focus:ring-1 bg-gray-50 focus:ring-blue-600 focus:border-blue-600 text-sm"
+          style={{ minHeight: "50px", maxHeight: "100px" }}
+
+
         />
       ) : (
         <div className="text-sm text-gray-600">{comment.text}</div>
diff --git a/src/components/ModeratorDropdown.jsx b/src/components/ModeratorDropdown.jsx
new file mode 100644
index 0000000..e7cd19b
--- /dev/null
+++ b/src/components/ModeratorDropdown.jsx
@@ -0,0 +1,129 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faEllipsisVertical,
+  faPenToSquare,
+  faTrash,
+} from "@fortawesome/free-solid-svg-icons";
+import toast from "react-hot-toast";
+import { usePosts } from "../context/postContext";
+import { useNavigate } from "react-router-dom";
+
+export const ModeratorDropdown = ({ postId }) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const { deletePost } = usePosts();
+  const navigate = useNavigate();
+
+  const toggleMenu = () => {
+    setIsMenuOpen((prevIsMenuOpen) => !prevIsMenuOpen);
+  };
+
+  const closeMenu = () => {
+    setIsMenuOpen(false);
+  };
+
+  const handleMenuItemClick = () => {
+    closeMenu();
+  };
+
+  const handleDelete = (id) => {
+    toast(
+      (t) => (
+        <div>
+          <p className="text-white">
+            <b> Do you want to Delete?</b>
+          </p>
+          <div>
+            <button
+              className="bg-red-500 hover:bg-red-400 px-3 py-2 text-sm text-white rounded-sm mx-2"
+              onClick={() => {
+                deletePost(id);
+                toast.dismiss(t.id);
+                toast.success("Post Deleted Successfully");
+              }}
+            >
+              Delete
+            </button>
+
+            <button
+              className="bg-slate-400 hover:bg-slate-500 px-3 py-2 text-white rounded-sm mx-2"
+              onClick={() => {
+                toast.dismiss(t.id);
+                toast(
+                  "Notification: Post deletion cancelled. Your post has been preserved and will not be deleted. Thank you for your understanding and collaboration! ",
+                  {
+                    duration: 6000,
+                    style: {
+                      borderRadius: "10px",
+                      background: "#333",
+                      color: "#fff",
+                    },
+                  }
+                );
+              }}
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      ),
+      {
+        style: {
+          background: "#202020",
+        },
+      }
+    );
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        closeMenu();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="relative z-50" ref={dropdownRef}>
+      <button
+        className="flex items-center p-2 text-sm text-gray-600 bg-white border border-transparent rounded-md focus:ring-opacity-40 dark:focus:ring-opacity-40 focus:ring-blue-300 dark:focus:ring-blue-400 focus:ring dark:text-white dark:bg-gray-800 focus:outline-none"
+        onClick={toggleMenu}
+      >
+        <span className="mx-1 text-sm font-semibold "></span>
+        <FontAwesomeIcon icon={faEllipsisVertical} size="xl" />
+      </button>
+
+      <div
+        className={`absolute right-0 z-20 w-[100px] py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-800${
+          isMenuOpen ? " visible opacity-100" : " invisible opacity-0"
+        }`}
+      >
+        <Link
+          onClick={handleMenuItemClick}
+          className="flex items-center p-3 -mt-2 text-sm text-gray-600 transition-colors duration-200 transform dark:text-gray-300  dark:hover:bg-gray-700 dark:hover:text-white"
+        ></Link>
+        <button
+          className="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300  dark:hover:bg-gray-700 dark:hover:text-white"
+          onClick={() => navigate(`/edit/${postId}`)}
+        >
+          Edit <FontAwesomeIcon icon={faPenToSquare} />
+        </button>
+
+        <button
+          className="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300  dark:hover:bg-gray-700 dark:hover:text-white"
+          onClick={() => handleDelete(postId)}
+        >
+          Delete <FontAwesomeIcon icon={faTrash} />
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/Navbar/Location.jsx b/src/components/Navbar/Location.jsx
index a45f805..6d81b0f 100644
--- a/src/components/Navbar/Location.jsx
+++ b/src/components/Navbar/Location.jsx
@@ -18,5 +18,7 @@ export const useRouteVariables = () => {
     isConfirmPage: location.pathname==="/confirm-unsubscribe",
     isForgotPage: location.pathname ==="/forgot-password",
     isResetPasswordPage: location.pathname.startsWith("/reset-password/"),
+    isEditPostPage: location.pathname.startsWith("/edit/")
+
   };
 };
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index c3206ec..946cedc 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -23,7 +23,9 @@ const Navbar = () => {
     isEmailPage,
     isConfirmPage,
     isForgotPage,
-    isResetPasswordPage
+    isResetPasswordPage,
+    isEditPostPage
+
   } = useRouteVariables();
 
   const [open, setOpen] = useState(false);
@@ -77,7 +79,8 @@ const Navbar = () => {
               !isAdminPage &&
               !isFormPage &&
               !userListPage &&
-              !isDetailPage && (
+              !isDetailPage && !isEditPostPage && (
+
                 <Link
                   to="/"
                   className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
diff --git a/src/components/PostCard.jsx b/src/components/PostCard.jsx
index ea8cb1c..3acfaef 100644
--- a/src/components/PostCard.jsx
+++ b/src/components/PostCard.jsx
@@ -1,9 +1,10 @@
-import toast from "react-hot-toast";
-import { usePosts } from "../context/postContext";
+
 import ReactMarkdown from "react-markdown";
-import { useNavigate, Link } from "react-router-dom";
+import { Link } from "react-router-dom";
 import moment from "moment";
 import logoImg from "../Images/postimg.jpg";
+import { ModeratorDropdown } from "./ModeratorDropdown";
+import { useState } from "react";
 
 export function insertMedia(filePath) {
   var extension = filePath.split(".").pop().toLowerCase();
@@ -37,58 +38,10 @@ export function insertMedia(filePath) {
 }
 
 export function PostCard({ post }) {
-  const { deletePost } = usePosts();
-  const navigate = useNavigate();
+
   const relativeDate = moment(post.createdAt).fromNow();
+  const [showFullDescription, setShowFullDescription] = useState(false);
 
-  const handleDelete = (id) => {
-    toast(
-      (t) => (
-        <div>
-          <p className="text-white">
-            <b> Do you want to Delete?</b> {post.title}
-          </p>
-          <div>
-            <button
-              className="bg-red-500 hover:bg-red-400 px-3 py-2 text-sm text-white rounded-sm mx-2"
-              onClick={() => {
-                deletePost(id);
-                toast.dismiss(t.id);
-                toast.success("Post Deleted Successful");
-              }}
-            >
-              Delete
-            </button>
-
-            <button
-              className="bg-slate-400 hover:bg-slate-500 px-3 py-2 text-white rounded-sm mx-2"
-              onClick={() => {
-                toast.dismiss(t.id);
-                toast(
-                  "Notification: Post deletion cancelled. Your post has been preserved and will not be deleted. Thank you for your understanding and collaboration! ",
-                  {
-                    duration: 6000,
-                    style: {
-                      borderRadius: "10px",
-                      background: "#333",
-                      color: "#fff",
-                    },
-                  }
-                );
-              }}
-            >
-              Cancel
-            </button>
-          </div>
-        </div>
-      ),
-      {
-        style: {
-          background: "#202020",
-        },
-      }
-    );
-  };
 
   return (
     <article className="container mx-auto max-w-sm bg-white rounded-xl shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10  animate-fade-down animate-once animate-duration-[500ms] animate-ease-out">
@@ -99,32 +52,12 @@ export function PostCard({ post }) {
             <h1 className="text-xl font-bold text-gray-800 cursor-pointer">
               {post.author}
             </h1>
-            <p className="text-sm text-gray-800 ">
-              {relativeDate}
-            </p>
+
+            <p className="text-sm text-gray-800 ">{relativeDate}</p>
             <p className="text-blue-400 capitalize "> {post.categories}</p>
           </div>
         </div>
-        <div>
-          <button
-            className="text-sm px-2 py-1 rounded-sm group relative overflow-hidden  bg-white  shadow m-1"
-            onClick={() => navigate(`/edit/${post._id}`)}
-          >
-            <div className="absolute inset-0 w-0 bg-cyan-300 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
-            <span className="relative text-black group-hover:text-white">
-              Edit
-            </span>
-          </button>
-          <button
-            className=" text-sm px-2 py-1 rounded-sm group relative overflow-hidden  bg-white  shadow"
-            onClick={() => handleDelete(post._id)}
-          >
-            <div className="absolute inset-0 w-0 bg-rose-500 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
-            <span className="relative text-black group-hover:text-white">
-              Delete
-            </span>
-          </button>
-        </div>
+        <ModeratorDropdown postId={post._id} />
       </header>
 
       <Link to={`/post/${post._id}`} state={{ post }}>
@@ -132,12 +65,24 @@ export function PostCard({ post }) {
         <div className="p-6">
           <h2 className="text-xl text-gray-800 font-semibold">{post.title}</h2>
 
+
           <ReactMarkdown className="text-lg font font-thin text-black text-justify">
-            {post.description
-              ? `${post.description.substr(0, 330)}...Read More`
-              : "not description"}
+            {showFullDescription
+              ? post.description
+              : post.description
+              ? `${post.description.substr(0, 330)}...`
+              : "No description"}
           </ReactMarkdown>
 
+          {post.description && (
+            <button
+              className="text-blue-500 cursor-pointer"
+              onClick={() => setShowFullDescription(!showFullDescription)}
+            >
+              {showFullDescription ? "Read Less" : "Read More"}
+            </button>
+          )}
+
           <h4 className="text-gray-400 capitalize my-2">
             {" "}
             Source: {post.source}
diff --git a/src/components/PostCardUser.jsx b/src/components/PostCardUser.jsx
index 30ac45a..43d5e5b 100644
--- a/src/components/PostCardUser.jsx
+++ b/src/components/PostCardUser.jsx
@@ -1,11 +1,12 @@
 import moment from "moment";
-import React, { useEffect } from "react";
+import React, { useEffect} from "react";
 import ReactMarkdown from "react-markdown";
 import { insertMedia } from "./PostCard";
 import logoImg from "../Images/postimg.jpg";
 import { Link, useNavigate } from "react-router-dom";
 import Cookies from "js-cookie";
-
+import { faComment } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 export function PostCardUser({ post }) {
   const relativeDate = moment(post.createdAt).fromNow();
   const navigate = useNavigate();
@@ -49,6 +50,10 @@ export function PostCardUser({ post }) {
             {" "}
             Source: {post.source}
           </h4>
+
+          <div className="text-base font-bold text-gray-700 mt-3 my-2">
+          {post.comments.length} Comment(s) <FontAwesomeIcon icon={faComment} />
+        </div>
         </div>
       </article>
     </Link>
diff --git a/src/components/PostDetailsCard.jsx b/src/components/PostDetailsCard.jsx
index a08dd4f..b2e05d1 100644
--- a/src/components/PostDetailsCard.jsx
+++ b/src/components/PostDetailsCard.jsx
@@ -10,8 +10,9 @@ import toast from "react-hot-toast";
 import { SocialShare } from "./SocialShare";
 import { usePosts } from "../context/postContext";
 import { getTokenFromCookie } from "../api/posts";
-import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
+import { faArrowLeft,faComment } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { baseUrl } from "../Config";
 export function PostDetailsCard() {
   const { state } = useLocation();
   const relativeDate = state?.post
@@ -28,7 +29,9 @@ export function PostDetailsCard() {
 
     try {
       const response = await axios.post(
-        `http://localhost:4000/api/posts/${postId}/comments`,
+
+        `${baseUrl}/posts/${postId}/comments`,
+
         { text: commentText },
         {
           headers: {
@@ -156,7 +159,8 @@ export function PostDetailsCard() {
         </form>
 
         <div className="text-base font-bold text-gray-700 mt-3 my-2">
-          {postData.comments.length} Comment(s)
+          {postData.comments.length} Comment(s) <FontAwesomeIcon icon={faComment} />
+
         </div>
 
         <Comments
diff --git a/src/components/signup/SignupForm.js b/src/components/signup/SignupForm.js
index 6c8372d..6274dc5 100644
--- a/src/components/signup/SignupForm.js
+++ b/src/components/signup/SignupForm.js
@@ -4,6 +4,8 @@ import useAuth from "../../hooks/useAuth";
 import axios from "axios";
 import toast from 'react-hot-toast';
 import Cookies from 'js-cookie'
+import { baseUrl } from "../../Config";
+
 const SignupForm = ({ onSuccess }) => {
   const initialState = {
     username: "",
@@ -17,7 +19,7 @@ const SignupForm = ({ onSuccess }) => {
   const handleSubmit = async (e) => {
     e.preventDefault();
     try {
-      const url = "http://localhost:4000/api/auth/signup";
+      const url = `${baseUrl}/auth/signup`;
       const { data: res } = await axios.post(url, data);
       const roles = res?.roles;
       const token = res?.token;
diff --git a/src/hooks/useAuthentication.js b/src/hooks/useAuthentication.js
index 74559d7..e603d32 100644
--- a/src/hooks/useAuthentication.js
+++ b/src/hooks/useAuthentication.js
@@ -2,10 +2,11 @@ import axios from "axios";
 import { useNavigate } from "react-router-dom";
 import Cookies from "js-cookie";
 import toast from "react-hot-toast";
-
+import { baseUrl } from "../Config";
 const useAuthentication = () => {
   const navigate = useNavigate();
-  const LoginUrl = process.env.REACT_APP_API_LOGIN;
+  const LoginUrl = `${baseUrl}/auth/signin`;
+
 
   const authenticate = async (data) => {
     try {
diff --git a/src/hooks/useSignupLogic.js b/src/hooks/useSignupLogic.js
index aaeb1f8..d5f21db 100644
--- a/src/hooks/useSignupLogic.js
+++ b/src/hooks/useSignupLogic.js
@@ -3,7 +3,7 @@ import { useNavigate, useLocation } from "react-router-dom";
 import useAuth from "./useAuth";
 import axios from "axios";
 import {  toast } from "react-hot-toast";
-
+import { baseUrl } from "../Config";
 const useSignupLogic = () => {
   const [data, setData] = useState({
     username: "",
@@ -16,7 +16,7 @@ const useSignupLogic = () => {
 
   const location = useLocation();
   const navigate = useNavigate();
-  const SignupUrl = process.env.REACT_APP_API_SIGNUP;
+  const SignupUrl = `${baseUrl}/auth/signup`;
   const from = location.state?.from?.pathname || "/login";
 
   const handleChange = ({ currentTarget: input }) => {
diff --git a/src/pages/Contact.js b/src/pages/Contact.js
index 2806fb5..159432e 100644
--- a/src/pages/Contact.js
+++ b/src/pages/Contact.js
@@ -3,8 +3,7 @@ import { toast } from "react-hot-toast";
 import { faHeadset } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Cookies from "js-cookie";
-const apiWeb = process.env.REACT_APP_API_CONTACT;
-const apiEmail =process.env.REACT_APP_EMAIL_KEY
+import { apiEmail,apiWeb } from "../Config";
 
 const ContactForm = () => {
   const savedEmail = Cookies.get("email");
@@ -68,11 +67,10 @@ const ContactForm = () => {
         </p>
 
         <form action={apiWeb} className="mt-10" onSubmit={handleSubmit}>
-          <input
-            type="hidden"
-            name="access_key"
-            value={apiEmail}
-          />
+
+          <input type="hidden" name="access_key" value={apiEmail} />
+
+
           <div className="grid gap-6 sm:grid-cols-2">
             <div className="relative z-0">
               <input
diff --git a/src/pages/ForgotPassword.js b/src/pages/ForgotPassword.js
index 9ba1fc4..3df0d7a 100644
--- a/src/pages/ForgotPassword.js
+++ b/src/pages/ForgotPassword.js
@@ -3,6 +3,8 @@ import { Link, useNavigate } from "react-router-dom";
 import axios from "axios";
 import toast from "react-hot-toast";
 
+import { baseUrl } from "../Config";
+
 const ForgotPassword = () => {
   const [email, setEmail] = useState("");
   const navigate = useNavigate();
@@ -10,7 +12,7 @@ const ForgotPassword = () => {
   const handleForgotPassword = async () => {
     try {
       const response = await axios.post(
-        "http://localhost:4000/api/auth/forgot-password",
+        `${baseUrl}/auth/forgot-password`,
         {
           email,
         }
diff --git a/src/pages/ResetPassword.js b/src/pages/ResetPassword.js
index ccac6d7..ef3121a 100644
--- a/src/pages/ResetPassword.js
+++ b/src/pages/ResetPassword.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import axios from "axios";
 import toast from "react-hot-toast";
 import { useNavigate, useLocation } from "react-router-dom";
+import { baseUrl } from "../Config";
 
 const ResetPassword = () => {
   const [token, setToken] = useState("");
@@ -23,7 +24,7 @@ const ResetPassword = () => {
 
     try {
       const response = await axios.post(
-        "http://localhost:4000/api/auth/reset-password",
+        `${baseUrl}/auth/reset-password`,
         {
           token,
           newPassword,
diff --git a/src/pages/SubscribePage.js b/src/pages/SubscribePage.js
index 01fe967..5d2bd46 100644
--- a/src/pages/SubscribePage.js
+++ b/src/pages/SubscribePage.js
@@ -4,6 +4,7 @@ import { toast } from "react-hot-toast";
 import { Link } from "react-router-dom";
 import Cookies from "js-cookie";
 import { useNavigate } from "react-router-dom";
+import { baseUrl } from "../Config";
 
 export const SubscriptionPage = () => {
   const [email, setEmail] = useState("");
@@ -25,7 +26,7 @@ export const SubscriptionPage = () => {
 
     try {
       const response = await axios.post(
-        "http://localhost:4000/api/users/activate-subscription",
+        `${baseUrl}/users/activate-subscription`,
         {
           email: email,
         }
@@ -59,7 +60,7 @@ export const SubscriptionPage = () => {
 
     try {
       const response = await axios.post(
-        "http://localhost:4000/api/users/email-unsubscribe",
+        `${baseUrl}/users/email-unsubscribe`,
         {
           email: email,
         }
diff --git a/src/pages/UnsubscribePage.js b/src/pages/UnsubscribePage.js
index e36d58d..4870d20 100644
--- a/src/pages/UnsubscribePage.js
+++ b/src/pages/UnsubscribePage.js
@@ -1,13 +1,16 @@
 import React, { useEffect } from "react";
 import axios from "axios";
 import toast from "react-hot-toast";
+import { baseUrl } from "../Config";
+
 const UnsubscribeSuccessPage = () => {
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
     const email = params.get("email");
     
     axios
-      .post("http://localhost:4000/api/users/unsubscribe", { email })
+      .post(`${baseUrl}/users/unsubscribe`, { email })
+
       .then((response) => {})
       .catch((error) => {
         toast.error(error);
diff --git a/src/pages/Users.js b/src/pages/Users.js
index e4cec7f..467886c 100644
--- a/src/pages/Users.js
+++ b/src/pages/Users.js
@@ -4,6 +4,8 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { EditRolesDialog } from "../components/DialogManage";
 import toast from "react-hot-toast";
+import { baseUrl } from "../Config";
+
 dayjs.extend(relativeTime);
 
 function UserList() {
@@ -15,7 +17,7 @@ function UserList() {
     const fetchData = async () => {
       try {
         const usersResponse = await axios.get(
-          "http://localhost:4000/api/users"
+          `${baseUrl}/users`
         );
 
         const mappedUsers = usersResponse.data.map((user) => ({
@@ -53,12 +55,14 @@ function UserList() {
 
   const handleUpdateRoles = async (newRoles) => {
     try {
-      await axios.put(`http://localhost:4000/api/users/update-role`, {
+      await axios.put(`${baseUrl}/users/update-role`, {
+
         userId: selectedUserId,
         roles: newRoles,
       });
 
-      const updatedUsers = await axios.get("http://localhost:4000/api/users");
+
+      const updatedUsers = await axios.get(`${baseUrl}/users`);
       const mappedUsers = updatedUsers.data.map((user) => ({
         ...user,
         roleNames: user.roles.map((roleId) => mapRoleIdToRoleName(roleId)),