diff --git a/package-lock.json b/package-lock.json
index 785ae480a..0a7d57f97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,8 +10,8 @@
             "dependencies": {
                 "@analytics/google-analytics": "^1.0.5",
                 "@aw-labs/appwrite-console": "^13.0.0",
-                "@aw-labs/icons": "0.0.0-77",
-                "@aw-labs/ui": "0.0.0-77",
+                "@aw-labs/icons": "0.0.0-78",
+                "@aw-labs/ui": "0.0.0-78",
                 "@popperjs/core": "^2.11.6",
                 "@sentry/svelte": "^7.19.0",
                 "@sentry/tracing": "^7.19.0",
@@ -154,14 +154,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-77",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-77.tgz",
-            "integrity": "sha512-z/gH6B//qShnlJbf1sxv0ltSbRvJha1El0pl4jACAWDD+orgh2hzBrv6YdgPi1AVBTacu2GWWTcyobItghbpgA=="
+            "version": "0.0.0-78",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-78.tgz",
+            "integrity": "sha512-M1yH0EUanjuHw1McVJfVKrkbHOoSd4PF8ZOYqMXOhSwuwk37MFR8jUapYb2NPu3WdfLTGI6H3N+HwaILePotCg=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-77",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-77.tgz",
-            "integrity": "sha512-y/7cbPFcK+jUnarsn9X1arrIB69RVMPWMjjIiiaX7uSa0rq9ZN1agBZxfA63meyh23kdIK4K5CcJhatShMMsYg==",
+            "version": "0.0.0-78",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-78.tgz",
+            "integrity": "sha512-YjIqkwAqZLvjJ6MQBxTEbAuotXHL1E/LXwmHOH9/Tu6TvF5p8e83LlyHVG6d8rXwsmsGfUcXLJEvEcc8RMEOMQ==",
             "dependencies": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
@@ -7749,14 +7749,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-77",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-77.tgz",
-            "integrity": "sha512-z/gH6B//qShnlJbf1sxv0ltSbRvJha1El0pl4jACAWDD+orgh2hzBrv6YdgPi1AVBTacu2GWWTcyobItghbpgA=="
+            "version": "0.0.0-78",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-78.tgz",
+            "integrity": "sha512-M1yH0EUanjuHw1McVJfVKrkbHOoSd4PF8ZOYqMXOhSwuwk37MFR8jUapYb2NPu3WdfLTGI6H3N+HwaILePotCg=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-77",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-77.tgz",
-            "integrity": "sha512-y/7cbPFcK+jUnarsn9X1arrIB69RVMPWMjjIiiaX7uSa0rq9ZN1agBZxfA63meyh23kdIK4K5CcJhatShMMsYg==",
+            "version": "0.0.0-78",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-78.tgz",
+            "integrity": "sha512-YjIqkwAqZLvjJ6MQBxTEbAuotXHL1E/LXwmHOH9/Tu6TvF5p8e83LlyHVG6d8rXwsmsGfUcXLJEvEcc8RMEOMQ==",
             "requires": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
diff --git a/package.json b/package.json
index cbd2c487c..0a6855b61 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,8 @@
         "@analytics/google-analytics": "^1.0.5",
         "analytics": "^0.8.1",
         "@aw-labs/appwrite-console": "^13.0.0",
-        "@aw-labs/icons": "0.0.0-77",
-        "@aw-labs/ui": "0.0.0-77",
+        "@aw-labs/icons": "0.0.0-78",
+        "@aw-labs/ui": "0.0.0-78",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.19.0",
         "@sentry/tracing": "^7.19.0",
diff --git a/src/lib/elements/forms/inputId.svelte b/src/lib/elements/forms/inputId.svelte
index cd2584469..6ab53c977 100644
--- a/src/lib/elements/forms/inputId.svelte
+++ b/src/lib/elements/forms/inputId.svelte
@@ -43,9 +43,12 @@
             bind:this={element}
             on:invalid={handleInvalid} />
         <!-- TODO: add correct class -->
-        <div class="options-list">
-            <span class="text u-small u-opacity-0-5">{value?.length ?? 0}/36</span>
-        </div>
+
+        <span class="text-counter">
+            <span class="text-counter-count">{value?.length ?? 0}</span>
+            <span class="text-counter-separator" />
+            <span class="text-counter-max">36</span>
+        </span>
     </div>
 </FormItem>
 <div class="u-flex u-gap-4 u-margin-block-start-8 u-small" class:u-warning={icon === 'exclamation'}>