diff --git a/CHANGE_LOG.md b/CHANGE_LOG.md
deleted file mode 100644
index 724a8d56f..000000000
--- a/CHANGE_LOG.md
+++ /dev/null
@@ -1,53 +0,0 @@
-# Changelog
-
-## Mindmaps
-
-preview
-url
-
-```
-const fitViewOptions = {
-  duration: 700,
-};
-
-export const onPreBootstrap: GatsbyNode['onPreBootstrap'] = () => {
-  const buildId = randomUUID();
-
-  process.env.GATSBY_BUILD_ID = buildId;
-};
-
-import React from 'react';
-import { Button } from 'design-system/button';
-import { Modal } from 'design-system/modal';
-import { useSimpleFeature } from '@greenonsoftware/react-kit';
-
-const ExamplesContainer = () => {
-  const examplesModal = useSimpleFeature();
-
-  return (
-    <>
-      <Button
-        i={1}
-        s={2}
-        auto
-        className="md:flex hidden"
-        title="Show examples"
-        onClick={examplesModal.toggle}
-      >
-        Examples
-      </Button>
-      {examplesModal.isOn && (
-        <Modal onClose={examplesModal.off}>
-          <Modal.Header
-            title="Mindmap Examples"
-            closeButtonTitle="Close mindmap examples window"
-          />
-        </Modal>
-      )}
-    </>
-  );
-};
-
-export { ExamplesContainer };
-
-```
diff --git a/biome.json b/biome.json
index c1c361bef..a820d55a6 100644
--- a/biome.json
+++ b/biome.json
@@ -41,9 +41,6 @@
         "noUnknownAtRules": "off",
         "useIterableCallbackReturn": "off"
       },
-      "security": {
-        "noDangerouslySetInnerHtml": "off"
-      },
       "style": {
         "useImportType": "off",
         "noNonNullAssertion": "off",
diff --git a/cypress/scenarios/docs-management.ts b/cypress/scenarios/docs-management.ts
index 4e1745f58..65cb3741b 100644
--- a/cypress/scenarios/docs-management.ts
+++ b/cypress/scenarios/docs-management.ts
@@ -130,7 +130,9 @@ const DOCS_MANAGEMENT_SCENARIOS = {
       .and(`I see text`, [
         editedDocumentName,
         editedDocumentDescription,
-        `angular, vue, node`,
+        "angular",
+        "vue",
+        "node",
       ])
       .when(`I click button`, [`Close additional options`]);
 
diff --git a/cypress/snapshots/docs-creator.cy.ts/Blocks.snap.png b/cypress/snapshots/docs-creator.cy.ts/Blocks.snap.png
index c28426844..2aa08e8a5 100644
Binary files a/cypress/snapshots/docs-creator.cy.ts/Blocks.snap.png and b/cypress/snapshots/docs-creator.cy.ts/Blocks.snap.png differ
diff --git a/cypress/snapshots/docs-creator.cy.ts/Lists.snap.png b/cypress/snapshots/docs-creator.cy.ts/Lists.snap.png
index 396ec7eab..9593bf482 100644
Binary files a/cypress/snapshots/docs-creator.cy.ts/Lists.snap.png and b/cypress/snapshots/docs-creator.cy.ts/Lists.snap.png differ
diff --git a/cypress/snapshots/docs-creator.cy.ts/Thanks for using our editor!.snap.png b/cypress/snapshots/docs-creator.cy.ts/Thanks for using our editor!.snap.png
index 0069d2212..9d8b74245 100644
Binary files a/cypress/snapshots/docs-creator.cy.ts/Thanks for using our editor!.snap.png and b/cypress/snapshots/docs-creator.cy.ts/Thanks for using our editor!.snap.png differ
diff --git a/cypress/snapshots/docs-creator.cy.ts/Typography.snap.png b/cypress/snapshots/docs-creator.cy.ts/Typography.snap.png
index 51f6b64b4..17cccb7de 100644
Binary files a/cypress/snapshots/docs-creator.cy.ts/Typography.snap.png and b/cypress/snapshots/docs-creator.cy.ts/Typography.snap.png differ
diff --git a/cypress/snapshots/docs-creator.cy.ts/headings-after-change-theme.snap.png b/cypress/snapshots/docs-creator.cy.ts/headings-after-change-theme.snap.png
index 6b78136cf..c86dcc52f 100644
Binary files a/cypress/snapshots/docs-creator.cy.ts/headings-after-change-theme.snap.png and b/cypress/snapshots/docs-creator.cy.ts/headings-after-change-theme.snap.png differ
diff --git a/cypress/snapshots/docs-creator.cy.ts/headings-before-change-theme.snap.png b/cypress/snapshots/docs-creator.cy.ts/headings-before-change-theme.snap.png
index 79a61df51..8be2b5a8c 100644
Binary files a/cypress/snapshots/docs-creator.cy.ts/headings-before-change-theme.snap.png and b/cypress/snapshots/docs-creator.cy.ts/headings-before-change-theme.snap.png differ
diff --git a/cypress/snapshots/docs-creator.cy.ts/lists-after-change-theme.snap.png b/cypress/snapshots/docs-creator.cy.ts/lists-after-change-theme.snap.png
index 2fe04d4f2..ca5c00051 100644
Binary files a/cypress/snapshots/docs-creator.cy.ts/lists-after-change-theme.snap.png and b/cypress/snapshots/docs-creator.cy.ts/lists-after-change-theme.snap.png differ
diff --git a/cypress/snapshots/docs-creator.cy.ts/lists-before-change-theme.snap.png b/cypress/snapshots/docs-creator.cy.ts/lists-before-change-theme.snap.png
index 37b0752a6..9e9b14922 100644
Binary files a/cypress/snapshots/docs-creator.cy.ts/lists-before-change-theme.snap.png and b/cypress/snapshots/docs-creator.cy.ts/lists-before-change-theme.snap.png differ
diff --git a/cypress/snapshots/docs-creator.cy.ts/math-after-change-theme.snap.png b/cypress/snapshots/docs-creator.cy.ts/math-after-change-theme.snap.png
index 87256c43f..d2642621b 100644
Binary files a/cypress/snapshots/docs-creator.cy.ts/math-after-change-theme.snap.png and b/cypress/snapshots/docs-creator.cy.ts/math-after-change-theme.snap.png differ
diff --git a/cypress/snapshots/docs-creator.cy.ts/math-before-change-theme.snap.png b/cypress/snapshots/docs-creator.cy.ts/math-before-change-theme.snap.png
index 3c40669bb..15bd3a057 100644
Binary files a/cypress/snapshots/docs-creator.cy.ts/math-before-change-theme.snap.png and b/cypress/snapshots/docs-creator.cy.ts/math-before-change-theme.snap.png differ
diff --git a/cypress/snapshots/user-profile-management.cy.ts/empty-user-profile-form.snap.png b/cypress/snapshots/user-profile-management.cy.ts/empty-user-profile-form.snap.png
index c5ee8ce7a..b234a9b99 100644
Binary files a/cypress/snapshots/user-profile-management.cy.ts/empty-user-profile-form.snap.png and b/cypress/snapshots/user-profile-management.cy.ts/empty-user-profile-form.snap.png differ
diff --git a/cypress/snapshots/user-profile-management.cy.ts/error-screen-dupliated-username.snap.png b/cypress/snapshots/user-profile-management.cy.ts/error-screen-dupliated-username.snap.png
index 51ecc26ca..324bd5870 100644
Binary files a/cypress/snapshots/user-profile-management.cy.ts/error-screen-dupliated-username.snap.png and b/cypress/snapshots/user-profile-management.cy.ts/error-screen-dupliated-username.snap.png differ
diff --git a/cypress/snapshots/user-profile-management.cy.ts/no-profile-yet.snap.png b/cypress/snapshots/user-profile-management.cy.ts/no-profile-yet.snap.png
index a2a2ee6c6..3cfad2115 100644
Binary files a/cypress/snapshots/user-profile-management.cy.ts/no-profile-yet.snap.png and b/cypress/snapshots/user-profile-management.cy.ts/no-profile-yet.snap.png differ
diff --git a/cypress/snapshots/user-profile-management.cy.ts/profile-ready.snap.png b/cypress/snapshots/user-profile-management.cy.ts/profile-ready.snap.png
index 799bf3564..05edb8e66 100644
Binary files a/cypress/snapshots/user-profile-management.cy.ts/profile-ready.snap.png and b/cypress/snapshots/user-profile-management.cy.ts/profile-ready.snap.png differ
diff --git a/cypress/snapshots/user-profile.cy.ts/cleaned-user-profile-form.snap.png b/cypress/snapshots/user-profile.cy.ts/cleaned-user-profile-form.snap.png
index e9a96e6e6..fde2d1c97 100644
Binary files a/cypress/snapshots/user-profile.cy.ts/cleaned-user-profile-form.snap.png and b/cypress/snapshots/user-profile.cy.ts/cleaned-user-profile-form.snap.png differ
diff --git a/cypress/snapshots/user-profile.cy.ts/filled-user-profile-form.snap.png b/cypress/snapshots/user-profile.cy.ts/filled-user-profile-form.snap.png
index 20960760a..8f166a552 100644
Binary files a/cypress/snapshots/user-profile.cy.ts/filled-user-profile-form.snap.png and b/cypress/snapshots/user-profile.cy.ts/filled-user-profile-form.snap.png differ
diff --git a/cypress/snapshots/user-profile.cy.ts/full-user-profile-form.snap.png b/cypress/snapshots/user-profile.cy.ts/full-user-profile-form.snap.png
index 1dd5a7d65..a5f04b34a 100644
Binary files a/cypress/snapshots/user-profile.cy.ts/full-user-profile-form.snap.png and b/cypress/snapshots/user-profile.cy.ts/full-user-profile-form.snap.png differ
diff --git a/cypress/snapshots/user-profile.cy.ts/no-profile-section.snap.png b/cypress/snapshots/user-profile.cy.ts/no-profile-section.snap.png
index a2a2ee6c6..3cfad2115 100644
Binary files a/cypress/snapshots/user-profile.cy.ts/no-profile-section.snap.png and b/cypress/snapshots/user-profile.cy.ts/no-profile-section.snap.png differ
diff --git a/gatsby-ssr.tsx b/gatsby-ssr.tsx
index 3a3cd67c3..7df8f3d58 100644
--- a/gatsby-ssr.tsx
+++ b/gatsby-ssr.tsx
@@ -9,6 +9,7 @@ export const onRenderBody: GatsbySSR["onRenderBody"] = ({
     <script
       id="dark-mode"
       key="dark-mode"
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: <No injection RISK - DONE FULLY DURING SSG>
       dangerouslySetInnerHTML={{
         __html: `
         void function() {
diff --git a/package.json b/package.json
index b9ff0d0a9..8e4378427 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,9 @@
     "typecheck": "tsc --noEmit",
     "test": "jest",
     "test:watch": "jest --watch",
-    "e2e:1": "cypress run --spec \"cypress/e2e/user-profile.cy.ts\"",
+    "e2e:1": "cypress run --spec \"cypress/e2e/docs-management.cy.ts\"",
     "e2e:all": "cypress run",
+    "e2e:open": "cypress open",
     "e2e:check-snapshots": "npm run build && start-server-and-test serve http://localhost:9000 \"cypress run\"",
     "ci:lint": "npm run lint",
     "ci:e2e": "npm run build && start-server-and-test serve http://localhost:9000 \"cypress run --env failOnSnapshotDiff=false\"",
diff --git a/src/api-4markdown-contracts/contracts/index.ts b/src/api-4markdown-contracts/contracts/index.ts
index 2286caa02..0a25f0187 100644
--- a/src/api-4markdown-contracts/contracts/index.ts
+++ b/src/api-4markdown-contracts/contracts/index.ts
@@ -28,6 +28,7 @@ import type {
   YourAccountDto,
   CommentDto,
   ResourceCompletionDto,
+  ManualDocumentDto,
 } from "../dtos";
 import { AccessGroupDto } from "../dtos/access-group.dto";
 // @TODO[PRIO=1]: [Add better error handling and throwing custom errors].
@@ -137,6 +138,7 @@ type GetYourDocumentsContract = Contract<
     | PrivateDocumentDto
     | Omit<PublicDocumentDto, "author" | "rating">
     | Omit<PermanentDocumentDto, "author" | "rating">
+    | Omit<ManualDocumentDto, "author" | "rating">
   )[]
 >;
 type GetAccessibleDocumentContract = Contract<
@@ -173,12 +175,14 @@ type UpdateDocumentVisibilityContract = Contract<
   | PrivateDocumentDto
   | Omit<PublicDocumentDto, "author" | "rating">
   | Omit<PermanentDocumentDto, "author" | "rating">,
+  | Omit<ManualDocumentDto, "author" | "rating">
   | Pick<PrivateDocumentDto, "id" | "mdate" | "visibility">
   | Pick<PublicDocumentDto, "id" | "mdate" | "visibility">
   | Pick<
       PermanentDocumentDto,
       "id" | "mdate" | "visibility" | "description" | "tags" | "name"
     >
+  | Pick<ManualDocumentDto, "id" | "mdate" | "visibility">
 >;
 
 type UploadImageContract = Contract<
diff --git a/src/components/cookies-modal.tsx b/src/components/cookies-modal.tsx
index 67473b30c..d8f9873da 100644
--- a/src/components/cookies-modal.tsx
+++ b/src/components/cookies-modal.tsx
@@ -1,5 +1,5 @@
 import { Button } from "design-system/button";
-import { Modal } from "design-system/modal";
+import { Modal2 } from "design-system/modal2";
 import React from "react";
 import c from "classnames";
 import { getCookie, setCookie } from "development-kit/cookies";
@@ -67,98 +67,105 @@ const CookiesModal = () => {
   if (accepted) return null;
 
   return (
-    <Modal>
+    <Modal2>
       {view === ViewType.Intro && (
         <>
-          <Modal.Header title="Privacy Policy Settings" skipX />
-          <p className="text-justify mb-2">
-            By clicking <strong>Accept</strong>, you consent to the use of
-            cookies and agree to the <strong>{meta.appName}</strong> privacy
-            policy. These cookies are used to enhance site navigation, analyze
-            usage patterns, and support our marketing efforts
-          </p>
-          <button
-            className="text-sm font-bold underline underline-offset-2 text-blue-800 dark:text-blue-500"
-            title="Read privacy policy"
-            onClick={goToPolicy}
-          >
-            Read Our Privacy Policy
-          </button>
-          <footer className="flex space-x-3 [&_button]:flex-1 mt-8">
-            <Button
-              s={2}
-              i={2}
-              title="Customize cookies"
-              auto
-              onClick={goToManagement}
+          <Modal2.Header title="Privacy Policy Settings" skipX />
+          <Modal2.Body>
+            <p className="text-justify mb-2">
+              By clicking <strong>Accept</strong>, you consent to the use of
+              cookies and agree to the <strong>{meta.appName}</strong> privacy
+              policy. These cookies are used to enhance site navigation, analyze
+              usage patterns, and support our marketing efforts
+            </p>
+            <button
+              className="text-sm font-bold underline underline-offset-2 text-blue-800 dark:text-blue-500"
+              title="Read privacy policy"
+              onClick={goToPolicy}
             >
-              Customize
-            </Button>
-            <Button title="Accept cookies" s={2} i={2} auto onClick={accept}>
-              Accept
-            </Button>
-          </footer>
+              Read Our Privacy Policy
+            </button>
+          </Modal2.Body>
+          <Modal2.Footer>
+            <div className="flex space-x-3 w-full [&_button]:flex-1">
+              <Button
+                s={2}
+                i={2}
+                title="Customize cookies"
+                auto
+                onClick={goToManagement}
+              >
+                Customize
+              </Button>
+              <Button title="Accept cookies" s={2} i={2} auto onClick={accept}>
+                Accept
+              </Button>
+            </div>
+          </Modal2.Footer>
         </>
       )}
 
       {view === ViewType.Manage && (
         <>
-          <Modal.Header title="Manage Consent Preferences" skipX />
-          <div className="space-y-4">
-            {Object.entries(preferences).map(([key, value], index, arr) => (
-              <div
-                key={key}
-                className={c(`pb-4`, {
-                  "border-gray-200 dark:border-gray-700 border-b":
-                    index !== arr.length - 1,
-                })}
-              >
-                <div className="flex justify-between items-center mb-2">
-                  <p className="font-medium capitalize">{key} Cookies</p>
-                  <label className="relative inline-flex items-center cursor-pointer">
-                    <input
-                      type="checkbox"
-                      className="sr-only active:[&+div]:border-white"
-                      checked={value}
-                      onChange={() =>
-                        togglePreferences(key as keyof typeof preferences)
-                      }
-                      disabled={key === COOKIE_TYPE.NECESSARY}
-                    />
-                    <div
-                      className={c(
-                        `w-11 h-6 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out after:content-[""] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all`,
-                        {
-                          "bg-blue-600 dark:bg-blue-500 after:translate-x-5":
-                            value,
-                          "bg-gray-200 dark:bg-gray-500": !value,
-                          "opacity-50 cursor-not-allowed":
-                            key === COOKIE_TYPE.NECESSARY,
-                        },
-                      )}
-                    />
-                  </label>
+          <Modal2.Header title="Manage Consent Preferences" skipX />
+          <Modal2.Body>
+            <div className="space-y-4">
+              {Object.entries(preferences).map(([key, value], index, arr) => (
+                <div
+                  key={key}
+                  className={c(`pb-4`, {
+                    "border-gray-200 dark:border-gray-700 border-b":
+                      index !== arr.length - 1,
+                  })}
+                >
+                  <div className="flex justify-between items-center mb-2">
+                    <p className="font-medium capitalize">{key} Cookies</p>
+                    <label className="relative inline-flex items-center cursor-pointer">
+                      <input
+                        type="checkbox"
+                        className="sr-only active:[&+div]:border-white"
+                        checked={value}
+                        onChange={() =>
+                          togglePreferences(key as keyof typeof preferences)
+                        }
+                        disabled={key === COOKIE_TYPE.NECESSARY}
+                      />
+                      <div
+                        className={c(
+                          `w-11 h-6 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out after:content-[""] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all`,
+                          {
+                            "bg-blue-600 dark:bg-blue-500 after:translate-x-5":
+                              value,
+                            "bg-gray-200 dark:bg-gray-500": !value,
+                            "opacity-50 cursor-not-allowed":
+                              key === COOKIE_TYPE.NECESSARY,
+                          },
+                        )}
+                      />
+                    </label>
+                  </div>
+                  <p className="text-sm">
+                    {key === COOKIE_TYPE.NECESSARY &&
+                      `These cookies are essential for the website to function properly. They cannot be disabled`}
+                    {key === COOKIE_TYPE.PERFORMANCE &&
+                      `These cookies allow us to count visits and traffic sources to measure and improve the performance of our site`}
+                    {key === COOKIE_TYPE.FUNCTIONAL &&
+                      `These cookies enable the website to provide enhanced functionality and personalization`}
+                    {key === COOKIE_TYPE.MARKETING &&
+                      `These cookies may be set through our site by our advertising partners to build a profile of your interests`}
+                  </p>
                 </div>
-                <p className="text-sm">
-                  {key === COOKIE_TYPE.NECESSARY &&
-                    `These cookies are essential for the website to function properly. They cannot be disabled`}
-                  {key === COOKIE_TYPE.PERFORMANCE &&
-                    `These cookies allow us to count visits and traffic sources to measure and improve the performance of our site`}
-                  {key === COOKIE_TYPE.FUNCTIONAL &&
-                    `These cookies enable the website to provide enhanced functionality and personalization`}
-                  {key === COOKIE_TYPE.MARKETING &&
-                    `These cookies may be set through our site by our advertising partners to build a profile of your interests`}
-                </p>
-              </div>
-            ))}
-          </div>
-          <footer className="flex space-x-3 [&_button]:flex-1 mt-8">
+              ))}
+            </div>
+          </Modal2.Body>
+          <Modal2.Footer className="flex space-x-3 w-full">
             <Button
               s={2}
-              i={2}
+              i={1}
               auto
               onClick={goToIntro}
               title="Back to cookies intro"
+              className="flex-1"
             >
               Back
             </Button>
@@ -168,32 +175,35 @@ const CookiesModal = () => {
               auto
               onClick={accept}
               title="Accept customized cookies"
+              className="flex-1"
             >
               Accept
             </Button>
-          </footer>
+          </Modal2.Footer>
         </>
       )}
 
       {view === ViewType.Policy && (
         <>
-          <div className="[&>h1]:pb-3 [&>h2]:pb-1 markdown [&>h1]:text-5xl [&>h2]:text-4xl [&>*]:mb-3">
+          <Modal2.Body>
             <PrivacyPolicyContent />
-          </div>
-          <footer className="flex space-x-3 [&_button]:flex-1 mt-8">
-            <Button
-              s={2}
-              i={2}
-              auto
-              onClick={goToIntro}
-              title="Back to cookies intro"
-            >
-              Back
-            </Button>
-          </footer>
+          </Modal2.Body>
+          <Modal2.Footer>
+            <div className="flex space-x-3 w-full [&_button]:flex-1">
+              <Button
+                s={2}
+                i={2}
+                auto
+                onClick={goToIntro}
+                title="Back to cookies intro"
+              >
+                Back
+              </Button>
+            </div>
+          </Modal2.Footer>
         </>
       )}
-    </Modal>
+    </Modal2>
   );
 };
 
diff --git a/src/components/error-modal.tsx b/src/components/error-modal.tsx
index 8fb3b04ad..f1529fcdb 100644
--- a/src/components/error-modal.tsx
+++ b/src/components/error-modal.tsx
@@ -1,5 +1,5 @@
 import { Button } from "design-system/button";
-import { Modal } from "design-system/modal";
+import { Modal2 } from "design-system/modal2";
 import React, { type ReactNode } from "react";
 
 interface ErrorModalProps {
@@ -11,20 +11,22 @@ interface ErrorModalProps {
 
 const ErrorModal = ({ heading, message, footer, onClose }: ErrorModalProps) => {
   return (
-    <Modal onClose={onClose}>
-      <Modal.Header
+    <Modal2 onClose={onClose}>
+      <Modal2.Header
         className="[&_h6]:text-red-600 [&_h6]:dark:text-red-400"
         title={heading}
         closeButtonTitle="Close error screen"
       />
-      <p className="text-sm mt-2">{message}</p>
-      <footer className="flex justify-end space-x-2 mt-8">
+      <Modal2.Body>
+        <p className="text-sm">{message}</p>
+      </Modal2.Body>
+      <Modal2.Footer className="flex justify-end space-x-2">
         {footer}
         <Button type="button" i={1} s={2} auto title="Close" onClick={onClose}>
           Close
         </Button>
-      </footer>
-    </Modal>
+      </Modal2.Footer>
+    </Modal2>
   );
 };
 
diff --git a/src/components/resource-details.tsx b/src/components/resource-details.tsx
new file mode 100644
index 000000000..31444e7b2
--- /dev/null
+++ b/src/components/resource-details.tsx
@@ -0,0 +1,128 @@
+import {
+  AccessGroupId,
+  ResourceType,
+  ResourceVisibility,
+} from "api-4markdown-contracts";
+import { Button } from "design-system/button";
+import React from "react";
+import { BiPencil } from "react-icons/bi";
+import { VisibilityIcon } from "./visibility-icon";
+import { c } from "design-system/c";
+import { navigate } from "gatsby";
+import { formatDistance } from "date-fns";
+
+type ResourceDetailsProps = {
+  visibility: ResourceVisibility;
+  name: string;
+  type: "Document" | "Mindmap";
+  id: string;
+  previewUrl?: string;
+  staticUrl?: string;
+  tags?: string[];
+  createdAt: string;
+  editedAt: string;
+  description?: string;
+  sharedForGroups?: AccessGroupId[];
+  onAccessEdit: () => void;
+};
+
+const ResourceDetails = ({
+  name,
+  id,
+  tags,
+  visibility,
+  type,
+  previewUrl,
+  staticUrl,
+  createdAt,
+  editedAt,
+  description,
+  sharedForGroups,
+  onAccessEdit,
+}: ResourceDetailsProps) => {
+  return (
+    <>
+      <div className="relative flex flex-col border-zinc-300 dark:border-zinc-800 rounded-lg border-2 p-4">
+        <div>
+          <strong
+            className={c(
+              `capitalize inline-flex items-center gap-1`,
+              visibility === "private"
+                ? "text-gray-600 dark:text-gray-400"
+                : "text-green-700 dark:text-green-600",
+            )}
+          >
+            <VisibilityIcon className="size-6" visibility={visibility} />
+            {visibility}
+          </strong>
+          <h6 className="text-2xl">{name}</h6>
+        </div>
+        {description && <p className="mt-1.5 line-clamp-3">{description}</p>}
+        {tags && tags.length > 0 && (
+          <div className="mt-3 flex flex-wrap gap-2">
+            {tags.map((tag) => (
+              <span
+                key={tag}
+                className="flex text-sm font-medium uppercase w-fit rounded-md bg-slate-200 dark:bg-slate-800 py-1 px-1.5"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="mt-2 flex flex-col gap-1 border-zinc-300 dark:border-zinc-800 rounded-lg border-2 p-4">
+        <p>
+          ID:{` `}
+          <strong>{id}</strong>
+        </p>
+        <p>
+          Created:{` `}
+          <strong>
+            {formatDistance(new Date().toISOString(), createdAt)} ago
+          </strong>
+        </p>
+        <p>
+          Edited:{` `}
+          <strong>
+            {formatDistance(new Date().toISOString(), editedAt)} ago
+          </strong>
+        </p>
+        {visibility === "manual" && (
+          <p>
+            Groups with access:{` `}
+            <strong>{sharedForGroups?.length ?? 0}</strong>
+          </p>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2 mt-4 justify-end">
+        {visibility !== "private" && previewUrl && (
+          <Button
+            auto
+            title={`${type} preview`}
+            s={1}
+            i={2}
+            onClick={() => navigate(previewUrl)}
+          >
+            Preview
+          </Button>
+        )}
+        {visibility === "permanent" && staticUrl && (
+          <Button auto s={1} i={2} onClick={() => navigate(staticUrl)}>
+            URL
+          </Button>
+        )}
+        {visibility === "manual" && (
+          <Button auto s={1} i={2} onClick={onAccessEdit}>
+            <BiPencil />
+            Edit Access
+          </Button>
+        )}
+      </div>
+    </>
+  );
+};
+
+export { ResourceDetails };
diff --git a/src/components/search-popover-content.tsx b/src/components/search-popover-content.tsx
index 977fce250..e1180441b 100644
--- a/src/components/search-popover-content.tsx
+++ b/src/components/search-popover-content.tsx
@@ -1,5 +1,7 @@
 import React from "react";
-import { Modal } from "design-system/modal";
+import { Modal2 } from "design-system/modal2";
+import { Err } from "design-system/err";
+import { BiError } from "react-icons/bi";
 import { Input } from "design-system/input";
 import { navigate } from "gatsby";
 import { searchStaticContentAct } from "acts/search-static-content.act";
@@ -58,41 +60,48 @@ const SearchPopoverContent = ({ onClose }: SearchPopoverContentProps) => {
   }, [search, searchData]);
 
   return (
-    <Modal disabled={searchData.is === `busy`} onClose={onClose}>
-      <Modal.Header title="Find Anything" closeButtonTitle="Close search" />
-
-      <Input
-        placeholder="Search by title, description or URL"
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-      />
-
-      {searchData.is === `ok` && filteredData.length > 0 && (
-        <ul className="mt-4 flex flex-col space-y-3">
-          {filteredData.map((result, index) => (
-            <li
-              key={index}
-              className={`flex flex-col cursor-pointer border-2 rounded-lg px-4 py-3 bg-zinc-200 dark:hover:bg-gray-900 dark:bg-gray-950 hover:bg-zinc-300 border-zinc-300 dark:border-zinc-800`}
-              onClick={() => navigate(result.url)}
-            >
-              <h6>{result.title}</h6>
-              {result.description && (
-                <p className="text-sm text-gray-600 dark:text-gray-300 line-clamp-4 mt-2">
-                  {result.description}
-                </p>
-              )}
-              <p className="text-sm mt-1">{result.url}</p>
-            </li>
-          ))}
-        </ul>
-      )}
-
-      {searchData.is === `fail` && (
-        <p className="text-xl text-red-600 dark:text-red-400 text-center mt-4">
-          Something went wrong, please try again
-        </p>
-      )}
-    </Modal>
+    <Modal2 disabled={searchData.is === `busy`} onClose={onClose}>
+      <Modal2.Header title="Find Anything" closeButtonTitle="Close search" />
+      <Modal2.Body>
+        <Input
+          placeholder="Search by title, description or URL"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+
+        {searchData.is === `ok` && filteredData.length > 0 && (
+          <ul className="mt-4 flex flex-col space-y-3">
+            {filteredData.map((result, index) => (
+              <li
+                key={index}
+                className={`flex flex-col cursor-pointer border-2 rounded-lg px-4 py-3 bg-zinc-200 dark:hover:bg-gray-900 dark:bg-gray-950 hover:bg-zinc-300 border-zinc-300 dark:border-zinc-800`}
+                onClick={() => navigate(result.url)}
+              >
+                <h6>{result.title}</h6>
+                {result.description && (
+                  <p className="text-sm text-gray-600 dark:text-gray-300 line-clamp-4 mt-2">
+                    {result.description}
+                  </p>
+                )}
+                <p className="text-sm mt-1">{result.url}</p>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {searchData.is === `fail` && (
+          <Err className="py-6">
+            <Err.Icon>
+              <BiError size={80} />
+            </Err.Icon>
+            <Err.Title>Something went wrong!</Err.Title>
+            <Err.Description className="mb-0">
+              {searchData.error.message}
+            </Err.Description>
+          </Err>
+        )}
+      </Modal2.Body>
+    </Modal2>
   );
 };
 
diff --git a/src/components/user-popover-content.tsx b/src/components/user-popover-content.tsx
index 8ff99425a..f4b1e7019 100644
--- a/src/components/user-popover-content.tsx
+++ b/src/components/user-popover-content.tsx
@@ -7,7 +7,7 @@ import {
   BiSolidUserDetail,
 } from "react-icons/bi";
 import { useConfirm } from "development-kit/use-confirm";
-import { Modal } from "design-system/modal";
+import { Modal2 } from "design-system/modal2";
 import { UserProfileFormModalContainer } from "containers/user-profile-form-modal.container";
 import { Avatar } from "design-system/avatar";
 import { UserSocials } from "./user-socials";
@@ -19,6 +19,8 @@ import { useYourAccountState } from "store/your-account";
 import { reloadYourAccountAct } from "acts/reload-your-account.act";
 import { navigate } from "gatsby";
 import { meta } from "../../meta";
+import { Err } from "design-system/err";
+import { BiError } from "react-icons/bi";
 
 const UserPopoverContent = ({ onClose }: { onClose(): void }) => {
   const yourUserProfile = useYourUserProfileState();
@@ -58,50 +60,123 @@ const UserPopoverContent = ({ onClose }: { onClose(): void }) => {
     yourUserProfile.is === `busy` || yourAccount.is === `busy`;
 
   return (
-    <Modal disabled={isCloseDisabled} onClose={onClose}>
-      <Modal.Header
+    <Modal2 disabled={isCloseDisabled} onClose={onClose}>
+      <Modal2.Header
         title="Your Account & Profile"
         closeButtonTitle="Close your account panel"
       />
 
-      <div className="flex flex-col gap-3">
-        {(yourUserProfile.is === `idle` || yourUserProfile.is === `busy`) && (
-          <div
-            className="rounded-md bg-gradient-to-r from-gray-300 via-zinc-200 to-gray-200 dark:from-gray-800 dark:via-zinc-800 dark:to-gray-900 animate-gradient-move bg-[length:200%_200%] h-[120px] w-full"
-            data-testid="[user-profile]:profile-loading"
-          />
-        )}
-
-        {yourUserProfile.is === `ok` && (
-          <>
+      <Modal2.Body>
+        <div className="flex flex-col gap-3">
+          {(yourUserProfile.is === `idle` || yourUserProfile.is === `busy`) && (
             <div
-              className="relative flex flex-col border-zinc-300 dark:border-zinc-800 rounded-lg border-2 p-4 overflow-hidden"
-              data-testid="[user-profile]:profile-ready"
-            >
-              <div className="absolute flex flex-col gap-2 top-2 right-2">
-                <Button
-                  i={1}
-                  s={1}
-                  title="Go to access groups management"
-                  onClick={() => navigate(meta.routes.accessGroups.management)}
-                >
-                  <BiArrowToRight />
-                </Button>
+              className="rounded-md bg-gradient-to-r from-gray-300 via-zinc-200 to-gray-200 dark:from-gray-800 dark:via-zinc-800 dark:to-gray-900 animate-gradient-move bg-[length:200%_200%] h-[120px] w-full"
+              data-testid="[user-profile]:profile-loading"
+            />
+          )}
+
+          {yourUserProfile.is === `ok` && (
+            <>
+              <div
+                className="relative flex flex-col border-zinc-300 dark:border-zinc-800 rounded-lg border-2 p-4 overflow-hidden"
+                data-testid="[user-profile]:profile-ready"
+              >
+                <div className="absolute flex flex-col gap-2 top-2 right-2">
+                  <Button
+                    i={1}
+                    s={1}
+                    title="Go to access groups management"
+                    onClick={() =>
+                      navigate(meta.routes.accessGroups.management)
+                    }
+                  >
+                    <BiArrowToRight />
+                  </Button>
+                </div>
+                <h6 className="font-bold">Your Access Groups</h6>
+                <p className="mt-1 mb-1">
+                  Engage your audience and assign them to access groups to share
+                  specific materials.
+                </p>
               </div>
-              <h6 className="font-bold">Your Access Groups</h6>
-              <p className="mt-1 mb-1">
-                Engage your audience and assign them to access groups to share
-                specific materials.
-              </p>
-            </div>
 
-            {yourUserProfile.user?.displayName && yourUserProfile.user?.bio ? (
-              <>
+              {yourUserProfile.user?.displayName &&
+              yourUserProfile.user?.bio ? (
+                <>
+                  <div
+                    className="relative flex items-center flex-col border-zinc-300 dark:border-zinc-800 rounded-lg border-2 p-4 overflow-hidden"
+                    data-testid="[user-profile]:profile-ready"
+                  >
+                    <div className="absolute flex flex-col gap-2 top-2 right-2">
+                      <Button
+                        i={1}
+                        s={1}
+                        title="Open user profile settings"
+                        onClick={userProfileForm.on}
+                      >
+                        <BiPencil />
+                      </Button>
+                      <Button
+                        i={1}
+                        s={1}
+                        title="Sync your profile"
+                        onClick={reloadYourUserProfile}
+                      >
+                        <BiRefresh />
+                      </Button>
+                      {yourUserProfile.user && (
+                        <Button
+                          i={1}
+                          s={1}
+                          title="See your public profile"
+                          onClick={goToUserProfile}
+                        >
+                          <BiSolidUserDetail />
+                        </Button>
+                      )}
+                    </div>
+                    <Avatar
+                      size="lg"
+                      alt="Your avatar"
+                      className="bg-gray-300 dark:bg-slate-800"
+                      char={
+                        yourUserProfile.user.displayName
+                          ? yourUserProfile.user.displayName.charAt(0)
+                          : undefined
+                      }
+                      src={yourUserProfile.user.avatar?.lg.src}
+                    />
+                    <h6 className="mt-2 text-lg font-bold">
+                      {yourUserProfile.user.displayName}
+                    </h6>
+                    <p className="text-center">{yourUserProfile.user.bio}</p>
+                    <div className="mt-4 flex space-x-3">
+                      <UserSocials
+                        githubUrl={yourUserProfile.user.githubUrl}
+                        fbUrl={yourUserProfile.user.fbUrl}
+                        linkedInUrl={yourUserProfile.user.linkedInUrl}
+                        twitterUrl={yourUserProfile.user.twitterUrl}
+                        blogUrl={yourUserProfile.user.blogUrl}
+                        createTitle={(title) => `Your ${title}`}
+                      />
+                    </div>
+                  </div>
+                </>
+              ) : (
                 <div
-                  className="relative flex items-center flex-col border-zinc-300 dark:border-zinc-800 rounded-lg border-2 p-4 overflow-hidden"
-                  data-testid="[user-profile]:profile-ready"
+                  className="border-zinc-300 dark:border-zinc-800 rounded-lg border-2 p-4"
+                  data-testid="[user-profile]:no-profile-yet"
                 >
-                  <div className="absolute flex flex-col gap-2 top-2 right-2">
+                  <h6 className="font-bold">Make Yourself visible</h6>
+                  <p className="mt-1 mb-1">
+                    You have not created a <strong>profile</strong> yet. A
+                    profile is like a business card that allows others to
+                    recognize the documents you have created.
+                  </p>
+                  <i className="block mb-2">
+                    Profile cards may be changed or removed any time.
+                  </i>
+                  <div className="flex gap-2 justify-end translate-y-2 translate-x-2">
                     <Button
                       i={1}
                       s={1}
@@ -129,165 +204,101 @@ const UserPopoverContent = ({ onClose }: { onClose(): void }) => {
                       </Button>
                     )}
                   </div>
-                  <Avatar
-                    size="lg"
-                    alt="Your avatar"
-                    className="bg-gray-300 dark:bg-slate-800"
-                    char={
-                      yourUserProfile.user.displayName
-                        ? yourUserProfile.user.displayName.charAt(0)
-                        : undefined
-                    }
-                    src={yourUserProfile.user.avatar?.lg.src}
-                  />
-                  <h6 className="mt-2 text-lg font-bold">
-                    {yourUserProfile.user.displayName}
-                  </h6>
-                  <p className="text-center">{yourUserProfile.user.bio}</p>
-                  <div className="mt-4 flex space-x-3">
-                    <UserSocials
-                      githubUrl={yourUserProfile.user.githubUrl}
-                      fbUrl={yourUserProfile.user.fbUrl}
-                      linkedInUrl={yourUserProfile.user.linkedInUrl}
-                      twitterUrl={yourUserProfile.user.twitterUrl}
-                      blogUrl={yourUserProfile.user.blogUrl}
-                      createTitle={(title) => `Your ${title}`}
-                    />
-                  </div>
                 </div>
-              </>
-            ) : (
-              <div
-                className="border-zinc-300 dark:border-zinc-800 rounded-lg border-2 p-4"
-                data-testid="[user-profile]:no-profile-yet"
-              >
-                <h6 className="font-bold">Make Yourself visible</h6>
-                <p className="mt-1 mb-1">
-                  You have not created a <strong>profile</strong> yet. A profile
-                  is like a business card that allows others to recognize the
-                  documents you have created.
-                </p>
-                <i className="block mb-2">
-                  Profile cards may be changed or removed any time.
-                </i>
-                <div className="flex gap-2 justify-end translate-y-2 translate-x-2">
-                  <Button
-                    i={1}
-                    s={1}
-                    title="Open user profile settings"
-                    onClick={userProfileForm.on}
-                  >
-                    <BiPencil />
-                  </Button>
-                  <Button
-                    i={1}
-                    s={1}
-                    title="Sync your profile"
-                    onClick={reloadYourUserProfile}
-                  >
-                    <BiRefresh />
-                  </Button>
-                  {yourUserProfile.user && (
-                    <Button
-                      i={1}
-                      s={1}
-                      title="See your public profile"
-                      onClick={goToUserProfile}
-                    >
-                      <BiSolidUserDetail />
-                    </Button>
-                  )}
-                </div>
-              </div>
-            )}
-          </>
-        )}
+              )}
+            </>
+          )}
 
-        {yourUserProfile.is === `fail` && (
-          <div className="rounded-lg border-2 border-zinc-300 dark:border-zinc-800 p-4">
-            <h6 className="text-red-600 dark:text-red-400 font-bold capitalize">
-              Cannot load Your Profile information
-            </h6>
-            <p className="mt-1 mb-4">{yourUserProfile.error.message}</p>
-            <Button
-              i={2}
-              s={1}
-              auto
-              title="Retry your profile load"
-              onClick={reloadYourUserProfile}
-            >
-              Try Again
-            </Button>
-          </div>
-        )}
+          {yourUserProfile.is === `fail` && (
+            <div className="rounded-lg border-2 border-zinc-300 dark:border-zinc-800 p-4">
+              <h6 className="text-red-600 dark:text-red-400 font-bold capitalize">
+                Cannot load Your Profile information
+              </h6>
+              <p className="mt-1 mb-4">{yourUserProfile.error.message}</p>
+              <Button
+                i={2}
+                s={1}
+                auto
+                title="Retry your profile load"
+                onClick={reloadYourUserProfile}
+              >
+                Try Again
+              </Button>
+            </div>
+          )}
 
-        {(yourAccount.is === `idle` || yourAccount.is === `busy`) && (
-          <div
-            className="rounded-md bg-gradient-to-r from-gray-300 via-zinc-200 to-gray-200 dark:from-gray-800 dark:via-zinc-800 dark:to-gray-900 animate-gradient-move bg-[length:200%_200%] h-[120px] w-full"
-            data-testid="[user-profile]:account-loading"
-          />
-        )}
+          {(yourAccount.is === `idle` || yourAccount.is === `busy`) && (
+            <div
+              className="rounded-md bg-gradient-to-r from-gray-300 via-zinc-200 to-gray-200 dark:from-gray-800 dark:via-zinc-800 dark:to-gray-900 animate-gradient-move bg-[length:200%_200%] h-[120px] w-full"
+              data-testid="[user-profile]:account-loading"
+            />
+          )}
 
-        {yourAccount.is === `ok` && (
-          <div className="relative border-zinc-300 dark:border-zinc-800 rounded-lg border-2 p-4">
-            <Button
-              i={1}
-              s={1}
-              className="absolute top-2 right-2"
-              title="Resync your account"
-              onClick={reloadYourAccountAct}
-            >
-              <BiRefresh />
-            </Button>
-            <h6 className="font-bold">Your Account Balance</h6>
-            {yourAccount.balance.tokens > 0 ? (
+          {yourAccount.is === `ok` && (
+            <div className="relative border-zinc-300 dark:border-zinc-800 rounded-lg border-2 p-4">
+              <Button
+                i={1}
+                s={1}
+                className="absolute top-2 right-2"
+                title="Resync your account"
+                onClick={reloadYourAccountAct}
+              >
+                <BiRefresh />
+              </Button>
+              <h6 className="font-bold">Your Account Balance</h6>
+              {yourAccount.balance.tokens > 0 ? (
+                <p className="mt-1">
+                  You&apos;ve still{" "}
+                  <strong>{yourAccount.balance.tokens}</strong>
+                  {` `}
+                  tokens to use.
+                </p>
+              ) : (
+                <p className="mt-1">You have no tokens left.</p>
+              )}
               <p className="mt-1">
-                You&apos;ve still <strong>{yourAccount.balance.tokens}</strong>
-                {` `}
-                tokens to use.
+                <i>
+                  Your tokens are <strong>refilled to 50 every 24 hours</strong>
+                </i>
               </p>
-            ) : (
-              <p className="mt-1">You have no tokens left.</p>
-            )}
-            <p className="mt-1">
-              <i>
-                Your tokens are <strong>refilled to 50 every 24 hours</strong>
-              </i>
-            </p>
-          </div>
-        )}
+            </div>
+          )}
 
-        {yourAccount.is === `fail` && (
-          <div className="rounded-lg border-2 border-zinc-300 dark:border-zinc-800 p-4">
-            <h6 className="text-red-600 dark:text-red-400 font-bold capitalize">
-              Cannot load your account information
-            </h6>
-            <p className="mt-1 mb-4">{yourAccount.error.message}</p>
-            <Button
-              i={2}
-              s={1}
-              auto
-              title="Retry your account load"
-              onClick={reloadYourAccountAct}
-            >
-              Try Again
-            </Button>
-          </div>
-        )}
-      </div>
+          {yourAccount.is === `fail` && (
+            <Err className="py-4">
+              <Err.Icon>
+                <BiError size={80} />
+              </Err.Icon>
+              <Err.Title>Cannot load your account information</Err.Title>
+              <Err.Description>{yourAccount.error.message}</Err.Description>
+              <Err.Action
+                title="Retry your account load"
+                auto
+                s={2}
+                i={2}
+                onClick={reloadYourAccountAct}
+              >
+                Try again
+              </Err.Action>
+            </Err>
+          )}
+        </div>
+      </Modal2.Body>
 
-      <Button
-        className="mt-10 ml-auto"
-        i={2}
-        s={2}
-        title="Sign out"
-        auto
-        disabled={isCloseDisabled}
-        onClick={signOutConfirmation.confirm}
-      >
-        {signOutConfirmation.isOn ? `Are You Sure?` : `Sign Out`}
-      </Button>
-    </Modal>
+      <Modal2.Footer>
+        <Button
+          className="ml-auto"
+          i={2}
+          s={2}
+          title="Sign out"
+          auto
+          disabled={isCloseDisabled}
+          onClick={signOutConfirmation.confirm}
+        >
+          {signOutConfirmation.isOn ? `Are You Sure?` : `Sign Out`}
+        </Button>
+      </Modal2.Footer>
+    </Modal2>
   );
 };
 
diff --git a/src/containers/bug-report.container.tsx b/src/containers/bug-report.container.tsx
index 7c931c328..6f964a623 100644
--- a/src/containers/bug-report.container.tsx
+++ b/src/containers/bug-report.container.tsx
@@ -1,4 +1,4 @@
-import { Modal } from "design-system/modal";
+import { Modal2 } from "design-system/modal2";
 import React, { type FormEventHandler } from "react";
 import { Field } from "design-system/field";
 import { Textarea } from "design-system/textarea";
@@ -7,7 +7,8 @@ import { Hint } from "design-system/hint";
 import { Input } from "design-system/input";
 import { Button } from "design-system/button";
 import { maxLength, minLength } from "development-kit/form";
-import { BiBug } from "react-icons/bi";
+import { BiBug, BiError } from "react-icons/bi";
+import { Err } from "design-system/err";
 import { useSimpleFeature, context } from "@greenonsoftware/react-kit";
 import type { Transaction } from "development-kit/utility-types";
 import { reportBugAct } from "acts/report-bug.act";
@@ -72,80 +73,93 @@ const BugReportModalContainer = () => {
   const busy = operation.is === `busy`;
 
   return (
-    <Modal disabled={busy} onClose={reportBugCtx.off}>
-      <Modal.Header
+    <Modal2 disabled={busy} onClose={reportBugCtx.off}>
+      <Modal2.Header
         title="Report A Bug"
         closeButtonTitle="Close bug reporting"
       />
-      <form className="flex flex-col gap-3" onSubmit={confirmSubmit}>
-        <Field
-          label={`Title*`}
-          hint={
-            <Hint
-              trigger={
-                <>
-                  Required, {limits.title.min}-{limits.title.max} characters
-                </>
-              }
-            />
-          }
-        >
-          <Input
-            placeholder={`I cannot add mindmap, ...etc`}
-            {...inject(`title`)}
-          />
-        </Field>
-        <Field
-          label={`Description*`}
-          hint={
-            <Hint
-              trigger={
-                <>
-                  Required, {limits.description.min}-{limits.description.max}
-                  {` `}
-                  characters
-                </>
-              }
-            />
-          }
+      <Modal2.Body>
+        <form
+          id="bug-report-form"
+          className="flex flex-col gap-3"
+          onSubmit={confirmSubmit}
         >
-          <Textarea
-            placeholder={`When clicking a button application crashes, ...etc`}
-            {...inject(`description`)}
-          />
-        </Field>
-        {operation.is === `fail` && (
-          <p className="rounded-md py-1 px-2 bg-red-500 text-white mt-4">
-            {operation.error.message}
-          </p>
-        )}
-        <footer className="flex space-x-3 mt-6">
-          <Button
-            type="button"
-            i={1}
-            className="flex-1"
-            s={2}
-            disabled={busy}
-            auto
-            title="Cancel bug report"
-            onClick={reportBugCtx.off}
+          <Field
+            label={`Title*`}
+            hint={
+              <Hint
+                trigger={
+                  <>
+                    Required, {limits.title.min}-{limits.title.max} characters
+                  </>
+                }
+              />
+            }
           >
-            Cancel
-          </Button>
-          <Button
-            type="submit"
-            disabled={invalid || untouched || busy}
-            i={2}
-            className="flex-1"
-            s={2}
-            auto
-            title="Submit your bug report"
+            <Input
+              placeholder={`I cannot add mindmap, ...etc`}
+              {...inject(`title`)}
+            />
+          </Field>
+          <Field
+            label={`Description*`}
+            hint={
+              <Hint
+                trigger={
+                  <>
+                    Required, {limits.description.min}-{limits.description.max}
+                    {` `}
+                    characters
+                  </>
+                }
+              />
+            }
           >
-            Submit
-          </Button>
-        </footer>
-      </form>
-    </Modal>
+            <Textarea
+              placeholder={`When clicking a button application crashes, ...etc`}
+              {...inject(`description`)}
+            />
+          </Field>
+          {operation.is === `fail` && (
+            <Err className="py-2">
+              <Err.Icon>
+                <BiError size={80} />
+              </Err.Icon>
+              <Err.Title>Something went wrong</Err.Title>
+              <Err.Description className="mb-0">
+                {operation.error.message}
+              </Err.Description>
+            </Err>
+          )}
+        </form>
+      </Modal2.Body>
+      <Modal2.Footer className="flex gap-3">
+        <Button
+          type="button"
+          i={1}
+          s={2}
+          disabled={busy}
+          auto
+          className="flex-1"
+          title="Cancel bug report"
+          onClick={reportBugCtx.off}
+        >
+          Cancel
+        </Button>
+        <Button
+          type="submit"
+          form="bug-report-form"
+          className="flex-1"
+          disabled={invalid || untouched || busy}
+          i={2}
+          s={2}
+          auto
+          title="Submit your bug report"
+        >
+          Submit
+        </Button>
+      </Modal2.Footer>
+    </Modal2>
   );
 };
 
diff --git a/src/containers/create-document-modal.container.tsx b/src/containers/create-document-modal.container.tsx
index 44019b1d9..dfcaa2f7b 100644
--- a/src/containers/create-document-modal.container.tsx
+++ b/src/containers/create-document-modal.container.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useDocManagementStore } from "store/doc-management/doc-management.store";
-import { Modal } from "design-system/modal";
+import { Modal2 } from "design-system/modal2";
 import { createDocumentAct } from "acts/create-document.act";
 import { startConversationAction } from "store/document-generation/actions";
 import {
@@ -54,77 +54,80 @@ const CreateDocumentModalContainer = ({
     conversations.length >= MAX_AI_GENERATION_COUNT;
 
   return (
-    <Modal disabled={docManagementStore.is === `busy`} onClose={onClose}>
-      <Modal.Header
+    <Modal2 disabled={docManagementStore.is === `busy`} onClose={onClose}>
+      <Modal2.Header
         title="Create Document"
         closeButtonTitle="Close document adding"
       />
 
-      {activeType === `none` && (
-        <>
-          <section className="flex flex-col gap-3">
-            <button
-              className="flex flex-col cursor-pointer hover:bg-zinc-300 dark:hover:bg-gray-900 p-3 rounded-md bg-zinc-200 border dark:bg-gray-950 border-zinc-300 dark:border-zinc-800"
-              onClick={() => setActiveType(`manual`)}
-              title="Go to manual document creation form"
-            >
-              <h6 className="capitalize text-left">Setup Things Manually</h6>
-              <p className="mt-1 text-sm text-left">
-                Adding document by providing its name
-              </p>
-            </button>
-            <button
-              className="disabled:bg-neutral-300/90 disabled:text-black/50 dark:disabled:bg-gray-900/20 dark:disabled:text-white/50 disabled:cursor-not-allowed flex flex-col cursor-pointer enabled:hover:bg-zinc-300 dark:enabled:hover:bg-gray-900 p-3 rounded-md bg-zinc-200 border dark:bg-gray-950 border-zinc-300 dark:border-zinc-800"
-              onClick={() => setActiveType(`ai`)}
-              disabled={isMaxAIGenerationReached || !hasTokens}
-              title="Go to AI generation form"
-            >
-              <h6 className="capitalize text-left">Generate With AI</h6>
-
-              {hasTokens || (
+      <Modal2.Body>
+        {activeType === `none` && (
+          <>
+            <section className="flex flex-col gap-3">
+              <button
+                className="flex flex-col cursor-pointer hover:bg-zinc-300 dark:hover:bg-gray-900 p-3 rounded-md bg-zinc-200 border dark:bg-gray-950 border-zinc-300 dark:border-zinc-800"
+                onClick={() => setActiveType(`manual`)}
+                title="Go to manual document creation form"
+              >
+                <h6 className="capitalize text-left">Setup Things Manually</h6>
                 <p className="mt-1 text-sm text-left">
-                  You don&apos;t have enough tokens to generate document
+                  Adding document by providing its name
                 </p>
-              )}
+              </button>
+              <button
+                className="disabled:bg-neutral-300/90 disabled:text-black/50 dark:disabled:bg-gray-900/20 dark:disabled:text-white/50 disabled:cursor-not-allowed flex flex-col cursor-pointer enabled:hover:bg-zinc-300 dark:enabled:hover:bg-gray-900 p-3 rounded-md bg-zinc-200 border dark:bg-gray-950 border-zinc-300 dark:border-zinc-800"
+                onClick={() => setActiveType(`ai`)}
+                disabled={isMaxAIGenerationReached || !hasTokens}
+                title="Go to AI generation form"
+              >
+                <h6 className="capitalize text-left">Generate With AI</h6>
 
-              {isMaxAIGenerationReached && (
-                <p className="mt-1 text-sm text-left">
-                  You&apos;ve reached the maximum parallel number of AI
-                  generations ({conversations.length}/{MAX_AI_GENERATION_COUNT})
-                </p>
-              )}
+                {hasTokens || (
+                  <p className="mt-1 text-sm text-left">
+                    You don&apos;t have enough tokens to generate document
+                  </p>
+                )}
 
-              {!isMaxAIGenerationReached && hasTokens && (
-                <p className="mt-1 text-sm text-left">
-                  Use AI to generate document. Provide structure, metadata and
-                  voilà!
-                </p>
-              )}
-            </button>
-          </section>
-        </>
-      )}
+                {isMaxAIGenerationReached && (
+                  <p className="mt-1 text-sm text-left">
+                    You&apos;ve reached the maximum parallel number of AI
+                    generations ({conversations.length}/
+                    {MAX_AI_GENERATION_COUNT})
+                  </p>
+                )}
+
+                {!isMaxAIGenerationReached && hasTokens && (
+                  <p className="mt-1 text-sm text-left">
+                    Use AI to generate document. Provide structure, metadata and
+                    voilà!
+                  </p>
+                )}
+              </button>
+            </section>
+          </>
+        )}
 
-      {activeType === `ai` && (
-        <AIPolicyDisclaimer onCancel={() => setActiveType(`none`)}>
+        {activeType === `ai` && (
+          <AIPolicyDisclaimer onCancel={() => setActiveType(`none`)}>
+            <NewDocumentForm
+              variant={activeType}
+              disabled={docManagementStore.is === `busy`}
+              onSubmit={submitAIDocumentCreation}
+              onBack={() => setActiveType(`none`)}
+            />
+          </AIPolicyDisclaimer>
+        )}
+
+        {activeType === `manual` && (
           <NewDocumentForm
             variant={activeType}
             disabled={docManagementStore.is === `busy`}
-            onSubmit={submitAIDocumentCreation}
+            onSubmit={submitManualDocumentCreation}
             onBack={() => setActiveType(`none`)}
           />
-        </AIPolicyDisclaimer>
-      )}
-
-      {activeType === `manual` && (
-        <NewDocumentForm
-          variant={activeType}
-          disabled={docManagementStore.is === `busy`}
-          onSubmit={submitManualDocumentCreation}
-          onBack={() => setActiveType(`none`)}
-        />
-      )}
-    </Modal>
+        )}
+      </Modal2.Body>
+    </Modal2>
   );
 };
 
diff --git a/src/containers/user-profile-form-modal.container.tsx b/src/containers/user-profile-form-modal.container.tsx
index 30ee401d2..d9f9a4d26 100644
--- a/src/containers/user-profile-form-modal.container.tsx
+++ b/src/containers/user-profile-form-modal.container.tsx
@@ -4,7 +4,7 @@ import { Avatar } from "design-system/avatar";
 import { Button } from "design-system/button";
 import { Field } from "design-system/field";
 import { Input } from "design-system/input";
-import { Modal } from "design-system/modal";
+import { Modal2 } from "design-system/modal2";
 import { Status } from "design-system/status";
 import { Textarea } from "design-system/textarea";
 import { readFileAsBase64 } from "development-kit/file-reading";
@@ -131,9 +131,7 @@ const UserProfileFormModalContainer = ({
     onBack();
   };
 
-  const save = async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
-    e.preventDefault();
-
+  const save = async (): Promise<void> => {
     const result = await updateYourUserProfileAct({
       displayName: values.displayName || null,
       bio: values.bio || null,
@@ -187,12 +185,12 @@ const UserProfileFormModalContainer = ({
   return (
     <>
       {updateYourProfileStore.is !== `fail` && avatarErrorModal.isOff && (
-        <Modal disabled={updateYourProfileStore.is === `busy`} onClose={close}>
-          <Modal.Header
+        <Modal2 disabled={updateYourProfileStore.is === `busy`} onClose={close}>
+          <Modal2.Header
             title="Your Profile Edition"
             closeButtonTitle="Close your profile form"
           />
-          <form onSubmit={save} data-testid="[user-profile-form]:container">
+          <Modal2.Body>
             <p className="flex mb-4 gap-2 text-sm justify-center items-center border bg-zinc-200 dark:bg-gray-950 border-zinc-300 dark:border-zinc-800 p-2 rounded-md">
               <BiInfoCircle className="shrink-0" size={20} />
               <span>
@@ -201,10 +199,12 @@ const UserProfileFormModalContainer = ({
                 <strong>Permanent</strong> content you're creating.
               </span>
             </p>
-            <div className="flex flex-col space-y-3 mt-4">
+            <div
+              className="flex flex-col space-y-3 mt-4"
+              data-testid="[user-profile-form]:container"
+            >
               <Field className="items-center mx-auto [&>label]:mb-2">
                 <Button
-                  type="button"
                   rounded
                   title="Add your avatar"
                   className="bg-gray-300 dark:bg-slate-800"
@@ -225,7 +225,6 @@ const UserProfileFormModalContainer = ({
                 </Button>
                 {avatarPreview && (
                   <Button
-                    type="button"
                     auto
                     className="mt-2"
                     s={1}
@@ -293,34 +292,34 @@ const UserProfileFormModalContainer = ({
                 />
               </Field>
             </div>
-
-            <footer className="flex items-center justify-end mt-8 space-x-2">
-              <Button
-                i={1}
-                s={2}
-                auto
-                type="button"
-                title="Back to user profile"
-                disabled={updateYourProfileStore.is === `busy`}
-                onClick={back}
-              >
-                Back
-              </Button>
-              <Button
-                i={2}
-                s={2}
-                auto
-                type="submit"
-                title="Save user profile"
-                disabled={
-                  untouched || invalid || updateYourProfileStore.is === `busy`
-                }
-              >
-                Save
-              </Button>
-            </footer>
-          </form>
-        </Modal>
+          </Modal2.Body>
+          <Modal2.Footer className="flex gap-3">
+            <Button
+              i={1}
+              s={2}
+              auto
+              className="flex-1"
+              title="Back to user profile"
+              disabled={updateYourProfileStore.is === `busy`}
+              onClick={back}
+            >
+              Back
+            </Button>
+            <Button
+              i={2}
+              s={2}
+              auto
+              onClick={save}
+              className="flex-1"
+              title="Save user profile"
+              disabled={
+                untouched || invalid || updateYourProfileStore.is === `busy`
+              }
+            >
+              Save
+            </Button>
+          </Modal2.Footer>
+        </Modal2>
       )}
 
       {updateYourProfileStore.is === `busy` && (
@@ -334,7 +333,6 @@ const UserProfileFormModalContainer = ({
           footer={
             updateYourProfileStore.error.symbol === `out-of-date` && (
               <Button
-                type="button"
                 i={2}
                 s={2}
                 auto
diff --git a/src/design-system/error.tsx b/src/design-system/err.tsx
similarity index 52%
rename from src/design-system/error.tsx
rename to src/design-system/err.tsx
index 3a55f09b4..b086dbf44 100644
--- a/src/design-system/error.tsx
+++ b/src/design-system/err.tsx
@@ -2,13 +2,11 @@ import React from "react";
 import { c } from "./c";
 import { Button } from "./button";
 
-type ErrorProps = React.ComponentPropsWithoutRef<"div">;
-type ErrorIconProps = React.ComponentPropsWithoutRef<"div">;
-type ErrorTitleProps = React.ComponentPropsWithoutRef<"h3">;
-type ErrorDescriptionProps = React.ComponentPropsWithoutRef<"p">;
-type ErrorActionProps = React.ComponentPropsWithoutRef<typeof Button>;
-
-const Error = ({ className, children, ...props }: ErrorProps) => {
+const Err = ({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) => {
   return (
     <div
       className={c(
@@ -26,7 +24,11 @@ const Error = ({ className, children, ...props }: ErrorProps) => {
   );
 };
 
-const ErrorIcon = ({ className, children, ...props }: ErrorIconProps) => {
+const ErrIcon = ({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) => {
   return (
     <div
       className={c(`mb-6 text-red-400 dark:text-red-500`, className)}
@@ -38,7 +40,11 @@ const ErrorIcon = ({ className, children, ...props }: ErrorIconProps) => {
   );
 };
 
-const ErrorTitle = ({ className, children, ...props }: ErrorTitleProps) => {
+const ErrTitle = ({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<"h3">) => {
   return (
     <h3
       className={c(
@@ -52,11 +58,11 @@ const ErrorTitle = ({ className, children, ...props }: ErrorTitleProps) => {
   );
 };
 
-const ErrorDescription = ({
+const ErrDescription = ({
   className,
   children,
   ...props
-}: ErrorDescriptionProps) => {
+}: React.ComponentPropsWithoutRef<"p">) => {
   return (
     <p
       className={c(`text-sm text-gray-500 dark:text-gray-400 mb-6`, className)}
@@ -67,18 +73,11 @@ const ErrorDescription = ({
   );
 };
 
-const ErrorAction = Button;
+const ErrAction = Button;
 
-Error.Icon = ErrorIcon;
-Error.Title = ErrorTitle;
-Error.Description = ErrorDescription;
-Error.Action = ErrorAction;
+Err.Icon = ErrIcon;
+Err.Title = ErrTitle;
+Err.Description = ErrDescription;
+Err.Action = ErrAction;
 
-export type {
-  ErrorProps,
-  ErrorIconProps,
-  ErrorTitleProps,
-  ErrorDescriptionProps,
-  ErrorActionProps,
-};
-export { Error };
+export { Err };
diff --git a/src/design-system/hint.tsx b/src/design-system/hint.tsx
index 0bfc7cda4..8fff0813b 100644
--- a/src/design-system/hint.tsx
+++ b/src/design-system/hint.tsx
@@ -1,5 +1,4 @@
 import React, { type ReactNode, type ComponentType } from "react";
-import { Modal } from "./modal";
 import c from "classnames";
 import { useSimpleFeature } from "@greenonsoftware/react-kit";
 
@@ -7,24 +6,16 @@ type SimpleFeature = ReturnType<typeof useSimpleFeature>;
 
 interface HintProps {
   className?: string;
-  content?: ComponentType<SimpleFeature>;
   trigger: ComponentType<SimpleFeature> | ReactNode;
 }
 
-const Hint = ({ className, trigger: Trigger, content: Content }: HintProps) => {
+const Hint = ({ className, trigger: Trigger }: HintProps) => {
   const toggler = useSimpleFeature();
 
   return (
-    <>
-      <i className={c(`text-sm`, className)}>
-        {typeof Trigger === `function` ? <Trigger {...toggler} /> : Trigger}
-      </i>
-      {toggler.isOn && Content && (
-        <Modal onClose={toggler.off}>
-          <Content {...toggler} />
-        </Modal>
-      )}
-    </>
+    <i className={c(`text-sm`, className)}>
+      {typeof Trigger === `function` ? <Trigger {...toggler} /> : Trigger}
+    </i>
   );
 };
 
diff --git a/src/design-system/modal.tsx b/src/design-system/modal.tsx
deleted file mode 100644
index 49c591a09..000000000
--- a/src/design-system/modal.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import React, {
-  type ReactNode,
-  type HTMLAttributes,
-  type DetailedHTMLProps,
-} from "react";
-import { usePortal } from "development-kit/use-portal";
-import c from "classnames";
-import { useScrollHide } from "development-kit/use-scroll-hide";
-import { useKeyPress } from "development-kit/use-key-press";
-import { Button } from "./button";
-import { BiX } from "react-icons/bi";
-import { context } from "@greenonsoftware/react-kit";
-
-type ModalProps = {
-  children: ReactNode;
-  disabled?: boolean;
-  onClose?(): void;
-} & Omit<
-  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
-  "children"
->;
-
-const [ModalProvider, useModalContext] = context(
-  (props: { disabled?: boolean; close(): void }) => props,
-);
-
-const Modal = ({
-  className,
-  children,
-  disabled,
-  onClose,
-  ...props
-}: ModalProps) => {
-  const ref = React.useRef<HTMLDivElement | null>(null);
-
-  const close = (): void => {
-    if (disabled) return;
-
-    onClose?.();
-  };
-
-  useScrollHide();
-  useKeyPress([`Escape`], close);
-
-  const { render } = usePortal();
-
-  React.useEffect(() => {
-    ref.current?.focus();
-  }, []);
-
-  return render(
-    <div
-      ref={ref}
-      tabIndex={-1}
-      aria-modal
-      role="dialog"
-      className={c(
-        `bg-black/40 dark:bg-white/20 fixed items-center justify-center flex py-4 z-20 bottom-0 right-0 left-0 top-0 overflow-auto animate-fade-in`,
-        className,
-      )}
-      {...props}
-    >
-      <div className="bg-white m-auto w-[100%] tn:max-w-sm dark:bg-black rounded-lg shadow-xl p-4">
-        <ModalProvider disabled={disabled} close={close}>
-          {children}
-        </ModalProvider>
-      </div>
-    </div>,
-  );
-};
-
-const ModalHeader = ({
-  title,
-  closeButtonTitle,
-  children,
-  className,
-  skipX,
-}: {
-  className?: string;
-  children?: ReactNode;
-  title: ReactNode;
-  closeButtonTitle?: string;
-  skipX?: boolean;
-}) => {
-  const { close, disabled } = useModalContext();
-
-  return (
-    <header className={c(`flex items-center justify-between mb-6`, className)}>
-      <h6 className="text-xl mr-8">{title}</h6>
-      <div className="flex items-center space-x-2">
-        {children}
-        {skipX || (
-          <Button
-            i={2}
-            s={1}
-            aria-disabled={disabled}
-            disabled={disabled}
-            title={closeButtonTitle}
-            className="ml-auto"
-            onClick={close}
-          >
-            <BiX />
-          </Button>
-        )}
-      </div>
-    </header>
-  );
-};
-
-Modal.Header = ModalHeader;
-
-export { Modal };
diff --git a/src/features/access-groups-management/containers/groups-list.container.tsx b/src/features/access-groups-management/containers/groups-list.container.tsx
index a32bd1bad..77b2e36f4 100644
--- a/src/features/access-groups-management/containers/groups-list.container.tsx
+++ b/src/features/access-groups-management/containers/groups-list.container.tsx
@@ -23,7 +23,7 @@ import { formatDistance } from "date-fns";
 import { GroupsSkeletonLoader } from "../components/groups-skeleton-loader";
 import { MAX_ACCESS_GROUP_MEMBERS } from "../config/constraints";
 import { Empty } from "design-system/empty";
-import { Error as ErrorComponent } from "design-system/error";
+import { Err } from "design-system/err";
 import { useFeature } from "@greenonsoftware/react-kit";
 import { AccessGroupDto, ParsedError } from "api-4markdown-contracts";
 import { Modal2 } from "design-system/modal2";
@@ -69,13 +69,13 @@ const Content = () => {
 
   if (error) {
     return (
-      <ErrorComponent>
-        <ErrorComponent.Icon>
+      <Err>
+        <Err.Icon>
           <BiError size={80} />
-        </ErrorComponent.Icon>
-        <ErrorComponent.Title>Something went wrong!</ErrorComponent.Title>
-        <ErrorComponent.Description>{error.message}</ErrorComponent.Description>
-        <ErrorComponent.Action
+        </Err.Icon>
+        <Err.Title>Something went wrong!</Err.Title>
+        <Err.Description>{error.message}</Err.Description>
+        <Err.Action
           title="Retry loading access groups"
           auto
           s={2}
@@ -83,8 +83,8 @@ const Content = () => {
           onClick={getYourAccessGroupsAct}
         >
           Try Again
-        </ErrorComponent.Action>
-      </ErrorComponent>
+        </Err.Action>
+      </Err>
     );
   }
 
@@ -114,15 +114,13 @@ const Content = () => {
             closeButtonTitle="Close error screen"
           />
           <Modal2.Body>
-            <ErrorComponent>
-              <ErrorComponent.Icon>
+            <Err>
+              <Err.Icon>
                 <BiError size={80} />
-              </ErrorComponent.Icon>
-              <ErrorComponent.Title>Something went wrong!</ErrorComponent.Title>
-              <ErrorComponent.Description>
-                {errorModal.data.message}
-              </ErrorComponent.Description>
-            </ErrorComponent>
+              </Err.Icon>
+              <Err.Title>Something went wrong!</Err.Title>
+              <Err.Description>{errorModal.data.message}</Err.Description>
+            </Err>
           </Modal2.Body>
           <Modal2.Footer className="flex justify-end gap-2">
             <Button i={1} s={2} auto title="Close" onClick={errorModal.off}>
@@ -148,11 +146,12 @@ const Content = () => {
               access group.
             </p>
           </Modal2.Body>
-          <Modal2.Footer className="flex justify-end gap-2">
+          <Modal2.Footer className="flex gap-3">
             <Button
               i={1}
               s={2}
               auto
+              className="flex-1"
               title="Cancel delete access group"
               onClick={groupToDeleteConfirm.off}
             >
@@ -161,6 +160,7 @@ const Content = () => {
             <Button
               i={2}
               s={2}
+              className="flex-1"
               auto
               title="Confirm delete access group"
               onClick={() => removeGroupMutation.start()}
diff --git a/src/features/access-groups-management/containers/members-management.container.tsx b/src/features/access-groups-management/containers/members-management.container.tsx
index 905a3e9e3..0be8fe869 100644
--- a/src/features/access-groups-management/containers/members-management.container.tsx
+++ b/src/features/access-groups-management/containers/members-management.container.tsx
@@ -11,7 +11,7 @@ import { MAX_ACCESS_GROUP_MEMBERS } from "../config/constraints";
 import { SelectedUsersSkeletonLoader } from "../components/selected-users-skeleton-loader";
 import { useQuery } from "core/use-query";
 import { getAccessGroupAct } from "../acts/get-access-group.act";
-import { Error as ErrorComponent } from "design-system/error";
+import { Err } from "design-system/err";
 import { useTypeaheadQuery } from "core/use-typeahead-query";
 import { findUserProfilesAct } from "../acts/find-user-profiles.act";
 import {
@@ -205,14 +205,12 @@ const MembersManagementContainer = () => {
             closeButtonTitle="Close error screen"
           />
           <Modal2.Body>
-            <ErrorComponent className="py-4">
-              <ErrorComponent.Icon>
+            <Err className="py-4">
+              <Err.Icon>
                 <BiError size={80} />
-              </ErrorComponent.Icon>
-              <ErrorComponent.Title>
-                Ups! Something went wrong
-              </ErrorComponent.Title>
-              <ErrorComponent.Description
+              </Err.Icon>
+              <Err.Title>Ups! Something went wrong</Err.Title>
+              <Err.Description
                 className={
                   errorModal.data.symbol === "out-of-date" ? "mt-0" : ""
                 }
@@ -226,9 +224,9 @@ const MembersManagementContainer = () => {
                 ) : (
                   <>{errorModal.data.message}</>
                 )}
-              </ErrorComponent.Description>
+              </Err.Description>
               {errorModal.data.symbol === "out-of-date" && (
-                <ErrorComponent.Action
+                <Err.Action
                   title="Reload Group Data"
                   auto
                   s={2}
@@ -239,9 +237,9 @@ const MembersManagementContainer = () => {
                   }}
                 >
                   Reload Group Data
-                </ErrorComponent.Action>
+                </Err.Action>
               )}
-            </ErrorComponent>
+            </Err>
           </Modal2.Body>
           <Modal2.Footer className="flex justify-end gap-2">
             <Button i={1} s={2} auto title="Close" onClick={errorModal.off}>
@@ -270,11 +268,12 @@ const MembersManagementContainer = () => {
               You can add this user back later.
             </p>
           </Modal2.Body>
-          <Modal2.Footer className="flex justify-end gap-2">
+          <Modal2.Footer className="flex gap-3">
             <Button
               i={1}
               s={2}
               auto
+              className="flex-1"
               title="Cancel revoke access"
               onClick={revokeAccessConfirm.off}
             >
@@ -284,6 +283,7 @@ const MembersManagementContainer = () => {
               i={2}
               s={2}
               auto
+              className="flex-1"
               title="Confirm revoke access"
               onClick={() => removeAccessMutation.start()}
             >
@@ -401,17 +401,15 @@ const MembersManagementContainer = () => {
               )}
               {typeaheadQuery.is === "fail" && (
                 <li>
-                  <ErrorComponent className="py-4">
-                    <ErrorComponent.Icon>
+                  <Err className="py-4">
+                    <Err.Icon>
                       <BiError size={80} />
-                    </ErrorComponent.Icon>
-                    <ErrorComponent.Title>
-                      Something went wrong!
-                    </ErrorComponent.Title>
-                    <ErrorComponent.Description className="mb-0">
+                    </Err.Icon>
+                    <Err.Title>Something went wrong!</Err.Title>
+                    <Err.Description className="mb-0">
                       {typeaheadQuery.error.message}
-                    </ErrorComponent.Description>
-                  </ErrorComponent>
+                    </Err.Description>
+                  </Err>
                 </li>
               )}
             </Search.List>
@@ -423,15 +421,13 @@ const MembersManagementContainer = () => {
             <SelectedUsersSkeletonLoader />
           )}
           {groupQuery.is === "fail" && (
-            <ErrorComponent>
-              <ErrorComponent.Icon>
+            <Err>
+              <Err.Icon>
                 <BiError size={80} />
-              </ErrorComponent.Icon>
-              <ErrorComponent.Title>Something went wrong!</ErrorComponent.Title>
-              <ErrorComponent.Description>
-                {groupQuery.error.message}
-              </ErrorComponent.Description>
-              <ErrorComponent.Action
+              </Err.Icon>
+              <Err.Title>Something went wrong!</Err.Title>
+              <Err.Description>{groupQuery.error.message}</Err.Description>
+              <Err.Action
                 title="Retry loading access groups"
                 auto
                 s={2}
@@ -439,8 +435,8 @@ const MembersManagementContainer = () => {
                 onClick={() => groupQuery.start()}
               >
                 Try Again
-              </ErrorComponent.Action>
-            </ErrorComponent>
+              </Err.Action>
+            </Err>
           )}
           {groupQuery.is === "ok" && (
             <>
diff --git a/src/actions/update-document-visibility.action.ts b/src/features/creator/acts/update-document-visibility.act.ts
similarity index 74%
rename from src/actions/update-document-visibility.action.ts
rename to src/features/creator/acts/update-document-visibility.act.ts
index 8636c1da1..2d177255b 100644
--- a/src/actions/update-document-visibility.action.ts
+++ b/src/features/creator/acts/update-document-visibility.act.ts
@@ -1,10 +1,13 @@
-import { getAPI, setCache } from "api-4markdown";
+import { getAPI, parseError, setCache } from "api-4markdown";
 import type {
+  AccessGroupId,
   API4MarkdownDto,
+  ManualDocumentDto,
   PermanentDocumentDto,
   PrivateDocumentDto,
   PublicDocumentDto,
 } from "api-4markdown-contracts";
+import { AsyncResult } from "development-kit/utility-types";
 import { docManagementStoreActions } from "store/doc-management/doc-management.store";
 import { docStoreActions, docStoreSelectors } from "store/doc/doc.store";
 import { docsStoreActions, docsStoreSelectors } from "store/docs/docs.store";
@@ -17,10 +20,13 @@ type PermanentPayload = Pick<
   PermanentDocumentDto,
   "description" | "name" | "tags" | "visibility"
 >;
+type ManualPayload = Pick<ManualDocumentDto, "visibility"> & {
+  sharedForGroups: AccessGroupId[];
+};
 
-const updateDocumentVisibility = async (
-  payload: PrivatePayload | PublicPayload | PermanentPayload,
-): Promise<void> => {
+const updateDocumentVisibilityAct = async (
+  payload: PrivatePayload | PublicPayload | PermanentPayload | ManualPayload,
+): AsyncResult => {
   try {
     const { code } = useDocumentCreatorState.get();
     const { id, mdate } = docStoreSelectors.active();
@@ -31,6 +37,7 @@ const updateDocumentVisibility = async (
       mdate,
       ...payload,
     });
+
     const updatedDocument: API4MarkdownDto<`getYourDocuments`>[number] = {
       ...response,
       code,
@@ -41,10 +48,12 @@ const updateDocumentVisibility = async (
     docsStoreActions.updateDoc(updatedDocument);
 
     setCache(`getYourDocuments`, docsStoreSelectors.ok().docs);
+
+    return { is: `ok` };
   } catch (error: unknown) {
     docManagementStoreActions.fail(error);
-    throw error;
+    return { is: `fail`, error: parseError(error) };
   }
 };
 
-export { updateDocumentVisibility };
+export { updateDocumentVisibilityAct };
diff --git a/src/features/creator/components/cheatsheet-modal.tsx b/src/features/creator/components/cheatsheet-modal.tsx
index 26d21e6ad..41dc301d1 100644
--- a/src/features/creator/components/cheatsheet-modal.tsx
+++ b/src/features/creator/components/cheatsheet-modal.tsx
@@ -1,53 +1,43 @@
 import React from "react";
-import { Modal } from "design-system/modal";
-import type { Transaction } from "development-kit/utility-types";
-import { parseError } from "api-4markdown";
+import { Modal2 } from "design-system/modal2";
 import { Loader } from "design-system/loader";
 import { Markdown } from "components/markdown";
+import { useQuery } from "core/use-query";
 
 type CheatSheetModalProps = {
   onClose(): void;
 };
 
 const CheatSheetModal = ({ onClose }: CheatSheetModalProps) => {
-  const [cheatsheet, setCheatsheet] = React.useState<
-    Transaction<{ content: string }>
-  >({ is: `idle` });
-
-  React.useEffect(() => {
-    setCheatsheet({ is: `busy` });
-
-    fetch(`/intro.md`)
-      .then((response) => response.text())
-      .then((content) => {
-        setCheatsheet({ is: `ok`, content });
-      })
-      .catch((err) => {
-        setCheatsheet({ is: `fail`, error: parseError(err) });
-      });
-  }, []);
+  const cheatsheet = useQuery<string>({
+    handler: async (signal) => {
+      const response = await fetch(`/intro.md`, { signal });
+      return response.text();
+    },
+  });
 
   return (
-    <Modal
+    <Modal2
       data-testid="[cheatsheet-modal]:container"
       className="[&>*]:w-[100%] [&>*]:max-w-prose"
       onClose={onClose}
     >
-      <Modal.Header
+      <Modal2.Header
         title="Markdown Cheatsheet"
         closeButtonTitle="Close markdown cheatsheet"
       />
-
-      {(cheatsheet.is === `idle` || cheatsheet.is === `busy`) && (
-        <Loader className="my-6 mx-auto" size="xl" />
-      )}
-      {cheatsheet.is === `ok` && <Markdown>{cheatsheet.content}</Markdown>}
-      {cheatsheet.is === `fail` && (
-        <p className="text-xl text-red-600 dark:text-red-400 text-center mb-4">
-          Something went wrong... Close and try again
-        </p>
-      )}
-    </Modal>
+      <Modal2.Body>
+        {(cheatsheet.is === `idle` || cheatsheet.is === `busy`) && (
+          <Loader className="my-6 mx-auto" size="xl" />
+        )}
+        {cheatsheet.is === `ok` && <Markdown>{cheatsheet.data}</Markdown>}
+        {cheatsheet.is === `fail` && (
+          <p className="text-xl text-red-600 dark:text-red-400 text-center mb-4">
+            Something went wrong... Close and try again
+          </p>
+        )}
+      </Modal2.Body>
+    </Modal2>
   );
 };
 
diff --git a/src/features/creator/containers/document-details.container.tsx b/src/features/creator/containers/document-details.container.tsx
index 892fa8ab1..b27c67cb0 100644
--- a/src/features/creator/containers/document-details.container.tsx
+++ b/src/features/creator/containers/document-details.container.tsx
@@ -3,9 +3,6 @@ import React from "react";
 import { BiPencil, BiTrash } from "react-icons/bi";
 import { useDocManagementStore } from "store/doc-management/doc-management.store";
 import { docStoreSelectors } from "store/doc/doc.store";
-import c from "classnames";
-import { formatDistance } from "date-fns";
-import { navigate } from "gatsby";
 import { PublicConfirmationContainer } from "features/creator/containers/public-confirmation.container";
 import { PrivateConfirmationContainer } from "features/creator/containers/private-confirmation.container";
 import { PermanentConfirmationContainer } from "features/creator/containers/permanent-confirmation.container";
@@ -14,7 +11,8 @@ import { PermamentDocFormContainer } from "./permament-doc-form.container";
 import { meta } from "../../../../meta";
 import { useSimpleFeature } from "@greenonsoftware/react-kit";
 import { ResourceVisibilityTabs } from "components/resource-visibility-tabs";
-import { VisibilityIcon } from "components/visibility-icon";
+import { updateDocumentVisibilityAct } from "../acts/update-document-visibility.act";
+import { ResourceDetails } from "components/resource-details";
 
 const AccessGroupsAssignModule = React.lazy(() =>
   import("modules/access-groups-assign").then((m) => ({
@@ -79,10 +77,15 @@ const DocumentDetailsContainer = ({
             disabled={disabled}
             onBack={manualConfirmation.off}
             onClose={onClose}
-            onConfirm={() => {
-              alert(
-                "Currently this feature is off ;/. We're working to make it back.",
-              );
+            onConfirm={async (sharedForGroups) => {
+              const result = await updateDocumentVisibilityAct({
+                visibility: "manual",
+                sharedForGroups,
+              });
+
+              if (result.is === "ok") {
+                manualConfirmation.off();
+              }
             }}
           />
         </React.Suspense>
@@ -120,77 +123,22 @@ const DocumentDetailsContainer = ({
               )}
             </Modal2.Header>
             <Modal2.Body>
-              <p>
-                Name: <strong>{docStore.name}</strong>
-              </p>
-              {docStore.visibility === `permanent` && (
-                <>
-                  <p className="mt-1">
-                    Description:{` `}
-                    <strong className="break-words">
-                      {docStore.description}
-                    </strong>
-                  </p>
-                  <p className="mt-1">
-                    Tags:{` `}
-                    <strong className="break-words">
-                      {docStore.tags.join(`, `)}
-                    </strong>
-                  </p>
-                </>
-              )}
-              <div className="flex items-center gap-1.5 mt-1">
-                <span>Visibility:</span>
-                <strong
-                  className={c(
-                    `capitalize inline-flex items-center gap-1`,
-                    docStore.visibility === "private"
-                      ? "text-gray-600 dark:text-gray-400"
-                      : "text-green-700 dark:text-green-600",
-                  )}
-                >
-                  <VisibilityIcon
-                    className="size-6"
-                    visibility={docStore.visibility}
-                  />
-                  {docStore.visibility}
-                </strong>
-              </div>
-              <p className="mt-1">
-                Created:{` `}
-                <strong>
-                  {formatDistance(new Date().toISOString(), docStore.cdate)} ago
-                </strong>
-              </p>
-              <p className="mt-1">
-                Edited:{` `}
-                <strong>
-                  {formatDistance(new Date().toISOString(), docStore.mdate)} ago
-                </strong>
-              </p>
-              {(docStore.visibility === `public` ||
-                docStore.visibility === `permanent`) && (
-                <button
-                  className="underline underline-offset-2 text-blue-800 dark:text-blue-500 mt-1"
-                  title="Document preview"
-                  onClick={() =>
-                    navigate(
-                      `${meta.routes.documents.preview}?id=${docStore.id}`,
-                    )
-                  }
-                >
-                  <strong>Preview</strong>
-                </button>
-              )}
-              {docStore.visibility === `permanent` && (
-                <button
-                  className="underline underline-offset-2 text-blue-800 dark:text-blue-500 ml-3"
-                  title="Document URL"
-                  onClick={() => navigate(docStore.path)}
-                >
-                  <strong>URL</strong>
-                </button>
-              )}
+              <ResourceDetails
+                type="Document"
+                sharedForGroups={docStore.sharedForGroups}
+                createdAt={docStore.cdate}
+                editedAt={docStore.mdate}
+                previewUrl={`${meta.routes.documents.preview}?id=${docStore.id}`}
+                staticUrl={docStore.path}
+                name={docStore.name}
+                id={docStore.id}
+                tags={"tags" in docStore ? docStore.tags : undefined}
+                visibility={docStore.visibility}
+                description={
+                  "description" in docStore ? docStore.description : undefined
+                }
+                onAccessEdit={manualConfirmation.on}
+              />
             </Modal2.Body>
             <Modal2.Footer className="overflow-x-auto">
               <ResourceVisibilityTabs
diff --git a/src/features/creator/containers/document-generations.container.tsx b/src/features/creator/containers/document-generations.container.tsx
index c66ed780d..f3123c319 100644
--- a/src/features/creator/containers/document-generations.container.tsx
+++ b/src/features/creator/containers/document-generations.container.tsx
@@ -48,7 +48,7 @@ import { previewGenerationInDocumentsCreatorAct } from "acts/preview-generation-
 import { useDocManagementStore } from "store/doc-management/doc-management.store";
 import { saveGenerationAsDocumentAct } from "acts/save-generation-as-document.act";
 import { useSimpleFeature } from "@greenonsoftware/react-kit";
-import { Modal } from "design-system/modal";
+import { Modal2 } from "design-system/modal2";
 import {
   NewDocumentForm,
   type NewDocumentFormProps,
@@ -398,30 +398,32 @@ const ConversationListItemContainer = ({
         )}
       </li>
       {editForm.isOn && (
-        <Modal onClose={editForm.off}>
-          <Modal.Header
+        <Modal2 onClose={editForm.off}>
+          <Modal2.Header
             title="Modify Generation Parameters"
             closeButtonTitle="Close modify generation parameters (esc)"
           />
-          <NewDocumentForm
-            variant="ai"
-            onBack={editForm.off}
-            initialValues={lastUserHistoryRecordPayload}
-            onSubmit={confirmModifyGenerationModify}
-            renderFooter={(props, { untouched, invalid }) => (
-              <Button
-                type="submit"
-                i={2}
-                s={2}
-                auto
-                title="Save generation parameters"
-                disabled={props.disabled || untouched || invalid}
-              >
-                Save
-              </Button>
-            )}
-          />
-        </Modal>
+          <Modal2.Body>
+            <NewDocumentForm
+              variant="ai"
+              onBack={editForm.off}
+              initialValues={lastUserHistoryRecordPayload}
+              onSubmit={confirmModifyGenerationModify}
+              renderFooter={(props, { untouched, invalid }) => (
+                <Button
+                  type="submit"
+                  i={2}
+                  s={2}
+                  auto
+                  title="Save generation parameters"
+                  disabled={props.disabled || untouched || invalid}
+                >
+                  Save
+                </Button>
+              )}
+            />
+          </Modal2.Body>
+        </Modal2>
       )}
     </>
   );
diff --git a/src/features/creator/containers/image-uploader-auth.container.tsx b/src/features/creator/containers/image-uploader-auth.container.tsx
index 48252be40..2e7a3070b 100644
--- a/src/features/creator/containers/image-uploader-auth.container.tsx
+++ b/src/features/creator/containers/image-uploader-auth.container.tsx
@@ -1,5 +1,5 @@
 import { Button } from "design-system/button";
-import { Modal } from "design-system/modal";
+import { Modal2 } from "design-system/modal2";
 import { useFileInput } from "development-kit/use-file-input";
 import React from "react";
 import ErrorModal from "components/error-modal";
@@ -89,26 +89,30 @@ const ImageUploaderAuthContainer = () => {
       {uploadImageStatus.is === `busy` && <Status>Uploading image...</Status>}
 
       {uploadImageStatus.is === `ok` && (
-        <Modal onClose={close}>
-          <Modal.Header
+        <Modal2 onClose={close}>
+          <Modal2.Header
             title="Image uploaded ✅"
             closeButtonTitle="Close image upload"
           />
-          <p>
-            To use <strong>uploaded image</strong> in markdown editor click
-            below button.
-          </p>
-          <Button
-            title="Copy image link"
-            className="capitalize mt-8 ml-auto"
-            auto
-            s={2}
-            i={2}
-            onClick={copyAndClose}
-          >
-            Copy Link
-          </Button>
-        </Modal>
+          <Modal2.Body>
+            <p>
+              To use <strong>uploaded image</strong> in markdown editor click
+              below button.
+            </p>
+          </Modal2.Body>
+          <Modal2.Footer>
+            <Button
+              title="Copy image link"
+              className="capitalize ml-auto"
+              auto
+              s={2}
+              i={2}
+              onClick={copyAndClose}
+            >
+              Copy Link
+            </Button>
+          </Modal2.Footer>
+        </Modal2>
       )}
 
       {uploadImageStatus.is === `fail` && (
diff --git a/src/features/creator/containers/permament-doc-form.container.tsx b/src/features/creator/containers/permament-doc-form.container.tsx
index 1cc8c455e..70354e152 100644
--- a/src/features/creator/containers/permament-doc-form.container.tsx
+++ b/src/features/creator/containers/permament-doc-form.container.tsx
@@ -7,11 +7,11 @@ import { useForm } from "development-kit/use-form";
 import React from "react";
 import { useDocManagementStore } from "store/doc-management/doc-management.store";
 import { docStoreSelectors } from "store/doc/doc.store";
-import { updateDocumentVisibility } from "actions/update-document-visibility.action";
 import { BiInfoCircle } from "react-icons/bi";
 import { Markdown } from "components/markdown";
 import { ValidatorFn, ValidatorsSetup } from "development-kit/form";
 import { useSimpleFeature } from "@greenonsoftware/react-kit";
+import { updateDocumentVisibilityAct } from "../acts/update-document-visibility.act";
 
 type PermamentDocFormContainerProps = {
   onConfirm(): void;
@@ -182,15 +182,15 @@ const PermamentDocFormContainer = ({
   const disabled = docManagementStore.is === `busy`;
 
   const handleConfirm = async (): Promise<void> => {
-    try {
-      await updateDocumentVisibility({
-        name,
-        description,
-        tags: tags.split(`,`),
-        visibility: `permanent`,
-      });
+    const result = await updateDocumentVisibilityAct({
+      name,
+      description,
+      tags: tags.split(`,`),
+      visibility: `permanent`,
+    });
+    if (result.is === "ok") {
       onConfirm();
-    } catch {}
+    }
   };
 
   const splittedTags = React.useMemo(
@@ -205,7 +205,7 @@ const PermamentDocFormContainer = ({
   return (
     <>
       <Modal2.Header
-        title="Add Required Data"
+        title="Make It Permanent"
         closeButtonTitle="Close document permanent status change"
       />
       <Modal2.Body>
diff --git a/src/features/creator/containers/private-confirmation.container.tsx b/src/features/creator/containers/private-confirmation.container.tsx
index f367e14ff..ae690c166 100644
--- a/src/features/creator/containers/private-confirmation.container.tsx
+++ b/src/features/creator/containers/private-confirmation.container.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Button } from "design-system/button";
 import { Modal2 } from "design-system/modal2";
 import { useDocManagementStore } from "store/doc-management/doc-management.store";
-import { updateDocumentVisibility } from "actions/update-document-visibility.action";
+import { updateDocumentVisibilityAct } from "../acts/update-document-visibility.act";
 
 interface PrivateConfirmationContainerProps {
   onCancel(): void;
@@ -18,16 +18,16 @@ const PrivateConfirmationContainer = ({
   const disabled = docManagementStore.is === `busy`;
 
   const handleConfirm = async (): Promise<void> => {
-    try {
-      await updateDocumentVisibility({ visibility: `private` });
+    const result = await updateDocumentVisibilityAct({ visibility: `private` });
+    if (result.is === "ok") {
       onConfirm();
-    } catch {}
+    }
   };
 
   return (
     <>
       <Modal2.Header
-        title="Make it private"
+        title="Make It Private"
         closeButtonTitle="Close private document confirmation"
       />
       <Modal2.Body>
diff --git a/src/features/creator/containers/public-confirmation.container.tsx b/src/features/creator/containers/public-confirmation.container.tsx
index 77edb8c0c..b58e6a645 100644
--- a/src/features/creator/containers/public-confirmation.container.tsx
+++ b/src/features/creator/containers/public-confirmation.container.tsx
@@ -3,7 +3,7 @@ import { Button } from "design-system/button";
 import { Modal2 } from "design-system/modal2";
 import { useDocManagementStore } from "store/doc-management/doc-management.store";
 import { meta } from "../../../../meta";
-import { updateDocumentVisibility } from "actions/update-document-visibility.action";
+import { updateDocumentVisibilityAct } from "../acts/update-document-visibility.act";
 
 interface PublicConfirmationContainerProps {
   onCancel(): void;
@@ -19,16 +19,18 @@ const PublicConfirmationContainer = ({
   const disabled = docManagementStore.is === `busy`;
 
   const handleConfirm = async (): Promise<void> => {
-    try {
-      await updateDocumentVisibility({ visibility: `public` });
+    const result = await updateDocumentVisibilityAct({
+      visibility: `public`,
+    });
+    if (result.is === "ok") {
       onConfirm();
-    } catch {}
+    }
   };
 
   return (
     <>
       <Modal2.Header
-        title="Make it public"
+        title="Make It Public"
         closeButtonTitle="Close public document confirmation"
       />
       <Modal2.Body>
diff --git a/src/features/creator/creator.view.tsx b/src/features/creator/creator.view.tsx
index bef11cc90..0eaa953bc 100644
--- a/src/features/creator/creator.view.tsx
+++ b/src/features/creator/creator.view.tsx
@@ -314,7 +314,7 @@ const CreatorView = () => {
             spellCheck="false"
             onChange={changeCode}
             onKeyDown={maintainTabs}
-            onClick={(e) => {
+            onMouseDown={(e) => {
               autoScroller.scroll(e.currentTarget);
             }}
             onSelect={maintainAssistantAppearance}
diff --git a/src/features/creator/utils/use-scroll-to-preview.ts b/src/features/creator/utils/use-scroll-to-preview.ts
index 367781462..678eea868 100644
--- a/src/features/creator/utils/use-scroll-to-preview.ts
+++ b/src/features/creator/utils/use-scroll-to-preview.ts
@@ -49,6 +49,7 @@ const useScrollToPreview = () => {
 
   React.useEffect(() => {
     setIsOn(readBrowserSavedSettings);
+
     return () => {
       scrollToPreview.cancel();
     };
@@ -59,6 +60,7 @@ const useScrollToPreview = () => {
       isOn,
       scroll: (input: HTMLTextAreaElement): void => {
         if (!isOn) return;
+
         scrollToPreview(input);
       },
       toggle: (): void => {
diff --git a/src/features/mindmap-creator/containers/mindmap-details-modal.container.tsx b/src/features/mindmap-creator/containers/mindmap-details-modal.container.tsx
index 73774ae22..66aade462 100644
--- a/src/features/mindmap-creator/containers/mindmap-details-modal.container.tsx
+++ b/src/features/mindmap-creator/containers/mindmap-details-modal.container.tsx
@@ -1,7 +1,6 @@
 import { Button } from "design-system/button";
 import { Modal2 } from "design-system/modal2";
 import React from "react";
-import c from "classnames";
 import { BiPencil, BiTrash } from "react-icons/bi";
 import { useMindmapCreatorState } from "store/mindmap-creator";
 import {
@@ -9,8 +8,6 @@ import {
   openMindmapFormAction,
 } from "store/mindmap-creator/actions";
 import { safeActiveMindmapSelector } from "store/mindmap-creator/selectors";
-import { navigate } from "gatsby";
-import { formatDistance } from "date-fns";
 import { Input } from "design-system/input";
 import { Field } from "design-system/field";
 import { meta } from "../../../../meta";
@@ -20,8 +17,8 @@ import { ResourceVisibility } from "api-4markdown-contracts";
 import { authStoreSelectors } from "store/auth/auth.store";
 import { createPathForMindmap } from "core/create-path-for-mindmap";
 import { context } from "@greenonsoftware/react-kit";
-import { VisibilityIcon } from "components/visibility-icon";
 import { ResourceVisibilityTabs } from "components/resource-visibility-tabs";
+import { ResourceDetails } from "components/resource-details";
 
 const AccessGroupsAssignModule = React.lazy(() =>
   import("modules/access-groups-assign").then((m) => ({
@@ -121,11 +118,6 @@ const MindmapDetailsViewContainer = () => {
   const activeMindmap = useMindmapCreatorState(safeActiveMindmapSelector);
 
   const changeVisibility = (visibility: ResourceVisibility): void => {
-    if (visibility === `manual`) {
-      setView(ViewType.ManualForm);
-      return;
-    }
-
     if (activeMindmap.visibility === visibility) return;
 
     updateMindmapVisibilityAct(visibility);
@@ -157,108 +149,20 @@ const MindmapDetailsViewContainer = () => {
         </Button>
       </Modal2.Header>
       <Modal2.Body>
-        <section className="flex flex-col space-y-1">
-          <p>
-            Name: <strong>{activeMindmap.name}</strong>
-          </p>
-          {activeMindmap.description && (
-            <p>
-              Description:{` `}
-              <strong className="break-words">
-                {activeMindmap.description}
-              </strong>
-            </p>
-          )}
-          {Array.isArray(activeMindmap.tags) &&
-            activeMindmap.tags.length > 0 && (
-              <p>
-                Tags:{` `}
-                <strong className="break-words">
-                  {activeMindmap.tags.join(`, `)}
-                </strong>
-              </p>
-            )}
-          <div className="flex items-center gap-1.5">
-            <span>Visibility:</span>
-            <strong
-              className={c(
-                `capitalize inline-flex items-center gap-1`,
-                activeMindmap.visibility === "private"
-                  ? "text-gray-600 dark:text-gray-400"
-                  : "text-green-700 dark:text-green-600",
-              )}
-            >
-              <VisibilityIcon
-                className="size-6"
-                visibility={activeMindmap.visibility}
-              />
-              {activeMindmap.visibility}
-            </strong>
-          </div>
-          <p>
-            Created:{` `}
-            <strong>
-              {formatDistance(new Date().toISOString(), activeMindmap.cdate)}
-              {` `}
-              ago
-            </strong>
-          </p>
-          <p>
-            Edited:{` `}
-            <strong>
-              {formatDistance(new Date().toISOString(), activeMindmap.mdate)}
-              {` `}
-              ago
-            </strong>
-          </p>
-          {activeMindmap.visibility === "manual" && (
-            <p>
-              Groups with access:{` `}
-              <strong>{activeMindmap.sharedForGroups?.length ?? 0}</strong>
-            </p>
-          )}
-
-          <footer>
-            {activeMindmap.visibility !== `private` && (
-              <button
-                className="underline underline-offset-2 text-blue-800 dark:text-blue-500"
-                title="Mindmap public link"
-                onClick={() =>
-                  navigate(
-                    `${meta.routes.mindmaps.preview}?mindmapId=${activeMindmap.id}&authorId=${user.uid}`,
-                  )
-                }
-              >
-                <strong>Public Link</strong>
-              </button>
-            )}
-            {activeMindmap.visibility === `permanent` && (
-              <button
-                className="underline underline-offset-2 text-blue-800 dark:text-blue-500 ml-3"
-                title="Mindmap static stable URL"
-                onClick={() =>
-                  navigate(
-                    createPathForMindmap(activeMindmap.id, activeMindmap.path),
-                  )
-                }
-              >
-                <strong>Static Stable URL</strong>
-              </button>
-            )}
-            {activeMindmap.visibility === "manual" && (
-              <Button
-                className="mt-4 ml-auto"
-                auto
-                s={1}
-                i={2}
-                onClick={() => changeVisibility("manual")}
-              >
-                <BiPencil />
-                Edit Access
-              </Button>
-            )}
-          </footer>
-        </section>
+        <ResourceDetails
+          type="Mindmap"
+          sharedForGroups={activeMindmap.sharedForGroups}
+          createdAt={activeMindmap.cdate}
+          editedAt={activeMindmap.mdate}
+          previewUrl={`${meta.routes.mindmaps.preview}?mindmapId=${activeMindmap.id}&authorId=${user.uid}`}
+          staticUrl={createPathForMindmap(activeMindmap.id, activeMindmap.path)}
+          name={activeMindmap.name}
+          id={activeMindmap.id}
+          tags={activeMindmap.tags ?? undefined}
+          visibility={activeMindmap.visibility}
+          description={activeMindmap.description ?? undefined}
+          onAccessEdit={() => setView(ViewType.ManualForm)}
+        />
       </Modal2.Body>
       <Modal2.Footer className="overflow-x-auto">
         <ResourceVisibilityTabs
diff --git a/src/features/mindmap-creator/containers/mindmap-form-modal.container.tsx b/src/features/mindmap-creator/containers/mindmap-form-modal.container.tsx
index eea2c6d8d..3adf21e08 100644
--- a/src/features/mindmap-creator/containers/mindmap-form-modal.container.tsx
+++ b/src/features/mindmap-creator/containers/mindmap-form-modal.container.tsx
@@ -5,9 +5,9 @@ import { Input } from "design-system/input";
 import { Textarea } from "design-system/textarea";
 import { maxLength, minLength, optional } from "development-kit/form";
 import { useForm } from "development-kit/use-form";
-import React, { type FormEventHandler } from "react";
+import React from "react";
 import { BiPlusCircle } from "react-icons/bi";
-import { Modal } from "design-system/modal";
+import { Modal2 } from "design-system/modal2";
 import {
   backToMindmapDetailsAction,
   closeMindmapFormAction,
@@ -53,9 +53,7 @@ const MindmapFormModalContainer = () => {
     ],
   });
 
-  const confirmCreation: FormEventHandler<HTMLFormElement> = (e) => {
-    e.preventDefault();
-
+  const confirmCreation = () => {
     const name = values.name.trim();
     const description = values.description.trim();
     const tags = values.tags.trim();
@@ -86,9 +84,9 @@ const MindmapFormModalContainer = () => {
   );
 
   return (
-    <Modal disabled={operation.is === `busy`} onClose={closeMindmapFormAction}>
+    <Modal2 onClose={closeMindmapFormAction}>
       {mindmapForm.is === `edition` ? (
-        <Modal.Header
+        <Modal2.Header
           title={
             <>
               Edit <strong>{mindmapForm.name}</strong> Mindmap
@@ -97,113 +95,114 @@ const MindmapFormModalContainer = () => {
           closeButtonTitle="Cancel mindmap edition"
         />
       ) : (
-        <>
-          <Modal.Header
-            title="Create Mindmap"
-            closeButtonTitle="Cancel mindmap creation"
-          />
+        <Modal2.Header
+          title="Create Mindmap"
+          closeButtonTitle="Cancel mindmap creation"
+        />
+      )}
+
+      <Modal2.Body>
+        {mindmapForm.is === `active` && (
           <p className="text-sm mb-4">
             Mindmap will be created in <strong>private mode</strong>. Visible
             only to you, but data inside is{` `}
             <strong>not encrypted</strong> -{` `}
             <strong>avoid sensitive data</strong>
           </p>
-        </>
-      )}
-
-      <form className="flex flex-col gap-3" onSubmit={confirmCreation}>
-        <Field
-          label="Name*"
-          hint={
-            <Hint
-              trigger={
-                <>
-                  {validationLimits.name.min} - {validationLimits.name.max}
-                  {` `}
-                  characters
-                </>
-              }
+        )}
+        <div className="flex flex-col gap-3">
+          <Field
+            label="Name*"
+            hint={
+              <Hint
+                trigger={
+                  <>
+                    {validationLimits.name.min} - {validationLimits.name.max}
+                    {` `}
+                    characters
+                  </>
+                }
+              />
+            }
+          >
+            <Input
+              placeholder={`My Mindmap, Basics of Computer Science, ...etc`}
+              {...inject(`name`)}
             />
-          }
-        >
-          <Input
-            placeholder={`My Mindmap, Basics of Computer Science, ...etc`}
-            {...inject(`name`)}
-          />
-        </Field>
-        <Field
-          label="Description"
-          hint={
-            <Hint
-              trigger={
-                <>
-                  {validationLimits.description.min} -{` `}
-                  {validationLimits.description.max}
-                  {` `}
-                  characters
-                </>
-              }
+          </Field>
+          <Field
+            label="Description"
+            hint={
+              <Hint
+                trigger={
+                  <>
+                    {validationLimits.description.min} -{` `}
+                    {validationLimits.description.max}
+                    {` `}
+                    characters
+                  </>
+                }
+              />
+            }
+          >
+            <Textarea
+              placeholder="My private or public roadmap for learning something important to me..."
+              {...inject(`description`)}
             />
-          }
-        >
-          <Textarea
-            placeholder="My private or public roadmap for learning something important to me..."
-            {...inject(`description`)}
-          />
-        </Field>
-        <Field
-          label={splittedTags === 0 ? `Tags` : `Tags (${splittedTags})`}
-          hint={<Hint trigger={`Comma-separated, 1-10 tags, each unique`} />}
-        >
-          <Input
-            placeholder="React, ruby-on-rails, c++, c# ...etc"
-            {...inject(`tags`)}
-          />
-        </Field>
-        <footer className="mt-6 flex space-x-3">
-          {mindmapForm.is === `active` ? (
+          </Field>
+          <Field
+            label={splittedTags === 0 ? `Tags` : `Tags (${splittedTags})`}
+            hint={<Hint trigger={`Comma-separated, 1-10 tags, each unique`} />}
+          >
+            <Input
+              placeholder="React, ruby-on-rails, c++, c# ...etc"
+              {...inject(`tags`)}
+            />
+          </Field>
+        </div>
+      </Modal2.Body>
+      <Modal2.Footer className="flex gap-3">
+        {mindmapForm.is === `active` ? (
+          <Button
+            i={2}
+            s={2}
+            auto
+            className="flex-1"
+            title="Confirm mindmap creation"
+            disabled={operation.is === `busy` || untouched || invalid}
+            onClick={confirmCreation}
+          >
+            Create
+            <BiPlusCircle />
+          </Button>
+        ) : (
+          <>
             <Button
-              type="submit"
-              i={2}
+              i={1}
               s={2}
+              className="flex-1"
               auto
+              title="Back to mindmap details"
+              disabled={operation.is === `busy`}
+              onClick={backToMindmapDetailsAction}
+            >
+              Cancel
+            </Button>
+            <Button
+              i={2}
+              s={2}
               className="flex-1"
-              title="Confirm mindmap creation"
+              auto
+              title="Confirm mindmap update"
               disabled={operation.is === `busy` || untouched || invalid}
+              onClick={confirmCreation}
             >
-              Create
-              <BiPlusCircle />
+              Submit
             </Button>
-          ) : (
-            <>
-              <Button
-                type="button"
-                i={1}
-                s={2}
-                className="flex-1"
-                auto
-                title="Back to mindmap details"
-                disabled={operation.is === `busy`}
-                onClick={backToMindmapDetailsAction}
-              >
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                i={2}
-                s={2}
-                className="flex-1"
-                auto
-                title="Confirm mindmap update"
-                disabled={operation.is === `busy` || untouched || invalid}
-              >
-                Submit
-              </Button>
-            </>
-          )}
-        </footer>
-      </form>
-    </Modal>
+          </>
+        )}
+      </Modal2.Footer>
+    </Modal2>
   );
 };
 
diff --git a/src/features/mindmap-creator/containers/node-form-modal.container.tsx b/src/features/mindmap-creator/containers/node-form-modal.container.tsx
index 99f6eb0ca..4a1aeb98a 100644
--- a/src/features/mindmap-creator/containers/node-form-modal.container.tsx
+++ b/src/features/mindmap-creator/containers/node-form-modal.container.tsx
@@ -1,5 +1,5 @@
-import { Modal } from "design-system/modal";
-import type { ComponentType, FormEventHandler } from "react";
+import { Modal2 } from "design-system/modal2";
+import type { ComponentType } from "react";
 import React from "react";
 import { useForm } from "development-kit/use-form";
 import { maxLength, minLength, optional, url } from "development-kit/form";
@@ -91,9 +91,7 @@ const ExternalForm = () => {
     url: [url],
   });
 
-  const confirmCreation: FormEventHandler<HTMLFormElement> = async (e) => {
-    e.preventDefault();
-
+  const confirmCreation = async () => {
     const { name, description } = prepareBaseValues(values);
     const url = values.url.trim();
 
@@ -123,7 +121,7 @@ const ExternalForm = () => {
   return (
     <>
       {nodeForm.is === `edition` ? (
-        <Modal.Header
+        <Modal2.Header
           title={
             <>
               Editing <strong>{nodeForm.data.name}</strong> node
@@ -132,99 +130,100 @@ const ExternalForm = () => {
           closeButtonTitle="Cancel node edition"
         />
       ) : (
-        <Modal.Header
+        <Modal2.Header
           title="External node data (2/2)"
           closeButtonTitle="Cancel node creation"
         />
       )}
 
-      <form className="flex flex-col gap-3" onSubmit={confirmCreation}>
-        <Field
-          label="Name*"
-          hint={
-            <Hint
-              trigger={
-                <>
-                  {validationLimits.name.min} - {validationLimits.name.max}
-                  {` `}
-                  characters
-                </>
-              }
+      <Modal2.Body>
+        <div className="flex flex-col gap-3">
+          <Field
+            label="Name*"
+            hint={
+              <Hint
+                trigger={
+                  <>
+                    {validationLimits.name.min} - {validationLimits.name.max}
+                    {` `}
+                    characters
+                  </>
+                }
+              />
+            }
+          >
+            <Input
+              placeholder={`My Notes, Basics of Computer Science, ...etc`}
+              {...inject(`name`)}
             />
-          }
-        >
-          <Input
-            placeholder={`My Notes, Basics of Computer Science, ...etc`}
-            {...inject(`name`)}
-          />
-        </Field>
-        <Field
-          label="Description"
-          hint={
-            <Hint
-              trigger={
-                <>
-                  {validationLimits.description.min} -{` `}
-                  {validationLimits.description.max}
-                  {` `}
-                  characters
-                </>
-              }
+          </Field>
+          <Field
+            label="Description"
+            hint={
+              <Hint
+                trigger={
+                  <>
+                    {validationLimits.description.min} -{` `}
+                    {validationLimits.description.max}
+                    {` `}
+                    characters
+                  </>
+                }
+              />
+            }
+          >
+            <Textarea
+              placeholder="My handy description for learning something valuable..."
+              {...inject(`description`)}
             />
-          }
+          </Field>
+          <Field label="Link To Resource*">
+            <Input
+              placeholder={`https://cool-articles.com/article/`}
+              {...inject(`url`)}
+            />
+          </Field>
+        </div>
+      </Modal2.Body>
+      <Modal2.Footer className="flex gap-3">
+        <Button
+          i={1}
+          className="flex-1"
+          s={2}
+          auto
+          title="Back to node type selection"
+          onClick={() => setActiveType(`none`)}
         >
-          <Textarea
-            placeholder="My handy description for learning something valuable..."
-            {...inject(`description`)}
-          />
-        </Field>
-        <Field label="Link To Resource*">
-          <Input
-            placeholder={`https://cool-articles.com/article/`}
-            {...inject(`url`)}
-          />
-        </Field>
-        <footer className="flex space-x-3 mt-6">
+          Back
+        </Button>
+        {nodeForm.is === `edition` ? (
+          <Button
+            className="flex-1"
+            i={2}
+            s={2}
+            auto
+            title="Confirm node update"
+            disabled={untouched || invalid}
+            onClick={confirmCreation}
+          >
+            Save
+            <BiSave />
+          </Button>
+        ) : (
           <Button
-            type="button"
-            i={1}
             className="flex-1"
+            i={2}
             s={2}
             auto
-            title="Back to node type selection"
-            onClick={() => setActiveType(`none`)}
+            title="Confirm node creation"
+            disabled={untouched || invalid}
+            onClick={confirmCreation}
           >
-            Back
+            Create
+            <BiPlusCircle />
           </Button>
-          {nodeForm.is === `edition` ? (
-            <Button
-              type="submit"
-              className="flex-1"
-              i={2}
-              s={2}
-              auto
-              title="Confirm node update"
-              disabled={untouched || invalid}
-            >
-              Save
-              <BiSave />
-            </Button>
-          ) : (
-            <Button
-              type="submit"
-              className="flex-1"
-              i={2}
-              s={2}
-              auto
-              title="Confirm node creation"
-              disabled={untouched || invalid}
-            >
-              Create
-              <BiPlusCircle />
-            </Button>
-          )}
-        </footer>
-      </form>
+        )}
+      </Modal2.Footer>
     </>
   );
 };
@@ -269,9 +268,7 @@ const EmbeddedForm = () => {
     ],
   });
 
-  const confirmCreation: FormEventHandler<HTMLFormElement> = async (e) => {
-    e.preventDefault();
-
+  const confirmCreation = async () => {
     const { name, description } = prepareBaseValues(values);
     const trimmedContent = values.content.trim();
     const content = trimmedContent.length === 0 ? null : trimmedContent;
@@ -307,7 +304,7 @@ const EmbeddedForm = () => {
   return (
     <>
       {nodeForm.is === `edition` ? (
-        <Modal.Header
+        <Modal2.Header
           title={
             <>
               Editing <strong>{nodeForm.data.name}</strong> node
@@ -316,118 +313,118 @@ const EmbeddedForm = () => {
           closeButtonTitle="Cancel node edition"
         />
       ) : (
-        <Modal.Header
+        <Modal2.Header
           title="Embedded node data (2/2)"
           closeButtonTitle="Cancel node creation"
         />
       )}
 
-      <form className="flex flex-col gap-3" onSubmit={confirmCreation}>
-        <Field
-          label="Name*"
-          hint={
-            <Hint
-              trigger={
-                <>
-                  {validationLimits.name.min} - {validationLimits.name.max}
-                  {` `}
-                  characters
-                </>
-              }
+      <Modal2.Body>
+        <div className="flex flex-col gap-3">
+          <Field
+            label="Name*"
+            hint={
+              <Hint
+                trigger={
+                  <>
+                    {validationLimits.name.min} - {validationLimits.name.max}
+                    {` `}
+                    characters
+                  </>
+                }
+              />
+            }
+          >
+            <Input
+              placeholder={`My Notes, Basics of Computer Science, ...etc`}
+              {...inject(`name`)}
             />
-          }
-        >
-          <Input
-            placeholder={`My Notes, Basics of Computer Science, ...etc`}
-            {...inject(`name`)}
-          />
-        </Field>
-        <Field
-          label="Description"
-          hint={
-            <Hint
-              trigger={
-                <>
-                  {validationLimits.description.min} -{` `}
-                  {validationLimits.description.max}
-                  {` `}
-                  characters
-                </>
-              }
+          </Field>
+          <Field
+            label="Description"
+            hint={
+              <Hint
+                trigger={
+                  <>
+                    {validationLimits.description.min} -{` `}
+                    {validationLimits.description.max}
+                    {` `}
+                    characters
+                  </>
+                }
+              />
+            }
+          >
+            <Textarea
+              placeholder="My handy description for learning something valuable..."
+              {...inject(`description`)}
             />
-          }
-        >
-          <Textarea
-            placeholder="My handy description for learning something valuable..."
-            {...inject(`description`)}
-          />
-        </Field>
-        <Field
-          label="Content"
-          hint={
-            <Hint
-              trigger={
-                <>
-                  Paste <strong>Markdown syntax</strong> or edit in{` `}
-                  <button
-                    type="button"
-                    className="text-sm font-bold underline underline-offset-2 text-blue-800 dark:text-blue-500"
-                    title="Open in markdown editor"
-                    onClick={openInDocumentCreator}
-                  >
-                    Document Creator
-                  </button>
-                </>
-              }
+          </Field>
+          <Field
+            label="Content"
+            hint={
+              <Hint
+                trigger={
+                  <>
+                    Paste <strong>Markdown syntax</strong> or edit in{` `}
+                    <button
+                      className="text-sm font-bold underline underline-offset-2 text-blue-800 dark:text-blue-500"
+                      title="Open in markdown editor"
+                      onClick={openInDocumentCreator}
+                    >
+                      Document Creator
+                    </button>
+                  </>
+                }
+              />
+            }
+          >
+            <Textarea
+              placeholder="The article, note or something you want to learn from..."
+              {...inject(`content`)}
             />
-          }
+          </Field>
+        </div>
+      </Modal2.Body>
+      <Modal2.Footer className="flex gap-3">
+        <Button
+          i={1}
+          className="flex-1"
+          s={2}
+          auto
+          title="Back to node type selection"
+          onClick={() => setActiveType(`none`)}
         >
-          <Textarea
-            placeholder="The article, note or something you want to learn from..."
-            {...inject(`content`)}
-          />
-        </Field>
-        <footer className="flex space-x-3 mt-6">
+          Back
+        </Button>
+        {nodeForm.is === `edition` ? (
+          <Button
+            className="flex-1"
+            i={2}
+            s={2}
+            auto
+            title="Confirm node update"
+            disabled={untouched || invalid}
+            onClick={confirmCreation}
+          >
+            Save
+            <BiSave />
+          </Button>
+        ) : (
           <Button
-            type="button"
-            i={1}
             className="flex-1"
+            i={2}
             s={2}
             auto
-            title="Back to node type selection"
-            onClick={() => setActiveType(`none`)}
+            title="Confirm node creation"
+            disabled={untouched || invalid}
+            onClick={confirmCreation}
           >
-            Back
+            Create
+            <BiPlusCircle />
           </Button>
-          {nodeForm.is === `edition` ? (
-            <Button
-              type="submit"
-              className="flex-1"
-              i={2}
-              s={2}
-              auto
-              title="Confirm node update"
-              disabled={untouched || invalid}
-            >
-              Save
-              <BiSave />
-            </Button>
-          ) : (
-            <Button
-              type="submit"
-              className="flex-1"
-              i={2}
-              s={2}
-              auto
-              title="Confirm node creation"
-              disabled={untouched || invalid}
-            >
-              Create
-              <BiPlusCircle />
-            </Button>
-          )}
-        </footer>
-      </form>
+        )}
+      </Modal2.Footer>
     </>
   );
 };
@@ -437,30 +434,32 @@ const NoneStep = () => {
 
   return (
     <>
-      <Modal.Header
+      <Modal2.Header
         title="Select Node Type (1/2)"
         closeButtonTitle="Cancel node creation"
       />
-      <section className="flex flex-col gap-3">
-        <button
-          className="flex flex-col cursor-pointer hover:bg-zinc-300 dark:hover:bg-gray-900 p-3 rounded-md bg-zinc-200 border dark:bg-gray-950 border-zinc-300 dark:border-zinc-800"
-          onClick={() => setActiveType(`embedded`)}
-        >
-          <h6 className="capitalize text-left">Embedded Node</h6>
-          <p className="mt-1 text-sm text-left">
-            Add node and its content from scratch
-          </p>
-        </button>
-        <button
-          className="flex flex-col cursor-pointer hover:bg-zinc-300 dark:hover:bg-gray-900 p-3 rounded-md bg-zinc-200 border dark:bg-gray-950 border-zinc-300 dark:border-zinc-800"
-          onClick={() => setActiveType(`external`)}
-        >
-          <h6 className="capitalize text-left">External Node</h6>
-          <p className="mt-1 text-sm text-left">
-            Link external resource as mindmap node
-          </p>
-        </button>
-      </section>
+      <Modal2.Body>
+        <section className="flex flex-col gap-3">
+          <button
+            className="flex flex-col cursor-pointer hover:bg-zinc-300 dark:hover:bg-gray-900 p-3 rounded-md bg-zinc-200 border dark:bg-gray-950 border-zinc-300 dark:border-zinc-800"
+            onClick={() => setActiveType(`embedded`)}
+          >
+            <h6 className="capitalize text-left">Embedded Node</h6>
+            <p className="mt-1 text-sm text-left">
+              Add node and its content from scratch
+            </p>
+          </button>
+          <button
+            className="flex flex-col cursor-pointer hover:bg-zinc-300 dark:hover:bg-gray-900 p-3 rounded-md bg-zinc-200 border dark:bg-gray-950 border-zinc-300 dark:border-zinc-800"
+            onClick={() => setActiveType(`external`)}
+          >
+            <h6 className="capitalize text-left">External Node</h6>
+            <p className="mt-1 text-sm text-left">
+              Link external resource as mindmap node
+            </p>
+          </button>
+        </section>
+      </Modal2.Body>
     </>
   );
 };
@@ -477,9 +476,9 @@ const NodeFormModalContainer = () => {
   const Component = forms[activeType];
 
   return (
-    <Modal onClose={closeNodeFormAction}>
+    <Modal2 onClose={closeNodeFormAction}>
       <Component />
-    </Modal>
+    </Modal2>
   );
 };
 
diff --git a/src/features/mindmap-creator/containers/node-preview-modal.container.tsx b/src/features/mindmap-creator/containers/node-preview-modal.container.tsx
index 88d802a74..505c50c94 100644
--- a/src/features/mindmap-creator/containers/node-preview-modal.container.tsx
+++ b/src/features/mindmap-creator/containers/node-preview-modal.container.tsx
@@ -1,5 +1,5 @@
 import { Button } from "design-system/button";
-import { Modal } from "design-system/modal";
+import { Modal2 } from "design-system/modal2";
 import React from "react";
 import { BiPencil } from "react-icons/bi";
 import { useMindmapCreatorState } from "store/mindmap-creator";
@@ -28,27 +28,31 @@ const NodePreviewModalContainer = () => {
 
   if (!nodePreview.data.content) {
     return (
-      <Modal onClose={closeNodePreviewAction}>
-        <Modal.Header
+      <Modal2 onClose={closeNodePreviewAction}>
+        <Modal2.Header
           title="No Content For Selected Node"
           closeButtonTitle="Close node preview"
         />
-        <p>
-          There is no content for the selected node. Fill it with data by
-          clicking the button below.
-        </p>
-        <Button
-          i={2}
-          s={2}
-          className="ml-auto mt-8"
-          auto
-          title="Go to node content edition"
-          onClick={openNodeEdition}
-        >
-          <BiPencil />
-          Edit Node Content
-        </Button>
-      </Modal>
+        <Modal2.Body>
+          <p>
+            There is no content for the selected node. Fill it with data by
+            clicking the button below.
+          </p>
+        </Modal2.Body>
+        <Modal2.Footer>
+          <Button
+            i={2}
+            s={2}
+            className="ml-auto"
+            auto
+            title="Go to node content edition"
+            onClick={openNodeEdition}
+          >
+            <BiPencil />
+            Edit Node Content
+          </Button>
+        </Modal2.Footer>
+      </Modal2>
     );
   }
 
diff --git a/src/features/mindmap-creator/containers/nodes-removal-confirmation.container.tsx b/src/features/mindmap-creator/containers/nodes-removal-confirmation.container.tsx
index c3849305a..01108749f 100644
--- a/src/features/mindmap-creator/containers/nodes-removal-confirmation.container.tsx
+++ b/src/features/mindmap-creator/containers/nodes-removal-confirmation.container.tsx
@@ -1,5 +1,5 @@
 import { Button } from "design-system/button";
-import { Modal } from "design-system/modal";
+import { Modal2 } from "design-system/modal2";
 import React from "react";
 import {
   cancelNodesRemovalAction,
@@ -8,21 +8,22 @@ import {
 
 const NodesRemovalConfirmationContainer = () => {
   return (
-    <Modal onClose={cancelNodesRemovalAction}>
-      <Modal.Header
+    <Modal2 onClose={cancelNodesRemovalAction}>
+      <Modal2.Header
         title="Confirm Nodes Removal"
         closeButtonTitle="Cancel nodes removal"
       />
-      <p className="mt-4 mb-1">
-        You&apos;ve selected some nodes in the mindmap. Confirming this action
-        will{` `}
-        <strong>permanently remove them</strong>.
-      </p>
-      <p className="mb-1">Are you sure you want to proceed?</p>
-      <footer className="mt-6 flex">
+      <Modal2.Body>
+        <p className="mb-1">
+          You&apos;ve selected some nodes in the mindmap. Confirming this action
+          will{` `}
+          <strong>permanently remove them</strong>.
+        </p>
+        <p className="mb-1">Are you sure you want to proceed?</p>
+      </Modal2.Body>
+      <Modal2.Footer className="flex gap-3">
         <Button
-          className="ml-auto"
-          type="button"
+          className="flex-1"
           i={1}
           s={2}
           auto
@@ -32,8 +33,7 @@ const NodesRemovalConfirmationContainer = () => {
           Cancel
         </Button>
         <Button
-          type="submit"
-          className="ml-2"
+          className="flex-1"
           i={2}
           s={2}
           auto
@@ -42,8 +42,8 @@ const NodesRemovalConfirmationContainer = () => {
         >
           Confirm
         </Button>
-      </footer>
-    </Modal>
+      </Modal2.Footer>
+    </Modal2>
   );
 };
 
diff --git a/src/features/mindmap-creator/containers/your-mindmaps-modal.container.tsx b/src/features/mindmap-creator/containers/your-mindmaps-modal.container.tsx
index a0f215979..9c65ed969 100644
--- a/src/features/mindmap-creator/containers/your-mindmaps-modal.container.tsx
+++ b/src/features/mindmap-creator/containers/your-mindmaps-modal.container.tsx
@@ -1,5 +1,5 @@
 import { Button } from "design-system/button";
-import { Modal } from "design-system/modal";
+import { Modal2 } from "design-system/modal2";
 import React from "react";
 import { BiErrorAlt, BiRefresh } from "react-icons/bi";
 import c from "classnames";
@@ -26,16 +26,16 @@ const rangeLookup: Record<RangeFilter, [number, number]> = {
   "Really Old": [31, Number.MAX_VALUE],
 };
 
-const YourMindmapsContentContainer = () => {
+const YourMindmapsContentContainer = ({
+  activeRange,
+}: {
+  activeRange: RangeFilter;
+}) => {
   const { activeMindmapId } = useMindmapCreatorState();
   const mindmapsState = useMindmapCreatorState((state) =>
     readyMindmapsSelector(state.mindmaps),
   );
 
-  const [activeRange, setActiveRange] = React.useState<RangeFilter>(
-    rangeFilters[0],
-  );
-
   const mindmaps = React.useMemo((): MindmapDto[] => {
     const now = new Date();
 
@@ -49,19 +49,6 @@ const YourMindmapsContentContainer = () => {
 
   return (
     <>
-      <Tabs className="mb-5">
-        {rangeFilters.map((range) => (
-          <Tabs.Item
-            key={range}
-            title={`${range} mindmaps`}
-            active={range === activeRange}
-            onClick={() => setActiveRange(range)}
-          >
-            {range}
-          </Tabs.Item>
-        ))}
-      </Tabs>
-
       {mindmaps.length > 0 ? (
         <ul className="flex flex-col space-y-3">
           {mindmaps.map((mindmap) => (
@@ -103,13 +90,15 @@ const YourMindmapsContentContainer = () => {
 
 const YourMindmapsModalContainer = () => {
   const { mindmaps } = useMindmapCreatorState();
+  const [activeRange, setActiveRange] = React.useState<RangeFilter>(
+    rangeFilters[0],
+  );
+
+  const pending = mindmaps.is === `idle` || mindmaps.is === `busy`;
 
   return (
-    <Modal
-      disabled={mindmaps.is === `busy`}
-      onClose={closeYourMindmapsViewAction}
-    >
-      <Modal.Header
+    <Modal2 disabled={pending} onClose={closeYourMindmapsViewAction}>
+      <Modal2.Header
         title="Your Mindmaps"
         closeButtonTitle="Close your mindmaps"
       >
@@ -118,35 +107,52 @@ const YourMindmapsModalContainer = () => {
           i={2}
           s={1}
           title="Sync mindmaps"
-          disabled={mindmaps.is === `busy`}
+          disabled={pending}
           onClick={reloadYourMindmapsAct}
         >
           <BiRefresh />
         </Button>
-      </Modal.Header>
-      {(mindmaps.is === `idle` || mindmaps.is === `busy`) && (
-        <Loader className="mx-auto my-3" size="lg" />
-      )}
-      {mindmaps.is === `ok` && <YourMindmapsContentContainer />}
-      {mindmaps.is === `fail` && (
-        <>
-          <p className="flex gap-2 text-sm justify-center mb-4 items-center bg-red-300 dark:bg-red-700 p-2 rounded-md">
-            <BiErrorAlt className="shrink-0" size={20} />
-            {mindmaps.error.message}
-          </p>
-          <Button
-            i={2}
-            s={2}
-            auto
-            className="w-full"
-            title="Sync mindmap"
-            onClick={reloadYourMindmapsAct}
-          >
-            Reload
-          </Button>
-        </>
-      )}
-    </Modal>
+      </Modal2.Header>
+      <Modal2.Body>
+        {pending && <Loader className="mx-auto my-3" size="lg" />}
+        {mindmaps.is === `ok` && (
+          <YourMindmapsContentContainer activeRange={activeRange} />
+        )}
+        {mindmaps.is === `fail` && (
+          <>
+            <p className="flex gap-2 text-sm justify-center mb-4 items-center bg-red-300 dark:bg-red-700 p-2 rounded-md">
+              <BiErrorAlt className="shrink-0" size={20} />
+              {mindmaps.error.message}
+            </p>
+            <Button
+              i={2}
+              s={2}
+              auto
+              className="w-full"
+              title="Sync mindmap"
+              onClick={reloadYourMindmapsAct}
+            >
+              Reload
+            </Button>
+          </>
+        )}
+      </Modal2.Body>
+      <Modal2.Footer>
+        <Tabs className="w-full">
+          {rangeFilters.map((range) => (
+            <Tabs.Item
+              key={range}
+              disabled={pending}
+              title={`${range} mindmaps`}
+              active={range === activeRange}
+              onClick={() => setActiveRange(range)}
+            >
+              {range}
+            </Tabs.Item>
+          ))}
+        </Tabs>
+      </Modal2.Footer>
+    </Modal2>
   );
 };
 
diff --git a/src/features/user-profile-preview/acts/get-user-profile.act.ts b/src/features/user-profile-preview/acts/get-user-profile.act.ts
index 8eb58033b..0be8a570b 100644
--- a/src/features/user-profile-preview/acts/get-user-profile.act.ts
+++ b/src/features/user-profile-preview/acts/get-user-profile.act.ts
@@ -1,13 +1,17 @@
 import { getAPI, parseError } from "api-4markdown";
-import { getProfileId } from "../utils/get-profile-id";
 import { setUserProfileStatsAction } from "../models/actions";
+import { UserProfileId } from "api-4markdown-contracts";
 
-const getUserProfileAct = async (): Promise<void> => {
+const getUserProfileAct = async (profileId: UserProfileId): Promise<void> => {
   try {
+    if (!profileId) {
+      throw Error(`User profile ID wrong format`);
+    }
+
     setUserProfileStatsAction({ is: `busy` });
 
     const stats = await getAPI().call("getUserProfile")({
-      profileId: getProfileId(),
+      profileId,
     });
 
     setUserProfileStatsAction({
diff --git a/src/features/user-profile-preview/utils/get-profile-id.ts b/src/features/user-profile-preview/utils/get-profile-id.ts
index 9eaa9dead..7b74624ee 100644
--- a/src/features/user-profile-preview/utils/get-profile-id.ts
+++ b/src/features/user-profile-preview/utils/get-profile-id.ts
@@ -13,4 +13,4 @@ const getProfileId = (): UserProfileId => {
   return asUserProfileId(params.get(`profileId`));
 };
 
-export { getProfileId };
+export { getProfileId, asUserProfileId };
diff --git a/src/features/user-profile-preview/views/user-profile-preview.view.tsx b/src/features/user-profile-preview/views/user-profile-preview.view.tsx
index 25970e9ff..c25a147e6 100644
--- a/src/features/user-profile-preview/views/user-profile-preview.view.tsx
+++ b/src/features/user-profile-preview/views/user-profile-preview.view.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useLocation } from "@reach/router";
 import { AppNavigation } from "components/app-navigation";
 import { AppFooterContainer } from "containers/app-footer.container";
 import { CreationLinkContainer } from "containers/creation-link.container";
@@ -6,11 +7,16 @@ import { EducationRankLinkContainer } from "containers/education-rank-link.conta
 import { EducationZoneLinkContainer } from "containers/education-zone-link.container";
 import { UserProfileContentContainer } from "../containers/user-profile-content.container";
 import { getUserProfileAct } from "../acts/get-user-profile.act";
+import { asUserProfileId } from "../utils/get-profile-id";
 
 const UserProfilePreviewView = () => {
+  const location = useLocation();
+
   React.useEffect(() => {
-    getUserProfileAct();
-  }, []);
+    getUserProfileAct(
+      asUserProfileId(new URLSearchParams(location.search).get(`profileId`)),
+    );
+  }, [location.search]);
 
   return (
     <>
diff --git a/src/modules/access-groups-assign/access-group-assign.module.tsx b/src/modules/access-groups-assign/access-group-assign.module.tsx
index 397b0fe9b..8788d9cea 100644
--- a/src/modules/access-groups-assign/access-group-assign.module.tsx
+++ b/src/modules/access-groups-assign/access-group-assign.module.tsx
@@ -5,7 +5,7 @@ import { BiError, BiPlusCircle, BiGroup, BiUser } from "react-icons/bi";
 import { Loader } from "design-system/loader";
 import { Modal2 } from "design-system/modal2";
 import { Empty } from "design-system/empty";
-import { Error as ErrorComponent } from "design-system/error";
+import { Err } from "design-system/err";
 import { navigate } from "gatsby";
 import { meta } from "../../../meta";
 import { useQuery } from "core/use-query";
@@ -65,15 +65,15 @@ const AccessGroupsAssignModule = ({
         {loadingGroups && <Loader className="mx-auto" size="lg" />}
 
         {groupsQuery.is === "fail" && (
-          <ErrorComponent className="py-4">
-            <ErrorComponent.Icon>
+          <Err className="py-4">
+            <Err.Icon>
               <BiError size={80} />
-            </ErrorComponent.Icon>
-            <ErrorComponent.Title>Something went wrong!</ErrorComponent.Title>
-            <ErrorComponent.Description className="mb-0">
+            </Err.Icon>
+            <Err.Title>Something went wrong!</Err.Title>
+            <Err.Description className="mb-0">
               {groupsQuery.error.message}
-            </ErrorComponent.Description>
-          </ErrorComponent>
+            </Err.Description>
+          </Err>
         )}
 
         {groupsQuery.is === "ok" && (
diff --git a/src/modules/mindmap-preview/mindmap-preview.module.tsx b/src/modules/mindmap-preview/mindmap-preview.module.tsx
index 25b7d1d79..bb64890e0 100644
--- a/src/modules/mindmap-preview/mindmap-preview.module.tsx
+++ b/src/modules/mindmap-preview/mindmap-preview.module.tsx
@@ -7,6 +7,8 @@ import {
   type EdgeProps,
   type NodeProps,
   Controls,
+  useNodesState,
+  useEdgesState,
 } from "@xyflow/react";
 import React, { type ComponentType } from "react";
 import { useMindmapPreviewState } from "store/mindmap-preview";
@@ -91,26 +93,31 @@ const MindmapPreviewModule = () => {
   );
   const nodePreview = useMindmapPreviewState((state) => state.nodePreview);
 
-  const nodes = React.useMemo(
-    () =>
-      mindmap.nodes.map((node) => ({
-        ...node,
-        data: {
-          ...node.data,
-          mindmapId: mindmap.id,
-        },
-      })),
-    [mindmap.nodes, mindmap.id],
+  const [initialNodes] = React.useState(() =>
+    mindmap.nodes.map((node) => ({
+      ...node,
+      data: {
+        ...node.data,
+        mindmapId: mindmap.id,
+      },
+    })),
   );
 
+  const [nodes, _, onNodesChange] = useNodesState(initialNodes);
+  const [edges, __, onEdgesChange] = useEdgesState(mindmap.edges);
+
   return (
     <>
       <ReactFlow
         nodes={nodes}
-        edges={mindmap.edges}
+        edges={edges}
         nodeTypes={mindmapNodeTypes[mindmap.orientation] as NodeTypes}
         edgeTypes={edgeTypes as EdgeTypes}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
         fitView
+        nodesDraggable={false}
+        nodesConnectable={false}
       >
         <Controls />
         <Background />