diff --git a/app/page.tsx b/app/page.tsx
index ce8f0c9..0c133c9 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,22 +1,11 @@
 import { Suspense } from 'react'
 import { SignedIn, SignedOut } from '@clerk/nextjs'
 
+import Loading from '@/components/ui/loading'
 import Images from '@/components/images'
 
 export const dynamic = 'force-dynamic'
 
-function Loading() {
-  return (
-    <div className="flex h-svh items-center justify-center overflow-hidden">
-      <div className="relative rounded-lg p-5 shadow-lg">
-        <div className="absolute left-0 top-0 flex h-svh w-svw items-center justify-center">
-          <div className="h-20 w-20 animate-spin rounded-full border-4 border-white"></div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
 export default function HomePage() {
   return (
     <>
diff --git a/components/ui/loading.tsx b/components/ui/loading.tsx
new file mode 100644
index 0000000..28e5da8
--- /dev/null
+++ b/components/ui/loading.tsx
@@ -0,0 +1,11 @@
+export default function Loading() {
+  return (
+    <div className="flex h-svh items-center justify-center overflow-hidden">
+      <div className="relative rounded-lg p-5 shadow-lg">
+        <div className="absolute left-0 top-0 flex h-svh w-svw items-center justify-center">
+          <div className="h-20 w-20 animate-spin rounded-full border-4 border-white"></div>
+        </div>
+      </div>
+    </div>
+  )
+}