diff --git a/components/BadgeLoadingModal.tsx b/components/BadgeLoadingModal.tsx
new file mode 100644
index 0000000..6c295b7
--- /dev/null
+++ b/components/BadgeLoadingModal.tsx
@@ -0,0 +1,11 @@
+export const BadgeLoadingModal = () => {
+  return (
+    <div
+      className="flex overflow-hidden fixed top-0 right-0 bottom-0 left-0 z-50 flex-col justify-center items-center w-full h-screen bg-gray-900 opacity-80"
+      style={{ margin: 0 }}
+    >
+      <img alt="Pixel Logo" className="mb-5 w-[50px] h-[50px] animate-spin" src="/icon.svg" />
+      <p className="w-1/3 font-bold text-center text-white">Uploading the image for badge creation, please wait...</p>
+    </div>
+  )
+}
diff --git a/contracts/badgeHub/contract.ts b/contracts/badgeHub/contract.ts
index 91dd77b..7d5a597 100644
--- a/contracts/badgeHub/contract.ts
+++ b/contracts/badgeHub/contract.ts
@@ -269,7 +269,7 @@ export const badgeHub = (client: SigningCosmWasmClient, txSigner: string): Badge
         contractAddress,
         toUtf8(Buffer.from(Buffer.from('fee_rate').toString('hex'), 'hex').toString()),
       )
-
+      console.log('Fee Rate Raw: ', feeRateRaw)
       const feeRate = JSON.parse(new TextDecoder().decode(feeRateRaw as Uint8Array))
       console.log('Fee Rate:', feeRate)
 
diff --git a/public/icon.svg b/public/icon.svg
new file mode 100644
index 0000000..d09b925
--- /dev/null
+++ b/public/icon.svg
@@ -0,0 +1 @@
+<svg fill="none" height="180" viewBox="0 0 180 180" width="180" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path clip-rule="evenodd" d="m90 172c45.287 0 82-36.713 82-82 0-45.2873-36.713-82-82-82-45.2873 0-82 36.7127-82 82 0 45.287 36.7127 82 82 82zm90-82c0 49.706-40.294 90-90 90-49.7056 0-90-40.294-90-90 0-49.7056 40.2944-90 90-90 49.706 0 90 40.2944 90 90z" fill-rule="evenodd"/><path d="m106.69 22.47 3.63 50.41 49.06 12.12-46.82 19.03 3.63 50.41-32.5599-38.65-46.82 19.04 26.69-42.92-32.57-38.65 49.06 12.13z"/></g></svg>
\ No newline at end of file