diff --git a/styles/form.css b/styles/form.css
index d87e1d4..554db60 100644
--- a/styles/form.css
+++ b/styles/form.css
@@ -1,3 +1,8 @@
+
+.shopping-form {
+    margin-bottom: 32px;
+}
+
 .shopping-form-inputs {
     display: flex;
     align-items: flex-end;
diff --git a/styles/items.css b/styles/items.css
new file mode 100644
index 0000000..a858615
--- /dev/null
+++ b/styles/items.css
@@ -0,0 +1,22 @@
+.shopping-result{
+    max-width: 416px;
+}
+
+.shopping-result-head,
+.shopping-item{
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    padding: 8px 16px;
+}
+
+.shopping-result-head{
+    background: var(--gray-100);
+}
+
+.shopping-items {
+    list-style: none;
+}
+
+.shopping-item:nth-child(even){
+    background: var(--gray-100);
+}
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
index 37cce4e..7c8efa9 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,6 +1,7 @@
 @import "global.css";
 @import "varibles.css";
 @import "form.css";
+@import "items.css";
 
 .shopping-container {
     max-width: 1200px;