diff --git a/api/routes.js b/api/routes.js
index 8d550c7..2f95e45 100644
--- a/api/routes.js
+++ b/api/routes.js
@@ -4,6 +4,7 @@ const rateLimit = require("express-rate-limit");
 const axios = require("axios");
 
 const { CaptchaSecretKey } = require("../config");
+const { Style } = require("../models/Style");
 
 // Middleware
 const router = express.Router();
@@ -12,6 +13,11 @@ const cache = apicache.middleware;
 const onlyStatus200 = (req, res) => res.statusCode === 200;
 const cacheSuccessful = cache("10 minutes", onlyStatus200);
 
+const clearCache = (req, res, next) => {
+  apicache.clear();
+  next();
+};
+
 // Allow 1 request per 10 minutes
 const GHRateLimiter = rateLimit({
   windowMs: 10 * 60 * 1000,
@@ -35,16 +41,25 @@ const recaptcha = (req, res, next) => {
     });
 };
 
-function isAdmin(req, res, next) {
+const isAuthorized = async (req, res, next) => {
+  const { url } = req.body;
+  if (!url) return res.status(400).json({ error: "Request must contain url field" });
+  const existingStyle = await Style.findOne({ url }).lean();
+  if (!existingStyle) return res.status(404).json({ error: "Style does not exist" });
+  req.styleData = existingStyle;
+
   if (process.env.NODE_ENV !== "production") return next();
+
   if (!req.isAuthenticated()) {
     return res.status(401).json({ error: "Authentication is required to perform this action" });
   }
-  if (req.user.role !== "Admin") {
+  const isAdmin = req.user.role === "Admin";
+  const isOwner = req.user.username === existingStyle.owner;
+  if (!isAdmin && !isOwner) {
     return res.status(403).json({ error: "You are not authorized to perform this action" });
   }
   next();
-}
+};
 
 const {
   getStyles,
@@ -53,6 +68,7 @@ const {
   addStyle,
   updateAllStyles,
   updateStyle,
+  editStyle,
   deleteStyle,
   getStylesByOwner
 } = require("./styles");
@@ -67,8 +83,9 @@ router.get("/search/:page?", searchStyle);
 router.get("/owner/:owner/:page?", cacheSuccessful, getStylesByOwner);
 router.post("/style/add", recaptcha, addStyle);
 router.put("/style/update/all", GHRateLimiter, updateAllStyles);
-router.put("/style/update/:id", GHRateLimiter, updateStyle);
-router.delete("/style/delete", isAdmin, deleteStyle);
+router.put("/style/update", GHRateLimiter, updateStyle);
+router.put("/style/edit", isAuthorized, clearCache, editStyle);
+router.delete("/style/delete", isAuthorized, clearCache, deleteStyle);
 
 router.get("/me", getCurrentUser);
 
diff --git a/api/styles.js b/api/styles.js
index c8eb3e6..28636cf 100644
--- a/api/styles.js
+++ b/api/styles.js
@@ -149,10 +149,10 @@ function addStyle(req, res) {
 }
 
 function updateStyle(req, res) {
-  const styleId = req.params.id;
-  if (!styleId) return res.status(400).json({ error: "Request must contain styleId field" });
+  const { url } = req.body;
+  if (!url) return res.status(400).json({ error: "Request must contain url field" });
 
-  Style.findById(styleId, async (error, style) => {
+  Style.findOne({ url }, async (error, style) => {
     if (error) return res.status(500).json({ error });
     if (!style) return res.status(404).json({ error: "Style was not found in our base" });
 
@@ -163,8 +163,8 @@ function updateStyle(req, res) {
     if (data.isArchived) return res.status(400).json({ error: "Repository is archived" });
     if (data.isFork) return res.status(400).json({ error: "Repository is forked" });
 
-    Style.findByIdAndUpdate(
-      styleId,
+    Style.findOneAndUpdate(
+      { url },
       data,
       { new: true },
       (updateError, newStyle) => {
@@ -193,12 +193,41 @@ function updateAllStyles(req, res) {
   });
 }
 
-async function deleteStyle(req, res) {
-  const { url } = req.body;
-  const existingStyle = await Style.findOne({ url }).lean();
-  if (!existingStyle) return res.status(404).json({ error: "Style does not exist" });
+function editStyle(req, res) {
+  const { url, ...customData } = req.body;
+  if (!customData.customName && !customData.customPreview) {
+    return res.status(400).json({ error: "Request must contain customName or customPreview fields" });
+  }
+
+  if (customData.customPreview) {
+    try {
+      const previewURL = new URL(customData.customPreview);
+      if (!previewURL.protocol.includes("https:")) {
+        return res.status(400).json({ error: "Preview must be from a secure source" });
+      }
+    } catch (error) {
+      return res.status(400).json({ error: "Invalid preview URL" });
+    }
+  }
+
+  // Remove non-custom fields
+  Object.keys(customData).forEach(key => {
+    const fieldToDelete = !["customName", "customPreview"].includes(key);
+    return fieldToDelete && delete customData[key];
+  });
 
-  Style.findOneAndDelete({ url }, (error, style) => {
+  Style.findOneAndUpdate(
+    { url: req.styleData.url },
+    { $set: customData },
+    { new: true },
+    (error, style) => {
+      if (error) return res.status(500).json({ error });
+      return res.status(200).json({ style });
+    });
+}
+
+async function deleteStyle(req, res) {
+  Style.findOneAndDelete({ url: req.styleData.url }, (error, style) => {
     if (error) return res.status(500).json({ error });
     return res.status(200).json({ style });
   });
@@ -230,6 +259,7 @@ module.exports = {
   addStyle,
   updateStyle,
   updateAllStyles,
+  editStyle,
   deleteStyle,
   getStylesByOwner
 };
diff --git a/common.js b/common.js
index 054fc01..58ce3ee 100644
--- a/common.js
+++ b/common.js
@@ -92,9 +92,7 @@ function addExpressMiddleware(app) {
         "img-src": [
           "'self'",
           "data:",
-          "https://raw.githubusercontent.com",
-          "https://github.githubassets.com",
-          "https://www.google-analytics.com"
+          "https:"
         ],
         "style-src": ["'self'", "'unsafe-inline'"],
         "script-src": [
diff --git a/models/Style.js b/models/Style.js
index 9b787ba..bca8db6 100644
--- a/models/Style.js
+++ b/models/Style.js
@@ -24,9 +24,11 @@ const schema = new Schema({
   isPrivate: Boolean,
   isArchived: Boolean,
   isFork: Boolean,
+  customName: String,
+  customPreview: String
 });
 
-schema.index({ name: "text", owner: "text" });
+schema.index({ name: "text", customName: "text", owner: "text" });
 schema.plugin(mongoosePaginate);
 
 exports.Style = mongoose.model("Style", schema);
diff --git a/server.js b/server.js
index e75cbbf..5380123 100644
--- a/server.js
+++ b/server.js
@@ -18,7 +18,7 @@ addExpressMiddleware(app);
 app.use(express.static("public"));
 app.use("/api", api);
 
-app.get("/login", passport.authenticate("github", { scope: ["user:email"] }));
+app.get("/login", passport.authenticate("github", { scope: ["read:user"] }));
 app.get("/github/callback", passport.authenticate("github"), (req, res) => res.redirect("/"));
 
 const clientIndex = path.join(__dirname, "public/index.html");
diff --git a/src/src/App.vue b/src/src/App.vue
index 6975d2a..9af5c99 100644
--- a/src/src/App.vue
+++ b/src/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
-    <app-header @open-nav-link="openNavLink" />
-    <Home />
+    <app-header :user="user" @open-nav-link="openNavLink" />
+    <Home :user="user" />
     <app-footer @open-nav-link="openNavLink" />
 
     <how-to-use-dialog :open="showHowtoUseModal" @close="showHowtoUseModal = false" />
@@ -11,6 +11,8 @@
 </template>
 
 <script>
+import axios from 'axios';
+
 import AppHeader from '@/components/AppHeader.vue';
 import Home from '@/views/Home.vue';
 import AppFooter from '@/components/AppFooter.vue';
@@ -32,7 +34,9 @@ export default {
     return {
       showHowtoUseModal: false,
       showAddStyleModal: false,
-      showPrivacyModal: false
+      showPrivacyModal: false,
+
+      user: {}
     };
   },
   computed: {
@@ -46,10 +50,23 @@ export default {
       isActive ? $body.classList.add('no-scroll') : $body.classList.remove('no-scroll');
     }
   },
+  beforeMount() {
+    this.getUser();
+  },
   mounted() {
     this.$gtag.pageview({ page_path: window.location.pathname });
   },
   methods: {
+    getUser() {
+      axios
+        .get('/api/me')
+        .then((response) => {
+          if (!response.data.error) this.user = response.data.user;
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    },
     openNavLink(navLink) {
       this[navLink] = true;
     }
diff --git a/src/src/components/AppHeader.vue b/src/src/components/AppHeader.vue
index aa526e4..4bf5e1e 100644
--- a/src/src/components/AppHeader.vue
+++ b/src/src/components/AppHeader.vue
@@ -9,6 +9,8 @@
       <nav>
         <button class="link" type="button" @click="$emit('open-nav-link', 'showHowtoUseModal')">How to Use</button>
         <button class="link" type="button" @click="$emit('open-nav-link', 'showAddStyleModal')">Add Style</button>
+        <a v-if="!user.username" href="/login">Login</a>
+        <button v-else class="link" type="button">{{ user.username }}</button>
       </nav>
     </div>
   </header>
@@ -17,6 +19,13 @@
 <script>
 export default {
   name: 'AppHeader',
+  props: {
+    user: {
+      type: Object,
+      required: true,
+      default: () => {}
+    }
+  },
   data() {
     return {
       menuIsActive: false
@@ -70,7 +79,7 @@ header {
     width: 2rem;
     height: 2rem;
 
-    @include media-size-mobile {
+    @include media-size-tablet {
       display: inline-block;
     }
 
@@ -100,11 +109,12 @@ header {
   }
 
   nav {
-    button {
+    button,
+    a {
       margin-left: 1.5rem;
     }
 
-    @include media-size-mobile {
+    @include media-size-tablet {
       display: flex;
       flex-basis: 100%;
       flex-direction: column;
@@ -113,7 +123,8 @@ header {
       animation: slide-in 0.5s forwards;
       overflow: hidden;
 
-      button {
+      button,
+      a {
         margin-top: 0.75rem;
         margin-left: 0rem;
       }
@@ -141,12 +152,12 @@ header {
       max-height: 0;
     }
     to {
-      max-height: 5rem;
+      max-height: 10rem;
     }
   }
   @keyframes slide-in {
     from {
-      max-height: 5rem;
+      max-height: 10rem;
     }
     to {
       max-height: 0;
diff --git a/src/src/components/StyleCard.vue b/src/src/components/StyleCard.vue
index 5f82660..71dd37b 100644
--- a/src/src/components/StyleCard.vue
+++ b/src/src/components/StyleCard.vue
@@ -1,7 +1,16 @@
 <template>
   <div class="style-card">
     <div class="image-container">
-      <img v-if="styleData.preview" :src="styleData.preview" :alt="`Preview of ${styleData.name} style`" />
+      <img
+        v-if="styleData.customPreview"
+        :src="styleData.customPreview"
+        :alt="`Preview of ${styleData.customName || styleData.name} style`"
+      />
+      <img
+        v-else-if="styleData.preview"
+        :src="styleData.preview"
+        :alt="`Preview of ${styleData.customName || styleData.name} style`"
+      />
       <img v-else class="no-image" src="@/images/no-image.png" alt="No preview" />
       <a
         class="button style-button-filled"
@@ -15,7 +24,7 @@
     </div>
 
     <div class="data" @click="$emit('open', $props.styleData)">
-      <div class="name">{{ removeDashes(styleData.name) }}</div>
+      <div class="name">{{ styleData.customName || removeDashes(styleData.name) }}</div>
       <div>by {{ styleData.owner }}</div>
       <div class="footer">
         <span>{{ pluralize(styleData.stargazers, 'star') }}</span>
diff --git a/src/src/components/dialogs/PrivacyPolicyDialog.vue b/src/src/components/dialogs/PrivacyPolicyDialog.vue
index 2f182ff..07d2b05 100644
--- a/src/src/components/dialogs/PrivacyPolicyDialog.vue
+++ b/src/src/components/dialogs/PrivacyPolicyDialog.vue
@@ -1,8 +1,9 @@
 <template>
   <base-dialog v-if="open" size="large" @close="$emit('close')">
     <template>
-      <div class="dialog-title">Privacy Policy</div>
+      <h1 class="dialog-title">Privacy Policy</h1>
 
+      <h2>Privacy Policy for StyleBase</h2>
       <p>
         This Privacy Policy document contains types of information that is collected and recorded by StyleBase,
         accessible from https://stylebase.cc, and how we use it.
@@ -16,6 +17,18 @@
         to the information that they shared and/or collect in StyleBase. This policy is not applicable to any
         information collected offline or via channels other than this website.
       </p>
+
+      <h2>Information we collect</h2>
+      <p>
+        The personal information that you are asked to provide, and the reasons why you are asked to provide it, will be
+        made clear to you at the point we ask you to provide your personal information.
+      </p>
+      <p>
+        If you contact us, we may receive additional information about you such as your name, email address, the
+        contents of the message and/or attachments you may send us, and any other information you may choose to provide.
+      </p>
+
+      <h2>Log Files</h2>
       <p>
         StyleBase follows a standard procedure of using log files. These files log visitors when they visit websites.
         The information collected by log files include internet protocol (IP) addresses, browser type, Internet Service
@@ -23,6 +36,8 @@
         linked to any information that is personally identifiable. The purpose of the information is for analyzing
         trends, administering the site and gathering demographic information.
       </p>
+
+      <h2>Cookies</h2>
       <p>
         Like any other website, StyleBase uses 'cookies'. These cookies are used to store information including the
         pages on the website that the visitor accessed or visited. The information is used to optimize the users'
@@ -32,6 +47,8 @@
         For more general information on cookies, please read the "What Are Cookies" article on
         <a href="https://www.cookieconsent.com/what-are-cookies/">Cookie Consent website</a>.
       </p>
+
+      <h2>Consent</h2>
       <p>By using our website, you hereby consent to our Privacy Policy.</p>
 
       <div class="dialog-buttons">
diff --git a/src/src/components/dialogs/StyleInfoDialog.vue b/src/src/components/dialogs/StyleInfoDialog.vue
index 531f541..efc172c 100644
--- a/src/src/components/dialogs/StyleInfoDialog.vue
+++ b/src/src/components/dialogs/StyleInfoDialog.vue
@@ -4,7 +4,7 @@
       <div class="style-info-header">
         <div class="style-info-title">
           <a :href="`${styleData.url}`" rel="noopener" target="_blank">
-            {{ removeDashes(styleData.name) }}
+            {{ styleData.customName || removeDashes(styleData.name) }}
           </a>
           <span class="owner">
             by
@@ -19,8 +19,25 @@
       <!-- eslint-disable-next-line vue/no-v-html -->
       <div class="style-info-description" v-html="parseEmoji(styleData.description)"></div>
 
+      <div v-if="authorizedUser" class="style-edit">
+        <input
+          :value="styleData.customName"
+          type="text"
+          placeholder="Style name"
+          @change="(e) => (customName = e.target.value)"
+        />
+        <input
+          :value="styleData.customPreview"
+          type="text"
+          placeholder="Preview url"
+          @change="(e) => (customPreview = e.target.value)"
+        />
+        <button class="style-button" @click="editStyle">Edit</button>
+      </div>
+
       <div class="style-info-image">
-        <img v-if="styleData.preview" :src="styleData.preview" />
+        <img v-if="styleData.customPreview" :src="styleData.customPreview" />
+        <img v-else-if="styleData.preview" :src="styleData.preview" />
         <img v-else class="no-image" src="@/images/no-image.png" alt="No preview" />
         <div v-if="styleData.license" class="style-license">{{ styleData.license }}</div>
       </div>
@@ -59,6 +76,8 @@
 </template>
 
 <script>
+import axios from 'axios';
+
 import { styleInfoMixin } from '@/mixins';
 
 import BaseDialog from '@/components/dialogs/BaseDialog';
@@ -79,6 +98,52 @@ export default {
       type: Object,
       required: true,
       default: () => {}
+    },
+    user: {
+      type: Object,
+      required: true,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      authorizedUser: false,
+      customName: this.styleData.customName,
+      customPreview: this.styleData.customPreview
+    };
+  },
+  watch: {
+    styleData() {
+      this.checkAuthorization();
+    },
+    user() {
+      this.checkAuthorization();
+    }
+  },
+  methods: {
+    checkAuthorization() {
+      const isOwner = this.styleData.owner === this.user.username;
+      const isAdmin = this.user.role === 'Admin';
+      this.authorizedUser = isOwner || isAdmin;
+    },
+    editStyle() {
+      axios
+        .put('/api/style/edit', {
+          url: this.styleData.url,
+          customName: this.customName,
+          customPreview: this.customPreview
+        })
+        .then((response) => {
+          alert(`"${response.data.style.name}" style updated`);
+          this.$emit('update-styles');
+          this.$emit('close');
+        })
+        .catch((error) => {
+          alert(error.response.data.error);
+        })
+        .finally(() => {
+          this.$gtag.event('edit style request', { event_category: 'style info dialog' });
+        });
     }
   }
 };
@@ -152,6 +217,30 @@ export default {
   }
 }
 
+.style-edit {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 1.5rem 0;
+
+  input,
+  button {
+    margin: 0.5rem 0;
+  }
+
+  input {
+    flex: 1;
+    box-sizing: border-box;
+    height: 50px;
+    margin-right: 1rem;
+    padding: 0 15px;
+  }
+
+  button {
+    flex: 0 1 auto;
+  }
+}
+
 .style-info-content {
   ul {
     margin: 0;
diff --git a/src/src/views/Home.vue b/src/src/views/Home.vue
index df9d3f1..7527813 100644
--- a/src/src/views/Home.vue
+++ b/src/src/views/Home.vue
@@ -59,7 +59,9 @@
     <style-info-dialog
       :open="showStyleInfoModal"
       :style-data="selectedStyle"
+      :user="user"
       @search-by-owner="(value) => (ownerFilter = value)"
+      @update-styles="getStyles"
       @close="closeStyleModal"
     />
   </main>
@@ -83,6 +85,13 @@ export default {
   directives: {
     debounce
   },
+  props: {
+    user: {
+      type: Object,
+      required: true,
+      default: () => {}
+    }
+  },
   data() {
     return {
       styles: [],