diff --git a/my-app/package-lock.json b/my-app/package-lock.json
index ba00db5..dbaab4a 100644
--- a/my-app/package-lock.json
+++ b/my-app/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "@headlessui/react": "^2.1.8",
         "@wojtekmaj/react-hooks": "^1.21.0",
-        "framer-motion": "^11.5.6",
+        "framer-motion": "^11.11.7",
+        "my-app": "file:",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-helmet": "^6.1.0",
@@ -3246,10 +3247,9 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.5.6",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.5.6.tgz",
-      "integrity": "sha512-JMwUpAxv/DWgul9vPgX0ElKn0G66sUc6O9tOXsYwn3zxwvhxFljSXC0XT2QCzuTYBshwC8nyDAa1SYcV0Ldbhw==",
-      "license": "MIT",
+      "version": "11.11.7",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.7.tgz",
+      "integrity": "sha512-89CgILOXPeG3L7ymOTGrLmf8IiKubYLUN/QkYgQuLvehAHfqgwJbLfCnhuyRI4WTds1TXkUp67A7IJrgRY/j1w==",
       "dependencies": {
         "tslib": "^2.4.0"
       },
@@ -4594,6 +4594,10 @@
       "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==",
       "license": "MIT"
     },
+    "node_modules/my-app": {
+      "resolved": "",
+      "link": true
+    },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
diff --git a/my-app/package.json b/my-app/package.json
index b53709b..9991b6a 100644
--- a/my-app/package.json
+++ b/my-app/package.json
@@ -12,7 +12,8 @@
   "dependencies": {
     "@headlessui/react": "^2.1.8",
     "@wojtekmaj/react-hooks": "^1.21.0",
-    "framer-motion": "^11.5.6",
+    "framer-motion": "^11.11.7",
+    "my-app": "file:",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
diff --git a/my-app/src/App.jsx b/my-app/src/App.jsx
index 1856ad5..4998d44 100644
--- a/my-app/src/App.jsx
+++ b/my-app/src/App.jsx
@@ -1,4 +1,5 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { useState, useEffect } from "react";
 import Home from "./pages/Home";
 import About from "./pages/About";
 import NotFound from "./pages/404";
@@ -7,32 +8,40 @@ import ContactForm from "./pages/Contact";
 import Events from "./pages/Events";
 import Base from "./layouts/Base";
 import Subscribe from "./components/Subscribe";
-import { useState } from "react";
-// import NewsletterPage from "./pages/NewsletterPage";
+import Loader from "./components/Loader";
 
 export default function App() {
-  const [isVisible, setIsVisible] = useState(false);  
-  
-  const handleSetVisible = (value)=>{
-    setIsVisible(value);
-  };
+  const [isVisible, setIsVisible] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, 1500); // Adjusted loader time to 1.5 seconds for smoother transition
+
+    return () => clearTimeout(timer); // Cleaning up timer
+  }, []);
+
+  const handleSetVisible = (value) => setIsVisible(value);
 
   return (
     <div className="bg-primary">
-      {isVisible&&<Subscribe handle={handleSetVisible} />}
-      <BrowserRouter>
-        <Base>
-          <Routes>
-            <Route path="/" element={<Home handle={handleSetVisible} />} />
-            <Route path="/about-us" element={<About handle={handleSetVisible} />} />
-            <Route path="/community" element={<Community />} />
-            <Route path="/events" element={<Events />} />
-            <Route path="/contact-us" element={<ContactForm />} />
-            {/* <Route path="/newsletter" element={<NewsletterPage />} /> */}
-            <Route path="*" element={<NotFound />} />
-          </Routes>
-        </Base>
-      </BrowserRouter>
+      {isVisible && <Subscribe handle={handleSetVisible} />}
+      <Loader loading={loading} />
+      {!loading && (
+        <BrowserRouter>
+          <Base>
+            <Routes>
+              <Route path="/" element={<Home handle={handleSetVisible} />} />
+              <Route path="/about-us" element={<About handle={handleSetVisible} />} />
+              <Route path="/community" element={<Community />} />
+              <Route path="/events" element={<Events />} />
+              <Route path="/contact-us" element={<ContactForm />} />
+              <Route path="*" element={<NotFound />} />
+            </Routes>
+          </Base>
+        </BrowserRouter>
+      )}
     </div>
   );
 }
diff --git a/my-app/src/assets/images/codex-logo.png b/my-app/src/assets/images/codex-logo.png
new file mode 100644
index 0000000..83012d8
Binary files /dev/null and b/my-app/src/assets/images/codex-logo.png differ
diff --git a/my-app/src/components/Loader.jsx b/my-app/src/components/Loader.jsx
new file mode 100644
index 0000000..ab243c0
--- /dev/null
+++ b/my-app/src/components/Loader.jsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import logo from "../assets/images/codex-logo.png";
+
+const Loader = ({ loading }) => {
+  const [showExplore, setShowExplore] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowExplore(true);
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <AnimatePresence>
+      {loading && (
+        <motion.div
+          className="flex items-center justify-center h-screen bg-primary"
+          initial={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -100 }} // Exit animation: fades and slides up
+          transition={{ duration: 0.5 }}
+        >
+          <div className="flex flex-col items-center">
+            <img src={logo} alt="Logo" className="w-25" />
+
+            <div className="relative text-white text-1xl mt-0.5">
+              <motion.div
+                className="relative"
+                initial={{ opacity: 1, y: 0 }}
+                animate={{ opacity: showExplore ? 0 : 1, y: showExplore ? -20 : 0 }}
+                transition={{ duration: 0.25 }}
+              >
+                We <span className="text-secondary">Code</span>
+              </motion.div>
+
+              <motion.div
+                className="relative"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: showExplore ? 1 : 0, y: showExplore ? -20 : 0 }}
+                transition={{ duration: 0.25 }}
+              >
+                We <span className="text-secondary">Explore</span>
+              </motion.div>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default Loader;