diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 51d2eef1..1b3346de 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -24,6 +24,7 @@
     "react": "^18.2.0",
     "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",
+    "react-loader-spinner": "^6.1.6",
     "react-router-dom": "^6.22.3",
     "recoil": "^0.7.7",
     "tailwind-merge": "^2.3.0",
diff --git a/apps/frontend/src/components/Loader.tsx b/apps/frontend/src/components/Loader.tsx
index 3e748f30..eaa6d55d 100644
--- a/apps/frontend/src/components/Loader.tsx
+++ b/apps/frontend/src/components/Loader.tsx
@@ -1,4 +1,18 @@
 //TODO: Make prettier
+import { BallTriangle } from 'react-loader-spinner'
+
 export const Loader = () => {
-  return <div>Loading..</div>;
+  return <div className='h-screen flex items-center justify-center'>
+          <BallTriangle
+            height={100}
+            width={100}
+            radius={5}
+            color="#4fa94d"
+            ariaLabel="ball-triangle-loading"
+            wrapperStyle={{}}
+            wrapperClass=""
+            visible={true}
+            />
+          </div>
+
 };