diff --git a/apps/backoffice/index.html b/apps/backoffice/index.html
index 3905403..52a9604 100644
--- a/apps/backoffice/index.html
+++ b/apps/backoffice/index.html
@@ -6,7 +6,7 @@
     <base href="/" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/x-icon" href="/logos/simple.svg" />
     <link rel="stylesheet" href="/src/styles.css" />
   </head>
   <body>
diff --git a/apps/backoffice/src/app/_hooks/use-login.ts b/apps/backoffice/src/app/_hooks/use-login.ts
new file mode 100644
index 0000000..e23709a
--- /dev/null
+++ b/apps/backoffice/src/app/_hooks/use-login.ts
@@ -0,0 +1,31 @@
+import { useForm } from 'react-hook-form';
+import {
+  authLoginSchema,
+  TLoginRequest,
+  usePostLogin,
+} from '@imphnen-frontend-service/service';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useNavigate } from 'react-router-dom';
+
+export const useLogin = () => {
+  const postLogin = usePostLogin();
+  const form = useForm<TLoginRequest>({
+    resolver: zodResolver(authLoginSchema),
+    mode: 'all',
+  });
+  const navigate = useNavigate();
+
+  const onSubmit = form.handleSubmit((data) => {
+    postLogin.mutate(data, {
+      onSuccess: () => {
+        console.log('Success Login');
+        navigate('/dashboard');
+      },
+    });
+  });
+
+  return {
+    form,
+    onSubmit,
+  };
+};
diff --git a/apps/backoffice/src/app/page.tsx b/apps/backoffice/src/app/page.tsx
index 21d9316..99b0c4e 100644
--- a/apps/backoffice/src/app/page.tsx
+++ b/apps/backoffice/src/app/page.tsx
@@ -1,30 +1,10 @@
-import { FC, ReactElement, useState } from 'react';
-import { useNavigate } from 'react-router';
+import { FC, ReactElement } from 'react';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { InputField } from '@imphnen-frontend-service/ui/molecules';
+import { useLogin } from './_hooks/use-login';
+import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 
 export const Components: FC = (): ReactElement => {
-  const navigate = useNavigate();
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-
-  const handleLogin = async (e: React.FormEvent) => {
-    e.preventDefault();
-    try {
-      const payload = { email, password };
-      console.log(payload); // for debugging
-      const response = await postLogin(payload);
-
-      const { access_token, refresh_token } = response.data.token;
-      sessionStorage.setItem('access_token', access_token);
-      localStorage.setItem('refresh_token', refresh_token);
-
-      console.log('Login successful:', response); // for debugging
-      navigate('/dashboard');
-    } catch (error) {
-      console.log('Login error:', error); // for debugging
-    }
-  };
+  const { form, onSubmit } = useLogin();
 
   return (
     <div className="flex justify-center items-center min-h-screen">
@@ -33,21 +13,29 @@ export const Components: FC = (): ReactElement => {
         <h1 className="text-primary-500 text-p1 font-semibold">
           Welcome to IMPHNEN Backoffice
         </h1>
-        <InputField
-          label="Email"
-          placeholder="Masukkan Email"
-          type="email"
-          size="lg"
-          className="w-full"
-        />
-        <InputField
-          label="Password"
-          placeholder="Masukkan password"
-          type="password"
-          size="lg"
-          className="w-full"
-        />
-        <Button onClick={() => navigate('/dashboard')}>Login</Button>
+        <form onSubmit={onSubmit} className="flex flex-col gap-8">
+          <ControlledInputField
+            control={form.control}
+            label="Email"
+            placeholder="Masukkan Email"
+            type="email"
+            name="email"
+            size="lg"
+            className="w-full"
+          />
+          <ControlledInputField
+            control={form.control}
+            label="Password"
+            placeholder="Masukkan Password"
+            type="password"
+            name="password"
+            size="lg"
+            className="w-full"
+          />
+          <Button type="submit" size="md" className="w-full">
+            Login
+          </Button>
+        </form>
       </div>
     </div>
   );
diff --git a/libs/ui/src/molecules/input-field/input-field.tsx b/libs/ui/src/molecules/input-field/input-field.tsx
index 0db7b16..0245843 100644
--- a/libs/ui/src/molecules/input-field/input-field.tsx
+++ b/libs/ui/src/molecules/input-field/input-field.tsx
@@ -75,10 +75,15 @@ export const InputField: FC<TInputFieldProps> = ({
         {...rest}
       />
       {error ? (
-        <p className="text-danger-500 text-xs mt-1">{error}</p>
+        <p className="text-danger-500 text-xs mt-1 text-left">{error}</p>
       ) : (
         helperText && (
-          <p className={cn('text-cs mt-1', sizeClasses[size].helperText)}>
+          <p
+            className={cn(
+              'text-cs mt-1 text-left',
+              sizeClasses[size].helperText
+            )}
+          >
             {helperText}
           </p>
         )
