diff --git a/eslint.config.js b/eslint.config.js
index 48152a0a8..5b276f61b 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -37,7 +37,6 @@ export default defineConfig([
             // React
             'react/react-in-jsx-scope': 'off',
             'react/prop-types': 'off',
-            'react/display-name': 'warn',
 
             // React Hooks
             ...reactHooks.configs.recommended.rules,
diff --git a/resources/scripts/components/Captcha.tsx b/resources/scripts/components/Captcha.tsx
index c8cc9623d..eb7495133 100644
--- a/resources/scripts/components/Captcha.tsx
+++ b/resources/scripts/components/Captcha.tsx
@@ -12,7 +12,7 @@ interface CaptchaProps {
     onExpire: () => void;
 }
 
-export default ({ driver, sitekey, endpoint, onVerify, onError, onExpire }: CaptchaProps) => {
+const Captcha = ({ driver, sitekey, endpoint, onVerify, onError, onExpire }: CaptchaProps) => {
     const [loaded, setLoaded] = useState(false);
 
     useEffect(() => {
@@ -50,3 +50,5 @@ export default ({ driver, sitekey, endpoint, onVerify, onError, onExpire }: Capt
 
     return null;
 };
+
+export default Captcha;
diff --git a/resources/scripts/components/FriendlyCaptcha.tsx b/resources/scripts/components/FriendlyCaptcha.tsx
index 56d767b7c..27abab9f5 100644
--- a/resources/scripts/components/FriendlyCaptcha.tsx
+++ b/resources/scripts/components/FriendlyCaptcha.tsx
@@ -45,4 +45,6 @@ const FriendlyCaptcha = forwardRef(({ sitekey, onComplete, onError, onExpire }:
     return <div ref={containerRef} className='frc-captcha dark' data-sitekey={sitekey} />;
 });
 
+FriendlyCaptcha.displayName = 'FriendlyCaptcha';
+
 export default FriendlyCaptcha;
diff --git a/resources/scripts/components/auth/ForgotPasswordContainer.tsx b/resources/scripts/components/auth/ForgotPasswordContainer.tsx
index 81261751f..444d39d77 100644
--- a/resources/scripts/components/auth/ForgotPasswordContainer.tsx
+++ b/resources/scripts/components/auth/ForgotPasswordContainer.tsx
@@ -25,7 +25,7 @@ interface Values {
     email: string;
 }
 
-export default () => {
+const ForgotPasswordContainer = () => {
     const turnstileRef = useRef(null);
     const friendlyCaptchaRef = useRef<{ reset: () => void }>(null);
     const hCaptchaRef = useRef<HCaptcha>(null);
@@ -202,3 +202,5 @@ export default () => {
         </ContentBox>
     );
 };
+
+export default ForgotPasswordContainer;
diff --git a/resources/scripts/components/auth/LoginCheckpointContainer.tsx b/resources/scripts/components/auth/LoginCheckpointContainer.tsx
index 3acf6f3a9..cac5c8309 100644
--- a/resources/scripts/components/auth/LoginCheckpointContainer.tsx
+++ b/resources/scripts/components/auth/LoginCheckpointContainer.tsx
@@ -28,7 +28,7 @@ type Props = OwnProps & {
     clearAndAddHttpError: ActionCreator<FlashStore['clearAndAddHttpError']['payload']>;
 };
 
-function LoginCheckpointContainer() {
+function LoginCheckpointForm() {
     const { isSubmitting, setFieldValue } = useFormikContext<Values>();
     const [isMissingDevice, setIsMissingDevice] = useState(false);
 
@@ -111,7 +111,6 @@ const EnhancedForm = withFormik<Props & { location: Location }, Values>({
         loginCheckpoint(location.state?.token || '', code, recoveryCode)
             .then((response) => {
                 if (response.complete) {
-                    // @ts-expect-error this is valid
                     window.location = response.intended || '/';
                     return;
                 }
@@ -129,9 +128,9 @@ const EnhancedForm = withFormik<Props & { location: Location }, Values>({
         code: '',
         recoveryCode: '',
     }),
-})(LoginCheckpointContainer);
+})(LoginCheckpointForm);
 
-export default ({ ...props }: OwnProps) => {
+const LoginCheckpointContainer = ({ ...props }: OwnProps) => {
     const { clearAndAddHttpError } = useFlash();
 
     const location = useLocation();
@@ -145,3 +144,5 @@ export default ({ ...props }: OwnProps) => {
 
     return <EnhancedForm clearAndAddHttpError={clearAndAddHttpError} location={location} {...props} />;
 };
+
+export default LoginCheckpointContainer;
diff --git a/resources/scripts/components/auth/LoginFormContainer.tsx b/resources/scripts/components/auth/LoginFormContainer.tsx
index 51896e1d9..e61c6a7e0 100644
--- a/resources/scripts/components/auth/LoginFormContainer.tsx
+++ b/resources/scripts/components/auth/LoginFormContainer.tsx
@@ -7,7 +7,7 @@ type Props = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>,
     title?: string;
 };
 
-export default forwardRef<HTMLFormElement, Props>(({ title, ...props }, ref) => (
+const LoginFormContainer = forwardRef<HTMLFormElement, Props>(({ title, ...props }, ref) => (
     <div className='w-full max-w-lg px-8'>
         {title && <h2 className={`text-3xl text-center text-zinc-100 font-medium py-4`}>{title}</h2>}
         <FlashMessageRender />
@@ -18,3 +18,7 @@ export default forwardRef<HTMLFormElement, Props>(({ title, ...props }, ref) =>
         </Form>
     </div>
 ));
+
+LoginFormContainer.displayName = 'LoginFormContainer';
+
+export default LoginFormContainer;
diff --git a/resources/scripts/components/dashboard/AccountApiContainer.tsx b/resources/scripts/components/dashboard/AccountApiContainer.tsx
index c68081ad8..b61df2c8e 100644
--- a/resources/scripts/components/dashboard/AccountApiContainer.tsx
+++ b/resources/scripts/components/dashboard/AccountApiContainer.tsx
@@ -17,7 +17,7 @@ import getApiKeys, { ApiKey } from '@/api/account/getApiKeys';
 
 import { useFlashKey } from '@/plugins/useFlash';
 
-export default () => {
+const AccountApiContainer = () => {
     const [deleteIdentifier, setDeleteIdentifier] = useState('');
     const [keys, setKeys] = useState<ApiKey[]>([]);
     const [loading, setLoading] = useState(true);
@@ -98,3 +98,5 @@ export default () => {
         </PageContentBlock>
     );
 };
+
+export default AccountApiContainer;
diff --git a/resources/scripts/components/dashboard/AccountOverviewContainer.tsx b/resources/scripts/components/dashboard/AccountOverviewContainer.tsx
index 505707de6..5ce83d70f 100644
--- a/resources/scripts/components/dashboard/AccountOverviewContainer.tsx
+++ b/resources/scripts/components/dashboard/AccountOverviewContainer.tsx
@@ -9,7 +9,7 @@ import PageContentBlock from '@/components/elements/PageContentBlock';
 
 import Code from '../elements/Code';
 
-export default () => {
+const AccountOverviewContainer = () => {
     const { state } = useLocation();
 
     return (
@@ -49,3 +49,5 @@ export default () => {
         </PageContentBlock>
     );
 };
+
+export default AccountOverviewContainer;
diff --git a/resources/scripts/components/dashboard/DashboardContainer.tsx b/resources/scripts/components/dashboard/DashboardContainer.tsx
index 425b0b9e3..bce19926b 100644
--- a/resources/scripts/components/dashboard/DashboardContainer.tsx
+++ b/resources/scripts/components/dashboard/DashboardContainer.tsx
@@ -23,7 +23,7 @@ import { usePersistedState } from '@/plugins/usePersistedState';
 
 import { MainPageHeader } from '../elements/MainPageHeader';
 
-export default () => {
+const DashboardContainer = () => {
     const { search } = useLocation();
     const defaultPage = Number(new URLSearchParams(search).get('page') || '1');
 
@@ -221,3 +221,5 @@ export default () => {
         </PageContentBlock>
     );
 };
+
+export default DashboardContainer;
diff --git a/resources/scripts/components/dashboard/ServerRow.tsx b/resources/scripts/components/dashboard/ServerRow.tsx
index 33b74b022..737981fdb 100644
--- a/resources/scripts/components/dashboard/ServerRow.tsx
+++ b/resources/scripts/components/dashboard/ServerRow.tsx
@@ -57,7 +57,7 @@ const StatusIndicatorBox = styled.div<{ $status: ServerPowerState | undefined }>
 
 type Timer = ReturnType<typeof setInterval>;
 
-export default ({ server, className }: { server: Server; className?: string }) => {
+const ServerRow = ({ server, className }: { server: Server; className?: string }) => {
     const interval = useRef<Timer>(null) as React.MutableRefObject<Timer>;
     const [isSuspended, setIsSuspended] = useState(server.status === 'suspended');
     const [stats, setStats] = useState<ServerStats | null>(null);
@@ -196,3 +196,5 @@ export default ({ server, className }: { server: Server; className?: string }) =
         </StatusIndicatorBox>
     );
 };
+
+export default ServerRow;
diff --git a/resources/scripts/components/dashboard/activity/ActivityLogContainer.tsx b/resources/scripts/components/dashboard/activity/ActivityLogContainer.tsx
index c56a4d550..89ae7b961 100644
--- a/resources/scripts/components/dashboard/activity/ActivityLogContainer.tsx
+++ b/resources/scripts/components/dashboard/activity/ActivityLogContainer.tsx
@@ -16,7 +16,7 @@ import { ActivityLogFilters, useActivityLogs } from '@/api/account/activity';
 import { useFlashKey } from '@/plugins/useFlash';
 import useLocationHash from '@/plugins/useLocationHash';
 
-export default () => {
+const ActivityLogContainer = () => {
     const { hash } = useLocationHash();
     const { clearAndAddHttpError } = useFlashKey('account');
     const [filters, setFilters] = useState<ActivityLogFilters>({ page: 1, sorts: { timestamp: -1 } });
@@ -69,3 +69,5 @@ export default () => {
         </PageContentBlock>
     );
 };
+
+export default ActivityLogContainer;
diff --git a/resources/scripts/components/dashboard/forms/ConfigureTwoFactorForm.tsx b/resources/scripts/components/dashboard/forms/ConfigureTwoFactorForm.tsx
index 327ff39b7..983b6a9d8 100644
--- a/resources/scripts/components/dashboard/forms/ConfigureTwoFactorForm.tsx
+++ b/resources/scripts/components/dashboard/forms/ConfigureTwoFactorForm.tsx
@@ -10,7 +10,7 @@ import { ApplicationStore } from '@/state';
 
 import { useFlashKey } from '@/plugins/useFlash';
 
-export default () => {
+const ConfigureTwoFactorForm = () => {
     const [tokens, setTokens] = useState<string[]>([]);
     const [visible, setVisible] = useState<'enable' | 'disable' | null>(null);
     const isEnabled = useStoreState((state: ApplicationStore) => state.user.data!.useTotp);
@@ -47,3 +47,5 @@ export default () => {
         </div>
     );
 };
+
+export default ConfigureTwoFactorForm;
diff --git a/resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx b/resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx
index 286bedf3c..1c2b53ede 100644
--- a/resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx
+++ b/resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx
@@ -24,7 +24,7 @@ interface Values {
     allowedIps: string;
 }
 
-export default ({ onKeyCreated }: { onKeyCreated: (key: ApiKey) => void }) => {
+const CreateApiKeyForm = ({ onKeyCreated }: { onKeyCreated: (key: ApiKey) => void }) => {
     const [apiKey, setApiKey] = useState('');
     const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
@@ -99,3 +99,6 @@ export default ({ onKeyCreated }: { onKeyCreated: (key: ApiKey) => void }) => {
         </>
     );
 };
+
+CreateApiKeyForm.displayName = 'CreateApiKeyForm';
+export default CreateApiKeyForm;
diff --git a/resources/scripts/components/dashboard/forms/RecoveryTokensDialog.tsx b/resources/scripts/components/dashboard/forms/RecoveryTokensDialog.tsx
index bb8755a64..75526995a 100644
--- a/resources/scripts/components/dashboard/forms/RecoveryTokensDialog.tsx
+++ b/resources/scripts/components/dashboard/forms/RecoveryTokensDialog.tsx
@@ -7,7 +7,7 @@ interface RecoveryTokenDialogProps extends DialogProps {
     tokens: string[];
 }
 
-export default ({ tokens, open, onClose }: RecoveryTokenDialogProps) => {
+const RecoveryTokensDialog = ({ tokens, open, onClose }: RecoveryTokenDialogProps) => {
     const grouped = [] as [string, string][];
     tokens.forEach((token, index) => {
         if (index % 2 === 0) {
@@ -48,3 +48,5 @@ export default ({ tokens, open, onClose }: RecoveryTokenDialogProps) => {
         </Dialog>
     );
 };
+
+export default RecoveryTokensDialog;
diff --git a/resources/scripts/components/dashboard/forms/UpdateEmailAddressForm.tsx b/resources/scripts/components/dashboard/forms/UpdateEmailAddressForm.tsx
index fa3fc09d5..4f8a6fa58 100644
--- a/resources/scripts/components/dashboard/forms/UpdateEmailAddressForm.tsx
+++ b/resources/scripts/components/dashboard/forms/UpdateEmailAddressForm.tsx
@@ -21,7 +21,7 @@ const schema = Yup.object().shape({
     password: Yup.string().required('You must provide your current account password.'),
 });
 
-export default () => {
+const UpdateEmailAddressForm = () => {
     const user = useStoreState((state: State<ApplicationStore>) => state.user.data);
     const updateEmail = useStoreActions((state: Actions<ApplicationStore>) => state.user.updateUserEmail);
 
@@ -76,3 +76,5 @@ export default () => {
         </Formik>
     );
 };
+
+export default UpdateEmailAddressForm;
diff --git a/resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx b/resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx
index 546931982..64fadea89 100644
--- a/resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx
+++ b/resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx
@@ -30,7 +30,7 @@ const schema = Yup.object().shape({
     ),
 });
 
-export default () => {
+const UpdatePasswordForm = () => {
     const user = useStoreState((state: State<ApplicationStore>) => state.user.data);
     const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
@@ -102,3 +102,5 @@ export default () => {
         </Fragment>
     );
 };
+
+export default UpdatePasswordForm;
diff --git a/resources/scripts/components/dashboard/ssh/AccountSSHContainer.tsx b/resources/scripts/components/dashboard/ssh/AccountSSHContainer.tsx
index d4b3c16d7..b5a64c066 100644
--- a/resources/scripts/components/dashboard/ssh/AccountSSHContainer.tsx
+++ b/resources/scripts/components/dashboard/ssh/AccountSSHContainer.tsx
@@ -14,7 +14,7 @@ import { useSSHKeys } from '@/api/account/ssh-keys';
 
 import { useFlashKey } from '@/plugins/useFlash';
 
-export default () => {
+const AccountSSHContainer = () => {
     const [deleteIdentifier, setDeleteIdentifier] = useState('');
     const { clearAndAddHttpError } = useFlashKey('account');
     const { data, isValidating, error } = useSSHKeys({
@@ -77,3 +77,5 @@ export default () => {
         </PageContentBlock>
     );
 };
+
+export default AccountSSHContainer;
diff --git a/resources/scripts/components/dashboard/ssh/CreateSSHKeyForm.tsx b/resources/scripts/components/dashboard/ssh/CreateSSHKeyForm.tsx
index 8356fe2b0..a17c5e464 100644
--- a/resources/scripts/components/dashboard/ssh/CreateSSHKeyForm.tsx
+++ b/resources/scripts/components/dashboard/ssh/CreateSSHKeyForm.tsx
@@ -21,7 +21,7 @@ interface Values {
     publicKey: string;
 }
 
-export default () => {
+const CreateSSHKeyForm = () => {
     const [sshKey, setSshKey] = useState('');
     const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
     const { mutate } = useSSHKeys();
@@ -96,3 +96,5 @@ export default () => {
         </>
     );
 };
+
+export default CreateSSHKeyForm;
diff --git a/resources/scripts/components/dashboard/ssh/DeleteSSHKeyButton.tsx b/resources/scripts/components/dashboard/ssh/DeleteSSHKeyButton.tsx
index bbdffb8c9..3c619c11d 100644
--- a/resources/scripts/components/dashboard/ssh/DeleteSSHKeyButton.tsx
+++ b/resources/scripts/components/dashboard/ssh/DeleteSSHKeyButton.tsx
@@ -9,7 +9,7 @@ import { deleteSSHKey, useSSHKeys } from '@/api/account/ssh-keys';
 
 import { useFlashKey } from '@/plugins/useFlash';
 
-export default ({ name, fingerprint }: { name: string; fingerprint: string }) => {
+const DeleteSSHKeyButton = ({ name, fingerprint }: { name: string; fingerprint: string }) => {
     const { clearAndAddHttpError } = useFlashKey('account');
     const [visible, setVisible] = useState(false);
     const { mutate } = useSSHKeys();
@@ -43,3 +43,5 @@ export default ({ name, fingerprint }: { name: string; fingerprint: string }) =>
         </>
     );
 };
+
+export default DeleteSSHKeyButton;
diff --git a/resources/scripts/components/elements/CheckBoxMods.tsx b/resources/scripts/components/elements/CheckBoxMods.tsx
index d6a7e6d07..750c4a251 100644
--- a/resources/scripts/components/elements/CheckBoxMods.tsx
+++ b/resources/scripts/components/elements/CheckBoxMods.tsx
@@ -28,4 +28,6 @@ const CheckBox = forwardRef<HTMLInputElement, Props>(({ className, label, inputF
     </div>
 ));
 
+CheckBox.displayName = 'CheckBox';
+
 export default CheckBox;
diff --git a/resources/scripts/components/elements/Code.tsx b/resources/scripts/components/elements/Code.tsx
index 640c3469b..aee285ac5 100644
--- a/resources/scripts/components/elements/Code.tsx
+++ b/resources/scripts/components/elements/Code.tsx
@@ -6,7 +6,7 @@ interface CodeProps {
     children: React.ReactNode;
 }
 
-export default ({ dark, className, children }: CodeProps) => (
+const Code = ({ dark, className, children }: CodeProps) => (
     <code
         className={clsx('font-mono text-sm px-2 py-1 inline-block rounded-sm w-fit', className, {
             'bg-zinc-900': !dark,
@@ -16,3 +16,5 @@ export default ({ dark, className, children }: CodeProps) => (
         {children}
     </code>
 );
+
+export default Code;
diff --git a/resources/scripts/components/elements/activity/ActivityLogEntry.tsx b/resources/scripts/components/elements/activity/ActivityLogEntry.tsx
index 2469caac0..9ec92754c 100644
--- a/resources/scripts/components/elements/activity/ActivityLogEntry.tsx
+++ b/resources/scripts/components/elements/activity/ActivityLogEntry.tsx
@@ -21,7 +21,7 @@ interface Props {
     children?: React.ReactNode;
 }
 
-export default ({ activity, children }: Props) => {
+const ActivityLogEntry = ({ activity, children }: Props) => {
     const { pathTo } = useLocationHash();
     const actor = activity.relationships.actor;
 
@@ -76,3 +76,5 @@ export default ({ activity, children }: Props) => {
         </div>
     );
 };
+
+export default ActivityLogEntry;
diff --git a/resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx b/resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx
index 3f2be5ae2..e73b090ab 100644
--- a/resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx
+++ b/resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx
@@ -6,7 +6,7 @@ import MetaDataIcon from '@/components/elements/hugeicons/MetaData';
 
 import { formatObjectToIdentString } from '@/lib/objects';
 
-export default ({ meta }: { meta: Record<string, unknown> }) => {
+const ActivityLogMetaButton = ({ meta }: { meta: Record<string, unknown> }) => {
     const [open, setOpen] = useState(false);
 
     return (
@@ -35,3 +35,5 @@ export default ({ meta }: { meta: Record<string, unknown> }) => {
         </div>
     );
 };
+
+export default ActivityLogMetaButton;
diff --git a/resources/scripts/components/elements/alert/Alert.tsx b/resources/scripts/components/elements/alert/Alert.tsx
index 1da33437e..ff309b36f 100644
--- a/resources/scripts/components/elements/alert/Alert.tsx
+++ b/resources/scripts/components/elements/alert/Alert.tsx
@@ -8,7 +8,7 @@ interface AlertProps {
     children: React.ReactNode;
 }
 
-export default ({ type, className, children }: AlertProps) => {
+const Alert = ({ type, className, children }: AlertProps) => {
     return (
         <div
             className={clsx(
@@ -30,3 +30,5 @@ export default ({ type, className, children }: AlertProps) => {
         </div>
     );
 };
+
+export default Alert;
diff --git a/resources/scripts/components/elements/button/Button.tsx b/resources/scripts/components/elements/button/Button.tsx
index 38ce69983..326479417 100644
--- a/resources/scripts/components/elements/button/Button.tsx
+++ b/resources/scripts/components/elements/button/Button.tsx
@@ -45,4 +45,8 @@ const _Button = Object.assign(Button, {
     Danger: DangerButton,
 });
 
+Button.displayName = 'Button';
+TextButton.displayName = 'TextButton';
+DangerButton.displayName = 'DangerButton';
+
 export default _Button;
diff --git a/resources/scripts/components/elements/button/types.ts b/resources/scripts/components/elements/button/types.ts
index 273ac3b67..e86ec5e26 100644
--- a/resources/scripts/components/elements/button/types.ts
+++ b/resources/scripts/components/elements/button/types.ts
@@ -1,15 +1,15 @@
-enum Shape {
+export enum Shape {
     Default,
     IconSquare,
 }
 
-enum Size {
+export enum Size {
     Default,
     Small,
     Large,
 }
 
-enum Variant {
+export enum Variant {
     Primary,
     Secondary,
 }
diff --git a/resources/scripts/components/elements/dialog/ConfirmationDialog.tsx b/resources/scripts/components/elements/dialog/ConfirmationDialog.tsx
index 9e290b8f6..b7ffc586e 100644
--- a/resources/scripts/components/elements/dialog/ConfirmationDialog.tsx
+++ b/resources/scripts/components/elements/dialog/ConfirmationDialog.tsx
@@ -8,7 +8,7 @@ type ConfirmationProps = Omit<RenderDialogProps, 'description' | 'children'> & {
     onConfirmed: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
 
-export default ({ confirm = 'Okay', children, onConfirmed, ...props }: ConfirmationProps) => {
+const ConfirmationDialog = ({ confirm = 'Okay', children, onConfirmed, ...props }: ConfirmationProps) => {
     return (
         <Dialog {...props} description={typeof children === 'string' ? children : undefined}>
             {typeof children !== 'string' && children}
@@ -19,3 +19,5 @@ export default ({ confirm = 'Okay', children, onConfirmed, ...props }: Confirmat
         </Dialog>
     );
 };
+
+export default ConfirmationDialog;
diff --git a/resources/scripts/components/elements/dialog/Dialog.tsx b/resources/scripts/components/elements/dialog/Dialog.tsx
index a95327537..2f8f9faca 100644
--- a/resources/scripts/components/elements/dialog/Dialog.tsx
+++ b/resources/scripts/components/elements/dialog/Dialog.tsx
@@ -31,7 +31,7 @@ const variants = {
     },
 };
 
-export default ({
+const Dialog = ({
     open,
     title,
     description,
@@ -130,3 +130,5 @@ export default ({
         </AnimatePresence>
     );
 };
+
+export default Dialog;
diff --git a/resources/scripts/components/elements/inputs/Checkbox.tsx b/resources/scripts/components/elements/inputs/Checkbox.tsx
index 7fd497680..2f6296efc 100644
--- a/resources/scripts/components/elements/inputs/Checkbox.tsx
+++ b/resources/scripts/components/elements/inputs/Checkbox.tsx
@@ -30,4 +30,6 @@ const CheckBox = forwardRef<HTMLInputElement, Props>(({ className, label, inputF
     </div>
 ));
 
+CheckBox.displayName = 'CheckBox';
+
 export default CheckBox;
diff --git a/resources/scripts/components/elements/inputs/InputField.tsx b/resources/scripts/components/elements/inputs/InputField.tsx
index 87d8c6f87..977c28957 100644
--- a/resources/scripts/components/elements/inputs/InputField.tsx
+++ b/resources/scripts/components/elements/inputs/InputField.tsx
@@ -23,4 +23,6 @@ const Component = forwardRef<HTMLInputElement, InputFieldProps>(({ className, va
 
 const InputField = Object.assign(Component, { Variants: Variant });
 
+Component.displayName = 'InputField';
+
 export default InputField;
diff --git a/resources/scripts/components/server/ConflictStateRenderer.tsx b/resources/scripts/components/server/ConflictStateRenderer.tsx
index 69895ad53..9f3b91c45 100644
--- a/resources/scripts/components/server/ConflictStateRenderer.tsx
+++ b/resources/scripts/components/server/ConflictStateRenderer.tsx
@@ -4,7 +4,7 @@ import { ServerContext } from '@/state/server';
 
 import Spinner from '../elements/Spinner';
 
-export default () => {
+const ConflictStateRenderer = () => {
     const status = ServerContext.useStoreState((state) => state.server.data?.status || null);
     const isTransferring = ServerContext.useStoreState((state) => state.server.data?.isTransferring || false);
     const isNodeUnderMaintenance = ServerContext.useStoreState(
@@ -39,3 +39,5 @@ export default () => {
         />
     );
 };
+
+export default ConflictStateRenderer;
diff --git a/resources/scripts/components/server/ServerActivityLogContainer.tsx b/resources/scripts/components/server/ServerActivityLogContainer.tsx
index dcb63fdf7..f0adc01b0 100644
--- a/resources/scripts/components/server/ServerActivityLogContainer.tsx
+++ b/resources/scripts/components/server/ServerActivityLogContainer.tsx
@@ -17,7 +17,7 @@ import { useFlashKey } from '@/plugins/useFlash';
 // FIXME: add icons back
 import useLocationHash from '@/plugins/useLocationHash';
 
-export default () => {
+const ServerActivityLogContainer = () => {
     const { hash } = useLocationHash();
     const { clearAndAddHttpError } = useFlashKey('server:activity');
     const [filters, setFilters] = useState<ActivityLogFilters>({ page: 1, sorts: { timestamp: -1 } });
@@ -74,3 +74,5 @@ export default () => {
         </ServerContentBlock>
     );
 };
+
+export default ServerActivityLogContainer;
diff --git a/resources/scripts/components/server/UptimeDuration.tsx b/resources/scripts/components/server/UptimeDuration.tsx
index e87700a61..337c897d8 100644
--- a/resources/scripts/components/server/UptimeDuration.tsx
+++ b/resources/scripts/components/server/UptimeDuration.tsx
@@ -1,4 +1,4 @@
-export default ({ uptime }: { uptime: number }) => {
+const UptimeDuration = ({ uptime }: { uptime: number }) => {
     const days = Math.floor(uptime / (24 * 60 * 60));
     const hours = Math.floor((Math.floor(uptime) / 60 / 60) % 24);
     const remainder = Math.floor(uptime - hours * 60 * 60);
@@ -19,3 +19,5 @@ export default ({ uptime }: { uptime: number }) => {
         </>
     );
 };
+
+export default UptimeDuration;
diff --git a/resources/scripts/components/server/backups/BackupContainer.tsx b/resources/scripts/components/server/backups/BackupContainer.tsx
index 06354854a..7a26f64f6 100644
--- a/resources/scripts/components/server/backups/BackupContainer.tsx
+++ b/resources/scripts/components/server/backups/BackupContainer.tsx
@@ -83,7 +83,7 @@ const BackupContainer = () => {
     );
 };
 
-export default () => {
+const BackupContainerWrapper = () => {
     const [page, setPage] = useState<number>(1);
     return (
         <ServerBackupContext.Provider value={{ page, setPage }}>
@@ -91,3 +91,5 @@ export default () => {
         </ServerBackupContext.Provider>
     );
 };
+
+export default BackupContainerWrapper;
diff --git a/resources/scripts/components/server/backups/BackupContextMenu.tsx b/resources/scripts/components/server/backups/BackupContextMenu.tsx
index 741a14ebe..849493ada 100644
--- a/resources/scripts/components/server/backups/BackupContextMenu.tsx
+++ b/resources/scripts/components/server/backups/BackupContextMenu.tsx
@@ -24,7 +24,7 @@ interface Props {
     backup: ServerBackup;
 }
 
-export default ({ backup }: Props) => {
+const BackupContextMenu = ({ backup }: Props) => {
     const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
     const setServerFromState = ServerContext.useStoreActions((actions) => actions.server.setServerFromState);
     const [modal, setModal] = useState('');
@@ -199,3 +199,5 @@ export default ({ backup }: Props) => {
         </>
     );
 };
+
+export default BackupContextMenu;
diff --git a/resources/scripts/components/server/backups/BackupRow.tsx b/resources/scripts/components/server/backups/BackupRow.tsx
index ae6c6745b..7903deb70 100644
--- a/resources/scripts/components/server/backups/BackupRow.tsx
+++ b/resources/scripts/components/server/backups/BackupRow.tsx
@@ -23,7 +23,7 @@ interface Props {
     backup: ServerBackup;
 }
 
-export default ({ backup }: Props) => {
+const BackupRow = ({ backup }: Props) => {
     const { mutate } = getServerBackups();
 
     useWebsocketEvent(`${SocketEvent.BACKUP_COMPLETED}:${backup.uuid}` as SocketEvent, async (data) => {
@@ -114,3 +114,5 @@ export default ({ backup }: Props) => {
         </ContextMenu>
     );
 };
+
+export default BackupRow;
diff --git a/resources/scripts/components/server/backups/CreateBackupButton.tsx b/resources/scripts/components/server/backups/CreateBackupButton.tsx
index f2981e60c..2c751cfb1 100644
--- a/resources/scripts/components/server/backups/CreateBackupButton.tsx
+++ b/resources/scripts/components/server/backups/CreateBackupButton.tsx
@@ -76,7 +76,7 @@ const ModalContent = ({ ...props }: RequiredModalProps) => {
     );
 };
 
-export default () => {
+const CreateBackupButton = () => {
     const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
     const { clearFlashes, clearAndAddHttpError } = useFlash();
     const [visible, setVisible] = useState(false);
@@ -130,3 +130,5 @@ export default () => {
         </>
     );
 };
+
+export default CreateBackupButton;
diff --git a/resources/scripts/components/server/console/ChartBlock.tsx b/resources/scripts/components/server/console/ChartBlock.tsx
index 7c576ee7b..4c4dd1d00 100644
--- a/resources/scripts/components/server/console/ChartBlock.tsx
+++ b/resources/scripts/components/server/console/ChartBlock.tsx
@@ -8,7 +8,7 @@ interface ChartBlockProps {
     children: React.ReactNode;
 }
 
-export default ({ title, legend, children }: ChartBlockProps) => (
+const ChartBlock = ({ title, legend, children }: ChartBlockProps) => (
     <div className={clsx(styles.chart_container, 'group p-8!')}>
         <div className={'flex items-center justify-between mb-4'}>
             <h3 className={'font-extrabold text-sm'}>{title}</h3>
@@ -17,3 +17,5 @@ export default ({ title, legend, children }: ChartBlockProps) => (
         <div className={'z-10 overflow-hidden rounded-lg'}>{children}</div>
     </div>
 );
+
+export default ChartBlock;
diff --git a/resources/scripts/components/server/console/Console.tsx b/resources/scripts/components/server/console/Console.tsx
index 03ac4e525..7582e5149 100644
--- a/resources/scripts/components/server/console/Console.tsx
+++ b/resources/scripts/components/server/console/Console.tsx
@@ -51,7 +51,7 @@ const terminalProps: ITerminalOptions = {
     theme: theme,
 };
 
-export default () => {
+const Console = () => {
     const TERMINAL_PRELUDE = '\u001b[1m\u001b[33mcontainer@pyrodactyl~ \u001b[0m';
     const ref = useRef<HTMLDivElement>(null);
     const terminal = useMemo(() => new Terminal({ ...terminalProps, rows: 30 }), []);
@@ -233,3 +233,5 @@ export default () => {
         </div>
     );
 };
+
+export default Console;
diff --git a/resources/scripts/components/server/console/PowerButtons.tsx b/resources/scripts/components/server/console/PowerButtons.tsx
index 47a33b0a6..abc33fed9 100644
--- a/resources/scripts/components/server/console/PowerButtons.tsx
+++ b/resources/scripts/components/server/console/PowerButtons.tsx
@@ -11,7 +11,7 @@ interface PowerButtonProps {
     className?: string;
 }
 
-export default ({ className }: PowerButtonProps) => {
+const PowerButtons = ({ className }: PowerButtonProps) => {
     const [open, setOpen] = useState(false);
     const status = ServerContext.useStoreState((state) => state.status.value);
     const instance = ServerContext.useStoreState((state) => state.socket.instance);
@@ -127,3 +127,5 @@ export default ({ className }: PowerButtonProps) => {
         </div>
     );
 };
+
+export default PowerButtons;
diff --git a/resources/scripts/components/server/console/StatBlock.tsx b/resources/scripts/components/server/console/StatBlock.tsx
index f991a7697..ff1113f0d 100644
--- a/resources/scripts/components/server/console/StatBlock.tsx
+++ b/resources/scripts/components/server/console/StatBlock.tsx
@@ -11,7 +11,7 @@ interface StatBlockProps {
     className?: string;
 }
 
-export default ({ title, copyOnClick, className, children }: StatBlockProps) => {
+const StatBlock = ({ title, copyOnClick, className, children }: StatBlockProps) => {
     return (
         <CopyOnClick text={copyOnClick}>
             <div className={clsx(styles.stat_block, 'bg-[#ffffff09] border-[1px] border-[#ffffff11]', className)}>
@@ -25,3 +25,5 @@ export default ({ title, copyOnClick, className, children }: StatBlockProps) =>
         </CopyOnClick>
     );
 };
+
+export default StatBlock;
diff --git a/resources/scripts/components/server/console/StatGraphs.tsx b/resources/scripts/components/server/console/StatGraphs.tsx
index b4f290fe8..c568d4fab 100644
--- a/resources/scripts/components/server/console/StatGraphs.tsx
+++ b/resources/scripts/components/server/console/StatGraphs.tsx
@@ -15,7 +15,7 @@ import { ServerContext } from '@/state/server';
 
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
 
-export default () => {
+const StatGraphs = () => {
     const status = ServerContext.useStoreState((state) => state.status.value);
     const limits = ServerContext.useStoreState((state) => state.server.data!.limits);
     const previous = useRef<Record<'tx' | 'rx', number>>({ tx: -1, rx: -1 });
@@ -155,3 +155,5 @@ export default () => {
         </Tooltip.Provider>
     );
 };
+
+export default StatGraphs;
diff --git a/resources/scripts/components/server/databases/CreateDatabaseButton.tsx b/resources/scripts/components/server/databases/CreateDatabaseButton.tsx
index d6a632289..fc4c4b305 100644
--- a/resources/scripts/components/server/databases/CreateDatabaseButton.tsx
+++ b/resources/scripts/components/server/databases/CreateDatabaseButton.tsx
@@ -31,7 +31,7 @@ const schema = object().shape({
     connectionsFrom: string().matches(/^[\w\-/.%:]+$/, 'A valid host address must be provided.'),
 });
 
-export default () => {
+const CreateDatabaseButton = () => {
     const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
     const { addError, clearFlashes } = useFlash();
     const [visible, setVisible] = useState(false);
@@ -114,3 +114,5 @@ export default () => {
         </>
     );
 };
+
+export default CreateDatabaseButton;
diff --git a/resources/scripts/components/server/databases/DatabaseRow.tsx b/resources/scripts/components/server/databases/DatabaseRow.tsx
index bf6cc7d8d..e6ce8a7ff 100644
--- a/resources/scripts/components/server/databases/DatabaseRow.tsx
+++ b/resources/scripts/components/server/databases/DatabaseRow.tsx
@@ -34,7 +34,7 @@ interface Props {
     database: ServerDatabase;
 }
 
-export default ({ database }: Props) => {
+const DatabaseRow = ({ database }: Props) => {
     const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
     const { addError, clearFlashes } = useFlash();
     const [visible, setVisible] = useState(false);
@@ -232,3 +232,5 @@ export default ({ database }: Props) => {
         </>
     );
 };
+
+export default DatabaseRow;
diff --git a/resources/scripts/components/server/databases/DatabasesContainer.tsx b/resources/scripts/components/server/databases/DatabasesContainer.tsx
index ec9580d43..5deabd09d 100644
--- a/resources/scripts/components/server/databases/DatabasesContainer.tsx
+++ b/resources/scripts/components/server/databases/DatabasesContainer.tsx
@@ -17,7 +17,7 @@ import { ServerContext } from '@/state/server';
 import { useDeepMemoize } from '@/plugins/useDeepMemoize';
 import useFlash from '@/plugins/useFlash';
 
-export default () => {
+const DatabasesContainer = () => {
     const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
     const databaseLimit = ServerContext.useStoreState((state) => state.server.data!.featureLimits.databases);
 
@@ -80,3 +80,5 @@ export default () => {
         </ServerContentBlock>
     );
 };
+
+export default DatabasesContainer;
diff --git a/resources/scripts/components/server/databases/RotatePasswordButton.tsx b/resources/scripts/components/server/databases/RotatePasswordButton.tsx
index c4d72f0de..c4c8c7ae5 100644
--- a/resources/scripts/components/server/databases/RotatePasswordButton.tsx
+++ b/resources/scripts/components/server/databases/RotatePasswordButton.tsx
@@ -13,7 +13,13 @@ import rotateDatabasePassword from '@/api/server/databases/rotateDatabasePasswor
 import { ApplicationStore } from '@/state';
 import { ServerContext } from '@/state/server';
 
-export default ({ databaseId, onUpdate }: { databaseId: string; onUpdate: (database: ServerDatabase) => void }) => {
+const RotatePasswordButton = ({
+    databaseId,
+    onUpdate,
+}: {
+    databaseId: string;
+    onUpdate: (database: ServerDatabase) => void;
+}) => {
     const [loading, setLoading] = useState(false);
     const { addFlash, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
     const server = ServerContext.useStoreState((state) => state.server.data!);
@@ -53,3 +59,5 @@ export default ({ databaseId, onUpdate }: { databaseId: string; onUpdate: (datab
         </Button>
     );
 };
+
+export default RotatePasswordButton;
diff --git a/resources/scripts/components/server/features/Features.tsx b/resources/scripts/components/server/features/Features.tsx
index e1b2152bb..11eb880b5 100644
--- a/resources/scripts/components/server/features/Features.tsx
+++ b/resources/scripts/components/server/features/Features.tsx
@@ -7,7 +7,7 @@ import features from './index';
 
 type ListItems = [string, ComponentType][];
 
-export default ({ enabled }: { enabled: string[] }) => {
+const Features = ({ enabled }: { enabled: string[] }) => {
     const mapped: ListItems = useMemo(() => {
         return getObjectKeys(features)
             .filter((key) => enabled.map((v) => v.toLowerCase()).includes(key.toLowerCase()))
@@ -22,3 +22,5 @@ export default ({ enabled }: { enabled: string[] }) => {
         </Suspense>
     );
 };
+
+export default Features;
diff --git a/resources/scripts/components/server/files/FileEditContainer.tsx b/resources/scripts/components/server/files/FileEditContainer.tsx
index 70ad7e900..d235d7639 100644
--- a/resources/scripts/components/server/files/FileEditContainer.tsx
+++ b/resources/scripts/components/server/files/FileEditContainer.tsx
@@ -31,7 +31,7 @@ import useFlash from '@/plugins/useFlash';
 
 const Editor = lazy(() => import('@/components/elements/editor/Editor'));
 
-export default () => {
+const FileEditContainer = () => {
     const [error, setError] = useState('');
     const { action, '*': rawFilename } = useParams<{ action: 'edit' | 'new'; '*': string }>();
     const [_, setLoading] = useState(action === 'edit');
@@ -297,3 +297,5 @@ export default () => {
         </PageContentBlock>
     );
 };
+
+export default FileEditContainer;
diff --git a/resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx b/resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx
index 82f1e4d46..ade1e6b03 100644
--- a/resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx
+++ b/resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx
@@ -10,7 +10,7 @@ interface Props {
     isNewFile?: boolean;
 }
 
-export default ({ renderLeft, withinFileEditor, isNewFile }: Props) => {
+const FileManagerBreadcrumbs = ({ renderLeft, withinFileEditor, isNewFile }: Props) => {
     const id = ServerContext.useStoreState((state) => state.server.data!.id);
     const directory = ServerContext.useStoreState((state) => state.files.directory);
 
@@ -95,3 +95,5 @@ export default ({ renderLeft, withinFileEditor, isNewFile }: Props) => {
         </div>
     );
 };
+
+export default FileManagerBreadcrumbs;
diff --git a/resources/scripts/components/server/files/FileManagerContainer.tsx b/resources/scripts/components/server/files/FileManagerContainer.tsx
index 57f3682b5..852fb5a86 100644
--- a/resources/scripts/components/server/files/FileManagerContainer.tsx
+++ b/resources/scripts/components/server/files/FileManagerContainer.tsx
@@ -35,7 +35,7 @@ const sortFiles = (files: FileObject[]): FileObject[] => {
     return sortedFiles.filter((file, index) => index === 0 || file.name !== sortedFiles[index - 1]?.name);
 };
 
-export default () => {
+const FileManagerContainer = () => {
     const parentRef = useRef<HTMLDivElement | null>(null);
 
     const id = ServerContext.useStoreState((state) => state.server.data!.id);
@@ -86,10 +86,6 @@ export default () => {
         }
     }, [hash, pathname, directory]);
 
-    if (error) {
-        return <ServerError title={'Something went wrong.'} message={httpErrorToHuman(error)} />;
-    }
-
     const rowVirtualizer = useVirtualizer({
         // count: 10000,
         count: filesArray.length,
@@ -98,6 +94,10 @@ export default () => {
         // scrollMargin: 54,
     });
 
+    if (error) {
+        return <ServerError title={'Something went wrong.'} message={httpErrorToHuman(error)} />;
+    }
+
     return (
         <ServerContentBlock className='p-0!' title={'File Manager'} showFlashKey={'files'}>
             <div className='px-2 sm:px-14 pt-2 sm:pt-14'>
@@ -212,3 +212,5 @@ export default () => {
         </ServerContentBlock>
     );
 };
+
+export default FileManagerContainer;
diff --git a/resources/scripts/components/server/files/FileManagerStatus.tsx b/resources/scripts/components/server/files/FileManagerStatus.tsx
index 306579fc6..042095893 100644
--- a/resources/scripts/components/server/files/FileManagerStatus.tsx
+++ b/resources/scripts/components/server/files/FileManagerStatus.tsx
@@ -75,7 +75,7 @@ const FileUploadListDialog = asDialog({
     description: 'The following files are being uploaded to your server.',
 })(FileUploadList);
 
-export default () => {
+const FileManagerStatus = () => {
     const open = useSignal(false);
 
     const count = ServerContext.useStoreState((state) => Object.keys(state.files.uploads).length);
@@ -121,3 +121,5 @@ export default () => {
         </>
     );
 };
+
+export default FileManagerStatus;
diff --git a/resources/scripts/components/server/files/FileNameModal.tsx b/resources/scripts/components/server/files/FileNameModal.tsx
index 48016d15c..47347376e 100644
--- a/resources/scripts/components/server/files/FileNameModal.tsx
+++ b/resources/scripts/components/server/files/FileNameModal.tsx
@@ -16,7 +16,7 @@ interface Values {
     fileName: string;
 }
 
-export default ({ onFileNamed, onDismissed, ...props }: Props) => {
+const FileNameModal = ({ onFileNamed, onDismissed, ...props }: Props) => {
     const directory = ServerContext.useStoreState((state) => state.files.directory);
 
     const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
@@ -58,3 +58,5 @@ export default ({ onFileNamed, onDismissed, ...props }: Props) => {
         </Formik>
     );
 };
+
+export default FileNameModal;
diff --git a/resources/scripts/components/server/files/NewDirectoryButton.tsx b/resources/scripts/components/server/files/NewDirectoryButton.tsx
index 2ce1a6c8f..19627789c 100644
--- a/resources/scripts/components/server/files/NewDirectoryButton.tsx
+++ b/resources/scripts/components/server/files/NewDirectoryButton.tsx
@@ -102,7 +102,7 @@ const NewDirectoryDialog = asDialog({
     );
 });
 
-export default () => {
+const NewDirectoryButton = () => {
     const [open, setOpen] = useState(false);
 
     return (
@@ -121,3 +121,5 @@ export default () => {
         </>
     );
 };
+
+export default NewDirectoryButton;
diff --git a/resources/scripts/components/server/files/NewFileButton.tsx b/resources/scripts/components/server/files/NewFileButton.tsx
index 7da36108e..040e52b27 100644
--- a/resources/scripts/components/server/files/NewFileButton.tsx
+++ b/resources/scripts/components/server/files/NewFileButton.tsx
@@ -1,6 +1,6 @@
 import { NavLink } from 'react-router-dom';
 
-export default ({ id }: { id: string }) => {
+const NewFileButton = ({ id }: { id: string }) => {
     return (
         <NavLink to={`/server/${id}/files/new${window.location.hash}`}>
             <div
@@ -15,3 +15,5 @@ export default ({ id }: { id: string }) => {
         </NavLink>
     );
 };
+
+export default NewFileButton;
diff --git a/resources/scripts/components/server/files/SelectFileCheckbox.tsx b/resources/scripts/components/server/files/SelectFileCheckbox.tsx
index 460de7da4..1e123c767 100644
--- a/resources/scripts/components/server/files/SelectFileCheckbox.tsx
+++ b/resources/scripts/components/server/files/SelectFileCheckbox.tsx
@@ -2,7 +2,7 @@ import { Checkbox } from '@/components/elements/CheckboxNew';
 
 import { ServerContext } from '@/state/server';
 
-export default ({ name }: { name: string }) => {
+const SelectFileCheckbox = ({ name }: { name: string }) => {
     const isChecked = ServerContext.useStoreState((state) => state.files.selectedFiles.indexOf(name) >= 0);
     const appendSelectedFile = ServerContext.useStoreActions((actions) => actions.files.appendSelectedFile);
     const removeSelectedFile = ServerContext.useStoreActions((actions) => actions.files.removeSelectedFile);
@@ -17,3 +17,5 @@ export default ({ name }: { name: string }) => {
         />
     );
 };
+
+export default SelectFileCheckbox;
diff --git a/resources/scripts/components/server/files/UploadButton.tsx b/resources/scripts/components/server/files/UploadButton.tsx
index 8e1baf64d..21e4f11a3 100644
--- a/resources/scripts/components/server/files/UploadButton.tsx
+++ b/resources/scripts/components/server/files/UploadButton.tsx
@@ -20,7 +20,7 @@ function isFileOrDirectory(event: DragEvent): boolean {
     return event.dataTransfer.types.some((value) => value.toLowerCase() === 'files');
 }
 
-export default () => {
+const UploadButton = () => {
     const fileUploadInput = useRef<HTMLInputElement>(null);
     const [timeouts, _] = useState<NodeJS.Timeout[]>([]);
     const [visible, setVisible] = useState(false);
@@ -179,3 +179,5 @@ export default () => {
         </>
     );
 };
+
+export default UploadButton;
diff --git a/resources/scripts/components/server/modrinth/ModrinthContainer.tsx b/resources/scripts/components/server/modrinth/ModrinthContainer.tsx
index ca856dde9..dbf835368 100644
--- a/resources/scripts/components/server/modrinth/ModrinthContainer.tsx
+++ b/resources/scripts/components/server/modrinth/ModrinthContainer.tsx
@@ -17,7 +17,7 @@ import LoaderSelector from './LoaderSelector';
 import { fetchNewProjects } from './config';
 import { settings as localSettings } from './config';
 
-export default () => {
+const ModrinthContainer = () => {
     const [appVersion, setAppVersion] = useState<string | null>(null);
 
     const [settings, setSettings] = useState({
@@ -140,3 +140,5 @@ export default () => {
         </PageContentBlock>
     );
 };
+
+export default ModrinthContainer;
diff --git a/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx b/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
index c6080b40b..4efbd8493 100644
--- a/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
+++ b/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
@@ -16,7 +16,7 @@ interface Props {
     onDeleted: () => void;
 }
 
-export default ({ scheduleId, onDeleted }: Props) => {
+const DeleteScheduleButton = ({ scheduleId, onDeleted }: Props) => {
     const [visible, setVisible] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
@@ -61,3 +61,5 @@ export default ({ scheduleId, onDeleted }: Props) => {
         </>
     );
 };
+
+export default DeleteScheduleButton;
diff --git a/resources/scripts/components/server/schedules/NewTaskButton.tsx b/resources/scripts/components/server/schedules/NewTaskButton.tsx
index d878759ba..1be2dcb1d 100644
--- a/resources/scripts/components/server/schedules/NewTaskButton.tsx
+++ b/resources/scripts/components/server/schedules/NewTaskButton.tsx
@@ -11,7 +11,7 @@ interface Props {
     className?: string;
 }
 
-export default ({ schedule, className }: Props) => {
+const NewTaskButton = ({ schedule, className }: Props) => {
     const [visible, setVisible] = useState(false);
 
     return (
@@ -23,3 +23,5 @@ export default ({ schedule, className }: Props) => {
         </>
     );
 };
+
+export default NewTaskButton;
diff --git a/resources/scripts/components/server/schedules/ScheduleCheatsheetCards.tsx b/resources/scripts/components/server/schedules/ScheduleCheatsheetCards.tsx
index 0449becb6..7deee7289 100644
--- a/resources/scripts/components/server/schedules/ScheduleCheatsheetCards.tsx
+++ b/resources/scripts/components/server/schedules/ScheduleCheatsheetCards.tsx
@@ -1,4 +1,4 @@
-export default () => {
+const ScheduleCheatsheetCards = () => {
     return (
         <>
             <div className={`md:w-1/2 h-full bg-zinc-600`}>
@@ -50,3 +50,5 @@ export default () => {
         </>
     );
 };
+
+export default ScheduleCheatsheetCards;
diff --git a/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx b/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
index c3dfbb99b..7de61ae3b 100644
--- a/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
+++ b/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
@@ -31,7 +31,7 @@ const ActivePill = ({ active }: { active: boolean }) => (
     </span>
 );
 
-export default () => {
+const ScheduleEditContainer = () => {
     const { id: scheduleId } = useParams<'id'>();
     const navigate = useNavigate();
 
@@ -160,3 +160,5 @@ export default () => {
         </PageContentBlock>
     );
 };
+
+export default ScheduleEditContainer;
diff --git a/resources/scripts/components/server/schedules/ScheduleRow.tsx b/resources/scripts/components/server/schedules/ScheduleRow.tsx
index 68c84de01..d384d748a 100644
--- a/resources/scripts/components/server/schedules/ScheduleRow.tsx
+++ b/resources/scripts/components/server/schedules/ScheduleRow.tsx
@@ -6,7 +6,7 @@ import ScheduleCronRow from '@/components/server/schedules/ScheduleCronRow';
 
 import { Schedule } from '@/api/server/schedules/getServerSchedules';
 
-export default ({ schedule }: { schedule: Schedule }) => (
+const ScheduleRow = ({ schedule }: { schedule: Schedule }) => (
     <>
         <div className={`flex-auto`}>
             <div className='flex flex-row flex-none align-middle items-center gap-6'>
@@ -29,3 +29,5 @@ export default ({ schedule }: { schedule: Schedule }) => (
         </div>
     </>
 );
+
+export default ScheduleRow;
diff --git a/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx b/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
index 5b0846aee..d76423cbb 100644
--- a/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
+++ b/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
@@ -42,7 +42,7 @@ const getActionDetails = (action: string): [string, IconDefinition, boolean?] =>
     }
 };
 
-export default ({ schedule, task }: Props) => {
+const ScheduleTaskRow = ({ schedule, task }: Props) => {
     const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
     const { clearFlashes, addError } = useFlash();
     const [visible, setVisible] = useState(false);
@@ -147,3 +147,5 @@ export default ({ schedule, task }: Props) => {
         </ItemContainer>
     );
 };
+
+export default ScheduleTaskRow;
diff --git a/resources/scripts/components/server/settings/ReinstallServerBox.tsx b/resources/scripts/components/server/settings/ReinstallServerBox.tsx
index 41c291c82..f5643f4ef 100644
--- a/resources/scripts/components/server/settings/ReinstallServerBox.tsx
+++ b/resources/scripts/components/server/settings/ReinstallServerBox.tsx
@@ -11,7 +11,7 @@ import reinstallServer from '@/api/server/reinstallServer';
 import { ApplicationStore } from '@/state';
 import { ServerContext } from '@/state/server';
 
-export default () => {
+const ReinstallServerBox = () => {
     const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
     const [modalVisible, setModalVisible] = useState(false);
     const { addFlash, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
@@ -66,3 +66,5 @@ export default () => {
         </TitledGreyBox>
     );
 };
+
+export default ReinstallServerBox;
diff --git a/resources/scripts/components/server/settings/RenameServerBox.tsx b/resources/scripts/components/server/settings/RenameServerBox.tsx
index 0858399a9..977760324 100644
--- a/resources/scripts/components/server/settings/RenameServerBox.tsx
+++ b/resources/scripts/components/server/settings/RenameServerBox.tsx
@@ -18,7 +18,7 @@ interface Values {
     description: string;
 }
 
-const RenameServerBox = () => {
+const RenameServerForm = () => {
     return (
         <TitledGreyBox title={'Server Details'}>
             <Form className='flex flex-col gap-4'>
@@ -32,7 +32,7 @@ const RenameServerBox = () => {
     );
 };
 
-export default () => {
+const RenameServerBox = () => {
     const server = ServerContext.useStoreState((state) => state.server.data!);
     const setServer = ServerContext.useStoreActions((actions) => actions.server.setServer);
     const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
@@ -61,7 +61,9 @@ export default () => {
                 description: string().nullable(),
             })}
         >
-            <RenameServerBox />
+            <RenameServerForm />
         </Formik>
     );
 };
+
+export default RenameServerBox;
diff --git a/resources/scripts/components/server/settings/SettingsContainer.tsx b/resources/scripts/components/server/settings/SettingsContainer.tsx
index be6e31b83..37e146a5e 100644
--- a/resources/scripts/components/server/settings/SettingsContainer.tsx
+++ b/resources/scripts/components/server/settings/SettingsContainer.tsx
@@ -17,7 +17,7 @@ import { ServerContext } from '@/state/server';
 
 import RenameServerBox from './RenameServerBox';
 
-export default () => {
+const SettingsContainer = () => {
     const username = useStoreState((state) => state.user.data!.username);
     const id = ServerContext.useStoreState((state) => state.server.data!.id);
     const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
@@ -88,3 +88,5 @@ export default () => {
         </ServerContentBlock>
     );
 };
+
+export default SettingsContainer;
diff --git a/resources/scripts/components/server/users/AddSubuserButton.tsx b/resources/scripts/components/server/users/AddSubuserButton.tsx
index b36773892..b659a5c1b 100644
--- a/resources/scripts/components/server/users/AddSubuserButton.tsx
+++ b/resources/scripts/components/server/users/AddSubuserButton.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import EditSubuserModal from '@/components/server/users/EditSubuserModal';
 
-export default () => {
+const AddSubuserButton = () => {
     const [visible, setVisible] = useState(false);
 
     return (
@@ -21,3 +21,5 @@ export default () => {
         </>
     );
 };
+
+export default AddSubuserButton;
diff --git a/resources/scripts/components/server/users/PermissionTitleBox.tsx b/resources/scripts/components/server/users/PermissionTitleBox.tsx
index 72d9b3fc9..b74d407bd 100644
--- a/resources/scripts/components/server/users/PermissionTitleBox.tsx
+++ b/resources/scripts/components/server/users/PermissionTitleBox.tsx
@@ -48,4 +48,6 @@ const PermissionTitleBox: React.FC<Props> = memo(({ isEditable, title, permissio
     );
 }, isEqual);
 
+PermissionTitleBox.displayName = 'PermissionTitleBox';
+
 export default PermissionTitleBox;
diff --git a/resources/scripts/components/server/users/RemoveSubuserButton.tsx b/resources/scripts/components/server/users/RemoveSubuserButton.tsx
index e87870462..58bd8811c 100644
--- a/resources/scripts/components/server/users/RemoveSubuserButton.tsx
+++ b/resources/scripts/components/server/users/RemoveSubuserButton.tsx
@@ -12,7 +12,7 @@ import { ApplicationStore } from '@/state';
 import { ServerContext } from '@/state/server';
 import { Subuser } from '@/state/server/subusers';
 
-export default ({ subuser }: { subuser: Subuser }) => {
+const RemoveSubuserButton = ({ subuser }: { subuser: Subuser }) => {
     const [loading, setLoading] = useState(false);
     const [showConfirmation, setShowConfirmation] = useState(false);
 
@@ -60,3 +60,5 @@ export default ({ subuser }: { subuser: Subuser }) => {
         </>
     );
 };
+
+export default RemoveSubuserButton;
diff --git a/resources/scripts/components/server/users/UserRow.tsx b/resources/scripts/components/server/users/UserRow.tsx
index deeeb6100..b580be567 100644
--- a/resources/scripts/components/server/users/UserRow.tsx
+++ b/resources/scripts/components/server/users/UserRow.tsx
@@ -14,7 +14,7 @@ interface Props {
     subuser: Subuser;
 }
 
-export default ({ subuser }: Props) => {
+const UserRow = ({ subuser }: Props) => {
     const uuid = useStoreState((state) => state.user!.data!.uuid);
     const [visible, setVisible] = useState(false);
 
@@ -62,3 +62,5 @@ export default ({ subuser }: Props) => {
         </PageListItem>
     );
 };
+
+export default UserRow;
diff --git a/resources/scripts/components/server/users/UsersContainer.tsx b/resources/scripts/components/server/users/UsersContainer.tsx
index 1806fe55c..a62ef3921 100644
--- a/resources/scripts/components/server/users/UsersContainer.tsx
+++ b/resources/scripts/components/server/users/UsersContainer.tsx
@@ -16,7 +16,7 @@ import getServerSubusers from '@/api/server/users/getServerSubusers';
 import { ApplicationStore } from '@/state';
 import { ServerContext } from '@/state/server';
 
-export default () => {
+const UsersContainer = () => {
     const [loading, setLoading] = useState(true);
 
     const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
@@ -77,3 +77,5 @@ export default () => {
         </ServerContentBlock>
     );
 };
+
+export default UsersContainer;
diff --git a/resources/scripts/hoc/asDialog.tsx b/resources/scripts/hoc/asDialog.tsx
index 885f05c84..474819ee6 100644
--- a/resources/scripts/hoc/asDialog.tsx
+++ b/resources/scripts/hoc/asDialog.tsx
@@ -6,7 +6,7 @@ function asDialog(
     initialProps?: WrapperProps,
 ): <P extends object>(C: React.ComponentType<P>) => React.FunctionComponent<P & DialogProps> {
     return function (Component) {
-        return function ({ open, onClose, ...rest }) {
+        const WrappedComponent = function ({ open, onClose, ...rest }) {
             const [props, setProps] = useState<WrapperProps>(initialProps || {});
 
             return (
@@ -17,6 +17,10 @@ function asDialog(
                 </DialogWrapperContext.Provider>
             );
         };
+
+        WrappedComponent.displayName = `asDialog(${Component.displayName || Component.name || 'Component'})`;
+
+        return WrappedComponent;
     };
 }
 
diff --git a/resources/scripts/routers/AuthenticationRouter.tsx b/resources/scripts/routers/AuthenticationRouter.tsx
index 8304ecd4c..da8bf6c7a 100644
--- a/resources/scripts/routers/AuthenticationRouter.tsx
+++ b/resources/scripts/routers/AuthenticationRouter.tsx
@@ -6,7 +6,7 @@ import LoginContainer from '@/components/auth/LoginContainer';
 import ResetPasswordContainer from '@/components/auth/ResetPasswordContainer';
 import { NotFound } from '@/components/elements/ScreenBlock';
 
-export default () => {
+const AuthenticationRouter = () => {
     return (
         <div
             style={{
@@ -24,3 +24,5 @@ export default () => {
         </div>
     );
 };
+
+export default AuthenticationRouter;
diff --git a/resources/scripts/routers/DashboardRouter.tsx b/resources/scripts/routers/DashboardRouter.tsx
index b1241b463..d281b1df8 100644
--- a/resources/scripts/routers/DashboardRouter.tsx
+++ b/resources/scripts/routers/DashboardRouter.tsx
@@ -24,7 +24,7 @@ import HugeIconsHamburger from '@/components/elements/hugeicons/hamburger';
 
 import http from '@/api/http';
 
-export default () => {
+const DashboardRouter = () => {
     const location = useLocation();
     const rootAdmin = useStoreState((state) => state.user.data!.rootAdmin);
 
@@ -318,3 +318,5 @@ export default () => {
         </Fragment>
     );
 };
+
+export default DashboardRouter;
diff --git a/resources/scripts/routers/ServerRouter.tsx b/resources/scripts/routers/ServerRouter.tsx
index 3e6d95319..977aae126 100644
--- a/resources/scripts/routers/ServerRouter.tsx
+++ b/resources/scripts/routers/ServerRouter.tsx
@@ -78,7 +78,7 @@ interface Nest {
  * @class
  */
 
-export default () => {
+const ServerRouter = () => {
     const params = useParams<'id'>();
     const location = useLocation();
 
@@ -628,3 +628,5 @@ export default () => {
         </Fragment>
     );
 };
+
+export default ServerRouter;