diff --git a/src/components/Expand/Expand.tsx b/src/components/Expand/Expand.tsx
new file mode 100644
index 000000000..a2f08f405
--- /dev/null
+++ b/src/components/Expand/Expand.tsx
@@ -0,0 +1,68 @@
+// Copyright 2020-2022 SubQuery Pte Ltd authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { FC, useCallback, useMemo, useRef, useState } from 'react';
+import { Typography } from '@subql/components';
+import { useUpdate } from 'ahooks';
+
+import styles from './index.module.less';
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+const Expand: FC<IProps> = (props) => {
+  const update = useUpdate();
+
+  const [expanded, setExpanded] = useState(false);
+  const childrenRef = useRef<HTMLDivElement | null>(null);
+
+  const setCallback = useCallback((ref: HTMLDivElement) => {
+    childrenRef.current = ref;
+    update();
+  }, []);
+
+  const showExpandIcon = useMemo(() => {
+    const rect = childrenRef.current?.getBoundingClientRect();
+    return !!(rect?.height && rect.height > 400);
+  }, [childrenRef.current, props.children]);
+
+  return (
+    <div>
+      <div
+        ref={setCallback}
+        style={{
+          position: 'fixed',
+          zIndex: '-9999',
+          opacity: 0,
+        }}
+      >
+        {props.children}
+      </div>
+
+      <div
+        className={styles.expand}
+        style={{
+          height: expanded ? 'auto' : showExpandIcon ? 400 : 'auto',
+          overflow: 'hidden',
+        }}
+      >
+        {props.children}
+      </div>
+
+      {showExpandIcon && (
+        <div style={{ display: 'flex', justifyContent: 'center', padding: 12 }}>
+          <Typography.Link
+            active
+            onClick={() => {
+              setExpanded(!expanded);
+            }}
+          >
+            {expanded ? 'Show Less' : 'Show More'}
+          </Typography.Link>
+        </div>
+      )}
+    </div>
+  );
+};
+export default Expand;
diff --git a/src/components/Expand/index.module.less b/src/components/Expand/index.module.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/ProjectDeployments/ProjectDeployments.module.less b/src/components/ProjectDeployments/ProjectDeployments.module.less
index f472c3cbb..5b4a303aa 100644
--- a/src/components/ProjectDeployments/ProjectDeployments.module.less
+++ b/src/components/ProjectDeployments/ProjectDeployments.module.less
@@ -9,3 +9,16 @@
 .copy {
   margin-left: 6px;
 }
+
+
+@media screen and (max-width: 1599px) {
+  .descriptionMarkdown {
+    width: 300px;
+  } 
+}
+
+@media screen and (min-width: 1600px) {
+  .descriptionMarkdown {
+    width: auto;
+  } 
+}
\ No newline at end of file
diff --git a/src/components/ProjectDeployments/ProjectDeployments.tsx b/src/components/ProjectDeployments/ProjectDeployments.tsx
index 3bbee9e31..3eacf5d2f 100644
--- a/src/components/ProjectDeployments/ProjectDeployments.tsx
+++ b/src/components/ProjectDeployments/ProjectDeployments.tsx
@@ -3,15 +3,15 @@
 
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import Expand from '@components/Expand/Expand';
 import { useCreateDeployment } from '@hooks';
-import { Markdown, Modal, openNotification, Typography } from '@subql/components';
+import { Markdown, Modal, openNotification, TableTitle, Typography } from '@subql/components';
 import { parseError } from '@utils';
-import { Form, Radio } from 'antd';
+import { Form, Radio, Table } from 'antd';
 import { useForm } from 'antd/es/form/Form';
 import dayjs from 'dayjs';
 
 import { NewDeployment } from '../../models';
-import { Table, TableBody, TableCell, TableHead, TableRow } from '../Table';
 import { Copy } from '..';
 import styles from './ProjectDeployments.module.less';
 
@@ -67,70 +67,86 @@ const ProjectDeployments: React.FC<Props> = ({ deployments, projectId, currentDe
         <div>
           <Form form={form} layout="vertical">
             <Form.Item label="Deployment Description" name="description" rules={[{ required: true }]}>
-              <Markdown
-                value={form.getFieldValue('description')}
-                onChange={(e) => {
-                  form.setFieldValue('description', e);
-                }}
-              ></Markdown>
+              <div className={styles.markdownWrapper}>
+                <Markdown
+                  value={form.getFieldValue('description')}
+                  onChange={(e) => {
+                    form.setFieldValue('description', e);
+                  }}
+                ></Markdown>
+              </div>
             </Form.Item>
           </Form>
         </div>
       </Modal>
-      <Table aria-label="simple table">
-        <TableHead>
-          <TableRow>
-            <TableCell>{t('deployments.header1')}</TableCell>
-            <TableCell>RECOMMENDED</TableCell>
-            <TableCell>{t('deployments.header2')}</TableCell>
-            <TableCell>{t('deployments.header3')}</TableCell>
-            <TableCell>{t('deployments.header4')}</TableCell>
-            <TableCell>{t('general.action')}</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {deployments.map((deployment, index) => (
-            <TableRow key={index}>
-              <TableCell>
-                <p className={styles.value}>{deployment.version}</p>
-              </TableCell>
-              <TableCell>
-                <p className={styles.value}>
-                  <Radio checked={currentDeploymentCid === deployment.deploymentId}>RECOMMENDED</Radio>
-                </p>
-              </TableCell>
-              <TableCell>
-                <div className={styles.deploymentId}>
-                  <p className={styles.value}>{deployment.deploymentId}</p>
-                  <Copy value={deployment.deploymentId} className={styles.copy} />
-                </div>
-              </TableCell>
-              <TableCell>
-                <div className={styles.descriptionMarkdown}>
-                  <Markdown.Preview>{deployment.description}</Markdown.Preview>
-                </div>
-              </TableCell>
-              <TableCell>
-                <p className={styles.value}>
-                  {deployment.createdAt ? dayjs(deployment.createdAt).utc(true).fromNow() : 'N/A'}
-                </p>
-              </TableCell>
-              <TableCell>
-                <Typography.Link
-                  active
-                  onClick={() => {
-                    form.setFieldValue('description', deployment.description || '');
-                    setCurrentDeployment(deployment);
-                    setDeploymentModal(true);
-                  }}
-                >
-                  Edit
-                </Typography.Link>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+      <Table
+        columns={[
+          {
+            dataIndex: 'version',
+            key: 'version',
+            title: <TableTitle>{t('deployments.header1')}</TableTitle>,
+            render: (val) => <Typography>{val}</Typography>,
+          },
+          {
+            dataIndex: 'deploymentId',
+            key: 'deploymentId',
+            title: <TableTitle>RECOMMENDED</TableTitle>,
+            render: (val) => (
+              <p className={styles.value}>
+                <Radio checked={currentDeploymentCid === val}>RECOMMENDED</Radio>
+              </p>
+            ),
+          },
+          {
+            dataIndex: 'deploymentId',
+            key: 'deploymentIdText',
+            title: <TableTitle>{t('deployments.header2')}</TableTitle>,
+            render: (val) => (
+              <div className={styles.deploymentId}>
+                <p className={styles.value}>{val}</p>
+                <Copy value={val} className={styles.copy} />
+              </div>
+            ),
+          },
+          {
+            dataIndex: 'description',
+            key: 'description',
+            title: <TableTitle>{t('deployments.header3')}</TableTitle>,
+            render: (val) => (
+              <div className={styles.descriptionMarkdown}>
+                <Expand>
+                  <Markdown.Preview>{val}</Markdown.Preview>
+                </Expand>
+              </div>
+            ),
+          },
+          {
+            dataIndex: 'createdAt',
+            key: 'createdAt',
+            title: <TableTitle>{t('deployments.header4')}</TableTitle>,
+            render: (val) => <p className={styles.value}>{val ? dayjs(val).utc(true).fromNow() : 'N/A'}</p>,
+          },
+          {
+            dataIndex: 'version',
+            key: 'version',
+            title: <TableTitle>{t('general.action')}</TableTitle>,
+            render: (_, record) => (
+              <Typography.Link
+                active
+                onClick={() => {
+                  form.setFieldValue('description', record.description || '');
+                  setCurrentDeployment(record);
+                  setDeploymentModal(true);
+                }}
+              >
+                Edit
+              </Typography.Link>
+            ),
+            fixed: 'right',
+          },
+        ]}
+        dataSource={deployments}
+      ></Table>
     </>
   );
 };
diff --git a/src/components/ProjectOverview/ProjectOverview.tsx b/src/components/ProjectOverview/ProjectOverview.tsx
index 2e02a44de..db3fdfbbc 100644
--- a/src/components/ProjectOverview/ProjectOverview.tsx
+++ b/src/components/ProjectOverview/ProjectOverview.tsx
@@ -4,6 +4,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { BsGithub, BsGlobe } from 'react-icons/bs';
+import Expand from '@components/Expand/Expand';
 import NewCard from '@components/NewCard';
 import { useRouteQuery } from '@hooks';
 import { ProjectDetailsQuery } from '@hooks/useProjectFromQuery';
@@ -62,7 +63,9 @@ const ProjectOverview: React.FC<Props> = ({ project, metadata, deploymentDescrip
     <div className={styles.container}>
       <div style={{ display: 'flex', flexDirection: 'column' }}>
         <div style={{ width: 720 }}>
-          <Markdown.Preview>{metadata.description || 'N/A'}</Markdown.Preview>
+          <Expand>
+            <Markdown.Preview>{metadata.description || 'N/A'}</Markdown.Preview>
+          </Expand>
         </div>
         <div className={styles.column} style={{ marginTop: 16 }}>
           <ExternalLink icon="globe" link={metadata.websiteUrl} />
@@ -74,7 +77,9 @@ const ProjectOverview: React.FC<Props> = ({ project, metadata, deploymentDescrip
             {t('projectOverview.deploymentDescription')}
           </Typography>
           <div style={{ width: 670, marginTop: 8 }}>
-            <Markdown.Preview>{deploymentDescription || 'N/A'}</Markdown.Preview>
+            <Expand>
+              <Markdown.Preview>{deploymentDescription || 'N/A'}</Markdown.Preview>
+            </Expand>
           </div>
         </div>
       </div>
diff --git a/src/components/Table/Table.module.css b/src/components/Table/Table.module.css
deleted file mode 100644
index d3ba8f185..000000000
--- a/src/components/Table/Table.module.css
+++ /dev/null
@@ -1,56 +0,0 @@
-.tableContainer {
-  width: 100%;
-  overflow-x: auto;
-}
-
-.table {
-  width: 100%;
-  display: table;
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-
-.head {
-  display: table-header-group;
-  background: var(--gray200);
-}
-
-.head th {
-  position: relative;
-
-  font-size: 12px;
-  line-height: 150%;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-}
-
-/* For the right border */
-.head th:not(:last-child):after {
-  content: '';
-  position: absolute;
-  right: 0px;
-  top: 30%;
-  height: 40%;
-  border-right: 1px solid var(--gray300);
-}
-
-.body {
-  display: table-row-group;
-}
-
-.row {
-  display: table-row;
-}
-
-.cell {
-  display: table-cell;
-  padding: 16px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-  text-align: left;
-  vertical-align: inherit;
-
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 20px;
-  color: var(--gray700);
-}
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
deleted file mode 100644
index 8a0f747b6..000000000
--- a/src/components/Table/Table.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// Copyright 2020-2022 SubQuery Pte Ltd authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import * as React from 'react';
-
-import styles from './Table.module.css';
-
-/**
- * NOTE:
- * FROM April 2022, use antD table
- */
-
-type TableProps = {
-  className?: string;
-};
-
-export const Table: React.FC<React.PropsWithChildren<TableProps>> = ({ children, className }) => {
-  return (
-    <div className={styles.tableContainer}>
-      <table className={[styles.table, className].join(' ')}>{children}</table>
-    </div>
-  );
-};
-
-type TableHeadProps = {
-  className?: string;
-};
-
-export const TableHead: React.FC<React.PropsWithChildren<TableHeadProps>> = ({ className, children }) => {
-  return <thead className={[styles.head, className].join(' ')}>{children}</thead>;
-};
-
-type TableBodyProps = {
-  className?: string;
-};
-
-export const TableBody: React.FC<React.PropsWithChildren<TableBodyProps>> = ({ children, className }) => {
-  return <tbody className={[styles.body, className].join(' ')}>{children}</tbody>;
-};
-
-type TableRowProps = {
-  className?: string;
-};
-
-export const TableRow: React.FC<React.PropsWithChildren<TableRowProps>> = ({ children, className }) => {
-  return <tr className={[styles.row, className].join(' ')}>{children}</tr>;
-};
-
-type TableCellProps = {
-  className?: string;
-};
-
-export const TableCell: React.FC<React.PropsWithChildren<TableCellProps>> = ({ children, className }) => {
-  return <th className={[styles.cell, className].join(' ')}>{children}</th>;
-};
-
-export default Table;
diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts
index b9a29883e..a397d4bb8 100644
--- a/src/components/Table/index.ts
+++ b/src/components/Table/index.ts
@@ -1,5 +1,4 @@
 // Copyright 2020-2022 SubQuery Pte Ltd authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export * from './Table';
 export * from './AntDTable';
diff --git a/src/hooks/useCreateDeployment.tsx b/src/hooks/useCreateDeployment.tsx
index 2bc44c1f1..02e5b9e27 100644
--- a/src/hooks/useCreateDeployment.tsx
+++ b/src/hooks/useCreateDeployment.tsx
@@ -19,7 +19,7 @@ export function useCreateDeployment(
     });
 
     console.log('Uploaded version details', versionCid);
-
+    debugger;
     const tx = await projectRegistry.updateDeployment(
       projectId,
       deploymentDetails.deploymentId,
diff --git a/src/pages/studio/Create/Create.module.less b/src/pages/studio/Create/Create.module.less
index 900040f56..ad8caac73 100644
--- a/src/pages/studio/Create/Create.module.less
+++ b/src/pages/studio/Create/Create.module.less
@@ -56,3 +56,12 @@
     }
   }
 }
+
+.markdownWrapper {
+  :global {
+    .subql-markdown-preview {
+      height: 440px;
+      overflow: auto;
+    }
+  }
+}
diff --git a/src/pages/studio/Create/Create.tsx b/src/pages/studio/Create/Create.tsx
index f34e1a04a..cba6f1e76 100644
--- a/src/pages/studio/Create/Create.tsx
+++ b/src/pages/studio/Create/Create.tsx
@@ -186,12 +186,14 @@ const Create: React.FC = () => {
                       form: { setFieldValue: (field: string, val: any) => void };
                     }) => {
                       return (
-                        <Markdown
-                          value={field.value}
-                          onChange={(e) => {
-                            form.setFieldValue(field.name, e);
-                          }}
-                        />
+                        <div className={styles.markdownWrapper}>
+                          <Markdown
+                            value={field.value}
+                            onChange={(e) => {
+                              form.setFieldValue(field.name, e);
+                            }}
+                          />
+                        </div>
                       );
                     }}
                   </Field>
@@ -265,12 +267,14 @@ const Create: React.FC = () => {
                           form: { setFieldValue: (field: string, val: any) => void };
                         }) => {
                           return (
-                            <Markdown
-                              value={field.value}
-                              onChange={(e) => {
-                                form.setFieldValue(field.name, e);
-                              }}
-                            />
+                            <div className={styles.markdownWrapper}>
+                              <Markdown
+                                value={field.value}
+                                onChange={(e) => {
+                                  form.setFieldValue(field.name, e);
+                                }}
+                              />
+                            </div>
                           );
                         }}
                       </Field>
diff --git a/src/pages/studio/Project/Project.module.css b/src/pages/studio/Project/Project.module.less
similarity index 76%
rename from src/pages/studio/Project/Project.module.css
rename to src/pages/studio/Project/Project.module.less
index 51324d062..04c6ac8f5 100644
--- a/src/pages/studio/Project/Project.module.css
+++ b/src/pages/studio/Project/Project.module.less
@@ -27,3 +27,13 @@
   font-weight: 500;
   cursor: pointer;
 }
+
+
+.markdownWrapper {
+  :global {
+    .subql-markdown-preview {
+      height: 440px;
+      overflow: auto;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/pages/studio/Project/Project.tsx b/src/pages/studio/Project/Project.tsx
index f17191731..7b040a18b 100644
--- a/src/pages/studio/Project/Project.tsx
+++ b/src/pages/studio/Project/Project.tsx
@@ -3,6 +3,7 @@
 
 import * as React from 'react';
 import { useNavigate, useParams } from 'react-router';
+import Expand from '@components/Expand/Expand';
 import { ExternalLink } from '@components/ProjectOverview/ProjectOverview';
 import UnsafeWarn from '@components/UnsafeWarn';
 import { useGetIfUnsafeDeployment } from '@hooks/useGetIfUnsafeDeployment';
@@ -18,7 +19,7 @@ import { useWeb3 } from '../../../containers';
 import { useCreateDeployment, useProject } from '../../../hooks';
 import { parseError, renderAsync } from '../../../utils';
 import DeploymentsTab, { DeploymendRef } from './Deployments';
-import styles from './Project.module.css';
+import styles from './Project.module.less';
 
 export const ProjectDeploymentsDetail: React.FC<{ id?: string; project: ProjectDetails }> = ({ id, project }) => {
   const [form] = useForm();
@@ -69,15 +70,24 @@ export const ProjectDeploymentsDetail: React.FC<{ id?: string; project: ProjectD
               <Input size="large" placeholder="Enter version"></Input>
             </Form.Item>
             <Form.Item name="recommended">
-              <SubqlCheckbox>Set as recommended version</SubqlCheckbox>
-            </Form.Item>
-            <Form.Item label="Deployment Description" name="description" rules={[{ required: true }]}>
-              <Markdown
-                value={form.getFieldValue('description')}
+              <SubqlCheckbox
+                value={form.getFieldValue('recommended')}
                 onChange={(e) => {
-                  form.setFieldValue('description', e);
+                  form.setFieldValue('recommended', e.target.checked);
                 }}
-              ></Markdown>
+              >
+                Set as recommended version
+              </SubqlCheckbox>
+            </Form.Item>
+            <Form.Item label="Deployment Description" name="description" rules={[{ required: true }]}>
+              <div className={styles.markdownWrapper}>
+                <Markdown
+                  value={form.getFieldValue('description')}
+                  onChange={(e) => {
+                    form.setFieldValue('description', e);
+                  }}
+                ></Markdown>
+              </div>
             </Form.Item>
           </Form>
         </div>
@@ -93,6 +103,7 @@ export const ProjectDeploymentsDetail: React.FC<{ id?: string; project: ProjectD
             active
             weight={500}
             onClick={() => {
+              form.resetFields();
               setDeploymentModal(true);
             }}
           >
@@ -185,7 +196,9 @@ const Project: React.FC = () => {
             </Typography>
 
             <div style={{ marginBottom: 16 }}>
-              <Markdown.Preview>{project.metadata.description}</Markdown.Preview>
+              <Expand>
+                <Markdown.Preview>{project.metadata.description}</Markdown.Preview>
+              </Expand>
             </div>
 
             <Typography variant="large" style={{ margin: '24px 0 8px 0' }}>