diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
index 5e21955..2401a5a 100644
--- a/.firebase/hosting.YnVpbGQ.cache
+++ b/.firebase/hosting.YnVpbGQ.cache
@@ -4,12 +4,12 @@ manifest.json,499162500000,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500
 robots.txt,499162500000,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
 fakedata/doctordb.json,1652018282369,3c24bdb2fd8a65cc689ec0060c3d9a501f46a82801c73356801a259b7c35a072
 fakedata/healthcaredb.json,1652098972963,8f65a62e48495f73a348ea4bdf8ff3706468c99907ce21b29673f1b149db45c1
-asset-manifest.json,1652675866795,af29b9349e1b82617d172885af575340f369cf91160b4b6174adcc28fa5c5e89
-index.html,1652675866794,1ea82e566a19998a7ac01395ec1e1b7d10b085a7201473cd58bde88a2b111980
-static/css/main.9931b7b8.css,1652675866840,b381f1a7af6790abead6b954014489f7c2c3e7591696e280ccb0c0ede3d40c9d
-static/css/main.9931b7b8.css.map,1652675866841,5de88ee38d6a2a7c51d55b23df1dd2ed5b710dcd45ff6c765d33ccae2f875e09
-static/js/787.9f7df1ff.chunk.js,1652675866840,389f5f7060690b9d86ae3ffb6591d7181d8da01963cdcaecd130f7d73d4f3817
-static/js/787.9f7df1ff.chunk.js.map,1652675866848,8ba4bd5ec9967873b119702554e02ce6d5a14bfb47f53d8930d0fb009778059f
-static/js/main.c582897b.js.LICENSE.txt,1652675866841,e24f464d03d55ffa1b896e7e888516c1d457d3a9e0f638db22919b5701850358
-static/js/main.c582897b.js,1652675866842,b72ae66ba5da1b3951415393e9da978091e99fa8571c101e1b288b2bd71f16f8
-static/js/main.c582897b.js.map,1652675866848,78dc085a26640b702d89be0f576555f0a00866739fed7b11c41599655947c01b
+asset-manifest.json,1652796781542,2f6c079c85a1fed748a59fcc5fc76e24935af12b7a48b64a5667a520e1d02623
+index.html,1652796781541,a56da69c91645893c9d98174f6895a9f7794da47ee19dbb9f6e9a22a4293b790
+static/css/main.9931b7b8.css,1652796781577,b381f1a7af6790abead6b954014489f7c2c3e7591696e280ccb0c0ede3d40c9d
+static/css/main.9931b7b8.css.map,1652796781577,5de88ee38d6a2a7c51d55b23df1dd2ed5b710dcd45ff6c765d33ccae2f875e09
+static/js/787.9f7df1ff.chunk.js,1652796781577,389f5f7060690b9d86ae3ffb6591d7181d8da01963cdcaecd130f7d73d4f3817
+static/js/787.9f7df1ff.chunk.js.map,1652796781578,8ba4bd5ec9967873b119702554e02ce6d5a14bfb47f53d8930d0fb009778059f
+static/js/main.e628f299.js.LICENSE.txt,1652796781577,e24f464d03d55ffa1b896e7e888516c1d457d3a9e0f638db22919b5701850358
+static/js/main.e628f299.js,1652796781578,6d9015b9d3faa9c16c0beddb046bcd6a4c47b52d8286ffe0ca78050ad2021852
+static/js/main.e628f299.js.map,1652796781584,471b960b60d9700db27909374aceebbb67f5185e9aeeadcf2684282a1e17d5a0
diff --git a/src/Hooks/backupUsefirebase.js b/src/Hooks/backupUsefirebase.js
new file mode 100644
index 0000000..e85d9c1
--- /dev/null
+++ b/src/Hooks/backupUsefirebase.js
@@ -0,0 +1,176 @@
+import { useEffect, useState } from 'react';
+import { signInWithPopup, GoogleAuthProvider, getAuth, onAuthStateChanged, signOut, createUserWithEmailAndPassword, signInWithEmailAndPassword, sendEmailVerification, sendPasswordResetEmail, updateProfile, FacebookAuthProvider, GithubAuthProvider } from "firebase/auth";
+import initializeAuthentication from '../components/Login/Firebase/Firebase.init';
+
+
+initializeAuthentication();
+
+const googleProvider = new GoogleAuthProvider();
+const facebookProvider = new FacebookAuthProvider();
+const githubProvider = new GithubAuthProvider();
+
+
+const useFirebase = () => {
+    const [userName, setUserName] = useState('');
+    const [user, setUser] = useState({});
+    const [isLogin, setisLogin] = useState(true);
+    const [mail, setMail] = useState('');
+    const [password, setPass] = useState('');
+    const [error, setError] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const auth = getAuth();
+
+    const singInUsingGoogle = () => {
+        setIsLoading(false);
+        return signInWithPopup(auth, googleProvider)
+    }
+
+    const singInUsingFacebook = () => {
+        setIsLoading(false);
+        return signInWithPopup(auth, facebookProvider)
+    }
+
+    const singInUsingGithub = () => {
+        setIsLoading(false);
+        return signInWithPopup(auth, githubProvider)
+    }
+
+    useEffect(() => {
+        const unsubscribed = onAuthStateChanged(auth, (user) => { //amra jodi unsubscribed function use na kori tahole eta error throw koreb
+            if (user) {
+                setUser(user);
+            } else {
+                setUser({})
+            }
+            setIsLoading(true);
+
+        });
+        return () => unsubscribed;
+    }, [])
+
+    const logout = () => {
+        setIsLoading(false);
+        signOut(auth).then(() => {
+
+        }).catch((error) => {
+            setUser(error);
+        })
+            .finally(() => setIsLoading(true));
+    }
+
+    const handleRegister = e => {
+        e.preventDefault();//prevent default ke upore na dile error er dile seta dhorar age reload hoye jabe
+        //password length validation
+        if (password.length < 6) {
+            setError('Password should be at least 6 characters');
+            return;
+        }
+        //password regex test
+        if (!/(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/.test(password)) {
+            setError('Password should be minimum 6 characters, at least one letter and one number');
+            return;
+        }
+        isLogin ? loginRegisterUser(mail, password) : registeruser(mail, password);
+
+    }
+    // register new user
+    const registeruser = (mail, password) => {
+        createUserWithEmailAndPassword(auth, mail, password)
+            .then((result) => {
+                const user = result.user;
+                verifyUserMail();
+                updateUserName(user);
+                setError('');
+            })
+            .catch((error) => {
+                setError(error.message);
+            })
+    }
+
+    //set user name
+    const updateUserName = () => {
+        updateProfile(auth.currentUser, {
+            displayName: userName
+        }).then(() => { })
+            .catch((error) => {
+                setError(error.message);
+            })
+    }
+
+    //login register user
+    const loginRegisterUser = (mail, password) => {
+        signInWithEmailAndPassword(auth, mail, password)
+            .then((result) => {
+                setError('');
+            })
+            .catch((error) => {
+                setError(error.message)
+            })
+
+    }
+    //mail address verfication email
+    const verifyUserMail = () => {
+        sendEmailVerification(auth.currentUser)
+            .then(() => {
+                setError('verificaition mail has been sent to your mail');
+            })
+    }
+    const handleUserName = e => {
+        setUserName(e.target.value);
+    }
+
+
+    const handleEmail = e => {
+        setMail(e.target.value);
+    }
+    const handlePass = e => {
+        setPass(e.target.value);
+    }
+    const handleConfirmPass = e => {
+        const confirmPass = e.target.value;
+        if (password === confirmPass) {
+            setError('');
+        }
+        else {
+            setPass('');
+            setError('Password is not matched');
+        }
+    }
+
+    const toggleLogin = e => {
+        setisLogin(e);
+    }
+
+    const handlePasswordReset = () => {
+        sendPasswordResetEmail(auth, mail)
+            .then(() => {
+            })
+        setError('pass reset mail is sent');
+    }
+
+
+
+    return {
+        singInUsingGoogle,
+        singInUsingFacebook,
+        singInUsingGithub,
+        user,
+        setUser,
+        isLogin,
+        setisLogin,
+        logout,
+        handleRegister,
+        handlePasswordReset,
+        handleUserName,
+        handleEmail,
+        handlePass,
+        error,
+        setError,
+        loginRegisterUser,
+        handleConfirmPass,
+        toggleLogin,
+        isLoading
+    }
+}
+
+export default useFirebase;
\ No newline at end of file
diff --git a/src/Hooks/useFirebase.js b/src/Hooks/useFirebase.js
index af84cab..050ea43 100644
--- a/src/Hooks/useFirebase.js
+++ b/src/Hooks/useFirebase.js
@@ -17,17 +17,22 @@ const useFirebase = () => {
     const [mail, setMail] = useState('');
     const [password, setPass] = useState('');
     const [error, setError] = useState('');
+    const [isLoading, setIsLoading] = useState(true);
     const auth = getAuth();
 
     const singInUsingGoogle = () => {
+        setIsLoading(true);
+        console.log('this is from inside google', isLogin)
         return signInWithPopup(auth, googleProvider)
     }
 
     const singInUsingFacebook = () => {
+        // setisLogin(true);
         return signInWithPopup(auth, facebookProvider)
     }
 
     const singInUsingGithub = () => {
+        // setisLogin(true);
         return signInWithPopup(auth, githubProvider)
     }
 
@@ -38,7 +43,7 @@ const useFirebase = () => {
             } else {
                 setUser({})
             }
-
+            setIsLoading(false);
             setisLogin(false);
 
         });
@@ -46,13 +51,13 @@ const useFirebase = () => {
     }, [])
 
     const logout = () => {
-        setisLogin(true);
+        setIsLoading(true);
         signOut(auth).then(() => {
 
         }).catch((error) => {
             setUser(error);
         })
-            .finally(() => setisLogin(false));
+            .finally(() => setIsLoading(false));
     }
 
     const handleRegister = e => {
@@ -164,7 +169,10 @@ const useFirebase = () => {
         setError,
         loginRegisterUser,
         handleConfirmPass,
-        toggleLogin
+        toggleLogin,
+        setIsLoading,
+        isLoading,
+        mail
     }
 }
 
diff --git a/src/PrivetRoute/PrivetRoute.js b/src/PrivetRoute/PrivetRoute.js
index a123c5c..0839927 100644
--- a/src/PrivetRoute/PrivetRoute.js
+++ b/src/PrivetRoute/PrivetRoute.js
@@ -1,31 +1,14 @@
-import { Box, Skeleton } from '@mui/material';
 import React from 'react';
 import { Redirect } from 'react-router-dom';
 import { Route } from 'react-router-dom';
+import LoadingScreen from '../components/LoadingScreen/LoadingScreen';
 import useAuth from '../Hooks/useAuth';
 
 const PrivetRoute = ({ children, ...rest }) => {
-    let { user, isLogin } = useAuth();
+    const { user, isLoading } = useAuth();
     //this is used for solve reload to redirect login issue
-    if (isLogin) {
-        return <Box sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            minHeight: '70vh',
-            mx: 'auto',
-            mt: 10
-        }}>
-            <Box sx={{ width: '80%', mx: 'auto' }}>
-                <Skeleton />
-                <Skeleton variant="rectangular"
-                    width={'50%'}
-                    height={110} animation="wave" />
-                <Skeleton variant="rectangular"
-                    width={'100%'}
-                    height={110} animation="wave" />
-                <Skeleton animation="wave" />
-            </Box>
-        </Box>
+    if (isLoading) {
+        return (<LoadingScreen></LoadingScreen>);
     }
     return (
         <Route
@@ -46,4 +29,8 @@ const PrivetRoute = ({ children, ...rest }) => {
     );
 };
 
-export default PrivetRoute;
\ No newline at end of file
+export default PrivetRoute;
+
+/* if (!isLoading) {
+    return (<LoadingScreen></LoadingScreen>);
+} */
\ No newline at end of file
diff --git a/src/components/Header/Footer/Footer.js b/src/components/Header/Footer/Footer.js
index 240648b..801b1e9 100644
--- a/src/components/Header/Footer/Footer.js
+++ b/src/components/Header/Footer/Footer.js
@@ -102,13 +102,13 @@ const Footer = () => {
                                 </Divider>
                             </Root>
 
-                            <Box sx={{ mb: 2 }}><HashLink className='text-style' to='/doctors#doctors' color='inherit'>Find a Doctor</HashLink></Box>
+                            <Box sx={{ p: 2 }}><HashLink className='text-style' to='/doctors#doctors' color='inherit'>Find a Doctor</HashLink></Box>
 
-                            <Box sx={{ mb: 2 }}><HashLink className='text-style' to='/services#services' color='inherit'>All services</HashLink></Box>
+                            <Box sx={{ p: 2 }}><HashLink className='text-style' to='/services#services' color='inherit'>All services</HashLink></Box>
 
-                            <Box sx={{ mb: 2 }}><HashLink className='text-style' to='/appointment#appointment' color='inherit'>Make An Appointment</HashLink></Box>
+                            <Box sx={{ p: 2 }}><HashLink className='text-style' to='/appointment#appointment' color='inherit'>Make An Appointment</HashLink></Box>
 
-                            <Box sx={{ mb: 2 }}><HashLink className='text-style' to='/register' color='inherit'>Register For Service </HashLink></Box>
+                            <Box sx={{ p: 2 }}><HashLink className='text-style' to='/register' color='inherit'>Register For Service </HashLink></Box>
                         </Grid>
 
                         {/* ----------social media part ------------*/}
diff --git a/src/components/Home/Banner/Banner.js b/src/components/Home/Banner/Banner.js
index 9a8e0bd..1f9b72f 100644
--- a/src/components/Home/Banner/Banner.js
+++ b/src/components/Home/Banner/Banner.js
@@ -20,7 +20,7 @@ const Banner = () => {
                             {props.item.description}
                         </Typography>
 
-                        <HashLink smooth to="/doctors" className='text-style'>
+                        <HashLink smooth to="/appointment#appointment" className='text-style'>
                             <Button sx={{ mt: 2 }} variant="contained" className="CheckButton">
                                 Make an Appointment
                                 <AddCircleIcon />
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 5d9f3c0..d98d92d 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,4 +1,4 @@
-import { Container, TextField, Typography } from '@mui/material';
+import { Button, Container, TextField, Typography } from '@mui/material';
 import { Box, width } from '@mui/system';
 import React from 'react';
 import About from '../About/About';
@@ -8,8 +8,16 @@ import OurExperts from './OurExperts/OurExperts';
 import Whyus from './Whyus/Whyus';
 import SubscriptionsIcon from '@mui/icons-material/Subscriptions';
 import EmailIcon from '@mui/icons-material/Email';
+import swal from 'sweetalert';
 
 const Home = () => {
+    //swal alert
+    const mailSendBtn = () => {
+        return swal("WOW!! Your subscription is done you will get update when we setup our mail server", {
+            button: false,
+            icon: "success"
+        });
+    }
     return (
         <div id='home'>
             <Banner></Banner>
@@ -21,9 +29,12 @@ const Home = () => {
             <Box sx={{ p: 5, mb: 2, alignItems: 'center' }}>
                 <Typography sx={{ textAlign: "center" }} variant="h5"> <SubscriptionsIcon sx={{ color: 'primary.main', mr: 1, my: 0.5 }} /> Subscribe for our latest services and details</Typography>
 
-                <Box sx={{ display: 'flex', alignItems: 'flex-end', p: 2, mt: 1, mx: 'auto' }}>
-                    <EmailIcon sx={{ color: 'action.active', mr: 1, my: 0.5 }} />
-                    <TextField fullWidth label="fullWidth" id="fullWidth" label="Enter Your Mail Address" variant="standard" />
+                <Box sx={{ display: { xs: 'flex-wrap', md: 'flex' }, p: 2, mt: 1, mx: 'auto', minWidth: "70%" }}>
+                    <Box sx={{ display: 'flex', alignItems: 'flex-end', mb: 2, mx: 'auto', minWidth: "70%" }}>
+                        <EmailIcon sx={{ color: 'action.active', mr: 1, my: 0.5 }} />
+                        <TextField fullWidth id="fullWidth" label="Enter Your Mail Address" variant="standard" />
+                    </Box>
+                    <Button variant="outlined" color="primary" onClick={mailSendBtn} startIcon={<SubscriptionsIcon />}>Subscribe</Button>
                 </Box>
             </Box>
         </div>
diff --git a/src/components/Login/Login/Login.js b/src/components/Login/Login/Login.js
index 82275c6..9e36235 100644
--- a/src/components/Login/Login/Login.js
+++ b/src/components/Login/Login/Login.js
@@ -13,7 +13,7 @@ import { useLocation } from 'react-router-dom';
 import { useHistory } from 'react-router-dom';
 
 const Login = () => {
-    const { singInUsingGoogle, user, setUser, singInUsingFacebook, singInUsingGithub, handleRegister, handleEmail, handlePass, error, setError, toggleLogin, } = useAuth();
+    const { singInUsingGoogle, handlePasswordReset, user, setUser, mail, singInUsingFacebook, singInUsingGithub, handleRegister, handleEmail, handlePass, error, setError, toggleLogin, setIsLoading } = useAuth();
 
     //location is use for privet route
     const location = useLocation();
@@ -30,7 +30,8 @@ const Login = () => {
             .catch((error) => {
                 const errorMessage = error.message;
                 setError(errorMessage);
-            });
+            })
+            .finally(() => setIsLoading(false));
     }
 
     const handleFacebooksignIn = () => {
@@ -43,7 +44,8 @@ const Login = () => {
             }).catch((error) => {
                 const errorMessage = error.message;
                 setError(errorMessage);
-            });
+            })
+            .finally(() => setIsLoading(false));
     }
 
     const handleGithubSignIn = () => {
@@ -55,7 +57,8 @@ const Login = () => {
             })
             .catch(error => {
                 setError(error.message)
-            });
+            })
+            .finally(() => setIsLoading(false));
     }
 
     return (
@@ -118,7 +121,11 @@ const Login = () => {
                                                 {error}
                                             </Typography>
                                         </Grid>
-
+                                        {mail ?
+                                            <Button className='body-link-text-style' variant="body2" onClick={handlePasswordReset}>
+                                                Forget Password? Reset now
+                                            </Button> : <></>
+                                        }
                                     </Grid>
                                     <Button
                                         onClick={handleRegister}
diff --git a/src/components/Login/Login/Register/Register.js b/src/components/Login/Login/Register/Register.js
index 099956c..c83d079 100644
--- a/src/components/Login/Login/Register/Register.js
+++ b/src/components/Login/Login/Register/Register.js
@@ -23,16 +23,6 @@ const Register = () => {
 
     const { user, singInUsingGoogle, singInUsingFacebook, singInUsingGithub, handleConfirmPass, handleRegister, handleUserName, handleEmail, handlePass, error, toggleLogin } = useAuth();
 
-    const handleSubmit = (event) => {
-        event.preventDefault();
-        const data = new FormData(event.currentTarget);
-        console.log({
-            email: data.get('email'),
-            password: data.get('password'),
-            confirempassword: data.get('password')
-        });
-    };
-    console.log(error);
     return (
         <Container component="main" maxWidth="xs">
             <CssBaseline />
diff --git a/src/components/Login/Login/UserProfile/UserProfile.js b/src/components/Login/Login/UserProfile/UserProfile.js
index 356cd3e..82363a5 100644
--- a/src/components/Login/Login/UserProfile/UserProfile.js
+++ b/src/components/Login/Login/UserProfile/UserProfile.js
@@ -7,7 +7,7 @@ import useAuth from '../../../../Hooks/useAuth';
 const UserProfile = () => {
     const { user } = useAuth();
     return (
-        <Card sx={{ display: 'flex', maxWidth: '600px', my: 8, mx: 'auto', p: 5 }}>
+        <Card sx={{ display: { xs: 'flex-wrap', md: 'flex' }, maxWidth: '600px', my: 8, mx: 'auto', p: 5 }}>
             <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                 <CardContent sx={{ flex: '1 0 auto' }}>
                     <Typography component="div" variant="h5">
@@ -21,7 +21,7 @@ const UserProfile = () => {
                 </Box>
             </Box>
             <Avatar
-                sx={{ bgcolor: pink[500], width: 150, height: 150 }}
+                sx={{ mx: { xs: "auto", md: 1 }, border: 1, borderColor: '#f48fb1', boxShadow: 1, bgcolor: pink[500], width: 150, height: 150 }}
                 alt={user.displayName}
                 src={user.photoURL}
             />
diff --git a/src/components/Services/Appointment/Appointment.js b/src/components/Services/Appointment/Appointment.js
index 2fcd136..37b903d 100644
--- a/src/components/Services/Appointment/Appointment.js
+++ b/src/components/Services/Appointment/Appointment.js
@@ -22,7 +22,6 @@ const Appointment = () => {
 
     //swal alert
     const swalAlert = () => {
-        console.log('swal is clicked');
         return swal("Your Appointment is Done You will Receive a mail ASAP.", {
             button: false,
             icon: "success"