diff --git a/Containerfile b/Containerfile
index b7e28ec..ec3a91d 100644
--- a/Containerfile
+++ b/Containerfile
@@ -19,7 +19,7 @@ ENV PATH="$FLUTTER_SDK/bin:$FLUTTER_SDK/bin/cache/dart-sdk/bin:${PATH}"
 RUN mkdir $APP
 COPY . $APP
 WORKDIR $APP
-RUN flutter build web
+RUN flutter build web --web-renderer html
 
 # once heare the app will be compiled and ready to deploy
 
diff --git a/lib/components/menubar.dart b/lib/components/menubar.dart
index 9161235..3d15d3e 100644
--- a/lib/components/menubar.dart
+++ b/lib/components/menubar.dart
@@ -5,6 +5,7 @@ import 'dart:html';
 
 import 'package:flutter/material.dart';
 import 'package:softplayer_web/components/sign_in_form.dart';
+import 'package:softplayer_web/components/sign_up_form.dart';
 
 class MenuPanel extends StatefulWidget implements PreferredSizeWidget {
   final TabName tab;
@@ -40,7 +41,12 @@ class _MenuPanel extends State<MenuPanel> {
             },
             child: const Text("sign in")),
         TextButton(
-            onPressed: () => print("sign up"), child: const Text("sign up")),
+            onPressed: () {
+              showDialog(
+                  context: context,
+                  builder: (BuildContext context) => const SignUpForm());
+            },
+            child: const Text("sign up")),
       ];
     }
   }
@@ -89,7 +95,7 @@ class _MenuPanel extends State<MenuPanel> {
               Navigator.pushNamed(context, "/about");
             }),
       ]),
-      backgroundColor: Colors.cyan,
+      backgroundColor: const Color.fromRGBO(46, 51, 78, 1.0),
       automaticallyImplyLeading: false,
       actions: accountActions(),
     );
diff --git a/lib/components/sign_in_form.dart b/lib/components/sign_in_form.dart
index 5a75733..0b7b700 100644
--- a/lib/components/sign_in_form.dart
+++ b/lib/components/sign_in_form.dart
@@ -13,7 +13,10 @@ class _SignInFormState extends State<SignInForm> {
   @override
   Widget build(BuildContext context) => AlertDialog(
         title: const Text(dialogName),
-        content: Form(
+        content: SizedBox(
+          width: 420,
+          height: 140,
+          child: Form(
             key: _formKey,
             child: Center(
                 child: Column(children: [
@@ -22,16 +25,24 @@ class _SignInFormState extends State<SignInForm> {
                 decoration: const InputDecoration(
                   hintText: "Enter your username or email",
                   icon: Icon(Icons.account_circle),
+                  label: Text("Username"),
                 ),
+                cursorWidth: 1,
+                cursorHeight: 18,
+                cursorRadius: const Radius.circular(10),
               ),
               TextFormField(
                 obscureText: true,
                 decoration: const InputDecoration(
                   hintText: "Enter your password",
                   icon: Icon(Icons.password),
+                  label: Text("Password")
                 ),
+                cursorWidth: 1,
+                cursorHeight: 18,
+                cursorRadius: const Radius.circular(10),
               ),
-            ]))),
+            ])))),
         actions: <Widget>[
           TextButton(
             onPressed: () => Navigator.pop(context, 'Cancel'),
diff --git a/lib/components/sign_up_form.dart b/lib/components/sign_up_form.dart
new file mode 100644
index 0000000..dc7b008
--- /dev/null
+++ b/lib/components/sign_up_form.dart
@@ -0,0 +1,88 @@
+import 'package:flutter/material.dart';
+
+class SignUpForm extends StatefulWidget {
+  const SignUpForm({super.key});
+
+  @override
+  State<StatefulWidget> createState() => _SignUpFormState();
+}
+
+class _SignUpFormState extends State<SignUpForm> {
+  final _formKey = GlobalKey<FormState>();
+  static const dialogName = "Sign Up";
+  @override
+  Widget build(BuildContext context) => AlertDialog(
+        title: const Text(dialogName),
+        content: SizedBox(
+          width: 420,
+          height: 280,
+          child: Form(
+            key: _formKey,
+            child: Center(
+                child: Column(children: [
+              TextFormField(
+                autofocus: true,
+                decoration: const InputDecoration(
+                  hintText: "Enter your username",
+                  icon: Icon(Icons.account_circle),
+                  label: Text("Username"),
+                ),
+                cursorWidth: 1,
+                cursorHeight: 18,
+                cursorRadius: const Radius.circular(10),
+              ),
+              TextFormField(
+                autofocus: true,
+                decoration: const InputDecoration(
+                  hintText: "Enter your email",
+                  icon: Icon(Icons.email),
+                  label: Text("Email"),
+                ),
+                cursorWidth: 1,
+                cursorHeight: 18,
+                cursorRadius: const Radius.circular(10),
+              ),
+              TextFormField(
+                obscureText: true,
+                decoration: const InputDecoration(
+                  hintText: "Enter your password",
+                  icon: Icon(Icons.password),
+                  label: Text("Password")
+                ),
+                cursorWidth: 1,
+                cursorHeight: 18,
+                cursorRadius: const Radius.circular(10),
+              ),
+              TextFormField(
+                obscureText: true,
+                decoration: const InputDecoration(
+                  hintText: "Verify your password",
+                  icon: Icon(Icons.password),
+                  label: Text("Confirm Password")
+                ),
+                cursorWidth: 1,
+                cursorHeight: 18,
+                cursorRadius: const Radius.circular(10),
+              ),
+            ])))),
+        actions: <Widget>[
+          TextButton(
+            onPressed: () => Navigator.pop(context, 'Cancel'),
+            child: const Text('Cancel'),
+          ),
+          TextButton(
+            onPressed: () {
+              // Validate returns true if the form is valid, or false otherwise.
+              if (_formKey.currentState!.validate()) {
+                // If the form is valid, display a snackbar. Up the real world,
+                // you'd often call a server or save the information in a database.
+                ScaffoldMessenger.of(context).showSnackBar(
+                  SnackBar(content: Text(_formKey.toString())),
+                );
+              }
+            },
+            child: const Text('OK'),
+          ),
+        ],
+      );
+}