diff --git a/css/components/page/results.css b/css/components/page/results.css
index 39eb28c..1430cfc 100644
--- a/css/components/page/results.css
+++ b/css/components/page/results.css
@@ -1,5 +1,33 @@
+.results-container-padding {
+    width: 100%;
+    
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #E3F0FF;
+
+}
 .results-container {
     display: grid;
     gap: 20px;
+    width: 90%;
+    grid-template-columns: 1fr 1fr;
     
+    grid-template-rows: repeat(6, calc((90vw / 2) - 20px));
+}
+.result-square {
+    background-color: red;
+}
+.result-portrait {
+    background-color: blue;
+    grid-row: span 2;
+}
+.result-landscape {
+    background-color: green;
+    grid-column: span 2;
+}
+.result-instagram {
+    background-color: yellow;
+    grid-column: span 2;
+    grid-row: span 2;
 }
\ No newline at end of file
diff --git a/src/components/page/results.rs b/src/components/page/results.rs
index 9794dce..42e6a05 100644
--- a/src/components/page/results.rs
+++ b/src/components/page/results.rs
@@ -4,8 +4,28 @@ use yew::prelude::*;
 pub fn results_section() -> Html {
     
     html! {
-        <div class={"results-container"}>
+        <div class={"results-container-padding"}>
+            <div class={"results-container"}>
+                <div class={"result-square"}>
 
+                </div>
+                <div class={"result-portrait"}>
+
+                </div>
+                <div class={"result-square"}>
+
+                </div>
+                <div class={"result-landscape"}>
+
+                </div>
+                <div class={"result-instagram"}>
+
+                </div>
+                <div class={"result-square"}>
+
+                </div>
+                <div class={"result-square"}></div>
+            </div>
         </div>
     }
 }