diff --git a/components/Card.tsx b/components/Card.tsx
index 1ae920e009..2c750fcd49 100644
--- a/components/Card.tsx
+++ b/components/Card.tsx
@@ -6,7 +6,7 @@ const Card = ({ title, description, imgSrc, href }) => (
     <div
       className={`${
         imgSrc && 'h-full'
-      } overflow-hidden rounded-md border-2 border-gray-200/60 dark:border-gray-700/60`}
+      } group overflow-hidden rounded-md border-2 border-gray-200/60 transition-all duration-150 hover:border-gray-300/60 dark:border-gray-700/60 dark:hover:border-gray-600/60`}
     >
       {imgSrc &&
         (href ? (
@@ -14,7 +14,7 @@ const Card = ({ title, description, imgSrc, href }) => (
             <Image
               alt={title}
               src={imgSrc}
-              className="object-cover object-center md:h-36 lg:h-48"
+              className="object-cover object-center transition-all duration-150 group-hover:scale-110 group-hover:grayscale md:h-36 lg:h-48"
               width={544}
               height={306}
             />
diff --git a/components/Header.tsx b/components/Header.tsx
index 3378b043e0..316f0a0cc5 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -15,10 +15,8 @@ const Header = () => {
   return (
     <header className={headerClass}>
       <Link href="/" aria-label={siteMetadata.headerTitle}>
-        <div className="flex items-center justify-between">
-          <div className="mr-3">
-            <Logo />
-          </div>
+        <div className="flex items-center justify-between gap-3">
+          <Logo />
           {typeof siteMetadata.headerTitle === 'string' ? (
             <div className="hidden h-6 text-2xl font-semibold sm:block">
               {siteMetadata.headerTitle}
diff --git a/css/tailwind.css b/css/tailwind.css
index 5a8a4c2f15..fac9ee0f73 100644
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -173,3 +173,7 @@ input:-webkit-autofill:focus {
   display: inline-block;
   vertical-align: middle;
 }
+
+button {
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/layouts/ListLayoutWithTags.tsx b/layouts/ListLayoutWithTags.tsx
index bfbb3b7959..23e763bb40 100644
--- a/layouts/ListLayoutWithTags.tsx
+++ b/layouts/ListLayoutWithTags.tsx
@@ -44,6 +44,7 @@ function Pagination({ totalPages, currentPage }: PaginationProps) {
           <Link
             href={currentPage - 1 === 1 ? `/${basePath}/` : `/${basePath}/page/${currentPage - 1}`}
             rel="prev"
+            className="hover:text-primary-500 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
           >
             Previous
           </Link>
@@ -57,7 +58,11 @@ function Pagination({ totalPages, currentPage }: PaginationProps) {
           </button>
         )}
         {nextPage && (
-          <Link href={`/${basePath}/page/${currentPage + 1}`} rel="next">
+          <Link
+            href={`/${basePath}/page/${currentPage + 1}`}
+            rel="next"
+            className="hover:text-primary-500 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
+          >
             Next
           </Link>
         )}