diff --git a/user_details.php b/user_details.php
index 717eccd7..c28c0709 100644
--- a/user_details.php
+++ b/user_details.php
@@ -4,7 +4,7 @@ require_once "includes/inc_all_user.php";
 ?>
 
 <div class="card card-dark">
-    <div class="card-header py-3">
+    <div class="card-header">
         <h3 class="card-title"><i class="fas fa-fw fa-user mr-2"></i>Your User Details</h3>
     </div>
     <div class="card-body">
@@ -12,49 +12,55 @@ require_once "includes/inc_all_user.php";
         <form action="post.php" method="post" enctype="multipart/form-data" autocomplete="off">
             <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token'] ?>">
 
-            <center class="mb-3 px-5">
-                <?php if (empty($session_avatar)) { ?>
-                    <i class="fas fa-user-circle fa-8x text-secondary"></i>
-                <?php } else { ?>
-                    <img alt="User avatar" src="<?php echo "uploads/users/$session_user_id/" . nullable_htmlentities($session_avatar); ?>" class="img-size-64">
-                <?php } ?>
-                <h4 class="text-secondary mt-2"><?php echo nullable_htmlentities($session_user_role_display); ?></h4>
-            </center>
-
-            <hr>
-
-            <div class="form-group">
-                <label>Your Name <strong class="text-danger">*</strong></label>
-                <div class="input-group">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text"><i class="fa fa-fw fa-user"></i></span>
+            <div class="row">
+                <div class="col-md-3 text-center">
+                    <?php if(file_exists("uploads/users/$session_user_id/$session_avatar")) { ?>
+                    <img class="img-thumbnail" src="<?php echo "uploads/users/$session_user_id/" . nullable_htmlentities($session_avatar); ?>">
+                    <a href="post.php?clear_your_user_avatar&csrf_token=<?= $_SESSION['csrf_token'] ?>" class="btn btn-outline-danger btn-block">Remove Avatar</a>
+                    <hr>
+                    <?php } ?>
+                    <div class="form-group">
+                        <label>Upload Avatar</label>
+                        <input type="file" class="form-control-file" accept="image/*" name="avatar">
                     </div>
-                    <input type="text" class="form-control" name="name" placeholder="Full Name" value="<?php echo stripslashes(nullable_htmlentities($session_name)); ?>" required>
+                </div>
+                <div class="col-9">
+
+                    <div class="form-group">
+                        <label>Your Name <strong class="text-danger">*</strong></label>
+                        <div class="input-group">
+                            <div class="input-group-prepend">
+                                <span class="input-group-text"><i class="fa fa-fw fa-user"></i></span>
+                            </div>
+                            <input type="text" class="form-control" name="name" placeholder="Full Name" value="<?php echo stripslashes(nullable_htmlentities($session_name)); ?>" required>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <label>Your Role</label>
+                        <div class="input-group">
+                            <div class="input-group-prepend">
+                                <span class="input-group-text"><i class="fa fa-fw fa-user-shield"></i></span>
+                            </div>
+                            <input type="text" class="form-control" value="<?php echo nullable_htmlentities($session_user_role_display); ?>" disabled>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <label>Your Email <strong class="text-danger">*</strong></label>
+                        <div class="input-group">
+                            <div class="input-group-prepend">
+                                <span class="input-group-text"><i class="fa fa-fw fa-envelope"></i></span>
+                            </div>
+                            <input type="email" class="form-control" name="email" placeholder="Email Address" value="<?php echo nullable_htmlentities($session_email); ?>" required>
+                        </div>
+                    </div>
+                    
+                    <button type="submit" name="edit_your_user_details" class="btn btn-primary"><i class="fas fa-check mr-2"></i>Save</button>
+
                 </div>
             </div>
 
-            <div class="form-group">
-                <label>Your Email <strong class="text-danger">*</strong></label>
-                <div class="input-group">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text"><i class="fa fa-fw fa-envelope"></i></span>
-                    </div>
-                    <input type="email" class="form-control" name="email" placeholder="Email Address" value="<?php echo nullable_htmlentities($session_email); ?>" required>
-                </div>
-            </div>
-
-            <div class="form-group">
-                <label>Your Avatar</label>
-                <?php if ($session_avatar) { ?>
-                    <br><a href="post.php?clear_your_user_avatar&csrf_token=<?= $_SESSION['csrf_token'] ?>">Avatar is set, click to clear</a>
-                <?php } else { ?>
-                    <input type="file" class="form-control-file" accept="image/*" name="avatar">
-                <?php } ?>
-            </div>
-
-            <button type="submit" name="edit_your_user_details" class="btn btn-primary btn-block mt-3"><i class="fas fa-check mr-2"></i>Save</button>
-
-
         </form>
                 
     </div>
diff --git a/user_preferences.php b/user_preferences.php
index ef9314f7..18bed96d 100644
--- a/user_preferences.php
+++ b/user_preferences.php
@@ -7,7 +7,7 @@ $user_config_calendar_first_day = intval($row['user_config_calendar_first_day'])
 ?>
 
 <div class="card card-dark">
-    <div class="card-header py-3">
+    <div class="card-header">
         <h3 class="card-title"><i class="fas fa-fw fa-globe mr-2"></i>Preferences</h3>
     </div>
     <div class="card-body">