diff --git a/package.json b/package.json
index 53ad6a1..8806511 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "react-sliding-pane": "^7.0.0",
     "react-stickynode": "^4.0.0",
     "react-table": "^7.7.0",
+    "react-textarea-autosize": "^8.3.3",
     "react-window-dynamic-list": "^2.3.5",
     "redux-socket.io-middleware": "^1.0.4",
     "sharp": "^0.28.1",
diff --git a/src/client/components/ComicDetail/AsyncSelectPaginate/AsyncSelectPaginate.tsx b/src/client/components/ComicDetail/AsyncSelectPaginate/AsyncSelectPaginate.tsx
index 03f8798..ed06c7c 100644
--- a/src/client/components/ComicDetail/AsyncSelectPaginate/AsyncSelectPaginate.tsx
+++ b/src/client/components/ComicDetail/AsyncSelectPaginate/AsyncSelectPaginate.tsx
@@ -6,7 +6,7 @@ import { withAsyncPaginate } from "react-select-async-paginate";
 const CreatableAsyncPaginate = withAsyncPaginate(Creatable);
 
 export const AsyncSelectPaginate = (props): ReactElement => {
-  console.log(props);
+//   console.log(props);
   const [value, setValue] = useState(null);
   const [isAddingInProgress, setIsAddingInProgress] = useState(false);
 
diff --git a/src/client/components/ComicDetail/EditMetadataPanel.tsx b/src/client/components/ComicDetail/EditMetadataPanel.tsx
index 773f6bb..62508e7 100644
--- a/src/client/components/ComicDetail/EditMetadataPanel.tsx
+++ b/src/client/components/ComicDetail/EditMetadataPanel.tsx
@@ -5,6 +5,7 @@ import arrayMutators from "final-form-arrays";
 import { FieldArray } from "react-final-form-arrays";
 import DatePicker from "react-datepicker";
 import AsyncSelectPaginate from "./AsyncSelectPaginate/AsyncSelectPaginate";
+import TextareaAutosize from "react-textarea-autosize";
 
 import "react-datepicker/dist/react-datepicker.css";
 export const EditMetadataPanel = (props): ReactElement => {
@@ -22,7 +23,20 @@ export const EditMetadataPanel = (props): ReactElement => {
       />
     );
   };
+  const TextareaAutosizeAdapter = ({ input, ...rest }) => {
+    return (
+      <TextareaAutosize
+        {...input}
+        {...rest}
+        onChange={(value) => input.onChange(value)}
+      />
+    );
+  };
+  const rawFileDetails = useSelector(
+    (state: RootState) => state.comicInfo.comicBookDetail.rawFileDetails.name,
+  );
   const dispatch = useDispatch();
+  console.log(rawFileDetails);
 
   return (
     <>
@@ -55,7 +69,8 @@ export const EditMetadataPanel = (props): ReactElement => {
                       name="issue_name"
                       component="input"
                       className="input"
-                      placeholder="Issue Name"
+                      initialValue={rawFileDetails}
+                      placeholder={"Issue Name"}
                     />
                     <span className="icon is-small is-left">
                       <i className="fa-solid fa-user-ninja"></i>
@@ -68,17 +83,18 @@ export const EditMetadataPanel = (props): ReactElement => {
             <div className="field is-horizontal">
               <div className="field-label"></div>
               <div className="field-body">
-                <div className="field is-expanded">
-                  <div className="field">
-                    <p className="control">
-                      <Field
-                        name="issue_number"
-                        component="input"
-                        className="input"
-                        placeholder="Issue Number"
-                      />
-                    </p>
-                  </div>
+                <div className="field">
+                  <p className="control has-icons-left">
+                    <Field
+                      name="issue_number"
+                      component="input"
+                      className="input"
+                      placeholder="Issue Number"
+                    />
+                    <span className="icon is-small is-left">
+                      <i className="fa-solid fa-hashtag"></i>
+                    </span>
+                  </p>
                   <p className="help">Do not enter the first zero</p>
                 </div>
                 {/* year */}
@@ -94,6 +110,87 @@ export const EditMetadataPanel = (props): ReactElement => {
               </div>
             </div>
 
+            {/* page count */}
+            <div className="field is-horizontal">
+              <div className="field-label"></div>
+              <div className="field-body">
+                <div className="field">
+                  <p className="control has-icons-left">
+                    <Field
+                      name="page_count"
+                      component="input"
+                      className="input"
+                      placeholder="Page Count"
+                    />
+                    <span className="icon is-small is-left">
+                      <i className="fa-solid fa-note-sticky"></i>
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Description */}
+            <div className="field is-horizontal">
+              <div className="field-label is-normal">
+                <label className="label">Description</label>
+              </div>
+              <div className="field-body">
+                <div className="field">
+                  <p className="control is-expanded has-icons-left">
+                    <Field
+                      name={"description"}
+                      className="textarea"
+                      component={TextareaAutosizeAdapter}
+                      placeholder={"Description"}
+                    />
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <hr size="1" />
+
+            <div className="field is-horizontal">
+              <div className="field-label">
+                <label className="label">Distributor Info</label>
+              </div>
+              <div className="field-body">
+                <div className="field is-expanded">
+                  <div className="field">
+                    <p className="control has-icons-left">
+                      <Field
+                        name="distributor_sku"
+                        component="input"
+                        className="input"
+                        placeholder="SKU"
+                      />
+                      <span className="icon is-small is-left">
+                        <i className="fa-solid fa-barcode"></i>
+                      </span>
+                    </p>
+                  </div>
+                </div>
+
+                {/* UPC code */}
+                <div className="field">
+                  <p className="control has-icons-left">
+                    <Field
+                      name="upc_code"
+                      component="input"
+                      className="input"
+                      placeholder="UPC Code"
+                    />
+                    <span className="icon is-small is-left">
+                      <i className="fa-solid fa-box"></i>
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <hr size="1" />
+
             {/* Publisher */}
             <div className="field is-horizontal">
               <div className="field-label is-normal">
@@ -107,7 +204,7 @@ export const EditMetadataPanel = (props): ReactElement => {
                       component={AsyncSelectPaginateAdapter}
                       placeholder={
                         <div>
-                          <i className="fas fa-print"></i> Publisher
+                          <i className="fas fa-print mr-2"></i> Publisher
                         </div>
                       }
                       metronResource={"publisher"}
@@ -130,7 +227,7 @@ export const EditMetadataPanel = (props): ReactElement => {
                       component={AsyncSelectPaginateAdapter}
                       placeholder={
                         <div>
-                          <i className="fas fa-book-open"></i> Story Arc
+                          <i className="fas fa-book-open mr-2"></i> Story Arc
                         </div>
                       }
                       metronResource={"arc"}
@@ -153,7 +250,7 @@ export const EditMetadataPanel = (props): ReactElement => {
                       component={AsyncSelectPaginateAdapter}
                       placeholder={
                         <div>
-                          <i className="fas fa-layer-group"></i> Series
+                          <i className="fas fa-layer-group mr-2"></i> Series
                         </div>
                       }
                       metronResource={"series"}
@@ -207,7 +304,7 @@ export const EditMetadataPanel = (props): ReactElement => {
                             component={AsyncSelectPaginateAdapter}
                             placeholder={
                               <div>
-                                <i className="fas fa-book-open"></i> Creator
+                                <i className="fa-solid fa-ghost"></i> Creator
                               </div>
                             }
                             metronResource={"creator"}
@@ -220,7 +317,11 @@ export const EditMetadataPanel = (props): ReactElement => {
                           <Field
                             name={`${name}.role`}
                             metronResource={"role"}
-                            placeholder={"Role"}
+                            placeholder={
+                              <div>
+                                <i className="fa-solid fa-key"></i> Role
+                              </div>
+                            }
                             component={AsyncSelectPaginateAdapter}
                           />
                         </p>
diff --git a/yarn.lock b/yarn.lock
index 1211c1b..eab1ba6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11370,6 +11370,15 @@ react-table@^7.7.0:
   resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.7.0.tgz#e2ce14d7fe3a559f7444e9ecfe8231ea8373f912"
   integrity sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==
 
+react-textarea-autosize@^8.3.3:
+  version "8.3.3"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz#f70913945369da453fd554c168f6baacd1fa04d8"
+  integrity sha512-2XlHXK2TDxS6vbQaoPbMOfQ8GK7+irc2fVK6QFIcC8GOnH3zI/v481n+j1L0WaPVvKxwesnY93fEfH++sus2rQ==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    use-composed-ref "^1.0.0"
+    use-latest "^1.0.0"
+
 react-transition-group@^4.3.0:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
@@ -13790,6 +13799,23 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-composed-ref@^1.0.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.2.1.tgz#9bdcb5ccd894289105da2325e1210079f56bf849"
+  integrity sha512-6+X1FLlIcjvFMAeAD/hcxDT8tmyrWnbSPMU0EnxQuDLIxokuFzWliXBiYZuGIx+mrAMLBw0WFfCkaPw8ebzAhw==
+
+use-isomorphic-layout-effect@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz#7bb6589170cd2987a152042f9084f9effb75c225"
+  integrity sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==
+
+use-latest@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.0.tgz#a44f6572b8288e0972ec411bdd0840ada366f232"
+  integrity sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==
+  dependencies:
+    use-isomorphic-layout-effect "^1.0.0"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"