diff --git a/aform/src/components/form/ADatePicker.vue b/aform/src/components/form/ADatePicker.vue
index 23392ac3..3934552e 100644
--- a/aform/src/components/form/ADatePicker.vue
+++ b/aform/src/components/form/ADatePicker.vue
@@ -3,7 +3,7 @@
 		<table>
 			<tr>
 				<td @click="previousMonth" :tabindex="-1">&lt;</td>
-				<th colspan="5">{{ monthAndYear }}</th>
+				<th colspan="5" :tabindex="-1">{{ monthAndYear }}</th>
 				<td @click="nextMonth" :tabindex="-1">&gt;</td>
 			</tr>
 			<tr class="days-header">
diff --git a/aform/stories/assets/basic_table_schema.json b/aform/stories/assets/basic_table_schema.json
index 9e2c7e71..bf38d8a5 100644
--- a/aform/stories/assets/basic_table_schema.json
+++ b/aform/stories/assets/basic_table_schema.json
@@ -44,6 +44,7 @@
 				"name": "report_date",
 				"fieldname": "report_date",
 				"fieldtype": "component",
+				"modalComponent": "ADatePicker",
 				"align": "center",
 				"edit": true,
 				"width": "25ch",
diff --git a/aform/stories/assets/fieldset_table_schema.json b/aform/stories/assets/fieldset_table_schema.json
index ba970425..78b3e1f5 100644
--- a/aform/stories/assets/fieldset_table_schema.json
+++ b/aform/stories/assets/fieldset_table_schema.json
@@ -49,6 +49,7 @@
 						"name": "report_date",
 						"fieldname": "report_date",
 						"fieldtype": "component",
+						"modalComponent": "ADatePicker",
 						"align": "center",
 						"edit": true,
 						"width": "25ch",
diff --git a/aform/stories/date.story.vue b/aform/stories/date.story.vue
index 7629541b..8ac3753d 100644
--- a/aform/stories/date.story.vue
+++ b/aform/stories/date.story.vue
@@ -1,14 +1,15 @@
 <template>
-	<Story title="date">
-		<Variant title="Date Input">
-			<ADate label="Date" v-model="defaultDate" />
-		</Variant>
+	<Story>
 		<Variant title="Date Picker">
 			<h3>Default Date</h3>
 			<ADatePicker />
+
 			<h3>Custom Date</h3>
 			<ADatePicker v-model="defaultDate" />
 		</Variant>
+		<Variant title="Date Input with Picker">
+			<ADate label="Date" v-model="defaultDate" />
+		</Variant>
 	</Story>
 </template>
 
@@ -21,9 +22,4 @@ const defaultDate = ref(new Date(twoDaysAgo))
 
 <style>
 @import url('@stonecrop/themes/default/default.css');
-
-.adate,
-.adatepicker {
-	margin-right: 5ch;
-}
 </style>
diff --git a/aform/stories/dropdown.story.vue b/aform/stories/dropdown.story.vue
index 6b769477..48f7ddb9 100644
--- a/aform/stories/dropdown.story.vue
+++ b/aform/stories/dropdown.story.vue
@@ -1,5 +1,5 @@
 <template>
-	<Story title="dropdown">
+	<Story>
 		<div class="dropdown-form">
 			<ADropdown
 				data-theme="purple"
diff --git a/aform/stories/default.story.vue b/aform/stories/form.story.vue
similarity index 98%
rename from aform/stories/default.story.vue
rename to aform/stories/form.story.vue
index a6eb2430..8df2311c 100644
--- a/aform/stories/default.story.vue
+++ b/aform/stories/form.story.vue
@@ -1,5 +1,5 @@
 <template>
-	<Story title="default">
+	<Story>
 		<Variant title="Form" :setup-app="formSetup">
 			<AForm class="aform-main" v-model="form_schema" :data="data" :key="formKey" />
 
diff --git a/aform/stories/login.story.vue b/aform/stories/login.story.vue
index 265fa399..f9d499f8 100644
--- a/aform/stories/login.story.vue
+++ b/aform/stories/login.story.vue
@@ -1,5 +1,5 @@
 <template>
-	<Story title="login">
+	<Story>
 		<Login />
 	</Story>
 </template>