diff --git a/ippisite/ippidb/templates/compound_l_item.html b/ippisite/ippidb/templates/compound_l_item.html
index 728ff060b1aadb516ea3a70ad71105c4c3103ca8..9837d66e679b07e0e3ff8d306dad64bdfa46854b 100644
--- a/ippisite/ippidb/templates/compound_l_item.html
+++ b/ippisite/ippidb/templates/compound_l_item.html
@@ -1,10 +1,13 @@
 <div class="row m-2 border border-info bg-light">
   <div class="col-sm-3 border-info d-flex justify-content-center align-content-center">
     <a href="/compounds/{{ compound.id }}">{% include "pubchem_img.html" %}</a>
+    <h2 class="position-absolute" style="top:0.3em; left:0.3em;"><span class="badge badge-dark"><a href="/compounds/{{ compound.id }}">{{ compound.id }}</a></span></h2>
   </div>
   <div class="col-sm-9">
-    <span class="badge badge-dark"><a href="/compounds/{{ compound.id }}">{{ compound.id }}</a></span>{%if compound.common_name %}<span>Common name: {{ compound.common_name }}</span>{% endif %}
     <ul class="list-group">
+      {% if compound.common_name %}
+      <li class="list-group-item">Common name: {{ compound.common_name }}</li>
+      {% endif %}
       {% if compound.canonical_smile %}
       <li class="list-group-item">Canonical SMILES: {{ compound.canonical_smile }}</li>
       {% endif %}
diff --git a/ippisite/ippidb/templates/compound_v_item.html b/ippisite/ippidb/templates/compound_v_item.html
index d487ba8218202a3c08d87c9ee5298ba59b673b89..8e460db64f5346d9990cb93a78e843f23fd03883 100644
--- a/ippisite/ippidb/templates/compound_v_item.html
+++ b/ippisite/ippidb/templates/compound_v_item.html
@@ -1,10 +1,11 @@
 <div class="p-2">
-<div class="card border border-info">
+    <div class="card border border-info">
         <a href="/compounds/{{ compound.id }}">{% include "pubchem_img.html" %}</a>
+        <h2 class="position-absolute" style="top:0.3em; left:0.3em;"><span class="badge badge-dark"><a href="/compounds/{{ compound.id }}">{{ compound.id }}</a></span></h2>
         <div class="card-body" style="overflow:hidden; word-wrap:break-word;">
-            <span class="badge badge-dark"><a href="/compounds/{{ compound.id }}">{{ compound.id }}</a></span>
+            {%if compound.common_name %}<p class="ml-2">{{ compound.common_name }}</p>{% endif %}
             <p>{{ compound.best_pXC50_activity_ppi_family }}</p>
             <p>Molecular Weight: {{ compound.molecular_weight }} g/mol</p>
         </div>
-</div>
+    </div>
 </div>