diff --git a/src/components/form/components/AddressSelection.tsx b/src/components/form/components/AddressSelection.tsx
index 55556c78..6dc9f0f5 100644
--- a/src/components/form/components/AddressSelection.tsx
+++ b/src/components/form/components/AddressSelection.tsx
@@ -63,7 +63,13 @@ const AddressSelection: React.FC<IAddressSelection> = (props) => {
             orientation="vertical"
           >
             {currentCase?.addresses?.map((address) => {
-              return <RNRadioButton id={address.referenceId} value={getAddressString(address)} />;
+              return (
+                <RNRadioButton
+                  id={address.referenceId}
+                  value={getAddressString(address)}
+                  containerStyle={GenericStyles.containerStyle}
+                />
+              );
             })}
           </RadioGroup>
         )}
diff --git a/src/components/form/components/Checkbox.tsx b/src/components/form/components/Checkbox.tsx
index e86bb8fb..7f5a30e2 100644
--- a/src/components/form/components/Checkbox.tsx
+++ b/src/components/form/components/Checkbox.tsx
@@ -1,6 +1,7 @@
 import { StyleSheet, View } from 'react-native';
 import React from 'react';
 import RNCheckbox from '../../../../RN-UI-LIB/src/components/chechbox/Checkbox';
+import { GenericStyles } from '../../../../RN-UI-LIB/src/styles';
 
 interface ICheckbox {
   onSelectionChange: (val: boolean) => void;
@@ -9,7 +10,10 @@ interface ICheckbox {
 const Checkbox = ({ onSelectionChange }: ICheckbox) => {
   return (
     <View>
-      <RNCheckbox onSelectionChange={onSelectionChange} />
+      <RNCheckbox
+        onSelectionChange={onSelectionChange}
+        checkboxStyle={GenericStyles.containerStyle}
+      />
     </View>
   );
 };
diff --git a/src/components/form/components/CheckboxGroup.tsx b/src/components/form/components/CheckboxGroup.tsx
index 13acbed2..b2c19068 100644
--- a/src/components/form/components/CheckboxGroup.tsx
+++ b/src/components/form/components/CheckboxGroup.tsx
@@ -99,6 +99,7 @@ const CheckBoxGroup: React.FC<ICheckBoxGroup> = (props) => {
               onSelectionChange={(change) => handleChange(change, onChange)}
               defaultValue={value?.answer}
               options={optiosList}
+              checkboxStyle={GenericStyles.containerStyle}
             />
           );
         }}
diff --git a/src/components/form/components/DateInput.tsx b/src/components/form/components/DateInput.tsx
index 495167ee..9cb9e0ba 100644
--- a/src/components/form/components/DateInput.tsx
+++ b/src/components/form/components/DateInput.tsx
@@ -86,7 +86,7 @@ const DateInput: React.FC<IDateInput> = (props) => {
           <WebBasedDatePicker
             displayFormat="DD-MM-YYYY"
             min={new Date().toString()}
-            containerStyle={GenericStyles.mt8}
+            containerStyle={GenericStyles.containerStyle}
             type="date"
             onChange={(text) => handleChange(text, onChange)}
             outputFormat="DD-MM-YYYY"
diff --git a/src/components/form/components/Dropdown.tsx b/src/components/form/components/Dropdown.tsx
index 052861a6..190f589c 100644
--- a/src/components/form/components/Dropdown.tsx
+++ b/src/components/form/components/Dropdown.tsx
@@ -98,6 +98,7 @@ const DropDown: React.FC<IDropDown> = (props) => {
             onValueChange={(change) => handleChange(change, onChange)}
             placeholder={question.metadata?.placeholder}
             value={value?.answer}
+            containerStyle={GenericStyles.containerStyle}
           >
             {question.options.map((option: keyof typeof options) => {
               return <RNOptions id={option as string} label={options[option]?.text} />;
diff --git a/src/components/form/components/ImageUpload.tsx b/src/components/form/components/ImageUpload.tsx
index 5657f824..028c21bb 100644
--- a/src/components/form/components/ImageUpload.tsx
+++ b/src/components/form/components/ImageUpload.tsx
@@ -124,7 +124,7 @@ const ImageUpload: React.FC<IImageUpload> = (props) => {
   // TODO : add the validator back when firestore is fixed.
   return (
     <View style={[GenericStyles.mt12]}>
-      <Text dark bold style={GenericStyles.mb12}>
+      <Text dark bold style={GenericStyles.mb4}>
         {question.text}{' '}
         {isQuestionMandatory(question) && <Text style={GenericStyles.redText}>*</Text>}
       </Text>
@@ -136,6 +136,7 @@ const ImageUpload: React.FC<IImageUpload> = (props) => {
             <PhotoUpload
               onPictureClickSuccess={(clickedImage) => handleChange(clickedImage, onChange)}
               showUploadFromGalleryOption={true}
+              containerStyle={GenericStyles.containerStyle}
             />
           )}
           name={`widgetContext.${widgetId}.sectionContext.${props.sectionId}.questionContext.${questionId}`}
diff --git a/src/components/form/components/PhoneNumberSelection.tsx b/src/components/form/components/PhoneNumberSelection.tsx
index 32c4d264..4561d4f0 100644
--- a/src/components/form/components/PhoneNumberSelection.tsx
+++ b/src/components/form/components/PhoneNumberSelection.tsx
@@ -64,7 +64,11 @@ const PhoneNumberSelection: React.FC<IPhoneNumberSelection> = (props) => {
           >
             {currentCase.phoneNumbers?.map((phoneNumber, index) => {
               return (
-                <RNRadioButton id={phoneNumber.number} value={getPhoneNumberString(phoneNumber)} />
+                <RNRadioButton
+                  id={phoneNumber.number}
+                  value={getPhoneNumberString(phoneNumber)}
+                  containerStyle={GenericStyles.containerStyle}
+                />
               );
             })}
           </RadioGroup>
diff --git a/src/components/form/components/RadioButton.tsx b/src/components/form/components/RadioButton.tsx
index 789ca79c..abf849a2 100644
--- a/src/components/form/components/RadioButton.tsx
+++ b/src/components/form/components/RadioButton.tsx
@@ -113,10 +113,20 @@ const RadioButton: React.FC<IRadioButton> = (props) => {
           >
             {question?.metadata.buttonType === 'button'
               ? question.options.map((option: keyof typeof options) => {
-                  return <RNRadioButton id={option as string} value={options[option]?.text} />;
+                  return (
+                    <RNRadioButton
+                      id={option as string}
+                      value={options[option]?.text}
+                      containerStyle={GenericStyles.containerStyle}
+                    />
+                  );
                 })
               : question.options.map((option: keyof typeof options) => (
-                  <RadioChip id={option as string} value={options[option]?.text} />
+                  <RadioChip
+                    id={option as string}
+                    value={options[option]?.text}
+                    containerStyle={GenericStyles.whiteBackground}
+                  />
                 ))}
           </RadioGroup>
         )}
diff --git a/src/components/form/components/Rating.tsx b/src/components/form/components/Rating.tsx
index f22856d0..2a59255c 100644
--- a/src/components/form/components/Rating.tsx
+++ b/src/components/form/components/Rating.tsx
@@ -55,7 +55,7 @@ const Rating: React.FC<IRating> = (props) => {
 
   return (
     <View style={[GenericStyles.mt12]}>
-      <Text dark bold style={GenericStyles.mb12}>
+      <Text dark bold style={GenericStyles.mb4}>
         {question.text}{' '}
         {isQuestionMandatory(question) && <Text style={GenericStyles.redText}>*</Text>}
       </Text>
@@ -63,13 +63,15 @@ const Rating: React.FC<IRating> = (props) => {
         control={props.control}
         rules={{ validate: (data) => validateInput(data, question.metadata.validators) }}
         render={({ field: { onChange, value } }) => (
-          <StarRating
-            minText={'Unhappy'}
-            maxText={'Happy'}
-            onSelectionChange={(value) => handleChange(value, onChange)}
-            defaultValue={value?.answer}
-            maxRating={5}
-          />
+          <View style={GenericStyles.containerStyle}>
+            <StarRating
+              minText={'Unhappy'}
+              maxText={'Happy'}
+              onSelectionChange={(value) => handleChange(value, onChange)}
+              defaultValue={value?.answer}
+              maxRating={5}
+            />
+          </View>
         )}
         name={`widgetContext.${widgetId}.sectionContext.${props.sectionId}.questionContext.${questionId}`}
       />
diff --git a/src/components/form/components/TextInput.tsx b/src/components/form/components/TextInput.tsx
index 5f01d093..87ae3fe6 100644
--- a/src/components/form/components/TextInput.tsx
+++ b/src/components/form/components/TextInput.tsx
@@ -1,4 +1,4 @@
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import React from 'react';
 import RNTextInput from '../../../../RN-UI-LIB/src/components/TextInput';
 import { GenericStyles } from '../../../../RN-UI-LIB/src/styles';
@@ -73,6 +73,7 @@ const TextInput: React.FC<ITextInput> = (props) => {
             value={value?.answer || ''}
             containerStyle={[GenericStyles.mt12]}
             placeholder={'Enter here'}
+            inputContainerStyle={styles.inputContainerStyle}
           />
         )}
         name={`widgetContext.${widgetId}.sectionContext.${props.sectionId}.questionContext.${questionId}`}
@@ -88,4 +89,12 @@ const TextInput: React.FC<ITextInput> = (props) => {
   );
 };
 
+const styles = StyleSheet.create({
+  inputContainerStyle: {
+    ...GenericStyles.containerStyle,
+    padding: 0,
+    marginTop: 0,
+  },
+});
+
 export default TextInput;
diff --git a/src/components/form/components/TimeInput.tsx b/src/components/form/components/TimeInput.tsx
index 125d35b0..da9ee16f 100644
--- a/src/components/form/components/TimeInput.tsx
+++ b/src/components/form/components/TimeInput.tsx
@@ -82,7 +82,7 @@ const TimeInput: React.FC<ITimeInput> = (props) => {
         render={({ field: { onChange, value } }) => (
           <WebBasedDatePicker
             value={value}
-            containerStyle={GenericStyles.mt8}
+            containerStyle={GenericStyles.containerStyle}
             type="time"
             onChange={(text) => {
               handleChange(text, onChange);
diff --git a/src/components/form/index.tsx b/src/components/form/index.tsx
index a0e2ea63..a4f819d9 100644
--- a/src/components/form/index.tsx
+++ b/src/components/form/index.tsx
@@ -382,7 +382,7 @@ const Widget: React.FC<IWidget> = (props) => {
 
   return (
     <Layout>
-      <SafeAreaView style={[GenericStyles.whiteBackground, GenericStyles.fill]}>
+      <SafeAreaView style={[GenericStyles.silverBackground, GenericStyles.fill]}>
         <View style={[styles.header, GenericStyles.row, { alignItems: 'center' }]}>
           <TouchableHighlight
             style={styles.iconContainer}
@@ -409,8 +409,9 @@ const Widget: React.FC<IWidget> = (props) => {
         <ScrollView
           contentContainerStyle={[
             GenericStyles.p16,
-            GenericStyles.whiteBackground,
+            GenericStyles.silverBackground,
             name === CommonCaseWidgetId.END && GenericStyles.fill,
+            name !== CommonCaseWidgetId.END && styles.questionsToBottom,
           ]}
         >
           {name === CommonCaseWidgetId.END ? (
@@ -419,16 +420,7 @@ const Widget: React.FC<IWidget> = (props) => {
             <>
               {sections?.map((section: any, index: number) => {
                 return (
-                  <View
-                    key={section + index}
-                    style={[
-                      GenericStyles.p16,
-                      GenericStyles.pt12,
-                      GenericStyles.whiteBackground,
-                      getShadowStyle(5),
-                      styles.br8,
-                    ]}
-                  >
+                  <View key={section + index} style={[GenericStyles.pt12, styles.br8]}>
                     <RenderQuestion
                       questionMap={sectionMap[section].questions}
                       journeyId={journey}
@@ -517,6 +509,11 @@ const styles = StyleSheet.create({
     paddingVertical: 22,
     paddingHorizontal: 16,
   },
+  questionsToBottom: {
+    flexGrow: 1,
+    justifyContent: 'flex-end',
+    paddingTop: 0,
+  },
 });
 
 export default Widget;