diff --git a/src/App.js b/src/App.js
index b9fbda6..b08d692 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,35 +22,33 @@ import Logout from './routes/Logout';
 
 const queryClient = new QueryClient();
 
-function App() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <BrowserRouter>
-        <Routes>
-          <Route index element={<Home />} />
-          <Route path="/login" element={<Login />} />
-          <Route path="/sign_up" element={<SignUp />} />
-          <Route element={<ProtectedRoute />}>
-            <Route element={<Layout />}>
-              <Route path="/appointment-list" element={<AppointmentList />} />
-              <Route path="/appointment/:appId" element={<AppointmentUpdate />} />
-              <Route path="/doctors" element={<Doctors />} />
-              <Route path="/doctor/:id" element={<DoctorDetail />} />
-              <Route path="/create-appointment" element={<CreateAppointment />} />
-              <Route element={<ProtectedRouteAdmin />}>
-                <Route path="/add-docs" element={<AddDoc />} />
-                <Route path="/delete-docs" element={<DeleteDoc />} />
-              </Route>
+const App = () => (
+  <QueryClientProvider client={queryClient}>
+    <BrowserRouter>
+      <Routes>
+        <Route index element={<Home />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/sign_up" element={<SignUp />} />
+        <Route element={<ProtectedRoute />}>
+          <Route element={<Layout />}>
+            <Route path="/appointment-list" element={<AppointmentList />} />
+            <Route path="/appointment/:appId" element={<AppointmentUpdate />} />
+            <Route path="/doctors" element={<Doctors />} />
+            <Route path="/doctor/:id" element={<DoctorDetail />} />
+            <Route path="/create-appointment" element={<CreateAppointment />} />
+            <Route element={<ProtectedRouteAdmin />}>
+              <Route path="/add-docs" element={<AddDoc />} />
+              <Route path="/delete-docs" element={<DeleteDoc />} />
             </Route>
-            <Route path="/logout" element={<Logout />} />
           </Route>
-          <Route path="/unauthorize" element={<UnAuthorize />} />
-          <Route path="*" element={<NotMatch />} />
-        </Routes>
-      </BrowserRouter>
-      <ToastContainer />
-    </QueryClientProvider>
-  );
-}
+          <Route path="/logout" element={<Logout />} />
+        </Route>
+        <Route path="/unauthorize" element={<UnAuthorize />} />
+        <Route path="*" element={<NotMatch />} />
+      </Routes>
+    </BrowserRouter>
+    <ToastContainer />
+  </QueryClientProvider>
+);
 
 export default App;
diff --git a/src/routes/AddDoc.jsx b/src/routes/AddDoc.jsx
index b046095..0582e5a 100644
--- a/src/routes/AddDoc.jsx
+++ b/src/routes/AddDoc.jsx
@@ -25,9 +25,7 @@ const AddDoc = () => {
 
   const validFileExtensions = { image: ['jpg', 'gif', 'png', 'jpeg', 'svg', 'webp'] };
 
-  function isValidFileType(fileName, fileType) {
-    return fileName && validFileExtensions[fileType].indexOf(fileName.split('.').pop()) > -1;
-  }
+  const isValidFileType = (fileName, fileType) => fileName && validFileExtensions[fileType].indexOf(fileName.split('.').pop()) > -1;
 
   const validationSchema = Yup.object().shape({
     name: Yup.string()
diff --git a/src/routes/Doctors.jsx b/src/routes/Doctors.jsx
index 413298f..dc0594b 100644
--- a/src/routes/Doctors.jsx
+++ b/src/routes/Doctors.jsx
@@ -15,27 +15,31 @@ import useWindowSize from '../hooks/use-window-size';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 
-function SampleNextArrow(props) {
+const SampleNextArrow = (props) => {
   const { className, style, onClick } = props;
   return (
     <div
       className={className}
-      style={{ ...style, display: 'block', background: 'red' }}
+      style={{
+        ...style, display: 'block', background: 'green', borderRadius: '50%',
+      }}
       onClick={onClick}
     />
   );
-}
+};
 
-function SamplePrevArrow(props) {
+const SamplePrevArrow = (props) => {
   const { className, style, onClick } = props;
   return (
     <div
       className={className}
-      style={{ ...style, display: 'block', background: 'green' }}
+      style={{
+        ...style, display: 'block', background: 'green', borderRadius: '50%',
+      }}
       onClick={onClick}
     />
   );
-}
+};
 
 const Doctors = () => {
   const dispatch = useDispatch();
diff --git a/src/routes/Login.jsx b/src/routes/Login.jsx
index 8db04e1..7507ec9 100644
--- a/src/routes/Login.jsx
+++ b/src/routes/Login.jsx
@@ -15,7 +15,7 @@ import Button from '../components/Button';
 const Login = () => {
   const [userSignedIn] = useSession();
   const {
-    error, loggedIn, needsConfirmation,
+    loggedIn, needsConfirmation,
   } = useSelector(selectAuth);
   const dispatch = useDispatch();
   const validationSchema = Yup.object().shape({
@@ -39,16 +39,12 @@ const Login = () => {
 
   const login = (data) => {
     toast.promise(
-      dispatch(
-        loginUser(data),
-      ).then(() => {
-        if (error) {
-          toast.error(`Oops, something went wrong: ${error}`);
-        }
-      }),
+      dispatch(loginUser(data))
+        .catch((error) => {
+          toast.error(`Oops, something went wrong: ${error.message}`);
+        }),
       {
         pending: 'loading...',
-        error,
         success: 'Service is working!',
       },
     );