diff --git a/src/components/misc/profile-picture-upload.tsx b/src/components/misc/profile-picture-upload.tsx
index 9ddf2a7..41b64e0 100644
--- a/src/components/misc/profile-picture-upload.tsx
+++ b/src/components/misc/profile-picture-upload.tsx
@@ -5,13 +5,18 @@ import { User } from 'lucide-react';
 
 import { Input } from '../ui/input';
 
-export default function ProfilePictureUpload() {
+export default function ProfilePictureUpload({
+  className,
+}: {
+  className?: string;
+}) {
   const { data } = useGetApiUserMe();
   return (
     <>
       <div className='grid grid-cols-1 gap-1'>
         <span className='relative flex space-6'>
           <Input
+            className={className}
             id='pic-upload'
             type='file'
             defaultValue={data?.data.user.image ?? undefined}
diff --git a/src/components/misc/settings-page.tsx b/src/components/misc/settings-page.tsx
index 33a083b..1093cd3 100644
--- a/src/components/misc/settings-page.tsx
+++ b/src/components/misc/settings-page.tsx
@@ -49,26 +49,22 @@ export default function SettingsPage() {
               <CardContent className='space-y-6 mt-2'>
                 <GroupWrapper title='General Settings'>
                   <div className='space-y-4'>
-                    <GroupWrapper>
-                      <div className='flex items-center justify-evenly sm:flex-row flex-col gap-6'>
-                        <div>
-                          <LabeledInput
-                            label='First Name'
-                            type='text'
-                            placeholder='First Name'
-                            defaultValue={data?.data.user.first_name ?? ''}
-                          ></LabeledInput>
-                        </div>
-                        <div>
-                          <LabeledInput
-                            label='Last Name'
-                            type='text'
-                            placeholder='Last Name'
-                            defaultValue={data?.data.user.last_name ?? ''}
-                          ></LabeledInput>
-                        </div>
-                      </div>
-                    </GroupWrapper>
+                    <div>
+                      <LabeledInput
+                        label='First Name'
+                        type='text'
+                        placeholder='First Name'
+                        defaultValue={data?.data.user.first_name ?? ''}
+                      ></LabeledInput>
+                    </div>
+                    <div>
+                      <LabeledInput
+                        label='Last Name'
+                        type='text'
+                        placeholder='Last Name'
+                        defaultValue={data?.data.user.last_name ?? ''}
+                      ></LabeledInput>
+                    </div>
                     <div className='space-y-2'>
                       <LabeledInput
                         label='Display Name'
@@ -121,7 +117,7 @@ export default function SettingsPage() {
                 </GroupWrapper>
                 <GroupWrapper title='Profile Picture'>
                   <div className='space-y-2 grid grid-cols-[1fr_auto]'>
-                    <ProfilePictureUpload />
+                    <ProfilePictureUpload className='file:border file:rounded-xl' />
                   </div>
                 </GroupWrapper>
                 <GroupWrapper title='Regional Settings'>
@@ -151,7 +147,7 @@ export default function SettingsPage() {
                   </div>
                 </GroupWrapper>
                 <div className='flex items-center justify-evenly sm:flex-row flex-col gap-6'>
-                  <Button variant='secondary'>Delete Account</Button>
+                  <Button variant='destructive'>Delete Account</Button>
                   <span className='text-sm text-muted-foreground pt-1'>
                     Permanently delete your account and all associated data.
                   </span>