diff --git a/includes/css/colors/catppuccin-frappe.css b/includes/css/colors/catppuccin-frappe.css
new file mode 100644
index 0000000..70810bb
--- /dev/null
+++ b/includes/css/colors/catppuccin-frappe.css
@@ -0,0 +1,180 @@
+/* Catppuccin Frappé */
+
+#ps-logo {
+    fill: #8caaee !important;
+}
+
+#initial-screen.compact {
+    background-color: #292c3c !important;
+}
+
+.bg-gray-900 {
+    background-color: #303446;
+}
+
+.bg-gray-800 {
+    background-color: #292c3c;
+}
+
+.bg-gray-700 {
+    background-color: #414559;
+}
+
+.bg-gray-700\/60 {
+    background-color: rgba(65, 69, 89, 0.6);
+}
+
+.bg-black\/50 {
+    background-color: rgba(35, 38, 52, 0.5);
+}
+
+.bg-white\/5 {
+    background-color: rgba(198, 160, 246, 0.05);
+}
+
+.bg-white\/10 {
+    background-color: rgba(198, 160, 246, 0.1);
+}
+
+.bg-blue-600 {
+    background-color: #8caaee;
+}
+
+.hover\:bg-blue-700:hover {
+    background-color: #7b9cdb;
+}
+
+.text-blue-500 {
+    color: #8caaee;
+}
+
+.border-blue-500 {
+    border-color: #8caaee;
+}
+
+.focus-within\:border-blue-500:focus-within {
+    border-color: #8caaee;
+}
+
+.accent-blue-500 {
+    accent-color: #8caaee;
+}
+
+.focus\:ring-2:focus,
+.focus\:ring-blue-400:focus {
+    box-shadow: 0 0 0 2px #8caaee;
+}
+
+.text-white {
+    color: #c6d0f5;
+}
+
+.text-white\/70 {
+    color: rgba(198, 208, 245, 0.7);
+}
+
+.text-white\/80 {
+    color: rgba(198, 208, 245, 0.8);
+}
+
+.text-white\/90 {
+    color: rgba(198, 208, 245, 0.9);
+}
+
+.text-gray-600 {
+    color: #949cbb;
+}
+
+.hover\:text-white:hover {
+    color: #c6d0f5;
+}
+
+.border-gray-200 {
+    border-color: #626880;
+}
+
+.border-gray-700 {
+    border-color: #51576d;
+}
+
+.border-transparent {
+    border-color: transparent;
+}
+
+.hover\:bg-gray-700:hover {
+    background-color: #414559;
+}
+
+.hover\:bg-white\/10:hover {
+    background-color: rgba(198, 208, 245, 0.1);
+}
+
+.hover\:text-gray-600:hover {
+    color: #949cbb;
+}
+
+.hover\:border-gray-300:hover {
+    border-color: #626880;
+}
+
+input[type="radio"]:checked {
+    border: none;
+    background: #8caaee;
+}
+
+.fwSelected {
+    background-color: #8caaee;
+    color: #303446;
+}
+
+::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #8caaee;
+    border-radius: 10px;
+}
+
+.category-tools {
+    background-color: rgba(166, 209, 137, 0.2);
+    color: #a6d189;
+    border: none !important;
+}
+
+.category-advanced {
+    background-color: rgba(231, 130, 132, 0.2);
+    color: #e78284;
+}
+
+.category-linux {
+    background-color: rgba(202, 158, 230, 0.2);
+    color: #ca9ee6;
+}
+
+.tabs ul {
+    border-color: #51576d;
+}
+
+.tabs button {
+    font-family: sans-serif;
+    border-color: transparent;
+    color: rgba(198, 208, 245, 0.8);
+}
+
+.tabs button[aria-selected="true"] {
+    border-color: #8caaee;
+    color: #8caaee;
+    border-bottom: 1px solid #8caaee;
+}
+
+.tabs button:not([aria-selected="true"]):hover {
+    color: #949cbb;
+    border-color: #626880;
+}
+
+.catppuccin-frappe {
+    color: #c6d0f5;
+    background: #292c3c;
+    border: 1px solid #51576d;
+}
\ No newline at end of file
diff --git a/includes/css/colors/catppuccin-latte.css b/includes/css/colors/catppuccin-latte.css
new file mode 100644
index 0000000..e723b31
--- /dev/null
+++ b/includes/css/colors/catppuccin-latte.css
@@ -0,0 +1,198 @@
+/* Catppuccin Latte
+ * Official palette:
+ * https://catppuccin.com/palette/
+ */
+
+#ps-logo {
+    fill: #1e66f5 !important;
+}
+
+#initial-screen.compact {
+    background-color: #e6e9ef !important;
+}
+
+/* Base */
+.bg-gray-900 {
+    background-color: #eff1f5;
+}
+
+.bg-gray-800 {
+    background-color: #e6e9ef;
+}
+
+.bg-gray-700 {
+    background-color: #ccd0da;
+}
+
+.bg-gray-700\/60 {
+    background-color: rgba(204, 208, 218, 0.6);
+}
+
+.bg-black\/50 {
+    background-color: rgba(76, 79, 105, 0.5);
+}
+
+.bg-white\/5 {
+    background-color: rgba(76, 79, 105, 0.05);
+}
+
+.bg-white\/10 {
+    background-color: rgba(76, 79, 105, 0.1);
+}
+
+/* Blue / primary */
+.bg-blue-600 {
+    background-color: #1e66f5;
+}
+
+.hover\:bg-blue-700:hover {
+    background-color: #1a5bd7;
+}
+
+.text-blue-500 {
+    color: #1e66f5;
+}
+
+.border-blue-500 {
+    border-color: #1e66f5;
+}
+
+.focus-within\:border-blue-500:focus-within {
+    border-color: #1e66f5;
+}
+
+.accent-blue-500 {
+    accent-color: #1e66f5;
+}
+
+.focus\:ring-2:focus,
+.focus\:ring-blue-400:focus {
+    box-shadow: 0 0 0 2px #7287fd;
+}
+
+/* Text */
+.text-white {
+    color: #4c4f69;
+}
+
+.text-white\/70 {
+    color: rgba(76, 79, 105, 0.7);
+}
+
+.text-white\/80 {
+    color: rgba(76, 79, 105, 0.8);
+}
+
+.text-white\/90 {
+    color: rgba(76, 79, 105, 0.9);
+}
+
+.text-gray-600 {
+    color: #6c6f85;
+}
+
+.hover\:text-white:hover {
+    color: #4c4f69;
+}
+
+/* Borders */
+.border-gray-200 {
+    border-color: #ccd0da;
+}
+
+.border-gray-700 {
+    border-color: #bcc0cc;
+}
+
+.border-blue-500 {
+    border-color: #1e66f5;
+}
+
+.border-transparent {
+    border-color: transparent;
+}
+
+/* Hover */
+.hover\:bg-gray-700:hover {
+    background-color: #ccd0da;
+}
+
+.hover\:bg-white\/10:hover {
+    background-color: rgba(76, 79, 105, 0.1);
+}
+
+.hover\:text-gray-600:hover {
+    color: #6c6f85;
+}
+
+.hover\:border-gray-300:hover {
+    border-color: #bcc0cc;
+}
+
+/* Radio */
+input[type="radio"]:checked {
+    border: none;
+    background: #1e66f5;
+}
+
+/* Firmware */
+.fwSelected {
+    background-color: #1e66f5;
+    color: #eff1f5;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #1e66f5;
+    border-radius: 10px;
+}
+
+/* Payload categories */
+.category-tools {
+    background-color: rgba(64, 160, 43, 0.2);
+    color: #40a02b;
+    border: none !important;
+}
+
+.category-advanced {
+    background-color: rgba(210, 15, 57, 0.2);
+    color: #d20f39;
+}
+
+.category-linux {
+    background-color: rgba(136, 57, 239, 0.2);
+    color: #8839ef;
+}
+
+/* Tabs */
+.tabs ul {
+    border-color: #bcc0cc;
+}
+
+.tabs button {
+    font-family: sans-serif;
+    border-color: transparent;
+    color: rgba(76, 79, 105, 0.8);
+}
+
+.tabs button[aria-selected="true"] {
+    border-color: #1e66f5;
+    color: #1e66f5;
+    border-bottom: 1px solid #1e66f5;
+}
+
+.tabs button:not([aria-selected="true"]):hover {
+    color: #6c6f85;
+    border-color: #bcc0cc;
+}
+
+/* Color selector */
+.catppuccin-latte {
+    color: #4c4f69;
+    background: #e6e9ef;
+    border: 1px solid #ccd0da;
+}
\ No newline at end of file
diff --git a/includes/css/colors/catppuccin-macchiato.css b/includes/css/colors/catppuccin-macchiato.css
new file mode 100644
index 0000000..0a7b7f8
--- /dev/null
+++ b/includes/css/colors/catppuccin-macchiato.css
@@ -0,0 +1,180 @@
+/* Catppuccin Macchiato */
+
+#ps-logo {
+    fill: #8aadf4 !important;
+}
+
+#initial-screen.compact {
+    background-color: #1e2030 !important;
+}
+
+.bg-gray-900 {
+    background-color: #24273a;
+}
+
+.bg-gray-800 {
+    background-color: #1e2030;
+}
+
+.bg-gray-700 {
+    background-color: #363a4f;
+}
+
+.bg-gray-700\/60 {
+    background-color: rgba(54, 58, 79, 0.6);
+}
+
+.bg-black\/50 {
+    background-color: rgba(24, 25, 38, 0.5);
+}
+
+.bg-white\/5 {
+    background-color: rgba(198, 160, 246, 0.05);
+}
+
+.bg-white\/10 {
+    background-color: rgba(198, 160, 246, 0.1);
+}
+
+.bg-blue-600 {
+    background-color: #8aadf4;
+}
+
+.hover\:bg-blue-700:hover {
+    background-color: #7b9bdd;
+}
+
+.text-blue-500 {
+    color: #8aadf4;
+}
+
+.border-blue-500 {
+    border-color: #8aadf4;
+}
+
+.focus-within\:border-blue-500:focus-within {
+    border-color: #8aadf4;
+}
+
+.accent-blue-500 {
+    accent-color: #8aadf4;
+}
+
+.focus\:ring-2:focus,
+.focus\:ring-blue-400:focus {
+    box-shadow: 0 0 0 2px #8aadf4;
+}
+
+.text-white {
+    color: #cad3f5;
+}
+
+.text-white\/70 {
+    color: rgba(202, 211, 245, 0.7);
+}
+
+.text-white\/80 {
+    color: rgba(202, 211, 245, 0.8);
+}
+
+.text-white\/90 {
+    color: rgba(202, 211, 245, 0.9);
+}
+
+.text-gray-600 {
+    color: #939ab7;
+}
+
+.hover\:text-white:hover {
+    color: #cad3f5;
+}
+
+.border-gray-200 {
+    border-color: #5b6078;
+}
+
+.border-gray-700 {
+    border-color: #494d64;
+}
+
+.border-transparent {
+    border-color: transparent;
+}
+
+.hover\:bg-gray-700:hover {
+    background-color: #363a4f;
+}
+
+.hover\:bg-white\/10:hover {
+    background-color: rgba(202, 211, 245, 0.1);
+}
+
+.hover\:text-gray-600:hover {
+    color: #939ab7;
+}
+
+.hover\:border-gray-300:hover {
+    border-color: #5b6078;
+}
+
+input[type="radio"]:checked {
+    border: none;
+    background: #8aadf4;
+}
+
+.fwSelected {
+    background-color: #8aadf4;
+    color: #24273a;
+}
+
+::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #8aadf4;
+    border-radius: 10px;
+}
+
+.category-tools {
+    background-color: rgba(166, 218, 149, 0.2);
+    color: #a6da95;
+    border: none !important;
+}
+
+.category-advanced {
+    background-color: rgba(237, 135, 150, 0.2);
+    color: #ed8796;
+}
+
+.category-linux {
+    background-color: rgba(198, 160, 246, 0.2);
+    color: #c6a0f6;
+}
+
+.tabs ul {
+    border-color: #494d64;
+}
+
+.tabs button {
+    font-family: sans-serif;
+    border-color: transparent;
+    color: rgba(202, 211, 245, 0.8);
+}
+
+.tabs button[aria-selected="true"] {
+    border-color: #8aadf4;
+    color: #8aadf4;
+    border-bottom: 1px solid #8aadf4;
+}
+
+.tabs button:not([aria-selected="true"]):hover {
+    color: #939ab7;
+    border-color: #5b6078;
+}
+
+.catppuccin-macchiato {
+    color: #cad3f5;
+    background: #1e2030;
+    border: 1px solid #494d64;
+}
\ No newline at end of file
diff --git a/includes/css/colors/catppuccin-mocha.css b/includes/css/colors/catppuccin-mocha.css
new file mode 100644
index 0000000..96ef96d
--- /dev/null
+++ b/includes/css/colors/catppuccin-mocha.css
@@ -0,0 +1,180 @@
+/* Catppuccin Mocha */
+
+#ps-logo {
+    fill: #89b4fa !important;
+}
+
+#initial-screen.compact {
+    background-color: #181825 !important;
+}
+
+.bg-gray-900 {
+    background-color: #1e1e2e;
+}
+
+.bg-gray-800 {
+    background-color: #181825;
+}
+
+.bg-gray-700 {
+    background-color: #313244;
+}
+
+.bg-gray-700\/60 {
+    background-color: rgba(49, 50, 68, 0.6);
+}
+
+.bg-black\/50 {
+    background-color: rgba(17, 17, 27, 0.5);
+}
+
+.bg-white\/5 {
+    background-color: rgba(203, 166, 247, 0.05);
+}
+
+.bg-white\/10 {
+    background-color: rgba(203, 166, 247, 0.1);
+}
+
+.bg-blue-600 {
+    background-color: #89b4fa;
+}
+
+.hover\:bg-blue-700:hover {
+    background-color: #74a8f8;
+}
+
+.text-blue-500 {
+    color: #89b4fa;
+}
+
+.border-blue-500 {
+    border-color: #89b4fa;
+}
+
+.focus-within\:border-blue-500:focus-within {
+    border-color: #89b4fa;
+}
+
+.accent-blue-500 {
+    accent-color: #89b4fa;
+}
+
+.focus\:ring-2:focus,
+.focus\:ring-blue-400:focus {
+    box-shadow: 0 0 0 2px #89b4fa;
+}
+
+.text-white {
+    color: #cdd6f4;
+}
+
+.text-white\/70 {
+    color: rgba(205, 214, 244, 0.7);
+}
+
+.text-white\/80 {
+    color: rgba(205, 214, 244, 0.8);
+}
+
+.text-white\/90 {
+    color: rgba(205, 214, 244, 0.9);
+}
+
+.text-gray-600 {
+    color: #9399b2;
+}
+
+.hover\:text-white:hover {
+    color: #cdd6f4;
+}
+
+.border-gray-200 {
+    border-color: #585b70;
+}
+
+.border-gray-700 {
+    border-color: #45475a;
+}
+
+.border-transparent {
+    border-color: transparent;
+}
+
+.hover\:bg-gray-700:hover {
+    background-color: #313244;
+}
+
+.hover\:bg-white\/10:hover {
+    background-color: rgba(205, 214, 244, 0.1);
+}
+
+.hover\:text-gray-600:hover {
+    color: #9399b2;
+}
+
+.hover\:border-gray-300:hover {
+    border-color: #585b70;
+}
+
+input[type="radio"]:checked {
+    border: none;
+    background: #89b4fa;
+}
+
+.fwSelected {
+    background-color: #89b4fa;
+    color: #1e1e2e;
+}
+
+::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #89b4fa;
+    border-radius: 10px;
+}
+
+.category-tools {
+    background-color: rgba(166, 227, 161, 0.2);
+    color: #a6e3a1;
+    border: none !important;
+}
+
+.category-advanced {
+    background-color: rgba(243, 139, 168, 0.2);
+    color: #f38ba8;
+}
+
+.category-linux {
+    background-color: rgba(203, 166, 247, 0.2);
+    color: #cba6f7;
+}
+
+.tabs ul {
+    border-color: #45475a;
+}
+
+.tabs button {
+    font-family: sans-serif;
+    border-color: transparent;
+    color: rgba(205, 214, 244, 0.8);
+}
+
+.tabs button[aria-selected="true"] {
+    border-color: #89b4fa;
+    color: #89b4fa;
+    border-bottom: 1px solid #89b4fa;
+}
+
+.tabs button:not([aria-selected="true"]):hover {
+    color: #9399b2;
+    border-color: #585b70;
+}
+
+.catppuccin-mocha {
+    color: #cdd6f4;
+    background: #181825;
+    border: 1px solid #45475a;
+}
\ No newline at end of file
diff --git a/includes/css/layouts/index.css b/includes/css/layouts/index.css
index de441e1..672bfb6 100644
--- a/includes/css/layouts/index.css
+++ b/includes/css/layouts/index.css
@@ -5,7 +5,24 @@ body {
     -webkit-font-smoothing: antialiased;
     
 }
+.webkitty-logo-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.webkitty-logo {
+    width: 180px;
+    max-width: 60vw;
+    height: auto;
+    display: block;
+    transition: transform 0.3s ease, filter 0.3s ease;
+}
 
+.webkitty-logo:hover {
+    transform: scale(1.03);
+}
 .mainContainer {
     height: 100vh;
     /* Ensure main container takes full viewport height */
diff --git a/index.html b/index.html
index 6b43432..4384d51 100644
--- a/index.html
+++ b/index.html
@@ -3,12 +3,51 @@
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
+
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1">
+
     <title>WebKitty</title>
-    <meta name="description" content="WebKitty is a user-friendly, feature-rich PS4 exploit host for 6.70 - 11.02." />
+
+    <!-- Basic Metadata -->
+    <meta name="description"
+        content="WebKitty is a user-friendly, feature-rich PS4 exploit host for 6.70 - 13.52.">
+
     <meta name="author" content="ArabPixel">
-    <meta name="keywords" content="PS4, PlayStation 4, webkit exploit, jailbreak, psfree lapse, cssfontface, WebKitty, PSFree Enhanced">
-    <link rel="icon" href="includes/assets/icons/favicon.ico" type="image/x-icon">
+
+    <meta name="keywords"
+        content="PS4, PlayStation 4, webkit exploit, jailbreak, PSFree, Lapse, CSSFontFace, WebKitty, PSFree Enhanced">
+
+    <!-- Site Icon -->
+    <link rel="icon"
+        href="includes/assets/icons/favicon.ico"
+        type="image/x-icon">
+
+    <!-- Discord / Open Graph -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="http://webkitty.arabpixel.isroot.in/">
+    <meta property="og:title" content="WebKitty">
+    <meta property="og:description"
+        content="A user-friendly, feature-rich PS4 exploit host for firmware 6.70 - 13.52.">
+    <meta property="og:site_name" content="WebKitty">
+    <meta property="og:image"
+        content="http://webkitty.arabpixel.isroot.in/includes/assets/icons/webkitty.png">
+    <meta property="og:image:alt" content="WebKitty">
+    <meta property="og:image:type" content="image/png">
+
+    <!-- Optional image dimensions -->
+    <meta property="og:image:width" content="512">
+    <meta property="og:image:height" content="512">
+
+    <!-- Twitter / X -->
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="WebKitty">
+    <meta name="twitter:description"
+        content="A user-friendly, feature-rich PS4 exploit host for firmware 6.70 - 13.52.">
+    <meta name="twitter:image"
+        content="http://webkitty.arabpixel.isroot.in/includes/assets/icons/webkitty.png">
+
+    <!-- Stylesheets -->
     <link rel="stylesheet" id="main-stylesheet" href="">
     <link rel="stylesheet" id="color-stylesheet" href="">
     <script>
@@ -535,15 +574,72 @@ <h3 class="text-lg font-semibold mb-2" id="theme">Choose Layout</h3>
                 </div>
                 <!-- Color  -->
                 <h3 class="text-lg font-semibold mb-2" id="colorWord">Color</h3>
-                <div class="radio-group space-y-2 flex flex-wrap" id="colors">
-                    <label class="flex items-center text-white/80">
-                        <input type="radio" name="colorTheme" value="default" onchange="setColors(this.value);">
-                        <p id="defaultColor">Default</p>
+                <div class="radio-group space-y-2 flex flex-wrap gap-2" id="colors">
+
+                    <label class="color-option flex items-center text-white/80">
+                        <input
+                            type="radio"
+                            name="colorTheme"
+                            value="default"
+                            onchange="setColors(this.value);"
+                        >
+                        <span>Default</span>
                     </label>
-                    <label class="flex items-center text-white/80">
-                        <input type="radio" name="colorTheme" value="vibrant" onchange="setColors(this.value);">
-                        <p id="vibrantColor">Vibrant</p>
+
+                    <label class="color-option flex items-center text-white/80">
+                        <input
+                            type="radio"
+                            name="colorTheme"
+                            value="vibrant"
+                            onchange="setColors(this.value);"
+                        >
+                        <span>Vibrant</span>
+                    </label>
+
+                    <label class="color-option catppuccin-latte flex items-center"
+                        title="Catppuccin Latte">
+                        <input
+                            type="radio"
+                            name="colorTheme"
+                            value="catppuccin-latte"
+                            onchange="setColors(this.value);"
+                        >
+                        <span>Catppuccin Latte</span>
+                    </label>
+
+                    <label class="color-option catppuccin-frappe flex items-center"
+                        title="Catppuccin Frappé">
+                        <input
+                            type="radio"
+                            name="colorTheme"
+                            value="catppuccin-frappe"
+                            onchange="setColors(this.value);"
+                        >
+                        <span>Catppuccin Frappé</span>
                     </label>
+
+                    <label class="color-option catppuccin-macchiato flex items-center"
+                        title="Catppuccin Macchiato">
+                        <input
+                            type="radio"
+                            name="colorTheme"
+                            value="catppuccin-macchiato"
+                            onchange="setColors(this.value);"
+                        >
+                        <span>Catppuccin Macchiato</span>
+                    </label>
+
+                    <label class="color-option catppuccin-mocha flex items-center"
+                        title="Catppuccin Mocha">
+                        <input
+                            type="radio"
+                            name="colorTheme"
+                            value="catppuccin-mocha"
+                            onchange="setColors(this.value);"
+                        >
+                        <span>Catppuccin Mocha</span>
+                    </label>
+
                 </div>
             </div>
             <button onclick="themePopup()"