diff --git a/src/ui/src/core_components/content/CoreDataframe.vue b/src/ui/src/core_components/content/CoreDataframe.vue
index a874b03c2..f4dcba5c3 100644
--- a/src/ui/src/core_components/content/CoreDataframe.vue
+++ b/src/ui/src/core_components/content/CoreDataframe.vue
@@ -4,7 +4,8 @@
 			<div v-if="fields.enableSearch.value === 'yes'">
 				<WdsTextInput
 					class="search"
-					placeholder="Search..."
+					placeholder="Search"
+					left-icon="search"
 					@change="handleSearchChange"
 				/>
 			</div>
@@ -316,7 +317,7 @@ const slicedTable = computed(() => {
 
 const gridStyle = computed(() => {
 	const fontStyle = fields.fontStyle.value;
-	let templateColumns: string, maxHeight: number;
+	let templateColumns: string;
 
 	if (columnWidths.value.length == 0) {
 		templateColumns = `repeat(${columnCount.value}, minmax(min-content, 1fr))`;
@@ -342,7 +343,7 @@ const endpointStyle = computed(() => {
 	};
 });
 
-function handleScroll(ev: Event) {
+function handleScroll() {
 	const scrollTop = gridContainerEl.value.scrollTop;
 	relativePosition.value =
 		scrollTop /
@@ -395,7 +396,7 @@ function handleSetOrder(ev: MouseEvent, columnName: string) {
 	};
 }
 
-function getIndexFromArrowTable(table: Table<any>) {
+function getIndexFromArrowTable(table: Table) {
 	const pandasMetadataJSON = table.schema.metadata.get("pandas");
 	if (!pandasMetadataJSON) return [];
 	const pandasMetadata = JSON.parse(pandasMetadataJSON);
@@ -442,7 +443,7 @@ async function applyOrder() {
 		return;
 	}
 
-	let orderCriterion: any;
+	let orderCriterion: string | object;
 
 	if (orderSetting.value.descending) {
 		orderCriterion = aq.desc(orderSetting.value.columnName);
diff --git a/src/ui/src/wds/WdsTextInput.vue b/src/ui/src/wds/WdsTextInput.vue
index bcbfc58c6..81712ee23 100644
--- a/src/ui/src/wds/WdsTextInput.vue
+++ b/src/ui/src/wds/WdsTextInput.vue
@@ -1,13 +1,35 @@
 <template>
-	<input v-model="model" type="text" />
+	<div
+		v-if="leftIcon"
+		class="WdsTextInput WdsTextInput--leftIcon"
+		@click="input.focus()"
+	>
+		<i class="material-symbols-outlined">{{ leftIcon }}</i>
+		<input
+			ref="input"
+			v-model="model"
+			type="text"
+			:placeholder="placeholder"
+		/>
+	</div>
+	<input v-else v-model="model" type="text" class="WdsTextInput" />
 </template>
 
 <script setup lang="ts">
-const model = defineModel<string>();
+import { ref } from "vue";
+
+const model = defineModel({ type: String });
+
+defineProps({
+	leftIcon: { type: String, required: false, default: undefined },
+	placeholder: { type: String, required: false, default: undefined },
+});
+
+const input = ref();
 </script>
 
 <style scoped>
-input {
+.WdsTextInput {
 	width: 100%;
 	margin: 0;
 	border: 1px solid var(--separatorColor);
@@ -19,8 +41,28 @@ input {
 	background: transparent;
 }
 
-input:focus {
+.WdsTextInput:focus,
+.WdsTextInput--leftIcon:focus-within {
 	border: 1px solid var(--softenedAccentColor);
 	box-shadow: 0px 0px 0px 3px rgba(81, 31, 255, 0.05);
 }
+
+.WdsTextInput--leftIcon {
+	cursor: pointer;
+	display: flex;
+	gap: 8px;
+}
+
+.WdsTextInput--leftIcon i {
+	color: #4f4f4f;
+}
+
+.WdsTextInput--leftIcon input {
+	border: none;
+}
+.WdsTextInput--leftIcon input:focus {
+	border: none;
+	box-shadow: none;
+	outline: none;
+}
 </style>