diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..8df6df7
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}
diff --git a/pages/diarys/_slug/index.vue b/pages/diarys/_slug/index.vue
index 5a27a55..33b8868 100644
--- a/pages/diarys/_slug/index.vue
+++ b/pages/diarys/_slug/index.vue
@@ -71,25 +71,6 @@
               </svg>
               Download as PDF
             </button>
-            <button
-              @click="download"
-              class="ml-3 inline-flex items-center justify-center w-1/2 h-12 px-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md md:w-auto bg-simplydiarynew-secondary hover:bg-simplydiarynew-primary focus:shadow-outline focus:outline-none"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="32"
-                height="32"
-                fill="currentColor"
-                class="bi bi-cloud-arrow-down-fill mr-3"
-                viewBox="0 0 16 16"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z"
-                />
-              </svg>
-              Diary Settings
-            </button>
           </div>
           <DiaryEntry
             v-for="post in this.entrys"
diff --git a/pages/diarys/_slug/settings.vue.disabled b/pages/diarys/_slug/settings.vue.disabled
new file mode 100644
index 0000000..4fb0996
--- /dev/null
+++ b/pages/diarys/_slug/settings.vue.disabled
@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <navbar />
+    <div class="mb-1 mt-10">
+      <div class="bg-gray-100">
+        <div class="px-4 py-8 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-8">
+          <div class="max-w-xl md:mx-auto sm:text-center lg:max-w-2xl">
+            <div>
+              <p
+                class="inline-block px-3 py-1 mb-4 text-xs font-bold tracking-wider text-white rounded-full bg-simplydiarynew-primary">
+                Diary Code: {{ this.diary.code }} </p>
+            </div>
+            <h2
+              class="max-w-lg mb-2 font-sans text-6xl font-extrabold leading-none tracking-wide text-gray-900 sm:text-6xl md:mx-auto">
+              Your Diary Settings
+            </h2>
+            <div class="flex items-center sm:justify-center">
+              <a :href="`${this.backurl}`" aria-label=""
+                class="inline-flex items-center font-semibold text-gray-700 transition-colors duration-200 hover:text-simplydiarynew-primary">Back
+                to Diary</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <div class="px-4 py-8 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-16">
+      <div class="max-w-screen-lg sm:mx-auto">
+        <form class="col-lg-12 text-start mt-5" @submit.prevent="saveSettings">
+          <label class="block">
+            <span class="text-black font-bold font-nunito text-xl">Title</span>
+            <input type="text" class="form-input mt-1 block w-full rounded border" v-model="title" required>
+
+            <button type="submit"
+              class="inline-flex items-center mt-4 h-12 px-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-blue-gray-900 hover:bg-gray-700 focus:shadow-outline focus:outline-none">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
+                class="mr-2 bi bi-check-circle-fill" viewBox="0 0 16 16">
+                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                <path
+                  d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z" />
+              </svg> Save Settings
+            </button>
+            <button
+              class="inline-flex items-center ml-2 mt-4 h-12 px-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-simplydiarynew-primary hover:bg-simplydiarynew-secondary focus:shadow-outline focus:outline-none">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
+                class="bi bi-trash mr-2" viewBox="0 0 16 16">
+                <path
+                  d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
+                <path fill-rule="evenodd"
+                  d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
+              </svg> Delete Diary
+            </button>
+          </label>
+        </form>
+      </div>
+
+    </div>
+    <footer-lp />
+  </div>
+</template>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
+
+  body {
+    background-color: #F5F4F4 !important;
+  }
+
+  .font-nunito {
+    font-family: "Nunito", sans-serif !important;
+  }
+
+</style>
+<script lang="ts">
+  import Vue from "vue";
+
+
+  export default Vue.extend({
+    data() {
+      return {
+        diary: {},
+        backurl: "",
+        title: ""
+      };
+    },
+
+    methods: {
+      async saveSettings() {
+        try {
+          var updatedSettings = await this.$axios.post("https://api.simply-diary.xyz/v1/diarys/" + this.$nuxt
+            .context
+            .params
+            .slug, {
+              title: this.title
+            });
+
+		console.log(updatedSettings)
+
+		  this.diary = updatedSettings.data;
+          this.$router.push(`/diarys/${this.$nuxt.context
+          .params
+          .slug}`)
+
+        } catch (err) {
+          console.log("error" + err);
+          this.$nuxt.context.error({
+            statusCode: 502,
+            message: "Internal Server Error"
+          });
+        }
+
+      }
+    },
+
+
+    mounted: async function () {
+      try {
+        var fetchedDiary = await this.$axios.get("https://api.simply-diary.xyz/v1/diarys/" + this.$nuxt.context
+          .params
+          .slug)
+        this.diary = fetchedDiary.data;
+        this.title = fetchedDiary.data.title;
+        this.backurl = "https://simply-diary.xyz/diarys/" + fetchedDiary.data.code;
+      } catch (err) {
+        console.log("error" + err);
+        this.$nuxt.context.error({
+          statusCode: 404,
+          message: "Page not found"
+        });
+      }
+    }
+  });
+
+</script>
diff --git a/tailwind.config.js b/tailwind.config.js
index 02a4d44..ed764eb 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,9 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
+const defaultTheme = require('tailwindcss/defaultTheme')
 module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ['ui-sans-serif', 'system-ui']
+        sans: ['ui-sans-serif', 'system-ui'],
       },
       colors: {
         red: {
@@ -22,16 +22,15 @@ module.exports = {
           'accent-400': '#ff1744',
           'accent-700': '#d50000',
         },
-		'simplydiary': {
-			"primary": "#d41a4c",
-			"secondary": "#E75B80",
-		},
-		'simplydiarynew': {
-			"primary": "#10B981",
-			"secondary": "#5BB981"
-			
-		},
-        
+        simplydiary: {
+          primary: '#d41a4c',
+          secondary: '#E75B80',
+        },
+        simplydiarynew: {
+          primary: '#71B664',
+          secondary: '#53B640',
+        },
+
         pink: {
           50: '#fce4ec',
           100: '#f8bbd0',
@@ -48,7 +47,7 @@ module.exports = {
           'accent-400': '#f50057',
           'accent-700': '#c51162',
         },
-        
+
         gray: {
           50: '#fafafa',
           100: '#f5f5f5',
@@ -73,7 +72,7 @@ module.exports = {
           800: '#37474f',
           900: '#263238',
         },
-        
+
         amber: {
           50: '#fff8e1',
           100: '#ffecb3',
@@ -175,7 +174,5 @@ module.exports = {
     opacity: ['responsive', 'hover', 'focus', 'group-hover'],
     backgroundColor: ['responsive', 'hover', 'focus', 'group-hover'],
   },
-  plugins: [
-    require('@tailwindcss/custom-forms'),
-  ]
-};
+  plugins: [require('@tailwindcss/custom-forms')],
+}