diff --git a/lib/features/auth/presentation/screen/login_screen.dart b/lib/features/auth/presentation/screen/login_screen.dart
index 251daa1..b735d88 100644
--- a/lib/features/auth/presentation/screen/login_screen.dart
+++ b/lib/features/auth/presentation/screen/login_screen.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
 import 'package:provider/provider.dart';
 import 'package:rijig_mobile/core/router.dart';
 import 'package:rijig_mobile/core/utils/guide.dart';
@@ -20,47 +21,77 @@ class LoginScreenState extends State<LoginScreen> {
     return Scaffold(
       body: Consumer<LoginViewModel>(
         builder: (context, viewModel, child) {
-          return Padding(
-            padding: PaddingCustom().paddingHorizontalVertical(15, 40),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                FormFieldOne(
-                  controllers: phoneController,
-                  hintText: 'Phone Number',
-                  isRequired: true,
-                  textInputAction: TextInputAction.done,
-                  keyboardType: TextInputType.phone,
-                  onTap: () {},
-                  onChanged: (value) {},
-                  fontSize: 14,
-                  fontSizeField: 16,
-                  onFieldSubmitted: (value) {},
-                  readOnly: false,
-                  enabled: true,
+          return SafeArea(
+            child: Center(
+              child: Padding(
+                padding: PaddingCustom().paddingHorizontalVertical(15, 40),
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                  children: [
+                    Column(
+                      children: [
+                        Text(
+                          "Selamat datang di aplikasi",
+                          style: Tulisan.subheading(),
+                        ),
+                        Text(
+                          "Rijig",
+                          style: Tulisan.heading(color: primaryColor),
+                        ),
+                        Gap(60),
+                        Column(
+                          children: [
+                            FormFieldOne(
+                              controllers: phoneController,
+                              hintText: 'Masukkan nomor whatsapp anda!',
+                              placeholder: "cth.62..",
+                              isRequired: true,
+                              textInputAction: TextInputAction.done,
+                              keyboardType: TextInputType.phone,
+                              onTap: () {},
+                              onChanged: (value) {},
+                              fontSize: 14,
+                              fontSizeField: 16,
+                              onFieldSubmitted: (value) {},
+                              readOnly: false,
+                              enabled: true,
+                            ),
+                            SizedBox(height: 20),
+                            CardButtonOne(
+                              textButton:
+                                  viewModel.isLoading
+                                      ? 'Sending OTP...'
+                                      : 'Send OTP',
+                              fontSized: 16,
+                              colorText: whiteColor,
+                              color: primaryColor,
+                              borderRadius: 10,
+                              horizontal: double.infinity,
+                              vertical: 50,
+                              onTap: () async {
+                                if (phoneController.text.isNotEmpty) {
+                                  debugPrint("send otp dipencet");
+                                  await viewModel.loginOrRegister(
+                                    phoneController.text,
+                                  );
+                                  if (viewModel.loginResponse != null) {
+                                    router.go(
+                                      "/verif-otp",
+                                      extra: phoneController.text,
+                                    );
+                                  }
+                                }
+                              },
+                              loadingTrue: viewModel.isLoading,
+                              usingRow: false,
+                            ),
+                          ],
+                        ),
+                      ],
+                    ),
+                  ],
                 ),
-                SizedBox(height: 20),
-                CardButtonOne(
-                  textButton:
-                      viewModel.isLoading ? 'Sending OTP...' : 'Send OTP',
-                  fontSized: 16,
-                  colorText: whiteColor,
-                  borderRadius: 10,
-                  horizontal: double.infinity,
-                  vertical: 50,
-                  onTap: () async {
-                    if (phoneController.text.isNotEmpty) {
-                      debugPrint("send otp dipencet");
-                      await viewModel.loginOrRegister(phoneController.text);
-                      if (viewModel.loginResponse != null) {
-                        router.go("/verif-otp", extra: phoneController.text);
-                      }
-                    }
-                  },
-                  loadingTrue: viewModel.isLoading,
-                  usingRow: false,
-                ),
-              ],
+              ),
             ),
           );
         },
diff --git a/lib/features/auth/presentation/screen/otp_screen.dart b/lib/features/auth/presentation/screen/otp_screen.dart
index 3ce73f4..457e0d1 100644
--- a/lib/features/auth/presentation/screen/otp_screen.dart
+++ b/lib/features/auth/presentation/screen/otp_screen.dart
@@ -23,65 +23,73 @@ class VerifOtpScreenState extends State<VerifOtpScreen> {
     return Scaffold(
       body: Consumer<OtpViewModel>(
         builder: (context, viewModel, child) {
-          return Padding(
-            padding: PaddingCustom().paddingHorizontalVertical(15, 40),
-            child: Column(
-              children: [
-                Text("OTP has been sent to ${widget.phoneNumber}"),
-                SizedBox(height: 20),
+          return SafeArea(
+            child: Center(
+              child: Padding(
+                padding: PaddingCustom().paddingHorizontalVertical(15, 40),
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Text("OTP has been sent to ${widget.phoneNumber}"),
+                    SizedBox(height: 20),
 
-                PinCodeTextField(
-                  controller: _otpController,
-                  appContext: context,
-                  length: 4,
-                  obscureText: false,
-                  animationType: AnimationType.fade,
-                  pinTheme: PinTheme(
-                    shape: PinCodeFieldShape.box,
-                    borderRadius: BorderRadius.circular(5),
-                    fieldHeight: 50,
-                    fieldWidth: 50,
-                    activeFillColor: Colors.white,
-                    inactiveFillColor: Colors.white,
-                    selectedFillColor: Colors.white,
-                    activeColor: Colors.black,
-                    inactiveColor: Colors.black,
-                    selectedColor: Colors.blue,
-                  ),
-                  onChanged: (value) {},
-                  onCompleted: (value) {},
+                    PinCodeTextField(
+                      controller: _otpController,
+                      appContext: context,
+                      length: 4,
+                      obscureText: false,
+                      animationType: AnimationType.fade,
+                      pinTheme: PinTheme(
+                        shape: PinCodeFieldShape.box,
+                        borderRadius: BorderRadius.circular(5),
+                        fieldHeight: 50,
+                        fieldWidth: 50,
+                        activeFillColor: whiteColor,
+                        inactiveFillColor: whiteColor,
+                        selectedFillColor: whiteColor,
+                        activeColor: blackNavyColor,
+                        inactiveColor: blackNavyColor,
+                        selectedColor: primaryColor,
+                      ),
+                      onChanged: (value) {},
+                      onCompleted: (value) {},
+                    ),
+                    SizedBox(height: 20),
+
+                    CardButtonOne(
+                      textButton:
+                          viewModel.isLoading
+                              ? 'Verifying OTP...'
+                              : 'Verify OTP',
+                      fontSized: 16,
+                      colorText: whiteColor,
+                      color: primaryColor,
+                      borderRadius: 10,
+                      horizontal: double.infinity,
+                      vertical: 50,
+                      onTap: () async {
+                        if (_otpController.text.isNotEmpty) {
+                          await viewModel.verifyOtp(
+                            widget.phoneNumber,
+                            _otpController.text,
+                          );
+                          if (viewModel.authResponse != null) {
+                            router.go("/navigasi");
+                          }
+                        }
+                      },
+                      loadingTrue: viewModel.isLoading,
+                      usingRow: false,
+                    ),
+
+                    if (viewModel.errorMessage != null)
+                      Text(
+                        viewModel.errorMessage!,
+                        style: TextStyle(color: redColor),
+                      ),
+                  ],
                 ),
-                SizedBox(height: 20),
-
-                CardButtonOne(
-                  textButton:
-                      viewModel.isLoading ? 'Verifying OTP...' : 'Verify OTP',
-                  fontSized: 16,
-                  colorText: Colors.white,
-                  borderRadius: 10,
-                  horizontal: double.infinity,
-                  vertical: 50,
-                  onTap: () async {
-                    if (_otpController.text.isNotEmpty) {
-                      await viewModel.verifyOtp(
-                        widget.phoneNumber,
-                        _otpController.text,
-                      );
-                      if (viewModel.authResponse != null) {
-                        router.go("/navigasi");
-                      }
-                    }
-                  },
-                  loadingTrue: viewModel.isLoading,
-                  usingRow: false,
-                ),
-
-                if (viewModel.errorMessage != null)
-                  Text(
-                    viewModel.errorMessage!,
-                    style: TextStyle(color: Colors.red),
-                  ),
-              ],
+              ),
             ),
           );
         },