diff --git a/packages/design-system/docs/components/OcTextInput/OcTextInput.md b/packages/design-system/docs/components/OcTextInput/OcTextInput.md
index 155c6e124c..ab62fc8d01 100644
--- a/packages/design-system/docs/components/OcTextInput/OcTextInput.md
+++ b/packages/design-system/docs/components/OcTextInput/OcTextInput.md
@@ -31,6 +31,16 @@ The default and most simple use case involves a `v-model` and a `label`.
 <<< @/components/OcTextInput/default.vue
 :::
 
+### Inline Label
+
+::: livecode
+
+```vue
+<oc-text-input label="Your name" :inline-label="true" />
+```
+
+:::
+
 ### Disabled
 
 ::: livecode
@@ -69,4 +79,12 @@ The following input types ares supported.
 <<< @/components/OcTextInput/messages.vue
 :::
 
+### Customization
+
+`OcTextInput` is highly customizable
+
+::: livecode {path=/components/OcTextInput/customization.vue}
+<<< @/components/OcTextInput/customization.vue
+:::
+
 ::: component-api
diff --git a/packages/design-system/docs/components/OcTextInput/customization.vue b/packages/design-system/docs/components/OcTextInput/customization.vue
new file mode 100644
index 0000000000..15cbfdd869
--- /dev/null
+++ b/packages/design-system/docs/components/OcTextInput/customization.vue
@@ -0,0 +1,8 @@
+<template>
+  <div class="border-b mb-2">
+    <oc-text-input class="mb-2" label="Your name" :inline-label="true" :has-border="false" />
+  </div>
+  <div class="border-b">
+    <oc-text-input class="mb-2" label="Full address" :inline-label="true" :has-border="false" />
+  </div>
+</template>
diff --git a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
index 3c92811e1d..2527d70ae5 100644
--- a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
+++ b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
@@ -10,7 +10,7 @@ exports[`OcModal > displays input 1`] = `
       <div class="oc-modal-body px-4 pt-4">
         <!--v-if-->
         <!--v-if-->
-        <oc-text-input-stub label="Folder name" id="oc-textinput-1" type="text" modelvalue="New folder" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" errormessagedebouncedtime="500" fixmessageline="true" readonly="false" requiredmark="false" passwordpolicy="[object Object]" class="oc-modal-body-input -mb-5 pb-4"></oc-text-input-stub>
+        <oc-text-input-stub label="Folder name" id="oc-textinput-1" type="text" modelvalue="New folder" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" inlinelabel="false" errormessagedebouncedtime="500" fixmessageline="true" readonly="false" requiredmark="false" passwordpolicy="[object Object]" hasborder="true" class="oc-modal-body-input -mb-5 pb-4"></oc-text-input-stub>
       </div>
       <div class="oc-modal-body-actions flex justify-end p-4 text-right">
         <div class="oc-modal-body-actions-grid grid grid-flow-col auto-cols-1fr">
diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue
index 5e6bd2c8e8..0381098f11 100644
--- a/packages/design-system/src/components/OcSelect/OcSelect.vue
+++ b/packages/design-system/src/components/OcSelect/OcSelect.vue
@@ -1,6 +1,12 @@
 <template>
-  <div>
-    <label v-if="!labelHidden" :aria-hidden="true" :for="id" class="inline-block mb-0.5">
+  <div :class="{ 'flex items-center': inlineLabel }">
+    <label
+      v-if="!labelHidden"
+      :aria-hidden="true"
+      :for="id"
+      class="inline-block"
+      :class="{ 'mr-2': inlineLabel, 'mb-0.5': !inlineLabel }"
+    >
       {{ label }}
       <span v-if="requiredMark" class="text-role-error" aria-hidden="true">*</span>
     </label>
@@ -19,7 +25,8 @@
       :multiple="multiple"
       class="oc-select bg-transparent"
       :class="{
-        'oc-select-position-fixed': positionFixed
+        'oc-select-position-fixed': positionFixed,
+        'oc-select-no-border': !hasBorder
       }"
       :dropdown-should-open="selectDropdownShouldOpen"
       :map-keydown="selectMapKeydown"
@@ -134,6 +141,11 @@ export interface Props {
    * @docs The label of the select input.
    */
   label: string
+  /**
+   * @docs Determines if the label will be displayed next to the select input field.
+   * @default false
+   * */
+  inlineLabel?: boolean
   /**
    * @docs Determines if the label is visually hidden. Note that it will still be read by screen readers.
    * @default false
@@ -201,6 +213,11 @@ export interface Props {
    * @default false
    */
   requiredMark?: boolean
+  /**
+   * @docs Determines if the select input field has a surrounding border.
+   * @default true
+   */
+  hasBorder?: boolean
 }
 
 export interface Emits {
@@ -208,6 +225,7 @@ export interface Emits {
    * @docs Emitted when the user has typed.
    */
   (e: 'search:input', search: string): void
+
   /**
    * @docs Emitted when the user has selected an option.
    */
@@ -219,6 +237,7 @@ export interface Slots {
    * @docs Slot for when an option is selected.
    */
   'selected-option'?: () => unknown
+
   /**
    * @docs This component inherits all slots from `vue-select`. See https://vue-select.org/api/slots for more information.
    */
@@ -252,6 +271,7 @@ const {
   },
   disabled = false,
   label,
+  inlineLabel = false,
   labelHidden = false,
   contextualHelper,
   optionLabel = 'label',
@@ -265,7 +285,8 @@ const {
   multiple = false,
   readOnly = false,
   positionFixed = false,
-  requiredMark = false
+  requiredMark = false,
+  hasBorder = true
 } = defineProps<Props>()
 
 const emit = defineEmits<Emits>()
@@ -485,6 +506,14 @@ export default { components: { VueSelect } }
 }
 
 .oc-select {
+  &-no-border {
+    .vs__dropdown-toggle {
+      border: none !important;
+      outline: none !important;
+      background-color: transparent !important;
+    }
+  }
+
   &-position-fixed {
     .vs__dropdown-menu {
       position: fixed;
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index f45a35e29f..21315d281f 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -1,12 +1,16 @@
 <template>
-  <div :class="$attrs.class">
+  <div :class="[{ 'flex items-center': inlineLabel }, $attrs.class]">
     <slot name="label">
-      <label class="inline-block mb-0.5" :for="id">
+      <label
+        class="inline-block"
+        :class="{ 'mr-2': inlineLabel, 'mb-0.5': !inlineLabel }"
+        :for="id"
+      >
         {{ label }}
         <span v-if="requiredMark" class="text-role-error" aria-hidden="true">*</span>
       </label>
     </slot>
-    <div class="relative">
+    <div class="relative" :class="{ 'grow-1': inlineLabel }">
       <oc-icon v-if="readOnly" name="lock" size="small" class="mt-2 ml-2 absolute" />
       <component
         :is="inputComponent"
@@ -18,7 +22,8 @@
         :class="{
           'oc-text-input-danger border-role-error': !!showErrorMessage,
           'pl-6': !!readOnly,
-          'pr-6': showClearButton
+          'pr-6': showClearButton,
+          'border-none outline-none bg-transparent': !hasBorder
         }"
         :type="type"
         :value="modelValue"
@@ -130,6 +135,11 @@ export interface Props {
    * @docs The label of the input element.
    */
   label: string
+  /**
+   * @docs Determines if the label will be displayed next to the input field.
+   * @default false
+   * */
+  inlineLabel?: boolean
   /**
    * @docs The error message to be displayed below the input.
    */
@@ -166,6 +176,11 @@ export interface Props {
    * @docs The method to generate a password if the `type` is set to `password`.
    */
   generatePasswordMethod?: (...args: unknown[]) => string
+  /**
+   * @docs Determines if the input field has a surrounding border.
+   * @default true
+   */
+  hasBorder?: boolean
 }
 
 export interface Emits {
@@ -212,12 +227,14 @@ const {
   defaultValue,
   disabled = false,
   label,
+  inlineLabel = false,
   errorMessage,
   errorMessageDebouncedTime = 500,
   fixMessageLine = false,
   descriptionMessage,
   readOnly = false,
   requiredMark = false,
+  hasBorder = true,
   passwordPolicy = {},
   generatePasswordMethod
 } = defineProps<Props>()
@@ -350,12 +367,15 @@ watch(
   .oc-input {
     @apply inline-block align-middle text-role-on-surface bg-role-surface w-full max-w-full rounded-sm p-1.5 leading-4 border border-role-outline outline-0 overflow-visible appearance-none;
   }
+
   .oc-input:focus {
     @apply border border-role-surface outline-2 outline-role-outline;
   }
+
   .oc-input:disabled {
     @apply bg-role-surface-container cursor-not-allowed;
   }
+
   .oc-input::placeholder {
     @apply text-role-on-surface opacity-100;
   }
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap
index 4fc9dcdcc7..104cf288bb 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`MembersPanel > should display an empty result if no matching members found 1`] = `
 "<div class="ml-2">
-  <oc-text-input-stub label="Filter members" id="oc-textinput-3" type="text" modelvalue="no-match" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" errormessagedebouncedtime="500" fixmessageline="false" readonly="false" requiredmark="false" passwordpolicy="[object Object]" class="mr-2 mt-4"></oc-text-input-stub>
+  <oc-text-input-stub label="Filter members" id="oc-textinput-3" type="text" modelvalue="no-match" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" inlinelabel="false" errormessagedebouncedtime="500" fixmessageline="false" readonly="false" requiredmark="false" passwordpolicy="[object Object]" hasborder="true" class="mr-2 mt-4"></oc-text-input-stub>
   <div data-testid="space-members">
     <div>
       <h3 class="font-semibold text-base">No members found</h3>
@@ -14,7 +14,7 @@ exports[`MembersPanel > should display an empty result if no matching members fo
 
 exports[`MembersPanel > should render all members accordingly to their role assignments 1`] = `
 "<div class="ml-2">
-  <oc-text-input-stub label="Filter members" id="oc-textinput-1" type="text" modelvalue="" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" errormessagedebouncedtime="500" fixmessageline="false" readonly="false" requiredmark="false" passwordpolicy="[object Object]" class="mr-2 mt-4"></oc-text-input-stub>
+  <oc-text-input-stub label="Filter members" id="oc-textinput-1" type="text" modelvalue="" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" inlinelabel="false" errormessagedebouncedtime="500" fixmessageline="false" readonly="false" requiredmark="false" passwordpolicy="[object Object]" hasborder="true" class="mr-2 mt-4"></oc-text-input-stub>
   <div data-testid="space-members">
     <!--v-if-->
     <div class="mb-4" data-testid="group-members">
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
index 1a1ad96d1a..708f38034c 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
@@ -5,16 +5,16 @@ exports[`EditPanel > renders all available inputs 1`] = `
   <user-info-box-stub user="[object Object]"></user-info-box-stub>
   <form id="user-edit-form" class="bg-role-surface-container p-4 rounded-sm" autocomplete="off">
     <div>
-      <oc-text-input-stub label="User name" errormessage="" id="userName-input" type="text" modelvalue="" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" errormessagedebouncedtime="500" fixmessageline="true" readonly="false" requiredmark="true" passwordpolicy="[object Object]" class="mb-2"></oc-text-input-stub>
-      <oc-text-input-stub label="First and last name" errormessage="" id="displayName-input" type="text" modelvalue="jan" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" errormessagedebouncedtime="500" fixmessageline="true" readonly="false" requiredmark="true" passwordpolicy="[object Object]" class="mb-2"></oc-text-input-stub>
-      <oc-text-input-stub label="Email" errormessage="" id="email-input" type="email" modelvalue="jan@opencloud.eu" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" errormessagedebouncedtime="1000" fixmessageline="true" readonly="false" requiredmark="true" passwordpolicy="[object Object]" class="mb-2"></oc-text-input-stub>
-      <oc-text-input-stub label="Password" id="password-input" type="password" modelvalue="" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" errormessagedebouncedtime="500" fixmessageline="true" readonly="false" requiredmark="false" passwordpolicy="[object Object]" class="mb-2" placeholder="●●●●●●●●"></oc-text-input-stub>
+      <oc-text-input-stub label="User name" errormessage="" id="userName-input" type="text" modelvalue="" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" inlinelabel="false" errormessagedebouncedtime="500" fixmessageline="true" readonly="false" requiredmark="true" passwordpolicy="[object Object]" hasborder="true" class="mb-2"></oc-text-input-stub>
+      <oc-text-input-stub label="First and last name" errormessage="" id="displayName-input" type="text" modelvalue="jan" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" inlinelabel="false" errormessagedebouncedtime="500" fixmessageline="true" readonly="false" requiredmark="true" passwordpolicy="[object Object]" hasborder="true" class="mb-2"></oc-text-input-stub>
+      <oc-text-input-stub label="Email" errormessage="" id="email-input" type="email" modelvalue="jan@opencloud.eu" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" inlinelabel="false" errormessagedebouncedtime="1000" fixmessageline="true" readonly="false" requiredmark="true" passwordpolicy="[object Object]" hasborder="true" class="mb-2"></oc-text-input-stub>
+      <oc-text-input-stub label="Password" id="password-input" type="password" modelvalue="" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" inlinelabel="false" errormessagedebouncedtime="500" fixmessageline="true" readonly="false" requiredmark="false" passwordpolicy="[object Object]" hasborder="true" class="mb-2" placeholder="●●●●●●●●"></oc-text-input-stub>
       <div class="mb-2">
-        <oc-select-stub label="Role" id="role-input" filter="[Function]" disabled="false" labelhidden="false" optionlabel="displayName" searchable="true" clearable="false" loading="false" fixmessageline="false" multiple="false" readonly="false" positionfixed="false" requiredmark="true" options="[object Object]"></oc-select-stub>
+        <oc-select-stub label="Role" id="role-input" filter="[Function]" disabled="false" inlinelabel="false" labelhidden="false" optionlabel="displayName" searchable="true" clearable="false" loading="false" fixmessageline="false" multiple="false" readonly="false" positionfixed="false" requiredmark="true" hasborder="true" options="[object Object]"></oc-select-stub>
         <div class="oc-text-input-message"></div>
       </div>
       <div class="mb-2">
-        <oc-select-stub label="Login" id="login-input" filter="[Function]" disabled="false" labelhidden="false" optionlabel="label" searchable="true" clearable="false" loading="false" fixmessageline="false" multiple="false" readonly="false" positionfixed="false" requiredmark="true" model-value="[object Object]" options="[object Object],[object Object]"></oc-select-stub>
+        <oc-select-stub label="Login" id="login-input" filter="[Function]" disabled="false" inlinelabel="false" labelhidden="false" optionlabel="label" searchable="true" clearable="false" loading="false" fixmessageline="false" multiple="false" readonly="false" positionfixed="false" requiredmark="true" hasborder="true" model-value="[object Object]" options="[object Object],[object Object]"></oc-select-stub>
         <div class="oc-text-input-message"></div>
       </div>
       <quota-select-stub totalquota="0" maxquota="0" id="quota-select-form" disabled="false" class="mb-2" label="Personal quota" fix-message-line="true" description-message="" read-only="false" required-mark=""></quota-select-stub>
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/GroupSelect.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/GroupSelect.spec.ts.snap
index f8f95c6118..249c195995 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/GroupSelect.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/GroupSelect.spec.ts.snap
@@ -2,6 +2,6 @@
 
 exports[`GroupSelect > renders the select input 1`] = `
 "<div id="user-group-select-form">
-  <oc-select-stub label="Groups" id="oc-select-1" filter="[Function]" disabled="false" labelhidden="false" optionlabel="displayName" searchable="true" clearable="false" loading="false" fixmessageline="true" multiple="true" readonly="false" positionfixed="false" requiredmark="false" model-value="[object Object]" class="mb-2" options="undefined"></oc-select-stub>
+  <oc-select-stub label="Groups" id="oc-select-1" filter="[Function]" disabled="false" inlinelabel="false" labelhidden="false" optionlabel="displayName" searchable="true" clearable="false" loading="false" fixmessageline="true" multiple="true" readonly="false" positionfixed="false" requiredmark="false" hasborder="true" model-value="[object Object]" class="mb-2" options="undefined"></oc-select-stub>
 </div>"
 `;
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/LoginModal.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/LoginModal.spec.ts.snap
index e2f7873dd4..7a412e91cc 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/LoginModal.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/LoginModal.spec.ts.snap
@@ -2,6 +2,6 @@
 
 exports[`LoginModal > renders the input including two options 1`] = `
 "<div>
-  <oc-select-stub label="Login" descriptionmessage="" id="oc-select-1" filter="[Function]" disabled="false" labelhidden="false" optionlabel="label" searchable="true" clearable="false" loading="false" fixmessageline="false" multiple="false" readonly="false" positionfixed="true" requiredmark="true" options="[object Object],[object Object]" placeholder="Select..."></oc-select-stub>
+  <oc-select-stub label="Login" descriptionmessage="" id="oc-select-1" filter="[Function]" disabled="false" inlinelabel="false" labelhidden="false" optionlabel="label" searchable="true" clearable="false" loading="false" fixmessageline="false" multiple="false" readonly="false" positionfixed="true" requiredmark="true" hasborder="true" options="[object Object],[object Object]" placeholder="Select..."></oc-select-stub>
 </div>"
 `;
diff --git a/packages/web-app-mail/src/views/MailCompose.vue b/packages/web-app-mail/src/views/MailCompose.vue
index 820289bec4..7570be08c2 100644
--- a/packages/web-app-mail/src/views/MailCompose.vue
+++ b/packages/web-app-mail/src/views/MailCompose.vue
@@ -17,10 +17,12 @@
       </oc-button>
     </div>
     <div class="px-4">
-      <div class="py-3">
+      <div class="py-2 mb-2 border-b border-role-outline-variant">
         <oc-select
           v-model="from"
           :label="`${$gettext('From')}:`"
+          :inline-label="true"
+          :has-border="false"
           :options="fromOptions"
           option-label="label"
           option-value="value"
@@ -31,25 +33,33 @@
       <oc-text-input
         v-model="toMail"
         type="email"
-        class="mail-new-message-to-input mb-2"
+        class="mail-new-message-to-input mb-2 pb-2 border-b border-role-outline-variant"
         :label="`${$gettext('To')}:`"
+        :inline-label="true"
+        :has-border="false"
       />
       <oc-text-input
         v-model="ccMail"
         type="email"
-        class="mail-new-message-cc-input mb-2"
+        class="mail-new-message-cc-input mb-2 pb-2 border-b border-role-outline-variant"
         :label="`${$gettext('CC')}:`"
+        :inline-label="true"
+        :has-border="false"
       />
       <oc-text-input
         v-model="bccMail"
         type="email"
-        class="mail-new-message-bcc-input mb-2"
+        class="mail-new-message-bcc-input mb-2 pb-2 border-b border-role-outline-variant"
         :label="`${$gettext('BCC')}:`"
+        :inline-label="true"
+        :has-border="false"
       />
       <oc-text-input
         v-model="subject"
-        class="mail-new-message-to-input"
-        :label="$gettext('Subject')"
+        class="mail-new-message-to-input pb-2 border-b border-role-outline-variant"
+        :label="`${$gettext('Subject')}:`"
+        :inline-label="true"
+        :has-border="false"
       />
       <div class="py-4">
         <oc-textarea v-model="mailBody" :label="$gettext('Write email')" />
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
index cca00d7f39..0c557dc1cc 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`resolvePublicLink > password required form > should display if password is required 1`] = `
 "<form>
-  <oc-text-input-stub label="Enter password for public link" id="oc-textinput-2" type="password" modelvalue="" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" errormessagedebouncedtime="500" fixmessageline="false" readonly="false" requiredmark="false" passwordpolicy="[object Object]" class="mb-2 [&amp;_.oc-text-input-message]:justify-center"></oc-text-input-stub>
+  <oc-text-input-stub label="Enter password for public link" id="oc-textinput-2" type="password" modelvalue="" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" inlinelabel="false" errormessagedebouncedtime="500" fixmessageline="false" readonly="false" requiredmark="false" passwordpolicy="[object Object]" hasborder="true" class="mb-2 [&amp;_.oc-text-input-message]:justify-center"></oc-text-input-stub>
   <oc-button-stub appearance="filled" colorrole="secondary" disabled="true" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="submit" type="button" nohover="false" class="oc-login-authorize-button"></oc-button-stub>
 </form>"
 `;