diff --git a/frontend/src/components/toolbar/dir-operation-toolbar.js b/frontend/src/components/toolbar/dir-operation-toolbar.js
index 0e955c5434..64341c1d1c 100644
--- a/frontend/src/components/toolbar/dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/dir-operation-toolbar.js
@@ -300,8 +300,7 @@ class DirOperationToolbar extends React.Component {
               onKeyDown={this.onDropdownToggleKeyDown}
               data-toggle="dropdown"
             >
-              {this.props.children}
-              <i className="sf3-font-new sf3-font ml-2"></i>
+              <i className="sf3-font-new sf3-font"></i>
               <i className="sf3-font-down sf3-font path-item-dropdown-toggle"></i>
             </DropdownToggle>
             <DropdownMenu onMouseMove={this.onDropDownMouseMove} positionFixed={true}>
@@ -359,8 +358,7 @@ class DirOperationToolbar extends React.Component {
             role="button"
             className="path-item"
           >
-            {this.props.children}
-            <i className="sf3-font-new sf3-font ml-2"></i>
+            <i className="sf3-font-new sf3-font"></i>
             <i className="sf3-font-down sf3-font path-item-dropdown-toggle"></i>
           </DropdownToggle>
           <DropdownMenu positionFixed={true}>
@@ -382,6 +380,7 @@ class DirOperationToolbar extends React.Component {
       <Fragment>
         {isShowDropdownMenu && (
           <div className="dir-operation">
+            {this.props.children}
             {content}
           </div>
         )}
diff --git a/frontend/src/css/lib-content-view.css b/frontend/src/css/lib-content-view.css
index cd90447b79..f65d34da00 100644
--- a/frontend/src/css/lib-content-view.css
+++ b/frontend/src/css/lib-content-view.css
@@ -280,6 +280,11 @@
   align-items: center;
 }
 
+.dir-view-path .dir-operation>.path-repo-name,
+.dir-view-path .dir-operation>.path-file-name {
+  margin: 0 6px;
+}
+
 .dir-view-path .dir-operation.dir-operation-no-dropdown {
   margin-left: 6px;
 }