diff --git a/public/images/logo.png b/public/images/logo.png
new file mode 100644
index 0000000..6da4ffd
Binary files /dev/null and b/public/images/logo.png differ
diff --git a/src/app/auth/components/LoginStep2.tsx b/src/app/auth/components/LoginStep2.tsx
index 06e838f..6a8b455 100644
--- a/src/app/auth/components/LoginStep2.tsx
+++ b/src/app/auth/components/LoginStep2.tsx
@@ -139,13 +139,13 @@ const LoginStep2: FC = () => {
                 <div className='flex flex-col sm:flex-row items-center justify-between gap-2 sm:gap-0'>
                     <span className='text-[#CCCCCC] text-xs sm:text-sm text-center sm:text-right'>کد فعالسازی را دریافت نکردید؟</span>
                     {countdownValue !== '00:00' ? (
-                        <span className='text-blue-500 font-medium text-xs sm:text-sm'>{countdownValue}</span>
+                        <span className='text-primary font-medium text-xs sm:text-sm'>{countdownValue}</span>
                     ) : (
                         <Button
                             variant={'ghost'}
                             isLoading={isAuthenticationPending}
                             onClick={handleResendOtp}
-                            className='text-blue-500 hover:text-blue-600 cursor-pointer text-xs sm:text-sm font-medium transition-colors'
+                            className='text-primary hover:text-primary/80 cursor-pointer text-xs sm:text-sm font-medium transition-colors'
                         >
                             دوباره امتحان کنید
                         </Button>
diff --git a/src/app/blogs/[id]/page.tsx b/src/app/blogs/[id]/page.tsx
index a632af5..a42c71e 100644
--- a/src/app/blogs/[id]/page.tsx
+++ b/src/app/blogs/[id]/page.tsx
@@ -91,10 +91,10 @@ const BlogDetail: NextPage = () => {
                     <div className="mt-8 pt-6 border-t border-gray-200">
                         <div className="flex items-center gap-2 flex-wrap">
                             <span className="text-gray-600 font-medium">برچسب‌ها:</span>
-                            <span className="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-sm">سامسونگ</span>
-                            <span className="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-sm">گلکسی بوک</span>
-                            <span className="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-sm">لپ‌تاپ</span>
-                            <span className="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-sm">OLED</span>
+                            <span className="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">سامسونگ</span>
+                            <span className="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">گلکسی بوک</span>
+                            <span className="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">لپ‌تاپ</span>
+                            <span className="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">OLED</span>
                         </div>
                     </div>
 
@@ -103,7 +103,7 @@ const BlogDetail: NextPage = () => {
                         <div className="flex items-center justify-between">
                             <div className="flex items-center gap-4">
                                 <span className="text-gray-600 font-medium">اشتراک‌گذاری:</span>
-                                <button className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
+                                <button className="flex items-center gap-2 bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors">
                                     <span>تلگرام</span>
                                 </button>
                                 <button className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors">
@@ -128,9 +128,9 @@ const BlogDetail: NextPage = () => {
 }
 
 export default function BlogDetailWithLayout() {
-  return (
-    <Layout>
-      <BlogDetail />
-    </Layout>
-  )
+    return (
+        <Layout>
+            <BlogDetail />
+        </Layout>
+    )
 }
\ No newline at end of file
diff --git a/src/app/brand/components/BrandProductsCarousel.tsx b/src/app/brand/components/BrandProductsCarousel.tsx
index fb865a6..81eb6c5 100644
--- a/src/app/brand/components/BrandProductsCarousel.tsx
+++ b/src/app/brand/components/BrandProductsCarousel.tsx
@@ -5,6 +5,7 @@ import { Pagination, Navigation } from 'swiper/modules'
 import ProductCard from '@/components/ProductCard'
 import { Product } from '../types/Types'
 import { IProduct } from '@/types/landing.types'
+import { PRIMARY_COLOR } from '@/config/const'
 import 'swiper/css'
 import 'swiper/css/pagination'
 import 'swiper/css/navigation'
@@ -21,7 +22,7 @@ const BrandProductsCarousel: FC<Props> = ({ products, brandName }) => {
                 <h3 className='text-xl font-bold text-gray-800'>محصولات برند {brandName}</h3>
                 <div className='flex items-center gap-2 text-sm text-gray-500'>
                     <span>نمایش محصولات</span>
-                    <div className='w-2 h-2 bg-blue-500 rounded-full'></div>
+                    <div className='w-2 h-2 bg-primary rounded-full'></div>
                 </div>
             </div>
 
@@ -122,12 +123,12 @@ const BrandProductsCarousel: FC<Props> = ({ products, brandName }) => {
         }
         
         .brand-products-swiper .swiper-pagination-bullet-active {
-          background: #3b82f6;
+          background: ${PRIMARY_COLOR};
         }
         
         .brand-products-swiper .swiper-button-next,
         .brand-products-swiper .swiper-button-prev {
-          color: #3b82f6;
+          color: ${PRIMARY_COLOR};
           width: 32px;
           height: 32px;
           margin-top: -16px;
diff --git a/src/app/brand/components/BrandSorts.tsx b/src/app/brand/components/BrandSorts.tsx
index e10cd2e..4653723 100644
--- a/src/app/brand/components/BrandSorts.tsx
+++ b/src/app/brand/components/BrandSorts.tsx
@@ -95,7 +95,7 @@ const BrandSorts: FC<BrandSortsProps> = ({ data }) => {
                         {sortOptions.map((option) => (
                             <div
                                 key={option.key}
-                                className={`px-4 py-3 cursor-pointer text-sm hover:bg-gray-50 ${selectedSort === option.key ? 'text-primary bg-blue-50' : 'text-[#333333]'
+                                className={`px-4 py-3 cursor-pointer text-sm hover:bg-gray-50 ${selectedSort === option.key ? 'text-primary bg-primary/10' : 'text-[#333333]'
                                     }`}
                                 onClick={() => {
                                     handleSortChange(option.key)
diff --git a/src/app/brand/components/Pagination.tsx b/src/app/brand/components/Pagination.tsx
index 7c0a554..8f2fc31 100644
--- a/src/app/brand/components/Pagination.tsx
+++ b/src/app/brand/components/Pagination.tsx
@@ -64,8 +64,8 @@ const Pagination: FC<Props> = ({ currentPage, totalPages, onPageChange }) => {
                             <button
                                 onClick={() => onPageChange(page as number)}
                                 className={`w-10 h-10 rounded-lg text-sm font-medium transition-colors ${currentPage === page
-                                        ? 'bg-blue-600 text-white'
-                                        : 'border border-gray-300 text-gray-700 hover:bg-gray-50'
+                                    ? 'bg-primary text-white'
+                                    : 'border border-gray-300 text-gray-700 hover:bg-gray-50'
                                     }`}
                             >
                                 {page}
diff --git a/src/app/brand/components/ProductFilters.tsx b/src/app/brand/components/ProductFilters.tsx
index 08ac001..3e45eae 100644
--- a/src/app/brand/components/ProductFilters.tsx
+++ b/src/app/brand/components/ProductFilters.tsx
@@ -60,7 +60,7 @@ const ProductFilters: FC<Props> = ({
                                         type='checkbox'
                                         checked={selectedCategories.includes(category._id)}
                                         onChange={() => onCategoryChange(category._id)}
-                                        className='w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500'
+                                        className='w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary'
                                     />
                                     <span className='text-sm text-gray-700 flex-1'>{category.title_fa}</span>
                                     <span className='text-xs text-gray-500'>({category.variants.length})</span>
diff --git a/src/app/cart/components/CartItem.tsx b/src/app/cart/components/CartItem.tsx
index 97c9e08..5458ad2 100644
--- a/src/app/cart/components/CartItem.tsx
+++ b/src/app/cart/components/CartItem.tsx
@@ -8,6 +8,7 @@ import { FC } from 'react'
 import { CartItemType } from '../types/Types'
 import { useUpdateCart, useRemoveFromCart } from '../hooks/useCartData'
 import { toast } from '@/components/Toast'
+import { PRIMARY_COLOR } from '@/config/const';
 
 type Props = {
     noBorder?: boolean
@@ -101,7 +102,7 @@ const CartItem: FC<Props> = (props) => {
                     <div className='flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4'>
                         <div className='flex items-center gap-2.5'>
                             <div className='w-5 sm:w-6 flex-shrink-0'>
-                                <TruckFast size={16} color='blue' className="sm:w-5 sm:h-5" />
+                                <TruckFast size={16} color={PRIMARY_COLOR} className="sm:w-5 sm:h-5" />
                             </div>
                             <div className='text-xs sm:text-sm'>
                                 ارسال از {item.variant.shop.shopName} حداکثر پس از {item.variant.shipmentMethod[0]?.deliveryTime || 3} روز کاری
diff --git a/src/app/compare/page.tsx b/src/app/compare/page.tsx
index a29bb48..8d4747a 100644
--- a/src/app/compare/page.tsx
+++ b/src/app/compare/page.tsx
@@ -99,7 +99,7 @@ const ComparePage: NextPage = () => {
                 <div className='mt-24 px-20'>
                     <div className='flex justify-center items-center min-h-[400px]'>
                         <div className='text-center'>
-                            <div className='animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto'></div>
+                            <div className='animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto'></div>
                             <p className='mt-4 text-gray-600'>در حال بارگذاری...</p>
                         </div>
                     </div>
@@ -201,7 +201,7 @@ const ComparePage: NextPage = () => {
                             <input
                                 type="text"
                                 placeholder="نام یا کد کالا را وارد کنید"
-                                className="w-full px-4 py-3 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                                className="w-full px-4 py-3 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-sm"
                             />
                             <div className="absolute left-3 top-1/2 transform -translate-y-1/2">
                                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
@@ -237,7 +237,7 @@ const ComparePage: NextPage = () => {
                                     </div>
 
                                     {/* متن ذخیره سازی */}
-                                    <div className="text-xs text-blue-600 font-medium">
+                                    <div className="text-xs text-primary font-medium">
                                         ذخیره سازی
                                     </div>
 
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index aaecb56..91d3a5a 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -51,7 +51,7 @@ const ContactPage: NextPage = () => {
                 <div className='mt-12 sm:mt-16 lg:mt-20'>
                     <div className='flex flex-col gap-4 sm:gap-6'>
                         <div className='flex items-center gap-3 text-[#7F7F7F]'>
-                            <div className='bg-blue-500 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center flex-shrink-0'>
+                            <div className='bg-primary w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center flex-shrink-0'>
                                 <Call size={16} className='sm:w-5 sm:h-5' color='white' />
                             </div>
                             <div>
diff --git a/src/app/globals.css b/src/app/globals.css
index 1db13e4..e19c00c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -142,7 +142,7 @@ body {
 }
 @theme {
   --color-border: #e5e5e5;
-  --color-primary: #015699;
+  --color-primary: #da2129;
 }
 
 html {
diff --git a/src/app/home/components/Banners4.tsx b/src/app/home/components/Banners4.tsx
index de259fe..aa23669 100644
--- a/src/app/home/components/Banners4.tsx
+++ b/src/app/home/components/Banners4.tsx
@@ -8,7 +8,7 @@ const Banners4: FC = () => {
 
     return (
         <div className='flex gap-6 h-[340px]'>
-            <div className='flex-1 bg-blue-100 h-full rounded-[10px]'>
+            <div className='flex-1 bg-primary/10 h-full rounded-[10px]'>
                 <Image src={data?.results?.banners?.[3]?.imageUrl as string} height={340} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
             </div>
 
diff --git a/src/app/product/components/PriceHistory.tsx b/src/app/product/components/PriceHistory.tsx
index c6024fa..3d857a7 100644
--- a/src/app/product/components/PriceHistory.tsx
+++ b/src/app/product/components/PriceHistory.tsx
@@ -4,6 +4,7 @@ import { FC, useState } from 'react'
 import { useGetPriceHistory } from '../hooks/useProductData'
 import DefaulModal from '@/components/DefaulModal'
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
+import { PRIMARY_COLOR } from '@/config/const'
 
 interface PriceHistoryProps {
     productId: string
@@ -51,7 +52,7 @@ const PriceHistory: FC<PriceHistoryProps> = ({ productId }) => {
                                         bottom: 20,
                                     }}
                                 >
-                                    <CartesianGrid strokeDasharray="3 3" stroke="#e0e7ff" />
+                                    <CartesianGrid strokeDasharray="3 3" stroke={PRIMARY_COLOR} strokeOpacity={0.2} />
                                     <XAxis
                                         dataKey="date"
                                         fontSize={11}
@@ -79,7 +80,7 @@ const PriceHistory: FC<PriceHistoryProps> = ({ productId }) => {
                                             padding: '12px'
                                         }}
                                         formatter={(value, name) => [
-                                            <span key={name} style={{ color: name === 'selling_price' ? '#2563eb' : '#dc2626', fontWeight: 'bold' }}>
+                                            <span key={name} style={{ color: name === 'selling_price' ? PRIMARY_COLOR : '#dc2626', fontWeight: 'bold' }}>
                                                 {value.toLocaleString()} تومان
                                             </span>,
                                             name === 'selling_price' ? 'قیمت فروش' : 'قیمت خرده'
@@ -94,12 +95,12 @@ const PriceHistory: FC<PriceHistoryProps> = ({ productId }) => {
                                     <Line
                                         type="monotone"
                                         dataKey="selling_price"
-                                        stroke="#2563eb"
+                                        stroke={PRIMARY_COLOR}
                                         strokeWidth={3}
-                                        dot={{ fill: '#2563eb', strokeWidth: 2, r: 5, stroke: '#ffffff' }}
+                                        dot={{ fill: PRIMARY_COLOR, strokeWidth: 2, r: 5, stroke: '#ffffff' }}
                                         activeDot={{
                                             r: 8,
-                                            fill: '#2563eb',
+                                            fill: PRIMARY_COLOR,
                                             stroke: '#ffffff',
                                             strokeWidth: 3,
                                             style: { filter: 'drop-shadow(0 4px 6px rgb(37 99 235 / 0.3))' }
@@ -140,7 +141,7 @@ const PriceHistory: FC<PriceHistoryProps> = ({ productId }) => {
                     {chartData.length > 0 && (
                         <div className='mt-6 flex gap-8 justify-center'>
                             <div className='flex items-center gap-3'>
-                                <div className='w-6 h-1 bg-blue-600 rounded-full'></div>
+                                <div className='w-6 h-1 bg-primary rounded-full'></div>
                                 <span className='text-sm font-medium text-gray-700'>قیمت فروش</span>
                             </div>
                             <div className='flex items-center gap-3'>
diff --git a/src/app/product/components/Questions.tsx b/src/app/product/components/Questions.tsx
index 507e2c5..f22d2f3 100644
--- a/src/app/product/components/Questions.tsx
+++ b/src/app/product/components/Questions.tsx
@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button'
 import { ArrowDown2, MessageQuestion } from 'iconsax-react'
 import { Product, Question } from '@/types/product.types'
 import AddQuestion from './AddQuestion'
+import { PRIMARY_COLOR } from '@/config/const'
 
 interface QuestionsProps {
     product: Product
@@ -100,7 +101,7 @@ const Questions: FC<QuestionsProps> = ({ questions = [] }) => {
                                                         className="mt-3 flex items-center gap-1 text-xs text-primary"
                                                     >
                                                         {expandedId === question._id ? 'بستن پاسخ‌ها' : 'مشاهده پاسخ های دیگر'}
-                                                        <ArrowDown2 size={12} color="blue" className={expandedId === question._id ? 'rotate-180 transition' : 'transition sm:w-[14px] sm:h-[14px]'} />
+                                                        <ArrowDown2 size={12} color={PRIMARY_COLOR} className={expandedId === question._id ? 'rotate-180 transition' : 'transition sm:w-[14px] sm:h-[14px]'} />
                                                     </button>
                                                 )}
                                             </div>
diff --git a/src/app/product/components/ShopInformation.tsx b/src/app/product/components/ShopInformation.tsx
index 1d87107..666e963 100644
--- a/src/app/product/components/ShopInformation.tsx
+++ b/src/app/product/components/ShopInformation.tsx
@@ -6,6 +6,7 @@ import React from 'react'
 import { Product } from '@/types/product.types'
 import Image from 'next/image'
 import Cart from './Cart'
+import { PRIMARY_COLOR } from '@/config/const'
 
 interface ShopInformationProps {
     product: Product
@@ -68,13 +69,13 @@ const ShopInformation = ({ product }: ShopInformationProps) => {
 
             <div className='mt-6 border-b border-border pb-4'>
                 <div className='flex gap-4 text-sm font-light'>
-                    <BoxTick size={20} color='blue' />
+                    <BoxTick size={20} color={PRIMARY_COLOR} />
                     <div className='text-[#999999]'>ارسال از {shop.shopName} حداکثر پس از {postingTime} روز کاری</div>
                 </div>
             </div>
 
             <div className='flex gap-4 text-sm font-light border-b border-border pb-4 mt-4'>
-                <I3DRotate size={20} color='blue' />
+                <I3DRotate size={20} color={PRIMARY_COLOR} />
                 <div className='text-primary'>گارانتی اصالت و سلامت فیزیکی کالا</div>
             </div>
 
diff --git a/src/app/products/components/Sorts.tsx b/src/app/products/components/Sorts.tsx
index aa73052..c0581ff 100644
--- a/src/app/products/components/Sorts.tsx
+++ b/src/app/products/components/Sorts.tsx
@@ -95,7 +95,7 @@ const Sorts: FC<SortsProps> = ({ data }) => {
                         {sortOptions.map((option) => (
                             <div
                                 key={option.key}
-                                className={`px-4 py-3 cursor-pointer text-sm hover:bg-gray-50 ${selectedSort === option.key ? 'text-primary bg-blue-50' : 'text-[#333333]'
+                                className={`px-4 py-3 cursor-pointer text-sm hover:bg-gray-50 ${selectedSort === option.key ? 'text-primary bg-primary/10' : 'text-[#333333]'
                                     }`}
                                 onClick={() => {
                                     handleSortChange(option.key)
diff --git a/src/app/profile/components/AddressModal.tsx b/src/app/profile/components/AddressModal.tsx
index 5fa2a42..f91ff45 100644
--- a/src/app/profile/components/AddressModal.tsx
+++ b/src/app/profile/components/AddressModal.tsx
@@ -251,7 +251,7 @@ const AddressModal: React.FC<AddressModalProps> = ({
 
             {/* Selected Location Display */}
             {selectedLocation && (
-                <div className="mt-4 p-4 bg-gradient-to-r from-green-50 to-blue-50 rounded-lg border border-green-200">
+                <div className="mt-4 p-4 bg-gradient-to-r from-green-50 to-primary/10 rounded-lg border border-green-200">
                     <div className="flex items-start gap-3">
                         <div className="flex-shrink-0 mt-0.5">
                             <TickCircle size={20} className="text-green-600" />
@@ -287,7 +287,7 @@ const AddressModal: React.FC<AddressModalProps> = ({
                 </Button>
                 <Button
                     onClick={handleNextStep}
-                    className="w-full sm:w-auto bg-blue-600 hover:bg-blue-700 order-1 sm:order-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                    className="w-full sm:w-auto bg-primary hover:bg-primary/90 order-1 sm:order-2 disabled:opacity-50 disabled:cursor-not-allowed"
                     disabled={!selectedLocation}
                 >
                     مرحله بعد
@@ -313,7 +313,7 @@ const AddressModal: React.FC<AddressModalProps> = ({
                     </label>
                     <textarea
                         {...register('address', { required: 'آدرس کامل الزامی است' })}
-                        className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+                        className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent resize-none"
                         rows={4}
                         placeholder="آدرس کامل خود را وارد کنید"
                     />
@@ -400,7 +400,7 @@ const AddressModal: React.FC<AddressModalProps> = ({
                 </Button>
                 <Button
                     type="submit"
-                    className="w-full sm:w-auto bg-blue-600 hover:bg-blue-700 order-1 sm:order-3 disabled:opacity-50 disabled:cursor-not-allowed"
+                    className="w-full sm:w-auto bg-primary hover:bg-primary/90 order-1 sm:order-3 disabled:opacity-50 disabled:cursor-not-allowed"
                     disabled={isSubmitting || updateAddressMutation.isPending}
                 >
                     <TickCircle color='white' size={16} className="ml-1" />
diff --git a/src/app/profile/orders/[id]/components/CancelOrderModal.tsx b/src/app/profile/orders/[id]/components/CancelOrderModal.tsx
index cd5abb7..dc117d6 100644
--- a/src/app/profile/orders/[id]/components/CancelOrderModal.tsx
+++ b/src/app/profile/orders/[id]/components/CancelOrderModal.tsx
@@ -99,9 +99,9 @@ const CancelOrderModal: React.FC<CancelOrderModalProps> = ({
                     )}
                 </div>
 
-                <div className='flex gap-2 text-xs text-[#7F7F7F] mt-4 p-3 bg-blue-50 rounded-lg'>
-                    <div className="size-5 bg-blue-100 rounded-full flex items-center justify-center">
-                        <span className="text-blue-600 text-xs">!</span>
+                <div className='flex gap-2 text-xs text-[#7F7F7F] mt-4 p-3 bg-primary/10 rounded-lg'>
+                    <div className="size-5 bg-primary/20 rounded-full flex items-center justify-center">
+                        <span className="text-primary text-xs">!</span>
                     </div>
                     <span>
                         توجه داشته باشید که بعد از ثبت لغو سفارش طبق
diff --git a/src/app/profile/orders/[id]/components/OrderProductItem.tsx b/src/app/profile/orders/[id]/components/OrderProductItem.tsx
index f4e7b65..b5c0e8d 100644
--- a/src/app/profile/orders/[id]/components/OrderProductItem.tsx
+++ b/src/app/profile/orders/[id]/components/OrderProductItem.tsx
@@ -64,7 +64,7 @@ const OrderProductItem: React.FC<OrderProductItemProps> = ({ item, shipperName,
                     </div>
 
                     <div className='flex gap-3 items-center'>
-                        <Truck size={20} className="text-blue-500" />
+                        <Truck size={20} className="text-primary" />
                         <div>
                             {shipperName}
                         </div>
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index b035d75..261a80c 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -163,7 +163,7 @@ const ProfilePage = () => {
                                         <Button
                                             type="submit"
                                             disabled={isSubmitting || updateProfileMutation.isPending}
-                                            className="px-6 sm:px-8 bg-blue-600 hover:bg-blue-700 text-sm sm:text-base"
+                                            className="px-6 sm:px-8 bg-primary hover:bg-primary/90 text-sm sm:text-base"
                                         >
                                             {isSubmitting || updateProfileMutation.isPending ? 'در حال ذخیره...' : 'ذخیره تغییرات'}
                                         </Button>
diff --git a/src/components/CartControls.tsx b/src/components/CartControls.tsx
index 82681f1..0b8148d 100644
--- a/src/components/CartControls.tsx
+++ b/src/components/CartControls.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { PRIMARY_COLOR } from "@/config/const";
 import { Add, Minus, Trash } from "iconsax-react";
 import React from "react";
 
@@ -18,7 +19,6 @@ export default function CartControls(props: CartControlsProps) {
     const canDecrement = quantity > min;
     const canIncrement = typeof max === "number" ? quantity < max : true;
 
-    const orange = "blue";
 
     return (
         <div className={"flex items-center gap-2 sm:gap-4 " + (className ?? "")}>
@@ -30,9 +30,9 @@ export default function CartControls(props: CartControlsProps) {
                     disabled={!canIncrement}
                     aria-label="increase quantity"
                 >
-                    <Add size={18} color={orange} className="sm:w-5 sm:h-5" />
+                    <Add size={18} color={PRIMARY_COLOR} className="sm:w-5 sm:h-5" />
                 </button>
-                <span className="text-sm sm:text-[18px] font-medium" style={{ color: orange }}>
+                <span className="text-sm sm:text-[18px] font-medium" style={{ color: PRIMARY_COLOR }}>
                     {quantity}
                 </span>
                 <button
@@ -42,7 +42,7 @@ export default function CartControls(props: CartControlsProps) {
                     disabled={!canDecrement}
                     aria-label="decrease quantity"
                 >
-                    <Minus size={18} color={orange} className="sm:w-5 sm:h-5" />
+                    <Minus size={18} color={PRIMARY_COLOR} className="sm:w-5 sm:h-5" />
                 </button>
             </div>
 
diff --git a/src/config/const.ts b/src/config/const.ts
index 576fa4c..fb72f0e 100644
--- a/src/config/const.ts
+++ b/src/config/const.ts
@@ -3,4 +3,4 @@ export const REFRESH_TOKEN_NAME = "sh_refresh_token";
 export const BASE_URL = "https://shop-api.dev.danakcorp.com";
 // export const BASE_URL = "http://192.168.1.111:4000";
 
-export const PRIMARY_COLOR = "#015699";
+export const PRIMARY_COLOR = "#DA2129";
diff --git a/src/share/Header.tsx b/src/share/Header.tsx
index 977b089..c121d0b 100644
--- a/src/share/Header.tsx
+++ b/src/share/Header.tsx
@@ -8,6 +8,7 @@ import { useSharedStore } from './store/sharedStore'
 import { getToken } from '@/config/func'
 import Account from './components/Account'
 import Cart from './components/Cart'
+import Image from 'next/image'
 
 const Header: FC = () => {
 
@@ -40,7 +41,15 @@ const Header: FC = () => {
                     </div>
 
                     <div className='flex gap-2 sm:gap-4 md:gap-[30px] items-center flex-1 md:flex-none'>
-                        <div className='text-base sm:text-lg font-bold text-purple-600'>LOGO</div>
+                        <div>
+                            <Image
+                                src='/images/logo.png'
+                                alt='logo'
+                                width={100}
+                                height={100}
+                                className='max-w-[100px] w-[100px] max-h-[40px] object-contain'
+                            />
+                        </div>
                         <Input
                             className='hidden md:block w-[300px] lg:w-[500px]'
                             variant='search'