diff --git a/.eslintcache b/.eslintcache
index e90fb56..b999540 100644
--- a/.eslintcache
+++ b/.eslintcache
@@ -1 +1 @@
-[{"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\reportWebVitals.js":"1","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\InitiativeList.tsx":"2","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\hooks\\useFooter.tsx":"3","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\hooks\\useMission.tsx":"4","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\index.tsx":"5","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\InitiativeColumn.tsx":"6","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\index.tsx":"7","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\App.tsx":"8","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\initiatives.tsx":"9","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Navbar.tsx":"10","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\InitiativeRow.tsx":"11","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Hero.tsx":"12","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\404.tsx":"13","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\news.tsx":"14","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\ArticleList.tsx":"15","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\ArticleRow.tsx":"16","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\newsArticle.tsx":"17","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Mission.tsx":"18","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Layout.tsx":"19","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Footer.tsx":"20","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Segment.tsx":"21","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\SegmentGroup.tsx":"22","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\RecentNews.tsx":"23","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\NewsAndMission.tsx":"24","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\officers.tsx":"25","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\MemberRow.tsx":"26","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\committee.tsx":"27","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\mission.tsx":"28","C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\classcouncil.tsx":"29"},{"size":362,"mtime":1606326357566,"results":"30","hashOfConfig":"31"},{"size":501,"mtime":1606350798836,"results":"32","hashOfConfig":"31"},{"size":462,"mtime":1606328149896,"results":"33","hashOfConfig":"31"},{"size":511,"mtime":1606328176836,"results":"34","hashOfConfig":"31"},{"size":495,"mtime":1606345497930,"results":"35","hashOfConfig":"31"},{"size":576,"mtime":1606351486206,"results":"36","hashOfConfig":"31"},{"size":430,"mtime":1606354132896,"results":"37","hashOfConfig":"31"},{"size":1069,"mtime":1606357023028,"results":"38","hashOfConfig":"31"},{"size":606,"mtime":1606345456179,"results":"39","hashOfConfig":"31"},{"size":2043,"mtime":1606357927947,"results":"40","hashOfConfig":"31"},{"size":756,"mtime":1606350522955,"results":"41","hashOfConfig":"31"},{"size":461,"mtime":1606354385817,"results":"42","hashOfConfig":"31"},{"size":209,"mtime":1606329157659,"results":"43","hashOfConfig":"31"},{"size":238,"mtime":1606354957048,"results":"44","hashOfConfig":"31"},{"size":1575,"mtime":1606354971296,"results":"45","hashOfConfig":"31"},{"size":1004,"mtime":1606354854758,"results":"46","hashOfConfig":"31"},{"size":1068,"mtime":1606349956703,"results":"47","hashOfConfig":"31"},{"size":516,"mtime":1606354128670,"results":"48","hashOfConfig":"31"},{"size":460,"mtime":1606354752175,"results":"49","hashOfConfig":"31"},{"size":702,"mtime":1606354788077,"results":"50","hashOfConfig":"31"},{"size":393,"mtime":1606353365754,"results":"51","hashOfConfig":"31"},{"size":927,"mtime":1606353194486,"results":"52","hashOfConfig":"31"},{"size":456,"mtime":1606354001145,"results":"53","hashOfConfig":"31"},{"size":301,"mtime":1606354130867,"results":"54","hashOfConfig":"31"},{"size":529,"mtime":1606355511530,"results":"55","hashOfConfig":"31"},{"size":612,"mtime":1606355616119,"results":"56","hashOfConfig":"31"},{"size":594,"mtime":1606355578065,"results":"57","hashOfConfig":"31"},{"size":1329,"mtime":1606357803633,"results":"58","hashOfConfig":"31"},{"size":549,"mtime":1606358160093,"results":"59","hashOfConfig":"31"},{"filePath":"60","messages":"61","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"e5jqdg",{"filePath":"62","messages":"63","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"64","messages":"65","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"66","messages":"67","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"68","messages":"69","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"70","messages":"71","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"72","messages":"73","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"74","messages":"75","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"76","messages":"77","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"78","messages":"79","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"80","messages":"81","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"82","messages":"83","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"84","messages":"85","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"86","messages":"87","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"88","messages":"89","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"90","messages":"91","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"92","messages":"93","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"94","messages":"95","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"96","messages":"97","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"98","messages":"99","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"100","messages":"101","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"102","messages":"103","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"104","messages":"105","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"106","messages":"107","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"108","messages":"109","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"110","messages":"111","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"112","messages":"113","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"114","messages":"115","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"116","messages":"117","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\reportWebVitals.js",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\InitiativeList.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\hooks\\useFooter.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\hooks\\useMission.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\index.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\InitiativeColumn.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\index.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\App.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\initiatives.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Navbar.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\InitiativeRow.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Hero.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\404.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\news.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\ArticleList.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\ArticleRow.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\newsArticle.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Mission.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Layout.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Footer.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\Segment.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\SegmentGroup.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\RecentNews.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\NewsAndMission.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\officers.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\components\\MemberRow.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\committee.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\mission.tsx",[],"C:\\Users\\legoc\\Desktop\\SGA React Website\\sga-website\\src\\pages\\classcouncil.tsx",[]]
\ No newline at end of file
+[{"C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\index.tsx":"1","C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\components\\Layout.tsx":"2","C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\pages\\mission.tsx":"3","C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\pages\\involved.tsx":"4","C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\App.tsx":"5","C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\pages\\initiatives.tsx":"6","C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\components\\RecentNews.tsx":"7","C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\pages\\classcouncil.tsx":"8","C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\hooks\\useQuery.tsx":"9","C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\components\\GetInvolvedRow.tsx":"10","C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\components\\Navbar.tsx":"11","C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\components\\Footer.tsx":"12","C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\pages\\newsArticle.tsx":"13","C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\pages\\newsarticle.tsx":"14","C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\reportWebVitals.js":"15","C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\components\\ArticleRow.tsx":"16"},{"size":495,"mtime":1606345497930,"results":"17","hashOfConfig":"18"},{"size":460,"mtime":1606354752175,"results":"19","hashOfConfig":"18"},{"size":1329,"mtime":1606357803633,"results":"20","hashOfConfig":"18"},{"size":1022,"mtime":1606629000998,"results":"21","hashOfConfig":"18"},{"size":1286,"mtime":1606629142916,"results":"22","hashOfConfig":"18"},{"size":600,"mtime":1606628129559,"results":"23","hashOfConfig":"18"},{"size":450,"mtime":1606628122283,"results":"24","hashOfConfig":"18"},{"size":543,"mtime":1606628126659,"results":"25","hashOfConfig":"18"},{"size":301,"mtime":1606628118929,"results":"26","hashOfConfig":"18"},{"size":322,"mtime":1606628611434,"results":"27","hashOfConfig":"18"},{"size":2045,"mtime":1606628798612,"results":"28","hashOfConfig":"18"},{"size":689,"mtime":1606628717647,"results":"29","hashOfConfig":"18"},{"size":1062,"mtime":1606629133522,"results":"30","hashOfConfig":"18"},{"size":1410,"mtime":1606629708641,"results":"31","hashOfConfig":"18"},{"size":362,"mtime":1606326357566,"results":"32","hashOfConfig":"18"},{"size":1031,"mtime":1606629408236,"results":"33","hashOfConfig":"18"},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1v04hgl",{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"50","messages":"51","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"52","messages":"53","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"54","messages":"55","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"56","messages":"57","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"58","messages":"59","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"60","messages":"61","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"62","messages":"63","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"64","messages":"65","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\index.tsx",[],"C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\components\\Layout.tsx",[],"C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\pages\\mission.tsx",[],"C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\pages\\involved.tsx",[],"C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\App.tsx",[],"C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\pages\\initiatives.tsx",[],"C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\components\\RecentNews.tsx",[],"C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\pages\\classcouncil.tsx",[],"C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\hooks\\useQuery.tsx",[],"C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\components\\GetInvolvedRow.tsx",[],"C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\components\\Navbar.tsx",[],"C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\components\\Footer.tsx",[],"C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\pages\\newsArticle.tsx",[],"C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\pages\\newsarticle.tsx",[],"C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\reportWebVitals.js",[],"C:\\Users\\legoc\\Desktop\\Coding\\SGA\\sga-react-website\\sga-website\\src\\components\\ArticleRow.tsx",[]]
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index d20ac4d..bd0f859 100644
--- a/src/App.css
+++ b/src/App.css
@@ -27,6 +27,10 @@
 	text-align: center;
 }
 
+.text-sm {
+	font-size: 0.75rem;
+}
+
 .row {
 	display: flex;
 	flex-direction: row;
@@ -55,4 +59,9 @@
 	border-color: #38A3BD;
 	color: #38A3BD;
 	display: inline-block;
-}
\ No newline at end of file
+}
+
+.clickable-link {
+	text-decoration: underline;
+	color: #38A3BD;
+}
diff --git a/src/App.tsx b/src/App.tsx
index bc10607..40b3580 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,7 +9,7 @@ import initiatives from './pages/initiatives';
 import involved from './pages/involved';
 import mission from './pages/mission';
 import news from './pages/news';
-import newsArticle from './pages/newsArticle';
+import newsarticle from './pages/newsarticle';
 import notFound from './pages/404';
 import officers from './pages/officers';
 import committee from './pages/committee';
@@ -22,7 +22,7 @@ export default function App() {
 				<Switch>
 					<Route path='/initiatives' exact component={initiatives} />
 					<Route path='/involved' exact component={involved} />
-					<Route path='/news/:articleId' component={newsArticle} />
+					<Route path='/news/:articleId' component={newsarticle} />
 					<Route path='/news' exact component={news} />
 					<Route path='/mission' exact component={mission} />
 					<Route path='/officers' exact component={officers} />
diff --git a/src/components/ArticleRow.tsx b/src/components/ArticleRow.tsx
index 09936ff..122235a 100644
--- a/src/components/ArticleRow.tsx
+++ b/src/components/ArticleRow.tsx
@@ -25,7 +25,7 @@ export default function ArticleRow({
 				) : null}
 			</div>
 			<div className='article-row-content'>
-				<Link to={'/news/' + article._id + '/' + slug(article.title)}>
+				<Link to={'/news/' + article._id + '/' + slug(article.title)} className="clickable-link">
 					<h3>{article.title}</h3>
 				</Link>
 				<i className='text-sm'>
diff --git a/src/css/article.css b/src/css/article.css
index b70fdc0..464d886 100644
--- a/src/css/article.css
+++ b/src/css/article.css
@@ -21,4 +21,10 @@
 .article-row-content {
   flex: 3;
   padding: 10px;
-}
\ No newline at end of file
+}
+
+.article-paragraphs {
+	font-size: 22px;
+	line-height: 33px;
+	font-weight: 400;
+}
diff --git a/src/pages/newsArticle.tsx b/src/pages/newsArticle.tsx
index 641c260..55c2a4c 100644
--- a/src/pages/newsArticle.tsx
+++ b/src/pages/newsArticle.tsx
@@ -4,34 +4,45 @@ import Hero from '../components/Hero';
 import useQuery from '../hooks/useQuery';
 import imageUrl from '../imageUrl';
 import BlockContent from '@sanity/block-content-to-react';
+import '../css/article.css';
 
 export default function NewsArticle() {
 	let { articleId } = useParams<{ articleId: string }>();
 	let article = useQuery<SGA.ArticleDocument>('*[_id == $articleId] [0]', {
 		articleId,
 	});
-	if (!article) {
-		return null;
-	}
 
 	let thumbUrl: string | undefined = undefined;
-	if (article.thumbnail) {
+	if (article?.thumbnail) {
 		thumbUrl = imageUrl(article.thumbnail).url() || undefined;
+	} else {
+		thumbUrl = '/images/hero.png';
 	}
 
 	return (
 		<>
-			<Hero heading={article.title} imageURL={thumbUrl} />
-			<div style={{ maxWidth: '640px' }} className='mx-auto mt-4 mb-8'>
-				<i className='text-sm'>
-					{article.publish_date} - {article.author || 'No author'}
-				</i>
-				<br />
-				<Link to='/news'>Go to all news articles</Link>
-				<br />
-				<BlockContent blocks={article.content}></BlockContent>
-				<br />
-			</div>
+			<Hero heading='News' imageURL={thumbUrl} />
+			<Link to='/news' className='clickable-link'>
+				Go to all news articles
+			</Link>
+			<br />
+			{article ? (
+				<div style={{ maxWidth: '640px', margin: '2rem auto' }}>
+					<h1>{article.title}</h1>
+					<i className='text-sm'>{article.publish_date}</i>
+					<br />
+					<i>{article.author || 'No author'}</i>
+					<br />
+					{/* Wrap the BlockContent in a div because it expands to <></> */}
+					<div className='article-paragraphs'>
+						<BlockContent blocks={article.content} />
+					</div>
+					<br />
+					<Link to='/news' className='clickable-link'>
+						Go to all news articles
+					</Link>
+				</div>
+			) : null}
 		</>
 	);
 }