diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..b58b603
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
diff --git a/.idea/augurymetal.com.iml b/.idea/augurymetal.com.iml
new file mode 100644
index 0000000..24643cc
--- /dev/null
+++ b/.idea/augurymetal.com.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/components/Card.tsx b/components/Card.tsx
index 143681e..c2e6618 100644
--- a/components/Card.tsx
+++ b/components/Card.tsx
@@ -1,5 +1,5 @@
 import Image from './Image'
-import Link from './Link'
+import Link from 'next/link'
 
 const Card = ({ title, description, imgSrc, href }) => (
   <div className="md p-4 md:w-1/2" style={{ maxWidth: '544px' }}>
diff --git a/components/Footer.tsx b/components/Footer.tsx
index efe49a6..7aa2c80 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,4 +1,4 @@
-import Link from './Link'
+import Link from 'next/link'
 import siteMetadata from '@/data/siteMetadata'
 import SocialIcon from '@/components/social-icons'
 
diff --git a/components/LayoutWrapper.tsx b/components/LayoutWrapper.tsx
index 689f74b..7c8567d 100644
--- a/components/LayoutWrapper.tsx
+++ b/components/LayoutWrapper.tsx
@@ -1,6 +1,6 @@
 import Image from '@/components/Image'
 import headerNavLinks from '@/data/headerNavLinks'
-import Link from './Link'
+import Link from 'next/link'
 import SectionContainer from './SectionContainer'
 import Footer from './Footer'
 import MobileNav from './MobileNav'
@@ -17,8 +17,8 @@ const LayoutWrapper = ({ children }: Props) => {
         <Image
           src="/static/images/header-banner.jpg"
           alt="header banner"
-          width="1500px"
-          height="600px"
+          width="1500"
+          height="600"
         />
       </Link>
       <div className="flex h-screen flex-col justify-between">
diff --git a/components/Link.tsx b/components/Link.tsx
deleted file mode 100644
index 1c46655..0000000
--- a/components/Link.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-has-content */
-import Link from 'next/link'
-import { AnchorHTMLAttributes, DetailedHTMLProps } from 'react'
-
-const CustomLink = ({
-  href,
-  ...rest
-}: DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>) => {
-  const isInternalLink = href && href.startsWith('/')
-  const isAnchorLink = href && href.startsWith('#')
-
-  if (isInternalLink) {
-    return (
-      <Link href={href}>
-        <a {...rest} />
-      </Link>
-    )
-  }
-
-  if (isAnchorLink) {
-    return <a href={href} {...rest} />
-  }
-
-  return <a target="_blank" rel="noopener noreferrer" href={href} {...rest} />
-}
-
-export default CustomLink
diff --git a/components/MDXComponents.tsx b/components/MDXComponents.tsx
index b10d775..629712b 100644
--- a/components/MDXComponents.tsx
+++ b/components/MDXComponents.tsx
@@ -2,7 +2,6 @@
 import React, { useMemo } from 'react'
 import { ComponentMap, getMDXComponent } from 'mdx-bundler/client'
 import Image from './Image'
-import CustomLink from './Link'
 import TOCInline from './TOCInline'
 import Pre from './Pre'
 import { BlogNewsletterForm } from './NewsletterForm'
@@ -16,7 +15,6 @@ export const MDXComponents: ComponentMap = {
   Image,
   //@ts-ignore
   TOCInline,
-  a: CustomLink,
   pre: Pre,
   wrapper: Wrapper,
   //@ts-ignore
diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
index 19a9680..2496b49 100644
--- a/components/MobileNav.tsx
+++ b/components/MobileNav.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import Link from './Link'
+import Link from 'next/link'
 import headerNavLinks from '@/data/headerNavLinks'
 
 const MobileNav = () => {
@@ -21,7 +21,7 @@ const MobileNav = () => {
     <div className="sm:hidden">
       <button
         type="button"
-        className="mt-2 ml-1 mr-1 h-8 w-8 rounded py-1"
+        className="ml-1 mr-1 mt-2 h-8 w-8 rounded py-1"
         aria-label="Toggle Menu"
         onClick={onToggleNav}
       >
diff --git a/components/Pagination.tsx b/components/Pagination.tsx
index af6f99c..40fec85 100644
--- a/components/Pagination.tsx
+++ b/components/Pagination.tsx
@@ -1,4 +1,4 @@
-import Link from '@/components/Link'
+import Link from 'next/link'
 
 interface Props {
   page: string
@@ -11,7 +11,7 @@ export default function Pagination({ page, totalPages, currentPage }: Props) {
   const nextPage = currentPage + 1 <= totalPages
 
   return (
-    <div className="space-y-2 pt-6 pb-8 md:space-y-5">
+    <div className="space-y-2 pb-8 pt-6 md:space-y-5">
       <nav className="flex justify-between">
         {!prevPage && (
           <button className="cursor-auto disabled:opacity-50" disabled={!prevPage}>
diff --git a/components/PhotoGallery.tsx b/components/PhotoGallery.tsx
index 30dbee6..59e9b5f 100644
--- a/components/PhotoGallery.tsx
+++ b/components/PhotoGallery.tsx
@@ -1,42 +1,38 @@
 import { useState } from 'react'
-import Lightbox from 'react-image-lightbox'
-import 'react-image-lightbox/style.css'
+import Lightbox from 'yet-another-react-lightbox'
+import 'yet-another-react-lightbox/styles.css'
 import Image from './Image'
 
 const PhotoGallery = (props) => {
   const { title, data } = props
   const [isOpen, setIsOpen] = useState(false)
   const [photoIndex, setPhotoIndex] = useState(0)
+  const slides = data.map((d) => {
+    return { src: d }
+  })
 
   return (
     <div className="grid grid-cols-4 gap-2 p-2">
       {data.length
         ? data.map((d: string, index: number) => (
-            <Image
-              key={d}
-              alt={title}
-              onClick={() => {
-                setPhotoIndex(index)
-                setIsOpen(true)
-              }}
-              src={d}
-              className="w-1/4 cursor-pointer object-cover"
-              width="300px"
-              height="300px"
-            />
+            <div className="relative flex h-24 flex-col items-center overflow-hidden" key={d}>
+              <Image
+                alt={title}
+                onClick={() => {
+                  setPhotoIndex(index)
+                  setIsOpen(true)
+                }}
+                src={d}
+                quality={75}
+                loading="lazy"
+                fill
+                style={{ objectFit: 'cover' }}
+                className="-mt-18 w-full max-w-none cursor-pointer"
+              />
+            </div>
           ))
         : null}
-
-      {isOpen && (
-        <Lightbox
-          mainSrc={data[photoIndex]}
-          nextSrc={data[(photoIndex + 1) % data.length]}
-          prevSrc={data[(photoIndex + data.length - 1) % data.length]}
-          onCloseRequest={() => setIsOpen(false)}
-          onMovePrevRequest={() => setPhotoIndex((photoIndex + data.length - 1) % data.length)}
-          onMoveNextRequest={() => setPhotoIndex((photoIndex + 1) % data.length)}
-        />
-      )}
+      <Lightbox index={photoIndex} open={isOpen} slides={slides} close={() => setIsOpen(false)} />
     </div>
   )
 }
diff --git a/components/Tag.tsx b/components/Tag.tsx
index 6a136f9..ec60dde 100644
--- a/components/Tag.tsx
+++ b/components/Tag.tsx
@@ -7,10 +7,11 @@ interface Props {
 
 const Tag = ({ text }: Props) => {
   return (
-    <Link href={`/tags/${kebabCase(text)}`}>
-      <a className="mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
-        {text.split(' ').join('-')}
-      </a>
+    <Link
+      className="mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+      href={`/tags/${kebabCase(text)}`}
+    >
+      {text.split(' ').join('-')}
     </Link>
   )
 }
diff --git a/layouts/AuthorLayout.tsx b/layouts/AuthorLayout.tsx
index 6f42344..98e28ec 100644
--- a/layouts/AuthorLayout.tsx
+++ b/layouts/AuthorLayout.tsx
@@ -28,7 +28,7 @@ export default function AuthorLayout({ children, frontMatter }: Props) {
     <>
       <PageSEO title={`Band - ${name}`} description={`Band - ${name}`} />
       <div className="divide-y divide-gray-200 dark:divide-gray-700">
-        <div className="space-y-2 pt-6 pb-8 md:space-y-5">
+        <div className="space-y-2 pb-8 pt-6 md:space-y-5">
           <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
             Band
           </h1>
@@ -38,8 +38,8 @@ export default function AuthorLayout({ children, frontMatter }: Props) {
             <Image
               src={bannerimage}
               alt="avatar"
-              width="1250px"
-              height="579px"
+              width="1250"
+              height="579"
               className="rounded-sm"
             />
             <div className="flex space-x-3 pt-8">
@@ -54,7 +54,7 @@ export default function AuthorLayout({ children, frontMatter }: Props) {
               <SocialIcon kind="lastfm" href={lastfm} />
             </div>
           </div>
-          <div className="prose max-w-none pt-8 pb-8 dark:prose-dark xl:col-span-2">{children}</div>
+          <div className="prose max-w-none pb-8 pt-8 dark:prose-dark xl:col-span-2">{children}</div>
         </div>
       </div>
     </>
diff --git a/layouts/ListLayout.tsx b/layouts/ListLayout.tsx
index fa4562e..be00323 100644
--- a/layouts/ListLayout.tsx
+++ b/layouts/ListLayout.tsx
@@ -1,4 +1,4 @@
-import Link from '@/components/Link'
+import Link from 'next/link'
 import Tag from '@/components/Tag'
 import { ComponentProps, useState } from 'react'
 import Pagination from '@/components/Pagination'
@@ -25,7 +25,7 @@ export default function ListLayout({ posts, title, initialDisplayPosts = [], pag
   return (
     <>
       <div className="divide-y divide-gray-200 dark:divide-gray-700">
-        <div className="space-y-2 pt-6 pb-8 md:space-y-5">
+        <div className="space-y-2 pb-8 pt-6 md:space-y-5">
           <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
             {title}
           </h1>
diff --git a/layouts/PostLayout.tsx b/layouts/PostLayout.tsx
index f96f603..71a403d 100644
--- a/layouts/PostLayout.tsx
+++ b/layouts/PostLayout.tsx
@@ -1,4 +1,4 @@
-import Link from '@/components/Link'
+import Link from 'next/link'
 import PageTitle from '@/components/PageTitle'
 import SectionContainer from '@/components/SectionContainer'
 import { BlogSEO } from '@/components/SEO'
@@ -61,7 +61,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
             className="divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0"
             style={{ gridTemplateRows: 'auto 1fr' }}
           >
-            <dl className="pt-6 pb-10 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700">
+            <dl className="pb-10 pt-6 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700">
               <dt className="sr-only">Authors</dt>
               <dd>
                 <ul className="flex justify-center space-x-8 sm:space-x-12 xl:block xl:space-x-0 xl:space-y-8">
@@ -70,8 +70,8 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
                       {author.avatar && (
                         <Image
                           src={author.avatar}
-                          width="64px"
-                          height="64px"
+                          width="64"
+                          height="64"
                           alt="avatar"
                           className="h-10 w-10 rounded-full"
                         />
@@ -97,7 +97,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
               </dd>
             </dl>
             <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
-              <div className="prose max-w-none pt-10 pb-8 dark:prose-dark">
+              <div className="prose max-w-none pb-8 pt-10 dark:prose-dark">
                 {children}
                 {youtubeId ? <YoutubeVideo title={title} data={youtubeId} /> : null}
               </div>
diff --git a/layouts/PostSimple.tsx b/layouts/PostSimple.tsx
index 6e97e99..74747c9 100644
--- a/layouts/PostSimple.tsx
+++ b/layouts/PostSimple.tsx
@@ -1,4 +1,4 @@
-import Link from '@/components/Link'
+import Link from 'next/link'
 import PageTitle from '@/components/PageTitle'
 import SectionContainer from '@/components/SectionContainer'
 import { BlogSEO } from '@/components/SEO'
@@ -45,7 +45,7 @@ export default function PostLayout({ frontMatter, next, prev, children }: Props)
             style={{ gridTemplateRows: 'auto 1fr' }}
           >
             <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
-              <div className="prose max-w-none pt-10 pb-8 dark:prose-dark">{children}</div>
+              <div className="prose max-w-none pb-8 pt-10 dark:prose-dark">{children}</div>
             </div>
             <Comments frontMatter={frontMatter} />
             <footer>
diff --git a/package.json b/package.json
index 1681675..934a97a 100644
--- a/package.json
+++ b/package.json
@@ -22,12 +22,12 @@
     "gray-matter": "^4.0.2",
     "image-size": "1.0.0",
     "mdx-bundler": "^8.0.0",
-    "next": "12.1.0",
+    "next": "^13.4.6",
     "next-themes": "^0.0.14",
     "postcss": "^8.4.5",
     "preact": "^10.6.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "reading-time": "1.3.0",
     "rehype-autolink-headings": "^6.1.0",
     "rehype-citation": "^0.2.0",
@@ -41,7 +41,8 @@
     "sharp": "^0.30.5",
     "smoothscroll-polyfill": "^0.4.4",
     "tailwindcss": "^3.0.18",
-    "unist-util-visit": "^4.0.0"
+    "unist-util-visit": "^4.0.0",
+    "yet-another-react-lightbox": "^3.11.1"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "12.0.9",
@@ -53,7 +54,7 @@
     "cross-env": "^7.0.3",
     "dedent": "^0.7.0",
     "eslint": "^8.19.0",
-    "eslint-config-next": "13.1.1",
+    "eslint-config-next": "^13.4.6",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.2.1",
     "file-loader": "^6.0.0",
@@ -64,7 +65,6 @@
     "next-remote-watch": "^1.0.0",
     "prettier": "^2.4.1",
     "prettier-plugin-tailwindcss": "^0.1.4",
-    "react-image-lightbox": "^5.1.4",
     "socket.io": "^4.4.0",
     "socket.io-client": "^4.4.0",
     "typescript": "^4.8.3"
diff --git a/pages/404.tsx b/pages/404.tsx
index 05acffc..9c34cf4 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -1,9 +1,9 @@
-import Link from '@/components/Link'
+import Link from 'next/link'
 
 export default function FourZeroFour() {
   return (
     <div className="flex flex-col items-start justify-start md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6">
-      <div className="space-x-2 pt-6 pb-8 md:space-y-5">
+      <div className="space-x-2 pb-8 pt-6 md:space-y-5">
         <h1 className="text-6xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:border-r-2 md:px-6 md:text-8xl md:leading-14">
           404
         </h1>
diff --git a/pages/index.tsx b/pages/index.tsx
index 779ccc3..ea2820e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,4 @@
-import Link from '@/components/Link'
+import Link from 'next/link'
 import { PageSEO } from '@/components/SEO'
 import Tag from '@/components/Tag'
 import siteMetadata from '@/data/siteMetadata'
@@ -21,7 +21,7 @@ export default function Home({ posts }: InferGetStaticPropsType<typeof getStatic
     <>
       <PageSEO title={siteMetadata.title} description={siteMetadata.description} />
       <div className="divide-y divide-gray-200 dark:divide-gray-700">
-        <div className="space-y-2 pt-6 pb-8 md:space-y-5">
+        <div className="space-y-2 pb-8 pt-6 md:space-y-5">
           <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
             Latest
           </h1>
diff --git a/pages/tags.tsx b/pages/tags.tsx
index 9f7c9d2..a1e225c 100644
--- a/pages/tags.tsx
+++ b/pages/tags.tsx
@@ -1,4 +1,4 @@
-import Link from '@/components/Link'
+import Link from 'next/link'
 import { PageSEO } from '@/components/SEO'
 import Tag from '@/components/Tag'
 import siteMetadata from '@/data/siteMetadata'
@@ -18,7 +18,7 @@ export default function Tags({ tags }: InferGetStaticPropsType<typeof getStaticP
     <>
       <PageSEO title={`Tags - ${siteMetadata.author}`} description="Things I blog about" />
       <div className="flex flex-col items-start justify-start divide-y divide-gray-200 dark:divide-gray-700 md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6 md:divide-y-0">
-        <div className="space-x-2 pt-6 pb-8 md:space-y-5">
+        <div className="space-x-2 pb-8 pt-6 md:space-y-5">
           <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:border-r-2 md:px-6 md:text-6xl md:leading-14">
             Tags
           </h1>
@@ -27,7 +27,7 @@ export default function Tags({ tags }: InferGetStaticPropsType<typeof getStaticP
           {Object.keys(tags).length === 0 && 'No tags found.'}
           {sortedTags.map((t) => {
             return (
-              <div key={t} className="mt-2 mb-2 mr-5">
+              <div key={t} className="mb-2 mr-5 mt-2">
                 <Tag text={t} />
                 <Link
                   href={`/tags/${kebabCase(t)}`}
diff --git a/pages/tour-archive.tsx b/pages/tour-archive.tsx
index fd06aff..70d1de5 100644
--- a/pages/tour-archive.tsx
+++ b/pages/tour-archive.tsx
@@ -1,9 +1,9 @@
-import Link from '@/components/Link'
+import Link from 'next/link'
 
 export default function TourArchive() {
   return (
     <div className="divide-y divide-gray-200 dark:divide-gray-700">
-      <div className="space-y-2 pt-6 pb-8 md:space-y-5">
+      <div className="space-y-2 pb-8 pt-6 md:space-y-5">
         <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
           Tour archive
         </h1>
diff --git a/pages/tour.tsx b/pages/tour.tsx
index 96bac05..5e29b0b 100644
--- a/pages/tour.tsx
+++ b/pages/tour.tsx
@@ -1,7 +1,7 @@
 import siteMetadata from '@/data/siteMetadata'
 import tourData from '@/data/tourData'
 import TourDate from '@/components/TourDate'
-import Link from '@/components/Link'
+import Link from 'next/link'
 import { PageSEO } from '@/components/SEO'
 
 export default function Tour() {
@@ -9,7 +9,7 @@ export default function Tour() {
     <>
       <PageSEO title={`Tour - ${siteMetadata.author}`} description={siteMetadata.description} />
       <div className="divide-y divide-gray-200 dark:divide-gray-700">
-        <div className="space-y-2 pt-6 pb-8 md:space-y-5">
+        <div className="space-y-2 pb-8 pt-6 md:space-y-5">
           <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
             Tour
           </h1>
diff --git a/tailwind.config.js b/tailwind.config.js
index f879560..06310a6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -32,10 +32,7 @@ module.exports = {
         sans: ['InterVariable', ...defaultTheme.fontFamily.sans],
       },
       colors: {
-        primary: colors.blue,
-        //@ts-ignore
-        gray: colors.neutral, // TODO: Remove ts-ignore after tw types gets updated to v3
-        blue: {
+        primary: {
           DEFAULT: '#7AB5C4',
           50: '#F9FCFC',
           100: '#EBF4F6',
@@ -48,6 +45,8 @@ module.exports = {
           800: '#2E5C68',
           900: '#1D3A41',
         },
+        //@ts-ignore
+        gray: colors.neutral, // TODO: Remove ts-ignore after tw types gets updated to v3
       },
       typography: (theme) => ({
         DEFAULT: {
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000..ad18569
Binary files /dev/null and b/yarn.lock differ