diff --git a/src/components/Views/SearchView.tsx b/src/components/Views/SearchView.tsx
index 8a32a767..8382412f 100644
--- a/src/components/Views/SearchView.tsx
+++ b/src/components/Views/SearchView.tsx
@@ -3,11 +3,12 @@ import { For, Show, createSignal, onMount } from 'solid-js'
 import { useSearchParams } from '@solidjs/router'
 import { useFeed } from '~/context/feed'
 import { useLocalize } from '~/context/localize'
-import type { SearchResult } from '~/graphql/schema/core.gen'
+import type { SearchResult, Shout } from '~/graphql/schema/core.gen'
 import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll'
 import { ArticleCard } from '../Feed/ArticleCard'
 
 import '~/styles/views/Search.module.scss'
+import { LoadMoreItems, LoadMoreWrapper } from '../_shared/LoadMoreWrapper'
 
 type Props = {
   query: string
@@ -31,19 +32,22 @@ export const SearchView = (props: Props) => {
 
   const loadMore = async () => {
     saveScrollPosition()
+    let results: Shout[] = []
     if (query()) {
       console.log(query())
-      const { hasMore } = await loadShoutsSearch({
+      const { hasMore, newShouts } = await loadShoutsSearch({
         text: query(),
         offset: offset(),
         limit: LOAD_MORE_PAGE_SIZE
       })
       setIsLoadMoreButtonVisible(hasMore)
       setOffset(offset() + LOAD_MORE_PAGE_SIZE)
+      results = newShouts
     } else {
       console.warn('[SaerchView] no query found')
     }
     restoreScrollPosition()
+    return results as LoadMoreItems
   }
 
   onMount(() => {
@@ -95,13 +99,19 @@ export const SearchView = (props: Props) => {
 
         <div class="floor">
           <div class="row">
-            <For each={sortedFeed()}>
-              {(article) => (
-                <div class="col-md-6">
-                  <ArticleCard article={article} desktopCoverSize="L" />
-                </div>
-              )}
-            </For>
+            <LoadMoreWrapper
+              pageSize={LOAD_MORE_PAGE_SIZE}
+              hidden={!isLoadMoreButtonVisible()}
+              loadFunction={loadMore}
+            >
+              <For each={sortedFeed()}>
+                {(article) => (
+                  <div class="col-md-6">
+                    <ArticleCard article={article} desktopCoverSize="L" />
+                  </div>
+                )}
+              </For>
+            </LoadMoreWrapper>
 
             <Show when={isLoadMoreButtonVisible()}>
               <div class="col-md-6">
diff --git a/src/styles/_grid.scss b/src/styles/_grid.scss
index 91ea986c..147aefa0 100644
--- a/src/styles/_grid.scss
+++ b/src/styles/_grid.scss
@@ -104,12 +104,12 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 @mixin make-col-offset($size, $columns: $grid-columns) {
   $num: calc($size / $columns);
 
-  margin-left: if($num == 0, 0, calc(100% * #{$num}));
+  margin-left: if($num ==0, 0, calc(100% * #{$num}));
 }
 
 // Миксин row-cols
 @mixin row-cols($count) {
-  > * {
+  >* {
     flex: 0 0 auto;
     width: 100% / $count;
   }
@@ -118,7 +118,7 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 // Миксин make-grid-columns
 @mixin make-grid-columns($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
   @each $breakpoint in map-keys($breakpoints) {
-    $infix: if($breakpoint == 'xs', '', "-#{$breakpoint}");
+    $infix: if($breakpoint =='xs', '', "-#{$breakpoint}");
 
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Добавляем класс col-auto
@@ -143,14 +143,31 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 @mixin make-justify-content($breakpoints: $grid-breakpoints) {
   @each $breakpoint in map-keys($breakpoints) {
     @include media-breakpoint-up($breakpoint, $breakpoints) {
-      $infix: if($breakpoint == 'xs', "", "-#{$breakpoint}");
+      $infix: if($breakpoint =='xs', "", "-#{$breakpoint}");
 
-      .#{$prefix}justify-content#{$infix}-start   { justify-content: flex-start !important; }
-      .#{$prefix}justify-content#{$infix}-end     { justify-content: flex-end !important; }
-      .#{$prefix}justify-content#{$infix}-center  { justify-content: center !important; }
-      .#{$prefix}justify-content#{$infix}-between { justify-content: space-between !important; }
-      .#{$prefix}justify-content#{$infix}-around  { justify-content: space-around !important; }
-      .#{$prefix}justify-content#{$infix}-evenly  { justify-content: space-evenly !important; }
+      .#{$prefix}justify-content#{$infix}-start {
+        justify-content: flex-start !important;
+      }
+
+      .#{$prefix}justify-content#{$infix}-end {
+        justify-content: flex-end !important;
+      }
+
+      .#{$prefix}justify-content#{$infix}-center {
+        justify-content: center !important;
+      }
+
+      .#{$prefix}justify-content#{$infix}-between {
+        justify-content: space-between !important;
+      }
+
+      .#{$prefix}justify-content#{$infix}-around {
+        justify-content: space-around !important;
+      }
+
+      .#{$prefix}justify-content#{$infix}-evenly {
+        justify-content: space-evenly !important;
+      }
     }
   }
 }
@@ -159,10 +176,12 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 @mixin make-display-classes($breakpoints: $grid-breakpoints) {
   @each $breakpoint in map-keys($breakpoints) {
     @include media-breakpoint-up($breakpoint, $breakpoints) {
-      $infix: if($breakpoint == 'xs', "", "-#{$breakpoint}");
+      $infix: if($breakpoint =='xs', "", "-#{$breakpoint}");
 
       @each $value in $displays {
-        .#{$prefix}d#{$infix}-#{$value} { display: $value !important; }
+        .#{$prefix}d#{$infix}-#{$value} {
+          display: $value !important;
+        }
       }
     }
   }
@@ -172,11 +191,48 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 @mixin make-print-display-classes() {
   @media print {
     @each $value in $displays {
-      .#{$prefix}d-print-#{$value} { display: $value !important; }
+      .#{$prefix}d-print-#{$value} {
+        display: $value !important;
+      }
     }
   }
 }
 
+// Добавляем новый миксин для генерации классов порядка
+@mixin make-order-classes($breakpoints: $grid-breakpoints) {
+  @each $breakpoint in map-keys($breakpoints) {
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      $infix: if($breakpoint =='xs', "", "-#{$breakpoint}");
+
+      .order#{$infix}-first {
+        order: -1 !important;
+      }
+
+      .order#{$infix}-last {
+        order: 9999 !important;
+      }
+
+      .order#{$infix}-0 {
+        order: 0 !important;
+      }
+
+      @for $i from 1 through 5 {
+        .order#{$infix}-#{$i} {
+          order: $i !important;
+        }
+      }
+    }
+  }
+}
+
+// Добавляем вызов нового миксина в конец файла
+@include make-grid-columns($grid-columns, $grid-breakpoints);
+@include make-display-classes;
+@include make-print-display-classes;
+@include make-justify-content;
+@include make-order-classes;
+
+
 // Генерация классов контейнера и ряда
 .container,
 .container-fluid {
@@ -189,9 +245,4 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
   > * {
     @include make-col-ready;
   }
-}
-
-@include make-grid-columns($grid-columns, $grid-breakpoints);
-@include make-display-classes;
-@include make-print-display-classes;
-@include make-justify-content;
+}
\ No newline at end of file
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 61144851..32cac9e8 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -46,12 +46,6 @@ section {
   margin: 0;
 }
 
-#svelte {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
 .wide-container {
   @include media-breakpoint-up(sm) {
     padding: 0 $container-padding-x;
@@ -721,24 +715,6 @@ figure {
   }
 }
 
-.row {
-  @include media-breakpoint-down(md) {
-    > * {
-      margin-bottom: 2.4rem;
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-    margin-left: divide(-$container-padding-x, 2);
-    margin-right: divide(-$container-padding-x, 2);
-
-    > * {
-      padding-left: divide($container-padding-x, 2);
-      padding-right: divide($container-padding-x, 2);
-    }
-  }
-}
-
 #app {
   display: flex;
   flex-direction: column;
@@ -761,15 +737,6 @@ figure {
   padding-top: 0;
 }
 
-.container {
-  @include media-breakpoint-down(sm) {
-    // padding: 0 $container-padding-x * 0.5;
-  }
-
-  max-width: 1500px;
-  width: auto;
-}
-
 .container--static-page {
   @include media-breakpoint-up(md) {
     padding-top: 1.5em;
@@ -841,14 +808,6 @@ figure {
   }
 }
 
-.load-more-container {
-  text-align: center;
-
-  button {
-    padding: 0.6em 1.5em;
-  }
-}
-
 details {
   @include media-breakpoint-down(md) {
     padding-left: 3rem;