diff --git a/src/components/BottomBar.js b/src/components/BottomBar.js
index f3f8d07..bc8c68b 100644
--- a/src/components/BottomBar.js
+++ b/src/components/BottomBar.js
@@ -12,13 +12,13 @@ const BottomBar = () => {
     return (
         <div className='min-bottom-bar:hidden fixed bottom-0 left-0 right-0 bg-gray-800 p-2 flex justify-around items-center z-20 border-t-2 border-gray-700'>
             <div onClick={() => router.push('/')} className={`cursor-pointer p-2 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
-                <i className="pi pi-home" />
+                <i className="pi pi-home text-2xl" />
             </div>
             <div onClick={() => router.push('/content')} className={`cursor-pointer p-2 rounded-lg ${isActive('/content') ? 'bg-gray-700' : ''}`}>
-                <i className="pi pi-video" />
+                <i className="pi pi-video text-2xl" />
             </div>
             <div onClick={() => router.push('/feed')} className={`cursor-pointer p-2 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`}>
-                <i className="pi pi-comments" />
+                <i className="pi pi-comments text-2xl" />
             </div>
         </div>
     );
diff --git a/src/pages/api/stackernews.js b/src/pages/api/stackernews.js
new file mode 100644
index 0000000..f313bf7
--- /dev/null
+++ b/src/pages/api/stackernews.js
@@ -0,0 +1,37 @@
+import axios from 'axios';
+
+export default async function handler(req, res) {
+  try {
+    const response = await axios.post('https://stacker.news/api/graphql', {
+      query: `
+        query RecentItems {
+          items(
+            limit: 10,
+            sort: "NEW"
+          ) {
+            items {
+              id
+              title
+              url
+              createdAt
+              user {
+                name
+              }
+              sats
+            }
+          }
+        }
+      `
+    }, {
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+      }
+    });
+
+    res.status(200).json(response.data);
+  } catch (error) {
+    console.error('Error fetching from Stacker News:', error.response ? error.response.data : error.message);
+    res.status(500).json({ error: 'An error occurred while fetching data' });
+  }
+}
diff --git a/src/pages/feed/index.js b/src/pages/feed/index.js
index 31a048f..87cada1 100644
--- a/src/pages/feed/index.js
+++ b/src/pages/feed/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { InputText } from 'primereact/inputtext';
 import CommunityMenuTab from '@/components/menutab/CommunityMenuTab';
 import NostrFeed from './nostr';
@@ -18,8 +18,13 @@ const Feed = () => {
         router.push(`/feed?channel=${topic}`);
     };
 
+    // initialize the selected topic to the query parameter
+    useEffect(() => {
+        setSelectedTopic(router.query.channel);
+    }, [router.query.channel]);
+
     return (
-        <div className="bg-gray-900 h-full w-full min-bottom-bar:w-[87vw]">
+        <div className="bg-gray-900 h-full w-[100vw] min-bottom-bar:w-[87vw]">
             <div className="w-fit mx-4 pt-4 flex flex-col items-start">
                 <h1 className="text-3xl font-bold mb-4 ml-1">Community</h1>
                 <InputText
diff --git a/src/pages/feed/stackernews.js b/src/pages/feed/stackernews.js
index 5854047..433930d 100644
--- a/src/pages/feed/stackernews.js
+++ b/src/pages/feed/stackernews.js
@@ -1,79 +1,61 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { Card } from 'primereact/card';
-import { Avatar } from 'primereact/avatar';
-import { Tag } from 'primereact/tag';
-import { Button } from 'primereact/button';
 import { ProgressSpinner } from 'primereact/progressspinner';
-import { useDiscordQuery } from '@/hooks/communityQueries/useDiscordQuery';
-import { useRouter } from 'next/router';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+
+const fetchStackerNews = async () => {
+	const response = await axios.get('/api/stackernews');
+	return response.data.data.items.items; // Note the change here
+};
 
 const StackerNewsFeed = () => {
-    const router = useRouter();
-    const { data, error, isLoading } = useDiscordQuery({page: router.query.page});
+	const { data: items, isLoading, error } = useQuery({queryKey: ['stackerNews'], queryFn: fetchStackerNews});
 
-    if (isLoading) {
-        return (
-            <div className="h-[100vh] min-bottom-bar:w-[87vw] max-sidebar:w-[100vw]">
-                <ProgressSpinner className='w-full mt-24 mx-auto' />
-            </div>
-        );
-    }
+	if (isLoading) {
+		return (
+			<div className="h-[100vh] min-bottom-bar:w-[87vw] max-sidebar:w-[100vw]">
+				<ProgressSpinner className='w-full mt-24 mx-auto' />
+				<p>Loading...</p>
+			</div>
+		);
+	}
 
-    if (error) {
-        return <div className="text-red-500 text-center p-4">Failed to load messages. Please try again later.</div>;
-    }
+	if (error) {
+		console.error('Error fetching Stacker News:', error);
+		return <div className="text-red-500 text-center p-4">Error loading data. Please try again later.</div>;
+	}
 
-    const header = (message) => (
-        <div className="flex flex-row w-full items-center justify-between p-4 bg-gray-800 rounded-t-lg">
-            <div className="flex flex-row items-center">
-                <Avatar image={message.avatar} shape="circle" size="large" className="border-2 border-blue-400" />
-                <p className="pl-4 font-bold text-xl text-white">{message.author}</p>
-            </div>
-            <div className="flex flex-col items-start justify-between">
-                <div className="flex flex-row w-full justify-between items-center my-1 max-sidebar:flex-col max-sidebar:items-start">
-                    <Tag value={message.channel} severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2 max-sidebar:mr-0" />
-                    <Tag icon="pi pi-discord" value="discord" className="w-fit text-[#f8f8ff] bg-blue-400 max-sidebar:mt-1" />
-                </div>
-            </div>
-        </div>
-    );
-
-    const footer = (message) => (
-        <div className="w-full flex justify-between items-center">
-            <span className="bg-gray-800 rounded-lg p-2 text-sm text-gray-300">
-                {new Date(message.timestamp).toLocaleString()}
-            </span>
-            <Button
-                label="View in Discord"
-                icon="pi pi-external-link"
-                outlined
-                size="small"
-                className='my-2'
-                onClick={() => window.open(`https://discord.com/channels/${message.channelId}/${message.id}`, '_blank')}
-            />
-        </div>
-    );
-
-    return (
-        <div className="bg-gray-900 h-full w-full min-bottom-bar:w-[87vw]">
-            <div className="mx-4 mt-4">
-            {data && data.length > 0 ? (
-                data.map(message => (
-                    <Card
-                    key={message.id}
-                    header={() => header(message)}
-                    footer={() => footer(message)}
-                    className="w-full bg-gray-700 shadow-lg hover:shadow-xl transition-shadow duration-300 mb-4"
-                    >
-                        <p className="m-0 text-lg text-gray-200">{message.content}</p>
-                    </Card>
-                ))
-            ) : (
-                <div className="text-gray-400 text-center p-4">No messages available.</div>
-            )}
-            </div>
-        </div>
-    );
+	return (
+		<div className="bg-gray-900 h-full w-full min-bottom-bar:w-[87vw]">
+			<div className="mx-4 mt-4">
+				{items && items.length > 0 ? (
+					items.map(item => (
+						<Card
+							key={item.id}
+							className="w-full bg-gray-700 shadow-lg hover:shadow-xl transition-shadow duration-300 mb-4"
+						>
+							<h3 className="m-0 text-lg text-gray-200">{item.title}</h3>
+							<p className="text-sm text-gray-400">Posted by: {item.user.name}</p>
+							<p className="text-sm text-gray-400">
+								Comments: {item.commentCount} | Sats: {item.sats}
+							</p>
+							<p className="text-sm text-gray-400">
+								Created at: {new Date(item.createdAt).toLocaleString()}
+							</p>
+							{item.url && (
+								<a href={item.url} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">
+									View on Stacker News
+								</a>
+							)}
+						</Card>
+					))
+				) : (
+					<div className="text-gray-400 text-center p-4">No items available.</div>
+				)}
+			</div>
+		</div>
+	);
 };
 
 export default StackerNewsFeed;
\ No newline at end of file