diff --git a/apps/app/src/client/components/Sidebar/PageCreateButton/CreateButton.module.scss b/apps/app/src/client/components/Sidebar/PageCreateButton/CreateButton.module.scss
index 0a890c5ebff..aa7fb86ff4c 100644
--- a/apps/app/src/client/components/Sidebar/PageCreateButton/CreateButton.module.scss
+++ b/apps/app/src/client/components/Sidebar/PageCreateButton/CreateButton.module.scss
@@ -19,6 +19,12 @@
   :global(svg .background) {
     pointer-events: fill;
   }
+
+  :global(.hexagon-main),
+  :global(.pencil-icon) {
+    transition: transform 0.2s ease-in-out;
+    transform-origin: 22.5px 22px;
+  }
 }
 
 // == Colors
@@ -35,11 +41,13 @@
 .btn-create:hover {
   :global(svg) {
     fill: var(--bs-btn-hover-bg);
+    transform: scale(1.1);
   }
 }
 
 .btn-create:active {
   :global(svg) {
     fill: var(--bs-btn-active-bg);
+    transform: scale(1.1);
   }
 }
diff --git a/apps/app/src/client/components/Sidebar/PageCreateButton/DropendToggle.module.scss b/apps/app/src/client/components/Sidebar/PageCreateButton/DropendToggle.module.scss
index eec53483031..c12ebdc6e41 100644
--- a/apps/app/src/client/components/Sidebar/PageCreateButton/DropendToggle.module.scss
+++ b/apps/app/src/client/components/Sidebar/PageCreateButton/DropendToggle.module.scss
@@ -4,7 +4,7 @@
 .btn-toggle {
   @extend %btn-basis;
 
-  left: 12px;
+  left: 14px;
   padding: 0;
 
   :global(.icon) {
@@ -18,6 +18,7 @@
 // no caret
 .btn-toggle {
   & {
+
     // no caret
     &::after {
       display: none !important;
@@ -28,7 +29,7 @@
 // hitarea
 .btn-toggle {
   :global(.hitarea) {
-    inset: 0 -10px 0 0;
+    inset: 0 -14px 0 0;
   }
 }
 
@@ -54,3 +55,4 @@
     fill: var(--grw-primary-600);
   }
 }
+
diff --git a/apps/app/src/client/components/Sidebar/PageCreateButton/Hexagon.tsx b/apps/app/src/client/components/Sidebar/PageCreateButton/Hexagon.tsx
index 92fb443c785..d09102dae16 100644
--- a/apps/app/src/client/components/Sidebar/PageCreateButton/Hexagon.tsx
+++ b/apps/app/src/client/components/Sidebar/PageCreateButton/Hexagon.tsx
@@ -7,17 +7,16 @@ type Props = {
 export const Hexagon = React.memo(
   (props: Props): JSX.Element => (
     <svg
+      width="41"
+      height="36"
+      viewBox="0 0 41 36"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 27.691 23.999"
-      height="36px"
       className={props.className}
     >
       <title>Create</title>
       <g className="background" transform="translate(0 0)">
-        <path
-          d="M20.768,0l6.923,12L20.768,24H6.923L0,12,6.923,0Z"
-          transform="translate(0)"
-        ></path>
+        <path d="M28.5717 0C29.9943 0 31.3099 0.755645 32.0268 1.98452L40.1934 15.9845C40.92 17.23 40.92 18.77 40.1934 20.0155L32.0268 34.0155C31.3099 35.2444 29.9943 36 28.5717 36H12.1666C10.744 36 9.42835 35.2444 8.71151 34.0155L0.544839 20.0155C-0.181674 18.77 -0.181673 17.23 0.54484 15.9845L8.71151 1.98451C9.42835 0.755643 10.744 0 12.1666 0H28.5717Z" />
       </g>
     </svg>
   ),
diff --git a/growi-cloud-next b/growi-cloud-next
new file mode 160000
index 00000000000..1ea7e997019
--- /dev/null
+++ b/growi-cloud-next
@@ -0,0 +1 @@
+Subproject commit 1ea7e9970191f0d13b712fa766167821eb80a6fb