diff --git a/src/app/child-dev-project/notes/dashboard-widgets/important-notes/important-notes.component.html b/src/app/child-dev-project/notes/dashboard-widgets/important-notes/important-notes.component.html
index f4287db933..c754516564 100644
--- a/src/app/child-dev-project/notes/dashboard-widgets/important-notes/important-notes.component.html
+++ b/src/app/child-dev-project/notes/dashboard-widgets/important-notes/important-notes.component.html
@@ -19,7 +19,7 @@
           <th scope="col">Title</th>
         </tr>
         <ng-container matColumnDef="date">
-          <td *matCellDef="let note">
+          <td *matCellDef="let note" class="date-cell">
             {{ note.date | date }}
           </td>
         </ng-container>
diff --git a/src/app/child-dev-project/notes/dashboard-widgets/important-notes/important-notes.component.scss b/src/app/child-dev-project/notes/dashboard-widgets/important-notes/important-notes.component.scss
index 07bd586d95..d45ad4fb87 100644
--- a/src/app/child-dev-project/notes/dashboard-widgets/important-notes/important-notes.component.scss
+++ b/src/app/child-dev-project/notes/dashboard-widgets/important-notes/important-notes.component.scss
@@ -5,21 +5,27 @@
   text-align: right;
 }
 
-.row-view {
-  cursor: pointer;
+.date-cell {
   position: relative;
 
   &::before {
+    left: 0;
+    top: 0;
     content: '';
     display: block;
-    width: 8px;
+    width: $standard-margin-small;
     height: 100%;
     position: absolute;
     background-color: var(--important-notes-bg-color);
   }
+}
+
+.row-view {
+  cursor: pointer;
+  position: relative;
 
   & > td:first-child {
-    padding-left: $standard-margin-small + 4;
+    padding-left: 2 * $standard-margin-small;
   }
 
   & > td:last-child {