diff --git a/mock-api.json b/mock-api.json
index 84f7797df..39e44e794 100644
--- a/mock-api.json
+++ b/mock-api.json
@@ -84,7 +84,7 @@
       "userName": "Discord User 1",
       "token": "DISCORD_EXAMPLE_TOKEN_1",
       "valid": true,
-      "avatar": "https://example.com/image1.jpg"
+      "avatar": "https://cdn0.iconfinder.com/data/icons/free-social-media-set/24/discord-256.png"
     },
     {
       "id": "14",
@@ -92,7 +92,7 @@
       "userName": "Twitter User 14",
       "token": "TWITTER_EXAMPLE_TOKEN_14",
       "valid": true,
-      "avatar": "https://example.com/image2.jpg"
+      "avatar": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-256.png"
     },
     {
       "id": "2",
@@ -100,7 +100,7 @@
       "userName": "Discord User 2",
       "token": "DISCORD_EXAMPLE_TOKEN_2",
       "valid": false,
-      "avatar": "https://example.com/image3.jpg"
+      "avatar": "https://cdn0.iconfinder.com/data/icons/free-social-media-set/24/discord-256.png"
     },
     {
       "id": "3",
@@ -108,7 +108,7 @@
       "userName": "Discord User 3",
       "token": "DISCORD_EXAMPLE_TOKEN_3",
       "valid": true,
-      "avatar": "https://example.com/image4.jpg"
+      "avatar": "https://cdn0.iconfinder.com/data/icons/free-social-media-set/24/discord-256.png"
     },
     {
       "id": "4",
@@ -116,7 +116,7 @@
       "userName": "Twitter User 4",
       "token": "TWITTER_EXAMPLE_TOKEN_4",
       "valid": false,
-      "avatar": "https://example.com/image2.jpg"
+      "avatar": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-256.png"
     },
     {
       "id": "5",
@@ -124,7 +124,7 @@
       "userName": "Discord User 5",
       "token": "DISCORD_EXAMPLE_TOKEN_5",
       "valid": false,
-      "avatar": "https://example.com/image6.jpg"
+      "avatar": "https://cdn0.iconfinder.com/data/icons/free-social-media-set/24/discord-256.png"
     },
     {
       "id": "6",
@@ -132,7 +132,7 @@
       "userName": "Twitter User 6",
       "token": "TWITTER_EXAMPLE_TOKEN_6",
       "valid": true,
-      "avatar": "https://example.com/image2.jpg"
+      "avatar": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-256.png"
     }
   ],
   "social-medias": [
diff --git a/src/components/AccordionTab/AccordionTab.module.scss b/src/components/AccordionTab/AccordionTab.module.scss
index d1804fc21..1622ddd93 100644
--- a/src/components/AccordionTab/AccordionTab.module.scss
+++ b/src/components/AccordionTab/AccordionTab.module.scss
@@ -7,6 +7,8 @@
 
 .headerTitle {
   flex-grow: 1;
+
+  margin: 0;
 }
 
 .headerIcon {
@@ -55,7 +57,7 @@
     font-size: 1.6rem;
     line-height: 1;
 
-    padding: 1.3rem 2.2rem;
+    padding: 2.2rem;
 
     position: relative;
 
diff --git a/src/components/AccountCard/AccountCard.module.scss b/src/components/AccountCard/AccountCard.module.scss
index f7b8760fd..463c6c534 100644
--- a/src/components/AccountCard/AccountCard.module.scss
+++ b/src/components/AccountCard/AccountCard.module.scss
@@ -1,5 +1,9 @@
 @use '~styles/global.scss' as *;
 
+.username {
+  margin: 0;
+}
+
 .container {
   display: flex;
   flex-flow: row nowrap;
@@ -9,7 +13,7 @@
   align-items: center;
   justify-content: space-between;
 
-  padding: 0.8rem 0.8rem 0.8rem 1.6rem;
+  padding: 0.8rem;
 
   border-bottom: 0.1rem solid $primaryGray;
 
@@ -22,9 +26,8 @@
 
 .username {
   width: 100%;
-  overflow: hidden;
 
-  display: flex;
+  overflow: hidden;
 
   font-size: 1.4rem;
   text-overflow: ellipsis;
@@ -40,13 +43,23 @@
   font-size: 1.4rem;
 }
 
+.containerButton {
+  display: flex;
+  gap: 0.9rem;
+}
+
 .avatar {
   width: 40px;
   height: 40px;
 
+  display: flex;
+
   flex-shrink: 0;
 
   align-items: center;
 
   justify-content: center;
+
+  background-color: $primaryPurple;
+  border-radius: 50%;
 }
diff --git a/src/components/AccountCard/AccountCard.tsx b/src/components/AccountCard/AccountCard.tsx
index 86e1c956d..416aa6bdf 100644
--- a/src/components/AccountCard/AccountCard.tsx
+++ b/src/components/AccountCard/AccountCard.tsx
@@ -3,6 +3,8 @@ import { ReactNode, useState } from 'react';
 import classNames from 'classnames';
 
 import { Avatar } from '~components/Avatar/Avatar';
+import Button from '~components/Button/Button';
+import Icon from '~components/Icon/Icon';
 import { Switch } from '~components/Switch/Switch';
 
 import scss from './AccountCard.module.scss';
@@ -42,13 +44,19 @@ export function AccountCard({
     <div className={accountCardClassNames} {...props}>
       <Avatar className={scss.avatar} image={avatarURL} username={username} />
       <p className={scss.username}>{username}</p>
-      <button className={scss.star} onClick={handleFavoriteChange} />
-      <Switch
-        checked={enabled}
-        invalid={invalid}
-        onChange={handleEnableChange}
-        variant={hasError ? 'error' : 'default'}
-      />
+      <div className={scss.containerButton}>
+        <Button
+          circle
+          icon={<Icon icon="star" size={20} />}
+          onClick={handleFavoriteChange}
+        />
+        <Switch
+          checked={enabled}
+          invalid={invalid}
+          onChange={handleEnableChange}
+          variant={hasError ? 'error' : 'default'}
+        />
+      </div>
     </div>
   );
 }
diff --git a/src/pages/home/components/Sidebar/Sidebar.module.scss b/src/pages/home/components/Sidebar/Sidebar.module.scss
index 4195d11b7..959f52e91 100644
--- a/src/pages/home/components/Sidebar/Sidebar.module.scss
+++ b/src/pages/home/components/Sidebar/Sidebar.module.scss
@@ -65,8 +65,11 @@
 }
 
 .content {
+  width: 100%;
   height: 100%;
 
+  overflow: auto;
+
   flex-direction: column;
 }
 
diff --git a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.module.scss b/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.module.scss
index 68609a6f8..bf462050f 100644
--- a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.module.scss
+++ b/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.module.scss
@@ -9,13 +9,17 @@
   }
 }
 
+.containerAccordion {
+  width: 100%;
+}
+
 .header {
   display: flex;
 
   align-items: center;
   justify-content: space-between;
 
-  padding: 1.5rem 0.6rem;
+  padding: 1.6rem;
 
   border: 1px solid $primaryGray;
 
@@ -33,7 +37,7 @@
 
   display: flex;
 
-  gap: 1rem;
+  gap: 1.6rem;
 
   align-items: center;
 }
diff --git a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx b/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx
index 9378bd643..0dfee50e6 100644
--- a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx
+++ b/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx
@@ -10,7 +10,10 @@ import Icon from '~components/Icon/Icon';
 
 import scss from './SocialAccordion.module.scss';
 
-import iconPlaceholderForIcon from './assets/facebook.svg';
+import discordIcon from './assets/discord.svg';
+import facebookIcon from './assets/facebook.svg';
+import instagramIcon from './assets/instagram.svg';
+import xIcon from './assets/x.svg';
 
 import { AccountQuantity } from './SocialAccordion.components';
 import { SocialAccordionProps } from './SocialAccordion.type';
@@ -45,11 +48,26 @@ function SocialAccordion(props: SocialAccordionProps): ReactNode {
     ));
 
   const renderAccordionContent = (): ReactNode => (
-    <ul role="listitem">{renderAccordionMap()}</ul>
+    <ul className={scss.containerAccordion} role="listitem">
+      {renderAccordionMap()}
+    </ul>
   );
 
   const hasInvalidAccount = props.accounts.some(({ valid }) => !valid);
 
+  const iconMap = {
+    discord: discordIcon,
+    facebook: facebookIcon,
+    instagram: instagramIcon,
+    twitter: xIcon,
+    x: xIcon,
+  };
+
+  const socialMediaName = socialMedias
+    .get(props.socialMediaId)
+    ?.name.toLowerCase();
+  const iconPath = iconMap[socialMediaName as keyof typeof iconMap];
+
   return (
     <Accordion
       className={scss.wrapper}
@@ -64,11 +82,7 @@ function SocialAccordion(props: SocialAccordionProps): ReactNode {
         >
           <div className={scss.header}>
             <div className={scss.socialInfo}>
-              <img
-                alt="social media"
-                className={scss.icon}
-                src={iconPlaceholderForIcon}
-              />
+              <img alt="social media" className={scss.icon} src={iconPath} />
               <span>{socialMedias.get(props.socialMediaId)?.name}</span>
             </div>
             {props.error && renderError()}
@@ -85,7 +99,7 @@ function SocialAccordion(props: SocialAccordionProps): ReactNode {
                 }
                 className={isOpen ? scss.rotateIconUp : scss.rotateIconDown}
                 icon={isOpen ? 'triangle-drop-arrow' : 'triangle-left-arrow'}
-                size={16}
+                size={10}
               />
             </div>
           </div>
diff --git a/src/pages/home/components/Sidebar/components/SocialAccordion/assets/discord.svg b/src/pages/home/components/Sidebar/components/SocialAccordion/assets/discord.svg
new file mode 100644
index 000000000..4b7477340
--- /dev/null
+++ b/src/pages/home/components/Sidebar/components/SocialAccordion/assets/discord.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><g id="图层_2" data-name="图层 2"><g id="Discord_Logos" data-name="Discord Logos"><g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White"><path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></g></g></g></svg>
\ No newline at end of file