diff --git a/README.md b/README.md
index 47091fe..1774388 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,6 @@
 # Insightful guardian
-![](https://images.unsplash.com/photo-1486944936280-f152c82ac151?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
+<!-- ![](https://images.unsplash.com/photo-1486944936280-f152c82ac151?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) -->
+![](docs/scr1.jpeg)
 This is a repository created for learning goals, I'm actually trying to create an analog of telegra.ph, but with a different content moderation and search. I see the problem and try to fix it, but there is no docker image or anything else that can be deployed on a production server. Where I know how to do more efficiently I write, otherwise I ask generative AI. 
 There's fullstack development on `FastAPI`, `React`, `MongoDB`.
 
diff --git a/docs/scr1.jpeg b/docs/scr1.jpeg
new file mode 100644
index 0000000..f8032e8
Binary files /dev/null and b/docs/scr1.jpeg differ
diff --git a/frontend/src/components/CategoryWidget.js b/frontend/src/components/CategoryWidget.js
index 2c319ab..884d5b0 100644
--- a/frontend/src/components/CategoryWidget.js
+++ b/frontend/src/components/CategoryWidget.js
@@ -19,12 +19,15 @@ const CategoryWidget = () => {
   //   return null;
   // }
   let isLoading = false;
+
   const categories = [
-    {id: 1, name: 'temp'}, {id: 2, name: 'test2temp'}
-  , {id: 3, name: 'test3temp'}, {id: 4, name: 'lorem'}
-  , {id: 5, name: 'test5'}, {id: 6, name: 'test6temp'}
-  , {id: 7, name: 'test7temp'}, {id: 8, name: 'test8'}
+    { id: 1, name: 'Web Dev / backend' },
+    { id: 2, name: 'Web3.0 / Blockchain' }, { id: 3, name: 'I know nothing' },
+    { id: 4, name: 'Pentest web' }, { id: 5, name: 'DevSecOps' },
+    { id: 6, name: 'ML tech.' }, { id: 7, name: 'Linux adm.' },
+    { id: 8, name: 'Mobile pentest' }
   ];
+  
   return (
     <div className="categoryWidget">
       <h2>Categories</h2>
diff --git a/frontend/src/components/IndexAllPosts.js b/frontend/src/components/IndexAllPosts.js
index a3d0da7..fc05c80 100644
--- a/frontend/src/components/IndexAllPosts.js
+++ b/frontend/src/components/IndexAllPosts.js
@@ -50,7 +50,10 @@ const IndexAllPosts = () => {
         <div className="IndexAllPosts">
             <h1>Posts.</h1>
             {isLoading ? (
+                <>
                 <img src={loadingGif} alt="Loading..." />
+                <h3>Loading . . . </h3>
+                </>
             ) : (
                 <PostList posts={posts} />
             )}
@@ -59,8 +62,9 @@ const IndexAllPosts = () => {
                 totalPages={totalPages}
                 onPageChange={handlePageChange}
             />
-        </div></div>
+        </div>
         <SearchInput query={query} setQuery={setQuery} handleSearch={handleSearch} />
+        </div>
         </>
     );
 };
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 1e46815..abdb97c 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -211,6 +211,13 @@ footer .footer-content a:hover {
 .IndexPage {
   display: flex;
 }
+.IndexPage .search-container {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  margin: 0;
+  padding: 0;
+}
 
 .IndexAllPosts {
   background-color: #f5f5f5;
@@ -219,6 +226,7 @@ footer .footer-content a:hover {
   margin-left: 3rem;
   margin-right: 3rem;
   padding: 2rem;
+  flex: 1 0;
 }
 .IndexAllPosts h1 {
   color: #333;
diff --git a/frontend/src/styles.css.map b/frontend/src/styles.css.map
index 2a048ec..1e1fd2a 100644
--- a/frontend/src/styles.css.map
+++ b/frontend/src/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["styles/base/_reset.scss","styles/layout/_header.scss","styles/layout/_footer.scss","styles/layout/_category.scss","styles/components/_link.scss","styles/components/_pagination.scss","styles/components/_loading.scss","styles/pages/_index.scss","styles/pages/_post-form.scss","styles/pages/_postpage.scss","styles/pages/_searchpage.scss"],"names":[],"mappings":";AAAA;EACI;;;AAEJ;EACI;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;ACdJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACRJ;EACI;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AC1BV;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAGJ;EAnCA;IAoCE;IACA;IACA;IACA;;EACA;IACE;IACA;IACA;IACA;IACA;;EAEF;IACE;;EACA;IACE;IACA;IACA;IACA;IACA;IACA;;;;ACvDN;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;;;AAGP;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;;ACnCT;EACI;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AC9BR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;;ACrBN;EACI;;;AAEJ;EACI;EACA;EACA;EAEA;EACA;EAEA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;;AAGJ;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;IACE;;;AAKN;EAzEJ;IA0EQ;IACA;;;;AC9ER;EACI;EACA;EACA;EAEA;EACA;EACA;EAEA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EAEA;EAGA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;;AAKR;EACI;EAEA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;;;AAMZ;EACI;IACI;IACA;;EAEJ;IACI;IACA;IACA;IACA;;EAEJ;IACI;;;ACtHR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;;ACRR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA,eAdY;EAeZ;;AAEA;EACE,cApBU;EAqBV;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA,kBA/BY;EAgCZ;EACA,eA/BY;EAgCZ;EACA;;AAEA;EACE","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["styles/base/_reset.scss","styles/layout/_header.scss","styles/layout/_footer.scss","styles/layout/_category.scss","styles/components/_link.scss","styles/components/_pagination.scss","styles/components/_loading.scss","styles/pages/_index.scss","styles/pages/_post-form.scss","styles/pages/_postpage.scss","styles/pages/_searchpage.scss"],"names":[],"mappings":";AAAA;EACI;;;AAEJ;EACI;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;ACdJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACRJ;EACI;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AC1BV;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAGJ;EAnCA;IAoCE;IACA;IACA;IACA;;EACA;IACE;IACA;IACA;IACA;IACA;;EAEF;IACE;;EACA;IACE;IACA;IACA;IACA;IACA;IACA;;;;ACvDN;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;;;AAGP;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;;ACnCT;EACI;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AC9BR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;;ACrBN;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;;;AAGR;EACI;EACA;EACA;EAEA;EACA;EAEA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;IACA;;;AAKR;EAzEJ;IA0EQ;IACA;;;;ACrFR;EACI;EACA;EACA;EAEA;EACA;EACA;EAEA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EAEA;EAGA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;;AAKR;EACI;EAEA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;;;AAMZ;EACI;IACI;IACA;;EAEJ;IACI;IACA;IACA;IACA;;EAEJ;IACI;;;ACtHR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;;ACRR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA,eAdY;EAeZ;;AAEA;EACE,cApBU;EAqBV;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA,kBA/BY;EAgCZ;EACA,eA/BY;EAgCZ;EACA;;AAEA;EACE","file":"styles.css"}
\ No newline at end of file
diff --git a/frontend/src/styles/pages/_index.scss b/frontend/src/styles/pages/_index.scss
index 933cd45..7cb4ce5 100644
--- a/frontend/src/styles/pages/_index.scss
+++ b/frontend/src/styles/pages/_index.scss
@@ -1,5 +1,12 @@
 .IndexPage {
     display: flex;
+    .search-container {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        margin: 0;
+        padding: 0;
+    }
 }
 .IndexAllPosts {
     background-color: #f5f5f5;
@@ -10,7 +17,7 @@
     margin-right: 3rem;
     //max-width: 650px;
     padding: 2rem;
-
+    flex: 1 0;
     h1 {
         color: #333;
         font-size: 2.5rem;
@@ -59,19 +66,19 @@
     }
     
     .posts {
-    display: flex; /* Разбить список на flexbox */
-    flex-wrap: wrap; /* Разрешить перенос элементов на новую строку */
-    justify-content: space-around; /* Распределить элементы равномерно */
-        
-    .post {
-        flex: 1 0 300px; 
-        margin: 10px;
-    }
-    @media (max-width: 768px) {
-        .posts .post {
-          flex: 1 0 50%; 
+        display: flex; /* Разбить список на flexbox */
+        flex-wrap: wrap; /* Разрешить перенос элементов на новую строку */
+        justify-content: space-around; /* Распределить элементы равномерно */
+            
+        .post {
+            flex: 1 0 300px; 
+            margin: 10px;
+        }
+        @media (max-width: 768px) {
+            .posts .post {
+            flex: 1 0 50%; 
+            }
         }
-      }
     
     }
     @media (max-width: 499px) {