diff --git a/zen/userChrome.css b/zen/userChrome.css
index a6a1a1e..53ed267 100644
--- a/zen/userChrome.css
+++ b/zen/userChrome.css
@@ -1,217 +1,130 @@
-/*:root {
-    --c-accent: var(--tab-loading-fill);
-    --c-text: var(--toolbar-color);
-    --c-mantle: var(--lwt-accent-color);
-    --c-base: var(--tabpanel-background-color);
-    --c-surface0: var(--tab-selected-bgcolor);
-    --c-surface1: var(--arrowpanel-border-color);
+/* Catppuccin Mocha Pink userChrome.css*/
 
-    --zen-primary-color: var(--c-surface0) !important;
-    --zen-colors-primary: var(--c-accent) !important;
-    --zen-colors-secondary: var(--c-surface0) !important;
-    --zen-colors-tertiary: var(--c-base) !important;
-    --zen-colors-border: var(--c-surface1) !important;
-    --toolbarbutton-icon-fill: var(--c-accent) !important;
-    --toolbarbutton-icon-fill-attention: var(--c-accent) !important;
-    --toolbarbutton-icon-fill-attention-text-light: var(--c-text) !important;
-    --toolbarbutton-icon-fill-attention-text-dark: var(--c-base) !important;
-    --lwt-text-color: var(--c-text) !important;
-    --toolbar-field-color: color-mix(in srgb, var(--c-text), transparent 15%) !important;
-    --toolbar-field-focus-color: color-mix(in srgb, var(--c-text), transparent 10%) !important;
-    --arrowpanel-color: var(--c-text) !important;
-    --arrowpanel-background: var(--c-base) !important;
-    --lwt-sidebar-text-color: var(--c-text) !important;
-    --lwt-sidebar-background-color: var(--c-mantle) !important;
-    --toolbar-bgcolor: var(--c-surface0) !important;
-    --newtab-background-color: var(--c-base) !important;
-    --zen-themed-toolbar-bg: var(--c-mantle) !important;
-    --zen-main-browser-background: var(--c-mantle) !important;
-    --urlbarView-highlight-color: var(--c-text) !important;
-    --in-content-primary-button-text-color: var(--c-text) !important;
-    --in-content-primary-button-background: var(--toolbarbutton-hover-background) !important;
-    --in-content-primary-button-background-hover: var(--toolbarbutton-active-background) !important;
-    font-family: Maple Mono NF !important; font-size: 16pt
-}*/
+@media (prefers-color-scheme: dark) {
+  :root {
+    --zen-colors-primary: #313244 !important;
+    --zen-primary-color: #f5c2e7 !important;
+    --zen-colors-secondary: #313244 !important;
+    --zen-colors-tertiary: #181825 !important;
+    --zen-colors-border: #f5c2e7 !important;
+    --toolbarbutton-icon-fill: #f5c2e7 !important;
+    --lwt-text-color: #cdd6f4 !important;
+    --toolbar-field-color: #cdd6f4 !important;
+    --tab-selected-textcolor: rgb(225, 204, 238) !important;
+    --toolbar-field-focus-color: #cdd6f4 !important;
+    --toolbar-color: #cdd6f4 !important;
+    --newtab-text-primary-color: #cdd6f4 !important;
+    --arrowpanel-color: #cdd6f4 !important;
+    --arrowpanel-background: #1e1e2e !important;
+    --sidebar-text-color: #cdd6f4 !important;
+    --lwt-sidebar-text-color: #cdd6f4 !important;
+    --lwt-sidebar-background-color: #11111b !important;
+    --toolbar-bgcolor: #313244 !important;
+    --newtab-background-color: #1e1e2e !important;
+    --zen-themed-toolbar-bg: #181825 !important;
+    --zen-main-browser-background: #181825 !important;
+    --toolbox-bgcolor-inactive: #181825 !important;
+  }
 
-:root {
-    font-family: Maple Mono NF !important; font-size: 16pt
-}
+  #permissions-granted-icon {
+    color: #181825 !important;
+  }
 
-/*tooltip {
-    appearance: none !important;
-    background-color: var(--c-mantle) !important;
-    color: var(--c-text) !important;
-    border: 1px solid color-mix(in srgb, var(--c-accent), transparent 70%) !important;
-    border-radius: 8px !important;
-}*/
+  .sidebar-placesTree {
+    background-color: #1e1e2e !important;
+  }
 
-/*#permissions-granted-icon {
-    color: var(--c-mantle) !important;
-}
+  #zen-workspaces-button {
+    background-color: #1e1e2e !important;
+  }
 
-.sidebar-placesTree {
-    background-color: var(--c-base) !important;
-}
+  #TabsToolbar {
+    background-color: #181825 !important;
+  }
 
-#urlbar-background {
-    background-color: var(--c-surface0) !important;
-}
+  .urlbar-background {
+    background-color: #1e1e2e !important;
+  }
 
-#TabsToolbar {
-    background-color: var(--c-mantle) !important;
-}
+  .content-shortcuts {
+    background-color: #1e1e2e !important;
+    border-color: #f5c2e7 !important;
+  }
 
-.content-shortcuts {
-    background-color: var(--c-base) !important;
-    border-color: var(--c-accent) !important;
-}
+  .urlbarView-url {
+    color: #f5c2e7 !important;
+  }
 
-.urlbarView-url {
-    color: var(--c-accent) !important;
-}
+  #zenEditBookmarkPanelFaviconContainer {
+    background: #11111b !important;
+  }
 
-#zenEditBookmarkPanelFaviconContainer {
-    background: var(--c-mantle) !important;
-}
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #313244 !important;
+      }
+    }
+  }
 
-toolbarbutton {
-    fill: var(--c-accent) !important;
-}
-
-toolbar .toolbarbutton-1 {
+  toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-        &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) {
-            fill: var(--c-mantle) !important;
-        }
-    }
-}
-
-#autoscroller {
-    width: 50px !important;
-    height: 50px !important;
-}
-
-#urlbar-container {
-    background: var(--c-mantle) !important;
-}*/
-
-/* Center url bar text when not focused */
-#urlbar:not([focused]) .urlbar-input {
-    text-align: center !important;
-}
-
-/* Floating url bar appear animation + shift down */
-@keyframes floating-urlbar-show {
-    0% {
-        opacity: 0;
-        scale: 0.8;
-        /* translate: -10% 0; */
-    }
-
-    70% {
-        scale: 1.02;
-        /* translate: 1% 0; */
-    }
-
-    100% {
-        opacity: 1;
-        scale: 1;
-        /* translate: 0 0; */
-    }
-}
-
-#urlbar[breakout-extend] {
-    animation: 200ms floating-urlbar-show ease-out;
-}
-
-/* Blur menu popups */
-/*#commonDialog,
-.menupopup-arrowscrollbox {
-    border-radius: 10px !important;
-    border: 1px solid color-mix(in srgb, var(--arrowpanel-border-color), transparent 70%) !important;
-    background: color-mix(in srgb, var(--arrowpanel-background), transparent 15%) !important;
-    backdrop-filter: blur(25px) !important;
-}
-
-#commonDialog {
-    background: color-mix(in srgb, var(--zen-branding-bg), transparent 15%) !important;
-}*/
-
-/* Blur floating url bar */
-/*#urlbar[zen-floating-urlbar][breakout][breakout-extend] > #urlbar-background {
-    border: 1px solid color-mix(in srgb, var(--zen-colors-border), transparent 70%) !important;
-    border-radius: 10px !important;
-    background: color-mix(in srgb, var(--zen-colors-tertiary), transparent 15%) !important;
-    backdrop-filter: blur(25px) !important;
-}
-
-#urlbar[breakout-extend] .urlbar-input-container {
-    padding-top: 7px !important;
-    padding-bottom: 0px !important;
-}
-
-.urlbarView-body-inner {
-    border: none !important;
-}*/
-
-/* Styles the search options */
-.search-one-offs {
-    border-top: none !important;
-    padding: 4px !important;
-    margin: 0px 0px 7px 0px !important;
-}
-
-.searchbar-engine-one-off-item {
-    border-radius: 8px !important;
-    margin-right: 3px !important;
-}
-
-#urlbar-anon-search-settings {
-    margin-right: 0px !important;
-}
-
-/* Border/outline transition fix */
-* {
-    border: 0px solid transparent;
-    outline: 0px solid transparent;
-}
-
-/* Dim unloaded tabs */
-.tabbrowser-tab[pending] {
-    filter: grayscale(1);
-    opacity: 0.5;
-}
-
-/* Animations */
-:is(
-        .tab-background,
-        .toolbarbutton-icon,
-        .toolbarbutton-badge-stack,
-        .toolbarbutton-1,
-        .bookmark-item,
-        .PanelUI-zen-profiles-item,
-        .download-state,
-        .urlbarView-row,
-        .urlbarView-action,
-        .searchbar-engine-one-off-item,
-        #urlbar-search-mode-indicator,
-        #tracking-protection-icon-container,
-        #page-action-buttons > *,
-        #identity-box > *,
-        toolbarbutton,
-        toolbaritem,
-        button,
-        menu,
-        menuitem,
-        tab
-    ):not(#urlbar-container, #personal-bookmarks) {
-    transition: all 0.15s ease !important;
-
-    &:is(tab) {
-        transition: scale 0.15s ease !important;
-    }
-
-    &:is(:active, :not(tab)[open]) {
-        scale: 0.95 !important;
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
+        fill: #11111b;
+      }
     }
+  }
+
+  .identity-color-blue {
+    --identity-tab-color: #89b4fa !important;
+    --identity-icon-color: #89b4fa !important;
+  }
+
+  .identity-color-turquoise {
+    --identity-tab-color: #94e2d5 !important;
+    --identity-icon-color: #94e2d5 !important;
+  }
+
+  .identity-color-green {
+    --identity-tab-color: #a6e3a1 !important;
+    --identity-icon-color: #a6e3a1 !important;
+  }
+
+  .identity-color-yellow {
+    --identity-tab-color: #f9e2af !important;
+    --identity-icon-color: #f9e2af !important;
+  }
+
+  .identity-color-orange {
+    --identity-tab-color: #fab387 !important;
+    --identity-icon-color: #fab387 !important;
+  }
+
+  .identity-color-red {
+    --identity-tab-color: #f38ba8 !important;
+    --identity-icon-color: #f38ba8 !important;
+  }
+
+  .identity-color-pink {
+    --identity-tab-color: #f5c2e7 !important;
+    --identity-icon-color: #f5c2e7 !important;
+  }
+
+  .identity-color-purple {
+    --identity-tab-color: #cba6f7 !important;
+    --identity-icon-color: #cba6f7 !important;
+  }
+
+  hbox#titlebar {
+    background-color: #181825 !important;
+  }
+
+  #zen-appcontent-navbar-container {
+    background-color: #181825 !important;
+  }
 }
diff --git a/zen/userContent.css b/zen/userContent.css
new file mode 100644
index 0000000..f76f3b2
--- /dev/null
+++ b/zen/userContent.css
@@ -0,0 +1,158 @@
+/* Catppuccin Mocha Pink userContent.css*/
+
+@media (prefers-color-scheme: dark) {
+
+  /* Common variables affecting all pages */
+  @-moz-document url-prefix("about:") {
+    :root {
+      --in-content-page-color: #cdd6f4 !important;
+      --color-accent-primary: #f5c2e7 !important;
+      --color-accent-primary-hover: rgb(249, 217, 240) !important;
+      --color-accent-primary-active: rgb(245, 195, 219) !important;
+      background-color: #1e1e2e !important;
+      --in-content-page-background: #1e1e2e !important;
+    }
+
+  }
+
+  /* Variables and styles specific to about:newtab and about:home */
+  @-moz-document url("about:newtab"), url("about:home") {
+
+    :root {
+      --newtab-background-color: #1e1e2e !important;
+      --newtab-background-color-secondary: #313244 !important;
+      --newtab-element-hover-color: #313244 !important;
+      --newtab-text-primary-color: #cdd6f4 !important;
+      --newtab-wordmark-color: #cdd6f4 !important;
+      --newtab-primary-action-background: #f5c2e7 !important;
+    }
+
+    .icon {
+      color: #f5c2e7 !important;
+    }
+
+    .search-wrapper .logo-and-wordmark .logo {
+      background: url("zen-logo-mocha.svg"), url("https://raw.githubusercontent.com/IAmJafeth/zen-browser/main/themes/Mocha/Pink/zen-logo-mocha.svg") no-repeat center !important;
+      display: inline-block !important;
+      height: 82px !important;
+      width: 82px !important;
+      background-size: 82px !important;
+    }
+
+    @media (max-width: 609px) {
+      .search-wrapper .logo-and-wordmark .logo {
+        background-size: 64px !important;
+        height: 64px !important;
+        width: 64px !important;
+      }
+    }
+
+    .card-outer:is(:hover, :focus, .active):not(.placeholder) .card-title {
+      color: #f5c2e7 !important;
+    }
+
+    .top-site-outer .search-topsite {
+      background-color: #89b4fa !important;
+    }
+
+    .compact-cards .card-outer .card-context .card-context-icon.icon-download {
+      fill: #a6e3a1 !important;
+    }
+  }
+
+  /* Variables and styles specific to about:preferences */
+  @-moz-document url-prefix("about:preferences") {
+    :root {
+      --zen-colors-tertiary: #181825 !important;
+      --in-content-text-color: #cdd6f4 !important;
+      --link-color: #f5c2e7 !important;
+      --link-color-hover: rgb(249, 217, 240) !important;
+      --zen-colors-primary: #313244 !important;
+      --in-content-box-background: #313244 !important;
+      --zen-primary-color: #f5c2e7 !important;
+    }
+
+    groupbox , moz-card{
+      background: #1e1e2e !important;
+    }
+
+    button,
+    groupbox menulist {
+      background: #313244 !important;
+      color: #cdd6f4 !important;
+    }
+
+    .main-content {
+      background-color: #11111b !important;
+    }
+
+    .identity-color-blue {
+      --identity-tab-color: #8aadf4 !important;
+      --identity-icon-color: #8aadf4 !important;
+    }
+
+    .identity-color-turquoise {
+      --identity-tab-color: #8bd5ca !important;
+      --identity-icon-color: #8bd5ca !important;
+    }
+
+    .identity-color-green {
+      --identity-tab-color: #a6da95 !important;
+      --identity-icon-color: #a6da95 !important;
+    }
+
+    .identity-color-yellow {
+      --identity-tab-color: #eed49f !important;
+      --identity-icon-color: #eed49f !important;
+    }
+
+    .identity-color-orange {
+      --identity-tab-color: #f5a97f !important;
+      --identity-icon-color: #f5a97f !important;
+    }
+
+    .identity-color-red {
+      --identity-tab-color: #ed8796 !important;
+      --identity-icon-color: #ed8796 !important;
+    }
+
+    .identity-color-pink {
+      --identity-tab-color: #f5bde6 !important;
+      --identity-icon-color: #f5bde6 !important;
+    }
+
+    .identity-color-purple {
+      --identity-tab-color: #c6a0f6 !important;
+      --identity-icon-color: #c6a0f6 !important;
+    }
+  }
+
+  /* Variables and styles specific to about:addons */
+  @-moz-document url-prefix("about:addons") {
+    :root {
+      --zen-dark-color-mix-base: #181825 !important;
+      --background-color-box: #1e1e2e !important;
+    }
+  }
+
+  /* Variables and styles specific to about:protections */
+  @-moz-document url-prefix("about:protections") {
+    :root {
+      --zen-primary-color: #1e1e2e !important;
+      --social-color: #cba6f7 !important;
+      --coockie-color: #89dceb !important;
+      --fingerprinter-color: #f9e2af !important;
+      --cryptominer-color: #b4befe !important;
+      --tracker-color: #a6e3a1 !important;
+      --in-content-primary-button-background-hover: rgb(81, 83, 105) !important;
+      --in-content-primary-button-text-color-hover: #cdd6f4 !important;
+      --in-content-primary-button-background: #45475a !important;
+      --in-content-primary-button-text-color: #cdd6f4 !important;
+    }
+
+
+    .card {
+      background-color: #313244 !important;
+    }
+  }
+}
diff --git a/zen/zen-logo-mocha.svg b/zen/zen-logo-mocha.svg
new file mode 100644
index 0000000..4c138ef
--- /dev/null
+++ b/zen/zen-logo-mocha.svg
@@ -0,0 +1,13 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_15_9)">
+    <rect width="1024" height="1024" rx="225" fill="#11111b"/>
+    <circle cx="512" cy="512" r="340" stroke="#cdd6f4" stroke-width="70"/>
+    <circle cx="512" cy="512" r="224.915" stroke="#cdd6f4" stroke-width="51"/>
+    <circle cx="512" cy="512" r="129.018" stroke="#cdd6f4" stroke-width="31"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_15_9">
+      <rect width="1024" height="1024" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>