diff --git a/app/src/main/java/com/example/bandung_bondowoso/view/scan/ScanFragment.kt b/app/src/main/java/com/example/bandung_bondowoso/view/scan/ScanFragment.kt
index b83530a0f9054858460d4300d3ed712913869a2e..f7953d649ae6ddeba148cd4fa6f2a2f7518def7a 100644
--- a/app/src/main/java/com/example/bandung_bondowoso/view/scan/ScanFragment.kt
+++ b/app/src/main/java/com/example/bandung_bondowoso/view/scan/ScanFragment.kt
@@ -38,6 +38,7 @@ class ScanFragment : Fragment(){
         } else {
             startCamera()
         }
+        _binding!!.shutter.setOnClickListener { takePhoto() }
     }
 
     private fun startCamera(){
@@ -49,6 +50,11 @@ class ScanFragment : Fragment(){
 
     }
 
+    private fun takePhoto(){
+        val previewView: PreviewView = _binding!!.viewFinder
+        previewView.controller = null
+
+    }
 
     private val activityResultLauncher = registerForActivityResult(ActivityResultContracts.RequestMultiplePermissions()){
             permissions ->
diff --git a/app/src/main/java/com/example/bandung_bondowoso/view/scan/ScanHomeFragment.kt b/app/src/main/java/com/example/bandung_bondowoso/view/scan/ScanHomeFragment.kt
new file mode 100644
index 0000000000000000000000000000000000000000..072e947d4ecf8084c1352c49a3d0eeb02b7e2e22
--- /dev/null
+++ b/app/src/main/java/com/example/bandung_bondowoso/view/scan/ScanHomeFragment.kt
@@ -0,0 +1,46 @@
+package com.example.bandung_bondowoso.view.scan
+
+import android.os.Bundle
+import android.util.Log
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.activity.result.PickVisualMediaRequest
+import androidx.activity.result.contract.ActivityResultContracts
+import androidx.fragment.app.Fragment
+import androidx.navigation.Navigation
+import com.example.bandung_bondowoso.R
+import com.example.bandung_bondowoso.databinding.FragmentScanHomeBinding
+
+class ScanHomeFragment: Fragment() {
+    private var _binding :FragmentScanHomeBinding ? = null;
+    private val binding get() = _binding!!
+    private val pickMedia = registerForActivityResult(ActivityResultContracts.PickVisualMedia()) { uri ->
+        if (uri != null) {
+            Log.d("PhotoPicker", "Selected URI: $uri")
+        } else {
+            Log.d("PhotoPicker", "No photo selected")
+        }
+    }
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        Log.d("ScanHomeFragment", "OnCreateView")
+        _binding = FragmentScanHomeBinding.inflate(inflater, container, false)
+        val root: View = binding.root
+        binding.toScanButton.setOnClickListener {
+            Navigation.findNavController(root).navigate(R.id.action_navigation_scan_to_camera_scan)
+        }
+        binding.toGaleriButton.setOnClickListener{
+            pickImageGallery()
+        }
+        return root;
+    }
+
+    private fun pickImageGallery(){
+        pickMedia.launch(PickVisualMediaRequest(ActivityResultContracts.PickVisualMedia.ImageOnly))
+    }
+
+}
\ No newline at end of file
diff --git a/app/src/main/res/drawable/round_button.xml b/app/src/main/res/drawable/round_button.xml
new file mode 100644
index 0000000000000000000000000000000000000000..a4c6e5099fbe20b9e073dbea48279d04b6ce8d61
--- /dev/null
+++ b/app/src/main/res/drawable/round_button.xml
@@ -0,0 +1,13 @@
+<?xml version = "1.0" encoding = "utf-8"?>
+<selector xmlns:android = "http://schemas.android.com/apk/res/android">
+    <item android:state_pressed = "false">
+        <shape android:shape = "oval">
+            <solid android:color = "#ffffff"/>
+        </shape>
+    </item>
+    <item android:state_pressed = "true">
+        <shape android:shape = "oval">
+            <solid android:color = "#ffffff"/>
+        </shape>
+    </item>
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/scan.png b/app/src/main/res/drawable/scan.png
new file mode 100644
index 0000000000000000000000000000000000000000..c838cd68be6b992eaabe1f6e26ce6235cc9e205f
Binary files /dev/null and b/app/src/main/res/drawable/scan.png differ
diff --git a/app/src/main/res/layout/fragment_scan.xml b/app/src/main/res/layout/fragment_scan.xml
index 07516201b1238ffcf081a991749387ac936b6072..54ebb32706a503200cf06c7d2597da1787e704fd 100644
--- a/app/src/main/res/layout/fragment_scan.xml
+++ b/app/src/main/res/layout/fragment_scan.xml
@@ -1,22 +1,52 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools" >
+    android:background="@color/md_theme_primary"
+    android:paddingHorizontal="30dp">
+
+    <TextView
+        android:id="@+id/tv_scan_title"
+        style="@style/TextAppearance.HeadlineLarge"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="@dimen/title_top_margin"
+        android:text="@string/title_scan"
+        android:textColor="@color/white"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <androidx.cardview.widget.CardView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="90dp"
+        app:cardCornerRadius="50dp"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/tv_scan_title">
+
+        <androidx.camera.view.PreviewView
+            android:id="@+id/viewFinder"
+            android:layout_width="330dp"
+            android:layout_height="330dp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0.476"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintVertical_bias="0.394" />
+    </androidx.cardview.widget.CardView>
 
-    <androidx.camera.view.PreviewView
-        android:id= "@+id/viewFinder"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"/>
-    <Button
-        android:layout_width="110dp"
-        android:layout_height="110dp"
-        android:layout_marginBottom = "50dp"
+    <androidx.appcompat.widget.AppCompatButton
+        android:id="@+id/shutter"
+        android:layout_width="57dp"
+        android:layout_height="57dp"
+        android:layout_marginBottom="112dp"
+        android:background="@drawable/round_button"
         android:elevation="2dp"
-        android:text = "Take Photo"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintLeft_toLeftOf="parent"
-        app:layout_constraintRight_toRightOf="parent"
-        />
+        app:layout_constraintRight_toRightOf="parent" />
 </androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/fragment_scan_home.xml b/app/src/main/res/layout/fragment_scan_home.xml
new file mode 100644
index 0000000000000000000000000000000000000000..53b37e0ea2256f75fb66ecce9900ca11f9fbf7af
--- /dev/null
+++ b/app/src/main/res/layout/fragment_scan_home.xml
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+
+    android:background="@color/md_theme_primary"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
+    <TextView
+        android:id="@+id/tv_scan_title"
+        style="@style/TextAppearance.HeadlineLarge"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="@dimen/title_top_margin"
+        android:layout_marginStart="30dp"
+        android:text="@string/title_scan"
+        android:textColor="@color/white"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <TextView
+        android:id = "@+id/tv_scan_deskripsi"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="20dp"
+        android:text="Tidak perlu masukin manual! Scan saja!!"
+        android:textColor="@color/white"
+        android:textSize="16sp"
+        app:layout_constraintStart_toStartOf="@+id/tv_scan_title"
+        app:layout_constraintTop_toBottomOf="@+id/tv_scan_title"
+        tools:layout_editor_absoluteX="1dp" />
+
+    <ImageView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="0dp"
+        android:layout_marginTop="0dp"
+        android:src="@drawable/scan"
+        app:layout_constraintStart_toStartOf="@+id/tv_scan_title"
+        app:layout_constraintTop_toBottomOf="@+id/tv_scan_deskripsi" />
+
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="190dp"
+        android:background="@color/white"
+        android:orientation="vertical"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        tools:layout_editor_absoluteX="60dp">
+
+        <Button
+            android:id = "@+id/to_scan_button"
+            style="@style/buttonStylePrimary"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="30dp"
+            android:layout_marginTop="25dp"
+            android:layout_marginEnd="30dp"
+            android:text="Foto Struk" />
+
+        <Button
+            android:id = "@+id/to_galeri_button"
+            style="@style/buttonStylePrimary"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="30dp"
+            android:layout_marginTop="10dp"
+            android:layout_marginEnd="30dp"
+            android:text="Buka Galeri" />
+    </LinearLayout>
+
+
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/app/src/main/res/navigation/mobile_navigation.xml b/app/src/main/res/navigation/mobile_navigation.xml
index 6f6eade73bbe3503d54e6153cccb6cc739046c07..c8967fa55993a8223abf954f3382ee6183a27106 100644
--- a/app/src/main/res/navigation/mobile_navigation.xml
+++ b/app/src/main/res/navigation/mobile_navigation.xml
@@ -20,12 +20,23 @@
             app:destination="@id/editTransactionFragment" />
     </fragment>
 
-
+    <fragment
+        android:id = "@+id/camera_scan"
+        android:name = "com.example.bandung_bondowoso.view.scan.ScanFragment"
+        android:label = "CameraScan"
+        tools:layout="@layout/fragment_scan"
+        />
     <fragment
         android:id="@+id/navigation_scan"
-        android:name="com.example.bandung_bondowoso.view.scan.ScanFragment"
+        android:name="com.example.bandung_bondowoso.view.scan.ScanHomeFragment"
         android:label="@string/title_scan"
-        tools:layout="@layout/fragment_scan" />
+        tools:layout="@layout/fragment_scan_home">
+        <action 
+            android:id = "@+id/action_navigation_scan_to_camera_scan"
+            app:destination = "@id/camera_scan"
+        />
+    </fragment>
+
 
     <fragment
         android:id="@+id/navigation_twibbon"