diff --git a/src/components/quad-status/BatteryLegend.stories.js b/src/components/quad-status/BatteryLegend.stories.js
new file mode 100644
index 00000000..86920d53
--- /dev/null
+++ b/src/components/quad-status/BatteryLegend.stories.js
@@ -0,0 +1,16 @@
+import BatteryLegend from './BatteryLegend.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Battery Legend',
+  component: BatteryLegend,
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { BatteryLegend },
+  template: '<battery-legend v-bind="$props" />',
+});
+
+export const Primary = Template.bind({});
diff --git a/src/components/status-bar/StatusBar.stories.js b/src/components/status-bar/StatusBar.stories.js
new file mode 100644
index 00000000..d3341891
--- /dev/null
+++ b/src/components/status-bar/StatusBar.stories.js
@@ -0,0 +1,16 @@
+import StatusBar from "./StatusBar.vue";
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: "Status Bar",
+  component: StatusBar,
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { StatusBar },
+  template: '<status-bar v-bind="$props" />',
+});
+
+export const Primary = Template.bind({});