diff --git a/libs/remix-ui/git/src/components/buttons/commitmessage.tsx b/libs/remix-ui/git/src/components/buttons/commitmessage.tsx
index 12cc4225c2..d2f275af21 100644
--- a/libs/remix-ui/git/src/components/buttons/commitmessage.tsx
+++ b/libs/remix-ui/git/src/components/buttons/commitmessage.tsx
@@ -36,6 +36,19 @@ export const CommitMessage = () => {
       await actions.addall()
     await actions.commit(message.value)
   }
+
+  const getRemote = () => {
+    return context.upstream ? context.upstream : context.defaultRemote ? context.defaultRemote : null
+  }
+
+  const getRemoteName = () => {
+    return getRemote() ? getRemote().remote : ''
+  }
+
+  const sync = async() => {
+    await actions.pull(getRemoteName(), context.currentBranch.name)
+    await actions.push(getRemoteName(), context.currentBranch.name)
+  }
   
   const commitNotAllowed = () => {
     return context.canCommit === false || message.value === "" || ( context.staged.length === 0 && context.allchangesnotstaged.length == 0 )
@@ -110,7 +123,7 @@ export const CommitMessage = () => {
         <FontAwesomeIcon icon={faCheck} className="mr-1" />
                 Commit
       </button>
-      <button data-id='syncButton' className={`btn btn-primary w-100 ${buttonState === buttonStateValues.Sync ?'':'d-none'}`} disabled={!syncEnabled()} onClick={async () => await commit()} >
+      <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()}
       </button>
diff --git a/libs/remix-ui/git/src/components/panels/commits/commitdetails.tsx b/libs/remix-ui/git/src/components/panels/commits/commitdetails.tsx
index bc037d6c40..bccf5c6454 100644
--- a/libs/remix-ui/git/src/components/panels/commits/commitdetails.tsx
+++ b/libs/remix-ui/git/src/components/panels/commits/commitdetails.tsx
@@ -32,7 +32,7 @@ export const CommitDetails = (props: CommitDetailsProps) => {
   }
 
   const commitsAhead = (remote: remote) => {
-    if(!remote) return [];
+    if (!remote) return [];
     return context.branchDifferences[`${remote.remote}/${branch.name}`]?.uniqueHeadCommits || [];
   }
 
@@ -40,6 +40,12 @@ export const CommitDetails = (props: CommitDetailsProps) => {
     return commitsAhead(getRemote()).findIndex((c) => c.oid === commit.oid) > -1
   }
 
+  const openFileOnRemote = (file: string, hash: string) => {
+    console.log("open file on remote", file, hash, getRemote() ? `${getRemote().remote}/${branch.name}/commit/${hash}/${file}` : "")
+    if (!getRemote()) return
+    window.open(`${getRemote() ? `${getRemote().url}/blob/${hash}/${file}` : ""}`, "_blank")
+  }
+
   return (<Accordion activeKey={activePanel} defaultActiveKey="">
     <CommitDetailsNavigation isAheadOfRepo={isAheadOfRepo()} commit={commit} checkout={checkout} eventKey="0" activePanel={activePanel} callback={setActivePanel} />
     <Accordion.Collapse className="pl-2 border-left ml-1" eventKey="0">
@@ -47,7 +53,7 @@ export const CommitDetails = (props: CommitDetailsProps) => {
         {context.commitChanges && context.commitChanges.filter(
           (change) => change.hashModified === commit.oid && change.hashOriginal === commit.commit.parent[0]
         ).map((change, index) => {
-          return (<CommitDetailsItems isAheadOfRepo={isAheadOfRepo()} key={index} commitChange={change}></CommitDetailsItems>)
+          return (<CommitDetailsItems openFileOnRemote={openFileOnRemote} isAheadOfRepo={isAheadOfRepo()} key={index} commitChange={change}></CommitDetailsItems>)
         })}
 
       </>
diff --git a/libs/remix-ui/git/src/components/panels/commits/commitdetailsitem.tsx b/libs/remix-ui/git/src/components/panels/commits/commitdetailsitem.tsx
index 8d5d0e904a..00638efb43 100644
--- a/libs/remix-ui/git/src/components/panels/commits/commitdetailsitem.tsx
+++ b/libs/remix-ui/git/src/components/panels/commits/commitdetailsitem.tsx
@@ -1,4 +1,4 @@
-import { commitChange } from "../../../types";
+import { branch, commitChange } from "../../../types";
 import React from "react";
 import path from "path";
 import { gitActionsContext, pluginActionsContext } from "../../../state/context";
@@ -8,10 +8,11 @@ import { faGlobe } from "@fortawesome/free-solid-svg-icons";
 export interface CCommitDetailsItemsProps {
   commitChange: commitChange;
   isAheadOfRepo: boolean;
+  openFileOnRemote: (file: string, hash: string) => void;
 }
 
 export const CommitDetailsItems = (props: CCommitDetailsItemsProps) => {
-  const { commitChange, isAheadOfRepo } = props;
+  const { commitChange, isAheadOfRepo, openFileOnRemote } = props;
   const actions = React.useContext(gitActionsContext)
   const pluginActions = React.useContext(pluginActionsContext)
 
@@ -22,6 +23,10 @@ export const CommitDetailsItems = (props: CCommitDetailsItemsProps) => {
     await pluginActions.openDiff(change)
   }
 
+  const openRemote = () => {
+    openFileOnRemote(commitChange.path, commitChange.hashModified)
+  }
+
   function FunctionStatusIcons() {
     const status = commitChange.type
     return (<>
@@ -33,13 +38,14 @@ export const CommitDetailsItems = (props: CCommitDetailsItemsProps) => {
     </>)
   }
   return (<>
-    <div className={`d-flex w-100 d-flex flex-row commitdetailsitem ${isAheadOfRepo? 'text-success':''}`}>
+    <div className={`d-flex w-100 d-flex flex-row commitdetailsitem ${isAheadOfRepo ? 'text-success' : ''}`}>
       <div className='pointer gitfile long-and-truncated' onClick={async () => await openChanges(commitChange)}>
         <span className='font-weight-bold long-and-truncated'>{path.basename(commitChange.path)}</span>
         <div className='text-secondary long-and-truncated'> {commitChange.path}</div>
       </div>
       <div className="d-flex align-items-end">
-        <FontAwesomeIcon icon={faGlobe} className="mr-1 align-self-center" />
+        {!isAheadOfRepo ?
+          <FontAwesomeIcon role={'button'} icon={faGlobe} onClick={() => openRemote()} className="pointer mr-1 align-self-center" /> : <></>}
         <FunctionStatusIcons></FunctionStatusIcons>
       </div>
     </div>