diff --git a/src/frontend/src/components/Post/Post.jsx b/src/frontend/src/components/Post/Post.jsx
index df4151342e..9f82064e7e 100644
--- a/src/frontend/src/components/Post/Post.jsx
+++ b/src/frontend/src/components/Post/Post.jsx
@@ -5,6 +5,8 @@ import 'highlight.js/styles/github.css';
 import { makeStyles } from '@material-ui/core/styles';
 import { Box, Grid, Typography, ListSubheader } from '@material-ui/core';
 import './telescope-post-content.css';
+import Spinner from '../Spinner/Spinner.jsx';
+import ErrorRoundedIcon from '@material-ui/icons/ErrorRounded';
 import AdminButtons from '../AdminButtons';
 
 const useStyles = makeStyles((theme) => ({
@@ -67,6 +69,13 @@ const useStyles = makeStyles((theme) => ({
       textDecorationLine: 'underline',
     },
   },
+  spinner: {
+    padding: '20px',
+  },
+  error: {
+    lineHeight: '1.00',
+    fontSize: '1em',
+  },
 }));
 
 function formatPublishedDate(dateString) {
@@ -86,11 +95,44 @@ const Post = ({ postUrl }) => {
 
   if (error) {
     console.error(`Error loading post at ${postUrl}`, error);
-    return null;
+    return (
+      <Box className={classes.root} boxShadow={2}>
+        <ListSubheader className={classes.header}>
+          <AdminButtons />
+          <Typography variant="h1" className={classes.title}>
+            <Grid container className={classes.error}>
+              <Grid item>
+                <ErrorRoundedIcon className={classes.error} />
+              </Grid>{' '}
+              - Post Failed to Load
+            </Grid>
+          </Typography>
+        </ListSubheader>
+      </Box>
+    );
   }
 
   if (!post) {
-    return <div>Loading...</div>;
+    return (
+      <Box className={classes.root} boxShadow={2}>
+        <ListSubheader className={classes.header}>
+          <AdminButtons />
+          <Typography variant="h1" className={classes.title}>
+            Loading Blog...
+          </Typography>
+        </ListSubheader>
+
+        <Grid container justify="center">
+          <Grid item className={classes.spinner}>
+            <Spinner animation="border" variant="light">
+              <span className="sr-only" textAlign="center">
+                Loading...
+              </span>
+            </Spinner>
+          </Grid>
+        </Grid>
+      </Box>
+    );
   }
 
   return (
diff --git a/src/frontend/src/components/Posts/Posts.jsx b/src/frontend/src/components/Posts/Posts.jsx
index d5dfcce67a..af5e30d548 100644
--- a/src/frontend/src/components/Posts/Posts.jsx
+++ b/src/frontend/src/components/Posts/Posts.jsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { useSWRInfinite } from 'swr';
 
-import { Container } from '@material-ui/core';
+import { Container, Grid } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import SentimentDissatisfiedRoundedIcon from '@material-ui/icons/SentimentDissatisfiedRounded';
 import Timeline from './Timeline.jsx';
 import useSiteMetaData from '../../hooks/use-site-metadata';
 
@@ -11,6 +12,19 @@ const useStyles = makeStyles(() => ({
     padding: 0,
     maxWidth: '785px',
   },
+  error: {
+    position: 'center',
+    color: '#B5B5B5',
+    fontFamily: 'Roboto',
+    fontSize: '5rem',
+    paddingBottom: '30px',
+  },
+  errorIcon: {
+    position: 'center',
+    color: '#B5B5B5',
+    fontSize: '10rem',
+    paddingBottom: 0,
+  },
 }));
 
 const REFRESH_INTERVAL = 5 * 60 * 1000; /* refresh data every 5 minutes */
@@ -29,7 +43,22 @@ const Posts = () => {
   // TODO: need proper error handling
   if (error) {
     console.error('Error loading post data', error);
-    return null;
+    return (
+      <Container className={classes.root}>
+        <Grid
+          container
+          className={classes.error}
+          justify="center"
+          alignItems="center"
+          direction="column"
+        >
+          <Grid item>
+            <SentimentDissatisfiedRoundedIcon className={classes.errorIcon} />
+          </Grid>
+          <Grid item>Blog Timeline Failed to Load!</Grid>
+        </Grid>
+      </Container>
+    );
   }
 
   return (