diff --git a/src/main/frontend/components/settings.cljs b/src/main/frontend/components/settings.cljs
index dd711c8d21..3fad85f48f 100644
--- a/src/main/frontend/components/settings.cljs
+++ b/src/main/frontend/components/settings.cljs
@@ -39,10 +39,10 @@
            :on-change (fn [e]
                         (reset! email (util/evalue e)))}]]]]
       (ui/button
-        "Submit"
-        :on-click
-        (fn []
-          (user-handler/set-email! @email)))
+       "Submit"
+       :on-click
+       (fn []
+         (user-handler/set-email! @email)))
 
       [:hr]
 
@@ -63,10 +63,10 @@
            :on-change (fn [e]
                         (reset! cors (util/evalue e)))}]]]]
       (ui/button
-        "Submit"
-        :on-click
-        (fn []
-          (user-handler/set-cors! @cors)))
+       "Submit"
+       :on-click
+       (fn []
+         (user-handler/set-cors! @cors)))
 
       [:hr]
 
@@ -78,12 +78,13 @@
    [:label.block.text-sm.font-medium.leading-5.opacity-70
     {:for label-for}
     name]
-   [:div.mt-1.sm:mt-0.sm:col-span-2
-    [:div.rounded-md
-     {:style {:display "flex" :gap "1rem" :align-items "center"}}
+   [:div.rounded-md.sm:max-w-tss.sm:col-span-2
+    [:div.rounded-md {:style {:display "flex" :gap "1rem" :align-items "center"}}
      (ui/toggle state on-toggle true)
      detail-text]]])
 
+
+
 (rum/defcs app-updater < rum/reactive
   [state version]
   (let [update-pending? (state/sub :electron/updater-pending?)
@@ -91,20 +92,23 @@
     [:span.cp__settings-app-updater
 
      [:div.ctls.flex.items-center
-      (ui/button
-        (if update-pending? "Checking ..." "Check for updates")
-        :class "text-sm p-1 mr-3"
-        :disabled update-pending?
-        :on-click #(js/window.apis.checkForUpdates false))
 
-      [:span version]]
+      [:div.mt-1.sm:mt-0.sm:col-span-2
+       {:style {:display "flex" :gap "0.5rem" :align-items "center"}}
+       [:div (ui/button
+              (if update-pending? "Checking ..." "Check for updates")
+              :class "text-sm p-1 mr-1"
+              :disabled update-pending?
+              :on-click #(js/window.apis.checkForUpdates false))]
+
+       [:div.text-sm.opacity-50 (str "Version " version)]]]
 
      (when-not (or update-pending?
                    (string/blank? type))
-       [:div.update-state
+       [:div.update-state.text-sm
         (case type
           "update-not-available"
-          [:p "😀 Your app is up-to-date!"]
+          [:p "Your app is up-to-date 🎉"]
 
           "update-available"
           (let [{:keys [name url]} payload]
@@ -158,25 +162,51 @@
            :width  500
            :height 500}]]])
 
+(defn row-with-button-action
+  [{:keys [left-label action button-label href on-click desc -for]}]
+  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
+
+     ;; left column
+   [:label.block.text-sm.font-medium.leading-5.opacity-70
+    {:for -for}
+    left-label]
+
+     ;; right column
+   [:div.mt-1.sm:mt-0.sm:col-span-2
+    {:style {:display "flex" :gap "0.5rem" :align-items "center"}}
+    [:div (if action action (ui/button
+                             button-label
+                             :class    "text-sm p-1"
+                             :href     href
+                             :on-click on-click))]
+    [:div.text-sm desc]]])
+
+
 (defn edit-config-edn []
   (rum/with-context [[t] i18n/*tongue-context*]
-    [:div
-     [:a.text-xs {:href     (rfe/href :file {:path (config/get-config-path)})
-                  :on-click #(js/setTimeout (fn [] (ui-handler/toggle-settings-modal!)))}
-      (t :settings-page/edit-config-edn)]]))
+    (row-with-button-action
+     {:left-label   "Custom configuration"
+      :button-label (t :settings-page/edit-config-edn)
+      :href         (rfe/href :file {:path (config/get-config-path)})
+      :on-click     #(js/setTimeout (fn [] (ui-handler/toggle-settings-modal!)))
+      :-for         "config_edn"})))
+
+(defn edit-custom-css []
+  (rum/with-context [[t] i18n/*tongue-context*]
+    (row-with-button-action
+     {:left-label   "Custom theme"
+      :button-label (t :settings-page/edit-custom-css)
+      :href         (rfe/href :file {:path (config/get-custom-css-path)})
+      :on-click     #(js/setTimeout (fn [] (ui-handler/toggle-settings-modal!)))
+      :-for         "customize_css"})))
 
 (defn show-brackets-row [t show-brackets?]
-  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
-   [:label.block.text-sm.font-medium.leading-5.opacity-70
-    {:for "show_brackets"}
-    (t :settings-page/show-brackets)]
-   [:div
-    [:div.rounded-md.sm:max-w-xs
-     (ui/toggle show-brackets?
-                config-handler/toggle-ui-show-brackets!
-                true)]]
-   [:div {:style {:text-align "right"}}
-    (ui/render-keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-brackets))]])
+  (toggle "show_brackets"
+          (t :settings-page/show-brackets)
+          show-brackets?
+          config-handler/toggle-ui-show-brackets!
+          [:span {:text-align "right"}
+           (ui/render-keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-brackets))]))
 
 (rum/defcs switch-spell-check-row < rum/reactive
   [state t]
@@ -229,64 +259,42 @@
                               (state/set-state! [:electron/user-cfgs :git/auto-commit-seconds] value)
                               (ipc/ipc "userAppCfgs" :git/auto-commit-seconds value))))}]]]]))
 
-(rum/defc app-auto-update-row < rum/reactive
-  [t]
+(rum/defc app-auto-update-row < rum/reactive [t]
   (let [enabled? (state/sub [:electron/user-cfgs :auto-update])
         enabled? (if (nil? enabled?) true enabled?)]
-
-    [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
-     [:label.block.text-sm.font-medium.leading-5.opacity-70
-      (t :settings-page/auto-updater)]
-     [:div
-      [:div.rounded-md.sm:max-w-xs
-       (ui/toggle
-        enabled?
-        (fn []
-          (state/set-state! [:electron/user-cfgs :auto-update] (not enabled?))
-          (ipc/ipc "userAppCfgs" :auto-update (not enabled?)))
-        true)]]]))
-
-(rum/defcs graph-config
-  [state t]
-  (when-let [current-repo (state/sub :git/current-repo)]
-    (edit-config-edn)))
+    (toggle "usage-diagnostics"
+            (t :settings-page/auto-updater)
+            enabled?
+            #((state/set-state! [:electron/user-cfgs :auto-update] (not enabled?))
+              (ipc/ipc "userAppCfgs" :auto-update (not enabled?))))))
 
 (defn language-row [t preferred-language]
-  [:div.it.sm:grid.sm:grid-cols-5.sm:gap-4.sm:items-start
-   [:label.block.text-sm.font-medium.leading-5.opacity-70
-    {:for "preferred_language"}
-    (t :language)]
-   [:div.mt-1.sm:mt-0.sm:col-span-4
-    [:div.max-w-lg.rounded-md
-     [:select.form-select.is-small
-      {:value     preferred-language
-       :on-change (fn [e]
+  (let [on-change (fn [e]
                     (let [lang-code (util/evalue e)]
                       (state/set-preferred-language! lang-code)
-                      (ui-handler/re-render-root!)))}
-      (for [language dicts/languages]
-        (let [lang-code (name (:value language))
-              lang-label (:label language)]
-          [:option {:key lang-code :value lang-code} lang-label]))]]]])
+                      (ui-handler/re-render-root!)))
+        action [:select.form-select.is-small {:value     preferred-language
+                                              :on-change on-change}
+                (for [language dicts/languages]
+                  (let [lang-code (name (:value language))
+                        lang-label (:label language)]
+                    [:option {:key lang-code :value lang-code} lang-label]))]]
+    (row-with-button-action {:left-label (t :language)
+                             :-for       "preferred_language"
+                             :action     action})))
 
 (defn theme-modes-row [t switch-theme system-theme? dark?]
-  [:div.it.sm:grid.sm:grid-cols-5.sm:gap-4
-   [:label.block.text-sm.font-medium.leading-5.opacity-70
-    {:for "toggle_theme"}
-    (t :right-side-bar/switch-theme (string/capitalize switch-theme))]
-   [:div.flex.flex-row.mt-1.sm:mt-0.sm:col-span-4
-    [:div.rounded-md.sm:max-w-xs
-
-     [:ul.theme-modes-options
-      [:li {:on-click (partial state/use-theme-mode! "light")
-            :class    (classnames [{:active (and (not system-theme?) (not dark?))}])} [:i.mode-light] [:strong "light"]]
-      [:li {:on-click (partial state/use-theme-mode! "dark")
-            :class    (classnames [{:active (and (not system-theme?) dark?)}])} [:i.mode-dark] [:strong "dark"]]
-      [:li {:on-click (partial state/use-theme-mode! "system")
-            :class    (classnames [{:active system-theme?}])} [:i.mode-system] [:strong "system"]]]]
-
-    [:div.pl-16
-     (ui/render-keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-theme))]]])
+  (let [pick-theme [:ul.theme-modes-options
+                    [:li {:on-click (partial state/use-theme-mode! "light")
+                          :class    (classnames [{:active (and (not system-theme?) (not dark?))}])} [:i.mode-light] [:strong "light"]]
+                    [:li {:on-click (partial state/use-theme-mode! "dark")
+                          :class    (classnames [{:active (and (not system-theme?) dark?)}])} [:i.mode-dark] [:strong "dark"]]
+                    [:li {:on-click (partial state/use-theme-mode! "system")
+                          :class    (classnames [{:active system-theme?}])} [:i.mode-system] [:strong "system"]]]]
+    (row-with-button-action {:left-label (t :right-side-bar/switch-theme (string/capitalize switch-theme))
+                             :-for       "toggle_theme"
+                             :action     pick-theme
+                             :desc       (ui/render-keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-theme))})))
 
 (defn file-format-row [t preferred-format]
   [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
@@ -374,8 +382,7 @@
   (toggle "enable_timetracking"
           (t :settings-page/enable-timetracking)
           enable-timetracking?
-          (fn []
-            (let [value (not enable-timetracking?)]
+          #((let [value (not enable-timetracking?)]
               (config-handler/set-config! :feature/enable-timetracking? value)))))
 
 (defn update-home-page
@@ -437,28 +444,19 @@
 
 (defn encryption-row [t enable-encryption?]
   (toggle "enable_encryption"
-          (str (t :settings-page/enable-encryption) "\n(experimental!)")
+          (t :settings-page/enable-encryption)
           enable-encryption?
-          (fn []
-            (let [value (not enable-encryption?)]
-              (config-handler/set-config! :feature/enable-encryption? value)))))
+          #((let [value (not enable-encryption?)]
+              (config-handler/set-config! :feature/enable-encryption? value)))
+          [:div.text-sm.opacity-50 "⚠️ This feature is experimental"]))
 
-(rum/defc keyboard-shortcuts-row
-  [t]
-  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
-   [:label.block.text-sm.font-medium.leading-5.opacity-70
-    {:for "customize_shortcuts"}
-    (t :settings-page/customize-shortcuts)]
-   (let [h (fn []
-             (state/close-settings!)
-             (route-handler/redirect! {:to :shortcut-setting}))]
-     [:div.mt-1.sm:mt-0.sm:col-span-2
-      [:div
-       (ui/button
-         (t :settings-page/shortcut-settings)
-         :class "text-sm p-1"
-         :style {:margin-top "0px"}
-         :on-click h)]])])
+(rum/defc keyboard-shortcuts-row [t]
+  (row-with-button-action
+   {:left-label   (t :settings-page/customize-shortcuts)
+    :button-label (t :settings-page/shortcut-settings)
+    :on-click      #((state/close-settings!)
+                     (route-handler/redirect! {:to :shortcut-setting}))
+    :-for         "customize_shortcuts"}))
 
 (defn zotero-settings-row [t]
   [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start
@@ -468,13 +466,13 @@
    [:div.mt-1.sm:mt-0.sm:col-span-2
     [:div
      (ui/button
-       "Zotero settings"
-       :class "text-sm p-1"
-       :style {:margin-top "0px"}
-       :on-click
-       (fn []
-         (state/close-settings!)
-         (route-handler/redirect! {:to :zotero-setting})))]]])
+      "Zotero settings"
+      :class "text-sm p-1"
+      :style {:margin-top "0px"}
+      :on-click
+      (fn []
+        (state/close-settings!)
+        (route-handler/redirect! {:to :zotero-setting})))]]])
 
 (defn auto-push-row [t current-repo enable-git-auto-push?]
   (when (string/starts-with? current-repo "https://")
@@ -490,29 +488,19 @@
           (t :settings-page/disable-sentry)
           (not instrument-disabled?)
           (fn [] (instrument/disable-instrument
-                 (not instrument-disabled?)))
+                  (not instrument-disabled?)))
           [:span.text-sm.opacity-50 "Logseq will never collect your local graph database or sell your data."]))
 
 (defn clear-cache-row [t]
-  [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
-   [:label.block.text-sm.font-medium.leading-5.opacity-70
-    {:for "clear_cache"}
-    (t :settings-page/clear-cache)]
-   [:div.mt-1.sm:mt-0.sm:col-span-2
-    [:div.max-w-lg.rounded-md.sm:max-w-xs
-     (ui/button
-       (t :settings-page/clear)
-       :class "text-sm p-1"
-       :on-click handler/clear-cache!)]]])
+  (row-with-button-action {:left-label   (t :settings-page/clear-cache)
+                           :button-label (t :settings-page/clear)
+                           :on-click     handler/clear-cache!
+                           :-for         "clear_cache"}))
 
 (defn version-row [t version]
-  [:div.it.app-updater.sm:grid.sm:grid-cols-5.sm:gap-4.sm:items-center
-   [:label.block.text-sm.font-medium.leading-5.opacity-70
-    (t :settings-page/current-version)]
-   [:div.wrap.sm:mt-0.sm:col-span-4
-    (if (util/electron?)
-      (app-updater version)
-      [:span.ver version])]])
+  (row-with-button-action {:left-label (t :settings-page/current-version)
+                           :action     (app-updater version)
+                           :-for       "current-version"}))
 
 (defn developer-mode-row [t developer-mode?]
   (toggle "developer_mode"
@@ -575,11 +563,11 @@
 
         [:aside.md:w-64
          [:ul
-          (for [[label text icon] [[:general (t :settings-page/tab-general) (ui/icon "adjustments" {:style {:font-size 20}})]
-                                   [:editor (t :settings-page/tab-editor) (ui/icon "writing" {:style {:font-size 20}})]
-                                   [:shortcuts (t :settings-page/tab-shortcuts) (ui/icon "command" {:style {:font-size 20}})]
-                                   [:git (t :settings-page/tab-version-control) (ui/icon "history" {:style {:font-size 20}})]
-                                   [:advanced (t :settings-page/tab-advanced) (ui/icon "bulb" {:style {:font-size 20}})]]]
+          (for [[label text icon]
+                [[:general (t :settings-page/tab-general) (ui/icon "adjustments" {:style {:font-size 20}})]
+                 [:editor (t :settings-page/tab-editor) (ui/icon "writing" {:style {:font-size 20}})]
+                 [:git (t :settings-page/tab-version-control) (ui/icon "history" {:style {:font-size 20}})]
+                 [:advanced (t :settings-page/tab-advanced) (ui/icon "bulb" {:style {:font-size 20}})]]]
 
             [:li
              {:class    (util/classnames [{:active (= label @*active)}])
@@ -597,7 +585,11 @@
            [:div.panel-wrap.is-general
             (version-row t version)
             (language-row t preferred-language)
-            (theme-modes-row t switch-theme system-theme? dark?)]
+            (theme-modes-row t switch-theme system-theme? dark?)
+            (when-let [current-repo (state/sub :git/current-repo)]
+              [(edit-config-edn)
+               (edit-custom-css)])
+            (keyboard-shortcuts-row t)]
 
            :editor
            [:div.panel-wrap.is-editor
@@ -612,27 +604,29 @@
             (tooltip-row t enable-tooltip?)
             (timetracking-row t enable-timetracking?)
             (journal-row t enable-journals?)
-            (enable-all-pages-public-row t enable-all-pages-public?)
             (encryption-row t enable-encryption?)
+            (enable-all-pages-public-row t enable-all-pages-public?)
             (zotero-settings-row t)
             (auto-push-row t current-repo enable-git-auto-push?)]
 
-           :shortcuts
-           [:div.panel-wrap
-            (keyboard-shortcuts-row t)]
-
            :git
            [:div.panel-wrap
             [:div.text-sm.my-4
-             [:a {:href "https://git-scm.com/"
-                  :target "_blank"} "Git"]
-             " is used for pages version control, you can click the vertical three dots menu to check the page's history."]
+             [:span.text-sm.opacity-50.my-4
+              "You can view a page's edit history by clicking the three vertical dots "
+              "in the top-right corner and selecting \"Check page's history\". "
+              "Logseq uses "]
+             [:a {:href "https://git-scm.com/" :target "_blank"}
+              "Git"]
+             [:span.text-sm.opacity-50.my-4
+              " for version control."]]
+            [:br]
             (switch-git-auto-commit-row t)
             (git-auto-commit-seconds t)
 
             (ui/admonition
              :warning
-             [:p "You need to restart the app after updating the settings."])]
+             [:p "You need to restart the app after updating the Git settings."])]
 
            :advanced
            [:div.panel-wrap.is-advanced
@@ -668,8 +662,6 @@
                       :target "_blank"}
                   "https://github.com/isomorphic-git/cors-proxy"]])])
 
-            (graph-config t)
-
             (when logged?
               [:div
                [:hr]
@@ -680,8 +672,8 @@
                 [:div.mt-1.sm:mt-0.sm:col-span-2
                  [:div.max-w-lg.rounded-md.sm:max-w-xs
                   (ui/button (t :user/delete-your-account)
-                    :on-click (fn []
-                                (ui-handler/toggle-settings-modal!)
-                                (js/setTimeout #(state/set-modal! delete-account-confirm))))]]]])]
+                             :on-click (fn []
+                                         (ui-handler/toggle-settings-modal!)
+                                         (js/setTimeout #(state/set-modal! delete-account-confirm))))]]]])]
 
            nil)]]])))
diff --git a/src/main/frontend/components/settings.css b/src/main/frontend/components/settings.css
index 2b030df9ac..7b8daccbde 100644
--- a/src/main/frontend/components/settings.css
+++ b/src/main/frontend/components/settings.css
@@ -111,7 +111,8 @@
         }
 
         .form-select, .form-input {
-          width: 55%;
+          width: 100%;
+          max-width: 200px;
           display: inline-block;
 
           &:hover {
@@ -207,7 +208,6 @@
 
     .ctls {
       position: relative;
-      top: -8px;
 
       &:disabled {
         cursor: progress;
@@ -215,10 +215,11 @@
     }
 
     .update-state {
-      padding: 15px;
+      padding: 6px 10px;
       background-color: var(--ls-quaternary-background-color);
       border-radius: 4px;
-      margin-bottom: -8px;
+      margin-top: 10px;
+      width: fit-content;
 
       > p {
         margin: 0;
@@ -244,6 +245,10 @@
   }
 }
 
+/* Styles for the category icon on the left of settings-modal */
+.cp__settings-inner > aside ul > li > a > i {
+  margin-right: 4px;
+}
 
 svg.git {
     margin-left: -4px;
diff --git a/src/main/frontend/dicts.cljs b/src/main/frontend/dicts.cljs
index bb7172eac6..dfaa08dc06 100644
--- a/src/main/frontend/dicts.cljs
+++ b/src/main/frontend/dicts.cljs
@@ -214,31 +214,32 @@
         :content/open-in-sidebar "Open in sidebar"
         :content/copy-as-json "Copy as JSON"
         :content/click-to-edit "Click to edit"
-        :settings-page/edit-config-edn "Edit config.edn for current graph"
+        :settings-page/edit-config-edn "Edit config.edn"
+        :settings-page/edit-custom-css "Edit custom.css"
         :settings-page/show-brackets "Show brackets"
         :settings-page/spell-checker "Spell checker"
         :settings-page/auto-updater "Auto updater"
         :settings-page/disable-sentry "Send usage data and diagnostics to Logseq"
-        :settings-page/preferred-outdenting "Enable logical outdenting"
+        :settings-page/preferred-outdenting "Logical outdenting"
         :settings-page/custom-date-format "Preferred date format"
         :settings-page/preferred-file-format "Preferred file format"
         :settings-page/preferred-workflow "Preferred workflow"
-        :settings-page/enable-timetracking "Enable timetracking"
-        :settings-page/enable-tooltip "Enable tooltips"
         :settings-page/enable-shortcut-tooltip "Enable shortcut tooltip"
-        :settings-page/enable-journals "Enable journals"
-        :settings-page/enable-all-pages-public "Enable all pages public when publishing"
-        :settings-page/enable-encryption "Enable encryption feature"
+        :settings-page/enable-timetracking "Timetracking"
+        :settings-page/enable-tooltip "Tooltips"
+        :settings-page/enable-journals "Journals"
+        :settings-page/enable-all-pages-public "All pages public when publishing"
+        :settings-page/enable-encryption "Encryption"
         :settings-page/customize-shortcuts "Keyboard shortcuts"
         :settings-page/shortcut-settings "Customize shortcuts"
         :settings-page/home-default-page "Set the default home page"
-        :settings-page/enable-block-time "Enable block timestamps"
+        :settings-page/enable-block-time "Block timestamps"
         :settings-page/dont-use-other-peoples-proxy-servers "Don't use other people's proxy servers. It's very dangerous, which could make your token and notes stolen. Logseq will not be responsible for this loss if you use other people's proxy servers. You can deploy it yourself, check "
         :settings-page/clear-cache "Clear cache"
         :settings-page/clear "Clear"
         :settings-page/custom-cors-proxy-server "Custom CORS proxy server"
         :settings-page/developer-mode "Developer mode"
-        :settings-page/enable-developer-mode "Enable developer mode"
+        :settings-page/enable-developer-mode "Developer mode"
         :settings-page/disable-developer-mode "Disable developer mode"
         :settings-page/developer-mode-desc "Developer mode helps contributors and extension developers test their integrations with Logseq more efficiently."
         :settings-page/current-version "Current version"