diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index a7b0b5adc4..2dafcd7efe 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -509,7 +509,7 @@ class AppComponent {
     ])
     await this.appManager.activatePlugin(['settings'])
 
-    await this.appManager.activatePlugin(['walkthrough', 'storage', 'search', 'compileAndRun', 'recorder', 'dgit'])
+    await this.appManager.activatePlugin(['walkthrough', 'storage', 'search', 'compileAndRun', 'recorder', 'dgitApi', 'dgit'])
     await this.appManager.activatePlugin(['solidity-script', 'remix-templates'])
 
     if (isElectron()){
diff --git a/libs/remix-ui/git/src/components/branchHeader.tsx b/libs/remix-ui/git/src/components/branchHeader.tsx
index 8ec568528d..ee8451ebea 100644
--- a/libs/remix-ui/git/src/components/branchHeader.tsx
+++ b/libs/remix-ui/git/src/components/branchHeader.tsx
@@ -16,12 +16,16 @@ export const BranchHeader = () => {
       actions.getBranchDifferences(context.currentBranch, null, context)
     }
     if (!context.currentBranch || (context.currentBranch && context.currentBranch.name === '')) {
+      console.log(context)
       if (context.currentHead === '') {
+        console.log('not detached')
         setIsDetached(false)
       } else {
+        console.log('detached')
         setIsDetached(true)
       }
     } else {
+      console.log('not detached')
       setIsDetached(false)
     }
     setLatestCommit(null)
@@ -46,7 +50,7 @@ export const BranchHeader = () => {
   const getName = () => {
     const url = context.currentBranch?.remote?.url
     if (!url) return
-    const regex = /https:\/\/github\.com\/[^/]+\/([^/]+)\.git/
+    const regex = /https:\/\/github\.com\/[^/]+\/([^/]+)(?:\.git)?/;
     const match = url.match(regex)
     return match ? match[1] : null
   }
@@ -60,52 +64,37 @@ export const BranchHeader = () => {
 
   const Heading = () => {
     return (
-      <div className="container-fluid px-3">
+      <div className="container-fluid px-0">
         <div className="d-flex flex-column pt-1 mb-1">
-          <div className="d-flex flex-column justify-content-start align-items-start">
+          <div className="d-flex flex-column justify-content-start align-items-start w-100">
             {getName() ? (
-              <div className="pr-1 m-0">
-                <span className="col-4 px-0">Repository Name:</span>
-                <span className="" style={{ width: '15rem' }}>
-                  <span className={`${ changed ? 'text-danger pl-2 text-truncate overflow-hidden whitespace-nowrap ml-4' : "text-secondary pl-2 text-truncate overflow-hidden whitespace-nowrap ml-4" }`}>
-                    {getName() ?? ''}
-                  </span>
-                </span>
-              </div>
+              <span className={`text-truncate overflow-hidden whitespace-nowrap w-100`}>
+                {getName() ?? ''}
+              </span>
             ) : null
             }
-            <div className="pr-1 m-0">
-              <span className="col-4 px-0">Branch Name:</span>
-              <span className="pl-2 text-secondary text-truncate overflow-hidden whitespace-nowrap ml-4">
-                <span className={`${changed ? 'text-danger pl-2' : "pl-2"}`}>
-                  <i className="fa fa-code-branch mr-1 pl-2"></i>
-                  {context.currentBranch && context.currentBranch.name}
-                </span>
+            {context.currentBranch && context.currentBranch.name ?
+              <span className="text-secondary text-truncate overflow-hidden whitespace-nowrap w-100">
+                <i className="fa fa-code-branch mr-1"></i>{context.currentBranch && context.currentBranch.name}{changed?'*':''}
+              </span> : null}
+            {(latestCommit && latestCommit.commit && latestCommit.commit.message) ?
+              <span className="text-secondary text-truncate overflow-hidden whitespace-nowrap w-100">
+                {latestCommit ?
+                  latestCommit.commit && latestCommit.commit.message ? `"${latestCommit.commit.message}"` : '' : null}
+              </span>
+              : null}
+            {isDetached ?
+              <span className="text-secondary text-truncate overflow-hidden whitespace-nowrap w-100">
+                {isDetached ?
+                  <>You are in a detached state<i onClick={showDetachedWarningText} className="btn fa fa-info-circle mr-1"></i></> : null}
               </span>
-            </div>
+              : null}
             {context.storage.enabled ?
-              <div className="d-flex">
-                <span className="d-flex justify-between align-items-center" style={{ width: '15rem' }}>
-                  <span className="col-4 px-0">Storage :</span>
-                  <span className="text-secondary text-sm text-truncate overflow-hidden whitespace-nowrap ml-4">
-                    {context.storage.used} MB used
-                  ({context.storage.percentUsed} %)
-                  </span>
-                </span>
-              </div> : null}
-            <div className="d-flex flex-row">
-              <span className="d-flex justify-between align-items-center" style={{ width: '15rem' }}>
-                <span className="col-4 px-0">Messages :</span>
-                <span className="text-truncate overflow-hidden" >
-                  <span className="text-secondary text-truncate overflow-hidden whitespace-nowrap ml-4">
-                    {latestCommit ?
-                      latestCommit.commit && latestCommit.commit.message ? latestCommit.commit.message : '' : null}
-                    {isDetached ?
-                      <>You are in a detached state<i onClick={showDetachedWarningText} className="btn fa fa-info-circle mr-1 pl-2"></i></>: null}
-                  </span>
-                </span>
+              <span className="text-secondary text-sm text-truncate overflow-hidden whitespace-nowrap w-100">
+                {context.storage.used} MB used
+                ({context.storage.percentUsed} %)
               </span>
-            </div>
+              : null}
           </div>
         </div>
       </div>
diff --git a/libs/remix-ui/git/src/components/github/repositoryselect.tsx b/libs/remix-ui/git/src/components/github/repositoryselect.tsx
index 212ce295dd..c546d51e59 100644
--- a/libs/remix-ui/git/src/components/github/repositoryselect.tsx
+++ b/libs/remix-ui/git/src/components/github/repositoryselect.tsx
@@ -9,6 +9,7 @@ import { TokenWarning } from '../panels/tokenWarning';
 
 interface RepositorySelectProps {
   select: (repo: repository) => void;
+  title: string;
 }
 
 const RepositorySelect = (props: RepositorySelectProps) => {
@@ -65,7 +66,7 @@ const RepositorySelect = (props: RepositorySelectProps) => {
 
   return (
     <><button data-id='fetch-repositories' onClick={fetchRepositories} className="w-100 mt-1 btn btn-secondary mb-2">
-      <i className="fab fa-github mr-1"></i>Fetch Repositories from GitHub
+      <i className="fab fa-github mr-1"></i>{props.title}
     </button>
     {
       show ?
diff --git a/libs/remix-ui/git/src/components/github/selectandclonerepositories.tsx b/libs/remix-ui/git/src/components/github/selectandclonerepositories.tsx
index c90c252eb2..80482958c1 100644
--- a/libs/remix-ui/git/src/components/github/selectandclonerepositories.tsx
+++ b/libs/remix-ui/git/src/components/github/selectandclonerepositories.tsx
@@ -43,7 +43,7 @@ export const SelectAndCloneRepositories = (props: RepositoriesProps) => {
 
   return (
     <>
-      <RepositorySelect select={selectRepo} />
+      <RepositorySelect title="Clone from GitHub" select={selectRepo} />
       <TokenWarning />
 
       { repo && <BranchSelect select={selectRemoteBranch} /> }
diff --git a/libs/remix-ui/git/src/components/gitui.tsx b/libs/remix-ui/git/src/components/gitui.tsx
index b0f5337c58..adc4b7827a 100644
--- a/libs/remix-ui/git/src/components/gitui.tsx
+++ b/libs/remix-ui/git/src/components/gitui.tsx
@@ -164,7 +164,7 @@ export const GitUI = (props: IGitUi) => {
 
   return (
     <>{(!gitState.canUseApp) ? <Disabled></Disabled> :
-      <div className="m-1">
+      <div className="px-3">
         <gitPluginContext.Provider value={gitState}>
           <loaderContext.Provider value={loaderState}>
             <gitActionsContext.Provider value={gitActionsProviderValue}>
diff --git a/libs/remix-ui/git/src/components/panels/remotesimport.tsx b/libs/remix-ui/git/src/components/panels/remotesimport.tsx
index 2904f05d8e..5297ab00fa 100644
--- a/libs/remix-ui/git/src/components/panels/remotesimport.tsx
+++ b/libs/remix-ui/git/src/components/panels/remotesimport.tsx
@@ -64,7 +64,7 @@ export const RemotesImport = () => {
 
   return (
     <>
-      <RepositorySelect select={selectRepo} />
+      <RepositorySelect title="Add from GitHub" select={selectRepo} />
       <TokenWarning />
       {repo ?
         <input data-id='remote-panel-remotename' placeholder="remote name" name='remotename' onChange={e => onRemoteNameChange(e.target.value)} value={remoteName} className="form-control mb-2" type="text" id="remotename" />