diff --git a/packages/app/src/systems/Chains/fuel/components/EmailInput/EmailInput.stories.tsx b/packages/app/src/systems/Chains/fuel/components/EmailInput/EmailInput.stories.tsx
new file mode 100644
index 00000000..1f9fbe97
--- /dev/null
+++ b/packages/app/src/systems/Chains/fuel/components/EmailInput/EmailInput.stories.tsx
@@ -0,0 +1,26 @@
+import { cssObj } from '@fuel-ui/css';
+import { Box } from '@fuel-ui/react';
+
+import { EmailInput } from './EmailInput';
+
+export default {
+  component: EmailInput,
+  title: 'EmailInput',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Usage = () => {
+  return (
+    <Box.Flex align="center" justify="center" css={styles.storybook}>
+      <EmailInput />
+    </Box.Flex>
+  );
+};
+
+const styles = {
+  storybook: cssObj({
+    margin: '20px',
+  }),
+};
diff --git a/packages/app/src/systems/Chains/fuel/components/EmailInput/EmailInput.tsx b/packages/app/src/systems/Chains/fuel/components/EmailInput/EmailInput.tsx
new file mode 100644
index 00000000..bf438d66
--- /dev/null
+++ b/packages/app/src/systems/Chains/fuel/components/EmailInput/EmailInput.tsx
@@ -0,0 +1,15 @@
+import { Box, Button, Input, Text } from '@fuel-ui/react';
+
+export const EmailInput = () => {
+  return (
+    <Box.Stack>
+      <Text>Get notified when it settles</Text>
+      <Box.Flex align="center" justify="space-between">
+        <Input>
+          <Input.Field type="email" placeholder="Your email address" />
+        </Input>
+        <Button>Notify me</Button>
+      </Box.Flex>
+    </Box.Stack>
+  );
+};
diff --git a/packages/app/src/systems/Chains/fuel/components/EmailInput/index.tsx b/packages/app/src/systems/Chains/fuel/components/EmailInput/index.tsx
new file mode 100644
index 00000000..aaa89b47
--- /dev/null
+++ b/packages/app/src/systems/Chains/fuel/components/EmailInput/index.tsx
@@ -0,0 +1 @@
+export * from './EmailInput';