diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
index a6e9c6b614746e5d2b4ce1e6d7cc0d08078241fb..2f88a8d6ca2ce756184d5b027b07f963d7481f96 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
@@ -16,8 +16,8 @@
          <span class="parameters-url">
            <a [href]="resource.metadataLink.url" target="_blank">{{ resource.metadataLink.url }}</a>
          </span>
-         <button type="button" (click)="copyToClipboard(resource.metadataLink.url, true)"
-           class="button is-medium tooltip" [attr.data-tooltip]="messageClipboardRoot">
+         <button type="button" (click)="copyToClipboard(resource.metadataLink.url, true)" class="button is-medium"
+           [attr.data-tooltip]="messageClipboardRoot">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
              <path fill="#818080" fill-rule="evenodd"
                d="M1.852 7.777a2.619 2.619 0 0 1 0-3.703l2.222-2.222a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.703l-.37.37.74.741.37-.37a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.704l-2.222 2.222a2.619 2.619 0 0 1-3.704 0L9.26 15.185a2.619 2.619 0 0 1 0-3.704l.37-.37-.74-.741-.37.37a2.619 2.619 0 0 1-3.704 0L1.852 7.777zm7.037-.37l-.74-.74a1.048 1.048 0 0 0-1.482 1.48l.74.742-.37.37a.524.524 0 0 1-.74 0L3.332 6.296a.524.524 0 0 1 0-.74l2.223-2.223a.524.524 0 0 1 .74 0L9.26 6.296a.524.524 0 0 1 0 .74l-.37.371zm2.222 5.185l-.37.37a.524.524 0 0 0 0 .742l2.963 2.962a.524.524 0 0 0 .74 0l2.223-2.222a.524.524 0 0 0 0-.74l-2.963-2.963a.524.524 0 0 0-.741 0l-.37.37.74.74a1.047 1.047 0 1 1-1.481 1.482l-.74-.74z"
@@ -184,33 +184,22 @@
            </a>
          </span>
          <button type="button" (click)="copyToClipboard(queryableUrl)"
-           class="column button is-narrow-tablet is-5-mobile is-medium tooltip"
-           [attr.data-tooltip]="messageClipboard">
+           class="column button is-narrow-tablet is-5-mobile is-medium" [attr.data-tooltip]="messageClipboard">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
              <path fill="#818080" fill-rule="evenodd"
                d="M1.852 7.777a2.619 2.619 0 0 1 0-3.703l2.222-2.222a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.703l-.37.37.74.741.37-.37a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.704l-2.222 2.222a2.619 2.619 0 0 1-3.704 0L9.26 15.185a2.619 2.619 0 0 1 0-3.704l.37-.37-.74-.741-.37.37a2.619 2.619 0 0 1-3.704 0L1.852 7.777zm7.037-.37l-.74-.74a1.048 1.048 0 0 0-1.482 1.48l.74.742-.37.37a.524.524 0 0 1-.74 0L3.332 6.296a.524.524 0 0 1 0-.74l2.223-2.223a.524.524 0 0 1 .74 0L9.26 6.296a.524.524 0 0 1 0 .74l-.37.371zm2.222 5.185l-.37.37a.524.524 0 0 0 0 .742l2.963 2.962a.524.524 0 0 0 .74 0l2.223-2.222a.524.524 0 0 0 0-.74l-2.963-2.963a.524.524 0 0 0-.741 0l-.37.37.74.74a1.047 1.047 0 1 1-1.481 1.482l-.74-.74z"
                clip-rule="evenodd" />
            </svg>
          </button>
-         <div class="column resource-download-icon is-narrow-tablet is-5-mobile" (click)="saveFile(queryableUrl)">
+         <div class="column resource-download-icon is-narrow-tablet is-5-mobile" (click)="saveFile(queryableUrl)"
+           [attr.data-tooltip]="downloadMessage">
+
            <a>
-             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 23">
-               <g id="btn-download">
-                 <path
-                   d="M22 14c-.6 0-1 .4-1 1v5H3v-5c0-.6-.4-1-1-1s-1 .4-1 1v6c0 .6.4 1 1 1h20c.6 0 1-.4 1-1v-6c0-.6-.4-1-1-1z"
-                   class="download_x002D_color" />
-                 <path
-                   d="M11.3 16.7c.2.2.5.3.7.3s.5-.1.7-.3l6-6c.4-.4.4-1 0-1.4s-1-.4-1.4 0L13 13.6V2c0-.6-.4-1-1-1s-1 .4-1 1v11.6L6.7 9.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l6 6z"
-                   class="download_x002D_color" />
-                 <g>
-                   <path
-                     d="M22 14c-.6 0-1 .4-1 1v5H3v-5c0-.6-.4-1-1-1s-1 .4-1 1v6c0 .6.4 1 1 1h20c.6 0 1-.4 1-1v-6c0-.6-.4-1-1-1z"
-                     class="download_x002D_color" />
-                   <path
-                     d="M11.3 16.7c.2.2.5.3.7.3s.5-.1.7-.3l6-6c.4-.4.4-1 0-1.4s-1-.4-1.4 0L13 13.6V2c0-.6-.4-1-1-1s-1 .4-1 1v11.6L6.7 9.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l6 6z"
-                     class="download_x002D_color" />
-                 </g>
-               </g>
+             <svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" fill="none" viewBox="0 0 22 21">
+               <path fill="#4668AB"
+                 d="M21.323 13.961h-.338c-.339 0-.677.339-.677.677v4.57H1.692v-4.57a.667.667 0 0 0-.677-.677H.677c-.339 0-.677.339-.677.677V20.223c0 .423.338.677.677.677h20.646c.338 0 .677-.339.677-.677v-5.585a.667.667 0 0 0-.677-.677z" />
+               <path fill="#4668AB"
+                 d="M10.323 15.315c.085.085.254.17.339.17.084.084.254.084.338.084.085 0 .254 0 .339-.084.17 0 .254-.085.338-.17L17.6 9.223c.17-.254.17-.592 0-.761l-.423-.424c-.169-.253-.592-.253-.761 0l-4.57 4.654V.846C11.847.338 11.509 0 11 0c-.507 0-.846.338-.846.846v11.846L5.585 8.038c-.17-.253-.508-.253-.762 0l-.423.424c-.169.253-.169.592 0 .761l5.923 6.092z" />
              </svg>
            </a>
          </div>
diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss
index 015cbee4325ea4115ce4d8e3f799692205e0da35..4acbc9d414e0b61c4ffaf9ecfa167c77fa93ee04 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss
@@ -23,78 +23,6 @@
   }
 }
 
-.root-url {
-  border-bottom: 2px solid $grey-background-color;
-  padding-bottom: 1.5rem;
-}
-
-.root-url-label {
-  text-transform: uppercase;
-}
-
-@media screen and (min-width: $tablet) {
-  .dropdown-trigger button {
-    width: 12rem;
-  }
-}
-
-.no-custom-url {
-  span {
-    color: $warning-color;
-  }
-}
-
-.title-label {
-  margin-bottom: 0.4rem;
-
-  span,
-  label {
-    color: $grey-dark-color;
-    font-size: 0.875rem;
-    line-height: 1.4;
-  }
-}
-
-.fromFeature-item {
-
-  .input {
-    width: unset;
-  }
-}
-
-.parameters-url {
-  word-break: break-all;
-}
-
-.create-request-icon {
-  svg {
-    margin-right: 1.2rem;
-    width: 16px;
-    fill: grey;
-    transform: rotate(-90deg);
-  }
-}
-
-.resource-download-icon {
-  padding: 0.5rem 0.4rem;
-  border: 1px solid $grey-super-light-color;
-  border-radius: 4px;
-
-  a {
-    display: flex;
-    justify-content: center;
-  }
-
-  svg {
-    height: 1.5rem;
-    fill: $link-color;
-  }
-
-  &:hover {
-    opacity: 0.7;
-  }
-}
-
 .link-with-copy {
   display: flex;
 
@@ -149,10 +77,15 @@
   .button {
     font-size: 0.875rem;
     margin-left: 0.5rem;
-    height: 2.75rem;
+    height: 2.5rem;
+    width: 2.5rem;
+    position: relative;
 
     svg {
+      position: absolute;
       width: 1.25rem;
+      left: calc(50% - (1.25rem / 2));
+      top: calc(50% - (1.25rem / 2));
     }
 
     svg path {
@@ -167,6 +100,85 @@
   }
 }
 
+.root-url {
+  border-bottom: 2px solid $grey-background-color;
+  padding-bottom: 1.5rem;
+
+  a {
+    pointer-events: none;
+    cursor: default;
+    text-decoration: none;
+    color: $grey-dark-color;
+  }
+}
+
+.root-url-label {
+  text-transform: uppercase;
+}
+
+@media screen and (min-width: $tablet) {
+  .dropdown-trigger button {
+    width: 12rem;
+  }
+}
+
+.no-custom-url {
+  span {
+    color: $warning-color;
+  }
+}
+
+.title-label {
+  margin-bottom: 0.4rem;
+
+  span,
+  label {
+    color: $grey-dark-color;
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+
+.fromFeature-item {
+
+  .input {
+    width: unset;
+  }
+}
+
+.parameters-url {
+  word-break: break-all;
+}
+
+.create-request-icon {
+  svg {
+    margin-right: 1.2rem;
+    width: 16px;
+    fill: grey;
+    transform: rotate(-90deg);
+  }
+}
+
+.resource-download-icon {
+  padding: 0.5rem 0.4rem;
+  border: 1px solid $grey-super-light-color;
+  border-radius: 4px;
+
+  a {
+    display: flex;
+    justify-content: center;
+  }
+
+  svg {
+    height: 1.5rem;
+    fill: $link-color;
+  }
+
+  &:hover a {
+    opacity: 0.7;
+  }
+}
+
 .create-request {
   cursor: pointer;
   display: flex;
@@ -215,6 +227,8 @@
     .tooltip {
       margin-left: 0;
       margin-top: 0.5rem;
+      width: 2.5rem;
+      height: 2.5rem;
 
       @media screen and (min-width: $tablet) {
         margin-left: 0.5rem;
diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.ts b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.ts
index 48ebcb808b4cc8791d15cdf040479a77e0948818..883f6a66e665f5ce46e60525b0046275cbce9794 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.ts
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.ts
@@ -20,6 +20,8 @@ export class ResourceQueryableComponent implements OnInit {
   @Input() metadata: Metadata;
   @Input() projections: Projection[];
 
+  downloadMessage = geosource.downloads.download;
+
   messageClipboard: string;
   messageClipboardRoot: string;
 
diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.scss b/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.scss
index 30aeb70d2cc326f2c0b6f17fd1b95b5b38abd9ef..9b084f6762a91a887ef30ef910d3e1fb03cab8eb 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.scss
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.scss
@@ -102,7 +102,7 @@
   }
 }
 
-.resource-title .resource-name span:first {
+.resource-title .resource-name span:first-of-type {
 
   @media screen and (min-width: $tablet) {
     text-transform: uppercase;
diff --git a/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.html b/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.html
index ae4ce526f8e883c03b6d8bd743f5b28013452f55..05a0bf8074b99296391e96b47029ae8cc3254552 100644
--- a/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.html
+++ b/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.html
@@ -65,7 +65,7 @@
           </div>
         </a>
       </li>
-      <li [routerLinkActive]="'is-active'">
+      <li [routerLinkActive]="'is-active'" *ngIf="datasetServicesList.length > 0">
         <a (click)="setPosition()" [routerLink]="[AppRoutes.resources.uri]" class="tab-link">
          <svg class="tab-icon" xmlns="http://www.w3.org/2000/svg" data-name="Calque 1" viewBox="0 0 38 32">
            <path class="secondary"
diff --git a/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.scss b/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.scss
index 6dc03dd60e2da389e5e98262f2763e9d5a540793..0eeed694871a207a084efc58d8ef13516f31f4ff 100644
--- a/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.scss
+++ b/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.scss
@@ -3,6 +3,12 @@
 
 .downloads-container {
   position: relative;
+
+  @media screen and (min-width: $tablet) {
+    max-width: unset;
+    background-color: $grey-background-color;
+  }
+
 }
 
 .blury {
@@ -15,22 +21,32 @@
   display: flex;
   flex-direction: column;
   padding: 2rem 1.25rem 1.25rem 1.25rem;
+  max-width: 100vw;
+
+  @media screen and (min-width: $tablet) {
+    max-width: unset;
+  }
 }
 
 .resources-downloadable {
   width: 100%;
-  margin-right: 2rem;
+  margin-right: 1rem;
   border-bottom: 2px solid $grey-background-color;
+  background-color: white;
 }
 
 @media screen and (min-width: $tablet) {
+
   .downloads {
     display: flex;
     flex-direction: row;
   }
 
   .resources-downloadable {
-    width: 60%;
+    width: 66%;
+    padding: 2.5rem;
+    box-shadow: 0 6px 12px 0 rgba(129, 128, 128, 0.1);
+    border-radius: 8px;
   }
 }
 
@@ -50,10 +66,7 @@
 }
 
 .resource-static {
-
-  &:not(:last-of-type) {
-    border-bottom: 1px solid $grey-background-color;
-  }
+  margin-bottom: 1rem;
 }
 
 .resource-static-files {
@@ -67,9 +80,22 @@
 
 .resources-other {
   margin-top: 1rem;
+  border-bottom: 2px solid $grey-background-color;
+  background-color: white;
+
+
+  a {
+    word-break: break-all;
+  }
 
   @media screen and (min-width: $tablet) {
+    width: 33%;
     margin-top: 0;
+    box-shadow: 0 6px 12px 0 rgba(129, 128, 128, 0.1);
+    border-radius: 8px;
+    align-self: flex-start;
+    padding: 2.5rem;
+    margin-left: 1rem;
   }
 }
 
@@ -101,8 +127,18 @@
   }
 }
 
-::ng-deep .downloads-container .modal-card {
-  @media screen and (min-width: $tablet) {
-    margin-top: 1rem !important;
+::ng-deep .downloads-container {
+  .modal {
+    overflow-y: auto;
+  }
+
+  .modal-card {
+    @media screen and (min-width: $tablet) {
+      margin-top: 1rem !important;
+    }
+  }
+
+  .modal-background {
+    height: 100vh;
   }
 }
diff --git a/src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.ts b/src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.ts
index 088b3729662ac96176166705f7b4a69fa5e28998..8dc0e1fcd2a2ebe5bb19a50681ae44f3a6324820 100644
--- a/src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.ts
+++ b/src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.ts
@@ -57,11 +57,6 @@ export class ResourceCustomDownloadableComponent implements OnInit, OnDestroy {
   saveFile(format: Format, index: number) {
     this.whichStepLoading[index] = 'loading';
 
-    this.timeOut = window.setTimeout(() => {
-      this.whichStepLoading[index] = 'cancel';
-      // tslint:disable-next-line: align
-    }, 2000);
-
     fetch(this.getQueryableUrl(format), { signal: this.signal }).then((response) => {
       // To allow the download, get the repsons as a blob
       return response.blob();
diff --git a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
index a537e6ce24665c2c257b8495751a636e5f63d091..f47193a19492c3783ba8ffcd0ee96cd704ef8820 100644
--- a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
+++ b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
@@ -10,7 +10,9 @@
      </div>
    </div>
 
-   <div class="resource-download-icon" (click)="saveResource()" *ngIf="!whichStepLoading">
+   <ng-container *ngIf="isQueryable; else other">
+
+   <div class="resource-icon-download" (click)="saveResource()" *ngIf="!whichStepLoading">
      <a [attr.data-tooltip]="downloadMessage">
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" fill="none" viewBox="0 0 22 21">
          <path fill="#4668AB"
@@ -20,20 +22,23 @@
        </svg>
      </a>
    </div>
-   <div class="resource-download-icon" *ngIf="whichStepLoading">
+   <div class="resource-icon-cancel" *ngIf="whichStepLoading"
+     [attr.data-tooltip]="whichStepLoading ? abortMessage : null">
 
-     <div class="is-loading"
-       [attr.data-tooltip]="whichStepLoading === 'cancel' ? abortMessage : null">
-       <i class="fas fa-spinner fa-spin fa-2x" *ngIf="whichStepLoading === 'loading'"></i>
+     <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path fill-rule="evenodd" clip-rule="evenodd"
+         d="M17 0C18.1009 0 19.0325 0.929231 19.0325 2.02741C19.0325 3.16783 18.1009 4.05483 17 4.05483C15.8567 4.05483 14.9675 3.16783 14.9675 2.02741C14.9675 0.929231 15.8567 0 17 0ZM6.37132 4.36171C7.47224 4.36171 8.40378 5.29094 8.40378 6.38912C8.40378 7.52954 7.47224 8.41653 6.37132 8.41653C5.22807 8.41653 4.33887 7.52954 4.33887 6.38912C4.33887 5.29094 5.22807 4.36171 6.37132 4.36171ZM4.06492 17.0002C4.06492 15.902 3.13337 14.9728 2.03246 14.9728C0.8892 14.9728 0 15.902 0 17.0002C0 18.1406 0.8892 19.0276 2.03246 19.0276C3.13337 19.0276 4.06492 18.1406 4.06492 17.0002ZM6.37132 25.5838C7.47224 25.5838 8.40378 26.513 8.40378 27.6112C8.40378 28.7516 7.47224 29.6386 6.37132 29.6386C5.22807 29.6386 4.33887 28.7516 4.33887 27.6112C4.33887 26.513 5.22807 25.5838 6.37132 25.5838ZM19.0327 31.9727C19.0327 30.8745 18.1011 29.9453 17.0002 29.9453C15.857 29.9453 14.9678 30.8745 14.9678 31.9727C14.9678 33.1131 15.857 34.0001 17.0002 34.0001C18.1011 34.0001 19.0327 33.1131 19.0327 31.9727ZM27.6301 25.5838C28.731 25.5838 29.6626 26.513 29.6626 27.6112C29.6626 28.7516 28.731 29.6386 27.6301 29.6386C26.4869 29.6386 25.5977 28.7516 25.5977 27.6112C25.5977 26.513 26.4869 25.5838 27.6301 25.5838ZM34.0005 17.0002C34.0005 15.902 33.0689 14.9728 31.968 14.9728C30.8247 14.9728 29.9355 15.902 29.9355 17.0002C29.9355 18.1406 30.8247 19.0276 31.968 19.0276C33.0689 19.0276 34.0005 18.1406 34.0005 17.0002Z"
+         fill="#242B3F" />
+       <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="1.2s"
+         repeatCount="indefinite" />
+     </svg>
 
-       <img *ngIf="whichStepLoading === 'cancel'" src="../../../../../../assets/img/close.svg"
-         [alt]="abortMessage" (click)=abortDownload()>
-     </div>
+     <img src="../../../../../../assets/img/close.svg" [alt]="abortMessage" (click)=abortDownload()>
    </div>
-
+   </ng-container>
 
    <ng-template #other>
-     <div class="resource-download-icon">
+     <div class="resource-icon-download">
        <a [href]="resourceUrl" target="_blank">
          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" fill="none" viewBox="0 0 22 21">
            <path fill="#4668AB"
diff --git a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
index 4af6afec4d7ff7ef5996be56c2f13dccc748cbc5..485b2645783d8d0de2d8f8aee03c0eff9be00870 100644
--- a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
+++ b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
@@ -30,11 +30,13 @@
   }
 }
 
-.resource-download-icon {
+.resource-icon-download {
   padding: 0.4rem 0.4rem;
   border: 1px solid $grey-super-light-color;
   border-radius: 4px;
   margin-right: 0.75rem;
+  width: 2.5rem;
+  height: 2.5rem;
 
   a {
     display: flex;
@@ -46,24 +48,44 @@
     fill: $link-color;
   }
 
-  &:hover {
+  &:hover svg {
     opacity: 0.7;
   }
 }
 
-.is-loading {
 
-  display: flex;
+.resource-icon-cancel {
+  padding: 0.4rem 0.4rem;
+  border: 1px solid $grey-super-light-color;
+  border-radius: 4px;
+  margin-right: 0.75rem;
+  position: relative;
+  width: 2.5rem;
+  height: 2.5rem;
 
-  i {
-    display: block;
-    height: 1.5rem;
-    font-size: 1.5rem;
+  a {
+    display: flex;
+  }
+
+  svg {
+    position: absolute;
+    height: 2rem;
+    width: 2rem;
+    left: calc(50% - 1rem);
+    top: calc(50% - 1rem);
+    fill: $link-color;
+    opacity: 0.6;
   }
 
   img {
-    height: 1.5rem;
-    width: 1.5rem;
-    cursor: pointer;
+    position: absolute;
+    height: 0.875rem;
+    width: 0.875rem;
+    left: calc(50% - 0.4375rem);
+    top: calc(50% - 0.4375rem);
   }
-}
+
+  &:hover img {
+    opacity: 0.6;
+  }
+}
\ No newline at end of file