diff --git a/app/Models/Customer.php b/app/Models/Customer.php
index c26fd94..e7927bd 100644
--- a/app/Models/Customer.php
+++ b/app/Models/Customer.php
@@ -8,6 +8,7 @@ use Illuminate\Database\Eloquent\Concerns\HasUlids;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\SoftDeletes;
 use Illuminate\Foundation\Auth\User as Authenticatable;
+use Illuminate\Support\Str;
 
 class Customer extends Authenticatable
 {
@@ -51,6 +52,7 @@ class Customer extends Authenticatable
                 $basic = CustomerLevel::where('key', CustomerLevel::BASIC)->first();
 
                 $customer->customer_level_id = $basic->id;
+                $customer->referral_code = Str::random(6);
 
                 CustomerLevelHistory::create([
                     'customer_id' => $customer->id,
diff --git a/resources/css/spinner.css b/resources/css/spinner.css
new file mode 100644
index 0000000..7fd6006
--- /dev/null
+++ b/resources/css/spinner.css
@@ -0,0 +1,74 @@
+#nprogress {
+    pointer-events: none;
+}
+
+#nprogress .bar {
+    background: #003bf1;
+    position: fixed;
+    z-index: 1031;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 5px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+    display: block;
+    position: absolute;
+    right: 0px;
+    width: 100px;
+    height: 100%;
+    box-shadow: 0 0 10px #003bf1, 0 0 5px #003bf1;
+    opacity: 1.0;
+
+    -webkit-transform: rotate(3deg) translate(0px, -4px);
+    -ms-transform: rotate(3deg) translate(0px, -4px);
+    transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+    display: block;
+    position: fixed;
+    z-index: 1031;
+    top: 0px !important;
+    right: 0px !important;
+    width: 100% !important;
+    height: 100% !important;
+    background-color: rgb(30 41 59 / 0.5);
+}
+
+#nprogress .spinner-icon {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 20%;
+    width: 200px !important;
+    height: 200px !important;
+    box-sizing: border-box;
+
+    border: solid 12px transparent !important;
+    border-top-color: #003bf1 !important;
+    border-left-color: #003bf1 !important;
+    border-radius: 50%;
+
+    -webkit-animation: nprogress-spinner 400ms linear infinite;
+    animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+    position: absolute;
+    background-color: rgb(30 41 59 / 0.5);
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+    position: absolute;
+}
\ No newline at end of file
diff --git a/resources/js/app.jsx b/resources/js/app.jsx
index 03f1064..c56bcd5 100644
--- a/resources/js/app.jsx
+++ b/resources/js/app.jsx
@@ -1,22 +1,28 @@
-import './bootstrap';
-import '../css/app.css';
-import 'flowbite';
-import 'react-toastify/dist/ReactToastify.css';
+import './bootstrap'
+import '../css/app.css'
+import '../css/spinner.css'
+import 'flowbite'
+import 'react-toastify/dist/ReactToastify.css'
 
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { createInertiaApp } from '@inertiajs/react';
-import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { createInertiaApp } from '@inertiajs/react'
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
 
-const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
+const appName =
+    window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel'
 
 createInertiaApp({
     title: (title) => `${title} - ${appName}`,
-    resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
+    resolve: (name) =>
+        resolvePageComponent(
+            `./Pages/${name}.jsx`,
+            import.meta.glob('./Pages/**/*.jsx')
+        ),
     setup({ el, App, props }) {
-        const root = createRoot(el);
+        const root = createRoot(el)
 
-        root.render(<App {...props} />);
+        root.render(<App {...props} />)
     },
-    progress: { color: '#003bf1' , showSpinner: true, includeCSS: true},
-});
+    progress: { color: '#003bf1', showSpinner: true, includeCSS: true },
+})