diff --git a/src/http/views/details.ejs b/src/http/views/details.ejs
new file mode 100644
index 0000000..20d430a
--- /dev/null
+++ b/src/http/views/details.ejs
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>simrail.alekswilc.dev</title>
+    <meta name="description" content="<%= record.stationName %> | <%= record.userUsername %> | <%= dayjs(record.leftDate).format('hh:mm DD/MM/YYYY') %>">
+    <meta property="og:title" content="Simrail Log">
+    <meta property="og:url" content="https://simrail.alekswilc.dev/details/<%= record.id %>/">
+    <meta property="og:description" content="<%= record.stationName %> | <%= record.userUsername %> | <%= dayjs(record.leftDate).format('hh:mm DD/MM/YYYY') %>"">
+    <meta property="og:type" content="website">
+    <meta property="og:image" content="<%= record.userAvatar %>" />
+    <meta name="twitter:card" content="summary_large_image">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/open-fonts@1.1.1/fonts/inter.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">
+
+    <style>
+        p {
+            margin: 0;
+        }
+
+        .details {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .clickable {
+            cursor: pointer;
+        }
+    </style>
+</head>
+
+<script>
+    function copydata() {
+        navigator.clipboard.writeText(document.getElementById('data').textContent.replace(/ /g, '').split('\n').filter(x => x).join(''))
+
+    }
+
+    function copylink() {
+        navigator.clipboard.writeText("https://simrail.alekswilc.dev/details/<%= record.id %>/")
+    }
+</script>
+
+<body>
+    <header>
+        <h1><a style="color: white; text-decoration: none;" href="/">SimRail Logs [<span
+                    style="color:hotpink">PL2</span>]</a></h1>
+    </header>
+
+    <div class="details">
+
+        <p>Użytkownik: <a href="<%= player.profileurl %>">
+                <%= record.userUsername %>
+            </a></p>
+        <p>Stacja: <%= record.stationName %>
+        </p>
+        <p>Data wejścia: <%= dayjs(record.joinedDate).format('HH:mm DD/MM/YYYY') %> (<%=
+                    dayjs(record.joinedDate).fromNow() %>)</p>
+        <p>Data wyjścia: <%= dayjs(record.leftDate).format('HH:mm DD/MM/YYYY') %> (<%= dayjs(record.leftDate).fromNow()
+                    %>)</p>
+
+
+
+        <br />
+        <code class="clickable" style="white-space: pre-line" onclick="copydata()" id="data">;station: <%= record.stationName %>
+            ;steam: <%= record.userSteamId %>
+            ;name: <%= record.userUsername %>
+            ;joined: <%=dayjs(record.joinedDate).format()%>
+            ;left: <%=dayjs(record.leftDate).format()%>
+            ;url: https://simrail.alekswilc.dev/details/<%= record.id %>/
+        </code>
+        <br />
+        <p><button onclick="copylink()">Kopiuj link</button></p>
+
+
+
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/http/views/index.ejs b/src/http/views/index.ejs
new file mode 100644
index 0000000..8d41ea2
--- /dev/null
+++ b/src/http/views/index.ejs
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>simrail.alekswilc.dev</title>
+    <meta name="description" content="Simrail Utils">
+    <meta property="og:title" content="simrail.alekswilc.dev">
+    <meta property="og:url" content="https://simrail.alekswilc.dev">
+    <meta property="og:description" content="Simrail Utils">
+    <meta property="og:type" content="website">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/open-fonts@1.1.1/fonts/inter.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">
+
+    <style>
+        p {
+            margin: 1%;
+        }
+    </style>
+</head>
+
+<body>
+    <header>
+        <h1><a style="color: white; text-decoration: none;" href="/">SimRail Logs [<span style="color:hotpink">PL2</span>]</a></h1>
+    </header>
+
+    <h2>Wyszukaj posterunek lub osobe</h2>
+
+    <div class="container">
+        <input type="text" id="search">
+        <button onclick="search()">Szukaj</button>
+    </div>
+
+    <h2>Ostatnie opuszczenia posterunków</h2>
+
+    <ul>
+        <% records.forEach(record => { %>
+            <li>
+                <details>
+                    
+                    <summary>[<span style="color:lightskyblue"><%= record.stationShort %></span>] <span style="color: lightskyblue"><%= record.stationName %></span> - <span style="color:hotpink"><%= record.userUsername %></span>
+                    <p style="margin-bottom: 0; opacity: 0.5;"><%= dayjs(record.leftDate).format('HH:mm DD/MM/YYYY') %></p></summary>
+                    <p>Data dołączenia: <%= dayjs(record.joinedDate).format('HH:mm DD/MM/YYYY') %> (<%= dayjs(record.joinedDate).fromNow() %>)</p>
+                    <p>Data wyjścia: <%= dayjs(record.leftDate).format('HH:mm DD/MM/YYYY') %> (<%= dayjs(record.leftDate).fromNow() %>)</p>
+                    <a href="/details/<%= record.id %>">
+                        <button>Więcej</button>
+                      </a>
+                </details>
+            </li>
+        <% }) %>
+    </ul>
+
+    <script>
+        function search() {
+            location.href = '/search?q=' + document.getElementById('search').value
+        }
+        document.getElementById('search').addEventListener("keyup", (event) => {
+            if (event.key === "Enter") 
+                search();
+            
+        });
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/http/views/search.ejs b/src/http/views/search.ejs
new file mode 100644
index 0000000..80dc5e5
--- /dev/null
+++ b/src/http/views/search.ejs
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>simrail.alekswilc.dev</title>
+    <meta name="description" content="Simrail Utils">
+    <meta property="og:title" content="simrail.alekswilc.dev">
+    <meta property="og:url" content="https://simrail.alekswilc.dev/search?q=<%=q%>">
+    <meta property="og:description" content="Simrail Utils">
+    <meta property="og:type" content="website">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/open-fonts@1.1.1/fonts/inter.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">
+
+    <style>
+        p {
+            margin: 1%;
+        }
+    </style>
+
+</head>
+
+<body>
+    <header>
+        <h1><a style="color: white; text-decoration: none;" href="/">SimRail Logs [<span
+                    style="color:hotpink">PL2</span>]</a></h1>
+    </header>
+
+    <h2>Wyszukaj posterunek lub osobe</h2>
+
+
+    <div class="container">
+        <input type="text" id="search" value="<%=q%>">
+        <button onclick="search()">Szukaj</button>
+    </div>
+
+    <h2>Wyniki wyszukiwania</h2>
+
+    <ul>
+        <% records.forEach(record=> { %>
+            <li>
+                <details>
+
+                    <summary>[<span style="color:lightskyblue">
+                            <%= record.stationShort %>
+                        </span>] <span style="color: lightskyblue">
+                            <%= record.stationName %>
+                        </span> - <span style="color:hotpink">
+                            <%= record.userUsername %>
+                        </span>
+                        <p style="margin-bottom: 0; opacity: 0.5;">
+                            <%= dayjs(record.leftDate).format('HH:mm DD/MM/YYYY') %>
+                        </p>
+                    </summary>
+                    <p>Data dołączenia: <%= dayjs(record.joinedDate).format('HH:mm DD/MM/YYYY') %> (<%=
+                                dayjs(record.joinedDate).fromNow() %>)</p>
+                    <p>Data wyjścia: <%= dayjs(record.leftDate).format('HH:mm DD/MM/YYYY') %> (<%=
+                                dayjs(record.leftDate).fromNow() %>)</p>
+                    <a href="/details/<%= record.id %>">
+                        <button>Więcej</button>
+                    </a>
+                </details>
+            </li>
+            <% }) %>
+    </ul>
+
+    <script>
+        function search() {
+            location.href = '/search?q=' + document.getElementById('search').value
+        }
+        document.getElementById('search').addEventListener("keyup", (event) => {
+            if (event.key === "Enter") 
+                search();
+            
+        });
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
