diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..011a7e2
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,7 @@
+#         livereload: github.com/omeid/go-livereload/cmd/livereload@v0.0.0-20180903043807-18d58b752b26
+livereload:
+	livereload . &
+
+server:
+	python3 -m http.server 8082 &
+
diff --git a/index.html b/index.html
index 19f6fef..d356a28 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
     <head>
         <link rel="stylesheet" href="croppie.css" />
         <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
+        <script src="http://localhost:35729/livereload.js"></script>
         <script src="croppie.js"></script>
         <script>
 
@@ -41,31 +42,79 @@
 
         </script>
         <!--
-                width: 3264px;
-                height: 4224px;
+            width: 3264px;
+            height: 4224px;
+            width: 8.5in;
+            height: 11in;
         -->
         <style>
-            .container {
-                width: 8.5in;
-                height: 11in;
+            .image-surface {
                 overflow: hidden;
                 margin: auto;
-                border: 1px solid;
+                background-color: lightgreen;
             }
-            .img1, .img2 {
+            .imagebox {
+                grid-area: image;
+                display:flex;
+                align-items: center;
+                justify-content: center;
+                padding: 50px;
+                flex: 70%;
+            }
+            .container {
+                display: flex;
+                background-color: lightyellow;
+                height: calc(100vh - 20px);
+            }
+            .controls {
+                background-color: lightgrey;
+                display: flex;
+                grid-area: controls;
+                align-items: center;
+                justify-content: center;
+                flex: 30%;
+            }
+            .showbuton {
+                font-size: 2rem;
+            }
+            .letter-portrait {
+                height: 100%;
+                aspect-ratio: 85 / 110;
+            }
+            .letter-portrait .img {
                 height: 50%;
             }
+            .letter-landscape-2 {
+                display:flex;
+                // width: 80vh;
+                height: 100%;
+                // margin: auto;
+                // aspect-ratio: 110 / 85;
+                aspect-ratio: 7 / 5;
+            }
+            .letter-landscape-2 .img1 {
+                flex: 60%;
+            }
+            .letter-landscape-2 .img2 {
+                flex: 40%;
+            }
         </style>
     </head>
     <body onload="main()">
         <div class="container">
-            <div class="img1" id="idimg1">
-                <!-- <img src="img1.jpg"> -->
+            <div class="controls">
+                <button class="showbuton" onClick="showCrop()">Snap Collage</button>
+            </div>
+            <div class="imagebox">
+            <div class="image-surface letter-landscape-2">
+                <div class="img img1" id="idimg1">
+                    <!-- <img src="img1.jpg"> -->
+                </div>
+                <div class="img img2" id="idimg2">
+                    <!-- <img src="img2.jpg"> -->
+                </div>
             </div>
-            <div class="img2" id="idimg2">
-                <!-- <img src="img2.jpg"> -->
             </div>
         </div>
-        <button onClick="showCrop()">Show</button>
     </body>
 </html>
