diff --git a/comps/custom/TitleBack.tsx b/comps/custom/TitleBack.tsx
new file mode 100755
index 0000000..da6654a
--- /dev/null
+++ b/comps/custom/TitleBack.tsx
@@ -0,0 +1,24 @@
+import { icon } from "../icon";
+import { FC } from "react";
+
+export const TitleBack: FC<{
+  label: string;
+  url: string;
+  name_page: string;
+}> = ({ label, url, name_page }) => {
+
+  return (
+    <div className="c-bg-gray-100 c-px-2 c-w-full c-h-[20px] c-flex  c-py-2">
+      <div
+        className="c-mr-2 hover:c-cursor-pointer"
+        onClick={() => {
+          navigate(`${url}`);
+        }}
+      >
+        {icon.left}
+      </div>
+
+      <div>{label || "-"}</div>
+    </div>
+  );
+};
diff --git a/comps/icon.tsx b/comps/icon.tsx
index dcd8643..ed887df 100755
--- a/comps/icon.tsx
+++ b/comps/icon.tsx
@@ -46,6 +46,7 @@ import {
   BetweenHorizontalStart,
   Outdent,
   Indent,
+  ChevronLeft,
 } from "lucide-react";
 
 export const icon = {
@@ -76,6 +77,7 @@ export const icon = {
   workflow: <Workflow />,
   layout: <LayoutList />,
   right: <ChevronRight />,
+  left: <ChevronLeft />,
   down: <ChevronDown />,
   setting: <Settings />,
   settingSmall: <Settings className={`c-w-4`} fill="currentColor" />,
@@ -120,5 +122,5 @@ export const icon = {
     </svg>
   ),
   delete: <Delete />,
-  update: <Edit />
+  update: <Edit />,
 };