diff --git a/TODO.md b/TODO.md
index 1b4ed9f..829af7f 100644
--- a/TODO.md
+++ b/TODO.md
@@ -18,10 +18,10 @@
 -   [x] tambah biaya admin di deposit manual transfer
 -   [x] info di ubah jadi html
 -   [ ] tambahan detail customer untuk detail mitra wbb
--   [ ] detail customer level untuk tampilan screen level customer di depan
--   [ ] rombak fitur affiliasi
+-   [x] detail customer level untuk tampilan screen level customer di depan
+-   [x] rombak fitur affiliasi
 -   [x] tambah detail di user admin
 -   [x] tambah logo bank
 -   [x] tambah setor tunai
--   [ ] pengaturan share dapat menggunakan html
+-   [x] pengaturan share dapat menggunakan html
 -   [ ] menu mitrawbb
diff --git a/app/Http/Controllers/Customer/CustomerLevelController.php b/app/Http/Controllers/Customer/CustomerLevelController.php
new file mode 100644
index 0000000..292a9fc
--- /dev/null
+++ b/app/Http/Controllers/Customer/CustomerLevelController.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Http\Controllers\Customer;
+
+use App\Http\Controllers\Controller;
+use App\Models\CustomerLevel;
+use Illuminate\Http\Request;
+
+class CustomerLevelController extends Controller
+{
+    public function index()
+    {
+        return inertia('CustomerLevel/Index', [
+            'levels' => CustomerLevel::all(),
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/SettingController.php b/app/Http/Controllers/SettingController.php
index 1cde4dd..ff7126a 100644
--- a/app/Http/Controllers/SettingController.php
+++ b/app/Http/Controllers/SettingController.php
@@ -16,7 +16,6 @@ class SettingController extends Controller
 
         return inertia('Setting/Index', [
             'setting' => $setting,
-            'midtrans_notification_url' => route('api.midtrans.notification'),
         ]);
     }
 
@@ -24,26 +23,14 @@ class SettingController extends Controller
     {
         $request->validate([
             'OPEN_WEBSITE_NAME' => 'required|string',
-            'AFFILATE_ENABLED' => 'required|in:0,1',
-            'AFFILATE_POIN_AMOUNT' => 'required|numeric',
-            'MIDTRANS_SERVER_KEY' => 'required|string',
-            'MIDTRANS_CLIENT_KEY' => 'required|string',
-            'MIDTRANS_MERCHANT_ID' => 'required|string',
-            'MIDTRANS_ENABLED' => 'required|in:0,1',
-            'midtrans_logo_file' => 'nullable|image',
+            'SHARE_TEXT' => 'required|string',
         ]);
 
         DB::beginTransaction();
-        foreach ($request->except(['midtrans_logo_file']) as $key => $value) {
+        foreach ($request->input() as $key => $value) {
             Setting::where('key', $key)->update(['value' => $value]);
         }
 
-        if ($request->hasFile('midtrans_logo_file')) {
-            $file = $request->file('midtrans_logo_file');
-            $file->store('uploads', 'public');
-            Setting::where('key', 'MIDTRANS_LOGO')->update(['value' => $file->hashName('uploads')]);
-        }
-
         Cache::flush();
 
         DB::commit();
diff --git a/database/seeders/DummySeeder.php b/database/seeders/DummySeeder.php
index 99d1f31..9c6f1cd 100644
--- a/database/seeders/DummySeeder.php
+++ b/database/seeders/DummySeeder.php
@@ -98,7 +98,7 @@ class DummySeeder extends Seeder
         ];
 
         $count = 0;
-        $locations = Location::limit(3)->get();
+        $locations = Location::orderBy('name', 'asc')->limit(3)->get();
         foreach ($locations as $location) { //ada 3 lokasi di tiap lokasi ada 3 profile
             $count += 1;
             foreach ($profiles as $expired => $quota) {
@@ -111,7 +111,7 @@ class DummySeeder extends Seeder
                     'location_id' => $location->id,
                     'name' => 'Profile ' . $quota,
                     'quota' => $quota,
-                    'display_note' => 'bisa semua',
+                    'display_note' => rand(0, 1) == 1 ? 'bisa semua' : null,
                     'expired' => rand(1, 3),
                     'expired_unit' => $expired,
                     'description' => '',
diff --git a/database/seeders/InstallationSeed.php b/database/seeders/InstallationSeed.php
index cecc0a8..f3773c7 100644
--- a/database/seeders/InstallationSeed.php
+++ b/database/seeders/InstallationSeed.php
@@ -61,7 +61,13 @@ class InstallationSeed extends Seeder
                 'name' => 'Basic',
                 'key' => 'basic',
                 'logo' => 'sample/basic.png',
-                'description' => '-',
+                'description' => '<p><span style="font-size: 18pt;"><strong>&nbsp;Level Ini Basic&nbsp;</strong></span></p>
+                <p>&nbsp; deskripsi berikut menjelaskan tentang level&nbsp;</p>
+                <p>&nbsp;</p>
+                <p>&nbsp; ini adalah sample deskripsi :&nbsp;</p>
+                <pre>&nbsp; 1. contoh 1</pre>
+                <pre>&nbsp; 2. contoh 2</pre>
+                <p>&nbsp;</p>',
                 'min_amount' =>
                 '100000',
                 'max_amount' => '500000'
@@ -70,7 +76,13 @@ class InstallationSeed extends Seeder
                 'name' => 'Silver',
                 'key' => 'silver',
                 'logo' => 'sample/silver.png',
-                'description' => '-',
+                'description' => '<p><span style="font-size: 18pt;"><strong>&nbsp;Level Ini Silver&nbsp;</strong></span></p>
+                <p>&nbsp; deskripsi berikut menjelaskan tentang level&nbsp;</p>
+                <p>&nbsp;</p>
+                <p>&nbsp; ini adalah sample deskripsi :&nbsp;</p>
+                <pre>&nbsp; 1. contoh 1</pre>
+                <pre>&nbsp; 2. contoh 2</pre>
+                <p>&nbsp;</p>',
                 'min_amount' => '100000',
                 'max_amount' => '1000000'
             ],
@@ -78,7 +90,13 @@ class InstallationSeed extends Seeder
                 'name' => 'Gold',
                 'key' => 'gold',
                 'logo' => 'sample/gold.png',
-                'description' => '-',
+                'description' => '<p><span style="font-size: 18pt;"><strong>&nbsp;Level Ini Gold&nbsp;</strong></span></p>
+                <p>&nbsp; deskripsi berikut menjelaskan tentang level&nbsp;</p>
+                <p>&nbsp;</p>
+                <p>&nbsp; ini adalah sample deskripsi :&nbsp;</p>
+                <pre>&nbsp; 1. contoh 1</pre>
+                <pre>&nbsp; 2. contoh 2</pre>
+                <p>&nbsp;</p>',
                 'min_amount' => '100000',
                 'max_amount' => '2000000'
             ],
@@ -86,7 +104,13 @@ class InstallationSeed extends Seeder
                 'name' => 'Platinum',
                 'key' => 'platinum',
                 'logo' => 'sample/platinum.png',
-                'description' => '-',
+                'description' => '<p><span style="font-size: 18pt;"><strong>&nbsp;Level Ini Platinum&nbsp;</strong></span></p>
+                <p>&nbsp; deskripsi berikut menjelaskan tentang level&nbsp;</p>
+                <p>&nbsp;</p>
+                <p>&nbsp; ini adalah sample deskripsi :&nbsp;</p>
+                <pre>&nbsp; 1. contoh 1</pre>
+                <pre>&nbsp; 2. contoh 2</pre>
+                <p>&nbsp;</p>',
                 'min_amount' => '100000',
                 'max_amount' => '3000000'
             ],
diff --git a/resources/js/Customer/CustomerLevel/Index.jsx b/resources/js/Customer/CustomerLevel/Index.jsx
new file mode 100644
index 0000000..fab8ec5
--- /dev/null
+++ b/resources/js/Customer/CustomerLevel/Index.jsx
@@ -0,0 +1,87 @@
+import React, { useState } from 'react'
+import Carousel from 'nuka-carousel'
+import { Head, router } from '@inertiajs/react'
+import { HiChevronLeft } from 'react-icons/hi2'
+
+import CustomerLayout from '@/Layouts/CustomerLayout'
+
+export default function Index(props) {
+    const {
+        levels,
+        auth: { user },
+    } = props
+
+    const levelIndex = levels.findIndex((l) => l.id === user.level.id)
+    const [selectedIndex] = useState(levelIndex)
+    const [index, setIndex] = useState(selectedIndex)
+
+    return (
+        <CustomerLayout>
+            <Head title="Reward Member" />
+            <div className="flex flex-col min-h-[calc(90dvh)]">
+                <div
+                    className="w-full px-5 py-5"
+                    onClick={() => {
+                        router.get(route('home.index', { direct: 1 }))
+                    }}
+                >
+                    <HiChevronLeft className="font-bold h-5 w-5" />
+                </div>
+                <div className="w-full px-2">
+                    <Carousel
+                        autoplay={false}
+                        withoutControls={true}
+                        wrapAround={true}
+                        cellSpacing={10}
+                        slideIndex={selectedIndex}
+                        slidesToShow={1.25}
+                        afterSlide={(index) => {
+                            setIndex(index)
+                        }}
+                    >
+                        {levels.map((level, index) => (
+                            <div key={level.id} className="flex flex-col h-40">
+                                <div className="h-36 rounded-lg border p-2 flex flex-row gap-2 items-center shadow-lg">
+                                    <div>
+                                        <img src={level.logo_url} />
+                                    </div>
+                                    <div className=" flex-1 flex flex-col">
+                                        <div className="text-2xl font-bold">
+                                            {level.name}
+                                        </div>
+                                        {levelIndex === index && (
+                                            <div className="text-gray-400 text-sm">
+                                                Level kamu saat ini
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </Carousel>
+                    {/*  */}
+                    <Carousel
+                        autoplay={false}
+                        withoutControls={true}
+                        wrapAround={true}
+                        dragging={false}
+                        cellSpacing={10}
+                        slideIndex={index}
+                        slidesToShow={1}
+                    >
+                        {levels.map((level) => (
+                            <div key={level.id} className="flex flex-col mt-4">
+                                <div
+                                    dangerouslySetInnerHTML={{
+                                        __html: level.description,
+                                    }}
+                                    className="w-full"
+                                />
+                            </div>
+                        ))}
+                    </Carousel>
+                </div>
+            </div>
+        </CustomerLayout>
+    )
+}
diff --git a/resources/js/Customer/Index/IndexPartials/FavoriteVoucher.jsx b/resources/js/Customer/Index/IndexPartials/FavoriteVoucher.jsx
index 7d601a1..bee3f14 100644
--- a/resources/js/Customer/Index/IndexPartials/FavoriteVoucher.jsx
+++ b/resources/js/Customer/Index/IndexPartials/FavoriteVoucher.jsx
@@ -75,12 +75,14 @@ export default function FavoriteVoucher() {
             <div className="w-full flex flex-row overflow-y-scroll space-x-2 px-4 mt-2">
                 {_flocations.map((location) => (
                     <div
-                        className="flex flex-row items-center gap-1 px-2 py-1 rounded-2xl bg-blue-100 border border-blue-200 hover:bg-blue-500"
+                        className="flex flex-row items-center gap-1 px-2 py-1 rounded-2xl bg-blue-100 border border-blue-200"
                         key={location.id}
-                        onClick={() => handleRemoveLocation(location)}
                     >
                         <div>{location.name}</div>
-                        <div className="pl-2">
+                        <div
+                            className="pl-2"
+                            onClick={() => handleRemoveLocation(location)}
+                        >
                             <HiOutlineStar className="h-5 w-5 text-yellow-300 fill-yellow-300" />
                         </div>
                     </div>
diff --git a/resources/js/Customer/Index/Partials/BalanceBanner.jsx b/resources/js/Customer/Index/Partials/BalanceBanner.jsx
index e26ffac..7a60dc9 100644
--- a/resources/js/Customer/Index/Partials/BalanceBanner.jsx
+++ b/resources/js/Customer/Index/Partials/BalanceBanner.jsx
@@ -5,12 +5,12 @@ import { HiOutlineCash } from 'react-icons/hi'
 
 export default function BalanceBanner({ user }) {
     return (
-        <div
-            className="flex flex-row px-5 pb-3 text-base bg-primary-900"
-            onClick={() => router.get(route('customer.deposit.index'))}
-        >
+        <div className="flex flex-row px-5 pb-3 text-base bg-primary-900">
             <div className="flex flex-row w-full shadow py-2 px-2 rounded bg-white items-center justify-between">
-                <div className="flex flex-col w-full">
+                <div
+                    className="flex flex-col w-full"
+                    onClick={() => router.get(route('customer.deposit.index'))}
+                >
                     <div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
                         <HiOutlineCash />
                         <div>Saldo</div>
@@ -20,9 +20,13 @@ export default function BalanceBanner({ user }) {
                         <div>poin {user.display_poin}</div>
                     </div>
                 </div>
-                <div className="flex flex-col border-l-2 pl-5 pr-5">
+                <div
+                    className="flex flex-col w-[200px] border-l-2 pl-2"
+                    onClick={() =>
+                        router.get(route('customer.customer-level.index'))
+                    }
+                >
                     <div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
-                        {/* <HiOutlineAwa /> */}
                         <div>Rewards</div>
                     </div>
                     <div className="font-bold">{user.level.name}</div>
diff --git a/resources/js/Customer/Profile/Index.jsx b/resources/js/Customer/Profile/Index.jsx
index 15290be..00179b2 100644
--- a/resources/js/Customer/Profile/Index.jsx
+++ b/resources/js/Customer/Profile/Index.jsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { Head, router } from '@inertiajs/react'
-import { toast } from 'react-toastify'
 import { HiOutlineBell } from 'react-icons/hi'
 import {
     HiChevronRight,
@@ -8,8 +7,9 @@ import {
     HiOutlineUserCircle,
 } from 'react-icons/hi2'
 
-import CustomerLayout from '@/Layouts/CustomerLayout'
+import { toastSuccess } from '../utils'
 import { useModalState } from '@/hooks'
+import CustomerLayout from '@/Layouts/CustomerLayout'
 import ModalConfirm from '@/Components/ModalConfirm'
 import BalanceBanner from '../Index/Partials/BalanceBanner'
 
@@ -25,7 +25,7 @@ export default function Index({ auth: { user }, notification_count }) {
     }
 
     const handleCopyToClipboard = (text) => {
-        toast.info('copied to clipboard')
+        toastSuccess('copied to clipboard')
         navigator.clipboard.writeText(text)
     }
 
diff --git a/resources/js/Customer/utils.jsx b/resources/js/Customer/utils.jsx
new file mode 100644
index 0000000..f298b1c
--- /dev/null
+++ b/resources/js/Customer/utils.jsx
@@ -0,0 +1,7 @@
+import toast from 'react-hot-toast'
+
+export const toastSuccess = (message) => {
+    toast.success((t) => {
+        return <div onClick={() => toast.dismiss(t.id)}>{message}</div>
+    })
+}
diff --git a/routes/web.php b/routes/web.php
index ec32b0c..e0d3cf5 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\Customer\CustomerLevelController;
 use App\Http\Controllers\Customer\AuthController;
 use App\Http\Controllers\Customer\CartController;
 use App\Http\Controllers\Customer\DepositController;
@@ -73,6 +74,9 @@ Route::middleware(['http_secure_aware', 'guard_should_customer', 'inertia.custom
 
         // notification
         Route::get('notifications', [HomeController::class, 'notification'])->name('notification.index');
+
+        // customer level
+        Route::get('customer-level', [CustomerLevelController::class, 'index'])->name('customer.customer-level.index');
     });
 
     Route::middleware('guest:customer')->group(function () {