diff --git a/app/(components)/ProjectCard/ProjectCard.tsx b/app/(components)/ProjectCard/ProjectCard.tsx
index 73f7e14..6a0aca8 100644
--- a/app/(components)/ProjectCard/ProjectCard.tsx
+++ b/app/(components)/ProjectCard/ProjectCard.tsx
@@ -10,6 +10,7 @@ import {
   Image,
   Stack,
   Text,
+  useColorModeValue,
 } from "@chakra-ui/react";
 import { ICreator, IProject } from "public/catalog/loader";
 
@@ -18,6 +19,7 @@ export function ProjectCard(props: {
   project: IProject;
   condensed?: boolean;
 }) {
+  const borderColor = useColorModeValue("gray.200", "gray.800");
   return (
     <>
       <Card
@@ -67,7 +69,7 @@ export function ProjectCard(props: {
                     objectFit="cover"
                     objectPosition="center"
                     borderBottom="1px"
-                    borderColor="gray.200"
+                    borderColor={borderColor}
                     position="relative"
                     margin="0px auto"
                     display="block"
diff --git a/app/(domains)/creators/CreatorsProjectsSorter.ts b/app/(domains)/creators/CreatorsProjectsSorter.ts
index 39158cc..c26e8be 100644
--- a/app/(domains)/creators/CreatorsProjectsSorter.ts
+++ b/app/(domains)/creators/CreatorsProjectsSorter.ts
@@ -8,7 +8,14 @@ export const CreatorsProjectSorter = {
       });
     });
 
-    const fariRPGsProjects = ["charge", "dash", "breathless", "firelights"];
+    const fariRPGsProjects = [
+      "breathless",
+      "firelights",
+      "charge rpg",
+      "dash",
+
+      "hopes & dreams",
+    ];
     const fariRecommendedProjects = [
       "blades",
       "lumen",
@@ -35,7 +42,7 @@ export const CreatorsProjectSorter = {
     const currentDateOfTheMonth = new Date().getDate();
     const shuffledFariRecommendedProjects = shuffleWithSeed(
       fariRecommendedProjects,
-      currentDateOfTheMonth
+      currentDateOfTheMonth,
     );
     const featuredProjects = [
       ...fariRPGsProjects,
diff --git a/app/(pages)/browse/page.tsx b/app/(pages)/browse/page.tsx
index 41308dc..9e556c9 100644
--- a/app/(pages)/browse/page.tsx
+++ b/app/(pages)/browse/page.tsx
@@ -1,10 +1,10 @@
 import { ResolvingMetadata } from "next/dist/lib/metadata/types/metadata-interface";
 import { loader } from "public/catalog/loader";
-import Browse from "./page-component";
+import BrowsePage from "./pure";
 
 export async function generateMetadata(
   props: Parameters<typeof Page>[0],
-  parent: ResolvingMetadata
+  parent: ResolvingMetadata,
 ) {
   return {
     title: `Browse - Fari Community`,
@@ -23,5 +23,5 @@ export async function generateMetadata(
 export default async function Page(props: {}) {
   const allCreators = await loader.getAllCreators();
 
-  return <Browse allCreators={allCreators} />;
+  return <BrowsePage allCreators={allCreators} />;
 }
diff --git a/app/(pages)/browse/page-component.tsx b/app/(pages)/browse/pure.tsx
similarity index 96%
rename from app/(pages)/browse/page-component.tsx
rename to app/(pages)/browse/pure.tsx
index 997970b..c3f378d 100644
--- a/app/(pages)/browse/page-component.tsx
+++ b/app/(pages)/browse/pure.tsx
@@ -14,7 +14,7 @@ import { CreatorsProjectSorter } from "app/(domains)/creators/CreatorsProjectsSo
 import { ICreator } from "public/catalog/loader";
 import { useState } from "react";
 
-export default function Browse(props: { allCreators: Array<ICreator> }) {
+export default function BrowsePage(props: { allCreators: Array<ICreator> }) {
   const searchDefaultValue = getClientSideValue(() => {
     const searchParams = new URLSearchParams(location.search);
     return searchParams.get("search") || "";
diff --git a/app/(pages)/creators/[creatorSlug]/page.tsx b/app/(pages)/creators/[creatorSlug]/page.tsx
index 9df4828..0e7139c 100644
--- a/app/(pages)/creators/[creatorSlug]/page.tsx
+++ b/app/(pages)/creators/[creatorSlug]/page.tsx
@@ -1,10 +1,10 @@
 import { ResolvingMetadata } from "next/dist/lib/metadata/types/metadata-interface";
 import { loader } from "public/catalog/loader";
-import { Creator } from "./page-component";
+import { CreatorPage } from "./pure";
 
 export async function generateMetadata(
   props: Parameters<typeof Page>[0],
-  parent: ResolvingMetadata
+  parent: ResolvingMetadata,
 ) {
   const creator = await loader.getCreatorData(props.params.creatorSlug);
 
@@ -38,7 +38,7 @@ export default async function Page(props: {
 
   return (
     <>
-      <Creator creator={creator} projects={projects} />
+      <CreatorPage creator={creator} projects={projects} />
     </>
   );
 }
diff --git a/app/(pages)/creators/[creatorSlug]/projects/[projectSlug]/[pageSlug]/page.tsx b/app/(pages)/creators/[creatorSlug]/projects/[projectSlug]/[pageSlug]/page.tsx
index 20d4e59..19b29d5 100644
--- a/app/(pages)/creators/[creatorSlug]/projects/[projectSlug]/[pageSlug]/page.tsx
+++ b/app/(pages)/creators/[creatorSlug]/projects/[projectSlug]/[pageSlug]/page.tsx
@@ -1,18 +1,18 @@
 import { DocParser } from "app/(domains)/documents/DocParser";
 import { MarkdownParser } from "app/(domains)/markdown/MarkdownParser";
 import { loader } from "public/catalog/loader";
-import { Project } from "../page-component";
+import { ProjectPage } from "../pure";
 
 export async function generateMetadata(props: Parameters<typeof Page>[0]) {
   const creator = await loader.getCreatorData(props.params.creatorSlug);
   const project = await loader.getProjectData(
     props.params.creatorSlug,
-    props.params.projectSlug
+    props.params.projectSlug,
   );
 
   const fileContents = await loader.getProjectMarkdown(
     props.params.creatorSlug,
-    props.params.projectSlug
+    props.params.projectSlug,
   );
 
   const doc = new DocParser({
@@ -23,7 +23,7 @@ export async function generateMetadata(props: Parameters<typeof Page>[0]) {
   const title = `${doc.currentPage.title} - ${project.data.name} - ${creator.data?.name} - Fari Community`;
 
   const currentPageTextContent = MarkdownParser.toPlainText(
-    doc.currentPage.content
+    doc.currentPage.content,
   );
   const description = currentPageTextContent.substring(0, 160) + "...";
 
@@ -58,12 +58,12 @@ export default async function Page(props: {
   const creator = await loader.getCreatorData(props.params.creatorSlug);
   const project = await loader.getProjectData(
     props.params.creatorSlug,
-    props.params.projectSlug
+    props.params.projectSlug,
   );
 
   const fileContents = await loader.getProjectMarkdown(
     props.params.creatorSlug,
-    props.params.projectSlug
+    props.params.projectSlug,
   );
 
   const doc = new DocParser({
@@ -77,7 +77,7 @@ export default async function Page(props: {
 
   return (
     <>
-      <Project creator={creator} project={project} doc={doc} />
+      <ProjectPage creator={creator} project={project} doc={doc} />
     </>
   );
 }
@@ -106,7 +106,7 @@ export async function generateStaticParams() {
       // handle default language
       const fileContents = await loader.getProjectMarkdown(
         creator.creatorSlug,
-        projectSlug
+        projectSlug,
       );
 
       const doc = new DocParser({
diff --git a/app/(pages)/creators/[creatorSlug]/projects/[projectSlug]/page.tsx b/app/(pages)/creators/[creatorSlug]/projects/[projectSlug]/page.tsx
index dd5f7a4..5667a01 100644
--- a/app/(pages)/creators/[creatorSlug]/projects/[projectSlug]/page.tsx
+++ b/app/(pages)/creators/[creatorSlug]/projects/[projectSlug]/page.tsx
@@ -1,12 +1,12 @@
 import { DocParser } from "app/(domains)/documents/DocParser";
 import { loader } from "public/catalog/loader";
-import { Project } from "./page-component";
+import { ProjectPage } from "./pure";
 
 export async function generateMetadata(props: Parameters<typeof Page>[0]) {
   const creator = await loader.getCreatorData(props.params.creatorSlug);
   const project = await loader.getProjectData(
     props.params.creatorSlug,
-    props.params.projectSlug
+    props.params.projectSlug,
   );
 
   const title = `${project.data.name} - ${creator.data?.name} - Fari Community`;
@@ -40,12 +40,12 @@ export default async function Page(props: {
   const creator = await loader.getCreatorData(props.params.creatorSlug);
   const project = await loader.getProjectData(
     props.params.creatorSlug,
-    props.params.projectSlug
+    props.params.projectSlug,
   );
 
   const fileContents = await loader.getProjectMarkdown(
     props.params.creatorSlug,
-    props.params.projectSlug
+    props.params.projectSlug,
   );
 
   const doc = new DocParser({
@@ -59,7 +59,7 @@ export default async function Page(props: {
 
   return (
     <>
-      <Project creator={creator} project={project} doc={doc} />
+      <ProjectPage creator={creator} project={project} doc={doc} />
     </>
   );
 }
diff --git a/app/(pages)/creators/[creatorSlug]/projects/[projectSlug]/page-component.tsx b/app/(pages)/creators/[creatorSlug]/projects/[projectSlug]/pure.tsx
similarity index 99%
rename from app/(pages)/creators/[creatorSlug]/projects/[projectSlug]/page-component.tsx
rename to app/(pages)/creators/[creatorSlug]/projects/[projectSlug]/pure.tsx
index dc11060..76a8380 100644
--- a/app/(pages)/creators/[creatorSlug]/projects/[projectSlug]/page-component.tsx
+++ b/app/(pages)/creators/[creatorSlug]/projects/[projectSlug]/pure.tsx
@@ -53,7 +53,7 @@ import { FaHashtag } from "react-icons/fa";
 import { IoMdDocument } from "react-icons/io";
 import { per } from "../../../../../(domains)/style/per";
 
-export function Project(props: {
+export function ProjectPage(props: {
   creator: ICreator;
   project: IProject;
   doc: IDoc;
@@ -101,7 +101,7 @@ export function Project(props: {
   useEffect(() => {
     const article = document.querySelector("article");
     const headings = article?.querySelectorAll(
-      "h1,h2,h3,h4,h5,h6"
+      "h1,h2,h3,h4,h5,h6",
     ) as unknown as Array<HTMLElement>;
 
     headings?.forEach((heading) => {
@@ -298,7 +298,7 @@ export function Project(props: {
                   <h1>
                     {
                       props.doc.pages.find(
-                        (p) => p.id === props.doc.currentPage.id
+                        (p) => p.id === props.doc.currentPage.id,
                       )?.title
                     }
                   </h1>
@@ -516,7 +516,7 @@ export function Project(props: {
                 )}
               </Box>
             );
-          }
+          },
         )}
         <Box>
           {hasCategories && hasRootPages && (
diff --git a/app/(pages)/creators/[creatorSlug]/page-component.tsx b/app/(pages)/creators/[creatorSlug]/pure.tsx
similarity index 98%
rename from app/(pages)/creators/[creatorSlug]/page-component.tsx
rename to app/(pages)/creators/[creatorSlug]/pure.tsx
index 4b2daeb..5e56b91 100644
--- a/app/(pages)/creators/[creatorSlug]/page-component.tsx
+++ b/app/(pages)/creators/[creatorSlug]/pure.tsx
@@ -16,7 +16,7 @@ import { ProjectCard } from "app/(components)/ProjectCard/ProjectCard";
 import startCase from "lodash/startCase";
 import { ICreator, IProject } from "public/catalog/loader";
 
-export function Creator(props: {
+export function CreatorPage(props: {
   creator: ICreator;
   projects: Array<IProject>;
 }) {
@@ -58,7 +58,7 @@ export function Creator(props: {
                     </TagCloseButton>
                   </Tag>
                 );
-              }
+              },
             )}
           </Stack>
         </Box>
diff --git a/bun.lockb b/bun.lockb
index c1e70f2..7e962b9 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/next.config.js b/next.config.js
index 860b50d..8d7f01b 100644
--- a/next.config.js
+++ b/next.config.js
@@ -4,9 +4,6 @@ const nextConfig = {
   images: {
     unoptimized: true,
   },
-  experimental: {
-    appDir: true,
-  },
 };
 
 module.exports = nextConfig;
diff --git a/package.json b/package.json
index 73ec04b..9d4b042 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -17,40 +17,40 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^2.0.19",
+    "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/next-js": "^2.1.5",
-    "@chakra-ui/react": "^2.6.1",
-    "@emotion/css": "^11.11.0",
-    "@emotion/react": "^11.11.0",
+    "@chakra-ui/react": "^2.8.1",
+    "@emotion/css": "^11.11.2",
+    "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@nikolovlazar/chakra-ui-prose": "^1.2.1",
-    "@types/node": "^20.1.2",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.4",
-    "eslint": "^8.49.0",
-    "eslint-config-next": "^13.4.19",
+    "@types/node": "^20.8.2",
+    "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.10",
+    "eslint": "^8.50.0",
+    "eslint-config-next": "^13.5.4",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
     "lodash": "^4.17.21",
-    "netlify-cli": "^15.0.2",
-    "next": "13.4.1",
-    "prettier": "^2.8.8",
+    "netlify-cli": "^16.5.1",
+    "next": "13.5.4",
+    "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.8.0",
+    "react-icons": "^4.11.0",
     "remarkable": "^2.0.1",
-    "typescript": "5.0.4"
+    "typescript": "5.2.2"
   },
   "author": "",
   "license": "ISC",
   "lint-staged": {
-    "*.{js,ts,tsx}": "eslint --cache --fix",
-    "*.{js,css,md,ts,tsx,json}": "prettier --write"
+    "*.{js,ts,tsx}": "bunx eslint --cache --fix",
+    "*.{js,css,md,ts,tsx,json}": "bunx prettier --write"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.198",
-    "@types/remarkable": "^2.0.3",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.23"
+    "@types/lodash": "^4.14.199",
+    "@types/remarkable": "^2.0.4",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31"
   }
 }
diff --git a/public/catalog/loader.ts b/public/catalog/loader.ts
index 512ecda..1d8f7c6 100644
--- a/public/catalog/loader.ts
+++ b/public/catalog/loader.ts
@@ -6,7 +6,7 @@ export const loader = {
     const fs = await import("fs/promises");
     const files = await fs.readdir(
       path.join(process.cwd(), "public", "catalog", "creators"),
-      { withFileTypes: true }
+      { withFileTypes: true },
     );
     const folders = files.filter((f) => f.isDirectory());
 
@@ -19,11 +19,14 @@ export const loader = {
       const creatorDataLoader: ILoaderFunction<ICreatorData> = await import(
         `./creators/${creatorFolder.name}/index.ts`
       );
+
       data = creatorDataLoader?.default();
+
       data.description =
         data.description ||
         `Find ton of free and open licensed content by ${data?.name} on Fari Community`;
     } catch (error) {}
+
     const name: string = data?.name || startCase(creatorSlug);
     const projects = await this.getCreatorProjects(creatorSlug);
     return {
@@ -40,13 +43,13 @@ export const loader = {
 
     const files = await fs.readdir(
       path.join(process.cwd(), "public", "catalog", "creators"),
-      { withFileTypes: true }
+      { withFileTypes: true },
     );
     const folders = files.filter((f) => f.isDirectory());
     const result = await Promise.all(
       folders.map(async (folder) => {
         return this.getCreatorData(folder.name);
-      })
+      }),
     );
     return result;
   },
@@ -55,26 +58,26 @@ export const loader = {
     const fs = await import("fs/promises");
     const files = await fs.readdir(
       path.join(process.cwd(), "public", "catalog", "creators", creatorSlug),
-      { withFileTypes: true }
+      { withFileTypes: true },
     );
     const folders = files.filter((f) => f.isDirectory());
     const result = await Promise.all(
       folders.map(async (folder) => {
         return this.getProjectData(creatorSlug, folder.name);
-      })
+      }),
     );
     return result;
   },
   async getProjectData(
     creatorSlug: string,
-    projectSlug: string
+    projectSlug: string,
   ): Promise<IProject> {
     const [slug, language] = projectSlug.split(".");
     const fs = await import("fs/promises");
     // load image
     let image: string | undefined = await this.getProjectImage(
       creatorSlug,
-      projectSlug
+      projectSlug,
     );
     // load project
     let data: IProjectData | undefined = undefined;
@@ -92,9 +95,9 @@ export const loader = {
         "catalog",
         "creators",
         creatorSlug,
-        slug
+        slug,
       ),
-      { withFileTypes: true }
+      { withFileTypes: true },
     );
     const otherLanguages = files
       .filter((f) => f.name.endsWith(".md") && f.name !== "index.md")
@@ -125,8 +128,8 @@ export const loader = {
           "creators",
           creatorSlug,
           slug,
-          "image.png"
-        )
+          "image.png",
+        ),
       );
       if (!!pngFile) {
         image = `/catalog/creators/${creatorSlug}/${slug}/image.png`;
@@ -141,8 +144,8 @@ export const loader = {
           "creators",
           creatorSlug,
           slug,
-          "image.jpg"
-        )
+          "image.jpg",
+        ),
       );
       if (!!jpgFile) {
         image = `/catalog/creators/${creatorSlug}/${slug}/image.jpg`;
@@ -161,7 +164,7 @@ export const loader = {
       "creators",
       creatorSlug,
       slug,
-      language ? `${language}.md` : "index.md"
+      language ? `${language}.md` : "index.md",
     );
 
     const fileBuffer = await fs.readFile(directory);