diff --git a/ui/src/components/MacroForm.tsx b/ui/src/components/MacroForm.tsx
index 06afd4e..135817c 100644
--- a/ui/src/components/MacroForm.tsx
+++ b/ui/src/components/MacroForm.tsx
@@ -181,7 +181,7 @@ export function MacroForm({
         <div>
           <div className="flex items-center justify-between text-sm">
             <div className="flex items-center gap-1">
-              <FieldLabel label="Steps" info={`Each step is a collection of keys and/or modifiers that will be executed in order. You can add up to a maximum of ${MAX_STEPS_PER_MACRO} steps per macro.`} />
+              <FieldLabel label="Steps" description={`Keys/modifiers executed in sequence with a delay between each step.`} />
             </div>
             <span className="text-slate-500 dark:text-slate-400">
               {macro.steps?.length || 0}/{MAX_STEPS_PER_MACRO} steps
diff --git a/ui/src/components/MacroStepCard.tsx b/ui/src/components/MacroStepCard.tsx
index 986eb38..1b944cf 100644
--- a/ui/src/components/MacroStepCard.tsx
+++ b/ui/src/components/MacroStepCard.tsx
@@ -1,4 +1,4 @@
-import { LuArrowUp, LuArrowDown, LuX, LuTrash } from "react-icons/lu";
+import { LuArrowUp, LuArrowDown, LuX, LuTrash2 } from "react-icons/lu";
 
 import { Button } from "@/components/Button";
 import { Combobox } from "@/components/Combobox";
@@ -94,6 +94,12 @@ export function MacroStepCard({
     <Card className="p-4">
       <div className="mb-2 flex items-center justify-between">
         <div className="flex items-center gap-1.5">
+          <span className="flex h-6 w-5 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
+            {stepIndex + 1}
+          </span>
+        </div>
+
+        <div className="flex items-center space-x-2">
           <div className="flex items-center gap-1">
             <Button
               size="XS"
@@ -110,24 +116,19 @@ export function MacroStepCard({
               LeadingIcon={LuArrowDown}
             />
           </div>
-          <span className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
-            {stepIndex + 1}
-          </span>
-        </div>
-        
-        <div className="flex items-center space-x-2">
           {onDelete && (
             <Button
               size="XS"
-              theme="danger"
+              theme="light"
+              className="text-red-500 dark:text-red-400"
               text="Delete"
-              LeadingIcon={LuTrash}
+              LeadingIcon={LuTrash2}
               onClick={onDelete}
             />
           )}
         </div>
       </div>
-      
+
       <div className="space-y-4 mt-2">
         <div className="w-full flex flex-col gap-2">
           <FieldLabel label="Modifiers" />
@@ -137,7 +138,7 @@ export function MacroStepCard({
                 <span className="absolute -top-2.5 left-2 px-1 text-xs font-medium bg-white dark:bg-slate-800 text-slate-500 dark:text-slate-400">
                   {group}
                 </span>
-                <div className="flex flex-wrap gap-1">
+                <div className="flex flex-wrap gap-4 pt-1">
                   {mods.map(option => (
                     <Button
                       key={option.value}
@@ -164,31 +165,36 @@ export function MacroStepCard({
           <div className="flex items-center gap-1">
             <FieldLabel label="Keys" description={`Maximum ${MAX_KEYS_PER_STEP} keys per step.`} />
           </div>
-          <div className="flex flex-wrap gap-1 pb-2">
-            {ensureArray(step.keys).map((key, keyIndex) => (
-              <span
-                key={keyIndex}
-                className="inline-flex items-center rounded-md bg-blue-100 px-1 text-xs font-medium text-blue-800 dark:bg-blue-900/40 dark:text-blue-200"
-              >
-                <span className="px-1">
-                  {keyDisplayMap[key] || key}
+          {ensureArray(step.keys) && step.keys.length > 0 && (
+            <div className="flex flex-wrap gap-1 pb-2">
+              {step.keys.map((key, keyIndex) => (
+                <span
+                  key={keyIndex}
+                  className="inline-flex items-center py-0.5 rounded-md bg-blue-100 px-1 text-xs font-medium text-blue-800 dark:bg-blue-900/40 dark:text-blue-200"
+                >
+                  <span className="px-1">
+                    {keyDisplayMap[key] || key}
+                  </span>
+                  <Button
+                    size="XS"
+                    className=""
+                    theme="blank"
+                    onClick={() => {
+                      const newKeys = ensureArray(step.keys).filter((_, i) => i !== keyIndex);
+                      onKeySelect({ value: null, keys: newKeys });
+                    }}
+                    LeadingIcon={LuX}
+                  />
                 </span>
-                <Button
-                  size="XS"
-                  className=""
-                  theme="blank"
-                  onClick={() => {
-                    const newKeys = ensureArray(step.keys).filter((_, i) => i !== keyIndex);
-                    onKeySelect({ value: null, keys: newKeys });
-                  }}
-                  LeadingIcon={LuX}
-                />
-              </span>
-            ))}
-          </div>
+              ))}
+            </div>
+          )}
           <div className="relative w-full">
             <Combobox
-              onChange={(value: { value: string; label: string }) => onKeySelect(value)}
+              onChange={(value: { value: string; label: string }) => {
+                onKeySelect(value);
+                onKeyQueryChange('');
+              }}
               displayValue={() => keyQuery}
               onInputChange={onKeyQueryChange}
               options={getFilteredKeys}
@@ -204,7 +210,7 @@ export function MacroStepCard({
         
         <div className="w-full flex flex-col gap-1">
           <div className="flex items-center gap-1">
-            <FieldLabel label="Step Duration" info="The time to wait after pressing the keys in this step before moving to the next step. This helps ensure reliable key presses when automating keyboard input." />
+            <FieldLabel label="Step Duration" description="Time to wait before executing the next step." />
           </div>
           <div className="flex items-center gap-3">
             <SelectMenuBasic
diff --git a/ui/src/routes/devices.$id.settings.macros.edit.tsx b/ui/src/routes/devices.$id.settings.macros.edit.tsx
index c4b47c2..109cccc 100644
--- a/ui/src/routes/devices.$id.settings.macros.edit.tsx
+++ b/ui/src/routes/devices.$id.settings.macros.edit.tsx
@@ -1,6 +1,6 @@
 import { useNavigate, useParams } from "react-router-dom";
 import { useState, useEffect } from "react";
-import { LuTrash } from "react-icons/lu";
+import { LuTrash2 } from "react-icons/lu";
 
 import { KeySequence, useMacrosStore } from "@/hooks/stores";
 import { SettingsPageHeader } from "@/components/SettingsPageheader";
@@ -102,7 +102,7 @@ export default function SettingsMacrosEditRoute() {
           size="SM"
           theme="danger"
           text="Delete Macro"
-          LeadingIcon={LuTrash}
+          LeadingIcon={LuTrash2}
           onClick={() => setShowDeleteConfirm(true)}
           disabled={isDeleting}
         />
diff --git a/ui/src/routes/devices.$id.settings.macros.tsx b/ui/src/routes/devices.$id.settings.macros.tsx
index 744fd2a..5c4e352 100644
--- a/ui/src/routes/devices.$id.settings.macros.tsx
+++ b/ui/src/routes/devices.$id.settings.macros.tsx
@@ -1,6 +1,6 @@
 import { useEffect, Fragment, useMemo, useState, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
-import { LuPenLine, LuLoader, LuCopy, LuMoveRight, LuCornerDownRight, LuArrowUp, LuArrowDown, LuTrash } from "react-icons/lu";
+import { LuPenLine, LuCopy, LuMoveRight, LuCornerDownRight, LuArrowUp, LuArrowDown, LuTrash2, LuCommand } from "react-icons/lu";
 
 import { KeySequence, useMacrosStore, generateMacroId } from "@/hooks/stores";
 import { SettingsPageHeader } from "@/components/SettingsPageheader";
@@ -11,6 +11,7 @@ import { MAX_TOTAL_MACROS, COPY_SUFFIX } from "@/constants/macros";
 import { keyDisplayMap, modifierDisplayMap } from "@/keyboardMappings";
 import notifications from "@/notifications";
 import { ConfirmDialog } from "@/components/ConfirmDialog";
+import LoadingSpinner from "@/components/LoadingSpinner";
 
 const normalizeSortOrders = (macros: KeySequence[]): KeySequence[] => {
   return macros.map((macro, index) => ({
@@ -201,8 +202,9 @@ export default function SettingsMacrosRoute() {
             <div className="flex items-center gap-1 ml-4">
               <Button
                 size="XS"
-                theme="danger"
-                LeadingIcon={LuTrash}
+                className="text-red-500 dark:text-red-400"
+                theme="light"
+                LeadingIcon={LuTrash2}
                 onClick={() => {
                   setMacroToDelete(macro);
                   setShowDeleteConfirm(true);
@@ -254,7 +256,7 @@ export default function SettingsMacrosRoute() {
         <div className="flex items-center justify-between">
           <SettingsPageHeader
             title="Keyboard Macros"
-            description={`Create and manage keyboard macros for quick actions. Currently ${macros.length}/${MAX_TOTAL_MACROS} macros are active.`}
+            description={`Combine keystrokes into a single action for faster workflows.`}
           />
           { macros.length > 0 && (
             <div className="flex items-center pl-2">
@@ -274,16 +276,19 @@ export default function SettingsMacrosRoute() {
       <div className="space-y-4">
         {loading && macros.length === 0 ? (
           <EmptyCard
+            IconElm={LuCommand}
             headline="Loading macros..."
-            description="Please wait while we fetch your macros"
             BtnElm={
-              <LuLoader className="h-6 w-6 animate-spin text-blue-500" />
+              <div className="my-2 flex flex-col items-center space-y-2 text-center">
+                <LoadingSpinner className="h-6 w-6 text-blue-700 dark:text-blue-500" />
+              </div>
             }
           />
         ) : macros.length === 0 ? (
           <EmptyCard
-            headline="No macros yet"
-            description="Create keyboard macros for quick actions"
+            IconElm={LuCommand}
+            headline="Create Your First Macro"
+            description="Combine keystrokes into a single action for faster workflows."
             BtnElm={
               <Button
                 size="SM"