diff --git a/package.json b/package.json
index 35c6eea3f3..a1467cc70a 100644
--- a/package.json
+++ b/package.json
@@ -170,4 +170,4 @@
     "fast-deep-equal": "^3.1.3",
     "jsdom": "^20.0.1"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/styles/src/fundamental-styles.scss b/packages/styles/src/fundamental-styles.scss
index 51b5730ffd..7efe949b3d 100644
--- a/packages/styles/src/fundamental-styles.scss
+++ b/packages/styles/src/fundamental-styles.scss
@@ -111,6 +111,7 @@
 @import "navigation-menu";
 @import "tool-layout";
 @import "title-bar";
+@import "side-panel";
 
 // BTP Specific components/overwrites
 @import "./btp/avatar.scss";
diff --git a/packages/styles/src/side-panel.scss b/packages/styles/src/side-panel.scss
new file mode 100644
index 0000000000..ac4c5e6038
--- /dev/null
+++ b/packages/styles/src/side-panel.scss
@@ -0,0 +1,58 @@
+@import './new-settings';
+@import "mixins/mixins";
+
+$block: #{$fd-namespace}-side-panel;
+
+.#{$block} {
+  --fdSide_Panel_Background: var(--sapTile_Background);
+  --fdSide_Panel_BoxShadow: var(--sapNotifications_Shadow2);
+
+  @include fd-reset();
+
+  width: 100%;
+  height: 100%;
+  background: var(--fdSide_Panel_Background);
+  border-radius: var(--sapElement_BorderCornerRadius);
+  border: 0.0625rem solid var(--fdSidePanel_Border_Color);
+  box-shadow: var(--fdSide_Panel_BoxShadow);
+
+  @include fd-hover() {
+    --fdSide_Panel_Background: var(--sapTile_Hover_Background);
+  }
+
+  @include fd-focus() {
+    --fdSide_Panel_BoxShadow: none;
+    --fdSide_Panel_Background: var(--sapTile_Background);
+
+    outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);
+  }
+
+  &__header {
+    @include fd-reset();
+
+    @include fd-flex-vertical-center() {
+      gap: 0.75rem;
+      justify-content: space-between;
+    }
+
+    padding: 0.5rem;
+  }
+
+  &__actions {
+    @include fd-reset();
+
+    @include fd-flex-vertical-center() {
+      gap: 0.5rem;
+    }
+  }
+
+  &__content {
+    @include fd-reset();
+
+    padding: 0;
+  }
+
+  &__footer {
+    @include fd-reset();
+  }
+}
diff --git a/packages/styles/src/theming/common/side-panel/_sap_fiori.scss b/packages/styles/src/theming/common/side-panel/_sap_fiori.scss
new file mode 100644
index 0000000000..55b111ed6c
--- /dev/null
+++ b/packages/styles/src/theming/common/side-panel/_sap_fiori.scss
@@ -0,0 +1,3 @@
+:root {
+  --fdSidePanel_Border_Color: transparent;
+}
diff --git a/packages/styles/src/theming/common/side-panel/_sap_fiori_hc.scss b/packages/styles/src/theming/common/side-panel/_sap_fiori_hc.scss
new file mode 100644
index 0000000000..b49ad5ed68
--- /dev/null
+++ b/packages/styles/src/theming/common/side-panel/_sap_fiori_hc.scss
@@ -0,0 +1,5 @@
+@import "./sap_fiori";
+
+:root {
+  --fdSidePanel_Border_Color: var(--sapGroup_ContentBorderColor);
+}
diff --git a/packages/styles/src/theming/common/side-panel/_sap_horizon.scss b/packages/styles/src/theming/common/side-panel/_sap_horizon.scss
new file mode 100644
index 0000000000..55b111ed6c
--- /dev/null
+++ b/packages/styles/src/theming/common/side-panel/_sap_horizon.scss
@@ -0,0 +1,3 @@
+:root {
+  --fdSidePanel_Border_Color: transparent;
+}
diff --git a/packages/styles/src/theming/common/side-panel/_sap_horizon_hc.scss b/packages/styles/src/theming/common/side-panel/_sap_horizon_hc.scss
new file mode 100644
index 0000000000..5e6cabd0c3
--- /dev/null
+++ b/packages/styles/src/theming/common/side-panel/_sap_horizon_hc.scss
@@ -0,0 +1,5 @@
+@import "./sap_horizon";
+
+:root {
+  --fdSidePanel_Border_Color: var(--sapGroup_ContentBorderColor);
+}
diff --git a/packages/styles/src/theming/sap_fiori_3.scss b/packages/styles/src/theming/sap_fiori_3.scss
index 84f4e3b919..264ec7a669 100644
--- a/packages/styles/src/theming/sap_fiori_3.scss
+++ b/packages/styles/src/theming/sap_fiori_3.scss
@@ -46,6 +46,7 @@
 @import "./common/navigation/sap_fiori";
 @import "./common/navigation-menu/sap_fiori";
 @import "./common/tool-header/sap_fiori";
+@import "./common/side-panel/sap_fiori";
 
 :root {
   /* BTP */
diff --git a/packages/styles/src/theming/sap_fiori_3_dark.scss b/packages/styles/src/theming/sap_fiori_3_dark.scss
index 8151679143..17c938150b 100644
--- a/packages/styles/src/theming/sap_fiori_3_dark.scss
+++ b/packages/styles/src/theming/sap_fiori_3_dark.scss
@@ -46,6 +46,7 @@
 @import "./common/navigation/sap_fiori";
 @import "./common/navigation-menu/sap_fiori";
 @import "./common/tool-header/sap_fiori";
+@import "./common/side-panel/sap_fiori";
 
 :root {
   /* BTP */
diff --git a/packages/styles/src/theming/sap_fiori_3_hcb.scss b/packages/styles/src/theming/sap_fiori_3_hcb.scss
index 7369be9e0e..6a4ab81a5f 100644
--- a/packages/styles/src/theming/sap_fiori_3_hcb.scss
+++ b/packages/styles/src/theming/sap_fiori_3_hcb.scss
@@ -53,6 +53,7 @@
 @import "./common/navigation/sap_fiori_hc";
 @import "./common/navigation-menu/sap_fiori_hc";
 @import "./common/tool-header/sap_fiori_hc";
+@import "./common/side-panel/sap_fiori_hc";
 
 :root {
   /* BTP */
diff --git a/packages/styles/src/theming/sap_fiori_3_hcw.scss b/packages/styles/src/theming/sap_fiori_3_hcw.scss
index a8f45b4e2d..266bf6d662 100644
--- a/packages/styles/src/theming/sap_fiori_3_hcw.scss
+++ b/packages/styles/src/theming/sap_fiori_3_hcw.scss
@@ -47,6 +47,7 @@
 @import "./common/navigation-menu/sap_fiori_hc";
 @import "./common/tool-header/sap_fiori_hc";
 @import "./common/step-input/sap_fiori";
+@import "./common/side-panel/sap_fiori_hc";
 
 :root {
   /* BTP */
diff --git a/packages/styles/src/theming/sap_fiori_3_light_dark.scss b/packages/styles/src/theming/sap_fiori_3_light_dark.scss
index 4c8d4827b0..8bfcf3e28d 100644
--- a/packages/styles/src/theming/sap_fiori_3_light_dark.scss
+++ b/packages/styles/src/theming/sap_fiori_3_light_dark.scss
@@ -45,6 +45,7 @@
 @import "./common/navigation/sap_fiori";
 @import "./common/navigation-menu/sap_fiori";
 @import "./common/tool-header/sap_fiori";
+@import "./common/side-panel/sap_fiori";
 
 :root {
   /* BTP */
diff --git a/packages/styles/src/theming/sap_horizon.scss b/packages/styles/src/theming/sap_horizon.scss
index 0b3a381fd1..220e1093ac 100644
--- a/packages/styles/src/theming/sap_horizon.scss
+++ b/packages/styles/src/theming/sap_horizon.scss
@@ -48,6 +48,7 @@
 @import "./common/navigation/sap_horizon";
 @import "./common/navigation-menu/sap_horizon";
 @import "./common/tool-header/sap_horizon";
+@import "./common/side-panel/sap_horizon";
 
 :root {
   /* BTP */
diff --git a/packages/styles/src/theming/sap_horizon_dark.scss b/packages/styles/src/theming/sap_horizon_dark.scss
index c27860ff56..2027aed374 100644
--- a/packages/styles/src/theming/sap_horizon_dark.scss
+++ b/packages/styles/src/theming/sap_horizon_dark.scss
@@ -48,6 +48,7 @@
 @import "./common/navigation/sap_horizon";
 @import "./common/navigation-menu/sap_horizon";
 @import "./common/tool-header/sap_horizon";
+@import "./common/side-panel/sap_horizon";
 
 :root {
   /* BTP */
diff --git a/packages/styles/src/theming/sap_horizon_hcb.scss b/packages/styles/src/theming/sap_horizon_hcb.scss
index 6dc5924d18..9eed4c031b 100644
--- a/packages/styles/src/theming/sap_horizon_hcb.scss
+++ b/packages/styles/src/theming/sap_horizon_hcb.scss
@@ -48,6 +48,7 @@
 @import "./common/navigation/sap_horizon_hc";
 @import "./common/navigation-menu/sap_horizon_hc";
 @import "./common/tool-header/sap_horizon_hc";
+@import "./common/side-panel/sap_horizon_hc";
 
 :root {
   /* BTP */
diff --git a/packages/styles/src/theming/sap_horizon_hcw.scss b/packages/styles/src/theming/sap_horizon_hcw.scss
index fd4ce5c648..7ae783c43a 100644
--- a/packages/styles/src/theming/sap_horizon_hcw.scss
+++ b/packages/styles/src/theming/sap_horizon_hcw.scss
@@ -49,6 +49,7 @@
 @import "./common/navigation/sap_horizon_hc";
 @import "./common/navigation-menu/sap_horizon_hc";
 @import "./common/tool-header/sap_horizon_hc";
+@import "./common/side-panel/sap_horizon_hc";
 
 :root {
   /* BTP */
diff --git a/packages/styles/stories/BTP/side-panel/anatomy.example.html b/packages/styles/stories/BTP/side-panel/anatomy.example.html
new file mode 100644
index 0000000000..49df344aac
--- /dev/null
+++ b/packages/styles/stories/BTP/side-panel/anatomy.example.html
@@ -0,0 +1,25 @@
+<aside role="region" aria-label="Side Panel" class="fd-side-panel" tabindex="0" style="width: 400px;">
+    <div class="fd-side-panel__header">
+        <div class="fd-title-bar">
+            <div class="fd-title-bar__container">
+                <div class="fd-title-bar__title-container">
+                    <h4 class="fd-title-bar__title">Title</h4>
+                </div>
+                <span class="fd-title-bar__subtitle">Subtitle, byline, description</span>
+            </div>
+        </div>
+        <div class="fd-side-panel__actions">
+            <button class="fd-button fd-button--nested-square" aria-label="Expand Panel">
+                <i class="sap-icon--decline" role="presentation"></i>
+            </button>
+            <button class="fd-button fd-button--nested-square" aria-label="Open Sub Panel">
+                <i class="sap-icon--slim-arrow-up" role="presentation"></i>
+            </button>
+            <button class="fd-button fd-button--nested-square" aria-label="Close Panel">
+                <i class="sap-icon--decline" role="presentation"></i>
+            </button>
+        </div>
+    </div>
+    <div class="fd-side-panel__content"></div>
+    <div class="fd-side-panel__footer"></div>
+</aside>
\ No newline at end of file
diff --git a/packages/styles/stories/BTP/side-panel/side-panel.stories.js b/packages/styles/stories/BTP/side-panel/side-panel.stories.js
new file mode 100644
index 0000000000..b1e7049fca
--- /dev/null
+++ b/packages/styles/stories/BTP/side-panel/side-panel.stories.js
@@ -0,0 +1,37 @@
+import anatomyExampleHtml from "./anatomy.example.html?raw";
+
+import '../../../src/side-panel.scss';
+import '../../../src/title-bar.scss';
+import '../../../src/icon.scss';
+import '../../../src/button.scss';
+
+export default {
+  title: 'BTP/Side Panel',
+  parameters: {
+    description: `<br><br>### Elements
+- Title Bar / Header (mandatory): the Title Bar for the Side Panel.
+- Open Sub Panel (optional):	opens the Sub Panel to show additional content.
+- Expand / Collapse Side Panel (mandatory): expands or Collapses the Side Panel.
+- Close Panel (mandatory):	closes the Side Panel completely.
+- Content Area (mandatory):	main panel content is displayed here. Level 1: content area can be split by a Responsive Splitter (horizontal) content from either area can be dragged and dropped into either content area.
+- Responsive Splitter (optional): 	a responsive splitter can be used to split content in the content area and can be moved up or down to show or hide content allowing users to view more or less content. Content can be dragged and dropped from content areas to perform actions.
+- Pagination Bar (optional)
+- Footer (optional): optional actions for the Side Panel can be placed in the footer. Footers are optional and not required.
+- Close Sub Panel (optional): closes the Sub Panel
+- Sub Panel (optional):	sub panel content is displayed here. Level 2: content area can be split by a Responsive Splitter (Horizontal) content from either area can be dragged and dropped into either content area.
+
+`,
+    tags: ['btp','horizon-only']
+  }
+};
+
+export const Anatomy = () => anatomyExampleHtml;
+Anatomy.parameters = {
+  docs: {
+    story: {
+    },
+    description: {
+      story: ``
+    }
+  }
+};