diff --git a/src/App.svelte b/src/App.svelte
index 13f9d517..c5548087 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -49,6 +49,7 @@
   import UserDetail from "./components/UserDetail.svelte";
   OpenAPI.BASE = config.baseurl;
   import { register as registerSW } from "./swmodule";
+  import TeamDetail from "./components/TeamDetail.svelte";
   store.init();
   // registerSW();
 </script>
@@ -85,8 +86,13 @@
         <Route path="/runners">
           <Runners />
         </Route>
-        <Route path="/teams">
-          <Teams />
+        <Route path="/teams/*">
+          <Route path="/">
+            <Teams />
+          </Route>
+          <Route path="/:teamid" let:params>
+            <TeamDetail {params} />
+          </Route>
         </Route>
         <Route path="/orgs/*">
           <Route path="/">
diff --git a/src/components/AddTeamModal.svelte b/src/components/AddTeamModal.svelte
index 57b1e3db..4c4ba092 100644
--- a/src/components/AddTeamModal.svelte
+++ b/src/components/AddTeamModal.svelte
@@ -31,12 +31,12 @@
       }
     };
   })();
-  $: teams = [];
   $: parentGroup = undefined;
+  $: orgs = [];
   const orgs_promise = RunnerOrganisationService.runnerOrganisationControllerGetAll().then(
     (val) => {
       console.log(val);
-      teams = val;
+      orgs = val;
       val.forEach((t) => {
         console.log(t.name);
       });
@@ -155,7 +155,7 @@
                   <select
                     bind:value={parentGroup}
                     class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2">
-                    {#each teams as t}
+                    {#each orgs as t}
                       <option value={t.id}>{t.name}</option>
                     {/each}
                   </select>
diff --git a/src/components/TeamDetail.svelte b/src/components/TeamDetail.svelte
new file mode 100644
index 00000000..9c1b3cc2
--- /dev/null
+++ b/src/components/TeamDetail.svelte
@@ -0,0 +1,210 @@
+<script>
+  import {
+    RunnerOrganisationService,
+    RunnerTeamService,
+  } from "@odit/lfk-client-js";
+  import { _ } from "svelte-i18n";
+  import Toastify from "toastify-js";
+  import store from "../store";
+  import PromiseError from "./PromiseError.svelte";
+  $: delete_triggered = false;
+  $: save_enabled = !data_changed;
+  export let params;
+  let teamdata = {};
+  let original = {};
+  $: data_loaded = false;
+  $: data_changed = JSON.stringify(teamdata) === JSON.stringify(original);
+  const promise = RunnerTeamService.runnerTeamControllerGetOne(
+    params.teamid
+  ).then((value) => {
+    data_loaded = true;
+    teamdata = Object.assign(teamdata, value);
+    original = Object.assign(original, value);
+  });
+  $: orgs = [];
+  const orgs_promise = RunnerOrganisationService.runnerOrganisationControllerGetAll().then(
+    (val) => {
+      console.log(val);
+      orgs = val;
+      val.forEach((t) => {
+        console.log(t.name);
+      });
+    }
+  );
+  function deleteTeam() {
+    RunnerTeamService.runnerTeamControllerRemove(original.id, true)
+      .then((resp) => {
+        location.replace("./");
+      })
+      .catch((err) => {});
+  }
+  function submit() {
+    if (data_loaded === true && save_enabled) {
+      Toastify({
+        text: "updating team",
+        duration: 2500,
+      }).showToast();
+      teamdata.parentGroup = teamdata.parentGroup.id;
+      RunnerTeamService.runnerTeamControllerPut(original.id, teamdata)
+        .then((resp) => {
+          Object.assign(original, teamdata);
+          original = teamdata;
+          Object.assign(original, teamdata);
+          //
+          Toastify({
+            text: "updated team",
+            duration: 2500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+        })
+        .catch((err) => {});
+    } else {
+    }
+  }
+</script>
+
+{#if data_loaded}
+  <section class="container p-5">
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
+      {original.name}
+      <span data-id="org_actions_${teamdata.id}">
+        {#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:DELETE')}
+          {#if delete_triggered}
+            <button
+              on:click={deleteTeam}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-delete')}</button>
+            <button
+              on:click={() => {
+                delete_triggered = !delete_triggered;
+              }}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
+          {/if}
+          {#if !delete_triggered}
+            <button
+              on:click={() => {
+                delete_triggered = true;
+              }}
+              type="button"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-team')}</button>
+          {/if}
+        {/if}
+        {#if !delete_triggered}
+          <button
+            on:click={submit}
+            disabled={!save_enabled}
+            class:opacity-50={!save_enabled}
+            type="button"
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
+        {/if}
+      </span>
+    </div>
+    <div class="flex flex-row mb-4">
+      <div class="w-full">
+        <nav class="w-full flex">
+          <ol class="list-none flex flex-row items-center justify-start">
+            <li class="mr-2 flex items-center">
+              <svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"><path
+                  d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+                <polyline points="9 22 9 12 15 12 15 22" /></svg>
+            </li>
+            <li class="flex items-center">
+              <a class="mr-2" href="/">Home</a><svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 mr-2 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"><line
+                  x1="5"
+                  y1="12"
+                  x2="19"
+                  y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg>
+            </li>
+            <li class="mr-2 flex items-center">
+              <svg
+                class="flex-shrink-0 w-5 h-5 mr-2"
+                fill="currentColor"
+                width="24"
+                height="24"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 640 512"><path
+                  fill="currentColor"
+                  d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
+            </li>
+            <li class="flex items-center">
+              <a class="mr-2" href="./">Teams</a><svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 mr-2 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"><line
+                  x1="5"
+                  y1="12"
+                  x2="19"
+                  y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg>
+            </li>
+            <li class="flex items-center">
+              <span class="mr-2">Team-Details #{params.teamid}</span>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+    <div class="text-sm w-full">
+      <label for="name" class="font-medium text-gray-700">Name</label>
+      <input
+        autocomplete="off"
+        placeholder="Name"
+        type="text"
+        bind:value={teamdata.name}
+        name="name"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
+    </div>
+    <div class="text-sm w-full">
+      <label
+        for="contact"
+        class="font-medium text-gray-700">{$_('contact')}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_('contact')}
+        type="text"
+        bind:value={teamdata.contact}
+        name="contact"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
+    </div>
+    <select
+      bind:value={teamdata.parentGroup}
+      class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2">
+      {#each orgs as o}
+        <option value={o.id}>{o.name}</option>
+      {/each}
+    </select>
+  </section>
+{:else}
+  {#await promise}
+    organization detail is being loaded...
+  {:catch error}
+    <PromiseError />
+  {/await}
+{/if}
diff --git a/src/locales/en.json b/src/locales/en.json
index 6bb8bc40..53fe708e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -40,6 +40,7 @@
         "an_error_happened_while_fetching_the_data": "An error happened while fetching the data"
     },
     "delete-organization": "Delete Organization",
+    "delete-team": "Delete Team",
     "delete-user": "Delete User",
     "dependency_name": "Name",
     "dont-have-your-email-connected": "Don't have your email connected?",