diff --git a/assets/css/custom.css b/assets/css/custom.css
index e69de29..e6949b5 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -0,0 +1,35 @@
+
+body {
+    background: white;
+    color: black;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+p.image {
+    text-align: center;
+}  
+
+
+@media (min-width: 768px) {
+    body {
+        background-color: steelblue;
+        color: white;
+        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    }
+}
+@media (min-width: 1200px) {
+    body {
+        background-color: darkblue;
+        color: white;
+        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    }
+    p {
+        column-count: 2;
+        column-gap: 2rem;
+    }
+    p.dotted {
+        column-gap: 2rem;
+        column-rule: 5px dotted black;
+        outline-style: dotted;
+    } 
+
+}
diff --git a/index.html b/index.html
index 5ea1fd1..374fefd 100644
--- a/index.html
+++ b/index.html
@@ -8,12 +8,23 @@
 </head>
 <body class="p-4">
     <h1 class="text-primary">Hello From Main Page</h1>
+    <p class="dotted" >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+    <p class="image"><img src="https://cdn.pixabay.com/photo/2020/04/05/13/22/lorem-5006124_1280.jpg" alt="Lorem ipsum Blumen" width="200px">
+        
+    </p>
     <a href="index.html">Go to Main Page</a>
     <a href="secondSite.html">Go to Second Page</a>
     <br />
 
     <button class="btn btn-primary">Primary Button</button>
-  <button class="btn btn-secondary" onclick="exampleLog()">Secondary Button</button>
+    <button class="btn btn-secondary" onclick="exampleLog()">Secondary Button</button>
+    <button class="btn btn-success">Success Button</button>
+    <button class="btn btn-danger">Danger Button</button>
+    <button class="btn btn-warning">Warning Button</button>
+    <button class="btn btn-info">Info Button</button>
+    <button class="btn btn-light">Light Button</button>
+    <button class="btn btn-dark">Dark Button</button>
+    <button class="btn btn-link">Link Button</button>
 
     <script src="assets/bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js"></script>
     <script src="assets/src/example.js"></script>
