diff --git a/examples/chain-template/components/common/Radio/Radio.module.css b/examples/chain-template/components/common/Radio/Radio.module.css
index e8e19cda..8fa12ba1 100644
--- a/examples/chain-template/components/common/Radio/Radio.module.css
+++ b/examples/chain-template/components/common/Radio/Radio.module.css
@@ -16,7 +16,7 @@
 }
 
 .radioDark {
-  border-color: #323a42;
+  border-color: #6d7987;
 }
 
 .radioDark:checked {
diff --git a/examples/chain-template/components/common/Radio/Radio.tsx b/examples/chain-template/components/common/Radio/Radio.tsx
index edca8dc8..ebba2a22 100644
--- a/examples/chain-template/components/common/Radio/Radio.tsx
+++ b/examples/chain-template/components/common/Radio/Radio.tsx
@@ -19,7 +19,10 @@ export const Radio = ({
   onChange,
 }: RadioProps) => {
   const { theme } = useTheme();
-  const color = checked ? '$purple600' : '$blackAlpha600';
+
+  const checkedColor = theme === 'light' ? '$purple600' : '$purple400';
+  const textColor = checked ? checkedColor : '$blackAlpha600';
+  const borderColor = checked ? checkedColor : '$blackAlpha200';
 
   return (
     <Box
@@ -37,7 +40,7 @@ export const Radio = ({
       borderRadius="4px"
       borderWidth="1px"
       borderStyle="solid"
-      borderColor={checked ? '$purple600' : '$blackAlpha200'}
+      borderColor={borderColor}
       padding="10px"
     >
       <input
@@ -55,14 +58,14 @@ export const Radio = ({
           right: '6px',
         }}
       />
-      <Box color={color}>
+      <Box color={textColor}>
         {typeof icon === 'string' ? (
-          <Icon name={icon as IconName} color={color} size="$lg" />
+          <Icon name={icon as IconName} color={textColor} size="$lg" />
         ) : (
           icon
         )}
       </Box>
-      <Text color={color} fontSize="14px" fontWeight="500">
+      <Text color={textColor} fontSize="14px" fontWeight="500">
         {children}
       </Text>
     </Box>
diff --git a/examples/chain-template/components/contract/BackButton.tsx b/examples/chain-template/components/contract/BackButton.tsx
index dfcc3919..03f83193 100644
--- a/examples/chain-template/components/contract/BackButton.tsx
+++ b/examples/chain-template/components/contract/BackButton.tsx
@@ -10,6 +10,7 @@ export const BackButton = ({ onClick }: { onClick: () => void }) => {
       attributes={{ onClick }}
     >
       <Icon
+        color="$text"
         name="arrowRightLine"
         attributes={{ transform: 'rotate(180deg)' }}
       />
diff --git a/examples/chain-template/components/contract/InstantiateContract.tsx b/examples/chain-template/components/contract/InstantiateContract.tsx
index 919e858f..d2af0c0a 100644
--- a/examples/chain-template/components/contract/InstantiateContract.tsx
+++ b/examples/chain-template/components/contract/InstantiateContract.tsx
@@ -114,6 +114,8 @@ export const InstantiateContract = ({
     !canInstantiate ||
     !!adminInputErr;
 
+  const { isMobile } = useDetectBreakpoints();
+
   if (txResult) {
     const infoItems: TxInfoItem[] = [
       {
@@ -174,8 +176,6 @@ export const InstantiateContract = ({
     );
   }
 
-  const { isMobile } = useDetectBreakpoints();
-
   return (
     <Box
       display={show ? 'flex' : 'none'}
diff --git a/examples/chain-template/components/contract/WasmFileUploader.tsx b/examples/chain-template/components/contract/WasmFileUploader.tsx
index 709506ca..d07687bf 100644
--- a/examples/chain-template/components/contract/WasmFileUploader.tsx
+++ b/examples/chain-template/components/contract/WasmFileUploader.tsx
@@ -1,6 +1,12 @@
 import Image from 'next/image';
 import { useCallback, useMemo } from 'react';
-import { Box, Text } from '@interchain-ui/react';
+import {
+  Box,
+  Text,
+  useTheme,
+  useColorModeValue,
+  ThemeVariant,
+} from '@interchain-ui/react';
 import { HiOutlineTrash } from 'react-icons/hi';
 import { useDropzone } from 'react-dropzone';
 
@@ -8,16 +14,16 @@ import { bytesToKb } from '@/utils';
 
 const MAX_FILE_SIZE = 800_000;
 
-const defaultFileInfo = {
+const getDefaultFileInfo = (theme: ThemeVariant) => ({
   image: {
-    src: '/images/upload.svg',
+    src: theme === 'light' ? '/images/upload.svg' : '/images/upload-dark.svg',
     alt: 'upload',
     width: 80,
     height: 48,
   },
   title: 'Upload or drag .wasm file here',
   description: `Max file size: ${bytesToKb(MAX_FILE_SIZE)}KB`,
-};
+});
 
 type WasmFileUploaderProps = {
   file: File | null;
@@ -25,6 +31,8 @@ type WasmFileUploaderProps = {
 };
 
 export const WasmFileUploader = ({ file, setFile }: WasmFileUploaderProps) => {
+  const { theme } = useTheme();
+
   const onDrop = useCallback(
     (files: File[]) => {
       setFile(files[0]);
@@ -33,11 +41,14 @@ export const WasmFileUploader = ({ file, setFile }: WasmFileUploaderProps) => {
   );
 
   const fileInfo = useMemo(() => {
-    if (!file) return defaultFileInfo;
+    if (!file) return getDefaultFileInfo(theme);
 
     return {
       image: {
-        src: '/images/contract-file.svg',
+        src:
+          theme === 'light'
+            ? '/images/contract-file.svg'
+            : '/images/contract-file-dark.svg',
         alt: 'contract-file',
         width: 40,
         height: 54,
@@ -45,7 +56,7 @@ export const WasmFileUploader = ({ file, setFile }: WasmFileUploaderProps) => {
       title: file.name,
       description: `File size: ${bytesToKb(file.size)}KB`,
     };
-  }, [file]);
+  }, [file, theme]);
 
   const { getRootProps, getInputProps } = useDropzone({
     onDrop,
@@ -63,8 +74,8 @@ export const WasmFileUploader = ({ file, setFile }: WasmFileUploaderProps) => {
         borderRadius="8px"
         borderWidth="1px"
         borderStyle={file ? 'none' : 'dashed'}
-        borderColor="$purple600"
-        bg="$purple50"
+        borderColor={useColorModeValue('$purple600', '$purple400')}
+        bg={useColorModeValue('$purple50', '$purple900')}
         cursor={file ? 'auto' : 'pointer'}
         height="206px"
         position="relative"
diff --git a/examples/chain-template/config/theme.ts b/examples/chain-template/config/theme.ts
index 1b15014f..c712fa19 100644
--- a/examples/chain-template/config/theme.ts
+++ b/examples/chain-template/config/theme.ts
@@ -6,6 +6,7 @@ export const CustomTheme: Record<ThemeVariant, string> = {
 };
 
 export const lightColors: ThemeDef['vars']['colors'] = {
+  purple900: '#322F3C',
   purple600: '#7310FF',
   purple400: '#AB6FFF',
   purple200: '#E5D4FB',
@@ -42,6 +43,7 @@ export const lightColors: ThemeDef['vars']['colors'] = {
 };
 
 export const darkColors: ThemeDef['vars']['colors'] = {
+  purple900: '#322F3C',
   purple600: '#9042FE',
   purple400: '#AB6FFF',
   purple200: '#4D198F',
diff --git a/examples/chain-template/public/images/contract-file-dark.svg b/examples/chain-template/public/images/contract-file-dark.svg
new file mode 100644
index 00000000..bede0b52
--- /dev/null
+++ b/examples/chain-template/public/images/contract-file-dark.svg
@@ -0,0 +1,14 @@
+<svg width="42" height="55" viewBox="0 0 42 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="42" height="55" fill="#F5F5F5"/>
+<rect width="1440" height="1166" transform="translate(-819 -318)" fill="#232A31"/>
+<rect x="-259" y="-45" width="560" height="206" rx="8" fill="#322F3C"/>
+<g opacity="0.3">
+<path opacity="0.3" d="M34.8392 12.3156C33.4754 12.3143 32.168 11.7706 31.2037 10.8039C30.2394 9.83719 29.697 8.52642 29.6957 7.15929V4.64753e-07H6.71493C5.83324 -0.000328002 4.96007 0.173456 4.1454 0.511483C3.33072 0.849511 2.59046 1.34515 1.96689 1.97004C1.34332 2.59494 0.848665 3.33687 0.511179 4.15346C0.173693 4.97005 -6.08781e-08 5.84529 0 6.72919V47.307C-6.0878e-08 48.1909 0.173693 49.0662 0.511179 49.8827C0.848665 50.6993 1.34332 51.4413 1.96689 52.0662C2.59046 52.6911 3.33072 53.1867 4.1454 53.5247C4.96007 53.8627 5.83324 54.0365 6.71493 54.0362H34.3028C36.0831 54.0362 37.7904 53.3273 39.0492 52.0653C40.3081 50.8033 41.0153 49.0917 41.0153 47.307V12.3156H34.8392Z" fill="#AB6FFF"/>
+</g>
+<path d="M41.0153 12.3156H34.8392C33.4755 12.3143 32.168 11.7706 31.2037 10.8039C30.2394 9.83719 29.6971 8.52642 29.6957 7.15929V0L41.0153 12.3156Z" fill="#AB6FFF"/>
+<path d="M16.7424 38.5535H16.1911C14.9173 38.5535 13.9037 38.1793 13.1504 37.4308C12.3971 36.6822 12.0205 35.6711 12.0205 34.3975V30.3014C12.0205 28.741 11.401 27.9608 10.1622 27.9608V26.0504C11.3994 26.0504 12.0189 25.2701 12.0205 23.7097V19.6287C12.0205 18.3534 12.3971 17.3415 13.1504 16.5929C13.9037 15.8444 14.9173 15.471 16.1911 15.4727H16.7424V17.3882H16.3657C14.8691 17.3882 14.1208 18.2359 14.1208 19.9313V24.1124C14.1042 25.6128 13.5263 26.5613 12.3872 26.9581V27.0581C13.5097 27.4282 14.0875 28.3518 14.1208 29.8289V34.0799C14.1208 35.7754 14.8691 36.6231 16.3657 36.6231H16.7424V38.5535Z" fill="#AB6FFF"/>
+<path d="M24.2755 38.5541V36.6387H24.6521C26.1487 36.6387 26.8971 35.7909 26.8971 34.0955V29.8444C26.9303 28.3674 27.5073 27.4438 28.6281 27.0737V26.9737C27.4907 26.5719 26.9137 25.6234 26.8971 24.128V19.9469C26.8971 18.2515 26.1487 17.4037 24.6521 17.4037H24.2755V15.4883H24.8292C26.1013 15.4883 27.114 15.8617 27.8673 16.6086C28.6207 17.3554 28.9981 18.3673 28.9998 19.6443V23.7254C28.9998 25.2858 29.6192 26.066 30.8581 26.066V27.9814C29.6176 27.9814 28.9981 28.7617 28.9998 30.3221V34.4031C28.9998 35.6784 28.6223 36.6895 27.8673 37.4364C27.1124 38.1832 26.0997 38.5575 24.8292 38.5592L24.2755 38.5541Z" fill="#AB6FFF"/>
+<path d="M20.2994 21.5494C21.2127 21.5494 21.9531 20.8073 21.9531 19.8919C21.9531 18.9765 21.2127 18.2344 20.2994 18.2344C19.386 18.2344 18.6456 18.9765 18.6456 19.8919C18.6456 20.8073 19.386 21.5494 20.2994 21.5494Z" fill="#AB6FFF"/>
+<path d="M20.2994 28.6666C21.2127 28.6666 21.9531 27.9245 21.9531 27.0091C21.9531 26.0937 21.2127 25.3516 20.2994 25.3516C19.386 25.3516 18.6456 26.0937 18.6456 27.0091C18.6456 27.9245 19.386 28.6666 20.2994 28.6666Z" fill="#AB6FFF"/>
+<path d="M20.2994 35.7857C21.2127 35.7857 21.9531 35.0436 21.9531 34.1282C21.9531 33.2128 21.2127 32.4707 20.2994 32.4707C19.386 32.4707 18.6456 33.2128 18.6456 34.1282C18.6456 35.0436 19.386 35.7857 20.2994 35.7857Z" fill="#AB6FFF"/>
+</svg>
diff --git a/examples/chain-template/public/images/upload-dark.svg b/examples/chain-template/public/images/upload-dark.svg
new file mode 100644
index 00000000..be53406c
--- /dev/null
+++ b/examples/chain-template/public/images/upload-dark.svg
@@ -0,0 +1,4 @@
+<svg width="80" height="49" viewBox="0 0 80 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M41.9856 21.6599C41.7906 21.4507 41.559 21.2847 41.3041 21.1715C41.0492 21.0583 40.7759 21 40.5 21C40.2241 21 39.9508 21.0583 39.6959 21.1715C39.441 21.2847 39.2094 21.4507 39.0144 21.6599L30.6153 30.6593C30.4203 30.8683 30.2655 31.1165 30.1599 31.3896C30.0543 31.6627 30 31.9554 30 32.251C30 32.5467 30.0543 32.8394 30.1599 33.1125C30.2655 33.3856 30.4203 33.6338 30.6153 33.8428C31.0093 34.265 31.5437 34.5021 32.1009 34.5021C32.3768 34.5021 32.65 34.4439 32.9049 34.3308C33.1598 34.2177 33.3914 34.0518 33.5865 33.8428L38.4002 28.6822V45.7501C38.4002 46.3468 38.6215 46.9191 39.0152 47.341C39.409 47.763 39.9431 48 40.5 48C41.0569 48 41.591 47.763 41.9848 47.341C42.3785 46.9191 42.5998 46.3468 42.5998 45.7501V28.6822L47.4135 33.8428C47.6086 34.0518 47.8402 34.2177 48.0951 34.3308C48.35 34.4439 48.6232 34.5021 48.8991 34.5021C49.175 34.5021 49.4482 34.4439 49.7031 34.3308C49.958 34.2177 50.1896 34.0518 50.3847 33.8428C50.5797 33.6338 50.7345 33.3856 50.8401 33.1125C50.9457 32.8394 51 32.5467 51 32.251C51 31.9554 50.9457 31.6627 50.8401 31.3896C50.7345 31.1165 50.5797 30.8683 50.3847 30.6593L41.9856 21.6599Z" fill="#AB6FFF"/>
+<path d="M79.6798 31.6377C79.675 36.2205 77.8706 40.6143 74.6622 43.8554C71.4538 47.0965 67.1035 48.9203 62.5654 48.9268H12.7729C13.1792 47.3149 13.1393 45.6214 12.6577 44.0308H62.5654C65.8186 44.0308 68.9385 42.7257 71.2389 40.4027C73.5392 38.0797 74.8316 34.9291 74.8316 31.6438C74.8316 28.3586 73.5392 25.208 71.2389 22.885C68.9385 20.562 65.8186 19.2569 62.5654 19.2569C61.6791 19.2584 60.7954 19.3548 59.9292 19.5445L57.2505 20.1565L56.996 17.4025C56.7045 14.256 55.3316 11.3117 53.1154 9.08044C50.8993 6.84914 47.9796 5.47155 44.8629 5.18661C41.7462 4.90168 38.6291 5.72733 36.0521 7.52044C33.4752 9.31354 31.601 11.961 30.7547 15.0035L29.9547 17.8738L27.3185 16.5151C26.257 15.9658 25.081 15.6805 23.8883 15.6828C21.884 15.686 19.9627 16.4919 18.546 17.9238C17.1292 19.3556 16.3327 21.2965 16.3311 23.3206C16.3307 23.789 16.3753 24.2563 16.4644 24.716L17.0341 27.831L13.9009 27.6046C13.6706 27.6046 13.4827 27.6046 13.2949 27.6046C12.2053 27.5746 11.1209 27.7654 10.1056 28.1658C9.09034 28.5661 8.16479 29.1678 7.38366 29.9354C6.60253 30.703 5.98165 31.621 5.5577 32.635C5.13375 33.6489 4.91532 34.7384 4.91532 35.8391C4.91532 36.9398 5.13375 38.0293 5.5577 39.0433C5.98165 40.0573 6.60253 40.9752 7.38366 41.7428C8.16479 42.5104 9.09034 43.1122 10.1056 43.5125C11.1209 43.9128 12.2053 44.1036 13.2949 44.0736H13.3373C13.0784 44.9347 13.2931 45.876 13.2949 46.7759C13.2955 47.531 13.0417 48.2369 13.2221 48.9697C9.94282 48.9434 6.79438 47.667 4.40736 45.3961C2.02034 43.1252 0.57098 40.0275 0.34953 36.7234C0.12808 33.4192 1.1509 30.1525 3.21314 27.5775C5.27538 25.0025 8.22479 23.3094 11.4707 22.8371C11.544 20.9694 12.0304 19.1419 12.8943 17.4887C13.7582 15.8356 14.9777 14.3987 16.4632 13.2836C17.9487 12.1685 19.6626 11.4033 21.4791 11.0444C23.2957 10.6854 25.1687 10.7416 26.9609 11.209C28.5133 7.68708 31.1201 4.74524 34.4145 2.79743C37.7089 0.849625 41.5251 -0.00612211 45.3262 0.350577C49.1273 0.707276 52.7221 2.25846 55.6047 4.78592C58.4872 7.31338 60.5126 10.6899 61.3958 14.4404C61.7776 14.4404 62.1655 14.3976 62.5473 14.3976C67.0801 14.3992 71.4278 16.2141 74.6387 19.4452C77.8496 22.6762 79.6622 27.0602 79.6798 31.6377Z" fill="#AB6FFF"/>
+</svg>