diff --git a/Fanttikvariaatti/src/harjoitustyofx/LaskutussivuGUIView.fxml b/Fanttikvariaatti/src/harjoitustyofx/LaskutussivuGUIView.fxml
index acabd773e7d634669e4860679bd6ae14db23f756..09839ccc4ccdb793ee77aaafaf25e9452b527f94 100644
--- a/Fanttikvariaatti/src/harjoitustyofx/LaskutussivuGUIView.fxml
+++ b/Fanttikvariaatti/src/harjoitustyofx/LaskutussivuGUIView.fxml
@@ -1,80 +1,52 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import fi.jyu.mit.fxgui.StringGrid?>
+<?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
-<?import javafx.scene.control.ScrollPane?>
-<?import javafx.scene.layout.AnchorPane?>
-<?import javafx.scene.layout.ColumnConstraints?>
-<?import javafx.scene.layout.GridPane?>
-<?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.layout.BorderPane?>
+<?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
-<?import javafx.scene.text.Text?>
 
-<AnchorPane xmlns="http://javafx.com/javafx/23.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="harjoitustyofx.LaskutussivuGUIController">
-   <children>
-      <ScrollPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="373.0" prefWidth="636.0">
-         <content>
-            <GridPane alignment="CENTER_RIGHT" nodeOrientation="RIGHT_TO_LEFT" prefHeight="372.0" prefWidth="627.0" style="-fx-border-color: blue; -fx-border-width: 2;">
-               <columnConstraints>
-                  <ColumnConstraints hgrow="SOMETIMES" maxWidth="204.0" minWidth="10.0" prefWidth="90.66664632161458" />
-                  <ColumnConstraints hgrow="SOMETIMES" maxWidth="106.66668701171875" minWidth="0.0" prefWidth="63.333312988281264" />
-                  <ColumnConstraints hgrow="SOMETIMES" maxWidth="109.66666666666666" minWidth="10.0" prefWidth="69.33335367838544" />
-                  <ColumnConstraints hgrow="SOMETIMES" maxWidth="119.33331298828125" minWidth="10.0" prefWidth="119.33331298828125" />
-                  <ColumnConstraints hgrow="SOMETIMES" maxWidth="169.99998982747394" minWidth="10.0" prefWidth="164.66668701171875" />
-                  <ColumnConstraints hgrow="SOMETIMES" maxWidth="118.00002034505212" minWidth="10.0" prefWidth="118.00002034505212" />
-               </columnConstraints>
-               <rowConstraints>
-                  <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
-                  <RowConstraints maxHeight="50.0" minHeight="0.0" prefHeight="50.0" vgrow="SOMETIMES" />
-                  <RowConstraints maxHeight="50.0" minHeight="0.0" prefHeight="50.0" vgrow="SOMETIMES" />
-                  <RowConstraints maxHeight="50.0" minHeight="0.0" prefHeight="50.0" vgrow="SOMETIMES" />
-                  <RowConstraints maxHeight="50.0" minHeight="0.0" prefHeight="50.0" vgrow="SOMETIMES" />
-                  <RowConstraints maxHeight="50.0" minHeight="0.0" prefHeight="50.0" vgrow="SOMETIMES" />
-                  <RowConstraints maxHeight="50.0" minHeight="0.0" prefHeight="50.0" vgrow="SOMETIMES" />
-                  <RowConstraints maxHeight="50.0" minHeight="0.0" prefHeight="50.0" vgrow="SOMETIMES" />
-               </rowConstraints>
-               <children>
-                  <Label text="Nimi" GridPane.halignment="CENTER" GridPane.rowIndex="1" />
-                  <Label text="Hinta" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" />
-                  <Label text="Maksttu" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.rowIndex="1" />
-                  <Label text="Eräpäivä" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.rowIndex="1" />
-                  <Label text="S-posti" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.rowIndex="1" />
-                  
-                  
-                  <Button fx:id="lisaaLasku" mnemonicParsing="false" onMousePressed="#lisaaLasku" prefHeight="33.0" prefWidth="109.0" text="Lisää" GridPane.columnIndex="5" GridPane.halignment="CENTER" GridPane.rowIndex="2" />
-                  <Button fx:id="closeButton" mnemonicParsing="false" onMousePressed="#suljeSivu" prefHeight="32.0" prefWidth="117.0" text="Palaa Etusivulle" GridPane.columnIndex="5" GridPane.halignment="CENTER" GridPane.rowIndex="3" />
-                  <Button mnemonicParsing="false" prefHeight="35.0" prefWidth="112.0" onMousePressed="#avaaTuki" text="Tuki" GridPane.columnIndex="5" GridPane.halignment="CENTER" GridPane.rowIndex="4" />
-                  <Button mnemonicParsing="false" prefHeight="31.0" prefWidth="119.0" text="Poista Maksetut" GridPane.columnIndex="5" GridPane.halignment="CENTER" GridPane.rowIndex="5" />
-                  
-                  
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="aatu.aapinen@jmail.com" textAlignment="CENTER" wrappingWidth="170.0000023841858" GridPane.columnIndex="4" GridPane.rowIndex="2" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="sample.text@maili.com" textAlignment="CENTER" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.rowIndex="3" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="sample.text@maili.com" textAlignment="CENTER" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.rowIndex="4" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="sample.text@maili.com" textAlignment="CENTER" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.rowIndex="5" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="01.01.1970" textAlignment="CENTER" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.rowIndex="2" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="01.01.1970" textAlignment="CENTER" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.rowIndex="3" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="01.01.1970" textAlignment="CENTER" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.rowIndex="4" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="01.01.1970" textAlignment="CENTER" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.rowIndex="5" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Kyllä" textAlignment="CENTER" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.rowIndex="2" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Ei" textAlignment="CENTER" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.rowIndex="3" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Kyllä" textAlignment="CENTER" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.rowIndex="4" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Ei" textAlignment="CENTER" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.rowIndex="5" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="10,05€" textAlignment="CENTER" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="2" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="10,05€" textAlignment="CENTER" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="3" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="10,05€" textAlignment="CENTER" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="4" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="10,05€" textAlignment="CENTER" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="5" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Dick Samplertext" textAlignment="CENTER" wrappingWidth="100.0" GridPane.halignment="CENTER" GridPane.rowIndex="2" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Dick Samplertext" textAlignment="CENTER" GridPane.halignment="CENTER" GridPane.rowIndex="3" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Dick Samplertext" textAlignment="CENTER" GridPane.halignment="CENTER" GridPane.rowIndex="4" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Dick Samplertext" textAlignment="CENTER" GridPane.halignment="CENTER" GridPane.rowIndex="5" />
-                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Laskutussivu" wrappingWidth="116.087890625" GridPane.columnIndex="3">
-                     <font>
-                        <Font name="Arial" size="20.0" />
-                     </font>
-                  </Text>
-               </children>
-            </GridPane>
-         </content>
-      </ScrollPane>
-   </children>
-</AnchorPane>
+
+<BorderPane xmlns="http://javafx.com/javafx/23.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="harjoitustyofx.LaskutussivuGUIController">
+   <right>
+      <VBox prefHeight="200.0" prefWidth="100.0" BorderPane.alignment="CENTER">
+         <children>
+            <Button fx:id="lisaaLasku" mnemonicParsing="false" onMousePressed="#lisaaLasku" prefHeight="33.0" prefWidth="109.0" text="Lisää">
+               <VBox.margin>
+                  <Insets bottom="25.0" left="5.0" right="5.0" top="50.0" />
+               </VBox.margin>
+            </Button>
+            <Button fx:id="closeButton" mnemonicParsing="false" onMousePressed="#suljeSivu" prefHeight="32.0" prefWidth="117.0" text="Palaa Etusivulle">
+               <VBox.margin>
+                  <Insets bottom="25.0" left="5.0" right="5.0" top="10.0" />
+               </VBox.margin>
+            </Button>
+            <Button mnemonicParsing="false" onMousePressed="#avaaTuki" prefHeight="35.0" prefWidth="112.0" text="Tuki">
+               <VBox.margin>
+                  <Insets bottom="25.0" left="5.0" right="5.0" top="10.0" />
+               </VBox.margin>
+            </Button>
+            <Button mnemonicParsing="false" prefHeight="32.0" prefWidth="89.0" text="Poista Maksetut">
+               <VBox.margin>
+                  <Insets left="5.0" right="5.0" top="10.0" />
+               </VBox.margin>
+               <padding>
+                  <Insets bottom="1.0" />
+               </padding>
+            </Button>
+         </children>
+      </VBox>
+   </right>
+   <center>
+      <StringGrid rivit="S-Posti|Hinta|Eräpäivä|Maksettu|Nimi&#10;sample|0,00€|01.01.1970|Kyllä|;Matti Meikäläinen&#10;" BorderPane.alignment="CENTER" />
+   </center>
+   <top>
+      <Label text="Laskutussivu" BorderPane.alignment="CENTER">
+         <font>
+            <Font size="29.0" />
+         </font>
+      </Label>
+   </top>
+</BorderPane>
diff --git a/kuvat/katalogiikkunafx.png b/kuvat/katalogiikkunafx.png
index 52aaf1c1f4bde57933807c8b87932e9c4047443a..93ebf953460d320f11a72b8b6a0e518248305c33 100644
Binary files a/kuvat/katalogiikkunafx.png and b/kuvat/katalogiikkunafx.png differ
diff --git a/kuvat/laskutussivufx.png b/kuvat/laskutussivufx.png
new file mode 100644
index 0000000000000000000000000000000000000000..b2fda464d3a688fd6a3971eb6160792c2ff3551e
Binary files /dev/null and b/kuvat/laskutussivufx.png differ
diff --git a/kuvat/lisaakirjafx.png b/kuvat/lisaakirjafx.png
index 7590b472adb19328bca0fb2c66ce69425f622ce4..10f021b7635f6f16f445b2fb7ac54f5b90664a3c 100644
Binary files a/kuvat/lisaakirjafx.png and b/kuvat/lisaakirjafx.png differ
diff --git a/kuvat/lisaalaskufx.png b/kuvat/lisaalaskufx.png
new file mode 100644
index 0000000000000000000000000000000000000000..fde8c5e6df152ceb9953429693aac46e29cfaa84
Binary files /dev/null and b/kuvat/lisaalaskufx.png differ
diff --git a/kuvat/tukifx.png b/kuvat/tukifx.png
index 14b000a605b81d6e8c6c07a438bf8eec1fbd5ff5..df85e056c1b3aa9be182997c1fd9786e0ea12871 100644
Binary files a/kuvat/tukifx.png and b/kuvat/tukifx.png differ