diff --git a/index.html b/index.html
new file mode 100644
index 0000000..92a0a74
--- /dev/null
+++ b/index.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CP Judge</title>
+    <style>
+	        .title{
+				margin-top: 5px;
+				font-family: 'Arvo', serif;
+			    font-size: 45px;
+			}
+
+			.line{
+				font-family: 'Tangerine', cursive;
+				font-size: 40px;
+			}
+
+			.text{
+			    font-family: 'Arvo', serif;
+			    font-size: 20px;
+			    font-weight: 400;
+			}
+
+            li, #status{
+			    font-family: 'Arvo', serif;
+			    font-size: 15px;
+			    font-weight: 400;
+			}
+    </style>
+    <link href="https://fonts.googleapis.com/css?family=Arvo|Tangerine" rel="stylesheet">
+    <link rel="stylesheet "type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
+</head>
+<div class="container">
+    <header>
+        <div class="row">                   
+            <h1 class="title"><a href="/">CP Judge</a></h1>
+        </div>
+    </header>
+        
+    <body>
+        <div class="row"> 
+            <div class="col-md-7">
+                <p class="text" id="question-text">Select a problem from the list on right to solve.</p>
+            </div>
+            <br>
+        </div>
+        <div class="row">       
+            <div class="col-md-8">
+                <div id="language-pick" style="width: 50%; margin-left:auto; margin-right: auto;">
+                    <label class="control-label">Language Picker</label>
+                    <select id="language-picker">
+                        <option value='c'>C</option>
+                        <option value="cpp">C++</option>
+                        <option value="java">Java</option>
+                        <option value='python'>Python</option>
+                    </select>
+                </div>    
+                <div id="container" style="width:80%;height:300px;border:1px solid grey; margin-right: auto;"></div>
+                <br>
+                <input type="submit" onclick="contents()" id="submit-code" class="btn btn-primary" value="Submit Code" style="width: 20%; margin-right:auto;">
+                <br>
+                <br>
+                <div id="status">
+                </div>
+            </div>
+            <div class="col-md-4">
+                <p class="line">Other Questions:</p>
+                <ol class="question-text" id="other-questions">
+                    <!-- <a onclick="getQuestion('c8a3de99-4a18-4a46-93a2-654ad6926176');" href="javascript:void(0);"><li>How are you?</li></a> -->
+                </ol>
+            </div>
+        </div>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+        <script src="https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/vs/loader.js"></script>
+        <script>
+            getQuestions();
+            var editor;
+            require.config({ paths: { 'vs': 'https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/vs' }});
+            var lang_pick = document.getElementById('language-picker');
+            var lang;
+            lang_pick.addEventListener('click',()=>{
+                lang = lang_pick.value;
+                localStorage.setItem('lang', lang);
+                window.location.href="/index.html";
+            });
+            lang = localStorage.getItem('lang');
+            lang_pick.value = lang;
+            require(['vs/editor/editor.main'], function() {
+                editor = monaco.editor.create(document.getElementById('container'), {
+                    value: [
+                        // 'print("test")',
+                        // '\tprint(again)'
+                    ].join('\n'),
+                    language: lang   
+                });
+            }); 
+            var qid;
+            function contents(){
+                model = editor.getModel();
+                var submission = {
+                    question_id: qid, 
+                    user_id: 'a934e6c7-c658-4cc8-bd43-c5a6de2b8294',
+                    language: lang,
+                    submission_file: model.getValue()
+                }
+                console.log(submission);
+                $.ajax({
+                    url: 'http://localhost:3000/submission',
+                    type: 'post',
+                    dataType: 'json',
+                    contentType: 'application/json',
+                    success: function (result) {
+                        document.getElementById('status').innerHTML = "Your submission returned: " +  result.code_status;
+                    },
+                    data: JSON.stringify(submission)
+                });
+            }
+            function getQuestion(qsn_id){//localhost:3000/question/1ed7ff56-a849-462d-a571-7f0dbfe32633
+                $.getJSON("http://localhost:3000/questions/" + qsn_id, function(data){
+                    console.log("called");
+                    document.getElementById('question-text').innerHTML = 'Problem Statement:' + data.question;
+                    qid=qsn_id;
+                });
+            }
+            function getQuestions(){//localhost:3000/question/1ed7ff56-a849-462d-a571-7f0dbfe32633
+                // <a onclick="getQuestion('c8a3de99-4a18-4a46-93a2-654ad6926176');" href="javascript:void(0);"><li>How are you?</li></a>
+                $.ajax({
+                    url: 'http://localhost:3000/questions',
+                    success: function (questions) {
+                        var htmlStr = '';
+                        for (var i = 0; i < questions.length; i++) {
+                            htmlStr += '<a onclick="getQuestion('+ "'" + questions[i].id + "'" + ');" href="javascript:void(0);"><li>' + questions[i].question + '</li></a>';
+                        }
+                    $("#other-questions").html(htmlStr);
+                    }
+                });
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
