diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 4a70c53..c942afd 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -949,7 +949,6 @@
               />
               <div class="field-row-actions">
                 <GnCheckbox v-model="field.encrypted" label="Encrypt" />
-                <div class="input-info">Encrypted fields cannot be searched by value.</div>
                 <GnIconButton
                   icon="ph ph-trash"
                   label="Remove field"
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index eff4530..af15a9d 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -78,6 +78,14 @@
   }
 }
 
+.modal.a-show .modal-backdrop {
+  animation: gnexus-creds-modal-backdrop 0.18s ease-out both;
+}
+
+.modal.a-show .modal-dialog {
+  animation: gnexus-creds-modal-dialog 0.22s ease-out both;
+}
+
 .search-line {
   display: flex;
   gap: 10px;
@@ -128,49 +136,74 @@
 
 .create-modal-body {
   display: grid;
-  gap: 16px;
-  width: min(860px, calc(100vw - 48px));
+  gap: 12px;
+  width: min(900px, calc(100vw - 48px));
   max-width: 100%;
 }
 
+.create-modal-body .form-group {
+  max-width: none;
+  margin-bottom: 0;
+}
+
+.create-modal-body .form-group .label .input {
+  min-height: 48px;
+}
+
+.create-modal-body .form-group .label textarea.input {
+  height: 92px;
+}
+
+.create-modal-body .form-group .input-info {
+  font-size: 13px;
+  line-height: 1.45;
+}
+
 .modal-help {
   margin: 0;
 }
 
 .modal-section {
   display: grid;
-  gap: 12px;
+  gap: 10px;
 }
 
 .create-fields {
   display: grid;
-  gap: 12px;
+  gap: 8px;
 }
 
 .create-field-row {
   display: grid;
-  grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1.2fr) minmax(150px, auto);
-  gap: 12px;
+  grid-template-columns: minmax(170px, 0.8fr) minmax(220px, 1fr) minmax(120px, auto);
+  gap: 10px;
   align-items: start;
+  padding: 10px;
+  border: 2px solid rgba(192, 202, 245, 0.14);
+  background: rgba(22, 22, 30, 0.22);
 }
 
 .field-row-actions {
-  display: grid;
+  display: flex;
   gap: 8px;
-  justify-items: start;
-  padding-top: 2px;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 28px;
 }
 
 .create-access-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
+  gap: 10px;
 }
 
 .access-option {
   display: grid;
-  gap: 6px;
+  gap: 4px;
   align-content: start;
+  padding: 10px;
+  border: 2px solid rgba(192, 202, 245, 0.14);
+  background: rgba(22, 22, 30, 0.22);
 }
 
 .identity-cell {
@@ -236,3 +269,25 @@
     width: calc(100vw - 28px);
   }
 }
+
+@keyframes gnexus-creds-modal-backdrop {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes gnexus-creds-modal-dialog {
+  from {
+    opacity: 0;
+    transform: translateY(-18px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}