diff --git a/api-calls/app/Http/Controllers/AdminProductController.php b/api-calls/app/Http/Controllers/AdminProductController.php
new file mode 100644
index 0000000..d0b3362
--- /dev/null
+++ b/api-calls/app/Http/Controllers/AdminProductController.php
@@ -0,0 +1,91 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\Product;
+
+class AdminProductController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        $products = Product::all();
+        return view('admin.products.index', compact('products'));
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        $product = new Product();
+        return view('admin.products.create', ['product' => $product]);
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        $validatedData = $this->validatedData($request);
+        Product::create($validatedData);
+
+        return redirect()->route('admin.products.index')->with('success', 'Product created successfully!');
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(string $id)
+    {
+        $product = Product::findOrFail($id);
+        return view('admin.products.show', compact('product'));
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(string $id)
+    {
+        $product = Product::findOrFail($id);
+        return view('admin.products.edit', compact('product'));
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, string $id)
+    {
+        $product = Product::findOrFail($id);
+        $validatedData = $this->validatedData($request, $product);
+        $product->update($validatedData);
+
+        return redirect()->route('admin.products.index')->with('success', 'Product updated successfully!');
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $id)
+    {
+        $product = Product::find($id);
+        $product->delete();
+        return redirect()->route('admin.products.index')->with('success', 'Product deleted successfully!');
+    }
+
+    private function validatedData(Request $request, $product = null)
+    {
+        $rules = [
+            'name' => 'required|max:255',
+            'price' => 'required|numeric',
+            'description' => 'nullable',
+            'item_number' => 'required|unique:products,item_number' . ($product ? ',' . $product->id : ''),
+            'image' => 'nullable|url'
+        ];
+
+        return $request->validate($rules);
+    }
+}
diff --git a/api-calls/app/Http/Controllers/Auth/ConfirmPasswordController.php b/api-calls/app/Http/Controllers/Auth/ConfirmPasswordController.php
new file mode 100644
index 0000000..3559954
--- /dev/null
+++ b/api-calls/app/Http/Controllers/Auth/ConfirmPasswordController.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Http\Controllers\Auth;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Foundation\Auth\ConfirmsPasswords;
+
+class ConfirmPasswordController extends Controller
+{
+    /*
+    |--------------------------------------------------------------------------
+    | Confirm Password Controller
+    |--------------------------------------------------------------------------
+    |
+    | This controller is responsible for handling password confirmations and
+    | uses a simple trait to include the behavior. You're free to explore
+    | this trait and override any functions that require customization.
+    |
+    */
+
+    use ConfirmsPasswords;
+
+    /**
+     * Where to redirect users when the intended url fails.
+     *
+     * @var string
+     */
+    protected $redirectTo = '/home';
+
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+}
diff --git a/api-calls/app/Http/Controllers/Auth/ForgotPasswordController.php b/api-calls/app/Http/Controllers/Auth/ForgotPasswordController.php
new file mode 100644
index 0000000..465c39c
--- /dev/null
+++ b/api-calls/app/Http/Controllers/Auth/ForgotPasswordController.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Controllers\Auth;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Foundation\Auth\SendsPasswordResetEmails;
+
+class ForgotPasswordController extends Controller
+{
+    /*
+    |--------------------------------------------------------------------------
+    | Password Reset Controller
+    |--------------------------------------------------------------------------
+    |
+    | This controller is responsible for handling password reset emails and
+    | includes a trait which assists in sending these notifications from
+    | your application to your users. Feel free to explore this trait.
+    |
+    */
+
+    use SendsPasswordResetEmails;
+}
diff --git a/api-calls/app/Http/Controllers/Auth/LoginController.php b/api-calls/app/Http/Controllers/Auth/LoginController.php
new file mode 100644
index 0000000..b2ea669
--- /dev/null
+++ b/api-calls/app/Http/Controllers/Auth/LoginController.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Http\Controllers\Auth;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Foundation\Auth\AuthenticatesUsers;
+
+class LoginController extends Controller
+{
+    /*
+    |--------------------------------------------------------------------------
+    | Login Controller
+    |--------------------------------------------------------------------------
+    |
+    | This controller handles authenticating users for the application and
+    | redirecting them to your home screen. The controller uses a trait
+    | to conveniently provide its functionality to your applications.
+    |
+    */
+
+    use AuthenticatesUsers;
+
+    /**
+     * Where to redirect users after login.
+     *
+     * @var string
+     */
+    protected $redirectTo = '/home';
+
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->middleware('guest')->except('logout');
+    }
+}
diff --git a/api-calls/app/Http/Controllers/Auth/RegisterController.php b/api-calls/app/Http/Controllers/Auth/RegisterController.php
new file mode 100644
index 0000000..961ea36
--- /dev/null
+++ b/api-calls/app/Http/Controllers/Auth/RegisterController.php
@@ -0,0 +1,72 @@
+<?php
+
+namespace App\Http\Controllers\Auth;
+
+use App\Http\Controllers\Controller;
+use App\Models\User;
+use Illuminate\Foundation\Auth\RegistersUsers;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\Validator;
+
+class RegisterController extends Controller
+{
+    /*
+    |--------------------------------------------------------------------------
+    | Register Controller
+    |--------------------------------------------------------------------------
+    |
+    | This controller handles the registration of new users as well as their
+    | validation and creation. By default this controller uses a trait to
+    | provide this functionality without requiring any additional code.
+    |
+    */
+
+    use RegistersUsers;
+
+    /**
+     * Where to redirect users after registration.
+     *
+     * @var string
+     */
+    protected $redirectTo = '/home';
+
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->middleware('guest');
+    }
+
+    /**
+     * Get a validator for an incoming registration request.
+     *
+     * @param  array  $data
+     * @return \Illuminate\Contracts\Validation\Validator
+     */
+    protected function validator(array $data)
+    {
+        return Validator::make($data, [
+            'name' => ['required', 'string', 'max:255'],
+            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
+            'password' => ['required', 'string', 'min:8', 'confirmed'],
+        ]);
+    }
+
+    /**
+     * Create a new user instance after a valid registration.
+     *
+     * @param  array  $data
+     * @return \App\Models\User
+     */
+    protected function create(array $data)
+    {
+        return User::create([
+            'name' => $data['name'],
+            'email' => $data['email'],
+            'password' => Hash::make($data['password']),
+        ]);
+    }
+}
diff --git a/api-calls/app/Http/Controllers/Auth/ResetPasswordController.php b/api-calls/app/Http/Controllers/Auth/ResetPasswordController.php
new file mode 100644
index 0000000..fe965b2
--- /dev/null
+++ b/api-calls/app/Http/Controllers/Auth/ResetPasswordController.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Controllers\Auth;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Foundation\Auth\ResetsPasswords;
+
+class ResetPasswordController extends Controller
+{
+    /*
+    |--------------------------------------------------------------------------
+    | Password Reset Controller
+    |--------------------------------------------------------------------------
+    |
+    | This controller is responsible for handling password reset requests
+    | and uses a simple trait to include this behavior. You're free to
+    | explore this trait and override any methods you wish to tweak.
+    |
+    */
+
+    use ResetsPasswords;
+
+    /**
+     * Where to redirect users after resetting their password.
+     *
+     * @var string
+     */
+    protected $redirectTo = '/home';
+}
diff --git a/api-calls/app/Http/Controllers/Auth/VerificationController.php b/api-calls/app/Http/Controllers/Auth/VerificationController.php
new file mode 100644
index 0000000..23a43a8
--- /dev/null
+++ b/api-calls/app/Http/Controllers/Auth/VerificationController.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Http\Controllers\Auth;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Foundation\Auth\VerifiesEmails;
+
+class VerificationController extends Controller
+{
+    /*
+    |--------------------------------------------------------------------------
+    | Email Verification Controller
+    |--------------------------------------------------------------------------
+    |
+    | This controller is responsible for handling email verification for any
+    | user that recently registered with the application. Emails may also
+    | be re-sent if the user didn't receive the original email message.
+    |
+    */
+
+    use VerifiesEmails;
+
+    /**
+     * Where to redirect users after verification.
+     *
+     * @var string
+     */
+    protected $redirectTo = '/home';
+
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->middleware('auth');
+        $this->middleware('signed')->only('verify');
+        $this->middleware('throttle:6,1')->only('verify', 'resend');
+    }
+}
diff --git a/api-calls/app/Http/Controllers/Controller.php b/api-calls/app/Http/Controllers/Controller.php
index 8677cd5..77ec359 100644
--- a/api-calls/app/Http/Controllers/Controller.php
+++ b/api-calls/app/Http/Controllers/Controller.php
@@ -2,7 +2,11 @@
 
 namespace App\Http\Controllers;
 
-abstract class Controller
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+use Illuminate\Foundation\Validation\ValidatesRequests;
+use Illuminate\Routing\Controller as BaseController;
+
+class Controller extends BaseController
 {
-    //
+    use AuthorizesRequests, ValidatesRequests;
 }
diff --git a/api-calls/app/Http/Controllers/HomeController.php b/api-calls/app/Http/Controllers/HomeController.php
new file mode 100644
index 0000000..7cbc2c3
--- /dev/null
+++ b/api-calls/app/Http/Controllers/HomeController.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class HomeController extends Controller
+{
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    /**
+     * Show the application dashboard.
+     *
+     * @return \Illuminate\Contracts\Support\Renderable
+     */
+    public function index()
+    {
+        return view('home');
+    }
+}
diff --git a/api-calls/app/Http/Controllers/ProductController.php b/api-calls/app/Http/Controllers/ProductController.php
index f720e56..5a6beed 100644
--- a/api-calls/app/Http/Controllers/ProductController.php
+++ b/api-calls/app/Http/Controllers/ProductController.php
@@ -19,15 +19,16 @@ public function index()
     /**
      * Show the form for creating a new resource.
      */
-    public function create()
+    /*public function create()
     {
         return view('products.create');
     }
+    */
 
     /**
      * Store a newly created resource in storage.
      */
-    public function store(Request $request)
+    /* public function store(Request $request)
     {
         $validatedData = $request->validate([
             'name' => 'required|max:255',
@@ -41,6 +42,7 @@ public function store(Request $request)
     
         return redirect('/products');
     }
+    */
 
     /**
      * Display the specified resource.
@@ -53,15 +55,16 @@ public function show(Product $product)
     /**
      * Show the form for editing the specified resource.
      */
-    public function edit(Product $product)
+    /*public function edit(Product $product)
     {
         return view('products.edit', compact('product'));
     }
+    /*
 
     /**
      * Update the specified resource in storage.
      */
-    public function update(Request $request, Product $product)
+   /* public function update(Request $request, Product $product)
     {
         $validatedData = $request->validate([
             'name' => 'required|max:255',
@@ -73,13 +76,15 @@ public function update(Request $request, Product $product)
         $product->update($validatedData);
         return redirect('/products');
     }
+    */
 
     /**
      * Remove the specified resource from storage.
      */
-    public function destroy(Product $product)
+    /*public function destroy(Product $product)
     {
         $product->delete();
         return redirect('/products');
     }
+    */
 }
diff --git a/api-calls/composer.json b/api-calls/composer.json
index 90c1344..d59213f 100644
--- a/api-calls/composer.json
+++ b/api-calls/composer.json
@@ -8,7 +8,8 @@
         "php": "^8.2",
         "laravel/breeze": "^2.0",
         "laravel/framework": "^11.0",
-        "laravel/tinker": "^2.9"
+        "laravel/tinker": "^2.9",
+        "laravel/ui": "^4.5"
     },
     "require-dev": {
         "fakerphp/faker": "^1.23",
diff --git a/api-calls/composer.lock b/api-calls/composer.lock
index d250b4b..7a27f4c 100644
--- a/api-calls/composer.lock
+++ b/api-calls/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "84c61af57b4c8d8b767caf42ec360a3d",
+    "content-hash": "64f31fa2e9f48bf15b1ffab05eb0463f",
     "packages": [
         {
             "name": "brick/math",
@@ -1493,6 +1493,69 @@
             },
             "time": "2024-01-04T16:10:04+00:00"
         },
+        {
+            "name": "laravel/ui",
+            "version": "v4.5.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/laravel/ui.git",
+                "reference": "a3562953123946996a503159199d6742d5534e61"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/laravel/ui/zipball/a3562953123946996a503159199d6742d5534e61",
+                "reference": "a3562953123946996a503159199d6742d5534e61",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/console": "^9.21|^10.0|^11.0",
+                "illuminate/filesystem": "^9.21|^10.0|^11.0",
+                "illuminate/support": "^9.21|^10.0|^11.0",
+                "illuminate/validation": "^9.21|^10.0|^11.0",
+                "php": "^8.0",
+                "symfony/console": "^6.0|^7.0"
+            },
+            "require-dev": {
+                "orchestra/testbench": "^7.35|^8.15|^9.0",
+                "phpunit/phpunit": "^9.3|^10.4|^11.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "4.x-dev"
+                },
+                "laravel": {
+                    "providers": [
+                        "Laravel\\Ui\\UiServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Laravel\\Ui\\": "src/",
+                    "Illuminate\\Foundation\\Auth\\": "auth-backend/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Taylor Otwell",
+                    "email": "taylor@laravel.com"
+                }
+            ],
+            "description": "Laravel UI utilities and presets.",
+            "keywords": [
+                "laravel",
+                "ui"
+            ],
+            "support": {
+                "source": "https://github.com/laravel/ui/tree/v4.5.1"
+            },
+            "time": "2024-03-21T18:12:29+00:00"
+        },
         {
             "name": "league/commonmark",
             "version": "2.4.2",
diff --git a/api-calls/package-lock.json b/api-calls/package-lock.json
index f9ba164..383b175 100644
--- a/api-calls/package-lock.json
+++ b/api-calls/package-lock.json
@@ -8,12 +8,16 @@
                 "bootstrap": "^5.3.3"
             },
             "devDependencies": {
+                "@popperjs/core": "^2.11.6",
                 "@tailwindcss/forms": "^0.5.2",
+                "@vitejs/plugin-vue": "^5.0.4",
                 "alpinejs": "^3.4.2",
                 "autoprefixer": "^10.4.2",
                 "axios": "^1.6.4",
+                "bootstrap": "^5.2.3",
                 "laravel-vite-plugin": "^1.0",
                 "postcss": "^8.4.31",
+                "sass": "^1.75.0",
                 "tailwindcss": "^3.1.0",
                 "vite": "^5.0"
             }
@@ -30,6 +34,19 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/@babel/parser": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.5.tgz",
+            "integrity": "sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==",
+            "dev": true,
+            "peer": true,
+            "bin": {
+                "parser": "bin/babel-parser.js"
+            },
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
         "node_modules/@esbuild/aix-ppc64": {
             "version": "0.20.2",
             "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@@ -512,7 +529,7 @@
             "version": "2.11.8",
             "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
             "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-            "peer": true,
+            "dev": true,
             "funding": {
                 "type": "opencollective",
                 "url": "https://opencollective.com/popperjs"
@@ -731,6 +748,101 @@
             "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
             "dev": true
         },
+        "node_modules/@vitejs/plugin-vue": {
+            "version": "5.0.4",
+            "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
+            "integrity": "sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==",
+            "dev": true,
+            "engines": {
+                "node": "^18.0.0 || >=20.0.0"
+            },
+            "peerDependencies": {
+                "vite": "^5.0.0",
+                "vue": "^3.2.25"
+            }
+        },
+        "node_modules/@vue/compiler-core": {
+            "version": "3.4.26",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.26.tgz",
+            "integrity": "sha512-N9Vil6Hvw7NaiyFUFBPXrAyETIGlQ8KcFMkyk6hW1Cl6NvoqvP+Y8p1Eqvx+UdqsnrnI9+HMUEJegzia3mhXmQ==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "@babel/parser": "^7.24.4",
+                "@vue/shared": "3.4.26",
+                "entities": "^4.5.0",
+                "estree-walker": "^2.0.2",
+                "source-map-js": "^1.2.0"
+            }
+        },
+        "node_modules/@vue/compiler-core/node_modules/@vue/shared": {
+            "version": "3.4.26",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.26.tgz",
+            "integrity": "sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ==",
+            "dev": true,
+            "peer": true
+        },
+        "node_modules/@vue/compiler-dom": {
+            "version": "3.4.26",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.26.tgz",
+            "integrity": "sha512-4CWbR5vR9fMg23YqFOhr6t6WB1Fjt62d6xdFPyj8pxrYub7d+OgZaObMsoxaF9yBUHPMiPFK303v61PwAuGvZA==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "@vue/compiler-core": "3.4.26",
+                "@vue/shared": "3.4.26"
+            }
+        },
+        "node_modules/@vue/compiler-dom/node_modules/@vue/shared": {
+            "version": "3.4.26",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.26.tgz",
+            "integrity": "sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ==",
+            "dev": true,
+            "peer": true
+        },
+        "node_modules/@vue/compiler-sfc": {
+            "version": "3.4.26",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.26.tgz",
+            "integrity": "sha512-It1dp+FAOCgluYSVYlDn5DtZBxk1NCiJJfu2mlQqa/b+k8GL6NG/3/zRbJnHdhV2VhxFghaDq5L4K+1dakW6cw==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "@babel/parser": "^7.24.4",
+                "@vue/compiler-core": "3.4.26",
+                "@vue/compiler-dom": "3.4.26",
+                "@vue/compiler-ssr": "3.4.26",
+                "@vue/shared": "3.4.26",
+                "estree-walker": "^2.0.2",
+                "magic-string": "^0.30.10",
+                "postcss": "^8.4.38",
+                "source-map-js": "^1.2.0"
+            }
+        },
+        "node_modules/@vue/compiler-sfc/node_modules/@vue/shared": {
+            "version": "3.4.26",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.26.tgz",
+            "integrity": "sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ==",
+            "dev": true,
+            "peer": true
+        },
+        "node_modules/@vue/compiler-ssr": {
+            "version": "3.4.26",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.26.tgz",
+            "integrity": "sha512-FNwLfk7LlEPRY/g+nw2VqiDKcnDTVdCfBREekF8X74cPLiWHUX6oldktf/Vx28yh4STNy7t+/yuLoMBBF7YDiQ==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "@vue/compiler-dom": "3.4.26",
+                "@vue/shared": "3.4.26"
+            }
+        },
+        "node_modules/@vue/compiler-ssr/node_modules/@vue/shared": {
+            "version": "3.4.26",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.26.tgz",
+            "integrity": "sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ==",
+            "dev": true,
+            "peer": true
+        },
         "node_modules/@vue/reactivity": {
             "version": "3.1.5",
             "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
@@ -740,6 +852,74 @@
                 "@vue/shared": "3.1.5"
             }
         },
+        "node_modules/@vue/runtime-core": {
+            "version": "3.4.26",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.26.tgz",
+            "integrity": "sha512-AFJDLpZvhT4ujUgZSIL9pdNcO23qVFh7zWCsNdGQBw8ecLNxOOnPcK9wTTIYCmBJnuPHpukOwo62a2PPivihqw==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "@vue/reactivity": "3.4.26",
+                "@vue/shared": "3.4.26"
+            }
+        },
+        "node_modules/@vue/runtime-core/node_modules/@vue/reactivity": {
+            "version": "3.4.26",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.26.tgz",
+            "integrity": "sha512-E/ynEAu/pw0yotJeLdvZEsp5Olmxt+9/WqzvKff0gE67tw73gmbx6tRkiagE/eH0UCubzSlGRebCbidB1CpqZQ==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "@vue/shared": "3.4.26"
+            }
+        },
+        "node_modules/@vue/runtime-core/node_modules/@vue/shared": {
+            "version": "3.4.26",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.26.tgz",
+            "integrity": "sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ==",
+            "dev": true,
+            "peer": true
+        },
+        "node_modules/@vue/runtime-dom": {
+            "version": "3.4.26",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.26.tgz",
+            "integrity": "sha512-UftYA2hUXR2UOZD/Fc3IndZuCOOJgFxJsWOxDkhfVcwLbsfh2CdXE2tG4jWxBZuDAs9J9PzRTUFt1PgydEtItw==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "@vue/runtime-core": "3.4.26",
+                "@vue/shared": "3.4.26",
+                "csstype": "^3.1.3"
+            }
+        },
+        "node_modules/@vue/runtime-dom/node_modules/@vue/shared": {
+            "version": "3.4.26",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.26.tgz",
+            "integrity": "sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ==",
+            "dev": true,
+            "peer": true
+        },
+        "node_modules/@vue/server-renderer": {
+            "version": "3.4.26",
+            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.26.tgz",
+            "integrity": "sha512-xoGAqSjYDPGAeRWxeoYwqJFD/gw7mpgzOvSxEmjWaFO2rE6qpbD1PC172YRpvKhrihkyHJkNDADFXTfCyVGhKw==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "@vue/compiler-ssr": "3.4.26",
+                "@vue/shared": "3.4.26"
+            },
+            "peerDependencies": {
+                "vue": "3.4.26"
+            }
+        },
+        "node_modules/@vue/server-renderer/node_modules/@vue/shared": {
+            "version": "3.4.26",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.26.tgz",
+            "integrity": "sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ==",
+            "dev": true,
+            "peer": true
+        },
         "node_modules/@vue/shared": {
             "version": "3.1.5",
             "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
@@ -880,6 +1060,7 @@
             "version": "5.3.3",
             "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
             "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+            "dev": true,
             "funding": [
                 {
                     "type": "github",
@@ -1077,6 +1258,13 @@
                 "node": ">=4"
             }
         },
+        "node_modules/csstype": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+            "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+            "dev": true,
+            "peer": true
+        },
         "node_modules/delayed-stream": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -1116,6 +1304,19 @@
             "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
             "dev": true
         },
+        "node_modules/entities": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+            "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+            "dev": true,
+            "peer": true,
+            "engines": {
+                "node": ">=0.12"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/entities?sponsor=1"
+            }
+        },
         "node_modules/esbuild": {
             "version": "0.20.2",
             "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
@@ -1163,6 +1364,13 @@
                 "node": ">=6"
             }
         },
+        "node_modules/estree-walker": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+            "dev": true,
+            "peer": true
+        },
         "node_modules/fast-glob": {
             "version": "3.3.2",
             "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -1344,6 +1552,12 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/immutable": {
+            "version": "4.3.5",
+            "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
+            "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
+            "dev": true
+        },
         "node_modules/is-binary-path": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1483,6 +1697,16 @@
                 "node": "14 || >=16.14"
             }
         },
+        "node_modules/magic-string": {
+            "version": "0.30.10",
+            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
+            "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "@jridgewell/sourcemap-codec": "^1.4.15"
+            }
+        },
         "node_modules/merge2": {
             "version": "1.4.1",
             "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -1977,6 +2201,23 @@
                 "queue-microtask": "^1.2.2"
             }
         },
+        "node_modules/sass": {
+            "version": "1.75.0",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.75.0.tgz",
+            "integrity": "sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==",
+            "dev": true,
+            "dependencies": {
+                "chokidar": ">=3.0.0 <4.0.0",
+                "immutable": "^4.0.0",
+                "source-map-js": ">=0.6.2 <2.0.0"
+            },
+            "bin": {
+                "sass": "sass.js"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
         "node_modules/shebang-command": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -2326,6 +2567,35 @@
                 "picomatch": "^2.3.1"
             }
         },
+        "node_modules/vue": {
+            "version": "3.4.26",
+            "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.26.tgz",
+            "integrity": "sha512-bUIq/p+VB+0xrJubaemrfhk1/FiW9iX+pDV+62I/XJ6EkspAO9/DXEjbDFoe8pIfOZBqfk45i9BMc41ptP/uRg==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "@vue/compiler-dom": "3.4.26",
+                "@vue/compiler-sfc": "3.4.26",
+                "@vue/runtime-dom": "3.4.26",
+                "@vue/server-renderer": "3.4.26",
+                "@vue/shared": "3.4.26"
+            },
+            "peerDependencies": {
+                "typescript": "*"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/vue/node_modules/@vue/shared": {
+            "version": "3.4.26",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.26.tgz",
+            "integrity": "sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ==",
+            "dev": true,
+            "peer": true
+        },
         "node_modules/which": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/api-calls/package.json b/api-calls/package.json
index f704628..e9f5e73 100644
--- a/api-calls/package.json
+++ b/api-calls/package.json
@@ -6,12 +6,16 @@
         "build": "vite build"
     },
     "devDependencies": {
+        "@popperjs/core": "^2.11.6",
         "@tailwindcss/forms": "^0.5.2",
+        "@vitejs/plugin-vue": "^5.0.4",
         "alpinejs": "^3.4.2",
         "autoprefixer": "^10.4.2",
         "axios": "^1.6.4",
+        "bootstrap": "^5.2.3",
         "laravel-vite-plugin": "^1.0",
         "postcss": "^8.4.31",
+        "sass": "^1.75.0",
         "tailwindcss": "^3.1.0",
         "vite": "^5.0"
     },
diff --git a/api-calls/resources/js/bootstrap.js b/api-calls/resources/js/bootstrap.js
index 5f1390b..46f7a33 100644
--- a/api-calls/resources/js/bootstrap.js
+++ b/api-calls/resources/js/bootstrap.js
@@ -1,4 +1,34 @@
+import 'bootstrap';
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
 import axios from 'axios';
 window.axios = axios;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+// import Echo from 'laravel-echo';
+
+// import Pusher from 'pusher-js';
+// window.Pusher = Pusher;
+
+// window.Echo = new Echo({
+//     broadcaster: 'pusher',
+//     key: import.meta.env.VITE_PUSHER_APP_KEY,
+//     cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
+//     wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
+//     wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
+//     wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
+//     forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
+//     enabledTransports: ['ws', 'wss'],
+// });
diff --git a/api-calls/resources/sass/_variables.scss b/api-calls/resources/sass/_variables.scss
new file mode 100644
index 0000000..172daaa
--- /dev/null
+++ b/api-calls/resources/sass/_variables.scss
@@ -0,0 +1,7 @@
+// Body
+$body-bg: #f8fafc;
+
+// Typography
+$font-family-sans-serif: 'Nunito', sans-serif;
+$font-size-base: 0.9rem;
+$line-height-base: 1.6;
diff --git a/api-calls/resources/sass/app.scss b/api-calls/resources/sass/app.scss
new file mode 100644
index 0000000..1026a0b
--- /dev/null
+++ b/api-calls/resources/sass/app.scss
@@ -0,0 +1,8 @@
+// Fonts
+@import url('https://fonts.bunny.net/css?family=Nunito');
+
+// Variables
+@import 'variables';
+
+// Bootstrap
+@import 'bootstrap/scss/bootstrap';
diff --git a/api-calls/resources/views/admin/products/create.blade.php b/api-calls/resources/views/admin/products/create.blade.php
new file mode 100644
index 0000000..ef4d94b
--- /dev/null
+++ b/api-calls/resources/views/admin/products/create.blade.php
@@ -0,0 +1,16 @@
+@extends('layouts.admin')
+
+@section('title', 'Create Product')
+
+@section('content')
+    <div class="container mt-4">
+        <h1>Create New Product</h1>
+        @include('admin.products.errors')
+        <form method="POST" action="{{ route('admin.products.store') }}">
+            @csrf
+            @include('admin.products.form')
+            <button type="submit" class="btn btn-primary">Submit</button>
+            <a href="{{ route('admin.products.index') }}" class="btn btn-secondary">Cancel</a>
+        </form>
+    </div>
+@endsection
diff --git a/api-calls/resources/views/admin/products/edit.blade.php b/api-calls/resources/views/admin/products/edit.blade.php
new file mode 100644
index 0000000..704fb0e
--- /dev/null
+++ b/api-calls/resources/views/admin/products/edit.blade.php
@@ -0,0 +1,17 @@
+@extends('layouts.admin')
+
+@section('title', 'Edit Product')
+
+@section('content')
+    <div class="container mt-4">
+        <h1>Edit Product</h1>
+        @include('admin.products.errors')
+        <form method="POST" action="{{ route('admin.products.update', $product->id) }}">
+            @csrf
+            @method('PUT')
+            @include('admin.products.form', ['product' => $product])
+            <button type="submit" class="btn btn-primary">Submit</button>
+            <a href="{{ route('admin.products.index') }}" class="btn btn-secondary">Cancel</a>
+        </form>
+    </div>
+@endsection
diff --git a/api-calls/resources/views/admin/products/errors.blade.php b/api-calls/resources/views/admin/products/errors.blade.php
new file mode 100644
index 0000000..c203932
--- /dev/null
+++ b/api-calls/resources/views/admin/products/errors.blade.php
@@ -0,0 +1,9 @@
+@if ($errors->any())
+    <div class="alert alert-danger">
+        <ul>
+            @foreach ($errors->all() as $error)
+                <li>{{ $error }}</li>
+            @endforeach
+        </ul>
+    </div>
+@endif
diff --git a/api-calls/resources/views/admin/products/form.blade.php b/api-calls/resources/views/admin/products/form.blade.php
new file mode 100644
index 0000000..09206d4
--- /dev/null
+++ b/api-calls/resources/views/admin/products/form.blade.php
@@ -0,0 +1,28 @@
+<div class="mb-3">
+    <label for="name" class="form-label">Name</label>
+    <input type="text" class="form-control" id="name" name="name" value="{{ old('name', $product->name) }}"
+        required>
+</div>
+
+<div class="mb-3">
+    <label for="price" class="form-label">Price</label>
+    <input type="number" class="form-control" id="price" name="price" step="0.01"
+        value="{{ old('price', $product->price) }}" required>
+</div>
+
+<div class="mb-3">
+    <label for="description" class="form-label">Description</label>
+    <textarea class="form-control" id="description" name="description">{{ old('description', $product->description) }}</textarea>
+</div>
+
+<div class="mb-3">
+    <label for="item_number" class="form-label">Item Number</label>
+    <input type="text" class="form-control" id="item_number" name="item_number"
+        value="{{ old('item_number', $product->item_number) }}" required>
+</div>
+
+<div class="mb-3">
+    <label for="image" class="form-label">Image URL</label>
+    <input type="url" class="form-control" id="image" name="image"
+        value="{{ old('image', $product->image) }}">
+</div>
diff --git a/api-calls/resources/views/admin/products/index.blade.php b/api-calls/resources/views/admin/products/index.blade.php
new file mode 100644
index 0000000..f786028
--- /dev/null
+++ b/api-calls/resources/views/admin/products/index.blade.php
@@ -0,0 +1,48 @@
+@extends('layouts.admin')
+@section('title', 'Admin Products')
+
+@section('content')
+    <h1>Products</h1>
+    <a href="{{ route('admin.products.create') }}" class="btn btn-primary">Create Product</a>
+
+    <div class="container mt-4">
+        <table class="table">
+            <thead>
+                <tr>
+                    <th>Image</th>
+                    <th>Name</th>
+                    <th>Price</th>
+                    <th>Item Number</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                @foreach ($products as $product)
+                    <tr>
+                        <td>
+                            <img src="{{ $product->image }}" alt="{{ $product->name }}"
+                                style="height: 100px; width: auto; object-fit: cover;">
+                        </td>
+                        <td>{{ $product->name }}</td>
+                        <td>${{ number_format($product->price, 2) }}</td>
+                        <td>{{ $product->item_number }}</td>
+                        <td>
+                            <a href="{{ route('admin.products.show', $product) }}"
+                                class="btn btn-sm btn-outline-secondary">View</a>
+                            <a href="{{ route('admin.products.edit', $product) }}"
+                                class="btn btn-sm btn-outline-secondary">Edit</a>
+                            <form action="{{ route('admin.products.destroy', $product) }}" method="POST"
+                                style="display:inline-block;">
+                                @csrf
+                                @method('DELETE')
+                                <button type="submit" class="btn btn-sm btn-danger"
+                                    onclick="return confirm('Are you sure you want to delete this product?')">Delete</button>
+                            </form>
+                        </td>
+                    </tr>
+                @endforeach
+            </tbody>
+        </table>
+    </div>
+
+@endsection
diff --git a/api-calls/resources/views/admin/products/show.blade.php b/api-calls/resources/views/admin/products/show.blade.php
new file mode 100644
index 0000000..dd9b40b
--- /dev/null
+++ b/api-calls/resources/views/admin/products/show.blade.php
@@ -0,0 +1,20 @@
+@extends('layouts.admin')
+@section('title', 'Detail')
+
+
+@section('content')
+    <h1> Product Details</h1>
+    <div class="container mt-4">
+        <div class="card">
+            <img src="{{ $product->image }}" class="card-img-top" alt="{{ $product->name }}" style="width: 100%; height: auto;">
+            <div class="card-body">
+                <h5 class="card-title">{{ $product->name }}</h5>
+                <p class="card-text">{{ $product->description }}</p>
+                <p class="card-text"><strong>Price:</strong> ${{ number_format($product->price, 2) }}</p>
+                <p class="card-text"><strong>Item Number:</strong> {{ $product->item_number }}</p>
+                <a href="{{ route('admin.products.index') }}" class="btn btn-primary">Go back</a>
+            </div>
+        </div>
+    </div>
+@endsection
+
diff --git a/api-calls/resources/views/auth/login.blade.php b/api-calls/resources/views/auth/login.blade.php
index 80e1b39..ea9ac94 100644
--- a/api-calls/resources/views/auth/login.blade.php
+++ b/api-calls/resources/views/auth/login.blade.php
@@ -1,47 +1,73 @@
-<x-guest-layout>
-    <!-- Session Status -->
-    <x-auth-session-status class="mb-4" :status="session('status')" />
-
-    <form method="POST" action="{{ route('login') }}">
-        @csrf
-
-        <!-- Email Address -->
-        <div>
-            <x-input-label for="email" :value="__('Email')" />
-            <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" />
-            <x-input-error :messages="$errors->get('email')" class="mt-2" />
-        </div>
+@extends('layouts.app')
 
-        <!-- Password -->
-        <div class="mt-4">
-            <x-input-label for="password" :value="__('Password')" />
+@section('content')
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card">
+                <div class="card-header">{{ __('Login') }}</div>
 
-            <x-text-input id="password" class="block mt-1 w-full"
-                            type="password"
-                            name="password"
-                            required autocomplete="current-password" />
+                <div class="card-body">
+                    <form method="POST" action="{{ route('login') }}">
+                        @csrf
 
-            <x-input-error :messages="$errors->get('password')" class="mt-2" />
-        </div>
+                        <div class="row mb-3">
+                            <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label>
 
-        <!-- Remember Me -->
-        <div class="block mt-4">
-            <label for="remember_me" class="inline-flex items-center">
-                <input id="remember_me" type="checkbox" class="rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800" name="remember">
-                <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">{{ __('Remember me') }}</span>
-            </label>
-        </div>
+                            <div class="col-md-6">
+                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
+
+                                @error('email')
+                                    <span class="invalid-feedback" role="alert">
+                                        <strong>{{ $message }}</strong>
+                                    </span>
+                                @enderror
+                            </div>
+                        </div>
+
+                        <div class="row mb-3">
+                            <label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
+
+                                @error('password')
+                                    <span class="invalid-feedback" role="alert">
+                                        <strong>{{ $message }}</strong>
+                                    </span>
+                                @enderror
+                            </div>
+                        </div>
+
+                        <div class="row mb-3">
+                            <div class="col-md-6 offset-md-4">
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
+
+                                    <label class="form-check-label" for="remember">
+                                        {{ __('Remember Me') }}
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
 
-        <div class="flex items-center justify-end mt-4">
-            @if (Route::has('password.request'))
-                <a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800" href="{{ route('password.request') }}">
-                    {{ __('Forgot your password?') }}
-                </a>
-            @endif
+                        <div class="row mb-0">
+                            <div class="col-md-8 offset-md-4">
+                                <button type="submit" class="btn btn-primary">
+                                    {{ __('Login') }}
+                                </button>
 
-            <x-primary-button class="ms-3">
-                {{ __('Log in') }}
-            </x-primary-button>
+                                @if (Route::has('password.request'))
+                                    <a class="btn btn-link" href="{{ route('password.request') }}">
+                                        {{ __('Forgot Your Password?') }}
+                                    </a>
+                                @endif
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
         </div>
-    </form>
-</x-guest-layout>
+    </div>
+</div>
+@endsection
diff --git a/api-calls/resources/views/auth/passwords/confirm.blade.php b/api-calls/resources/views/auth/passwords/confirm.blade.php
new file mode 100644
index 0000000..f8c8e61
--- /dev/null
+++ b/api-calls/resources/views/auth/passwords/confirm.blade.php
@@ -0,0 +1,49 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card">
+                <div class="card-header">{{ __('Confirm Password') }}</div>
+
+                <div class="card-body">
+                    {{ __('Please confirm your password before continuing.') }}
+
+                    <form method="POST" action="{{ route('password.confirm') }}">
+                        @csrf
+
+                        <div class="row mb-3">
+                            <label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
+
+                                @error('password')
+                                    <span class="invalid-feedback" role="alert">
+                                        <strong>{{ $message }}</strong>
+                                    </span>
+                                @enderror
+                            </div>
+                        </div>
+
+                        <div class="row mb-0">
+                            <div class="col-md-8 offset-md-4">
+                                <button type="submit" class="btn btn-primary">
+                                    {{ __('Confirm Password') }}
+                                </button>
+
+                                @if (Route::has('password.request'))
+                                    <a class="btn btn-link" href="{{ route('password.request') }}">
+                                        {{ __('Forgot Your Password?') }}
+                                    </a>
+                                @endif
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
diff --git a/api-calls/resources/views/auth/passwords/email.blade.php b/api-calls/resources/views/auth/passwords/email.blade.php
new file mode 100644
index 0000000..d1ac783
--- /dev/null
+++ b/api-calls/resources/views/auth/passwords/email.blade.php
@@ -0,0 +1,47 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card">
+                <div class="card-header">{{ __('Reset Password') }}</div>
+
+                <div class="card-body">
+                    @if (session('status'))
+                        <div class="alert alert-success" role="alert">
+                            {{ session('status') }}
+                        </div>
+                    @endif
+
+                    <form method="POST" action="{{ route('password.email') }}">
+                        @csrf
+
+                        <div class="row mb-3">
+                            <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
+
+                                @error('email')
+                                    <span class="invalid-feedback" role="alert">
+                                        <strong>{{ $message }}</strong>
+                                    </span>
+                                @enderror
+                            </div>
+                        </div>
+
+                        <div class="row mb-0">
+                            <div class="col-md-6 offset-md-4">
+                                <button type="submit" class="btn btn-primary">
+                                    {{ __('Send Password Reset Link') }}
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
diff --git a/api-calls/resources/views/auth/passwords/reset.blade.php b/api-calls/resources/views/auth/passwords/reset.blade.php
new file mode 100644
index 0000000..dccf6c6
--- /dev/null
+++ b/api-calls/resources/views/auth/passwords/reset.blade.php
@@ -0,0 +1,65 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card">
+                <div class="card-header">{{ __('Reset Password') }}</div>
+
+                <div class="card-body">
+                    <form method="POST" action="{{ route('password.update') }}">
+                        @csrf
+
+                        <input type="hidden" name="token" value="{{ $token }}">
+
+                        <div class="row mb-3">
+                            <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ $email ?? old('email') }}" required autocomplete="email" autofocus>
+
+                                @error('email')
+                                    <span class="invalid-feedback" role="alert">
+                                        <strong>{{ $message }}</strong>
+                                    </span>
+                                @enderror
+                            </div>
+                        </div>
+
+                        <div class="row mb-3">
+                            <label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
+
+                                @error('password')
+                                    <span class="invalid-feedback" role="alert">
+                                        <strong>{{ $message }}</strong>
+                                    </span>
+                                @enderror
+                            </div>
+                        </div>
+
+                        <div class="row mb-3">
+                            <label for="password-confirm" class="col-md-4 col-form-label text-md-end">{{ __('Confirm Password') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
+                            </div>
+                        </div>
+
+                        <div class="row mb-0">
+                            <div class="col-md-6 offset-md-4">
+                                <button type="submit" class="btn btn-primary">
+                                    {{ __('Reset Password') }}
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
diff --git a/api-calls/resources/views/auth/register.blade.php b/api-calls/resources/views/auth/register.blade.php
index d4b3d58..12cad1a 100644
--- a/api-calls/resources/views/auth/register.blade.php
+++ b/api-calls/resources/views/auth/register.blade.php
@@ -1,52 +1,77 @@
-<x-guest-layout>
-    <form method="POST" action="{{ route('register') }}">
-        @csrf
-
-        <!-- Name -->
-        <div>
-            <x-input-label for="name" :value="__('Name')" />
-            <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" />
-            <x-input-error :messages="$errors->get('name')" class="mt-2" />
-        </div>
+@extends('layouts.app')
 
-        <!-- Email Address -->
-        <div class="mt-4">
-            <x-input-label for="email" :value="__('Email')" />
-            <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autocomplete="username" />
-            <x-input-error :messages="$errors->get('email')" class="mt-2" />
-        </div>
+@section('content')
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card">
+                <div class="card-header">{{ __('Register') }}</div>
 
-        <!-- Password -->
-        <div class="mt-4">
-            <x-input-label for="password" :value="__('Password')" />
+                <div class="card-body">
+                    <form method="POST" action="{{ route('register') }}">
+                        @csrf
 
-            <x-text-input id="password" class="block mt-1 w-full"
-                            type="password"
-                            name="password"
-                            required autocomplete="new-password" />
+                        <div class="row mb-3">
+                            <label for="name" class="col-md-4 col-form-label text-md-end">{{ __('Name') }}</label>
 
-            <x-input-error :messages="$errors->get('password')" class="mt-2" />
-        </div>
+                            <div class="col-md-6">
+                                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
 
-        <!-- Confirm Password -->
-        <div class="mt-4">
-            <x-input-label for="password_confirmation" :value="__('Confirm Password')" />
+                                @error('name')
+                                    <span class="invalid-feedback" role="alert">
+                                        <strong>{{ $message }}</strong>
+                                    </span>
+                                @enderror
+                            </div>
+                        </div>
 
-            <x-text-input id="password_confirmation" class="block mt-1 w-full"
-                            type="password"
-                            name="password_confirmation" required autocomplete="new-password" />
+                        <div class="row mb-3">
+                            <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label>
 
-            <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
-        </div>
+                            <div class="col-md-6">
+                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
+
+                                @error('email')
+                                    <span class="invalid-feedback" role="alert">
+                                        <strong>{{ $message }}</strong>
+                                    </span>
+                                @enderror
+                            </div>
+                        </div>
+
+                        <div class="row mb-3">
+                            <label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
+
+                                @error('password')
+                                    <span class="invalid-feedback" role="alert">
+                                        <strong>{{ $message }}</strong>
+                                    </span>
+                                @enderror
+                            </div>
+                        </div>
+
+                        <div class="row mb-3">
+                            <label for="password-confirm" class="col-md-4 col-form-label text-md-end">{{ __('Confirm Password') }}</label>
 
-        <div class="flex items-center justify-end mt-4">
-            <a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800" href="{{ route('login') }}">
-                {{ __('Already registered?') }}
-            </a>
+                            <div class="col-md-6">
+                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
+                            </div>
+                        </div>
 
-            <x-primary-button class="ms-4">
-                {{ __('Register') }}
-            </x-primary-button>
+                        <div class="row mb-0">
+                            <div class="col-md-6 offset-md-4">
+                                <button type="submit" class="btn btn-primary">
+                                    {{ __('Register') }}
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
         </div>
-    </form>
-</x-guest-layout>
+    </div>
+</div>
+@endsection
diff --git a/api-calls/resources/views/auth/verify.blade.php b/api-calls/resources/views/auth/verify.blade.php
new file mode 100644
index 0000000..9f8c1bc
--- /dev/null
+++ b/api-calls/resources/views/auth/verify.blade.php
@@ -0,0 +1,28 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card">
+                <div class="card-header">{{ __('Verify Your Email Address') }}</div>
+
+                <div class="card-body">
+                    @if (session('resent'))
+                        <div class="alert alert-success" role="alert">
+                            {{ __('A fresh verification link has been sent to your email address.') }}
+                        </div>
+                    @endif
+
+                    {{ __('Before proceeding, please check your email for a verification link.') }}
+                    {{ __('If you did not receive the email') }},
+                    <form class="d-inline" method="POST" action="{{ route('verification.resend') }}">
+                        @csrf
+                        <button type="submit" class="btn btn-link p-0 m-0 align-baseline">{{ __('click here to request another') }}</button>.
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
diff --git a/api-calls/resources/views/home.blade.php b/api-calls/resources/views/home.blade.php
new file mode 100644
index 0000000..1f34466
--- /dev/null
+++ b/api-calls/resources/views/home.blade.php
@@ -0,0 +1,23 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card">
+                <div class="card-header">{{ __('Dashboard') }}</div>
+
+                <div class="card-body">
+                    @if (session('status'))
+                        <div class="alert alert-success" role="alert">
+                            {{ session('status') }}
+                        </div>
+                    @endif
+
+                    {{ __('You are logged in!') }}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
diff --git a/api-calls/resources/views/layouts/admin.blade.php b/api-calls/resources/views/layouts/admin.blade.php
new file mode 100644
index 0000000..bd4d8e3
--- /dev/null
+++ b/api-calls/resources/views/layouts/admin.blade.php
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin Products - @yield('title')</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+
+</head>
+
+<body>
+    @if (session()->get('success'))
+        <div class="alert alert-success">{{ session()->get('success') }}</div>
+    @endif
+    @yield('content')
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
+        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
+        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
+    </script>
+</body>
+
+</html>
diff --git a/api-calls/resources/views/layouts/app.blade.php b/api-calls/resources/views/layouts/app.blade.php
index 9069c10..6b22379 100644
--- a/api-calls/resources/views/layouts/app.blade.php
+++ b/api-calls/resources/views/layouts/app.blade.php
@@ -1,36 +1,82 @@
-<!DOCTYPE html>
+@vite(['resources/js/app.js'])
+
+<!doctype html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="csrf-token" content="{{ csrf_token() }}">
-
-        <title>{{ config('app.name', 'Laravel') }}</title>
-
-        <!-- Fonts -->
-        <link rel="preconnect" href="https://fonts.bunny.net">
-        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
-
-        <!-- Scripts -->
-        @vite(['resources/css/app.css', 'resources/js/app.js'])
-    </head>
-    <body class="font-sans antialiased">
-        <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
-            @include('layouts.navigation')
-
-            <!-- Page Heading -->
-            @if (isset($header))
-                <header class="bg-white dark:bg-gray-800 shadow">
-                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-                        {{ $header }}
-                    </div>
-                </header>
-            @endif
-
-            <!-- Page Content -->
-            <main>
-                {{ $slot }}
-            </main>
-        </div>
-    </body>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- CSRF Token -->
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+
+    <title>{{ config('app.name', 'Laravel') }}</title>
+
+    <!-- Fonts -->
+    <link rel="dns-prefetch" href="//fonts.bunny.net">
+    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
+
+    <!-- Scripts -->
+    @vite(['resources/js/app.js'])
+</head>
+<body>
+    <div id="app">
+        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
+            <div class="container">
+                <a class="navbar-brand" href="{{ url('/') }}">
+                    {{ config('app.name', 'Laravel') }}
+                </a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <!-- Left Side Of Navbar -->
+                    <ul class="navbar-nav me-auto">
+
+                    </ul>
+
+                    <!-- Right Side Of Navbar -->
+                    <ul class="navbar-nav ms-auto">
+                        <!-- Authentication Links -->
+                        @guest
+                            @if (Route::has('login'))
+                                <li class="nav-item">
+                                    <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
+                                </li>
+                            @endif
+
+                            @if (Route::has('register'))
+                                <li class="nav-item">
+                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
+                                </li>
+                            @endif
+                        @else
+                            <li class="nav-item dropdown">
+                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
+                                    {{ Auth::user()->name }}
+                                </a>
+
+                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
+                                    <a class="dropdown-item" href="{{ route('logout') }}"
+                                       onclick="event.preventDefault();
+                                                     document.getElementById('logout-form').submit();">
+                                        {{ __('Logout') }}
+                                    </a>
+
+                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
+                                        @csrf
+                                    </form>
+                                </div>
+                            </li>
+                        @endguest
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+        <main class="py-4">
+            @yield('content')
+        </main>
+    </div>
+</body>
 </html>
diff --git a/api-calls/resources/views/layouts/products.blade.php b/api-calls/resources/views/layouts/products.blade.php
new file mode 100644
index 0000000..01e92ad
--- /dev/null
+++ b/api-calls/resources/views/layouts/products.blade.php
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Products - @yield('title')</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+
+</head>
+<body>
+    @yield('content')
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/api-calls/resources/views/products/index.blade.php b/api-calls/resources/views/products/index.blade.php
index aa61789..747bd53 100644
--- a/api-calls/resources/views/products/index.blade.php
+++ b/api-calls/resources/views/products/index.blade.php
@@ -1,12 +1,8 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Products</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
-</head>
-<body>
+@extends('layouts.products')
+@section('title', 'Products')
+
+@section('content')
+<h1> Products</h1>
 <div class="container mt-4">
     <div class="row">
         @foreach ($products as $product)
@@ -24,5 +20,4 @@
         @endforeach
     </div>
 </div>
-</body>
-</html>
+@endsection
\ No newline at end of file
diff --git a/api-calls/resources/views/products/show.blade.php b/api-calls/resources/views/products/show.blade.php
index c9ead15..d8003ff 100644
--- a/api-calls/resources/views/products/show.blade.php
+++ b/api-calls/resources/views/products/show.blade.php
@@ -1,12 +1,9 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Product Details - {{ $product->name }}</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
-</head>
-<body>
+@extends('layouts.products')
+@section('title', 'Detail')
+
+
+@section('content')
+<h1> Product Details</h1>
 <div class="container mt-4">
     <div class="card">
         <img src="{{ $product->image }}" class="card-img-top" alt="{{ $product->name }}" style="width: 100%; height: auto;">
@@ -15,9 +12,8 @@
             <p class="card-text">{{ $product->description }}</p>
             <p class="card-text"><strong>Price:</strong> ${{ number_format($product->price, 2) }}</p>
             <p class="card-text"><strong>Item Number:</strong> {{ $product->item_number }}</p>
-            <a href="/products" class="btn btn-primary">Go Back</a>
+            <a href="{{ route('products.index')}}" class="btn btn-primary">Back to all products</a>
         </div>
     </div>
 </div>
-</body>
-</html>
\ No newline at end of file
+@endsection
\ No newline at end of file
diff --git a/api-calls/routes/web.php b/api-calls/routes/web.php
index 304ab05..7022f52 100644
--- a/api-calls/routes/web.php
+++ b/api-calls/routes/web.php
@@ -1,28 +1,56 @@
 <?php
 
 use Illuminate\Support\Facades\Route;
-use App\Models\TvMazeAPI; 
+use App\Models\TvMazeAPI;
 use App\Models\Episode;
 use App\Http\Controllers\ProductController;
+use App\Http\Controllers\AdminProductController;
+use Illuminate\Support\Facades\Auth;
 
-Route::get('/load-episodes', function () {
-    $showNumber = request('showNumber', 1); 
-    $episodes = TvMazeAPI::fetch($showNumber); 
+// Authentication Routes
+Auth::routes();
 
-    return view('episodes.index', ['episodes' => $episodes]);
-});
+// Home Route
+Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
 
+// Welcome Page Route
 Route::get('/', function () {
     return view('welcome');
 });
 
+// Load Episodes 
+Route::get('/load-episodes', function () {
+    $showNumber = request('showNumber', 1);
+    $episodes = TvMazeAPI::fetch($showNumber);
+    return view('episodes.index', ['episodes' => $episodes]);
+});
+
+// View Episodes 
 Route::get('/view-episodes', function (Illuminate\Http\Request $request) {
-  
     $showNumber = $request->query('showNumber', 1);
-
     $episodes = Episode::where('show_number', $showNumber)->get();
-
     return view('episodes.index')->with('episodes', $episodes);
 });
 
-Route::resource('products', ProductController::class);
\ No newline at end of file
+// Public Product Routes
+Route::resource('products', ProductController::class)->only(['index', 'show']);
+
+// Admin Dashboard Route
+Route::get('/dashboard', function () {
+    return view('dashboard');
+})->middleware(['auth', 'verified'])->name('dashboard');
+
+// Admin Routes for Products
+Route::middleware(['auth'])->prefix('admin')->name('admin.')->group(function () {
+    Route::resource('products', AdminProductController::class);
+});
+
+
+// Route::get('/products', 'ProductController@index')->name('products.index');
+// Route::get('/products/{product}', 'ProductController@show')->name('products.show');
+
+// Route::middleware('auth')->group(function () {
+//     Route::get('/products', [ProductController::class . 'edit'])->name('products.edit');
+//     Route::patch('/products', [ProductController::class . 'update'])->name('products.update');
+//     Route::delete('/products', [ProductController::class . 'destroy'])->name('products.destroy');
+// });
diff --git a/api-calls/vite.config.js b/api-calls/vite.config.js
index 89f26f5..f94eb0b 100644
--- a/api-calls/vite.config.js
+++ b/api-calls/vite.config.js
@@ -1,14 +1,21 @@
-import { defineConfig } from 'vite';
-import laravel from 'laravel-vite-plugin';
+import { defineConfig } from 'vite'
+import laravel from 'laravel-vite-plugin'
 
 export default defineConfig({
     plugins: [
         laravel({
-            input: [
-                'resources/css/app.css',
-                'resources/js/app.js',
-            ],
-            refresh: true,
-        }),
+            input: ['resources/css/app.css', 'resources/js/app.js'],
+            refresh: true
+        })
     ],
-});
+    server: {
+        hmr: {
+            host: 'localhost'
+        }
+    },
+    resolve: {
+        alias: {
+            '@': '/resources/js'
+        }
+    }
+})