diff --git a/app/src/main/java/com/example/bdkipoc/MainActivity.java b/app/src/main/java/com/example/bdkipoc/MainActivity.java
index 31b80d6..aa699c0 100644
--- a/app/src/main/java/com/example/bdkipoc/MainActivity.java
+++ b/app/src/main/java/com/example/bdkipoc/MainActivity.java
@@ -50,15 +50,15 @@ public class MainActivity extends AppCompatActivity {
             CardView cardView = findViewById(cardId);
             cardView.setOnClickListener(v -> {
                 if (cardId == R.id.card_kartu_kredit) {
-                    Toast.makeText(this, "Kartu Kredit Diklik", Toast.LENGTH_SHORT).show();
+                    // Arahkan ke PaymentActivity untuk Transfer
+                    startActivity(new Intent(MainActivity.this, PaymentActivity.class));
                 } else if (cardId == R.id.card_kartu_debit) {
                     Toast.makeText(this, "Kartu Debit Diklik", Toast.LENGTH_SHORT).show();
                 } else if (cardId == R.id.card_qris) {
-                    // Arahkan ke PaymentActivity untuk Transfer
-                    startActivity(new Intent(MainActivity.this, PaymentActivity.class));
                     // Arahkan ke TransactionActivity untuk QRIS
-                } else if (cardId == R.id.card_transfer) {
                     startActivity(new Intent(MainActivity.this, TransactionActivity.class));
+                } else if (cardId == R.id.card_transfer) {
+                    Toast.makeText(this, "Transfer Diklik", Toast.LENGTH_SHORT).show();
                 } else if (cardId == R.id.card_uang_elektronik) {
                     Toast.makeText(this, "Uang Elektronik Diklik", Toast.LENGTH_SHORT).show();
                 } else if (cardId == R.id.card_cetak_ulang) {
diff --git a/app/src/main/res/drawable/ic_logo_icon.png b/app/src/main/res/drawable/ic_logo_icon.png
new file mode 100644
index 0000000..cfd4f90
Binary files /dev/null and b/app/src/main/res/drawable/ic_logo_icon.png differ
diff --git a/app/src/main/res/drawable/ic_notifications.xml b/app/src/main/res/drawable/ic_notifications.xml
new file mode 100644
index 0000000..824f41b
--- /dev/null
+++ b/app/src/main/res/drawable/ic_notifications.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:fillColor="#FFFFFF"
+      android:pathData="M12,22c1.1,0 2,-0.9 2,-2h-4c0,1.1 0.9,2 2,2zM18,16v-5c0,-3.07 -1.64,-5.64 -4.5,-6.32L13.5,4c0,-0.83 -0.67,-1.5 -1.5,-1.5s-1.5,0.67 -1.5,1.5v0.68C7.63,5.36 6,7.92 6,11v5l-2,2v1h16v-1l-2,-2z"/>
+</vector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/ic_qr_code.xml b/app/src/main/res/drawable/ic_qr_code.xml
new file mode 100644
index 0000000..cbc0748
--- /dev/null
+++ b/app/src/main/res/drawable/ic_qr_code.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:fillColor="#FFFFFF"
+      android:pathData="M3,11h8L11,3L3,3v8zM5,5h4v4L5,9L5,5zM13,3v8h8L21,3h-8zM19,9h-4L15,5h4v4zM3,21h8v-8L3,13v8zM5,15h4v4L5,19v-4zM13,13v8h8v-8h-8zM19,19h-4v-4h4v4z"/>
+</vector>
\ No newline at end of file
diff --git a/app/src/main/res/font/inter.xml b/app/src/main/res/font/inter.xml
new file mode 100644
index 0000000..4b565ce
--- /dev/null
+++ b/app/src/main/res/font/inter.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
+    <font
+        app:font="@font/inter_regular"
+        app:fontWeight="400"
+        app:fontStyle="normal"/>
+    <font
+        app:font="@font/inter_medium"
+        app:fontWeight="500"
+        app:fontStyle="normal"/>
+</font-family>
\ No newline at end of file
diff --git a/app/src/main/res/font/inter_medium.ttf b/app/src/main/res/font/inter_medium.ttf
new file mode 100644
index 0000000..71d9017
Binary files /dev/null and b/app/src/main/res/font/inter_medium.ttf differ
diff --git a/app/src/main/res/font/inter_regular.ttf b/app/src/main/res/font/inter_regular.ttf
new file mode 100644
index 0000000..ce097c8
Binary files /dev/null and b/app/src/main/res/font/inter_regular.ttf differ
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
index 53556bc..3c8fa2d 100644
--- a/app/src/main/res/layout/activity_main.xml
+++ b/app/src/main/res/layout/activity_main.xml
@@ -5,28 +5,24 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="#F5F5F5"
+    android:background="#FFFFFF"
     tools:context=".MainActivity">
 
     <!-- Status Bar Area -->
-    <LinearLayout
-        android:id="@+id/status_bar"
+    <View
+        android:id="@+id/status_bar_background"
         android:layout_width="match_parent"
         android:layout_height="24dp"
         android:background="#E31937"
-        android:paddingStart="16dp"
-        android:paddingEnd="16dp"
-        android:gravity="center_vertical"
-        app:layout_constraintTop_toTopOf="parent">
+        app:layout_constraintTop_toTopOf="parent"/>
 
-        <TextView
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="10:11"
-            android:textColor="@android:color/white"
-            android:textSize="14sp"/>
-
-    </LinearLayout>
+    <!-- Red Background Header -->
+    <View
+        android:id="@+id/red_header_background"
+        android:layout_width="match_parent"
+        android:layout_height="100dp"
+        android:background="#E31937"
+        app:layout_constraintTop_toBottomOf="@id/status_bar_background"/>
 
     <!-- Merchant Card -->
     <androidx.cardview.widget.CardView
@@ -34,9 +30,9 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_margin="16dp"
-        app:cardCornerRadius="8dp"
+        app:cardCornerRadius="12dp"
         app:cardElevation="4dp"
-        app:layout_constraintTop_toBottomOf="@id/status_bar">
+        app:layout_constraintTop_toBottomOf="@id/status_bar_background">
 
         <LinearLayout
             android:layout_width="match_parent"
@@ -44,21 +40,31 @@
             android:orientation="vertical"
             android:padding="16dp">
 
+            <ImageView
+                android:layout_width="144dp"
+                android:layout_height="36dp"
+                android:src="@drawable/ic_logo_icon"
+                android:scaleType="fitStart"
+                android:adjustViewBounds="true"
+                android:layout_marginBottom="8dp"/>
+
             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="TOKO KLONTONG PAK EKO"
-                android:textColor="@android:color/black"
+                android:textColor="#061D28"
                 android:textSize="18sp"
-                android:textStyle="bold"/>
+                android:textStyle="bold"
+                android:layout_gravity="center_horizontal"/>
 
             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_marginTop="4dp"
                 android:text="Ciputat Baru, Tangsel"
-                android:textColor="#808080"
-                android:textSize="14sp"/>
+                android:textColor="#9FA4A9"
+                android:textSize="14sp"
+                android:layout_gravity="center_horizontal"/>
 
             <View
                 android:layout_width="match_parent"
@@ -70,22 +76,22 @@
             <LinearLayout
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:orientation="horizontal">
+                android:orientation="horizontal"
+                android:gravity="center">
 
                 <TextView
-                    android:layout_width="0dp"
+                    android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                    android:layout_weight="1"
                     android:text="MID: 12345678901"
-                    android:textColor="@android:color/black"
-                    android:textSize="14sp"/>
+                    android:textColor="#9FA4A9"
+                    android:textSize="14sp"
+                    android:layout_marginEnd="16dp"/>
 
                 <TextView
-                    android:layout_width="0dp"
+                    android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                    android:layout_weight="1"
                     android:text="TID: 12345678901"
-                    android:textColor="@android:color/black"
+                    android:textColor="#9FA4A9"
                     android:textSize="14sp"/>
             </LinearLayout>
         </LinearLayout>
@@ -99,7 +105,7 @@
         android:columnCount="3"
         android:rowCount="3"
         android:background="@android:color/white"
-        android:padding="16dp"
+        android:padding="8dp"
         app:layout_constraintTop_toBottomOf="@id/merchant_card">
 
         <!-- Kartu Kredit -->
@@ -110,8 +116,9 @@
             android:layout_columnWeight="1"
             android:layout_rowWeight="1"
             android:layout_margin="8dp"
-            app:cardCornerRadius="8dp"
-            app:cardElevation="2dp">
+            app:cardCornerRadius="12dp"
+            app:cardElevation="2dp"
+            app:cardBackgroundColor="#F3F4F3">
 
             <LinearLayout
                 android:layout_width="match_parent"
@@ -131,8 +138,7 @@
                     android:layout_height="wrap_content"
                     android:layout_marginTop="8dp"
                     android:text="Kartu Kredit"
-                    android:textColor="@android:color/black"
-                    android:textSize="12sp"/>
+                    style="@style/MenuCardTitle"/>
             </LinearLayout>
         </androidx.cardview.widget.CardView>
 
@@ -144,8 +150,9 @@
             android:layout_columnWeight="1"
             android:layout_rowWeight="1"
             android:layout_margin="8dp"
-            app:cardCornerRadius="8dp"
-            app:cardElevation="2dp">
+            app:cardCornerRadius="12dp"
+            app:cardElevation="2dp"
+            app:cardBackgroundColor="#F3F4F3">
 
             <LinearLayout
                 android:layout_width="match_parent"
@@ -165,8 +172,7 @@
                     android:layout_height="wrap_content"
                     android:layout_marginTop="8dp"
                     android:text="Kartu Debit"
-                    android:textColor="@android:color/black"
-                    android:textSize="12sp"/>
+                    style="@style/MenuCardTitle"/>
             </LinearLayout>
         </androidx.cardview.widget.CardView>
 
@@ -178,8 +184,9 @@
             android:layout_columnWeight="1"
             android:layout_rowWeight="1"
             android:layout_margin="8dp"
-            app:cardCornerRadius="8dp"
-            app:cardElevation="2dp">
+            app:cardCornerRadius="12dp"
+            app:cardElevation="2dp"
+            app:cardBackgroundColor="#F3F4F3">
 
             <LinearLayout
                 android:layout_width="match_parent"
@@ -199,8 +206,7 @@
                     android:layout_height="wrap_content"
                     android:layout_marginTop="8dp"
                     android:text="QRIS"
-                    android:textColor="@android:color/black"
-                    android:textSize="12sp"/>
+                    style="@style/MenuCardTitle"/>
             </LinearLayout>
         </androidx.cardview.widget.CardView>
 
@@ -212,8 +218,9 @@
             android:layout_columnWeight="1"
             android:layout_rowWeight="1"
             android:layout_margin="8dp"
-            app:cardCornerRadius="8dp"
-            app:cardElevation="2dp">
+            app:cardCornerRadius="12dp"
+            app:cardElevation="2dp"
+            app:cardBackgroundColor="#F3F4F3">
 
             <LinearLayout
                 android:layout_width="match_parent"
@@ -233,8 +240,7 @@
                     android:layout_height="wrap_content"
                     android:layout_marginTop="8dp"
                     android:text="Transfer"
-                    android:textColor="@android:color/black"
-                    android:textSize="12sp"/>
+                    style="@style/MenuCardTitle"/>
             </LinearLayout>
         </androidx.cardview.widget.CardView>
 
@@ -246,8 +252,9 @@
             android:layout_columnWeight="1"
             android:layout_rowWeight="1"
             android:layout_margin="8dp"
-            app:cardCornerRadius="8dp"
-            app:cardElevation="2dp">
+            app:cardCornerRadius="12dp"
+            app:cardElevation="2dp"
+            app:cardBackgroundColor="#F3F4F3">
 
             <LinearLayout
                 android:layout_width="match_parent"
@@ -267,8 +274,7 @@
                     android:layout_height="wrap_content"
                     android:layout_marginTop="8dp"
                     android:text="Uang Elektronik"
-                    android:textColor="@android:color/black"
-                    android:textSize="12sp"/>
+                    style="@style/MenuCardTitle"/>
             </LinearLayout>
         </androidx.cardview.widget.CardView>
 
@@ -280,8 +286,9 @@
             android:layout_columnWeight="1"
             android:layout_rowWeight="1"
             android:layout_margin="8dp"
-            app:cardCornerRadius="8dp"
-            app:cardElevation="2dp">
+            app:cardCornerRadius="12dp"
+            app:cardElevation="2dp"
+            app:cardBackgroundColor="#F3F4F3">
 
             <LinearLayout
                 android:layout_width="match_parent"
@@ -301,8 +308,7 @@
                     android:layout_height="wrap_content"
                     android:layout_marginTop="8dp"
                     android:text="Cetak Ulang"
-                    android:textColor="@android:color/black"
-                    android:textSize="12sp"/>
+                    style="@style/MenuCardTitle"/>
             </LinearLayout>
         </androidx.cardview.widget.CardView>
 
@@ -314,8 +320,9 @@
             android:layout_columnWeight="1"
             android:layout_rowWeight="1"
             android:layout_margin="8dp"
-            app:cardCornerRadius="8dp"
-            app:cardElevation="2dp">
+            app:cardCornerRadius="12dp"
+            app:cardElevation="2dp"
+            app:cardBackgroundColor="#F3F4F3">
 
             <LinearLayout
                 android:layout_width="match_parent"
@@ -335,8 +342,7 @@
                     android:layout_height="wrap_content"
                     android:layout_marginTop="8dp"
                     android:text="Refund"
-                    android:textColor="@android:color/black"
-                    android:textSize="12sp"/>
+                    style="@style/MenuCardTitle"/>
             </LinearLayout>
         </androidx.cardview.widget.CardView>
 
@@ -348,8 +354,9 @@
             android:layout_columnWeight="1"
             android:layout_rowWeight="1"
             android:layout_margin="8dp"
-            app:cardCornerRadius="8dp"
-            app:cardElevation="2dp">
+            app:cardCornerRadius="12dp"
+            app:cardElevation="2dp"
+            app:cardBackgroundColor="#F3F4F3">
 
             <LinearLayout
                 android:layout_width="match_parent"
@@ -369,8 +376,7 @@
                     android:layout_height="wrap_content"
                     android:layout_marginTop="8dp"
                     android:text="Settlement"
-                    android:textColor="@android:color/black"
-                    android:textSize="12sp"/>
+                    style="@style/MenuCardTitle"/>
             </LinearLayout>
         </androidx.cardview.widget.CardView>
 
@@ -382,8 +388,9 @@
             android:layout_columnWeight="1"
             android:layout_rowWeight="1"
             android:layout_margin="8dp"
-            app:cardCornerRadius="8dp"
-            app:cardElevation="2dp">
+            app:cardCornerRadius="12dp"
+            app:cardElevation="2dp"
+            app:cardBackgroundColor="#F3F4F3">
 
             <LinearLayout
                 android:layout_width="match_parent"
@@ -403,32 +410,39 @@
                     android:layout_height="wrap_content"
                     android:layout_marginTop="8dp"
                     android:text="Histori"
-                    android:textColor="@android:color/black"
-                    android:textSize="12sp"/>
+                    style="@style/MenuCardTitle"/>
             </LinearLayout>
         </androidx.cardview.widget.CardView>
     </GridLayout>
 
     <!-- Lainnya Button -->
-    <Button
+    <com.google.android.material.button.MaterialButton
         android:id="@+id/btn_lainnya"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="Lainnya"
-        android:textColor="@android:color/white"
-        android:backgroundTint="#E31937"
+        android:textColor="#DE0701"
+        android:backgroundTint="#FFFFFF"
         android:textAllCaps="false"
-        android:layout_margin="16dp"
+        app:strokeColor="#DE0701"
+        app:strokeWidth="1dp"
+        app:cornerRadius="8dp"
+        android:layout_marginLeft="16dp"
+        android:layout_marginRight="16dp"
+        android:layout_marginTop="8dp"
         app:layout_constraintTop_toBottomOf="@id/menu_grid"/>
 
     <!-- Scan dan Bayar Card -->
     <androidx.cardview.widget.CardView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_margin="16dp"
-        app:cardCornerRadius="8dp"
+        android:layout_marginLeft="16dp"
+        android:layout_marginRight="16dp"
+        android:layout_marginBottom="16dp"
+        app:cardCornerRadius="12dp"
         app:cardBackgroundColor="#E31937"
-        app:layout_constraintBottom_toBottomOf="parent">
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/btn_lainnya">
 
         <LinearLayout
             android:layout_width="match_parent"
@@ -440,7 +454,7 @@
             <ImageView
                 android:layout_width="48dp"
                 android:layout_height="48dp"
-                android:src="@drawable/ic_qris"
+                android:src="@drawable/ic_qr_code"
                 android:tint="@android:color/white"/>
 
             <LinearLayout
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
new file mode 100644
index 0000000..9c8cb26
--- /dev/null
+++ b/app/src/main/res/values/styles.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="MenuCardTitle">
+        <item name="fontFamily">@font/inter</item>
+        <item name="android:textSize">12sp</item>
+        <item name="android:textColor">#DD0701</item>
+        <item name="android:textAlignment">center</item>
+        <item name="android:lineHeight">12sp</item>
+        <item name="android:letterSpacing">0</item>
+        <item name="android:textStyle">normal</item>
+    </style>
+</resources>
\ No newline at end of file