diff --git a/Website/components/attributes/ChoiceAttribute.tsx b/Website/components/attributes/ChoiceAttribute.tsx
index aa087fb..bb5e7c2 100644
--- a/Website/components/attributes/ChoiceAttribute.tsx
+++ b/Website/components/attributes/ChoiceAttribute.tsx
@@ -3,7 +3,7 @@ import { ChoiceAttributeType } from "@/lib/Types"
 import { formatNumberSeperator } from "@/lib/utils"
 import { CheckCircle, Circle, Square, CheckSquare } from "lucide-react"
 
-export default function ChoiceAttribute({ attribute }: { attribute: ChoiceAttributeType }) {
+export default function ChoiceAttribute({ attribute, highlightMatch, highlightTerm }: { attribute: ChoiceAttributeType, highlightMatch: (text: string, term: string) => string | React.JSX.Element, highlightTerm: string }) {
 
     const isMobile = useIsMobile();
 
@@ -39,7 +39,7 @@ export default function ChoiceAttribute({ attribute }: { attribute: ChoiceAttrib
                                             <Circle className="w-2 h-2 text-gray-400 md:w-3 md:h-3" />
                                         )
                                     )}
-                                    <span className="text-xs md:text-sm">{option.Name}</span>
+                                    <span className="text-xs md:text-sm">{highlightMatch(option.Name, highlightTerm)}</span>
                                 </div>
                                 {option.Color && (
                                     <div 
diff --git a/Website/components/datamodelview/Attributes.tsx b/Website/components/datamodelview/Attributes.tsx
index c89d934..92fef61 100644
--- a/Website/components/datamodelview/Attributes.tsx
+++ b/Website/components/datamodelview/Attributes.tsx
@@ -4,8 +4,9 @@ import { EntityType, AttributeType } from "@/lib/Types"
 import { TableHeader, TableRow, TableHead, TableBody, TableCell, Table } from "../ui/table"
 import { Button } from "../ui/button"
 import { useState } from "react"
-import { ArrowUpDown, ArrowUp, ArrowDown, EyeOff, Eye } from "lucide-react"
+import { ArrowUpDown, ArrowUp, ArrowDown, EyeOff, Eye, Search, X } from "lucide-react"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./../ui/select"
+import { Input } from "../ui/input"
 import { AttributeDetails } from "./../entity/AttributeDetails"
 import BooleanAttribute from "./../attributes/BooleanAttribute"
 import ChoiceAttribute from "./../attributes/ChoiceAttribute"
@@ -33,6 +34,7 @@ export const Attributes = ({ entity, onVisibleCountChange, search = "" }: IAttri
     const [sortDirection, setSortDirection] = useState<SortDirection>("asc")
     const [typeFilter, setTypeFilter] = useState<string>("all")
     const [hideStandardFields, setHideStandardFields] = useState<boolean>(true)
+    const [searchQuery, setSearchQuery] = useState("")
 
     const handleSort = (column: SortColumn) => {
         if (sortColumn === column) {
@@ -50,6 +52,21 @@ export const Attributes = ({ entity, onVisibleCountChange, search = "" }: IAttri
         }
     }
 
+    // Helper function to check if an attribute matches a search query
+    const attributeMatchesSearch = (attr: AttributeType, query: string): boolean => {
+        const basicMatch = attr.DisplayName.toLowerCase().includes(query) ||
+            attr.SchemaName.toLowerCase().includes(query) ||
+            (attr.Description && attr.Description.toLowerCase().includes(query));
+        
+        // Check options for ChoiceAttribute and StatusAttribute
+        let optionsMatch = false;
+        if (attr.AttributeType === 'ChoiceAttribute' || attr.AttributeType === 'StatusAttribute') {
+            optionsMatch = attr.Options.some(option => option.Name.toLowerCase().includes(query));
+        }
+        
+        return basicMatch || optionsMatch;
+    };
+
     const getSortedAttributes = () => {
         let filteredAttributes = entity.Attributes
 
@@ -57,13 +74,15 @@ export const Attributes = ({ entity, onVisibleCountChange, search = "" }: IAttri
             filteredAttributes = filteredAttributes.filter(attr => attr.AttributeType === typeFilter)
         }
 
-        // Filter by search prop (from parent)
+        if (searchQuery) {
+            const query = searchQuery.toLowerCase()
+            filteredAttributes = filteredAttributes.filter(attr => attributeMatchesSearch(attr, query))
+        }
+
+        // Also filter by parent search prop if provided
         if (search && search.length >= 3) {
-            const query = search.toLowerCase();
-            filteredAttributes = filteredAttributes.filter(attr => 
-                attr.DisplayName.toLowerCase().includes(query) ||
-                attr.SchemaName.toLowerCase().includes(query)
-            );
+            const query = search.toLowerCase()
+            filteredAttributes = filteredAttributes.filter(attr => attributeMatchesSearch(attr, query))
         }
 
         if (hideStandardFields) filteredAttributes = filteredAttributes.filter(attr => attr.IsCustomAttribute || attr.IsStandardFieldModified);
@@ -104,6 +123,7 @@ export const Attributes = ({ entity, onVisibleCountChange, search = "" }: IAttri
     }
 
     const sortedAttributes = getSortedAttributes();
+    const highlightTerm = searchQuery || search; // Use internal search or parent search for highlighting
 
     // Notify parent of visible count
     React.useEffect(() => {
@@ -134,35 +154,104 @@ export const Attributes = ({ entity, onVisibleCountChange, search = "" }: IAttri
     ]
 
     return <>
-        <div className="p-2 gap-2 border-b flex md:p-4 md:gap-4">
-            {/* Removed internal search input, now using parent search */}
-            <Select value={typeFilter} onValueChange={setTypeFilter}>
-                <SelectTrigger className="w-[120px] h-8 text-xs md:w-[200px] md:h-10 md:text-sm">
-                    <SelectValue placeholder="Filter by type" />
-                </SelectTrigger>
-                <SelectContent>
-                    {attributeTypes.map(type => (
-                        <SelectItem key={type} value={type} className="text-xs md:text-sm">
-                            {type === "all" ? "All Types" : type.replace("Attribute", "")}
-                        </SelectItem>
-                    ))}
-                </SelectContent>
-            </Select>
-            <Button
-                variant="destructive"
-                size="icon"
-                onClick={() => setHideStandardFields(!hideStandardFields)}
-                className="h-8 w-8 bg-gray-100 hover:bg-gray-300 text-gray-500 hover:text-gray-700 md:h-10 md:w-10"
-                title="Control customfields"
-            >
-                {
-                    hideStandardFields ? <EyeOff className="w-3 h-3 md:w-4 md:h-4" /> : <Eye className="w-3 h-3 md:w-4 md:h-4" />
-                }
-            </Button>
+        <div className="p-2 gap-2 border-b flex flex-col md:p-4 md:gap-4">
+            <div className="flex gap-2 md:gap-4">
+                <div className="relative flex-1">
+                    <Search className="absolute left-1.5 top-2 h-3 w-3 text-muted-foreground md:left-2 md:top-2.5 md:h-4 md:w-4" />
+                    <Input
+                        placeholder="Search attributes..."
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Escape') {
+                                setSearchQuery("")
+                            }
+                        }}
+                        className="pl-6 pr-8 h-8 text-xs md:pl-8 md:pr-10 md:h-10 md:text-sm"
+                    />
+                    {searchQuery && (
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => setSearchQuery("")}
+                            className="absolute right-1 top-1 h-6 w-6 text-gray-400 hover:text-gray-600 md:right-1 md:top-1.5 md:h-7 md:w-7"
+                            title="Clear search"
+                        >
+                            <X className="h-3 w-3 md:h-4 md:w-4" />
+                        </Button>
+                    )}
+                </div>
+                <Select value={typeFilter} onValueChange={setTypeFilter}>
+                    <SelectTrigger className="w-[120px] h-8 text-xs md:w-[200px] md:h-10 md:text-sm">
+                        <SelectValue placeholder="Filter by type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {attributeTypes.map(type => (
+                            <SelectItem key={type} value={type} className="text-xs md:text-sm">
+                                {type === "all" ? "All Types" : type.replace("Attribute", "")}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                <Button
+                    variant="destructive"
+                    size="icon"
+                    onClick={() => setHideStandardFields(!hideStandardFields)}
+                    className="h-8 w-8 bg-gray-100 hover:bg-gray-300 text-gray-500 hover:text-gray-700 md:h-10 md:w-10"
+                    title="Control customfields"
+                >
+                    {
+                        hideStandardFields ? <EyeOff className="w-3 h-3 md:w-4 md:h-4" /> : <Eye className="w-3 h-3 md:w-4 md:h-4" />
+                    }
+                </Button>
+                {(searchQuery || typeFilter !== "all") && (
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => {
+                            setSearchQuery("")
+                            setTypeFilter("all")
+                        }}
+                        className="h-8 w-8 text-gray-500 hover:text-gray-700 md:h-10 md:w-10"
+                        title="Clear filters"
+                    >
+                        <X className="h-3 w-3 md:h-4 md:w-4" />
+                    </Button>
+                )}
+            </div>
+            {search && search.length >= 3 && searchQuery && (
+                <div className="flex items-center gap-2 text-xs text-amber-700 bg-amber-50 border border-amber-200 px-2 py-1 rounded-md md:text-sm">
+                    <Search className="h-3 w-3 md:h-4 md:w-4" />
+                    <span>Warning: Global search &quot;{search}&quot; is also active</span>
+                </div>
+            )}
         </div>
         {sortedAttributes.length === 0 ? (
-            <div className="p-4 text-gray-500 text-center">
-                <p>No attributes available for this table</p>
+            <div className="p-8 text-center text-gray-500">
+                {searchQuery || typeFilter !== "all" ? (
+                    <div className="flex flex-col items-center gap-2">
+                        <p>
+                            {searchQuery && typeFilter !== "all" 
+                                ? `No ${typeFilter === "all" ? "" : typeFilter.replace("Attribute", "")} attributes found matching "${searchQuery}"`
+                                : searchQuery 
+                                    ? `No attributes found matching "${searchQuery}"`
+                                    : `No ${typeFilter === "all" ? "" : typeFilter.replace("Attribute", "")} attributes available`
+                            }
+                        </p>
+                        <Button
+                            variant="ghost"
+                            onClick={() => {
+                                setSearchQuery("")
+                                setTypeFilter("all")
+                            }}
+                            className="text-blue-600 hover:text-blue-700"
+                        >
+                            Clear filters
+                        </Button>
+                    </div>
+                ) : (
+                    <p>No attributes available for this table</p>
+                )}
             </div>
         ) : (
             <Table>
@@ -216,14 +305,16 @@ export const Attributes = ({ entity, onVisibleCountChange, search = "" }: IAttri
                             }`}
                         >
                             <TableCell className="break-words font-medium py-2 text-xs md:py-3 md:text-sm">
-                                {highlightMatch(attribute.DisplayName, search)}
+                                {highlightMatch(attribute.DisplayName, highlightTerm)}
                             </TableCell>
                             <TableCell className="break-words text-gray-600 py-2 text-xs md:py-3 md:text-sm">
-                                {highlightMatch(attribute.SchemaName, search)}
+                                {highlightMatch(attribute.SchemaName, highlightTerm)}
                             </TableCell>
-                            <TableCell className="break-words py-2 md:py-3">{getAttributeComponent(entity, attribute)}</TableCell>
+                            <TableCell className="break-words py-2 md:py-3">{getAttributeComponent(entity, attribute, highlightMatch, highlightTerm)}</TableCell>
                             <TableCell className="py-2 md:py-3"><AttributeDetails attribute={attribute} /></TableCell>
-                            <TableCell className="break-words text-gray-600 py-2 text-xs md:py-3 md:text-sm">{attribute.Description}</TableCell>
+                            <TableCell className="break-words text-gray-600 py-2 text-xs md:py-3 md:text-sm">
+                                {highlightMatch(attribute.Description ?? "", highlightTerm)}
+                            </TableCell>
                         </TableRow>
                     ))}
                 </TableBody>
@@ -232,12 +323,12 @@ export const Attributes = ({ entity, onVisibleCountChange, search = "" }: IAttri
     </>
 }
 
-function getAttributeComponent(entity: EntityType, attribute: AttributeType) {
+function getAttributeComponent(entity: EntityType, attribute: AttributeType, highlightMatch: (text: string, term: string) => string | React.JSX.Element, highlightTerm: string) {
     const key = `${attribute.SchemaName}-${entity.SchemaName}`;
 
     switch (attribute.AttributeType) {
         case 'ChoiceAttribute':
-            return <ChoiceAttribute key={key} attribute={attribute} />;
+            return <ChoiceAttribute key={key} attribute={attribute} highlightMatch={highlightMatch} highlightTerm={highlightTerm} />;
         case 'DateTimeAttribute':
             return <DateTimeAttribute key={key} attribute={attribute} />;
         case 'GenericAttribute':
diff --git a/Website/components/datamodelview/DatamodelView.tsx b/Website/components/datamodelview/DatamodelView.tsx
index a5df8c7..f570f7b 100644
--- a/Website/components/datamodelview/DatamodelView.tsx
+++ b/Website/components/datamodelview/DatamodelView.tsx
@@ -95,7 +95,7 @@ function DatamodelViewContent() {
 
     useEffect(() => {
         if (!workerRef.current) {
-            workerRef.current = new Worker(new URL("./searchWorker.js", import.meta.url));
+            workerRef.current = new Worker(new URL("./searchWorker.ts", import.meta.url));
         }
 
         // Initialize or re-initialize worker with groups when groups change
diff --git a/Website/components/datamodelview/Keys.tsx b/Website/components/datamodelview/Keys.tsx
index 9795319..610f494 100644
--- a/Website/components/datamodelview/Keys.tsx
+++ b/Website/components/datamodelview/Keys.tsx
@@ -50,6 +50,16 @@ function Keys({ entity, onVisibleCountChange, search = "" }: IKeysProps & { sear
             )
         }
 
+        // Also filter by parent search prop if provided
+        if (search && search.length >= 3) {
+            const query = search.toLowerCase()
+            filteredKeys = filteredKeys.filter(key => 
+                key.Name.toLowerCase().includes(query) ||
+                key.LogicalName.toLowerCase().includes(query) ||
+                key.KeyAttributes.some(attr => attr.toLowerCase().includes(query))
+            )
+        }
+
         if (!sortColumn || !sortDirection) return filteredKeys
 
         return [...filteredKeys].sort((a, b) => {
@@ -82,6 +92,7 @@ function Keys({ entity, onVisibleCountChange, search = "" }: IKeysProps & { sear
     }
 
     const sortedKeys = getSortedKeys();
+    const highlightTerm = searchQuery || search; // Use internal search or parent search for highlighting
 
     React.useEffect(() => {
         if (onVisibleCountChange) {
@@ -98,26 +109,50 @@ function Keys({ entity, onVisibleCountChange, search = "" }: IKeysProps & { sear
 
     return (
         <>
-            <div className="flex items-center gap-2 p-2 border-b border-gray-100 md:p-4 md:gap-4">
-                <div className="relative flex-1">
-                    <Search className="absolute left-1.5 top-2 h-3 w-3 text-gray-500 md:left-2 md:top-2.5 md:h-4 md:w-4" />
-                    <Input
-                        placeholder="Search keys..."
-                        value={searchQuery}
-                        onChange={(e) => setSearchQuery(e.target.value)}
-                        className="pl-6 h-8 text-xs md:pl-8 md:h-10 md:text-sm"
-                    />
+            <div className="flex flex-col gap-2 p-2 border-b border-gray-100 md:p-4 md:gap-4">
+                <div className="flex items-center gap-2 md:gap-4">
+                    <div className="relative flex-1">
+                        <Search className="absolute left-1.5 top-2 h-3 w-3 text-gray-500 md:left-2 md:top-2.5 md:h-4 md:w-4" />
+                        <Input
+                            placeholder="Search keys..."
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Escape') {
+                                    setSearchQuery("")
+                                }
+                            }}
+                            className="pl-6 pr-8 h-8 text-xs md:pl-8 md:pr-10 md:h-10 md:text-sm"
+                        />
+                        {searchQuery && (
+                            <Button
+                                variant="ghost"
+                                size="icon"
+                                onClick={() => setSearchQuery("")}
+                                className="absolute right-1 top-1 h-6 w-6 text-gray-400 hover:text-gray-600 md:right-1 md:top-1.5 md:h-7 md:w-7"
+                                title="Clear search"
+                            >
+                                <X className="h-3 w-3 md:h-4 md:w-4" />
+                            </Button>
+                        )}
+                    </div>
+                    {searchQuery && (
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => setSearchQuery("")}
+                            className="h-8 w-8 text-gray-500 hover:text-gray-700 md:h-10 md:w-10"
+                            title="Clear search"
+                        >
+                            <X className="h-3 w-3 md:h-4 md:w-4" />
+                        </Button>
+                    )}
                 </div>
-                {searchQuery && (
-                    <Button
-                        variant="ghost"
-                        size="icon"
-                        onClick={() => setSearchQuery("")}
-                        className="h-8 w-8 text-gray-500 hover:text-gray-700 md:h-10 md:w-10"
-                        title="Clear search"
-                    >
-                        <X className="h-3 w-3 md:h-4 md:w-4" />
-                    </Button>
+                {search && search.length >= 3 && searchQuery && (
+                    <div className="flex items-center gap-2 text-xs text-amber-700 bg-amber-50 border border-amber-200 px-2 py-1 rounded-md md:text-sm">
+                        <Search className="h-3 w-3 md:h-4 md:w-4" />
+                        <span>Warning: Global search &quot;{search}&quot; is also active</span>
+                    </div>
                 )}
             </div>
             <div className="overflow-x-auto">
@@ -180,10 +215,10 @@ function Keys({ entity, onVisibleCountChange, search = "" }: IKeysProps & { sear
                                     }`}
                                 >
                                     <TableCell className="break-words font-medium py-2 text-xs md:py-3 md:text-sm">
-                                        {highlightMatch(key.Name, search)}
+                                        {highlightMatch(key.Name, highlightTerm)}
                                     </TableCell>
                                     <TableCell className="break-words text-gray-600 py-2 text-xs md:py-3 md:text-sm">
-                                        {highlightMatch(key.LogicalName, search)}
+                                        {highlightMatch(key.LogicalName, highlightTerm)}
                                     </TableCell>
                                     <TableCell className="break-words py-2 md:py-3">
                                         <div className="flex flex-wrap gap-1">
@@ -192,7 +227,7 @@ function Keys({ entity, onVisibleCountChange, search = "" }: IKeysProps & { sear
                                                     key={i}
                                                     className="inline-flex items-center px-1.5 py-0.5 text-xs rounded-md font-medium bg-blue-50 text-blue-700 md:px-2 md:py-1 md:text-sm"
                                                 >
-                                                    {highlightMatch(attr, search)}
+                                                    {highlightMatch(attr, highlightTerm)}
                                                 </span>
                                             ))}
                                         </div>
diff --git a/Website/components/datamodelview/List.tsx b/Website/components/datamodelview/List.tsx
index cf1ce9d..9d5d054 100644
--- a/Website/components/datamodelview/List.tsx
+++ b/Website/components/datamodelview/List.tsx
@@ -129,10 +129,31 @@ export const List = ({ }: IListProps) => {
     }, [flatItems, rowVirtualizer]);
 
     useEffect(() => {
-        requestAnimationFrame(() => {
-            rowVirtualizer.measure();
-        });
-    }, [flatItems]);
+        // Only measure if we're not filtering - let the virtualizer handle filtered states naturally
+        if (!search || search.length < 3) {
+            requestAnimationFrame(() => {
+                rowVirtualizer.measure();
+            });
+        }
+    }, [flatItems, search, rowVirtualizer]);
+
+    // Handle scrolling to top when starting a search
+    const prevSearchLengthRef = useRef(search.length);
+    useEffect(() => {
+        const currentSearchLength = search.length;
+        const prevSearchLength = prevSearchLengthRef.current;
+        
+        // If we just crossed from < 3 to >= 3 characters (starting a search)
+        if (prevSearchLength < 3 && currentSearchLength >= 3) {
+            setTimeout(() => {
+                if (parentRef.current) {
+                    parentRef.current.scrollTop = 0;
+                }
+            }, 50); // Small delay to ensure virtualizer has processed the new items
+        }
+        
+        prevSearchLengthRef.current = currentSearchLength;
+    }, [search]);
 
     // Throttled scroll handler to reduce calculations
     const handleScroll = useCallback(() => {
@@ -210,8 +231,9 @@ export const List = ({ }: IListProps) => {
 
     return (
         <div ref={parentRef} style={{ height: '100vh', overflow: 'auto' }} className="p-6 relative">
-            {/* Add skeleton loading state */}
-            {flatItems.length === 0 && datamodelView.loading && (
+
+            {/* Show skeleton loading state only when initially loading */}
+            {flatItems.length === 0 && datamodelView.loading && (!search || search.length < 3) && (
                 <div className="space-y-8">
                     {[...Array(5)].map((_, i) => (
                         <div key={i} className="bg-white rounded-lg border border-gray-300 shadow-md animate-pulse">
@@ -227,6 +249,16 @@ export const List = ({ }: IListProps) => {
                     ))}
                 </div>
             )}
+
+            {/* Show no results message when searching but no items found */}
+            {flatItems.length === 0 && search && search.length >= 3 && (
+                <div className="flex flex-col items-center justify-center h-64 text-gray-500">
+                    <div className="text-lg font-medium mb-2">No tables found</div>
+                    <div className="text-sm text-center">
+                        No attributes match your search for &quot;{search}&quot;
+                    </div>
+                </div>
+            )}
             
             {/* Virtualized list */}
             <div
@@ -234,7 +266,7 @@ export const List = ({ }: IListProps) => {
                     height: `${rowVirtualizer.getTotalSize()}px`,
                     width: '100%',
                     position: 'relative',
-                    visibility: flatItems.length === 0 && datamodelView.loading ? 'hidden' : 'visible'
+                    visibility: flatItems.length === 0 ? 'hidden' : 'visible'
                 }}
             >
                 {rowVirtualizer.getVirtualItems().map((virtualItem) => {
diff --git a/Website/components/datamodelview/Relationships.tsx b/Website/components/datamodelview/Relationships.tsx
index 38cfe0c..b8782a1 100644
--- a/Website/components/datamodelview/Relationships.tsx
+++ b/Website/components/datamodelview/Relationships.tsx
@@ -65,6 +65,17 @@ export const Relationships = ({ entity, onVisibleCountChange, search = "" }: IRe
             )
         }
 
+        // Also filter by parent search prop if provided
+        if (search && search.length >= 3) {
+            const query = search.toLowerCase()
+            filteredRelationships = filteredRelationships.filter(rel => 
+                rel.Name.toLowerCase().includes(query) ||
+                rel.TableSchema.toLowerCase().includes(query) ||
+                rel.LookupDisplayName.toLowerCase().includes(query) ||
+                rel.RelationshipSchema.toLowerCase().includes(query)
+            )
+        }
+
         if (!sortColumn || !sortDirection) return filteredRelationships
 
         return [...filteredRelationships].sort((a, b) => {
@@ -118,6 +129,7 @@ export const Relationships = ({ entity, onVisibleCountChange, search = "" }: IRe
     ]
 
     const sortedRelationships = getSortedRelationships();
+    const highlightTerm = searchQuery || search; // Use internal search or parent search for highlighting
 
     React.useEffect(() => {
         if (onVisibleCountChange) {
@@ -126,41 +138,65 @@ export const Relationships = ({ entity, onVisibleCountChange, search = "" }: IRe
     }, [onVisibleCountChange, sortedRelationships.length]);
 
     return <>
-        <div className="p-2 gap-2 border-b flex md:p-4 md:gap-4">
-            <div className="relative flex-1">
-                <Search className="absolute left-1.5 top-2 h-3 w-3 text-muted-foreground md:left-2 md:top-2.5 md:h-4 md:w-4" />
-                <Input
-                    placeholder="Search relationships..."
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    className="pl-6 h-8 text-xs md:pl-8 md:h-10 md:text-sm"
-                />
+        <div className="p-2 gap-2 border-b flex flex-col md:p-4 md:gap-4">
+            <div className="flex gap-2 md:gap-4">
+                <div className="relative flex-1">
+                    <Search className="absolute left-1.5 top-2 h-3 w-3 text-muted-foreground md:left-2 md:top-2.5 md:h-4 md:w-4" />
+                    <Input
+                        placeholder="Search relationships..."
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Escape') {
+                                setSearchQuery("")
+                            }
+                        }}
+                        className="pl-6 pr-8 h-8 text-xs md:pl-8 md:pr-10 md:h-10 md:text-sm"
+                    />
+                    {searchQuery && (
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => setSearchQuery("")}
+                            className="absolute right-1 top-1 h-6 w-6 text-gray-400 hover:text-gray-600 md:right-1 md:top-1.5 md:h-7 md:w-7"
+                            title="Clear search"
+                        >
+                            <X className="h-3 w-3 md:h-4 md:w-4" />
+                        </Button>
+                    )}
+                </div>
+                <Select value={typeFilter} onValueChange={setTypeFilter}>
+                    <SelectTrigger className="w-[120px] h-8 text-xs md:w-[200px] md:h-10 md:text-sm">
+                        <SelectValue placeholder="Filter by type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {relationshipTypes.map(type => (
+                            <SelectItem key={type.value} value={type.value} className="text-xs md:text-sm">
+                                {type.label}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                {(searchQuery || typeFilter !== "all") && (
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => {
+                            setSearchQuery("")
+                            setTypeFilter("all")
+                        }}
+                        className="h-8 w-8 text-gray-500 hover:text-gray-700 md:h-10 md:w-10"
+                        title="Clear filters"
+                    >
+                        <X className="h-3 w-3 md:h-4 md:w-4" />
+                    </Button>
+                )}
             </div>
-            <Select value={typeFilter} onValueChange={setTypeFilter}>
-                <SelectTrigger className="w-[120px] h-8 text-xs md:w-[200px] md:h-10 md:text-sm">
-                    <SelectValue placeholder="Filter by type" />
-                </SelectTrigger>
-                <SelectContent>
-                    {relationshipTypes.map(type => (
-                        <SelectItem key={type.value} value={type.value} className="text-xs md:text-sm">
-                            {type.label}
-                        </SelectItem>
-                    ))}
-                </SelectContent>
-            </Select>
-            {(searchQuery || typeFilter !== "all") && (
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => {
-                        setSearchQuery("")
-                        setTypeFilter("all")
-                    }}
-                    className="h-8 w-8 text-gray-500 hover:text-gray-700 md:h-10 md:w-10"
-                    title="Clear filters"
-                >
-                    <X className="h-3 w-3 md:h-4 md:w-4" />
-                </Button>
+            {search && search.length >= 3 && searchQuery && (
+                <div className="flex items-center gap-2 text-xs text-amber-700 bg-amber-50 border border-amber-200 px-2 py-1 rounded-md md:text-sm">
+                    <Search className="h-3 w-3 md:h-4 md:w-4" />
+                    <span>Warning: Global search &quot;{search}&quot; is also active</span>
+                </div>
             )}
         </div>
         <div className="overflow-x-auto">
@@ -252,7 +288,7 @@ export const Relationships = ({ entity, onVisibleCountChange, search = "" }: IRe
                                 }`}
                             >
                                 <TableCell className="break-words py-2 text-xs md:py-3 md:text-sm">
-                                    {highlightMatch(relationship.Name, search)}
+                                    {highlightMatch(relationship.Name, highlightTerm)}
                                 </TableCell>
                                 <TableCell className="py-2 md:py-3">
                                     <Button
@@ -263,7 +299,7 @@ export const Relationships = ({ entity, onVisibleCountChange, search = "" }: IRe
                                             dispatch({ type: "SET_CURRENT_SECTION", payload: relationship.TableSchema })
                                             scrollToSection(relationship.TableSchema);
                                         }}>
-                                        {highlightMatch(relationship.TableSchema, search)}
+                                        {highlightMatch(relationship.TableSchema, highlightTerm)}
                                     </Button>
                                 </TableCell>
                                 <TableCell className="break-words py-2 text-xs md:py-3 md:text-sm">{relationship.LookupDisplayName}</TableCell>
diff --git a/Website/components/datamodelview/TimeSlicedSearch.tsx b/Website/components/datamodelview/TimeSlicedSearch.tsx
index 88f2dbd..009a6d6 100644
--- a/Website/components/datamodelview/TimeSlicedSearch.tsx
+++ b/Website/components/datamodelview/TimeSlicedSearch.tsx
@@ -30,6 +30,7 @@ export const TimeSlicedSearch = ({
   const [localValue, setLocalValue] = useState('');
   const [isTyping, setIsTyping] = useState(false);
   const [portalRoot, setPortalRoot] = useState<HTMLElement | null>(null);
+  const [lastValidSearch, setLastValidSearch] = useState('');
   const { isOpen } = useSidebar();
   const isMobile = useIsMobile();
   
@@ -46,11 +47,28 @@ export const TimeSlicedSearch = ({
       clearTimeout(searchTimeoutRef.current);
     }
 
+    // If we're going from a valid search to an invalid one, clear the search
+    if (value.length < 3 && lastValidSearch.length >= 3) {
+      onSearch('');
+      setLastValidSearch('');
+      setIsTyping(false);
+      onLoadingChange(false);
+      return;
+    }
+
+    // Don't search if less than 3 characters
+    if (value.length < 3) {
+      setIsTyping(false);
+      onLoadingChange(false);
+      return;
+    }
+
     searchTimeoutRef.current = window.setTimeout(() => {
       // Use MessageChannel for immediate callback without blocking main thread
       const channel = new MessageChannel();
       channel.port2.onmessage = () => {
         onSearch(value);
+        setLastValidSearch(value);
         
         // Reset typing state in next frame
         frameRef.current = requestAnimationFrame(() => {
@@ -59,7 +77,7 @@ export const TimeSlicedSearch = ({
       };
       channel.port1.postMessage(null);
     }, 350);
-  }, [onSearch]);
+  }, [onSearch, onLoadingChange, lastValidSearch]);
 
   const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
@@ -67,24 +85,36 @@ export const TimeSlicedSearch = ({
     // Immediate visual update (highest priority)
     setLocalValue(value);
     
-    // Manage typing state
-    if (!isTyping) {
-      setIsTyping(true);
-      onLoadingChange(true);
-    }
+    // Only manage typing state and loading for searches >= 3 characters
+    if (value.length >= 3) {
+      // Manage typing state
+      if (!isTyping) {
+        setIsTyping(true);
+        onLoadingChange(true);
+      }
 
-    // Reset typing timeout
-    if (typingTimeoutRef.current) {
-      clearTimeout(typingTimeoutRef.current);
+      // Reset typing timeout
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+      
+      // Auto-reset typing state if user stops typing
+      typingTimeoutRef.current = window.setTimeout(() => {
+        setIsTyping(false);
+      }, 2000);
+    } else {
+      // Clear typing state for short searches
+      setIsTyping(false);
+      onLoadingChange(false);
+      
+      // Clear any pending timeouts
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
     }
     
-    // Schedule search
+    // Schedule search (will handle short searches internally)
     scheduleSearch(value);
-    
-    // Auto-reset typing state if user stops typing
-    typingTimeoutRef.current = window.setTimeout(() => {
-      setIsTyping(false);
-    }, 2000);
 
   }, [isTyping, onLoadingChange, scheduleSearch]);
 
@@ -106,7 +136,13 @@ export const TimeSlicedSearch = ({
 
   // Handle keyboard navigation
   const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      setLocalValue('');
+      onSearch(''); // Only clear when explicitly using ESC
+      setIsTyping(false);
+      onLoadingChange(false);
+    } else if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       onNavigateNext?.();
       if ('vibrate' in navigator) {
@@ -125,7 +161,7 @@ export const TimeSlicedSearch = ({
       e.preventDefault();
       onNavigatePrevious?.();
     }
-  }, [onNavigateNext, onNavigatePrevious]);
+  }, [onNavigateNext, onNavigatePrevious, onSearch, onLoadingChange]);
 
   const hasResults = totalResults > 0;
   const showNavigation = hasResults && localValue.length >= 3;
@@ -193,7 +229,7 @@ export const TimeSlicedSearch = ({
           />
           {/* Clear button or loading indicator */}
           <div className="absolute right-3 top-1/2 transform -translate-y-1/2 flex justify-center items-center">
-            {isTyping ? (
+            {isTyping && localValue.length >= 3 ? (
               <div className="w-4 h-4 border-2 border-blue-400 border-t-transparent rounded-full animate-spin"></div>
             ) : localValue ? (
               <button
diff --git a/Website/components/datamodelview/searchWorker.js b/Website/components/datamodelview/searchWorker.js
deleted file mode 100644
index 2ac5573..0000000
--- a/Website/components/datamodelview/searchWorker.js
+++ /dev/null
@@ -1,65 +0,0 @@
-let groups = null;
-const CHUNK_SIZE = 20; // Process results in chunks
-
-self.onmessage = async function(e) {
-  if (e.data && e.data.type === 'init') {
-    groups = e.data.groups;
-    return;
-  }
-  
-  const search = (e.data || '').trim().toLowerCase();
-  if (!groups) {
-    self.postMessage({ type: 'results', data: [], complete: true });
-    return;
-  }
-
-  // First quickly send back a "started" message
-  self.postMessage({ type: 'started' });
-  
-  const allItems = [];
-  
-  // Find all matches
-  for (const group of groups) {
-    const filteredEntities = group.Entities.filter(entity => {
-      if (!search) return true;
-      const entityMatch = entity.SchemaName.toLowerCase().includes(search) ||
-        (entity.DisplayName && entity.DisplayName.toLowerCase().includes(search));
-      const attrMatch = entity.Attributes.some(attr =>
-        attr.SchemaName.toLowerCase().includes(search) ||
-        (attr.DisplayName && attr.DisplayName.toLowerCase().includes(search))
-      );
-      return entityMatch || attrMatch;
-    });
-    
-    if (filteredEntities.length > 0) {
-      allItems.push({ type: 'group', group });
-      for (const entity of filteredEntities) {
-        allItems.push({ type: 'entity', group, entity });
-      }
-    }
-  }
-  
-  // Send results in chunks to prevent UI blocking
-  for (let i = 0; i < allItems.length; i += CHUNK_SIZE) {
-    const chunk = allItems.slice(i, i + CHUNK_SIZE);
-    const isLastChunk = i + CHUNK_SIZE >= allItems.length;
-    
-    self.postMessage({
-      type: 'results',
-      data: chunk,
-      complete: isLastChunk,
-      progress: Math.min(100, Math.round((i + CHUNK_SIZE) / allItems.length * 100))
-    });
-    
-    // Small delay between chunks to let the UI breathe
-    if (!isLastChunk) {
-      // Use a proper yielding mechanism to let the UI breathe
-      await sleep(5);
-    }
-  }
-
-  // Helper function to pause execution for a specified duration
-  function sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-  }
-}; 
\ No newline at end of file
diff --git a/Website/components/datamodelview/searchWorker.ts b/Website/components/datamodelview/searchWorker.ts
new file mode 100644
index 0000000..433eef4
--- /dev/null
+++ b/Website/components/datamodelview/searchWorker.ts
@@ -0,0 +1,120 @@
+import { GroupType, EntityType, AttributeType } from "@/lib/Types";
+
+// Worker message types
+interface InitMessage {
+  type: 'init';
+  groups: GroupType[];
+}
+
+interface SearchMessage {
+  type: 'search';
+  data: string;
+}
+
+type WorkerMessage = InitMessage | SearchMessage | string;
+
+interface ResultsMessage {
+  type: 'results';
+  data: Array<
+    | { type: 'group'; group: GroupType }
+    | { type: 'entity'; group: GroupType; entity: EntityType }
+  >;
+  complete: boolean;
+  progress?: number;
+}
+
+interface StartedMessage {
+  type: 'started';
+}
+
+type WorkerResponse = ResultsMessage | StartedMessage;
+
+let groups: GroupType[] | null = null;
+const CHUNK_SIZE = 20; // Process results in chunks
+
+self.onmessage = async function(e: MessageEvent<WorkerMessage>) {
+  // Handle initialization
+  if (e.data && typeof e.data === 'object' && 'type' in e.data && e.data.type === 'init') {
+    groups = e.data.groups;
+    return;
+  }
+  
+  // Handle search
+  const search = (typeof e.data === 'string' ? e.data : e.data?.data || '').trim().toLowerCase();
+  
+  if (!groups) {
+    const response: WorkerResponse = { type: 'results', data: [], complete: true };
+    self.postMessage(response);
+    return;
+  }
+
+  // First quickly send back a "started" message
+  const startedMessage: WorkerResponse = { type: 'started' };
+  self.postMessage(startedMessage);
+  
+  const allItems: Array<
+    | { type: 'group'; group: GroupType }
+    | { type: 'entity'; group: GroupType; entity: EntityType }
+  > = [];
+  
+  // Find all matches
+  for (const group of groups) {
+    const filteredEntities = group.Entities.filter((entity: EntityType) => {
+      if (!search) return true;
+      
+      // Match entity schema or display name
+      const entityMatch = entity.SchemaName.toLowerCase().includes(search) ||
+        (entity.DisplayName && entity.DisplayName.toLowerCase().includes(search));
+      
+      // Match any attribute schema, display name, description, or option names
+      const attrMatch = entity.Attributes.some((attr: AttributeType) => {
+        const basicMatch = attr.SchemaName.toLowerCase().includes(search) ||
+          (attr.DisplayName && attr.DisplayName.toLowerCase().includes(search)) ||
+          (attr.Description && attr.Description.toLowerCase().includes(search));
+        
+        // Check options for ChoiceAttribute and StatusAttribute
+        let optionsMatch = false;
+        if (attr.AttributeType === 'ChoiceAttribute' || attr.AttributeType === 'StatusAttribute') {
+          optionsMatch = attr.Options.some(option => option.Name.toLowerCase().includes(search));
+        }
+        
+        return basicMatch || optionsMatch;
+      });
+      
+      return entityMatch || attrMatch;
+    });
+    
+    if (filteredEntities.length > 0) {
+      allItems.push({ type: 'group', group });
+      for (const entity of filteredEntities) {
+        allItems.push({ type: 'entity', group, entity });
+      }
+    }
+  }
+  
+  // Send results in chunks to prevent UI blocking
+  for (let i = 0; i < allItems.length; i += CHUNK_SIZE) {
+    const chunk = allItems.slice(i, i + CHUNK_SIZE);
+    const isLastChunk = i + CHUNK_SIZE >= allItems.length;
+    
+    const response: WorkerResponse = {
+      type: 'results',
+      data: chunk,
+      complete: isLastChunk,
+      progress: Math.min(100, Math.round((i + CHUNK_SIZE) / allItems.length * 100))
+    };
+    
+    self.postMessage(response);
+    
+    // Small delay between chunks to let the UI breathe
+    if (!isLastChunk) {
+      // Use a proper yielding mechanism to let the UI breathe
+      await sleep(5);
+    }
+  }
+};
+
+// Helper function to pause execution for a specified duration
+function sleep(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}