diff --git a/src/components/UserDetailOne.svelte b/src/components/UserDetailOne.svelte
new file mode 100644
index 00000000..e9b0f69a
--- /dev/null
+++ b/src/components/UserDetailOne.svelte
@@ -0,0 +1,103 @@
+<script>
+  import { _, json } from "svelte-i18n";
+  import Toastify from "toastify-js";
+  import TracksEmptyState from "./TracksEmptyState.svelte";
+  import { TrackService, UserService } from "@odit/lfk-client-js";
+  import { getlang } from "./datatable_i18n";
+  import { Grid, html } from "gridjs";
+  import "gridjs/dist/theme/mermaid.css";
+  import { tracks as tracksstore } from "../store.js";
+  import UsersEmptyState from "./UsersEmptyState.svelte";
+  $: userscache = [];
+  $: blocked = [];
+  let table;
+  let datatable;
+  let datatable_inited = false;
+  export let params;
+  const user_promise = UserService.userControllerGetOne(params.userid);
+  tracksstore.subscribe((val) => {
+    userscache = val;
+  });
+  user_promise.then((data) => {
+    console.log(data);
+    tracksstore.set(data);
+  });
+</script>
+
+<!-- ////////// -->
+<section class="container p-5">
+  <p>{JSON.stringify(params)}</p>
+  <span class="mb-1 text-3xl font-extrabold leading-tight text-gray-900">John
+    Doe
+    <button
+      type="button"
+      class="w-full inline-flex 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">Delete
+      User</button></span>
+  <div class="container mx-auto px-4">
+    <div>
+      <div class="px-6">
+        <div class="flex flex-wrap justify-center">
+          <div
+            class="w-full lg:w-4/12 px-4 lg:order-3 lg:text-right lg:self-center">
+            <div class="py-6 px-3 mt-32 sm:mt-0">
+              <button
+                class="bg-blue-500 active:bg-blue-600 uppercase text-white font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
+                type="button">Connect</button>
+            </div>
+          </div>
+          <div class="w-full lg:w-4/12 px-4 lg:order-1">
+            <div class="flex justify-center py-4 lg:pt-4 pt-8">
+              <div class="mr-4 p-3 text-center">
+                <span
+                  class="text-xl font-bold block uppercase tracking-wide text-gray-700">22</span><span
+                  class="text-sm text-gray-500">Friends</span>
+              </div>
+              <div class="mr-4 p-3 text-center">
+                <span
+                  class="text-xl font-bold block uppercase tracking-wide text-gray-700">10</span><span
+                  class="text-sm text-gray-500">Photos</span>
+              </div>
+              <div class="lg:mr-4 p-3 text-center">
+                <span
+                  class="text-xl font-bold block uppercase tracking-wide text-gray-700">89</span><span
+                  class="text-sm text-gray-500">Comments</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="text-center mt-12">
+          <h3
+            class="text-4xl font-semibold leading-normal mb-2 text-gray-800 mb-2">
+            Jenna Stones
+          </h3>
+          <div
+            class="text-sm leading-normal mt-0 mb-2 text-gray-500 font-bold uppercase">
+            <i class="fas fa-map-marker-alt mr-2 text-lg text-gray-500" />
+            Los Angeles, California
+          </div>
+          <div class="mb-2 text-gray-700 mt-10">
+            <i class="fas fa-briefcase mr-2 text-lg text-gray-500" />Solution
+            Manager - Creative Tim Officer
+          </div>
+          <div class="mb-2 text-gray-700">
+            <i class="fas fa-university mr-2 text-lg text-gray-500" />University
+            of Computer Science
+          </div>
+        </div>
+        <div class="mt-10 py-10 border-t border-gray-300 text-center">
+          <div class="flex flex-wrap justify-center">
+            <div class="w-full lg:w-9/12 px-4">
+              <p class="mb-4 text-lg leading-relaxed text-gray-800">
+                An artist of considerable range, Jenna the name taken by
+                Melbourne-raised, Brooklyn-based Nick Murphy writes, performs
+                and records all of his own music, giving it a warm, intimate
+                feel with a solid groove structure. An artist of considerable
+                range.
+              </p><a href="#pablo" class="font-normal text-blue-500">Show more</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>