diff --git a/.ai/rules/frontend.md b/.ai/rules/frontend.md
index 609ab45040..0e03943864 100644
--- a/.ai/rules/frontend.md
+++ b/.ai/rules/frontend.md
@@ -122,6 +122,85 @@ export const Wrapper = styled(FlexGroup)`
 `
 ```
 
+### Use Gap Prop Instead of Custom Margins
+
+**Prefer `gap` prop on layout components** instead of custom margins for spacing between elements:
+
+```typescript
+// ✅ GOOD: Use gap prop
+<Row align="center" justify="between" gap="l">
+  <FlexItem>Item 1</FlexItem>
+  <FlexItem>Item 2</FlexItem>
+</Row>
+```
+
+### Use Theme Spacing Instead of Magic Numbers
+
+**Always use theme spacing values** instead of hardcoded pixel values:
+
+```typescript
+// ✅ GOOD: Use theme spacing
+export const Container = styled(Row)`
+  height: ${({ theme }) => theme.core.space.space500};
+  padding: 0 ${({ theme }) => theme.core.space.space200};
+  margin-bottom: ${({ theme }) => theme.core.space.space200};
+`;
+
+// ❌ BAD: Using magic numbers
+export const Container = styled(Row)`
+  height: 64px;
+  padding: 0 16px;
+  margin-bottom: 16px;
+`;
+```
+
+### Use Semantic Colors from Theme
+
+**Always use semantic colors** from the theme instead of CSS variables or hardcoded colors:
+
+```typescript
+// ✅ GOOD: Use semantic colors
+export const Header = styled(Row)`
+  background-color: ${({ theme }) =>
+    theme.semantic.color.background.neutral100};
+  border-bottom: 1px solid
+    ${({ theme }) => theme.semantic.color.border.neutral500};
+`;
+
+// ❌ BAD: Using deprecated EUI CSS variables
+export const Header = styled(Row)`
+  background-color: var(--euiColorEmptyShade);
+  border-bottom: 1px solid var(--separatorColor);
+`;
+```
+
+### Use Layout Components (Row/Col/FlexGroup) Instead of div
+
+**Prefer layout components** from the layout system instead of regular `div` elements:
+
+```typescript
+// ✅ GOOD: Use Row component
+import { Row } from 'uiSrc/components/base/layout/flex'
+
+export const PageHeader = styled(Row)`
+  height: ${({ theme }) => theme.core.space.space500};
+  background-color: ${({ theme }) =>
+    theme.semantic.color.background.neutral100};
+`
+
+<PageHeader align="center" justify="between" gap="l">
+  {children}
+</PageHeader>
+
+// ❌ BAD: Using div with flex properties
+export const PageHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 64px;
+`
+```
+
 ### Conditional Styling
 
 Use `$` prefix for transient props that shouldn't pass to DOM:
diff --git a/redisinsight/ui/src/templates/home-page-template/HomePageTemplate.styles.ts b/redisinsight/ui/src/templates/home-page-template/HomePageTemplate.styles.ts
new file mode 100644
index 0000000000..85a073d4c6
--- /dev/null
+++ b/redisinsight/ui/src/templates/home-page-template/HomePageTemplate.styles.ts
@@ -0,0 +1,25 @@
+import styled from 'styled-components'
+import { Row } from 'uiSrc/components/base/layout/flex'
+import { type Theme } from 'uiSrc/components/base/theme/types'
+
+export const PageDefaultHeader = styled(Row)`
+  height: ${({ theme }: { theme: Theme }) => theme.core.space.space800};
+  background-color: ${({ theme }: { theme: Theme }) =>
+    theme.semantic.color.background.neutral100};
+  border-bottom: 1px solid
+    ${({ theme }: { theme: Theme }) => theme.semantic.color.border.neutral500};
+  padding: 0 ${({ theme }: { theme: Theme }) => theme.core.space.space200};
+  margin-bottom: ${({ theme }: { theme: Theme }) => theme.core.space.space200};
+`
+
+export const PageWrapper = styled.div`
+  height: calc(
+    100% - ${({ theme }: { theme: Theme }) => theme.core.space.space800} -
+      ${({ theme }: { theme: Theme }) => theme.core.space.space200}
+  );
+  overflow: hidden;
+`
+
+export const ExplorePanelWrapper = styled.div`
+  padding-bottom: ${({ theme }: { theme: Theme }) => theme.core.space.space200};
+`
diff --git a/redisinsight/ui/src/templates/home-page-template/HomePageTemplate.tsx b/redisinsight/ui/src/templates/home-page-template/HomePageTemplate.tsx
index bc112f926d..dad1f9c67f 100644
--- a/redisinsight/ui/src/templates/home-page-template/HomePageTemplate.tsx
+++ b/redisinsight/ui/src/templates/home-page-template/HomePageTemplate.tsx
@@ -11,8 +11,12 @@ import { OAuthSocialSource } from 'uiSrc/slices/interfaces'
 import { CopilotTrigger, InsightsTrigger } from 'uiSrc/components/triggers'
 
 import { FlexGroup, FlexItem } from 'uiSrc/components/base/layout/flex'
-import styles from './styles.module.scss'
 import { ProgressBarLoader } from 'uiSrc/components/base/display'
+import {
+  ExplorePanelWrapper,
+  PageDefaultHeader,
+  PageWrapper,
+} from './HomePageTemplate.styles'
 import { instancesSelector as databaseInstancesSelector } from 'uiSrc/slices/instances/instances'
 import { instancesSelector as rdiInstancesSelector } from 'uiSrc/slices/rdi/instances'
 
@@ -40,11 +44,15 @@ const HomePageTemplate = (props: Props) => {
   return (
     <>
       {loading && (
-        <ProgressBarLoader color="primary" data-testid="progress-key-stream" absolute />
+        <ProgressBarLoader
+          color="primary"
+          data-testid="progress-key-stream"
+          absolute
+        />
       )}
-      <div className={styles.pageDefaultHeader}>
+      <PageDefaultHeader align="center" justify="between" gap="l">
         <HomeTabs />
-        <FlexGroup gap="l">
+        <FlexGroup align="center" justify="end" gap="l">
           {isAnyChatAvailable && (
             <FlexItem>
               <CopilotTrigger />
@@ -61,12 +69,12 @@ const HomePageTemplate = (props: Props) => {
             </FlexItem>
           </FeatureFlagComponent>
         </FlexGroup>
-      </div>
-      <div className={styles.pageWrapper}>
-        <ExplorePanelTemplate panelClassName={styles.explorePanel}>
-          {children}
-        </ExplorePanelTemplate>
-      </div>
+      </PageDefaultHeader>
+      <PageWrapper>
+        <ExplorePanelWrapper>
+          <ExplorePanelTemplate>{children}</ExplorePanelTemplate>
+        </ExplorePanelWrapper>
+      </PageWrapper>
     </>
   )
 }
diff --git a/redisinsight/ui/src/templates/home-page-template/styles.module.scss b/redisinsight/ui/src/templates/home-page-template/styles.module.scss
deleted file mode 100644
index 838844b5f7..0000000000
--- a/redisinsight/ui/src/templates/home-page-template/styles.module.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.pageHeader, .pageDefaultHeader {
-  height: 64px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: var(--euiColorEmptyShade);
-  margin-bottom: 16px;
-  border-bottom: 1px solid var(--separatorColor);
-}
-
-.pageDefaultHeader {
-  padding: 0 16px;
-}
-
-.pageWrapper {
-  height: calc(100% - 70px);
-  overflow: hidden;
-}
-
-.explorePanel {
-  padding-bottom: 16px;
-}
-
-.capabilityWrapper {
-  :global(.capabilities__item:nth-child(2)) {
-    @media screen and (max-width: 840px) {
-      display: none;
-    }
-  }
-
-  &.rdiEnabled {
-    :global(.capabilities__item:nth-child(1)) {
-      @media screen and (max-width: 920px) {
-        display: none;
-      }
-    }
-
-    :global(.capabilities__item:nth-child(2)) {
-      @media screen and (max-width: 1024px) {
-        display: none;
-      }
-    }
-  }
-}