diff --git a/components/action-block.js b/components/action-block.js
index c72b1f4..964a36b 100644
--- a/components/action-block.js
+++ b/components/action-block.js
@@ -7,7 +7,7 @@ import Link from "./link";
 const ActionBlock = ({ heading, content, action, url }) => {
 	return (
 		<Flex sx={{ flexDirection: "column" }}>
-			<h4>{heading}</h4>
+			<h4 sx={{ variant: "styles.h4" }}>{heading}</h4>
 			<p>
 				{Array.isArray(content)
 					? content.map((line) => (
diff --git a/components/block-text-serializer.tsx b/components/block-text-serializer.tsx
index 5d6010f..3ed7150 100644
--- a/components/block-text-serializer.tsx
+++ b/components/block-text-serializer.tsx
@@ -10,15 +10,20 @@ import { StyledPlayer } from "./newfrontdoor/audio-player";
 import Link from "next/link";
 import { submitForm } from "../lib/sanity-fns";
 
-const AudioSerializer = ({ node }) => {
+type AudioSerializer = {
+	node: PropTypes.object.isRequired
+};
+
+const AudioSerializer = ({ node }: AudioSerializer) => {
 	return <StyledPlayer audio={node.url} isInvert={false} width="300px" />;
 };
 
-AudioSerializer.propTypes = {
+
+type VideoSerializer = {
 	node: PropTypes.object.isRequired
 };
 
-const VideoSerializer = ({ node }) => {
+const VideoSerializer = ({ node }: VideoSerializer) => {
 	const { url } = node;
 	if (url) {
 		const video = getVideoId(url || null);
@@ -33,46 +38,47 @@ const VideoSerializer = ({ node }) => {
 	}
 };
 
-VideoSerializer.propTypes = {
-	node: PropTypes.object.isRequired
-};
+type CustomStyleSerializer = {
+	children: string;
+}
 
-const CustomStyleSerializer = ({ children }) => {
-	return <p>{children}</p>;
+const CustomStyleSerializer = ({ children }: CustomStyleSerializer) => {
+	return <p sx={{ variant: "styles.p" }}>{children}</p>;
 };
 
-CustomStyleSerializer.propTypes = {
-	children: PropTypes.string.isRequired
-};
+type AnchorSerializer = {
+	children: PropTypes.array.isRequired,
+	mark: PropTypes.object.isRequired
+}
 
-const AnchorSerializer = ({ children, mark }) => {
+const AnchorSerializer = ({ children, mark }: AnchorSerializer) => {
 	return <span id={mark.id}>{children}</span>;
 };
 
-AnchorSerializer.propTypes = {
-	children: PropTypes.array.isRequired,
-	mark: PropTypes.object.isRequired
+type ImageSerializer = {
+	node: PropTypes.node.isRequired
 };
 
-const ImageSerializer = ({ node }) => {
+const ImageSerializer = ({ node }: ImageSerializer) => {
 	return <img src={urlFor(node).url() || ""} alt="" />;
 };
 
-ImageSerializer.propTypes = {
-	node: PropTypes.node.isRequired
-};
 
 const Success = (node) => (
 	<Box as="form" id={node.id}>
 		<fieldset>
-			<p>
+			<p  sx={{ variant: "styles.p" }}>
 				{node.onSuccess || "Thank you for your submission. We will get back to you as soon as we can."}
 			</p>
 		</fieldset>
 	</Box>
 );
 
-const FormSerializer = ({ node }) => {
+type FormSerializer = {
+	node: PropTypes.object.isRequired
+};
+
+const FormSerializer = ({ node }: FormSerializer) => {
 	return (
 		<Form
 			{...node}
@@ -84,13 +90,10 @@ const FormSerializer = ({ node }) => {
 	);
 };
 
-FormSerializer.propTypes = {
-	node: PropTypes.object.isRequired
-};
 
 const InternalLinkSerializer = ({ mark, children }) => {
 	return (
-		<Link href={mark.slug || ""} passHref>
+		<Link href={mark.slug || ""}  sx={{ variant: "styles.a" }}>
 			{children}
 		</Link>
 	);
@@ -104,7 +107,7 @@ InternalLinkSerializer.propTypes = {
 };
 
 const ExternalLinkSerializer = ({ mark, children }) => (
-	<Link href={mark.href} target="_blank" rel="noopener noreferrer">
+	<Link href={mark.href} target="_blank" rel="noopener noreferrer"  sx={{ variant: "styles.a" }}>
 		{children}
 	</Link>
 );
@@ -118,7 +121,7 @@ ExternalLinkSerializer.propTypes = {
 
 const FileLinkSerializer = ({ mark, children }) => {
 	return (
-		<Link href={mark.url} passHref target="_blank" rel="noopener noreferrer">
+		<Link href={mark.url} passHref target="_blank" rel="noopener noreferrer"  sx={{ variant: "styles.a" }}>
 			{children}
 		</Link>
 	);
@@ -131,16 +134,21 @@ FileLinkSerializer.propTypes = {
 	}).isRequired
 };
 
-const BlockRenderer = (props) => {
+type BlockRenderer = {
+	children: PropTypes.any,
+	node: PropTypes.object.isRequired
+};
+
+const BlockRenderer = (props: BlockRenderer) => {
 	const style = props.node.style || "normal";
 
 	const elements = {
-		h1: <h1>{props.children}</h1>,
-		h2: <h2>{props.children}</h2>,
-		h3: <h3>{props.children}</h3>,
-		h4: <h4>{props.children}</h4>,
-		h5: <h5>{props.children}</h5>,
-		h6: <h6>{props.children}</h6>
+		h1: <h1 sx={{ variant: "styles.h1" }}>{props.children}</h1>,
+		h2: <h2 sx={{ variant: "styles.h2" }}>{props.children}</h2>,
+		h3: <h3 sx={{ variant: "styles.h3" }}>{props.children}</h3>,
+		h4: <h4 sx={{ variant: "styles.h4" }}>{props.children}</h4>,
+		h5: <h5 sx={{ variant: "styles.h5" }}>{props.children}</h5>,
+		h6: <h6 sx={{ variant: "styles.h6" }}>{props.children}</h6>
 	};
 
 	if (/^h\d/.test(style)) {
@@ -155,12 +163,11 @@ const BlockRenderer = (props) => {
 	return BlockContent.defaultSerializers.types.block(props);
 };
 
-BlockRenderer.propTypes = {
-	children: PropTypes.any,
-	node: PropTypes.object.isRequired
+type BlockText = {
+	blocks: PropTypes.array.isRequired
 };
 
-const BlockText = ({ blocks }) => {
+const BlockText = ({ blocks }: BlockText) => {
 	return (
 		<BlockContent
 			blocks={blocks}
@@ -184,8 +191,5 @@ const BlockText = ({ blocks }) => {
 	);
 };
 
-BlockText.propTypes = {
-	blocks: PropTypes.array.isRequired
-};
 
 export default BlockText;
diff --git a/components/link.js b/components/link.js
deleted file mode 100644
index e95dc90..0000000
--- a/components/link.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import PropTypes from "prop-types";
-import React from "react";
-import NextLink from "next/link";
-import { Link as ThemeUiLink } from "theme-ui";
-
-//TODO: replace all instances of this component with next/link and remove it
-
-const pageLookup = (link) => {
-	// This depends on the fact that no sub-subdirectory of pages contains an index file
-	if (link.includes("/")) {
-		const urlArray = link.split("/");
-		urlArray.pop();
-		const root = urlArray.reduce((url, element) => {
-			return url.concat("/", element);
-		});
-		return `/${root}/${link}`;
-	}
-
-	switch (link) {
-		case "":
-		case "blog":
-			return `/blog/${link}`;
-		default:
-			return `/${link}`;
-	}
-};
-
-const regex = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/|api|\/api).*/;
-
-const Link = ({ link = "", children, isBlank, hasNoAnchor, passedSx, ...rest }) => {
-	if (isBlank) {
-		rest.target = "_blank";
-		rest.rel = "noreferrer noopener";
-	}
-
-	return regex.test(link) ? (
-		hasNoAnchor ? (
-			<NextLink passHref href={pageLookup(link)} as={`/${link}`}>
-				{children}
-			</NextLink>
-		) : (
-			<NextLink passHref href={pageLookup(link)} as={`/${link}`}>
-				<ThemeUiLink sx={passedSx} {...rest}>
-					{children}
-				</ThemeUiLink>
-			</NextLink>
-		)
-	) : (
-		<ThemeUiLink href={link} sx={passedSx} {...rest}>
-			{children}
-		</ThemeUiLink>
-	);
-};
-
-Link.propTypes = {
-	children: PropTypes.any,
-	variant: PropTypes.string,
-	link: PropTypes.string.isRequired,
-	isBlank: PropTypes.bool,
-	hasNoAnchor: PropTypes.bool,
-	passedSx: PropTypes.object
-};
-
-export default Link;
diff --git a/components/link.tsx b/components/link.tsx
new file mode 100644
index 0000000..2fb56f3
--- /dev/null
+++ b/components/link.tsx
@@ -0,0 +1,16 @@
+import NextLink from "next/link";
+type Link = {
+	children: any,
+	variant: String,
+	href: Required<URL>,
+	isBlank: Boolean,
+	hasNoAnchor: Boolean,
+};
+
+const Link = ({ href, children, ...rest }: Link) => {
+	<NextLink href={href} sx={{ variant: "styles.a"}} {...rest}>
+		{children}
+	</NextLink>
+};
+
+export default Link;
diff --git a/components/newfrontdoor/audio-player/audio-player.tsx b/components/newfrontdoor/audio-player/audio-player.tsx
index f9d1bd6..b766d0d 100644
--- a/components/newfrontdoor/audio-player/audio-player.tsx
+++ b/components/newfrontdoor/audio-player/audio-player.tsx
@@ -11,7 +11,7 @@ type AudioPlayerProps = {
   isPlayOnLoad?: boolean;
 } & StyledPlayerProps;
 
-const AudioPlayer: FC<AudioPlayerProps> = ({src, isPlayOnLoad, ...props}) => {
+const AudioPlayer: FC<AudioPlayerProps> = ({src, isPlayOnLoad = false, ...props}) => {
   return (
     <AudioManager isPlayOnLoad={isPlayOnLoad} initialSrc={src}>
       <StyledPlayer {...props} />
@@ -19,10 +19,6 @@ const AudioPlayer: FC<AudioPlayerProps> = ({src, isPlayOnLoad, ...props}) => {
   );
 };
 
-AudioPlayer.defaultProps = {
-  isPlayOnLoad: false
-};
-
 AudioPlayer.propTypes = {
   src: PropTypes.string,
   isPlayOnLoad: PropTypes.bool
diff --git a/components/newfrontdoor/audio-player/index.ts b/components/newfrontdoor/audio-player/index.ts
index 96328c7..facc9f9 100644
--- a/components/newfrontdoor/audio-player/index.ts
+++ b/components/newfrontdoor/audio-player/index.ts
@@ -1,3 +1,3 @@
-import { StyledPlayer } from "./styled-player";
+import StyledPlayer from "./styled-player";
 
 export { StyledPlayer };
\ No newline at end of file
diff --git a/components/newfrontdoor/audio-player/progress-bar.tsx b/components/newfrontdoor/audio-player/progress-bar.tsx
index 1c9fe85..ecca31b 100644
--- a/components/newfrontdoor/audio-player/progress-bar.tsx
+++ b/components/newfrontdoor/audio-player/progress-bar.tsx
@@ -14,7 +14,7 @@ type ProgressBarProps = {
 };
 
 const ProgressBar = forwardRef<Range, ProgressBarProps>(
-  ({value, max, onChange, step, isInteracting, color, isInvert}, rangeRef) => {
+  ({value, max, onChange, step = 1, isInteracting, color, isInvert = false}, rangeRef) => {
     return (
       <Range
         ref={rangeRef}
@@ -93,11 +93,6 @@ const ProgressBar = forwardRef<Range, ProgressBarProps>(
 
 export default ProgressBar;
 
-ProgressBar.defaultProps = {
-  step: 1,
-  isInvert: false
-};
-
 ProgressBar.propTypes = {
   value: PropTypes.number.isRequired,
   max: PropTypes.number.isRequired,
diff --git a/components/newfrontdoor/audio-player/styled-player.tsx b/components/newfrontdoor/audio-player/styled-player.tsx
index 19aefef..b4ff9ff 100644
--- a/components/newfrontdoor/audio-player/styled-player.tsx
+++ b/components/newfrontdoor/audio-player/styled-player.tsx
@@ -60,13 +60,13 @@ export type StyledPlayerProps = {
 };
 
 const StyledPlayer: FC<StyledPlayerProps> = ({
-  highlight,
-  base,
-  hasBorder,
-  background,
-  isInvert,
-  hasPlaybackspeed,
-  width
+  highlight = '#548BF4',
+  base = '#ddd',
+  hasBorder = true,
+  background = 'unset',
+  isInvert = "false",
+  hasPlaybackspeed = true,
+  width = "280px"
 }) => {
   const volumeBar = useRef<Range>(null);
   const {playerState, playerProps, dispatch} = useAudioPlayer();
@@ -240,16 +240,6 @@ const StyledPlayer: FC<StyledPlayerProps> = ({
   );
 };
 
-StyledPlayer.defaultProps = {
-  highlight: '#548BF4',
-  base: '#ddd',
-  hasBorder: true,
-  background: 'unset',
-  isInvert: false,
-  hasPlaybackspeed: true,
-  width: '280px'
-};
-
 StyledPlayer.propTypes = {
   highlight: PropTypes.string,
   base: PropTypes.string,
diff --git a/components/newfrontdoor/blog/post-page.js b/components/newfrontdoor/blog/post-page.js
index c08ec4f..1b99e71 100644
--- a/components/newfrontdoor/blog/post-page.js
+++ b/components/newfrontdoor/blog/post-page.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import {Flex, jsx} from 'theme-ui';
 import format from 'date-fns/format';
 
-const PostPage = ({post, dateFormat, link, blockText}) => {
+const PostPage = ({post, dateFormat = 'dddd, MMMM do yyyy', link, blockText}) => {
   const {title, author, _createdAt, categories, date, body} = post;
   return (
     <Flex
@@ -55,8 +55,4 @@ PostPage.propTypes = {
   blockText: PropTypes.func.isRequired
 };
 
-PostPage.defaultProps = {
-  dateFormat: 'dddd, MMMM do yyyy'
-};
-
 export default PostPage;
diff --git a/components/newfrontdoor/blog/post.js b/components/newfrontdoor/blog/post.js
index 655bdc6..58ea48a 100644
--- a/components/newfrontdoor/blog/post.js
+++ b/components/newfrontdoor/blog/post.js
@@ -3,8 +3,13 @@ import {Flex, jsx} from 'theme-ui';
 import readingTime from 'reading-time';
 import DefaultSidebar from './sidebar';
 
-const Post = (props) => {
-  const {body, blockText, bodyTransform, Sidebar} = props;
+const Post = ({
+  body,
+  blockText,
+  bodyTransform = (props) => props,
+  Sidebar = DefaultSidebar,
+  ...rest
+}) => {
   const readingLength = readingTime(bodyTransform(body));
 
   return body ? (
@@ -14,23 +19,27 @@ const Post = (props) => {
         margin: 'auto',
         width: '100vw',
         maxWidth: '920px',
-        paddingTop: '40px',
+        paddingBottom: '40px',
         minHeight: [null, '600px']
       }}
     >
-      <Sidebar {...props} readingLength={readingLength} />
+
+      <Sidebar {...rest} readingLength={readingLength} />
       <div
         sx={{
           flex: '1 0 auto',
           width: 'auto',
           maxWidth: ['24em', '32em'],
-          paddingTop: [null, '23.5px']
+          paddingTop: [null, '23.5px'],
+          'img': {
+            width: '100%'
+          },
         }}
       >
         {blockText(body)}
       </div>
     </Flex>
-  ) : null;
+  ) : <div>empty</div>;
 };
 
 Post.propTypes = {
@@ -40,9 +49,4 @@ Post.propTypes = {
   bodyTransform: PropTypes.func
 };
 
-Post.defaultProps = {
-  bodyTransform: (props) => props,
-  Sidebar: DefaultSidebar
-};
-
 export default Post;
diff --git a/components/newfrontdoor/blog/sidebar.js b/components/newfrontdoor/blog/sidebar.js
index 50b3fe2..81b3d37 100644
--- a/components/newfrontdoor/blog/sidebar.js
+++ b/components/newfrontdoor/blog/sidebar.js
@@ -6,11 +6,11 @@ const Sidebar = ({
   title,
   author,
   _createdAt,
-  dateFormat,
+  overrides = {},
+  dateFormat = 'EEEE, MMMM do yyyy',
   readingLength,
   categories,
   Link,
-  overrides
 }) => {
   return (
     <aside
@@ -27,7 +27,7 @@ const Sidebar = ({
         ...overrides
       }}
     >
-      <h2>{title}</h2>
+      <h2 sx={{ variant: "styles.h2" }}>{title}</h2>
       <div>
         {author && (
           <Link link={author._id} data={author}>
@@ -68,9 +68,4 @@ Sidebar.propTypes = {
   readingLength: PropTypes.object
 };
 
-Sidebar.defaultProps = {
-  overrides: {},
-  dateFormat: 'EEEE, MMMM do yyyy'
-};
-
 export default Sidebar;
diff --git a/components/newfrontdoor/calendar/calendar.tsx b/components/newfrontdoor/calendar/calendar.tsx
index 6984be5..c2372b4 100644
--- a/components/newfrontdoor/calendar/calendar.tsx
+++ b/components/newfrontdoor/calendar/calendar.tsx
@@ -20,7 +20,7 @@ type CalendarProps = {
 const Calendar: FC<CalendarProps> = ({
   client,
   initialView,
-  isViewFixed,
+  isViewFixed = false,
   handleNav
 }) => {
   const [
@@ -100,8 +100,4 @@ Calendar.propTypes = {
   handleNav: PropTypes.func
 };
 
-Calendar.defaultProps = {
-  isViewFixed: false
-};
-
 export default Calendar;
diff --git a/components/newfrontdoor/calendar/components/calendar-controls.tsx b/components/newfrontdoor/calendar/components/calendar-controls.tsx
index 889faae..f8d7e00 100644
--- a/components/newfrontdoor/calendar/components/calendar-controls.tsx
+++ b/components/newfrontdoor/calendar/components/calendar-controls.tsx
@@ -19,7 +19,7 @@ const CalendarControls: FC<CalendarControlsProps> = ({
   location,
   calendarView,
   input,
-  isViewFixed,
+  isViewFixed = false,
   startOfMonth
 }) => {
   const dispatch = useCalendarDispatch();
@@ -126,8 +126,4 @@ CalendarControls.propTypes = {
   startOfMonth: PropTypes.instanceOf(Date).isRequired
 };
 
-CalendarControls.defaultProps = {
-  isViewFixed: false
-};
-
 export default CalendarControls;
diff --git a/components/newfrontdoor/form/form.js b/components/newfrontdoor/form/form.js
index 4ea49c0..2991126 100644
--- a/components/newfrontdoor/form/form.js
+++ b/components/newfrontdoor/form/form.js
@@ -56,7 +56,7 @@ const NestedForm = ({
       <fieldset sx={{display: 'contents'}}>
         {childLabel && (
           <legend>
-            <h4>
+            <h4 sx={{ variant: "styles.h4" }}>
               {childLabel} {index + 1}
             </h4>
           </legend>
@@ -111,11 +111,11 @@ const FormField = ({field, form, blockText, name = ''}) => {
     case 'field-array':
       return (
         <Box sx={{gridColumn: '1/3'}}>
-          {field.label && <h2>{field.label}</h2>}
+          {field.label && <h2 sx={{ variant: "styles.h2" }}>{field.label}</h2>}
           {field.description && blockText ? (
             blockText(field.description)
           ) : (
-            <p>{field.description}</p>
+            <p  sx={{ variant: "styles.p" }}>{field.description}</p>
           )}
           <Grid gap={20} columns={['1fr 1fr']}>
             <div sx={{display: 'flex', justifyContent: 'space-evenly'}}>
@@ -291,7 +291,7 @@ const FormComponent = ({
   success
 }) => {
   const defaultTextHandler = (content) => {
-    return <p>{content}</p>;
+    return <p sx={{ variant: "styles.p" }}>{content}</p>;
   };
 
   const block = blockText ?? defaultTextHandler;
@@ -308,7 +308,7 @@ const FormComponent = ({
           ) : (
             <Box as="form" id={id}>
               <fieldset>
-                <p>
+                <p sx={{ variant: "styles.p" }}>
                   Thankyou for your submission. We will get back to you as soon
                   as we can.
                 </p>
@@ -318,7 +318,7 @@ const FormComponent = ({
         ) : (
           <Box as="form" id={id} onSubmit={handleSubmit}>
             <fieldset>
-              {title && <h2>{title}</h2>}
+              {title && <h2 sx={{ variant: "styles.h2" }}>{title}</h2>}
               {description && block(description)}
               <Grid gap={20} columns={['1fr 1fr']}>
                 {fields.map((field) => (
diff --git a/components/newfrontdoor/sermon/current-series.js b/components/newfrontdoor/sermon/current-series.js
index d868ab0..d082d1f 100644
--- a/components/newfrontdoor/sermon/current-series.js
+++ b/components/newfrontdoor/sermon/current-series.js
@@ -5,7 +5,7 @@ import {PulseLoader} from 'react-spinners';
 import {Styled, jsx} from 'theme-ui';
 import RenderSeriesComponent from './render-series-content';
 
-const CurrentSeries = ({loading, seriesData, style}) => {
+const CurrentSeries = ({loading, seriesData, style = {}}) => {
   return (
     <section sx={style}>
       <h2>Current Series</h2>
@@ -21,8 +21,4 @@ CurrentSeries.propTypes = {
   style: PropTypes.object
 };
 
-CurrentSeries.defaultProps = {
-  style: {}
-};
-
 export default CurrentSeries;
diff --git a/components/newfrontdoor/sermon/featured-series.js b/components/newfrontdoor/sermon/featured-series.js
index 46d2cae..9f871cb 100644
--- a/components/newfrontdoor/sermon/featured-series.js
+++ b/components/newfrontdoor/sermon/featured-series.js
@@ -5,7 +5,7 @@ import {jsx, Styled} from 'theme-ui';
 import {PulseLoader} from 'react-spinners';
 import RenderSeriesComponent from './render-series-content';
 
-const FeaturedSeries = ({loading, seriesData, style}) => {
+const FeaturedSeries = ({loading, seriesData, style = {}}) => {
   return (
     <section sx={style}>
       <h2>Featured Series</h2>
@@ -21,8 +21,4 @@ FeaturedSeries.propTypes = {
   style: PropTypes.object
 };
 
-FeaturedSeries.defaultProps = {
-  style: {}
-};
-
 export default FeaturedSeries;
diff --git a/components/newfrontdoor/sermon/latest-sermon.js b/components/newfrontdoor/sermon/latest-sermon.js
index ec65617..807d587 100644
--- a/components/newfrontdoor/sermon/latest-sermon.js
+++ b/components/newfrontdoor/sermon/latest-sermon.js
@@ -10,7 +10,7 @@ const LatestSermon = ({
   sermonUrl,
   sermonImg,
   seriesImg,
-  loading,
+  loading = false,
   error
 }) => {
   return (
@@ -50,8 +50,4 @@ LatestSermon.propTypes = {
   loading: PropTypes.bool
 };
 
-LatestSermon.defaultProps = {
-  loading: false
-};
-
 export default LatestSermon;
diff --git a/components/newfrontdoor/sermon/recent-series.js b/components/newfrontdoor/sermon/recent-series.js
index 7e29f50..98b2958 100644
--- a/components/newfrontdoor/sermon/recent-series.js
+++ b/components/newfrontdoor/sermon/recent-series.js
@@ -5,7 +5,7 @@ import {PulseLoader} from 'react-spinners';
 import {Styled, jsx} from 'theme-ui';
 import RenderSeriesComponent from './render-series-content';
 
-const RecentSeries = ({loading, seriesData, style}) => {
+const RecentSeries = ({loading, seriesData, style = {}}) => {
   return (
     <section sx={style}>
       <h2>Recent Series</h2>
@@ -24,8 +24,4 @@ RecentSeries.propTypes = {
   style: PropTypes.object
 };
 
-RecentSeries.defaultProps = {
-  style: {}
-};
-
 export default RecentSeries;
diff --git a/components/newfrontdoor/sermon/sermon-table.js b/components/newfrontdoor/sermon/sermon-table.js
index 8cf647a..4a33dff 100644
--- a/components/newfrontdoor/sermon/sermon-table.js
+++ b/components/newfrontdoor/sermon/sermon-table.js
@@ -5,12 +5,12 @@ import PropTypes from 'prop-types';
 import {FaDownload} from 'react-icons/fa';
 
 const SermonTable = ({
-  sermons,
-  headers,
-  titleKey,
-  sermonDirectory,
-  renderLink,
-  passedSx
+  sermons = [],
+  headers = [],
+  titleKey = 'title',
+  sermonDirectory = 'sermons',
+  renderLink = () => {},
+  passedSx = {}
 }) => {
   const desiredColumns = headers
     .map((item) => item.key)
@@ -65,15 +65,6 @@ const SermonTable = ({
   );
 };
 
-SermonTable.defaultProps = {
-  sermons: [],
-  headers: [],
-  titleKey: 'title',
-  sermonDirectory: 'sermons',
-  renderLink: () => {},
-  passedSx: {}
-};
-
 SermonTable.propTypes = {
   headers: PropTypes.array,
   sermons: PropTypes.array,
diff --git a/components/section-title.js b/components/section-title.js
index 55d1d83..1fdf906 100644
--- a/components/section-title.js
+++ b/components/section-title.js
@@ -1,24 +1,20 @@
 import React from 'react';
-import styled from '@emotion/styled';
-
-const Title = styled.div`
-  text-align: center;
-  font-size: 36px;
-  font-family: 'Raleway', sans-serif;
-  background: url('/section-head2.png');
-  padding: 15px 0px;
-  text-transform: uppercase;
-  margin: 40px 0px;
-
-  span {
-    color: #333;
-    padding: 3px 5px;
-    font-weight: 400;
-  }
-`;
 
 export default function SectionTitle({text}) {
   return (
-    <Title>{text}</Title>
+    <div sx={{
+      textAlign: 'center',
+      fontSize: '36px',
+      fontFamily: `'Raleway', sans-serif`,
+      background: `url('/section-head2.png')`,
+      padding: '15px 0px',
+      textTransform: 'uppercase',
+      margin: '40px 0px',
+      'span': {
+        color: "#333",
+        padding: "3px 5px",
+        fontWeight: "400",
+      }
+    }}>{text}</div>
   );
 }
diff --git a/components/sidebar/menu.js b/components/sidebar/menu.js
index 0d9487c..70a6cb1 100644
--- a/components/sidebar/menu.js
+++ b/components/sidebar/menu.js
@@ -10,7 +10,7 @@ const Menu = ({ menuItems }) => {
 			<Text as="ul" variant="menuUl" sx={{ display: ["none", "block"] }}>
 				{menuItems.map((item) => (
 					<li key={item.childpages[0]?.pathname + "root"}>
-						<Link href={item.childpages[0].slug.current} passHref>
+						<Link href={item.childpages[0].slug.current}>
 							{item.text}
 							{item.children && " »"}
 						</Link>
@@ -19,7 +19,7 @@ const Menu = ({ menuItems }) => {
 								{item.childpages.map((child) => {
 									return (
 										<li key={child.slug.current + "child"}>
-											<Link href={child.slug.current} passHref>
+											<Link href={child.slug.current}>
 												{child.text}
 											</Link>
 										</li>
diff --git a/pages/blog/index.js b/pages/blog/index.js
index e513b66..4603748 100644
--- a/pages/blog/index.js
+++ b/pages/blog/index.js
@@ -20,18 +20,16 @@ import { withEmotionCache } from "@emotion/core";
 const Link = ({ link, data, children }) => {
 	return (
 		<BasicLink
-			passHref
 			href={`/blog?search=${link}`}
-			as={`/blog?search=${data?.slug?.current || link}`}
+			sx={{ variant: "styles.a" }}
 		>
-			<a>{children}</a>
+			{children}
 		</BasicLink>
 	);
 };
 
 const Blog = ({ mainData, menuData, blogPosts }) => {
 	const { content, title, mainImage } = mainData;
-
 	return (
 		<Layout menuItems={menuData.menuitems} footer={menuData.footer}>
 			<Grid gap={20}>
@@ -49,6 +47,9 @@ const Blog = ({ mainData, menuData, blogPosts }) => {
 						fontFamily: "body",
 						lineHeight: 1,
 						position: [null, null, "sticky"],
+						'li': {
+							lineHeight: "1.5rem"
+						}
 					}}
 					Link={Link}
 					blockText={(content) => <BlockText blocks={content} />}
diff --git a/pages/style-guide.js b/pages/style-guide.js
index 00458e6..f679bf9 100644
--- a/pages/style-guide.js
+++ b/pages/style-guide.js
@@ -3,7 +3,7 @@ import { Styled } from "theme-ui";
 import { TypeScale, TypeStyle, ColorPalette } from "@theme-ui/style-guide";
 const StyleGuide = (props) => (
 	<>
-		<h1>Style Guide</h1>
+		<h1 sx={{ variant: "styles.h1" }}>Style Guide</h1>
 		<ColorPalette />
 		<TypeScale />
 		<TypeStyle fontFamily="heading" fontWeight="heading" lineHeight="heading" />
diff --git a/theme/menu.ts b/theme/menu.ts
index 271ddbb..3146739 100644
--- a/theme/menu.ts
+++ b/theme/menu.ts
@@ -15,10 +15,11 @@ export const menuUl: Theme['styles']['ul'] = {
       fontSize: '18px',
       textTransform: 'uppercase',
       fontWeight: '300',
-      display: 'block'
+      display: 'block',
+      textDecoration: 'none',
     },
     'a:hover': {
-      background: 'light',
+      // background: 'light',
       color: 'accent'
     },
     '&:hover': {
diff --git a/theme/theme.ts b/theme/theme.ts
index f0e7d67..8ef537f 100644
--- a/theme/theme.ts
+++ b/theme/theme.ts
@@ -137,7 +137,7 @@ export const theme: Theme = {
       textDecoration: 'none',
       cursor: 'pointer',
       '&:visited': {
-        color: 'text'
+        color: 'accent'
       },
       '&:hover': {
         color: 'text'
diff --git a/tsconfig.json b/tsconfig.json
index c6bf525..e8f0576 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "esnext",
     "lib": [
       "dom",
       "dom.iterable",
@@ -17,6 +17,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
+		"jsxImportSource": "theme-ui",
     "incremental": true
   },
   "include": [