diff --git a/lib/presentation/setting/pages/server_key_page.dart b/lib/presentation/setting/pages/server_key_page.dart
index 4a41ab7..f5fdb3e 100644
--- a/lib/presentation/setting/pages/server_key_page.dart
+++ b/lib/presentation/setting/pages/server_key_page.dart
@@ -1,3 +1,6 @@
+import 'package:enaklo_pos/core/components/components.dart';
+import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
+import 'package:enaklo_pos/presentation/setting/widgets/settings_title.dart';
 import 'package:flutter/material.dart';
 import 'package:enaklo_pos/core/constants/colors.dart';
 import 'package:enaklo_pos/data/datasources/auth_local_datasource.dart';
@@ -36,37 +39,64 @@ class _ServerKeyPageState extends State<ServerKeyPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        title: const Text('Save Server Key'),
-        centerTitle: true,
-      ),
-      //textfield untuk input server key
+      backgroundColor: AppColors.background,
       body: Column(
         children: [
+          SettingsTitle('Server Key'),
           Padding(
-            padding: const EdgeInsets.all(20.0),
-            child: TextField(
-              controller: serverKeyController,
-              decoration: const InputDecoration(
-                border: OutlineInputBorder(),
-                labelText: 'Server Key',
-              ),
-            ),
-          ),
-          //button untuk save server key
-          ElevatedButton(
-            onPressed: () {
-              AuthLocalDataSource()
-                  .saveMidtransServerKey(serverKeyController!.text);
-
-              ScaffoldMessenger.of(context).showSnackBar(
-                const SnackBar(
-                  content: Text('Server Key saved'),
-                  backgroundColor: AppColors.primary,
+            padding: const EdgeInsets.all(16.0),
+            child: Column(
+              children: [
+                Container(
+                  padding: const EdgeInsets.all(20.0),
+                  decoration: BoxDecoration(
+                    color: AppColors.white,
+                    borderRadius: BorderRadius.circular(8.0),
+                  ),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        'Server Key',
+                        style: TextStyle(
+                          fontSize: 14,
+                          fontWeight: FontWeight.w500,
+                          color: AppColors.black,
+                        ),
+                      ),
+                      SpaceHeight(4),
+                      TextField(
+                        controller: serverKeyController,
+                        decoration: const InputDecoration(
+                          border: OutlineInputBorder(),
+                          hintText: 'Server Key',
+                        ),
+                      ),
+                    ],
+                  ),
                 ),
-              );
-            },
-            child: const Text('Save'),
+                const SpaceHeight(20),
+                Align(
+                  alignment: Alignment.centerRight,
+                  child: Button.filled(
+                    width: context.deviceWidth * 0.2,
+                    height: 44,
+                    onPressed: () {
+                      AuthLocalDataSource()
+                          .saveMidtransServerKey(serverKeyController!.text);
+
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        const SnackBar(
+                          content: Text('Server Key saved'),
+                          backgroundColor: AppColors.primary,
+                        ),
+                      );
+                    },
+                    label: 'Simpan',
+                  ),
+                ),
+              ],
+            ),
           ),
         ],
       ),
diff --git a/lib/presentation/setting/widgets/settings_title.dart b/lib/presentation/setting/widgets/settings_title.dart
index 813a6e7..21e950f 100644
--- a/lib/presentation/setting/widgets/settings_title.dart
+++ b/lib/presentation/setting/widgets/settings_title.dart
@@ -33,6 +33,7 @@ class SettingsTitle extends StatelessWidget {
         children: [
           Column(
             crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisAlignment: MainAxisAlignment.center,
             children: [
               Text(
                 title,