diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 0000000..d6d54f8
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,34 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Environment (please complete the following information):**
+ - OS:
+   - [ ] Linux
+   - [ ] Windows
+   - [ ] Mac
+   - [ ] Others: 
+ - Theme:
+   - [ ] Light
+   - [ ] Dark
+   - [ ] Alpenglow(System: Light)
+   - [ ] Alpenglow(System: Dark)
+   - [ ] System Default
+     - GTK Theme Name(Only Linux User): [sample] Adwaita, Adwaita-Dark, Breath, Breath-Dark
+
+**Additional context**
+Add any other context about the problem here.
diff --git a/README.org b/README.org
index 8498724..22890de 100644
--- a/README.org
+++ b/README.org
@@ -2,8 +2,10 @@
   [[https://wiki.mozilla.org/Firefox/Proton][proton]] is firefox's new design. \\
   I want to fix some flaws.
 
-  Currently work only dark theme.
-  [[https://user-images.githubusercontent.com/25581533/116639755-c313c100-a958-11eb-9ed4-e4366c3061cf.png]]
+  | *Wiki* | |
+  | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Screenshots][Screenshots]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution][Compatibility Issues Solution]] |
+
+  [[https://user-images.githubusercontent.com/25581533/117531080-49bb4480-afd0-11eb-8b6a-f04559ed2ab7.png]]
 
   (Fixed proton design)
 
@@ -58,7 +60,7 @@
 ** WHY Not Proton?
    However, there are also many flaws.
 
-   [[https://user-images.githubusercontent.com/25581533/116494039-86c85e00-a88f-11eb-8bb5-986fc464a149.png]]
+   [[https://user-images.githubusercontent.com/25581533/117529680-69e70580-afc8-11eb-8ecb-bd1e0cfc1e97.png]]
 
    (proton before design)
 
@@ -68,12 +70,12 @@
    - [x] Padding gaps are wide
    - :warning: Address bar 3-point menu, screenshot moves to toolbar (can't fix)
 
-** Padding Compares
+** Padding Comparisons
   [[https://user-images.githubusercontent.com/25581533/116781608-75d84200-aa73-11eb-9c75-27d8a82d6382.png]]
   [[https://user-images.githubusercontent.com/25581533/116781611-7a9cf600-aa73-11eb-88d8-dc202474e743.png]]
   [[https://user-images.githubusercontent.com/25581533/116781620-90aab680-aa73-11eb-8811-1ae43e7bfb13.png]]
   [[https://user-images.githubusercontent.com/25581533/116781623-930d1080-aa73-11eb-8fc7-14c238b73bfe.png]]
 
-  - Quantum
+  - Photon (Quantum)
   - Proton
   - Proton Fix
diff --git a/userChrome.css b/userChrome.css
index d2502a2..a8b9a32 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -1,9 +1,10 @@
 @media (-moz-proton) {
-  /* Darkmode - Color lighter */
+  /** Darkmode - Color lighter ************************************************/
   :root[style*="--lwt-accent-color:rgb(12, 12, 13); --lwt-text-color:rgba(249, 249, 250);"] {
     --toolbar-bgcolor: rgba(43, 42, 51, 5) !important;
   }
 
+  /** Root - Reduce Padding ***************************************************/
   :root {
     /* Tab Bar */
     --proton-tab-block-margin: 2px !important; /* Original: 4px */
@@ -15,7 +16,24 @@
     --arrowpanel-padding:         0.8em !important; /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */
   }
 
-  /* Tab Bar - Reduce Width, Show more tabs */
+  :root[uidensity=compact] {
+    /* Tool Bar */
+    --toolbarbutton-outter-padding: 2px !important; /* Original: 3px, General is 2px */
+
+    /* Panel */
+    --arrowpanel-menuitem-padding: 2px  !important; /* Original: 8px */
+  }
+
+  :root[uidensity=touch] {
+    /* Tab Bar - Like Original */
+    --proton-tab-block-margin: 4px !important; /* Original: 4px */
+    --inline-tab-padding:      8px !important; /* Original: 8px */
+
+    /* Panel - Like Original */
+    --arrowpanel-menuitem-padding: 8px  !important; /* Original: 8px */
+  }
+
+  /** Tab Bar - Reduce Width, Show more tabs **********************************/
   .titlebar-spacer[type="pre-tabs"] {
     width: 35px; /* Original: 40px */
   }
@@ -23,28 +41,45 @@
     width: 20px; /* Original: 40px */
   }
 
-  #tabbrowser-arrowscrollbox::part(scrollbutton-up  ),
-  #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
+  :root[uidensity=compact] #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
+    margin-inline-start: 0 !important;
+  }
+
+  :root:not([uidensity=touch]) #tabbrowser-arrowscrollbox::part(scrollbutton-up  ),
+  :root:not([uidensity=touch]) #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
     /* Original: 4px */
     padding-left:  1px;
     padding-right: 1px;
   }
 
-  #new-tab-button, #alltabs-button {
+  :root:not([uidensity=touch]) #new-tab-button, #alltabs-button {
     --toolbarbutton-outer-padding: 1px; /* Original: 2px*/
   }
 
-  /* Tab Bar - Reduce Height, Show more contents */
-  #TabsToolbar {
+  /** Tab Bar - Reduce Height, Show more contents *****************************/
+  :root:not([uidensity=touch]) #TabsToolbar {
     --toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */
   }
 
   .toolbar-items, .tabbrowser-tab {
-    max-height: 38px; /* Original: 40px */
+    max-height: 38px;
+  }
+  :root[uidensity=compact] .toolbar-items, .tabbrowser-tab {
+    max-height: 36px;
+  }
+  :root[uidensity=touch] .toolbar-items, .tabbrowser-tab {
+    max-height: unset;
+  }
+
+  :root:not([uidensity=touch]) #tabbrowser-arrowscrollbox::part(scrollbutton-up),
+  :root:not([uidensity=touch]) #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
+    /* Original: var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 6px) = 9px */
+    padding-top:    3px !important;
+    padding-bottom: 3px !important;
   }
 
   /* Tab - Max Size */
-  .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
+  :root:not([uidensity=touch]) .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
     max-width: 240px !important;
   }
 
@@ -72,11 +107,7 @@
     margin-inline-end: -.5px !important;
   }
 
-  /* Selected Tab - Color like toolbar */
-  .tab-background[selected="true"] {
-    background: var(--toolbar-bgcolor) !important;
-  }
-
+  /** Selected Tab - Color like toolbar ***************************************/
   #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected="true"]:-moz-lwtheme, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected="true"]:-moz-lwtheme {
     background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
   }
@@ -87,13 +118,13 @@
     box-shadow: 0 0 1px var(--toolbar-color) !important;
   }
 
-  /* Unselected Tab - Divide line */
+  /** Unselected Tab - Divide line ********************************************/
   .tab-content::before,
   .tab-content::after {
     content: "" !important;
     display: block !important;
     position: absolute !important;
-    background-color: var(--lwt-selected-tab-background-color) !important;
+    background-color: var(--toolbarseparator-color) !important;
     width: 1px !important;
     height: 20px !important;
     transform: translateY(-10px) !important;
@@ -117,8 +148,9 @@
     opacity: var(--tab-separator-opacity) !important;
   }
 
-  /* Clipped tabs - Letters cleary */
-  #tabbrowser-tabs[closebuttons=activetab] .tab-content:not([pinned]) {
+  /** Clipped tabs - Letters cleary *******************************************/
+  #tabbrowser-tabs[closebuttons=activetab] .tab-content:not([pinned])
+  {
     padding-inline-start: 8px !important;
   }
 
@@ -138,7 +170,7 @@
     mask-image: linear-gradient(to left, black 70%, transparent) !important;
   }
 
-  /* Sound Tab - Show with Favicons */
+  /** Sound Tab - Show with Favicons ******************************************/
   /* Makes the favicons always visible (also on hover) */
   #tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay), #toolbar-menubar:not(:hover) + #TabsToolbar:not(:hover) #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-icon-image[src] ~ .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]),
   :is(#toolbar-menubar:hover + #TabsToolbar, #TabsToolbar:hover) .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay)
@@ -158,27 +190,43 @@
     margin-right: 10px !important;
   }
 
-  /* URL Bar - Reduce Padding */
-  #urlbar-container, #search-container {
+  /** URL Bar - Reduce Padding ************************************************/
+  :root:not([uidensity=touch]) #urlbar-container, #search-container {
     padding-block: 2px; /* Original: 4px */
     margin-inline: 5px; /* Original: 5px */
   }
 
-  /* Menu - Reduce Padding */
-  menupopup > menuitem, menupopup > menu {
-    padding-block:     0.35em !important; /* Original: 0.5em */
-    padding-inline-start: 1em !important; /* Original: 1em */
+  /* spread menu */
+  :root[uidensity=compact] .urlbarView-row:not([type=tip], [type=dynamic]) {
+    padding-block: 1px; /* [Compact, General]: 2px, Touch: 11px */
   }
-  .menu-text, .menu-iconic-text {
+  :root[uidensity=compact] #urlbar .search-one-offs:not([hidden]) {
+    padding-block: 2px; /* [Compact, General]: 4px, Touch 11px */
+  }
+
+  /** BookMark Bar - Reduce Height ********************************************/
+  :root[uidensity=compact] #PersonalToolbar toolbarbutton {
+      margin-top: 0px; /* Original: 2px */
+  }
+
+  /** Menu - Reduce Padding ***************************************************/
+  :root:not([uidensity=touch]) menupopup > menuitem, menupopup > menu {
+    padding-block:     0.35em !important; /* Original: 0.5em */
+  }
+  :root:not([uidensity=touch]) .menu-text, .menu-iconic-text {
     padding-inline-end: 0 !important; /* Original: 2px */
   }
-  .menupopup-arrowscrollbox {
+  :root:not([uidensity=touch]) .menupopup-arrowscrollbox {
     padding-block: 1px !important; /* Original: 4px*/
   }
-  #context-navigation:not([hidden]) {
+  :root:not([uidensity=touch]) #context-navigation:not([hidden]) {
     padding: 0 0 1px; /* Original: 0 0 4px*/
   }
-  .menu-right {
+  :root:not([uidensity=touch]) .menu-right {
     margin-right: 6px !important; /* Original: 12px */
   }
+
+  :root[uidensity=compact] menupopup > menuitem, menupopup > menu {
+    padding-block:     0.25em !important; /* Original: 0.5em */
+  }
 }
diff --git a/userContent.css b/userContent.css
index d2c6690..a155e81 100644
--- a/userContent.css
+++ b/userContent.css
@@ -1,14 +1,15 @@
 @media (-moz-proton) {
   @-moz-document url("about:home"), url("about:newtab") {
-    /* Activity Stream - Search Focus Border: like URL */
+    /** Activity Stream - Search Focus Border: like URL ***********************/
     /* At DarkMode, Color */
-    body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"] {
+    body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"],
+    body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"] {
       /* inner */
       --newtab-focus-border: rgba(0, 221, 255, 0.5) !important; /* Original: #B5D3FF, Better color-mix(in srgb, #B5D3FF 70%, transparent) */
       --newtab-focus-border-selected: rgba(0, 221, 255, 0.5) !important; /* Original: #B5D3FF */
     }
 
-    /* Activity Stream - Web Site Icon: full size */
+    /** Activity Stream - Web Site Icon: full size ****************************/
     .top-site-outer .tile .icon-wrapper {
       width:  100% !important; /* Original: 48px */
       height: 100% !important; /* Original: 48px */