diff --git a/web-app/src/App.css b/web-app/src/App.css
index c2e3f9a..5e6644c 100644
--- a/web-app/src/App.css
+++ b/web-app/src/App.css
@@ -21,11 +21,13 @@ body {
 }
 
 nav {
+    display: flex;
     width: auto;
     height: 4vh;
-    display: flex;
+    flex-direction: row;
     background: var(--main-bg-color);
     align-items: center;
+    justify-content: space-between;
     padding: 12px;
     border-radius: 12px;
     margin: 5px;
@@ -60,6 +62,16 @@ li {
     padding: 0 19px;
 }
 
+#sidebarControls{
+    display: flex;
+    align-items: center;
+}
+
+#sidebarSettings{
+    display: flex;
+    align-items: center;
+}
+
 .dropdown-trigger-btn {
     display: inline-flex;
     border-radius: 3px;
@@ -307,6 +319,7 @@ li {
 }
 
 .welcomePage {
+    width: 92vw;
     padding: 2vw;
     background-color: var(--welcome-page);
 }
diff --git a/web-app/src/App.jsx b/web-app/src/App.jsx
index 16f7cd7..663d2b6 100644
--- a/web-app/src/App.jsx
+++ b/web-app/src/App.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react';
 import "./App.css";
 import MenuBar from "./components/MenuBar/MenuBar.jsx";
 import MonacoEditor from "./components/Editor/MonacoEditor.jsx";
@@ -15,8 +15,9 @@ 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";
 import DefaultPage from "./components/DefaultPage/DefaultPage.jsx";
+import WelcomePage from "./components/WelcomePage/WelcomePage.jsx"
 
-function App(props) {
+function App() {
   let [ariaExpandedisplayfilepioneer, changeariaExpandedisplayfilepioneer] = useState('none');
   let [ariaExpandedisplaysearch, changeariaExpandedisplaysearch] = useState('none');
   let [ariaExpandedisplaycodeblocks, changeariaExpandedisplaycodeblocks] = useState('none');
@@ -287,61 +288,8 @@ function App(props) {
           <div className="maincodearea">
             <DefaultPage DefaultPageDisplay={DefaultPageDisplay} dimensionsDefaultPage={insidemaincodeareaStyle} />
             <Tabs tabDisplay={TabDisplay} toggleWelcomePagedisplay={toggleWelcomePageDisplay} />
+            <WelcomePage DimensionsWelcomePage={insidemaincodeareaStyle} WelcomePageDisplay={WelcomePageDisplay} />
             <MonacoEditor style={insidemaincodeareaStyle} />
-            <div className={`welcomePage d-${WelcomePageDisplay}`} style={insidemaincodeareaStyle}>
-              <div className="welcomePageSection">
-                <h1>Welcome back to Tilder!</h1>
-                <p>Code like a pro!</p>
-              </div>
-              <div className="welcomePageSection">
-                <h2>Quick Links</h2>
-                <div id="importantLinks">
-                  <a href="https://github.com" className="linkto" target="_blank">
-                    <div className="link">
-                      <div className="link-icon">
-                        <i className="fa-brands fa-github fa-2xl"></i>
-                      </div>
-                      <div className="link-content">
-                        <h4>Github</h4>
-                        <p>Host your code!</p>
-                      </div>
-                    </div>
-                  </a>
-                  <a href="https://www.youtube.com" className="linkto" target="_blank">
-                    <div className="link">
-                      <div className="link-icon">
-                        <i className="fa-brands fa-youtube fa-2xl"></i>
-                      </div>
-                      <div className="link-content">
-                        <h4>Youtube</h4>
-                        <p>Watch Videos!</p>
-                      </div>
-                    </div>
-                  </a>
-                  <a href="" className="linkto" target="_blank">
-                    <div className="link">
-                      <div className="link-icon">
-                      </div>
-                      <div className="link-content">
-                        <h4>DSoft</h4>
-                        <p>Explore our other products.</p>
-                      </div>
-                    </div>
-                  </a>
-                  <a href="https://stackoverflow.com" className="linkto" target="_blank">
-                    <div className="link">
-                      <div className="link-icon">
-                        <i className="fa-brands fa-stack-overflow fa-2xl"></i>
-                      </div>
-                      <div className="link-content">
-                        <h4>Stack Overflow</h4>
-                        <p>Fix your problem!</p>
-                      </div>
-                    </div>
-                  </a>
-                </div>
-              </div>
-            </div>
           </div>
         </div>
         <div className="SideBarmainwrper">
diff --git a/web-app/src/components/MenuBar/MenuBar.jsx b/web-app/src/components/MenuBar/MenuBar.jsx
index f044fb0..3615d19 100644
--- a/web-app/src/components/MenuBar/MenuBar.jsx
+++ b/web-app/src/components/MenuBar/MenuBar.jsx
@@ -16,169 +16,176 @@ function MenuBar(props) {
     <>
       <header>
         <nav>
-          <div id="header_icon">
-            <img
-              src="/Tilder_icon.png"
-              alt="tilder_icon_header"
-              aria-label="Tilder"
-            />
-          </div>
-          <div className="navigation">
-            <div className="dropdown">
-              <span className="dropdown-trigger-btn">{props.file}</span>
-              <div className="dropdown-content">
-                <ul>
-                  <li aria-label="New File (Ctrl + N)">New File</li>
-                  <li aria-label="">New Folder</li>
-                  <li aria-label="">New Window</li>
-                  <li aria-label="">New Tab</li>
-                  <hr className="dropdowncontent-hr" />
-                  <li onClick={filePicker} aria-label="">
-                    Open File
-                  </li>
-                  <li aria-label="">Open Folder</li>
-                  <div className="subdropdown">
-                    <li>Open Recent</li>
-                    <div className="subdropdown-content expandable">
-                      <ul>
-                        <li>
-                          Recent
-                          <i className="fa-solid fa-chevron-right"></i>
-                        </li>
-                      </ul>
+          <div id="sidebarControls">
+            <div id="header_icon">
+              <img
+                src="/Tilder_icon.png"
+                alt="tilder_icon_header"
+                aria-label="Tilder"
+              />
+            </div>
+            <div className="navigation">
+              <div className="dropdown">
+                <span className="dropdown-trigger-btn">{props.file}</span>
+                <div className="dropdown-content">
+                  <ul>
+                    <li aria-label="New File (Ctrl + N)">New File</li>
+                    <li aria-label="">New Folder</li>
+                    <li aria-label="">New Window</li>
+                    <li aria-label="">New Tab</li>
+                    <hr className="dropdowncontent-hr" />
+                    <li onClick={filePicker} aria-label="">
+                      Open File
+                    </li>
+                    <li aria-label="">Open Folder</li>
+                    <div className="subdropdown">
+                      <li>Open Recent</li>
+                      <div className="subdropdown-content expandable">
+                        <ul>
+                          <li>
+                            Recent
+                            <i className="fa-solid fa-chevron-right"></i>
+                          </li>
+                        </ul>
+                      </div>
                     </div>
-                  </div>
+                    <hr className="dropdowncontent-hr" />
+                    <li aria-label="">Edit</li>
+                    <li aria-label="">Edit recent file</li>
+                    <li aria-label="">Edit file temporarily</li>
+                    <hr className="dropdowncontent-hr" />
+                    <li aria-label="">Save</li>
+                    <li aria-label="">Save as</li>
+                    <li aria-label="">Change Save's root directory</li>
+                    <hr className="dropdowncontent-hr" />
+                    <li onClick={quit} aria-label="">
+                      Quit Editor
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div className="dropdown">
+                <span className="dropdown-trigger-btn">{props.edit}</span>
+                <div className="dropdown-content">
+                  <li>Cut</li>
+                  <li>Copy</li>
+                  <li>Paste</li>
+                  <li>Paste as</li>
                   <hr className="dropdowncontent-hr" />
-                  <li aria-label="">Edit</li>
-                  <li aria-label="">Edit recent file</li>
-                  <li aria-label="">Edit file temporarily</li>
+                  <li>Undo</li>
+                  <li>Redo</li>
                   <hr className="dropdowncontent-hr" />
-                  <li aria-label="">Save</li>
-                  <li aria-label="">Save as</li>
-                  <li aria-label="">Change Save's root directory</li>
+                  <li>Find</li>
+                  <li>Replace</li>
+                  <li>Find in Files</li>
+                  <li>Replace in Files</li>
                   <hr className="dropdowncontent-hr" />
-                  <li onClick={quit} aria-label="">
-                    Quit Editor
-                  </li>
-                </ul>
-              </div>
-            </div>
-            <div className="dropdown">
-              <span className="dropdown-trigger-btn">{props.edit}</span>
-              <div className="dropdown-content">
-                <li>Cut</li>
-                <li>Copy</li>
-                <li>Paste</li>
-                <li>Paste as</li>
-                <hr className="dropdowncontent-hr" />
-                <li>Undo</li>
-                <li>Redo</li>
-                <hr className="dropdowncontent-hr" />
-                <li>Find</li>
-                <li>Replace</li>
-                <li>Find in Files</li>
-                <li>Replace in Files</li>
-                <hr className="dropdowncontent-hr" />
-                <li>Toggle Line Comment</li>
-                <li>Toggle Block Comment</li>
-                <hr className="dropdowncontent-hr" />
-                <li>Emmet: Expand Abbreviation</li>
+                  <li>Toggle Line Comment</li>
+                  <li>Toggle Block Comment</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Emmet: Expand Abbreviation</li>
+                </div>
               </div>
-            </div>
-            <div className="dropdown">
-              <span className="dropdown-trigger-btn">{props.view}</span>
-              <div className="dropdown-content">
-                <li>Command Palette</li>
-                <li>Open View</li>
-                <hr className="dropdowncontent-hr" />
-                <li>Appearance</li>
-                <li>Editor Layout</li>
-                <hr className="dropdowncontent-hr" />
-                <li>Explorer</li>
-                <li>Search</li>
-                <li>Source Control</li>
-                <li>Run</li>
-                <li>Extensions</li>
-                <li>Testing</li>
-                <hr className="dropdowncontent-hr" />
-                <li>Problems</li>
-                <li>Output</li>
-                <li>Debug Console</li>
-                <li>Terminal</li>
-                <hr className="dropdowncontent-hr" />
-                <li>Word Wrap</li>
+              <div className="dropdown">
+                <span className="dropdown-trigger-btn">{props.view}</span>
+                <div className="dropdown-content">
+                  <li>Command Palette</li>
+                  <li>Open View</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Appearance</li>
+                  <li>Editor Layout</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Explorer</li>
+                  <li>Search</li>
+                  <li>Source Control</li>
+                  <li>Run</li>
+                  <li>Extensions</li>
+                  <li>Testing</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Problems</li>
+                  <li>Output</li>
+                  <li>Debug Console</li>
+                  <li>Terminal</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Word Wrap</li>
+                </div>
               </div>
-            </div>
-            <div className="dropdown">
-              <span className="dropdown-trigger-btn">{props.go}</span>
-              <div className="dropdown-content">
-                <li>Switch Editor</li>
-                <li>Switch Group</li>
-                <hr className="dropdowncontent-hr" />
-                <li>Go to File</li>
-                <li>Go to Symbol in Workspace</li>
-                <hr className="dropdowncontent-hr" />
-                <li>Go to Symbol in Editor</li>
-                <li>Go to Definition</li>
-                <li>Go to Declaration</li>
-                <li>Go to Type Definition</li>
-                <li>Go to Implementations</li>
-                <li>Go to References</li>
-                <hr className="dropdowncontent-hr" />
-                <li>Go to Line/Column</li>
-                <li>Go to Bracket</li>
-                <hr className="dropdowncontent-hr" />
-                <li>Next Problem</li>
-                <li>Previous Problem</li>
+              <div className="dropdown">
+                <span className="dropdown-trigger-btn">{props.go}</span>
+                <div className="dropdown-content">
+                  <li>Switch Editor</li>
+                  <li>Switch Group</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Go to File</li>
+                  <li>Go to Symbol in Workspace</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Go to Symbol in Editor</li>
+                  <li>Go to Definition</li>
+                  <li>Go to Declaration</li>
+                  <li>Go to Type Definition</li>
+                  <li>Go to Implementations</li>
+                  <li>Go to References</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Go to Line/Column</li>
+                  <li>Go to Bracket</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Next Problem</li>
+                  <li>Previous Problem</li>
+                </div>
               </div>
-            </div>
-            <div className="dropdown">
-              <span className="dropdown-trigger-btn">{props.run_debug}</span>
-              <div className="dropdown-content">
-                <li>Start Debugging</li>
-                <li>Run Without Debugging</li>
-                <li>Stop Debugging</li>
-                <li>Restart Debugging</li>
-                <hr className="dropdowncontent-hr" />
-                <li>Open Configuration</li>
-                <li>Add Configuration</li>
-                <hr className="dropdowncontent-hr" />
-                <li>Step Over</li>
-                <li>Step Into</li>
-                <li>Step Out</li>
-                <li>Continue</li>
-                <hr className="dropdowncontent-hr" />
-                <li>Toggle Breakpoint</li>
-                <li>New Breakpoint</li>
-                <li>Enable All Breakpoints</li>
-                <li>Disable All Breakpoints</li>
-                <li>Remove All Breakpoints</li>
+              <div className="dropdown">
+                <span className="dropdown-trigger-btn">{props.run_debug}</span>
+                <div className="dropdown-content">
+                  <li>Start Debugging</li>
+                  <li>Run Without Debugging</li>
+                  <li>Stop Debugging</li>
+                  <li>Restart Debugging</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Open Configuration</li>
+                  <li>Add Configuration</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Step Over</li>
+                  <li>Step Into</li>
+                  <li>Step Out</li>
+                  <li>Continue</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Toggle Breakpoint</li>
+                  <li>New Breakpoint</li>
+                  <li>Enable All Breakpoints</li>
+                  <li>Disable All Breakpoints</li>
+                  <li>Remove All Breakpoints</li>
+                </div>
               </div>
-            </div>
 
-            <div className="dropdown">
-              <span className="dropdown-trigger-btn">{props.print}</span>
-              <div className="dropdown-content">
-                <li>Print Current file</li>
-                <li>Choose File...</li>
-                <hr className="dropdowncontent-hr" />
-                <li>Print Selected Lines</li>
+              <div className="dropdown">
+                <span className="dropdown-trigger-btn">{props.print}</span>
+                <div className="dropdown-content">
+                  <li>Print Current file</li>
+                  <li>Choose File...</li>
+                  <hr className="dropdowncontent-hr" />
+                  <li>Print Selected Lines</li>
+                </div>
               </div>
-            </div>
-            <div className="dropdown">
-              <span className="dropdown-trigger-btn">{props.shell}</span>
-              <div className="dropdown-content">
-                <li>New File</li>
+              <div className="dropdown">
+                <span className="dropdown-trigger-btn">{props.shell}</span>
+                <div className="dropdown-content">
+                  <li>New Shell</li>
+                </div>
               </div>
-            </div>
 
-            <div className="dropdown">
-              <span className="dropdown-trigger-btn">{props.help}</span>
-              <div className="dropdown-content">
-                <li>New File</li>
+              <div className="dropdown">
+                <span className="dropdown-trigger-btn">{props.help}</span>
               </div>
             </div>
           </div>
+          <div id="sidebarSettings">
+            <span className="dropdown-trigger-btn">
+              <i class="fa-solid fa-sliders"></i>
+            </span>
+            <span className="dropdown-trigger-btn">
+              <i class="fa-regular fa-user"></i>
+            </span>
+          </div>
         </nav>
       </header>
     </>
diff --git a/web-app/src/components/WelcomePage/WelcomePage.jsx b/web-app/src/components/WelcomePage/WelcomePage.jsx
new file mode 100644
index 0000000..333d22d
--- /dev/null
+++ b/web-app/src/components/WelcomePage/WelcomePage.jsx
@@ -0,0 +1,62 @@
+import React from 'react'
+
+function welcomePage(props) {
+    return (
+        <div className={`welcomePage d-${props.WelcomePageDisplay}`} DimensionsWelcomePage={props.insidemaincodeareaStyle}>
+            <div className="welcomePageSection">
+                <h1>Welcome back to Tilder!</h1>
+                <p>Code like a pro!</p>
+            </div>
+            <div className="welcomePageSection">
+                <h2>Quick Links</h2>
+                <div id="importantLinks">
+                    <a href="https://github.com" className="linkto" target="_blank">
+                        <div className="link">
+                            <div className="link-icon">
+                                <i className="fa-brands fa-github fa-2xl"></i>
+                            </div>
+                            <div className="link-content">
+                                <h4>Github</h4>
+                                <p>Host your code!</p>
+                            </div>
+                        </div>
+                    </a>
+                    <a href="https://www.youtube.com" className="linkto" target="_blank">
+                        <div className="link">
+                            <div className="link-icon">
+                                <i className="fa-brands fa-youtube fa-2xl"></i>
+                            </div>
+                            <div className="link-content">
+                                <h4>Youtube</h4>
+                                <p>Watch Videos!</p>
+                            </div>
+                        </div>
+                    </a>
+                    <a href="" className="linkto" target="_blank">
+                        <div className="link">
+                            <div className="link-icon">
+                            </div>
+                            <div className="link-content">
+                                <h4>DSoft</h4>
+                                <p>Explore our other products.</p>
+                            </div>
+                        </div>
+                    </a>
+                    <a href="https://stackoverflow.com" className="linkto" target="_blank">
+                        <div className="link">
+                            <div className="link-icon">
+                                <i className="fa-brands fa-stack-overflow fa-2xl"></i>
+                            </div>
+                            <div className="link-content">
+                                <h4>Stack Overflow</h4>
+                                <p>Fix your problem!</p>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default welcomePage
\ No newline at end of file