diff --git a/src/components/NewsSection/NewsEntry/index.tsx b/src/components/NewsSection/NewsEntry/index.tsx
index aa7b83f..bc88b36 100644
--- a/src/components/NewsSection/NewsEntry/index.tsx
+++ b/src/components/NewsSection/NewsEntry/index.tsx
@@ -1,31 +1,38 @@
-import { UnknownUserIcon } from "@app/assets/Icons";
 import styles from "./NewsEntry.module.css";
 import NewsBadge from "../NewsBadge";
+import { ArticleData } from "@app/hooks/useNews";
+import { Link } from "react-router-dom";
+import { Img } from "react-image";
+import UnknownUserIcon from "@app/assets/Icons/UnknownUser.svg";
 
 interface Props {
-    title: string;
-    postBadge: string;
-    author: string;
+    article: ArticleData;
 }
 
-const NewsEntry: React.FC<Props> = ({ title, postBadge, author }: Props) => {
-    return <div className={styles.container}>
-        <img className={styles.thumbnail} />
-        <div className={styles.main}>
-            <div className={styles.top_container}>
-                <div className={styles.top}>
-                    <NewsBadge>{postBadge}</NewsBadge>
+const NewsEntry: React.FC<Props> = ({ article }: Props) => {
+    return <Link to={`news/${article.md}`} key={article.md} style={{ width: "100%" }}>
+        <div className={styles.container}>
+            <img className={styles.thumbnail} src={`https://raw.githubusercontent.com/YARC-Official/News/master/images/thumbs/${article.thumb}`} />
+            <div className={styles.main}>
+                <div className={styles.top_container}>
+                    <div className={styles.top}>
+                        <NewsBadge>{article.type}</NewsBadge>
+                    </div>
+                    {article.title}
                 </div>
-                {title}
-            </div>
-            <div className={styles.bottom_container}>
-                <UnknownUserIcon />
-                <div>
-                    By: <span className={styles.author}>{author}</span>
+                <div className={styles.bottom_container}>
+                    <Img
+                        height={24}
+                        alt={`${article.author}'s avatar`}
+                        src={[`https://raw.githubusercontent.com/YARC-Official/News/master/images/avatars/${article.avatar}`, UnknownUserIcon]}
+                    />
+                    <div>
+                        By: <span className={styles.author}>{article.author}</span>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>;
+    </Link>;
 };
 
 export default NewsEntry;
\ No newline at end of file
diff --git a/src/components/NewsSection/index.tsx b/src/components/NewsSection/index.tsx
index dade179..9c59fbc 100644
--- a/src/components/NewsSection/index.tsx
+++ b/src/components/NewsSection/index.tsx
@@ -2,7 +2,6 @@ import { NewsIcon } from "@app/assets/Icons";
 import styles from "./NewsSection.module.css";
 import NewsEntry from "./NewsEntry";
 import { useNews } from "@app/hooks/useNews";
-import { Link } from "react-router-dom";
 
 const NewsSection: React.FC = () => {
     const { data, error, isLoading, isSuccess } = useNews();
@@ -11,7 +10,7 @@ const NewsSection: React.FC = () => {
 
     if (error) return `An error has occurred: ${error}`;
 
-    if(isSuccess) {
+    if (isSuccess) {
         return <div className={styles.container}>
             <div className={styles.header_container}>
                 <div className={styles.header_text}>
@@ -19,11 +18,7 @@ const NewsSection: React.FC = () => {
                 </div>
             </div>
             {
-                Array.from(data.articles).map(article =>
-                    <Link to={`news/${article.md}`} key={article.md} style={{width: "100%"}}>
-                        <NewsEntry title={article.title} postBadge={article.type} author={article.author} key={article.md} />
-                    </Link>
-                )
+                Array.from(data.articles).map(article => <NewsEntry article={article} key={article.md} />)
             }
         </div>;
     }
diff --git a/src/routes/NewsPage/NewsPage.module.css b/src/routes/NewsPage/NewsPage.module.css
index d6bd0d7..d6963dc 100644
--- a/src/routes/NewsPage/NewsPage.module.css
+++ b/src/routes/NewsPage/NewsPage.module.css
@@ -17,10 +17,10 @@
 .content {
     display: flex;
     flex-direction: column;
-    gap: 25px;
+    gap: 5px;
     padding: 25px 50px 50px 50px;
-    color: #7A7A7A;
-    --primary: #7A7A7A;
+    color: #333;
+    --primary: #333;
 }
 
 .content a {
diff --git a/src/routes/NewsPage/index.tsx b/src/routes/NewsPage/index.tsx
index 71c393e..cdd03f7 100644
--- a/src/routes/NewsPage/index.tsx
+++ b/src/routes/NewsPage/index.tsx
@@ -11,9 +11,8 @@ import { Img } from "react-image";
 import UnknownUserIcon from "@app/assets/Icons/UnknownUser.svg";
 
 function NewsPage() {
-
     const { md } = useParams();
-    if(!md) return <></>;
+    if (!md) return <></>;
 
     const { data, error, isLoading, isSuccess } = useNewsArticle(md);
 
@@ -21,22 +20,19 @@ function NewsPage() {
 
     if (error) return `An error has occurred: ${error}`;
 
-    if(isSuccess) {
-
+    if (isSuccess) {
         const { data: articleData, content } = matter(data);
 
-        return (<>
-
-            <div className={styles.header} style={{"--bannerURL": `url(https://raw.githubusercontent.com/YARC-Official/News/master/images/banners/${articleData.banner})`} as CSSProperties}>
+        return <>
+            <div className={styles.header} style={{ "--bannerURL": `url(https://raw.githubusercontent.com/YARC-Official/News/master/images/banners/${articleData.banner})` } as CSSProperties}>
                 <NewsBadge>{articleData.type}</NewsBadge>
                 <div className={styles.title}>{articleData.title}</div>
             </div>
             <div className={styles.content}>
                 <div className={styles.info}>
-
                     <div className={styles.author}>
                         <div className={styles.avatar}>
-                            <Img 
+                            <Img
                                 height={48}
                                 alt={`${articleData.author}'s avatar`}
                                 src={[`https://raw.githubusercontent.com/YARC-Official/News/master/images/avatars/${articleData.avatar}`, UnknownUserIcon]}
@@ -47,16 +43,14 @@ function NewsPage() {
                             <div className={styles.authorRole}>{articleData.role}</div>
                         </div>
                     </div>
-
                     {/* <div className={styles.releaseDate}>
                         <TimeIcon />
                         16 minutes ago
                     </div> */}
                 </div>
-
-                <SanitizedHTML dirtyHTML={marked.parse(content)}/>
+                <SanitizedHTML dirtyHTML={marked.parse(content)} />
             </div>
-        </>);
+        </>;
     }
 }