diff --git a/astro/components/Splash.astro b/astro/components/Splash.astro
new file mode 100644
index 0000000..2ca9b00
--- /dev/null
+++ b/astro/components/Splash.astro
@@ -0,0 +1,35 @@
+---
+import { APP, SPLASH } from '../config'
+import '../styles/splash.scss'
+---
+
+<div class="splash">
+    <div class="splash-content">
+        <img src="./logo.png">
+
+        <div class="splash-loading">
+
+            {SPLASH.map(item => (
+                <div class={item.loading}>
+                        <div class="splash-loading-spinner"><div class="spinner"></div></div>
+                        <div class="splash-loading-progressbar"><div class="progressbar"></div></div>
+                        <div class="splash-loading-jumping-balls">
+                            <div class="b-container">
+                                <span class="ball"></span>
+                                <span class="ball"></span>
+                                <span class="ball"></span>
+                            </div>
+                        </div>
+                        <div class="splash-loading-glowing-bars">
+                            <div class="bars-container">
+                                <span class="bar"></span>
+                                <span class="bar"></span>
+                                <span class="bar"></span>
+                            </div>
+                        </div>
+                </div>
+            ))}
+        </div>
+    </div>
+</div>
+
diff --git a/astro/config.ts b/astro/config.ts
index b0b0725..77b76e9 100644
--- a/astro/config.ts
+++ b/astro/config.ts
@@ -5,7 +5,16 @@ export const APP = [{
     sourcecode: "https://github.com/company/app-name"
 }]
 
-// Top tabs of your sidbear
+// Splash
+export const SPLASH = [
+    {
+        loading: "Spinner", // "Spinner" "Pulse" "ProgressBar" "LogoOnly" "None"
+        background: "#121212"
+    }
+]
+
+// Sidebar
+/// Top tabs of your sidbears
 export const SIDEBARTOP = [
     {
         text: "Dashboard",
@@ -31,7 +40,7 @@ export const SIDEBARTOP = [
     },
 ]
 
-// Bottoms tabs of your sidebar
+/// Bottoms tabs of your sidebar
 export const SIDEBARBOTTOM = [
     {
         text: "Settings",
diff --git a/astro/layouts/App.astro b/astro/layouts/App.astro
index 8a65f3b..614fce5 100644
--- a/astro/layouts/App.astro
+++ b/astro/layouts/App.astro
@@ -1,4 +1,5 @@
 ---
+import Splash from '../components/Splash.astro'
 import Sidebar from '../components/Sidebar.astro'
 import Dashboard from '../components/pages/Dashboard.md'
 import Tab2 from '../components/pages/Tab2.astro'
@@ -13,6 +14,7 @@ import '../styles/index.scss'
 <script defer src="./font-awesome-6.2.1/js/all.js"></script>
 
 <div class="content">
+    <Splash />
     <Sidebar />
     <div class="pages">
         <div id="Dashboard" class="page active"><Dashboard /></div>
diff --git a/astro/styles/splash.scss b/astro/styles/splash.scss
new file mode 100644
index 0000000..aa48ba1
--- /dev/null
+++ b/astro/styles/splash.scss
@@ -0,0 +1,145 @@
+.splash {
+    position: fixed;
+    z-index: 100;
+    background: #121212;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    .splash-content {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 100%;
+        height: 100%;
+        img {
+            width: 100px;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+        .splash-loading {
+            position: fixed;
+            bottom: 25%;
+            left: 50%;
+            transform: translate(-50%);
+            .Spinner {
+                .splash-loading-spinner {display: none}
+                .splash-loading-progressbar {display: none}
+                .splash-loading-glowing-bars {display: none}
+                .splash-loading-jumping-balls {display: none}
+                .spinner {
+                    border-radius: 500px;
+                    width: 24px;
+                    aspect-ratio: 1;
+                    border-width: 5px;
+                    border-top-color: white !important;
+                    border-style: solid;
+                    border-color: rgb(255 255 255 / 25%);
+                    animation: 1s spin linear;
+                    animation-iteration-count: infinite;
+                }
+                @keyframes spin {from {transform: rotate(0deg)} to {transform: rotate(359deg)}}
+            }
+            .Progressbar {
+                .splash-loading-spinner {display: none}
+                .splash-loading-glowing-bars {display: none}
+                .splash-loading-jumping-balls {display: none}
+                .progressbar, .progressbar::before {
+                    background: rgb(173 216 230 / 25%);
+                    height: 6px;
+                    width: 250px;
+                    border-radius: 24px;
+                }
+                .progressbar::before {
+                    content: "";
+                    position: absolute;
+                    background: lightblue;
+                    width: 0%;
+                    animation: 1s LOAD ease-in-out
+                }
+            }
+            .JumpingBalls {
+                .splash-loading-progressbar {display: none}
+                .splash-loading-spinner {display: none}
+                .splash-loading-glowing-bars {display: none}
+                .b-container {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    width: 60px;
+                    flex-direction: row;
+                }
+                
+                .b-container .ball {
+                    background-color: #fff;
+                    border-radius: 50%;
+                    display: block;
+                    width: 15px;
+                    height: 15px;
+                    animation: jump 0.7s ease-in-out infinite;
+                }
+                
+                .b-container .ball:nth-child(2) {
+                    animation-delay: 0.15s;
+                }
+                
+                .b-container .ball:nth-child(3) {
+                    animation-delay: 0.3s;
+                }
+                
+                @keyframes jump {
+                    0%,
+                    100% {
+                        transform: translateY(0);
+                    }
+                
+                    50% {
+                        transform: translateY(-20px);
+                    }
+                }
+            }
+            .GlowingBars {
+                .splash-loading-progressbar {display: none}
+                .splash-loading-spinner {display: none}
+                .splash-loading-jumping-balls {display: none}
+                .bars-container {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    width: 40px;
+                    flex-direction: row;
+                }
+                
+                .bar {
+                    background-color: #fff;
+                    height: 50px;
+                    width: 10px;
+                    display: block;
+                    animation: increase 1s ease-in-out infinite;
+                }
+                
+                .bar:nth-child(2) {
+                    animation-delay: 0.25s;
+                }
+                
+                .bar:nth-child(3) {
+                    animation-delay: 0.5s;
+                }
+                
+                @keyframes increase {
+                    0%,
+                    100% {
+                        transform: scaleY(1);
+                    }
+                
+                    50% {
+                        transform: scaleY(0.6);
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file