diff --git a/client/app/components/Pages/OnlineJudge/AddQuestion.js b/client/app/components/Pages/OnlineJudge/AddQuestion.js
new file mode 100644
index 0000000..f7caa34
--- /dev/null
+++ b/client/app/components/Pages/OnlineJudge/AddQuestion.js
@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+
+class AddQuestion extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        };
+    }
+    render() {
+        const styles = {
+            page: {
+                width: "90%",
+                background: "#E4ECF4",
+                marginLeft: "5%",
+                borderRadius: "10px",
+                marginTop:"20px",
+                marginBottom:"40px"
+            },
+            form: {
+                padding: "30px",
+            },
+            submitBtn:{
+                width:"20%",
+                marginLeft:"40%"
+            },
+            cancelBtn: {
+                width: "20%",
+                marginLeft: "40%",
+                marginTop:"20px"
+            }
+        }
+
+        return (
+            <div style={styles.page}>
+                <div style={styles.form}>
+                    <div class="input-group mb-3">
+                        <div class="input-group-prepend">
+                            <span class="input-group-text">Problem Title</span>
+                        </div>
+                        <input type="text" class="form-control" aria-label="Problem Title" aria-describedby="basic-addon2" />
+                    </div>
+                    <div class="input-group mb-3">
+                        <div class="input-group">
+                            <div class="input-group-prepend">
+                                <span class="input-group-text">Problem Description</span>
+                            </div>
+                            <textarea class="form-control" aria-label="Problem Description"></textarea>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <div class="input-group">
+                            <div class="input-group-prepend">
+                                <span class="input-group-text">Input Format</span>
+                            </div>
+                            <textarea class="form-control" aria-label="Problem Description"></textarea>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <div class="input-group">
+                            <div class="input-group-prepend">
+                                <span class="input-group-text">Output Format</span>
+                            </div>
+                            <textarea class="form-control" aria-label="Problem Description"></textarea>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <div class="input-group">
+                            <div class="input-group-prepend">
+                                <span class="input-group-text">Constraints</span>
+                            </div>
+                            <textarea class="form-control" aria-label="Problem Description"></textarea>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <div class="input-group">
+                            <div class="input-group-prepend">
+                                <span class="input-group-text">Sample Input</span>
+                            </div>
+                            <textarea class="form-control" aria-label="Problem Description"></textarea>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <div class="input-group">
+                            <div class="input-group-prepend">
+                                <span class="input-group-text">Sample Explaination</span>
+                            </div>
+                            <textarea class="form-control" aria-label="Problem Description"></textarea>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <div class="custom-file">
+                            <input type="file" class="custom-file-input" id="inputGroupFile02" />
+                            <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose test cases file</label>
+                        </div>
+                        <div class="input-group-append">
+                            <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
+                        </div>
+                    </div>
+                    <button type="button" class="btn btn-success" style={styles.submitBtn}>Submit</button>
+                    <button type="button" class="btn btn-danger" onClick={() => this.props.page("Home")} style={styles.cancelBtn}>Cancel</button>
+                </div>
+            </div>
+        );
+    }
+}
+export default AddQuestion;
diff --git a/client/app/components/Pages/OnlineJudge/OnlineJudge.js b/client/app/components/Pages/OnlineJudge/OnlineJudge.js
new file mode 100644
index 0000000..541c630
--- /dev/null
+++ b/client/app/components/Pages/OnlineJudge/OnlineJudge.js
@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+import ReactLoading from '../../common/Loading';
+import QuestionBlock from './QuestionBlock';
+import AddQuestion from './AddQuestion';
+import 'react-table/react-table.css';
+
+
+class OnlineJudge extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            page: "AddQuestion",
+            questions:{}
+        };
+    }
+    
+    render() {
+        const changePage = (page) => {
+            if (page === "Home") {
+                this.setState({ page: "AddQuestion" });
+            }
+        }
+        const style = {
+            QuestionBlock: {
+                marginTop: "40px",
+            }
+        }
+        if (this.state.page === "AddQuestion") {
+            return (
+                <div className="jumbotron pt-3 pb-4 bg-light">
+                    <button type="button" className="btn btn-primary" id="addQuestion" onClick={() => {this.setState({ page: "" })}}>Add Question</button>
+                    {/* <div className = "" */}
+                    <div style={style.QuestionBlock}>
+                        <QuestionBlock title="Question Title" desc="Some description about the Q" />
+                        <QuestionBlock title="Question Title" desc="Some description about the Q" />
+                        <QuestionBlock title="Question Title" desc="Some description about the Q" />
+                    </div>
+                </div>
+            );
+        }
+        else{
+            return(
+                <div>
+                    <AddQuestion page={changePage}/>
+                </div>
+            );
+        }
+    }
+}
+export default OnlineJudge;
diff --git a/client/app/components/Pages/OnlineJudge/QuestionBlock.js b/client/app/components/Pages/OnlineJudge/QuestionBlock.js
new file mode 100644
index 0000000..d21f304
--- /dev/null
+++ b/client/app/components/Pages/OnlineJudge/QuestionBlock.js
@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+
+import axios from 'axios';
+
+class Contests extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        };
+    }
+    render() {
+        const styles = {
+            questionContainer : {
+                background: "#D4F4E4",
+                width: "40%",
+                scroll:"auto",
+                paddingTop: "20px",
+                paddingBottom: "20px",
+                paddingLeft:"10px",
+                margin: "10px",
+                borderRadius:"3px",
+            },
+            question:{
+                fontSize:"1.2rem",
+            },
+            desc: {
+                fontSize: "0.7rem",
+            },
+        }
+
+        return (
+            <div style={styles.questionContainer}>
+                <p style={styles.question}>{this.props.title}</p>
+                {/* <p style={styles.desc}>{this.props.desc}</p> */}
+            </div>
+        );
+    }
+}
+export default Contests;
diff --git a/client/app/index.js b/client/app/index.js
index e7e1fb5..7fc1d2b 100644
--- a/client/app/index.js
+++ b/client/app/index.js
@@ -19,6 +19,7 @@ import PublicProfile from '../app/components/Pages/Profile/PublicProfile';
 import Assignments from '../app/components/Pages/Assignments';
 import Contests from '../app/components/Pages/Contests';
 import Courses from '../app/components/Pages/Courses';
+import OnlineJudge from '../app/components/Pages/OnlineJudge/OnlineJudge';
 import NotFound from './components/App/NotFound';
 import SignupForm from '../app/components/Admin/SignupForm';
 import AssignmentAdd from '../app/components/Pages/Courses/AddAssignment'
@@ -31,6 +32,7 @@ import zipFiles from './components/Pages/Assignments/zipFiles';
 import updateHandle from './components/Pages/Profile/UpdateHandle';
 import contribute from './components/Pages/Contribute';
 import ReactLoading from './components/common/Loading'
+
 // import 'bootstrap/dist/css/bootstrap.min.css';
 
 
@@ -73,6 +75,8 @@ render((
 
               <PrivateRoute exact path="/updateHandle" component={updateHandle} />
 
+              <PrivateRoute exact path="/onlinejudge" component={OnlineJudge} />
+
               <Route exact path="/contribute" component={contribute} />
 
               <Route exact path="/forgotpassword" component={ForgotPassword} />