diff --git a/packages/apps/algo-app/src/components/balloon/decided-answer-balloon.tsx b/packages/apps/algo-app/src/components/balloon/decided-answer-balloon.tsx
index 02a3c13b00..ea1041d53c 100644
--- a/packages/apps/algo-app/src/components/balloon/decided-answer-balloon.tsx
+++ b/packages/apps/algo-app/src/components/balloon/decided-answer-balloon.tsx
@@ -77,38 +77,38 @@ export const DecidedAnswerBalloon = memoNamed<Props>(
         </Balloon>
 
         <SymbolSvg
-          fill='none'
+          fill={"none"}
           height={symbolSize}
           style={oStyle}
-          viewBox='0 0 100 100'
+          viewBox={"0 0 100 100"}
           width={symbolSize}
-          xmlns='http://www.w3.org/2000/svg'
+          xmlns={"http://www.w3.org/2000/svg"}
         >
-          <circle cx='50' cy='50' r='45.5' stroke='#FF0000' strokeWidth='9' />
+          <circle cx={"50"} cy={"50"} r={"45.5"} stroke={"#FF0000"} strokeWidth={"9"} />
         </SymbolSvg>
 
         <SymbolSvg
-          fill='none'
+          fill={"none"}
           height={symbolSize}
           style={xStyle}
-          viewBox='0 0 104 104'
+          viewBox={"0 0 104 104"}
           width={symbolSize}
-          xmlns='http://www.w3.org/2000/svg'
+          xmlns={"http://www.w3.org/2000/svg"}
         >
           <rect
-            fill='#FF0000'
-            height='9'
-            transform='rotate(-45 0 96.8735)'
-            width='137'
-            y='96.8735'
+            fill={"#FF0000"}
+            height={"9"}
+            transform={"rotate(-45 0 96.8735)"}
+            width={"137"}
+            y={"96.8735"}
           />
           <rect
-            fill='#FF0000'
-            height='9'
-            transform='rotate(-135 96.9924 103.356)'
-            width='137'
-            x='96.9924'
-            y='103.356'
+            fill={"#FF0000"}
+            height={"9"}
+            transform={"rotate(-135 96.9924 103.356)"}
+            width={"137"}
+            x={"96.9924"}
+            y={"103.356"}
           />
         </SymbolSvg>
       </Wrapper>
diff --git a/packages/apps/algo-app/src/components/bp/spinner.tsx b/packages/apps/algo-app/src/components/bp/spinner.tsx
index 7ea2acf034..d04e7a3bf2 100644
--- a/packages/apps/algo-app/src/components/bp/spinner.tsx
+++ b/packages/apps/algo-app/src/components/bp/spinner.tsx
@@ -59,7 +59,7 @@ export const Spinner = memoNamed<Props>('Spinner', ({ size: _size, value }) => {
   // - SPINNER_ANIMATION isolates svg from parent display and is always centered inside root element.
   return (
     // eslint-disable-next-line jsx-a11y/prefer-tag-over-role
-    <Root role='progressbar'>
+    <Root role={"progressbar"}>
       <SpinnerAnimation style={animationStyle}>
         <svg
           height={size}
diff --git a/packages/apps/algo-app/src/components/card/card.tsx b/packages/apps/algo-app/src/components/card/card.tsx
index f69aa66fd0..8d17f23d54 100644
--- a/packages/apps/algo-app/src/components/card/card.tsx
+++ b/packages/apps/algo-app/src/components/card/card.tsx
@@ -111,10 +111,10 @@ export const CardComponent = memoNamed<Props>(
           onMouseLeave={onMouseLeave}
         >
           <SvgStyled
-            fill='none'
+            fill={"none"}
             style={backSideStyle}
-            viewBox='0 0 161 241'
-            xmlns='http://www.w3.org/2000/svg'
+            viewBox={"0 0 161 241"}
+            xmlns={"http://www.w3.org/2000/svg"}
           >
             <rect
               height={233}
@@ -132,22 +132,22 @@ export const CardComponent = memoNamed<Props>(
             visibilityFromMe === 'faceDownButVisibleToMe' ? (
               <>
                 <path
-                  d='M29.981 17L38.6248 23.7642H21.3372L29.981 17Z'
+                  d={"M29.981 17L38.6248 23.7642H21.3372L29.981 17Z"}
                   fill={eyeIconColor}
                 />
                 <rect
                   fill={eyeIconColor}
-                  height='8'
-                  width='7'
-                  x='26.481'
-                  y='23'
+                  height={"8"}
+                  width={"7"}
+                  x={"26.481"}
+                  y={"23"}
                 />
                 <path
-                  d='M27.8273 34.6269C24.3462 36.7661 18 42.3955 18 55.0055C18 67.5669 24.2972 73.2013 27.7868 75.3593C29.1685 76.2136 30.9301 76.2136 32.3117 75.3593C35.8013 73.2013 42.0986 67.567 42.0986 55.0055C42.0986 42.3955 35.7525 36.7661 32.2713 34.6269C30.9114 33.791 29.1873 33.791 27.8273 34.6269ZM31.2737 45.7729C35.4218 46.3025 38.7673 49.6567 39.2852 53.8062C40.0444 59.889 34.9328 65.0006 28.85 64.2413C24.7006 63.7235 21.3463 60.3778 20.8168 56.2298C20.0382 50.1314 25.1753 44.9944 31.2737 45.7729Z'
+                  d={"M27.8273 34.6269C24.3462 36.7661 18 42.3955 18 55.0055C18 67.5669 24.2972 73.2013 27.7868 75.3593C29.1685 76.2136 30.9301 76.2136 32.3117 75.3593C35.8013 73.2013 42.0986 67.567 42.0986 55.0055C42.0986 42.3955 35.7525 36.7661 32.2713 34.6269C30.9114 33.791 29.1873 33.791 27.8273 34.6269ZM31.2737 45.7729C35.4218 46.3025 38.7673 49.6567 39.2852 53.8062C40.0444 59.889 34.9328 65.0006 28.85 64.2413C24.7006 63.7235 21.3463 60.3778 20.8168 56.2298C20.0382 50.1314 25.1753 44.9944 31.2737 45.7729Z"}
                   fill={eyeIconColor}
                 />
                 <path
-                  d='M28.885 52.884C28.7362 53.4012 28.3166 53.824 27.8001 53.9754C26.9384 54.2283 26.131 53.784 25.8154 53.0748C25.5444 53.6636 25.3938 54.3154 25.3938 55.0056C25.3938 57.5978 27.5217 59.699 30.1198 59.6604C32.5887 59.6237 34.6674 57.545 34.7041 55.076C34.7428 52.478 32.6414 50.3499 30.0492 50.3499C29.2797 50.3499 28.5512 50.539 27.9104 50.873C28.6588 51.1684 29.1398 51.9983 28.885 52.884Z'
+                  d={"M28.885 52.884C28.7362 53.4012 28.3166 53.824 27.8001 53.9754C26.9384 54.2283 26.131 53.784 25.8154 53.0748C25.5444 53.6636 25.3938 54.3154 25.3938 55.0056C25.3938 57.5978 27.5217 59.699 30.1198 59.6604C32.5887 59.6237 34.6674 57.545 34.7041 55.076C34.7428 52.478 32.6414 50.3499 30.0492 50.3499C29.2797 50.3499 28.5512 50.539 27.9104 50.873C28.6588 51.1684 29.1398 51.9983 28.885 52.884Z"}
                   fill={eyeIconColor}
                 />
               </>
@@ -155,10 +155,10 @@ export const CardComponent = memoNamed<Props>(
           </SvgStyled>
 
           <SvgStyled
-            fill='none'
+            fill={"none"}
             style={frontSideStyle}
-            viewBox='0 0 161 241'
-            xmlns='http://www.w3.org/2000/svg'
+            viewBox={"0 0 161 241"}
+            xmlns={"http://www.w3.org/2000/svg"}
           >
             <rect
               height={233}
diff --git a/packages/apps/algo-app/src/components/card/cards-sub/card-0.tsx b/packages/apps/algo-app/src/components/card/cards-sub/card-0.tsx
index ea37f9e876..6d285fc288 100644
--- a/packages/apps/algo-app/src/components/card/cards-sub/card-0.tsx
+++ b/packages/apps/algo-app/src/components/card/cards-sub/card-0.tsx
@@ -3,22 +3,22 @@ import { type CardProps } from './card-props';
 export const Card0 = memoNamed('Card0', ({ color, textColor }: CardProps) => (
   <>
     <path
-      d='M111.259 63.5944C119.417 71.6585 124 82.5957 124 94H80.5L37 94C37 82.5957 41.583 71.6585 49.7409 63.5944C57.8987 55.5303 68.9631 51 80.5 51C92.0369 51 103.101 55.5303 111.259 63.5944Z'
+      d={"M111.259 63.5944C119.417 71.6585 124 82.5957 124 94H80.5L37 94C37 82.5957 41.583 71.6585 49.7409 63.5944C57.8987 55.5303 68.9631 51 80.5 51C92.0369 51 103.101 55.5303 111.259 63.5944Z"}
       fill={textColor}
     />
     <path
-      d='M111.259 176.406C119.417 168.342 124 157.404 124 146H80.5L37 146C37 157.404 41.583 168.342 49.7409 176.406C57.8987 184.47 68.9631 189 80.5 189C92.0369 189 103.101 184.47 111.259 176.406Z'
+      d={"M111.259 176.406C119.417 168.342 124 157.404 124 146H80.5L37 146C37 157.404 41.583 168.342 49.7409 176.406C57.8987 184.47 68.9631 189 80.5 189C92.0369 189 103.101 184.47 111.259 176.406Z"}
       fill={textColor}
     />
-    <rect fill={textColor} height='54' width='87' x='37' y='93' />
+    <rect fill={textColor} height={"54"} width={"87"} x={"37"} y={"93"} />
     <path
-      d='M94.2886 80.2721C97.9455 83.6477 100 88.2261 100 93H80.5L61 93C61 88.2261 63.0545 83.6477 66.7114 80.2721C70.3684 76.8964 75.3283 75 80.5 75C85.6717 75 90.6316 76.8964 94.2886 80.2721Z'
+      d={"M94.2886 80.2721C97.9455 83.6477 100 88.2261 100 93H80.5L61 93C61 88.2261 63.0545 83.6477 66.7114 80.2721C70.3684 76.8964 75.3283 75 80.5 75C85.6717 75 90.6316 76.8964 94.2886 80.2721Z"}
       fill={color}
     />
     <path
-      d='M94.2886 158.728C97.9455 155.352 100 150.774 100 146H80.5L61 146C61 150.774 63.0545 155.352 66.7114 158.728C70.3684 162.104 75.3283 164 80.5 164C85.6717 164 90.6316 162.104 94.2886 158.728Z'
+      d={"M94.2886 158.728C97.9455 155.352 100 150.774 100 146H80.5L61 146C61 150.774 63.0545 155.352 66.7114 158.728C70.3684 162.104 75.3283 164 80.5 164C85.6717 164 90.6316 162.104 94.2886 158.728Z"}
       fill={color}
     />
-    <rect fill={color} height='55' width='39' x='61' y='92' />
+    <rect fill={color} height={"55"} width={"39"} x={"61"} y={"92"} />
   </>
 ));
diff --git a/packages/apps/algo-app/src/components/card/cards-sub/card-1.tsx b/packages/apps/algo-app/src/components/card/cards-sub/card-1.tsx
index e63da61d3b..618663e606 100644
--- a/packages/apps/algo-app/src/components/card/cards-sub/card-1.tsx
+++ b/packages/apps/algo-app/src/components/card/cards-sub/card-1.tsx
@@ -2,7 +2,7 @@ import { type CardProps } from './card-props';
 
 export const Card1 = memoNamed('Card1', ({ textColor }: CardProps) => (
   <path
-    d='M93.5 56V183.5H70.8265V92.5L54 103.5V80.5L93.5 56Z'
+    d={"M93.5 56V183.5H70.8265V92.5L54 103.5V80.5L93.5 56Z"}
     fill={textColor}
   />
 ));
diff --git a/packages/apps/algo-app/src/components/card/cards-sub/card-10.tsx b/packages/apps/algo-app/src/components/card/cards-sub/card-10.tsx
index ac275cf222..97ed52ca12 100644
--- a/packages/apps/algo-app/src/components/card/cards-sub/card-10.tsx
+++ b/packages/apps/algo-app/src/components/card/cards-sub/card-10.tsx
@@ -3,25 +3,25 @@ import { type CardProps } from './card-props';
 export const Card10 = memoNamed('Card10', ({ color, textColor }: CardProps) => (
   <>
     <path
-      d='M126.895 65.7157C133.365 73.2172 137 83.3913 137 94H102.5L68 94C68 83.3913 71.6348 73.2172 78.1048 65.7157C84.5748 58.2143 93.35 54 102.5 54C111.65 54 120.425 58.2143 126.895 65.7157Z'
+      d={"M126.895 65.7157C133.365 73.2172 137 83.3913 137 94H102.5L68 94C68 83.3913 71.6348 73.2172 78.1048 65.7157C84.5748 58.2143 93.35 54 102.5 54C111.65 54 120.425 58.2143 126.895 65.7157Z"}
       fill={textColor}
     />
     <path
-      d='M126.895 175.284C133.365 167.783 137 157.609 137 147H102.5L68 147C68 157.609 71.6348 167.783 78.1048 175.284C84.5748 182.786 93.35 187 102.5 187C111.65 187 120.425 182.786 126.895 175.284Z'
+      d={"M126.895 175.284C133.365 167.783 137 157.609 137 147H102.5L68 147C68 157.609 71.6348 167.783 78.1048 175.284C84.5748 182.786 93.35 187 102.5 187C111.65 187 120.425 182.786 126.895 175.284Z"}
       fill={textColor}
     />
-    <path d='M68 93H137V148H68V93Z' fill={textColor} />
+    <path d={"M68 93H137V148H68V93Z"} fill={textColor} />
     <path
-      d='M113.46 81.9792C116.367 85.1673 118 89.4913 118 94H102.5L87 94C87 89.4913 88.633 85.1673 91.5398 81.9792C94.4467 78.7911 98.3891 77 102.5 77C106.611 77 110.553 78.7911 113.46 81.9792Z'
+      d={"M113.46 81.9792C116.367 85.1673 118 89.4913 118 94H102.5L87 94C87 89.4913 88.633 85.1673 91.5398 81.9792C94.4467 78.7911 98.3891 77 102.5 77C106.611 77 110.553 78.7911 113.46 81.9792Z"}
       fill={color}
     />
     <path
-      d='M113.46 159.021C116.367 155.833 118 151.509 118 147H102.5L87 147C87 151.509 88.633 155.833 91.5398 159.021C94.4467 162.209 98.3891 164 102.5 164C106.611 164 110.553 162.209 113.46 159.021Z'
+      d={"M113.46 159.021C116.367 155.833 118 151.509 118 147H102.5L87 147C87 151.509 88.633 155.833 91.5398 159.021C94.4467 162.209 98.3891 164 102.5 164C106.611 164 110.553 162.209 113.46 159.021Z"}
       fill={color}
     />
-    <rect fill={color} height='55' width='31' x='87' y='93' />
+    <rect fill={color} height={"55"} width={"31"} x={"87"} y={"93"} />
     <path
-      d='M59 56V183H39.4836V92.3569L25 103.314V80.4039L59 56Z'
+      d={"M59 56V183H39.4836V92.3569L25 103.314V80.4039L59 56Z"}
       fill={textColor}
     />
   </>
diff --git a/packages/apps/algo-app/src/components/card/cards-sub/card-11.tsx b/packages/apps/algo-app/src/components/card/cards-sub/card-11.tsx
index d8c9bc9bb6..419bdcc17c 100644
--- a/packages/apps/algo-app/src/components/card/cards-sub/card-11.tsx
+++ b/packages/apps/algo-app/src/components/card/cards-sub/card-11.tsx
@@ -3,11 +3,11 @@ import { type CardProps } from './card-props';
 export const Card11 = memoNamed('Card11', ({ textColor }: CardProps) => (
   <>
     <path
-      d='M74.5 56V183.5H51.8265V92.5L35 103.5V80.5L74.5 56Z'
+      d={"M74.5 56V183.5H51.8265V92.5L35 103.5V80.5L74.5 56Z"}
       fill={textColor}
     />
     <path
-      d='M126 56V183.5H103.327V92.5L86.5 103.5V80.5L126 56Z'
+      d={"M126 56V183.5H103.327V92.5L86.5 103.5V80.5L126 56Z"}
       fill={textColor}
     />
   </>
diff --git a/packages/apps/algo-app/src/components/card/cards-sub/card-2.tsx b/packages/apps/algo-app/src/components/card/cards-sub/card-2.tsx
index e0be54c9ad..744ffbd430 100644
--- a/packages/apps/algo-app/src/components/card/cards-sub/card-2.tsx
+++ b/packages/apps/algo-app/src/components/card/cards-sub/card-2.tsx
@@ -3,23 +3,23 @@ import { type CardProps } from './card-props';
 export const Card2 = memoNamed('Card2', ({ textColor }: CardProps) => (
   <>
     <path
-      d='M117 72.7254C114.484 67.6508 107.565 63.1826 102.399 61.0006C97.2327 58.8186 89.8767 57.0609 82.5 57.0016C75.1233 56.9422 68.3146 58.5861 62.9479 60.6834C57.5811 62.7807 47.0629 67.6508 37 83.8896L56.1195 91.5016L70.2076 76.2777L117 72.7254Z'
+      d={"M117 72.7254C114.484 67.6508 107.565 63.1826 102.399 61.0006C97.2327 58.8186 89.8767 57.0609 82.5 57.0016C75.1233 56.9422 68.3146 58.5861 62.9479 60.6834C57.5811 62.7807 47.0629 67.6508 37 83.8896L56.1195 91.5016L70.2076 76.2777L117 72.7254Z"}
       fill={textColor}
     />
     <path
-      d='M102.5 94.5016C102.5 89.7277 100.682 85.1493 96.5564 81.7737C92.4305 78.398 86.8348 76.5016 81 76.5016C75.1652 76.5016 69.5695 78.398 65.4437 81.7737C61.3179 85.1493 59 87.0016 56.5 91.0016V73.5016L75.5 65.5016L107 70.0016L102.5 94.5016Z'
+      d={"M102.5 94.5016C102.5 89.7277 100.682 85.1493 96.5564 81.7737C92.4305 78.398 86.8348 76.5016 81 76.5016C75.1652 76.5016 69.5695 78.398 65.4437 81.7737C61.3179 85.1493 59 87.0016 56.5 91.0016V73.5016L75.5 65.5016L107 70.0016L102.5 94.5016Z"}
       fill={textColor}
     />
     <path
-      d='M101.5 129.502C104.192 129.502 110.655 124.785 113 122.002C115.345 119.218 116.092 118.501 117.996 115.715C119.899 112.929 121.409 109.622 122.44 105.982C123.47 102.342 124 98.4412 124 94.5016C124 90.5619 123.47 86.6609 122.44 83.0211C121.409 79.3813 119.899 76.0741 117.996 73.2884C116.092 70.5026 113.832 68.2928 111.345 66.7852C109.5 65.6668 106.192 62.0016 103.5 62.0016L102.5 94.5016L101.5 129.502Z'
+      d={"M101.5 129.502C104.192 129.502 110.655 124.785 113 122.002C115.345 119.218 116.092 118.501 117.996 115.715C119.899 112.929 121.409 109.622 122.44 105.982C123.47 102.342 124 98.4412 124 94.5016C124 90.5619 123.47 86.6609 122.44 83.0211C121.409 79.3813 119.899 76.0741 117.996 73.2884C116.092 70.5026 113.832 68.2928 111.345 66.7852C109.5 65.6668 106.192 62.0016 103.5 62.0016L102.5 94.5016L101.5 129.502Z"}
       fill={textColor}
     />
     <path
-      d='M90 115.795C91.9417 115.533 96.8807 109.365 98.5 108C100 106 100.078 106.152 101 104C101.922 101.848 102.488 99.4427 102.5 97.0016C102.512 94.5605 102.5 92.5016 102 89.5016L112.5 108.732L90 115.795Z'
+      d={"M90 115.795C91.9417 115.533 96.8807 109.365 98.5 108C100 106 100.078 106.152 101 104C101.922 101.848 102.488 99.4427 102.5 97.0016C102.512 94.5605 102.5 92.5016 102 89.5016L112.5 108.732L90 115.795Z"}
       fill={textColor}
     />
     <path
-      d='M111.5 123.502L67 161.502H125V182.312H39.5V160.002L108 100.002L111.5 123.502Z'
+      d={"M111.5 123.502L67 161.502H125V182.312H39.5V160.002L108 100.002L111.5 123.502Z"}
       fill={textColor}
     />
   </>
diff --git a/packages/apps/algo-app/src/components/card/cards-sub/card-3.tsx b/packages/apps/algo-app/src/components/card/cards-sub/card-3.tsx
index c2a2170f4a..af93c0e48a 100644
--- a/packages/apps/algo-app/src/components/card/cards-sub/card-3.tsx
+++ b/packages/apps/algo-app/src/components/card/cards-sub/card-3.tsx
@@ -3,20 +3,20 @@ import { type CardProps } from './card-props';
 export const Card3 = memoNamed('Card3', ({ color, textColor }: CardProps) => (
   <>
     <path
-      d='M126.5 143C126.5 166.196 104.338 185 77 185C49.6619 185 27.5 166.196 27.5 143C27.5 119.804 48.5 106.071 77 102C112 97 126.5 119.804 126.5 143Z'
+      d={"M126.5 143C126.5 166.196 104.338 185 77 185C49.6619 185 27.5 166.196 27.5 143C27.5 119.804 48.5 106.071 77 102C112 97 126.5 119.804 126.5 143Z"}
       fill={textColor}
     />
-    <path d='M32.3 169L64.5 142.75L18.5 127L32.3 169Z' fill={color} />
+    <path d={"M32.3 169L64.5 142.75L18.5 127L32.3 169Z"} fill={color} />
     <path
-      d='M83.5 84.5L59.5 117L64.6089 146.5L15 128L83.5 84.5Z'
+      d={"M83.5 84.5L59.5 117L64.6089 146.5L15 128L83.5 84.5Z"}
       fill={color}
     />
     <path
-      d='M104.5 139.5C104.5 153.031 92.1878 164 77 164C61.8122 164 49.5 153.031 49.5 139.5C49.5 125.969 44 117 77 115C92.1878 115 104.5 125.969 104.5 139.5Z'
+      d={"M104.5 139.5C104.5 153.031 92.1878 164 77 164C61.8122 164 49.5 153.031 49.5 139.5C49.5 125.969 44 117 77 115C92.1878 115 104.5 125.969 104.5 139.5Z"}
       fill={color}
     />
     <path
-      d='M125 60L93.5 102.5L68.5 105L86.5 80H41.5V60H125Z'
+      d={"M125 60L93.5 102.5L68.5 105L86.5 80H41.5V60H125Z"}
       fill={textColor}
     />
   </>
diff --git a/packages/apps/algo-app/src/components/card/cards-sub/card-4.tsx b/packages/apps/algo-app/src/components/card/cards-sub/card-4.tsx
index 856d9c3f12..b5c6cd8716 100644
--- a/packages/apps/algo-app/src/components/card/cards-sub/card-4.tsx
+++ b/packages/apps/algo-app/src/components/card/cards-sub/card-4.tsx
@@ -2,7 +2,7 @@ import { type CardProps } from './card-props';
 
 export const Card4 = memoNamed('Card4', ({ textColor }: CardProps) => (
   <path
-    d='M73.5 57H96.5L63.5 131.5H91V101H113.5V131.5H130.5V152H113.5V182.5H91V152H32L73.5 57Z'
+    d={"M73.5 57H96.5L63.5 131.5H91V101H113.5V131.5H130.5V152H113.5V182.5H91V152H32L73.5 57Z"}
     fill={textColor}
   />
 ));
diff --git a/packages/apps/algo-app/src/components/card/cards-sub/card-5.tsx b/packages/apps/algo-app/src/components/card/cards-sub/card-5.tsx
index c5a462e44a..0955447f45 100644
--- a/packages/apps/algo-app/src/components/card/cards-sub/card-5.tsx
+++ b/packages/apps/algo-app/src/components/card/cards-sub/card-5.tsx
@@ -2,15 +2,15 @@ import { type CardProps } from './card-props';
 
 export const Card5 = memoNamed('Card5', ({ color, textColor }: CardProps) => (
   <>
-    <path d='M120 57V77.5H67L66 100.5L42.5 123L47 57H120Z' fill={textColor} />
+    <path d={"M120 57V77.5H67L66 100.5L42.5 123L47 57H120Z"} fill={textColor} />
     <path
-      d='M130 137.5C130 162.077 108.734 182 82.5 182C56.2665 182 27 170.077 27 145.5C31.5 122 60.7665 93.5 87 93.5C113.234 93.5 130 112.923 130 137.5Z'
+      d={"M130 137.5C130 162.077 108.734 182 82.5 182C56.2665 182 27 170.077 27 145.5C31.5 122 60.7665 93.5 87 93.5C113.234 93.5 130 112.923 130 137.5Z"}
       fill={textColor}
     />
-    <path d='M84.5 123L27 171L19 123H84.5Z' fill={color} />
-    <path d='M43 100.5L42.5 125L30.5 122.5L43 100.5Z' fill={color} />
+    <path d={"M84.5 123L27 171L19 123H84.5Z"} fill={color} />
+    <path d={"M43 100.5L42.5 125L30.5 122.5L43 100.5Z"} fill={color} />
     <path
-      d='M107 137.5C107 151.031 95.3594 162 81 162C57.5 159.5 46.5 147.5 55 137.5C55 123.969 66.6406 113 81 113C95.3594 113 107 123.969 107 137.5Z'
+      d={"M107 137.5C107 151.031 95.3594 162 81 162C57.5 159.5 46.5 147.5 55 137.5C55 123.969 66.6406 113 81 113C95.3594 113 107 123.969 107 137.5Z"}
       fill={color}
     />
   </>
diff --git a/packages/apps/algo-app/src/components/card/cards-sub/card-6.tsx b/packages/apps/algo-app/src/components/card/cards-sub/card-6.tsx
index 0bef612fe1..28a8779550 100644
--- a/packages/apps/algo-app/src/components/card/cards-sub/card-6.tsx
+++ b/packages/apps/algo-app/src/components/card/cards-sub/card-6.tsx
@@ -3,10 +3,10 @@ import { type CardProps } from './card-props';
 export const Card6 = memoNamed('Card6', ({ color, textColor }: CardProps) => (
   <>
     <path
-      d='M128 144C128 168.577 106.734 188.5 80.5 188.5C54.2665 188.5 33 168.577 33 144C33 119.423 44.5 99 86 99C112.234 99 128 119.423 128 144Z'
+      d={"M128 144C128 168.577 106.734 188.5 80.5 188.5C54.2665 188.5 33 168.577 33 144C33 119.423 44.5 99 86 99C112.234 99 128 119.423 128 144Z"}
       fill={textColor}
     />
-    <circle cx='80.5' cy='143' fill={color} r='24.5' />
-    <path d='M80 52L103 60.5L75 102L40 117L80 52Z' fill={textColor} />
+    <circle cx={"80.5"} cy={"143"} fill={color} r={"24.5"} />
+    <path d={"M80 52L103 60.5L75 102L40 117L80 52Z"} fill={textColor} />
   </>
 ));
diff --git a/packages/apps/algo-app/src/components/card/cards-sub/card-7.tsx b/packages/apps/algo-app/src/components/card/cards-sub/card-7.tsx
index db9e511447..26bb0d19b2 100644
--- a/packages/apps/algo-app/src/components/card/cards-sub/card-7.tsx
+++ b/packages/apps/algo-app/src/components/card/cards-sub/card-7.tsx
@@ -2,7 +2,7 @@ import { type CardProps } from './card-props';
 
 export const Card7 = memoNamed('Card7', ({ textColor }: CardProps) => (
   <path
-    d='M60.5 101H39V59H132.5L77.5 182.5H54.5L100 79.5H60.5V101Z'
+    d={"M60.5 101H39V59H132.5L77.5 182.5H54.5L100 79.5H60.5V101Z"}
     fill={textColor}
   />
 ));
diff --git a/packages/apps/algo-app/src/components/card/cards-sub/card-8.tsx b/packages/apps/algo-app/src/components/card/cards-sub/card-8.tsx
index 4b609f245b..9b046d4da2 100644
--- a/packages/apps/algo-app/src/components/card/cards-sub/card-8.tsx
+++ b/packages/apps/algo-app/src/components/card/cards-sub/card-8.tsx
@@ -2,12 +2,12 @@ import { type CardProps } from './card-props';
 
 export const Card8 = memoNamed('Card8', ({ color, textColor }: CardProps) => (
   <>
-    <ellipse cx='80.5' cy='87.5' fill={textColor} rx='38.5' ry='33.5' />
+    <ellipse cx={"80.5"} cy={"87.5"} fill={textColor} rx={"38.5"} ry={"33.5"} />
     <path
-      d='M126 149C126 169.987 105.405 187 80 187C54.5949 187 34 169.987 34 149C34 128.013 44 111 80 111C116.5 111 126 128.013 126 149Z'
+      d={"M126 149C126 169.987 105.405 187 80 187C54.5949 187 34 169.987 34 149C34 128.013 44 111 80 111C116.5 111 126 128.013 126 149Z"}
       fill={textColor}
     />
-    <ellipse cx='80.5' cy='89.5' fill={color} rx='16.5' ry='17.5' />
-    <ellipse cx='80' cy='145.5' fill={color} rx='24' ry='20.5' />
+    <ellipse cx={"80.5"} cy={"89.5"} fill={color} rx={"16.5"} ry={"17.5"} />
+    <ellipse cx={"80"} cy={"145.5"} fill={color} rx={"24"} ry={"20.5"} />
   </>
 ));
diff --git a/packages/apps/algo-app/src/components/card/cards-sub/card-9.tsx b/packages/apps/algo-app/src/components/card/cards-sub/card-9.tsx
index 96413c1dc6..5c81e4bd5d 100644
--- a/packages/apps/algo-app/src/components/card/cards-sub/card-9.tsx
+++ b/packages/apps/algo-app/src/components/card/cards-sub/card-9.tsx
@@ -2,10 +2,10 @@ import { type CardProps } from './card-props';
 
 export const Card9 = memoNamed('Card9', ({ color, textColor }: CardProps) => (
   <>
-    <ellipse cx='75.5' cy='98' fill={textColor} rx='46.5' ry='44' />
-    <circle cx='75.5' cy='98.5' fill={color} r='24.5' />
+    <ellipse cx={"75.5"} cy={"98"} fill={textColor} rx={"46.5"} ry={"44"} />
+    <circle cx={"75.5"} cy={"98.5"} fill={color} r={"24.5"} />
     <path
-      d='M131 79.5L95.1864 186.5L71 185L112.5 77L131 79.5Z'
+      d={"M131 79.5L95.1864 186.5L71 185L112.5 77L131 79.5Z"}
       fill={textColor}
     />
   </>
diff --git a/packages/apps/algo-app/src/components/create-room-page.tsx b/packages/apps/algo-app/src/components/create-room-page.tsx
index 5d94f42a26..26b6704315 100644
--- a/packages/apps/algo-app/src/components/create-room-page.tsx
+++ b/packages/apps/algo-app/src/components/create-room-page.tsx
@@ -40,7 +40,7 @@ export const CreateRoomPage = memoNamed('CreateRoomPage', () => {
           <Input
             disabled={loading}
             placeholder={dc.gamePassword.placeholder}
-            type='text'
+            type={"text"}
             value={password}
             onInput={onPasswordInput}
           />
@@ -50,7 +50,7 @@ export const CreateRoomPage = memoNamed('CreateRoomPage', () => {
           <Input
             disabled={loading}
             placeholder={dc.username.placeholder}
-            type='text'
+            type={"text"}
             value={username}
             onInput={onUsernameInput}
           />
@@ -58,7 +58,7 @@ export const CreateRoomPage = memoNamed('CreateRoomPage', () => {
         <ButtonWrapper>
           <ButtonPrimary
             disabled={disabled || loading}
-            type='button'
+            type={"button"}
             onClick={onCreateRoomButtonClick}
           >
             <ButtonContent>
diff --git a/packages/apps/algo-app/src/components/game-main.tsx b/packages/apps/algo-app/src/components/game-main.tsx
index b9f9087647..dd8c8fb0b2 100644
--- a/packages/apps/algo-app/src/components/game-main.tsx
+++ b/packages/apps/algo-app/src/components/game-main.tsx
@@ -68,7 +68,7 @@ export const GameMain = memoNamed<Props>('GameMain', ({ windowSize }) => {
       <EndTurnButtonWrapper>
         <EndTurnButton
           disabled={displayValues.endTurnButtonDisabled}
-          type='button'
+          type={"button"}
           onClick={onTurnEndClick}
         >
           {dictionary.gameMain.endTurnButton}
diff --git a/packages/apps/algo-app/src/components/join-room-page.tsx b/packages/apps/algo-app/src/components/join-room-page.tsx
index 90d4951bf7..4b25855881 100644
--- a/packages/apps/algo-app/src/components/join-room-page.tsx
+++ b/packages/apps/algo-app/src/components/join-room-page.tsx
@@ -56,7 +56,7 @@ export const JoinRoomPage = memoNamed<Props>('JoinRoomPage', ({ roomId }) => {
           <Label>{dc.gamePassword.label}</Label>
           <Input
             disabled={loading}
-            type='text'
+            type={"text"}
             value={password}
             onInput={onPasswordInput}
           />
@@ -70,7 +70,7 @@ export const JoinRoomPage = memoNamed<Props>('JoinRoomPage', ({ roomId }) => {
           <Label>{dc.username.label}</Label>
           <Input
             disabled={loading}
-            type='text'
+            type={"text"}
             value={username}
             onInput={onUsernameInput}
           />
@@ -78,7 +78,7 @@ export const JoinRoomPage = memoNamed<Props>('JoinRoomPage', ({ roomId }) => {
         <ButtonWrapper>
           <ButtonPrimary
             disabled={disabled || loading}
-            type='button'
+            type={"button"}
             onClick={onJoinRoomButtonClick}
           >
             {loading ? <Spinner size={20} /> : <span>{dc.button}</span>}
diff --git a/packages/apps/algo-app/src/components/organisms/turn-player-highlighter.tsx b/packages/apps/algo-app/src/components/organisms/turn-player-highlighter.tsx
index fee821c701..4cbe761dc2 100644
--- a/packages/apps/algo-app/src/components/organisms/turn-player-highlighter.tsx
+++ b/packages/apps/algo-app/src/components/organisms/turn-player-highlighter.tsx
@@ -7,16 +7,19 @@ type Props = Readonly<{
 
 export const TurnPlayerHighlighter = memoNamed<Props>(
   'TurnPlayerHighlighter',
-  ({ position }) => (
-    <Rectangle
-      style={{
+  ({ position }) => {
+    const style = useMemo(
+      () => ({
         top: `${position.top - playerNameRectPadding}px`,
         left: `${position.left - playerNameRectPadding}px`,
         width: `${position.width + 2 * playerNameRectPadding}px`,
         height: `${position.height + 2 * playerNameRectPadding}px`,
-      }}
-    />
-  ),
+      }),
+      [position.height, position.left, position.top, position.width],
+    );
+
+    return <Rectangle style={style} />;
+  },
 );
 
 const Rectangle = styled('div')`
diff --git a/packages/apps/blueprintjs-playground-styled/src/components/input-group-view.tsx b/packages/apps/blueprintjs-playground-styled/src/components/input-group-view.tsx
index d0808ea4b3..3c261b243a 100644
--- a/packages/apps/blueprintjs-playground-styled/src/components/input-group-view.tsx
+++ b/packages/apps/blueprintjs-playground-styled/src/components/input-group-view.tsx
@@ -29,7 +29,7 @@ export const InputGroupView = memoNamed<Props>(
         `}
         disabled={disabled}
         placeholder={placeholder}
-        type='text'
+        type={"text"}
         value={value}
         onChange={onChange}
       />
diff --git a/packages/apps/blueprintjs-playground-styled/src/components/numeric-input-view.tsx b/packages/apps/blueprintjs-playground-styled/src/components/numeric-input-view.tsx
index e91ddae614..5486a80f20 100644
--- a/packages/apps/blueprintjs-playground-styled/src/components/numeric-input-view.tsx
+++ b/packages/apps/blueprintjs-playground-styled/src/components/numeric-input-view.tsx
@@ -61,40 +61,40 @@ export const NumericInputView = memoNamed<Props>(
         `}
       >
         <InputAlignedRight
-          autoComplete='off'
+          autoComplete={"off"}
           disabled={disabled}
-          type='text'
+          type={"text"}
           value={value}
           onChange={noop}
         />
       </div>
       <div css={buttonGroupVerticalFixedStyle}>
-        <ButtonUp aria-label='increment' disabled={disabled} type='button'>
-          <IconWrapper aria-hidden='true'>
+        <ButtonUp aria-label={"increment"} disabled={disabled} type={"button"}>
+          <IconWrapper aria-hidden={"true"}>
             <ChevronUpDownIcon
-              data-icon='chevron-up'
-              height='16'
-              viewBox='0 0 16 16'
-              width='16'
+              data-icon={"chevron-up"}
+              height={"16"}
+              viewBox={"0 0 16 16"}
+              width={"16"}
             >
               <path
-                d='M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z'
-                fillRule='evenodd'
+                d={"M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z"}
+                fillRule={"evenodd"}
               />
             </ChevronUpDownIcon>
           </IconWrapper>
         </ButtonUp>
-        <ButtonDown aria-label='decrement' disabled={disabled} type='button'>
-          <IconWrapper aria-hidden='true'>
+        <ButtonDown aria-label={"decrement"} disabled={disabled} type={"button"}>
+          <IconWrapper aria-hidden={"true"}>
             <ChevronUpDownIcon
-              data-icon='chevron-down'
-              height='16'
-              viewBox='0 0 16 16'
-              width='16'
+              data-icon={"chevron-down"}
+              height={"16"}
+              viewBox={"0 0 16 16"}
+              width={"16"}
             >
               <path
-                d='M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z'
-                fillRule='evenodd'
+                d={"M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z"}
+                fillRule={"evenodd"}
               />
             </ChevronUpDownIcon>
           </IconWrapper>
diff --git a/packages/apps/cant-stop-probability-app/src/app.tsx b/packages/apps/cant-stop-probability-app/src/app.tsx
index e7c005ad78..832d83e66f 100644
--- a/packages/apps/cant-stop-probability-app/src/app.tsx
+++ b/packages/apps/cant-stop-probability-app/src/app.tsx
@@ -127,8 +127,8 @@ export const App = memoNamed('App', () => {
       <Navbar>
         <Navbar.Group>
           <Tabs selectedTabId={selectedTabId} onChange={handleTabChange}>
-            <Tab id='table' title='確率表' />
-            <Tab id='deadColumnUI' title='残存列確率' />
+            <Tab id={"table"} title={"確率表"} />
+            <Tab id={"deadColumnUI"} title={"残存列確率"} />
           </Tabs>
         </Navbar.Group>
       </Navbar>
diff --git a/packages/apps/catan-dice-app/src/components/dicer-number.tsx b/packages/apps/catan-dice-app/src/components/dicer-number.tsx
index de0ec2cf1a..1ca0633fab 100644
--- a/packages/apps/catan-dice-app/src/components/dicer-number.tsx
+++ b/packages/apps/catan-dice-app/src/components/dicer-number.tsx
@@ -1,21 +1,28 @@
 type Props = Readonly<{ n: number; opacity: number }>;
 
-export const DiceNumber = memoNamed<Props>('DiceNumber', ({ n, opacity }) => (
-  <div
-    css={css`
-      background-color: white;
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      border-style: solid;
-      border-width: 2px;
-      border-color: gray;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    `}
-    style={{ borderColor: `rgba(143, 186, 255, ${opacity})` }}
-  >
-    {n < 1 ? 0 : n}
-  </div>
-));
+export const DiceNumber = memoNamed<Props>('DiceNumber', ({ n, opacity }) => {
+  const style = useMemo(
+    () => ({ borderColor: `rgba(143, 186, 255, ${opacity})` }),
+    [opacity],
+  );
+
+  return (
+    <div
+      css={css`
+        background-color: white;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        border-style: solid;
+        border-width: 2px;
+        border-color: gray;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      `}
+      style={style}
+    >
+      {n < 1 ? 0 : n}
+    </div>
+  );
+});
diff --git a/packages/apps/catan-dice-app/src/components/main-view.tsx b/packages/apps/catan-dice-app/src/components/main-view.tsx
index d52e6c4f85..87758e3029 100644
--- a/packages/apps/catan-dice-app/src/components/main-view.tsx
+++ b/packages/apps/catan-dice-app/src/components/main-view.tsx
@@ -52,7 +52,7 @@ export const MainView = memoNamed<Props>(
         <List>
           <ListItem>
             <ListItemAvatar>
-              <Avatar alt='Dice 1' src={DiceIcon} />
+              <Avatar alt={"Dice 1"} src={DiceIcon} />
             </ListItemAvatar>
             <ListItemText>
               <DiceNumber n={diceValue1} opacity={opacity} />
@@ -60,7 +60,7 @@ export const MainView = memoNamed<Props>(
           </ListItem>
           <ListItem>
             <ListItemAvatar>
-              <Avatar alt='Dice 2' src={DiceIcon} />
+              <Avatar alt={"Dice 2"} src={DiceIcon} />
             </ListItemAvatar>
             <ListItemText>
               <DiceNumber n={diceValue2} opacity={opacity} />
@@ -68,7 +68,7 @@ export const MainView = memoNamed<Props>(
           </ListItem>
           <ListItem>
             <ListItemAvatar>
-              <Avatar alt='Sum' src={SumIcon} />
+              <Avatar alt={"Sum"} src={SumIcon} />
             </ListItemAvatar>
             <ListItemText>
               <DiceNumber n={diceValue1 + diceValue2} opacity={opacity} />
@@ -86,7 +86,7 @@ export const MainView = memoNamed<Props>(
             <Button
               color={'primary'}
               data-e2e={'roll-dice-button'}
-              variant='contained'
+              variant={"contained"}
               onClick={rollDices}
             >
               {'Roll dices!!!'}
@@ -97,7 +97,7 @@ export const MainView = memoNamed<Props>(
               color={'secondary'}
               data-e2e={'undo-button'}
               disabled={!undoable}
-              variant='contained'
+              variant={"contained"}
               onClick={undo}
             >
               {'Undo'}
@@ -108,7 +108,7 @@ export const MainView = memoNamed<Props>(
               color={'secondary'}
               data-e2e={'redo-button'}
               disabled={!redoable}
-              variant='contained'
+              variant={"contained"}
               onClick={redo}
             >
               {'Redo'}
diff --git a/packages/apps/color-demo-app/src/components/atoms/color-item.tsx b/packages/apps/color-demo-app/src/components/atoms/color-item.tsx
index 57a528403b..20fc57438d 100644
--- a/packages/apps/color-demo-app/src/components/atoms/color-item.tsx
+++ b/packages/apps/color-demo-app/src/components/atoms/color-item.tsx
@@ -4,13 +4,20 @@ type Props = Readonly<{
   hsl: Hsl;
 }>;
 
-export const ColorItem = memoNamed<Props>('ColorItem', (props) => (
-  <div
-    css={css`
-      width: 30px;
-      height: 30px;
-      border-radius: 25%;
-    `}
-    style={{ backgroundColor: hslToStr(props.hsl) }}
-  />
-));
+export const ColorItem = memoNamed<Props>('ColorItem', (props) => {
+  const style = useMemo(
+    () => ({ backgroundColor: hslToStr(props.hsl) }),
+    [props.hsl],
+  );
+
+  return (
+    <div
+      css={css`
+        width: 30px;
+        height: 30px;
+        border-radius: 25%;
+      `}
+      style={style}
+    />
+  );
+});
diff --git a/packages/apps/color-demo-app/src/components/molecules/division-number-slider.tsx b/packages/apps/color-demo-app/src/components/molecules/division-number-slider.tsx
index 227dd82e4d..74e2cbd2ed 100644
--- a/packages/apps/color-demo-app/src/components/molecules/division-number-slider.tsx
+++ b/packages/apps/color-demo-app/src/components/molecules/division-number-slider.tsx
@@ -16,7 +16,7 @@ export const DivisionNumberSlider = memoNamed<Props>(
     >
       <div>{'分割数'}</div>
       <MuiSlider
-        ariaLabelledby='division-number'
+        ariaLabelledby={"division-number"}
         max={30}
         min={2}
         step={1}
diff --git a/packages/apps/color-demo-app/src/components/molecules/first-hue-slider.tsx b/packages/apps/color-demo-app/src/components/molecules/first-hue-slider.tsx
index 41d98beb20..97ba08fd43 100644
--- a/packages/apps/color-demo-app/src/components/molecules/first-hue-slider.tsx
+++ b/packages/apps/color-demo-app/src/components/molecules/first-hue-slider.tsx
@@ -14,7 +14,7 @@ export const FirstHueSlider = memoNamed<Props>('FirstHueSlider', (props) => (
   >
     <div>{'色相0°位置'}</div>
     <MuiSlider
-      ariaLabelledby='first-hue'
+      ariaLabelledby={"first-hue"}
       max={359}
       min={0}
       step={1}
diff --git a/packages/apps/color-demo-app/src/components/molecules/saturation-lightness-slider.tsx b/packages/apps/color-demo-app/src/components/molecules/saturation-lightness-slider.tsx
index c180b4c9f6..860eb68340 100644
--- a/packages/apps/color-demo-app/src/components/molecules/saturation-lightness-slider.tsx
+++ b/packages/apps/color-demo-app/src/components/molecules/saturation-lightness-slider.tsx
@@ -20,7 +20,7 @@ export const AllSliders = memoNamed<Props>('AllSliders', (props) => (
     <SliderWrapper>
       <div>{'彩度'}</div>
       <MuiSlider
-        ariaLabelledby='saturation'
+        ariaLabelledby={"saturation"}
         max={100}
         min={0}
         step={5}
@@ -34,7 +34,7 @@ export const AllSliders = memoNamed<Props>('AllSliders', (props) => (
     <SliderWrapper>
       <div>{'明度'}</div>
       <MuiSlider
-        ariaLabelledby='lightness'
+        ariaLabelledby={"lightness"}
         max={100}
         min={0}
         step={5}
diff --git a/packages/apps/color-demo-app/src/components/organisms/color-list.tsx b/packages/apps/color-demo-app/src/components/organisms/color-list.tsx
index 2cc8515042..ee1461a789 100644
--- a/packages/apps/color-demo-app/src/components/organisms/color-list.tsx
+++ b/packages/apps/color-demo-app/src/components/organisms/color-list.tsx
@@ -7,30 +7,41 @@ type Props = Readonly<{
   lightness: Percent;
 }>;
 
-export const ColorList = memoNamed<Props>('ColorList', (props) => (
-  <div
-    css={css`
-      padding: 10px;
-    `}
-  >
-    <div>{'色相リスト'}</div>
+export const ColorList = memoNamed<Props>('ColorList', (props) => {
+  const hslList = useMemo(
+    () =>
+      Tpl.map(props.hueList, (hue, index) => ({
+        index,
+        hsl: [hue, props.saturation, props.lightness],
+      })),
+    [props.hueList, props.lightness, props.saturation],
+  );
+
+  return (
     <div
       css={css`
-        display: flex;
-        flex-direction: row;
         padding: 10px;
       `}
     >
-      {Tpl.map(props.hueList, (hue, index) => (
-        <div
-          key={index}
-          css={css`
-            padding: 3px;
-          `}
-        >
-          <ColorItem hsl={[hue, props.saturation, props.lightness]} />
-        </div>
-      ))}
+      <div>{'色相リスト'}</div>
+      <div
+        css={css`
+          display: flex;
+          flex-direction: row;
+          padding: 10px;
+        `}
+      >
+        {hslList.map(({ hsl, index }) => (
+          <div
+            key={index}
+            css={css`
+              padding: 3px;
+            `}
+          >
+            <ColorItem hsl={hsl} />
+          </div>
+        ))}
+      </div>
     </div>
-  </div>
-));
+  );
+});
diff --git a/packages/apps/color-demo-app/src/components/organisms/colored-distribution-selected.tsx b/packages/apps/color-demo-app/src/components/organisms/colored-distribution-selected.tsx
index f92c6e37b1..d5fa52cd36 100644
--- a/packages/apps/color-demo-app/src/components/organisms/colored-distribution-selected.tsx
+++ b/packages/apps/color-demo-app/src/components/organisms/colored-distribution-selected.tsx
@@ -7,41 +7,49 @@ type Props = Readonly<{
 
 export const ColoredDistributionSelected = memoNamed<Props>(
   'ColoredDistributionSelected',
-  (props) => (
-    <div
-      css={css`
-        width: 100%;
-        height: 300px;
-        display: flex;
-        flex-direction: row;
-      `}
-    >
-      {props.colorResult.accumulatedDistribution.map(([hsl, value]) => (
-        <div
-          key={hsl[0]}
-          css={css`
-            width: ${100 / 360}%;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
-          `}
-        >
-          <Bar
-            style={{
-              height: `${value * 95 + 5}%`,
-              backgroundColor: props.colorResult.pickedUpHues.includes(hsl[0])
-                ? hslToStr(hsl)
-                : 'transparent',
-            }}
-          />
-        </div>
-      ))}
-    </div>
-  ),
+  ({ colorResult }) => {
+    const accumulatedDistributionWithStyle = useMemo(
+      () =>
+        colorResult.accumulatedDistribution.map(([hsl, value]) => ({
+          hsl,
+          style: {
+            height: `${value * 95 + 5}%`,
+            backgroundColor: colorResult.pickedUpHues.includes(hsl[0])
+              ? hslToStr(hsl)
+              : 'transparent',
+          },
+        })),
+      [colorResult.accumulatedDistribution, colorResult.pickedUpHues],
+    );
+
+    return (
+      <Root>
+        {accumulatedDistributionWithStyle.map(({ hsl, style }) => (
+          <BarWrapper key={hsl[0]}>
+            <Bar style={style} />
+          </BarWrapper>
+        ))}
+      </Root>
+    );
+  },
 );
 
+const Root = styled.div`
+  width: 100%;
+  height: 300px;
+  display: flex;
+  flex-direction: row;
+`;
+
 const Bar = styled.div`
   width: 100%;
   /* border-color: black; */
 `;
+
+const BarWrapper = styled.div`
+  width: ${100 / 360}%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+`;
diff --git a/packages/apps/color-demo-app/src/components/organisms/colored-distribution.tsx b/packages/apps/color-demo-app/src/components/organisms/colored-distribution.tsx
index a1041305a2..2017954287 100644
--- a/packages/apps/color-demo-app/src/components/organisms/colored-distribution.tsx
+++ b/packages/apps/color-demo-app/src/components/organisms/colored-distribution.tsx
@@ -6,36 +6,45 @@ type Props = Readonly<{
 
 export const ColoredDistribution = memoNamed<Props>(
   'ColoredDistribution',
-  (props) => (
-    <div
-      css={css`
-        width: 100%;
-        height: 300px;
-        display: flex;
-        flex-direction: row;
-      `}
-    >
-      {props.accumulatedDistribution.map(([hsl, value]) => (
-        <div
-          key={hsl[0]}
-          css={css`
-            width: ${100 / 360}%;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
-          `}
-        >
-          <Bar
-            style={{
-              height: `${value * 100}%`,
-              backgroundColor: hslToStr(hsl),
-            }}
-          />
-        </div>
-      ))}
-    </div>
-  ),
+  (props) => {
+    const accumulatedDistributionWithStyle = useMemo(
+      () =>
+        props.accumulatedDistribution.map(([hsl, value]) => ({
+          hsl,
+          style: {
+            height: `${value * 100}%`,
+            backgroundColor: hslToStr(hsl),
+          },
+        })),
+      [props.accumulatedDistribution],
+    );
+
+    return (
+      <div
+        css={css`
+          width: 100%;
+          height: 300px;
+          display: flex;
+          flex-direction: row;
+        `}
+      >
+        {accumulatedDistributionWithStyle.map(({ hsl, style }) => (
+          <div
+            key={hsl[0]}
+            css={css`
+              width: ${100 / 360}%;
+              height: 100%;
+              display: flex;
+              flex-direction: column;
+              justify-content: flex-end;
+            `}
+          >
+            <Bar style={style} />
+          </div>
+        ))}
+      </div>
+    );
+  },
 );
 
 const Bar = styled.div`
diff --git a/packages/apps/color-demo-app/src/components/pages/luminance-visualizer/luminance-visualizer-view.tsx b/packages/apps/color-demo-app/src/components/pages/luminance-visualizer/luminance-visualizer-view.tsx
index a02cee764d..448c3cdbe0 100644
--- a/packages/apps/color-demo-app/src/components/pages/luminance-visualizer/luminance-visualizer-view.tsx
+++ b/packages/apps/color-demo-app/src/components/pages/luminance-visualizer/luminance-visualizer-view.tsx
@@ -37,7 +37,7 @@ export const LuminanceVisualizerView = memoNamed<Props>(
         padding: 10px;
       `}
     >
-      <PaperCustomized variant='outlined'>
+      <PaperCustomized variant={"outlined"}>
         <AllSliders
           divisionNumber={props.divisionNumber}
           divisionNumberOnChange={props.divisionNumberOnChange}
@@ -50,7 +50,7 @@ export const LuminanceVisualizerView = memoNamed<Props>(
         />
       </PaperCustomized>
 
-      <PaperCustomized variant='outlined'>
+      <PaperCustomized variant={"outlined"}>
         <Title>
           {'1. 彩度・明度を固定し色相を横軸としたときの相対輝度分布'}
         </Title>
@@ -59,7 +59,7 @@ export const LuminanceVisualizerView = memoNamed<Props>(
         />
       </PaperCustomized>
 
-      <PaperCustomized variant='outlined'>
+      <PaperCustomized variant={"outlined"}>
         <Title>{'2. 色相環から360/n度ずつ選出した場合'}</Title>
         <ColoredDistributionSelected
           colorResult={props.result1_equallySpaced}
@@ -80,7 +80,7 @@ export const LuminanceVisualizerView = memoNamed<Props>(
         </Variance>
       </PaperCustomized>
 
-      <PaperCustomized variant='outlined'>
+      <PaperCustomized variant={"outlined"}>
         <Title>{'3-a. 相対輝度の変化量の絶対値の累積分布'}</Title>
         <ColoredDistribution
           accumulatedDistribution={
@@ -89,7 +89,7 @@ export const LuminanceVisualizerView = memoNamed<Props>(
         />
       </PaperCustomized>
 
-      <PaperCustomized variant='outlined'>
+      <PaperCustomized variant={"outlined"}>
         <Title>{'3-b. 3-a.の分布の縦軸をn分割した場合の色相'}</Title>
         <ColoredDistributionSelected colorResult={props.result2_weighted} />
         <ColorList
@@ -106,7 +106,7 @@ export const LuminanceVisualizerView = memoNamed<Props>(
         </Variance>
       </PaperCustomized>
 
-      <PaperCustomized variant='outlined'>
+      <PaperCustomized variant={"outlined"}>
         <Title>{'4-a. 相対輝度の変化量の絶対値のlogの累積分布'}</Title>
         <ColoredDistribution
           accumulatedDistribution={
@@ -115,7 +115,7 @@ export const LuminanceVisualizerView = memoNamed<Props>(
         />
       </PaperCustomized>
 
-      <PaperCustomized variant='outlined'>
+      <PaperCustomized variant={"outlined"}>
         <Title>{'4-b. 4-a.の分布の縦軸をn分割した場合の色相'}</Title>
         <ColoredDistributionSelected colorResult={props.result3_weighted_log} />
         <ColorList
diff --git a/packages/apps/color-demo-app/src/components/pages/text-color-contrast-table.tsx b/packages/apps/color-demo-app/src/components/pages/text-color-contrast-table.tsx
index 366b5e5c37..caed10b7e1 100644
--- a/packages/apps/color-demo-app/src/components/pages/text-color-contrast-table.tsx
+++ b/packages/apps/color-demo-app/src/components/pages/text-color-contrast-table.tsx
@@ -26,9 +26,114 @@ const SL = Arr.zip(
   indices,
 ) satisfies DeepReadonly<[[Percent, Percent], Uint8][]>;
 
+const hslWithStyle = huesDefault.map((hue, idx) => ({
+  hue,
+  idx,
+  SLStyle: SL.map(([[saturation, lightness], key]) => {
+    const contrastWhite = contrastRatioHsl(whiteHsl, [
+      hue,
+      saturation,
+      lightness,
+    ]);
+    const contrastBlack = contrastRatioHsl(
+      [hue, saturation, lightness],
+      blackHsl,
+    );
+
+    return {
+      key,
+      contrastWhite,
+      contrastBlack,
+      hslStyle: `hsl(${hue}, ${saturation}%, ${lightness}%)`,
+      whiteStyle: {
+        backgroundColor: `hsl(${hue}, ${saturation}%, ${lightness}%)`,
+        color: 'white',
+      },
+      blackStyle: {
+        backgroundColor: `hsl(${hue}, ${saturation}%, ${lightness}%)`,
+        color: 'black',
+      },
+      contrastWhiteDisplayValue: Num.roundAt(contrastWhite, 2),
+      contrastBlackDisplayValue: Num.roundAt(contrastBlack, 2),
+    };
+  }),
+}));
+
 export const TextColorContrastTable = memoNamed(
   'TextColorContrastTable',
-  () => componentElement,
+  () => (
+    <Root>
+      <PaperCustomized variant={'outlined'}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell align={'center'}>{'Saturation（彩度）'}</TableCell>
+              {saturationListWithIndex.map(([sat, i]) => (
+                <Fragment key={i}>
+                  <TableCell align={'center'}>{sat}</TableCell>
+                  <TableCell align={'center'}>{sat}</TableCell>
+                </Fragment>
+              ))}
+            </TableRow>
+            <TableRow>
+              <TableCell align={'center'}>{'Lightness（輝度）'}</TableCell>
+              {lightnessListWithIndex.map(([lightness, i]) => (
+                <Fragment key={i}>
+                  <TableCell align={'center'}>{lightness}</TableCell>
+                  <TableCell align={'center'}>{lightness}</TableCell>
+                </Fragment>
+              ))}
+            </TableRow>
+            <TableRow>
+              <TableCell align={'center'}>{'Hue（色相）'}</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {hslWithStyle.map(({ hue, SLStyle, idx }) => (
+              <TableRow key={hue}>
+                <TableCell align={'center'}>{idx}</TableCell>
+                {SLStyle.map(
+                  ({
+                    contrastWhite,
+                    contrastWhiteDisplayValue,
+                    contrastBlack,
+                    contrastBlackDisplayValue,
+                    whiteStyle,
+                    blackStyle,
+                    hslStyle,
+                    key,
+                  }) => (
+                    <Fragment key={key}>
+                      <TableCell align={'left'} style={whiteStyle}>
+                        <label>
+                          <input
+                            defaultChecked={contrastWhite > contrastBlack}
+                            name={hslStyle}
+                            type={'checkbox'}
+                          />
+                          {contrastWhiteDisplayValue}
+                        </label>
+                      </TableCell>
+                      <TableCell align={'left'} style={blackStyle}>
+                        <label>
+                          <input
+                            defaultChecked={contrastWhite <= contrastBlack}
+                            name={hslStyle}
+                            type={'checkbox'}
+                          />
+                          {contrastBlackDisplayValue}
+                        </label>
+                      </TableCell>
+                    </Fragment>
+                  ),
+                )}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </PaperCustomized>
+    </Root>
+  ),
 );
 
 const PaperCustomized = styled(Paper)`
@@ -36,92 +141,9 @@ const PaperCustomized = styled(Paper)`
   padding: 10px;
 `;
 
-const componentElement = (
-  <div
-    css={css`
-      width: 100%;
-      height: 100%;
-      background-color: #c2c2c2;
-      padding: 10px;
-    `}
-  >
-    <PaperCustomized variant='outlined'>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell align='center'>{'Saturation（彩度）'}</TableCell>
-            {saturationListWithIndex.map(([sat, i]) => (
-              <Fragment key={i}>
-                <TableCell align='center'>{sat}</TableCell>
-                <TableCell align='center'>{sat}</TableCell>
-              </Fragment>
-            ))}
-          </TableRow>
-          <TableRow>
-            <TableCell align='center'>{'Lightness（輝度）'}</TableCell>
-            {lightnessListWithIndex.map(([lightness, i]) => (
-              <Fragment key={i}>
-                <TableCell align='center'>{lightness}</TableCell>
-                <TableCell align='center'>{lightness}</TableCell>
-              </Fragment>
-            ))}
-          </TableRow>
-          <TableRow>
-            <TableCell align='center'>{'Hue（色相）'}</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {huesDefault.map((hue, idx) => (
-            <TableRow key={hue}>
-              <TableCell align='center'>{idx}</TableCell>
-              {SL.map(([[saturation, lightness], key]) => {
-                const contrastWhite = contrastRatioHsl(whiteHsl, [
-                  hue,
-                  saturation,
-                  lightness,
-                ]);
-                const contrastBlack = contrastRatioHsl(
-                  [hue, saturation, lightness],
-                  blackHsl,
-                );
-
-                const hslStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
-
-                return (
-                  <Fragment key={key}>
-                    <TableCell
-                      align='left'
-                      style={{ backgroundColor: hslStyle, color: 'white' }}
-                    >
-                      <label>
-                        <input
-                          defaultChecked={contrastWhite > contrastBlack}
-                          name={hslStyle}
-                          type='checkbox'
-                        />
-                        {Num.roundAt(contrastWhite, 2)}
-                      </label>
-                    </TableCell>
-                    <TableCell
-                      align='left'
-                      style={{ backgroundColor: hslStyle, color: 'black' }}
-                    >
-                      <label>
-                        <input
-                          defaultChecked={contrastWhite <= contrastBlack}
-                          name={hslStyle}
-                          type='checkbox'
-                        />
-                        {Num.roundAt(contrastBlack, 2)}
-                      </label>
-                    </TableCell>
-                  </Fragment>
-                );
-              })}
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </PaperCustomized>
-  </div>
-);
+const Root = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: #c2c2c2;
+  padding: 10px;
+`;
diff --git a/packages/apps/event-schedule-app/src/components/atoms/description.tsx b/packages/apps/event-schedule-app/src/components/atoms/description.tsx
index 79449a2f8d..e181549602 100644
--- a/packages/apps/event-schedule-app/src/components/atoms/description.tsx
+++ b/packages/apps/event-schedule-app/src/components/atoms/description.tsx
@@ -8,19 +8,26 @@ type Props = Readonly<{
 
 export const Description = memoNamed<Props>(
   'Description',
-  ({ text, error = false, color }) => (
-    <div
-      css={css`
-        font-size: smaller;
-        margin-bottom: 5px;
-      `}
-      style={{
+  ({ text, error = false, color }) => {
+    const style = useMemo(
+      () => ({
         color:
           color ??
           (error ? descriptionFontColor.error : descriptionFontColor.normal),
-      }}
-    >
-      {text}
-    </div>
-  ),
+      }),
+      [color, error],
+    );
+
+    return (
+      <div
+        css={css`
+          font-size: smaller;
+          margin-bottom: 5px;
+        `}
+        style={style}
+      >
+        {text}
+      </div>
+    );
+  },
 );
diff --git a/packages/apps/event-schedule-app/src/components/atoms/icons/calendar.tsx b/packages/apps/event-schedule-app/src/components/atoms/icons/calendar.tsx
index 798a27b1f9..58e8cfd6ec 100644
--- a/packages/apps/event-schedule-app/src/components/atoms/icons/calendar.tsx
+++ b/packages/apps/event-schedule-app/src/components/atoms/icons/calendar.tsx
@@ -8,52 +8,52 @@ export const CalendarIcon = memoNamed<Props>(
   'CalendarIcon',
   ({ size = 16, color = 'black', style }) => (
     <svg
-      fill='none'
+      fill={"none"}
       height={size}
       style={style}
-      viewBox='0 0 32 32'
+      viewBox={"0 0 32 32"}
       width={size}
-      xmlns='http://www.w3.org/2000/svg'
+      xmlns={"http://www.w3.org/2000/svg"}
     >
       <g>
         <path
-          d='M22.9334 13.3333C17.9261 13.3333 13.8667 17.3927 13.8667 22.4C13.8667 27.4073 17.9261 31.4667 22.9334 31.4667C27.9407 31.4667 32 27.4073 32 22.4C31.9946 17.3951 27.9383 13.3388 22.9334 13.3333ZM22.9334 30.4C18.5151 30.4 14.9334 26.8182 14.9334 22.4C14.9334 17.9818 18.5151 14.4 22.9334 14.4C27.3516 14.4 30.9334 17.9818 30.9334 22.4C30.9284 26.8161 27.3495 30.3951 22.9334 30.4Z'
+          d={"M22.9334 13.3333C17.9261 13.3333 13.8667 17.3927 13.8667 22.4C13.8667 27.4073 17.9261 31.4667 22.9334 31.4667C27.9407 31.4667 32 27.4073 32 22.4C31.9946 17.3951 27.9383 13.3388 22.9334 13.3333ZM22.9334 30.4C18.5151 30.4 14.9334 26.8182 14.9334 22.4C14.9334 17.9818 18.5151 14.4 22.9334 14.4C27.3516 14.4 30.9334 17.9818 30.9334 22.4C30.9284 26.8161 27.3495 30.3951 22.9334 30.4Z"}
           fill={color}
         />
         <path
-          d='M23.4667 20.8982V17.6H22.4V20.8982C21.9482 21.0594 21.5927 21.4149 21.4315 21.8667H19.2V22.9334H21.4315C21.6781 23.6354 22.3773 24.074 23.1169 23.9904C23.8565 23.9065 24.4398 23.3232 24.5237 22.5836C24.6073 21.844 24.1687 21.1448 23.4667 20.8982ZM22.9333 22.9334C22.6388 22.9334 22.4 22.6946 22.4 22.4C22.4 22.1055 22.6388 21.8667 22.9333 21.8667C23.2279 21.8667 23.4667 22.1055 23.4667 22.4C23.4667 22.6946 23.2279 22.9334 22.9333 22.9334Z'
+          d={"M23.4667 20.8982V17.6H22.4V20.8982C21.9482 21.0594 21.5927 21.4149 21.4315 21.8667H19.2V22.9334H21.4315C21.6781 23.6354 22.3773 24.074 23.1169 23.9904C23.8565 23.9065 24.4398 23.3232 24.5237 22.5836C24.6073 21.844 24.1687 21.1448 23.4667 20.8982ZM22.9333 22.9334C22.6388 22.9334 22.4 22.6946 22.4 22.4C22.4 22.1055 22.6388 21.8667 22.9333 21.8667C23.2279 21.8667 23.4667 22.1055 23.4667 22.4C23.4667 22.6946 23.2279 22.9334 22.9333 22.9334Z"}
           fill={color}
         />
-        <path d='M16 21.8667H17.0667V22.9333H16V21.8667Z' fill={color} />
-        <path d='M22.4 28.2667H23.4666V29.3333H22.4V28.2667Z' fill={color} />
-        <path d='M28.8 21.8667H29.8667V22.9333H28.8V21.8667Z' fill={color} />
-        <path d='M22.4 15.4667H23.4666V16.5333H22.4V15.4667Z' fill={color} />
+        <path d={"M16 21.8667H17.0667V22.9333H16V21.8667Z"} fill={color} />
+        <path d={"M22.4 28.2667H23.4666V29.3333H22.4V28.2667Z"} fill={color} />
+        <path d={"M28.8 21.8667H29.8667V22.9333H28.8V21.8667Z"} fill={color} />
+        <path d={"M22.4 15.4667H23.4666V16.5333H22.4V15.4667Z"} fill={color} />
         <path
-          d='M1.06667 23.4667V8H25.6V12.8H26.6667V5.33334C26.6648 3.8612 25.4721 2.66849 24 2.66667H20.2667V2.13334C20.2667 1.24974 19.5503 0.533337 18.6667 0.533337C17.7831 0.533337 17.0667 1.24974 17.0667 2.13334V2.66667H9.6V2.13334C9.6 1.24974 8.88359 0.533337 8 0.533337C7.11641 0.533337 6.4 1.24974 6.4 2.13334V2.66667H2.66667C1.19453 2.66849 0.00182292 3.8612 0 5.33334V23.4667C0.00182292 24.9388 1.19453 26.1315 2.66667 26.1333H13.3333V25.0667H2.66667C1.78307 25.0667 1.06667 24.3503 1.06667 23.4667ZM18.1333 2.13334C18.1333 1.83881 18.3721 1.6 18.6667 1.6C18.9612 1.6 19.2 1.83881 19.2 2.13334V4.26667C19.2 4.5612 18.9612 4.8 18.6667 4.8C18.3721 4.8 18.1333 4.5612 18.1333 4.26667V2.13334ZM7.46667 2.13334C7.46667 1.83881 7.70547 1.6 8 1.6C8.29453 1.6 8.53333 1.83881 8.53333 2.13334V4.26667C8.53333 4.5612 8.29453 4.8 8 4.8C7.70547 4.8 7.46667 4.5612 7.46667 4.26667V2.13334ZM2.66667 3.73334H6.4V4.26667C6.4 5.15026 7.11641 5.86667 8 5.86667C8.88359 5.86667 9.6 5.15026 9.6 4.26667V3.73334H17.0667V4.26667C17.0667 5.15026 17.7831 5.86667 18.6667 5.86667C19.5503 5.86667 20.2667 5.15026 20.2667 4.26667V3.73334H24C24.8836 3.73334 25.6 4.44974 25.6 5.33334V6.93334H1.06667V5.33334C1.06667 4.44974 1.78307 3.73334 2.66667 3.73334Z'
+          d={"M1.06667 23.4667V8H25.6V12.8H26.6667V5.33334C26.6648 3.8612 25.4721 2.66849 24 2.66667H20.2667V2.13334C20.2667 1.24974 19.5503 0.533337 18.6667 0.533337C17.7831 0.533337 17.0667 1.24974 17.0667 2.13334V2.66667H9.6V2.13334C9.6 1.24974 8.88359 0.533337 8 0.533337C7.11641 0.533337 6.4 1.24974 6.4 2.13334V2.66667H2.66667C1.19453 2.66849 0.00182292 3.8612 0 5.33334V23.4667C0.00182292 24.9388 1.19453 26.1315 2.66667 26.1333H13.3333V25.0667H2.66667C1.78307 25.0667 1.06667 24.3503 1.06667 23.4667ZM18.1333 2.13334C18.1333 1.83881 18.3721 1.6 18.6667 1.6C18.9612 1.6 19.2 1.83881 19.2 2.13334V4.26667C19.2 4.5612 18.9612 4.8 18.6667 4.8C18.3721 4.8 18.1333 4.5612 18.1333 4.26667V2.13334ZM7.46667 2.13334C7.46667 1.83881 7.70547 1.6 8 1.6C8.29453 1.6 8.53333 1.83881 8.53333 2.13334V4.26667C8.53333 4.5612 8.29453 4.8 8 4.8C7.70547 4.8 7.46667 4.5612 7.46667 4.26667V2.13334ZM2.66667 3.73334H6.4V4.26667C6.4 5.15026 7.11641 5.86667 8 5.86667C8.88359 5.86667 9.6 5.15026 9.6 4.26667V3.73334H17.0667V4.26667C17.0667 5.15026 17.7831 5.86667 18.6667 5.86667C19.5503 5.86667 20.2667 5.15026 20.2667 4.26667V3.73334H24C24.8836 3.73334 25.6 4.44974 25.6 5.33334V6.93334H1.06667V5.33334C1.06667 4.44974 1.78307 3.73334 2.66667 3.73334Z"}
           fill={color}
         />
         <path
-          d='M7.46668 12.2667C7.46668 11.6776 6.98908 11.2 6.40001 11.2H4.26668C3.67762 11.2 3.20001 11.6776 3.20001 12.2667V14.4C3.20001 14.9891 3.67762 15.4667 4.26668 15.4667H6.40001C6.98908 15.4667 7.46668 14.9891 7.46668 14.4V12.2667ZM4.26668 14.4V12.2667H6.40001V14.4H4.26668Z'
+          d={"M7.46668 12.2667C7.46668 11.6776 6.98908 11.2 6.40001 11.2H4.26668C3.67762 11.2 3.20001 11.6776 3.20001 12.2667V14.4C3.20001 14.9891 3.67762 15.4667 4.26668 15.4667H6.40001C6.98908 15.4667 7.46668 14.9891 7.46668 14.4V12.2667ZM4.26668 14.4V12.2667H6.40001V14.4H4.26668Z"}
           fill={color}
         />
         <path
-          d='M12.8 12.2667C12.8 11.6776 12.3224 11.2 11.7333 11.2H9.59999C9.01093 11.2 8.53333 11.6776 8.53333 12.2667V14.4C8.53333 14.9891 9.01093 15.4667 9.59999 15.4667H11.7333C12.3224 15.4667 12.8 14.9891 12.8 14.4V12.2667ZM9.59999 14.4V12.2667H11.7333V14.4H9.59999Z'
+          d={"M12.8 12.2667C12.8 11.6776 12.3224 11.2 11.7333 11.2H9.59999C9.01093 11.2 8.53333 11.6776 8.53333 12.2667V14.4C8.53333 14.9891 9.01093 15.4667 9.59999 15.4667H11.7333C12.3224 15.4667 12.8 14.9891 12.8 14.4V12.2667ZM9.59999 14.4V12.2667H11.7333V14.4H9.59999Z"}
           fill={color}
         />
         <path
-          d='M18.1334 13.8667V12.2667C18.1334 11.6776 17.6558 11.2 17.0667 11.2H14.9334C14.3443 11.2 13.8667 11.6776 13.8667 12.2667V14.4C13.8667 14.9891 14.3443 15.4667 14.9334 15.4667H16V14.4H14.9334V12.2667H17.0667V13.8667H18.1334Z'
+          d={"M18.1334 13.8667V12.2667C18.1334 11.6776 17.6558 11.2 17.0667 11.2H14.9334C14.3443 11.2 13.8667 11.6776 13.8667 12.2667V14.4C13.8667 14.9891 14.3443 15.4667 14.9334 15.4667H16V14.4H14.9334V12.2667H17.0667V13.8667H18.1334Z"}
           fill={color}
         />
         <path
-          d='M6.40001 17.6H4.26668C3.67762 17.6 3.20001 18.0776 3.20001 18.6667V20.8C3.20001 21.3891 3.67762 21.8667 4.26668 21.8667H6.40001C6.98908 21.8667 7.46668 21.3891 7.46668 20.8V18.6667C7.46668 18.0776 6.98908 17.6 6.40001 17.6ZM4.26668 20.8V18.6667H6.40001V20.8H4.26668Z'
+          d={"M6.40001 17.6H4.26668C3.67762 17.6 3.20001 18.0776 3.20001 18.6667V20.8C3.20001 21.3891 3.67762 21.8667 4.26668 21.8667H6.40001C6.98908 21.8667 7.46668 21.3891 7.46668 20.8V18.6667C7.46668 18.0776 6.98908 17.6 6.40001 17.6ZM4.26668 20.8V18.6667H6.40001V20.8H4.26668Z"}
           fill={color}
         />
         <path
-          d='M11.7333 17.6H9.59999C9.01093 17.6 8.53333 18.0776 8.53333 18.6667V20.8C8.53333 21.3891 9.01093 21.8667 9.59999 21.8667H11.7333C12.3224 21.8667 12.8 21.3891 12.8 20.8V18.6667C12.8 18.0776 12.3224 17.6 11.7333 17.6ZM9.59999 20.8V18.6667H11.7333V20.8H9.59999Z'
+          d={"M11.7333 17.6H9.59999C9.01093 17.6 8.53333 18.0776 8.53333 18.6667V20.8C8.53333 21.3891 9.01093 21.8667 9.59999 21.8667H11.7333C12.3224 21.8667 12.8 21.3891 12.8 20.8V18.6667C12.8 18.0776 12.3224 17.6 11.7333 17.6ZM9.59999 20.8V18.6667H11.7333V20.8H9.59999Z"}
           fill={color}
         />
         <path
-          d='M23.4667 12.8V12.2667C23.4667 11.6776 22.9891 11.2 22.4 11.2H20.2667C19.6776 11.2 19.2 11.6776 19.2 12.2667V12.8H20.2667V12.2667H22.4V12.8H23.4667Z'
+          d={"M23.4667 12.8V12.2667C23.4667 11.6776 22.9891 11.2 22.4 11.2H20.2667C19.6776 11.2 19.2 11.6776 19.2 12.2667V12.8H20.2667V12.2667H22.4V12.8H23.4667Z"}
           fill={color}
         />
       </g>
diff --git a/packages/apps/event-schedule-app/src/components/atoms/icons/circle.tsx b/packages/apps/event-schedule-app/src/components/atoms/icons/circle.tsx
index 4f3327a754..9303c5e8a0 100644
--- a/packages/apps/event-schedule-app/src/components/atoms/icons/circle.tsx
+++ b/packages/apps/event-schedule-app/src/components/atoms/icons/circle.tsx
@@ -8,15 +8,15 @@ export const CircleIcon = memoNamed<Props>(
   'CircleIcon',
   ({ size = 16, color = 'black', style }) => (
     <svg
-      fill='none'
+      fill={"none"}
       height={size}
       style={style}
-      viewBox='0 0 32 32'
+      viewBox={"0 0 32 32"}
       width={size}
-      xmlns='http://www.w3.org/2000/svg'
+      xmlns={"http://www.w3.org/2000/svg"}
     >
       <path
-        d='M16 32C7.17775 32 0 24.8223 0 16C0 7.17775 7.17775 0 16 0C24.8223 0 32 7.17775 32 16C32 24.8223 24.8223 32 16 32ZM16 3.2C8.2803 3.2 3.2 8.28128 3.2 16C3.2 23.7187 8.2803 28.8 16 28.8C23.7197 28.8 28.8 23.7187 28.8 16C28.8 8.28128 23.7197 3.2 16 3.2Z'
+        d={"M16 32C7.17775 32 0 24.8223 0 16C0 7.17775 7.17775 0 16 0C24.8223 0 32 7.17775 32 16C32 24.8223 24.8223 32 16 32ZM16 3.2C8.2803 3.2 3.2 8.28128 3.2 16C3.2 23.7187 8.2803 28.8 16 28.8C23.7197 28.8 28.8 23.7187 28.8 16C28.8 8.28128 23.7197 3.2 16 3.2Z"}
         fill={color}
       />
     </svg>
diff --git a/packages/apps/event-schedule-app/src/components/atoms/icons/close.tsx b/packages/apps/event-schedule-app/src/components/atoms/icons/close.tsx
index 6506f9b1ff..0e95bbd18e 100644
--- a/packages/apps/event-schedule-app/src/components/atoms/icons/close.tsx
+++ b/packages/apps/event-schedule-app/src/components/atoms/icons/close.tsx
@@ -8,15 +8,15 @@ export const CloseIcon = memoNamed<Props>(
   'CloseIcon',
   ({ size = 16, color = 'black', style }) => (
     <svg
-      fill='none'
+      fill={"none"}
       height={size}
       style={style}
-      viewBox='0 0 32 32'
+      viewBox={"0 0 32 32"}
       width={size}
-      xmlns='http://www.w3.org/2000/svg'
+      xmlns={"http://www.w3.org/2000/svg"}
     >
       <path
-        d='M31.6464 2.63927C31.8417 2.44401 31.8417 2.12742 31.6464 1.93216L30.0678 0.353553C29.8726 0.158291 29.556 0.158291 29.3607 0.353553L16 13.7143L2.63927 0.353553C2.44401 0.158291 2.12742 0.158291 1.93216 0.353553L0.353553 1.93216C0.158291 2.12742 0.158291 2.44401 0.353553 2.63927L13.7143 16L0.353553 29.3607C0.158291 29.556 0.158291 29.8726 0.353553 30.0678L1.93216 31.6464C2.12742 31.8417 2.44401 31.8417 2.63927 31.6464L16 18.2857L29.3607 31.6464C29.556 31.8417 29.8726 31.8417 30.0678 31.6464L31.6464 30.0678C31.8417 29.8726 31.8417 29.556 31.6464 29.3607L18.2857 16L31.6464 2.63927Z'
+        d={"M31.6464 2.63927C31.8417 2.44401 31.8417 2.12742 31.6464 1.93216L30.0678 0.353553C29.8726 0.158291 29.556 0.158291 29.3607 0.353553L16 13.7143L2.63927 0.353553C2.44401 0.158291 2.12742 0.158291 1.93216 0.353553L0.353553 1.93216C0.158291 2.12742 0.158291 2.44401 0.353553 2.63927L13.7143 16L0.353553 29.3607C0.158291 29.556 0.158291 29.8726 0.353553 30.0678L1.93216 31.6464C2.12742 31.8417 2.44401 31.8417 2.63927 31.6464L16 18.2857L29.3607 31.6464C29.556 31.8417 29.8726 31.8417 30.0678 31.6464L31.6464 30.0678C31.8417 29.8726 31.8417 29.556 31.6464 29.3607L18.2857 16L31.6464 2.63927Z"}
         fill={color}
       />
     </svg>
diff --git a/packages/apps/event-schedule-app/src/components/atoms/icons/comment.tsx b/packages/apps/event-schedule-app/src/components/atoms/icons/comment.tsx
index 10c67fbad9..5bf2839e0d 100644
--- a/packages/apps/event-schedule-app/src/components/atoms/icons/comment.tsx
+++ b/packages/apps/event-schedule-app/src/components/atoms/icons/comment.tsx
@@ -8,27 +8,27 @@ export const CommentIcon = memoNamed<Props>(
   'CommentIcon',
   ({ size = 16, color = 'black', style }) => (
     <svg
-      fill='none'
+      fill={"none"}
       height={size}
       style={style}
-      viewBox='0 0 35 33'
+      viewBox={"0 0 35 33"}
       width={size}
-      xmlns='http://www.w3.org/2000/svg'
+      xmlns={"http://www.w3.org/2000/svg"}
     >
       <path
-        d='M28.1337 32.2573C27.9691 32.2573 27.8064 32.1954 27.6757 32.076L20.5818 25.5948H4.86536C2.18257 25.5947 0 23.2294 0 20.322V5.27267C0 2.36529 2.18257 0 4.86536 0H30.1346C32.8174 0 35 2.36537 35 5.27267V20.322C35 23.2294 32.8174 25.5947 30.1346 25.5947H28.8439V31.4875C28.8439 31.787 28.6836 32.0593 28.433 32.1854C28.3374 32.2336 28.2352 32.2573 28.1337 32.2573ZM4.86536 1.5396C2.96593 1.5396 1.42064 3.21422 1.42064 5.27267V20.322C1.42064 22.3804 2.96593 24.0551 4.86536 24.0551H20.8412C21.0088 24.0551 21.1709 24.1193 21.2991 24.2363L27.4232 29.8316V24.8249C27.4232 24.3998 27.7413 24.0551 28.1336 24.0551H30.1346C32.0341 24.0551 33.5794 22.3804 33.5794 20.322V5.27267C33.5794 3.21422 32.0341 1.5396 30.1346 1.5396H4.86536V1.5396Z'
+        d={"M28.1337 32.2573C27.9691 32.2573 27.8064 32.1954 27.6757 32.076L20.5818 25.5948H4.86536C2.18257 25.5947 0 23.2294 0 20.322V5.27267C0 2.36529 2.18257 0 4.86536 0H30.1346C32.8174 0 35 2.36537 35 5.27267V20.322C35 23.2294 32.8174 25.5947 30.1346 25.5947H28.8439V31.4875C28.8439 31.787 28.6836 32.0593 28.433 32.1854C28.3374 32.2336 28.2352 32.2573 28.1337 32.2573ZM4.86536 1.5396C2.96593 1.5396 1.42064 3.21422 1.42064 5.27267V20.322C1.42064 22.3804 2.96593 24.0551 4.86536 24.0551H20.8412C21.0088 24.0551 21.1709 24.1193 21.2991 24.2363L27.4232 29.8316V24.8249C27.4232 24.3998 27.7413 24.0551 28.1336 24.0551H30.1346C32.0341 24.0551 33.5794 22.3804 33.5794 20.322V5.27267C33.5794 3.21422 32.0341 1.5396 30.1346 1.5396H4.86536V1.5396Z"}
         fill={color}
       />
       <path
-        d='M28.9405 8.62065H6.05941C5.66712 8.62065 5.34912 8.27593 5.34912 7.85084C5.34912 7.42567 5.66712 7.08103 6.05941 7.08103H28.9405C29.3328 7.08103 29.6508 7.42567 29.6508 7.85084C29.6508 8.27593 29.3328 8.62065 28.9405 8.62065Z'
+        d={"M28.9405 8.62065H6.05941C5.66712 8.62065 5.34912 8.27593 5.34912 7.85084C5.34912 7.42567 5.66712 7.08103 6.05941 7.08103H28.9405C29.3328 7.08103 29.6508 7.42567 29.6508 7.85084C29.6508 8.27593 29.3328 8.62065 28.9405 8.62065Z"}
         fill={color}
       />
       <path
-        d='M28.9405 13.55H6.05941C5.66712 13.55 5.34912 13.2053 5.34912 12.7802C5.34912 12.355 5.66712 12.0104 6.05941 12.0104H28.9405C29.3328 12.0104 29.6508 12.355 29.6508 12.7802C29.6508 13.2053 29.3328 13.55 28.9405 13.55Z'
+        d={"M28.9405 13.55H6.05941C5.66712 13.55 5.34912 13.2053 5.34912 12.7802C5.34912 12.355 5.66712 12.0104 6.05941 12.0104H28.9405C29.3328 12.0104 29.6508 12.355 29.6508 12.7802C29.6508 13.2053 29.3328 13.55 28.9405 13.55Z"}
         fill={color}
       />
       <path
-        d='M28.9405 18.4793H6.05941C5.66712 18.4793 5.34912 18.1346 5.34912 17.7095C5.34912 17.2843 5.66712 16.9397 6.05941 16.9397H28.9405C29.3328 16.9397 29.6508 17.2843 29.6508 17.7095C29.6508 18.1346 29.3328 18.4793 28.9405 18.4793Z'
+        d={"M28.9405 18.4793H6.05941C5.66712 18.4793 5.34912 18.1346 5.34912 17.7095C5.34912 17.2843 5.66712 16.9397 6.05941 16.9397H28.9405C29.3328 16.9397 29.6508 17.2843 29.6508 17.7095C29.6508 18.1346 29.3328 18.4793 28.9405 18.4793Z"}
         fill={color}
       />
     </svg>
diff --git a/packages/apps/event-schedule-app/src/components/atoms/icons/delete.tsx b/packages/apps/event-schedule-app/src/components/atoms/icons/delete.tsx
index d740a64bc6..7ba4ce18a7 100644
--- a/packages/apps/event-schedule-app/src/components/atoms/icons/delete.tsx
+++ b/packages/apps/event-schedule-app/src/components/atoms/icons/delete.tsx
@@ -8,27 +8,27 @@ export const DeleteIcon = memoNamed<Props>(
   'DeleteIcon',
   ({ size = 16, style, color = '#8E8E8E' }) => (
     <svg
-      fill='none'
+      fill={"none"}
       height={size}
       style={style}
-      viewBox='0 0 33 40'
+      viewBox={"0 0 33 40"}
       width={size}
-      xmlns='http://www.w3.org/2000/svg'
+      xmlns={"http://www.w3.org/2000/svg"}
     >
       <path
-        d='M10.7167 14.4922C11.2341 14.4922 11.6534 14.9116 11.6534 15.429V33.1339C11.6534 33.6509 11.2341 34.0706 10.7167 34.0706C10.1993 34.0706 9.7799 33.6509 9.7799 33.1339V15.429C9.7799 14.9116 10.1993 14.4922 10.7167 14.4922Z'
+        d={"M10.7167 14.4922C11.2341 14.4922 11.6534 14.9116 11.6534 15.429V33.1339C11.6534 33.6509 11.2341 34.0706 10.7167 34.0706C10.1993 34.0706 9.7799 33.6509 9.7799 33.1339V15.429C9.7799 14.9116 10.1993 14.4922 10.7167 14.4922Z"}
         fill={color}
       />
       <path
-        d='M21.7707 14.4922C22.2881 14.4922 22.7075 14.9116 22.7075 15.429V33.1339C22.7075 33.6509 22.2881 34.0706 21.7707 34.0706C21.2533 34.0706 20.8339 33.6509 20.8339 33.1339V15.429C20.8339 14.9116 21.2533 14.4922 21.7707 14.4922Z'
+        d={"M21.7707 14.4922C22.2881 14.4922 22.7075 14.9116 22.7075 15.429V33.1339C22.7075 33.6509 22.2881 34.0706 21.7707 34.0706C21.2533 34.0706 20.8339 33.6509 20.8339 33.1339V15.429C20.8339 14.9116 21.2533 14.4922 21.7707 14.4922Z"}
         fill={color}
       />
       <path
-        d='M29.8267 11.9084V34.9883C29.8267 36.3525 29.3265 37.6336 28.4527 38.5528C27.5829 39.4746 26.3724 39.9978 25.1056 40H7.3817C6.11451 39.9978 4.90403 39.4746 4.0346 38.5528C3.16077 37.6336 2.66055 36.3525 2.66055 34.9883V11.9084C0.923513 11.4473 -0.202069 9.7692 0.0302928 7.98679C0.26302 6.20474 1.78124 4.87167 3.57866 4.87131H8.37482V3.70035C8.36933 2.71565 8.75868 1.7701 9.45576 1.07448C10.1528 0.379221 11.0999 -0.00792725 12.0846 0.000123083H20.4027C21.3874 -0.00792725 22.3344 0.379221 23.0315 1.07448C23.7286 1.7701 24.118 2.71565 24.1125 3.70035V4.87131H28.9086C30.7061 4.87167 32.2243 6.20474 32.457 7.98679C32.6894 9.7692 31.5638 11.4473 29.8267 11.9084V11.9084ZM7.3817 38.1265H25.1056C26.7072 38.1265 27.9532 36.7506 27.9532 34.9883V11.9907H4.53408V34.9883C4.53408 36.7506 5.78005 38.1265 7.3817 38.1265ZM22.2389 3.70035C22.2452 3.21257 22.0534 2.74309 21.7073 2.39876C21.3615 2.05442 20.8909 1.86524 20.4027 1.87366H12.0846C11.5964 1.86524 11.1258 2.05442 10.78 2.39876C10.4339 2.74273 10.2421 3.21257 10.2484 3.70035V4.87131H22.2389V3.70035ZM28.9086 6.74484H3.57866C2.64738 6.74484 1.89248 7.49974 1.89248 8.43102C1.89248 9.3623 2.64738 10.1172 3.57866 10.1172H28.9086C29.8399 10.1172 30.5948 9.3623 30.5948 8.43102C30.5948 7.49974 29.8399 6.74484 28.9086 6.74484V6.74484Z'
+        d={"M29.8267 11.9084V34.9883C29.8267 36.3525 29.3265 37.6336 28.4527 38.5528C27.5829 39.4746 26.3724 39.9978 25.1056 40H7.3817C6.11451 39.9978 4.90403 39.4746 4.0346 38.5528C3.16077 37.6336 2.66055 36.3525 2.66055 34.9883V11.9084C0.923513 11.4473 -0.202069 9.7692 0.0302928 7.98679C0.26302 6.20474 1.78124 4.87167 3.57866 4.87131H8.37482V3.70035C8.36933 2.71565 8.75868 1.7701 9.45576 1.07448C10.1528 0.379221 11.0999 -0.00792725 12.0846 0.000123083H20.4027C21.3874 -0.00792725 22.3344 0.379221 23.0315 1.07448C23.7286 1.7701 24.118 2.71565 24.1125 3.70035V4.87131H28.9086C30.7061 4.87167 32.2243 6.20474 32.457 7.98679C32.6894 9.7692 31.5638 11.4473 29.8267 11.9084V11.9084ZM7.3817 38.1265H25.1056C26.7072 38.1265 27.9532 36.7506 27.9532 34.9883V11.9907H4.53408V34.9883C4.53408 36.7506 5.78005 38.1265 7.3817 38.1265ZM22.2389 3.70035C22.2452 3.21257 22.0534 2.74309 21.7073 2.39876C21.3615 2.05442 20.8909 1.86524 20.4027 1.87366H12.0846C11.5964 1.86524 11.1258 2.05442 10.78 2.39876C10.4339 2.74273 10.2421 3.21257 10.2484 3.70035V4.87131H22.2389V3.70035ZM28.9086 6.74484H3.57866C2.64738 6.74484 1.89248 7.49974 1.89248 8.43102C1.89248 9.3623 2.64738 10.1172 3.57866 10.1172H28.9086C29.8399 10.1172 30.5948 9.3623 30.5948 8.43102C30.5948 7.49974 29.8399 6.74484 28.9086 6.74484V6.74484Z"}
         fill={color}
       />
       <path
-        d='M16.2438 14.4922C16.7613 14.4922 17.1806 14.9116 17.1806 15.429V33.1339C17.1806 33.6509 16.7613 34.0706 16.2438 34.0706C15.7264 34.0706 15.3071 33.6509 15.3071 33.1339V15.429C15.3071 14.9116 15.7264 14.4922 16.2438 14.4922Z'
+        d={"M16.2438 14.4922C16.7613 14.4922 17.1806 14.9116 17.1806 15.429V33.1339C17.1806 33.6509 16.7613 34.0706 16.2438 34.0706C15.7264 34.0706 15.3071 33.6509 15.3071 33.1339V15.429C15.3071 14.9116 15.7264 14.4922 16.2438 14.4922Z"}
         fill={color}
       />
     </svg>
diff --git a/packages/apps/event-schedule-app/src/components/atoms/icons/edit.tsx b/packages/apps/event-schedule-app/src/components/atoms/icons/edit.tsx
index 544701d5c3..8cfac51d2c 100644
--- a/packages/apps/event-schedule-app/src/components/atoms/icons/edit.tsx
+++ b/packages/apps/event-schedule-app/src/components/atoms/icons/edit.tsx
@@ -8,15 +8,15 @@ export const EditIcon = memoNamed<Props>(
   'EditIcon',
   ({ size = 16, color = '#8E8E8E', style }) => (
     <svg
-      fill='none'
+      fill={"none"}
       height={size}
       style={style}
-      viewBox='0 0 32 32'
+      viewBox={"0 0 32 32"}
       width={size}
-      xmlns='http://www.w3.org/2000/svg'
+      xmlns={"http://www.w3.org/2000/svg"}
     >
       <path
-        d='M29.9273 2.07104C27.1727 -0.690345 22.6931 -0.690345 19.9386 2.07104L1.62483 20.378C1.48165 20.5211 1.39301 20.7052 1.36574 20.903L0.00891065 30.953C-0.0319987 31.2394 0.0702746 31.5258 0.268003 31.7235C0.438459 31.8939 0.677096 31.9962 0.915734 31.9962C0.956643 31.9962 0.997553 31.9962 1.03846 31.9894L7.09304 31.1712C7.59759 31.103 7.95214 30.6394 7.88395 30.1348C7.81577 29.6303 7.35213 29.2757 6.84759 29.3439L1.99301 29.9985L2.94075 22.9893L10.3181 30.3667C10.4885 30.5371 10.7272 30.6394 10.9658 30.6394C11.2044 30.6394 11.4431 30.5439 11.6135 30.3667L29.9273 12.0597C31.2636 10.7234 32 8.95062 32 7.06198C32 5.17333 31.2636 3.40059 29.9273 2.07104ZM20.2931 4.32105L23.3681 7.39607L6.65667 24.1075L3.58166 21.0325L20.2931 4.32105ZM10.9726 28.4167L7.96577 25.4098L24.6772 8.69835L27.6841 11.7052L10.9726 28.4167ZM28.9659 10.3893L21.609 3.0324C22.5431 2.26195 23.709 1.83922 24.9363 1.83922C26.3341 1.83922 27.6432 2.38467 28.6318 3.3665C29.6204 4.34832 30.1591 5.66424 30.1591 7.06198C30.1591 8.29607 29.7363 9.45517 28.9659 10.3893Z'
+        d={"M29.9273 2.07104C27.1727 -0.690345 22.6931 -0.690345 19.9386 2.07104L1.62483 20.378C1.48165 20.5211 1.39301 20.7052 1.36574 20.903L0.00891065 30.953C-0.0319987 31.2394 0.0702746 31.5258 0.268003 31.7235C0.438459 31.8939 0.677096 31.9962 0.915734 31.9962C0.956643 31.9962 0.997553 31.9962 1.03846 31.9894L7.09304 31.1712C7.59759 31.103 7.95214 30.6394 7.88395 30.1348C7.81577 29.6303 7.35213 29.2757 6.84759 29.3439L1.99301 29.9985L2.94075 22.9893L10.3181 30.3667C10.4885 30.5371 10.7272 30.6394 10.9658 30.6394C11.2044 30.6394 11.4431 30.5439 11.6135 30.3667L29.9273 12.0597C31.2636 10.7234 32 8.95062 32 7.06198C32 5.17333 31.2636 3.40059 29.9273 2.07104ZM20.2931 4.32105L23.3681 7.39607L6.65667 24.1075L3.58166 21.0325L20.2931 4.32105ZM10.9726 28.4167L7.96577 25.4098L24.6772 8.69835L27.6841 11.7052L10.9726 28.4167ZM28.9659 10.3893L21.609 3.0324C22.5431 2.26195 23.709 1.83922 24.9363 1.83922C26.3341 1.83922 27.6432 2.38467 28.6318 3.3665C29.6204 4.34832 30.1591 5.66424 30.1591 7.06198C30.1591 8.29607 29.7363 9.45517 28.9659 10.3893Z"}
         fill={color}
       />
     </svg>
diff --git a/packages/apps/event-schedule-app/src/components/atoms/icons/google-icon.tsx b/packages/apps/event-schedule-app/src/components/atoms/icons/google-icon.tsx
index 421ee24dc4..527049ea03 100644
--- a/packages/apps/event-schedule-app/src/components/atoms/icons/google-icon.tsx
+++ b/packages/apps/event-schedule-app/src/components/atoms/icons/google-icon.tsx
@@ -2,90 +2,90 @@
 
 export const GoogleIconButton = memoNamed('GoogleIconButton', () => (
   <svg
-    height='46px'
-    version='1.1'
-    viewBox='0 0 46 46'
-    width='46px'
-    xmlns='http://www.w3.org/2000/svg'
-    xmlnsXlink='http://www.w3.org/1999/xlink'
+    height={"46px"}
+    version={"1.1"}
+    viewBox={"0 0 46 46"}
+    width={"46px"}
+    xmlns={"http://www.w3.org/2000/svg"}
+    xmlnsXlink={"http://www.w3.org/1999/xlink"}
   >
-    <g id='logo_googleg_48dp' transform='translate(15.000000, 15.000000)'>
+    <g id={"logo_googleg_48dp"} transform={"translate(15.000000, 15.000000)"}>
       <path
-        d='M17.64,9.20454545 C17.64,8.56636364 17.5827273,7.95272727 17.4763636,7.36363636 L9,7.36363636 L9,10.845 L13.8436364,10.845 C13.635,11.97 13.0009091,12.9231818 12.0477273,13.5613636 L12.0477273,15.8195455 L14.9563636,15.8195455 C16.6581818,14.2527273 17.64,11.9454545 17.64,9.20454545 L17.64,9.20454545 Z'
-        fill='#4285F4'
-        id='Shape'
+        d={"M17.64,9.20454545 C17.64,8.56636364 17.5827273,7.95272727 17.4763636,7.36363636 L9,7.36363636 L9,10.845 L13.8436364,10.845 C13.635,11.97 13.0009091,12.9231818 12.0477273,13.5613636 L12.0477273,15.8195455 L14.9563636,15.8195455 C16.6581818,14.2527273 17.64,11.9454545 17.64,9.20454545 L17.64,9.20454545 Z"}
+        fill={"#4285F4"}
+        id={"Shape"}
       />
       <path
-        d='M9,18 C11.43,18 13.4672727,17.1940909 14.9563636,15.8195455 L12.0477273,13.5613636 C11.2418182,14.1013636 10.2109091,14.4204545 9,14.4204545 C6.65590909,14.4204545 4.67181818,12.8372727 3.96409091,10.71 L0.957272727,10.71 L0.957272727,13.0418182 C2.43818182,15.9831818 5.48181818,18 9,18 L9,18 Z'
-        fill='#34A853'
-        id='Shape'
+        d={"M9,18 C11.43,18 13.4672727,17.1940909 14.9563636,15.8195455 L12.0477273,13.5613636 C11.2418182,14.1013636 10.2109091,14.4204545 9,14.4204545 C6.65590909,14.4204545 4.67181818,12.8372727 3.96409091,10.71 L0.957272727,10.71 L0.957272727,13.0418182 C2.43818182,15.9831818 5.48181818,18 9,18 L9,18 Z"}
+        fill={"#34A853"}
+        id={"Shape"}
       />
       <path
-        d='M3.96409091,10.71 C3.78409091,10.17 3.68181818,9.59318182 3.68181818,9 C3.68181818,8.40681818 3.78409091,7.83 3.96409091,7.29 L3.96409091,4.95818182 L0.957272727,4.95818182 C0.347727273,6.17318182 0,7.54772727 0,9 C0,10.4522727 0.347727273,11.8268182 0.957272727,13.0418182 L3.96409091,10.71 L3.96409091,10.71 Z'
-        fill='#FBBC05'
-        id='Shape'
+        d={"M3.96409091,10.71 C3.78409091,10.17 3.68181818,9.59318182 3.68181818,9 C3.68181818,8.40681818 3.78409091,7.83 3.96409091,7.29 L3.96409091,4.95818182 L0.957272727,4.95818182 C0.347727273,6.17318182 0,7.54772727 0,9 C0,10.4522727 0.347727273,11.8268182 0.957272727,13.0418182 L3.96409091,10.71 L3.96409091,10.71 Z"}
+        fill={"#FBBC05"}
+        id={"Shape"}
       />
       <path
-        d='M9,3.57954545 C10.3213636,3.57954545 11.5077273,4.03363636 12.4404545,4.92545455 L15.0218182,2.34409091 C13.4631818,0.891818182 11.4259091,0 9,0 C5.48181818,0 2.43818182,2.01681818 0.957272727,4.95818182 L3.96409091,7.29 C4.67181818,5.16272727 6.65590909,3.57954545 9,3.57954545 L9,3.57954545 Z'
-        fill='#EA4335'
-        id='Shape'
+        d={"M9,3.57954545 C10.3213636,3.57954545 11.5077273,4.03363636 12.4404545,4.92545455 L15.0218182,2.34409091 C13.4631818,0.891818182 11.4259091,0 9,0 C5.48181818,0 2.43818182,2.01681818 0.957272727,4.95818182 L3.96409091,7.29 C4.67181818,5.16272727 6.65590909,3.57954545 9,3.57954545 L9,3.57954545 Z"}
+        fill={"#EA4335"}
+        id={"Shape"}
       />
-      <path d='M0,0 L18,0 L18,18 L0,18 L0,0 Z' id='Shape' />
+      <path d={"M0,0 L18,0 L18,18 L0,18 L0,0 Z"} id={"Shape"} />
     </g>
   </svg>
 ));
 
 export const GoogleIcon = memoNamed('GoogleIcon', () => (
   <svg
-    height='18px'
-    version='1.1'
-    viewBox='0 0 18 18'
-    width='18px'
-    xmlns='http://www.w3.org/2000/svg'
-    xmlnsXlink='http://www.w3.org/1999/xlink'
+    height={"18px"}
+    version={"1.1"}
+    viewBox={"0 0 18 18"}
+    width={"18px"}
+    xmlns={"http://www.w3.org/2000/svg"}
+    xmlnsXlink={"http://www.w3.org/1999/xlink"}
   >
     <title>{'btn_google_light_normal_ios'}</title>
     <desc>{'Created with Sketch.'}</desc>
     <g
-      fill='none'
-      fillRule='evenodd'
-      id='Google-Button'
-      stroke='none'
-      strokeWidth='1'
+      fill={"none"}
+      fillRule={"evenodd"}
+      id={"Google-Button"}
+      stroke={"none"}
+      strokeWidth={"1"}
     >
-      <g id='btn_google_light_normal'>
-        <g filter='url(#filter-1)' id='button'>
-          <g id='button-bg'>
-            <use fill='#FFFFFF' fillRule='evenodd' xlinkHref='#path-2' />
-            <use fill='none' xlinkHref='#path-2' />
-            <use fill='none' xlinkHref='#path-2' />
-            <use fill='none' xlinkHref='#path-2' />
+      <g id={"btn_google_light_normal"}>
+        <g filter={"url(#filter-1)"} id={"button"}>
+          <g id={"button-bg"}>
+            <use fill={"#FFFFFF"} fillRule={"evenodd"} xlinkHref={"#path-2"} />
+            <use fill={"none"} xlinkHref={"#path-2"} />
+            <use fill={"none"} xlinkHref={"#path-2"} />
+            <use fill={"none"} xlinkHref={"#path-2"} />
           </g>
         </g>
-        <g id='logo_googleg_48dp'>
+        <g id={"logo_googleg_48dp"}>
           <path
-            d='M17.64,9.20454545 C17.64,8.56636364 17.5827273,7.95272727 17.4763636,7.36363636 L9,7.36363636 L9,10.845 L13.8436364,10.845 C13.635,11.97 13.0009091,12.9231818 12.0477273,13.5613636 L12.0477273,15.8195455 L14.9563636,15.8195455 C16.6581818,14.2527273 17.64,11.9454545 17.64,9.20454545 L17.64,9.20454545 Z'
-            fill='#4285F4'
-            id='Shape'
+            d={"M17.64,9.20454545 C17.64,8.56636364 17.5827273,7.95272727 17.4763636,7.36363636 L9,7.36363636 L9,10.845 L13.8436364,10.845 C13.635,11.97 13.0009091,12.9231818 12.0477273,13.5613636 L12.0477273,15.8195455 L14.9563636,15.8195455 C16.6581818,14.2527273 17.64,11.9454545 17.64,9.20454545 L17.64,9.20454545 Z"}
+            fill={"#4285F4"}
+            id={"Shape"}
           />
           <path
-            d='M9,18 C11.43,18 13.4672727,17.1940909 14.9563636,15.8195455 L12.0477273,13.5613636 C11.2418182,14.1013636 10.2109091,14.4204545 9,14.4204545 C6.65590909,14.4204545 4.67181818,12.8372727 3.96409091,10.71 L0.957272727,10.71 L0.957272727,13.0418182 C2.43818182,15.9831818 5.48181818,18 9,18 L9,18 Z'
-            fill='#34A853'
-            id='Shape'
+            d={"M9,18 C11.43,18 13.4672727,17.1940909 14.9563636,15.8195455 L12.0477273,13.5613636 C11.2418182,14.1013636 10.2109091,14.4204545 9,14.4204545 C6.65590909,14.4204545 4.67181818,12.8372727 3.96409091,10.71 L0.957272727,10.71 L0.957272727,13.0418182 C2.43818182,15.9831818 5.48181818,18 9,18 L9,18 Z"}
+            fill={"#34A853"}
+            id={"Shape"}
           />
           <path
-            d='M3.96409091,10.71 C3.78409091,10.17 3.68181818,9.59318182 3.68181818,9 C3.68181818,8.40681818 3.78409091,7.83 3.96409091,7.29 L3.96409091,4.95818182 L0.957272727,4.95818182 C0.347727273,6.17318182 0,7.54772727 0,9 C0,10.4522727 0.347727273,11.8268182 0.957272727,13.0418182 L3.96409091,10.71 L3.96409091,10.71 Z'
-            fill='#FBBC05'
-            id='Shape'
+            d={"M3.96409091,10.71 C3.78409091,10.17 3.68181818,9.59318182 3.68181818,9 C3.68181818,8.40681818 3.78409091,7.83 3.96409091,7.29 L3.96409091,4.95818182 L0.957272727,4.95818182 C0.347727273,6.17318182 0,7.54772727 0,9 C0,10.4522727 0.347727273,11.8268182 0.957272727,13.0418182 L3.96409091,10.71 L3.96409091,10.71 Z"}
+            fill={"#FBBC05"}
+            id={"Shape"}
           />
           <path
-            d='M9,3.57954545 C10.3213636,3.57954545 11.5077273,4.03363636 12.4404545,4.92545455 L15.0218182,2.34409091 C13.4631818,0.891818182 11.4259091,0 9,0 C5.48181818,0 2.43818182,2.01681818 0.957272727,4.95818182 L3.96409091,7.29 C4.67181818,5.16272727 6.65590909,3.57954545 9,3.57954545 L9,3.57954545 Z'
-            fill='#EA4335'
-            id='Shape'
+            d={"M9,3.57954545 C10.3213636,3.57954545 11.5077273,4.03363636 12.4404545,4.92545455 L15.0218182,2.34409091 C13.4631818,0.891818182 11.4259091,0 9,0 C5.48181818,0 2.43818182,2.01681818 0.957272727,4.95818182 L3.96409091,7.29 C4.67181818,5.16272727 6.65590909,3.57954545 9,3.57954545 L9,3.57954545 Z"}
+            fill={"#EA4335"}
+            id={"Shape"}
           />
-          <path d='M0,0 L18,0 L18,18 L0,18 L0,0 Z' id='Shape' />
+          <path d={"M0,0 L18,0 L18,18 L0,18 L0,0 Z"} id={"Shape"} />
         </g>
-        <g id='handles_square' />
+        <g id={"handles_square"} />
       </g>
     </g>
   </svg>
diff --git a/packages/apps/event-schedule-app/src/components/atoms/icons/triangle.tsx b/packages/apps/event-schedule-app/src/components/atoms/icons/triangle.tsx
index 2ab795d348..270aa9afe3 100644
--- a/packages/apps/event-schedule-app/src/components/atoms/icons/triangle.tsx
+++ b/packages/apps/event-schedule-app/src/components/atoms/icons/triangle.tsx
@@ -8,26 +8,26 @@ export const TriangleIcon = memoNamed<Props>(
   'TriangleIcon',
   ({ size: iconSize = 16, color = 'black', style }) => (
     <svg
-      fill='none'
+      fill={"none"}
       height={iconSize}
       style={style}
-      viewBox='0 0 32 32'
+      viewBox={"0 0 32 32"}
       width={iconSize}
-      xmlns='http://www.w3.org/2000/svg'
+      xmlns={"http://www.w3.org/2000/svg"}
     >
       <g>
         <path
-          d='M30.5202 30.0507L30.512 30.0507L1.47986 30.0507C0.951413 30.0507 0.462572 29.7687 0.198244 29.3108C-0.0660844 28.8529 -0.0660145 28.2889 0.198244 27.831L14.7143 2.68902C14.9786 2.23105 15.4674 1.94905 15.996 1.94905C16.5244 1.94905 17.0131 2.23105 17.2774 2.68902L31.722 27.7063C31.897 27.9495 32 28.2478 32 28.5709C32 29.3882 31.3376 30.0507 30.5202 30.0507ZM3.60223 27.0911L27.9489 27.0911L15.996 6.3885L3.60223 27.0911Z'
+          d={"M30.5202 30.0507L30.512 30.0507L1.47986 30.0507C0.951413 30.0507 0.462572 29.7687 0.198244 29.3108C-0.0660844 28.8529 -0.0660145 28.2889 0.198244 27.831L14.7143 2.68902C14.9786 2.23105 15.4674 1.94905 15.996 1.94905C16.5244 1.94905 17.0131 2.23105 17.2774 2.68902L31.722 27.7063C31.897 27.9495 32 28.2478 32 28.5709C32 29.3882 31.3376 30.0507 30.5202 30.0507ZM3.60223 27.0911L27.9489 27.0911L15.996 6.3885L3.60223 27.0911Z"}
           fill={color}
         />
       </g>
       <defs>
-        <clipPath id='clip0'>
+        <clipPath id={"clip0"}>
           <rect
-            fill='white'
-            height='32'
-            transform='translate(32 32) rotate(-180)'
-            width='32'
+            fill={"white"}
+            height={"32"}
+            transform={"translate(32 32) rotate(-180)"}
+            width={"32"}
           />
         </clipPath>
       </defs>
diff --git a/packages/apps/event-schedule-app/src/components/atoms/required-participant-icon.tsx b/packages/apps/event-schedule-app/src/components/atoms/required-participant-icon.tsx
index bf0128ec8b..d271db5770 100644
--- a/packages/apps/event-schedule-app/src/components/atoms/required-participant-icon.tsx
+++ b/packages/apps/event-schedule-app/src/components/atoms/required-participant-icon.tsx
@@ -4,5 +4,5 @@ const iconSize = 12;
 
 export const RequiredParticipantIcon = memoNamed(
   'RequiredParticipantIcon',
-  () => <Icon icon='star' intent='primary' size={iconSize} />,
+  () => <Icon icon={"star"} intent={"primary"} size={iconSize} />,
 );
diff --git a/packages/apps/event-schedule-app/src/components/molecules/add-element-button.tsx b/packages/apps/event-schedule-app/src/components/molecules/add-element-button.tsx
index 54df6f5e83..59c07abd8b 100644
--- a/packages/apps/event-schedule-app/src/components/molecules/add-element-button.tsx
+++ b/packages/apps/event-schedule-app/src/components/molecules/add-element-button.tsx
@@ -7,6 +7,6 @@ type Props = Readonly<{
 export const AddElementButton = memoNamed<Props>(
   'AddElementButton',
   ({ onClick }) => (
-    <Button data-e2e={'add-button'} fill={true} icon='plus' onClick={onClick} />
+    <Button data-e2e={'add-button'} fill={true} icon={"plus"} onClick={onClick} />
   ),
 );
diff --git a/packages/apps/event-schedule-app/src/components/molecules/custom-icon-button.tsx b/packages/apps/event-schedule-app/src/components/molecules/custom-icon-button.tsx
index 0315365042..f41fc1f4e8 100644
--- a/packages/apps/event-schedule-app/src/components/molecules/custom-icon-button.tsx
+++ b/packages/apps/event-schedule-app/src/components/molecules/custom-icon-button.tsx
@@ -13,15 +13,22 @@ type Props = Readonly<{
 
 export const CustomIconButton = memoNamed<Props>(
   'CustomIconButton',
-  (props) => (
-    <Button
-      active={props.active}
-      data-e2e={props['data-e2e']}
-      icon={<CustomIcon color={props.iconColor} iconName={props.iconName} />}
-      minimal={true}
-      outlined={props.outlined}
-      title={props.title}
-      onClick={props.onClick}
-    />
-  ),
+  (props) => {
+    const icon = useMemo(
+      () => <CustomIcon color={props.iconColor} iconName={props.iconName} />,
+      [props.iconColor, props.iconName],
+    );
+
+    return (
+      <Button
+        active={props.active}
+        data-e2e={props['data-e2e']}
+        icon={icon}
+        minimal={true}
+        outlined={props.outlined}
+        title={props.title}
+        onClick={props.onClick}
+      />
+    );
+  },
 );
diff --git a/packages/apps/event-schedule-app/src/components/multiple-date-picker/date-picker-day.tsx b/packages/apps/event-schedule-app/src/components/multiple-date-picker/date-picker-day.tsx
index ac181df1ae..9fb53cca86 100644
--- a/packages/apps/event-schedule-app/src/components/multiple-date-picker/date-picker-day.tsx
+++ b/packages/apps/event-schedule-app/src/components/multiple-date-picker/date-picker-day.tsx
@@ -83,7 +83,7 @@ export const DatePickerDate = memoNamed<Props>(
         aria-disabled={outside}
         aria-label={dateString}
         aria-selected={selected}
-        role='gridcell'
+        role={"gridcell"}
         tabIndex={-1}
         title={holidayJpName}
         onClick={outside ? noop : onClick}
diff --git a/packages/apps/event-schedule-app/src/components/multiple-date-picker/multiple-date-picker.tsx b/packages/apps/event-schedule-app/src/components/multiple-date-picker/multiple-date-picker.tsx
index 26799630f6..016475f34f 100644
--- a/packages/apps/event-schedule-app/src/components/multiple-date-picker/multiple-date-picker.tsx
+++ b/packages/apps/event-schedule-app/src/components/multiple-date-picker/multiple-date-picker.tsx
@@ -51,7 +51,7 @@ export const MultipleDatePicker = memoNamed<Props>(
     return (
       <div>
         <DatePickerStyled>
-          <DayPickerStyled lang='en'>
+          <DayPickerStyled lang={"en"}>
             <div
               css={css`
                 display: flex;
@@ -69,10 +69,10 @@ export const MultipleDatePicker = memoNamed<Props>(
                 onPrevMonthClick={onPrevMonthClick}
                 onYearChange={onYearChange}
               />
-              <DatePickerMonthStyled role='grid'>
+              <DatePickerMonthStyled role={"grid"}>
                 <WeekdaysHeader onClick={onWeekdaysHeaderCellClick} />
                 {/* eslint-disable-next-line jsx-a11y/prefer-tag-over-role */}
-                <DatePickerBodyStyled role='rowgroup'>
+                <DatePickerBodyStyled role={"rowgroup"}>
                   {calendarCells.map((week) => (
                     <Week
                       key={week.index}
diff --git a/packages/apps/event-schedule-app/src/components/multiple-date-picker/week.tsx b/packages/apps/event-schedule-app/src/components/multiple-date-picker/week.tsx
index b111f9e054..405db0c604 100644
--- a/packages/apps/event-schedule-app/src/components/multiple-date-picker/week.tsx
+++ b/packages/apps/event-schedule-app/src/components/multiple-date-picker/week.tsx
@@ -30,7 +30,7 @@ export const Week = memoNamed<Props>(
 
     return (
       // eslint-disable-next-line jsx-a11y/prefer-tag-over-role
-      <DatePickerWeekStyled role='row'>
+      <DatePickerWeekStyled role={"row"}>
         {listWithHandler.map(({ value, handler, index }) => (
           <DatePickerDate
             key={index}
diff --git a/packages/apps/event-schedule-app/src/components/multiple-date-picker/weekdays-header.tsx b/packages/apps/event-schedule-app/src/components/multiple-date-picker/weekdays-header.tsx
index 78f6837f67..58519404d9 100644
--- a/packages/apps/event-schedule-app/src/components/multiple-date-picker/weekdays-header.tsx
+++ b/packages/apps/event-schedule-app/src/components/multiple-date-picker/weekdays-header.tsx
@@ -29,9 +29,9 @@ export const WeekdaysHeader = memoNamed<Props>(
 
     return (
       // eslint-disable-next-line jsx-a11y/prefer-tag-over-role
-      <DatePickerWeekdaysStyled role='rowgroup'>
+      <DatePickerWeekdaysStyled role={"rowgroup"}>
         {/* eslint-disable-next-line jsx-a11y/prefer-tag-over-role */}
-        <DatePickerWeekdaysRowStyled role='row'>
+        <DatePickerWeekdaysRowStyled role={"row"}>
           {listWithHandler.map(({ name: title, abbr, onClickHandler }) => (
             <HeaderCell
               key={title}
diff --git a/packages/apps/event-schedule-app/src/components/organisms/answer-being-edited/answer-being-edited.tsx b/packages/apps/event-schedule-app/src/components/organisms/answer-being-edited/answer-being-edited.tsx
index 9dba60b777..911880ef54 100644
--- a/packages/apps/event-schedule-app/src/components/organisms/answer-being-edited/answer-being-edited.tsx
+++ b/packages/apps/event-schedule-app/src/components/organisms/answer-being-edited/answer-being-edited.tsx
@@ -85,25 +85,29 @@ export const AnswerBeingEdited = memoNamed<Props>(
 
     const checkboxesState = AnswerPageStore.useCheckboxesState();
 
+    const helperText = useMemo(
+      () =>
+        showUserNameError ? (
+          theNameIsAlreadyUsed ? (
+            dc.theNameIsAlreadyUsed
+          ) : (
+            dc.nameIsRequired
+          )
+        ) : (
+          <div
+            css={css`
+              height: 1rem;
+            `}
+          />
+        ),
+      [showUserNameError, theNameIsAlreadyUsed],
+    );
+
     return (
       <>
         <WidthRestrictedInputWrapper>
           <FormGroup
-            helperText={
-              showUserNameError ? (
-                theNameIsAlreadyUsed ? (
-                  dc.theNameIsAlreadyUsed
-                ) : (
-                  dc.nameIsRequired
-                )
-              ) : (
-                <div
-                  css={css`
-                    height: 1rem;
-                  `}
-                />
-              )
-            }
+            helperText={helperText}
             intent={showUserNameError ? 'danger' : 'primary'}
             label={dc.yourName}
           >
@@ -352,7 +356,7 @@ export const AnswerBeingEdited = memoNamed<Props>(
         <ButtonsWrapperAlignEnd data-e2e={'buttons'}>
           <ButtonNowrapStyled
             disabled={submitButtonIsLoading}
-            intent='none'
+            intent={'none'}
             text={dict.common.buttonText.cancel}
             onClick={AnswerPageStore.onCancelEditingAnswer}
           />
diff --git a/packages/apps/event-schedule-app/src/components/organisms/answer-table/answer-table.tsx b/packages/apps/event-schedule-app/src/components/organisms/answer-table/answer-table.tsx
index 6864b3d9c6..aed8cd0321 100644
--- a/packages/apps/event-schedule-app/src/components/organisms/answer-table/answer-table.tsx
+++ b/packages/apps/event-schedule-app/src/components/organisms/answer-table/answer-table.tsx
@@ -66,7 +66,7 @@ export const AnswerTable = memoNamed<Props>(
       >
         <thead>
           <tr>
-            <th className='sticky horizontal'>
+            <th className={"sticky horizontal"}>
               <TableTopLeftCell>
                 <DatetimeHeaderCell>
                   {tableMinimized || dateStringIsMinimized ? undefined : (
@@ -147,7 +147,7 @@ export const AnswerTable = memoNamed<Props>(
               style,
             }) => (
               <tr key={key} style={style}>
-                <td className='sticky horizontal'>
+                <td className={"sticky horizontal"}>
                   <DatetimeRangeCell
                     datetimeRange={datetimeRange}
                     datetimeSpecification={datetimeSpecification}
@@ -217,7 +217,7 @@ export const AnswerTable = memoNamed<Props>(
 
           {/* コメント行 */}
           <tr>
-            <td className='sticky horizontal'>{dc.comment}</td>
+            <td className={"sticky horizontal"}>{dc.comment}</td>
 
             {/* spacer */}
             <td />
diff --git a/packages/apps/event-schedule-app/src/components/organisms/answer-table/comment-button.tsx b/packages/apps/event-schedule-app/src/components/organisms/answer-table/comment-button.tsx
index 2a8036c3b5..bb7da57ace 100644
--- a/packages/apps/event-schedule-app/src/components/organisms/answer-table/comment-button.tsx
+++ b/packages/apps/event-schedule-app/src/components/organisms/answer-table/comment-button.tsx
@@ -12,34 +12,39 @@ export const CommentButton = memoNamed<Props>(
     const [isOpen, { setTrue: handleOpen, setFalse: handleClose }] =
       useBoolState(false);
 
-    return (
-      <Popover
-        canEscapeKeyClose={true}
-        content={
+    const popoverContent = useMemo(
+      () => (
+        <div
+          css={css`
+            padding: 10px;
+            max-width: 250px;
+          `}
+        >
           <div
             css={css`
-              padding: 10px;
-              max-width: 250px;
+              margin: 10px;
+              overflow-wrap: anywhere;
+              white-space: pre-line;
             `}
           >
-            <div
-              css={css`
-                margin: 10px;
-                overflow-wrap: anywhere;
-                white-space: pre-line;
-              `}
-            >
-              {comment}
-            </div>
-            <ButtonsWrapperAlignEnd>
-              <Button
-                intent='none'
-                text={dict.common.buttonText.close}
-                onClick={handleClose}
-              />
-            </ButtonsWrapperAlignEnd>
+            {comment}
           </div>
-        }
+          <ButtonsWrapperAlignEnd>
+            <Button
+              intent={'none'}
+              text={dict.common.buttonText.close}
+              onClick={handleClose}
+            />
+          </ButtonsWrapperAlignEnd>
+        </div>
+      ),
+      [comment, handleClose],
+    );
+
+    return (
+      <Popover
+        canEscapeKeyClose={true}
+        content={popoverContent}
         isOpen={isOpen}
         minimal={true}
         placement={'top'}
@@ -51,7 +56,7 @@ export const CommentButton = memoNamed<Props>(
               min-height: 16px !important;
               min-width: 16px !important;
             `}
-            icon={<Icon icon={'comment'} size={12} />}
+            icon={icon}
             minimal={true}
             small={true}
             onClick={handleOpen}
@@ -68,3 +73,5 @@ export const CommentButton = memoNamed<Props>(
     );
   },
 );
+
+const icon = <Icon icon={'comment'} size={12} />;
diff --git a/packages/apps/event-schedule-app/src/components/organisms/answer-table/filter-by-icon-popover/filter-by-icon-popover.tsx b/packages/apps/event-schedule-app/src/components/organisms/answer-table/filter-by-icon-popover/filter-by-icon-popover.tsx
index 48621b5a06..658a84efba 100644
--- a/packages/apps/event-schedule-app/src/components/organisms/answer-table/filter-by-icon-popover/filter-by-icon-popover.tsx
+++ b/packages/apps/event-schedule-app/src/components/organisms/answer-table/filter-by-icon-popover/filter-by-icon-popover.tsx
@@ -43,20 +43,33 @@ export const FilterByIconPopover = memoNamed<Props>(
       [answerIconId],
     );
 
+    const popoverContent = useMemo(
+      () => (
+        <FilterByIconPopoverContent
+          disableFiltering={turnOffFilteringEnabled}
+          enableFiltering={turnOnFilteringEnabled}
+          state={state}
+          upperLimit={upperLimit}
+          onClose={handleClose}
+          onMaxChange={onMaxChange}
+          onMinChange={onMinChange}
+        />
+      ),
+      [
+        handleClose,
+        onMaxChange,
+        onMinChange,
+        state,
+        turnOffFilteringEnabled,
+        turnOnFilteringEnabled,
+        upperLimit,
+      ],
+    );
+
     return (
       <Popover
         canEscapeKeyClose={true}
-        content={
-          <FilterByIconPopoverContent
-            disableFiltering={turnOffFilteringEnabled}
-            enableFiltering={turnOnFilteringEnabled}
-            state={state}
-            upperLimit={upperLimit}
-            onClose={handleClose}
-            onMaxChange={onMaxChange}
-            onMinChange={onMinChange}
-          />
-        }
+        content={popoverContent}
         isOpen={isOpen}
         minimal={false}
         placement={'bottom'}
diff --git a/packages/apps/event-schedule-app/src/components/organisms/answer-table/sort-button.tsx b/packages/apps/event-schedule-app/src/components/organisms/answer-table/sort-button.tsx
index 275fd6f599..89dff8139b 100644
--- a/packages/apps/event-schedule-app/src/components/organisms/answer-table/sort-button.tsx
+++ b/packages/apps/event-schedule-app/src/components/organisms/answer-table/sort-button.tsx
@@ -18,19 +18,24 @@ export const SortButton = memoNamed<Props>('SortButton', ({ onSortChange }) => {
     handleClose();
   }, [onSortChange, handleClose]);
 
+  const popoverContent = useMemo(
+    () => (
+      <ButtonGroup vertical={true}>
+        <Button icon={'sort-asc'} minimal={true} onClick={onSortAscClick}>
+          {dict.answerPage.answers.sortAsc}
+        </Button>
+        <Button icon={'sort-desc'} minimal={true} onClick={onSortDescClick}>
+          {dict.answerPage.answers.sortDesc}
+        </Button>
+      </ButtonGroup>
+    ),
+    [onSortAscClick, onSortDescClick],
+  );
+
   return (
     <Popover
       canEscapeKeyClose={true}
-      content={
-        <ButtonGroup vertical={true}>
-          <Button icon='sort-asc' minimal={true} onClick={onSortAscClick}>
-            {dict.answerPage.answers.sortAsc}
-          </Button>
-          <Button icon='sort-desc' minimal={true} onClick={onSortDescClick}>
-            {dict.answerPage.answers.sortDesc}
-          </Button>
-        </ButtonGroup>
-      }
+      content={popoverContent}
       isOpen={isOpen}
       placement={'bottom'}
       onClose={handleClose}
diff --git a/packages/apps/event-schedule-app/src/components/organisms/confirm-email-dialog.tsx b/packages/apps/event-schedule-app/src/components/organisms/confirm-email-dialog.tsx
index 18314382ca..65cc5c9830 100644
--- a/packages/apps/event-schedule-app/src/components/organisms/confirm-email-dialog.tsx
+++ b/packages/apps/event-schedule-app/src/components/organisms/confirm-email-dialog.tsx
@@ -45,7 +45,7 @@ export const ConfirmEmailDialog = memoNamed<ConfirmEmailDialogProps>(
       <DialogWithMaxWidth
         canEscapeKeyClose={false}
         canOutsideClickClose={false}
-        icon='key'
+        icon={'key'}
         isCloseButtonShown={false}
         isOpen={isOpen}
         title={dc.editButtonConfirmDialogTitle}
@@ -62,13 +62,7 @@ export const ConfirmEmailDialog = memoNamed<ConfirmEmailDialogProps>(
                 // eslint-disable-next-line jsx-a11y/no-autofocus
                 autoFocus={true}
                 intent={state.emailFormIntent}
-                rightElement={
-                  <Button
-                    icon={'cross'}
-                    minimal={true}
-                    onClick={ConfirmEmailDialogStore.resetInput}
-                  />
-                }
+                rightElement={resetInputButton}
                 type={'email'}
                 value={state.formState.email.inputValue}
                 onValueChange={ConfirmEmailDialogStore.inputEmailHandler}
@@ -102,3 +96,11 @@ export const ConfirmEmailDialog = memoNamed<ConfirmEmailDialogProps>(
 const InputWrapperWithMinHeight = styled('div')`
   min-height: 72px;
 `;
+
+const resetInputButton = (
+  <Button
+    icon={'cross'}
+    minimal={true}
+    onClick={ConfirmEmailDialogStore.resetInput}
+  />
+);
diff --git a/packages/apps/event-schedule-app/src/components/organisms/event-settings.tsx b/packages/apps/event-schedule-app/src/components/organisms/event-settings.tsx
index fbf49126ce..1a50c55807 100644
--- a/packages/apps/event-schedule-app/src/components/organisms/event-settings.tsx
+++ b/packages/apps/event-schedule-app/src/components/organisms/event-settings.tsx
@@ -52,6 +52,43 @@ export const EventSettings = memoNamed<Props>(
       }
     }, [useNotification, focusEmailInput$, clickedMoreThanOnce]);
 
+    const answerDeadlineDatepicker = useMemo(
+      () => (
+        <AnswerDeadlineDatepicker
+          answerDeadline={answerDeadline}
+          useAnswerDeadline={useAnswerDeadline}
+          onAnswerDeadlineChange={onAnswerDeadlineChange}
+        />
+      ),
+      [answerDeadline, onAnswerDeadlineChange, useAnswerDeadline],
+    );
+
+    const notificationSettingsComponent = useMemo(
+      () => (
+        <NotificationSettingsComponent
+          answerDeadline={answerDeadline}
+          disabled={!useNotification}
+          focusEmailInput$={focusEmailInput$}
+          notificationSettingsWithEmail={
+            notificationSettingsWithEmail ??
+            notificationSettingsWithEmailDefaultValue
+          }
+          useAnswerDeadline={useAnswerDeadline}
+          onNotificationSettingsWithEmailChange={
+            onNotificationSettingsWithEmailChange
+          }
+        />
+      ),
+      [
+        answerDeadline,
+        focusEmailInput$,
+        notificationSettingsWithEmail,
+        onNotificationSettingsWithEmailChange,
+        useAnswerDeadline,
+        useNotification,
+      ],
+    );
+
     return (
       <div
         css={css`
@@ -63,13 +100,7 @@ export const EventSettings = memoNamed<Props>(
       >
         <ParagraphWithSwitch
           description={dc.answerDeadline.howAnswerDeadlineIsUsed}
-          elementToToggle={
-            <AnswerDeadlineDatepicker
-              answerDeadline={answerDeadline}
-              useAnswerDeadline={useAnswerDeadline}
-              onAnswerDeadlineChange={onAnswerDeadlineChange}
-            />
-          }
+          elementToToggle={answerDeadlineDatepicker}
           hideContentIfToggleIsFalse={false}
           title={dc.answerDeadline.title}
           toggleState={useAnswerDeadline}
@@ -78,21 +109,7 @@ export const EventSettings = memoNamed<Props>(
         <hr />
         <ParagraphWithSwitch
           description={dc.notification.description}
-          elementToToggle={
-            <NotificationSettingsComponent
-              answerDeadline={answerDeadline}
-              disabled={!useNotification}
-              focusEmailInput$={focusEmailInput$}
-              notificationSettingsWithEmail={
-                notificationSettingsWithEmail ??
-                notificationSettingsWithEmailDefaultValue
-              }
-              useAnswerDeadline={useAnswerDeadline}
-              onNotificationSettingsWithEmailChange={
-                onNotificationSettingsWithEmailChange
-              }
-            />
-          }
+          elementToToggle={notificationSettingsComponent}
           hideContentIfToggleIsFalse={false}
           title={dc.notification.useNotification}
           toggleState={useNotification}
diff --git a/packages/apps/event-schedule-app/src/components/organisms/navbar.tsx b/packages/apps/event-schedule-app/src/components/organisms/navbar.tsx
index 3091e16088..b83d29be5e 100644
--- a/packages/apps/event-schedule-app/src/components/organisms/navbar.tsx
+++ b/packages/apps/event-schedule-app/src/components/organisms/navbar.tsx
@@ -32,6 +32,44 @@ export const NavBar = memoNamed('NavBar', () => {
 
   const forNonLoggedInUserDialogState = useBoolState(false);
 
+  const popoverContent = useMemo(
+    () => (
+      <Menu>
+        <MenuItem text={dc.auth.menu.accountSettings}>
+          <MenuItem
+            text={dc.auth.menu.changeDisplayName}
+            onClick={UpdateUserInfoDialogStore.changeUsername}
+          />
+          {passwordProviderIncluded ? (
+            <>
+              <MenuItem
+                text={dc.auth.menu.changeEmail}
+                onClick={UpdateUserInfoDialogStore.changeEmail}
+              />
+              <MenuItem
+                text={dc.auth.menu.changePassword}
+                onClick={UpdateUserInfoDialogStore.changePassword}
+              />
+              <MenuItem
+                intent={'danger'}
+                text={dc.auth.menu.deleteAccount}
+                onClick={UpdateUserInfoDialogStore.deleteAccount}
+              />
+            </>
+          ) : (
+            <MenuItem
+              intent={'danger'}
+              text={dc.auth.menu.deleteAccount}
+              onClick={UpdateUserInfoDialogStore.deleteAccountCreatedWithGoogle}
+            />
+          )}
+        </MenuItem>
+        <MenuItem text={dc.auth.menu.signOut} onClick={Auth.signOutClick} />
+      </Menu>
+    ),
+    [passwordProviderIncluded],
+  );
+
   return (
     <div
       css={css`
@@ -97,45 +135,7 @@ export const NavBar = memoNamed('NavBar', () => {
               <Item>
                 <span>{dc.auth.userName.prefix}</span>
                 <Popover
-                  content={
-                    <Menu>
-                      <MenuItem text={dc.auth.menu.accountSettings}>
-                        <MenuItem
-                          text={dc.auth.menu.changeDisplayName}
-                          onClick={UpdateUserInfoDialogStore.changeUsername}
-                        />
-                        {passwordProviderIncluded ? (
-                          <>
-                            <MenuItem
-                              text={dc.auth.menu.changeEmail}
-                              onClick={UpdateUserInfoDialogStore.changeEmail}
-                            />
-                            <MenuItem
-                              text={dc.auth.menu.changePassword}
-                              onClick={UpdateUserInfoDialogStore.changePassword}
-                            />
-                            <MenuItem
-                              intent={'danger'}
-                              text={dc.auth.menu.deleteAccount}
-                              onClick={UpdateUserInfoDialogStore.deleteAccount}
-                            />
-                          </>
-                        ) : (
-                          <MenuItem
-                            intent={'danger'}
-                            text={dc.auth.menu.deleteAccount}
-                            onClick={
-                              UpdateUserInfoDialogStore.deleteAccountCreatedWithGoogle
-                            }
-                          />
-                        )}
-                      </MenuItem>
-                      <MenuItem
-                        text={dc.auth.menu.signOut}
-                        onClick={Auth.signOutClick}
-                      />
-                    </Menu>
-                  }
+                  content={popoverContent}
                   minimal={true}
                   modifiers={popoverModifiers}
                   position={'bottom-left'}
@@ -177,7 +177,7 @@ export const NavBar = memoNamed('NavBar', () => {
           <Item>
             <AnchorButton
               href={feedbackUrl}
-              icon={<Icon color={'white'} icon={'send-message'} />}
+              icon={sendFeedbackIcon}
               minimal={true}
               rel={'noopener noreferrer'}
               target={'_blank'}
@@ -188,7 +188,7 @@ export const NavBar = memoNamed('NavBar', () => {
           <Item>
             <AnchorButton
               href={aboutThisAppUrl}
-              icon={<Icon color={'white'} icon={'help'} />}
+              icon={helpIcon}
               minimal={true}
               rel={'noopener noreferrer'}
               target={'_blank'}
@@ -240,3 +240,7 @@ const ItemAnchor = styled(Anchor)`
     background-color: rgba(255, 255, 255, 0.15);
   }
 `;
+
+const sendFeedbackIcon = <Icon color={'white'} icon={'send-message'} />;
+
+const helpIcon = <Icon color={'white'} icon={'help'} />;
diff --git a/packages/apps/event-schedule-app/src/components/organisms/notification-settings.tsx b/packages/apps/event-schedule-app/src/components/organisms/notification-settings.tsx
index a3988197a1..2b8fec7690 100644
--- a/packages/apps/event-schedule-app/src/components/organisms/notification-settings.tsx
+++ b/packages/apps/event-schedule-app/src/components/organisms/notification-settings.tsx
@@ -198,7 +198,7 @@ export const NotificationSettingsComponent = memoNamed<Props>(
               focus$={focusEmailInput$}
               intent={invalidEmail ? 'danger' : 'primary'}
               placeholder={'sample@gmail.com'}
-              type='email'
+              type={"email"}
               value={notificationSettingsWithEmail.email}
               onValueChange={onEmailChange}
             />
diff --git a/packages/apps/event-schedule-app/src/components/organisms/select-datetimes/set-times-popover/set-times-popover-content.tsx b/packages/apps/event-schedule-app/src/components/organisms/select-datetimes/set-times-popover/set-times-popover-content.tsx
index 7d3aa9e39b..2fb560592b 100644
--- a/packages/apps/event-schedule-app/src/components/organisms/select-datetimes/set-times-popover/set-times-popover-content.tsx
+++ b/packages/apps/event-schedule-app/src/components/organisms/select-datetimes/set-times-popover/set-times-popover-content.tsx
@@ -151,7 +151,7 @@ export const SetTimesPopoverContent = memoNamed<Props>(
               </div>
               <Button
                 icon={'automatic-updates'}
-                intent='none'
+                intent={"none"}
                 minimal={true}
                 text={dc.setTimesAtOneTimeForDay.flipAll}
                 onClick={flipAll}
@@ -161,12 +161,12 @@ export const SetTimesPopoverContent = memoNamed<Props>(
         </div>
         <ButtonsWrapperAlignEnd>
           <Button
-            intent='none'
+            intent={"none"}
             text={dict.common.buttonText.cancel}
             onClick={onCancelClick}
           />
           <Button
-            intent='primary'
+            intent={"primary"}
             text={dict.common.buttonText.decide}
             onClick={onOkClickHandler}
           />
diff --git a/packages/apps/event-schedule-app/src/components/organisms/select-datetimes/set-times-popover/set-times-popover.tsx b/packages/apps/event-schedule-app/src/components/organisms/select-datetimes/set-times-popover/set-times-popover.tsx
index d22e15c4ff..b41256a574 100644
--- a/packages/apps/event-schedule-app/src/components/organisms/select-datetimes/set-times-popover/set-times-popover.tsx
+++ b/packages/apps/event-schedule-app/src/components/organisms/select-datetimes/set-times-popover/set-times-popover.tsx
@@ -33,22 +33,27 @@ export const SetTimesPopover = memoNamed<Props>(
       [onSetTimesSubmit, handleClose],
     );
 
+    const popoverContent = useMemo(
+      () => (
+        <SetTimesPopoverContent
+          datetimeSpecification={datetimeSpecification}
+          initialValue={initialValue}
+          onCancelClick={handleClose}
+          onOkClick={onOkClick}
+        />
+      ),
+      [datetimeSpecification, handleClose, initialValue, onOkClick],
+    );
+
     return (
       <Popover
         canEscapeKeyClose={true}
-        content={
-          <SetTimesPopoverContent
-            datetimeSpecification={datetimeSpecification}
-            initialValue={initialValue}
-            onCancelClick={handleClose}
-            onOkClick={onOkClick}
-          />
-        }
+        content={popoverContent}
         isOpen={isOpen}
         onClose={handleClose}
       >
         <Button
-          intent='success'
+          intent={'success'}
           text={dc.setTimesAtOneTime}
           onClick={handleOpen}
         />
diff --git a/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/delete-account-dialog-google.tsx b/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/delete-account-dialog-google.tsx
index 5128ed66f3..ccd1544315 100644
--- a/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/delete-account-dialog-google.tsx
+++ b/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/delete-account-dialog-google.tsx
@@ -23,51 +23,68 @@ export const DeleteAccountCreatedWithGoogleDialog = memoNamed<Props>(
       emailFormIntent,
     } = useObservableValue(DeleteAccountCreatedWithGoogleStore.state);
 
-    return (
-      <UpdateUserInfoDialogTemplate
-        body={
-          <div
-            css={css`
-              width: 300px;
-              height: 100px;
-            `}
+    const body = useMemo(
+      () => (
+        <div
+          css={css`
+            width: 300px;
+            height: 100px;
+          `}
+        >
+          <FormGroup
+            helperText={formState.error}
+            intent={emailFormIntent}
+            label={verifyEmailInputLabel}
           >
-            <FormGroup
-              helperText={formState.error}
+            <BpInput
+              // suppress auto complete
+              autoComplete={'new-password'}
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus={true}
+              disabled={isWaitingResponse}
               intent={emailFormIntent}
-              label={<Label>{dc.deleteAccount.verifyEmail}</Label>}
-            >
-              <BpInput
-                // suppress auto complete
-                autoComplete={'new-password'}
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus={true}
-                disabled={isWaitingResponse}
-                intent={emailFormIntent}
-                type={'email'}
-                value={formState.inputValue}
-                onValueChange={
-                  DeleteAccountCreatedWithGoogleStore.inputEmailHandler
-                }
-              />
-            </FormGroup>
-          </div>
-        }
+              type={'email'}
+              value={formState.inputValue}
+              onValueChange={
+                DeleteAccountCreatedWithGoogleStore.inputEmailHandler
+              }
+            />
+          </FormGroup>
+        </div>
+      ),
+      [
+        emailFormIntent,
+        formState.error,
+        formState.inputValue,
+        isWaitingResponse,
+      ],
+    );
+
+    const submitButton = useMemo(
+      () => (
+        <Button
+          disabled={enterButtonDisabled}
+          intent={'danger'}
+          loading={isWaitingResponse}
+          onClick={DeleteAccountCreatedWithGoogleStore.enterClickHandler}
+        >
+          {dc.button.deleteAccount}
+        </Button>
+      ),
+      [enterButtonDisabled, isWaitingResponse],
+    );
+
+    return (
+      <UpdateUserInfoDialogTemplate
+        body={body}
         closeDialog={UpdateUserInfoDialogStore.closeDialog}
         dialogIsOpen={dialogIsOpen}
         isWaitingResponse={isWaitingResponse}
-        submitButton={
-          <Button
-            disabled={enterButtonDisabled}
-            intent={'danger'}
-            loading={isWaitingResponse}
-            onClick={DeleteAccountCreatedWithGoogleStore.enterClickHandler}
-          >
-            {dc.button.deleteAccount}
-          </Button>
-        }
+        submitButton={submitButton}
         title={dc.deleteAccount.title}
       />
     );
   },
 );
+
+const verifyEmailInputLabel = <Label>{dc.deleteAccount.verifyEmail}</Label>;
diff --git a/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/delete-account-dialog.tsx b/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/delete-account-dialog.tsx
index ef62484f68..fc348270d7 100644
--- a/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/delete-account-dialog.tsx
+++ b/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/delete-account-dialog.tsx
@@ -25,71 +25,99 @@ export const DeleteAccountDialog = memoNamed<Props>(
       passwordIsOpen,
     } = useObservableValue(DeleteAccountPageStore.state);
 
-    return (
-      <UpdateUserInfoDialogTemplate
-        body={
-          <div
-            css={css`
-              width: 300px;
-              height: 160px;
-            `}
+    const passwordLockButton = useMemo(
+      () => (
+        <LockButton
+          disabled={formState.isWaitingResponse}
+          passwordIsOpen={passwordIsOpen}
+          onLockClick={DeleteAccountPageStore.togglePasswordLock}
+        />
+      ),
+      [formState.isWaitingResponse, passwordIsOpen],
+    );
+
+    const body = useMemo(
+      () => (
+        <div
+          css={css`
+            width: 300px;
+            height: 160px;
+          `}
+        >
+          <FormGroup
+            helperText={formState.email.error}
+            intent={emailFormIntent}
+            label={verifyEmailInputLabel}
           >
-            <FormGroup
-              helperText={formState.email.error}
+            <BpInput
+              // suppress auto complete
+              autoComplete={'new-password'}
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus={true}
+              disabled={formState.isWaitingResponse}
               intent={emailFormIntent}
-              label={<Label>{dc.deleteAccount.verifyEmail}</Label>}
-            >
-              <BpInput
-                // suppress auto complete
-                autoComplete={'new-password'}
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus={true}
-                disabled={formState.isWaitingResponse}
-                intent={emailFormIntent}
-                type={'email'}
-                value={formState.email.inputValue}
-                onValueChange={DeleteAccountPageStore.inputEmailHandler}
-              />
-            </FormGroup>
-            <FormGroup
-              helperText={formState.password.error}
+              type={'email'}
+              value={formState.email.inputValue}
+              onValueChange={DeleteAccountPageStore.inputEmailHandler}
+            />
+          </FormGroup>
+          <FormGroup
+            helperText={formState.password.error}
+            intent={passwordFormIntent}
+            label={passwordInputLabel}
+          >
+            <BpInput
+              // suppress auto complete
+              autoComplete={'new-password'}
+              disabled={formState.isWaitingResponse}
               intent={passwordFormIntent}
-              label={<Label>{dc.reauthenticate.password}</Label>}
-            >
-              <BpInput
-                // suppress auto complete
-                autoComplete={'new-password'}
-                disabled={formState.isWaitingResponse}
-                intent={passwordFormIntent}
-                rightElement={
-                  <LockButton
-                    disabled={formState.isWaitingResponse}
-                    passwordIsOpen={passwordIsOpen}
-                    onLockClick={DeleteAccountPageStore.togglePasswordLock}
-                  />
-                }
-                type={passwordIsOpen ? 'text' : 'password'}
-                value={formState.password.inputValue}
-                onValueChange={DeleteAccountPageStore.inputPasswordHandler}
-              />
-            </FormGroup>
-          </div>
-        }
+              rightElement={passwordLockButton}
+              type={passwordIsOpen ? 'text' : 'password'}
+              value={formState.password.inputValue}
+              onValueChange={DeleteAccountPageStore.inputPasswordHandler}
+            />
+          </FormGroup>
+        </div>
+      ),
+      [
+        emailFormIntent,
+        formState.email.error,
+        formState.email.inputValue,
+        formState.isWaitingResponse,
+        formState.password.error,
+        formState.password.inputValue,
+        passwordFormIntent,
+        passwordIsOpen,
+        passwordLockButton,
+      ],
+    );
+
+    const submitButton = useMemo(
+      () => (
+        <Button
+          disabled={enterButtonDisabled}
+          intent={'danger'}
+          loading={formState.isWaitingResponse}
+          onClick={DeleteAccountPageStore.enterClickHandler}
+        >
+          {dc.button.deleteAccount}
+        </Button>
+      ),
+      [enterButtonDisabled, formState.isWaitingResponse],
+    );
+
+    return (
+      <UpdateUserInfoDialogTemplate
+        body={body}
         closeDialog={UpdateUserInfoDialogStore.closeDialog}
         dialogIsOpen={dialogIsOpen}
         isWaitingResponse={formState.isWaitingResponse}
-        submitButton={
-          <Button
-            disabled={enterButtonDisabled}
-            intent={'danger'}
-            loading={formState.isWaitingResponse}
-            onClick={DeleteAccountPageStore.enterClickHandler}
-          >
-            {dc.button.deleteAccount}
-          </Button>
-        }
+        submitButton={submitButton}
         title={dc.deleteAccount.title}
       />
     );
   },
 );
+
+const passwordInputLabel = <Label>{dc.reauthenticate.password}</Label>;
+const verifyEmailInputLabel = <Label>{dc.deleteAccount.verifyEmail}</Label>;
diff --git a/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/update-display-name-dialog.tsx b/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/update-display-name-dialog.tsx
index 7553178f1a..3864df0740 100644
--- a/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/update-display-name-dialog.tsx
+++ b/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/update-display-name-dialog.tsx
@@ -19,49 +19,66 @@ export const UpdateDisplayNameDialog = memoNamed<Props>(
     const { formState, displayNameFormIntent, enterButtonDisabled } =
       useObservableValue(UpdateDisplayNamePageStore.state);
 
-    return (
-      <UpdateUserInfoDialogTemplate
-        body={
-          <div
-            css={css`
-              width: 300px;
-              height: 80px;
-            `}
+    const body = useMemo(
+      () => (
+        <div
+          css={css`
+            width: 300px;
+            height: 80px;
+          `}
+        >
+          <FormGroup
+            helperText={formState.displayName.error}
+            intent={displayNameFormIntent}
+            label={newDisplayNameInputLabel}
           >
-            <FormGroup
-              helperText={formState.displayName.error}
+            <BpInput
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus={true}
+              disabled={formState.isWaitingResponse}
               intent={displayNameFormIntent}
-              label={<Label>{dc.updateDisplayName.newDisplayName}</Label>}
-            >
-              <BpInput
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus={true}
-                disabled={formState.isWaitingResponse}
-                intent={displayNameFormIntent}
-                type={'text'}
-                value={formState.displayName.inputValue}
-                onValueChange={
-                  UpdateDisplayNamePageStore.inputDisplayNameHandler
-                }
-              />
-            </FormGroup>
-          </div>
-        }
+              type={'text'}
+              value={formState.displayName.inputValue}
+              onValueChange={UpdateDisplayNamePageStore.inputDisplayNameHandler}
+            />
+          </FormGroup>
+        </div>
+      ),
+      [
+        displayNameFormIntent,
+        formState.displayName.error,
+        formState.displayName.inputValue,
+        formState.isWaitingResponse,
+      ],
+    );
+
+    const submitButton = useMemo(
+      () => (
+        <Button
+          disabled={enterButtonDisabled}
+          intent={'primary'}
+          loading={formState.isWaitingResponse}
+          onClick={UpdateDisplayNamePageStore.enterClickHandler}
+        >
+          {dc.button.update}
+        </Button>
+      ),
+      [enterButtonDisabled, formState.isWaitingResponse],
+    );
+
+    return (
+      <UpdateUserInfoDialogTemplate
+        body={body}
         closeDialog={UpdateUserInfoDialogStore.closeDialog}
         dialogIsOpen={dialogIsOpen}
         isWaitingResponse={formState.isWaitingResponse}
-        submitButton={
-          <Button
-            disabled={enterButtonDisabled}
-            intent={'primary'}
-            loading={formState.isWaitingResponse}
-            onClick={UpdateDisplayNamePageStore.enterClickHandler}
-          >
-            {dc.button.update}
-          </Button>
-        }
+        submitButton={submitButton}
         title={dc.updateDisplayName.title}
       />
     );
   },
 );
+
+const newDisplayNameInputLabel = (
+  <Label>{dc.updateDisplayName.newDisplayName}</Label>
+);
diff --git a/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/update-email-dialog.tsx b/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/update-email-dialog.tsx
index acf7034744..263ca4e044 100644
--- a/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/update-email-dialog.tsx
+++ b/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/update-email-dialog.tsx
@@ -26,75 +26,102 @@ export const UpdateEmailDialog = memoNamed<Props>(
       passwordIsOpen,
     } = useObservableValue(UpdateEmailPageStore.state);
 
-    return (
-      <UpdateUserInfoDialogTemplate
-        body={
-          <div
-            css={css`
-              width: 300px;
-              height: 200px;
-            `}
+    const passwordLockButton = useMemo(
+      () => (
+        <LockButton
+          disabled={formState.isWaitingResponse}
+          passwordIsOpen={passwordIsOpen}
+          onLockClick={UpdateEmailPageStore.togglePasswordLock}
+        />
+      ),
+      [formState.isWaitingResponse, passwordIsOpen],
+    );
+
+    const body = useMemo(
+      () => (
+        <div
+          css={css`
+            width: 300px;
+            height: 200px;
+          `}
+        >
+          <FormGroup intent={'none'} label={currentEmailInputLabel}>
+            <div>{currentEmail ?? ''}</div>
+          </FormGroup>
+          <FormGroup
+            helperText={formState.email.error}
+            intent={emailFormIntent}
+            label={newEmailInputLabel}
           >
-            <FormGroup
-              intent={'none'}
-              label={<Label>{dc.updateEmail.currentEmail}</Label>}
-            >
-              <div>{currentEmail ?? ''}</div>
-            </FormGroup>
-            <FormGroup
-              helperText={formState.email.error}
+            <BpInput
+              autoComplete={'username'}
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus={true}
+              disabled={formState.isWaitingResponse}
               intent={emailFormIntent}
-              label={<Label>{dc.updateEmail.newEmail}</Label>}
-            >
-              <BpInput
-                autoComplete={'username'}
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus={true}
-                disabled={formState.isWaitingResponse}
-                intent={emailFormIntent}
-                type={'email'}
-                value={formState.email.inputValue}
-                onValueChange={UpdateEmailPageStore.inputEmailHandler}
-              />
-            </FormGroup>
-            <FormGroup
-              helperText={formState.password.error}
+              type={'email'}
+              value={formState.email.inputValue}
+              onValueChange={UpdateEmailPageStore.inputEmailHandler}
+            />
+          </FormGroup>
+          <FormGroup
+            helperText={formState.password.error}
+            intent={passwordFormIntent}
+            label={passwordInputLabel}
+          >
+            <BpInput
+              autoComplete={'current-password'}
+              disabled={formState.isWaitingResponse}
               intent={passwordFormIntent}
-              label={<Label>{dc.reauthenticate.password}</Label>}
-            >
-              <BpInput
-                autoComplete={'current-password'}
-                disabled={formState.isWaitingResponse}
-                intent={passwordFormIntent}
-                rightElement={
-                  <LockButton
-                    disabled={formState.isWaitingResponse}
-                    passwordIsOpen={passwordIsOpen}
-                    onLockClick={UpdateEmailPageStore.togglePasswordLock}
-                  />
-                }
-                type={passwordIsOpen ? 'text' : 'password'}
-                value={formState.password.inputValue}
-                onValueChange={UpdateEmailPageStore.inputPasswordHandler}
-              />
-            </FormGroup>
-          </div>
-        }
+              rightElement={passwordLockButton}
+              type={passwordIsOpen ? 'text' : 'password'}
+              value={formState.password.inputValue}
+              onValueChange={UpdateEmailPageStore.inputPasswordHandler}
+            />
+          </FormGroup>
+        </div>
+      ),
+      [
+        currentEmail,
+        emailFormIntent,
+        formState.email.error,
+        formState.email.inputValue,
+        formState.isWaitingResponse,
+        formState.password.error,
+        formState.password.inputValue,
+        passwordFormIntent,
+        passwordIsOpen,
+        passwordLockButton,
+      ],
+    );
+
+    const submitButton = useMemo(
+      () => (
+        <Button
+          disabled={enterButtonDisabled}
+          intent={'primary'}
+          loading={formState.isWaitingResponse}
+          onClick={UpdateEmailPageStore.enterClickHandler}
+        >
+          {dc.button.update}
+        </Button>
+      ),
+      [enterButtonDisabled, formState.isWaitingResponse],
+    );
+
+    return (
+      <UpdateUserInfoDialogTemplate
+        body={body}
         closeDialog={UpdateUserInfoDialogStore.closeDialog}
         dialogIsOpen={dialogIsOpen}
         isWaitingResponse={formState.isWaitingResponse}
-        submitButton={
-          <Button
-            disabled={enterButtonDisabled}
-            intent={'primary'}
-            loading={formState.isWaitingResponse}
-            onClick={UpdateEmailPageStore.enterClickHandler}
-          >
-            {dc.button.update}
-          </Button>
-        }
+        submitButton={submitButton}
         title={dc.updateEmail.title}
       />
     );
   },
 );
+
+const passwordInputLabel = <Label>{dc.reauthenticate.password}</Label>;
+const currentEmailInputLabel = <Label>{dc.updateEmail.currentEmail}</Label>;
+const newEmailInputLabel = <Label>{dc.updateEmail.newEmail}</Label>;
diff --git a/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/update-password-dialog.tsx b/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/update-password-dialog.tsx
index 5a1cca9b02..149f1d7447 100644
--- a/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/update-password-dialog.tsx
+++ b/packages/apps/event-schedule-app/src/components/organisms/update-user-info-dialog/update-password-dialog.tsx
@@ -30,109 +30,151 @@ export const UpdatePasswordDialog = memoNamed<Props>(
       newPasswordIsOpen,
     } = useObservableValue(UpdatePasswordPageStore.state);
 
-    return (
-      <UpdateUserInfoDialogTemplate
-        body={
-          <div
-            css={css`
-              width: 300px;
-              height: 200px;
-            `}
+    const newPasswordLockButton = useMemo(
+      () => (
+        <LockButton
+          disabled={formState.isWaitingResponse}
+          passwordIsOpen={newPasswordIsOpen}
+          onLockClick={UpdatePasswordPageStore.toggleNewPasswordLock}
+        />
+      ),
+      [formState.isWaitingResponse, newPasswordIsOpen],
+    );
+
+    const oldPasswordInputButton = useMemo(
+      () => (
+        <LockButton
+          disabled={formState.isWaitingResponse}
+          passwordIsOpen={oldPasswordIsOpen}
+          onLockClick={UpdatePasswordPageStore.toggleOldPasswordLock}
+        />
+      ),
+      [formState.isWaitingResponse, oldPasswordIsOpen],
+    );
+
+    const body = useMemo(
+      () => (
+        <div
+          css={css`
+            width: 300px;
+            height: 200px;
+          `}
+        >
+          <FormGroup
+            intent={'none'}
+            label={currentEmailInputLabel}
+            style={hideStyle}
           >
-            <FormGroup
+            <BpInput
+              autoComplete={'current-email'}
+              disabled={false}
               intent={'none'}
-              label={<Label>{dc.updatePassword.currentEmail}</Label>}
-              style={hideStyle}
-            >
-              <BpInput
-                autoComplete={'username'}
-                disabled={false}
-                intent={'none'}
-                type={'email'}
-                value={currentEmail ?? ''}
-                onValueChange={noop}
-              />
-            </FormGroup>
+              type={'email'}
+              value={currentEmail ?? ''}
+              onValueChange={noop}
+            />
+          </FormGroup>
 
-            <FormGroup
-              helperText={formState.oldPassword.error}
+          <FormGroup
+            helperText={formState.oldPassword.error}
+            intent={oldPasswordFormIntent}
+            label={oldPasswordInputLabel}
+          >
+            <BpInput
+              autoComplete={'current-password'}
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus={true}
+              disabled={formState.isWaitingResponse}
               intent={oldPasswordFormIntent}
-              label={<Label>{dc.updatePassword.oldPassword}</Label>}
-            >
-              <BpInput
-                autoComplete={'current-password'}
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus={true}
-                disabled={formState.isWaitingResponse}
-                intent={oldPasswordFormIntent}
-                rightElement={
-                  <LockButton
-                    disabled={formState.isWaitingResponse}
-                    passwordIsOpen={oldPasswordIsOpen}
-                    onLockClick={UpdatePasswordPageStore.toggleOldPasswordLock}
-                  />
-                }
-                type={oldPasswordIsOpen ? 'text' : 'password'}
-                value={formState.oldPassword.inputValue}
-                onValueChange={UpdatePasswordPageStore.inputOldPasswordHandler}
-              />
-            </FormGroup>
+              rightElement={oldPasswordInputButton}
+              type={oldPasswordIsOpen ? 'text' : 'password'}
+              value={formState.oldPassword.inputValue}
+              onValueChange={UpdatePasswordPageStore.inputOldPasswordHandler}
+            />
+          </FormGroup>
 
-            <FormGroup
-              helperText={formState.newPassword.password.error}
+          <FormGroup
+            helperText={formState.newPassword.password.error}
+            intent={newPasswordFormIntent}
+            label={newPasswordInputLabel}
+          >
+            <BpInput
+              autoComplete={'new-password'}
+              disabled={formState.isWaitingResponse}
               intent={newPasswordFormIntent}
-              label={<Label>{dc.updatePassword.newPassword}</Label>}
-            >
-              <BpInput
-                autoComplete={'new-password'}
-                disabled={formState.isWaitingResponse}
-                intent={newPasswordFormIntent}
-                type={'password'}
-                value={formState.newPassword.password.inputValue}
-                onValueChange={UpdatePasswordPageStore.inputNewPasswordHandler}
-              />
-            </FormGroup>
+              type={'password'}
+              value={formState.newPassword.password.inputValue}
+              onValueChange={UpdatePasswordPageStore.inputNewPasswordHandler}
+            />
+          </FormGroup>
 
-            <FormGroup
-              helperText={formState.newPassword.passwordConfirmation.error}
+          <FormGroup
+            helperText={formState.newPassword.passwordConfirmation.error}
+            intent={newPasswordFormIntent}
+            label={verifyNewPasswordInputLabel}
+          >
+            <BpInput
+              autoComplete={'new-password'}
+              disabled={formState.isWaitingResponse}
               intent={newPasswordFormIntent}
-              label={<Label>{dc.updatePassword.verifyNewPassword}</Label>}
-            >
-              <BpInput
-                autoComplete={'new-password'}
-                disabled={formState.isWaitingResponse}
-                intent={newPasswordFormIntent}
-                rightElement={
-                  <LockButton
-                    disabled={formState.isWaitingResponse}
-                    passwordIsOpen={newPasswordIsOpen}
-                    onLockClick={UpdatePasswordPageStore.toggleNewPasswordLock}
-                  />
-                }
-                type={newPasswordIsOpen ? 'text' : 'password'}
-                value={formState.newPassword.passwordConfirmation.inputValue}
-                onValueChange={
-                  UpdatePasswordPageStore.inputNewPasswordConfirmationHandler
-                }
-              />
-            </FormGroup>
-          </div>
-        }
+              rightElement={newPasswordLockButton}
+              type={newPasswordIsOpen ? 'text' : 'password'}
+              value={formState.newPassword.passwordConfirmation.inputValue}
+              onValueChange={
+                UpdatePasswordPageStore.inputNewPasswordConfirmationHandler
+              }
+            />
+          </FormGroup>
+        </div>
+      ),
+      [
+        currentEmail,
+        formState.isWaitingResponse,
+        formState.newPassword.password.error,
+        formState.newPassword.password.inputValue,
+        formState.newPassword.passwordConfirmation.error,
+        formState.newPassword.passwordConfirmation.inputValue,
+        formState.oldPassword.error,
+        formState.oldPassword.inputValue,
+        newPasswordFormIntent,
+        newPasswordIsOpen,
+        newPasswordLockButton,
+        oldPasswordFormIntent,
+        oldPasswordInputButton,
+        oldPasswordIsOpen,
+      ],
+    );
+
+    const submitButton = useMemo(
+      () => (
+        <Button
+          disabled={enterButtonDisabled}
+          intent={'primary'}
+          loading={formState.isWaitingResponse}
+          onClick={UpdatePasswordPageStore.enterClickHandler}
+        >
+          {dc.button.update}
+        </Button>
+      ),
+      [enterButtonDisabled, formState.isWaitingResponse],
+    );
+
+    return (
+      <UpdateUserInfoDialogTemplate
+        body={body}
         closeDialog={UpdateUserInfoDialogStore.closeDialog}
         dialogIsOpen={dialogIsOpen}
         isWaitingResponse={formState.isWaitingResponse}
-        submitButton={
-          <Button
-            disabled={enterButtonDisabled}
-            intent={'primary'}
-            loading={formState.isWaitingResponse}
-            onClick={UpdatePasswordPageStore.enterClickHandler}
-          >
-            {dc.button.update}
-          </Button>
-        }
+        submitButton={submitButton}
         title={dc.updatePassword.title}
       />
     );
   },
 );
+
+const oldPasswordInputLabel = <Label>{dc.updatePassword.oldPassword}</Label>;
+const currentEmailInputLabel = <Label>{dc.updatePassword.currentEmail}</Label>;
+const newPasswordInputLabel = <Label>{dc.updatePassword.newPassword}</Label>;
+const verifyNewPasswordInputLabel = (
+  <Label>{dc.updatePassword.verifyNewPassword}</Label>
+);
diff --git a/packages/apps/event-schedule-app/src/components/pages/answer-page/answer-page.tsx b/packages/apps/event-schedule-app/src/components/pages/answer-page/answer-page.tsx
index a1d58efeae..d2426ce5bd 100644
--- a/packages/apps/event-schedule-app/src/components/pages/answer-page/answer-page.tsx
+++ b/packages/apps/event-schedule-app/src/components/pages/answer-page/answer-page.tsx
@@ -240,13 +240,7 @@ export const AnswerPage = memoNamed('AnswerPage', () => {
                       addOnBlur={false}
                       addOnPaste={false}
                       leftIcon={'filter-list'}
-                      rightElement={
-                        <Button
-                          icon={'cross'}
-                          minimal={true}
-                          onClick={AnswerFilterAndSortStore.clearTags}
-                        />
-                      }
+                      rightElement={clearTagsButton}
                       tagProps={
                         // eslint-disable-next-line total-functions/no-unsafe-type-assertion
                         tagProps as (
@@ -394,8 +388,8 @@ export const AnswerPage = memoNamed('AnswerPage', () => {
               <ButtonsWrapperAlignEnd>
                 <Button
                   data-e2e={'add-answer-button'}
-                  icon='add'
-                  intent='primary'
+                  icon={'add'}
+                  intent={'primary'}
                   text={dc.answers.addAnswer}
                   onClick={AnswerPageStore.onAddAnswerButtonClick}
                 />
@@ -452,6 +446,14 @@ const IconDescriptionRow = memoNamed<
   </tr>
 ));
 
+const clearTagsButton = (
+  <Button
+    icon={'cross'}
+    minimal={true}
+    onClick={AnswerFilterAndSortStore.clearTags}
+  />
+);
+
 const CalendarWrapper = styled.div`
   margin: 10px;
   display: flex;
diff --git a/packages/apps/event-schedule-app/src/components/pages/not-found-page.tsx b/packages/apps/event-schedule-app/src/components/pages/not-found-page.tsx
index 959bc74fd9..b26339a81d 100644
--- a/packages/apps/event-schedule-app/src/components/pages/not-found-page.tsx
+++ b/packages/apps/event-schedule-app/src/components/pages/not-found-page.tsx
@@ -3,23 +3,19 @@ import { Anchor } from '@noshiro/react-blueprintjs-utils';
 import { Routes } from '../../constants';
 import { Router } from '../../store';
 
-export const NotFoundPage = memoNamed('NotFoundPage', () => {
-  const onClick = useRouterLinkClick({
-    replace: false,
-    pushFn: Router.push,
-    redirectFn: Router.redirect,
-  });
+export const NotFoundPage = memoNamed('NotFoundPage', () => (
+  <NonIdealState action={action} icon={'search'} title={dict.pageNotFound} />
+));
 
-  return (
-    <NonIdealState
-      action={
-        <Anchor href={Routes.routes.createPage} onClick={onClick}>
-          <Icon icon={'home'} />
-          {dict.topPage}
-        </Anchor>
-      }
-      icon={'search'}
-      title={dict.pageNotFound}
-    />
-  );
+const onClick = createRouterLinkClickHandler({
+  replace: false,
+  pushFn: Router.push,
+  redirectFn: Router.redirect,
 });
+
+const action = (
+  <Anchor href={Routes.routes.createPage} onClick={onClick}>
+    <Icon icon={'home'} />
+    {dict.topPage}
+  </Anchor>
+);
diff --git a/packages/apps/event-schedule-app/src/components/pages/register-page.tsx b/packages/apps/event-schedule-app/src/components/pages/register-page.tsx
index 8308dd713b..68e8627ed0 100644
--- a/packages/apps/event-schedule-app/src/components/pages/register-page.tsx
+++ b/packages/apps/event-schedule-app/src/components/pages/register-page.tsx
@@ -23,6 +23,17 @@ export const RegisterPage = memoNamed('RegisterPage', () => {
     passwordIsOpen,
   } = useObservableValue(RegisterPageStore.state);
 
+  const passwordLockButton = useMemo(
+    () => (
+      <LockButton
+        disabled={formState.isWaitingResponse}
+        passwordIsOpen={passwordIsOpen}
+        onLockClick={RegisterPageStore.togglePasswordLock}
+      />
+    ),
+    [formState.isWaitingResponse, passwordIsOpen],
+  );
+
   return (
     <SignInStyled.Wrapper>
       <NavBar />
@@ -34,7 +45,7 @@ export const RegisterPage = memoNamed('RegisterPage', () => {
               <FormGroup
                 helperText={formState.username.error}
                 intent={usernameFormIntent}
-                label={<Label>{dc.username}</Label>}
+                label={usernameInputLabel}
               >
                 <BpInput
                   // eslint-disable-next-line jsx-a11y/no-autofocus
@@ -50,7 +61,7 @@ export const RegisterPage = memoNamed('RegisterPage', () => {
               <FormGroup
                 helperText={formState.email.error}
                 intent={emailFormIntent}
-                label={<Label>{dc.email}</Label>}
+                label={emailInputLabel}
               >
                 <BpInput
                   autoComplete={'username'}
@@ -66,7 +77,7 @@ export const RegisterPage = memoNamed('RegisterPage', () => {
               <FormGroup
                 helperText={formState.password.password.error}
                 intent={passwordFormIntent}
-                label={<Label>{dc.password}</Label>}
+                label={newPasswordInputLabel}
               >
                 <BpInput
                   autoComplete={'new-password'}
@@ -81,18 +92,12 @@ export const RegisterPage = memoNamed('RegisterPage', () => {
               <FormGroup
                 helperText={formState.password.passwordConfirmation.error}
                 intent={passwordFormIntent}
-                label={<Label>{dc.verifyPassword}</Label>}
+                label={verifyPasswordInputLabel}
               >
                 <BpInput
                   disabled={formState.isWaitingResponse}
                   intent={passwordFormIntent}
-                  rightElement={
-                    <LockButton
-                      disabled={formState.isWaitingResponse}
-                      passwordIsOpen={passwordIsOpen}
-                      onLockClick={RegisterPageStore.togglePasswordLock}
-                    />
-                  }
+                  rightElement={passwordLockButton}
                   type={passwordIsOpen ? 'text' : 'password'}
                   value={formState.password.passwordConfirmation.inputValue}
                   onValueChange={
@@ -156,3 +161,8 @@ export const RegisterPage = memoNamed('RegisterPage', () => {
 const FormRectWrapper = styled(SignInStyled.FormRectWrapperBase)`
   height: 510px;
 `;
+
+const usernameInputLabel = <Label>{dc.username}</Label>;
+const emailInputLabel = <Label>{dc.email}</Label>;
+const newPasswordInputLabel = <Label>{dc.password}</Label>;
+const verifyPasswordInputLabel = <Label>{dc.verifyPassword}</Label>;
diff --git a/packages/apps/event-schedule-app/src/components/pages/reset-password-page.tsx b/packages/apps/event-schedule-app/src/components/pages/reset-password-page.tsx
index fefd9657a7..063e168100 100644
--- a/packages/apps/event-schedule-app/src/components/pages/reset-password-page.tsx
+++ b/packages/apps/event-schedule-app/src/components/pages/reset-password-page.tsx
@@ -39,7 +39,7 @@ export const ResetPasswordPage = memoNamed<Props>(
               <FormGroup
                 helperText={formState.email.error}
                 intent={emailFormIntent}
-                label={<Label>{dc.email}</Label>}
+                label={emailInputLabel}
               >
                 <BpInput
                   autoComplete={'email'}
@@ -72,6 +72,8 @@ export const ResetPasswordPage = memoNamed<Props>(
   },
 );
 
+const emailInputLabel = <Label>{dc.email}</Label>;
+
 const FormRectWrapper = styled(SignInStyled.FormRectWrapperBase)`
   height: 320px;
   position: relative;
diff --git a/packages/apps/event-schedule-app/src/components/pages/sign-in-page.tsx b/packages/apps/event-schedule-app/src/components/pages/sign-in-page.tsx
index 424661cbb0..da4bd5ace7 100644
--- a/packages/apps/event-schedule-app/src/components/pages/sign-in-page.tsx
+++ b/packages/apps/event-schedule-app/src/components/pages/sign-in-page.tsx
@@ -28,6 +28,17 @@ export const SignInPage = memoNamed('SignInPage', () => {
     { setTrue: passwordIsOpenResetForm, setFalse: hidePasswordResetForm },
   ] = useBoolState(false);
 
+  const lockPasswordButton = useMemo(
+    () => (
+      <LockButton
+        disabled={formState.isWaitingResponse}
+        passwordIsOpen={passwordIsOpen}
+        onLockClick={SignInPageStore.togglePasswordLock}
+      />
+    ),
+    [formState.isWaitingResponse, passwordIsOpen],
+  );
+
   return (
     <SignInStyled.Wrapper>
       <NavBar />
@@ -42,7 +53,7 @@ export const SignInPage = memoNamed('SignInPage', () => {
                 <FormGroup
                   helperText={formState.email.error}
                   intent={emailFormIntent}
-                  label={<Label>{dc.email}</Label>}
+                  label={emailInputLabel}
                 >
                   <BpInput
                     autoComplete={'email'}
@@ -61,20 +72,14 @@ export const SignInPage = memoNamed('SignInPage', () => {
                 <FormGroup
                   helperText={formState.password.error}
                   intent={passwordFormIntent}
-                  label={<Label>{dc.password}</Label>}
+                  label={passwordInputLabel}
                 >
                   <BpInput
                     autoComplete={'current-password'}
                     disabled={formState.isWaitingResponse}
                     fill={true}
                     intent={passwordFormIntent}
-                    rightElement={
-                      <LockButton
-                        disabled={formState.isWaitingResponse}
-                        passwordIsOpen={passwordIsOpen}
-                        onLockClick={SignInPageStore.togglePasswordLock}
-                      />
-                    }
+                    rightElement={lockPasswordButton}
                     type={passwordIsOpen ? 'text' : 'password'}
                     value={formState.password.inputValue}
                     onValueChange={SignInPageStore.inputPasswordHandler}
@@ -140,6 +145,9 @@ export const SignInPage = memoNamed('SignInPage', () => {
   );
 });
 
+const emailInputLabel = <Label>{dc.email}</Label>;
+const passwordInputLabel = <Label>{dc.password}</Label>;
+
 const FormRectWrapper = styled(SignInStyled.FormRectWrapperBase)`
   height: 420px;
 `;
diff --git a/packages/apps/event-schedule-app/src/components/pages/ui-parts-test.tsx b/packages/apps/event-schedule-app/src/components/pages/ui-parts-test.tsx
index cb97b4bb5e..f8672c7d93 100644
--- a/packages/apps/event-schedule-app/src/components/pages/ui-parts-test.tsx
+++ b/packages/apps/event-schedule-app/src/components/pages/ui-parts-test.tsx
@@ -75,27 +75,31 @@ export const UiPartsTest = memoNamed('UiPartsTest', () => {
         <TextArea fill={true} value={'value'} />
       </PadWrapper>
       <PadWrapper>
-        <Button icon='refresh' rightIcon={'duplicate'}>
+        <Button icon={'refresh'} rightIcon={'duplicate'}>
           {'default'}
         </Button>
       </PadWrapper>
       <PadWrapper>
-        <Button intent='primary'>{'primary'}</Button>
+        <Button intent={'primary'}>{'primary'}</Button>
       </PadWrapper>
       <PadWrapper>
-        <Button intent='success'>{'success'}</Button>
+        <Button intent={'success'}>{'success'}</Button>
       </PadWrapper>
       <PadWrapper>
-        <Button intent='warning'>{'warning'}</Button>
+        <Button intent={'warning'}>{'warning'}</Button>
       </PadWrapper>
       <PadWrapper>
-        <Button intent='danger'>{'danger'}</Button>
+        <Button intent={'danger'}>{'danger'}</Button>
       </PadWrapper>
       <PadWrapper>
-        <Button intent='none'>{'none'}</Button>
+        <Button intent={'none'}>{'none'}</Button>
       </PadWrapper>
       <PadWrapper>
-        <BpTimePicker time={{ hours: 12, minutes: 34 }} onTimeChange={clog} />
+        <BpTimePicker
+          // eslint-disable-next-line react-perf/jsx-no-new-object-as-prop
+          time={{ hours: 12, minutes: 34 }}
+          onTimeChange={clog}
+        />
       </PadWrapper>
       <PadWrapper>
         <BpSelect options={options} onValueChange={noop} />
@@ -103,6 +107,7 @@ export const UiPartsTest = memoNamed('UiPartsTest', () => {
       <PadWrapper>
         <BpSwitch
           checked={bpSwitchState}
+          // eslint-disable-next-line react-perf/jsx-no-jsx-as-prop
           labelElement={<strong>{'switch'}</strong>}
           onToggle={onBpSwitchChangeHandler}
         />
diff --git a/packages/apps/event-schedule-app/src/error-handler/error-boundary.tsx b/packages/apps/event-schedule-app/src/error-handler/error-boundary.tsx
index 4be36e4d26..957ecb12c8 100644
--- a/packages/apps/event-schedule-app/src/error-handler/error-boundary.tsx
+++ b/packages/apps/event-schedule-app/src/error-handler/error-boundary.tsx
@@ -164,11 +164,13 @@ export class ErrorBoundary extends Component<Props, State> {
       >
         <NonIdealState
           action={
+            // eslint-disable-next-line react-perf/jsx-no-jsx-as-prop
             <Button onClick={this.handleOpenClick}>
               {isOpen ? dc.hideDetails : dc.showDetails}
             </Button>
           }
           description={
+            // eslint-disable-next-line react-perf/jsx-no-jsx-as-prop
             <div>
               <div>{dc.unexpectedError}</div>
               {openedOnce ? <div>{dc.reloadThisPage}</div> : undefined}
@@ -198,7 +200,7 @@ export class ErrorBoundary extends Component<Props, State> {
             <FormGroup
               helperText={dc.sendReport.description.helperText}
               label={dc.sendReport.description.label}
-              labelFor='description-textarea'
+              labelFor={'description-textarea'}
               labelInfo={dc.sendReport.description.labelInfo}
             >
               <BpTextArea
diff --git a/packages/apps/housing-loan-calculator-app/src/components/config-section/repayment-type-radio-group.tsx b/packages/apps/housing-loan-calculator-app/src/components/config-section/repayment-type-radio-group.tsx
index c6186f766f..0b679ccca8 100644
--- a/packages/apps/housing-loan-calculator-app/src/components/config-section/repayment-type-radio-group.tsx
+++ b/packages/apps/housing-loan-calculator-app/src/components/config-section/repayment-type-radio-group.tsx
@@ -29,12 +29,12 @@ export const RepaymentTypeRadioGroup = memoNamed<Props>(
         <Radio
           data-e2e={'radio--principal-equal-payment'}
           label={dict.principalEqualPayment}
-          value='principal-equal-payment'
+          value={"principal-equal-payment"}
         />
         <Radio
           data-e2e={'radio--principal-and-interest-equal-repayment'}
           label={dict.principalAndInterestEqualRepayment}
-          value='principal-and-interest-equal-repayment'
+          value={"principal-and-interest-equal-repayment"}
         />
       </RadioGroup>
     );
diff --git a/packages/apps/my-portfolio-app-preact/src/components/mui/mui-tabs.tsx b/packages/apps/my-portfolio-app-preact/src/components/mui/mui-tabs.tsx
index c3e12a76d9..0a749ee582 100644
--- a/packages/apps/my-portfolio-app-preact/src/components/mui/mui-tabs.tsx
+++ b/packages/apps/my-portfolio-app-preact/src/components/mui/mui-tabs.tsx
@@ -55,7 +55,7 @@ export const MuiTabs = memoNamed<Props>(
     return (
       <Root>
         <TabsScroller scrollable={scrollable}>
-          <FlexContainer role='tablist'>
+          <FlexContainer role={'tablist'}>
             {labelsWithHandler.map(({ index, label, onClick, onResize }) => (
               <Tab
                 key={index}
@@ -146,9 +146,9 @@ const Tab = memoNamed<{
       <TabStyled
         aria-selected={selected}
         data-e2e={cyId}
-        role='tab'
+        role={'tab'}
         style={style}
-        type='button'
+        type={'button'}
         onClick={onClick}
       >
         {label}
@@ -204,14 +204,17 @@ const TabIndicator = memoNamed<
   }>
 >(
   'TabIndicator',
-  ({ tabWidthAccumulated, tabWidthList, tabIndex, tabWidthPx }) => (
-    <TabIndicatorStyled
-      style={{
+  ({ tabWidthAccumulated, tabWidthList, tabIndex, tabWidthPx }) => {
+    const style = useMemo(
+      () => ({
         left: `${tabWidthAccumulated[tabIndex] ?? 0}px`,
         width: `${tabWidthList[tabIndex] ?? tabWidthPx}px`,
-      }}
-    />
-  ),
+      }),
+      [tabIndex, tabWidthAccumulated, tabWidthList, tabWidthPx],
+    );
+
+    return <TabIndicatorStyled style={style} />;
+  },
 );
 
 const TabIndicatorStyled = styled('span')`
diff --git a/packages/apps/my-portfolio-app-preact/src/components/writings/writings-element.tsx b/packages/apps/my-portfolio-app-preact/src/components/writings/writings-element.tsx
index 4dde05db23..1f637c34b5 100644
--- a/packages/apps/my-portfolio-app-preact/src/components/writings/writings-element.tsx
+++ b/packages/apps/my-portfolio-app-preact/src/components/writings/writings-element.tsx
@@ -11,7 +11,7 @@ export const WritingsElement = memoNamed<
   <CardStyled>
     <MuiCardContent>
       <MuiTypography variant={'title'}>
-        <a href={link} rel='noopener noreferrer' target='_blank'>
+        <a href={link} rel={"noopener noreferrer"} target={"_blank"}>
           {title}
         </a>
       </MuiTypography>
diff --git a/packages/apps/template-preact-app-vite/src/app.tsx b/packages/apps/template-preact-app-vite/src/app.tsx
index c4e50ea2cf..9e6915ccd9 100644
--- a/packages/apps/template-preact-app-vite/src/app.tsx
+++ b/packages/apps/template-preact-app-vite/src/app.tsx
@@ -13,18 +13,18 @@ export const App = memoNamed('App', () => {
   return (
     <>
       <div>
-        <a href='https://vitejs.dev' rel='noreferrer' target='_blank'>
-          <img alt='Vite logo' className='logo' src='/vite.svg' />
+        <a href={"https://vitejs.dev"} rel={"noreferrer"} target={"_blank"}>
+          <img alt={"Vite logo"} className={"logo"} src={"/vite.svg"} />
         </a>
-        <a href='https://preactjs.com' rel='noreferrer' target='_blank'>
-          <img alt='Preact logo' className='logo preact' src={preactLogo} />
+        <a href={"https://preactjs.com"} rel={"noreferrer"} target={"_blank"}>
+          <img alt={"Preact logo"} className={"logo preact"} src={preactLogo} />
         </a>
       </div>
       <h1>{'Vite + Preact'}</h1>
-      <div className='card'>
+      <div className={"card"}>
         <button
-          data-e2e='increment-button'
-          type='button'
+          data-e2e={"increment-button"}
+          type={"button"}
           onClick={increment}
         >{`count is ${count}`}</button>
         <p>
@@ -33,7 +33,7 @@ export const App = memoNamed('App', () => {
           {' and save to test HMR'}
         </p>
       </div>
-      <p className='read-the-docs'>
+      <p className={"read-the-docs"}>
         {'Click on the Vite and Preact logos to learn more'}
       </p>
     </>
diff --git a/packages/apps/template-react-app-vite/src/app.tsx b/packages/apps/template-react-app-vite/src/app.tsx
index 73e66aeff1..1e7ec4d917 100644
--- a/packages/apps/template-react-app-vite/src/app.tsx
+++ b/packages/apps/template-react-app-vite/src/app.tsx
@@ -11,20 +11,20 @@ export const App = memoNamed('App', () => {
   const count = useCount();
 
   return (
-    <div className='App'>
+    <div className={"App"}>
       <div>
-        <a href='https://vitejs.dev' rel='noreferrer' target='_blank'>
-          <img alt='Vite logo' className='logo' src='/vite.svg' />
+        <a href={"https://vitejs.dev"} rel={"noreferrer"} target={"_blank"}>
+          <img alt={"Vite logo"} className={"logo"} src={"/vite.svg"} />
         </a>
-        <a href='https://reactjs.org' rel='noreferrer' target='_blank'>
-          <img alt='React logo' className='logo react' src={reactLogo} />
+        <a href={"https://reactjs.org"} rel={"noreferrer"} target={"_blank"}>
+          <img alt={"React logo"} className={"logo react"} src={reactLogo} />
         </a>
       </div>
       <h1>{'Vite + React'}</h1>
-      <div className='card'>
+      <div className={"card"}>
         <button
-          data-e2e='increment-button'
-          type='button'
+          data-e2e={"increment-button"}
+          type={"button"}
           onClick={increment}
         >{`count is ${count}`}</button>
         <p>
@@ -33,7 +33,7 @@ export const App = memoNamed('App', () => {
           {' and save to test HMR'}
         </p>
       </div>
-      <p className='read-the-docs'>
+      <p className={"read-the-docs"}>
         {'Click on the Vite and React logos to learn more'}
       </p>
     </div>
diff --git a/packages/utils/react-blueprintjs-utils/src/components/view/checkbox-view.tsx b/packages/utils/react-blueprintjs-utils/src/components/view/checkbox-view.tsx
index b542485185..dae4f0933c 100644
--- a/packages/utils/react-blueprintjs-utils/src/components/view/checkbox-view.tsx
+++ b/packages/utils/react-blueprintjs-utils/src/components/view/checkbox-view.tsx
@@ -37,7 +37,7 @@ export const CheckboxView = ({
         ref={inputRef}
         checked={state === 'checked'}
         disabled={disabled}
-        type='checkbox'
+        type={"checkbox"}
         onChange={onChangeHandler}
       />
       <span />
diff --git a/packages/utils/react-blueprintjs-utils/src/components/view/input-view.tsx b/packages/utils/react-blueprintjs-utils/src/components/view/input-view.tsx
index d6f51a458f..0eb9d30789 100644
--- a/packages/utils/react-blueprintjs-utils/src/components/view/input-view.tsx
+++ b/packages/utils/react-blueprintjs-utils/src/components/view/input-view.tsx
@@ -74,9 +74,9 @@ export const InputView = memoNamed<Props>(
         <InputGroup disabled={disabled} fillSpace={fillSpace}>
           <Input
             ref={inputRef}
-            autoComplete='off'
+            autoComplete={"off"}
             disabled={disabled}
-            type='text'
+            type={"text"}
             value={valueAsStr}
             onBlur={onInputBlur}
             onChange={inputValueChangeHandler}
diff --git a/packages/utils/react-blueprintjs-utils/src/components/view/numeric-input-view.tsx b/packages/utils/react-blueprintjs-utils/src/components/view/numeric-input-view.tsx
index c7f9c0b10c..372a8210e0 100644
--- a/packages/utils/react-blueprintjs-utils/src/components/view/numeric-input-view.tsx
+++ b/packages/utils/react-blueprintjs-utils/src/components/view/numeric-input-view.tsx
@@ -92,9 +92,9 @@ export const NumericInputView = memoNamed<Props>(
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...inputProps}
             ref={inputRef}
-            autoComplete='off'
+            autoComplete={"off"}
             disabled={disabled}
-            type='text'
+            type={"text"}
             value={valueAsStr}
             onBlur={onInputBlur}
             onChange={inputValueChangeHandler}
@@ -103,41 +103,41 @@ export const NumericInputView = memoNamed<Props>(
         </InputGroup>
         <ButtonGroupVerticalFixed>
           <ButtonUp
-            aria-label='increment'
+            aria-label={"increment"}
             disabled={disabled}
             onClick={onIncrementClick}
             onMouseDown={onIncrementMouseDown}
           >
-            <IconWrapper aria-hidden='true'>
+            <IconWrapper aria-hidden={"true"}>
               <ChevronUpDownIcon
-                data-icon='chevron-up'
-                height='16'
-                viewBox='0 0 16 16'
-                width='16'
+                data-icon={"chevron-up"}
+                height={"16"}
+                viewBox={"0 0 16 16"}
+                width={"16"}
               >
                 <path
-                  d='M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z'
-                  fillRule='evenodd'
+                  d={"M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z"}
+                  fillRule={"evenodd"}
                 />
               </ChevronUpDownIcon>
             </IconWrapper>
           </ButtonUp>
           <ButtonDown
-            aria-label='decrement'
+            aria-label={"decrement"}
             disabled={disabled}
             onClick={onDecrementClick}
             onMouseDown={onDecrementMouseDown}
           >
-            <IconWrapper aria-hidden='true'>
+            <IconWrapper aria-hidden={"true"}>
               <ChevronUpDownIcon
-                data-icon='chevron-down'
-                height='16'
-                viewBox='0 0 16 16'
-                width='16'
+                data-icon={"chevron-down"}
+                height={"16"}
+                viewBox={"0 0 16 16"}
+                width={"16"}
               >
                 <path
-                  d='M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z'
-                  fillRule='evenodd'
+                  d={"M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z"}
+                  fillRule={"evenodd"}
                 />
               </ChevronUpDownIcon>
             </IconWrapper>
diff --git a/packages/utils/react-blueprintjs-utils/src/components/wrapper/bp-email-input-group.tsx b/packages/utils/react-blueprintjs-utils/src/components/wrapper/bp-email-input-group.tsx
index 15c99ccd8b..b324a362d3 100644
--- a/packages/utils/react-blueprintjs-utils/src/components/wrapper/bp-email-input-group.tsx
+++ b/packages/utils/react-blueprintjs-utils/src/components/wrapper/bp-email-input-group.tsx
@@ -3,7 +3,7 @@ import { memoNamed } from '@noshiro/react-utils';
 import { type TinyObservable } from '@noshiro/ts-utils';
 import { isEmailString } from '@noshiro/ts-utils-additional';
 import { useBoolState } from 'better-react-use-state';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { BpInput, type BpInputProps } from './bp-input.js';
 
 export type BpEmailInputProps = BpInputProps &
@@ -58,25 +58,36 @@ export const BpEmailInput = memoNamed<BpEmailInputProps>(
       [onValueChange, hideErrors],
     );
 
+    const helperText = useMemo(
+      () =>
+        errorsAreHidden || disabled ? undefined : (
+          <div>
+            {isEmailAddressResult ? undefined : (
+              <div>{invalidEmailMessage}</div>
+            )}
+            {otherErrorMessages === undefined
+              ? undefined
+              : showOtherErrorMessages
+                ? otherErrorMessages.map((er, index) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <div key={index}>{er}</div>
+                  ))
+                : undefined}
+          </div>
+        ),
+      [
+        disabled,
+        errorsAreHidden,
+        invalidEmailMessage,
+        isEmailAddressResult,
+        otherErrorMessages,
+        showOtherErrorMessages,
+      ],
+    );
+
     return (
       <FormGroup
-        helperText={
-          errorsAreHidden || disabled ? undefined : (
-            <div>
-              {isEmailAddressResult ? undefined : (
-                <div>{invalidEmailMessage}</div>
-              )}
-              {otherErrorMessages === undefined
-                ? undefined
-                : showOtherErrorMessages
-                  ? otherErrorMessages.map((er, index) => (
-                      // eslint-disable-next-line react/no-array-index-key
-                      <div key={index}>{er}</div>
-                    ))
-                  : undefined}
-            </div>
-          )
-        }
+        helperText={helperText}
         intent={'danger'}
         label={formGroupLabel}
       >
@@ -88,7 +99,7 @@ export const BpEmailInput = memoNamed<BpEmailInputProps>(
           disabled={disabled}
           focus$={focus$}
           placeholder={placeholder}
-          type='email'
+          type={'email'}
           value={value}
           onBlur={blurHandler}
           onValueChange={valueChangeHandler}
diff --git a/packages/utils/react-blueprintjs-utils/src/components/wrapper/bp-password-input.tsx b/packages/utils/react-blueprintjs-utils/src/components/wrapper/bp-password-input.tsx
index 14431bb535..207579d07f 100644
--- a/packages/utils/react-blueprintjs-utils/src/components/wrapper/bp-password-input.tsx
+++ b/packages/utils/react-blueprintjs-utils/src/components/wrapper/bp-password-input.tsx
@@ -1,5 +1,6 @@
 import { memoNamed } from '@noshiro/react-utils';
 import { useBoolState } from 'better-react-use-state';
+import { useMemo } from 'react';
 import { BpButton } from './bp-button.js';
 import { BpInput, type BpInputProps } from './bp-input.js';
 
@@ -16,16 +17,21 @@ export const BpPasswordInput = memoNamed<BpPasswordInputProps>(
     const [passwordIsOpen, { toggleState: onToggleVisibilityClick }] =
       useBoolState(false);
 
+    const rightElement = useMemo(
+      () => (
+        <BpButton
+          icon={passwordIsOpen ? 'eye-open' : 'eye-off'}
+          minimal={true}
+          onClick={onToggleVisibilityClick}
+        />
+      ),
+      [onToggleVisibilityClick, passwordIsOpen],
+    );
+
     return (
       <BpInput
         disabled={disabled}
-        rightElement={
-          <BpButton
-            icon={passwordIsOpen ? 'eye-open' : 'eye-off'}
-            minimal={true}
-            onClick={onToggleVisibilityClick}
-          />
-        }
+        rightElement={rightElement}
         type={passwordIsOpen ? 'text' : 'password'}
         value={password}
         onValueChange={onPasswordChange}
diff --git a/packages/utils/react-mui-utils/src/confirm-dialog.tsx b/packages/utils/react-mui-utils/src/confirm-dialog.tsx
index 7686146195..df5f656a4d 100644
--- a/packages/utils/react-mui-utils/src/confirm-dialog.tsx
+++ b/packages/utils/react-mui-utils/src/confirm-dialog.tsx
@@ -36,10 +36,10 @@ export const ConfirmDialog = memoNamed<Props>(
           <Typography>{message}</Typography>
         </DialogContent>
         <DialogActions>
-          <Button color='primary' onClick={cancelClicked}>
+          <Button color={"primary"} onClick={cancelClicked}>
             {'Cancel'}
           </Button>
-          <Button color='secondary' onClick={okClicked}>
+          <Button color={"secondary"} onClick={okClicked}>
             {'OK'}
           </Button>
         </DialogActions>
diff --git a/packages/utils/react-mui-utils/src/mui-slider.tsx b/packages/utils/react-mui-utils/src/mui-slider.tsx
index b3362ce288..c1a951e3cc 100644
--- a/packages/utils/react-mui-utils/src/mui-slider.tsx
+++ b/packages/utils/react-mui-utils/src/mui-slider.tsx
@@ -35,7 +35,7 @@ export const MuiSlider = memoNamed<Props>(
         min={min}
         step={step}
         value={value}
-        valueLabelDisplay='auto'
+        valueLabelDisplay={"auto"}
         onChange={sliderOnChange}
       />
     );
diff --git a/packages/utils/react-mui-utils/src/tabs.tsx b/packages/utils/react-mui-utils/src/tabs.tsx
index d0cee22050..cb741a5644 100644
--- a/packages/utils/react-mui-utils/src/tabs.tsx
+++ b/packages/utils/react-mui-utils/src/tabs.tsx
@@ -24,9 +24,9 @@ export const MuiTabs = memoNamed<Props>(
 
     return (
       <Tabs
-        indicatorColor='primary'
+        indicatorColor={"primary"}
         scrollButtons={scrollable}
-        textColor='primary'
+        textColor={"primary"}
         value={tabIndex}
         variant={scrollable ? 'scrollable' : 'fullWidth'}
         onChange={onChange}
diff --git a/packages/utils/react-utils-styled/src/centering-wrapper.tsx b/packages/utils/react-utils-styled/src/centering-wrapper.tsx
index f40d861d7c..c77c9e9801 100644
--- a/packages/utils/react-utils-styled/src/centering-wrapper.tsx
+++ b/packages/utils/react-utils-styled/src/centering-wrapper.tsx
@@ -1,13 +1,6 @@
 import styled from '@emotion/styled';
 import { memoNamed } from '@noshiro/react-utils';
-
-const CenteringWrapperDiv = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
+import { useMemo } from 'react';
 
 type Props = Readonly<{
   direction: 'column' | 'row';
@@ -15,5 +8,20 @@ type Props = Readonly<{
 
 export const CenteringWrapper = memoNamed<Props>(
   'CenteringWrapper',
-  (props) => <CenteringWrapperDiv style={{ flexDirection: props.direction }} />,
+  (props) => {
+    const style = useMemo(
+      () => ({ flexDirection: props.direction }),
+      [props.direction],
+    );
+
+    return <CenteringWrapperDiv style={style} />;
+  },
 );
+
+const CenteringWrapperDiv = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;