diff --git a/css/app.css b/css/app.css
index 02802f4..beeffa2 100644
--- a/css/app.css
+++ b/css/app.css
@@ -37,3 +37,54 @@
 .font-ubuntu {
     font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Ubuntu", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
+
+.grid-container {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    gap: 2em 2em;
+    grid-auto-flow: row;
+    grid-template-areas:
+        "wrapper";
+}
+
+.wrapper {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(3, 1fr);
+    gap: 2em 2em;
+    grid-auto-flow: row;
+    grid-template-areas:
+        "grid-header"
+        "grid-main"
+        "grid-footer";
+    grid-area: wrapper;
+}
+
+.grid-header {
+    grid-area: grid-header;
+}
+
+.grid-main {
+    display: grid;
+    grid-template-columns: 30% 1fr;
+    grid-template-rows: 1fr;
+    gap: 2em 2em;
+    grid-auto-flow: row;
+    grid-template-areas:
+        "input-container output-wrapper";
+    grid-area: grid-main;
+}
+
+.input-container {
+    grid-area: input-container;
+}
+
+.output-wrapper {
+    grid-area: output-wrapper;
+}
+
+.grid-footer {
+    grid-area: grid-footer;
+}
+
diff --git a/index.php b/index.php
index ec8c09e..3543738 100644
--- a/index.php
+++ b/index.php
@@ -62,49 +62,8 @@ require_once "env.php";
         <!-- -->
     </head>
     <body class="font-open-sans antialiased">
-        <div id="app" class="flex flex-col items-center justify-center w-full min-h-screen">
-            <div v-show="showStatusMessage" class="w-1/5 text-center px-4 py-3 uppercase font-bold bg-green-300 text-green-600 fixed top-0 mt-4 rounded z-10">Copied!</div>
-            <div v-show="showErrorMessage" class="w-1/5 text-center px-4 py-3 uppercase font-bold bg-red-300 text-red-600 fixed top-0 mt-4 rounded z-10">Failed to copy</div>
-            <div class="w-3/5">
-                <h1 class="text-center text-2xl font-bold">Batch Color Converter</h1>
 
-                <p class="mt-6">Click a particular cell in the table with HSL, RGB, or hex to copy that value.</p>
-
-                <button type="button" class="block w-full py-4 uppercase font-bold text-white bg-pink-600 rounded mt-6 mb-8" v-on:click="batchConvert()">Convert</button>
-
-                <div class="flex flex-row mb-8">
-                    <div class="flex w-1/3 mr-4">
-                        <textarea v-model="inputBox" class="resize-y w-full h-96 border border-gray-200 shadow rounded py-2 px-4" placeholder="#fff"></textarea>
-                    </div>
-                    <div class="flex flex-col w-2/3 ml-4">
-                        <table class="font-ubuntu w-full">
-                            <thead>
-                                <tr>
-                                    <th class="p-4">Preview</th>
-                                    <th class="p-4">Hex(a)</th>
-                                    <th class="p-4">RGB(a)</th>
-                                    <th class="p-4">HSL(a)</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr v-for="color in convertedColors" class="border-t border-gray-300">
-                                    <td v-show="color.error" class="text-center px-2 py-4 bg-red-200 text-red-700 font-bold" colspan="4">Error with {{ color.raw }}</td>
-                                    <td v-show="!color.error">
-                                        <div class="block mx-2 my-4" style="height: 25px;" :style="{ background: color.hex }"></div>
-                                    </td>
-                                    <td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.hex)">{{ color.hex }}</div></td>
-                                    <td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.rgb)">{{ color.rgb }}</div></td>
-                                    <td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.hsl)">{{ color.hsl }}</div></td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="absolute bottom-0 p-8 text-center w-full">
-            You can take a look at <a href="https://git.ditoforge.com/brian/batch-color-converter" title="Source code for this page" class="text-blue-400 font-bold hover:text-blue-700 transition">this terrible code over on my git server</a>.
-        </div>
+        
+    <!-- END OF LINE. -->
     </body>
 </html>
-<!-- END OF LINE. -->
diff --git a/js/app.js b/js/app.js
index 59597ad..51d316a 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,5 +1,5 @@
 const clipboard = navigator.clipboard;
-
+// TODO: review convertion methods
 let app = new Vue({
   el: '#app',
 
