diff --git a/api/blogs.js b/api/blogs.js
index 36e3cd9..a65bac6 100644
--- a/api/blogs.js
+++ b/api/blogs.js
@@ -1,4 +1,3 @@
-// images
 import blogImg1 from "/public/images/blog/img-1.jpg";
 import blogImg2 from "/public/images/blog/img-2.jpg";
 import blogImg3 from "/public/images/blog/img-3.jpg";
@@ -7,47 +6,67 @@ import blogSingleImg1 from "/public/images/blog/blog-single/img-1.jpg";
 import blogSingleImg2 from "/public/images/blog/blog-single/img-2.jpg";
 import blogSingleImg3 from "/public/images/blog/blog-single/img-3.jpg";
 
-
-
 const blogs = [
     {
         id: '1',
-        title: 'We’re the people who don’t just support progressive change.',
-        slug:'support-progressive-change',
+        title: 'The people who just support progressive change.',
+        slug:'the-people-who-just-support-progressive-change.',
         screens: blogImg1,
-        description: 'Consectetur adipiscing elit. Purusout phasellus malesuada lectus.',
+        description: `
+            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+            <blockquote>
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
+            </blockquote>
+            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+        `,
         author: 'Anne William',
-        authorTitle:'Sineor Consultant',
+        para: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit',
+        authorTitle:'Admin',
         create_at: '25 Sep 2023',
-        blogSingleImg:blogSingleImg1, 
+        blogSingleImg:blogSingleImg1,
         comment:'35',
         blClass:'format-standard-image',
     },
     {
         id: '2',
-        title: 'Politics is why we can’t have nice things. Like the internet.',
-        slug:'Like-the-internet',
+        title: 'Politics is why we have nice things. Like the internet.',
+        slug:'politics-is-why-we-have-nice-things-like-the-internet.',
         screens: blogImg2,
-        description: 'Consectetur adipiscing elit. Purusout phasellus malesuada lectus.',
+        description: `
+            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+            <blockquote>
+               Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
+            </blockquote>
+            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+        `,
         author: 'Robert Fox',
-        authorTitle:'Creative Director',
+        para: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit',
+        authorTitle:'Admin',
         create_at: '26 Sep 2023',
-        blogSingleImg:blogSingleImg2, 
+        blogSingleImg:blogSingleImg2,
         comment:'80',
         blClass:'format-standard-image',
     },
     {
         id: '3',
         title: 'Liberty Divided Over Criticism Justice League',
-        slug:'Criticism-Justice',
+        slug:'liberty-divided-over-criticism-justice-league',
         screens: blogImg3,
-        description: 'Consectetur adipiscing elit. Purusout phasellus malesuada lectus.',
+        description: `
+            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+            <blockquote>
+               Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+            </blockquote>
+            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+        `,
         author: 'Devon Lane',
-        authorTitle:'Art Director',
+        para: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit',
+        authorTitle:'Admin',
         create_at: '28 Sep 2023',
         blogSingleImg:blogSingleImg3,
         comment:'95',
         blClass:'format-video',
     },
 ];
-export default blogs;
\ No newline at end of file
+
+export default blogs;
diff --git a/components/BlogList/BlogList.js b/components/BlogList/BlogList.js
index e733a42..a1f320b 100644
--- a/components/BlogList/BlogList.js
+++ b/components/BlogList/BlogList.js
@@ -1,45 +1,68 @@
 import React from 'react';
-import Link from 'next/link'
-import BlogSidebar from '../BlogSidebar/BlogSidebar.js'
-import VideoModal from '../ModalVideo/VideoModal'
-
-import blogs from '../../api/blogs'
+import Link from 'next/link';
+import BlogSidebar from '../BlogSidebar/BlogSidebar.js';
+import VideoModal from '../ModalVideo/VideoModal';
+import blogs from '../../api/blogs';
 import Image from 'next/image.js';
 
-
-const ClickHandler = () =>{
+const ClickHandler = () => {
     window.scrollTo(10, 0);
- }
+};
 
 const BlogList = (props) => {
-    return(
+    return (
         <section className="wpo-blog-pg-section section-padding">
             <div className="container">
                 <div className="row">
-                    <div className={`col col-lg-8 col-12 ${props.blRight}`}>
+                    <div className={`col col-lg-12 ${props.blRight}`}>
                         <div className="wpo-blog-content">
-                            {blogs.map((blog, bitem) => (
-                                <div className={`post  ${blog.blClass}`}key={bitem}>
-                                    <div className="entry-media video-holder">
-                                        <Image src={blog.blogSingleImg} alt=""/>
-                                        <VideoModal/>
+                            <div className="row">
+                                {blogs.map((blog, bitem) => (
+                                    <div className="col-lg-4 col-md-6 col-12" key={bitem}>
+                                        <div className={`post ${blog.blClass}`}>
+                                            <div className="entry-media">
+                                                <Image src={blog.blogSingleImg} alt="" />
+                                                {/* <VideoModal /> */}
+                                            </div>
+                                            <div className="entry-meta">
+                                                <ul>
+                                                    {/* <li><i className="fi flaticon-comment-white-oval-bubble"></i> Comments {blog.comment} </li> */}
+                                                    <li>
+                                                        <i className="fi flaticon-calendar"></i> {blog.create_at}
+                                                    </li>
+                                                    <li>
+                                                        <i className="fi flaticon-user"></i>
+                                                        <Link onClick={ClickHandler} href={'/blog-single/[slug]'} as={`/blog-single/${blog.slug}`}>
+                                                            {blog.authorTitle}
+                                                        </Link>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                            <div className="entry-details">
+                                                <h3 style={{
+                                                    whiteSpace: 'nowrap',
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    width: '100%',
+                                                    display: 'block',
+                                                }}>
+                                                    <Link onClick={ClickHandler} href={'/blog-single/[slug]'} as={`/blog-single/${blog.slug}`}>
+                                                        {blog.title}
+                                                    </Link>
+                                                </h3>
+                                                <p>
+                                                    {blog.para}
+                                                </p>
+                                                <Link onClick={ClickHandler} href={'/blog-single/[slug]'} as={`/blog-single/${blog.slug}`} className="read-more">
+                                                   Continue Reading
+                                                </Link>
+                                            </div>
+                                        </div>
                                     </div>
-                                    <div className="entry-meta">
-                                        <ul>
-                                            <li><i className="fi flaticon-user"></i> By <Link onClick={ClickHandler} href={'/blog-single/[slug]'} as={`/blog-single/${blog.slug}`}>{blog.authorTitle}</Link> </li>
-                                            <li><i className="fi flaticon-comment-white-oval-bubble"></i> Comments {blog.comment} </li>
-                                            <li><i className="fi flaticon-calendar"></i> {blog.create_at}</li>
-                                        </ul>
-                                    </div>
-                                    <div className="entry-details">
-                                        <h3><Link onClick={ClickHandler} href={'/blog-single/[slug]'} as={`/blog-single/${blog.slug}`}>{blog.title}</Link></h3>
-                                        <p>Law is a great career path if you want to build a broad skill set that includes everything from critical thinking and strategic planning to communications. If you love rising to a challenge.</p>
-                                        <Link onClick={ClickHandler} href={'/blog-single/[slug]'} as={`/blog-single/${blog.slug}`} className="read-more">READ MORE...</Link>
-                                    </div>
-                                </div>
-                            ))}
+                                ))}
+                            </div>
 
-                            <div className="pagination-wrapper pagination-wrapper-left">
+                            {/* <div className="pagination-wrapper pagination-wrapper-left">
                                 <ul className="pg-pagination">
                                     <li>
                                         <Link href="/blog-left-sidebar" aria-label="Previous">
@@ -55,16 +78,14 @@ const BlogList = (props) => {
                                         </Link>
                                     </li>
                                 </ul>
-                            </div>
+                            </div> */}
                         </div>
                     </div>
-                    <BlogSidebar blLeft={props.blLeft}/>
+                    {/* <BlogSidebar blLeft={props.blLeft}/> */}
                 </div>
             </div>
         </section>
-
-     )
-        
-}
+    );
+};
 
 export default BlogList;
diff --git a/components/BlogList/BlogList2.js b/components/BlogList/BlogList2.js
new file mode 100644
index 0000000..6a7bad1
--- /dev/null
+++ b/components/BlogList/BlogList2.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import Link from 'next/link'
+import BlogSidebar from '../BlogSidebar/BlogSidebar.js'
+import VideoModal from '../ModalVideo/VideoModal'
+
+import blogs from '../../api/blogs'
+import Image from 'next/image.js';
+
+
+const ClickHandler = () =>{
+    window.scrollTo(10, 0);
+ }
+
+const BlogList2 = (props) => {
+    return(
+        <section className="wpo-blog-pg-section section-padding">
+            <div className="container">
+                <div className="row">
+                    <div className={`col col-lg-8 col-12 ${props.blRight}`}>
+                        <div className="wpo-blog-content">
+                            {blogs.map((blog, bitem) => (
+                                <div className={`post  ${blog.blClass}`}key={bitem}>
+                                    <div className="entry-media video-holder">
+                                        <Image src={blog.blogSingleImg} alt=""/>
+                                        <VideoModal/>
+                                    </div>
+                                    <div className="entry-meta">
+                                        <ul>
+                                            <li><i className="fi flaticon-user"></i> By <Link onClick={ClickHandler} href={'/blog-single/[slug]'} as={`/blog-single/${blog.slug}`}>{blog.authorTitle}</Link> </li>
+                                            <li><i className="fi flaticon-comment-white-oval-bubble"></i> Comments {blog.comment} </li>
+                                            <li><i className="fi flaticon-calendar"></i> {blog.create_at}</li>
+                                        </ul>
+                                    </div>
+                                    <div className="entry-details">
+                                        <h3><Link onClick={ClickHandler} href={'/blog-single/[slug]'} as={`/blog-single/${blog.slug}`}>{blog.title}</Link></h3>
+                                        <p>Law is a great career path if you want to build a broad skill set that includes everything from critical thinking and strategic planning to communications. If you love rising to a challenge.</p>
+                                        <Link onClick={ClickHandler} href={'/blog-single/[slug]'} as={`/blog-single/${blog.slug}`} className="read-more">READ MORE...</Link>
+                                    </div>
+                                </div>
+                            ))}
+
+                            <div className="pagination-wrapper pagination-wrapper-left">
+                                <ul className="pg-pagination">
+                                    <li>
+                                        <Link href="/blog-left-sidebar" aria-label="Previous">
+                                            <i className="fi ti-angle-left"></i>
+                                        </Link>
+                                    </li>
+                                    <li className="active"><Link href="/blog-left-sidebar">1</Link></li>
+                                    <li><Link href="/blog-left-sidebar">2</Link></li>
+                                    <li><Link href="/blog-left-sidebar">3</Link></li>
+                                    <li>
+                                        <Link href="/blog-left-sidebar" aria-label="Next">
+                                            <i className="fi ti-angle-right"></i>
+                                        </Link>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <BlogSidebar blLeft={props.blLeft}/>
+                </div>
+            </div>
+        </section>
+
+     )
+        
+}
+
+export default BlogList2;
diff --git a/pages/blog-single/[slug].js b/pages/blog-single/[slug].js
index 96b5a62..9bde6a3 100644
--- a/pages/blog-single/[slug].js
+++ b/pages/blog-single/[slug].js
@@ -33,7 +33,7 @@ const BlogSingle = (props) => {
             <section className="wpo-blog-single-section section-padding">
                 <div className="container">
                     <div className="row">
-                        <div className={`col col-lg-8 col-12 ${props.blRight}`}>
+                        <div className={`col col-lg-12 col-12 ${props.blRight}`}>
                             <div className="wpo-blog-content">
                                 <div className="post format-standard-image">
                                     <div className="entry-media">
@@ -41,29 +41,28 @@ const BlogSingle = (props) => {
                                     </div>
                                     <div className="entry-meta">
                                         <ul>
-                                            <li><i className="fi ti-user"></i> By <Link href="/">{BlogDetails?.author}</Link> </li>
-                                            <li><i className="fi ti-comment-alt"></i> Comments {BlogDetails?.comment}</li>
                                             <li><i className="fi flaticon-calendar"></i> {BlogDetails?.create_at}</li>
+                                            <li><i className="fi ti-user"></i> By <Link href="/">{BlogDetails?.authorTitle}</Link> </li>
+                                            {/* <li><i className="fi ti-comment-alt"></i> Comments {BlogDetails?.comment}</li> */}
                                         </ul>
                                     </div>
                                     <h2>{BlogDetails?.title}</h2>
-                                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful.</p>
-                                    <blockquote>
-                                        Combined with a handful of model sentence structures, generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
-                                    </blockquote>
-                                    <p>I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself,</p>
+                                    <div
+                                        dangerouslySetInnerHTML={{ __html: BlogDetails?.description }}
+                                    ></div>
 
-                                    <div className="gallery">
+
+                                    {/* <div className="gallery">
                                         <div>
                                             <Image src={gl1} alt="" />
                                         </div>
                                         <div>
                                             <Image src={gl2} alt="" />
                                         </div>
-                                    </div>
+                                    </div> */}
                                 </div>
 
-                                <div className="tag-share clearfix">
+                                {/* <div className="tag-share clearfix">
                                     <div className="tag">
                                         <span>Share: </span>
                                         <ul>
@@ -72,8 +71,8 @@ const BlogSingle = (props) => {
                                             <li><Link href="/blog-single/support-progressive-change">Political</Link></li>
                                         </ul>
                                     </div>
-                                </div>
-                                <div className="tag-share-s2 clearfix">
+                                </div> */}
+                                {/* <div className="tag-share-s2 clearfix">
                                     <div className="tag">
                                         <span>Share: </span>
                                         <ul>
@@ -83,9 +82,9 @@ const BlogSingle = (props) => {
                                             <li><Link href="/">pinterest</Link></li>
                                         </ul>
                                     </div>
-                                </div>
+                                </div> */}
 
-                                <div className="author-box">
+                                {/* <div className="author-box">
                                     <div className="author-avatar">
                                         <Link href="/" target="_blank"><Image src={blog6} alt="" /></Link>
                                     </div>
@@ -101,9 +100,9 @@ const BlogSingle = (props) => {
                                             </ul>
                                         </div>
                                     </div>
-                                </div>
+                                </div> */}
 
-                                <div className="more-posts">
+                                {/* <div className="more-posts">
                                     <div className="previous-post">
                                         <Link href="/">
 
@@ -120,9 +119,9 @@ const BlogSingle = (props) => {
 
                                         </Link>
                                     </div>
-                                </div>
+                                </div> */}
 
-                                <div className="comments-area">
+                                {/* <div className="comments-area">
                                     <div className="comments-section">
                                         <h3 className="comments-title">Comments</h3>
                                         <ol className="comments">
@@ -199,51 +198,14 @@ const BlogSingle = (props) => {
                                                     </li>
                                                 </ul>
                                             </li>
-                                            <li className="comment">
-                                                <div>
-                                                    <div className="comment-theme">
-                                                        <div className="comment-image"><Image src={blog3} alt="" /></div>
-                                                    </div>
-                                                    <div className="comment-main-area">
-                                                        <div className="comment-wrapper">
-                                                            <div className="comments-meta">
-                                                                <h4>John Abraham <span className="comments-date">January 12,2022
-                                                                    At 9.00am</span></h4>
-                                                            </div>
-                                                            <div className="comment-area">
-                                                                <p>I will give you a complete account of the system, and
-                                                                    expound the actual teachings of the great explorer of
-                                                                    the truth, </p>
-                                                                <div className="comments-reply">
-                                                                    <Link href="/" className="comment-reply-link"><span>Reply</span></Link>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </li>
+                                      
                                         </ol>
                                     </div>
-                                    <div className="comment-respond">
-                                        <h3 className="comment-reply-title">Post Comments</h3>
-                                        <form onSubmit={submitHandler} id="commentform" className="comment-form">
-                                            <div className="form-textarea">
-                                                <textarea id="comment" placeholder="Write Your Comments..."></textarea>
-                                            </div>
-                                            <div className="form-inputs">
-                                                <input placeholder="Website" type="url" />
-                                                <input placeholder="Name" type="text" />
-                                                <input placeholder="Email" type="email" />
-                                            </div>
-                                            <div className="form-submit">
-                                                <input id="submit" value="Post Comment" type="submit" />
-                                            </div>
-                                        </form>
-                                    </div>
-                                </div>
+                            
+                                </div> */}
                             </div>
                         </div>
-                        <BlogSidebar blLeft={props.blLeft} />
+                        {/* <BlogSidebar blLeft={props.blLeft} /> */}
                     </div>
                 </div>
             </section>
diff --git a/pages/blog/index.js b/pages/blog/index.js
index c929b87..9bc6db8 100644
--- a/pages/blog/index.js
+++ b/pages/blog/index.js
@@ -9,7 +9,7 @@ const BlogPage =() => {
     return(
         <Fragment>
             <Navbar2/>
-            <PageTitle pageTitle={'Latest News'} pagesub={'Blog'}/> 
+            <PageTitle pageTitle={'Blog'} pagesub={'Blog'}/> 
             <BlogList/>
             <Footer/>
             <Scrollbar/>
diff --git a/styles/sass/page/_blog-single.scss b/styles/sass/page/_blog-single.scss
index a8c0e12..3d7c191 100644
--- a/styles/sass/page/_blog-single.scss
+++ b/styles/sass/page/_blog-single.scss
@@ -145,7 +145,7 @@
 			border: 0;
 			text-align: center;
 			position: relative;
-			text-decoration: underline;
+			// text-decoration: underline;
 
 			@include media-query(767px) {
 				padding: 55px 25px;
diff --git a/styles/sass/page/_blog.scss b/styles/sass/page/_blog.scss
index 10586d2..422d512 100644
--- a/styles/sass/page/_blog.scss
+++ b/styles/sass/page/_blog.scss
@@ -134,10 +134,22 @@
 		}
 
 		a.read-more {
-			color: $text-color;
-			text-transform: capitalize;
-			font-size: 16px;
+			font-style: normal;
+                font-weight: 700;
+                font-size: 18px;
+                line-height: 25px;
+                background: $theme-primary-color-gradient;
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                background-clip: text;
+                // text-fill-color: transparent;
+                display: inline-block;
+                padding-bottom: 5px;
+                border-bottom: 1px solid $theme-primary-color;
 
+                @media(max-width:1199px) {
+                    font-size: 14px;
+                }
 			&:hover {
 				color: $theme-primary-color;
 			}