diff --git a/app/Http/Controllers/Admin/RolesController.php b/app/Http/Controllers/Api/Application/RoleController.php
similarity index 92%
rename from app/Http/Controllers/Admin/RolesController.php
rename to app/Http/Controllers/Api/Application/RoleController.php
index 085db3d1a..f74f35300 100644
--- a/app/Http/Controllers/Admin/RolesController.php
+++ b/app/Http/Controllers/Api/Application/RoleController.php
@@ -1,13 +1,12 @@
 <?php
 
-namespace Pterodactyl\Http\Controllers\Admin;
+namespace Pterodactyl\Http\Controllers\Api\Application;
 
 use Illuminate\Http\JsonResponse;
-use Pterodactyl\Http\Controllers\Controller;
 use Pterodactyl\Http\Requests\Admin\RoleFormRequest;
 use Pterodactyl\Repositories\Eloquent\AdminRolesRepository;
 
-class RolesController extends Controller
+class RoleController extends ApplicationApiController
 {
     /**
      * @var \Pterodactyl\Repositories\Eloquent\AdminRolesRepository
@@ -21,6 +20,8 @@ class RolesController extends Controller
      */
     public function __construct(AdminRolesRepository $repository)
     {
+        parent::__construct();
+
         $this->repository = $repository;
     }
 
diff --git a/resources/scripts/api/admin/roles/getRoles.ts b/resources/scripts/api/admin/roles/getRoles.ts
index cd2e51901..4a660927c 100644
--- a/resources/scripts/api/admin/roles/getRoles.ts
+++ b/resources/scripts/api/admin/roles/getRoles.ts
@@ -8,7 +8,7 @@ export interface Role {
 
 export default (): Promise<Role[]> => {
     return new Promise((resolve, reject) => {
-        http.get('/admin/roles')
+        http.get('/api/application/roles')
             .then(({ data }) => resolve(data || []))
             .catch(reject);
     });
diff --git a/resources/scripts/components/App.tsx b/resources/scripts/components/App.tsx
index daaec5c94..c951bbc2f 100644
--- a/resources/scripts/components/App.tsx
+++ b/resources/scripts/components/App.tsx
@@ -1,19 +1,19 @@
-// import React, { useEffect } from 'react';
-// import ReactGA from 'react-ga';
-import React, { Suspense, lazy } from 'react';
+import React, { lazy, useEffect, Suspense } from 'react';
+import ReactGA from 'react-ga';
 import { hot } from 'react-hot-loader/root';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { Route, Router, Switch, useLocation } from 'react-router-dom';
 import { StoreProvider } from 'easy-peasy';
 import { store } from '@/state';
 import DashboardRouter from '@/routers/DashboardRouter';
 import ServerRouter from '@/routers/ServerRouter';
 import AuthenticationRouter from '@/routers/AuthenticationRouter';
-import { Provider } from 'react-redux';
 import { SiteSettings } from '@/state/settings';
 import ProgressBar from '@/components/elements/ProgressBar';
 import NotFound from '@/components/screens/NotFound';
-import tw from 'twin.macro';
+import tw, { GlobalStyles as TailwindGlobalStyles } from 'twin.macro';
 import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
+import { createBrowserHistory } from 'history';
+import { setupInterceptors } from '@/api/interceptors';
 
 const ChunkedAdminRouter = lazy(() => import(/* webpackChunkName: "admin" */'@/routers/AdminRouter'));
 
@@ -33,6 +33,20 @@ interface ExtendedWindow extends Window {
     };
 }
 
+const history = createBrowserHistory({ basename: '/' });
+
+setupInterceptors(history);
+
+const Pageview = () => {
+    const { pathname } = useLocation();
+
+    useEffect(() => {
+        ReactGA.pageview(pathname);
+    }, [ pathname ]);
+
+    return null;
+};
+
 const App = () => {
     const { PterodactylUser, SiteConfiguration } = (window as ExtendedWindow);
     if (PterodactylUser && !store.getState().user.data) {
@@ -53,31 +67,32 @@ const App = () => {
     }
 
     useEffect(() => {
-        ReactGA.initialize(SiteConfiguration!.analytics);
-        ReactGA.pageview(location.pathname);
+        if (SiteConfiguration?.analytics) {
+            ReactGA.initialize(SiteConfiguration!.analytics);
+        }
     }, []);
 
     return (
         <>
             <GlobalStylesheet/>
+            <TailwindGlobalStyles/>
             <StoreProvider store={store}>
-                <Provider store={store}>
-                    <ProgressBar/>
+                <ProgressBar/>
 
-                    <div css={tw`mx-auto w-auto`}>
-                        <BrowserRouter basename={'/'} key={'root-router'}>
-                            <Suspense fallback={<div>Loading...</div>}>
-                                <Switch>
-                                    <Route path="/server/:id" component={ServerRouter}/>
-                                    <Route path="/auth" component={AuthenticationRouter}/>
-                                    <Route path="/admin" component={ChunkedAdminRouter}/>
-                                    <Route path="/" component={DashboardRouter}/>
-                                    <Route path={'*'} component={NotFound}/>
-                                </Switch>
-                            </Suspense>
-                        </BrowserRouter>
-                    </div>
-                </Provider>
+                <div css={tw`mx-auto w-auto`}>
+                    <Router history={history}>
+                        <Suspense fallback={<div>Loading...</div>}>
+                            {SiteConfiguration?.analytics && <Pageview/>}
+                            <Switch>
+                                <Route path="/server/:id" component={ServerRouter}/>
+                                <Route path="/auth" component={AuthenticationRouter}/>
+                                <Route path="/admin" component={ChunkedAdminRouter}/>
+                                <Route path="/" component={DashboardRouter}/>
+                                <Route path={'*'} component={NotFound}/>
+                            </Switch>
+                        </Suspense>
+                    </Router>
+                </div>
             </StoreProvider>
         </>
     );
diff --git a/resources/scripts/components/admin/roles/RolesContainer.tsx b/resources/scripts/components/admin/roles/RolesContainer.tsx
index e5832d158..5ddf1fd28 100644
--- a/resources/scripts/components/admin/roles/RolesContainer.tsx
+++ b/resources/scripts/components/admin/roles/RolesContainer.tsx
@@ -61,15 +61,15 @@ export default () => {
                                     <thead>
                                         <tr>
                                             <th css={tw`py-4 px-4 text-left pl-8`}>
-                                                <span css={tw`font-medium text-base text-neutral-300 text-left whitespace-no-wrap mr-2`}>ID</span>
+                                                <span css={tw`font-medium text-base text-neutral-300 text-left whitespace-nowrap mr-2`}>ID</span>
                                             </th>
 
                                             <th css={tw`py-4 px-4 text-left`}>
-                                                <span css={tw`font-medium text-base text-neutral-300 text-left whitespace-no-wrap mr-2`}>Name</span>
+                                                <span css={tw`font-medium text-base text-neutral-300 text-left whitespace-nowrap mr-2`}>Name</span>
                                             </th>
 
                                             <th css={tw`py-4 px-4 text-left pr-8`}>
-                                                <span css={tw`font-medium text-base text-neutral-300 text-left whitespace-no-wrap mr-2`}>Description</span>
+                                                <span css={tw`font-medium text-base text-neutral-300 text-left whitespace-nowrap mr-2`}>Description</span>
                                             </th>
                                         </tr>
                                     </thead>
@@ -78,9 +78,9 @@ export default () => {
                                         {
                                             roles.map(role => (
                                                 <tr key={role.id} css={tw`h-12 cursor-pointer`}>
-                                                    <td css={tw`py-3 px-4 text-neutral-200 text-left whitespace-no-wrap pl-8`}>{role.id}</td>
-                                                    <td css={tw`py-3 px-4 text-neutral-200 text-left whitespace-no-wrap`}>{role.name}</td>
-                                                    <td css={tw`py-3 px-4 text-neutral-200 text-left whitespace-no-wrap pr-8`}>{role.description}</td>
+                                                    <td css={tw`py-3 px-4 text-neutral-200 text-left whitespace-nowrap pl-8`}>{role.id}</td>
+                                                    <td css={tw`py-3 px-4 text-neutral-200 text-left whitespace-nowrap`}>{role.name}</td>
+                                                    <td css={tw`py-3 px-4 text-neutral-200 text-left whitespace-nowrap pr-8`}>{role.description}</td>
                                                 </tr>
                                             ))
                                         }
diff --git a/resources/scripts/routers/AdminRouter.tsx b/resources/scripts/routers/AdminRouter.tsx
index be50a11a7..593d7ef1f 100644
--- a/resources/scripts/routers/AdminRouter.tsx
+++ b/resources/scripts/routers/AdminRouter.tsx
@@ -30,7 +30,7 @@ const Sidebar = styled.div<{ collapsed?: boolean }>`
 
         & > span {
             height: 18px;
-            ${tw`font-header font-medium text-xs text-neutral-300 whitespace-no-wrap uppercase ml-4 mb-1 select-none`};
+            ${tw`font-header font-medium text-xs text-neutral-300 whitespace-nowrap uppercase ml-4 mb-1 select-none`};
             ${props => props.collapsed && tw`opacity-0`};
 
             &:not(:first-of-type) {
@@ -47,7 +47,7 @@ const Sidebar = styled.div<{ collapsed?: boolean }>`
             }
 
             & > span {
-                ${props => props.collapsed ? tw`hidden` : tw`font-header font-medium text-lg whitespace-no-wrap leading-none ml-3`};
+                ${props => props.collapsed ? tw`hidden` : tw`font-header font-medium text-lg whitespace-nowrap leading-none ml-3`};
             }
 
             &:hover {
@@ -83,7 +83,7 @@ export default ({ location, match }: RouteComponentProps) => {
             <Sidebar collapsed={collapsed}>
                 <div className={'header'} onClick={ () => { setCollapsed(!collapsed); } }>
                     { !collapsed ?
-                        <h1 css={tw`text-2xl text-neutral-50 whitespace-no-wrap`}>{name}</h1>
+                        <h1 css={tw`text-2xl text-neutral-50 whitespace-nowrap`}>{name}</h1>
                         :
                         <img src={'/favicons/android-icon-48x48.png'} alt={'Pterodactyl Icon'} />
                     }
@@ -152,8 +152,8 @@ export default ({ location, match }: RouteComponentProps) => {
                     <img src={'https://www.gravatar.com/avatar/78a6a270ec41715a8ae96c02b8961f9e?s=64'} alt="Profile Picture" css={tw`h-10 w-10 rounded-full select-none`} />
 
                     <div css={tw`flex flex-col ml-4`}>
-                        <span css={tw`font-header font-medium text-sm text-neutral-50 whitespace-no-wrap leading-tight select-none`}>Matthew Penner</span>
-                        <span css={tw`font-header font-normal text-xs text-neutral-300 whitespace-no-wrap leading-tight select-none`}>Super Administrator</span>
+                        <span css={tw`font-header font-medium text-sm text-neutral-50 whitespace-nowrap leading-tight select-none`}>Matthew Penner</span>
+                        <span css={tw`font-header font-normal text-xs text-neutral-300 whitespace-nowrap leading-tight select-none`}>Super Administrator</span>
                     </div>
 
                     <NavLink to={'/auth/logout'} css={tw`h-8 w-8 flex items-center justify-center text-neutral-300 hover:text-neutral-50 ml-auto transition-all duration-100`}>
diff --git a/resources/scripts/routers/AuthenticationRouter.tsx b/resources/scripts/routers/AuthenticationRouter.tsx
index 57d1422ca..a7c687eef 100644
--- a/resources/scripts/routers/AuthenticationRouter.tsx
+++ b/resources/scripts/routers/AuthenticationRouter.tsx
@@ -1,5 +1,4 @@
-import React, { useEffect } from 'react';
-import ReactGA from 'react-ga';
+import React from 'react';
 import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 import LoginContainer from '@/components/auth/LoginContainer';
 import ForgotPasswordContainer from '@/components/auth/ForgotPasswordContainer';
@@ -7,23 +6,17 @@ import ResetPasswordContainer from '@/components/auth/ResetPasswordContainer';
 import LoginCheckpointContainer from '@/components/auth/LoginCheckpointContainer';
 import NotFound from '@/components/screens/NotFound';
 
-export default ({ location, history, match }: RouteComponentProps) => {
-    useEffect(() => {
-        ReactGA.pageview(location.pathname);
-    }, [ location.pathname ]);
-
-    return (
-        <div className={'pt-8 xl:pt-32'}>
-            <Switch location={location}>
-                <Route path={`${match.path}/login`} component={LoginContainer} exact/>
-                <Route path={`${match.path}/login/checkpoint`} component={LoginCheckpointContainer}/>
-                <Route path={`${match.path}/password`} component={ForgotPasswordContainer} exact/>
-                <Route path={`${match.path}/password/reset/:token`} component={ResetPasswordContainer}/>
-                <Route path={`${match.path}/checkpoint`} />
-                <Route path={'*'}>
-                    <NotFound onBack={() => history.push('/auth/login')} />
-                </Route>
-            </Switch>
-        </div>
-    );
-};
+export default ({ location, history, match }: RouteComponentProps) => (
+    <div className={'pt-8 xl:pt-32'}>
+        <Switch location={location}>
+            <Route path={`${match.path}/login`} component={LoginContainer} exact/>
+            <Route path={`${match.path}/login/checkpoint`} component={LoginCheckpointContainer}/>
+            <Route path={`${match.path}/password`} component={ForgotPasswordContainer} exact/>
+            <Route path={`${match.path}/password/reset/:token`} component={ResetPasswordContainer}/>
+            <Route path={`${match.path}/checkpoint`}/>
+            <Route path={'*'}>
+                <NotFound onBack={() => history.push('/auth/login')}/>
+            </Route>
+        </Switch>
+    </div>
+);
diff --git a/resources/scripts/routers/DashboardRouter.tsx b/resources/scripts/routers/DashboardRouter.tsx
index 7e57a10ca..1e5963996 100644
--- a/resources/scripts/routers/DashboardRouter.tsx
+++ b/resources/scripts/routers/DashboardRouter.tsx
@@ -1,5 +1,4 @@
-import React, { useEffect } from 'react';
-import ReactGA from 'react-ga';
+import React from 'react';
 import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer';
 import NavigationBar from '@/components/NavigationBar';
@@ -9,30 +8,24 @@ import NotFound from '@/components/screens/NotFound';
 import TransitionRouter from '@/TransitionRouter';
 import SubNavigation from '@/components/elements/SubNavigation';
 
-export default ({ location }: RouteComponentProps) => {
-    useEffect(() => {
-        ReactGA.pageview(location.pathname);
-    }, [ location.pathname ]);
-
-    return (
-        <>
-            <NavigationBar/>
-            {location.pathname.startsWith('/account') &&
-                <SubNavigation>
-                    <div>
-                        <NavLink to={'/account'} exact>Settings</NavLink>
-                        <NavLink to={'/account/api'}>API Credentials</NavLink>
-                    </div>
-                </SubNavigation>
-            }
-            <TransitionRouter>
-                <Switch location={location}>
-                    <Route path={'/'} component={DashboardContainer} exact />
-                    <Route path={'/account'} component={AccountOverviewContainer} exact/>
-                    <Route path={'/account/api'} component={AccountApiContainer} exact/>
-                    <Route path={'*'} component={NotFound} />
-                </Switch>
-            </TransitionRouter>
-        </>
-    );
-};
+export default ({ location }: RouteComponentProps) => (
+    <>
+        <NavigationBar/>
+        {location.pathname.startsWith('/account') &&
+        <SubNavigation>
+            <div>
+                <NavLink to={'/account'} exact>Settings</NavLink>
+                <NavLink to={'/account/api'}>API Credentials</NavLink>
+            </div>
+        </SubNavigation>
+        }
+        <TransitionRouter>
+            <Switch location={location}>
+                <Route path={'/'} component={DashboardContainer} exact/>
+                <Route path={'/account'} component={AccountOverviewContainer} exact/>
+                <Route path={'/account/api'} component={AccountApiContainer} exact/>
+                <Route path={'*'} component={NotFound}/>
+            </Switch>
+        </TransitionRouter>
+    </>
+);
diff --git a/routes/api-application.php b/routes/api-application.php
index e32461717..d6eb1d83c 100644
--- a/routes/api-application.php
+++ b/routes/api-application.php
@@ -120,3 +120,20 @@ Route::group(['prefix' => '/nests'], function () {
         Route::get('/{egg}', 'Nests\EggController@view')->name('api.application.nests.eggs.view');
     });
 });
+
+/*
+|--------------------------------------------------------------------------
+| Role Controller Routes
+|--------------------------------------------------------------------------
+|
+| Endpoint: /api/application/roles
+|
+*/
+
+Route::group(['prefix' => '/roles'], function () {
+    Route::get('/', 'RoleController@index')->name('api.application.roles');
+
+    Route::post('/', 'RoleController@create');
+
+    Route::delete('/{role}', 'RoleController@delete');
+});