diff --git a/apps/remix-ide-e2e/src/tests/dgit_local.test.ts b/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
index ad7f9031fb..b4a0973309 100644
--- a/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
+++ b/apps/remix-ide-e2e/src/tests/dgit_local.test.ts
@@ -3,7 +3,13 @@ import kill from 'tree-kill'
 import init from "../helpers/init"
 import { Nightwatch, NightwatchBrowser } from "nightwatch"
 let gitserver: ChildProcess
-// if needed kill the server: kill -9 $(sudo lsof -t -i:6868)
+
+/* 
+/ uses the git-http-backend package to create a git server ( if needed kill the server: kill -9 $(sudo lsof -t -i:6868)  )
+/ GROUP 1: file operations PUSH PULL COMMIT SYNC FETCH CLONE ADD
+/ GROUP 2: branch operations CREATE & PUBLISH
+*/
+
 module.exports = {
     '@disabled': true,
     before: function (browser, done) {
@@ -17,14 +23,14 @@ module.exports = {
         })
     },
 
-    'run server #group1': function (browser: NightwatchBrowser) {
+    'run server #group1 #group2': function (browser: NightwatchBrowser) {
         browser.perform(async (done) => {
             gitserver = await spawnGitServer('/tmp/')
             console.log('working directory', process.cwd())
             done()
         })
     },
-    'Update settings for git #group1': function (browser: NightwatchBrowser) {
+    'Update settings for git #group1 #group2': function (browser: NightwatchBrowser) {
         browser.
             clickLaunchIcon('dgit')
             .waitForElementVisible('*[data-id="initgit-btn"]')
@@ -35,7 +41,7 @@ module.exports = {
             .modalFooterOKClick('github-credentials-error')
             .pause(2000)
     },
-    'clone a repo #group1': function (browser: NightwatchBrowser) {
+    'clone a repo #group1 #group2': function (browser: NightwatchBrowser) {
         browser
             .waitForElementVisible('*[data-id="clone-panel"]')
             .click('*[data-id="clone-panel"]')
@@ -47,6 +53,9 @@ module.exports = {
             .waitForElementVisible('*[data-id="treeViewLitreeViewItemREADME.md"]')
 
     },
+
+    // GROUP 1
+
     'check file added #group1': function (browser: NightwatchBrowser) {
         browser.
             addFile('test.txt', { content: 'hello world' }, 'README.md')
@@ -94,7 +103,7 @@ module.exports = {
         console.log(logs)
         browser.assert.ok(logs.includes('testcommit'))
     },
-    'change a file': function (browser: NightwatchBrowser) {
+    'change a file #group1': function (browser: NightwatchBrowser) {
         browser.
             openFile('test.txt').
             pause(1000).
@@ -163,6 +172,16 @@ module.exports = {
         browser
             .clickLaunchIcon('filePanel')
             .waitForElementVisible('*[data-id="treeViewLitreeViewItemtest2.txt"]')
+    },
+    // GROUP 2 
+    'create a branch #group2': function (browser: NightwatchBrowser) {
+        browser
+        .clickLaunchIcon('dgit')
+        .click('*[data-id="branches-panel"]')
+        .waitForElementVisible('*[data-id="newbranchname"]')
+        .setValue('*[data-id="newbranchname"]', 'testbranch')
+        .click('*[data-id="sourcecontrol-create-branch"]')
+        .waitForElementVisible('*[data-id="branches-current-branch-testbranch"]')
     }
 }
 
diff --git a/libs/remix-ui/git/src/components/buttons/commitmessage.tsx b/libs/remix-ui/git/src/components/buttons/commitmessage.tsx
index ffd08a5fdd..7f4e26d344 100644
--- a/libs/remix-ui/git/src/components/buttons/commitmessage.tsx
+++ b/libs/remix-ui/git/src/components/buttons/commitmessage.tsx
@@ -7,7 +7,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { syncStateContext } from "./sourceControlBase";
 
 enum buttonStateValues {
-  Commit ,
+  Commit,
   Sync = 1,
   PublishBranch = 2
 }
@@ -24,7 +24,7 @@ export const CommitMessage = () => {
     setMessage({ value: e.currentTarget.value })
   }
 
-  const commit = async() => {
+  const commit = async () => {
     if (context.staged.length === 0 && context.allchangesnotstaged.length == 0) return
     if (context.staged.length === 0)
       await actions.addall(context.allchangesnotstaged)
@@ -36,7 +36,7 @@ export const CommitMessage = () => {
     return context.upstream ? context.upstream : context.defaultRemote ? context.defaultRemote : null
   }
 
-  const sync = async() => {
+  const sync = async () => {
     await actions.pull({
       remote: getRemote(),
       ref: context.currentBranch
@@ -52,7 +52,7 @@ export const CommitMessage = () => {
   }
 
   const commitNotAllowed = () => {
-    return context.canCommit === false || message.value === "" || ( context.staged.length === 0 && context.allchangesnotstaged.length == 0 )
+    return context.canCommit === false || message.value === "" || (context.staged.length === 0 && context.allchangesnotstaged.length == 0)
   }
 
   const commitMessagePlaceholder = () => {
@@ -68,21 +68,28 @@ export const CommitMessage = () => {
   const upDownArrows = () => {
     return (
       <>
-        {syncState.commitsBehind && syncState.commitsBehind.length ? <>{syncState.commitsBehind.length}<FontAwesomeIcon icon={faArrowDown} className="ml-1" /></>: null}
-        {syncState.commitsAhead && syncState.commitsAhead.length ? <>{syncState.commitsAhead.length}<FontAwesomeIcon icon={faArrowUp} className="ml-1" /></>: null}
+        {syncState.commitsBehind && syncState.commitsBehind.length ? <>{syncState.commitsBehind.length}<FontAwesomeIcon icon={faArrowDown} className="ml-1" /></> : null}
+        {syncState.commitsAhead && syncState.commitsAhead.length ? <>{syncState.commitsAhead.length}<FontAwesomeIcon icon={faArrowUp} className="ml-1" /></> : null}
       </>
     )
   }
 
   const publishEnabled = () => {
     const remoteEquivalentBranch = context.branches.find((b) => b.name === context.currentBranch.name && b.remote)
-    return remoteEquivalentBranch === undefined && getRemote()!== null
+    return remoteEquivalentBranch === undefined && getRemote() !== null
   }
 
   const publishBranch = async () => {
     if (context.currentBranch === undefined || context.currentBranch.name === "")
       return
-    //await actions.push(context.currentBranch.name)
+    await actions.push({
+      remote: getRemote(),
+      ref: context.currentBranch
+    })
+    await actions.pull({
+      remote: getRemote(),
+      ref: context.currentBranch
+    })
   }
 
   const messageEnabled = () => {
@@ -91,19 +98,19 @@ export const CommitMessage = () => {
 
   const setButtonStateValues = () => {
 
-    if (!commitNotAllowed() || context.allchangesnotstaged.length > 0 || context.staged.length > 0){
-      if (context.allchangesnotstaged.length == 0 && context.staged.length == 0 && message.value === "" && publishEnabled()){
+    if (!commitNotAllowed() || context.allchangesnotstaged.length > 0 || context.staged.length > 0) {
+      if (context.allchangesnotstaged.length == 0 && context.staged.length == 0 && message.value === "" && publishEnabled()) {
         setButtonState(buttonStateValues.PublishBranch)
         return
       }
       setButtonState(buttonStateValues.Commit)
       return
     }
-    if (syncEnabled()){
+    if (syncEnabled()) {
       setButtonState(buttonStateValues.Sync)
       return
     }
-    if (publishEnabled()){
+    if (publishEnabled()) {
       setButtonState(buttonStateValues.PublishBranch)
       return
     }
@@ -112,24 +119,24 @@ export const CommitMessage = () => {
 
   useEffect(() => {
     setButtonStateValues()
-  },[context.canCommit, context.staged, context.allchangesnotstaged, context.currentBranch, syncState.commitsAhead, syncState.commitsBehind, message.value])
+  }, [context.canCommit, context.staged, context.allchangesnotstaged, context.currentBranch, syncState.commitsAhead, syncState.commitsBehind, message.value])
 
   return (
     <>
       <div className="form-group">
         <input placeholder={commitMessagePlaceholder()} data-id='commitMessage' disabled={!messageEnabled()} className="form-control" type="text" onChange={handleChange} value={message.value} />
       </div>
-      <button data-id='commitButton' className={`btn btn-primary w-100 ${buttonState === buttonStateValues.Commit ?'':'d-none'}`} disabled={commitNotAllowed()} onClick={async () => await commit()} >
+      <button data-id='commitButton' className={`btn btn-primary w-100 ${buttonState === buttonStateValues.Commit ? '' : 'd-none'}`} disabled={commitNotAllowed()} onClick={async () => await commit()} >
         <FontAwesomeIcon icon={faCheck} className="mr-1" />
-                Commit
+        Commit
       </button>
-      <button data-id='syncButton' className={`btn btn-primary w-100 ${buttonState === buttonStateValues.Sync ?'':'d-none'}`} disabled={!syncEnabled()} onClick={async () => await sync()} >
+      <button data-id='syncButton' className={`btn btn-primary w-100 ${buttonState === buttonStateValues.Sync ? '' : 'd-none'}`} disabled={!syncEnabled()} onClick={async () => await sync()} >
         <FontAwesomeIcon icon={faSync} className="mr-1" aria-hidden="true" />
-                Sync Changes {upDownArrows()}
+        Sync Changes {upDownArrows()}
       </button>
-      <button data-id='publishBranchButton' className={`btn btn-primary w-100 ${buttonState === buttonStateValues.PublishBranch ?'':'d-none'}`} onClick={async () => await publishBranch()} >
+      <button data-id='publishBranchButton' className={`btn btn-primary w-100 ${buttonState === buttonStateValues.PublishBranch ? '' : 'd-none'}`} onClick={async () => await publishBranch()} >
         <FontAwesomeIcon icon={faCloudArrowUp} className="mr-1" aria-hidden="true" />
-                Publish Branch
+        Publish Branch
       </button>
       <hr></hr>
     </>
diff --git a/libs/remix-ui/git/src/components/navigation/branchedetails.tsx b/libs/remix-ui/git/src/components/navigation/branchedetails.tsx
index 664db6c385..2fe9218d7d 100644
--- a/libs/remix-ui/git/src/components/navigation/branchedetails.tsx
+++ b/libs/remix-ui/git/src/components/navigation/branchedetails.tsx
@@ -58,7 +58,7 @@ export const BrancheDetailsNavigation = (props: BrancheDetailsNavigationProps) =
   return (
     <>
       <div className="d-flex flex-row w-100 mb-2 mt-2">
-        <div onClick={() => handleClick()} role={'button'} className='pointer d-flex flex-row w-100 commit-navigation'>
+        <div data-id={`branches-${context.currentBranch.name === branch.name ? 'current-' : ''}branch-${branch.name}`} onClick={() => handleClick()} role={'button'} className='pointer d-flex flex-row w-100 commit-navigation'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
@@ -67,11 +67,11 @@ export const BrancheDetailsNavigation = (props: BrancheDetailsNavigationProps) =
 
         </div>
         {context.currentBranch && context.currentBranch.name === branch.name ?
-          <GitUIButton className="btn btn-sm p-0 mr-1" onClick={() => { }}>
+          <GitUIButton data-id={`branches-toggle-current-branch-${branch.name}`} className="btn btn-sm p-0 mr-1" onClick={() => { }}>
             <FontAwesomeIcon className='pointer text-success' icon={faToggleOff} ></FontAwesomeIcon>
           </GitUIButton>
           :
-          <GitUIButton className="btn btn-sm p-0 mr-1" onClick={() => checkout(branch)}>
+          <GitUIButton data-id={`branches-toggle-branch-${branch.name}`} className="btn btn-sm p-0 mr-1" onClick={() => checkout(branch)}>
             <FontAwesomeIcon icon={faToggleOn}></FontAwesomeIcon>
           </GitUIButton>
         }
diff --git a/libs/remix-ui/git/src/components/navigation/branches.tsx b/libs/remix-ui/git/src/components/navigation/branches.tsx
index ff4ef2c44c..b9dd9b06f2 100644
--- a/libs/remix-ui/git/src/components/navigation/branches.tsx
+++ b/libs/remix-ui/git/src/components/navigation/branches.tsx
@@ -19,7 +19,7 @@ export const BranchesNavigation = ({ eventKey, activePanel, callback }) => {
   return (
     <>
       <div className={'d-flex justify-content-between pt-1 ' + (activePanel === eventKey? 'bg-light': '')}>
-        <span onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
+        <span data-id='branches-panel' onClick={()=>handleClick()} role={'button'} className='nav d-flex justify-content-start align-items-center w-75'>
           {
             activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
           }
diff --git a/libs/remix-ui/git/src/components/panels/branches.tsx b/libs/remix-ui/git/src/components/panels/branches.tsx
index ecffd92c2b..fe3539f4a0 100644
--- a/libs/remix-ui/git/src/components/panels/branches.tsx
+++ b/libs/remix-ui/git/src/components/panels/branches.tsx
@@ -41,11 +41,13 @@ export const Branches = () => {
             placeholder="branch name"
             onChange={handleChange}
             className="form-control w-md-25 w-100"
+            data-id="newbranchname"
             type="text"
             id="newbranchname"
           />
         </div>
         <GitUIButton
+          data-id="sourcecontrol-create-branch"
           onClick={async () => actions.createBranch(newBranch.value)}
           className="btn w-md-25 w-100 btn-primary"
           id="createbranch-btn"