diff --git a/docs/docs/contributors/developers-guide/general-guidelines.md b/docs/docs/contributors/developers-guide/general-guidelines.md
index 4a707283a..5604f766d 100644
--- a/docs/docs/contributors/developers-guide/general-guidelines.md
+++ b/docs/docs/contributors/developers-guide/general-guidelines.md
@@ -2,4 +2,6 @@
## Python
-## Vue
\ No newline at end of file
+## Vue
+
+[See The Style Guide](/mealie/contributors/developers-guide/style-guide/)
\ No newline at end of file
diff --git a/docs/docs/contributors/developers-guide/style-guide.md b/docs/docs/contributors/developers-guide/style-guide.md
new file mode 100644
index 000000000..342374c64
--- /dev/null
+++ b/docs/docs/contributors/developers-guide/style-guide.md
@@ -0,0 +1,33 @@
+# Style Guide
+
+!!! note
+ Unifying styles across the application is an ongoing process, we are working on making the site more consistent.
+
+## Button Guidelines
+
+1. Buttons should follow the general color/icon scheme as outlined.
+2. All buttons should have an icon on the left side of the button and text on the right.
+3. Primary action buttons should be the default Vuetify styling.
+4. Primary action buttons should be right aligned
+5. Secondary buttons should be `text` or `outlined`. Text is preferred
+6. Other buttons should generally be "info" or "primary" color and can take any style type depending on context
+
+### Button Colors and Icons
+
+| Type | Color | Icon |
+| ----------- | :------------------ | :------------------------------------------------- |
+| Default | `info` or `primary` | None |
+| Create/New | `success` | `mdi-plus` or `$globals.icons.create` |
+| Update/Save | `success` | `mdi-save-content` or `$globals.icons.save` |
+| Edit | `info` | `mdi-square-edit-outline` or `$globals.icons.edit` |
+
+### Example
+```html
+