diff --git a/app/(default)/Credits/page.jsx b/app/(default)/Credits/page.jsx
index 023dffa..7a06a73 100644
--- a/app/(default)/Credits/page.jsx
+++ b/app/(default)/Credits/page.jsx
@@ -7,6 +7,7 @@ import { auth } from "@/Firebase";
 import { PinContainer } from "./creditcards/credits";
 import { useRouter } from "next/navigation";
 import { FaPencilAlt, FaTrash } from "react-icons/fa";
+import { PuffLoader } from "react-spinners";
 
 export default function PinPage() {
   const [contributors, setContributors] = useState([]);
@@ -128,7 +129,11 @@ export default function PinPage() {
         Website <span className="text-green-500">Contributors</span>
       </h1>
 
-      {isLoading && <p className="text-slate-100">Loading...</p>}
+      {isLoading && (
+        <div className="flex justify-center items-center min-h-screen">
+          <PuffLoader color="#00c853" size={100} />
+        </div>
+      )}
       {error && <p className="text-red-500">{error}</p>}
 
       {!isLoading && !error && contributors.length === 0 && (
@@ -185,81 +190,83 @@ export default function PinPage() {
         {!isLoading &&
           !error &&
           [...contributors]
-          .sort((a,b) => a.name.localeCompare(b.name))
-          .map((contributor) => (
-            <div
-              className="relative flex flex-col items-center"
-              key={contributor._id}
-            >
-              {/* PinContainer */}
-              <PinContainer title="Visit GitHub" href={contributor.githubUrl}>
-                <div className="flex flex-col p-4 tracking-tight text-slate-100/50 w-[20rem] h-[20rem] relative bg-gray-900 rounded-md">
-                  {/* Image wrapper */}
-                  <div className="relative h-full w-full">
-                    <Image
-                      src={contributor.imageUrl}
-                      alt={contributor.name}
-                      layout="fill"
-                      objectFit="cover"
-                      className="rounded-md"
-                    />
-                    {/* Overlay description */}
-                    <div className="absolute bottom-0 left-0 w-full p-4 text-left bg-gradient-to-t from-black/60 to-transparent z-10">
-                      <h3 className="font-bold text-base text-slate-100">
-                        {contributor.name}
-                      </h3>
+            .sort((a, b) => a.name.localeCompare(b.name))
+            .map((contributor) => (
+              <div
+                className="relative flex flex-col items-center"
+                key={contributor._id}
+              >
+                {/* PinContainer */}
+                <PinContainer title="Visit GitHub" href={contributor.githubUrl}>
+                  <div className="flex flex-col p-4 tracking-tight text-slate-100/50 w-[20rem] h-[20rem] relative bg-gray-900 rounded-md">
+                    {/* Image wrapper */}
+                    <div className="relative h-full w-full">
+                      <Image
+                        src={contributor.imageUrl}
+                        alt={contributor.name}
+                        layout="fill"
+                        objectFit="cover"
+                        className="rounded-md"
+                      />
+                      {/* Overlay description */}
+                      <div className="absolute bottom-0 left-0 w-full p-4 text-left bg-gradient-to-t from-black/60 to-transparent z-10">
+                        <h3 className="font-bold text-base text-slate-100">
+                          {contributor.name}
+                        </h3>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </PinContainer>
+                </PinContainer>
 
-              {/* Edit and Delete Buttons */}
-              <div
-                className={`flex justify-center space-x-4 mt-9 ${
-                  showEditIcons ? "opacity-100 visible" : "opacity-0 invisible"
-                } `}
-              >
-                <button
-                  className="bg-blue-600 text-white rounded-full p-2 hover:bg-blue-500 transition"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    console.log("Edit clicked!");
-                    handleEdit(contributor);
-                  }}
-                >
-                  <FaPencilAlt className="text-white" size={20} />
-                </button>
-                <button
-                  className="bg-red-600 text-white rounded-full p-2 hover:bg-red-500 transition"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    console.log("Delete clicked!");
-                    handleDelete(contributor._id);
-                  }}
+                {/* Edit and Delete Buttons */}
+                <div
+                  className={`flex justify-center space-x-4 mt-9 ${
+                    showEditIcons
+                      ? "opacity-100 visible"
+                      : "opacity-0 invisible"
+                  } `}
                 >
-                  <FaTrash className="text-white" size={20} />
-                </button>
+                  <button
+                    className="bg-blue-600 text-white rounded-full p-2 hover:bg-blue-500 transition"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      console.log("Edit clicked!");
+                      handleEdit(contributor);
+                    }}
+                  >
+                    <FaPencilAlt className="text-white" size={20} />
+                  </button>
+                  <button
+                    className="bg-red-600 text-white rounded-full p-2 hover:bg-red-500 transition"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      console.log("Delete clicked!");
+                      handleDelete(contributor._id);
+                    }}
+                  >
+                    <FaTrash className="text-white" size={20} />
+                  </button>
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
       </div>
 
       {isAdmin && (
-      <div className="w-full flex justify-center mt-10">
-        <button
-          className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-500 transition"
-          onClick={() => router.push("/Credits/addcredit")}
-        >
-          Add Contributor
-        </button>
+        <div className="w-full flex justify-center mt-10">
+          <button
+            className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-500 transition"
+            onClick={() => router.push("/Credits/addcredit")}
+          >
+            Add Contributor
+          </button>
 
-        <button
-          className="bg-white text-green-600 px-4 py-2 rounded hover:bg-gray-500 transition ml-4"
-          onClick={toggleEditIcons}
-        >
-          Edit
-        </button>
-      </div>
+          <button
+            className="bg-white text-green-600 px-4 py-2 rounded hover:bg-gray-500 transition ml-4"
+            onClick={toggleEditIcons}
+          >
+            Edit
+          </button>
+        </div>
       )}
     </div>
   );
diff --git a/components/ContributorsBtn.tsx b/components/ContributorsBtn.tsx
index f2600d5..3749235 100644
--- a/components/ContributorsBtn.tsx
+++ b/components/ContributorsBtn.tsx
@@ -6,22 +6,25 @@ export const ContributorsBtn = () => {
   const router = useRouter();
 
   const handleClick = async () => {
-    try {
-      const response = await fetch('/api/credits/newCollaborator', {
-        method: 'POST',
+  
+    fetch('/api/credits/newCollaborator', {
+      method: 'POST',
+    })
+      .then(async (response) => {
+        if (!response.ok) {
+          throw new Error('Failed to fetch data from GitHub API');
+        }
+      })
+      .catch((err: any) => {
+        console.error('Error posting contributor:', err.message);
       });
-      if (!response.ok) {
-        throw new Error('Failed to fetch data from GitHub API');
-      }
-      router.push('/Credits');
-    } catch (err:any) {
-      console.error('Error posting contributor:', err.message);
-    }
+  
+    router.push('/Credits');
   };
 
   return (
     <div>
-      <button type='button' onClick={handleClick} className="btn-sm px-4 py-2 text-l font-bold bg-gradient-to-tr from-gray-900 to-indigo-800 mx-3 rounded-xl inline-block">
+      <button type='button' onClick={handleClick} className="btn-sm px-4 py-2 text-l font-bold bg-gradient-to-tr from-gray-900 to-indigo-800 hover:from-indigo-800 hover:to-gray-900 active:from-gray-900 active:to-indigo-900 mx-3 rounded-xl inline-block">
         View Credits
       </button>
     </div>