diff --git a/frontend/admin/core/views/core/langs/table/actions/update/content.tsx b/frontend/admin/core/views/core/langs/table/actions/update/content.tsx
index 535a866a9..138c7990b 100644
--- a/frontend/admin/core/views/core/langs/table/actions/update/content.tsx
+++ b/frontend/admin/core/views/core/langs/table/actions/update/content.tsx
@@ -1,6 +1,10 @@
 import { useTranslations } from "next-intl";
 
-import { DialogFooter, DialogTitle } from "@/components/ui/dialog";
+import {
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@/components/ui/dialog";
 import type { ShowCoreLanguages } from "@/graphql/hooks";
 import { Form, FormField } from "@/components/ui/form";
 import { useUpdateLangAdmin } from "./hooks/use-update-lang-admin";
@@ -16,7 +20,9 @@ export const ContentUpdateActionsTableLangsCoreAdmin = ({
 
   return (
     <>
-      <DialogTitle>{t("title", { code })}</DialogTitle>
+      <DialogHeader>
+        <DialogTitle>{t("title", { code })}</DialogTitle>
+      </DialogHeader>
 
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
diff --git a/frontend/admin/core/views/core/plugins/actions/create/content.tsx b/frontend/admin/core/views/core/plugins/actions/create/content.tsx
index 3fd126c51..3c4ed7335 100644
--- a/frontend/admin/core/views/core/plugins/actions/create/content.tsx
+++ b/frontend/admin/core/views/core/plugins/actions/create/content.tsx
@@ -1,6 +1,10 @@
 import { useTranslations } from "next-intl";
 
-import { DialogTitle } from "@/components/ui/dialog";
+import {
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -21,7 +25,9 @@ export const ContentCreateActionPluginAdmin = () => {
 
   return (
     <>
-      <DialogTitle>{t("title")}</DialogTitle>
+      <DialogHeader>
+        <DialogTitle>{t("title")}</DialogTitle>
+      </DialogHeader>
 
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
@@ -112,13 +118,15 @@ export const ContentCreateActionPluginAdmin = () => {
             )}
           />
 
-          <Button
-            disabled={!form.formState.isValid}
-            loading={form.formState.isSubmitting}
-            type="submit"
-          >
-            {tCore("create")}
-          </Button>
+          <DialogFooter>
+            <Button
+              disabled={!form.formState.isValid}
+              loading={form.formState.isSubmitting}
+              type="submit"
+            >
+              {tCore("create")}
+            </Button>
+          </DialogFooter>
         </form>
       </Form>
     </>
diff --git a/frontend/admin/core/views/core/styles/nav/create-edit/create-edit.tsx b/frontend/admin/core/views/core/styles/nav/create-edit/create-edit.tsx
index ba681f0e9..ee7abb2a6 100644
--- a/frontend/admin/core/views/core/styles/nav/create-edit/create-edit.tsx
+++ b/frontend/admin/core/views/core/styles/nav/create-edit/create-edit.tsx
@@ -4,7 +4,11 @@ import {
   useCreateEditNavAdmin,
   type CreateEditNavAdminArgs
 } from "./hooks/use-create-edit-nav-admin";
-import { DialogTitle } from "@/components/ui/dialog";
+import {
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -26,7 +30,9 @@ export const ContentCreateEditNavAdmin = ({ data }: CreateEditNavAdminArgs) => {
 
   return (
     <>
-      <DialogTitle>{data ? t("edit.title") : t("create.title")}</DialogTitle>
+      <DialogHeader>
+        <DialogTitle>{data ? t("edit.title") : t("create.title")}</DialogTitle>
+      </DialogHeader>
 
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
@@ -94,13 +100,15 @@ export const ContentCreateEditNavAdmin = ({ data }: CreateEditNavAdminArgs) => {
             )}
           />
 
-          <Button
-            disabled={!form.formState.isValid}
-            loading={form.formState.isSubmitting}
-            type="submit"
-          >
-            {tCore(data ? "edit" : "create")}
-          </Button>
+          <DialogFooter>
+            <Button
+              disabled={!form.formState.isValid}
+              loading={form.formState.isSubmitting}
+              type="submit"
+            >
+              {tCore(data ? "edit" : "create")}
+            </Button>
+          </DialogFooter>
         </form>
       </Form>
     </>
diff --git a/frontend/admin/core/views/core/styles/themes/actions/create/content.tsx b/frontend/admin/core/views/core/styles/themes/actions/create/content.tsx
index 13ce22ced..66ba1ef5f 100644
--- a/frontend/admin/core/views/core/styles/themes/actions/create/content.tsx
+++ b/frontend/admin/core/views/core/styles/themes/actions/create/content.tsx
@@ -1,6 +1,10 @@
 import { useTranslations } from "next-intl";
 
-import { DialogTitle } from "@/components/ui/dialog";
+import {
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -21,7 +25,9 @@ export const ContentCreateActionThemeAdmin = () => {
 
   return (
     <>
-      <DialogTitle>{t("title")}</DialogTitle>
+      <DialogHeader>
+        <DialogTitle>{t("title")}</DialogTitle>
+      </DialogHeader>
 
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
@@ -83,13 +89,15 @@ export const ContentCreateActionThemeAdmin = () => {
             )}
           />
 
-          <Button
-            disabled={!form.formState.isValid}
-            loading={form.formState.isSubmitting}
-            type="submit"
-          >
-            {tCore("create")}
-          </Button>
+          <DialogFooter>
+            <Button
+              disabled={!form.formState.isValid}
+              loading={form.formState.isSubmitting}
+              type="submit"
+            >
+              {tCore("create")}
+            </Button>
+          </DialogFooter>
         </form>
       </Form>
     </>
diff --git a/frontend/admin/core/views/core/styles/themes/actions/upload/content.tsx b/frontend/admin/core/views/core/styles/themes/actions/upload/content.tsx
index a7bdec0f1..c0e1268ff 100644
--- a/frontend/admin/core/views/core/styles/themes/actions/upload/content.tsx
+++ b/frontend/admin/core/views/core/styles/themes/actions/upload/content.tsx
@@ -3,7 +3,11 @@ import { useTranslations } from "next-intl";
 import { Form, FormField } from "@/components/ui/form";
 import { useThemeUpload } from "./hooks/use-upload-theme";
 import { FilesInput } from "@/components/ui/files/files-input";
-import { DialogFooter, DialogTitle } from "@/components/ui/dialog";
+import {
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 
 export const ContentUploadActionThemeAdmin = () => {
@@ -12,7 +16,9 @@ export const ContentUploadActionThemeAdmin = () => {
 
   return (
     <>
-      <DialogTitle>{t("title")}</DialogTitle>
+      <DialogHeader>
+        <DialogTitle>{t("title")}</DialogTitle>
+      </DialogHeader>
 
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
diff --git a/frontend/admin/core/views/core/styles/themes/table/actions/download/content.tsx b/frontend/admin/core/views/core/styles/themes/table/actions/download/content.tsx
index ea70177f9..353b42561 100644
--- a/frontend/admin/core/views/core/styles/themes/table/actions/download/content.tsx
+++ b/frontend/admin/core/views/core/styles/themes/table/actions/download/content.tsx
@@ -10,7 +10,11 @@ import {
 } from "@/components/ui/form";
 import { useDownloadThemeAdmin } from "./hooks/use-download-theme-admin";
 import { Input } from "@/components/ui/input";
-import { DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import type { ActionsItemThemesAdminProps } from "../actions";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
@@ -111,13 +115,15 @@ export const ContentDownloadThemeActionsAdmin = ({
             </>
           )}
 
-          <Button
-            disabled={!form.formState.isValid}
-            loading={form.formState.isSubmitting}
-            type="submit"
-          >
-            {t("submit")}
-          </Button>
+          <DialogFooter>
+            <Button
+              disabled={!form.formState.isValid}
+              loading={form.formState.isSubmitting}
+              type="submit"
+            >
+              {t("submit")}
+            </Button>
+          </DialogFooter>
         </form>
       </Form>
     </>
diff --git a/frontend/admin/core/views/core/styles/themes/table/actions/edit/content.tsx b/frontend/admin/core/views/core/styles/themes/table/actions/edit/content.tsx
index e11ba52df..669375f46 100644
--- a/frontend/admin/core/views/core/styles/themes/table/actions/edit/content.tsx
+++ b/frontend/admin/core/views/core/styles/themes/table/actions/edit/content.tsx
@@ -2,7 +2,11 @@ import { useTranslations } from "next-intl";
 
 import type { ActionsItemThemesAdminProps } from "../actions";
 import { useEditThemeAdmin } from "./hooks/use-edit-theme-admin";
-import { DialogTitle } from "@/components/ui/dialog";
+import {
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -24,7 +28,9 @@ export const ContentEditThemeActionsAdmin = (
 
   return (
     <>
-      <DialogTitle>{t("edit.title")}</DialogTitle>
+      <DialogHeader>
+        <DialogTitle>{t("edit.title")}</DialogTitle>
+      </DialogHeader>
 
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
@@ -92,13 +98,15 @@ export const ContentEditThemeActionsAdmin = (
             </>
           )}
 
-          <Button
-            disabled={!form.formState.isValid}
-            loading={form.formState.isSubmitting}
-            type="submit"
-          >
-            {tCore("edit")}
-          </Button>
+          <DialogFooter>
+            <Button
+              disabled={!form.formState.isValid}
+              loading={form.formState.isSubmitting}
+              type="submit"
+            >
+              {tCore("edit")}
+            </Button>
+          </DialogFooter>
         </form>
       </Form>
     </>
diff --git a/frontend/admin/core/views/members/groups/create-edit-form/create-edit-form-groups-members-admin.tsx b/frontend/admin/core/views/members/groups/create-edit-form/create-edit-form-groups-members-admin.tsx
index 0704f56dc..bc815f4eb 100644
--- a/frontend/admin/core/views/members/groups/create-edit-form/create-edit-form-groups-members-admin.tsx
+++ b/frontend/admin/core/views/members/groups/create-edit-form/create-edit-form-groups-members-admin.tsx
@@ -2,7 +2,11 @@ import { Suspense, lazy, useState } from "react";
 import { useTranslations } from "next-intl";
 
 import { Tabs } from "@/components/tabs/tabs";
-import { DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@/components/ui/dialog";
 import { Form } from "@/components/ui/form";
 import { Loader } from "@/components/loader/loader";
 import { Button } from "@/components/ui/button";
@@ -78,13 +82,15 @@ export const CreateEditFormGroupsMembersAdmin = ({
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
           <Suspense fallback={<Loader />}>{tabsContent[activeTab]}</Suspense>
 
-          <Button
-            disabled={!form.formState.isValid}
-            loading={form.formState.isSubmitting}
-            type="submit"
-          >
-            {tCore("save")}
-          </Button>
+          <DialogFooter>
+            <Button
+              disabled={!form.formState.isValid}
+              loading={form.formState.isSubmitting}
+              type="submit"
+            >
+              {tCore("save")}
+            </Button>
+          </DialogFooter>
         </form>
       </Form>
     </>
diff --git a/frontend/admin/core/views/members/staff/views/administrators/create-edit-form/create-edit-form.tsx b/frontend/admin/core/views/members/staff/views/administrators/create-edit-form/create-edit-form.tsx
index cf7e735aa..0df06788d 100644
--- a/frontend/admin/core/views/members/staff/views/administrators/create-edit-form/create-edit-form.tsx
+++ b/frontend/admin/core/views/members/staff/views/administrators/create-edit-form/create-edit-form.tsx
@@ -1,6 +1,10 @@
 import { useTranslations } from "next-intl";
 
-import { DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -109,16 +113,18 @@ export const CreateEditFormAdministratorsStaffAdmin = () => {
           )}
         />
 
-        <Button
-          disabled={
-            !form.formState.isValid ||
-            (!form.watch("user") && !form.watch("group"))
-          }
-          loading={form.formState.isSubmitting}
-          type="submit"
-        >
-          {tCore("save")}
-        </Button>
+        <DialogFooter>
+          <Button
+            disabled={
+              !form.formState.isValid ||
+              (!form.watch("user") && !form.watch("group"))
+            }
+            loading={form.formState.isSubmitting}
+            type="submit"
+          >
+            {tCore("save")}
+          </Button>
+        </DialogFooter>
       </form>
     </Form>
   );
diff --git a/frontend/admin/core/views/members/staff/views/moderators/create-edit-form/create-edit-form.tsx b/frontend/admin/core/views/members/staff/views/moderators/create-edit-form/create-edit-form.tsx
index 9b1fd1269..14b838f5d 100644
--- a/frontend/admin/core/views/members/staff/views/moderators/create-edit-form/create-edit-form.tsx
+++ b/frontend/admin/core/views/members/staff/views/moderators/create-edit-form/create-edit-form.tsx
@@ -1,6 +1,10 @@
 import { useTranslations } from "next-intl";
 
-import { DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -109,16 +113,18 @@ export const CreateEditFormModeratorsStaffAdmin = () => {
           )}
         />
 
-        <Button
-          disabled={
-            !form.formState.isValid ||
-            (!form.watch("user") && !form.watch("group"))
-          }
-          loading={form.formState.isSubmitting}
-          type="submit"
-        >
-          {tCore("save")}
-        </Button>
+        <DialogFooter>
+          <Button
+            disabled={
+              !form.formState.isValid ||
+              (!form.watch("user") && !form.watch("group"))
+            }
+            loading={form.formState.isSubmitting}
+            type="submit"
+          >
+            {tCore("save")}
+          </Button>
+        </DialogFooter>
       </form>
     </Form>
   );
diff --git a/frontend/admin/forum/views/forums/create-edit-form/create-edit-form-forum-admin.tsx b/frontend/admin/forum/views/forums/create-edit-form/create-edit-form-forum-admin.tsx
index cc374d157..1a536cccb 100644
--- a/frontend/admin/forum/views/forums/create-edit-form/create-edit-form-forum-admin.tsx
+++ b/frontend/admin/forum/views/forums/create-edit-form/create-edit-form-forum-admin.tsx
@@ -1,7 +1,11 @@
 import { useTranslations } from "next-intl";
 import { Suspense, lazy, useState } from "react";
 
-import { DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@/components/ui/dialog";
 import { useCreateEditFormForumAdmin } from "./hooks/use-create-edit-form-forum-admin";
 import { Form } from "@/components/ui/form";
 import { Tabs } from "@/components/tabs/tabs";
@@ -63,13 +67,15 @@ export const CreateEditFormForumAdmin = () => {
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
           <Suspense fallback={<Loader />}>{tabsContent[activeTab]}</Suspense>
 
-          <Button
-            disabled={!form.formState.isValid}
-            loading={form.formState.isSubmitting}
-            type="submit"
-          >
-            {tCore("save")}
-          </Button>
+          <DialogFooter>
+            <Button
+              disabled={!form.formState.isValid}
+              loading={form.formState.isSubmitting}
+              type="submit"
+            >
+              {tCore("save")}
+            </Button>
+          </DialogFooter>
         </form>
       </Form>
     </>
diff --git a/frontend/components/editor/plugins/emoji.tsx b/frontend/components/editor/plugins/emoji.tsx
index 89f3b5f58..e539f8e80 100644
--- a/frontend/components/editor/plugins/emoji.tsx
+++ b/frontend/components/editor/plugins/emoji.tsx
@@ -10,7 +10,7 @@ import { CONFIG } from "@/config";
 const convertEmoji = (emoji: Emoji[]) => {
   const localStorageSkinToneIndex =
     typeof window !== "undefined"
-      ? localStorage.getItem(CONFIG.editor.skin_tone)
+      ? localStorage.getItem(CONFIG.local_storage.editor_skin_tone)
       : null;
   const result: Map<string, string> = new Map();
 
diff --git a/frontend/components/editor/toolbar/buttons/emoji/content.tsx b/frontend/components/editor/toolbar/buttons/emoji/content.tsx
index 5aee62542..cbe520b83 100644
--- a/frontend/components/editor/toolbar/buttons/emoji/content.tsx
+++ b/frontend/components/editor/toolbar/buttons/emoji/content.tsx
@@ -20,7 +20,7 @@ interface Props {
 
 export const ContentEmojiButtonEditor = ({ setOpen }: Props) => {
   const localStorageSkinToneIndex = localStorage.getItem(
-    CONFIG.editor.skin_tone
+    CONFIG.local_storage.editor_skin_tone
   );
   const [searchValue, setSearchValue] = useState("");
   const [searchResults, setSearchResults] = useState<string[] | null>(null);
diff --git a/frontend/components/editor/toolbar/buttons/emoji/skin-select.tsx b/frontend/components/editor/toolbar/buttons/emoji/skin-select.tsx
index 24db0c536..cef5f2d1a 100644
--- a/frontend/components/editor/toolbar/buttons/emoji/skin-select.tsx
+++ b/frontend/components/editor/toolbar/buttons/emoji/skin-select.tsx
@@ -52,7 +52,10 @@ export const SkinSelectEmojiButtonEditor = ({
             key={item}
             className="flex gap-2"
             onClick={() => {
-              localStorage.setItem(CONFIG.editor.skin_tone, index.toString());
+              localStorage.setItem(
+                CONFIG.local_storage.editor_skin_tone,
+                index.toString()
+              );
               setSkinToneIndex(index);
             }}
           >
diff --git a/frontend/components/icon/input/content/content.tsx b/frontend/components/icon/input/content/content.tsx
index b601ed826..99fdd0b29 100644
--- a/frontend/components/icon/input/content/content.tsx
+++ b/frontend/components/icon/input/content/content.tsx
@@ -37,7 +37,7 @@ export const ContentIconInput = (props: IconInputProps) => {
   const [search, setSearch] = useState("");
   const [activeTab, setActiveTab] = useState<Tab>(Tab.Icon);
   const localStorageSkinToneIndex = localStorage.getItem(
-    CONFIG.editor.skin_tone
+    CONFIG.local_storage.editor_skin_tone
   );
   const [skinToneIndex, setSkinToneIndex] = useState(
     localStorageSkinToneIndex ? +localStorageSkinToneIndex : 0
diff --git a/frontend/config.ts b/frontend/config.ts
index 2ccf573a6..87121e7d1 100644
--- a/frontend/config.ts
+++ b/frontend/config.ts
@@ -5,8 +5,8 @@ const ENVS = {
 
 export const CONFIG = {
   graphql_url: ENVS.graphql_url ?? "http://localhost:8080",
-  editor: {
-    skin_tone: "emoji:skin-tone"
-  },
-  backend_url: ENVS.backend_url ?? "http://localhost:8080"
+  backend_url: ENVS.backend_url ?? "http://localhost:8080",
+  local_storage: {
+    editor_skin_tone: "emoji:skin-tone"
+  }
 };
diff --git a/frontend/hooks/forums/forum/use-wrapper-category-forum.ts b/frontend/hooks/forums/forum/use-wrapper-category-forum.ts
new file mode 100644
index 000000000..ab59b7bd9
--- /dev/null
+++ b/frontend/hooks/forums/forum/use-wrapper-category-forum.ts
@@ -0,0 +1,19 @@
+import {
+  createContext,
+  useContext,
+  type Dispatch,
+  type SetStateAction
+} from "react";
+
+interface Args {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+export const WrapperCategoryForumContext = createContext<Args>({
+  open: true,
+  setOpen: () => {}
+});
+
+export const useWrapperCategoryForum = () =>
+  useContext(WrapperCategoryForumContext);
diff --git a/frontend/themes/1/forum/views/forum/forums/actions/create-topic.tsx b/frontend/themes/1/forum/views/forum/forums/actions/create-topic.tsx
index 3b68c71c0..47b1c8f28 100644
--- a/frontend/themes/1/forum/views/forum/forums/actions/create-topic.tsx
+++ b/frontend/themes/1/forum/views/forum/forums/actions/create-topic.tsx
@@ -1,6 +1,10 @@
 import { useTranslations } from "next-intl";
 
-import { DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@/components/ui/dialog";
 import { TextLanguageInput } from "@/components/text-language-input";
 import {
   Form,
@@ -64,13 +68,15 @@ export const CreateTopic = ({ defaultForumId }: Props) => {
             )}
           />
 
-          <Button
-            disabled={!form.formState.isValid}
-            loading={form.formState.isSubmitting}
-            type="submit"
-          >
-            {tCore("save")}
-          </Button>
+          <DialogFooter>
+            <Button
+              disabled={!form.formState.isValid}
+              loading={form.formState.isSubmitting}
+              type="submit"
+            >
+              {tCore("save")}
+            </Button>
+          </DialogFooter>
         </form>
       </Form>
     </>
diff --git a/frontend/themes/1/forum/views/forum/forums/category.tsx b/frontend/themes/1/forum/views/forum/forums/category.tsx
deleted file mode 100644
index 3da12a7fd..000000000
--- a/frontend/themes/1/forum/views/forum/forums/category.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { ChevronDown } from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import { Link } from "@/i18n";
-import { cn } from "@/functions/classnames";
-import { ItemForum, type ItemForumProps } from "./item/item-forum";
-import type { TextLanguage } from "@/graphql/hooks";
-import { useTextLang } from "@/hooks/core/use-text-lang";
-import { ReadOnlyEditor } from "@/components/editor/read-only/read-only-editor";
-
-interface Props {
-  description: TextLanguage[];
-  id: number;
-  name: TextLanguage[];
-  children?: ItemForumProps[] | null;
-}
-
-export const CategoryForum = ({ children, description, id, name }: Props) => {
-  const { convertNameToLink, convertText } = useTextLang();
-
-  return (
-    <Card>
-      <CardContent className="p-0">
-        <div
-          className={cn("px-6 py-4 flex items-center gap-4 justify-between", {
-            //  'border-b': children && children.length > 0
-          })}
-        >
-          <div>
-            <Link
-              href={`/forum/${convertNameToLink({ id, name })}`}
-              className="font-medium text-foreground no-underline"
-            >
-              {convertText(name)}
-            </Link>
-
-            {description.length > 0 && (
-              <ReadOnlyEditor
-                id={`${id}_description`}
-                className="text-muted-foreground text-sm [&_p]:m-0"
-                value={description}
-              />
-            )}
-          </div>
-
-          {children && children.length > 0 && (
-            <Button
-              className="transition-transform text-muted-foreground hover:text-foreground flex-shrink-0"
-              variant="ghost"
-              size="icon"
-              tooltip=""
-              // onClick={() => setClose(prev => !prev)}
-            >
-              <ChevronDown
-                className={cn("transition-transform", {
-                  //  'transform rotate-90': isClose
-                })}
-              />
-            </Button>
-          )}
-        </div>
-
-        {/* <AnimatePresence initial={false}> */}
-        {/* {!isClose && children && children.length > 0 && ( */}
-        {children &&
-          children.length > 0 &&
-          children.map(child => <ItemForum key={child.id} {...child} />)}
-        {/* </AnimatePresence> */}
-      </CardContent>
-    </Card>
-  );
-};
diff --git a/frontend/themes/1/forum/views/forum/forums/category/category.tsx b/frontend/themes/1/forum/views/forum/forums/category/category.tsx
new file mode 100644
index 000000000..eabe41a18
--- /dev/null
+++ b/frontend/themes/1/forum/views/forum/forums/category/category.tsx
@@ -0,0 +1,64 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Link } from "@/i18n";
+import { cn } from "@/functions/classnames";
+import { ItemForum, type ItemForumProps } from "../item/item-forum";
+import type { TextLanguage } from "@/graphql/hooks";
+import { useTextLang } from "@/hooks/core/use-text-lang";
+import { ReadOnlyEditor } from "@/components/editor/read-only/read-only-editor";
+import { WrapperCategoryForum } from "./wrapper";
+import { ChevronCategoryForumButton } from "./chevron-button";
+import { ChildrenWrapperCategoryForum } from "./children-wrapper";
+
+interface Props {
+  description: TextLanguage[];
+  id: number;
+  name: TextLanguage[];
+  children?: ItemForumProps[] | null;
+}
+
+export const CategoryForum = ({ children, description, id, name }: Props) => {
+  const { convertNameToLink, convertText } = useTextLang();
+
+  return (
+    <WrapperCategoryForum id={id}>
+      <Card>
+        <CardContent className="p-0">
+          <div
+            className={cn("px-6 py-4 flex items-center gap-4 justify-between", {
+              //  'border-b': children && children.length > 0
+            })}
+          >
+            <div>
+              <Link
+                href={`/forum/${convertNameToLink({ id, name })}`}
+                className="font-medium text-foreground no-underline"
+              >
+                {convertText(name)}
+              </Link>
+
+              {description.length > 0 && (
+                <ReadOnlyEditor
+                  id={`${id}_description`}
+                  className="text-muted-foreground text-sm [&_p]:m-0"
+                  value={description}
+                />
+              )}
+            </div>
+
+            {children && children.length > 0 && (
+              <ChevronCategoryForumButton id={id} />
+            )}
+          </div>
+
+          {children && children.length > 0 && (
+            <ChildrenWrapperCategoryForum>
+              {children.map(child => (
+                <ItemForum key={child.id} {...child} />
+              ))}
+            </ChildrenWrapperCategoryForum>
+          )}
+        </CardContent>
+      </Card>
+    </WrapperCategoryForum>
+  );
+};
diff --git a/frontend/themes/1/forum/views/forum/forums/category/chevron-button.tsx b/frontend/themes/1/forum/views/forum/forums/category/chevron-button.tsx
new file mode 100644
index 000000000..b33eaece7
--- /dev/null
+++ b/frontend/themes/1/forum/views/forum/forums/category/chevron-button.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { ChevronDown } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { useWrapperCategoryForum } from "@/hooks/forums/forum/use-wrapper-category-forum";
+import { LOCAL_STORAGE_KEY } from "./wrapper";
+
+interface Props {
+  id: number;
+}
+
+export const ChevronCategoryForumButton = ({ id }: Props) => {
+  const { open, setOpen } = useWrapperCategoryForum();
+
+  return (
+    <Button
+      className="text-muted-foreground hover:text-foreground flex-shrink-0 [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform"
+      variant="ghost"
+      size="icon"
+      data-state={open ? "open" : "closed"}
+      tooltip=""
+      onClick={() => {
+        setOpen(prev => !prev);
+        const currentId = id.toString();
+
+        const prevIds =
+          localStorage.getItem(LOCAL_STORAGE_KEY)?.split(",") || [];
+        const valueToSet = prevIds.includes(currentId)
+          ? prevIds.filter(i => i !== currentId)
+          : [...prevIds, currentId];
+
+        localStorage.setItem(LOCAL_STORAGE_KEY, valueToSet.join(","));
+      }}
+    >
+      <ChevronDown />
+    </Button>
+  );
+};
diff --git a/frontend/themes/1/forum/views/forum/forums/category/children-wrapper.tsx b/frontend/themes/1/forum/views/forum/forums/category/children-wrapper.tsx
new file mode 100644
index 000000000..f775e9512
--- /dev/null
+++ b/frontend/themes/1/forum/views/forum/forums/category/children-wrapper.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import type { ReactNode } from "react";
+
+import { useWrapperCategoryForum } from "@/hooks/forums/forum/use-wrapper-category-forum";
+
+interface Props {
+  children: ReactNode;
+}
+
+export const ChildrenWrapperCategoryForum = ({ children }: Props) => {
+  const { open } = useWrapperCategoryForum();
+
+  return (
+    <AnimatePresence initial={false}>
+      {open && (
+        <motion.div
+          initial="collapsed"
+          animate="open"
+          exit="collapsed"
+          className="overflow-hidden"
+          variants={{
+            open: { opacity: 1, height: "auto" },
+            collapsed: { opacity: 0, height: 0 }
+          }}
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
diff --git a/frontend/themes/1/forum/views/forum/forums/category/wrapper.tsx b/frontend/themes/1/forum/views/forum/forums/category/wrapper.tsx
new file mode 100644
index 000000000..bd35bd52a
--- /dev/null
+++ b/frontend/themes/1/forum/views/forum/forums/category/wrapper.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { useState, type ReactNode, useEffect } from "react";
+
+import { WrapperCategoryForumContext } from "@/hooks/forums/forum/use-wrapper-category-forum";
+
+interface Props {
+  children: ReactNode;
+  id: number;
+}
+
+export const LOCAL_STORAGE_KEY = "forum:category-accordion";
+
+export const WrapperCategoryForum = ({ children, id }: Props) => {
+  const [open, setOpen] = useState(true);
+
+  useEffect(() => {
+    const ids = localStorage.getItem(LOCAL_STORAGE_KEY)?.split(",");
+
+    if (ids?.includes(id.toString())) {
+      setOpen(false);
+    }
+  }, []);
+
+  return (
+    <WrapperCategoryForumContext.Provider value={{ open, setOpen }}>
+      {children}
+    </WrapperCategoryForumContext.Provider>
+  );
+};
diff --git a/frontend/themes/1/forum/views/forum/forums/forums-forum-view.tsx b/frontend/themes/1/forum/views/forum/forums/forums-forum-view.tsx
index b26fec69f..e81fdf7cd 100644
--- a/frontend/themes/1/forum/views/forum/forums/forums-forum-view.tsx
+++ b/frontend/themes/1/forum/views/forum/forums/forums-forum-view.tsx
@@ -1,7 +1,7 @@
 import { useTranslations } from "next-intl";
 
 import type { Forum_Forums__ShowQuery } from "@/graphql/hooks";
-import { CategoryForum } from "./category";
+import { CategoryForum } from "./category/category";
 import { HeaderContent } from "@/components/header-content/header-content";
 
 export interface ForumsForumViewProps {