diff --git a/out/main.js b/out/main.js
index 63fbdfd6388e55681d2b3faafe2ed687409e96b0..bb453880ee87304b3ea4c407e5b3738198cfdbdf 100644
--- a/out/main.js
+++ b/out/main.js
@@ -8733,178 +8733,7 @@ var $author$project$Model$CustomEnemy = {$: 'CustomEnemy'};
 var $author$project$Model$ShowModal = function (a) {
 	return {$: 'ShowModal', a: a};
 };
-var $rundis$elm_bootstrap$Bootstrap$Internal$Button$Attrs = function (a) {
-	return {$: 'Attrs', a: a};
-};
-var $rundis$elm_bootstrap$Bootstrap$Button$attrs = function (attrs_) {
-	return $rundis$elm_bootstrap$Bootstrap$Internal$Button$Attrs(attrs_);
-};
-var $rundis$elm_bootstrap$Bootstrap$Internal$Button$Block = {$: 'Block'};
-var $rundis$elm_bootstrap$Bootstrap$Button$block = $rundis$elm_bootstrap$Bootstrap$Internal$Button$Block;
 var $elm$html$Html$button = _VirtualDom_node('button');
-var $elm$core$Maybe$andThen = F2(
-	function (callback, maybeValue) {
-		if (maybeValue.$ === 'Just') {
-			var value = maybeValue.a;
-			return callback(value);
-		} else {
-			return $elm$core$Maybe$Nothing;
-		}
-	});
-var $rundis$elm_bootstrap$Bootstrap$Internal$Button$applyModifier = F2(
-	function (modifier, options) {
-		switch (modifier.$) {
-			case 'Size':
-				var size = modifier.a;
-				return _Utils_update(
-					options,
-					{
-						size: $elm$core$Maybe$Just(size)
-					});
-			case 'Coloring':
-				var coloring = modifier.a;
-				return _Utils_update(
-					options,
-					{
-						coloring: $elm$core$Maybe$Just(coloring)
-					});
-			case 'Block':
-				return _Utils_update(
-					options,
-					{block: true});
-			case 'Disabled':
-				var val = modifier.a;
-				return _Utils_update(
-					options,
-					{disabled: val});
-			default:
-				var attrs = modifier.a;
-				return _Utils_update(
-					options,
-					{
-						attributes: _Utils_ap(options.attributes, attrs)
-					});
-		}
-	});
-var $elm$core$Tuple$second = function (_v0) {
-	var y = _v0.b;
-	return y;
-};
-var $elm$html$Html$Attributes$classList = function (classes) {
-	return $elm$html$Html$Attributes$class(
-		A2(
-			$elm$core$String$join,
-			' ',
-			A2(
-				$elm$core$List$map,
-				$elm$core$Tuple$first,
-				A2($elm$core$List$filter, $elm$core$Tuple$second, classes))));
-};
-var $rundis$elm_bootstrap$Bootstrap$Internal$Button$defaultOptions = {attributes: _List_Nil, block: false, coloring: $elm$core$Maybe$Nothing, disabled: false, size: $elm$core$Maybe$Nothing};
-var $elm$json$Json$Encode$bool = _Json_wrap;
-var $elm$html$Html$Attributes$boolProperty = F2(
-	function (key, bool) {
-		return A2(
-			_VirtualDom_property,
-			key,
-			$elm$json$Json$Encode$bool(bool));
-	});
-var $elm$html$Html$Attributes$disabled = $elm$html$Html$Attributes$boolProperty('disabled');
-var $rundis$elm_bootstrap$Bootstrap$Internal$Button$roleClass = function (role) {
-	switch (role.$) {
-		case 'Primary':
-			return 'primary';
-		case 'Secondary':
-			return 'secondary';
-		case 'Success':
-			return 'success';
-		case 'Info':
-			return 'info';
-		case 'Warning':
-			return 'warning';
-		case 'Danger':
-			return 'danger';
-		case 'Dark':
-			return 'dark';
-		case 'Light':
-			return 'light';
-		default:
-			return 'link';
-	}
-};
-var $rundis$elm_bootstrap$Bootstrap$General$Internal$screenSizeOption = function (size) {
-	switch (size.$) {
-		case 'XS':
-			return $elm$core$Maybe$Nothing;
-		case 'SM':
-			return $elm$core$Maybe$Just('sm');
-		case 'MD':
-			return $elm$core$Maybe$Just('md');
-		case 'LG':
-			return $elm$core$Maybe$Just('lg');
-		default:
-			return $elm$core$Maybe$Just('xl');
-	}
-};
-var $rundis$elm_bootstrap$Bootstrap$Internal$Button$buttonAttributes = function (modifiers) {
-	var options = A3($elm$core$List$foldl, $rundis$elm_bootstrap$Bootstrap$Internal$Button$applyModifier, $rundis$elm_bootstrap$Bootstrap$Internal$Button$defaultOptions, modifiers);
-	return _Utils_ap(
-		_List_fromArray(
-			[
-				$elm$html$Html$Attributes$classList(
-				_List_fromArray(
-					[
-						_Utils_Tuple2('btn', true),
-						_Utils_Tuple2('btn-block', options.block),
-						_Utils_Tuple2('disabled', options.disabled)
-					])),
-				$elm$html$Html$Attributes$disabled(options.disabled)
-			]),
-		_Utils_ap(
-			function () {
-				var _v0 = A2($elm$core$Maybe$andThen, $rundis$elm_bootstrap$Bootstrap$General$Internal$screenSizeOption, options.size);
-				if (_v0.$ === 'Just') {
-					var s = _v0.a;
-					return _List_fromArray(
-						[
-							$elm$html$Html$Attributes$class('btn-' + s)
-						]);
-				} else {
-					return _List_Nil;
-				}
-			}(),
-			_Utils_ap(
-				function () {
-					var _v1 = options.coloring;
-					if (_v1.$ === 'Just') {
-						if (_v1.a.$ === 'Roled') {
-							var role = _v1.a.a;
-							return _List_fromArray(
-								[
-									$elm$html$Html$Attributes$class(
-									'btn-' + $rundis$elm_bootstrap$Bootstrap$Internal$Button$roleClass(role))
-								]);
-						} else {
-							var role = _v1.a.a;
-							return _List_fromArray(
-								[
-									$elm$html$Html$Attributes$class(
-									'btn-outline-' + $rundis$elm_bootstrap$Bootstrap$Internal$Button$roleClass(role))
-								]);
-						}
-					} else {
-						return _List_Nil;
-					}
-				}(),
-				options.attributes)));
-};
-var $rundis$elm_bootstrap$Bootstrap$Button$button = F2(
-	function (options, children) {
-		return A2(
-			$elm$html$Html$button,
-			$rundis$elm_bootstrap$Bootstrap$Internal$Button$buttonAttributes(options),
-			children);
-	});
 var $rundis$elm_bootstrap$Bootstrap$Table$CellAttr = function (a) {
 	return {$: 'CellAttr', a: a};
 };
@@ -9033,6 +8862,20 @@ var $elm$virtual_dom$VirtualDom$attribute = F2(
 			_VirtualDom_noJavaScriptOrHtmlUri(value));
 	});
 var $elm$html$Html$Attributes$attribute = $elm$virtual_dom$VirtualDom$attribute;
+var $elm$core$Tuple$second = function (_v0) {
+	var y = _v0.b;
+	return y;
+};
+var $elm$html$Html$Attributes$classList = function (classes) {
+	return $elm$html$Html$Attributes$class(
+		A2(
+			$elm$core$String$join,
+			' ',
+			A2(
+				$elm$core$List$map,
+				$elm$core$Tuple$first,
+				A2($elm$core$List$filter, $elm$core$Tuple$second, classes))));
+};
 var $rundis$elm_bootstrap$Bootstrap$Modal$StartClose = {$: 'StartClose'};
 var $rundis$elm_bootstrap$Bootstrap$Modal$getCloseMsg = function (config_) {
 	var _v0 = config_.withAnimation;
@@ -9235,6 +9078,20 @@ var $rundis$elm_bootstrap$Bootstrap$Modal$display = F2(
 					]);
 		}
 	});
+var $rundis$elm_bootstrap$Bootstrap$General$Internal$screenSizeOption = function (size) {
+	switch (size.$) {
+		case 'XS':
+			return $elm$core$Maybe$Nothing;
+		case 'SM':
+			return $elm$core$Maybe$Just('sm');
+		case 'MD':
+			return $elm$core$Maybe$Just('md');
+		case 'LG':
+			return $elm$core$Maybe$Just('lg');
+		default:
+			return $elm$core$Maybe$Just('xl');
+	}
+};
 var $rundis$elm_bootstrap$Bootstrap$Modal$modalClass = function (size) {
 	var _v0 = $rundis$elm_bootstrap$Bootstrap$General$Internal$screenSizeOption(size);
 	if (_v0.$ === 'Just') {
@@ -9437,6 +9294,147 @@ var $author$project$Model$RemoveEnemy = function (a) {
 var $author$project$Model$ShowAttackModal = function (a) {
 	return {$: 'ShowAttackModal', a: a};
 };
+var $rundis$elm_bootstrap$Bootstrap$Internal$Button$Attrs = function (a) {
+	return {$: 'Attrs', a: a};
+};
+var $rundis$elm_bootstrap$Bootstrap$Button$attrs = function (attrs_) {
+	return $rundis$elm_bootstrap$Bootstrap$Internal$Button$Attrs(attrs_);
+};
+var $elm$core$Maybe$andThen = F2(
+	function (callback, maybeValue) {
+		if (maybeValue.$ === 'Just') {
+			var value = maybeValue.a;
+			return callback(value);
+		} else {
+			return $elm$core$Maybe$Nothing;
+		}
+	});
+var $rundis$elm_bootstrap$Bootstrap$Internal$Button$applyModifier = F2(
+	function (modifier, options) {
+		switch (modifier.$) {
+			case 'Size':
+				var size = modifier.a;
+				return _Utils_update(
+					options,
+					{
+						size: $elm$core$Maybe$Just(size)
+					});
+			case 'Coloring':
+				var coloring = modifier.a;
+				return _Utils_update(
+					options,
+					{
+						coloring: $elm$core$Maybe$Just(coloring)
+					});
+			case 'Block':
+				return _Utils_update(
+					options,
+					{block: true});
+			case 'Disabled':
+				var val = modifier.a;
+				return _Utils_update(
+					options,
+					{disabled: val});
+			default:
+				var attrs = modifier.a;
+				return _Utils_update(
+					options,
+					{
+						attributes: _Utils_ap(options.attributes, attrs)
+					});
+		}
+	});
+var $rundis$elm_bootstrap$Bootstrap$Internal$Button$defaultOptions = {attributes: _List_Nil, block: false, coloring: $elm$core$Maybe$Nothing, disabled: false, size: $elm$core$Maybe$Nothing};
+var $elm$json$Json$Encode$bool = _Json_wrap;
+var $elm$html$Html$Attributes$boolProperty = F2(
+	function (key, bool) {
+		return A2(
+			_VirtualDom_property,
+			key,
+			$elm$json$Json$Encode$bool(bool));
+	});
+var $elm$html$Html$Attributes$disabled = $elm$html$Html$Attributes$boolProperty('disabled');
+var $rundis$elm_bootstrap$Bootstrap$Internal$Button$roleClass = function (role) {
+	switch (role.$) {
+		case 'Primary':
+			return 'primary';
+		case 'Secondary':
+			return 'secondary';
+		case 'Success':
+			return 'success';
+		case 'Info':
+			return 'info';
+		case 'Warning':
+			return 'warning';
+		case 'Danger':
+			return 'danger';
+		case 'Dark':
+			return 'dark';
+		case 'Light':
+			return 'light';
+		default:
+			return 'link';
+	}
+};
+var $rundis$elm_bootstrap$Bootstrap$Internal$Button$buttonAttributes = function (modifiers) {
+	var options = A3($elm$core$List$foldl, $rundis$elm_bootstrap$Bootstrap$Internal$Button$applyModifier, $rundis$elm_bootstrap$Bootstrap$Internal$Button$defaultOptions, modifiers);
+	return _Utils_ap(
+		_List_fromArray(
+			[
+				$elm$html$Html$Attributes$classList(
+				_List_fromArray(
+					[
+						_Utils_Tuple2('btn', true),
+						_Utils_Tuple2('btn-block', options.block),
+						_Utils_Tuple2('disabled', options.disabled)
+					])),
+				$elm$html$Html$Attributes$disabled(options.disabled)
+			]),
+		_Utils_ap(
+			function () {
+				var _v0 = A2($elm$core$Maybe$andThen, $rundis$elm_bootstrap$Bootstrap$General$Internal$screenSizeOption, options.size);
+				if (_v0.$ === 'Just') {
+					var s = _v0.a;
+					return _List_fromArray(
+						[
+							$elm$html$Html$Attributes$class('btn-' + s)
+						]);
+				} else {
+					return _List_Nil;
+				}
+			}(),
+			_Utils_ap(
+				function () {
+					var _v1 = options.coloring;
+					if (_v1.$ === 'Just') {
+						if (_v1.a.$ === 'Roled') {
+							var role = _v1.a.a;
+							return _List_fromArray(
+								[
+									$elm$html$Html$Attributes$class(
+									'btn-' + $rundis$elm_bootstrap$Bootstrap$Internal$Button$roleClass(role))
+								]);
+						} else {
+							var role = _v1.a.a;
+							return _List_fromArray(
+								[
+									$elm$html$Html$Attributes$class(
+									'btn-outline-' + $rundis$elm_bootstrap$Bootstrap$Internal$Button$roleClass(role))
+								]);
+						}
+					} else {
+						return _List_Nil;
+					}
+				}(),
+				options.attributes)));
+};
+var $rundis$elm_bootstrap$Bootstrap$Button$button = F2(
+	function (options, children) {
+		return A2(
+			$elm$html$Html$button,
+			$rundis$elm_bootstrap$Bootstrap$Internal$Button$buttonAttributes(options),
+			children);
+	});
 var $rundis$elm_bootstrap$Bootstrap$Internal$Button$Coloring = function (a) {
 	return {$: 'Coloring', a: a};
 };
@@ -9634,9 +9632,6 @@ var $author$project$FightingTool$displayCharacters = function (chars) {
 };
 var $rundis$elm_bootstrap$Bootstrap$Table$Hover = {$: 'Hover'};
 var $rundis$elm_bootstrap$Bootstrap$Table$hover = $rundis$elm_bootstrap$Bootstrap$Table$Hover;
-var $rundis$elm_bootstrap$Bootstrap$Internal$Button$Light = {$: 'Light'};
-var $rundis$elm_bootstrap$Bootstrap$Button$light = $rundis$elm_bootstrap$Bootstrap$Internal$Button$Coloring(
-	$rundis$elm_bootstrap$Bootstrap$Internal$Button$Roled($rundis$elm_bootstrap$Bootstrap$Internal$Button$Light));
 var $rundis$elm_bootstrap$Bootstrap$Table$THead = function (a) {
 	return {$: 'THead', a: a};
 };
@@ -10651,7 +10646,11 @@ var $author$project$FightingTool$customEnemy = function (model) {
 	var ddArmor = _v0.c;
 	return A2(
 		$elm$html$Html$div,
-		_List_Nil,
+		_List_fromArray(
+			[
+				A2($elm$html$Html$Attributes$style, 'margin-left', '5%'),
+				A2($elm$html$Html$Attributes$style, 'margin-right', '5%')
+			]),
 		_List_fromArray(
 			[
 				A2(
@@ -10792,7 +10791,11 @@ var $author$project$FightingTool$customEnemy = function (model) {
 var $author$project$FightingTool$customHero = function (model) {
 	return A2(
 		$elm$html$Html$div,
-		_List_Nil,
+		_List_fromArray(
+			[
+				A2($elm$html$Html$Attributes$style, 'margin-left', '5%'),
+				A2($elm$html$Html$Attributes$style, 'margin-right', '5%')
+			]),
 		_List_fromArray(
 			[
 				A2(
@@ -11513,7 +11516,6 @@ var $rundis$elm_bootstrap$Bootstrap$Tab$link = F2(
 		return $rundis$elm_bootstrap$Bootstrap$Tab$Link(
 			{attributes: attributes, children: children});
 	});
-var $rundis$elm_bootstrap$Bootstrap$Utilities$Spacing$mt3 = $elm$html$Html$Attributes$class('mt-3');
 var $rundis$elm_bootstrap$Bootstrap$Tab$Pane = function (a) {
 	return {$: 'Pane', a: a};
 };
@@ -11854,7 +11856,10 @@ var $author$project$FightingTool$viewCustomEnemyModal = function (model) {
 												pane: A2(
 													$rundis$elm_bootstrap$Bootstrap$Tab$pane,
 													_List_fromArray(
-														[$rundis$elm_bootstrap$Bootstrap$Utilities$Spacing$mt3]),
+														[
+															$elm$html$Html$Attributes$class('lightCopper'),
+															A2($elm$html$Html$Attributes$style, 'padding', '2%')
+														]),
 													_List_fromArray(
 														[
 															$author$project$FightingTool$customEnemy(model)
@@ -11873,7 +11878,10 @@ var $author$project$FightingTool$viewCustomEnemyModal = function (model) {
 												pane: A2(
 													$rundis$elm_bootstrap$Bootstrap$Tab$pane,
 													_List_fromArray(
-														[$rundis$elm_bootstrap$Bootstrap$Utilities$Spacing$mt3]),
+														[
+															$elm$html$Html$Attributes$class('lightCopper'),
+															A2($elm$html$Html$Attributes$style, 'padding', '2%')
+														]),
 													_List_fromArray(
 														[
 															$author$project$FightingTool$customHero(model)
@@ -11942,17 +11950,13 @@ var $author$project$FightingTool$body = function (model) {
 													_List_fromArray(
 														[
 															A2(
-															$rundis$elm_bootstrap$Bootstrap$Button$button,
+															$elm$html$Html$button,
 															_List_fromArray(
 																[
-																	$rundis$elm_bootstrap$Bootstrap$Button$light,
-																	$rundis$elm_bootstrap$Bootstrap$Button$block,
-																	$rundis$elm_bootstrap$Bootstrap$Button$attrs(
-																	_List_fromArray(
-																		[
-																			$elm$html$Html$Events$onClick(
-																			$author$project$Model$ShowModal($author$project$Model$CustomEnemy))
-																		]))
+																	$elm$html$Html$Attributes$class('metalButton'),
+																	$elm$html$Html$Events$onClick(
+																	$author$project$Model$ShowModal($author$project$Model$CustomEnemy)),
+																	A2($elm$html$Html$Attributes$style, 'width', '100%')
 																]),
 															_List_fromArray(
 																[
@@ -14887,7 +14891,8 @@ var $author$project$FightingTool$header = A2(
 	$elm$html$Html$header,
 	_List_fromArray(
 		[
-			$elm$html$Html$Attributes$class('header animate__animated animate__fadeInDown')
+			$elm$html$Html$Attributes$class('header animate__animated animate__fadeInDown'),
+			A2($elm$html$Html$Attributes$style, 'height', '80%')
 		]),
 	_List_fromArray(
 		[
@@ -14933,7 +14938,8 @@ var $author$project$FightingTool$header = A2(
 					$elm$html$Html$div,
 					_List_fromArray(
 						[
-							$elm$html$Html$Attributes$class('item1')
+							$elm$html$Html$Attributes$class('item1'),
+							A2($elm$html$Html$Attributes$style, 'height', '80%')
 						]),
 					_List_fromArray(
 						[
@@ -14963,6 +14969,7 @@ var $author$project$FightingTool$header = A2(
 						]))
 				]))
 		]));
+var $rundis$elm_bootstrap$Bootstrap$Utilities$Spacing$mt3 = $elm$html$Html$Attributes$class('mt-3');
 var $author$project$Main$view = function (model) {
 	return A2(
 		$elm$html$Html$div,
diff --git a/res/Stylesheet.css b/res/Stylesheet.css
index 01748cc221b8173800df9ed7a8e4af6d6c51930e..82e81ea82be46f956946c92868a616bd02b64cec 100644
--- a/res/Stylesheet.css
+++ b/res/Stylesheet.css
@@ -54,6 +54,10 @@ html {
     background-color: #e4be9b
 }
 
+.lightCopper{
+    background-color: #efd8c3;
+}
+
 .fas:hover {
     font-weight: 900;
     color: #acacac;
@@ -66,7 +70,7 @@ html {
 
 .nav-tabs .nav-link.active,
 .nav-tabs .nav-item.show .nav-link {
-  background-color: #deb187;
+  background-color: #e4be9b;
   border-color: #dee2e6 #dee2e6 #fff;
   color: black;
 }
@@ -82,14 +86,14 @@ html {
 }
 
 .btn {
-    background-color: #e4be9b;
+    background-color: #deb187;
 }
 
 tr:nth-child(even) {background-color: white;}
 tr:nth-child(odd) {background-color: #faf2eb;}
 
 .metalButton {
-    background-image: repeating-linear-gradient(to right bottom, #acacac , #bfbfbf , #acacac 40% );
+    background-image: repeating-linear-gradient(to right bottom, #999999, #acacac  , #999999 40% );
     border-radius: 8px;
     padding: 8px 28px;
     color: white;
@@ -100,7 +104,8 @@ tr:nth-child(odd) {background-color: #faf2eb;}
   }
 
 .metalButton:hover{
-    background-image: repeating-linear-gradient(to right bottom, #acacac , #bfbfbf 10%, #acacac 40% );
+    background-image: repeating-linear-gradient(to right bottom, #acacac , #999999 10%, #acacac 40% );
+    color: black;
 }
 
 .PlayerIcon {
diff --git a/src/FightingTool.elm b/src/FightingTool.elm
index 5da80b42878c45fa99e2b76c920dfb58675cf652..284888ce1ea90f2044e7ccd28a59b1612b2a91f8 100644
--- a/src/FightingTool.elm
+++ b/src/FightingTool.elm
@@ -45,12 +45,11 @@ body model =
                         (displayCharacters model.enemy ++ 
                         [Table.tr [] 
                             [ Table.td[Table.cellAttr <| Attr.colspan 10] -- naja um sicher zu gehen
-                                [ Button.button
-                                    [ Button.light
-                                    , Button.block
-                                    , Button.attrs [onClick <| ShowModal CustomEnemy ]
-                                    ]
-                                    [ text "+"]
+                                [ Html.button 
+                                    [ class "metalButton"
+                                    , onClick <| ShowModal CustomEnemy
+                                    , style "width" "100%"
+                                    ][text "+"]
                                 ]
                             ]
                         ]
@@ -64,14 +63,14 @@ body model =
 
 header : Html Msg
 header =
-  Html.header [class "header animate__animated animate__fadeInDown"]
+  Html.header [class "header animate__animated animate__fadeInDown", style "height" "80%"]
                 [ div [class "grid-container"]
                     [ Html.figure [ class "image animate__animated animate__rollIn"]
                         [ Svg.svg
                             [ SvgAtt.width "100%", style "margin-top" "-18%", style "margin-left" "10%"]                
                             [ Svg.image [ SvgAtt.width "100%", SvgAtt.height "100%", SvgAtt.title "Logo", SvgAtt.xlinkHref "res/P&P Manager Logo 512x512px noBG.png" ] [] ]
                         ]
-                    , div [class "item1"]
+                    , div [class "item1", style "height" "80%"]
                         [ h1 [class "title", style "margin-left" "2%", style "margin-top" "4px"] [text "Pen & Paper Manager"]
                         , h2 [class "subtitle", style "margin-left" "2%"] [text "Für \"Das schwarze Auge\" Version 5"]
                         ]
@@ -150,14 +149,14 @@ viewCustomEnemyModal model =
                         { id = "enemy"
                         , link = Tab.link [] [ text "Gegner" ]
                         , pane =
-                            Tab.pane [ Spacing.mt3 ]
+                            Tab.pane [ class "lightCopper" , style "padding" "2%"]
                                 [ customEnemy model ]
                         }
                     , Tab.item
                         { id = "hero"
                         , link = Tab.link [] [ text "Held" ]
                         , pane =
-                            Tab.pane [ Spacing.mt3 ]
+                            Tab.pane [ class "lightCopper" , style "padding" "2%"]
                                 [ customHero model ]
                         }
                     ]
@@ -334,7 +333,7 @@ customEnemy model =
                 Hero _ _ -> (Input.placeholder "", Input.placeholder "", Input.placeholder "")
 
     in
-        div []
+        div [style "margin-left" "5%", style "margin-right" "5%"]
             [ Form.label [] [text "Name:"]
             , Input.text [Input.onInput 
                 (\n -> 
@@ -405,7 +404,7 @@ customEnemy model =
 
 customHero : Model -> Html Msg
 customHero model =
-    div []
+    div [style "margin-left" "5%", style "margin-right" "5%"]
         [ Form.label [] [text "Name"]
         , Input.text [Input.onInput
             (\n ->