diff --git a/.vscode/settings.json b/.vscode/settings.json
index 06337fda..014ffa92 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -10,5 +10,6 @@
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "eslint.validate": ["typescript", "typescriptreact"]
+  "eslint.validate": ["typescript", "typescriptreact"],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/components/factory/forms/CreateDenom.tsx b/components/factory/forms/CreateDenom.tsx
index 1e641ec7..698c1800 100644
--- a/components/factory/forms/CreateDenom.tsx
+++ b/components/factory/forms/CreateDenom.tsx
@@ -2,7 +2,21 @@ import { TokenAction, TokenFormData } from '@/helpers/formReducer';
 import { useTx, useFeeEstimation } from '@/hooks';
 import { osmosis } from '@chalabi/manifestjs';
 import Link from 'next/link';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
+import { Formik, Form } from 'formik';
+import Yup from '@/utils/yupExtensions';
+import { TextInput } from '@/components/react/inputs';
+
+const DenomSchema = Yup.object().shape({
+  subdenom: Yup.string()
+    .required('Subdenom is required')
+    .matches(
+      /^[uaqg][a-zA-Z0-9]+$/,
+      'Subdenom must start with u, a, q, or g, followed by letters and numbers'
+    )
+    .min(4, 'Subdenom must be at least 4 characters')
+    .max(44, 'Subdenom must not exceed 44 characters'),
+});
 
 export default function CreateDenom({
   nextStep,
@@ -15,53 +29,17 @@ export default function CreateDenom({
   dispatch: React.Dispatch<TokenAction>;
   address: string;
 }>) {
-  const [error, setError] = useState<string | null>(null);
-  const [touched, setTouched] = useState(false);
-
-  const updateField = (field: keyof TokenFormData, value: any) => {
-    dispatch({ type: 'UPDATE_FIELD', field, value });
-    setTouched(true);
-  };
-
   const { createDenom } = osmosis.tokenfactory.v1beta1.MessageComposer.withTypeUrl;
   const [isSigning, setIsSigning] = useState(false);
   const { tx } = useTx('manifest');
   const { estimateFee } = useFeeEstimation('manifest');
 
-  const validateSubdenom = (value: string) => {
-    console.log('Validating subdenom', value);
-    if (value.length === 0) {
-      return 'Subdenom is required';
-    }
-    if (!/^[a-zA-Z]/.test(value)) {
-      return 'Subdenom must start with a letter';
-    }
-    if (!/^[a-zA-Z0-9]+$/.test(value)) {
-      return 'Subdenom can only contain letters and numbers';
-    }
-    return null;
-  };
-
-  useEffect(() => {
-    if (touched) {
-      const validationError = validateSubdenom(formData.subdenom);
-      setError(validationError);
-    }
-  }, [formData.subdenom, touched]);
-
-  const handleConfirm = async () => {
-    setTouched(true);
-    const validationError = validateSubdenom(formData.subdenom);
-    if (validationError) {
-      setError(validationError);
-      return;
-    }
-
+  const handleConfirm = async (values: TokenFormData) => {
     setIsSigning(true);
     try {
       const msg = createDenom({
         sender: address ?? '',
-        subdenom: formData.subdenom,
+        subdenom: values.subdenom,
       });
 
       const fee = await estimateFee(address ?? '', [msg]);
@@ -72,7 +50,6 @@ export default function CreateDenom({
         },
       });
     } catch (error) {
-      setIsSigning(false);
       console.error('Error during transaction setup:', error);
     } finally {
       setIsSigning(false);
@@ -87,45 +64,46 @@ export default function CreateDenom({
             <h1 className="mb-4 text-2xl font-extrabold tracking-tight sm:mb-6 leding-tight ">
               Create Denom
             </h1>
-            <form className=" min-h-[330px]">
-              <div className="grid gap-5 my-6 sm:grid-cols-2">
-                <div>
-                  <label htmlFor="denom" className="block mb-2 text-sm font-medium">
-                    Token Sub Denom
-                  </label>
-                  <input
-                    type="text"
-                    aria-label={'denom-input'}
-                    placeholder="udenom"
-                    className={`input input-bordered w-full max-w-xs ${
-                      touched && error ? 'input-error' : ''
-                    }`}
-                    value={formData.subdenom}
-                    onChange={e => updateField('subdenom', e.target.value)}
-                    onBlur={() => setTouched(true)}
-                  />
-                  {touched && error && (
-                    <p className="mt-2 text-sm text-error" aria-label={'error'}>
-                      {error}
-                    </p>
-                  )}
+            <Formik
+              initialValues={formData}
+              validationSchema={DenomSchema}
+              onSubmit={handleConfirm}
+            >
+              {({ isValid, dirty, setFieldValue }) => (
+                <Form className="min-h-[330px]">
+                  <div className="grid gap-5 my-6 sm:grid-cols-2">
+                    <TextInput
+                      label="Token Sub Denom"
+                      name="subdenom"
+                      placeholder="udenom"
+                      value={formData.subdenom}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        dispatch({
+                          type: 'UPDATE_FIELD',
+                          field: 'subdenom',
+                          value: e.target.value,
+                        });
+                        setFieldValue('subdenom', e.target.value);
+                      }}
+                    />
+                  </div>
                   <p className="mt-2 text-sm text-gray-500">
                     We recommend starting with &apos;u&apos; (e.g., &apos;utoken&apos;)
                   </p>
-                </div>
-              </div>
-            </form>
-            <button
-              onClick={handleConfirm}
-              className="w-full btn px-5 py-2.5 sm:py-3.5 btn-primary"
-              disabled={!formData.subdenom || (touched && !!error) || isSigning}
-            >
-              {isSigning ? (
-                <span className="loading loading-dots loading-sm"></span>
-              ) : (
-                'Next: Token Metadata'
+                  <button
+                    type="submit"
+                    className="w-full mt-4 btn px-5 py-2.5 sm:py-3.5 btn-primary"
+                    disabled={!isValid || !dirty || isSigning}
+                  >
+                    {isSigning ? (
+                      <span className="loading loading-dots loading-sm"></span>
+                    ) : (
+                      'Next: Token Metadata'
+                    )}
+                  </button>
+                </Form>
               )}
-            </button>
+            </Formik>
             <div className="flex space-x-3 ga-4 mt-6">
               <Link href={'/factory'} legacyBehavior>
                 <button className=" btn btn-neutral py-2.5 sm:py-3.5 w-1/2 ">
diff --git a/components/factory/forms/TokenDetailsForm.tsx b/components/factory/forms/TokenDetailsForm.tsx
index 5d8f508c..1166d2b8 100644
--- a/components/factory/forms/TokenDetailsForm.tsx
+++ b/components/factory/forms/TokenDetailsForm.tsx
@@ -1,8 +1,49 @@
-import { chainName } from '@/config';
 import { TokenAction, TokenFormData } from '@/helpers/formReducer';
 import { DenomUnit } from '@chalabi/manifestjs/dist/codegen/cosmos/bank/v1beta1/bank';
-import { useState } from 'react';
+import { Formik, Form, Field } from 'formik';
+import Yup from '@/utils/yupExtensions';
+import { TextInput, TextArea } from '@/components/react/inputs';
 
+const TokenDetailsSchema = Yup.object().shape({
+  subdenom: Yup.string().required('Subdenom is required'),
+  display: Yup.string().required('Display is required').noProfanity(),
+  name: Yup.string().required('Name is required').noProfanity(),
+  symbol: Yup.string().required('Symbol is required').noProfanity(),
+  description: Yup.string()
+    .required('Description is required')
+    .min(10, 'Description must be at least 10 characters long')
+    .noProfanity(),
+  uri: Yup.string().url('Must be a valid URL'),
+  uriHash: Yup.string(),
+  denomUnits: Yup.array()
+    .of(
+      Yup.object().shape({
+        denom: Yup.string(),
+        exponent: Yup.number(),
+        aliases: Yup.array().of(Yup.string()),
+      })
+    )
+    .test('valid-denom-units', 'Invalid denom units', function (denomUnits) {
+      if (!denomUnits || denomUnits.length < 2) return false;
+
+      // Validate the second denom unit (index 1)
+      const additionalDenom = denomUnits[1];
+      if (!additionalDenom.denom) {
+        return this.createError({
+          path: 'denomUnits[1].denom',
+          message: 'Additional denom is required',
+        });
+      }
+      if (![6, 9, 12, 18].includes(additionalDenom.exponent || 0)) {
+        return this.createError({
+          path: 'denomUnits[1].exponent',
+          message: 'Exponent must be 6, 9, 12, or 18',
+        });
+      }
+
+      return true;
+    }),
+});
 export default function TokenDetails({
   nextStep,
   prevStep,
@@ -26,19 +67,6 @@ export default function TokenDetails({
     updateField('denomUnits', updatedDenomUnits);
   };
 
-  const isFormValid = () => {
-    return (
-      formData.subdenom &&
-      formData.display &&
-      formData.name &&
-      formData.description &&
-      formData.symbol &&
-      formData.denomUnits.length === 2 &&
-      formData.denomUnits[1].denom &&
-      [6, 9, 12, 18].includes(formData.denomUnits[1].exponent)
-    );
-  };
-
   const fullDenom = `factory/${address}/${formData.subdenom}`;
 
   // Ensure there are always two denom units
@@ -54,188 +82,184 @@ export default function TokenDetails({
   return (
     <section className="max-w-4xl mx-auto px-4 py-4">
       <h1 className="text-2xl font-bold mb-4">Token Metadata</h1>
-      <form className="space-y-4">
-        <div className="grid gap-4 sm:grid-cols-2">
-          <div>
-            <label htmlFor="subdenom" className="block text-sm font-medium">
-              Subdenom <span className="text-xs text-gray-500">(Unique identifier)</span>
-            </label>
-            <input
-              aria-label={'subdenom-input'}
-              type="text"
-              id="subdenom"
-              className="input input-bordered w-full mt-1"
-              value={formData.subdenom}
-              onChange={e => updateField('subdenom', e.target.value)}
-              required
-            />
-          </div>
-          <div>
-            <label htmlFor="display" className="block text-sm font-medium">
-              Display <span className="text-xs text-gray-500">(How it&apos;s shown)</span>
-            </label>
-            <input
-              aria-label={'display-input'}
-              type="text"
-              id="display"
-              className="input input-bordered w-full mt-1"
-              value={formData.display}
-              onChange={e => updateField('display', e.target.value)}
-              required
-            />
-          </div>
-          <div>
-            <label htmlFor="name" className="block text-sm font-medium">
-              Name <span className="text-xs text-gray-500">(Full name)</span>
-            </label>
-            <input
-              aria-label={'name-input'}
-              type="text"
-              id="name"
-              className="input input-bordered w-full mt-1"
-              value={formData.name}
-              onChange={e => updateField('name', e.target.value)}
-              required
-            />
-          </div>
-          <div>
-            <label htmlFor="symbol" className="block text-sm font-medium">
-              Symbol <span className="text-xs text-gray-500">(Short symbol)</span>
-            </label>
-            <input
-              aria-label={'symbol-input'}
-              type="text"
-              id="symbol"
-              className="input input-bordered w-full mt-1"
-              value={formData.symbol}
-              onChange={e => updateField('symbol', e.target.value)}
-              required
-            />
-          </div>
-        </div>
-
-        <div>
-          <label htmlFor="description" className="block text-sm font-medium">
-            Description <span className="text-xs text-gray-500">(Brief description)</span>
-          </label>
-          <textarea
-            aria-label={'description-input'}
-            id="description"
-            className="textarea textarea-bordered w-full mt-1"
-            rows={2}
-            value={formData.description}
-            onChange={e => updateField('description', e.target.value)}
-            required
-          ></textarea>
-        </div>
+      <Formik
+        initialValues={formData}
+        initialTouched={{
+          subdenom: true,
+          denomUnits: [{ denom: true, exponent: true }],
+        }}
+        validationSchema={TokenDetailsSchema}
+        onSubmit={() => {}}
+      >
+        {({ isValid, dirty, setFieldValue }) => (
+          <Form className="space-y-4">
+            <div className="grid gap-4 sm:grid-cols-2">
+              <TextInput
+                label="Subdenom"
+                name="subdenom"
+                disabled={true}
+                value={formData.subdenom}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  updateField('subdenom', e.target.value);
+                  setFieldValue('subdenom', e.target.value);
+                }}
+              />
+              <TextInput
+                label="Display"
+                name="display"
+                value={formData.display}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  updateField('display', e.target.value);
+                  setFieldValue('display', e.target.value);
+                }}
+              />
+              <TextInput
+                label="Name"
+                name="name"
+                value={formData.name}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  updateField('name', e.target.value);
+                  setFieldValue('name', e.target.value);
+                }}
+              />
+              <TextInput
+                label="Symbol"
+                name="symbol"
+                value={formData.symbol}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  updateField('symbol', e.target.value);
+                  setFieldValue('symbol', e.target.value);
+                }}
+              />
+            </div>
 
-        <div className="grid gap-4 sm:grid-cols-2">
-          <div>
-            <label htmlFor="uri" className="block text-sm font-medium">
-              URI <span className="text-xs text-gray-500">(Info/image link)</span>
-            </label>
-            <input
-              aria-label={'uri-input'}
-              type="text"
-              id="uri"
-              className="input input-bordered w-full mt-1"
-              value={formData.uri}
-              onChange={e => updateField('uri', e.target.value)}
+            <TextArea
+              label="Description"
+              name="description"
+              value={formData.description}
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+                updateField('description', e.target.value);
+                setFieldValue('description', e.target.value);
+              }}
             />
-          </div>
-          <div>
-            <label htmlFor="uriHash" className="block text-sm font-medium">
-              URI Hash <span className="text-xs text-gray-500">(If applicable)</span>
-            </label>
-            <input
-              aria-label={'uri-hash-input'}
-              type="text"
-              id="uriHash"
-              className="input input-bordered w-full mt-1"
-              value={formData.uriHash}
-              onChange={e => updateField('uriHash', e.target.value)}
-            />
-          </div>
-        </div>
 
-        <div>
-          <h2 className="text-lg font-semibold mb-2">Denom Units</h2>
-          <div className="space-y-2">
-            <div>
-              <label className="block text-sm font-medium">
-                Base Denom <span className="text-xs text-gray-500">(Cannot be changed)</span>
-              </label>
-              <input
-                type="text"
-                className="input input-bordered w-full mt-1"
-                value={fullDenom.slice(0, 20) + '...' + fullDenom.slice(40, 100)}
-                disabled
+            <div className="grid gap-4 sm:grid-cols-2">
+              <TextInput
+                label="URI"
+                name="uri"
+                value={formData.uri}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  updateField('uri', e.target.value);
+                  setFieldValue('uri', e.target.value);
+                }}
+              />
+              <TextInput
+                label="URI Hash"
+                name="uriHash"
+                value={formData.uriHash}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  updateField('uriHash', e.target.value);
+                  setFieldValue('uriHash', e.target.value);
+                }}
               />
             </div>
-            <div className="flex space-x-2">
-              <div className="flex-grow">
-                <label className="block text-sm font-medium">
-                  Additional Denom <span className="text-xs text-gray-500">(Display denom)</span>
-                </label>
-                <input
-                  type="text"
-                  placeholder="Denom"
-                  className="input input-bordered w-full mt-1"
-                  value={formData.denomUnits[1]?.denom || ''}
-                  onChange={e => updateDenomUnit(1, 'denom', e.target.value)}
-                  required
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium">
-                  Exponent <span className="text-xs text-gray-500">(Decimals)</span>
-                </label>
-                <div className="dropdown mt-1 w-full">
-                  <label
-                    tabIndex={0}
-                    className="btn m-0 w-full input input-bordered flex justify-between items-center"
-                  >
-                    {formData.denomUnits[1]?.exponent || 6}
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      strokeWidth={1.5}
-                      stroke="currentColor"
-                      className="w-4 h-4"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        d="M19.5 8.25l-7.5 7.5-7.5-7.5"
-                      />
-                    </svg>
+
+            <div>
+              <h2 className="text-lg font-semibold mb-2">Denom Units</h2>
+              <div className="space-y-2">
+                <div>
+                  <label className="block text-sm font-medium">
+                    Base Denom <span className="text-xs text-gray-500">(Cannot be changed)</span>
                   </label>
-                  <ul
-                    tabIndex={0}
-                    className="dropdown-content menu p-2 shadow -mt-12 bg-base-100 rounded-box w-40 -ml-4"
-                  >
-                    {[6, 9, 12, 18].map(exp => (
-                      <li key={exp}>
-                        <a onClick={() => updateDenomUnit(1, 'exponent', exp)}>{exp}</a>
-                      </li>
-                    ))}
-                  </ul>
+                  <input
+                    type="text"
+                    className="input input-bordered w-full mt-1"
+                    value={fullDenom.slice(0, 20) + '...' + fullDenom.slice(40, 100)}
+                    disabled
+                  />
+                </div>
+                <div className="flex space-x-2">
+                  <div className="flex-grow">
+                    <label className="block text-sm font-medium">
+                      Additional Denom{' '}
+                      <span className="text-xs text-gray-500">(Display denom)</span>
+                    </label>
+                    <Field
+                      name="denomUnits[1].denom"
+                      type="text"
+                      placeholder="Denom"
+                      className="input input-bordered w-full mt-1"
+                      value={formData.denomUnits[1]?.denom || ''}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        updateDenomUnit(1, 'denom', e.target.value);
+                        setFieldValue('denomUnits[1].denom', e.target.value);
+                      }}
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium">
+                      Exponent <span className="text-xs text-gray-500">(Decimals)</span>
+                    </label>
+                    <div className="dropdown mt-1 w-full">
+                      <label
+                        tabIndex={0}
+                        className="btn m-0 w-full input input-bordered flex justify-between items-center"
+                      >
+                        {formData.denomUnits[1]?.exponent || 6}
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          strokeWidth={1.5}
+                          stroke="currentColor"
+                          className="w-4 h-4"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M19.5 8.25l-7.5 7.5-7.5-7.5"
+                          />
+                        </svg>
+                      </label>
+                      <ul
+                        tabIndex={0}
+                        className="dropdown-content menu p-2 shadow -mt-12 bg-base-100 rounded-box w-40 -ml-4"
+                      >
+                        {[6, 9, 12, 18].map(exp => (
+                          <li key={exp}>
+                            <a
+                              onClick={() => {
+                                updateDenomUnit(1, 'exponent', exp);
+                                setFieldValue('denomUnits[1].exponent', exp);
+                              }}
+                            >
+                              {exp}
+                            </a>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        </div>
-      </form>
 
-      <div className="mt-6 flex space-x-4">
-        <button onClick={prevStep} className="btn btn-neutral flex-1">
-          Previous
-        </button>
-        <button onClick={nextStep} className="btn btn-primary flex-1" disabled={!isFormValid()}>
-          Next: Confirmation
-        </button>
-      </div>
+            <div className="mt-6 flex space-x-4">
+              <button type="button" onClick={prevStep} className="btn btn-neutral flex-1">
+                Previous
+              </button>
+              <button
+                type="button"
+                onClick={nextStep}
+                className="btn btn-primary flex-1"
+                disabled={!isValid}
+              >
+                Next: Confirmation
+              </button>
+            </div>
+          </Form>
+        )}
+      </Formik>
     </section>
   );
 }
diff --git a/components/factory/forms/__tests__/CreateDenom.test.tsx b/components/factory/forms/__tests__/CreateDenom.test.tsx
index eeabf2e7..de88c8d7 100644
--- a/components/factory/forms/__tests__/CreateDenom.test.tsx
+++ b/components/factory/forms/__tests__/CreateDenom.test.tsx
@@ -24,32 +24,48 @@ describe('CreateDenom Component', () => {
     expect(screen.getByText('Token Sub Denom')).toBeInTheDocument();
   });
 
-  test('updates subdenom input correctly', () => {
+  test('updates subdenom input correctly', async () => {
     renderWithChainProvider(<CreateDenom {...mockProps} />);
     const subdenomInput = screen.getByPlaceholderText('udenom');
     fireEvent.change(subdenomInput, { target: { value: 'utest' } });
-    expect(mockProps.dispatch).toHaveBeenCalledWith({
-      type: 'UPDATE_FIELD',
-      field: 'subdenom',
-      value: 'utest',
+    await waitFor(() => {
+      expect(mockProps.dispatch).toHaveBeenCalledWith({
+        type: 'UPDATE_FIELD',
+        field: 'subdenom',
+        value: 'utest',
+      });
     });
   });
 
-  // TODO: Add a test that covers subdenom validation
-
-  // // TODO: The confirm button should be disabled when the input is invalid
-  // test('confirm button is disabled when inputs are invalid', () => {
-  //   renderWithChainProvider(<CreateDenom {...mockProps} />);
-  //   const confirmButton = screen.getByText('Next: Token Metadata');
-  //   expect(confirmButton).toBeDisabled();
-  // });
-  //
-  // // TODO: The confirm button should be enabled when the input is valid
-  // test('confirm button is enabled when inputs are valid', () => {
-  //   renderWithChainProvider(<CreateDenom {...mockProps} />);
-  //   const subdenomInput = screen.getByPlaceholderText('udenom');
-  //   fireEvent.change(subdenomInput, { target: { value: 'utest' } });
-  //   const confirmButton = screen.getByText('Next: Token Metadata');
-  //   expect(confirmButton).toBeEnabled();
-  // });
+  test('shows validation error for invalid subdenom', async () => {
+    renderWithChainProvider(<CreateDenom {...mockProps} />);
+    const subdenomInput = screen.getByPlaceholderText('udenom');
+    fireEvent.change(subdenomInput, { target: { value: 'invalid' } });
+    fireEvent.blur(subdenomInput);
+    await waitFor(() => {
+      expect(
+        screen.getByText('Subdenom must start with u, a, q, or g, followed by letters and numbers')
+      ).toBeInTheDocument();
+    });
+  });
+
+  test('confirm button is disabled when inputs are invalid', async () => {
+    renderWithChainProvider(<CreateDenom {...mockProps} />);
+    const confirmButton = screen.getByText('Next: Token Metadata');
+    const subdenomInput = screen.getByPlaceholderText('udenom');
+    fireEvent.change(subdenomInput, { target: { value: 'invalid' } });
+    await waitFor(() => {
+      expect(confirmButton).toBeDisabled();
+    });
+  });
+
+  test('confirm button is enabled when inputs are valid', async () => {
+    renderWithChainProvider(<CreateDenom {...mockProps} />);
+    const subdenomInput = screen.getByPlaceholderText('udenom');
+    fireEvent.change(subdenomInput, { target: { value: 'utest' } });
+    await waitFor(() => {
+      const confirmButton = screen.getByText('Next: Token Metadata');
+      expect(confirmButton).toBeEnabled();
+    });
+  });
 });
diff --git a/components/factory/forms/__tests__/TokenDetailsForm.test.tsx b/components/factory/forms/__tests__/TokenDetailsForm.test.tsx
index 74538a67..4801bce9 100644
--- a/components/factory/forms/__tests__/TokenDetailsForm.test.tsx
+++ b/components/factory/forms/__tests__/TokenDetailsForm.test.tsx
@@ -1,6 +1,6 @@
 import { describe, test, afterEach, expect, jest } from 'bun:test';
 import React from 'react';
-import { screen, cleanup, fireEvent } from '@testing-library/react';
+import { screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
 import TokenDetailsForm from '@/components/factory/forms/TokenDetailsForm';
 import matchers from '@testing-library/jest-dom/matchers';
 import { renderWithChainProvider } from '@/tests/render';
@@ -21,86 +21,84 @@ describe('TokenDetailsForm Component', () => {
 
   test('renders form with correct details', () => {
     renderWithChainProvider(<TokenDetailsForm {...mockProps} />);
-    expect(screen.getByText('Subdenom')).toBeInTheDocument();
-    expect(screen.getByText('Display')).toBeInTheDocument();
-    expect(screen.getByText('Name')).toBeInTheDocument();
-    expect(screen.getByText('Symbol')).toBeInTheDocument();
-    expect(screen.getByText('Description')).toBeInTheDocument();
-    expect(screen.getByText('URI')).toBeInTheDocument();
-    expect(screen.getByText('URI Hash')).toBeInTheDocument();
+    expect(screen.getByLabelText('Subdenom')).toBeInTheDocument();
+    expect(screen.getByLabelText('Display')).toBeInTheDocument();
+    expect(screen.getByLabelText('Name')).toBeInTheDocument();
+    expect(screen.getByLabelText('Symbol')).toBeInTheDocument();
+    expect(screen.getByLabelText('Description')).toBeInTheDocument();
+    expect(screen.getByLabelText('URI')).toBeInTheDocument();
+    expect(screen.getByLabelText('URI Hash')).toBeInTheDocument();
   });
 
-  test('updates form fields correctly', () => {
+  test('updates form fields correctly', async () => {
     renderWithChainProvider(<TokenDetailsForm {...mockProps} />);
-    const subdenomInput = screen.getByLabelText('subdenom-input');
-    fireEvent.change(subdenomInput, { target: { value: 'newsubdenom' } });
-    expect(mockProps.dispatch).toHaveBeenCalledWith({
-      type: 'UPDATE_FIELD',
-      field: 'subdenom',
-      value: 'newsubdenom',
-    });
 
-    const displayInput = screen.getByLabelText('display-input');
+    const displayInput = screen.getByLabelText('Display');
     fireEvent.change(displayInput, { target: { value: 'New Display' } });
-    expect(mockProps.dispatch).toHaveBeenCalledWith({
-      type: 'UPDATE_FIELD',
-      field: 'display',
-      value: 'New Display',
+    await waitFor(() => {
+      expect(mockProps.dispatch).toHaveBeenCalledWith({
+        type: 'UPDATE_FIELD',
+        field: 'display',
+        value: 'New Display',
+      });
     });
 
-    const nameInput = screen.getByLabelText('name-input');
+    const nameInput = screen.getByLabelText('Name');
     fireEvent.change(nameInput, { target: { value: 'New Name' } });
-    expect(mockProps.dispatch).toHaveBeenCalledWith({
-      type: 'UPDATE_FIELD',
-      field: 'name',
-      value: 'New Name',
+    await waitFor(() => {
+      expect(mockProps.dispatch).toHaveBeenCalledWith({
+        type: 'UPDATE_FIELD',
+        field: 'name',
+        value: 'New Name',
+      });
     });
 
-    const symbolInput = screen.getByLabelText('symbol-input');
+    const symbolInput = screen.getByLabelText('Symbol');
     fireEvent.change(symbolInput, { target: { value: 'NS' } });
-    expect(mockProps.dispatch).toHaveBeenCalledWith({
-      type: 'UPDATE_FIELD',
-      field: 'symbol',
-      value: 'NS',
+    await waitFor(() => {
+      expect(mockProps.dispatch).toHaveBeenCalledWith({
+        type: 'UPDATE_FIELD',
+        field: 'symbol',
+        value: 'NS',
+      });
     });
 
-    const descriptionInput = screen.getByLabelText('description-input');
-    fireEvent.change(descriptionInput, {
-      target: { value: 'New Description' },
-    });
-    expect(mockProps.dispatch).toHaveBeenCalledWith({
-      type: 'UPDATE_FIELD',
-      field: 'description',
-      value: 'New Description',
+    const descriptionInput = screen.getByLabelText('Description');
+    fireEvent.change(descriptionInput, { target: { value: 'New Description' } });
+    await waitFor(() => {
+      expect(mockProps.dispatch).toHaveBeenCalledWith({
+        type: 'UPDATE_FIELD',
+        field: 'description',
+        value: 'New Description',
+      });
     });
 
-    const uriInput = screen.getByLabelText('uri-input');
+    const uriInput = screen.getByLabelText('URI');
     fireEvent.change(uriInput, { target: { value: 'http://newuri.com' } });
-    expect(mockProps.dispatch).toHaveBeenCalledWith({
-      type: 'UPDATE_FIELD',
-      field: 'uri',
-      value: 'http://newuri.com',
+    await waitFor(() => {
+      expect(mockProps.dispatch).toHaveBeenCalledWith({
+        type: 'UPDATE_FIELD',
+        field: 'uri',
+        value: 'http://newuri.com',
+      });
     });
 
-    const uriHashInput = screen.getByLabelText('uri-hash-input');
+    const uriHashInput = screen.getByLabelText('URI Hash');
     fireEvent.change(uriHashInput, { target: { value: 'newurihash' } });
-    expect(mockProps.dispatch).toHaveBeenCalledWith({
-      type: 'UPDATE_FIELD',
-      field: 'uriHash',
-      value: 'newurihash',
+    await waitFor(() => {
+      expect(mockProps.dispatch).toHaveBeenCalledWith({
+        type: 'UPDATE_FIELD',
+        field: 'uriHash',
+        value: 'newurihash',
+      });
     });
   });
 
-  test('next button is disabled when form is invalid', () => {
-    const invalidFormData = { ...mockTokenFormData, subdenom: '' };
-    renderWithChainProvider(<TokenDetailsForm {...mockProps} formData={invalidFormData} />);
-    const nextButton = screen.getByText('Next: Confirmation');
-    expect(nextButton).toBeDisabled();
-  });
-
-  test('next button is enabled when form is valid', () => {
+  test('next button is enabled when form is valid', async () => {
     renderWithChainProvider(<TokenDetailsForm {...mockProps} />);
     const nextButton = screen.getByText('Next: Confirmation');
-    expect(nextButton).toBeEnabled();
+    await waitFor(() => {
+      expect(nextButton).toBeEnabled();
+    });
   });
 });
diff --git a/components/react/sideNav.tsx b/components/react/sideNav.tsx
index 2e3463e0..16ab7724 100644
--- a/components/react/sideNav.tsx
+++ b/components/react/sideNav.tsx
@@ -125,7 +125,7 @@ export default function SideNav() {
   const SideDrawer: React.FC = () => (
     <div
       id="secondary-sidenav"
-      className="overflow-y-auto relative py-5 px-3 w-64 h-full  border-primary bg-base-300 border-r-primary border-r transition-transform duration-300 ease-in-out"
+      className="overflow-y-auto relative py-5 px-3 w-64 h-full  border-primary border-r-primary border-r transition-transform duration-300 ease-in-out"
     >
       <div className="flex flex-row gap-4 items-center ">
         <img src={'/logo.svg'} alt="logo" width={42} height={42} />
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 4f949d23..e0a58932 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -219,7 +219,7 @@ function ManifestApp({ Component, pageProps }: ManifestAppProps) {
               <AdvancedModeProvider>
                 <SideNav />
                 <MobileNav />
-                <div className="relative min-h-screen max-w-screen md:ml-20 sm:px-4 sm:py-2 bg-base-200 ">
+                <div className="relative min-h-screen max-w-screen  md:ml-20 sm:px-4 sm:py-2 ">
                   <DynamicEndpointSelector />
                   <Component {...pageProps} />
                 </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index a52babbb..0c71960f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -54,110 +54,6 @@ module.exports = {
         sans: ['Rubik', 'sans-serif'],
         body: ['Rubik', 'sans-serif'],
       },
-      colors: {
-        light: {
-          bg: {
-            DEFAULT: '#faede5',
-            100: '#faf0ea',
-            200: '#f8e9e0',
-            300: '#f1d4c3',
-            400: '#e7b89c',
-            500: '#de9c75',
-            600: '#d5804e',
-            700: '#c3662f',
-          },
-        },
-        dark: {
-          bg: {
-            DEFAULT: '#452E33',
-            50: '#67454c',
-            100: '#614047',
-            200: '#5a3c42',
-            300: '#53373d',
-            400: '#4c3338',
-            500: '#3e292e',
-            600: '#372529',
-            700: '#302024',
-            800: '#291c1f',
-            900: '#22171a',
-          },
-        },
-        brown: {
-          900: '#322622',
-          800: '#3d2e28',
-          700: '#47362f',
-          600: '#513e36',
-          500: '#5b453c',
-          DEFAULT: '#654D43',
-          400: '#6d5348',
-          300: '#75594e',
-          200: '#7d5f53',
-          100: '#856658',
-          50: '#8d6c5e',
-        },
-        shell: {
-          900: '#5a373e',
-          800: '#6c424a',
-          700: '#7d4e57',
-          600: '#8f5963',
-          500: '#a06570',
-          DEFAULT: '#AB7781',
-          400: '#b4858e',
-          300: '#bd949c',
-          200: '#c6a2a9',
-          100: '#ceb0b6',
-          50: '#d7bfc3',
-        },
-        tan: {
-          500: '#af5529',
-          400: '#cf6633',
-          300: '#d78056',
-          200: '#e09b79',
-          100: '#e8b59c',
-          DEFAULT: '#F0CFBF',
-        },
-        orange: {
-          900: '#8a4325',
-          800: '#a5512c',
-          700: '#c15e34',
-          600: '#ce7149',
-          500: '#d68764',
-          DEFAULT: '#DD9C80',
-          400: '#e3ad96',
-          300: '#e9beac',
-          200: '#efd0c2',
-          100: '#f5e1d8',
-          50: '#faefeb',
-        },
-        mint: {
-          light: {
-            900: '#288e80',
-            800: '#30ab9a',
-            700: '#38c7b4',
-            600: '#54cfbf',
-            500: '#71d7c9',
-            DEFAULT: '#8DDFD4',
-            400: '#a4e5dd',
-            300: '#baece5',
-            200: '#d1f2ee',
-            100: '#e8f9f6',
-            50: '#ebf9f7',
-          },
-          dark: {
-            900: '#001a14',
-            800: '#001e17',
-            700: '#00231b',
-            600: '#00281f',
-            500: '#002d23',
-            DEFAULT: '#003227',
-            400: '#00362a',
-            300: '#003a2d',
-            200: '#003e30',
-            100: '#004233',
-            50: '#004637',
-          },
-        },
-      },
     },
   },
   variants: {
@@ -177,53 +73,42 @@ module.exports = {
     themes: [
       {
         light: {
-          primary: '#38C7B4',
-          'primary-content': '#ffffff',
-
-          secondary: '#ab7781',
-          'secondary-content': '#ffffff',
-
-          accent: '#38c7b4',
-          'accent-content': '#ffffff',
-
-          neutral: '#FAF0EA',
-          'neutral-content': '#452E33',
-
-          'base-100': '#ffffff',
-          'base-200': '#f7fafc',
-          'base-300': '#edf2f7',
-          'base-400': '#e2e8f0',
-          'base-content': '#452E33',
-
-          info: '#2094f3',
-          success: '#009485',
-          warning: '#ff9900',
-          error: '#ff5724',
+          primary: '#A287FF',
+          'primary-content': '#161616',
+          secondary: '#F0F0FF',
+          'secondary-content': '#161616',
+          accent: '#30DB5B',
+          'accent-content': '#161616',
+          neutral: '#FFFFFF',
+          'neutral-content': '#161616',
+          'base-100': '#FFFFFF',
+          'base-200': '#F0F0FF',
+          'base-300': '#E1E1F9',
+          'base-content': '#161616',
+          info: '#3B82F6',
+          success: '#30DB5B',
+          warning: '#FBBD23',
+          error: '#F54582',
         },
       },
       {
         dark: {
-          primary: '#4b7f7b',
-          'primary-content': '#ffffff',
-
-          secondary: '#79495a',
-          'secondary-content': '#ffffff',
-
-          accent: '#4b7f7b',
-          'accent-content': '#ffffff',
-
-          neutral: '#452e33',
-          'neutral-content': '#faf0ea',
-
-          'base-100': '#2B2B2B',
-          'base-200': '#252525',
-          'base-300': '#202020',
-          'base-content': '#faf0ea',
-
-          info: '#3DA7DB',
-          success: '#23C4A9',
-          warning: '#E0A455',
-          error: '#F15C4C',
+          primary: '#A287FF',
+          'primary-content': '#FFFFFF',
+          secondary: '#1D192D',
+          'secondary-content': '#FFFFFF',
+          accent: '#30DB5B',
+          'accent-content': '#FFFFFF',
+          neutral: '#1D192D',
+          'neutral-content': '#FFFFFF',
+          'base-100': '#161616',
+          'base-200': '#1D192D',
+          'base-300': '#2A2640',
+          'base-content': '#FFFFFF',
+          info: '#3B82F6',
+          success: '#30DB5B',
+          warning: '#FBBD23',
+          error: '#F54582',
         },
       },
     ],