diff --git a/scaffolds/nextjs-universal-wallet/template/package.json b/scaffolds/nextjs-universal-wallet/template/package.json
index 4702fc9..bfbd8bb 100644
--- a/scaffolds/nextjs-universal-wallet/template/package.json
+++ b/scaffolds/nextjs-universal-wallet/template/package.json
@@ -13,12 +13,12 @@
     "@types/react": "18.0.35",
     "@types/react-dom": "18.0.11",
     "eslint-config-next": "13.3.0",
-    "magic-sdk": "^16.2.0",
+    "magic-sdk": "^21.0.0",
     "next": "13.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "5.0.4",
-    "web3": "^1.9.0"
+    "web3": "^4.0.2"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.15",
diff --git a/scaffolds/nextjs-universal-wallet/template/src/components/magic/MagicProvider.tsx b/scaffolds/nextjs-universal-wallet/template/src/components/magic/MagicProvider.tsx
index 46a7e28..7c31223 100644
--- a/scaffolds/nextjs-universal-wallet/template/src/components/magic/MagicProvider.tsx
+++ b/scaffolds/nextjs-universal-wallet/template/src/components/magic/MagicProvider.tsx
@@ -1,11 +1,11 @@
 import { createContext, useContext, useEffect, useState } from 'react';
 import { Magic } from 'magic-sdk';
 import { getChainId, getNetworkUrl } from '../../utils/networks';
-import Web3 from 'web3';
+const { Web3 } = require('web3');
 
 export type MagicContextType = {
   magic: Magic | null;
-  web3: Web3 | null;
+  web3: typeof Web3 | null;
 };
 
 const MagicContext = createContext<MagicContextType>({
@@ -17,7 +17,7 @@ export const useMagicContext = () => useContext(MagicContext);
 
 const MagicProvider = ({ children }: { children: React.ReactNode }) => {
   const [magicInstance, setMagicInstance] = useState<Magic | null>(null);
-  const [web3Instance, setWeb3Instance] = useState<Web3 | null>(null);
+  const [web3Instance, setWeb3Instance] = useState<typeof Web3 | null>(null);
 
   useEffect(() => {
     if (process.env.NEXT_PUBLIC_MAGIC_API_KEY) {
diff --git a/scaffolds/nextjs-universal-wallet/template/src/components/magic/cards/UserInfoCard.tsx b/scaffolds/nextjs-universal-wallet/template/src/components/magic/cards/UserInfoCard.tsx
index dc12277..48960a9 100644
--- a/scaffolds/nextjs-universal-wallet/template/src/components/magic/cards/UserInfoCard.tsx
+++ b/scaffolds/nextjs-universal-wallet/template/src/components/magic/cards/UserInfoCard.tsx
@@ -26,7 +26,7 @@ const UserInfo = ({ setAccount }: Props) => {
   const getBalance = useCallback(async () => {
     if (publicAddress && web3) {
       const balance = await web3.eth.getBalance(publicAddress);
-      setBalance(web3.utils.fromWei(balance));
+      setBalance(web3.utils.fromWei(balance, 'ether'));
       console.log('BALANCE: ', balance);
     }
   }, [web3, publicAddress]);