diff --git a/templates/Import/index.html.twig b/templates/Import/index.html.twig
index 5816c297b..236a7f887 100644
--- a/templates/Import/index.html.twig
+++ b/templates/Import/index.html.twig
@@ -15,15 +15,20 @@
             {% include 'Import/_information.html.twig' %}
 
             {{ 'import.page_description'|trans }}
-            <ul>
+            <div class="row">
                 {% for import in imports %}
-                    <li>
-                        <h5>{{ import.name }}</h5>
-                        <blockquote>{{ import.description|trans|raw }}</blockquote>
-                        <p><a class="waves-effect waves-light btn" href="{{ path(import.url) }}">{{ 'import.action.import_contents'|trans }}</a></p>
-                    </li>
+                <div class="col s6 m3">
+                    <div class="card">
+                      <div class="card-content">
+                        <span class="card-title">{{ import.name }}</span>
+                      </div>
+                      <div class="card-action">
+                        <a href="{{ path(import.url) }}">{{ 'import.action.import_contents'|trans }}</a>
+                      </div>
+                    </div>
+                  </div>
                 {% endfor %}
-            </ul>
+            </div>
         </div>
     </div>
 </div>
diff --git a/tests/Controller/Import/ImportControllerTest.php b/tests/Controller/Import/ImportControllerTest.php
index f2cadb421..3fc131c87 100644
--- a/tests/Controller/Import/ImportControllerTest.php
+++ b/tests/Controller/Import/ImportControllerTest.php
@@ -22,8 +22,7 @@ class ImportControllerTest extends WallabagTestCase
         $client = $this->getTestClient();
 
         $crawler = $client->request('GET', '/import/');
-
         $this->assertSame(200, $client->getResponse()->getStatusCode());
-        $this->assertSame(12, $crawler->filter('blockquote')->count());
+        $this->assertSame(12, $crawler->filter('.card-title')->count());
     }
 }