diff --git a/studio/Dockerfile b/studio/Dockerfile
index 63ad9f6b..392f0e28 100644
--- a/studio/Dockerfile
+++ b/studio/Dockerfile
@@ -13,4 +13,4 @@ RUN npm install --legacy-peer-deps
 COPY . ./
 
 # start app
-CMD ["npm", "start"]
\ No newline at end of file
+CMD ["npm", "start"]
diff --git a/studio/src/components/FormItems/SlugInput.js b/studio/src/components/FormItems/SlugInput.js
index 9471876b..624527eb 100644
--- a/studio/src/components/FormItems/SlugInput.js
+++ b/studio/src/components/FormItems/SlugInput.js
@@ -7,7 +7,6 @@ const SlugInput = ({ onChange, inputProps, formItemProps }) => {
   return (
     <Form.Item
       name="slug"
-      label="Slug"
       rules={[
         {
           required: true,
@@ -20,6 +19,7 @@ const SlugInput = ({ onChange, inputProps, formItemProps }) => {
       ]}
       {...formItemProps}
     >
+      <label>Slug</label>
       <Input {...inputProps} />
     </Form.Item>
   );
diff --git a/studio/src/components/GlobalNav/MobileSidebar.js b/studio/src/components/GlobalNav/MobileSidebar.js
index 3f4f9d20..a0eeb194 100644
--- a/studio/src/components/GlobalNav/MobileSidebar.js
+++ b/studio/src/components/GlobalNav/MobileSidebar.js
@@ -92,7 +92,7 @@ function MobileSidebar({ superOrg, permission, orgs, loading, applications, serv
     children.map((route, childIndex) => {
       return resource.includes(route.title.toLowerCase()) ? (
         ['Events', 'Permissions'].indexOf(route.title) !== -1 &&
-          route.isAdmin !== superOrg.is_admin ? null : (
+        route.isAdmin !== superOrg.is_admin ? null : (
           <Menu.Item key={route.menuKey}>
             <Link to={route.path} onClick={onClose}>
               <span>{route.title}</span>
@@ -165,7 +165,7 @@ function MobileSidebar({ superOrg, permission, orgs, loading, applications, serv
                 <Avatar
                   src={
                     details[selected]?.fav_icon?.url?.[
-                    window.REACT_APP_ENABLE_IMGPROXY ? 'proxy' : 'raw'
+                      window.REACT_APP_ENABLE_IMGPROXY ? 'proxy' : 'raw'
                     ] || degaImg
                   }
                 />
@@ -209,7 +209,7 @@ function MobileSidebar({ superOrg, permission, orgs, loading, applications, serv
             }}
           >
             <div>
-              <Link style={{ ...buttonStyle, color: '#1E1E1E' }} to='/settings' onClick={onClose}>
+              <Link style={{ ...buttonStyle, color: '#1E1E1E' }} to="/settings" onClick={onClose}>
                 <SettingOutlined />
               </Link>
               {applications.length > 0 ? (
@@ -279,14 +279,14 @@ function MobileSidebar({ superOrg, permission, orgs, loading, applications, serv
             return menu.title === 'CORE' && !showCoreMenu
               ? null
               : !menu.isService
-                ? !menu.isAdmin
-                  ? getSubMenuItems(menu, index, Icon)
-                  : permission.filter((each) => each.resource === 'admin').length > 0
-                    ? getSubMenuItems(menu, index, Icon)
-                    : null
-                : services?.includes(maker(menu.title))
-                  ? getSubMenuItems(menu, index, Icon)
-                  : null;
+              ? !menu.isAdmin
+                ? getSubMenuItems(menu, index, Icon)
+                : permission.filter((each) => each.resource === 'admin').length > 0
+                ? getSubMenuItems(menu, index, Icon)
+                : null
+              : services?.includes(maker(menu.title))
+              ? getSubMenuItems(menu, index, Icon)
+              : null;
           })}
         </Menu>
       </Drawer>
diff --git a/studio/src/components/List/index.js b/studio/src/components/List/index.js
index f595f17f..68d619bd 100644
--- a/studio/src/components/List/index.js
+++ b/studio/src/components/List/index.js
@@ -180,7 +180,7 @@ function PostList({ actions, format, filters, onPagination, data, fetchPosts, qu
                 icon={<ThreeDotIcon style={{ color: '#858585' }} />}
                 onClick={(e) => {
                   e.stopPropagation();
-                  alert('this do nothing');
+                  // alert('this do nothing');
                 }}
               />
             </div>
diff --git a/studio/src/components/Template/index.js b/studio/src/components/Template/index.js
index e852238b..0759db1d 100644
--- a/studio/src/components/Template/index.js
+++ b/studio/src/components/Template/index.js
@@ -47,7 +47,7 @@ function Template({ format }) {
   };
 
   const genExtra = () => (
-    <div onClick={(e) => e.stopPropagation()}>
+    <div>
       <Button
         onClick={() => {
           setShow(!show);
@@ -81,7 +81,7 @@ function Template({ format }) {
   if (posts.length === 0) return null;
 
   return (
-    <Collapse defaultActiveKey={[]} style={{ marginBottom: '0.75rem' }}>
+    <Collapse defaultActiveKey={[]} style={{ marginBottom: '0.75rem' }} className="template-list">
       <Panel header="Templates" key="1" extra={genExtra()}>
         <List
           grid={{ gutter: 16, column: 5 }}
diff --git a/studio/src/index.css b/studio/src/index.css
index 0569eac1..3b716255 100644
--- a/studio/src/index.css
+++ b/studio/src/index.css
@@ -62,3 +62,8 @@ code {
 .edit-form .ant-collapse-header {
   font-weight: 600 !important;
 }
+
+.template-list .ant-collapse-header {
+  font-weight: 600 !important;
+  align-items: center !important;
+}
diff --git a/studio/src/pages/categories/index.js b/studio/src/pages/categories/index.js
index c40de82d..0a740790 100644
--- a/studio/src/pages/categories/index.js
+++ b/studio/src/pages/categories/index.js
@@ -140,26 +140,28 @@ function Categories({ permission }) {
                 </Col>
                 <Col>
                   {searchFieldExpand ? (
-                    <Row>
-                      <Form.Item name="q">
-                        <Input placeholder="Search categories" />
-                      </Form.Item>
-                      <Form.Item>
-                        <Button htmlType="submit" icon={<SearchOutlined />}>
-                          Search
-                        </Button>
-                      </Form.Item>
+                    <Row gutter={8}>
+                      <Col>
+                        <Form.Item name="q">
+                          <Input placeholder="Search categories" />
+                          {/**/}
+                        </Form.Item>
+                      </Col>
+                      <Col>
+                        <Form.Item>
+                          <Button htmlType="submit" icon={<SearchOutlined />}>
+                            Search
+                          </Button>
+                        </Form.Item>
+                      </Col>
                     </Row>
                   ) : (
                     <Tooltip title="search">
                       <Button
                         type="text"
                         shape="circle"
-                        onFocus={() => {
+                        onClick={() => {
                           setSearchFieldExpand(true);
-                          setTimeout(() => {
-                            form.getFieldsValue().q === undefined && setSearchFieldExpand(false);
-                          }, 10000);
                         }}
                         icon={<SearchOutlined />}
                       />
@@ -177,7 +179,7 @@ function Categories({ permission }) {
                         disabled={!(actions.includes('admin') || actions.includes('create'))}
                         type="primary"
                         icon={<PlusOutlined />}
-                        style={{ marginBottom: '1.5rem' }}
+                        style={{ margin: isMobileScreen ? '16px 0' : '0 0 16px 0' }}
                       >
                         Create
                       </Button>
diff --git a/studio/src/pages/claimants/index.js b/studio/src/pages/claimants/index.js
index dc579682..a2cdedad 100644
--- a/studio/src/pages/claimants/index.js
+++ b/studio/src/pages/claimants/index.js
@@ -139,26 +139,28 @@ function Claimants({ permission }) {
                 </Col>
                 <Col>
                   {searchFieldExpand ? (
-                    <Row>
-                      <Form.Item name="q">
-                        <Input placeholder="Search pages" />
-                      </Form.Item>
-                      <Form.Item>
-                        <Button htmlType="submit" icon={<SearchOutlined />}>
-                          Search
-                        </Button>
-                      </Form.Item>
+                    <Row gutter={8}>
+                      <Col>
+                        <Form.Item name="q">
+                          <Input placeholder="Search claimants" />
+                          {/**/}
+                        </Form.Item>
+                      </Col>
+                      <Col>
+                        <Form.Item>
+                          <Button htmlType="submit" icon={<SearchOutlined />}>
+                            Search
+                          </Button>
+                        </Form.Item>
+                      </Col>
                     </Row>
                   ) : (
                     <Tooltip title="search">
                       <Button
                         shape="circle"
                         style={{ border: 'none' }}
-                        onFocus={() => {
+                        onClick={() => {
                           setSearchFieldExpand(true);
-                          setTimeout(() => {
-                            form.getFieldsValue().q === undefined && setSearchFieldExpand(false);
-                          }, 10000);
                         }}
                         icon={<SearchOutlined />}
                       />
@@ -176,7 +178,7 @@ function Claimants({ permission }) {
                         disabled={!(actions.includes('admin') || actions.includes('create'))}
                         type="primary"
                         icon={<PlusOutlined />}
-                        style={{ marginBottom: 16 }}
+                        style={{ margin: isMobileScreen ? '16px 0' : '0 0 16px 0' }}
                       >
                         Create
                       </Button>
diff --git a/studio/src/pages/claims/index.js b/studio/src/pages/claims/index.js
index 3579124c..9dc7451b 100644
--- a/studio/src/pages/claims/index.js
+++ b/studio/src/pages/claims/index.js
@@ -154,26 +154,28 @@ function Claims({ permission }) {
                 </Col>
                 <Col>
                   {searchFieldExpand ? (
-                    <Row>
-                      <Form.Item name="q">
-                        <Input placeholder="Search pages" />
-                      </Form.Item>
-                      <Form.Item>
-                        <Button htmlType="submit" icon={<SearchOutlined />}>
-                          Search
-                        </Button>
-                      </Form.Item>
+                    <Row gutter={8}>
+                      <Col>
+                        <Form.Item name="q">
+                          <Input placeholder="Search claims" />
+                          {/**/}
+                        </Form.Item>
+                      </Col>
+                      <Col>
+                        <Form.Item>
+                          <Button htmlType="submit" icon={<SearchOutlined />}>
+                            Search
+                          </Button>
+                        </Form.Item>
+                      </Col>
                     </Row>
                   ) : (
                     <Tooltip title="search">
                       <Button
                         shape="circle"
                         type="text"
-                        onFocus={() => {
+                        onClick={() => {
                           setSearchFieldExpand(true);
-                          setTimeout(() => {
-                            form.getFieldsValue().q === undefined && setSearchFieldExpand(false);
-                          }, 10000);
                         }}
                         icon={<SearchOutlined />}
                       />
@@ -191,7 +193,7 @@ function Claims({ permission }) {
                         disabled={!(actions.includes('admin') || actions.includes('create'))}
                         type="primary"
                         icon={<PlusOutlined />}
-                        style={{ marginBottom: 16 }}
+                        style={{ margin: isMobileScreen ? '16px 0' : '0 0 16px 0' }}
                       >
                         Create
                       </Button>
diff --git a/studio/src/pages/episodes/index.js b/studio/src/pages/episodes/index.js
index 010076f6..67ad7ced 100644
--- a/studio/src/pages/episodes/index.js
+++ b/studio/src/pages/episodes/index.js
@@ -158,15 +158,20 @@ function Episodes({ permission }) {
                 </Col>
                 <Col>
                   {searchFieldExpand ? (
-                    <Row>
-                      <Form.Item name="q">
-                        <Input placeholder="Search podcasts" />
-                      </Form.Item>
-                      <Form.Item>
-                        <Button htmlType="submit" icon={<SearchOutlined />}>
-                          Search
-                        </Button>
-                      </Form.Item>
+                    <Row gutter={8}>
+                      <Col>
+                        <Form.Item name="q">
+                          <Input placeholder="Search episodes" />
+                          {/**/}
+                        </Form.Item>
+                      </Col>
+                      <Col>
+                        <Form.Item>
+                          <Button htmlType="submit" icon={<SearchOutlined />}>
+                            Search
+                          </Button>
+                        </Form.Item>
+                      </Col>
                     </Row>
                   ) : (
                     <Tooltip title="search">
@@ -174,11 +179,8 @@ function Episodes({ permission }) {
                         shape="circle"
                         // style={{ border: 'none' }}
                         type="text"
-                        onFocus={() => {
+                        onClick={() => {
                           setSearchFieldExpand(true);
-                          setTimeout(() => {
-                            form.getFieldsValue().q === undefined && setSearchFieldExpand(false);
-                          }, 10000);
                         }}
                         icon={<SearchOutlined />}
                       />
@@ -196,7 +198,7 @@ function Episodes({ permission }) {
                         disabled={!(actions.includes('admin') || actions.includes('create'))}
                         type="primary"
                         icon={<PlusOutlined />}
-                        style={{ marginBottom: 16 }}
+                        style={{ margin: isMobileScreen ? '16px 0' : '0 0 16px 0' }}
                       >
                         Create
                       </Button>
diff --git a/studio/src/pages/fact-checks/components/FactCheckForm.js b/studio/src/pages/fact-checks/components/FactCheckForm.js
index 1133c238..30af67ac 100644
--- a/studio/src/pages/fact-checks/components/FactCheckForm.js
+++ b/studio/src/pages/fact-checks/components/FactCheckForm.js
@@ -100,7 +100,7 @@ function FactCheckForm({ onCreate, data = {}, actions = {}, format }) {
     setClaimCreatedFlag(false);
   }
 
-  useEffect(() => {}, [details, loading]);
+  useEffect(() => { }, [details, loading]);
 
   const [drawerVisible, setDrawerVisible] = useState(false);
   const showDrawer = () => {
@@ -135,8 +135,8 @@ function FactCheckForm({ onCreate, data = {}, actions = {}, format }) {
     values.status = status;
     values.status === 'publish'
       ? (values.published_date = values.published_date
-          ? dayjs(values.published_date).format('YYYY-MM-DDTHH:mm:ssZ')
-          : getCurrentDate())
+        ? dayjs(values.published_date).format('YYYY-MM-DDTHH:mm:ssZ')
+        : getCurrentDate())
       : (values.published_date = null);
     onCreate(values);
   };
@@ -299,8 +299,8 @@ function FactCheckForm({ onCreate, data = {}, actions = {}, format }) {
                 </p>
               ) : null}
               {form.getFieldValue('claims') &&
-              form.getFieldValue('claims').length > 0 &&
-              !loading ? (
+                form.getFieldValue('claims').length > 0 &&
+                !loading ? (
                 <Form.Item name="claimOrder">
                   <ClaimList
                     ids={form.getFieldValue('claims')}
@@ -318,7 +318,7 @@ function FactCheckForm({ onCreate, data = {}, actions = {}, format }) {
                 initialValue={data.description_html}
               />
               <Drawer
-                title={<h4 style={{ fontWeight: 'bold' }}>Post Settings</h4>}
+                title={<h4 style={{ fontWeight: 'bold', marginTop: "0.5rem" }}>Post Settings</h4>}
                 placement="right"
                 closable={true}
                 onClose={onClose}
@@ -329,8 +329,9 @@ function FactCheckForm({ onCreate, data = {}, actions = {}, format }) {
                 <Form.Item name="featured_medium_id" label="Featured Image">
                   <MediaSelector />
                 </Form.Item>
-                <Form.Item name="claims" label="Claims" key={!visible}>
-                  <Selector mode="multiple" display={'claim'} action="Claims" />
+                <Form.Item name="claims" key={!visible}>
+                  <label>Claims</label>
+                  <Selector mode="multiple" display={'claim'} action="Claims" style={{ width: '100%', marginTop: "0.5rem" }} />
                 </Form.Item>
                 <Form.Item>
                   <Button type="primary" onClick={showModal}>
@@ -339,26 +340,32 @@ function FactCheckForm({ onCreate, data = {}, actions = {}, format }) {
                 </Form.Item>
                 <Form.Item
                   name="excerpt"
-                  label="Excerpt"
                   rules={[{ max: 5000, message: 'Excerpt must be a maximum of 5000 characters.' }]}
                 >
-                  <Input.TextArea rows={4} placeholder="Excerpt" style={{ fontSize: 'medium' }} />
+                  <label>Excerpt</label>
+                  <Input.TextArea rows={4} placeholder="Excerpt"
+                  style={{ width: '100%', marginTop: "0.5rem", fontSize: 'medium' }} />
                 </Form.Item>
-                <Form.Item name="subtitle" label="Subtitle">
-                  <Input placeholder="Subtitle" style={{ fontSize: 'medium' }} />
+                <Form.Item name="subtitle">
+                  <label>Subtitle</label>
+                  <Input placeholder="Subtitle" style={{ width: '100%', marginTop: "0.5rem", fontSize: 'medium' }}  />
                 </Form.Item>
-                <SlugInput />
-                <Form.Item name="published_date" label="Published Date">
-                  <DatePicker />
+                <SlugInput  style={{ width: '100%', marginTop: "0.5rem", fontSize: 'medium' }}/>
+                <Form.Item name="published_date" >
+                  <label>Publish Date</label>
+                  <DatePicker style={{ width: '100%', marginTop: "0.5rem", fontSize: 'medium' }} />
                 </Form.Item>
-                <Form.Item name="categories" label="Categories">
-                  <Selector mode="multiple" action="Categories" createEntity="Category" />
+                <Form.Item name="categories">
+                  <label>Categories</label>
+                  <Selector mode="multiple" action="Categories" createEntity="Category" style={{ width: '100%', marginTop: "0.5rem", fontSize: 'medium' }} />
                 </Form.Item>
-                <Form.Item name="tags" label="Tags">
-                  <Selector mode="multiple" action="Tags" createEntity="Tag" />
+                <Form.Item name="tags">
+                  <label>Tags</label>
+                  <Selector mode="multiple" action="Tags" createEntity="Tag" style={{ width: '100%', marginTop: "0.5rem", fontSize: 'medium' }} />
                 </Form.Item>
-                <Form.Item name="authors" label="Authors">
-                  <Selector mode="multiple" display={'display_name'} action="Authors" />
+                <Form.Item name="authors">
+                  <label>Authors</label>
+                  <Selector mode="multiple" display={'display_name'} action="Authors" style={{ width: '100%', marginTop: "0.5rem", fontSize: 'medium' }} />
                 </Form.Item>
                 <Form.Item>
                   <Button style={{ width: '100%' }} onClick={() => setMetaDrawer(true)}>
diff --git a/studio/src/pages/fact-checks/index.js b/studio/src/pages/fact-checks/index.js
index 2bff9982..4d1b9856 100644
--- a/studio/src/pages/fact-checks/index.js
+++ b/studio/src/pages/fact-checks/index.js
@@ -223,26 +223,28 @@ function FactCheck({ formats }) {
                 </Col>
                 <Col>
                   {searchFieldExpand ? (
-                    <Row>
-                      <Form.Item name="q">
-                        <Input placeholder="Search pages" />
-                      </Form.Item>
-                      <Form.Item>
-                        <Button htmlType="submit" icon={<SearchOutlined />}>
-                          Search
-                        </Button>
-                      </Form.Item>
+                    <Row gutter={8}>
+                      <Col>
+                        <Form.Item name="q">
+                          <Input placeholder="Search fact-checks" />
+                          {/**/}
+                        </Form.Item>
+                      </Col>
+                      <Col>
+                        <Form.Item>
+                          <Button htmlType="submit" icon={<SearchOutlined />}>
+                            Search
+                          </Button>
+                        </Form.Item>
+                      </Col>
                     </Row>
                   ) : (
                     <Tooltip title="search">
                       <Button
                         shape="circle"
                         type="text"
-                        onFocus={() => {
+                        onClick={() => {
                           setSearchFieldExpand(true);
-                          setTimeout(() => {
-                            form.getFieldsValue().q === undefined && setSearchFieldExpand(false);
-                          }, 10000);
                         }}
                         icon={<SearchOutlined />}
                       />
@@ -260,7 +262,7 @@ function FactCheck({ formats }) {
                         disabled={!(actions.includes('admin') || actions.includes('create'))}
                         type="primary"
                         icon={<PlusOutlined />}
-                        style={{ marginBottom: 16 }}
+                        style={{ margin: isMobileScreen ? '16px 0' : '0 0 16px 0' }}
                       >
                         Create
                       </Button>
diff --git a/studio/src/pages/media/index.js b/studio/src/pages/media/index.js
index 12724321..a7cd92dd 100644
--- a/studio/src/pages/media/index.js
+++ b/studio/src/pages/media/index.js
@@ -123,26 +123,28 @@ function Media({ permission }) {
                 </Col>
                 <Col>
                   {searchFieldExpand ? (
-                    <Row>
-                      <Form.Item name="q">
-                        <Input placeholder="Search media" />
-                      </Form.Item>
-                      <Form.Item>
-                        <Button htmlType="submit" icon={<SearchOutlined />}>
-                          Search
-                        </Button>
-                      </Form.Item>
+                    <Row gutter={8}>
+                      <Col>
+                        <Form.Item name="q">
+                          <Input placeholder="Search media" />
+                          {/**/}
+                        </Form.Item>
+                      </Col>
+                      <Col>
+                        <Form.Item>
+                          <Button htmlType="submit" icon={<SearchOutlined />}>
+                            Search
+                          </Button>
+                        </Form.Item>
+                      </Col>
                     </Row>
                   ) : (
                     <Tooltip title="search">
                       <Button
                         shape="circle"
                         type="text"
-                        onFocus={() => {
+                        onClick={() => {
                           setSearchFieldExpand(true);
-                          setTimeout(() => {
-                            form.getFieldsValue().q === undefined && setSearchFieldExpand(false);
-                          }, 10000);
                         }}
                         icon={<SearchOutlined />}
                       />
@@ -159,7 +161,7 @@ function Media({ permission }) {
                       <Button
                         disabled={!(actions.includes('admin') || actions.includes('create'))}
                         type="primary"
-                        style={{ marginBottom: '1rem' }}
+                        style={{ margin: isMobileScreen ? '16px 0' : '0 0 16px 0' }}
                       >
                         Upload
                       </Button>
diff --git a/studio/src/pages/pages/components/PageList.js b/studio/src/pages/pages/components/PageList.js
index 5d966dc9..af4a444e 100644
--- a/studio/src/pages/pages/components/PageList.js
+++ b/studio/src/pages/pages/components/PageList.js
@@ -145,7 +145,7 @@ function PageList({ actions, format, status, data, filters, setFilters, fetchPag
                 size="large"
                 icon={<ThreeDotIcon style={{ color: '#858585' }} />}
                 onClick={() => {
-                  alert('this do nothing');
+                  // alert('this do nothing');
                 }}
               />
               <Modal
diff --git a/studio/src/pages/pages/index.js b/studio/src/pages/pages/index.js
index 98f33e79..89d3a369 100644
--- a/studio/src/pages/pages/index.js
+++ b/studio/src/pages/pages/index.js
@@ -212,27 +212,28 @@ function Pages({ formats }) {
                 </Col>
                 <Col>
                   {searchFieldExpand ? (
-                    <Row>
-                      <Form.Item name="q">
-                        <Input placeholder="Search pages" />
-                        {/**/}
-                      </Form.Item>
-                      <Form.Item>
-                        <Button htmlType="submit" icon={<SearchOutlined />}>
-                          Search
-                        </Button>
-                      </Form.Item>
+                    <Row gutter={8}>
+                      <Col>
+                        <Form.Item name="q">
+                          <Input placeholder="Search pages" />
+                          {/**/}
+                        </Form.Item>
+                      </Col>
+                      <Col>
+                        <Form.Item>
+                          <Button htmlType="submit" icon={<SearchOutlined />}>
+                            Search
+                          </Button>
+                        </Form.Item>
+                      </Col>
                     </Row>
                   ) : (
                     <Tooltip title="search">
                       <Button
                         shape="circle"
                         type="text"
-                        onFocus={() => {
+                        onClick={() => {
                           setSearchFieldExpand(true);
-                          setTimeout(() => {
-                            form.getFieldsValue().q === undefined && setSearchFieldExpand(false);
-                          }, 10000);
                         }}
                         icon={<SearchOutlined />}
                       />
@@ -251,7 +252,7 @@ function Pages({ formats }) {
                         disabled={!(actions.includes('admin') || actions.includes('create'))}
                         type="primary"
                         icon={<PlusOutlined />}
-                        style={{ marginBottom: 16 }}
+                        style={{ margin: isMobileScreen ? '16px 0' : '0 0 16px 0' }}
                       >
                         Create
                       </Button>
diff --git a/studio/src/pages/podcasts/index.js b/studio/src/pages/podcasts/index.js
index 33588a3f..3e441661 100644
--- a/studio/src/pages/podcasts/index.js
+++ b/studio/src/pages/podcasts/index.js
@@ -163,15 +163,20 @@ function Podcasts({ permission }) {
                 </Col>
                 <Col>
                   {searchFieldExpand ? (
-                    <Row>
-                      <Form.Item name="q">
-                        <Input placeholder="Search podcasts" />
-                      </Form.Item>
-                      <Form.Item>
-                        <Button htmlType="submit" icon={<SearchOutlined />}>
-                          Search
-                        </Button>
-                      </Form.Item>
+                    <Row gutter={8}>
+                      <Col>
+                        <Form.Item name="q">
+                          <Input placeholder="Search podcasts" />
+                          {/**/}
+                        </Form.Item>
+                      </Col>
+                      <Col>
+                        <Form.Item>
+                          <Button htmlType="submit" icon={<SearchOutlined />}>
+                            Search
+                          </Button>
+                        </Form.Item>
+                      </Col>
                     </Row>
                   ) : (
                     <Tooltip title="search">
@@ -179,11 +184,8 @@ function Podcasts({ permission }) {
                         shape="circle"
                         // style={{ border: 'none' }}
                         type="text"
-                        onFocus={() => {
+                        onClick={() => {
                           setSearchFieldExpand(true);
-                          setTimeout(() => {
-                            form.getFieldsValue().q === undefined && setSearchFieldExpand(false);
-                          }, 10000);
                         }}
                         icon={<SearchOutlined />}
                       />
@@ -201,7 +203,7 @@ function Podcasts({ permission }) {
                         disabled={!(actions.includes('admin') || actions.includes('create'))}
                         type="primary"
                         icon={<PlusOutlined />}
-                        style={{ marginBottom: 16 }}
+                        style={{ margin: isMobileScreen ? '16px 0' : '0 0 16px 0' }}
                       >
                         Create
                       </Button>
diff --git a/studio/src/pages/posts/components/PostForm.js b/studio/src/pages/posts/components/PostForm.js
index 47771844..06aa93e2 100644
--- a/studio/src/pages/posts/components/PostForm.js
+++ b/studio/src/pages/posts/components/PostForm.js
@@ -588,7 +588,7 @@ function PostForm({ onCreate, data = {}, actions = {}, format, page = false }) {
                 </Form>
               </Drawer>
               <Drawer
-                title={<h4 style={{ fontWeight: 'bold' }}>Code Injection</h4>}
+                title={<h4 style={{ fontWeight: 'bold',paddingTop: '0.4rem' }}>Code Injection</h4>}
                 placement="right"
                 closable={true}
                 onClose={onClose}
@@ -614,7 +614,7 @@ function PostForm({ onCreate, data = {}, actions = {}, format, page = false }) {
                 </Form>
               </Drawer>
               <Drawer
-                title={<h4 style={{ fontWeight: 'bold' }}>Meta Fields</h4>}
+                title={<h4 style={{ fontWeight: 'bold', paddingTop: '0.4rem' }}>Meta Fields</h4>}
                 placement="right"
                 closable={true}
                 onClose={onClose}
@@ -641,12 +641,12 @@ function PostForm({ onCreate, data = {}, actions = {}, format, page = false }) {
                 </Form>
               </Drawer>
               <Drawer
-                title={<h4 style={{ fontWeight: 'bold' }}>Seo Data</h4>}
+                title={<h4 style={{ fontWeight: 'bold', paddingTop: '0.4rem' }}>Seo Data</h4>}
                 placement="right"
                 style={{ width: '100%' }}
                 closable={true}
                 onClose={() => setSeoDrawerVisible(false)}
-                visible={seoDrawer}
+                open={seoDrawer}
                 //    getContainer={()=>{console.log(formRef.current);if(formRef.current)return formRef.current;return false;}}
                 width={isMobileScreen ? '80vw' : 480}
                 bodyStyle={{ paddingBottom: 40 }}
diff --git a/studio/src/pages/posts/index.js b/studio/src/pages/posts/index.js
index c9332539..8b15423d 100644
--- a/studio/src/pages/posts/index.js
+++ b/studio/src/pages/posts/index.js
@@ -227,15 +227,20 @@ function Posts({ formats }) {
                 </Col>
                 <Col>
                   {searchFieldExpand ? (
-                    <Row>
-                      <Form.Item name="q">
-                        <Input placeholder="Search pages" />
-                      </Form.Item>
-                      <Form.Item>
-                        <Button htmlType="submit" icon={<SearchOutlined />}>
-                          Search
-                        </Button>
-                      </Form.Item>
+                    <Row gutter={8}>
+                      <Col>
+                        <Form.Item name="q">
+                          <Input placeholder="Search posts" />
+                          {/**/}
+                        </Form.Item>
+                      </Col>
+                      <Col>
+                        <Form.Item>
+                          <Button htmlType="submit" icon={<SearchOutlined />}>
+                            Search
+                          </Button>
+                        </Form.Item>
+                      </Col>
                     </Row>
                   ) : (
                     <Tooltip title="search">
@@ -243,11 +248,8 @@ function Posts({ formats }) {
                         shape="circle"
                         // style={{ border: 'none' }}
                         type="text"
-                        onFocus={() => {
+                        onClick={() => {
                           setSearchFieldExpand(true);
-                          setTimeout(() => {
-                            form.getFieldsValue().q === undefined && setSearchFieldExpand(false);
-                          }, 10000);
                         }}
                         icon={<SearchOutlined />}
                       />
@@ -265,7 +267,7 @@ function Posts({ formats }) {
                         disabled={!(actions.includes('admin') || actions.includes('create'))}
                         type="primary"
                         icon={<PlusOutlined />}
-                        style={{ marginBottom: 16 }}
+                        style={{ margin: isMobileScreen ? '16px 0' : '0 0 16px 0' }}
                       >
                         Create
                       </Button>
diff --git a/studio/src/pages/profile/index.js b/studio/src/pages/profile/index.js
index 4c8c3fd5..ab5a4e89 100644
--- a/studio/src/pages/profile/index.js
+++ b/studio/src/pages/profile/index.js
@@ -8,20 +8,6 @@ import { getUserProfile, updateProfile } from '../../actions/profile';
 import { SlugInput } from '../../components/FormItems';
 import { Helmet } from 'react-helmet';
 
-const layout = {
-  labelCol: {
-    span: 7,
-  },
-  wrapperCol: {
-    span: 16,
-  },
-};
-const tailLayout = {
-  wrapperCol: {
-    offset: 3,
-    span: 17,
-  },
-};
 function Profile() {
   const [form] = Form.useForm();
   const dispatch = useDispatch();
@@ -54,10 +40,11 @@ function Profile() {
   return (
     <div className="content">
       <Helmet title={'Profile'} />
-      <Card title="Update Profile" loading={loading}>
+      <div>
         <Form
           form={form}
           name="update_profile"
+          layout="vertical"
           style={{ paddng: '34px 25px', background: '#F9FAFB' }}
           onFinish={update}
           initialValues={{
@@ -74,11 +61,6 @@ function Profile() {
             </Button>
           </Row>
           <Row gutter={56}>
-            <Col md={6} xs={24}>
-              <Form.Item name="featured_medium_id">
-                <MediaSelector profile={true} />
-              </Form.Item>
-            </Col>
             <Col md={10} xs={24}>
               <Form.Item
                 label="First Name"
@@ -112,6 +94,9 @@ function Profile() {
                   <Radio.Button value="other">Other</Radio.Button>
                 </Radio.Group>
               </Form.Item>
+              <Form.Item label="Description" name="description">
+                <Input.TextArea placeholder="Description" autoSize={{ minRows: 2, maxRows: 6 }} />
+              </Form.Item>
               <Form.Item label="Facebook Url" name={['social_media_urls', 'facebook']}>
                 <Input placeholder="Facebook url" />
               </Form.Item>
@@ -124,14 +109,15 @@ function Profile() {
               <Form.Item label="Instagram Url" name={['social_media_urls', 'instagram']}>
                 <Input placeholder="Instagram url" />
               </Form.Item>
-              <Form.Item label="Description" name="description">
-                <Input.TextArea placeholder="Description" autoSize={{ minRows: 2, maxRows: 6 }} />
+            </Col>
+            <Col md={6} xs={24}>
+              <Form.Item name="featured_medium_id">
+                <MediaSelector profile={true} />
               </Form.Item>
             </Col>
-            ~
           </Row>
         </Form>
-      </Card>
+      </div>
     </div>
   );
 }
diff --git a/studio/src/pages/tags/index.js b/studio/src/pages/tags/index.js
index eadd2075..8bd5ce90 100644
--- a/studio/src/pages/tags/index.js
+++ b/studio/src/pages/tags/index.js
@@ -141,26 +141,28 @@ function Tags({ permission }) {
                 </Col>
                 <Col>
                   {searchFieldExpand ? (
-                    <Row>
-                      <Form.Item name="q">
-                        <Input placeholder="Search tags" />
-                      </Form.Item>
-                      <Form.Item>
-                        <Button htmlType="submit" icon={<SearchOutlined />}>
-                          Search
-                        </Button>
-                      </Form.Item>
+                    <Row gutter={8}>
+                      <Col>
+                        <Form.Item name="q">
+                          <Input placeholder="Search tags" />
+                          {/**/}
+                        </Form.Item>
+                      </Col>
+                      <Col>
+                        <Form.Item>
+                          <Button htmlType="submit" icon={<SearchOutlined />}>
+                            Search
+                          </Button>
+                        </Form.Item>
+                      </Col>
                     </Row>
                   ) : (
                     <Tooltip title="search">
                       <Button
                         shape="circle"
                         type="text"
-                        onFocus={() => {
+                        onClick={() => {
                           setSearchFieldExpand(true);
-                          setTimeout(() => {
-                            form.getFieldsValue().q === undefined && setSearchFieldExpand(false);
-                          }, 10000);
                         }}
                         icon={<SearchOutlined />}
                       />