diff --git a/web/src/api/forms.js b/web/src/api/forms.js
index 3144d01..dc42dbe 100644
--- a/web/src/api/forms.js
+++ b/web/src/api/forms.js
@@ -11,11 +11,7 @@ export const FormsApi = {
     return api.put(`/forms/create-by-form`, payload).then((r) => r.data);
   },
   getForm(formId) {
-    return api
-      .get('/forms/', {
-        params: { form_id: formId },
-      })
-      .then((r) => r.data);
+    return api.get(`/form/${formId}`).then((r) => r.data);
   },
   formsList() {
     return api.get('/form/').then((r) => r.data.result);
diff --git a/web/src/pages/NewFormTablePage.jsx b/web/src/pages/NewFormTablePage.jsx
index 7057fb6..e144ff0 100644
--- a/web/src/pages/NewFormTablePage.jsx
+++ b/web/src/pages/NewFormTablePage.jsx
@@ -1,18 +1,22 @@
 import { createPortal } from 'react-dom';
-import { TaskInfoContainer } from '../components/common/SwitchFormTask/SwitchFormTask.style';
-
+import {
+  NameTask,
+  TaskInfoContainer,
+} from '../components/common/SwitchFormTask/SwitchFormTask.style';
 import RealtimeTable from '../components/RealtimeTable';
 import { useParams } from 'react-router-dom';
-import { useEffect } from 'react';
-import { } from '../components/RealtimeTable/'
 import { RealtimeProvider } from '../components/RealtimeTable/contexts/RealtimeContext';
 import { useAuth } from '../app/context/AuthProvider';
+import { BackButton } from '../components/common/Buttons/BackButton';
+import { SHEET_NAME } from '../constants';
 
-const TableInfo = () => {
+const TableInfo = ({ formId, sheetName }) => {
   const portalContent = (
     <TaskInfoContainer>
-      {/* <BackButton to={`/task/${table.task_id}`} />
-      <NameTask>{table.name}</NameTask> */}
+      <BackButton to={`/task/${formId}`} />
+      {sheetName && (
+        <NameTask>{SHEET_NAME[sheetName] || sheetName}</NameTask>
+      )}
     </TaskInfoContainer>
   );
 
@@ -24,11 +28,12 @@ const TableInfo = () => {
 };
 
 export default function NewTablePage() {
-  const { formId, formType, sheetName, direction } = useParams()
+  const { formId, formType, sheetName, direction } = useParams();
   const { user } = useAuth();
 
   return (
     <>
+      {formId && <TableInfo formId={formId} sheetName={sheetName} />}
       {user && (
         <RealtimeProvider
           formId={formId}
@@ -37,7 +42,6 @@ export default function NewTablePage() {
           direction={direction === 'null' ? null : direction}
         >
           <RealtimeTable formType={formType} formId={formId} sheetName={sheetName} direction={direction === 'null' ? null : direction} />
-
         </RealtimeProvider>
       )}
 
diff --git a/web/src/pages/TaskPage/TaskPage.jsx b/web/src/pages/TaskPage/TaskPage.jsx
index a2fdbbf..cac3519 100644
--- a/web/src/pages/TaskPage/TaskPage.jsx
+++ b/web/src/pages/TaskPage/TaskPage.jsx
@@ -25,16 +25,10 @@ import TablesList from '../../components/common/TableList/TableList';
 import { SHEET_NAME } from '../../constants';
 
 const TaskInfo = ({ task }) => {
-  const formattedDateRange = `${formatDate(task.start_date)} — ${formatDate(task.end_date)}`;
-
   const portalContent = (
     <TaskInfoContainer>
       <BackButton to="/tasks" />
-      <NameTask>{task.title}</NameTask>
-      <Chip>
-        <DateIcon />
-        <span style={{ fontSize: '0.75rem' }}>{formattedDateRange}</span>
-      </Chip>
+      <NameTask>{task.form_type_code}</NameTask>
     </TaskInfoContainer>
   );
 
@@ -122,6 +116,7 @@ export default function TaskPage() {
 
   return (
     <>
+      {task && <TaskInfo task={task} />}
       <Box
         sx={{
           display: 'flex',