diff --git a/.github/workflows/pullRequest-lint.yaml b/.github/workflows/pullRequest-lint.yaml
new file mode 100644
index 00000000..e2c4fceb
--- /dev/null
+++ b/.github/workflows/pullRequest-lint.yaml
@@ -0,0 +1,61 @@
+# #############################################################################
+# Copyright (c) 2023 Contributors to the Eclipse Foundation
+#
+# See the NOTICE file(s) distributed with this work for additional
+# information regarding copyright ownership.
+#
+# This program and the accompanying materials are made available under the
+# terms of the Apache License, Version 2.0 which is available at
+# https://www.apache.org/licenses/LICENSE-2.0.
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+# License for the specific language governing permissions and limitations
+# under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+# #############################################################################
+
+name: "Lint PullRequest"
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - edited
+      - synchronize
+
+jobs:
+  main:
+    name: Validate PR title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        id: lint_pr_title
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: marocchino/sticky-pull-request-comment@v2
+        # When the previous steps fail, the workflow would stop. By adding this
+        # condition you can continue the execution with the populated error message.
+        if: always() && (steps.lint_pr_title.outputs.error_message != null)
+        with:
+          header: pr-title-lint-error
+          message: |
+            Hey there and thank you for opening this pull request! 👋🏼
+            
+            We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and it looks like your proposed title needs to be adjusted.
+
+            Details:
+            
+            ```
+            ${{ steps.lint_pr_title.outputs.error_message }}
+            ```
+
+      # Delete a previous comment when the issue has been resolved
+      - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: pr-title-lint-error
+          delete: true
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e8d56033..d3560ebf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,13 +1,25 @@
 # Changelog
 
-## 2.1.14
+## 2.1.15
 
 - Add tooltip hint in stepper and make stepper responsive
 
+## 2.1.14
+
+- Technical Improvement: Search Element (active search & delete icon)
+
+## 2.1.13
+
+- Order Status Button UI changes
+
+## 2.1.12
+
+- New Sub Navigation Component which supportrs overlay of links and buttons
+
 ## 2.1.11
 
 - Fix general issues
-  
+
 ## 2.1.10
 
 - fix(image gallery): responsiveness fix for number of images to show
diff --git a/package.json b/package.json
index dbda3e81..0a3da3b8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "2.1.12",
+  "version": "2.1.15",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",
diff --git a/src/components/basic/Menu/MenuItem.tsx b/src/components/basic/Menu/MenuItem.tsx
index 399087b3..b4eed1a0 100644
--- a/src/components/basic/Menu/MenuItem.tsx
+++ b/src/components/basic/Menu/MenuItem.tsx
@@ -85,9 +85,7 @@ export const MenuItem = ({
       }}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      onClick={(e) => {
-        (onClick == null || disable) ?? onClick(e)
-      }}
+      onClick={(e) => {(onClick == null || disable) ?? onClick(e)}}
     >
       <Link
         component={component}
diff --git a/src/components/basic/NewSubNavigation/NewSubNavigation.stories.tsx b/src/components/basic/NewSubNavigation/NewSubNavigation.stories.tsx
new file mode 100644
index 00000000..bcc1c764
--- /dev/null
+++ b/src/components/basic/NewSubNavigation/NewSubNavigation.stories.tsx
@@ -0,0 +1,89 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { ComponentStory } from '@storybook/react'
+import { NewSubNavigation as Component } from '.'
+
+export default {
+  title: 'Navigation',
+  component: Component,
+  argTypes: {},
+}
+
+const Template: ComponentStory<typeof Component> = (args: any) => (
+  <Component {...args} />
+)
+
+export const NewSubNavigation = Template.bind({})
+NewSubNavigation.args = {
+  title: 'Sub Menu',
+  navigationArray: [
+    {
+      index: 1,
+      title: 'Introduction',
+      navigation: 'intro-id',
+    },
+    {
+      index: 2,
+      title: 'Core Values',
+      navigation: 'core-id',
+    },
+    {
+      index: 3,
+      title: 'Benefits',
+      navigation: 'advantage-id',
+    },
+    {
+      index: 4,
+      title: 'Terminology',
+      navigation: 'terminology-id',
+    },
+    {
+      index: 5,
+      title: 'Data models',
+      navigation: 'data-model-id',
+    },
+    {
+      index: 6,
+      title: 'Data exchange',
+      navigation: 'data-exchange-id',
+    },
+    {
+      index: 7,
+      title: 'Connectivity-Portfolio',
+      navigation: 'connection-id',
+    },
+    {
+      index: 8,
+      title: 'Business Applications',
+      navigation: 'application-id',
+    },
+  ],
+  buttonArray: [
+    {
+      buttonLabel: 'Button1',
+      onButtonClick: () => console.log('Button1'),
+    },
+    {
+      buttonLabel: 'Button1',
+      onButtonClick: () => console.log('Button1'),
+    },
+  ],
+  onClick: () => console.log('on navigation link click'),
+}
diff --git a/src/components/basic/NewSubNavigation/index.tsx b/src/components/basic/NewSubNavigation/index.tsx
new file mode 100644
index 00000000..a404dd61
--- /dev/null
+++ b/src/components/basic/NewSubNavigation/index.tsx
@@ -0,0 +1,178 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { Button } from '../Button'
+import EastIcon from '@mui/icons-material/East'
+import MoreVertIcon from '@mui/icons-material/MoreVert'
+import { Box, Divider } from '@mui/material'
+import { useState } from 'react'
+import { Typography } from '../Typography'
+import './styles.scss'
+
+export interface NavigationItem {
+  index: number
+  title: string
+  navigation: string
+}
+
+export interface NavigationButton {
+  buttonLabel: string
+  onButtonClick: React.MouseEventHandler
+}
+
+export const NewSubNavigation = ({
+  title = 'Contents',
+  navigationArray,
+  buttonArray = [],
+  onClick,
+  updateHeaderTitle = false,
+}: {
+  title?: string
+  navigationArray: NavigationItem[]
+  buttonArray?: NavigationButton[]
+  onClick: (navigation: string) => void
+  updateHeaderTitle?: boolean
+}): JSX.Element => {
+  const [show, setShow] = useState(false)
+  const [header, setHeader] = useState(title)
+  const [highlight, setHighlight] = useState('')
+  return (
+    <Box onMouseOver={() => { setShow(true) }}>
+      {navigationArray?.length > 0 && (
+        <Box
+          className="navigationParentContainer"
+          onMouseLeave={() => { setShow(false) }}
+        >
+          <Box className="navigationContainer">
+            <Box className="navigationOverlayContainer">
+              <MoreVertIcon />
+              <Typography
+                variant="h4"
+                sx={{
+                  marginLeft: '10px',
+                  fontSize: '14px',
+                  color: '#0f71cb',
+                }}
+              >
+                {header}
+              </Typography>
+              {show && (
+                <Box className="navigationOverlay">
+                  {navigationArray?.map((link: NavigationItem) => {
+                    return (
+                      <Box
+                        key={link.index}
+                        onClick={() => {
+                          onClick(link.navigation)
+                          setShow(!show)
+                          if (updateHeaderTitle) {
+                            setHeader(link.title)
+                          }
+                        }}
+                        className="navigationOverlayItem"
+                        onMouseOut={() => { setHighlight(link.title) }}
+                        onMouseOver={() => {
+                          // do nothing
+                        }}
+                        sx={{
+                          backgroundColor:
+                            header === link.title || highlight === link.title
+                              ? 'rgba(15, 113, 203, 0.05)'
+                              : 'transparent',
+                        }}
+                      >
+                        <EastIcon
+                          sx={{
+                            marginRight: '16px',
+                            fontSize: '18px',
+                            color:
+                              header === link.title || highlight === link.title
+                                ? '#0f71cb'
+                                : '#EAF1FE',
+                          }}
+                        />
+                        <Typography
+                          variant="h4"
+                          sx={{
+                            color:
+                              header === link.title || highlight === link.title
+                                ? '#111111'
+                                : '#888888',
+                            fontSize: '14px',
+                          }}
+                        >
+                          {link.title}
+                        </Typography>
+                      </Box>
+                    )
+                  })}
+                  {buttonArray?.length > 1 && (
+                    <Divider
+                      sx={{
+                        margin: '10px 0px',
+                        borderWidth: '1px',
+                        width: '100%',
+                      }}
+                    />
+                  )}
+                  {buttonArray?.length > 1 &&
+                    buttonArray?.map((btn: NavigationButton) => {
+                      return (
+                        <Button
+                          key={btn.buttonLabel}
+                          onClick={(e) => {
+                            btn.onButtonClick(e)
+                            setShow(!show)
+                          }}
+                          color="secondary"
+                          variant="outlined"
+                          size="small"
+                          sx={{
+                            marginTop: '10px',
+                          }}
+                        >
+                          {btn.buttonLabel}
+                        </Button>
+                      )
+                    })}
+                </Box>
+              )}
+            </Box>
+            {buttonArray?.length === 1 && (
+              <Button
+                onClick={(e) => {
+                  buttonArray[0].onButtonClick(e)
+                  setShow(!show)
+                }}
+                color="secondary"
+                variant="outlined"
+                size="small"
+                sx={{
+                  marginTop: '10px',
+                }}
+              >
+                {buttonArray[0].buttonLabel}
+              </Button>
+            )}
+          </Box>
+        </Box>
+      )}
+    </Box>
+  )
+}
diff --git a/src/components/basic/NewSubNavigation/styles.scss b/src/components/basic/NewSubNavigation/styles.scss
new file mode 100644
index 00000000..a7df31f9
--- /dev/null
+++ b/src/components/basic/NewSubNavigation/styles.scss
@@ -0,0 +1,66 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+.navigationParentContainer {
+  width: 100%;
+  cursor: pointer;
+
+  .navigationContainer {
+    display: flex;
+    max-width: 1200px;
+    margin-right: auto;
+    margin-left: auto;
+    align-items: center;
+    color: #0f71cb;
+    font-size: 16px;
+    justify-content: space-between;
+    padding: 16px;
+
+    .navigationOverlayContainer {
+      display: flex;
+      align-items: center;
+      position: relative;
+
+      .navigationOverlay {
+        display: flex;
+        flex-direction: column;
+        width: 250px;
+        align-items: flex-start;
+        box-shadow: 0px 10px 20px rgb(80 80 80 / 30%);
+        padding: 20px;
+        border-radius: 8px;
+        position: absolute;
+        z-index: 999;
+        background-color: #ffffff;
+        top: 0px;
+        margin-left: 30px;
+
+        .navigationOverlayItem {
+          text-align: left;
+          cursor: pointer;
+          padding: 7px 0px;
+          display: flex;
+          align-items: center;
+          width: 100%;
+          border-radius: 8px;
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/basic/OrderStatusButton/index.tsx b/src/components/basic/OrderStatusButton/index.tsx
index 830784cc..0e8080b9 100644
--- a/src/components/basic/OrderStatusButton/index.tsx
+++ b/src/components/basic/OrderStatusButton/index.tsx
@@ -63,7 +63,7 @@ export const OrderStatusButton = ({
       <Button
         key={numberLabel}
         sx={{
-          width: '97%',
+          width: '80%',
           position: 'relative',
           zIndex,
           paddingLeft: '74px',
@@ -73,6 +73,7 @@ export const OrderStatusButton = ({
           height: '55px',
           textAlign: 'left',
           cursor: 'default',
+          textTransform: 'capitalize',
           ':hover': {
             background,
           },
@@ -105,7 +106,7 @@ export const OrderStatusButton = ({
             {numberLabel}
           </Typography>
         )}
-        <Typography variant="label4">{buttonLabel}</Typography>
+        <Typography variant="label5">{buttonLabel}</Typography>
       </Button>
     )
   }
@@ -125,10 +126,12 @@ export const OrderStatusButton = ({
         color={color}
         onClick={handleClick}
         sx={{
+          fontSize: '16px',
           width: '100%',
           position: 'relative',
           zIndex: '5',
           cursor: selectable ? 'pointer' : 'default',
+          textTransform: 'capitalize',
           ':hover': {
             background: selectable ? color : color && theme.palette[color].main,
             boxShadow: selectable ? '' : 'none',
diff --git a/src/components/basic/Table/components/Toolbar/SearchAndFilterButtonToolbar.tsx b/src/components/basic/Table/components/Toolbar/SearchAndFilterButtonToolbar.tsx
index b7cb86a4..ba994309 100644
--- a/src/components/basic/Table/components/Toolbar/SearchAndFilterButtonToolbar.tsx
+++ b/src/components/basic/Table/components/Toolbar/SearchAndFilterButtonToolbar.tsx
@@ -115,8 +115,8 @@ export const SearchAndFilterButtonToolbar = ({
     <Box sx={styles}>
       <Box sx={{ display: 'flex', alignItems: 'center', height: '50px' }}>
         <SearchInput
+          autoFocus
           endAdornment={endAdornment}
-          type="text"
           value={searchInputText}
           onChange={onSearchChange}
           onKeyPress={onSearchInputKeyPress}
diff --git a/src/components/basic/Table/components/Toolbar/UltimateToolbar.tsx b/src/components/basic/Table/components/Toolbar/UltimateToolbar.tsx
index 5c253639..7e6e999b 100644
--- a/src/components/basic/Table/components/Toolbar/UltimateToolbar.tsx
+++ b/src/components/basic/Table/components/Toolbar/UltimateToolbar.tsx
@@ -114,8 +114,8 @@ export const UltimateToolbar = ({
       {onSearch != null && (
         <Box sx={{ display: 'flex', alignItems: 'center', height: '50px' }}>
           <SearchInput
+            autoFocus
             endAdornment={endAdornment}
-            type="text"
             value={searchInput}
             onChange={onSearchChange}
             onKeyPress={onSearchInputKeyPress}
diff --git a/src/components/basic/Table/components/Toolbar/index.tsx b/src/components/basic/Table/components/Toolbar/index.tsx
index ee720db3..bf5ee6bb 100644
--- a/src/components/basic/Table/components/Toolbar/index.tsx
+++ b/src/components/basic/Table/components/Toolbar/index.tsx
@@ -215,7 +215,6 @@ export const Toolbar = ({
             <SearchInput
               autoFocus
               endAdornment={getEndAdornment()}
-              type="text"
               value={searchInput}
               onChange={onSearchInputChange}
               onKeyPress={onSearchInputKeyPress}
diff --git a/src/components/content/Cards/Card.tsx b/src/components/content/Cards/Card.tsx
index c5966240..3f3ab4d4 100644
--- a/src/components/content/Cards/Card.tsx
+++ b/src/components/content/Cards/Card.tsx
@@ -263,6 +263,7 @@ export const Card = ({
                   subscriptionStatus?.toLowerCase() === 'pending'
                     ? 'linear-gradient(239deg, rgba(255,120,44,1) 0%, rgba(255,179,38,1) 50%)'
                     : '#B3CB2D',
+                textTransform: 'lowercase',
               }}
             >
               {subscriptionStatus}
diff --git a/src/components/index.tsx b/src/components/index.tsx
index e4ab0b24..9ec6fcb3 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -96,6 +96,7 @@ export { Expand } from './basic/Expand'
 export { AboutCard } from './content/Cards/AboutCard'
 export { LinearProgressWithValueLabel } from './basic/Progress/LinearProgress/LinearProgressWithValueLabel'
 export { ErrorBar } from './basic/ErrorBar/ErrorBar'
+export { NewSubNavigation } from './basic/NewSubNavigation'
 
 export type { TableProps } from './basic/Table'
 export type {