diff --git a/public/img/profil_icon2.PNG b/public/img/profil_icon2.PNG
new file mode 100644
index 0000000..b2f0b95
Binary files /dev/null and b/public/img/profil_icon2.PNG differ
diff --git a/public/profil.js b/public/profil.js
index e69de29..0fcf8ff 100644
--- a/public/profil.js
+++ b/public/profil.js
@@ -0,0 +1,15 @@
+const ProfilRouter = {
+    template: `
+<div>
+    <ProfilCard
+        v-for="(profil, index) in profilcard"
+        :key="profil.id"
+        :profil="profil"
+    ></ProfilCard>
+</div>`,
+    data: function () {
+        return { profilcard: _profilcard };
+    },
+    methods: {
+    },
+};
diff --git a/public/profilCard.js b/public/profilCard.js
new file mode 100644
index 0000000..85515c8
--- /dev/null
+++ b/public/profilCard.js
@@ -0,0 +1,19 @@
+Vue.component('ProfilCard', {
+    template: `<div>
+                <img class="profil-img rounded-circle" src="img/profil_icon2.png" width=160px height=160px>
+                <div class="profil-card card">
+                    <div class="edit-item"><i class="material-icons">edit</i></div>
+                    <div class="profil-text">
+                        <h5><b>{{ profil.user }}</b></h5><br>
+                        <h6>{{ profil.major }}<br><br>
+                        {{ profil.semester }}</h6>
+                    </div>
+                    <hr>
+                    <div class="tab">
+                        <button class="tablinks"><b>Abonniert<br>{{ profil.abos }}</b></button>
+                        <button class="tablinks"><b>Gespeichert<br>{{ profil.saved }}</b></button>
+                    </div>
+                </div>
+                </div>`,
+    props: ['profil']
+});
diff --git a/public/profilData.js b/public/profilData.js
new file mode 100644
index 0000000..e460572
--- /dev/null
+++ b/public/profilData.js
@@ -0,0 +1,10 @@
+_profilcard = [
+    {
+        id: 1,
+        user: 'Benutzername',
+        major: 'Studiengang',
+        semester: 'Semester',
+        abos: '7',
+        saved: '3',
+    },
+];