diff --git a/frontend/react-app/package-lock.json b/frontend/react-app/package-lock.json
index 2b6c9c6..ab21096 100644
--- a/frontend/react-app/package-lock.json
+++ b/frontend/react-app/package-lock.json
@@ -13,8 +13,10 @@
         "@testing-library/user-event": "^13.5.0",
         "ajv": "^8.17.1",
         "ajv-keywords": "^5.1.0",
+        "framer-motion": "^12.6.3",
         "jquery": "^3.7.1",
         "lucide-react": "^0.486.0",
+        "motion": "^12.6.3",
         "react": "^18.3.1",
         "react-cookie": "^7.2.2",
         "react-dom": "^18.3.1",
@@ -8870,6 +8872,32 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.6.3",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.6.3.tgz",
+      "integrity": "sha512-2hsqknz23aloK85bzMc9nSR2/JP+fValQ459ZTVElFQ0xgwR2YqNjYSuDZdFBPOwVCt4Q9jgyTt6hg6sVOALzw==",
+      "dependencies": {
+        "motion-dom": "^12.6.3",
+        "motion-utils": "^12.6.3",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -13110,6 +13138,44 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/motion": {
+      "version": "12.6.3",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.6.3.tgz",
+      "integrity": "sha512-zw/vqUgv5F5m9fkvOl/eCv2AF1+tkeZl3fu2uIlisIaip8sm5e0CouAl6GkdiRoF+G7s29CjqMdIyPMirwUGHA==",
+      "dependencies": {
+        "framer-motion": "^12.6.3",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.6.3",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.6.3.tgz",
+      "integrity": "sha512-gRY08RjcnzgFYLemUZ1lo/e9RkBxR+6d4BRvoeZDSeArG4XQXERSPapKl3LNQRu22Sndjf1h+iavgY0O4NrYqA==",
+      "dependencies": {
+        "motion-utils": "^12.6.3"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.6.3",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.6.3.tgz",
+      "integrity": "sha512-R/b3Ia2VxtTNZ4LTEO5pKYau1OUNHOuUfxuP0WFCTDYdHkeTBR9UtxR1cc8mDmKr8PEhmmfnTKGz3rSMjNRoRg=="
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/frontend/react-app/package.json b/frontend/react-app/package.json
index 41607bb..888ca44 100644
--- a/frontend/react-app/package.json
+++ b/frontend/react-app/package.json
@@ -8,8 +8,10 @@
     "@testing-library/user-event": "^13.5.0",
     "ajv": "^8.17.1",
     "ajv-keywords": "^5.1.0",
+    "framer-motion": "^12.6.3",
     "jquery": "^3.7.1",
     "lucide-react": "^0.486.0",
+    "motion": "^12.6.3",
     "react": "^18.3.1",
     "react-cookie": "^7.2.2",
     "react-dom": "^18.3.1",
diff --git a/frontend/react-app/src/App.js b/frontend/react-app/src/App.js
index 8307a60..b81564d 100644
--- a/frontend/react-app/src/App.js
+++ b/frontend/react-app/src/App.js
@@ -18,6 +18,7 @@ import CreateTask from './pages/CreateTask';
 import ChangePassword from './pages/ChangePassword';
 import EditUserDetails from './pages/EditUserDetails';
 import CreatTeamPage from './pages/CreateTeamPage';
+import Loading from './pages/Loading';
 
 
 function App() {
diff --git a/frontend/react-app/src/css/Loading.css b/frontend/react-app/src/css/Loading.css
new file mode 100644
index 0000000..ff27c5a
--- /dev/null
+++ b/frontend/react-app/src/css/Loading.css
@@ -0,0 +1,6 @@
+.loadingContainer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 50px;
+}
\ No newline at end of file
diff --git a/frontend/react-app/src/pages/AdminAllUsers.jsx b/frontend/react-app/src/pages/AdminAllUsers.jsx
index a794b54..7240871 100644
--- a/frontend/react-app/src/pages/AdminAllUsers.jsx
+++ b/frontend/react-app/src/pages/AdminAllUsers.jsx
@@ -3,6 +3,7 @@ import Header from '../components/Header'
 import '../css/AdminAllUsers.css'
 import {useState, useEffect} from 'react'
 import { getTeams } from '../api/teamApi';
+import Loading from './Loading';
 
 
 function AdminAllUsers(){
@@ -23,7 +24,7 @@ function AdminAllUsers(){
         
     },[])
     if(loading){
-        return(<div>...loading</div>)
+        return(<Loading/>)
     }
     return(
         <div className='pageContainer'>
diff --git a/frontend/react-app/src/pages/AdminPanel.jsx b/frontend/react-app/src/pages/AdminPanel.jsx
index 83d6ddd..15ff972 100644
--- a/frontend/react-app/src/pages/AdminPanel.jsx
+++ b/frontend/react-app/src/pages/AdminPanel.jsx
@@ -5,6 +5,7 @@ import '../css/AdminPanel.css'
 import {useNavigate} from 'react-router-dom'
 import { useEffect, useState } from "react";
 import { getTeams } from "../api/teamApi";
+import Loading from "./Loading";
 
 export default function AdminPanel(){
     const { register, handleSubmit} = useForm();
@@ -38,7 +39,7 @@ export default function AdminPanel(){
     },[])
     
     if(loading){
-        return(<div>...Loading</div>)
+        return(<Loading/>)
     }
     return(
         <div className='pageContainer'>
diff --git a/frontend/react-app/src/pages/CreateAccount.jsx b/frontend/react-app/src/pages/CreateAccount.jsx
index 61ec927..5cc2a33 100644
--- a/frontend/react-app/src/pages/CreateAccount.jsx
+++ b/frontend/react-app/src/pages/CreateAccount.jsx
@@ -3,6 +3,7 @@ import '../css/CreateAccount.css';
 import Header from '../components/Header';
 import CreateAccountForm from '../components/CreateAccountForm';
 import { getTeams } from '../api/teamApi';
+import Loading from './Loading';
 
 const CreateAccount = () => {
     const [loading, setLoading]= useState(true);
@@ -31,7 +32,7 @@ const CreateAccount = () => {
         getAllTeams();
     },[])
     if(loading){
-        return (<div>...Loading</div>)
+        return (<Loading/>)
     }
     return (
     <div className='pageContainer'>
diff --git a/frontend/react-app/src/pages/CreateTeamPage.jsx b/frontend/react-app/src/pages/CreateTeamPage.jsx
index c15475c..8d7b636 100644
--- a/frontend/react-app/src/pages/CreateTeamPage.jsx
+++ b/frontend/react-app/src/pages/CreateTeamPage.jsx
@@ -4,6 +4,7 @@ import Header from '../components/Header';
 import CreateTeamForm from '../components/CreateTeamForm';
 import { getTeamMembers } from '../api/teamMemberAccountApi';
 import { getAdmins } from '../api/adminApi';
+import Loading from './Loading';
 
 export default function CreatTeamPage(){
     const [loading, setLoading]= useState(true);
@@ -32,7 +33,7 @@ export default function CreatTeamPage(){
         getAllUsers();
     },[])
     if(loading){
-        return (<div>...Loading</div>)
+        return (<Loading/>)
     }
     return (
     <div className='pageContainer'>
diff --git a/frontend/react-app/src/pages/EditTask.jsx b/frontend/react-app/src/pages/EditTask.jsx
index f9b2362..b74577c 100644
--- a/frontend/react-app/src/pages/EditTask.jsx
+++ b/frontend/react-app/src/pages/EditTask.jsx
@@ -4,6 +4,7 @@ import EditTaskForm from '../components/EditTaskForm'
 import Header from '../components/Header'
 import '../css/EditTask.css'
 import { getTeamMembers } from '../api/teamApi'
+import Loading from './Loading'
 
 function EditTask(){
         const location = useLocation()
@@ -28,7 +29,7 @@ function EditTask(){
         },[]);
         console.log("taskToEdit: ", taskToEdit)
         if(loading){
-            return(<div>..Loading</div>)
+            return(<Loading/>)
         }
         return(
             <div className='pageContainer'>
diff --git a/frontend/react-app/src/pages/EditUserDetails.jsx b/frontend/react-app/src/pages/EditUserDetails.jsx
index 954ee8c..b0b1820 100644
--- a/frontend/react-app/src/pages/EditUserDetails.jsx
+++ b/frontend/react-app/src/pages/EditUserDetails.jsx
@@ -5,6 +5,7 @@ import { modifyAdminEmail, modifyAdminName } from "../api/adminAccountApi"
 import {getTeamMemberById, modifyTeamMemberEmail, modifyTeamMemberName } from "../api/teamMemberAccountApi"
 import {useForm} from 'react-hook-form'
 import { resetPassword } from "../api/adminApi"
+import Loading from "./Loading"
 import '../css/EditUserDetails.css';
 
 export default function EditUserDetails(){
@@ -90,7 +91,7 @@ export default function EditUserDetails(){
     },[accountToEdit])
     if(loading){
         return (
-            <div>Loading...</div>
+            <Loading/>
         )
     }
 
diff --git a/frontend/react-app/src/pages/Home.jsx b/frontend/react-app/src/pages/Home.jsx
index 0d255c0..47e597e 100644
--- a/frontend/react-app/src/pages/Home.jsx
+++ b/frontend/react-app/src/pages/Home.jsx
@@ -7,6 +7,7 @@ import {Link} from 'react-router-dom'
 import fakeData from "../FakeData/fakeTaskData.json"
 import TaskList from '../components/TaskList';
 import { getAssignedTasks } from "../api/teamMemberApi";
+import Loading from './Loading';
 
 function setUpDataTasksToDo(obj){
     let ansArr = []
@@ -115,7 +116,7 @@ const Home = () => {
     
     },[])
     if(loading || loadingTasks){
-        return (<div>Loading...</div>)
+        return (<Loading/>)
     }
     return (
 
diff --git a/frontend/react-app/src/pages/Loading.jsx b/frontend/react-app/src/pages/Loading.jsx
new file mode 100644
index 0000000..997ec87
--- /dev/null
+++ b/frontend/react-app/src/pages/Loading.jsx
@@ -0,0 +1,61 @@
+import '../css/Loading.css'
+import { motion } from "framer-motion"
+const circleStyle={
+    top: '0',
+    left: '0',
+    display:'block',
+    width: '5rem',
+    height: '5rem',
+    border: '0.5rem solid #e9e9e9',
+    borderTop: '0.5rem solid #5d5d81',
+    borderRadius: '50%',
+    position: 'absoloute',
+    boxSizing: 'border-box'
+
+}
+const spinTransition = {
+    repeat: Infinity,
+    duration: 1,
+    ease: "linear",
+  }
+function Loading() {
+    return (
+        <div className="loadingContainer">
+            <motion.span
+                style={circleStyle}
+                animate={{ rotate: 360 }}
+                transition={spinTransition}
+/>
+        </div>
+    )
+}
+
+/**
+ * ==============   Styles   ================
+ */
+function StyleSheet() {
+    return (
+        <style>
+            {`
+            .container {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding: 40px;
+                border-radius: 8px;
+            }
+
+            .spinner {
+                width: 50px;
+                height: 50px;
+                border-radius: 50%;
+                border: 4px solid var(--divider);
+                border-top-color: #ff0088;
+                will-change: transform;
+            }
+            `}
+        </style>
+    )
+}
+
+export default Loading
diff --git a/frontend/react-app/src/pages/MyTasks.jsx b/frontend/react-app/src/pages/MyTasks.jsx
index c300d7a..221a5ff 100644
--- a/frontend/react-app/src/pages/MyTasks.jsx
+++ b/frontend/react-app/src/pages/MyTasks.jsx
@@ -8,6 +8,7 @@ import { getAssignedTasks } from "../api/teamMemberApi";
 import { useCookies } from 'react-cookie';
 import { useState, useEffect } from 'react';
 import LockUnlockTask from "../components/LockUnlockTask";
+import Loading from "./Loading";
 import { Lock, LockOpen } from 'lucide-react';
 
 function getAssigneesNames(taskItem) {
@@ -142,7 +143,7 @@ const headerAndAccessorsComplete = [
     ...commonColumns
 ]
 if(loading){
-    return (<div>Loading...</div>)
+    return (<Loading/>)
 }
     const tasksToDoData = setUpData(tasksToDo);
     const tasksCompletedData = setUpDataCompleted(tasksToDo);
diff --git a/frontend/react-app/src/pages/Notifications.jsx b/frontend/react-app/src/pages/Notifications.jsx
index 1963b0e..7fde3a5 100644
--- a/frontend/react-app/src/pages/Notifications.jsx
+++ b/frontend/react-app/src/pages/Notifications.jsx
@@ -4,6 +4,7 @@ import Notification from "../components/Notification";
 import { getReadNotifications, getUnreadNotifications, markAsRead, markAsUnread, deleteNotification as deleteThisNotification} from '../api/notificationApi';
 import { useCookies } from 'react-cookie';
 import Header from '../components/Header'
+import Loading from './Loading';
 
 const Notifications = () => {
     const [cookies] = useCookies(['userInfo'])
@@ -100,7 +101,7 @@ const Notifications = () => {
         )
     );
     if(loading){
-        return(<div>...Loading</div>)
+        return(<Loading/>)
     }
     return (
         <div className='pageContainer'>
diff --git a/frontend/react-app/src/pages/Profile.jsx b/frontend/react-app/src/pages/Profile.jsx
index 47f8639..9672564 100644
--- a/frontend/react-app/src/pages/Profile.jsx
+++ b/frontend/react-app/src/pages/Profile.jsx
@@ -7,6 +7,7 @@ import { useCookies } from "react-cookie";
 import { useEffect, useState } from "react";
 import {getTeamMemberById} from '../api/teamMemberAccountApi'
 import { getTeamsForMember } from "../api/teamMemberApi";
+import Loading from "./Loading";
 
 function Profile(){
     const [cookies] = useCookies(['userInfo']);
@@ -31,7 +32,7 @@ function Profile(){
         getUserInfo();
     },[])
     if(loading){
-        return (<div>...Loading</div>)
+        return (<Loading/>)
     }
     console.log(userData)
     return (
diff --git a/frontend/react-app/src/pages/TeamTasks.jsx b/frontend/react-app/src/pages/TeamTasks.jsx
index ac28d5d..f6f9bf5 100644
--- a/frontend/react-app/src/pages/TeamTasks.jsx
+++ b/frontend/react-app/src/pages/TeamTasks.jsx
@@ -12,6 +12,7 @@ import LockUnlockTask from "../components/LockUnlockTask";
 import DeleteTeamButton from "../components/DeleteTeamButton";
 import { getAdmins } from "../api/adminApi";
 import AddToTeam from "../components/AddToTeam";
+import Loading from "./Loading";
 
 function getAssigneesNames(taskItem) {
   return taskItem.assignedMembers.map((member) => member.userName).join(", ");
@@ -177,7 +178,7 @@ useEffect(()=>{
       
 },[teamLead])
 if(loadingNames || loadingTasks){
-  return (<div>Loading...</div>)
+  return (<Loading/>)
 }