diff --git a/src/components/Loading.css b/src/components/Loading.css
new file mode 100644
index 0000000000000000000000000000000000000000..04751322dd7bae3f3131427b6ecb7222e1181513
--- /dev/null
+++ b/src/components/Loading.css
@@ -0,0 +1,28 @@
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+  }
+  
+  .loading-spinner {
+    /* border: 16px solid #f3f3f3; 
+    border-top: 16px solid #3498db;  */
+    background-image: url('https://static.igem.wiki/teams/5378/image/zxa-tp.webp'); /* 背景图片路径 */
+    background-size: cover;        /* 使背景图片覆盖整个容器 */
+    background-position: center;
+    /* border-radius: 50%; */
+    width: 120px;
+    height: 120px;
+    animation: spin 1.5s linear infinite;
+  }
+  
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
\ No newline at end of file
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c58db994348f577f3fff60ecb118c1e05e03473f
--- /dev/null
+++ b/src/components/Loading.tsx
@@ -0,0 +1,17 @@
+// src/components/Loading.tsx
+
+import './Loading.css'; // 你可以定义样式
+
+export function Loading() {
+    return (
+        <div className='row bg-rice_yellow loading-overlay'>
+            {/* loading-spinner是动画组件 */}
+                <div className="loading-spinner">
+                    {/* 你可以添加一个加载动画的样式或使用现成的 spinner */}
+                </div>
+        </div>
+        
+      );
+
+}
+  
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 33a5bbde21faeacdb797869cd16ec6ea9f6191f3..46cfcbfe0a556d676922dba2e91a0772e67f47ce 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -3,3 +3,4 @@ export * from "./Header";
 export * from "./Footer";
 export * from "./NotFound";
 export * from "./Inspirations";
+export * from "./Loading";
\ No newline at end of file
diff --git a/src/containers/App/App.tsx b/src/containers/App/App.tsx
index 6cb6c3ad4936cc457f1813f0a220baa28689cbf7..51206f38000f67047a9afb8723297c6a13a726b3 100644
--- a/src/containers/App/App.tsx
+++ b/src/containers/App/App.tsx
@@ -1,13 +1,14 @@
 import "./App.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 import 'bootstrap/dist/js/bootstrap.bundle.min.js';  // 引入 Bootstrap JavaScript
-import { Route, Routes } from "react-router-dom";
-import { Footer, Header, Navbar, NotFound } from "../../components";
+import { Route, Routes, useLocation } from "react-router-dom";
+import { Footer, Header, Navbar, NotFound, Loading } from "../../components";
 import { getPathMapping, stringToSlug } from "../../utils";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 const App = () => {
   const pathMapping = getPathMapping();
+  const location = useLocation();
   const currentPath =
     location.pathname
       .split(`${stringToSlug(import.meta.env.VITE_TEAM_NAME)}`)
@@ -17,55 +18,67 @@ const App = () => {
   const title =
     currentPath in pathMapping ? pathMapping[currentPath].title : "Not Found";
 
-    
-
   useEffect(() => {
     document.title = `${title || ""} | ${import.meta.env.VITE_TEAM_NAME} - iGEM ${import.meta.env.VITE_TEAM_YEAR}`;
   }, [title]);
 
+  // 加载页面
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // 模拟加载过程
+    setLoading(true);
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, 2000); // 2秒后隐藏加载页面
+
+    return () => clearTimeout(timer);
+  }, [location.pathname]); // 监听路由变化
 
   return (
     <>
-      {/* Navigation */}
-      <Navbar />
+      {loading ? (
+        <Loading />
+      ) : (
+        <>
+          {/* Navigation */}
+          <Navbar />
 
-      {/* Header and PageContent */}
-      <Routes>
-        {Object.entries(pathMapping).map(
-          ([path, {component: Component }]) => (
+          {/* Header and PageContent */}
+          <Routes>
+            {Object.entries(pathMapping).map(
+              ([path, { component: Component }]) => (
+                <Route
+                  key={path}
+                  path={path}
+                  element={
+                    <>
+                      <div>
+                        <Component />
+                      </div>
+                    </>
+                  }
+                />
+              ),
+            )}
             <Route
-              key={path}
-              path={path}
+              path="*"
               element={
                 <>
-                  {/* <Header title={title || ""} lead={lead || ""} /> */}
-
-                    <div>
-                      <Component />
-                    </div>
-                
+                  <Header
+                    title="Not Found"
+                    lead="The requested URL was not found on this server."
+                  />
+                  <NotFound />
                 </>
               }
             />
-          ),
-        )}
-        <Route
-          path="*"
-          element={
-            <>
-              <Header
-                title="Not Found"
-                lead="The requested URL was not found on this server."
-              />
-              <NotFound />
-            </>
-          }
-        />
-      </Routes>
+          </Routes>
 
-      {/* Footer */}
-      {/* MUST mention license AND have a link to team wiki's repository on gitlab.igem.org */}
-      <Footer />
+          {/* Footer */}
+          <Footer />
+        </>
+      )}
     </>
   );
 };