diff --git a/src/WordFrequencyDisplay.ts b/src/WordFrequencyDisplay.ts
index c3d024e..42cdd75 100644
--- a/src/WordFrequencyDisplay.ts
+++ b/src/WordFrequencyDisplay.ts
@@ -49,11 +49,16 @@ export class WordFrequencyDisplay {
     }
 
     createFilter(contentEl: HTMLElement) {
-        const filterContainer = contentEl.createEl('div');
-        const filterInput = filterContainer.createEl('input');
-        filterInput.setAttr('type', 'text');
-        filterInput.addClass(ELEMENT_CLASSES.filter);
-        filterInput.setAttr('placeholder', 'Type to filter results');
+        const filterContainer = contentEl.createEl('div', {
+            cls: ELEMENT_CLASSES.containerFilter,
+        });
+        const filterInput = filterContainer.createEl('input', {
+            cls: ELEMENT_CLASSES.filter,
+            attr: {
+                type: 'text',
+                placeholder: 'Type to filter results',
+            },
+        });
 
         const debouncedMethod = debounce((event: Event) => {
             const target = event.target as HTMLInputElement;
diff --git a/src/__tests__/WordFrequencyDisplay.test.ts b/src/__tests__/WordFrequencyDisplay.test.ts
index dd447df..66daa35 100644
--- a/src/__tests__/WordFrequencyDisplay.test.ts
+++ b/src/__tests__/WordFrequencyDisplay.test.ts
@@ -7,8 +7,10 @@ describe('WordFrequencyDisplay', () => {
     let blacklist: Set<string>;
     let display: WordFrequencyDisplay;
     let contentEl: HTMLElement;
+    let firstElement: HTMLElement;
     let mockPlugin: WordFrequencyPlugin;
     let mockView: WordFrequencyView;
+    let secondElement: HTMLElement;
 
     beforeEach(() => {
         mockPlugin = {
@@ -33,12 +35,20 @@ describe('WordFrequencyDisplay', () => {
             onClose: jest.fn(),
             updateContent: jest.fn(),
         } as unknown as WordFrequencyView;
+        secondElement = {
+            addClass: jest.fn(),
+            createEl: jest.fn(),
+            mockCallback: jest.fn(),
+            setAttr: jest.fn(),
+            setText: jest.fn(),
+        } as unknown as HTMLElement;
+        firstElement = {
+            createEl: jest.fn().mockReturnValue(secondElement),
+            setAttr: jest.fn(),
+            setText: jest.fn(),
+        } as unknown as HTMLElement;
         contentEl = {
-            createEl: jest.fn().mockReturnValue({
-                createEl: jest.fn().mockReturnThis(),
-                setAttr: jest.fn(),
-                setText: jest.fn(),
-            }),
+            createEl: jest.fn().mockReturnValue(firstElement),
         } as unknown as HTMLElement;
         blacklist = new Set(
             mockPlugin.settings.blacklist.split(',').map((word) => word.trim())
@@ -124,16 +134,42 @@ describe('WordFrequencyDisplay', () => {
         it.todo('should verify the button click event handles the word');
     });
 
+    describe('createFilter', () => {
+        it('should create an input element with a container', () => {
+            display.createFilter(contentEl);
+
+            expect(contentEl.createEl).toHaveBeenCalledWith('div', {
+                cls: ELEMENT_CLASSES.containerFilter,
+            });
+            expect(firstElement.createEl).toHaveBeenCalledWith('input', {
+                cls: ELEMENT_CLASSES.filter,
+                attr: {
+                    type: 'text',
+                    placeholder: 'Type to filter results',
+                },
+            });
+        });
+
+        it('should register a DOM event with the input element', () => {
+            display.createFilter(contentEl);
+
+            expect(mockPlugin.registerDomEvent).toHaveBeenCalledWith(
+                secondElement,
+                'input',
+                expect.any(Function)
+            );
+        });
+
+        it.todo('should update view content when the filter input changes');
+    });
+
     describe('createHeader', () => {
         it('should set text in the content', () => {
             display.createHeader(contentEl);
 
             expect(contentEl.createEl).toHaveBeenCalledWith('div');
-            const headerContainer = contentEl.createEl('div');
-            expect(headerContainer.createEl).toHaveBeenCalledWith('h4');
-            const headerElement = headerContainer.createEl('h4');
-            expect(headerElement.createEl).toHaveBeenCalledWith('h4');
-            expect(headerElement.setText).toHaveBeenCalledWith(PLUGIN_NAME);
+            expect(firstElement.createEl).toHaveBeenCalledWith('h4');
+            expect(secondElement.setText).toHaveBeenCalledWith(PLUGIN_NAME);
         });
     });
 
diff --git a/src/constants.ts b/src/constants.ts
index 6ad81cf..3a83ab0 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -12,6 +12,7 @@ export const ELEMENT_CLASSES = {
     containerButton: 'word-frequency-button-container',
     containerContent: 'word-frequency-sidebar-content',
     containerCount: 'word-frequency-count-container',
+    containerFilter: 'word-frequency-filter-container',
     containerRow: 'word-frequency-row',
     containerThreshold: 'word-frequency-threshold-display',
     containerWordList: 'word-frequency-word-list',