diff --git a/CSS/themes/petio/aquamarine.css b/CSS/themes/petio/aquamarine.css
new file mode 100644
index 00000000..9eb69f34
--- /dev/null
+++ b/CSS/themes/petio/aquamarine.css
@@ -0,0 +1,28 @@
+
+/* dP dP dP */
+/* 88 88 88 */
+/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
+/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */
+/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */
+/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */
+/* 88 */
+/* dP */
+
+/* Made by @gilbN */
+/* https://github.com/gilbN/theme.park */
+
+/* MOVIEMATCH AQUAMARINE THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/moviematch/moviematch-base.css);
+:root {
+ --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+ --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+ --text-color: #eee;
+ --text-color-hover: #fff;
+ --button-color: #009688;
+ --button-color-hover: #12afa0;
+ --button-text: #eee;
+ --button-text-hover: #FFF;
+ --accent-color: #12afa0;
+ --accent-color-hover: #fff;
+ --link-color: #0ed2bf;
+}
\ No newline at end of file
diff --git a/CSS/themes/petio/dark.css b/CSS/themes/petio/dark.css
new file mode 100644
index 00000000..ce5a06fc
--- /dev/null
+++ b/CSS/themes/petio/dark.css
@@ -0,0 +1,28 @@
+
+/* dP dP dP */
+/* 88 88 88 */
+/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
+/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */
+/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */
+/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */
+/* 88 */
+/* dP */
+
+/* Made by @gilbN */
+/* https://github.com/gilbN/theme.park */
+
+/* MOVIEMATCH DARK THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/moviematch/moviematch-base.css);
+:root {
+ --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+ --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+ --text-color: #b7b7b7;
+ --text-color-hover: #fff;
+ --button-color: hsla(0,0%,100%,.15);
+ --button-color-hover: hsla(0,0%,100%,.30);
+ --button-text: #eee;
+ --button-text-hover: #fff;
+ --accent-color: #646464;
+ --accent-color-hover: #ffffff73;
+ --link-color: #fff;
+}
\ No newline at end of file
diff --git a/CSS/themes/petio/hotline.css b/CSS/themes/petio/hotline.css
new file mode 100644
index 00000000..9306208a
--- /dev/null
+++ b/CSS/themes/petio/hotline.css
@@ -0,0 +1,28 @@
+
+/* dP dP dP */
+/* 88 88 88 */
+/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
+/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */
+/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */
+/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */
+/* 88 */
+/* dP */
+
+/* Made by @gilbN */
+/* https://github.com/gilbN/theme.park */
+
+/* MOVIEMATCH HOTLINE THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/moviematch/moviematch-base.css);
+:root {
+ --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;
+ --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;
+ --text-color: #eee;
+ --text-color-hover: #fff;
+ --button-color: hsla(0,0%,100%,.15);
+ --button-color-hover: hsla(0,0%,100%,.30);
+ --button-text: #eee;
+ --button-text-hover: #fff;
+ --accent-color: #F44336;
+ --accent-color-hover: #0b3161;
+ --link-color: #0b3161;
+}
\ No newline at end of file
diff --git a/CSS/themes/petio/organizr-dark.css b/CSS/themes/petio/organizr-dark.css
new file mode 100644
index 00000000..68164097
--- /dev/null
+++ b/CSS/themes/petio/organizr-dark.css
@@ -0,0 +1,28 @@
+
+/* dP dP dP */
+/* 88 88 88 */
+/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
+/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */
+/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */
+/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */
+/* 88 */
+/* dP */
+
+/* Made by @gilbN */
+/* https://github.com/gilbN/theme.park */
+
+/* MOVIEMATCH ORGANIZR-DARK THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/moviematch/moviematch-base.css);
+:root {
+ --main-bg-color: #1f1f1f;
+ --modal-bg-color: #1b1b1b;
+ --text-color: #96a2b4;
+ --text-color-hover: #fff;
+ --button-color: #2cabe3;
+ --button-color-hover: rgb(44 171 227 / .8);
+ --button-text: #eee;
+ --button-text-hover: #fff;
+ --accent-color:#2cabe3;
+ --accent-color-hover: #fff;
+ --link-color: #2cabe3;
+}
\ No newline at end of file
diff --git a/CSS/themes/petio/petio-base.css b/CSS/themes/petio/petio-base.css
new file mode 100644
index 00000000..23482bb4
--- /dev/null
+++ b/CSS/themes/petio/petio-base.css
@@ -0,0 +1,193 @@
+/* dP dP dP */
+/* 88 88 88 */
+/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
+/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */
+/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */
+/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */
+/* 88 */
+/* dP */
+
+/* Made by @gilbN */
+/* https://github.com/gilbN/theme.park */
+
+* {
+ outline: none;
+}
+
+body {
+ background: var(--main-bg-color);
+ color: var(--text-color)
+}
+
+/* TEXT COLOR */
+.sub-title, .widget--title,p{
+ color: var(--text-color);
+}
+h1, h2, h3, h4, h5, h6 {
+ color: #fff;
+}
+.settings--menu--item.active p {
+ color: var(--accent-color);
+}
+.settings--menu--item.active {
+ border-bottom: 1px solid var(--accent-color);
+}
+.settings--menu--item.active .icon svg path {
+ fill: var(--accent-color);
+}
+/* MENU */
+/* @media (min-width: 1100px) {
+.sidebar--inner {
+ display: block;
+ background: rgb(0 0 0 / 25%);
+}
+} */
+.menu {
+ background: rgb(0 0 0 / 25%);
+}
+
+@media (max-width: 1099.98px) {
+.sidebar--inner,
+.sidebar--scroll {
+ background: var(--modal-bg-color);
+}
+}
+@media (min-width: 1100px) {
+.page .sidebar {
+ background: rgb(0 0 0 / 25%);
+}
+}
+
+@media (max-width: 991.98px) {
+.menu.open {
+background: var(--modal-bg-color)
+}
+}
+.mob-menu-top {
+ background: var(--modal-bg-color);
+}
+.menu--item.active {
+ background: rgba(255, 255, 255, .15);
+ border-right: 4px solid var(--accent-color);
+}
+@media (min-width: 1100px) {
+.sidebar--item.active {
+ border-top: none !important;
+ border-right: 4px solid var(--accent-color);
+}
+}
+.sidebar--item.active {
+ background: rgba(255, 255, 255, .15);
+ border-top: 4px solid var(--accent-color);
+}
+.menu--item.active p,
+.media-content .media-crew .sidebar--item.active a, .sidebar--item.active .media-content .media-crew a, .sidebar--item.active p {
+ color: var(--accent-color);
+}
+.menu--item.active .icon svg path,
+.sidebar--item.active .icon svg path {
+ fill: var(--accent-color);
+}
+.mob-menu-top .nav-toggle span {
+ background: var(--accent-color);
+}
+/* LINKS */
+a, .table-action,.session--toggle,p a,.profile-page .logout {
+ color: var(--link-color);
+}
+
+/* OTHER */
+.widget--item hr {
+ background: rgb(255 255 255 / 50%);
+}
+.filter--add:hover {
+ color: var(--accent-color);
+ border-color: var(--accent-color);
+}
+.filter--item {
+ background: rgb(0 0 0 / 25%);
+}
+/* DASH */
+.session--prog, .session--media .card .playback-status {
+ background: var(--accent-color);
+}
+.card--inner:hover .image-wrap {
+ -webkit-filter: brightness(.7);
+ filter: brightness(.7);
+ -webkit-box-shadow: 0 0 0 2px var(--accent-color), 0 5px 10px 0 rgb(0 0 0 / 30%);
+ -moz-box-shadow: 0 0 0 2px var(--accent-color),0 5px 10px 0 rgba(0,0,0,.3);
+ box-shadow: 0 0 0 2px var(--accent-color), 0 5px 10px 0 rgb(0 0 0 / 30%);
+}
+.push-msg--item {
+ color: #fff;
+}
+
+/* BUTTONS */
+
+.btn, .btn__square {
+ background: var(--button-color);
+ color: var(--button-text);
+ border: 2px solid var(--button-color);
+}
+.btn:hover, .btn__square:hover {
+ background: var(--button-color-hover);
+ color: var(--button-text-hover);
+ border: 2px solid var(--button-color-hover);
+}
+.btn.bad:hover {
+ border: 2px solid #e95151;
+}
+
+/* TABLES */
+.generic-table tr:not(.child):not(.sub) td {
+ border-bottom: 1px solid rgba(255, 255, 255, .1);
+}
+.generic-table tr:not(.child):not(.sub) th {
+ text-align: left;
+ padding: 5px;
+ border-bottom: 1px solid rgba(255, 255, 255, .4);
+}
+
+/* MODALS */
+.modal--inner {
+ background: var(--modal-bg-color);
+}
+.modal--top {
+ background: var(--modal-bg-color);
+}
+/* FORMS & INPUTS */
+input[type=checkbox]:checked:after {
+ background: var(--accent-color)
+}
+input:not([type=checkbox]):not(.styled-input--input):not([type=file]):focus {
+ border-bottom: 2px solid var(--accent-color);
+ background: rgba(255, 255, 255, .2);
+ color: var(--text-color-hover)
+}
+input:not([type=checkbox]):not(.styled-input--input):not([type=file]),
+.login-wrap input {
+ border-bottom: 2px solid rgba(0,0,0,0);
+ color: var(--text-color);
+ background: rgb(255 255 255 / 10%);
+}
+
+/* PLACEHOLDER TEXT */
+::placeholder {
+ color: var(--text) !important;
+ opacity: .5;
+}
+
+:-moz-placeholder {
+ color: var(--text) !important;
+ opacity: .5;
+}
+
+:-ms-input-placeholder {
+ color: var(--text) !important;
+ opacity: .5;
+}
+
+::-webkit-input-placeholder {
+ color: var(--text) !important;
+ opacity: .5;
+}
diff --git a/CSS/themes/petio/space-gray.css b/CSS/themes/petio/space-gray.css
new file mode 100644
index 00000000..02253ba1
--- /dev/null
+++ b/CSS/themes/petio/space-gray.css
@@ -0,0 +1,28 @@
+
+/* dP dP dP */
+/* 88 88 88 */
+/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
+/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */
+/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */
+/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */
+/* 88 */
+/* dP */
+
+/* Made by @gilbN */
+/* https://github.com/gilbN/theme.park */
+
+/* MOVIEMATCH SPACE GRAY THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/moviematch/moviematch-base.css);
+:root {
+ --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;
+ --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;
+ --text-color: #eee;
+ --text-color-hover: #fff;
+ --button-color: #607D8B;
+ --button-color-hover: #81a6b7;
+ --button-text: #eee;
+ --button-text-hover: #fff;
+ --accent-color: #81a6b7;
+ --accent-color-hover: #607D8B;
+ --link-color: #9adfff;
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 5a33f540..aef2f014 100644
--- a/README.md
+++ b/README.md
@@ -238,12 +238,17 @@
Moviematch
+
+ 
+Petio
+ |
+
## [Adding your own theme colors](https://github.com/gilbN/theme.park/wiki/Creating-your-own-themes)
diff --git a/Screenshots/petio/aquamarine.jpg b/Screenshots/petio/aquamarine.jpg
new file mode 100644
index 00000000..eb9dab52
Binary files /dev/null and b/Screenshots/petio/aquamarine.jpg differ
diff --git a/Screenshots/petio/dark.jpg b/Screenshots/petio/dark.jpg
new file mode 100644
index 00000000..c570cfce
Binary files /dev/null and b/Screenshots/petio/dark.jpg differ
diff --git a/Screenshots/petio/hotline.jpg b/Screenshots/petio/hotline.jpg
new file mode 100644
index 00000000..18724ffa
Binary files /dev/null and b/Screenshots/petio/hotline.jpg differ
diff --git a/Screenshots/petio/organizr-dark.jpg b/Screenshots/petio/organizr-dark.jpg
new file mode 100644
index 00000000..b435bfdb
Binary files /dev/null and b/Screenshots/petio/organizr-dark.jpg differ
diff --git a/Screenshots/petio/space-gray.jpg b/Screenshots/petio/space-gray.jpg
new file mode 100644
index 00000000..5186664a
Binary files /dev/null and b/Screenshots/petio/space-gray.jpg differ