diff --git a/server/src/domain/storage-template/storage-template.service.ts b/server/src/domain/storage-template/storage-template.service.ts
index b04ffc89a..9aa3a0e5e 100644
--- a/server/src/domain/storage-template/storage-template.service.ts
+++ b/server/src/domain/storage-template/storage-template.service.ts
@@ -191,6 +191,7 @@ export class StorageTemplateService {
       fileCreatedAt: new Date(),
       originalPath: '/upload/test/IMG_123.jpg',
       type: AssetType.IMAGE,
+      id: 'd587e44b-f8c0-4832-9ba3-43268bbf5d4e',
     } as AssetEntity;
     try {
       this.render(this.compile(config.storageTemplate.template), testAsset, 'IMG_123', 'jpg');
@@ -218,6 +219,7 @@ export class StorageTemplateService {
       ext,
       filetype: asset.type == AssetType.IMAGE ? 'IMG' : 'VID',
       filetypefull: asset.type == AssetType.IMAGE ? 'IMAGE' : 'VIDEO',
+      assetId: asset.id,
     };
 
     const systemTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
diff --git a/server/src/domain/system-config/system-config.constants.ts b/server/src/domain/system-config/system-config.constants.ts
index ca0497a9d..a1bb03a4c 100644
--- a/server/src/domain/system-config/system-config.constants.ts
+++ b/server/src/domain/system-config/system-config.constants.ts
@@ -20,6 +20,9 @@ export const supportedPresetTokens = [
   '{{y}}-{{MMMM}}-{{dd}}/{{filename}}',
   '{{y}}/{{y}}-{{MM}}/{{filename}}',
   '{{y}}/{{y}}-{{WW}}/{{filename}}',
+  '{{y}}/{{y}}-{{MM}}-{{dd}}/{{assetId}}',
+  '{{y}}/{{y}}-{{MM}}/{{assetId}}',
+  '{{y}}/{{y}}-{{WW}}/{{assetId}}',
 ];
 
 export const INITIAL_SYSTEM_CONFIG = 'INITIAL_SYSTEM_CONFIG';
diff --git a/server/src/domain/system-config/system-config.service.spec.ts b/server/src/domain/system-config/system-config.service.spec.ts
index d47b0ea7c..b094b328e 100644
--- a/server/src/domain/system-config/system-config.service.spec.ts
+++ b/server/src/domain/system-config/system-config.service.spec.ts
@@ -239,6 +239,9 @@ describe(SystemConfigService.name, () => {
           '{{y}}-{{MMMM}}-{{dd}}/{{filename}}',
           '{{y}}/{{y}}-{{MM}}/{{filename}}',
           '{{y}}/{{y}}-{{WW}}/{{filename}}',
+          '{{y}}/{{y}}-{{MM}}-{{dd}}/{{assetId}}',
+          '{{y}}/{{y}}-{{MM}}/{{assetId}}',
+          '{{y}}/{{y}}-{{WW}}/{{assetId}}',
         ],
         secondOptions: ['s', 'ss'],
         weekOptions: ['W', 'WW'],
diff --git a/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte b/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
index c0018edcb..e744b182d 100644
--- a/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
@@ -56,6 +56,7 @@
       ext: 'jpg',
       filetype: 'IMG',
       filetypefull: 'IMAGE',
+      assetId: 'a8312960-e277-447d-b4ea-56717ccba856',
     };
 
     const dt = luxon.DateTime.fromISO(new Date('2022-02-03T04:56:05.250').toISOString());
@@ -151,35 +152,36 @@
         <SupportedVariablesPanel />
       </section>
 
-      <div class="mt-4 flex flex-col">
+      <div class="flex flex-col mt-4">
         <h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">Template</h3>
 
-        <div class="my-2 text-xs">
+        <div class="my-2 text-sm">
           <h4>PREVIEW</h4>
         </div>
 
-        <p class="text-xs">
+        <p class="text-sm">
           Approximately path length limit : <span
             class="font-semibold text-immich-primary dark:text-immich-dark-primary"
             >{parsedTemplate().length + user.id.length + 'UPLOAD_LOCATION'.length}</span
           >/260
         </p>
 
-        <p class="text-xs">
-          <code>{user.storageLabel || user.id}</code> is the user's Storage Label
+        <p class="text-sm">
+          <code class="text-immich-primary dark:text-immich-dark-primary">{user.storageLabel || user.id}</code> is the user's
+          Storage Label
         </p>
 
-        <p class="mt-2 rounded-lg bg-gray-200 p-4 py-2 text-xs dark:bg-gray-700 dark:text-immich-dark-fg">
+        <p class="p-4 py-2 mt-2 text-xs bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-immich-dark-fg">
           <span class="text-immich-fg/25 dark:text-immich-dark-fg/50"
             >UPLOAD_LOCATION/{user.storageLabel || user.id}</span
           >/{parsedTemplate()}.jpg
         </p>
 
         <form autocomplete="off" class="flex flex-col" on:submit|preventDefault>
-          <div class="my-2 flex flex-col">
-            <label class="text-xs" for="preset-select">PRESET</label>
+          <div class="flex flex-col my-2">
+            <label class="text-sm" for="preset-select">PRESET</label>
             <select
-              class="mt-2 rounded-lg bg-slate-200 p-2 text-sm hover:cursor-pointer dark:bg-gray-600"
+              class="p-2 mt-2 text-sm rounded-lg bg-slate-200 hover:cursor-pointer dark:bg-gray-600"
               {disabled}
               name="presets"
               id="preset-select"
diff --git a/web/src/lib/components/admin-page/settings/storage-template/supported-datetime-panel.svelte b/web/src/lib/components/admin-page/settings/storage-template/supported-datetime-panel.svelte
index 8a7226824..8c5252058 100644
--- a/web/src/lib/components/admin-page/settings/storage-template/supported-datetime-panel.svelte
+++ b/web/src/lib/components/admin-page/settings/storage-template/supported-datetime-panel.svelte
@@ -9,7 +9,7 @@
   };
 </script>
 
-<div class="mt-2 text-xs">
+<div class="mt-2 text-sm">
   <h4>DATE & TIME</h4>
 </div>
 
diff --git a/web/src/lib/components/admin-page/settings/storage-template/supported-variables-panel.svelte b/web/src/lib/components/admin-page/settings/storage-template/supported-variables-panel.svelte
index ff093b1c3..57a5182e8 100644
--- a/web/src/lib/components/admin-page/settings/storage-template/supported-variables-panel.svelte
+++ b/web/src/lib/components/admin-page/settings/storage-template/supported-variables-panel.svelte
@@ -1,8 +1,8 @@
-<div class="mt-4 text-xs">
+<div class="mt-4 text-sm">
   <h4>OTHER VARIABLES</h4>
 </div>
 
-<div class="mt-2 rounded-lg bg-gray-200 p-4 text-xs dark:bg-gray-700 dark:text-immich-dark-fg">
+<div class="p-4 mt-2 text-xs bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-immich-dark-fg">
   <div class="flex gap-[50px]">
     <div>
       <p class="font-medium text-immich-primary dark:text-immich-dark-primary">FILE NAME</p>
@@ -25,5 +25,12 @@
         <li>{`{{filetypefull}}`} - VIDEO or IMAGE</li>
       </ul>
     </div>
+
+    <div>
+      <p class="font-medium text-immich-primary dark:text-immich-dark-primary">FILE TYPE</p>
+      <ul>
+        <li>{`{{assetId}}`} - Asset ID</li>
+      </ul>
+    </div>
   </div>
 </div>