diff --git a/src/app/blogs/how_the_blog_feature_works/page.mdx b/src/app/blogs/how_the_blog_feature_works/page.mdx
new file mode 100644
index 0000000..2e6248b
--- /dev/null
+++ b/src/app/blogs/how_the_blog_feature_works/page.mdx
@@ -0,0 +1,27 @@
+export const metadata = {
+  title: "How the Blog Feature Work...",
+  description:
+    "Learn how to use MDX and NextJS to add static blogs in your website",
+  isPublished: true,
+  slug: "welcome_to_logsfolio",
+  publishDate: "2nd Jul, 2024",
+};
+
+<br />
+
+# How the Blog Feature Work...
+
+<br />
+<div className="flex justify-center">
+  <iframe
+    width="680"
+    height="400"
+    src="https://www.youtube.com/embed/mjD5arlOB9A?si=fNs456hV8Jj0ROQw"
+    title="YouTube video player"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen
+  ></iframe>
+</div>
+<br />
diff --git a/src/app/globals.css b/src/app/globals.css
index 03a3300..5dfac51 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  scroll-behavior: smooth;
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 47b3abe..918d9df 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -256,7 +256,7 @@ export default async function Home() {
       >
         <h2 className="font-bold text-3xl md:text-5xl mb-12">Blogs</h2>
 
-        <div className="space-y-6">
+        <div className="flex flex-col space-y-8">
           {posts.map((post) => (
             <Link key={post.slug} href={`/blogs/${post.slug}`}>
               <h3 className="text-xl md:text-3xl font-semibold">