diff --git a/src/assets/stylesheets/pages/_home.scss b/src/assets/stylesheets/pages/_home.scss
index 367b3c03..6d8f2a5c 100644
--- a/src/assets/stylesheets/pages/_home.scss
+++ b/src/assets/stylesheets/pages/_home.scss
@@ -771,12 +771,13 @@
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6; /* number of lines to show */
-   line-height: 20px;        /* fallback */
-   max-height: 100px;
+   padding-left: 1rem;
+   padding-right: 1rem;
+   color: #000;
+   font-size: 0.9em;
 }
 
 
-
 .read-more {
   button {
     background-color: #FFFFFF;
@@ -865,7 +866,56 @@
   height: auto;
 }
 
-.border-solid-left-1 {
+.testimonial-container {
+  display: grid;
+  grid-template-columns: 65% 35%;
+  grid-template-rows:65% 20% 15%;
+  grid-template-areas:
+    "row row"
+    "name designation"
+    ". designation";
+}
+
+.testimony {
+  grid-column: 1 / span 2;
+  grid-row: 1;
+  background: #EFEFEF;
+  border-radius: 12px 12px 12px 12px;
+  border-color: #D76964;
+  border: 0.5px;
+}
+
+.testimonial-grid-item {
+  display: grid;
+}
+
+.client-name {
+  grid-area: name;
+  grid-row: 2;
+  border-radius: 0 0 0 22px;
+  background: #D76964;
+  border-color: #D76964;
+  color: #fff;
+  align-content: center;
+  justify-content: center;
+}
+
+.project-name {
+  grid-area: designation;
+  grid-row: 2 / span 3;
+  border-color: #AF5B57;
+  border-radius: 0 0 15px 15px;
+  background: #AF5B57;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 0.8rem;
+}
+
+.quotes {
+  font-size: 3rem;
+}
+  .border-solid-left-1 {
   border-left: 1px solid #fff;
 }
 
diff --git a/src/components/home/homeStyledComponents.js b/src/components/home/homeStyledComponents.js
index 42ec6630..4f7f17a0 100644
--- a/src/components/home/homeStyledComponents.js
+++ b/src/components/home/homeStyledComponents.js
@@ -24,84 +24,6 @@ export const InnovationHeading1 = styled.h1`
   margin: 2rem 0 3.5rem;
 `
 
-export const TestimonialBox = styled.div`
-  border-color: #D76964;
-  border: 0.5px;
-  height: 206px;
-  width: 295px;
-  border-radius: 12px 12px 12px 12px;
-  background: #EFEFEF;
-  margin-left: 60px;
-  z-index: 10;
-  position: relative;
-`
-
-export const ClientNameBox = styled.div`
-  border-color: #D76964;
-  border: 0.5px;
-  height: 100px;
-  width: 228px;
-  border-radius: 22px 22px 22px 22px;
-  background: #D76964;
-  margin-left: 61px;
-  margin-top: -15%;
-  position: relative;
-  z-index: 9;  
-`
-
-export const ClientDesignationBox = styled.div`
-  border-color: #AF5B57;
-  border: 0.5px;
-  height: 100px;
-  width: 111px;
-  border-radius: 15px 15px 15px 15px;
-  background: #AF5B57;
-  margin-top: -11%;
-  position: relative;
-  z-index: 9;
-  left: 244px;
-  top: -23px;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  padding-bottom: 24px;
-
-  & span {
-    // width: 42px;
-    // height: 29px;
-    color: #fff;
-    font-size: 11px;
-    text-align: center;
-  }
-`
-
-export const TestimonialBoxText = styled.span`
-  width: 254px;
-  height: 118px;
-  font-size: 12px;
-  color: #0D0D0D;
-  margin-left: 19px;
-  margin-right: 20px;
-  position: absolute;
-  top: 50px;
-
-`
-
-export const Quotes = styled.div`
-  height: 70px;
-  width: 20px;
-  font-size: 56px
-  position: relative;
-  right: 6px;
-`
-
-export const ClientName = styled.span`
-  position: absolute;
-  bottom: 10px;
-  left: 20px;
-  color: #fff;
-`
-
 export const Circle = styled.div`
   height: 8px;
   width: 8px
diff --git a/src/components/home/testimonials.js b/src/components/home/testimonials.js
index af832190..b7aafdc6 100644
--- a/src/components/home/testimonials.js
+++ b/src/components/home/testimonials.js
@@ -1,16 +1,10 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import { Button } from "reactstrap";
 import { Link } from "react-router-dom";
 
 import JoshCarousel from './carousel.js';
 import {
   Heading1,
-  TestimonialBox,
-  TestimonialBoxText,
-  ClientDesignationBox,
-  ClientNameBox,
-  Quotes,
-  ClientName,
 } from "./homeStyledComponents.js"
 
 
@@ -18,7 +12,7 @@ const Testimonials = (props) => {
   const { testimonialData } = props;
 
   const items = testimonialData.map(testimonial => {
-    return <Testimonial {...testimonial} key={testimonial.clientName} />
+    return <TestimonialGridItem {...testimonial} key={testimonial.clientName} />
 
   })
 
@@ -85,28 +79,25 @@ const Testimonials = (props) => {
   )
 }
 
-const Testimonial = (props) => {
+const TestimonialGridItem = (props) => {
   const { description, clientName, designation, projectName } = props;
-  /** To adjust description in box, we are only 260 characters from the description */
-  // const descriptionText = description.length > 280 ? `${description.substr(0, 280)}...` : description
-
   return (
-    <Fragment>
-      <TestimonialBox >
-        <Quotes><i>&#65282;</i></Quotes>
-        <TestimonialBoxText >
-          <span className="ellipsis">{description}</span>
+    <div className="testimonial-container mx-3">
+      <div className="testimonial-grid-item testimony">
+        <div className="quotes"><i>&#65282;</i></div>
+          <div className="ellipsis">{description}</div>
           <Link to="/testimonials" className="read-more" >
             <Button className="btn btn-outline-danger">
               <span>Read More</span></Button>
           </Link>
-        </TestimonialBoxText>
-      </TestimonialBox>
-      <ClientNameBox>
-        <ClientName>{clientName}</ClientName>
-      </ClientNameBox>
-      <ClientDesignationBox ><span>{designation}<br />{projectName}</span></ClientDesignationBox>
-    </Fragment>
+      </div>
+      <div className="testimonial-grid-item client-name">
+        {clientName}
+      </div>
+      <div className="testimonial-grid-item project-name pl-2">
+        {designation}<br /> {projectName}
+      </div>
+    </div>
   )
 }