diff --git a/src/app/(routes)/blog/components/header/header.tsx b/src/app/(routes)/blog/components/header/header.tsx
index 10764a3..367a38b 100644
--- a/src/app/(routes)/blog/components/header/header.tsx
+++ b/src/app/(routes)/blog/components/header/header.tsx
@@ -4,7 +4,7 @@ import Button from "../button/button";
 
 export default function Header() {
   return (
-    <div className="fixed top-10 flex w-full items-center justify-around">
+    <div className="fixed top-10 flex w-[1280px] items-center justify-between">
       <Image
         src={"/images/blog/logo/logo-no-background.png"}
         width={200}
diff --git a/src/app/(routes)/blog/components/home/new/new.tsx b/src/app/(routes)/blog/components/home/new/new.tsx
new file mode 100644
index 0000000..6718cea
--- /dev/null
+++ b/src/app/(routes)/blog/components/home/new/new.tsx
@@ -0,0 +1,25 @@
+export default function New() {
+  return (
+    <div className="flex w-full flex-wrap justify-between gap-5">
+      <div className="relative flex w-[55%] flex-col border">
+        <img
+          src={"/images/blog/logo/logo-no-background.png"}
+          alt="parsaaghayi's blog logo"
+          className="absolute z-0"
+        />
+        <div className="flex items-center justify-center gap-2">
+          <p className="text-white text-[16px] font-[400]">BY</p>
+          <h2 className="text-white text-[16px] font-[400]">AUTHOR NAME</h2>
+          <p className="text-white text-[16px] font-[400]">IN</p>
+          <h2 className="text-white text-[16px] font-[400]">CATEGORY</h2>
+        </div>
+        <h1>How to accept rejection gracefully — and use it to grow</h1>
+        <p>
+          User research is the reality check every project needs. Here’s our
+          guide to why you should be doing it — and how to get started.
+        </p>
+      </div>
+      <div className="flex w-[40%] border">list</div>
+    </div>
+  );
+}
diff --git a/src/app/(routes)/blog/layout.tsx b/src/app/(routes)/blog/layout.tsx
index 18901d9..c6d37f8 100644
--- a/src/app/(routes)/blog/layout.tsx
+++ b/src/app/(routes)/blog/layout.tsx
@@ -13,7 +13,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="flex w-full flex-wrap pt-5">
+    <div className="flex w-full flex-wrap justify-center">
       <link
         rel="icon"
         href="/images/favicons/blog-icon.png"
diff --git a/src/app/(routes)/blog/page.tsx b/src/app/(routes)/blog/page.tsx
index 3cd6e29..0f6bdd0 100644
--- a/src/app/(routes)/blog/page.tsx
+++ b/src/app/(routes)/blog/page.tsx
@@ -1,7 +1,9 @@
+import New from "./components/home/new/new";
+
 export default async function Blog() {
   return (
-    <div className="">
-      Blog
+    <div className="w-[1280px]">
+      <New />
     </div>
   );
 }