diff --git a/common/common.scss b/common/common.scss
index 5e2d800..eb62f16 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -11,3 +11,4 @@
 @import "box-view";
 @import "chat";
 @import "misc";
+@import "mobile-stuff";
diff --git a/scss/box-view.scss b/scss/box-view.scss
index 8b7d04a..49bd2a1 100644
--- a/scss/box-view.scss
+++ b/scss/box-view.scss
@@ -22,6 +22,9 @@
 }
 
 .experimental-screen {
+  @include breakpoint(medium) {
+    display: none;
+  }
   max-width: unset !important;
   .has-full-page-chat & {
     display: none;
diff --git a/scss/buttons.scss b/scss/buttons.scss
index 7210f8d..dcc931d 100644
--- a/scss/buttons.scss
+++ b/scss/buttons.scss
@@ -34,8 +34,20 @@
   }
 }
 
-.btn-default.sidebar-new-topic-button {
+.discourse-no-touch .btn-default.sidebar-new-topic-button {
   border: none;
+  &:hover {
+    border: none;
+  }
+}
+
+.discourse-no-touch .btn-default.topic-drafts-menu-trigger {
+  border: none;
+  margin-left: 2px;
+  &:hover {
+    border: none;
+    box-shadow: none;
+  }
 }
 
 .btn-default {
diff --git a/scss/header.scss b/scss/header.scss
index b2aec8d..cc6a1b0 100644
--- a/scss/header.scss
+++ b/scss/header.scss
@@ -1,7 +1,9 @@
 .d-header {
   box-shadow: none;
   background: var(--background-color);
-  padding-bottom: 1.5em;
+  @include breakpoint(extra-large, $rule: min-width) {
+    padding-bottom: 1.5em;
+  }
 }
 
 .has-full-page-chat .d-header {
diff --git a/scss/hiddenstuff.scss b/scss/hiddenstuff.scss
index 5e0f7a4..0af6595 100644
--- a/scss/hiddenstuff.scss
+++ b/scss/hiddenstuff.scss
@@ -3,6 +3,8 @@
 .list-controls #create-topic,
 .notifications-button-footer .reason .text,
 .pinned-button .reason .text,
-.more-topics__browse-more {
+.more-topics__browse-more,
+//footer-message might cause issues, not sure what possible stuff can be in there, but the general idea is to hide it bcs having an ugly H3 (what?) CTA at the bottom is just… ugly imo
+.footer-message {
   display: none;
 }
diff --git a/scss/main.scss b/scss/main.scss
index 9651ead..42641b9 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -1,11 +1,17 @@
 html:not(:has(.has-full-page-chat)) {
+  // @include breakpoint(extra-large, $rule: min-width) {
   background-color: var(--background-color);
+  // }
 }
 
 :root {
   --main-grid-gap: 2em;
 }
 
+#main-outlet-wrapper {
+  gap: var(--main-grid-gap);
+}
+
 body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
   grid-column-gap: var(--main-grid-gap);
 }
@@ -18,13 +24,16 @@ body.has-sidebar-page #main-outlet-wrapper {
 }
 
 body:not(.has-full-page-chat) {
-  background-color: var(--background-color);
+  @include breakpoint(extra-large, $rule: min-width) {
+    background-color: var(--background-color);
+  }
   #main-outlet-wrapper {
-    // margin-top: 1.5rem;
-    @media screen and (max-width: 485px) {
+    @include breakpoint(medium) {
       --main-grid-gap: 0;
     }
-    gap: var(--main-grid-gap);
+    @include breakpoint(tablet, $rule: min-width) {
+      gap: var(--main-grid-gap);
+    }
     // height: calc(100vh - var(--header-offset) - 4rem);
     // box-sizing: border-box;
     // > * {
@@ -57,15 +66,16 @@ body:not(.has-full-page-chat) {
       .container.groups-index,
       .body-page,
       .container.badges,
-      .topic-above-footer-buttons-outlet .presence-users {
+      .topic-above-footer-buttons-outlet .presence-users,
+      .global-notice {
         max-width: 1000px;
         margin-inline: auto;
         padding-inline: 1.5em;
-        @media screen and (max-width: 425px) {
-          padding-inline: 0.5em;
-        }
       }
       border-radius: var(--d-border-radius-large);
+      @include breakpoint(medium) {
+        border-radius: 0px;
+      }
       border-radius: 1.25rem;
       // box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
       background-color: var(--d-content-background);
diff --git a/scss/mobile-stuff.scss b/scss/mobile-stuff.scss
new file mode 100644
index 0000000..c72a98a
--- /dev/null
+++ b/scss/mobile-stuff.scss
@@ -0,0 +1,147 @@
+//temp sepeate file to avoid merge hell… to be distributed later
+@include breakpoint(medium) {
+  html,
+  .d-header {
+    background-color: var(--secondary);
+  }
+}
+#main-outlet-wrapper {
+  .navigation-topics & {
+    @include breakpoint(mobile-extra-large) {
+      padding: 0;
+    }
+  }
+}
+#main-outlet {
+  @include breakpoint(mobile-extra-large) {
+    padding-top: var(--spacing-block-sm);
+  }
+
+  .list-controls {
+    @include breakpoint(mobile-extra-large) {
+      padding-inline: var(
+        --spacing-inline-m
+      ) !important; //override will be fixed when the whole chat page shenanigans is resolved
+      padding-block: var(--spacing-block-s);
+      border-bottom: 1px solid var(--primary-200);
+    }
+    .navigation-container {
+      @include breakpoint(mobile-extra-large) {
+        gap: var(--spacing-inline-s);
+        //dont know why we even hide this crucial navigation on mobile
+        .category-breadcrumb.hidden,
+        .category-breadcrumb {
+          display: flex !important;
+          gap: var(--spacing-inline-sm);
+          .select-kit-header {
+            padding-block: var(--spacing-block-s);
+            padding-inline: 0;
+            border: 0;
+          }
+        }
+        .btn-default {
+          border: 0;
+          margin-right: 0;
+          .d-icon {
+            font-size: var(--font-up-1);
+          }
+        }
+        .fk-d-button-tooltip {
+          margin-right: 0;
+          margin-left: var(
+            --spacing-inline-xs
+          ); //pure visual correction for horitzontal alignment
+          &:has(#create-topic) {
+            order: 1;
+          }
+        }
+      }
+      #navigation-bar,
+      .navigation-controls,
+      .category-breadcrumb {
+        @include breakpoint(mobile-extra-large) {
+          margin-bottom: 0;
+        }
+      }
+      .navigation-controls {
+        gap: var(--spacing-inline-s);
+      }
+    }
+  }
+
+  .list-container {
+    @include breakpoint(mobile-extra-large) {
+      padding-inline: 0 !important;
+    }
+
+    .topic-list-body {
+      @include breakpoint(mobile-extra-large) {
+        border-top: 0;
+        padding-top: 0;
+      }
+    }
+
+    .topic-list-item {
+      @include breakpoint(mobile-extra-large) {
+        box-shadow: none;
+        border-radius: 0;
+        //to be moved to topic card segment for general use
+        // .navigation-category & {
+        //   .badge-category__wrapper {
+        //     display: none;
+        //   }
+        // }
+      }
+    }
+  }
+
+  #topic-title {
+    @include breakpoint(mobile-extra-large) {
+      padding-inline: var(--spacing-inline-m) !important;
+      .topic-category {
+        order: -1;
+      }
+      //make mixin of this
+      //   .badge-category__wrapper {
+      //     border-radius: var(--d-border-radius);
+      //     padding: var(--spacing-inline-xs) var(--spacing-inline-s);
+      //     background-color: light-dark(
+      //       oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
+      //       oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
+      //     );
+      //   }
+
+      //   .badge-category__name {
+      //     color: light-dark(
+      //       oklch(from var(--category-badge-color) 20% calc(c * 1) h),
+      //       oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
+      //     );
+      //   }
+    }
+  }
+  .container.posts {
+    @include breakpoint(mobile-extra-large) {
+      padding-inline: var(--spacing-inline-m) !important;
+
+      .main-avatar .avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: var(--d-border-radius);
+      }
+
+      .topic-body {
+        .topic-meta-data {
+          .username {
+            font-size: var(--font-0-rem);
+          }
+        }
+        .contents {
+          padding-top: var(--spacing-block-m);
+          p {
+            line-height: 1.65;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/scss/sidebar.scss b/scss/sidebar.scss
index 706bfc5..31776be 100644
--- a/scss/sidebar.scss
+++ b/scss/sidebar.scss
@@ -1,4 +1,10 @@
 .sidebar-wrapper {
+  @include breakpoint(medium) {
+    background: var(--secondary);
+    .sidebar-footer-wrapper {
+      background: var(--secondary);
+    }
+  }
   .has-full-page-chat &,
   .has-full-page-chat & .sidebar-footer-wrapper {
     background: transparent;
diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss
index f410b09..d9ad6ec 100644
--- a/scss/topic-cards.scss
+++ b/scss/topic-cards.scss
@@ -24,7 +24,7 @@ $extra-large: 1280px;
   display: flex;
   flex-direction: column;
   gap: 1em;
-  @media screen and (max-width: $extra-small) {
+  @include breakpoint(medium) {
     gap: 0.5em;
   }
 }
@@ -122,7 +122,7 @@ body.user-messages-page .topic-list-item {
       "topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
       "avatar author . . . . . likes-replies";
   }
-  @media screen and (max-width: $extra-small) {
+  @include breakpoint(medium) {
     border: none;
     border-bottom: 1px solid var(--primary-200);
   }
diff --git a/scss/topic.scss b/scss/topic.scss
index 6bcdae6..ab26c8c 100644
--- a/scss/topic.scss
+++ b/scss/topic.scss
@@ -47,6 +47,14 @@
 }
 
 #topic-title {
+  @include breakpoint(extra-large, $rule: min-width) {
+    z-index: 999;
+    padding: var(--spacing-block-l) var(--spacing-inline-xl);
+    position: sticky;
+    margin-bottom: 0;
+    top: var(--header-offset);
+    background: var(--d-content-background);
+  }
   z-index: z("composer", "content") - 1;
   padding: var(--spacing-block-l) var(--spacing-inline-xl);
   position: sticky;
@@ -55,7 +63,6 @@
   background: var(--d-content-background);
   border-radius: var(--d-border-radius-large);
 }
-
 .container.posts,
 .more-topics__container,
 #topic-footer-buttons {