diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000..1888406
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,23 @@
+# Step 1: Build the React app
+FROM node:16 AS build
+
+# Set working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY web-app/package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the frontend code
+COPY web-app/ .
+
+# Build the React app (for production build)
+RUN npm run build
+
+# Expose port 3000
+EXPOSE 3000
+
+# Step 2: Serve the React app using npm start (for development)
+CMD ["npm", "start"]
diff --git a/frontend/web-app/src/Components/NavBar.tsx b/frontend/web-app/src/Components/NavBar.tsx
index 9c2102f..5289f58 100644
--- a/frontend/web-app/src/Components/NavBar.tsx
+++ b/frontend/web-app/src/Components/NavBar.tsx
@@ -1,10 +1,4 @@
 import React from 'react'
-<<<<<<< HEAD
-
-function NavBar() {
-  return (
-    <div>NavBar</div>
-=======
 import { Link, Outlet } from 'react-router-dom';
 
 function NavBar() {
@@ -17,7 +11,6 @@ function NavBar() {
       </div>
       <Outlet />
     </div>
->>>>>>> fe68087a11103b291e8a14f454bdff774de1db60
   )
 };
 
diff --git a/frontend/web-app/src/Constants/global.ts b/frontend/web-app/src/Constants/global.ts
new file mode 100644
index 0000000..8b990a0
--- /dev/null
+++ b/frontend/web-app/src/Constants/global.ts
@@ -0,0 +1 @@
+export const Dummy = 5000 //Dummy constant
\ No newline at end of file
diff --git a/frontend/web-app/src/Context/AuthContext.tsx b/frontend/web-app/src/Context/AuthContext.tsx
new file mode 100644
index 0000000..70863d5
--- /dev/null
+++ b/frontend/web-app/src/Context/AuthContext.tsx
@@ -0,0 +1,37 @@
+import { createContext, useReducer } from "react";
+import { AuthContextAction, AuthContextState } from "../Interfaces/AuthInterfaces";
+
+// Dummy AuthContext
+
+const AuthContext = createContext({});
+
+const initialState : AuthContextState={
+    authUser: '',
+    authToken: '',
+    isLoading: false,
+}
+
+const reducer = (state: AuthContextState, action: AuthContextAction): AuthContextState =>{
+    switch(action.type){
+        case 'LOGIN': {
+            return {...state, authUser: action.data.authUser , authToken: action.data.authToken}
+        }
+        default: {
+            return state;
+        }
+    }
+}
+
+export const AuthProvider = ({children}: {children: any}) => {
+    const [{authUser, authToken, isLoading}, dispatch] = useReducer(reducer, initialState);
+    const values = {
+        authUser,
+        authToken,
+        isLoading,
+        dispatch,
+    }
+    return <AuthContext.Provider value={values}>{children}</AuthContext.Provider>
+
+}
+
+export default AuthContext;
\ No newline at end of file
diff --git a/frontend/web-app/src/Controller/AuthController.ts b/frontend/web-app/src/Controller/AuthController.ts
new file mode 100644
index 0000000..3610227
--- /dev/null
+++ b/frontend/web-app/src/Controller/AuthController.ts
@@ -0,0 +1,19 @@
+import authService from "../Services/AuthServices";
+import axiosInstance from "../Utils/axiosInstance";
+
+// Dummy AuthController
+class AuthController{
+    public getUsers= async (): Promise<any> =>{
+        try{
+            const response = await axiosInstance.get('/users');
+            const usersData = authService.getUsers(response.data);
+            return usersData;
+        }catch(error){
+            throw new Error('Error getUsers');
+        }
+    }
+}
+
+const authController = new AuthController();
+
+export default authController;
\ No newline at end of file
diff --git a/frontend/web-app/src/Images/dummy-image.png b/frontend/web-app/src/Images/dummy-image.png
new file mode 100644
index 0000000..109f4af
Binary files /dev/null and b/frontend/web-app/src/Images/dummy-image.png differ
diff --git a/frontend/web-app/src/Interfaces/AuthInterfaces.ts b/frontend/web-app/src/Interfaces/AuthInterfaces.ts
new file mode 100644
index 0000000..909f031
--- /dev/null
+++ b/frontend/web-app/src/Interfaces/AuthInterfaces.ts
@@ -0,0 +1,15 @@
+// Dummy AuthInterfaces
+
+export interface AuthContextState{
+    authUser: string,
+    authToken: string,
+    isLoading: boolean,
+}
+
+export interface AuthContextAction{
+    type: string,
+    data: {
+        authUser: string,
+        authToken: string,
+    }
+}
\ No newline at end of file
diff --git a/frontend/web-app/src/Services/AuthServices.ts b/frontend/web-app/src/Services/AuthServices.ts
new file mode 100644
index 0000000..31535b6
--- /dev/null
+++ b/frontend/web-app/src/Services/AuthServices.ts
@@ -0,0 +1,18 @@
+// This is an example of how to create service 
+// please remember that I have used any as an interface for some variable 
+// but that is not good please make specific interface for specific variable used in controller and service.
+
+
+class AuthService{
+    public getUsers=(data:any)=>{
+        return data.map((userData: any)=>{
+            return {
+                name: userData.username
+            }
+        })
+    }
+}
+
+const authService = new AuthService();
+
+export default authService;
\ No newline at end of file
diff --git a/frontend/web-app/src/Styles/global.css b/frontend/web-app/src/Styles/global.css
new file mode 100644
index 0000000..538abe8
--- /dev/null
+++ b/frontend/web-app/src/Styles/global.css
@@ -0,0 +1 @@
+/* Global CSS */
diff --git a/frontend/web-app/src/Utils/axiosInstance.ts b/frontend/web-app/src/Utils/axiosInstance.ts
new file mode 100644
index 0000000..e2c3c1b
--- /dev/null
+++ b/frontend/web-app/src/Utils/axiosInstance.ts
@@ -0,0 +1,13 @@
+import axios from "axios";
+
+// Dummy URL is used here we need to change it later.
+
+const axiosInstance = axios.create({
+    baseURL: 'https://jsonplaceholder.typicode.com',
+    timeout: 5000,
+    headers: {
+        "Content-Type": 'application/json',
+    }
+})
+
+export default axiosInstance;
\ No newline at end of file
diff --git a/frontend/web-app/src/Utils/global.ts b/frontend/web-app/src/Utils/global.ts
new file mode 100644
index 0000000..3be8936
--- /dev/null
+++ b/frontend/web-app/src/Utils/global.ts
@@ -0,0 +1,5 @@
+// Dummy Utils function
+export const isNull=(item: any)=>{
+    if(item) return true;
+    else return false;
+}
\ No newline at end of file