diff --git a/packages/grid_client/src/primitives/nodes.ts b/packages/grid_client/src/primitives/nodes.ts
index 422e1faffb..b009903bcd 100644
--- a/packages/grid_client/src/primitives/nodes.ts
+++ b/packages/grid_client/src/primitives/nodes.ts
@@ -55,10 +55,12 @@ interface NodeInfo {
   publicConfig: PublicConfig;
   status: string;
   certificationType: string;
+  dedicated: boolean;
   hasGPU: boolean;
   extraFee: number;
   rentedByTwinId: number;
   rentContractId: number;
+  serialNumber?: string;
 }
 interface PublicConfig {
   domain: string;
diff --git a/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue b/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
index 527c1cf839..e4ff07ae46 100644
--- a/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
+++ b/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
@@ -1,73 +1,89 @@
 <template>
   <section>
-    <VFadeTransition>
-      <VAlert type="warning" class="mb-4 mt-1" v-if="filtersUpdated && validFilters">
-        Please press on <strong>Load Nodes</strong> button to list nodes matching your new requirements.
-      </VAlert>
-    </VFadeTransition>
-
-    <input-tooltip tooltip="Select a node ID to deploy on.">
-      <div class="d-flex w-100">
-        <VAutocomplete
-          ref="nodeInput"
-          label="Node"
-          placeholder="Select node"
-          :items="loadedNodes"
-          item-title="nodeId"
-          return-object
-          :model-value="nodeInputValidateTask.initialized ? $props.modelValue : undefined"
-          @update:model-value="bindModelValueAndValidate($event)"
+    <VBtn
+      variant="tonal"
+      color="secondary"
+      class="mb-4"
+      size="x-large"
+      block
+      @click="resetPageAndReloadNodes()"
+      :loading="pageCountTask.loading || nodesTask.loading"
+      :disabled="nodeInputValidateTask.loading || !validFilters"
+    >
+      Load Nodes
+    </VBtn>
+
+    <input-tooltip tooltip="Select a node ID to deploy on." align-center>
+      <div class="w-100" :style="{ position: 'relative' }">
+        <VProgressLinear
+          v-if="loadedNodes.length > 0 && (pageCountTask.loading || nodesTask.loading)"
+          indeterminate
+          :style="{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            zIndex: 9,
+            transform: 'none',
+            width: 'calc(100% - 16px)',
+          }"
+          height="2px"
+          color="primary"
+        />
+
+        <VCard
+          flat
+          class="mb-4 border"
           :disabled="!validFilters || filtersUpdated"
-          :loading="nodeInputValidateTask.loading"
-          required
-          :hint="
-            !validFilters
-              ? 'Please provide valid data.'
-              : nodeInputValidateTask.loading
-              ? `Checking if the disks will fit in the node's storage pools...`
-              : undefined
-          "
-          :persistent-hint="!validFilters || nodeInputValidateTask.loading"
-          clearable
-          @click:clear="
-            bindModelValueAndValidate();
-            ($refs.nodeInput as VInput)?.$el.querySelector('input').blur();
-            nodeInputValidateTask.reset();
-            touched = false;
-          "
-          :error="!!nodeInputValidateTask.error && !filtersUpdated"
-          :error-messages="!filtersUpdated ? nodeInputValidateTask.error || undefined : undefined"
-          @blur="
-            touched
-              ? undefined
-              : (() => {
-                  touched = true;
-                  !nodeInputValidateTask.initialized && nodeInputValidateTask.run($props.modelValue);
-                })()
-          "
-          :rules="[() => true]"
+          :style="{
+            opacity: !validFilters || filtersUpdated ? 0.5 : 1,
+            borderWidth: '2px !important',
+            borderColor: nodeInputValidateTask.error ? 'rgba(var(--v-theme-error), 0.4) !important' : undefined,
+          }"
         >
-          <template #item="{ item, props }">
-            <VListItem v-bind="props">
-              <template #title> {{ item.value.nodeId }} </template>
-              <template #append>
-                <VChip class="mr-2" v-if="item.value.certificationType.toLowerCase() === 'certified'" color="primary">
-                  Certified
-                </VChip>
-                <VChip :color="item.value.rentedByTwinId === 0 ? 'secondary' : 'success'">
-                  {{ item.value.rentedByTwinId === 0 ? "Shared" : "Dedicated" }}
-                </VChip>
-              </template>
-            </VListItem>
-          </template>
+          <VContainer v-if="loadedNodes.length === 0 && (pageCountTask.loading || nodesTask.loading)">
+            <VRow align="center" justify="center" class="pa-4">
+              <VProgressCircular color="primary" indeterminate class="mr-2" /> Loading Nodes...
+            </VRow>
+          </VContainer>
+
+          <VContainer v-if="loadedNodes.length === 0 && !(pageCountTask.loading || nodesTask.loading)">
+            <VAlert type="error" text="No Nodes were found!" />
+          </VContainer>
 
-          <template #append-item v-if="pagination.page !== -1">
-            <VContainer>
+          <div
+            ref="nodesContainer"
+            :style="{ maxHeight: '450px', paddingBottom: '100px', backgroundColor: 'rgb(var(--v-theme-background))' }"
+            class="overflow-auto px-4"
+            v-if="loadedNodes.length"
+          >
+            <template v-for="node in loadedNodes" :key="node.id">
+              <div class="my-4">
+                <TfNodeDetailsCard
+                  :node="node"
+                  :selected="!validFilters || filtersUpdated ? false : $props.modelValue === node"
+                  selectable
+                  @node:select="bindModelValueAndValidate"
+                  :status="
+                    $props.modelValue === node
+                      ? nodeInputValidateTask.loading
+                        ? 'Pending'
+                        : nodeInputValidateTask.data
+                        ? 'Valid'
+                        : 'Invalid'
+                      : 'Init'
+                  "
+                />
+              </div>
+              <!-- <div class="border-b" :style="{ borderBottomWidth: '2px !important' }" /> -->
+            </template>
+
+            <VContainer v-if="loadedNodes.length > 0 && pagination.page !== -1">
               <VBtn
                 @click="reloadNodes()"
                 block
                 color="secondary"
                 variant="tonal"
+                size="large"
                 :loading="nodesTask.loading"
                 prepend-icon="mdi-reload"
                 :disabled="nodeInputValidateTask.loading"
@@ -75,19 +91,37 @@
                 Load More Nodes
               </VBtn>
             </VContainer>
-          </template>
-        </VAutocomplete>
-
-        <VBtn
-          variant="outlined"
-          color="secondary"
-          class="mt-2 ml-2"
-          @click="resetPageAndReloadNodes()"
-          :loading="pageCountTask.loading || nodesTask.loading"
-          :disabled="nodeInputValidateTask.loading || !validFilters"
+          </div>
+        </VCard>
+
+        <VAlert
+          :type="!validFilters ? 'error' : 'warning'"
+          variant="elevated"
+          :style="{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', zIndex: 9 }"
+          v-if="!validFilters || (filtersUpdated && validFilters)"
         >
-          Load Nodes
-        </VBtn>
+          <span v-if="!validFilters" v-text="'Please provide valid data.'" />
+          <template v-else>
+            Please press on <strong>Load Nodes</strong> button to list nodes matching your new requirements.
+          </template>
+        </VAlert>
+
+        <VAlert
+          type="info"
+          variant="elevated"
+          :style="{ position: 'absolute', bottom: '31px', right: '31px', zIndex: 9 }"
+          v-else-if="nodeInputValidateTask.loading"
+          text="Checking if the deployment will fit in the node's disks..."
+        />
+
+        <VAlert
+          type="error"
+          variant="elevated"
+          v-if="!filtersUpdated && nodeInputValidateTask.error"
+          :style="{ position: 'absolute', bottom: '31px', right: '31px', zIndex: 9 }"
+          :text="nodeInputValidateTask.error"
+          closable
+        />
       </div>
     </input-tooltip>
   </section>
@@ -99,7 +133,7 @@ import equals from "lodash/fp/equals.js";
 import sample from "lodash/fp/sample.js";
 import { computed, nextTick, onMounted, onUnmounted, type PropType, ref } from "vue";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import type { VInput } from "vuetify/components/VInput";
+import type { VCard } from "vuetify/components/VCard";
 
 import { useAsync, usePagination, useWatchDeep } from "../../hooks";
 import { ValidatorStatus } from "../../hooks/form_validator";
@@ -112,9 +146,11 @@ import {
   normalizeNodeFilters,
   normalizeNodeOptions,
 } from "../../utils/nodeSelector";
+import TfNodeDetailsCard from "./TfNodeDetailsCard.vue";
 
 export default {
   name: "TfAutoNodeSelector",
+  components: { TfNodeDetailsCard },
   props: {
     modelValue: Object as PropType<NodeInfo>,
     validFilters: { type: Boolean, required: true },
@@ -213,7 +249,21 @@ export default {
         tries: 1,
         shouldRun: () => props.validFilters,
         onBeforeTask: () => bindStatus(ValidatorStatus.Pending),
-        onAfterTask: ({ data }) => bindStatus(data ? ValidatorStatus.Valid : ValidatorStatus.Invalid),
+        onAfterTask({ data }) {
+          bindStatus(data ? ValidatorStatus.Valid : ValidatorStatus.Invalid);
+          const container = nodesContainer.value as HTMLDivElement;
+          if (container) {
+            const card = container.querySelector(".selected-node") as HTMLDivElement;
+
+            if (card && container.getAttribute("data-scrolled") !== "scrolled") {
+              container.setAttribute("data-scrolled", "scrolled");
+              container.scroll({
+                behavior: "smooth",
+                top: card.offsetTop - 100,
+              });
+            }
+          }
+        },
         onReset: bindStatus,
       },
     );
@@ -238,6 +288,8 @@ export default {
       ctx.emit("update:status", status || ValidatorStatus.Init);
     }
 
+    const nodesContainer = ref<HTMLDivElement>();
+
     return {
       pageCountTask,
       nodesTask,
@@ -252,7 +304,15 @@ export default {
       touched,
       bindModelValueAndValidate,
       bindStatus,
+
+      nodesContainer,
     };
   },
 };
 </script>
+
+<style>
+.node-selector .v-select__selection {
+  width: 100%;
+}
+</style>
diff --git a/packages/playground/src/components/node_selector/TfManualNodeSelector.vue b/packages/playground/src/components/node_selector/TfManualNodeSelector.vue
index 4d4f79a46f..122b5277a7 100644
--- a/packages/playground/src/components/node_selector/TfManualNodeSelector.vue
+++ b/packages/playground/src/components/node_selector/TfManualNodeSelector.vue
@@ -1,34 +1,51 @@
 <template>
-  <input-tooltip tooltip="Node ID to deploy on.">
-    <VTextField
-      label="Node ID"
-      placeholder="Add your desired node id to validate"
-      class="w-100"
-      type="number"
-      v-model.number="nodeId"
-      :error="!!validationTask.error"
-      :error-messages="validationTask.error || undefined"
-      :disabled="!validFilters"
-      :persistent-hint="
-        (nodeId && !validationTask.initialized) ||
-        !validFilters ||
-        validationTask.loading ||
-        (validationTask.initialized && validationTask.data === true)
+  <div>
+    <TfNodeDetailsCard
+      v-show="modelValue || placeholderNode"
+      flat
+      :node="modelValue || placeholderNode"
+      :status="
+        validationTask.loading
+          ? 'Pending'
+          : validationTask.initialized
+          ? validationTask.error
+            ? 'Invalid'
+            : 'Valid'
+          : 'Init'
       "
-      :hint="
-        !validFilters
-          ? 'Please provide valid data.'
-          : nodeId && !validationTask.initialized
-          ? 'Preparing to validate node.'
-          : validationTask.loading
-          ? 'Validating node...'
-          : validationTask.data
-          ? `Node ${nodeId} is valid.`
-          : undefined
-      "
-      @blur="validationTask.initialized ? undefined : validationTask.run(nodeId)"
     />
-  </input-tooltip>
+
+    <input-tooltip tooltip="Node ID to deploy on." align-center>
+      <VTextField
+        label="Node ID"
+        placeholder="Add your desired node id to validate"
+        class="w-100 mt-4"
+        type="number"
+        v-model.number="nodeId"
+        :error="!!validationTask.error"
+        :error-messages="validationTask.error || undefined"
+        :disabled="!validFilters"
+        :persistent-hint="
+          (nodeId && !validationTask.initialized) ||
+          !validFilters ||
+          validationTask.loading ||
+          (validationTask.initialized && validationTask.data === true)
+        "
+        :hint="
+          !validFilters
+            ? 'Please provide valid data.'
+            : nodeId && !validationTask.initialized
+            ? 'Preparing to validate node.'
+            : validationTask.loading
+            ? 'Validating node...'
+            : validationTask.data
+            ? `Node ${nodeId} is valid.`
+            : undefined
+        "
+        @blur="validationTask.initialized ? undefined : validationTask.run(nodeId)"
+      />
+    </input-tooltip>
+  </div>
 </template>
 
 <script lang="ts">
@@ -43,12 +60,14 @@ import { useGrid } from "../../stores";
 import type { SelectionDetailsFilters } from "../../types/nodeSelector";
 import { normalizeError } from "../../utils/helpers";
 import { checkNodeCapacityPool, resolveAsync } from "../../utils/nodeSelector";
+import TfNodeDetailsCard from "./TfNodeDetailsCard.vue";
 
 const _defaultError =
   "Something went wrong while checking status of the node. Please check your connection and try again.";
 
 export default {
   name: "TfManualNodeSelector",
+  components: { TfNodeDetailsCard },
   props: {
     modelValue: Object as PropType<NodeInfo>,
     validFilters: { type: Boolean, required: true },
@@ -67,7 +86,12 @@ export default {
     const nodeId = ref<number>();
 
     // reset node to mark form as invalid
-    watch(nodeId, () => bindModelValue());
+    const placeholderNode = ref<NodeInfo>();
+
+    watch(nodeId, () => {
+      bindModelValue();
+      placeholderNode.value = undefined;
+    });
 
     const validationTask = useAsync<true | string, string, [id: number | undefined]>(
       async nodeId => {
@@ -88,6 +112,8 @@ export default {
           throw normalizeError(e0, _defaultError);
         }
 
+        placeholderNode.value = node;
+
         if (node === undefined || node === null) {
           throw `Node ${nodeId} is not on the grid`;
         }
@@ -108,6 +134,9 @@ export default {
           case props.filters.certified && node.certificationType.toLowerCase() !== "certified":
             throw `Node ${nodeId} is not Certified`;
 
+          case props.filters.dedicated && !node.dedicated:
+            throw `Node ${nodeId} is not dedicated`;
+
           case props.filters.dedicated && node.rentedByTwinId === 0:
             throw `Node ${nodeId} is not rented`;
 
@@ -150,6 +179,8 @@ export default {
         await checkNodeCapacityPool(gridStore, node, props.filters);
 
         bindModelValue(node);
+        placeholderNode.value = undefined;
+
         return true;
       },
       {
@@ -193,7 +224,7 @@ export default {
       ctx.emit("update:status", status || ValidatorStatus.Init);
     }
 
-    return { nodeId, validationTask };
+    return { nodeId, validationTask, placeholderNode };
   },
 };
 </script>
diff --git a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
new file mode 100644
index 0000000000..0f51cd46c3
--- /dev/null
+++ b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
@@ -0,0 +1,173 @@
+<template>
+  <VCard
+    class="rounded-0 w-100"
+    :class="{ 'selected-node': status !== 'Init' }"
+    :color="
+      status === 'Valid'
+        ? 'rgba(var(--v-theme-primary), 0.1)'
+        : status === 'Invalid'
+        ? 'rgba(var(--v-theme-error), 0.1)'
+        : status === 'Pending'
+        ? 'rgba(var(--v-theme-warning), 0.01)'
+        : undefined
+    "
+    :flat="flat"
+    v-bind="{
+      onClick: selectable
+        ? () => {
+            if (status === 'Init' && node) {
+              $emit('node:select', node);
+            }
+          }
+        : undefined,
+    }"
+  >
+    <template #loader>
+      <VProgressLinear indeterminate color="primary" height="2" v-if="status === 'Pending'" />
+    </template>
+
+    <template #prepend>
+      <VTooltip :text="node?.location.country" :disabled="!node">
+        <template #activator="{ props }">
+          <VAvatar size="40">
+            <img :src="flag" class="h-100" :alt="(node?.location.country ?? 'node') + '-flag'" v-bind="props" />
+          </VAvatar>
+        </template>
+      </VTooltip>
+    </template>
+
+    <template #title>
+      Node ID: {{ node?.nodeId }}
+      <VTooltip
+        text="Node Serial Number"
+        v-if="node && node.serialNumber && node.serialNumber.toLowerCase() !== 'default string'"
+      >
+        <template #activator="{ props }">
+          <VChip size="x-small" v-bind="props">
+            <span class="font-weight-bold" v-text="node.serialNumber" />
+          </VChip>
+        </template>
+      </VTooltip>
+    </template>
+
+    <template #subtitle>
+      <span v-text="'Farm ID: ' + (node?.farmId ?? '') + ' '" />
+      <VChip
+        :color="node?.inDedicatedFarm ? 'success' : 'secondary'"
+        size="x-small"
+        :text="(node?.inDedicatedFarm ? 'Dedicated' : 'Shared') + ' Farm'"
+        v-if="node"
+      />
+    </template>
+
+    <template #append>
+      <template v-if="node">
+        <VChip v-if="node?.hasGPU" color="secondary" text="Node Has GPU" />
+        <VChip class="mx-2" color="primary" :text="node?.certificationType" />
+        <VChip
+          :color="node?.rentedByTwinId === 0 ? 'secondary' : 'success'"
+          :text="(node?.rentedByTwinId === 0 ? 'Shared' : 'Dedicated') + ' Node'"
+        />
+      </template>
+    </template>
+
+    <template #text>
+      <VRow>
+        <VCol>
+          <InputTooltip tooltip="CPU can be greater than 100% due to overprovisioning." align-center>
+            <ResourceDetails
+              name="CPU"
+              :used="node?.used_resources.cru ?? 0"
+              :total="node?.total_resources.cru ?? 0"
+              :text="cruText"
+            />
+          </InputTooltip>
+        </VCol>
+        <VCol>
+          <ResourceDetails
+            name="Memory"
+            :used="node?.used_resources.mru ?? 0"
+            :total="node?.total_resources.mru ?? 0"
+            :text="mruText"
+          />
+        </VCol>
+      </VRow>
+
+      <VRow>
+        <VCol>
+          <ResourceDetails
+            name="SSD Disks"
+            :used="node?.used_resources.sru ?? 0"
+            :total="node?.total_resources.sru ?? 0"
+            :text="sruText"
+          />
+        </VCol>
+        <VCol>
+          <ResourceDetails
+            name="HDD Disks"
+            :used="node?.used_resources.hru ?? 0"
+            :total="node?.total_resources.hru ?? 0"
+            :text="hruText"
+          />
+        </VCol>
+      </VRow>
+    </template>
+  </VCard>
+</template>
+
+<script lang="ts">
+import type { NodeInfo } from "@threefold/grid_client";
+import { byCountry } from "country-code-lookup";
+import { computed, type PropType } from "vue";
+
+import formatResourceSize from "../../utils/format_resource_size";
+import ResourceDetails from "./node_details_internals/ResourceDetails.vue";
+
+export default {
+  name: "TfNodeDetailsCard",
+  components: { ResourceDetails },
+  props: {
+    node: Object as PropType<NodeInfo>,
+    status: String as PropType<"Init" | "Pending" | "Invalid" | "Valid">,
+    selectable: Boolean,
+    flat: Boolean,
+  },
+  emits: {
+    "node:select": (node: NodeInfo) => true || node,
+  },
+  setup(props) {
+    const flag = computed(() => {
+      const country = props.node?.location.country ?? "";
+      const code =
+        country === "Czechia" ? "CZ" : byCountry(country)?.internet || byCountry(country.toLowerCase())?.internet;
+      return code
+        ? `https://www.worldatlas.com/r/w425/img/flag/${code.toLowerCase()}-flag.jpg`
+        : `https://placehold.co/30x20?text=TF`;
+    });
+
+    function normalizeBytesResourse(name: "mru" | "sru" | "hru") {
+      return () => {
+        if (!props.node) {
+          return "";
+        }
+
+        const used = formatResourceSize(props.node.used_resources[name]);
+        const total = formatResourceSize(props.node.total_resources[name]);
+
+        if (total === "0") return "";
+
+        return `${used} / ${total}`;
+      };
+    }
+
+    const cruText = computed(() =>
+      props.node ? `${props.node.used_resources.cru} / ${props.node.total_resources.cru} (Cores)` : "",
+    );
+    const mruText = computed(normalizeBytesResourse("mru"));
+    const sruText = computed(normalizeBytesResourse("sru"));
+    const hruText = computed(normalizeBytesResourse("hru"));
+
+    return { flag, cruText, mruText, sruText, hruText };
+  },
+};
+</script>
diff --git a/packages/playground/src/components/node_selector/node_details_internals/ResourceDetails.vue b/packages/playground/src/components/node_selector/node_details_internals/ResourceDetails.vue
new file mode 100644
index 0000000000..b8d029e2fb
--- /dev/null
+++ b/packages/playground/src/components/node_selector/node_details_internals/ResourceDetails.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="w-100">
+    <VContainer>
+      <VRow>
+        <span v-text="name" class="text-caption font-weight-bold" />
+        <VSpacer />
+        <template v-if="text">
+          <span v-text="text" class="text-caption font-weight-bold text-info" />
+          <VSpacer />
+        </template>
+        <p class="font-weight-bold text-primary" v-text="total === 0 ? 'N/A' : usagePrecentage + ' %'" />
+      </VRow>
+    </VContainer>
+    <VProgressLinear :model-value="Math.min(100, usagePrecentage)" color="primary" />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed } from "vue";
+
+export default {
+  name: "ResourceDetails",
+  props: {
+    name: { type: String, required: true },
+    used: { type: Number, required: true },
+    total: { type: Number, required: true },
+    text: String,
+  },
+  setup(props) {
+    const usagePrecentage = computed(() => {
+      const x = (props.used / props.total) * 10000;
+      const q = +x.toFixed(0) / 100;
+      return isNaN(q) ? 0 : q;
+    });
+
+    return { usagePrecentage };
+  },
+};
+</script>