diff --git a/aria/app/blog/[slug]/page.tsx b/aria/app/blog/[slug]/page.tsx
index 166727e5d..af0577040 100644
--- a/aria/app/blog/[slug]/page.tsx
+++ b/aria/app/blog/[slug]/page.tsx
@@ -7,12 +7,13 @@ import { notFound } from "next/navigation";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { formatDate } from "@/lib/utils";
 import Image from "next/image";
+import type { Metadata } from 'next';
 
 type PageProps = {
   params: Promise<{ slug: string }>;
 };
 
-export async function generateMetadata(props: PageProps) {
+export async function generateMetadata(props: PageProps): Promise<Metadata | null> {
   const params = await props.params;
 
   const {
@@ -69,7 +70,7 @@ export default async function BlogPage(props: PageProps) {
       <div className="!w-full">
         <div className="w-full mb-7">
           <Image
-            src={res.frontmatter.cover}
+            src={`/contents/blogs/${slug}/cover.jpeg`}
             alt="cover"
             width={700}
             height={400}
diff --git a/aria/app/blog/page.tsx b/aria/app/blog/page.tsx
index 7202d2c33..fdd074bb2 100644
--- a/aria/app/blog/page.tsx
+++ b/aria/app/blog/page.tsx
@@ -6,12 +6,12 @@ import Image from "next/image";
 import Link from "next/link";
 
 export const metadata: Metadata = {
-  title: "AriaDocs - Blog",
+  title: "Mega - Blog",
 };
 
 export default async function BlogIndexPage() {
   const blogs = (await getAllBlogs()).sort(
-    (a, b) => stringToDate(b.date).getTime() - stringToDate(a.date).getTime()
+    (a, b) => stringToDate(b.date).getTime() - stringToDate(a.date).getTime(),
   );
   return (
     <div className="w-full mx-auto flex flex-col gap-1 sm:min-h-[91vh] min-h-[88vh] pt-2">
@@ -37,7 +37,6 @@ function BlogCard({
   title,
   description,
   slug,
-  cover,
   authors,
 }: BlogMdxFrontmatter & { slug: string }) {
   return (
@@ -48,7 +47,7 @@ function BlogCard({
       <h3 className="text-md font-semibold -mt-1 pr-7">{title}</h3>
       <div className="w-full">
         <Image
-          src={cover}
+          src={`/contents/blogs/${slug}/cover.jpeg`}
           alt={title}
           width={400}
           height={150}
diff --git a/aria/contents/blogs/file-rec.mdx b/aria/contents/blogs/file-rec.mdx
deleted file mode 100644
index 239e90895..000000000
--- a/aria/contents/blogs/file-rec.mdx
+++ /dev/null
@@ -1,170 +0,0 @@
----
-title: "Building a Recursive File System with React: A Deep Dive"
-description: "Explore how to create a recursive file system in React. This blog post provides a comprehensive guide on building a file system where folders and files can be nested, added, renamed, and deleted."
-date: 02-09-2024
-authors:
-  - avatar: "https://ui.shadcn.com/avatars/02.png"
-    handle: nisabmohd
-    username: Nisab Mohd
-    handleUrl: "https://github.com/nisabmohd"
-cover: "https://img.freepik.com/premium-vector/many-monsters-various-colors-doodle-come-bless-birthday-happy_577083-84.jpg?w=826"
----
-
-## Introduction: Crafting a Recursive File System in React
-
-In modern web development, creating interactive and dynamic file systems is a common requirement. Whether for managing documents, organizing projects, or building complex data structures, having a robust file system is crucial. In this blog post, we’ll explore how to build a recursive file system in React, focusing on nested folders and files that can be added, renamed, or deleted.
-
-Check out the project on [GitHub](https://github.com/nisabmohd/recursive-file-system-react) for a complete implementation.
-
-## Project Overview
-
-The Recursive File System project is designed to simulate a file management system where users can interact with folders and files dynamically. It supports the following features:
-
-- **Adding New Folders and Files**: Create new folders and files within any existing folder.
-- **Renaming Items**: Change the name of folders and files.
-- **Deleting Items**: Remove folders and files from the file system.
-- **Nested Structure**: Handle nested folders and files to create a hierarchical view.
-
-## Key Features and Implementation
-
-### 1. Recursive Data Structure
-
-The core of the project is a recursive data structure that represents the file system. Each folder can contain other folders or files, and each file or folder has properties such as `id`, `name`, and `children` (for folders).
-
-Here’s a basic structure for a folder:
-
-```jsx
-const folder = {
-  id: "1",
-  name: "Documents",
-  type: "folder",
-  children: [
-    { id: "2", name: "Resume.pdf", type: "file" },
-    { id: "3", name: "CoverLetter.docx", type: "file" },
-  ],
-};
-```
-
-### 2. Components
-
-The project includes several key components to handle different aspects of the file system:
-
-- **FileExplorer**: Displays the entire file system and handles rendering folders and files.
-
-```jsx
-// src/components/FileExplorer.js
-import React, { useState } from "react";
-import Folder from "./Folder";
-import File from "./File";
-
-const FileExplorer = () => {
-  const [files, setFiles] = useState(initialData); // initialData is your recursive data structure
-
-  const addItem = (parentId, type) => {
-    // Logic to add a folder or file
-  };
-
-  const renameItem = (id, newName) => {
-    // Logic to rename a folder or file
-  };
-
-  const deleteItem = (id) => {
-    // Logic to delete a folder or file
-  };
-
-  return (
-    <div>
-      {files.map((file) =>
-        file.type === "folder" ? (
-          <Folder
-            key={file.id}
-            folder={file}
-            onAdd={addItem}
-            onRename={renameItem}
-            onDelete={deleteItem}
-          />
-        ) : (
-          <File
-            key={file.id}
-            file={file}
-            onRename={renameItem}
-            onDelete={deleteItem}
-          />
-        )
-      )}
-    </div>
-  );
-};
-
-export default FileExplorer;
-```
-
-- **Folder**: Renders folders and handles nested items.
-
-```jsx
-// src/components/Folder.js
-import React from "react";
-import FileExplorer from "./FileExplorer";
-
-const Folder = ({ folder, onAdd, onRename, onDelete }) => {
-  return (
-    <div>
-      <h3>{folder.name}</h3>
-      <button onClick={() => onAdd(folder.id, "folder")}>Add Folder</button>
-      <button onClick={() => onAdd(folder.id, "file")}>Add File</button>
-      <button onClick={() => onRename(folder.id, "New Name")}>Rename</button>
-      <button onClick={() => onDelete(folder.id)}>Delete</button>
-      {folder.children && <FileExplorer files={folder.children} />}
-    </div>
-  );
-};
-
-export default Folder;
-```
-
-- **File**: Renders individual files with options to rename and delete.
-
-```jsx
-// src/components/File.js
-import React from "react";
-
-const File = ({ file, onRename, onDelete }) => {
-  return (
-    <div>
-      <p>{file.name}</p>
-      <button onClick={() => onRename(file.id, "New Name")}>Rename</button>
-      <button onClick={() => onDelete(file.id)}>Delete</button>
-    </div>
-  );
-};
-
-export default File;
-```
-
-### 3. Handling State and Actions
-
-State management is handled using React hooks like `useState` to manage the file system data. Actions such as adding, renaming, and deleting items update the state accordingly.
-
-```jsx
-const [files, setFiles] = useState(initialData);
-
-const addItem = (parentId, type) => {
-  // Logic to add a new item to the file system
-};
-
-const renameItem = (id, newName) => {
-  // Logic to rename an existing item
-};
-
-const deleteItem = (id) => {
-  // Logic to delete an item
-};
-```
-
-## Conclusion: Building a Dynamic File System with React
-
-Creating a recursive file system in React is a powerful way to manage hierarchical data and provide a dynamic user experience. By leveraging React's component-based architecture and state management, you can build interactive file systems that handle complex nested structures efficiently.
-
-Check out the full implementation on [GitHub](https://github.com/nisabmohd/recursive-file-system-react) and explore how these concepts can be applied to your own projects. Happy coding!
-
-🚀📁
diff --git a/aria/contents/blogs/next-react.mdx b/aria/contents/blogs/why-rewrite-git-host-service-with-rust-language.mdx
similarity index 84%
rename from aria/contents/blogs/next-react.mdx
rename to aria/contents/blogs/why-rewrite-git-host-service-with-rust-language.mdx
index d8a0fd866..f3a94fde9 100644
--- a/aria/contents/blogs/next-react.mdx
+++ b/aria/contents/blogs/why-rewrite-git-host-service-with-rust-language.mdx
@@ -1,17 +1,13 @@
 ---
-title: "Using React Server Components and Server Actions in Next.js"
-description: "Explore how to leverage React Server Components and Server Actions in Next.js to build modern, efficient web applications. Learn how these features enhance performance and simplify server-side logic."
-date: 05-09-2024
+title: "Why Rewrite Git Host Service with Rust Language"
+description: ""
+date: 24-12-2024
 authors:
-  - avatar: "https://ui.shadcn.com/avatars/02.png"
-    handle: reactdev
-    username: React Dev
-    handleUrl: "https://github.com/reactdev"
-  - avatar: "https://ui.shadcn.com/avatars/01.png"
-    handle: nextjsguru
-    username: Next.js Guru
-    handleUrl: "https://github.com/nextjsguru"
-cover: "https://img.freepik.com/premium-vector/many-monsters-various-colors-doodle-come-bless-birthday-happy_577083-85.jpg?w=826"
+  - avatar: "https://avatars.githubusercontent.com/u/76467?v=4&size=64"
+    handle: genedna
+    username: Quanyi Ma
+    handleUrl: "https://github.com/genedna"
+cover: "contents/blogs/why-rewrite-git-host-service-with-rust-language/cover.jpg"
 ---
 
 ## Introduction: Enhancing Next.js with React Server Components
diff --git a/aria/public/contents/blogs/why-rewrite-git-host-service-with-rust-language/cover.jpeg b/aria/public/contents/blogs/why-rewrite-git-host-service-with-rust-language/cover.jpeg
new file mode 100644
index 000000000..9aa867a18
Binary files /dev/null and b/aria/public/contents/blogs/why-rewrite-git-host-service-with-rust-language/cover.jpeg differ