diff --git a/hotel-management/README.md b/hotel-management/README.md
index 462f6a9..f857acd 100644
--- a/hotel-management/README.md
+++ b/hotel-management/README.md
@@ -6,7 +6,7 @@
 
 - Introduce: Build a hotel management web application using HTML5, CSS3, Typescript, json-server, React and compile by Vite.
 - Plan: [Link](https://docs.google.com/document/d/1t2kx17iGCceEe3EbaKO6-3g70ejOJ1PAu9u3KXSKWi4/edit?usp=sharing)
-- Deploy: _Update later_
+- Deploy: [Link](https://hotel-management.loiphan.com/)
 
 ## Requirements
 
@@ -31,7 +31,7 @@
 
 ## Technical
 
-- [HTML5](https://www.tutorialspoint.com/html5/html5_overview.htm): CSS (Cascading Style Sheets) consist of a group of formatting rules that you use to control the layout and appearance of the content on a web page.
+- [HTML5](https://www.tutorialspoint.com/html5/html5_overview.htm): HTML5 is the latest standard of Hypertext Markup Language, the code that describes the structure and presentation of web pages.
 - [CSS3](https://www.htmlgoodies.com/html5/an-overview-of-css3/): Cascading Style Sheets (CSS) is a language used to illustrate a document’s look, style, and format in any markup language. In simple words, it is used to style and organize the layout of Web pages. CSS3 is the latest version of an earlier CSS version, CSS2.
 - [Typescript](https://www.typescriptlang.org/): TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
 - [React](https://react.dev/): React is a framework that employs Webpack to automatically compile React, JSX, and ES6 code while handling CSS file prefixes. React is a JavaScript-based UI development library. Although React is a library rather than a language, it is widely used in web development.
@@ -42,7 +42,7 @@
 
 - Timeline:
   - Estimate: 11 days
-  - Actual: -- days.
+  - Actual: 13 days.
   - Calendar:
     - Start: 2023/10/16
     - End: 2023/10/30
diff --git a/hotel-management/src/components/AppLayout/index.tsx b/hotel-management/src/components/AppLayout/index.tsx
index 49b39e7..f2f96cd 100644
--- a/hotel-management/src/components/AppLayout/index.tsx
+++ b/hotel-management/src/components/AppLayout/index.tsx
@@ -10,8 +10,8 @@ import { Main, StyledAppLayout } from './styled';
 const AppLayout = () => {
   return (
     <StyledAppLayout>
-      <Header />
-      <Sidebar />
+      <Header accountName='Admin'/>
+      <Sidebar heading='Hotel Management'/>
       <Main>
         <Outlet />
       </Main>
diff --git a/hotel-management/src/components/Dialog/index.tsx b/hotel-management/src/components/Dialog/index.tsx
index 1bedac9..d3b010d 100644
--- a/hotel-management/src/components/Dialog/index.tsx
+++ b/hotel-management/src/components/Dialog/index.tsx
@@ -1,11 +1,19 @@
 import { forwardRef } from 'react';
 
-// Components
-import { IDialogProps } from '../../globals/interfaces';
-
 // Styled
 import { StyledBody, StyledDialog, StyledTitle } from './styled';
 
+export interface IDialogProps<T> {
+  title?: string;
+  children?: JSX.Element[] | JSX.Element;
+  onClose?: () => void;
+  reload?: boolean;
+  setReload?: React.Dispatch<React.SetStateAction<boolean>>;
+  ref?: React.MutableRefObject<HTMLDialogElement | undefined>;
+  data?: T | null;
+  isAdd?: boolean;
+}
+
 const Dialog = forwardRef((props, ref) => {
   const { title, children, onClose } = props as IDialogProps<unknown>;
   return (
diff --git a/hotel-management/src/components/Header/index.tsx b/hotel-management/src/components/Header/index.tsx
index 2d20917..c329fe0 100644
--- a/hotel-management/src/components/Header/index.tsx
+++ b/hotel-management/src/components/Header/index.tsx
@@ -4,10 +4,14 @@ import HeaderMenu from '../HeaderMenu';
 // Styled
 import { StyledHeader } from './styled';
 
-const Header = () => {
+interface IHeader {
+  accountName: string
+}
+
+const Header = ({accountName}: IHeader) => {
   return (
     <StyledHeader>
-      <p>Hi, Admin!</p>
+      <p>Hi, {accountName}!</p>
       <HeaderMenu />
     </StyledHeader>
   );
diff --git a/hotel-management/src/components/FormRow/index.tsx b/hotel-management/src/components/LabelControl/index.tsx
similarity index 100%
rename from hotel-management/src/components/FormRow/index.tsx
rename to hotel-management/src/components/LabelControl/index.tsx
diff --git a/hotel-management/src/components/FormRow/styled.ts b/hotel-management/src/components/LabelControl/styled.ts
similarity index 100%
rename from hotel-management/src/components/FormRow/styled.ts
rename to hotel-management/src/components/LabelControl/styled.ts
diff --git a/hotel-management/src/components/Menus/Menus.tsx b/hotel-management/src/components/Menus/index.tsx
similarity index 95%
rename from hotel-management/src/components/Menus/Menus.tsx
rename to hotel-management/src/components/Menus/index.tsx
index feb529a..b4ef286 100644
--- a/hotel-management/src/components/Menus/Menus.tsx
+++ b/hotel-management/src/components/Menus/index.tsx
@@ -5,12 +5,15 @@ import { HiEllipsisVertical } from 'react-icons/hi2';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { StyledMenu, StyledButton, StyledList, StyledToggle } from './styled';
 
-// Interfaces
-import { IButton } from '../../globals/interfaces';
-
 // Contexts
 import MenusContext from '../../contexts/MenuContext';
 
+interface IButton {
+  children?: string;
+  icon?: JSX.Element;
+  onClick?: () => void;
+}
+
 const Menus = ({ children }: { children: JSX.Element }) => {
   const [openId, setOpenId] = useState('');
 
@@ -30,7 +33,6 @@ const Toggle = ({ id }: { id: string }): React.JSX.Element => {
   const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.stopPropagation();
 
-    // prettier-ignore
     openId === '' || openId !== id 
       ? open!(id) 
       : close!();
diff --git a/hotel-management/src/components/Nav/index.tsx b/hotel-management/src/components/Nav/index.tsx
index 4de47fa..6ce3f2a 100644
--- a/hotel-management/src/components/Nav/index.tsx
+++ b/hotel-management/src/components/Nav/index.tsx
@@ -6,18 +6,21 @@ import { BsHouseDoorFill } from 'react-icons/bs';
 // Styled
 import { StyledNav, StyledNavLink } from './styled';
 
+// Constants
+import { DASHBOARD, ROOM, USER } from '../../constants/path';
+
 const Nav = () => {
   return (
     <StyledNav>
-      <StyledNavLink to={'/dashboard'}>
+      <StyledNavLink to={DASHBOARD}>
         <MdSpaceDashboard />
         <span>Dashboard</span>
       </StyledNavLink>
-      <StyledNavLink to={'/user'}>
+      <StyledNavLink to={USER}>
         <HiUsers />
         <span>User</span>
       </StyledNavLink>
-      <StyledNavLink to={'/room'}>
+      <StyledNavLink to={ROOM}>
         <BsHouseDoorFill />
         <span>Room</span>
       </StyledNavLink>
diff --git a/hotel-management/src/components/Select/index.tsx b/hotel-management/src/components/Select/index.tsx
index 448c2be..4f5ee25 100644
--- a/hotel-management/src/components/Select/index.tsx
+++ b/hotel-management/src/components/Select/index.tsx
@@ -1,6 +1,9 @@
-import { ISelectOptions } from '../../globals/interfaces';
 import { StyledSelect } from './styled';
 
+export interface ISelectOptions {
+  value: string;
+  label: string;
+}
 interface ISelect {
   options: ISelectOptions[];
   value: string;
diff --git a/hotel-management/src/components/Sidebar/index.tsx b/hotel-management/src/components/Sidebar/index.tsx
index 3b0c4d2..3792fe6 100644
--- a/hotel-management/src/components/Sidebar/index.tsx
+++ b/hotel-management/src/components/Sidebar/index.tsx
@@ -4,10 +4,14 @@ import Nav from '../Nav';
 // Styled
 import { Heading, StyledSidebar } from './styled';
 
-const Sidebar = () => {
+interface ISidebar {
+  heading: string;
+}
+
+const Sidebar = ({heading}: ISidebar) => {
   return (
     <StyledSidebar>
-      <Heading>Hotel Management</Heading>
+      <Heading>{heading}</Heading>
       <Nav />
     </StyledSidebar>
   );
diff --git a/hotel-management/src/components/SortBy/index.tsx b/hotel-management/src/components/SortBy/index.tsx
index ea70323..1255c8a 100644
--- a/hotel-management/src/components/SortBy/index.tsx
+++ b/hotel-management/src/components/SortBy/index.tsx
@@ -1,8 +1,8 @@
 import { useSearchParams } from 'react-router-dom';
+import { memo } from 'react';
 
 // Components
 import Select from '../Select';
-import { memo } from 'react';
 
 interface ISortByProps {
   options: {
diff --git a/hotel-management/src/components/Table/index.tsx b/hotel-management/src/components/Table/index.tsx
index 62166d4..c7d5262 100644
--- a/hotel-management/src/components/Table/index.tsx
+++ b/hotel-management/src/components/Table/index.tsx
@@ -3,24 +3,31 @@ import { ReactNode, useContext } from 'react';
 // Components
 import { StyledBody, StyledHeader, StyledRow, StyledTable } from './styled';
 
-// Interfaces
-import { ITable, ITableBody } from '../../globals/interfaces';
-
 // Contexts
 import TableContext from '../../contexts/TableContext';
 
+interface ITable {
+  columns?: string;
+  children: React.ReactNode;
+}
+
+interface ITableBody<T> {
+  data?: T[];
+  render?: (value: T) => JSX.Element;
+}
+
 type CallbackMapFunc<T> = (value: T, index: number, array: T[]) => ReactNode;
 
 const Table = ({ columns, children }: ITable) => {
   return (
-    <TableContext.Provider value={columns!}>
+    <TableContext.Provider value={{ columns }}>
       <StyledTable>{children}</StyledTable>
     </TableContext.Provider>
   );
 };
 
 const Header = ({ children }: ITable) => {
-  const columns = useContext(TableContext);
+  const { columns } = useContext(TableContext);
   return <StyledHeader columns={columns}>{children}</StyledHeader>;
 };
 
@@ -33,7 +40,7 @@ const Body = <T,>({ data, render }: ITableBody<T>) => {
 };
 
 const Row = ({ children }: ITable) => {
-  const columns = useContext(TableContext);
+  const { columns } = useContext(TableContext);
   return <StyledRow columns={columns}>{children}</StyledRow>;
 };
 
diff --git a/hotel-management/src/components/Toast/index.tsx b/hotel-management/src/components/Toast/index.tsx
index 98c823c..fa3caee 100644
--- a/hotel-management/src/components/Toast/index.tsx
+++ b/hotel-management/src/components/Toast/index.tsx
@@ -1,26 +1,46 @@
-import { Toaster } from 'react-hot-toast';
+import { DefaultToastOptions, ToastOptions, ToastPosition, Toaster } from 'react-hot-toast';
+import { CSSProperties } from 'styled-components';
 
-const Toast = () => {
+interface IToast {
+  position: ToastPosition;
+  gutter: number;
+  containerStyle: CSSProperties;
+  toastOptions: DefaultToastOptions;
+  success: ToastOptions;
+  error: ToastOptions;
+  style: CSSProperties | undefined;
+}
+
+const Toast = ({position, gutter, containerStyle, success, error, style}: IToast) => {
   return (
     <Toaster
-      position="top-center"
-      gutter={12}
-      containerStyle={{ margin: '8px', zIndex: 1 }}
+      position={position}
+      gutter={gutter}
+      containerStyle={containerStyle}
       toastOptions={{
-        success: {
-          duration: 3000,
-        },
-        error: {
-          duration: 5000,
-        },
-        style: {
-          fontSize: '16px',
-          maxWidth: '500px',
-          padding: '16px 24px',
-        },
+        success,
+        error,
+        style
       }}
     />
   );
 };
 
+Toast.defaultProps = {
+  position: "top-center",
+  gutter: 12,
+  containerStyle: { margin: '8px', zIndex: 1 },
+  success: {
+    duration: 3000,
+  },
+  error:{
+    duration: 5000,
+  },
+  style: {
+    fontSize: '16px',
+    maxWidth: '500px',
+    padding: '16px 24px',
+  }
+}
+
 export default Toast;
diff --git a/hotel-management/src/constants/path.ts b/hotel-management/src/constants/path.ts
index 2f54b15..03014d3 100644
--- a/hotel-management/src/constants/path.ts
+++ b/hotel-management/src/constants/path.ts
@@ -1,7 +1,7 @@
-export const DASHBOARD: string = '/dashboard';
-export const USER: string = '/user';
-export const ROOM: string = '/room';
-export const OTHER_PATH: string = '*';
-export const BASE_URL: string = 'https://hotel-management-api.loiphan.com/';
+export const DASHBOARD = '/dashboard';
+export const USER = '/user';
+export const ROOM = '/room';
+export const OTHER_PATH = '*';
+export const BASE_URL = 'https://hotel-management-api.loiphan.com/';
 export const USER_PATH = 'users';
 export const ROOM_PATH = 'rooms';
diff --git a/hotel-management/src/constants/variables.ts b/hotel-management/src/constants/variables.ts
index b3b169a..7cad09f 100644
--- a/hotel-management/src/constants/variables.ts
+++ b/hotel-management/src/constants/variables.ts
@@ -74,7 +74,16 @@ const ROOM_PAGE = {
   ],
 }
 
+const INITIAL_STATE_SCHEMA = {
+  id: '',
+  name: '',
+  identifiedCode: '',
+  phone: '',
+  roomId: 'undefined',
+  address: '',
+};
+
 const VALUE = 'value';
 const ERROR = 'error';
 
-export { USER_PAGE, ROOM_PAGE, VALUE, ERROR };
+export { USER_PAGE, ROOM_PAGE, VALUE, ERROR, INITIAL_STATE_SCHEMA };
diff --git a/hotel-management/src/contexts/MenuContext.ts b/hotel-management/src/contexts/MenuContext.ts
index 2f051cc..0a166dc 100644
--- a/hotel-management/src/contexts/MenuContext.ts
+++ b/hotel-management/src/contexts/MenuContext.ts
@@ -1,7 +1,10 @@
 import { createContext } from 'react';
 
-// Interfaces
-import { IMenusContext } from '../globals/interfaces';
+interface IMenusContext {
+  openId?: string;
+  close?: () => void;
+  open?: React.Dispatch<React.SetStateAction<string>>;
+}
 
 const MenusContext = createContext<IMenusContext>({});
 
diff --git a/hotel-management/src/contexts/TableContext.ts b/hotel-management/src/contexts/TableContext.ts
index 394f4a7..5a0c1be 100644
--- a/hotel-management/src/contexts/TableContext.ts
+++ b/hotel-management/src/contexts/TableContext.ts
@@ -1,5 +1,9 @@
 import { createContext } from 'react';
 
-const TableContext = createContext('');
+interface ITableContext {
+  columns?: string;
+}
+
+const TableContext = createContext<ITableContext>({});
 
 export default TableContext;
diff --git a/hotel-management/src/globals/interfaces.ts b/hotel-management/src/globals/interfaces.ts
deleted file mode 100644
index c9b42aa..0000000
--- a/hotel-management/src/globals/interfaces.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-interface IMenusContext {
-  openId?: string;
-  close?: () => void;
-  open?: React.Dispatch<React.SetStateAction<string>>;
-}
-
-interface IButton {
-  children?: string;
-  icon?: JSX.Element;
-  onClick?: () => void;
-}
-
-interface ITable {
-  columns?: string;
-  children: React.ReactNode;
-}
-
-interface ITableBody<T> {
-  data?: T[];
-  render?: (value: T) => JSX.Element;
-}
-
-interface ISelectOptions {
-  value: string;
-  label: string;
-}
-
-interface IDialogProps<T> {
-  title?: string;
-  children?: JSX.Element[] | JSX.Element;
-  onClose?: () => void;
-  reload?: boolean;
-  setReload?: React.Dispatch<React.SetStateAction<boolean>>;
-  ref?: React.MutableRefObject<HTMLDialogElement | undefined>;
-  data?: T | null;
-  isAdd?: boolean;
-}
-
-export type {
-  IMenusContext,
-  IButton,
-  ITable,
-  ITableBody,
-  IDialogProps,
-  ISelectOptions,
-};
diff --git a/hotel-management/src/helpers/utils.ts b/hotel-management/src/helpers/utils.ts
index 631d64f..075502b 100644
--- a/hotel-management/src/helpers/utils.ts
+++ b/hotel-management/src/helpers/utils.ts
@@ -124,7 +124,7 @@ const searchQuery = (
   columnSearch: string,
   keySearch: string,
   sort: string,
-  order: string,
+  order: string
 ) => {
   // prettier-ignore
   const phoneParams = keySearch
diff --git a/hotel-management/src/helpers/validators.ts b/hotel-management/src/helpers/validators.ts
index a060a42..9d5a449 100644
--- a/hotel-management/src/helpers/validators.ts
+++ b/hotel-management/src/helpers/validators.ts
@@ -13,7 +13,6 @@ const isValidNumber = (value: string): boolean => {
  * @returns A boolean indicating whether or not the argument has valid
  */
 const isValidDiscount = (value: string): boolean => {
-  console.log(Boolean(+value >= 0 && +value <= 100));
   return +value >= 0 && +value <= 100;
 };
 
diff --git a/hotel-management/src/hooks/useFetch.ts b/hotel-management/src/hooks/useFetch.ts
index fdbc1b2..f81dc12 100644
--- a/hotel-management/src/hooks/useFetch.ts
+++ b/hotel-management/src/hooks/useFetch.ts
@@ -8,7 +8,7 @@ import { DEFAULT_ORDER_BY, DEFAULT_SORT_BY } from '../constants/config';
 import { searchQuery } from '../helpers/utils';
 
 /**
- *
+ * The function use to fetch data on server API.
  * @param path The path of url
  * @param columnSearch Column need to search
  * @param keyWord The key word to search
@@ -23,7 +23,7 @@ const useFetch = (
   keyWord: string = '',
   tempSortBy?: string,
   tempOrderBy?: string,
-  reload?: boolean,
+  reload?: boolean
 ) => {
   const [data, setData] = useState(null);
   const [isPending, setIsPending] = useState(false);
@@ -56,7 +56,7 @@ const useFetch = (
 
         if (!response.ok)
           throw new Error(
-            `Error code: ${response.status} \n Messages: ${response.statusText}`,
+            `Error code: ${response.status} \n Messages: ${response.statusText}`
           );
 
         setIsPending(false);
diff --git a/hotel-management/src/hooks/useForm.ts b/hotel-management/src/hooks/useForm.ts
index 1573138..5f57745 100644
--- a/hotel-management/src/hooks/useForm.ts
+++ b/hotel-management/src/hooks/useForm.ts
@@ -7,7 +7,7 @@ import { getPropValues, isObject, isRequired } from '../helpers/utils';
 import { TKeyValue, TValidator } from '../globals/types';
 
 // Constants
-import { ERROR, VALUE } from '../constants/variables';
+import { ERROR, INITIAL_STATE_SCHEMA, VALUE } from '../constants/variables';
 
 /**
  * Custom hooks to validate your Form...
@@ -21,11 +21,11 @@ const useForm = (
   stateSchema = {},
   stateValidatorSchema = {} as TValidator,
   submitFormCallback: (values: TKeyValue) => void,
-  initialValue: string = '',
+  initialValue: string = ''
 ) => {
-  const [values, setValues] = useState(getPropValues(stateSchema, VALUE));
+  const [values, setValues] = useState<TKeyValue>(INITIAL_STATE_SCHEMA);
   const [errors, setErrors] = useState(getPropValues(stateSchema, ERROR));
-  const [dirty, setDirty] = useState(getPropValues(stateSchema));
+  const [valid, isValid] = useState(getPropValues(stateSchema));
   const [disable, setDisable] = useState(true);
   const [isDirty, setIsDirty] = useState(false);
 
@@ -33,7 +33,8 @@ const useForm = (
   useEffect(() => {
     setInitialErrorState(initialValue);
     setDisable(true);
-    setDirty(getPropValues(stateSchema));
+    isValid(getPropValues(stateSchema));
+    setValues(getPropValues(stateSchema, VALUE));
 
     // If initial value true, setValues again from stateSchema
     // and enabled button
@@ -56,7 +57,7 @@ const useForm = (
       let error = '';
 
       // Skip check id field
-      if (name !== 'id') {
+      if (name !== 'id' && name !== 'roomId') {
         error = isRequired(value, field!.required);
 
         if (isObject(field['validator']) && error === '') {
@@ -72,7 +73,7 @@ const useForm = (
 
       return error;
     },
-    [stateValidatorSchema],
+    [stateValidatorSchema]
   );
 
   // Set Initial Error State
@@ -85,10 +86,10 @@ const useForm = (
           [name]: !initialValue // Skip error when initialValue have values
             ? validateFormFields(name, values[name] as string)
             : '',
-        })),
+        }))
       );
     },
-    [errors, values, validateFormFields],
+    [errors, values, validateFormFields]
   );
 
   // Used to disable submit button if there's a value in errors
@@ -97,7 +98,7 @@ const useForm = (
   // in every re-render in component
   const validateErrorState = useCallback(
     () => Object.values(errors).some((error) => error),
-    [errors],
+    [errors]
   );
 
   // For every changed in our state this will be fired
@@ -113,7 +114,7 @@ const useForm = (
     (
       event: ChangeEvent<
         HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-      >,
+      >
     ) => {
       setIsDirty(true);
 
@@ -133,9 +134,9 @@ const useForm = (
 
       setValues((prevState) => ({ ...prevState, [name]: value }));
       setErrors((prevState) => ({ ...prevState, [name]: error }));
-      setDirty((prevState) => ({ ...prevState, [name]: true }));
+      isValid((prevState) => ({ ...prevState, [name]: true }));
     },
-    [validateFormFields],
+    [validateFormFields]
   );
 
   const handleOnSubmit = useCallback(
@@ -151,7 +152,7 @@ const useForm = (
         setDisable(true);
       }
     },
-    [validateErrorState, submitFormCallback, values],
+    [validateErrorState, submitFormCallback, values]
   );
 
   return {
@@ -162,7 +163,7 @@ const useForm = (
     disable,
     setValues,
     setErrors,
-    dirty,
+    valid,
   };
 };
 
diff --git a/hotel-management/src/pages/Room/Dialog.tsx b/hotel-management/src/pages/Room/Dialog.tsx
index 5fd8f99..c500767 100644
--- a/hotel-management/src/pages/Room/Dialog.tsx
+++ b/hotel-management/src/pages/Room/Dialog.tsx
@@ -1,12 +1,9 @@
 import { forwardRef, useEffect } from 'react';
 
 // Components
-import Dialog from '../../components/Dialog';
+import  Dialog, { IDialogProps } from '../../components/Dialog';
 import RoomForm from './Form';
 
-// Interfaces
-import { IDialogProps } from '../../globals/interfaces';
-
 // Types
 import { TRoom } from '../../globals/types';
 
diff --git a/hotel-management/src/pages/Room/Form.tsx b/hotel-management/src/pages/Room/Form.tsx
index 12318c2..de4a1e1 100644
--- a/hotel-management/src/pages/Room/Form.tsx
+++ b/hotel-management/src/pages/Room/Form.tsx
@@ -8,7 +8,7 @@ import TextArea from '../../commons/styles/TextArea.ts';
 
 // Components
 import Form from '../../components/Form/index.tsx';
-import FormRow from '../../components/FormRow/index.tsx';
+import FormRow from '../../components/LabelControl/index.tsx';
 import Button from '../../commons/styles/Button.ts';
 
 // Types
@@ -170,7 +170,7 @@ const RoomForm = ({
         const response = await sendRequest(
           ROOM_PATH,
           JSON.stringify(data),
-          'POST',
+          'POST'
         );
 
         if (response.statusCode === STATUS_CODE.CREATE) {
@@ -185,7 +185,7 @@ const RoomForm = ({
         const response = await sendRequest(
           ROOM_PATH + `/${room!.id}`,
           JSON.stringify(data),
-          'PUT',
+          'PUT'
         );
 
         if (response.statusCode == STATUS_CODE.OK) {
@@ -215,7 +215,7 @@ const RoomForm = ({
   const { 
     values,
     errors,
-    dirty,
+    valid,
     handleOnChange,
     handleOnSubmit,
     disable }  =
@@ -257,7 +257,7 @@ const RoomForm = ({
         label="Name"
         error={
           // prettier-ignore
-          errors.name && dirty.name 
+          errors.name && valid.name 
             ? (errors.name as string) 
             : ''
         }
@@ -274,7 +274,7 @@ const RoomForm = ({
         label="Amount"
         // prettier-ignore
         error={
-          errors.amount && dirty.amount 
+          errors.amount && valid.amount 
             ? (errors.amount as string) 
             : ''
           }
@@ -291,7 +291,7 @@ const RoomForm = ({
         label="Price"
         error={
           // prettier-ignore
-          errors.price && dirty.price 
+          errors.price && valid.price 
             ? (errors.price as string) 
             : ''
         }
@@ -308,7 +308,7 @@ const RoomForm = ({
         label="Discount"
         error={
           // prettier-ignore
-          errors.discount && dirty.discount
+          errors.discount && valid.discount
             ? (errors.discount as string) 
             : ''
         }
@@ -334,7 +334,7 @@ const RoomForm = ({
         label="Description"
         error={
           // prettier-ignore
-          errors.description && dirty.description 
+          errors.description && valid.description 
             ? (errors.description as string) 
             : ''
         }
diff --git a/hotel-management/src/pages/Room/Table.tsx b/hotel-management/src/pages/Room/Table.tsx
index 3edbd70..27b42fa 100644
--- a/hotel-management/src/pages/Room/Table.tsx
+++ b/hotel-management/src/pages/Room/Table.tsx
@@ -6,7 +6,7 @@ import toast from 'react-hot-toast';
 import { HiSquare2Stack } from 'react-icons/hi2';
 import { HiTrash } from 'react-icons/hi';
 import { StyledOperationTable } from './styled';
-import Menus from '../../components/Menus/Menus';
+import Menus from '../../components/Menus';
 import Table from '../../components/Table';
 import Direction from '../../commons/styles/Direction';
 import Message from '../../components/Message';
diff --git a/hotel-management/src/pages/User/Dialog.tsx b/hotel-management/src/pages/User/Dialog.tsx
index 2bf726f..c995b12 100644
--- a/hotel-management/src/pages/User/Dialog.tsx
+++ b/hotel-management/src/pages/User/Dialog.tsx
@@ -1,12 +1,9 @@
 import { forwardRef, useEffect } from 'react';
 
 // Components
-import Dialog from '../../components/Dialog';
+import Dialog, { IDialogProps } from '../../components/Dialog';
 import UserForm from './Form';
 
-// Interfaces
-import { IDialogProps } from '../../globals/interfaces';
-
 // Types
 import { TUser } from '../../globals/types';
 
diff --git a/hotel-management/src/pages/User/Form.tsx b/hotel-management/src/pages/User/Form.tsx
index 3592ecb..e3ac761 100644
--- a/hotel-management/src/pages/User/Form.tsx
+++ b/hotel-management/src/pages/User/Form.tsx
@@ -8,7 +8,7 @@ import TextArea from '../../commons/styles/TextArea';
 
 // Components
 import Form from '../../components/Form';
-import FormRow from '../../components/FormRow';
+import FormRow from '../../components/LabelControl/index.tsx';
 import Button from '../../commons/styles/Button.ts';
 
 // Types
@@ -39,12 +39,9 @@ import {
   errorMsg,
 } from '../../constants/messages.ts';
 import { USER_PATH } from '../../constants/path.ts';
-import Select from '../../components/Select/index.tsx';
+import Select, { ISelectOptions } from '../../components/Select/index.tsx';
 import { useFetch } from '../../hooks/useFetch.ts';
 
-// Interfaces
-import { ISelectOptions } from '../../globals/interfaces.ts';
-
 const FormBtn = styled(Button)`
   width: 100%;
 
@@ -130,7 +127,7 @@ const UserForm = ({
        error: '',
     },
     roomId: { 
-      value: roomIdValue || '',
+      value: roomIdValue || '' + (options && options[0].value),
       error: '' ,
     },
     address: { 
@@ -181,7 +178,7 @@ const UserForm = ({
         const response = await sendRequest(
           USER_PATH,
           JSON.stringify(data),
-          'POST',
+          'POST'
         );
 
         if (response.statusCode === STATUS_CODE.CREATE) {
@@ -196,7 +193,7 @@ const UserForm = ({
         const response = await sendRequest(
           USER_PATH + `/${user!.id}`,
           JSON.stringify(data),
-          'PUT',
+          'PUT'
         );
 
         if (response.statusCode == STATUS_CODE.OK) {
@@ -226,7 +223,7 @@ const UserForm = ({
   const { 
     values,
     errors,
-    dirty,
+    valid,
     handleOnChange,
     handleOnSubmit,
     disable }  =
@@ -266,7 +263,7 @@ const UserForm = ({
         label="Full Name"
         error={
           // prettier-ignore
-          errors.name && dirty.name 
+          errors.name && valid.name 
             ? (errors.name as string) 
             : ''
         }
@@ -282,7 +279,7 @@ const UserForm = ({
       <FormRow
         label="Identified Code"
         error={
-          errors.identifiedCode && dirty.identifiedCode
+          errors.identifiedCode && valid.identifiedCode
             ? (errors.identifiedCode as string)
             : ''
         }
@@ -299,7 +296,7 @@ const UserForm = ({
         label="Phone"
         error={
           // prettier-ignore
-          errors.phone && dirty.phone 
+          errors.phone && valid.phone 
             ? (errors.phone as string) 
             : ''
         }
@@ -316,17 +313,11 @@ const UserForm = ({
         label="Room"
         error={
           // prettier-ignore
-          errors.roomId && dirty.roomId
+          errors.roomId && valid.roomId
             ? (errors.roomId as string) 
             : ''
         }
       >
-        {/* <Input
-          type="text"
-          name="roomId"
-          value={roomId as string}
-          onChange={handleOnChange}
-        /> */}
         <Select
           name="roomId"
           value={roomId as string}
@@ -339,7 +330,7 @@ const UserForm = ({
         label="Address"
         error={
           // prettier-ignore
-          errors.address && dirty.address 
+          errors.address && valid.address 
             ? (errors.address as string) 
             : ''
         }
diff --git a/hotel-management/src/pages/User/Table.tsx b/hotel-management/src/pages/User/Table.tsx
index eb1bb5f..f6e2001 100644
--- a/hotel-management/src/pages/User/Table.tsx
+++ b/hotel-management/src/pages/User/Table.tsx
@@ -6,7 +6,7 @@ import toast from 'react-hot-toast';
 import { HiSquare2Stack } from 'react-icons/hi2';
 import { HiTrash } from 'react-icons/hi';
 import { StyledOperationTable } from './styled';
-import Menus from '../../components/Menus/Menus';
+import Menus from '../../components/Menus';
 import Table from '../../components/Table';
 import Direction from '../../commons/styles/Direction';
 import Message from '../../components/Message';