diff --git a/client/src/app/(asset)/metadata/[id]/content/json-editor.tsx b/client/src/app/(asset)/metadata/[id]/content/json-editor.tsx
index 1e0f2fd..6cff6fd 100644
--- a/client/src/app/(asset)/metadata/[id]/content/json-editor.tsx
+++ b/client/src/app/(asset)/metadata/[id]/content/json-editor.tsx
@@ -63,7 +63,7 @@ export default function JSONEditor({
     (doc) => doc.toJSON() as RulesCollection,
   )[0];
 
-  const project = activeProject?._data;
+  const project = activeProject?.toJSON() as ProjectCollection;
 
   if (!metadatas || !project || !rules) return null;
 
diff --git a/client/src/app/(asset)/metadata/[id]/header/actions.tsx b/client/src/app/(asset)/metadata/[id]/header/actions.tsx
index d67f660..9088b23 100644
--- a/client/src/app/(asset)/metadata/[id]/header/actions.tsx
+++ b/client/src/app/(asset)/metadata/[id]/header/actions.tsx
@@ -23,7 +23,7 @@ export default function HeaderActions({
   const projectCollection = useRxCollection<ProjectCollection>("project");
   const metadataCollection = useRxCollection<MetadataCollection>("metadata");
 
-  const project = activeProject?._data;
+  const project = activeProject?.toJSON() as ProjectCollection;
 
   if (!metadata || !project) return <div>No metadata found</div>;
 
diff --git a/client/src/app/(validator)/data-validation/assets/actions.tsx b/client/src/app/(validator)/data-validation/assets/actions.tsx
index fe76d63..528859f 100644
--- a/client/src/app/(validator)/data-validation/assets/actions.tsx
+++ b/client/src/app/(validator)/data-validation/assets/actions.tsx
@@ -86,6 +86,7 @@ export default function Actions({
   return (
     <div className={cn("flex flex-row items-center gap-2", className)}>
       <Button
+        title="Mark as flagged"
         disabled={isUnchecked}
         variant={isWarning ? "warning" : "warningOutilne"}
         size={"icon"}
@@ -96,6 +97,7 @@ export default function Actions({
         <FlagIcon className="h-4 w-4" />
       </Button>
       <Button
+        title="Mark as valid"
         disabled={isUnchecked}
         variant={isSuccess ? "success" : "successOutline"}
         size={"icon"}
@@ -107,7 +109,11 @@ export default function Actions({
       </Button>
       <Dialog>
         <DialogTrigger asChild>
-          <Button size={"icon"} variant={"destructiveOutilne"}>
+          <Button
+            title="Delete asset"
+            size={"icon"}
+            variant={"destructiveOutilne"}
+          >
             <TrashIcon className="h-4 w-4" />
           </Button>
         </DialogTrigger>
@@ -132,6 +138,7 @@ export default function Actions({
         </DialogContent>
       </Dialog>
       <Button
+        title="Detail asset"
         size={"icon"}
         variant={"outline"}
         className="border-white/50"
diff --git a/client/src/app/(validator)/data-validation/validator.tsx b/client/src/app/(validator)/data-validation/validator.tsx
index aa1e261..5861650 100644
--- a/client/src/app/(validator)/data-validation/validator.tsx
+++ b/client/src/app/(validator)/data-validation/validator.tsx
@@ -45,7 +45,7 @@ export default function Validator({
     (doc) => doc.toJSON() as RulesCollection,
   )[0];
 
-  const project = activeProject?._data;
+  const project = activeProject?.toJSON() as ProjectCollection;
 
   if (!metadata || !project || !rules) return null;
 
@@ -64,6 +64,8 @@ export default function Validator({
         })),
       );
 
+      // TODO - delete validation when they change to success
+
       // Set the status in metadata
       const metadataWithStatus = setMetadataStatusFromValidations(
         metadata,
diff --git a/client/src/app/(validator)/metadata-structure/how-to.tsx b/client/src/app/(validator)/metadata-structure/how-to.tsx
index a56f053..d7a47d6 100644
--- a/client/src/app/(validator)/metadata-structure/how-to.tsx
+++ b/client/src/app/(validator)/metadata-structure/how-to.tsx
@@ -65,16 +65,21 @@ export default function HowToCreateMetadataSchema() {
         >
           <AccordionTrigger>
             <Typography as="code" className="text-lg">
-              How to use string value ?
+              How to use string (text) value ?
             </Typography>
           </AccordionTrigger>
           <AccordionContent>
             <ColInnerContent>
               <Typography as="code">{`Simply enter "string" as the value for any key that you want to be treated as a string.`}</Typography>
+              <Typography
+                as="code"
+                className="text-sm text-white/50"
+              >{`A string is represented by double quotes: ""`}</Typography>
+
               <Typography
                 as="code"
                 className="ml-4 text-white/50"
-              >{`Example: { name: "string" }`}</Typography>
+              >{`Example: { name: "text" }`}</Typography>
             </ColInnerContent>
           </AccordionContent>
         </AccordionItem>
@@ -119,7 +124,7 @@ export default function HowToCreateMetadataSchema() {
               <Typography
                 as="code"
                 className="ml-4 text-white/50"
-              >{`Example: { "name": "string", "age": 0, child: { name: "string", age: 0 }, position: [ [ 0, 1 ] ] }`}</Typography>
+              >{`Example: { "name": "text", "age": 0, child: { name: "text", age: 0 }, position: [ [ 0, 1 ] ] }`}</Typography>
             </ColInnerContent>
           </AccordionContent>
         </AccordionItem>
@@ -152,7 +157,7 @@ export default function HowToCreateMetadataSchema() {
                 <Typography
                   as="code"
                   className="ml-4 text-white/50"
-                >{`Usage: [ "string" ]`}</Typography>
+                >{`Usage: [ "text" ]`}</Typography>
                 <Typography as="code">
                   <strong>number[] –</strong>
                   {` A list of numbers.`}
@@ -172,11 +177,11 @@ export default function HowToCreateMetadataSchema() {
                 <Typography
                   as="code"
                   className="ml-4 text-white/50"
-                >{`Example: [ { src: "string", mediaType: "string" } ]`}</Typography>
+                >{`Example: [ { src: "text", mediaType: "text" } ]`}</Typography>
                 <Typography
                   as="code"
                   className="ml-4 text-white/50"
-                >{`Usage: [ { src: "string", mediaType: "string" } ]`}</Typography>
+                >{`Usage: [ { src: "text", mediaType: "text" } ]`}</Typography>
                 <Typography as="code">
                   <strong>{`<type>`}[][] –</strong>
                   {` A list of arrays of <type> (arrays within arrays)`}
diff --git a/client/src/app/(validator)/summary/components/data-validation.tsx b/client/src/app/(validator)/summary/components/data-validation.tsx
new file mode 100644
index 0000000..ad86e42
--- /dev/null
+++ b/client/src/app/(validator)/summary/components/data-validation.tsx
@@ -0,0 +1,52 @@
+import type { ProjectCollection } from "~/lib/types";
+import { useActiveProject } from "~/providers/active-project.provider";
+
+import { StepComponent, StepHeader } from "./step-components";
+import Stat from "~/components/stat";
+import MessageBox from "~/components/message-box";
+import ValidatorStats from "./validator-stats";
+
+export default function DataValidation() {
+  const activeProject = useActiveProject();
+  const project = activeProject?.toJSON() as ProjectCollection;
+
+  const hasError = !!project.errorsDetected;
+  const hasWarning = !!project.errorsFlagged;
+  const status = hasError ? "error" : hasWarning ? "warning" : "success";
+
+  return (
+    <StepComponent>
+      <StepHeader title="NFTs data validation" step={3} status={status} />
+      <div className="flex flex-row gap-10 p-4">
+        <Stat icon="database" stat={project.nfts}>
+          NFTs in this collection
+        </Stat>
+        <Stat icon="clock" stat={project.unchecked}>
+          NFTs unchecked
+        </Stat>
+        <Stat icon="exclamation" stat={project.errorsDetected} variant="error">
+          Errors detected
+        </Stat>
+        <Stat icon="flag" stat={project.errorsFlagged} variant="warning">
+          Errors flagged
+        </Stat>
+        <Stat icon="check" stat={project.valids} variant="success">
+          Marked as valid
+        </Stat>
+      </div>
+      {hasError && (
+        <MessageBox variant="error">
+          We still detect some errors in this step. Make sure you correct them
+          before exporting your project.
+        </MessageBox>
+      )}
+      {hasWarning && (
+        <MessageBox>
+          We still see some flagged errors in this step. Make sure you check
+          them before exporting your project.
+        </MessageBox>
+      )}
+      <ValidatorStats />
+    </StepComponent>
+  );
+}
diff --git a/client/src/app/(validator)/summary/components/metadata-structure.tsx b/client/src/app/(validator)/summary/components/metadata-structure.tsx
new file mode 100644
index 0000000..a9f8093
--- /dev/null
+++ b/client/src/app/(validator)/summary/components/metadata-structure.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import { JsonEditor } from "json-edit-react";
+
+import { StepComponent, StepHeader } from "./step-components";
+import type { MetadataSchemaCollection, MetadataCollection } from "~/lib/types";
+import { useRxData } from "rxdb-hooks";
+import LoaderComponent from "~/components/loader-component";
+import { getAttributesDistributions } from "~/lib/get/get-attributes-distributions";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "~/components/ui/accordion";
+import { jerTheme } from "~/lib/json-editor";
+import ValuesIcon from "~/icons/values.icon";
+
+export default function MetadataStructure() {
+  const { result, isFetching } = useRxData<MetadataCollection>(
+    "metadata",
+    (collection) => collection.find(),
+  );
+
+  const { result: schemaResult, isFetching: isFetchingSchema } =
+    useRxData<MetadataSchemaCollection>("metadataSchema", (collection) =>
+      collection.find(),
+    );
+
+  if (isFetching || isFetchingSchema) return <LoaderComponent />;
+
+  const metadatas: MetadataCollection[] = result.map(
+    (doc) => doc.toJSON() as MetadataCollection,
+  );
+
+  const schema: MetadataSchemaCollection | undefined = schemaResult.map(
+    (doc) => doc.toJSON() as MetadataSchemaCollection,
+  )[0];
+
+  if (!schema || !metadatas) return <div>No data found.</div>;
+
+  const distribution = getAttributesDistributions(metadatas, schema);
+
+  return (
+    <StepComponent>
+      <StepHeader title="Metadata strucutre" />
+      <Accordion type="single" collapsible>
+        <AccordionItem value="distribution">
+          <AccordionTrigger className="hover:no-underline">
+            <div className="ml-2 flex flex-row items-center gap-4 text-white/60">
+              <div className="items-center justify-center rounded-full border border-white/60 p-2">
+                <ValuesIcon className="h-4 w-4" />
+              </div>
+              {`Value's distribution`}
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="rounded-xl bg-card p-1">
+            <JsonEditor
+              data={distribution}
+              theme={jerTheme}
+              rootFontSize={18}
+              minWidth={"100%"}
+              collapse={1}
+              enableClipboard={false} // Disabled copy to clipboard
+              restrictEdit={() => true} // Disabled edit
+              restrictAdd={() => true} // Disabled add
+              restrictDelete={() => true} // Disabled delete
+            />
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </StepComponent>
+  );
+}
diff --git a/client/src/app/(validator)/summary/components/rules-selection.tsx b/client/src/app/(validator)/summary/components/rules-selection.tsx
new file mode 100644
index 0000000..791e54b
--- /dev/null
+++ b/client/src/app/(validator)/summary/components/rules-selection.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import { StepComponent, StepHeader } from "./step-components";
+import { Typography } from "~/components/typography";
+import { useRxData } from "rxdb-hooks";
+import { type RulesCollection } from "~/lib/types";
+import { useActiveProject } from "~/providers/active-project.provider";
+import LoaderComponent from "~/components/loader-component";
+import { hyphenToTitleCase } from "~/lib/hyphen-to-title-case";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "~/components/ui/accordion";
+import { chunk } from "~/lib/chunk";
+import CodeIcon from "~/icons/code.icon";
+
+export default function RulesSelection() {
+  const activeProject = useActiveProject();
+  const { result, isFetching } = useRxData<RulesCollection>(
+    "rules",
+    (collection) => collection.findByIds([activeProject?.id ?? ""]),
+  );
+
+  if (isFetching) return <LoaderComponent />;
+
+  const rules: RulesCollection | undefined = result.map(
+    (doc) => doc.toJSON() as RulesCollection,
+  )[0];
+
+  if (!rules) return null;
+
+  return (
+    <StepComponent>
+      <StepHeader title="Rules selection" step={2} />
+      <Accordion type="single" collapsible>
+        <AccordionItem value="rules">
+          <AccordionTrigger className="hover:no-underline">
+            <div className="ml-2 flex flex-row items-center gap-4 text-white/60">
+              <div className="items-center justify-center rounded-full border border-white/60 p-2">
+                <CodeIcon className="h-4 w-4" />
+              </div>
+              {`${rules.rules.length} Rule(s) selected for validation`}
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="flex flex-row gap-10 rounded-xl bg-card p-4">
+            {chunk(rules.rules, 4).map((rules, i) => (
+              <ul key={`${i}`}>
+                {rules.map((rule) => (
+                  <li key={rule}>
+                    <Typography>• {hyphenToTitleCase(rule)}</Typography>
+                  </li>
+                ))}
+              </ul>
+            ))}
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </StepComponent>
+  );
+}
diff --git a/client/src/app/(validator)/summary/components/step-components.tsx b/client/src/app/(validator)/summary/components/step-components.tsx
new file mode 100644
index 0000000..6f61749
--- /dev/null
+++ b/client/src/app/(validator)/summary/components/step-components.tsx
@@ -0,0 +1,72 @@
+import { Typography } from "~/components/typography";
+import CheckCircleIcon from "~/icons/check-circle.icon";
+import ExclamationIcon from "~/icons/exclamation.icon";
+import InformationCircle from "~/icons/information-circle";
+import SummaryIcon from "~/icons/summary.icon";
+import { type Status } from "~/lib/types";
+import { cn } from "~/lib/utils";
+
+export function StepComponent({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col gap-4 rounded-xl bg-background p-4">
+      {children}
+    </div>
+  );
+}
+
+export function StepHeader({
+  step = 1,
+  title,
+  status = "success",
+}: {
+  step?: number;
+  title: string;
+  status?: Status;
+}) {
+  return (
+    <>
+      <div className="flex flex-row items-center justify-between px-2">
+        <div className="flex flex-col">
+          <Typography className="text-white/50">{`Step ${step}`}</Typography>
+          <Typography as="h3">{title}</Typography>
+        </div>
+        <StepStatus status={status} />
+      </div>
+      <hr className="border-white/20" />
+    </>
+  );
+}
+
+const statusClassName: Record<Status, string> = {
+  success: "text-success",
+  warning: "text-warning",
+  error: "text-destructive",
+  unchecked: "text-white/50",
+};
+
+const icons: Record<Status, React.ReactNode> = {
+  success: <CheckCircleIcon className="h-8 w-8" />,
+  warning: <InformationCircle className="h-8 w-8" />,
+  error: <ExclamationIcon className="h-8 w-8" />,
+  unchecked: <SummaryIcon className="h-8 w-8" />,
+};
+
+const text: Record<Status, string> = {
+  success: "Validated",
+  warning: "Recommandation",
+  error: "Error detected",
+  unchecked: "Unchecked",
+};
+
+export function StepStatus({ status }: { status: Status }) {
+  return (
+    <Typography
+      className={cn(
+        "flex flex-row items-center gap-4 tracking-wide",
+        statusClassName[status],
+      )}
+    >
+      {text[status]} {icons[status]}
+    </Typography>
+  );
+}
diff --git a/client/src/app/(validator)/summary/components/validator-stats.tsx b/client/src/app/(validator)/summary/components/validator-stats.tsx
new file mode 100644
index 0000000..e25b305
--- /dev/null
+++ b/client/src/app/(validator)/summary/components/validator-stats.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import React from "react";
+import { useRxData } from "rxdb-hooks";
+import Stat from "~/components/stat";
+import { Typography } from "~/components/typography";
+import { getKeyCount } from "~/lib/get/get-key-count";
+import type { ValidationsCollection } from "~/lib/types";
+
+export default function ValidatorStats() {
+  const { result, isFetching } = useRxData<ValidationsCollection>(
+    "validations",
+    (collection) => collection.find(),
+  );
+
+  if (isFetching) return <div>Loading...</div>;
+
+  const validations = result.map(
+    (doc) => doc.toJSON() as ValidationsCollection,
+  );
+
+  const keys = getKeyCount(validations);
+
+  return (
+    <div className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3">
+      {Object.keys(keys.errors).map((key) => (
+        <div
+          key={key}
+          className="flex flex-col items-center gap-4 rounded-xl border border-destructive p-4"
+        >
+          <Stat
+            icon="exclamation"
+            stat={keys.errors[key]?.count ?? 0}
+            variant="error"
+            className="flex-row items-center"
+          >
+            {key}
+          </Stat>
+        </div>
+      ))}
+      {Object.keys(keys.warnings).map((key) => (
+        <div
+          key={key}
+          className="flex flex-col items-center gap-4 rounded-xl border border-warning p-4"
+        >
+          <Stat
+            icon="flag"
+            stat={keys.warnings[key]?.count ?? 0}
+            variant="warning"
+            className="flex-row items-center"
+          >
+            {key}
+          </Stat>
+          <div className="w-full border-b border-border/50" />
+          <Typography className="max-w-[300px] text-warning">
+            {keys.warnings[key]?.message}
+          </Typography>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/client/src/app/(validator)/summary/content.tsx b/client/src/app/(validator)/summary/content.tsx
new file mode 100644
index 0000000..b549a1c
--- /dev/null
+++ b/client/src/app/(validator)/summary/content.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import DataValidation from "./components/data-validation";
+import MetadataStructure from "./components/metadata-structure";
+import RulesSelection from "./components/rules-selection";
+
+export default function Content() {
+  return (
+    <div className="flex flex-col gap-4 rounded-2xl bg-card p-4">
+      <MetadataStructure />
+      <RulesSelection />
+      <DataValidation />
+    </div>
+  );
+}
diff --git a/client/src/app/(validator)/summary/export-button.tsx b/client/src/app/(validator)/summary/export-button.tsx
new file mode 100644
index 0000000..8e74dec
--- /dev/null
+++ b/client/src/app/(validator)/summary/export-button.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { type RxDumpCollection } from "rxdb";
+import { useRxCollection } from "rxdb-hooks";
+
+import { Button } from "~/components/ui/button";
+import CodeIcon from "~/icons/code.icon";
+import type {
+  MetadataCollection,
+  MetatdataJSON,
+  ProjectCollection,
+} from "~/lib/types";
+import { useActiveProject } from "~/providers/active-project.provider";
+
+export default function ExportButton() {
+  const activeProject = useActiveProject();
+  const metadataCollection = useRxCollection<MetadataCollection>("metadata");
+  const project = activeProject?.toJSON() as ProjectCollection;
+
+  const handleExport = async () => {
+    const json = await metadataCollection?.exportJSON(); // Export from RxDB
+    const metadata = formatMetadata(json); // Format to MetadataJSON[]
+    const metadataString = JSON.stringify(metadata, null, "\t"); // Convert the JSON object to a string
+    const blob = new Blob([metadataString], { type: "application/json" }); // Create a Blob from the JSON string
+    const url = URL.createObjectURL(blob); // Create a URL for the Blob object
+    const link = document.createElement("a"); // Create a temporary link element
+    link.href = url; // Append the url to the link element
+    link.download = `${project.name}.json`; // Set the download attribute with the desired file name
+    document.body.appendChild(link); // Append the link to the document
+    link.click(); // Click it to trigger the download
+    document.body.removeChild(link); // Clean up by removing the link
+    URL.revokeObjectURL(url); // Revoking the URL
+  };
+
+  return (
+    <Button className="flex flex-row gap-3" onClick={handleExport}>
+      <CodeIcon /> Export the project
+    </Button>
+  );
+}
+
+const formatMetadata = (
+  JSON: RxDumpCollection<MetadataCollection> | undefined,
+): MetatdataJSON[] => {
+  const documents = JSON?.docs;
+  if (!documents) return [];
+
+  const metadatas = documents.map(
+    ({ assetName, metadata }) =>
+      ({
+        assetName,
+        metadata,
+      }) as unknown as MetatdataJSON,
+  );
+
+  return metadatas;
+};
diff --git a/client/src/app/(validator)/summary/page.tsx b/client/src/app/(validator)/summary/page.tsx
index 2f6808c..b579268 100644
--- a/client/src/app/(validator)/summary/page.tsx
+++ b/client/src/app/(validator)/summary/page.tsx
@@ -1,5 +1,7 @@
 import { Typography } from "~/components/typography";
-import Summary from "./summary";
+
+import ExportButton from "./export-button";
+import Content from "./content";
 
 export default function SummaryPage() {
   return (
@@ -12,10 +14,10 @@ export default function SummaryPage() {
           </Typography>
         </div>
         <div className="flex flex-row items-center gap-4">
-          {/* Add buttons here */}
+          <ExportButton />
         </div>
       </div>
-      <Summary />
+      <Content />
     </div>
   );
 }
diff --git a/client/src/app/(validator)/summary/summary/index.tsx b/client/src/app/(validator)/summary/summary/index.tsx
deleted file mode 100644
index 744c4c0..0000000
--- a/client/src/app/(validator)/summary/summary/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-"use client";
-
-import React from "react";
-import ValidatorStats from "./validator-stats";
-
-export default function Summary() {
-  return (
-    <div className="flex flex-col gap-4 rounded-2xl bg-card p-4">
-      <ValidatorStats />
-    </div>
-  );
-}
diff --git a/client/src/app/(validator)/summary/summary/validator-stats.tsx b/client/src/app/(validator)/summary/summary/validator-stats.tsx
deleted file mode 100644
index 21eca76..0000000
--- a/client/src/app/(validator)/summary/summary/validator-stats.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from "react";
-import { useRxData } from "rxdb-hooks";
-import Stat from "~/components/stat";
-import { Typography } from "~/components/typography";
-import { getKeyCount } from "~/lib/get/get-key-count";
-import type { ValidationsCollection } from "~/lib/types";
-
-export default function ValidatorStats() {
-  const { result, isFetching } = useRxData<ValidationsCollection>(
-    "validations",
-    (collection) => collection.find(),
-  );
-
-  if (isFetching) return <div>Loading...</div>;
-
-  const validations = result.map(
-    (doc) => doc.toJSON() as ValidationsCollection,
-  );
-
-  const keys = getKeyCount(validations);
-
-  return (
-    <div className="flex flex-col gap-4 rounded-xl bg-background p-6">
-      <Typography as="h3">Validator detected</Typography>
-      <div className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3">
-        {Object.keys(keys.errors).map((key) => (
-          <div
-            key={key}
-            className="flex flex-col items-center gap-4 rounded-xl border border-destructive p-4"
-          >
-            <Stat
-              icon="exclamation"
-              stat={keys.errors[key]?.count ?? 0}
-              variant="error"
-              className="flex-row items-center"
-            >
-              {key}
-            </Stat>
-          </div>
-        ))}
-        {Object.keys(keys.warnings).map((key) => (
-          <div
-            key={key}
-            className="flex flex-col items-center gap-4 rounded-xl border border-warning p-4"
-          >
-            <Stat
-              icon="flag"
-              stat={keys.warnings[key]?.count ?? 0}
-              variant="warning"
-              className="flex-row items-center"
-            >
-              {key}
-            </Stat>
-            <div className="w-full border-b border-border/50" />
-            <Typography className="max-w-[300px] text-warning">
-              {keys.warnings[key]?.message}
-            </Typography>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/client/src/components/add-asset-button.tsx b/client/src/components/add-asset-button.tsx
index b9cb7cc..38567cd 100644
--- a/client/src/components/add-asset-button.tsx
+++ b/client/src/components/add-asset-button.tsx
@@ -64,8 +64,9 @@ export default function AddAssetButton() {
 
   return (
     <Button
+      title="Add new asset"
       disabled={isLoading}
-      variant={"ghost"}
+      variant={"outline"}
       className="flex h-[50px] flex-row gap-2 rounded-full !px-4"
       onClick={handleAdd}
     >
diff --git a/client/src/components/status.tsx b/client/src/components/status.tsx
index 06de507..09db3d7 100644
--- a/client/src/components/status.tsx
+++ b/client/src/components/status.tsx
@@ -1,13 +1,14 @@
 "use client";
 
-import React from "react";
-import { Typography } from "./typography";
-import Stat from "./stat";
 import { useActiveProject } from "~/providers/active-project.provider";
+import { type ProjectCollection } from "~/lib/types";
+
+import Stat from "./stat";
+import { Typography } from "./typography";
 
 export const Status = () => {
   const activeProject = useActiveProject();
-  const project = activeProject?._data;
+  const project = activeProject?.toJSON() as ProjectCollection;
 
   if (!activeProject || !project)
     return (
diff --git a/client/src/lib/constant.ts b/client/src/lib/constant.ts
index 77b599a..a60b141 100644
--- a/client/src/lib/constant.ts
+++ b/client/src/lib/constant.ts
@@ -13,16 +13,16 @@ export const keys: Record<Status, keyof ProjectCollection> = {
 };
 
 export const DEFAULT_CIP25_SCHEMA: MetadataCollectionEditor = {
-  assetName: "string",
+  assetName: "text",
   metadata: {
-    name: "string",
-    image: "string",
-    mediaType: "string",
-    description: "string",
+    name: "text",
+    image: "text",
+    mediaType: "text",
+    description: "text",
     files: [
       {
-        src: "string",
-        mediaType: "string",
+        src: "text",
+        mediaType: "text",
       },
     ],
     attributes: {},
diff --git a/client/src/lib/db/initialize.ts b/client/src/lib/db/initialize.ts
index 29174a3..217ebaa 100644
--- a/client/src/lib/db/initialize.ts
+++ b/client/src/lib/db/initialize.ts
@@ -2,11 +2,13 @@ import { createRxDatabase, addRxPlugin } from "rxdb";
 import { observeNewCollections } from "rxdb-hooks";
 import { RxDBQueryBuilderPlugin } from "rxdb/plugins/query-builder";
 import { getRxStorageDexie } from "rxdb/plugins/storage-dexie";
+import { RxDBJsonDumpPlugin } from "rxdb/plugins/json-dump";
 
 import { type MyDatabase } from "~/lib/types";
 
 addRxPlugin(RxDBQueryBuilderPlugin);
 addRxPlugin(observeNewCollections);
+addRxPlugin(RxDBJsonDumpPlugin);
 
 export const initialize = async () => {
   // create RxDB
diff --git a/client/src/lib/get/get-attributes-distributions.ts b/client/src/lib/get/get-attributes-distributions.ts
new file mode 100644
index 0000000..b2a6a29
--- /dev/null
+++ b/client/src/lib/get/get-attributes-distributions.ts
@@ -0,0 +1,35 @@
+import { z } from "zod";
+
+import type { MetadataSchemaCollection, MetadataCollection } from "../types";
+
+const recordSchema = z.record(z.string());
+
+export const getAttributesDistributions = (
+  metadata: MetadataCollection[],
+  schema: MetadataSchemaCollection,
+) => {
+  if (!schema.schema.metadata.attributes) return {};
+
+  const attributeCounts: Record<string, Record<string, number>> = {};
+
+  Object.keys(schema.schema.metadata.attributes).forEach((key) => {
+    attributeCounts[key] = {};
+  });
+
+  metadata.forEach((asset) => {
+    const schemaValidations = recordSchema.safeParse(asset.metadata.attributes);
+
+    if (schemaValidations.success) {
+      const attributes = schemaValidations.data;
+      Object.keys(attributes).forEach((key) => {
+        const value = attributes[key]!;
+        if (attributeCounts[key]) {
+          attributeCounts[key][value] ??= 0; // Initialize
+          attributeCounts[key][value]++; // Increment
+        }
+      });
+    }
+  });
+
+  return attributeCounts;
+};