diff --git a/app/assets/fonts/proximanova_regular.ttf b/app/assets/fonts/proximanova_regular.ttf
new file mode 100644
index 0000000..7d00247
Binary files /dev/null and b/app/assets/fonts/proximanova_regular.ttf differ
diff --git a/app/assets/images/bg.gif b/app/assets/images/bg.gif
new file mode 100644
index 0000000..0b82748
Binary files /dev/null and b/app/assets/images/bg.gif differ
diff --git a/app/assets/images/thumb.jpg b/app/assets/images/thumb.jpg
new file mode 100644
index 0000000..7967d29
Binary files /dev/null and b/app/assets/images/thumb.jpg differ
diff --git a/app/assets/styles/app.css b/app/assets/styles/app.css
new file mode 100644
index 0000000..c38831f
--- /dev/null
+++ b/app/assets/styles/app.css
@@ -0,0 +1,45 @@
+@font-face {
+    font-family: "ProximaNova";
+    src: url("../fonts/proximanova_regular.ttf") format("truetype");
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    user-select: none;
+}
+
+body {
+    background-image: url(../images/bg.gif);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    min-height: 100vh;
+}
+
+.page-title__wrapper {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.page-title {
+    position: relative;
+    color: rgb(88, 145, 229);
+    font-family: "ProximaNova", serif;
+    font-size: 56pt;
+    text-transform: uppercase;
+}
+
+.page-title::after {
+    position: absolute;
+    left: 5px;
+    top: 5px;
+    color: white;
+    content: "ostiwe";
+    font-family: "ProximaNova", serif;
+    font-size: 56pt;
+    text-transform: uppercase;
+}
\ No newline at end of file
diff --git a/app/favicon.ico b/app/favicon.ico
new file mode 100644
index 0000000..fc125ed
Binary files /dev/null and b/app/favicon.ico differ
diff --git a/app/index.html b/app/index.html
index 939f3e9..f75cf11 100644
--- a/app/index.html
+++ b/app/index.html
@@ -2,95 +2,18 @@
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
     <title>Ostiwe</title>
-    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
     <meta name="og:title" content="Ostiwe"/>
-    <meta name="og:image" content="thumb.png"/>
-    <style>
-        * {
-            font-family: 'Permanent Marker', cursive;
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        #canvas-interactive {
-            width: 100vw;
-            height: 100vh;
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-        }
-
-        .canvas-interactive-wrapper {
-            position: relative;
-            width: 100vw;
-            height: 100vh;
-        }
-
-        .page-title {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            color: white;
-            font-size: 8em;
-            z-index: 999;
-        }
-    </style>
+    <meta name="og:image" content="./assets/images/thumb.jpg"/>
+    <link rel="stylesheet" href="./assets/styles/app.css">
 </head>
-<body class="canvas-interactive-wrapper">
-<h1 class="page-title">Ostiwe</h1>
-<canvas id="canvas-interactive"></canvas>
-<script src="./granim.min.js"></script>
-<script>
-    function shuffle(array) {
-        let currentIndex = array.length, temporaryValue, randomIndex;
+<body class="page-root">
+<div class="page-title__wrapper">
+    <div class="page-title__wrapper-inner">
+        <h1 class="page-title">Ostiwe</h1>
+    </div>
+</div>
 
-        // While there remain elements to shuffle...
-        while (0 !== currentIndex) {
-
-            // Pick a remaining element...
-            randomIndex = Math.floor(Math.random() * currentIndex);
-            currentIndex -= 1;
-
-            // And swap it with the current element.
-            temporaryValue = array[currentIndex];
-            array[currentIndex] = array[randomIndex];
-            array[randomIndex] = temporaryValue;
-        }
-
-        return array;
-    }
-
-    let gradients = [
-        ['#21D4FD', '#B721FF'],
-        ['#8EC5FC', '#E0C3FC'],
-        ['#FEE140', '#FA709A'],
-        ['#D9AFD9', '#97D9E1'],
-        ['#FF3CAC', '#784BA0'],
-        ['#A9C9FF', '#FFBBEC'],
-        ['#F093FB', '#F5576C'],
-        ['#A8EDEA', '#FED6E3'],
-        ['#30CFD0', '#330867'],
-        ['#89F7FE', '#66A6FF'],
-    ];
-    new Granim({
-        element: '#canvas-interactive',
-        name: 'interactive-gradient',
-        elToSetClassOn: '.canvas-interactive-wrapper',
-        direction: 'diagonal',
-        isPausedWhenNotInView: false,
-        stateTransitionSpeed: 500,
-        states: {
-            'default-state': {
-                gradients: shuffle(gradients),
-                transitionSpeed: 10000,
-            },
-        },
-    });
-</script>
 </body>
 </html>
diff --git a/app/thumb.png b/app/thumb.png
deleted file mode 100644
index 547183c..0000000
Binary files a/app/thumb.png and /dev/null differ
