diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 00180807..4ff0c26a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -16,6 +16,7 @@ import RequireAuthBlog from './components/require-auth-blog';
 import useThemeClass from './utils/theme-changer';
 import AdminContainer from './components/admin-container';
 import { Role } from './types/role-type.tsx';
+import EditBlog from './pages/edit-blog.tsx';
 
 function App() {
   useLayoutEffect(() => {
@@ -35,6 +36,7 @@ function App() {
             </Route>
             <Route element={<RequireAuthBlog allowedRole={[Role.Admin, Role.User]} />}>
               <Route path="add-blog" element={<AddBlog />} />
+              <Route path="edit-blog/:postId" element={<EditBlog />} />
             </Route>
             <Route path="admin" element={<RequireAuth allowedRole={[Role.Admin]} />}>
               <Route element={<AdminContainer />}>
diff --git a/frontend/src/components/form-blog.tsx b/frontend/src/components/form-blog.tsx
new file mode 100644
index 00000000..53fc5ca0
--- /dev/null
+++ b/frontend/src/components/form-blog.tsx
@@ -0,0 +1,300 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import navigateBackBlackIcon from '@/assets/svg/navigate-back-black.svg';
+import navigateBackWhiteIcon from '@/assets/svg/navigate-back-white.svg';
+import ModalComponent from '@/components/modal';
+import CategoryPill from '@/components/category-pill';
+import { categories } from '@/utils/category-colors';
+import userState from '@/utils/user-state';
+import axiosInstance from '@/helpers/axios-instance';
+import { AxiosError, isAxiosError } from 'axios';
+import { useForm } from 'react-hook-form';
+import { TFormBlogSchema, formBlogSchema } from '@/lib/types';
+import { zodResolver } from '@hookform/resolvers/zod';
+import Post from '@/types/post-type';
+import useAuthData from '@/hooks/useAuthData';
+
+interface FormBlogPropType {
+  type: 'new' | 'edit';
+  postId?: string;
+  post?: Post;
+}
+
+function FormBlog({ type, postId, post }: FormBlogPropType) {
+  const [selectedImage, setSelectedImage] = useState<string>('');
+  const {
+    register,
+    handleSubmit,
+    reset,
+    setValue,
+    trigger,
+    formState: { errors },
+    watch,
+  } = useForm<TFormBlogSchema>({
+    resolver: zodResolver(formBlogSchema),
+    defaultValues: {
+      title: post?.title || '',
+      authorName: post?.authorName || '',
+      imageLink: post?.imageLink || '',
+      categories: post?.categories || [],
+      description: post?.description || '',
+      isFeaturedPost: false,
+    },
+  });
+  const formData = watch();
+  const handleImageSelect = (imageUrl: string) => {
+    setSelectedImage(imageUrl);
+  };
+
+  const [modal, setmodal] = useState(false);
+  const userData = useAuthData();
+
+  //checks the length of the categories array and if the category is already selected
+  const isValidCategory = (category: string): boolean => {
+    return formData.categories.length >= 3 && !formData.categories.includes(category);
+  };
+
+  const handleCategoryClick = (category: string) => {
+    if (isValidCategory(category)) return;
+
+    if (formData.categories.includes(category)) {
+      setValue(
+        'categories',
+        formData.categories.filter((cat) => cat !== category)
+      );
+    } else {
+      setValue('categories', [...formData.categories, category]);
+    }
+    trigger('categories');
+  };
+
+  const handleselector = () => {
+    setValue('imageLink', selectedImage);
+    setmodal(false);
+  };
+  const handleCheckboxChange = () => {
+    setValue('isFeaturedPost', !formData.isFeaturedPost);
+  };
+  const onSumbit = async () => {
+    try {
+      let postPromise;
+      if (type === 'new') {
+        postPromise = axiosInstance.post('/api/posts/', formData);
+      }
+
+      if (type === 'edit' && postId) {
+        if (userData?.role === 'ADMIN') {
+          postPromise = axiosInstance.patch(`/api/posts/admin/${postId}`, formData);
+        } else {
+          postPromise = axiosInstance.patch(`/api/posts/${postId}`, formData);
+        }
+      }
+      if (postPromise)
+        toast.promise(postPromise, {
+          pending: 'Creating blog post...',
+          success: {
+            render() {
+              reset();
+              navigate('/');
+              return 'Blog created successfully';
+            },
+          },
+          error: {
+            render({ data }) {
+              if (data instanceof AxiosError) {
+                if (data?.response?.data?.message) {
+                  return data?.response?.data?.message;
+                }
+              }
+              return 'Blog creation failed';
+            },
+          },
+        });
+      if (postPromise) return (await postPromise).data;
+    } catch (error: unknown) {
+      if (isAxiosError(error)) {
+        navigate('/');
+        userState.removeUser();
+        console.error(error.response?.data?.message);
+      } else {
+        console.log(error);
+      }
+    }
+  };
+  const navigate = useNavigate();
+  const [isDarkMode, setIsDarkMode] = useState<boolean | null>(null);
+  useEffect(() => {
+    const storedTheme = localStorage.getItem('theme');
+    setIsDarkMode(storedTheme === 'dark');
+  }, []);
+
+  function Asterisk() {
+    return <span className="dark:text-dark-tertiary">*</span>;
+  }
+
+  return (
+    <div className="flex-grow cursor-default bg-slate-50 px-6 py-8 dark:bg-dark-card">
+      <div className="mb-4 flex justify-center">
+        <div className="flex w-[32rem] items-center justify-start space-x-4 sm:w-5/6 lg:w-4/6 ">
+          <div className="w-fit cursor-pointer">
+            <img
+              alt="theme"
+              src={isDarkMode ? navigateBackWhiteIcon : navigateBackBlackIcon}
+              onClick={() => navigate(-1)}
+              className="active:scale-click h-5 w-10"
+            />
+          </div>
+          <h2 className="cursor-text text-lg font-semibold text-light-primary dark:text-dark-primary sm:text-xl lg:text-2xl">
+            Create Blog
+          </h2>
+        </div>
+      </div>
+      <div className="flex justify-center">
+        <form onSubmit={handleSubmit(onSumbit)} className="sm:w-5/6 lg:w-2/3">
+          <div className="mb-2 flex items-center">
+            <label className="flex items-center">
+              <span className="px-2 text-base font-medium text-light-secondary dark:text-dark-secondary">
+                Is this a featured blog?
+              </span>
+              <input
+                {...register('isFeaturedPost')}
+                type="checkbox"
+                className="ml-2 h-5 w-5 cursor-pointer rounded-full accent-purple-400"
+                checked={formData.isFeaturedPost}
+                onChange={handleCheckboxChange}
+              />
+            </label>
+          </div>
+
+          <div className="mb-2">
+            <div className="px-2 py-1 font-medium text-light-secondary dark:text-dark-secondary">
+              Blog title <Asterisk />
+            </div>
+            <input
+              {...register('title')}
+              type="text"
+              placeholder="Travel Bucket List for this Year"
+              autoComplete="off"
+              className="dark:text-textInField mb-1 w-full rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-field dark:text-dark-textColor dark:placeholder:text-dark-tertiary"
+              value={formData.title}
+            />
+            {errors.title && (
+              <span className="p-2 text-sm text-red-500">{`${errors.title.message}`}</span>
+            )}
+          </div>
+
+          <div className="mb-1">
+            <div className="px-2 py-1 font-medium text-light-secondary dark:text-dark-secondary">
+              Blog content <Asterisk />
+            </div>
+            <textarea
+              {...register('description')}
+              placeholder="Start writing here&hellip;"
+              rows={5}
+              className="dark:text-textInField w-full rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-field dark:text-dark-textColor dark:placeholder:text-dark-tertiary"
+              value={formData.description}
+            />
+            {errors.description && (
+              <span className="p-2 text-sm text-red-500">{`${errors.description.message}`}</span>
+            )}
+          </div>
+          <div className="mb-2">
+            <div className="px-2 py-1 font-medium text-light-secondary dark:text-dark-secondary">
+              Author name <Asterisk />
+            </div>
+            <input
+              {...register('authorName')}
+              type="text"
+              placeholder="Shree Sharma"
+              className="dark:text-textInField mb-1 w-full rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-field dark:text-dark-textColor dark:placeholder:text-dark-tertiary"
+              value={formData.authorName}
+            />
+            {errors.authorName && (
+              <span className="p-2 text-sm text-red-500">{`${errors.authorName.message}`}</span>
+            )}
+          </div>
+
+          <div className="px-2 py-1 font-medium text-light-secondary dark:text-dark-secondary">
+            Blog cover image
+            <span className="text-xs tracking-wide text-dark-tertiary">
+              &nbsp;(jpg/png/webp)&nbsp;
+            </span>
+            <Asterisk />
+          </div>
+          <div>
+            <div className="mb-1 flex justify-between gap-2 sm:gap-4">
+              <input
+                {...register('imageLink')}
+                type="url"
+                id="imagelink"
+                name="imageLink"
+                placeholder="https://&hellip;"
+                autoComplete="off"
+                className="dark:text-textInField w-3/4 rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-field dark:text-dark-textColor dark:placeholder:text-dark-tertiary lg:w-10/12"
+                value={formData.imageLink}
+              />
+              <button
+                name="openModal"
+                type="button"
+                className="lg:text-md active:scale-click w-1/4 rounded-lg bg-light-primary text-xs text-slate-50 hover:bg-light-primary/80 dark:bg-dark-primary dark:text-dark-card dark:hover:bg-dark-secondary/80 sm:text-sm lg:w-2/12 lg:px-4 lg:py-3"
+                onClick={() => {
+                  setmodal(true);
+                }}
+              >
+                Pick image
+              </button>
+            </div>
+            {errors.imageLink && (
+              <span className="p-2 text-sm text-red-500">{`${errors.imageLink.message}`}</span>
+            )}
+          </div>
+
+          <div className="mb-4 flex flex-col">
+            <label className="px-2 pb-1 font-medium text-light-secondary dark:text-dark-secondary sm:mr-4 sm:w-fit">
+              Categories
+              <span className="text-xs tracking-wide text-dark-tertiary">
+                &nbsp;(max 3 categories)&nbsp;
+              </span>
+              <Asterisk />
+            </label>
+            <div>
+              <div className="flex flex-wrap gap-3 rounded-lg p-2 dark:bg-dark-card dark:p-3">
+                {categories.map((category, index) => (
+                  <span key={`${category}-${index}`} onClick={() => handleCategoryClick(category)}>
+                    <CategoryPill
+                      category={category}
+                      selected={formData.categories.includes(category)}
+                      disabled={isValidCategory(category)}
+                    />
+                  </span>
+                ))}
+              </div>
+              {errors.categories && (
+                <span className="p-2 text-sm text-red-500">{`${errors.categories.message}`}</span>
+              )}
+            </div>
+          </div>
+
+          <button
+            name="post-blog"
+            type="submit"
+            className="active:scale-click flex w-full items-center justify-center rounded-lg bg-light-primary px-12 py-3 text-base font-semibold text-light hover:bg-light-primary/80 dark:bg-dark-primary dark:text-dark-card dark:hover:bg-dark-secondary/80 sm:mx-1 sm:w-fit"
+          >
+            {type === 'new' ? 'Post Blog' : 'Update Blog'}
+          </button>
+        </form>
+        <ModalComponent
+          selectedImage={selectedImage}
+          handleImageSelect={handleImageSelect}
+          handleSelector={handleselector}
+          setModal={setmodal}
+          modal={modal}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default FormBlog;
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index 0f44c877..0472efbd 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -32,7 +32,7 @@ const isValidImageLink = (value: string) => {
   const imageLinkRegex = /\.(jpg|jpeg|png|webp)$/i;
   return imageLinkRegex.test(value);
 };
-export const addBlogSchema = z.object({
+export const formBlogSchema = z.object({
   title: z.string().refine((value) => value.trim().split(/\s+/).length >= 3, {
     message: 'Oops! Title needs more spice. Give it at least 3 words.',
   }),
@@ -70,4 +70,4 @@ export interface AuthData {
 
 export type TSignInSchema = z.infer<typeof signInSchema>;
 export type TSignUpSchema = z.infer<typeof signUpSchema>;
-export type TAddBlogScheme = z.infer<typeof addBlogSchema>;
+export type TFormBlogSchema = z.infer<typeof formBlogSchema>;
diff --git a/frontend/src/pages/add-blog.tsx b/frontend/src/pages/add-blog.tsx
index 3f00c463..a13627fb 100644
--- a/frontend/src/pages/add-blog.tsx
+++ b/frontend/src/pages/add-blog.tsx
@@ -1,279 +1,7 @@
-import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-import navigateBackBlackIcon from '@/assets/svg/navigate-back-black.svg';
-import navigateBackWhiteIcon from '@/assets/svg/navigate-back-white.svg';
-import ModalComponent from '@/components/modal';
-import CategoryPill from '@/components/category-pill';
-import { categories } from '@/utils/category-colors';
-import userState from '@/utils/user-state';
-import axiosInstance from '@/helpers/axios-instance';
-import { AxiosError, isAxiosError } from 'axios';
-import { useForm } from 'react-hook-form';
-import { TAddBlogScheme, addBlogSchema } from '@/lib/types';
-import { zodResolver } from '@hookform/resolvers/zod';
+import FormBlog from '@/components/form-blog';
 
-function AddBlog() {
-  const [selectedImage, setSelectedImage] = useState<string>('');
-  const {
-    register,
-    handleSubmit,
-    reset,
-    setValue,
-    trigger,
-    formState: { errors },
-    watch,
-  } = useForm<TAddBlogScheme>({
-    resolver: zodResolver(addBlogSchema),
-    defaultValues: {
-      title: '',
-      authorName: '',
-      imageLink: '',
-      categories: [],
-      description: '',
-      isFeaturedPost: false,
-    },
-  });
-  const formData = watch();
-  const handleImageSelect = (imageUrl: string) => {
-    setSelectedImage(imageUrl);
-  };
-
-  const [modal, setmodal] = useState(false);
-
-  //checks the length of the categories array and if the category is already selected
-  const isValidCategory = (category: string): boolean => {
-    return formData.categories.length >= 3 && !formData.categories.includes(category);
-  };
-
-  const handleCategoryClick = (category: string) => {
-    if (isValidCategory(category)) return;
-
-    if (formData.categories.includes(category)) {
-      setValue(
-        'categories',
-        formData.categories.filter((cat) => cat !== category)
-      );
-    } else {
-      setValue('categories', [...formData.categories, category]);
-    }
-    trigger('categories');
-  };
-
-  const handleselector = () => {
-    setValue('imageLink', selectedImage);
-    setmodal(false);
-  };
-  const handleCheckboxChange = () => {
-    setValue('isFeaturedPost', !formData.isFeaturedPost);
-  };
-  const onSumbit = async () => {
-    try {
-      const postPromise = axiosInstance.post('/api/posts/', formData);
-      toast.promise(postPromise, {
-        pending: 'Creating blog post...',
-        success: {
-          render() {
-            reset();
-            navigate('/');
-            return 'Blog created successfully';
-          },
-        },
-        error: {
-          render({ data }) {
-            if (data instanceof AxiosError) {
-              if (data?.response?.data?.message) {
-                return data?.response?.data?.message;
-              }
-            }
-            return 'Blog creation failed';
-          },
-        },
-      });
-      return (await postPromise).data;
-    } catch (error: unknown) {
-      if (isAxiosError(error)) {
-        navigate('/');
-        userState.removeUser();
-        console.error(error.response?.data?.message);
-      } else {
-        console.log(error);
-      }
-    }
-  };
-  const navigate = useNavigate();
-  const [isDarkMode, setIsDarkMode] = useState<boolean | null>(null);
-  useEffect(() => {
-    const storedTheme = localStorage.getItem('theme');
-    setIsDarkMode(storedTheme === 'dark');
-  }, []);
-
-  function Asterisk() {
-    return <span className="dark:text-dark-tertiary">*</span>;
-  }
-
-  return (
-    <div className="flex-grow cursor-default bg-slate-50 px-6 py-8 dark:bg-dark-card">
-      <div className="mb-4 flex justify-center">
-        <div className="flex w-[32rem] items-center justify-start space-x-4 sm:w-5/6 lg:w-4/6 ">
-          <div className="w-fit cursor-pointer">
-            <img
-              alt="theme"
-              src={isDarkMode ? navigateBackWhiteIcon : navigateBackBlackIcon}
-              onClick={() => navigate(-1)}
-              className="active:scale-click h-5 w-10"
-            />
-          </div>
-          <h2 className="cursor-text text-lg font-semibold text-light-primary dark:text-dark-primary sm:text-xl lg:text-2xl">
-            Create Blog
-          </h2>
-        </div>
-      </div>
-      <div className="flex justify-center">
-        <form onSubmit={handleSubmit(onSumbit)} className="sm:w-5/6 lg:w-2/3">
-          <div className="mb-2 flex items-center">
-            <label className="flex items-center">
-              <span className="px-2 text-base font-medium text-light-secondary dark:text-dark-secondary">
-                Is this a featured blog?
-              </span>
-              <input
-                {...register('isFeaturedPost')}
-                type="checkbox"
-                className="ml-2 h-5 w-5 cursor-pointer rounded-full accent-purple-400"
-                checked={formData.isFeaturedPost}
-                onChange={handleCheckboxChange}
-              />
-            </label>
-          </div>
-
-          <div className="mb-2">
-            <div className="px-2 py-1 font-medium text-light-secondary dark:text-dark-secondary">
-              Blog title <Asterisk />
-            </div>
-            <input
-              {...register('title')}
-              type="text"
-              placeholder="Travel Bucket List for this Year"
-              autoComplete="off"
-              className="dark:text-textInField mb-1 w-full rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-field dark:text-dark-textColor dark:placeholder:text-dark-tertiary"
-              value={formData.title}
-            />
-            {errors.title && (
-              <span className="p-2 text-sm text-red-500">{`${errors.title.message}`}</span>
-            )}
-          </div>
-
-          <div className="mb-1">
-            <div className="px-2 py-1 font-medium text-light-secondary dark:text-dark-secondary">
-              Blog content <Asterisk />
-            </div>
-            <textarea
-              {...register('description')}
-              placeholder="Start writing here&hellip;"
-              rows={5}
-              className="dark:text-textInField w-full rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-field dark:text-dark-textColor dark:placeholder:text-dark-tertiary"
-              value={formData.description}
-            />
-            {errors.description && (
-              <span className="p-2 text-sm text-red-500">{`${errors.description.message}`}</span>
-            )}
-          </div>
-          <div className="mb-2">
-            <div className="px-2 py-1 font-medium text-light-secondary dark:text-dark-secondary">
-              Author name <Asterisk />
-            </div>
-            <input
-              {...register('authorName')}
-              type="text"
-              placeholder="Shree Sharma"
-              className="dark:text-textInField mb-1 w-full rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-field dark:text-dark-textColor dark:placeholder:text-dark-tertiary"
-              value={formData.authorName}
-            />
-            {errors.authorName && (
-              <span className="p-2 text-sm text-red-500">{`${errors.authorName.message}`}</span>
-            )}
-          </div>
-
-          <div className="px-2 py-1 font-medium text-light-secondary dark:text-dark-secondary">
-            Blog cover image
-            <span className="text-xs tracking-wide text-dark-tertiary">
-              &nbsp;(jpg/png/webp)&nbsp;
-            </span>
-            <Asterisk />
-          </div>
-          <div>
-            <div className="mb-1 flex justify-between gap-2 sm:gap-4">
-              <input
-                {...register('imageLink')}
-                type="url"
-                id="imagelink"
-                name="imageLink"
-                placeholder="https://&hellip;"
-                autoComplete="off"
-                className="dark:text-textInField w-3/4 rounded-lg bg-slate-200 p-3 placeholder:text-sm placeholder:text-light-tertiary dark:bg-dark-field dark:text-dark-textColor dark:placeholder:text-dark-tertiary lg:w-10/12"
-                value={formData.imageLink}
-              />
-              <button
-                name="openModal"
-                type="button"
-                className="lg:text-md active:scale-click w-1/4 rounded-lg bg-light-primary text-xs text-slate-50 hover:bg-light-primary/80 dark:bg-dark-primary dark:text-dark-card dark:hover:bg-dark-secondary/80 sm:text-sm lg:w-2/12 lg:px-4 lg:py-3"
-                onClick={() => {
-                  setmodal(true);
-                }}
-              >
-                Pick image
-              </button>
-            </div>
-            {errors.imageLink && (
-              <span className="p-2 text-sm text-red-500">{`${errors.imageLink.message}`}</span>
-            )}
-          </div>
-
-          <div className="mb-4 flex flex-col">
-            <label className="px-2 pb-1 font-medium text-light-secondary dark:text-dark-secondary sm:mr-4 sm:w-fit">
-              Categories
-              <span className="text-xs tracking-wide text-dark-tertiary">
-                &nbsp;(max 3 categories)&nbsp;
-              </span>
-              <Asterisk />
-            </label>
-            <div>
-              <div className="flex flex-wrap gap-3 rounded-lg p-2 dark:bg-dark-card dark:p-3">
-                {categories.map((category, index) => (
-                  <span key={`${category}-${index}`} onClick={() => handleCategoryClick(category)}>
-                    <CategoryPill
-                      category={category}
-                      selected={formData.categories.includes(category)}
-                      disabled={isValidCategory(category)}
-                    />
-                  </span>
-                ))}
-              </div>
-              {errors.categories && (
-                <span className="p-2 text-sm text-red-500">{`${errors.categories.message}`}</span>
-              )}
-            </div>
-          </div>
-
-          <button
-            name="post-blog"
-            type="submit"
-            className="active:scale-click flex w-full items-center justify-center rounded-lg bg-light-primary px-12 py-3 text-base font-semibold text-light hover:bg-light-primary/80 dark:bg-dark-primary dark:text-dark-card dark:hover:bg-dark-secondary/80 sm:mx-1 sm:w-fit"
-          >
-            Post blog
-          </button>
-        </form>
-        <ModalComponent
-          selectedImage={selectedImage}
-          handleImageSelect={handleImageSelect}
-          handleSelector={handleselector}
-          setModal={setmodal}
-          modal={modal}
-        />
-      </div>
-    </div>
-  );
-}
+const AddBlog = () => {
+  return <FormBlog type="new" />;
+};
 
 export default AddBlog;
diff --git a/frontend/src/pages/admin-blogs.tsx b/frontend/src/pages/admin-blogs.tsx
index 1506570d..4023ef55 100644
--- a/frontend/src/pages/admin-blogs.tsx
+++ b/frontend/src/pages/admin-blogs.tsx
@@ -6,10 +6,13 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import Post from '@/types/post-type';
+import { useNavigate } from 'react-router-dom';
 
 const AdminBlogs = () => {
   const [posts, setPosts] = useState<Post[]>([]);
 
+  const navigate = useNavigate();
+
   const fetchData = async () => {
     try {
       const response = await axiosInstance.get('/api/posts');
@@ -24,6 +27,8 @@ const AdminBlogs = () => {
     if (response.status === 200) {
       fetchData();
       toast.success('Post successfully deleted !');
+    } else {
+      toast?.error('Something went wrong!');
     }
   };
 
@@ -61,7 +66,10 @@ const AdminBlogs = () => {
                   </p>
                 </div>
                 <div className="mt-2 flex flex-col gap-2 sm:mt-0 sm:flex-row ">
-                  <button className="h-fit rounded-xl border-0 text-base font-semibold text-light-title dark:text-dark-title sm:text-xl">
+                  <button
+                    onClick={() => navigate(`/edit-blog/${post?._id}`, { state: { post } })}
+                    className="h-fit rounded-xl border-0 text-base font-semibold text-light-title dark:text-dark-title sm:text-xl"
+                  >
                     <PenIcon />
                   </button>
                   <button
diff --git a/frontend/src/pages/details-page.tsx b/frontend/src/pages/details-page.tsx
index 3936fc49..b449472f 100644
--- a/frontend/src/pages/details-page.tsx
+++ b/frontend/src/pages/details-page.tsx
@@ -12,6 +12,10 @@ import { PostCardSkeleton } from '@/components/skeletons/post-card-skeleton';
 import PostCard from '@/components/post-card';
 import PostMobileViewComponent from '@/components/PostMobileViewComponent';
 import { PostMobileViewCardSkeleton } from '@/components/PostMobileViewCardSkeleton';
+import PenIcon from '@/assets/svg/pen-icon';
+import TrasnIcon from '@/assets/svg/trash-icon';
+import { toast } from 'react-toastify';
+import useAuthData from '@/hooks/useAuthData';
 
 export default function DetailsPage() {
   const { state } = useLocation();
@@ -24,16 +28,36 @@ export default function DetailsPage() {
   const [relatedPostsLoading, setRelatedPostsLoading] = useState<boolean>(false);
   const [isDarkMode, setIsDarkMode] = useState<boolean | null>(null);
 
+  const userData = useAuthData();
+
   useEffect(() => {
     const theme = localStorage.getItem('theme');
     setIsDarkMode(theme === 'dark');
   }, []);
 
+  const handleDeleteClick = async () => {
+    let url = `/api/posts/${postId}`;
+    if (userData?.role === 'ADMIN') {
+      url = `/api/posts/admin/${postId}`;
+    }
+    try {
+      const resposne = await axios.delete(import.meta.env.VITE_API_PATH + url, {
+        withCredentials: true,
+      });
+      if (resposne.status === 200) {
+        toast.success('Successfully post deleted!');
+        navigate('/');
+      }
+    } catch (error) {
+      console.log(error);
+      toast.error('something went wrong');
+    }
+  };
+
   useEffect(() => {
     const getPostById = async () => {
       try {
         await axios.get(import.meta.env.VITE_API_PATH + `/api/posts/${postId}`).then((response) => {
-          console.log(response.data);
           setIsLoading(false);
           setPost(response.data);
         });
@@ -70,13 +94,24 @@ export default function DetailsPage() {
         <div className="relative flex flex-col">
           <img src={post.imageLink} alt={post.title} className="h-80 w-full object-cover sm:h-96" />
           <div className="absolute left-0 top-0 h-full w-full bg-slate-950/60"></div>
-          <div className="absolute top-12 w-full cursor-pointer justify-start px-2 text-lg text-slate-50 sm:top-20 sm:px-8 sm:text-xl lg:px-12 lg:text-2xl">
+          <div className="absolute top-12 flex w-full cursor-pointer justify-between px-2 text-lg text-slate-50 sm:top-20 sm:px-8 sm:text-xl lg:px-12 lg:text-2xl">
             <img
               alt="white"
               src={navigateBackWhiteIcon}
               className="active:scale-click h-5 w-10"
               onClick={() => navigate(-1)}
             />
+
+            {(post?.authorId === userData?._id || userData?.role === 'ADMIN') && (
+              <div className="flex gap-4">
+                <button onClick={handleDeleteClick}>
+                  <TrasnIcon />
+                </button>
+                <button onClick={() => navigate(`/edit-blog/${postId}`, { state: { post } })}>
+                  <PenIcon />
+                </button>
+              </div>
+            )}
           </div>
           <div className="absolute bottom-6 w-full max-w-xl px-4 text-slate-50 sm:bottom-8 sm:max-w-3xl sm:px-8 lg:bottom-12 lg:max-w-5xl lg:px-12">
             <div className="mb-4 flex space-x-2">
diff --git a/frontend/src/pages/edit-blog.tsx b/frontend/src/pages/edit-blog.tsx
new file mode 100644
index 00000000..14500d63
--- /dev/null
+++ b/frontend/src/pages/edit-blog.tsx
@@ -0,0 +1,48 @@
+import FormBlog from '@/components/form-blog';
+import { useEffect, useState } from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import Post from '@/types/post-type';
+import axios from 'axios';
+import useAuthData from '@/hooks/useAuthData';
+
+const EditBlog = () => {
+  const { state } = useLocation();
+  const [post, setPost] = useState<Post>(state?.post);
+  const initialVal = post === undefined;
+  const [loading, setIsLoading] = useState(initialVal);
+  const { postId } = useParams();
+
+  const userData = useAuthData();
+
+  useEffect(() => {
+    const getPostById = async () => {
+      try {
+        await axios.get(import.meta.env.VITE_API_PATH + `/api/posts/${postId}`).then((response) => {
+          setIsLoading(false);
+          setPost(response.data);
+        });
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    if (post === undefined || post !== state?.post) {
+      getPostById();
+    }
+  }, [state?.post]);
+
+  const navigate = useNavigate();
+
+  if (userData?.role === 'USER' && post?.authorId !== userData?._id) {
+    navigate(-1);
+  }
+
+  if (!loading) {
+    return (
+      <>
+        <FormBlog postId={postId} type="edit" post={post} />
+      </>
+    );
+  } else return <h1>Loading...</h1>;
+};
+
+export default EditBlog;
diff --git a/frontend/src/types/post-type.tsx b/frontend/src/types/post-type.tsx
index 6f945e0e..3f12841a 100644
--- a/frontend/src/types/post-type.tsx
+++ b/frontend/src/types/post-type.tsx
@@ -6,6 +6,7 @@ type Post = {
   timeOfPost: string;
   description: string;
   categories: string[];
+  authorId?: string;
 };
 
 export default Post;