diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..54c9f12
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+venv 
diff --git a/MyProject/__pycache__/__init__.cpython-38.pyc b/MyProject/__pycache__/__init__.cpython-38.pyc
index 29ffd78..3dc8661 100644
Binary files a/MyProject/__pycache__/__init__.cpython-38.pyc and b/MyProject/__pycache__/__init__.cpython-38.pyc differ
diff --git a/MyProject/__pycache__/settings.cpython-38.pyc b/MyProject/__pycache__/settings.cpython-38.pyc
index b68431a..1b58399 100644
Binary files a/MyProject/__pycache__/settings.cpython-38.pyc and b/MyProject/__pycache__/settings.cpython-38.pyc differ
diff --git a/MyProject/__pycache__/urls.cpython-38.pyc b/MyProject/__pycache__/urls.cpython-38.pyc
index c051dbc..a27bd87 100644
Binary files a/MyProject/__pycache__/urls.cpython-38.pyc and b/MyProject/__pycache__/urls.cpython-38.pyc differ
diff --git a/MyProject/__pycache__/wsgi.cpython-38.pyc b/MyProject/__pycache__/wsgi.cpython-38.pyc
index a444272..cdac6e4 100644
Binary files a/MyProject/__pycache__/wsgi.cpython-38.pyc and b/MyProject/__pycache__/wsgi.cpython-38.pyc differ
diff --git a/base/__pycache__/__init__.cpython-38.pyc b/base/__pycache__/__init__.cpython-38.pyc
index be0914d..f41308b 100644
Binary files a/base/__pycache__/__init__.cpython-38.pyc and b/base/__pycache__/__init__.cpython-38.pyc differ
diff --git a/base/__pycache__/admin.cpython-38.pyc b/base/__pycache__/admin.cpython-38.pyc
index 09d0d9a..40cfdfb 100644
Binary files a/base/__pycache__/admin.cpython-38.pyc and b/base/__pycache__/admin.cpython-38.pyc differ
diff --git a/base/__pycache__/apps.cpython-38.pyc b/base/__pycache__/apps.cpython-38.pyc
index a1911c7..4ac9619 100644
Binary files a/base/__pycache__/apps.cpython-38.pyc and b/base/__pycache__/apps.cpython-38.pyc differ
diff --git a/base/__pycache__/models.cpython-38.pyc b/base/__pycache__/models.cpython-38.pyc
index 7704c7b..73d490f 100644
Binary files a/base/__pycache__/models.cpython-38.pyc and b/base/__pycache__/models.cpython-38.pyc differ
diff --git a/base/__pycache__/urls.cpython-38.pyc b/base/__pycache__/urls.cpython-38.pyc
index 511c28b..f8e37d4 100644
Binary files a/base/__pycache__/urls.cpython-38.pyc and b/base/__pycache__/urls.cpython-38.pyc differ
diff --git a/base/__pycache__/utils.cpython-38.pyc b/base/__pycache__/utils.cpython-38.pyc
index a3e8359..be31d4b 100644
Binary files a/base/__pycache__/utils.cpython-38.pyc and b/base/__pycache__/utils.cpython-38.pyc differ
diff --git a/base/__pycache__/views.cpython-38.pyc b/base/__pycache__/views.cpython-38.pyc
index 56e9ae0..8d15dde 100644
Binary files a/base/__pycache__/views.cpython-38.pyc and b/base/__pycache__/views.cpython-38.pyc differ
diff --git a/base/migrations/__pycache__/__init__.cpython-38.pyc b/base/migrations/__pycache__/__init__.cpython-38.pyc
index 4605096..a50d1d2 100644
Binary files a/base/migrations/__pycache__/__init__.cpython-38.pyc and b/base/migrations/__pycache__/__init__.cpython-38.pyc differ
diff --git a/base/templates/base/index.html b/base/templates/base/index.html
index 9e2aaf2..87a0f30 100644
--- a/base/templates/base/index.html
+++ b/base/templates/base/index.html
@@ -82,6 +82,36 @@
             box-sizing: border-box;
         }
 
+        .linenumbers_input {
+            display: inline-block;
+            user-select: none;
+            pointer-events: none;
+            color: #888;
+            width: 40px;
+            padding-right: 10px;
+            text-align: right;
+            position: absolute;
+            left: 292px;
+            top: 974px;
+            bottom: 10px;
+            box-sizing: border-box;
+        }
+
+        .linenumbers_output {
+            display: inline-block;
+            user-select: none;
+            pointer-events: none;
+            color: #888;
+            width: 40px;
+            padding-right: 10px;
+            text-align: right;
+            position: absolute;
+            left: 1090px;
+            top: 974px;
+            bottom: 10px;
+            box-sizing: border-box;
+        }
+
         footer {
             background-color: #333;
             color: #fff;
@@ -180,13 +210,17 @@ <h1>Code Visualizer</h1>
                     </div>
                 </div>
                 <div class="button-container">
-                    <button id = "executebtn" name="execute" class="addMore" title="Execute your python code!" type="submit">Execute</button>
-                    <button id = "debugbtn" name="debug" class="addMore" title="Visualize runtime flow of your python code!" type="submit">Visualize</button>
+                    <button id="executebtn" name="execute" class="addMore" title="Execute your python code!"
+                        type="submit">Execute</button>
+                    <button id="debugbtn" name="debug" class="addMore"
+                        title="Visualize runtime flow of your python code!" type="submit">Visualize</button>
                 </div>
             </div>
         </div>
 
+        <div class="linenumbers_input"></div>
         <textarea name="input" id="input" class="short_textarea" placeholder="Input Field">{{ input }}</textarea>
+        <div class="linenumbers_output"></div>
         <textarea name="output" id="output" class="short_textarea" placeholder="Output Field">{{ output }}</textarea>
     </form>
     <div style="height: 250px;"></div>
@@ -194,9 +228,9 @@ <h1>Code Visualizer</h1>
         <p>Copyright &copy; 2023</p>
     </footer>
     <script>
+        // For Editor
         const editor = document.getElementById('editor');
         const lineNumberContainer = document.querySelector('.linenumbers');
-
         function updateLineNumbers() {
             const lines = editor.value.split('\n');
             const lineNumberHTML = [];
@@ -205,28 +239,62 @@ <h1>Code Visualizer</h1>
             }
             lineNumberContainer.innerHTML = lineNumberHTML.join('');
         }
-        const deb_button = document.getElementById('debugbtn');
-        const exec_button = document.getElementById('executebtn');
-        
-       
+        editor.addEventListener('input', updateLineNumbers);
+        updateLineNumbers();
+        editor.addEventListener("keyup", e => {
+            editor.style.height = "63px";
+            let scHeight = e.target.scrollHeight;
+            editor.style.height = `${scHeight}px`;
+        });
 
+        // For Input
+        const input = document.getElementById('input');
+        const lineNumbersInput = document.querySelector('.linenumbers_input');
+        function updateLineNumbersInput() {
+            const lines = input.value.split('\n');
+            const lineNumberHTML = [];
+            for (let i = 1; i <= lines.length; i++) {
+                lineNumberHTML.push('<div class="line">' + i + '</div>');
+            }
+            lineNumbersInput.innerHTML = lineNumberHTML.join('');
+        }
+        input.addEventListener('input', updateLineNumbersInput);
+        updateLineNumbersInput();
+        input.addEventListener("keyup", e => {
+            input.style.height = "63px";
+            let scHeight = e.target.scrollHeight;
+            input.style.height = `${scHeight}px`;
+        });
 
-        exec_button.addEventListener("click", function() {
-            exec_button.innerText = "Executing...."; 
+        // For Output
+        const output = document.getElementById('output');
+        const lineNumbersOutput = document.querySelector('.linenumbers_output');
+        function updateLineNumbersOutput() {
+            const lines = output.value.split('\n');
+            const lineNumberHTML = [];
+            for (let i = 1; i <= lines.length; i++) {
+                lineNumberHTML.push('<div class="line">' + i + '</div>');
+            }
+            lineNumbersOutput.innerHTML = lineNumberHTML.join('');
+        }
+        output.addEventListener('input', updateLineNumbersOutput);
+        updateLineNumbersOutput();
+        output.addEventListener("keyup", e => {
+            output.style.height = "63px";
+            let scHeight = e.target.scrollHeight;
+            output.style.height = `${scHeight}px`;
         });
 
-        editor.addEventListener('input', updateLineNumbers);
 
-        // Call the updateLineNumbers function once when the page loads
-        updateLineNumbers();
+        const deb_button = document.getElementById('debugbtn');
+        const exec_button = document.getElementById('executebtn');
 
-        const textarea = document.getElementById("editor");
-        textarea.addEventListener("keyup", e => {
-            textarea.style.height = "63px";
-            let scHeight = e.target.scrollHeight;
-            textarea.style.height = `${scHeight}px`;
+
+        exec_button.addEventListener("click", function () {
+            exec_button.innerText = "Executing....";
         });
 
+
         let arrow = document.querySelector(".arrow");
         let topPos = 105; // initial top position
         let interval = setInterval(moveArrowDown, 2000); // call moveArrowDown every second
@@ -244,19 +312,19 @@ <h1>Code Visualizer</h1>
                 console.log(outputs);
                 topPos = 96 + 9 * line_order[c]; // move the arrow down by 5 pixels
                 arrow.style.top = `${topPos}%`; // update the top position of the arrow
-                if (outputs[c] != "")
-                    debug_textarea.value +=( outputs[c] + "\n");
+                if (outputs[c] != "") {
+                    debug_textarea.value += (outputs[c] + "\n");
+                    updateLineNumbersOutput();
+                }
                 c += 1;
             }
-            else{
+            else {
                 deb_button.innerText = "Visualize";
-                
-            }
-
 
+            }
         }
 
     </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/file.txt b/file.txt
index f0d30ed..e06251d 100644
--- a/file.txt
+++ b/file.txt
@@ -1 +1,7 @@
-output is  5
+5
+0
+1
+2
+0
+1
+2
diff --git a/test.py b/test.py
index d729ee9..afedcc3 100644
--- a/test.py
+++ b/test.py
@@ -21,4 +21,4 @@ def input():
         x = 1
     else:
         x = 2
-    print(x)
+    print(x)
\ No newline at end of file