diff --git a/.github/workflows/dev.yml b/.github/workflows/dev.yml
index e8054ba..9bc1649 100644
--- a/.github/workflows/dev.yml
+++ b/.github/workflows/dev.yml
@@ -13,18 +13,17 @@ permissions:
 env:
 
   # Permission
-  # Need more permissive token
   GITHUB_TOKEN: ${{ secrets.NUGETKEY }}
-  PACKAGES_TOKEN: ${{ secrets.NUGETKEY }}
+  TEL_GIT_PACKAGES_TOKEN: ${{ secrets.NUGETKEY }}
   GITHUB_USERNAME: "Phil-NHS"
 
   # Nuget Set Up
-  TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH: ${{ github.workspace }}/CICDPackageLocation
-  TELBLAZOR_PACKAGE_SOURCE: "https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json"
+  NUGET_PACKAGES_OUTPUT_PATH: ${{ github.workspace }}/CICDPackageLocation
+  LOCAL_PACKAGES_PATH : ${{ github.workspace }}/CICDPackageLocation
+  TEL_GIT_PACKAGE_SOURCE: "https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json"
   
   # Build Set Up
   USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE: false
-  DISABLE_PACKAGE_GENERATION: false
 
 jobs:
 
@@ -33,6 +32,9 @@ jobs:
     uses: ./.github/workflows/reuseable-ci-checks.yml
     with:
       runall: true
+      # Commit being run against
+      base_sha: ${{ github.event.before }}
+      head_sha: ${{ github.event.after }}
     secrets:
       # Dev
       UNITTESTS_APPSETTINGS_DEVELOPMENT: ${{ secrets.UNITTESTS_APPSETTINGS_DEVELOPMENT }}
@@ -41,13 +43,14 @@ jobs:
       WASMSERVERHOST_APPSETTINGS_DEVELOPMENT: ${{ secrets.WASMSERVERHOST_APPSETTINGS_DEVELOPMENT }}
       
       # Token
-      PACKAGES_TOKEN: ${{secrets.NUGETKEY }}
+      TEL_GIT_PACKAGES_TOKEN: ${{secrets.NUGETKEY }}
       
       # Prod
       UNITTESTS_APPSETTINGS_PRODUCTION: ${{ secrets.UNITTESTS_APPSETTINGS_PRODUCTION }}
       WASMSTATICCLIENT_APPSETTINGS_PRODUCTION: ${{ secrets.WASMSTATICCLIENT_APPSETTINGS_PRODUCTION }}
       WASMSERVERHOSTCLIENT_APPSETTINGS_PRODUCTION: ${{ secrets.WASMSERVERHOSTCLIENT_APPSETTINGS_PRODUCTION }}
       WASMSERVERHOST_APPSETTINGS_PRODUCTION: ${{ secrets.WASMSERVERHOST_APPSETTINGS_PRODUCTION }}
+      
 
 
   # Now we've done due diligence
@@ -150,8 +153,13 @@ jobs:
       - name: Debug version output DEV_TELBLAZOR_PACKAGE_VERSION
         run: echo "Extracted Version $DEV_TELBLAZOR_PACKAGE_VERSION "
         
+      - name: Replace nuget.config with CI template
+        run: |
+          rm -f nuget.config
+          cp nuget.config.cicd nuget.config
+    
       - name: Replace local environment variable in nuget config because cant provide it as a parameter
-        run: sed -i "s|%TELBlazorPackageSource%|$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH|g" nuget.config
+        run: sed -i "s|%TEL_BLAZOR_PACKAGE_SOURCE%|$LOCAL_PACKAGES_PATH|g" nuget.config
        
       - name: Create appsettings development from secrets
         run: |
@@ -187,20 +195,18 @@ jobs:
         #CI is an install that adheres to package-lock
       
       - name: Build TELBlazor.Components (it publishes on build)
-        env:
-          DISABLE_PACKAGE_GENERATION: false
         run: |
           dotnet build TELBlazor.Components -c Release \
             /p:TELBlazorPackageVersion=$DEV_TELBLAZOR_PACKAGE_VERSION \
-            /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
+            /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
             /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-            /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION
+            /p:DisablePackageGeneration=false
  
       - name: Publish to TechnologyEnhancedLearning as a Dev Package
         run: |
-          dotnet nuget push "$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH/TELBlazor.Components.*.nupkg" \
-          --source "$TELBLAZOR_PACKAGE_SOURCE" \
-          --api-key $PACKAGES_TOKEN \
+          dotnet nuget push "$NUGET_PACKAGES_OUTPUT_PATH/TELBlazor.Components.*.nupkg" \
+          --source $TEL_GIT_PACKAGE_SOURCE \
+          --api-key $TEL_GIT_PACKAGES_TOKEN \
           --skip-duplicate      
           
   
@@ -228,12 +234,17 @@ jobs:
           echo "Cleaning the solution..."
           dotnet clean TELBlazor.sln
           
-        
+      - name: Replace nuget.config with CI template
+        run: |
+          rm -f nuget.config
+          cp nuget.config.cicd nuget.config
+    
       - name: Replace local environment variable in nuget config because cant provide it as a parameter
         run: |
-          sed -i "s|%TELBlazorPackageSource%|$TELBLAZOR_PACKAGE_SOURCE|g" nuget.config
+          sed -i "s|%TEL_BLAZOR_PACKAGE_SOURCE%|$TEL_GIT_PACKAGE_SOURCE|g" nuget.config
           sed -i "s|%GITHUB_USERNAME%|$GITHUB_USERNAME|g" nuget.config
-          sed -i "s|%GITHUB_PACKAGES_TOKEN%|$PACKAGES_TOKEN|g" nuget.config
+          sed -i "s|%TEL_GIT_PACKAGES_TOKEN%|$TEL_GIT_PACKAGES_TOKEN|g" nuget.config
+
         
       - name: debug DEV_TELBLAZOR_PACKAGE_VERSION
         run: |
@@ -257,7 +268,7 @@ jobs:
             printf '%s' "${paths[$path]}" > "$path"
           done        
           
-      - name: Clean lock files because the newly generated package file will superseed the locks
+      - name: Clean lock files because the newly generated package file will supersede the locks
         run: |
           echo "Listing packages.lock.json files:"
           find . -name "packages.lock.json" -type f -print
@@ -277,24 +288,20 @@ jobs:
         run: npm ci   
 
       - name: Build solution without generating new package
-        env:
-              #Overwrite package generation
-          DISABLE_PACKAGE_GENERATION: true
         run: |
           dotnet build TELBlazor.sln -c Release \
             /p:TELBlazorPackageVersion=$DEV_TELBLAZOR_PACKAGE_VERSION \
-            /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
+            /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
             /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-            /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE \
-            /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION
+            /p:DisablePackageGeneration=true
 
       - name: Publish WasmStaticClient
         run: |
           dotnet publish ./TELBlazor.Components.ShowCase.WasmStaticClient/TELBlazor.Components.ShowCase.WasmStaticClient.csproj --configuration Release \
             /p:TELBlazorPackageVersion=$DEV_TELBLAZOR_PACKAGE_VERSION \
-            /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
+            /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
             /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-            /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE
+            /p:DisablePackageGeneration=true
 
       #include hidden so we get jekyll
       - name: Creating artifact of publish folder for test gh page workflow
@@ -331,7 +338,7 @@ jobs:
           curl -L \
             -X POST \
             -H "Accept: application/vnd.github+json" \
-            -H "Authorization: Bearer $PACKAGES_TOKEN" \
+            -H "Authorization: Bearer $TEL_GIT_PACKAGES_TOKEN" \
             -H "X-GitHub-Api-Version: 2022-11-28" \
             https://api.github.com/repos/$repo_owner/$repo_name/dispatches \
             -d "{\"event_type\": \"$event_type\", \"client_payload\": {\"artifact_url\": \"$artifact_url\"}}"      
diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
index 7456b19..371ddcc 100644
--- a/.github/workflows/pull_request.yml
+++ b/.github/workflows/pull_request.yml
@@ -23,7 +23,7 @@ jobs:
       WASMSTATICCLIENT_APPSETTINGS_DEVELOPMENT: ${{ secrets.WASMSTATICCLIENT_APPSETTINGS_DEVELOPMENT }}
       WASMSERVERHOSTCLIENT_APPSETTINGS_DEVELOPMENT: ${{ secrets.WASMSERVERHOSTCLIENT_APPSETTINGS_DEVELOPMENT }}
       WASMSERVERHOST_APPSETTINGS_DEVELOPMENT: ${{ secrets.WASMSERVERHOST_APPSETTINGS_DEVELOPMENT }}
-      PACKAGES_TOKEN: ${{secrets.NUGETKEY }}
+      TEL_GIT_PACKAGES_TOKEN: ${{secrets.NUGETKEY }}
       
       UNITTESTS_APPSETTINGS_PRODUCTION: ${{ secrets.UNITTESTS_APPSETTINGS_PRODUCTION }}
       WASMSTATICCLIENT_APPSETTINGS_PRODUCTION: ${{ secrets.WASMSTATICCLIENT_APPSETTINGS_PRODUCTION }}
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index bb222bd..31f24a9 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -14,16 +14,17 @@ env:
   # Permission
   # Using key with more permissions
   GITHUB_TOKEN: ${{ secrets.NUGETKEY }}
-  PACKAGES_TOKEN: ${{ secrets.NUGETKEY }}
+  TEL_GIT_PACKAGES_TOKEN: ${{ secrets.NUGETKEY }}
   GITHUB_USERNAME: "Phil-NHS"
 
   # Nuget Set Up
-  TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH: ${{ github.workspace }}/CICDPackageLocation
-  TELBLAZOR_PACKAGE_SOURCE: "https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json"
+  NUGET_PACKAGES_OUTPUT_PATH: ${{ github.workspace }}/CICDPackageLocation
+  LOCAL_PACKAGES_PATH: ${{ github.workspace }}/CICDPackageLocation
+  TEL_GIT_PACKAGE_SOURCE : "https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json"
   
   # Build Set Up
   USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE: false
-  DISABLE_PACKAGE_GENERATION: false
+
 
 jobs:
   generate-semantic-version:
@@ -52,7 +53,7 @@ jobs:
        
 
 
-      #configured with .releaseseec
+      #configured with .releaseserc
       - name: Run semantic release
         id: set_semantic_version
         run: |
@@ -97,9 +98,16 @@ jobs:
       - name: Remove local package settings (CI Only)
         run: rm -f PackageSettings.props.local
         
-
+      - name: Replace nuget.config with CI template
+        run: |
+          rm -f nuget.config
+          cp nuget.config.cicd nuget.config
+    
       - name: Replace local environment variable in nuget config because cant provide it as a parameter
-        run: sed -i "s|%TELBlazorPackageSource%|$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH|g" nuget.config
+        run: |
+          sed -i "s|%TEL_BLAZOR_PACKAGE_SOURCE%|$LOCAL_PACKAGES_PATH|g" nuget.config
+          sed -i "s|%GITHUB_USERNAME%|$GITHUB_USERNAME|g" nuget.config
+          sed -i "s|%TEL_GIT_PACKAGES_TOKEN%|$TEL_GIT_PACKAGES_TOKEN|g" nuget.config
 
       - name: Create appsettings development from secrets
         run: |
@@ -131,37 +139,22 @@ jobs:
     
       - name: Install npm packages so we have gulp for retrieving TEL Frontend Css
         run: npm ci
-        #CI is an install with adhering to package-lock
+        #CI is an install that adheres to package-lock
         
-     # - name: Build solution without generating new package
-     #   env:
-     #     #Overwrite package generation
-     #     DISABLE_PACKAGE_GENERATION: true
-     #   run: |
-     #     dotnet build TELBlazor.sln -c Release \
-     #       /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION \
-     #       /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
-     #       /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-     #       /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE \
-     #       /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION 
-     #       
 
       - name: Build and pack TELBlazor.Components
-        env:
-            DISABLE_PACKAGE_GENERATION: false
         run: |
           dotnet build TELBlazor.Components -c Release \
             /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION  \
-            /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
+            /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
             /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-            /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE \
-            /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION
+            /p:DisablePackageGeneration=false
             
       - name: Publish to TELBlazor.Components Package
         run: |
-          dotnet nuget push "$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH/TELBlazor.Components.*.nupkg" \
-          --source "$TELBLAZOR_PACKAGE_SOURCE" \
-          --api-key $PACKAGES_TOKEN \
+          dotnet nuget push "$NUGET_PACKAGES_OUTPUT_PATH/TELBlazor.Components.*.nupkg" \
+          --source "$TEL_GIT_PACKAGE_SOURCE" \
+          --api-key $TEL_GIT_PACKAGES_TOKEN \
           --skip-duplicate      
 
 
@@ -185,12 +178,16 @@ jobs:
         - name: Remove local packagesettings (CI Only)
           run: rm -f PackageSettings.props.local
         
+        - name: Replace nuget.config with CI template
+          run: |
+            rm -f nuget.config
+            cp nuget.config.cicd nuget.config
+    
         - name: Replace local environment variable in nuget config because cant provide it as a parameter
           run: |
-            sed -i "s|%TELBlazorPackageSource%|$TELBLAZOR_PACKAGE_SOURCE|g" nuget.config
+            sed -i "s|%TEL_BLAZOR_PACKAGE_SOURCE%|$TEL_GIT_PACKAGE_SOURCE|g" nuget.config
             sed -i "s|%GITHUB_USERNAME%|$GITHUB_USERNAME|g" nuget.config
-            sed -i "s|%GITHUB_PACKAGES_TOKEN%|$PACKAGES_TOKEN |g" nuget.config
-        
+            sed -i "s|%TEL_GIT_PACKAGES_TOKEN%|$TEL_GIT_PACKAGES_TOKEN|g" nuget.config
 
         - name: Create appsettings development from secrets
           run: |
@@ -232,29 +229,20 @@ jobs:
           run: npm ci  
 
         - name: Build solution without generating new package
-          env:
-              #Overwrite package generation
-            DISABLE_PACKAGE_GENERATION: true
-            USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE: false
           run: |
             dotnet build TELBlazor.sln -c Release \
               /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION \
-              /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
-              /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-              /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE \
-              /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION
+              /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
+              /p:UseTELBlazorComponentsProjectReference=false \
+              /p:DisablePackageGeneration=true
 
         - name: Publish WasmStaticClient TELBlazor ShowCase
-          env:
-              #Overwrite package generation
-            DISABLE_PACKAGE_GENERATION: true
-            USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE: false
           run: |
             dotnet publish ./TELBlazor.Components.ShowCase.WasmStaticClient/TELBlazor.Components.ShowCase.WasmStaticClient.csproj --configuration Release \
               /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION \
-              /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
-              /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-              /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE
+              /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
+              /p:UseTELBlazorComponentsProjectReference=false \
+              /p:DisablePackageGeneration=true
                   
         - name: Deploy to GitHub Pages
           uses: JamesIves/github-pages-deploy-action@v4
diff --git a/.github/workflows/reuseable-ci-checks.yml b/.github/workflows/reuseable-ci-checks.yml
index 2345450..21f85d0 100644
--- a/.github/workflows/reuseable-ci-checks.yml
+++ b/.github/workflows/reuseable-ci-checks.yml
@@ -8,6 +8,12 @@ on:
         required: false
         type: boolean
         default: false
+      base_sha:
+        required: false
+        type: string
+      head_sha:
+        required: false
+        type: string
     secrets:
       UNITTESTS_APPSETTINGS_DEVELOPMENT:
         required: true
@@ -25,23 +31,22 @@ on:
         required: true
       WASMSERVERHOST_APPSETTINGS_PRODUCTION:
         required: true
-      PACKAGES_TOKEN:
+      TEL_GIT_PACKAGES_TOKEN:
         required: true
+
         
 env:
 
   # Permission
-  PACKAGES_TOKEN: ${{ secrets.PACKAGES_TOKEN }}
+  TEL_GIT_PACKAGES_TOKEN: ${{ secrets.TEL_GIT_PACKAGES_TOKEN }}
 
   # Nuget Set Up
-  TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH: ${{ github.workspace }}/CICDPackageLocation
-  TELBLAZOR_PACKAGE_SOURCE: ${{ github.workspace }}/CICDPackageLocation
+  NUGET_PACKAGES_OUTPUT_PATH: ${{ github.workspace }}/CICDPackageLocation
+  LOCAL_PACKAGES_PATH: ${{ github.workspace }}/CICDPackageLocation
 
-  
   # Build Set Up
   # May need coverlet.collector xplat if using the packaged version to test
   USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE: true
-  DISABLE_PACKAGE_GENERATION: true
   
   # Check Dummy Data
   TELBLAZOR_PACKAGE_VERSION: "0.0.0-ci-checks"
@@ -59,15 +64,23 @@ jobs:
       steps:
       
         - name: Checkout code
-          uses: actions/checkout@v3
+          uses: actions/checkout@v4
           
         - name: Setup .NET
           uses: actions/setup-dotnet@v4
           with:
             global-json-file: global.json
               
+        - name: Replace nuget.config with CI template
+          run: |
+            rm -f nuget.config
+            cp nuget.config.cicd nuget.config
+    
         - name: Replace local environment variable in nuget config because cant provide it as a parameter
-          run: sed -i "s|%TELBlazorPackageSource%|$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH|g" nuget.config
+          run: |
+            sed -i "s|%TEL_BLAZOR_PACKAGE_SOURCE%|$LOCAL_PACKAGES_PATH|g" nuget.config
+            # sed -i "s|%GITHUB_USERNAME%|$GITHUB_USERNAME|g" nuget.config
+            # sed -i "s|%TEL_GIT_PACKAGES_TOKEN%|$TEL_GIT_PACKAGES_TOKEN|g" nuget.config
           
         - name: Create appsettings development from secrets
           run: |
@@ -102,29 +115,21 @@ jobs:
           run: npm ci   
           
         - name: Build and create package locally
-          env:
-             #Overwrite package generation
-             DISABLE_PACKAGE_GENERATION: false
           run: |
             dotnet build TELBlazor.Components -c Release \
               /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION \
-              /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
+              /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
               /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-              /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE \
-              /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION
+              /p:DisablePackageGeneration=false
 
               
         - name: Build solution without generating new package
-          env:
-              #Overwrite package generation
-              DISABLE_PACKAGE_GENERATION: true
           run: |
             dotnet build TELBlazor.sln -c Release \
               /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION \
-              /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
+              /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
               /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-              /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE \
-              /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION
+              /p:DisablePackageGeneration=true
 
 
     reuseable-ci-checks-branch-name-check:
@@ -166,6 +171,9 @@ jobs:
         - uses: wagoid/commitlint-github-action@v5
           with:
             configFile: .commitlintrc.json
+            # Only set from/to if inputs are provided, otherwise let action use defaults
+            from: ${{ inputs.base_sha != '' && inputs.base_sha || null }}
+            to: ${{ inputs.head_sha != '' && inputs.head_sha || null }}
      
     reuseable-ci-e2e-unit-tests:
         name: E2E Unit threshold and code report trigger
@@ -184,8 +192,16 @@ jobs:
             with:
               global-json-file: global.json
               
+          - name: Replace nuget.config with CI template
+            run: |
+              rm -f nuget.config
+              cp nuget.config.cicd nuget.config
+    
           - name: Replace local environment variable in nuget config because cant provide it as a parameter
-            run: sed -i "s|%TELBlazorPackageSource%|$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH|g" nuget.config
+            run: |
+              sed -i "s|%TEL_BLAZOR_PACKAGE_SOURCE%|$LOCAL_PACKAGES_PATH|g" nuget.config
+            # sed -i "s|%GITHUB_USERNAME%|$GITHUB_USERNAME|g" nuget.config
+            # sed -i "s|%TEL_GIT_PACKAGES_TOKEN%|$TEL_GIT_PACKAGES_TOKEN|g" nuget.config
        
           - name: Clean lock files because the newly generated package file will superseed the locks
             run: |
@@ -222,30 +238,20 @@ jobs:
 
       
           - name: Build and create package locally
-            env:
-               #Overwrite package generation
-               DISABLE_PACKAGE_GENERATION: false
             run: |
               dotnet build TELBlazor.Components -c Debug \
                 /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION \
-                /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
+                /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
                 /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-                /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE \
-                /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION \
-                /p:E2ETracingEnabled=$E2E_TRACING_ENABLED \
-                /p:HeadlessTesting=$HEADLESS_TESTING 
+                /p:DisablePackageGeneration=false
               
           - name: Build solution without generating new package
-            env:
-                #Overwrite package generation
-                DISABLE_PACKAGE_GENERATION: true
             run: |
               dotnet build TELBlazor.sln -c Debug \
                 /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION \
-                /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
+                /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
                 /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-                /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE \
-                /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION
+                /p:DisablePackageGeneration=true
                 
               
           - name: Ensure browsers are installed
@@ -254,20 +260,12 @@ jobs:
 
           - name: Run tests with coverage threshold check
             id: unit_e2e_tests
-            env:
-              TELBlazorPackageVersion: ${{ env.TELBLAZOR_PACKAGE_VERSION }}
-              NupkgOutputPath: ${{ env.TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH }}
-              UseTELBlazorComponentsProjectReference: ${{ env.USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE }}
-              TELBlazorPackageSource: ${{ env.TELBLAZOR_PACKAGE_SOURCE }}
-              DisablePackageGeneration: ${{ env.DISABLE_PACKAGE_GENERATION }}
-
             run: |
               dotnet test --no-build --no-restore \
                 /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION \
-                /p:NupkgOutputPath=$TELBLAZOR_PACKAGE_LOCAL_OUTPUT_PATH \
+                /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
                 /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
-                /p:TELBlazorPackageSource=$TELBLAZOR_PACKAGE_SOURCE \
-                /p:DisablePackageGeneration=$DISABLE_PACKAGE_GENERATION
+                /p:DisablePackageGeneration=true
                 
             continue-on-error: true
 
@@ -289,8 +287,8 @@ jobs:
               
           - name: Get artifact location
             env:
-               PACKAGES_TOKEN: ${{ secrets.PACKAGES_TOKEN }}
-               GH_TOKEN: ${{ secrets.PACKAGES_TOKEN }}
+              # requires local set env
+              GH_TOKEN: ${{ secrets.TEL_GIT_PACKAGES_TOKEN }}
             run: |
               # Get the artifact list for the current workflow run
               ARTIFACT_LIST=$(gh api "repos/TechnologyEnhancedLearning/TELBlazor/actions/runs/${GITHUB_RUN_ID}/artifacts")
@@ -305,9 +303,6 @@ jobs:
               
           
           - name: Trigger workflow in TELBlazor-CodeReport repo
-            env:
-               PACKAGES_TOKEN: ${{ secrets.PACKAGES_TOKEN }}
-               GH_TOKEN: ${{ secrets.PACKAGES_TOKEN }}
             run: |
               repo_owner="TechnologyEnhancedLearning"
               repo_name="TELBlazor-CodeReport"
@@ -316,18 +311,17 @@ jobs:
               curl -L \
                 -X POST \
                 -H "Accept: application/vnd.github+json" \
-                -H "Authorization: Bearer $PACKAGES_TOKEN" \
+                -H "Authorization: Bearer $TEL_GIT_PACKAGES_TOKEN" \
                 -H "X-GitHub-Api-Version: 2022-11-28" \
                 https://api.github.com/repos/$repo_owner/$repo_name/dispatches \
                 -d "{\"event_type\": \"$event_type\", \"client_payload\": {\"artifact_url\": \"$artifact_url\"}}"  
                 
           - name: Fail job if test failed after report is generated
-            if: steps.unit_e2e_tests.outcome != 'success'  # optional conditional, but optional
+            if: steps.unit_e2e_tests.outcome != 'success'
             run: |
-              if [[ "${{ steps.some-step.outputs.status }}" != "success" ]]; then
+                echo "{{steps.unit_e2e_tests.outcome }}"
                 echo "❌ One or more steps failed."
                 exit 1
-              fi
             
 
     reuseable-ci-checks-check-for-failed-jobs:
diff --git a/.gitignore b/.gitignore
index 1b2e448..934d9ab 100644
--- a/.gitignore
+++ b/.gitignore
@@ -206,3 +206,5 @@ CHANGELOG.md
 /TELBlazor.Components.ShowCase.E2ETests/appsettings.Production.json
 /TELBlazor.Components.ShowCase.E2ETests/appsettings.json
 /.runsettings
+/nuget.config
+/nuget.config
diff --git a/.runsettingsTemplate b/.runsettingsTemplate
index 8491451..b45a7fa 100644
--- a/.runsettingsTemplate
+++ b/.runsettingsTemplate
@@ -1,17 +1,15 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <RunSettings>
-
-  <RunConfiguration>
-    <EnvironmentVariables>
-        <TracingEnabled>True</TracingEnabled>
-        <RunSettingFile>".runsettingsTemplate"</RunSettingFile>
-    </EnvironmentVariables>
-  </RunConfiguration>
-  <Playwright>
-    <LaunchOptions>
-      <Headless>false</Headless>
-		
-    </LaunchOptions>
-  </Playwright>
-
+	<RunConfiguration>
+		<EnvironmentVariables>
+			<TracingEnabled>True</TracingEnabled>
+			<RunSettingFile>".runsettings"</RunSettingFile>
+		</EnvironmentVariables>
+	</RunConfiguration>
+	<Playwright>
+		<LaunchOptions>
+			<Headless>false</Headless>
+		</LaunchOptions>
+	</Playwright>
 </RunSettings>
+
diff --git a/CHANGELOG.md b/CHANGELOG.md
index de79d3f..c8a4a36 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,35 +1,7 @@
-# [1.8.0](https://github.com/TechnologyEnhancedLearning/TELBlazor/compare/v1.7.0...v1.8.0) (2025-06-16)
+# [1.9.0-feat-button-for-cicd-testing.1](https://github.com/TechnologyEnhancedLearning/TELBlazor/compare/v1.8.0...v1.9.0-feat-button-for-cicd-testing.1) (2025-06-25)
 
 
 ### Features
 
-* **button:** changed .runsetting ([06470d7](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/06470d7e71e8a074653a176f87c1a3732f3b44f0))
-* **button:** commit before change env vars ([1e4377f](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/1e4377fc768e7d770b769536e123453c024e8320))
-* **button:** test fix ([022f427](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/022f42765e463f3f46e5e7b672979212cef36339))
-* **button:** versioning from assembly not file parsing ([4b8c773](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/4b8c77356a834de351ad703394eeb060e9a99c01))
-* **cicd:** changing to runsetting config ([3b828b2](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/3b828b28ea7cc6d577ef0e15d9c6f8bc452705e1))
-* **readme:** readme update ([1a9ad4b](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/1a9ad4bda0771dd78fbe4140c21e0a6f65a2b337))
-
-# [1.8.0-feat-button-for-cicd-testing.3](https://github.com/TechnologyEnhancedLearning/TELBlazor/compare/v1.8.0-feat-button-for-cicd-testing.2...v1.8.0-feat-button-for-cicd-testing.3) (2025-06-16)
-
-
-### Features
-
-* **readme:** readme update ([1a9ad4b](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/1a9ad4bda0771dd78fbe4140c21e0a6f65a2b337))
-
-# [1.8.0-feat-button-for-cicd-testing.2](https://github.com/TechnologyEnhancedLearning/TELBlazor/compare/v1.8.0-feat-button-for-cicd-testing.1...v1.8.0-feat-button-for-cicd-testing.2) (2025-06-16)
-
-
-### Features
-
-* **button:** changed .runsetting ([06470d7](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/06470d7e71e8a074653a176f87c1a3732f3b44f0))
-* **button:** commit before change env vars ([1e4377f](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/1e4377fc768e7d770b769536e123453c024e8320))
-* **button:** test fix ([022f427](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/022f42765e463f3f46e5e7b672979212cef36339))
-* **cicd:** changing to runsetting config ([3b828b2](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/3b828b28ea7cc6d577ef0e15d9c6f8bc452705e1))
-
-# [1.8.0-feat-button-for-cicd-testing.1](https://github.com/TechnologyEnhancedLearning/TELBlazor/compare/v1.7.0...v1.8.0-feat-button-for-cicd-testing.1) (2025-06-11)
-
-
-### Features
-
-* **button:** versioning from assembly not file parsing ([4b8c773](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/4b8c77356a834de351ad703394eeb060e9a99c01))
+* **searchexperiment:** in theory ([fee2b91](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/fee2b9124b859f9a548e3fa257d53294ce83dc08))
+* **showcase:** added component readme displayer ([a058fe6](https://github.com/TechnologyEnhancedLearning/TELBlazor/commit/a058fe6f034b5097fb72c9f72a8b98c57ed2b607))
diff --git a/CICD.runsettings b/CICD.runsettings
index 5f2a63f..d79ab4f 100644
--- a/CICD.runsettings
+++ b/CICD.runsettings
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <RunSettings>
-	<!--<xUnit>-->
   <RunConfiguration>
     <EnvironmentVariables>
         <TracingEnabled>False</TracingEnabled>
@@ -10,8 +9,6 @@
   <Playwright>
     <LaunchOptions>
       <Headless>true</Headless>
-		
     </LaunchOptions>
   </Playwright>
-		<!--</xUnit>-->
 </RunSettings>
diff --git a/Directory.Packages.props b/Directory.Packages.props
index 4b2a014..074ee19 100644
--- a/Directory.Packages.props
+++ b/Directory.Packages.props
@@ -9,6 +9,7 @@
   <ItemGroup>
     <!-- Microsoft packages tied to .NET 8 -->
     <PackageVersion Include="coverlet.collector" Version="6.0.4" />
+    <PackageVersion Include="Markdig" Version="0.41.3" />
     <PackageVersion Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="8.0.0" />
     <PackageVersion Include="Microsoft.AspNetCore.Components.Web" Version="8.0.14" />
     <PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.14" />
diff --git a/LICENSE.txt b/LICENSE.txt
new file mode 100644
index 0000000..63b4b68
--- /dev/null
+++ b/LICENSE.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [year] [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/PackageSettings.props b/PackageSettings.props
index 2f02b9d..1506e02 100644
--- a/PackageSettings.props
+++ b/PackageSettings.props
@@ -1,6 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <!--Overwrite with PackageSettings.props.local-->
+
+
+	<!-- ===================================================
+       Test Property Group (Due to thresholds via msbuild most configuration for tests occurs here)
+       =================================================== -->
   <PropertyGroup>
 
 	  <!--gets overwritten by packagesettings.props.local to use .runsettings-->
@@ -9,45 +14,43 @@
 	<!-- coverlet.msbuild, specifically msbuild props here we set when cicd testing fails on coverage -->
 	<CollectCoverage>true</CollectCoverage>
 	<CoverletOutputFormat>cobertura</CoverletOutputFormat>
-	<Threshold>30</Threshold>
+	<Threshold>10</Threshold>
 	<ThresholdType>line</ThresholdType>
 	<ThresholdStat>total</ThresholdStat>
-	<ThresholdBranch>30</ThresholdBranch>
-	<ThresholdMethod>30</ThresholdMethod>
+	<ThresholdBranch>10</ThresholdBranch>
+	<ThresholdMethod>10</ThresholdMethod>
 
 	<!-- What to test -->
 	<Include>[TELBlazor.Components]*</Include>
 	<ExcludeByAttribute>ExcludeFromCodeCoverage</ExcludeByAttribute>
-	<ExcludeByFile>**/Program.cs,**/OptionalImplementations/TestComponents/**/*.*</ExcludeByFile>
+	<ExcludeByFile>**/Program.cs,**/OptionalImplementations/Test/**/*.*,**/OptionalImplementations/TestComponents/**/*.*,**/OptionalImplementations/TestComponentPages/**/*.*</ExcludeByFile>
+
 	<IncludeTestAssembly>true</IncludeTestAssembly>
 
 	<!--centralising TestResults output could reduce abitity to run tests in parralel-->
 	<CoverletOutput>$(MSBuildThisFileDirectory)AllTestResults/</CoverletOutput>
 	<MergeWith>$(MSBuildThisFileDirectory)AllTestResults/coverage.json</MergeWith>
 
-	  <!-- Define the output path where the package will be stored -->
-    <NupkgOutputPath>$(NupkgOutputPath)</NupkgOutputPath>
+  </PropertyGroup>
 	
-	  <!--can be local folder-->
-	  
-	<TELBlazorPackageSource>$(TELBlazorPackageSource)</TELBlazorPackageSource>
+	
+	<!-- ===================================================
+       Environment Configuration Property Group For CICD and Local Dev
+       =================================================== -->
+	<PropertyGroup>
+	  <!-- Define the output path where the package will be stored -->
+    <NugetPackagesOutputPath>$(NUGET_PACKAGES_OUTPUT_PATH)</NugetPackagesOutputPath>
 	
 	  <!--Use project reference for faster iteration in development-->
-	<UseTELBlazorComponentsProjectReference Condition="'$(UseTELBlazorComponentsProjectReference)' == '' ">false</UseTELBlazorComponentsProjectReference>
-	<UseTELBlazorComponentsProjectReference Condition="'$(UseTELBlazorComponentsProjectReference)' != '' ">$(UseTELBlazorComponentsProjectReference)</UseTELBlazorComponentsProjectReference>
+	<!--<UseTELBlazorComponentsProjectReference Condition="'$(UseTELBlazorComponentsProjectReference)' == '' ">false</UseTELBlazorComponentsProjectReference>-->
+	<UseTELBlazorComponentsProjectReference>$(USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE)</UseTELBlazorComponentsProjectReference>
 	
 	  <!--manually change this to build and use local packages, or add the project automated generation e.g. msbuild number-->
-	<TELBlazorPackageVersion>$(TELBlazorPackageVersion)</TELBlazorPackageVersion>
+	<TELBlazorPackageVersion>$(TEL_BLAZOR_PACKAGE_VERSION)</TELBlazorPackageVersion>
 	
 	  <!--Building the components project makes the package publish isnt needed-->
-    <DisablePackageGeneration>$(DisablePackageGeneration)</DisablePackageGeneration>
+    <DisablePackageGeneration>$(DISABLE_PACKAGE_GENERATION)</DisablePackageGeneration>
 	
-	  <!--Testing settings-->
-	<!--<E2ETracingEnabled Condition="'$(E2ETracingEnabled)' == ''">false</E2ETracingEnabled>
-	<E2ETracingEnabled Condition="'$(E2ETracingEnabled)' != ''">$(E2ETracingEnabled)</E2ETracingEnabled>
-	<HeadlessTesting Condition="'$(HeadlessTesting)' == ''">true</HeadlessTesting>
-	<HeadlessTesting Condition="'$(HeadlessTesting)' != ''">$(HeadlessTesting)</HeadlessTesting>-->
-  
   </PropertyGroup>
 
 </Project>
diff --git a/PackageSettings.props.local.template b/PackageSettings.props.local.template
index 6b0f3ba..f922827 100644
--- a/PackageSettings.props.local.template
+++ b/PackageSettings.props.local.template
@@ -1,25 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
 	<PropertyGroup>
-	    
-		<!--your local system environment variables-->
-		<TELBlazorPackageSource>$(TELBlazorPackageSource)</TELBlazorPackageSource>
-		<!--<TELBlazorPackageSource>$(LocalPackagePath)</TELBlazorPackageSource>-->
-		<!--<TELBlazorPackageSource>$(TELPackageSource)</TELBlazorPackageSource>-->
-		<NupkgOutputPath>$(LocalPackagePath)</NupkgOutputPath>
-		
-		<!--for faster iteration-->
+		<NugetPackagesOutputPath>$(LOCAL_PACKAGES_PATH)</NugetPackagesOutputPath>
 		<UseTELBlazorComponentsProjectReference>true</UseTELBlazorComponentsProjectReference>
-		
-		<!--manually change this to build and use local packages, or add the project automated generation e.g. msbuild number-->
-		<TELBlazorPackageVersion>10.9.9</TELBlazorPackageVersion>
-		
-		<!--Building the components project makes the package publish isnt needed-->
+		<TELBlazorPackageVersion>1.9.0-local</TELBlazorPackageVersion>
 		<DisablePackageGeneration>true</DisablePackageGeneration>
 		<RunSettingsFilePath>$(SolutionDir)\.runsettings</RunSettingsFilePath>
-		<!--Testing settings-->
-		<!--<E2ETracingEnabled>true</E2ETracingEnabled>
-		<HeadlessTesting>true</HeadlessTesting>-->
-
 	</PropertyGroup>
 </Project>
\ No newline at end of file
diff --git a/README.md b/README.md
index 3634b7f..006ef10 100644
--- a/README.md
+++ b/README.md
@@ -8,12 +8,12 @@ There is also a cicd readme in the workflow folder.
 
 The [MVCBlazor repo ](https://github.com/TechnologyEnhancedLearning/MVCBlazor) readme has exploration of various of the choices and alternatives to what is implemented here, which may be useful along with the other blazor repos, when developing for this repo.
 
+*There are specific readmes within the solution for topics like components and cicd*
+
 # Purpose
 
-Progressive components, that use the server prerendering in Global Wasm Blazor to ensure that if the user has no JS they will get html. And that html can be created to have working post actions.
-The render cycle will hydrate the prerender and the post actions will be overrided by services injected in the components.
-It is client side so the users browser will do the work.
-  
+Progressive Blazor components, intended for a Hosted Blazor Webassembly architecture with prerendering. They provide clientside functionality with 
+the ability to produce static prerendered html. The prerendered html is written to have server-side interactvity via form posts and fallback mechanism to support browsers without javascript enabled. 
   
    
 # Links
@@ -41,268 +41,55 @@ It is client side so the users browser will do the work.
 
 # Set Up
 
-## "It works on my machine"
-
-### Hi Kevin, Please rewrite or correct these steps. 
-- im expecting maybe global node may end up not working, if anything, as its already set up globally on my machine with the packages for this project.
+## Prerequisites
 
-### 
-
-### Prerequisites
 - **Visual Studio 2022** (Community or higher)
-- **.NET 8 SDK version 8.0.407 or later** (see global.json requirement below)
+- **.NET 8 SDK version 8.0.407 or later** (see global.json file in the solution)
 - **Node.js 18+** and npm
 - **Git** configured with your credentials
 - **PowerShell 5.1+** 
 > ⚠️ **Important:** All commands in this guide require **PowerShell running as Administrator**
 
-### Steps
-
-#### Get the repo
-1. Open powershell as admin
-1. In powershell navigate (```cd```) to the folder the repo will go
-1. Check prequisites
-	- ```
-		### 1. Verify Prerequisites
-
-		**Open PowerShell as Administrator** and verify your setup:
-
-		```powershell
-		# Check .NET SDK version (should be 8.0.407 or later)
-		dotnet --version
-
-		# Check Node.js version (should be 18+)
-		node --version
-	
-	  ```
-1. Go to [TELBlazor Repo](https://github.com/TechnologyEnhancedLearning/TELBlazor) hit code and get the clone string
-1. Clone the repo locally using powershell terminal
-1. Go to [TELBlazor Repo](https://github.com/TechnologyEnhancedLearning/TELBlazor) 
-	- create a branch (**there is branch name checks in cicd [branch lint rules](https://github.com/TechnologyEnhancedLearning/TELBlazor/blob/master/.releaserc.json)**) so for example call it **"docs-readme-setup-instructions"**
-	- your commits should look like this **"docs(readme): added detail on commit rules"**
-1. Fetch, and checkout your new branch locally so you can add to the readme as you go
-	- create commit "docs(readme): first commit"
-	- see [commit rules](https://github.com/TechnologyEnhancedLearning/TELBlazor/blob/master/.commitlintrc.json)
-	- *these rules also enable the versioning in cicd*
-	- Bonus (you could do this while cloning): if you don't want to wait for the pipeline to fail your commit names and for pushes to accidently expose your secrets: you may want to add
-		- gitguardian from confluence docs (follow it to the letter) [gitguardian global setup instructions](https://hee-tis.atlassian.net/wiki/spaces/TP/pages/3855253505/GitGuardian+Setup+-+Simplified+Version)
-        - and add a pre-commit and push hook (you need both as you cannot lint what hasnt yet been commit) you can add these to your git templates if you want them for every repo, or just to this repos pre- push- commits, or you can be lazy and add them into the gitguardian hook
-		- you will need git commitlint globally (angular because it goes with the versioning tool for repo versioning)
-			
-			```
-				npm install -g @commitlint/cli @commitlint/config-angular
-			```
-		-	```
-				#### --- Commitlint Logic (force local config) ---
-				REPO_ROOT=$(git rev-parse --show-toplevel)
-				CONFIG_PATH="$REPO_ROOT/.commitlintrc.json"
-				echo "COMMIT_MSG_FILE is one msg behind it is only set to the commit your trying to commit after the commit succeeds so this script is one behind"
-				echo "so would work best in prepush template"
-				COMMIT_MSG_FILE="$REPO_ROOT/.git/COMMIT_EDITMSG"
-
-				# Check if the local .commitlintrc.json exists in the repository root
-				if [ -f "$CONFIG_PATH" ]; then
-
-					echo "✅ Local .commitlintrc.json found at: $CONFIG_PATH. Running commitlint..."
-					echo "⚠️ if commit lint fails in precommit its actually reading previous commit name you need to reset or squash make a new commit and change .git/COMMIT_EDITMSG to something that would pass. ⚠️"
-
-					if command -v npx &> /dev/null; then
-					
-							cd "$REPO_ROOT" || exit 1
-
-							# Debug: Print the commit message file content
-							if [ -f "$COMMIT_MSG_FILE" ]; then
-								echo "Commit message content:"
-								cat "$COMMIT_MSG_FILE"
-							else
-								echo "❌ Commit message file not found!"
-								exit 1
-							fi
-							
-							
-							# Run commitlint, explicitly pointing to the local config and providing the commit message via stdin
-							OUTPUT1=$(npx.cmd --no -- commitlint --config=".commitlintrc.json" --edit="$COMMIT_MSG_FILE" 2>&1)
-							
-							EXIT_CODE1=$?
-							# echo "!!!!!!!!!!! OUTPUT1"
-							# echo "$OUTPUT1"
-							
-							
-							# OUTPUT2=$(npx.cmd --no -- commitlint --config=".commitlintrc.json" --from=origin/master --to=HEAD 2>&1)
-							
-							# EXIT_CODE2=$?
-							# echo "!!!!!!!!!!! OUTPUT2"
-							# echo "$OUTPUT2"
-							
-							# OUTPUT3=$(npx.cmd --no -- commitlint --config=".commitlintrc.json"  --from-last-tag 2>&1)
-							
-							
-							# EXIT_CODE3=$?
-							# echo "!!!!!!!!!!! OUTPUT3"
-							# echo "$OUTPUT3"
-							
-
-
-						#if [ "$EXIT_CODE1" -ne 0 ] || [ "$EXIT_CODE2" -ne 0 ] || [ "$EXIT_CODE3" -ne 0 ];  then
-						if [ "$EXIT_CODE1" -ne 0 ];  then
-							echo "❌ Commitlint failed:"
-							
-							echo "$OUTPUT1"
-							exit 1
-						else
-							echo "✅ Commitlint passed!"
-						fi
-					else
-						echo "⚠️ npx not found. Please ensure Node.js and npm are installed to use commitlint."
-						# Optionally fail here
-						# exit 1
-					fi
-				else
-					echo "ℹ️ No local .commitlintrc.json found in $REPO_ROOT. Skipping commitlint."
-				fi
-			``` 
-#### About configuration (just to read)
-
-Visual studio caches the environmental variables so to avoid restarting it you may want to have multiple
-environment variables, even if at times they are set to the same values. Then you can switch in configuration
-which environment value is used rather than the underlying value, but be careful not to leave nuget.config
-changed. Remember to delete your lock files when changing which package your using* ```%envvalue%``` syntax in 
-nuget.config can be populated by environment values by visual studio but not via command line and cicd has to 
-replace the values with ```sed```
-
-- The intention of the configuration is you should be able to switch between local packages, remote package, and project references. It will also enable parrallel development with consuming projects, so package changes can be seen in situ during development.
-- Troubleshooting
-    - delete local `TELBlazor.Components` packages
-    - check `TELBlazorPackageVersion` has been incremented
-    - delete lock files
-	- clean solution
-	- check environment values in `props` and `nuget.config`
-	- restore nuget packages 
-	- restore solution
-	- if still not working close visual studio and reopen
-	- if there are still issues its easier to problem solve by using a random very high `TELBlazor.Components` package version number and ensuring it fails and says it found the source but not the version
-- Variables Recommended to add to environment variables (Do this in the next section)
-	- **TELBlazorPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
-	- **TELPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
-	- **LocalPackageSource** → e.g. C:\dev\LocalPackages
-	- **NupkgOutputPath** → e.g. C:\dev\LocalPackages
-- Other variables you may want to set up
-	- Any of the nuget.config and PackageSetting.props values but visual studio caches environment values so nothing you expect to change regularly
-
-
-#### Configure environment variables and package settings
-- Set environmental variables (go into Start → Edit environment system variables, then look for the 'Environment variables' button). Add the following System variables: 	
-	- **TELBlazorPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
-	- **TELPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
-	- **LocalPackageSource** → e.g. C:\dev\LocalPackages (make sure folder exists)
-	- **NupkgOutputPath** → e.g. C:\dev\LocalPackages
-
-#### Create GitHub Personal Access Token (PAT) for remote package source
-
-To use remote git hosted nuget packages you need a personal git token. This is just because git tracks the use of packages rather than it being anonymous
-
-- go to your [GitHub profile](https://github.com/settings/profile)
-- go to Settings → Developer settings → Personal access tokens → Tokens classic → Generate new token (classic)
-	- give it a Note, e.g. "TELBlazor Package Access"
-	- set the expiration date to something reasonable (e.g. 90 days)
-	- select the scopes you need for the token
-		- as a minimum select `read:packages` and you may wish to increase the expiration date.
-		- if you want to publish packages you will need `write:packages` and `delete:packages` but this is not recommended for development
-	- Generate token
-	- copy the token immediately (it will not be accessible again)
-- Set system wide environment variables as before
-	- GITHUB_USERNAME / [Your GitHub username]
-	- GITHUB_PACKAGES_TOKEN / [The copied token]
-
-	NOTE: You may need to restart Visual Studio, Powershell or your OC for these changes to take effect.
-
-- Check environment variables are stored:
-	
-			``` 
-				echo $env:GITHUB_USERNAME
-				echo $env:GITHUB_PACKAGES_TOKEN
-
-			```
-
-	- and, for a more thorough test, check they are working. Open a Powershell in a folder where you can put deletable content:
-	
-			``` 
-				# Create output folder if it doesn't exist
-				New-Item -ItemType Directory -Path deleteme-test -ErrorAction SilentlyContinue
-
-				# Build the auth string (username:token)
-				$auth = "$($env:GITHUB_USERNAME):$($env:GITHUB_PACKAGES_TOKEN)"
-
-				# Build base URL by removing trailing /index.json from the feed URL
-				$baseUrl = $env:TELBlazorPackageSource -replace "/index\.json$", ""
-				$baseUrl = $baseUrl.TrimEnd('/')
-
-				# Download the package with curl using authentication
-				curl.exe -u $auth `
-				  -L "$baseUrl/download/TELBlazor.Components/1.0.0/TELBlazor.Components.1.0.0.nupkg" `
-				  -o deleteme-test\TELBlazor.Components.1.0.0.nupkg
-
-			```
-	    - check there is a nupkg package. It's an old one, so delete it. 
-
-#### Create the NuGet package source (powershell)
-````
-dotnet nuget add source "https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json" `
-  --name "github" `
-  --username $env:GITHUB_USERNAME `
-  --password $env:GITHUB_PACKAGES_TOKEN `
-  --store-password-in-clear-text
-````
-
-Note: You may also wish to go into your user appdata or roaming and find your global nuget config and add the credentials in there. Do this by copying the 
-TELPackage part of the config but with the system environment variable values you set earlier. This will mean LH for example will be able to access TEL packages and so will other projects.
-
-#### Create appsettings
-*Be aware that because WASM code is in the browser appsettings in the wasm client projects are not secret and sensitive data should not go in them*
-
-- **Solution Level**
-	- From the runsettingsTemplate you will make your local runnsettings for testing **".runsettings"** this is where you set tracing and headless
-	- From PackageSetting.props.local.template make a new PackageSetting.props.local file in the route directory (ensure 'Show All Files' option is checked in the Solution Explorer to see this)
-		- PackageSetting.props.local overwrite PackageSetting.props in directory build props
-			- For development, set the following in your system or in the `PackageSettings.props.local` file:
-				- **TELBlazorPackageSource** → a local folder outside of the solution (can also be set to the remote source)
-				- **NupkgOutputPath** → the same local folder outside of the solution (can also be set to the remote path)
-				- **UseTELBlazorComponentsProjectReference** → true  (for faster development)
-				- **TELBlazorPackageVersion** → 1.0.0 (will do for now but will need to be incremented for package generation)
-				- **DisablePackageGeneration** → true (set to false for package generation)
-- **TELBlazor.Components.ShowCase.E2ETests.WasmServerHost**
-	- create appsettings.Development.json
-	- copy paste from appsettings.Development.json.template
-	- the template is source controlled so wont have anything that needs to be secure
-	- if you have preferences for logging this is where to configure it, if you want to add creating a text file for example add it here and then add it as dependency in the solution and a reference in the program.cs
-	- *logging can be used to get information during testing and test against it*
-- **TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client**
-	- follow the same process
-	- client side appsetting are exposed through the wasm so dont put secure information in them
-	- the client will have different logging options as it can only log to browser console, http to a logging api, storage
-- **TELBlazor.Components.ShowCase.ShowCase.WasmServerHost.Client**
-	- this is the project that become the gh-pages
-	- the appsettings go into the wasm so no secrets in here
-	- any of these projects could be used to view changes but if not looking at nojs this project could have different appsettings just for development as it isnt used to test against.
-- **TELBlazor.Components.UnitTests**
-		- as above
-
-#### Set development config and install packages
-- in .runsettings, set:
-	- **TracingEnabled** → true
-	- **Headless** → false
-- right click the solution and copy full path (or open terminal if running as admin)
-- open powershell from windows as administrator
-- paste the route paste and cd to the solution folder
-- then run the following
-- 	```   
-		# 1. Check environment variables and local props
-		Write-Output "Have you set your environment variables and local props?"
-        dotnet clean
-		
-		# 2. Restore NuGet packages (reads central package versions and props)
-		Write-Output "Restore Nuget"
+### Quick Setup ⚡
+
+
+- **Get the repo:** open powershell as admin, ```cd``` to where you keep your repos. Run ```git clone https://github.com/TechnologyEnhancedLearning/TELBlazor.git```
+- **Create local gitignored configuration files from templates:** open the project in visual studio
+	- search template
+		- create a copy of each template removing the .template post fix
+- **Create GitHub Personal Access Token (PAT) for consuming [TEL git hosted nuget packages](https://github.com/orgs/TechnologyEnhancedLearning/packages) :**
+	- go to your [GitHub profile tokens section](https://github.com/settings/tokens)
+	- Select Personal access tokens → Tokens classic → Generate new token (classic)
+		- give it a Note, e.g. "TEL Package Access" (we will be storing it as the env var TEL_GIT_PACKAGES_TOKEN)
+		- set the expiration date to something reasonable (e.g. 90 days)
+		- select the scopes you need for the token
+			- as a minimum select `read:packages` and you may wish to increase the expiration date.
+			- if you want to publish packages you will need `write:packages` and `delete:packages` but this is not recommended for development
+		- Generate token
+		- copy the token ***immediately*** (it will not be accessible again)
+	- **Set system wide environment variables (useful for future projects too):**
+		- Open Start, type "Environment Variables", and select "Edit the system environment variables"
+		- In the System Properties window, click Environment Variables
+		- Under **System variables**, click New
+		- Enter the variable names and variable values as follows:
+			- GITHUB_USERNAME / [Your GitHub username]
+			- TEL_GIT_PACKAGES_TOKEN / [The copied token]
+		- then click OK
+		- Click OK again to close all dialogs.
+- **Restore Nuget, Npm, Tooling, playwright and build:**
+	- run a new admin powershell terminal in the TELBlazor repo root
+	- run the following commands
+	```   
+		#1. Restore
+		dotnet clean
 		dotnet restore
+		
+		#2. Nuget TEL Git Feed setups
+		dotnet nuget add source "https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json" `
+		  --name "github" `
+		  --username $env:GITHUB_USERNAME `
+		  --password $env:TEL_GIT_PACKAGES_TOKEN `
+		  --store-password-in-clear-text
 
 		# 3. Restore .NET CLI tools (Playwright, report manager for code coverage)
 		Write-Output "Restore Tools"
@@ -321,114 +108,186 @@ TELPackage part of the config but with the system environment variable values yo
 		& ".\TELBlazor.Components.ShowCase.E2ETests\bin\Debug\net8.0\playwright.ps1" install
 	```
 
-#### Check Setup Worked
-
-- Look in components **TELBlazor.Components.TELBlazorPackageVersion**
-	- **TELFrontEndPackageVersion** check the package versions
-	- it should match the version number in your `props.local` currently
-	- check nhsuk version in `package.json`
-- check `nhsuk.css` was generated by gulp in `TELBlazor.Components.ShowCase.Shared.wwwroot.css`
-- Open test runner and run tests 
-	- wait 10 seconds, then if its going make a cup of tea
-- reuse previous terminal, or right click solution and open a terminal
-	- ``` ./run-tests-and-report-with-env-values.ps1 ```
-		- (this is just a useful script for running tests and report similar to the cicd if you want to run the cicd locally you could use "nektos act" instead)
-	- it will quietly slowly do the E2E after the first tables appear so enjoy your tea and skim the readme for 5 minutes
-- look in AllTestResults folder at the solution level you should see coverage.cobertura.xml
-- find index.html at the the top level in the folder CoverageReport, open it in chrome and bookmark it if you like
-- run TELBlazor.Components.ShowCase.E2ETests.WasmServerHost
-    - take note of the TELBlazor Package Version
-	- have a click around, change the loglevel look in the browser console
-	- the host runs the client
-	- you can put debugger in program.cs of WasmServerHost because this part isnt running in the browser as the wasm
-	- once the wasm takes over to debug in the browser you need to do some setup
-		- TODO QQQQ I cant remember what i havent set up on new machine yet, i presume it doesnt work for you kevin?
-- run TELBlazor.Components.ShowCase.E2ETests.WasmServerHost	
-	- This is pure wasm so notice that there is a loader initially this is because there is no prerender
-- go into tools in the top vs bar you should see toggle test coverage highlighting. Go to loglevelswitcher.razor it should be highlighted red 
-	- qqqq todo isnt for mine is it for yours kevin?
-
-
-##### Check Setup with Package Creation
-*The TELBlazor Package Version is actually parsed from the number provided in props so don't rely on it to match the package being shown soley if your still using the ref, the project will display the new number you put in*
-- change local props to
-	- set `packagesettings.props.local` if you haven't already via environment variables and hard coding to the following
-		- **TELBlazorPackageSource** → a local folder outside of the solution
-		- **NupkgOutputPath** → the same local folder outside of the solution
-		- **UseTELBlazorComponentsProjectReference** → false
-		- **TELBlazorPackageVersion** → pick something greater than the production package number. The one without the dash [TELBlazor.Components Prod and Dev Package location](https://github.com/TechnologyEnhancedLearning/TELBlazor/pkgs/nuget/TELBlazor.Components)
-			- make sure its changed so its more than the TELBlazor Package Version you previously noted
-		- **DisablePackageGeneration** → false
-	- set .runsettings
-		- **Tracing** → false
-		- **HeadlessTesting** → false 
-		
-*When doing package generation remember you need to keep incrementing the package number to get changes into the project, it would be nice to have this as an env value as an automated increment*
-- delete the local package in your package folder
-- delete the lock files
-- clean/build solution (because of build order you may need to build TELBlazor.Components first if there are issues)
-	- check package created in your package location
-- make a change to the html of `TELBlazor.Components.Components.TestComponents.CssSourceChecker.cs` you can search graphitti-wall add a <p> if you don't see it in the next build the package is in use rather than the reference :)
-- run the hosted project does it work now its set to use the package
-	- package number will have increased
-	- you shouldnt see the html you added
-- run the wasm project does it work now its set to uses package
-	- you shouldnt see the html you added
-	- Tip it can be useful to launch incognito 
-		- right click an index.html, browser with, add chrome chrome_proxy.exe and --incognito flag then select it when running the project its now an available options
-- Run tests in test runner
-	- its no longer headless so you should see multiple windows open
-
-###### Optional
-- run ps1 test script
-	
-
-##### Check Setup With Package reference remote
-
-- *You can change the value of the env system values but visual studio caches them so swapping for a different env value is faster just remember it needs changing back for cicd*
-	- **TELBlazorPackageSource** → https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json
-		- change it in nuget.config and .props, the easiest way is to change the environment variable used, but dont commit it to cicd 
-		- *For development you will probably just use a local or remote source so you are likely just to set the environment variables and leave them after the setup checks*
-	- **NupkgOutputPath** → the same local folder outside of the solution
-	- **UseTELBlazorComponentsProjectReference** → false
-	- **TELBlazorPackageVersion** → [Find package number not dev package number, dev packages have -branchname](https://github.com/TechnologyEnhancedLearning/TELBlazor/pkgs/nuget/TELBlazor.Components)
-	- **DisablePackageGeneration** → true
-	- set .runsettings
-		- **Tracing** → true
-		- **HeadlessTesting** → true 
-- delete lock files
-- clean/build
-- *if caching issues close and reopen visual studio*
-- Run tests in test runner
-- run the hosted project
-- run the wasm project
-- check that the right package is being used
+The project should now work. See other sections for what projects to run, and configuration.
 
+> ⚠️ read the contribution section before creating a branch or commits ⚠️
 
 
+### Getting Started with the Project following Setup
 
+It is recommended you check setup by reading this section and making sure packages can be created and consumed and all tests pass.
 
+#### Contributing to the project
 
-## How to consume TELBlazor.Components 
+- [Branch naming rules](https://github.com/TechnologyEnhancedLearning/TELBlazor/blob/master/.releaserc.json)
+- ⚠️ Commit names are used to generate the package version, repo version and change log so much be correct ⚠️[Commit Naming Rules](https://github.com/TechnologyEnhancedLearning/TELBlazor/blob/master/.commitlintrc.json)
+	- e.g. 
+		> "docs(readme): added detail on commit rules"
+	
+#### Configuring the project
+
+| File | Description | Variable | Purpose|
+|---|---|---|---|
+|runsettings|configures playwrights| headless, tracing| make tests more detailed or visible or run faster|
+|nuget.config|overwritten in cicd so feel free to change it| Remote and local telblazor nuget sources |Comment in/out depending which source you need|	
+|Package.Settings.Props | Used by CICD can receive environment variables or msbuild parameters | 	NugetPackagesOutputPath  UseTELBlazorComponentsProjectReference  TELBlazorPackageVersion DisablePackageGeneration | For CICD |
+|Package.Settings.Props.local| overwrite package.settings.props locally | NugetPackagesOutputPath | Where you want your package creating |
+|Package.Settings.Props.local| overwrite package.settings.props locally | UseTELBlazorComponentsProjectReference | For quick development use the project reference instead of a package |
+|Package.Settings.Props.local| overwrite package.settings.props locally| TELBlazorPackageVersion | local package version you're creating or consuming |
+|Package.Settings.Props.local|overwrite package.settings.props locally | DisablePackageGeneration | Stops package creation on build. |
+|appsettings | | | Serilog configuration |
+
+> **Nb.** Its recommended not to build the solution with package generation enabled and project reference disabled at the same time.
+> **Nb.** Creating your package outside of the project can be convenient for other local solutions consuming it.
+
+
+
+#### Running the projects
+- depending on whether your consuming a package or using a project reference set package.settings.props.local UseTELBlazorComponentsProjectReference to what you want
+- run wasmserverhost to see the showcase as blazor wasm prerendered
+- run wasmstaticclient to see pure wasm site
+
+#### Building the package
+- To build a package
+	- nuget config
+		- ensure the feed is still set to local```<add key="TELBlazorPackageSource" value="%LOCAL_PACKAGES_PATH%" />```
+	- Package.settings.props.local to create package
+		- NugetPackagesOutputPath -> LOCAL_PACKAGES_PATH
+		- UseTELBlazorComponentsProjectReference -> true
+		- TELBlazorPackageVersion -> 9.9.9-local of something higher than you have
+		- DisablePackageGeneration -> false
+	- delete lock files
+	- build solution
+	- change package.settings.props.local to consume package
+		- UseTELBlazorComponentsProjectReference -> false
+		- DisablePackageGeneration -> true
+	- build solution
+
+
+
+#### Testing the project
+- you can use the test runner
+- runsettings allows configuration of headless and tracing
+- packagesettings.props sets thresholds
+- running at solution level ./run-tests-and-report-with-env-values.ps1 (see in the file for specific arguments you may want to set)
+	- will produce a test coverage site [your repo folder]/TELBlazor/CoverageReport/index.html
+
+
+
+#### Tips
+
+- If you don't want to wait for the pipeline to fail your commit names and for pushes to accidently expose your secrets: you may want to add
+	- gitguardian from confluence docs (follow it to the letter) [gitguardian global setup instructions](https://hee-tis.atlassian.net/wiki/spaces/TP/pages/3855253505/GitGuardian+Setup+-+Simplified+Version)
+	- and add a pre-commit and push hook (you need both as you cannot lint what hasn't yet been commit) you can add these to your git templates if you want them for every repo, or just to this repos pre- push- commits, or you can be lazy and add them into the gitguardian hook
+	- you will need git commitlint globally (angular because it goes with the versioning tool for repo versioning)
+		
+		```
+			npm install -g @commitlint/cli @commitlint/config-angular
+		```
+	-	You can put into your pre-push, pre-commit hook, or into the gitguardian hooks some logic like the below.
+	```
+			#### --- Commitlint Logic (force local config) ---
+			REPO_ROOT=$(git rev-parse --show-toplevel)
+			CONFIG_PATH="$REPO_ROOT/.commitlintrc.json"
+			echo "COMMIT_MSG_FILE is one msg behind it is only set to the commit your trying to commit after the commit succeeds so this script is one behind"
+			echo "so would work best in prepush template"
+			echo "To fix squash out the commit following renaming and renaming commit_editmsg and if pushed to remote git push --force"
+			COMMIT_MSG_FILE="$REPO_ROOT/.git/COMMIT_EDITMSG"
+
+			# Check if the local .commitlintrc.json exists in the repository root
+			if [ -f "$CONFIG_PATH" ]; then
+
+				echo "✅ Local .commitlintrc.json found at: $CONFIG_PATH. Running commitlint..."
+				echo "⚠️ if commit lint fails in precommit its actually reading previous commit name you need to reset or squash make a new commit and change .git/COMMIT_EDITMSG to something that would pass. ⚠️"
+
+				if command -v npx &> /dev/null; then
+				
+						cd "$REPO_ROOT" || exit 1
+
+						# Debug: Print the commit message file content
+						if [ -f "$COMMIT_MSG_FILE" ]; then
+							echo "Commit message content:"
+							cat "$COMMIT_MSG_FILE"
+						else
+							echo "❌ Commit message file not found!"
+							exit 1
+						fi
+						
+						
+						# Run commitlint, explicitly pointing to the local config and providing the commit message via stdin
+						OUTPUT1=$(npx.cmd --no -- commitlint --config=".commitlintrc.json" --edit="$COMMIT_MSG_FILE" 2>&1)
+						
+						EXIT_CODE1=$?
+						# echo "!!!!!!!!!!! OUTPUT1"
+						# echo "$OUTPUT1"
+						
+						
+						# OUTPUT2=$(npx.cmd --no -- commitlint --config=".commitlintrc.json" --from=origin/master --to=HEAD 2>&1)
+						
+						# EXIT_CODE2=$?
+						# echo "!!!!!!!!!!! OUTPUT2"
+						# echo "$OUTPUT2"
+						
+						# OUTPUT3=$(npx.cmd --no -- commitlint --config=".commitlintrc.json"  --from-last-tag 2>&1)
+						
+						
+						# EXIT_CODE3=$?
+						# echo "!!!!!!!!!!! OUTPUT3"
+						# echo "$OUTPUT3"
+						
+
+
+					#if [ "$EXIT_CODE1" -ne 0 ] || [ "$EXIT_CODE2" -ne 0 ] || [ "$EXIT_CODE3" -ne 0 ];  then
+					if [ "$EXIT_CODE1" -ne 0 ];  then
+						echo "❌ Commitlint failed:"
+						
+						echo "$OUTPUT1"
+						exit 1
+					else
+						echo "✅ Commitlint passed!"
+					fi
+				else
+					echo "⚠️ npx not found. Please ensure Node.js and npm are installed to use commitlint."
+					# Optionally fail here
+					# exit 1
+				fi
+			else
+				echo "ℹ️ No local .commitlintrc.json found in $REPO_ROOT. Skipping commitlint."
+			fi
+		``` 
+
+### Troubleshooting 
+#### Package build errors 
+- delete local `TELBlazor.Components` packages
+- check `TELBlazorPackageVersion` has been incremented
+- delete lock files
+- clean solution
+- check environment values in `props` and `nuget.config`
+- restore nuget packages 
+- restore solution
+- if still not working delete bin and obj
+- if still not working close visual studio and reopen
+- if there are still issues its easier to problem solve by using a random very high `TELBlazor.Components` package version number and ensuring it fails and says it found the source but not the version
+#### Git commit names
+- git commit names can be caught locally
+- if they are not
+	- fetch, pull, squash to before the change and then git push force
+
+
+# How to consume TELBlazor.Components
 1. Select a production version of the package [Package list for TELBlazor.Component on git](https://github.com/TechnologyEnhancedLearning/TELBlazor/pkgs/nuget/TELBlazor.Components)
 1. Set up css references and dependency injection using lean host examples WasmServerHost, WasmServerHost.Client and WasmStaticClient
 from the repo and ShowCase project for how to include the package. 
 1. You will need a copy of nhsuk.css and a reference <link href="css/nhsuk.css" rel="stylesheet" /> see gulp in the previously mentioned projects
-
+1. See setup notes for instructions on getting a git nuget token for consuming the package.
 
 # Solution and Pipeline
 
-## Features of solution
-- run-tests-and-report-with-env-values.ps1 runs test similar to pipeline
-	- create html coverage report and threshold check (recommendation: bookmark local html file in browser to easily view)
-	
 ## Features of CICD
 - There is a readme in the CICD
 - A DevShowCase sight is created using a DevPackage and the same in production
 	- The dev pipeline also publishes a coverage report
 
-## Local Files and Development Settings
-
 
 # Solution Detail
 
@@ -446,13 +305,13 @@ from the repo and ShowCase project for how to include the package.
  - TELBlazor.Components.ShowCase.Shared
 	- this is a razor component library
  - TELBlazor.Components.ShowCase.E2ETests.WasmServerHost
-	- Wasm global hosted
+	- Wasm host
  - TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client 
-	- Wasm global hosted
+	- Wasm hosted
  - TELBlazor.Components.ShowCase.WasmStaticClient
-	- Wasm global standalone 
+	- Wasm standalone 
 	
-## Configuration
+
 
 ### Logging
 - For more detailed dependency injected logging see MVCBlazor project	
@@ -465,7 +324,7 @@ from the repo and ShowCase project for how to include the package.
 changed so that they are using the same and this could be done in future 
 as the libraries improve but currently each is being used with the 
 recommend tool it is designed for though both support the others tool.
-- not using data-testid="TELButton" because we should use aria selectors. We may change this later.
+- not using data-testid="TELButton" because we should use aria selectors. We may change this later (first rule of aria dont use aria).
    - e.g. data-attribute-telblazorcomponentname="TelBlazorButton"
 - not using guid id as i have elsewhere either [Parameter] public string ElementId { get; set; } = $"tel-button-{Guid.NewGuid():N}";
 - various things have been cut from mvcblazor so it is worth returning to for potential solutions if developing this solution [MVCBlazor repo](https://github.com/TechnologyEnhancedLearning/MVCBlazor)
diff --git a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/Program.cs b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/Program.cs
index 3e478c6..12807f3 100644
--- a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/Program.cs
+++ b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/Program.cs
@@ -1,4 +1,6 @@
 // Microsoft namespaces
+// Still required server side even if not used so components dont fail
+using Blazored.LocalStorage;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
@@ -6,27 +8,22 @@
 using Microsoft.Extensions.Http;
 using Microsoft.Extensions.Logging;
 using Microsoft.Extensions.Options;
-
 // Serilog core (used via appsettings, do not delete even if vs marks not in use)
 using Serilog;
 using Serilog.Configuration;
 using Serilog.Core;
 using Serilog.Events;
-
 // Serilog extensions and sinks (used via appsettings, do not delete even if vs marks not in use)
 using Serilog.Extensions.Logging;
 using Serilog.Formatting.Compact;
 using Serilog.Settings.Configuration;
 using Serilog.Sinks.BrowserConsole;
-
-// Still required server side even if not used so components dont fail
-using Blazored.LocalStorage;
-
 // TELBlazor components
 using TELBlazor.Components.Core.Configuration;
 using TELBlazor.Components.Core.Services.HelperServices;
-using TELBlazor.Components.ShowCase.E2ETests.WasmServerHost;
+using TELBlazor.Components.OptionalImplementations.Core.DI;
 using TELBlazor.Components.OptionalImplementations.Core.Services.HelperServices;
+using TELBlazor.Components.ShowCase.E2ETests.WasmServerHost;
 
 
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
@@ -74,7 +71,7 @@
     // qqqq do we need it builder.Services.AddScoped<LoggingLevelSwitch>(sp => levelSwitch);
     builder.Services.AddScoped<ILogLevelSwitcherService, SerilogLogLevelSwitcherService>();
     builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+    builder.Services.AddTELBlazorComponentServicesForTestComponents();
     await builder.Build().RunAsync();
 }
 catch (Exception ex)
diff --git a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/packages.lock.json b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/packages.lock.json
index ca686c8..ed2f56d 100644
--- a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/packages.lock.json
+++ b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/packages.lock.json
@@ -40,15 +40,15 @@
       },
       "Microsoft.NET.ILLink.Tasks": {
         "type": "Direct",
-        "requested": "[8.0.16, )",
-        "resolved": "8.0.16",
-        "contentHash": "0H1QaKpVibe++Zx6EYJQGhrpfz2bBPGiQ7Rpsmx8I3+oKv+ZRRIfVfmcj50KuZlhhRE6V02y5bUjP+V2oPM2ng=="
+        "requested": "[8.0.17, )",
+        "resolved": "8.0.17",
+        "contentHash": "x5/y4l8AtshpBOrCZdlE4txw8K3e3s9meBFeZeR3l8hbbku2V7kK6ojhXvrbjg1rk3G+JqL1BI26gtgc1ZrdUw=="
       },
       "Microsoft.NET.Sdk.WebAssembly.Pack": {
         "type": "Direct",
-        "requested": "[8.0.16, )",
-        "resolved": "8.0.16",
-        "contentHash": "Lu5e8iqQzLnMrD0WmHz6yw7EEauaP9Ip5RxtZgSmi1GhcymZvL1MU6vFerVHbT+FPuqHSlEyM3rXtcQE8NElAw=="
+        "requested": "[8.0.17, )",
+        "resolved": "8.0.17",
+        "contentHash": "wufm5kIsP5PlG54bahrhJDPbN114ru7mIYOdyVQS4sCr3811SLqcn1X6rg3mxZgGxRbyfMcMBXcg5P2HV/MRYQ=="
       },
       "Serilog": {
         "type": "Direct",
@@ -318,11 +318,18 @@
         "type": "Project",
         "dependencies": {
           "Blazored.LocalStorage": "[4.5.0, )",
+          "Markdig": "[0.41.3, )",
           "Microsoft.AspNetCore.Components.Web": "[8.0.14, )",
           "Serilog": "[4.2.0, )",
-          "TELBlazor.Components": "[1.8.0, )"
+          "TELBlazor.Components": "[1.9.2-local, )"
         }
       },
+      "Markdig": {
+        "type": "CentralTransitive",
+        "requested": "[0.41.3, )",
+        "resolved": "0.41.3",
+        "contentHash": "i3vSTyGpBGWbJB04aJ3cPJs0T3BV2e1nduW3EUHK/i+xUupYbym75iZPss/XjqhS5JlBErwQYnx7ofK3Zcsozg=="
+      },
       "Microsoft.AspNetCore.Components.Web": {
         "type": "CentralTransitive",
         "requested": "[8.0.14, )",
diff --git a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/wwwroot/appsettings.Development.json.template b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/wwwroot/appsettings.Development.json.template
index 8423046..daec42c 100644
--- a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/wwwroot/appsettings.Development.json.template
+++ b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/wwwroot/appsettings.Development.json.template
@@ -1,5 +1,9 @@
 {
   "APIs": {
+    "SearchApi": {
+      "BaseUrl": "https://lh-openapi.dev.local",
+      "BearerToken": "your_token_here"
+    }
   },
 
   "Serilog": {
diff --git a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/Program.cs b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/Program.cs
index fd02793..bc5c216 100644
--- a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/Program.cs
+++ b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/Program.cs
@@ -27,7 +27,7 @@
 using TELBlazor.Components.Core.Services.HelperServices;
 using TELBlazor.Components.ShowCase.E2ETests.WasmServerHost;
 using TELBlazor.Components.OptionalImplementations.Core.Services.HelperServices;
-
+using TELBlazor.Components.OptionalImplementations.Core.DI;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -76,7 +76,7 @@
     //Scoped because being consumed with storage where singleton doesnt survive mvc page teardown
     builder.Services.AddScoped<LoggingLevelSwitch>(sp => levelSwitch);
     builder.Services.AddScoped<ILogLevelSwitcherService, SerilogLogLevelSwitcherService>();
-
+    builder.Services.AddTELBlazorComponentServicesForTestComponents();
 
     var app = builder.Build();
     // This is less blazor more endpoint logging
diff --git a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/_Imports.razor b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/_Imports.razor
index 203f309..0be6f53 100644
--- a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/_Imports.razor
+++ b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/_Imports.razor
@@ -2,3 +2,4 @@
 @using Microsoft.AspNetCore.Components.Web
 @using static Microsoft.AspNetCore.Components.Web.RenderMode
 @using TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client
+@using TELBlazor.Components.OptionalImplementations.Test
\ No newline at end of file
diff --git a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/appsettings.Development.json.template b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/appsettings.Development.json.template
index bb1e628..319791f 100644
--- a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/appsettings.Development.json.template
+++ b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/appsettings.Development.json.template
@@ -1,5 +1,9 @@
 {
   "APIs": {
+    "SearchApi": {
+      "BaseUrl": "https://lh-openapi.dev.local",
+      "BearerToken": "your_token_here"
+    }
   },
   "Serilog": {
     "Using": [
diff --git a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/packages.lock.json b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/packages.lock.json
index fd9d8fa..9dda67d 100644
--- a/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/packages.lock.json
+++ b/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/packages.lock.json
@@ -348,7 +348,7 @@
           "Serilog.Settings.Configuration": "[8.0.0, )",
           "Serilog.Sinks.BrowserConsole": "[8.0.0, )",
           "Serilog.Sinks.Http": "[8.0.0, )",
-          "TELBlazor.Components": "[1.8.0, )",
+          "TELBlazor.Components": "[1.9.2-local, )",
           "TELBlazor.Components.ShowCase.Shared": "[1.0.0, )"
         }
       },
@@ -356,11 +356,18 @@
         "type": "Project",
         "dependencies": {
           "Blazored.LocalStorage": "[4.5.0, )",
+          "Markdig": "[0.41.3, )",
           "Microsoft.AspNetCore.Components.Web": "[8.0.14, )",
           "Serilog": "[4.2.0, )",
-          "TELBlazor.Components": "[1.8.0, )"
+          "TELBlazor.Components": "[1.9.2-local, )"
         }
       },
+      "Markdig": {
+        "type": "CentralTransitive",
+        "requested": "[0.41.3, )",
+        "resolved": "0.41.3",
+        "contentHash": "i3vSTyGpBGWbJB04aJ3cPJs0T3BV2e1nduW3EUHK/i+xUupYbym75iZPss/XjqhS5JlBErwQYnx7ofK3Zcsozg=="
+      },
       "Microsoft.AspNetCore.Components.Web": {
         "type": "CentralTransitive",
         "requested": "[8.0.14, )",
diff --git a/TELBlazor.Components.ShowCase.E2ETests/packages.lock.json b/TELBlazor.Components.ShowCase.E2ETests/packages.lock.json
index 6d47616..9515f63 100644
--- a/TELBlazor.Components.ShowCase.E2ETests/packages.lock.json
+++ b/TELBlazor.Components.ShowCase.E2ETests/packages.lock.json
@@ -1601,7 +1601,7 @@
           "Serilog.Settings.Configuration": "[8.0.0, )",
           "Serilog.Sinks.BrowserConsole": "[8.0.0, )",
           "Serilog.Sinks.Http": "[8.0.0, )",
-          "TELBlazor.Components": "[1.8.0, )",
+          "TELBlazor.Components": "[1.9.2-local, )",
           "TELBlazor.Components.ShowCase.Shared": "[1.0.0, )"
         }
       },
@@ -1609,9 +1609,10 @@
         "type": "Project",
         "dependencies": {
           "Blazored.LocalStorage": "[4.5.0, )",
+          "Markdig": "[0.41.3, )",
           "Microsoft.AspNetCore.Components.Web": "[8.0.14, )",
           "Serilog": "[4.2.0, )",
-          "TELBlazor.Components": "[1.8.0, )"
+          "TELBlazor.Components": "[1.9.2-local, )"
         }
       },
       "Blazored.LocalStorage": {
@@ -1623,6 +1624,12 @@
           "Microsoft.AspNetCore.Components.Web": "8.0.0"
         }
       },
+      "Markdig": {
+        "type": "CentralTransitive",
+        "requested": "[0.41.3, )",
+        "resolved": "0.41.3",
+        "contentHash": "i3vSTyGpBGWbJB04aJ3cPJs0T3BV2e1nduW3EUHK/i+xUupYbym75iZPss/XjqhS5JlBErwQYnx7ofK3Zcsozg=="
+      },
       "Microsoft.AspNetCore.Components.Web": {
         "type": "CentralTransitive",
         "requested": "[8.0.14, )",
diff --git a/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor b/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor
index e22acfb..6cbdb6e 100644
--- a/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor
+++ b/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor
@@ -1,5 +1,7 @@
-@layout ComponentPageLayout
-<div class="component-showcase">
+
+@layout ComponentPageLayout
+@inject HttpClient Http
+<section class="component-showcase">
     @if(IsTestComponent){
         <h1 class="test-component-warning-header">This is a Test Component</h1>
         <p>Test components are components not for production but to aid testing. Or to demo a feature not planned for production.</p>
@@ -7,20 +9,31 @@
     }
     
     <h2>@Title</h2>
+    <JSDisabledWarning/>
     <TELBlazorPackageVersionInformation />
-    <div class="component-presentor">
+    
+    <section class="component-presentor">
+        <h2>Component Example Implementation</h2>
         @ChildContent
-    </div>
-    <div class="component-information">
+    </section>
+    <section class="component-information">
         <h2>Instructions</h2>
         <p>@Instructions</p>
-    </div>
-    <div class="component-information">
-        <h2>Description</h2>
+    </section>
+    <section class="component-information">
+        <h2>Short Description</h2>
         <p>@Description</p>
-    </div>
+    </section>
+    @if (ComponentReadMeMarkdownUrl != string.Empty)
+    {
+        <section class="component-readme">
+            <h2>ReadMe.Md from Components Folder in the Solution</h2>
+            <a href="@ComponentReadMeMarkdownUrl" target="_blank" rel="noopener noreferrer">See the file directly</a>
+            <div class="component-readme-html-container">@((MarkupString)ComponentReadMeHtmlContent)</div>
+        </section>
+    }
 
-</div>
+</section>
 @code
 {
 
@@ -30,13 +43,41 @@
     [Parameter, EditorRequired]
     public required string Title { get; set; } = string.Empty;
 
+    /// <summary>
+    /// Description of what the example implementation shows
+    /// </summary>
     [Parameter,EditorRequired]
     public required string Description { get; set; } = string.Empty;
-
+    /// <summary>
+    /// Instructions of how to interact with example implementation
+    /// </summary>
     [Parameter, EditorRequired]
     public required string Instructions { get; set; } = string.Empty;
 
     [Parameter, EditorRequired]
     public required RenderFragment ChildContent { get; set; }
+    /// <summary>
+    /// Markdown of how the generic component not the showcase specific implementation
+    /// </summary>
+    [Parameter] public string ComponentReadMeMarkdownUrl { get; set; } = string.Empty;
+
+    private string ComponentReadMeHtmlContent = "<em>Loading...</em>";
+
+    protected override async Task OnInitializedAsync()
+    {
+        try
+        {
+            if (!string.IsNullOrWhiteSpace(ComponentReadMeMarkdownUrl))
+            {
+                var markdown = await Http.GetStringAsync(ComponentReadMeMarkdownUrl);
+                ComponentReadMeHtmlContent = Markdig.Markdown.ToHtml(markdown);
+            }
+        }
+        catch (Exception ex)
+        {
+            ComponentReadMeHtmlContent = $"<p><strong>Error:</strong> Could not load markdown.<br/>{ex.Message}</p>";
+        }
+    }
 }
 
+
diff --git a/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor.css b/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor.css
index 8a4da01..7f3acbb 100644
--- a/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor.css
+++ b/TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor.css
@@ -30,3 +30,18 @@
     color: #4b5563;  
     line-height: 1.6;
 }
+h1, h2, h3, h4, h5, h6 {
+    color: #4b5563;
+}
+.component-readme-html-container {
+    border: 1.5px solid #d1d5db; /* subtle gray border */
+    background-color: #f9fafb; /* very light gray background */
+    padding: 1.25rem; /* comfortable padding */
+    border-radius: 0.5rem; /* rounded corners */
+    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05); /* gentle inset shadow */
+    max-height: 400px; /* limit height */
+    overflow-y: auto; /* scroll if content is tall */
+    color: #374151; /* dark gray text */
+    font-size: 0.95rem;
+    line-height: 1.5;
+}
\ No newline at end of file
diff --git a/TELBlazor.Components.ShowCase.Shared/Layouts/MainLayout.razor b/TELBlazor.Components.ShowCase.Shared/Layouts/MainLayout.razor
index 9fdc4aa..e012873 100644
--- a/TELBlazor.Components.ShowCase.Shared/Layouts/MainLayout.razor
+++ b/TELBlazor.Components.ShowCase.Shared/Layouts/MainLayout.razor
@@ -21,6 +21,7 @@
 
     <div class="nhsuk-navigation-container">
     </div>
+
 </header>
 
 
@@ -29,6 +30,7 @@
 
     <main class="nhsuk-main-wrapper nhsuk-main-wrapper--s app-main-wrapper" id="maincontent" role="main">
         <TELBlazorPackageVersionInformation/>
+        <JSDisabledWarning/>
         <div class="nhsuk-grid-row">
             <div class="nhsuk-grid-column-full app-component-reading-width">
 
diff --git a/TELBlazor.Components.ShowCase.Shared/Pages/Error.razor b/TELBlazor.Components.ShowCase.Shared/Pages/Error.razor
index 4248f90..36c62e9 100644
--- a/TELBlazor.Components.ShowCase.Shared/Pages/Error.razor
+++ b/TELBlazor.Components.ShowCase.Shared/Pages/Error.razor
@@ -1,4 +1,6 @@
 @page "/Error/"
-<img src="https://images.app.goo.gl/KNwMr1KibcuxXCkN8"
+
+<h1>This error has taken you to the ocean! ...</h1>
+<img src="https://i.pinimg.com/474x/d8/eb/af/d8ebaf49f69484240880535db02dbe33.jpg"
      alt="Error Image Finn Ocean"
      style="width:75%; height:75%; object-fit: cover; display: block;" />
\ No newline at end of file
diff --git a/TELBlazor.Components.ShowCase.Shared/Pages/NoJSFormSubmitStubPage.razor b/TELBlazor.Components.ShowCase.Shared/Pages/NoJSFormSubmitStubPage.razor
new file mode 100644
index 0000000..48d32a5
--- /dev/null
+++ b/TELBlazor.Components.ShowCase.Shared/Pages/NoJSFormSubmitStubPage.razor
@@ -0,0 +1,12 @@
+@page "/nojsformsubmitstubpage"
+
+<h1> Welcome to nojsformsubmitstubpage </h1>
+<p>NoJS form submit stub page, if your here your in a nojs browser or clicked quick on a prerender hosting of the page, 
+    testing can catch the request before it gets here and check the data being sent is correct before redirection happens.
+</p>
+    <p> but if you're not here because of the about then something went wrong...</p>
+    <h2>Welcome to the ocean!</h2>
+<img src="https://i.pinimg.com/474x/d8/eb/af/d8ebaf49f69484240880535db02dbe33.jpg"
+     alt="Error Image Finn Ocean"
+     style="width:75%; height:75%; object-fit: cover; display: block;" />
+
diff --git a/TELBlazor.Components.ShowCase.Shared/Pages/OptionalImplementations/TestComponentPages/SearchExperimentPage.razor b/TELBlazor.Components.ShowCase.Shared/Pages/OptionalImplementations/TestComponentPages/SearchExperimentPage.razor
index 4e3352d..2f1c1d4 100644
--- a/TELBlazor.Components.ShowCase.Shared/Pages/OptionalImplementations/TestComponentPages/SearchExperimentPage.razor
+++ b/TELBlazor.Components.ShowCase.Shared/Pages/OptionalImplementations/TestComponentPages/SearchExperimentPage.razor
@@ -3,13 +3,23 @@
 <ShowCase Title="@Title"
           Instructions="@Instructions"
           Description="@Description"
-          IsTestComponent="@IsTestComponent">
-    <SearchExperiment />
+          IsTestComponent="@IsTestComponent"
+          ComponentReadMeMarkdownUrl="@ComponentReadMeMarkdownUrl">
+    <SearchExperiment NoJSActionUrl="@NoJSActionUrl"
+          NoJSControllerSetSearchText="@NoJSSearchText"
+          NoJSControllerSetSearchResults="@NoJSSearchResults"
+          NoJSControllerSetSuggestions="@NoJSSuggestions"/>
+    
 </ShowCase>
 
 @code {
     private bool IsTestComponent => true;
     private string Title => "SearchExperiment";
-    private string Instructions => "Try searching";
+    private string Instructions => "Try searching: ⚠️ Warning: This is a test element. It is only hitting the suggestion endpoint currently for searches and for suggestions, as that is all that is available. Suggestions shown won’t necessarily lead to effective or relevant search results.";
     private string Description => "This is not a prototype for the new search component its a test component just for a component needing a service only";
-}
+    private string NoJSSearchText = "Example previous nojs search";
+    private string NoJSActionUrl = "/nojsformsubmitstubpage";
+    private List<string> NoJSSearchResults = new List<string>() {"In a nojs browser", " the user would first get a blanks components ", " they then send their data",  " the Controller would provide","this static info back", "including original provideds search", "having used the same service", "serverside in its controller"};
+    private List<string> NoJSSuggestions = new List<string>() {"Unsure if this would work ","it might do but we wouldnt", " want to spam a page reload per button press ", " so maybe there would be different suggestions in nojs" };
+    private string ComponentReadMeMarkdownUrl = "https://raw.githubusercontent.com/TechnologyEnhancedLearning/TELBlazor/refs/heads/master/TELBlazor.Components/OptionalImplementations/TestComponents/SearchExperiment/README.md";
+}
\ No newline at end of file
diff --git a/TELBlazor.Components.ShowCase.Shared/TELBlazor.Components.ShowCase.Shared.csproj b/TELBlazor.Components.ShowCase.Shared/TELBlazor.Components.ShowCase.Shared.csproj
index 46dc96c..8e19aef 100644
--- a/TELBlazor.Components.ShowCase.Shared/TELBlazor.Components.ShowCase.Shared.csproj
+++ b/TELBlazor.Components.ShowCase.Shared/TELBlazor.Components.ShowCase.Shared.csproj
@@ -10,6 +10,7 @@
 	</ItemGroup>
 	<ItemGroup>
 		<PackageReference Include="Blazored.LocalStorage" />
+		<PackageReference Include="Markdig" />
 		<PackageReference Include="Microsoft.AspNetCore.Components.Web" />
 		<PackageReference Include="Serilog" />
 		<PackageReference Include="TELBlazor.Components" />
@@ -33,4 +34,5 @@
 		-->
 		<Exec WorkingDirectory="$(MSBuildProjectDirectory)/.." Command="npx gulp --cwd &quot;$(MSBuildProjectDirectory)&quot; --gulpfile &quot;$(MSBuildProjectDirectory)/gulpfile.js&quot;" />
 	</Target>
+
 </Project>
diff --git a/TELBlazor.Components.ShowCase.Shared/Utilities/JSDisabledWarning.razor b/TELBlazor.Components.ShowCase.Shared/Utilities/JSDisabledWarning.razor
new file mode 100644
index 0000000..667a1b3
--- /dev/null
+++ b/TELBlazor.Components.ShowCase.Shared/Utilities/JSDisabledWarning.razor
@@ -0,0 +1,3 @@
+<noscript b-e5z3y0iorl="">
+    <div style="border: 2px solid #e67e22; background-color: #fef5e7; padding: 1em; margin: 1em 0; border-radius: 5px; font-family: sans-serif;">⚠️ <strong b-e5z3y0iorl="">JavaScript Disabled:</strong> The showcase does not have controller endpoints, it's' pure blazor, form posts to generate more static content will result in seeing a form error. However the tests can intersept the posts and check the right data is passed.</div>
+</noscript>
\ No newline at end of file
diff --git a/TELBlazor.Components.ShowCase.Shared/_Imports.razor b/TELBlazor.Components.ShowCase.Shared/_Imports.razor
index a54e1eb..62c1560 100644
--- a/TELBlazor.Components.ShowCase.Shared/_Imports.razor
+++ b/TELBlazor.Components.ShowCase.Shared/_Imports.razor
@@ -11,8 +11,9 @@
 @using TELBlazor.Components.Core.Extensions
 @using Microsoft.AspNetCore.Components.Forms
 @using TELBlazor.Components.Components.BaseComponents
-@using TELBlazor.Components.OptionalImplementations.TestComponents
+@using TELBlazor.Components.OptionalImplementations.Test.TestComponents
 @using Microsoft.Extensions.Logging;
 @using Microsoft.AspNetCore.Components.Routing
 @using TELBlazor.Components.ShowCase.Shared.Layouts.ComponentLayouts
-@using TELBlazor.Components.OptionalImplementations.TestComponents.SearchExperiment
+@using TELBlazor.Components.OptionalImplementations.Test.TestComponents.SearchExperiment
+@using TELBlazor.Components.ShowCase.Shared.Utilities
diff --git a/TELBlazor.Components.ShowCase.Shared/packages.lock.json b/TELBlazor.Components.ShowCase.Shared/packages.lock.json
index 555483d..354fe01 100644
--- a/TELBlazor.Components.ShowCase.Shared/packages.lock.json
+++ b/TELBlazor.Components.ShowCase.Shared/packages.lock.json
@@ -11,6 +11,12 @@
           "Microsoft.AspNetCore.Components.Web": "8.0.0"
         }
       },
+      "Markdig": {
+        "type": "Direct",
+        "requested": "[0.41.3, )",
+        "resolved": "0.41.3",
+        "contentHash": "i3vSTyGpBGWbJB04aJ3cPJs0T3BV2e1nduW3EUHK/i+xUupYbym75iZPss/XjqhS5JlBErwQYnx7ofK3Zcsozg=="
+      },
       "Microsoft.AspNetCore.Components.Web": {
         "type": "Direct",
         "requested": "[8.0.14, )",
diff --git a/TELBlazor.Components.ShowCase.WasmStaticClient/Program.cs b/TELBlazor.Components.ShowCase.WasmStaticClient/Program.cs
index 143e35f..9387134 100644
--- a/TELBlazor.Components.ShowCase.WasmStaticClient/Program.cs
+++ b/TELBlazor.Components.ShowCase.WasmStaticClient/Program.cs
@@ -1,35 +1,31 @@
 // Microsoft namespaces
+// Still required server side even if not used so components dont fail
+using Blazored.LocalStorage;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Hosting;
 using Microsoft.Extensions.Http;
 using Microsoft.Extensions.Logging;
 using Microsoft.Extensions.Options;
-using Microsoft.Extensions.Hosting;
-using Microsoft.Extensions.DependencyInjection;
-
 // Serilog core (used via appsettings, do not delete even if vs marks not in use)
 using Serilog;
 using Serilog.Configuration;
 using Serilog.Core;
 using Serilog.Events;
-
 // Serilog extensions and sinks (used via appsettings, do not delete even if vs marks not in use)
 using Serilog.Extensions.Logging;
 using Serilog.Formatting.Compact;
 using Serilog.Settings.Configuration;
 using Serilog.Sinks.BrowserConsole;
-
-// Still required server side even if not used so components dont fail
-using Blazored.LocalStorage;
-
 // TELBlazor components
 using TELBlazor.Components.Core.Configuration;
 using TELBlazor.Components.Core.Services.HelperServices;
-
-using TELBlazor.Components.ShowCase.WasmStaticClient;
+using TELBlazor.Components.OptionalImplementations.Core.DI;
 using TELBlazor.Components.OptionalImplementations.Core.Services.HelperServices;
+using TELBlazor.Components.ShowCase.WasmStaticClient;
 
 
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
@@ -78,7 +74,7 @@
     builder.Services.AddScoped<LoggingLevelSwitch>(sp => levelSwitch);
     builder.Services.AddScoped<ILogLevelSwitcherService, SerilogLogLevelSwitcherService>();
     builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
+    builder.Services.AddTELBlazorComponentServicesForTestComponents();
     await builder.Build().RunAsync();
 }
 catch (Exception ex)
diff --git a/TELBlazor.Components.ShowCase.WasmStaticClient/packages.lock.json b/TELBlazor.Components.ShowCase.WasmStaticClient/packages.lock.json
index a5fc1e5..05c381e 100644
--- a/TELBlazor.Components.ShowCase.WasmStaticClient/packages.lock.json
+++ b/TELBlazor.Components.ShowCase.WasmStaticClient/packages.lock.json
@@ -76,15 +76,15 @@
       },
       "Microsoft.NET.ILLink.Tasks": {
         "type": "Direct",
-        "requested": "[8.0.16, )",
-        "resolved": "8.0.16",
-        "contentHash": "0H1QaKpVibe++Zx6EYJQGhrpfz2bBPGiQ7Rpsmx8I3+oKv+ZRRIfVfmcj50KuZlhhRE6V02y5bUjP+V2oPM2ng=="
+        "requested": "[8.0.17, )",
+        "resolved": "8.0.17",
+        "contentHash": "x5/y4l8AtshpBOrCZdlE4txw8K3e3s9meBFeZeR3l8hbbku2V7kK6ojhXvrbjg1rk3G+JqL1BI26gtgc1ZrdUw=="
       },
       "Microsoft.NET.Sdk.WebAssembly.Pack": {
         "type": "Direct",
-        "requested": "[8.0.16, )",
-        "resolved": "8.0.16",
-        "contentHash": "Lu5e8iqQzLnMrD0WmHz6yw7EEauaP9Ip5RxtZgSmi1GhcymZvL1MU6vFerVHbT+FPuqHSlEyM3rXtcQE8NElAw=="
+        "requested": "[8.0.17, )",
+        "resolved": "8.0.17",
+        "contentHash": "wufm5kIsP5PlG54bahrhJDPbN114ru7mIYOdyVQS4sCr3811SLqcn1X6rg3mxZgGxRbyfMcMBXcg5P2HV/MRYQ=="
       },
       "Serilog": {
         "type": "Direct",
@@ -461,11 +461,18 @@
         "type": "Project",
         "dependencies": {
           "Blazored.LocalStorage": "[4.5.0, )",
+          "Markdig": "[0.41.3, )",
           "Microsoft.AspNetCore.Components.Web": "[8.0.14, )",
           "Serilog": "[4.2.0, )",
-          "TELBlazor.Components": "[1.8.0, )"
+          "TELBlazor.Components": "[1.9.2-local, )"
         }
       },
+      "Markdig": {
+        "type": "CentralTransitive",
+        "requested": "[0.41.3, )",
+        "resolved": "0.41.3",
+        "contentHash": "i3vSTyGpBGWbJB04aJ3cPJs0T3BV2e1nduW3EUHK/i+xUupYbym75iZPss/XjqhS5JlBErwQYnx7ofK3Zcsozg=="
+      },
       "Microsoft.AspNetCore.Components.Web": {
         "type": "CentralTransitive",
         "requested": "[8.0.14, )",
diff --git a/TELBlazor.Components.ShowCase.WasmStaticClient/wwwroot/appsettings.Development.json.template b/TELBlazor.Components.ShowCase.WasmStaticClient/wwwroot/appsettings.Development.json.template
index 91a07f1..9508ceb 100644
--- a/TELBlazor.Components.ShowCase.WasmStaticClient/wwwroot/appsettings.Development.json.template
+++ b/TELBlazor.Components.ShowCase.WasmStaticClient/wwwroot/appsettings.Development.json.template
@@ -1,5 +1,10 @@
 {
   "APIs": {
+    /*Not in production there needs to be a specific soluton for security*/
+    "SearchApi": {
+      "BaseUrl": "https://lh-openapi.dev.local",
+      "BearerToken": "your_token_here"
+    }
   },
 
   "Serilog": {
diff --git a/TELBlazor.Components.UnitTests/_Imports.razor b/TELBlazor.Components.UnitTests/_Imports.razor
index d70747a..97cfa9b 100644
--- a/TELBlazor.Components.UnitTests/_Imports.razor
+++ b/TELBlazor.Components.UnitTests/_Imports.razor
@@ -28,7 +28,7 @@
 
 // Unit tests
 @using TELBlazor.Components.UnitTests.DI
-@using TELBlazor.Components.OptionalImplementations.TestComponents
+@using TELBlazor.Components.OptionalImplementations.Test.TestComponents
 @using TELBlazor.Components.Core.Enums
 @using TELBlazor.Components.Core.Extensions
 
diff --git a/TELBlazor.Components/Components/BaseComponents/TELButton.razor b/TELBlazor.Components/Components/BaseComponents/TELButton.razor
index 057c840..82046c9 100644
--- a/TELBlazor.Components/Components/BaseComponents/TELButton.razor
+++ b/TELBlazor.Components/Components/BaseComponents/TELButton.razor
@@ -19,26 +19,26 @@ else
 {
     @*FormData as the model doesnt really mean anything were not using it if its blazor*@
     <EditForm 
-    Model="FormData"
-    OnSubmit="HandleClick"
-    action="@NoJSActionUrl"
-    role="form"
-    tabindex="-1"
-    method="post">
-        @foreach (var keyValuePair in FormData)
-        {
-            <input tabindex="-1" type="hidden" name="@keyValuePair.Key" value="@keyValuePair.Value" />
-        }
-        <TELButtonSubComponent 
-        ButtonStyle="@ButtonStyle"
-        ButtonText="@ButtonText"
-        AriaLabel="@AriaLabel"
-        AssistiveText="@AssistiveText"
-        TabIndex="@TabIndex"
-        ToolTipTitle="@ToolTipTitle"
-        AdditionalCssClasses="@AdditionalCssClasses"
-        PreventDoubleClick="@PreventDoubleClick"
-        />
+        Model="FormData"
+        OnSubmit="HandleClick"
+        action="@NoJSActionUrl"
+        role="form"
+        tabindex="-1"
+        method="post">
+            @foreach (var keyValuePair in FormData)
+            {
+                <input tabindex="-1" type="hidden" name="@keyValuePair.Key" value="@keyValuePair.Value" />
+            }
+            <TELButtonSubComponent 
+            ButtonStyle="@ButtonStyle"
+            ButtonText="@ButtonText"
+            AriaLabel="@AriaLabel"
+            AssistiveText="@AssistiveText"
+            TabIndex="@TabIndex"
+            ToolTipTitle="@ToolTipTitle"
+            AdditionalCssClasses="@AdditionalCssClasses"
+            PreventDoubleClick="@PreventDoubleClick"
+            />
     </EditForm>
 }
 
@@ -55,7 +55,7 @@ else
     ///</summary>
     [Parameter] public bool IsSubmitButtonForEditForm { get; set; } = false;
     [Parameter] public Dictionary<string, string> FormData { get; set; } = new();
-    [EditorRequired, Parameter] public required string NoJSActionUrl { get; set; } // URL for the form submission
+    [Parameter] public string NoJSActionUrl { get; set; } = null; // URL for the form submission (not required because there may be a parent form with it if its a submit for a form)
     [Parameter] public EventCallback OnClick { get; set; } // Not required because the submit wont use it, when its placed in a form.
     [Parameter] public bool PreventDoubleClick { get; set; } = false; // View Component equivalent behaviour
 
diff --git a/TELBlazor.Components/Core/Compliance/IAccessibleComponent.cs b/TELBlazor.Components/Core/Compliance/IAccessibleComponent.cs
index c1a2036..85379d4 100644
--- a/TELBlazor.Components/Core/Compliance/IAccessibleComponent.cs
+++ b/TELBlazor.Components/Core/Compliance/IAccessibleComponent.cs
@@ -21,11 +21,15 @@ public interface IAccessibleComponent
 
         /// <summary>
         /// The title attribute for the button, shown as a tooltip.
+        /// <h1>😱😱😱😱😱 1st rule of aria don't use aria, second rule of aria ... 😱😱😱😱</h1>
+        /// qqqq
         /// </summary>
         /// <remarks>
         /// Use a brief message that reinforces the button's action. 
         /// Example: "Click to save the current list".
         /// Tooltips can provide additional context or information to users hovering over the button.
+        /// For more info, see <see href="https://service-manual.nhs.uk/accessibility/development" />
+        /// For more info, see <see href="https://service-manual.nhs.uk/accessibility/development#use-aria-patterns" />
         /// </remarks>
         public string ToolTipTitle { get; set; }
 
@@ -40,13 +44,14 @@ public interface IAccessibleComponent
         public string AssistiveText { get; set; }
 
         /// <summary>
-        /// The ARIA role of the button.
+        /// The ARIA role of the button
         /// </summary>
         /// <remarks>
         /// Define the role of the button to provide additional context for assistive technologies.
         /// Example: "button".
         /// Use roles that accurately describe the element's function. If unsure, refer to 
         /// the ARIA roles documentation to choose the appropriate role.
+
         /// </remarks>
         public string AriaRole { get; set; }
 
@@ -61,6 +66,7 @@ public interface IAccessibleComponent
         /// Example: 0.
         /// The default is 0, which includes it in the natural tab order. 
         /// This property helps with keyboard navigation.
+   
         /// </remarks>
         public int TabIndex { get; set; }
     }
diff --git a/TELBlazor.Components/OptionalImplementations/Core/DI/DI.cs b/TELBlazor.Components/OptionalImplementations/Core/DI/DI.cs
index ecf309d..72edd36 100644
--- a/TELBlazor.Components/OptionalImplementations/Core/DI/DI.cs
+++ b/TELBlazor.Components/OptionalImplementations/Core/DI/DI.cs
@@ -9,11 +9,13 @@
 using System.Text;
 using System.Threading.Tasks;
 using TELBlazor.Components.Core.Configuration;
+using TELBlazor.Components.OptionalImplementations.Test.TestComponents.SearchExperiment;
 
 namespace TELBlazor.Components.OptionalImplementations.Core.DI
 {
     public static class DI
     {
+
         private static IServiceCollection AddTELBlazorComponentServicessShared(this IServiceCollection services,
             ITELBlazorBaseComponentConfiguration TELBlazorBaseComponentConfiguration
             )
@@ -34,5 +36,12 @@ ITELBlazorBaseComponentConfiguration TELBlazorBaseComponentConfiguration
         {
             throw new NotImplementedException("This method is not implemented yet. See DI task");
         }
+        public static IServiceCollection AddTELBlazorComponentServicesForTestComponents(this IServiceCollection services)
+        {
+            services.AddHttpClient();
+            services.AddScoped<ISearchExperimentService, SearchExperimentServiceOpenApi>();
+            return services;
+        }
+
     }
 }
diff --git a/TELBlazor.Components/OptionalImplementations/TestComponents/CssSourceChecker.razor b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/CssSourceChecker.razor
similarity index 100%
rename from TELBlazor.Components/OptionalImplementations/TestComponents/CssSourceChecker.razor
rename to TELBlazor.Components/OptionalImplementations/Test/TestComponents/CssSourceChecker.razor
diff --git a/TELBlazor.Components/OptionalImplementations/TestComponents/CssSourceChecker.razor.css b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/CssSourceChecker.razor.css
similarity index 100%
rename from TELBlazor.Components/OptionalImplementations/TestComponents/CssSourceChecker.razor.css
rename to TELBlazor.Components/OptionalImplementations/Test/TestComponents/CssSourceChecker.razor.css
diff --git a/TELBlazor.Components/OptionalImplementations/TestComponents/LogLevelSwitcher.razor b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/LogLevelSwitcher.razor
similarity index 100%
rename from TELBlazor.Components/OptionalImplementations/TestComponents/LogLevelSwitcher.razor
rename to TELBlazor.Components/OptionalImplementations/Test/TestComponents/LogLevelSwitcher.razor
diff --git a/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/DummyData.cs b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/DummyData.cs
new file mode 100644
index 0000000..ac565b4
--- /dev/null
+++ b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/DummyData.cs
@@ -0,0 +1,65 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace TELBlazor.Components.OptionalImplementations.Test.TestComponents.SearchExperiment
+{
+    public static class DummyData
+    {
+        public static readonly List<string> AllTerms = new()
+{
+    "Dental care", "Dental hygiene", "Dental implants", "Dental braces", "Dental bleeding",
+    "Dental crowns", "Dental fillings", "Dental anxiety", "Dental pain", "Dental treatment",
+    "Dental checkup", "Dental cleaning", "Dental x-ray", "Dental surgery", "Dental emergency",
+    "Tooth extraction", "Toothache", "Tooth infection", "Tooth decay", "Tooth whitening",
+    "Gum disease", "Gum bleeding", "Gum recession", "Gum pain", "Gum treatment",
+    "False teeth", "Dentures", "Dental prosthetics", "Teeth grinding", "Teeth straightening",
+    "Teeth sensitivity", "Teeth whitening kits", "Wisdom teeth", "Root canal", "Jaw pain",
+
+    "Mouth ulcers", "Mouth guards", "Mouthwash", "Oral hygiene", "Oral pain", "Oral cancer",
+    "Oral surgery", "Oral examination", "Oral infection", "Bad breath", "Plaque control",
+
+    "Medical checkup", "Health checkup", "General examination", "Annual physical",
+    "Blood test", "Urine test", "X-ray chest", "CT scan", "MRI brain", "Eye examination",
+    "Vision test", "Hearing test", "Hearing aid fitting", "Skin check", "Skin biopsy",
+
+    "Back pain", "Neck pain", "Joint pain", "Chest pain", "Abdominal pain",
+    "Leg swelling", "Arm numbness", "Foot infection", "Hand injury", "Hip replacement",
+
+    "Heart checkup", "Heart surgery", "Heart failure", "Heart palpitations", "Chest tightness",
+    "Lung infection", "Pneumonia treatment", "Breathing problems", "Shortness of breath", "Asthma attack",
+
+    "Skin rash", "Skin irritation", "Eczema treatment", "Psoriasis care", "Acne treatment",
+    "Wound dressing", "Burn treatment", "Scar removal", "Skin peeling", "Allergy treatment",
+
+    "Ear infection", "Throat infection", "Sinus infection", "Eye infection", "Nasal bleeding",
+    "Frequent nosebleeds", "Throat pain", "Swollen lymph nodes", "Ear pain", "Voice loss",
+
+    "Fever symptoms", "High temperature", "Cough treatment", "Cold remedies", "Flu vaccination",
+    "COVID-19 testing", "COVID-19 symptoms", "Headache relief", "Migraine treatment", "Dizziness causes",
+
+    "Depression treatment", "Anxiety management", "Mental health support", "Counseling services",
+    "Sleep disorder", "Insomnia treatment", "Panic attacks", "Therapy sessions", "Psychiatric assessment",
+
+    "Diabetes checkup", "Blood sugar test", "Insulin treatment", "Weight management", "Obesity care",
+    "Dietician referral", "Nutrition advice", "Cholesterol test", "Hypertension treatment", "Blood pressure check",
+
+    "Cancer screening", "Mammogram exam", "Colon cancer test", "Prostate exam", "Biopsy procedure",
+    "Tumor removal", "Oncology referral", "Radiation therapy", "Chemotherapy care", "Cancer pain management",
+
+    "Pregnancy test", "Prenatal checkup", "Fertility consultation", "Birth plan", "Ultrasound scan",
+    "Labour support", "Midwife appointment", "Postnatal care", "Infant checkup", "Child immunisation",
+
+    "Vaccination record", "Tetanus shot", "Flu jab", "Hepatitis B shot", "Travel vaccines",
+
+    "Infection treatment", "Antibiotic prescription", "Inflammation control", "Immune system check",
+    "Wound infection", "Blood poisoning", "Sepsis symptoms", "Fungal infection", "Viral infection", "Bacterial infection",
+
+    "Pain management", "Bleeding control", "Emergency care", "Treatment plan", "Recovery plan",
+    "Follow-up visit", "Health advice", "Patient education", "Medication review", "Drug interaction"
+};
+
+    }
+}
diff --git a/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/ISearchExperimentService.cs b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/ISearchExperimentService.cs
new file mode 100644
index 0000000..9de77ec
--- /dev/null
+++ b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/ISearchExperimentService.cs
@@ -0,0 +1,53 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace TELBlazor.Components.OptionalImplementations.Test.TestComponents.SearchExperiment
+{
+    public interface ISearchExperimentService
+    {
+
+            /// <summary>
+            /// Gets search suggestions for a term
+            /// </summary>
+            /// <param name="term">The search term</param>
+            /// <param name="cancellationToken">Cancellation token</param>
+            /// <returns>List of suggestion strings</returns>
+            public Task<IEnumerable<string>> GetSuggestionsAsync(string term, CancellationToken cancellationToken = default);
+
+            /// <summary>
+            /// Performs a search and returns results
+            /// </summary>
+            /// <param name="searchTerm">The search term</param>
+            /// <param name="cancellationToken">Cancellation token</param>
+            /// <returns>List of search result strings</returns>
+            public Task<IEnumerable<string>> SearchAsync(string searchTerm, CancellationToken cancellationToken = default);
+        }
+
+        ///// <summary>
+        ///// Extended search service interface for more advanced scenarios
+        ///// If you need more complex results, implement this instead
+        ///// </summary>
+        //public interface IAdvancedSearchService
+        //{
+        //    /// <summary>
+        //    /// Gets search suggestions with metadata
+        //    /// </summary>
+        //    /// <param name="term">The search term</param>
+        //    /// <param name="cancellationToken">Cancellation token</param>
+        //    /// <returns>Search suggestions with metadata</returns>
+        //    Task<SuggestionResult> GetSuggestionsAsync(string term, CancellationToken cancellationToken = default);
+
+        //    /// <summary>
+        //    /// Performs a search with pagination and filtering
+        //    /// </summary>
+        //    /// <param name="request">The search request</param>
+        //    /// <param name="cancellationToken">Cancellation token</param>
+        //    /// <returns>Paginated search results</returns>
+        //    Task<SearchResult> SearchAsync(SearchRequest request, CancellationToken cancellationToken = default);
+        //}
+
+    
+}
diff --git a/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/ReadMe.md b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/ReadMe.md
new file mode 100644
index 0000000..3d5cb22
--- /dev/null
+++ b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/ReadMe.md
@@ -0,0 +1,12 @@
+# Search Component
+
+The search component is given a search service using the search interface.
+The interface requires a search endpoint and a search suggestion endpoint.
+
+# Usage
+For searching
+
+# NoJs
+
+The component has parameter for the search button action. On search it will hit the specified controller.
+IT receives search information via the same interface so it can be populated in a view.
\ No newline at end of file
diff --git a/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperiment.razor b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperiment.razor
new file mode 100644
index 0000000..8d7470d
--- /dev/null
+++ b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperiment.razor
@@ -0,0 +1,204 @@
+@using System.Diagnostics
+<!--qqqq see microsoft default and ecommerce-->
+<!--@bind-value="SearchText"
+@bind-value:event="oninput"-->
+<!--will want debounce-->
+<!--will want cancel if still going-->
+@inherits TELComponentBase
+<!--think it will be a specific service instead but we would probably have this in an option on this component potentially?-->
+<!-- NavigationManager.NavigateTo($"search/{searchText}/1");-->
+<!--also we on query a bit so navigation manager would be good for that https://example.com/search?Term=blazor&Filters=video&Filters=article&Sortby=1&CataloguePageIndex=2-->
+@inject NavigationManager NavigationManager 
+@inject ISearchExperimentService searchExperimentService
+@* @implements IDisposable *@
+@using static DummyData
+<header class="nhsuk-header" role="banner">
+    <div id="content-header">
+        <div class="nhsuk-width-container nhsuk-header__container app-width-container ">
+            <div class="nhsuk-header__search">
+                <div class="nhsuk-header__search-wrap" id="wrap-search">
+                    <!--qqqq ending up with nojsfallback in both places may need button redesign-->
+                        <EditForm Model="FormData" OnSubmit="SendSearchRequest" action="@(NoJSActionUrl)"
+                              FormName="SearchMainForm"
+                              name="SearchMainForm"
+                              role="form" 
+                                tabindex="0" 
+                                method="post" >
+                                <!--shouldnt need-->
+                         @foreach (var keyValuePair in FormData)
+                        {
+                            <input tabindex="-1" type="hidden" name="@keyValuePair.Key" value="@keyValuePair.Value" />
+                        } 
+
+                        <div class="nhsuk-header__search-form" role="search">
+                            <label class="nhsuk-u-visually-hidden" for="search-field">Search the learning hub</label>
+                            <input class="nhsuk-search__input"
+                                   id="search-field-some-guid"
+                                   name="term"
+                                   type="search"
+                                   list="search-suggestions-some-guid"
+                                   placeholder="Search the learning hub"
+                                   autocomplete="off"
+                                   @bind-value="searchText"
+                                   @bind-value:event="oninput"
+                                   @onkeyup="HandleInput"
+                                   @ref="searchInput" 
+                                   />
+                            <datalist id="search-suggestions-some-guid" class="nhsuk-list autosuggestion-menu">
+                                @foreach (var suggestion in suggestions)
+                                {
+                                    <option>@suggestion</option>
+                                }
+                            </datalist>
+                      
+
+                                   <!--button needs changing for icon-->
+                            <TELButton IsSubmitButtonForEditForm=true
+
+                                   ButtonStyle="TELButtonStyle.Primary"
+                                   PreventDoubleClick=false
+                                       ButtonText="🔎"
+                                   AdditionalCssClasses=""
+                                   AriaLabel="Make search request"
+                                   AssistiveText="The page will auto search on debounce if you have js enabled"
+                                   TabIndex="0"
+                                       ToolTipTitle="Click to search"/>
+                        @*          <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
+                                    <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
+                                </svg>
+                            </TELButton>  *@
+                        </div>
+                 </EditForm>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</header>
+
+<section class="search-results">
+    <h3>Search Results</h3>
+    <ul>
+        @foreach (var result in searchResults)
+        {
+            <li>@result</li>
+        }
+    </ul>
+</section>
+@code{
+
+    [Parameter] public Dictionary<string, string> FormData { get; set; } = new();//shouldnt need
+    [EditorRequired, Parameter] public required string NoJSActionUrl { get; set; } = "nojsfallback/mvcendpoint/search"; // URL for the form submission
+    private List<string> searchResults = new List<string>();
+    private string searchText = string.Empty;
+    private List<string> suggestions = new List<string>();
+    protected ElementReference searchInput;
+
+    ///  <summary>
+    ///  This is just for controller actions in a nojs environment
+    /// </summary>
+    [Parameter] public string NoJSControllerSetSearchText { get; set; } = String.Empty;
+    ///  <summary>
+    ///  This is just for controller actions in a nojs environment
+    /// </summary>
+    [Parameter] public List<string> NoJSControllerSetSearchResults { get; set; } = new();
+    ///  <summary>
+    ///  This is just for controller actions in a nojs environment
+    /// </summary>
+    [Parameter] public List<string> NoJSControllerSetSuggestions { get; set; } = new();
+
+    private CancellationTokenSource _cts;
+    /*avoid potential memory leak from mvc taredown by counting down not up by not search on first 3 letters can initiate*/
+    private Timer? _debounceTimer;
+    private readonly TimeSpan _debouncePeriod = TimeSpan.FromMilliseconds(500);
+
+    // SendSearchRequest SendSuggestionRequest presumeably same end point but maybe a bool for no suggestions
+
+
+    protected override void OnParametersSet()
+    {
+        searchText = NoJSControllerSetSearchText;
+        searchResults = NoJSControllerSetSearchResults;
+        suggestions = NoJSControllerSetSuggestions;
+    }
+
+
+    private void StartDebounceCountdown()
+    {
+        // Dispose any existing timer first
+        _debounceTimer?.Dispose();
+
+        // Start a new one-shot countdown timer
+        _debounceTimer = new Timer(_ =>
+        {
+            _debounceTimer?.Dispose();
+            _debounceTimer = null;
+        },
+        null,
+        _debouncePeriod,
+        Timeout.InfiniteTimeSpan);
+    }
+
+    private async Task SendSearchRequest()
+    {
+        <!--qqqq will look very similar because isnt meta data or additional information per term to display-->
+        suggestions.Clear();
+
+        _cts?.Cancel(); // cancel prior search
+        _cts = new CancellationTokenSource();
+
+        try
+        {
+            searchResults = (await searchExperimentService.SearchAsync(searchText)).ToList<string>();
+        }
+        catch (OperationCanceledException)
+        {
+            // Ignore cancelled searches
+        }
+    }
+    private async Task GetSuggestionsAsync()
+    {
+        _cts?.Cancel(); // cancel prior search
+        _cts = new CancellationTokenSource();
+
+        try
+        {
+           
+            suggestions = (await searchExperimentService.GetSuggestionsAsync(searchText)).ToList<string>();
+
+        }
+        catch (OperationCanceledException)
+        {
+            // Ignore cancelled searches
+        }
+    }
+
+    
+    public async Task HandleInput(KeyboardEventArgs args)
+    {
+        if (args.Key == null || args.Key.Equals("Enter"))
+        {
+            
+            /*fire forget?*/
+            await SendSearchRequest();
+            //_ = SendSearchRequest();
+        }
+        else if (_debounceTimer != null || searchText.Length < 4 )
+        {
+            StartDebounceCountdown();
+        }
+        else
+        {
+            StartDebounceCountdown();
+            /*fire forget?*/
+            await GetSuggestionsAsync();
+           // _ = GetSuggestionsAsync();
+        }
+    }
+    /*careful mvc taredown wont call it so self dispose too*/
+    // says not implement
+    // public void Dispose()
+    // {
+    //     _debounceTimer?.Dispose();
+    // }
+}
\ No newline at end of file
diff --git a/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperimentModels.cs b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperimentModels.cs
new file mode 100644
index 0000000..ca4cdab
--- /dev/null
+++ b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperimentModels.cs
@@ -0,0 +1,32 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace TELBlazor.Components.OptionalImplementations.Test.TestComponents.SearchExperiment
+{
+    //qqqq no mvp
+    public class SearchRequest
+    {
+        public string SearchTerm { get; set; } = string.Empty;
+        public int PageIndex { get; set; } = 0;
+        public int PageSize { get; set; } = 10;
+        public Dictionary<string, object> AdditionalParameters { get; set; } = new();
+    }
+
+    public class SearchResult
+    {
+        public IEnumerable<string> Results { get; set; } = Enumerable.Empty<string>();
+        public int TotalCount { get; set; }
+        public int PageIndex { get; set; }
+        public int PageSize { get; set; }
+        public bool HasMore => (PageIndex + 1) * PageSize < TotalCount;
+    }
+
+    public class SuggestionResult
+    {
+        public IEnumerable<string> Suggestions { get; set; } = Enumerable.Empty<string>();
+        public int Count { get; set; }
+    }
+}
diff --git a/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperimentServiceOpenApi.cs b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperimentServiceOpenApi.cs
new file mode 100644
index 0000000..16d352d
--- /dev/null
+++ b/TELBlazor.Components/OptionalImplementations/Test/TestComponents/SearchExperiment/SearchExperimentServiceOpenApi.cs
@@ -0,0 +1,196 @@
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.Logging;
+using Serilog.Core;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Net.Http.Headers;
+using System.Net.Http.Json;
+using System.Text;
+using System.Threading.Tasks;
+using System.Text.Json;
+
+namespace TELBlazor.Components.OptionalImplementations.Test.TestComponents.SearchExperiment
+{
+    //curl -X 'GET' \
+    //  'https://lh-openapi.dev.local/Search/GetAutoSuggestionResult/blood' \
+    //  -H 'accept: */*' \
+    //  -H 'Authorization: Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6IkVCREI0RUNGNzZCRDk4Rjc2MzU1RkQxQzg3OTAzRTdGIiwidHlwIjoiYXQrand0In0.eyJuYmYiOjE3NTAyNDY1NzEsImV4cCI6MTc1MDI1MDE3MSwiaXNzIjoiaHR0cHM6Ly9saC1hdXRoLmRldi5sb2NhbCIsImF1ZCI6ImxlYXJuaW5naHViYXBpIiwiY2xpZW50X2lkIjoibGVhcm5pbmdodWJvcGVuYXBpIiwic3ViIjoiNTc1NDEiLCJhdXRoX3RpbWUiOjE3NTAyNDY0NjAsImlkcCI6ImxvY2FsIiwiZW1haWwiOiJwaGlsaXAudGF0ZUBuaHMubmV0IiwiZ2l2ZW5fbmFtZSI6IlRlc3RRUVFRRmlyc3QiLCJmYW1pbHlfbmFtZSI6IlRlc3RRUVFRTGFzdCIsInJvbGUiOiJBZG1pbmlzdHJhdG9yIiwiZWxmaF91c2VyTmFtZSI6IlRlc3RRUVFRIiwianRpIjoiQ0JBRTRFODY3QjM1M0FGMDcxNDQ2NUI5NEJBRjUyOEYiLCJzaWQiOiIxRURDNTUyRUREMDVFNEI2ODk3REFEQzI1MTVCQUZENSIsImlhdCI6MTc1MDI0NjU3MSwic2NvcGUiOlsibGVhcm5pbmdodWJhcGkiXSwiYW1yIjpbInB3ZCJdfQ.spMsOk4OAB9CDMEleutkmRygzOgOFXq15MFvHP9I0WmWHYWJOLwO-0GmfV5MzDvP-ovYQvuphE5XDJibpyzfOkGAMeFq58o2PwzHvmDfDNhqsgexBd8pXm6VEin_obj70hngvG_VFD1_JkndrT7_091fU4St6Z6_UfyVvKYD9uSOwpbr5UaBAtJYbYnB3p_0C5qtzLUhKK6Xjgbr_BMLKTo9d0RGRJ5an16_VYh8Vm3gOxBjdfizzEyOoGOns2tROPB3WO6z1RO5jODVALzZDORs_ad6wlMDq4-cORBHuRbOIwOQW6k7xLIIex5VKTEebFBwAP8ihS6SvsGa16Fs-A'
+
+//    {
+//  "stats": {
+//    "totalHits": 23,
+//    "searchEngineTimeInMillis": 3,
+//    "searchEngineRoundTripTimeInMillis": 4,
+//    "searchProcessingTimeInMillis": 5
+//  },
+//  "catalogueDocument": {
+//    "id": "catalogues_documents",
+//    "totalHits": 0,
+//    "catalogueDocumentList": []
+//  },
+//  "conceptDocument": {
+//    "id": "concepts_documents",
+//    "totalHits": 6,
+//    "conceptDocumentList": [
+//      {
+//        "id": "blood transfusion_hee-local",
+//        "title": "426 Blood Transfusion - Non Registered Staff, Mandatory Training Workbook 2019-20",
+//        "concept": "blood transfusion",
+//        "click": {
+//            "payload": {
+//                "searchSignal": {
+//                    "stats": {
+//                        "totalHits": 23
+//                    },
+//              "searchId": "5b3e2cb9-2a6b-4d9a-8879-a7ba336abf3e",
+//              "profileSignature": {
+//                        "applicationId": "HEE",
+//                "profileType": "SEARCHER",
+//                "profileId": "auto-suggestion-local"
+//              },
+//              "userQuery": "q=blood",
+//              "query": "q=blood",
+//              "timeOfSearch": 1750247278498
+//                },
+//            "hitNumber": 4,
+//            "clickTargetUrl": "blood transfusion_hee-local",
+//            "documentFields": {
+//                    "name": null,
+//              "title": "426 Blood Transfusion - Non Registered Staff, Mandatory Training Workbook 2019-20"
+//            },
+//            "containerId": "concepts_documents",
+//            "timeOfClick": null
+//            },
+//          "url": "/signals/hee/signal/click-hee"
+//        }
+//    }
+//    ]
+//  },
+//  "resourceDocument": {
+//    "id": "resources_documents",
+//    "totalHits": 17,
+//    "resourceDocumentList": [
+//      {
+
+//    }
+//    ]
+//  }
+//}
+    public class SearchExperimentServiceOpenApi :ISearchExperimentService
+    {
+        //qqqq can do alot better
+        private readonly HttpClient _httpClient;
+        private readonly string _baseUrl;
+        private readonly ILogger<SearchExperimentServiceOpenApi> _logger; // logger
+
+        public SearchExperimentServiceOpenApi(HttpClient httpClient, IConfiguration configuration, ILogger<SearchExperimentServiceOpenApi> logger)
+        {
+            _httpClient = httpClient;
+            _baseUrl = configuration["SearchApi:BaseUrl"] ?? "https://lh-openapi.dev.local";
+            _logger = logger;
+
+            //var token = configuration["SearchApi:BearerToken"];
+            //if (!string.IsNullOrEmpty(token))
+            //{
+            //    _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", token);
+            //}
+        }
+        public async Task<IEnumerable<string>> GetSuggestionsAsync(string term, CancellationToken cancellationToken = default)
+        {
+            try
+            {
+                var url = $"{_baseUrl}/Search/GetAutoSuggestionResult/{term}";
+                var response = await _httpClient.GetFromJsonAsync<SearchResponse>(url);
+                _logger.LogWarning(JsonSerializer.Serialize(response));
+                return response?.conceptDocument?.conceptDocumentList?
+                    .Select(x => x.title)
+                    .Where(x => !string.IsNullOrWhiteSpace(x))
+                    ?? Enumerable.Empty<string>();
+            }
+            catch (Exception ex)
+            {
+                Console.WriteLine($"Error in GetSuggestionsAsync: {ex.Message}");
+                return Enumerable.Empty<string>();
+            }
+        }
+
+        public async Task<IEnumerable<string>> SearchAsync(string term, CancellationToken cancellationToken = default)
+        {
+            try
+            {
+                var url = $"{_baseUrl}/Search/GetAutoSuggestionResult/{term}";
+                var response = await _httpClient.GetFromJsonAsync<SearchResponse>(url);
+                _logger.LogWarning(JsonSerializer.Serialize(response));
+                return response?.conceptDocument?.conceptDocumentList?
+            .Select(x => x.click?.payload?.clickTargetUrl)
+            .Where(url => !string.IsNullOrWhiteSpace(url)).DefaultIfEmpty("Soz nout found. ⚠️I'm actually just hitting the suggestion endpoint atm. coz t'uther bokked. ⚠️").ToList<string>()
+            ?? new List<string>() { "Soz nout found. ⚠I'm actually just hitting the suggestion endpoint atm.coz t'uther bokked. ⚠️" };
+            }
+            catch (Exception ex)
+            {
+                Console.WriteLine($"Error in SearchAsync: {ex.Message}");
+                return Enumerable.Empty<string>();
+            }
+        }
+
+        private class SearchResponse
+        {
+            public ConceptDocument conceptDocument { get; set; }
+            // You could also add resourceDocument or catalogueDocument if needed
+        }
+
+        private class ConceptDocument
+        {
+            public List<ConceptItem> conceptDocumentList { get; set; }
+        }
+
+        private class ConceptItem
+        {
+            public string id { get; set; }
+            public string title { get; set; }
+            public string concept { get; set; }
+            public Click click { get; set; }
+        }
+
+        private class Click
+        {
+            public Payload payload { get; set; }
+            public string url { get; set; }
+        }
+
+        private class Payload
+        {
+            public string clickTargetUrl { get; set; }
+        }
+
+        //    // Minimal classes to match the API response shape
+        //    private class SearchResponse
+        //    {
+        //        public ConceptDocument conceptDocument { get; set; }
+        //    }
+
+        //    private class ConceptDocument
+        //    {
+        //        public List<ConceptItem> conceptDocumentList { get; set; }
+        //    }
+
+        //    private class ConceptItem
+        //    {
+        //        public string title { get; set; }
+        //        public Click click { get; set; }
+        //    }
+
+        //    private class Click
+        //    {
+        //        public Payload payload { get; set; }
+        //    }
+
+        //    private class Payload
+        //    {
+        //        public string clickTargetUrl { get; set; }
+        //    }
+        }
+
+    }
+
diff --git a/TELBlazor.Components/OptionalImplementations/TestComponents/SearchExperiment/SearchExperiment.razor b/TELBlazor.Components/OptionalImplementations/TestComponents/SearchExperiment/SearchExperiment.razor
deleted file mode 100644
index 605f4da..0000000
--- a/TELBlazor.Components/OptionalImplementations/TestComponents/SearchExperiment/SearchExperiment.razor
+++ /dev/null
@@ -1,34 +0,0 @@
-<!--qqqq see microsoft default and ecommerce-->
-<!--@bind-value="SearchText"
-@bind-value:event="oninput"-->
-<!--will want debounce-->
-<!--will want cancel if still going-->
-
-<header class="nhsuk-header" role="banner">
-    <div id="content-header">
-        <div class="nhsuk-width-container nhsuk-header__container app-width-container ">
-            <div class="nhsuk-header__search">
-                <div class="nhsuk-header__search-wrap" id="wrap-search">
-                    <form class="nhsuk-header__search-form" id="search" method="get" role="search" action="/search/results">
-                        <label class="nhsuk-u-visually-hidden" for="search-field">Search the learning hub</label>
-                        <input class="nhsuk-search__input" id="search-field" name="term" type="search" placeholder="Search the learning hub" autocomplete="off" >
-                        <ul id="search-field_listbox" class="nhsuk-list autosuggestion-menu" style="display:none"></ul>
-                        <button class="nhsuk-search__submit" type="submit">
-                            <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-                                <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
-                            </svg>
-                            <span class="nhsuk-u-visually-hidden">Search</span>
-                        </button>
-
-                        <label for="header-mobile-search-control" class="nhsuk-search__close" id="close-search">
-                            <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-                                <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
-                            </svg>
-                            <span class="nhsuk-u-visually-hidden">Close search</span>
-                        </label>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
-</header>
\ No newline at end of file
diff --git a/TELBlazor.Components/TELBlazor.Components.csproj b/TELBlazor.Components/TELBlazor.Components.csproj
index aa7f8c3..da945a4 100644
--- a/TELBlazor.Components/TELBlazor.Components.csproj
+++ b/TELBlazor.Components/TELBlazor.Components.csproj
@@ -22,7 +22,7 @@
 		<RepositoryUrl>https://github.com/TechnologyEnhancedLearning/TELBlazor</RepositoryUrl>
 		<RepositoryType>git</RepositoryType>
 		<PackageReadmeFile>README.md</PackageReadmeFile>
-		<PackageOutputPath>$(NupkgOutputPath)</PackageOutputPath>
+		<PackageOutputPath>$(NugetPackagesOutputPath)</PackageOutputPath>
 		<Configurations>Debug;Release</Configurations>
 
 	</PropertyGroup>
@@ -48,12 +48,19 @@
 		<Content Remove="..\CICDPackageLocation\**\*" />
 		<None Remove="..\CICDPackageLocation\**\*" />
 	</ItemGroup>
+	<ItemGroup>
+	  <Compile Remove="TELBlazorPackageVersion\VersionInfo.TELBlazorAssembly.cs" />
+	</ItemGroup>
+	<ItemGroup>
+	  <Content Include="TELBlazorPackageVersion\VersionInfo.TELBlazorAssembly.cs" />
+	</ItemGroup>
 
 	<!--<ItemGroup>
 	  <Content Include="Core\DI\gitinclude.txt" />
 	</ItemGroup>-->
 	<ItemGroup>
 		<Folder Include="Assets\" />
+		<Folder Include="OptionalImplementations\Test\TestServices\" />
 		<Folder Include="wwwroot\css\" />
 		<Folder Include="wwwroot\js\" />
 	</ItemGroup>
@@ -70,6 +77,10 @@
 		  -->
 		<Exec WorkingDirectory="$(MSBuildProjectDirectory)/.." Command="npx gulp --cwd &quot;$(MSBuildProjectDirectory)&quot; --gulpfile &quot;$(MSBuildProjectDirectory)/gulpfile.js&quot;" />
 	</Target>
+	<Target Name="GenerateTELBlazorPackageVersion" BeforeTargets="RunGulp">
+		<Delete Files="TELBlazorPackageVersion/VersionInfo.cs" />
+		<WriteLinesToFile File="TELBlazorPackageVersion\VersionInfo.TELBlazor.cs" Lines="namespace TELBlazor.Components.TELBlazorPackageVersion{public static partial class VersionInfo{public const string TELBlazorPackageVersion = &quot;$(TELBlazorPackageVersion)&quot; %3B; } }" Overwrite="true" Encoding="UTF-8" />
+	</Target>
 
 </Project>
 
diff --git a/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.TELBlazor.cs b/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.TELBlazor.cs
index 20c743f..206cd28 100644
--- a/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.TELBlazor.cs
+++ b/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.TELBlazor.cs
@@ -1,7 +1,2 @@
-namespace TELBlazor.Components.TELBlazorPackageVersion
-{
-    public static partial class VersionInfo
-    {
-        public static readonly string TELBlazorPackageVersion = typeof(_Imports).Assembly.GetName().Version?.ToString() ?? "Unknown";
-    }
-}
+namespace TELBlazor.Components.TELBlazorPackageVersion{public static partial class VersionInfo{public const string TELBlazorPackageVersion = "1.9.2-local" ;
+} }
diff --git a/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.TELBlazorAssembly.cs b/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.TELBlazorAssembly.cs
new file mode 100644
index 0000000..b81e103
--- /dev/null
+++ b/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.TELBlazorAssembly.cs
@@ -0,0 +1,8 @@
+namespace TELBlazor.Components.TELBlazorPackageVersion
+{
+    public static partial class VersionInfo
+    {
+        //its not the package version its the assembly so no text at the end
+        public static readonly string TELBlazorPackageAssemblyVersion = typeof(_Imports).Assembly.GetName().Version?.ToString() ?? "Unknown";
+    }
+}
diff --git a/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.cs b/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.cs
deleted file mode 100644
index 4b1a9a6..0000000
--- a/TELBlazor.Components/TELBlazorPackageVersion/VersionInfo.cs
+++ /dev/null
@@ -1,5 +0,0 @@
-// VersionInfo.cs
-namespace TELBlazor.Components.TELBlazorPackageVersion
-{
-    public static partial class VersionInfo { }
-}
\ No newline at end of file
diff --git a/TELBlazor.Components/_Imports.razor b/TELBlazor.Components/_Imports.razor
index 74150bd..a267336 100644
--- a/TELBlazor.Components/_Imports.razor
+++ b/TELBlazor.Components/_Imports.razor
@@ -7,7 +7,9 @@
 @using TELBlazor.Components.Core.Extensions
 @using Microsoft.AspNetCore.Components.Forms
 @using TELBlazor.Components.Components.BaseComponents
-@using TELBlazor.Components.OptionalImplementations.TestComponents
+@using TELBlazor.Components.OptionalImplementations.Test
+@using TELBlazor.Components.OptionalImplementations.Test.TestComponents
+@using TELBlazor.Components.OptionalImplementations.Test.TestComponents.SearchExperiment
 @using Microsoft.Extensions.Logging
 @using TELBlazor.Components.Core.Services.HelperServices
 @using System.Diagnostics.CodeAnalysis
\ No newline at end of file
diff --git a/TELBlazor.sln b/TELBlazor.sln
index b6cadbc..d2f65a3 100644
--- a/TELBlazor.sln
+++ b/TELBlazor.sln
@@ -14,6 +14,8 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution
 		Directory.Packages.props = Directory.Packages.props
 		global.json = global.json
 		nuget.config = nuget.config
+		nuget.config.cicd = nuget.config.cicd
+		nuget.config.template = nuget.config.template
 		package-lock.json = package-lock.json
 		package.json = package.json
 		PackageSettings.props = PackageSettings.props
diff --git a/nuget.config b/nuget.config.cicd
similarity index 74%
rename from nuget.config
rename to nuget.config.cicd
index 586c212..9905465 100644
--- a/nuget.config
+++ b/nuget.config.cicd
@@ -1,18 +1,22 @@
 <?xml version="1.0" encoding="utf-8"?>
+<!--
+
+This config is replaces nuget.config in cicd.
+It provides credentials incase the TEL git packages feed is used.
+
+-->
 <configuration>
 	<packageSources>
 		<clear />
 		<add key="nuget.org" value="https://api.nuget.org/v3/index.json" />
-
-		<add key="TELBlazorPackageSource" value="%TELBlazorPackageSource%" />
-		
+		<add key="TELBlazorPackageSource" value="%TEL_BLAZOR_PACKAGE_SOURCE%" />
 	</packageSources>
 	<packageSourceCredentials>
 		<TELBlazorPackageSource>
 			<!-- for cicd -->
 			<add key="Username" value="%GITHUB_USERNAME%" />
 			<!--cleartext for benefit of github actions-->
-			<add key="ClearTextPassword" value="%GITHUB_PACKAGES_TOKEN%" />
+			<add key="ClearTextPassword" value="%TEL_GIT_PACKAGES_TOKEN%" />
 		</TELBlazorPackageSource>
 	</packageSourceCredentials>
 	<packageSourceMapping>
diff --git a/nuget.config.template b/nuget.config.template
new file mode 100644
index 0000000..79f337b
--- /dev/null
+++ b/nuget.config.template
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+This config is replaced with the template in cicd.
+It is gitignored too so further changes wont propogate.
+Source can be safely changed without needing to change the environmental variable and reload vs.
+
+-->
+<configuration>
+	<packageSources>
+		<clear />
+		<add key="nuget.org" value="https://api.nuget.org/v3/index.json" />
+		<!--Check local source first prioritise local over remote where duplicate version number accidently occurs-->
+		<add key="TELBlazorPackageSource" value="%LOCAL_PACKAGES_PATH%" />
+		<!--<add key="TELGitPackageSource" value="https://nuget.pkg.github.com/TechnologyEnhancedLearning/index.json" />-->
+	</packageSources>
+	<packageSourceCredentials>
+		<TELGitPackageSource>
+			<!-- for cicd -->
+			<add key="Username" value="%GITHUB_USERNAME%" />
+			<!--cleartext for benefit of github actions-->
+			<add key="ClearTextPassword" value="%TEL_GIT_PACKAGES_TOKEN%" />
+		</TELGitPackageSource>
+	</packageSourceCredentials>
+	<packageSourceMapping>
+		<!-- Filter by package to get right package from GitHub -->
+		<packageSource key="TELBlazorPackageSource">
+			<package pattern="TELBlazor.Components" />
+		</packageSource>
+		<!-- Filter by package to get right package from GitHub -->
+		<!--<packageSource key="TELGitPackageSource">
+			<package pattern="TELBlazor.Components" />
+		</packageSource>-->
+		<!-- All other packages will be fetched from NuGet.org -->
+		<packageSource key="nuget.org">
+			<package pattern="*" />
+		</packageSource>
+	</packageSourceMapping>
+</configuration>
\ No newline at end of file
diff --git a/run-tests-and-report-with-env-values.ps1 b/run-tests-and-report-with-env-values.ps1
index e733be8..3ddac89 100644
--- a/run-tests-and-report-with-env-values.ps1
+++ b/run-tests-and-report-with-env-values.ps1
@@ -2,10 +2,9 @@
 # book mark in chrome file:///C:/dev/repos/TELBlazor/coveragereport/index.html
 # or use nektos act on the specific job to locally run the pipeline job
 $env:TELBLAZOR_PACKAGE_VERSION = "10.9.9"
-$env:NupkgOutputPath = "$PSScriptRoot\CICDPackageLocation"
-$env:UseTELBlazorComponentsProjectReference = "true"
-$env:TELBlazorPackageSource = "$PSScriptRoot\CICDPackageLocation"
-$env:DisablePackageGeneration = "false"
+$env:NUGET_PACKAGES_OUTPUT_PATH = "$PSScriptRoot\CICDPackageLocation"
+$env:USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE = "true"
+$env:DISABLE_PACKAGE_GENERATION = "false"
 
 
 # Run Tests