diff --git a/app/(main)/components/PhotoUpload.module.css b/app/(main)/components/PhotoUpload.module.css
new file mode 100644
index 00000000..28c22203
--- /dev/null
+++ b/app/(main)/components/PhotoUpload.module.css
@@ -0,0 +1,99 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 1px dashed #cbd5e0;
+  background: #fff;
+  cursor: pointer;
+  transition:
+    border-color 0.2s ease,
+    background 0.2s ease;
+}
+
+.container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.container:hover {
+  border-color: #2d3748;
+  background: #edf2f7;
+}
+
+.container.hasPhoto {
+  border: none;
+}
+
+.container.dragging {
+  border-color: #2d3748;
+  background: #e2e8f0;
+  transform: scale(1.05);
+}
+
+.circle {
+  width: 12.5rem;
+  height: 12.5rem;
+  border-radius: 50%;
+}
+
+.rectangle {
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: 0.5rem;
+}
+
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  padding: 0.75rem;
+  text-align: center;
+  color: #000;
+  width: 100%;
+  height: 100%;
+}
+
+.placeholder .placeholderImage {
+  width: 2rem;
+  height: 2rem;
+}
+
+.removeButton {
+  position: absolute;
+  top: -1rem;
+  right: -1rem;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.2s ease;
+  background-color: #ffefef;
+  border-color: #c53030;
+  border: 1px solid;
+  color: #c53030;
+}
+
+.removeButton:hover {
+  background-color: #f1c9c9;
+}
+
+.removeButtonCircle {
+  top: 0.8rem;
+  right: 0.8rem;
+}
diff --git a/app/(main)/components/PhotoUpload.tsx b/app/(main)/components/PhotoUpload.tsx
index ef9ab79a..c71e9ab1 100644
--- a/app/(main)/components/PhotoUpload.tsx
+++ b/app/(main)/components/PhotoUpload.tsx
@@ -1,55 +1,133 @@
 'use client';
 
-import { forwardRef, useImperativeHandle, useRef } from 'react';
-import React from 'react';
-
-type FileUploaderProps = {
-  onFileSelect: (file: File) => void;
-  inputRef: React.RefObject<HTMLInputElement | null>;
-};
-
-const FileUploader = ({ onFileSelect, inputRef }: FileUploaderProps) => {
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      onFileSelect(file);
-    }
-  };
-
-  return (
-    <input
-      ref={inputRef}
-      type="file"
-      accept="image/*"
-      onChange={handleFileChange}
-    />
-  );
-};
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import Image from 'next/image';
+import defaultProfilePhoto from '@/public/image-placeholder.svg';
+import uploadPhotoIcon from '@/public/image-upload.svg';
+import styles from '@/app/(main)/components/PhotoUpload.module.css';
 
 type PhotoUploadProps = {
+  variant?: 'circle' | 'rectangle';
+  initialPhotoUrl?: string | null;
   onFileSelect?: (file: File) => void;
+  onRemove?: () => void;
+  previewUrl?: string | null;
+  isPendingDelete?: boolean;
+  id?: string;
 };
 
 const PhotoUpload = forwardRef<{ resetFile: () => void }, PhotoUploadProps>(
-  ({ onFileSelect }, ref) => {
+  (
+    {
+      variant = 'rectangle',
+      initialPhotoUrl,
+      onFileSelect,
+      onRemove,
+      previewUrl,
+      isPendingDelete,
+      id = 'photo-upload-input',
+    },
+    ref,
+  ) => {
     const inputRef = useRef<HTMLInputElement>(null);
+    const [isDragging, setIsDragging] = useState(false);
 
     useImperativeHandle(ref, () => ({
       resetFile: () => {
-        if (inputRef.current) {
-          inputRef.current.value = '';
-        }
+        if (inputRef.current) inputRef.current.value = '';
       },
     }));
 
-    const handleFileUpload = (file: File) => {
-      onFileSelect?.(file);
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) onFileSelect?.(file);
+    };
+
+    const handleDragOver = (e: React.DragEvent) => {
+      e.preventDefault();
+      setIsDragging(true);
+    };
+
+    const handleDragLeave = () => setIsDragging(false);
+
+    const handleDrop = (e: React.DragEvent) => {
+      e.preventDefault();
+      setIsDragging(false);
+      const file = e.dataTransfer.files?.[0];
+      if (file?.type.startsWith('image/')) onFileSelect?.(file);
     };
 
-    return <FileUploader onFileSelect={handleFileUpload} inputRef={inputRef} />;
+    const displayImage = isPendingDelete
+      ? defaultProfilePhoto.src
+      : previewUrl || initialPhotoUrl || defaultProfilePhoto.src;
+
+    const hasPhoto = displayImage !== defaultProfilePhoto.src;
+
+    return (
+      <div className={styles.wrapper}>
+        <label
+          htmlFor={id}
+          className={[
+            styles.container,
+            styles[variant],
+            isDragging ? styles.dragging : '',
+            hasPhoto ? styles.hasPhoto : '',
+          ].join(' ')}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+        >
+          {hasPhoto ? (
+            <Image
+              src={displayImage}
+              alt="Profile photo"
+              width={200}
+              height={200}
+              style={{ objectFit: 'cover' }}
+              unoptimized
+            />
+          ) : (
+            <div className={styles.placeholder}>
+              <Image
+                src={uploadPhotoIcon.src}
+                alt="Upload photo"
+                width={32}
+                height={32}
+                className={styles.placeholderImage}
+                unoptimized
+              />
+              <span className={styles.photoPlaceholderText}>
+                Drag and drop file here or <u>browse</u>
+              </span>
+            </div>
+          )}
+        </label>
+
+        {!isPendingDelete && hasPhoto && (
+          <button
+            type="button"
+            onClick={onRemove}
+            className={[
+              styles.removeButton,
+              variant === 'circle' ? styles.removeButtonCircle : '',
+            ].join(' ')}
+          >
+            —
+          </button>
+        )}
+
+        <input
+          ref={inputRef}
+          id={id}
+          type="file"
+          accept="image/*"
+          onChange={handleFileChange}
+          style={{ display: 'none' }}
+        />
+      </div>
+    );
   },
 );
 
 PhotoUpload.displayName = 'PhotoUpload';
-
 export default PhotoUpload;
diff --git a/app/(main)/hq/[storeId]/components/EditStoreForm.module.css b/app/(main)/hq/[storeId]/components/EditStoreForm.module.css
new file mode 100644
index 00000000..58a73ae3
--- /dev/null
+++ b/app/(main)/hq/[storeId]/components/EditStoreForm.module.css
@@ -0,0 +1,18 @@
+.layout {
+  display: flex;
+  align-items: flex-start;
+  gap: 3rem;
+  margin-bottom: 40px;
+  flex-wrap: wrap;
+}
+
+.photoColumn {
+  width: 200px;
+  height: 210px;
+  flex-shrink: 0;
+}
+
+.fieldsColumn {
+  flex: 1;
+  min-width: 0;
+}
diff --git a/app/(main)/hq/[storeId]/components/EditStoreForm.tsx b/app/(main)/hq/[storeId]/components/EditStoreForm.tsx
index 3f792a2c..fd802b74 100644
--- a/app/(main)/hq/[storeId]/components/EditStoreForm.tsx
+++ b/app/(main)/hq/[storeId]/components/EditStoreForm.tsx
@@ -2,12 +2,11 @@
 
 import { useForm } from 'react-hook-form';
 import type { Store, StoreUpdate } from '@/app/types/store';
-import Image from 'next/image';
 import { updateStore } from '@/app/actions/store';
 import { useRef, useState } from 'react';
-import defaultStorePhoto from '@/public/image-placeholder.svg';
 import { createClient } from '@/app/lib/supabase/browser-client';
 import PhotoUpload from '@/app/(main)/components/PhotoUpload';
+import styles from '@/app/(main)/hq/[storeId]/components/EditStoreForm.module.css';
 
 type FormValues = {
   name: string;
@@ -130,65 +129,58 @@ export default function EditStoreForm({ store }: { store: Store }) {
     }
   };
 
-  const displayImage = isPendingDelete
-    ? defaultStorePhoto.src
-    : previewUrl || photoUrl || defaultStorePhoto.src;
-
   const hasDirtyTextOrImage = isDirty || !!selectedFile || isPendingDelete;
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="form-card">
       <div className="card-body">
-        <div className="mb-3">
-          <Image
-            src={displayImage}
-            alt="Store photo"
-            width={64}
-            height={64}
-            className="photo"
-            unoptimized
-          />
-
-          {!isPendingDelete && displayImage !== defaultStorePhoto.src && (
-            <button
-              type="button"
-              onClick={handleRemovePhoto}
-              className="btn-cancel"
-            >
-              Remove
-            </button>
-          )}
-
-          <br />
-          <PhotoUpload ref={photoUploadRef} onFileSelect={handleFileSelect} />
-        </div>
-
-        <div className="mb-3">
-          <label className="form-label field-label">Store name</label>
-          <input {...register('name')} className="form-control" />
-        </div>
-
-        <div className="mb-3">
-          <label className="form-label field-label">Store street address</label>
-          <input {...register('street_address')} className="form-control" />
-        </div>
+        <div className={styles.layout}>
+          <div className={styles.photoColumn}>
+            <PhotoUpload
+              ref={photoUploadRef}
+              onFileSelect={handleFileSelect}
+              previewUrl={previewUrl}
+              initialPhotoUrl={photoUrl}
+              isPendingDelete={isPendingDelete}
+              onRemove={handleRemovePhoto}
+            />
+          </div>
 
-        {hasDirtyTextOrImage && (
-          <div className="button-spacing">
-            <button type="submit" disabled={isSaving} className="btn-submit">
-              {isSaving ? 'Saving...' : 'Save'}
-            </button>
-
-            <button
-              type="button"
-              className="btn-cancel"
-              onClick={onCancel}
-              disabled={isSaving}
-            >
-              Cancel
-            </button>
+          <div className={styles.fieldsColumn}>
+            <div className="mb-3">
+              <label className="form-label field-label">Store name</label>
+              <input {...register('name')} className="form-control" />
+            </div>
+
+            <div className="mb-3">
+              <label className="form-label field-label">
+                Store street address
+              </label>
+              <input {...register('street_address')} className="form-control" />
+            </div>
+
+            {hasDirtyTextOrImage && (
+              <div className="button-spacing">
+                <button
+                  type="submit"
+                  disabled={isSaving}
+                  className="btn-submit"
+                >
+                  {isSaving ? 'Saving...' : 'Save'}
+                </button>
+
+                <button
+                  type="button"
+                  className="btn-cancel"
+                  onClick={onCancel}
+                  disabled={isSaving}
+                >
+                  Cancel
+                </button>
+              </div>
+            )}
           </div>
-        )}
+        </div>
       </div>
     </form>
   );
diff --git a/app/(main)/hq/[storeId]/components/RemoveStoreButton.tsx b/app/(main)/hq/[storeId]/components/RemoveStoreButton.tsx
index 479891da..4d7223f4 100644
--- a/app/(main)/hq/[storeId]/components/RemoveStoreButton.tsx
+++ b/app/(main)/hq/[storeId]/components/RemoveStoreButton.tsx
@@ -27,8 +27,8 @@ export default function RemoveStoreButton({ storeId }: RemoveStoreButtonProp) {
   };
 
   return (
-    <button type="button" onClick={handleDeletion}>
-      Remove store
+    <button type="button" onClick={handleDeletion} className="btn-remove mt-3">
+      Remove
     </button>
   );
 }
diff --git a/app/(main)/hq/components/AddStoreForm.tsx b/app/(main)/hq/components/AddStoreForm.tsx
index 7951f866..23e76a2d 100644
--- a/app/(main)/hq/components/AddStoreForm.tsx
+++ b/app/(main)/hq/components/AddStoreForm.tsx
@@ -5,7 +5,6 @@ import { useState, useRef } from 'react';
 import { createStore, updateStore } from '@/app/actions/store';
 import { createClient } from '@/app/lib/supabase/browser-client';
 import PhotoUpload from '@/app/(main)/components/PhotoUpload';
-import Image from 'next/image';
 import defaultStorePhoto from '@/public/image-placeholder.svg';
 
 type FormValues = {
@@ -15,8 +14,6 @@ type FormValues = {
 
 export default function AddStoreForm() {
   const [isSaving, setIsSaving] = useState(false);
-
-  // previewUrl represents the locally selected file for the UI
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
 
@@ -30,14 +27,8 @@ export default function AddStoreForm() {
     },
   });
 
-  const storeName = useWatch({
-    control,
-    name: 'storeName',
-  });
-  const storeStreetAddress = useWatch({
-    control,
-    name: 'storeStreetAddress',
-  });
+  const storeName = useWatch({ control, name: 'storeName' });
+  const storeStreetAddress = useWatch({ control, name: 'storeStreetAddress' });
 
   const bothFilled =
     storeName.trim().length > 0 && storeStreetAddress.trim().length > 0;
@@ -45,14 +36,12 @@ export default function AddStoreForm() {
     storeName.trim().length > 0 || storeStreetAddress.trim().length > 0;
 
   const handleFileSelect = (file: File) => {
-    const maxSize = 200 * 1024; // 200 KB in bytes
+    const maxSize = 200 * 1024;
     if (file.size > maxSize) {
       alert('File is too large. Please select an image under 200 KB.');
       return;
     }
-    // Create a temporary local blob URL for immediate UI feedback
-    const preview = URL.createObjectURL(file);
-    setPreviewUrl(preview);
+    setPreviewUrl(URL.createObjectURL(file));
     setSelectedFile(file);
   };
 
@@ -75,7 +64,6 @@ export default function AddStoreForm() {
       const store_id = store.data.store_id;
       let finalPhotoUrl = defaultStorePhoto.src;
 
-      // upload photo
       if (selectedFile) {
         const { error: uploadError } = await supabase.storage
           .from('store_photos')
@@ -92,7 +80,7 @@ export default function AddStoreForm() {
           await updateStore(store_id, { photo_url: finalPhotoUrl });
         }
       }
-      // reset all fields
+
       reset({ storeName: '', storeStreetAddress: '' });
       setSelectedFile(null);
       setPreviewUrl(null);
@@ -104,81 +92,64 @@ export default function AddStoreForm() {
     }
   };
 
-  // Determine image to show the user
-  const displayImage = previewUrl || defaultStorePhoto.src;
-
   return (
     <div className="form-card">
       <div className="card-body">
         <form onSubmit={handleSubmit(onSubmit)}>
-          <div>
-            <div className="mb-3">
-              <Image
-                src={displayImage}
-                alt="Profile photo"
-                width={64}
-                height={64}
-                className="photo"
-                unoptimized
-              />
-
-              {/* Only show Remove if there is currently a photo and we aren't already deleting it */}
-              {displayImage !== defaultStorePhoto.src && (
-                <button
-                  type="button"
-                  onClick={handleRemovePhoto}
-                  className="btn-cancel"
-                >
-                  Remove
-                </button>
-              )}
-
-              <br />
+          <div className="row g-5 align-items-start">
+            <div className="col-auto" style={{ width: '250px' }}>
               <PhotoUpload
                 ref={photoUploadRef}
                 onFileSelect={handleFileSelect}
+                previewUrl={previewUrl}
+                onRemove={handleRemovePhoto}
               />
             </div>
 
-            <div className="mb-3">
-              <label className="form-label field-label">Store name</label>
-              <input {...register('storeName')} className="form-control" />
+            <div className="col">
+              <div className="mb-3">
+                <label className="form-label field-label">Store name</label>
+                <input {...register('storeName')} className="form-control" />
+              </div>
+
+              <div className="mb-3">
+                <label className="form-label field-label">
+                  Store street address
+                </label>
+                <input
+                  {...register('storeStreetAddress')}
+                  className="form-control"
+                />
+              </div>
+
+              <div className="button-spacing">
+                {eitherFilled && (
+                  <button
+                    type="button"
+                    className="btn-cancel"
+                    disabled={isSaving}
+                    onClick={() => {
+                      reset({ storeName: '', storeStreetAddress: '' });
+                      setSelectedFile(null);
+                      setPreviewUrl(null);
+                      photoUploadRef.current?.resetFile();
+                    }}
+                  >
+                    Cancel
+                  </button>
+                )}
+                {bothFilled && (
+                  <button
+                    type="submit"
+                    disabled={isSaving}
+                    className="btn-submit"
+                  >
+                    {isSaving ? 'Saving...' : 'Save'}
+                  </button>
+                )}
+              </div>
             </div>
           </div>
-
-          <div className="mb-3">
-            <label className="form-label field-label">
-              Store street address
-            </label>
-            <input
-              {...register('storeStreetAddress')}
-              className="form-control"
-            />
-          </div>
-
-          <div className="button-spacing">
-            {bothFilled && (
-              <button type="submit" disabled={isSaving} className="btn-submit">
-                {isSaving ? 'Saving...' : 'Save'}
-              </button>
-            )}
-
-            {eitherFilled && (
-              <button
-                type="button"
-                className="btn-cancel"
-                disabled={isSaving}
-                onClick={() => {
-                  reset({ storeName: '', storeStreetAddress: '' });
-                  setSelectedFile(null);
-                  setPreviewUrl(defaultStorePhoto.src);
-                  photoUploadRef.current?.resetFile();
-                }}
-              >
-                Cancel
-              </button>
-            )}
-          </div>
         </form>
       </div>
     </div>
diff --git a/app/(main)/manage/[storeId]/[storeItemId]/components/DeleteStoreItemButton.tsx b/app/(main)/manage/[storeId]/[storeItemId]/components/DeleteStoreItemButton.tsx
index d44a0df8..7a85bb72 100644
--- a/app/(main)/manage/[storeId]/[storeItemId]/components/DeleteStoreItemButton.tsx
+++ b/app/(main)/manage/[storeId]/[storeItemId]/components/DeleteStoreItemButton.tsx
@@ -30,8 +30,8 @@ export default function DeleteStoreItemButton({
   }
 
   return (
-    <button type="button" onClick={handleDelete}>
-      Remove item
+    <button type="button" onClick={handleDelete} className="btn-remove mt-3">
+      Remove
     </button>
   );
 }
diff --git a/app/(main)/profile/components/ProfileForm.module.css b/app/(main)/profile/components/ProfileForm.module.css
new file mode 100644
index 00000000..13a84a71
--- /dev/null
+++ b/app/(main)/profile/components/ProfileForm.module.css
@@ -0,0 +1,48 @@
+.card {
+  border: none;
+  border-radius: 5px;
+  background: #fff;
+  margin-top: 8.25rem;
+}
+
+.cardBody {
+  padding: 40px;
+  padding-top: 6.25rem;
+  margin-top: 50px;
+}
+
+.userInfoText {
+  margin-top: 1.25rem;
+}
+
+.avatarCircle {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: -12.5rem;
+}
+
+.avatarCircle img {
+  width: 12.5rem;
+  height: 12.5rem;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.avatarCircleEdit {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: -12.5rem;
+}
+
+.fieldGroup {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+}
+
+.profileLabel {
+  font-weight: 500;
+  margin-bottom: 5px;
+}
diff --git a/app/(main)/profile/components/ProfileForm.tsx b/app/(main)/profile/components/ProfileForm.tsx
index a168a97e..7b986e57 100644
--- a/app/(main)/profile/components/ProfileForm.tsx
+++ b/app/(main)/profile/components/ProfileForm.tsx
@@ -1,12 +1,13 @@
 'use client';
 
 import type { User, UserUpdate } from '@/app/types/user';
-import Image from 'next/image';
 import { useForm } from 'react-hook-form';
 import { updateUser } from '@/app/actions/user';
 import { useState, useRef } from 'react';
 import { createClient } from '@/app/lib/supabase/browser-client';
 import PhotoUpload from '@/app/(main)/components/PhotoUpload';
+import styles from '@/app/(main)/profile/components/ProfileForm.module.css';
+import Image from 'next/image';
 import defaultProfilePhoto from '@/public/image-placeholder.svg';
 
 type ProfileFormValues = {
@@ -16,15 +17,13 @@ type ProfileFormValues = {
 };
 
 export default function ProfileForm({ user }: { user: User }) {
+  const [isEditing, setIsEditing] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
-  // photoUrl represents what is currently in the DB
   const [photoUrl, setPhotoUrl] = useState<string | null>(
     user.profile_photo_url,
   );
-  // previewUrl represents the locally selected file for the UI
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
-  // Track if the user has explicitly clicked "Remove" but hasn't saved yet
   const [isPendingDelete, setIsPendingDelete] = useState(false);
 
   const supabase = createClient();
@@ -34,7 +33,8 @@ export default function ProfileForm({ user }: { user: User }) {
     register,
     handleSubmit,
     reset,
-    formState: { errors, isDirty },
+    watch,
+    formState: { errors },
   } = useForm<ProfileFormValues>({
     defaultValues: {
       firstName: user.first_name,
@@ -43,15 +43,15 @@ export default function ProfileForm({ user }: { user: User }) {
     },
   });
 
+  const watchedValues = watch();
+
   const handleFileSelect = (file: File) => {
-    const maxSize = 200 * 1024; // 200 KB in bytes
+    const maxSize = 200 * 1024;
     if (file.size > maxSize) {
       alert('File is too large. Please select an image under 200 KB.');
       return;
     }
-    // Create a temporary local blob URL for immediate UI feedback
-    const preview = URL.createObjectURL(file);
-    setPreviewUrl(preview);
+    setPreviewUrl(URL.createObjectURL(file));
     setSelectedFile(file);
     setIsPendingDelete(false);
   };
@@ -71,6 +71,7 @@ export default function ProfileForm({ user }: { user: User }) {
     setPhotoUrl(user.profile_photo_url);
     photoUploadRef.current?.resetFile();
     reset();
+    setIsEditing(false);
   };
 
   const onSubmit = async (data: ProfileFormValues) => {
@@ -82,7 +83,6 @@ export default function ProfileForm({ user }: { user: User }) {
       } = await supabase.auth.getUser();
 
       if (authUser) {
-        // Handle deletion if flagged
         if (isPendingDelete) {
           await supabase.storage
             .from('profile_photos')
@@ -90,7 +90,6 @@ export default function ProfileForm({ user }: { user: User }) {
           finalPhotoUrl = null;
         }
 
-        // Handle upload if a new file is selected
         if (selectedFile) {
           const { error: uploadError } = await supabase.storage
             .from('profile_photos')
@@ -104,21 +103,18 @@ export default function ProfileForm({ user }: { user: User }) {
             const { data: publicData } = supabase.storage
               .from('profile_photos')
               .getPublicUrl(`${authUser.id}/profile.jpg`);
-
             finalPhotoUrl = `${publicData.publicUrl}?t=${Date.now()}`;
           }
         }
       }
 
-      // Create a partial update object
       const changes: UserUpdate = {};
       if (data.firstName !== user.first_name)
         changes.first_name = data.firstName;
       if (data.lastName !== user.last_name) changes.last_name = data.lastName;
       if (data.email !== user.email) changes.email = data.email;
-      if (selectedFile || isPendingDelete) {
+      if (selectedFile || isPendingDelete)
         changes.profile_photo_url = finalPhotoUrl;
-      }
 
       const result = await updateUser(user.user_id, changes);
 
@@ -134,6 +130,7 @@ export default function ProfileForm({ user }: { user: User }) {
           lastName: data.lastName,
           email: user.email,
         });
+        setIsEditing(false);
         if (data.email !== user.email) {
           alert('Please check your new email address to verify the change.');
         }
@@ -147,65 +144,124 @@ export default function ProfileForm({ user }: { user: User }) {
     }
   };
 
-  // Determine image to show the user
-  const displayImage = isPendingDelete
-    ? defaultProfilePhoto.src
-    : previewUrl || photoUrl || defaultProfilePhoto.src;
+  return (
+    <div className={styles.card}>
+      <div className={styles.cardBody}>
+        <form onSubmit={handleSubmit(onSubmit)} className="form-body">
+          {isEditing ? (
+            <div className={styles.avatarCircleEdit}>
+              <PhotoUpload
+                variant="circle"
+                ref={photoUploadRef}
+                id="photo-upload-input"
+                initialPhotoUrl={photoUrl}
+                previewUrl={previewUrl}
+                isPendingDelete={isPendingDelete}
+                onFileSelect={handleFileSelect}
+                onRemove={handleRemovePhoto}
+              />
+            </div>
+          ) : (
+            <div className={styles.avatarCircle}>
+              <Image
+                src={photoUrl || defaultProfilePhoto.src}
+                alt="Profile photo"
+                width={96}
+                height={96}
+                unoptimized
+              />
+            </div>
+          )}
+          <h2>User Information</h2>
 
-  const hasDirtyTextOrImage = isDirty || !!selectedFile || isPendingDelete;
+          <div>
+            <div className="two-col-row">
+              <div>
+                <label className={styles.profileLabel}>First name</label>
+                {isEditing ? (
+                  <>
+                    <input
+                      className="form-control"
+                      {...register('firstName', { required: true })}
+                    />
+                    {errors.firstName?.type === 'required' && (
+                      <p role="alert">First name is required.</p>
+                    )}
+                  </>
+                ) : (
+                  <p className="form-control-plaintext">
+                    {watchedValues.firstName}
+                  </p>
+                )}
+              </div>
 
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <div>
-        <Image
-          src={displayImage}
-          alt="Profile photo"
-          width={64}
-          height={64}
-          style={{ objectFit: 'cover' }}
-          unoptimized
-        />
-
-        {/* Only show Remove if there is currently a photo and we aren't already deleting it */}
-        {!isPendingDelete && displayImage !== defaultProfilePhoto.src && (
-          <button type="button" onClick={handleRemovePhoto}>
-            Remove
-          </button>
-        )}
-
-        <br />
-        <PhotoUpload ref={photoUploadRef} onFileSelect={handleFileSelect} />
-      </div>
+              <div>
+                <label className={styles.profileLabel}>Last name</label>
+                {isEditing ? (
+                  <>
+                    <input
+                      className="form-control"
+                      {...register('lastName', { required: true })}
+                    />
+                    {errors.lastName?.type === 'required' && (
+                      <p role="alert">Last name is required.</p>
+                    )}
+                  </>
+                ) : (
+                  <p className="form-control-plaintext">
+                    {watchedValues.lastName}
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <label className={styles.profileLabel}>Email</label>
+            {isEditing ? (
+              <>
+                <input
+                  className="form-control"
+                  {...register('email', { required: true })}
+                />
+                {errors.email?.type === 'required' && (
+                  <p role="alert">Email is required.</p>
+                )}
+              </>
+            ) : (
+              <p className="form-control-plaintext">{watchedValues.email}</p>
+            )}
+          </div>
 
-      <label>First name</label>
-      <input {...register('firstName', { required: true })} />
-      {errors.firstName?.type === 'required' && (
-        <p role="alert">First name is required.</p>
-      )}
-      <br />
-      <label>Last name</label>
-      <input {...register('lastName', { required: true })} />
-      {errors.lastName?.type === 'required' && (
-        <p role="alert">Last name is required.</p>
-      )}
-      <br />
-      <label>Email</label>
-      <input {...register('email', { required: true })} />
-      {errors.email?.type === 'required' && (
-        <p role="alert">Email is required.</p>
-      )}
-      <br />
-
-      {hasDirtyTextOrImage && (
-        <>
-          <button type="submit" disabled={isSaving}>
-            {isSaving ? 'Saving...' : 'Save'}
-          </button>
-          <button type="button" onClick={onCancel} disabled={isSaving}>
-            Cancel
-          </button>
-        </>
-      )}
-    </form>
+          {isEditing && (
+            <div className="btn-row">
+              <button
+                className="btn-cancel"
+                type="button"
+                onClick={onCancel}
+                disabled={isSaving}
+              >
+                Cancel
+              </button>
+              <button className="btn-submit" type="submit" disabled={isSaving}>
+                {isSaving ? 'Saving...' : 'Save'}
+              </button>
+            </div>
+          )}
+
+          {!isEditing && (
+            <div className="btn-row">
+              <button
+                type="button"
+                className="btn-cancel"
+                onClick={() => setIsEditing(true)}
+              >
+                Edit
+              </button>
+            </div>
+          )}
+        </form>
+      </div>
+    </div>
   );
 }
diff --git a/app/(main)/profile/components/SignOutButton.tsx b/app/(main)/profile/components/SignOutButton.tsx
index 16d9a341..f816ead9 100644
--- a/app/(main)/profile/components/SignOutButton.tsx
+++ b/app/(main)/profile/components/SignOutButton.tsx
@@ -14,5 +14,9 @@ export default function SignOutButton() {
     router.push('/home');
   }
 
-  return <button onClick={signOut}>Sign out</button>;
+  return (
+    <button className="btn-submit" onClick={signOut}>
+      Sign out
+    </button>
+  );
 }
diff --git a/app/(main)/profile/components/UpdatePasswordForm.tsx b/app/(main)/profile/components/UpdatePasswordForm.tsx
index 3fac01d0..9962c832 100644
--- a/app/(main)/profile/components/UpdatePasswordForm.tsx
+++ b/app/(main)/profile/components/UpdatePasswordForm.tsx
@@ -16,6 +16,7 @@ export default function UpdatePasswordForm() {
     reset,
     formState: { errors },
   } = useForm<FormValues>({
+    mode: 'onChange',
     defaultValues: {
       newPassword: '',
       newPasswordConfirmation: '',
@@ -53,44 +54,69 @@ export default function UpdatePasswordForm() {
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <label>New password</label>
-      <input
-        type="password"
-        {...register('newPassword', {
-          minLength: 8,
-          pattern:
-            /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
-        })}
-      />
-      {errors.newPassword && (
-        <p role="alert">
-          Password must be at least 8 characters and include an uppercase
-          letter, a lowercase letter, a number, and a symbol.
-        </p>
-      )}
-      <br />
-      <label>Confirm new password</label>
-      <input type="password" {...register('newPasswordConfirmation')} />
+    <div className="form-card">
+      <div className="card-body">
+        <form onSubmit={handleSubmit(onSubmit)} className="form-body">
+          <h2>Change Password</h2>
+          <div>
+            <label className="field-label">New password</label>
+            <input
+              className="form-control"
+              type="password"
+              {...register('newPassword', {
+                minLength: 8,
+                pattern:
+                  /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
+              })}
+            />
+            <div>
+              {errors.newPassword && (
+                <p role="alert">
+                  Password must be at least 8 characters and include an
+                  uppercase letter, a lowercase letter, a number, and a symbol.
+                </p>
+              )}
+            </div>
+          </div>
+          <div>
+            <label className="field-label">Confirm new password</label>
+            <input
+              className="form-control"
+              type="password"
+              {...register('newPasswordConfirmation')}
+            />
+            <div>
+              {newPasswordConfirmation.length > 0 && !passwordsMatch && (
+                <p role="alert">Passwords do not match.</p>
+              )}
+            </div>
+          </div>
 
-      {newPasswordConfirmation.length > 0 && !passwordsMatch && (
-        <p role="alert">Passwords do not match.</p>
-      )}
-      <br />
-      {(newPassword.length > 0 || newPasswordConfirmation.length > 0) && (
-        <button
-          type="button"
-          onClick={() =>
-            reset({
-              newPassword: '',
-              newPasswordConfirmation: '',
-            })
-          }
-        >
-          Cancel
-        </button>
-      )}
-      {passwordsMatch && <button type="submit">Save</button>}
-    </form>
+          {(newPassword.length > 0 || newPasswordConfirmation.length > 0) && (
+            <div className="btn-row">
+              <button
+                type="button"
+                className="btn-cancel"
+                onClick={() =>
+                  reset({
+                    newPassword: '',
+                    newPasswordConfirmation: '',
+                  })
+                }
+              >
+                Cancel
+              </button>
+            </div>
+          )}
+          {passwordsMatch && (
+            <div className="btn-row">
+              <button className="btn-submit" type="submit">
+                Save
+              </button>
+            </div>
+          )}
+        </form>
+      </div>
+    </div>
   );
 }
diff --git a/app/(main)/profile/page.tsx b/app/(main)/profile/page.tsx
index cd277d75..f1b485d5 100644
--- a/app/(main)/profile/page.tsx
+++ b/app/(main)/profile/page.tsx
@@ -28,11 +28,16 @@ export default async function PersonalProfilePage() {
   return (
     <div>
       <h1>Profile</h1>
-      <h2>Public Profile</h2>
+
       <ProfileForm user={profile as User} />
-      <h2>Authentication</h2>
-      <UpdatePasswordForm />
-      <SignOutButton />
+
+      <div className="mt-5">
+        <UpdatePasswordForm />
+      </div>
+
+      <div className="mt-5">
+        <SignOutButton />
+      </div>
     </div>
   );
 }
diff --git a/app/(main)/request/components/AddInStockToCartForm.tsx b/app/(main)/request/components/AddInStockToCartForm.tsx
index 1970f513..224ad2df 100644
--- a/app/(main)/request/components/AddInStockToCartForm.tsx
+++ b/app/(main)/request/components/AddInStockToCartForm.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
 import { addToCart } from '@/app/actions/ticket';
 import styles from '@/app/(main)/request/[storeId]/[storeItemId]/RequestStoreItemPage.module.css';
@@ -41,9 +40,9 @@ export default function AddInStockToCartForm({
         />
       </Form.Group>
 
-      <Button type="submit" className="align-self-start">
+      <button type="submit" className="align-self-start btn-submit">
         Add to Cart
-      </Button>
+      </button>
     </Form>
   );
 }
diff --git a/app/globals.css b/app/globals.css
index 7c466a6a..b81c6cbb 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -155,16 +155,16 @@ Table {
   justify-content: center;
   align-items: center;
   gap: 10px;
-  border: none;
+  border: 1px solid #3182ce;
   border-radius: 5px;
-  background: #2d3748;
+  background: #3182ce;
   color: #fff;
   font-weight: 400;
   cursor: pointer;
 }
 
 .btn-submit:hover {
-  background: #4a5568;
+  background: #2473bc;
   transition: background 0.2s ease;
 }
 
@@ -191,6 +191,32 @@ Table {
   transition: background 0.2s ease;
 }
 
+.btn-remove {
+  display: inline-flex;
+  padding: 8px 40px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid #c53030;
+  border-radius: 5px;
+  background: #ffefef;
+  color: #c53030;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+.btn-remove:hover {
+  background: #fbe0e0;
+  transition: background 0.2s ease;
+}
+
+.btn-row {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 1rem;
+  margin-bottom: 0;
+}
+
 .form-body {
   display: flex;
   flex-direction: column;
@@ -395,4 +421,5 @@ Table {
 .button-spacing {
   display: flex;
   gap: 12px;
+  flex-wrap: wrap;
 }
diff --git a/public/image-upload.svg b/public/image-upload.svg
new file mode 100644
index 00000000..b5ddd089
--- /dev/null
+++ b/public/image-upload.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <rect x="48" y="80" width="416" height="352" rx="48" ry="48" fill="none" stroke="#808080" stroke-linejoin="round" stroke-width="32"/>
+  <circle cx="336" cy="176" r="32" fill="none" stroke="#808080" stroke-miterlimit="10" stroke-width="32"/>
+  <path d="M304 335.79l-90.66-90.49a32 32 0 00-43.87-1.3L48 352M224 432l123.34-123.34a32 32 0 0143.11-2L464 368" fill="none" stroke="#808080" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
+</svg>
\ No newline at end of file