diff --git a/sample_data/home/index.ejs b/sample_data/home/index.ejs
index 0517fdc..aeb4bc4 100644
--- a/sample_data/home/index.ejs
+++ b/sample_data/home/index.ejs
@@ -6,16 +6,18 @@
 </head>
 <body>
 <main>
-    <h1><%= info.title %></h1>
+    <h1 class="title"><%= info.title %></h1>
     <%= info.description %>
     <h2>Articles in this blog :</h2>
     <% articles.forEach((article) => { %>
         <div class="article">
-            <h3><%- `<a href="${article.url}">${article.title}</a>` %></h3>
-            <span class="time"><span>Published on</span> <%= article.year + '-' + article.month + '-' + article.day %></span>
+            <%- `<a href="${article.url}">` %>
+            <h3><%- `${article.title}` %></h3>
+            <span class="time"><span>Published on</span>&nbsp;&nbsp;<%= article.year + '-' + ('0' + article.month).slice(-2) + '-' + ('0' + article.day).slice(-2) %></span>
             <% if(article.thumbnail){ %>
                 <%- `<img alt="thumbnail" src=${article.thumbnail}>` %>
             <% } %>
+            <%- `</a>` %>
         </div>
     <% }); %>
     <%- include('footer'); %>
diff --git a/sample_data/home/style.css b/sample_data/home/style.css
index e0b0dcc..62a05de 100644
--- a/sample_data/home/style.css
+++ b/sample_data/home/style.css
@@ -16,7 +16,7 @@ body {
 }
 
 main {
-    max-width: 42rem;
+    max-width: 45rem;
     padding: 2rem;
     margin: auto;
     background-color: #F0F0F0;
@@ -54,6 +54,13 @@ pre {
     padding: 10px 16px;
 }
 
+:not(pre) > code {
+    padding: 0.25em 0.5em;
+    border-radius: 0.25em;
+    background: #DDD;
+    font-size: 90%;
+}
+
 blockquote {
     border-left: 0.5em solid #ccc;
     padding-left: 1em;
@@ -108,10 +115,11 @@ main.article div.header a.link-home {
     line-height: 2.4;
 }
 
-main.article div.header h1, main.article div.header h2 {
+main.article div.header h1, main.article div.header h2, .title {
     margin-top: 0.85em;
     margin-bottom: 0.25em;
     font-size: 2em;
+    font-weight: bold;
 }
 
 main.article div.header h1 a, main.article div.header h2 a, div.article h3 a {
@@ -129,6 +137,12 @@ div.article {
 div.article h3 {
     font-size: 1.3em;
     margin:0;
+    color: #3C3CA1;
+}
+
+div.article a {
+    text-decoration: none;
+    color: inherit;
 }
 
 div.article img{
@@ -138,6 +152,15 @@ div.article img{
     margin-top:0.25em;
 }
 
+div.article:hover {
+    opacity: 0.9;
+}
+
+div.article:active {
+    opacity: 0.8;
+}
+
+
 #text {
     text-align: justify;
     hyphens: auto;
diff --git a/sample_data/home/template.ejs b/sample_data/home/template.ejs
index e2590c1..f1f4c82 100644
--- a/sample_data/home/template.ejs
+++ b/sample_data/home/template.ejs
@@ -9,7 +9,7 @@
     <div class="header">
         <a class="link-home" href="/">↑</a>
         <h1><%= article.title %></h1>
-        <span class="time"><span>Published on</span> <%= article.year + '-' + article.month + '-' + article.day %></span>
+        <span class="time"><span><%= article.draft ? 'Drafted on' : 'Published on' %></span>&nbsp;&nbsp;<%= article.year + '-' + ('0' + article.month).slice(-2) + '-' + ('0' + article.day).slice(-2) %></span>
     </div>
     <div id="text"><%- article.content %></div>
     <br>
