diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5b0aa49..235fb76 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -23,6 +23,7 @@
         "react-countup": "^6.5.3",
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.26.1",
+        "react-spinners": "^0.15.0",
         "three": "^0.168.0"
       },
       "devDependencies": {
@@ -4843,6 +4844,16 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.15.0.tgz",
+      "integrity": "sha512-ZO3/fNB9Qc+kgpG3SfdlMnvTX6LtLmTnOogb3W6sXIaU/kZ1ydEViPfZ06kSOaEsor58C/tzXw2wROGQu3X2pA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 7a9f85d..3b4d775 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -25,6 +25,7 @@
     "react-countup": "^6.5.3",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.1",
+    "react-spinners": "^0.15.0",
     "three": "^0.168.0"
   },
   "devDependencies": {
diff --git a/frontend/src/components/HeroSection.jsx b/frontend/src/components/HeroSection.jsx
index 89707c9..058aa19 100644
--- a/frontend/src/components/HeroSection.jsx
+++ b/frontend/src/components/HeroSection.jsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react'
 import * as THREE from 'three'
+import { Link } from 'react-router-dom'
 
 const HeroSection = () => {
     const canvasRef = useRef(null)
@@ -35,9 +36,12 @@ const HeroSection = () => {
                     <br />
                     from top creators around the world.
                 </p>
+                <Link to ="/explore" >
                 <button className="bg-gradient-to-r from-blue-400 to-purple-500 text-white rounded-full px-8 py-3 text-lg hover:opacity-90 transition-opacity">
                     Get Started
                 </button>
+                </Link>
+                
             </div>
         </div>
     )
diff --git a/frontend/src/components/InfoCards.jsx b/frontend/src/components/InfoCards.jsx
index 6f1b902..5e54e92 100644
--- a/frontend/src/components/InfoCards.jsx
+++ b/frontend/src/components/InfoCards.jsx
@@ -45,7 +45,7 @@ const InfoCards = () => {
                 'Understand the process of buying, selling, and creating NFTs with our easy-to-follow guide.',
             buttonText: 'Get Started',
             badge: 'Guide',
-            link:'/how-it-works',
+            link:'/about',
         },
     ]
 
diff --git a/frontend/src/pages/CreatorsPage.jsx b/frontend/src/pages/CreatorsPage.jsx
index 133e487..3e18674 100644
--- a/frontend/src/pages/CreatorsPage.jsx
+++ b/frontend/src/pages/CreatorsPage.jsx
@@ -3,6 +3,8 @@ import './CreatorsPage.css'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import CountUp from 'react-countup'
+import { HashLoader } from 'react-spinners'
+
 const CreatorsPage = () => {
     const [contributors, setContributors] = useState([])
     const [repoStats, setRepoStats] = useState({})
@@ -90,38 +92,45 @@ const CreatorsPage = () => {
     // Render contributors
     const renderContributors = () => {
         return (
-            <div
-                className="contributor-contributors-grid"
-                id="contributorsGrid"
-            >
-                {contributors.map((contributor) => (
+            // adding the preloader
+            
+
                     <div
-                        className="contributor-contributor-card"
-                        key={contributor.login}
+                    className="contributor-contributors-grid"
+                    id="contributorsGrid"
                     >
-                        <img
-                            src={contributor.avatar_url}
-                            alt={contributor.login}
-                        />
-                        <h3>{contributor.login}</h3>
-                        <p>{contributor.type}</p>
-                        <div className="contributor-contributions">
-                            {contributor.contributions} contributions
-                        </div>
-                        <div className="contributor-footer">
-                            <a
-                                href={contributor.html_url}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                {getIcon('external-link')}
-                                <FontAwesomeIcon icon={faGithub} />
-                            </a>
-                            {getIcon('github')}
+                    {contributors.map((contributor) => (
+                        <div
+                            className="contributor-contributor-card"
+                            key={contributor.login}
+                        >
+                            <img
+                                src={contributor.avatar_url}
+                                alt={contributor.login}
+                            />
+                            <h3>{contributor.login}</h3>
+                            <p>{contributor.type}</p>
+                            <div className="contributor-contributions">
+                                {contributor.contributions} contributions
+                            </div>
+                            <div className="contributor-footer">
+                                <a
+                                    href={contributor.html_url}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                >
+                                    {getIcon('external-link')}
+                                    <FontAwesomeIcon icon={faGithub} />
+                                </a>
+                                {getIcon('github')}
+                            </div>
                         </div>
+                    ))}
                     </div>
-                ))}
-            </div>
+                
+
+            
+            
         )
     }
 
@@ -138,7 +147,10 @@ const CreatorsPage = () => {
             <section className=" dark:bg-slate-900">
                 <div className="contributor-contributors">
                     {loading ? (
-                        <div id="loading" className="contributor-loading"></div>
+                        // <div id="loading" className="contributor-loading"></div>
+                        <div className="flex justify-center items-center min-h-screen">
+                        <HashLoader color={'#252550'} size={50} loading={loading} />
+                    </div>
                     ) : (
                         <>
                             <h2 className="dark:text-white">
diff --git a/frontend/src/pages/ExplorePage.jsx b/frontend/src/pages/ExplorePage.jsx
index 512a748..f8156a6 100644
--- a/frontend/src/pages/ExplorePage.jsx
+++ b/frontend/src/pages/ExplorePage.jsx
@@ -4,6 +4,7 @@ import NFTCard from '../components/NFTCard'
 import { connectWallet } from '../utils/ethereum'
 import { ethers } from 'ethers'
 import { useNavigate } from 'react-router-dom'
+import { HashLoader } from 'react-spinners';
 
 const ExplorePage = () => {
     const [nfts, setNfts] = useState([])
@@ -125,9 +126,13 @@ const ExplorePage = () => {
 
     if (loading) {
         return (
-            <div className="text-center py-10">
-                Loading NFTs... Please wait.
+            // <div className="text-center py-10">
+            //     Loading NFTs... Please wait.
+            // </div>
+            <div className="flex justify-center items-center min-h-screen">
+                <HashLoader color={"#252550"} size={50} loading={loading}  />
             </div>
+
         )
     }