diff --git a/src/components/configurationForm.vue b/src/components/configurationForm.vue
index 7e23dce..a42d8b0 100644
--- a/src/components/configurationForm.vue
+++ b/src/components/configurationForm.vue
@@ -23,7 +23,6 @@ import {
 } from '../utils/constants/configuration'
 import { validationSchema as schema } from '../utils/validation'
 import { useRoute, useRouter } from 'vue-router'
-import { calculateSettings } from '../utils/calculator'
 
 const route = useRoute()
 const router = useRouter()
@@ -125,7 +124,6 @@ const state = reactive({
 
 const onSubmit = async () => {
   await router.push({ name: 'Index', query: { ...state } })
-  console.log(calculateSettings({ ...state }))
 }
 </script>
 
diff --git a/src/components/configurationFormView.vue b/src/components/configurationFormView.vue
new file mode 100644
index 0000000..5ca501f
--- /dev/null
+++ b/src/components/configurationFormView.vue
@@ -0,0 +1,132 @@
+<script setup>
+import { useRoute } from 'vue-router'
+import { computed, ref } from 'vue'
+import { calculateSettings } from '../utils/calculator'
+import { useClipboard } from '@vueuse/core'
+
+const KB_UNIT_MAP = {
+  KB_PER_MB: 1024,
+  KB_PER_GB: 1048576,
+}
+
+const route = useRoute()
+
+const tab = ref('0')
+const tabs = ref([
+  {
+    label: 'postgresql.conf',
+  },
+  {
+    label: 'ALTER SYSTEM',
+  },
+])
+
+const isAlterSystem = computed(() => tab.value === '1')
+const query = computed(() => route.query)
+const res = computed(() => calculateSettings({ ...query.value }))
+const config = computed(() => {
+  const hwConfig = [
+    ['DB Version', res.value.dbVersion],
+    ['OS Type', res.value.osType],
+    ['DB Type', res.value.dbType],
+    [
+      'Total Memory (RAM)',
+      `${res.value.totalMemory} ${res.value.totalMemoryUnit}`,
+    ],
+    ['CPUs num', res.value.cpuNum],
+    ['Connections num', res.value.connectionNum],
+    ['Data Storage', res.value.hdType],
+  ]
+    .filter((item) => !!item[1])
+    .map((item) => `${isAlterSystem.value ? '--' : '#'} ${item[0]}: ${item[1]}`)
+    .join('\n')
+
+  const pgConfig = [
+    ['max_connections', res.value.maxConnections],
+    ['shared_buffers', formatValue(res.value.sharedBuffers)],
+    ['effective_cache_size', formatValue(res.value.effectiveCacheSize)],
+    ['maintenance_work_mem', formatValue(res.value.maintenanceWorkMem)],
+    ['checkpoint_completion_target', res.value.checkpointCompletionTarget],
+    ['wal_buffers', formatValue(res.value.walBuffers)],
+    ['default_statistics_target', res.value.defaultStatisticsTarget],
+    ['random_page_cost', res.value.randomPageCost],
+    ['effective_io_concurrency', res.value.effectiveIoConcurrency],
+    ['work_mem', formatValue(res.value.workMem)],
+    ['huge_pages', res.value.hugePages],
+    ['jit', res.value.jit],
+    ['wal_compression', res.value.walCompression],
+    ['autovacuum_max_workers', res.value.autovacuumMaxWorkers],
+    [
+      'autovacuum_work_mem',
+      res.value.autovacuumWorkMem
+        ? formatValue(res.value.autovacuumWorkMem)
+        : null,
+    ],
+    ['io_method', res.value.ioMethod],
+    ['io_workers', res.value.ioWorkers],
+  ]
+    .concat(
+      res.value.checkpointSegments.map((item) => {
+        if (item.key === 'checkpoint_segments') {
+          return [item.key, item.value]
+        }
+        return [item.key, formatValue(item.value)]
+      }),
+    )
+    .concat(res.value.parallelSettings.map((item) => [item.key, item.value]))
+    .concat(res.value.walLevel.map((item) => [item.key, item.value]))
+    .filter((item) => !!item[1])
+    .map((item) =>
+      isAlterSystem.value
+        ? `ALTER SYSTEM SET ${item[0]} = '${item[1]}';`
+        : `${item[0]} = ${item[1]}`,
+    )
+    .join('\n')
+
+  const warningInfo = res.value.warningInfoMessages
+    .map((item) => `${isAlterSystem.value ? '--' : '#'} ${item}`)
+    .join('\n')
+
+  let config = [hwConfig, '', pgConfig]
+
+  if (res.value.warningInfoMessages.length > 0) {
+    config = [warningInfo, '', ...config]
+  }
+
+  return config.join('\n')
+})
+
+const { copy } = useClipboard({ source: config })
+
+const formatValue = (value) => {
+  const result = (() => {
+    if (value % KB_UNIT_MAP['KB_PER_GB'] === 0) {
+      return {
+        value: Math.floor(value / KB_UNIT_MAP['KB_PER_GB']),
+        unit: 'GB',
+      }
+    }
+    if (value % KB_UNIT_MAP['KB_PER_MB'] === 0) {
+      return {
+        value: Math.floor(value / KB_UNIT_MAP['KB_PER_MB']),
+        unit: 'MB',
+      }
+    }
+    return {
+      value,
+      unit: 'kB',
+    }
+  })()
+
+  // return formatted
+  return `${result.value}${result.unit}`
+}
+</script>
+
+<template>
+  <section class="space-y-4">
+    <UTabs v-model="tab" :content="false" :items="tabs" class="w-full" />
+    <pre>{{ config }}</pre>
+    <UButton label="Copy config" block @click="copy(config)" />
+  </section>
+</template>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index ea03bca..f061bb3 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,6 +1,28 @@
 <script setup>
+import { computed, defineAsyncComponent } from 'vue'
 import ConfigurationForm from '../components/configurationForm.vue'
-import DefaultDescription from '../components/defaultDescription.vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const shouldShowResultView = computed(
+  () =>
+    Object.hasOwn(route.query, 'dbVersion') &&
+    Object.hasOwn(route.query, 'osType') &&
+    Object.hasOwn(route.query, 'dbType') &&
+    Object.hasOwn(route.query, 'totalMemory') &&
+    Object.hasOwn(route.query, 'totalMemoryUnit') &&
+    Object.hasOwn(route.query, 'cpuNum') &&
+    Object.hasOwn(route.query, 'connectionNum') &&
+    Object.hasOwn(route.query, 'hdType') &&
+    Object.hasOwn(route.query, 'dbSize'),
+)
+
+const DefaultDescription = defineAsyncComponent(
+  () => import('../components/defaultDescription.vue'),
+)
+const CFV = defineAsyncComponent(
+  () => import('../components/configurationFormView.vue'),
+)
 </script>
 
 <template>
@@ -9,6 +31,7 @@ import DefaultDescription from '../components/defaultDescription.vue'
       <h3 class="text-xl font-bold">Parameters of your system</h3>
       <ConfigurationForm />
     </div>
-    <DefaultDescription />
+    <CFV v-if="shouldShowResultView" />
+    <DefaultDescription v-else />
   </div>
 </template>
diff --git a/src/stores/useSwStore.js b/src/stores/useSwStore.js
deleted file mode 100644
index ce41ae5..0000000
--- a/src/stores/useSwStore.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-
-export const useConfigurationStore = defineStore('sw', () => {
-  const state = ref()
-
-  return { state }
-})
diff --git a/src/utils/calculator.js b/src/utils/calculator.js
index 157d1ab..7d86d41 100644
--- a/src/utils/calculator.js
+++ b/src/utils/calculator.js
@@ -162,30 +162,35 @@ export function calculateSettings({
   )
 
   return {
-    totalMemoryInBytes,
-    totalMemoryInKb,
-    dbDefaultValues,
-    isConfigured,
+    dbVersion,
+    osType,
+    dbType,
+    totalMemory,
+    totalMemoryUnit,
+    cpuNum,
+    connectionNum,
+    hdType,
     maxConnections,
+    hugePages,
+    sharedBuffers,
     effectiveCacheSize,
+    maintenanceWorkMem,
     checkpointSegments,
     checkpointCompletionTarget,
-    defaultStatisticsTarget,
-    walLevel,
-    jit,
-    sharedBuffers,
-    hugePages,
     walBuffers,
+    defaultStatisticsTarget,
     randomPageCost,
     effectiveIoConcurrency,
     parallelSettings,
     workMem,
+    warningInfoMessages,
+    walLevel,
+    jit,
     walCompression,
     autovacuumMaxWorkers,
     autovacuumWorkMem,
     ioMethod,
     ioWorkers,
-    warningInfoMessages,
   }
 }