diff --git a/apps/remix-ide-e2e/src/tests/dgit_github.test.ts b/apps/remix-ide-e2e/src/tests/dgit_github.test.ts
index 3081782e15..35117364d1 100644
--- a/apps/remix-ide-e2e/src/tests/dgit_github.test.ts
+++ b/apps/remix-ide-e2e/src/tests/dgit_github.test.ts
@@ -136,22 +136,22 @@ module.exports = {
     },
     'switch to branch links #group1': function (browser: NightwatchBrowser) {
         browser
+            .click('*[data-id="branches-panel"]')
             .waitForElementVisible({
-                selector: '//*[@data-id="remotes-panel-content"]//*[@data-id="branches-branch-links"]',
+                selector: '//*[@data-id="branches-panel-content-remote-branches"]//*[@data-id="branches-branch-links"]',
                 locateStrategy: 'xpath'
             })
             .click({
-                selector: '//*[@data-id="remotes-panel-content"]//*[@data-id="branches-toggle-branch-links"]',
+                selector: '//*[@data-id="branches-panel-content-remote-branches"]//*[@data-id="branches-toggle-branch-links"]',
                 locateStrategy: 'xpath'
             })
             .waitForElementVisible({
-                selector: '//*[@data-id="remotes-panel-content"]//*[@data-id="branches-toggle-current-branch-links"]',
+                selector: '//*[@data-id="branches-panel-content-remote-branches"]//*[@data-id="branches-toggle-current-branch-links"]',
                 locateStrategy: 'xpath'
             })
     },
     'check the local branches #group1': function (browser: NightwatchBrowser) {
         browser
-            .click('*[data-id="branches-panel"]')
             .waitForElementVisible({
                 selector: '//*[@data-id="branches-panel-content"]//*[@data-id="branches-toggle-current-branch-links"]',
                 locateStrategy: 'xpath'
diff --git a/libs/remix-ui/git/src/components/panels/branches.tsx b/libs/remix-ui/git/src/components/panels/branches.tsx
index b371785425..5ef1c17449 100644
--- a/libs/remix-ui/git/src/components/panels/branches.tsx
+++ b/libs/remix-ui/git/src/components/panels/branches.tsx
@@ -32,18 +32,19 @@ export const Branches = () => {
             <hr />
             {context.upstream ?
               <>
-                <label className="text-uppercase">remote branches on {context.upstream ? context.upstream.name : null}</label>
-                {context.branches && context.branches.filter((branch, index) => branch.remote && branch.remote.name === context.upstream.name).map((branch, index) => {
-                  return (
-                    <RemoteBranchDetails allowCheckout={true} key={index} branch={branch}></RemoteBranchDetails>
-                  );
-                })}
-                <GitUIButton data-id={`remote-sync-${context.upstream.name}`} className="btn btn-sm" onClick={async () => {
-                  await actions.fetch({
-                    remote: context.upstream
-                  })
-                }}><FontAwesomeIcon icon={faSync} ></FontAwesomeIcon><label className="pl-1">Fetch more from remote</label></GitUIButton>
-                <hr /></> : null}
+                <div data-id='branches-panel-content-remote-branches'>
+                  <label className="text-uppercase">remote branches on {context.upstream ? context.upstream.name : null}</label>
+                  {context.branches && context.branches.filter((branch, index) => branch.remote && branch.remote.name === context.upstream.name).map((branch, index) => {
+                    return (
+                      <RemoteBranchDetails allowCheckout={true} key={index} branch={branch}></RemoteBranchDetails>
+                    );
+                  })}
+                  <GitUIButton data-id={`remote-sync-${context.upstream.name}`} className="btn btn-sm" onClick={async () => {
+                    await actions.fetch({
+                      remote: context.upstream
+                    })
+                  }}><FontAwesomeIcon icon={faSync} ></FontAwesomeIcon><label className="pl-1">Fetch more from remote</label></GitUIButton>
+                  <hr /></div></> : null}
 
           </div> : null}
         {context.currentBranch