diff --git a/pages/components/Sidebar.js b/pages/components/Sidebar.js
index 9a4e13a..4d3c535 100644
--- a/pages/components/Sidebar.js
+++ b/pages/components/Sidebar.js
@@ -1,13 +1,20 @@
+import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import RecentTask from './RecentTask';
 
 const Sidebar = () => {
+    const [recentTasks, setRecentTasks] = useState([]);
+
+    const handleSearch = e => {
+        const searchPhrase = e.target.value;
+    }
+
     return (
         <section className="sidebar">
             <div className="search-area">
                 <FontAwesomeIcon icon={faSearch} />
-                <input type="text" placeholder="Wyszukaj"/>
+                <input type="text" placeholder="Wyszukaj" onChange={handleSearch}/>
             </div>
             <div className="recent-task-list">
                 <div>Ostatnie zadania</div>
diff --git a/style.css b/style.css
index 0de38c8..4ad8ba4 100644
--- a/style.css
+++ b/style.css
@@ -275,7 +275,8 @@ button:hover {
 /* tasks */
 
 main {
-    display: flex;
+    display: grid;
+    grid: auto / 3fr 7fr;
     margin: 0;
     padding: 0;
     height: 100%;
@@ -283,17 +284,17 @@ main {
 
 }
 
-section.task-description{
-    width: 100%;
-}
+/* section.task-description{
+    width: 70%;
+} */
 
 div.task-description {
     /* position: absolute;
     left: 350px; */
     display: flex;
     flex-direction: column;
-    width: 100%;
-    max-width: 900px;
+    /* width: 100%; */
+    /* max-width: 900px; */
     margin: 10%;
 
     line-height: 1.2em;
@@ -411,7 +412,7 @@ div.task-description {
 
 .sidebar {
     /* position: absolute; */
-    width: 500px;
+    /* width: 30%; */
     height: 100%;
     border: var(--sidebar-border);
     background: #F6F9FC;