diff --git a/src/main/webapp/app/entities/club-family/family-member-create.tsx b/src/main/webapp/app/entities/club-family/family-member-create.tsx
new file mode 100644
index 00000000..575978f5
--- /dev/null
+++ b/src/main/webapp/app/entities/club-family/family-member-create.tsx
@@ -0,0 +1,151 @@
+import React, { ReactNode } from 'react';
+
+import { Link, RouteComponentProps } from 'react-router-dom';
+import { Button, Row, Col, Label } from 'reactstrap';
+import { AvForm, AvGroup, AvInput, AvField } from 'availity-reactstrap-validation';
+import { Translate, translate } from 'react-jhipster';
+import { connect } from 'react-redux';
+import { getUsersWithoutFamily } from 'app/modules/administration/user-management/user-management.reducer';
+import { createEntity, reset } from 'app/entities/user-cc-info/user-cc-info.reducer';
+import { IRootState } from 'app/shared/reducers';
+import { IUser } from 'app/shared/model/user.model';
+import { concatFullName } from 'app/shared/util/string-util';
+
+export interface IFamilyMemberCreateProps extends StateProps, DispatchProps, RouteComponentProps<{ id: string }> {}
+
+class FamilyMemberCreate extends React.Component<IFamilyMemberCreateProps> {
+  constructor(props: IFamilyMemberCreateProps) {
+    super(props);
+  }
+
+  componentWillUpdate(nextProps: IFamilyMemberCreateProps) {
+    if (nextProps.updateSuccess !== this.props.updateSuccess && nextProps.updateSuccess) {
+      this.handleClose();
+    }
+  }
+
+  handleClose = () => {
+    this.props.history.push(`/entity/members/club-family/${this.props.match.params.id}`);
+  };
+
+  componentDidMount() {
+    this.props.reset();
+    this.props.getUsersWithoutFamily();
+  }
+
+  renderNames(users: readonly IUser[]): ReactNode {
+    return users.map((user: IUser) => {
+      if (user) {
+        return (
+          <option key={user.id} value={user.id}>
+            {concatFullName(user.firstName, user.lastName)}
+          </option>
+        );
+      }
+    });
+  }
+
+  saveEntity = (event: any, errors: any, values: any) => {
+    if (errors.length === 0) {
+      if (values.familyRole === 'MEMBER') {
+        values.familyRole = null;
+      }
+
+      const { userEntity } = this.props;
+      const entity = {
+        ...userEntity,
+        ...values,
+      };
+
+      this.props.createEntity(entity);
+    }
+  };
+
+  render() {
+    const { users } = this.props;
+    const { id: familyCode } = this.props.match.params;
+    return (
+      <div className="mx-3">
+        <Row className="justify-content-center">
+          <Col md="8">
+            <h2>
+              <Translate contentKey="clubmanagementApp.clubFamily.member.createLabel">Add Family Member</Translate>
+            </h2>
+          </Col>
+        </Row>
+        <Row className="justify-content-center">
+          <Col md="8">
+            <AvForm model={{}} onSubmit={this.saveEntity}>
+              <AvGroup>
+                <Label for="memberLabel">Name</Label>
+                <AvField id="member-name" type="select" className="form-control" name="userId" required>
+                  <option value="" disabled hidden>
+                    {translate('global.select.selectUser')}
+                  </option>
+                  {this.renderNames(users)}
+                </AvField>
+              </AvGroup>
+              <AvGroup>
+                <Label id="familyLabel" for="club-family">
+                  Family
+                </Label>
+                <AvField id="club-family" type="select" name="clubFamilyCode" value={familyCode} disabled>
+                  <option value="JIN_LONG">{translate('clubmanagementApp.clubFamily.jinlong.name')}</option>
+                  <option value="BI_MU">{translate('clubmanagementApp.clubFamily.bimu.name')}</option>
+                  <option value="QI_CAI">{translate('clubmanagementApp.clubFamily.qicai.name')}</option>
+                  <option value="KONG_QUE">{translate('clubmanagementApp.clubFamily.kongque.name')}</option>
+                  <option value="XIAO_CHOU">{translate('clubmanagementApp.clubFamily.xiaochou.name')}</option>
+                </AvField>
+              </AvGroup>
+              <AvGroup>
+                <Label id="roleLabel" for="club-member-role">
+                  Role
+                </Label>
+                <AvInput id="club-member-role" type="select" name="familyRole" value={'MEMBER'}>
+                  <option value={'MEMBER'}>{translate('clubmanagementApp.ClubFamilyRole.MEMBER')}</option>
+                  <option value="FATHER">{translate('clubmanagementApp.ClubFamilyRole.FATHER')}</option>
+                  <option value="MOTHER">{translate('clubmanagementApp.ClubFamilyRole.MOTHER')}</option>
+                </AvInput>
+              </AvGroup>
+              <div className="general-buttonContainer--flexContainer">
+                <Button
+                  className="general-button--width"
+                  tag={Link}
+                  id="cancel-save"
+                  to={`/entity/members/club-family/${familyCode}`}
+                  replace
+                  color="cancel"
+                >
+                  <Translate contentKey="entity.action.cancel">Cancel</Translate>
+                </Button>
+                &nbsp;
+                <Button className="general-button--width" color="action" id="save-entity" type="submit">
+                  <Translate contentKey="entity.action.add">Add</Translate>
+                </Button>
+              </div>
+            </AvForm>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+// Reducer props
+const mapStateToProps = (storeState: IRootState) => ({
+  users: storeState.userManagement.users,
+  userEntity: storeState.userCCInfo.entity,
+  updateSuccess: storeState.userCCInfo.updateSuccess,
+});
+
+// Reducer Action Creators
+const mapDispatchToProps = {
+  getUsersWithoutFamily,
+  createEntity,
+  reset,
+};
+
+type StateProps = ReturnType<typeof mapStateToProps>;
+type DispatchProps = typeof mapDispatchToProps;
+
+export default connect(mapStateToProps, mapDispatchToProps)(FamilyMemberCreate);
diff --git a/src/main/webapp/app/entities/club-family/index.tsx b/src/main/webapp/app/entities/club-family/index.tsx
index 8cf4aabb..fd0dfada 100644
--- a/src/main/webapp/app/entities/club-family/index.tsx
+++ b/src/main/webapp/app/entities/club-family/index.tsx
@@ -5,11 +5,13 @@ import ErrorBoundaryRoute from 'app/shared/error/error-boundary-route';
 
 import ClubFamily from './club-family';
 import ClubFamilyDetail from './club-family-detail';
+import FamilyMemberCreate from './family-member-create';
 
 const Routes: React.FC<RouteComponentProps> = ({ match }) => (
   <>
     <Switch>
       <ErrorBoundaryRoute exact path={`${match.url}/:id`} component={ClubFamilyDetail} />
+      <ErrorBoundaryRoute exact path={`${match.url}/:id/new`} component={FamilyMemberCreate} />
       <ErrorBoundaryRoute path={match.url} component={ClubFamily} />
     </Switch>
   </>
diff --git a/src/main/webapp/app/entities/user-cc-info/user-cc-info-detail.tsx b/src/main/webapp/app/entities/user-cc-info/user-cc-info-detail.tsx
index 98ad3329..f3b790e0 100644
--- a/src/main/webapp/app/entities/user-cc-info/user-cc-info-detail.tsx
+++ b/src/main/webapp/app/entities/user-cc-info/user-cc-info-detail.tsx
@@ -39,7 +39,7 @@ export class UserCCInfoDetail extends React.Component<IUserCCInfoDetailProps> {
                 <Translate contentKey="clubmanagementApp.userCCInfo.clubFamilyId">Club Family Id</Translate>
               </span>
             </dt>
-            <dd>{userCCInfoEntity.clubFamilyId}</dd>
+            <dd>{userCCInfoEntity.clubFamilyCode}</dd>
             <dt>
               <span id="familyRole">
                 <Translate contentKey="clubmanagementApp.userCCInfo.familyRole">Family Role</Translate>
@@ -79,7 +79,7 @@ export class UserCCInfoDetail extends React.Component<IUserCCInfoDetailProps> {
 }
 
 const mapStateToProps = ({ userCCInfo }: IRootState) => ({
-  userCCInfoEntity: userCCInfo.entity
+  userCCInfoEntity: userCCInfo.entity,
 });
 
 const mapDispatchToProps = { getEntity };
@@ -87,7 +87,4 @@ const mapDispatchToProps = { getEntity };
 type StateProps = ReturnType<typeof mapStateToProps>;
 type DispatchProps = typeof mapDispatchToProps;
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(UserCCInfoDetail);
+export default connect(mapStateToProps, mapDispatchToProps)(UserCCInfoDetail);
diff --git a/src/main/webapp/app/entities/user-cc-info/user-cc-info.reducer.ts b/src/main/webapp/app/entities/user-cc-info/user-cc-info.reducer.ts
index b11dcaf6..46ea2264 100644
--- a/src/main/webapp/app/entities/user-cc-info/user-cc-info.reducer.ts
+++ b/src/main/webapp/app/entities/user-cc-info/user-cc-info.reducer.ts
@@ -120,6 +120,11 @@ export const getEntity: ICrudGetAction<IUserCCInfo> = id => {
   };
 };
 
+export const getUsersWithoutFamily: ICrudGetAllAction<IUserCCInfo> = (page, size, sort) => ({
+  type: ACTION_TYPES.FETCH_USERCCINFO_LIST,
+  payload: axios.get<IUserCCInfo>(`${apiUrl}?clubFamilyCode.specified=false`),
+});
+
 export const createEntity: ICrudPutAction<IUserCCInfo> = entity => async dispatch => {
   const result = await dispatch({
     type: ACTION_TYPES.CREATE_USERCCINFO,
diff --git a/src/main/webapp/app/entities/user-cc-info/user-cc-info.tsx b/src/main/webapp/app/entities/user-cc-info/user-cc-info.tsx
index aa84ee16..e5e0b4c0 100644
--- a/src/main/webapp/app/entities/user-cc-info/user-cc-info.tsx
+++ b/src/main/webapp/app/entities/user-cc-info/user-cc-info.tsx
@@ -66,7 +66,7 @@ export class UserCCInfo extends React.Component<IUserCCInfoProps> {
                       </Button>
                     </td>
                     <td>{userCCInfo.userId}</td>
-                    <td>{userCCInfo.clubFamilyId}</td>
+                    <td>{userCCInfo.clubFamilyCode}</td>
                     <td>
                       <Translate contentKey={`clubmanagementApp.ClubFamilyRole.${userCCInfo.familyRole}`} />
                     </td>
@@ -110,17 +110,14 @@ export class UserCCInfo extends React.Component<IUserCCInfoProps> {
 }
 
 const mapStateToProps = ({ userCCInfo }: IRootState) => ({
-  userCCInfoList: userCCInfo.entities
+  userCCInfoList: userCCInfo.entities,
 });
 
 const mapDispatchToProps = {
-  getEntities
+  getEntities,
 };
 
 type StateProps = ReturnType<typeof mapStateToProps>;
 type DispatchProps = typeof mapDispatchToProps;
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(UserCCInfo);
+export default connect(mapStateToProps, mapDispatchToProps)(UserCCInfo);
diff --git a/src/main/webapp/app/modules/administration/user-management/user-management.reducer.ts b/src/main/webapp/app/modules/administration/user-management/user-management.reducer.ts
index 61fe950e..4dccc37d 100644
--- a/src/main/webapp/app/modules/administration/user-management/user-management.reducer.ts
+++ b/src/main/webapp/app/modules/administration/user-management/user-management.reducer.ts
@@ -118,6 +118,14 @@ export default (state: IUserManagementState = initialState, action: AnyAction):
 
 const apiUrl = 'api/users';
 // Actions
+
+export const getUsersWithoutFamily: ICrudGetAllAction<IUser> = () => {
+  const requestUrl = `${apiUrl}/family?hasFamily=false`;
+  return {
+    type: ACTION_TYPES.FETCH_USERS,
+    payload: axios.get<IUser>(requestUrl),
+  };
+};
 export const getUsers: ICrudGetAllAction<IUser> = (page, size, sort) => {
   const requestUrl = `${apiUrl}${sort ? `?page=${page}&size=${size}&sort=${sort}` : ''}`;
   return {
diff --git a/src/main/webapp/app/shared/model/user-cc-info.model.ts b/src/main/webapp/app/shared/model/user-cc-info.model.ts
index e1c9e3c1..277a8e7a 100644
--- a/src/main/webapp/app/shared/model/user-cc-info.model.ts
+++ b/src/main/webapp/app/shared/model/user-cc-info.model.ts
@@ -1,3 +1,5 @@
+import { IUser } from './user.model';
+
 export const enum ClubFamilyRole {
   FATHER = 'FATHER',
   MOTHER = 'MOTHER',
@@ -6,11 +8,13 @@ export const enum ClubFamilyRole {
 export interface IUserCCInfo {
   id?: number;
   userId?: number;
-  clubFamilyId?: number;
+  clubFamilyCode?: number | string;
   familyRole?: ClubFamilyRole;
   yearSession?: string;
-  clubFamilyName?: string;
   fishLevel?: string;
+  clubFamilyName?: string;
+  clubFamilySlogan?: string;
+  user?: IUser;
 }
 
 export const defaultValue: Readonly<IUserCCInfo> = {};
diff --git a/src/main/webapp/app/shared/util/string-util.ts b/src/main/webapp/app/shared/util/string-util.ts
index 8931d755..ca33c38b 100644
--- a/src/main/webapp/app/shared/util/string-util.ts
+++ b/src/main/webapp/app/shared/util/string-util.ts
@@ -1 +1 @@
-export const concatFullName = (firstName: string, lastName: string) => lastName + ' ' + firstName;
+export const concatFullName = (firstName?: string, lastName?: string) => `${firstName ?? ''} ${lastName ?? ''}`;
diff --git a/src/main/webapp/i18n/en/clubFamily.json b/src/main/webapp/i18n/en/clubFamily.json
index e6a718da..d071560f 100644
--- a/src/main/webapp/i18n/en/clubFamily.json
+++ b/src/main/webapp/i18n/en/clubFamily.json
@@ -7,6 +7,12 @@
         "createOrEditLabel": "Create or edit a Club Family",
         "notFound": "No CC Family found"
       },
+      "member": {
+        "title": "CC Family Member",
+        "createLabel": "Add a new CC Family Member",
+        "createOrEditLabel": "Add or edit a CC Family Member",
+        "notFound": "No CC Family Member found"
+      },
       "created": "A new Club Family is created with identifier {{ param }}",
       "updated": "A Club Family is updated with identifier {{ param }}",
       "deleted": "A Club Family is deleted with identifier {{ param }}",
diff --git a/src/main/webapp/i18n/en/clubFamilyRole.json b/src/main/webapp/i18n/en/clubFamilyRole.json
index 36733b0d..ff13574e 100644
--- a/src/main/webapp/i18n/en/clubFamilyRole.json
+++ b/src/main/webapp/i18n/en/clubFamilyRole.json
@@ -1,9 +1,9 @@
 {
   "clubmanagementApp": {
     "ClubFamilyRole": {
-      "null": "",
-      "FATHER": "FATHER",
-      "MOTHER": "MOTHER"
+      "MEMBER": "Member",
+      "FATHER": "Father",
+      "MOTHER": "Mother"
     }
   }
 }
diff --git a/src/main/webapp/i18n/zh-cn/clubFamily.json b/src/main/webapp/i18n/zh-cn/clubFamily.json
index ea0530c7..611514ea 100644
--- a/src/main/webapp/i18n/zh-cn/clubFamily.json
+++ b/src/main/webapp/i18n/zh-cn/clubFamily.json
@@ -3,10 +3,16 @@
     "clubFamily": {
       "home": {
         "title": "CC家族",
-        "createLabel": "创建新 Club Family",
-        "createOrEditLabel": "创建或编辑 Club Family",
+        "createLabel": "创建新CC家族",
+        "createOrEditLabel": "创建或编辑CC家族",
         "notFound": "未发现任何CC家族"
       },
+      "member": {
+        "title": "CC家族成员",
+        "createLabel": "添加新CC家族成员",
+        "createOrEditLabel": "添加或编辑CC家族成员",
+        "notFound": "未发现任何CC家族成员"
+      },
       "created": "Club Family {{ param }} 创建成功",
       "updated": "Club Family {{ param }} 更新成功",
       "deleted": "Club Family {{ param }} 删除成功",
diff --git a/src/main/webapp/i18n/zh-cn/clubFamilyRole.json b/src/main/webapp/i18n/zh-cn/clubFamilyRole.json
index 36733b0d..0c99cb5b 100644
--- a/src/main/webapp/i18n/zh-cn/clubFamilyRole.json
+++ b/src/main/webapp/i18n/zh-cn/clubFamilyRole.json
@@ -1,9 +1,9 @@
 {
   "clubmanagementApp": {
     "ClubFamilyRole": {
-      "null": "",
-      "FATHER": "FATHER",
-      "MOTHER": "MOTHER"
+      "MEMBER": "成员",
+      "FATHER": "鱼爸",
+      "MOTHER": "鱼妈"
     }
   }
 }