diff --git a/messages/ku.json b/messages/ku.json
new file mode 100644
index 0000000..6e88cea
--- /dev/null
+++ b/messages/ku.json
@@ -0,0 +1,5 @@
+{
+    "Home": {
+        "title": "hello"
+    }
+}
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
index e8a9b77..7303fe5 100644
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -45,7 +45,7 @@ export default async function RootLayout({
                 />
             </head>
 
-            <body className="bg-primary">
+            <body className="bg-background">
                 <NextIntlClientProvider locale={locale} messages={messages}>
                     <ClientAppProvider>{children}</ClientAppProvider>
                 </NextIntlClientProvider>
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
index a65a831..b634e00 100644
--- a/src/app/[locale]/page.tsx
+++ b/src/app/[locale]/page.tsx
@@ -1,13 +1,13 @@
-import ThemeToggle from "@/components/UI/ThemeToggle";
+import ComponentsConteiner from "@/components/ComponentsConteiner";
 import { useTranslations } from "next-intl";
 
 export default function Home() {
     const t = useTranslations("Home");
     return (
         <main>
-            <ThemeToggle />
             <h1>{t("title")}</h1>
             <p>This project was generated completely offline.</p>
+            <ComponentsConteiner />
         </main>
     );
 }
diff --git a/src/components/ComponentsConteiner.tsx b/src/components/ComponentsConteiner.tsx
new file mode 100644
index 0000000..a472a6b
--- /dev/null
+++ b/src/components/ComponentsConteiner.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { useState } from "react";
+import PrimaryButton from "./buttons/PrimaryButton";
+import ThemeToggle from "./UI/ThemeToggle";
+
+export default function ComponentsConteiner() {
+    const [isLoading, setIsloading] = useState(false);
+    function dummyLoading() {
+        setIsloading(true);
+        setTimeout(() => {
+            setIsloading(false);
+        }, 1500);
+    }
+    return (
+        <div className="flex flex-col items-start gap-2 p-4">
+            <ThemeToggle />
+            <div className="w-36">
+                <PrimaryButton onClick={() => dummyLoading()} loading={isLoading}>
+                    <p>test text</p>
+                </PrimaryButton>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/buttons/PrimaryButton.tsx b/src/components/buttons/PrimaryButton.tsx
new file mode 100644
index 0000000..ae555aa
--- /dev/null
+++ b/src/components/buttons/PrimaryButton.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { AnimatePresence, motion } from "framer-motion";
+import { LoaderPinwheel } from "lucide-react";
+
+type PrimaryButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    loading?: boolean;
+    children: React.ReactNode;
+};
+
+export default function PrimaryButton({ children, loading, className, onClick }: PrimaryButtonProps) {
+    return (
+        <button
+            onClick={onClick}
+            className={cn(
+                "bg-primary flex w-full items-center justify-center overflow-hidden rounded-xl px-4 py-2 text-white",
+                className
+            )}
+        >
+            <AnimatePresence mode="wait">
+                {loading ? (
+                    <motion.div
+                        key={"loading"}
+                        initial={{
+                            opacity: 0,
+                            x: -100,
+                        }}
+                        animate={{
+                            opacity: 1,
+                            x: 0,
+                        }}
+                        exit={{
+                            opacity: 0,
+                            x: -100,
+                        }}
+                    >
+                        <LoaderPinwheel className="animate-spin" />
+                    </motion.div>
+                ) : (
+                    <motion.div
+                        key="content"
+                        initial={{
+                            opacity: 0,
+                            x: 100,
+                        }}
+                        animate={{
+                            opacity: 1,
+                            x: 0,
+                        }}
+                        exit={{
+                            opacity: 0,
+                            x: 100,
+                        }}
+                    >
+                        {children}
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </button>
+    );
+}
diff --git a/src/i18n/direction.ts b/src/i18n/direction.ts
index 5e85339..0af9ff5 100644
--- a/src/i18n/direction.ts
+++ b/src/i18n/direction.ts
@@ -3,6 +3,7 @@ export type Direction = "ltr" | "rtl";
 export const localeDirectionMap: Record<string, Direction> = {
     en: "ltr",
     ar: "rtl",
+    ku: "rtl",
 };
 
 export function getDirection(locale: string): Direction {
diff --git a/src/i18n/routing.ts b/src/i18n/routing.ts
index 4a93171..792e19a 100644
--- a/src/i18n/routing.ts
+++ b/src/i18n/routing.ts
@@ -1,7 +1,7 @@
 import { defineRouting } from "next-intl/routing";
 
 export const routing = defineRouting({
-    locales: ["en", "ar"],
+    locales: ["en", "ar", "ku"],
     defaultLocale: "en",
     localePrefix: "never",
 });
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 330552b..d871290 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -25,12 +25,11 @@ body {
 }
 
 @theme {
-    --color-primary: #cbd5e1;
+    --color-background: #cbd5e1;
     --color-text: #273343;
 
     /* constants */
-    --color-neo-aqua: #16a795;
-    --color-core-red: #ef4444;
+    --color-primary: #16a795;
     --color-warning: #eedd55;
     --color-information: #0ea5e9;
     --color-error: #ef4444;
@@ -38,6 +37,6 @@ body {
 }
 
 [data-theme="dark"] {
-    --color-primary: #273343;
+    --color-background: #273343;
     --color-text: #cbd5e1;
 }
