diff --git a/src/assets/selectedRadio.png b/src/assets/selectedRadio.png
index 4d95acb..e653cad 100644
Binary files a/src/assets/selectedRadio.png and b/src/assets/selectedRadio.png differ
diff --git a/src/assets/unselectedRadio.png b/src/assets/unselectedRadio.png
index 1af21c4..1f0cf9c 100644
Binary files a/src/assets/unselectedRadio.png and b/src/assets/unselectedRadio.png differ
diff --git a/src/components/DatePicker.js b/src/components/DatePicker.js
index ab6940c..37a7945 100644
--- a/src/components/DatePicker.js
+++ b/src/components/DatePicker.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { View, StyleSheet, Text } from 'react-native';
 import ReactDatePicker from 'react-native-datepicker';
 
+const DEFAULT_DATETIME_FORMAT = 'YYYY-MM-DD h:mm a';
 const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
 const CONFIRM_BUTTON_TEXT = 'Confirm';
 const CANCEL_BUTTON_TEXT = 'Cancel';
@@ -19,11 +20,12 @@ export default function Datepicker(props) {
         key={name}
         style={styles.date}
         date={value}
-        mode="date"
-        format={DEFAULT_DATE_FORMAT}
+        mode={meta.isDateTime ? "datetime" : "date"}
+        format={meta.isDateTime ? DEFAULT_DATETIME_FORMAT : DEFAULT_DATE_FORMAT}
         confirmBtnText={CONFIRM_BUTTON_TEXT}
         cancelBtnText={CANCEL_BUTTON_TEXT}
         onDateChange={onChangeInputValue}
+        disabled={meta.disabled === true ? true : false}
       />
     </View>
   );
diff --git a/src/components/InputText.js b/src/components/InputText.js
index c5fbe3d..fa6ec69 100644
--- a/src/components/InputText.js
+++ b/src/components/InputText.js
@@ -7,19 +7,27 @@ import { color } from '../styles';
 
 export default function InputText(props) {
   const {
-    name, value, meta, style, onChangeInputValue, isMandatory
+    name, value, meta, style, onChangeInputValue, isMandatory, imgView, inputStyle
   } = props;
 
   return (
-    <View key={name}>
-      <Text style={styles.text}>{`${meta.label} ${isMandatory ? '*' : ''}`}</Text>
+    <View key={name} style={[meta.containerStyle ,{}]}>
+      {imgView ? 
+      <View style={styles.yellowMainView}>
+        {imgView()}
+        <View style={styles.yellowView}>
+        <Text style={[styles.yellowTxt]}>{`${meta.label} ${isMandatory ? '*' : ''}`}</Text>
+        </View>
+        </View> :
+        <Text style={[styles.text, meta.textStyle]}>{`${meta.label} ${isMandatory ? '*' : ''}`}</Text>
+      }
       <TextInput
-        style={{ ...styles.textBox(meta.multiline, meta.numberOfLines), ...style }}
+        style={{ ...styles.textBox(meta.multiline, meta.numberOfLines), ...style, ...inputStyle }}
         value={value || ''}
         underlineColorAndroid="transparent"
         onChangeText={onChangeInputValue}
         accessibilityLabel={`input-${meta.label}`}
-        editable
+        editable={meta.editable}
         placeholder={meta.placeholder}
         multiline={meta.multiline}
         numberOfLines={meta.numberOfLines}
@@ -41,6 +49,25 @@ const styles = StyleSheet.create({
     margin: 10,
     paddingLeft: 10
   }),
+  yellowMainView: {
+    flexDirection: 'row',
+  },
+  yellowView: {
+    backgroundColor: '#FDDE02',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 20,
+    borderTopLeftRadius: 0,
+    width: '80%',
+    marginLeft: 10,
+  },
+  yellowTxt: {
+    fontFamily: 'Nunito-Regular',
+    fontSize: 20,
+    color: '#444444',
+    fontWeight: '600',
+    // fontStyle: 'italic',
+  }
 });
 
 InputText.propTypes = {
diff --git a/src/components/Radio.js b/src/components/Radio.js
index d44474a..3f7a06f 100644
--- a/src/components/Radio.js
+++ b/src/components/Radio.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  View, StyleSheet, Text, Image, TouchableOpacity
+  View, StyleSheet, Text, Image, TouchableOpacity,
+  ScrollView,
+  Dimensions
 } from 'react-native';
 import { radioButton } from '../constant';
 
@@ -10,18 +12,27 @@ export default function Radio(props) {
     name, value, meta, onChangeInputValue, isMandatory
   } = props;
 
+  const deviceWidth = Dimensions.get('window').width;
   const onPress = value => () => onChangeInputValue(value);
 
   return (
-    <View key={name} style={styles.container}>
-      <Text style={styles.heading}>{`${meta.text} ${isMandatory ? '*' : ''}`}</Text>
+    <View key={name} style={[styles.container, props.style]}>
+      <Text style={[styles.heading, meta.headingStyle]}>{`${meta.text} ${isMandatory ? '*' : ''}`}</Text>
+      
+      <ScrollView disabled={meta.isScrollable ? false : true} horizontal={meta.isHorizontal} 
+      showsHorizontalScrollIndicator={false}
+      style={{ borderWidth:0, width:'100%'}} 
+      contentContainerStyle={{ width:'auto'}}>
+
       {meta.data.map((item, index) => (
-        <View key={index} style={styles.radioContainer}>
+        <View key={index} style={styles.radioContainer} >
+          
           <TouchableOpacity
             onPressIn={onPress(item.value || item.label)}
             hitSlop={styles.slop}
             style={styles.buttonContainer}
             key={index}
+            disabled={meta.disabled}
           >
             <Image
               accessibilityLabel={`choose-option-${item.label}`}
@@ -32,10 +43,11 @@ export default function Radio(props) {
                   : radioButton.unselected
               }
             />
-            <Text style={styles.text}>{item.label}</Text>
+            <Text style={[styles.text, meta.optionTextStyle]}>{item.label}</Text>
           </TouchableOpacity>
         </View>
       ))}
+      </ScrollView>
     </View>
   );
 }
@@ -66,7 +78,7 @@ const styles = StyleSheet.create({
   },
   radioContainer: {
     paddingVertical: 10,
-    width: '100%',
+    width: 'auto',
     height: 40,
     paddingLeft: 10,
   }
diff --git a/src/components/Rating.js b/src/components/Rating.js
index 84af052..3f782ad 100644
--- a/src/components/Rating.js
+++ b/src/components/Rating.js
@@ -7,18 +7,19 @@ import {
 
 export default function Rating(props) {
   const {
-    name, meta, style, onChangeInputValue, isMandatory
+    name, meta, style, value = 0, onChangeInputValue, isMandatory
   } = props;
 
   const recordRating = rating => onChangeInputValue(rating);
   return (
-    <View key={name}>
+    <View key={name} style={{borderWidth:0, alignItems:'flex-start'}}>
       <Text style={styles.text}>{`${meta.label} ${isMandatory ? '*' : ''}`}</Text>
       <AirbnbRating
+        isDisabled={meta.disabled}
         onFinishRating={recordRating}
-        starContainerStyle={{ ...style, ...styles.rating }}
+        starContainerStyle={[ style, styles.rating, {borderWidth:0, marginTop:15, marginLeft:15} ]}
         count={meta.count || 5}
-        defaultRating={0}
+        defaultRating={value}
         showRating={false}
         size={30}
       />
diff --git a/src/index.js b/src/index.js
index 7ea8e21..f85dcec 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,132 +1,347 @@
 import React, { useEffect, useState } from 'react';
 import {
-  View, StyleSheet
+  View, StyleSheet,
+  ScrollView,
+  Dimensions,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { Button } from 'react-native-elements';
 import { componentName, skipValidationForFields } from './constant';
 import { getComponent, getValidator } from './componentMap';
 
-export default function DynamicForm({ formTemplate, onSubmit, buttonStyles }) {
-  const [formFields, setFormFields] = useState({});
-  const [isValidFormFields, setValid] = useState(false);
-  const mandatoryFields = formTemplate.data.filter(data => data.is_mandatory);
-
-  useEffect(() => {
-    formTemplate.data.sort((a, b) => a.index - b.index);
-    setFormFields({
-      ...formFields,
-      ...setDefaultForFields()
-    });
-  }, []);
-
-  useEffect(() => {
-    const isValid = checkAllMandatoryFields();
-    setValid(isValid);
-  }, [JSON.stringify(formFields)]);
-
-  const onChangeInputValue = (fieldName, inputType) => value => {
-    setFormFields({
-      ...formFields,
-      [fieldName]: {
-        ...formFields[fieldName] || {},
-        value,
-        inputType,
-      }
-    });
+
+const { width: deviceWidth, height: deviceHeight } = Dimensions.get('window');
+
+
+
+const DynamicForm = React.forwardRef(
+  ({
+    formTemplate, 
+    onSubmit, 
+    buttonStyles, 
+    hideButtons = false, 
+    formValues = null, 
+    isTherapistQuestionnaire = true, 
+    showCarousel = false,
+    setCurrentPage = null,
+    imgView,
+    inputStyle 
+  }, ref) => {
+
+
+    React.useImperativeHandle(ref, () => ({
+      submitForm: async function () {
+        onSumbitButtonPress();
+      },
+      nextPage: function () {
+        if (activePage < formTemplate.data.length - 1) {
+          scrollToIndex(activePage + 1);
+          // setCurrentIndex(currentIndex + 1);
+        }
+      },
+      prevPage: function () {
+        if (activePage > 0) {
+          scrollToIndex(activePage - 1);
+          // setCurrentIndex(currentIndex + 1);
+        }
+      },
+    }));
+
+
+    const refScroll = React.useRef(null);
+
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [formFields, setFormFields] = useState({});
+    const [isValidFormFields, setValid] = useState(false);
+    const mandatoryFields = formTemplate.data.filter(data => data.is_mandatory);
+
+
+    // Function to scroll to a specific index
+  const scrollToIndex = (index) => {
+    if (refScroll.current) {
+      refScroll.current.scrollTo({
+        x: index * deviceWidth, // Calculate horizontal position based on index
+        animated: true, // Smooth scrolling
+      });
+    }
   };
 
-  const setDefaultForFields = () => {
-    const fields = {};
-    formTemplate.data.forEach(data => {
-      if (data.component === componentName.CHECKBOX) {
-        fields[data.field_name] = {
-          value: false,
-          inputType: data.component,
-        };
+
+    useEffect(() => {
+      formTemplate.data.sort((a, b) => a.index - b.index);
+
+      if (formValues) {
+        setFormFields(formValues);
+      } else {
+        setFormFields({
+          ...formFields,
+          ...setDefaultForFields()
+        });
       }
-      if (data.component === componentName.DATE_PICKER) {
-        const today = new Date();
-        const currentDate = `${today.getFullYear()}-${`0${today.getMonth() + 1}`.slice(-2)}-`
-          + `${today.getDate()}`;
-
-        fields[data.field_name] = {
-          value: currentDate,
-          inputType: data.component,
-        };
+
+
+    }, [formValues]);
+
+    useEffect(() => {
+      const isValid = checkAllMandatoryFields();
+      setValid(isValid);
+    }, [JSON.stringify(formFields)]);
+
+
+
+    const onChangeInputValue = (fieldName, inputType) => value => {
+      setFormFields({
+        ...formFields,
+        [fieldName]: {
+          ...formFields[fieldName] || {},
+          value,
+          inputType,
+        }
+      });
+    };
+
+    const setDefaultForFields = () => {
+      const fields = {};
+      formTemplate.data.forEach(data => {
+        if (data.component === componentName.CHECKBOX) {
+          fields[data.field_name] = {
+            value: false,
+            inputType: data.component,
+          };
+        }
+        if (data.component === componentName.DATE_PICKER) {
+          const today = new Date();
+          const currentDate = `${today.getFullYear()}-${`0${today.getMonth() + 1}`.slice(-2)}-`
+            + `${today.getDate()}`;
+
+          fields[data.field_name] = {
+            value: currentDate,
+            inputType: data.component,
+          };
+        }
+      });
+
+      return fields;
+    };
+
+    const getValue = element => formFields[element.field_name]?.value;
+
+    const onSumbitButtonPress = (sendToTherapist = false) => {
+
+      onSubmit(formFields, sendToTherapist);
+
+    };
+
+    const checkAllMandatoryFields = () => {
+      for (const field of mandatoryFields) {
+        const key = field.field_name;
+
+        if (skipValidationForFields.includes(field.component)) {
+          continue;
+        }
+
+        const data = formFields[key];
+        const validator = data && getValidator(data.inputType);
+
+        if (!data || (!data.value || (validator && !validator(data.value, key)))
+          && (data.value !== false && data.value !== 0)) {
+          return false;
+        }
       }
-    });
 
-    return fields;
-  };
+      return true;
+    };
 
-  const getValue = element => formFields[element.field_name]?.value;
+    const [activePage, setActivePage] = useState(0); // Active page index
 
-  const onSumbitButtonPress = () => {
-    onSubmit(formFields);
+  // Handle scroll event to calculate the active page
+  const handleScroll = (event) => {
+    const scrollPosition = event.nativeEvent.contentOffset.x; // Current scroll position
+    const currentPage = Math.round(scrollPosition / deviceWidth); // Calculate active page
+    setActivePage(currentPage); // Update active page
+    console.log('FormBuilder:currentPage', currentPage);
+    setCurrentPage && setCurrentPage(currentPage);
   };
 
-  const checkAllMandatoryFields = () => {
-    for (const field of mandatoryFields) {
-      const key = field.field_name;
 
-      if (skipValidationForFields.includes(field.component)) {
-        continue;
-      }
 
-      const data = formFields[key];
-      const validator = data && getValidator(data.inputType);
+    if (showCarousel) {
 
-      if (!data || (!data.value || (validator && !validator(data.value, key)))
-        && (data.value !== false && data.value !== 0)) {
-        return false;
-      }
+      const nArray = Array.from({ length: formTemplate?.data?.length }, (_, index) => index);
+
+      return (
+
+        <View style={[styles.container, { width: deviceWidth }]}>
+
+          <ScrollView
+            ref={ref => refScroll.current = ref}
+            horizontal={true}
+            showsHorizontalScrollIndicator={false}
+            // snapToAlignment='center'
+            // snapToInterval={true}
+            pagingEnabled={true}
+            onScroll={handleScroll}
+            scrollEventThrottle={16} // Optimize scroll event handling
+            style={{flexShrink:1, width: deviceWidth, borderWidth:0 }}
+            contentContainerStyle={{minHeight:200, width: 'auto', paddingHorizontal: 0 }}
+          >
+            {
+
+              formTemplate && formTemplate.data.map(element => {
+                const Component = getComponent(element.component);
+                return Component && (
+                  <Component
+                    index={element.index}
+                    name={element.field_name}
+                    meta={element.meta}
+                    style={element.style}
+                    value={getValue(element)}
+                    onChangeInputValue={onChangeInputValue(element.field_name, element.component)}
+                    isMandatory={element.is_mandatory === 'true'}
+                    imgView={imgView}
+                    inputStyle={inputStyle}
+                  />
+                );
+              })
+
+            }
+          </ScrollView>
+          {/* Pagination Dots */}
+          <View style={styles.pagination}>
+            {nArray?.map((index) => (
+              <View
+                key={index}
+                style={[
+                  styles.dot,
+                  activePage === index ? styles.activeDot : styles.inactiveDot,
+                ]}
+              />
+            ))}
+          </View>
+
+        </View>
+
+
+      )
+
+    } else {
+
+      return (
+        <View style={styles.container}>
+          {
+            formTemplate && formTemplate.data.map(element => {
+              const Component = getComponent(element.component);
+              return Component && (
+                <Component
+                  index={element.index}
+                  name={element.field_name}
+                  meta={element.meta}
+                  style={element.style}
+                  value={getValue(element)}
+                  onChangeInputValue={onChangeInputValue(element.field_name, element.component)}
+                  isMandatory={element.is_mandatory === 'true'}
+                  imgView={imgView}
+                  inputStyle={inputStyle}
+                />
+              );
+            })
+
+          }
+
+
+          {hideButtons ?
+            null :
+            (isTherapistQuestionnaire ?
+              <View style={{ flexDirection: 'row', justifyContent: 'flex-end', marginTop: 40 }}>
+                <Button
+                  accessibilityLabel="submit-button"
+                  title="Save Draft"
+                  buttonStyle={[styles.button, buttonStyles, { backgroundColor: 'transparent' }]}
+                  titleStyle={[styles.buttonText, { color: '#EE7887' }]}
+                  onPress={() => onSumbitButtonPress(false)}
+                  disabled={!isValidFormFields}
+                />
+                <Button
+                  accessibilityLabel="submit-button"
+                  title="Save & Send to Therapist "
+                  buttonStyle={[styles.button, buttonStyles]}
+                  titleStyle={styles.buttonText}
+                  onPress={() => onSumbitButtonPress(true)}
+                  disabled={!isValidFormFields}
+                />
+              </View>
+
+              :
+              <View style={{ flexDirection: 'row', justifyContent: 'flex-end', marginTop: 40 }}>
+                <Button
+                  accessibilityLabel="submit-button"
+                  title="Save"
+                  buttonStyle={[styles.button, buttonStyles, { backgroundColor: 'transparent' }]}
+                  titleStyle={[styles.buttonText, { color: '#EE7887' }]}
+                  onPress={() => onSumbitButtonPress(false)}
+                  disabled={!isValidFormFields}
+                />
+              </View>
+            )
+          }
+        </View>
+      );
     }
+  });
 
-    return true;
-  };
 
-  return (
-    <View style={styles.container}>
-      {
-        formTemplate && formTemplate.data.map(element => {
-          const Component = getComponent(element.component);
-          return Component && (
-          <Component
-            index={element.index}
-            name={element.field_name}
-            meta={element.meta}
-            style={element.style}
-            value={getValue(element)}
-            onChangeInputValue={onChangeInputValue(element.field_name, element.component)}
-            isMandatory={element.is_mandatory === 'true'}
-          />
-          );
-        })
-      }
-      <Button
-        accessibilityLabel="submit-button"
-        title="Submit"
-        buttonStyle={[styles.button, buttonStyles]}
-        onPress={onSumbitButtonPress}
-        disabled={!isValidFormFields}
-      />
-    </View>
-  );
-}
+export default DynamicForm;
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    flexShrink: 1,
   },
   button: {
-    width: '40%',
+    // width: '40%',
+    flex: 1,
     alignSelf: 'center',
-    margin: 20
-  }
+    justifyContent: 'center',
+    margin: 10,
+    borderRadius: 10,
+  },
+  buttonText: {
+    fontFamily: 'Nunito-Regular',
+    fontSize: 16,
+    fontWeight: '600'
+  },
+  page: {
+    width: deviceWidth, // Full width for each page
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100%', // Full height of the screen
+  },
+  text: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#fff',
+  },
+  pagination: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginVertical: 10,
+    borderWidth: 0,
+  },
+  dot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    marginHorizontal: 5,
+  },
+  activeDot: {
+    backgroundColor: '#EE7887',
+  },
+  inactiveDot: {
+    backgroundColor: '#FFFFFF',
+  },
 });
 
 DynamicForm.propTypes = {
   formTemplate: PropTypes.object.isRequired,
   onSubmit: PropTypes.func.isRequired,
-};
+};
\ No newline at end of file
diff --git a/src/styles.js b/src/styles.js
index f429a34..b3974df 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -2,5 +2,5 @@ export const color = {
   WHITE: '#FFFFFF',
   BLACK: '#000000',
   GREY: '#8E8E8E',
-  YELLOW: '#FFDE2F',
+  YELLOW: '#EE7887',
 };