diff --git a/app/loading.tsx b/app/loading.tsx
index f15322a..dc6ffff 100644
--- a/app/loading.tsx
+++ b/app/loading.tsx
@@ -1,3 +1,25 @@
-export default function Loading() {
-  return null
+import Image from "next/image";
+
+interface LoadingProps {
+  message?: string;
 }
+
+export default function Loading({ message }: LoadingProps = {}) {
+  const displayMessage = message ?? "Loading...";
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-green-50 via-yellow-50 to-[#FFC517]/10 flex items-center justify-center">
+      <div className="text-center">
+        <Image
+          src="/logo-animated.gif"
+          alt={displayMessage}
+          width={80}
+          height={80}
+          unoptimized
+          className="w-20 h-20 mx-auto mb-4"
+        />
+        <p className="text-gray-600">{displayMessage}</p>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index af58c9a..d62e0a1 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,7 +7,7 @@ import BlogCard from "@/components/blog-card"
 import Pagination from "@/components/pagination"
 import Link from "next/link"
 import Footer from "@/components/footer"
-
+import Loading from "@/app/loading"
 interface BlogPost {
   slug: string
   title: string
@@ -75,14 +75,7 @@ export default function HomePage() {
   )
 
   if (loading) {
-    return (
-      <div className="min-h-screen bg-gradient-to-br from-green-50 via-yellow-50 to-[#FFC517]/10 flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#228B22] mx-auto mb-4"></div>
-          <p className="text-gray-600">Loading articles...</p>
-        </div>
-      </div>
-    )
+    return <Loading message="Loading articles..." />
   }
 
   if (!paginatedData) {
diff --git a/public/logo-animated.gif b/public/logo-animated.gif
new file mode 100644
index 0000000..6e761eb
Binary files /dev/null and b/public/logo-animated.gif differ