From fa666efaf8141598e6cc32740035af02fe91f322 Mon Sep 17 00:00:00 2001
From: Jonas Hinterdorfer <j.hinterdorfer@HTBLALeonding.onmicrosoft.com>
Date: Wed, 14 May 2025 12:52:11 +0200
Subject: [PATCH] implemented new design

---
 .../java/at/ionas999/questioncatalog/App.java |  19 +--
 .../controller/ViewController.java            |   1 +
 .../ionas999/questioncatalog/answerText.fxml  |  84 +++++++++----
 .../at/ionas999/questioncatalog/main.fxml     |  93 +++++++++++---
 .../at/ionas999/questioncatalog/test.fxml     | 119 +++++++++++++-----
 .../at/ionas999/questioncatalog/upload.fxml   |  70 +++++++----
 .../at/ionas999/questioncatalog/view.fxml     |  91 +++++++++-----
 7 files changed, 340 insertions(+), 137 deletions(-)

diff --git a/src/main/java/at/ionas999/questioncatalog/App.java b/src/main/java/at/ionas999/questioncatalog/App.java
index 17a1ade..5be1de3 100644
--- a/src/main/java/at/ionas999/questioncatalog/App.java
+++ b/src/main/java/at/ionas999/questioncatalog/App.java
@@ -13,15 +13,16 @@ import java.io.IOException;
 
 public class App extends Application {
     // Der gesamte fxml code wurde mithilfe des Github Copilotes generiert
-    @Override
-    public void start(Stage stage) throws IOException {
-        Application.setUserAgentStylesheet(new CupertinoLight().getUserAgentStylesheet());
-        FXMLLoader fxmlLoader = new FXMLLoader(App.class.getResource("main.fxml"));
-        Scene scene = new Scene(fxmlLoader.load(), 320, 240);
-        stage.setTitle("Question Catalog");
-        stage.setScene(scene);
-        stage.show();
-    }
+@Override
+public void start(Stage stage) throws IOException {
+    Application.setUserAgentStylesheet(new CupertinoLight().getUserAgentStylesheet());
+    FXMLLoader fxmlLoader = new FXMLLoader(App.class.getResource("main.fxml"));
+    Scene scene = new Scene(fxmlLoader.load());
+    stage.setTitle("Question Catalog");
+    stage.setScene(scene);
+    stage.setMaximized(true);
+    stage.show();
+}
 
     public static void main(String[] args) {
         launch();
diff --git a/src/main/java/at/ionas999/questioncatalog/controller/ViewController.java b/src/main/java/at/ionas999/questioncatalog/controller/ViewController.java
index 8045eae..0642441 100644
--- a/src/main/java/at/ionas999/questioncatalog/controller/ViewController.java
+++ b/src/main/java/at/ionas999/questioncatalog/controller/ViewController.java
@@ -16,6 +16,7 @@ import javafx.collections.transformation.FilteredList;
 import javafx.event.ActionEvent;
 import javafx.fxml.FXML;
 import javafx.scene.control.*;
+import javafx.scene.input.KeyCode;
 import javafx.stage.Stage;
 
 import java.io.IOException;
diff --git a/src/main/resources/at/ionas999/questioncatalog/answerText.fxml b/src/main/resources/at/ionas999/questioncatalog/answerText.fxml
index d5d07e1..85445c9 100644
--- a/src/main/resources/at/ionas999/questioncatalog/answerText.fxml
+++ b/src/main/resources/at/ionas999/questioncatalog/answerText.fxml
@@ -1,39 +1,77 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
+<?import javafx.scene.effect.DropShadow?>
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.text.Font?>
 
-<AnchorPane xmlns="http://javafx.com/javafx"
+<BorderPane xmlns="http://javafx.com/javafx"
             xmlns:fx="http://javafx.com/fxml"
-            prefWidth="600.0" prefHeight="400.0"
+            prefWidth="700.0" prefHeight="500.0"
+            style="-fx-font-family: 'Segoe UI'; -fx-background-color: #f4f4f4;"
             fx:controller="at.ionas999.questioncatalog.controller.AnswerTextController">
-    <children>
-        <VBox spacing="20" alignment="CENTER">
-            <Label fx:id="questionLabel" text="Here goes your question" style="-fx-font-size: 18;"/>
+            
+    <top>
+        <StackPane style="-fx-background-color: linear-gradient(to right, #798a7c, #798a7c);">
+            <effect>
+                <DropShadow color="#00000080" radius="5" spread="0.05" />
+            </effect>
+            
+            <VBox alignment="CENTER" spacing="10" style="-fx-padding: 18 20 14 20;">
+                <Label text="LEARN MODE" style="-fx-font-size: 16; -fx-font-weight: bold; -fx-text-fill: #E0F2E0;">
+                    <font>
+                        <Font name="System Bold" />
+                    </font>
+                </Label>
+                <Label text="Practice your knowledge" style="-fx-font-size: 24; -fx-text-fill: white; -fx-font-weight: bold;">
+                    <font>
+                        <Font name="System Bold" />
+                    </font>
+                </Label>
+                
+                <ComboBox fx:id="selectBox" promptText="Select a Catalog" style="-fx-background-color: white;"/>
+                
+                <Separator style="-fx-opacity: 0.5;">
+                    <VBox.margin>
+                        <Insets top="5" />
+                    </VBox.margin>
+                </Separator>
+            </VBox>
+        </StackPane>
+    </top>
 
-            <!-- User Input Box -->
-            <TextArea fx:id="userAnswerArea" promptText="Enter your answer here..." wrapText="true" prefHeight="100.0"
-                      prefWidth="300.0"/>
+    <center>
+        <VBox spacing="20" alignment="CENTER" style="-fx-padding: 20;">
+            <Label fx:id="questionLabel" text="Here goes your question" style="-fx-font-size: 18; -fx-font-weight: bold;"/>
+
+            <TextArea fx:id="userAnswerArea" promptText="Enter your answer here..." wrapText="true" 
+                      prefHeight="100.0" style="-fx-background-color: white; -fx-border-color: #bdc3c7;"/>
 
             <HBox spacing="10" alignment="CENTER">
-                <Button text="Show Answer" disable="true" fx:id="showAnswerBtn" onAction="#onShowAnwerBtnClick"/>
-                <Button text="Skip" disable="true" fx:id="skipBtn" onAction="#onSkipBtnClick"/>
+                <Button text="Show Answer" disable="true" fx:id="showAnswerBtn" onAction="#onShowAnwerBtnClick"
+                        style="-fx-background-color: #798a7c; -fx-text-fill: white;"/>
+                <Button text="Skip" disable="true" fx:id="skipBtn" onAction="#onSkipBtnClick"
+                        style="-fx-background-color: #798a7c; -fx-text-fill: white;"/>
             </HBox>
 
-            <VBox spacing="10" alignment="CENTER">
-                <Label text="Predefined Answer:" style="-fx-font-size: 14;"/>
-                <TextArea fx:id="predefinedAnswerArea" editable="false" wrapText="true" prefHeight="100.0"
-                          prefWidth="300.0"/>
+            <VBox spacing="10" alignment="CENTER" style="-fx-padding: 10; -fx-background-color: #ecf0f1;">
+                <Label text="Predefined Answer:" style="-fx-font-size: 14; -fx-font-weight: bold;"/>
+                <TextArea fx:id="predefinedAnswerArea" editable="false" wrapText="true" 
+                          prefHeight="100.0" style="-fx-background-color: white; -fx-border-color: #bdc3c7;"/>
                 <HBox spacing="10" alignment="CENTER">
-                    <Button text="Correct" disable="true" fx:id="correctBtn" onAction="#onCorrectBtnClick"/>
-                    <Button text="Incorrect" disable="true" fx:id="incorrectBtn" onAction="#onIncorrectBtnClick"/>
+                    <Button text="Correct" disable="true" fx:id="correctBtn" onAction="#onCorrectBtnClick"
+                            style="-fx-background-color: #27ae60; -fx-text-fill: white;"/>
+                    <Button text="Incorrect" disable="true" fx:id="incorrectBtn" onAction="#onIncorrectBtnClick"
+                            style="-fx-background-color: #e74c3c; -fx-text-fill: white;"/>
                 </HBox>
             </VBox>
         </VBox>
-        <HBox alignment="TOP_RIGHT" spacing="10.0" AnchorPane.topAnchor="10.0" AnchorPane.rightAnchor="10.0">
-            <ComboBox fx:id="selectBox" promptText="Select a Catalog"/>
+    </center>
+    
+    <bottom>
+        <HBox alignment="CENTER_RIGHT" spacing="15" style="-fx-padding: 10; -fx-background-color: #bdc3c7;">
+            <Button text="Back to Main Page" onAction="#onBackToMainPageClick" 
+                    style="-fx-background-color: #34495e; -fx-text-fill: white;"/>
         </HBox>
-        <!-- Back to Main Page Button -->
-        <Button text="Back to Main Page" onAction="#onBackToMainPageClick"
-                AnchorPane.bottomAnchor="10.0" AnchorPane.rightAnchor="10.0"/>
-    </children>
-</AnchorPane>
\ No newline at end of file
+    </bottom>
+</BorderPane>
diff --git a/src/main/resources/at/ionas999/questioncatalog/main.fxml b/src/main/resources/at/ionas999/questioncatalog/main.fxml
index 1487b55..9b52f01 100644
--- a/src/main/resources/at/ionas999/questioncatalog/main.fxml
+++ b/src/main/resources/at/ionas999/questioncatalog/main.fxml
@@ -1,18 +1,81 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
-<?import javafx.scene.control.Button?>
-<?import javafx.scene.control.Label?>
-<?import javafx.scene.layout.VBox?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.effect.DropShadow?>
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.text.Font?>
 
-<VBox alignment="CENTER" spacing="20.0"
-      xmlns="http://javafx.com/javafx"
-      xmlns:fx="http://javafx.com/fxml"
-      fx:controller="at.ionas999.questioncatalog.controller.MainController">
-    <Label text="Question Catalog" style="-fx-font-size: 24px; -fx-font-weight: bold;" />
-    <VBox spacing="10.0" alignment="CENTER">
-        <Button text="Add New" onAction="#addNewBtnClick" prefWidth="150" />
-        <Button text="View" onAction="#viewBtnClick" prefWidth="149" />
-        <Button text="Learn" onAction="#learnBtnClick" prefWidth="150" />
-        <Button text="Test" onAction="#testBtnClick" prefWidth="150" />
-    </VBox>
-</VBox>
\ No newline at end of file
+<BorderPane xmlns="http://javafx.com/javafx"
+           xmlns:fx="http://javafx.com/fxml"
+           fx:controller="at.ionas999.questioncatalog.controller.MainController"
+           style="-fx-font-family: 'Segoe UI'; -fx-background-color: #f4f4f4;"
+           prefHeight="500.0" prefWidth="700.0">
+
+    <top>
+        <StackPane style="-fx-background-color: linear-gradient(to right, #798a7c, #798a7c);">
+            <effect>
+                <DropShadow color="#00000080" radius="5" spread="0.05" />
+            </effect>
+            
+            <VBox alignment="CENTER" spacing="10" style="-fx-padding: 18 20 14 20;">
+                <Label text="QUESTION CATALOG" style="-fx-font-size: 16; -fx-font-weight: bold; -fx-text-fill: #E0F2E0;">
+                    <font>
+                        <Font name="System Bold" />
+                    </font>
+                </Label>
+                <Label text="Study with ease" style="-fx-font-size: 24; -fx-text-fill: white; -fx-font-weight: bold;">
+                    <font>
+                        <Font name="System Bold" />
+                    </font>
+                </Label>
+                <Separator style="-fx-opacity: 0.5;">
+                    <VBox.margin>
+                        <Insets top="5" />
+                    </VBox.margin>
+                </Separator>
+            </VBox>
+        </StackPane>
+    </top>
+    
+    <center>
+        <VBox alignment="CENTER" spacing="30.0" style="-fx-padding: 30;">
+            <VBox spacing="20.0" alignment="CENTER" maxWidth="350">
+                <Button text="Add New Questions" onAction="#addNewBtnClick" 
+                        style="-fx-font-size: 16px; -fx-background-color: #798a7c; -fx-text-fill: white;" 
+                        maxWidth="Infinity" prefHeight="45">
+                    <effect>
+                        <DropShadow color="#00000040" radius="3" spread="0.02" />
+                    </effect>
+                </Button>
+                <Button text="View Questions" onAction="#viewBtnClick" 
+                        style="-fx-font-size: 16px; -fx-background-color: #798a7c; -fx-text-fill: white;" 
+                        maxWidth="Infinity" prefHeight="45">
+                    <effect>
+                        <DropShadow color="#00000040" radius="3" spread="0.02" />
+                    </effect>
+                </Button>
+                <Button text="Learn Mode" onAction="#learnBtnClick" 
+                        style="-fx-font-size: 16px; -fx-background-color: #798a7c; -fx-text-fill: white;" 
+                        maxWidth="Infinity" prefHeight="45">
+                    <effect>
+                        <DropShadow color="#00000040" radius="3" spread="0.02" />
+                    </effect>
+                </Button>
+                <Button text="Test Mode" onAction="#testBtnClick" 
+                        style="-fx-font-size: 16px; -fx-background-color: #798a7c; -fx-text-fill: white;" 
+                        maxWidth="Infinity" prefHeight="45">
+                    <effect>
+                        <DropShadow color="#00000040" radius="3" spread="0.02" />
+                    </effect>
+                </Button>
+            </VBox>
+        </VBox>
+    </center>
+    
+    <bottom>
+        <HBox alignment="CENTER" spacing="10.0" style="-fx-padding: 10; -fx-background-color: #bdc3c7;">
+            <Label text="Question Catalog Application" style="-fx-font-size: 12px; -fx-text-fill: #555;" />
+        </HBox>
+    </bottom>
+</BorderPane>
diff --git a/src/main/resources/at/ionas999/questioncatalog/test.fxml b/src/main/resources/at/ionas999/questioncatalog/test.fxml
index 76762d5..226cb5b 100644
--- a/src/main/resources/at/ionas999/questioncatalog/test.fxml
+++ b/src/main/resources/at/ionas999/questioncatalog/test.fxml
@@ -1,45 +1,98 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
+<?import javafx.scene.effect.DropShadow?>
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.text.Font?>
 
-<AnchorPane xmlns="http://javafx.com/javafx"
+<BorderPane xmlns="http://javafx.com/javafx"
             xmlns:fx="http://javafx.com/fxml"
-            prefWidth="600.0" prefHeight="400.0"
+            prefWidth="700.0" prefHeight="500.0"
+            style="-fx-font-family: 'Segoe UI'; -fx-background-color: #f4f4f4;"
             fx:controller="at.ionas999.questioncatalog.controller.TestController">
-    <VBox spacing="20" alignment="CENTER" AnchorPane.topAnchor="10.0" AnchorPane.leftAnchor="10.0"
-          AnchorPane.rightAnchor="10.0">
-        <!-- Start Test Button -->
-        <Button text="Start Test" fx:id="startBtn" onAction="#onStartTestBtnClick"/>
-        <!-- Slider and Input Box -->
-        <HBox spacing="10" alignment="CENTER">
-            <Label text="Number of Questions:"/>
-            <TextField fx:id="questionCountField" promptText="Enter amount"/>
-            <Slider fx:id="questionSlider" min="1" max="10" showTickLabels="true" showTickMarks="true"/>
-            <ComboBox fx:id="catalogComboBox" promptText="Choose a catalog"/>
-        </HBox>
+            
+    <top>
+        <StackPane style="-fx-background-color: linear-gradient(to right, #798a7c, #798a7c);">
+            <effect>
+                <DropShadow color="#00000080" radius="5" spread="0.05" />
+            </effect>
+            
+            <VBox alignment="CENTER" spacing="10" style="-fx-padding: 18 20 14 20;">
+                <Label text="TEST MODE" style="-fx-font-size: 16; -fx-font-weight: bold; -fx-text-fill: #E0F2E0;">
+                    <font>
+                        <Font name="System Bold" />
+                    </font>
+                </Label>
+                <Label text="Evaluate your knowledge" style="-fx-font-size: 24; -fx-text-fill: white; -fx-font-weight: bold;">
+                    <font>
+                        <Font name="System Bold" />
+                    </font>
+                </Label>
+                
+                <ComboBox fx:id="catalogComboBox" promptText="Select a Catalog" style="-fx-background-color: white;"/>
+                
+                <Separator style="-fx-opacity: 0.5;">
+                    <VBox.margin>
+                        <Insets top="5" />
+                    </VBox.margin>
+                </Separator>
+            </VBox>
+        </StackPane>
+    </top>
 
-        <!-- Question Display -->
-        <Label fx:id="questionLabel" text="Question will appear here" style="-fx-font-size: 18;"/>
+    <center>
+        <VBox spacing="20" alignment="CENTER" style="-fx-padding: 20;">
+            <!-- Start Test Button -->
+            <Button text="Start Test" fx:id="startBtn" onAction="#onStartTestBtnClick"
+                    style="-fx-background-color: #798a7c; -fx-text-fill: white; -fx-font-size: 14;"/>
+                    
+            <!-- Slider and Input Box -->
+            <HBox spacing="15" alignment="CENTER" style="-fx-padding: 10; -fx-background-color: #ecf0f1;">
+                <padding>
+                    <Insets top="10" right="10" bottom="10" left="10" />
+                </padding>
+                <Label text="Number of Questions:" style="-fx-font-weight: bold;"/>
+                <TextField fx:id="questionCountField" promptText="Enter amount" prefWidth="80" 
+                           style="-fx-background-color: white; -fx-border-color: #bdc3c7;"/>
+                <Slider fx:id="questionSlider" min="1" max="10" showTickLabels="true" showTickMarks="true" prefWidth="150"/>
+            </HBox>
 
-        <!-- User Input Box -->
-        <TextArea fx:id="userAnswerArea" promptText="Enter your answer here..." wrapText="true" prefHeight="100.0"
-                  prefWidth="300.0"/>
+            <!-- Question Display -->
+            <Label fx:id="questionLabel" text="Question will appear here" 
+                   style="-fx-font-size: 18; -fx-font-weight: bold;"/>
 
-        <Button text="Next Question" fx:id="nextQuestionBtn" onAction="#showNextQuestion"/>
+            <!-- User Input Box -->
+            <TextArea fx:id="userAnswerArea" promptText="Enter your answer here..." wrapText="true" 
+                      prefHeight="100.0" style="-fx-background-color: white; -fx-border-color: #bdc3c7;"/>
 
-        <!-- Correct Answer Display -->
-        <VBox spacing="10" alignment="CENTER">
-            <Label text="Correct Answer:" fx:id="correctAnswerLable" style="-fx-font-size: 14;"/>
-            <TextArea fx:id="correctAnswerArea" editable="false" wrapText="true" prefHeight="100.0"
-                      prefWidth="300.0"/>
+            <Button text="Next Question" fx:id="nextQuestionBtn" onAction="#showNextQuestion"
+                    style="-fx-background-color: #798a7c; -fx-text-fill: white;"/>
+
+            <!-- Correct Answer Display -->
+            <VBox spacing="10" alignment="CENTER" style="-fx-padding: 10; -fx-background-color: #ecf0f1;">
+                <Label text="Correct Answer:" fx:id="correctAnswerLable" 
+                       style="-fx-font-size: 14; -fx-font-weight: bold;"/>
+                <TextArea fx:id="correctAnswerArea" editable="false" wrapText="true" 
+                          prefHeight="100.0" style="-fx-background-color: white; -fx-border-color: #bdc3c7;"/>
+                
+                <!-- Correct and Incorrect Buttons -->
+                <HBox spacing="10" alignment="CENTER">
+                    <padding>
+                        <Insets top="10" />
+                    </padding>
+                    <Button text="Correct" fx:id="correctBtn" onAction="#onCorrectBtnClick"
+                            style="-fx-background-color: #27ae60; -fx-text-fill: white;"/>
+                    <Button text="Incorrect" fx:id="incorrectBtn" onAction="#onIncorrectBtnClick"
+                            style="-fx-background-color: #e74c3c; -fx-text-fill: white;"/>
+                </HBox>
+            </VBox>
         </VBox>
-
-        <!-- Correct and Incorrect Buttons -->
-        <HBox spacing="10" alignment="CENTER">
-            <Button text="Correct" fx:id="correctBtn" onAction="#onCorrectBtnClick"/>
-            <Button text="Incorrect" fx:id="incorrectBtn" onAction="#onIncorrectBtnClick"/>
+    </center>
+    
+    <bottom>
+        <HBox alignment="CENTER_RIGHT" spacing="15" style="-fx-padding: 10; -fx-background-color: #bdc3c7;">
+            <Button text="Back to Main Page" onAction="#onBackToMainPageClick" 
+                    style="-fx-background-color: #34495e; -fx-text-fill: white;"/>
         </HBox>
-    </VBox>
-    <Button text="Back to Main Page" onAction="#onBackToMainPageClick"
-            AnchorPane.bottomAnchor="10.0" AnchorPane.rightAnchor="10.0"/>
-</AnchorPane>
\ No newline at end of file
+    </bottom>
+</BorderPane>
diff --git a/src/main/resources/at/ionas999/questioncatalog/upload.fxml b/src/main/resources/at/ionas999/questioncatalog/upload.fxml
index f05fdc0..f680e9b 100644
--- a/src/main/resources/at/ionas999/questioncatalog/upload.fxml
+++ b/src/main/resources/at/ionas999/questioncatalog/upload.fxml
@@ -2,49 +2,65 @@
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
+<?import javafx.scene.text.Font?>
+<?import javafx.scene.effect.DropShadow?>
 
 <BorderPane xmlns="http://javafx.com/javafx"
             xmlns:fx="http://javafx.com/fxml"
             fx:controller="at.ionas999.questioncatalog.controller.UploadController"
-            prefHeight="400.0" prefWidth="600.0">
+            prefHeight="500.0" prefWidth="700.0"
+            style="-fx-font-family: 'Segoe UI'; -fx-background-color: #f4f4f4;">
 
     <top>
-        <Label text="Upload Questions" style="-fx-font-size: 20; -fx-padding: 10;">
-            <BorderPane.margin>
-                <Insets bottom="10"/>
-            </BorderPane.margin>
-        </Label>
+        <StackPane style="-fx-background-color: linear-gradient(to right, #798a7c, #798a7c);">
+            <effect>
+                <DropShadow color="#00000080" radius="5" spread="0.05" />
+            </effect>
+            
+            <VBox alignment="CENTER" spacing="10" style="-fx-padding: 18 20 14 20;">
+                <Label text="UPLOAD QUESTIONS" style="-fx-font-size: 16; -fx-font-weight: bold; -fx-text-fill: #E0F2E0;">
+                    <font>
+                        <Font name="System Bold" />
+                    </font>
+                </Label>
+                <Label text="Import and manage your question catalogs" style="-fx-font-size: 24; -fx-text-fill: white; -fx-font-weight: bold;">
+                    <font>
+                        <Font name="System Bold" />
+                    </font>
+                </Label>
+                <Separator style="-fx-opacity: 0.5;">
+                    <VBox.margin>
+                        <Insets top="5" />
+                    </VBox.margin>
+                </Separator>
+            </VBox>
+        </StackPane>
     </top>
 
     <left>
-        <VBox spacing="10" prefWidth="200">
-            <padding>
-                <Insets top="10" right="10" bottom="10" left="10"/>
-            </padding>
-            <Label text="Select Catalog:"/>
-            <ListView fx:id="catalogListViw" VBox.vgrow="ALWAYS"/>
-            <HBox spacing="5">
-                <TextField fx:id="newCatalogField" promptText="New Catalog Name" HBox.hgrow="ALWAYS"/>
-                <Button fx:id="addCatalogButton" text="+" onAction="#onAddNewCatalogBtnClick"/>
-                <Button fx:id="deleteCatalogButton" text="-" onAction="#onDeleteCatalogBtnClick"/>
+        <VBox spacing="15" prefWidth="250" style="-fx-background-color: #ecf0f1; -fx-padding: 15;">
+            <Label text="Select Catalog:" style="-fx-font-size: 14; -fx-font-weight: bold;"/>
+            <ListView fx:id="catalogListViw" VBox.vgrow="ALWAYS" style="-fx-background-color: white; -fx-border-color: #bdc3c7;"/>
+            <HBox spacing="10">
+                <TextField fx:id="newCatalogField" promptText="New Catalog Name" HBox.hgrow="ALWAYS" style="-fx-background-color: white;"/>
+                <Button fx:id="addCatalogButton" text="+" onAction="#onAddNewCatalogBtnClick" style="-fx-background-color: #27ae60; -fx-text-fill: white;"/>
+                <Button fx:id="deleteCatalogButton" text="-" onAction="#onDeleteCatalogBtnClick" style="-fx-background-color: #e74c3c; -fx-text-fill: white;"/>
             </HBox>
         </VBox>
     </left>
 
     <center>
-        <VBox spacing="10" alignment="TOP_CENTER">
-            <padding>
-                <Insets top="10" right="10" bottom="10" left="10"/>
-            </padding>
-            <Label text="Paste CSV Content Below:"/>
-            <Label text="without Header, this format: Question;Answer"/>
-            <TextArea fx:id="csvContentArea" promptText="Paste your CSV content here ... " prefHeight="200.0"/>
-            <Button fx:id="importButton" text="Import Questions" onAction="#onImportBtnClick"/>
+        <VBox spacing="15" alignment="TOP_CENTER" style="-fx-padding: 20;">
+            <Label text="Paste CSV Content Below:" style="-fx-font-size: 16; -fx-font-weight: bold;"/>
+            <Label text="Format: Question;Answer (without header)" style="-fx-font-size: 12; -fx-text-fill: #7f8c8d;"/>
+            <TextArea fx:id="csvContentArea" promptText="Paste your CSV content here..." prefHeight="250.0" style="-fx-background-color: white; -fx-border-color: #bdc3c7;"/>
+            <Button fx:id="importButton" text="Import Questions" onAction="#onImportBtnClick" style="-fx-background-color: #2980b9; -fx-text-fill: white; -fx-font-size: 14;"/>
         </VBox>
     </center>
+
     <bottom>
-        <HBox alignment="CENTER_RIGHT" spacing="10.0">
-            <Button text="Back to Main Page" onAction="#onBackToMainPageClick" />
+        <HBox alignment="CENTER_RIGHT" spacing="15" style="-fx-padding: 10; -fx-background-color: #bdc3c7;">
+            <Button text="Back to Main Page" onAction="#onBackToMainPageClick" style="-fx-background-color: #34495e; -fx-text-fill: white;"/>
         </HBox>
     </bottom>
-</BorderPane>
\ No newline at end of file
+</BorderPane>
diff --git a/src/main/resources/at/ionas999/questioncatalog/view.fxml b/src/main/resources/at/ionas999/questioncatalog/view.fxml
index ade699b..c6a8a96 100644
--- a/src/main/resources/at/ionas999/questioncatalog/view.fxml
+++ b/src/main/resources/at/ionas999/questioncatalog/view.fxml
@@ -1,46 +1,77 @@
 <?xml version="1.0" encoding="UTF-8"?>
-
 <?import javafx.geometry.*?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
+<?import javafx.scene.effect.DropShadow?>
+<?import javafx.scene.text.Font?>
 
-<BorderPane prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/17.0.12" xmlns:fx="http://javafx.com/fxml/1" fx:controller="at.ionas999.questioncatalog.controller.ViewController">
+<BorderPane xmlns="http://javafx.com/javafx" 
+            xmlns:fx="http://javafx.com/fxml"
+            prefHeight="500.0" prefWidth="700.0"
+            style="-fx-font-family: 'Segoe UI'; -fx-background-color: #f4f4f4;"
+            fx:controller="at.ionas999.questioncatalog.controller.ViewController">
 
     <top>
-        <HBox alignment="TOP_RIGHT" spacing="10.0">
-            <padding>
-                <Insets bottom="0.0" left="10.0" right="10.0" top="10.0" />
-            </padding>
-            <ComboBox fx:id="selectBox" promptText="Select an Catalog" />
-        </HBox>
+        <StackPane style="-fx-background-color: linear-gradient(to right, #798a7c, #798a7c);">
+            <effect>
+                <DropShadow color="#00000080" radius="5" spread="0.05" />
+            </effect>
+            
+            <VBox alignment="CENTER" spacing="10" style="-fx-padding: 18 20 14 20;">
+                <Label text="VIEW QUESTIONS" style="-fx-font-size: 16; -fx-font-weight: bold; -fx-text-fill: #E0F2E0;">
+                    <font>
+                        <Font name="System Bold" />
+                    </font>
+                </Label>
+                <Label text="Browse and edit your catalog" style="-fx-font-size: 24; -fx-text-fill: white; -fx-font-weight: bold;">
+                    <font>
+                        <Font name="System Bold" />
+                    </font>
+                </Label>
+                
+                <ComboBox fx:id="selectBox" promptText="Select a Catalog" style="-fx-background-color: white;"/>
+                
+                <Separator style="-fx-opacity: 0.5;">
+                    <VBox.margin>
+                        <Insets top="5" />
+                    </VBox.margin>
+                </Separator>
+            </VBox>
+        </StackPane>
     </top>
 
-  <left>
-      <VBox spacing="5.0" prefWidth="209.0">
-          <padding>
-              <Insets top="10.0" left="10.0" right="10.0" bottom="10.0" />
-          </padding>
-          <TextField fx:id="searchField" promptText="Search questions..." />
-          <ListView fx:id="questionListView" prefHeight="364.0" VBox.vgrow="ALWAYS" />
-      </VBox>
-  </left>
+    <left>
+        <VBox spacing="10" prefWidth="250" style="-fx-background-color: #ecf0f1; -fx-padding: 15;">
+            <Label text="Questions:" style="-fx-font-size: 14; -fx-font-weight: bold;"/>
+            <TextField fx:id="searchField" promptText="Search questions..." 
+                      style="-fx-background-color: white; -fx-border-color: #bdc3c7;"/>
+            <ListView fx:id="questionListView" VBox.vgrow="ALWAYS" 
+                     style="-fx-background-color: white; -fx-border-color: #bdc3c7;"/>
+        </VBox>
+    </left>
 
     <center>
-        <VBox spacing="10.0">
-            <padding>
-                <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
-            </padding>
-            <TextField fx:id="questionField" editable="false" />
-            <TextField fx:id="answerField" editable="false" promptText="Answer" />
+        <VBox spacing="15" style="-fx-padding: 20;">
+            <Label text="Question Details:" style="-fx-font-size: 16; -fx-font-weight: bold;"/>
+            <Label text="Question:" style="-fx-font-size: 14;"/>
+            <TextField fx:id="questionField" editable="false" 
+                      style="-fx-background-color: white; -fx-border-color: #bdc3c7;"/>
+            <Label text="Answer:" style="-fx-font-size: 14;"/>
+            <TextField fx:id="answerField" editable="false" 
+                      style="-fx-background-color: white; -fx-border-color: #bdc3c7;"/>
             <HBox alignment="BOTTOM_RIGHT" spacing="10.0">
-                <Button fx:id="deleteButton" onAction="#deleteQuestion" text="Delete" />
-                <Button fx:id="editButton" onAction="#editQuestion" text="Edit" />
+                <Button fx:id="deleteButton" onAction="#deleteQuestion" text="Delete" 
+                       style="-fx-background-color: #e74c3c; -fx-text-fill: white;"/>
+                <Button fx:id="editButton" onAction="#editQuestion" text="Edit" 
+                       style="-fx-background-color: #798a7c; -fx-text-fill: white;"/>
             </HBox>
         </VBox>
     </center>
-  <bottom>
-                <HBox alignment="CENTER_RIGHT" spacing="10.0">
-                    <Button text="Back to Main Page" onAction="#onBackToMainPageClick" />
-                </HBox>
-            </bottom>
+    
+    <bottom>
+        <HBox alignment="CENTER_RIGHT" spacing="15" style="-fx-padding: 10; -fx-background-color: #bdc3c7;">
+            <Button text="Back to Main Page" onAction="#onBackToMainPageClick" 
+                   style="-fx-background-color: #34495e; -fx-text-fill: white;"/>
+        </HBox>
+    </bottom>
 </BorderPane>