diff --git a/resources/views/themes/admin/console-edit.tpl b/resources/views/themes/admin/console-edit.tpl
index 15c12dd89..777819540 100644
--- a/resources/views/themes/admin/console-edit.tpl
+++ b/resources/views/themes/admin/console-edit.tpl
@@ -1,105 +1,243 @@
-<h1>{$title}</h1>
-<div class="card card-body">
-	<a class="btn btn-success" href="{{url("/admin/console-list")}}"><i class="fa fa-arrow-left"></i> Go
-		back</a>
-	<form enctype="multipart/form-data" action="console-edit?action=submit" method="post">
-		{{csrf_field()}}
+<div class="card">
+				    <div class="card-header">
+				        <div class="d-flex justify-content-between align-items-center">
+				            <h4 class="mb-0">{$title}</h4>
+				            <a href="{{url("/admin/console-list")}}" class="btn btn-outline-secondary">
+				                <i class="fa fa-arrow-left me-2"></i>Back to Console List
+				            </a>
+				        </div>
+				    </div>
 
-		<input type="hidden" name="id" value="{$console.id}"/>
+				    <div class="card-body">
+				        <form enctype="multipart/form-data" action="console-edit?action=submit" method="post" class="needs-validation" novalidate>
+				            {{csrf_field()}}
+				            <input type="hidden" name="id" value="{$console.id}"/>
 
-		<table class="input data table table-striped responsive-utilities jambo-table">
+				            <div class="row g-3">
+				                <!-- Basic Information -->
+				                <div class="col-12">
+				                    <h5 class="border-bottom pb-2 mb-3">Console Information</h5>
+				                </div>
 
-			<tr>
-				<td><label for="title">Title</label>:</td>
-				<td>
-					<input id="title" class="long" name="title" type="text" value="{$console.title|escape:'htmlall'}"/>
-				</td>
-			</tr>
+				                <div class="col-md-12 mb-3">
+				                    <label for="title" class="form-label">Title</label>
+				                    <input id="title" class="form-control" name="title" type="text" value="{$console.title|escape:'htmlall'}" required />
+				                    <div class="invalid-feedback">Please enter a title</div>
+				                </div>
 
-			<tr>
-				<td><label for="asin">ASIN</label>:</td>
-				<td>
-					<input id="asin" name="asin" type="text" value="{$console.asin|escape:'htmlall'}"/>
-				</td>
-			</tr>
+				                <div class="col-md-6 mb-3">
+				                    <label for="asin" class="form-label">ASIN</label>
+				                    <div class="input-group">
+				                        <span class="input-group-text"><i class="fa fa-barcode"></i></span>
+				                        <input id="asin" class="form-control" name="asin" type="text" value="{$console.asin|escape:'htmlall'}" />
+				                    </div>
+				                </div>
 
-			<tr>
-				<td><label for="url">URL</label>:</td>
-				<td>
-					<input id="url" class="long" name="url" type="text" value="{$console.url|escape:'htmlall'}"/>
-				</td>
-			</tr>
+				                <div class="col-md-6 mb-3">
+				                    <label for="platform" class="form-label">Platform</label>
+				                    <div class="input-group">
+				                        <span class="input-group-text"><i class="fa fa-gamepad"></i></span>
+				                        <input id="platform" class="form-control" name="platform" type="text" value="{$console.platform|escape:'htmlall'}" required />
+				                    </div>
+				                    <div class="invalid-feedback">Please specify the platform</div>
+				                </div>
 
-			<tr>
-				<td><label for="salesrank">Sales Rank</label>:</td>
-				<td>
-					<input id="salesrank" class="short" type="text" name="salesrank"
-						   value="{$console.salesrank|escape:'htmlall'}"/>
-				</td>
-			</tr>
+				                <div class="col-md-6 mb-3">
+				                    <label for="genre" class="form-label">Genre</label>
+				                    <select id="genre" name="genre" class="form-select" required>
+				                        {foreach $genres as $gen}
+				                            <option {if $gen.id == $console.genres_id}selected="selected"{/if} value="{$gen.id}">{$gen.title|escape:'htmlall'}</option>
+				                        {/foreach}
+				                    </select>
+				                    <div class="invalid-feedback">Please select a genre</div>
+				                </div>
 
-			<tr>
-				<td><label for="platform">Platform</label>:</td>
-				<td>
-					<input id="platform" class="long" name="platform" type="text"
-						   value="{$console.platform|escape:'htmlall'}"/>
-				</td>
-			</tr>
+				                <div class="col-md-6 mb-3">
+				                    <label for="publisher" class="form-label">Publisher</label>
+				                    <div class="input-group">
+				                        <span class="input-group-text"><i class="fa fa-building"></i></span>
+				                        <input id="publisher" class="form-control" name="publisher" type="text" value="{$console.publisher|escape:'htmlall'}" />
+				                    </div>
+				                </div>
 
-			<tr>
-				<td><label for="publisher">Publisher</label>:</td>
-				<td>
-					<input id="publisher" class="long" name="publisher" type="text"
-						   value="{$console.publisher|escape:'htmlall'}"/>
-				</td>
-			</tr>
+				                <div class="col-md-6 mb-3">
+				                    <label for="releasedate" class="form-label">Release Date</label>
+				                    <div class="input-group">
+				                        <span class="input-group-text"><i class="fa fa-calendar"></i></span>
+				                        <input id="releasedate" class="form-control" name="releasedate" type="text" value="{$console.releasedate|escape:'htmlall'}" placeholder="YYYY-MM-DD" />
+				                    </div>
+				                </div>
 
-			<tr>
-				<td><label for="releasedate">Release Date</label>:</td>
-				<td>
-					<input id="releasedate" name="releasedate" type="text"
-						   value="{$console.releasedate|escape:'htmlall'}"/>
-				</td>
-			</tr>
+				                <div class="col-md-6 mb-3">
+				                    <label for="esrb" class="form-label">Rating</label>
+				                    <div class="input-group">
+				                        <span class="input-group-text"><i class="fa fa-star"></i></span>
+				                        <input id="esrb" class="form-control" name="esrb" type="text" value="{$console.esrb|escape:'htmlall'}" />
+				                    </div>
+				                </div>
 
-			<tr>
-				<td><label for="esrb">Rating</label>:</td>
-				<td>
-					<input id="esrb" class="short" name="esrb" type="text" value="{$console.esrb|escape:'htmlall'}"/>
-				</td>
-			</tr>
+				                <!-- Additional Details -->
+				                <div class="col-12 mt-4">
+				                    <h5 class="border-bottom pb-2 mb-3">Additional Details</h5>
+				                </div>
 
-			<tr>
-				<td><label for="genre">Genre</label>:</td>
-				<td>
-					<select id="genre" name="genre">
-						{foreach $genres as $gen}
-							<option {if $gen.id == $console.genres_id}selected="selected"{/if}
-									value="{$gen.id}">{$gen.title|escape:'htmlall'}</option>
-						{/foreach}
-					</select>
-				</td>
-			</tr>
+				                <div class="col-md-12 mb-3">
+				                    <label for="url" class="form-label">URL</label>
+				                    <div class="input-group">
+				                        <span class="input-group-text"><i class="fa fa-link"></i></span>
+				                        <input id="url" class="form-control" name="url" type="text" value="{$console.url|escape:'htmlall'}" />
+				                    </div>
+				                </div>
 
-			<tr>
-				<td><label for="cover">Cover Image</label>:</td>
-				<td>
-					<input type="file" id="cover" name="cover"/>
-					{if $console.cover == 1}
-						<img style="max-width:200px; display:block;"
-							 src="{{url("/covers/console/{$console.id}.jpg")}}" alt=""/>
-					{/if}
-				</td>
-			</tr>
+				                <div class="col-md-6 mb-3">
+				                    <label for="salesrank" class="form-label">Sales Rank</label>
+				                    <div class="input-group">
+				                        <span class="input-group-text"><i class="fa fa-line-chart"></i></span>
+				                        <input id="salesrank" class="form-control" type="text" name="salesrank" value="{$console.salesrank|escape:'htmlall'}" />
+				                    </div>
+				                </div>
 
-			<tr>
-				<td></td>
-				<td>
-					<input class="btn btn-success" type="submit" value="Save"/>
-				</td>
-			</tr>
+				                <!-- Cover Image -->
+				                <div class="col-12 mt-4">
+				                    <h5 class="border-bottom pb-2 mb-3">Console Cover</h5>
+				                </div>
 
-		</table>
+				                <div class="col-md-12 mb-3">
+				                    <label for="cover" class="form-label">Cover Image</label>
+				                    <div class="row">
+				                        <div class="col-md-8">
+				                            <input type="file" id="cover" name="cover" class="form-control" accept="image/*" />
+				                            <div class="form-text">Recommended size: 600x900 pixels (JPG format)</div>
+				                        </div>
+				                        <div class="col-md-4">
+				                            {if $console.cover == 1}
+				                                <div class="cover-preview text-center">
+				                                    <img src="{{url("/covers/console/{$console.id}.jpg")}}" alt="Cover" class="img-thumbnail" style="max-height: 200px;" />
+				                                </div>
+				                                <div class="text-center mt-2">
+				                                    <span class="badge bg-success">Current Cover</span>
+				                                </div>
+				                            {else}
+				                                <div class="text-center">
+				                                    <span class="badge bg-warning">No Cover Available</span>
+				                                </div>
+				                            {/if}
+				                        </div>
+				                    </div>
+				                </div>
 
-	</form>
-</div>
+				                <div class="col-12 mt-4">
+				                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+				                        <a href="{{url("/admin/console-list")}}" class="btn btn-outline-secondary">
+				                            <i class="fa fa-times me-2"></i>Cancel
+				                        </a>
+				                        <button type="submit" class="btn btn-success">
+				                            <i class="fa fa-save me-2"></i>Save Changes
+				                        </button>
+				                    </div>
+				                </div>
+				            </div>
+				        </form>
+				    </div>
+				</div>
+
+				<script>
+				{literal}
+				document.addEventListener('DOMContentLoaded', function() {
+				    // Initialize tooltips
+				    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+				    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+				        return new bootstrap.Tooltip(tooltipTriggerEl);
+				    });
+
+				    // Form validation
+				    var forms = document.querySelectorAll('.needs-validation');
+				    Array.prototype.slice.call(forms).forEach(function (form) {
+				        form.addEventListener('submit', function (event) {
+				            if (!form.checkValidity()) {
+				                event.preventDefault();
+				                event.stopPropagation();
+				            }
+				            form.classList.add('was-validated');
+				        }, false);
+				    });
+
+				    // Image preview functionality
+				    const coverInput = document.getElementById('cover');
+				    if (coverInput) {
+				        coverInput.addEventListener('change', function() {
+				            if (this.files && this.files[0]) {
+				                const file = this.files[0];
+				                const reader = new FileReader();
+
+				                reader.onload = function(e) {
+				                    const previewContainer = document.querySelector('.cover-preview');
+				                    if (previewContainer) {
+				                        previewContainer.innerHTML = `<img src="${e.target.result}" alt="Preview" class="img-thumbnail" style="max-height: 200px;">`;
+				                    } else {
+				                        const newPreview = document.createElement('div');
+				                        newPreview.className = 'cover-preview text-center';
+				                        newPreview.innerHTML = `<img src="${e.target.result}" alt="Preview" class="img-thumbnail" style="max-height: 200px;">`;
+
+				                        const parent = coverInput.closest('.col-md-8').nextElementSibling;
+				                        if (parent) {
+				                            parent.innerHTML = '';
+				                            parent.appendChild(newPreview);
+
+				                            const badgeContainer = document.createElement('div');
+				                            badgeContainer.className = 'text-center mt-2';
+				                            badgeContainer.innerHTML = `<span class="badge bg-info">New Cover Preview</span>`;
+				                            parent.appendChild(badgeContainer);
+				                        }
+				                    }
+				                };
+
+				                reader.readAsDataURL(file);
+				            }
+				        });
+				    }
+				});
+				{/literal}
+				</script>
+
+				<style>
+				{literal}
+				/* Form styling */
+				.form-control:focus {
+				    border-color: #80bdff;
+				    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+				}
+
+				/* Cover image preview */
+				.cover-preview {
+				    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+				    transition: transform 0.2s;
+				}
+
+				.cover-preview:hover {
+				    transform: translateY(-5px);
+				}
+
+				/* Section headings */
+				h5.border-bottom {
+				    color: #495057;
+				}
+
+				/* Responsive adjustments */
+				@media (max-width: 767.98px) {
+				    .card-header .d-flex {
+				        flex-direction: column;
+				        gap: 1rem;
+				    }
+
+				    .card-header .btn {
+				        width: 100%;
+				    }
+
+				    .cover-preview {
+				        margin: 0 auto;
+				        margin-top: 1rem;
+				    }
+				}
+				{/literal}
+				</style>
diff --git a/resources/views/themes/admin/console-list.tpl b/resources/views/themes/admin/console-list.tpl
index 710b9e6be..86d3c2311 100644
--- a/resources/views/themes/admin/console-list.tpl
+++ b/resources/views/themes/admin/console-list.tpl
@@ -1,31 +1,160 @@
-<h1>{$title}</h1>
+<div class="card">
+					    <div class="card-header">
+					        <div class="d-flex justify-content-between align-items-center">
+					            <h4 class="mb-0">{$title}</h4>
+					            <a href="{{url("/admin/console-add")}}" class="btn btn-outline-success">
+					                <i class="fa fa-plus me-2"></i>Add New Console
+					            </a>
+					        </div>
+					    </div>
 
-<div class="card card-body">
-	{if $consolelist}
-		{$consolelist->onEachSide(5)->links()}
-		<table style="margin-top:10px;" class="data table table-striped responsive-utilities jambo-table Sortable">
+					    <div class="card-body">
+					        <form name="consolesearch" method="get" action="{{url("/admin/console-list")}}" id="console-search-form" class="mb-4">
+					            {{csrf_field()}}
+					            <div class="row">
+					                <div class="col-md-6 offset-md-6">
+					                    <div class="input-group">
+					                        <input type="text" class="form-control" placeholder="Search by title or platform"
+					                               id="consolesearch" name="consolesearch" value="{$lastSearch|escape:'html'}">
+					                        <button type="submit" class="btn btn-primary">
+					                            <i class="fa fa-search me-2"></i>Search
+					                        </button>
+					                    </div>
+					                </div>
+					            </div>
+					        </form>
 
-			<tr>
-				<th>id</th>
-				<th>Title</th>
-				<th>Platform</th>
-				<th>Created</th>
-			</tr>
+					        {if $consolelist}
+					            <div class="table-responsive">
+					                <table class="table table-striped table-hover align-middle">
+					                    <thead class="thead-light">
+					                        <tr>
+					                            <th>ID</th>
+					                            <th>Title</th>
+					                            <th>Platform</th>
+					                            <th>Created</th>
+					                            <th class="text-end">Actions</th>
+					                        </tr>
+					                    </thead>
+					                    <tbody>
+					                        {foreach from=$consolelist item=console}
+					                            <tr>
+					                                <td>
+					                                    <span class="badge bg-secondary">{$console->id}</span>
+					                                </td>
+					                                <td>
+					                                    <div class="mb-1">
+					                                        <a href="{{url("/admin/console-edit?id={$console->id}")}}" class="title fw-semibold">
+					                                            {$console->title|escape:"htmlall"}
+					                                        </a>
+					                                    </div>
+					                                </td>
+					                                <td>
+					                                    <span class="badge bg-info">{$console->platform|escape:"htmlall"}</span>
+					                                </td>
+					                                <td>
+					                                    <div class="d-flex align-items-center">
+					                                        <i class="fa fa-calendar text-muted me-2"></i>
+					                                        <span title="{$console->created_at}">{$console->created_at|date_format}</span>
+					                                    </div>
+					                                </td>
+					                                <td class="text-end">
+					                                    <div class="btn-group btn-group-sm" role="group">
+					                                        <a href="{{url("/admin/console-edit?id={$console->id}")}}" class="btn btn-primary" data-bs-toggle="tooltip" title="Edit this console">
+					                                            <i class="fa fa-pencil"></i>
+					                                        </a>
+					                                        <a href="{{url("/admin/console-update?id={$console->id}")}}" class="btn btn-warning" data-bs-toggle="tooltip" title="Update metadata">
+					                                            <i class="fa fa-refresh"></i>
+					                                        </a>
+					                                        <a href="{{url("/admin/console-delete?id={$console->id}")}}" class="btn btn-danger" data-bs-toggle="tooltip" title="Delete console" onclick="return confirm('Are you sure you want to delete this console?')">
+					                                            <i class="fa fa-trash"></i>
+					                                        </a>
+					                                    </div>
+					                                </td>
+					                            </tr>
+					                        {/foreach}
+					                    </tbody>
+					                </table>
+					            </div>
+					        {else}
+					            <div class="alert alert-info">
+					                <i class="fa fa-info-circle me-2"></i>No consoles available. Use the Add New Console button to add some.
+					            </div>
+					        {/if}
+					    </div>
 
-			{foreach from=$consolelist item=console}
-				<tr class="{cycle values=",alt"}">
-					<td class="less">{$console->id}</td>
-					<td><a title="Edit"
-						   href="{{url("/admin/console-edit?id={$console->id}")}}">{$console->title}</a></td>
-					<td>{$console->platform}</td>
-					<td>{$console->created_at|date_format}</td>
-				</tr>
-			{/foreach}
+					    {if $consolelist}
+					        <div class="card-footer">
+					            <div class="d-flex justify-content-between align-items-center">
+					                <div>
+					                    Showing {$consolelist->firstItem()} to {$consolelist->lastItem()} of {$consolelist->total()} consoles
+					                </div>
+					                <div class="pagination-container overflow-auto">
+					                    {$consolelist->onEachSide(5)->links()}
+					                </div>
+					            </div>
+					        </div>
+					    {/if}
+					</div>
 
-		</table>
-		<br/>
-		{$consolelist->onEachSide(5)->links()}
-	{else}
-		<p>No games available.</p>
-	{/if}
-</div>
+					<script>
+					{literal}
+					document.addEventListener('DOMContentLoaded', function() {
+					    // Initialize tooltips
+					    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+					    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+					        return new bootstrap.Tooltip(tooltipTriggerEl);
+					    });
+					});
+					{/literal}
+					</script>
+
+					<style>
+					{literal}
+					/* Improve table responsiveness */
+					.table-responsive {
+					    overflow-x: auto;
+					    -webkit-overflow-scrolling: touch;
+					}
+
+					/* Badge styling */
+					.badge {
+					    font-weight: 500;
+					    padding: 0.4em 0.6em;
+					}
+
+					/* Pagination container */
+					.pagination-container {
+					    max-width: 100%;
+					}
+
+					/* Improve action buttons on small screens */
+					@media (max-width: 767.98px) {
+					    .btn-group .btn {
+					        padding: 0.375rem 0.5rem;
+					    }
+
+					    .card-footer .d-flex {
+					        flex-direction: column;
+					        gap: 0.5rem;
+					    }
+
+					    .pagination-container {
+					        justify-content: center !important;
+					    }
+					}
+
+					/* Improve search form on small screens */
+					@media (max-width: 767.98px) {
+					    #console-search-form .row {
+					        margin-right: 0;
+					        margin-left: 0;
+					    }
+
+					    #console-search-form .col-md-6 {
+					        padding-right: 0;
+					        padding-left: 0;
+					    }
+					}
+					{/literal}
+					</style>