diff --git a/package.json b/package.json
index 110a940..fcac415 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@hookform/resolvers": "^3.6.0",
     "@reduxjs/toolkit": "^2.2.5",
     "@types/react-redux": "^7.1.33",
+    "axios": "^1.7.2",
     "clsx": "^2.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -25,6 +26,7 @@
     "react-icons": "^5.2.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",
+    "react-toastify": "^10.0.5",
     "sass": "^1.77.2",
     "tailwind-merge": "^2.3.0",
     "zod": "^3.23.8"
diff --git a/src/components/Counter.tsx b/src/components/Counter.tsx
deleted file mode 100644
index 9a9c909..0000000
--- a/src/components/Counter.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useDispatch, useSelector } from 'react-redux';
-import { AppDispatch, RootState } from '../state/store';
-import { decrement, increment } from '../state/counter/counterSlice';
-
-const Counter = () => {
-  const count = useSelector((state: RootState) => state.counter.value);
-  const dispatch = useDispatch<AppDispatch>();
-
-  return (
-    <div>
-      <h2>{count}</h2>
-      <div>
-        <button onClick={() => dispatch(increment())}>Increment</button>
-        <button onClick={() => dispatch(decrement())}>Decrement</button>
-      </div>
-    </div>
-  );
-};
-
-export default Counter;
diff --git a/src/components/LoginComponent.tsx b/src/components/LoginComponent.tsx
new file mode 100644
index 0000000..56aa612
--- /dev/null
+++ b/src/components/LoginComponent.tsx
@@ -0,0 +1,109 @@
+import { useEffect } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import GoogleIcon from './../assets/googleIcon.svg';
+import Button from './Button';
+import Input from './Input';
+import { loginSchema, LoginData } from './../utils/schemas';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { setToken, setUser } from '../redux/reducers/userSlice';
+import { toast } from 'react-toastify';
+import { useLoginUserMutation } from '../services/authenticationAPI';
+
+const LoginComponent = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const dispatch = useDispatch();
+
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors, isSubmitting },
+  } = useForm<LoginData>({ resolver: zodResolver(loginSchema) });
+
+  const [loginUser, { data, error, isLoading, isSuccess, isError }] = useLoginUserMutation();
+
+  const onSubmit: SubmitHandler<LoginData> = async (userCredentials) => {
+    await loginUser(userCredentials);
+  };
+
+  useEffect(() => {
+    if (isError && error) {
+      setError('root', {
+        message: 'Invalid email or password',
+      });
+      return;
+    }
+    if (isSuccess && data) {
+      const token = data.token;
+
+      dispatch(setUser(data.user));
+      dispatch(setToken(token));
+
+      toast.success('Login successful');
+      const from = location.state?.from?.pathname || '/';
+      navigate(from);
+    }
+  }, [isError, isSuccess, error, data, navigate, location.state, dispatch]);
+
+  const handleGoogleAuthentication = (e: any) => {
+    e.preventDefault();
+    document.location.assign('https://e-commerce-mavericcks-bn-staging-istf.onrender.com/api/auth/google');
+  };
+
+  return (
+    <>
+      <div className='w-full xl:container flex flex-col-reverse gap-14 md:flex-row px-4 mb-8 items-center md:gap-5 transition-all md:justify-between md:px-10 lg:justify-around mt-5 md:mt-10'>
+        <div className='w-full md:w-7/12 xl:w-4/12 border-greenColor border-2 rounded-xl p-8'>
+          <p className='font-bold text-3xl'>Existing Customer?</p>
+          <p>Sign in to continue</p>
+          {errors.root && (
+            <p className='text-sm bg-redColor text-whiteColor mt-4py-2 rounded-lg px-3'>{errors.root.message}</p>
+          )}
+          <form onSubmit={handleSubmit(onSubmit)} className='flex flex-col gap-4 justify-center mt-8'>
+            <Input
+              id='loginEmail'
+              label='Email'
+              type='email'
+              placeholder='Enter your email'
+              {...register('email')}
+              error={errors.email && errors.email.message}
+            />
+            <Input
+              id='loginPassword'
+              label='Password'
+              type='password'
+              placeholder='Enter your password'
+              {...register('password')}
+              error={errors.password && errors.password.message}
+            />
+            <button
+              type='submit'
+              className='p-2 rounded-lg bg-greenColor hover:bg-darkGreen transition-all text-whiteColor font-bold'
+            >
+              {isSubmitting || isLoading ? 'Loading...' : 'Sign In'}
+            </button>
+            {isSuccess && <p className='text-green-600 text-xs font-normal'>Login successful!</p>}
+            <span className='self-center font-bold text-grayColor'>or</span>
+            <button
+              onClick={handleGoogleAuthentication}
+              className='p-2 font-bold text-teal-700 border-2 border-greenColor rounded-lg flex flex-row items-center justify-center gap-2 hover:bg-teal-100 transition-all'
+            >
+              <img src={GoogleIcon} alt='Google Icon' className='w-5' />
+              Continue with Google
+            </button>
+          </form>
+        </div>
+        <div className='w-full md:w-3/12 mt-0 p-5 border-b-2 md:p-0 md:border-b-0 h-fit flex flex-col gap-3 justify-self-start self-start'>
+          <p className='font-bold text-3xl'>New Customer?</p>
+          <p>Create an account here</p>
+          <Button type='button' text='Register Here' onClick={() => navigate('/register')} />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default LoginComponent;
diff --git a/src/components/register/RegisterSection.tsx b/src/components/register/RegisterSection.tsx
index 6736205..46a3d93 100644
--- a/src/components/register/RegisterSection.tsx
+++ b/src/components/register/RegisterSection.tsx
@@ -7,10 +7,10 @@ import { SubmitHandler, useForm } from 'react-hook-form';
 import { extendedSchema, ExtendedFormFields } from '../../utils/schemas';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
-import { useRegisterUserMutation } from '../../services/authAPI';
-import { setUserRegistered } from '../../state/register/registerSlice';
+import { setUserRegistered } from '../../redux/reducers/registerSlice';
 import { useEffect } from 'react';
 import { QueryErrorData } from '../../utils/schemas';
+import { useRegisterUserMutation } from '../../services/authenticationAPI';
 
 const RegisterSection = () => {
   const navigate = useNavigate();
diff --git a/src/index.js b/src/index.js
index b9c4b42..7cfcd0b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
diff --git a/src/main.tsx b/src/main.tsx
index 9f1839c..5df6c8b 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 import './index.css';
-import { store } from './state/store.ts';
+import { store } from './redux/store.ts';
 import { Provider } from 'react-redux';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 2135579..338bea1 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,20 +1,15 @@
-import { useNavigate } from "react-router-dom";
+import LoginComponent from '../components/LoginComponent';
+import Navbar from '../components/navbar/Navbar';
+import Footer from '../components/footer/Footer';
 
 function Login() {
-    const navigate = useNavigate();
-
-    const handleNavigate = () => {
-        navigate("/");
-    };
-
-    return (
-        <div className="w-screen h-screen flex flex-row items-start justify-center bg-slate-900 text-white pt-20">
-            <div className="flex flex-col gap-5">
-                <h1 className="text-5xl">Login page</h1>
-                <button className="border rounded-md p-3 hover:text-gray-800 hover:bg-gray-200" onClick={handleNavigate}>Back home</button>
-            </div>
-        </div>
-    );
+  return (
+    <>
+      <Navbar />
+      <LoginComponent />
+      <Footer />
+    </>
+  );
 }
 
 export default Login;
diff --git a/src/state/register/registerSlice.ts b/src/redux/reducers/registerSlice.ts
similarity index 100%
rename from src/state/register/registerSlice.ts
rename to src/redux/reducers/registerSlice.ts
diff --git a/src/redux/reducers/userSlice.ts b/src/redux/reducers/userSlice.ts
new file mode 100644
index 0000000..6ed9537
--- /dev/null
+++ b/src/redux/reducers/userSlice.ts
@@ -0,0 +1,31 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  user: null,
+  token: null,
+  subscription: null,
+};
+
+const userSlice = createSlice({
+  name: 'user',
+  initialState,
+  reducers: {
+    setUser: (state, action) => {
+      state.user = action.payload;
+    },
+    setToken: (state, action) => {
+      state.token = action.payload;
+    },
+    setSubscription: (state, action) => {
+      state.subscription = action.payload;
+    },
+    clearUserData: state => {
+      state.user = null;
+      state.token = null;
+      state.subscription = null;
+    },
+  },
+});
+
+export const { setUser, setToken, setSubscription, clearUserData } = userSlice.actions;
+export default userSlice.reducer;
diff --git a/src/state/store.ts b/src/redux/store.ts
similarity index 80%
rename from src/state/store.ts
rename to src/redux/store.ts
index fbc89f9..87cab3c 100644
--- a/src/state/store.ts
+++ b/src/redux/store.ts
@@ -1,12 +1,12 @@
+// src/store.js
+
 import { configureStore } from '@reduxjs/toolkit';
 import { mavericksApi } from '../services';
-import counterReducer from './counter/counterSlice';
 import { setupListeners } from '@reduxjs/toolkit/query';
-import registerReducer from './register/registerSlice';
+import registerReducer from './reducers/registerSlice';
 
 export const store = configureStore({
   reducer: {
-    counter: counterReducer,
     register: registerReducer,
     [mavericksApi.reducerPath]: mavericksApi.reducer,
   },
diff --git a/src/services/authAPI.ts b/src/services/authenticationApi.ts
similarity index 88%
rename from src/services/authAPI.ts
rename to src/services/authenticationApi.ts
index b7e4aea..1b3bc7c 100644
--- a/src/services/authAPI.ts
+++ b/src/services/authenticationApi.ts
@@ -10,10 +10,10 @@ const authAPI = mavericksApi.injectEndpoints({
       }),
     }),
     loginUser: builder.mutation({
-      query: userData => ({
+      query: credentials => ({
         url: `auth/login`,
         method: 'POST',
-        body: userData,
+        body: credentials,
       }),
     }),
   }),
diff --git a/src/state/counter/counterSlice.ts b/src/state/counter/counterSlice.ts
deleted file mode 100644
index f0c3b4b..0000000
--- a/src/state/counter/counterSlice.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { PayloadAction, createAsyncThunk, createSlice } from '@reduxjs/toolkit';
-
-interface CounterState {
-  value: number;
-}
-
-const initialState: CounterState = {
-  value: 0,
-};
-
-const counterSlice = createSlice({
-  name: 'counter',
-  initialState,
-  reducers: {
-    increment: state => {
-      state.value += 1;
-    },
-    decrement: state => {
-      state.value -= 1;
-    },
-    incrementByAmount: (state, action: PayloadAction<number>) => {
-      state.value += action.payload;
-    },
-  },
-  extraReducers: builder => {
-    builder
-      .addCase(incrementAsync.pending, () => {
-        console.log('incrementAsync.pending');
-      })
-      .addCase(incrementAsync.fulfilled, (state, action: PayloadAction<number>) => {
-        state.value += action.payload;
-      });
-  },
-});
-
-export const incrementAsync = createAsyncThunk('counter/incrementAsync', async (amount: number) => {
-  await new Promise(resolve => setTimeout(resolve, 1000));
-  return amount;
-});
-
-export const { increment, decrement, incrementByAmount } = counterSlice.actions;
-
-export default counterSlice.reducer;
diff --git a/src/utils/schemas.ts b/src/utils/schemas.ts
index ae9766e..30eb47a 100644
--- a/src/utils/schemas.ts
+++ b/src/utils/schemas.ts
@@ -36,3 +36,9 @@ export interface QueryErrorData {
   status: number | undefined;
   data: ErrorData;
 }
+export const loginSchema = z.object({
+  email: z.string().email({ message: 'A valid email is required' }),
+  password: z.string().min(5, { message: 'Password must be 5 characters or more' }),
+});
+
+export type LoginData = z.infer<typeof loginSchema>;