diff --git a/src/App/App.css b/src/App/App.css
index 191df1c824f33524c72de20b8938c7d6ddaf8fea..d42223a49f156020fdbc8677bedec24d80fc950e 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -2534,11 +2534,10 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
   display: flex !important;
 }
 
-#All, #MediAbout {
-  display: block;
+.FirstTab{
+  display: block !important;
 }
-
-.tabtabs, .tabbys, .meditabs, .timelinecardtabs, .timelinepersontabs{
+.tabcontent{
   display: none;
 }
 
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
index 342b917dae223c748cbf60d108b3958db1ade387..27b24528480b3b5537ad75a31edcfe90041d451f 100644
--- a/src/components/Tabs.tsx
+++ b/src/components/Tabs.tsx
@@ -1,10 +1,13 @@
-// If new cla (class) is added it has to be added to css giving it display: none; as default
-// The main tab has to be given display: block; via id css
+// The main tab has to be given display: block; via id css or be given the id "First"
 export function ButtonRowTabs({data, cla}: {data: Array<TabDatensatz>, cla: string}) {
     let rows = []
+    let classy = "tabcontent " + cla; 
     for ( let i = 0;  i < data.length; i++ ){
+      if (i === 1){
+        classy += " First"
+      }
       rows.push(
-        <div id={data[i].cssname} className={cla}>
+        <div id={data[i].cssname} className={classy}>
             {data[i].node}
         </div>
       )
@@ -13,9 +16,13 @@ export function ButtonRowTabs({data, cla}: {data: Array<TabDatensatz>, cla: stri
   }
   export function BFHStyleTabs({data, cla}: {data: Array<NodeDatensatz>, cla: string}) {
     let rows = []
+    let classy = "tabcontent " + cla; 
     for ( let i = 0;  i < data.length; i++ ){
+      if (i === 1){
+        classy += " First"
+      }
       rows.push(
-        <div id={data[i].cssname} className={cla}>
+        <div id={data[i].cssname} className={classy}>
             {data[i].node}
         </div>
       )
diff --git a/src/contents/description.tsx b/src/contents/description.tsx
index d2f86f49dadd1657b0c8248876463c1f2bd06b5c..4249a3831c30345bee9644fb0011f7fdff907682 100644
--- a/src/contents/description.tsx
+++ b/src/contents/description.tsx
@@ -276,7 +276,7 @@ export function Description() {
     {
         node: <div>About</div>, 
         buttonname: "About", 
-        cssname: "MediAbout"
+        cssname: "First"
         
     },
     {   
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index d211a5e0f3ec1efe8f01610a612b5308d9e324f6..1e1a79d71005ae8d23914eab998eed37bae6d626 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -16,7 +16,7 @@ let timelinebuttonrowdata = [
   {
     buttonname: "All", 
     node: <TimeHori tab="" ></TimeHori>, 
-    cssname: "All"
+    cssname: "First"
   },
   { 
     node: <TimeHori tab="Patient" ></TimeHori>,
@@ -25,7 +25,7 @@ let timelinebuttonrowdata = [
   },
   {
     node: <TimeHori tab="Medical Professional" ></TimeHori>,
-    buttonname: "Mediacl Professionals", 
+    buttonname: "Medical Professionals", 
     cssname: "Medical"
   },
   {