diff --git a/components/ContentLink.tsx b/components/ContentLink.tsx
index 12853d5..7673e7a 100644
--- a/components/ContentLink.tsx
+++ b/components/ContentLink.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren, useContext } from 'react';
+import { forwardRef, useContext } from 'react';
 
 import { Content } from 'data/graphql-generated';
 import { Link } from 'components';
@@ -6,35 +6,41 @@ import { LinkProps } from '@mui/material';
 import UserContext from 'app/UserContext';
 import { contentUrl } from 'util/url-factory';
 
-const ContentLink: React.FC<
-  PropsWithChildren<{
-    item: Pick<Content, 'title' | 'forceRefresh' | 'hidden' | 'username' | 'section' | 'album' | 'name'>;
-    currentContent?: Content;
-    rel?: string;
-    url?: string;
-    className?: string;
-    sx?: LinkProps['sx'];
-  }>
-> = (props) => {
-  const { user } = useContext(UserContext);
+const ContentLink = forwardRef(
+  (
+    props: {
+      children: JSX.Element;
+      item: Pick<Content, 'title' | 'forceRefresh' | 'hidden' | 'username' | 'section' | 'album' | 'name'>;
+      currentContent?: Content;
+      rel?: string;
+      url?: string;
+      className?: string;
+      sx?: LinkProps['sx'];
+    },
+    ref
+  ) => {
+    const { user } = useContext(UserContext);
 
-  const item = props.item;
-  const currentContent = props.currentContent || { forceRefresh: false };
-  const isOwnerViewing = user?.username === item.username;
-  const { rel, url } = props;
+    const item = props.item;
+    const currentContent = props.currentContent || { forceRefresh: false };
+    const isOwnerViewing = user?.username === item.username;
+    const { rel, url } = props;
 
-  return (
-    <Link
-      href={url || contentUrl(item)}
-      title={item.title}
-      className={props.className}
-      target={item.forceRefresh || currentContent.forceRefresh ? '_self' : ''}
-      rel={rel}
-      sx={{ fontStyle: isOwnerViewing && item.hidden ? 'italic' : 'normal', ...props.sx }}
-    >
-      {props.children}
-    </Link>
-  );
-};
+    return (
+      <Link
+        href={url || contentUrl(item)}
+        title={item.title}
+        className={props.className}
+        target={item.forceRefresh || currentContent.forceRefresh ? '_self' : ''}
+        ref={ref}
+        rel={rel}
+        sx={{ fontStyle: isOwnerViewing && item.hidden ? 'italic' : 'normal', ...props.sx }}
+      >
+        {props.children}
+      </Link>
+    );
+  }
+);
+ContentLink.displayName = 'ContentLink';
 
 export default ContentLink;
diff --git a/components/ItemWrapper.tsx b/components/ItemWrapper.tsx
index 59f12f1..d8eaa82 100644
--- a/components/ItemWrapper.tsx
+++ b/components/ItemWrapper.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { forwardRef } from 'react';
 import { styled } from '@mui/material/styles';
 
 const StyledItemWrapper = styled('div', { label: 'ItemWrapper' })`
@@ -86,8 +86,14 @@ const StyledItemWrapper = styled('div', { label: 'ItemWrapper' })`
   }
 `;
 
-const ItemWrapper: React.FC<PropsWithChildren<{ className?: string }>> = ({ children, className }) => {
-  return <StyledItemWrapper className={className}>{children}</StyledItemWrapper>;
-};
+const ItemWrapper = forwardRef(({ children, className }: { children: JSX.Element; className?: string }, ref) => {
+  // @ts-ignore this is fine.
+  return (
+    <StyledItemWrapper ref={ref} className={className}>
+      {children}
+    </StyledItemWrapper>
+  );
+});
+ItemWrapper.displayName = 'ItemWrapper';
 
 export default ItemWrapper;
diff --git a/components/Link.tsx b/components/Link.tsx
index 6a4e837..a96f59b 100644
--- a/components/Link.tsx
+++ b/components/Link.tsx
@@ -2,13 +2,22 @@ import { ForwardedRef, forwardRef } from 'react';
 import { Link as MuiLink, LinkProps as MuiLinkProps } from '@mui/material';
 import NextLink, { LinkProps } from 'next/link';
 
-const BaseLink: React.FC<MuiLinkProps & LinkProps> = ({ children, as, href, shallow, target, ...props }) => (
-  <NextLink href={href || ''} as={as} shallow={shallow} passHref legacyBehavior>
-    <MuiLink underline="hover" target={target} rel={target === '_blank' ? 'noopener noreferrer' : undefined} {...props}>
-      {children}
-    </MuiLink>
-  </NextLink>
+const BaseLink: React.FC<MuiLinkProps & LinkProps> = forwardRef(
+  ({ children, as, href, shallow, target, ...props }, ref) => (
+    <NextLink href={href || ''} as={as} shallow={shallow} passHref legacyBehavior>
+      <MuiLink
+        underline="hover"
+        target={target}
+        rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </MuiLink>
+    </NextLink>
+  )
 );
+BaseLink.displayName = 'BaseLink';
 
 // @ts-ignore
 const Link = forwardRef(function ForwardedLink(props: MuiLinkProps & LinkProps, ref: ForwardedRef<typeof Link>) {
diff --git a/components/content/Item.tsx b/components/content/Item.tsx
index 5e13978..8f761d9 100644
--- a/components/content/Item.tsx
+++ b/components/content/Item.tsx
@@ -9,7 +9,8 @@ import Footer from './Footer';
 import Header from './Header';
 import Latest from './templates/Latest';
 import Simple from './templates/Simple';
-//import { animated, useTransition } from 'react-spring';
+import { forwardRef } from 'react';
+import { animated, useTransition } from 'react-spring';
 
 const StyledItem = styled('article', { label: 'Item' })`
   display: flex;
@@ -30,44 +31,58 @@ const COMPONENT_TYPE_MAP = {
   links: Album,
 };
 
-export default function Item(props: {
-  className?: string;
-  content: Content;
-  contentOwner: UserPublic;
-  comments?: Comment[];
-  favorites?: Favorite[];
-  isFeed?: boolean;
-}) {
-  // const transitions = useTransition(props.content, {
-  //   from: { opacity: 0 },
-  //   enter: { opacity: 1 },
-  //   leave: { display: 'none', opacity: 0 },
-  // });
+const Item = forwardRef(
+  (
+    props: {
+      className?: string;
+      content: Content;
+      contentOwner: UserPublic;
+      comments?: Comment[];
+      favorites?: Favorite[];
+      isFeed?: boolean;
+    },
+    ref
+  ) => {
+    const transitions = useTransition(props.content, {
+      from: { opacity: 0 },
+      enter: { opacity: 1 },
+      leave: { display: 'none', opacity: 0 },
+    });
 
-  // TODO
-  //const template = useRef(null);
+    // TODO
+    //const template = useRef(null);
 
-  // useImperativeHandle(ref, () => ({
-  //   getEditor: () => {
-  //     return template.current?.getEditor && template.current.getEditor();
-  //   },
-  // }));
+    // useImperativeHandle(ref, () => ({
+    //   getEditor: () => {
+    //     return template.current?.getEditor && template.current.getEditor();
+    //   },
+    // }));
 
-  const { className, content, contentOwner, comments, favorites, isFeed } = props;
-  /* @ts-ignore */
-  const TemplateComponent = COMPONENT_TYPE_MAP[content.template] || Simple;
-  const contentComponent = <TemplateComponent content={content} isFeed={isFeed} />;
+    const { className, content, contentOwner, comments, favorites, isFeed } = props;
+    /* @ts-ignore */
+    const TemplateComponent = COMPONENT_TYPE_MAP[content.template] || Simple;
+    const contentComponent = <TemplateComponent content={content} isFeed={isFeed} />;
 
-  return (
-    <ItemWrapper>
-      <StyledItem className={`hw-item h-entry ${className || ''}`}>
-        <Header content={content} />
-        {/* @ts-ignore */}
-        {COMPONENT_TYPE_MAP[content.template] ? contentComponent : <InnerView>{contentComponent}</InnerView>}
-        <Footer content={content} contentOwner={contentOwner} />
-        {!isFeed && comments?.length ? <Comments comments={comments} content={content} /> : null}
-        {!isFeed && favorites?.length ? <Favorites favorites={favorites} /> : null}
-      </StyledItem>
-    </ItemWrapper>
-  );
-}
+    return (
+      <ItemWrapper ref={ref}>
+        <StyledItem className={`hw-item h-entry ${className || ''}`}>
+          <Header content={content} />
+          {/* @ts-ignore */}
+          {COMPONENT_TYPE_MAP[content.template]
+            ? contentComponent
+            : transitions((style) => (
+                <animated.div style={style}>
+                  <InnerView>{contentComponent}</InnerView>
+                </animated.div>
+              ))}
+          <Footer content={content} contentOwner={contentOwner} />
+          {!isFeed && comments?.length ? <Comments comments={comments} content={content} /> : null}
+          {!isFeed && favorites?.length ? <Favorites favorites={favorites} /> : null}
+        </StyledItem>
+      </ItemWrapper>
+    );
+  }
+);
+Item.displayName = 'Item';
+
+export default Item;
diff --git a/components/content/Nav.tsx b/components/content/Nav.tsx
index c4d797f..da03060 100644
--- a/components/content/Nav.tsx
+++ b/components/content/Nav.tsx
@@ -7,6 +7,8 @@ import ContentLink from 'components/ContentLink';
 import { F } from 'i18n';
 import baseTheme from 'styles';
 import { contentUrl } from 'util/url-factory';
+import { Ref, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import ContentQuery from './ContentQuery';
 
 const StyledNav = styled('nav')`
   position: relative;
@@ -70,57 +72,49 @@ const FETCH_CONTENT_NEIGHBORS = gql`
   }
 `;
 
-export default function Nav({ content }: { content: Content }) {
+const Nav = forwardRef(({ content }: { content: Content }, ref) => {
   const { username, name } = content;
   const theme = useTheme();
-  const { loading, data /*client */ } = useQuery(FETCH_CONTENT_NEIGHBORS, {
+  const { loading, data, client } = useQuery(FETCH_CONTENT_NEIGHBORS, {
     variables: {
       username,
       name,
     },
   });
 
-  // const last = useRef(null);
-  // const next = useRef(null);
-  // const top = useRef(null);
-  // const prev = useRef(null);
-  // const first = useRef(null);
-  // const navigationActions = { last, next, top, prev, first };
-
-  // useEffect(() => {
-  //   window.addEventListener('keyup', handleKeyUp);
-  //   return () => window.removeEventListener('keyup', handleKeyUp);
-  // });
-
-  // TODO
-  // useImperativeHandle(ref, () => ({
-  //   prev: () => {
-  //     prev?.current && prev.current.click();
-  //   },
-  //   next: () => {
-  //     next?.current && next.current.click();
-  //   },
-  // }));
-
-  // const handleKeyUp = (evt) => {
-  //   if (isEditing) {
-  //     return;
-  //   }
-
-  //   switch (evt.key) {
-  //     case 'ArrowUp':
-  //       top?.current && top.current.click();
-  //       break;
-  //     case 'ArrowLeft':
-  //       next?.current && next.current.click();
-  //       break;
-  //     case 'ArrowRight':
-  //       prev?.current && prev.current.click();
-  //       break;
-  //     default:
-  //       break;
-  //   }
-  // };
+  const next = useRef<HTMLElement>(null);
+  const top = useRef<HTMLElement>(null);
+  const prev = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    window.addEventListener('keyup', handleKeyUp);
+    return () => window.removeEventListener('keyup', handleKeyUp);
+  });
+
+  useImperativeHandle(ref, () => ({
+    prev: () => {
+      prev?.current?.click();
+    },
+    next: () => {
+      next?.current?.click();
+    },
+  }));
+
+  const handleKeyUp = (evt: KeyboardEvent) => {
+    switch (evt.key) {
+      case 'ArrowUp':
+        top?.current?.click();
+        break;
+      case 'ArrowLeft':
+        next?.current?.click();
+        break;
+      case 'ArrowRight':
+        prev?.current?.click();
+        break;
+      default:
+        break;
+    }
+  };
 
   if (
     content.template === 'feed' ||
@@ -135,7 +129,13 @@ export default function Nav({ content }: { content: Content }) {
     return <LoadingEmptyBox />;
   }
 
-  function renderLink(contentMeta: ContentMetaInfo, name: string, msg: JSX.Element, colorPalette: keyof Palette) {
+  function renderLink(
+    contentMeta: ContentMetaInfo,
+    name: string,
+    msg: JSX.Element,
+    colorPalette: keyof Palette,
+    ref?: Ref<HTMLElement>
+  ) {
     contentMeta = contentMeta || {};
 
     const linkCommonProperties = {
@@ -167,23 +167,22 @@ export default function Nav({ content }: { content: Content }) {
       );
     }
 
-    // TODO - re-enable later
     // Preload surrounding content. We preload the GraphQL data here. Then, we also preload the images.
-    // if (['prev', 'next'].indexOf(name) !== -1) {
-    //   client.query({
-    //     query: ContentQuery,
-    //     variables: { username: contentMeta.username, name: contentMeta.name },
-    //   });
-
-    //   if (typeof window !== 'undefined') {
-    //     for (const img of contentMeta.prefetchImages || []) {
-    //       new Image().src = img;
-    //     }
-    //   }
-    // }
+    if (['prev', 'next'].indexOf(name) !== -1) {
+      client.query({
+        query: ContentQuery,
+        variables: { username: contentMeta.username, name: contentMeta.name },
+      });
+
+      if (typeof window !== 'undefined') {
+        for (const img of contentMeta.prefetchImages || []) {
+          new Image().src = img;
+        }
+      }
+    }
 
     return (
-      <ContentLink url={url} item={contentMeta} currentContent={content} {...linkCommonProperties}>
+      <ContentLink ref={ref} url={url} item={contentMeta} currentContent={content} {...linkCommonProperties}>
         {msg}
       </ContentLink>
     );
@@ -192,10 +191,13 @@ export default function Nav({ content }: { content: Content }) {
   return (
     <StyledNav>
       {renderLink(data.fetchContentNeighbors.last, 'last', <F defaultMessage="last" />, 'info')}
-      {renderLink(data.fetchContentNeighbors.next, 'next', <F defaultMessage="next" />, 'warning')}
-      {renderLink(data.fetchContentNeighbors.top, 'top', data.fetchContentNeighbors.top?.name, 'success')}
-      {renderLink(data.fetchContentNeighbors.prev, 'prev', <F defaultMessage="prev" />, 'error')}
+      {renderLink(data.fetchContentNeighbors.next, 'next', <F defaultMessage="next" />, 'warning', next)}
+      {renderLink(data.fetchContentNeighbors.top, 'top', data.fetchContentNeighbors.top?.name, 'success', top)}
+      {renderLink(data.fetchContentNeighbors.prev, 'prev', <F defaultMessage="prev" />, 'error', prev)}
       {renderLink(data.fetchContentNeighbors.first, 'first', <F defaultMessage="first" />, 'secondary')}
     </StyledNav>
   );
-}
+});
+Nav.displayName = 'Nav';
+
+export default Nav;
diff --git a/pages/[[...slug]].tsx b/pages/[[...slug]].tsx
index 9b2f515..d729ba5 100644
--- a/pages/[[...slug]].tsx
+++ b/pages/[[...slug]].tsx
@@ -42,7 +42,7 @@ export default function Content({ username, name, host }: { username: string; na
 
   const router = useRouter();
   const contentBase = useRef<Element>(null);
-  //const nav = useRef<Element>(null);
+  const nav = useRef<Element>(null);
   const swipeListener = useRef(null);
   const [currentCanonicalUrl, setCurrentCanonicalUrl] = useState('');
 
@@ -71,14 +71,6 @@ export default function Content({ username, name, host }: { username: string; na
     };
   }, [loading, data, router, currentCanonicalUrl]);
 
-  // useEffect(() => {
-  //   document.addEventListener('keydown', handleKeyDown);
-
-  //   return () => {
-  //     document.removeEventListener('keydown', handleKeyDown);
-  //   };
-  // });
-
   function setupSwipe() {
     if (swipeListener.current || !contentBase.current) {
       return;
@@ -87,13 +79,14 @@ export default function Content({ username, name, host }: { username: string; na
     swipeListener.current = SwipeListener(contentBase.current);
     // eslint-disable-next-line
     contentBase.current.addEventListener('swipe', (e: any) => {
-      //const directions = e.detail.directions;
-      // TODO fix
-      // if (directions.left) {
-      //   nav.current && nav.current.prev();
-      // } else if (directions.right) {
-      //   nav.current && nav.current.next();
-      // }
+      const directions = e.detail.directions;
+      if (directions.left) {
+        // @ts-ignore don't worry about it for now, we're using imperative handler.
+        nav.current?.prev();
+      } else if (directions.right) {
+        // @ts-ignore don't worry about it for now, we're using imperative handler.
+        nav.current?.next();
+      }
     });
   }
 
@@ -135,13 +128,13 @@ export default function Content({ username, name, host }: { username: string; na
     content.template === 'feed' ? (
       <Feed content={content} />
     ) : (
-      <Item content={content} contentOwner={contentOwner} comments={comments} favorites={favorites} />
+      <Item ref={contentBase} content={content} contentOwner={contentOwner} comments={comments} favorites={favorites} />
     );
 
   return (
     <ContentBase content={content} contentOwner={contentOwner} title={title} username={content.username} host={host}>
       <StyledContent>
-        <Nav content={content} />
+        <Nav ref={nav} content={content} />
         {itemEl}
       </StyledContent>
     </ContentBase>
@@ -156,13 +149,13 @@ export const getServerSideProps: GetServerSideProps = async ({ params, req, res
   const name = slug.length > 1 ? slug.slice(-1)[0] : '';
 
   /** Paths can look like:
-      /:username/search/:query
-      /:username/:section/:album/:name
-      /:username/:section/:name
-      /:username/:name
-      /:username
-      /
-   */
+    /:username/search/:query
+    /:username/:section/:album/:name
+    /:username/:section/:name
+    /:username/:name
+    /:username
+    /
+  */
 
   try {
     await client.query({
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 7bc9175..9096ab6 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -118,6 +118,12 @@ function MyApp({ Component, emotionCache = clientSideEmotionCache, pageProps }:
             <UserProvider>
               <UserContext.Provider value={{ user: currentUser }}>
                 <ErrorBoundary>
+                  <style jsx global>{`
+                    :root {
+                      --font-press-start-2p: ${pressStart2P.style.fontFamily};
+                      --font-marck-script: ${marckScript.style.fontFamily};
+                    }
+                  `}</style>
                   <div
                     className={
                       (process.env.NODE_ENV === 'development' ? 'App App-is-development' : 'App') +
diff --git a/styles/typography.ts b/styles/typography.ts
index 0314be3..e63bd03 100644
--- a/styles/typography.ts
+++ b/styles/typography.ts
@@ -2,12 +2,13 @@ import { spacing } from './constants';
 
 const SYSTEM_FONTS =
   'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
+const MONOSPACE_FONTS =
+  'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
 
 const constants = {
-  fontFamily: `${SYSTEM_FONTS}`,
+  fontFamily: MONOSPACE_FONTS,
   fontFamilyHeader: `var(--font-press-start-2p), ${SYSTEM_FONTS}`,
-  fontMonospace:
-    'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+  fontMonospace: MONOSPACE_FONTS,
 
   fontWeightRegular: 400,
   fontWeightMedium: 500,