diff --git a/src/src/components/PowerTools/AutoComplete.tsx b/src/src/components/PowerTools/AutoComplete.tsx
index 2131fd5..a352588 100644
--- a/src/src/components/PowerTools/AutoComplete.tsx
+++ b/src/src/components/PowerTools/AutoComplete.tsx
@@ -11,6 +11,9 @@ import type { MatchRule, VirtualCalendar } from '../Widgets/VirtualCalendars';
 import { matchRules } from '../Widgets/VirtualCalendars';
 import { Synonym } from '../Widgets/Synonyms';
 
+const indicator = document.createElement('div');
+indicator.id = 'calendar-plus-autocomplete-indicator';
+
 /**
  * Provide autocomplete for calendar event names and automatically put events
  * into correct calendars based on rules defined by the user
@@ -75,7 +78,17 @@ export function AutoComplete(): JSX.Element {
               };
         }
 
-        setActiveMatch(findMatch());
+        const match = findMatch();
+        setActiveMatch(match);
+
+        // Show autocomplete prediction indicator
+        const parent = element.parentElement;
+        if (match) {
+          const calendar = calendars.find(({ id }) => id === match.calendar);
+          indicator.style.background =
+            calendar?.backgroundColor ?? 'transparent';
+          parent?.append(indicator);
+        } else indicator.remove();
 
         if (blurListeners.has(element)) return;
         element.addEventListener('blur', handleBlur);
@@ -127,7 +140,7 @@ export function AutoComplete(): JSX.Element {
           const expandCalendarsButton = findCalendarsButton(parent);
           const alreadyOpened =
             expandCalendarsButton === undefined ||
-            expandCalendarsButton.getBoundingClientRect().height === 0;
+            expandCalendarsButton.offsetWidth === 0;
 
           const trigger = expandCalendarsButton ?? combobox;
           // Don't change calendar if correct one is already selected
@@ -171,7 +184,6 @@ export function AutoComplete(): JSX.Element {
     [virtualCalendars],
   );
 
-  console.log(activeMatch);
   const activeEventNames = React.useMemo(() => {
     if (activeMatch === undefined || activeMatch.synonym.length === 0)
       return eventNames;
diff --git a/src/src/css/autocomplete-indicator.css b/src/src/css/autocomplete-indicator.css
new file mode 100644
index 0000000..f7b6ae3
--- /dev/null
+++ b/src/src/css/autocomplete-indicator.css
@@ -0,0 +1,17 @@
+/**
+ * A small border-bottom indicator for the event name input. The indicator
+ * will be shown if pending event name matches some calendar name as per
+ * autocomplete rules, and the indicator will have the color of the matched
+ * calendar.
+ */
+@layer components {
+  #calendar-plus-autocomplete-indicator {
+    position: absolute;
+    pointer-events: none;
+    width: 100%;
+    height: 2px;
+    bottom: 0;
+    border-radius: 1rem;
+    z-index: 2;
+  }
+}
diff --git a/src/src/css/main.css b/src/src/css/main.css
index 785dd8e..c330d3e 100644
--- a/src/src/css/main.css
+++ b/src/src/css/main.css
@@ -14,6 +14,7 @@
 @import './condense-interface.css';
 @import './less-invasive-batch-edit.css';
 @import './ghost-events.css';
+@import './autocomplete-indicator.css';
 
 /**
  * This injects Tailwind's utility classes and any utility classes registered