diff --git a/components/FileListing.tsx b/components/FileListing.tsx
index 2f6deb4..f63145f 100644
--- a/components/FileListing.tsx
+++ b/components/FileListing.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from 'next-i18next'
 import useLocalStorage from '../utils/useLocalStorage'
 import { getPreviewType, preview } from '../utils/getPreviewType'
 import { useProtectedSWRInfinite } from '../utils/fetchWithSWR'
-import { getExtension, getFileIcon } from '../utils/getFileIcon'
+import { getExtension, getRawExtension, getFileIcon } from '../utils/getFileIcon'
 import { getStoredToken } from '../utils/protectedRouteHandler'
 import {
   DownloadingToast,
@@ -70,10 +70,10 @@ const formatChildName = (name: string) => {
   const { render, emoji } = renderEmoji(name)
   return render ? name.replace(emoji ? emoji[0] : '', '').trim() : name
 }
-export const ChildName: FC<{ name: string }> = ({ name }) => {
+export const ChildName: FC<{ name: string; folder?: boolean }> = ({ name, folder }) => {
   const original = formatChildName(name)
-  const extension = getExtension(original)
-  const prename = original.substring(0, original.length - extension.length)
+  const extension = folder ? '' : getRawExtension(original)
+  const prename = folder ? original : original.substring(0, original.length - extension.length)
   return (
     <span className="truncate before:float-right before:content-[attr(data-tail)]" data-tail={extension}>
       {prename}
diff --git a/components/FolderGridLayout.tsx b/components/FolderGridLayout.tsx
index 7915a15..d8bc309 100644
--- a/components/FolderGridLayout.tsx
+++ b/components/FolderGridLayout.tsx
@@ -46,7 +46,7 @@ const GridItem = ({ c, path }: { c: OdFolderChildren; path: string }) => {
         <span className="w-5 flex-shrink-0 text-center">
           <ChildIcon child={c} />
         </span>
-        <ChildName name={c.name} />
+        <ChildName name={c.name} folder={Boolean(c.folder)} />
       </div>
       <div className="truncate text-center font-mono text-xs text-gray-700 dark:text-gray-500">
         {formatModifiedDateTime(c.lastModifiedDateTime)}
diff --git a/components/FolderListLayout.tsx b/components/FolderListLayout.tsx
index 184cf7d..6abaf9c 100644
--- a/components/FolderListLayout.tsx
+++ b/components/FolderListLayout.tsx
@@ -20,7 +20,7 @@ const FileListItem: FC<{ fileContent: OdFolderChildren }> = ({ fileContent: c })
         <div className="w-5 flex-shrink-0 text-center">
           <ChildIcon child={c} />
         </div>
-        <ChildName name={c.name} />
+        <ChildName name={c.name} folder={Boolean(c.folder)} />
       </div>
       <div className="col-span-3 hidden flex-shrink-0 font-mono text-sm text-gray-700 dark:text-gray-500 md:block">
         {formatModifiedDateTime(c.lastModifiedDateTime)}
diff --git a/utils/getFileIcon.ts b/utils/getFileIcon.ts
index 35f8015..8b4318f 100644
--- a/utils/getFileIcon.ts
+++ b/utils/getFileIcon.ts
@@ -105,8 +105,11 @@ export function hasKey<O>(obj: O, key: PropertyKey): key is keyof O {
   return key in obj
 }
 
+export function getRawExtension(fileName: string): string {
+  return fileName.slice(((fileName.lastIndexOf('.') - 1) >>> 0) + 2)
+}
 export function getExtension(fileName: string): string {
-  return fileName.slice(((fileName.lastIndexOf('.') - 1) >>> 0) + 2).toLowerCase()
+  return getRawExtension(fileName).toLowerCase()
 }
 
 export function getFileIcon(fileName: string, flags?: { video?: boolean }): [IconPrefix, IconName] {