diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index 2d4fe399..84e3e188 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -37,74 +37,6 @@ import { renderToast, renderToastsWithCta } from './renders/toast';
 import { renderTooltips } from './renders/tooltip';
 import { Button } from 'components/shared/Button';
 import { Modal } from 'components/shared/Modal';
-import { TransferProjectDialog } from 'components/projects/Dialog/TransferProjectDialog';
-import { DeleteWebhookDialog } from 'components/projects/Dialog/DeleteWebhookDialog';
-import { DisconnectRepositoryDialog } from 'components/projects/Dialog/DisconnectRepositoryDialog';
-import { RemoveMemberDialog } from 'components/projects/Dialog/RemoveMemberDialog';
-import { DeleteVariableDialog } from 'components/projects/Dialog/DeleteVariableDialog';
-import { DeleteDomainDialog } from 'components/projects/Dialog/DeleteDomainDialog';
-import { CancelDeploymentDialog } from 'components/projects/Dialog/CancelDeploymentDialog';
-import {
-  Deployment,
-  DeploymentStatus,
-  Domain,
-  DomainStatus,
-  Environment,
-} from 'gql-client';
-import { ChangeStateToProductionDialog } from 'components/projects/Dialog/ChangeStateToProductionDialog';
-
-const deployment: Deployment = {
-  id: '1',
-  domain: {
-    id: 'domain1',
-    branch: 'main',
-    name: 'example.com',
-    status: DomainStatus.Live,
-    redirectTo: null,
-    createdAt: '1677609600', // 2023-02-25T12:00:00Z
-    updatedAt: '1677613200', // 2023-02-25T13:00:00Z
-  },
-  branch: 'main',
-  commitHash: 'a1b2c3d',
-  commitMessage:
-    'lkajsdlakjsdlaijwlkjadlksjdlaisjdlakjswdalijsdlaksdj lakjsdlasjdlaijwdel akjsdlaj sldkjaliwjdeal ksjdla ijsdlaksjd',
-  url: 'https://deploy1.example.com',
-  environment: Environment.Production,
-  isCurrent: true,
-  status: DeploymentStatus.Ready,
-  createdBy: {
-    id: 'user1',
-    name: 'Alice',
-    email: 'alice@example.com',
-    isVerified: true,
-    createdAt: '1672656000', // 2023-01-01T10:00:00Z
-    updatedAt: '1672659600', // 2023-01-01T11:00:00Z
-    gitHubToken: null,
-  },
-  createdAt: '1677676800', // 2023-03-01T12:00:00Z
-  updatedAt: '1677680400', // 2023-03-01T13:00:00Z
-};
-
-const domains: Domain[] = [
-  {
-    id: '1',
-    branch: 'main',
-    name: 'saugat.com',
-    status: DomainStatus.Live,
-    redirectTo: null,
-    createdAt: '1677676800', // 2023-03-01T12:00:00Z
-    updatedAt: '1677680400', // 2023-03-01T13:00:00Z
-  },
-  {
-    id: '2',
-    branch: 'main',
-    name: 'www.saugat.com',
-    status: DomainStatus.Live,
-    redirectTo: null,
-    createdAt: '1677676800', // 2023-03-01T12:00:00Z
-    updatedAt: '1677680400', // 2023-03-01T13:00:00Z
-  },
-];
 
 const Page: React.FC = () => {
   const [singleDate, setSingleDate] = useState<Value>();
@@ -113,20 +45,6 @@ const Page: React.FC = () => {
     useState<string>('Test 1');
   const [switchValue, setSwitchValue] = useState(false);
   const [selectedRadio, setSelectedRadio] = useState<string>('');
-  const [openTransferDialog, setOpenTransferDialog] = useState(false);
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [disconnectRepoDialogOpen, setDisconnectRepoDialogOpen] =
-    useState(false);
-  const [removeMemberDialogOpen, setRemoveMemberDialogOpen] = useState(false);
-  const [deleteVariableDialogOpen, setDeleteVariableDialogOpen] =
-    useState(false);
-  const [deleteDomainDialogOpen, setDeleteDomainDialogOpen] = useState(false);
-  const [cancelDeploymentDialogOpen, setCancelDeploymentDialogOpen] =
-    useState(false);
-  const [changeProductionDialogOpen, setChangeProductionDialogOpen] =
-    useState(false);
-  const [redeployToProduction, setRedeployToProduction] = useState(false);
-  const [rollbackDeployment, setRollbackDeployment] = useState(false);
 
   return (
     <div className="relative h-full min-h-full">
@@ -161,147 +79,6 @@ const Page: React.FC = () => {
                   </Modal.Footer>
                 </Modal.Content>
               </Modal>
-              {/* Transfer project */}
-              <Button onClick={() => setOpenTransferDialog(true)}>
-                Transfer project
-              </Button>
-              <TransferProjectDialog
-                handleCancel={() => setOpenTransferDialog(!openTransferDialog)}
-                open={openTransferDialog}
-                handleConfirm={() => setOpenTransferDialog(!openTransferDialog)}
-                projectName="nextjs-boilerplate"
-                from="ayungavis"
-                to="Airfoil"
-              />
-              {/* Delete webhook */}
-              <Button onClick={() => setDeleteDialogOpen(true)}>
-                Delete webhook
-              </Button>
-              <DeleteWebhookDialog
-                handleCancel={() => setDeleteDialogOpen((preVal) => !preVal)}
-                open={deleteDialogOpen}
-                handleConfirm={() => setDeleteDialogOpen((preVal) => !preVal)}
-                webhookUrl="examplehook.com"
-              />
-              {/* Disconnect repository */}
-              <Button onClick={() => setDisconnectRepoDialogOpen(true)}>
-                Disconnect repository
-              </Button>
-              <DisconnectRepositoryDialog
-                handleCancel={() =>
-                  setDisconnectRepoDialogOpen((preVal) => !preVal)
-                }
-                open={disconnectRepoDialogOpen}
-                handleConfirm={() => {
-                  setDisconnectRepoDialogOpen((preVal) => !preVal);
-                }}
-              />
-              {/* Remove member */}
-              <Button onClick={() => setRemoveMemberDialogOpen(true)}>
-                Remove member
-              </Button>
-              <RemoveMemberDialog
-                dialogTitle="Remove member?"
-                handleCancel={() =>
-                  setRemoveMemberDialogOpen((preVal) => !preVal)
-                }
-                open={removeMemberDialogOpen}
-                confirmButtonTitle="Yes, Remove member"
-                handleConfirm={() =>
-                  setRemoveMemberDialogOpen((preVal) => !preVal)
-                }
-                memberName="John Doe"
-                ethAddress="0x1234567890"
-                emailDomain="example.com"
-              />
-              {/* Delete variable */}
-              <Button onClick={() => setDeleteVariableDialogOpen(true)}>
-                Delete variable
-              </Button>
-              <DeleteVariableDialog
-                handleCancel={() =>
-                  setDeleteVariableDialogOpen((preVal) => !preVal)
-                }
-                open={deleteVariableDialogOpen}
-                handleConfirm={() =>
-                  setDeleteVariableDialogOpen((preVal) => !preVal)
-                }
-                variableKey="AIUTH_TOKEN"
-              />
-              {/* Delete domain */}
-              <Button onClick={() => setDeleteDomainDialogOpen(true)}>
-                Delete domain
-              </Button>
-              <DeleteDomainDialog
-                handleCancel={() =>
-                  setDeleteDomainDialogOpen((preVal) => !preVal)
-                }
-                open={deleteDomainDialogOpen}
-                handleConfirm={() =>
-                  setDeleteDomainDialogOpen((preVal) => !preVal)
-                }
-                projectName="Airfoil"
-                domainName="airfoil.com"
-              />
-              {/* Cancel deployment */}
-              <Button onClick={() => setCancelDeploymentDialogOpen(true)}>
-                Cancel deployment
-              </Button>
-              <CancelDeploymentDialog
-                handleCancel={() =>
-                  setCancelDeploymentDialogOpen(!cancelDeploymentDialogOpen)
-                }
-                open={cancelDeploymentDialogOpen}
-                handleConfirm={() =>
-                  setCancelDeploymentDialogOpen(!cancelDeploymentDialogOpen)
-                }
-              />
-              {/* Change to production */}
-              <Button onClick={() => setChangeProductionDialogOpen(true)}>
-                Change to production
-              </Button>
-              <ChangeStateToProductionDialog
-                dialogTitle="Change to production?"
-                confirmButtonTitle="Change"
-                handleCancel={() => setChangeProductionDialogOpen(false)}
-                open={changeProductionDialogOpen}
-                handleConfirm={() => setChangeProductionDialogOpen(false)}
-                deployment={deployment}
-                domains={domains}
-              />
-              {/* Redeploy to production */}
-              <Button onClick={() => setRedeployToProduction(true)}>
-                Redeploy to production
-              </Button>
-              <ChangeStateToProductionDialog
-                dialogTitle="Redeploy to production?"
-                handleCancel={() =>
-                  setRedeployToProduction((preVal) => !preVal)
-                }
-                open={redeployToProduction}
-                confirmButtonTitle="Redeploy"
-                handleConfirm={async () =>
-                  setRedeployToProduction((preVal) => !preVal)
-                }
-                deployment={deployment}
-                domains={deployment.domain ? [deployment.domain] : []}
-              />
-              {/* Rollback to this deployment */}
-              <Button onClick={() => setRollbackDeployment(true)}>
-                Rollback to this deployment
-              </Button>
-              <ChangeStateToProductionDialog
-                dialogTitle="Rollback to this deployment?"
-                handleCancel={() => setRollbackDeployment((preVal) => !preVal)}
-                open={rollbackDeployment}
-                confirmButtonTitle="Rollback"
-                handleConfirm={async () =>
-                  setRollbackDeployment((preVal) => !preVal)
-                }
-                deployment={deployment}
-                newDeployment={deployment}
-                domains={deployment.domain ? [deployment.domain] : []}
-              />
             </div>
           </div>
         </div>
diff --git a/packages/frontend/src/pages/components/modals.tsx b/packages/frontend/src/pages/components/modals.tsx
new file mode 100644
index 00000000..63d34e2a
--- /dev/null
+++ b/packages/frontend/src/pages/components/modals.tsx
@@ -0,0 +1,274 @@
+import React from 'react';
+
+import { useState } from 'react';
+
+import { Button } from 'components/shared/Button';
+import { Modal } from 'components/shared/Modal';
+import { TransferProjectDialog } from 'components/projects/Dialog/TransferProjectDialog';
+import { DeleteWebhookDialog } from 'components/projects/Dialog/DeleteWebhookDialog';
+import { DisconnectRepositoryDialog } from 'components/projects/Dialog/DisconnectRepositoryDialog';
+import { RemoveMemberDialog } from 'components/projects/Dialog/RemoveMemberDialog';
+import { DeleteVariableDialog } from 'components/projects/Dialog/DeleteVariableDialog';
+import { DeleteDomainDialog } from 'components/projects/Dialog/DeleteDomainDialog';
+import { CancelDeploymentDialog } from 'components/projects/Dialog/CancelDeploymentDialog';
+import {
+  Deployment,
+  DeploymentStatus,
+  Domain,
+  DomainStatus,
+  Environment,
+} from 'gql-client';
+import { ChangeStateToProductionDialog } from 'components/projects/Dialog/ChangeStateToProductionDialog';
+
+const deployment: Deployment = {
+  id: '1',
+  domain: {
+    id: 'domain1',
+    branch: 'main',
+    name: 'example.com',
+    status: DomainStatus.Live,
+    redirectTo: null,
+    createdAt: '1677609600', // 2023-02-25T12:00:00Z
+    updatedAt: '1677613200', // 2023-02-25T13:00:00Z
+  },
+  branch: 'main',
+  commitHash: 'a1b2c3d',
+  commitMessage:
+    'lkajsdlakjsdlaijwlkjadlksjdlaisjdlakjswdalijsdlaksdj lakjsdlasjdlaijwdel akjsdlaj sldkjaliwjdeal ksjdla ijsdlaksjd',
+  url: 'https://deploy1.example.com',
+  environment: Environment.Production,
+  isCurrent: true,
+  status: DeploymentStatus.Ready,
+  createdBy: {
+    id: 'user1',
+    name: 'Alice',
+    email: 'alice@example.com',
+    isVerified: true,
+    createdAt: '1672656000', // 2023-01-01T10:00:00Z
+    updatedAt: '1672659600', // 2023-01-01T11:00:00Z
+    gitHubToken: null,
+  },
+  createdAt: '1677676800', // 2023-03-01T12:00:00Z
+  updatedAt: '1677680400', // 2023-03-01T13:00:00Z
+};
+
+const domains: Domain[] = [
+  {
+    id: '1',
+    branch: 'main',
+    name: 'saugat.com',
+    status: DomainStatus.Live,
+    redirectTo: null,
+    createdAt: '1677676800', // 2023-03-01T12:00:00Z
+    updatedAt: '1677680400', // 2023-03-01T13:00:00Z
+  },
+  {
+    id: '2',
+    branch: 'main',
+    name: 'www.saugat.com',
+    status: DomainStatus.Live,
+    redirectTo: null,
+    createdAt: '1677676800', // 2023-03-01T12:00:00Z
+    updatedAt: '1677680400', // 2023-03-01T13:00:00Z
+  },
+];
+
+const ModalsPage: React.FC = () => {
+  const [openTransferDialog, setOpenTransferDialog] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [disconnectRepoDialogOpen, setDisconnectRepoDialogOpen] =
+    useState(false);
+  const [removeMemberDialogOpen, setRemoveMemberDialogOpen] = useState(false);
+  const [deleteVariableDialogOpen, setDeleteVariableDialogOpen] =
+    useState(false);
+  const [deleteDomainDialogOpen, setDeleteDomainDialogOpen] = useState(false);
+  const [cancelDeploymentDialogOpen, setCancelDeploymentDialogOpen] =
+    useState(false);
+  const [changeProductionDialogOpen, setChangeProductionDialogOpen] =
+    useState(false);
+  const [redeployToProduction, setRedeployToProduction] = useState(false);
+  const [rollbackDeployment, setRollbackDeployment] = useState(false);
+
+  return (
+    <div className="relative h-full min-h-full">
+      <div className="flex flex-col items-center justify-center container mx-auto px-20 py-20">
+        <h1 className="text-4xl font-bold">Manual Storybook</h1>
+        <p className="mt-4 text-lg text-center text-gray-500">
+          Get started by editing{' '}
+          <code className="p-2 font-mono text-sm bg-gray-100 rounded-md">
+            packages/frontend/src/pages/components/index.tsx
+          </code>
+        </p>
+
+        <div className="w-full h border border-gray-200 px-20 my-10" />
+
+        {/* Modal */}
+        <div className="flex flex-col gap-10 items-center justify-between">
+          <div className="flex flex-col gap-10 items-center justify-between">
+            <h1 className="text-2xl font-bold">Modal</h1>
+            <div className="flex gap-4 flex-wrap items-center justify-center">
+              {/* Modal example */}
+              <Modal>
+                <Modal.Trigger asChild>
+                  <Button>Open modal</Button>
+                </Modal.Trigger>
+                <Modal.Content>
+                  <Modal.Header>Modal title</Modal.Header>
+                  <Modal.Body>
+                    <p>Modal content</p>
+                  </Modal.Body>
+                  <Modal.Footer>
+                    <Button>Close</Button>
+                  </Modal.Footer>
+                </Modal.Content>
+              </Modal>
+              {/* Transfer project */}
+              <Button onClick={() => setOpenTransferDialog(true)}>
+                Transfer project
+              </Button>
+              <TransferProjectDialog
+                handleCancel={() => setOpenTransferDialog(!openTransferDialog)}
+                open={openTransferDialog}
+                handleConfirm={() => setOpenTransferDialog(!openTransferDialog)}
+                projectName="nextjs-boilerplate"
+                from="ayungavis"
+                to="Airfoil"
+              />
+              {/* Delete webhook */}
+              <Button onClick={() => setDeleteDialogOpen(true)}>
+                Delete webhook
+              </Button>
+              <DeleteWebhookDialog
+                handleCancel={() => setDeleteDialogOpen((preVal) => !preVal)}
+                open={deleteDialogOpen}
+                handleConfirm={() => setDeleteDialogOpen((preVal) => !preVal)}
+                webhookUrl="examplehook.com"
+              />
+              {/* Disconnect repository */}
+              <Button onClick={() => setDisconnectRepoDialogOpen(true)}>
+                Disconnect repository
+              </Button>
+              <DisconnectRepositoryDialog
+                handleCancel={() =>
+                  setDisconnectRepoDialogOpen((preVal) => !preVal)
+                }
+                open={disconnectRepoDialogOpen}
+                handleConfirm={() => {
+                  setDisconnectRepoDialogOpen((preVal) => !preVal);
+                }}
+              />
+              {/* Remove member */}
+              <Button onClick={() => setRemoveMemberDialogOpen(true)}>
+                Remove member
+              </Button>
+              <RemoveMemberDialog
+                dialogTitle="Remove member?"
+                handleCancel={() =>
+                  setRemoveMemberDialogOpen((preVal) => !preVal)
+                }
+                open={removeMemberDialogOpen}
+                confirmButtonTitle="Yes, Remove member"
+                handleConfirm={() =>
+                  setRemoveMemberDialogOpen((preVal) => !preVal)
+                }
+                memberName="John Doe"
+                ethAddress="0x1234567890"
+                emailDomain="example.com"
+              />
+              {/* Delete variable */}
+              <Button onClick={() => setDeleteVariableDialogOpen(true)}>
+                Delete variable
+              </Button>
+              <DeleteVariableDialog
+                handleCancel={() =>
+                  setDeleteVariableDialogOpen((preVal) => !preVal)
+                }
+                open={deleteVariableDialogOpen}
+                handleConfirm={() =>
+                  setDeleteVariableDialogOpen((preVal) => !preVal)
+                }
+                variableKey="AIUTH_TOKEN"
+              />
+              {/* Delete domain */}
+              <Button onClick={() => setDeleteDomainDialogOpen(true)}>
+                Delete domain
+              </Button>
+              <DeleteDomainDialog
+                handleCancel={() =>
+                  setDeleteDomainDialogOpen((preVal) => !preVal)
+                }
+                open={deleteDomainDialogOpen}
+                handleConfirm={() =>
+                  setDeleteDomainDialogOpen((preVal) => !preVal)
+                }
+                projectName="Airfoil"
+                domainName="airfoil.com"
+              />
+              {/* Cancel deployment */}
+              <Button onClick={() => setCancelDeploymentDialogOpen(true)}>
+                Cancel deployment
+              </Button>
+              <CancelDeploymentDialog
+                handleCancel={() =>
+                  setCancelDeploymentDialogOpen(!cancelDeploymentDialogOpen)
+                }
+                open={cancelDeploymentDialogOpen}
+                handleConfirm={() =>
+                  setCancelDeploymentDialogOpen(!cancelDeploymentDialogOpen)
+                }
+              />
+              {/* Change to production */}
+              <Button onClick={() => setChangeProductionDialogOpen(true)}>
+                Change to production
+              </Button>
+              <ChangeStateToProductionDialog
+                dialogTitle="Change to production?"
+                confirmButtonTitle="Change"
+                handleCancel={() => setChangeProductionDialogOpen(false)}
+                open={changeProductionDialogOpen}
+                handleConfirm={() => setChangeProductionDialogOpen(false)}
+                deployment={deployment}
+                domains={domains}
+              />
+              {/* Redeploy to production */}
+              <Button onClick={() => setRedeployToProduction(true)}>
+                Redeploy to production
+              </Button>
+              <ChangeStateToProductionDialog
+                dialogTitle="Redeploy to production?"
+                handleCancel={() =>
+                  setRedeployToProduction((preVal) => !preVal)
+                }
+                open={redeployToProduction}
+                confirmButtonTitle="Redeploy"
+                handleConfirm={async () =>
+                  setRedeployToProduction((preVal) => !preVal)
+                }
+                deployment={deployment}
+                domains={deployment.domain ? [deployment.domain] : []}
+              />
+              {/* Rollback to this deployment */}
+              <Button onClick={() => setRollbackDeployment(true)}>
+                Rollback to this deployment
+              </Button>
+              <ChangeStateToProductionDialog
+                dialogTitle="Rollback to this deployment?"
+                handleCancel={() => setRollbackDeployment((preVal) => !preVal)}
+                open={rollbackDeployment}
+                confirmButtonTitle="Rollback"
+                handleConfirm={async () =>
+                  setRollbackDeployment((preVal) => !preVal)
+                }
+                deployment={deployment}
+                newDeployment={deployment}
+                domains={deployment.domain ? [deployment.domain] : []}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ModalsPage;