diff --git a/src/components/Inline-quotes/index.js b/src/components/Inline-quotes/index.js
index 723d02ee08eda..953486515f31b 100644
--- a/src/components/Inline-quotes/index.js
+++ b/src/components/Inline-quotes/index.js
@@ -3,126 +3,129 @@ import styled from "styled-components";
 import { useInView } from "react-intersection-observer";
 
 
-
 const QuotesWrapper = styled.div`
+  margin: 5% 0;
+  text-align: center;
+  width: 100%;
+  box-sizing: border-box;
+  overflow-x: hidden;
 
-margin: 5% 0%;
-text-align: center;
-.quote-box {
+  .quote-box {
     display: flex;
-    flex-direction: row;
-    flex: 1 1 0;
-    text-align: center;
     align-items: center;
+    justify-content: center;
     padding: 2rem;
     border: 2px solid transparent;
-    border-image: ${props => props.theme.DarkTheme ? "linear-gradient(to right bottom, #00b39f, #121212 80%)" : "linear-gradient(to right bottom, #00b39f, #fff 80%)"} ;
-    border-image-slice: 1 0 1 1;
-    transition: border 0.2s ease-in-out;
-    @media screen and (max-width: 500px) {
-        flex-direction: column;
+    border-image: ${props => props.theme.DarkTheme
+  ? "linear-gradient(to right bottom, #00b39f, #121212 80%)"
+  : "linear-gradient(to right bottom, #00b39f, #fff 80%)"};
+    border-image-slice: 1;
+    gap: 1.5rem;
+    width: 100%;
+    box-sizing: border-box;
+
+    @media (max-width: 768px) {
+      flex-direction: column;
+      padding: 1.2rem;
+      gap: 1.2rem;
     }
+  }
 
-    h4 {
-        text-align: ${props => props.$onlyQuoteIsPresent ? "center" : "right"};
-        flex: ${props => props.$onlyQuoteIsPresent ? "0 0 100%" : "0 0 65%"};
-        color: ${props => props.theme.primaryColor};
-        font-weight: 100;
-        font-style: italic;
-        @media screen and (max-width: 600px) {
-            font-size: 1rem;
-        }
-        @media screen and (max-width: 500px) {
-            text-align: center;
-            flex: 0 0 100%;
-        }
+  h4 {
+    flex: 1 1 60%;
+    color: ${props => props.theme.primaryColor};
+    font-weight: 100;
+    font-style: italic;
+    word-break: break-word;
+    hyphens: auto;
+    margin: 0;
+    min-width: 0;
+    font-size: 1.2rem;
+
+    @media (max-width: 768px) {
+      text-align: center;
+      font-size: 1rem;
     }
-}
-
-.border {
-    border-image: ${props => props.theme.DarkTheme ? "linear-gradient(to left top, #00b39f, #121212 80%)" : "linear-gradient(to left top, #00b39f, #fff 80%)"} ;
-    border-image-slice: 1 1 1 0;
-    transition: 0.6s ease-in-out;
-}
-img{
+  }
+
+  img {
     border-radius: 50%;
-    width: 6vw;
-    height: 6vw;
-    object-fit: contain;
-    @media screen and (max-width: 1300px) {
-        height: 5rem;
-        width: 5rem;
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    flex-shrink: 0;
+
+    @media (max-width: 768px) {
+      width: 56px;
+      height: 56px;
     }
-}
+  }
 
-.quote-source {
+  .quote-source {
     display: flex;
-    flex: 2 1 0;
-    padding: 0 1rem;
     flex-direction: column;
-    @media screen and (max-width: 500px) {
-        text-align: center;
-    }
-   
-    h5 {
-        font-weight: bold;
-
-        padding:0.1rem;
-        text-transform: uppercase;
-        @media screen and (max-width: 600px) {
-            margin-top: 1rem;
-            font-size: 1rem;
-        }
+    align-items: flex-start;
+    min-width: 120px;
+    max-width: 35%;
+    padding: 0 0.5rem;
+
+    @media (max-width: 768px) {
+      align-items: center;
+      max-width: 100%;
     }
-    p {
-        @media screen and (max-width: 600px) {
-            font-size: 0.75rem;
-            line-height: 1.25rem;
-        }
+  }
+
+  .quote-source h5,
+  .quote-source p {
+    margin: 0.3rem 0 0 0;
+    word-break: break-word;
+    hyphens: auto;
+    text-align: left;
+
+    @media (max-width: 768px) {
+      text-align: center;
+      font-size: 0.9rem;
     }
-}
-
-hr {
-    height: 5rem;
-    margin: 0% 3%;
-    @media screen and (max-width: 500px) {
-        margin: 5% 0%;
-        height: 0;
-        width: 40vw;
+  }
+
+  hr {
+    height: 48px;
+    width: 1px;
+    border: none;
+    background: ${props => props.theme.primaryColor};
+    margin: 0;
+
+    @media (max-width: 768px) {
+      display: none;
     }
-}
+  }
 `;
 
-const InlineQuotes = ({ person, title, quote,image }) => {
-
+const InlineQuotes = ({ person, title, quote, image }) => {
   const [quoteRef, inView] = useInView({ threshold: 1.0 });
   const [quoteInView, setquoteInView] = useState(false);
+
   useEffect(() => {
-    if (inView && !quoteInView)
-      setquoteInView(true);
-    else if (quoteInView && !inView)
-      setquoteInView(false);
-  }, [inView, quoteInView]);
+    setquoteInView(inView);
+  }, [inView]);
 
   return (
     <QuotesWrapper $onlyQuoteIsPresent={!(image || person || title)}>
       <div className={quoteInView ? "quote-box border" : "quote-box"} ref={quoteRef}>
         <h4>❝ {quote} ❞</h4>
         {(image || person || title) && <hr />}
-        {
-          image &&
+        {image && (
           <img
             src={image}
-            alt={`${person || "Quote author"}`}
-            width="96"
-            height="96"
-            style={{ objectFit: "cover" }}
+            alt={person || "Quote author"}
           />
-        }
-        <div className="quote-source">
-          <h5>{person}</h5>
-          <p>{title}</p>
-        </div>
+        )}
+        {(person || title) && (
+          <div className="quote-source">
+            {person && <h5>{person}</h5>}
+            {title && <p>{title}</p>}
+          </div>
+        )}
       </div>
     </QuotesWrapper>
   );