diff --git a/ui/components/ui/editable-label/editable-label.stories.js b/ui/components/ui/editable-label/editable-label.stories.js
new file mode 100644
index 000000000..8eb93d362
--- /dev/null
+++ b/ui/components/ui/editable-label/editable-label.stories.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import EditableLabel from '.';
+
+export default {
+  title: 'Components/UI/EditableLabel',
+  id: __filename,
+  argTypes: {
+    onSubmit: {
+      action: 'onSubmit',
+    },
+    defaultValue: {
+      control: 'text',
+    },
+    className: {
+      control: 'text',
+    },
+    accountsNames: {
+      control: 'array',
+    },
+  },
+  args: {
+    defaultValue: 'Account 3',
+    accountsNames: ['Account 1', 'Account 2'],
+  },
+};
+
+export const DefaultStory = (args) => (
+  <div style={{ position: 'relative', width: 335 }}>
+    <EditableLabel {...args} />
+  </div>
+);
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/components/ui/editable-label/index.scss b/ui/components/ui/editable-label/index.scss
index fc2c28b08..e74ac41e3 100644
--- a/ui/components/ui/editable-label/index.scss
+++ b/ui/components/ui/editable-label/index.scss
@@ -14,6 +14,8 @@
   &__input {
     @include H6;
 
+    color: var(--color-text-default);
+    background-color: var(--color-background-default);
     width: 250px;
     text-align: center;
     border: 1px solid var(--color-border-default);