diff --git a/frontend/lib/components/button.dart b/frontend/lib/components/button.dart
index e6ccaa11..a42cac1d 100644
--- a/frontend/lib/components/button.dart
+++ b/frontend/lib/components/button.dart
@@ -13,10 +13,10 @@ class SubmitButton extends StatelessWidget {
       child: Container(
         height: 60,
         padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 5),
-        margin: const EdgeInsets.symmetric(horizontal: 20),
+        margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 40),
         decoration: BoxDecoration(
           color: colors.primary,
-          borderRadius: BorderRadius.circular(18),
+          borderRadius: BorderRadius.circular(12),
         ),
         child: const Center(
           child: Text(
diff --git a/frontend/lib/components/textfield.dart b/frontend/lib/components/textfield.dart
index 4d394959..c3cdec45 100644
--- a/frontend/lib/components/textfield.dart
+++ b/frontend/lib/components/textfield.dart
@@ -15,20 +15,20 @@ class MyTextField extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.all(15),
+      padding: const EdgeInsets.all(10),
       child: Container(
-        margin: const EdgeInsets.symmetric(horizontal: 5),
+        margin: const EdgeInsets.symmetric(horizontal: 30),
         child: TextField(
           controller: controller,
           obscureText: obscureText,
           decoration: InputDecoration(
             enabledBorder: OutlineInputBorder(
               borderSide: const BorderSide(color: Colors.grey),
-              borderRadius: BorderRadius.circular(18),
+              borderRadius: BorderRadius.circular(12),
             ),
             focusedBorder: OutlineInputBorder(
               borderSide: const BorderSide(color: Colors.black),
-              borderRadius: BorderRadius.circular(18),
+              borderRadius: BorderRadius.circular(12),
             ),
             hintText: hintText,
             hintStyle: const TextStyle(color: Colors.black),
diff --git a/frontend/lib/pages/login_page.dart b/frontend/lib/pages/login_page.dart
index c05aab85..010f9740 100644
--- a/frontend/lib/pages/login_page.dart
+++ b/frontend/lib/pages/login_page.dart
@@ -139,7 +139,7 @@ class _LoginPageState extends State<LoginPage> {
 
     return Scaffold(
       appBar: AppBar(
-        backgroundColor: colors.surface,
+        backgroundColor: colors.onError,
         toolbarHeight: 0,
       ),
       body: SafeArea(
@@ -216,8 +216,8 @@ class _LoginPageState extends State<LoginPage> {
                         children: [
                           // Username TextField
                           Container(
-                            padding: const EdgeInsets.only(top: 20),
-                            margin: const EdgeInsets.symmetric(horizontal: 20),
+                            padding: const EdgeInsets.only(top: 30),
+                            margin: const EdgeInsets.symmetric(horizontal: 40),
                             child: const Row(
                               mainAxisAlignment: MainAxisAlignment.start,
                               children: [
@@ -238,7 +238,7 @@ class _LoginPageState extends State<LoginPage> {
                           // Password TextField
                           Container(
                             padding: const EdgeInsets.only(top: 10),
-                            margin: const EdgeInsets.symmetric(horizontal: 20),
+                            margin: const EdgeInsets.symmetric(horizontal: 40),
                             child: const Row(
                               mainAxisAlignment: MainAxisAlignment.start,
                               children: [
@@ -285,7 +285,7 @@ class _LoginPageState extends State<LoginPage> {
             return Column(
               children: [
                 Container(
-                  color: colors.outlineVariant,
+                  color: colors.surface,
                   child: Column(
                     children: [
                       Container(
@@ -297,7 +297,7 @@ class _LoginPageState extends State<LoginPage> {
                       ),
                       // Login Text
                       Container(
-                        margin: const EdgeInsets.all(18.0),
+                        margin: const EdgeInsets.symmetric(horizontal: 40),
                         child: const Row(
                           mainAxisAlignment: MainAxisAlignment.start,
                           children: [
@@ -310,22 +310,27 @@ class _LoginPageState extends State<LoginPage> {
                           ],
                         ),
                       ),
+                      const SizedBox(height: 20),
                     ],
                   ),
                 ),
                 // Bottom Half of the Login Screen
                 Container(
                   decoration: BoxDecoration(
-                      color: colors.surface,
-                      borderRadius: const BorderRadius.only(
-                          topLeft: Radius.circular(20),
-                          topRight: Radius.circular(20))),
+                    color: colors.surface,
+                    border: Border(
+                        top: BorderSide(
+                            color: colors.outlineVariant, width: 0.5)),
+                    // borderRadius: const BorderRadius.only(
+                    //     topLeft: Radius.circular(20),
+                    //     topRight: Radius.circular(20))
+                  ),
                   child: Column(
                     children: [
                       // Username TextField
                       Container(
-                        padding: const EdgeInsets.only(top: 10),
-                        margin: const EdgeInsets.symmetric(horizontal: 20),
+                        padding: const EdgeInsets.only(top: 40),
+                        margin: const EdgeInsets.symmetric(horizontal: 40),
                         child: const Row(
                           mainAxisAlignment: MainAxisAlignment.start,
                           children: [
@@ -345,8 +350,8 @@ class _LoginPageState extends State<LoginPage> {
 
                       // Password TextField
                       Container(
-                        padding: const EdgeInsets.only(top: 10),
-                        margin: const EdgeInsets.symmetric(horizontal: 20),
+                        padding: const EdgeInsets.only(top: 15),
+                        margin: const EdgeInsets.symmetric(horizontal: 40),
                         child: const Row(
                           mainAxisAlignment: MainAxisAlignment.start,
                           children: [