diff --git a/src/__test__/signInSlice.test.tsx b/src/__test__/signInSlice.test.tsx
index ef437011..c07edd50 100644
--- a/src/__test__/signInSlice.test.tsx
+++ b/src/__test__/signInSlice.test.tsx
@@ -109,7 +109,7 @@ describe('signInSlice', () => {
       token: 'testToken',
       loading: false,
       error: null,
-      message: 'Login successful',
+      message: 'Logout Successfully',
       role: 'Admin',
       needsVerification: false,
       needs2FA: false,
@@ -162,10 +162,9 @@ describe('SignIn Component', () => {
     fireEvent.click(submitButton);
 
     await waitFor(() => {
-      expect(screen.queryByText(/Loading.../i)).toBeInTheDocument();
+      expect(screen.getByTestId('Loading')).toBeInTheDocument();
     });
   });
-
   it('displays error messages for invalid input', async () => {
     const emailInput = screen.getByPlaceholderText('Enter your email');
     const passwordInput = screen.getByPlaceholderText('Enter your password');
@@ -196,11 +195,10 @@ describe('SignIn Component', () => {
   it('submits the form successfully', async () => {
     const emailInput = screen.getByPlaceholderText('Enter your email');
     const passwordInput = screen.getByPlaceholderText('Enter your password');
-    const submitButton = screen.getByText(/Sign In/);
 
     fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
     fireEvent.change(passwordInput, { target: { value: 'password123' } });
-    fireEvent.click(submitButton);
+    fireEvent.submit(screen.getByTestId('form'));
 
     await waitFor(() => {
       expect(screen.queryByText(/Loading.../i)).not.toBeInTheDocument();
diff --git a/src/features/Auth/SignInSlice.tsx b/src/features/Auth/SignInSlice.ts
similarity index 92%
rename from src/features/Auth/SignInSlice.tsx
rename to src/features/Auth/SignInSlice.ts
index f43bb858..4ba36223 100644
--- a/src/features/Auth/SignInSlice.tsx
+++ b/src/features/Auth/SignInSlice.ts
@@ -40,13 +40,13 @@ export const initialState: SignInState = {
   needs2FA: false,
 };
 
-const apiUrl = `${import.meta.env.VITE_BASE_URL}/user/login`;
+// const apiUrl = `${import.meta.env.VITE_BASE_URL}/user/login`;
 
 export const loginUser = createAsyncThunk<LoginResponse, Credentials>(
   'signIn/loginUser',
   async (credentials: Credentials, thunkAPI) => {
     return axios
-      .post(apiUrl, credentials)
+      .post('https://dynamites-ecomm-be.onrender.com/api/v1', credentials)
       .then((response) => response.data)
       .catch((error) => thunkAPI.rejectWithValue(error.response.data));
   }
@@ -57,6 +57,7 @@ const signInSlice = createSlice({
   initialState,
   reducers: {
     logout(state) {
+      localStorage.removeItem('token');
       return {
         ...state,
         token: null,
@@ -101,12 +102,12 @@ const signInSlice = createSlice({
         };
       }
     );
-    //
     builder.addCase(loginUser.rejected, (state, action: PayloadAction<any>) => {
       return {
         ...state,
         loading: false,
         error: action.payload.message,
+        message: null,
         needsVerification: action.payload.message.includes('verify your email'),
       };
     });
diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx
index 24e7740c..d2278ba3 100644
--- a/src/pages/SignIn.tsx
+++ b/src/pages/SignIn.tsx
@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useFormik } from 'formik';
 import * as yup from 'yup';
+import BeatLoader from 'react-spinners/BeatLoader';
 import { MdOutlineEmail } from 'react-icons/md';
 import { PiLockKeyBold } from 'react-icons/pi';
 import { FcGoogle } from 'react-icons/fc';
@@ -67,7 +68,7 @@ function SignIn() {
         </h1>
         {error && <p className="text-center text-red-500">{error}</p>}
         {message && <p className="text-center text-green-500">{message}</p>}
-        <div className="flex flex-col gap-5">
+        <form className="flex flex-col gap-5" data-testid="form">
           <div>
             <HSInput
               data-testid="email"
@@ -130,13 +131,19 @@ function SignIn() {
           </div>
           <Button
             data-testid="Sign In"
-            title={loading ? 'Loading...' : 'Sign In'}
+            title={
+              loading ? (
+                <BeatLoader data-testid="Loading" color="#ffffff" size={8} />
+              ) : (
+                'Sign In'
+              )
+            }
             onClick={formik.handleSubmit}
           />
           <div>
             <p className="text-center">
               Don&apos;t have an account?{' '}
-              <Link to="/" className="text-primary">
+              <Link to="/signUp" className="text-primary">
                 Sign up
               </Link>
             </p>
@@ -160,7 +167,7 @@ function SignIn() {
               <FaFacebook color="white" size={16} />
             </Link>
           </div>
-        </div>
+        </form>
         <Link to="/" className="text-primary font-light mt-4 block text-center">
           &larr; Back to Home
         </Link>
diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
index 08592b57..61bf5f8e 100644
--- a/src/pages/SignUp.tsx
+++ b/src/pages/SignUp.tsx
@@ -29,7 +29,7 @@ function SignUp() {
     dispatch(registerUser(values))
       .then(() => {
         actions.setSubmitting(false);
-        navigate('/login');
+        navigate('/signIn');
       })
       .catch(() => {
         actions.setSubmitting(false);
@@ -101,7 +101,7 @@ function SignUp() {
   return (
     <div className="flex justify-center items-center h-[90vh] sm:h-screen bg-white m-2">
       <div className="w-[80%] md:w-[60%] lg:w-[40%] p-5 shadow-lg border-[1px] border-gray-300 rounded-md ">
-        <h1 className="text-center font-bold text-3xl mb-4 text-xl">Sign Up</h1>
+        <h1 className="text-center font-bold text-3xl mb-4 ">Sign Up</h1>
         <Formik
           initialValues={{
             firstName: '',