diff --git a/src/app/(routes)/blog/posts/[postSlug]/page.tsx b/src/app/(routes)/blog/posts/[postSlug]/page.tsx
index aeb6e99..fc81b9e 100644
--- a/src/app/(routes)/blog/posts/[postSlug]/page.tsx
+++ b/src/app/(routes)/blog/posts/[postSlug]/page.tsx
@@ -1,4 +1,8 @@
-import { PostSlugPagePostType, PostSlugPagepropsType } from "@/app/types/types";
+import {
+  PostSlugPagePostType,
+  PostSlugPagepropsType,
+  PostType,
+} from "@/app/types/types";
 import { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
@@ -109,7 +113,7 @@ export default async function SinglePost({ params }: PostSlugPagepropsType) {
           </li>
         </ul>
 
-        <div className="relative flex w-full items-start justify-center gap-5">
+        <div className="relative flex w-full items-start justify-center gap-3 sm:gap-4 md:gap-5">
           <div className="sticky top-[150px] flex flex-col items-start">
             <Image
               src={"/images/blog/icons/socials-vertical.svg"}
@@ -187,6 +191,148 @@ export default async function SinglePost({ params }: PostSlugPagepropsType) {
                 comes with an add-on to display client testimonials.
               </li>
             </ul>
+            <div className="my-10 flex w-full justify-between">
+              <div className="w-[48%]">
+                <img
+                  className="w-full"
+                  src={"/images/blog/posts/post/3.png"}
+                  alt={"post image 3"}
+                />
+              </div>
+              <div className="w-[48%]">
+                <img
+                  className="w-full"
+                  src={"/images/blog/posts/post/4.png"}
+                  alt={"post image 4"}
+                />
+              </div>
+            </div>
+            <p className="my-10 text-center text-[24px] font-[400] text-blog-purple">
+              “ WP Page Builder offers a lot of ready-to-use design blocks to
+              make your site development process a lot faster and easier “
+            </p>
+            <div className="flex w-full justify-center">
+              <div className="flex flex-col items-center">
+                <Image
+                  src={"/images/blog/users/1.png"}
+                  alt={"user 1 image"}
+                  width={80}
+                  height={80}
+                  className="mb-2 rounded-full"
+                />
+                <Link
+                  href={"/"}
+                  className="text-center text-[18px] font-[400] capitalize text-blog-text-default hover:underline"
+                >
+                  parsa aghayi
+                </Link>
+                <p className="text-[16px] font-[400] text-blog-text-default">
+                  Follow me
+                  <Link
+                    href={"/"}
+                    className="ms-1 text-[16px] font-[400] text-blog-blue"
+                  >
+                    @parsaaghayi
+                  </Link>
+                  .
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="sticky top-[150px] flex flex-col items-end gap-5">
+            <div className="flex cursor-pointer flex-col gap-1">
+              <Image
+                src={"/images/blog/icons/like.svg"}
+                width={35}
+                height={35}
+                alt="socials-vertical icons"
+              />
+              <p className="whitespace-nowrap text-center text-[14px] font-[600] text-blog-text-default">
+                {postData.post.likes}
+              </p>
+            </div>
+            <div className="flex cursor-pointer flex-col gap-1">
+              <Image
+                src={"/images/blog/icons/eye.svg"}
+                width={35}
+                height={35}
+                alt="socials-vertical icons"
+              />
+              <p className="whitespace-nowrap text-center text-[14px] font-[600] text-blog-text-default">
+                {postData.post.views}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="my-10 mt-20 flex w-full flex-wrap gap-10">
+          <div className="flex w-full items-center justify-between">
+            <p className="text-[22px] font-[600] text-blog-text-default">
+              You might also like...
+            </p>
+            {/* <Link
+              href={"#"}
+              className="text-[22px] font-[600] capitalize text-blog-text-passive hover:underline"
+            >
+              more
+            </Link> */}
+          </div>
+          <div className="flex w-full flex-wrap justify-between gap-5">
+            {postData.related_posts.map(
+              (relatedPost: PostType, key: number) => {
+                if (key < 2) {
+                  return (
+                    <div
+                      key={relatedPost.id}
+                      className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]"
+                    >
+                      <Image
+                        className="mb-3 rounded-md"
+                        src={relatedPost.featured_image}
+                        alt={`${relatedPost.title} post featured image`}
+                        loading="lazy"
+                        width={600}
+                        height={500}
+                      />
+                      <div className="mb-2 flex w-full flex-wrap gap-2">
+                        <div className="flex gap-2">
+                          <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
+                            BY
+                          </p>
+                          <Link
+                            href={"/"}
+                            className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default hover:underline md:text-[16px]"
+                          >
+                            {relatedPost.author.name}
+                          </Link>
+                        </div>
+                        <div className="whit flex gap-2">
+                          <p className="text-[16px] font-[600] text-blog-text-passive">
+                            IN
+                          </p>
+                          <Link
+                            className="text-[16px] font-[400] text-blog-text-default hover:underline"
+                            href={`/blog/categories/${relatedPost.category.slug}`}
+                          >
+                            {relatedPost.category.name}
+                          </Link>
+                        </div>
+                      </div>
+                      <Link
+                        href={`/blog/posts/${relatedPost.slug}`}
+                        className="w-full text-start text-[24px] font-[600] text-blog-text-default hover:underline"
+                      >
+                        {relatedPost.title}
+                      </Link>
+                      <p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
+                        {relatedPost.excerpt}
+                      </p>
+                    </div>
+                  );
+                }
+              },
+            )}
           </div>
         </div>
       </div>