diff --git a/frontend/src/components/general/Tabs.tsx b/frontend/src/components/general/Tabs.tsx
new file mode 100644
index 00000000..160f7612
--- /dev/null
+++ b/frontend/src/components/general/Tabs.tsx
@@ -0,0 +1,46 @@
+import { ReactNode } from '@tanstack/react-router';
+import React, { useState } from 'react';
+
+interface Tabs {
+  tabs: { label: string; icon: ReactNode; view: ReactNode; }[]
+}
+
+const Tabs: React.FC<Tabs> = ({ tabs }) => {
+  const [showTabIndex, setShowTabIndex] = useState(0);
+
+  return (
+    <>
+      <div role="tablist" className="mb-10 border-b border-b-dark-600 flex items-center w-max gap-x-6">
+        {tabs.map((tab, key) => (
+          <button 
+            onClick={() => setShowTabIndex(key)} 
+            key={key} 
+            id={`tab-${key}`} 
+            role="tab" 
+            aria-selected={showTabIndex === key} 
+            aria-controls={`tabpanel-${key}`}
+            className={`flex items-center gap-x-2 pb-2 group border-b transition-all ease-in-out duration-300 hover:text-dark-800 ${showTabIndex === key ? 'text-dark border-b-dark' : 'text-dark-600 border-b-transparent'}`}
+          >
+            {tab.icon}
+            <span className="hidden group-aria-selected:block lg:block">{tab.label}</span>
+          </button>
+        ))}
+      </div>
+
+      {tabs.map((tab, key) => (
+        <div 
+          key={key} 
+          id={`tabpanel-${key}`} 
+          role="tabpanel" 
+          tabIndex={showTabIndex === key ? 0 : -1} 
+          aria-labelledby={`tab-${key}`}
+          className={`${showTabIndex === key ? 'block': 'hidden'}`}
+        >
+          {tab.view}
+        </div>
+      ))}
+    </>
+  );
+}
+
+export default Tabs;
diff --git a/frontend/src/components/general/cards/EntitiesStatusCard.tsx b/frontend/src/components/general/cards/EntitiesStatusCard.tsx
new file mode 100644
index 00000000..1fc76cbb
--- /dev/null
+++ b/frontend/src/components/general/cards/EntitiesStatusCard.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface EntitiesStatusCard {
+  statusDetails: {label: string, color: string, description: string};
+  label: string;
+}
+
+const EntitiesStatusCard: React.FC<EntitiesStatusCard> = ({ statusDetails, label }) => {
+  return (
+    <div className={`h-full space-y-3 bg-${statusDetails.color}-100 rounded-xl p-6`}>
+      <h2 className="text-sm text-dark-700 font-medium">{label}</h2>
+      <p className={`relative pl-7 font-bold text-xl before:absolute before:w-4 before:h-4 before:rounded-full before:left-0 before:top-2 before:bg-${statusDetails.color}`}>
+        {statusDetails.label}
+      </p>
+      <p className="text-sm">{statusDetails.description}</p>
+    </div>
+  );
+}
+
+export default EntitiesStatusCard;
diff --git a/frontend/src/components/general/cards/GeneralStatusCard.tsx b/frontend/src/components/general/cards/GeneralStatusCard.tsx
index 93e95ca1..aeec3088 100644
--- a/frontend/src/components/general/cards/GeneralStatusCard.tsx
+++ b/frontend/src/components/general/cards/GeneralStatusCard.tsx
@@ -4,13 +4,14 @@ interface GeneralStatusCard {
   overline: string;
   value: string;
   description?: string;
+  isLarge?: boolean;
 }
 
-const GeneralStatusCard: React.FC<GeneralStatusCard> = ({ overline, value, description = '' }) => {
+const GeneralStatusCard: React.FC<GeneralStatusCard> = ({ overline, value, description = '', isLarge = false }) => {
     return (
       <div className="h-full space-y-3 bg-dark-50 rounded-xl p-6">
         <h2 className="text-sm text-dark-700 font-medium">{overline}</h2>
-        <p className="font-bold text-xl">{value}</p>
+        <p className={`font-bold ${isLarge ? 'text-3xl' : 'text-xl'}`}>{value}</p>
         {description && <p className="text-sm">{description}</p>}
       </div>
     );
diff --git a/frontend/src/components/general/cards/TreeCard.tsx b/frontend/src/components/general/cards/TreeCard.tsx
index 8bcbc02f..2f11e418 100644
--- a/frontend/src/components/general/cards/TreeCard.tsx
+++ b/frontend/src/components/general/cards/TreeCard.tsx
@@ -1,70 +1,37 @@
 import { getWateringStatusDetails } from '@/hooks/useDetailsForWateringStatus';
-import { EntitiesTreeClusterWateringStatus } from '@green-ecolution/backend-client';
+import { EntitiesTreeClusterWateringStatus, Tree } from '@green-ecolution/backend-client';
 import { Link } from '@tanstack/react-router';
 import { MoveRight } from 'lucide-react';
 import React from 'react';
-
-interface Tree {
-  id: number;
-  species: string;
-  number: string;
-  hasSensor: boolean;
-  status: EntitiesTreeClusterWateringStatus;
-}
-
-interface TreeCardContentProps {
-  tree: Tree;
-  statusDetails: {
-    color: string;
-    label: string;
-    description: string;
-  };
-}
-
-const TreeCardContent: React.FC<TreeCardContentProps> = ({ tree, statusDetails }) => (
-  <>
-    <p className={`relative font-medium pl-7 before:absolute before:w-4 before:h-4 before:rounded-full before:left-0 before:top-[0.22rem] 
-      before:bg-${statusDetails.color}`}>
-      {statusDetails.label}
-    </p>
-    <h3 className="text-lg font-bold font-lato">{tree.species}</h3>
-    {tree.number && 
-      <p className="text-dark-700">
-        <span className="lg:sr-only">Baumnummer: </span>{tree.number}
-      </p>
-    }
-
-    {tree.hasSensor && 
-      <p className="font-lato font-semibold text-green-dark flex items-center gap-x-2">
-        <span>Zur Detailansicht</span>
-        <MoveRight className="transition-all ease-in-out duration-300 group-hover:translate-x-2"/>
-      </p>
-    }
-  </>
-);
-
 interface TreeCardProps {
   tree: Tree;
 }
 
 const TreeCard: React.FC<TreeCardProps> = ({ tree }) => {
-  const statusDetails = getWateringStatusDetails(tree.status);
+  // TODO: Add real status
+  const statusDetails = getWateringStatusDetails(EntitiesTreeClusterWateringStatus.TreeClusterWateringStatusGood);
   const wrapperClasses = 'bg-white group border border-dark-50 p-6 rounded-xl shadow-cards flex flex-col gap-y-4 lg:grid lg:grid-cols-[1fr,2fr,1fr,1fr] lg:items-center lg:gap-5 lg:py-5 xl:px-10';
 
-  if (!tree.hasSensor) {
-    return (
-      <div className={wrapperClasses}>
-        <TreeCardContent tree={tree} statusDetails={statusDetails} />
-      </div>
-    );
-  }
-
   return (
     <Link 
-      to={`/tree/${tree.id}`} 
+      to={`/trees/${tree.id}`} 
       className={`transition-all ease-in-out duration-300 hover:bg-green-dark-50 hover:border-green-dark ${wrapperClasses}`}
     >
-      <TreeCardContent tree={tree} statusDetails={statusDetails} />
+      <p className={`relative font-medium pl-7 before:absolute before:w-4 before:h-4 before:rounded-full before:left-0 before:top-[0.22rem] 
+        before:bg-${statusDetails.color}`}>
+        {statusDetails.label}
+      </p>
+      <h3 className="text-lg font-bold font-lato">{tree.species}</h3>
+      {tree.number && 
+        <p className="text-dark-700">
+          <span className="lg:sr-only">Baumnummer: </span>{tree.number}
+        </p>
+      }
+
+      <p className="font-lato font-semibold text-green-dark flex items-center gap-x-2">
+        <span>Zur Detailansicht</span>
+        <MoveRight className="transition-all ease-in-out duration-300 group-hover:translate-x-2"/>
+      </p>
     </Link>
   );
 }
diff --git a/frontend/src/components/general/cards/WateringStatusCard.tsx b/frontend/src/components/general/cards/WateringStatusCard.tsx
deleted file mode 100644
index 5cc00881..00000000
--- a/frontend/src/components/general/cards/WateringStatusCard.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { getWateringStatusDetails } from '@/hooks/useDetailsForWateringStatus';
-import { EntitiesTreeClusterWateringStatus } from '@green-ecolution/backend-client';
-import React from 'react';
-
-interface WateringStatusCard {
-  wateringStatus: EntitiesTreeClusterWateringStatus;
-}
-
-const WateringStatusCard: React.FC<WateringStatusCard> = ({ wateringStatus }) => {
-    const statusDetails = getWateringStatusDetails(wateringStatus);
-
-    return (
-      <div className={`h-full space-y-3 bg-${statusDetails.color}-100 rounded-xl p-6`}>
-        <h2 className="text-sm text-dark-700 font-medium">Bewässerungszustand (ø)</h2>
-        <p className={`relative pl-7 font-bold text-xl before:absolute before:w-4 before:h-4 before:rounded-full before:left-0 before:top-2 before:bg-${statusDetails.color}`}>
-          {statusDetails.label}
-        </p>
-        <p className="text-sm">{statusDetails.description}</p>
-      </div>
-    );
-}
-
-export default WateringStatusCard;
diff --git a/frontend/src/components/general/error/LoadingInfo.tsx b/frontend/src/components/general/error/LoadingInfo.tsx
new file mode 100644
index 00000000..52008b3f
--- /dev/null
+++ b/frontend/src/components/general/error/LoadingInfo.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+interface LoadingInfo {
+  label: string;
+}
+
+const LoadingInfo: React.FC<LoadingInfo> = ({ label }) => {
+  return (
+    <div className="mt-20 flex flex-wrap items-center justify-center gap-x-4">
+      <svg aria-hidden="true" className="w-6 h-6 text-green-dark-500 animate-spin fill-green-dark" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
+        <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
+      </svg>
+      <p className="text-lg text-dark-600">{label}</p>
+    </div>
+  );
+}
+
+export default LoadingInfo;
diff --git a/frontend/src/components/general/filter/Dialog.tsx b/frontend/src/components/general/filter/Dialog.tsx
index 0a129bc1..44da2973 100644
--- a/frontend/src/components/general/filter/Dialog.tsx
+++ b/frontend/src/components/general/filter/Dialog.tsx
@@ -117,7 +117,7 @@ const Dialog: React.FC<DialogProps> = ({ initStatusTags, initRegionTags, headlin
             <Option
               key={region.id}
               label={region.name}
-              name={region.id}
+              name={String(region.id)}
               checked={regionTags.includes(region.name)}
               onChange={handleFilterChange('region')}
             />
diff --git a/frontend/src/components/general/buttons/GeneralLink.tsx b/frontend/src/components/general/links/ButtonLink.tsx
similarity index 73%
rename from frontend/src/components/general/buttons/GeneralLink.tsx
rename to frontend/src/components/general/links/ButtonLink.tsx
index ff8632b3..5f7841d2 100644
--- a/frontend/src/components/general/buttons/GeneralLink.tsx
+++ b/frontend/src/components/general/links/ButtonLink.tsx
@@ -2,13 +2,14 @@ import { Link } from '@tanstack/react-router';
 import { MoveRight } from 'lucide-react';
 import React from 'react';
 
-interface GeneralLinkProps {
+interface ButtonLink {
   label: string;
   url: string;
+  asButton?: boolean;
   icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
 }
 
-const GeneralLink: React.FC<GeneralLinkProps> = ({ label, icon: Icon = MoveRight, url }) => (
+const ButtonLink: React.FC<ButtonLink> = ({ label, icon: Icon = MoveRight, url }) => (
   <Link 
     to={url}
     className="bg-green-dark w-fit text-white px-5 py-2 group flex gap-x-3 rounded-xl items-center transition-all ease-in-out duration-300 hover:bg-green-light"
@@ -18,4 +19,4 @@ const GeneralLink: React.FC<GeneralLinkProps> = ({ label, icon: Icon = MoveRight
   </Link>
 );
 
-export default GeneralLink;
+export default ButtonLink;
diff --git a/frontend/src/components/general/links/GeneralLink.tsx b/frontend/src/components/general/links/GeneralLink.tsx
new file mode 100644
index 00000000..026b79d2
--- /dev/null
+++ b/frontend/src/components/general/links/GeneralLink.tsx
@@ -0,0 +1,17 @@
+import { Link } from '@tanstack/react-router';
+import { MoveRight } from 'lucide-react';
+import React from 'react';
+
+interface GeneralLink {
+  label: string;
+  url: string;
+}
+
+const GeneralLink: React.FC<GeneralLink> = ({ label, url }) => (
+  <Link to={url} className="group flex items-center gap-x-2 text-green-dark font-medium text-base mb-4">
+    {label}
+    <MoveRight className="w-4 h-4 transition-all ease-in-out duration-300 group-hover:translate-x-1" />
+  </Link>
+);
+
+export default GeneralLink;
diff --git a/frontend/src/components/icons/Sensor.tsx b/frontend/src/components/icons/Sensor.tsx
new file mode 100644
index 00000000..55fd2339
--- /dev/null
+++ b/frontend/src/components/icons/Sensor.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Sensor: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg 
+    width="24" 
+    height="24" 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
+    <path fillRule="evenodd" clipRule="evenodd" d="M20.27 12C20.27 16.5674 16.5674 20.27 12 20.27C7.4326 20.27 3.73 16.5674 3.73 12C3.73 7.43261 7.4326 3.73 12 3.73C16.5674 3.73 20.27 7.43261 20.27 12ZM21.77 12C21.77 17.3958 17.3958 21.77 12 21.77C6.60417 21.77 2.23 17.3958 2.23 12C2.23 6.60418 6.60417 2.23 12 2.23C17.3958 2.23 21.77 6.60418 21.77 12ZM14.5701 12C14.5701 13.4207 13.419 14.5715 12 14.5715C10.581 14.5715 9.42986 13.4207 9.42986 12C9.42986 10.5793 10.581 9.4285 12 9.4285C13.419 9.4285 14.5701 10.5793 14.5701 12ZM16.0701 12C16.0701 14.2486 14.2479 16.0715 12 16.0715C9.75212 16.0715 7.92986 14.2486 7.92986 12C7.92986 9.75138 9.75212 7.9285 12 7.9285C14.2479 7.9285 16.0701 9.75138 16.0701 12Z" fill="currentColor"/>
+  </svg>
+);
+
+export default Sensor;
diff --git a/frontend/src/components/tree/TreeGeneralData.tsx b/frontend/src/components/tree/TreeGeneralData.tsx
new file mode 100644
index 00000000..23621d95
--- /dev/null
+++ b/frontend/src/components/tree/TreeGeneralData.tsx
@@ -0,0 +1,80 @@
+import { format } from "date-fns";
+
+
+interface TreeGeneralData {
+  tree?: {
+    id: number;
+    species: string;
+    number: number;
+    heightAboveSeaLevel: number;
+    plantingYear: number;
+    age: number;
+    updatedAt: string;
+    latitude: number;
+    longitude: number;
+  }
+}
+
+const TreeGeneralData: React.FC<TreeGeneralData> = ({ tree }) => {
+  const updatedDate = tree?.updatedAt 
+    ? format(new Date(tree?.updatedAt), 'dd.MM.yyyy')
+    : 'Keine Angabe';
+
+  const treeData = [
+    {
+      label: 'Baumart',
+      value: tree?.species ?? 'Keine Angabe',
+    },
+    {
+      label: 'Höhe über NHN',
+      value: tree?.heightAboveSeaLevel ?? 'Keine Angabe',
+    },
+    {
+      label: 'Standalter',
+      value: tree?.age ?? 'Keine Angabe',
+    },
+    {
+      label: 'Pflanzjahr',
+      value: tree?.plantingYear ?? 'Keine Angabe',
+    },
+    {
+      label: 'Bewässerungsgruppe',
+      value: '@TODO: Implement'
+    },
+    {
+      label: 'Latitude',
+      value: tree?.latitude ?? 'Keine Angabe',
+    },
+    {
+      label: 'Longitude',
+      value: tree?.longitude ?? 'Keine Angabe',
+    },
+    {
+      label: 'Letztes Update',
+      value: updatedDate,
+    },
+  ];
+
+  return (
+    <>
+      <dl className="text-lg md:columns-2 md:gap-x-11">
+        {treeData.map((data, index) => (
+          <div
+            key={index}
+            className={`py-4 border-b border-b-dark-200 group md:last:border-b-transparent 
+              ${treeData.length/2 === index + 1 ? 'md:border-b-transparent' : ''}`}
+            >
+            <dt className="font-bold sm:inline">{data.label}:</dt>
+            <dd className="sm:inline sm:px-2">{data.value}</dd>
+          </div>
+        ))}
+      </dl>
+
+      <section className="mt-16">
+        @TODO: Add image slider
+      </section>
+    </>
+  );
+}
+
+export default TreeGeneralData;
diff --git a/frontend/src/components/tree/TreeSensorData.tsx b/frontend/src/components/tree/TreeSensorData.tsx
new file mode 100644
index 00000000..b284917e
--- /dev/null
+++ b/frontend/src/components/tree/TreeSensorData.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import GeneralStatusCard from '../general/cards/GeneralStatusCard';
+import EntitiesStatusCard from '../general/cards/EntitiesStatusCard';
+import { getSensorStatusDetails } from '@/hooks/useDetailsForSensorStatus';
+import { EntitiesSensorStatus, Tree } from '@green-ecolution/backend-client';
+import { format } from 'date-fns';
+
+interface TreeSensorData {
+  tree?: Tree,
+}
+
+const TreeSensorData: React.FC<TreeSensorData> = ({ tree }) => {
+  const updatedDate = tree?.updatedAt 
+    ? format(new Date(tree?.updatedAt), 'dd.MM.yyyy')
+    : 'Keine Angabe';
+    const updatedTime = tree?.updatedAt 
+    ? format(new Date(tree?.updatedAt), 'HH:mm')
+    : 'Keine Angabe';
+
+  const statusCards = [
+    {
+      overline: "Letzte Messung",
+      value: `${updatedTime} Uhr`,
+      description: `am ${updatedDate}`,
+    },
+  ]
+
+  const sensorStatus = tree?.sensor?.status ?? EntitiesSensorStatus.SensorStatusUnknown;
+
+  return (
+    <>
+      <ul className="space-y-5 md:space-y-0 md:grid md:gap-5 md:grid-cols-2 lg:grid-cols-4">
+        <li>
+          <EntitiesStatusCard
+            statusDetails={getSensorStatusDetails(sensorStatus)}
+            label="Status der Sensoren" />
+        </li>
+        {statusCards.map((card, key) => (
+          <li key={key}>
+            <GeneralStatusCard
+              overline={card.overline}
+              value={card.value}
+              isLarge
+              description={card.description}
+            />
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+
+export default TreeSensorData;
diff --git a/frontend/src/components/tree/TreeWateringStatus.tsx b/frontend/src/components/tree/TreeWateringStatus.tsx
new file mode 100644
index 00000000..529c3e96
--- /dev/null
+++ b/frontend/src/components/tree/TreeWateringStatus.tsx
@@ -0,0 +1,124 @@
+import { EntitiesTreeClusterWateringStatus, Tree } from '@green-ecolution/backend-client';
+import React from 'react';
+import { TreeDeciduous } from 'lucide-react';
+import { getWateringStatusDetails } from '@/hooks/useDetailsForWateringStatus';
+import GeneralStatusCard from '../general/cards/GeneralStatusCard';
+import EntitiesStatusCard from '../general/cards/EntitiesStatusCard';
+
+interface TreeWateringStatus {
+  tree?: Tree,
+}
+
+const TreeWateringStatus: React.FC<TreeWateringStatus> = ({ tree }) => {
+  // TODO: Switch to real content
+  const statusProDepth = [
+    {
+      status: EntitiesTreeClusterWateringStatus.TreeClusterWateringStatusGood,
+      sensorCount: 1,
+      value: "42,46 kΩ",
+    },
+    {
+      status: EntitiesTreeClusterWateringStatus.TreeClusterWateringStatusGood,
+      sensorCount: 1,
+      value: "35,46 kΩ",
+    },
+    {
+      status: EntitiesTreeClusterWateringStatus.TreeClusterWateringStatusModerate,
+      sensorCount: 1,
+      value: "28,12 kΩ",
+    },
+  ];
+
+  // TODO: Switch to real content
+  const statusCards = [
+    {
+      overline: "Bewässerungszustand (ø)",
+      value: "35,02 kΩ",
+      description: "+0.5% zu der letzten Messung.",
+    },
+    {
+      overline: "Bodenfeuchte",
+      value: "78 %",
+      description: "-0.5% zu der letzten Messung.",
+    },
+    {
+      overline: "Bodentemperatur",
+      value: "12 °C",
+      description: "- 0.5 °C zur letzten Messung",
+    },
+  ]
+
+  return (
+    <>
+      <ul className="space-y-5 md:space-y-0 md:grid md:gap-5 md:grid-cols-2 lg:grid-cols-4">
+        <li>
+          <EntitiesStatusCard
+            statusDetails={getWateringStatusDetails(EntitiesTreeClusterWateringStatus.TreeClusterWateringStatusGood)}
+            label="Bewässerungszustand (ø)" />
+        </li>
+        {statusCards.map((card, key) => (
+          <li key={key}>
+            <GeneralStatusCard
+              overline={card.overline}
+              value={card.value}
+              isLarge
+              description={card.description}
+            />
+          </li>
+        ))}
+      </ul>
+
+      <section className="mt-20">
+        <h2 className="font-bold font-lato text-xl mb-6 lg:mb-0">
+          Bewässerungszustand pro Bodentiefe
+        </h2>
+
+        <div className="lg:grid lg:grid-cols-[auto,15rem] lg:items-end lg:gap-x-10 xl:gap-x-20 xl:grid-cols-[auto,20rem]">
+          <div aria-hidden="true" className="mb-10 lg:mb-0 lg:w-60 lg:col-start-2 xl:w-80">
+            <TreeDeciduous className="w-11 h-11 mx-auto mb-4" />
+            <ul className="space-y-3">
+              {statusProDepth.map((card, key) => (
+                <li key={key} className={`rounded-xl text-center bg-${getWateringStatusDetails(card.status).color}-100 py-3`}>
+                  <p className={`inline relative pl-8 before:absolute before:w-4 before:h-4 before:rounded-full before:left-2 before:top-[0.1rem] before:bg-${getWateringStatusDetails(card.status).color}`}>
+                    <span className="font-semibold">{card.value}</span>
+                    <span className="text-dark-800 font-normal"> · in {30 * (key + 1)}cm</span>
+                  </p>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="lg:col-start-1 lg:row-start-1">
+            <header className="hidden border-b pb-2 text-sm text-dark-800 border-b-dark-200 lg:grid lg:grid-cols-[1.5fr,1fr,1fr] lg:gap-x-5">
+              <p>Status</p>
+              <p>Eingesetzte Tiefe</p>
+              <p>Anzahl der Sensoren</p>
+            </header>
+
+            <ul className="space-y-3 lg:space-y-0">
+              {statusProDepth.map((card, key) => (
+                <li key={key} className="space-y-3 border-b border-b-dark-300 pb-3 lg:py-3 lg:space-y-0 lg:grid lg:grid-cols-[1.5fr,1fr,1fr] lg:gap-5">
+                  <h3 className="font-medium text-lg lg:col-start-2 lg:row-start-1">
+                    <span className="lg:hidden">Bodentiefe von </span>{30 * (key + 1)}cm
+                  </h3>
+                  <div className="lg:col-start-1 lg:row-start-1">
+                    <dt className="inline lg:hidden">Bewässerungsstatus:</dt>
+                    <dd className={`inline relative font-medium pl-8 before:absolute before:w-4 before:h-4 before:rounded-full before:left-2 before:top-[0.1rem] before:bg-${getWateringStatusDetails(card.status).color}`}>
+                      {getWateringStatusDetails(card.status).label}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt className="inline lg:hidden">Anzahl der Sensoren:</dt>
+                    <dd className="inline"> {card.sensorCount} Sensor(en)</dd>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+export default TreeWateringStatus;
diff --git a/frontend/src/data/trees.tsx b/frontend/src/data/trees.tsx
deleted file mode 100644
index 028469fc..00000000
--- a/frontend/src/data/trees.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { EntitiesTreeClusterWateringStatus } from "@green-ecolution/backend-client";
-
-export function treeDemoData() {
-  return [
-    {
-      id: 0,
-      species: 'Quercus robur',
-      number: '100123',
-      hasSensor: true,
-      status: EntitiesTreeClusterWateringStatus.TreeClusterWateringStatusGood,
-    },
-    {
-      id: 1,
-      species: 'Crataegus monogyna',
-      number: '100123',
-      hasSensor: true,
-      status: EntitiesTreeClusterWateringStatus.TreeClusterWateringStatusModerate,
-    },
-    {
-      id: 2,
-      species: 'Crataegus monogyna',
-      number: '100123',
-      hasSensor: true,
-      status: EntitiesTreeClusterWateringStatus.TreeClusterWateringStatusGood,
-    },
-    {
-      id: 3,
-      species: 'Quercus robur',
-      number: '100123',
-      hasSensor: false,
-      status: EntitiesTreeClusterWateringStatus.TreeClusterWateringStatusUnknown,
-    },
-    {
-      id: 4,
-      species: 'Quercus robur',
-      number: '100123',
-      hasSensor: false,
-      status: EntitiesTreeClusterWateringStatus.TreeClusterWateringStatusUnknown,
-    },
-  ];
-}
diff --git a/frontend/src/hooks/useDetailsForSensorStatus.ts b/frontend/src/hooks/useDetailsForSensorStatus.ts
new file mode 100644
index 00000000..334a1339
--- /dev/null
+++ b/frontend/src/hooks/useDetailsForSensorStatus.ts
@@ -0,0 +1,25 @@
+import { EntitiesSensorStatus } from "@green-ecolution/backend-client";
+
+const SensorStatusProperties = {
+  [EntitiesSensorStatus.SensorStatusUnknown]: {
+    color: 'dark-400',
+    label: 'Unbekannt',
+    description: 'Der Status ist unbekannt.',
+  },
+  [EntitiesSensorStatus.SensorStatusOffline]: {
+    color: 'red',
+    label: 'Offline',
+    description: 'Einige Sensoren haben Probleme und benötigen eine Wartung.',
+  },
+  [EntitiesSensorStatus.SensorStatusOnline]: {
+    color: 'green-light',
+    label: 'In Ordnung',
+    description: 'Alle Sensoren sind online und können Daten senden.',
+  },
+} as const;
+
+type SensorStatusDetails = typeof SensorStatusProperties[EntitiesSensorStatus];
+
+export const getSensorStatusDetails = (status: EntitiesSensorStatus): SensorStatusDetails => {
+  return SensorStatusProperties[status];
+};
diff --git a/frontend/src/routeTree.gen.ts b/frontend/src/routeTree.gen.ts
index b043b1a9..24b6bf14 100644
--- a/frontend/src/routeTree.gen.ts
+++ b/frontend/src/routeTree.gen.ts
@@ -28,10 +28,10 @@ import { Route as ProtectedWaypointsIndexImport } from './routes/_protected/wayp
 import { Route as ProtectedTreeclusterIndexImport } from './routes/_protected/treecluster/index'
 import { Route as ProtectedMapIndexImport } from './routes/_protected/map/index'
 import { Route as ProtectedWaypointsNewImport } from './routes/_protected/waypoints/new'
+import { Route as ProtectedTreesTreeIdImport } from './routes/_protected/trees/$treeId'
 import { Route as ProtectedTreeclusterNewImport } from './routes/_protected/treecluster/new'
 import { Route as ProtectedTreeclusterTreeclusterIdImport } from './routes/_protected/treecluster/$treeclusterId'
 import { Route as ProtectedTreeNewImport } from './routes/_protected/tree/new'
-import { Route as ProtectedTreeTreeIdImport } from './routes/_protected/tree/$treeId'
 import { Route as ProtectedMapTreeNewImport } from './routes/_protected/map/tree/new'
 import { Route as ProtectedMapTreeclusterSelectTreeImport } from './routes/_protected/map/treecluster/select.tree'
 
@@ -122,6 +122,11 @@ const ProtectedWaypointsNewRoute = ProtectedWaypointsNewImport.update({
   getParentRoute: () => ProtectedRoute,
 } as any)
 
+const ProtectedTreesTreeIdRoute = ProtectedTreesTreeIdImport.update({
+  path: '/trees/$treeId',
+  getParentRoute: () => ProtectedRoute,
+} as any)
+
 const ProtectedTreeclusterNewRoute = ProtectedTreeclusterNewImport.update({
   path: '/treecluster/new',
   getParentRoute: () => ProtectedRoute,
@@ -138,11 +143,6 @@ const ProtectedTreeNewRoute = ProtectedTreeNewImport.update({
   getParentRoute: () => ProtectedRoute,
 } as any)
 
-const ProtectedTreeTreeIdRoute = ProtectedTreeTreeIdImport.update({
-  path: '/tree/$treeId',
-  getParentRoute: () => ProtectedRoute,
-} as any)
-
 const ProtectedMapTreeNewRoute = ProtectedMapTreeNewImport.update({
   path: '/tree/new',
   getParentRoute: () => ProtectedMapRoute,
@@ -249,13 +249,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ProtectedIndexImport
       parentRoute: typeof ProtectedImport
     }
-    '/_protected/tree/$treeId': {
-      id: '/_protected/tree/$treeId'
-      path: '/tree/$treeId'
-      fullPath: '/tree/$treeId'
-      preLoaderRoute: typeof ProtectedTreeTreeIdImport
-      parentRoute: typeof ProtectedImport
-    }
     '/_protected/tree/new': {
       id: '/_protected/tree/new'
       path: '/tree/new'
@@ -277,6 +270,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ProtectedTreeclusterNewImport
       parentRoute: typeof ProtectedImport
     }
+    '/_protected/trees/$treeId': {
+      id: '/_protected/trees/$treeId'
+      path: '/trees/$treeId'
+      fullPath: '/trees/$treeId'
+      preLoaderRoute: typeof ProtectedTreesTreeIdImport
+      parentRoute: typeof ProtectedImport
+    }
     '/_protected/waypoints/new': {
       id: '/_protected/waypoints/new'
       path: '/waypoints/new'
@@ -339,10 +339,10 @@ export const routeTree = rootRoute.addChildren({
     ProtectedTeamRoute,
     ProtectedVehiclesRoute,
     ProtectedIndexRoute,
-    ProtectedTreeTreeIdRoute,
     ProtectedTreeNewRoute,
     ProtectedTreeclusterTreeclusterIdRoute,
     ProtectedTreeclusterNewRoute,
+    ProtectedTreesTreeIdRoute,
     ProtectedWaypointsNewRoute,
     ProtectedTreeclusterIndexRoute,
     ProtectedWaypointsIndexRoute,
@@ -378,10 +378,10 @@ export const routeTree = rootRoute.addChildren({
         "/_protected/team",
         "/_protected/vehicles",
         "/_protected/",
-        "/_protected/tree/$treeId",
         "/_protected/tree/new",
         "/_protected/treecluster/$treeclusterId",
         "/_protected/treecluster/new",
+        "/_protected/trees/$treeId",
         "/_protected/waypoints/new",
         "/_protected/treecluster/",
         "/_protected/waypoints/"
@@ -437,10 +437,6 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "_protected/index.tsx",
       "parent": "/_protected"
     },
-    "/_protected/tree/$treeId": {
-      "filePath": "_protected/tree/$treeId.tsx",
-      "parent": "/_protected"
-    },
     "/_protected/tree/new": {
       "filePath": "_protected/tree/new.tsx",
       "parent": "/_protected"
@@ -453,6 +449,10 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "_protected/treecluster/new.tsx",
       "parent": "/_protected"
     },
+    "/_protected/trees/$treeId": {
+      "filePath": "_protected/trees/$treeId.tsx",
+      "parent": "/_protected"
+    },
     "/_protected/waypoints/new": {
       "filePath": "_protected/waypoints/new.tsx",
       "parent": "/_protected"
diff --git a/frontend/src/routes/_protected/map/index.tsx b/frontend/src/routes/_protected/map/index.tsx
index ec1121b7..7810ccce 100644
--- a/frontend/src/routes/_protected/map/index.tsx
+++ b/frontend/src/routes/_protected/map/index.tsx
@@ -1,16 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import MapButtons from "@/components/map/MapButtons";
 import { WithAllTrees } from "@/components/map/TreeMarker";
+import { Tree } from "@green-ecolution/backend-client";
 
 export const Route = createFileRoute("/_protected/map/")({
   component: MapView,
 });
 
 function MapView() {
+  const navigate = useNavigate({ from: '/map' });
+
+  const handleMarkerClick = (tree: Tree) => {
+    navigate({ to: `/trees/${tree.id}` });
+  };
+
   return (
     <>
       <MapButtons />
-      <WithAllTrees />
+      <WithAllTrees onClick={handleMarkerClick}/>
     </>
   );
 }
diff --git a/frontend/src/routes/_protected/tree/$treeId.tsx b/frontend/src/routes/_protected/tree/$treeId.tsx
deleted file mode 100644
index 06fcddf0..00000000
--- a/frontend/src/routes/_protected/tree/$treeId.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/_protected/tree/$treeId')({
-  component: () => <div>Hello /_protected/dashboard/tree/$treeId!</div>
-})
-
-
diff --git a/frontend/src/routes/_protected/treecluster/$treeclusterId.tsx b/frontend/src/routes/_protected/treecluster/$treeclusterId.tsx
index 41e0d91f..b7154fee 100644
--- a/frontend/src/routes/_protected/treecluster/$treeclusterId.tsx
+++ b/frontend/src/routes/_protected/treecluster/$treeclusterId.tsx
@@ -1,9 +1,12 @@
+import { treeApi } from '@/api/backendApi';
+import EntitiesStatusCard from '@/components/general/cards/EntitiesStatusCard';
 import GeneralStatusCard from '@/components/general/cards/GeneralStatusCard';
 import TreeCard from '@/components/general/cards/TreeCard';
-import WateringStatusCard from '@/components/general/cards/WateringStatusCard';
 import BackLink from '@/components/general/links/BackLink';
 import { treeclusterDemoData } from '@/data/treecluser';
-import { treeDemoData } from '@/data/trees';
+import { useAuthHeader } from '@/hooks/useAuthHeader';
+import { getWateringStatusDetails } from '@/hooks/useDetailsForWateringStatus';
+import { useQuery } from '@tanstack/react-query';
 import { createFileRoute, useLoaderData } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/_protected/treecluster/$treeclusterId')({
@@ -16,13 +19,14 @@ export const Route = createFileRoute('/_protected/treecluster/$treeclusterId')({
 })
 
 function SingleTreecluster() {
-
-  const trees = treeDemoData();
-
   const treecluster = useLoaderData({ from: '/_protected/treecluster/$treeclusterId'});
-  if (!treecluster) {
-    return <div>Tree cluster not found</div>;
-  }
+  const authorization = useAuthHeader();
+
+  // TODO: delete if real tree cluster data is used
+  const { data: treeRes } = useQuery({
+    queryKey: ["trees"],
+    queryFn: () => treeApi.getAllTrees({ authorization }),
+  });
 
   const location = `${treecluster.address}, ${treecluster.region}`;
   const treeCount = `${treecluster.treeCount} Bäume | ${treecluster.sensorCount} mit Sensoren`;
@@ -43,10 +47,11 @@ function SingleTreecluster() {
       </article>
 
       <section className="mt-10">
-        <ul className="space-y-5 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-5">
+        <ul className="space-y-5 md:space-y-0 md:grid md:gap-5 md:grid-cols-2 lg:grid-cols-3">
           <li>
-            <WateringStatusCard
-              wateringStatus={treecluster.status} />
+            <EntitiesStatusCard
+              statusDetails={getWateringStatusDetails(treecluster.status)}
+              label="Bewässerungszustand (ø)" />
           </li>
           <li>
             <GeneralStatusCard 
@@ -72,12 +77,12 @@ function SingleTreecluster() {
         </header>
 
         <ul className="space-y-5">
-          {trees.length === 0 ? (
+          {treeRes?.data.length === 0 ? (
             <li className="text-center text-dark-600 mt-4">
               <p>Der Bewässerungsgruppe wurden keine Bäume hinzugefügt.</p>
             </li>
           ) : (
-            trees.map((tree, key) => (
+            treeRes?.data.map((tree, key) => (
               <li key={key}>
                 <TreeCard tree={tree}/>
               </li>
diff --git a/frontend/src/routes/_protected/treecluster/index.tsx b/frontend/src/routes/_protected/treecluster/index.tsx
index 7d78190b..39ca0dce 100644
--- a/frontend/src/routes/_protected/treecluster/index.tsx
+++ b/frontend/src/routes/_protected/treecluster/index.tsx
@@ -4,7 +4,7 @@ import Dialog from "@/components/general/filter/Dialog";
 import { treeclusterDemoData } from "@/data/treecluser";
 import { createFileRoute, useLoaderData } from '@tanstack/react-router';
 import { z } from 'zod';
-import GeneralLink from '@/components/general/buttons/GeneralLink';
+import ButtonLink from '@/components/general/links/ButtonLink';
 import { Plus } from 'lucide-react';
 import { getWateringStatusDetails } from '@/hooks/useDetailsForWateringStatus';
 
@@ -55,7 +55,7 @@ function Treecluster() {
           Mindestens fünf Bäume in einer Baumgruppe sind mit Sensoren ausgestattet. 
           Diese gelieferten Werte werden gemittelt, sodass eine Handlungsempfehlung für die Baumgruppe gegeben werden kann.
         </p>
-        <GeneralLink 
+        <ButtonLink 
           icon={Plus} 
           label="Neue Gruppe erstellen"
           url="/treecluster/new" />
diff --git a/frontend/src/routes/_protected/trees/$treeId.tsx b/frontend/src/routes/_protected/trees/$treeId.tsx
new file mode 100644
index 00000000..a2e9032f
--- /dev/null
+++ b/frontend/src/routes/_protected/trees/$treeId.tsx
@@ -0,0 +1,94 @@
+import { treeApi } from '@/api/backendApi';
+import LoadingInfo from '@/components/general/error/LoadingInfo';
+import BackLink from '@/components/general/links/BackLink';
+import GeneralLink from '@/components/general/links/GeneralLink';
+import Tabs from '@/components/general/Tabs';
+import Sensor from '@/components/icons/Sensor';
+import Tree from '@/components/icons/Tree';
+import TreeGeneralData from '@/components/tree/TreeGeneralData';
+import TreeSensorData from '@/components/tree/TreeSensorData';
+import TreeWateringStatus from '@/components/tree/TreeWateringStatus';
+import { useAuthHeader } from '@/hooks/useAuthHeader';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute, useLoaderData } from '@tanstack/react-router'
+import { File, Info } from 'lucide-react';
+
+export const Route = createFileRoute('/_protected/trees/$treeId')({
+  component: SingleTree,
+
+  loader: async ({ params }) => {
+    return params.treeId;
+  },
+})
+
+function SingleTree() {
+  const treeId = useLoaderData({ from: '/_protected/trees/$treeId'});
+  const authorization = useAuthHeader();
+
+  const { data: tree, isLoading, isError } = useSuspenseQuery({
+    queryKey: ["tree", treeId],
+    queryFn: () => treeApi.getTrees({ treeId, authorization }),
+  });
+
+  const tabs = [
+    { 
+      label: 'Bewässerungsdaten',
+      icon: <Tree className="w-5 h-5" />,
+      view: <TreeWateringStatus tree={tree} />
+    },
+    {
+      label: 'Allgemeine Daten',
+      icon: <File className="w-5 h-5" />,
+      view: <TreeGeneralData tree={tree} />
+    },
+    {
+      label: 'Sensordaten',
+      icon: <Sensor className="w-5 h-5" />,
+      view: <TreeSensorData tree={tree} />
+    },
+  ];
+
+  return (
+    <div className="container mt-6">
+      {isLoading ? (
+        <LoadingInfo label="Baumdaten werden geladen …" />
+      ) : isError || !tree ? (
+        <p className="text-red text-lg">Einen Baum mit der Baumnummer {treeId} gibt es nicht oder die Baumdaten konnten nicht geladen werden.</p>
+      ) : (
+        <div>
+          <article className="mb-10 2xl:w-4/5">
+            <BackLink url="/map" label="Zum Kataster" />
+            <h1 className="font-lato font-bold text-3xl mb-4 lg:text-4xl xl:text-5xl">
+              Baum: {tree.number}
+            </h1>
+            <p className="text-dark-600 text-lg mb-4">
+              <span>@TODO: Bewässerungsgruppe hinzufügen, </span>
+              <span>@TODO: Adresse der Bewässerungsgruppe</span>
+            </p>
+            <GeneralLink
+              url={`/map?lat=${tree.latitude}&lng=${tree.longitude}&zoom=18`}
+              label="Auf der Karte anzeigen"
+            />
+          </article>
+          {tree?.sensor ? (
+            <Tabs tabs={tabs} />
+          ) : (
+            <section>
+              <div className="bg-white mb-10 border-dark-50 shadow-cards h-full p-6 rounded-xl group flex flex-col gap-4 border">
+                <h3 className="font-lato text-lg text-dark font-semibold flex items-center gap-x-3">
+                  <Info className="text-dark-600 w-5 h-5" />
+                  Info: Dieser Baum ist nicht mit einem Sensor ausgestattet.
+                </h3>
+                <p>
+                  Dieser Baum wurde bisher nicht mit einem Sensor ausgestattet, sodass keine Informationen über den aktuellen Bewässerungszustand angezeigt 
+                  werden können.
+                </p>
+              </div>
+              <TreeGeneralData tree={tree} />
+            </section>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}