diff --git a/admin/.clasp.json b/admin/.clasp.json
new file mode 100644
index 0000000..e1e41e5
--- /dev/null
+++ b/admin/.clasp.json
@@ -0,0 +1 @@
+{"scriptId":"1ayOszkKcVSChNjDGnC2V2gx5zOqe7LrC6MdQC6WsR30Vhtv1phLkWpeM","rootDir":"/Users/eren.yener/Desktop/repo/erenyener/codex/admin"}
diff --git a/admin/.claspignore b/admin/.claspignore
new file mode 100644
index 0000000..de04126
--- /dev/null
+++ b/admin/.claspignore
@@ -0,0 +1,5 @@
+**/**
+.git
+.doc
+!src/**
+!appsscript.json
\ No newline at end of file
diff --git a/admin/README.md b/admin/README.md
new file mode 100644
index 0000000..59bda9f
--- /dev/null
+++ b/admin/README.md
@@ -0,0 +1,27 @@
+# Codex Admin Appscripts
+
+
+## Quick Links
+[Panel Link](https://docs.google.com/spreadsheets/d/1TSYzDuSMnv_3uVRcM7o0tNyUdRlKy3C6gFHKMVh5fjc/edit#gid=0)
+
+
+## Install
+
+First download `clasp`:
+
+```sh
+npm install -g @google/clasp
+```
+
+Then enable the Google Apps Script API: https://script.google.com/home/usersettings
+
+![Enable Apps Script API](https://user-images.githubusercontent.com/744973/54870967-a9135780-4d6a-11e9-991c-9f57a508bdf0.gif)
+    
+
+## Commands
+
+```sh
+clasp login (Login with your LDAP)
+clasp pull (Get Latest Code From Google Cloud Scripts)
+
+```
\ No newline at end of file
diff --git a/admin/appsscript.json b/admin/appsscript.json
new file mode 100644
index 0000000..c088c19
--- /dev/null
+++ b/admin/appsscript.json
@@ -0,0 +1,7 @@
+{
+  "timeZone": "Europe/Istanbul",
+  "dependencies": {
+  },
+  "exceptionLogging": "STACKDRIVER",
+  "runtimeVersion": "V8"
+}
\ No newline at end of file
diff --git a/admin/src/controllers/challange.controller.js b/admin/src/controllers/challange.controller.js
new file mode 100644
index 0000000..640eb35
--- /dev/null
+++ b/admin/src/controllers/challange.controller.js
@@ -0,0 +1,32 @@
+function ChallangeController() { }
+
+function processAddChallange() {
+    const challangeController = new ChallangeController();
+    challangeController.addChallange();
+    return true;
+}
+
+ChallangeController.prototype.renderAddChallangeModal = function () {
+
+    const scriptProperties = PropertiesService.getScriptProperties();
+    const token = scriptProperties.getProperty("token")
+    const data = { token: token };
+
+    const addProblemModalHtml = HtmlService
+        .createTemplateFromFile('src/views/add-new-challange-modal/add-new-challange-modal')
+        .evaluate()
+        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
+        .getContent();
+
+    const dataScript = "<script>window.stringifiedData = " + JSON.stringify(data) + "</script>";
+    const template = HtmlService.createTemplate(dataScript + addProblemModalHtml)
+        .evaluate()
+        .setWidth(800)
+        .setHeight(350);
+
+    SpreadsheetApp.getUi().showModalDialog(template, 'Add New Challange');
+}
+
+ChallangeController.prototype.addChallange = function () {
+    return true;
+}
diff --git a/admin/src/controllers/problem.controller.js b/admin/src/controllers/problem.controller.js
new file mode 100644
index 0000000..fccb66e
--- /dev/null
+++ b/admin/src/controllers/problem.controller.js
@@ -0,0 +1,32 @@
+function ProblemController() { }
+
+function processAddProblem(problem) {
+    const problemController = new ProblemController();
+    problemController.addProblem();
+    return true;
+}
+
+ProblemController.prototype.renderAddProblemModal = function () {
+
+    const scriptProperties = PropertiesService.getScriptProperties();
+    const token = scriptProperties.getProperty("token")
+    const data = { token: token };
+
+    const addProblemModalHtml = HtmlService
+        .createTemplateFromFile('src/views/add-new-problem-modal/add-new-problem-modal')
+        .evaluate()
+        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
+        .getContent();
+
+    const dataScript = "<script>window.stringifiedData = " + JSON.stringify(data) + "</script>";
+    const template = HtmlService.createTemplate(dataScript + addProblemModalHtml)
+        .evaluate()
+        .setWidth(1000)
+        .setHeight(600);
+
+    SpreadsheetApp.getUi().showModalDialog(template, 'Add New Problem');
+}
+
+ProblemController.prototype.addProblem = function () {
+    return true;
+}
diff --git a/admin/src/controllers/test.controller.js b/admin/src/controllers/test.controller.js
new file mode 100644
index 0000000..312636d
--- /dev/null
+++ b/admin/src/controllers/test.controller.js
@@ -0,0 +1,57 @@
+function TestController() { }
+
+function processAddTest() {
+    const testController = new TestController();
+    testController.addTest();
+}
+
+TestController.prototype.getTestsSelection = function () {
+    const testsSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Tests');
+    const activeRange = testsSheet.getActiveRange();
+    const activeValues = activeRange.getValues();
+
+    let tests = [];
+    for(let row of activeValues){
+        tests.push({
+            input: row[0],
+            output: row[1],
+            isPublic: row[2],
+        })
+    }
+
+    return tests;
+}
+
+TestController.prototype.renderAddTestsModal = function() {
+    
+    const addNewTestsHtml = HtmlService
+        .createTemplateFromFile('src/views/add-new-tests-modal/add-new-tests-modal')
+        .evaluate()
+        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
+        .getContent();
+    
+    const tests = this.getTestsSelection();
+    const scriptProperties = PropertiesService.getScriptProperties();
+    const token = scriptProperties.getProperty("token")
+    const data = { 
+        token: token,
+        tests:tests
+     };
+    const dataScript = "<script>window.stringifiedData = " + JSON.stringify(data) + "</script>";
+
+    const template = HtmlService.createTemplate(dataScript + addNewTestsHtml)
+        .evaluate()
+        .setWidth(600)
+        .setHeight(380);
+
+    
+
+    SpreadsheetApp.getUi().showModalDialog(template, 'Add New Tests');
+}
+
+
+TestController.prototype.addTest = function () {
+    const testsSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Tests');
+    const activeRange = testsSheet.getActiveRange();
+    activeRange.clearContent()
+}
\ No newline at end of file
diff --git a/admin/src/main.js b/admin/src/main.js
new file mode 100644
index 0000000..435e90e
--- /dev/null
+++ b/admin/src/main.js
@@ -0,0 +1,30 @@
+function onOpen() {
+    renderMenu();
+}
+
+function renderMenu() {
+
+    const ui = SpreadsheetApp.getUi();
+
+    ui.createMenu('Codex Admin')
+        .addItem('Add Problem', 'addProblem')
+        .addItem('Add Challenge', 'addChallange')
+        .addItem('Add Tests', 'addTests')
+        .addToUi();
+}
+
+
+function addProblem() {
+    const problemController = new ProblemController();
+    problemController.renderAddProblemModal();
+}
+
+function addChallange() {
+    const challangeController = new ChallangeController();
+    challangeController.renderAddChallangeModal();
+}
+
+function addTests() {
+    const testController = new TestController();
+    testController.renderAddTestsModal();
+}
\ No newline at end of file
diff --git a/admin/src/views/add-new-challange-modal/add-new-challange-modal.html b/admin/src/views/add-new-challange-modal/add-new-challange-modal.html
new file mode 100644
index 0000000..b7ef735
--- /dev/null
+++ b/admin/src/views/add-new-challange-modal/add-new-challange-modal.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <base target="_top">
+    <?!= HtmlService.createHtmlOutputFromFile("src/views/add-new-challange-modal/styles-add-new-challange-modal").getContent(); ?>
+</head>
+
+<body>
+    <div class="container">
+        <div id="loader" class="lds-facebook hide"><div></div><div></div><div></div></div>
+        <div id="formContainer" class="form-container">
+            <div class="row">
+                <div class="col-6">
+                    <div class="form-group">
+                        <label for="name">Name</label>
+                        <input type="text" placeholder="Trendyol Champs" class="text-field" id="name" name="name" />
+                    </div>
+                    <div class="form-group">
+                        <label for="description">Description</label>
+                        <textarea type="text" class="text-area-field description-editor" id="description" name="description" placeholder="### markdown"></textarea>
+                    </div>
+                    
+                    <div class="form-group">
+                        <button id="submitButton" onclick="submit"> Submit </button>
+                    </div>
+                </div>
+                <div class="col-6">
+
+                    <div class="form-group">
+                        <label for="problem-choice">Select Problem</label>
+                        <input list="problems" data-selected="" class="text-field" name="problem-choice" id="problemChoice">
+                        <datalist id="problems"></datalist>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="duration">Duration</label>
+                        <input type="text" placeholder="10" class="text-field" id="duration" name="duration" />
+                    </div>
+                    <div class="form-group">
+                        <label for="teamSize">Team Size</label>
+                        <input type="text" placeholder="2" class="text-field" id="teamSize" name="teamSize" />
+                    </div>
+                    <div class="form-group">
+                        <label for="date">Date</label>
+                        <input type="text" placeholder="2023-04-07T11:50:06.963Z" class="text-field" id="date" name="date" />
+                    </div>
+                </div>
+            </div>
+    </div>
+    </div>
+</body>
+    <?!= HtmlService.createHtmlOutputFromFile("src/views/add-new-challange-modal/scripts-add-new-challange-modal").getContent(); ?>
+
+</html>
\ No newline at end of file
diff --git a/admin/src/views/add-new-challange-modal/scripts-add-new-challange-modal.html b/admin/src/views/add-new-challange-modal/scripts-add-new-challange-modal.html
new file mode 100644
index 0000000..2a70782
--- /dev/null
+++ b/admin/src/views/add-new-challange-modal/scripts-add-new-challange-modal.html
@@ -0,0 +1,197 @@
+<script>
+
+    
+
+    function hasClass(ele, cls) {
+        return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
+    }
+
+    function addClass(ele, cls) {
+        if (!hasClass(ele, cls)) ele.className += " " + cls;
+    }
+
+    function removeClass(ele, cls) {
+        if (hasClass(ele, cls)) {
+            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
+            ele.className = ele.className.replace(reg, ' ');
+        }
+    }
+
+    function DomController() {
+        this.challangeService = new ChallangeService();
+        this.problemService = new ProblemService();
+
+        init = async () => {
+            document.getElementById("submitButton").addEventListener("click", submit);
+            initElements();
+            const problems = await this.problemService.getProblems();
+            initDataList(problems);
+        }
+
+        initDataList = (problems) => {
+            const datalist = document.getElementById('problems')
+            problems.forEach(function (problem) {
+                let option = document.createElement('option');
+                option.value = problem.title + ' - ' + problem.id;
+                datalist.appendChild(option);
+            });
+        }
+
+        initElements = () => {
+            this.loader = document.getElementById("loader");
+            this.formContainer = document.getElementById("formContainer");
+            this.$name = document.getElementById("name");
+            this.$description = document.getElementById("description");
+            this.$duration = document.getElementById("duration");
+            this.$teamSize = document.getElementById("teamSize");
+            this.$date = document.getElementById("date");
+            this.$problemChoice = document.getElementById('problemChoice');
+        }
+
+        toggleLoader = (isShow) => {
+            if (isShow) {
+                addClass(this.formContainer, "hide");
+                removeClass(this.loader, "hide");
+            }
+        }
+
+        submit = (e) => {
+
+            const selectedValue = this.$problemChoice.value;
+            const titleIdPair = selectedValue.split(' - ');
+            const problemId = titleIdPair[1];
+
+            const challange = {
+                name: this.$name.value,
+                description: this.$description.value,
+                duration: parseInt(this.$duration.value),
+                teamSize: parseInt(this.$teamSize.value),
+                date: this.$date.value,
+                problemId: problemId,
+            }
+
+            const isValid = this.challangeService.validate(challange);
+            if (isValid) {
+                toggleLoader(true);
+                this.challangeService.add(challange)
+            }
+            else {
+                alert("Challange is not valid, Make sure all the fields are filled");
+            }
+        }
+        return {
+            init
+        }
+    }
+
+    function ChallangeService(challange) {
+
+        validate = (challange) => {
+
+            if (!challange.name || challange.name.length === 0) {
+                return false;
+            }
+            else if (!challange.description || challange.description.length === 0) {
+                return false;
+            }
+            else if (!challange.problemId || challange.problemId <= 0) {
+                return false;
+            }
+            else if (!challange.teamSize || challange.teamSize <= 0) {
+                return false;
+            }
+            else if (!challange.duration || challange.duration <= 0) {
+                return false;
+            }
+            else if (!challange.date) {
+                return false;
+            }
+
+            return true;
+        }
+
+        onSuccess = () => {
+            google.script.host.close();
+        }
+
+        add = (challange) => {
+
+            const url = "https://discovery-sfx-codex-service.moon.trendyol.com/challenge"
+            const requestOptions = {
+                method: "POST",
+                body: JSON.stringify({
+                    name: challange.name,
+                    description: challange.description,
+                    problemId: challange.problemId,
+                    teamSize: challange.teamSize,
+                    duration: challange.duration,
+                    date: challange.date
+                }),
+                credentials: 'include',
+                headers: {
+                    "x-access-token": window.stringifiedData.token,
+                    "Content-Type": "application/json",
+                    "Access-Control-Allow-Origin": "*",
+                    "Access-Control-Allow-Credentials": "true",
+                    "Access-Control-Allow-Methods": "DELETE, POST, GET, OPTIONS",
+                    "Access-Control-Allow-Headers": "Content-Type, Authorization, X-Requested-With, cookie, cache-control, accept, authority",
+                }
+            }
+
+            fetch(url, requestOptions).
+                then(response => response.json()).
+                then(json => {
+                    google.script.run.withSuccessHandler(onSuccess).processAddChallange(json);
+                }).
+                catch(error => {
+                    console.log(error)
+                })
+        }
+
+        return {
+            add,
+            validate
+        }
+
+    }
+
+    function ProblemService() {
+
+        const self = this;
+        getProblems = () => {
+            let promise = new Promise((resolve, reject) => {
+                const url = "https://discovery-sfx-codex-service.moon.trendyol.com/problem";
+                const requestOptions = {
+                    method: "GET",
+                    credentials: 'include',
+                    headers: {
+                        "x-access-token": window.stringifiedData.token,
+                        "Content-Type": "application/json",
+                        "Access-Control-Allow-Origin": "*",
+                        "Access-Control-Allow-Credentials": "true",
+                        "Access-Control-Allow-Methods": "DELETE, POST, GET, OPTIONS",
+                        "Access-Control-Allow-Headers": "Content-Type, Authorization, X-Requested-With, cookie, cache-control, accept, authority",
+                    }
+                };
+
+                fetch(url, requestOptions).
+                    then(response => response.json()).
+                    then(json => {
+                        resolve(json);
+                    }).
+                    catch(error => {
+                        reject(false);
+                    })
+
+            })
+            return promise;
+        }
+
+        return {
+            getProblems
+        }
+    }
+
+    const domController = new DomController();
+    domController.init();
+</script>
\ No newline at end of file
diff --git a/admin/src/views/add-new-challange-modal/styles-add-new-challange-modal.html b/admin/src/views/add-new-challange-modal/styles-add-new-challange-modal.html
new file mode 100644
index 0000000..da847e2
--- /dev/null
+++ b/admin/src/views/add-new-challange-modal/styles-add-new-challange-modal.html
@@ -0,0 +1,174 @@
+<style>
+    html {
+        font-size: 14px;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    }
+
+    div.form {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .form-group {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 1rem;
+    }
+
+    .form-group>label {
+        font-size: 14px;
+        margin-bottom: 0.5rem;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    }
+
+    .form-group>.text-field {
+        display: block;
+        height: 30px;
+        padding-left: 10px;
+        line-height: 1.5;
+        color: #495057;
+        background-color: #fff;
+        background-clip: padding-box;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    }
+
+    .form-group>.text-area-field {
+        display: block;
+        height: 70px;
+        padding-left: 10px;
+        line-height: 1.5;
+        color: #495057;
+        background-color: #fff;
+        background-clip: padding-box;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    }
+
+    .form-group>button {
+        color: #fff;
+        background-color: #007bff;
+        border-color: #007bff;
+        height: 30px;
+        display: inline-block;
+        font-weight: 400;
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: middle;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        border: 1px solid transparent;
+        line-height: 1.5;
+        border-radius: 0.25rem;
+        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    }
+
+    select#selectType {
+        display: block;
+        height: 30px;
+        padding-left: 10px;
+        line-height: 1.5;
+        color: #495057;
+        background-color: #fff;
+        background-clip: padding-box;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    }
+
+    .row {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        padding: 10px;
+    }
+
+    .hide {
+        display: none !important;
+    }
+
+    .col-12 {
+        width: 100%;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        padding: 20px;
+    }
+
+    .col-6 {
+        width: 50%;
+        padding: 10px;
+    }
+
+    .code-editor {
+        height: 500px !important;
+    }
+
+    .description-editor {
+        height: 126px !important;
+    }
+
+    select#difficulty {
+        height: 40px;
+    }
+
+    #editor {
+        display: block;
+        width: 100%;
+        height: 500px;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+    }
+
+    .lds-facebook {
+        display: inline-block;
+        position: relative;
+        width: 80px;
+        height: 80px;
+        margin-left: 45%;
+        margin-top: 100px;
+    }
+
+    .lds-facebook div {
+        display: inline-block;
+        position: absolute;
+        left: 8px;
+        width: 16px;
+        background: #007bff;
+        animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+    }
+
+    .lds-facebook div:nth-child(1) {
+        left: 8px;
+        animation-delay: -0.24s;
+    }
+
+    .lds-facebook div:nth-child(2) {
+        left: 32px;
+        animation-delay: -0.12s;
+    }
+
+    .lds-facebook div:nth-child(3) {
+        left: 56px;
+        animation-delay: 0;
+    }
+
+    @keyframes lds-facebook {
+        0% {
+            top: 8px;
+            height: 64px;
+        }
+        50%,
+        100% {
+            top: 24px;
+            height: 32px;
+        }
+    }
+
+    .ta-center{
+        text-align: center !important;
+    }
+</style>
\ No newline at end of file
diff --git a/admin/src/views/add-new-problem-modal/add-new-problem-modal.html b/admin/src/views/add-new-problem-modal/add-new-problem-modal.html
new file mode 100644
index 0000000..d8dfba1
--- /dev/null
+++ b/admin/src/views/add-new-problem-modal/add-new-problem-modal.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <base target="_top">
+    <?!= HtmlService.createHtmlOutputFromFile("src/views/add-new-problem-modal/styles-add-new-problem-modal").getContent(); ?>
+    <link href="https://cdn.jsdelivr.net/npm/ace-builds@1.21.1/css/ace.min.css" rel="stylesheet">
+</head>
+
+<body>
+    <div class="container ta-center">
+        <div id="loader" class="lds-facebook hide"><div></div><div></div><div></div></div>
+        <div id="formContainer" class="form-container">
+            <div class="row">
+                <div class="col-6">
+                    <div class="form-group">
+                        <label for="title">Title</label>
+                        <textarea type="text" class="text-field" id="title" name="title"></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="content">Content</label>
+                        <textarea type="text" class="text-area-field content-editor" id="content" name="content" placeholder="### markdown"></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="difficulty">Select Difficulty</label>
+                        <select name="difficulty" id="difficulty">
+                            <option value="1">Easy</option>
+                            <option value="2">Medium</option>
+                            <option value="3">Hard</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <button id="submitButton" onclick="submit"> Submit </button>
+                    </div>
+                </div>
+                <div class="col-6">
+                    <div class="form-group">
+                        <label for="code">Default Code</label>
+                        <!-- <textarea type="text" class="text-area-field code-editor" id="code" name="code"></textarea> --> 
+                        <div id="editor">
+    function foo(items) {
+        var x = "All this is syntax highlighted";
+        return x;
+    }
+                        </div>
+                    </div>
+                </div>
+            </div>
+    </div>
+    </div>
+</body>
+    <script src="https://cdn.jsdelivr.net/npm/ace-builds@1.21.1/src-min-noconflict/ace.min.js"></script>
+    <?!= HtmlService.createHtmlOutputFromFile("src/views/add-new-problem-modal/scripts-add-new-problem-modal").getContent(); ?>
+
+</html>
\ No newline at end of file
diff --git a/admin/src/views/add-new-problem-modal/scripts-add-new-problem-modal.html b/admin/src/views/add-new-problem-modal/scripts-add-new-problem-modal.html
new file mode 100644
index 0000000..c34cf60
--- /dev/null
+++ b/admin/src/views/add-new-problem-modal/scripts-add-new-problem-modal.html
@@ -0,0 +1,142 @@
+<script>
+
+    function hasClass(ele, cls) {
+        return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
+    }
+
+    function addClass(ele, cls) {
+        if (!hasClass(ele, cls)) ele.className += " " + cls;
+    }
+
+    function removeClass(ele, cls) {
+        if (hasClass(ele, cls)) {
+            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
+            ele.className = ele.className.replace(reg, ' ');
+        }
+    }
+
+    function DomController() {
+        this.problemService = new ProblemService();
+        this.editor = {};
+
+        init = () => {
+            document.getElementById("submitButton").addEventListener("click", submit);
+            initElements();
+            initEditor();
+        }
+
+        initElements = () => {
+            this.loader = document.getElementById("loader");
+            this.formContainer = document.getElementById("formContainer");
+            this.$title = document.getElementById("title");
+            this.$content = document.getElementById("content");
+            this.$difficulty = document.getElementById("difficulty");
+        }
+
+        initEditor = () => {
+            this.editor = ace.edit("editor");
+            this.editor.setTheme("ace/theme/textmate");
+            this.editor.session.setTabSize(4);
+            this.editor.session.setMode("ace/mode/javascript");
+        }
+
+        toggleLoader = (isShow) => {
+            if (isShow) {
+                addClass(this.formContainer, "hide");
+                removeClass(this.loader, "hide");
+            }
+        }
+
+        submit = (e) => {
+
+            const problem = {
+                title: this.$title.value,
+                content: this.$content.value,
+                difficulty: this.$difficulty.value,
+                code: this.editor.getValue(),
+            }
+
+            const isValid = this.problemService.validate(problem);
+            if (isValid) {
+                toggleLoader(true);
+                this.problemService.add(problem)
+            }
+            else {
+                alert("Problem is not valid, Make sure all the fields are filled");
+            }
+
+        }
+
+        return {
+            init
+        }
+    }
+
+
+
+    function ProblemService() {
+
+
+        validate = (problem) => {
+
+            if (problem.title.length === 0) {
+                return false;
+            }
+            else if (problem.content.length === 0) {
+                return false;
+            }
+            else if (problem.content.code === 0) {
+                return false;
+            }
+
+            return true;
+        }
+
+        onSuccess = () => {
+            google.script.host.close();
+        }
+
+        add = (problem) => {
+            const url = "https://discovery-sfx-codex-service.moon.trendyol.com/problem"
+
+            const requestOptions = {
+                method: "POST",
+                body: JSON.stringify({
+                    title: problem.title,
+                    content: problem.content,
+                    difficulty: parseInt(problem.difficulty),
+                    defaultCodes: [{
+                        "language": "3",
+                        "defaultCode": btoa(problem.code)
+                    }]
+                }),
+                credentials: 'include',
+                headers: {
+                    "x-access-token": window.stringifiedData.token,
+                    "Content-Type": "application/json",
+                    "Access-Control-Allow-Origin": "*",
+                    "Access-Control-Allow-Credentials": "true",
+                    "Access-Control-Allow-Methods": "DELETE, POST, GET, OPTIONS",
+                    "Access-Control-Allow-Headers": "Content-Type, Authorization, X-Requested-With, cookie, cache-control, accept, authority",
+                }
+            }
+
+            fetch(url, requestOptions).
+                then(response => response.json()).
+                then(json => {
+                    google.script.run.withSuccessHandler(onSuccess).processAddProblem(json);
+                }).
+                catch(error => {
+                    alert("Error occured, you probably not connected VPN")
+                })
+        }
+
+        return {
+            add,
+            validate
+        }
+    }
+
+    const domController = new DomController();
+    domController.init();
+</script>
\ No newline at end of file
diff --git a/admin/src/views/add-new-problem-modal/styles-add-new-problem-modal.html b/admin/src/views/add-new-problem-modal/styles-add-new-problem-modal.html
new file mode 100644
index 0000000..12e78bb
--- /dev/null
+++ b/admin/src/views/add-new-problem-modal/styles-add-new-problem-modal.html
@@ -0,0 +1,174 @@
+<style>
+    html {
+        font-size: 14px;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    }
+
+    div.form {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .form-group {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 1rem;
+    }
+
+    .form-group>label {
+        font-size: 14px;
+        margin-bottom: 0.5rem;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    }
+
+    .form-group>.text-field {
+        display: block;
+        height: 30px;
+        padding-left: 10px;
+        line-height: 1.5;
+        color: #495057;
+        background-color: #fff;
+        background-clip: padding-box;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    }
+
+    .form-group>.text-area-field {
+        display: block;
+        height: 70px;
+        padding-left: 10px;
+        line-height: 1.5;
+        color: #495057;
+        background-color: #fff;
+        background-clip: padding-box;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    }
+
+    .form-group>button {
+        color: #fff;
+        background-color: #007bff;
+        border-color: #007bff;
+        height: 30px;
+        display: inline-block;
+        font-weight: 400;
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: middle;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        border: 1px solid transparent;
+        line-height: 1.5;
+        border-radius: 0.25rem;
+        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    }
+
+    select#selectType {
+        display: block;
+        height: 30px;
+        padding-left: 10px;
+        line-height: 1.5;
+        color: #495057;
+        background-color: #fff;
+        background-clip: padding-box;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    }
+
+    .row {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        padding: 10px;
+    }
+
+    .hide {
+        display: none !important;
+    }
+
+    .col-12 {
+        width: 100%;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        padding: 20px;
+    }
+
+    .col-6 {
+        width: 50%;
+        padding: 10px;
+    }
+
+    .code-editor {
+        height: 500px !important;
+    }
+
+    .content-editor {
+        height: 300px !important;
+    }
+
+    select#difficulty {
+        height: 40px;
+    }
+
+    #editor {
+        display: block;
+        width: 100%;
+        height: 500px;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+    }
+
+    .lds-facebook {
+        display: inline-block;
+        position: relative;
+        width: 80px;
+        height: 80px;
+        margin: auto;
+        margin-top: 100px;
+    }
+
+    .lds-facebook div {
+        display: inline-block;
+        position: absolute;
+        left: 8px;
+        width: 16px;
+        background: #007bff;
+        animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+    }
+
+    .lds-facebook div:nth-child(1) {
+        left: 8px;
+        animation-delay: -0.24s;
+    }
+
+    .lds-facebook div:nth-child(2) {
+        left: 32px;
+        animation-delay: -0.12s;
+    }
+
+    .lds-facebook div:nth-child(3) {
+        left: 56px;
+        animation-delay: 0;
+    }
+
+    @keyframes lds-facebook {
+        0% {
+            top: 8px;
+            height: 64px;
+        }
+        50%,
+        100% {
+            top: 24px;
+            height: 32px;
+        }
+    }
+
+    .ta-center{
+        text-align: center !important;
+    }
+</style>
\ No newline at end of file
diff --git a/admin/src/views/add-new-tests-modal/add-new-tests-modal.html b/admin/src/views/add-new-tests-modal/add-new-tests-modal.html
new file mode 100644
index 0000000..5ca4a94
--- /dev/null
+++ b/admin/src/views/add-new-tests-modal/add-new-tests-modal.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <base target="_top">
+    <?!= HtmlService.createHtmlOutputFromFile("src/views/add-new-tests-modal/styles-add-new-tests-modal").getContent(); ?>
+</head>
+
+<body>
+    <div class="container">
+        <div id="loader" class="lds-facebook hide"><div></div><div></div><div></div></div>
+        <div id="tableContainer" class="table-container">
+            <table id="testsTable">
+                <thead>
+                    <tr>
+                        <td>Input</td>
+                        <td>Output</td>
+                        <td>Is Public</td>
+                    </tr>
+                </thead>
+                <tbody>
+
+                </tbody>
+            </table>
+        </div>
+        <div id="formContainer" class="form-container">
+
+            <div class="form-group mt-20">
+                <label for="problem-choice">Select Problem</label>
+                <input list="problems" data-selected="" class="text-field" name="problem-choice" id="problemChoice">
+                <datalist id="problems"></datalist>
+            </div>
+
+            <div class="form-group">
+                <button id="submitButton" onclick="submit"> Submit </button>
+            </div>
+        </div>
+    </div>
+</body>
+    <?!= HtmlService.createHtmlOutputFromFile("src/views/add-new-tests-modal/scripts-add-new-tests-modal").getContent(); ?>
+</html>
\ No newline at end of file
diff --git a/admin/src/views/add-new-tests-modal/scripts-add-new-tests-modal.html b/admin/src/views/add-new-tests-modal/scripts-add-new-tests-modal.html
new file mode 100644
index 0000000..9a7be46
--- /dev/null
+++ b/admin/src/views/add-new-tests-modal/scripts-add-new-tests-modal.html
@@ -0,0 +1,191 @@
+<script>
+    
+    function hasClass(ele, cls) {
+        return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
+    }
+
+    function addClass(ele, cls) {
+        if (!hasClass(ele, cls)) ele.className += " " + cls;
+    }
+
+    function removeClass(ele, cls) {
+        if (hasClass(ele, cls)) {
+            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
+            ele.className = ele.className.replace(reg, ' ');
+        }
+    }
+
+    function DomController() {
+        this.testService = new TestService();
+        this.problemService = new ProblemService();
+        this.selectedIndex = -1;
+        const self = this;
+
+        init = async () => {
+            const tests = window.stringifiedData.tests;
+            document.getElementById("submitButton").addEventListener("click", submit);
+            initTestTable(tests);
+            const problems = await this.problemService.getProblems();
+            initDataList(problems);
+            this.formContainer = document.getElementById("formContainer");
+            this.tableContainer = document.getElementById("tableContainer");
+            this.loader = document.getElementById("loader");
+        }
+
+        initDataList = (problems) => {
+            const datalist = document.getElementById('problems')
+            problems.forEach(function(problem){
+                let option = document.createElement('option');
+                option.value = problem.title + ' - ' + problem.id;
+                datalist.appendChild(option);
+            });
+        } 
+
+        initTestTable = (tests) => {
+            tests.forEach(test => {
+                insertNewRow(test);
+            });
+        }
+
+        insertNewRow = (test) => {
+
+            const table = document.getElementById('testsTable').getElementsByTagName('tbody')[0];
+            let newRow = table.insertRow(-1);
+            let l = table.rows.length-1;
+
+            //Col2
+            table.rows[l].insertCell(0);
+            table.rows[l].cells[0].innerHTML = test.input;
+
+            //Col3
+            table.rows[l].insertCell(1);
+            table.rows[l].cells[1].innerHTML = test.output;
+
+            //Col4
+            table.rows[l].insertCell(2);
+            table.rows[l].cells[2].innerHTML = test.isPublic;
+        }
+
+        toggleLoader = (isShow) => {
+            if (isShow) {
+                addClass(this.formContainer, "hide");
+                addClass(this.tableContainer, "hide");
+                removeClass(this.loader, "hide");
+            }
+            else {
+                removeClass(this.formContainer, "hide");
+                removeClass(this.tableContainer, "hide");
+                addClass(this.loader, "hide");
+            }
+        }
+
+        submit = (e) => {
+            toggleLoader(true);
+            const tests = window.stringifiedData.tests;
+            const $problemChoice = document.getElementById('problemChoice');
+            const selectedValue = $problemChoice.value;
+            const titleIdPair = selectedValue.split(' - ');
+            const problemId = titleIdPair[1];
+
+            if(problemId) {
+                for(let test of tests) {
+                    
+                    test.id = problemId;
+                    this.testService.add(test);
+                }
+            }else {
+                alert("test id is req");
+                toggleLoader(false);
+            }
+            
+            
+        }
+
+        return {
+            init:init
+        }
+    }
+
+    function ProblemService() {
+        
+        const self = this;
+        getProblems =  () => {
+            let promise = new Promise((resolve, reject) => {
+                const url = "https://discovery-sfx-codex-service.moon.trendyol.com/problem";
+                const requestOptions = {
+                    method: "GET",
+                    credentials: 'include',
+                    headers: {
+                        "x-access-token": window.stringifiedData.token,
+                        "Content-Type": "application/json",
+                        "Access-Control-Allow-Origin": "*",
+                        "Access-Control-Allow-Credentials": "true",
+                        "Access-Control-Allow-Methods": "DELETE, POST, GET, OPTIONS",
+                        "Access-Control-Allow-Headers": "Content-Type, Authorization, X-Requested-With, cookie, cache-control, accept, authority",
+                    }
+                };
+    
+                fetch(url, requestOptions).
+                then(response => response.json()).
+                then(json => {
+                    resolve(json);
+                }).
+                catch(error => {
+                    reject(false);
+                })
+    
+            })
+            return promise;
+        }
+
+        return {
+            getProblems
+        }
+    }
+
+    function TestService() {
+
+        onSuccess = () => {
+            google.script.host.close();
+        }
+
+        add = (test) => {
+            const url = "https://discovery-sfx-codex-service.moon.trendyol.com/testcase"
+
+            const requestOptions = {
+                method: "POST",
+                body: JSON.stringify({
+                    problemId: test.id,
+                    stdin: btoa(test.input),
+                    expected_output: btoa(test.output),
+                    isPublic: test.isPublic
+                }),
+                credentials: 'include',
+                headers: {
+                    "x-access-token": window.stringifiedData.token,
+                    "Content-Type": "application/json",
+                    "Access-Control-Allow-Origin": "*",
+                    "Access-Control-Allow-Credentials": "true",
+                    "Access-Control-Allow-Methods": "DELETE, POST, GET, OPTIONS",
+                    "Access-Control-Allow-Headers": "Content-Type, Authorization, X-Requested-With, cookie, cache-control, accept, authority",
+                }
+            }
+
+            fetch(url, requestOptions).
+            then(response => response.json()).
+            then(json => {
+                google.script.run.withSuccessHandler(onSuccess).processAddTest(json);
+            }).
+            catch(error => {
+                console.log(error)
+            })
+        }
+
+        return {
+            add
+        }
+    }
+
+    const domController = new DomController();
+    domController.init();
+</script>
\ No newline at end of file
diff --git a/admin/src/views/add-new-tests-modal/styles-add-new-tests-modal.html b/admin/src/views/add-new-tests-modal/styles-add-new-tests-modal.html
new file mode 100644
index 0000000..24126d1
--- /dev/null
+++ b/admin/src/views/add-new-tests-modal/styles-add-new-tests-modal.html
@@ -0,0 +1,204 @@
+<style>
+    html {
+        font-size: 14px;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    }
+
+    .mt-20 {
+        margin-top: 20px !important;
+    }
+
+    div.form {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .form-group {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 1rem;
+    }
+
+    .form-group>label {
+        font-size: 14px;
+        margin-bottom: 0.5rem;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    }
+
+    .form-group>.text-field {
+        display: block;
+        height: 30px;
+        padding-left: 10px;
+        line-height: 1.5;
+        color: #495057;
+        background-color: #fff;
+        background-clip: padding-box;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    }
+
+    .form-group>.text-area-field {
+        display: block;
+        height: 70px;
+        padding-left: 10px;
+        line-height: 1.5;
+        color: #495057;
+        background-color: #fff;
+        background-clip: padding-box;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    }
+
+    .form-group>button {
+        color: #fff;
+        background-color: #007bff;
+        border-color: #007bff;
+        height: 30px;
+        display: inline-block;
+        font-weight: 400;
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: middle;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        border: 1px solid transparent;
+        line-height: 1.5;
+        border-radius: 0.25rem;
+        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    }
+
+    select#selectType {
+        display: block;
+        height: 30px;
+        padding-left: 10px;
+        line-height: 1.5;
+        color: #495057;
+        background-color: #fff;
+        background-clip: padding-box;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    }
+
+    .row {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        padding: 10px;
+    }
+
+    .hide {
+        display: none !important;
+    }
+
+    .col-12 {
+        width: 100%;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        padding: 20px;
+    }
+
+    .col-6 {
+        width: 50%;
+        padding: 10px;
+    }
+
+    .code-editor {
+        height: 500px !important;
+    }
+
+    .content-editor {
+        height: 300px !important;
+    }
+
+    select#difficulty {
+        height: 40px;
+    }
+
+    #editor {
+        display: block;
+        width: 100%;
+        height: 500px;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+    }
+
+    .lds-facebook {
+        display: inline-block;
+        position: relative;
+        width: 80px;
+        height: 80px;
+        margin-left: 45%;
+        margin-top: 100px;
+    }
+
+    .lds-facebook div {
+        display: inline-block;
+        position: absolute;
+        left: 8px;
+        width: 16px;
+        background: #007bff;
+        animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+    }
+
+    .lds-facebook div:nth-child(1) {
+        left: 8px;
+        animation-delay: -0.24s;
+    }
+
+    .lds-facebook div:nth-child(2) {
+        left: 32px;
+        animation-delay: -0.12s;
+    }
+
+    .lds-facebook div:nth-child(3) {
+        left: 56px;
+        animation-delay: 0;
+    }
+
+    @keyframes lds-facebook {
+        0% {
+            top: 8px;
+            height: 64px;
+        }
+
+        50%,
+        100% {
+            top: 24px;
+            height: 32px;
+        }
+    }
+
+    .ta-center {
+        text-align: center !important;
+    }
+
+    table#testsTable {
+        border-collapse: collapse;
+        display: block;
+        height: 200px;
+        overflow: auto;
+    }
+
+    th,
+    td {
+        border: solid 1px #777;
+        padding: 5px;
+        width: 50%;
+    }
+
+    thead {
+        background: #d1e7dd;
+        color: white;
+        position: sticky;
+        top: 0;
+    }
+
+    thead>tr {
+        border: 1px solid #000;
+    }
+</style>
\ No newline at end of file