diff --git a/website/modules/asset/ui/src/scss/_table-widget.scss b/website/modules/asset/ui/src/scss/_table-widget.scss
index a8171ae0..a5612782 100644
--- a/website/modules/asset/ui/src/scss/_table-widget.scss
+++ b/website/modules/asset/ui/src/scss/_table-widget.scss
@@ -35,10 +35,46 @@
   width: 100%;
   border: 1px solid $gray-200;
   padding: 24px;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  background-color:$white;
+  @include transition(all, 0.5s);
+  transform: scale3d(1, 1, 1);
 
   &:not(:last-child) {
     border-bottom: none;
   }
+
+  .background-circle {
+    display: none;
+    @include decorative-background-circle($gray-500, 25%, 130%, 100%, -100% -60% auto auto, -10);
+  }
+
+  &:hover,
+  &:focus-visible {
+    transform: scale3d(1.03, 1.03, 1);
+    z-index: 10;
+    border-color: black;
+
+    .sf-table-title,
+    .sf-table-cell-title {
+      color: $gray-100;
+    }
+
+    .sf-table-cell-description,
+    .sf-table-link a {
+      color: $gray-200;
+    }
+
+    .background-circle {
+      display: block;
+      width: 150em;
+      height: 70em;
+      transform: translate3d(-5%, -10%, 0);
+    }
+  }
+
   @include breakpoint-medium {
     padding: 40px;
     margin: 0 -1px 0 0;
@@ -48,6 +84,55 @@
       border: 1px solid $gray-200;
     }
 
+    .background-circle {
+      @include decorative-background-circle($gray-500, 25%, 130%, 100%, -100% -60% auto auto, -10);
+    }
+
+    &:hover {
+      transform: scale3d(1.03, 1.03, 1);
+      z-index: 10;
+      border-color: black;
+
+      .sf-table-title,
+      .sf-table-cell-title {
+        color: $gray-100;
+      }
+
+      .sf-table-cell-description,
+      .sf-table-link a {
+        color: $gray-200;
+      }
+
+      .background-circle {
+        width: 150em;
+        height: 70em;
+        transform: translate3d(-5%, -10%, 0);
+      }
+    }
+
+    &:focus-visible {
+      transform: scale3d(1.02, 1.02, 1);
+      z-index: 10;
+      border-color: black;
+
+      .sf-table-title,
+      .sf-table-cell-title {
+        color: $gray-100;
+      }
+
+      .sf-table-cell-description,
+      .sf-table-link a {
+        color: $gray-200;
+      }
+
+      .background-circle {
+        display: block;
+        width: 150em;
+        height: 70em;
+        transform: translate3d(-5%, -10%, 0);
+      }
+    }
+
     // prettier-ignore
     &:nth-child(3n+6) {
       border-top: none;
@@ -68,6 +153,7 @@
   font-weight: 700;
   font-size: 14px;
   color: $gray-500;
+  @include transition(color);
 
   @include breakpoint-medium {
     font-size: 22px;
@@ -79,6 +165,7 @@
   font-size: 18px;
   color: $gray-500;
   margin: 0;
+  @include transition(color);
 
   @include breakpoint-medium {
     font-size: 22px;
@@ -90,6 +177,7 @@
   font-weight: 500;
   font-size: 14px;
   color: $gray-300;
+  @include transition(color);
 
   p {
     margin: 24px 0 0;
@@ -110,6 +198,7 @@
     text-decoration: underline;
     font-weight: 300;
     font-size: 11px;
+    @include transition(color);
 
     &:hover {
       text-decoration: none;
diff --git a/website/modules/table-widget/views/widget.html b/website/modules/table-widget/views/widget.html
index 54f6289c..32268c1e 100644
--- a/website/modules/table-widget/views/widget.html
+++ b/website/modules/table-widget/views/widget.html
@@ -39,6 +39,7 @@ <h3 class="sf-table-title">{{ row.title }}</h3>
               </div>
             {% endif %}
           </div>
+          <div class="background-circle" aria-hidden="true"></div>
         </div>
       {% endfor %}
     </div>