diff --git a/resources/scripts/TransitionRouter.tsx b/resources/scripts/TransitionRouter.tsx
index dc0ec7a95..cf738e17a 100644
--- a/resources/scripts/TransitionRouter.tsx
+++ b/resources/scripts/TransitionRouter.tsx
@@ -18,15 +18,17 @@ export default ({ basename, children }: Props) => (
                             <Switch location={location}>
                                 {children}
                             </Switch>
-                            <p className={'text-right text-neutral-500 text-xs'}>
-                                &copy; 2015 - 2019&nbsp;
-                                <a
-                                    href={'https://pterodactyl.io'}
-                                    className={'no-underline text-neutral-500 hover:text-neutral-300'}
-                                >
-                                    Pterodactyl Software
-                                </a>
-                            </p>
+                            <div className={'mx-auto w-full'} style={{ maxWidth: '1200px' }}>
+                                <p className={'text-right text-neutral-500 text-xs'}>
+                                    &copy; 2015 - 2019&nbsp;
+                                    <a
+                                        href={'https://pterodactyl.io'}
+                                        className={'no-underline text-neutral-500 hover:text-neutral-300'}
+                                    >
+                                        Pterodactyl Software
+                                    </a>
+                                </p>
+                            </div>
                         </section>
                     </CSSTransition>
                 </TransitionGroup>
diff --git a/resources/scripts/components/App.tsx b/resources/scripts/components/App.tsx
index 3db5c0886..eab411e95 100644
--- a/resources/scripts/components/App.tsx
+++ b/resources/scripts/components/App.tsx
@@ -39,7 +39,7 @@ const App = () => {
     return (
         <StoreProvider store={store}>
             <Router basename={'/'}>
-                <div className={'mx-auto w-auto'} style={{ maxWidth: '1000px' }}>
+                <div className={'mx-auto w-auto'}>
                     <TransitionRouter basename={'/'}>
                         <Route exact path="/" component={ServerOverviewContainer}/>
                         <Route path="/auth" component={AuthenticationRouter}/>
diff --git a/resources/scripts/components/account/DesignElementsContainer.tsx b/resources/scripts/components/account/DesignElementsContainer.tsx
index ffa9c0ac7..fc4ad61f8 100644
--- a/resources/scripts/components/account/DesignElementsContainer.tsx
+++ b/resources/scripts/components/account/DesignElementsContainer.tsx
@@ -5,65 +5,71 @@ import ContentBox from '@/components/elements/ContentBox';
 export default class DesignElementsContainer extends React.PureComponent {
     render () {
         return (
-            <div className={'my-10'}>
-                <div className={'flex'}>
-                    <ContentBox className={'flex-1 mr-4'} title={'A Special Announcement'} borderColor={'border-primary-400'}>
-                        <p className={'text-neutral-200 text-sm'}>
-                            Your demands have been received: Dark Mode will be default in Pterodactyl 0.8!
-                        </p>
-                        <p><Link to={'/'}>Back</Link></p>
-                    </ContentBox>
-                    <div className={'ml-4 flex-1'}>
-                        <h2 className={'text-neutral-300 mb-2 px-4'}>Form Elements</h2>
-                        <div className={'bg-neutral-700 p-4 rounded shadow-lg border-t-4 border-primary-400'}>
-                            <label className={'uppercase text-neutral-200'}>Email</label>
-                            <input type={'text'} className={'input-dark'}/>
-                            <p className={'input-help'}>
-                                This is some descriptive helper text to explain how things work.
+            <React.Fragment>
+                <div className={'my-10'}>
+                    <div className={'flex'}>
+                        <ContentBox
+                            className={'flex-1 mr-4'}
+                            title={'A Special Announcement'}
+                            borderColor={'border-primary-400'}
+                        >
+                            <p className={'text-neutral-200 text-sm'}>
+                                Your demands have been received: Dark Mode will be default in Pterodactyl 0.8!
                             </p>
-                            <div className={'mt-6'}/>
-                            <label className={'uppercase text-neutral-200'}>Username</label>
-                            <input type={'text'} className={'input-dark error'}/>
-                            <p className={'input-help'}>
-                                This field has an error.
-                            </p>
-                            <div className={'mt-6'}/>
-                            <label className={'uppercase text-neutral-200'}>Disabled Field</label>
-                            <input type={'text'} className={'input-dark'} disabled={true}/>
-                            <div className={'mt-6'}/>
-                            <label className={'uppercase text-neutral-200'}>Textarea</label>
-                            <textarea className={'input-dark h-32'}></textarea>
-                            <div className={'mt-6'}/>
-                            <button className={'btn btn-primary btn-sm'}>
-                                Blue
-                            </button>
-                            <button className={'btn btn-grey btn-sm ml-2'}>
-                                Grey
-                            </button>
-                            <button className={'btn btn-green btn-sm ml-2'}>
-                                Green
-                            </button>
-                            <button className={'btn btn-red btn-sm ml-2'}>
-                                Red
-                            </button>
-                            <div className={'mt-6'}/>
-                            <button className={'btn btn-secondary btn-sm'}>
-                                Secondary
-                            </button>
-                            <button className={'btn btn-secondary btn-red btn-sm ml-2'}>
-                                Secondary Danger
-                            </button>
-                            <div className={'mt-6'}/>
-                            <button className={'btn btn-primary btn-lg'}>
-                                Large
-                            </button>
-                            <button className={'btn btn-primary btn-xs ml-2'}>
-                                Tiny
-                            </button>
+                            <p><Link to={'/'}>Back</Link></p>
+                        </ContentBox>
+                        <div className={'ml-4 flex-1'}>
+                            <h2 className={'text-neutral-300 mb-2 px-4'}>Form Elements</h2>
+                            <div className={'bg-neutral-700 p-4 rounded shadow-lg border-t-4 border-primary-400'}>
+                                <label className={'uppercase text-neutral-200'}>Email</label>
+                                <input type={'text'} className={'input-dark'}/>
+                                <p className={'input-help'}>
+                                    This is some descriptive helper text to explain how things work.
+                                </p>
+                                <div className={'mt-6'}/>
+                                <label className={'uppercase text-neutral-200'}>Username</label>
+                                <input type={'text'} className={'input-dark error'}/>
+                                <p className={'input-help'}>
+                                    This field has an error.
+                                </p>
+                                <div className={'mt-6'}/>
+                                <label className={'uppercase text-neutral-200'}>Disabled Field</label>
+                                <input type={'text'} className={'input-dark'} disabled={true}/>
+                                <div className={'mt-6'}/>
+                                <label className={'uppercase text-neutral-200'}>Textarea</label>
+                                <textarea className={'input-dark h-32'}></textarea>
+                                <div className={'mt-6'}/>
+                                <button className={'btn btn-primary btn-sm'}>
+                                    Blue
+                                </button>
+                                <button className={'btn btn-grey btn-sm ml-2'}>
+                                    Grey
+                                </button>
+                                <button className={'btn btn-green btn-sm ml-2'}>
+                                    Green
+                                </button>
+                                <button className={'btn btn-red btn-sm ml-2'}>
+                                    Red
+                                </button>
+                                <div className={'mt-6'}/>
+                                <button className={'btn btn-secondary btn-sm'}>
+                                    Secondary
+                                </button>
+                                <button className={'btn btn-secondary btn-red btn-sm ml-2'}>
+                                    Secondary Danger
+                                </button>
+                                <div className={'mt-6'}/>
+                                <button className={'btn btn-primary btn-lg'}>
+                                    Large
+                                </button>
+                                <button className={'btn btn-primary btn-xs ml-2'}>
+                                    Tiny
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
+            </React.Fragment>
         );
     }
 }
diff --git a/resources/scripts/routers/AccountRouter.tsx b/resources/scripts/routers/AccountRouter.tsx
index d6ecd04c3..7631d566f 100644
--- a/resources/scripts/routers/AccountRouter.tsx
+++ b/resources/scripts/routers/AccountRouter.tsx
@@ -1,11 +1,49 @@
 import * as React from 'react';
-import { Route, RouteComponentProps } from 'react-router-dom';
+import { Link, NavLink, Route, RouteComponentProps } from 'react-router-dom';
 import DesignElementsContainer from '@/components/account/DesignElementsContainer';
 import AccountOverviewContainer from '@/components/account/AccountOverviewContainer';
 
 export default ({ match }: RouteComponentProps) => (
     <div>
-        <Route path={`${match.path}/`} component={AccountOverviewContainer} exact/>
-        <Route path={`${match.path}/design`} component={DesignElementsContainer} exact/>
+        <div className={'w-full bg-neutral-900 shadow-md'}>
+            <div className={'mx-auto w-full flex items-center'} style={{ maxWidth: '1200px', height: '3.5rem' }}>
+                <div className={'flex-1'}>
+                    <Link
+                        to={'/'}
+                        className={'text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100'}
+                        style={{
+                            transition: 'color 150ms linear',
+                        }}
+                    >
+                        Pterodactyl
+                    </Link>
+                </div>
+                <div className={'flex h-full items-center justify-center'}>
+                    <NavLink
+                        to={'/'}
+                        exact={true}
+                        className={'flex items-center h-full no-underline text-neutral-300 hover:text-neutral-100 hover:bg-black px-4'}
+                        style={{
+                            transition: 'background-color 150ms linear, color 150ms linear',
+                        }}
+                    >
+                        Dashboard
+                    </NavLink>
+                    <NavLink
+                        to={'/account'}
+                        className={'flex items-center h-full no-underline text-neutral-300 hover:text-neutral-100 hover:bg-black px-4'}
+                        style={{
+                            transition: 'background-color 150ms linear, color 150ms linear',
+                        }}
+                    >
+                        Account
+                    </NavLink>
+                </div>
+            </div>
+        </div>
+        <div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
+            <Route path={`${match.path}/`} component={AccountOverviewContainer} exact/>
+            <Route path={`${match.path}/design`} component={DesignElementsContainer} exact/>
+        </div>
     </div>
 );
diff --git a/tailwind.js b/tailwind.js
index 1ca42c0cb..ec7f6c291 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -44,7 +44,7 @@ View the full documentation at https://tailwindcss.com.
 let colors = {
     'transparent': 'transparent',
 
-    'black': '#1F2933',
+    'black': 'hsl(210, 27%, 10%)',
     'white': '#ffffff',
     'basically-white': '#fafafb',
 
@@ -196,6 +196,12 @@ module.exports = {
             'system-ui',
             'sans-serif',
         ],
+        'header': [
+            '"IBM Plex Sans"',
+            '"Roboto"',
+            'system-ui',
+            'sans-serif',
+        ],
         'serif': [
             'Constantia',
             '"Lucida Bright"',