diff --git a/app/pages/settings/general.vue b/app/pages/settings/general.vue
index fd736e9..bce2460 100644
--- a/app/pages/settings/general.vue
+++ b/app/pages/settings/general.vue
@@ -1,11 +1,69 @@
 <script setup lang="ts">
+    import * as z from 'zod'
+    import type { FormSubmitEvent } from '@nuxt/ui'
+
     definePageMeta({
         layout: "settings",
         middleware: ["login-required"]
     })
 
+    const { data: user_data, refresh: userRefresh } = useFetch("/me");
+    const loading_btn = ref(false)
+
+    const schema = z.object({
+        first_name: z.string(),
+        last_name: z.string(),
+        email: z.email()
+    })
+
+    type Schema = z.output<typeof schema>
+
+    async function submitChanges(event: FormSubmitEvent<Schema>) {
+        loading_btn.value = true
+        await $fetch("/settings/edit_user", {
+            method: "POST",
+            body: {
+                first_name: user_data.value.first_name,
+                last_name: user_data.value.last_name,
+                email: user_data.value.email
+            }
+        })  
+        loading_btn.value = false
+    }
 </script>
 
 <template>
+    <UContainer class="max-w-4xl">
+        <UForm :schema="schema" :state="user_data" @submit="submitChanges">
+        <div class="gap-3 justify-between">
+            <div class="flex-1 w-full gap-2 mt-5 mb-5">
+                <UFormField label="First Name" orientation="horizontal" name="first_name">
+                    <UInput v-if="user_data" v-model="user_data.first_name"/>
+                    <USkeleton v-else class="w-53 h-7" />
+                </UFormField>
+            </div> 
+            <div class="flex-1 w-full gap-2 mt-5 mb-5">
+                <UFormField label="Last Name" orientation="horizontal">
+                    <UInput v-if="user_data" v-model="user_data.last_name" required/>
+                    <USkeleton v-else class="w-53 h-7" />
+     
+                </UFormField>
+            </div>
+            <div class="flex-1 w-full gap-2 mt-5 mb-5">
+                <UFormField label="E-mail" orientation="horizontal" name="email">
+                    <UInput v-if="user_data" v-model="user_data.email" required/>
+                    <USkeleton v-else class="w-53 h-7" />
+                </UFormField>
+            </div>
+            <div class="text-center justify-items-center">
+                <UButton variant="soft" icon="lucide:circle-check-big" :loading="loading_btn" type="submit" size="lg" :block="true" class="max-w-4/5 mt-4 mb-4 rounded-full">Submit</UButton>
+            </div>
+        </div>
+        </UForm>
+    </UContainer>
 
-</template>
\ No newline at end of file
+</template>
+
+<style>
+    
+</style>
\ No newline at end of file
diff --git a/app/pages/settings/security.vue b/app/pages/settings/security.vue
index fd736e9..3acef61 100644
--- a/app/pages/settings/security.vue
+++ b/app/pages/settings/security.vue
@@ -1,11 +1,109 @@
 <script setup lang="ts">
+    import * as z from 'zod'
+    import type { FormSubmitEvent } from '@nuxt/ui'
+
     definePageMeta({
         layout: "settings",
         middleware: ["login-required"]
     })
+    const loading_btn = ref(false)
+    
+
+    const schema = z.object({
+        old_pw: z.string(),
+        new_pw: z.string().min(8, "Min 8 chars"),
+        confirm_new_pw: z.string().min(8, "Min 8 chars"),
+    })
+    type Schema = z.output<typeof schema>
+
+    const pw_fields = ref({
+         old_pw: "",
+         new_pw: "",
+         confirm_new_pw: ""
+    })
+
+    const show_pw = reactive({
+        old_pw: false,
+        new_pw: false,
+        confirm_new_pw: false
+    })
+
+    async function submitChanges(event: FormSubmitEvent<Schema>) {
+        loading_btn.value = true
+        await $fetch("/settings/changepw", {
+            method: "POST",
+            body: pw_fields.value
+        })
+        loading_btn.value = false
+    }
 
 </script>
 
 <template>
+     <UContainer class="max-w-4xl">
+        <h1 class="text-lg ml-1 font-bold geist mb-1">Change password</h1>
+        <USeparator />
+        <div class="gap-3 justify-between">
+            <UForm :schema="schema" :state="pw_fields" @submit="submitChanges">
+            <div class="flex-1 w-full gap-2 mt-5 mb-5">
+                <UFormField label="Current password" orientation="horizontal" name="old_pw">
+                    <UInput :type="show_pw.old_pw ? 'text' : 'password'" v-model="pw_fields.old_pw" required>
+                        <template #trailing>
+                            <UButton
+                                color="neutral"
+                                variant="link"
+                                size="sm"
+                                :icon="show_pw.old_pw ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+                                :aria-label="show_pw.old_pw ? 'Hide password' : 'Show password'"
+                                :aria-pressed="show_pw.old_pw"
+                                aria-controls="password"
+                                @click="show_pw.old_pw = !show_pw.old_pw"
+                            />
+                        </template>
+                    </UInput>
+                </UFormField>
+            </div> 
+            <div class="flex-1 w-full gap-2 mt-5 mb-5">
+                <UFormField label="New password" orientation="horizontal" name="new_pw">
+                    <UInput :type="show_pw.new_pw ? 'text' : 'password'"  v-model="pw_fields.new_pw" required>
+                        <template #trailing>
+                            <UButton
+                                color="neutral"
+                                variant="link"
+                                size="sm"
+                                :icon="show_pw.new_pw ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+                                :aria-label="show_pw.new_pw ? 'Hide password' : 'Show password'"
+                                :aria-pressed="show_pw.new_pw"
+                                aria-controls="password"
+                                @click="show_pw.new_pw = !show_pw.new_pw"
+                            />
+                        </template>
+                    </UInput>
+                </UFormField>
+            </div>
+            <div class="flex-1 w-full gap-2 mt-5 mb-5">
+                <UFormField label="Confirm new password" orientation="horizontal" name="confirm_new_pw">
+                    <UInput :type="show_pw.confirm_new_pw ? 'text' : 'password'"  v-model="pw_fields.confirm_new_pw" required>
+                        <template #trailing>
+                            <UButton
+                                color="neutral"
+                                variant="link"
+                                size="sm"
+                                :icon="show_pw.confirm_new_pw ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+                                :aria-label="show_pw.confirm_new_pw ? 'Hide password' : 'Show password'"
+                                :aria-pressed="show_pw.confirm_new_pw"
+                                aria-controls="password"
+                                @click="show_pw.confirm_new_pw = !show_pw.confirm_new_pw"
+                            />
+                        </template>
+                    </UInput>
+                </UFormField>
+            </div>
+            <div class="text-center justify-items-center">
+                <UButton variant="soft" icon="lucide:circle-check-big" :loading="loading_btn" type="submit" size="lg" :block="true" class="max-w-4/5 mt-4 mb-4 rounded-full">Submit</UButton>
+            </div>
+            </UForm>
+        </div>
+    </UContainer>
 
 </template>
\ No newline at end of file