diff --git a/app/Http/Controllers/ProfilesController.php b/app/Http/Controllers/ProfilesController.php
index 34caee05..97e620e3 100644
--- a/app/Http/Controllers/ProfilesController.php
+++ b/app/Http/Controllers/ProfilesController.php
@@ -270,19 +270,6 @@ public function update(Profile $profile, string $section, ProfileUpdateRequest $
         return redirect()->route('profiles.show', $profile->slug)->with('flash_message', 'Profile updated.');
     }
 
-    public function updateImage(Profile $profile, ProfileImageRequest $request): RedirectResponse
-    {
-        return redirect()->route('profiles.edit', [$profile->slug, 'information'])->with('flash_message', $profile->processImage($request->file('image'), 'images'));
-    }
-
-    /**
-     * Update a Profile's banner image
-     */
-    public function updateBanner(Profile $profile, ProfileBannerImageRequest $request): RedirectResponse
-    {
-        return redirect()->route('profiles.edit', [$profile->slug, 'information'])->with('flash_message', $profile->processImage($request->file('banner_image'), 'banners'));
-    }
-
     /**
      * Confirm deletion of a profile
      */
diff --git a/app/Http/Livewire/ImagePicker.php b/app/Http/Livewire/ImagePicker.php
new file mode 100644
index 00000000..3c4157ff
--- /dev/null
+++ b/app/Http/Livewire/ImagePicker.php
@@ -0,0 +1,185 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use App\Http\Requests\Concerns\HasImageUploads;
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+use Illuminate\Database\Eloquent\Model;
+use Livewire\Component;
+use Livewire\WithFileUploads;
+use Livewire\TemporaryUploadedFile;
+
+class ImagePicker extends Component
+{
+    use WithFileUploads, HasImageUploads, AuthorizesRequests;
+
+    /**
+     * Uploaded image file
+     * @var TemporaryUploadedFile
+     */ 
+    public $image;
+    
+    /**
+     * Existing image URL (if the model already has an image)
+     * @var string|null
+     */ 
+    public $existing_image_url;
+    
+    /**
+     * A kebab-case unique identifier for each component
+     * @var string
+     * for the Livewire wire:key directive to identify the DOM elements when multiple instances of the component exist
+     * Example: "banner-img"
+     */ 
+    public $custom_key;
+
+    /**
+     * Additional instructions for the image file selection 
+     * @var string|null
+     * Example: "This photo will appear on your profile page and as your application profile image - please use a high-quality image (300x300 pixels or larger)."
+     * 
+     */ 
+    public $custom_msg;
+    
+    /**
+     * Model instance that has an image is associated
+     * @var \Illuminate\Database\Eloquent\Model
+     */ 
+    public $model;
+    
+    /**
+     * Method on the model used to save the image
+     * @var string|null
+     */ 
+    public $save_function;
+    
+    /**
+     * Parameters passed to the save function
+     * @var array|null
+     */ 
+    public $save_params;
+    
+    /**
+     * The parameter name expected by the save function for the uploaded image
+     * @var string
+     */ 
+    public $image_param_name;
+    
+    /**
+     * Callback function to execute after saving the image
+     * @var string|null
+     */ 
+    public $callback_function;
+    
+    /**
+     * Parameters for the callback function
+     * @var array|null
+     */ 
+    public $callback_params;
+    
+    /**
+     * Additional blade partial view to display below the image preview
+     * @var string|null
+     */ 
+    public $partial_view;
+    
+    /**
+     * Route to redirect to after saving the image
+     * @var string
+     */ 
+    public $redirect_route;
+    
+    /**
+     * Flash message displayed after saving the image
+     * @var string|null
+     */ 
+    public $message;
+    
+    /**
+     * Authorization parameters for checking user permissions
+     * @var array $auth_params
+     */ 
+    public $auth_params;
+
+    public function mount() 
+    {
+        if (isset($this->save_function)) { // Validates save function only if set
+            $this->validateCallUserFunc('save_function');
+        }
+
+        if (isset($this->callback_function)) { // Validates callback function only if set
+            $this->validateCallUserFunc('callback_function');
+        }
+    }
+    
+    /**
+     * Validates the image after a file has been selected and stores the updated image in the save function parameters for uploading
+     */
+    public function updatedImage()
+    {
+        if ($this->image) {
+            $this->validate(
+                ['image' => "nullable|{$this->uploadedImageRules()}"],
+            );
+            
+            $this->save_params[$this->image_param_name] = $this->image;
+        }
+    }
+
+    public function save()
+    {
+        $this->authorize(...$this->auth_params);
+        
+        // Calls the model's save function if an image is uploaded
+        if ($this->image) {
+            $this->message = call_user_func([$this->model, $this->save_function], ...$this->save_params ?? []);
+        }
+
+        // If a callback function is set, execute it (e.g., updating related records)
+        if (isset($this->callback_function)) {
+            call_user_func([$this->model, $this->callback_function], ...$this->callback_params ?? []);
+        }
+
+        return redirect($this->redirect_route)->with('flash_message', $this->message);
+    }
+
+    /**
+     * Validates that the provided method name exists on the model
+     * Prevents runtime errors if an invalid method is supplied
+     *
+     * @param string $function_name
+     * Name of the function to validate
+     */
+    private function validateCallUserFunc($function_name)
+    {
+        $class_name = get_class($this->model);
+
+        $this->validate([
+            'model' => [
+                'required',
+                function ($attribute, $value, $fail) use ($class_name) {
+                    if (!class_exists($class_name) || !is_subclass_of($class_name, Model::class)) {
+                        $fail('Please contact the app admin.');
+                        logger()->error("The class {$class_name} is not a valid Eloquent model.");
+                    }
+                }
+            ],
+
+            $function_name => [
+                function ($attribute, $value, $fail) use ($class_name) {
+                    /** @var string|null $value */
+                    if (!is_callable($value, true) || !method_exists($class_name, $value)) {
+                        $fail('Please contact the app admin.');
+                        logger()->error("The method {$value} does not exist in {$class_name}.");
+                    }
+                }
+            ],
+        ]);
+    }
+
+    public function render()
+    {   
+        return view('livewire.image-picker');
+    }
+}
+
diff --git a/app/Http/Livewire/ProfileHeaderEditorModal.php b/app/Http/Livewire/ProfileHeaderEditorModal.php
new file mode 100644
index 00000000..44d2aecc
--- /dev/null
+++ b/app/Http/Livewire/ProfileHeaderEditorModal.php
@@ -0,0 +1,75 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use App\Profile;
+use Livewire\Component;
+use Livewire\WithFileUploads;
+use App\Http\Requests\Concerns\HasImageUploads;
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+
+class ProfileHeaderEditorModal extends Component
+{
+
+    use WithFileUploads, HasImageUploads, AuthorizesRequests;
+
+    public $user;
+    public Profile $profile;
+    public $image;
+    public bool $fancy_header;
+    public bool $fancy_header_right;
+    public $avatar_settings;
+    public $cover_settings;
+
+    public function mount()
+    {
+        $message = "Profile layout has been updated.";
+
+        $this->fancy_header = $this->profile->hasFancyHeader();
+        $this->fancy_header_right = $this->profile->hasFancyHeaderRight();
+
+        $this->avatar_settings = [
+            'existing_image_url' => $this->profile->image_url,
+            'custom_key' => "profile-img",
+            'custom_msg' => "This photo will appear on your profile page and as your application profile image - please use a high-quality image (300x300 pixels or larger).",
+            'save_function' => 'processImage',
+            'save_params' => [
+                    'collection' => 'images',
+                ],
+                'image_param_name' => 'new_image',
+            'callback_function' => 'updateLayoutSettings',
+            'callback_params' => [
+                'fancy_header' => false,
+                'fancy_header_right' => $this->fancy_header_right,
+            ],
+            'redirect_route' => route('profiles.show', $this->profile->slug),
+            'message' => $message,
+            'auth_params' => ['update', [Profile::class, $this->profile]],
+        ];
+
+        $this->cover_settings = [
+            'existing_image_url' => $this->profile->banner_url,
+            'custom_key' => "banner-img",
+            'custom_msg' => "This will use a full-width header style - please use a high-quality image (1280 × 720 pixels or larger).",
+            'save_function' => 'processImage',
+            'save_params' => [
+                    'collection' => 'banners',
+                ],
+                'image_param_name' => 'new_image',
+            'callback_function' => 'updateLayoutSettings',
+            'callback_params' => [
+                'fancy_header' => true,
+                'fancy_header_right' => $this->fancy_header_right,
+            ],
+            'redirect_route' => route('profiles.show', $this->profile->slug),
+            'message' => $message,
+            'partial_view' => 'livewire.partials._fancy-header-settings',
+            'auth_params' => ['update', [Profile::class, $this->profile]],
+        ];
+    }
+
+    public function render()
+    {
+        return view('livewire.profile-header-editor-modal');
+    }
+}
diff --git a/app/Http/Requests/ProfileBannerImageRequest.php b/app/Http/Requests/ProfileBannerImageRequest.php
deleted file mode 100644
index ecc696e3..00000000
--- a/app/Http/Requests/ProfileBannerImageRequest.php
+++ /dev/null
@@ -1,36 +0,0 @@
-<?php
-
-namespace App\Http\Requests;
-
-use App\Http\Requests\Concerns\HasImageUploads;
-use Illuminate\Foundation\Http\FormRequest;
-
-class ProfileBannerImageRequest extends FormRequest
-{
-    use HasImageUploads;
-
-    /**
-     * Get the validation rules that apply to the request.
-     *
-     * @return array
-     */
-    public function rules()
-    {
-        return [
-            'banner_image' => $this->uploadedImageRules(),
-        ];
-    }
-
-    /**
-     * Get the error messages for the defined validation rules.
-     *
-     * @return array
-     */
-    public function messages()
-    {
-        return [
-            'banner_image.max' => $this->uploadedImageMessages('max'),
-        ];
-    }
-
-}
diff --git a/app/Http/Requests/ProfileImageRequest.php b/app/Http/Requests/ProfileImageRequest.php
deleted file mode 100644
index 5988d970..00000000
--- a/app/Http/Requests/ProfileImageRequest.php
+++ /dev/null
@@ -1,36 +0,0 @@
-<?php
-
-namespace App\Http\Requests;
-
-use App\Http\Requests\Concerns\HasImageUploads;
-use Illuminate\Foundation\Http\FormRequest;
-
-class ProfileImageRequest extends FormRequest
-{
-    use HasImageUploads;
-
-    /**
-     * Get the validation rules that apply to the request.
-     *
-     * @return array
-     */
-    public function rules()
-    {
-        return [
-            'image' => $this->uploadedImageRules(),
-        ];
-    }
-
-    /**
-     * Get the error messages for the defined validation rules.
-     *
-     * @return array
-     */
-    public function messages()
-    {
-        return [
-            'image.max' => $this->uploadedImageMessages('max'),
-        ];
-    }
-
-}
diff --git a/app/Http/Requests/ProfileUpdateRequest.php b/app/Http/Requests/ProfileUpdateRequest.php
index 1e43383b..713508e7 100644
--- a/app/Http/Requests/ProfileUpdateRequest.php
+++ b/app/Http/Requests/ProfileUpdateRequest.php
@@ -48,8 +48,6 @@ public function informationRules(): array
             'data.*.data.tertiary_url' => 'nullable|url',
             'data.*.data.orc_id' => 'nullable|regex:/^[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{3}[0-9X]$/',
             'data.*.data.orc_id_managed' => 'required|boolean',
-            'data.*.data.fancy_header' => 'required|boolean',
-            'data.*.data.fancy_header_right' => 'required|boolean',
         ];
     }
 
diff --git a/app/Profile.php b/app/Profile.php
index 04f34c7b..1c776d01 100644
--- a/app/Profile.php
+++ b/app/Profile.php
@@ -19,6 +19,7 @@
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\SoftDeletes;
 use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\Http;
 
 /**
  * @method public()
@@ -157,6 +158,18 @@ public function processImage($new_image, $collection = 'images'){
         return $message;
     }
 
+    public function updateLayoutSettings($fancy_header, $fancy_header_right) 
+    {
+        $profile_info = $this->information->first();
+        
+        $profile_info->data = array_merge($profile_info->data ?? [], [
+                                'fancy_header' => $fancy_header,
+                                'fancy_header_right' => (bool) $fancy_header_right,
+                            ]);
+
+        $profile_info->save();
+    }
+
     /**
      * Checks if this profile has publications managed by ORCID
      *
@@ -573,7 +586,7 @@ public function getImageThumbUrlAttribute()
      */
     public function getBannerUrlAttribute()
     {
-        return url($this->getFirstMediaUrl('banners', 'large') ?: '/img/default.png');
+        return url($this->getFirstMediaUrl('banners', 'large'));
     }
 
     /**
@@ -596,6 +609,21 @@ public function getApiUrlAttribute()
         return route('api.index', ['person' => $this->slug, 'with_data' => true]);
     }
 
+    public function hasFancyHeader()
+    {
+        return $this->information->first()->data['fancy_header'] ?? false;
+    }
+
+    public function hasFancyHeaderRight()
+    {
+        return $this->information->first()->data['fancy_header_right'] ?? false;
+    }
+    
+    public function hasImage($collection = null)
+    {
+        return $this->hasMedia($collection);
+    }
+
     ///////////////
     // Relations //
     ///////////////
diff --git a/public/css/app.css b/public/css/app.css
index 48bc5819..a08d4770 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -10461,7 +10461,7 @@ button.video-control .fa-play {
   background-attachment: fixed;
   background-position: center top;
   background-size: cover;
-  height: 85vh;
+  height: calc(70vh - 20px);
   position: relative;
 }
 @media (max-width: 992px) {
@@ -10492,6 +10492,11 @@ button.video-control .fa-play {
   background: #f8f9fa;
   width: auto;
 }
+.profile .fancy_header .edit_banner_button {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+}
 .profile .profile_list_photo {
   width: 100%;
   height: auto;
@@ -10633,6 +10638,12 @@ button.video-control .fa-play {
   width: 100%;
 }
 
+div.edit_photo_button {
+  position: absolute;
+  bottom: 2px;
+  right: 18px;
+}
+
 .student-card-img-overlay {
   position: absolute;
   top: 0;
diff --git a/public/img/cover.png b/public/img/cover.png
new file mode 100644
index 00000000..fd329ae5
Binary files /dev/null and b/public/img/cover.png differ
diff --git a/public/js/app.js b/public/js/app.js
index 8b9b4d0a..e35ff256 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -629,7 +629,7 @@ $(function () {
 
   //show preview of uploaded image
   $('input[type="file"]').on('change', function (e) {
-    return profiles.preview_selected_image(e);
+    profiles.preview_selected_image(e);
   });
 
   // enable drag and drop sorting for items with sortable class
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index de5f1463..8632fb27 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,6 +1,6 @@
 {
-    "/js/app.js": "/js/app.js?id=24be537863fbbe2259218dfb56ecef72",
+    "/js/app.js": "/js/app.js?id=f1170fe3e2888e47851541584fd2b3e9",
     "/js/manifest.js": "/js/manifest.js?id=dc9ead3d7857b522d7de22d75063453c",
-    "/css/app.css": "/css/app.css?id=bff46e69abe7a97b008296b99e4abadd",
+    "/css/app.css": "/css/app.css?id=70d6b8bf2d01a7ca63a37d3f170da78a",
     "/js/vendor.js": "/js/vendor.js?id=4d3313683b3a2faf8ca0278ce47f3880"
 }
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index c187b44f..bbaca78e 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -569,7 +569,9 @@ $(function() {
     $('.datepicker.month').datepicker(profiles.config.datepicker.month);
 
     //show preview of uploaded image
-    $('input[type="file"]').on('change', (e) => profiles.preview_selected_image(e));
+    $('input[type="file"]').on('change', function(e) {
+        profiles.preview_selected_image(e);
+    });
 
     // enable drag and drop sorting for items with sortable class
     if ($('.sortable').length > 0) {
diff --git a/resources/assets/sass/_profile.scss b/resources/assets/sass/_profile.scss
index 073cdb46..7252fca1 100644
--- a/resources/assets/sass/_profile.scss
+++ b/resources/assets/sass/_profile.scss
@@ -51,7 +51,7 @@
 		background-attachment: fixed;
 		background-position: center top;
 		background-size: cover;
-		height: 85vh;
+		height: calc(70vh - 20px);
 		position: relative;
 
 		@media (max-width: map-get($grid-breakpoints, lg)){
@@ -85,6 +85,12 @@
 			background: $light;
 			width: auto;
 		}
+
+		.edit_banner_button {
+			position: absolute;
+			bottom: 2px;
+			right: 2px;
+		}
 	}
 
 	.profile_list_photo {
@@ -240,3 +246,10 @@
 .profile_photo{
 		width: 100%
 }
+
+div.edit_photo_button {
+	position: absolute;
+	bottom: 2px;
+	right: 18px;
+}
+
diff --git a/resources/views/livewire/image-picker.blade.php b/resources/views/livewire/image-picker.blade.php
new file mode 100644
index 00000000..854c5e41
--- /dev/null
+++ b/resources/views/livewire/image-picker.blade.php
@@ -0,0 +1,43 @@
+<div>
+    <form wire:submit.prevent="save" enctype="multipart/form-data" method="GET">
+        @csrf
+        <div class="d-flex align-items-center justify-content-center">
+            @if ($errors->any())
+                <div class="alert alert-danger" role="alert">
+                    <p><strong>There are some errors. Please correct them and try again.</strong></p>
+                    @foreach ($errors->all() as $error)
+                        {{ $error }}
+                    @endforeach
+                </div>
+            @else
+                <div class="flex-shrink-1">
+                    @if($image)
+                        <img src="{{ $image->temporaryUrl() }}" alt="">
+                    @else
+                        <img src="{{ $existing_image_url }}" alt="">
+                    @endif
+                </div>
+            @endif
+
+            <div class="m-3 col-5">
+                <label for="image-{{$custom_key}}" class="btn btn-secondary btn-block"><i class="fas fa-plus"></i> Select Image</label>
+                <input type="file" wire:model="image" name="image-{{$custom_key}}" id="image-{{$custom_key}}" accept = "image/*" style="display: none;">
+                <small class="text-muted">{{ $custom_msg }}</small>
+            </div>
+        </div>
+        
+        @if(isset($partial_view))
+            @include($partial_view)
+        @endif
+
+        <div class="flex-row control-group border-top-1 mt-4 p-4">
+            <div class="row justify-content-center">
+                <button type="button" class="btn btn-secondary mr-3 col-3" data-dismiss="modal" aria-label="Close">Cancel</button>
+
+                <button type="submit" class="btn btn-primary ml-3 col-3" data-toggle="replace-icon" data-newicon="fas fa-sync fa-spin">
+                    <i class="fas fa-upload"></i> Save
+                </button>
+            </div>
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/partials/_fancy-header-settings.blade.php b/resources/views/livewire/partials/_fancy-header-settings.blade.php
new file mode 100644
index 00000000..4ab6c581
--- /dev/null
+++ b/resources/views/livewire/partials/_fancy-header-settings.blade.php
@@ -0,0 +1,9 @@
+<fieldset class="form-group row py-2">
+        <div id="fancy_header_options">
+                <div class="form-group">
+                <input id="fancy_header_right" type="checkbox" wire:model="callback_params.fancy_header_right">
+                <label class="form-check-label" for="fancy_header_right">Align Header Right</label>
+                </div>
+
+        </div>
+</fieldset>
\ No newline at end of file
diff --git a/resources/views/livewire/profile-header-editor-modal.blade.php b/resources/views/livewire/profile-header-editor-modal.blade.php
new file mode 100644
index 00000000..651ab852
--- /dev/null
+++ b/resources/views/livewire/profile-header-editor-modal.blade.php
@@ -0,0 +1,79 @@
+<div id="profile_header_editor" class="modal fade" tabindex="-1" role="dialog" aria-hidden="false" wire:ignore.self>
+    <div class="modal-dialog modal-dialog-scrollable modal-xl">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title mt-0 mb-0 ml-2">1- Select Profile Header Style</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+
+            <div class="modal-body">
+                <div class="container-md">
+                    <div class="d-flex justify-content-around flex-wrap-sm-only">
+                        <label class="card-radio mr-2">
+                            <div class="form-check form-check-inline">
+                                {!! Form::label("profile_enabled", "Avatar Layout (Default)", ['class' => 'form-check-label']) !!}
+                                {!! Form::radio("fancy_header", '0', $fancy_header === '0', ['wire:model' => 'fancy_header', 'id' => "profile_enabled", 'class' => 'form-check-input'])!!}
+                            </div>
+                            <div class="d-flex">
+                                <div>
+                                    <img class="card-img-top" src="{{ 'img/default.png' }}" alt="{{ 'profile photo example' }}">
+                                </div>
+                            
+                                <div class="col-6 align-content-center">
+                                    @include('profiles/profile_card_example')
+                                </div>
+                            </div>
+                        </label>
+                 
+                        <label class="card-radio">
+                            <div class="form-check form-check-inline">
+                                {!! Form::label("banner_enabled", "Cover Layout", ['class' => 'form-check-label']) !!}
+                                {!! Form::radio("fancy_header", '1', $fancy_header === '1', ['wire:model' => 'fancy_header', 'id' => "banner_enabled", 'class' => 'form-check-input'])!!}
+                            </div>
+                            <div class="d-flex" style="background-image: url('img/cover.png'); height: 90%;">
+                                <div class="col-6 align-content-center" style="background-color: #fff; margin: 0.75rem; padding: 0.75rem;">
+                                    @include('profiles/profile_card_example')
+                                </div>
+                            </div>
+                        </label>
+                    </div>
+
+                    @if(!$fancy_header)
+                        <h5>2- Select Avatar Image</h5>
+                        @livewire('image-picker', $avatar_settings + ['model' => $profile])
+                    @else
+                        <h5>2- Select Cover Image</h5>
+                        @livewire('image-picker', $cover_settings + ['model' => $profile])
+                    @endif
+                   
+                </div>
+            </div>
+        </div>
+    </div>
+    <style>
+        .card-radio {
+            border: 2px solid #ccc;
+            border-radius: 8px;
+            padding: 20px;
+            cursor: pointer;
+            transition: border-color 0.3s, background-color 0.3s;
+            max-width: 50%;
+            flex: 0 0 50%;
+        }
+    
+        .card-radio input {
+            display: none;
+        }
+    
+        /* Styling for selected card */
+        .card-radio:has(input:checked) {
+            border-color: #198754;
+        }
+
+        .border-top-1 {
+            border-top: 1px solid #dee2e6;
+        }
+    </style>
+</div>
diff --git a/resources/views/profiles/edit/information.blade.php b/resources/views/profiles/edit/information.blade.php
index 422ebe09..758033a8 100644
--- a/resources/views/profiles/edit/information.blade.php
+++ b/resources/views/profiles/edit/information.blade.php
@@ -1,45 +1,7 @@
 <h1>Edit <a href="{{ action('ProfilesController@show', [$profile->slug]) }}">{{$profile->name}}</a>'s Contact Information</h1>
 <div class="row">
 	@foreach($data as $info)
-		<div class="col col-md-4">
-			{!! Form::open(['url' => route('profiles.update-image', [$profile->slug]), 'method' => 'POST', 'files' => true]) !!}
-			<label for="file">Icon</label>
-			<img id="file-img" class="profile_photo" src="{{ $profile->imageUrl }}" />
-			<br />
-			<br />
-			<div class="control-group">
-				<div class="controls">
-					{!! Form::file('image', ['id' => 'file', 'name' => 'image', 'required' => 'true', 'accept' => 'image/*', 'class' => 'd-none form-control']) !!}
-					<label for="file" class="btn btn-secondary btn-block"><i class="fas fa-plus"></i> Select Image</label>
-					{!! Form::inlineErrors('image') !!}
-				</div>
-			</div>
-			<button type="submit" class="btn btn-primary btn-block" data-toggle="replace-icon" data-newicon="fas fa-sync fa-spin" data-inputrequired="#file">
-				<i class="fas fa-upload"></i> Replace Image
-			</button>
-			{!! Form::close() !!}
-			<br>
-			<br>
-			{!! Form::open(['url' => route('profiles.update-banner', [$profile->slug]), 'method' => 'POST', 'files' => true]) !!}
-			<label for="banner">Banner</label>
-			<img id="banner-img" class="profile_photo" src="{{ $profile->banner_url }}" />
-			<br />
-			<br />
-			<div class="control-group">
-				<div class="controls">
-					{!! Form::file('banner_image', ['id' => 'banner', 'name' => 'banner_image', 'required' => 'true', 'accept' => 'image/*', 'class' => 'd-none form-control']) !!}
-					<label for="banner" class="btn btn-secondary btn-block"><i class="fas fa-plus"></i> Select Image</label>
-					{!! Form::inlineErrors('banner_image') !!}
-				</div>
-			</div>
-			<button type="submit" class="btn btn-primary btn-block" data-toggle="replace-icon" data-newicon="fas fa-sync fa-spin" data-inputrequired="#banner">
-				<i class="fas fa-upload"></i> Replace Image
-			</button>
-			{!! Form::close() !!}
-			<br>
-			<br>
-		</div>
-		<div class="col col-md-8 col-12">
+		<div class="col">
 			{!! Form::model($profile, ['route' => ['profiles.update', 'profile' => $profile, 'section' => 'information']]) !!}
 			<div class="form-group">
 				{!! Form::label('full_name', 'Display Name') !!}
@@ -156,46 +118,6 @@
 					<p class="text-muted">Refresh all publications via ORCID. All previous publications will be removed and fresh data will be pulled in at regular intervals. Keep unchecked to manually edit your publications.</p>
 				</div>
 			</fieldset>
-			<fieldset id="fancy_header" class="form-group row my-3 py-4 border-top">
-				<div class="col col-12 col-xl-7">
-					<div class="form-group form-check p-0">
-						<input type="hidden" name="data[{{$info->id}}][data][fancy_header]" value="0">
-						<input
-							type="checkbox"
-							name="data[{{$info->id}}][data][fancy_header]"
-							id="data[{{$info->id}}][data][fancy_header]"
-							@checked(old("data.{$info->id}.data.fancy_header", $info->fancy_header))
-							value="1"
-							data-toggle="show"
-							data-toggle-target="#fancy_header_options"
-						>
-						<label class="form-check-label" for="data[{{$info->id}}][data][fancy_header]">Fancy Header</label>
-					</div>
-					{{-- reset sub-options if main option is unchecked --}}
-					<input type="hidden" name="data[{{$info->id}}][data][fancy_header_right]" value="0">
-					<div
-						id="fancy_header_options"
-						class="border-left ml-3"
-						@style([
-							'display: none' => !old('data.show_accepting_students', $info->show_accepting_students)
-						])
-					>
-						<div class="form-group form-check">
-							<input
-								type="checkbox"
-								name="data[{{$info->id}}][data][fancy_header_right]"
-								id="data[{{$info->id}}][data][fancy_header_right]"
-								@checked(old("data.{$info->id}.data.fancy_header_right", $info->fancy_header_right))
-								value="1"
-							>
-							<label class="form-check-label" for="data[{{$info->id}}][data][fancy_header_right]">Align Header Right</label>
-						</div>
-					</div>
-				</div>
-				<div class="col col-12 col-xl-5">
-					<p class="text-muted">This will use a full-width header style - please make sure uploaded banner image is of sufficient quality!</p>
-				</div>
-			</fieldset>
 			<fieldset id="show_accepting" class="form-group row my-3 py-4 border-top">
 				<div class="col col-12 col-xl-7">
 					<div class="form-group form-check p-0">
diff --git a/resources/views/profiles/profile_card_example.blade.php b/resources/views/profiles/profile_card_example.blade.php
new file mode 100644
index 00000000..363e9045
--- /dev/null
+++ b/resources/views/profiles/profile_card_example.blade.php
@@ -0,0 +1,84 @@
+
+<div class="placeholder">
+    <div class="placeholder-name"></div>
+    <div class="placeholder-btn archive"></div>
+    <div class="placeholder-btn edit"></div>
+</div>
+<div class="placeholder">
+    <div class="placeholder-title"></div>
+</div>
+<div class="placeholder">
+    <i class="placeholder-icon fa fa-fw fa-envelope" aria-label="Email address"></i> <div class="placeholder-contact"></div>
+</div>
+<div class="placeholder">
+    <i class="placeholder-icon fa fa-fw fa-phone" aria-label="Phone number"></i> <div class="placeholder-contact"></div>
+</div>
+<div class="placeholder">
+    <i class="placeholder-icon fa fa-fw fa-map-marker" aria-label="Location"></i> <div class="placeholder-contact"></div>
+</div>
+<div class="placeholder">
+    <i class="placeholder-icon fa fa-fw fa-tags" aria-label="Tag"></i>
+    @foreach(range(1, 3) as $i)
+        <div class="placeholder-btn tag"></div>
+    @endforeach
+</div>
+<style>
+    .placeholder {
+        height: 1rem;
+        margin-bottom: 0.5rem;
+        display: flex;
+        gap: 0.5rem;
+        overflow: hidden;
+    }
+
+    .placeholder-name {
+        border-radius: 3px;
+        background-color: #e9ecef;
+        flex-grow: 0.80;
+        height: 1rem;
+    }
+    
+    .placeholder-btn {
+        height: 0.85rem;
+        flex-grow: 0.2;
+        border-radius: 3px;
+    }
+    .placeholder-btn.archive {
+        background-color: #dd94aa;
+    }
+    
+    .placeholder-btn.edit {
+        background-color: #7faaa6;
+    }
+
+    .placeholder-btn.tag {
+        background-color: #7faaa6;
+        flex-grow: 20;
+    }
+
+    .placeholder-title {
+        border-radius: 3px;
+        background-color: #e9ecef;
+        flex-grow: 1;
+        height: 1rem;
+    }
+    
+    .placeholder-contact {
+        border-radius: 3px;
+        background-color: #e9ecef;
+        flex-grow: 100;
+    }
+
+    .placeholder-icon {
+        color: #e9ecef;
+        flex-grow: 0.5;
+        flex-shrink: 0;
+        font-size: 0.85rem;
+    }
+
+    @media (max-width: 576px) { /* Below Bootstrap sm (576px) */
+    .flex-wrap-sm-only {
+        flex-wrap: wrap !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/resources/views/profiles/show.blade.php b/resources/views/profiles/show.blade.php
index 117af383..0e715881 100644
--- a/resources/views/profiles/show.blade.php
+++ b/resources/views/profiles/show.blade.php
@@ -37,8 +37,17 @@
 				@if(!$information->fancy_header)
 					<div class="col-md-5 col-sm-6">
 						<img class="profile_photo" src="{{ $profile->image_url }}" alt="{{ $profile->full_name }}">
+						@if($editable)
+						<div class="edit_photo_button">
+							<a class="d-flex btn-sm btn-info btn" href="#" data-target="#profile_header_editor" data-toggle="modal" role="button">
+								<small><i class="fas fa-camera"></i> Edit</small>
+							</a>
+						</div>
+						@endif
+						
 					</div>
 				@endif
+				<livewire:profile-header-editor-modal :profile="$profile">
 				<div class="@if($information->fancy_header)col-lg-5 @else col-md-7 col-sm-6 @endif">
 					<div class="contact_info">
 
@@ -110,6 +119,14 @@
 				@endif
 			</div>
 		</div>
+		@if($editable & $information->fancy_header)
+			<div class="d-flex edit_banner_button">
+				<a class="btn-sm btn-info btn" href="#" data-target="#profile_header_editor" data-toggle="modal" role="button">
+					<small><i class="fas fa-camera"></i> Edit</small>
+				</a>
+			</div>
+		@endif
+		
 	</div>
 	<nav id="links" class="container links" aria-label="profile sections">
 		<ul>
diff --git a/routes/web.php b/routes/web.php
index ac007f25..d3902eb4 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -113,8 +113,6 @@
         Route::name('confirm-restore')->get('confirm-restore', [ProfilesController::class, 'confirmRestore'])->withTrashed();
         Route::name('archive')->delete('archive', [ProfilesController::class, 'archive']);
         Route::name('restore')->post('restore', [ProfilesController::class, 'restore'])->withTrashed();
-        Route::name('update-image')->post('/image', 'ProfilesController@updateImage');
-        Route::name('update-banner')->post('/banner', 'ProfilesController@updateBanner');
         Route::name('orcid')->get('/orcid', 'ProfilesController@orcid');
     });
 
diff --git a/tests/Feature/Livewire/ImagePickerTest.php b/tests/Feature/Livewire/ImagePickerTest.php
new file mode 100644
index 00000000..98f89f23
--- /dev/null
+++ b/tests/Feature/Livewire/ImagePickerTest.php
@@ -0,0 +1,131 @@
+<?php
+
+namespace Tests\Feature\Livewire;
+
+use Livewire\Livewire;
+use App\Http\Livewire\ImagePicker;
+use App\Profile;
+use Tests\TestCase;
+use Tests\Feature\Traits\HasUploadedImage;
+use Tests\Feature\Traits\LoginWithRole;
+
+class ImagePickerTest extends TestCase
+{
+    use LoginWithRole, HasUploadedImage;
+    
+    /** @test */
+    public function can_preview_image()
+    {
+        $image = $this->mockUploadedImage();
+
+        $component = Livewire::test(ImagePicker::class)
+                        ->set('image', $image)
+                        ->assertHasNoErrors('image');
+
+        $component->assertSee(explode(":", $component->image)[1]);
+    }
+
+    /** @test */
+    public function can_upload_profile_avatar()
+    {
+        $profile = Profile::factory()->hasData()->create();
+
+        $user = $profile->user;
+        
+        $route = route('profiles.show', $profile);
+        
+        $image = $this->mockUploadedImage();
+
+        $this->assertFalse($profile->hasImage('images'));
+
+        $component = Livewire::actingAs($user)
+                        ->test(ImagePicker::class, [
+                                'model' => $profile,
+                                'save_function' => 'processImage',
+                                'save_params' => [
+                                        'collection' => 'images',
+                                    ],
+                                'image_param_name' => 'new_image',
+                                'callback_function' => 'updateLayoutSettings',
+                                'callback_params' => [
+                                    'fancy_header' => false,
+                                    'fancy_header_right' => false,
+                                ],
+                                'redirect_route' => $route,
+                                'partial_view' => 'livewire.partials._fancy-header-settings',
+                                'auth_params' => ['update', [Profile::class, $profile]],
+                            ]);
+
+        $component->set('image', $image) // Updates image property
+                    ->assertHasNoErrors('image')
+                    ->call('save') // Runs save function and callback function to upload image and update profile
+                    ->assertRedirect($route)
+                    ->assertStatus(200);
+    
+        $profile->refresh();
+
+        $this->get($route)
+                ->assertSessionHasNoErrors()
+                ->assertStatus(200)
+                ->assertViewIs('profiles.show')
+                ->assertSee('Profile image has been updated.')
+                ->assertSee($profile->image_url);
+
+        $this->assertFalse($profile->hasFancyHeader());
+        $this->assertTrue($profile->hasImage('images'));
+        $this->assertFileExists($profile->getFirstMedia('images')->getPath());
+
+    }
+
+    /** @test */
+    public function can_upload_profile_cover()
+    {
+        $profile = Profile::factory()->hasData()->create();
+
+        $user = $profile->user;
+        
+        $route = route('profiles.show', $profile);
+        
+        $image = $this->mockUploadedImage();
+
+        $this->assertFalse($profile->hasImage('banners'));
+
+        $component = Livewire::actingAs($user)
+                        ->test(ImagePicker::class, [
+                                'model' => $profile,
+                                'save_function' => 'processImage',
+                                'save_params' => [
+                                        'collection' => 'banners',
+                                    ],
+                                'image_param_name' => 'new_image',
+                                'callback_function' => 'updateLayoutSettings',
+                                'callback_params' => [
+                                    'fancy_header' => true,
+                                    'fancy_header_right' => false,
+                                ],
+                                'redirect_route' => $route,
+                                'partial_view' => 'livewire.partials._fancy-header-settings',
+                                'auth_params' => ['update', [Profile::class, $profile]],
+                            ]);
+
+        $component->set('image', $image) // Updates image property
+                    ->assertHasNoErrors('image')
+                    ->call('save') // Runs save function and callback function to upload image and update profile
+                    ->assertRedirect($route)
+                    ->assertStatus(200);
+    
+        $profile->refresh();
+
+        $this->get($route)
+                ->assertSessionHasNoErrors()
+                ->assertStatus(200)
+                ->assertViewIs('profiles.show')
+                ->assertSee('Profile image has been updated.')
+                ->assertSee($profile->banner_url);
+
+        $this->assertTrue($profile->hasFancyHeader());
+        $this->assertTrue($profile->hasImage('banners'));
+        $this->assertFileExists($profile->getFirstMedia('banners')->getPath());
+    }
+
+}
diff --git a/tests/Feature/ProfileTest.php b/tests/Feature/ProfileTest.php
index 3d999fc9..5e63eee2 100644
--- a/tests/Feature/ProfileTest.php
+++ b/tests/Feature/ProfileTest.php
@@ -156,27 +156,8 @@ public function testProfileInformationEdit()
             ->assertSee($new_profile_data->secondary_url)
             ->assertSee($new_profile_data->tertiary_url)
             ->assertSee($new_profile_data->orc_id)
-            ->assertDontSee('fancy_header')
             ->assertDontSeeText('Sync');
 
-        // With Fancy Header
-        $response = $this->followingRedirects()->post($information_update_route, [
-            'data' => [
-                1 => [
-                    'id' => $profile_data->id,
-                    'data' => $profile_post_data + [
-                        'orc_id_managed' => 0,
-                        'fancy_header' => 1,
-                        'fancy_header_right' => 0,
-                    ],
-                ],
-            ],
-            'full_name' => $new_profile_displayname,
-            'public' => 1,
-        ]);
-
-        $response->assertSee('fancy_header');
-
         // With ORCID Syncing
         $response = $this->followingRedirects()->post($information_update_route, [
             'data' => [
@@ -184,8 +165,7 @@ public function testProfileInformationEdit()
                     'id' => $profile_data->id,
                     'data' => $profile_post_data + [
                         'orc_id_managed' => 1,
-                        'fancy_header' => 1,
-                        'fancy_header_right' => 0,
+                        'orc_id' => $new_profile_data->orc_id,
                     ],
                 ],
             ],
@@ -196,60 +176,4 @@ public function testProfileInformationEdit()
         $response->assertSeeText('Sync');
     }
 
-    /**
-     * Test editing the profile image
-     *
-     * @return void
-     */
-    public function testProfileImageEdit()
-    {
-        $profile = Profile::factory()->hasData()->create();
-
-        $image_update_route = route('profiles.update-image', [
-            'profile' => $profile,
-        ]);
-
-        $this->loginAsAdmin();
-
-        $response = $this->followingRedirects()->post($image_update_route, [
-            'image' => $this->mockUploadedImage(),
-        ]);
-
-        $response
-            ->assertSessionHasNoErrors()
-            ->assertStatus(200)
-            ->assertViewIs('profiles.edit')
-            ->assertSee('Profile image has been updated.');
-
-        $this->assertFileExists($profile->getFirstMedia('images')->getPath());
-    }
-
-    /**
-     * Test editing the profile banner image
-     *
-     * @return void
-     */
-    public function testProfileBannerEdit()
-    {
-        $profile = Profile::factory()->hasData()->create();
-
-        $image_update_route = route('profiles.update-banner', [
-            'profile' => $profile,
-        ]);
-
-        $this->loginAsAdmin();
-
-        $response = $this->followingRedirects()->post($image_update_route, [
-            'banner_image' => $this->mockUploadedImage(),
-        ]);
-
-        $response
-            ->assertSessionHasNoErrors()
-            ->assertStatus(200)
-            ->assertViewIs('profiles.edit')
-            ->assertSee('Profile image has been updated.');
-
-        $this->assertFileExists($profile->getFirstMedia('banners')->getPath());
-    }
-
 }