[Haik]: and so it begins

debugger/debugger_gui/src/components/sync-section/SyncSection.css

@@ -0,0 +1,16 @@
+.sync-section-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100vw;
+    align-items: center;
+    padding: 20px;
+    box-sizing: border-box;
+    gap: 0
+}
+
+.sync-section-container > div {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+}

debugger/debugger_gui/src/components/sync-section/SyncSection.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PullButton from '../pull-button/PullButton';
+import PushButton from '../push-button/PushButton';
+import ColorReset from '../color-reset/ColorReset';
+import './SyncSection.css'; // Import the CSS file
+
+const SyncSection = ({ projectStructure, setProjectStructure }) => {
+    return (
+        <div className="sync-section-container">
+            <PullButton setProjectStructure={setProjectStructure} />
+            <ColorReset setProjectStructure={setProjectStructure} />
+            <PushButton projectStructure={projectStructure} setProjectStructure={setProjectStructure} />
+        </div>
+    );
+};
+
+export default SyncSection;