diff --git a/app/src/main/res/layout/activity_cow_selection.xml b/app/src/main/res/layout/activity_cow_selection.xml
index 3085b17..6aa1cf7 100644
--- a/app/src/main/res/layout/activity_cow_selection.xml
+++ b/app/src/main/res/layout/activity_cow_selection.xml
@@ -4,13 +4,13 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
-    android:background="#FFFFFF">
+    android:background="@color/surface_background">
 
     <androidx.appcompat.widget.Toolbar
         android:id="@+id/toolbar"
         android:layout_width="match_parent"
         android:layout_height="?attr/actionBarSize"
-        android:background="#FFFFFF"
+        android:background="@color/surface_background"
         app:navigationIcon="@drawable/ic_round_back_button">
 
         <TextView
@@ -20,7 +20,7 @@
             android:text="Cow Selection"
             android:textSize="20sp"
             android:textStyle="bold"
-            android:textColor="#3E2723"/>
+            android:textColor="@color/text_primary"/>
 
     </androidx.appcompat.widget.Toolbar>
 
@@ -42,7 +42,7 @@
                 android:text="Add Cow Details"
                 android:textSize="24sp"
                 android:textStyle="bold"
-                android:textColor="#3E2723"
+                android:textColor="@color/text_primary"
                 android:layout_marginBottom="24dp"/>
 
             <!-- Form Fields -->
@@ -52,7 +52,7 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="Species"
-                android:textColor="#5D4037"
+                android:textColor="@color/text_secondary"
                 android:layout_marginBottom="4dp"/>
 
             <com.google.android.material.textfield.TextInputLayout
@@ -65,13 +65,14 @@
                 app:boxCornerRadiusTopEnd="12dp"
                 app:boxCornerRadiusBottomStart="12dp"
                 app:boxCornerRadiusBottomEnd="12dp"
-                app:boxStrokeColor="#6D4C41">
+                app:boxStrokeColor="@color/text_tertiary">
 
                 <AutoCompleteTextView
                     android:id="@+id/spinnerSpecies"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:inputType="none"/>
+                    android:inputType="none"
+                    android:textColor="@color/text_primary"/>
             </com.google.android.material.textfield.TextInputLayout>
 
             <TextView
@@ -79,7 +80,7 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="Breed"
-                android:textColor="#5D4037"
+                android:textColor="@color/text_secondary"
                 android:layout_marginBottom="4dp"/>
 
             <com.google.android.material.textfield.TextInputLayout
@@ -92,13 +93,14 @@
                 app:boxCornerRadiusTopEnd="12dp"
                 app:boxCornerRadiusBottomStart="12dp"
                 app:boxCornerRadiusBottomEnd="12dp"
-                app:boxStrokeColor="#6D4C41">
+                app:boxStrokeColor="@color/text_tertiary">
 
                 <AutoCompleteTextView
                     android:id="@+id/spinnerBreed"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:inputType="none"/>
+                    android:inputType="none"
+                    android:textColor="@color/text_primary"/>
             </com.google.android.material.textfield.TextInputLayout>
 
             <LinearLayout
@@ -120,7 +122,7 @@
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:text="Age (Years)"
-                        android:textColor="#5D4037"
+                        android:textColor="@color/text_secondary"
                         android:layout_marginBottom="4dp"/>
 
                     <com.google.android.material.textfield.TextInputLayout
@@ -132,13 +134,14 @@
                         app:boxCornerRadiusTopEnd="12dp"
                         app:boxCornerRadiusBottomStart="12dp"
                         app:boxCornerRadiusBottomEnd="12dp"
-                        app:boxStrokeColor="#6D4C41">
+                        app:boxStrokeColor="@color/text_tertiary">
 
                         <com.google.android.material.textfield.TextInputEditText
                             android:id="@+id/etAge"
                             android:layout_width="match_parent"
                             android:layout_height="wrap_content"
-                            android:inputType="number"/>
+                            android:inputType="number"
+                            android:textColor="@color/text_primary"/>
                     </com.google.android.material.textfield.TextInputLayout>
                 </LinearLayout>
 
@@ -154,7 +157,7 @@
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:text="Milk Yield (L)"
-                        android:textColor="#5D4037"
+                        android:textColor="@color/text_secondary"
                         android:layout_marginBottom="4dp"/>
 
                     <com.google.android.material.textfield.TextInputLayout
@@ -166,12 +169,13 @@
                         app:boxCornerRadiusTopEnd="12dp"
                         app:boxCornerRadiusBottomStart="12dp"
                         app:boxCornerRadiusBottomEnd="12dp"
-                        app:boxStrokeColor="#6D4C41">
+                        app:boxStrokeColor="@color/text_tertiary">
 
                         <com.google.android.material.textfield.TextInputEditText
                             android:layout_width="match_parent"
                             android:layout_height="wrap_content"
-                            android:inputType="numberDecimal"/>
+                            android:inputType="numberDecimal"
+                            android:textColor="@color/text_primary"/>
                     </com.google.android.material.textfield.TextInputLayout>
                 </LinearLayout>
             </LinearLayout>
@@ -181,7 +185,7 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="Calving Number"
-                android:textColor="#5D4037"
+                android:textColor="@color/text_secondary"
                 android:layout_marginBottom="4dp"/>
 
             <com.google.android.material.textfield.TextInputLayout
@@ -194,12 +198,13 @@
                 app:boxCornerRadiusTopEnd="12dp"
                 app:boxCornerRadiusBottomStart="12dp"
                 app:boxCornerRadiusBottomEnd="12dp"
-                app:boxStrokeColor="#6D4C41">
+                app:boxStrokeColor="@color/text_tertiary">
 
                 <com.google.android.material.textfield.TextInputEditText
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:inputType="number"/>
+                    android:inputType="number"
+                    android:textColor="@color/text_primary"/>
             </com.google.android.material.textfield.TextInputLayout>
 
             <TextView
@@ -207,7 +212,7 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="Reproductive Status"
-                android:textColor="#5D4037"
+                android:textColor="@color/text_secondary"
                 android:layout_marginBottom="8dp"/>
 
             <RadioGroup
@@ -222,20 +227,23 @@
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:text="Pregnant"
-                    android:layout_marginEnd="16dp"/>
+                    android:layout_marginEnd="16dp"
+                    android:textColor="@color/text_primary"/>
 
                 <RadioButton
                     android:id="@+id/rbCalved"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:text="Calved"
-                    android:layout_marginEnd="16dp"/>
+                    android:layout_marginEnd="16dp"
+                    android:textColor="@color/text_primary"/>
 
                 <RadioButton
                     android:id="@+id/rbNone"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                    android:text="None"/>
+                    android:text="None"
+                    android:textColor="@color/text_primary"/>
             </RadioGroup>
             
             <TextView
@@ -243,7 +251,7 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="Description"
-                android:textColor="#5D4037"
+                android:textColor="@color/text_secondary"
                 android:layout_marginBottom="4dp"/>
 
             <com.google.android.material.textfield.TextInputLayout
@@ -256,13 +264,14 @@
                 app:boxCornerRadiusTopEnd="12dp"
                 app:boxCornerRadiusBottomStart="12dp"
                 app:boxCornerRadiusBottomEnd="12dp"
-                app:boxStrokeColor="#6D4C41">
+                app:boxStrokeColor="@color/text_tertiary">
 
                 <com.google.android.material.textfield.TextInputEditText
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:inputType="textMultiLine"
-                    android:minLines="3"/>
+                    android:minLines="3"
+                    android:textColor="@color/text_primary"/>
             </com.google.android.material.textfield.TextInputLayout>
 
             <!-- Upload Photos -->
@@ -273,7 +282,7 @@
                 android:text="Upload Photos"
                 android:textSize="18sp"
                 android:textStyle="bold"
-                android:textColor="#3E2723"
+                android:textColor="@color/text_primary"
                 android:layout_marginBottom="16dp"/>
 
             <GridLayout
@@ -299,21 +308,21 @@
                         android:layout_height="match_parent"
                         android:orientation="vertical"
                         android:gravity="center"
-                        android:background="#F5F5F5"
+                        android:background="@color/input_background"
                         android:clickable="true"
                         android:focusable="true">
                         <ImageView
                             android:layout_width="24dp"
                             android:layout_height="24dp"
                             android:src="@android:drawable/ic_menu_camera"
-                            app:tint="#5D4037"/>
+                            app:tint="@color/icon_tint_primary"/>
                         <TextView
                             android:id="@+id/tvFrontView"
                             android:layout_width="wrap_content"
                             android:layout_height="wrap_content"
                             android:text="Front View"
                             android:textSize="12sp"
-                            android:textColor="#5D4037"
+                            android:textColor="@color/text_secondary"
                             android:layout_marginTop="4dp"/>
                     </LinearLayout>
                 </androidx.cardview.widget.CardView>
@@ -332,21 +341,21 @@
                         android:layout_height="match_parent"
                         android:orientation="vertical"
                         android:gravity="center"
-                        android:background="#F5F5F5"
+                        android:background="@color/input_background"
                         android:clickable="true"
                         android:focusable="true">
                         <ImageView
                             android:layout_width="24dp"
                             android:layout_height="24dp"
                             android:src="@android:drawable/ic_menu_camera"
-                            app:tint="#5D4037"/>
+                            app:tint="@color/icon_tint_primary"/>
                         <TextView
                             android:id="@+id/tvRearView"
                             android:layout_width="wrap_content"
                             android:layout_height="wrap_content"
                             android:text="Rear View"
                             android:textSize="12sp"
-                            android:textColor="#5D4037"
+                            android:textColor="@color/text_secondary"
                             android:layout_marginTop="4dp"/>
                     </LinearLayout>
                 </androidx.cardview.widget.CardView>
@@ -365,21 +374,21 @@
                         android:layout_height="match_parent"
                         android:orientation="vertical"
                         android:gravity="center"
-                        android:background="#F5F5F5"
+                        android:background="@color/input_background"
                         android:clickable="true"
                         android:focusable="true">
                         <ImageView
                             android:layout_width="24dp"
                             android:layout_height="24dp"
                             android:src="@android:drawable/ic_menu_camera"
-                            app:tint="#5D4037"/>
+                            app:tint="@color/icon_tint_primary"/>
                         <TextView
                             android:id="@+id/tvLeftSide"
                             android:layout_width="wrap_content"
                             android:layout_height="wrap_content"
                             android:text="Left Side"
                             android:textSize="12sp"
-                            android:textColor="#5D4037"
+                            android:textColor="@color/text_secondary"
                             android:layout_marginTop="4dp"/>
                     </LinearLayout>
                 </androidx.cardview.widget.CardView>
@@ -398,21 +407,21 @@
                         android:layout_height="match_parent"
                         android:orientation="vertical"
                         android:gravity="center"
-                        android:background="#F5F5F5"
+                        android:background="@color/input_background"
                         android:clickable="true"
                         android:focusable="true">
                         <ImageView
                             android:layout_width="24dp"
                             android:layout_height="24dp"
                             android:src="@android:drawable/ic_menu_camera"
-                            app:tint="#5D4037"/>
+                            app:tint="@color/icon_tint_primary"/>
                         <TextView
                             android:id="@+id/tvRightSide"
                             android:layout_width="wrap_content"
                             android:layout_height="wrap_content"
                             android:text="Right Side"
                             android:textSize="12sp"
-                            android:textColor="#5D4037"
+                            android:textColor="@color/text_secondary"
                             android:layout_marginTop="4dp"/>
                     </LinearLayout>
                 </androidx.cardview.widget.CardView>
@@ -431,21 +440,21 @@
                         android:layout_height="match_parent"
                         android:orientation="vertical"
                         android:gravity="center"
-                        android:background="#F5F5F5"
+                        android:background="@color/input_background"
                         android:clickable="true"
                         android:focusable="true">
                         <ImageView
                             android:layout_width="24dp"
                             android:layout_height="24dp"
                             android:src="@android:drawable/ic_menu_camera"
-                            app:tint="#5D4037"/>
+                            app:tint="@color/icon_tint_primary"/>
                         <TextView
                             android:id="@+id/tvLeftAngle"
                             android:layout_width="wrap_content"
                             android:layout_height="wrap_content"
                             android:text="Left Angle"
                             android:textSize="12sp"
-                            android:textColor="#5D4037"
+                            android:textColor="@color/text_secondary"
                             android:layout_marginTop="4dp"/>
                     </LinearLayout>
                 </androidx.cardview.widget.CardView>
@@ -464,21 +473,21 @@
                         android:layout_height="match_parent"
                         android:orientation="vertical"
                         android:gravity="center"
-                        android:background="#F5F5F5"
+                        android:background="@color/input_background"
                         android:clickable="true"
                         android:focusable="true">
                         <ImageView
                             android:layout_width="24dp"
                             android:layout_height="24dp"
                             android:src="@android:drawable/ic_menu_camera"
-                            app:tint="#5D4037"/>
+                            app:tint="@color/icon_tint_primary"/>
                         <TextView
                             android:id="@+id/tvRightAngle"
                             android:layout_width="wrap_content"
                             android:layout_height="wrap_content"
                             android:text="Right Angle"
                             android:textSize="12sp"
-                            android:textColor="#5D4037"
+                            android:textColor="@color/text_secondary"
                             android:layout_marginTop="4dp"/>
                     </LinearLayout>
                 </androidx.cardview.widget.CardView>
@@ -497,21 +506,21 @@
                         android:layout_height="match_parent"
                         android:orientation="vertical"
                         android:gravity="center"
-                        android:background="#F5F5F5"
+                        android:background="@color/input_background"
                         android:clickable="true"
                         android:focusable="true">
                         <ImageView
                             android:layout_width="24dp"
                             android:layout_height="24dp"
                             android:src="@android:drawable/ic_menu_camera"
-                            app:tint="#5D4037"/>
+                            app:tint="@color/icon_tint_primary"/>
                         <TextView
                             android:id="@+id/tvAngleView"
                             android:layout_width="wrap_content"
                             android:layout_height="wrap_content"
                             android:text="Angle View"
                             android:textSize="12sp"
-                            android:textColor="#5D4037"
+                            android:textColor="@color/text_secondary"
                             android:layout_marginTop="4dp"/>
                     </LinearLayout>
                 </androidx.cardview.widget.CardView>
@@ -540,7 +549,7 @@
                     android:textSize="16sp"
                     android:textStyle="bold"
                     app:cornerRadius="12dp"
-                    app:backgroundTint="#6D4C41"
+                    app:backgroundTint="@color/text_tertiary"
                     android:layout_marginEnd="8dp"/>
                     
                 <com.google.android.material.button.MaterialButton
@@ -551,10 +560,10 @@
                     android:text="Cancel"
                     android:textSize="16sp"
                     android:textStyle="bold"
-                    android:textColor="#5D4037"
+                    android:textColor="@color/icon_tint_primary"
                     app:cornerRadius="12dp"
-                    app:backgroundTint="#EFEBE9"
-                    app:strokeColor="#5D4037"
+                    app:backgroundTint="@color/input_background"
+                    app:strokeColor="@color/icon_tint_primary"
                     app:strokeWidth="1dp"
                     android:layout_marginStart="8dp"/>
             </LinearLayout>
diff --git a/app/src/main/res/layout/activity_gallery.xml b/app/src/main/res/layout/activity_gallery.xml
index 1fa5b0c..b3db3cc 100644
--- a/app/src/main/res/layout/activity_gallery.xml
+++ b/app/src/main/res/layout/activity_gallery.xml
@@ -3,19 +3,19 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="#F5F5F5">
+    android:background="@color/page_background">
 
     <com.google.android.material.appbar.AppBarLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="#FFFFFF"
+        android:background="@color/surface_background"
         app:elevation="0dp">
 
         <androidx.appcompat.widget.Toolbar
             android:id="@+id/toolbar"
             android:layout_width="match_parent"
             android:layout_height="?attr/actionBarSize"
-            android:background="#FFFFFF"
+            android:background="@color/surface_background"
             app:navigationIcon="@drawable/ic_round_back_button">
 
             <TextView
@@ -24,7 +24,7 @@
                 android:text="Saved Cow Profiles"
                 android:textSize="20sp"
                 android:textStyle="bold"
-                android:textColor="#3E2723"/>
+                android:textColor="@color/text_primary"/>
 
         </androidx.appcompat.widget.Toolbar>
 
@@ -40,21 +40,22 @@
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:layout_weight="1"
-                app:boxBackgroundColor="#F5F5F5"
+                app:boxBackgroundColor="@color/input_background"
                 app:boxCornerRadiusTopStart="24dp"
                 app:boxCornerRadiusTopEnd="24dp"
                 app:boxCornerRadiusBottomStart="24dp"
                 app:boxCornerRadiusBottomEnd="24dp"
                 app:boxStrokeWidth="0dp"
                 app:startIconDrawable="@android:drawable/ic_menu_search"
-                app:startIconTint="#8D6E63"
+                app:startIconTint="@color/text_secondary"
                 android:hint="Search profiles...">
 
                 <com.google.android.material.textfield.TextInputEditText
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:paddingTop="12dp"
-                    android:paddingBottom="12dp"/>
+                    android:paddingBottom="12dp"
+                    android:textColor="@color/text_primary"/>
             </com.google.android.material.textfield.TextInputLayout>
 
             <com.google.android.material.button.MaterialButton
@@ -62,8 +63,8 @@
                 android:layout_height="52dp"
                 android:layout_marginStart="12dp"
                 app:icon="@android:drawable/ic_menu_sort_by_size"
-                app:iconTint="#5D4037"
-                app:backgroundTint="#EFEBE9"
+                app:iconTint="@color/icon_tint_primary"
+                app:backgroundTint="@color/input_background"
                 app:cornerRadius="12dp"
                 app:iconGravity="textStart"
                 app:iconPadding="0dp"
@@ -95,7 +96,7 @@
         android:layout_gravity="bottom|end"
         android:layout_margin="24dp"
         app:srcCompat="@android:drawable/ic_input_add"
-        app:tint="#FFFFFF"
-        app:backgroundTint="#6D4C41"/>
+        app:tint="@color/white"
+        app:backgroundTint="@color/text_tertiary"/>
 
 </androidx.coordinatorlayout.widget.CoordinatorLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/activity_home.xml b/app/src/main/res/layout/activity_home.xml
index 90f3fc9..61c6db9 100644
--- a/app/src/main/res/layout/activity_home.xml
+++ b/app/src/main/res/layout/activity_home.xml
@@ -10,7 +10,7 @@
     <ScrollView
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="#F7F7F7"
+        android:background="@color/page_background"
         android:fillViewport="true">
 
         <LinearLayout
@@ -34,7 +34,7 @@
                     android:src="@android:drawable/ic_menu_sort_by_size"
                     android:background="?attr/selectableItemBackgroundBorderless"
                     android:contentDescription="Menu"
-                    app:tint="#5D4037"/>
+                    app:tint="@color/icon_tint_primary"/>
             </LinearLayout>
 
             <!-- Cow Illustration - Circular Logo -->
@@ -43,7 +43,7 @@
                 android:layout_height="180dp"
                 app:cardCornerRadius="90dp"
                 app:cardElevation="8dp"
-                app:cardBackgroundColor="#FFFFFF"
+                app:cardBackgroundColor="@color/surface_background"
                 android:layout_marginBottom="24dp">
                 
                 <ImageView
@@ -63,7 +63,7 @@
                 android:text="Cow Data Collector"
                 android:textSize="28sp"
                 android:textStyle="bold"
-                android:textColor="#3E2723"
+                android:textColor="@color/text_primary"
                 android:textAlignment="center"
                 android:layout_marginBottom="8dp"/>
 
@@ -74,7 +74,7 @@
                 android:layout_height="wrap_content"
                 android:text="Record and manage cow information easily."
                 android:textSize="16sp"
-                android:textColor="#6D4C41"
+                android:textColor="@color/text_tertiary"
                 android:textAlignment="center"
                 android:layout_marginBottom="40dp"/>
 
@@ -94,7 +94,7 @@
                     android:textSize="18sp"
                     android:textStyle="bold"
                     app:cornerRadius="16dp"
-                    app:backgroundTint="#6D4C41"
+                    app:backgroundTint="@color/text_tertiary"
                     app:icon="@android:drawable/ic_input_add"
                     app:iconGravity="textStart"
                     app:iconPadding="12dp"
@@ -109,13 +109,13 @@
                     android:text="View Saved Profiles"
                     android:textSize="18sp"
                     android:textStyle="bold"
-                    android:textColor="#5D4037"
+                    android:textColor="@color/icon_tint_primary"
                     app:cornerRadius="16dp"
-                    app:backgroundTint="#EFEBE9"
-                    app:strokeColor="#5D4037"
+                    app:backgroundTint="@color/input_background"
+                    app:strokeColor="@color/icon_tint_primary"
                     app:strokeWidth="1dp"
                     app:icon="@android:drawable/ic_menu_gallery"
-                    app:iconTint="#5D4037"
+                    app:iconTint="@color/icon_tint_primary"
                     app:iconGravity="textStart"
                     app:iconPadding="12dp"
                     android:elevation="4dp"/>
@@ -128,7 +128,7 @@
                 android:layout_height="wrap_content"
                 app:cardCornerRadius="16dp"
                 app:cardElevation="2dp"
-                app:cardBackgroundColor="#FFFFFF"
+                app:cardBackgroundColor="@color/surface_background"
                 android:layout_marginBottom="24dp">
 
                 <LinearLayout
@@ -144,7 +144,7 @@
                         android:text="Settings"
                         android:textSize="18sp"
                         android:textStyle="bold"
-                        android:textColor="#3E2723"
+                        android:textColor="@color/text_primary"
                         android:layout_marginBottom="16dp"/>
 
                     <!-- Algorithm Selection -->
@@ -154,7 +154,7 @@
                         android:layout_height="wrap_content"
                         android:text="Algorithm"
                         android:textSize="14sp"
-                        android:textColor="#5D4037"
+                        android:textColor="@color/text_secondary"
                         android:layout_marginBottom="8dp"/>
 
                     <FrameLayout
@@ -184,7 +184,7 @@
                             android:layout_weight="1"
                             android:text="Match Threshold"
                             android:textSize="14sp"
-                            android:textColor="#5D4037"/>
+                            android:textColor="@color/text_secondary"/>
                         
                         <TextView
                             android:id="@+id/tvThresholdValue"
@@ -192,7 +192,7 @@
                             android:layout_height="wrap_content"
                             android:text="75%"
                             android:textStyle="bold"
-                            android:textColor="#3E2723"/>
+                            android:textColor="@color/text_primary"/>
                     </LinearLayout>
 
                     <SeekBar
@@ -200,8 +200,8 @@
                         android:layout_width="match_parent"
                         android:layout_height="wrap_content"
                         android:max="100"
-                        android:progressTint="#6D4C41"
-                        android:thumbTint="#6D4C41"
+                        android:progressTint="@color/text_tertiary"
+                        android:thumbTint="@color/text_tertiary"
                         android:layout_marginBottom="16dp"/>
                         
                     <!-- Mask Display Toggle -->
@@ -210,10 +210,10 @@
                         android:layout_width="match_parent"
                         android:layout_height="wrap_content"
                         android:text="Show Segmentation Mask"
-                        android:textColor="#5D4037"
+                        android:textColor="@color/text_secondary"
                         android:textSize="14sp"
-                        app:thumbTint="#6D4C41"
-                        app:trackTint="#EFEBE9"/>
+                        app:thumbTint="@color/text_tertiary"
+                        app:trackTint="@color/input_background"/>
                         
                 </LinearLayout>
             </androidx.cardview.widget.CardView>
@@ -226,7 +226,7 @@
         android:layout_width="280dp"
         android:layout_height="match_parent"
         android:layout_gravity="start"
-        android:background="#FFFFFF"
+        android:background="@color/surface_background"
         android:orientation="vertical"
         android:padding="16dp"
         android:clickable="true"
@@ -239,7 +239,7 @@
             android:text="Menu"
             android:textSize="20sp"
             android:textStyle="bold"
-            android:textColor="#3E2723"
+            android:textColor="@color/text_primary"
             android:layout_marginBottom="24dp"/>
 
         <!-- Language Selection -->
@@ -247,7 +247,7 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="Language"
-            android:textColor="#5D4037"
+            android:textColor="@color/text_secondary"
             android:layout_marginBottom="8dp"/>
         
         <Spinner
@@ -264,10 +264,10 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="Auto Capture"
-            android:textColor="#5D4037"
+            android:textColor="@color/text_secondary"
             android:textSize="14sp"
-            app:thumbTint="#6D4C41"
-            app:trackTint="#EFEBE9"
+            app:thumbTint="@color/text_tertiary"
+            app:trackTint="@color/input_background"
             android:layout_marginBottom="16dp"/>
 
         <!-- Enable Debug Toggle -->
@@ -276,10 +276,10 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="Enable Debug"
-            android:textColor="#5D4037"
+            android:textColor="@color/text_secondary"
             android:textSize="14sp"
-            app:thumbTint="#6D4C41"
-            app:trackTint="#EFEBE9"
+            app:thumbTint="@color/text_tertiary"
+            app:trackTint="@color/input_background"
             android:layout_marginBottom="16dp"/>
 
     </LinearLayout>
diff --git a/app/src/main/res/layout/activity_rating.xml b/app/src/main/res/layout/activity_rating.xml
index 4943693..e393d4d 100644
--- a/app/src/main/res/layout/activity_rating.xml
+++ b/app/src/main/res/layout/activity_rating.xml
@@ -4,13 +4,13 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
-    android:background="#FFFFFF">
+    android:background="@color/surface_background">
 
     <androidx.appcompat.widget.Toolbar
         android:id="@+id/toolbar"
         android:layout_width="match_parent"
         android:layout_height="?attr/actionBarSize"
-        android:background="#FFFFFF"
+        android:background="@color/surface_background"
         app:navigationIcon="@drawable/ic_round_back_button">
 
         <TextView
@@ -20,7 +20,7 @@
             android:text="Rate Cow"
             android:textSize="20sp"
             android:textStyle="bold"
-            android:textColor="#3E2723"/>
+            android:textColor="@color/text_primary"/>
 
     </androidx.appcompat.widget.Toolbar>
 
@@ -42,7 +42,7 @@
                 android:text="Photos"
                 android:textSize="18sp"
                 android:textStyle="bold"
-                android:textColor="#3E2723"
+                android:textColor="@color/text_primary"
                 android:layout_marginBottom="8dp"/>
 
             <LinearLayout
@@ -65,7 +65,7 @@
                     android:layout_height="wrap_content"
                     android:orientation="vertical"
                     android:padding="16dp"
-                    android:background="#FAFAFA">
+                    android:background="@color/input_background">
                     
                     <TextView
                         android:id="@+id/tvHeaderCowDetails"
@@ -74,7 +74,7 @@
                         android:text="Cow Details"
                         android:textSize="18sp"
                         android:textStyle="bold"
-                        android:textColor="#5D4037"
+                        android:textColor="@color/text_secondary"
                         android:layout_marginBottom="8dp"/>
                         
                     <TextView
@@ -82,7 +82,7 @@
                         android:layout_width="match_parent"
                         android:layout_height="wrap_content"
                         android:textSize="14sp"
-                        android:textColor="#3E2723"
+                        android:textColor="@color/text_primary"
                         android:lineSpacingExtra="4dp"/>
                 </LinearLayout>
             </androidx.cardview.widget.CardView>
@@ -97,7 +97,7 @@
                 app:boxCornerRadiusTopEnd="12dp"
                 app:boxCornerRadiusBottomStart="12dp"
                 app:boxCornerRadiusBottomEnd="12dp"
-                app:boxStrokeColor="#6D4C41"
+                app:boxStrokeColor="@color/text_tertiary"
                 android:hint="Comments">
 
                 <com.google.android.material.textfield.TextInputEditText
@@ -105,7 +105,8 @@
                     android:layout_height="wrap_content"
                     android:inputType="textMultiLine"
                     android:minLines="3"
-                    android:gravity="top"/>
+                    android:gravity="top"
+                    android:textColor="@color/text_primary"/>
             </com.google.android.material.textfield.TextInputLayout>
 
             <TextView
@@ -115,7 +116,7 @@
                 android:text="Feature Ratings"
                 android:textSize="18sp"
                 android:textStyle="bold"
-                android:textColor="#3E2723"
+                android:textColor="@color/text_primary"
                 android:layout_marginBottom="16dp"/>
 
             <LinearLayout
@@ -133,7 +134,7 @@
                 android:textSize="16sp"
                 android:textStyle="bold"
                 app:cornerRadius="12dp"
-                app:backgroundTint="#6D4C41"/>
+                app:backgroundTint="@color/text_tertiary"/>
 
             <com.google.android.material.button.MaterialButton
                 android:id="@+id/btnCancelRating"
@@ -143,7 +144,7 @@
                 android:textSize="16sp"
                 android:textStyle="bold"
                 app:cornerRadius="12dp"
-                app:backgroundTint="#6D4C41"/>
+                app:backgroundTint="@color/text_tertiary"/>
 
         </LinearLayout>
     </ScrollView>
diff --git a/app/src/main/res/layout/item_feature_rating.xml b/app/src/main/res/layout/item_feature_rating.xml
index 52ffb59..fe7d905 100644
--- a/app/src/main/res/layout/item_feature_rating.xml
+++ b/app/src/main/res/layout/item_feature_rating.xml
@@ -10,7 +10,7 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:textSize="16sp"
-        android:textColor="#5D4037"
+        android:textColor="@color/text_secondary"
         android:layout_marginBottom="8dp"/>
 
     <!-- Rounded Rectangle Container for Segments -->
diff --git a/app/src/main/res/values-night/colors.xml b/app/src/main/res/values-night/colors.xml
new file mode 100644
index 0000000..8e08b43
--- /dev/null
+++ b/app/src/main/res/values-night/colors.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="purple_200">#FFBB86FC</color>
+    <color name="purple_500">#FF6200EE</color>
+    <color name="purple_700">#FF3700B3</color>
+    <color name="teal_200">#FF03DAC5</color>
+    <color name="teal_700">#FF018786</color>
+    <color name="black">#FF000000</color>
+    <color name="white">#FFFFFFFF</color>
+
+    <!-- Semantic Colors for AnimalRating (Dark Mode) -->
+    <color name="text_primary">#EFEBE9</color>
+    <color name="text_secondary">#BCAAA4</color>
+    <color name="text_tertiary">#A1887F</color>
+    <color name="page_background">#121212</color>
+    <color name="surface_background">#1E1E1E</color>
+    <color name="input_background">#2C2C2C</color>
+    <color name="icon_tint_primary">#BCAAA4</color>
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values-night/themes.xml b/app/src/main/res/values-night/themes.xml
new file mode 100644
index 0000000..5162303
--- /dev/null
+++ b/app/src/main/res/values-night/themes.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="Theme.AnimalRating" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+        <!-- Primary brand color. -->
+        <item name="colorPrimary">#A1887F</item>
+        <item name="colorPrimaryVariant">#6D4C41</item>
+        <item name="colorOnPrimary">#000000</item>
+        <!-- Secondary brand color. -->
+        <item name="colorSecondary">#FF8A65</item>
+        <item name="colorSecondaryVariant">#FF8A65</item>
+        <item name="colorOnSecondary">#000000</item>
+        <!-- Status bar color. -->
+        <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
+        <!-- Customize your theme here. -->
+    </style>
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index f8c6127..b1e8fc9 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -7,4 +7,14 @@
     <color name="teal_700">#FF018786</color>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
+
+    <!-- Semantic Colors for AnimalRating -->
+    <color name="text_primary">#3E2723</color>
+    <color name="text_secondary">#5D4037</color>
+    <color name="text_tertiary">#6D4C41</color>
+    <color name="page_background">#F7F7F7</color>
+    <color name="surface_background">#FFFFFF</color>
+    <color name="input_background">#F5F5F5</color>
+    <color name="icon_tint_primary">#5D4037</color>
+    <color name="placeholder_background">#E0E0E0</color>
 </resources>
\ No newline at end of file