diff --git a/resources/scripts/components/elements/CopyOnClick.tsx b/resources/scripts/components/elements/CopyOnClick.tsx
index 97521980d..42545f61c 100644
--- a/resources/scripts/components/elements/CopyOnClick.tsx
+++ b/resources/scripts/components/elements/CopyOnClick.tsx
@@ -10,15 +10,20 @@ interface CopyOnClickProps {
     children: React.ReactNode;
 }
 
-const CopyOnClick = ({ text, children }: CopyOnClickProps) => {
+const CopyOnClick = ({ text, children, showInNotification }: CopyOnClickProps) => {
     const [copied, setCopied] = useState(false);
-    const length = 80;
-    const stringText = String(text);
-    const truncatedText = stringText && stringText.length > length ? `${stringText.substring(0, length - 3)}...` : text;
+    let truncatedText;
+    if (showInNotification == false) {
+        truncatedText = '';
+    } else {
+        const length = 80;
+        const stringText = String(text);
+        truncatedText = stringText.length > length ? `"${stringText.substring(0, length - 3)}..."` : `"${stringText}"`;
+    }
 
     useEffect(() => {
         if (!copied) return;
-        toast(`Copied "${truncatedText}" to clipboard`);
+        toast(`Copied ${truncatedText} to clipboard.`);
 
         const timeout = setTimeout(() => {
             setCopied(false);
diff --git a/resources/scripts/components/elements/Input.tsx b/resources/scripts/components/elements/Input.tsx
index 3d01eb90e..a610384c0 100644
--- a/resources/scripts/components/elements/Input.tsx
+++ b/resources/scripts/components/elements/Input.tsx
@@ -39,6 +39,15 @@ const inputStyle = css<Props>`
 
     &:disabled {
     }
+
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-radius: 0.5rem;
+    outline: none;
+    background-color: rgba(255, 255, 255, 0.09); /* Converted the hex color with alpha to rgba */
+    font-size: 0.875rem; /* 14px */
 `;
 
 const Input = styled.input<Props>`
diff --git a/resources/scripts/components/elements/button/Button.tsx b/resources/scripts/components/elements/button/Button.tsx
index 6f40dd190..38ce69983 100644
--- a/resources/scripts/components/elements/button/Button.tsx
+++ b/resources/scripts/components/elements/button/Button.tsx
@@ -30,12 +30,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 );
 
 const TextButton = forwardRef<HTMLButtonElement, ButtonProps>(({ className, ...props }, ref) => (
-    // @ts-expect-error not sure how to get this correct
     <Button ref={ref} className={clsx(styles.text, className)} {...props} />
 ));
 
 const DangerButton = forwardRef<HTMLButtonElement, ButtonProps>(({ className, ...props }, ref) => (
-    // @ts-expect-error not sure how to get this correct
     <Button ref={ref} className={clsx(styles.danger, className)} {...props} />
 ));
 
diff --git a/resources/scripts/components/server/databases/DatabaseRow.tsx b/resources/scripts/components/server/databases/DatabaseRow.tsx
index 02879007a..7044776b9 100644
--- a/resources/scripts/components/server/databases/DatabaseRow.tsx
+++ b/resources/scripts/components/server/databases/DatabaseRow.tsx
@@ -1,15 +1,15 @@
 import { Form, Formik, FormikHelpers } from 'formik';
 import { useState } from 'react';
+import styled from 'styled-components';
 import { object, string } from 'yup';
 
 import FlashMessageRender from '@/components/FlashMessageRender';
-import Button from '@/components/elements/Button';
 import Can from '@/components/elements/Can';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 import Field from '@/components/elements/Field';
 import Input from '@/components/elements/Input';
-import Label from '@/components/elements/Label';
 import Modal from '@/components/elements/Modal';
+import { Button } from '@/components/elements/button/index';
 import RotatePasswordButton from '@/components/server/databases/RotatePasswordButton';
 
 import { httpErrorToHuman } from '@/api/http';
@@ -20,6 +20,13 @@ import { ServerContext } from '@/state/server';
 
 import useFlash from '@/plugins/useFlash';
 
+const Label = styled.label`
+    display: inline-block;
+    color: #ffffff77;
+    font-size: 0.875rem;
+    padding-bottom: 0.5rem;
+`;
+
 interface Props {
     database: ServerDatabase;
     className?: string;
@@ -73,70 +80,81 @@ export default ({ database, className }: Props) => {
                         title='Confirm database deletion'
                     >
                         <FlashMessageRender byKey={'database:delete'} />
-                        <p className={`text-sm`}>
-                            Deleting a database is a permanent action, it cannot be undone. This will permanently delete
-                            the <strong>{database.name}</strong> database and remove all associated data.
-                        </p>
-                        <Form className={`m-0 mt-6`}>
-                            <Field
-                                type={'text'}
-                                id={'confirm_name'}
-                                name={'confirm'}
-                                label={'Confirm Database Name'}
-                                description={'Enter the database name to confirm deletion.'}
-                            />
-                            <div className={`mt-6 text-right`}>
-                                <Button type={'button'} isSecondary onClick={() => setVisible(false)}>
-                                    Cancel
-                                </Button>
-                                <Button type={'submit'} color={'red'} disabled={!isValid}>
+                        <div className='flex flex-col'>
+                            <p>
+                                Deleting a database is a permanent action, it cannot be undone. This will permanently
+                                delete the <strong>{database.name}</strong> database and remove all its data.
+                            </p>
+                            <Form className='mt-6'>
+                                <Field
+                                    type={'text'}
+                                    id={'confirm_name'}
+                                    name={'confirm'}
+                                    label={'Confirm Database Name'}
+                                    description={'Enter the database name to confirm deletion.'}
+                                />
+                                <Button type={'submit'} color={'red'} className='min-w-full my-6' disabled={!isValid}>
                                     Delete Database
                                 </Button>
-                            </div>
-                        </Form>
+                            </Form>
+                        </div>
                     </Modal>
                 )}
             </Formik>
-            <Modal visible={connectionVisible} onDismissed={() => setConnectionVisible(false)}>
+            <Modal
+                visible={connectionVisible}
+                title='Database connection details'
+                closeButton={true}
+                onDismissed={() => setConnectionVisible(false)}
+            >
                 <FlashMessageRender byKey={'database-connection-modal'} />
-                <h3 className={`mb-6 text-2xl`}>Database connection details</h3>
-                <div>
-                    <Label>Endpoint</Label>
-                    <CopyOnClick text={database.connectionString}>
-                        <Input type={'text'} readOnly value={database.connectionString} />
-                    </CopyOnClick>
-                </div>
-                <div className={`mt-6`}>
-                    <Label>Connections from</Label>
-                    <Input type={'text'} readOnly value={database.allowConnectionsFrom} />
-                </div>
-                <div className={`mt-6`}>
-                    <Label>Username</Label>
-                    <CopyOnClick text={database.username}>
-                        <Input type={'text'} readOnly value={database.username} />
-                    </CopyOnClick>
-                </div>
-                <Can action={'database.view_password'}>
-                    <div className={`mt-6`}>
-                        <Label>Password</Label>
-                        <CopyOnClick text={database.password} showInNotification={false}>
-                            <Input type={'text'} readOnly value={database.password} />
+                <div className='flex flex-col min-w-full gap-4'>
+                    <div className='grid gap-4 grid-cols-2 min-w-full'>
+                        <div className='flex flex-col'>
+                            <Label>Endpoint</Label>
+                            <CopyOnClick text={database.connectionString}>
+                                <Input type={'text'} readOnly value={database.connectionString} />
+                            </CopyOnClick>
+                        </div>
+                        <div className='flex flex-col'>
+                            <Label>Connections from</Label>
+                            <CopyOnClick text={database.allowConnectionsFrom}>
+                                <Input type={'text'} readOnly value={database.allowConnectionsFrom} />
+                            </CopyOnClick>
+                        </div>
+                        <div className='flex flex-col'>
+                            <Label>Username</Label>
+                            <CopyOnClick text={database.username}>
+                                <Input type={'text'} readOnly value={database.username} />
+                            </CopyOnClick>
+                        </div>
+                        <Can action={'database.view_password'}>
+                            <div className='flex flex-col'>
+                                <Label>Password</Label>
+                                <div className='flex flex-row min-w-full gap-2'>
+                                    <CopyOnClick text={database.password} showInNotification={false}>
+                                        <Input
+                                            type={'password'}
+                                            readOnly
+                                            value={database.password}
+                                            className='flex-auto'
+                                        />
+                                    </CopyOnClick>
+                                    <Can action={'database.update'}>
+                                        <RotatePasswordButton databaseId={database.id} onUpdate={appendDatabase} />
+                                    </Can>
+                                </div>
+                            </div>
+                        </Can>
+                    </div>
+                    <div className='flex flex-col'>
+                        <div className='flex flex-row gap-2 align-middle items-center'>
+                            <Label>JDBC Connection String</Label>
+                        </div>
+                        <CopyOnClick text={jdbcConnectionString} showInNotification={false}>
+                            <Input type={'password'} readOnly value={jdbcConnectionString} />
                         </CopyOnClick>
                     </div>
-                </Can>
-                <div className={`mt-6`}>
-                    <Label>JDBC Connection String</Label>
-                    <CopyOnClick text={jdbcConnectionString} showInNotification={false}>
-                        <Input type={'text'} readOnly value={jdbcConnectionString} />
-                    </CopyOnClick>
-                </div>
-                <div className={`mt-6 text-right`}>
-                    <Can action={'database.update'}>
-                        <RotatePasswordButton databaseId={database.id} onUpdate={appendDatabase} />
-                    </Can>
-                    <Button isSecondary onClick={() => setConnectionVisible(false)}>
-                        Close
-                    </Button>
                 </div>
             </Modal>
             <div className={className}>
diff --git a/resources/scripts/components/server/databases/RotatePasswordButton.tsx b/resources/scripts/components/server/databases/RotatePasswordButton.tsx
index 952ff40fe..521da768b 100644
--- a/resources/scripts/components/server/databases/RotatePasswordButton.tsx
+++ b/resources/scripts/components/server/databases/RotatePasswordButton.tsx
@@ -1,7 +1,10 @@
+import { faRotateRight } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { useState } from 'react';
 
-import Button from '@/components/elements/Button';
+import Spinner from '@/components/elements/Spinner';
+import { Button } from '@/components/elements/button/index';
 
 import { httpErrorToHuman } from '@/api/http';
 import { ServerDatabase } from '@/api/server/databases/getServerDatabases';
@@ -38,8 +41,11 @@ export default ({ databaseId, onUpdate }: { databaseId: string; onUpdate: (datab
     };
 
     return (
-        <Button isSecondary color={'primary'} onClick={rotate} isLoading={loading}>
-            Rotate Password
+        <Button onClick={rotate}>
+            <div className='flex justify-center items-center h-4 w-4'>
+                {!loading && <FontAwesomeIcon icon={faRotateRight}></FontAwesomeIcon>}
+                {loading && <Spinner size={'small'} />}
+            </div>
         </Button>
     );
 };
diff --git a/resources/scripts/components/server/schedules/NewTaskButton.tsx b/resources/scripts/components/server/schedules/NewTaskButton.tsx
index 7433abad9..d878759ba 100644
--- a/resources/scripts/components/server/schedules/NewTaskButton.tsx
+++ b/resources/scripts/components/server/schedules/NewTaskButton.tsx
@@ -1,10 +1,10 @@
+import clsx from 'clsx';
 import { useState } from 'react';
 
 import { Button } from '@/components/elements/button/index';
 import TaskDetailsModal from '@/components/server/schedules/TaskDetailsModal';
 
 import { Schedule } from '@/api/server/schedules/getServerSchedules';
-import clsx from 'clsx';
 
 interface Props {
     schedule: Schedule;
diff --git a/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx b/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
index 3de4f7437..2cd4c4517 100644
--- a/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
+++ b/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
@@ -100,7 +100,9 @@ export default () => {
                                         <span>N/A</span>
                                     )}
 
-                                    <span className={`ml-4 pl-4 border-l-4 border-neutral-600 py-px hidden sm:inline`} />
+                                    <span
+                                        className={`ml-4 pl-4 border-l-4 border-neutral-600 py-px hidden sm:inline`}
+                                    />
                                     <br className={`sm:hidden`} />
 
                                     <strong>Next run at:&nbsp;</strong>