diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index bc407c2a97..4990290037 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -1,72 +1,79 @@
-<footer class="top-footer  text-lg-start">
-  <!-- Grid container -->
-  <div *ngIf="showTopFooter" class="container p-4">
-    <!--Grid row-->
-    <div class="row">
+<footer class="text-lg-start">
+  <div *ngIf="showTopFooter" class="top-footer">
+    <!-- Grid container -->
+    <div class=" container p-4">
+      <!--Grid row-->
+      <div class="row">
 
-      <!--Grid column-->
-      <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
-        <h5 class="text-uppercase">Footer Content</h5>
+        <!--Grid column-->
+        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
+          <h5 class="text-uppercase">Footer Content</h5>
 
-        <ul class="list-unstyled mb-0">
-          <li>
-            <a routerLink="./" class="">Lorem ipsum</a>
-          </li>
-          <li>
-            <a routerLink="./" class="">Ut facilisis</a>
-          </li>
-          <li>
-            <a routerLink="./" class="">Aenean sit</a>
-          </li>
-        </ul>
+          <ul class="list-unstyled mb-0">
+            <li>
+              <a routerLink="./" class="">Lorem ipsum</a>
+            </li>
+            <li>
+              <a routerLink="./" class="">Ut facilisis</a>
+            </li>
+            <li>
+              <a routerLink="./" class="">Aenean sit</a>
+            </li>
+          </ul>
+        </div>
+        <!--Grid column-->
+
+        <!--Grid column-->
+        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
+          <h5 class="text-uppercase">Footer Content</h5>
+
+          <ul class="list-unstyled mb-0">
+            <li>
+              <a routerLink="./" class="">Suspendisse potenti</a>
+            </li>
+          </ul>
+        </div>
+        <!--Grid column-->
+
+        <!--Grid column-->
+        <div class="col-lg-4 col-md-12 mb-4 mb-md-0">
+          <h5 class="text-uppercase">Footer Content</h5>
+
+          <p>
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
+            molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
+            voluptatem veniam, est atque cumque eum delectus sint!
+          </p>
+        </div>
+        <!--Grid column-->
       </div>
-      <!--Grid column-->
-
-      <!--Grid column-->
-      <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
-        <h5 class="text-uppercase">Footer Content</h5>
-
-        <ul class="list-unstyled mb-0">
-          <li>
-            <a routerLink="./" class="">Suspendisse potenti</a>
-          </li>
-        </ul>
-      </div>
-      <!--Grid column-->
-
-      <!--Grid column-->
-      <div class="col-lg-4 col-md-12 mb-4 mb-md-0">
-        <h5 class="text-uppercase">Footer Content</h5>
-
-        <p>
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
-          molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
-          voluptatem veniam, est atque cumque eum delectus sint!
-        </p>
-      </div>
-      <!--Grid column-->
+      <!--Grid row-->
     </div>
-    <!--Grid row-->
   </div>
   <!-- Grid container -->
 
   <!-- Copyright -->
-  <div class="footer p-1 d-flex justify-content-center align-items-center text-white">
+  <div class="bottom-footer p-1 d-flex justify-content-center align-items-center text-white">
     <div class="content-container">
       <p class="m-0">
-        <a class="text-white" href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
+        <a class="text-white"
+           href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
         {{ 'footer.copyright' | translate:{year: dateObj | date:'y'} }}
-        <a class="text-white" href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
+        <a class="text-white"
+           href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
       </p>
       <ul class="footer-info list-unstyled small d-flex justify-content-center mb-0">
         <li>
-          <a class="text-white" href="#" (click)="showCookieSettings()">{{ 'footer.link.cookies' | translate}}</a>
+          <a class="text-white" href="#"
+             (click)="showCookieSettings()">{{ 'footer.link.cookies' | translate}}</a>
         </li>
         <li>
-          <a class="text-white" routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
+          <a class="text-white"
+             routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
         </li>
         <li>
-          <a class="text-white" routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
+          <a class="text-white"
+             routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
         </li>
       </ul>
     </div>
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index 3f6ccb58e7..350295b870 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -1,11 +1,10 @@
 :host {
-
-  .top-footer {
-    background-color: var(--ds-top-footer-bg);
-    border-top: var(--ds-footer-border);
+  footer {
+    background-color: var(--ds-footer-bg);
     text-align: center;
-    padding: var(--ds-footer-padding);
     z-index: var(--ds-footer-z-index);
+    border-top: var(--ds-footer-border);
+    padding: var(--ds-footer-padding);
 
     p {
       margin: 0;
@@ -15,12 +14,18 @@
       height: var(--ds-footer-logo-height);
     }
 
-    .footer {
-      background-color: var(--ds-footer-bg);
 
+    .top-footer {
+      background-color: var(--ds-top-footer-bg);
+      padding: var(--ds-footer-padding);
+      margin: calc(var(--ds-footer-padding) * -1);
+    }
+
+    .bottom-footer {
       ul {
         li {
           display: inline-flex;
+
           a {
             padding: 0 calc(var(--bs-spacer) / 2);
             color: inherit
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index dc76d772d1..51195b50a1 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -61,12 +61,12 @@
   --ds-sidebar-items-width: #{$sidebar-items-width};
   --ds-total-sidebar-width: #{$total-sidebar-width};
 
-  --ds-top-footer-bg: #{$gray-200} !important;
-  --ds-footer-bg: #{theme-color('primary')} !important;
+  --ds-top-footer-bg: #{$gray-200};
+  --ds-footer-bg: #{theme-color('primary')};
   --ds-footer-border: 1px solid var(--bs-gray-400);
-  --ds-footer-padding: 0 !important;
-  --ds-footer-padding-bottom: 0 !important;
-  --ds-footer-logo-height: 50px !important;
+  --ds-footer-padding: 0;
+  --ds-footer-padding-bottom: 0;
+  --ds-footer-logo-height: 50px;
 
   $home-news-link-color: $cyan;
   --ds-home-news-link-color: #{$home-news-link-color};