diff --git a/web-app/src/App.css b/web-app/src/App.css
index cee0f1f..6dfc707 100644
--- a/web-app/src/App.css
+++ b/web-app/src/App.css
@@ -2,7 +2,7 @@
     font-family: 'Ubuntu', sans-serif;
     margin: 0;
     padding: 0;
-    --main-bg-color: rgb(32, 0, 66);
+    --main-bg-color: rgb(32, 0, 68);
     --content-box-bg-color: rgb(20, 1, 39);
     --subdropdown-box-bg-color: rgb(32, 0, 58);
     --trigger-btn-dropdown-hover: rgba(72, 48, 177, 0.575);
@@ -184,11 +184,6 @@ li {
     align-items: center;
 }
 
-#editorwrapper {
-    display: flex;
-    justify-content: space-between;
-}
-
 .tabswrapper {
     width: auto;
     height: 7vh;
@@ -260,10 +255,13 @@ li {
     background-color: var(--main-bg-color);
 }
 
+.fa-chevron-right{
+    transform: translateX(8px);
+}
 
 .expandable:hover .fa-chevron-right {
-    transform: translateX(10px);
-    transition: ease-in-out .5s;
+    transform: translateX(13px);
+    transition: ease-in-out 0.3s;
 }
 
 .sidebarscontent{
@@ -274,4 +272,4 @@ li {
     color: white;
     border-top-left-radius: 6px;
     border-bottom-left-radius: 6px;
-}
+}
\ No newline at end of file
diff --git a/web-app/src/App.jsx b/web-app/src/App.jsx
index 964a11d..a5da09e 100644
--- a/web-app/src/App.jsx
+++ b/web-app/src/App.jsx
@@ -9,21 +9,256 @@ import Tabs from "./components/Tabs/Tabs.jsx";
 import Search from "./components/SideBar/Main Components/Search/Search.jsx";
 import Extensions from "./components/SideBar/Main Components/Extensions/Extensions.jsx";
 import FilePioneer from "./components/SideBar/Main Components/filePioneer/filePioneer.jsx";
-
+import GitHub from "./components/SideBar/Main Components/GItHub/GitHub.jsx";
+import Terminal from "./components/SideBar/Main Components/Terminal/Terminal.jsx";
+import Debug from "./components/SideBar/Main Components/Debug/Debug.jsx";
+import CodeBlocks from "./components/SideBar/Main Components/Code Blocks/CodeBlocks.jsx";
+import Git from "./components/SideBar/Main Components/Git/Git.jsx";
 
 function App() {
-  let [ariaExpandedisplay, changeariaExpandedisplay] = useState('none');
-  const toggleAriaExpanded = () => {
+  let [ariaExpandedisplayfilepioneer, changeariaExpandedisplayfilepioneer] = useState('none');
+  let [ariaExpandedisplaysearch, changeariaExpandedisplaysearch] = useState('none');
+  let [ariaExpandedisplaycodeblocks, changeariaExpandedisplaycodeblocks] = useState('none');
+  let [ariaExpandedisplaydebug, changeariaExpandedisplaydebug] = useState('none');
+  let [ariaExpandedisplayextensions, changeariaExpandedisplayextensions] = useState('none');
+  let [ariaExpandedisplaygit, changeariaExpandedisplaygit] = useState('none');
+  let [ariaExpandedisplaygithub, changeariaExpandedisplaygithub] = useState('none');
+  let [ariaExpandedisplayterminal, changeariaExpandedisplayterminal] = useState('none');
+  const toggleAriaExpandedfilepioneer = () => {
     console.log("clicked");
-    if (ariaExpandedisplay === "none") {
+    if (ariaExpandedisplayfilepioneer === "none") {
       // console.log("toggled")
-      changeariaExpandedisplay("flex");
+      changeariaExpandedisplayfilepioneer("flex");
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
       seteditorwrapperStyle({
         width: '72vw',
       })
-
-    } else {
-      changeariaExpandedisplay("none");
+    }
+    else {
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '92vw',
+      })
+    }
+  };
+  const toggleAriaExpandedsearch = () => {
+    console.log("clicked");
+    if (ariaExpandedisplaysearch === "none") {
+      // console.log("toggled")
+      changeariaExpandedisplaysearch("flex");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '72vw',
+      })
+    }
+    else {
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '92vw',
+      })
+    }
+  };
+  const toggleAriaExpandedcodeblocks = () => {
+    console.log("clicked");
+    if (ariaExpandedisplaycodeblocks === "none") {
+      // console.log("toggled")
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("flex");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '72vw',
+      })
+    }
+    else {
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '92vw',
+      })
+    }
+  };
+  const toggleAriaExpandedgithub = () => {
+    console.log("clicked");
+    if (ariaExpandedisplaygithub === "none") {
+      // console.log("toggled")
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("flex");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '72vw',
+      })
+    }
+    else {
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '92vw',
+      })
+    }
+  };
+  const toggleAriaExpandedgit = () => {
+    console.log("clicked");
+    if (ariaExpandedisplaygit === "none") {
+      // console.log("toggled")
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("flex");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '72vw',
+      })
+    }
+    else {
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '92vw',
+      })
+    }
+  };
+  const toggleAriaExpandedebug = () => {
+    console.log("clicked");
+    if (ariaExpandedisplaydebug === "none") {
+      // console.log("toggled")
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("flex");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '72vw',
+      })
+    }
+    else {
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '92vw',
+      })
+    }
+  };
+  const toggleAriaExpandedterminal = () => {
+    console.log("clicked");
+    if (ariaExpandedisplayterminal === "none") {
+      // console.log("toggled")
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("flex");
+      seteditorwrapperStyle({
+        width: '72vw',
+      })
+    }
+    else {
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '92vw',
+      })
+    }
+  };
+  const toggleAriaExpandedextensions = () => {
+    console.log("clicked");
+    if (ariaExpandedisplayextensions === "none") {
+      // console.log("toggled")
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("flex");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
+      seteditorwrapperStyle({
+        width: '72vw',
+      })
+    }
+    else {
+      changeariaExpandedisplaysearch("none");
+      changeariaExpandedisplayfilepioneer("none");
+      changeariaExpandedisplaycodeblocks("none");
+      changeariaExpandedisplaydebug("none");
+      changeariaExpandedisplayextensions("none");
+      changeariaExpandedisplaygit("none");
+      changeariaExpandedisplaygithub("none");
+      changeariaExpandedisplayterminal("none");
       seteditorwrapperStyle({
         width: '92vw',
       })
@@ -31,7 +266,8 @@ function App() {
   };
   const [editorwrapperStyle, seteditorwrapperStyle] = useState({
     width: '92vw',
-    height: '83vh'
+    height: '83vh',
+    display: 'flex'
   })
   return (
     <>
@@ -45,11 +281,16 @@ function App() {
           </div>
         </div>
         <div className="SideBarmainwrper">
-          <div className="SideBarmainwrper" ariaExpanded={ariaExpandedisplay}>
-            <Extensions />
-            <Search />
-            <FilePioneer />
-            <SideBar toggleAriaExpanded={toggleAriaExpanded} />
+          <div className="SideBarmainwrper">
+            <CodeBlocks ariaExpandedisplaycodeblocks={ariaExpandedisplaycodeblocks}/>
+            <Terminal ariaExpandedisplayterminal={ariaExpandedisplayterminal}/>
+            <Git ariaExpandedisplaygit={ariaExpandedisplaygit}/>
+            <Extensions ariaExpandedisplayextensions={ariaExpandedisplayextensions}/>
+            <GitHub ariaExpandedisplaygithub={ariaExpandedisplaygithub}/>
+            <Debug ariaExpandedisplaydebug={ariaExpandedisplaydebug}/>
+            <Search ariaExpandedisplaysearch={ariaExpandedisplaysearch} />
+            <FilePioneer ariaExpandedisplayfilepioneer={ariaExpandedisplayfilepioneer}/>
+            <SideBar toggleAriaExpandedfilepioneer={toggleAriaExpandedfilepioneer} toggleAriaExpandedsearch={toggleAriaExpandedsearch} toggleAriaExpandedextensions={toggleAriaExpandedextensions} toggleAriaExpandedterminal={toggleAriaExpandedterminal} toggleAriaExpandedebug={toggleAriaExpandedebug} toggleAriaExpandedgit={toggleAriaExpandedgit} toggleAriaExpandedgithub={toggleAriaExpandedgithub} toggleAriaExpandedcodeblocks={toggleAriaExpandedcodeblocks} />
           </div>
         </div>
       </div>
@@ -58,4 +299,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/web-app/src/components/MenuBar/MenuBar.jsx b/web-app/src/components/MenuBar/MenuBar.jsx
index db0be19..f044fb0 100644
--- a/web-app/src/components/MenuBar/MenuBar.jsx
+++ b/web-app/src/components/MenuBar/MenuBar.jsx
@@ -43,7 +43,7 @@ function MenuBar(props) {
                       <ul>
                         <li>
                           Recent
-                          <FontAwesomeIcon icon="fa-solid fa-chevron-right" />
+                          <i className="fa-solid fa-chevron-right"></i>
                         </li>
                       </ul>
                     </div>
diff --git a/web-app/src/components/SideBar/Main Components/Code Blocks/CodeBlocks.jsx b/web-app/src/components/SideBar/Main Components/Code Blocks/CodeBlocks.jsx
index 4d6628c..f72f05c 100644
--- a/web-app/src/components/SideBar/Main Components/Code Blocks/CodeBlocks.jsx	
+++ b/web-app/src/components/SideBar/Main Components/Code Blocks/CodeBlocks.jsx	
@@ -1,9 +1,9 @@
 import React from 'react'
 
-const CodeBlocks = () => {
+const CodeBlocks = (props) => {
   return (
-    <div id="codeblocks" className='sidebarscontent'>
-      <h6>CodeBlocks</h6>
+    <div id="codeblocksarea" className={`sidebarscontent d-${props.ariaExpandedisplaycodeblocks}`}>
+      <h6>Code Blocks</h6>
     </div>
   )
 }
diff --git a/web-app/src/components/SideBar/Main Components/Debug/Debug.jsx b/web-app/src/components/SideBar/Main Components/Debug/Debug.jsx
index 6bd5ae9..248b8df 100644
--- a/web-app/src/components/SideBar/Main Components/Debug/Debug.jsx	
+++ b/web-app/src/components/SideBar/Main Components/Debug/Debug.jsx	
@@ -1,8 +1,8 @@
 import React from 'react'
 
-const Debug = () => {
+const Debug = (props) => {
   return (
-    <div id="debug" className='sidebarscontent'>
+    <div id="debugarea" className={`sidebarscontent d-${props.ariaExpandedisplaydebug}`}>
       <h6>Debug</h6>
     </div>
   )
diff --git a/web-app/src/components/SideBar/Main Components/Extensions/Extensions.jsx b/web-app/src/components/SideBar/Main Components/Extensions/Extensions.jsx
index e810d1b..0e8a339 100644
--- a/web-app/src/components/SideBar/Main Components/Extensions/Extensions.jsx	
+++ b/web-app/src/components/SideBar/Main Components/Extensions/Extensions.jsx	
@@ -1,8 +1,8 @@
 import React from 'react'
 
-const Extensions = () => {
+const Extensions = (props) => {
   return (
-    <div id="extensions" className='sidebarscontent'>
+    <div id="extensionsarea" className={`sidebarscontent d-${props.ariaExpandedisplayextensions}`}>
       <h6>Extensions</h6>
     </div>
   )
diff --git a/web-app/src/components/SideBar/Main Components/GItHub/GitHub.jsx b/web-app/src/components/SideBar/Main Components/GItHub/GitHub.jsx
index a06090e..3fdac99 100644
--- a/web-app/src/components/SideBar/Main Components/GItHub/GitHub.jsx	
+++ b/web-app/src/components/SideBar/Main Components/GItHub/GitHub.jsx	
@@ -1,8 +1,8 @@
 import React from 'react'
 
-const GitHub = () => {
+const GitHub = (props) => {
   return (
-    <div id="github" className=''>
+    <div id="githubarea" className={`sidebarscontent d-${props.ariaExpandedisplaygithub}`}>
       <h6>GitHub</h6>
     </div>
   )
diff --git a/web-app/src/components/SideBar/Main Components/Git/Git.jsx b/web-app/src/components/SideBar/Main Components/Git/Git.jsx
index 328eaaf..9fa02b6 100644
--- a/web-app/src/components/SideBar/Main Components/Git/Git.jsx	
+++ b/web-app/src/components/SideBar/Main Components/Git/Git.jsx	
@@ -1,9 +1,9 @@
 import React from 'react'
 
-const Git = () => {
+const Git = (props) => {
   return (
-    <div>
-      
+    <div id="gitarea" className={`sidebarscontent d-${props.ariaExpandedisplaygit}`}>
+      <h6>Git</h6>
     </div>
   )
 }
diff --git a/web-app/src/components/SideBar/Main Components/Search/Search.jsx b/web-app/src/components/SideBar/Main Components/Search/Search.jsx
index 2128cc9..14ab962 100644
--- a/web-app/src/components/SideBar/Main Components/Search/Search.jsx	
+++ b/web-app/src/components/SideBar/Main Components/Search/Search.jsx	
@@ -2,7 +2,7 @@ import React from 'react'
 
 const Search = (props) => {
   return (
-    <div id="searcharea" className='d-none'>
+    <div id="searcharea" className={`sidebarscontent d-${props.ariaExpandedisplaysearch}`}>
       <h6>Search</h6>
     </div>  
   )
diff --git a/web-app/src/components/SideBar/Main Components/Terminal/Terminal.jsx b/web-app/src/components/SideBar/Main Components/Terminal/Terminal.jsx
index e34cd52..a96a6ca 100644
--- a/web-app/src/components/SideBar/Main Components/Terminal/Terminal.jsx	
+++ b/web-app/src/components/SideBar/Main Components/Terminal/Terminal.jsx	
@@ -1,9 +1,9 @@
 import React from 'react'
 
-const Terminal = () => {
+const Terminal = (props) => {
   return (
-    <div>
-      
+    <div id="terminalarea" className={`sidebarscontent d-${props.ariaExpandedisplayterminal}`}>
+      <h6>Terminal</h6>
     </div>
   )
 }
diff --git a/web-app/src/components/SideBar/Main Components/filePioneer/filePioneer.jsx b/web-app/src/components/SideBar/Main Components/filePioneer/filePioneer.jsx
index c0c0345..5ec05ab 100644
--- a/web-app/src/components/SideBar/Main Components/filePioneer/filePioneer.jsx	
+++ b/web-app/src/components/SideBar/Main Components/filePioneer/filePioneer.jsx	
@@ -3,7 +3,7 @@ import React, {useState} from 'react'
 function FilePioneer(props) {
 
     return (
-        <div id="filepioneerarea" className='d-none'>
+        <div id="filepioneerarea" className={`sidebarscontent d-${props.ariaExpandedisplayfilepioneer}`}>
             <h6>File Pioneer</h6>
         </div>
     )
diff --git a/web-app/src/components/SideBar/SideBar.jsx b/web-app/src/components/SideBar/SideBar.jsx
index 403e0f7..7d3a2b6 100644
--- a/web-app/src/components/SideBar/SideBar.jsx
+++ b/web-app/src/components/SideBar/SideBar.jsx
@@ -9,53 +9,60 @@ export default function SideBar(props) {
           <div
             id="filepioneer"
             className="sidebaricons"
-            onClick={props.toggleAriaExpanded}
+            onClick={props.toggleAriaExpandedfilepioneer}
           >
             <i className="fa-regular fa-file fa-xl"></i>
           </div>
           <span className="sidebarIconBar"></span>
         </div>
         <div className="iconWrapper">
-          <div id="search" className="sidebaricons" onClick={props.toggleAriaExpanded}>
+          <div id="search" className="sidebaricons" onClick={props.toggleAriaExpandedsearch}>
             <i className="fa-solid fa-magnifying-glass fa-xl"></i>
           </div>
           <span className="sidebarIconBar"></span>
         </div>
 
         <div className="iconWrapper">
-          <div id="terminal" className="sidebaricons" onClick={props.toggleAriaExpanded}>
+          <div id="extensions" className="sidebaricons" onClick={props.toggleAriaExpandedextensions}>
+            <i className="fa-solid fa-puzzle-piece fa-xl"></i>
+          </div>
+          <span className="sidebarIconBar"></span>
+        </div>
+
+        <div className="iconWrapper">
+          <div id="terminal" className="sidebaricons" onClick={props.toggleAriaExpandedterminal}>
             <i className="fa-solid fa-terminal fa-xl"></i>
           </div>
           <span className="sidebarIconBar"></span>
         </div>
 
         <div className="iconWrapper">
-          <div id="debug" className="sidebaricons" onClick={props.toggleAriaExpanded}>
+          <div id="debug" className="sidebaricons" onClick={props.toggleAriaExpandedebug}>
             <i className="fa-solid  fa-bug-slash fa-xl"></i>
           </div>
           <span className="sidebarIconBar"></span>
         </div>
 
         <div className="iconWrapper">
-          <div id="git" className="sidebaricons" onClick={props.toggleAriaExpanded}>
+          <div id="git" className="sidebaricons" onClick={props.toggleAriaExpandedgit}>
             <i className="fa-brands  fa-git-alt fa-xl"></i>
           </div>
           <span className="sidebarIconBar"></span>
         </div>
 
         <div className="iconWrapper">
-          <div id="github" className="sidebaricons" onClick={props.toggleAriaExpanded}>
+          <div id="github" className="sidebaricons" onClick={props.toggleAriaExpandedgithub}>
             <i className="fa-brands fa-github fa-xl"></i>
           </div>
           <span className="sidebarIconBar"></span>
         </div>
 
-        <div className="iconWrapper">
-          <div id="codeblocks" className="sidebaricons" onClick={props.toggleAriaExpanded}>
+        {/* <div className="iconWrapper">
+          <div id="codeblocks" className="sidebaricons" onClick={props.toggleAriaExpandedcodeblocks}>
             <i className="fa-solid fa-puzzle-piece fa-xl"></i>
           </div>
           <span className="sidebarIconBar"></span>
-        </div>
+        </div> */}
       </div>
     </>
   );