diff --git a/frontend/configurator.css b/frontend/configurator.css
new file mode 100755
index 0000000..4ba36d0
--- /dev/null
+++ b/frontend/configurator.css
@@ -0,0 +1,166 @@
+
+* {
+    
+    padding:                                        0px;
+    margin:                                         0px;
+}
+
+html, body, main {
+    
+    width:                                          100%;
+    height:                                         100%;
+}
+
+#configurator {
+    
+    display:                                        flex;
+    flex-direction:                                 row;
+    flex-wrap:                                      nowrap;
+    justify-content:                                space-around;
+    align-items:                                    center;
+    
+    width:                                          85vw;
+    height:                                         85vw;
+    
+    max-width:                                      85vh;
+    max-height:                                     85vh;
+}
+
+.config-step > .header {
+    
+    position:                                       relative;
+    z-index:                                        4;
+    top:                                            -32px;
+    
+    height:                                         32px;
+    
+    background-color:                               #161819;
+    color:                                          #fff;
+    
+    text-align:                                     center;
+    font-size:                                      20px;
+    font-weight:                                    650;
+    
+}
+
+.config-step > .content {
+    
+    position:                                       relative;
+    z-index:                                        3;
+    top:                                            -32px;
+    width:                                          100%;
+    height:                                         100%;
+}
+
+.config-step > .content > .inner-pane {
+    
+    width:                                          100%;
+    height:                                         100%;
+}
+
+#pane-choose-configurator {
+    
+    width:                                          80%;
+    height:                                         80%;
+    
+    background-color:                               #1e2122;
+}
+
+
+
+#configurator-chooser-background {
+    
+    width:                                          100%;
+    height:                                         100%;
+    
+    overflow:                                       hidden;
+}
+
+#configurator-chooser-preset-background {
+    
+    position:                                       relative;
+    bottom:                                         0%;
+    right:                                          0%;
+    z-index:                                        2;
+    
+    width:                                          99%;
+    height:                                         99%;
+    
+    clip-path:                                      polygon(0% 0%, 0% 100%, 100% 0%);
+    
+    background-color:                               #242728;
+}
+
+#configurator-chooser-preset-background:hover {
+    
+    background-color:                               #2f3436;
+}
+
+#configurator-chooser-own-systems-background {
+    
+    position:                                       relative;
+    bottom:                                         98%;
+    right:                                          -1%;
+    
+    width:                                          99%;
+    height:                                         99%;
+    
+    clip-path:                                      polygon(100% 100%, 0% 100%, 100% 0%);
+    
+    background-color:                               #242728;
+}
+
+#configurator-chooser-own-systems-background:hover {
+    
+    background-color:                               #2f3436;
+}
+
+
+
+#button-choose-preset-configurator {
+    z-index:                                        2;
+    position:                                       relative;
+    top:                                            -70%;
+    left:                                           22.5%;
+    
+    color:                                          #fff;
+    font-size:                                      40px;
+    font-weight:                                    1000;
+}
+
+#button-choose-own-systems-configurator {
+    
+    z-index:                                        2;
+    position:                                       relative;
+    top:                                            -40%;
+    left:                                           60%;
+    
+    color:                                          #fff;
+    font-size:                                      40px;
+    font-weight:                                    1000;
+}
+
+#main-desktop-container {
+    
+    display:                                        flex;
+    flex-direction:                                 row;
+    flex-wrap:                                      nowrap;
+    justify-content:                                space-around;
+    align-items:                                    center;
+    
+    background-color:                               #373939;
+}
+
+#control-bar {
+    
+    position:                                       fixed;
+    left:                                           0px;
+    top:                                            0px;
+    z-index:                                        16;
+    
+    width:                                          48px;
+    height:                                         100%;
+    
+    background-color:                               #1e2122;
+}
+
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100755
index 0000000..156ea95
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <meta charset="UTF-8">
+        
+        <title>NEMU | nerdcult.net emulator</title>
+        
+        <link rel="stylesheet" href="configurator.css">
+    </head>
+    
+    <body>
+        <main id="main-desktop-container">
+            
+            <aside id="control-bar">
+                
+                
+                
+            </aside>
+            
+            <section id="configurator">
+                
+                <div class="config-step" id="pane-choose-configurator">
+                    
+                    <div class="header">
+                        System Type
+                    </div>
+                    
+                    <div class="content">
+                        
+                        <div class="inner-pane">
+                            
+                            <div id="configurator-chooser-background">
+                                <div id="configurator-chooser-preset-background"></div>
+                                <div id="configurator-chooser-own-systems-background"></div>
+                            </div>
+                            
+                            <div id="button-choose-preset-configurator"> <p>Preset</p> </div>
+                            <div id="button-choose-own-systems-configurator"> <p>Own</p> </div>
+                        </div>
+                    </div>
+                <div>
+                
+            </section>
+            
+        </main>
+        
+        <footer>
+            
+            
+            
+        </footer>
+    </body>
+</html>
+