diff --git a/client/src/components/ui/dialog.tsx b/client/src/components/ui/dialog.tsx
index 516e6a3d..a62d3271 100644
--- a/client/src/components/ui/dialog.tsx
+++ b/client/src/components/ui/dialog.tsx
@@ -3,7 +3,7 @@
 import * as React from "react";
 
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { Cross2Icon } from "@radix-ui/react-icons";
+import { XIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
@@ -45,10 +45,10 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <Cross2Icon className="h-4 w-4" />
+      <DialogClose className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <XIcon className="h-5 w-5 text-foreground hover:text-muted-foreground" />
         <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
+      </DialogClose>
     </DialogPrimitive.Content>
   </DialogPortal>
 ));
@@ -109,6 +109,14 @@ const DialogDescription = React.forwardRef<
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
+const DialogContentContainer = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("space-y-1.5 text-foreground", className)} {...props} />
+);
+DialogContentContainer.displayName = "DialogContentContainer";
+
 export {
   Dialog,
   DialogPortal,
@@ -116,6 +124,7 @@ export {
   DialogTrigger,
   DialogClose,
   DialogContent,
+  DialogContentContainer,
   DialogHeader,
   DialogFooter,
   DialogTitle,
diff --git a/client/src/components/ui/info-button.tsx b/client/src/components/ui/info-button.tsx
new file mode 100644
index 00000000..8f777e83
--- /dev/null
+++ b/client/src/components/ui/info-button.tsx
@@ -0,0 +1,37 @@
+import { PropsWithChildren } from "react";
+import * as React from "react";
+
+import { InfoIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogContentContainer,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+export default function InfoButton({
+  title,
+  children,
+}: PropsWithChildren<{
+  title?: string;
+}>) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="ghost" className="h-5 w-5 p-0 hover:bg-transparent">
+          <InfoIcon className="h-7 w-7 text-foreground hover:text-muted-foreground" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          {title && <DialogTitle>{title}</DialogTitle>}
+          <DialogContentContainer>{children}</DialogContentContainer>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/client/src/components/ui/label.tsx b/client/src/components/ui/label.tsx
index 294e5de7..ee9ea678 100644
--- a/client/src/components/ui/label.tsx
+++ b/client/src/components/ui/label.tsx
@@ -4,19 +4,10 @@ import * as React from "react";
 
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva, type VariantProps } from "class-variance-authority";
-import { InfoIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
+import InfoButton from "@/components/ui/info-button";
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
@@ -40,22 +31,7 @@ const Label = React.forwardRef<
           className={cn(labelVariants(), className)}
           {...props}
         />
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button
-              variant="ghost"
-              className="group h-5 w-5 p-0 hover:bg-transparent"
-            >
-              <InfoIcon className="h-7 w-7 text-foreground hover:text-muted-foreground" />
-            </Button>
-          </DialogTrigger>
-          <DialogContent className="sm:max-w-md">
-            <DialogHeader>
-              <DialogTitle>{tooltip.title}</DialogTitle>
-              <DialogDescription>{tooltip.content}</DialogDescription>
-            </DialogHeader>
-          </DialogContent>
-        </Dialog>
+        <InfoButton title={tooltip.title}>{tooltip.content}</InfoButton>
       </div>
     );
   }
diff --git a/client/src/containers/projects/table/toolbar/index.tsx b/client/src/containers/projects/table/toolbar/index.tsx
index 64c4ff84..d1fa9d81 100644
--- a/client/src/containers/projects/table/toolbar/index.tsx
+++ b/client/src/containers/projects/table/toolbar/index.tsx
@@ -1,13 +1,41 @@
-import InfoDownloadProjectsTable from "@/containers/projects/table/toolbar/info-download";
 import SearchProjectsTable from "@/containers/projects/table/toolbar/search";
 import TabsProjectsTable from "@/containers/projects/table/toolbar/table-selector";
 
+import InfoButton from "@/components/ui/info-button";
+
 export default function ToolbarProjectsTable() {
   return (
     <div className="flex items-center justify-between px-5 py-3">
       <SearchProjectsTable />
       <TabsProjectsTable />
-      <InfoDownloadProjectsTable />
+      <div className="flex flex-1 items-center justify-end space-x-2">
+        <InfoButton>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+            vehicula, nunc nec vehicula fermentum, nunc libero bibendum purus,
+            nec tincidunt libero nunc nec libero. Integer nec libero nec libero
+            tincidunt tincidunt. Sed vehicula, nunc nec vehicula fermentum, nunc
+            libero bibendum purus, nec tincidunt libero nunc nec libero. Integer
+            nec libero nec libero tincidunt tincidunt.
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+            vehicula, nunc nec vehicula fermentum, nunc libero bibendum purus,
+            nec tincidunt libero nunc nec libero. Integer nec libero nec libero
+            tincidunt tincidunt. Sed vehicula, nunc nec vehicula fermentum, nunc
+            libero bibendum purus, nec tincidunt libero nunc nec libero. Integer
+            nec libero nec libero tincidunt tincidunt.
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+            vehicula, nunc nec vehicula fermentum, nunc libero bibendum purus,
+            nec tincidunt libero nunc nec libero. Integer nec libero nec libero
+            tincidunt tincidunt. Sed vehicula, nunc nec vehicula fermentum, nunc
+            libero bibendum purus, nec tincidunt libero nunc nec libero. Integer
+            nec libero nec libero tincidunt tincidunt.
+          </p>
+        </InfoButton>
+      </div>
     </div>
   );
 }
diff --git a/client/src/containers/projects/table/toolbar/info-download/index.tsx b/client/src/containers/projects/table/toolbar/info-download/index.tsx
deleted file mode 100644
index 5cd34ec4..00000000
--- a/client/src/containers/projects/table/toolbar/info-download/index.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { InfoIcon } from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-
-export default function InfoDownloadProjectsTable() {
-  const onClickInfo = () => {
-    //   todo
-  };
-
-  return (
-    <div className="flex flex-1 items-center justify-end space-x-2">
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button onClick={onClickInfo} variant="ghost" size="icon">
-            <InfoIcon className="h-5 w-5" />
-          </Button>
-        </DialogTrigger>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle>Lorem ipsum more info</DialogTitle>
-            <DialogDescription>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-                vehicula, nunc nec vehicula fermentum, nunc libero bibendum
-                purus, nec tincidunt libero nunc nec libero. Integer nec libero
-                nec libero tincidunt tincidunt. Sed vehicula, nunc nec vehicula
-                fermentum, nunc libero bibendum purus, nec tincidunt libero nunc
-                nec libero. Integer nec libero nec libero tincidunt tincidunt.
-              </p>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-                vehicula, nunc nec vehicula fermentum, nunc libero bibendum
-                purus, nec tincidunt libero nunc nec libero. Integer nec libero
-                nec libero tincidunt tincidunt. Sed vehicula, nunc nec vehicula
-                fermentum, nunc libero bibendum purus, nec tincidunt libero nunc
-                nec libero. Integer nec libero nec libero tincidunt tincidunt.
-              </p>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-                vehicula, nunc nec vehicula fermentum, nunc libero bibendum
-                purus, nec tincidunt libero nunc nec libero. Integer nec libero
-                nec libero tincidunt tincidunt. Sed vehicula, nunc nec vehicula
-                fermentum, nunc libero bibendum purus, nec tincidunt libero nunc
-                nec libero. Integer nec libero nec libero tincidunt tincidunt.
-              </p>
-            </DialogDescription>
-          </DialogHeader>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-}