diff --git a/public/css/components/Profil.css b/public/css/components/Profil.css
index 66b52439c..2ae004c9f 100644
--- a/public/css/components/Profil.css
+++ b/public/css/components/Profil.css
@@ -20,6 +20,10 @@
 
 }
 
+.tabulator-col{
+  justify-content:center !important;
+}
+
 .tabulator-responsive-collapse{
   padding:0 !important;
 }
diff --git a/public/js/components/Cis/Profil/MitarbeiterProfil.js b/public/js/components/Cis/Profil/MitarbeiterProfil.js
index 27b6bb9b1..0db26f157 100644
--- a/public/js/components/Cis/Profil/MitarbeiterProfil.js
+++ b/public/js/components/Cis/Profil/MitarbeiterProfil.js
@@ -1,7 +1,10 @@
 import fhcapifactory from "../../../apps/api/fhcapifactory.js";
 import { CoreFilterCmpt } from "../../../components/filter/Filter.js";
 
-
+let customEvents = [{event: "headerClick", handler:function(e,column){
+  console.log(e);
+  console.log(column);
+}}]
 
 
 export default {
@@ -11,9 +14,9 @@ export default {
   data() {
     return {
       
-
+      showCollapsedColumn: true,
       funktionen_table_options: {
-        height:400,
+        height:300,
         layout:"fitColumns",
         responsiveLayout:"collapse",
         responsiveLayoutCollapseUseFormatters:false,
@@ -29,14 +32,15 @@ export default {
         ],
         columns: [
          //? option when wanting to hide the collapsed list
-         /*   
+            
          {
-            title: "",
-            field: "",
+            title: "<i id='collapseIcon'  class='fa-solid fa-angle-down'></i>",
+            field: "collapse",
             headerSort: false,
+            headerFilter:false,
             formatter:"responsiveCollapse",
             maxWidth:20,
-          }, */
+          }, 
           { title: "Bezeichnung", field: "Bezeichnung", headerFilter: true,minWidth:200, },
           {
             title: "Organisationseinheit",
@@ -115,7 +119,8 @@ export default {
 
       return {
         Allgemein: {
-         
+          
+          View:"MitarbeiterIn",
           Username: this.data.username,
           Anrede: this.data.anrede,
           Titel: this.data.titel,
@@ -159,10 +164,48 @@ export default {
 
     this.$refs.funktionenTable.tabulator.on('tableBuilt', () => {
     
-        this.$refs.funktionenTable.tabulator.setData(this.data.funktionen);
+      this.$refs.funktionenTable.tabulator.setData(this.data.funktionen);
+        
        
     }) 
  
+
+
+    this.$refs.funktionenTable.tabulator.on("headerClick", function(e, column){
+      this.showCollapsedColumn = !this.showCollapsedColumn;
+      
+      if(column._column.field == "collapse"){
+        //* changes the icon that shows or hides all the collapsed columns
+        if(this.showCollapsedColumn){
+          document.getElementById("collapseIcon").classList.replace("fa-angle-up","fa-angle-down");
+        }else{
+          document.getElementById("collapseIcon").classList.replace("fa-angle-down","fa-angle-up");
+        }
+        
+        //* changes the icon for every collapsed column to open or closed
+        [...document.getElementsByClassName("tabulator-responsive-collapse-toggle")].forEach(ele => {
+            if(this.showCollapsedColumn){
+              ele.classList.replace("close","open");
+              
+            }else{
+              ele.classList.replace("open","close");
+            }
+        });
+
+        //* hides or shows the collapsed columns
+        [...document.getElementsByClassName("tabulator-responsive-collapse")].forEach(ele => {
+          if(this.showCollapsedColumn){
+            ele.style.display=""
+            
+          }else{
+            ele.style.display="none"
+          }
+          
+        });
+       
+      }
+      
+  });
   },
 
 
@@ -177,10 +220,10 @@ export default {
           <!-- HIDDEN QUICK LINKS -->
               <div  class="d-md-none col-12 ">
              
-              <div style="border:4px solid;border-color:#EEEEEE;" class="row py-2">
+              <div style=":4px solid;-color:#EEEEEE;" class="row py-2">
               <div class="col">
                 <p class="m-0">
-                  <a class="border w-100 btn " data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
+                  <a class=" w-100 btn " data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                    <u> Quick links</u>
                   </a>
                  
@@ -207,7 +250,7 @@ export default {
                 <!-- ROW WITH PROFIL IMAGE AND INFORMATION -->
                 <div class="row ">
                   <!-- COLUMN WITH PROFIL IMAGE -->
-                    <div class=" col-md-2 col-sm-12" style="border:4px solid;border-color:lightgreen;  ">
+                    <div class=" col-md-2 col-sm-12" style=":4px solid;-color:lightgreen;  ">
 
 
                     <!-- START OF THE FIRST ROW WITH THE PROFIL IMAGE -->
@@ -254,7 +297,7 @@ export default {
 
 
                     <!-- COLUMN WITH THE PROFIL INFORMATION --> 
-                    <div class="col-md-10 col-sm-12" style="overflow-wrap:break-word; border:4px solid;border-color:lightcoral;">
+                    <div class="col-md-10 col-sm-12" style="overflow-wrap:break-word; :4px solid;-color:lightcoral;">
               
 
                     <!-- INFORMATION CONTENT START -->
@@ -264,20 +307,20 @@ export default {
 
 
                       <!-- FIRST COLUMN WITH PROFIL INFORMATION -->
-                      <div style="border:4px solid;border-color:red" class="col-lg-12 col-xl-6">
+                      <div style=":4px solid;-color:red" class="col-lg-12 col-xl-6">
                         
                       
                       
                         <dl class="  mb-0"  >
 
-                            <!-- MITARBEITER TITEL -->
-                            <div class="row mb-2">
-                                <dt class="col-12 " ><b>MitarbeiterIn</b></dt>
-                            </div>
+                        
 
-                            <div v-for="(wert,bez) in personData.Allgemein" class="row">
-                                <dt class="col-lg-4  col-md-6  " >{{bez}}</dt>
-                                <dd class=" col-lg-8  col-md-6 ">{{wert?wert:"-"}}</dd>
+                            <div v-for="(wert,bez) in personData.Allgemein" class="row justify-content-center">
+                              <dt class="col-xl-10 col-12 " v-if="bez=='View'" ><b>{{wert}}</b></dt>
+                              <template v-else>
+                                <dt class="col-xl-4 col-lg-6 col-md-6 col-6  " >{{bez}}</dt>
+                                <dd class="  col-6 ">{{wert?wert:"-"}}</dd>
+                              </template>
                             </div>
                             
                         
@@ -291,7 +334,7 @@ export default {
 
 
                       <!-- START OF THE SECOND PROFIL INFORMATION COLUMN -->
-                      <div style=" border:4px solid;border-color:orange" class="col-xl-6 col-lg-12">
+                      <div style=" :4px solid;-color:orange" class="col-xl-6 col-lg-12">
 
 
 
@@ -368,7 +411,7 @@ export default {
 
                 <!-- LITTLE EXTRA ROW WITH INFORMATION REFRESHING LINK -->
                 <div class="row">
-                  <div style="border:4px solid;border-color:lightpink" class="col">
+                  <div class="mt-5" style=":4px solid;-color:lightpink" class="col">
                     <p>Sollten Ihre Daten nicht mehr aktuell sein, klicken Sie bitte <a :href="refreshMailTo">hier</a></p>
                   </div>
                 </div>
@@ -381,12 +424,12 @@ export default {
                 <div class="row">
 
                 <!-- FIRST TABLE -->
-                  <div class="col-12" style="border: 4px solid; border-color:lightskyblue">
-                    <core-filter-cmpt title="Funktionen"  ref="funktionenTable" :tabulator-options="funktionen_table_options" :tableOnly />
+                  <div class="col-12" style=": 4px solid; -color:lightskyblue">
+                    <core-filter-cmpt title="Funktionen"  ref="funktionenTable" :tabulator-options="funktionen_table_options" :tabulator-events="customEvents" :tableOnly />
                   </div>
 
                 <!-- SECOND TABLE -->
-                  <div class="col-12" style="border:4px solid;border-color:orange">
+                  <div class="col-12" style=":4px solid;-color:orange">
                     <core-filter-cmpt title="Entlehnte Betriebsmittel"  ref="betriebsmittelTable" :tabulator-options="betriebsmittel_table_options" :tableOnly />
                   </div>
 
@@ -414,7 +457,7 @@ export default {
 
               <!-- START OF THE FIRDT ROW IN THE SIDE PANEL -->
               <!-- THESE QUCK LINKS ARE ONLY VISIBLE UNTIL VIEWPORT MD -->
-                <div style="border:4px solid;border-color:#EEEEEE;" class="row d-none d-md-block">
+                <div style=":4px solid;-color:#EEEEEE;" class="row d-none d-md-block">
                   <div class="col">
                     <div  class="row py-4">
                         <a style="text-decoration:none" class="my-1" href="#">Zeitwuensche</a>
@@ -426,7 +469,7 @@ export default {
 
 
                 <!-- START OF THE SECOND ROW IN THE SIDE PANEL -->
-                <div style="border:4px solid;border-color: darkgray"  class="row">
+                <div style=":4px solid;-color: darkgray"  class="row">
                 
                   <div class="col">
                 
diff --git a/public/js/components/Cis/Profil/MitarbeiterViewProfil.js b/public/js/components/Cis/Profil/MitarbeiterViewProfil.js
index 9e04c2c34..370a77a40 100644
--- a/public/js/components/Cis/Profil/MitarbeiterViewProfil.js
+++ b/public/js/components/Cis/Profil/MitarbeiterViewProfil.js
@@ -85,6 +85,7 @@ export default {
 
       return {
         Allgemein: {
+          View:"MitarbeiterIn",
           Username: this.data.username,
           Anrede: this.data.anrede,
           Titel: this.data.titel,
@@ -205,14 +206,15 @@ export default {
 
                         <dl class="  mb-0"  >
 
-                        <!-- MITARBEITER TITEL -->
-                          <div class="row mb-2">
-                              <dt class="col-12 " ><b>MitarbeiterIn</b></dt>
-                          </div>
+                        
 
-                          <div v-for="(wert,bez) in personData.Allgemein" class="row">
-                              <dt class="col-lg-4 col-6  " >{{bez}}</dt>
-                              <dd class=" col-lg-8 col-6 ">{{wert?wert:"-"}}</dd>
+                          <div v-for="(wert,bez) in personData.Allgemein" class="row justify-content-center">
+                          <!-- MITARBEITER TITEL -->
+                            <dt class="col-xl-10 col-12 " v-if="bez=='View'" ><b>{{wert}}</b></dt>
+                            <template v-else>
+                              <dt class="col-xl-4 col-lg-6 col-md-6 col-6  " >{{bez}}</dt>
+                              <dd class="  col-6 ">{{wert?wert:"-"}}</dd>
+                            </template>
                           </div>
                         
                     
diff --git a/public/js/components/Cis/Profil/StudentProfil.js b/public/js/components/Cis/Profil/StudentProfil.js
index 147ab5d34..0eaf820d4 100644
--- a/public/js/components/Cis/Profil/StudentProfil.js
+++ b/public/js/components/Cis/Profil/StudentProfil.js
@@ -73,7 +73,7 @@ export default {
 
       return {
         Allgemein: {
-          
+          View:"StudentIn",
           Username: this.data.username,
           Matrikelnummer: this.data.matrikelnummer,
           Anrede: this.data.anrede,
@@ -226,14 +226,16 @@ export default {
 
                         <dl class="  mb-0"  >
 
-                          <!-- STUDENTEN TITEL -->
-                          <div class="row mb-2">
-                              <dt class="col-12 " ><b>StudentIn</b></dt>
-                          </div>
+                       
 
-                          <div v-for="(wert,bez) in personData.Allgemein" class="row">
-                              <dt class="col-lg-4 col-6  " >{{bez}}</dt>
-                              <dd class=" col-lg-8 col-6 ">{{wert?wert:"-"}}</dd>
+                          <div v-for="(wert,bez) in personData.Allgemein" class="justify-content-center row">
+                             
+
+                              <dt class="col-xl-10 col-12 " v-if="bez=='View'" ><b>{{wert}}</b></dt>
+                              <template v-else>
+                                <dt class="col-xl-4 col-lg-6 col-md-6 col-6  " >{{bez}}</dt>
+                                <dd class="  col-6 ">{{wert?wert:"-"}}</dd>
+                              </template>
                           </div>
                         
                     
@@ -325,7 +327,7 @@ export default {
 
 
                 <!-- LITTLE EXTRA ROW WITH INFORMATION REFRESHING LINK -->
-                <div class="row">
+                <div class="row mt-4">
                   <div style="border:4px solid;border-color:lightpink" class="col">
                     <p>Sollten Ihre Daten nicht mehr aktuell sein, klicken Sie bitte <a :href="refreshMailTo">hier</a></p>
                   </div>
diff --git a/public/js/components/Cis/Profil/StudentViewProfil.js b/public/js/components/Cis/Profil/StudentViewProfil.js
index 216ddcbfd..2834fdbcd 100644
--- a/public/js/components/Cis/Profil/StudentViewProfil.js
+++ b/public/js/components/Cis/Profil/StudentViewProfil.js
@@ -39,6 +39,7 @@ export default {
 
       return {
         Allgemein: {
+          View:"StudentIn",
           Username: this.data.username,
           Matrikelnummer: this.data.matrikelnummer,
           Anrede: this.data.anrede,
@@ -161,14 +162,16 @@ export default {
 
                         <dl class="  mb-0"  >
 
-                          <!-- STUDENTEN TITEL -->
-                          <div class="row mb-2">
-                              <dt class="col-12 " ><b>StudentIn</b></dt>
-                          </div>
+                          
+                       
 
-                          <div v-for="(wert,bez) in personData.Allgemein" class="row">
-                              <dt class="col-lg-4 col-6  " >{{bez}}</dt>
-                              <dd class=" col-lg-8 col-6 ">{{wert?wert:"-"}}</dd>
+                          <div v-for="(wert,bez) in personData.Allgemein" class="row justify-content-center">
+                          <!-- STUDENTEN TITEL -->
+                            <dt class="col-xl-10 col-12 " v-if="bez=='View'" ><b>{{wert}}</b></dt>
+                            <template v-else>
+                              <dt class="col-xl-4 col-lg-6 col-md-6 col-6  " >{{bez}}</dt>
+                              <dd class="  col-6 ">{{wert?wert:"-"}}</dd>
+                            </template>
                           </div>