diff --git a/web_src/js/components/ViewFileTreeItem.vue b/web_src/js/components/ViewFileTreeItem.vue
index cb94c1f7f1..1e8b9708b9 100644
--- a/web_src/js/components/ViewFileTreeItem.vue
+++ b/web_src/js/components/ViewFileTreeItem.vue
@@ -39,12 +39,35 @@ const doLoadDirContent = () => {
 const doLoadFileContent = () => {
   props.loadContent(props.item);
 };
+
+const doGotoSubModule = () => {
+  // TOTO: redirect to submodule
+};
 </script>
 
 <template>
   <!--title instead of tooltip above as the tooltip needs too much work with the current methods, i.e. not being loaded or staying open for "too long"-->
   <div
-    v-if="item.type !== 'tree'" class="item-file"
+    v-if="item.type === 'commit'" class="item-submodule"
+    :title="item.name"
+    @click.stop="doGotoSubModule"
+  >
+    <!-- submodule -->
+    <SvgIcon class="text primary" name="octicon-file-submodule"/>
+    <span class="gt-ellipsis tw-flex-1">{{ item.name }}</span>
+  </div>
+  <div
+    v-else-if="item.type === 'symlink'" class="item-symlink"
+    :class="{'selected': selectedItem.value === item.path}"
+    :title="item.name"
+    @click.stop="doLoadFileContent"
+  >
+    <!-- symlink -->
+    <SvgIcon name="octicon-file-symlink-file"/>
+    <span class="gt-ellipsis tw-flex-1">{{ item.name }}</span>
+  </div>
+  <div
+    v-else-if="item.type !== 'tree'" class="item-file"
     :class="{'selected': selectedItem.value === item.path}"
     :title="item.name"
     @click.stop="doLoadFileContent"
@@ -79,25 +102,27 @@ const doLoadFileContent = () => {
   border-left: 1px solid var(--color-secondary);
 }
 
-.sub-items .item-file {
+.sub-items .item-file,
+.sub-items .item-symlink,
+.sub-items .item-submodule {
   padding-left: 18px;
 }
 
-.item-directory.selected, .item-file.selected {
+.item-directory.selected,
+.item-symlink.selected,
+.item-file.selected {
   color: var(--color-text);
   background: var(--color-active);
   border-radius: 4px;
 }
 
-.item-file.viewed {
-  color: var(--color-text-light-3);
-}
-
 .item-directory {
   user-select: none;
 }
 
 .item-file,
+.item-symlink,
+.item-submodule,
 .item-directory {
   display: flex;
   align-items: center;
@@ -106,6 +131,8 @@ const doLoadFileContent = () => {
 }
 
 .item-file:hover,
+.item-symlink:hover,
+.item-submodule:hover,
 .item-directory:hover {
   color: var(--color-text);
   background: var(--color-hover);
diff --git a/web_src/js/svg.ts b/web_src/js/svg.ts
index 6a8246fa1b..f1ede6fb88 100644
--- a/web_src/js/svg.ts
+++ b/web_src/js/svg.ts
@@ -29,6 +29,7 @@ import octiconFile from '../../public/assets/img/svg/octicon-file.svg';
 import octiconFileDirectoryFill from '../../public/assets/img/svg/octicon-file-directory-fill.svg';
 import octiconFileDirectoryOpenFill from '../../public/assets/img/svg/octicon-file-directory-open-fill.svg';
 import octiconFileSubmodule from '../../public/assets/img/svg/octicon-file-submodule.svg';
+import octiconFileSymlinkFile from '../../public/assets/img/svg/octicon-file-symlink-file.svg';
 import octiconFilter from '../../public/assets/img/svg/octicon-filter.svg';
 import octiconGear from '../../public/assets/img/svg/octicon-gear.svg';
 import octiconGitBranch from '../../public/assets/img/svg/octicon-git-branch.svg';
@@ -106,6 +107,7 @@ const svgs = {
   'octicon-file-directory-fill': octiconFileDirectoryFill,
   'octicon-file-directory-open-fill': octiconFileDirectoryOpenFill,
   'octicon-file-submodule': octiconFileSubmodule,
+  'octicon-file-symlink-file': octiconFileSymlinkFile,
   'octicon-filter': octiconFilter,
   'octicon-gear': octiconGear,
   'octicon-git-branch': octiconGitBranch,