diff --git a/public/js/home.js b/public/js/home.js
index e7abc7c..ecf8268 100644
--- a/public/js/home.js
+++ b/public/js/home.js
@@ -9,9 +9,11 @@ document.addEventListener('DOMContentLoaded', () => {
         const texts = await response.json();
         textsList.innerHTML = texts
             .map(text =>
-                '<li>' + text.name +
-                ' <button class="create-plan" data-text-id="' +
-                text.id + '">Create plan</button></li>'
+                '<li class="card cluster cluster-between">' +
+                '<span class="text-name">' + text.name + '</span>' +
+                '<button class="create-plan btn btn-primary"' +
+                ' data-text-id="' + text.id + '">Create plan</button>' +
+                '</li>'
             )
             .join('');
     }
diff --git a/views/templates/home.php b/views/templates/home.php
index 837e0a6..97d3aa7 100644
--- a/views/templates/home.php
+++ b/views/templates/home.php
@@ -7,24 +7,37 @@
     <link rel="stylesheet" href="/css/app.css">
 </head>
 <body>
-    <h1>Home</h1>
-    <button id="logout">Logout</button>
-    <a href="/today">Today's schedule</a>
-    <ul id="texts-list">
-    </ul>
-    <div id="create-plan-modal" hidden>
-        <h2>Create plan</h2>
-        <label>Name
-            <input class="plan-name" type="text" />
-        </label>
-        <label>Start date
-            <input class="plan-date-start" type="date" />
-        </label>
-        <label>End date
-            <input class="plan-date-end" type="date" />
-        </label>
-        <button class="save-plan">Save</button>
-        <button class="cancel-plan">Cancel</button>
+    <header class="site-header">
+        <div class="site-header-inner">
+            <h1>Home</h1>
+            <div class="cluster">
+                <a class="btn btn-secondary" href="/today">
+                    Today's schedule
+                </a>
+                <button id="logout" class="btn btn-danger">Logout</button>
+            </div>
+        </div>
+    </header>
+    <main class="container stack-lg">
+        <ul id="texts-list" class="list-cards"></ul>
+    </main>
+    <div id="create-plan-modal" class="modal" hidden>
+        <div class="modal-content stack">
+            <h2>Create plan</h2>
+            <label>Name
+                <input class="plan-name" type="text" />
+            </label>
+            <label>Start date
+                <input class="plan-date-start" type="date" />
+            </label>
+            <label>End date
+                <input class="plan-date-end" type="date" />
+            </label>
+            <div class="cluster cluster-end">
+                <button class="cancel-plan btn btn-secondary">Cancel</button>
+                <button class="save-plan btn btn-primary">Save</button>
+            </div>
+        </div>
     </div>
     <script src="/js/auth.js"></script>
     <script src="/js/home.js"></script>
