diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
index 35b9563a03..b29e5e83d2 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
@@ -22,7 +22,11 @@
 </script>
 
 <form on:submit|preventDefault class="uk-form-stacked">
-  <div>
+<div class="main">
+  <div class="heading">
+    <i class="ri-list-settings-line button--toggled" />
+    <div class="title">Create User</div>
+  </div>
     <div class="uk-margin">
       <label class="uk-form-label" for="form-stacked-text">Username</label>
       <input class="uk-input" type="text" bind:value={username} />
@@ -41,18 +45,41 @@
     </div>
   </div>
   <footer>
-    <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
-    <ActionButton disabled={!valid} on:click={createUser}>Save</ActionButton>
+  <div class="button">
+    <ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
+  </div>
+    <ActionButton disabled={!valid}  on:click={createUser}>Save</ActionButton>
   </footer>
 </form>
 
 <style>
-  div {
-    padding: 30px;
+
+  .main {
+    padding: 40px 40px 20px 40px;
   }
+
+  .title {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--ink);
+    margin-left: 12px;
+  }
+
+  .heading {
+    display: flex;
+    align-items: baseline;
+  }
+
   footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
     padding: 20px;
     background: var(--grey-light);
-    border-radius: 0.5rem;
+    border-radius: 0 0 5px 5px;
+  }
+
+  .button {
+    margin-right: 20px;
   }
 </style>