diff --git a/.github/workflows/create-pull-request.yml b/.github/workflows/create-pull-request.yml
index dd1809aa..05542303 100644
--- a/.github/workflows/create-pull-request.yml
+++ b/.github/workflows/create-pull-request.yml
@@ -9,7 +9,8 @@ jobs:
       - name: Checkout
         uses: actions/checkout@master
       - name: Fire Notification
-        uses: Lubycon/github-reviewer-noti-action@v2.0.1
+        uses: Lubycon/github-reviewer-noti-action@v3.2.0
         with:
-          github-token: ${{ secrets.LUBYCON_GITHUB_TOKEN }}
-          mattermost-webhook: ${{ secrets.MATTERMOST_WEBHOOK_URL }}
\ No newline at end of file
+          slack-bot-token: ${{ secrets.SLACK_BOT_TOKEN }}
+          slack-channel-id: ${{ secrets.SLACK_CHANNEL_ID }}
+          slack-bot-signing-secret: ${{ secrets.SLACK_SIGNING_SECRET }}
\ No newline at end of file
diff --git a/src/components/Flex/index.tsx b/src/components/Flex/index.tsx
index 1cbbc33a..ca298bc9 100644
--- a/src/components/Flex/index.tsx
+++ b/src/components/Flex/index.tsx
@@ -7,13 +7,24 @@ export interface FlexBaseProps {
   justify?: CSSProperties['justifyContent'];
 }
 
+export const DEFAULT_ELEMENT = 'div' as const;
+
 type Props<T extends ElementType = 'div'> = OverridableProps<T, FlexBaseProps>;
 const Flex = <T extends ElementType = 'div'>(
-  { direction = 'row', align = 'flex-start', justify = 'flex-start', children, ...rest }: Props<T>,
+  {
+    direction = 'row',
+    align = 'flex-start',
+    justify = 'flex-start',
+    children,
+    as,
+    ...rest
+  }: Props<T>,
   ref: Ref<any>
 ) => {
+  const Component = as ?? DEFAULT_ELEMENT;
+
   return (
-    <div
+    <Component
       ref={ref}
       css={{
         display: 'flex',
@@ -24,7 +35,7 @@ const Flex = <T extends ElementType = 'div'>(
       {...rest}
     >
       {children}
-    </div>
+    </Component>
   );
 };
 
diff --git a/src/components/Grid/Column.tsx b/src/components/Grid/Column.tsx
index 2ba3aa83..74559991 100644
--- a/src/components/Grid/Column.tsx
+++ b/src/components/Grid/Column.tsx
@@ -43,8 +43,7 @@ const Column = <T extends React.ElementType = typeof DEFAULT_ELEMENT>(
     []
   );
 
-  const target = as ?? DEFAULT_ELEMENT;
-  const Component = target;
+  const Component = as ?? DEFAULT_ELEMENT;
 
   return (
     <Component
diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx
index aaf62ec6..11c2ef6c 100644
--- a/src/components/Text/index.tsx
+++ b/src/components/Text/index.tsx
@@ -18,8 +18,7 @@ const Text = <T extends ElementType = typeof DEFAULT_ELEMENT>(
   { display, lineHeight, weight, size, color, align, as, children, ...props }: TextProps<T>,
   ref: Ref<any>
 ) => {
-  const target = as ?? DEFAULT_ELEMENT;
-  const Component = target;
+  const Component = as ?? DEFAULT_ELEMENT;
 
   return (
     <Component