diff --git a/index.html b/index.html
index bd68cb8ce..dd00fc39b 100644
--- a/index.html
+++ b/index.html
@@ -3,14 +3,14 @@
   <head>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="./katex-dist/katex.min.css">
-    <link rel="icon" href="./favicon.ico" />
+    <link rel="icon" href="./images/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="./logo192.png" />
+    <link rel="apple-touch-icon" href="./images/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/public/README.md b/public/README.md
new file mode 100644
index 000000000..e8b77e0f2
--- /dev/null
+++ b/public/README.md
@@ -0,0 +1,3 @@
+⚠️ Usually, you should avoid placing files in the root of `public` directory.
+
+For you may routing page route and static file route together that can easilty cause conflict, and you may need to configure the routing of each file manually.
diff --git a/public/favicon.ico b/public/images/favicon.ico
similarity index 100%
rename from public/favicon.ico
rename to public/images/favicon.ico
diff --git a/public/logo192.png b/public/images/logo192.png
similarity index 100%
rename from public/logo192.png
rename to public/images/logo192.png
diff --git a/public/logo512.png b/public/images/logo512.png
similarity index 100%
rename from public/logo512.png
rename to public/images/logo512.png
diff --git a/public/OJ-lab-icon.svg b/public/images/oj-lab-icon.svg
similarity index 100%
rename from public/OJ-lab-icon.svg
rename to public/images/oj-lab-icon.svg
diff --git a/public/manifest.json b/public/manifest.json
index 080d6c77a..c8a4faab4 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -3,17 +3,17 @@
   "name": "Create React App Sample",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "images/favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "images/logo192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "images/logo512.png",
       "type": "image/png",
       "sizes": "512x512"
     }
diff --git a/src/layouts/adminLayout/Sidebar.tsx b/src/layouts/adminLayout/Sidebar.tsx
index 0b2f5df40..5f7c93ac9 100644
--- a/src/layouts/adminLayout/Sidebar.tsx
+++ b/src/layouts/adminLayout/Sidebar.tsx
@@ -5,6 +5,8 @@ import { useTranslation } from "react-i18next";
 import { joinClasses } from "../../utils/common";
 import { useNavigate } from "react-router-dom";
 
+const iconPath = "/images/oj-lab-icon.svg";
+
 const navigation = [
   { name: "Problem", href: "/admin/problem", icon: HomeIcon, current: true },
   { name: "User", href: "/admin/user", icon: UsersIcon, current: false },
@@ -79,7 +81,7 @@ export default function Sidebar(props: SidebarProps) {
                     <div className="flex h-16 shrink-0 items-center">
                       <img
                         className="h-14 w-auto gap-4"
-                        src="/OJ-lab-icon.svg"
+                        src={iconPath}
                         alt="OJ Lab"
                       />
                       <h1 className="text-xl font-bold text-white">
@@ -132,11 +134,7 @@ export default function Sidebar(props: SidebarProps) {
           {/* Sidebar component, swap this element with another sidebar if you like */}
           <div className="flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 px-6 pb-4">
             <div className="flex h-16 shrink-0 items-center gap-4">
-              <img
-                className="h-14 w-auto"
-                src="/OJ-lab-icon.svg"
-                alt="OJ Lab"
-              />
+              <img className="h-14 w-auto" src={iconPath} alt="OJ Lab" />
               <h1 className="text-xl font-bold text-white">OJ Lab Admin</h1>
             </div>
             <nav className="flex flex-1 flex-col">
diff --git a/src/layouts/userLayout/Header.tsx b/src/layouts/userLayout/Header.tsx
index 0d416568c..a6432b1d5 100644
--- a/src/layouts/userLayout/Header.tsx
+++ b/src/layouts/userLayout/Header.tsx
@@ -12,6 +12,8 @@ import { joinClasses } from "../../utils/common";
 import LanguageMenu from "../LanguageMenu";
 import { useTranslation } from "react-i18next";
 
+const iconPath = "/images/oj-lab-icon.svg";
+
 const user = {
   name: "Tom Cook",
   email: "tom@example.com",
@@ -49,12 +51,12 @@ export default function Header() {
                 <div className="flex flex-shrink-0 items-center">
                   <img
                     className="block h-14 w-auto lg:hidden"
-                    src="/OJ-lab-icon.svg"
+                    src={iconPath}
                     alt="OJ Lab"
                   />
                   <img
                     className="hidden h-14 w-auto lg:block"
-                    src="/OJ-lab-icon.svg"
+                    src={iconPath}
                     alt="OJ Lab"
                   />
                 </div>
