diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx
index a866346cf..ea863c5cc 100644
--- a/pages/blog/index.page.tsx
+++ b/pages/blog/index.page.tsx
@@ -226,7 +226,7 @@ export default function StaticMarkdownPage({
         </div>
 
         {/* filterTag === frontmatter.type &&  */}
-        <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-6 grid-flow-row mb-20 bg-white dark:bg-slate-800  mx-auto p-4'>
+        <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-20 bg-white dark:bg-slate-800 mx-auto p-6'>
           {blogPosts
             .filter((post) => {
               if (!currentFilterTag || currentFilterTag === 'All') return true;
@@ -241,88 +241,59 @@ export default function StaticMarkdownPage({
             })
             .map((blogPost: any) => {
               const { frontmatter, content } = blogPost;
-              const date = new Date(frontmatter.date);
               const timeToRead = Math.ceil(readingTime(content).minutes);
 
               return (
                 <section key={blogPost.slug}>
-                  <div className='sm:h-[498px] flex border rounded-lg shadow-sm hover:shadow-lg transition-all overflow-hidden dark:border-slate-500'>
+                  <div className='h-[520px] flex border rounded-lg shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden dark:border-slate-500 group relative'>
                     <Link
                       href={`/blog/posts/${blogPost.slug}`}
                       className='inline-flex flex-col flex-1 w-full'
                     >
-                      <div
-                        className='bg-slate-50 h-[160px] w-full self-stretch mr-3 bg-cover bg-center'
-                        style={{ backgroundImage: `url(${frontmatter.cover})` }}
-                      />
-                      <div className=' p-4 flex flex-col flex-1 justify-between'>
+                      <div className='relative w-full h-[240px] overflow-hidden'>
+                        <Image
+                          src={frontmatter.cover}
+                          fill
+                          className='object-cover transition-transform duration-300 group-hover:scale-105'
+                          alt={frontmatter.title}
+                        />
+                      </div>
+                      <div className='p-4 flex flex-col flex-1 justify-between'>
                         <div>
-                          <div>
-                            <div
-                              className='bg-blue-100 hover:bg-blue-200 dark:bg-slate-700 dark:text-blue-100 cursor-pointer font-semibold text-blue-800 inline-block px-3 py-1 rounded-full mb-4 text-sm'
-                              onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-
-                                if (frontmatter.type) {
-                                  setCurrentFilterTag(frontmatter.type);
-                                  history.replaceState(
-                                    null,
-                                    '',
-                                    `/blog?type=${frontmatter.type}`,
-                                  );
-                                }
-                              }}
-                            >
-                              {frontmatter.type || 'Unknown Type'}
-                            </div>
+                          <div className='bg-blue-100 dark:bg-slate-700 dark:text-blue-100 font-semibold text-blue-800 inline-block px-3 py-1 rounded-full mb-4 text-sm'>
+                            {frontmatter.type || 'Unknown Type'}
                           </div>
-                          <div className='text-lg font-semibold'>
+                          <div className='text-lg font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300'>
                             {frontmatter.title}
                           </div>
-
                           <div className='mt-3 mb-6 text-slate-500 dark:text-slate-300'>
                             <TextTruncate
                               element='span'
-                              line={4}
+                              line={3}
                               text={frontmatter.excerpt}
                             />
                           </div>
-                        </div>
-                        <div
-                          className={`
-                            flex 
-                            flex-row
-                            items-center
-                          `}
-                        >
-                          <div className='flex flex-row pl-2 mr-2'>
-                            {(frontmatter.authors || []).map(
-                              (author: Author, index: number) => (
-                                <div
-                                  key={index}
-                                  className={`bg-slate-50 rounded-full -ml-3 bg-cover bg-center border-2 border-white ${
-                                    frontmatter.authors.length > 2
-                                      ? 'h-8 w-8'
-                                      : 'h-11 w-11'
-                                  }`}
-                                  style={{
-                                    backgroundImage: `url(${author.photo})`,
-                                    zIndex: 10 - index,
-                                  }}
-                                />
-                              ),
-                            )}
-                          </div>
-
-                          <div
-                            className={`
-                              flex 
-                              flex-col
-                              items-start
-                            `}
-                          >
-                            <div className='text-sm font-semibold'>
+                          <div className='mb-4'></div>
+                          <div className='flex items-center'>
+                            <div className='flex flex-row pl-2 mr-2'>
+                              {(frontmatter.authors || []).map(
+                                (author: Author, index: number) => (
+                                  <div
+                                    key={index}
+                                    className={`bg-slate-50 rounded-full -ml-3 bg-cover bg-center border-2 border-white ${
+                                      frontmatter.authors.length > 2
+                                        ? 'h-8 w-8'
+                                        : 'h-11 w-11'
+                                    }`}
+                                    style={{
+                                      backgroundImage: `url(${author.photo})`,
+                                      zIndex: 10 - index,
+                                    }}
+                                  />
+                                ),
+                              )}
+                            </div>
+                            <div className='text-sm font-semibold dark:text-slate-300 mb-2'>
                               {frontmatter.authors.length > 2 ? (
                                 <>
                                   {frontmatter.authors
@@ -346,22 +317,46 @@ export default function StaticMarkdownPage({
                                   ),
                                 )
                               )}
-                            </div>
-
-                            <div className='text-slate-500 text-sm dark:text-slate-300'>
-                              {frontmatter.date && (
-                                <span>
-                                  {date.toLocaleDateString('en-us', {
-                                    year: 'numeric',
-                                    month: 'long',
-                                    day: 'numeric',
-                                  })}
-                                </span>
-                              )}{' '}
-                              &middot; {timeToRead} min read
+                              <div className='text-slate-500 text-sm dark:text-slate-400'>
+                                {frontmatter.date && (
+                                  <span>
+                                    {new Date(
+                                      frontmatter.date,
+                                    ).toLocaleDateString('en-us', {
+                                      year: 'numeric',
+                                      month: 'long',
+                                      day: 'numeric',
+                                    })}
+                                  </span>
+                                )}
+                              </div>
                             </div>
                           </div>
                         </div>
+                        <div className='flex items-center justify-between pt-4 mt-4 border-t dark:border-slate-600'>
+                          <span className='text-sm text-slate-500 dark:text-slate-300'>
+                            {timeToRead} min read
+                          </span>
+                          <Link
+                            href={`/blog/posts/${blogPost.slug}`}
+                            className='text-blue-600 dark:text-blue-400 font-medium flex items-center hover:translate-x-1 transition-transform duration-300'
+                          >
+                            Read More
+                            <svg
+                              className='ml-1 w-4 h-4'
+                              fill='none'
+                              stroke='currentColor'
+                              viewBox='0 0 24 24'
+                            >
+                              <path
+                                strokeLinecap='round'
+                                strokeLinejoin='round'
+                                strokeWidth={2}
+                                d='M9 5l7 7-7 7'
+                              />
+                            </svg>
+                          </Link>
+                        </div>
                       </div>
                     </Link>
                   </div>
diff --git a/styles/globals.css b/styles/globals.css
index 7d786ece1..f51290cdb 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -300,3 +300,25 @@ border-radius: 4px; */
 .scrollbar-hidden::-webkit-scrollbar {
   display: none;
 }
+
+@keyframes shine {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(200%);
+  }
+}
+
+.shine-animation {
+  animation: shine 2s infinite;
+}
+
+.group {
+  transition: all 0.3s ease;
+}
+
+.group:hover {
+  transform: translateY(-2px);
+}
+