diff --git a/index.html b/index.html
index afd6c88..06ea8ab 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,11 @@
         crossorigin="anonymous"/>
 </head>
 <body onload='particles(avoidMouse=false, speed=15)'>
+    <div class="wrapper">
+        <h1>Lorem ipsum dolor sit amet.</h1>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut delectus quibusdam est rem sequi consectetur doloremque. Laborum suscipit, incidunt excepturi veniam rerum quis accusamus eaque, obcaecati modi doloremque eveniet ratione!</p>
+        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, perspiciatis nobis ipsum nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.</p>
+    </div>
     <canvas id="particles"></canvas>
 <!-- javascript -->
 <script
diff --git a/scss/_palette.scss b/scss/_palette.scss
index 93d83a4..937b37a 100644
--- a/scss/_palette.scss
+++ b/scss/_palette.scss
@@ -4,4 +4,6 @@
     --col-particle: #ebe7c5;
     --col-particle-stroke: #692e50;
     --col-particle-stroke-hover: #9aa68b;
+
+    --col-text: #ebe7c5;
 }
diff --git a/scss/index.scss b/scss/index.scss
index f668add..0dffa9a 100644
--- a/scss/index.scss
+++ b/scss/index.scss
@@ -6,6 +6,26 @@ import partials
 @import 'reset';
 @import 'palette';
 
+body {
+    color: var(--col-text);
+}
+
+h1 {
+    font-size: 5rem;
+    line-height: 5rem;
+    margin-bottom: 3rem;
+}
+
+p {
+    margin-bottom: 1.5rem;
+}
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    padding: 2rem;
+}
+
 #particles {
     position: fixed;
     top: 0;
@@ -13,4 +33,5 @@ import partials
     width: 100%;
     height: 100%;
     background: var(--col-bg-canvas);
+    z-index: -999;
 }
