diff --git a/lib/widgets/box_widget.dart b/lib/widgets/box_widget.dart
new file mode 100644
index 0000000..e35d944
--- /dev/null
+++ b/lib/widgets/box_widget.dart
@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:ocbo_esign_validator/widgets/text_widget.dart';
+
+class BoxWidget extends StatelessWidget {
+  final String title;
+  final Widget content;
+
+  const BoxWidget({super.key, required this.title, required this.content});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(8),
+        color: Color.fromARGB(149, 16, 22, 28),
+        border: Border.all(color: const Color.fromRGBO(32, 47, 61, 1)),
+      ),
+      width: MediaQuery.of(context).size.width - 100,
+      height: MediaQuery.of(context).size.height / 2.2,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [TextWidget(text: title, bold: true, size: 24)],
+          ),
+          const Gap(16),
+          Padding(padding: const EdgeInsets.all(16), child: content),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/widgets/button_widget.dart b/lib/widgets/button_widget.dart
new file mode 100644
index 0000000..7778db8
--- /dev/null
+++ b/lib/widgets/button_widget.dart
@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+class ButtonWidget extends StatelessWidget {
+  final String text;
+  final VoidCallback onPressed;
+  final bool? outline;
+  final double? width;
+
+  const ButtonWidget({super.key, required this.text, required this.onPressed, this.outline, this.width});
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton(
+      style: outline == true
+          ? OutlinedButton.styleFrom(
+              foregroundColor: const Color.fromRGBO(0, 0, 0, 1),
+              backgroundColor: Colors.transparent,
+              side: const BorderSide(color: Color.fromRGBO(198, 133, 232, 1)),
+              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
+              minimumSize: Size(
+                MediaQuery.of(context).size.width <= 768 ? MediaQuery.of(context).size.width - 96 : 320,
+                44,
+              ),
+              padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
+            )
+          : ElevatedButton.styleFrom(
+              foregroundColor: const Color.fromRGBO(0, 0, 0, 1), // text color
+              backgroundColor: const Color.fromRGBO(198, 133, 232, 1),
+              side: const BorderSide(color: Color.fromRGBO(79, 51, 94, 0.4)), // border color
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(20), // rounded corners
+              ),
+              minimumSize: Size(
+                width ?? (MediaQuery.of(context).size.width <= 768 ? MediaQuery.of(context).size.width - 96 : 320),
+                44,
+              ),
+
+              padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
+            ),
+      onPressed: onPressed,
+      child: Text(text, style: _textStyle(outline)),
+    );
+  }
+
+  TextStyle _textStyle(bool? outline) {
+    if (outline == true) {
+      return GoogleFonts.roboto(textStyle: const TextStyle(fontSize: 14, color: Color.fromRGBO(198, 133, 232, 1)));
+    } else {
+      return GoogleFonts.roboto(textStyle: const TextStyle(fontSize: 14, color: Color.fromRGBO(0, 0, 0, 1)));
+    }
+  }
+}
diff --git a/lib/widgets/input_widget.dart b/lib/widgets/input_widget.dart
new file mode 100644
index 0000000..fd0b3b5
--- /dev/null
+++ b/lib/widgets/input_widget.dart
@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+class InputWidget extends StatelessWidget {
+  final TextEditingController controller;
+  final String placeholder;
+
+  const InputWidget({super.key, required this.controller, required this.placeholder});
+
+  @override
+  Widget build(BuildContext context) {
+    return TextField(
+      controller: controller,
+      decoration: InputDecoration(
+        filled: true,
+        fillColor: const Color.fromRGBO(255, 255, 255, 1),
+        border: OutlineInputBorder(borderRadius: BorderRadius.circular(4)),
+        contentPadding: const EdgeInsets.symmetric(vertical: 0, horizontal: 14),
+        hintText: placeholder,
+      ),
+      style: GoogleFonts.roboto(textStyle: const TextStyle(color: Color.fromRGBO(0, 0, 0, 1), fontSize: 16)),
+    );
+  }
+}
diff --git a/lib/widgets/circle_widget.dart b/lib/widgets/menu_widget.dart
similarity index 54%
rename from lib/widgets/circle_widget.dart
rename to lib/widgets/menu_widget.dart
index 45cb499..1a5bec4 100644
--- a/lib/widgets/circle_widget.dart
+++ b/lib/widgets/menu_widget.dart
@@ -2,12 +2,12 @@ import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 import 'package:ocbo_esign_validator/widgets/text_widget.dart';
 
-class CircleWidget extends StatelessWidget {
+class MenuWidget extends StatelessWidget {
   final IconData? icon;
   final String text;
   final VoidCallback onPressed;
 
-  const CircleWidget({super.key, required this.icon, required this.text, required this.onPressed});
+  const MenuWidget({super.key, required this.icon, required this.text, required this.onPressed});
 
   @override
   Widget build(BuildContext context) {
@@ -16,18 +16,18 @@ class CircleWidget extends StatelessWidget {
       child: Container(
         padding: EdgeInsets.all(16),
         decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(16),
-          color: Colors.white10,
-          border: Border.all(color: const Color.fromARGB(77, 255, 255, 255)),
+          borderRadius: BorderRadius.circular(8),
+          color: Color.fromARGB(149, 16, 22, 28),
+          border: Border.all(color: const Color(0xff202f3d)),
         ),
         width: 120,
         height: 120,
         child: Column(
           children: [
-            const Gap(8),
-            Icon(icon, color: Colors.white, size: 32),
-            const Gap(8),
-            TextWidget(text: text, size: 16),
+            const Gap(4),
+            Icon(icon, color: Colors.white, size: 42),
+            const Gap(16),
+            TextWidget(text: text, size: 14),
           ],
         ),
       ),