diff --git a/src/webui/components/Login/index.js b/src/webui/components/Login/index.js
index 552cd79f8..00e16f1bc 100644
--- a/src/webui/components/Login/index.js
+++ b/src/webui/components/Login/index.js
@@ -137,6 +137,56 @@ export default class LoginModal extends Component {
     );
   }
 
+  renderNameField = () => {
+    const { form: { username } } = this.state;
+    return (
+      <FormControl
+        error={!username.value && !username.pristine}
+        fullWidth={true}
+        required={username.required}
+      >
+        <InputLabel htmlFor={"username"}>Username</InputLabel>
+        <Input
+          id={"login--form-username"}
+          onChange={this.setUsername}
+          placeholder={"Your username"}
+          value={username.value}
+        />
+        {!username.value && !username.pristine && (
+          <FormHelperText id={"username-error"}>
+            {username.helperText}
+          </FormHelperText>
+        )}
+      </FormControl>
+    );
+  }
+
+  renderPasswordField = () => {
+    const { form: { password } } = this.state;
+    return (
+      <FormControl
+        error={!password.value && !password.pristine}
+        fullWidth={true}
+        required={password.required}
+        style={{ marginTop: '8px' }}
+      >
+        <InputLabel htmlFor={"password"}>Password</InputLabel>
+        <Input
+          id={"login--form-password"}
+          onChange={this.setPassword}
+          placeholder={"Your strong password"}
+          type={"password"}
+          value={password.value}
+        />
+        {!password.value && !password.pristine && (
+          <FormHelperText id={"password-error"}>
+            {password.helperText}
+          </FormHelperText>
+        )}
+      </FormControl>
+    );
+  }
+
   render() {
     const { visibility, onCancel, error } = this.props;
     const { form: { username, password } } = this.state;
@@ -152,44 +202,8 @@ export default class LoginModal extends Component {
           <DialogTitle>Login</DialogTitle>
           <DialogContent>
             {this.renderLoginError(error)}
-            <FormControl
-              error={!username.value && !username.pristine}
-              fullWidth={true}
-              required={username.required}
-            >
-              <InputLabel htmlFor={"username"}>Username</InputLabel>
-              <Input
-                id={"login--form-username"}
-                onChange={this.setUsername}
-                placeholder={"Your username"}
-                value={username.value}
-              />
-              {!username.value && !username.pristine && (
-                <FormHelperText id={"username-error"}>
-                  {username.helperText}
-                </FormHelperText>
-              )}
-            </FormControl>
-            <FormControl
-              error={!password.value && !password.pristine}
-              fullWidth={true}
-              required={password.required}
-              style={{ marginTop: '8px' }}
-            >
-              <InputLabel htmlFor={"password"}>Password</InputLabel>
-              <Input
-                id={"login--form-password"}
-                onChange={this.setPassword}
-                placeholder={"Your strong password"}
-                type={"password"}
-                value={password.value}
-              />
-              {!password.value && !password.pristine && (
-                <FormHelperText id={"password-error"}>
-                  {password.helperText}
-                </FormHelperText>
-              )}
-            </FormControl>
+            {this.renderNameField()}
+            {this.renderPasswordField()}
           </DialogContent>
           <DialogActions className={"dialog-footer"}>
             <Button
diff --git a/src/webui/components/Package/index.js b/src/webui/components/Package/index.js
index 8b795cbca..31087a7e1 100644
--- a/src/webui/components/Package/index.js
+++ b/src/webui/components/Package/index.js
@@ -37,52 +37,69 @@ const getInitialsName = (name: string) =>
     .reduce((accumulator, currentValue) => accumulator.charAt(0) + currentValue.charAt(0), '')
     .toUpperCase();
 
-const Package = ({ name: label, version, time, author: { name, avatar }, description, license, keywords = [] }: IProps): Element<Wrapper> => (
-  <Wrapper className={'package'} to={`detail/${label}`}>
-    <Header>
-      <MainInfo>
-        <Name>{label}</Name>
-        <Version>{`v${version}`}</Version>
-      </MainInfo>
-      <Overview>
-        {license && (
-          <OverviewItem>
-            <Icon modifiers={spacing('margin', '4px', '5px', '0px', '0px')} name={'license'} pointer={true} />
-            {license}
-          </OverviewItem>
-        )}
-        <OverviewItem>
-          <Icon name={'time'} pointer={true} />
-          <Published modifiers={spacing('margin', '0px', '5px', '0px', '0px')}>{`Published on ${formatDate(time)} •`}</Published>
-          {`${formatDateDistance(time)} ago`}
-        </OverviewItem>
-      </Overview>
-    </Header>
-    <Content>
-      <Field>
-        <Author>
-          <Avatar alt={name} src={avatar}>
-            {!avatar && getInitialsName(name)}
-          </Avatar>
-          <Details>
-            <Text text={name} weight={'bold'} />
-          </Details>
-        </Author>
-      </Field>
-      {description && (
-        <Field>
-          <Description>{description}</Description>
-        </Field>
-      )}
-    </Content>
-    {keywords.length > 0 && (
-      <Footer>
-        {keywords.sort().map((keyword, index) => (
-          <Tag key={index}>{keyword}</Tag>
-        ))}
-      </Footer>
-    )}
-  </Wrapper>
-);
+const Package = ({ name: label, version, time, author: { name, avatar }, description, license, keywords = [] }: IProps): Element<Wrapper> => {
+  const renderMainInfo = () => (
+    <MainInfo>
+      <Name>{label}</Name>
+      <Version>{`v${version}`}</Version>
+    </MainInfo>
+  );
 
+  const renderAuthorInfo = () => (
+    <Author>
+      <Avatar alt={name} src={avatar}>
+        {!avatar && getInitialsName(name)}
+      </Avatar>
+      <Details>
+        <Text text={name} weight={'bold'} />
+      </Details>
+    </Author>
+  );
+
+  const renderLicenseInfo = () =>
+    license && (
+      <OverviewItem>
+        <Icon modifiers={spacing('margin', '4px', '5px', '0px', '0px')} name={'license'} pointer={true} />
+        {license}
+      </OverviewItem>
+    );
+
+  const renderPublishedInfo = () => (
+    <OverviewItem>
+      <Icon name={'time'} pointer={true} />
+      <Published modifiers={spacing('margin', '0px', '5px', '0px', '0px')}>{`Published on ${formatDate(time)} •`}</Published>
+      {`${formatDateDistance(time)} ago`}
+    </OverviewItem>
+  );
+
+  const renderDescription = () =>
+    description && (
+      <Field>
+        <Description>{description}</Description>
+      </Field>
+    );
+
+  return (
+    <Wrapper className={'package'} to={`detail/${label}`}>
+      <Header>
+        {renderMainInfo()}
+        <Overview>
+          {renderLicenseInfo()}
+          {renderPublishedInfo()}
+        </Overview>
+      </Header>
+      <Content>
+        <Field>{renderAuthorInfo()}</Field>
+        {renderDescription()}
+      </Content>
+      {keywords.length > 0 && (
+        <Footer>
+          {keywords.sort().map((keyword, index) => (
+            <Tag key={index}>{keyword}</Tag>
+          ))}
+        </Footer>
+      )}
+    </Wrapper>
+  );
+};
 export default Package;