diff --git a/components/Create/ui/SelectTokenModal.tsx b/components/Create/ui/SelectTokenModal.tsx
index 236f5c8..6eccf84 100644
--- a/components/Create/ui/SelectTokenModal.tsx
+++ b/components/Create/ui/SelectTokenModal.tsx
@@ -177,6 +177,7 @@ const SelectTokenModal: React.FC<SelectTokenModalProps> = ({
           <div
             ref={modalRef}
             className="w-full h-3/4 bg-white p-5 max-w-md mx-auto rounded-md shadow-lg"
+            style={{ maxHeight: "600px" }}
           >
             {/* Modal Header */}
             <div className="flex justify-between items-center mb-4">
diff --git a/components/Hodltoken/Hodltoken.tsx b/components/Hodltoken/Hodltoken.tsx
index 0b89a90..8008674 100644
--- a/components/Hodltoken/Hodltoken.tsx
+++ b/components/Hodltoken/Hodltoken.tsx
@@ -25,6 +25,7 @@ import { formatBigIntWithDecimalsRounded } from '@/common/utils';
 import MintingHodlAlph from '@/components/Hodlerg/HodlAlph/MintingHodlAlph';
 import BurningHodlAlph from '@/components/Hodlerg/HodlAlph/BurningHodlAlph';
 import { ALPH_NODE_URL } from '@/blockchain/alephium/constants';
+import NoData from './ui/NoData';
 
 interface IProps {
     network: string | null;
@@ -36,111 +37,49 @@ interface GameData {
     tvl: string;
 }
 
-interface HodlToken {
-    id: number;
-    contractId: string;
+interface TokenData {
+    bankFee: number;
+    baseToken: string;
     baseTokenId: string;
+    contractId: string;
     decimals: number;
-    baseToken: string;
+    gameData: {
+        currentPrice: string;
+        circulatingSupply: string;
+        tvl: string;
+    };
+    id: number;
     title: string;
-    bankFee: number;
-    gameData: GameData;
 }
 
-const tokenData = [
-    {
-        id: 1001,
-        baseToken: 'COMET',
-        title: 'hodlCOMET',
-        bankFee: 3,
-        gameData: {
-            currentPrice: 1,
-            circulatingSupply: 1,
-            tvl: 1
-        }
-    },
-    {
-        id: 1002,
-        baseToken: 'SigUSD',
-        title: 'hodlSigUSD',
-        bankFee: 4,
-        gameData: {
-            currentPrice: 1,
-            circulatingSupply: 1,
-            tvl: 1
-        }
-    },
-    {
-        id: 1003,
-        baseToken: 'SigUSD',
-        title: 'hodlSigUSD',
-        bankFee: 14,
-        gameData: {
-            currentPrice: 1,
-            circulatingSupply: 1,
-            tvl: 1
-        }
-    },
-    {
-        id: 1004,
-        baseToken: 'SPF',
-        title: 'hodlSPF',
-        bankFee: 2,
-        gameData: {
-            currentPrice: 1,
-            circulatingSupply: 1,
-            tvl: 1
-        }
-    },
-    {
-        id: 1005,
-        baseToken: 'SPF',
-        title: 'hodlSPF',
-        bankFee: 20,
-        gameData: {
-            currentPrice: 1,
-            circulatingSupply: 1,
-            tvl: 1
-        }
-    },
-    {
-        id: 1006,
-        baseToken: 'SPF',
-        title: 'hodlSPF',
-        bankFee: 7,
-        gameData: {
-            currentPrice: 1,
-            circulatingSupply: 1,
-            tvl: 1
-        }
-    },
-    {
-        id: 1007,
-        baseToken: 'SPF',
-        title: 'hodlSPF',
-        bankFee: 10,
-        gameData: {
-            currentPrice: 1,
-            circulatingSupply: 1,
-            tvl: 1
-        }
-    }
-    // Add more tokens if needed
-];
 
 const Hodltoken = (props: IProps) => {
     const { network } = props;
     const [searchQuery, setSearchQuery] = useState<string>('');
-    const [tokensList, setTokensList] = useState<HodlToken[]>([]);
+    const [tokensList, setTokensList] = useState<TokenData[]>([]);
+    const [displayList, setDisplayList] = useState<TokenData[]>([]);
     const [ascendingOrder, setAscendingOrder] = useState<boolean>(true);
+    const [loading, setLoading] = useState<boolean>(true);
     const { advancedSettings } = useAdvancedSettings();
 
-    // const sortTokens = () => {
-    //     const sortedTokens = [...tokenData]
-    //         .filter((token) => token.baseToken.toLowerCase().includes(searchQuery.toLowerCase()))
-    //         .sort((a, b) => (ascendingOrder ? a.bankFee - b.bankFee : b.bankFee - a.bankFee));
-    //     setTokensList(sortedTokens);
-    // };
+
+    const sortTokens = () => {
+        const sortedTokens = [...tokensList]
+            .filter((token) =>
+                token.baseToken.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                token.id.toString().toLowerCase().includes(searchQuery.toLowerCase())
+            )
+            .sort((a, b) => (ascendingOrder ? a.bankFee - b.bankFee : b.bankFee - a.bankFee));
+        setDisplayList(sortedTokens);
+    };
+
+    useEffect(() => {
+        if (tokensList.length > 0) {
+            setLoading(false);
+        }
+        sortTokens();
+    }, [tokensList, ascendingOrder, searchQuery]);
+
 
     useEffect(() => {
         // sortTokens();
@@ -234,72 +173,79 @@ const Hodltoken = (props: IProps) => {
 
     return (
         <div className="flex flex-col items-center">
-            {/*<TopSlider />*/}
-            {/*<div className="relative bg-gray-200 shadow-lg flex content-between items-center rounded-md w-[350px] lg:w-[800px]">*/}
-            {/*    <SearchBarHodl searchQuery={searchQuery} setSearchQuery={setSearchQuery} />*/}
-            {/*    <div*/}
-            {/*        onClick={() => setAscendingOrder(!ascendingOrder)}*/}
-            {/*        className="w-1/4 flex items-center justify-center cursor-pointer text-center text-xs lg:text-lg lg:font-bold"*/}
-            {/*    >*/}
-            {/*        Bank Fee*/}
-            {/*        <span className="pl-2">*/}
-            {/*            {ascendingOrder ?*/}
-            {/*                <Image alt='img' src={filter_icon_descend} className={commonStyle.tokenIconImg} height='20' width='20' /> :*/}
-            {/*                <Image alt='img' src={filter_icon} className={commonStyle.tokenIconImg} height='20' width='20' />}*/}
-            {/*        </span>*/}
-            {/*    </div>*/}
-            {/*</div>*/}
-
-            {tokensList.length === 0 ? (
+            {/* <TopSlider />*/}
+            {loading ? (
                 <LoadingPlaceHolder />
             ) : (
                 <>
-                    {tokensList.map(
-                        ({ id, baseToken, title, bankFee, gameData, contractId, baseTokenId, decimals }) => (
-                            <div key={id} className="max-w-l mx-auto font-inter my-10 mx-20">
-                                <div className="bg-gray-200 shadow-lg flex content-between rounded-md w-[350px] lg:w-[800px]  flex-col lg:flex-row p-2">
-                                    <div className="container mx-auto flex flex-col justify-between">
-                                        <div className="text-black mt-5 text-center text-2xl font-extrabold text-red-800">
-                                            {title} {bankFee}%
+                    <div className="relative bg-gray-200 shadow-lg flex content-between items-center rounded-md w-[350px] lg:w-[800px] mt-5">
+                        <SearchBarHodl searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
+                        <div
+                            onClick={() => setAscendingOrder(!ascendingOrder)}
+                            className="w-1/4 flex items-center justify-center cursor-pointer text-center text-xs lg:text-lg lg:font-bold"
+                        >
+                            Bank Fee
+                            <span className="pl-2">
+                                {ascendingOrder ?
+                                    <Image alt='img' src={filter_icon_descend} className={commonStyle.tokenIconImg} height='20' width='20' /> :
+                                    <Image alt='img' src={filter_icon} className={commonStyle.tokenIconImg} height='20' width='20' />}
+                            </span>
+                        </div>
+                    </div>
+
+
+                    {displayList.length === 0 ? (
+                        <NoData />
+                    ) : (
+                        <>
+                            {displayList.map(
+                                ({ id, baseToken, title, bankFee, gameData, contractId, baseTokenId, decimals }) => (
+                                    <div key={id} className="max-w-l mx-auto font-inter my-10 mx-20">
+                                        <div className="bg-gray-200 shadow-lg flex content-between rounded-md w-[350px] lg:w-[800px]  flex-col lg:flex-row p-2">
+                                            <div className="container mx-auto flex flex-col justify-between">
+                                                <div className="text-black mt-5 text-center text-2xl font-extrabold text-red-800">
+                                                    {title} {bankFee}%
+                                                </div>
+                                                <HeaderCardsV2
+                                                    title="Price"
+                                                    amount={parseFloat(gameData.currentPrice)}
+                                                    token={baseToken}
+                                                />
+                                                <HeaderCardsV2
+                                                    title="Supply"
+                                                    amount={parseFloat(gameData.circulatingSupply)}
+                                                    token={`hodl${baseToken}`}
+                                                />
+                                                <HeaderCardsV2
+                                                    title="Reserve"
+                                                    amount={parseFloat(gameData.tvl)}
+                                                    token={baseToken}
+                                                />
+                                            </div>
+                                            <div className="container mx-auto border lg:border-l-gray-300 flex flex-col items-center justify-around">
+                                                <MintingHodlAlph
+                                                    network={network}
+                                                    percent={bankFee.toString()}
+                                                    baseTokenTicker={baseToken}
+                                                    baseTokenId={baseTokenId}
+                                                    contractId={contractId}
+                                                    decimals={decimals}
+                                                />
+                                                <BurningHodlAlph
+                                                    network={network}
+                                                    percent={bankFee.toString()}
+                                                    baseTokenTicker={baseToken}
+                                                    baseTokenId={baseTokenId}
+                                                    contractId={contractId}
+                                                    decimals={decimals}
+                                                />
+                                                {advancedSettings && <DepositingHoldTOKEN token={baseToken} />}
+                                            </div>
                                         </div>
-                                        <HeaderCardsV2
-                                            title="Price"
-                                            amount={parseFloat(gameData.currentPrice)}
-                                            token={baseToken}
-                                        />
-                                        <HeaderCardsV2
-                                            title="Supply"
-                                            amount={parseFloat(gameData.circulatingSupply)}
-                                            token={`hodl${baseToken}`}
-                                        />
-                                        <HeaderCardsV2
-                                            title="Reserve"
-                                            amount={parseFloat(gameData.tvl)}
-                                            token={baseToken}
-                                        />
-                                    </div>
-                                    <div className="container mx-auto border lg:border-l-gray-300 flex flex-col items-center justify-around">
-                                        <MintingHodlAlph
-                                            network={network}
-                                            percent={bankFee.toString()}
-                                            baseTokenTicker={baseToken}
-                                            baseTokenId={baseTokenId}
-                                            contractId={contractId}
-                                            decimals={decimals}
-                                        />
-                                        <BurningHodlAlph
-                                            network={network}
-                                            percent={bankFee.toString()}
-                                            baseTokenTicker={baseToken}
-                                            baseTokenId={baseTokenId}
-                                            contractId={contractId}
-                                            decimals={decimals}
-                                        />
-                                        {advancedSettings && <DepositingHoldTOKEN token={baseToken} />}
                                     </div>
-                                </div>
-                            </div>
-                        )
+                                )
+                            )}
+                        </>
                     )}
                 </>
             )}
diff --git a/components/Hodltoken/ui/NoData.tsx b/components/Hodltoken/ui/NoData.tsx
new file mode 100644
index 0000000..3a37d37
--- /dev/null
+++ b/components/Hodltoken/ui/NoData.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const NoData = () => {
+    return (
+        <div className="w-full h-[60vh] flex items-center justify-center">
+            No Data
+        </div>
+    )
+}
+
+export default NoData;
diff --git a/components/Hodltoken/ui/SearchBarHodl.tsx b/components/Hodltoken/ui/SearchBarHodl.tsx
index 8d16e2f..60808b1 100644
--- a/components/Hodltoken/ui/SearchBarHodl.tsx
+++ b/components/Hodltoken/ui/SearchBarHodl.tsx
@@ -14,7 +14,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ searchQuery, setSearchQuery }) =>
     <div className="relative w-3/4">
       <input
         type="text"
-        placeholder="Search"
+        placeholder="Search by Title or by Id"
         value={searchQuery}
         onChange={handleChange}
         className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-red-600"
diff --git a/components/Loader.tsx b/components/Loader.tsx
index 1fda7e5..59bdb9f 100644
--- a/components/Loader.tsx
+++ b/components/Loader.tsx
@@ -4,7 +4,7 @@ const Loader = () => {
   return (
     <>
       <div className="h-screen flex items-center justify-center">
-        <button
+        {/* <button
           disabled
           type="button"
           className="text-white bg-primary  font-medium rounded text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center"
@@ -27,7 +27,17 @@ const Loader = () => {
             />
           </svg>
           Loading...
-        </button>
+        </button> */}
+        <section className="loading">
+          <div className="lds-css ng-scope">
+              <div className="lds-cube">
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+              </div>
+          </div>
+        </section>
       </div>
     </>
   );
diff --git a/components/shared/LoadingPlaceHolder.tsx b/components/shared/LoadingPlaceHolder.tsx
index 84168bc..38f7dad 100644
--- a/components/shared/LoadingPlaceHolder.tsx
+++ b/components/shared/LoadingPlaceHolder.tsx
@@ -3,7 +3,17 @@ import React from 'react'
 const LoadingPlaceHolder = () => {
     return (
         <div className="w-full h-[60vh] flex items-center justify-center">
-            <button
+            <section className="loading">
+                <div className="lds-css ng-scope">
+                    <div className="lds-cube">
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    </div>
+                </div>
+                </section>
+            {/* <button
                 disabled
                 type="button"
                 className="text-white bg-primary  font-medium rounded text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center"
@@ -26,9 +36,9 @@ const LoadingPlaceHolder = () => {
                     />
                 </svg>
                 Loading...
-            </button>
+            </button> */}
         </div>
     )
 }
 
-export default LoadingPlaceHolder
\ No newline at end of file
+export default LoadingPlaceHolder
diff --git a/styles/style.css b/styles/style.css
index afe3623..d423021 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -212,3 +212,78 @@ input[type='number'] {
     overflow: hidden !important;
   }
 }
+
+.loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  min-width: 100%;
+  min-height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index:10000 !important;
+}
+.loading .lds-cube {
+  position: relative;
+}
+.loading .lds-cube div {
+  position: absolute;
+  width: 80px;
+  height: 80px;
+  top: 10px;
+  left: 10px;
+  background: #fc4309;
+  -webkit-animation: lds-cube 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+  animation: lds-cube 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+.loading .lds-cube div:nth-child(2) {
+  top: 10px;
+  left: 110px;
+  background: #ff765c;
+  -webkit-animation-delay: -0.2s;
+  animation-delay: -0.2s;
+}
+.loading .lds-cube div:nth-child(3) {
+  top: 110px;
+  left: 110px;
+  background: #ff9900;
+  -webkit-animation-delay: 0s;
+  animation-delay: 0s;
+}
+.loading .lds-cube div:nth-child(4) {
+  top: 110px;
+  left: 10px;
+  background: #ffb646;
+  -webkit-animation-delay: -0.1s;
+  animation-delay: -0.1s;
+}
+.loading .lds-cube {
+  width: 200px !important;
+  height: 200px !important;
+  -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
+  transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
+}
+@keyframes lds-cube {
+  0% {
+    -webkit-transform: scale(1.5);
+    transform: scale(1.5);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@-webkit-keyframes lds-cube {
+  0% {
+    -webkit-transform: scale(1.5);
+    transform: scale(1.5);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+