diff --git a/resources/scripts/api/server/createServerDatabase.ts b/resources/scripts/api/server/databases/createServerDatabase.ts
similarity index 94%
rename from resources/scripts/api/server/createServerDatabase.ts
rename to resources/scripts/api/server/databases/createServerDatabase.ts
index 90103337c..cf036f91f 100644
--- a/resources/scripts/api/server/createServerDatabase.ts
+++ b/resources/scripts/api/server/databases/createServerDatabase.ts
@@ -1,4 +1,4 @@
-import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/getServerDatabases';
+import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/databases/getServerDatabases';
 import http from '@/api/http';
 
 export default (uuid: string, data: { connectionsFrom: string; databaseName: string }): Promise<ServerDatabase> => {
diff --git a/resources/scripts/api/server/deleteServerDatabase.ts b/resources/scripts/api/server/databases/deleteServerDatabase.ts
similarity index 100%
rename from resources/scripts/api/server/deleteServerDatabase.ts
rename to resources/scripts/api/server/databases/deleteServerDatabase.ts
diff --git a/resources/scripts/api/server/getServerDatabases.ts b/resources/scripts/api/server/databases/getServerDatabases.ts
similarity index 100%
rename from resources/scripts/api/server/getServerDatabases.ts
rename to resources/scripts/api/server/databases/getServerDatabases.ts
diff --git a/resources/scripts/api/server/rotateDatabasePassword.ts b/resources/scripts/api/server/databases/rotateDatabasePassword.ts
similarity index 92%
rename from resources/scripts/api/server/rotateDatabasePassword.ts
rename to resources/scripts/api/server/databases/rotateDatabasePassword.ts
index c6c9e8aef..0e0619a84 100644
--- a/resources/scripts/api/server/rotateDatabasePassword.ts
+++ b/resources/scripts/api/server/databases/rotateDatabasePassword.ts
@@ -1,4 +1,4 @@
-import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/getServerDatabases';
+import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/databases/getServerDatabases';
 import http from '@/api/http';
 
 export default (uuid: string, database: string): Promise<ServerDatabase> => {
diff --git a/resources/scripts/components/elements/CopyOnClick.tsx b/resources/scripts/components/elements/CopyOnClick.tsx
index f1914ed57..f7e2d4957 100644
--- a/resources/scripts/components/elements/CopyOnClick.tsx
+++ b/resources/scripts/components/elements/CopyOnClick.tsx
@@ -19,7 +19,7 @@ const Toast = styled.div`
     }
 `;
 
-const CopyOnClick: React.FC<{ text: string }> = ({ text, children }) => {
+const CopyOnClick: React.FC<{ text: any }> = ({ text, children }) => {
     const [ copied, setCopied ] = useState(false);
 
     useEffect(() => {
diff --git a/resources/scripts/components/server/backups/BackupContainer.tsx b/resources/scripts/components/server/backups/BackupContainer.tsx
index b3bfdc945..493c059a5 100644
--- a/resources/scripts/components/server/backups/BackupContainer.tsx
+++ b/resources/scripts/components/server/backups/BackupContainer.tsx
@@ -34,7 +34,7 @@ export default () => {
         <ServerContentBlock title={'Backups'}>
             <FlashMessageRender byKey={'backups'} css={tw`mb-4`}/>
             {!backups.items.length ?
-                <p css={tw`text-center text-sm text-neutral-400`}>
+                <p css={tw`text-center text-sm text-neutral-300`}>
                     There are no backups stored for this server.
                 </p>
                 :
@@ -47,21 +47,21 @@ export default () => {
                 </div>
             }
             {backupLimit === 0 &&
-            <p css={tw`text-center text-sm text-neutral-400`}>
+            <p css={tw`text-center text-sm text-neutral-300`}>
                 Backups cannot be created for this server.
             </p>
             }
             <Can action={'backup.create'}>
-                {(backupLimit > 0 && backups.items.length > 0) &&
-                <p css={tw`text-center text-xs text-neutral-400 mt-2`}>
-                    {backups.items.length} of {backupLimit} backups have been created for this server.
-                </p>
-                }
-                {backupLimit > 0 && backupLimit !== backups.items.length &&
-                <div css={tw`mt-6 flex justify-end`}>
-                    <CreateBackupButton/>
+                <div css={tw`mt-6 sm:flex items-center justify-end`}>
+                    {(backupLimit > 0 && backups.items.length > 0) &&
+                    <p css={tw`text-sm text-neutral-300 mb-4 sm:mr-6 sm:mb-0`}>
+                        {backups.items.length} of {backupLimit} backups have been created for this server.
+                    </p>
+                    }
+                    {backupLimit > 0 && backupLimit !== backups.items.length &&
+                        <CreateBackupButton css={tw`w-full sm:w-auto`}/>
+                    }
                 </div>
-                }
             </Can>
         </ServerContentBlock>
     );
diff --git a/resources/scripts/components/server/databases/CreateDatabaseButton.tsx b/resources/scripts/components/server/databases/CreateDatabaseButton.tsx
index 044587e6e..2ce843365 100644
--- a/resources/scripts/components/server/databases/CreateDatabaseButton.tsx
+++ b/resources/scripts/components/server/databases/CreateDatabaseButton.tsx
@@ -3,7 +3,7 @@ import Modal from '@/components/elements/Modal';
 import { Form, Formik, FormikHelpers } from 'formik';
 import Field from '@/components/elements/Field';
 import { object, string } from 'yup';
-import createServerDatabase from '@/api/server/createServerDatabase';
+import createServerDatabase from '@/api/server/databases/createServerDatabase';
 import { ServerContext } from '@/state/server';
 import { httpErrorToHuman } from '@/api/http';
 import FlashMessageRender from '@/components/FlashMessageRender';
diff --git a/resources/scripts/components/server/databases/DatabaseRow.tsx b/resources/scripts/components/server/databases/DatabaseRow.tsx
index 1175aef48..3eeaa981e 100644
--- a/resources/scripts/components/server/databases/DatabaseRow.tsx
+++ b/resources/scripts/components/server/databases/DatabaseRow.tsx
@@ -7,17 +7,18 @@ import Field from '@/components/elements/Field';
 import { object, string } from 'yup';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { ServerContext } from '@/state/server';
-import deleteServerDatabase from '@/api/server/deleteServerDatabase';
+import deleteServerDatabase from '@/api/server/databases/deleteServerDatabase';
 import { httpErrorToHuman } from '@/api/http';
 import RotatePasswordButton from '@/components/server/databases/RotatePasswordButton';
 import Can from '@/components/elements/Can';
-import { ServerDatabase } from '@/api/server/getServerDatabases';
+import { ServerDatabase } from '@/api/server/databases/getServerDatabases';
 import useFlash from '@/plugins/useFlash';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
 import Label from '@/components/elements/Label';
 import Input from '@/components/elements/Input';
 import GreyRowBox from '@/components/elements/GreyRowBox';
+import CopyOnClick from '@/components/elements/CopyOnClick';
 
 interface Props {
     database: ServerDatabase;
@@ -113,7 +114,7 @@ export default ({ database, className }: Props) => {
                 <h3 css={tw`mb-6`}>Database connection details</h3>
                 <div>
                     <Label>Endpoint</Label>
-                    <Input type={'text'} readOnly value={database.connectionString} />
+                    <CopyOnClick text={database.connectionString}><Input type={'text'} readOnly value={database.connectionString} /></CopyOnClick>
                 </div>
                 <div css={tw`mt-6`}>
                     <Label>Connections from</Label>
@@ -121,21 +122,23 @@ export default ({ database, className }: Props) => {
                 </div>
                 <div css={tw`mt-6`}>
                     <Label>Username</Label>
-                    <Input type={'text'} readOnly value={database.username} />
+                    <CopyOnClick text={database.username}><Input type={'text'} readOnly value={database.username} /></CopyOnClick>
                 </div>
                 <Can action={'database.view_password'}>
                     <div css={tw`mt-6`}>
                         <Label>Password</Label>
-                        <Input type={'text'} readOnly value={database.password}/>
+                        <CopyOnClick text={database.password?.valueOf}><Input type={'text'} readOnly value={database.password}/></CopyOnClick>
                     </div>
                 </Can>
                 <div css={tw`mt-6`}>
                     <Label>JBDC Connection String</Label>
-                    <Input
-                        type={'text'}
-                        readOnly
-                        value={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`}
-                    />
+                    <CopyOnClick text={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`}>
+                        <Input
+                            type={'text'}
+                            readOnly
+                            value={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`}
+                        />
+                    </CopyOnClick>
                 </div>
                 <div css={tw`mt-6 text-right`}>
                     <Can action={'database.update'}>
@@ -151,10 +154,10 @@ export default ({ database, className }: Props) => {
                     <FontAwesomeIcon icon={faDatabase} fixedWidth/>
                 </div>
                 <div css={tw`flex-1 ml-4`}>
-                    <p css={tw`text-lg`}>{database.name}</p>
+                    <CopyOnClick text={database.name}><p css={tw`text-lg`}>{database.name}</p></CopyOnClick>
                 </div>
                 <div css={tw`ml-8 text-center hidden md:block`}>
-                    <p css={tw`text-sm`}>{database.connectionString}</p>
+                    <CopyOnClick text={database.connectionString}><p css={tw`text-sm`}>{database.connectionString}</p></CopyOnClick>
                     <p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Endpoint</p>
                 </div>
                 <div css={tw`ml-8 text-center hidden md:block`}>
@@ -162,7 +165,7 @@ export default ({ database, className }: Props) => {
                     <p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Connections from</p>
                 </div>
                 <div css={tw`ml-8 text-center hidden md:block`}>
-                    <p css={tw`text-sm`}>{database.username}</p>
+                    <CopyOnClick text={database.username}><p css={tw`text-sm`}>{database.username}</p></CopyOnClick>
                     <p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Username</p>
                 </div>
                 <div css={tw`ml-8`}>
diff --git a/resources/scripts/components/server/databases/DatabasesContainer.tsx b/resources/scripts/components/server/databases/DatabasesContainer.tsx
index 8ee4b3129..b61d8ed09 100644
--- a/resources/scripts/components/server/databases/DatabasesContainer.tsx
+++ b/resources/scripts/components/server/databases/DatabasesContainer.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import getServerDatabases from '@/api/server/getServerDatabases';
+import getServerDatabases from '@/api/server/databases/getServerDatabases';
 import { ServerContext } from '@/state/server';
 import { httpErrorToHuman } from '@/api/http';
 import FlashMessageRender from '@/components/FlashMessageRender';
@@ -62,17 +62,17 @@ export default () => {
                             </p>
                         }
                         <Can action={'database.create'}>
-                            {(databaseLimit > 0 && databases.length > 0) &&
-                            <p css={tw`text-center text-xs text-neutral-400 mt-2`}>
-                                {databases.length} of {databaseLimit} databases have been allocated to this
-                                server.
-                            </p>
-                            }
-                            {databaseLimit > 0 && databaseLimit !== databases.length &&
-                            <div css={tw`mt-6 flex justify-end`}>
-                                <CreateDatabaseButton/>
+                            <div css={tw`mt-6 sm:flex items-center justify-end`}>
+                                {(databaseLimit > 0 && databases.length > 0) &&
+                                <p css={tw`text-sm text-neutral-300 mb-4 sm:mr-6 sm:mb-0`}>
+                                    {databases.length} of {databaseLimit} databases have been allocated to this
+                                    server.
+                                </p>
+                                }
+                                {databaseLimit > 0 && databaseLimit !== databases.length &&
+                                    <CreateDatabaseButton css={tw`w-full sm:w-auto`}/>
+                                }
                             </div>
-                            }
                         </Can>
                     </>
                 </Fade>
diff --git a/resources/scripts/components/server/databases/RotatePasswordButton.tsx b/resources/scripts/components/server/databases/RotatePasswordButton.tsx
index 41c116006..68b1e532d 100644
--- a/resources/scripts/components/server/databases/RotatePasswordButton.tsx
+++ b/resources/scripts/components/server/databases/RotatePasswordButton.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import rotateDatabasePassword from '@/api/server/rotateDatabasePassword';
+import rotateDatabasePassword from '@/api/server/databases/rotateDatabasePassword';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { ServerContext } from '@/state/server';
-import { ServerDatabase } from '@/api/server/getServerDatabases';
+import { ServerDatabase } from '@/api/server/databases/getServerDatabases';
 import { httpErrorToHuman } from '@/api/http';
 import Button from '@/components/elements/Button';
 import tw from 'twin.macro';
diff --git a/resources/scripts/components/server/schedules/ScheduleContainer.tsx b/resources/scripts/components/server/schedules/ScheduleContainer.tsx
index 54a63a328..04c302917 100644
--- a/resources/scripts/components/server/schedules/ScheduleContainer.tsx
+++ b/resources/scripts/components/server/schedules/ScheduleContainer.tsx
@@ -43,7 +43,7 @@ export default ({ match, history }: RouteComponentProps) => {
                 <>
                     {
                         schedules.length === 0 ?
-                            <p css={tw`text-sm text-center text-neutral-400`}>
+                            <p css={tw`text-sm text-center text-neutral-300`}>
                                 There are no schedules configured for this server.
                             </p>
                             :
diff --git a/resources/scripts/components/server/users/UsersContainer.tsx b/resources/scripts/components/server/users/UsersContainer.tsx
index f29dc9202..f5589f4a5 100644
--- a/resources/scripts/components/server/users/UsersContainer.tsx
+++ b/resources/scripts/components/server/users/UsersContainer.tsx
@@ -51,7 +51,7 @@ export default () => {
         <ServerContentBlock title={'Subusers'}>
             <FlashMessageRender byKey={'users'} css={tw`mb-4`}/>
             {!subusers.length ?
-                <p css={tw`text-center text-sm text-neutral-400`}>
+                <p css={tw`text-center text-sm text-neutral-300`}>
                     It looks like you don&apos;t have any subusers.
                 </p>
                 :
diff --git a/resources/scripts/state/server/databases.ts b/resources/scripts/state/server/databases.ts
index 7fa697dbd..deee25ffb 100644
--- a/resources/scripts/state/server/databases.ts
+++ b/resources/scripts/state/server/databases.ts
@@ -1,5 +1,5 @@
 import { action, Action } from 'easy-peasy';
-import { ServerDatabase } from '@/api/server/getServerDatabases';
+import { ServerDatabase } from '@/api/server/databases/getServerDatabases';
 
 export interface ServerDatabaseStore {
     data: ServerDatabase[];