diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
index 2ad12ddc2..09ff1ac73 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -1,7 +1,7 @@
 <div class="card mb-3 bg-light">
   <div class="row no-gutters">
     <div class="col-md-2 d-none d-lg-block">
-      <img [src]="getThumbUrl()" class="card-img doc-img">
+      <img [src]="getThumbUrl()" class="card-img doc-img border-right">
     </div>
     <div class="col">
       <div class="card-body">
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
index d5a82e7ce..4283a40ee 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -1,11 +1,13 @@
-<div class="col-auto mb-3">
-  <div class="card h-100 bg-light" style="width: 14rem">
-    <div style="height: 10rem; overflow: hidden;">
-      <img [src]="getThumbUrl()" class="card-img doc-img"/>
+<div class="col p-2 h-100" style="width: 16rem;">
+  <div class="card h-100">
+    <img [src]="getThumbUrl()" class="card-img-top doc-img border-bottom" style="height: 200px;"/>
+    <div class="card-body p-2">
+      <p class="card-title" *ngIf="document.correspondent">{{document.correspondent.name}}</p>
+      <p class="card-text">{{document.title}} <app-tag [tag]="t" *ngFor="let t of document.tags" class="ml-1"></app-tag></p>
     </div>
-    <div class="card-body">
-      <p class="card-title">{{document.correspondent ? document.correspondent.name + ': ' : ''}}{{document.title}} <app-tag [tag]="t" *ngFor="let t of document.tags" class="ml-1"></app-tag></p>
-      <div class="d-flex justify-content-between align-items-center">
+    <div class="card-footer">
+
+      <div class="d-flex justify-content-between align-items-center ml-n2">
         <div class="btn-group">
           <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary">
             <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
@@ -21,6 +23,7 @@
         </div>
         <small class="text-muted">{{document.created | date}}</small>
       </div>
+      
     </div>
-  </div>
+  </div>  
 </div>
\ No newline at end of file
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index 17d0b7ff3..ec12ccbf4 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -101,8 +101,9 @@
   </tbody>
 </table>
 
-<div class="row justify-content-left" *ngIf="displayMode == 'smallCards'">
-  <app-document-card-small [document]="d" *ngFor="let d of docs.documents"></app-document-card-small>
+
+<div class=" m-n2 row" *ngIf="displayMode == 'smallCards'">
+  <app-document-card-small [document]="d" *ngFor="let d of docs.documents"></app-document-card-small>    
 </div>
 
 <p *ngIf="docs.documents.length == 0" class="mx-auto">No results</p>
\ No newline at end of file