diff --git a/Configuration.json b/Configuration.json
index 7ea6157..e4edc97 100644
--- a/Configuration.json
+++ b/Configuration.json
@@ -5,5 +5,6 @@
     "RDoRUL39LEe9R81BSEJqwj52n0v1",
     "oMiJQcb4xqTI7XJlGZItEH2eKtm2"
   ],
+  "WORKFLOW_CONFIG_PROFILE_IDS": ["eePyy59w5KXLy0wkvqsv1iPmLUh1"],
   "DEEPLINK_PROTOCOL_NAME": "grid-editor"
 }
diff --git a/package-lock.json b/package-lock.json
index ea6402e..5e08185 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.1",
       "dependencies": {
         "@intechstudio/grid-protocol": "1.20250305.1735",
-        "@intechstudio/grid-uikit": "1.20250929.2015",
+        "@intechstudio/grid-uikit": "1.20251020.1904",
         "@melt-ui/svelte": "^0.86.6",
         "@toast-ui/editor": "^3.2.2",
         "audit": "^0.0.6",
@@ -35,7 +35,6 @@
         "eslint": "^8.28.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-svelte": "^2.39.0",
-        "postcss": "^8.4.21",
         "postcss-import": "^16.1.0",
         "prettier": "^3.5.3",
         "prettier-plugin-svelte": "^3.3.3",
@@ -856,9 +855,9 @@
       "integrity": "sha512-pAnLVlkiAk8zz+yBc99TdeUiH2wXPuNwWb0ZBgqcqtcIT8bUh7zMY2s7ll0KQsI9HsVP/3IwB2htNHCyNIWCsg=="
     },
     "node_modules/@intechstudio/grid-uikit": {
-      "version": "1.20250929.2015",
-      "resolved": "https://registry.npmjs.org/@intechstudio/grid-uikit/-/grid-uikit-1.20250929.2015.tgz",
-      "integrity": "sha512-50OwamF5AKDTNJvkhrTvRSiQBpu0Nq9QehzmMznBcDcSQzFpyxnOfnG6k4O4NHLhAPSsAxHXwx4UpVomd+7A3Q==",
+      "version": "1.20251020.1904",
+      "resolved": "https://registry.npmjs.org/@intechstudio/grid-uikit/-/grid-uikit-1.20251020.1904.tgz",
+      "integrity": "sha512-5dFv1i3pWSnKFgbyVf/0pWHJ7vBCWdfYe+I+c+N84+a6g5uhc60EJnlr3Y1vh3TwQLjnlvsxJhLp+h4mTvoSyA==",
       "dependencies": {
         "@melt-ui/svelte": "^0.86.6",
         "color-convert": "^2.0.1",
diff --git a/package.json b/package.json
index 224e26d..e9c0116 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte": "^2.39.0",
-    "postcss": "^8.4.21",
     "postcss-import": "^16.1.0",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
@@ -42,7 +41,7 @@
   "type": "module",
   "dependencies": {
     "@intechstudio/grid-protocol": "1.20250305.1735",
-    "@intechstudio/grid-uikit": "1.20250929.2015",
+    "@intechstudio/grid-uikit": "1.20251020.1904",
     "@melt-ui/svelte": "^0.86.6",
     "@toast-ui/editor": "^3.2.2",
     "audit": "^0.0.6",
diff --git a/postcss.config.cjs b/postcss.config.cjs
deleted file mode 100644
index a5a6ff8..0000000
--- a/postcss.config.cjs
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-  plugins: {
-    "postcss-import": {},
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
diff --git a/src/WebComponent.svelte b/src/WebComponent.svelte
index eaa7118..ab23aa6 100644
--- a/src/WebComponent.svelte
+++ b/src/WebComponent.svelte
@@ -1,4 +1,4 @@
-<svelte:options customElement={{ tag: "WEB-COMPONENT-NAME" }} />
+<svelte:options customElement={{ tag: "WEB-COMPONENT-NAME", shadow: "none" }} />
 
 <script>
   import { onMount } from "svelte";
@@ -30,9 +30,7 @@
   });
 </script>
 
-<profile-cloud-web-component
-  class="dark bg-primary/100 text-white transition duration-200 h-full"
->
+<profile-cloud-web-component>
   {#if isEditorVersionCompatible}
     <EditorLayout />
   {:else}
@@ -40,86 +38,7 @@
   {/if}
 </profile-cloud-web-component>
 
-<style global lang="postcss">
-  @import "./app.css";
-
-  /**
-	This is the global style for the scrollbar from the editor.
-	*/
-  ::-webkit-scrollbar {
-    height: 6px;
-    width: 6px;
-    @apply dark:rounded-md dark:bg-secondary bg-neutral-100;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    @apply dark:rounded-md dark:bg-neutral-600 bg-neutral-400 dark:shadow;
-  }
-
-  ::-webkit-scrollbar-corner {
-    @apply dark:rounded-md dark:bg-secondary;
-  }
-
-  .splitpanes.modern-theme .splitpanes__pane {
-    /*  @apply bg-secondary; */
-    position: relative;
-    overflow: visible;
-  }
-
-  /*betty magic selector*/
-  .splitpanes.modern-theme .splitpanes__pane.leftPane {
-    overflow: hidden;
-  }
-
-  .splitpanes.modern-theme .splitpanes__splitter {
-    background-color: #4c4c4c;
-    position: relative;
-  }
-  .splitpanes.modern-theme .splitpanes__splitter:before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    transition: opacity 0.3s;
-    background-color: #2db9d2;
-    width: 200;
-    opacity: 0;
-    z-index: 1;
-  }
-  .splitpanes.modern-theme .splitpanes__splitter:hover:before {
-    opacity: 1;
-  }
-  .splitpanes.modern-theme .splitpanes__splitter.splitpanes__splitter__active {
-    z-index: 2;
-    /* Fix an issue of overlap fighting with a near hovered splitter */
-  }
-  .modern-theme.splitpanes--vertical > .splitpanes__splitter:before {
-    left: -3px;
-    right: -3px;
-    height: 100%;
-    cursor: col-resize;
-  }
-  .modern-theme.splitpanes--horizontal > .splitpanes__splitter:before {
-    top: -3px;
-    bottom: -3px;
-    width: 100%;
-    cursor: row-resize;
-  }
-  .splitpanes.no-splitter .splitpanes__pane {
-    background-color: #0e100f;
-  }
-  .splitpanes.no-splitter .splitpanes__splitter {
-    background-color: #4c4c4c;
-    position: relative;
-  }
-  .no-splitter.splitpanes--horizontal > .splitpanes__splitter:before {
-    width: 0.05rem;
-    pointer-events: none;
-    cursor: none;
-  }
-  .no-splitter.splitpanes--vertical > .splitpanes__splitter:before {
-    height: 0.05rem;
-    pointer-events: none;
-    cursor: none;
+<style>
+  profile-cloud-web-component {
   }
 </style>
diff --git a/src/app.css b/src/app.css
index b5c61c9..870bf72 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,46 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+*,
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: #e5e5e5; /* 2 */
+}
+
+/*
+  1. Use a consistent sensible line-height in all browsers.
+  2. Prevent adjustments of font size after orientation changes in iOS.
+  3. Use a more readable tab size.
+  4. Use the user's configured `sans` font-family by default.
+  5. Use the user's configured `sans` font-feature-settings by default.
+  6. Use the user's configured `sans` font-variation-settings by default.
+  7. Disable tap highlights on iOS
+  */
+
+html,
+:host {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  -o-tab-size: 4;
+  tab-size: 4; /* 3 */
+  font-family:
+    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-feature-settings: normal; /* 5 */
+  font-variation-settings: normal; /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
+}
+
+/*
+  1. Remove the margin in all browsers.
+  2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+  */
+
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+  color: var(--foreground);
+  background-color: var(--background);
+}
diff --git a/src/lib/components/DataInput.svelte b/src/lib/components/DataInput.svelte
index f81ce61..4907ea9 100644
--- a/src/lib/components/DataInput.svelte
+++ b/src/lib/components/DataInput.svelte
@@ -7,37 +7,66 @@
   export let bold = false;
 
   const dispatch = createEventDispatcher();
-  let edited = false;
   let element: HTMLInputElement;
 
-  $: displayedText = edited ? value : value || placeholder;
+  $: displayedText = value.trim();
 
   function handleBlur() {
     window?.getSelection()?.removeAllRanges();
-    edited = false;
 
-    if (value !== displayedText) {
-      value = displayedText;
+    if (value !== displayedText.trim()) {
+      value = displayedText.trim();
       dispatch("change", { value });
     }
   }
 
-  function handleDblClick() {
-    edited = true;
+  function handleClick() {
+    if (disabled) {
+      return;
+    }
     element?.setSelectionRange(0, element.value.length);
   }
 </script>
 
 <input
   bind:this={element}
-  class="w-full mr-1 border bg-white dark:bg-transparent truncate dark:hover:bg-neutral-800 focus:outline-none {edited
-    ? 'border-emerald-500'
-    : 'border-transparent'}"
-  class:pointer-events-none={disabled}
-  class:font-bold={bold}
-  readonly={!edited}
+  style="color: var(--foreground)"
+  class:isdisabled={disabled}
+  class:isbold={bold}
   on:keydown={(e) => e.key == "Enter" && !e.shiftKey && element?.blur()}
   on:blur={handleBlur}
-  on:dblclick|stopPropagation|preventDefault={handleDblClick}
+  on:click|stopPropagation|preventDefault={handleClick}
   bind:value={displayedText}
+  {placeholder}
 />
+
+<style>
+  input {
+    background-color: transparent;
+    width: 100%;
+    margin-right: 1rem;
+    border: 1px solid transparent;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    outline-style: none;
+  }
+
+  input:hover {
+    background-color: var(--background-muted);
+  }
+
+  input.isbold {
+    font-weight: bold;
+    font-size: 110%;
+  }
+
+  input:focus {
+    background-color: var(--background-soft);
+    border-color: green;
+  }
+
+  input.isdisabled {
+    pointer-events: none;
+  }
+</style>
diff --git a/src/lib/components/UserAccount.svelte b/src/lib/components/UserAccount.svelte
deleted file mode 100644
index f503c1d..0000000
--- a/src/lib/components/UserAccount.svelte
+++ /dev/null
@@ -1,96 +0,0 @@
-<script lang="ts">
-  import AtomicButton from "./atomic/AtomicButton.svelte";
-  import AtomicInput from "./atomic/AtomicInput.svelte";
-  import GoogleAuth from "./GoogleAuth.svelte";
-  import { userAccountService } from "../stores";
-
-  let email = "";
-  let password = "";
-
-  async function login() {
-    userAccountService.authenticateUser({
-      providerId: "password",
-      email: email,
-      password: password,
-    });
-  }
-
-  function handleWebCredentialResponse(event: CustomEvent) {
-    if (
-      event.detail == undefined ||
-      event.detail == null ||
-      event.detail == ""
-    ) {
-      return;
-    }
-
-    userAccountService.authenticateUser({
-      providerId: "google.com",
-      idToken: event.detail,
-    });
-  }
-</script>
-
-<div
-  class="w-full h-full flex flex-col p-1 bg-neutral-50 dark:bg-neutral-700 dark:text-white/80 rounded-md border border-black/10 shadow"
->
-  {#if !$userAccountService.account}
-    <div class="flex items-center p-2">
-      <div class="bg-gray-300 rounded-full w-10 h-10" />
-      <h1 class="font-bold px-2">login to profile cloud</h1>
-    </div>
-
-    <AtomicInput
-      direction="vertical"
-      type="text"
-      label="e-mail"
-      placeholder="something@example.com"
-      bind:data={email}
-    />
-    <AtomicInput
-      direction="vertical"
-      type="password"
-      label="password"
-      placeholder="enter your password..."
-      bind:data={password}
-    />
-
-    <div class="p-2 mt-2">
-      <AtomicButton functionToCall={login} label={"login"} />
-    </div>
-
-    <div class="flex items-center py-1">
-      <div class="flex-grow border-b border-gray-300 py-2 mx-2" />
-      <div class="mt-3 text-sm text-black text-opacity-50">
-        social authentication
-      </div>
-      <div class="flex-grow border-b border-gray-300 py-2 mx-2" />
-    </div>
-
-    <div class="p-3 min-h-[44px] flex justify-center">
-      <GoogleAuth on:google-signin={handleWebCredentialResponse} />
-    </div>
-  {:else}
-    <div class="flex items-center justify-between">
-      <div class="flex items-center p-2">
-        <div class="bg-gray-300 rounded-full w-10 h-10">
-          <img
-            class="rounded-full"
-            alt=""
-            src={$userAccountService.account.photoURL}
-          />
-        </div>
-        <h1 class="font-bold px-2">
-          Welcome {$userAccountService.account.displayName}!
-        </h1>
-      </div>
-      <div class="w-24 mr-2">
-        <AtomicButton
-          functionToCall={userAccountService.logout}
-          importance={"secondary"}
-          label={"sign out"}
-        />
-      </div>
-    </div>
-  {/if}
-</div>
diff --git a/src/lib/components/atomic/AtomicButton.svelte b/src/lib/components/atomic/AtomicButton.svelte
deleted file mode 100644
index 6eab66e..0000000
--- a/src/lib/components/atomic/AtomicButton.svelte
+++ /dev/null
@@ -1,70 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher, getContext } from "svelte";
-
-  interface FunctionToCall {
-    (): any;
-  }
-
-  export let label: string = "button";
-  export let importance: "primary" | "secondary" | "tertiary" = "primary";
-  export let functionToCall: FunctionToCall = () => {};
-
-  let isLoading = false;
-  async function functionWrapper() {
-    isLoading = true;
-    await functionToCall();
-    isLoading = false;
-  }
-
-  let primary = "";
-</script>
-
-<button
-  on:click={() => {
-    functionWrapper();
-  }}
-  class={importance}
->
-  {#if isLoading}
-    <div role="status" class="">
-      <svg
-        aria-hidden="true"
-        class="{getContext('display') === 'editor'
-          ? 'w-3 h-3'
-          : 'w-5 h-5'} mr-2 text-gray-200 animate-spin dark:text-neutral-600 fill-blue-600 dark:fill-emerald-300"
-        viewBox="0 0 100 101"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-          fill="currentColor"
-        />
-        <path
-          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-          fill="currentFill"
-        />
-      </svg>
-    </div>
-  {/if}
-  <div />
-  {label}
-</button>
-
-<style lang="postcss">
-  :global(.dark) .primary {
-    @apply bg-emerald-600 hover:bg-emerald-700;
-  }
-
-  .primary {
-    @apply min-w-[96px] px-4 w-full items-center inline-flex justify-center py-1 bg-blue-400 hover:bg-blue-500 text-white font-medium border rounded active:border-neutral-800 border-neutral-500 active:outline-none active:ring-blue-300 active:ring-2;
-  }
-
-  :global(.dark) .secondary {
-    @apply text-white border-emerald-600 hover:bg-emerald-700;
-  }
-
-  .secondary {
-    @apply min-w-[96px] px-4 w-full items-center inline-flex justify-center py-1  hover:bg-blue-500  text-black hover:text-white font-medium border rounded active:border-neutral-800 border-neutral-500 active:outline-none active:ring-blue-300 active:ring-2;
-  }
-</style>
diff --git a/src/lib/components/atomic/AtomicInput.svelte b/src/lib/components/atomic/AtomicInput.svelte
deleted file mode 100644
index d622bf8..0000000
--- a/src/lib/components/atomic/AtomicInput.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts">
-  export let label: string = "LABEL";
-  export let data: string | number = "VALUE";
-  export let placeholder: string = "PLACEHOLDER";
-  export let type: string = "text";
-  export let direction: "horizontal" | "vertical" = "horizontal";
-</script>
-
-<div
-  class:grid-cols-3={direction === "horizontal"}
-  class:grid-rows-2={direction === "vertical"}
-  class="grid items-center p-2"
->
-  <label
-    class="{direction == 'horizontal' ? 'col-span-1' : ''} font-light"
-    for="">{label}</label
-  >
-  {#if type === "password"}
-    <input
-      type="password"
-      {placeholder}
-      bind:value={data}
-      class="{direction == 'horizontal'
-        ? 'col-span-2'
-        : ''} w-full p-1 border rounded bg-white dark:bg-neutral-800 focus:border-gray-800 border-gray-500 focus:outline-none focus:ring-blue-300 focus:ring-2"
-    />
-  {:else if type === "text"}
-    <input
-      type="text"
-      {placeholder}
-      bind:value={data}
-      class="{direction == 'horizontal'
-        ? 'col-span-2'
-        : ''} w-full p-1 border rounded bg-white dark:bg-neutral-800 focus:border-gray-800 border-gray-500 focus:outline-none focus:ring-blue-300 focus:ring-2"
-    />
-  {/if}
-</div>
diff --git a/src/lib/components/atomic/ToggleSwitch.svelte b/src/lib/components/atomic/ToggleSwitch.svelte
deleted file mode 100644
index 321733c..0000000
--- a/src/lib/components/atomic/ToggleSwitch.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte";
-
-  const dispatch = createEventDispatcher();
-
-  export let checkbox = false;
-
-  const toggle = () => {
-    dispatch("toggle", !checkbox);
-  };
-</script>
-
-<!-- Toggle B -->
-<label class="flex items-center cursor-pointer">
-  <!-- label -->
-  <div class=" dark:text-white font-medium rounded-r-full ml-1">
-    {#if checkbox}
-      <slot name="on" />
-    {:else}
-      <slot name="off" />
-    {/if}
-  </div>
-  <!-- toggle -->
-  <div class="relative">
-    <!-- input -->
-    <input
-      type="checkbox"
-      on:change|stopPropagation|preventDefault={toggle}
-      bind:checked={checkbox}
-      class="sr-only"
-    />
-    <!-- line -->
-    <div
-      class="block bg-neutral-300 dark:bg-neutral-800 w-7 h-4 rounded-full mr-1"
-    />
-    <!-- dot -->
-    <div
-      class="dot absolute left-0.5 top-0.5 bg-neutral-500 w-3 h-3 rounded-full transition"
-    />
-  </div>
-</label>
-
-<style lang="postcss">
-  /* Toggle B */
-  input:checked ~ .dot {
-    transform: translateX(100%);
-    @apply bg-emerald-400;
-  }
-</style>
diff --git a/src/lib/components/tree/ConfigTree.svelte b/src/lib/components/tree/ConfigTree.svelte
index 04c2825..e3c2536 100644
--- a/src/lib/components/tree/ConfigTree.svelte
+++ b/src/lib/components/tree/ConfigTree.svelte
@@ -10,6 +10,7 @@
   import {
     selected_config,
     show_supported_only,
+    hide_community_configs,
     config_manager,
     compatible_config_types,
     selectClosestMatch,
@@ -60,6 +61,7 @@
       $debounced_filter_value,
       $sort_key,
       $show_supported_only,
+      $hide_community_configs,
       $compatible_config_types,
     );
   }
@@ -115,11 +117,13 @@
     filter: FilterValue,
     key: Sort.Key,
     supported: boolean,
+    community: boolean,
     compatibileTypes: string[],
   ): TreeProperties {
     const filteredConfigs = configs.filter((e) => matches(e, filter));
     const root = Tree.create(configs, {
       showSupportedOnly: supported,
+      hideCommunityConfigs: community,
       compatibileTypes,
     }).sort(key);
 
@@ -242,7 +246,12 @@
 <TreeComponent {...treeProps}>
   <svelte:fragment slot="folder" let:item let:expanded let:level>
     {@const data = getFolderData(item)}
-    <TreeFolder {item} {expanded} ctxOptions={getfolderCtxOptions(level, item)}>
+    <TreeFolder
+      {item}
+      {level}
+      {expanded}
+      ctxOptions={getfolderCtxOptions(level, item)}
+    >
       <span slot="title-label"
         >{@html `${highlightMatches(data.title, $filter_value)} (${getItemCount(item)})`}</span
       >
diff --git a/src/lib/components/tree/ConfigTree.ts b/src/lib/components/tree/ConfigTree.ts
index ef5ee59..a51b18e 100644
--- a/src/lib/components/tree/ConfigTree.ts
+++ b/src/lib/components/tree/ConfigTree.ts
@@ -162,10 +162,14 @@ export namespace Tree {
       if (get(child).type !== TreeItemType.ITEM) continue;
 
       const { item } = get(child).data as ItemData;
-      const { virtualPath } = item;
-      if (!virtualPath) continue;
+      const { temporaryGraphPath } = item;
+      if (
+        typeof temporaryGraphPath === "undefined" ||
+        temporaryGraphPath === ""
+      )
+        continue;
 
-      const segments = virtualPath.split("/");
+      const segments = temporaryGraphPath.split("/");
       const [folderName, ...restPath] = segments;
       if (!folderName) continue;
 
@@ -185,7 +189,7 @@ export namespace Tree {
       // Clone the item with a reduced virtual path for recursion
       const newItem = {
         ...item,
-        virtualPath: restPath.join("/"),
+        temporaryGraphPath: restPath.join("/"),
       };
 
       // Replace the item's data on the child node without mutating the original
@@ -228,13 +232,14 @@ export namespace Tree {
     configs: Config[],
     options: Options = { compatibileTypes: [] },
   ) {
-    const { showSupportedOnly } = options;
+    const { showSupportedOnly, hideCommunityConfigs } = options;
     let root = new TreeNodeImpl(undefined, TreeItemType.FOLDER, {
       title: "Root",
     });
     const [
       my_configs,
       recommended_configs,
+      workflow_configs,
       community_configs,
       other_configs,
       unsupported_configs,
@@ -243,6 +248,9 @@ export namespace Tree {
       new TreeNodeImpl(root, TreeItemType.FOLDER, {
         title: "Recommended Configs",
       }),
+      new TreeNodeImpl(root, TreeItemType.FOLDER, {
+        title: "Workflow Configs",
+      }),
       new TreeNodeImpl(root, TreeItemType.FOLDER, {
         title: "Community Configs",
       }),
@@ -295,6 +303,30 @@ export namespace Tree {
             }),
         ),
     );
+    workflow_configs.addChild(
+      ...configs
+        .filter((e: Config) => {
+          const isMyConfig =
+            e.syncStatus == "local" || e.owner === cm?.getCurrentOwnerId();
+          const isOfficialConfig =
+            configuration.WORKFLOW_CONFIG_PROFILE_IDS.includes(e.owner ?? "");
+
+          const cct = get(compatible_config_types);
+
+          return (
+            !isMyConfig &&
+            isOfficialConfig &&
+            (!(showSupportedOnly ?? false) || cct.includes(e.type))
+          );
+        })
+        .map(
+          (e) =>
+            new TreeNodeImpl(undefined, TreeItemType.ITEM, {
+              item: e,
+              compatible: isCompatible(e, options.compatibileTypes),
+            }),
+        ),
+    );
     community_configs.addChild(
       ...configs
         .filter((e: Config) => {
@@ -357,14 +389,18 @@ export namespace Tree {
 
     const fv = get(filter_value);
     const isFiltering = fv.length > 0;
-    if (isFiltering) {
-      root.addChild(other_configs);
+    if (hideCommunityConfigs) {
+      root.addChild(recommended_configs, workflow_configs);
     } else {
-      root.addChild(recommended_configs, community_configs);
+      root.addChild(recommended_configs, workflow_configs, community_configs);
     }
 
     if (showSupportedOnly) {
-      root.addChild(unsupported_configs);
+      // root.addChild(unsupported_configs);
+      console.log(
+        "Unsupported count",
+        get(unsupported_configs).children.length,
+      );
     }
 
     buildVirtualFolders(root);
diff --git a/src/lib/components/tree/ProfileCloudTreeItem.svelte b/src/lib/components/tree/ProfileCloudTreeItem.svelte
index 7f6b81e..a514119 100644
--- a/src/lib/components/tree/ProfileCloudTreeItem.svelte
+++ b/src/lib/components/tree/ProfileCloudTreeItem.svelte
@@ -13,6 +13,7 @@
   } from "./TreeNode.svelte";
   import { createEventDispatcher } from "svelte";
 
+  import { SvgIcon } from "@intechstudio/grid-uikit";
   const dispatch = createEventDispatcher();
 
   export let selected: boolean;
@@ -60,7 +61,11 @@
         : "status-inactive"}
     />
   </div>
-  <div class="button-content">
+  <SvgIcon
+    fill="var(--foreground-muted)"
+    iconPath={$item.children.length > 0 ? "overlay_02" : "overlay_03"}
+  />
+  <div class="button-content" class:expanded>
     <span class="button-label" class:label-incompatible={compatible}>
       <slot name="button-label">
         {data.name}
@@ -79,13 +84,9 @@
           height="11"
           class:collapsed={!expanded}
           viewBox="0 0 14 11"
-          fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            d="M6.99968 11L0.9375 0.5L13.0619 0.500001L6.99968 11Z"
-            fill="#D9D9D9"
-          />
+          <path d="M6.99968 11L0.9375 0.5L13.0619 0.500001L6.99968 11Z" />
         </svg>
       </div>
     {/if}
@@ -96,21 +97,37 @@
   .button {
     display: flex;
     flex-direction: row;
+    gap: 0.5rem;
     align-items: center;
     width: 100%;
     border-width: 1px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-    background-color: #2a3439;
     height: 33px;
     padding: 0;
+    background-color: transparent;
+  }
+  .button-content {
+    color: var(--foreground-muted);
+  }
+  .button-content.expanded {
+    font-weight: bolder;
+    color: var(--foreground);
+  }
+
+  .button:hover {
+    background-color: var(--background);
   }
 
   .border-selected {
+    background-color: var(--background);
+    font-weight: bolder;
     border-color: #10b981;
   }
 
+  .border-selected > .button-content {
+    color: var(--foreground);
+  }
   .border-unselected {
-    border-color: rgba(255, 255, 255, 0.1);
+    border-color: transparent;
   }
 
   .status-indicator {
@@ -154,7 +171,6 @@
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
-    color: white;
   }
 
   .label-incompatible {
@@ -162,7 +178,7 @@
   }
 
   .type-label {
-    color: white;
+    color: var(--foreground-muted);
     font-size: inherit;
     padding: 0.125rem 0.5rem;
     border-width: 1px;
@@ -187,7 +203,14 @@
     margin-right: 0.5rem;
   }
 
-  .collapsed {
+  svg.collapsed {
     transform: rotate(-90deg);
   }
+
+  .trigger-container {
+    fill: var(--foreground-muted);
+  }
+  .trigger-container:hover {
+    fill: var(--foreground);
+  }
 </style>
diff --git a/src/lib/components/tree/TreeFolder.svelte b/src/lib/components/tree/TreeFolder.svelte
index d0cc3e9..1e5f9d6 100644
--- a/src/lib/components/tree/TreeFolder.svelte
+++ b/src/lib/components/tree/TreeFolder.svelte
@@ -4,6 +4,7 @@
     type ContextMenuOptions,
   } from "@intechstudio/grid-uikit";
 
+  import { SvgIcon } from "@intechstudio/grid-uikit";
   import {
     type AbstractFolderData,
     type AbstractTreeNode,
@@ -14,12 +15,36 @@
   export let item: AbstractTreeNode<any>;
   export let expanded: boolean;
   export let ctxOptions: ContextMenuOptions = { items: [] };
+  export let level: number;
+
+  let iconPath = "";
+
+  $: {
+    if (level !== 0) {
+      iconPath = expanded ? "folder_open" : "folder_closed";
+    } else {
+      if (data.title === "My Configs") {
+        iconPath = "profile";
+      } else if (data.title === "Community Configs") {
+        iconPath = "publicIcon";
+      } else if (data.title === "Other Configs") {
+        iconPath = "publicIcon";
+      } else if (data.title === "Recommended Configs") {
+        iconPath = "tick";
+      } else if (data.title === "Workflow Configs") {
+        iconPath = "tick";
+      } else if (data.title === "Unsupported Configs") {
+        iconPath = "deleteIcon";
+      }
+    }
+  }
 
   let data: AbstractFolderData;
   $: data = $item.data as AbstractFolderData;
 </script>
 
-<div class="header" use:contextTarget={ctxOptions}>
+<div class="header" class:expanded use:contextTarget={ctxOptions}>
+  <SvgIcon fill="var(--foreground-muted)" {iconPath} />
   <div class="title">
     <slot name="title-label">
       {`${data.title} (${
@@ -27,41 +52,33 @@
       })`}</slot
     >
   </div>
-  <svg
-    width="14"
-    height="11"
-    class:collapsed={!expanded}
-    viewBox="0 0 14 11"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M6.99968 11L0.9375 0.5L13.0619 0.500001L6.99968 11Z"
-      fill="#D9D9D9"
-    />
-  </svg>
 </div>
 
 <style>
   .header {
     display: flex;
+    gap: 0.5rem;
     width: 100%;
     align-items: center;
-    margin-bottom: 0.25rem;
-    height: 1.25rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
+    padding: 0.25rem;
+    color: var(--foreground-muted);
+  }
+  .header:hover {
+    background-color: var(--background);
+  }
+
+  .expanded {
+    color: var(--foreground);
+    background-color: var(--background2);
+    font-weight: bolder;
   }
 
   .title {
+    display: flex;
     flex-grow: 1;
     text-align: left;
-    color: rgba(255, 255, 255, 0.8);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-
-  .collapsed {
-    transform: rotate(-90deg);
-  }
 </style>
diff --git a/src/lib/components/tree/TreeNode.svelte b/src/lib/components/tree/TreeNode.svelte
index dd41fc4..207bed1 100644
--- a/src/lib/components/tree/TreeNode.svelte
+++ b/src/lib/components/tree/TreeNode.svelte
@@ -269,6 +269,6 @@
 
   .root-subtree {
     overflow-y: scroll;
-    padding-right: 4px;
+    padding-right: 0.5rem;
   }
 </style>
diff --git a/src/lib/configmanager/ConfigManager.ts b/src/lib/configmanager/ConfigManager.ts
index f6c646b..907e032 100644
--- a/src/lib/configmanager/ConfigManager.ts
+++ b/src/lib/configmanager/ConfigManager.ts
@@ -161,6 +161,7 @@ export function createConfigManager(observer: {
           ) ?? true,
         syncStatus: syncStatus,
         public: value.cloud?.public,
+        temporaryGraphPath: latestConfig.virtualPath,
       });
     });
     observer.next?.(mergedConfigs);
@@ -233,6 +234,11 @@ export function createConfigManager(observer: {
   async function saveConfig(config: BaseConfig, createMissingConfigs: boolean) {
     let appConfigs = appConfigIdToConfigMap.get(config.id);
     config.modifiedAt = new Date();
+    delete config["temporaryGraphPath"];
+
+    if (typeof config.virtualPath === "undefined") {
+      config.virtualPath = "";
+    }
 
     let cloudId = appConfigs?.cloud?.id;
     let configCreated = false;
diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts
index 53a5f12..f58dae3 100644
--- a/src/lib/schemas.ts
+++ b/src/lib/schemas.ts
@@ -25,6 +25,7 @@ export const BaseConfigSchema = z.object({
   configs: z.any(),
   owner: z.string().optional(),
   virtualPath: z.string().optional(),
+  temporaryGraphPath: z.string().optional(),
   displayName: z.string().optional(),
 });
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index dea403b..099d6af 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import ToggleSwitch from "../lib/components/atomic/ToggleSwitch.svelte";
+  import { Toggle } from "@intechstudio/grid-uikit";
   import DisplayOnWeb from "../lib/components/DisplayOnWeb.svelte";
   import { getContext, setContext } from "svelte";
   import "../app.css";
@@ -22,32 +22,18 @@
     setContext("display", "web");
   }
 
-  let darkMode = getContext("display") === "editor" ? true : true;
-
-  function toggleDarkMode() {
-    darkMode = !darkMode;
+  let darkMode = true;
 
+  $: {
     document.documentElement.setAttribute(
       "color-scheme",
       darkMode ? "dark" : "light",
     );
-
-    // set class on body, so on overscrolling the background will match the app color
-    //document.body.classList.toggle("bg-primary");
-  }
-
-  let editorMode = false;
-
-  function toggleDisplayMode() {
-    editorMode = !editorMode;
-
-    $mode_store = editorMode;
   }
 
   let fontSize = getContext("display") === "editor" ? "12px" : "16px";
 
   console.log("Dark mode:", darkMode);
-
   console.log("Application context:", getContext("display"));
 </script>
 
@@ -55,62 +41,31 @@
   <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
 </svelte:head>
 
-<main
-  style="{'font-size: ' +
-    fontSize}; background-color: var(--background); color: var(--foreground);"
->
-  <div
-    class="flex flex-col justify-between transition duration-200 min-h-screen"
-  >
+<main>
+  <div class="app-container">
     <DisplayOnWeb>
-      <div class="">
-        <nav class=" container mx-auto flex w-full justify-between p-4">
-          <a href="https://intech.studio">
-            <img
-              src={darkMode
-                ? "/icon-logo-white-transparent.svg"
-                : "/icon-logo-black-transparent.svg"}
-              alt="Intech Studio"
-              class="h-8 p-1"
-            />
-          </a>
-          <ToggleSwitch on:toggle={toggleDarkMode}>
-            <svelte:fragment slot="off">
-              <img src="/moon_icon.svg" alt="dark mode" class="w-6 h-6" />
-            </svelte:fragment>
-            <svelte:fragment slot="on">
-              <img src="/sun_icon.svg" alt="light mode" class="w-6 h-6 p-1" />
-            </svelte:fragment>
-          </ToggleSwitch>
-          <ToggleSwitch on:toggle={toggleDisplayMode}>
-            <svelte:fragment slot="off">
-              <img
-                src="/icon-logo-{darkMode ? 'white' : 'black'}-transparent.svg"
-                alt="dark mode"
-                class="w-16 h-16 px-2"
-              />
-            </svelte:fragment>
-            <svelte:fragment slot="on">
-              <img
-                src="/icon-logo-{darkMode ? 'white' : 'black'}-transparent.svg"
-                alt="light mode"
-                class="w-16 h-16 px-2"
-              />
-            </svelte:fragment>
-          </ToggleSwitch>
-        </nav>
-      </div>
+      <nav class="container">
+        <a href="https://intech.studio">
+          <img
+            src={darkMode
+              ? "/icon-logo-white-transparent.svg"
+              : "/icon-logo-black-transparent.svg"}
+            alt="Intech Studio"
+            class="logo"
+          />
+        </a>
+        <Toggle title="Dark mode" bind:value={darkMode} />
+        <Toggle title="Editor view" bind:value={$mode_store} />
+      </nav>
     </DisplayOnWeb>
 
     <slot />
 
     <DisplayOnWeb>
-      <footer class=" bg-emerald-300">
-        <div
-          class="container mx-auto flex w-full justify-center p-4 text-center"
-        >
-          <div class="flex flex-row gap-2 text-sm">
-            <p>
+      <footer>
+        <div class="container">
+          <div class="footer-content">
+            <div>
               <a
                 href="https://intech.studio"
                 target="_blank"
@@ -118,8 +73,8 @@
               >
                 &copy; {new Date().getFullYear()} Intech Studio
               </a>
-            </p>
-            <span>-</span>
+            </div>
+            <div>-</div>
             <VersionStamp />
           </div>
         </div>
@@ -127,3 +82,53 @@
     </DisplayOnWeb>
   </div>
 </main>
+
+<style>
+  main {
+    font-size: var(--font-size);
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+
+  .app-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 100vh;
+    transition: all 0.2s;
+  }
+
+  nav.container {
+    max-width: 1024px;
+    margin: 0 auto;
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    padding: 1rem;
+  }
+
+  nav img.logo {
+    height: 2rem;
+    padding: 0.25rem;
+  }
+
+  footer {
+    background-color: #34d399; /* emerald-300 */
+  }
+
+  footer .container {
+    max-width: 1024px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    padding: 1rem;
+    text-align: center;
+  }
+
+  footer .footer-content {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+    font-size: 0.875rem; /* text-sm */
+  }
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 015f0bf..7f0f7e4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -32,103 +32,30 @@
   });
 </script>
 
-<section class="w-full flex flex-grow">
-  <div class="w-full flex-grow flex justify-center">
-    <div class="container flex flex-col max-w-screen-xl flex-grow">
-      <DisplayOnWeb>
-        <div
-          class="flex flex-col justify-between pt-8 text-opacity-80 dark:text-opacity-80"
-        >
-          <h1 class="text-3xl font-bold pb-2">profile list</h1>
-          <p class="text-opacity-60 dark:text-opacity-60">
-            <a href="https://links.intech.studio/discord"
-              >Join the discord channel</a
-            > to get support.
-          </p>
-        </div>
-      </DisplayOnWeb>
-      {#if display == "editor" && !isEditorVersionCompatible}
-        <div class="flex justify-center items-center flex-grow px-4">
-          <p class="text-center text-lg">
-            Your Editor is not compatible with the current Profile Cloud
-            version. Please update your Editor to the latest version!
-          </p>
-        </div>
-      {/if}
-      {#if display == "editor" && isEditorVersionCompatible}
-        <EditorLayout />
-      {:else if $mode_store}
-        <EditorLayout />
-      {:else}
-        <BrowserLayout />
-      {/if}
-    </div>
-  </div>
-</section>
+<section>
+  <DisplayOnWeb>
+    <h1>profile list</h1>
+    <a href="https://links.intech.studio/discord"> Join the discord channel </a>
+    to get support.
+  </DisplayOnWeb>
 
-<style lang="postcss">
-  :global(.splitpanes.modern-theme .splitpanes__pane) {
-    /*  @apply bg-secondary; */
-    position: relative;
-    overflow: visible;
-  }
+  {#if display == "editor" && !isEditorVersionCompatible}
+    <div>
+      <p>
+        Your Editor is not compatible with the current Profile Cloud version.
+        Please update your Editor to the latest version!
+      </p>
+    </div>
+  {/if}
 
-  /*betty magic selector*/
-  :global(.splitpanes.modern-theme .splitpanes__pane.leftPane) {
-    overflow: hidden;
-  }
+  {#if display == "editor" && isEditorVersionCompatible}
+    <EditorLayout />
+  {:else if $mode_store}
+    <EditorLayout />
+  {:else}
+    <BrowserLayout />
+  {/if}
+</section>
 
-  :global(.splitpanes.modern-theme .splitpanes__splitter) {
-    background-color: #4c4c4c;
-    position: relative;
-  }
-  :global(.splitpanes.modern-theme .splitpanes__splitter:before) {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    transition: opacity 0.3s;
-    background-color: #2db9d2;
-    width: 200;
-    opacity: 0;
-    z-index: 1;
-  }
-  :global(.splitpanes.modern-theme .splitpanes__splitter:hover:before) {
-    opacity: 1;
-  }
-  :global(
-    .splitpanes.modern-theme .splitpanes__splitter.splitpanes__splitter__active
-  ) {
-    z-index: 2;
-    /* Fix an issue of overlap fighting with a near hovered splitter */
-  }
-  :global(.modern-theme.splitpanes--vertical > .splitpanes__splitter:before) {
-    left: -3px;
-    right: -3px;
-    height: 100%;
-    cursor: col-resize;
-  }
-  :global(.modern-theme.splitpanes--horizontal > .splitpanes__splitter:before) {
-    top: -3px;
-    bottom: -3px;
-    width: 100%;
-    cursor: row-resize;
-  }
-  :global(.splitpanes.no-splitter .splitpanes__pane) {
-    background-color: #0e100f;
-  }
-  :global(.splitpanes.no-splitter .splitpanes__splitter) {
-    background-color: #4c4c4c;
-    position: relative;
-  }
-  :global(.no-splitter.splitpanes--horizontal > .splitpanes__splitter:before) {
-    width: 0.05rem;
-    pointer-events: none;
-    cursor: none;
-  }
-  :global(.no-splitter.splitpanes--vertical > .splitpanes__splitter:before) {
-    height: 0.05rem;
-    pointer-events: none;
-    cursor: none;
-  }
+<style global>
 </style>
diff --git a/src/routes/BrowserLayout.svelte b/src/routes/BrowserLayout.svelte
index 866f38b..6440095 100644
--- a/src/routes/BrowserLayout.svelte
+++ b/src/routes/BrowserLayout.svelte
@@ -52,14 +52,9 @@
   }
 </script>
 
-<div id="main" class="flex-col relative z-0 overflow-hidden">
-  <div class="flex justify-end">
-    <button
-      on:click={() => {
-        filterShowHide();
-      }}
-      class="text-left font-xs"
-    >
+<div id="main">
+  <div class="filter-toggle">
+    <button on:click={filterShowHide}>
       {#if isSearchSortingShows}
         Hide Filters
       {:else}
@@ -67,13 +62,15 @@
       {/if}
     </button>
   </div>
-  <div class="flex flex-row w-full gap-2" class:hidden={!isSearchSortingShows}>
-    <Filter />
-    <Sorter />
-  </div>
-  <div
-    class="overflow-y-auto w-full h-full p-2 lg:py-8 grid grid-cols-1 md:grid-cols-2 grid-flow-row lg:grid-cols-3 gap-4"
-  >
+
+  {#if isSearchSortingShows}
+    <div class="filters-row">
+      <Filter />
+      <Sorter />
+    </div>
+  {/if}
+
+  <div class="configs-grid">
     {#each filteredConfigs as config, index (config.id)}
       <ConfigCardBrowser
         on:click={() => {
@@ -93,7 +90,6 @@
                 config.id;
               window.open(configLinkUrl, "_self");
             }}
-            class="rounded px-4 py-1 dark:bg-emerald-600 dark:hover:bg-emerald-700 font-medium"
           >
             Import
           </button>
@@ -102,3 +98,71 @@
     {/each}
   </div>
 </div>
+
+<style>
+  /* Main container */
+  #main {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    z-index: 0;
+    overflow: hidden;
+  }
+
+  /* Filter toggle button */
+  .filter-toggle {
+    display: flex;
+  }
+
+  /* Filters row */
+  .filters-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    gap: 0.5rem; /* gap-2 */
+  }
+
+  /* Configs grid */
+  .configs-grid {
+    overflow-y: auto;
+    width: 100%;
+    height: 100%;
+    padding: 0.5rem; /* p-2 */
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    grid-auto-flow: row;
+    gap: 1rem; /* gap-4 */
+  }
+
+  @media (min-width: 768px) {
+    /* md:grid-cols-2 */
+    .configs-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    /* lg:py-8 and lg:grid-cols-3 */
+    .configs-grid {
+      padding-top: 2rem;
+      padding-bottom: 2rem;
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  /* Import button inside ConfigCardBrowser */
+  ConfigCardBrowser button {
+    border-radius: 0.25rem; /* rounded */
+    padding: 0.25rem 1rem; /* py-1 px-4 */
+    font-weight: 500; /* font-medium */
+    background-color: #10b981; /* dark:bg-emerald-600 */
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+
+  ConfigCardBrowser button:hover {
+    background-color: #059669; /* dark:hover:bg-emerald-700 */
+  }
+</style>
diff --git a/src/routes/ConfigCardBrowser.svelte b/src/routes/ConfigCardBrowser.svelte
index 209f45a..6b046d6 100644
--- a/src/routes/ConfigCardBrowser.svelte
+++ b/src/routes/ConfigCardBrowser.svelte
@@ -6,7 +6,7 @@
     onDestroy,
     onMount,
   } from "svelte";
-  import SvgIcon from "../lib/icons/SvgIcon.svelte";
+  import { SvgIcon } from "@intechstudio/grid-uikit";
   import type { Config } from "../lib/schemas";
   import { applyFocus } from "../lib/utils";
   import { doc, getDoc } from "firebase/firestore";
@@ -128,7 +128,7 @@
                 text: "Delete",
               }}
             >
-              <SvgIcon class="w-5" iconPath="delete" />
+              <SvgIcon fill="var(--foreground-muted)" iconPath="delete" />
             </button>
           {:else}
             <button
@@ -158,7 +158,10 @@
                 text: "Overwrite",
               }}
             >
-              <SvgIcon class="w-5" iconPath="overwrite_profile" />
+              <SvgIcon
+                fill="var(--foreground-muted)"
+                iconPath="overwrite_profile"
+              />
             </button>
           {:else}
             <button
@@ -260,7 +263,7 @@
                 text: "Public",
               }}
             >
-              <SvgIcon display={true} iconPath={"public"} />
+              <SvgIcon fill="var(--foreground-muted)" iconPath={"publicIcon"} />
             </div>
           {:else if data.public === false}
             <div
@@ -274,7 +277,10 @@
                 text: "Private",
               }}
             >
-              <SvgIcon display={true} iconPath={"private"} />
+              <SvgIcon
+                fill="var(--foreground-muted)"
+                iconPath={"privateIcon"}
+              />
             </div>
           {/if}
         </div>
diff --git a/src/routes/ConfigCardDisplay.svelte b/src/routes/ConfigCardDisplay.svelte
index 2bf3264..8bed54e 100644
--- a/src/routes/ConfigCardDisplay.svelte
+++ b/src/routes/ConfigCardDisplay.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { tooltip } from "./../lib/actions/tooltip";
   import { createEventDispatcher } from "svelte";
-  import SvgIcon from "../lib/icons/SvgIcon.svelte";
   import type { Config } from "../lib/schemas";
   import { applyFocus } from "../lib/utils";
   import { doc, getDoc } from "firebase/firestore";
@@ -9,6 +8,14 @@
   import ConfigDescription from "./ConfigDescription.svelte";
   import DataInput from "../lib/components/DataInput.svelte";
 
+  import {
+    Block,
+    BlockBody,
+    BlockColumn,
+    BlockRow,
+    BlockTitle,
+    SvgIcon,
+  } from "@intechstudio/grid-uikit";
   const dispatchEvent = createEventDispatcher();
 
   export let data: Config | undefined;
@@ -45,161 +52,149 @@
   }
 </script>
 
-<div class="w-full h-full bg-secondary p-2 overflow-hidden">
+<div
+  style="color: var(--foreground); background: var(--background);"
+  class="flex flex-col flex-1 min-h-0 p-2 overflow-auto"
+>
   {#if typeof data !== "undefined"}
-    <div class="grid grid-rows-[auto_1fr] gap-1 w-full h-full">
-      <div class="w-full flex flex-row gap-2 items-center justify-between">
-        <div class="flex flex-col flex-grow">
-          <DataInput
-            value={data.displayName ?? data.name}
-            disabled={!data.isEditable}
-            placeholder={"Add name"}
-            bold={true}
-            on:change={(e) => {
-              const { value } = e.detail;
-              dispatchEvent("name-change", {
-                value,
-              });
-            }}
-          />
+    <BlockRow>
+      <div class="text-xs flex flex-grow">
+        Created by {configOwner === "" ? "Unknown" : configOwner}
+      </div>
 
-          <div class="flex flex-row gap-2 items-center">
-            <span>Folder:</span>
-            <DataInput
-              value={data.virtualPath ?? ""}
-              placeholder={"Unsorted"}
-              disabled={!data.isEditable}
-              on:change={(e) => {
-                const { value } = e.detail;
-                const path = value.trim();
-                dispatchEvent("path-change", {
-                  value: path === "" ? undefined : path,
-                });
-              }}
+      {#if data.isEditable}
+        {#if deleteConfirmFlag == false}
+          <button
+            class="flex group relative"
+            on:click|stopPropagation={() => {
+              deleteConfirmFlag = true;
+            }}
+            use:tooltip={{
+              instant: true,
+              text: "Delete",
+            }}
+          >
+            <SvgIcon fill="var(--foreground-muted)" iconPath="deleteIcon" />
+          </button>
+        {:else}
+          <button
+            use:applyFocus
+            on:blur|stopPropagation={() => {
+              deleteConfirmFlag = false;
+            }}
+            on:click|stopPropagation={() => {
+              dispatchEvent("delete-config");
+              deleteConfirmFlag = false;
+            }}
+            class="bg-red-600 rounded px-1 text-xs">confirm</button
+          >
+        {/if}
+        {#if overwriteApplyFlag == false}
+          <button
+            class="flex relative group"
+            on:click|stopPropagation={() => {
+              overwriteApplyFlag = true;
+            }}
+            use:tooltip={{
+              instant: true,
+              text: "Overwrite",
+            }}
+          >
+            <SvgIcon
+              fill="var(--foreground-muted)"
+              iconPath="overwrite_profile"
             />
+          </button>
+        {:else}
+          <button
+            use:applyFocus
+            on:blur={() => {
+              overwriteApplyFlag = false;
+            }}
+            on:click|stopPropagation={() => {
+              dispatchEvent("overwrite-profile");
+              overwriteApplyFlag = false;
+            }}
+            class="bg-emerald-600 rounded px-1 text-xs">apply</button
+          >
+        {/if}
+      {/if}
+      <slot name="link-button" />
+      <slot name="sync-config-button" />
+      <slot name="split-config-button" />
+      <div class="items-center gap-x-1">
+        {#if data.isEditable && data.public !== undefined}
+          <slot name="toggle-accessibility" />
+        {:else if data.public}
+          <div
+            class="relative group"
+            use:tooltip={{
+              instant: true,
+              text: "Public",
+            }}
+          >
+            <SvgIcon fill="var(--foreground-muted)" iconPath={"publicIcon"} />
           </div>
-        </div>
-        <div class="flex flex-col items-end">
-          <span class="text-black text-xs dark:text-opacity-70 dark:text-white"
-            >{configOwner}</span
+        {:else if data.public === false}
+          <div
+            class="relative group"
+            use:tooltip={{
+              instant: true,
+              text: "Private",
+            }}
           >
-
-          <div class="relative flex items-center gap-x-1">
-            {#if data.isEditable}
-              {#if deleteConfirmFlag == false}
-                <button
-                  class="flex group relative"
-                  on:click|stopPropagation={() => {
-                    deleteConfirmFlag = true;
-                  }}
-                  use:tooltip={{
-                    nowrap: true,
-                    placement: "bottom",
-                    duration: 75,
-                    instant: true,
-                    class: "px-2 py-1",
-                    text: "Delete",
-                  }}
-                >
-                  <SvgIcon class="w-5" iconPath="delete" />
-                </button>
-              {:else}
-                <button
-                  use:applyFocus
-                  on:blur|stopPropagation={() => {
-                    deleteConfirmFlag = false;
-                  }}
-                  on:click|stopPropagation={() => {
-                    dispatchEvent("delete-config");
-                    deleteConfirmFlag = false;
-                  }}
-                  class="bg-red-600 rounded px-1 text-xs">confirm</button
-                >
-              {/if}
-              {#if overwriteApplyFlag == false}
-                <button
-                  class="flex relative group"
-                  on:click|stopPropagation={() => {
-                    overwriteApplyFlag = true;
-                  }}
-                  use:tooltip={{
-                    nowrap: true,
-                    placement: "bottom",
-                    duration: 75,
-                    instant: true,
-                    class: "px-2 py-1",
-                    text: "Overwrite",
-                  }}
-                >
-                  <SvgIcon class="w-5" iconPath="overwrite_profile" />
-                </button>
-              {:else}
-                <button
-                  use:applyFocus
-                  on:blur={() => {
-                    overwriteApplyFlag = false;
-                  }}
-                  on:click|stopPropagation={() => {
-                    dispatchEvent("overwrite-profile");
-                    overwriteApplyFlag = false;
-                  }}
-                  class="bg-emerald-600 rounded px-1 text-xs">apply</button
-                >
-              {/if}
-            {/if}
-            <slot name="link-button" />
-            <slot name="sync-config-button" />
-            <slot name="split-config-button" />
-            <div class="flex items-center gap-x-1">
-              {#if data.isEditable && data.public !== undefined}
-                <slot name="toggle-accessibility" />
-              {:else if data.public}
-                <div
-                  class="relative group"
-                  use:tooltip={{
-                    nowrap: true,
-                    placement: "bottom",
-                    duration: 75,
-                    instant: true,
-                    class: "px-2 py-1",
-                    text: "Public",
-                  }}
-                >
-                  <SvgIcon display={true} iconPath={"public"} />
-                </div>
-              {:else if data.public === false}
-                <div
-                  class="relative group"
-                  use:tooltip={{
-                    nowrap: true,
-                    placement: "bottom",
-                    duration: 75,
-                    instant: true,
-                    class: "px-2 py-1",
-                    text: "Private",
-                  }}
-                >
-                  <SvgIcon display={true} iconPath={"private"} />
-                </div>
-              {/if}
-            </div>
-            <slot name="import-config-browser-button" />
+            <SvgIcon fill="var(--foreground-muted)" iconPath={"privateIcon"} />
           </div>
-        </div>
+        {/if}
+        <slot name="import-config-browser-button" />
       </div>
-      <div class="flex text-white text-opacity-70 overflow-scroll">
-        <ConfigDescription
-          value={data.description}
+    </BlockRow>
+    <BlockColumn>
+      <DataInput
+        value={data.displayName ?? data.name}
+        disabled={!data.isEditable}
+        placeholder={"Add name"}
+        bold={true}
+        on:change={(e) => {
+          const { value } = e.detail;
+          dispatchEvent("name-change", {
+            value,
+          });
+        }}
+      />
+
+      <BlockRow>
+        <span>Folder:</span>
+        <DataInput
+          value={data.virtualPath ?? ""}
+          placeholder={"Unsorted"}
           disabled={!data.isEditable}
-          on:change={handleDescriptionChange}
+          on:change={(e) => {
+            const { value } = e.detail;
+            const path = value;
+            dispatchEvent("path-change", {
+              value: path === "" ? undefined : path,
+            });
+          }}
         />
-      </div>
+      </BlockRow>
+    </BlockColumn>
+    <div
+      style="color: var(--foreground-muted)"
+      class="flex flex-1 min-h-0 w-full overflow-y-auto"
+    >
+      <ConfigDescription
+        value={data.description}
+        disabled={!data.isEditable}
+        on:change={handleDescriptionChange}
+      />
     </div>
   {:else}
-    <div class="flex bg-primary h-full items-center justify-center">
-      <span class="text-white text-opacity-70"
-        >No configuration is selected</span
-      >
+    <div
+      style="color: var(--foreground-muted); background: var(--background)"
+      class="flex max-h-fit items-center justify-center"
+    >
+      No configuration is selected
     </div>
   {/if}
 </div>
diff --git a/src/routes/ConfigDescription.svelte b/src/routes/ConfigDescription.svelte
index 37cb18e..293c6b3 100644
--- a/src/routes/ConfigDescription.svelte
+++ b/src/routes/ConfigDescription.svelte
@@ -31,6 +31,7 @@
     mode = "edit";
     await tick(); // Wait for the DOM to update
     textArea.focus(); // Focus the input element
+    textArea.select();
   }
 
   function handlePaste(e: ClipboardEvent) {
@@ -125,32 +126,53 @@
   }
 </script>
 
-<div
-  class="markdown-editor flex-grow w-full h-full max-h-full max-w-full overflow-hidden"
->
-  {#if mode === "edit"}
-    <textarea
-      bind:this={textArea}
-      contenteditable="true"
-      spellcheck="false"
-      class="w-full p-1 h-full overflow-y-auto dark:bg-primary border border-transparent focus:border-emerald-500 focus:outline-none resize-none"
-      class:dark:hover:bg-neutral-800={!disabled}
-      on:blur={handleBlur}
-      on:paste={handlePaste}
-      bind:value
-    />
-  {:else if mode === "preview"}
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div
-      class="markdown-container p-1 flex-grow w-full h-full dark:bg-primary bg-opacity-40 overflow-y-auto"
-      on:dblclick={handleDoubleClick}
-    >
-      {@html highlightMatches(preview, $filter_value)}
-    </div>
-  {/if}
-</div>
+{#if mode === "edit"}
+  <textarea
+    bind:this={textArea}
+    contenteditable="true"
+    spellcheck="false"
+    on:blur={handleBlur}
+    on:paste={handlePaste}
+    bind:value
+  />
+{:else if mode === "preview"}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div class="markdown-container" on:dblclick={handleDoubleClick}>
+    {@html highlightMatches(preview, $filter_value)}
+  </div>
+{/if}
 
 <style>
+  div.markdown-container {
+    padding: 0.5rem;
+    width: 100%;
+  }
+
+  textarea {
+    width: 100%;
+    padding: 0.25rem;
+    height: 100%;
+    overflow-y: auto;
+    border: 1px solid transparent;
+    resize: none;
+    background-color: transparent;
+    outline: none;
+  }
+
+  textarea:hover {
+    background-color: var(--background-muted);
+  }
+
+  textarea.isbold {
+    font-weight: bold;
+    font-size: 110%;
+  }
+
+  textarea:focus {
+    background-color: var(--background-soft);
+    border-color: green;
+  }
+
   :global(.markdown-editor img) {
     display: inline;
     vertical-align: middle;
diff --git a/src/routes/ConfigurationSave.svelte b/src/routes/ConfigurationSave.svelte
index f7d8cc8..945e16e 100644
--- a/src/routes/ConfigurationSave.svelte
+++ b/src/routes/ConfigurationSave.svelte
@@ -1,8 +1,9 @@
 <script lang="ts" context="module">
   export enum ConfigurationSaveType {
-    MODULE = 0,
-    ELEMENT = 1,
-    SNIPPET = 2,
+    NONE = 0,
+    MODULE = 1,
+    ELEMENT = 2,
+    SNIPPET = 3,
   }
 
   enum ConfigurationSaveState {
@@ -13,6 +14,18 @@
 
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
+  import {
+    MoltenPushButton,
+    MoltenInput,
+    MeltRadio,
+    BlockTitle,
+  } from "@intechstudio/grid-uikit";
+  import {
+    BlockRow,
+    BlockColumn,
+    Block,
+    BlockBody,
+  } from "@intechstudio/grid-uikit";
 
   export let data: string[] | undefined = undefined;
 
@@ -36,7 +49,7 @@
 
   let module: string;
   let element: string;
-  let selected: ConfigurationSaveType | undefined = undefined;
+  let selected: ConfigurationSaveType = ConfigurationSaveType.NONE;
 
   function handleSelectionChange(value: ConfigurationSaveType) {
     selected = value;
@@ -85,111 +98,86 @@
     }
   }
 
-  $: {
-    switch (state) {
-      case ConfigurationSaveState.SELECT: {
-        break;
-      }
-      case ConfigurationSaveState.SAVE: {
-        nameInput?.focus();
-        break;
-      }
-    }
-  }
-
   $: handleStateChange(state);
 
   function handleStateChange(state: ConfigurationSaveState) {
     dispatch("state-change", { state: state });
   }
 
+  $: handleSelectionChange(selected);
+
+  let options = [];
+
+  $: {
+    options = [
+      { title: `${module} Module`, value: ConfigurationSaveType.MODULE },
+      { title: `${element} Element`, value: ConfigurationSaveType.ELEMENT },
+      { title: `Snippet`, value: ConfigurationSaveType.SNIPPET },
+    ];
+  }
+
   let nameInputValue: string;
-  let nameInput: HTMLInputElement | undefined;
 </script>
 
-<container class="flex w-full">
-  {#if state === ConfigurationSaveState.SELECT}
-    <div class="flex flex-row gap-2 w-full">
-      <div class="grid grid-flow-col w-full gap-2">
-        <button
-          class="flex w-full dark:bg-primary-700 dark:hover:bg-secondary items-center justify-center {selected ===
-          ConfigurationSaveType.ELEMENT
-            ? 'border-white'
-            : 'border-transparent'} border-opacity-75 border-2"
-          on:click={() => handleSelectionChange(ConfigurationSaveType.ELEMENT)}
-        >
-          {element} Element
-        </button>
-        <button
-          class="flex w-full dark:bg-primary-700 dark:hover:bg-secondary items-center justify-center {selected ===
-          ConfigurationSaveType.MODULE
-            ? 'border-white'
-            : 'border-transparent'} border-opacity-75 border-2"
-          on:click={() => handleSelectionChange(ConfigurationSaveType.MODULE)}
-        >
-          {module} Module
-        </button>
-        <button
-          class="flex w-full dark:bg-primary-700 dark:hover:bg-secondary items-center justify-center {selected ===
-          ConfigurationSaveType.SNIPPET
-            ? 'border-white'
-            : 'border-transparent'} border-opacity-75 border-2"
-          on:click={() => handleSelectionChange(ConfigurationSaveType.SNIPPET)}
-        >
-          Snippet
-        </button>
-      </div>
-      <div class="flex flex-col gap-2 w-20">
-        <button
-          class="px-4 py-1 dark:bg-primary-700 dark:hover:bg-secondary"
-          on:click={() => handleBackClicked(ConfigurationSaveState.SELECT)}
-          >Cancel</button
-        >
-        <button
-          class="px-4 py-1 dark:bg-emerald-600 font-medium"
-          class:opacity-50={typeof selected === "undefined"}
-          class:dark:hover:bg-emerald-700={typeof selected !== "undefined"}
-          disabled={typeof selected === "undefined"}
-          on:click={() => handleNextClicked(ConfigurationSaveState.SELECT)}
-          >Next</button
-        >
-      </div>
-    </div>
-  {:else if state === ConfigurationSaveState.SAVE}
-    <div class="grid grid-cols-[1fr_auto] gap-2 w-full">
-      <div class="flex flex-col gap-2 w-full">
-        {#if selected === ConfigurationSaveType.ELEMENT}
-          <span>{element} Configuration</span>
-        {:else if selected === ConfigurationSaveType.MODULE}
-          <span>{module} Configuration</span>
-        {:else if selected === ConfigurationSaveType.SNIPPET}
-          <span>Snippet Name:</span>
-        {/if}
-
-        <input
-          type="text"
-          bind:this={nameInput}
-          bind:value={nameInputValue}
-          class="flex w-full p-2 bg-white dark:bg-primary-700
-                        dark:placeholder-gray-400 text-md focus:outline-none"
-          placeholder="My Configuration..."
-        />
-      </div>
-      <div class="flex flex-col gap-2 w-20">
-        <button
-          class="px-4 py-1 dark:bg-primary-700 dark:hover:bg-secondary"
-          on:click={() => handleBackClicked(ConfigurationSaveState.SAVE)}
-          >Back</button
-        >
-        <button
-          class="px-4 py-1 dark:bg-emerald-600 font-medium"
-          class:opacity-50={typeof selected === "undefined"}
-          class:dark:hover:bg-emerald-700={typeof selected !== "undefined"}
-          disabled={typeof selected === "undefined"}
-          on:click={() => handleNextClicked(ConfigurationSaveState.SAVE)}
-          >Save</button
-        >
-      </div>
-    </div>
-  {/if}
-</container>
+{#if state === ConfigurationSaveState.SELECT}
+  <BlockColumn>
+    <MeltRadio
+      style="button"
+      bind:target={selected}
+      orientation="horizontal"
+      size="full"
+      {options}
+    />
+    <BlockRow>
+      <MoltenPushButton
+        click={() => {
+          handleBackClicked(ConfigurationSaveState.SELECT);
+        }}
+        text={`Back`}
+        style={"normal"}
+      />
+
+      <MoltenPushButton
+        click={() => {
+          handleNextClicked(ConfigurationSaveState.SELECT);
+        }}
+        disabled={selected === ConfigurationSaveType.NONE}
+        text={`Next`}
+        style={"accept"}
+      />
+    </BlockRow>
+  </BlockColumn>
+{:else if state === ConfigurationSaveState.SAVE}
+  <BlockColumn>
+    {#if selected === ConfigurationSaveType.ELEMENT}
+      <BlockTitle>{element} Configuration</BlockTitle>
+    {:else if selected === ConfigurationSaveType.MODULE}
+      <BlockTitle>{module} Configuration</BlockTitle>
+    {:else if selected === ConfigurationSaveType.SNIPPET}
+      <BlockTitle>Snippet Name</BlockTitle>
+    {/if}
+
+    <MoltenInput bind:target={nameInputValue} />
+    <BlockRow>
+      <MoltenPushButton
+        click={() => {
+          handleBackClicked(ConfigurationSaveState.SAVE);
+        }}
+        text={`Back`}
+        style={"normal"}
+      />
+
+      <MoltenPushButton
+        click={() => {
+          handleNextClicked(ConfigurationSaveState.SAVE);
+        }}
+        disabled={selected === ConfigurationSaveType.NONE}
+        text={`Save`}
+        style={"accept"}
+      />
+    </BlockRow>
+  </BlockColumn>
+{/if}
+
+<style>
+</style>
diff --git a/src/routes/EditorLayout.svelte b/src/routes/EditorLayout.svelte
index ebbf5f8..c6af0b9 100644
--- a/src/routes/EditorLayout.svelte
+++ b/src/routes/EditorLayout.svelte
@@ -4,6 +4,7 @@
   import { filter_value, FilterValue } from "./Filter";
   import {
     selected_config,
+    hide_community_configs,
     show_supported_only,
     config_manager,
     selected_component_types,
@@ -16,14 +17,14 @@
   } from "./ConfigurationSave.svelte";
   import { onDestroy, onMount } from "svelte";
   import { userAccountService } from "../lib/stores";
-  import SvgIcon from "../lib/icons/SvgIcon.svelte";
+  import { SvgIcon } from "@intechstudio/grid-uikit";
   import {
     type Config,
     LocalConfigSchema,
     BaseConfigSchema,
   } from "../lib/schemas";
   import { fade } from "svelte/transition";
-  import ToggleSwitch from "../lib/components/atomic/ToggleSwitch.svelte";
+  import { Toggle } from "@intechstudio/grid-uikit";
   import { parentIframeCommunication } from "../lib/utils";
   import {
     createConfigManager,
@@ -37,12 +38,18 @@
   import ConfigCardDisplay from "./ConfigCardDisplay.svelte";
   import { Pane, Splitpanes } from "svelte-splitpanes";
   import configuration from "../../Configuration.json";
-  import { MeltCheckbox } from "@intechstudio/grid-uikit";
+  import { MeltCheckbox, MoltenPushButton } from "@intechstudio/grid-uikit";
   import { compatible_config_types } from "./EditorLayout";
-  import Sorter from "./Sorter.svelte";
   import { dragTarget } from "../lib/actions/drag.action";
+  import {
+    BlockRow,
+    BlockColumn,
+    Block,
+    BlockBody,
+  } from "@intechstudio/grid-uikit";
 
   import DisplayOnWeb from "../lib/components/DisplayOnWeb.svelte";
+  import { last } from "@melt-ui/svelte/internal/helpers";
 
   let configs: Config[] = [];
 
@@ -132,7 +139,7 @@
   async function provideSelectedConfigForEditor(config?: Config | undefined) {
     await parentIframeCommunication({
       windowPostMessageName: "provideSelectedConfigForEditor",
-      dataForParent: { config: config ?? undefined },
+      dataForParent: { config: config },
     });
   }
 
@@ -164,45 +171,6 @@
     }
   }
 
-  function splitConfig(config: Config) {
-    if (config.configType !== "profile") return;
-
-    const type = ModuleType[config.type as keyof typeof ModuleType];
-    const elements = grid.get_module_element_list(type);
-
-    for (let configElement of config.configs) {
-      const name = `${config.name} - Element ${configElement.controlElementNumber}`;
-      const description = "";
-      const type = elements[configElement.controlElementNumber];
-
-      if (!type) {
-        parentIframeCommunication({
-          windowPostMessageName: "sendLogMessage",
-          dataForParent: {
-            type: "fail",
-            message: `Couldn't identify element number ${configElement.controlElementNumber} for type ${config.type}`,
-          },
-        });
-        continue;
-      }
-
-      const cm = get(config_manager);
-      let preset = {
-        name: name,
-        description: description,
-        type: type,
-        configType: "preset",
-        version: config.version,
-        configs: {
-          ...configElement,
-        },
-        id: "", //ID will be generated on save
-      };
-
-      cm?.saveConfig(BaseConfigSchema.parse(preset), true);
-    }
-  }
-
   async function createCloudConfigLink(config: Config) {
     const cm = get(config_manager);
     const configCloudId = cm?.getConfigCloudId(config);
@@ -415,303 +383,301 @@
 
     overwriteConfigWithEditorConfig(config);
   }
+
+  function handleLink() {
+    let config = $selected_config;
+    if (typeof config === "undefined") {
+      return;
+    }
+    createCloudConfigLink(config)
+      .then((res) => {
+        linkFlag = config.id;
+        setTimeout(() => {
+          linkFlag = undefined;
+        }, 1750);
+        provideSelectedConfigForEditor(undefined);
+      })
+      .catch((e) => {
+        console.warn(e.data);
+        parentIframeCommunication({
+          windowPostMessageName: "sendLogMessage",
+          dataForParent: {
+            type: "fail",
+            message: `Import link failed. ${e.data}`,
+          },
+        });
+      });
+
+    submitAnalytics({
+      eventName: "Cloud Action",
+      payload: {
+        click: "Create config link",
+      },
+    });
+  }
+
+  let publicToggleValue = $selected_config?.public;
+
+  let lastid = $selected_config?.id;
+
+  $: handleSelectionChange($selected_config);
+
+  function handleSelectionChange(config) {
+    if (lastid === config?.id) {
+      return;
+    }
+
+    lastid = config?.id;
+    publicToggleValue = config?.public;
+  }
+
+  $: {
+    updateVisiblility(publicToggleValue);
+  }
+
+  function updateVisiblility(value) {
+    const config = configs.find((e) => e.id === $selected_config?.id);
+    if (typeof config === "undefined") {
+      return;
+    }
+
+    if (config.public === value) {
+      return;
+    }
+
+    submitAnalytics({
+      eventName: "Cloud Action",
+      payload: {
+        click: "Set config visibility",
+      },
+    });
+    const cm = get(config_manager);
+    cm?.changeCloudVisibility(config, value);
+  }
 </script>
 
-<div id="main" class="flex flex-grow h-full relative z-0 overflow-hidden">
-  <div class="flex flex-col gap-2 h-full w-full">
-    <div class="px-4 pt-4">
-      {#if configurationSaveVisible}
-        <div class="pb-[7px]">
-          <ConfigurationSave
-            data={$selected_component_types}
-            on:close={handleConfigurationSaverCloseClicked}
-            on:save={handleConfigurationSaverSaveClicked}
-          />
-        </div>
-      {:else}
-        <div class="w-full grid grid-cols-1 gap-x-2 gap-y-2 items-center">
-          <div class="flex flex-row w-full gap-2">
-            <Filter />
-            <button
-              class="text-2xl px-8 dark:bg-primary-700 dark:hover:bg-secondary"
-              on:click={handleOpenconfigurationSave}
-            >
-              <span>+</span>
-            </button>
-          </div>
-          <div class="flex flex-grow">
-            <Sorter />
-          </div>
-        </div>
-        <MeltCheckbox
+<div
+  style="background-color: var(--background-muted);"
+  id="main"
+  class="flex flex-col h-full w-full gap-2 relative z-0 overflow-hidden"
+>
+  {#if configurationSaveVisible}
+    <ConfigurationSave
+      data={$selected_component_types}
+      on:close={handleConfigurationSaverCloseClicked}
+      on:save={handleConfigurationSaverSaveClicked}
+    />
+  {:else}
+    <BlockColumn>
+      <BlockRow>
+        <Filter />
+        <MoltenPushButton
+          click={() => {
+            handleOpenconfigurationSave();
+          }}
+          text={"+"}
+          style={"normal"}
+        />
+      </BlockRow>
+      <BlockRow
+        ><MeltCheckbox
           bind:target={$show_supported_only}
-          title="Only show supported"
+          title="Hide incompatible configs"
         />
-      {/if}
-    </div>
-
-    <div
-      class="overflow-hidden flex flex-col h-full relative"
-      class:opacity-75={configurationSaveVisible}
-    >
-      <Splitpanes
-        horizontal={true}
-        theme="modern-theme"
-        pushOtherPanes={false}
-        class="h-full w-full"
+        <MeltCheckbox
+          bind:target={$hide_community_configs}
+          title="Hide community configs"
+        /></BlockRow
       >
-        <Pane size={60}>
-          <div class="flex h-full w-full pb-3 px-4">
-            <ConfigTree {configs} />
-          </div></Pane
+    </BlockColumn>
+  {/if}
+
+  <Splitpanes
+    horizontal={true}
+    theme="modern-theme"
+    pushOtherPanes={false}
+    class="flex flex-1 min-h-0 w-full"
+  >
+    <Pane size={60}>
+      <div class="flex h-full w-full pb-3 px-4">
+        <ConfigTree {configs} />
+      </div></Pane
+    >
+    <Pane size={40}>
+      <div class="flex flex-col h-full w-full">
+        <ConfigCardDisplay
+          on:delete-config={handleDeleteConfig}
+          on:description-change={handleDescriptionChange}
+          on:name-change={handleNameChange}
+          on:path-change={handlePathChange}
+          on:overwrite-profile={handleOverwriteProfile}
+          data={$selected_config}
         >
-        <Pane size={40}>
-          <div class="grid grid-rows-[1fr_auto] h-full w-full">
-            <ConfigCardDisplay
-              on:delete-config={handleDeleteConfig}
-              on:description-change={handleDescriptionChange}
-              on:name-change={handleNameChange}
-              on:path-change={handlePathChange}
-              on:overwrite-profile={handleOverwriteProfile}
-              data={$selected_config}
-            >
-              <svelte:fragment slot="link-button">
-                {@const config = $selected_config}
-                {#if config?.syncStatus != "local"}
-                  <button
-                    class="relative group flex"
-                    on:click|stopPropagation={() => {
-                      if (typeof config === "undefined") {
-                        return;
-                      }
-                      createCloudConfigLink(config)
-                        .then((res) => {
-                          linkFlag = config.id;
-                          setTimeout(() => {
-                            linkFlag = undefined;
-                          }, 1750);
-                          provideSelectedConfigForEditor(undefined);
-                        })
-                        .catch((e) => {
-                          console.warn(e.data);
-                          parentIframeCommunication({
-                            windowPostMessageName: "sendLogMessage",
-                            dataForParent: {
-                              type: "fail",
-                              message: `Import link failed. ${e.data}`,
-                            },
-                          });
-                        });
-
-                      submitAnalytics({
-                        eventName: "Cloud Action",
-                        payload: {
-                          click: "Create config link",
-                        },
-                      });
-                    }}
-                    use:tooltip={{
-                      nowrap: true,
-                      placement: "bottom",
-                      duration: 75,
-                      instant: true,
-                      class: "px-2 py-1",
-                      text: "Link",
-                    }}
-                  >
-                    <SvgIcon class="w-4" iconPath="link" />
-                    {#if linkFlag == config?.id}
-                      <div
-                        transition:fade|global={{
-                          duration: 100,
-                        }}
-                        class="block font-medium absolute mt-7 top-0 right-0 text-white text-opacity-80 border border-white border-opacity-10 bg-emerald-700 rounded-lg px-2 py-0.5"
-                      >
-                        Copied to clipboard!
-                      </div>
-                    {/if}
-                  </button>
-                {/if}
-              </svelte:fragment>
-              <svelte:fragment slot="sync-config-button">
-                {@const config = configs.find(
-                  (e) => e.id === $selected_config?.id,
-                )}
-                {#if config?.syncStatus != "synced" || !config?.isEditable}
-                  <button
-                    on:click|stopPropagation={async () => {
-                      if (typeof config === "undefined") {
-                        return;
-                      }
-
-                      if (
-                        config.isEditable &&
-                        config.syncStatus === "local" &&
-                        !$userAccountService.account
-                      ) {
-                        loginToProfileCloud();
-                        return;
-                      }
-                      let configToSave = config;
-                      if (!configToSave.isEditable) {
-                        configToSave = {
-                          ...configToSave,
-                          name: `Copy of ${configToSave.name}`,
-                          owner: undefined,
-                          id: "",
-                        };
-                      }
-                      const cm = get(config_manager);
-                      cm?.saveConfig(configToSave, true);
-                      provideSelectedConfigForEditor(undefined);
-                      submitAnalytics({
-                        eventName: "Cloud Action",
-                        payload: {
-                          click: "Sync config",
-                        },
-                      });
-                    }}
-                    class="flex items-center group relative"
-                    use:tooltip={{
-                      nowrap: true,
-                      placement: "bottom",
-                      duration: 75,
-                      instant: true,
-                      class: "px-2 py-1",
-                      text: !config?.isEditable
-                        ? "Import"
-                        : config.syncStatus === "cloud"
-                          ? "Download"
-                          : "Upload",
-                    }}
-                  >
-                    <SvgIcon
-                      class={!config?.isEditable ? "w-4" : "w-5 -m-0.5"}
-                      iconPath={!config?.isEditable
-                        ? "import"
-                        : config.syncStatus === "cloud"
-                          ? "download_from_cloud"
-                          : "move_to_cloud_02"}
-                    />
-                  </button>
-                {/if}
-              </svelte:fragment>
-              <svelte:fragment slot="import-config-browser-button">
-                <DisplayOnWeb>
-                  {@const config = configs.find(
-                    (e) => e.id === $selected_config?.id,
-                  )}
-                  <button
-                    on:click={() => {
-                      const configLinkUrl =
-                        `${configuration.DEEPLINK_PROTOCOL_NAME}://?config-link=` +
-                        config?.id;
-                      window.open(configLinkUrl, "_self");
-                    }}
-                    class="rounded px-4 py-1 dark:bg-emerald-600 dark:hover:bg-emerald-700 font-medium"
-                  >
-                    Import {config?.id}
-                  </button>
-                </DisplayOnWeb>
-              </svelte:fragment>
-
-              <svelte:fragment slot="split-config-button">
-                {@const config = configs.find(
-                  (e) => e.id === $selected_config?.id,
-                )}
-                {#if config?.configType === "profile"}
-                  <button
-                    on:click|stopPropagation={async () => {
-                      splitConfig(config);
-                      submitAnalytics({
-                        eventName: "Cloud Action",
-                        payload: {
-                          click: "Split config",
-                        },
-                      });
-                    }}
-                    class="flex items-center group relative"
-                    use:tooltip={{
-                      nowrap: true,
-                      placement: "bottom",
-                      duration: 75,
-                      instant: true,
-                      class: "px-2 py-1",
-                      text: "Split",
+          <svelte:fragment slot="link-button">
+            {@const config = $selected_config}
+            {#if config?.syncStatus != "local"}
+              <button
+                class="relative group flex"
+                on:click|stopPropagation={() => {
+                  handleLink();
+                }}
+                use:tooltip={{
+                  instant: true,
+                  text: "Link",
+                }}
+              >
+                <SvgIcon iconPath="link" fill="var(--foreground-muted)" />
+                {#if linkFlag == config?.id}
+                  <div
+                    transition:fade|global={{
+                      duration: 100,
                     }}
+                    class="popup"
                   >
-                    <SvgIcon class="w-5 -m-0.5" iconPath="split_config" />
-                  </button>
+                    Copied to clipboard!
+                  </div>
                 {/if}
-              </svelte:fragment>
-              <span slot="toggle-accessibility">
-                {@const config = configs.find(
-                  (e) => e.id === $selected_config?.id,
-                )}
-                <ToggleSwitch
-                  checkbox={config?.public}
-                  on:toggle={(e) => {
-                    if (typeof config === "undefined") {
-                      return;
-                    }
-
-                    submitAnalytics({
-                      eventName: "Cloud Action",
-                      payload: {
-                        click: "Set config visibility",
-                      },
-                    });
-                    const cm = get(config_manager);
-                    cm?.changeCloudVisibility(config, e.detail);
+              </button>
+            {/if}
+          </svelte:fragment>
+          <svelte:fragment slot="sync-config-button">
+            {@const config = configs.find((e) => e.id === $selected_config?.id)}
+            {#if config?.syncStatus != "synced" || !config?.isEditable}
+              <button
+                on:click|stopPropagation={async () => {
+                  if (typeof config === "undefined") {
+                    return;
+                  }
+
+                  if (
+                    config.isEditable &&
+                    config.syncStatus === "local" &&
+                    !$userAccountService.account
+                  ) {
+                    loginToProfileCloud();
+                    return;
+                  }
+                  let configToSave = config;
+                  if (!configToSave.isEditable) {
+                    configToSave = {
+                      ...configToSave,
+                      name: `Copy of ${configToSave.name}`,
+                      owner: undefined,
+                      id: "",
+                    };
+                  }
+                  const cm = get(config_manager);
+                  cm?.saveConfig(configToSave, true);
+                  provideSelectedConfigForEditor(undefined);
+                  submitAnalytics({
+                    eventName: "Cloud Action",
+                    payload: {
+                      click: "Sync config",
+                    },
+                  });
+                }}
+                class="flex items-center group relative"
+                use:tooltip={{
+                  nowrap: true,
+                  placement: "bottom",
+                  duration: 75,
+                  instant: true,
+                  class: "px-2 py-1",
+                  text: !config?.isEditable
+                    ? "Import"
+                    : config.syncStatus === "cloud"
+                      ? "Download"
+                      : "Upload",
+                }}
+              >
+                <SvgIcon
+                  fill="var(--foreground-muted)"
+                  iconPath={!config?.isEditable
+                    ? "importIcon"
+                    : config.syncStatus === "cloud"
+                      ? "download"
+                      : "move_to_cloud_02"}
+                />
+              </button>
+            {/if}
+          </svelte:fragment>
+          <svelte:fragment slot="import-config-browser-button">
+            <DisplayOnWeb>
+              {@const config = configs.find(
+                (e) => e.id === $selected_config?.id,
+              )}
+              <button
+                on:click={() => {
+                  const configLinkUrl =
+                    `${configuration.DEEPLINK_PROTOCOL_NAME}://?config-link=` +
+                    config?.id;
+                  window.open(configLinkUrl, "_self");
+                }}
+                class="rounded px-4 py-1 dark:bg-emerald-600 dark:hover:bg-emerald-700 font-medium"
+              >
+                Import {config?.id}
+              </button>
+            </DisplayOnWeb>
+          </svelte:fragment>
+
+          <span slot="toggle-accessibility">
+            {@const config = configs.find((e) => e.id === $selected_config?.id)}
+            <div
+              style="display: flex;
+    align-items: center;
+    gap: 0.25rem;"
+            >
+              {#if config?.public}
+                <div
+                  use:tooltip={{
+                    instant: true,
+                    text: "Public",
                   }}
                 >
-                  <div
-                    class="relative group"
-                    slot="on"
-                    use:tooltip={{
-                      nowrap: true,
-                      placement: "bottom",
-                      duration: 75,
-                      instant: true,
-                      class: "px-2 py-1",
-                      text: "Public",
-                    }}
-                  >
-                    <SvgIcon display={true} iconPath={"public"} class="mr-1" />
-                  </div>
-                  <div
-                    class="relative group"
-                    slot="off"
-                    use:tooltip={{
-                      nowrap: true,
-                      placement: "bottom",
-                      duration: 75,
-                      instant: true,
-                      class: "px-2 py-1",
-                      text: "Private",
-                    }}
-                  >
-                    <SvgIcon
-                      display={true}
-                      iconPath={"private"}
-                      class="mr-1 text-opacity-70"
-                    />
-                  </div>
-                </ToggleSwitch>
-              </span>
-            </ConfigCardDisplay>
-
-            <div class="px-4 pb-4">
-              <UserLogin {usernameInput} />
+                  <SvgIcon
+                    fill="var(--foreground-muted)"
+                    iconPath={"publicIcon"}
+                  />
+                </div>
+              {:else}
+                <div
+                  use:tooltip={{
+                    instant: true,
+                    text: "Private",
+                  }}
+                >
+                  <SvgIcon
+                    fill="var(--foreground-muted)"
+                    iconPath={"privateIcon"}
+                  />
+                </div>
+              {/if}
+              <div
+                use:tooltip={{
+                  instant: true,
+                  text: "Change visibility",
+                }}
+              >
+                <Toggle bind:value={publicToggleValue} />
+              </div>
             </div>
-          </div>
-        </Pane>
-      </Splitpanes>
-      {#if configurationSaveVisible}
-        <div
-          class="pointer-events-auto absolute w-full h-full z-[2] bg-black bg-opacity-30"
-        />
-      {/if}
-    </div>
-  </div>
+          </span>
+        </ConfigCardDisplay>
+      </div>
+    </Pane>
+  </Splitpanes>
+  <UserLogin {usernameInput} />
 </div>
+
+<style>
+  div.popup {
+    display: block;
+    position: absolute;
+    margin-top: 1.75rem;
+    top: 0;
+    color: var(--foreground-muted);
+    background-color: var(--popover-background);
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+  }
+</style>
diff --git a/src/routes/EditorLayout.ts b/src/routes/EditorLayout.ts
index 89aba87..ab92b66 100644
--- a/src/routes/EditorLayout.ts
+++ b/src/routes/EditorLayout.ts
@@ -22,7 +22,7 @@ export function selectClosestMatch(
 }
 
 export const show_supported_only: Writable<boolean> = writable(false);
-
+export const hide_community_configs: Writable<boolean> = writable(true);
 export const config_manager: Writable<ConfigManager | undefined> =
   writable(undefined);
 
diff --git a/src/routes/Filter.svelte b/src/routes/Filter.svelte
index d5cb940..dbd2633 100644
--- a/src/routes/Filter.svelte
+++ b/src/routes/Filter.svelte
@@ -96,7 +96,7 @@
   }
 </script>
 
-<container class:hidden={!visible} class="w-full h-full">
+<container class:hidden={!visible}>
   <SearchBar
     bind:value={searchValue}
     suggestions={searchSuggestions}
@@ -104,3 +104,10 @@
     on:input={handleInput}
   />
 </container>
+
+<style>
+  container {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/src/routes/SearchBar.svelte b/src/routes/SearchBar.svelte
index 5a99bb1..819f7a2 100644
--- a/src/routes/SearchBar.svelte
+++ b/src/routes/SearchBar.svelte
@@ -71,10 +71,11 @@
   }
 </script>
 
-<div id="searchbar" class="flex flex-col w-full relative">
-  <div class="relative w-full">
+<div id="searchbar">
+  <div class="searchbar-inner">
+    <!-- Search Icon -->
     <svg
-      class="absolute left-3 bottom-[28%]"
+      class="search-icon"
       width="14"
       height="14"
       viewBox="0 0 18 18"
@@ -83,36 +84,34 @@
     >
       <path
         d="M13.2095 11.6374C14.2989 10.1509 14.7868 8.30791 14.5756
-                  6.47715C14.3645 4.64639 13.4699 2.96286 12.0708 1.76338C10.6717
-                  0.563893 8.87126 -0.0630888 7.02973 0.0078685C5.1882 0.0788258
-                  3.44137 0.84249 2.13872 2.14608C0.83606 3.44967 0.0736462 5.19704
-                  0.00400665 7.03862C-0.0656329 8.8802 0.562637 10.6802 1.76312
-                  12.0784C2.96361 13.4767 4.64778 14.3701 6.47869 14.5799C8.3096
-                  14.7897 10.1522 14.3005 11.6379 13.2101H11.6368C11.6705 13.2551
-                  11.7065 13.2979 11.747 13.3395L16.0783 17.6707C16.2892 17.8818
-                  16.5754 18.0005 16.8738 18.0006C17.1723 18.0007 17.4585 17.8822
-                  17.6696 17.6713C17.8807 17.4603 17.9994 17.1742 17.9995
-                  16.8758C17.9996 16.5773 17.8811 16.2911 17.6702 16.08L13.3389
-                  11.7487C13.2987 11.708 13.2554 11.6704 13.2095
-                  11.6362V11.6374ZM13.4998 7.31286C13.4998 8.12541 13.3397 8.93001
-                  13.0288 9.68071C12.7178 10.4314 12.2621 11.1135 11.6875
-                  11.6881C11.113 12.2626 10.4308 12.7184 9.68014 13.0294C8.92944
-                  13.3403 8.12484 13.5004 7.31229 13.5004C6.49974 13.5004 5.69514
-                  13.3403 4.94444 13.0294C4.19373 12.7184 3.51163 12.2626 2.93707
-                  11.6881C2.3625 11.1135 1.90674 10.4314 1.59578 9.68071C1.28483
-                  8.93001 1.12479 8.12541 1.12479 7.31286C1.12479 5.67183 1.77669
-                  4.09802 2.93707 2.93763C4.09745 1.77725 5.67126 1.12536 7.31229
-                  1.12536C8.95332 1.12536 10.5271 1.77725 11.6875 2.93763C12.8479
-                  4.09802 13.4998 5.67183 13.4998 7.31286V7.31286Z"
+                6.47715C14.3645 4.64639 13.4699 2.96286 12.0708 1.76338C10.6717
+                0.563893 8.87126 -0.0630888 7.02973 0.0078685C5.1882 0.0788258
+                3.44137 0.84249 2.13872 2.14608C0.83606 3.44967 0.0736462 5.19704
+                0.00400665 7.03862C-0.0656329 8.8802 0.562637 10.6802 1.76312
+                12.0784C2.96361 13.4767 4.64778 14.3701 6.47869 14.5799C8.3096
+                14.7897 10.1522 14.3005 11.6379 13.2101H11.6368C11.6705 13.2551
+                11.7065 13.2979 11.747 13.3395L16.0783 17.6707C16.2892 17.8818
+                16.5754 18.0005 16.8738 18.0006C17.1723 18.0007 17.4585 17.8822
+                17.6696 17.6713C17.8807 17.4603 17.9994 17.1742 17.9995
+                16.8758C17.9996 16.5773 17.8811 16.2911 17.6702 16.08L13.3389
+                11.7487C13.2987 11.708 13.2554 11.6704 13.2095
+                11.6362V11.6374ZM13.4998 7.31286C13.4998 8.12541 13.3397 8.93001
+                13.0288 9.68071C12.7178 10.4314 12.2621 11.1135 11.6875
+                11.6881C11.113 12.2626 10.4308 12.7184 9.68014 13.0294C8.92944
+                13.3403 8.12484 13.5004 7.31229 13.5004C6.49974 13.5004 5.69514
+                13.3403 4.94444 13.0294C4.19373 12.7184 3.51163 12.2626 2.93707
+                11.6881C2.3625 11.1135 1.90674 10.4314 1.59578 9.68071C1.28483
+                8.93001 1.12479 8.12541 1.12479 7.31286C1.12479 5.67183 1.77669
+                4.09802 2.93707 2.93763C4.09745 1.77725 5.67126 1.12536 7.31229
+                1.12536C8.95332 1.12536 10.5271 1.77725 11.6875 2.93763C12.8479
+                4.09802 13.4998 5.67183 13.4998 7.31286V7.31286Z"
         fill="#CDCDCD"
       />
     </svg>
 
+    <!-- Clear button -->
     {#if value != ""}
-      <button
-        class="absolute right-2 bottom-[25%]"
-        on:click={() => (value = "")}
-      >
+      <button class="clear-button" on:click={() => (value = "")}>
         <svg
           width="28"
           height="28"
@@ -129,6 +128,8 @@
         </svg>
       </button>
     {/if}
+
+    <!-- Input field -->
     <input
       type="text"
       bind:this={input}
@@ -136,21 +137,17 @@
       on:focus={handleSearchbarFocus}
       on:blur={handleSearchbarBlur}
       on:input={handleInput}
-      class="flex w-full py-2 px-12 bg-white dark:bg-primary-700
-  dark:placeholder-gray-400 text-md focus:outline-none"
       placeholder="Find..."
     />
   </div>
+
+  <!-- Suggestions -->
   {#if showSuggestions && displayedSuggestions.length > 0}
-    <div
-      bind:this={suggestionContainer}
-      class="absolute top-full left-0 dark:bg-primary dark:text-white bg-white text-black shadow shadow-black z-[1] p-2 rounded-b flex flex-col w-full max-h-36 overflow-y-auto"
-    >
+    <div bind:this={suggestionContainer} class="suggestionbox">
       {#each displayedSuggestions as suggestion}
         <button
           on:click={() => handleSuggestionClicked(suggestion)}
-          class="hover:bg-primary-500/50 text-xs dark:text-primary-100 text-left
-  py-0.5 px-1 h-min"
+          class="suggestionbutton"
         >
           {suggestion}
         </button>
@@ -158,3 +155,88 @@
     </div>
   {/if}
 </div>
+
+<style>
+  /* Container */
+  #searchbar {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+  }
+
+  .searchbar-inner {
+    position: relative;
+    width: 100%;
+  }
+
+  /* Search icon */
+  .search-icon {
+    position: absolute;
+    left: 0.75rem; /* equivalent to left-3 */
+    bottom: 28%;
+  }
+
+  /* Clear button */
+  .clear-button {
+    position: absolute;
+    right: 0.5rem; /* equivalent to right-2 */
+    bottom: 25%;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+  }
+
+  /* Input */
+  input {
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0.5rem 3rem; /* py-2 px-12 */
+    font-size: 1rem; /* text-md */
+    background-color: var(--background-soft);
+    color: var(--foreground);
+    border: none;
+    outline: none;
+  }
+
+  input::placeholder {
+    color: var(--foreground-soft);
+  }
+
+  /* Suggestions container */
+  .suggestionbox {
+    position: absolute;
+    padding: 0.25rem;
+    top: 100%;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    border: 1px solid var(--foreground-muted);
+    background-color: var(--popover-background);
+    border-radius: 0 0 0.25rem 0.25rem; /* rounded-b */
+  }
+
+  /* Suggestion buttons */
+  .suggestionbutton {
+    color: var(--foreground-muted);
+    padding: 1rem;
+    font-size: 0.75rem; /* text-xs */
+    text-align: left;
+    padding: 0.125rem 0.25rem; /* py-0.5 px-1 */
+    min-height: min-content;
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+
+  .suggestionbutton:hover {
+    color: var(--foreground);
+    background-color: var(--popover-selection);
+  }
+</style>
diff --git a/src/routes/Sorter.svelte b/src/routes/Sorter.svelte
index fcf1e5e..70a7d26 100644
--- a/src/routes/Sorter.svelte
+++ b/src/routes/Sorter.svelte
@@ -1,5 +1,12 @@
 <script lang="ts">
   import { Sort, sort_key } from "./Sorter";
+  import { MeltSelect } from "@intechstudio/grid-uikit";
+  import {
+    BlockRow,
+    BlockColumn,
+    Block,
+    BlockBody,
+  } from "@intechstudio/grid-uikit";
 
   function handleDirectionChange() {
     sort_key.update((store) => {
@@ -13,67 +20,70 @@
   }
 </script>
 
-<div class="flex flex-grow flex-row items-center gap-2">
-  <label
-    id="sort-label"
-    for="sorting select"
-    class="uppercase text-gray-500 py-1 min-w-fit text-xs"
-  >
-    sort by
-  </label>
-  <div class="flex flex-row gap-1 flex-grow flex-nowrap">
-    <select
-      class="bg-white dark:bg-secondary border-none flex-grow p-1 focus:outline-none min-w-fit"
-      id="sort-select-box"
-      name="sorting select"
-      bind:value={$sort_key.type}
-    >
-      {#each Object.values(Sort.Type) as type}
-        <option
-          class="bg-white dark:bg-secondary py-1 border-none"
-          value={type}
-        >
-          {type}
-        </option>
-      {/each}
-    </select>
+<BlockRow>
+  <MeltSelect
+    bind:target={$sort_key.type}
+    options={[
+      { title: Sort.Type.NAME, value: Sort.Type.NAME },
+      { title: Sort.Type.DATE, value: Sort.Type.DATE },
+      { title: Sort.Type.TYPE, value: Sort.Type.TYPE },
+    ]}
+    disabled={false}
+  />
 
-    <button id="sort-order-button" on:click={handleDirectionChange}>
-      {#if $sort_key.direction == Sort.Direction.DESC}
-        <svg
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M11 11H15M11 15H18M11 19H21M9 7L6 4L3 7M6 6V20"
-            class="stroke-black dark:stroke-white stroke-2"
-            stroke="white"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-      {:else}
-        <svg
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M11 5H21M11 9H18M11 13H15M3 17L6 20L9 17M6 18V4"
-            class="stroke-black dark:stroke-white stroke-2"
-            stroke="white"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-      {/if}
-    </button>
-  </div>
-</div>
+  <button id="sort-order-button" on:click={handleDirectionChange}>
+    {#if $sort_key.direction == Sort.Direction.DESC}
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11 11H15M11 15H18M11 19H21M9 7L6 4L3 7M6 6V20"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    {:else}
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11 5H21M11 9H18M11 13H15M3 17L6 20L9 17M6 18V4"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    {/if}
+  </button>
+</BlockRow>
+
+<style>
+  /* Button SVGs */
+  svg {
+    stroke: var(--foreground-muted);
+  }
+
+  /* Optional: style button */
+  #sort-order-button {
+    background: var(--background-soft);
+    border: 1px solid rgba(0, 0, 0, 0.4);
+    border-radius: 0.25rem;
+    cursor: pointer;
+    padding: 0;
+    width: 26px;
+    height: 26px;
+  }
+
+  #sort-order-button:hover {
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+</style>
diff --git a/src/routes/Sorter.ts b/src/routes/Sorter.ts
index c7138f6..c8572ae 100644
--- a/src/routes/Sorter.ts
+++ b/src/routes/Sorter.ts
@@ -19,8 +19,8 @@ export namespace Sort {
   };
 
   export const DefaultValue: Key = {
-    type: Type.DATE,
-    direction: Direction.DESC,
+    type: Type.NAME,
+    direction: Direction.ASC,
   };
 }
 
diff --git a/src/routes/UserLogin.svelte b/src/routes/UserLogin.svelte
index 0dbef3e..e77e458 100644
--- a/src/routes/UserLogin.svelte
+++ b/src/routes/UserLogin.svelte
@@ -4,10 +4,22 @@
   import { userAccountService } from "../lib/stores";
   import { doc, getDoc, writeBatch } from "firebase/firestore";
   import { userCollection, usernameCollection } from "../lib/collections";
-  import SvgIcon from "../lib/icons/SvgIcon.svelte";
   import { get } from "svelte/store";
   import { firestore } from "../lib/firebase";
   import { submitAnalytics } from "./analytics";
+  import {
+    Block,
+    BlockBody,
+    BlockColumn,
+    BlockRow,
+    BlockTitle,
+  } from "@intechstudio/grid-uikit";
+  import {
+    MoltenPushButton,
+    MoltenInput,
+    SvgIcon,
+  } from "@intechstudio/grid-uikit";
+
   import {
     getUserNameByUid,
     usernameSelectionFeedback,
@@ -19,6 +31,13 @@
 
   export let usernameInput: UserNameInput;
 
+  let nameFieldValue = "";
+
+  $: {
+    checkIfUsernameAvailable(nameFieldValue);
+    usernameInput.value = nameFieldValue;
+  }
+
   const userAccountSubscription = userAccountService.subscribe(
     async (userAccount) => {
       if (userAccount.account?.uid) {
@@ -84,136 +103,80 @@
   }
 </script>
 
-{#if $userAccountService.account}
-  <div
-    class="{!usernameInput.exists
-      ? 'pb-2'
-      : ''} flex items-center justify-between"
-  >
-    <div class="group w-full flex flex-col text-left py-4">
-      {#if usernameInput.exists == false}
-        <div class="pb-2">
-          Before using the cloud, enter a username which will be displayed with
-          your public profiles.
-        </div>
-      {:else}
-        <div>
-          Profile Cloud - {usernameInput.value ?? ""}
-        </div>
-      {/if}
-      <div class="flex items-center">
-        <input
-          id="display-name"
-          on:input={(event) => {
-            checkIfUsernameAvailable(event.target?.value);
-            usernameInput.value = event.target?.value;
-          }}
-          on:keydown={(event) => {
-            if (event.key == "Enter") {
-              usernameInput.active = false;
-              setUserName(usernameInput.value ?? "");
-              submitAnalytics({
-                eventName: "Cloud Action",
-                payload: {
-                  click: "Set user name",
-                },
-              });
-            }
-          }}
-          readonly={usernameInput.exists}
-          placeholder="Username"
-          class="{!usernameInput.exists
-            ? 'border-amber-500 focus:border-emerald-500 animate-pulse dark:bg-secondary focus:animate-none'
-            : 'border-transparent bg-transparent text-white text-opacity-80 hidden'}  w-full border focus:outline-none"
-          value={usernameInput.value ?? ""}
-        />
-        {#if usernameInput.exists == false}
-          <button
-            on:click={() => {
-              usernameInput.active = false;
-              setUserName(usernameInput.value ?? "");
-              submitAnalytics({
-                eventName: "Cloud Action",
-                payload: {
-                  click: "Change user name",
-                },
-              });
-            }}
-            class="mx-2 relative group"
-            use:tooltip={{
-              nowrap: true,
-              placement: "bottom",
-              duration: 75,
-              instant: true,
-              class: "px-2 py-1",
-              text: "Save",
-            }}
-          >
-            <SvgIcon iconPath={"save_as_02"} class="w-5" />
-          </button>
-        {/if}
-      </div>
-      {#if usernameInput.exists == false}
-        <div
-          class={usernameInput.valid ? "text-emerald-500" : "text-amber-500"}
-        >
-          {usernameSelectionFeedback(usernameInput)}
-        </div>
-      {/if}
-    </div>
-    {#if usernameInput.exists == true}
+{#if !$userAccountService.account}
+  <Block border="green">
+    <BlockRow>
+      <BlockBody>Login to save and browse your profiles</BlockBody>
+
+      <MoltenPushButton
+        text={"Login"}
+        style={"accept"}
+        click={() => {
+          loginToProfileCloud();
+          submitAnalytics({
+            eventName: "Cloud Action",
+            payload: {
+              click: "Login attempt",
+            },
+          });
+        }}
+      />
+    </BlockRow>
+  </Block>
+{:else if usernameInput.exists == false}
+  <BlockColumn border="orange">
+    <BlockBody>
+      Before using the cloud, enter a username which will be displayed with your
+      public profiles.
+    </BlockBody>
+    <BlockRow>
+      <MoltenInput bind:target={nameFieldValue} />
       <button
         on:click={() => {
-          logoutFromProfileCloud();
+          usernameInput.active = false;
+          setUserName(usernameInput.value ?? "");
           submitAnalytics({
             eventName: "Cloud Action",
             payload: {
-              click: "Logout attempt",
+              click: "Change user name",
             },
           });
         }}
-        class="ml-1 relative group rounded px-1 text-xs border dark:border-white dark:border-opacity-10 dark:hover:bg-neutral-700 font-medium"
         use:tooltip={{
-          nowrap: true,
-          placement: "bottom",
-          duration: 75,
           instant: true,
-          class: "px-2 py-1",
-          text: "Logout",
+          text: "Save",
         }}
       >
-        <SvgIcon iconPath={"log_out"} class="w-5" />
-        <div
-          class="group-hover:block font-medium hidden absolute mt-7 top-0 right-0 text-white text-opacity-80 border border-white border-opacity-10 bg-neutral-900 rounded-lg px-2 py-0.5"
-        >
-          Logout
-        </div>
+        <SvgIcon iconPath={"save_as_02"} fill="var(--foreground-muted)" />
       </button>
-    {/if}
-  </div>
-{:else}
-  <div class="pt-4">
-    <div
-      class="rounded-md border border-amber-500 p-2 bg-secondary/90 flex items-center justify-between"
-    >
-      <div class="text-white">Login to save and browse your profiles</div>
+    </BlockRow>
+    <div class={usernameInput.valid ? "text-emerald-500" : "text-amber-500"}>
+      {usernameSelectionFeedback(usernameInput)}
+    </div>
+  </BlockColumn>
+{:else}<Block>
+    <BlockRow
+      ><BlockBody>
+        Logged in as {usernameInput.value ?? ""}
+      </BlockBody>
       <button
         on:click={() => {
-          loginToProfileCloud();
+          logoutFromProfileCloud();
           submitAnalytics({
             eventName: "Cloud Action",
             payload: {
-              click: "Login attempt",
+              click: "Logout attempt",
             },
           });
         }}
-        class="rounded px-4 py-1 border dark:border-emerald-500 dark:hover:bg-emerald-700 font-medium"
+        use:tooltip={{
+          instant: true,
+          text: "Logout",
+        }}
       >
-        Login
+        <SvgIcon iconPath={"log_out"} fill="var(--foreground-muted)" />
       </button>
-    </div>
-  </div>
+    </BlockRow></Block
+  >
 {/if}
-<div class="flex w-full justify-center text-xs">
-  <VersionStamp />
-</div>
+<VersionStamp />
diff --git a/src/routes/VersionStamp.svelte b/src/routes/VersionStamp.svelte
index 72e2d68..7574a33 100644
--- a/src/routes/VersionStamp.svelte
+++ b/src/routes/VersionStamp.svelte
@@ -19,13 +19,38 @@
   }
 </script>
 
-<div class="flex flex-row flex-wrap gap-2">
-  <span class="text-opacity-40">
+<div class="commit-container">
+  <span>
     {import.meta.env.PUBLIC_APP_ENV} - {import.meta.env.PUBLIC_CREATION_DATE}
   </span>
-  <button
-    class="hover:text-opacity-75 text-opacity-40"
-    on:click={handleCommitHashClicked}
-    >({import.meta.env.PUBLIC_COMMIT_HASH})</button
-  >
+  <button class="commit-button" on:click={handleCommitHashClicked}>
+    ({import.meta.env.PUBLIC_COMMIT_HASH})
+  </button>
 </div>
+
+<style>
+  .commit-container {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.5rem; /* roughly Tailwind's gap-2 */
+    justify-content: center; /* centers horizontally */
+    align-items: center; /* centers vertically */
+    text-align: center; /* ensures inner text aligns */
+  }
+
+  .commit-button {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    font: inherit;
+    color: inherit;
+    transition: opacity 0.2s;
+  }
+
+  .commit-button:hover {
+    opacity: 0.75;
+  }
+</style>
diff --git a/transfer-configs-to-dev.js b/transfer-configs-to-dev.js
index b0cc4ab..0674e7c 100644
--- a/transfer-configs-to-dev.js
+++ b/transfer-configs-to-dev.js
@@ -58,6 +58,15 @@ async function transferConfigsToDev() {
       docSnapshot.data(),
     );
   });
+
+  // copy users from prod to dev
+  const prodUsers = collection(prodFirestore, "users");
+  const usersResult = await getDocs(prodUsers);
+  await Promise.all(
+    usersResult.docs.map((docSnapshot) =>
+      setDoc(doc(devFirestore, "users", docSnapshot.id), docSnapshot.data()),
+    ),
+  );
 }
 
 transferConfigsToDev();