diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..886edb020 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,27 +1,69 @@
+
+
-
-
-
-
- My form exercise
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ Checking Form
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Form-Controls/style.css b/Form-Controls/style.css
new file mode 100644
index 000000000..72c96eac9
--- /dev/null
+++ b/Form-Controls/style.css
@@ -0,0 +1,46 @@
+ /* Programmer : Chun Yan Wong
+ Date : 2026-06-03
+ Version : 1.0
+ Purpose : To create the separate css file for form control homework
+*/
+
+ body {
+ font-family: Arial, sans-serif;
+ background-color: hsl(0, 2%, 20%);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+ }
+
+ .customer-form {
+ background-color: #ffffff;
+ padding: 40px;
+ border-radius: 8px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ width: 300px;
+ }
+
+ .customer-form label {
+ margin-bottom: 5px;
+ color: #1a1a1a;
+ /* dark grey text */
+ background-color: transparent;
+ }
+
+ .customer-form button {
+ width: 100%;
+ padding: 10px;
+ background-color: #0056b3;
+ /* darker blue */
+ color: #ffffff;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 16px;
+ }
+
+ .custojmer-form button:hover {
+ background-color: #003f8a;
+ }
\ No newline at end of file