diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..13566b8
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/.idea/GDB-UI.iml b/.idea/GDB-UI.iml
new file mode 100644
index 0000000..d6ebd48
--- /dev/null
+++ b/.idea/GDB-UI.iml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..03d9549
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
\ No newline at end of file
diff --git a/.idea/material_theme_project_new.xml b/.idea/material_theme_project_new.xml
new file mode 100644
index 0000000..e5691ca
--- /dev/null
+++ b/.idea/material_theme_project_new.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="MaterialThemeProjectNewConfig">
+    <option name="metadata">
+      <MTProjectMetadataState>
+        <option name="migrated" value="true" />
+        <option name="pristineConfig" value="false" />
+        <option name="userId" value="6f5380a0:191bd28aa0d:-7ffe" />
+      </MTProjectMetadataState>
+    </option>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000..62269df
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ExternalStorageConfigurationManager" enabled="true" />
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_11" default="true" project-jdk-name="11" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..c692ec5
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/GDB-UI.iml" filepath="$PROJECT_DIR$/.idea/GDB-UI.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/webapp/src/components/Breakpoint/Breakpoint.css b/webapp/src/components/Breakpoint/Breakpoint.css
index 0854cf5..2166783 100644
--- a/webapp/src/components/Breakpoint/Breakpoint.css
+++ b/webapp/src/components/Breakpoint/Breakpoint.css
@@ -3,8 +3,12 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
+  position: relative;
+  top: -100px;
 }
 .add-breakpoint {
+  position: absolute;
+  right:-400px;
   display: flex;
   padding: 6px 12px;
   align-items: flex-start;
@@ -13,6 +17,9 @@
 }
 
 .lower-breakpoint {
+  position: absolute; /* Make it independent of other components */
+  right: -460px; /* Adjust this value for desired placement */
+  top: 50px; /* Adjust this to control vertical positioning */
   display: flex;
   height: 177px;
   padding: 7px 10px;
@@ -20,9 +27,10 @@
   align-items: flex-start;
   gap: 9px;
   border: 1px solid var(--Gray-2, #4f4f4f);
-  /* background: #1e1e1e; */
+  margin-top: 0; /* Disable margin if using absolute positioning */
 }
 
+
 .line-breakpoint {
   display: flex;
   align-items: center;
@@ -38,3 +46,20 @@
   border-radius: 2px;
   background: var(--primary-orange, #e88f40);
 }
+
+
+/* Media Query for screens smaller than 768px */
+@media (max-width: 768px) {
+
+  .add-breakpoint {
+    position: static; /* Remove absolute positioning for natural stacking */
+    width: auto; /* Adjust width to content size */
+    align-self: center; /* Center the button in the layout */
+  }
+
+  .lower-breakpoint {
+    position: static; /* Remove absolute positioning for stacking */
+    width: auto; /* Adjust width to fit content */
+    align-self: center; /* Center the element in the layout */
+  }
+}
\ No newline at end of file
diff --git a/webapp/src/components/Breakpoint/Breakpoint.jsx b/webapp/src/components/Breakpoint/Breakpoint.jsx
index e556444..e30e907 100644
--- a/webapp/src/components/Breakpoint/Breakpoint.jsx
+++ b/webapp/src/components/Breakpoint/Breakpoint.jsx
@@ -56,7 +56,7 @@ const Breakpoint = () => {
             onChange={(e) => setBreakFunction(e.target.value)}
           />
         </div>
-        <button className="save-button" onClick={handleBreakSave}>
+        <button className="add-button" onClick={handleBreakSave}>
           Add
         </button>
       </div>
diff --git a/webapp/src/components/DebugHeader/DebugHeader.css b/webapp/src/components/DebugHeader/DebugHeader.css
index 9fc235f..8db6282 100644
--- a/webapp/src/components/DebugHeader/DebugHeader.css
+++ b/webapp/src/components/DebugHeader/DebugHeader.css
@@ -28,11 +28,15 @@ body {
 }
 .debug-header {
   display: flex;
-  width: 90vw;
   padding: 10px;
   justify-content: space-between;
   align-items: center;
-  background: var(--Gray-1, #333);
+  background: var(--Gray-1, #050505);
+  position: relative;
+  top: 15px;
+  width:100%;
+  margin-left: 0px;
+  margin-right: 10px;
 }
 [data-theme="light"] .debug-header {
   background-color: var(--component-light-background);
@@ -47,7 +51,9 @@ body {
   border-radius: 42px;
   background: var(--Gray-2, #4f4f4f);
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05) inset;
+  margin-left: -260px; /* Adjust the value as needed */
 }
+
 .filename-content {
   color: #fff;
   font-family: Montserrat;
@@ -90,10 +96,46 @@ body {
 
 .save-button {
   display: flex;
-  padding: 4px 8px;
+  padding: 10px 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 2px;
+  background: var(--primary-orange, #e88f40);
+  margin-left: -102px;
+  border: 2px solid #e88f40;
+
+}
+
+.add-button {
+  display: flex;
+  padding: 10px 20px;
   justify-content: center;
   align-items: center;
   gap: 10px;
   border-radius: 2px;
   background: var(--primary-orange, #e88f40);
+  margin-left: -102px;
+  border: -10px solid #e88f40;
+  position: relative;
+  right: -100px;
 }
+
+@media (max-width: 480px) {
+  .debug-header {
+    padding: 5px;
+  }
+
+  .filename {
+    padding: 4px 10px;
+  }
+
+  .icons, .arrows, .others {
+    flex-direction: column;
+    gap: 5px;
+  }
+
+  .save-button, .add-button {
+    padding: 5px 10px;
+  }
+}
\ No newline at end of file
diff --git a/webapp/src/components/Footer/Footer.css b/webapp/src/components/Footer/Footer.css
index f0169f0..525e75b 100644
--- a/webapp/src/components/Footer/Footer.css
+++ b/webapp/src/components/Footer/Footer.css
@@ -2,7 +2,10 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-top: 30px;
+  margin-top: 200px;
+  margin-right: -7px;
+  margin-left: -7px;
+  margin-bottom: -7px;
   background-color: var(--footer-background-color);
   color: var(--footer-color); /* If you want to set text color */
 }
diff --git a/webapp/src/components/Functions/Functions.css b/webapp/src/components/Functions/Functions.css
index 89146f6..3860cc2 100644
--- a/webapp/src/components/Functions/Functions.css
+++ b/webapp/src/components/Functions/Functions.css
@@ -1,28 +1,30 @@
 .functions-parent {
   display: flex;
-  height: 100vh;
-  padding: 10px;
+  height: 80vh;
+  padding: 0px;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   border: 1px solid var(--Gray-2, #4f4f4f);
-
+  margin-right: 60px;
+  transform: scale(0.9);
   /* background: #1e1e1e; */
 }
 .functions-heading {
   display: flex;
-  width: 302px;
+  width: 189px;
   padding: 6px 12px;
   justify-content: center;
   align-items: center;
   gap: 10px;
   background: var(--primary-orange, #e88f40);
+  margin-top: 10px;
 }
 .functions {
   /* width: 100%; */
   display: flex;
   padding: 10px;
-  height: 87vh;
+  height: 60vh;
   max-width: 20vw;
   flex-direction: column;
   align-items: flex-start;
diff --git a/webapp/src/components/FunctionsBottom/FunctionsBottom.css b/webapp/src/components/FunctionsBottom/FunctionsBottom.css
index 5d91c73..3bedef4 100644
--- a/webapp/src/components/FunctionsBottom/FunctionsBottom.css
+++ b/webapp/src/components/FunctionsBottom/FunctionsBottom.css
@@ -4,6 +4,8 @@
   gap: 10px;
   border: 1px solid var(--Gray-2, #4f4f4f);
   padding: 10px 10px 10px 10px;
+  transform: scale(0.8) translate(-37px, -50px);
+ /* Move 50px left and 20px up */
 }
 .function-bottom-heading {
   display: flex;
diff --git a/webapp/src/components/GdbComponents/GdbComponents.css b/webapp/src/components/GdbComponents/GdbComponents.css
index 3cdb238..99f3ffa 100644
--- a/webapp/src/components/GdbComponents/GdbComponents.css
+++ b/webapp/src/components/GdbComponents/GdbComponents.css
@@ -4,6 +4,10 @@
   align-items: flex-start;
   gap: 10px;
   width: 42vw;
+  margin-bottom: -100px;
+  position: relative;
+  top: -90px;
+
 }
 
 .gdb-header {
@@ -32,3 +36,12 @@
   font-weight: bold;
   background: var(--primary-orange, #e88f40);
 }
+
+@media (max-width: 768px) {
+  .gdb-components {
+    flex-direction: column; /* Stack items vertically */
+    align-items: center; /* Center items for small screens */
+    gap: 20px; /* Add spacing between elements */
+    width: auto; /* Adjust width to fit smaller screens */
+  }
+}
diff --git a/webapp/src/components/Stack/Stack.css b/webapp/src/components/Stack/Stack.css
index e3b6956..cab75f2 100644
--- a/webapp/src/components/Stack/Stack.css
+++ b/webapp/src/components/Stack/Stack.css
@@ -1,13 +1,14 @@
 .stack-parent {
   display: flex;
-  height: 90vh;
-  width: 210px;
-  padding: 10px;
+  height: 80vh;
+  padding: 0px;
   flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 12px;
+  align-items: center;
+  gap: 10px;
   border: 1px solid #4f4f4f;
+  margin-right: 40px;
+  transform: scale(0.9);
+
   /* background: #1e1e1e; */
 }
 
@@ -24,12 +25,12 @@
 .stack {
   display: flex;
   width: 189px;
-  height: 100%;
-  padding: 10px;
+  height: 60vh;
+  padding: 10px 10px 10px 10px;
   flex-direction: column;
   align-items: flex-start;
   gap: 11px;
   border: 1px solid var(--Gray-2, #4f4f4f);
-
   overflow-y: scroll;
+
 }
diff --git a/webapp/src/components/StackBottom/StackBottom.css b/webapp/src/components/StackBottom/StackBottom.css
index f985677..83af2a3 100644
--- a/webapp/src/components/StackBottom/StackBottom.css
+++ b/webapp/src/components/StackBottom/StackBottom.css
@@ -1,18 +1,20 @@
 .stackbottom-container {
   display: flex;
-  width: 190px;
-  height: 159px;
+  width: 321px;
+  height: 84px;
   padding: 15px 20px;
   flex-direction: column;
-  align-items: flex-start;
   gap: 10px;
   border: 1px solid var(--Gray-2, #4f4f4f);
+  transform: scale(0.8) translate(-30px, -50px);
+  align-items: center;
   /* background: #1e1e1e; */
 }
 .stackbottom-maincomponent {
   overflow-x: scroll;
   width: 190px;
   height: 139px;
+
 }
 .stackbottom-heading {
   display: flex;
diff --git a/webapp/src/components/Terminal/Terminal.css b/webapp/src/components/Terminal/Terminal.css
index 112435f..228a6f5 100644
--- a/webapp/src/components/Terminal/Terminal.css
+++ b/webapp/src/components/Terminal/Terminal.css
@@ -1,8 +1,8 @@
 .terminal {
   width: 55vw;
-  height: 234px;
+  height: 305px;
   flex-shrink: 0;
-  padding-left: 30px;
-  padding-right: 30px;
-  padding-bottom: 50px;
+  padding-left: 0px;
+  padding-right: 00px;
+  padding-bottom: 00px;
 }
diff --git a/webapp/src/index.css b/webapp/src/index.css
index b2f40de..8b20756 100644
--- a/webapp/src/index.css
+++ b/webapp/src/index.css
@@ -9,7 +9,7 @@
   --text-rendering: optimizeLegibility;
   --webkit-font-smoothing: antialiased;
   --moz-osx-font-smoothing: grayscale;
-  --padding: 0 20px;
+  --padding: 0 0px;
   --footer-background-color: rgb(2, 12, 22);
   --footer-light-background: #ffffff;
   --footer-light-color: rgba(0, 0, 0, 0.87);
@@ -40,4 +40,7 @@ body {
   -webkit-font-smoothing: var(--webkit-font-smoothing);
   -moz-osx-font-smoothing: var(--moz-osx-font-smoothing);
   padding: var(--padding);
+  overflow-x: hidden !important;
+  height: 100%; /* Ensure the body takes up the full height of the viewport */
+  margin: 0 0 0 10px;
 }
diff --git a/webapp/src/pages/Debug/Debug.css b/webapp/src/pages/Debug/Debug.css
index a2dd7df..640c830 100644
--- a/webapp/src/pages/Debug/Debug.css
+++ b/webapp/src/pages/Debug/Debug.css
@@ -32,18 +32,22 @@ body {
   align-items: center;
   gap: 25px;
   width: 100%;
+  margin-left: -60px;
   /* background: var(--Gray-1, #333); */
 }
 .upper-part {
   display: flex;
-  padding: 20px;
+  padding: 10px 0px 0px 0px; /* Remove the extra bottom padding */
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 20px;
   background-color: var(--component-background-color);
+  border: 1px solid var(--Gray-2, #4f4f4f);
+  margin-top: 30px;
 }
 
+
 [data-theme="light"] .upper-part {
   background-color: var(--component-light-background);
   color: var(--component-light-color);
@@ -52,13 +56,15 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  gap: 15px;
+  gap: 0px;
+  position: relative; /* Ensure positioning context */
+  transform: translate(-80px, 100px); /* Move right by 110px and down by 70px */
 }
 .right-part {
   display: flex;
 
   flex-direction: column;
-  gap: 10px;
+  gap: 0px;
 }
 .left-part {
   display: flex;