diff --git a/src/components/Card/Card.style.js b/src/components/Card/Card.style.js
index 297eed5fb6146..8fb3198e18a66 100644
--- a/src/components/Card/Card.style.js
+++ b/src/components/Card/Card.style.js
@@ -11,8 +11,8 @@ export const CardWrapper = styled.div`
     box-shadow: 0px 2px 6px 0px ${(props) => props.theme.green00D3A9ToBlackTwo};
     transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     display: flex;
-    flex-direction: column;
-    min-height: 23rem;
+    flex-direction: ${(props) => (props.$listView ? "row" : "column")};
+    min-height: ${(props) => (props.$listView ? "auto" : "23rem")};
 
     &:hover {
       box-shadow: 0px 2px 15px 4px ${(props) => props.theme.whiteNineToBlackOne};
@@ -57,9 +57,12 @@ export const CardWrapper = styled.div`
 
   .post-thumb-block {
     overflow: hidden;
-    height: 11.5rem;
-    border-top-right-radius: 0.5rem;
+    height: ${(props) => (props.$listView ? "8rem" : "11.5rem")};
+    width: ${(props) => (props.$listView ? "25%" : "auto")};
+    border-top-right-radius: ${(props) => (props.$listView ? "0" : "0.5rem")};
     border-top-left-radius: 0.5rem;
+    border-bottom-left-radius: ${(props) => (props.$listView ? "0.5rem" : "0")};
+    flex-shrink: 0;
 
     .gatsby-image-wrapper,
     .old-gatsby-image-wrapper {
@@ -79,51 +82,75 @@ export const CardWrapper = styled.div`
       width: auto;
       height: auto;
       display: block;
-      object-fit: contain;
+      object-fit: ${(props) => (props.$listView ? "cover" : "contain")};
       object-position: center;
       margin: 0 auto;
     }
 
     @media screen and (max-width: 768px) {
-      height: 9.5rem;
+      height: ${(props) => (props.$listView ? "8rem" : "9.5rem")};
     }
   }
 
   .post-content-block {
-    padding: 1rem 2rem 1.5rem 2rem;
+    padding: ${(props) => (props.$listView ? "0.5rem 1.5rem" : "1rem 2rem 1.5rem 2rem")};
     height: auto;
-    min-height: 10rem;
+    min-height: ${(props) => (props.$listView ? "auto" : "10rem")};
     flex: 1;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: ${(props) => (props.$listView ? "center" : "space-between")};
   }
 
-  @media screen and (max-width: 1200px) and (min-width: 992px) {
-    .post-thumb-block {
-      height: auto;
-      min-height: 10rem;
+  ${(props) => !props.$listView && `
+    @media screen and (max-width: 1200px) and (min-width: 992px) {
+      .post-thumb-block {
+        height: auto;
+        min-height: 10rem;
+      }
+      .post-content-block {
+        height: auto;
+        min-height: 10rem;
+      }
     }
 
-    .post-content-block {
-      height: auto;
-      min-height: 10rem;
+    @media screen and (max-width: 670px) and (min-width: 560px) {
+      .post-content-block {
+        height: auto;
+        min-height: 10rem;
+      }
     }
-  }
 
-  @media screen and (max-width: 670px) and (min-width: 560px) {
-    .post-content-block {
-      height: auto;
-      min-height: 10rem;
+    @media screen and (max-width: 350px) {
+      .post-content-block {
+        height: auto;
+        min-height: 10rem;
+      }
     }
-  }
+  `}
 
-  @media screen and (max-width: 350px) {
-    .post-content-block {
-      height: auto;
-      min-height: 10rem;
+  ${(props) => props.$listView && `
+    @media screen and (max-width: 576px) {
+      .post-block {
+        flex-direction: column;
+      }
+      .post-thumb-block {
+        width: 100%;
+        height: 12rem;
+        border-top-right-radius: 0.5rem;
+        border-bottom-left-radius: 0;
+      }
+      .post-thumb-block img {
+        object-fit: cover;
+        padding: 0;
+        margin: 0;
+      }
+      .post-content-block {
+        width: 100%;
+        padding: 0.75rem 0.5rem;
+      }
     }
-  }
+  `}
 
   .post-title {
     font-size: 1.4rem;
@@ -142,13 +169,14 @@ export const CardWrapper = styled.div`
   .post-meta-block {
     height: auto;
     display: flex;
+    flex-direction: ${(props) => (props.$listView ? "row-reverse" : "row")};
     margin-bottom: 0.5rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 
     .author {
-      text-align: end;
+      text-align: ${(props) => (props.$listView ? "start" : "end")};
       overflow: hidden;
       text-overflow: ellipsis;
     }
diff --git a/src/components/Card/index.js b/src/components/Card/index.js
index 3c44f69c2433c..22d44c26b39a7 100644
--- a/src/components/Card/index.js
+++ b/src/components/Card/index.js
@@ -11,10 +11,11 @@ const Card = ({
   fields,
   loading = "lazy",
   fetchpriority = "auto",
+  listView = false,
 }) => {
   const { isDark } = useStyledDarkMode();
   return (
-    <CardWrapper fixed={!!frontmatter.abstract}>
+    <CardWrapper fixed={!!frontmatter.abstract} $listView={listView}>
       <div className="post-block">
         <div className="post-thumb-block">
           <Image
diff --git a/src/sections/Blog/Blog-list/blogList.style.js b/src/sections/Blog/Blog-list/blogList.style.js
index d0a7603ed4df4..213060b42472f 100644
--- a/src/sections/Blog/Blog-list/blogList.style.js
+++ b/src/sections/Blog/Blog-list/blogList.style.js
@@ -11,103 +11,14 @@ export const BlogPageWrapper = styled.div`
 	.tooltip-search{
 		margin-bottom: 0.8rem;
 	}
-	.post-block{
-		background-color: ${props => props.theme.grey212121ToWhite};
-		width: 100%;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-	}
-	.post-thumb-block{
-		height: 8rem;
-		width: 25%;
-		img{
-			padding: 0px;
-			margin-left: 0.5rem;
-			width: 100%;
-			height: 100%;
-		}
-	}
-
-	.post-content-block{
-		height: 8.5rem;
-		width: 75%;
-	}
-
-	.post-title{
-		font-size: 1.5rem;
-	}
-
-	.post-meta-block{
-		flex-direction: row-reverse;
-		p{
-			font-size: 1rem;
-			text-align: end;
-		}
-		.author{
-			font-size: 1rem;
-			text-align: start;
-			margin-bottom:0;
-		}
-	}
-
-	@media screen and (max-width:1200px){
-		.post-block{
-			height: auto;
-		}
-		.post-thumb-block{
-			height: 8rem;
-		}
-
-	}
-
-	@media screen and (max-width:992px){
-		.post-block{
-			flex-direction: row;
-		}
-		.post-thumb-block{
-			height: 8rem;
-			width: 25%;
-			margin-right: 1rem;
-	
-			img{
-				object-fit: cover;
-				margin: 0;
-				flex: 1;
-			}
-		}
-		.post-content-block{
-			width: 70%;
-			padding: 0.5rem;
-		}
-	}
 
 	@media screen and (max-width:576px){
-		.post-block{
-			flex-direction: column;
-		}
 		.blog-list-wrapper{
 			margin: 1.5rem auto 5rem;
 		}
 		.blog-lists{
 			margin-top: 0;
 		}
-		.post-thumb-block{
-			width: 100%;
-			height: 12rem;
-			margin-right: 0;
-			
-			img{
-				object-fit: cover;
-				padding: 0;
-				margin: 0;
-			}
-		}
-		.post-content-block{
-			width: 100%;
-			padding: 0.75rem 0.5rem;
-		}
 		.tooltip-search{
 			display: block;
 		}
diff --git a/src/sections/Blog/Blog-list/index.js b/src/sections/Blog/Blog-list/index.js
index 550122c3027ec..ee13c341bdb6a 100644
--- a/src/sections/Blog/Blog-list/index.js
+++ b/src/sections/Blog/Blog-list/index.js
@@ -78,7 +78,7 @@ const BlogList = ({
                   {searchedPosts.length > 0 &&
                     searchedPosts?.map(({ id, frontmatter, fields }, index) => (
                       <Col $xs={12} key={id}>
-                        <Card frontmatter={frontmatter} fields={fields} loading={index === 0 ? "eager" : "lazy"} fetchpriority={index === 0 ? "high" : "auto"} />
+                        <Card frontmatter={frontmatter} fields={fields} loading={index === 0 ? "eager" : "lazy"} fetchpriority={index === 0 ? "high" : "auto"} listView={true} />
                       </Col>
                     ))}
                   <Col>