diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 75372a2..2679791 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -35,6 +35,7 @@
 const auditMode = ref("all");
 const tokens = ref([]);
 const newToken = ref(null);
+const showCreateModal = ref(false);
 const showDeleteConfirm = ref(false);
 const editing = ref(false);
 const editFields = ref(false);
@@ -58,10 +59,11 @@
   tags: "",
   allow_ui: true,
   allow_rest_api: true,
-  allow_mcp: false,
-  fieldsText: "username=\npassword=*"
+  allow_mcp: false
 });
 
+const formFields = ref(defaultCreateFields());
+
 const editForm = reactive({
   title: "",
   purpose: "",
@@ -92,10 +94,7 @@
 );
 const activeSecrets = computed(() => secrets.value.filter((secret) => !secret.archived).length);
 const mcpSecrets = computed(() => secrets.value.filter((secret) => secret.allow_mcp).length);
-
-function parseFields() {
-  return parseFieldsText(form.fieldsText);
-}
+const canCreateSecret = computed(() => Boolean(form.title.trim() && parseCreateFields().length));
 
 function parseFieldsText(value) {
   return value
@@ -117,6 +116,60 @@
     .filter(Boolean);
 }
 
+function defaultCreateFields() {
+  return [
+    { id: crypto.randomUUID(), name: "username", value: "", encrypted: false },
+    { id: crypto.randomUUID(), name: "password", value: "", encrypted: true }
+  ];
+}
+
+function openCreateModal() {
+  showCreateModal.value = true;
+}
+
+function addCreateField() {
+  formFields.value.push({
+    id: crypto.randomUUID(),
+    name: "",
+    value: "",
+    encrypted: true
+  });
+}
+
+function removeCreateField(index) {
+  if (formFields.value.length === 1) return;
+  formFields.value.splice(index, 1);
+}
+
+function parseCreateFields() {
+  return formFields.value
+    .map((field, index) => {
+      const name = field.name.trim();
+      if (!name) return null;
+      return {
+        name,
+        value: field.value,
+        encrypted: Boolean(field.encrypted),
+        masked: Boolean(field.encrypted),
+        position: index
+      };
+    })
+    .filter(Boolean);
+}
+
+function resetCreateForm() {
+  form.title = "";
+  form.purpose = "";
+  form.category = "";
+  form.source = "";
+  form.notes = "";
+  form.tags = "";
+  form.allow_ui = true;
+  form.allow_rest_api = true;
+  form.allow_mcp = false;
+  formFields.value = defaultCreateFields();
+}
+
 function serializeFields(fields) {
   return fields
     .map((field) => `${field.name}=${field.encrypted ? "*" : ""}${field.value || ""}`)
@@ -170,6 +223,7 @@
 }
 
 async function createSecret() {
+  const fields = parseCreateFields();
   await api.createSecret({
     title: form.title,
     purpose: form.purpose || null,
@@ -180,14 +234,10 @@
     allow_ui: form.allow_ui,
     allow_rest_api: form.allow_rest_api,
     allow_mcp: form.allow_mcp,
-    fields: parseFields()
+    fields
   });
-  form.title = "";
-  form.purpose = "";
-  form.category = "";
-  form.source = "";
-  form.notes = "";
-  form.tags = "";
+  resetCreateForm();
+  showCreateModal.value = false;
   await loadSecrets();
 }
 
@@ -425,7 +475,15 @@
         <p v-if="error" class="error">{{ error }}</p>
         <div class="panel-title">
           <h2>Secrets</h2>
-          <span>{{ loading ? "Loading" : `${total} records` }}</span>
+          <div class="panel-actions">
+            <span>{{ loading ? "Loading" : `${total} records` }}</span>
+            <GnButton size="sm" variant="success" @click="openCreateModal">
+              <span class="button-content">
+                <i class="ph ph-plus-circle" aria-hidden="true"></i>
+                Create
+              </span>
+            </GnButton>
+          </div>
         </div>
         <button
           v-for="secret in secrets"
@@ -448,7 +506,7 @@
         </button>
         <div v-if="!secrets.length" class="empty-state">
           <strong>No secrets yet</strong>
-          <span>Create the first record using the form on the right.</span>
+          <span>Create the first record using the Create button.</span>
         </div>
       </aside>
 
@@ -553,27 +611,6 @@
           <span>Metadata is shown by default. Values are available through reveal.</span>
         </div>
       </section>
-
-      <aside class="panel form-panel">
-        <div class="panel-title">
-          <h2>Create secret</h2>
-        </div>
-        <div class="form-grid">
-          <GnInput v-model="form.title" label="Title" />
-          <GnInput v-model="form.purpose" label="Purpose" />
-          <GnInput v-model="form.category" label="Category" />
-          <GnInput v-model="form.tags" label="Tags" placeholder="comma,separated" />
-          <GnTextarea v-model="form.fieldsText" label="Fields" rows="6" />
-          <GnInput v-model="form.source" label="Source" />
-          <GnInput v-model="form.notes" label="Notes" maxlength="140" />
-          <div class="checks">
-            <GnCheckbox v-model="form.allow_ui" label="UI" />
-            <GnCheckbox v-model="form.allow_rest_api" label="REST API" />
-            <GnCheckbox v-model="form.allow_mcp" label="MCP" />
-          </div>
-        </div>
-        <GnButton variant="primary" @click="createSecret">Create</GnButton>
-      </aside>
     </section>
 
     <section v-if="activeTab === 'history'" class="panel-stack">
@@ -743,6 +780,107 @@
       </div>
     </section>
 
+    <GnModal v-model="showCreateModal" title="Create secret">
+      <div class="create-modal-body">
+        <section class="modal-section">
+          <div class="form-grid two">
+            <div class="form-field">
+              <GnInput v-model="form.title" label="Title" />
+              <small class="field-help">Human-readable name shown in lists and search results.</small>
+            </div>
+            <div class="form-field">
+              <GnInput v-model="form.purpose" label="Purpose" />
+              <small class="field-help">Target service, server, account, or other secret destination.</small>
+            </div>
+            <div class="form-field">
+              <GnInput v-model="form.category" label="Category" />
+              <small class="field-help">Single grouping value for browsing, for example work or banking.</small>
+            </div>
+            <div class="form-field">
+              <GnInput v-model="form.tags" label="Tags" placeholder="comma,separated" />
+              <small class="field-help">Keywords used by search. Separate multiple tags with commas.</small>
+            </div>
+            <div class="form-field">
+              <GnInput v-model="form.source" label="Source" />
+              <small class="field-help">Where this secret came from: person, import, ticket, or note.</small>
+            </div>
+            <div class="form-field">
+              <GnTextarea v-model="form.notes" label="Notes" rows="3" maxlength="140" />
+              <small class="field-help">Short context for the secret. Limited to 140 characters.</small>
+            </div>
+          </div>
+        </section>
+
+        <section class="modal-section">
+          <div class="panel-title inline-title">
+            <h2>Fields</h2>
+            <GnButton size="sm" @click="addCreateField">
+              <span class="button-content">
+                <i class="ph ph-plus" aria-hidden="true"></i>
+                Add field
+              </span>
+            </GnButton>
+          </div>
+          <p class="section-help">
+            Add one row per secret value. Enable encryption for passwords, tokens, PINs, and keys.
+          </p>
+          <div class="create-fields">
+            <div v-for="(field, index) in formFields" :key="field.id" class="create-field-row">
+              <div class="form-field">
+                <GnInput v-model="field.name" label="Field name" />
+                <small class="field-help">Name copied into API and MCP responses, for example username.</small>
+              </div>
+              <div class="form-field">
+                <GnInput v-model="field.value" label="Value" />
+                <small class="field-help">Actual value stored for this field.</small>
+              </div>
+              <div class="field-row-actions">
+                <GnCheckbox v-model="field.encrypted" label="Encrypt" />
+                <small class="field-help">Encrypted fields cannot be searched by value.</small>
+                <GnButton
+                  size="sm"
+                  variant="danger"
+                  :disabled="formFields.length === 1"
+                  @click="removeCreateField(index)"
+                >
+                  <span class="button-content">
+                    <i class="ph ph-trash" aria-hidden="true"></i>
+                    Remove
+                  </span>
+                </GnButton>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="modal-section">
+          <div class="create-access-grid">
+            <div class="access-option">
+              <GnCheckbox v-model="form.allow_ui" label="UI" />
+              <small class="field-help">Available from the web interface after login.</small>
+            </div>
+            <div class="access-option">
+              <GnCheckbox v-model="form.allow_rest_api" label="REST API" />
+              <small class="field-help">Available to external clients using API tokens.</small>
+            </div>
+            <div class="access-option">
+              <GnCheckbox v-model="form.allow_mcp" label="MCP" />
+              <small class="field-help">Available to MCP clients when token scopes allow it.</small>
+            </div>
+          </div>
+        </section>
+      </div>
+      <template #footer>
+        <GnButton @click="showCreateModal = false">Cancel</GnButton>
+        <GnButton variant="success" :disabled="!canCreateSecret" @click="createSecret">
+          <span class="button-content">
+            <i class="ph ph-check-circle" aria-hidden="true"></i>
+            Create
+          </span>
+        </GnButton>
+      </template>
+    </GnModal>
+
     <GnModal v-model="showDeleteConfirm" title="Delete all data">
       <p>This permanently removes all secrets and versions. Audit records remain.</p>
       <template #footer>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 25b7fd1..f061074 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -138,7 +138,7 @@
 
 .workspace-grid {
   display: grid;
-  grid-template-columns: 340px minmax(420px, 1fr) 380px;
+  grid-template-columns: 340px minmax(420px, 1fr);
   gap: 14px;
   align-items: start;
 }
@@ -303,6 +303,81 @@
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.form-field {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.field-help,
+.section-help {
+  margin: 0;
+  color: #9ba7cb;
+  line-height: 1.45;
+}
+
+.button-content {
+  display: inline-flex;
+  gap: 7px;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+}
+
+.button-content .ph {
+  font-size: 1.05em;
+  line-height: 1;
+}
+
+.create-modal-body {
+  display: grid;
+  gap: 16px;
+  width: min(860px, calc(100vw - 48px));
+  max-width: 100%;
+}
+
+.modal-section {
+  display: grid;
+  gap: 12px;
+}
+
+.create-fields {
+  display: grid;
+  gap: 12px;
+}
+
+.create-field-row {
+  display: grid;
+  grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1.2fr) minmax(150px, auto);
+  gap: 12px;
+  align-items: start;
+  padding: 12px;
+  border: 1px solid #30384f;
+  background: #151622;
+}
+
+.field-row-actions {
+  display: grid;
+  gap: 8px;
+  justify-items: start;
+  padding-top: 2px;
+}
+
+.create-access-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.access-option {
+  display: grid;
+  gap: 6px;
+  align-content: start;
+  padding: 12px;
+  border: 1px solid #30384f;
+  background: #151622;
+}
+
 .edit-box,
 .new-token-box {
   display: grid;
@@ -444,4 +519,13 @@
   .form-grid.two {
     grid-template-columns: 1fr;
   }
+
+  .create-modal-body {
+    width: calc(100vw - 28px);
+  }
+
+  .create-field-row,
+  .create-access-grid {
+    grid-template-columns: 1fr;
+  }
 }