diff --git a/src/components/Elements/MainModal/scss/marketplace/_main.scss b/src/components/Elements/MainModal/scss/marketplace/_main.scss
index b14d33e9..471c69cc 100644
--- a/src/components/Elements/MainModal/scss/marketplace/_main.scss
+++ b/src/components/Elements/MainModal/scss/marketplace/_main.scss
@@ -69,6 +69,7 @@
       display: flex;
       flex-flow: column;
       gap: 5px;
+      align-items: center;
 
       .card-title {
         font-size: 18px;
@@ -92,7 +93,7 @@
         }
 
         border-radius: 150px;
-        padding: 2px 8px;
+        padding: 2px 15px;
         background-color: rgb(255 255 255 / 10%);
         border: 1px solid rgb(209 213 219 / 30%);
       }
@@ -126,7 +127,7 @@
       table-layout: fixed;
       width: 100%;
       max-width: 650px !important;
-      word-wrap: break-word !important;
+      word-wrap: break-word !important;    
     }
   }
 
@@ -136,7 +137,7 @@
     background-size: cover;
     border-radius: 15px;
     width: 30%;
-    max-width: 300px;
+    max-width: 250px;
     max-height: 600px;
 
     .front {
@@ -450,7 +451,9 @@ p.author {
 
   .title:hover {
     cursor: pointer;
+    text-decoration: underline;
   }
+
 }
 
 .createYourOwn {
diff --git a/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss b/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss
index 57f38a79..df18c231 100644
--- a/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss
+++ b/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss
@@ -33,11 +33,10 @@ p.description {
     svg {
       @include themed {
         background-image: t($slightGradient);
+        box-shadow: t($boxShadow);
       }
 
-      background-clip: text;
-      -webkit-text-fill-color: transparent;
-      font-size: 20px;
+      padding: 7px;
       border-radius: 100%;
     }
 
diff --git a/src/components/Elements/ShareModal/ShareModal.jsx b/src/components/Elements/ShareModal/ShareModal.jsx
index 61e68355..fa0b294f 100644
--- a/src/components/Elements/ShareModal/ShareModal.jsx
+++ b/src/components/Elements/ShareModal/ShareModal.jsx
@@ -7,6 +7,8 @@ import { SiTencentqq } from 'react-icons/si';
 import Tooltip from '../Tooltip/Tooltip';
 import { toast } from 'react-toastify';
 
+import { Button } from 'components/Elements';
+
 import './sharemodal.scss';
 
 function ShareModal({ modalClose, data }) {
@@ -43,81 +45,77 @@ function ShareModal({ modalClose, data }) {
         </Tooltip>
       </div>
       <div className="shareButtons">
-        <Tooltip title="Twitter">
-          <button
-            onClick={() =>
-              window
-                .open(
-                  `https://twitter.com/intent/tweet?text=Check out ${data.name} on @getmue: ${data.url}`,
-                  '_blank',
-                )
-                .focus()
-            }
-          >
-            <FaTwitter />
-          </button>
-        </Tooltip>
-        <Tooltip title="Facebook">
-          <button
-            onClick={() =>
-              window
-                .open(`https://www.facebook.com/sharer/sharer.php?u=${data.url}`, '_blank')
-                .focus()
-            }
-          >
-            <FaFacebookF />
-          </button>
-        </Tooltip>
-        <Tooltip title="Email">
-          <button
-            onClick={() =>
-              window
-                .open(
-                  'mailto:email@example.com?subject=Check%20out%20this%20%on%20%Mue!&body=' +
-                    data.data.name +
-                    'on Mue: ' +
-                    data,
-                  '_blank',
-                )
-                .focus()
-            }
-          >
-            <MdEmail />
-          </button>
-        </Tooltip>
-        <Tooltip title="WeChat">
-          <button
-            onClick={() =>
-              window
-                .open(
-                  `https://api.qrserver.com/v1/create-qr-code/?size=154x154&data=${data.url}`,
-                  '_blank',
-                )
-                .focus()
-            }
-          >
-            <AiFillWechat />
-          </button>
-        </Tooltip>
-        <Tooltip title="Tencent QQ">
-          <button
-            onClick={() =>
-              window
-                .open(`https://connect.qq.com/widget/shareqq/index.html?url=${data.url}`, '_blank')
-                .focus()
-            }
-          >
-            <SiTencentqq />
-          </button>
-        </Tooltip>
+        <Button
+          onClick={() =>
+            window
+              .open(
+                `https://twitter.com/intent/tweet?text=Check out ${data.name} on @getmue: ${data.url}`,
+                '_blank',
+              )
+              .focus()
+          }
+          icon={<FaTwitter />}
+          tooltipTitle="Twitter"
+          type="icon"
+        />
+        <Button
+          onClick={() =>
+            window
+              .open(`https://www.facebook.com/sharer/sharer.php?u=${data.url}`, '_blank')
+              .focus()
+          }
+          icon={<FaFacebookF />}
+          tooltipTitle="Twitter"
+          type="icon"
+        />
+        <Button
+          onClick={() =>
+            window
+              .open(
+                'mailto:email@example.com?subject=Check%20out%20this%20%on%20%Mue!&body=' +
+                  data.data.name +
+                  'on Mue: ' +
+                  data,
+                '_blank',
+              )
+              .focus()
+          }
+          icon={<MdEmail />}
+          tooltipTitle="Email"
+          type="icon"
+        />
+        <Button
+          onClick={() =>
+            window
+              .open(
+                `https://api.qrserver.com/v1/create-qr-code/?size=154x154&data=${data.url}`,
+                '_blank',
+              )
+              .focus()
+          }
+          icon={<AiFillWechat />}
+          tooltipTitle="WeChat"
+          type="icon"
+        />
+        <Button
+          onClick={() =>
+            window
+              .open(`https://connect.qq.com/widget/shareqq/index.html?url=${data.url}`, '_blank')
+              .focus()
+          }
+          icon={<SiTencentqq />}
+          tooltipTitle="Tencent QQ"
+          type="icon"
+        />
       </div>
       <div className="copy">
         <input type="text" value={data.url} className="left field" readOnly />
-        <Tooltip title={variables.getMessage('modals.share.copy_link')} placement="top">
-          <button onClick={() => copyLink()}>
-            <MdContentCopy />
-          </button>
-        </Tooltip>
+        <Button
+          onClick={() => copyLink()}
+          icon={<MdContentCopy />}
+          tooltipTitle={variables.getMessage('modals.share.copy_link')}
+          type="icon"
+        />
       </div>
     </div>
   );
diff --git a/src/components/Elements/ShareModal/sharemodal.scss b/src/components/Elements/ShareModal/sharemodal.scss
index 09b477c3..6815cef3 100644
--- a/src/components/Elements/ShareModal/sharemodal.scss
+++ b/src/components/Elements/ShareModal/sharemodal.scss
@@ -38,6 +38,9 @@
     justify-content: space-between;
     display: flex;
     gap: 15px;
+    button {
+      width: 40px;
+    }
   }
 
   .copy {
@@ -45,6 +48,10 @@
     flex-flow: row;
     gap: 15px;
 
+    button {
+      width: 40px;
+    }
+
     input[type='text'] {
       @include themed {
         background: t($modal-sidebar);
diff --git a/src/features/marketplace/components/Items/Item.jsx b/src/features/marketplace/components/Items/Item.jsx
index 9089622e..978e2848 100644
--- a/src/features/marketplace/components/Items/Item.jsx
+++ b/src/features/marketplace/components/Items/Item.jsx
@@ -158,17 +158,9 @@ class Item extends PureComponent {
                 </table>
                 <div className="showMoreItems">
                   <span className="link" onClick={() => this.incrementCount('quotes')}>
-                    {this.state.count !== this.props.data.data.quotes.length ? (
-                      <>
-                        <MdExpandMore />{' '}
-                        {variables.getMessage('modals.main.marketplace.product.show_all')}
-                      </>
-                    ) : (
-                      <>
-                        <MdExpandLess />{' '}
-                        {variables.getMessage('modals.main.marketplace.product.show_less')}
-                      </>
-                    )}
+                    {this.state.count !== this.props.data.data.quotes.length
+                      ? variables.getMessage('modals.main.marketplace.product.show_all')
+                      : variables.getMessage('modals.main.marketplace.product.show_less')}
                   </span>
                 </div>
               </>
@@ -193,17 +185,9 @@ class Item extends PureComponent {
                 </table>
                 <div className="showMoreItems">
                   <span className="link" onClick={() => this.incrementCount('settings')}>
-                    {this.state.count !== this.props.data.data.settings.length ? (
-                      <>
-                        <MdExpandMore />{' '}
-                        {variables.getMessage('modals.main.marketplace.product.show_all')}
-                      </>
-                    ) : (
-                      <>
-                        <MdExpandLess />{' '}
-                        {variables.getMessage('modals.main.marketplace.product.show_less')}
-                      </>
-                    )}
+                    {this.state.count !== this.props.data.data.settings.length
+                      ? variables.getMessage('modals.main.marketplace.product.show_all')
+                      : variables.getMessage('modals.main.marketplace.product.show_less')}
                   </span>
                 </div>
               </>
@@ -248,10 +232,10 @@ class Item extends PureComponent {
                 )}
               {this.props.data.data.quotes && this.props.data.data.language !== ''
                 ? moreInfoItem(
-                  <MdTranslate />,
-                  variables.getMessage('modals.main.settings.sections.language.title'),
-                  this.props.data.data.language,
-                )
+                    <MdTranslate />,
+                    variables.getMessage('modals.main.settings.sections.language.title'),
+                    this.props.data.data.language,
+                  )
                 : null}
               {moreInfoItem(
                 <MdStyle />,
@@ -289,7 +273,7 @@ class Item extends PureComponent {
                   onClick={() =>
                     window.open(
                       variables.constants.REPORT_ITEM +
-                      this.props.data.data.display_name.split(' ').join('+'),
+                        this.props.data.data.display_name.split(' ').join('+'),
                       '_blank',
                     )
                   }
@@ -306,7 +290,9 @@ class Item extends PureComponent {
                     <span className="subtitle">
                       {variables.getMessage('modals.main.marketplace.product.part_of')}
                     </span>
-                    <span className="title" onClick={this.props.toggleFunction}>{this.props.data.data.in_collections[0].display_name}</span>
+                    <span className="title" onClick={this.props.toggleFunction}>
+                      {this.props.data.data.in_collections[0].display_name}
+                    </span>
                   </div>
                 </div>
               )}
diff --git a/src/features/marketplace/components/Items/Items.jsx b/src/features/marketplace/components/Items/Items.jsx
index 79f45740..d752c9ab 100644
--- a/src/features/marketplace/components/Items/Items.jsx
+++ b/src/features/marketplace/components/Items/Items.jsx
@@ -4,6 +4,35 @@ import { MdAutoFixHigh, MdOutlineArrowForward, MdOutlineOpenInNew } from 'react-
 
 import { Button } from 'components/Elements';
 
+function filterItems(item, filter) {
+  const lowerCaseFilter = filter.toLowerCase();
+  return (
+    item.name?.toLowerCase().includes(lowerCaseFilter) ||
+    filter === '' ||
+    item.author?.toLowerCase().includes(lowerCaseFilter) ||
+    item.type?.toLowerCase().includes(lowerCaseFilter)
+  );
+}
+function Item({ item, toggleFunction, type, onCollection }) {
+  return (
+    <div className="item" onClick={() => toggleFunction(item)} key={item.name}>
+      <img className="item-back" alt="" draggable={false} src={item.icon_url} aria-hidden="true" />
+      <img className="item-icon" alt="icon" draggable={false} src={item.icon_url} />
+      <div className="card-details">
+        <span className="card-title">{item.display_name || item.name}</span>
+        <span className="card-subtitle">
+          {variables.getMessage('modals.main.marketplace.by', { author: item.author })}
+        </span>
+        {type === 'all' && !onCollection ? (
+          <span className="card-type">
+            {variables.getMessage('modals.main.marketplace.' + item.type)}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
 function Items({
   type,
   items,
@@ -13,30 +42,32 @@ function Items({
   onCollection,
   filter,
 }) {
+  const shouldShowCollection =
+    (!onCollection && (filter === null || filter === '')) ||
+    (type === 'collections' && !onCollection && (filter === null || filter === ''));
+
   return (
     <>
-      {(!onCollection &&
-        (filter === null || filter === '')) ||
-      (type === 'collections' && !onCollection && (filter === null || filter === '')) ? (
+      {shouldShowCollection && (
         <>
           <div
             className="collection"
             style={
-              collection.news
-                ? { backgroundColor: collection.background_colour }
+              collection?.news
+                ? { backgroundColor: collection?.background_colour }
                 : {
-                    backgroundImage: `linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7), transparent, rgba(0, 0, 0, 0.7), rgba(0 ,0, 0, 0.9)), url('${collection.img}')`,
+                    backgroundImage: `linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7), transparent, rgba(0, 0, 0, 0.7), rgba(0 ,0, 0, 0.9)), url('${collection?.img}')`,
                   }
             }
           >
             <div className="content">
-              <span className="title">{collection.display_name}</span>
-              <span className="subtitle">{collection.description}</span>
+              <span className="title">{collection?.display_name}</span>
+              <span className="subtitle">{collection?.description}</span>
             </div>
-            {collection.news === true ? (
+            {collection?.news === true ? (
               <a
                 className="btn-collection"
-                href={collection.news_link}
+                href={collection?.news_link}
                 target="_blank"
                 rel="noopener noreferrer"
               >
@@ -45,7 +76,7 @@ function Items({
             ) : (
               <Button
                 type="collection"
-                onClick={() => collectionFunction(collection.name)}
+                onClick={() => collectionFunction(collection?.name)}
                 icon={<MdOutlineArrowForward />}
                 label={variables.getMessage('modals.main.marketplace.explore_collection')}
                 iconPlacement={'right'}
@@ -53,38 +84,17 @@ function Items({
             )}
           </div>
         </>
-      ) : null}
+      )}
       <div className="items">
         {items
-          ?.filter(
-            (item) =>
-              item.name?.toLowerCase().includes(filter.toLowerCase()) ||
-              filter === '' ||
-              item.author?.toLowerCase().includes(filter.toLowerCase()) ||
-              item.type?.toLowerCase().includes(filter.toLowerCase()),
-          )
+          ?.filter((item) => filterItems(item, filter))
           .map((item) => (
-            <div className="item" onClick={() => toggleFunction(item)} key={item.name}>
-              <img
-                className="item-back"
-                alt=""
-                draggable={false}
-                src={item.icon_url}
-                aria-hidden="true"
-              />
-              <img className="item-icon" alt="icon" draggable={false} src={item.icon_url} />
-              <div className="card-details">
-                <span className="card-title">{item.display_name || item.name}</span>
-                <span className="card-subtitle">
-                  {variables.getMessage('modals.main.marketplace.by', { author: item.author })}
-                </span>
-                {type === 'all' && !onCollection ? (
-                  <span className="card-type">
-                    {variables.getMessage('modals.main.marketplace.' + item.type)}
-                  </span>
-                ) : null}
-              </div>
-            </div>
+            <Item
+              item={item}
+              toggleFunction={toggleFunction}
+              type={type}
+              onCollection={onCollection}
+            />
           ))}
       </div>
       <div className="loader"></div>