diff --git a/components/basketball/news/NewsCard.tsx b/components/basketball/news/NewsCard.tsx
index 3e9d0dd..fee9db9 100644
--- a/components/basketball/news/NewsCard.tsx
+++ b/components/basketball/news/NewsCard.tsx
@@ -1,6 +1,9 @@
 "use client";
+import Custom404 from "@/components/404";
+import { asyncFetch } from "@/utils/fetch";
+import { COMPETITIONID_TO_GROUPNAME } from "@/utils/variables";
 import { Card, CardBody, CardFooter, Image } from "@nextui-org/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 interface NewsCardProp {
   newsObject: BbNews;
@@ -10,6 +13,24 @@ const NULL = "http://svcsa.org/uploads/null";
 const NewsCard: React.FC<NewsCardProp> = ({ newsObject }) => {
   const [imageLoadingError, setImageLoadingError] = useState(false);
   const indexOfTeamName = newsObject.content.indexOf("team") + 5;
+  const [season, setSeason] = useState<BbSeason | null>(null);
+  useEffect(()=> {
+    async function fetchSeason() {
+      const seasonData = await asyncFetch(`/basketball/season/${newsObject.seasonid}`);
+      setSeason(seasonData);
+    }
+    fetchSeason();
+  }, [newsObject.seasonid])
+  if (!season) {
+    return <Custom404 />;
+  }
+  const competitionid = season.competitionid;
+  const groupName = COMPETITIONID_TO_GROUPNAME[competitionid];
+  const CATEGORY_TO_URL: Record<string, string> = {
+    "bb_result" : `/basketball/${groupName}/matches/${newsObject.matchid}`,
+    "bb_schedule" : `/basketball/${groupName}/matches`,
+  };
+  const categoryUrl = CATEGORY_TO_URL[newsObject.category] ?? "#";
   return (
     <Card className="text-white">
       <CardBody className="grid justify-items-center content-center">
@@ -34,7 +55,7 @@ const NewsCard: React.FC<NewsCardProp> = ({ newsObject }) => {
       <CardFooter className="flex flex-col text-xs w-48 h-40">
         <h3 className="text-center font-bold leading-6">{newsObject.title}</h3>
         <p className="text-center font-medium text-slate-900">{newsObject.content}</p>
-        <a className="text-orange-700 underline cursor-pointer">learn more</a>
+        <a className="text-orange-700 underline cursor-pointer" href={categoryUrl}>learn more</a>
       </CardFooter>
     </Card>
   );
diff --git a/components/basketball/news/NewsItem.tsx b/components/basketball/news/NewsItem.tsx
new file mode 100644
index 0000000..f2e21a8
--- /dev/null
+++ b/components/basketball/news/NewsItem.tsx
@@ -0,0 +1,45 @@
+import Link from "next/link"
+import NewsLogo from "./NewsLogo"
+import { useEffect, useState } from "react";
+import { asyncFetch } from "@/utils/fetch";
+import Custom404 from "@/components/404";
+import { COMPETITIONID_TO_GROUPNAME } from "@/utils/variables";
+
+interface NewsItemProps {
+    news: BbNews
+}
+const NewsItem: React.FC<NewsItemProps> = ({news}) => {
+    const [season, setSeason] = useState<BbSeason | null>(null);
+  useEffect(()=> {
+    async function fetchSeason() {
+      const seasonData = await asyncFetch(`/basketball/season/${news.seasonid}`);
+      setSeason(seasonData);
+    }
+    fetchSeason();
+  }, [news.seasonid])
+  if (!season) {
+    return <Custom404 />;
+  }
+  const competitionid = season.competitionid;
+  const groupName = COMPETITIONID_TO_GROUPNAME[competitionid];
+  const CATEGORY_TO_URL: Record<string, string> = {
+    "bb_result" : `/basketball/${groupName}/matches/${news.matchid}`,
+    "bb_schedule" : `/basketball/${groupName}/matches`,
+  };
+  const categoryUrl = CATEGORY_TO_URL[news.category] ?? "#";
+    return(
+        <div >
+            <div className="grid grid-cols-10 gap-4 min-h-16">
+              <NewsLogo news={news} />
+              <div className="col-start-3 col-span-8 cursor-pointer py-3 hover:bg-slate-300">
+                <Link href={categoryUrl}>
+                  <p className="font-bold">{news.title}</p>
+                  {news.content}{" "}
+                </Link>
+              </div>
+            </div>
+            <hr className="border-gray-300" />
+          </div>
+    )
+}
+export default NewsItem;
\ No newline at end of file
diff --git a/components/basketball/news/NewsList.tsx b/components/basketball/news/NewsList.tsx
index 951c7e7..803a6ca 100644
--- a/components/basketball/news/NewsList.tsx
+++ b/components/basketball/news/NewsList.tsx
@@ -1,8 +1,7 @@
-"use clinet"
+"use clinet";
 import { useState } from "react";
-import NewsLogo from "./NewsLogo";
-import Link from "next/link";
 import { Pagination } from "@nextui-org/react";
+import NewsItem from "./NewsItem";
 
 interface NewsListProps {
   newsList: BbNews[];
@@ -22,20 +21,11 @@ const NewsList: React.FC<NewsListProps> = ({ newsList }) => {
   };
   return (
     <div>
-      {currentNewsList.map((news, index) => (
-        <div key={index}>
-          <div className="grid grid-cols-10 gap-4 min-h-16">
-            <NewsLogo news={news} />
-            <div className="col-start-3 col-span-8 cursor-pointer py-3 hover:bg-slate-300">
-              <Link href={news.category == "bb_schedule" ? "/basketball" : "#"}>
-                <p className="font-bold">{news.title}</p>
-                {news.content}{" "}
-              </Link>
-            </div>
-          </div>
-          <hr className="border-gray-300" />
-        </div>
-      ))}
+      {currentNewsList.map((news, index) => {
+        return (
+          <NewsItem news={news} key={index}/>
+        );
+      })}
       <Pagination
         className="grid justify-items-center mt-2"
         isCompact