diff --git a/app/resources/views/home.blade.php b/app/resources/views/home.blade.php
index fde4321..4a49196 100644
--- a/app/resources/views/home.blade.php
+++ b/app/resources/views/home.blade.php
@@ -2,10 +2,37 @@
 
 @section('page_content')
     <div class="ui container">
-        <div class="ui list">
-            @foreach ($files as $file)
-                <a class="item" href="{{$urls->base}}/log/{{urlencode($file->getBasename())}}">[{{(new DateTimeImmutable)->setTimestamp($file->getCTime())->format('Y-m-d H:i:s')}}] {{$file->getBasename()}}</a>
+        <table class="ui table" id="logs">
+            <thead>
+            <tr>
+                <th>Date <i class="calendar icon"></i></th>
+                <th>File <i class="file icon"></i></th>
+            </tr>
+            </thead>
+            <tbody>
+            @foreach($files as $file)
+            <tr>
+                <td class="collapsing">
+                    {{(new DateTimeImmutable)->setTimestamp($file->getCTime())->format('Y-m-d H:i:s')}}
+                </td>
+                <td>
+                    <a href="{{$urls->base}}/log/{{urlencode($file->getBasename())}}">
+                        {{$file->getBasename()}}
+                    </a>
+                </td>
+            </tr>
             @endforeach
-        </div>
+            </tbody>
+        </table>
     </div>
 @endsection
+
+@push('page_scripts')
+    <script type="text/javascript">
+        $(document).ready(() => {
+            new DataTable('#logs', {
+                order: [[0, 'desc']]
+            })
+        })
+    </script>
+@endpush
diff --git a/app/resources/views/layout/body/scripts.blade.php b/app/resources/views/layout/body/scripts.blade.php
index 7dc11f8..e236222 100644
--- a/app/resources/views/layout/body/scripts.blade.php
+++ b/app/resources/views/layout/body/scripts.blade.php
@@ -1,4 +1,5 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.js" integrity="sha512-5cguXwRllb+6bcc2pogwIeQmQPXEzn2ddsqAexIBhh7FO1z5Hkek1J9mrK2+rmZCTU6b6pERxI7acnp1MpAg4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
 
 @stack('page_scripts')
diff --git a/app/resources/views/layout/head/styles.blade.php b/app/resources/views/layout/head/styles.blade.php
index 60ed4f9..b2fdb11 100644
--- a/app/resources/views/layout/head/styles.blade.php
+++ b/app/resources/views/layout/head/styles.blade.php
@@ -1,3 +1,4 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.css" integrity="sha512-n//BDM4vMPvyca4bJjZPDh7hlqsQ7hqbP9RH18GF2hTXBY5amBwM2501M0GPiwCU/v9Tor2m13GOTFjk00tkQA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+<link rel="stylesheet" href="http://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" />
 
 @stack('page_styles')