diff --git a/css/app.css b/css/app.css
index e2f46ac..57a084e 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1,13 +1,14 @@
 body {
     font-family: Arial, sans-serif;
+    background-image: url('../assets/sand/fishTile_001.png');
 }
 
 .rod {
-    float: right;
     width: 50px;
     height: 300px;
     border: 1px solid black;
-    background-color: lightblue;
+    /*background-color: lightblue;*/
+    background-image: url('../assets/water/fishTile_089.png') ;
     padding: 0;
 
     display: flex;
@@ -26,8 +27,7 @@ body {
 
 .pull {
     background-color: cornflowerblue;
-    width: 250px;
-    height: 250px;
+    height: 100px;
     border-radius: 15px;
     border: 5px solid darkblue;
 
@@ -36,11 +36,13 @@ body {
     justify-content: space-around;
     align-items: center;
 
-    font-size: 4.7em;
-    user-select: none;
     color: white;
 }
 
+.pull * {
+    user-select: none;
+}
+
 .pull:active {
     background-color: #a4bbe5;
     margin-top: 3px;
@@ -70,4 +72,5 @@ body {
     margin: 0;
     padding: 0;
     background-color: greenyellow;
+    z-index: 50;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index fea861e..d8ff835 100644
--- a/index.html
+++ b/index.html
@@ -4,37 +4,48 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Fishy</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.css" integrity="sha512-DIW4FkYTOxjCqRt7oS9BFO+nVOwDL4bzukDyDtMO7crjUZhwpyrWBFroq+IqRe6VnJkTpRAS6nhDvf0w+wHmxg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="css/app.css">
 </head>
 <body>
 
-<div id="root">
-    <div class="rod">
-        <p class="hook" :style="'margin-bottom: ' + force * 2 + 'px'"></p>
-        <div v-if="fishy" class="fish" :style="'bottom: '+fishy.position+'px'">
-            <img :src="fishy.sprite" alt="fishy.sprite"><br/>
-            <div class="fishyScoreIndicatorWrapper">
-                <div class="fishyScoreIndicator" :style="'width: '+(fishyScore)+'%;'"></div>
+<div id="root" class="container">
+    <div class="row">
+        <div class="col-12">
+            Score: {{ score }}<br/>
+            <a href="javascript:" v-on:click="deployFish()" v-if="!fishy">let there be fish</a>
+        </div>
+        <div class="col-4">
+            <div class="rod">
+                <p class="hook" :style="'margin-bottom: ' + force * 2 + 'px'"></p>
+                <div v-if="fishy" class="fish" :style="'bottom: '+fishy.position+'px'">
+                    <img :src="fishy.sprite" alt="fishy.sprite"><br/>
+                    <div class="fishyScoreIndicatorWrapper">
+                        <div class="fishyScoreIndicator" :style="'width: '+(fishyScore)+'%;'"></div>
+                    </div>
+                </div>
+            </div></div>
+        <div class="col-8">
+            <div class="pull" v-on:pointerdown="pull = true" v-on:pointerup="pull = false">
+                <span>PULL</span>
             </div>
         </div>
+        <div class="col-12">
+<!--            Force: {{ force }}<br/>-->
+<!--            Pulling: {{ pull }}<br/>-->
+            <template v-if="fishy">
+<!--                Fishy-position: {{ fishyPosition }}<br/>-->
+                Fishy-name: {{ fishy.name }}<br/>
+<!--                FishyScore: {{ fishyScore }}<br/>-->
+            </template>
+        </div>
     </div>
-
-    Score: {{ score }}<br/>
-    Force: {{ force }}<br/>
-    Pulling: {{ pull }}<br/>
-    <template v-if="fishy">
-        Fishy-position: {{ fishyPosition }}<br/>
-        Fishy-name: {{ fishy.name }}<br/>
-        FishyScore: {{ fishyScore }}<br/>
-    </template>
-    <br/>
-    <div class="pull" v-on:pointerdown="pull = true" v-on:pointerup="pull = false">
-        <span>PULL</span>
-    </div>
-    <a href="javascript:" v-on:click="deployFish()" v-if="!fishy">let there be fish</a>
 </div>
 </div>
 
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js" integrity="sha512-Zq9o+E00xhhR/7vJ49mxFNJ0KQw1E1TMWkPTxrWcnpfEFDEXgUiwJHIKit93EW/XxE31HSI5GEOW06G6BF1AtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://unpkg.com/vue@next"></script>
 <script src="js/app.js"></script>
 </body>
diff --git a/js/app.js b/js/app.js
index 2d38159..3a5998d 100644
--- a/js/app.js
+++ b/js/app.js
@@ -15,6 +15,7 @@ const FishApp = {
                 fishMovementIntervalID: null
             },
             fishy: null,
+            fishiesCaught: [],
             fishies: [
                 {
                     name: 'Franz the Flying Fishy',
@@ -121,10 +122,15 @@ const FishApp = {
             window.clearInterval(this.intervals.fishMovementIntervalID);
 
             this.score += this.fishy.points;
+            this.fishyCaught.push(this.fishy);
+
             this.fishy = null;
             this.pull = false;
 
-            alert('fischi ist jetzt dein freund');
+            iziToast.success({
+                title: 'fischi ist jetzt dein freund',
+                position: 'topCenter'
+            });
         },
         fishyFled() {
             window.clearInterval(this.intervals.fishMovementIntervalID);
@@ -132,7 +138,10 @@ const FishApp = {
             this.fishy = null;
             this.pull = false;
 
-            alert('fischi fort!');
+            iziToast.warning({
+                title: 'fischi fort!',
+                position: 'topCenter'
+            });
         }
     }
 };
