diff --git a/partials/cardTutorialSm.hbs b/partials/cardTutorialSm.hbs
new file mode 100644
index 0000000..ad539e2
--- /dev/null
+++ b/partials/cardTutorialSm.hbs
@@ -0,0 +1,39 @@
+<div class="flex flex-col rounded-lg transition hover:ring-4 shadow hover:shadow-2xl overflow-hidden">
+  <div class="flex-shrink-0">
+    <a href="{{url}}" class="block">
+      {{#if feature_image}}
+      <img class="h-32 w-full object-cover" srcset="{{img_url feature_image size=" s"}} 300w, {{img_url feature_image
+        size="m" }} 600w, {{img_url feature_image size="l" }} 1000w, {{img_url feature_image size="xl" }} 2000w"
+        sizes="(max-width: 1000px) 400px, 700px" src="{{img_url feature_image size=" m"}}" alt="{{title}}">
+      {{else}}
+      <div class="h-32 w-full block bg-blue-500">&nbsp;</div>
+      {{/if}}
+    </a>
+  </div>
+  <div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
+    <div class="flex-1">
+      <a href="{{url}}" class="block mt-2">
+        <p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
+          {{title}}
+        </p>
+        <p class="mt-3 text-sm text-gray-500 line-clamp-3 md:line-clamp-4">
+          {{excerpt}}
+        </p>
+      </a>
+    </div>
+    <div class="mt-6 flex">
+      <div class="">
+        <p class="text-sm font-medium text-gray-900 dark:text-gray-200">
+          {{#foreach authors}}
+          {{name}}
+          {{/foreach}}
+          <span aria-hidden="true">
+            &middot;
+          </span>
+          <span class="text-gray-500"> <time datetime="{{date format=" YYYY-MM-DD"}}">{{date format="D MMM
+              YYYY"}}</time></span>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/partials/pagination.hbs b/partials/pagination.hbs
index a63316c..1905692 100644
--- a/partials/pagination.hbs
+++ b/partials/pagination.hbs
@@ -1,4 +1,4 @@
-<nav class="pagination text-center text-xl" role="navigation">
+<nav class="pagination text-center" role="navigation">
   {{#if prev}}
     <a class="newer-posts text-blue-600 rounded-full bg-white dark:bg-gray-900 mx-5 py-2 px-5 shadow transition hover:shadow-xl" href="{{page_url prev}}">&larr;
       Newer Posts</a>
diff --git a/tutorials.hbs b/tutorials.hbs
index 214d85d..e541ca4 100644
--- a/tutorials.hbs
+++ b/tutorials.hbs
@@ -41,11 +41,11 @@
     </div>
   </div>
 
-  <div class="w-default mt-6 grid gap-5 md:grid-cols-2 lg:grid-cols-3">
+  <div class="w-default mt-10 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
 
     {{#foreach posts columns=3}}
 
-    {{> cardBlogSm}}
+    {{> cardTutorialSm}}
 
     {{/foreach}}