diff --git a/resources/views/components/box.blade.php b/resources/views/components/box.blade.php
index e2e5e37..d515f52 100644
--- a/resources/views/components/box.blade.php
+++ b/resources/views/components/box.blade.php
@@ -1,3 +1,5 @@
+@props(['title' => null])
+
 <div class="overflow-hidden rounded-lg bg-white shadow-sm">
     @isset($title)
         <div class="flex items-center justify-between border-b border-[#E1E6EA] px-5 py-4 text-lg font-medium leading-none">
diff --git a/resources/views/layout/auth.blade.php b/resources/views/components/layout/auth.blade.php
similarity index 79%
rename from resources/views/layout/auth.blade.php
rename to resources/views/components/layout/auth.blade.php
index 0bb9973..2ad3116 100644
--- a/resources/views/layout/auth.blade.php
+++ b/resources/views/components/layout/auth.blade.php
@@ -1,16 +1,18 @@
+@props(['title' => 'Log in on Helium'])
+
 <!doctype html>
 <html lang="fr">
 
 <head>
     <meta charset="UTF-8">
-    <title>Login on Helium</title>
+    <title>{{ $title }}</title>
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0">
     @vite('resources/css/vendor/helium/app.css')
 </head>
 
 <body class="flex min-h-screen items-center justify-center bg-slate-200">
-    @yield('content')
+    {{ $slot }}
     @vite('resources/js/vendor/helium/app.js')
 </body>
 
diff --git a/resources/views/components/layout/icon.blade.php b/resources/views/components/layout/element/icon.blade.php
similarity index 100%
rename from resources/views/components/layout/icon.blade.php
rename to resources/views/components/layout/element/icon.blade.php
diff --git a/resources/views/components/layout/profil.blade.php b/resources/views/components/layout/element/profil.blade.php
similarity index 100%
rename from resources/views/components/layout/profil.blade.php
rename to resources/views/components/layout/element/profil.blade.php
diff --git a/resources/views/components/layout/topbar.blade.php b/resources/views/components/layout/element/topbar.blade.php
similarity index 100%
rename from resources/views/components/layout/topbar.blade.php
rename to resources/views/components/layout/element/topbar.blade.php
diff --git a/resources/views/layout/admin.blade.php b/resources/views/components/layout/main.blade.php
similarity index 62%
rename from resources/views/layout/admin.blade.php
rename to resources/views/components/layout/main.blade.php
index a5ae5ef..0dd3008 100644
--- a/resources/views/layout/admin.blade.php
+++ b/resources/views/components/layout/main.blade.php
@@ -1,3 +1,12 @@
+@props([
+    'title' => 'Helium',
+    'css',
+    'cssStack',
+    'topbar',
+    'js',
+    'jsStack',
+])
+
 <!DOCTYPE html>
 <html lang="fr">
 
@@ -7,35 +16,35 @@
           content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible"
           content="ie=edge">
-    @yield('css')
-    @stack('css-stack')
-    {{-- todo @val: this path won't work in a real environment --}}
-    @vite('packages/helium-core/resources/css/app.css')
-    <title>Helium</title>
+    @vite('resources/css/vendor/helium/app.css')
+    {{ $css }}
+    {{ $cssStack }}
+
+    <title>{{ $title }}</title>
 </head>
 
 <body class="bg-[#F0F2F4] pb-10 text-base text-slate-800 antialiased">
     <main class="flex">
         <div class="fixed inset-y-0 left-0 w-64 overflow-auto border-r border-[#E1E6EA] bg-white pb-4 pt-5">
             <div class="flex flex-shrink-0 flex-grow flex-col px-3 pb-[70px]">
-                <x-hui::layout.icon class="mb-5 w-10" />
+                <x-hui::layout.element.icon class="mb-5 w-10" />
                 <x-hui::menu />
             </div>
             <div class="fixed bottom-0 w-64 border-r border-[#E1E6EA] bg-white">
-                <x-hui::layout.profil />
+                <x-hui::layout.element.profil />
             </div>
         </div>
         <div class="ml-[16rem] grow">
-            @yield('topbar')
+            {{ $topbar }}
             <div class="max-w mx-auto w-[90%] space-y-5 pt-10">
-                @yield('content')
+                {{ $slot }}
             </div>
         </div>
     </main>
-    {{-- todo @val: this path won't work in a real environment --}}
-    @vite('packages/helium-core/resources/js/app.js')
-    @yield('js')
-    @stack('js-stack')
+
+    @vite('resources/js/vendor/helium/app.js')
+    {{ $js }}
+    {{ $jsStack }}
 </body>
 
 </html>
diff --git a/resources/views/pages/login.blade.php b/resources/views/pages/login.blade.php
index 3208275..aa662ba 100644
--- a/resources/views/pages/login.blade.php
+++ b/resources/views/pages/login.blade.php
@@ -1,23 +1,19 @@
-@extends('hui::layout.auth')
-
-@section('content')
+<x-hui::layout.auth title="Log in">
     <form action="{{ route('helium::postLogin') }}"
           method="post">
         @csrf
-        <div class="form-group">
-            <label for="email">Email</label>
-            <input type="email"
-                   name="email"
-                   id="email"
-                   required>
-        </div>
-        <div class="form-group">
-            <label for="password">Password</label>
-            <input type="password"
-                   name="password"
-                   id="password"
-                   required>
-        </div>
-        <button type="submit">Login</button>
+        <x-hui::box>
+            <x-hui::form.input label="Email"
+                               type="email"
+                               name="email"
+                               required />
+
+            <x-hui::form.input label="Password"
+                               type="password"
+                               name="password"
+                               required />
+            <x-hui::button label="Login"
+                           class="mt-3 w-full" />
+        </x-hui::box>
     </form>
-@endsection
+</x-hui::layout.auth>
