diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 0f741c0c..0ae20f9b 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -102,4 +102,4 @@
     "typescript": "^5.3.3",
     "vite": "^5.2.0"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/frontend/src/stories/MockStoriesData.ts b/packages/frontend/src/stories/MockStoriesData.ts
new file mode 100644
index 00000000..ce8e90c6
--- /dev/null
+++ b/packages/frontend/src/stories/MockStoriesData.ts
@@ -0,0 +1,65 @@
+import {
+  User,
+  Project,
+  Organization,
+  Role,
+  OrganizationMember,
+  ProjectMember,
+} from 'gql-client';
+
+export const user: User = {
+  id: '1',
+  email: 'helloworld@helloworld.com',
+  isVerified: true,
+  createdAt: '2021-08-01T00:00:00.000Z',
+  name: 'Hello World',
+  updatedAt: '2021-08-01T00:00:00.000Z',
+  gitHubToken: 'GitHub Token',
+};
+
+const organizationMember: OrganizationMember = {
+  id: '1',
+  member: user,
+  role: Role.Owner,
+  createdAt: '2021-08-01T00:00:00.000Z',
+  updatedAt: '2021-08-01T00:00:00.000Z',
+};
+
+export const organization: Organization = {
+  id: '1',
+  name: 'Organization',
+  slug: 'organization',
+  createdAt: '2021-08-01T00:00:00.000Z',
+  updatedAt: '2021-08-01T00:00:00.000Z',
+  members: [organizationMember],
+  projects: [],
+};
+
+const member: ProjectMember = {
+  id: '1',
+  member: user,
+  permissions: [],
+  isPending: false,
+  createdAt: '2021-08-01T00:00:00.000Z',
+  updatedAt: '2021-08-01T00:00:00.000Z',
+};
+
+export const project: Project = {
+  id: '1',
+  name: 'Project',
+  owner: user,
+  deployments: [],
+  repository: 'Repository',
+  prodBranch: 'Prod Branch',
+  description: 'Description',
+  createdAt: '2021-08-01T00:00:00.000Z',
+  updatedAt: '2021-08-01T00:00:00.000Z',
+  framework: 'NextJS',
+  environmentVariables: [],
+  organization: organization,
+  template: 'Template',
+  members: [member],
+  webhooks: ['beepboop'],
+  icon: 'Icon',
+  subDomain: 'SubDomain',
+};
diff --git a/packages/frontend/src/stories/Project/Settings/General.stories.tsx b/packages/frontend/src/stories/Project/Settings/AddEnvironmentVariableRow.stories.tsx
similarity index 63%
rename from packages/frontend/src/stories/Project/Settings/General.stories.tsx
rename to packages/frontend/src/stories/Project/Settings/AddEnvironmentVariableRow.stories.tsx
index 9851e20b..20fef69d 100644
--- a/packages/frontend/src/stories/Project/Settings/General.stories.tsx
+++ b/packages/frontend/src/stories/Project/Settings/AddEnvironmentVariableRow.stories.tsx
@@ -21,10 +21,45 @@ const meta: Meta<typeof AddEnvironmentVariableRow> = {
       },
     }),
   },
-} as Meta<typeof AddEnvironmentVariableRow>;
+  argTypes: {
+    onDelete: {
+      action: 'delete',
+    },
+    register: {
+      action: 'register',
+    },
+    index: {
+        type: 'number',
+    },
+    isDeleteDisabled: {
+        type: 'boolean',
+    },
+  },
+  args: {
+    isDeleteDisabled: false,
+  },
+};
 
 export default meta;
 
 type Story = StoryObj<typeof AddEnvironmentVariableRow>;
 
 export const Default: Story = {};
+
+export const DisabledDelete: Story = {
+  args: {
+    isDeleteDisabled: true,
+  },
+};
+
+export const First: Story = {
+  args: {
+    index: 0,
+  },
+};
+
+export const Second: Story = {
+  args: {
+    index: 1,
+  },
+};
diff --git a/packages/frontend/src/stories/Project/Settings/AddMemberDialog.stories.tsx b/packages/frontend/src/stories/Project/Settings/AddMemberDialog.stories.tsx
new file mode 100644
index 00000000..8c7a55c8
--- /dev/null
+++ b/packages/frontend/src/stories/Project/Settings/AddMemberDialog.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import AddMemberDialog from 'components/projects/project/settings/AddMemberDialog';
+
+const meta: Meta<typeof AddMemberDialog> = {
+  title: 'Project/Settings/AddMemberDialog',
+  component: AddMemberDialog,
+  tags: ['autodocs'],
+  argTypes: {
+    open: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    handleOpen: {
+      action: 'open',
+    },
+    handleAddMember: {
+      action: 'addMember',
+    },
+  },
+  args: {
+    open: true,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AddMemberDialog>;
+
+export const Default: Story = {};
diff --git a/packages/frontend/src/stories/Project/Settings/DeleteProjectDialog.stories.tsx b/packages/frontend/src/stories/Project/Settings/DeleteProjectDialog.stories.tsx
new file mode 100644
index 00000000..025a61dd
--- /dev/null
+++ b/packages/frontend/src/stories/Project/Settings/DeleteProjectDialog.stories.tsx
@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  reactRouterParameters,
+  withRouter,
+} from 'storybook-addon-remix-react-router';
+
+import DeleteProjectDialog from 'components/projects/project/settings/DeleteProjectDialog';
+import { project } from '../../MockStoriesData';
+
+const meta: Meta<typeof DeleteProjectDialog> = {
+  title: 'Project/Settings/DeleteProjectDialog',
+  component: DeleteProjectDialog,
+  tags: ['autodocs'],
+  decorators: [withRouter],
+  parameters: {
+    reactRouter: reactRouterParameters({
+      location: {
+        pathParams: { userId: 'me' },
+      },
+      routing: {
+        path: '/snowball-tools-1/projects/6bb3bec2-d71b-4fc0-9e32-4767f68668f4/settings/domains/add/config',
+      },
+    }),
+  },
+  argTypes: {
+    open: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    handleOpen: {
+      action: 'open',
+    },
+    project: {
+      control: {
+        type: 'object',
+      },
+    },
+  },
+  args: {
+    open: true,
+    project: project,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DeleteProjectDialog>;
+
+export const Default: Story = {};
diff --git a/packages/frontend/src/stories/Project/Settings/DisplayEnvironmentVariables.stories.tsx b/packages/frontend/src/stories/Project/Settings/DisplayEnvironmentVariables.stories.tsx
new file mode 100644
index 00000000..3548a35b
--- /dev/null
+++ b/packages/frontend/src/stories/Project/Settings/DisplayEnvironmentVariables.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import DisplayEnvironmentVariables from 'components/projects/project/settings/DisplayEnvironmentVariables';
+
+const meta: Meta<typeof DisplayEnvironmentVariables> = {
+  title: 'Project/Settings/DisplayEnvironmentVariables',
+  component: DisplayEnvironmentVariables,
+  argTypes: {
+    environment: {
+      control: {
+        type: 'object',
+      },
+    },
+    variables: {
+      control: {
+        type: 'object',
+      },
+    },
+    onUpdate: {
+      action: 'update',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DisplayEnvironmentVariables>;
+
+export const Default: Story = {};