diff --git a/index.html b/index.html
index 9f954fc..e81a5e5 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,8 @@
                     </div>
                     <div class="shopping-form-quantity-wrapper">
                         <button class="shopping-form-quantity-button shopping-form-decrement" type="button"></button>
-                        <input name="item-quantity" type="text" value="1" disabled />
+                        <input class="shopping-form-quantity-input" name="item-quantity" type="text" value="1"
+                            disabled />
                         <button class="shopping-form-quantity-button shopping-form-increment" type="button"></button>
                     </div>
                 </div>
diff --git a/style/form.css b/style/form.css
new file mode 100644
index 0000000..44608ab
--- /dev/null
+++ b/style/form.css
@@ -0,0 +1,37 @@
+.shopping-form-inputs {
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: 24px;
+}
+
+.shopping-form-item-wrapper {
+  flex: 1; /*A div ocupe todo espaço disponível, fazendo que o outro elemento vá para o final*/
+  max-width: 256px;
+}
+
+.shopping-form-label {
+  display: block;
+  margin-bottom: 4px;
+}
+
+.shopping-form-item-input,
+.shopping-form-quantity-input {
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid var(--gray-300);
+  border-radius: 4px;
+  background: var(--white);
+}
+
+.shopping-form-quantity-wrapper {
+  display: flex;
+  align-items: center;
+  margin-left: 24px;
+}
+
+.shopping-form-quantity-input {
+  max-width: 64px;
+  text-align: center;
+  margin: 0 4px;
+}
diff --git a/style/global.css b/style/global.css
new file mode 100644
index 0000000..79361be
--- /dev/null
+++ b/style/global.css
@@ -0,0 +1,17 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body,
+input,
+button {
+  font-family: "Roboto", sans-serif;
+  font-size: 16px;
+  color: var(--gray-500);
+}
+
+button {
+  cursor: pointer;
+}
diff --git a/style/main.css b/style/main.css
index 910e3f0..ab7e7c2 100644
--- a/style/main.css
+++ b/style/main.css
@@ -1 +1,15 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
+@import url("global.css");
+@import url("variables.css");
+@import url("form.css");
+
+.shopping-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 15px;
+}
+
+.shopping-title {
+  margin: 32px 0;
+  font-size: 32px;
+}
diff --git a/style/variables.css b/style/variables.css
new file mode 100644
index 0000000..eaa8215
--- /dev/null
+++ b/style/variables.css
@@ -0,0 +1,10 @@
+:root {
+  --white: #fff;
+
+  --gray-100: #e5e5e5;
+  --gray-300: #bdbdbd;
+  --gray-500: #333;
+
+  --orange-300: #f6ad55;
+  --orange-500: #ed8936;
+}