diff --git a/app/components/Contact.tsx b/app/components/Contact.tsx
index b7a7109..aeb5e9c 100644
--- a/app/components/Contact.tsx
+++ b/app/components/Contact.tsx
@@ -96,10 +96,10 @@ export default function Contact() {
       id="contact"
       className={`p-10 ${isVisible ? "animate-fade-in" : "opacity-0"}`}
     >
-      <h2 className="text-4xl font-extrabold text-center text-gray-900 dark:text-white mb-8">
+      <h2 className="text-4xl font-bold text-center text-gray-900 mb-8">
         Get in Touch
       </h2>
-      <div className="bg-white/30 dark:bg-gray-800 p-8 rounded-3xl shadow-xl max-w-lg mx-auto">
+      <div className="bg-white/30 p-8 rounded-3xl shadow-xl max-w-lg mx-auto">
         {banner.show && (
           <div
             className={`mb-4 text-center rounded-full py-2 px-4 text-white ${
diff --git a/app/components/Projects.tsx b/app/components/Projects.tsx
index e084a34..3ae5f5e 100644
--- a/app/components/Projects.tsx
+++ b/app/components/Projects.tsx
@@ -53,36 +53,38 @@ export default function Projects() {
       id="projects"
       className={`p-10 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
     >
-      <h2 className="text-3xl font-bold text-center text-gray-800">Projects</h2>
+      <h2 className="text-4xl font-bold text-center text-gray-900">Projects</h2>
       <div className="mt-6">
-        <ResponsiveMasonry
-                columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}
-                gutterBreakpoints={{350: "12px", 750: "16px", 900: "24px"}}        >
-          <Masonry >
-            {projects.map((project, index) => (
-              <Link
-                key={project.id}
-                href={{
-                  pathname: `/projects/${project.slug}`,
-                  query: { project: JSON.stringify(project) },
-                }}
-                className="cursor-pointer w-full"
-              >
-                <div
-                  className="project-card"
-                  style={{ animationDelay: `${index * 0.1}s` }}
+        {isVisible && (
+          <ResponsiveMasonry
+            columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 3 }}
+          >
+            <Masonry gutter="16px">
+              {projects.map((project, index) => (
+                <Link
+                  key={project.id}
+                  href={{
+                    pathname: `/projects/${project.slug}`,
+                    query: { project: JSON.stringify(project) },
+                  }}
+                  className="cursor-pointer"
                 >
-                  <h3 className="text-2xl font-bold text-gray-800">
-                    {project.title}
-                  </h3>
-                  <p className="mt-2 text-gray-500">
-                    {project.meta_description}
-                  </p>
-                </div>
-              </Link>
-            ))}
-          </Masonry>
-        </ResponsiveMasonry>
+                  <div
+                    className="project-card"
+                    style={{ animationDelay: `${index * 0.1}s` }}
+                  >
+                    <h3 className="text-2xl font-bold text-gray-800">
+                      {project.title}
+                    </h3>
+                    <p className="mt-2 text-gray-500">
+                      {project.meta_description}
+                    </p>
+                  </div>
+                </Link>
+              ))}
+            </Masonry>
+          </ResponsiveMasonry>
+        )}
       </div>
     </section>
   );