diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index b7baaeb..15c4605 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -14,10 +14,6 @@ on:
           - minor
           - major
 
-permissions:
-  contents: write
-  pull-requests: write
-
 jobs:
   release-please:
     runs-on: ubuntu-latest
@@ -36,13 +32,17 @@ jobs:
         with:
           node-version: '20'
 
-      - name: 🚀 Create Manual Release PR
+      - name: 🚀 Create Manual Release Commit
         if: github.event_name == 'workflow_dispatch'
         id: manual_release
         run: |
           npm install -g release-please
           npm install semver
           
+          # Configure git
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          
           # Get current version from manifest
           CURRENT_VERSION=$(cat .release-please-manifest.json | jq -r '.Website')
           echo "Current version: $CURRENT_VERSION"
@@ -57,19 +57,46 @@ jobs:
           
           echo "Next version will be: $NEXT_VERSION"
           
-          # Create release PR with specific version
-          release-please release-pr \
-            --repo-url="https://github.com/${{ github.repository }}" \
-            --config-file=release-please-config.json \
-            --manifest-file=.release-please-manifest.json \
-            --release-as=$NEXT_VERSION \
-            --skip-labeling \
-            --token=${{ secrets.GITHUB_TOKEN }}
-            
+          # Update version in package.json
+          cd Website
+          npm version $NEXT_VERSION --no-git-tag-version
+          cd ..
+          
+          # Update manifest file
+          jq --arg version "$NEXT_VERSION" '.Website = $version' .release-please-manifest.json > temp.json && mv temp.json .release-please-manifest.json
+          
+          # Generate changelog entry
+          echo "## [$NEXT_VERSION] - $(date +'%Y-%m-%d')" > temp_changelog.md
+          echo "" >> temp_changelog.md
+          echo "### Changed" >> temp_changelog.md
+          echo "- Manual ${{ github.event.inputs.release_type }} release" >> temp_changelog.md
+          echo "" >> temp_changelog.md
+          
+          # Prepend to existing changelog if it exists
+          if [ -f "Website/CHANGELOG.md" ]; then
+            cat temp_changelog.md Website/CHANGELOG.md > temp_full_changelog.md
+            mv temp_full_changelog.md Website/CHANGELOG.md
+          else
+            mv temp_changelog.md Website/CHANGELOG.md
+          fi
+          
+          # Commit and push changes
+          git add .
+          git commit -m "chore(release): release $NEXT_VERSION
+
+          Release type: ${{ github.event.inputs.release_type }}
+          Previous version: $CURRENT_VERSION
+          New version: $NEXT_VERSION"
+          
+          git push origin HEAD
+          
           echo "releases_created=true" >> $GITHUB_OUTPUT
+          echo "version=$NEXT_VERSION" >> $GITHUB_OUTPUT
 
       - name: 📝 Manual Release Summary
         if: github.event_name == 'workflow_dispatch'
         run: |
-          echo "✅ Manual release PR created with type: ${{ github.event.inputs.release_type }}"
-          echo "🔍 Check the Pull Requests tab for the release PR to review and merge."
+          echo "✅ Manual release commit created with type: ${{ github.event.inputs.release_type }}"
+          echo "🏷️ New version: ${{ steps.manual_release.outputs.version }}"
+          echo "📝 Changes have been committed and pushed to the current branch."
+          echo "🔗 View the commit: https://github.com/${{ github.repository }}/commit/$(git rev-parse HEAD)"
diff --git a/Generator/MetadataExtensions.cs b/Generator/MetadataExtensions.cs
index 03ec00a..3577e4d 100644
--- a/Generator/MetadataExtensions.cs
+++ b/Generator/MetadataExtensions.cs
@@ -58,11 +58,13 @@ private static bool StandardDescriptionHasChanged(this IEnumerable<(string Logic
                 return EnglishDefaultFields.Concat(new[] {
                     ("statuscode", "Status Reason", $"Reason for the status of the {entityDisplayName}"),
                     ("statecode", "Status Reason", $"Status of the {entityDisplayName}"),
+                    ("organizationid", "Organization", $"Unique identifier of the organization associated with the {entityDisplayName}."),
                 });
             default:
                 return EnglishDefaultFields.Concat(new[] {
                     ("statuscode", "Status Reason", $"Reason for the status of the {entityDisplayName}"),
                     ("statecode", "Status Reason", $"Status of the {entityDisplayName}"),
+                    ("organizationid", "Organization", $"Unique identifier of the organization associated with the {entityDisplayName}."),
                 }); ;
         }
     }
@@ -225,6 +227,7 @@ private static bool StandardDescriptionHasChanged(this IEnumerable<(string Logic
         ( "utcconversiontimezonecode", "Tidszonekode til UTC-konvertering", "Den tidszonekode, der var i brug ved oprettelse af posten." ),
         ( "utcconversiontimezonecode", "Tidszonekode for UTC-konvertering", "Den tidszonekode, der var i brug ved oprettelse af posten." ),
         ( "versionnumber", "Versionsnummer", "Versionsnummer" ),
-        ( "versionnumber", "Versionsnummer", "Versionsnummer for aktiviteten." )
+        ( "versionnumber", "Versionsnummer", "Versionsnummer for aktiviteten." ),
+        ( "organizationid", "Organisations-id", "Entydigt id for organisationen" ),
     };
 }
diff --git a/Website/components/attributes/BooleanAttribute.tsx b/Website/components/attributes/BooleanAttribute.tsx
index 43cace7..6570bb1 100644
--- a/Website/components/attributes/BooleanAttribute.tsx
+++ b/Website/components/attributes/BooleanAttribute.tsx
@@ -1,45 +1,49 @@
+import { useIsMobile } from "@/hooks/use-mobile";
 import { BooleanAttributeType } from "@/lib/Types"
 import { CheckCircle, Circle } from "lucide-react"
 
 export default function BooleanAttribute({ attribute }: { attribute: BooleanAttributeType }) {
+
+    const isMobile = useIsMobile();
+    
     return (
         <div className="flex flex-col gap-1">
             <div className="flex items-center gap-2">
-                <span className="font-bold">Boolean</span>
-                {attribute.DefaultValue !== null && (
-                    <span className="text-xs bg-green-100 text-green-700 px-1.5 py-0.5 rounded-full flex items-center gap-1">
-                        <CheckCircle className="w-3 h-3" />
+                <span className="font-semibold text-xs md:font-bold md:text-sm">Boolean</span>
+                {attribute.DefaultValue !== null && !isMobile && (
+                    <span className="text-xs bg-green-100 text-green-700 px-1 py-0.5 rounded-full flex items-center gap-1 md:px-1.5">
+                        <CheckCircle className="w-2 h-2 md:w-3 md:h-3" />
                         Default: {attribute.DefaultValue === true ? attribute.TrueLabel : attribute.FalseLabel}
                     </span>
                 )}
             </div>
             <div className="space-y-1">
-                <div className="flex items-center justify-between py-1">
+                <div className="flex items-center justify-between py-0.5 md:py-1">
                     <div className="flex items-center gap-1">
                         {attribute.DefaultValue === true ? (
-                            <CheckCircle className="w-3 h-3 text-green-600" />
+                            <CheckCircle className="w-2 h-2 text-green-600 md:w-3 md:h-3" />
                         ) : (
-                            <Circle className="w-3 h-3 text-gray-400" />
+                            <Circle className="w-2 h-2 text-gray-400 md:w-3 md:h-3" />
                         )}
-                        <span className="text-sm">{attribute.TrueLabel}</span>
+                        <span className="text-xs md:text-sm">{attribute.TrueLabel}</span>
                     </div>
                     <div className="flex items-center gap-2">
-                        <span className="text-xs bg-gray-200 text-gray-700 px-1.5 py-0.5 rounded font-mono">
+                        <span className="text-xs bg-gray-200 text-gray-700 px-1 py-0.5 rounded font-mono md:px-1.5">
                             True
                         </span>
                     </div>
                 </div>
-                <div className="flex items-center justify-between py-1">
+                <div className="flex items-center justify-between py-0.5 md:py-1">
                     <div className="flex items-center gap-1">
                         {attribute.DefaultValue === false ? (
-                            <CheckCircle className="w-3 h-3 text-green-600" />
+                            <CheckCircle className="w-2 h-2 text-green-600 md:w-3 md:h-3" />
                         ) : (
-                            <Circle className="w-3 h-3 text-gray-400" />
+                            <Circle className="w-2 h-2 text-gray-400 md:w-3 md:h-3" />
                         )}
-                        <span className="text-sm">{attribute.FalseLabel}</span>
+                        <span className="text-xs md:text-sm">{attribute.FalseLabel}</span>
                     </div>
                     <div className="flex items-center gap-2">
-                        <span className="text-xs bg-gray-200 text-gray-700 px-1.5 py-0.5 rounded font-mono">
+                        <span className="text-xs bg-gray-200 text-gray-700 px-1 py-0.5 rounded font-mono md:px-1.5">
                             False
                         </span>
                     </div>
diff --git a/Website/components/attributes/ChoiceAttribute.tsx b/Website/components/attributes/ChoiceAttribute.tsx
index 59717db..aa087fb 100644
--- a/Website/components/attributes/ChoiceAttribute.tsx
+++ b/Website/components/attributes/ChoiceAttribute.tsx
@@ -1,15 +1,19 @@
+import { useIsMobile } from "@/hooks/use-mobile"
 import { ChoiceAttributeType } from "@/lib/Types"
 import { formatNumberSeperator } from "@/lib/utils"
-import { CheckCircle, Circle } from "lucide-react"
+import { CheckCircle, Circle, Square, CheckSquare } from "lucide-react"
 
 export default function ChoiceAttribute({ attribute }: { attribute: ChoiceAttributeType }) {
+
+    const isMobile = useIsMobile();
+
     return (
         <div className="flex flex-col gap-1">
             <div className="flex items-center gap-2">
-                <span className="font-bold">{attribute.Type}-select</span>
-                {attribute.DefaultValue !== null && attribute.DefaultValue !== -1 && (
-                    <span className="text-xs bg-green-100 text-green-700 px-1.5 py-0.5 rounded-full flex items-center gap-1">
-                        <CheckCircle className="w-3 h-3" />
+                <span className="font-semibold text-xs md:font-bold md:text-sm">{attribute.Type}-select</span>
+                {attribute.DefaultValue !== null && attribute.DefaultValue !== -1 && !isMobile && (
+                    <span className="text-xs bg-green-100 text-green-700 px-1 py-0.5 rounded-full flex items-center gap-1 md:px-1.5">
+                        <CheckCircle className="w-2 h-2 md:w-3 md:h-3" />
                         Default: {attribute.Options.find(o => o.Value === attribute.DefaultValue)?.Name}
                     </span>
                 )}
@@ -17,32 +21,42 @@ export default function ChoiceAttribute({ attribute }: { attribute: ChoiceAttrib
             <div className="space-y-1">
                 {attribute.Options.map(option => (
                     <div key={option.Value}>
-                        <div className="flex items-center justify-between py-1">
+                        <div className="flex items-center justify-between py-0.5 md:py-1">
                             <div className="flex items-center gap-2">
                                 <div className="flex items-center gap-1">
-                                    {option.Value === attribute.DefaultValue ? (
-                                        <CheckCircle className="w-3 h-3 text-green-600" />
+                                    {attribute.Type === "Multi" ? (
+                                        // For multi-select, show checkboxes
+                                        option.Value === attribute.DefaultValue ? (
+                                            <CheckSquare className="w-2 h-2 text-green-600 md:w-3 md:h-3" />
+                                        ) : (
+                                            <Square className="w-2 h-2 text-gray-400 md:w-3 md:h-3" />
+                                        )
                                     ) : (
-                                        <Circle className="w-3 h-3 text-gray-400" />
+                                        // For single-select, show radio buttons
+                                        option.Value === attribute.DefaultValue ? (
+                                            <CheckCircle className="w-2 h-2 text-green-600 md:w-3 md:h-3" />
+                                        ) : (
+                                            <Circle className="w-2 h-2 text-gray-400 md:w-3 md:h-3" />
+                                        )
                                     )}
-                                    <span className="text-sm">{option.Name}</span>
+                                    <span className="text-xs md:text-sm">{option.Name}</span>
                                 </div>
                                 {option.Color && (
                                     <div 
-                                        className="w-3 h-3 rounded-full border border-gray-300 shadow-sm" 
+                                        className="w-2 h-2 rounded-full border border-gray-300 shadow-sm md:w-3 md:h-3" 
                                         style={{ backgroundColor: option.Color }}
                                         title={`Color: ${option.Color}`}
                                     />
                                 )}
                             </div>
                             <div className="flex items-center gap-2">
-                                <span className="text-xs bg-gray-200 text-gray-700 px-1.5 py-0.5 rounded font-mono">
+                                <span className="text-xs bg-gray-200 text-gray-700 px-1 py-0.5 rounded font-mono md:px-1.5">
                                     {formatNumberSeperator(option.Value)}
                                 </span>
                             </div>
                         </div>
                         {option.Description && (
-                            <div className="text-xs text-gray-600 italic pl-6 break-words">
+                            <div className="text-xs text-gray-600 italic pl-4 break-words md:pl-6">
                                 {option.Description}
                             </div>
                         )}
diff --git a/Website/components/attributes/DateTimeAttribute.tsx b/Website/components/attributes/DateTimeAttribute.tsx
index b5655a2..6d6b69c 100644
--- a/Website/components/attributes/DateTimeAttribute.tsx
+++ b/Website/components/attributes/DateTimeAttribute.tsx
@@ -1,5 +1,5 @@
 import { DateTimeAttributeType } from "@/lib/Types";
 
 export default function DateTimeAttribute({ attribute } : { attribute: DateTimeAttributeType }) {
-    return <><span className="font-bold">{attribute.Format}</span> - {attribute.Behavior}</>
+    return <><span className="font-semibold text-xs md:font-bold md:text-sm">{attribute.Format}</span> - <span className="text-xs md:text-sm">{attribute.Behavior}</span></>
 }
\ No newline at end of file
diff --git a/Website/components/attributes/DecimalAttribute.tsx b/Website/components/attributes/DecimalAttribute.tsx
index 2a9be40..cd73150 100644
--- a/Website/components/attributes/DecimalAttribute.tsx
+++ b/Website/components/attributes/DecimalAttribute.tsx
@@ -8,8 +8,8 @@ export default function MoneyAttribute({ attribute }: { attribute: DecimalAttrib
             : FormatDecimal
 
     return <>
-        <p><span className="font-bold">{attribute.Type}</span> ({formatNumber(attribute.MinValue)} to {formatNumber(attribute.MaxValue)})</p>
-        <p>Precision: {attribute.Precision}</p>
+        <p><span className="font-semibold text-xs md:font-bold md:text-sm">{attribute.Type}</span> <span className="text-xs md:text-sm">({formatNumber(attribute.MinValue)} to {formatNumber(attribute.MaxValue)})</span></p>
+        <p className="text-xs md:text-sm">Precision: {attribute.Precision}</p>
     </>
 }
 
diff --git a/Website/components/attributes/FileAttribute.tsx b/Website/components/attributes/FileAttribute.tsx
index 2afee50..39ba278 100644
--- a/Website/components/attributes/FileAttribute.tsx
+++ b/Website/components/attributes/FileAttribute.tsx
@@ -2,5 +2,5 @@ import { FileAttributeType } from "@/lib/Types";
 import { formatNumberSeperator } from "@/lib/utils";
 
 export default function FileAttribute({ attribute } : { attribute: FileAttributeType }) {
-    return <><span className="font-bold">File</span> (Max {formatNumberSeperator(attribute.MaxSize)}KB)</>
+    return <><span className="font-semibold text-xs md:font-bold md:text-sm">File</span> <span className="text-xs md:text-sm">(Max {formatNumberSeperator(attribute.MaxSize)}KB)</span></>
 }
\ No newline at end of file
diff --git a/Website/components/attributes/GenericAttribute.tsx b/Website/components/attributes/GenericAttribute.tsx
index b94090e..d0e0db1 100644
--- a/Website/components/attributes/GenericAttribute.tsx
+++ b/Website/components/attributes/GenericAttribute.tsx
@@ -1,5 +1,5 @@
 import { GenericAttributeType } from "@/lib/Types";
 
 export default function GenericAttribute({ attribute } : { attribute: GenericAttributeType }) {
-    return <span className="font-bold">{attribute.Type}</span>
+    return <span className="font-semibold text-xs md:font-bold md:text-sm">{attribute.Type}</span>
 }
\ No newline at end of file
diff --git a/Website/components/attributes/IntegerAttribute.tsx b/Website/components/attributes/IntegerAttribute.tsx
index a5a8ea5..8c72f40 100644
--- a/Website/components/attributes/IntegerAttribute.tsx
+++ b/Website/components/attributes/IntegerAttribute.tsx
@@ -2,7 +2,7 @@ import { IntegerAttributeType } from "@/lib/Types"
 import { formatNumberSeperator } from "@/lib/utils"
 
 export default function IntegerAttribute({ attribute } : { attribute: IntegerAttributeType }) {
-    return <><span className="font-bold">{attribute.Format}</span> ({FormatNumber(attribute.MinValue)} to {FormatNumber(attribute.MaxValue)})</>
+    return <><span className="font-semibold text-xs md:font-bold md:text-sm">{attribute.Format}</span> <span className="text-xs md:text-sm">({FormatNumber(attribute.MinValue)} to {FormatNumber(attribute.MaxValue)})</span></>
 }
 
 function FormatNumber(number: number) {
diff --git a/Website/components/attributes/LookupAttribute.tsx b/Website/components/attributes/LookupAttribute.tsx
index 54d53c4..4ac5f5d 100644
--- a/Website/components/attributes/LookupAttribute.tsx
+++ b/Website/components/attributes/LookupAttribute.tsx
@@ -6,26 +6,26 @@ export default function LookupAttribute({ attribute }: { attribute: LookupAttrib
 
     const { scrollToSection } = useDatamodelView();
 
-    return <>
-        <p className="font-bold">Lookup</p>
-        <div className="flex flex-wrap gap-1 mt-1">
+    return <div className="flex flex-wrap items-center gap-1 md:gap-2">
+        <p className="font-semibold text-xs md:font-bold md:text-sm">Lookup</p>
+        <div className="flex flex-wrap gap-1">
             {attribute.Targets
                 .map(target => target.IsInSolution ? 
                     <button
                         key={target.Name}
-                        className="h-6 px-2 text-xs flex items-center gap-1 hover:bg-blue-50 hover:border-blue-300 border border-gray-300 rounded-md bg-white shadow-sm"
+                        className="h-5 px-1.5 text-xs flex items-center gap-1 hover:bg-blue-50 hover:border-blue-300 border border-gray-300 rounded-md bg-white shadow-sm md:h-6 md:px-2"
                         onClick={() => scrollToSection(target.Name)}
                     >
-                        <FileSearch className="w-3 h-3" />
-                        {target.Name}
+                        <FileSearch className="w-2 h-2 md:w-3 md:h-3" />
+                        <span className="text-xs">{target.Name}</span>
                     </button> : 
                     <div 
                         key={target.Name} 
-                        className="h-6 px-2 text-xs flex items-center gap-1 bg-gray-100 text-gray-600 rounded border"
+                        className="h-5 px-1.5 text-xs flex items-center gap-1 bg-gray-100 text-gray-600 rounded border md:h-6 md:px-2"
                     >
-                        <FileX2 className="w-3 h-3" />
-                        {target.Name}
+                        <FileX2 className="w-2 h-2 md:w-3 md:h-3" />
+                        <span className="text-xs">{target.Name}</span>
                     </div>)}
         </div>
-    </>
+    </div>
 }
\ No newline at end of file
diff --git a/Website/components/attributes/StatusAttribute.tsx b/Website/components/attributes/StatusAttribute.tsx
index 889a5a0..41974bb 100644
--- a/Website/components/attributes/StatusAttribute.tsx
+++ b/Website/components/attributes/StatusAttribute.tsx
@@ -11,16 +11,16 @@ export default function StatusAttribute({ attribute }: { attribute: StatusAttrib
     }, {} as Record<string, StatusOption[]>)
 
     return (
-        <div className="flex flex-col gap-4">
-            <span className="font-bold">State/Status</span>
+        <div className="flex flex-col gap-2 md:gap-4">
+            <span className="font-semibold text-xs md:font-bold md:text-sm">State/Status</span>
             {Object.entries(groupedOptions).map(([state, options]) => (
                 <div key={state} className="flex flex-col gap-1">
-                    <span className="font-medium">{state}</span>
-                    <div className="grid grid-cols-[1fr_auto] gap-x-4 gap-y-1 pl-4">
+                    <span className="font-medium text-xs md:text-sm">{state}</span>
+                    <div className="grid grid-cols-[1fr_auto] gap-x-2 gap-y-1 pl-2 md:gap-x-4 md:pl-4">
                         {options.map(option => (
                             <div key={option.Value} className="contents">
-                                <span>{option.Name}</span>
-                                <span className="text-right">{formatNumberSeperator(option.Value)}</span>
+                                <span className="text-xs md:text-sm">{option.Name}</span>
+                                <span className="text-right text-xs md:text-sm">{formatNumberSeperator(option.Value)}</span>
                             </div>
                         ))}
                     </div>
diff --git a/Website/components/attributes/StringAttribute.tsx b/Website/components/attributes/StringAttribute.tsx
index a25b74b..2c2e461 100644
--- a/Website/components/attributes/StringAttribute.tsx
+++ b/Website/components/attributes/StringAttribute.tsx
@@ -4,5 +4,5 @@ import { StringAttributeType } from "@/lib/Types";
 import { formatNumberSeperator } from "@/lib/utils";
 
 export default function StringAttribute({ attribute } : { attribute: StringAttributeType }) {
-    return <><span className="font-bold">Text</span> ({formatNumberSeperator(attribute.MaxLength)}){attribute.Format !== "Text" ? ` - ${attribute.Format}` : ""}</>;
+    return <><span className="font-semibold text-xs md:font-bold md:text-sm">Text</span> <span className="text-xs md:text-sm">({formatNumberSeperator(attribute.MaxLength)}){attribute.Format !== "Text" ? ` - ${attribute.Format}` : ""}</span></>;
 }
\ No newline at end of file
diff --git a/Website/components/datamodelview/Attributes.tsx b/Website/components/datamodelview/Attributes.tsx
index e489037..6e18c35 100644
--- a/Website/components/datamodelview/Attributes.tsx
+++ b/Website/components/datamodelview/Attributes.tsx
@@ -125,23 +125,23 @@ export const Attributes = ({ entity }: IAttributeProps) => {
     ]
 
     return <>
-        <div className="p-4 border-b flex gap-4">
+        <div className="p-2 gap-2 border-b flex md:p-4 md:gap-4">
             <div className="relative flex-1">
-                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                <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)}
-                    className="pl-8"
+                    className="pl-6 h-8 text-xs md:pl-8 md:h-10 md:text-sm"
                 />
             </div>
             <Select value={typeFilter} onValueChange={setTypeFilter}>
-                <SelectTrigger className="w-[200px]">
+                <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}>
+                        <SelectItem key={type} value={type} className="text-xs md:text-sm">
                             {type === "all" ? "All Types" : type.replace("Attribute", "")}
                         </SelectItem>
                     ))}
@@ -151,11 +151,11 @@ export const Attributes = ({ entity }: IAttributeProps) => {
                 variant="destructive"
                 size="icon"
                 onClick={() => setHideStandardFields(!hideStandardFields)}
-                className="h-10 w-10 bg-gray-100 hover:bg-gray-300 text-gray-500 hover:text-gray-700"
+                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-4 h-4" /> : <Eye className="w-4 h-4" />
+                    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") && (
@@ -166,10 +166,10 @@ export const Attributes = ({ entity }: IAttributeProps) => {
                         setSearchQuery("")
                         setTypeFilter("all")
                     }}
-                    className="h-10 w-10 text-gray-500 hover:text-gray-700"
+                    className="h-8 w-8 text-gray-500 hover:text-gray-700 md:h-10 md:w-10"
                     title="Clear filters"
                 >
-                    <X className="h-4 w-4" />
+                    <X className="h-3 w-3 md:h-4 md:w-4" />
                 </Button>
             )}
         </div>
@@ -206,7 +206,7 @@ export const Attributes = ({ entity }: IAttributeProps) => {
                     <TableHeader>
                         <TableRow className="bg-gray-100 hover:bg-gray-100 border-b-2 border-gray-200">
                             <TableHead 
-                                className="w-[15%] text-black font-bold py-3 cursor-pointer hover:bg-gray-200"
+                                className="w-[15%] text-black font-semibold py-2 text-xs cursor-pointer hover:bg-gray-200 md:font-bold md:py-3 md:text-sm"
                                 onClick={() => handleSort('displayName')}
                             >
                                 <div className="flex items-center">
@@ -215,7 +215,7 @@ export const Attributes = ({ entity }: IAttributeProps) => {
                                 </div>
                             </TableHead>
                             <TableHead 
-                                className="w-[15%] text-black font-bold py-3 cursor-pointer hover:bg-gray-200"
+                                className="w-[15%] text-black font-semibold py-2 text-xs cursor-pointer hover:bg-gray-200 md:font-bold md:py-3 md:text-sm"
                                 onClick={() => handleSort('schemaName')}
                             >
                                 <div className="flex items-center">
@@ -224,7 +224,7 @@ export const Attributes = ({ entity }: IAttributeProps) => {
                                 </div>
                             </TableHead>
                             <TableHead 
-                                className="w-[30%] text-black font-bold py-3 cursor-pointer hover:bg-gray-200"
+                                className="w-[30%] text-black font-semibold py-2 text-xs cursor-pointer hover:bg-gray-200 md:font-bold md:py-3 md:text-sm"
                                 onClick={() => handleSort('type')}
                             >
                                 <div className="flex items-center">
@@ -232,9 +232,9 @@ export const Attributes = ({ entity }: IAttributeProps) => {
                                     <SortIcon column="type" />
                                 </div>
                             </TableHead>
-                            <TableHead className="w-[5%] text-black font-bold py-3">Details</TableHead>
+                            <TableHead className="w-[5%] text-black font-semibold py-2 text-xs md:font-bold md:py-3 md:text-sm">Details</TableHead>
                             <TableHead 
-                                className="w-[35%] text-black font-bold py-3 cursor-pointer hover:bg-gray-200"
+                                className="w-[35%] text-black font-semibold py-2 text-xs cursor-pointer hover:bg-gray-200 md:font-bold md:py-3 md:text-sm"
                                 onClick={() => handleSort('description')}
                             >
                                 <div className="flex items-center">
@@ -252,11 +252,11 @@ export const Attributes = ({ entity }: IAttributeProps) => {
                                     index % 2 === 0 ? 'bg-white' : 'bg-gray-50/50'
                                 }`}
                             >
-                                <TableCell className="break-words font-medium py-3">{attribute.DisplayName}</TableCell>
-                                <TableCell className="break-words text-gray-600 py-3">{attribute.SchemaName}</TableCell>
-                                <TableCell className="break-words py-3">{getAttributeComponent(entity, attribute)}</TableCell>
-                                <TableCell className="py-3"><AttributeDetails attribute={attribute} /></TableCell>
-                                <TableCell className="break-words text-gray-600 py-3">{attribute.Description}</TableCell>
+                                <TableCell className="break-words font-medium py-2 text-xs md:py-3 md:text-sm">{attribute.DisplayName}</TableCell>
+                                <TableCell className="break-words text-gray-600 py-2 text-xs md:py-3 md:text-sm">{attribute.SchemaName}</TableCell>
+                                <TableCell className="break-words py-2 md:py-3">{getAttributeComponent(entity, attribute)}</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>
                             </TableRow>
                         ))}
                     </TableBody>
diff --git a/Website/components/datamodelview/Keys.tsx b/Website/components/datamodelview/Keys.tsx
index bff96de..f8dcc2c 100644
--- a/Website/components/datamodelview/Keys.tsx
+++ b/Website/components/datamodelview/Keys.tsx
@@ -83,14 +83,14 @@ function Keys({ entity }: { entity: EntityType }) {
 
     return (
         <>
-            <div className="flex items-center gap-2 p-4 border-b border-gray-100">
+            <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-2 top-2.5 h-4 w-4 text-gray-500" />
+                    <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-8"
+                        className="pl-6 h-8 text-xs md:pl-8 md:h-10 md:text-sm"
                     />
                 </div>
                 {searchQuery && (
@@ -98,10 +98,10 @@ function Keys({ entity }: { entity: EntityType }) {
                         variant="ghost"
                         size="icon"
                         onClick={() => setSearchQuery("")}
-                        className="h-10 w-10 text-gray-500 hover:text-gray-700"
+                        className="h-8 w-8 text-gray-500 hover:text-gray-700 md:h-10 md:w-10"
                         title="Clear search"
                     >
-                        <X className="h-4 w-4" />
+                        <X className="h-3 w-3 md:h-4 md:w-4" />
                     </Button>
                 )}
             </div>
@@ -128,7 +128,7 @@ function Keys({ entity }: { entity: EntityType }) {
                         <TableHeader>
                             <TableRow className="bg-gray-100 hover:bg-gray-100 border-b-2 border-gray-200">
                                 <TableHead 
-                                    className="w-[25%] text-black font-bold py-3 cursor-pointer hover:bg-gray-200"
+                                    className="w-[25%] text-black font-semibold py-2 text-xs cursor-pointer hover:bg-gray-200 md:font-bold md:py-3 md:text-sm"
                                     onClick={() => handleSort('name')}
                                 >
                                     <div className="flex items-center">
@@ -137,7 +137,7 @@ function Keys({ entity }: { entity: EntityType }) {
                                     </div>
                                 </TableHead>
                                 <TableHead 
-                                    className="w-[25%] text-black font-bold py-3 cursor-pointer hover:bg-gray-200"
+                                    className="w-[25%] text-black font-semibold py-2 text-xs cursor-pointer hover:bg-gray-200 md:font-bold md:py-3 md:text-sm"
                                     onClick={() => handleSort('logicalName')}
                                 >
                                     <div className="flex items-center">
@@ -146,7 +146,7 @@ function Keys({ entity }: { entity: EntityType }) {
                                     </div>
                                 </TableHead>
                                 <TableHead 
-                                    className="w-[50%] text-black font-bold py-3 cursor-pointer hover:bg-gray-200"
+                                    className="w-[50%] text-black font-semibold py-2 text-xs cursor-pointer hover:bg-gray-200 md:font-bold md:py-3 md:text-sm"
                                     onClick={() => handleSort('attributes')}
                                 >
                                     <div className="flex items-center">
@@ -164,14 +164,14 @@ function Keys({ entity }: { entity: EntityType }) {
                                         index % 2 === 0 ? 'bg-white' : 'bg-gray-50/50'
                                     }`}
                                 >
-                                    <TableCell className="break-words font-medium py-3">{key.Name}</TableCell>
-                                    <TableCell className="break-words text-gray-600 py-3">{key.LogicalName}</TableCell>
-                                    <TableCell className="break-words py-3">
+                                    <TableCell className="break-words font-medium py-2 text-xs md:py-3 md:text-sm">{key.Name}</TableCell>
+                                    <TableCell className="break-words text-gray-600 py-2 text-xs md:py-3 md:text-sm">{key.LogicalName}</TableCell>
+                                    <TableCell className="break-words py-2 md:py-3">
                                         <div className="flex flex-wrap gap-1">
                                             {key.KeyAttributes.map((attr, i) => (
                                                 <span 
                                                     key={i}
-                                                    className="inline-flex items-center px-2 py-1 rounded-md text-sm font-medium bg-blue-50 text-blue-700"
+                                                    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"
                                                 >
                                                     {attr}
                                                 </span>
diff --git a/Website/components/datamodelview/Relationships.tsx b/Website/components/datamodelview/Relationships.tsx
index 499c1c0..8b48d73 100644
--- a/Website/components/datamodelview/Relationships.tsx
+++ b/Website/components/datamodelview/Relationships.tsx
@@ -115,23 +115,23 @@ export const Relationships = ({ entity }: IRelationshipsProps) => {
     ]
 
     return <>
-        <div className="p-4 border-b flex gap-4">
+        <div className="p-2 gap-2 border-b flex md:p-4 md:gap-4">
             <div className="relative flex-1">
-                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                <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-8"
+                    className="pl-6 h-8 text-xs md:pl-8 md:h-10 md:text-sm"
                 />
             </div>
             <Select value={typeFilter} onValueChange={setTypeFilter}>
-                <SelectTrigger className="w-[200px]">
+                <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}>
+                        <SelectItem key={type.value} value={type.value} className="text-xs md:text-sm">
                             {type.label}
                         </SelectItem>
                     ))}
@@ -145,10 +145,10 @@ export const Relationships = ({ entity }: IRelationshipsProps) => {
                         setSearchQuery("")
                         setTypeFilter("all")
                     }}
-                    className="h-10 w-10 text-gray-500 hover:text-gray-700"
+                    className="h-8 w-8 text-gray-500 hover:text-gray-700 md:h-10 md:w-10"
                     title="Clear filters"
                 >
-                    <X className="h-4 w-4" />
+                    <X className="h-3 w-3 md:h-4 md:w-4" />
                 </Button>
             )}
         </div>
@@ -185,7 +185,7 @@ export const Relationships = ({ entity }: IRelationshipsProps) => {
                     <TableHeader>
                         <TableRow className="bg-gray-100 hover:bg-gray-100 border-b-2 border-gray-200">
                             <TableHead 
-                                className="w-[15%] text-black font-bold py-3 cursor-pointer hover:bg-gray-200"
+                                className="w-[15%] text-black font-semibold py-2 text-xs cursor-pointer hover:bg-gray-200 md:font-bold md:py-3 md:text-sm"
                                 onClick={() => handleSort('name')}
                             >
                                 <div className="flex items-center">
@@ -194,7 +194,7 @@ export const Relationships = ({ entity }: IRelationshipsProps) => {
                                 </div>
                             </TableHead>
                             <TableHead 
-                                className="w-[15%] text-black font-bold py-3 cursor-pointer hover:bg-gray-200"
+                                className="w-[15%] text-black font-semibold py-2 text-xs cursor-pointer hover:bg-gray-200 md:font-bold md:py-3 md:text-sm"
                                 onClick={() => handleSort('tableSchema')}
                             >
                                 <div className="flex items-center">
@@ -203,7 +203,7 @@ export const Relationships = ({ entity }: IRelationshipsProps) => {
                                 </div>
                             </TableHead>
                             <TableHead 
-                                className="w-[15%] text-black font-bold py-3 cursor-pointer hover:bg-gray-200"
+                                className="w-[15%] text-black font-semibold py-2 text-xs cursor-pointer hover:bg-gray-200 md:font-bold md:py-3 md:text-sm"
                                 onClick={() => handleSort('lookupField')}
                             >
                                 <div className="flex items-center">
@@ -212,7 +212,7 @@ export const Relationships = ({ entity }: IRelationshipsProps) => {
                                 </div>
                             </TableHead>
                             <TableHead 
-                                className="w-[10%] text-black font-bold py-3 cursor-pointer hover:bg-gray-200"
+                                className="w-[10%] text-black font-semibold py-2 text-xs cursor-pointer hover:bg-gray-200 md:font-bold md:py-3 md:text-sm"
                                 onClick={() => handleSort('type')}
                             >
                                 <div className="flex items-center">
@@ -220,9 +220,9 @@ export const Relationships = ({ entity }: IRelationshipsProps) => {
                                     <SortIcon column="type" />
                                 </div>
                             </TableHead>
-                            <TableHead className="w-[25%] text-black font-bold py-3">Behavior</TableHead>
+                            <TableHead className="w-[25%] text-black font-semibold py-2 text-xs md:font-bold md:py-3 md:text-sm">Behavior</TableHead>
                             <TableHead 
-                                className="w-[20%] text-black font-bold py-3 cursor-pointer hover:bg-gray-200"
+                                className="w-[20%] text-black font-semibold py-2 text-xs cursor-pointer hover:bg-gray-200 md:font-bold md:py-3 md:text-sm"
                                 onClick={() => handleSort('schemaName')}
                             >
                                 <div className="flex items-center">
@@ -240,12 +240,12 @@ export const Relationships = ({ entity }: IRelationshipsProps) => {
                                     index % 2 === 0 ? 'bg-white' : 'bg-gray-50/50'
                                 }`}
                             >
-                                <TableCell className="break-words py-3">{relationship.Name}</TableCell>
-                                <TableCell className="py-3">
+                                <TableCell className="break-words py-2 text-xs md:py-3 md:text-sm">{relationship.Name}</TableCell>
+                                <TableCell className="py-2 md:py-3">
                                     <Button
                                         key={relationship.TableSchema}
                                         variant="ghost"
-                                        className="p-0 text-base text-blue-600 underline dark:text-blue-500 hover:no-underline break-words"
+                                        className="p-0 text-xs text-blue-600 underline dark:text-blue-500 hover:no-underline break-words md:text-base"
                                         onClick={() => {
                                             dispatch({ type: "SET_CURRENT_SECTION", payload: relationship.TableSchema })
                                             scrollToSection(relationship.TableSchema);
@@ -253,10 +253,10 @@ export const Relationships = ({ entity }: IRelationshipsProps) => {
                                         {relationship.TableSchema}
                                     </Button>
                                 </TableCell>
-                                <TableCell className="break-words py-3">{relationship.LookupDisplayName}</TableCell>
-                                <TableCell className="py-3">{relationship.IsManyToMany ? "N:N" : "1:N"}</TableCell>
-                                <TableCell className="py-3"><CascadeConfiguration config={relationship.CascadeConfiguration} /></TableCell>
-                                <TableCell className="break-words py-3">{relationship.RelationshipSchema}</TableCell>
+                                <TableCell className="break-words py-2 text-xs md:py-3 md:text-sm">{relationship.LookupDisplayName}</TableCell>
+                                <TableCell className="py-2 text-xs md:py-3 md:text-sm">{relationship.IsManyToMany ? "N:N" : "1:N"}</TableCell>
+                                <TableCell className="py-2 md:py-3"><CascadeConfiguration config={relationship.CascadeConfiguration} /></TableCell>
+                                <TableCell className="break-words py-2 text-xs md:py-3 md:text-sm">{relationship.RelationshipSchema}</TableCell>
                             </TableRow>
                         )}
                     </TableBody>
diff --git a/Website/components/datamodelview/SidebarDatamodelView.tsx b/Website/components/datamodelview/SidebarDatamodelView.tsx
index 16f3bf5..67936c2 100644
--- a/Website/components/datamodelview/SidebarDatamodelView.tsx
+++ b/Website/components/datamodelview/SidebarDatamodelView.tsx
@@ -1,12 +1,13 @@
-import { GroupType } from "@/lib/Types";
+import { EntityType, GroupType } from "@/lib/Types";
 import { Groups } from "../../generated/Data"
 import { useTouch } from '../ui/hybridtooltop';
 import { useSidebarDispatch } from '@/contexts/SidebarContext';
 import { cn } from "@/lib/utils";
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@radix-ui/react-collapsible";
 import { Slot } from "@radix-ui/react-slot";
-import { ChevronDown, Puzzle } from "lucide-react";
+import { ChevronDown, Puzzle, Search, X } from "lucide-react";
 import { useState, useEffect } from "react";
+import { Input } from "@/components/ui/input";
 import { useDatamodelView, useDatamodelViewDispatch } from "@/contexts/DatamodelViewContext";
 
 interface ISidebarDatamodelViewProps { 
@@ -24,10 +25,55 @@ export const SidebarDatamodelView = ({ }: ISidebarDatamodelViewProps) => {
     const { currentSection, currentGroup, scrollToSection } = useDatamodelView();
     const dataModelDispatch = useDatamodelViewDispatch();
     
+    const [searchTerm, setSearchTerm] = useState("");
+    const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
+    
     const setOpen = (state: boolean) => {
         dispatch({ type: "SET_OPEN", payload: state })
     }
 
+    // Search functionality
+    const handleSearch = (term: string) => {
+        setSearchTerm(term);
+        if (term.trim()) {
+            const newExpandedGroups = new Set<string>();
+            Groups.forEach(group => {
+                const hasMatchingEntity = group.Entities.some(entity => 
+                    entity.SchemaName.toLowerCase().includes(term.toLowerCase()) ||
+                    entity.DisplayName.toLowerCase().includes(term.toLowerCase())
+                );
+                if (hasMatchingEntity) {
+                    newExpandedGroups.add(group.Name);
+                }
+            });
+            setExpandedGroups(newExpandedGroups);
+        } else {
+            setExpandedGroups(new Set());
+        }
+    };
+
+    const clearSearch = () => {
+        setSearchTerm("");
+        setExpandedGroups(new Set());
+    };
+
+    const isEntityMatch = (entity: EntityType) => {
+        if (!searchTerm.trim()) return false;
+        return entity.SchemaName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+               entity.DisplayName.toLowerCase().includes(searchTerm.toLowerCase());
+    };
+
+    const highlightText = (text: string, searchTerm: string) => {
+        if (!searchTerm.trim()) return text;
+        const regex = new RegExp(`(${searchTerm})`, 'gi');
+        const parts = text.split(regex);
+        return parts.map((part, index) => 
+            regex.test(part) ? 
+                <mark key={index} className="bg-yellow-200 text-yellow-900 px-0.5 rounded">{part}</mark> : 
+                part
+        );
+    };
+
     const handleGroupClick = (groupName: string) => {
         dataModelDispatch({ type: "SET_CURRENT_GROUP", payload: groupName });
     };
@@ -37,27 +83,33 @@ export const SidebarDatamodelView = ({ }: ISidebarDatamodelViewProps) => {
             scrollToSection(sectionId);
         }
         if (isTouch) { setOpen(false); }
+        clearSearch();
     };
 
     const NavItem = ({ group }: INavItemProps) => {
         const isCurrentGroup = currentGroup?.toLowerCase() === group.Name.toLowerCase();
+        const shouldExpand = expandedGroups.has(group.Name);
 
         const [isExpanded, setIsExpanded] = useState(false)
     
         useEffect(() => {
-            setIsExpanded(isCurrentGroup)
-        }, [isCurrentGroup])
+            if (searchTerm.trim()) {
+                setIsExpanded(shouldExpand);
+            } else {
+                setIsExpanded(isCurrentGroup);
+            }
+        }, [isCurrentGroup, shouldExpand, searchTerm])
     
         return (
             <Collapsible
                 open={isExpanded}
                 onOpenChange={setIsExpanded}
-                className={`group/collapsible mx-1 ${isCurrentGroup ? "bg-sidebar-accent border-blue-500" : "border-transparent"} rounded-md transition-colors w-full`}
+                className={`group/collapsible ${isCurrentGroup ? "bg-sidebar-accent border-blue-500" : "border-transparent"} rounded-md transition-colors w-full m-0 pl-2`}
             >
                 <div className="relative flex w-full min-w-0 flex-col p-0">
                     <Slot
                         className={cn(
-                            "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-semibold text-sidebar-foreground/80 outline-none ring-sidebar-ring transition-all focus-visible:ring-2 cursor-pointer w-full",
+                            "duration-200 flex h-8 shrink-0 items-center bg-white rounded-md text-xs font-semibold text-sidebar-foreground/80 outline-none ring-sidebar-ring transition-all focus-visible:ring-2 cursor-pointer w-full",
                             isCurrentGroup ? "bg-blue-100 text-blue-900" : "hover:bg-sidebar-accent hover:text-sidebar-primary"
                         )}
                     >
@@ -69,7 +121,7 @@ export const SidebarDatamodelView = ({ }: ISidebarDatamodelViewProps) => {
                             )}
                             data-state={isExpanded ? 'open' : 'closed'}
                         >
-                            <span className="flex-1 font-semibold text-sm text-left truncate">{group.Name}</span>
+                            <span className="flex-1 font-medium text-sm text-left truncate">{group.Name}</span>
                             <p className="ml-auto font-semibold text-xs opacity-70">{group.Entities.length}</p>
                             <ChevronDown className={cn("mr-1 w-4 h-4 transition-transform", isExpanded ? "rotate-180" : "")} onClick={() => handleGroupClick(group.Name)}/>
                         </CollapsibleTrigger>
@@ -78,18 +130,28 @@ export const SidebarDatamodelView = ({ }: ISidebarDatamodelViewProps) => {
                         <div className="flex flex-col w-full gap-1 py-1">
                             {group.Entities.map(entity => {
                                 const isCurrentSection = currentSection?.toLowerCase() === entity.SchemaName.toLowerCase()
+                                const isMatch = isEntityMatch(entity);
+                                
+                                // If searching and this entity doesn't match, don't render it
+                                if (searchTerm.trim() && !isMatch) {
+                                    return null;
+                                }
+                                
                                 return (
                                     <button
                                         className={cn(
                                             "flex items-center gap-2 rounded-full px-3 py-1 cursor-pointer transition-colors text-xs font-medium",
                                             "hover:bg-blue-50 hover:text-blue-900 text-sidebar-foreground/60",
-                                            isCurrentSection ? "bg-blue-100 text-blue-900" : ""
+                                            isCurrentSection ? "bg-blue-100 text-blue-900" : "",
+                                            isMatch ? "ring-1 ring-yellow-300" : ""
                                         )}
                                         key={entity.SchemaName}
                                         onClick={() => handleSectionClick(entity.SchemaName)}
                                     >
                                         {entity.IconBase64 ? <img className="h-4 w-4" src={`data:image/svg+xml;base64,${entity.IconBase64}`} alt="icon" /> : <Puzzle className="w-4 h-4" />}
-                                        <span className="truncate">{entity.DisplayName}</span>
+                                        <span className="truncate">
+                                            {isMatch ? highlightText(entity.DisplayName, searchTerm) : entity.DisplayName}
+                                        </span>
                                     </button>
                                 )
                             })}
@@ -102,7 +164,30 @@ export const SidebarDatamodelView = ({ }: ISidebarDatamodelViewProps) => {
 
     return (
         <div className="flex flex-col">
-            <div className='h-full gap-1 flex flex-col max-w-48 overflow-y-auto overflow-x-hidden mt-4'> 
+            {/* Search Bar */}
+            <div className="px-2 pb-3">
+                <div className="relative mt-2">
+                    <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+                    <Input
+                        type="text"
+                        placeholder="Search entities..."
+                        aria-label="Search entities"
+                        value={searchTerm}
+                        onChange={(e) => handleSearch(e.target.value)}
+                        className="pl-8 pr-8 h-8 text-xs"
+                    />
+                    {searchTerm && (
+                        <button
+                            onClick={clearSearch}
+                            className="absolute right-2 top-1/2 transform -translate-y-1/2 p-0.5 rounded hover:bg-gray-100"
+                        >
+                            <X className="w-3 h-3 text-gray-400" />
+                        </button>
+                    )}
+                </div>
+            </div>
+            
+            <div className='h-full gap-1 flex flex-col max-w-48 overflow-y-auto overflow-x-hidden'> 
                 {
                     Groups.map((group) => 
                         <NavItem key={group.Name} group={group} />