diff --git a/src/App.css b/src/App.css
index feaf5bc..f581b07 100644
--- a/src/App.css
+++ b/src/App.css
@@ -43,6 +43,10 @@
   cursor: pointer;
 }
 
+a.blue-button {
+  text-decoration: none;
+}
+
 .clickable-link {
   text-decoration: underline;
   color: #38A3BD;
diff --git a/src/components/ArticleRow.tsx b/src/components/ArticleRow.tsx
index 24ee7ff..5091645 100644
--- a/src/components/ArticleRow.tsx
+++ b/src/components/ArticleRow.tsx
@@ -18,11 +18,9 @@ export default function ArticleRow({
 	};
 
 	return (
-		<div className='row'>
+		<div className='d-flex'>
 			<div className='article-row-thumbnail'>
-				{thumbUrl ? (
-					<img className='mb-4' src={thumbUrl} alt={article.title} />
-				) : null}
+				{thumbUrl ? <img src={thumbUrl} alt={article.title} /> : null}
 			</div>
 			<div className='article-row-content'>
 				<Link
diff --git a/src/components/InitiativeRow.tsx b/src/components/InitiativeRow.tsx
index 835dd85..78866f0 100644
--- a/src/components/InitiativeRow.tsx
+++ b/src/components/InitiativeRow.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import imageUrl from '../imageUrl';
 import BlockContent from '@sanity/block-content-to-react';
+import '../css/article.css';
 
 export default function InitiativeRow({
 	initiative,
@@ -13,16 +14,12 @@ export default function InitiativeRow({
 	}
 
 	return (
-		<div style={{ display: 'flex' }}>
-			<div style={{ flex: 1, padding: '10px' }}>
-				{thumbUrl ? (
-					<img className='mb-4' src={thumbUrl} alt={initiative.name} />
-				) : null}
+		<div className='d-flex'>
+			<div className='article-row-thumbnail'>
+				{thumbUrl ? <img src={thumbUrl} alt={initiative.name} /> : null}
 			</div>
-			<div style={{ flex: 3, padding: '10px' }}>
-				<h3 className='header'>
-					{initiative.name}
-				</h3>
+			<div className='article-row-content'>
+				<h3 className='header'>{initiative.name}</h3>
 				<BlockContent blocks={initiative.content} />
 			</div>
 		</div>
diff --git a/src/components/RecentNews.tsx b/src/components/RecentNews.tsx
index 4354ecd..5d27770 100644
--- a/src/components/RecentNews.tsx
+++ b/src/components/RecentNews.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
 import useQuery from '../hooks/useQuery';
 import ArticleRow from './ArticleRow';
 
@@ -12,10 +14,11 @@ export default function RecentNews() {
 
 	return (
 		<div>
-			<h3 className='text-center display-3'>Recent News</h3>
+			<h3 className='display-3'>Recent News</h3>
 			{news.map((article) => {
 				return <ArticleRow article={article} />;
 			})}
+			<Link to='/news'>All News</Link>
 		</div>
 	);
 }
diff --git a/src/css/article.css b/src/css/article.css
index 47ebabd..253b0bf 100644
--- a/src/css/article.css
+++ b/src/css/article.css
@@ -5,17 +5,16 @@
 
 .article-row-thumbnail {
   flex: 1;
-  padding: 10px;
-  /* 
-		To center the image
-	*/
-  /* display: flex;
-align-items: center; */
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 1em;
 }
 
 .article-row-content {
   flex: 3;
-  padding: 10px;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 1em;
 }
 
 .article-paragraphs {
diff --git a/src/css/get-involved.css b/src/css/get-involved.css
index 57d0884..a46a6c8 100644
--- a/src/css/get-involved.css
+++ b/src/css/get-involved.css
@@ -1,14 +1,17 @@
 .get-involved-body {
-	color: #444;
-	font-size: 22px;
-	line-height: 33px;
-	font-weight: 300;
+  color: #444;
+  font-size: 22px;
+  line-height: 33px;
+  font-weight: 300;
+  text-align: left;
 }
 
 .get-involved-title {
-	flex: 1;
+  flex: 1;
+  text-align: right;
+  padding-right: 2em;
 }
 
 .get-involved-description {
-	flex: 3;
+  flex: 3;
 }
\ No newline at end of file
diff --git a/src/css/mission.css b/src/css/mission.css
index 8e79532..a6984af 100644
--- a/src/css/mission.css
+++ b/src/css/mission.css
@@ -1,45 +1,48 @@
 .mission-box {
-	padding: 0px 20px;
+  padding: 0px 20px;
 }
 
 .mission-landing-page-text {
-	font-family: 'Arapey';
-	font-size: 33px;
-	font-style: italic;
-	font-weight: 500;
-	line-height: 44px;
+  font-family: 'Arapey';
+  font-size: 33px;
+  font-style: italic;
+  font-weight: 500;
+  line-height: 44px;
 }
 
 .mission-header {
-	font-size: 1.25rem;
-	font-weight: bold;
+  font-size: 2rem;
+  font-weight: bold;
+  text-align: right;
+  display: block;
+  padding-right: 2em;
 }
 
 .mission-para {
-	font-size: 22px;
-	line-height: 33px;
-	font-weight: 300;
+  font-size: 22px;
+  line-height: 33px;
+  font-weight: 300;
 }
 
 .mission-quote {
-	display: flex;
-	flex-direction: column;
-	margin: 20px 0px;
+  display: flex;
+  flex-direction: column;
+  margin: 20px 0px;
 }
 
 .mission-quote-text {
-	font-size: 2rem;
-	font-weight: 600;
-	font-style: italic;
-	font-family: 'Arapey';
-	width: 100%;
-	text-align: center;
+  font-size: 2rem;
+  font-weight: 600;
+  font-style: italic;
+  font-family: 'Arapey';
+  width: 100%;
+  text-align: center;
 }
 
 .mission-quote-author {
-	width: 100%;
-	text-align: right;
-	font-size: 20px;
-	display: inline-block;
-	padding-right: 200px;
-}
+  width: 100%;
+  text-align: right;
+  font-size: 20px;
+  display: inline-block;
+  padding-right: 200px;
+}
\ No newline at end of file
diff --git a/src/css/segment.css b/src/css/segment.css
index 5c61966..b3af010 100644
--- a/src/css/segment.css
+++ b/src/css/segment.css
@@ -12,6 +12,7 @@
 }
 
 .segment-title {
-  margin: 10px 0px;
-  font-weight: 600;
+  margin: 1em 0px;
+  font-size: 1.75rem;
+  font-weight: 500;
 }
\ No newline at end of file
diff --git a/src/pages/involved.tsx b/src/pages/involved.tsx
index 1c7253d..6674253 100644
--- a/src/pages/involved.tsx
+++ b/src/pages/involved.tsx
@@ -18,7 +18,7 @@ export default function GetInvolved() {
 		<>
 			<Hero heading='Get Involved' />
 			<main className='text-center'>
-				<h2>SGA Calendar</h2>
+				<h2 className='my-2'>SGA Calendar</h2>
 				<iframe
 					src='https://calendar.google.com/calendar/u/0/embed?src=mbftfg4hu7i8ueqrgcb5o7hc6k@group.calendar.google.com&ctz=America/New_York'
 					title='SGA Calendar'
diff --git a/src/pages/mission.tsx b/src/pages/mission.tsx
index 9b5ae9e..baa65a4 100644
--- a/src/pages/mission.tsx
+++ b/src/pages/mission.tsx
@@ -19,20 +19,19 @@ export default function Mission() {
 							— {mission.quote_author}
 						</span>
 					</div>
-					<div className='row'>
-						<div className='flex-1'>
+					<div className='d-flex'>
+						<div className='flex-1 p-2'>
 							<span className='mission-header'>Vision</span>
 						</div>
-						<div className='flex-2'>
+						<div className='flex-2 p-2'>
 							<p className='mission-para'>{mission.vision}</p>
 						</div>
 					</div>
-					<hr />
-					<div className='row'>
-						<div className='flex-1'>
+					<div className='d-flex'>
+						<div className='flex-1 p-2'>
 							<span className='mission-header'>Mission</span>
 						</div>
-						<div className='flex-2'>
+						<div className='flex-2 p-2'>
 							<p className='mission-para'>{mission.mission}</p>
 						</div>
 					</div>
diff --git a/src/pages/news.tsx b/src/pages/news.tsx
index 84f95da..edc6930 100644
--- a/src/pages/news.tsx
+++ b/src/pages/news.tsx
@@ -7,7 +7,9 @@ export default function News() {
 		<>
 			<Hero heading='News' />
 			<main>
-				<ArticleList />
+				<div style={{ paddingTop: '1em' }}>
+					<ArticleList />
+				</div>
 			</main>
 		</>
 	);
diff --git a/src/pages/newsArticle.tsx b/src/pages/newsArticle.tsx
index 1f12618..6f190a2 100644
--- a/src/pages/newsArticle.tsx
+++ b/src/pages/newsArticle.tsx
@@ -1,38 +1,39 @@
 import React from 'react';
 import { Link, useParams } from 'react-router-dom';
 import Hero from '../components/Hero';
-import useQuery from '../hooks/useQuery';
 import imageUrl from '../imageUrl';
 import BlockContent from '@sanity/block-content-to-react';
+import sanity from '../sanity';
 import '../css/article.css';
 
 export default function NewsArticle() {
 	let { articleId } = useParams<{ articleId: string }>();
-	let article = useQuery<SGA.ArticleDocument>('*[_id == $articleId] [0]', {
-		articleId,
-	});
+	let [article, setArticle] = React.useState<SGA.ArticleDocument>(null!);
 
-	let thumbUrl: string | undefined = undefined;
+	React.useEffect(() => {
+		sanity.fetch('*[_id == $articleId] [0]', { articleId }).then(setArticle);
+	}, [articleId]);
+
+	let thumbUrl: string | null = null;
 	if (article?.thumbnail) {
-		thumbUrl = imageUrl(article.thumbnail).url() || undefined;
+		thumbUrl = imageUrl(article.thumbnail).url();
 	} else {
 		thumbUrl = '/images/hero.png';
 	}
 
 	return (
 		<>
-			<Hero heading='News' imageURL={thumbUrl} />
+			<Hero heading='News' imageURL={thumbUrl || undefined} />
 			<main>
-				<Link to='/news' className='clickable-link'>
-					Go to all news articles
-				</Link>
-				<br />
 				{article ? (
 					<div style={{ maxWidth: '640px', margin: '2rem auto' }}>
+						<Link to='/news' className='clickable-link'>
+							Go to all news articles
+						</Link>
 						<h1>{article.title}</h1>
-						<i className='text-sm'>{article.publish_date}</i>
-						<br />
-						<i>{article.author || 'No author'}</i>
+						<i>
+							Posted {article.publish_date} by {article.author || 'No author'}
+						</i>
 						<br />
 						{/* Wrap the BlockContent in a div because it expands to <></> */}
 						<div className='article-paragraphs'>