diff --git a/components/Logo.tsx b/components/Logo.tsx
index 1370f57..4756efa 100644
--- a/components/Logo.tsx
+++ b/components/Logo.tsx
@@ -4,7 +4,7 @@ export const Logo = () => {
       xmlns="http://www.w3.org/2000/svg"
       id="svg166"
       version="1.1"
-      className="fill-action group-hover:fill-primary dark:group-hover:fill-secondar transition-all ease-in duration-100 flex-no-shrink xl:w-12 xl:h-12 w-8 h-8"
+      className="fill-action group-hover:fill-primary dark:group-hover:fill-secondary transition-all ease-in duration-100 flex-no-shrink xl:w-12 xl:h-12 w-8 h-8"
       viewBox="0 0 100 100"
     >
       <g id="167217677994600400">
diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx
index 9e60d7d..e2b6b6b 100644
--- a/pages/blog/index.tsx
+++ b/pages/blog/index.tsx
@@ -13,7 +13,7 @@ const BlogCard = ({
   slug: string;
 }) => {
   return (
-    <div className="p-4 rounded-md border border-gray-200 shadow-md shadow-gray-200 dark:border-gray-700">
+    <div className="p-4 rounded-md border border-gray-200 shadow-md shadow-gray-200 dark:shadow-gray-900 dark:border-gray-700">
       <div className="text-sm font-medium text-gray-500">
         {formatDate(blog.date)}
       </div>
@@ -33,8 +33,10 @@ const BlogCard = ({
 const Blog = ({ posts }: { posts: Post[] }) => {
   return (
     <MainLayout>
-      <h1 className="text-3xl font-bold text-gray-800">Blog</h1>
-      <div className="w-full h-0.5 bg-gray-200 dark:bg-gray-800 my-4 rounded-full" />
+      <h1 className="text-3xl font-bold text-gray-800 dark:text-gray-200">
+        Blog
+      </h1>
+      <div className="w-full h-0.5 bg-gray-200 dark:bg-gray-700 my-4 rounded-full" />
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         {posts.map((post, index) => (
           <BlogCard
diff --git a/pages/projects/index.tsx b/pages/projects/index.tsx
index fc27b0c..a2b8cf3 100644
--- a/pages/projects/index.tsx
+++ b/pages/projects/index.tsx
@@ -13,7 +13,7 @@ const ProjectCard = ({
   slug: string;
 }) => {
   return (
-    <div className="p-4 rounded-md border border-gray-200 shadow-md shadow-gray-200 dark:border-gray-700 grid grid-cols-1 xl:grid-cols-2 items-center gap-4">
+    <div className="p-4 rounded-md border border-gray-200 shadow-md shadow-gray-200 dark:shadow-gray-900 dark:border-gray-700 grid grid-cols-1 xl:grid-cols-2 items-center gap-4">
       <div className="order-last xl:order-1">
         <div className="text-sm font-medium text-gray-500">
           {formatDate(project.date)}
@@ -42,8 +42,10 @@ const ProjectCard = ({
 const Projects = ({ posts }: { posts: Post[] }) => {
   return (
     <MainLayout>
-      <h1 className="text-3xl font-bold text-gray-800">Projects</h1>
-      <div className="w-full h-0.5 bg-gray-200 dark:bg-gray-800 my-4 rounded-full" />
+      <h1 className="text-3xl font-bold text-gray-800 dark:text-gray-100">
+        Projects
+      </h1>
+      <div className="w-full h-0.5 bg-gray-200 dark:bg-gray-700 my-4 rounded-full" />
       <div className="grid grid-cols-1 gap-4">
         {posts.map((post, index) => (
           <ProjectCard