diff --git a/admin.html b/admin.html
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..8813c116aa7e5a5ca52aa580256758c8b3406dd2 100644
--- a/admin.html
+++ b/admin.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <title>NASA - Admin</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" style="text/css" href="styles.css" />
+    </head>
+    <body>
+        <header class="admin-header"><h1>Admin-Page</h1></header>
+
+        <form class="admin-form" action="admin.html" method="post" accept-charset="UTF-8">
+            <fieldset>
+                <legend>Select a News file</legend>
+                <input id="news-file" name="news-file" type="file" accept=".json" required />
+                <input type="submit" value="Apply" />
+            </fieldset>
+        </form>  
+    </body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 06e7c29db33e33325991e366cd9f486d91226e35..1a37ffb8275bbb344acac6f05b83e8dd2e9fdea8 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,8 @@
         <script src="functions.js"></script>
         <link rel="stylesheet" type="text/css" href="styles.css" />
     </head>
-    <body onload="">
-        <header>
+    <body class="nasa-body">
+        <header class="nasa-header">
             <img class="nasa-img" src="img/nasa.png" alt="" />
 
             <nav>
diff --git a/index.php b/index.php
index eda76f06596039707bf1e813a2a3f8bab70b0d44..688df6962e85667d6b0f4a9fbfb8b2e9739c8ec4 100644
--- a/index.php
+++ b/index.php
@@ -2,6 +2,12 @@
     ini_set("display_errors", 1);
     ini_set("display_startup_errors", 1);
 
+    $file = "data/news_01.json";
+
+    if (!file_exists($file)) {
+        die("File not found");
+    }
+
     $fileContents = file_get_contents('data/news_01.json');
 
     if ($fileContents === NULL)
@@ -19,8 +25,8 @@
         <script src="functions.js"></script>
         <link rel="stylesheet" type="text/css" href="styles.css" />
     </head>
-    <body onload="">
-        <header>
+    <body class="nasa-body">
+        <header class="nasa-header">
             <img class="nasa-img" src="img/nasa.png" alt="" />
 
             <nav>
@@ -39,7 +45,7 @@
                         </form>
                     </li>
                     <li><img src="img/share_icon.png" alt="" /></li>
-                    <li class="admin-button"><a href="admin.html">Admin</a></li>
+                    <li class="admin-button"><a href="php/admin.php">Admin</a></li>
                 </ul>
             
                 <ul class="center-nav">
diff --git a/php/Admin.php b/php/Admin.php
new file mode 100644
index 0000000000000000000000000000000000000000..d6f5483d03007fe1610b3c23f2eb22ff63605755
--- /dev/null
+++ b/php/Admin.php
@@ -0,0 +1,83 @@
+<?php declare(strict_types=1);
+
+require_once 'Page.php';
+require_once 'constants.php';
+
+class Admin extends Page
+{
+    private const FILE_NAME = "fileName";
+
+    protected function __construct()
+    {
+        parent::__construct();
+
+        session_start();
+
+        /*if (isset($_SESSION['EXPIRES']) && (time() - $_SESSION['EXPIRES'] > 3600)) {
+            session_unset();
+            session_destroy();
+            header("Location: login.php");
+        } else {
+            header("Location: login.php");   
+        }*/
+    }
+
+    public function __destruct()
+    {
+        parent::__destruct();
+    }
+
+    protected function getViewData():array
+    {
+		return array();
+    }
+
+    protected function generateView():void
+    {
+		$data = $this->getViewData();
+        $this->generatePageHeader('NASA Admin');
+
+        $fileName = self::FILE_NAME;
+        
+        echo <<<EOT
+<header class="admin-header"><h1>Admin-Page</h1></header>
+
+<form class="admin-form" action="Admin.php" method="post" accept-charset="UTF-8">
+    <fieldset>
+        <legend>Select a News file</legend>
+        <input id="$fileName" name="$fileName" type="file" accept=".json" required />
+        <input type="submit" value="Apply" />
+    </fieldset>
+</form>  
+EOT;
+
+        $this->generatePageFooter();
+    }
+
+    protected function processReceivedData():void
+    {
+        parent::processReceivedData();
+
+        if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+            if (isset($_POST[self::FILE_NAME])) {
+                $_SESSION[NEWS_FILE] = $_POST[self::FILE_NAME]; 
+                header("Location: ../index.php");
+                die();
+            }  
+        }
+    }
+
+    public static function main():void
+    {
+        try {
+            $page = new Admin();
+            $page->processReceivedData();
+            $page->generateView();
+        } catch (Exception $e) {
+            header("Content-type: text/html; charset=UTF-8");
+            echo $e->getMessage();
+        }
+    }
+}
+
+Admin::main();
\ No newline at end of file
diff --git a/php/Index.php b/php/Index.php
new file mode 100644
index 0000000000000000000000000000000000000000..3cb41103e90ba0c12a56b86d7b409203c2450930
--- /dev/null
+++ b/php/Index.php
@@ -0,0 +1,261 @@
+<?php declare(strict_types=1);
+
+require_once 'Page.php';
+require_once 'constants.php';
+
+class Index extends Page {
+
+    protected function __construct()
+    {
+        parent::__construct();
+
+        session_start();
+    }
+
+    public function __destruct()
+    {
+        parent::__destruct();
+    }
+
+    protected function getViewData():array
+    {
+		return array();
+    }
+
+    protected function generateView():void
+    {
+		$data = $this->getViewData();
+        $this->generatePageHeader('NASA');
+
+        $news = $this->fetchNews();
+        
+        echo <<<EOT
+<header class="nasa-header">
+<img class="nasa-img" src="img/nasa.png" alt="" />
+
+<nav>
+    <ul class="top-nav">
+        <li><a href="#">Missions</a></li>
+        <li><a href="#">Galleries</a></li>
+        <li><a href="#">NASA TV</a></li>
+        <li><a href="#">Follow NASA</a></li>
+        <li><a href="#">Downloads</a></li>
+        <li><a href="#">About</a></li>
+        <li><a href="#">NASA Audiences</a></li>
+        <li>
+            <form class="search-form" method="post" accept-charset="UTF-8">
+                <input type="search" placeholder="Search" />
+                <input type="button" value="" />
+            </form>
+        </li>
+        <li><img src="img/share_icon.png" alt="" /></li>
+        <li class="admin-button"><a href="php/admin.php">Admin</a></li>
+    </ul>
+
+    <ul class="center-nav">
+        <li><a href="#">International Space Station</a></li>
+        <li><a href="#">Journey to Mars</a></li>
+        <li><a href="#">Earth</a></li>
+        <li><a href="#">Technology</a></li>
+        <li><a href="#">Aeronautics</a></li>
+        <li><a href="#">Solar System and Beyond</a></li>
+        <li><a href="#">Education</a></li>
+        <li><a href="#">History</a></li>
+        <li><a href="#">Benefits to You</a></li>
+    </ul>
+</nav>
+</header>
+
+<main>
+    <article class="content-large">
+        <div>
+            <div class="article-content-container">
+                <a class="article-link" href="#"></a>
+
+                <img id="slide-image" class="article-image" src="img/nasa_news_1.jpg"  alt="" />
+
+                <div class="article-content">
+                    <div id="slide-container" class="news-headline">
+                        <h3>Space Station</h3>
+                        <h2>Expedition 48 Crew Lands Safely on Earth</h2>
+                    </div>
+
+                    <div class="camera-triangle"></div>
+                    <img class="camera-img" src="img/camera.png" alt="" />
+                </div>
+            </div>
+        </div>
+    </article>
+    <article class="content-small">
+        <div>
+            <div class="article-content-container">
+                <a class="article-link" href="#"></a>
+
+                <div class="article-content nasa-events-container">
+                    <div class="nasa-events-top">
+EOT;
+        $news = $newsList[0];
+
+        $title = htmlspecialchars($news["title"]);
+        $imageurl = htmlspecialchars($news["imgurl"]);
+        $content = htmlspecialchars($news["content"]);
+        
+        echo <<<EOT
+                        <p class="nasa-events-title">$title</p>
+
+                        <div class="line"></div>
+
+                        <a class="nasa-event" href="#">$content</a>
+                    </div>
+
+                    <div class="nasa-events-bottom">
+                        <div class="line"></div>
+                    
+                        <div class="nasa-events-bottom-horizontal">
+                            <a href="#">Calendar</a>
+                            <a href="#">Launches and Landings</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </article>
+
+    <article class="content-small">
+        <div>
+            <div class="article-content-container">
+EOT;
+        $news = $newsList[1];
+
+        $title = htmlspecialchars($news["title"]);
+        $imageurl = htmlspecialchars($news["imgurl"]);
+        $content = htmlspecialchars($news["content"]);
+        
+        echo <<<EOT
+
+                <a class="article-link" href="#"></a>  
+
+                <img class="article-image" src="$imageurl" alt="" />
+
+                <div class="article-content overlay">
+                    <h4 class="overlay-title">$title</h4>
+                    <h4 class="overlay-description">$content</h4>
+                </div>
+            </div>
+        </div>
+    </article>
+    <article class="content-medium">
+        <div>
+            <div class="article-content-container">
+EOT;
+        $news = $newsList[0];
+
+        $title = htmlspecialchars($news["title"]);
+        $imageurl = htmlspecialchars($news["imgurl"]);
+        $content = htmlspecialchars($news["content"]);
+        
+        echo <<<EOT
+
+                <a class="article-link" href="#"></a>  
+
+                <img class="article-half-image" src="$imageurl" alt="" />
+
+                <div class="article-triangle"></div>
+
+                <div class="article-content-second-half nasa-launch">
+                    <h4>$title</h4>
+
+                    <p>$content</p>
+
+                    <div class="nasa-launch-links">
+                        <a href="#">Mission Site</a>
+                        <a href="#">Briefing Schedule</a>
+                        <a href="#">Launch Updates</a>
+                        <a href="#">Video to Bennu and Back</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </article>
+    <article class="content-small">
+        <div>
+            <div class="article-content-container">
+                <a class="article-link" href="#"></a>
+
+                <div class="article-content">
+                    <iframe src="https://www.youtube.com/embed/XY6idnRlPsU?si=HnFL8-if6-zB6tU2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+                </div>
+            </div>
+        </div>
+    </article>
+    <article class="content-medium">
+        <div>
+            <div class="article-content-container">
+                <a class="article-link" href="#"></a>  
+
+                <img class="article-image" src="img/ocean_worlds.jpg" alt="" />
+            </div>
+        </div>
+    </article>
+    <article class="content-small">
+        <div>
+            <div class="article-content-container">
+                <a class="article-link" href="#"></a> 
+
+                <img class="article-image article-image-full" src="img/tweet.png" alt="" />
+            </div>
+        </div>
+    </article>
+</main>
+EOT;
+
+        $this->generatePageFooter();
+    }
+
+    protected function processReceivedData():void
+    {
+        parent::processReceivedData();
+
+        if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+            if (isset($_POST[self::FILE_NAME])) {
+                $_SESSION[NEWS_FILE] = $_POST[self::FILE_NAME]; 
+                header("Location: ../index.php");
+                die();
+            }  
+        }
+    }
+
+    private function fetchNews(): array {
+        $file = DEFAULT_NEWS_FILE;
+
+        if (isset($_SESSION[NEWS_FILE]))
+            $file = $_SESSION[NEWS_FILE]
+
+        if (!file_exists($file)) {
+            die("File not found");
+        }
+
+        $fileContents = file_get_contents('data/news_01.json');
+
+        if ($fileContents === NULL)
+            return;
+
+        $json = json_decode($fileContents, true);
+
+        return $json["news"];
+    }
+
+    public static function main():void
+    {
+        try {
+            $page = new Index();
+            $page->processReceivedData();
+            $page->generateView();
+        } catch (Exception $e) {
+            header("Content-type: text/html; charset=UTF-8");
+            echo $e->getMessage();
+        }
+    }  
+}
+
+Index::main();
\ No newline at end of file
diff --git a/php/Page.php b/php/Page.php
new file mode 100644
index 0000000000000000000000000000000000000000..d2f31a58004146be6a19f9e2c0968b7ea7a52588
--- /dev/null
+++ b/php/Page.php
@@ -0,0 +1,68 @@
+<?php declare(strict_types=1);
+
+abstract class Page {
+
+    protected mysqli $database;
+
+    protected function __construct() {
+        return;
+
+        error_reporting(E_ALL);
+
+        $host = "localhost";
+
+        /********************************************/
+        // This code switches from the the local installation (XAMPP) to the docker installation 
+        if (gethostbyname('mariadb') != "mariadb") { // mariadb is known?
+            $host = "mariadb";
+        }
+        /********************************************/
+
+        $this->database = new mysqli("localhost","my_user","my_password","my_db");
+
+        // Check connection
+        if ($this->database->connect_errno) {
+          echo "Failed to connect to MySQL: " . $mysqli -> connect_error;
+          exit();
+        }
+
+        // set charset to UTF8!!
+        if (!$this->database->set_charset("utf8")) {
+            throw new Exception($this->_database->error);
+        }
+    }  
+    
+    protected function __destruct() {
+
+    }
+
+    protected function generatePageHeader(string $title = ""):void
+    {
+        $title = htmlspecialchars($title);
+        header("Content-type: text/html; charset=UTF-8");
+        
+        echo <<<EOT
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <title>$title</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" style="text/css" href="../styles.css" />
+</head>
+<body>\n
+EOT;
+    }
+
+    protected function generatePageFooter():void
+    {
+        echo <<<EOT
+</body>
+</html>
+EOT;
+    }
+
+    protected function processReceivedData():void {
+
+    }
+}
\ No newline at end of file
diff --git a/php/constants.php b/php/constants.php
new file mode 100644
index 0000000000000000000000000000000000000000..6cf2f45ffddc16e51dd9dac3939be4d6513368b4
--- /dev/null
+++ b/php/constants.php
@@ -0,0 +1,4 @@
+<?php
+    define("NEWS_FILE", "news_file");
+    define("DEFAULT_NEWS_FILE", "data/news_01.json");
+?>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 46a075e14fb496662991b910c49bf4feab1813da..b3f742d4ffe617b7368c0f04e0e4e8152b4baf6e 100644
--- a/styles.css
+++ b/styles.css
@@ -1,7 +1,6 @@
 * {
     font-family: Verdana, Geneva, Tahoma, sans-serif;
     box-sizing: border-box;
-    color: #eeeeee;
 }
 
 body, html {
@@ -10,12 +9,20 @@ body, html {
     width: 100%;
 }
 
-body {
+a {
+    text-decoration: none;
+}
+
+.nasa-body {
     position: relative;
     background-color: #050914;
 }
 
-header {
+.nasa-body * {
+    color: #eeeeee; 
+}
+
+.nasa-header {
     position: sticky;
     top: 0;
     z-index: 1;
@@ -25,17 +32,13 @@ header {
     background-size: auto 100%;
 }
 
-a {
-    text-decoration: none;
-}
-
-nav ul {
+.top-nav ul, .center-nav ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
 
-nav ul li a {
+.top-nav ul li a, .center-nav ul li a  {
     text-decoration: none;
 }
 
@@ -414,6 +417,40 @@ main {
     height: 100%;
 }
 
+/* admin.html Page */
+
+.admin-header {
+    text-align: center;
+}
+
+.admin-header > h1 {
+    font-size: 1.5rem;
+}
+
+.admin-form {
+    text-align: center;
+}
+
+.admin-form > fieldset {
+    font-size: 1rem;
+    display: inline;
+}
+
+.admin-form input[type="submit"]  {
+    background-color: lightgray;
+    cursor: pointer;
+    font-size: 0.8rem;
+    padding: 0.5rem;
+    border-radius: 0.1rem;
+}
+
+.admin-form input[type=file]::file-selector-button {
+    padding: 0.5em;
+    font-size: 0.8rem;
+    border-radius: 0.1em;
+    background-color: lightgray;
+}
+
 
 /*.content-small div div, .content-medium div div, .content-large div div {
     background-color: blue;