diff --git a/Project_Periodensystem.Controller/PeriodensystemController.cs b/Project_Periodensystem.Controller/PeriodensystemController.cs
new file mode 100644
index 0000000..60d71fd
--- /dev/null
+++ b/Project_Periodensystem.Controller/PeriodensystemController.cs
@@ -0,0 +1,19 @@
+using System.Collections.Generic;
+using Project_Periodensystem.Model;
+using Project_Periodensystem.Persistence;
+
+namespace Project_Periodensystem.Controller
+{
+    // Der Controller stellt der View Daten zur Verfügung und verwaltet die Verbindung zur Datenquelle.
+    public class PeriodensystemController
+    {
+        // Öffentliche Liste aller Elemente, die an die View gebunden werden kann
+        public List<Element> Elements { get; }
+
+        // Konstruktor – lädt beim Start alle Elemente aus der Persistence
+        public PeriodensystemController()
+        {
+            Elements = PeriodicTableData.Elements;
+        }
+    }
+}
diff --git a/Project_Periodensystem.Controller/Project_Periodensystem.Controller.csproj b/Project_Periodensystem.Controller/Project_Periodensystem.Controller.csproj
index 7500f10..b66d3a2 100644
--- a/Project_Periodensystem.Controller/Project_Periodensystem.Controller.csproj
+++ b/Project_Periodensystem.Controller/Project_Periodensystem.Controller.csproj
@@ -11,4 +11,9 @@
     <Nullable>enable</Nullable>
   </PropertyGroup>
 
+<ItemGroup>
+  <ProjectReference Include="..\Project_Periodensystem.Model\Project_Periodensystem.Model.csproj" />
+  <ProjectReference Include="..\Project_Periodensystem.Persistence\Project_Periodensystem.Persistence.csproj" />
+</ItemGroup>
+
 </Project>
diff --git a/Project_Periodensystem.Model/Elements.cs b/Project_Periodensystem.Model/Elements.cs
new file mode 100644
index 0000000..e015c48
--- /dev/null
+++ b/Project_Periodensystem.Model/Elements.cs
@@ -0,0 +1,43 @@
+// Definiert einen Namespace – ein Container, um Klassen logisch zu gruppieren.
+// In diesem Fall gehört die Klasse zum "Projekt_periodensystem.Model"-Namespace.
+namespace Project_Periodensystem.Model
+{
+    // Definiert eine öffentliche Klasse namens "Element", die ein chemisches Element repräsentiert.
+    public class Element
+    {
+        // Ordnungszahl des Elements (z. B. 1 für Wasserstoff)
+        public int AtomicNumber { get; set; }
+
+        // Chemisches Symbol des Elements (z. B. "H" für Wasserstoff)
+        public string Symbol { get; set; }
+
+        // Vollständiger Name des Elements (z. B. "Hydrogen")
+        public string ElementName { get; set; }
+
+        // Atommasse (mittlere Masse eines Atoms in u)
+        public double AtomicWeight { get; set; }
+
+        // Elektronegativität nach Pauling-Skala (z. B. 2.1)
+        public double Electronegativity { get; set; }
+
+        // Dichte des Elements in g/cm³
+        public double Density { get; set; }
+
+        // Serie oder Gruppe, zu der das Element gehört (z. B. "Halogen", "Alkalimetall")
+        public string Series { get; set; }
+
+        // Konstruktor: Erzeugt ein neues Element-Objekt mit allen relevanten Eigenschaften.
+        public Element(int atomicNumber, string symbol, string elementname, double atomicWeight, 
+                       double electronegativity, double density, string series)
+        {
+            // Weist den Eigenschaften beim Erzeugen eines Objekts die übergebenen Werte zu
+            AtomicNumber = atomicNumber;
+            Symbol = symbol;
+            ElementName = elementname;
+            AtomicWeight = atomicWeight;
+            Electronegativity = electronegativity;
+            Density = density;
+            Series = series;
+        }
+    }
+}
diff --git a/Project_Periodensystem.Persistence/PeriodicTableData.cs b/Project_Periodensystem.Persistence/PeriodicTableData.cs
new file mode 100644
index 0000000..747e85f
--- /dev/null
+++ b/Project_Periodensystem.Persistence/PeriodicTableData.cs
@@ -0,0 +1,132 @@
+using System.Collections.Generic; // Importiert die Generics-Bibliothek, die für die Verwendung von Listen und anderen generischen Datentypen erforderlich ist
+using Project_Periodensystem.Model; // Importiert das Projektperiodensystem.Model-Namespace
+
+namespace Project_Periodensystem.Persistence // Definiert den Namespace für die Datenpersistenz des Periodensystems
+{
+    public static class PeriodicTableData // Definiert eine statische Klasse für die Daten des Periodensystems
+    {
+        // Eine statische Liste von Elementen, die das Periodensystem repräsentieren
+        public static List<Element> Elements { get; } = new List<Element>
+        {
+            // Initialisierung der Elemente mit ihren Eigenschaften (Ordnungszahl, Symbol, Name, Atommasse, Elektronegativität, Dichte, Klassifikation)
+            new Element(1, "H", "Wasserstoff", 1.008, 2.2, 8.988e-05, "Nichtmetall"),
+            new Element(2, "He", "Helium", 4.0026, 0.0, 0.0001786, "Edelgas"),
+            new Element(3, "Li", "Lithium", 6.94, 0.98, 0.534, "Metall"),
+            new Element(4, "Be", "Beryllium", 9.0122, 1.57, 1.85, "Metall"),
+            new Element(5, "B", "Bor", 10.81, 2.04, 2.34, "Halbmetall"),
+            new Element(6, "C", "Kohlenstoff", 12.011, 2.55, 2.267, "Nichtmetall"),
+            new Element(7, "N", "Stickstoff", 14.007, 3.04, 0.0012506, "Nichtmetall"),
+            new Element(8, "O", "Sauerstoff", 15.999, 3.44, 0.001429, "Nichtmetall"),
+            new Element(9, "F", "Fluor", 18.998, 3.98, 0.001696, "Halogen"),
+            new Element(10, "Ne", "Neon", 20.18, 0.0, 0.0008999, "Edelgas"),
+            new Element(11, "Na", "Natrium", 22.989, 0.93, 0.971, "Metall"),
+            new Element(12, "Mg", "Magnesium", 24.305, 1.31, 1.738, "Metall"),
+            new Element(13, "Al", "Aluminium", 26.982, 1.61, 2.698, "Metall"),
+            new Element(14, "Si", "Silizium", 28.085, 1.90, 2.329, "Halbmetall"),
+            new Element(15, "P", "Phosphor", 30.974, 2.19, 1.82, "Nichtmetall"),
+            new Element(16, "S", "Schwefel", 32.06, 2.58, 2.067, "Nichtmetall"),
+            new Element(17, "Cl", "Chlor", 35.45, 3.16, 0.003214, "Halogen"),
+            new Element(18, "Ar", "Argon", 39.948, 0.0, 0.001784, "Edelgas"),
+            new Element(19, "K", "Kalium", 39.098, 0.82, 0.862, "Metall"),
+            new Element(20, "Ca", "Calcium", 40.078, 1.0, 1.54, "Metall"),
+            new Element(21, "Sc", "Scandium", 44.956, 1.36, 2.989, "Metall"),
+            new Element(22, "Ti", "Titan", 47.867, 1.54, 4.54, "Metall"),
+            new Element(23, "V", "Vanadium", 50.942, 1.63, 6.11, "Metall"),
+            new Element(24, "Cr", "Chrom", 51.996, 1.66, 7.15, "Metall"),
+            new Element(25, "Mn", "Mangan", 54.938, 1.55, 7.44, "Metall"),
+            new Element(26, "Fe", "Eisen", 55.845, 1.83, 7.874, "Metall"),
+            new Element(27, "Co", "Cobalt", 58.933, 1.88, 8.86, "Metall"),
+            new Element(28, "Ni", "Nickel", 58.693, 1.91, 8.912, "Metall"),
+            new Element(29, "Cu", "Kupfer", 63.546, 1.90, 8.96, "Metall"),
+            new Element(30, "Zn", "Zink", 65.38, 1.65, 7.14, "Metall"),
+            new Element(31, "Ga", "Gallium", 69.723, 1.81, 5.91, "Metall"),
+            new Element(32, "Ge", "Germanium", 72.63, 2.01, 5.323, "Halbmetall"),
+            new Element(33, "As", "Arsen", 74.922, 2.18, 5.776, "Halbmetall"),
+            new Element(34, "Se", "Selen", 78.971, 2.55, 4.809, "Nichtmetall"),
+            new Element(35, "Br", "Brom", 79.904, 2.96, 3.122, "Halogen"),
+            new Element(36, "Kr", "Krypton", 83.798, 3.0, 0.003733, "Edelgas"),
+            new Element(37, "Rb", "Rubidium", 85.468, 0.82, 1.532, "Metall"),
+            new Element(38, "Sr", "Strontium", 87.62, 0.95, 2.64, "Metall"),
+            new Element(39, "Y", "Yttrium", 88.906, 1.22, 4.472, "Metall"),
+            new Element(40, "Zr", "Zirconium", 91.224, 1.33, 6.52, "Metall"),
+            new Element(41, "Nb", "Niob", 92.906, 1.6, 8.57, "Metall"),
+            new Element(42, "Mo", "Molybdän", 95.95, 2.16, 10.22, "Metall"),
+            new Element(43, "Tc", "Technetium", 98, 1.9, 11, "Metall"),
+            new Element(44, "Ru", "Ruthenium", 101.07, 2.2, 12.37, "Metall"),
+            new Element(45, "Rh", "Rhodium", 102.91, 2.28, 12.41, "Metall"),
+            new Element(46, "Pd", "Palladium", 106.42, 2.20, 12.02, "Metall"),
+            new Element(47, "Ag", "Silber", 107.87, 1.93, 10.49, "Metall"),
+            new Element(48, "Cd", "Cadmium", 112.41, 1.69, 8.65, "Metall"),
+            new Element(49, "In", "Indium", 114.82, 1.78, 7.31, "Metall"),
+            new Element(50, "Sn", "Zinn", 118.71, 1.96, 7.287, "Metall"),
+            new Element(51, "Sb", "Antimon", 121.76, 2.05, 6.685, "Halbmetall"),
+            new Element(52, "Te", "Tellur", 127.60, 2.1, 6.232, "Halbmetall"),
+            new Element(53, "I", "Iod", 126.90, 2.66, 4.93, "Halogen"),
+            new Element(54, "Xe", "Xenon", 131.29, 2.6, 0.005887, "Edelgas"),
+            new Element(55, "Cs", "Caesium", 132.91, 0.79, 1.93, "Metall"),
+            new Element(56, "Ba", "Barium", 137.33, 0.89, 3.62, "Metall"),
+            new Element(57, "La", "Lanthan", 138.91, 1.10, 6.145, "Lanthanoid"),
+            new Element(58, "Ce", "Cer", 140.12, 1.12, 6.770, "Lanthanoid"),
+            new Element(59, "Pr", "Praseodym", 140.91, 1.13, 6.773, "Lanthanoid"),
+            new Element(60, "Nd", "Neodym", 144.24, 1.14, 7.007, "Lanthanoid"),
+            new Element(61, "Pm", "Promethium", 145, 1.13, 7.26, "Lanthanoid"),
+            new Element(62, "Sm", "Samarium", 150.36, 1.17, 7.52, "Lanthanoid"),
+            new Element(63, "Eu", "Europium", 151.96, 1.2, 5.243, "Lanthanoid"),
+            new Element(64, "Gd", "Gadolinium", 157.25, 1.2, 7.895, "Lanthanoid"),
+            new Element(65, "Tb", "Terbium", 158.93, 1.1, 8.229, "Lanthanoid"),
+            new Element(66, "Dy", "Dysprosium", 162.50, 1.22, 8.55, "Lanthanoid"),
+            new Element(67, "Ho", "Holmium", 164.93, 1.23, 8.795, "Lanthanoid"),
+            new Element(68, "Er", "Erbium", 167.26, 1.24, 9.066, "Lanthanoid"),
+            new Element(69, "Tm", "Thulium", 168.93, 1.25, 9.321, "Lanthanoid"),
+            new Element(70, "Yb", "Ytterbium", 173.04, 1.1, 6.965, "Lanthanoid"),
+            new Element(71, "Lu", "Lutetium", 174.97, 1.27, 9.84, "Lanthanoid"),
+            new Element(72, "Hf", "Hafnium", 178.49, 1.3, 13.31, "Metall"),
+            new Element(73, "Ta", "Tantal", 180.95, 1.5, 16.654, "Metall"),
+            new Element(74, "W", "Wolfram", 183.84, 2.36, 19.25, "Metall"),
+            new Element(75, "Re", "Rhenium", 186.21, 1.9, 21.02, "Metall"),
+            new Element(76, "Os", "Osmium", 190.23, 2.2, 22.59, "Metall"),
+            new Element(77, "Ir", "Iridium", 192.22, 2.2, 22.56, "Metall"),
+            new Element(78, "Pt", "Platin", 195.08, 2.28, 21.45, "Metall"),
+            new Element(79, "Au", "Gold", 196.97, 2.54, 19.32, "Metall"),
+            new Element(80, "Hg", "Quecksilber", 200.59, 2.0, 13.534, "Metall"),
+            new Element(81, "Tl", "Thallium", 204.38, 1.62, 11.85, "Metall"),
+            new Element(82, "Pb", "Blei", 207.2, 2.33, 11.34, "Metall"),
+            new Element(83, "Bi", "Bismut", 208.98, 2.02, 9.78, "Metall"),
+            new Element(84, "Po", "Polonium", 209, 2.0, 9.196, "Metall"),
+            new Element(85, "At", "Astat", 210, 2.2, 7, "Halogen"),
+            new Element(86, "Rn", "Radon", 222, 0.0, 0.00973, "Edelgas"),
+            new Element(87, "Fr", "Francium", 223, 0.7, 1.87, "Metall"),
+            new Element(88, "Ra", "Radium", 226, 0.9, 5.5, "Metall"),
+            new Element(89, "Ac", "Actinium", 227, 1.1, 10.07, "Actinoid"),
+            new Element(90, "Th", "Thorium", 232.04, 1.3, 11.72, "Actinoid"),
+            new Element(91, "Pa", "Protactinium", 231.04, 1.5, 15.37, "Actinoid"),
+            new Element(92, "U", "Uran", 238.03, 1.38, 18.95, "Actinoid"),
+            new Element(93, "Np", "Neptunium", 237, 1.36, 20.45, "Actinoid"),
+            new Element(94, "Pu", "Plutonium", 244, 1.28, 19.84, "Actinoid"),
+            new Element(95, "Am", "Americium", 243, 1.3, 13.67, "Actinoid"),
+            new Element(96, "Cm", "Curium", 247, 1.3, 13.51, "Actinoid"),
+            new Element(97, "Bk", "Berkelium", 247, 1.3, 14.79, "Actinoid"),
+            new Element(98, "Cf", "Californium", 251, 1.3, 15.1, "Actinoid"),
+            new Element(99, "Es", "Einsteinium", 252, 1.3, 8.84, "Actinoid"),
+            new Element(100, "Fm", "Fermium", 257, 1.3, 9.7, "Actinoid"),
+            new Element(101, "Md", "Mendelevium", 258, 1.3, 10.3, "Actinoid"),
+            new Element(102, "No", "Nobelium", 259, 1.3, 9.9, "Actinoid"),
+            new Element(103, "Lr", "Lawrencium", 262, 1.3, 15.6, "Actinoid"),
+            new Element(104, "Rf", "Rutherfordium", 267, 0.0, 23.2, "Metall"),
+            new Element(105, "Db", "Dubnium", 270, 0.0, 29.3, "Metall"),
+            new Element(106, "Sg", "Seaborgium", 271, 0.0, 35.0, "Metall"),
+            new Element(107, "Bh", "Bohrium", 270, 0.0, 37.1, "Metall"),
+            new Element(108, "Hs", "Hassium", 270, 0.0, 41.0, "Metall"),
+            new Element(109, "Mt", "Meitnerium", 278, 0.0, 27.0, "Metall"),
+            new Element(110, "Ds", "Darmstadtium", 281, 0.0, 28.5, "Metall"),
+            new Element(111, "Rg", "Roentgenium", 282, 0.0, 32.0, "Metall"),
+            new Element(112, "Cn", "Copernicium", 285, 0.0, 23.7, "Metall"),
+            new Element(113, "Nh", "Nihonium", 286, 0.0, 16.0, "Unbekannt"),
+            new Element(114, "Fl", "Flerovium", 289, 0.0, 14.0, "Unbekannt"),
+            new Element(115, "Mc", "Moscovium", 290, 0.0, 13.5, "Unbekannt"),
+            new Element(116, "Lv", "Livermorium", 293, 0.0, 12.9, "Unbekannt"),
+            new Element(117, "Ts", "Tenness", 294, 0.0, 7.2, "Unbekannt"),
+            new Element(118, "Og", "Oganesson", 294, 0.0, 4.9, "Unbekannt")
+        };
+    }
+}
\ No newline at end of file
diff --git a/Project_Periodensystem.Persistence/Project_Periodensystem.Persistence.csproj b/Project_Periodensystem.Persistence/Project_Periodensystem.Persistence.csproj
index 125f4c9..d11543f 100644
--- a/Project_Periodensystem.Persistence/Project_Periodensystem.Persistence.csproj
+++ b/Project_Periodensystem.Persistence/Project_Periodensystem.Persistence.csproj
@@ -1,9 +1,17 @@
 <Project Sdk="Microsoft.NET.Sdk">
-
+  <!-- PropertyGroup enthält verschiedene Projekteinstellungen -->
   <PropertyGroup>
+    <!-- Gibt die Ziel-.NET-Framework-Version an -->
     <TargetFramework>net9.0</TargetFramework>
+    <!-- Aktiviert implizite Verwendungen, die automatisch häufig verwendete Namespaces importieren -->
     <ImplicitUsings>enable</ImplicitUsings>
+    <!-- Aktiviert nullable Referenztypen zur Unterstützung der Nullsicherheitsprüfung -->
     <Nullable>enable</Nullable>
   </PropertyGroup>
 
-</Project>
+  <!-- ItemGroup enthält Verweise auf andere Projekte -->
+  <ItemGroup>
+    <!-- Verweis auf das Project_Periodensystem.Model-Projekt -->
+    <ProjectReference Include="..\Project_Periodensystem.Model\Project_Periodensystem.Model.csproj" />
+  </ItemGroup>
+</Project>
\ No newline at end of file
diff --git a/Project_Periodensystem.View/Components/ElementTile.xaml b/Project_Periodensystem.View/Components/ElementTile.xaml
new file mode 100644
index 0000000..f7f0fee
--- /dev/null
+++ b/Project_Periodensystem.View/Components/ElementTile.xaml
@@ -0,0 +1,47 @@
+<!--
+  Dieses UserControl ist eine "Kachel" für ein einzelnes chemisches Element.
+  Es wird z. B. 118-mal innerhalb eines ItemsControl verwendet.
+-->
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             x:Class="Project_Periodensystem.View.ElementTile"
+             Width="80" Height="100"> <!-- Feste Größe für eine Kachel -->
+
+    <!-- Rahmen um die Kachel -->
+    <Border Background="LightGray"            <!-- Hintergrundfarbe (ggf. später dynamisch je nach Series) -->
+            BorderBrush="Black"               <!-- Farbe des Rahmens -->
+            BorderThickness="1"               <!-- Rahmendicke -->
+            CornerRadius="4"                  <!-- Abgerundete Ecken -->
+            Padding="4">                      <!-- Innenabstand zum Rand -->
+
+        <!-- Inhalte werden vertikal zentriert angeordnet -->
+        <StackPanel HorizontalAlignment="Center">
+
+            <!-- 1. Zeile: Ordnungszahl (z. B. 1 für Wasserstoff) -->
+            <TextBlock Text="{Binding AtomicNumber}"
+                       FontSize="12" />
+
+            <!-- 2. Zeile: Symbol (z. B. H für Wasserstoff), hervorgehoben -->
+            <TextBlock Text="{Binding Symbol}"
+                       FontWeight="Bold"
+                       FontSize="16" />
+
+            <!-- 3. Zeile: Element-Name (z. B. Wasserstoff) -->
+            <TextBlock Text="{Binding ElementName}"
+                       FontSize="10" />
+
+            <!-- 4. Zeile: Atommasse -->
+            <TextBlock Text="{Binding AtomicWeight}"
+                       FontSize="10" />
+
+            <!-- 5. Zeile: Elektronegativität -->
+            <TextBlock Text="{Binding Electronegativity}"
+                       FontSize="10" />
+
+            <!-- 6. Zeile: Dichte -->
+            <TextBlock Text="{Binding Density}"
+                       FontSize="10" />
+
+        </StackPanel>
+    </Border>
+</UserControl>
diff --git a/Project_Periodensystem.View/Components/ElementTile.xaml.cs b/Project_Periodensystem.View/Components/ElementTile.xaml.cs
new file mode 100644
index 0000000..f0d0c9b
--- /dev/null
+++ b/Project_Periodensystem.View/Components/ElementTile.xaml.cs
@@ -0,0 +1,15 @@
+// Namespace der Datei – muss zu deiner Projektstruktur und XAML-Klasse passen
+namespace Project_Periodensystem.View
+{
+    // Diese Klasse ist der "Code-Behind" für die XAML-Datei ElementTile.xaml
+    // Sie erbt von Avalonia's UserControl und repräsentiert eine einzelne Kachel (ein Element)
+
+    public partial class ElementTile : UserControl
+    {
+        // Konstruktor – wird aufgerufen, wenn ein neues ElementTile erstellt wird
+        public ElementTile()
+        {
+            InitializeComponent(); // Lädt und verbindet die XAML mit dem Code
+        }
+    }
+}
diff --git a/Project_Periodensystem.View/Images/image1.jpeg b/Project_Periodensystem.View/Images/image1.jpeg
new file mode 100644
index 0000000..83de953
Binary files /dev/null and b/Project_Periodensystem.View/Images/image1.jpeg differ
diff --git a/Project_Periodensystem.View/MainWindow.axaml b/Project_Periodensystem.View/MainWindow.axaml
index 23a4f59..b128a8a 100644
--- a/Project_Periodensystem.View/MainWindow.axaml
+++ b/Project_Periodensystem.View/MainWindow.axaml
@@ -2,19 +2,58 @@
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+        xmlns:views="clr-namespace:Project_Periodensystem.View"
+        mc:Ignorable="d" d:DesignWidth="1400" d:DesignHeight="900"
         x:Class="Project_Periodensystem.View.MainWindow"
-        Title="Project_Periodensystem.View">
-        <Grid>
+        Title="Periodensystem">
 
-            <StackPanel >
-                <Button Content="Hallo" Foreground="AliceBlue" Background="Black" Margin="12,12,12,12" />
-                <TextBlock Text="Hallo" Margin="12,12,12,12"/>
-                <TextBox  Background=""/>
-                <Image VerticalAlignment="Top" HorizontalAlignment="Left" Height="200" Width="80" Margin="12,12,12,12" />
-            </StackPanel>
+    <!-- Haupt-Layout mit Padding für Abstand -->
+    <Grid Padding="12">
+        <!-- Zwei Zeilen: oben Titel + Suche, unten das Periodensystem -->
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" /> <!-- Erste Zeile: automatisch so hoch wie nötig -->
+            <RowDefinition Height="*" />    <!-- Zweite Zeile: nimmt den restlichen Platz ein -->
+        </Grid.RowDefinitions>
 
+        <!-- Kopfzeile mit Titel und Suchfeld -->
+        <StackPanel Orientation="Horizontal"
+                    Margin="0 0 0 12"     <!-- Abstand nach unten -->
+                    Spacing="12"          <!-- Abstand zwischen Kind-Elementen -->
+                    Grid.Row="0">         <!-- Platziert dieses Panel in der ersten Zeile -->
 
+            <!-- Überschrift -->
+            <TextBlock Text="Periodensystem der Elemente"
+                       FontSize="24"
+                       FontWeight="Bold" />
 
-        </Grid>
+            <!-- Eingabefeld für zukünftige Suche (noch ohne Funktion) -->
+            <TextBox Width="200" Watermark="Suche..." />
+        </StackPanel>
+
+        <!-- Hauptbereich mit Kacheln in einem ScrollViewer -->
+        <ScrollViewer Grid.Row="1"> <!-- Platziert im unteren Bereich -->
+
+            <!-- ItemsControl zeigt die Liste aller Elemente an -->
+            <ItemsControl Items="{Binding Elements}">
+
+                <!-- ItemsPanel definiert das Layout: hier ein 18-spaltiges Gitter -->
+                <ItemsControl.ItemsPanel>
+                    <ItemsPanelTemplate>
+                        <UniformGrid Columns="18" />
+                        <!-- Wichtig: 18 Spalten, damit das Periodensystem "klassisch" dargestellt wird -->
+                    </ItemsPanelTemplate>
+                </ItemsControl.ItemsPanel>
+
+                <!-- Definiert, wie jedes einzelne Element aussehen soll -->
+                <ItemsControl.ItemTemplate>
+                    <DataTemplate>
+                        <!-- Nutzt eine eigene Kachel-View für jedes Element -->
+                        <views:ElementTile DataContext="{Binding}" />
+                        <!-- DataContext ist automatisch ein einzelnes Element-Objekt -->
+                    </DataTemplate>
+                </ItemsControl.ItemTemplate>
+
+            </ItemsControl>
+        </ScrollViewer>
+    </Grid>
 </Window>
diff --git a/Project_Periodensystem.View/MainWindow.axaml.cs b/Project_Periodensystem.View/MainWindow.axaml.cs
index 86e6c39..25fbe08 100644
--- a/Project_Periodensystem.View/MainWindow.axaml.cs
+++ b/Project_Periodensystem.View/MainWindow.axaml.cs
@@ -1,11 +1,28 @@
+// Importiert die Avalonia Controls, also Basisfunktionen wie Window, Button etc.
 using Avalonia.Controls;
 
-namespace Project_Periodensystem.View;
+// Importiert deinen eigenen Controller, der die Daten und Logik bereitstellt
+using Project_Periodensystem.Controller;
 
-public partial class MainWindow : Window
+namespace Project_Periodensystem.View // Namespace entspricht deinem Projektordner „View“
 {
-    public MainWindow()
+    // Diese Klasse ist die Code-Behind-Datei für MainWindow.xaml
+    // Sie erweitert Avalonia's Window-Klasse
+    public partial class MainWindow : Window
     {
-        InitializeComponent();
+        // Der Controller verwaltet die Daten und steuert das Verhalten (MVCP-Prinzip!)
+        private readonly PeriodensystemController _controller;
+
+        // Konstruktor – wird aufgerufen, wenn das Fenster erstellt wird
+        public MainWindow()
+        {
+            InitializeComponent(); // Initialisiert die grafischen Komponenten aus XAML
+
+            _controller = new PeriodensystemController(); // Erstellt eine Instanz des Controllers
+
+            DataContext = _controller;
+            // Das Fenster (und alles darin) bekommt den Controller als Datenquelle (Binding-Kontext)
+            // Dadurch funktionieren z.B. Bindings wie {Binding Elements} in der XAML
+        }
     }
-}
\ No newline at end of file
+}
diff --git a/Project_Periodensystem.View/Project_Periodensystem.View.csproj b/Project_Periodensystem.View/Project_Periodensystem.View.csproj
index a29e073..9456655 100644
--- a/Project_Periodensystem.View/Project_Periodensystem.View.csproj
+++ b/Project_Periodensystem.View/Project_Periodensystem.View.csproj
@@ -1,27 +1,45 @@
 <Project Sdk="Microsoft.NET.Sdk">
+  <!-- PropertyGroup enthält verschiedene Projekteinstellungen -->
   <PropertyGroup>
+    <!-- Definiert den Typ der zu erstellenden Anwendung, in diesem Fall eine Windows-Executable -->
     <OutputType>WinExe</OutputType>
+    <!-- Gibt die Ziel-.NET-Framework-Version an -->
     <TargetFramework>net9.0</TargetFramework>
+    <!-- Aktiviert nullable Referenztypen zur Unterstützung der Nullsicherheitsprüfung -->
     <Nullable>enable</Nullable>
+    <!-- Aktiviert die integrierte COM-Interop-Unterstützung -->
     <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
+    <!-- Gibt die Anwendungsmanifestdatei an -->
     <ApplicationManifest>app.manifest</ApplicationManifest>
+    <!-- Aktiviert die standardmäßige Verwendung von kompilierten Bindings in Avalonia -->
     <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
   </PropertyGroup>
 
+  <!-- ItemGroup enthält Verweise auf NuGet-Pakete -->
   <ItemGroup>
+    <!-- Verweis auf das Avalonia-Paket zum Erstellen plattformübergreifender UI-Anwendungen -->
     <PackageReference Include="Avalonia" Version="11.2.6" />
+    <!-- Verweis auf das Avalonia.Desktop-Paket für Desktop-spezifische Funktionalitäten -->
     <PackageReference Include="Avalonia.Desktop" Version="11.2.6" />
+    <!-- Verweis auf das Avalonia.Themes.Fluent-Paket für Fluent-Design-System-Themen -->
     <PackageReference Include="Avalonia.Themes.Fluent" Version="11.2.6" />
+    <!-- Verweis auf das Avalonia.Fonts.Inter-Paket für die Inter-Schriftfamilie -->
     <PackageReference Include="Avalonia.Fonts.Inter" Version="11.2.6" />
-    <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
+    <!-- Die folgende Bedingung ist erforderlich, um das Avalonia.Diagnostics-Paket aus dem Build-Output in der Release-Konfiguration zu entfernen. -->
+    <!-- Verweis auf das Avalonia.Diagnostics-Paket für Debugging und Diagnose -->
     <PackageReference Include="Avalonia.Diagnostics" Version="11.2.6">
+      <!-- Schließt die Avalonia.Diagnostics-Paketressourcen aus dem Build-Output in der Release-Konfiguration aus -->
       <IncludeAssets Condition="'$(Configuration)' != 'Debug'">None</IncludeAssets>
+      <!-- Markiert alle Avalonia.Diagnostics-Paketressourcen als privat in der Release-Konfiguration -->
       <PrivateAssets Condition="'$(Configuration)' != 'Debug'">All</PrivateAssets>
     </PackageReference>
   </ItemGroup>
 
+  <!-- ItemGroup enthält Verweise auf andere Projekte und Dateien -->
   <ItemGroup>
+    <!-- Verweis auf das Project_Periodensystem.Controller-Projekt -->
     <ProjectReference Include="..\Project_Periodensystem.Controller\Project_Periodensystem.Controller.csproj" />
-    <ProjectReference Include="..\Project_Periodensystem.Model\Project_Periodensystem.Model.csproj" />
+    <!-- Verweis auf das Einbinden aller Dateien im Images-Verzeichnis -->
+    <ProjectReference Include="Images/**" />
   </ItemGroup>
 </Project>