diff --git a/src/App.scss b/src/App.scss
index eaa7d9b0..fbf0a796 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -38,4 +38,9 @@
 @import "./assets/styles/tables.scss";
 @import "./assets/styles/cards.scss";
 @import "./assets/styles/trackOrder.scss";
-@import './assets/styles/trackOrder.scss';
+@import "./assets/styles/adminDashboard.scss";
+@import "./assets/styles/users.scss";
+@import "./assets/styles/liveChat.scss";
+@import "./assets//styles/UserProfile.scss";
+@import "./assets/styles/SellerSideProduct.scss";
+@import "./assets/styles/SellerDeleteItem.scss"
diff --git a/src/assets/styles/SellerDeleteItem.scss b/src/assets/styles/SellerDeleteItem.scss
new file mode 100644
index 00000000..72494282
--- /dev/null
+++ b/src/assets/styles/SellerDeleteItem.scss
@@ -0,0 +1,67 @@
+@import "./Colors";
+
+.confirm-dialog {
+    margin-left: 27rem;
+    border-radius: 2.2rem;
+    margin-top: 9rem;
+    width: 80%;
+    height: 87vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    font-size: 1.6rem;
+
+    .confirm-dialog-content {
+        background-color: white;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        text-align: center;
+
+        .modal-header {
+            font-size: 1.8rem;
+            font-weight: bold;
+            margin-bottom: 1.5;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            .icon__delete {
+                color: $red-color;
+                font-size: 3rem;
+            }
+        }
+        p{
+            padding: 1rem 0;
+            i{
+                text-transform: uppercase;
+                font-weight: bold;
+            }
+        }
+        .modal-footer{
+            float: right;
+            button {
+            margin: 0 10px;
+            padding: .7rem 3rem; 
+            border: none;
+            border-radius: 1rem;
+            font-family: $text-family;
+        }
+        .delete-btn{
+            background: $red-middle-color;
+            color: $red-color;
+        }
+        .cancel-btn{
+            background: lighten($fifth-color, 19%);
+            color: $fifth-color;
+        }
+    }
+    }
+}
\ No newline at end of file
diff --git a/src/assets/styles/UserProfile.scss b/src/assets/styles/UserProfile.scss
index a6182e8e..a3dcde94 100644
--- a/src/assets/styles/UserProfile.scss
+++ b/src/assets/styles/UserProfile.scss
@@ -230,7 +230,8 @@
 
         .error {
           color: red !important;
-          padding: 0 !important;
+          padding-left: 2rem !important;
+          margin-left: -2rem;
           background: none;
           font-size: 2rem;
         }
diff --git a/src/components/product/ConfirmModal.tsx b/src/components/product/ConfirmModal.tsx
new file mode 100644
index 00000000..a5111f22
--- /dev/null
+++ b/src/components/product/ConfirmModal.tsx
@@ -0,0 +1,32 @@
+/* eslint-disable */
+import React from 'react';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+interface ConfirmModalProps {
+    isOpen: boolean;
+    title: string;
+    message: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+
+const ConfirmModal: React.FC<ConfirmModalProps> = ({ isOpen, title, message, onConfirm, onCancel }) => {
+    if (!isOpen) return null;
+
+    return (
+        <div className="confirm-dialog">
+            <div className="confirm-dialog-content">
+                <div className="modal-header">
+                <DeleteIcon className='icon__delete' /> {title}
+                </div>
+                <p dangerouslySetInnerHTML={{ __html: message }} />
+                <div className="modal-footer">
+                    <button onClick={onCancel} className='cancel-btn'>Cancel</button>
+                    <button onClick={onConfirm} className='delete-btn'>Delete</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ConfirmModal;
diff --git a/src/components/user/PasswordUpdate.tsx b/src/components/user/PasswordUpdate.tsx
index 949595e5..11baed0a 100644
--- a/src/components/user/PasswordUpdate.tsx
+++ b/src/components/user/PasswordUpdate.tsx
@@ -8,6 +8,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import { toast } from "react-toastify";
 import { TailSpin } from 'react-loader-spinner';
+import { logout } from '../../store/features/auth/authSlice';
+import { disconnect } from '../../utils/socket/socket';
+import { useNavigate } from 'react-router-dom';
 
 const passwordSchema = Yup.object({
   oldPassword: Yup.string().required('Old password is required'),
@@ -19,13 +22,13 @@ const passwordSchema = Yup.object({
     .oneOf([Yup.ref('newPassword')], 'Passwords must match'),
 });
 
-const PasswordUpdate = ({ message, isError,isSuccess }) => {
+const PasswordUpdate = ({ message, isError, isSuccess }) => {
   const dispatch = useAppDispatch();
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [showConfirmNewPassword, setShowConfirmNewPassword] = useState(false)
   const [loading, setLoading] = useState(false);
-  const [success, setSuccess] = useState(null);
+  const navigate = useNavigate()
 
   const newPasswordVisibility = () => {
     setShowPassword(!showPassword);
@@ -46,13 +49,23 @@ const PasswordUpdate = ({ message, isError,isSuccess }) => {
     },
     validationSchema: passwordSchema,
     onSubmit: async (values) => {
-      setLoading(true);
       try{
+        setTimeout(()=>{
+          setLoading(true)
+        },200)
         dispatch(updatePassword(values));
       }catch(err){
         console.log(err)
       }finally{
         setLoading(false)
+        toast.success("Password updated Successfully you will be logged out in few second ")
+        setTimeout(()=>{
+          dispatch(logout())
+          disconnect()
+        },4000)
+        setTimeout(()=>{
+          navigate("/login")
+        }, 5500)
       }
 
     },
@@ -75,7 +88,7 @@ const PasswordUpdate = ({ message, isError,isSuccess }) => {
     <div className="password">
       <div className='password-layout'>
         <div className="password-inp">
-          <label htmlFor="oldPassword">old password</label>
+          <label htmlFor="oldPassword">Old Password</label>
           <div className="input-n">
             <input
               type={showPassword ? 'text' : 'password'}
@@ -103,7 +116,7 @@ const PasswordUpdate = ({ message, isError,isSuccess }) => {
         <div >
           <div className='conf-pwd'>
             <div className="password-inp">
-              <label htmlFor="newPassword">new Password</label>
+              <label htmlFor="newPassword">New Password</label>
               <div className="input-n">
                 <input
                   type={showConfirmPassword ? 'text' : 'password'}
@@ -127,7 +140,7 @@ const PasswordUpdate = ({ message, isError,isSuccess }) => {
               {formik.errors.newPassword && <div className='error'>{formik.errors.newPassword}</div>}
             </div>
             <div className="password-inp">
-              <label htmlFor="confirmNewPassword">confirm New Password</label>
+              <label htmlFor="confirmNewPassword">Confirm New Password</label>
               <div className="input-n">
                 <input
                   type={showConfirmNewPassword ? 'text' : 'password'}
diff --git a/src/components/user/ProfileDetails.tsx b/src/components/user/ProfileDetails.tsx
index 9d9d34db..56c731c6 100644
--- a/src/components/user/ProfileDetails.tsx
+++ b/src/components/user/ProfileDetails.tsx
@@ -2,7 +2,7 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import { useAppDispatch} from '../../store/store';
+import { useAppDispatch } from '../../store/store';
 import { updateUserProfile, fetchUserProfile } from '../../store/features/user/userSlice';
 import avatar from "../../../public/assets/avatar.jpg";
 import camera from "../../../public/assets/Camera.png";
@@ -22,10 +22,11 @@ const updateProfileSchema = Yup.object().shape({
   currency: Yup.string().required('Required'),
 });
 
-const ProfileDetails = ({ user,isLoading, isSuccess, isError, message }) => {
+const ProfileDetails = ({ user, isSuccess, isError, message }) => {
   const dispatch = useAppDispatch();
   const inputRef = useRef(null);
   const [profileImage, setProfileImage] = useState<any>(null);
+  const [loading, setLoading] = useState(false)
 
   useEffect(() => {
     dispatch(fetchUserProfile());
@@ -74,8 +75,14 @@ const ProfileDetails = ({ user,isLoading, isSuccess, isError, message }) => {
       formData.append("language", values.language);
       formData.append("birthDate", values.birthDate);
 
-      const response: any = await dispatch(updateUserProfile(formData));
-      // if(response && response.payload && response.payload.status && response.paylad.message) toast.success(response.payload.message);
+      setTimeout(()=>{
+        setLoading(true)
+      },2000)
+      await dispatch(updateUserProfile(formData))
+      .finally(()=>{
+        setLoading(false)
+      });
+
     }
   });
 
@@ -113,7 +120,7 @@ const ProfileDetails = ({ user,isLoading, isSuccess, isError, message }) => {
       <div className='title'>
         <h1>MY PROFILE DETAILS</h1>
         <button type='submit'>
-          {isLoading ? (
+          {loading ? (
             <div className="spinner-container">
               <TailSpin color="#ff6d18" width={20} />
             </div>
@@ -166,6 +173,7 @@ const ProfileDetails = ({ user,isLoading, isSuccess, isError, message }) => {
           <div className='options'>
             <label htmlFor="gender">Gender</label>
             <select value={formik.values.gender} onChange={formik.handleChange} onBlur={formik.handleBlur} name='gender' id='gender'>
+              <option value=""></option>
               <option value="male">Male</option>
               <option value="female">Female</option>
             </select>
@@ -173,6 +181,7 @@ const ProfileDetails = ({ user,isLoading, isSuccess, isError, message }) => {
           <div className='options'>
             <label htmlFor="currency">Currency</label>
             <select value={formik.values.currency} onChange={formik.handleChange} onBlur={formik.handleBlur} name='currency' id='currency'>
+              <option value=""></option>
               <option value="USD">USD</option>
               <option value="RWF">RWF</option>
             </select>
@@ -180,6 +189,7 @@ const ProfileDetails = ({ user,isLoading, isSuccess, isError, message }) => {
           <div className='options'>
             <label htmlFor="language">Language</label>
             <select value={formik.values.language} onChange={formik.handleChange} onBlur={formik.handleBlur} name='language' id='language'>
+              <option value=""></option>
               <option value="English">English</option>
               <option value="Kinyarwanda">Kinyarwanda</option>
               <option value="Greek">Greek</option>
diff --git a/src/components/user/ShippingAddress.tsx b/src/components/user/ShippingAddress.tsx
index a0856bc8..a60c9805 100644
--- a/src/components/user/ShippingAddress.tsx
+++ b/src/components/user/ShippingAddress.tsx
@@ -13,7 +13,6 @@ interface RwandaLocationSelectorProps {
     user: IProfile,
     isSuccess: boolean,
     isError: string,
-    isLoading: boolean,
     message: string
   }
   
@@ -35,7 +34,7 @@ interface RwandaLocationSelectorProps {
   
   const rwandaData: RwandaData = data;
 
-const ShippingAddress:React.FC<RwandaLocationSelectorProps> = ({ user,isSuccess, isError, isLoading,message,setLocation }) => {
+const ShippingAddress:React.FC<RwandaLocationSelectorProps> = ({ user,isSuccess, isError,message,setLocation }) => {
 
     const dispatch = useAppDispatch();
     const [country, setCountry] = useState('Rwanda');
@@ -43,6 +42,7 @@ const ShippingAddress:React.FC<RwandaLocationSelectorProps> = ({ user,isSuccess,
     const [district, setDistrict] = useState('');
     const [sector, setSector] = useState('');
     const [street, setStreet] = useState("")
+    const [loading, setLoading] = useState(false)
 
     const handleProvinceChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
         setProvince(e.target.value);
@@ -70,7 +70,13 @@ const ShippingAddress:React.FC<RwandaLocationSelectorProps> = ({ user,isSuccess,
             return;
           }
         try {
-            dispatch(addUserAddress({ id: user.id, data: {province, district, sector, street}}));
+          setTimeout(()=>{
+            setLoading(true)
+          },200)
+            dispatch(addUserAddress({ id: user.id, data: {province, district, sector, street}}))
+            .finally(()=>{
+              setLoading(false)
+            });
           } catch (error) {
             toast.error(isError);
           }
@@ -93,7 +99,7 @@ const ShippingAddress:React.FC<RwandaLocationSelectorProps> = ({ user,isSuccess,
           <div className='title'>
             <h1>MY SHIPPING ADDRESS</h1>
             <button type='submit'>
-          {isLoading ? (
+          {loading ? (
             <div className="spinner-container">
               <TailSpin color="#ff6d18" width={20} />
             </div>
diff --git a/src/pages/UserEditProfile.tsx b/src/pages/UserEditProfile.tsx
index 35f4a23b..c90d044c 100644
--- a/src/pages/UserEditProfile.tsx
+++ b/src/pages/UserEditProfile.tsx
@@ -36,9 +36,9 @@ const UserProfile = () => {
   return (
     <>
       <section className='profile-container'>
-        <ProfileDetails user={user} isSuccess={isSuccess} isLoading={isLoading} isError={isError} message={message} />
+        <ProfileDetails user={user} isSuccess={isSuccess} isError={isError} message={message} />
         <PasswordUpdate message={message} isSuccess={isSuccess} isError={isError}/>
-        <ShippingAddress user={user} isLoading={isLoading} isSuccess={isSuccess} isError={isError} message={message} setLocation={setLocation} />
+        <ShippingAddress user={user} isSuccess={isSuccess} isError={isError} message={message} setLocation={setLocation} />
         <div className="seller__request">
           <SubmitSellerRequest
             user={requestData}
diff --git a/src/pages/seller/SellerCollection.tsx b/src/pages/seller/SellerCollection.tsx
index 8b310752..835555c7 100644
--- a/src/pages/seller/SellerCollection.tsx
+++ b/src/pages/seller/SellerCollection.tsx
@@ -2,7 +2,7 @@
 import React, { useEffect, useState } from 'react'
 import Table from '../../components/table/Table';
 import { useAppDispatch, useAppSelector } from '../../store/store';
-import { fetchSellerCollectionProduct } from '../../store/features/product/sellerCollectionProductsSlice';
+import { fetchSellerCollectionProduct} from '../../store/features/product/sellerCollectionProductsSlice';
 import Zoom from '@mui/material/Zoom';
 import Tooltip from '@mui/material/Tooltip';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -22,6 +22,13 @@ import { FaEye, FaPlusCircle } from 'react-icons/fa';
 import { ISingleProductInitialResponse } from '../../utils/types/store';
 import { resetUpdateState, updateSellerProductStatus } from '../../store/features/product/sellerProductSlice';
 import { toast } from 'react-toastify';
+import ConfirmModal from '../../components/product/ConfirmModal';
+
+interface DeleteItemState {
+    id: any;
+    name: string;
+}
+
 export default function SellerCollection() {
     const navigate = useNavigate()
     const dispatch = useAppDispatch();
@@ -33,6 +40,26 @@ export default function SellerCollection() {
         dispatch(fetchSellerCollectionProduct())
     }, [dispatch]);
 
+    const [showConfirm, setShowConfirm] = useState(false);
+    const [itemToDelete, setItemToDelete] = useState<DeleteItemState | null>(null);
+
+
+    const handleDelete = async () => {
+        try {
+            setShowConfirm(false)
+            // dispatch(removeItem(itemToDelete.id))
+            // await dispatch(deleteItem(itemToDelete.id)).unwrap();
+            dispatch(fetchSellerCollectionProduct());
+            setItemToDelete(null)
+        } catch (error) {
+            console.error('Error deleting item:', error);
+        }finally{
+            if(isSuccess)
+            toast.success(message)
+        }
+    };
+
+
     useEffect(() => {
         if (isUpdate && isUpdateSuccess) {
             toast.success(updateMessage);
@@ -69,7 +96,7 @@ export default function SellerCollection() {
                     </IconButton>
                 </Tooltip>
                 <Tooltip TransitionComponent={Zoom} title="Delete" arrow>
-                    <IconButton>
+                    <IconButton onClick={() => { setShowConfirm(true); setItemToDelete({ id: product.id, name: product.name }); }}>
                         <DeleteIcon className='icon__delete' />
                     </IconButton>
                 </Tooltip>
@@ -102,6 +129,8 @@ export default function SellerCollection() {
         setOpen(false);
     };
 
+    const popupMessage = `Deleting this product <i>${itemToDelete?.name}</i> will be permanently removed from the system. This can't be undone!`;
+
     return (
         <div className='seller__main__container'>
             <Meta title={`Seller Products`} />
@@ -162,6 +191,16 @@ export default function SellerCollection() {
                     </Button>
                 </DialogActions>
             </Dialog>
+
+            {showConfirm && (
+                <ConfirmModal
+                    isOpen={showConfirm}
+                    title="Are you sure?"
+                    message={popupMessage}
+                    onConfirm={handleDelete}
+                    onCancel={() => setShowConfirm(false)}
+                />
+            )}
         </div>
     )
 }
diff --git a/src/store/features/product/productSlice.tsx b/src/store/features/product/productSlice.tsx
index 4cad0040..663aa8f1 100644
--- a/src/store/features/product/productSlice.tsx
+++ b/src/store/features/product/productSlice.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable */
 import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
 import productService from "./productService";
-import { IProduct, SearchCriteria } from "../../../utils/types/product";
+import { IProduct, ISingleProduct, SearchCriteria } from "../../../utils/types/product";
 import { getErrorMessage } from "../../../utils/axios/axiosInstance";
 
 const initialState: { products: IProduct[] | null; isLoading: boolean; isError: boolean | null; isSuccess: boolean; message: string } = {
@@ -68,7 +68,8 @@ const productSlice = createSlice({
                 state.isError = true;
                 state.message = action.payload;
                 state.isSuccess = false;
-            });
+            })
+            ;
     }
 })
 
diff --git a/src/store/features/product/sellerCollectionProductsSlice.tsx b/src/store/features/product/sellerCollectionProductsSlice.tsx
index 6e09d893..a14d4290 100644
--- a/src/store/features/product/sellerCollectionProductsSlice.tsx
+++ b/src/store/features/product/sellerCollectionProductsSlice.tsx
@@ -100,4 +100,4 @@ const sellerCollectionProductsSlice = createSlice({
     }
 })
 
-export default sellerCollectionProductsSlice.reducer;
+export default sellerCollectionProductsSlice.reducer;
\ No newline at end of file
diff --git a/src/store/features/user/userSlice.tsx b/src/store/features/user/userSlice.tsx
index 34c60012..da6799f6 100644
--- a/src/store/features/user/userSlice.tsx
+++ b/src/store/features/user/userSlice.tsx
@@ -102,8 +102,7 @@ const userSlice = createSlice({
             .addCase(updatePassword.fulfilled, (state, action: PayloadAction<any>)=>{
                 state.isLoading = false,
                 state.isError = null,
-                state.user = action.payload,
-                state.message= action.payload.message || "password updated successfully"
+                state.user = action.payload
                 state.isSuccess = true
             })
             .addCase(updatePassword.rejected, (state, action: PayloadAction<any>)=>{
diff --git a/webpack.dev.config.ts b/webpack.dev.config.ts
index ffb303f6..1b684fa0 100644
--- a/webpack.dev.config.ts
+++ b/webpack.dev.config.ts
@@ -97,7 +97,7 @@ const config: Configuration = {
     historyApiFallback: {
       disableDotRule: true,
     },
-    port: 5000,
+    port: 9000,
     open: true,
     hot: true,
   },