diff --git a/public/index.html b/public/index.html
index 84fb892..8c4dbea 100644
--- a/public/index.html
+++ b/public/index.html
@@ -50,6 +50,9 @@
     <script src="profil.js"></script>
     <script src="msgCard.js"></script>
     <script src="messageData.js"></script>
+	<script src="profilCard.js"></script>
+	<script src="profilData.js"></script>
+
 
 
 	<title>OMApp</title>
diff --git a/public/style/style.css b/public/style/style.css
index 55e714d..4ffc299 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -75,6 +75,48 @@
   font-size: 50px;
   margin: 10px;
 }
+.profil-text {
+  margin-top: 70px;
+  margin-bottom: 10px;
+  text-align: center;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.profil-card {
+  margin: 10px;
+  margin-top: -80px;
+  position: relative;
+  z-index: 1;
+}
+.profil-img {
+  background-color: #0046a0;
+  border-style: solid;
+  border-color: #0046a0;
+  border-width: thick;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  z-index: 2;
+}
+.edit-item {
+  color: #0046a0;
+  margin-top: 10px;
+  margin-right: 10px;
+}
+.edit-item i {
+  float: right;
+  font-size: 30px;
+}
+.tab {
+  font-size: 16px;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 10px;
+}
 .form-group.is-focused .form-control .custom-file-control,
 .form-control,
 .is-focused .custom-file-control,
diff --git a/public/style/style.less b/public/style/style.less
index 21679ab..70380ce 100644
--- a/public/style/style.less
+++ b/public/style/style.less
@@ -90,6 +90,50 @@
 	}
 }
 
+// profil
+.profil-text {
+    margin-top: 70px;
+    margin-bottom: 10px;
+    text-align: center;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+.profil-card {
+    margin: 10px;
+    margin-top: -80px;
+    position: relative;
+    z-index:1;
+}
+.profil-img {
+    background-color: @color;
+    border-style: solid;
+    border-color: @color;
+    border-width: thick;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    position: relative;
+    z-index:2;
+    }
+.edit-item {
+    color: @color;
+    margin-top: 10px;
+    margin-right: 10px;
+    i {
+        float: right;
+        font-size: 30px;
+    }
+}
+.tab {
+    font-size: 16px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 10px;
+}
+
 
 //bmd changes