diff --git a/orbit-app/orbit-app/src/pages/BlogsPage.jsx b/orbit-app/orbit-app/src/pages/BlogsPage.jsx
new file mode 100644
index 0000000..ad59759
--- /dev/null
+++ b/orbit-app/orbit-app/src/pages/BlogsPage.jsx
@@ -0,0 +1,74 @@
+
+  useEffect(() => {
+    // Fetching all blogs
+    axios.get(`${BASE_URL}/blogs`)
+      .then((res) => {
+        setBlogs(res.data);
+      })
+      .catch((err) => {
+        // Avoid leaking server internals in client logs; include safe fallback and null checks
+        console.error('Error fetching blogs:', err?.response?.data || err?.message);
+      });
+  }, []);
+
+  const handleCreateBlog = async () => {
+    // Basic client-side validation to reduce noisy/empty submissions
+    if (!title || !title.trim() || !content || !content.trim()) {
+      alert('Title and content are required.');
+      return;
+    }
+
+    // Do NOT set or trust authorId on the client. Let the server associate the request
+    // with the authenticated user (server should validate authentication/authorization).
+    try {
+      const res = await axios.post(`${BASE_URL}/blogs/create`, {
+        title,
+        content
+      });
+
+      alert('Blog created successfully!');
+      setBlogs([...blogs, res.data]);
+    } catch (err) {
+      // Log a safe error message and avoid exposing internals to users
+      console.error('Error creating blog:', err?.response?.data || err?.message);
+      alert('Unable to create blog. Please try again later.');
+    }
+  };
+
+  return (
+    <div>
+      <h1>Blogs</h1>
+
+      <div>
+        <h2>Create Blog</h2>
+        <input
+          type="text"
+          placeholder="Blog title"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+        />
+        <textarea
+          placeholder="Blog content"
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+        />
+        <button onClick={handleCreateBlog}>Create</button>
+      </div>
+
+      <div>
+        <h2>All Blogs</h2>
+        {blogs.map((blog) => (
+          <div key={blog.id}>
+            <h3>{blog.title}</h3>
+            <p>{blog.content}</p>
+            <small>Author: {blog.authorName || 'Unknown'}</small><br />
+            <small>Created At: {blog.createdAt}</small><br />
+            <CommentsSection id={blog._id || blog.id} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default BlogsPage;
\ No newline at end of file