diff --git a/TODO.md b/TODO.md
index 59646d6..cb4fb3d 100644
--- a/TODO.md
+++ b/TODO.md
@@ -23,11 +23,12 @@
 ### Customer
 
 -   [x] Tampilan Depan Customer (banner, info, voucher, saldo, coin) - mobile page
--   [ ] Register Customer (wajib data lengkap)
--   [ ] Register Customer Gmail
--   [ ] Login Customer
--   [ ] Login Customer Gmail
--   [ ] Customer Edit Profile
+-   [x] Register Customer (wajib data lengkap)
+-   [x] Register Customer Gmail
+-   [x] Login Customer
+-   [x] Login Customer Gmail
+-   [x] Customer Edit Profile
+-   [ ] Register Refferal
 -   [ ] Customer Deposit Manual
 -   [ ] Customer Deposit Payment Gateway
 -   [ ] Customer Purchase Voucher
diff --git a/app/Http/Controllers/Customer/AuthController.php b/app/Http/Controllers/Customer/AuthController.php
index 123f1a9..2204fe3 100644
--- a/app/Http/Controllers/Customer/AuthController.php
+++ b/app/Http/Controllers/Customer/AuthController.php
@@ -4,8 +4,12 @@ namespace App\Http\Controllers\Customer;
 
 use App\Http\Controllers\Controller;
 use App\Models\Customer;
+use App\Models\CustomerLevel;
+use App\Models\CustomerLevelHistory;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Str;
 use Laravel\Socialite\Facades\Socialite;
 use SocialiteProviders\Manager\Config;
 
@@ -50,15 +54,24 @@ class AuthController extends Controller
         $user = Socialite::driver('google')->user();
         $customer = Customer::where('google_id', $user->id)->first();
         if ($customer == null) {
+            DB::beginTransaction();
+            $basic = CustomerLevel::where('key', CustomerLevel::BASIC)->first();
             $customer = Customer::create([
                 'fullname' => $user->name,
                 'name' => $user->nickname,
                 'email' => $user->email,
-                'username' => $user->id,
+                'username' => Str::random(10),
                 'google_id' => $user->id,
-                'image' => 'GOOGLE-' . $user->avatar,
                 'google_oauth_response' => json_encode($user),
+                'customer_level_id' => $basic->id,
             ]);
+
+            CustomerLevelHistory::create([
+                'customer_id' => $customer->id,
+                'customer_level_id' => $basic->id,
+                'date_time' => now(),
+            ]);
+            DB::commit();
         }
 
         Auth::guard('customer')->loginUsingId($customer->id);
@@ -82,6 +95,8 @@ class AuthController extends Controller
             'password' => 'string|required|min:8|confirmed',
         ]);
 
+        DB::beginTransaction();
+        $basic = CustomerLevel::where('key', CustomerLevel::BASIC)->first();
         $customer = Customer::create([
             'fullname' => $request->fullname,
             'name' => $request->name,
@@ -89,7 +104,14 @@ class AuthController extends Controller
             'phone' => $request->phone,
             'username' => $request->username,
             'password' => bcrypt($request->password),
+            'customer_level_id' => $basic->id,
+        ]);
+        CustomerLevelHistory::create([
+            'customer_id' => $customer->id,
+            'customer_level_id' => $basic->id,
+            'date_time' => now(),
         ]);
+        DB::commit();
 
         Auth::guard('customer')->loginUsingId($customer->id);
 
diff --git a/app/Http/Controllers/Customer/ProfileController.php b/app/Http/Controllers/Customer/ProfileController.php
index 8722c14..99e3966 100644
--- a/app/Http/Controllers/Customer/ProfileController.php
+++ b/app/Http/Controllers/Customer/ProfileController.php
@@ -34,7 +34,11 @@ class ProfileController extends Controller
         if ($request->hasFile('image')) {
             $file = $request->file('image');
             $file->store('uploads', 'public');
-            $customer->image = $file->hashName();
+            $customer->image = $file->hashName('uploads');
+        }
+
+        if ($request->password != null) {
+            $customer->password = bcrypt($request->password);
         }
 
         $customer->update([
@@ -43,8 +47,11 @@ class ProfileController extends Controller
             'address' => $request->address,
             'phone' => $request->phone,
             'username' => $request->username,
-            'password' => bcrypt($request->password),
             'image' => $customer->image,
+            'password' => $customer->password
         ]);
+
+        redirect()->route('customer.profile.show')
+            ->with('message', ['type' => 'success', 'message' => 'profile updateded']);
     }
 }
diff --git a/app/Http/Middleware/Authenticate.php b/app/Http/Middleware/Authenticate.php
index a9fb04a..07492de 100644
--- a/app/Http/Middleware/Authenticate.php
+++ b/app/Http/Middleware/Authenticate.php
@@ -14,8 +14,8 @@ class Authenticate extends Middleware
      */
     protected function redirectTo($request)
     {
-        if (! $request->expectsJson()) {
-            return route('admin.login');
+        if (!$request->expectsJson()) {
+            return route('customer.login');
         }
     }
 }
diff --git a/app/Http/Middleware/HandleInertiaCustomerRequests.php b/app/Http/Middleware/HandleInertiaCustomerRequests.php
index d4ab321..9579dbd 100644
--- a/app/Http/Middleware/HandleInertiaCustomerRequests.php
+++ b/app/Http/Middleware/HandleInertiaCustomerRequests.php
@@ -31,7 +31,7 @@ class HandleInertiaCustomerRequests extends Middleware
     {
         return array_merge(parent::share($request), [
             'auth' => [
-                'user' => auth('customer')->user(),
+                'user' => auth('customer')->user()->load(['level']),
             ],
             'flash' => [
                 'message' => fn () => $request->session()->get('message') ?? ['type' => null, 'message' => null],
diff --git a/app/Models/Customer.php b/app/Models/Customer.php
index 08557f3..617528b 100644
--- a/app/Models/Customer.php
+++ b/app/Models/Customer.php
@@ -39,25 +39,46 @@ class Customer extends Authenticatable
 
     protected $appends = [
         'image_url',
+        'display_deposit',
+        'display_coin',
     ];
 
     public function imageUrl(): Attribute
     {
         return Attribute::make(
             get: function () {
-                if ($this->google_id != null) {
-                    $image = explode('-', $this->images);
-                    if ($image[0] == "IMAGE") {
-                        return $image[1];
-                    }
+                if ($this->google_id != null && $this->image == null) {
+                    $user = json_decode($this->google_oauth_response);
+                    return $user?->avatar;
                 }
 
                 if ($this->image != null) {
-                    return $this->asset($this->image);
+                    return asset($this->image);
                 }
 
                 return asset('sample/avatar.svg');
             }
         );
     }
+
+
+    public function displayDeposit(): Attribute
+    {
+        return Attribute::make(get: function () {
+            return number_format($this->deposit_balance, 0, ',', '.');
+        });
+    }
+
+
+    public function displayCoin(): Attribute
+    {
+        return Attribute::make(get: function () {
+            return number_format($this->coin_balance, 0, ',', '.');
+        });
+    }
+
+    public function level()
+    {
+        return $this->belongsTo(CustomerLevel::class, 'customer_level_id');
+    }
 }
diff --git a/config/filesystems.php b/config/filesystems.php
index e9d9dbd..f676a1d 100644
--- a/config/filesystems.php
+++ b/config/filesystems.php
@@ -38,8 +38,8 @@ return [
 
         'public' => [
             'driver' => 'local',
-            'root' => storage_path('app/public'),
-            'url' => env('APP_URL').'/storage',
+            'root' => base_path('public'),
+            'url' => env('APP_URL') . '/upload',
             'visibility' => 'public',
             'throw' => false,
         ],
diff --git a/public/uploads/4tdHUpx78fokdCMK8uZZfBO5ARXzllmhvSUv1OqF.png b/public/uploads/4tdHUpx78fokdCMK8uZZfBO5ARXzllmhvSUv1OqF.png
new file mode 100644
index 0000000..b36f112
Binary files /dev/null and b/public/uploads/4tdHUpx78fokdCMK8uZZfBO5ARXzllmhvSUv1OqF.png differ
diff --git a/public/uploads/SSc8CDMHsShkIUFWol8WrYSu7coHDD2rWHPXS9z7.png b/public/uploads/SSc8CDMHsShkIUFWol8WrYSu7coHDD2rWHPXS9z7.png
new file mode 100644
index 0000000..b36f112
Binary files /dev/null and b/public/uploads/SSc8CDMHsShkIUFWol8WrYSu7coHDD2rWHPXS9z7.png differ
diff --git a/public/uploads/XM0gJaggvM5SrW1xBLomgn0vmOkCgUbQm3DUUE1m.png b/public/uploads/XM0gJaggvM5SrW1xBLomgn0vmOkCgUbQm3DUUE1m.png
new file mode 100644
index 0000000..ac64794
Binary files /dev/null and b/public/uploads/XM0gJaggvM5SrW1xBLomgn0vmOkCgUbQm3DUUE1m.png differ
diff --git a/resources/js/Components/Alert.jsx b/resources/js/Components/Alert.jsx
index 9d709de..8ea9705 100644
--- a/resources/js/Components/Alert.jsx
+++ b/resources/js/Components/Alert.jsx
@@ -20,7 +20,7 @@ export default function Alert({ type = '', children }) {
     if (type === 'success') {
         return (
             <div
-                className="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400"
+                className="p-4 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400"
                 role="alert"
             >
                 {children}
diff --git a/resources/js/Pages/Home/Index/UserBanner.jsx b/resources/js/Pages/Home/Index/UserBanner.jsx
index d74ef96..6ed4b66 100644
--- a/resources/js/Pages/Home/Index/UserBanner.jsx
+++ b/resources/js/Pages/Home/Index/UserBanner.jsx
@@ -11,7 +11,7 @@ export default function UserBanner({ user }) {
                     <div className="flex flex-row items-center space-x-1">
                         <div>+62{user.phone}</div>
                         <div className="text-xs font-semibold px-2 py-1 bg-white text-black rounded-xl">
-                            Gold
+                            {user.level.name}
                         </div>
                     </div>
                 </div>
@@ -32,9 +32,11 @@ export default function UserBanner({ user }) {
                             <HiOutlineCash />
                             <div>Saldo</div>
                         </div>
-                        <div className="font-bold">Rp 10.000</div>
+                        <div className="font-bold">
+                            Rp {user.display_deposit}
+                        </div>
                         <div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
-                            <div>Coin 10.000</div>
+                            <div>Coin {user.display_coin}</div>
                         </div>
                     </div>
                     <div className="flex flex-col border-l-2 pl-5 pr-5">
@@ -42,7 +44,9 @@ export default function UserBanner({ user }) {
                             {/* <HiOutlineAwa /> */}
                             <div>Rewards</div>
                         </div>
-                        <div className="font-bold">Gold Member</div>
+                        <div className="font-bold">
+                            {user.level.name} Member
+                        </div>
                         <div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
                             <div>Limit 100.000</div>
                         </div>
diff --git a/resources/js/Pages/Home/Profile/Form.jsx b/resources/js/Pages/Home/Profile/Form.jsx
index 299c289..2eee0a9 100644
--- a/resources/js/Pages/Home/Profile/Form.jsx
+++ b/resources/js/Pages/Home/Profile/Form.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Head, useForm, Link } from '@inertiajs/react'
+import { Head, useForm, Link, router } from '@inertiajs/react'
 import { FcGoogle } from 'react-icons/fc'
 
 import CustomerLayout from '@/Layouts/CustomerLayout'
@@ -35,7 +35,10 @@ export default function Index({ auth: { user }, flash }) {
     }
 
     const handleSubmit = () => {
-        post(route('customer.show'))
+        post(route('customer.profile.show'), {
+            onSuccess: () =>
+                setTimeout(router.get(route(route().current())), 1000),
+        })
     }
 
     const handleKeyDown = (e) => {
@@ -43,7 +46,7 @@ export default function Index({ auth: { user }, flash }) {
             handleSubmit()
         }
     }
-
+    console.log(user)
     return (
         <CustomerLayout>
             <Head title="Login" />
@@ -138,7 +141,7 @@ export default function Index({ auth: { user }, flash }) {
                             preview={
                                 <img
                                     src={`${data.image_url}`}
-                                    className="w-40 mb-1"
+                                    className="w-20 h-20 mb-1 rounded-full"
                                     alt="site logo"
                                 />
                             }
diff --git a/resources/js/Pages/Home/Profile/Index.jsx b/resources/js/Pages/Home/Profile/Index.jsx
index fe831ff..594088d 100644
--- a/resources/js/Pages/Home/Profile/Index.jsx
+++ b/resources/js/Pages/Home/Profile/Index.jsx
@@ -30,13 +30,21 @@ export default function Index({ auth: { user } }) {
                     {/* user */}
                     <div className="flex flex-row justify-between items-center px-5 py-6 text-lg bg-blue-600">
                         <div className="flex flex-row items-center space-x-2">
-                            <HiOutlineUserCircle className="text-white h-14 w-14" />
+                            {user.image_url !== null ? (
+                                <img
+                                    src={user.image_url}
+                                    alt="profile image"
+                                    className="rounded-full object-cover h-14 w-14"
+                                />
+                            ) : (
+                                <HiOutlineUserCircle className="text-white h-14 w-14" />
+                            )}
                             <div className="flex flex-col text-white">
                                 <div className="font-bold">{user.name}</div>
                                 <div className="flex flex-row items-center space-x-1">
                                     <div>+62{user.phone}</div>
                                     <div className="text-xs font-semibold px-2 py-1 bg-white text-black rounded-xl">
-                                        Gold
+                                        {user.level.name}
                                     </div>
                                 </div>
                             </div>
@@ -58,16 +66,20 @@ export default function Index({ auth: { user } }) {
                                     <HiOutlineCash />
                                     <div>Saldo</div>
                                 </div>
-                                <div className="font-bold">Rp 10.000</div>
+                                <div className="font-bold">
+                                    Rp {user.display_deposit}
+                                </div>
                                 <div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
-                                    <div>Coin 10.000</div>
+                                    <div>Coin {user.display_coin}</div>
                                 </div>
                             </div>
                             <div className="flex flex-col border-l-2 pl-5 pr-5">
                                 <div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
                                     <div>Rewards</div>
                                 </div>
-                                <div className="font-bold">Gold Member</div>
+                                <div className="font-bold">
+                                    {user.level.name} Member
+                                </div>
                                 <div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
                                     <div>Limit 100.000</div>
                                 </div>