diff --git a/.lando.yml b/.lando.yml
index c3181bb..f11f26f 100644
--- a/.lando.yml
+++ b/.lando.yml
@@ -14,6 +14,11 @@ services:
     type: node
     build:
       - npm install
+  appserver:
+    scanner:
+      okCodes:
+        401
+        200
 
 excludes:
   - node_modules
diff --git a/resources/views/components/form/select.blade.php b/resources/views/components/form/select.blade.php
index 0a66e78..cc8bb24 100644
--- a/resources/views/components/form/select.blade.php
+++ b/resources/views/components/form/select.blade.php
@@ -1,4 +1,4 @@
-@props(['label' => '', 'id' => '', 'name' => '', 'help' => '', 'autocomplete' => 'on'])
+@props(['label' => '', 'id' => '', 'name' => '', 'autocomplete' => 'on'])
 
 <div class="sm:col-span-3">
     @if ($label)
@@ -10,7 +10,8 @@
             {{ $slot }}
         </select>
     </div>
-    @if ($help)
+
+    @isset($help)
         <p class="mt-3 text-sm leading-6 text-gray-600">{{ $help }}</p>
-    @endif
+    @endisset
 </div>
diff --git a/resources/views/components/layout/media-card.blade.php b/resources/views/components/layout/media-card.blade.php
new file mode 100644
index 0000000..1dbffec
--- /dev/null
+++ b/resources/views/components/layout/media-card.blade.php
@@ -0,0 +1,13 @@
+<div class="sm:flex">
+  <div class="mb-4 flex-shrink-0 sm:mb-0 sm:mr-4">
+    <span class="h-16 w-16">
+        {{ $media }}
+    </span>
+  </div>
+  <div>
+    <h4 class="text-lg font-bold">{{ $heading }}</h4>
+    <p class="mt-1">
+        {{ $slot }}
+    </p>
+  </div>
+</div>
diff --git a/resources/views/components/layout/timeline-item.blade.php b/resources/views/components/layout/timeline-item.blade.php
new file mode 100644
index 0000000..85d2723
--- /dev/null
+++ b/resources/views/components/layout/timeline-item.blade.php
@@ -0,0 +1,27 @@
+@props(['timestamp' => now()->format('M d, Y'), 'iconBg' => 'bg-gray-400', 'last' => false])
+<li>
+  <div class="relative pb-8">
+    @if (!$last)
+        <span class="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
+    @endif
+    <div class="relative flex space-x-3">
+      <div>
+        <span class="h-8 w-8 rounded-full {{ $iconBg }} flex items-center justify-center ring-8 ring-white">
+            @isset($icon)
+                    {{ $icon }}
+            @endisset
+        </span>
+      </div>
+      <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+        <div>
+          <p class="text-sm text-gray-500">
+            {{ $slot }}
+        </p>
+        </div>
+        <div class="whitespace-nowrap text-right text-sm text-gray-500">
+          <span>{{ $timestamp }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</li>
diff --git a/resources/views/components/layout/timeline.blade.php b/resources/views/components/layout/timeline.blade.php
new file mode 100644
index 0000000..ea69a00
--- /dev/null
+++ b/resources/views/components/layout/timeline.blade.php
@@ -0,0 +1,5 @@
+<div {{ $attributes->merge(['class' => "flow-root"]) }}>
+  <ul role="list" class="-mb-8">
+    {{ $slot }}
+  </ul>
+</div>
diff --git a/resources/views/livewire/machine-list2.blade.php b/resources/views/livewire/machine-list2.blade.php
index 6fc28dc..b94f369 100644
--- a/resources/views/livewire/machine-list2.blade.php
+++ b/resources/views/livewire/machine-list2.blade.php
@@ -9,11 +9,47 @@
                 </span>
             </button>
         </x-message.info>
-        <x-form.textarea id="texty" name="hellothere" label="My Label" help="Type hello">Hello</x-form.textarea>
+        <x-layout.timeline class="w-1/2">
+            <x-layout.timeline-item timestamp="13:15" icon-bg="bg-sky-500">
+                <x-slot:icon>
+                    <span class="text-white">
+                        <x-icon.circle-tick class="text-white" />
+                    </span>
+                </x-slot:icon>
+                Hello
+            </x-layout.timeline-item>
+            <x-layout.timeline-item timestamp="14:20" last="true">
+                <x-slot:icon>
+                    <span class="text-white">
+                        <x-icon.circle-tick class="text-white" />
+                    </span>
+                </x-slot:icon>
+                There
+            </x-layout.timeline-item>
+        </x-layout.timeline>
+        <x-layout.media-card>
+            <x-slot:media>
+                <svg class="h-16 w-16 border border-gray-300 bg-white text-gray-300" preserveAspectRatio="none" stroke="currentColor" fill="none" viewBox="0 0 200 200" aria-hidden="true">
+                  <path vector-effect="non-scaling-stroke" stroke-width="1" d="M0 0l200 200M0 200L200 0" />
+                </svg>
+            </x-slot:media>
+            <x-slot:heading>
+                Hello
+            </x-slot:heading>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod facilis beatae ut saepe, dolorem omnis asperiores commodi quia voluptatibus cum perferendis delectus, aliquid quasi quae. At repellendus beatae veniam molestias.
+        </x-layout.media-card>
+        <x-form.textarea id="texty" name="hellothere" label="My Label">
+            Hello
+            There sdkjf sdkjf sdkfjh sjdk fsdf
+            skjjf skdjf sdkf jsfd
+        </x-form.textarea>
         <x-form.select label="My Select">
             <option>One</option>
             <option>Two</option>
             <option>Three</option>
+            <x-slot:help>
+                This is a help message
+            </x-slot:help>
         </x-form.select>
         <div class="flex flex-wrap gap-4 mt-2">
             <x-form.radio label="My Radio" name="radio1" value="3" id="radio1"/>