diff --git a/app/api/approve-blog/route.ts b/app/api/approve-blog/route.ts
new file mode 100644
index 000000000..87ae59784
--- /dev/null
+++ b/app/api/approve-blog/route.ts
@@ -0,0 +1,64 @@
+import { NextRequest, NextResponse } from "next/server";
+import { createClient } from "@/utils/supabase/server";
+import { withAuth } from "@/utils/withAuth";
+// Todo only admin can approve blog
+async function updateBlogStatus(request: NextRequest) {
+  const supabase = createClient();
+
+  try {
+    const { id, status } = await request.json();
+
+    const { data, error } = await supabase
+      .from("blog")
+      .update({ status: status })
+      .eq("id", id);
+
+    if (error) {
+      console.error("Error updating blog status:", error);
+      return NextResponse.json(
+        { error: "Failed to update blog status" },
+        { status: 500 },
+      );
+    }
+
+    return NextResponse.json({
+      message: "Blog status updated successfully",
+      data,
+    });
+  } catch (error) {
+    console.error("Error parsing request body:", error);
+    return NextResponse.json(
+      { error: "Invalid request body" },
+      { status: 400 },
+    );
+  }
+}
+
+async function getBlog(request: NextRequest) {
+  const supabase = createClient();
+
+  try {
+    const { data, error } = await supabase
+      .from("blog")
+      .select("*")
+      .eq("status", "pending");
+
+    if (error) {
+      return NextResponse.json(
+        { error: "failed to fetch blogs" },
+        { status: 500 },
+      );
+    }
+
+    return NextResponse.json(data, { status: 200 });
+  } catch (error) {
+    console.error("Error parsing request body:", error);
+    return NextResponse.json(
+      { error: "Invalid request body" },
+      { status: 400 },
+    );
+  }
+}
+
+export const POST = updateBlogStatus;
+export const GET = getBlog;
diff --git a/app/api/submit-blog/route.ts b/app/api/submit-blog/route.ts
new file mode 100644
index 000000000..032f4424a
--- /dev/null
+++ b/app/api/submit-blog/route.ts
@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from "next/server";
+import { withAuth } from "@/utils/withAuth";
+import { createClient } from "@/utils/supabase/server";
+
+// TODO add rate limiting to this endpoint to prevent spam submissions
+async function submitBlog(request: NextRequest) {
+  const supabase = createClient();
+
+  try {
+    const { title, url, excerpt, date, author, tag, content, readingTime } =
+      await request.json();
+    console.log("request", request);
+
+    const { data: blog, error } = await supabase.from("blog").insert([
+      {
+        title,
+        url,
+        excerpt,
+        date,
+        author,
+        readingtime: readingTime,
+        tag,
+        content,
+        status: "pending",
+      },
+    ]);
+    console.log("blog", blog);
+
+    if (error) {
+      console.error("error submitting blog", error);
+      return NextResponse.json(
+        { error: "Error submitting blog. Please contact PearAI team." },
+        { status: 500 },
+      );
+    }
+
+    return NextResponse.json({ blog });
+  } catch (error) {
+    console.error("error submitting blog", error);
+    return NextResponse.json(
+      { error: "Error submitting blog. Please contact PearAI team." },
+      { status: 500 },
+    );
+  }
+}
+
+export const POST = withAuth(submitBlog);
diff --git a/app/blog/secret-admin-page/page.tsx b/app/blog/secret-admin-page/page.tsx
new file mode 100644
index 000000000..52b2af88b
--- /dev/null
+++ b/app/blog/secret-admin-page/page.tsx
@@ -0,0 +1,173 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { MoreHorizontal, Loader2 } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+interface Blog {
+  id: number;
+  title: string;
+  url: string;
+  excerpt: string;
+  date: string;
+  author: string;
+  tag: string | null;
+  content: string;
+  readingtime: number;
+  status: string;
+}
+
+export default function BlogApproval() {
+  const [blogs, setBlogs] = useState<Blog[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchBlogs();
+  }, []);
+
+  const fetchBlogs = async () => {
+    try {
+      const response = await fetch("/api/approve-blog");
+      if (!response.ok) {
+        throw new Error("Failed to fetch blogs");
+      }
+      const data = await response.json();
+      setBlogs(data);
+    } catch (err) {
+      setError("Failed to load blogs. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleApprove = async (blogId: number) => {
+    try {
+      const response = await fetch("/api/approve-blog", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ id: blogId, status: "approved" }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to approve blog");
+      }
+
+      // Update the local state to reflect the change
+    } catch (err) {
+      setError("Failed to approve blog.");
+    }
+  };
+
+  const handleReject = async (blogId: number) => {
+    try {
+      const response = await fetch("/api/approve-blog", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ id: blogId, status: "rejected" }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to reject blog");
+      }
+
+      // Update the local state to reflect the change
+    } catch (err) {
+      setError("Failed to reject blog.");
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex h-screen items-center justify-center">{error}</div>
+    );
+  }
+
+  return (
+    <Card className="mt-20 w-full">
+      <CardHeader>
+        <CardTitle>Approve Blogs</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>ID</TableHead>
+              <TableHead>Title</TableHead>
+              <TableHead>URL</TableHead>
+              <TableHead>Excerpt</TableHead>
+              <TableHead>Date</TableHead>
+              <TableHead>Author</TableHead>
+              <TableHead>Tag</TableHead>
+              <TableHead>Content</TableHead>
+              <TableHead>Reading Time</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {blogs.map((blog) => (
+              <TableRow key={blog.id}>
+                <TableCell>{blog.id}</TableCell>
+                <TableCell>{blog.title}</TableCell>
+                <TableCell>{blog.url}</TableCell>
+                <TableCell>{blog.excerpt}</TableCell>
+                <TableCell>{blog.date}</TableCell>
+                <TableCell>{blog.author}</TableCell>
+                <TableCell>{blog.tag || "N/A"}</TableCell>
+                <TableCell>{blog.content.substring(0, 50)}...</TableCell>
+                <TableCell>{blog.readingtime} min</TableCell>
+                <TableCell>{blog.status}</TableCell>
+                <TableCell>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" className="h-8 w-8 p-0">
+                        <span className="sr-only">Open menu</span>
+                        <MoreHorizontal className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem onClick={() => handleApprove(blog.id)}>
+                        Approve
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => handleReject(blog.id)}>
+                        Reject
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/app/blog/submit-blog/page.tsx b/app/blog/submit-blog/page.tsx
new file mode 100644
index 000000000..54dc8b2ea
--- /dev/null
+++ b/app/blog/submit-blog/page.tsx
@@ -0,0 +1,171 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Loader2 } from "lucide-react";
+
+export default function SubmitBlog() {
+  const [blogData, setBlogData] = useState({
+    title: "",
+    url: "",
+    excerpt: "",
+    date: "",
+    author: "",
+    readingTime: "",
+    thumbnail: "",
+    tags: "",
+    content: "",
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const { name, value } = e.target;
+    setBlogData({ ...blogData, [name]: value });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      // Make the API call to submit the blog
+      const response = await fetch("/api/submit-blog", {
+        method: "POST",
+        body: JSON.stringify(blogData),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      const data = await response.json();
+      console.log("Response:", data);
+
+      // Reset form or show success message
+    } catch (error) {
+      console.error("Error submitting blog:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Card className="mx-auto mt-24 w-full max-w-3xl">
+      <CardHeader>
+        <CardTitle className="text-2xl">Submit Your Blog</CardTitle>
+        <CardDescription>
+          Fill in the details to submit your blog post.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="title">Blog Title</Label>
+            <Input
+              id="title"
+              name="title"
+              placeholder="blog title"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="url">URL</Label>
+            <Input
+              id="url"
+              name="url"
+              placeholder="/blog/your-blog-title"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="excerpt">Excerpt</Label>
+            <Textarea
+              id="excerpt"
+              name="excerpt"
+              placeholder="excerpt"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="date">Publication Date</Label>
+            <Input
+              id="date"
+              name="date"
+              placeholder="yyyy-mm-dd"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="author">Author</Label>
+            <Input
+              id="author"
+              name="author"
+              placeholder="author name"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="readingTime">Reading Time</Label>
+            <Input
+              id="readingTime"
+              placeholder="i.e 5 minutes"
+              name="readingTime"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="thumbnail">Thumbnail URL</Label>
+            <Input
+              id="thumbnail"
+              name="thumbnail"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="tags">Tags (comma-separated)</Label>
+            <Input id="tags" name="tags" onChange={handleChange} required />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="content">Content (Markdown)</Label>
+            <Textarea
+              id="content"
+              name="content"
+              onChange={handleChange}
+              required
+              className="min-h-[200px]"
+            />
+          </div>
+          <Button type="submit" className="w-full" disabled={isLoading}>
+            {isLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Submitting...
+              </>
+            ) : (
+              "Submit Blog"
+            )}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
new file mode 100644
index 000000000..73cf6b4ad
--- /dev/null
+++ b/components/ui/table.tsx
@@ -0,0 +1,117 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
new file mode 100644
index 000000000..9f0057345
--- /dev/null
+++ b/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };
diff --git a/yarn.lock b/yarn.lock
index 2f206b7bf..c5b4e0c23 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2135,13 +2135,20 @@
     "@radix-ui/react-use-previous" "1.1.0"
     "@radix-ui/react-use-size" "1.1.0"
 
-"@radix-ui/react-slot@1.1.0", "@radix-ui/react-slot@^1.1.0":
+"@radix-ui/react-slot@1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
   integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.0"
 
+"@radix-ui/react-slot@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
+  integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+
 "@radix-ui/react-switch@^1.0.3":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.0.tgz#fcf8e778500f1d60d4b2bec2fc3fad77a7c118e3"
@@ -6237,6 +6244,11 @@ ramda@^0.29.0:
   resolved "https://registry.npmjs.org/ramda/-/ramda-0.29.1.tgz#408a6165b9555b7ba2fc62555804b6c5a2eca196"
   integrity sha512-OfxIeWzd4xdUNxlWhgFazxsA/nl3mS4/jGZI5n00uWOoSSFRhC1b6gl6xvmzUamgmqELraWp0J/qqVlXYPDPyA==
 
+react-day-picker@8.10.1:
+  version "8.10.1"
+  resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-8.10.1.tgz#4762ec298865919b93ec09ba69621580835b8e80"
+  integrity sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==
+
 react-dom@18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"