diff --git a/app/i18n/locales/en/common.json b/app/i18n/locales/en/common.json
index a3b9f089..a607ebe1 100644
--- a/app/i18n/locales/en/common.json
+++ b/app/i18n/locales/en/common.json
@@ -85,5 +85,6 @@
   "tones-enthusiastic": "Enthusiastic",
   "tones-informative": "Informative",
   "tones-funny": "Funny",
-  "table": "Table"
+  "table": "Table",
+  "format-desc": "A generation format is a mode in which Synapsy Write generates text."
 }
diff --git a/app/i18n/locales/fr/common.json b/app/i18n/locales/fr/common.json
index 10df7a7b..d0c90ee5 100644
--- a/app/i18n/locales/fr/common.json
+++ b/app/i18n/locales/fr/common.json
@@ -85,5 +85,6 @@
   "tones-enthusiastic": "Enthousiaste",
   "tones-informative": "Informatif",
   "tones-funny": "Drôle",
-  "table": "Tableau"
+  "table": "Tableau",
+  "format-desc": "Un format de génération est une manière dont Synapsy Write va générer du texte."
 }
diff --git a/components/format-dialog.tsx b/components/format-dialog.tsx
new file mode 100644
index 00000000..95c05aee
--- /dev/null
+++ b/components/format-dialog.tsx
@@ -0,0 +1,72 @@
+"use client";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { useTranslation } from "@/app/i18n/client";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { ScrollArea } from "./ui/scroll-area";
+import formats from "@/lib/formats";
+import { useState } from "react";
+import { DialogClose } from "@radix-ui/react-dialog";
+export default function FormatDialog(props: { lng: string; setVal: Function }) {
+  const { t } = useTranslation(props.lng, "common");
+  const [value, setValue] = useState("");
+
+  return (
+    <Dialog>
+      <DialogTrigger>
+        <Button variant="outline">{t("format")}</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t("select-format")}</DialogTitle>
+          <DialogDescription>{t("format-desc")}</DialogDescription>
+        </DialogHeader>
+        <div>
+          <Input
+            value={value}
+            onChange={(v) => setValue(v.target.value)}
+            placeholder={t("search-formats")}
+          />
+          <ScrollArea className="h-[200px]">
+            {formats.map((category, i) => (
+              <div className="mt-2" key={i}>
+                <p className="text-sm text-muted-foreground">
+                  {t(category.category)}
+                </p>
+                <div className="flex flex-col">
+                  {category.options.map((format, j) => (
+                    <>
+                      {t(format.text)
+                        .toLowerCase()
+                        .match(value.toLowerCase()) ? (
+                        <DialogClose className="items-stretch">
+                          <Button
+                            className="w-full justify-start"
+                            key={j}
+                            onClick={() => props.setVal(format.val)}
+                            variant="ghost"
+                          >
+                            {t(format.text)}
+                          </Button>
+                        </DialogClose>
+                      ) : (
+                        <></>
+                      )}
+                    </>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </ScrollArea>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}