diff --git a/components/PostContent.vue b/components/PostContent.vue
index eb0ad64d..b6b8485e 100644
--- a/components/PostContent.vue
+++ b/components/PostContent.vue
@@ -1,60 +1,107 @@
 <template>
-    <span class="content" :class="{ decorate }" v-html="content" ref="contentParent" />
+    <span>
+        <span class="content"
+            :class="{ decorate }"
+            v-html="content"
+            ref="contentParent" />
+        <review-preview v-for="(preview, key) in previews" :key="key" :top="preview.top" :left="preview.left" :slug="preview.slug" />
+    </span>
 </template>
 
 <script lang="ts">
 import Vue, { PropType } from 'vue';
+import ReviewPreview from './ReviewPreview.vue';
 
 type PartialEvent = { preventDefault: Event['preventDefault'], target: Event['target'] };
 
+const getLink = (elm: unknown) => {
+    if (!(elm instanceof Element)) return null;
+    if (elm.nodeName !== 'A') {
+        elm = elm.closest('a');
+        if (elm === null) return null;
+    }
+    return elm as HTMLAnchorElement;
+};
+
+const getUrl = (url: string) => {
+    let host: string, pathname: string;
+    if (window.URL && window.URL.prototype && ('href' in window.URL.prototype)) {
+        ({host, pathname} = new URL(url));
+    } else {
+        // No version of IE supports an instance of URL
+        const uriRegex = /^(([^:\/?#]+):)?(\/\/([^\/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/;
+        const result = url.match(uriRegex);
+        if (!result) throw Error(`${url} is not a valid URL.`);
+        host = result[4];
+        pathname = result[5];
+    }
+    const isInternal = host === window.location.host
+        || host.endsWith('.audioxide.com')
+        || url.startsWith('https://audioxide.com');
+    return { host, pathname, isInternal };
+}
+
 export default Vue.extend({
     name: 'PostContent',
+    components: { ReviewPreview },
     props: {
         content: { type: String, required: true },
         decorate: { type: Boolean, default: false },
     },
     data: () => ({
+        // TODO: Add handlers array that can be passed to removeEventListener
         handler: null as ((evt: PartialEvent) => void) | null,
+        // TODO: This might be the wrong approach as PostContent now controls display
+        previews: [] as ({ slug: string, top: number, left: number })[]
     }),
-    mounted() {
-        const parent = this.$refs.contentParent;
-        let preventDefault: PartialEvent['preventDefault'];
-        this.handler = (evt: PartialEvent) => {
-            preventDefault = preventDefault || evt.preventDefault.bind(evt);
-            const elm = evt.target;
-            if (!(elm instanceof Element)) return;
-            if (elm.nodeName !== 'A') {
-                if (parent === elm.parentNode || !this.handler) return;
-                this.handler({ preventDefault, target: elm.parentNode });
-                return;
-            }
+    methods: {
+        handleClick(evt: Event) {
+            const elm = getLink(evt.target);
+            if (elm === null) return;
             const anchorElement = elm as HTMLAnchorElement;
             const rawHref = anchorElement.getAttribute('href');
             const url = anchorElement.href;
-            let host: string, pathname: string;
-            if (window.URL && window.URL.prototype && ('href' in window.URL.prototype)) {
-                ({host, pathname} = new URL(url));
-            } else {
-                // No version of IE supports an instance of URL
-                const uriRegex = /^(([^:\/?#]+):)?(\/\/([^\/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/;
-                const result = url.match(uriRegex);
-                if (!result) return;
-                host = result[4];
-                pathname = result[5];
-            }
+            const { pathname, isInternal } = getUrl(url);
             // Ensure anything on the current or audioxide domain passes except anchor
-            const isInternal = host === window.location.host
-                || host.endsWith('.audioxide.com')
-                || url.startsWith('https://audioxide.com');
             const isAnchor = rawHref && rawHref.startsWith('#');
             if (isInternal && !isAnchor) {
                 evt.preventDefault();
                 this.$router.push(pathname);
             }
+        },
+        handleHover(evt: Event) {
+            const elm = getLink(evt.target);
+            if (elm === null) return;
+            const anchorElement = elm as HTMLAnchorElement;
+            const rawHref = anchorElement.getAttribute('href');
+            const url = anchorElement.href;
+            const { pathname, isInternal } = getUrl(url);
+            // Ensure anything on the current or audioxide domain passes except current page
+            const isReview = pathname.startsWith('/reviews');
+            const isCurrent = pathname === window.location.pathname;
+            if (!isCurrent && isInternal && isReview) {
+                const { route } = this.$router.resolve(pathname);
+                if ('slug' in route.params) {
+                    console.log('gonna show a preview for ', route.params.slug);
+                    const { slug } = route.params;
+                    const { top, left, height } = elm.getBoundingClientRect();
+                    this.previews.push({ slug, top: top + height + window.scrollY, left: left + window.scrollX });
+                }
+            }
+        }
+    },
+    mounted() {
+        const parent = this.$refs.contentParent;
+        console.log(this.$router);
+        this.handler = (evt: PartialEvent) => {
+            // TODO: Test this change works
+            // TODO: Maybe don't need the portal vue? If we do, how does it work?
+            
         };
 
         if (parent instanceof Element) {
-            parent.addEventListener('click', this.handler, false);
+            parent.addEventListener('click', this.handleClick, false);
+            parent.addEventListener('mouseover', this.handleHover, false);
         }
     },
     beforeDestroy() {
diff --git a/components/ReviewPreview.vue b/components/ReviewPreview.vue
new file mode 100644
index 00000000..0c7306ca
--- /dev/null
+++ b/components/ReviewPreview.vue
@@ -0,0 +1,81 @@
+<template>
+    <portal to="global">
+        <div class="wrapper" :style="{ top: `${top}px`, left: `${left}px`}">
+            <h3>
+                <span class="album">Debut</span>
+                <span class="artist">Bjork</span>
+            </h3>
+            <p>‘Björk creates her own identity by combining seemingly contrasting genres and forming something entirely unique. This was the first sign of innovation in her career, breaking the mould of what it means to be a new, exciting artist.’</p>
+            <p class="score">
+                <span class="given">25</span>
+                <span class="total">30</span>
+            </p>
+            <div class="img">
+                <img src="https://picsum.photos/300/300" />
+            </div>
+        </div>
+    </portal>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+    name: "ReviewPreview",
+    props: {
+        slug: String,
+        top: Number,
+        left: Number
+    },
+    created() {
+        console.log(this.slug, this.top, this.left);
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~assets/styles/variables";
+
+.wrapper {
+    position: absolute;
+    background: white;
+    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.6);
+    border-radius: 0.5em;
+    display: grid;
+    max-width: 625px;
+    overflow: hidden;
+    padding: 20px 37px;
+    font-family: $base-fontstack;
+    margin: 0;
+    flex-shrink: 1;
+    h3, .score {
+        font-family: $heading-fontstack;
+        font-weight: 500;
+        font-size: 1.4em;
+    }
+    h3 {
+        margin-bottom: $site-content__spacer--large;
+        span {
+            display: block;
+            &.album  {
+                font-style: italic;
+            }
+        }
+    }
+    p {
+        @include site-content__body-text;
+    }
+}
+
+.img {
+    flex-shrink: 0;
+    width: 300px;
+    img {
+        width: 70%;
+    }
+    &::before {
+        content: '';
+        background-image: 'https://picsum.photos/300/300';
+        filter: blur(10px) contrast(1.5);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 447512fd..98169f3f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -3,6 +3,7 @@
     <audioxide-header />
     <nuxt />
     <audioxide-footer />
+    <portal-target name="global" multiple />
   </div>
 </template>
 
diff --git a/nuxt.config.js b/nuxt.config.js
index 648dd75b..e3713453 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -129,7 +129,8 @@ export default {
    ** Plugins to load before mounting the App
    */
   plugins: [
-    { src: '~plugins/goatcounter.js', mode: 'client' }
+    { src: '~plugins/goatcounter.js', mode: 'client' },
+    { src: '~plugins/closest-polyfill.js', mode: 'client' }
   ],
   /*
    ** Nuxt.js dev-modules
@@ -145,7 +146,8 @@ export default {
   modules: [
     '@nuxtjs/pwa',
     // Doc: https://github.com/nuxt-community/dotenv-module
-    '@nuxtjs/dotenv'
+    '@nuxtjs/dotenv',
+    'portal-vue/nuxt'
   ],
   /*
    ** Build configuration
diff --git a/package.json b/package.json
index 2ddd3ad2..0f453e2b 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "fetch-ponyfill": "^7.0.0",
     "he": "^1.2.0",
     "nuxt": "^2.0.0",
+    "portal-vue": "^2.1.7",
     "sitemap-webpack-plugin": "^1.0.0",
     "wpapi": "^1.2.1"
   },
diff --git a/plugins/closest-polyfill.js b/plugins/closest-polyfill.js
new file mode 100644
index 00000000..996ab323
--- /dev/null
+++ b/plugins/closest-polyfill.js
@@ -0,0 +1,21 @@
+export default () => {
+    if (!Element.prototype.matches) {
+        Element.prototype.matches =
+        Element.prototype.msMatchesSelector ||
+        Element.prototype.webkitMatchesSelector;
+    }
+
+    if (!Element.prototype.closest) {
+        Element.prototype.closest = function(s) {
+            var el = this;
+
+            do {
+                if (Element.prototype.matches.call(el, s)) return el;
+                el = el.parentElement || el.parentNode;
+            } while (el !== null && el.nodeType === 1);
+            return null;
+        };
+    }
+
+    
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 95499dde..61ff3b79 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8297,6 +8297,11 @@ pn@^1.1.0:
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
 
+portal-vue@^2.1.7:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.7.tgz#ea08069b25b640ca08a5b86f67c612f15f4e4ad4"
+  integrity sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"