diff --git a/comps/form/utils/init.tsx b/comps/form/utils/init.tsx
index c61931d..3e87309 100755
--- a/comps/form/utils/init.tsx
+++ b/comps/form/utils/init.tsx
@@ -155,7 +155,8 @@ export const formInit = (fm: FMLocal, props: FMProps) => {
         <>
           <Loader2 className="c-h-4 c-w-4 c-animate-spin" />
           Loading data...
-        </>
+        </>,
+        { dismissible: true }
       );
     }
 
diff --git a/comps/list/TableList.tsx b/comps/list/TableList.tsx
index bffe9fc..6dc2bf6 100755
--- a/comps/list/TableList.tsx
+++ b/comps/list/TableList.tsx
@@ -776,7 +776,8 @@ export const TableList: FC<TableListProp> = ({
           <>
             <Loader2 className="c-h-4 c-w-4 c-animate-spin" />
             Loading Data ...
-          </>
+          </>,
+          { dismissible: true }
         );
       } else {
         toast.dismiss();
diff --git a/comps/popup/NavLink.tsx b/comps/popup/NavLink.tsx
new file mode 100755
index 0000000..97787dd
--- /dev/null
+++ b/comps/popup/NavLink.tsx
@@ -0,0 +1,54 @@
+import { Spinner } from "lib/comps/ui/field-loading";
+import { useLocal } from "lib/utils/use-local";
+import { FC, HTMLProps } from "react";
+
+navigate;
+export const NavLink: FC<
+  HTMLProps<HTMLAnchorElement> & {
+    params?: {
+      name?: string;
+      where?: any;
+      create?: any;
+      update?: any;
+      breads?: { label: string; url?: string }[];
+    };
+  }
+> = (props) => {
+  const local = useLocal({ loading: false });
+  let href = props.href || "";
+
+  if (href.startsWith("/")) {
+    href = baseurl(href);
+  }
+  return (
+    <a
+      {...props}
+      href={href}
+      onClick={async (e) => {
+        if (isEditor) {
+          e.stopPropagation();
+          e.preventDefault();
+          return;
+        }
+
+        if (props.href?.startsWith(`/`)) {
+          e.stopPropagation();
+          e.preventDefault();
+
+          if (props.params) {
+            local.loading = true;
+            local.render();
+            navigate(props.href, props.params);
+            setTimeout(() => {
+              local.loading = false;
+            }, 3000);
+          } else {
+            navigate(props.href);
+          }
+        }
+      }}
+    >
+      {local.loading ? <Spinner /> : props.children}
+    </a>
+  );
+};
diff --git a/comps/ui/field-loading.tsx b/comps/ui/field-loading.tsx
index 2617c27..abdc07f 100755
--- a/comps/ui/field-loading.tsx
+++ b/comps/ui/field-loading.tsx
@@ -1,5 +1,4 @@
 import { Skeleton } from "@/comps/ui/skeleton";
-import { cn } from "lib/utils";
 import { Loader2 } from "lucide-react";
 import { FC } from "react";
 
diff --git a/comps/ui/toast.tsx b/comps/ui/toast.tsx
index 6187311..b043d7f 100755
--- a/comps/ui/toast.tsx
+++ b/comps/ui/toast.tsx
@@ -1,5 +1,6 @@
 import { ReactElement } from "react";
-import { toast as sonner } from "sonner";
+import { createPortal } from "react-dom";
+import { toast as sonner, Toaster as SonnerToaster } from "sonner";
 const timer = {
   timeout: null as any,
   done: false,
@@ -49,3 +50,22 @@ export const toast = {
     }, timer.limit);
   },
 };
+
+export const Toaster = () => {
+  if (document.getElementsByClassName("prasi-toaster").length === 0) {
+    const elemDiv = document.createElement("div");
+    elemDiv.className = "prasi-toaster";
+    document.body.appendChild(elemDiv);
+  }
+  const toaster_el = document.getElementsByClassName("prasi-toaster")[0];
+
+  return (
+    <>
+      {toaster_el &&
+        createPortal(
+          <SonnerToaster position={toast.position} cn={cx} />,
+          toaster_el
+        )}
+    </>
+  );
+};
diff --git a/exports.tsx b/exports.tsx
index 5237448..6a279d9 100755
--- a/exports.tsx
+++ b/exports.tsx
@@ -106,6 +106,8 @@ export { prasi_gen } from "./gen/prasi_gen";
 export { guessLabel } from "./utils/guess-label";
 import __get from "lodash.get";
 import { sum } from "./utils/sum";
+export { toast, Toaster } from "./comps/ui/toast";
+export { NavLink } from "./comps/popup/NavLink";
 export { kvToJSON } from "./utils/kv-to-json";
 export { overrideNav } from "./utils/override-nav";
 
diff --git a/utils/baseurl.ts b/utils/baseurl.ts
index 178a835..a753af4 100755
--- a/utils/baseurl.ts
+++ b/utils/baseurl.ts
@@ -1,6 +1,7 @@
 export const baseurl = (url: string) => {
   if (location.hostname === "prasi.avolut.com") {
     const id_site = location.pathname.split("/")[2];
+
     if (url.startsWith("/")) return `/prod/${id_site}${url}`;
     else return `/prod/${id_site}/${url}`;
   }