diff --git a/components/BlogPostArchive.js b/components/BlogPostArchive.js
index e95f2cfb..207486bb 100644
--- a/components/BlogPostArchive.js
+++ b/components/BlogPostArchive.js
@@ -17,10 +17,10 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
       <div className='pt-16 pb-4 text-3xl dark:text-white' id={archiveTitle}>{archiveTitle}</div>
       <ul>
         {posts.map(post => (
-          <li key={post.id} className='border-l-2 p-1 text-sm hover:scale-x-105 hover:border-blue-500 transform duration-500  overflow-hidden whitespace-nowrap'>
+          <li key={post.id} className='border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-blue-500 transform duration-500'>
             <div name={post?.date?.start_date}><span className='text-gray-400'>{post.date.start_date}</span> &nbsp;
               <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-                <a className='dark:text-blue-400 hover:underline cursor-pointer text-blue-600'>{post.title}</a>
+                <a className='dark:text-blue-400 overflow-x-hidden hover:underline cursor-pointer text-blue-600'>{post.title}</a>
               </Link>
             </div>
           </li>
diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js
index 1af762c5..55229ed7 100644
--- a/components/BlogPostCard.js
+++ b/components/BlogPostCard.js
@@ -9,7 +9,7 @@ import TagItemMini from './TagItemMini'
 const BlogPostCard = ({ post, tags }) => {
   return (
     <div key={post.id} className='flex md:flex-row flex-col-reverse justify-between hover:shadow-2xl shadow-md mb-14 duration-300 rounded-xl
-      w-full lg:h-60 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600'>
+      w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600'>
 
       <div className='p-8 flex flex-col justify-between w-full'>
         <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
@@ -41,7 +41,7 @@ const BlogPostCard = ({ post, tags }) => {
 
       {post?.page_cover && (
         <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-        <div className='h-60 w-full md:max-w-sm relative rounded-t-xl md:rounded-t-none md:rounded-r-xl md:h-full duration-200 cursor-pointer transform overflow-hidden'>
+        <div className='h-60  w-full md:max-w-sm relative rounded-t-xl md:rounded-t-none md:rounded-r-xl md:h-full duration-200 cursor-pointer transform overflow-hidden'>
           <Image className='hover:scale-105 transform duration-500 rounded-t-xl md:rounded-t-none md:rounded-r-xl' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
         </div>
       </Link>
diff --git a/components/SideBar.js b/components/SideBar.js
index 4404d665..384b9880 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -77,7 +77,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
               </a>
             </Link>
           </div>
-          <div className='px-5 pt-2'>
+          <div className='px-5 py-2'>
             <TagGroups tags={tags} currentTag={currentTag} />
           </div>
         </section>
diff --git a/pages/archive/index.js b/pages/archive/index.js
index ee8f4879..79958c24 100644
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -77,7 +77,7 @@ const Index = ({ allPosts, tags, categories }) => {
         <StickyBar>
           <div className='py-2.5 text-lg lg:mx-14 dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-4'/>{locale.NAV.ARCHIVE}</div>
         </StickyBar>
-        <div className='mt-20 mx-2 lg:mx-20 bg-white p-12 dark:bg-gray-800'>
+        <div className='mt-20 mb-10 pb-20 mx-2 lg:mx-20 bg-white md:p-12 p-3 dark:bg-gray-800 '>
           {Object.keys(archivePosts).map(archiveTitle => (
              <BlogPostArchive key={archiveTitle} posts={archivePosts[archiveTitle]} archiveTitle={archiveTitle}/>
           ))}