diff --git a/packages/client/src/pages/authorized/admin/Invitations/Invitations.styled.ts b/packages/client/src/pages/authorized/admin/Invitations/Invitations.styled.ts
index 4813bd06..daf175df 100644
--- a/packages/client/src/pages/authorized/admin/Invitations/Invitations.styled.ts
+++ b/packages/client/src/pages/authorized/admin/Invitations/Invitations.styled.ts
@@ -31,3 +31,13 @@ export const SendInvitationButton = styled(Button)`
     width: 26px;
   }
 `;
+
+export const DialogContent = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const StyledSendButton = styled(Button)`
+  margin-top: 40px;
+`;
diff --git a/packages/client/src/pages/authorized/admin/Invitations/index.tsx b/packages/client/src/pages/authorized/admin/Invitations/index.tsx
index 79f4bcdf..fa7b8629 100644
--- a/packages/client/src/pages/authorized/admin/Invitations/index.tsx
+++ b/packages/client/src/pages/authorized/admin/Invitations/index.tsx
@@ -1,22 +1,54 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useMutation } from 'react-query';
 
 import {
   CardList,
+  Checkbox,
   DateField,
   DetailedList,
+  Dialog,
   InvitationStatusField,
   TextField,
+  TextInput,
 } from '../../../../elements';
-import { useMediaQuery } from '../../../../hooks';
+import { Role } from '../../../../enums/role.enum';
+import { useAxios, useMediaQuery, useSnackbar } from '../../../../hooks';
 import { SendEmailIcon } from '../../../../icons';
 import { ThemeType } from '../../../../theme/Theme';
-import { ListContainer, SendInvitationButton, Wrapper } from './Invitations.styled';
+import {
+  DialogContent,
+  ListContainer,
+  SendInvitationButton,
+  StyledSendButton,
+  Wrapper,
+} from './Invitations.styled';
 import { getRowStyle } from './Invitations.utils';
 
 const Invitations = () => {
   const isMobile = useMediaQuery(({ breakpoints, down }) => down(breakpoints.lg));
   const { t } = useTranslation();
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const axios = useAxios();
+  const showSnackbar = useSnackbar();
+  const closeCreateDialog = () => {
+    setIsCreateDialogOpen(false);
+  };
+
+  const openCreateDialog = () => {
+    setIsCreateDialogOpen(true);
+  };
+
+  const sendInvitationMutation = useMutation(async () => {
+    try {
+      await axios.post(`/invitations`, { email: 'xyz@gmail.com', roles: [Role.Admin] });
+    } catch (error) {
+      showSnackbar({ message: 'Send invitation err TODO: trans', severity: 'error' });
+      throw error;
+    } finally {
+      closeCreateDialog();
+    }
+  });
 
   return (
     <Wrapper>
@@ -27,7 +59,7 @@ const Invitations = () => {
         </CardList>
       ) : (
         <ListContainer>
-          <SendInvitationButton colorVariant={ThemeType.dark}>
+          <SendInvitationButton colorVariant={ThemeType.dark} onClick={openCreateDialog}>
             {t('routes.invitations.sendInvitation')}
             <SendEmailIcon />
           </SendInvitationButton>
@@ -39,6 +71,20 @@ const Invitations = () => {
           </DetailedList>
         </ListContainer>
       )}
+      <Dialog
+        isOpen={isCreateDialogOpen}
+        close={closeCreateDialog}
+        title="Invite New Member"
+        description="Invite new members by email to join your Smart Gate. After sent, you will still be able to cancel invitation."
+      >
+        <DialogContent>
+          <TextInput autoFocus name="email" required />
+          <Checkbox name="isAdmin" label="Add as admin" />
+          <StyledSendButton onClick={() => sendInvitationMutation.mutate()} withArrow>
+            Send invite
+          </StyledSendButton>
+        </DialogContent>
+      </Dialog>
     </Wrapper>
   );
 };