diff --git a/package-lock.json b/package-lock.json
index afd9ed8..9d82644 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19050,4 +19050,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 6216b2e..c8ef53a 100644
--- a/package.json
+++ b/package.json
@@ -80,4 +80,4 @@
     "prettier": "^1.19.1",
     "pretty-quick": "^2.0.1"
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/User/index.js b/src/components/User/index.js
index 0e10103..a673167 100644
--- a/src/components/User/index.js
+++ b/src/components/User/index.js
@@ -11,6 +11,7 @@ import styles from "../../styles/user.module.css"
 import LearningPaths from "./learningPaths"
 
 import UserContext from "../../context/userContext"
+import UserProgress from './userProgressBar';
 
 export class user extends Component {
   static contextType = UserContext
@@ -33,53 +34,53 @@ export class user extends Component {
             <div className={styles.social}>
               <Row className={styles.social_row}>
                 {data.github !== "" &&
-                data.github !== null &&
-                data.github !== "https://github.com/" ? (
-                  <Col span={6}>
-                    <GithubFilled
-                      onClick={() => window.open(data.github)}
-                      className={styles.icon}
-                    />
-                  </Col>
-                ) : (
-                  ""
-                )}
+                  data.github !== null &&
+                  data.github !== "https://github.com/" ? (
+                    <Col span={6}>
+                      <GithubFilled
+                        onClick={() => window.open(data.github)}
+                        className={styles.icon}
+                      />
+                    </Col>
+                  ) : (
+                    ""
+                  )}
                 {data.linkedin !== "" &&
-                data.linkedin !== null &&
-                data.linkedin !== "https://linkedin.com/" ? (
-                  <Col span={6}>
-                    <LinkedinFilled
-                      onClick={() => window.open(data.linkedin)}
-                      className={styles.icon}
-                    />
-                  </Col>
-                ) : (
-                  ""
-                )}
+                  data.linkedin !== null &&
+                  data.linkedin !== "https://linkedin.com/" ? (
+                    <Col span={6}>
+                      <LinkedinFilled
+                        onClick={() => window.open(data.linkedin)}
+                        className={styles.icon}
+                      />
+                    </Col>
+                  ) : (
+                    ""
+                  )}
                 {data.twitter !== "" &&
-                data.twitter !== null &&
-                data.twitter !== "https://twitter.com/" ? (
-                  <Col span={6}>
-                    <TwitterOutlined
-                      onClick={() => window.open(data.twitter)}
-                      className={styles.icon}
-                    />
-                  </Col>
-                ) : (
-                  ""
-                )}
+                  data.twitter !== null &&
+                  data.twitter !== "https://twitter.com/" ? (
+                    <Col span={6}>
+                      <TwitterOutlined
+                        onClick={() => window.open(data.twitter)}
+                        className={styles.icon}
+                      />
+                    </Col>
+                  ) : (
+                    ""
+                  )}
                 {data.facebook !== "" &&
-                data.facebook !== null &&
-                data.facebook !== "https://facebook.com/" ? (
-                  <Col span={6}>
-                    <FacebookFilled
-                      onClick={() => window.open(data.facebook)}
-                      className={styles.icon}
-                    />
-                  </Col>
-                ) : (
-                  ""
-                )}
+                  data.facebook !== null &&
+                  data.facebook !== "https://facebook.com/" ? (
+                    <Col span={6}>
+                      <FacebookFilled
+                        onClick={() => window.open(data.facebook)}
+                        className={styles.icon}
+                      />
+                    </Col>
+                  ) : (
+                    ""
+                  )}
               </Row>
             </div>
           </div>
@@ -99,9 +100,13 @@ export class user extends Component {
                   })}
                 </div>
               ) : (
-                <div></div>
-              )}
+                  <div></div>
+                )}
             </div>
+            <Row className={styles.userInfo}>
+              <UserProgress data={data} type="desktop"></UserProgress>
+
+            </Row>
             <Row className={styles.userInfo}>
               <Col span={8}>
                 <div className={styles.count}>
@@ -157,6 +162,10 @@ export class user extends Component {
                   <div className={styles.text}>Learning Paths</div>
                 </Col>
               </Row>
+              <Row >
+                <UserProgress data={data} type="mobile"></UserProgress>
+
+              </Row>
             </div>
 
             <div className={styles.bio}>{data.about}</div>
@@ -173,59 +182,59 @@ export class user extends Component {
                 })}
               </div>
             ) : (
-              <div></div>
-            )}
+                <div></div>
+              )}
 
             <div className={styles.social}>
               <Row className={styles.social_row}>
                 {data.github !== "" &&
-                data.github !== null &&
-                data.github !== "https://github.com/" ? (
-                  <Col span={6}>
-                    <GithubFilled
-                      onClick={() => window.open(data.github)}
-                      className={styles.icon}
-                    />
-                  </Col>
-                ) : (
-                  ""
-                )}
+                  data.github !== null &&
+                  data.github !== "https://github.com/" ? (
+                    <Col span={6}>
+                      <GithubFilled
+                        onClick={() => window.open(data.github)}
+                        className={styles.icon}
+                      />
+                    </Col>
+                  ) : (
+                    ""
+                  )}
                 {data.linkedin !== "" &&
-                data.linkedin !== null &&
-                data.linkedin !== "https://linkedin.com/" ? (
-                  <Col span={6}>
-                    <LinkedinFilled
-                      onClick={() => window.open(data.linkedin)}
-                      className={styles.icon}
-                    />
-                  </Col>
-                ) : (
-                  ""
-                )}
+                  data.linkedin !== null &&
+                  data.linkedin !== "https://linkedin.com/" ? (
+                    <Col span={6}>
+                      <LinkedinFilled
+                        onClick={() => window.open(data.linkedin)}
+                        className={styles.icon}
+                      />
+                    </Col>
+                  ) : (
+                    ""
+                  )}
                 {data.twitter !== "" &&
-                data.twitter !== null &&
-                data.twitter !== "https://twitter.com/" ? (
-                  <Col span={6}>
-                    <TwitterOutlined
-                      onClick={() => window.open(data.twitter)}
-                      className={styles.icon}
-                    />
-                  </Col>
-                ) : (
-                  ""
-                )}
+                  data.twitter !== null &&
+                  data.twitter !== "https://twitter.com/" ? (
+                    <Col span={6}>
+                      <TwitterOutlined
+                        onClick={() => window.open(data.twitter)}
+                        className={styles.icon}
+                      />
+                    </Col>
+                  ) : (
+                    ""
+                  )}
                 {data.facebook !== "" &&
-                data.facebook !== null &&
-                data.facebook !== "https://facebook.com/" ? (
-                  <Col span={6}>
-                    <FacebookFilled
-                      onClick={() => window.open(data.facebook)}
-                      className={styles.icon}
-                    />
-                  </Col>
-                ) : (
-                  ""
-                )}
+                  data.facebook !== null &&
+                  data.facebook !== "https://facebook.com/" ? (
+                    <Col span={6}>
+                      <FacebookFilled
+                        onClick={() => window.open(data.facebook)}
+                        className={styles.icon}
+                      />
+                    </Col>
+                  ) : (
+                    ""
+                  )}
               </Row>
             </div>
           </div>
diff --git a/src/components/User/userProgressBar.js b/src/components/User/userProgressBar.js
new file mode 100644
index 0000000..074adae
--- /dev/null
+++ b/src/components/User/userProgressBar.js
@@ -0,0 +1,70 @@
+import React from 'react'
+import { Steps, Progress } from 'antd';
+const { Step } = Steps;
+
+const UserProgress = ({ data, type }) => {
+    console.log(data);
+    const { about, skills, linkedin, github, facebook } = data;
+
+    const progress = [
+        about, skills, github, linkedin, facebook
+    ]
+
+    let progressVal = 0;
+    for (let i = 0; i < 5; i++) {
+        const ele = progress[i];
+        console.log(ele);
+        if (ele !== "" && ele !== "https://github.com/" && ele !== "https://linkedin.com/in/" && ele !== "https://facebook.com/")
+            progressVal++;
+        else
+            break;
+    }
+    return (
+        <div style={type === "mobile" ? { marginTop: "10px" } : {}}>
+            <h3>Profile Strength</h3>
+            {
+                (type === "mobile") ?
+                    (<>
+                        <Steps
+                            direction="vertical"
+                            current={progressVal}>
+
+                            <Step title="About" />
+                            <Step title="Skills" />
+                            <Step title="Github" />
+                            <Step title="LinkedIn" />
+                            <Step title="Facebook" />
+                        </Steps>
+                    </>) :
+                    (
+                        <>
+                            <Steps
+                                current={progressVal}
+                                style={{ width: "80%" }}
+                            >
+
+                                <Step title="About" />
+                                <Step title="Skills" />
+                                <Step title="Github" />
+                                <Step title="LinkedIn" />
+                                <Step title="Facebook" />
+
+                            </Steps>
+                            <Progress
+                                strokeColor={{
+                                    '0%': '#108ee9',
+                                    '100%': '#87d068',
+                                }}
+                                style={{
+                                    width: "80%"
+                                }}
+                                percent={progressVal * 20}
+                            />
+                        </>
+                    )
+            }
+        </div>
+    );
+}
+
+export default UserProgress;
\ No newline at end of file
diff --git a/src/styles/user.module.css b/src/styles/user.module.css
index c6c8b49..accc45c 100644
--- a/src/styles/user.module.css
+++ b/src/styles/user.module.css
@@ -204,6 +204,9 @@
 }
 
 @media only screen and (max-width: 768px) {
+
+  
+
   .mobileProfile {
     display: block;
   }