From 64c64c001b215983843c1d10757960de74652a38 Mon Sep 17 00:00:00 2001
From: TimmensOne <timon.lorenzn@online.de>
Date: Thu, 6 Apr 2023 12:17:42 +0200
Subject: [PATCH] add new frontend

---
 README.md                                     |   2 +-
 .../views/components/device-detail.blade.php  | 132 +++++++++++----
 .../views/components/device-simple.blade.php  |  27 ++--
 .../components/location-transaction.blade.php |  24 +--
 .../components/owner-transaction.blade.php    |  14 +-
 .../purchasing-information.blade.php          |  50 ++++--
 .../resources/views/devices/create.blade.php  | 153 ++++++++++++------
 .../resources/views/devices/edit.blade.php    | 153 +++++++++++-------
 .../resources/views/devices/index.blade.php   |  40 +++--
 device-app/resources/views/layout.blade.php   | 118 +++++++++++---
 .../views/locations/create.blade.php          |  65 ++++++--
 .../resources/views/locations/edit.blade.php  |  66 +++++---
 .../resources/views/owners/create.blade.php   |  65 ++++++--
 .../resources/views/owners/edit.blade.php     |  66 +++++---
 .../views/purchasings/edit.blade.php          | 118 +++++++++-----
 .../resources/views/users/login.blade.php     |  68 +++++---
 .../resources/views/users/register.blade.php  | 114 ++++++++-----
 device-app/resources/views/welcome.blade.php  |  10 +-
 18 files changed, 887 insertions(+), 398 deletions(-)

diff --git a/README.md b/README.md
index 2118715..c1dae27 100644
--- a/README.md
+++ b/README.md
@@ -120,7 +120,7 @@ php artisan test
 Timon Lorenz (lot17014)
 
 ## 6 License
-This project is licensed with the MIT license. The used framework [Laravel](https://laravel.com/) and the imported [Log-Viewer](https://github.com/opcodesio/log-viewer/discussions) are also licensed with the MIT license. 
+This project is licensed with the MIT license. The used framework [Laravel](https://laravel.com/) and the imported [Log-Viewer](https://github.com/opcodesio/log-viewer/discussions) as well as the CSS framework [Bulma](https://bulma.io/) are also licensed with the MIT license. 
 
 ## Releasedate
 latest: 15.04.2023
diff --git a/device-app/resources/views/components/device-detail.blade.php b/device-app/resources/views/components/device-detail.blade.php
index c5e467c..4007473 100644
--- a/device-app/resources/views/components/device-detail.blade.php
+++ b/device-app/resources/views/components/device-detail.blade.php
@@ -1,37 +1,99 @@
 @props(['device'])
-<div>
-    <h3>Device Detail</h3>
-    <ul>
-        <!--li>device_id: {{ $device['device_id'] }}</li-->
-        <li>title: {{ $device['title'] }}</li>
-        <li>device_type: {{ $device['device_type'] }}</li>
-        <li>description: {{ $device['description'] }}</li>
-        <li>accessories: {{ $device['accessories'] }}</li>
-        <li>rz_username_buyer: {{ $device['rz_username_buyer'] }}</li>
-        <li>serial_number: {{ $device['serial_number'] }}</li>
-        <li>image_url: {{ $device['image_url'] }}</li>
-    </ul>
-    @can('admin-only')
-        <button><a href="{{ $device->device_id }}/edit">Edit</a></button>
-        <form method="POST" action="{{ $device->device_id }}">
-            @method('DELETE')
-            @csrf
-            <button>Delete</button>
-        </form>
-    @endcan
-    <x-purchasing-information :device="$device" />
-    @php
-        $locationTransactions = $device->locations;
-        $ownerTransactins = $device->owners;
-    @endphp
-    <h3>Location Transactions</h3>
-    <button><a href="{{ $device->device_id }}/locations/create">New Location</a></button>
-    @foreach ($locationTransactions as $location)
-        <x-location-transaction :location="$location" />
-    @endforeach
-    <h3>Owner Transactions</h3>
-    <button><a href="{{ $device->device_id }}/owners/create">New Owner</a></button>
-    @foreach ($ownerTransactins as $owner)
-        <x-owner-transaction :owner="$owner" />
-    @endforeach
+<h3 class="title is-3 has-text-centered">Device Detail</h3>
+<div class="table-container">
+    <table class="table is-narrow is-fullwidth">
+        <thead>
+            <tr>
+                <th>Ttile</th>
+                <th>device_type</th>
+                <th>description</th>
+                <th>accessories</th>
+                <th>rz_username_buyer</th>
+                <th>serial_number</th>
+                <th>image_url</th>
+                @can('admin-only')
+                    <th class="is-narrow">Action</th>
+                @endcan
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>{{ $device['title'] }}</td>
+                <td>{{ $device['device_type'] }}</td>
+                <td>{{ $device['description'] }}</td>
+                <td>{{ $device['accessories'] }}</td>
+                <td>{{ $device['rz_username_buyer'] }}</td>
+                <td>{{ $device['serial_number'] }}</td>
+                <td>{{ $device['image_url'] }}</td>
+                @can('admin-only')
+                    <td>
+                        <button><a href="{{ $device->device_id }}/edit">Edit</a></button>
+                        <form method="POST" action="{{ $device->device_id }}">
+                            @method('DELETE')
+                            @csrf
+                            <button>Delete</button>
+                        </form>
+                    </td>
+                @endcan
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+<h3 class="title is-3 has-text-centered">Purchasing Information</h3>
+<x-purchasing-information :device="$device" />
+
+
+
+<h3 class="title is-3 has-text-centered">Location Transactions</h3>
+<div class="buttons is-right">
+    <a class="button is-small" href="{{ $device->device_id }}/locations/create">New Location</a>
+</div>
+@php
+    $locationTransactions = $device->locations;
+    $ownerTransactins = $device->owners;
+@endphp
+
+<div class="table-container">
+    <table class="table is-narrow is-fullwidth is-striped is-hoverable">
+        <thead>
+            <tr>
+                <th>room_code</th>
+                <th>timestamp_located_since</th>
+                @can('admin-only')
+                    <th class="is-narrow">Action</th>
+                @endcan
+            </tr>
+        </thead>
+        <tbody>
+            @foreach ($locationTransactions as $location)
+                <x-location-transaction :location="$location" />
+            @endforeach
+        </tbody>
+    </table>
+</div>
+
+
+
+<h3 class="title is-3 has-text-centered">Owner Transactions</h3>
+<div class="buttons is-right">
+    <a class="button is-small" href="{{ $device->device_id }}/owners/create">New Owner</a>
+</div>
+<div class="table-container">
+    <table class="table is-narrow is-fullwidth is-striped is-hoverable">
+        <thead>
+            <tr>
+                <th>rz_username</th>
+                <th>timestamp_owner_since</th>
+                @can('admin-only')
+                    <th class="is-narrow">Action</th>
+                @endcan
+            </tr>
+        </thead>
+        <tbody>
+            @foreach ($ownerTransactins as $owner)
+                <x-owner-transaction :owner="$owner" />
+            @endforeach
+        </tbody>
+    </table>
 </div>
diff --git a/device-app/resources/views/components/device-simple.blade.php b/device-app/resources/views/components/device-simple.blade.php
index 9f1b171..17434d0 100644
--- a/device-app/resources/views/components/device-simple.blade.php
+++ b/device-app/resources/views/components/device-simple.blade.php
@@ -1,16 +1,13 @@
 @props(['device'])
-<div>
-    <a href="/devices/{{ $device['device_id'] }}">{{ $device->title }}</a>
-    <ul>
-        <!--li>{{ $device['device_id'] }}</li-->
-        <!--li>title:{{ $device['title'] }}</li-->
-        <li>device_type: {{ $device['device_type'] }}</li>
-        <li>description: {{ $device['description'] }}</li>
-        <li>accessories: {{ $device['accessories'] }}</li>
-        <li>rz_username_buyer: {{ $device['rz_username_buyer'] }}</li>
-        <li>serial_number: {{ $device['serial_number'] }}</li>
-        <li>image_url: {{ $device['image_url'] }}</li>
-        <li>room_code: {{ $device->locations->last()['room_code'] }}</li>
-        <li>rz_username: {{ $device->owners->last()['rz_username'] }}</li>
-    </ul>
-</div>
\ No newline at end of file
+<tr>
+    <td><a href="/devices/{{ $device['device_id'] }}">{{ $device->title }}</a></td>
+    <td>{{ $device['device_type'] }}</td>
+    <td>{{ $device['description'] }}</td>
+    <td>{{ $device['accessories'] }}</td>
+    <td>{{ $device['rz_username_buyer'] }}</td>
+    <td>{{ $device['serial_number'] }}</td>
+    <td>{{ $device['image_url'] }}</td>
+    {{-- TODO: Nicht null --}}
+    <td>{{ $device->locations->last()['room_code'] ?? ''}}</td>
+    <td>{{ $device->owners->last()['rz_username'] ?? ''}}</td>
+</tr>
\ No newline at end of file
diff --git a/device-app/resources/views/components/location-transaction.blade.php b/device-app/resources/views/components/location-transaction.blade.php
index a5db6ea..e22ea91 100644
--- a/device-app/resources/views/components/location-transaction.blade.php
+++ b/device-app/resources/views/components/location-transaction.blade.php
@@ -1,14 +1,14 @@
-<div>
-    <ul>
-        <li>room_code: {{ $location->room_code }}</li>
-        <li>timestamp_located_since: {{ $location->timestamp_located_since }}</li>
-    </ul>
+<tr>
+    <td>{{ $location->room_code }}</td>
+    <td>{{ $location->timestamp_located_since }}</td>
     @can('admin-only')
-        <button><a href="locations/{{ $location->location_transaction_id }}/edit">Edit</a></button>
-        <form method="POST" action="locations/{{ $location->location_transaction_id }}">
-            @method('DELETE')
-            @csrf
-            <button>Delete</button>
-        </form>
+        <td>
+            <button><a href="locations/{{ $location->location_transaction_id }}/edit">Edit</a></button>
+            <form method="POST" action="locations/{{ $location->location_transaction_id }}">
+                @method('DELETE')
+                @csrf
+                <button>Delete</button>
+            </form>
+        </td>
     @endcan
-</div>
\ No newline at end of file
+</tr>
diff --git a/device-app/resources/views/components/owner-transaction.blade.php b/device-app/resources/views/components/owner-transaction.blade.php
index 1092aae..b338b3c 100644
--- a/device-app/resources/views/components/owner-transaction.blade.php
+++ b/device-app/resources/views/components/owner-transaction.blade.php
@@ -1,14 +1,14 @@
-<div>
-    <ul>
-        <li>rz_username: {{ $owner->rz_username }}</li>
-        <li>timestamp_owner_since: {{ $owner->timestamp_owner_since }}</li>
-    </ul>
+<tr>
+    <td>{{ $owner->rz_username }}</td>
+    <td>{{ $owner->timestamp_owner_since }}</td>
     @can('admin-only')
-        <button><a href="owners/{{ $owner->owner_transaction_id }}/edit">Edit</a></button>
+        <td>
+            <button><a href="owners/{{ $owner->owner_transaction_id }}/edit">Edit</a></button>
         <form method="POST" action="owners/{{ $owner->owner_transaction_id }}">
             @method('DELETE')
             @csrf
             <button>Delete</button>
         </form>
+        </td>
     @endcan
-</div>
\ No newline at end of file
+</tr>
\ No newline at end of file
diff --git a/device-app/resources/views/components/purchasing-information.blade.php b/device-app/resources/views/components/purchasing-information.blade.php
index 298408c..f4c3f09 100644
--- a/device-app/resources/views/components/purchasing-information.blade.php
+++ b/device-app/resources/views/components/purchasing-information.blade.php
@@ -1,16 +1,34 @@
-<div>
-    @php
-        $purchasing = $device->purchasing;
-    @endphp
-    <h3>Purchasing Information</h3>
-    <ul>
-        <li>price: {{ $purchasing->price }}</li>
-        <li>timestamp_warranty_end: {{ $purchasing->timestamp_warranty_end }}</li>
-        <li>timestamp_purchase: {{ $purchasing->timestamp_purchase }}</li>
-        <li>cost_centre: {{ $purchasing->cost_centre }}</li>
-        <li>seller: {{ $purchasing->seller }}</li>
-    </ul>
-    @can('admin-only')
-        <button><a href="{{ $device->device_id }}/purchasing/edit">Edit</a></button>
-    @endcan
-</div>
\ No newline at end of file
+@php
+    $purchasing = $device->purchasing;
+@endphp
+
+<div class="table-container">
+    <table class="table is-narrow is-fullwidth">
+        <thead>
+            <tr>
+                <th>price</th>
+                <th>timestamp_warranty_end</th>
+                <th>timestamp_purchase</th>
+                <th>cost_centre</th>
+                <th>seller</th>
+                @can('admin-only')
+                    <th class="is-narrow">Action</th>
+                @endcan
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>{{ $purchasing->price }}</td>
+                <td>{{ $purchasing->timestamp_warranty_end }}</td>
+                <td>{{ $purchasing->timestamp_purchase }}</td>
+                <td>{{ $purchasing->cost_centre }}</td>
+                <td>{{ $purchasing->seller }}</td>
+                @can('admin-only')
+                    <td>
+                        <button><a href="{{ $device->device_id }}/purchasing/edit">Edit</a></button>
+                    </td>
+                @endcan
+            </tr>
+        </tbody>
+    </table>
+</div>
diff --git a/device-app/resources/views/devices/create.blade.php b/device-app/resources/views/devices/create.blade.php
index 428d877..8a701fe 100644
--- a/device-app/resources/views/devices/create.blade.php
+++ b/device-app/resources/views/devices/create.blade.php
@@ -1,56 +1,103 @@
 @extends('layout')
 
 @section('content')
-    <form method="POST" action="/devices">
-        @csrf
-        <!--label for="device_id">device_id:</label>
-        <input type="text" id="device_id" name="device_id" value="{{old('device_id')}}" required>
-        @error('device_id')
-            <p>{{$message}}</p>
-        @enderror
-        <br /-->
-        <label for="title">Title:</label>
-        <input type="text" id="title" name="title" value="{{old('title')}}" required>
-        @error('title')
-            <p>{{$message}}</p>
-        @enderror
-        <br />
-        <label for="device_type">device_type:</label>
-        <input type="text" id="device_type" name="device_type" value="{{old('device_type')}}" required>
-        @error('device_type')
-            <p>{{$message}}</p>
-        @enderror
-        <br />
-        <label for="accessories">accessories:</label>
-        <input type="text" id="accessories" name="accessories" value="{{old('accessories')}}">
-        @error('accessories')
-            <p>{{$message}}</p>
-        @enderror
-        <br />
-        <label for="rz_username_buyer">rz_username_buyer:</label>
-        <input type="text" id="rz_username_buyer" name="rz_username_buyer" value="{{old('rz_username_buyer')}}" required>
-        @error('rz_username_buyer')
-            <p>{{$message}}</p>
-        @enderror
-        <br />
-        <label for="serial_number">serial_number:</label>
-        <input type="text" id="serial_number" name="serial_number" value="{{old('serial_number')}}" required>
-        @error('serial_number')
-            <p>{{$message}}</p>
-        @enderror
-        <br />
-        <label for="image_url">image_url:</label>
-        <input id="image_url" name="image_url" value="{{old('image_url')}}" required>
-        @error('image_url')
-            <p>{{$message}}</p>
-        @enderror
-        <br />
-        <label for="description">description:</label>
-        <textarea type="text" id="description" name="description">{{old('rz_username_buyer')}}</textarea>
-        @error('description')
-            <p>{{$message}}</p>
-        @enderror
-        <br />
-        <input type="submit" value="Submit">
-    </form>
-@endsection
\ No newline at end of file
+    <div class="columns is-centered">
+        <div class="column is-6">
+            <div class="box">
+                <h3 class="title is-3 has-text-centered">Create Device</h3>
+
+
+                <form method="POST" action="/devices">
+                    @csrf
+
+                    <div class="field">
+                        <label for="title" class="label">Title</label>
+                        <div class="control">
+                            <input class="input" type="text" id="title" placeholder="Title" name="title"
+                                value="{{ old('title') }}" required />
+                        </div>
+                        @error('title')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="device_type" class="label">device_type</label>
+                        <div class="control">
+                            <input class="input" type="text" id="device_type" placeholder="device_type"
+                                name="device_type" value="{{ old('device_type') }}" required />
+                        </div>
+                        @error('device_type')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="accessories" class="label">accessories</label>
+                        <div class="control">
+                            <input class="input" type="text" id="accessories" placeholder="accessories"
+                                name="accessories" value="{{ old('accessories') }}" />
+                        </div>
+                        @error('accessories')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="rz_username_buyer" class="label">rz_username_buyer</label>
+                        <div class="control">
+                            <input class="input" type="text" id="rz_username_buyer" placeholder="rz_username_buyer"
+                                name="rz_username_buyer" value="{{ old('rz_username_buyer') }}" required />
+                        </div>
+                        @error('rz_username_buyer')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="serial_number" class="label">serial_number</label>
+                        <div class="control">
+                            <input class="input" type="text" id="serial_number" placeholder="serial_number"
+                                name="serial_number" value="{{ old('serial_number') }}" required />
+                        </div>
+                        @error('serial_number')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="image_url" class="label">image_url</label>
+                        <div class="control">
+                            <input class="input" type="text" id="image_url" placeholder="image_url" name="image_url"
+                                value="{{ old('image_url') }}" required />
+                        </div>
+                        @error('image_url')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="description" class="label">description</label>
+                        <div class="control">
+                            <textarea class="textarea" placeholder="description" id="description" name="description">{{ old('description') }}</textarea>
+                        </div>
+                        @error('description')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field is-grouped is-grouped-centered">
+                        <div class="control">
+                            <button class="button is-success" type="submit">Submit</button>
+                        </div>
+                        <div class="control">
+                            <a class="button is-success is-light" href="/devices">Cancel</a>
+                        </div>
+                    </div>
+                </form>
+
+            </div>
+        </div>
+    </div>
+
+@endsection
diff --git a/device-app/resources/views/devices/edit.blade.php b/device-app/resources/views/devices/edit.blade.php
index e258154..5d47709 100644
--- a/device-app/resources/views/devices/edit.blade.php
+++ b/device-app/resources/views/devices/edit.blade.php
@@ -1,57 +1,102 @@
 @extends('layout')
 
 @section('content')
-    <form method="POST" action="/devices/{{$device->device_id}}">
-        @method('PUT')
-        @csrf
-        <!--label for="device_id">device_id:</label>
-        <input type="text" id="device_id" name="device_id" value="{{$device->device_id}}" required>
-        @error('device_id')
-            <p>{{$message}}</p>
-        @enderror
-        <br /-->
-        <label for="title">Title:</label>
-        <input type="text" id="title" name="title" value="{{$device->title}}" required>
-        @error('device_id')
-            <p>{{$message}}</p>
-        @enderror
-        <br />
-        <label for="device_type">device_type:</label>
-        <input type="text" id="device_type" name="device_type" value="{{$device->device_type}}" required>
-        @error('device_id')
-            <p>{{$message}}</p>
-        @enderror
-        <br />
-        <label for="accessories">accessories:</label>
-        <input type="text" id="accessories" name="accessories" value="{{$device->accessories}}">
-        @error('device_id')
-            <p>{{$message}}</p>
-        @enderror
-        <br />
-        <label for="rz_username_buyer">rz_username_buyer:</label>
-        <input type="text" id="rz_username_buyer" name="rz_username_buyer" value="{{$device->rz_username_buyer}}" required>
-        @error('device_id')
-            <p>{{$message}}</p>
-        @enderror
-        <br />
-        <label for="serial_number">serial_number:</label>
-        <input type="text" id="serial_number" name="serial_number" value="{{$device->serial_number}}" required>
-        @error('device_id')
-            <p>{{$message}}</p>
-        @enderror
-        <br />
-        <label for="image_url">image_url:</label>
-        <input id="image_url" name="image_url" value="{{$device->image_url}}" required>
-        @error('device_id')
-            <p>{{$message}}</p>
-        @enderror
-        <br />
-        <label for="description">description:</label>
-        <textarea type="text" id="description" name="description">{{$device->description}}</textarea>
-        @error('device_id')
-            <p>{{$message}}</p>
-        @enderror
-        <br />
-        <input type="submit" value="Submit">
-    </form>
-@endsection
\ No newline at end of file
+    <div class="columns is-centered">
+        <div class="column is-6">
+            <div class="box">
+                <h3 class="title is-3 has-text-centered">Edit Device</h3>
+
+                <form method="POST" action="/devices/{{ $device->device_id }}">
+                    @method('PUT')
+                    @csrf
+
+                    <div class="field">
+                        <label for="title" class="label">Title</label>
+                        <div class="control">
+                            <input class="input" type="text" id="title" name="title"
+                                value="{{ $device->title }}" required />
+                        </div>
+                        @error('title')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="device_type" class="label">device_type</label>
+                        <div class="control">
+                            <input class="input" type="text" id="device_type"
+                                name="device_type" value="{{ $device->device_type }}" required />
+                        </div>
+                        @error('device_type')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="accessories" class="label">accessories</label>
+                        <div class="control">
+                            <input class="input" type="text" id="accessories"
+                                name="accessories" value="{{ $device->accessories }}" />
+                        </div>
+                        @error('accessories')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="rz_username_buyer" class="label">rz_username_buyer</label>
+                        <div class="control">
+                            <input class="input" type="text" id="rz_username_buyer"
+                                name="rz_username_buyer" value="{{ $device->rz_username_buyer }}" required />
+                        </div>
+                        @error('rz_username_buyer')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="serial_number" class="label">serial_number</label>
+                        <div class="control">
+                            <input class="input" type="text" id="serial_number"
+                                name="serial_number" value="{{ $device->serial_number }}" required />
+                        </div>
+                        @error('serial_number')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="image_url" class="label">image_url</label>
+                        <div class="control">
+                            <input class="input" type="text" id="image_url" name="image_url"
+                                value="{{ $device->image_url }}" required />
+                        </div>
+                        @error('image_url')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="description" class="label">description</label>
+                        <div class="control">
+                            <textarea class="textarea" id="description" name="description">{{ $device->description }}</textarea>
+                        </div>
+                        @error('description')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field is-grouped is-grouped-centered">
+                        <div class="control">
+                            <button class="button is-success" type="submit">Submit</button>
+                        </div>
+                        <div class="control">
+                            <a class="button is-success is-light" href="/devices/{{ $device->device_id }}">Cancel</a>
+                        </div>
+                    </div>
+                </form>
+
+            </div>
+        </div>
+    </div>
+@endsection
diff --git a/device-app/resources/views/devices/index.blade.php b/device-app/resources/views/devices/index.blade.php
index 3f8fba0..4b210bb 100644
--- a/device-app/resources/views/devices/index.blade.php
+++ b/device-app/resources/views/devices/index.blade.php
@@ -1,17 +1,37 @@
 @extends('layout')
 
 @section('content')
-    <h1>Device List</h1>
-    @unless(count($devices) == 0)
-        <ul>
-            @foreach ($devices as $device)
-                <x-device-simple :device="$device" />
-            @endforeach
-        </ul>
+    <h3 class="title is-3 has-text-centered">Device List</h3>
+    @can('admin-only')
+        <div class="buttons is-right">
+            <a class="button is-small" href="devices/create">Create Device</a>
+        </div>
+    @endcan
+    @unless (count($devices) == 0)
+        <div class="table-container">
+            <table class="table is-narrow is-fullwidth is-striped is-hoverable">
+                <thead>
+                    <tr>
+                        <th>device_title</th>
+                        <th>device_type</th>
+                        <th>description</th>
+                        <th>accessories</th>
+                        <th>rz_username_buyer</th>
+                        <th>serial_number</th>
+                        <th>image_url</th>
+                        <th>room_code</th>
+                        <th>rz_username</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @foreach ($devices as $device)
+                        <x-device-simple :device="$device" />
+                    @endforeach
+                </tbody>
+            </table>
+        </div>
     @else
         <p>No devices found</p>
     @endunless
-    @can('admin-only')
-        <button><a href="devices/create">Device</a></button>
-    @endcan
+
 @endsection
diff --git a/device-app/resources/views/layout.blade.php b/device-app/resources/views/layout.blade.php
index 71b4c80..b202490 100644
--- a/device-app/resources/views/layout.blade.php
+++ b/device-app/resources/views/layout.blade.php
@@ -2,35 +2,107 @@
 <html>
 
 <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Device Manager</title>
+    {{-- Bulma CSS Framework --}}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" />
 </head>
 
+<style>
+    /*for sticky footer*/
+    body {
+        display: flex;
+        min-height: 100vh;
+        flex-direction: column;
+    }
+
+    #wrapper {
+        flex: 1;
+    }
+</style>
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+
+        // Get all "navbar-burger" elements
+        const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+        // Add a click event on each of them
+        $navbarBurgers.forEach(el => {
+            el.addEventListener('click', () => {
+
+                // Get the target from the "data-target" attribute
+                const target = el.dataset.target;
+                const $target = document.getElementById(target);
+
+                // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+                el.classList.toggle('is-active');
+                $target.classList.toggle('is-active');
+
+            });
+        });
+
+    });
+</script>
+
 <body>
-    <nav>
-        <ul>
-            <li><a href="/home">Home</a></li>
-            @auth
-                <li>Welcome {{ auth()->user()->full_name }}</li>
-                <li>
-                    <form class="inline" method="POST" action="/logout">
-                        @csrf
-                        <button type="submit">Logout</button>
-                    </form>
-                </li>
-            @else
-                <li><a href="/register">Register</a></li>
-                <li><a href="/login">Login</a></li>
-            @endauth
-        </ul>
-    </nav>
-    <main>
-        <h1>Device Manager</h1>
-        <div class="container">
-            @yield('content')
+    <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
+        <div class="navbar-brand">
+            <a class="navbar-item" href="/home">
+                Device Manager
+            </a>
+
+            {{-- nav bar for mobile device --}}
+            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navBarBasic">
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+            </a>
         </div>
+
+        <div id="navBarBasic" class="navbar-menu">
+            <div class="navbar-start">
+                @auth
+                    <a class="navbar-item" href="/devices">To List</a>
+                    <a class="navbar-item" href="/log-viewer">To Log-Viewer</a>
+                @endauth
+            </div>
+
+            <div class="navbar-end">
+                @auth
+                    <div class="navbar-item has-dropdown is-hoverable">
+                        <a class="navbar-link">
+                            {{ auth()->user()->full_name }}
+                        </a>
+                        <div class="navbar-dropdown is-right">
+                            <form class="navbar-item" method="POST" action="/logout">
+                                @csrf
+                                <button class="button is-small" type="submit">Logout</button>
+                            </form>
+                        </div>
+                    </div>
+                @else
+                    <a class="navbar-item" href="/login">
+                        Login
+                    </a>
+                    <a class="navbar-item" href="/register">
+                        Register
+                    </a>
+                @endauth
+            </div>
+        </div>
+    </nav>
+
+    <main id="wrapper">
+        <section class="section">
+            <div class="container">
+                @yield('content')
+            </div>
+        </section>
     </main>
-    <footer>
-        <p>&copy; 2023 My Website. All rights reserved.</p>
+
+    <footer class="footer notification is-dark p-5">
+        <p class="has-text-centered">&copy; 2023 Device-Manager. MIT License.</p>
     </footer>
 </body>
 
diff --git a/device-app/resources/views/locations/create.blade.php b/device-app/resources/views/locations/create.blade.php
index 4ec2798..1c2f893 100644
--- a/device-app/resources/views/locations/create.blade.php
+++ b/device-app/resources/views/locations/create.blade.php
@@ -1,17 +1,48 @@
-<form method="POST" action="/devices/{{ $device->device_id }}/locations">
-    @csrf
-    <label for="room_code">room_code:</label>
-    <input type="text" id="room_code" name="room_code" value="{{old('room_code')}}" required>
-    @error('room_code')
-        <p>{{ $message }}</p>
-    @enderror
-    <br />
-    <label for="timestamp_located_since">timestamp_located_since:</label>
-    <input type="text" id="timestamp_located_since" name="timestamp_located_since"
-        value="{{old('timestamp_located_since')}}" required>
-    @error('timestamp_located_since')
-        <p>{{ $message }}</p>
-    @enderror
-    <br />
-    <input type="submit" value="Submit">
-</form>
\ No newline at end of file
+@extends('layout')
+
+@section('content')
+    <div class="columns is-centered">
+        <div class="column is-6">
+            <div class="box">
+                <h3 class="title is-3 has-text-centered">Create Location</h3>
+                <form method="POST" action="/devices/{{ $device->device_id }}/locations">
+                    @csrf
+
+                    <div class="field">
+                        <label for="room_code" class="label">room_code</label>
+                        <div class="control">
+                            <input class="input" type="text" id="room_code" placeholder="room_code" name="room_code"
+                                value="{{ old('room_code') }}" required />
+                        </div>
+                        @error('room_code')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="timestamp_located_since" class="label">timestamp_located_since</label>
+                        <div class="control">
+                            <input class="input" type="text" id="timestamp_located_since"
+                                placeholder="timestamp_located_since" name="timestamp_located_since"
+                                value="{{ old('timestamp_located_since') }}" required />
+                        </div>
+                        @error('timestamp_located_since')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field is-grouped is-grouped-centered">
+                        <div class="control">
+                            <button class="button is-success" type="submit">Submit</button>
+                        </div>
+                        <div class="control">
+                            <a class="button is-success is-light" href="/devices/{{ $device->device_id }}">Cancel</a>
+                        </div>
+                    </div>
+
+                </form>
+
+            </div>
+        </div>
+    </div>
+@endsection
diff --git a/device-app/resources/views/locations/edit.blade.php b/device-app/resources/views/locations/edit.blade.php
index 670475e..bd9f1ba 100644
--- a/device-app/resources/views/locations/edit.blade.php
+++ b/device-app/resources/views/locations/edit.blade.php
@@ -1,18 +1,48 @@
-<form method="POST" action="/devices/locations/{{ $location->location_transaction_id }}">
-    @method('PUT')
-    @csrf
-    <label for="room_code">room_code:</label>
-    <input type="text" id="room_code" name="room_code" value="{{$location->room_code}}" required>
-    @error('room_code')
-        <p>{{ $message }}</p>
-    @enderror
-    <br />
-    <label for="timestamp_located_since">timestamp_located_since:</label>
-    <input type="text" id="timestamp_located_since" name="timestamp_located_since"
-        value="{{$location->timestamp_located_since}}" required>
-    @error('timestamp_located_since')
-        <p>{{ $message }}</p>
-    @enderror
-    <br />
-    <input type="submit" value="Submit">
-</form>
\ No newline at end of file
+@extends('layout')
+
+@section('content')
+    <div class="columns is-centered">
+        <div class="column is-6">
+            <div class="box">
+                <h3 class="title is-3 has-text-centered">Edit Location</h3>
+                <form method="POST" action="/devices/locations/{{ $location->location_transaction_id }}">
+                    @csrf
+                    @method('PUT')
+                    <div class="field">
+                        <label for="room_code" class="label">room_code</label>
+                        <div class="control">
+                            <input class="input" type="text" id="room_code" name="room_code"
+                                value="{{$location->room_code}}" required />
+                        </div>
+                        @error('room_code')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="timestamp_located_since" class="label">timestamp_located_since</label>
+                        <div class="control">
+                            <input class="input" type="text" id="timestamp_located_since" name="timestamp_located_since"
+                                value="{{$location->timestamp_located_since}}" required />
+                        </div>
+                        @error('timestamp_located_since')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field is-grouped is-grouped-centered">
+                        <div class="control">
+                            <button class="button is-success" type="submit">Submit</button>
+                        </div>
+                        {{-- TODO: make a link to go back to device --}}
+                        {{-- <div class="control">
+                            <a class="button is-success is-light" href="/devices/{{ $device->device_id }}">Cancel</a>
+                        </div> --}}
+                    </div>
+
+                </form>
+
+            </div>
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/device-app/resources/views/owners/create.blade.php b/device-app/resources/views/owners/create.blade.php
index 0983a38..47d9c81 100644
--- a/device-app/resources/views/owners/create.blade.php
+++ b/device-app/resources/views/owners/create.blade.php
@@ -1,17 +1,48 @@
-<form method="POST" action="/devices/{{ $device->device_id }}/owners">
-    @csrf
-    <label for="rz_username">rz_username:</label>
-    <input type="text" id="rz_username" name="rz_username" value="{{old('rz_username')}}" required>
-    @error('rz_username')
-        <p>{{ $message }}</p>
-    @enderror
-    <br />
-    <label for="timestamp_owner_since">timestamp_owner_since:</label>
-    <input type="text" id="timestamp_owner_since" name="timestamp_owner_since"
-        value="{{old('timestamp_owner_since')}}" required>
-    @error('timestamp_owner_since')
-        <p>{{ $message }}</p>
-    @enderror
-    <br />
-    <input type="submit" value="Submit">
-</form>
\ No newline at end of file
+@extends('layout')
+
+@section('content')
+    <div class="columns is-centered">
+        <div class="column is-6">
+            <div class="box">
+                <h3 class="title is-3 has-text-centered">Create Owner</h3>
+                <form method="POST" action="/devices/{{ $device->device_id }}/owners">
+                    @csrf
+
+                    <div class="field">
+                        <label for="rz_username" class="label">rz_username</label>
+                        <div class="control">
+                            <input class="input" type="text" id="rz_username" name="rz_username" placeholder="rz_username"
+                                value="{{old('rz_username')}}" required />
+                        </div>
+                        @error('rz_username')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="timestamp_owner_since" class="label">timestamp_owner_since</label>
+                        <div class="control">
+                            <input class="input" type="text" id="timestamp_owner_since" name="timestamp_owner_since" placeholder="timestamp_owner_since"
+                                value="{{old('timestamp_owner_since')}}" required />
+                        </div>
+                        @error('timestamp_owner_since')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field is-grouped is-grouped-centered">
+                        <div class="control">
+                            <button class="button is-success" type="submit">Submit</button>
+                        </div>
+                        {{-- TODO: make a link to go back to device --}}
+                        {{-- <div class="control">
+                            <a class="button is-success is-light" href="/devices/{{ $device->device_id }}">Cancel</a>
+                        </div> --}}
+                    </div>
+
+                </form>
+
+            </div>
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/device-app/resources/views/owners/edit.blade.php b/device-app/resources/views/owners/edit.blade.php
index ea8da54..b6e7d03 100644
--- a/device-app/resources/views/owners/edit.blade.php
+++ b/device-app/resources/views/owners/edit.blade.php
@@ -1,18 +1,48 @@
-<form method="POST" action="/devices/owners/{{ $owner->owner_transaction_id }}">
-    @method('PUT')
-    @csrf
-    <label for="rz_username">rz_username:</label>
-    <input type="text" id="rz_username" name="rz_username" value="{{$owner->rz_username}}" required>
-    @error('rz_username')
-        <p>{{ $message }}</p>
-    @enderror
-    <br />
-    <label for="timestamp_owner_since">timestamp_owner_since:</label>
-    <input type="text" id="timestamp_owner_since" name="timestamp_owner_since"
-        value="{{$owner->timestamp_owner_since}}" required>
-    @error('timestamp_owner_since')
-        <p>{{ $message }}</p>
-    @enderror
-    <br />
-    <input type="submit" value="Submit">
-</form>
\ No newline at end of file
+@extends('layout')
+
+@section('content')
+    <div class="columns is-centered">
+        <div class="column is-6">
+            <div class="box">
+                <h3 class="title is-3 has-text-centered">Edit Owner</h3>
+                <form method="POST" action="/devices/owners/{{ $owner->owner_transaction_id }}">
+                    @csrf
+                    @method('PUT')
+                    <div class="field">
+                        <label for="rz_username" class="label">rz_username</label>
+                        <div class="control">
+                            <input class="input" type="text" id="rz_username" name="rz_username"
+                                value="{{$owner->rz_username}}" required />
+                        </div>
+                        @error('rz_username')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="timestamp_owner_since" class="label">timestamp_owner_since</label>
+                        <div class="control">
+                            <input class="input" type="text" id="timestamp_owner_since" name="timestamp_owner_since"
+                                value="{{$owner->timestamp_owner_since}}" required />
+                        </div>
+                        @error('timestamp_owner_since')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field is-grouped is-grouped-centered">
+                        <div class="control">
+                            <button class="button is-success" type="submit">Submit</button>
+                        </div>
+                        {{-- TODO: make a link to go back to device --}}
+                        {{-- <div class="control">
+                            <a class="button is-success is-light" href="/devices/{{ $device->device_id }}">Cancel</a>
+                        </div> --}}
+                    </div>
+
+                </form>
+
+            </div>
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/device-app/resources/views/purchasings/edit.blade.php b/device-app/resources/views/purchasings/edit.blade.php
index db0791c..72543ad 100644
--- a/device-app/resources/views/purchasings/edit.blade.php
+++ b/device-app/resources/views/purchasings/edit.blade.php
@@ -1,36 +1,82 @@
-<form method="POST" action="/devices/{{ $purchasing->device->device_id }}/purchasing">
-    @method('PUT')
-    @csrf
-    <label for="price">price:</label>
-    <input type="text" id="price" name="price" value="{{$purchasing->price}}" required>
-    @error('price')
-        <p>{{ $message }}</p>
-    @enderror
-    <br />
-    <label for="timestamp_warranty_end">timestamp_warranty_end:</label>
-    <input type="text" id="timestamp_warranty_end" name="timestamp_warranty_end"
-        value="{{$purchasing->timestamp_warranty_end}}" required>
-    @error('timestamp_warranty_end')
-        <p>{{ $message }}</p>
-    @enderror
-    <br />
-    <label for="timestamp_purchase">timestamp_purchase:</label>
-    <input type="text" id="timestamp_purchase" name="timestamp_purchase"
-        value="{{$purchasing->timestamp_purchase}}" required>
-    @error('timestamp_purchase')
-        <p>{{ $message }}</p>
-    @enderror
-    <br />
-    <label for="cost_centre">cost_centre:</label>
-    <input type="text" id="cost_centre" name="cost_centre" value="{{$purchasing->cost_centre}}" required>
-    @error('cost_centre')
-        <p>{{ $message }}</p>
-    @enderror
-    <br />
-    <label for="seller">seller:</label>
-    <input type="text" id="seller" name="seller" value="{{$purchasing->seller}}">
-    @error('seller')
-        <p>{{ $message }}</p>
-    @enderror
-    <input type="submit" value="Submit">
-</form>
+@extends('layout')
+
+@section('content')
+    <div class="columns is-centered">
+        <div class="column is-6">
+            <div class="box">
+                <h3 class="title is-3 has-text-centered">Edit Purchasing</h3>
+                <form method="POST" action="/devices/{{ $purchasing->device->device_id }}/purchasing">
+                    @method('PUT')
+                    @csrf
+
+                    <div class="field">
+                        <label for="price" class="label">price</label>
+                        <div class="control">
+                            <input class="input" type="text" id="price" name="price"
+                                value="{{$purchasing->price}}" required />
+                        </div>
+                        @error('price')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="timestamp_warranty_end" class="label">timestamp_warranty_end</label>
+                        <div class="control">
+                            <input class="input" type="text" id="timestamp_warranty_end" name="timestamp_warranty_end"
+                                value="{{$purchasing->timestamp_warranty_end}}" required />
+                        </div>
+                        @error('timestamp_warranty_end')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="timestamp_purchase" class="label">timestamp_purchase</label>
+                        <div class="control">
+                            <input class="input" type="text" id="timestamp_purchase" name="timestamp_purchase"
+                                value="{{$purchasing->timestamp_purchase}}" required />
+                        </div>
+                        @error('timestamp_purchase')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="cost_centre" class="label">cost_centre</label>
+                        <div class="control">
+                            <input class="input" type="text" id="cost_centre" name="cost_centre"
+                                value="{{$purchasing->cost_centre}}" required />
+                        </div>
+                        @error('cost_centre')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="seller" class="label">seller</label>
+                        <div class="control">
+                            <input class="input" type="text" id="seller" name="seller"
+                                value="{{$purchasing->seller}}" required />
+                        </div>
+                        @error('seller')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field is-grouped is-grouped-centered">
+                        <div class="control">
+                            <button class="button is-success" type="submit">Submit</button>
+                        </div>
+                        {{-- TODO: make a link to go back to device --}}
+                        {{-- <div class="control">
+                            <a class="button is-success is-light" href="/devices/{{ $device->device_id }}">Cancel</a>
+                        </div> --}}
+                    </div>
+
+                </form>
+
+            </div>
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/device-app/resources/views/users/login.blade.php b/device-app/resources/views/users/login.blade.php
index 01572d3..a1b4698 100644
--- a/device-app/resources/views/users/login.blade.php
+++ b/device-app/resources/views/users/login.blade.php
@@ -1,25 +1,51 @@
 @extends('layout')
 
 @section('content')
-    <h1>Login Form</h1>
-    <form method="POST" action="/users/authenticate">
-        @csrf
-        <label for="rz_username">RZ-Username:</label>
-        <input type="text" id="rz_username" name="rz_username" value="{{ old('device_id') }}" required>
-        @error('rz_username')
-            <p>{{ $message }}</p>
-        @enderror
-        <br />
-        <label for="hashed_password">Password:</label>
-        <input type="password" id="hashed_password" name="password" required>
-        @error('hashed_password')
-            <p>{{ $message }}</p>
-        @enderror
-        <br />
-        <input type="submit" value="Login">
-        <div>
-            <p>Don't have an account?</p>
-            <a href="/register">Register</a>
+    <div class="columns is-centered">
+        <div class="column is-4">
+            <div class="box">
+                <h3 class="title is-3 has-text-centered">Login Form</h3>
+                <form method="POST" action="/users/authenticate">
+                    @csrf
+
+                    <div class="field">
+                        <label for="rz_username" class="label">RZ-Username</label>
+                        <div class="control">
+                            <input class="input" type="text" id="rz_username" placeholder="RZ-Username"
+                                name="rz_username" value="{{ old('device_id') }}" required />
+                        </div>
+                        @error('rz_username')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="hashed_password" class="label">Password</label>
+                        <div class="control">
+                            <input class="input" type="password" id="hashed_password" name="password" required />
+                        </div>
+                        @error('hashed_password')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field is-grouped is-grouped-centered">
+                        <div class="control">
+                            <button class="button is-success" type="submit">Login</button>
+                        </div>
+                        <div class="control">
+                            <a class="button is-success is-light" href="/home">Cancel</a>
+                        </div>
+                    </div>
+
+                </form>
+
+                <div class="has-text-centered">
+                    <p>Don't have an account?</p>
+                    <a href="/register">Register</a>
+                </div>
+
+            </div>
         </div>
-    </form>
-@endsection
+    </div>
+@endsection
\ No newline at end of file
diff --git a/device-app/resources/views/users/register.blade.php b/device-app/resources/views/users/register.blade.php
index e407240..a359216 100644
--- a/device-app/resources/views/users/register.blade.php
+++ b/device-app/resources/views/users/register.blade.php
@@ -1,43 +1,79 @@
 @extends('layout')
 
 @section('content')
-    <h1>Registration Form</h1>
-    <form method="POST" action="/users">
-        @csrf
-        <label for="rz_username">RZ-Username:</label>
-        <input type="text" id="rz_username" name="rz_username" value="{{old('device_id')}}" required>
-        @error('rz_username')
-            <p>{{$message}}</p>
-        @enderror
-        <br/>
-        <label for="full_name">Full Name:</label>
-        <input type="text" id="full_name" name="full_name" value="{{old('device_id')}}" required>
-        @error('full_name')
-            <p>{{$message}}</p>
-        @enderror
-        <br/>
-        <label for="organisation_unit">Organisation Unit:</label>
-        <input type="text" id="organisation_unit" name="organisation_unit" value="{{old('device_id')}}" required>
-        @error('organisation_unit')
-            <p>{{$message}}</p>
-        @enderror
-        <br/>
-        <label for="password">Password:</label>
-        <input type="password" id="password" name="password" required>
-        @error('password')
-            <p>{{$message}}</p>
-        @enderror
-        <br/>
-        {{-- <label for="password_confirm">Confirm Password:</label>
-        <input type="password" id="password_confirmation" name="password_confirm" required><
-        @error('password_confirmation')
-            <p>{{$message}}</p>
-        @enderror
-        <br/> --}}
-        <input type="submit" value="Register">
-        <div>
-            <p>Already have an account?</p>
-            <a href="/login">Login</a>
+    <div class="columns is-centered">
+        <div class="column is-4">
+            <div class="box">
+                <h3 class="title is-3 has-text-centered">Registration Form Form</h3>
+                <form method="POST" action="/users">
+                    @csrf
+
+                    <div class="field">
+                        <label for="rz_username" class="label">RZ-Username</label>
+                        <div class="control">
+                            <input class="input" type="text" id="rz_username" name="rz_username"
+                                value="{{ old('device_id') }}" placeholder="RZ-Username" required />
+                        </div>
+                        @error('rz_username')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="full_name" class="label">Full Name</label>
+                        <div class="control">
+                            <input class="input" type="text" id="full_name" name="full_name"
+                                value="{{ old('device_id') }}" placeholder="Full Name" required />
+                        </div>
+                        @error('full_name')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="organisation_unit" class="label">Organisation Unit</label>
+                        <div class="control">
+                            <input class="input" type="text" id="organisation_unit" name="organisation_unit"
+                                value="{{ old('device_id') }}" placeholder="Organisation Unit" required />
+                        </div>
+                        @error('organisation_unit')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field">
+                        <label for="password" class="label">Password</label>
+                        <div class="control">
+                            <input class="input" type="password" id="password" name="password" required />
+                        </div>
+                        @error('password')
+                            <p class="help is-danger">{{ $message }}</p>
+                        @enderror
+                    </div>
+
+                    <div class="field is-grouped is-grouped-centered">
+                        <div class="control">
+                            <button class="button is-success" type="submit">Register</button>
+                        </div>
+                        <div class="control">
+                            <a class="button is-success is-light" href="/home">Cancel</a>
+                        </div>
+                    </div>
+
+                    {{-- 
+                        <label for="password_confirm">Confirm Password:</label>
+                        <input type="password" id="password_confirmation" name="password_confirm" required><
+                        @error('password_confirmation')
+                            <p>{{$message}}</p>
+                        @enderror
+                    --}}
+
+                </form>
+                <div class="has-text-centered">
+                    <p>Already have an account?</p>
+                    <a href="/login">Login</a>
+                </div>
+            </div>
         </div>
-    </form>
-@endsection
+    </div>
+@endsection
\ No newline at end of file
diff --git a/device-app/resources/views/welcome.blade.php b/device-app/resources/views/welcome.blade.php
index 0e032e8..155f4fe 100644
--- a/device-app/resources/views/welcome.blade.php
+++ b/device-app/resources/views/welcome.blade.php
@@ -1,10 +1,8 @@
 @extends('layout')
 
 @section('content')
-    <h1>Welcome</h1>
-    <a href="/devices">To List</a>
-    <br/>
-    @can('admin-only')
-        <a href="/log-viewer">To Log Viewer</a>
-    @endcan
+    <h3 class="title is-3 has-text-centered">Welcome</h3>
 @endsection
+{{-- @can('admin-only')
+        <a href="/log-viewer">To Log Viewer</a>
+    @endcan --}}