diff --git a/src/components/messenger/feed/components/create-post/index.tsx b/src/components/messenger/feed/components/create-post/index.tsx
deleted file mode 100644
index e7daed194..000000000
--- a/src/components/messenger/feed/components/create-post/index.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-import { motion, AnimatePresence } from 'framer-motion';
-import { Avatar, Button } from '@zero-tech/zui/components';
-
-import { Key } from '../../../../../lib/keyboard-search';
-
-import styles from './styles.module.scss';
-
-interface CreatePostProps {
-  avatarUrl?: string;
-  isSubmitting?: boolean;
-
-  onSubmit: (message: string) => void;
-}
-
-export const CreatePost = ({ avatarUrl, isSubmitting, onSubmit }: CreatePostProps) => {
-  const [value, setValue] = useState('');
-  const isDisabled = !value.trim() || isSubmitting;
-
-  const handleOnChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (!event.shiftKey && event.key === Key.Enter) {
-      event.preventDefault();
-      handleOnSubmit();
-    }
-  };
-
-  const handleOnSubmit = () => {
-    if (value.trim()) {
-      onSubmit(value);
-      setValue('');
-    }
-  };
-
-  return (
-    <div className={styles.Container}>
-      <div className={styles.Avatar}>
-        <Avatar imageURL={avatarUrl} size={'regular'} />
-      </div>
-      <div className={styles.Create}>
-        <div className={styles.Input}>
-          <AnimatePresence>
-            {isSubmitting && (
-              <motion.div
-                className={styles.Loading}
-                initial={{ width: 0, opacity: 1 }}
-                animate={{ width: '60%', opacity: 1 }}
-                exit={{ width: '100%', opacity: 0 }}
-                transition={{ duration: 0.4 }}
-              />
-            )}
-          </AnimatePresence>
-          <PostInput value={value} onChange={handleOnChange} onKeyDown={handleKeyDown} />
-          <hr />
-        </div>
-        <div className={styles.Actions}>
-          <div className={styles.Media}></div>
-          <Button isDisabled={isDisabled} isLoading={isSubmitting} className={styles.Button} onPress={handleOnSubmit}>
-            Create
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-interface PostInputProps {
-  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
-  value: string;
-}
-
-const PostInput = ({ onChange, onKeyDown, value }: PostInputProps) => {
-  const ref = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.style.height = 'auto';
-      ref.current.style.height = `${ref.current.scrollHeight}px`;
-
-      // Auto-resize on input
-      ref.current.addEventListener('input', () => {
-        ref.current.style.height = 'auto';
-        ref.current.style.height = `${ref.current.scrollHeight}px`;
-      });
-    }
-  }, []);
-
-  return (
-    <textarea
-      className={styles.Input}
-      onChange={onChange}
-      onKeyDown={onKeyDown}
-      placeholder='Write a post'
-      ref={ref}
-      rows={2}
-      value={value}
-    />
-  );
-};
diff --git a/src/components/messenger/feed/components/create-post/styles.module.scss b/src/components/messenger/feed/components/create-post/styles.module.scss
deleted file mode 100644
index b93945bc1..000000000
--- a/src/components/messenger/feed/components/create-post/styles.module.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-.Container {
-  display: flex;
-  gap: 8px;
-  padding: 16px 8px;
-}
-
-.Create {
-  align-items: flex-end;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 8px;
-  position: relative;
-
-  hr {
-    border: none;
-    border-bottom: 1px solid rgba(245, 245, 245, 0.12);
-    outline: none;
-    width: 100%;
-  }
-}
-
-.Input {
-  background: none;
-  border: none;
-  color: white;
-  font-size: 16px;
-  height: auto;
-  outline: none;
-  resize: none;
-  width: 100%;
-}
-
-.Actions,
-.Media {
-  display: flex;
-  width: 100%;
-  gap: 8px;
-
-  svg {
-    color: var(--color-secondary-11) !important;
-  }
-}
-
-.Button {
-  border-radius: 8px;
-}
-
-.Avatar {
-  pointer-events: none;
-}
-
-.Input {
-  position: relative;
-}
-
-.Loading {
-  background: var(--color-secondary-9);
-  height: 2px;
-  left: 0;
-  position: absolute;
-  top: calc(100% - 8px - 1px);
-  width: 0;
-}
diff --git a/src/components/messenger/feed/components/post-input/container.tsx b/src/components/messenger/feed/components/post-input/container.tsx
new file mode 100644
index 000000000..6addcdc89
--- /dev/null
+++ b/src/components/messenger/feed/components/post-input/container.tsx
@@ -0,0 +1,61 @@
+import React, { RefObject } from 'react';
+
+import { RootState } from '../../../../../store/reducer';
+import { connectContainer } from '../../../../../store/redux-container';
+import { AuthenticationState } from '../../../../../store/authentication/types';
+
+import { PostInput } from '.';
+
+// should move this to a shared location
+import { Media } from '../../../../message-input/utils';
+
+export interface PublicProperties {
+  id?: string;
+  initialValue?: string;
+  isSubmitting?: boolean;
+
+  onSubmit: (message: string, media: Media[]) => void;
+  onPostInputRendered?: (textareaRef: RefObject<HTMLTextAreaElement>) => void;
+}
+
+export interface Properties extends PublicProperties {
+  user: AuthenticationState['user'];
+}
+
+export class Container extends React.Component<Properties> {
+  static mapState(state: RootState): Partial<Properties> {
+    const {
+      authentication: { user },
+    } = state;
+
+    return { user };
+  }
+
+  static mapActions(_props: Properties): Partial<Properties> {
+    return {};
+  }
+
+  onPostInputRendered = (textareaRef: RefObject<HTMLTextAreaElement>) => {
+    const activeConversationId = this.props.id;
+    if (textareaRef && textareaRef.current) {
+      if ((activeConversationId && activeConversationId === textareaRef.current.id) || !activeConversationId) {
+        textareaRef.current.focus();
+      }
+    }
+  };
+
+  render() {
+    return (
+      <PostInput
+        id={this.props.id}
+        initialValue={this.props.initialValue}
+        isSubmitting={this.props.isSubmitting}
+        onSubmit={this.props.onSubmit}
+        onPostInputRendered={this.onPostInputRendered}
+        avatarUrl={this.props.user.data?.profileSummary.profileImage}
+      />
+    );
+  }
+}
+
+export const PostInputContainer = connectContainer<PublicProperties>(Container);
diff --git a/src/components/messenger/feed/components/post-input/index.test.tsx b/src/components/messenger/feed/components/post-input/index.test.tsx
new file mode 100644
index 000000000..fca26eb51
--- /dev/null
+++ b/src/components/messenger/feed/components/post-input/index.test.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { PostInput, Properties } from '.';
+import { Key } from '../../../../../lib/keyboard-search';
+import Dropzone from 'react-dropzone';
+import { config } from '../../../../../config';
+import { Button } from '@zero-tech/zui/components';
+
+describe('PostInput', () => {
+  const subject = (props: Partial<Properties>, child: any = <div />) => {
+    const allProps: Properties = {
+      onSubmit: () => undefined,
+      onPostInputRendered: () => undefined,
+      clipboard: {
+        addPasteListener: (_) => {},
+        removePasteListener: (_) => {},
+      },
+      ...props,
+    };
+
+    return shallow(<PostInput {...allProps}>{child}</PostInput>);
+  };
+
+  it('does not submit post when post state is empty', () => {
+    const onSubmit = jest.fn();
+    const wrapper = subject({ onSubmit });
+    const dropzone = wrapper.find(Dropzone).shallow();
+
+    const textarea = dropzone.find('textarea');
+    textarea.simulate('keydown', { preventDefault() {}, key: Key.Enter, shiftKey: false });
+
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('submits post when Enter is pressed', () => {
+    const onSubmit = jest.fn();
+    const wrapper = subject({ onSubmit });
+    const dropzone = wrapper.find(Dropzone).shallow();
+
+    const textarea = dropzone.find('textarea');
+    textarea.simulate('change', { target: { value: 'Hello' } });
+    textarea.simulate('keydown', { preventDefault() {}, key: Key.Enter, shiftKey: false });
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith('Hello', []);
+  });
+
+  it('submits post when Enter is pressed and images have been added', () => {
+    const onSubmit = jest.fn();
+    const dropzoneToMedia = (files) => files;
+    const wrapper = subject({ onSubmit, dropzoneToMedia });
+    const dropzone = wrapper.find(Dropzone).shallow();
+
+    const textarea = dropzone.find('textarea');
+    wrapper.find(Dropzone).simulate('drop', [{ name: 'image1' }]);
+    textarea.simulate('keydown', { preventDefault() {}, key: Key.Enter, shiftKey: false });
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith('', [{ name: 'image1' }]);
+  });
+
+  it('submits post when submit button is clicked', () => {
+    const onSubmit = jest.fn();
+    const wrapper = subject({ onSubmit });
+    const dropzone = wrapper.find(Dropzone).shallow();
+
+    dropzone.find('textarea').simulate('change', { target: { value: 'Hello' } });
+    dropzone.find(Button).simulate('press');
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith('Hello', []);
+  });
+
+  it('submits post when submit button is clicked and images have been added', () => {
+    const onSubmit = jest.fn();
+    const dropzoneToMedia = (files) => files;
+    const wrapper = subject({ onSubmit, dropzoneToMedia });
+    const dropzone = wrapper.find(Dropzone).shallow();
+
+    wrapper.find(Dropzone).simulate('drop', [{ name: 'image1' }]);
+    dropzone.find(Button).simulate('press');
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith('', [{ name: 'image1' }]);
+  });
+
+  it('renders Dropzone with correct mime types and max size', () => {
+    const wrapper = subject({});
+    const dropZone = wrapper.find(Dropzone);
+
+    expect(dropZone.prop('accept')).toEqual({ 'image/*': [] });
+    expect(dropZone.prop('maxSize')).toEqual(config.cloudinary.max_file_size);
+  });
+
+  it('call after render', () => {
+    const onPostInputRendered = jest.fn();
+
+    subject({ onPostInputRendered });
+
+    expect(onPostInputRendered).toHaveBeenCalledWith({
+      current: null,
+    });
+  });
+});
diff --git a/src/components/messenger/feed/components/post-input/index.tsx b/src/components/messenger/feed/components/post-input/index.tsx
new file mode 100644
index 000000000..bd6db8130
--- /dev/null
+++ b/src/components/messenger/feed/components/post-input/index.tsx
@@ -0,0 +1,231 @@
+import React, { RefObject } from 'react';
+import Dropzone from 'react-dropzone';
+
+import { config } from '../../../../../config';
+import { Key } from '../../../../../lib/keyboard-search';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Avatar, Button } from '@zero-tech/zui/components';
+import ImageCards from '../../../../../platform-apps/channels/image-cards';
+import { PublicProperties as PublicPropertiesContainer } from './container';
+
+import { bemClassName } from '../../../../../lib/bem';
+import './styles.scss';
+
+// should move these to a shared location
+import Menu from '../../../../message-input/menu/menu';
+import { MediaType } from '../../../../../store/messages';
+import { Media, addImagePreview, dropzoneToMedia, windowClipboard } from '../../../../message-input/utils';
+
+const cn = bemClassName('post-input-container');
+
+export interface Properties extends PublicPropertiesContainer {
+  avatarUrl?: string;
+  isSubmitting?: boolean;
+  clipboard?: {
+    addPasteListener: (listener: EventListenerOrEventListenerObject) => void;
+    removePasteListener: (listener: EventListenerOrEventListenerObject) => void;
+  };
+
+  dropzoneToMedia?: (files: any[]) => Media[];
+}
+
+interface State {
+  value: string;
+  media: Media[];
+}
+
+export class PostInput extends React.Component<Properties, State> {
+  state = {
+    value: this.props.initialValue || '',
+    media: [],
+  };
+
+  private textareaRef: RefObject<HTMLTextAreaElement>;
+
+  constructor(props) {
+    super(props);
+
+    this.textareaRef = React.createRef<HTMLTextAreaElement>();
+  }
+
+  componentDidMount() {
+    if (this.props.onPostInputRendered) {
+      this.props.onPostInputRendered(this.textareaRef);
+    }
+
+    this.clipboard.addPasteListener(this.clipboardEvent);
+    this.adjustTextareaHeight();
+  }
+
+  get clipboard() {
+    return this.props.clipboard || windowClipboard();
+  }
+
+  componentDidUpdate(_prevProps, prevState) {
+    if (prevState.value !== this.state.value) {
+      this.adjustTextareaHeight();
+    }
+
+    if (this.props.onPostInputRendered) {
+      this.props.onPostInputRendered(this.textareaRef);
+    }
+  }
+
+  componentWillUnmount() {
+    this.clipboard.removePasteListener(this.clipboardEvent);
+  }
+
+  adjustTextareaHeight = () => {
+    if (this.textareaRef.current) {
+      const textarea = this.textareaRef.current;
+      textarea.style.height = 'auto';
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  };
+
+  get mimeTypes() {
+    return {
+      'image/*': [],
+    };
+  }
+
+  get images() {
+    return this.state.media.filter((m) => m.mediaType === MediaType.Image);
+  }
+
+  onSubmit = (): void => {
+    const { value, media } = this.state;
+    if (value || media.length) {
+      this.props.onSubmit(value, media);
+      this.setState({ value: '', media: [] });
+    }
+  };
+
+  onKeyDown = (event): void => {
+    if (!event.shiftKey && event.key === Key.Enter) {
+      event.preventDefault();
+      this.onSubmit();
+    }
+  };
+
+  onChange = (event): void => {
+    this.setState({ value: event.target.value });
+  };
+
+  removeMediaPreview = (mediaToRemove: { id: string }) => {
+    const media = this.state.media;
+
+    this.setState({
+      media: media.filter((m) => m.id !== mediaToRemove.id),
+    });
+
+    this.props.onPostInputRendered(this.textareaRef);
+  };
+
+  mediaSelected = (newMedia: Media[]): void => {
+    this.setState({ media: [...this.state.media, ...newMedia] });
+    this.props.onPostInputRendered(this.textareaRef);
+  };
+
+  imagesSelected = (acceptedFiles): void => {
+    const newImages: Media[] = this.props.dropzoneToMedia
+      ? this.props.dropzoneToMedia(acceptedFiles)
+      : dropzoneToMedia(acceptedFiles);
+    if (newImages.length) {
+      this.mediaSelected(newImages);
+    }
+  };
+
+  clipboardEvent = async (event) => {
+    if (document.activeElement !== this.textareaRef.current) {
+      return;
+    }
+
+    const items = event.clipboardData.items;
+
+    const newImages: any[] = Array.from(items)
+      .filter((item: any) => item.kind === 'file' && /image\/*/.test(item.type))
+      .map((file: any) => file.getAsFile())
+      .filter(Boolean);
+
+    if (newImages.length !== 0) {
+      this.imagesSelected(await addImagePreview(newImages));
+    }
+  };
+
+  renderInput() {
+    const isDisabled = (!this.state.value.trim() && !this.state.media.length) || this.props.isSubmitting;
+
+    return (
+      <div {...cn('')}>
+        <Dropzone
+          onDrop={this.imagesSelected}
+          noClick
+          accept={this.mimeTypes}
+          maxSize={config.cloudinary.max_file_size}
+        >
+          {({ getRootProps }) => (
+            <div {...getRootProps({ ...cn('drop-zone-text-area') })}>
+              <div {...cn('create-outer')}>
+                <div>
+                  <Avatar {...cn('avatar')} imageURL={this.props.avatarUrl} size={'regular'} />
+                </div>
+                <div {...cn('create-inner')}>
+                  <div {...cn('input')}>
+                    <AnimatePresence>
+                      {this.props.isSubmitting && (
+                        <motion.div
+                          {...cn('loading')}
+                          initial={{ width: 0, opacity: 1 }}
+                          animate={{ width: '60%', opacity: 1 }}
+                          exit={{ width: '100%', opacity: 0 }}
+                          transition={{ duration: 0.4 }}
+                        />
+                      )}
+                    </AnimatePresence>
+                    <textarea
+                      {...cn('input')}
+                      onChange={this.onChange}
+                      onKeyDown={this.onKeyDown}
+                      placeholder='Write a post'
+                      ref={this.textareaRef}
+                      rows={2}
+                      value={this.state.value}
+                    />
+                    <hr />
+                  </div>
+
+                  <div {...cn('image')}>
+                    <ImageCards images={this.images} onRemoveImage={this.removeMediaPreview} size='small' />
+                  </div>
+
+                  <div {...cn('actions')}>
+                    <div {...cn('media')}>
+                      <Menu
+                        onSelected={this.mediaSelected}
+                        mimeTypes={this.mimeTypes}
+                        maxSize={config.cloudinary.max_file_size}
+                      />
+                    </div>
+                    <Button
+                      {...cn('button')}
+                      isDisabled={isDisabled}
+                      isLoading={this.props.isSubmitting}
+                      onPress={this.onSubmit}
+                    >
+                      Create
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </Dropzone>
+      </div>
+    );
+  }
+
+  render() {
+    return <div {...cn('')}>{this.renderInput()}</div>;
+  }
+}
diff --git a/src/components/messenger/feed/components/post-input/styles.scss b/src/components/messenger/feed/components/post-input/styles.scss
new file mode 100644
index 000000000..9ca99260b
--- /dev/null
+++ b/src/components/messenger/feed/components/post-input/styles.scss
@@ -0,0 +1,80 @@
+@use '~@zero-tech/zui/styles/theme' as theme;
+
+@import '../../../../../glass';
+
+.post-input-container {
+  &__create-outer {
+    display: flex;
+    gap: 8px;
+    padding: 16px 8px;
+  }
+
+  &__create-inner {
+    align-items: flex-end;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 4px;
+    position: relative;
+
+    hr {
+      border: none;
+      border-bottom: 1px solid rgba(245, 245, 245, 0.12);
+      outline: none;
+      width: 100%;
+    }
+  }
+
+  &__input {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 16px;
+    height: auto;
+    outline: none;
+    resize: none;
+    width: 100%;
+  }
+
+  &__image {
+    width: 100%;
+  }
+
+  &__actions,
+  &__media {
+    display: flex;
+    gap: 8px;
+    width: 100%;
+
+    svg {
+      color: var(--color-secondary-11) !important;
+    }
+  }
+
+  &__button {
+    border-radius: 8px;
+  }
+
+  &__avatar {
+    pointer-events: none;
+  }
+
+  &__drop-zone-text-area {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+  }
+
+  &__loading {
+    background: var(--color-secondary-9);
+    height: 2px;
+    left: 0;
+    position: absolute;
+    top: calc(100% - 8px - 1px);
+    width: 0;
+  }
+
+  &__input {
+    position: relative;
+  }
+}
diff --git a/src/components/messenger/feed/index.test.tsx b/src/components/messenger/feed/index.test.tsx
index aa0f795a1..e8b34bef2 100644
--- a/src/components/messenger/feed/index.test.tsx
+++ b/src/components/messenger/feed/index.test.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { Container as MessengerFeed, Properties } from '.';
 import { StoreBuilder, stubConversation } from '../../../store/test/store';
+import { PostInputContainer } from './components/post-input/container';
 
 describe(MessengerFeed, () => {
   const subject = (props: Partial<Properties>) => {
     const allProps: Properties = {
-      user: { data: null },
       channel: null,
       activeConversationId: 'channel-id',
       isSocialChannel: false,
@@ -22,7 +22,7 @@ describe(MessengerFeed, () => {
     const channel = stubConversation({ name: 'convo-1', hasLoadedMessages: true, messages: [] });
 
     const wrapper = subject({ channel: channel as any, isSocialChannel: true });
-    expect(wrapper).toHaveElement('CreatePost');
+    expect(wrapper).toHaveElement(PostInputContainer);
   });
 
   it('does not render Messenger Feed when isSocialChannel is false', () => {
diff --git a/src/components/messenger/feed/index.tsx b/src/components/messenger/feed/index.tsx
index 4a4360904..ca3fed6d7 100644
--- a/src/components/messenger/feed/index.tsx
+++ b/src/components/messenger/feed/index.tsx
@@ -2,23 +2,24 @@ import React from 'react';
 import { RootState } from '../../../store/reducer';
 import { connectContainer } from '../../../store/redux-container';
 import { ScrollbarContainer } from '../../scrollbar-container';
-import { CreatePost } from './components/create-post';
 import { PostPayload as PayloadPostMessage } from '../../../store/posts/saga';
 import { Channel, denormalize } from '../../../store/channels';
 import { MessageSendStatus } from '../../../store/messages';
 import { sendPost } from '../../../store/posts';
-import { AuthenticationState } from '../../../store/authentication/types';
 import { FeedViewContainer } from './feed-view-container/feed-view-container';
+import { PostInputContainer as PostInput } from './components/post-input/container';
 
 import { bemClassName } from '../../../lib/bem';
 import './styles.scss';
 
+// should move this to a shared location
+import { Media } from '../../message-input/utils';
+
 const cn = bemClassName('messenger-feed');
 
 export interface PublicProperties {}
 
 export interface Properties extends PublicProperties {
-  user: AuthenticationState['user'];
   channel: Channel;
   activeConversationId: string;
   isSocialChannel: boolean;
@@ -30,14 +31,12 @@ export interface Properties extends PublicProperties {
 export class Container extends React.Component<Properties> {
   static mapState(state: RootState): Partial<Properties> {
     const {
-      authentication: { user },
       chat: { activeConversationId, isJoiningConversation },
     } = state;
 
     const currentChannel = denormalize(activeConversationId, state) || null;
 
     return {
-      user,
       channel: currentChannel,
       isJoiningConversation,
       activeConversationId,
@@ -51,12 +50,13 @@ export class Container extends React.Component<Properties> {
     };
   }
 
-  submitPost = (message: string) => {
+  submitPost = (message: string, media: Media[] = []) => {
     const { activeConversationId } = this.props;
 
     let payloadPostMessage = {
       channelId: activeConversationId,
       message: message,
+      files: media,
     };
 
     this.props.sendPost(payloadPostMessage);
@@ -78,11 +78,7 @@ export class Container extends React.Component<Properties> {
     return (
       <div {...cn('')}>
         <ScrollbarContainer variant='on-hover'>
-          <CreatePost
-            avatarUrl={this.props.user.data?.profileSummary.profileImage}
-            onSubmit={this.submitPost}
-            isSubmitting={this.isSubmitting}
-          />
+          <PostInput id={activeConversationId} onSubmit={this.submitPost} isSubmitting={this.isSubmitting} />
 
           <FeedViewContainer channelId={activeConversationId} />
         </ScrollbarContainer>