diff --git a/resources/scripts/api/swr/getServerBackups.ts b/resources/scripts/api/swr/getServerBackups.ts
index d7487fde3..0c38cd278 100644
--- a/resources/scripts/api/swr/getServerBackups.ts
+++ b/resources/scripts/api/swr/getServerBackups.ts
@@ -2,10 +2,10 @@ import useSWR from 'swr';
 import http, { getPaginationSet, PaginatedResult } from '@/api/http';
 import { ServerBackup } from '@/api/server/types';
 import { rawDataToServerBackup } from '@/api/transformers';
-import useServer from '@/plugins/useServer';
+import { ServerContext } from '@/state/server';
 
 export default (page?: number | string) => {
-    const { uuid } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
 
     return useSWR<PaginatedResult<ServerBackup>>([ 'server:backups', uuid, page ], async () => {
         const { data } = await http.get(`/api/client/servers/${uuid}/backups`, { params: { page } });
diff --git a/resources/scripts/components/NavigationBar.tsx b/resources/scripts/components/NavigationBar.tsx
index 206e035c3..4f122a82d 100644
--- a/resources/scripts/components/NavigationBar.tsx
+++ b/resources/scripts/components/NavigationBar.tsx
@@ -43,8 +43,8 @@ const RightNavigation = styled.div`
 `;
 
 export default () => {
-    const user = useStoreState((state: ApplicationStore) => state.user.data!);
     const name = useStoreState((state: ApplicationStore) => state.settings.data!.name);
+    const rootAdmin = useStoreState((state: ApplicationStore) => state.user.data!.rootAdmin);
 
     return (
         <Navigation>
@@ -62,7 +62,7 @@ export default () => {
                     <NavLink to={'/account'}>
                         <FontAwesomeIcon icon={faUserCircle}/>
                     </NavLink>
-                    {user.rootAdmin &&
+                    {rootAdmin &&
                     <a href={'/admin'} target={'_blank'} rel={'noreferrer'}>
                         <FontAwesomeIcon icon={faCogs}/>
                     </a>
diff --git a/resources/scripts/components/server/InstallListener.tsx b/resources/scripts/components/server/InstallListener.tsx
index 8bc85778a..782b9da3f 100644
--- a/resources/scripts/components/server/InstallListener.tsx
+++ b/resources/scripts/components/server/InstallListener.tsx
@@ -1,23 +1,22 @@
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
 import { ServerContext } from '@/state/server';
-import useServer from '@/plugins/useServer';
 
 const InstallListener = () => {
-    const server = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const getServer = ServerContext.useStoreActions(actions => actions.server.getServer);
-    const setServer = ServerContext.useStoreActions(actions => actions.server.setServer);
+    const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
 
     // Listen for the installation completion event and then fire off a request to fetch the updated
     // server information. This allows the server to automatically become available to the user if they
     // just sit on the page.
     useWebsocketEvent('install completed', () => {
-        getServer(server.uuid).catch(error => console.error(error));
+        getServer(uuid).catch(error => console.error(error));
     });
 
     // When we see the install started event immediately update the state to indicate such so that the
     // screens automatically update.
     useWebsocketEvent('install started', () => {
-        setServer({ ...server, isInstalling: true });
+        setServerFromState(s => ({ ...s, isInstalling: true }));
     });
 
     return null;
diff --git a/resources/scripts/components/server/ServerConsole.tsx b/resources/scripts/components/server/ServerConsole.tsx
index 74ba4d750..253cb05e2 100644
--- a/resources/scripts/components/server/ServerConsole.tsx
+++ b/resources/scripts/components/server/ServerConsole.tsx
@@ -1,5 +1,4 @@
 import React, { lazy, useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
 import { ServerContext } from '@/state/server';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCircle, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons';
@@ -7,11 +6,11 @@ import { bytesToHuman, megabytesToHuman } from '@/helpers';
 import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import Can from '@/components/elements/Can';
-import PageContentBlock from '@/components/elements/PageContentBlock';
 import ContentContainer from '@/components/elements/ContentContainer';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
 import StopOrKillButton from '@/components/server/StopOrKillButton';
+import ServerContentBlock from '@/components/elements/ServerContentBlock';
 
 export type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
 
@@ -23,10 +22,13 @@ export default () => {
     const [ cpu, setCpu ] = useState(0);
     const [ disk, setDisk ] = useState(0);
 
-    const server = ServerContext.useStoreState(state => state.server.data!);
+    const name = ServerContext.useStoreState(state => state.server.data!.name);
+    const limits = ServerContext.useStoreState(state => state.server.data!.limits);
+    const isInstalling = ServerContext.useStoreState(state => state.server.data!.isInstalling);
     const status = ServerContext.useStoreState(state => state.status.value);
 
-    const { connected, instance } = ServerContext.useStoreState(state => state.socket);
+    const connected = ServerContext.useStoreState(state => state.socket.connected);
+    const instance = ServerContext.useStoreState(state => state.socket.instance);
 
     const statsListener = (data: string) => {
         let stats: any = {};
@@ -57,16 +59,13 @@ export default () => {
         };
     }, [ instance, connected ]);
 
-    const disklimit = server.limits.disk ? megabytesToHuman(server.limits.disk) : 'Unlimited';
-    const memorylimit = server.limits.memory ? megabytesToHuman(server.limits.memory) : 'Unlimited';
+    const disklimit = limits.disk ? megabytesToHuman(limits.disk) : 'Unlimited';
+    const memorylimit = limits.memory ? megabytesToHuman(limits.memory) : 'Unlimited';
 
     return (
-        <PageContentBlock css={tw`flex`}>
-            <Helmet>
-                <title> {server.name} | Console </title>
-            </Helmet>
+        <ServerContentBlock title={'Console'} css={tw`flex`}>
             <div css={tw`w-1/4`}>
-                <TitledGreyBox title={server.name} icon={faServer}>
+                <TitledGreyBox title={name} icon={faServer}>
                     <p css={tw`text-xs uppercase`}>
                         <FontAwesomeIcon
                             icon={faCircle}
@@ -90,7 +89,7 @@ export default () => {
                         <span css={tw`text-neutral-500`}> / {disklimit}</span>
                     </p>
                 </TitledGreyBox>
-                {!server.isInstalling ?
+                {!isInstalling ?
                     <Can action={[ 'control.start', 'control.stop', 'control.restart' ]} matchAny>
                         <div css={tw`shadow-md bg-neutral-700 rounded p-3 flex text-xs mt-4 justify-center`}>
                             <Can action={'control.start'}>
@@ -143,6 +142,6 @@ export default () => {
                     <ChunkedStatGraphs/>
                 </SuspenseSpinner>
             </div>
-        </PageContentBlock>
+        </ServerContentBlock>
     );
 };
diff --git a/resources/scripts/components/server/StopOrKillButton.tsx b/resources/scripts/components/server/StopOrKillButton.tsx
index fc8490655..ee9d40d2d 100644
--- a/resources/scripts/components/server/StopOrKillButton.tsx
+++ b/resources/scripts/components/server/StopOrKillButton.tsx
@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
 import { PowerAction } from '@/components/server/ServerConsole';
 import Button from '@/components/elements/Button';
+import isEqual from 'react-fast-compare';
 
 const StopOrKillButton = ({ onPress }: { onPress: (action: PowerAction) => void }) => {
     const [ clicked, setClicked ] = useState(false);
@@ -27,4 +28,4 @@ const StopOrKillButton = ({ onPress }: { onPress: (action: PowerAction) => void
     );
 };
 
-export default StopOrKillButton;
+export default memo(StopOrKillButton, isEqual);
diff --git a/resources/scripts/components/server/files/FileDropdownMenu.tsx b/resources/scripts/components/server/files/FileDropdownMenu.tsx
index e64dd3d84..66b2fbb32 100644
--- a/resources/scripts/components/server/files/FileDropdownMenu.tsx
+++ b/resources/scripts/components/server/files/FileDropdownMenu.tsx
@@ -19,7 +19,6 @@ import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import copyFile from '@/api/server/files/copyFile';
 import Can from '@/components/elements/Can';
 import getFileDownloadUrl from '@/api/server/files/getFileDownloadUrl';
-import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
 import tw from 'twin.macro';
 import { FileObject } from '@/api/server/files/loadDirectory';
@@ -56,7 +55,7 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
     const [ showSpinner, setShowSpinner ] = useState(false);
     const [ modal, setModal ] = useState<ModalType | null>(null);
 
-    const { uuid } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const { mutate } = useFileManagerSwr();
     const { clearAndAddHttpError, clearFlashes } = useFlash();
     const directory = ServerContext.useStoreState(state => state.files.directory);
diff --git a/resources/scripts/components/server/files/FileEditContainer.tsx b/resources/scripts/components/server/files/FileEditContainer.tsx
index 8ad40f72d..4b3d73a80 100644
--- a/resources/scripts/components/server/files/FileEditContainer.tsx
+++ b/resources/scripts/components/server/files/FileEditContainer.tsx
@@ -14,8 +14,8 @@ import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
 import Select from '@/components/elements/Select';
 import modes from '@/modes';
-import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
+import { ServerContext } from '@/state/server';
 
 const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/AceEditor'));
 
@@ -30,7 +30,8 @@ export default () => {
     const history = useHistory();
     const { hash } = useLocation();
 
-    const { id, uuid } = useServer();
+    const id = ServerContext.useStoreState(state => state.server.data!.id);
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const { addError, clearFlashes } = useFlash();
 
     let fetchFileContent: null | (() => Promise<string>) = null;
diff --git a/resources/scripts/components/server/files/FileManagerContainer.tsx b/resources/scripts/components/server/files/FileManagerContainer.tsx
index de2b0df11..2c90e9925 100644
--- a/resources/scripts/components/server/files/FileManagerContainer.tsx
+++ b/resources/scripts/components/server/files/FileManagerContainer.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react';
-import { Helmet } from 'react-helmet';
 import { httpErrorToHuman } from '@/api/http';
 import { CSSTransition } from 'react-transition-group';
 import Spinner from '@/components/elements/Spinner';
@@ -9,15 +8,14 @@ import { FileObject } from '@/api/server/files/loadDirectory';
 import NewDirectoryButton from '@/components/server/files/NewDirectoryButton';
 import { Link, useLocation } from 'react-router-dom';
 import Can from '@/components/elements/Can';
-import PageContentBlock from '@/components/elements/PageContentBlock';
 import ServerError from '@/components/screens/ServerError';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
-import useServer from '@/plugins/useServer';
 import { ServerContext } from '@/state/server';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 import MassActionsBar from '@/components/server/files/MassActionsBar';
 import UploadButton from '@/components/server/files/UploadButton';
+import ServerContentBlock from '@/components/elements/ServerContentBlock';
 
 const sortFiles = (files: FileObject[]): FileObject[] => {
     return files.sort((a, b) => a.name.localeCompare(b.name))
@@ -25,7 +23,7 @@ const sortFiles = (files: FileObject[]): FileObject[] => {
 };
 
 export default () => {
-    const { id, name: serverName } = useServer();
+    const id = ServerContext.useStoreState(state => state.server.data!.id);
     const { hash } = useLocation();
     const { data: files, error, mutate } = useFileManagerSwr();
 
@@ -44,10 +42,7 @@ export default () => {
     }
 
     return (
-        <PageContentBlock showFlashKey={'files'}>
-            <Helmet>
-                <title> {serverName} | File Manager </title>
-            </Helmet>
+        <ServerContentBlock title={'File Manager'} showFlashKey={'files'}>
             <FileManagerBreadcrumbs/>
             {
                 !files ?
@@ -93,6 +88,6 @@ export default () => {
                         </Can>
                     </>
             }
-        </PageContentBlock>
+        </ServerContentBlock>
     );
 };
diff --git a/resources/scripts/components/server/files/MassActionsBar.tsx b/resources/scripts/components/server/files/MassActionsBar.tsx
index 40067d039..b5dceb81a 100644
--- a/resources/scripts/components/server/files/MassActionsBar.tsx
+++ b/resources/scripts/components/server/files/MassActionsBar.tsx
@@ -8,14 +8,14 @@ import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 import useFlash from '@/plugins/useFlash';
 import compressFiles from '@/api/server/files/compressFiles';
-import useServer from '@/plugins/useServer';
 import { ServerContext } from '@/state/server';
 import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import deleteFiles from '@/api/server/files/deleteFiles';
 import RenameFileModal from '@/components/server/files/RenameFileModal';
 
 const MassActionsBar = () => {
-    const { uuid } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+
     const { mutate } = useFileManagerSwr();
     const { clearFlashes, clearAndAddHttpError } = useFlash();
     const [ loading, setLoading ] = useState(false);
diff --git a/resources/scripts/components/server/files/NewDirectoryButton.tsx b/resources/scripts/components/server/files/NewDirectoryButton.tsx
index 0a6a2b07f..709fdd5e6 100644
--- a/resources/scripts/components/server/files/NewDirectoryButton.tsx
+++ b/resources/scripts/components/server/files/NewDirectoryButton.tsx
@@ -8,7 +8,6 @@ import { object, string } from 'yup';
 import createDirectory from '@/api/server/files/createDirectory';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
-import useServer from '@/plugins/useServer';
 import { FileObject } from '@/api/server/files/loadDirectory';
 import useFlash from '@/plugins/useFlash';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
@@ -36,7 +35,7 @@ const generateDirectoryData = (name: string): FileObject => ({
 });
 
 export default () => {
-    const { uuid } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const { clearAndAddHttpError } = useFlash();
     const [ visible, setVisible ] = useState(false);
 
diff --git a/resources/scripts/components/server/files/RenameFileModal.tsx b/resources/scripts/components/server/files/RenameFileModal.tsx
index fb3c0620d..b81087948 100644
--- a/resources/scripts/components/server/files/RenameFileModal.tsx
+++ b/resources/scripts/components/server/files/RenameFileModal.tsx
@@ -7,7 +7,6 @@ import renameFiles from '@/api/server/files/renameFiles';
 import { ServerContext } from '@/state/server';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
-import useServer from '@/plugins/useServer';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 import useFlash from '@/plugins/useFlash';
 
@@ -18,7 +17,7 @@ interface FormikValues {
 type OwnProps = RequiredModalProps & { files: string[]; useMoveTerminology?: boolean };
 
 const RenameFileModal = ({ files, useMoveTerminology, ...props }: OwnProps) => {
-    const { uuid } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const { mutate } = useFileManagerSwr();
     const { clearFlashes, clearAndAddHttpError } = useFlash();
     const directory = ServerContext.useStoreState(state => state.files.directory);
diff --git a/resources/scripts/components/server/files/UploadButton.tsx b/resources/scripts/components/server/files/UploadButton.tsx
index 6fe275f90..5b399ef1d 100644
--- a/resources/scripts/components/server/files/UploadButton.tsx
+++ b/resources/scripts/components/server/files/UploadButton.tsx
@@ -1,6 +1,5 @@
 import axios from 'axios';
 import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
-import useServer from '@/plugins/useServer';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
 import React, { useEffect, useState } from 'react';
@@ -19,7 +18,7 @@ const InnerContainer = styled.div`
 `;
 
 export default () => {
-    const { uuid } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const [ visible, setVisible ] = useState(false);
     const [ loading, setLoading ] = useState(false);
     const { mutate } = useFileManagerSwr();
diff --git a/resources/scripts/components/server/settings/SettingsContainer.tsx b/resources/scripts/components/server/settings/SettingsContainer.tsx
index edaa3503f..f8934d075 100644
--- a/resources/scripts/components/server/settings/SettingsContainer.tsx
+++ b/resources/scripts/components/server/settings/SettingsContainer.tsx
@@ -1,29 +1,25 @@
 import React from 'react';
-import { Helmet } from 'react-helmet';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import { ServerContext } from '@/state/server';
 import { useStoreState } from 'easy-peasy';
-import { ApplicationStore } from '@/state';
-import { UserData } from '@/state/user';
 import RenameServerBox from '@/components/server/settings/RenameServerBox';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import Can from '@/components/elements/Can';
 import ReinstallServerBox from '@/components/server/settings/ReinstallServerBox';
-import PageContentBlock from '@/components/elements/PageContentBlock';
 import tw from 'twin.macro';
 import Input from '@/components/elements/Input';
 import Label from '@/components/elements/Label';
 import { LinkButton } from '@/components/elements/Button';
+import ServerContentBlock from '@/components/elements/ServerContentBlock';
 
 export default () => {
-    const user = useStoreState<ApplicationStore, UserData>(state => state.user.data!);
-    const server = ServerContext.useStoreState(state => state.server.data!);
+    const username = useStoreState(state => state.user.data!.username);
+    const id = ServerContext.useStoreState(state => state.server.data!.id);
+    const sftpIp = ServerContext.useStoreState(state => state.server.data!.sftpDetails.ip);
+    const sftpPort = ServerContext.useStoreState(state => state.server.data!.sftpDetails.port);
 
     return (
-        <PageContentBlock>
-            <Helmet>
-                <title> {server.name} | Settings </title>
-            </Helmet>
+        <ServerContentBlock title={'Settings'}>
             <FlashMessageRender byKey={'settings'} css={tw`mb-4`}/>
             <div css={tw`md:flex`}>
                 <div css={tw`w-full md:flex-1 md:mr-10`}>
@@ -33,7 +29,7 @@ export default () => {
                                 <Label>Server Address</Label>
                                 <Input
                                     type={'text'}
-                                    value={`sftp://${server.sftpDetails.ip}:${server.sftpDetails.port}`}
+                                    value={`sftp://${sftpIp}:${sftpPort}`}
                                     readOnly
                                 />
                             </div>
@@ -41,7 +37,7 @@ export default () => {
                                 <Label>Username</Label>
                                 <Input
                                     type={'text'}
-                                    value={`${user.username}.${server.id}`}
+                                    value={`${username}.${id}`}
                                     readOnly
                                 />
                             </div>
@@ -56,7 +52,7 @@ export default () => {
                                 <div css={tw`ml-4`}>
                                     <LinkButton
                                         isSecondary
-                                        href={`sftp://${user.username}.${server.id}@${server.sftpDetails.ip}:${server.sftpDetails.port}`}
+                                        href={`sftp://${username}.${id}@${sftpIp}:${sftpPort}`}
                                     >
                                         Launch SFTP
                                     </LinkButton>
@@ -76,6 +72,6 @@ export default () => {
                     </Can>
                 </div>
             </div>
-        </PageContentBlock>
+        </ServerContentBlock>
     );
 };
diff --git a/resources/scripts/components/server/startup/VariableBox.tsx b/resources/scripts/components/server/startup/VariableBox.tsx
index 27c2cfa8f..f238614ec 100644
--- a/resources/scripts/components/server/startup/VariableBox.tsx
+++ b/resources/scripts/components/server/startup/VariableBox.tsx
@@ -7,7 +7,6 @@ import Input from '@/components/elements/Input';
 import tw from 'twin.macro';
 import { debounce } from 'debounce';
 import updateStartupVariable from '@/api/server/updateStartupVariable';
-import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import getServerStartup from '@/api/swr/getServerStartup';
diff --git a/resources/scripts/plugins/useFileManagerSwr.ts b/resources/scripts/plugins/useFileManagerSwr.ts
index 16721e72c..eb36848bf 100644
--- a/resources/scripts/plugins/useFileManagerSwr.ts
+++ b/resources/scripts/plugins/useFileManagerSwr.ts
@@ -1,11 +1,10 @@
 import useSWR from 'swr';
 import loadDirectory, { FileObject } from '@/api/server/files/loadDirectory';
 import { cleanDirectoryPath } from '@/helpers';
-import useServer from '@/plugins/useServer';
 import { ServerContext } from '@/state/server';
 
 export default () => {
-    const { uuid } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const directory = ServerContext.useStoreState(state => state.files.directory);
 
     return useSWR<FileObject[]>(