diff --git a/src/app/page.module.scss b/src/app/page.module.scss
index 47aaf1e..ce5d618 100644
--- a/src/app/page.module.scss
+++ b/src/app/page.module.scss
@@ -3,4 +3,9 @@
 .main {
     padding-top: 5rem;
     padding-left: 5rem;
+}
+
+.trending{
+    width: 60%;
+    margin: 0 auto;
 }
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d006b77..5b507b3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,12 +6,35 @@ import Link from 'next/link';
 import { motion } from 'framer-motion';
 import { useState, useEffect } from 'react';
 
+const PostArray = [
+    {
+        title:'problems with running docker on arm processor',
+        content:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl eget aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam ni du tein kanker moederus',
+        author:'testuser1234567',
+        category:'Technology',
+        postId:'1',
+        date:'01-02-2023',
+        reactionCount:'69',
+    },
+    {
+        title:'problems with running docker on arm processor',
+        content:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl eget aliquam ultricies, nunc nisl ultricies nunc, vitae aliquam ni du tein kanker moederus',
+        author:'testuser1234567',
+        category:'Technology',
+        postId:'1',
+        date:'01-02-2023',
+        reactionCount:'69',
+    }
+]
+
 export default function Home() {
     const [selectedTheme, setSelectedTheme] = useState('black');
 
     return (
         <main className={styles.main}>
-            
+            <div className={styles.trending}>
+                <h2>Trending</h2>
+            </div>
         </main>
     );
 }