diff --git a/rnd/autogpt_builder/src/components/CustomNode.tsx b/rnd/autogpt_builder/src/components/CustomNode.tsx
index 28d9324faa..9fa7be8ce6 100644
--- a/rnd/autogpt_builder/src/components/CustomNode.tsx
+++ b/rnd/autogpt_builder/src/components/CustomNode.tsx
@@ -77,7 +77,7 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
               type={type}
               position={Position.Left}
               id={key}
-              style={{ background: '#555', borderRadius: '50%' }}
+              style={{ background: '#555', borderRadius: '50%', width: '10px', height: '10px' }}
             />
             <span className="handle-label">{key}</span>
           </>
@@ -89,7 +89,7 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
               type={type}
               position={Position.Right}
               id={key}
-              style={{ background: '#555', borderRadius: '50%' }}
+              style={{ background: '#555', borderRadius: '50%', width: '10px', height: '10px' }}
             />
           </>
         )}
@@ -406,16 +406,6 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
     <div className={`custom-node dark-theme ${data.status === 'RUNNING' ? 'running' : data.status === 'COMPLETED' ? 'completed' : data.status === 'FAILED' ? 'failed' :''}`}>
       <div className="node-header">
         <div className="node-title">{data.blockType || data.title}</div>
-        <div className="node-buttons">
-          <Button onClick={toggleProperties} className="toggle-button">
-            &#9776;
-          </Button>
-          {hasOptionalFields() && (
-            <Button onClick={toggleAdvancedSettings} className="toggle-button">
-              &#9881;
-            </Button>
-          )}
-        </div>
       </div>
       <div className="node-content">
         <div className="input-section">
@@ -429,7 +419,7 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
                       type="target"
                       position={Position.Left}
                       id={key}
-                      style={{ background: '#555', borderRadius: '50%' }}
+                      style={{ background: '#555', borderRadius: '50%', width: '10px', height: '10px' }}
                     />
                     <span className="handle-label">{key}</span>
                   </div>
@@ -457,6 +447,16 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
           </p>
         </div>
       )}
+      <div className="node-footer">
+        <Button onClick={toggleProperties} className="toggle-button">
+          Toggle Properties
+        </Button>
+        {hasOptionalFields() && (
+          <Button onClick={toggleAdvancedSettings} className="toggle-button">
+            Toggle Advanced
+          </Button>
+        )}
+      </div>
       <ModalComponent
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
diff --git a/rnd/autogpt_builder/src/components/customnode.css b/rnd/autogpt_builder/src/components/customnode.css
index d3326e8d02..d073cc8d44 100644
--- a/rnd/autogpt_builder/src/components/customnode.css
+++ b/rnd/autogpt_builder/src/components/customnode.css
@@ -1,12 +1,12 @@
 .custom-node {
   padding: 15px;
-  border: 2px solid #fff;
+  border: 3px solid #000; /* Thicker border */
   border-radius: 12px;
-  background: #ffffff;
+  background: #ffffff; /* White background */
   color: #000000;
   width: 500px;
   box-sizing: border-box;
-  transition: background-color 0.3s ease-in-out;
+  transition: border-color 0.3s ease-in-out;
 }
 
 .node-header {
@@ -21,11 +21,10 @@
   font-weight: bold;
 }
 
-.toggle-button {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  color: #000000;
+.node-footer {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
 }
 
 .node-content {
@@ -41,6 +40,16 @@
   flex: 1;
 }
 
+.toggle-button {
+  color: #000000;
+  background: #ffffff;
+}
+
+.toggle-button:hover {
+  color: #000000;
+  background: #d1d1d1;
+}
+
 .handle-label {
   color: #000000;
   margin-left: 10px;
@@ -54,10 +63,6 @@
   align-items: flex-end;
 }
 
-.handle-label {
-  margin-left: 10px;
-}
-
 .handle-container {
   display: flex;
   position: relative;
@@ -72,7 +77,8 @@
   padding: 5px;
   width: 325px;
   border-radius: 4px;
-  background: #d1d1d1;
+  background: #ffffff;
+  border: 1px solid #d1d1d1;
   color: #000000;
   cursor: pointer;
   word-break: break-all;
@@ -95,24 +101,24 @@
   width: 100%;
   padding: 5px;
   border-radius: 4px;
-  border: 1px solid #555;
-  background: #444;
-  color: #e0e0e0;
+  border: 1px solid #000;
+  background: #fff;
+  color: #000;
 }
 
 .radio-label {
   display: block;
   margin: 5px 0;
-  color: #e0e0e0;
+  color: #000;
 }
 
 .number-input {
   width: 100%;
   padding: 5px;
   border-radius: 4px;
-  border: 1px solid #555;
-  background: #444;
-  color: #e0e0e0;
+  border: 1px solid #000;
+  background: #fff;
+  color: #000;
 }
 
 .array-item-container {
@@ -125,9 +131,9 @@
   flex-grow: 1;
   padding: 5px;
   border-radius: 4px;
-  border: 1px solid #555;
-  background: #444;
-  color: #e0e0e0;
+  border: 1px solid #000;
+  background: #fff;
+  color: #000;
 }
 
 .array-item-remove {
@@ -153,10 +159,11 @@
 .node-properties {
   margin-top: 5px;
   margin-bottom: 5px;
-  background: #d1d1d1;
+  background: #fff;
+  border: 1px solid #000; /* Border for properties section */
   padding: 10px;
   border-radius: 10px;
-  width: 325px;
+  width: 100%;
 }
 
 .error-message {
@@ -167,7 +174,7 @@
 
 .object-input {
   margin-left: 10px;
-  border-left: 1px solid #d1d1d1;
+  border-left: 1px solid #000; /* Border for nested inputs */
   padding-left: 10px;
 }
 
@@ -186,37 +193,26 @@
   flex-grow: 1;
 }
 
-@keyframes runningAnimation {
-  0% { background-color: #f39c12; }
-  50% { background-color: #e67e22; }
-  100% { background-color: #f39c12; }
+/* Styles for node states */
+.completed {
+  border-color: #27ae60; /* Green border for completed nodes */
 }
 
 .running {
-  animation: runningAnimation 0.5s infinite alternate;
-}
-
-/* Animation for completed status */
-@keyframes completedAnimation {
-  0% { background-color: #27ae60; }
-  100% { background-color: #2ecc71; }
-}
-
-.completed {
-  animation: completedAnimation 0.5s infinite alternate;
-}
-
-/* Animation for failed status */
-@keyframes failedAnimation {
-  0% { background-color: #c0392b; }
-  100% { background-color: #e74c3c; }
+  border-color: #f39c12; /* Orange border for running nodes */
 }
 
 .failed {
-  animation: failedAnimation 0.5s infinite alternate;
+  border-color: #c0392b; /* Red border for failed nodes */
 }
 
-/* Add more styles for better look */
-.custom-node {
-  transition: all 0.3s ease-in-out;
+/* Adjust handle size */
+.custom-node .react-flow__handle {
+  width: 10px;
+  height: 10px;
+}
+
+/* Make edges thicker */
+.react-flow__edge {
+  stroke-width: 2px !important;
 }