diff --git a/dashboard/pkg/epinio/components/application/AppConfiguration.vue b/dashboard/pkg/epinio/components/application/AppConfiguration.vue
new file mode 100644
index 00000000..e2f4b3b6
--- /dev/null
+++ b/dashboard/pkg/epinio/components/application/AppConfiguration.vue
@@ -0,0 +1,180 @@
+<script setup lang="ts">
+
+import Vue, { PropType } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import { useRoute } from 'vue-router';
+import { sortBy } from '@shell/utils/sort';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import { _VIEW } from '@shell/config/query-params';
+import { EpinioCompRecord, EpinioConfiguration, EpinioService, EPINIO_TYPES, EpinioAppBindings, EPINIO_APP_MANIFEST } from '../../types';
+import Application from '../../models/applications';
+
+
+interface Data {
+  values: {
+    configurations: string[],
+    services: string[],
+  }
+}
+
+interface Props {
+  initialApplication?: Application;
+  application: Application;
+  mode: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['change']);
+
+const store = useStore();
+const route = useRoute();
+
+const t = store.getters['i18n/t'];
+
+const values = ref({
+  configurations: [] as string[],
+  services: [] as EpinioService[],
+});
+
+const fetchData = async () => {
+  await Promise.all([
+    store.dispatch('epinio/findAll', { type: EPINIO_TYPES.CONFIGURATION }),
+    store.dispatch('epinio/findAll', { type: EPINIO_TYPES.SERVICE_INSTANCE }),
+  ]);
+};
+
+onMounted(fetchData);
+
+// Computed
+const namespacedServices = computed(() =>
+  (store.getters['epinio/all'](EPINIO_TYPES.SERVICE_INSTANCE) || [])
+    .filter((s: EpinioService) => s.metadata.namespace === props.application.metadata.namespace)
+);
+
+const namespacedConfigurations = computed(() =>
+  (store.getters['epinio/all'](EPINIO_TYPES.CONFIGURATION) || [])
+    .filter((s: EpinioConfiguration) => s.metadata.namespace === props.application.metadata.namespace)
+);
+
+const configurations = computed(() => {
+  const list = namespacedConfigurations.value
+    .filter((s: EpinioConfiguration) => !s.isServiceRelated)
+    .map((s: EpinioConfiguration) => ({
+      label: s.metadata.name,
+      value: s.metadata.name,
+    }));
+
+  return sortBy(list, 'label', false);
+});
+
+const services = computed(() => {
+  const list = namespacedServices.value.map((s: EpinioService) => ({
+    label: `${s.metadata.name} (${s.catalog_service})`,
+    value: s,
+  }));
+
+  return sortBy(list, 'label', false);
+});
+
+const noConfigs = computed(() => !configurations.value.length);
+const hasConfigs = computed(() => !!configurations.value.length);
+const noServices = computed(() => !services.value.length);
+const hasServices = computed(() => !!services.value.length);
+const isView = computed(() => props.mode === _VIEW);
+const isFromManifest = computed(() => route.query.from === EPINIO_APP_MANIFEST);
+
+// Watchers
+watch(values, () => emit('change', values.value), { deep: true });
+
+watch(noConfigs, (neu) => {
+  if (neu && values.value.configurations?.length) {
+    values.value.configurations = [];
+  }
+});
+
+watch(noServices, (neu) => {
+  if (neu && values.value.services?.length) {
+    values.value.services = [];
+  }
+});
+
+watch(hasConfigs, (neu, old) => {
+  if (!old && neu) {
+    if (props.initialApplication?.configuration?.configurations) {
+      values.value.configurations = props.initialApplication.baseConfigurationsNames?.filter(
+        (cc: string) => configurations.value.find((c: any) => c.value === cc)
+      ) || [];
+    }
+
+    if (isFromManifest.value) {
+      values.value.configurations = namespacedConfigurations.value
+        .filter((nc: any) =>
+          props.application.configuration.configurations.includes(nc.metadata.name) &&
+          !nc.isServiceRelated
+        )
+        .map((nc: any) => nc.metadata.name) || [];
+    }
+  }
+});
+
+watch(hasServices, (neu, old) => {
+  if (!old && neu) {
+    if (props.initialApplication?.serviceConfigurationsNames) {
+      values.value.services = props.initialApplication.services || [];
+    }
+  }
+
+  if (isFromManifest.value) {
+    const configurations = namespacedConfigurations.value
+      .filter((nc: any) =>
+        props.application.configuration.configurations.includes(nc.metadata.name) &&
+        nc.isServiceRelated
+      );
+
+    values.value.services = services.value
+      .filter((s: any) => configurations.some((d: any) => s.value.metadata.name === d.configuration.origin))
+      .map((elem: any) => elem.value);
+  }
+});
+</script>
+
+<template>
+  <div>
+    <div class="col span-6">
+      <LabeledSelect
+        v-model:value="values.configurations"
+        data-testid="epinio_app-configuration_configurations"
+        :loading="$fetchState.pending"
+        :disabled="$fetchState.pending || noConfigs || isView"
+        :options="configurations"
+        :searchable="true"
+        :mode="mode"
+        :multiple="true"
+        :label="t('typeLabel.configurations', { count: 2})"
+        :placeholder="noConfigs ? t('epinio.applications.steps.configurations.configurations.select.placeholderNoOptions') : t('epinio.applications.steps.configurations.configurations.select.placeholderWithOptions')"
+      />
+    </div>
+    <div class="spacer" />
+    <div class="col span-6">
+      <LabeledSelect
+        v-model:value="values.services"
+        data-testid="epinio_app-configuration_services"
+        :loading="$fetchState.pending"
+        :disabled="$fetchState.pending || noServices || isView"
+        :options="services"
+        :searchable="true"
+        :mode="mode"
+        :multiple="true"
+        :label="t('epinio.applications.steps.configurations.services.select.label')"
+        :placeholder="noServices ? t('epinio.applications.steps.configurations.services.select.placeholderNoOptions') : t('epinio.applications.steps.configurations.services.select.placeholderWithOptions')"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.labeled-select {
+  min-height: 79px;
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/pkg/epinio/components/application/AppGitDeployment.vue b/dashboard/pkg/epinio/components/application/AppGitDeployment.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/dashboard/pkg/epinio/components/application/AppInfo.vue b/dashboard/pkg/epinio/components/application/AppInfo.vue
new file mode 100644
index 00000000..afd7c29b
--- /dev/null
+++ b/dashboard/pkg/epinio/components/application/AppInfo.vue
@@ -0,0 +1,228 @@
+<script lang="ts" setup>
+import { ref, watch, computed, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import NameNsDescription from '@shell/components/form/NameNsDescription.vue';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import KeyValue from '@shell/components/form/KeyValue.vue';
+import ArrayList from '@shell/components/form/ArrayList.vue';
+import Loading from '@shell/components/Loading.vue';
+import Banner from '@components/Banner/Banner.vue';
+import ChartValues from '../settings/ChartValues.vue';
+import { _EDIT } from '@shell/config/query-params';
+
+import { sortBy } from '@shell/utils/sort';
+import { validateKubernetesName } from '@shell/utils/validators/kubernetes-name';
+import { EPINIO_TYPES, EpinioNamespace, EpinioAppInfo } from '../../types';
+import Application from '../../models/applications';
+import { objValuesToString } from '../../utils/settings';
+
+
+interface Data {
+  errors: string[],
+  values?: EpinioAppInfo
+}
+
+
+const store = useStore();
+
+const t = store.getters['i18n/t'];
+
+// Props
+const props = defineProps<{
+  application: Application;
+  mode: string;
+}>();
+
+// Emit function
+const emit = defineEmits<{
+  (event: 'valid', valid: boolean): void;
+  (event: 'change', data: any): void;
+}>();
+
+// Reactive state
+const errors = ref<string[]>([]);
+const values = ref<EpinioAppInfo | undefined>(undefined);
+const validSettings = ref<{ [key: string]: boolean }>({});
+
+
+// Computed properties
+const namespaces = computed(() => {
+  return sortBy(store.getters['epinio/all'](EPINIO_TYPES.NAMESPACE), 'name', false);
+});
+
+const namespaceNames = computed(() => namespaces.value.map((n: EpinioNamespace) => n.meta?.name));
+
+const valid = computed(() => {
+  if (!values.value) {
+    return false;
+  }
+  const validName = !!values.value.meta?.name;
+
+  const nsErrors = validateKubernetesName(values.value.meta?.namespace || '', '', store.getters, undefined, []);
+  const validNamespace = nsErrors.length === 0;
+  const validInstances = typeof values.value.configuration?.instances !== 'string' && values.value.configuration?.instances >= 0;
+
+  return validName && validNamespace && validInstances && Object.values(validSettings.value).every((v) => !!v);
+});
+
+const showApplicationVariables = computed(() => {
+  return Object.keys(values.value?.configuration?.settings || {}).length !== 0;
+});
+
+const isEdit = computed(() => props.mode === _EDIT);
+
+// Mounted lifecycle hook
+onMounted(() => {
+  console.log("props", props, namespaces.value);
+  const valuesData: EpinioAppInfo = {
+    meta: {
+      name: props.application.meta?.name,
+      namespace: props.application.meta?.namespace || namespaces.value[0]?.meta?.name
+    },
+    chart: moveBooleansToFront(props.application.chart?.settings) || {},
+    configuration: {
+      configurations: props.application.configuration?.configurations || [],
+      instances: props.application.configuration?.instances || 1,
+      environment: props.application.configuration?.environment || {},
+      settings: props.application.configuration?.settings || {},
+      routes: props.application.configuration?.routes || [],
+    },
+  };
+
+  values.value = valuesData;
+  validSettings.value = {};
+
+  console.log('values.value', values.value);
+
+  emit('valid', valid.value);
+
+  populateOnEdit();
+});
+
+// Methods
+const update = () => {
+  emit('change', {
+    meta: values.value?.meta,
+    configuration: {
+      ...values.value?.configuration,
+      settings: objValuesToString(values.value?.configuration.settings)
+    },
+  });
+};
+
+// Watchers
+watch(() => values.value?.configuration.instances, update);
+watch(() => values.value?.configuration.environment, update);
+watch(() => values.value?.configuration.settings, update, { deep: true });
+watch(() => values.value?.configuration.routes, update);
+watch(valid, (newValid) => {
+  emit('valid', newValid);
+});
+
+
+const populateOnEdit = async () => {
+  // We need to fetch the chart settings on edit mode.
+  if (isEdit.value || props.mode === 'view') {
+    const chartList = await store.dispatch('epinio/findAll', { type: EPINIO_TYPES.APP_CHARTS });
+
+    const filterChart = chartList?.find((chart: any) => chart.id === props.application.configuration.appchart);
+
+    if (filterChart?.settings) {
+      const customValues = Object.keys(filterChart?.settings).reduce((acc: any, key: any) => {
+        acc[key] = props.application.configuration.settings[key] || '';
+        return acc;
+      }, {});
+
+      values.value.configuration.settings = customValues;
+      values.value.chart = moveBooleansToFront(filterChart.settings);
+    }
+  }
+};
+
+// Allows us to move the checkbox at the top of the list so layout-wise looks better
+const moveBooleansToFront = (settingsObj: any) => {
+  if (!settingsObj) {
+    return;
+  }
+  const entries = Object.entries(settingsObj);
+
+  entries.sort((a: any, b: any) => {
+    const aValue = a[1].type === 'bool' ? 0 : 1;
+    const bValue = b[1].type === 'bool' ? 0 : 1;
+
+    return aValue - bValue;
+  });
+
+  return Object.fromEntries(entries);
+};
+</script>
+
+<template>
+  <Loading v-if="!values" />
+  <div v-else>
+    <div class="col">
+      <NameNsDescription
+        data-testid="epinio_app-info_name-ns"
+        name-key="name"
+        namespace-key="namespace"
+        :namespaces-override="namespaceNames"
+        :create-namespace-override="true"
+        :description-hidden="true"
+        :value="values.meta"
+        :mode="props.mode"
+        @change="update"
+        @createNamespace="ns => values.meta.namespace = ns"
+      />
+    </div>
+    <div class="col span-6">
+      <LabeledInput
+        v-model:value="values.configuration.instances"
+        data-testid="epinio_app-info_instances"
+        type="number"
+        min="0"
+        required
+        :mode="props.mode"
+        :label="t('epinio.applications.create.instances')"
+      />
+    </div>
+    <div class="spacer" />
+    <div class="col span-8">
+      <ArrayList
+        v-model:value="values.configuration.routes"
+        data-testid="epinio_app-info_routes"
+        :title="t('epinio.applications.create.routes.title')"
+        :protip="t('epinio.applications.create.routes.tooltip')"
+        :mode="props.mode"
+        :value-placeholder="t('epinio.applications.create.routes.placeholder')"
+      />
+    </div>
+    <div class="spacer" />
+    <div v-if="isEdit" class="col span-8">
+      <Banner color="info">
+        {{ t('epinio.applications.create.settingsVars.description') }}
+      </Banner>
+    </div>
+    <div v-if="showApplicationVariables" class="col span-6">
+      <ChartValues
+        v-model:value="values.configuration.settings"
+        :chart="values.chart"
+        :title="t('epinio.applications.create.settingsVars.title')"
+        :mode="props.mode"
+        @valid="validSettings = $event"
+      />
+      <div class="spacer" />
+    </div>
+    <div class="col span-8">
+      <KeyValue
+        v-model:value="values.configuration.environment"
+        data-testid="epinio_app-info_envs"
+        :mode="props.mode"
+        :title="t('epinio.applications.create.envvar.title')"
+        :key-label="t('epinio.applications.create.envvar.keyLabel')"
+        :value-label="t('epinio.applications.create.envvar.valueLabel')"
+        :parse-lines-from-file="true"
+      />
+      <div class="mb-20" /> <!-- allow a small amount of padding at bottom -->
+    </div>
+  </div>
+</template>
diff --git a/dashboard/pkg/epinio/components/application/AppProgress.vue b/dashboard/pkg/epinio/components/application/AppProgress.vue
new file mode 100644
index 00000000..3ce0e6b1
--- /dev/null
+++ b/dashboard/pkg/epinio/components/application/AppProgress.vue
@@ -0,0 +1,242 @@
+<script lang="ts" setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+
+import SortableTable from '@shell/components/SortableTable/index.vue';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import BadgeState from '@components/BadgeState/BadgeState.vue';
+
+import ApplicationAction, { APPLICATION_ACTION_TYPE } from '../../models/application-action';
+import { STATE, DESCRIPTION } from '@shell/config/table-headers';
+import {
+  EPINIO_TYPES, APPLICATION_ACTION_STATE, APPLICATION_SOURCE_TYPE, EpinioApplication, EpinioAppSource,
+  EpinioCompRecord, EpinioAppBindings
+} from '../../types';
+import type EpinioNamespace from '../../models/namespaces';
+
+const props = defineProps<{
+  application: EpinioApplication,
+  source: EpinioAppSource,
+  bindings?: EpinioAppBindings | null,
+  mode: string,
+  step: any
+}>();
+
+const emit = defineEmits(['finished']);
+
+const store = useStore();
+const router = useRouter();
+const route = useRoute();
+
+const running = ref(false);
+const actions = ref<ApplicationAction[]>([]);
+
+const actionHeaders = [
+  {
+    name:     'epinio-name',
+    labelKey: 'epinio.applications.steps.progress.table.stage.label',
+    value:    'name',
+    sort:     ['index'],
+    width:    150,
+  },
+  {
+    ...DESCRIPTION,
+    sort:  undefined,
+    value: 'description',
+    width: 450,
+  },
+  {
+    ...STATE,
+    sort:     undefined,
+    labelKey: 'epinio.applications.steps.progress.table.status',
+    width:    150,
+  },
+];
+
+const actionsToRun = computed(() => actions.value.filter(action => action.run));
+
+const namespaces = computed(() => store.getters['epinio/all'](EPINIO_TYPES.NAMESPACE));
+
+const fetchApp = async () => {
+  try {
+    await props.application.forceFetch();
+  } catch (err) {
+    // silent catch
+  }
+};
+
+const create = async () => {
+  running.value = true;
+  const enabledActions = [...actionsToRun.value];
+
+  for (const action of enabledActions) {
+    try {
+      await action.execute({ source: props.source });
+    } catch (err) {
+      running.value = false;
+      console.error(err);
+      await fetchApp();
+      return;
+    }
+  }
+
+  await fetchApp();
+  running.value = false;
+  emit('finished', true);
+};
+
+watch(running, (neu, prev) => {
+  if (prev && !neu) {
+    props.step.ready = true;
+  }
+});
+
+const createActions = async () => {
+  const REDEPLOY_SOURCE = router.currentRoute.value.hash === '#source';
+
+  const coreArgs = {
+    application: props.application,
+    bindings: props.bindings,
+    type: EPINIO_TYPES.APP_ACTION,
+  };
+
+  const nsMatch = namespaces.value.find((ns: EpinioNamespace) => ns.name === props.application.meta.namespace);
+  if (!nsMatch) {
+    actions.value.push(await store.dispatch('epinio/create', {
+      action: APPLICATION_ACTION_TYPE.CREATE_NS,
+      index: 0,
+      ...coreArgs
+    }));
+  }
+
+  if (!REDEPLOY_SOURCE) {
+    actions.value.push(await store.dispatch('epinio/create', {
+      action: APPLICATION_ACTION_TYPE.CREATE,
+      index: 1,
+      ...coreArgs
+    }));
+  } else {
+    actions.value.push(await store.dispatch('epinio/create', {
+      action: APPLICATION_ACTION_TYPE.UPDATE_SOURCE,
+      index: 2,
+      ...coreArgs
+    }));
+  }
+
+  if (props.bindings?.configurations?.length && !REDEPLOY_SOURCE) {
+    actions.value.push(await store.dispatch('epinio/create', {
+      action: APPLICATION_ACTION_TYPE.BIND_CONFIGURATIONS,
+      index: 3,
+      ...coreArgs
+    }));
+  }
+
+  if (props.bindings?.services?.length && !REDEPLOY_SOURCE) {
+    actions.value.push(await store.dispatch('epinio/create', {
+      action: APPLICATION_ACTION_TYPE.BIND_SERVICES,
+      index: 4,
+      ...coreArgs
+    }));
+  }
+
+  const srcType = props.source.type;
+
+  if ([APPLICATION_SOURCE_TYPE.ARCHIVE, APPLICATION_SOURCE_TYPE.FOLDER].includes(srcType)) {
+    actions.value.push(await store.dispatch('epinio/create', {
+      action: APPLICATION_ACTION_TYPE.UPLOAD,
+      index: 5,
+      ...coreArgs
+    }));
+  }
+
+  if ([APPLICATION_SOURCE_TYPE.GIT_URL, APPLICATION_SOURCE_TYPE.GIT_HUB, APPLICATION_SOURCE_TYPE.GIT_LAB].includes(srcType)) {
+    actions.value.push(await store.dispatch('epinio/create', {
+      action: APPLICATION_ACTION_TYPE.GIT_FETCH,
+      index: srcType === APPLICATION_SOURCE_TYPE.GIT_URL ? 5 : 6,
+      ...coreArgs
+    }));
+  }
+
+  if ([APPLICATION_SOURCE_TYPE.ARCHIVE, APPLICATION_SOURCE_TYPE.FOLDER, APPLICATION_SOURCE_TYPE.GIT_URL,
+       APPLICATION_SOURCE_TYPE.GIT_HUB, APPLICATION_SOURCE_TYPE.GIT_LAB].includes(srcType)) {
+    actions.value.push(await store.dispatch('epinio/create', {
+      action: APPLICATION_ACTION_TYPE.BUILD,
+      index: 7,
+      ...coreArgs
+    }));
+  }
+
+  actions.value.push(await store.dispatch('epinio/create', {
+    action: APPLICATION_ACTION_TYPE.DEPLOY,
+    index: 8,
+    ...coreArgs
+  }));
+
+  create();
+};
+
+onMounted(createActions);
+</script>
+
+<template>
+  <div
+    v-if="!$fetchState?.pending"
+    class="progress-container"
+  >
+    <div class="progress">
+      <SortableTable
+        :rows="actions"
+        :headers="actionHeaders"
+        :table-actions="false"
+        :row-actions="false"
+        default-sort-by="epinio-name"
+        :search="false"
+        key-field="key"
+      >
+        <template #cell:index="{ row }">
+          <Checkbox v-model="row.run" :disabled="true" />
+        </template>
+
+        <template #cell:state="{ row }">
+          <div class="status">
+            <i
+              v-if="row.state === APPLICATION_ACTION_STATE.RUNNING"
+              v-clean-tooltip="row.stateDisplay"
+              class="icon icon-lg icon-spinner icon-spin"
+            />
+            <BadgeState
+              v-else
+              :color="row.stateBackground"
+              :label="row.stateDisplay"
+              class="badge"
+            />
+          </div>
+        </template>
+      </SortableTable>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.progress-container {
+  display: flex;
+  justify-content: center;
+
+  .progress {
+    padding: 10px 0;
+
+    $statusHeight: 20px;
+
+    .status {
+      min-height: $statusHeight;
+      display: flex;
+      align-items: center;
+
+      .badge {
+        min-height: $statusHeight;
+      }
+    }
+  }
+}
+</style>
diff --git a/dashboard/pkg/epinio/components/application/AppSource.vue b/dashboard/pkg/epinio/components/application/AppSource.vue
new file mode 100644
index 00000000..728c244c
--- /dev/null
+++ b/dashboard/pkg/epinio/components/application/AppSource.vue
@@ -0,0 +1,522 @@
+<script setup lang="ts">
+
+import Vue, { PropType } from 'vue';
+import { ref, reactive, computed, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+import jsyaml from 'js-yaml';
+
+import Application from '../../models/applications';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import FileSelector from '@shell/components/form/FileSelector.vue';
+import GitPicker from '@shell/components/form/GitPicker.vue';
+import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
+import { sortBy } from '@shell/utils/sort';
+import { generateZip } from '@shell/utils/download';
+import Collapse from '@shell/components/Collapse.vue';
+import {
+  APPLICATION_SOURCE_TYPE, EpinioApplicationChartResource, EPINIO_TYPES, EpinioInfo, AppSourceArchive, AppSourceContainer, AppSourceGit, AppSourceGitUrl, AppSourceBuilderImage, EpinioAppSource, GitAPIData, EPINIO_APP_MANIFEST
+} from '../../types';
+import { EpinioAppInfo } from './AppInfo.vue';
+import { _EDIT } from '@shell/config/query-params';
+import { AppUtils } from '../../utils/application';
+
+const GIT_BASE_URL = {
+  [APPLICATION_SOURCE_TYPE.GIT_HUB]: 'https://github.com',
+  [APPLICATION_SOURCE_TYPE.GIT_LAB]: 'https://gitlab.com',
+};
+
+
+interface Data {
+  open: boolean,
+  archive: AppSourceArchive,
+  container: AppSourceContainer,
+  git: AppSourceGit,
+  gitUrl: AppSourceGitUrl,
+  builderImage: AppSourceBuilderImage,
+  types: any[],
+  type: APPLICATION_SOURCE_TYPE ;// || { } from the select component
+  APPLICATION_SOURCE_TYPE: typeof APPLICATION_SOURCE_TYPE
+}
+
+interface FileWithRelativePath extends File {
+  // For some reason TS throws this as missing at transpile time .. so recreate it
+   readonly webkitRelativePath: string;
+}
+
+const DEFAULT_BUILD_PACK = 'paketobuildpacks/builder:full';
+
+const store = useStore();
+const router = useRouter();
+
+const t = store.getters['i18n/t'];
+
+const props = defineProps<{
+  application: Application;
+  source?: EpinioAppSource;
+  info?: EpinioInfo;
+  mode: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'change', payload: any): void;
+  (e: 'changeAppInfo', info: EpinioAppInfo): void;
+  (e: 'changeAppConfig', configs: string[]): void;
+  (e: 'valid', valid: boolean): void;
+}>();
+
+// Defaults
+const defaultBuilderImage = ref(props.info?.default_builder_image || DEFAULT_BUILD_PACK);
+const builderImageValue = ref(props.source?.builderImage?.value || defaultBuilderImage.value);
+
+// Reactive State
+const open = ref(false);
+const gitSkipTypeReset = ref(false);
+const archive = reactive({
+  tarball: props.source?.archive?.tarball || '',
+  fileName: props.source?.archive?.fileName || '',
+});
+
+const container = reactive({
+  url: props.source?.container?.url || ''
+});
+
+const gitUrl = reactive({
+  url: props.source?.gitUrl?.url || '',
+  branch: props.source?.gitUrl?.branch || '',
+  validGitUrl: false,
+});
+
+const git = reactive({
+  usernameOrOrg: props.source?.git?.usernameOrOrg || '',
+  repo: props.source?.git?.repo || '',
+  commit: props.source?.git?.commit || '',
+  branch: props.source?.git?.branch || '',
+  url: props.source?.git?.url || '',
+  sourceData: props.source?.git?.sourceData || {
+    repos: [],
+    branches: [],
+    commits: []
+  }
+});
+
+const builderImage = reactive({
+  value: builderImageValue.value,
+  default: builderImageValue.value === defaultBuilderImage.value
+});
+
+const EDIT = _EDIT;
+
+const appChart = ref(props.source?.appChart);
+const type = ref(props.source?.type || APPLICATION_SOURCE_TYPE.FOLDER);
+
+// Derived and Computed
+const types = Object.values(APPLICATION_SOURCE_TYPE).map(value => ({
+  label: t(`epinio.applications.steps.source.${ value }.label`),
+  value
+}));
+
+const namespaces = computed(() => sortBy(store.getters['epinio/all']('namespace'), 'name', false));
+const appCharts = computed(() =>
+  sortBy(store.getters['epinio/all']('appCharts'), 'name', false).map((ap: EpinioApplicationChartResource) => ({
+    value: ap.meta.name,
+    label: `${ap.meta.name} (${ap.short_description})`
+  }))
+);
+
+const showBuilderImage = computed(() =>
+  [APPLICATION_SOURCE_TYPE.ARCHIVE, APPLICATION_SOURCE_TYPE.FOLDER, APPLICATION_SOURCE_TYPE.GIT_URL, APPLICATION_SOURCE_TYPE.GIT_HUB, APPLICATION_SOURCE_TYPE.GIT_LAB].includes(type.value)
+);
+
+const gitSource = computed(() => ({
+  type: type.value,
+  selectedAccOrOrg: git.usernameOrOrg,
+  selectedRepo: git.repo,
+  selectedBranch: git.branch,
+  selectedCommit: { sha: git.commit }
+}));
+
+const valid = ref(validate());
+
+watch(type, () => {
+  if (gitSkipTypeReset.value) {
+    gitSkipTypeReset.value = false;
+  } else {
+    Object.assign(git, {});
+  }
+  update();
+});
+
+watch(valid, (val) => {
+  emit('valid', val);
+});
+
+function validate() {
+  switch (type.value) {
+    case APPLICATION_SOURCE_TYPE.ARCHIVE:
+    case APPLICATION_SOURCE_TYPE.FOLDER:
+      return !!archive.tarball && !!builderImage.value;
+    case APPLICATION_SOURCE_TYPE.CONTAINER_URL:
+      return !!container.url;
+    case APPLICATION_SOURCE_TYPE.GIT_URL:
+      return !!gitUrl.url && !!gitUrl.branch && !!builderImage.value && !!gitUrl.validGitUrl;
+    case APPLICATION_SOURCE_TYPE.GIT_HUB:
+    case APPLICATION_SOURCE_TYPE.GIT_LAB:
+      return !!git.usernameOrOrg && !!git.url && !!git.repo && !!git.branch && !!git.commit;
+  }
+}
+
+function update() {
+  emit('change', {
+    type: type.value,
+    archive,
+    container,
+    gitUrl,
+    builderImage,
+    appChart: appChart.value,
+    git
+  });
+  valid.value = validate();
+}
+
+function updateAppInfo(info: EpinioAppInfo) {
+  emit('changeAppInfo', info);
+}
+
+function updateConfigurations(configs: string[]) {
+  emit('changeAppConfig', configs);
+}
+
+function onImageType(defaultImage: boolean) {
+  if (defaultImage) {
+    builderImage.value = defaultBuilderImage.value;
+  }
+  builderImage.default = defaultImage;
+  update();
+}
+
+function gitUpdate({ repo, selectedAccOrOrg, branch, commit, sourceData }: any) {
+  if (!!selectedAccOrOrg && !!repo && !!commit && !!branch) {
+    git.usernameOrOrg = selectedAccOrOrg;
+    git.url = `${GIT_BASE_URL[type.value]}/${selectedAccOrOrg}/${repo.name}`;
+    git.commit = commit;
+    git.branch = branch;
+    git.repo = repo;
+    git.sourceData = sourceData;
+    update();
+    emit('valid', true);
+  } else {
+    update();
+    emit('valid', false);
+  }
+}
+
+function urlRule() {
+  if (!gitUrl.url) return;
+
+  const gitRegex = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,})/gm;
+  const result = gitRegex.exec(gitUrl.url);
+
+  if (result && gitUrl.url === result[0]) {
+    gitUrl.validGitUrl = true;
+  } else {
+    gitUrl.validGitUrl = false;
+    return t('epinio.applications.steps.source.git_url.error.label');
+  }
+}
+
+function onFileSelected(file: File) {
+  archive.tarball = file;
+  archive.fileName = file.name;
+  update();
+}
+
+function onManifestFileSelected(file: string) {
+  try {
+    const parsed: any = jsyaml.load(file);
+    const manifestType = AppUtils.getManifestSourceType(parsed.origin);
+    gitSkipTypeReset.value = true;
+    type.value = manifestType;
+
+    switch (manifestType) {
+      case APPLICATION_SOURCE_TYPE.CONTAINER_URL:
+        container.url = parsed.origin.container;
+        break;
+      case APPLICATION_SOURCE_TYPE.GIT_URL:
+        gitUrl.url = parsed.origin.git.url;
+        gitUrl.branch = parsed.origin.git.revision;
+        break;
+      case APPLICATION_SOURCE_TYPE.GIT_HUB:
+      case APPLICATION_SOURCE_TYPE.GIT_LAB:
+        Object.assign(git, AppUtils.getGitData(parsed.origin.git));
+        break;
+    }
+
+    if (parsed.configuration) {
+      appChart.value = parsed.configuration.appchart;
+    }
+
+    const appInfo: EpinioAppInfo = {
+      meta: {
+        name: parsed.name || '',
+        namespace: namespaces.value?.[0]?.name || ''
+      },
+      configuration: {
+        configurations: parsed.configuration?.configurations || [],
+        instances: parsed.configuration.instances || 1,
+        environment: parsed.configuration.environment || {},
+        settings: parsed.configuration?.settings || {},
+        routes: parsed.configuration.routes || []
+      }
+    };
+
+    router.replace({ query: { from: EPINIO_APP_MANIFEST } });
+    update();
+    updateAppInfo(appInfo);
+    updateConfigurations(parsed.configuration.configurations || []);
+  } catch (e) {
+    console.error('Failed to parse manifest:', e);
+  }
+}
+
+function onFolderSelected(files: FileWithRelativePath | FileWithRelativePath[]) {
+  const safeFiles = Array.isArray(files) ? files : [files];
+  let folderName = '';
+
+  for (const f of safeFiles) {
+    const paths = f.webkitRelativePath.split('/');
+    if (paths.length > 1) {
+      if (!folderName) {
+        folderName = paths[0];
+      } else if (folderName !== paths[0]) {
+        folderName = '';
+        break;
+      }
+    }
+  }
+
+  const filesToZip = safeFiles.reduce((res, f) => {
+    let path = f.webkitRelativePath;
+    if (folderName) {
+      const parts = path.split('/');
+      parts.shift();
+      path = parts.join('/');
+    }
+    res[path] = f;
+    return res;
+  }, {} as { [key: string]: any });
+
+  generateZip(filesToZip).then((zip: any) => {
+    archive.tarball = zip;
+    archive.fileName = folderName || 'folder';
+    update();
+  });
+}
+
+onMounted(() => {
+  if (!appChart.value) {
+    appChart.value = appCharts.value[0]?.value || appCharts.value[0];
+  }
+  update();
+});
+
+</script>
+
+<template>
+  <div class="appSource">
+    <div class="button-row source">
+      <LabeledSelect
+        v-model:value="type"
+        data-testid="epinio_app-source_type"
+        label="Source Type"
+        :options="types"
+        :mode="mode"
+        :clearable="false"
+      />
+      <FileSelector
+        v-clean-tooltip="t('epinio.applications.steps.source.manifest.tooltip')"
+        data-testid="epinio_app-source_manifest"
+        class="role-tertiary add mt-5"
+        :label="t('epinio.applications.steps.source.manifest.button')"
+        :mode="mode"
+        :raw-data="false"
+        @selected="onManifestFileSelected"
+      />
+    </div>
+
+    <template v-if="type === APPLICATION_SOURCE_TYPE.ARCHIVE">
+      <div class="spacer source">
+        <h3>{{ t('epinio.applications.steps.source.archive.file.label') }}</h3>
+        <div class="button-row">
+          <LabeledInput
+            v-model:value="archive.fileName"
+            data-testid="epinio_app-source_archive_name"
+            :disabled="true"
+            :tooltip="t('epinio.applications.steps.source.archive.file.tooltip')"
+            :label="t('epinio.applications.steps.source.archive.file.inputLabel')"
+            :required="true"
+          />
+          <FileSelector
+            data-testid="epinio_app-source_archive_file"
+            class="role-tertiary add mt-5"
+            :label="t('epinio.applications.steps.source.archive.file.button')"
+            :mode="mode"
+            :raw-data="true"
+            :accept="'.zip, .tar, .gz, .bz2, .xz'"
+            @selected="onFileSelected"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template v-else-if="type === APPLICATION_SOURCE_TYPE.FOLDER">
+      <div class="spacer source">
+        <h3>{{ t('epinio.applications.steps.source.folder.file.label') }}</h3>
+        <div class="button-row">
+          <LabeledInput
+            v-model:value="archive.fileName"
+            data-testid="epinio_app-source_folder_name"
+            :disabled="true"
+            :tooltip="t('epinio.applications.steps.source.folder.file.tooltip')"
+            :label="t('epinio.applications.steps.source.folder.file.inputLabel')"
+            :required="true"
+          />
+          <FileSelector
+            data-testid="epinio_app-source_folder_file"
+            class="role-tertiary add mt-5"
+            :label="t('epinio.applications.steps.source.folder.file.button')"
+            :mode="mode"
+            :raw-data="true"
+            :directory="true"
+            @selected="onFolderSelected"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template v-else-if="type === APPLICATION_SOURCE_TYPE.CONTAINER_URL">
+      <div class="spacer source">
+        <h3>{{ t('epinio.applications.steps.source.container_url.url.label') }}</h3>
+        <LabeledInput
+          v-model:value="container.url"
+          data-testid="epinio_app-source_container"
+          :tooltip="t('epinio.applications.steps.source.container_url.url.tooltip')"
+          :label="t('epinio.applications.steps.source.container_url.url.inputLabel')"
+          :required="true"
+          @input="update"
+        />
+      </div>
+    </template>
+
+    <template v-else-if="type === APPLICATION_SOURCE_TYPE.GIT_URL">
+      <div class="spacer source">
+        <h3>{{ t('epinio.applications.steps.source.git_url.url.label') }}</h3>
+        <LabeledInput
+          v-model:value="gitUrl.url"
+          v-focus
+          data-testid="epinio_app-source_git-url"
+          :tooltip="t('epinio.applications.steps.source.git_url.url.tooltip')"
+          :label="t('epinio.applications.steps.source.git_url.url.inputLabel')"
+          :placeholder="'https://github.com/{user or org}/{repository}'"
+          :required="true"
+          :rules="[urlRule]"
+          @delay="100"
+          @input="update"
+        />
+      </div>
+      <div class="spacer source">
+        <h3>{{ t('epinio.applications.steps.source.git_url.branch.label') }}</h3>
+        <LabeledInput
+          v-model:value="gitUrl.branch"
+          data-testid="epinio_app-source_git-branch"
+          :tooltip="t('epinio.applications.steps.source.git_url.branch.tooltip')"
+          :label="t('epinio.applications.steps.source.git_url.branch.inputLabel')"
+          :required="true"
+          :disabled="!gitUrl.validGitUrl"
+          @input="update"
+        />
+      </div>
+    </template>
+
+    <template v-else>
+      <GitPicker
+        v-model:value="gitSource"
+        :type="type"
+        @change="gitUpdate"
+      />
+    </template>
+
+    <Collapse
+      v-model:value:open="open"
+      :title="'Advanced Settings'"
+      class="pt-30 pb-30 source"
+    >
+      <LabeledSelect
+        v-model:value="appChart"
+        data-testid="epinio_app-source_appchart"
+        :label="t('epinio.applications.steps.source.archive.appchart.label')"
+        :options="appCharts"
+        :mode="mode"
+        :clearable="false"
+        :required="true"
+        :tooltip="t('typeDescription.appcharts')"
+        :reduce="(e) => e.value"
+        :disabled="mode === EDIT"
+        @input="update"
+      />
+
+      <template v-if="showBuilderImage">
+        <RadioGroup
+          class="mt-20"
+          name="defaultBuilderImage"
+          data-testid="epinio_app-source_builder-select"
+          v-model:value="builderImage.default"
+          :labels="[
+            t('epinio.applications.steps.source.archive.builderimage.default'),
+            t('epinio.applications.steps.source.archive.builderimage.custom')
+          ]"
+          :options="[true, false]"
+          :label-key="'epinio.applications.steps.source.archive.builderimage.label'"
+          @input="onImageType"
+        />
+        <LabeledInput
+          v-model:value="builderImage.value"
+          data-testid="epinio_app-source_builder-value"
+          :disabled="builderImage.default"
+          :tooltip="t('epinio.applications.steps.source.archive.builderimage.tooltip')"
+          :mode="mode"
+          @input="update"
+        />
+      </template>
+    </Collapse>
+  </div>
+</template>
+
+
+<style lang="scss" scoped>
+.appSource {
+  // max-width: 920px;
+
+  .source {
+    max-width: 700px;
+  }
+
+  .button-row {
+    display: flex;
+    align-items: center;
+    .file-selector {
+      margin-top: 0 !important;
+      margin-left: 5px;
+    }
+  }
+
+  .collapse {
+    margin-left: -5px;
+  }
+}
+.archive {
+  display: flex;
+  flex-direction: column;
+}
+</style>
\ No newline at end of file
diff --git a/dashboard/pkg/epinio/components/settings/ChartValues.vue b/dashboard/pkg/epinio/components/settings/ChartValues.vue
new file mode 100644
index 00000000..bde15b1b
--- /dev/null
+++ b/dashboard/pkg/epinio/components/settings/ChartValues.vue
@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { useStore } from 'vuex';
+import formRulesGenerator from '@shell/utils/validators/formRules';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+
+interface Data {
+  valid: { [key: string]: boolean }
+}
+
+// Props
+const props = defineProps<{
+  chart: { [key: string]: object };
+  value: { [key: string]: any };
+  title: string;
+  mode: string;
+  disabled: boolean;
+}>();
+
+// Emit function
+const emit = defineEmits(['valid']);
+
+// Store
+const store = useStore();
+const t = store.getters['i18n/t'];
+
+// Reactive data
+const valid = ref<{ [key: string]: boolean }>({});
+
+// Watch for changes in `valid`
+watch(valid, (newValid) => {
+  emit('valid', newValid);
+});
+
+// Methods
+const rules = (key: string, min: any, max: any) => {
+  const frg = formRulesGenerator(store.getters['i18n/t'], { key });
+  const minRule = frg.minValue(min);
+  const maxRule = frg.maxValue(max);
+
+  return (value: string) => {
+    const messages = [];
+
+    if (value) {
+      const minRes = minRule(value);
+      if (minRes) messages.push(minRes);
+
+      const maxRes = maxRule(value);
+      if (maxRes) messages.push(maxRes);
+    }
+
+    valid.value[key] = !messages.length;
+    return messages.join(',');
+  };
+};
+
+const numericPlaceholder = (setting: any) => {
+  if (setting.maximum && setting.minimum) {
+    return `${setting.minimum} to ${setting.maximum}`;
+  } else if (setting.maximum) {
+    return `<= ${setting.maximum}`;
+  } else if (setting.minimum) {
+    return `>= ${setting.minimum}`;
+  } else {
+    return '';
+  }
+};
+
+const onInputCheckbox = (key: string, value: boolean) => {
+  props.value[key] = value ? 'true' : 'false';
+};
+</script>
+
+<template>
+  <div class="chart-values">
+    <h3>{{ props.title }}</h3>
+    <div v-for="(setting, key) in props.chart" :key="key" class="chart-values-item">
+      <LabeledInput
+        v-if="setting.type === 'number' || setting.type === 'integer'"
+        :id="key"
+        v-model:value="props.value[key]"
+        :label="key"
+        type="number"
+        :min="setting.minimum"
+        :max="setting.maximum"
+        :rules="[rules(key, setting.minimum, setting.maximum)]"
+        :tooltip="numericPlaceholder(setting)"
+        :mode="props.mode"
+        :disabled="props.disabled"
+      />
+      <Checkbox
+        v-else-if="setting.type === 'bool'"
+        :id="key"
+        :value="props.value[key] === 'true'"
+        :label="key"
+        :mode="props.mode"
+        :disabled="props.disabled"
+        @input="onInputCheckbox(key, $event)"
+      />
+      <LabeledSelect
+        v-else-if="setting.type === 'string' && setting.enum"
+        :id="key"
+        v-model:value="props.value[key]"
+        :label="key"
+        :options="setting.enum"
+        :mode="props.mode"
+        :disabled="props.disabled"
+      />
+      <LabeledInput
+        v-else-if="setting.type === 'string'"
+        :id="key"
+        v-model:value="props.value[key]"
+        :label="key"
+        :mode="props.mode"
+        :disabled="props.disabled"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.chart-values {
+  display: flex;
+  flex-direction: column;
+
+  &-item:not(:last-of-type) {
+    margin-bottom: 20px;
+  }
+}
+</style>
diff --git a/dashboard/pkg/epinio/models/application-action.js b/dashboard/pkg/epinio/models/application-action.js
new file mode 100644
index 00000000..427480e3
--- /dev/null
+++ b/dashboard/pkg/epinio/models/application-action.js
@@ -0,0 +1,172 @@
+import { APPLICATION_ACTION_STATE, APPLICATION_MANIFEST_SOURCE_TYPE, APPLICATION_SOURCE_TYPE, EPINIO_PRODUCT_NAME } from '../types';
+import { epinioExceptionToErrorsArray } from '../utils/errors';
+import Resource from '@shell/plugins/dashboard-store/resource-class';
+import { set } from '@shell/utils/object'; // Vue 3-compatible reactivity setter
+
+export const APPLICATION_ACTION_TYPE = {
+  CREATE_NS:           'create_namespace',
+  CREATE:              'create',
+  UPDATE_SOURCE:       'updateSource',
+  GIT_FETCH:           'gitFetch',
+  UPLOAD:              'upload',
+  BIND_CONFIGURATIONS: 'bind_configurations',
+  BIND_SERVICES:       'bind_services',
+  BUILD:               'build',
+  DEPLOY:              'deploy',
+};
+
+export default class ApplicationActionResource extends Resource {
+  run = true;
+  state = APPLICATION_ACTION_STATE.PENDING;
+
+  get name() {
+    return this.t(`epinio.applications.action.${ this.action }.label`);
+  }
+
+  get description() {
+    return this.t(`epinio.applications.action.${ this.action }.description`);
+  }
+
+  get stateObj() {
+    switch (this.state) {
+      case APPLICATION_ACTION_STATE.SUCCESS:
+        return { name: 'succeeded', error: false, transitioning: false };
+      case APPLICATION_ACTION_STATE.RUNNING:
+        return { name: 'pending', error: false, transitioning: true };
+      case APPLICATION_ACTION_STATE.FAIL:
+        return {
+          name: 'fail', error: true, transitioning: false, message: this.stateMessage
+        };
+      case APPLICATION_ACTION_STATE.PENDING:
+      default:
+        return { name: 'pending', error: false, transitioning: false };
+    }
+  }
+
+  async execute(params) {
+    try {
+      set(this, 'state', APPLICATION_ACTION_STATE.RUNNING);
+
+      await this.innerExecute(params);
+
+      set(this, 'state', APPLICATION_ACTION_STATE.SUCCESS);
+      set(this, 'run', false);
+    } catch (err) {
+      set(this, 'state', APPLICATION_ACTION_STATE.FAIL);
+      set(this, 'stateMessage', epinioExceptionToErrorsArray(err)[0].toString());
+      throw err;
+    }
+  }
+
+  async innerExecute(params) {
+    switch (this.action) {
+      case APPLICATION_ACTION_TYPE.CREATE_NS:           return this.createNamespace(params);
+      case APPLICATION_ACTION_TYPE.CREATE:              return this.create(params);
+      case APPLICATION_ACTION_TYPE.UPDATE_SOURCE:       return this.updateSource();
+      case APPLICATION_ACTION_TYPE.BIND_CONFIGURATIONS: return this.bindConfigurations(params);
+      case APPLICATION_ACTION_TYPE.BIND_SERVICES:       return this.bindServices(params);
+      case APPLICATION_ACTION_TYPE.GIT_FETCH:           return this.gitFetch(params);
+      case APPLICATION_ACTION_TYPE.UPLOAD:              return this.upload(params);
+      case APPLICATION_ACTION_TYPE.BUILD:               return this.build(params);
+      case APPLICATION_ACTION_TYPE.DEPLOY:              return this.deploy(params);
+    }
+  }
+
+  async createNamespace() {
+    const ns = await this.$dispatch(`${ EPINIO_PRODUCT_NAME }/createNamespace`, {
+      name: this.application.meta.namespace
+    }, { root: true });
+
+    await ns.create();
+  }
+
+  async create() {
+    await this.application.create();
+  }
+
+  async bindConfigurations() {
+    await this.application.updateConfigurations([], this.bindings.configurations);
+  }
+
+  async bindServices() {
+    await this.application.updateServices([], this.bindings.services);
+  }
+
+  async upload({ source }) {
+    await this.application.storeArchive(source.archive.tarball);
+  }
+
+  async gitFetch({ source }) {
+    const rev = source.git?.commit || source.gitUrl?.branch;
+    const url = source.git?.url || source.gitUrl?.url;
+
+    return await this.application.gitFetch(url, rev);
+  }
+
+  async build({ source }) {
+    const { stage } = await this.application.stage(
+      this.application.buildCache.store.blobUid,
+      source.builderImage.value
+    );
+
+    this.application.showStagingLog(stage.id);
+    await this.application.waitForStaging(stage.id);
+  }
+
+  async updateSource() {
+    await this.application.update({ restart: false });
+  }
+
+  async deploy({ source }) {
+    const stageId = source.type === APPLICATION_SOURCE_TYPE.ARCHIVE
+      ? this.application.buildCache.stage.stage.id
+      : null;
+
+    const image = source.type === APPLICATION_SOURCE_TYPE.CONTAINER_URL
+      ? source.container.url
+      : this.application.buildCache.stage.image;
+
+    await this.application.deploy(stageId, image, this.createDeployOrigin(source));
+    this.application.showAppLog();
+  }
+
+  createDeployOrigin(source) {
+    switch (source.type) {
+      case APPLICATION_SOURCE_TYPE.ARCHIVE:
+        return {
+          kind: APPLICATION_MANIFEST_SOURCE_TYPE.PATH,
+          archive: true,
+          path: source.archive.fileName,
+        };
+      case APPLICATION_SOURCE_TYPE.FOLDER:
+        return {
+          kind: APPLICATION_MANIFEST_SOURCE_TYPE.PATH,
+          path: source.archive.fileName,
+        };
+      case APPLICATION_SOURCE_TYPE.CONTAINER_URL:
+        return {
+          kind: APPLICATION_MANIFEST_SOURCE_TYPE.CONTAINER,
+          container: source.container.url,
+        };
+      case APPLICATION_SOURCE_TYPE.GIT_URL:
+        return {
+          kind: APPLICATION_MANIFEST_SOURCE_TYPE.GIT,
+          git: {
+            revision: source.gitUrl.branch,
+            repository: source.gitUrl.url,
+          },
+        };
+      case APPLICATION_SOURCE_TYPE.GIT_HUB:
+      case APPLICATION_SOURCE_TYPE.GIT_LAB:
+        return {
+          kind: APPLICATION_MANIFEST_SOURCE_TYPE.GIT,
+          git: {
+            revision: source.git.commit,
+            repository: source.git.url,
+            branch: source.git.branch?.name,
+            provider: source.type,
+          },
+        };
+    }
+  }
+}
diff --git a/dashboard/pkg/epinio/models/namespaces.js b/dashboard/pkg/epinio/models/namespaces.js
new file mode 100644
index 00000000..66f56ee3
--- /dev/null
+++ b/dashboard/pkg/epinio/models/namespaces.js
@@ -0,0 +1,85 @@
+import { EPINIO_TYPES } from '../types';
+import EpinioMetaResource from './epinio-namespaced-resource';
+
+export default class EpinioNamespace extends EpinioMetaResource {
+  get links() {
+    return {
+      self:   this.getUrl(),
+      remove: this.getUrl(),
+      create: this.getUrl(null),
+      update: this.getUrl(),
+    };
+  }
+
+  async create() {
+    await this.followLink('create', {
+      method:  'post',
+      headers: {
+        'content-type': 'application/json',
+        accept:         'application/json'
+      },
+      data: { name: this.meta.name }
+    });
+
+    const namespaces = await this.$dispatch('findAll', { type: this.type, opt: { force: true } });
+
+    // Find new namespace
+    return namespaces.filter((n) => n.name === this.name)?.[0];
+  }
+
+  save() {
+    return this.create();
+  }
+
+  get canClone() {
+    return false;
+  }
+
+  get canViewInApi() {
+    return false;
+  }
+
+  get canCustomEdit() {
+    return false;
+  }
+
+  get appCount() {
+    return this.apps?.length || 0;
+  }
+
+  get configCount() {
+    return this.configurations?.length || 0;
+  }
+
+  // ------------------------------------------------------------------
+
+  getUrl(name = this.meta.name) {
+    // Add baseUrl in a generic way
+    return this.$getters['urlFor'](this.type, this.id, { url: `/api/v1/namespaces/${ name || '' }` });
+  }
+
+  // ------------------------------------------------------------------
+
+  confirmRemove() {
+    return true;
+  }
+
+  async remove() {
+    const allTabs = this.$rootGetters['wm/allTabs'];
+
+    if (this.apps?.length && allTabs?.length) {
+      this.apps.forEach((e) => {
+        const app = this.$getters['byId'](EPINIO_TYPES.APP, `${ this.name }/${ e }`);
+
+        if (!!app && app.meta.namespace === this.name) {
+          app.closeWindows();
+        }
+      });
+    }
+    await super.remove();
+  }
+
+  get warnDeletionMessage() {
+    return this.t('epinio.namespace.deleteWarning');
+  }
+}
diff --git a/dashboard/pkg/epinio/pages/c/_cluster/applications/createapp/index.vue b/dashboard/pkg/epinio/pages/c/_cluster/applications/createapp/index.vue
new file mode 100644
index 00000000..df744b1f
--- /dev/null
+++ b/dashboard/pkg/epinio/pages/c/_cluster/applications/createapp/index.vue
@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { ref, reactive, onBeforeMount, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import Loading from '@shell/components/Loading.vue';
+import Wizard from '@shell/components/Wizard.vue';
+
+import AppInfo from '../../../../../components/application/AppInfo.vue';
+import AppSource from '../../../../../components/application/AppSource.vue';
+import AppConfiguration from '../../../../../components/application/AppConfiguration.vue';
+import AppProgress from '../../../../../components/application/AppProgress.vue';
+
+import { _CREATE } from '@shell/config/query-params';
+import { EpinioAppInfo, EpinioAppBindings, EpinioAppSource, EPINIO_TYPES } from '../../../../../types';
+import { createEpinioRoute } from '../../../../../utils/custom-routing';
+import { allHash } from '@shell/utils/promise';
+
+const router = useRouter();
+const store = useStore();
+
+const loading = ref(true);
+const value = ref<any>(null);
+const mode = ref(_CREATE);
+const errors = ref<string[]>([]);
+const source = ref<EpinioAppSource>();
+const bindings = ref<EpinioAppBindings>();
+const appChart = reactive({ chartsList: undefined as any, selectedChart: undefined });
+const epinioInfo = ref<any>(null);
+const originalModel = ref<any>(null);
+
+// i18n
+const t = computed(() => store.getters['i18n/t']);
+
+// Steps
+const steps = reactive([
+  {
+    name: 'source',
+    label: t.value('epinio.applications.steps.source.label'),
+    subtext: t.value('epinio.applications.steps.source.subtext'),
+    ready: false
+  },
+  {
+    name: 'basics',
+    label: t.value('epinio.applications.steps.basics.label'),
+    subtext: t.value('epinio.applications.steps.basics.subtext'),
+    ready: false
+  },
+  {
+    name: 'configurations',
+    label: t.value('epinio.applications.steps.configurations.label'),
+    subtext: t.value('epinio.applications.steps.configurations.subtext'),
+    ready: true,
+    nextButton: {
+      labelKey: 'epinio.applications.steps.configurations.next',
+      style: 'btn role-primary bg-warning'
+    }
+  },
+  {
+    name: 'progress',
+    label: t.value('epinio.applications.steps.progress.label'),
+    subtext: t.value('epinio.applications.steps.progress.subtext'),
+    ready: false,
+    previousButton: { disable: true }
+  }
+]);
+
+// Fetch data before mount
+onBeforeMount(async () => {
+  const hash = await allHash({
+    ns: store.dispatch('epinio/findAll', { type: EPINIO_TYPES.NAMESPACE }),
+    charts: store.dispatch('epinio/findAll', { type: EPINIO_TYPES.APP_CHARTS }),
+    info: store.dispatch('epinio/info'),
+  });
+
+  epinioInfo.value = hash.info;
+  appChart.chartsList = hash.charts;
+  originalModel.value = await store.dispatch('epinio/create', { type: EPINIO_TYPES.APP });
+  value.value = await store.dispatch('epinio/clone', { resource: originalModel.value });
+
+  loading.value = false;
+});
+
+// Methods
+function set(obj: Record<string, any>, changes: Record<string, any>) {
+  Object.entries(changes).forEach(([key, val]) => {
+    obj[key] = val;
+  });
+}
+
+function updateInfo(changes: EpinioAppInfo) {
+  value.value.meta ||= {};
+  value.value.configuration ||= {};
+  set(value.value.meta, changes.meta);
+  set(value.value.configuration, { settings: appChart.settings });
+  set(value.value.configuration, changes.configuration);
+}
+
+function updateSource(changes: EpinioAppSource) {
+  source.value = {};
+  const { appChart: chartId, ...cleanChanges } = changes;
+
+  appChart.selectedChart = chartId;
+  value.value.configuration ||= {};
+  value.value.configuration.settings = undefined;
+
+  if (chartId) {
+    set(value.value.configuration, { appchart: chartId });
+    const chart = appChart.chartsList?.find((c: any) => c.id === chartId);
+
+    if (chart?.settings) {
+      const customSettings = Object.keys(chart.settings).reduce((acc, key) => {
+        acc[key] = '';
+        return acc;
+      }, {} as Record<string, any>);
+
+      set(value.value.configuration, { settings: customSettings });
+      set(value.value, { chart });
+    }
+  }
+
+  set(source.value, cleanChanges);
+}
+
+function updateManifestConfigurations(configs: string[]) {
+  set(value.value.configuration, { configurations: configs });
+}
+
+function updateConfigurations(changes: EpinioAppBindings) {
+  bindings.value = {};
+  set(bindings.value, changes);
+  set(value.value.configuration, [...changes.configurations]);
+}
+
+function cancel() {
+  router.replace(value.value.listLocation);
+}
+
+function finish() {
+  const route = createEpinioRoute('c-cluster-resource-id', {
+    cluster: store.getters['clusterId'],
+    resource: value.value.type,
+    id: `${value.value.meta.namespace}/${value.value.meta.name}`
+  });
+
+  router.replace(route);
+}
+</script>
+
+<template>
+  <Loading v-if="loading" />
+  <div v-else class="application-wizard">
+    <Wizard
+      :steps="steps"
+      :banner-title="t('epinio.applications.create.title')"
+      :banner-title-subtext="t('epinio.applications.create.titleSubText')"
+      header-mode="create"
+      finish-mode="done"
+      :edit-first-step="true"
+      class="wizard"
+      @cancel="cancel"
+      @finish="finish"
+    >
+      <template #source>
+        <AppSource
+          :application="value"
+          :source="source"
+          :mode="mode"
+          :info="epinioInfo"
+          @change="updateSource"
+          @changeAppInfo="updateInfo"
+          @changeAppConfig="updateManifestConfigurations"
+          @valid="(val) => steps[0].ready = val"
+        />
+      </template>
+
+      <template #basics>
+        <AppInfo
+          :application="value"
+          :mode="mode"
+          @change="updateInfo"
+          @valid="(val) => steps[1].ready = val"
+        />
+      </template>
+
+      <template #configurations>
+        <AppConfiguration
+          :application="value"
+          :mode="mode"
+          @change="updateConfigurations"
+        />
+      </template>
+
+      <template #progress="{ step }">
+        <AppProgress
+          :application="value"
+          :source="source"
+          :bindings="bindings"
+          :mode="mode"
+          :step="step"
+        />
+      </template>
+    </Wizard>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.application-wizard {
+  padding-top: 10px;
+  height: 0;
+  position: relative;
+  overflow: hidden;
+
+  .wizard {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    overflow: auto;
+  }
+
+  :deep(.step-container__step) {
+    padding-bottom: 40px;
+  }
+}
+</style>
diff --git a/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue b/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue
new file mode 100644
index 00000000..61ce72e7
--- /dev/null
+++ b/dashboard/pkg/epinio/pages/c/_cluster/applications/index.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+
+import ResourceTable from '@shell/components/ResourceTable';
+import Loading from '@shell/components/Loading';
+import Masthead from '@shell/components/ResourceList/Masthead';
+import LinkDetail from '@shell/components/formatter/LinkDetail';
+
+import { EPINIO_TYPES } from '../../../../types';
+import { createEpinioRoute } from '../../../../utils/custom-routing';
+
+const store = useStore();
+const router = useRouter();
+
+const resource = EPINIO_TYPES.APP;
+const schema = ref(store.getters['epinio/schemaFor'](resource));
+
+const headers = computed(() => store.getters['type-map/headersFor'](schema.value));
+const groupBy = computed(() => store.getters['type-map/groupByFor'](schema.value));
+const createLocation = computed(() =>
+  createEpinioRoute('c-cluster-applications-createapp', { cluster: store.getters['clusterId'] })
+);
+
+const openCreateRoute = () => {
+  router.push(createLocation.value);
+};
+
+const rows = computed(() => store.getters['epinio/all'](resource));
+const hasNamespaces = computed(() => !!store.getters['epinio/all'](EPINIO_TYPES.NAMESPACE)?.length);
+
+const pending = ref(true);
+
+onMounted(async () => {
+  await store.dispatch('epinio/findAll', { type: EPINIO_TYPES.APP });
+  // Non-blocking fetch
+  store.dispatch('epinio/findAll', { type: EPINIO_TYPES.CONFIGURATION });
+  store.dispatch('epinio/findAll', { type: EPINIO_TYPES.SERVICE_INSTANCE });
+
+  pending.value = false;
+});
+</script>
+
+<template>
+  <Loading v-if="pending" />
+  <div v-else>
+    <Masthead
+      :schema="schema"
+      :resource="resource"
+    >
+      <template v-slot:createButton>
+        <button
+          class="btn role-primary"
+          @click="openCreateRoute"
+        >
+          {{ t('generic.create') }}
+        </button>
+      </template>
+    </Masthead>
+
+    <ResourceTable
+      :schema="schema"
+      :rows="rows"
+      :headers="headers"
+      :group-by="groupBy"
+    >
+      <template #cell:configurations="{ row }">
+        <span v-if="row.baseConfigurations.length">
+          <template
+            v-for="(configuration, index) in row.baseConfigurations"
+            :key="configuration.id"
+          >
+            <LinkDetail
+              :row="configuration"
+              :value="configuration.meta.name"
+            />
+            <span v-if="index !== row.baseConfigurations.length - 1">, </span>
+          </template>
+        </span>
+        <span v-else class="text-muted">&nbsp;</span>
+      </template>
+
+      <template #cell:services="{ row }">
+        <span v-if="row.services.length">
+          <template
+            v-for="(service, index) in row.services"
+            :key="service.id"
+          >
+            <LinkDetail
+              :row="service"
+              :value="service.meta.name"
+            />
+            <span v-if="index !== row.services.length - 1">, </span>
+          </template>
+        </span>
+        <span v-else class="text-muted">&nbsp;</span>
+      </template>
+
+      <template #cell:route="{ row }">
+        <span v-if="row.routes.length" class="route">
+          <template
+            v-for="(route, index) in row.routes"
+            :key="route.id || route"  <!-- fallback if no .id -->
+          >
+            <a
+              v-if="row.state === 'running'"
+              :href="`https://${route}`"
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+            >
+              {{ `https://${route}` }}
+            </a>
+            <span v-else>
+              {{ `https://${route}` }}
+            </span>
+            <span v-if="index !== row.routes.length - 1">, </span>
+          </template>
+        </span>
+        <span v-else class="text-muted">&nbsp;</span>
+      </template>
+    </ResourceTable>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.route {
+  word-break: break-word;
+}
+</style>
diff --git a/dashboard/pkg/epinio/routing/epinio-routing.ts b/dashboard/pkg/epinio/routing/epinio-routing.ts
index 0d8af902..d97dc1bf 100644
--- a/dashboard/pkg/epinio/routing/epinio-routing.ts
+++ b/dashboard/pkg/epinio/routing/epinio-routing.ts
@@ -1,6 +1,8 @@
 // Don't forget to create a VueJS page called index.vue in the /pages folder!!!
 import ListEpinio from "../pages/index.vue";
 import Dashboard from "../pages/c/_cluster/dashboard.vue";
+import ListApp from "../pages/c/_cluster/applications/index.vue";
+import CreateApp from "../pages/c/_cluster/applications/createapp/index.vue";
 import AboutEpinio from "../pages/c/_cluster/about.vue";
 // import { BLANK_CLUSTER } from '../config/epinio';
 import { EPINIO_PRODUCT_NAME } from '../types';
@@ -42,13 +44,13 @@ const routes = [
   {
     name: `${EPINIO_PRODUCT_NAME}-c-cluster-applications-createapp`,
     path: `/:product/c/:cluster/applications/createapp`,
-    component: ListEpinio, //CreateApp,
+    component: CreateApp,
     meta,
   },
   {
     name: `${EPINIO_PRODUCT_NAME}-c-cluster-applications`,
     path: `/:product/c/:cluster/applications`,
-    component: ListEpinio, //ListApp
+    component: ListApp,
     meta: {
       product: EPINIO_PRODUCT_NAME,
       pkg: EPINIO_PRODUCT_NAME,
diff --git a/dashboard/pkg/epinio/types.ts b/dashboard/pkg/epinio/types.ts
index 106df287..ca623b8c 100644
--- a/dashboard/pkg/epinio/types.ts
+++ b/dashboard/pkg/epinio/types.ts
@@ -239,3 +239,26 @@ export interface EpinioNamespace extends EpinioMetaProperty {
 }
 
 export type EpinioCompRecord = Record<string, any>
+
+export interface EpinioAppInfo {
+  meta: {
+    name: string,
+    namespace: string
+  },
+  chart?: {},
+  configuration: {
+    configurations: string[],
+    instances: number,
+    environment: { [key: string] : any }
+    settings: { [key: string] : any }
+    routes: string[]
+  }
+}
+
+export const EPINIO_APP_MANIFEST = 'manifest';
+
+export interface EpinioAppBindings {
+  configurations: string[],
+  services: EpinioService[],
+}
+
diff --git a/dashboard/pkg/epinio/utils/settings.ts b/dashboard/pkg/epinio/utils/settings.ts
new file mode 100644
index 00000000..73d01cc5
--- /dev/null
+++ b/dashboard/pkg/epinio/utils/settings.ts
@@ -0,0 +1,11 @@
+export function objValuesToString(obj: any) {
+  const copy = { ...obj };
+
+  for (const key in copy) {
+    if (typeof copy[key] !== 'string') {
+      copy[key] = String(copy[key]);
+    }
+  }
+
+  return copy;
+}