diff --git a/README.md b/README.md
index 9501d92..c000aff 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,50 @@
 	Catppuccin is a community-driven pastel theme that aims to be the middle ground between low and high contrast themes. It consists of a soothing warm palette with 22 eye-candy colors perfect for coding, designing, and much more! In addition, this repository tracks the development of the actual color palette, organization-wide assets, resources and code samples for maintainers/developers.
 </p>
 
+
+### 🧠 Design Philosophy
+
+-   **Colorful is better than colorless**: the colorfulness of something contributes to the distinction amongst the parts of that _something_, making it marginally easier to understand how things are structured.
+-   **There should be balance**: not too dull, not too bright. Suitability under various light conditions is a most.
+-   **Harmony is superior to dissonance**: vivacious colors must complement each other.
+
+### 🎨 Palette
+
+**Catppuccin** constist of two main color palettes. All the details can be found below.<br>
+To make the best use them please refer to the [Styleguide](https://github.com/catppuccin/style-guide).
+<br><img src="assets/misc/transparent.png" height="10" width="0" />
+
+#### Morning
+|   | Name      | Hex       | RGB             | HSL              | CMYK                |
+| - | --------- | --------- | --------------- | ---------------- | ------------------- |
+| <img src="assets/palette/circles/flamingo.png" height="23" width="23"/>  | Flamingo  | `#F2CDCD` | `242, 205, 205` | `0, 59%, 88%`    | `0%, 15%, 15%, 5%`  |
+| <img src="assets/palette/circles/mauve.png" height="23" width="23"/>     | Mauve     | `#DDB6F2` | `221, 182, 242` | `279, 70%, 83%`  | `9%, 25%, 0%, 5%`   |
+| <img src="assets/palette/circles/pink.png" height="23" width="23"/>      | Pink      | `#F5C2E7` | `245, 194, 231` | `316, 72%, 86%`  | `0%, 21%, 6%, 4%`   |
+| <img src="assets/palette/circles/maroon.png" height="23" width="23"/>    | Maroon    | `#E8A2AF` | `232, 162, 175` | `349, 60%, 77%`  | `0%, 30%, 25%, 9%`  |
+| <img src="assets/palette/circles/red.png" height="23" width="23"/>       | Red       | `#F28FAD` | `242, 143, 173` | `342, 79%, 75%`  | `0%, 41%, 29%, 5%`  |
+| <img src="assets/palette/circles/peach.png" height="23" width="23"/>     | Peach     | `#F8BD96` | `248, 189, 150` | `24, 88%, 78%`   | `0%, 24%, 40%, 3%`  |
+| <img src="assets/palette/circles/yellow.png" height="23" width="23"/>    | Yellow    | `#FAE3B0` | `250, 227, 176` | `41, 88%, 84%`   | `0%, 9%, 30%, 2%`   |
+| <img src="assets/palette/circles/green.png" height="23" width="23"/>     | Green     | `#ABE9B3` | `171, 233, 179` | `128, 58%, 79%`  | `27%, 0%, 23%, 9%`  |
+| <img src="assets/palette/circles/teal.png" height="23" width="23"/>      | Teal      | `#B5E8E0` | `181, 232, 224` | `171, 53%, 81%`  | `22%, 0%, 3%, 9%`   |
+| <img src="assets/palette/circles/blue.png" height="23" width="23"/>      | Blue      | `#96CDFB` | `150, 205, 251` | `207, 93%, 79%`  | `40%, 18%, 0%, 2%`  |
+| <img src="assets/palette/circles/sky.png" height="23" width="23"/>       | Sky       | `#89DCEB` | `137, 220, 235` | `189, 71%, 73%`  | `42%, 6%, 0%, 8%`   |
+<img src="assets/misc/transparent.png" height="10" width="0" />
+
+#### Night
+|   | Name      | Hex       | RGB             | HSL              | CMYK                |
+| - | --------- | --------- | --------------- | ---------------- | ------------------- |
+| <img src="assets/palette/circles/black0.png" height="23" width="23"/>    | Black 0   | `#161320` | `22, 19, 32`    | `254, 25%, 10%`  | `31%, 41%, 0%, 87%` |
+| <img src="assets/palette/circles/black1.png" height="23" width="23"/>    | Black 1   | `#1A1826` | `26, 24, 38`    | `249, 23%, 12%`  | `32%, 37%, 0%, 85%` |
+| <img src="assets/palette/circles/black2.png" height="23" width="23"/>    | Black 2   | `#1E1E2E` | `30, 30, 46`    | `240, 21%, 15%%` | `35%, 35%, 0%, 82%` |
+| <img src="assets/palette/circles/black3.png" height="23" width="23"/>    | Black 3   | `#302D41` | `48, 45, 65`    | `249, 18%, 22%`  | `26%, 31%, 0%, 75%` |
+| <img src="assets/palette/circles/black4.png" height="23" width="23"/>    | Black 4   | `#575268` | `87, 82, 104`   | `254, 12%, 36%`  | `16%, 21%, 0%, 59%` |
+| <img src="assets/palette/circles/gray0.png" height="23" width="23"/>     | Gray 0    | `#6E6C7E` | `110, 108, 126` | `247, 8%, 46%`   | `13%, 14%, 0%, 51%` |
+| <img src="assets/palette/circles/gray1.png" height="23" width="23"/>     | Gray 1    | `#988BA2` | `152, 139, 162` | `274, 11%, 59%`  | `6%, 14%, 0%, 36%`  |
+| <img src="assets/palette/circles/gray2.png" height="23" width="23"/>     | Gray 2    | `#C3BAC6` | `195, 186, 198` | `285, 10%, 75%`  | `2%, 6%, 0%, 22%`   |
+| <img src="assets/palette/circles/white.png" height="23" width="23"/>     | White     | `#D9E0EE` | `217, 224, 238` | `220, 38%, 89%`  | `9%, 6%, 0%, 7%`    |
+| <img src="assets/palette/circles/lavender.png" height="23" width="23"/>  | Lavender  | `#C9CBFF` | `201, 203, 255` | `238, 100%, 89%` | `21%, 20%, 0%, 0%`  |
+| <img src="assets/palette/circles/rosewater.png" height="23" width="23"/> | Rosewater | `#F5E0DC` | `245, 224, 220` | `10, 56%, 91%`   | `0%, 9%, 10%, 4%`   |
+
 ### Ports and more!
 
 Catppuccin is available for various apps and in different formats. Here is a list of them:
@@ -94,49 +138,6 @@ Catppuccin is available for various apps and in different formats. Here is a lis
 -   [Mako](https://github.com/catppuccin/mako)
 -   [Fcitx5](https://github.com/catppuccin/fcitx5)
 
-### 🎨 Palette
-
-**Catppuccin** constist of two main color palettes. All the details can be found below.<br>
-To make the best use them please refer to the [Styleguide](https://github.com/catppuccin/style-guide).
-<br><img src="assets/misc/transparent.png" height="10" width="0" />
-
-#### Morning
-|   | Name      | Hex       | RGB             | HSL              | CMYK                |
-| - | --------- | --------- | --------------- | ---------------- | ------------------- |
-| <img src="assets/palette/circles/flamingo.png" height="23" width="23"/>  | Flamingo  | `#F2CDCD` | `242, 205, 205` | `0, 59%, 88%`    | `0%, 15%, 15%, 5%`  |
-| <img src="assets/palette/circles/mauve.png" height="23" width="23"/>     | Mauve     | `#DDB6F2` | `221, 182, 242` | `279, 70%, 83%`  | `9%, 25%, 0%, 5%`   |
-| <img src="assets/palette/circles/pink.png" height="23" width="23"/>      | Pink      | `#F5C2E7` | `245, 194, 231` | `316, 72%, 86%`  | `0%, 21%, 6%, 4%`   |
-| <img src="assets/palette/circles/maroon.png" height="23" width="23"/>    | Maroon    | `#E8A2AF` | `232, 162, 175` | `349, 60%, 77%`  | `0%, 30%, 25%, 9%`  |
-| <img src="assets/palette/circles/red.png" height="23" width="23"/>       | Red       | `#F28FAD` | `242, 143, 173` | `342, 79%, 75%`  | `0%, 41%, 29%, 5%`  |
-| <img src="assets/palette/circles/peach.png" height="23" width="23"/>     | Peach     | `#F8BD96` | `248, 189, 150` | `24, 88%, 78%`   | `0%, 24%, 40%, 3%`  |
-| <img src="assets/palette/circles/yellow.png" height="23" width="23"/>    | Yellow    | `#FAE3B0` | `250, 227, 176` | `41, 88%, 84%`   | `0%, 9%, 30%, 2%`   |
-| <img src="assets/palette/circles/green.png" height="23" width="23"/>     | Green     | `#ABE9B3` | `171, 233, 179` | `128, 58%, 79%`  | `27%, 0%, 23%, 9%`  |
-| <img src="assets/palette/circles/teal.png" height="23" width="23"/>      | Teal      | `#B5E8E0` | `181, 232, 224` | `171, 53%, 81%`  | `22%, 0%, 3%, 9%`   |
-| <img src="assets/palette/circles/blue.png" height="23" width="23"/>      | Blue      | `#96CDFB` | `150, 205, 251` | `207, 93%, 79%`  | `40%, 18%, 0%, 2%`  |
-| <img src="assets/palette/circles/sky.png" height="23" width="23"/>       | Sky       | `#89DCEB` | `137, 220, 235` | `189, 71%, 73%`  | `42%, 6%, 0%, 8%`   |
-<img src="assets/misc/transparent.png" height="10" width="0" />
-
-#### Night
-|   | Name      | Hex       | RGB             | HSL              | CMYK                |
-| - | --------- | --------- | --------------- | ---------------- | ------------------- |
-| <img src="assets/palette/circles/black0.png" height="23" width="23"/>    | Black 0   | `#161320` | `22, 19, 32`    | `254, 25%, 10%`  | `31%, 41%, 0%, 87%` |
-| <img src="assets/palette/circles/black1.png" height="23" width="23"/>    | Black 1   | `#1A1826` | `26, 24, 38`    | `249, 23%, 12%`  | `32%, 37%, 0%, 85%` |
-| <img src="assets/palette/circles/black2.png" height="23" width="23"/>    | Black 2   | `#1E1E2E` | `30, 30, 46`    | `240, 21%, 15%%` | `35%, 35%, 0%, 82%` |
-| <img src="assets/palette/circles/black3.png" height="23" width="23"/>    | Black 3   | `#302D41` | `48, 45, 65`    | `249, 18%, 22%`  | `26%, 31%, 0%, 75%` |
-| <img src="assets/palette/circles/black4.png" height="23" width="23"/>    | Black 4   | `#575268` | `87, 82, 104`   | `254, 12%, 36%`  | `16%, 21%, 0%, 59%` |
-| <img src="assets/palette/circles/gray0.png" height="23" width="23"/>     | Gray 0    | `#6E6C7E` | `110, 108, 126` | `247, 8%, 46%`   | `13%, 14%, 0%, 51%` |
-| <img src="assets/palette/circles/gray1.png" height="23" width="23"/>     | Gray 1    | `#988BA2` | `152, 139, 162` | `274, 11%, 59%`  | `6%, 14%, 0%, 36%`  |
-| <img src="assets/palette/circles/gray2.png" height="23" width="23"/>     | Gray 2    | `#C3BAC6` | `195, 186, 198` | `285, 10%, 75%`  | `2%, 6%, 0%, 22%`   |
-| <img src="assets/palette/circles/white.png" height="23" width="23"/>     | White     | `#D9E0EE` | `217, 224, 238` | `220, 38%, 89%`  | `9%, 6%, 0%, 7%`    |
-| <img src="assets/palette/circles/lavender.png" height="23" width="23"/>  | Lavender  | `#C9CBFF` | `201, 203, 255` | `238, 100%, 89%` | `21%, 20%, 0%, 0%`  |
-| <img src="assets/palette/circles/rosewater.png" height="23" width="23"/> | Rosewater | `#F5E0DC` | `245, 224, 220` | `10, 56%, 91%`   | `0%, 9%, 10%, 4%`   |
-
-### 🧠 Design Philosophy
-
--   **Colorful is better than colorless**: the colorfulness of something contributes to the distinction amongst the parts of that _something_, making it marginally easier to understand how things are structured.
--   **There should be balance**: not too dull, not too bright. Suitability under various light conditions is a most.
--   **Harmony is superior to dissonance**: vivacious colors must complement each other.
-
 ### 👐 Contribute
 
 See [CONTRIBUTING.md](https://github.com/catppuccin/catppuccin/blob/dev/CONTRIBUTING.md).