[1799] Page rendering is off via the router

I'm having this strange issue to where when I go to a certain page via a router-link The page doesn't render correctly (css? seems off), but if i hit refresh the page then renders fine, I have no errors or warnings in the console or chromes web inspector, here is an example:

Here is what it looks like normally, if i go to the URL directly or hit refresh:

And here is what happens when I visit the page via router-link

The oddness is not random, its exactly like this every time, and its not just sometimes when its from a router-link, its consistent

Some extra info about my setup:

I've modified layouts/default.vue to supply my header and footers, ex:

<template lang="pug">
  #app
    Top
    nuxt
    Bottom
    Login
</template>

<script>
import Top from '~/components/layout/Top.vue'
import Bottom from '~/components/layout/Bottom.vue'
import Login from '~/components/Login.vue'
export default {
  components: { Top, Bottom, Login },
}
</script>

<style lang="stylus">
@import '../assets/stylus/main'
</style>