diff --git a/src/assets/mdi.ts b/src/assets/mdi.ts
index 05e7af93f6..7084f6a9c0 100644
--- a/src/assets/mdi.ts
+++ b/src/assets/mdi.ts
@@ -41,6 +41,7 @@ import {
   mdiChevronDoubleLeft,
   mdiChevronDoubleUp,
   mdiChevronDoubleDown,
+  mdiChevronDown,
   mdiChevronLeft,
   mdiChevronRight,
   mdiBookmark,
@@ -142,6 +143,7 @@ const mdi: MdiIconsMapping = {
   'chevron-double': mdiChevronDoubleLeft,
   'chevron-double-up': mdiChevronDoubleUp,
   'chevron-double-down': mdiChevronDoubleDown,
+  'chevron-down': mdiChevronDown,
   'chevron-left': mdiChevronLeft,
   'chevron-right': mdiChevronRight,
   'chevron-up': mdiChevronUp,
diff --git a/src/components/Main/MainView/MessageElement/MessageEditor.vue b/src/components/Main/MainView/MessageElement/MessageEditor.vue
index fd2f4a0e12..ffac010fd1 100644
--- a/src/components/Main/MainView/MessageElement/MessageEditor.vue
+++ b/src/components/Main/MainView/MessageElement/MessageEditor.vue
@@ -12,6 +12,7 @@
         :class="$style.inputTextArea"
         :is-posting="isPostingAttachment"
         simple-padding
+        is-max-height-none
         @add-attachments="onAddAttachments"
         @modifier-key-down="onModifierKeyDown"
         @modifier-key-up="onModifierKeyUp"
@@ -43,17 +44,17 @@
 </template>
 
 <script lang="ts">
+import type { AxiosProgressEvent } from 'axios'
 import type { Ref } from 'vue'
 import { computed, onMounted, ref } from 'vue'
-import apis, { buildFilePathForPost, formatResizeError } from '/@/lib/apis'
-import useModifierKey from '/@/components/Main/MainView/MessageInput/composables/useModifierKey'
 import useTextStampPickerInvoker from '../composables/useTextStampPickerInvoker'
-import { MESSAGE_MAX_LENGTH } from '/@/lib/validate'
+import useAttachments from '/@/components/Main/MainView/MessageInput/composables/useAttachments'
+import useModifierKey from '/@/components/Main/MainView/MessageInput/composables/useModifierKey'
+import apis, { buildFilePathForPost, formatResizeError } from '/@/lib/apis'
 import { countLength } from '/@/lib/basic/string'
-import { useToastStore } from '/@/store/ui/toast'
 import { getResizedFile } from '/@/lib/resize'
-import useAttachments from '/@/components/Main/MainView/MessageInput/composables/useAttachments'
-import type { AxiosProgressEvent } from 'axios'
+import { MESSAGE_MAX_LENGTH } from '/@/lib/validate'
+import { useToastStore } from '/@/store/ui/toast'
 
 const useEditMessage = (
   props: { messageId: string },
@@ -135,12 +136,12 @@ const useAttachmentsEditor = (
 </script>
 
 <script lang="ts" setup>
+import MessageInputInsertStampButton from '/@/components/Main/MainView/MessageInput/MessageInputInsertStampButton.vue'
 import MessageInputKeyGuide from '/@/components/Main/MainView/MessageInput/MessageInputKeyGuide.vue'
 import MessageInputTextArea from '/@/components/Main/MainView/MessageInput/MessageInputTextArea.vue'
-import FormButton from '/@/components/UI/FormButton.vue'
-import MessageInputInsertStampButton from '/@/components/Main/MainView/MessageInput/MessageInputInsertStampButton.vue'
-import MessageInputUploadProgress from '/@/components/Main/MainView/MessageInput/MessageInputUploadProgress.vue'
 import MessageInputUploadButton from '/@/components/Main/MainView/MessageInput/MessageInputUploadButton.vue'
+import MessageInputUploadProgress from '/@/components/Main/MainView/MessageInput/MessageInputUploadProgress.vue'
+import FormButton from '/@/components/UI/FormButton.vue'
 
 const props = defineProps<{
   rawContent: string
diff --git a/src/components/Main/MainView/MessageInput/MessageInput.vue b/src/components/Main/MainView/MessageInput/MessageInput.vue
index 818b87cd76..9c0b45ac50 100644
--- a/src/components/Main/MainView/MessageInput/MessageInput.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInput.vue
@@ -26,19 +26,26 @@
     </div>
     <div v-else :class="$style.inputContainer">
       <message-input-left-controls
-        v-model:is-expanded="isLeftControlsExpanded"
+        v-model:is-left-controls-expanded="isLeftControlsExpanded"
         v-model:is-preview-shown="isPreviewShown"
+        v-model:is-input-text-area-expanded="isInputTextAreaExpanded"
+        :show-text-area-expand-button="showTextAreaExpandButton"
         :class="$style.leftControls"
         @click-add-attachment="addAttachment"
+        @toggle-left-controls-expanded="
+          textareaComponentRef?.textareaAutosizeRef?.autosizeUpdateTextarea
+        "
       />
       <message-input-text-area
         ref="textareaComponentRef"
         v-model="state.text"
+        v-model:show-text-area-expand-button="showTextAreaExpandButton"
         :channel-id="channelId"
         :is-posting="isPosting"
         :shrink-to-one-line="
           (forceMobileStyle || isMobile) && isLeftControlsExpanded
         "
+        :is-input-text-area-expanded="isInputTextAreaExpanded"
         @focus="onFocus"
         @blur="onBlur"
         @add-attachments="onAddAttachments"
@@ -58,30 +65,30 @@
 </template>
 
 <script lang="ts" setup>
-import MessageInputLeftControls from './MessageInputLeftControls.vue'
-import MessageInputPreview from './MessageInputPreview.vue'
-import MessageInputTypingUsers from './MessageInputTypingUsers.vue'
-import MessageInputKeyGuide from './MessageInputKeyGuide.vue'
-import MessageInputTextArea from './MessageInputTextArea.vue'
-import MessageInputRightControls from './MessageInputRightControls.vue'
-import MessageInputFileList from './MessageInputFileList.vue'
-import MessageInputUploadProgress from './MessageInputUploadProgress.vue'
-import AIcon from '/@/components/UI/AIcon.vue'
 import { computed, ref, toRef, watch, watchEffect } from 'vue'
-import type { ChannelId, DMChannelId, UserId } from '/@/types/entity-ids'
-import { useResponsiveStore } from '/@/store/ui/responsive'
 import useTextStampPickerInvoker from '../composables/useTextStampPickerInvoker'
 import useAttachments from './composables/useAttachments'
 import useModifierKey from './composables/useModifierKey'
 import usePostMessage from './composables/usePostMessage'
+import MessageInputFileList from './MessageInputFileList.vue'
+import MessageInputKeyGuide from './MessageInputKeyGuide.vue'
+import MessageInputLeftControls from './MessageInputLeftControls.vue'
+import MessageInputPreview from './MessageInputPreview.vue'
+import MessageInputRightControls from './MessageInputRightControls.vue'
+import MessageInputTextArea from './MessageInputTextArea.vue'
+import MessageInputTypingUsers from './MessageInputTypingUsers.vue'
+import MessageInputUploadProgress from './MessageInputUploadProgress.vue'
+import { $boolAttr } from '/@/bool-attr'
+import AIcon from '/@/components/UI/AIcon.vue'
 import useFocus from '/@/composables/dom/useFocus'
-import { useToastStore } from '/@/store/ui/toast'
 import useMessageInputState from '/@/composables/messageInputState/useMessageInputState'
 import useMessageInputStateAttachment from '/@/composables/messageInputState/useMessageInputStateAttachment'
 import { useBrowserSettings } from '/@/store/app/browserSettings'
-import { useChannelsStore } from '/@/store/entities/channels'
 import { useViewStateSenderStore } from '/@/store/domain/viewStateSenderStore'
-import { $boolAttr } from '/@/bool-attr'
+import { useChannelsStore } from '/@/store/entities/channels'
+import { useResponsiveStore } from '/@/store/ui/responsive'
+import { useToastStore } from '/@/store/ui/toast'
+import type { ChannelId, DMChannelId, UserId } from '/@/types/entity-ids'
 
 const props = defineProps<{
   channelId: ChannelId | DMChannelId
@@ -108,6 +115,8 @@ const { sendWithModifierKey } = useBrowserSettings()
 const { channelsMap } = useChannelsStore()
 const isLeftControlsExpanded = ref(false)
 const isPreviewShown = ref(false)
+const isInputTextAreaExpanded = ref(true)
+const showTextAreaExpandButton = ref(false)
 
 const isArchived = computed(
   () => channelsMap.value.get(props.channelId)?.archived ?? false
@@ -147,13 +156,11 @@ const showKeyGuide = computed(
     (sendWithModifierKey.value !== 'modifier' || canPostMessage.value)
 )
 
-const textareaComponentRef = ref<{
-  textareaAutosizeRef: { $el: HTMLTextAreaElement }
-}>()
+const textareaComponentRef = ref<InstanceType<typeof MessageInputTextArea>>()
 const containerEle = ref<HTMLDivElement>()
 const { toggleStampPicker } = useTextStampPickerInvoker(
   toRef(state, 'text'),
-  computed(() => textareaComponentRef.value?.textareaAutosizeRef.$el),
+  computed(() => textareaComponentRef.value?.textareaAutosizeRef?.$el),
   containerEle
 )
 
@@ -194,7 +201,6 @@ $radius: 4px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  align-items: flex-end;
 
   &[data-is-archived] {
     @include color-ui-secondary-inactive;
@@ -219,7 +225,7 @@ $radius: 4px;
   }
 }
 .leftControls {
-  margin: 8px 8px 8px 0;
+  margin: 2px 8px 8px 0;
 }
 .rightControls {
   position: absolute;
diff --git a/src/components/Main/MainView/MessageInput/MessageInputLeftControls.vue b/src/components/Main/MainView/MessageInput/MessageInputLeftControls.vue
index d9b99d77da..08a8ae5917 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputLeftControls.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputLeftControls.vue
@@ -1,46 +1,63 @@
 <template>
-  <div :class="$style.container" :data-is-mobile="$boolAttr(isMobile)">
-    <template v-if="!isMobile || isExpanded">
-      <message-input-upload-button
-        :class="$style.button"
-        @click="emit('clickAddAttachment')"
-      />
-      <message-input-preview-button
-        v-model="isPreviewShownValue"
-        :class="$style.button"
-      />
-    </template>
+  <div :class="$style.outerContainer" :style="outerContainerStyle">
     <icon-button
-      v-if="isMobile"
-      :class="$style.button"
-      :icon-name="isExpanded ? 'chevron-left' : 'chevron-right'"
+      v-if="showTextAreaExpandButton"
+      :class="$style.textAreaExpandButton"
+      :icon-name="isInputTextAreaExpanded ? 'chevron-down' : 'chevron-up'"
       icon-mdi
-      @click="toggleExpanded"
+      @click="toggleIsInputTextAreaExpanded"
     />
+    <div :class="$style.innerContainer" :data-is-mobile="$boolAttr(isMobile)">
+      <template v-if="!isMobile || isLeftControlsExpanded">
+        <message-input-upload-button
+          :class="$style.button"
+          @click="emit('clickAddAttachment')"
+        />
+        <message-input-preview-button
+          v-model="isPreviewShownValue"
+          :class="$style.button"
+        />
+      </template>
+      <icon-button
+        v-if="isMobile"
+        :class="$style.button"
+        :icon-name="isLeftControlsExpanded ? 'chevron-left' : 'chevron-right'"
+        icon-mdi
+        @click="toggleLeftControlsExpanded"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import MessageInputUploadButton from './MessageInputUploadButton.vue'
+import { computed } from 'vue'
 import MessageInputPreviewButton from './MessageInputPreviewButton.vue'
+import MessageInputUploadButton from './MessageInputUploadButton.vue'
 import IconButton from '/@/components/UI/IconButton.vue'
-import { computed } from 'vue'
 import { useResponsiveStore } from '/@/store/ui/responsive'
 
 const props = defineProps<{
-  isExpanded: boolean
+  isLeftControlsExpanded: boolean
   isPreviewShown: boolean
+  isInputTextAreaExpanded: boolean
+  showTextAreaExpandButton: boolean
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:isExpanded', _v: boolean): void
+  (e: 'update:isLeftControlsExpanded', _v: boolean): void
   (e: 'update:isPreviewShown', _v: boolean): void
   (e: 'clickAddAttachment'): void
+  (e: 'update:isInputTextAreaExpanded', _v: boolean): void
+  (e: 'toggleLeftControlsExpanded'): void
 }>()
 
 const { isMobile } = useResponsiveStore()
-const toggleExpanded = () => {
-  emit('update:isExpanded', !props.isExpanded)
+const toggleLeftControlsExpanded = () => {
+  emit('update:isLeftControlsExpanded', !props.isLeftControlsExpanded)
+  emit('toggleLeftControlsExpanded')
+}
+const toggleIsInputTextAreaExpanded = () => {
+  emit('update:isInputTextAreaExpanded', !props.isInputTextAreaExpanded)
 }
 
 const isPreviewShownValue = computed<boolean>({
@@ -49,17 +66,32 @@ const isPreviewShownValue = computed<boolean>({
   },
   set(v) {
     emit('update:isPreviewShown', v)
-    emit('update:isExpanded', false)
+    emit('update:isLeftControlsExpanded', false)
+    emit('toggleLeftControlsExpanded')
   }
 })
+
+const outerContainerStyle = computed(() => ({
+  '--justify-content': props.showTextAreaExpandButton
+    ? 'space-between'
+    : 'flex-end'
+}))
 </script>
 
 <style lang="scss" module>
-.container {
+.outerContainer {
+  @include color-ui-secondary;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  justify-content: var(--justify-content);
+}
+.innerContainer {
   @include color-ui-secondary;
   display: flex;
 }
 .button {
+  @include color-ui-secondary;
   margin: 0 4px;
 
   &:first-child:first-child {
@@ -69,4 +101,7 @@ const isPreviewShownValue = computed<boolean>({
     margin-right: 0;
   }
 }
+.textAreaExpandButton {
+  @include color-ui-secondary;
+}
 </style>
diff --git a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
index 60a0a0e2d3..e9c5ae528e 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
@@ -4,12 +4,14 @@
       ref="textareaAutosizeRef"
       v-model="value"
       :class="$style.textarea"
-      :style="style"
+      :style="textareaAutosizeStyle"
       :readonly="isPosting"
       placeholder="メッセージを入力"
       rows="1"
       :data-simple-padding="simplePadding"
       :data-shrink-to-one-line="shrinkToOneLine"
+      :data-is-max-height-none="isMaxHeightNone"
+      :data-is-input-text-area-expanded="isInputTextAreaExpanded"
       :data-is-mobile="isMobile"
       :data-is-firefox="firefoxFlag"
       data-testid="message-input-textarea"
@@ -19,6 +21,7 @@
       @focus="onFocus"
       @blur="onBlur"
       @paste="onPaste"
+      @autosize-updated="updateShowIsInputTextareaExpandButtonVisibility"
     />
     <div :class="$style.over" />
     <dropdown-suggester
@@ -33,18 +36,18 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
+import usePaste from './composables/usePaste'
 import useSendKeyWatcher from './composables/useSendKeyWatcher'
-import { useModelValueSyncer } from '/@/composables/useModelSyncer'
-import type { ChannelId } from '/@/types/entity-ids'
 import useWordSuggester from './composables/useWordSuggester'
+import DropdownSuggester from './DropdownSuggester/DropdownSuggester.vue'
+import TextareaAutosize from '/@/components/UI/TextareaAutosize.vue'
 import useInsertText from '/@/composables/dom/useInsertText'
-import { getScrollbarWidth } from '/@/lib/dom/scrollbar'
+import { useModelValueSyncer } from '/@/composables/useModelSyncer'
 import { isFirefox } from '/@/lib/dom/browser'
+import { getScrollbarWidth } from '/@/lib/dom/scrollbar'
 import { useResponsiveStore } from '/@/store/ui/responsive'
-import usePaste from './composables/usePaste'
-import TextareaAutosize from '/@/components/UI/TextareaAutosize.vue'
-import DropdownSuggester from './DropdownSuggester/DropdownSuggester.vue'
+import type { ChannelId } from '/@/types/entity-ids'
 
 const props = withDefaults(
   defineProps<{
@@ -53,13 +56,17 @@ const props = withDefaults(
     isPosting?: boolean
     simplePadding?: boolean
     shrinkToOneLine?: boolean
+    isMaxHeightNone?: boolean
+    isInputTextAreaExpanded?: boolean
   }>(),
   {
     modelValue: '',
     channelId: '',
     isPosting: false,
     simplePadding: false,
-    shrinkToOneLine: false
+    shrinkToOneLine: false,
+    isMaxHeightNone: false,
+    isInputTextAreaExpanded: false
   }
 )
 
@@ -71,6 +78,7 @@ const emit = defineEmits<{
   (e: 'postMessage'): void
   (e: 'modifierKeyDown'): void
   (e: 'modifierKeyUp'): void
+  (e: 'autosize-updated'): void
 }>()
 
 const firefoxFlag = isFirefox()
@@ -78,9 +86,7 @@ const firefoxFlag = isFirefox()
 const value = useModelValueSyncer(props, emit)
 const { isMobile } = useResponsiveStore()
 
-const textareaAutosizeRef = ref<{
-  $el: HTMLTextAreaElement
-}>()
+const textareaAutosizeRef = ref<InstanceType<typeof TextareaAutosize>>()
 const textareaRef = computed(() => textareaAutosizeRef.value?.$el)
 
 defineExpose({ textareaAutosizeRef })
@@ -136,10 +142,50 @@ const onBlur = () => {
   emit('blur')
 }
 
+const textAreaAutoSizeMaxHeightShrunk = computed(() =>
+  isMobile.value ? 70 : 160
+)
+
+const textAreaAutoSizeMaxHeight = computed(() => {
+  if (props.isMaxHeightNone) {
+    return 'none'
+  }
+  return (
+    (props.isInputTextAreaExpanded
+      ? textAreaAutoSizeMaxHeightShrunk.value * 2
+      : textAreaAutoSizeMaxHeightShrunk.value) + 'px'
+  )
+})
+
 const scollbarWidth = getScrollbarWidth()
-const style = {
-  '--input-scrollbar-width': `${scollbarWidth}px`
+const textareaAutosizeStyle = computed(() => ({
+  '--input-scrollbar-width': `${scollbarWidth}px`,
+  '--max-height': textAreaAutoSizeMaxHeight.value
+}))
+
+const showTextAreaExpandButton = defineModel<boolean>(
+  'showTextAreaExpandButton',
+  {
+    default: false
+  }
+)
+
+const updateShowIsInputTextareaExpandButtonVisibility = () => {
+  nextTick(() => {
+    if (textareaRef.value) {
+      showTextAreaExpandButton.value =
+        textareaRef.value.scrollHeight > textAreaAutoSizeMaxHeightShrunk.value
+    }
+  })
 }
+
+watch(value, updateShowIsInputTextareaExpandButtonVisibility, {
+  immediate: true
+})
+
+watch(textAreaAutoSizeMaxHeight, () => {
+  textareaAutosizeRef.value?.autosizeUpdateTextarea()
+})
 </script>
 
 <style lang="scss" module>
@@ -162,14 +208,11 @@ $vertical-padding: 8px;
   padding: $vertical-padding 16px;
   // 左から、余白、スタンプパレットボタン、余白、送信ボタン、スクロールバー
   padding-right: calc(8px + 24px + 8px + 24px + var(--input-scrollbar-width));
-  max-height: 160px;
+  max-height: var(--max-height);
   &[readonly] {
     @include color-ui-secondary-inactive;
     cursor: wait;
   }
-  &[data-is-mobile='true'] {
-    max-height: 70px;
-  }
   &[data-simple-padding='true'] {
     padding-right: 16px;
   }
diff --git a/src/components/UI/TextareaAutosize.vue b/src/components/UI/TextareaAutosize.vue
index bb03f98677..7c22b6bdda 100644
--- a/src/components/UI/TextareaAutosize.vue
+++ b/src/components/UI/TextareaAutosize.vue
@@ -18,13 +18,12 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, toRef, watch, nextTick } from 'vue'
 import autosize from 'autosize'
+import { nextTick, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
 import useTextModelSyncer from '/@/composables/useTextModelSyncer'
 
 const props = defineProps<{
   modelValue: string
-  maxHeight?: number
   readonly?: boolean
   placeholder?: string
   rows?: string
@@ -39,6 +38,7 @@ const emit = defineEmits<{
   (e: 'focus'): void
   (e: 'blur'): void
   (e: 'paste', _val: ClipboardEvent): void
+  (e: 'autosize-updated'): void
 }>()
 
 const { value, onInput } = useTextModelSyncer(props, emit)
@@ -49,17 +49,22 @@ const focus = () => {
   textareaEle.value?.focus()
 }
 
-onMounted(() => {
-  if (textareaEle.value) {
-    autosize(textareaEle.value)
-  }
-})
-watch(toRef(props, 'modelValue'), async () => {
+const autosizeUpdateTextarea = async () => {
   await nextTick()
   if (textareaEle.value) {
     autosize.update(textareaEle.value)
   }
+}
+
+onMounted(() => {
+  if (textareaEle.value) {
+    autosize(textareaEle.value)
+    textareaEle.value.addEventListener('autosize:resized', () => {
+      emit('autosize-updated')
+    })
+  }
 })
+watch([toRef(props, 'modelValue')], autosizeUpdateTextarea)
 onBeforeUnmount(() => {
   if (textareaEle.value) {
     autosize.destroy(textareaEle.value)
@@ -67,7 +72,8 @@ onBeforeUnmount(() => {
 })
 
 defineExpose({
-  focus
+  focus,
+  autosizeUpdateTextarea
 })
 </script>