diff --git a/README.md b/README.md
index d67a588..8976663 100644
--- a/README.md
+++ b/README.md
@@ -46,5 +46,5 @@ https://yoursurveys.xyz
 
 ## License
 
-The Laravel framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).
+The project is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).
 
diff --git a/vue/src/axios.js b/vue/src/axios.js
index d2285c5..dffcd76 100644
--- a/vue/src/axios.js
+++ b/vue/src/axios.js
@@ -23,7 +23,7 @@ axiosClient.interceptors.response.use(response => {
   } else if (error.response.status === 404) {
     router.push({name: 'NotFound'})
   }
-  return error;
+  throw error;
 })
 
 export default axiosClient;
diff --git a/vue/src/components/SurveyListItem.vue b/vue/src/components/SurveyListItem.vue
index 60e1ed2..7188ed7 100644
--- a/vue/src/components/SurveyListItem.vue
+++ b/vue/src/components/SurveyListItem.vue
@@ -14,72 +14,27 @@
     <div v-html="survey.description" class="overflow-hidden flex-1"></div>
 
     <div class="flex justify-between items-center mt-3">
-      <router-link
-        :to="{ name: 'SurveyView', params: { id: survey.id } }"
-        class="flex py-2 px-4 border border-transparent text-sm rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5 mr-2"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
-          />
-        </svg>
+      <TButton :to="{ name: 'SurveyView', params: { id: survey.id } }">
+        <PencilIcon class="wo-5 h-5 mr-2 " />
         Edit
-      </router-link>
+      </TButton>
       <div class="flex items-center">
-        <a
-          :href="`/view/survey/${survey.slug}`"
-          target="_blank"
-          class="h-8 w-8 flex items-center justify-center rounded-full border border-transparent text-sm text-indigo-500 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-            />
-          </svg>
-        </a>
-        <button
-          v-if="survey.id"
-          type="button"
-          @click="emit('delete', survey)"
-          class="h-8 w-8 flex items-center justify-center rounded-full border border-transparent text-sm text-red-500 focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </button>
+        <TButton :href="`/view/survey/${survey.slug}`" circle link target="_blank">
+          <ExternalLinkIcon class="w-5 h-5" />
+        </TButton>
+
+        <TButton v-if="survey.id" @click="emit('delete', survey)" circle link color="red">
+          <TrashIcon class="w-5 h-5" />
+        </TButton>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import TButton from "./core/TButton.vue";
+import { PencilIcon, ExternalLinkIcon, TrashIcon } from '@heroicons/vue/solid'
+
 const { survey } = defineProps({
   survey: Object,
 });
diff --git a/vue/src/components/core/DashboardCard.vue b/vue/src/components/core/DashboardCard.vue
new file mode 100644
index 0000000..3fad12c
--- /dev/null
+++ b/vue/src/components/core/DashboardCard.vue
@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="bg-white shadow-md p-3 text-center flex flex-col animate-fade-in-down"
+  >
+    <h3 v-if="title" class="text-2xl font-semibold">
+      {{title}}
+    </h3>
+    <slot name="title"></slot>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+const {title} = defineProps({
+  title: String
+})
+</script>
+
+<style></style>
diff --git a/vue/src/components/core/TButton.vue b/vue/src/components/core/TButton.vue
new file mode 100644
index 0000000..713ff57
--- /dev/null
+++ b/vue/src/components/core/TButton.vue
@@ -0,0 +1,118 @@
+<template>
+  <a v-if="href" :href="href" :class="classes">
+    <slot></slot>
+  </a>
+  <router-link v-else-if="props.to" :to="props.to" :class="classes">
+    <slot></slot>
+  </router-link>
+  <button v-else :class="classes">
+    <slot></slot>
+  </button>
+</template>
+
+<script setup>
+import { ref } from "@vue/reactivity";
+
+const props = defineProps({
+  // indigo, 'red'
+  color: {
+    type: String,
+    default: "indigo",
+  },
+  to: [Object, String],
+  href: String,
+  link: {
+    type: Boolean,
+    default: false,
+  },
+  circle: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+let classes = ref([
+  "flex",
+  "text-sm",
+  "border",
+  "border-2",
+  "border-transparent",
+]);
+
+if (props.link) {
+  classes.value = [
+    ...classes.value,
+    "transition-colors",
+  ];
+
+  switch (props.color) {
+    case "indigo":
+      classes.value = [
+        ...classes.value,
+        "text-indigo-500",
+        "focus:border-indigo-500",
+      ];
+      break;
+    case "red":
+      classes.value = [...classes.value, "text-red-500", "focus:border-red-500"];
+  }
+
+} else {
+  classes.value = [
+    ...classes.value,
+    "text-white",
+    "focus:ring-2",
+    "focus:ring-offset-2",
+  ];
+
+  switch (props.color) {
+    case "indigo":
+      classes.value = [
+        ...classes.value,
+        "bg-indigo-600",
+        "hover:bg-indigo-700",
+        "focus:ring-indigo-500",
+      ];
+      break;
+    case "red":
+      classes.value = [
+        ...classes.value,
+        "bg-red-600",
+        "hover:bg-red-700",
+        "focus:ring-red-500",
+      ];
+      break;
+    case "green":
+      classes.value = [
+        ...classes.value,
+        "bg-emerald-500",
+        "hover:bg-emerald-600",
+        "focus:ring-emerald-400",
+      ];
+      break;
+
+  }
+}
+
+if (props.circle) {
+  classes.value = [
+    ...classes.value,
+    "h-8",
+    "w-8",
+    "items-center",
+    "justify-center",
+    "rounded-full",
+    "text-sm",
+  ];
+} else {
+  classes.value = [
+    ...classes.value,
+    "p-0",
+    "py-2",
+    "px-4",
+    "rounded-md"
+  ];
+}
+</script>
+
+<style></style>
diff --git a/vue/src/components/core/TButtonLoading.vue b/vue/src/components/core/TButtonLoading.vue
new file mode 100644
index 0000000..66e3692
--- /dev/null
+++ b/vue/src/components/core/TButtonLoading.vue
@@ -0,0 +1,43 @@
+<template>
+  <TButton
+    type="submit"
+    :disabled="loading"
+    :class="{
+      'cursor-not-allowed': loading,
+      'hover:bg-indigo-500': loading,
+    }"
+  >
+    <svg
+      v-if="loading"
+      class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      ></circle>
+      <path
+        class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+    <slot></slot>
+  </TButton>
+</template>
+
+<script setup>
+import TButton from './TButton.vue'
+const props = defineProps({
+  loading: Boolean
+})
+
+</script>
+
+<style></style>
diff --git a/vue/src/components/core/TInput.vue b/vue/src/components/core/TInput.vue
new file mode 100644
index 0000000..a16a25a
--- /dev/null
+++ b/vue/src/components/core/TInput.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <label :for="id" class="sr-only">{{ label }}</label>
+    <input
+      :id="id"
+      :type="type"
+      :value="modelValue"
+      @input="emits('update:modelValue', $event.target.value)"
+      class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+      :class="{ ...computedInputClass, 'border-red-500': errors[name], 'z-10': errors[email] }"
+      :placeholder="placeholder"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "@vue/reactivity";
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: "text",
+  },
+  errors: Object,
+  name: String,
+  id: String,
+  label: String,
+  placeholder: String,
+  modelValue: String,
+  inputClass: [String, Array, Object],
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+const id = computed(
+  () => props.id || "id-" + Math.floor(Math.random() * 100000000)
+);
+const computedInputClass = computed(() => {
+  if (typeof props.inputClass === 'string') {
+    return {
+      [props.inputClass]: true
+    }
+  } else if (typeof props.inputClass === 'object' && props.inputClass.length !== undefined) {
+    return props.inputClass.reduce((accum, val) => {
+      accum[val] = true;
+      return accum;
+    }, {})
+  }
+
+  return props.inputClass;
+})
+</script>
+
+<style></style>
diff --git a/vue/src/store/index.js b/vue/src/store/index.js
index aedcb7e..be6f51d 100644
--- a/vue/src/store/index.js
+++ b/vue/src/store/index.js
@@ -112,7 +112,6 @@ const store = createStore({
         });
     },
     saveSurvey({ commit, dispatch }, survey) {
-
       delete survey.image_url;
 
       let response;
diff --git a/vue/src/views/Dashboard.vue b/vue/src/views/Dashboard.vue
index f7fae7b..35031e7 100644
--- a/vue/src/views/Dashboard.vue
+++ b/vue/src/views/Dashboard.vue
@@ -5,32 +5,27 @@
       v-else
       class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 text-gray-700"
     >
-      <div
-        class="bg-white shadow-md p-3 text-center flex flex-col animate-fade-in-down order-1 lg:order-2"
-        style="animation-delay: 0.1s"
-      >
-        <h3 class="text-2xl font-semibold">Total Surveys</h3>
+      <DashboardCard class="order-1 lg:order-2" style="animation-delay: 0.1s">
+        <template v-slot:title>Total Surveys</template>
         <div
           class="text-8xl pb-4 font-semibold flex-1 flex items-center justify-center"
         >
           {{ data.totalSurveys }}
         </div>
-      </div>
-      <div
-        class="bg-white shadow-md p-3 text-center flex flex-col order-2 lg:order-4 animate-fade-in-down"
-        style="animation-delay: 0.2s"
-      >
-        <h3 class="text-2xl font-semibold">Total Answers</h3>
+      </DashboardCard>
+      <DashboardCard class="order-2 lg:order-4" style="animation-delay: 0.2s">
+        <template v-slot:title>Total Answers</template>
         <div
           class="text-8xl pb-4 font-semibold flex-1 flex items-center justify-center"
         >
           {{ data.totalAnswers }}
         </div>
-      </div>
-      <div
-        class="row-span-2 animate-fade-in-down order-3 lg:order-1 bg-white shadow-md p-4"
+      </DashboardCard>
+      <DashboardCard
+        class="order-3 lg:order-1 row-span-2"
+        style="animation-delay: 0.2s"
       >
-        <h3 class="text-2xl font-semibold">Latest Survey</h3>
+        <template v-slot:title>Latest Survey</template>
         <div v-if="data.latestSurvey">
           <img
             :src="data.latestSurvey.image_url"
@@ -59,67 +54,39 @@
             <div>{{ data.latestSurvey.answers }}</div>
           </div>
           <div class="flex justify-between">
-            <router-link
+            <TButton
               :to="{ name: 'SurveyView', params: { id: data.latestSurvey.id } }"
-              class="flex py-2 px-4 border border-transparent text-sm rounded-md text-indigo-500 hover:bg-indigo-700 hover:text-white transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+              link
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5 mr-2"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
-                />
-              </svg>
+              <PencilIcon class="w-5 h-5 mr-2" />
               Edit Survey
-            </router-link>
+            </TButton>
 
-            <button
-              class="flex py-2 px-4 border border-transparent text-sm rounded-md text-indigo-500 hover:bg-indigo-700 hover:text-white transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5 mr-2"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-              >
-                <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
-                <path
-                  fill-rule="evenodd"
-                  d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
-                  clip-rule="evenodd"
-                />
-              </svg>
+            <TButton link>
+              <EyeIcon class="w-5 h-5 mr-2" />
               View Answers
-            </button>
+            </TButton>
           </div>
         </div>
         <div v-else class="text-gray-600 text-center py-16">
           Your don't have surveys yet
         </div>
-      </div>
-      <div
-        class="bg-white shadow-md p-3 row-span-2 order-4 lg:order-3 animate-fade-in-down"
-        style="animation-delay: 0.3s"
-      >
-        <div class="flex justify-between items-center mb-3 px-2">
-          <h3 class="text-2xl font-semibold">Latest Answers</h3>
+      </DashboardCard>
+      <DashboardCard class="order-4 lg:order-3 row-span-2" style="animation-delay: 0.3s">
+        <template v-slot:title>
+          <div class="flex justify-between items-center mb-3 px-2">
+            <h3 class="text-2xl font-semibold">Latest Answers</h3>
 
-          <a
-            href="javascript:void(0)"
-            class="text-sm text-blue-500 hover:decoration-blue-500"
-          >
-            View all
-          </a>
-        </div>
+            <a
+              href="javascript:void(0)"
+              class="text-sm text-blue-500 hover:decoration-blue-500"
+            >
+              View all
+            </a>
+          </div>
+        </template>
 
-        <div v-if="data.latestAnswers.length">
+        <div v-if="data.latestAnswers.length" class="text-left">
           <a
             href="#"
             v-for="answer of data.latestAnswers"
@@ -136,12 +103,15 @@
         <div v-else class="text-gray-600 text-center py-16">
           Your don't have answers yet
         </div>
-      </div>
+      </DashboardCard>
     </div>
   </PageComponent>
 </template>
 
 <script setup>
+import {EyeIcon, PencilIcon} from "@heroicons/vue/solid"
+import DashboardCard from "../components/core/DashboardCard.vue";
+import TButton from "../components/core/TButton.vue";
 import PageComponent from "../components/PageComponent.vue";
 import { computed } from "vue";
 import { useStore } from "vuex";
diff --git a/vue/src/views/Login.vue b/vue/src/views/Login.vue
index 11456ca..92cf230 100644
--- a/vue/src/views/Login.vue
+++ b/vue/src/views/Login.vue
@@ -88,44 +88,15 @@
     </div>
 
     <div>
-      <button
-        type="submit"
-        :disabled="loading"
-        class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-        :class="{
-          'cursor-not-allowed': loading,
-          'hover:bg-indigo-500': loading,
-        }"
-      >
+      <TButtonLoading :loading="loading" class="w-full relative justify-center">
         <span class="absolute left-0 inset-y-0 flex items-center pl-3">
           <LockClosedIcon
             class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400"
             aria-hidden="true"
           />
         </span>
-        <svg
-          v-if="loading"
-          class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <circle
-            class="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            stroke-width="4"
-          ></circle>
-          <path
-            class="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          ></path>
-        </svg>
         Sign in
-      </button>
+      </TButtonLoading>
     </div>
   </form>
 </template>
@@ -136,6 +107,7 @@ import store from "../store";
 import { useRouter } from "vue-router";
 import { ref } from "vue";
 import Alert from "../components/Alert.vue";
+import TButtonLoading from "../components/core/TButtonLoading.vue";
 
 const router = useRouter();
 
diff --git a/vue/src/views/Register.vue b/vue/src/views/Register.vue
index f2aa9a9..22fdf3b 100644
--- a/vue/src/views/Register.vue
+++ b/vue/src/views/Register.vue
@@ -1,132 +1,79 @@
 <template>
   <div>
-    <img
-      class="mx-auto h-12 w-auto"
-      src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
-      alt="Workflow"
-    />
-    <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
-      Register for free
-    </h2>
-    <p class="mt-2 text-center text-sm text-gray-600">
-      Or
-      {{ " " }}
-      <router-link
-        :to="{ name: 'Login' }"
-        class="font-medium text-indigo-600 hover:text-indigo-500"
+    <div>
+      <img
+        class="mx-auto h-12 w-auto"
+        src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
+        alt="Workflow"
+      />
+      <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
+        Register for free
+      </h2>
+      <p class="mt-2 text-center text-sm text-gray-600">
+        Or
+        {{ " " }}
+        <router-link
+          :to="{ name: 'Login' }"
+          class="font-medium text-indigo-600 hover:text-indigo-500"
+        >
+          login to your account
+        </router-link>
+      </p>
+    </div>
+    <form class="mt-8 space-y-6" @submit="register">
+      <Alert
+        v-if="Object.keys(errors).length"
+        class="flex-col items-stretch text-sm"
       >
-        login to your account
-      </router-link>
-    </p>
-  </div>
-  <form class="mt-8 space-y-6" @submit="register">
-    <Alert v-if="Object.keys(errors).length" class="flex-col items-stretch text-sm">
-      <div v-for="(field, i) of Object.keys(errors)" :key="i">
-        <div v-for="(error, ind) of errors[field] || []" :key="ind">
-          * {{ error }}
+        <div v-for="(field, i) of Object.keys(errors)" :key="i">
+          <div v-for="(error, ind) of errors[field] || []" :key="ind">
+            * {{ error }}
+          </div>
         </div>
-      </div>
-    </Alert>
+      </Alert>
 
-    <input type="hidden" name="remember" value="true" />
-    <div class="rounded-md shadow-sm -space-y-px">
-      <div>
-        <label for="fullname" class="sr-only">Email address</label>
-        <input
-          id="fullname"
+      <input type="hidden" name="remember" value="true" />
+      <div class="rounded-md shadow-sm -space-y-px">
+        <TInput
           name="name"
-          type="text"
-          autocomplete="name"
-          required=""
           v-model="user.name"
-          class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-          placeholder="Full name"
+          :errors="errors"
+          placeholder="Full Name"
+          inputClass="rounded-t-md"
         />
-      </div>
-      <div>
-        <label for="email-address" class="sr-only">Email address</label>
-        <input
-          id="email-address"
-          name="email"
+        <TInput
           type="email"
-          autocomplete="email"
-          required=""
+          name="email"
           v-model="user.email"
-          class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-          :class="{ 'border-red-500': errors.email, 'z-10': errors.email }"
-          placeholder="Email address"
+          :errors="errors"
+          placeholder="Email Address"
         />
-      </div>
-      <div>
-        <label for="password" class="sr-only">Password</label>
-        <input
-          id="password"
-          name="password"
+        <TInput
           type="password"
-          autocomplete="current-password"
-          required=""
+          name="password"
           v-model="user.password"
-          class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+          :errors="errors"
           placeholder="Password"
-          :class="{ 'border-red-500': errors.password, 'z-10': errors.password }"
         />
-      </div>
-      <div>
-        <label for="password_confirmation" class="sr-only">Password</label>
-        <input
-          id="password_confirmation"
-          name="password_confirmation"
+        <TInput
           type="password"
-          autocomplete="current-password"
-          required=""
+          name="password_confirmation"
           v-model="user.password_confirmation"
-          class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+          :errors="errors"
           placeholder="Confirm Password"
+          inputClass="rounded-b-md"
         />
       </div>
-    </div>
-
-    <div>
-      <button
-        type="submit"
-        :disabled="loading"
-        class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-        :class="{
-          'cursor-not-allowed': loading,
-          'hover:bg-indigo-500': loading,
-        }"
-      >
-        <span class="absolute left-0 inset-y-0 flex items-center pl-3">
-          <LockClosedIcon
-            class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400"
-            aria-hidden="true"
-          />
-        </span>
-        <svg
-          v-if="loading"
-          class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
+      <div>
+        <TButtonLoading
+          :loading="loading"
+          class="w-full relative justify-center"
         >
-          <circle
-            class="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            stroke-width="4"
-          ></circle>
-          <path
-            class="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          ></path>
-        </svg>
-        Sign up
-      </button>
-    </div>
-  </form>
+          Sign up
+        </TButtonLoading>
+      </div>
+    </form>
+  </div>
 </template>
 
 <script setup>
@@ -134,6 +81,8 @@ import { ref } from "vue";
 import { LockClosedIcon } from "@heroicons/vue/solid";
 import store from "../store";
 import { useRouter } from "vue-router";
+import TButtonLoading from "../components/core/TButtonLoading.vue";
+import TInput from "../components/core/TInput.vue";
 import Alert from "../components/Alert.vue";
 
 const router = useRouter();
diff --git a/vue/src/views/SurveyView.vue b/vue/src/views/SurveyView.vue
index eb3a584..944cf2c 100644
--- a/vue/src/views/SurveyView.vue
+++ b/vue/src/views/SurveyView.vue
@@ -7,48 +7,14 @@
         </h1>
 
         <div class="flex">
-          <a
-            :href="`/view/survey/${model.slug}`"
-            target="_blank"
-            v-if="model.slug"
-            class="flex py-2 px-4 border border-transparent text-sm rounded-md text-indigo-500 hover:bg-indigo-700 hover:text-white transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 mr-2"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-              />
-            </svg>
+          <TButton v-if="model.slug" link :href="`/view/survey/${model.slug}`" target="_blank" class="mr-2">
+            <ExternalLinkIcon class="w-5 h-5" />
             View Public link
-          </a>
-          <button
-            v-if="route.params.id"
-            type="button"
-            @click="deleteSurvey()"
-            class="py-2 px-3 text-white bg-red-500 rounded-md hover:bg-red-600"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5 -mt-1 inline-block"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
-                clip-rule="evenodd"
-              />
-            </svg>
-            Delete Survey
-          </button>
+          </TButton>
+          <TButton v-if="route.params.id" color="red" @click="deleteSurvey()">
+            <TrashIcon class="w-5 h-5 mr-2" />
+            Delete
+          </TButton>
         </div>
       </div>
     </template>
@@ -215,12 +181,10 @@
         </div>
 
         <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
-          <button
-            type="submit"
-            class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-          >
+          <TButton>
+            <SaveIcon class="w-5 h-5 mr-2" />
             Save
-          </button>
+          </TButton>
         </div>
       </div>
     </form>
@@ -231,9 +195,11 @@
 import { v4 as uuidv4 } from "uuid";
 import { computed, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { SaveIcon, TrashIcon, ExternalLinkIcon } from '@heroicons/vue/solid'
 import store from "../store";
 import PageComponent from "../components/PageComponent.vue";
 import QuestionEditor from "../components/editor/QuestionEditor.vue";
+import TButton from "../components/core/TButton.vue";
 
 const router = useRouter();
 
diff --git a/vue/src/views/Surveys.vue b/vue/src/views/Surveys.vue
index 44d9044..67545d8 100644
--- a/vue/src/views/Surveys.vue
+++ b/vue/src/views/Surveys.vue
@@ -4,26 +4,10 @@
     <template v-slot:header>
       <div class="flex justify-between items-center">
         <h1 class="text-3xl font-bold text-gray-900">Surveys</h1>
-        <router-link
-          :to="{ name: 'SurveyCreate' }"
-          class="py-2 px-3 text-white bg-emerald-500 rounded-md hover:bg-emerald-600"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-4 w-4 -mt-1 inline-block"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 4v16m8-8H4"
-            />
-          </svg>
+        <TButton color="green" :to="{ name: 'SurveyCreate' }">
+          <PlusIcon class="w-5 h-5" />
           Add new Survey
-        </router-link>
+        </TButton>
       </div>
     </template>
     <div v-if="surveys.loading" class="flex justify-center">Loading...</div>
@@ -74,6 +58,8 @@
 <script setup>
 import store from "../store";
 import { computed } from "vue";
+import {PlusIcon} from "@heroicons/vue/solid"
+import TButton from '../components/core/TButton.vue'
 import PageComponent from "../components/PageComponent.vue";
 import SurveyListItem from "../components/SurveyListItem.vue";