diff --git a/src/views/uikit/ChartDoc.vue b/src/views/uikit/ChartDoc.vue
index 6503faf..f4b74c5 100644
--- a/src/views/uikit/ChartDoc.vue
+++ b/src/views/uikit/ChartDoc.vue
@@ -233,7 +233,7 @@ watch(
 </script>
 
 <template>
-    <div class="grid grid-cols-12 gap-4 p-fluid">
+    <Fluid class="grid grid-cols-12 gap-4">
         <div class="col-span-12 xl:col-span-6">
             <div class="card">
                 <h5>Linear Chart</h5>
@@ -270,5 +270,5 @@ watch(
                 <Chart type="radar" :data="radarData" :options="radarOptions"></Chart>
             </div>
         </div>
-    </div>
+    </Fluid>
 </template>
diff --git a/src/views/uikit/FloatLabelDoc.vue b/src/views/uikit/FloatLabelDoc.vue
index 0d98caa..dd23445 100644
--- a/src/views/uikit/FloatLabelDoc.vue
+++ b/src/views/uikit/FloatLabelDoc.vue
@@ -42,26 +42,26 @@ const searchCountry = (event) => {
 </script>
 
 <template>
-    <div class="card">
+    <Fluid class="card">
         <h5>Float Label</h5>
         <div class="flex flex-col md:flex-row gap-6">
             <FloatLabel class="md:w-1/3">
-                <InputText type="text" id="inputtext" v-model="value1" fluid />
+                <InputText type="text" id="inputtext" v-model="value1" />
                 <label for="inputtext">InputText</label>
             </FloatLabel>
             <FloatLabel class="md:w-1/3">
-                <AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" fluid inputClass="w-full" />
+                <AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" inputClass="w-full" />
                 <label for="autocomplete">AutoComplete</label>
             </FloatLabel>
             <FloatLabel class="md:w-1/3">
-                <DatePicker inputId="calendar" v-model="value3" fluid />
+                <DatePicker inputId="calendar" v-model="value3" />
                 <label for="calendar">DatePicker</label>
             </FloatLabel>
         </div>
 
         <div class="flex flex-col md:flex-row gap-6 mt-6">
             <FloatLabel class="md:w-1/3">
-                <AutoComplete inputId="chips" v-model="value4" multiple :typeahead="false" fluid />
+                <AutoComplete inputId="chips" v-model="value4" multiple :typeahead="false" />
                 <label for="chips">Chips</label>
             </FloatLabel>
             <FloatLabel class="md:w-1/3">
@@ -69,7 +69,7 @@ const searchCountry = (event) => {
                 <label for="inputmask">InputMask</label>
             </FloatLabel>
             <FloatLabel class="md:w-1/3">
-                <InputNumber id="inputnumber" v-model="value6" fluid />
+                <InputNumber id="inputnumber" v-model="value6" />
                 <label for="inputnumber">InputNumber</label>
             </FloatLabel>
         </div>
@@ -80,7 +80,7 @@ const searchCountry = (event) => {
                     <i class="pi pi-user"></i>
                 </InputGroupAddon>
                 <FloatLabel>
-                    <InputText type="text" id="inputgroup" v-model="value7" fluid />
+                    <InputText type="text" id="inputgroup" v-model="value7" />
                     <label for="inputgroup">InputGroup</label>
                 </FloatLabel>
             </InputGroup>
@@ -89,16 +89,16 @@ const searchCountry = (event) => {
                 <label for="dropdown">Select</label>
             </FloatLabel>
             <FloatLabel class="md:w-1/3">
-                <MultiSelect id="multiselect" :options="cities" v-model="value9" optionLabel="name" :filter="false" fluid />
+                <MultiSelect id="multiselect" :options="cities" v-model="value9" optionLabel="name" :filter="false" />
                 <label for="multiselect">MultiSelect</label>
             </FloatLabel>
         </div>
 
         <div class="flex flex-col md:flex-row gap-6 mt-6">
             <FloatLabel class="md:w-1/3">
-                <Textarea inputId="textarea" rows="3" cols="30" v-model="value10" fluid />
+                <Textarea inputId="textarea" rows="3" cols="30" v-model="value10" />
                 <label for="textarea">Textarea</label>
             </FloatLabel>
         </div>
-    </div>
+    </Fluid>
 </template>
diff --git a/src/views/uikit/InputDoc.vue b/src/views/uikit/InputDoc.vue
index c32d8c7..647f380 100644
--- a/src/views/uikit/InputDoc.vue
+++ b/src/views/uikit/InputDoc.vue
@@ -77,51 +77,51 @@ const searchCountry = (event) => {
 </script>
 
 <template>
-    <div class="flex flex-col md:flex-row gap-6">
+    <Fluid class="flex flex-col md:flex-row gap-6">
         <div class="md:w-1/2">
             <div class="card flex flex-col gap-4">
                 <h5>InputText</h5>
                 <div class="flex flex-col md:flex-row gap-4">
-                    <InputText type="text" placeholder="Default" fluid />
-                    <InputText type="text" placeholder="Disabled" :disabled="true" fluid />
-                    <InputText type="text" placeholder="Invalid" invalid fluid />
+                    <InputText type="text" placeholder="Default" />
+                    <InputText type="text" placeholder="Disabled" :disabled="true" />
+                    <InputText type="text" placeholder="Invalid" invalid />
                 </div>
 
                 <h5 class="mt-6">Icons</h5>
                 <IconField>
                     <InputIcon class="pi pi-user" />
-                    <InputText type="text" placeholder="Username" fluid />
+                    <InputText type="text" placeholder="Username" />
                 </IconField>
                 <IconField iconPosition="left">
-                    <InputText type="text" placeholder="Search" fluid />
+                    <InputText type="text" placeholder="Search" />
                     <InputIcon class="pi pi-search" />
                 </IconField>
 
                 <h5 class="mt-6">Float Label</h5>
                 <FloatLabel>
-                    <InputText id="username" type="text" v-model="floatValue" fluid />
+                    <InputText id="username" type="text" v-model="floatValue" />
                     <label for="username">Username</label>
                 </FloatLabel>
 
                 <h5 class="mt-6">Textarea</h5>
-                <Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" fluid />
+                <Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" />
 
                 <h5 class="mt-6">AutoComplete</h5>
-                <AutoComplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name" fluid />
+                <AutoComplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name" />
 
                 <h5 class="mt-6">DatePicker</h5>
-                <DatePicker :showIcon="true" :showButtonBar="true" v-model="calendarValue" fluid></DatePicker>
+                <DatePicker :showIcon="true" :showButtonBar="true" v-model="calendarValue"></DatePicker>
 
                 <h5 class="mt-6">Spinner</h5>
-                <InputNumber v-model="inputNumberValue" showButtons mode="decimal" fluid></InputNumber>
+                <InputNumber v-model="inputNumberValue" showButtons mode="decimal"></InputNumber>
 
                 <h5 class="mt-6">Chips</h5>
-                <AutoComplete v-model="chipsValue" :typeahead="false" multiple fluid />
+                <AutoComplete v-model="chipsValue" :typeahead="false" multiple />
             </div>
 
             <div class="card flex flex-col gap-4">
                 <h5>Slider</h5>
-                <InputText v-model.number="sliderValue" fluid />
+                <InputText v-model.number="sliderValue" />
                 <Slider v-model="sliderValue" />
 
                 <div class="flex flex-row mt-6">
@@ -182,10 +182,10 @@ const searchCountry = (event) => {
                 <Listbox v-model="listboxValue" :options="listboxValues" optionLabel="name" :filter="true" />
 
                 <h5 class="mt-6">Select</h5>
-                <Select v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" fluid />
+                <Select v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" />
 
                 <h5 class="mt-6">MultiSelect</h5>
-                <MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name" placeholder="Select Countries" :filter="true" fluid>
+                <MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name" placeholder="Select Countries" :filter="true">
                     <template #value="slotProps">
                         <div class="inline-flex items-center py-1 px-2 bg-primary text-primary-contrast rounded-border mr-2" v-for="option of slotProps.value" :key="option.code">
                             <span :class="'mr-2 flag flag-' + option.code.toLowerCase()" style="width: 18px; height: 12px" />
@@ -204,7 +204,7 @@ const searchCountry = (event) => {
                 </MultiSelect>
 
                 <h5 class="mt-6">TreeSelect</h5>
-                <TreeSelect v-model="selectedNode" :options="treeSelectNodes" placeholder="Select Item" fluid></TreeSelect>
+                <TreeSelect v-model="selectedNode" :options="treeSelectNodes" placeholder="Select Item"></TreeSelect>
             </div>
 
             <div class="card flex flex-col gap-4">
@@ -218,9 +218,9 @@ const searchCountry = (event) => {
                 <SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name" :multiple="true" />
             </div>
         </div>
-    </div>
+    </Fluid>
 
-    <div class="flex mt-6">
+    <Fluid class="flex mt-6">
         <div class="card flex flex-col gap-4 w-full">
             <h5>Input Groups</h5>
             <div class="flex flex-col md:flex-row gap-4">
@@ -228,7 +228,7 @@ const searchCountry = (event) => {
                     <InputGroupAddon>
                         <i class="pi pi-user"></i>
                     </InputGroupAddon>
-                    <InputText placeholder="Username" fluid />
+                    <InputText placeholder="Username" />
                 </InputGroup>
                 <InputGroup>
                     <InputGroupAddon>
@@ -237,7 +237,7 @@ const searchCountry = (event) => {
                     <InputGroupAddon>
                         <i class="pi pi-star-fill"></i>
                     </InputGroupAddon>
-                    <InputNumber placeholder="Price" fluid />
+                    <InputNumber placeholder="Price" />
                     <InputGroupAddon>$</InputGroupAddon>
                     <InputGroupAddon>.00</InputGroupAddon>
                 </InputGroup>
@@ -245,15 +245,15 @@ const searchCountry = (event) => {
             <div class="flex flex-col md:flex-row gap-4">
                 <InputGroup>
                     <Button label="Search" />
-                    <InputText placeholder="Keyword" fluid />
+                    <InputText placeholder="Keyword" />
                 </InputGroup>
                 <InputGroup>
                     <InputGroupAddon>
                         <Checkbox v-model="inputGroupValue" :binary="true" />
                     </InputGroupAddon>
-                    <InputText placeholder="Confirm" fluid />
+                    <InputText placeholder="Confirm" />
                 </InputGroup>
             </div>
         </div>
-    </div>
+    </Fluid>
 </template>
diff --git a/src/views/uikit/InvalidStateDoc.vue b/src/views/uikit/InvalidStateDoc.vue
index b1ddc5c..c8f1bb5 100644
--- a/src/views/uikit/InvalidStateDoc.vue
+++ b/src/views/uikit/InvalidStateDoc.vue
@@ -43,13 +43,13 @@ const searchCountry = (event) => {
 </script>
 
 <template>
-    <div class="card">
+    <Fluid class="card">
         <h5>Invalid State</h5>
         <div class="flex flex-col md:flex-row gap-6">
             <div class="md:w-1/2">
                 <div class="flex flex-col gap-2">
                     <label for="inputtext">InputText</label>
-                    <InputText id="inputtext" type="text" v-model="value1" invalid fluid />
+                    <InputText id="inputtext" type="text" v-model="value1" invalid />
                 </div>
                 <div class="flex flex-col gap-2">
                     <label for="autocomplete">AutoComplete</label>
@@ -57,38 +57,38 @@ const searchCountry = (event) => {
                 </div>
                 <div class="flex flex-col gap-2">
                     <label for="calendar">DatePicker</label>
-                    <DatePicker id="calendar" v-model="value3" invalid :showIcon="true" fluid />
+                    <DatePicker id="calendar" v-model="value3" invalid :showIcon="true" />
                 </div>
                 <div class="flex flex-col gap-2">
                     <label for="chips">Chips</label>
-                    <AutoComplete id="chips" v-model="value4" invalid fluid multiple :typeahead="false" />
+                    <AutoComplete id="chips" v-model="value4" invalid multiple :typeahead="false" />
                 </div>
                 <div class="flex flex-col gap-2">
                     <label for="password">Password</label>
-                    <Password id="password" v-model="value10" invalid fluid />
+                    <Password id="password" v-model="value10" invalid />
                 </div>
             </div>
             <div class="md:w-1/2">
                 <div class="flex flex-col gap-2">
                     <label for="inputmask">InputMask</label>
-                    <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" invalid fluid />
+                    <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" invalid />
                 </div>
                 <div class="flex flex-col gap-2">
                     <label for="inputnumber">InputNumber</label>
-                    <InputNumber id="inputnumber" v-model="value6" invalid fluid />
+                    <InputNumber id="inputnumber" v-model="value6" invalid />
                 </div>
                 <div class="flex flex-col gap-2"></div>
                 <label for="dropdown">Select</label>
-                <Select id="dropdown" v-model="value7" :options="cities" optionLabel="name" invalid fluid />
+                <Select id="dropdown" v-model="value7" :options="cities" optionLabel="name" invalid />
                 <div class="flex flex-col gap-2">
                     <label for="multiselect">MultiSelect</label>
-                    <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" invalid fluid />
+                    <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" invalid />
                 </div>
                 <div class="flex flex-col gap-2">
                     <label for="textarea">Textarea</label>
-                    <Textarea id="textarea" v-model="value9" rows="3" invalid fluid />
+                    <Textarea id="textarea" v-model="value9" rows="3" invalid />
                 </div>
             </div>
         </div>
-    </div>
+    </Fluid>
 </template>