diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..1cc55b9
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,14 @@
+{
+    "plugins": ["prettier-plugin-tailwindcss"],
+
+    "printWidth": 120,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": false,
+    "trailingComma": "es5",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "arrowParens": "always",
+    "endOfLine": "crlf"
+}
diff --git a/README.Docker.md b/README.Docker.md
index e69de29..5ade044 100644
--- a/README.Docker.md
+++ b/README.Docker.md
@@ -0,0 +1 @@
+Hello from docker ReadMe
diff --git a/docker-compose.yaml b/docker-compose.yaml
index 035c945..1f1a010 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -1,16 +1,16 @@
-services:
-  witelflix-front:
-    image: witelflix:${VERSION}
-    container_name: witelflix
-    #        build: #just if we have internet uncomment
-    #            context: .
-    #            dockerfile: Dockerfile
-    ports:
-      - "3000:3000"
-    env_file:
-      - .env
-    restart: unless-stopped
-  #        volumes:
-  #            - .:/app # کل پروژه mount شده به /app در کانتینر
-  #            - /app/node_modules # node_modules داخل کانتینر بماند تا با host override نشود
-  #            - /app/.next # next داخل کانتینر بماند تا با host override نشود
+services:
+    witelflix-front:
+        image: witelflix:${VERSION}
+        container_name: witelflix
+        #        build: #just if we have internet uncomment
+        #            context: .
+        #            dockerfile: Dockerfile
+        ports:
+            - "3000:3000"
+        env_file:
+            - .env
+        restart: unless-stopped
+    #        volumes:
+    #            - .:/app # کل پروژه mount شده به /app در کانتینر
+    #            - /app/node_modules # node_modules داخل کانتینر بماند تا با host override نشود
+    #            - /app/.next # next داخل کانتینر بماند تا با host override نشود
diff --git a/next-env.d.ts b/next-env.d.ts
index c4b7818..9edff1c 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/package.json b/package.json
index 0883285..9b32e57 100644
--- a/package.json
+++ b/package.json
@@ -1,47 +1,48 @@
-{
-  "name": "witelflix",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start"
-  },
-  "dependencies": {
-    "@types/js-cookie": "^3.0.6",
-    "axios": "^1.15.0",
-    "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
-    "date-fns-jalali": "4.1.0-0",
-    "embla-carousel": "^8.6.0",
-    "embla-carousel-autoplay": "^8.6.0",
-    "embla-carousel-react": "^8.6.0",
-    "framer-motion": "^12.38.0",
-    "js-cookie": "^3.0.5",
-    "lucide-react": "^1.8.0",
-    "next": "16.1.6",
-    "next-intl": "^4.9.1",
-    "next-pwa": "^5.6.0",
-    "next-sitemap": "^4.2.3",
-    "next-themes": "^0.4.6",
-    "nextjs-toploader": "^3.9.17",
-    "prettier": "^3.8.2",
-    "prettier-plugin-tailwindcss": "^0.7.2",
-    "radix-ui": "^1.4.3",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "react-hook-form": "^7.72.1",
-    "react-hot-toast": "^2.6.0",
-    "tailwind-merge": "^3.5.0",
-    "tailwind-scrollbar": "^4.0.2",
-    "zustand": "^5.0.12"
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "25.0.10",
-    "@types/react": "19.2.10",
-    "@types/react-dom": "19.2.3",
-    "postcss": "8.5.6",
-    "tailwindcss": "4.1.18",
-    "typescript": "5.9.3"
-  }
-}
\ No newline at end of file
+{
+    "name": "witelflix",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "format": "npx prettier . --write"
+    },
+    "dependencies": {
+        "@types/js-cookie": "^3.0.6",
+        "axios": "^1.15.0",
+        "clsx": "^2.1.1",
+        "date-fns": "^4.1.0",
+        "date-fns-jalali": "4.1.0-0",
+        "embla-carousel": "^8.6.0",
+        "embla-carousel-autoplay": "^8.6.0",
+        "embla-carousel-react": "^8.6.0",
+        "framer-motion": "^12.38.0",
+        "js-cookie": "^3.0.5",
+        "lucide-react": "^1.8.0",
+        "next": "16.1.6",
+        "next-intl": "^4.9.1",
+        "next-pwa": "^5.6.0",
+        "next-sitemap": "^4.2.3",
+        "next-themes": "^0.4.6",
+        "nextjs-toploader": "^3.9.17",
+        "prettier": "^3.8.2",
+        "prettier-plugin-tailwindcss": "^0.7.2",
+        "radix-ui": "^1.4.3",
+        "react": "19.2.4",
+        "react-dom": "19.2.4",
+        "react-hook-form": "^7.72.1",
+        "react-hot-toast": "^2.6.0",
+        "tailwind-merge": "^3.5.0",
+        "tailwind-scrollbar": "^4.0.2",
+        "zustand": "^5.0.12"
+    },
+    "devDependencies": {
+        "@tailwindcss/postcss": "^4.1.18",
+        "@types/node": "25.0.10",
+        "@types/react": "19.2.10",
+        "@types/react-dom": "19.2.3",
+        "postcss": "8.5.6",
+        "tailwindcss": "4.1.18",
+        "typescript": "5.9.3"
+    }
+}
diff --git a/postcss.config.mjs b/postcss.config.mjs
index fa4a1da..e2116ae 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,6 +1,5 @@
-export default {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};
-
+export default {
+    plugins: {
+        "@tailwindcss/postcss": {},
+    },
+};
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index bc0a13e..897d898 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,38 +1,34 @@
-import { ClientAppProvider } from '@/providers/ClientAppProvider'
-import '@/styles/globals.css'
-import type { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Theater of dreams',
-}
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang='en' suppressHydrationWarning>
-      <head>
-        {/* Prevent theme flicker before hydration */}
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-              (function() {
-                try {
-                  const stored = localStorage.getItem('theme');
-                  const theme = stored || 'dark';
-                  document.documentElement.setAttribute('data-theme', theme);
-                } catch (e) {}
-              })();
-            `,
-          }}
-        />
-      </head>
-
-      <body className='bg-primary'>
-        <ClientAppProvider>{children}</ClientAppProvider>
-      </body>
-    </html>
-  )
-}
+import { ClientAppProvider } from "@/providers/ClientAppProvider";
+import "@/styles/globals.css";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Theater of dreams",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <html lang="en" suppressHydrationWarning>
+            <head>
+                {/* Prevent theme flicker before hydration */}
+                <script
+                    dangerouslySetInnerHTML={{
+                        __html: `
+              (function() {
+                try {
+                  const stored = localStorage.getItem('theme');
+                  const theme = stored || 'dark';
+                  document.documentElement.setAttribute('data-theme', theme);
+                } catch (e) {}
+              })();
+            `,
+                    }}
+                />
+            </head>
+
+            <body className="bg-primary">
+                <ClientAppProvider>{children}</ClientAppProvider>
+            </body>
+        </html>
+    );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 67ed058..405f873 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,11 +1,11 @@
-import ThemeToggle from '@/components/UI/ThemeToggle'
-
-export default function Home() {
-  return (
-    <main>
-      <ThemeToggle />
-      <h1>Offline Next.js Template 🚀</h1>
-      <p>This project was generated completely offline.</p>
-    </main>
-  )
-}
+import ThemeToggle from "@/components/UI/ThemeToggle";
+
+export default function Home() {
+    return (
+        <main>
+            <ThemeToggle />
+            <h1>Offline Next.js Template 🚀</h1>
+            <p>This project was generated completely offline.</p>
+        </main>
+    );
+}
diff --git a/src/components/UI/ThemeToggle.tsx b/src/components/UI/ThemeToggle.tsx
index 55ccfd7..3006d1f 100644
--- a/src/components/UI/ThemeToggle.tsx
+++ b/src/components/UI/ThemeToggle.tsx
@@ -1,30 +1,26 @@
-'use client'
-
-import { motion } from 'framer-motion'
-import { Moon, Sun } from 'lucide-react'
-import { useTheme } from 'next-themes'
-
-export default function ThemeToggle() {
-  const { theme, setTheme } = useTheme()
-
-  return (
-    <button
-      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-      className='flex cursor-pointer items-center py-2'
-    >
-      <motion.div
-        key={theme}
-        initial={{ rotate: -90, opacity: 0 }}
-        animate={{ rotate: 0, opacity: 1 }}
-        exit={{ rotate: 90, opacity: 0 }}
-        transition={{ duration: 0.5, ease: 'easeInOut' }}
-      >
-        {theme === 'dark' ? (
-          <Moon className='text-text size-6' />
-        ) : (
-          <Sun className='text-text size-6' />
-        )}
-      </motion.div>
-    </button>
-  )
-}
+"use client";
+
+import { motion } from "framer-motion";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+export default function ThemeToggle() {
+    const { theme, setTheme } = useTheme();
+
+    return (
+        <button
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+            className="flex cursor-pointer items-center py-2"
+        >
+            <motion.div
+                key={theme}
+                initial={{ rotate: -90, opacity: 0 }}
+                animate={{ rotate: 0, opacity: 1 }}
+                exit={{ rotate: 90, opacity: 0 }}
+                transition={{ duration: 0.5, ease: "easeInOut" }}
+            >
+                {theme === "dark" ? <Moon className="text-text size-6" /> : <Sun className="text-text size-6" />}
+            </motion.div>
+        </button>
+    );
+}
diff --git a/src/providers/ClientAppProvider.tsx b/src/providers/ClientAppProvider.tsx
index bd626cc..a43ed8f 100644
--- a/src/providers/ClientAppProvider.tsx
+++ b/src/providers/ClientAppProvider.tsx
@@ -1,44 +1,40 @@
-'use client'
-
-import { AnimatePresence, motion } from 'framer-motion'
-import { ThemeProvider } from 'next-themes'
-import { useEffect, useState } from 'react'
-
-export function ClientAppProvider({ children }: { children: React.ReactNode }) {
-  const [mounted, setMounted] = useState(false)
-
-  // wait for hydration
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  return (
-    <ThemeProvider
-      attribute='data-theme'
-      defaultTheme='dark'
-      enableSystem={false}
-    >
-      <AnimatePresence mode='wait'>
-        {!mounted ? (
-          <motion.div
-            key='splash'
-            className='bg-map-bg flex h-dvh w-dvw items-center justify-center'
-            initial={{ opacity: 1 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-          />
-        ) : (
-          <motion.div
-            key='app'
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.3, ease: 'easeOut' }}
-            className='bg-map-bg'
-          >
-            {children}
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </ThemeProvider>
-  )
-}
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { ThemeProvider } from "next-themes";
+import { useEffect, useState } from "react";
+
+export function ClientAppProvider({ children }: { children: React.ReactNode }) {
+    const [mounted, setMounted] = useState(false);
+
+    // wait for hydration
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    return (
+        <ThemeProvider attribute="data-theme" defaultTheme="dark" enableSystem={false}>
+            <AnimatePresence mode="wait">
+                {!mounted ? (
+                    <motion.div
+                        key="splash"
+                        className="bg-map-bg flex h-dvh w-dvw items-center justify-center"
+                        initial={{ opacity: 1 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                    />
+                ) : (
+                    <motion.div
+                        key="app"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{ duration: 0.3, ease: "easeOut" }}
+                        className="bg-map-bg"
+                    >
+                        {children}
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </ThemeProvider>
+    );
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index c6e4743..330552b 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,43 +1,43 @@
-@import 'tailwindcss';
-
-*,
-*::before,
-*::after,
-*::-webkit-scrollbar {
-  box-sizing: border-box;
-}
-
-* {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  transition:
-    background-color 0.3s ease,
-    color 0.3s ease,
-    border-color 0.3s ease;
-}
-
-*::-webkit-scrollbar {
-  display: none;
-}
-
-body {
-  margin: 0;
-}
-
-@theme {
-  --color-primary: #cbd5e1;
-  --color-text: #273343;
-
-  /* constants */
-  --color-neo-aqua: #16a795;
-  --color-core-red: #ef4444;
-  --color-warning: #eedd55;
-  --color-information: #0ea5e9;
-  --color-error: #ef4444;
-  --color-success: #22c55e;
-}
-
-[data-theme='dark'] {
-  --color-primary: #273343;
-  --color-text: #cbd5e1;
-}
+@import "tailwindcss";
+
+*,
+*::before,
+*::after,
+*::-webkit-scrollbar {
+    box-sizing: border-box;
+}
+
+* {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    transition:
+        background-color 0.3s ease,
+        color 0.3s ease,
+        border-color 0.3s ease;
+}
+
+*::-webkit-scrollbar {
+    display: none;
+}
+
+body {
+    margin: 0;
+}
+
+@theme {
+    --color-primary: #cbd5e1;
+    --color-text: #273343;
+
+    /* constants */
+    --color-neo-aqua: #16a795;
+    --color-core-red: #ef4444;
+    --color-warning: #eedd55;
+    --color-information: #0ea5e9;
+    --color-error: #ef4444;
+    --color-success: #22c55e;
+}
+
+[data-theme="dark"] {
+    --color-primary: #273343;
+    --color-text: #cbd5e1;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 5471d0d..b335611 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,34 +1,28 @@
-{
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./src/*"],
-      "&/*": ["./public/*"]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
-  ],
-  "exclude": ["node_modules"]
-}
+{
+    "compilerOptions": {
+        "target": "ES2017",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "react-jsx",
+        "incremental": true,
+        "plugins": [
+            {
+                "name": "next"
+            }
+        ],
+        "paths": {
+            "@/*": ["./src/*"],
+            "&/*": ["./public/*"]
+        }
+    },
+    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts"],
+    "exclude": ["node_modules"]
+}