diff --git a/src/components/products/ProductDetails.jsx b/src/components/products/ProductDetails.jsx
index c8eb989..7d3b99f 100644
--- a/src/components/products/ProductDetails.jsx
+++ b/src/components/products/ProductDetails.jsx
@@ -51,14 +51,14 @@ export default function ProductDetails() {
         {(props) => (
             <Form>
                 <div
-                    className='flex flex-col w-full bg-white rounded-xl p-16 sm:px-20 sm:py-16 shadow'>
+                    className='flex flex-col w-full bg-white dark:bg-black-box text-black-body dark:text-white-body rounded-xl p-16 sm:px-20 sm:py-16 shadow'>
                     <div className='w-full flex flex-col gap-4'>
                         <div className='relative text-input flex flex-col sm:flex-row gap-2 sm:items-center'>
                             <label className={`text-base min-w-36 text-end sm:text-left ${(props.errors.custom_id && props.touched.custom_id) && 'text-red-500'}`}>
                                 Details
                             </label>
                             <textarea
-                                className='p-4 w-full resize-none border outline-none ring-0'
+                                className='p-4 w-full resize-none border outline-none ring-0 dark:bg-transparent dark:border-white-light'
                                 rows={4}
                                 id='custom_id'
                                 placeholder='Enter your description text here ...'
@@ -72,7 +72,7 @@ export default function ProductDetails() {
                                 Sales Text
                             </label>
                             <textarea
-                                className='p-4 w-full resize-none border outline-none ring-0'
+                                className='p-4 w-full resize-none border outline-none ring-0 dark:bg-transparent dark:border-white-light'
                                 rows={4}
                                 id='provision_name'
                                 placeholder='Enter your description text here ...'
diff --git a/src/components/products/ProductView.jsx b/src/components/products/ProductView.jsx
index cb3330a..e27b538 100644
--- a/src/components/products/ProductView.jsx
+++ b/src/components/products/ProductView.jsx
@@ -38,7 +38,7 @@ export default function ProductView() {
 
             <div className='flex flex-col gap-4'>
                 <div className='flex flex-col gap-2'>
-                    <p className='text-lg'>Product Configuration</p>
+                    <p className='text-lg dark:text-white-light'>Product Configuration</p>
                     <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
 
                         <table className="py-2 w-full text-sm">
@@ -150,7 +150,7 @@ export default function ProductView() {
                     </div>
                 </div>
 
-                <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body' style={{backgroundColor: 'aliceblue'}}>
+                <div className='box bg-[aliceblue] dark:bg-black-box text-black-body dark:text-white-body'>
                     <div className='flex flex-col gap-2'>
                         <p className='text-lg'>Product Details</p>
                         <ProductDetails />