diff --git a/frontend/src/components/Loader.tsx b/frontend/src/components/Loader.tsx
index 67579b79..a4c17565 100644
--- a/frontend/src/components/Loader.tsx
+++ b/frontend/src/components/Loader.tsx
@@ -2,7 +2,7 @@ const Loader = () => {
   return (
     <div
       role="status"
-      className="h-screen w-screen flex items-center justify-center bg-gray-50"
+      className="h-screen w-screen flex items-center justify-center"
     >
       <svg
         aria-hidden="true"
diff --git a/frontend/src/pages/Posts.tsx b/frontend/src/pages/Posts.tsx
index 12644e76..1b371dd8 100644
--- a/frontend/src/pages/Posts.tsx
+++ b/frontend/src/pages/Posts.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import axios from 'axios';
 import { Link } from 'react-router-dom';
 import { PostData } from '../types';
+import Loader from '../components/Loader';
 
 const Posts = () => {
   const [posts, setPosts] = useState<PostData[]>([]);
@@ -24,11 +25,11 @@ const Posts = () => {
   }, []);
 
   if (loading) {
-    return <div>Loading...</div>;
+    return <Loader/>;
   }
 
   if (error) {
-    return <div>{error}</div>;
+    return <div className='text-red-500 font-semibold text-lg text-center'>{error}</div>;
   }
 
   return (