diff --git a/src/lib/Index.svelte b/src/lib/Index.svelte
index a251bda..9bdbed7 100644
--- a/src/lib/Index.svelte
+++ b/src/lib/Index.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
   import CallTauri from '$lib/components/CallTauri.svelte';
-  import HashInput from '$lib/components/HashInput.svelte';
+  import HashString from '$lib/components/HashString.svelte';
+  import Versions from '$lib/components/Versions.svelte';
 </script>
 
-<div class="flex flex-col gap-8 items-center font-bold drop-shadow-ft">
+<div class="flex flex-col space-y-6 items-center font-bold drop-shadow-ft">
   <h1 class="text-4xl mt-16">Welcome</h1>
   <h2 class="text-xl">
     This is a <span class="bg-secondary text-secondary-content rounded-md p-1"
-      >Svelte Tauri</span
-    > Template
+      >Svelte
+    </span>
+    -
+    <span class="bg-primary text-primary-content rounded-md p-1"> Tauri</span> Template
   </h2>
 
   <CallTauri />
-  <HashInput />
+  <HashString />
+  <Versions />
 </div>
diff --git a/src/lib/components/Versions.svelte b/src/lib/components/Versions.svelte
new file mode 100644
index 0000000..5d5abaf
--- /dev/null
+++ b/src/lib/components/Versions.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { getTauriVersion, getVersion, getName } from '@tauri-apps/api/app';
+  type Versions = {
+    tauri: string;
+    app: string;
+    name: string;
+  };
+
+  const getVersions = async (): Promise<Versions> => {
+    const versions = {} as Versions;
+    [versions.tauri, versions.app, versions.name] = await Promise.all([
+      getTauriVersion(),
+      getVersion(),
+      getName()
+    ]);
+    return versions;
+  };
+</script>
+
+<h3>Versions</h3>
+<div class="grid grid-cols-1">
+  {#await getVersions() then versions}
+    {#each Object.entries(versions) as [key, val], i (i)}
+      <div>
+        {key} - {val}
+      </div>
+    {/each}
+  {/await}
+</div>