diff --git a/src/components/AccountSwitcher/AccountInfo.tsx b/src/components/AccountSwitcher/AccountInfo.tsx
index d280e91..da7f10b 100644
--- a/src/components/AccountSwitcher/AccountInfo.tsx
+++ b/src/components/AccountSwitcher/AccountInfo.tsx
@@ -1,25 +1,25 @@
-import React from "react";
-import { useClientStore } from "@/stores/clientStore";
-import { LogOut } from "lucide-react";
-import { useAccount } from "@/hooks/useAccount";
-import { CurrencyIcon } from "@/components/Currency/CurrencyIcon";
-import { useLogout } from "@/hooks/useLogout";
-import * as Popover from "@radix-ui/react-popover";
+import React from "react"
+import { useClientStore } from "@/stores/clientStore"
+import { LogOut } from "lucide-react"
+import { useAccount } from "@/hooks/useAccount"
+import { CurrencyIcon } from "@/components/Currency/CurrencyIcon"
+import { useLogout } from "@/hooks/useLogout"
+import * as Popover from "@radix-ui/react-popover"
 
 interface AccountInfoProps {
-  onSelect: () => void;
+  onSelect: () => void
 }
 
 export const AccountInfo: React.FC<AccountInfoProps> = ({ onSelect }) => {
-  const { balance, currency, setBalance } = useClientStore();
+  const { balance, currency, setBalance } = useClientStore()
   const {
     accountType,
     selectedAccountId,
     switchAccountType,
     selectAccount,
     getAvailableAccounts,
-  } = useAccount();
-  const logout = useLogout();
+  } = useAccount()
+  const logout = useLogout()
 
   return (
     <div className="w-full min-w-[280px]">
@@ -57,12 +57,15 @@ export const AccountInfo: React.FC<AccountInfoProps> = ({ onSelect }) => {
                     selectedAccountId === account.id ? "bg-gray-200" : ""
                   }`}
                   onClick={() => {
-                    selectAccount(account.id);
-                    onSelect();
+                    selectAccount(account.id)
+                    onSelect()
                   }}
                 >
                   <div className="w-8 h-8 flex items-center justify-center mr-2">
-                    <CurrencyIcon currency={account.id} isVirtual={account.isDemo} />
+                    <CurrencyIcon
+                      currency={account.id}
+                      isVirtual={account.isDemo}
+                    />
                   </div>
                   <div className="flex-1 text-left">
                     <p className="text-sm font-semibold">
@@ -74,17 +77,20 @@ export const AccountInfo: React.FC<AccountInfoProps> = ({ onSelect }) => {
                   </div>
                   <div className="flex items-center gap-2">
                     {selectedAccountId === account.id && account.isDemo ? (
-                      <button 
+                      <button
                         className="px-2 py-1 text-xs border border-gray-400 rounded hover:bg-gray-300"
                         onClick={(e) => {
-                          e.stopPropagation();
-                          setBalance("10000", "USD");
+                          e.stopPropagation()
+                          setBalance("10000", "USD")
                         }}
                       >
                         Reset balance
                       </button>
                     ) : (
-                      <p className="text-sm">{balance} {account.currency}</p>
+                      <p className="text-sm">
+                        {accountType === "demo" ? "10,000" : balance}{" "}
+                        {account.currency}
+                      </p>
                     )}
                   </div>
                 </button>
@@ -97,7 +103,7 @@ export const AccountInfo: React.FC<AccountInfoProps> = ({ onSelect }) => {
             <div className="flex items-center gap-2 justify-between pb-2">
               <p className="text-sm text-gray-500">Total assets</p>
               <p className="text-sm">
-                {balance} {currency}
+                {accountType === "demo" ? "10,000" : balance} {currency}
               </p>
             </div>
             <p className="text-xs text-gray-400">
@@ -118,5 +124,5 @@ export const AccountInfo: React.FC<AccountInfoProps> = ({ onSelect }) => {
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
diff --git a/src/components/AccountSwitcher/AccountSwitcher.tsx b/src/components/AccountSwitcher/AccountSwitcher.tsx
index 69d6c23..be67610 100644
--- a/src/components/AccountSwitcher/AccountSwitcher.tsx
+++ b/src/components/AccountSwitcher/AccountSwitcher.tsx
@@ -1,16 +1,20 @@
-import React, { useState } from 'react';
-import { ChevronDown, ChevronUp } from 'lucide-react';
-import { useClientStore } from '@/stores/clientStore';
-import { useAccount } from '@/hooks/useAccount';
-import { AccountPopover, AccountPopoverContent, AccountPopoverTrigger } from '@/components/ui/account-popover';
-import { AccountInfo } from './AccountInfo';
-import { useOrientationStore } from '@/stores/orientationStore';
+import React, { useState } from "react"
+import { ChevronDown, ChevronUp } from "lucide-react"
+import { useClientStore } from "@/stores/clientStore"
+import { useAccount } from "@/hooks/useAccount"
+import {
+  AccountPopover,
+  AccountPopoverContent,
+  AccountPopoverTrigger,
+} from "@/components/ui/account-popover"
+import { AccountInfo } from "./AccountInfo"
+import { useOrientationStore } from "@/stores/orientationStore"
 
 export const AccountSwitcher: React.FC = () => {
-  const { balance } = useClientStore();
-  const { selectedAccount } = useAccount();
-  const { isLandscape } = useOrientationStore();
-  const [isOpen, setIsOpen] = useState(false);
+  const { balance } = useClientStore()
+  const { selectedAccount } = useAccount()
+  const { isLandscape } = useOrientationStore()
+  const [isOpen, setIsOpen] = useState(false)
 
   return (
     <AccountPopover onOpenChange={setIsOpen}>
@@ -18,31 +22,48 @@ export const AccountSwitcher: React.FC = () => {
         <button
           data-testid="balance-display"
           className={`flex flex-col relative ${
-            isLandscape ? 'items-end' : 'items-start'
+            isLandscape ? "items-end" : "items-start"
           }`}
         >
           <div className="flex items-center gap-1">
-            <span className={`text-sm font-semibold ${selectedAccount?.isDemo ? 'text-orange-500' : 'text-color-solid-glacier-700'}`}>
-              {selectedAccount?.isDemo ? 'Demo' : 'Real'}
+            <span
+              className={`text-sm font-semibold ${
+                selectedAccount?.isDemo
+                  ? "text-orange-500"
+                  : "text-color-solid-glacier-700"
+              }`}
+            >
+              {selectedAccount?.isDemo ? "Demo" : "Real"}
             </span>
             {isOpen ? (
-              <ChevronUp className={`h-4 w-4 ${selectedAccount?.isDemo ? 'text-orange-500' : 'text-color-solid-glacier-700'}`} />
+              <ChevronUp
+                className={`h-4 w-4 ${
+                  selectedAccount?.isDemo
+                    ? "text-orange-500"
+                    : "text-color-solid-glacier-700"
+                }`}
+              />
             ) : (
-              <ChevronDown className={`h-4 w-4 ${selectedAccount?.isDemo ? 'text-orange-500' : 'text-color-solid-glacier-700'}`} />
+              <ChevronDown
+                className={`h-4 w-4 ${
+                  selectedAccount?.isDemo
+                    ? "text-orange-500"
+                    : "text-color-solid-glacier-700"
+                }`}
+              />
             )}
           </div>
           <span className="text-sm font-semibold align-start">
-            {balance} {selectedAccount?.currency || 'USD'}
+            {selectedAccount?.isDemo ? "10,000" : balance}{" "}
+            {selectedAccount?.currency || "USD"}
           </span>
         </button>
       </AccountPopoverTrigger>
-      <AccountPopoverContent
-        align={isLandscape ? "end" : "start"}
-      >
+      <AccountPopoverContent align={isLandscape ? "end" : "start"}>
         <AccountInfo onSelect={() => setIsOpen(false)} />
       </AccountPopoverContent>
     </AccountPopover>
-  );
-};
+  )
+}
 
-export default AccountSwitcher;
+export default AccountSwitcher
diff --git a/src/screens/TradePage/components/TradeFormController.tsx b/src/screens/TradePage/components/TradeFormController.tsx
index 1fdf73f..ed134a9 100644
--- a/src/screens/TradePage/components/TradeFormController.tsx
+++ b/src/screens/TradePage/components/TradeFormController.tsx
@@ -158,7 +158,7 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
     const initialStates: ButtonStates = {}
     tradeTypeConfigs[trade_type].buttons.forEach((button) => {
       initialStates[button.actionName] = {
-        loading: true,
+        loading: false,
         error: null,
         payout: buttonStates[button.actionName]?.payout || 0,
         reconnecting: false,
@@ -192,10 +192,7 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
           : ""
       }`}
     >
-      <div
-        className={isLandscape ? "py-2" : "pt-1 px-4"}
-        id="how-to-trade"
-      >
+      <div className={isLandscape ? "py-2" : "pt-1 px-4"} id="how-to-trade">
         <HowToTrade />
       </div>
       {isLandscape ? (
@@ -277,17 +274,20 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
                     buttonStates[button.actionName]?.loading
                       ? "Loading..."
                       : `${
-                          buttonStates[button.actionName]?.payout || 0
+                          // added for demo proposes will change it to 0 once api is connected
+                          buttonStates[button.actionName]?.payout || 10
                         } ${currency}`
                   }
                   title_position={button.position}
                   disabled={
-                    buttonStates[button.actionName]?.loading ||
-                    buttonStates[button.actionName]?.error !== null
+                    buttonStates[button.actionName]?.loading
+                    // Commenting it as api is not working we'll enable it once api is working
+                    // buttonStates[button.actionName]?.error !== null
                   }
                   loading={
-                    buttonStates[button.actionName]?.loading ||
-                    buttonStates[button.actionName]?.reconnecting
+                    buttonStates[button.actionName]?.loading
+                    // Commenting it as api is not working we'll enable it once api is working
+                    // buttonStates[button.actionName]?.reconnecting
                   }
                   error={buttonStates[button.actionName]?.error}
                   onClick={() => {
@@ -367,17 +367,21 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
                     buttonStates[button.actionName]?.loading
                       ? "Loading..."
                       : `${
-                          buttonStates[button.actionName]?.payout || 0
+                          buttonStates[button.actionName]?.payout || 10
                         } ${currency}`
                   }
                   title_position={button.position}
                   disabled={
-                    buttonStates[button.actionName]?.loading ||
-                    buttonStates[button.actionName]?.error !== null
+                    buttonStates[button.actionName]?.loading
+                    // ||
+                    // Commenting it as api is not working we'll enable it once api is working
+                    // buttonStates[button.actionName]?.error !== null
                   }
                   loading={
-                    buttonStates[button.actionName]?.loading ||
-                    buttonStates[button.actionName]?.reconnecting
+                    buttonStates[button.actionName]?.loading
+                    // ||
+                    // Commenting it as api is not working we'll enable it once api is working
+                    // buttonStates[button.actionName]?.reconnecting
                   }
                   error={buttonStates[button.actionName]?.error}
                   onClick={() => {