diff --git a/packages/app/components/dev/apps/ApplicationsIndex.story.tsx b/packages/app/components/dev/apps/ApplicationsIndex.story.tsx
new file mode 100644
index 0000000..096f9cb
--- /dev/null
+++ b/packages/app/components/dev/apps/ApplicationsIndex.story.tsx
@@ -0,0 +1,53 @@
+import React, { ComponentType, ComponentProps } from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import ApplicationsIndex from './ApplicationsIndex';
+import { TYPE_APPLICATION } from 'app/components/dev/apps';
+
+import { OauthAppResponse } from 'app/services/api/oauth';
+import rootStyles from 'app/pages/root/root.scss';
+import devStyles from 'app/pages/dev/dev.scss';
+
+export const DevLayout: ComponentType = ({ children }) => (
+
+);
+
+export const sampleApp: OauthAppResponse = {
+ clientId: 'my-application',
+ clientSecret: 'cL1eNtS3cRE7xNJqfWQdqrMRKURfW1ssP4kiX6JDW0_szM-n-q',
+ type: TYPE_APPLICATION,
+ name: 'My Application',
+ websiteUrl: '',
+ createdAt: 0,
+ countUsers: 0,
+};
+
+const commonProps: Omit, 'isLoading' | 'displayForGuest' | 'applications'> = {
+ clientId: null,
+ resetClientId: action('resetClientId'),
+ resetApp: async (...args) => action('resetApp')(...args),
+ deleteApp: async (clientId) => action('deleteApp')(clientId),
+};
+
+storiesOf('Components/Dev/Apps/ApplicationsIndex', module)
+ .addDecorator((storyFn) => {storyFn()})
+ .add('Guest', () => )
+ .add('Loading', () => )
+ .add('Empty', () => (
+
+ ))
+ .add('With apps', () => (
+
+ ));
diff --git a/packages/app/components/dev/apps/applicationForm/ApplicationForm.story.tsx b/packages/app/components/dev/apps/applicationForm/ApplicationForm.story.tsx
new file mode 100644
index 0000000..fb0065c
--- /dev/null
+++ b/packages/app/components/dev/apps/applicationForm/ApplicationForm.story.tsx
@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { OauthAppResponse } from 'app/services/api/oauth';
+import { FormModel } from 'app/components/ui/form';
+import { ApplicationType, TYPE_APPLICATION, TYPE_MINECRAFT_SERVER } from 'app/components/dev/apps';
+import ApplicationForm from './ApplicationForm';
+import { DevLayout } from '../ApplicationsIndex.story';
+
+const blankApp: OauthAppResponse = {
+ clientId: '',
+ clientSecret: '',
+ type: TYPE_APPLICATION,
+ name: '',
+ websiteUrl: '',
+ createdAt: 0,
+ countUsers: 0,
+ description: '',
+ redirectUri: '',
+ minecraftServerIp: '',
+};
+
+const onSubmit = async (form: FormModel) => action('onSubmit')(form);
+
+storiesOf('Components/Dev/Apps/ApplicationForm', module)
+ .addDecorator((storyFn) => {storyFn()})
+ .add('Create', () => {
+ const [currentType, setType] = useState(null);
+
+ return (
+ {
+ action('setType')(type);
+ setType(type);
+ }}
+ app={blankApp}
+ />
+ );
+ })
+ .add('Create website', () => (
+
+ ))
+ .add('Create Minecraft server', () => (
+
+ ))
+ .add('Update website', () => (
+
+ ))
+ .add('Update Minecraft server', () => (
+
+ ));