diff --git a/django_project/frontend/design.fig b/django_project/frontend/design.fig
new file mode 100644
index 0000000..0eb75a2
Binary files /dev/null and b/django_project/frontend/design.fig differ
diff --git a/django_project/frontend/package.json b/django_project/frontend/package.json
index ca2afda..35c719f 100644
--- a/django_project/frontend/package.json
+++ b/django_project/frontend/package.json
@@ -4,12 +4,13 @@
   "private": true,
   "dependencies": {
     "@chakra-ui/icons": "^2.2.4",
-    "@chakra-ui/react": "^3.26.0",
+    "@chakra-ui/react": "^3.27.0",
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@sentry/browser": "^10.7.0",
     "@sentry/react": "^10.7.0",
     "@sentry/tracing": "^7.120.4",
+    "framer-motion": "^12.23.22",
     "maplibre-gl": "^5.7.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
diff --git a/django_project/frontend/src/components/NavBar/index.test.tsx b/django_project/frontend/src/components/NavBar/index.test.tsx
index fecaafa..bcd9c68 100644
--- a/django_project/frontend/src/components/NavBar/index.test.tsx
+++ b/django_project/frontend/src/components/NavBar/index.test.tsx
@@ -35,7 +35,7 @@ describe('Navbar Component', () => {
       // Check if main header element exists
       const header = screen.getByRole('banner');
       expect(header).toBeInTheDocument();
-      expect(header).toHaveStyle({ background: 'var(--chakra-colors-primary-main)' });
+      expect(header).toHaveStyle({ background: 'var(--chakra-colors-primary-500)' });
     });
 
     test('renders heading with correct text and link', () => {
diff --git a/django_project/frontend/src/components/NavBar/index.tsx b/django_project/frontend/src/components/NavBar/index.tsx
index 8ed53b4..537d370 100644
--- a/django_project/frontend/src/components/NavBar/index.tsx
+++ b/django_project/frontend/src/components/NavBar/index.tsx
@@ -10,7 +10,7 @@ function Navbar() {
     throw new Error('error!')
   }
   return (
-    <Box as="header" bg="primary.main" px={4} py={2} shadow="md">
+    <Box as="header" bg="primary.500" px={4} py={2} shadow="md">
       <Box>
         <Heading size="md">
           <Link to="/">Kartoza Django React Base</Link>
diff --git a/django_project/frontend/src/theme/Button.tsx b/django_project/frontend/src/theme/Button.tsx
index 9f90192..a558453 100644
--- a/django_project/frontend/src/theme/Button.tsx
+++ b/django_project/frontend/src/theme/Button.tsx
@@ -4,19 +4,19 @@ export const buttonRecipe = defineRecipe({
   variants: {
     variant: {
       primary: {
-        bg: "primary.main",
+        bg: "primary.500",
         color: "white",
-        _hover: { bg: "secondary.main" }
+        _hover: { bg: "secondary.500" }
       },
       "primary.outline": {
         bg: "white",
-        color: "primary.main",
+        color: "primary.500",
         border: "1px solid",
-        borderColor: "primary.main",
+        borderColor: "primary.500",
         _hover: {
-          bg: "secondary.main",
+          bg: "secondary.500",
           color: "white",
-          borderColor: "secondary.main",
+          borderColor: "secondary.500",
         }
       },
     },
diff --git a/django_project/frontend/src/theme/index.tsx b/django_project/frontend/src/theme/index.tsx
index 44122da..eefef7a 100644
--- a/django_project/frontend/src/theme/index.tsx
+++ b/django_project/frontend/src/theme/index.tsx
@@ -1,17 +1,38 @@
 import { createSystem, defaultConfig } from "@chakra-ui/react"
 import { buttonRecipe } from "./Button";
 
+const COLORS = {
+  primary: {
+    50: { value: "#E3F2FA" },
+    100: { value: "#C1E0F4" },
+    200: { value: "#9FCDEE" },
+    300: { value: "#7CB9E8" },
+    400: { value: "#5AA5E2" },
+    500: { value: "#57A0C7" },
+    600: { value: "#4F91B2" },
+    700: { value: "#477F9D" },
+    800: { value: "#3F6D88" },
+    900: { value: "#375C73" },
+    950: { value: "#2F4B5E" },
+  },
+  secondary: {
+    50: { value: "#FFF6E5" },
+    100: { value: "#FFEDC2" },
+    200: { value: "#FFE29E" },
+    300: { value: "#FFD77A" },
+    400: { value: "#FFCC56" },
+    500: { value: "#ECB44B" },
+    600: { value: "#D69F42" },
+    700: { value: "#BF8B39" },
+    800: { value: "#A97630" },
+    900: { value: "#916226" },
+    950: { value: "#7A501D" },
+  }
+}
 export const kartozaTheme = createSystem(defaultConfig, {
   theme: {
     tokens: {
-      colors: {
-        primary: {
-          main: { value: "#57A0C7" }
-        },
-        secondary: {
-          main: { value: "#ECB44B" }
-        },
-      },
+      colors: COLORS,
     },
     recipes: {
       button: buttonRecipe,