diff --git a/homepage/public/css/style.css b/homepage/public/css/style.css
index d40b4842..eb285024 100644
--- a/homepage/public/css/style.css
+++ b/homepage/public/css/style.css
@@ -916,7 +916,7 @@ code {
   margin-left: 1rem;
 }
 .logo-margin {
-  margin: 0 15px;
+  margin: 0 1rem;
 }
 .avatar {
   margin: 0.5rem auto;
@@ -988,9 +988,6 @@ code {
   .logos {
     flex-wrap: wrap;
   }
-  .logo-margin {
-    margin: 10px auto;
-  }
 }
 @media only screen and (max-width: 568px) {
   .photos-page-list .item {
@@ -1024,6 +1021,9 @@ code {
   .blogs-list .item .inner .details .title {
     font-size: 20px;
   }
+  .logo-margin {
+    margin: 0.25rem auto;
+  }
 }
 @media only screen and (max-width: 480px) {
   /* .image-and-text-main .left img{height:400px} */
diff --git a/homepage/src/components/logo.jsx b/homepage/src/components/logo.jsx
index 32afbebd..6ebcf649 100644
--- a/homepage/src/components/logo.jsx
+++ b/homepage/src/components/logo.jsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 
 const Logo = ({ text, src, dimension }) => (
-  <div className="flex flex-row flex-align-center logo-margin">
+  <div className="d-flex align-items-center logo-margin">
     <span className="logo-title">{text}</span>
     <Image
       className="logo-image"
diff --git a/homepage/src/layouts/footer/footer.jsx b/homepage/src/layouts/footer/footer.jsx
index 6ae8b791..0a013d72 100644
--- a/homepage/src/layouts/footer/footer.jsx
+++ b/homepage/src/layouts/footer/footer.jsx
@@ -27,7 +27,7 @@ const Footer = ({ siteData, footer }) => {
         <FooterLinks links={links} />
         <span>{siteData.title}</span>
         <SocialMedia />
-        <div className="d-flex flex-row flex-justify-center logos margin-2-percent">
+        <div className="d-flex justify-content-center logos margin-2-percent">
           {logos.map((logo) => (
             <Logo
               key={logo.text}
diff --git a/homepage/src/layouts/footer/footerLinks.jsx b/homepage/src/layouts/footer/footerLinks.jsx
index b572ea85..02b4db4c 100644
--- a/homepage/src/layouts/footer/footerLinks.jsx
+++ b/homepage/src/layouts/footer/footerLinks.jsx
@@ -1,7 +1,7 @@
 import Link from 'next/link';
 
 const FooterLinks = ({ links }) => (
-  <div className="flex flex-row gap">
+  <div className="d-flex gap">
     {links.map((link) => (
       <Link
         href={link.url}