diff --git a/gui/pages/Content/Agents/Agents.js b/gui/pages/Content/Agents/Agents.js
index 1451acbda..10f0be031 100644
--- a/gui/pages/Content/Agents/Agents.js
+++ b/gui/pages/Content/Agents/Agents.js
@@ -1,17 +1,14 @@
 import React from 'react';
 import Image from "next/image";
-import styles from './Agents.module.css';
 import 'react-toastify/dist/ReactToastify.css';
 import {createInternalId} from "@/utils/utils";
 
 export default function Agents({sendAgentData, agents}) {
   return (<>
-      <div className={styles.container}>
-        <div className={styles.title_box}>
-          <p className={styles.title_text}>Agents</p>
-        </div>
-        <div className={styles.wrapper} style={{marginBottom: '10px', marginTop: '4px'}}>
-          <button style={{width: '100%'}} className="secondary_button" onClick={() => sendAgentData({
+      <div className="container">
+        <p className="text_14 mt_8 mb_12 ml_8">Agents</p>
+        <div className="w_100 mb_10">
+          <button className="secondary_button w_100" onClick={() => sendAgentData({
             id: -1,
             name: "new agent",
             contentType: "Create_Agent",
@@ -21,27 +18,17 @@ export default function Agents({sendAgentData, agents}) {
           </button>
         </div>
 
-        {agents && agents.length > 0 ? <div className={styles.wrapper} style={{overflowY: 'scroll', height: '80vh'}}>
+        {agents && agents.length > 0 ? <div className="vertical_selection_scroll w_100">
           {agents.map((agent, index) => (
             <div key={index}>
-              <div className={styles.agent_box} onClick={() => sendAgentData(agent)}>
-                {agent?.is_running &&
-                  <div className={styles.agent_active}><Image width={14} height={14} style={{mixBlendMode: 'exclusion'}}
-                                                              src="/images/loading.gif" alt="active-icon"/></div>}
-                <div style={{display: 'flex', height: '15px'}}>
-                  <div className={styles.text_block}><span className={styles.agent_text}>{agent.name}</span></div>
-                  {agent?.is_scheduled &&
-                    <div style={{marginLeft: '8px'}}><Image style={{paddingBottom: '12px'}} width={20} height={28}
-                                                            src="/images/event_repeat.svg" alt="check-icon"/></div>}
-                </div>
+              <div className="agent_box w_100" onClick={() => sendAgentData(agent)}>
+                {agent?.is_running && <Image width={14} height={14} className="mix_blend_mode" src="/images/loading.gif" alt="active-icon"/>}
+                <div className="text_ellipsis"><span className="agent_text text_ellipsis">{agent.name}</span></div>
+                {agent?.is_scheduled && <Image className="ml_4" width={17} height={17} src="/images/event_repeat.svg" alt="check-icon"/>}
               </div>
             </div>
           ))}
-        </div> : <div style={{
-          marginTop: '30px', display: 'flex', alignItems: 'center', justifyContent: 'center'
-        }} className="form_label">
-          No Agents found
-        </div>}
+        </div> : <div className="form_label mt_20 horizontal_container justify_center">No Agents found</div>}
       </div>
     </>
   );
diff --git a/gui/pages/Content/Agents/Agents.module.css b/gui/pages/Content/Agents/Agents.module.css
index 9ee9ba09c..c3296d5f1 100644
--- a/gui/pages/Content/Agents/Agents.module.css
+++ b/gui/pages/Content/Agents/Agents.module.css
@@ -26,23 +26,6 @@
     width: 100%;
 }
 
-.agent_box {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 10px 8px;
-    gap: 6px;
-    border-radius: 8px;
-    flex: none;
-    order: 0;
-    flex-grow: 0;
-    cursor: pointer;
-}
-
-.agent_box:hover {
-    background-color: #494856;
-}
-
 .agent_active {
     display: flex;
     flex-direction: row;
@@ -50,23 +33,6 @@
     padding: 0;
 }
 
-.agent_text {
-    font-style: normal;
-    font-weight: 400;
-    font-size: 13px;
-    line-height: 15px;
-    align-items: center;
-    color: white;
-    flex: none;
-    order: 1;
-    flex-grow: 0;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
 .text_block {
     display:flex;
     display: -webkit-box;
diff --git a/gui/pages/Content/Agents/ResourceList.js b/gui/pages/Content/Agents/ResourceList.js
index 45e65f8e9..0a1f232f4 100644
--- a/gui/pages/Content/Agents/ResourceList.js
+++ b/gui/pages/Content/Agents/ResourceList.js
@@ -34,17 +34,17 @@ export default function ResourceList({files, channel, runs}) {
   )
 
   return (
-    <div>
+    <div id="resource-list">
       {channel === 'output' && (!isAnyFileWithAgentId || files.length <= 0 ?
           <div className="vertical_container">
             <Image width={150} height={60} src="/images/no_permissions.svg" alt="no-permissions"/>
-            <span className={styles.feed_title} style={{marginTop: '8px'}}>No Output files!</span>
+            <span className="feed_title mt_8">No Output files!</span>
           </div>
           :
           <div id="division_by_runs">
             {filesByRun.map((filesRun, index) => (
               <div key={filesByRun.length - index - 1}>
-                <div className="horizontal_container justify_space_between cursor_pointer" style={{padding: '8px 6px'}}
+                <div className="horizontal_container justify_space_between cursor_pointer padding_8_6"
                      onClick={() => setSelectedRunId(filesRun.run.id === selectedRunId ? null : filesRun.run.id)}>
                   <div className="horizontal_container">
                     <Image
@@ -60,7 +60,7 @@ export default function ResourceList({files, channel, runs}) {
                 </div>
 
                 {selectedRunId === filesRun.run.id && (
-                  <div className={styles.resources} style={{padding: '2px 8px'}}>
+                  <div className="horizontal_space_between flex_wrap padding_2_8">
                     {filesRun.files.map((file, index) => <File key={index} file={file}/>)}
                   </div>
                 )}
@@ -70,7 +70,7 @@ export default function ResourceList({files, channel, runs}) {
       )}
 
       {channel === 'input' &&
-        <div className={styles.resources}>
+        <div className="horizontal_space_between flex_wrap">
           {files.map((file, index) => <File key={index} file={file}/>)}
         </div>}
     </div>
diff --git a/gui/pages/Content/Agents/ResourceManager.js b/gui/pages/Content/Agents/ResourceManager.js
index af60a61a7..397f3c74c 100644
--- a/gui/pages/Content/Agents/ResourceManager.js
+++ b/gui/pages/Content/Agents/ResourceManager.js
@@ -96,39 +96,20 @@ export default function ResourceManager({agentId, runs}) {
   }
 
   return (<>
-    <div className={styles.detail_top} style={{height: 'auto', marginBottom: '10px'}}>
-      <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%'}}>
-        <div style={{display: 'flex', order: 0}}>
-          <div>
-            <button onClick={() => setChannel('input')} className={styles.tab_button} style={channel === 'input' ? {
-              background: '#454254',
-              padding: '5px 10px'
-            } : {background: 'transparent', padding: '5px 10px'}}>
-              Input
-            </button>
-          </div>
-          <div>
-            <button onClick={() => setChannel('output')} className={styles.tab_button} style={channel === 'output' ? {
-              background: '#454254',
-              padding: '5px 10px'
-            } : {background: 'transparent', padding: '5px 10px'}}>
-              Output
-            </button>
-          </div>
-        </div>
-      </div>
+    <div className="detail_top mb_10">
+      <button onClick={() => setChannel('input')} className={channel === 'input' ? 'tab_button_selected' : 'tab_button'}>Input</button>
+      <button onClick={() => setChannel('output')} className={channel === 'output' ? 'tab_button_selected' : 'tab_button'}>Output</button>
     </div>
-    <div className={styles.detail_body} style={{height: 'auto'}}>
-      {channel === 'input' && <div style={{paddingBottom: '10px'}}>
+    <div className="w_100 mr_10 mb_20">
+      {channel === 'input' &&
         <div className={`file-drop-area ${isDragging ? 'dragging' : ''}`} onDragEnter={handleDragEnter}
              onDragLeave={handleDragLeave} onDragOver={handleDragOver} onDrop={handleDrop}
              onClick={handleDropAreaClick}>
-          <div><p style={{textAlign: 'center', color: 'white', fontSize: '14px'}}>+ Choose or drop a file here</p>
-            <p style={{textAlign: 'center', color: '#888888', fontSize: '12px'}}>Supported file formats are txt, pdf,
+            <p className="text_14 text_align_center">+ Choose or drop a file here</p>
+            <p className="text_12 text_align_center">Supported file formats are txt, pdf,
               docx, epub, csv, pptx only</p>
-            <input type="file" ref={fileInputRef} style={{display: 'none'}} onChange={handleFileInputChange}/></div>
-        </div>
-      </div>}
+            <input type="file" ref={fileInputRef} style={{display: 'none'}} onChange={handleFileInputChange}/>
+        </div>}
       <ResourceList files={channel === 'output' ? output : input} channel={channel} runs={runs}/>
     </div>
     <ToastContainer/>
diff --git a/gui/pages/Content/Knowledge/Knowledge.js b/gui/pages/Content/Knowledge/Knowledge.js
index ab7518694..7074488cd 100644
--- a/gui/pages/Content/Knowledge/Knowledge.js
+++ b/gui/pages/Content/Knowledge/Knowledge.js
@@ -7,12 +7,10 @@ import {createInternalId} from "@/utils/utils";
 export default function Knowledge({sendKnowledgeData, knowledge}) {
   return (
     <>
-      <div className={styles1.container}>
-        <div className={styles1.title_box}>
-          <p className={styles1.title_text}>Knowledges</p>
-        </div>
-        <div className={styles1.wrapper} style={{marginBottom: '10px', marginTop: '4px'}}>
-          <button style={{width: '100%'}} className="secondary_button" onClick={() => sendKnowledgeData({
+      <div className="container">
+        <p className="text_14 mt_8 mb_12 ml_8">Knowledges</p>
+        <div className="w_100 mb_10">
+          <button className="secondary_button w_100" onClick={() => sendKnowledgeData({
             id: -6,
             name: "new knowledge",
             contentType: "Add_Knowledge",
@@ -23,7 +21,7 @@ export default function Knowledge({sendKnowledgeData, knowledge}) {
         </div>
 
         {knowledge && knowledge.length > 0 ? (
-          <div style={{overflowY: 'scroll', height: '80vh'}}>
+          <div className="vertical_selection_scroll">
             <div className={styles.tool_container}>
               {knowledge.map((item, index) => (
                 <div key={index} className={styles.tool_box} onClick={() => sendKnowledgeData({
@@ -48,12 +46,7 @@ export default function Knowledge({sendKnowledgeData, knowledge}) {
               )}
             </div>
           </div>
-        ) : (
-          <div style={{
-            marginTop: '30px', display: 'flex', alignItems: 'center', justifyContent: 'center'
-          }} className="form_label">
-            No Knowledge found
-          </div>
+        ) : (<div className="form_label mt_20 horizontal_container justify_center">No Knowledge found</div>
         )}
       </div>
     </>
diff --git a/gui/pages/Content/Toolkits/Toolkits.js b/gui/pages/Content/Toolkits/Toolkits.js
index b087d5dec..0a0bfe337 100644
--- a/gui/pages/Content/Toolkits/Toolkits.js
+++ b/gui/pages/Content/Toolkits/Toolkits.js
@@ -1,18 +1,14 @@
 import React from 'react';
 import Image from "next/image";
-import styles from './Tool.module.css';
-import styles1 from '../Agents/Agents.module.css'
 import {createInternalId, returnToolkitIcon, excludedToolkits} from "@/utils/utils";
 
 export default function Toolkits({sendToolkitData, toolkits, env}) {
   return (
     <>
-      <div className={styles1.container}>
-        <div className={styles1.title_box}>
-          <p className={styles1.title_text}>Toolkits</p>
-        </div>
-        {env !== 'PROD' && <div className={styles1.wrapper} style={{marginBottom: '10px', marginTop: '4px'}}>
-          <button style={{width: '100%'}} className="secondary_button" onClick={() => sendToolkitData({
+      <div className="container">
+        <p className="text_14 mt_8 mb_12 ml_8">Toolkits</p>
+        {env !== 'PROD' && <div className="w_100 mb_10">
+          <button className="secondary_button w_100" onClick={() => sendToolkitData({
             id: -2,
             name: "new tool",
             contentType: "Add_Toolkit",
@@ -22,38 +18,29 @@ export default function Toolkits({sendToolkitData, toolkits, env}) {
           </button>
         </div>}
         {toolkits && toolkits.length > 0 ? (
-          <div style={{overflowY: 'scroll', height: '80vh'}}>
-            <div className={styles.tool_container}>
-              {toolkits.map((tool, index) =>
-                  tool.name !== null && !excludedToolkits().includes(tool.name) && (
-                    <div key={index} className={styles.tool_box} onClick={() => sendToolkitData(tool)}>
-                      <div className="row">
-                        <div className="col-12">
-                          <div
-                            style={{display: 'flex', alignItems: 'center', justifyContent: 'flex-start', padding: '5px'}}>
-                            <div>
-                              <Image className={styles.image_class} style={{background: 'black'}} width={30} height={30}
-                                     src={returnToolkitIcon(tool.name)}
-                                     alt="tool-icon"/>
-                            </div>
-                            <div style={{marginLeft: '8px'}}>
-                              <div className={styles.tool_name}>{tool.name}</div>
-                              <div className={styles.tool_publisher}>by SuperAGI</div>
-                            </div>
-                          </div>
+          <div className="vertical_selection_scroll">
+          {toolkits.map((tool, index) =>
+              tool.name !== null && !excludedToolkits().includes(tool.name) && (
+                <div key={index} className="item_box mb_10" onClick={() => sendToolkitData(tool)}>
+                  <div className="row">
+                    <div className="col-12">
+                      <div className="item_container padding_5">
+                         <Image className="image_class bg_black" width={30} height={30}
+                             src={returnToolkitIcon(tool.name)}
+                             alt="tool-icon"/>
+                        <div className="ml_8">
+                          <div className="item_name">{tool.name}</div>
+                          <div className="item_publisher">by SuperAGI</div>
                         </div>
                       </div>
                     </div>
-                  )
-              )}
-            </div>
+                  </div>
+                </div>
+              )
+          )}
           </div>
         ) : (
-          <div style={{
-            marginTop: '30px', display: 'flex', alignItems: 'center', justifyContent: 'center'
-          }} className="form_label">
-            No Toolkits found
-          </div>
+          <div className="form_label mt_20 horizontal_container justify_center">No Toolkits found</div>
         )}
       </div>
     </>
diff --git a/gui/pages/Dashboard/Dashboard.module.css b/gui/pages/Dashboard/Dashboard.module.css
index 528faf325..803affd0a 100644
--- a/gui/pages/Dashboard/Dashboard.module.css
+++ b/gui/pages/Dashboard/Dashboard.module.css
@@ -56,39 +56,6 @@
     margin-top: -1px;
 }
 
-.top_bar {
-    padding: 8px 10px;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.top_bar_section {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 2px 9px;
-    gap: 8px;
-    border-radius: 8px;
-    cursor: pointer;
-}
-
-.top_bar_font {
-    display: flex;
-    align-items: center;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    color: white;
-    margin-left: 5px;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
 .item_list {
     height: 100%;
     position: relative;
@@ -160,32 +127,6 @@
     text-overflow: ellipsis;
 }
 
-.top_right {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: fit-content;
-    order: 1;
-    height: 100%;
-}
-
-.top_left {
-    display: flex;
-    order: 0;
-    justify-content: flex-start;
-    align-items: center;
-}
-
-.top_right_icon {
-    margin-right: 10px;
-    cursor: pointer;
-    display: flex;
-    order: 1;
-    justify-content: flex-end;
-    align-items: center;
-    height: 100%;
-}
-
 .empty_state_button {
     border: none;
     border-radius: 8px;
diff --git a/gui/pages/Dashboard/TopBar.js b/gui/pages/Dashboard/TopBar.js
index 174b25649..6350ba1c7 100644
--- a/gui/pages/Dashboard/TopBar.js
+++ b/gui/pages/Dashboard/TopBar.js
@@ -23,35 +23,29 @@ export default function TopBar({selectedProject, userName, env}) {
   };
 
   return (
-    <div className={styles.top_bar}>
-      <div className={styles.top_left}>
-        <div className={styles.top_bar_section}
-             style={{border: '1px solid rgba(255, 255, 255, 0.14)', width: '150px', cursor: 'default'}}>
-          <div style={{display: 'flex', alignItems: 'center', justifyContent: 'flex-start'}}>
-            <div style={{marginTop: '-2px'}}><Image width={14} height={14} src="/images/project.svg"
-                                                    alt="project-icon"/></div>
-            <div className={styles.top_bar_font}><p>{selectedProject?.name || ''}</p></div>
+    <div className="top_bar">
+      <div className="top_left">
+        <div className="top_bar_section top_bar_input cursor_default">
+          <div className="horizontal_container">
+            <Image width={14} height={14} src="/images/project.svg" alt="project-icon"/>
+            <div className="top_bar_font">{selectedProject?.name || ''}</div>
           </div>
-          {/*<div style={{order:'1'}}><Image width={16} height={16} src="/images/dropdown_down.svg" alt="dropdown-icon"/></div>*/}
         </div>
-        <div className={styles.top_bar_section} style={{marginLeft: '7px', cursor: 'pointer'}}>
-          <div style={{marginTop: '-3px'}}><Image width={14} height={14} src="/images/widgets.svg" alt="widgets-icon"/>
-          </div>
-          <div className={styles.top_bar_font} style={{marginLeft: '-1px'}}
-               onClick={() => openNewTab(-4, "Marketplace", "Marketplace", false)}><p>Marketplace</p></div>
+        <div className="top_bar_section ml_7 cursor_pointer">
+          <Image width={14} height={14} src="/images/widgets.svg" alt="widgets-icon"/>
+          <div className="top_bar_font" onClick={() => openNewTab(-4, "Marketplace", "Marketplace", false)}>Marketplace</div>
         </div>
       </div>
-      <div className={styles.top_right}>
-        <div onClick={() => openNewTab(-3, "Settings", "Settings", false)} className={styles.top_right_icon}><Image
-          width={16} height={16} src="/images/settings.svg" alt="dropdown-icon"/></div>
-        <div className={styles.top_right_icon} onMouseEnter={() => setDropdown(true)}
+      <div className="top_right">
+        <Image onClick={() => openNewTab(-3, "Settings", "Settings", false)} className="top_right_icon" width={16} height={16} src="/images/settings.svg" alt="dropdown-icon"/>
+        <div className="top_right_icon" onMouseEnter={() => setDropdown(true)}
              onMouseLeave={() => setDropdown(false)}>
           <Image width={20} height={20} src="/images/profile_pic.png" alt="dropdown-icon"/>
         </div>
         {dropdown && env === 'PROD' &&
-          <div style={{marginTop: '3vh', marginRight: '74px'}} onMouseEnter={() => setDropdown(true)}
+          <div className="mt_30 mr_74" onMouseEnter={() => setDropdown(true)}
                onMouseLeave={() => setDropdown(false)}>
-            <ul className="dropdown_container" style={{width: '120px'}}>
+            <ul className="dropdown_container w_120p">
               <li className="dropdown_item" onClick={() => setDropdown(false)}>{userName}</li>
               <li className="dropdown_item" onClick={logoutUser}>Logout</li>
             </ul>
diff --git a/gui/pages/_app.css b/gui/pages/_app.css
index 33905c51d..38c3fa7c6 100644
--- a/gui/pages/_app.css
+++ b/gui/pages/_app.css
@@ -35,12 +35,15 @@
     border-radius: 8px;
     border: 1px dashed rgba(255, 255, 255, 0.2);
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 120px;
     cursor: pointer;
     padding: 20px;
     background: transparent;
+    margin: 0 8px 10px 0;
+    gap: 2px;
 }
 
 .file-drop-area.dragging {
@@ -692,9 +695,12 @@ p {
     justify-content: space-between;
 }
 
+.mt_4{margin-top: 4px;}
 .mt_6{margin-top: 6px;}
 .mt_8{margin-top: 8px;}
 .mt_10{margin-top: 10px;}
+.mt_12{margin-top: 12px;}
+.mt_14{margin-top: 14px;}
 .mt_16{margin-top: 16px;}
 .mt_20{margin-top: 20px;}
 .mt_24{margin-top: 24px;}
@@ -703,25 +709,140 @@ p {
 .mt_50{margin-top: 50px;}
 .mt_60{margin-top: 60px;}
 .mt_70{margin-top: 70px;}
+.mt_74{margin-top: 74px;}
 .mt_80{margin-top: 80px;}
 
-.mb_24{margin-bottom:24px;}
+.mb_1{margin-bottom: 1px;}
+.mb_2{margin-bottom: 2px;}
+.mb_3{margin-bottom: 3px;}
+.mb_4{margin-bottom: 4px;}
+.mb_5{margin-bottom: 5px;}
 .mb_6{margin-bottom: 6px;}
+.mb_7{margin-bottom: 7px;}
 .mb_8{margin-bottom: 8px;}
+.mb_9{margin-bottom: 9px;}
 .mb_10{margin-bottom: 10px;}
+.mb_11{margin-bottom: 11px;}
+.mb_12{margin-bottom: 12px;}
+.mb_13{margin-bottom: 13px;}
+.mb_14{margin-bottom: 14px;}
+.mb_15{margin-bottom: 15px;}
 .mb_16{margin-bottom: 16px;}
+.mb_17{margin-bottom: 17px;}
+.mb_18{margin-bottom: 18px;}
+.mb_19{margin-bottom: 19px;}
 .mb_20{margin-bottom: 20px;}
+.mb_21{margin-bottom: 21px;}
+.mb_22{margin-bottom: 22px;}
+.mb_23{margin-bottom: 23px;}
 .mb_24{margin-bottom: 24px;}
+.mb_25{margin-bottom: 25px;}
+.mb_26{margin-bottom: 26px;}
+.mb_27{margin-bottom: 27px;}
+.mb_28{margin-bottom: 28px;}
+.mb_29{margin-bottom: 29px;}
 .mb_30{margin-bottom: 30px;}
+.mb_31{margin-bottom: 31px;}
+.mb_32{margin-bottom: 32px;}
+.mb_33{margin-bottom: 33px;}
 .mb_34{margin-bottom: 34px;}
-
-.ml_24{margin-left:24px;}
+.mb_35{margin-bottom: 35px;}
+.mb_36{margin-bottom: 36px;}
+.mb_37{margin-bottom: 37px;}
+.mb_38{margin-bottom: 38px;}
+.mb_39{margin-bottom: 39px;}
+.mb_40{margin-bottom: 40px;}
+.mb_50{margin-bottom: 50px;}
+.mb_60{margin-bottom: 60px;}
+.mb_70{margin-bottom: 70px;}
+.mb_74{margin-bottom: 74px;}
+
+
+.ml_1{margin-left: 1px;}
+.ml_2{margin-left: 2px;}
+.ml_3{margin-left: 3px;}
+.ml_4{margin-left: 4px;}
+.ml_5{margin-left: 5px;}
 .ml_6{margin-left: 6px;}
+.ml_7{margin-left: 7px;}
 .ml_8{margin-left: 8px;}
+.ml_9{margin-left: 9px;}
 .ml_10{margin-left: 10px;}
+.ml_11{margin-left: 11px;}
 .ml_12{margin-left: 12px;}
+.ml_13{margin-left: 13px;}
+.ml_14{margin-left: 14px;}
+.ml_15{margin-left: 15px;}
 .ml_16{margin-left: 16px;}
+.ml_17{margin-left: 17px;}
+.ml_18{margin-left: 18px;}
+.ml_19{margin-left: 19px;}
 .ml_20{margin-left: 20px;}
+.ml_21{margin-left: 21px;}
+.ml_22{margin-left: 22px;}
+.ml_23{margin-left: 23px;}
+.ml_24{margin-left: 24px;}
+.ml_25{margin-left: 25px;}
+.ml_26{margin-left: 26px;}
+.ml_27{margin-left: 27px;}
+.ml_28{margin-left: 28px;}
+.ml_29{margin-left: 29px;}
+.ml_30{margin-left: 30px;}
+.ml_31{margin-left: 31px;}
+.ml_32{margin-left: 32px;}
+.ml_33{margin-left: 33px;}
+.ml_34{margin-left: 34px;}
+.ml_35{margin-left: 35px;}
+.ml_36{margin-left: 36px;}
+.ml_37{margin-left: 37px;}
+.ml_38{margin-left: 38px;}
+.ml_39{margin-left: 39px;}
+.ml_40{margin-left: 40px;}
+
+
+.mr_1{margin-right: 1px;}
+.mr_2{margin-right: 2px;}
+.mr_3{margin-right: 3px;}
+.mr_4{margin-right: 4px;}
+.mr_5{margin-right: 5px;}
+.mr_6{margin-right: 6px;}
+.mr_7{margin-right: 7px;}
+.mr_8{margin-right: 8px;}
+.mr_9{margin-right: 9px;}
+.mr_10{margin-right: 10px;}
+.mr_11{margin-right: 11px;}
+.mr_12{margin-right: 12px;}
+.mr_13{margin-right: 13px;}
+.mr_14{margin-right: 14px;}
+.mr_15{margin-right: 15px;}
+.mr_16{margin-right: 16px;}
+.mr_17{margin-right: 17px;}
+.mr_18{margin-right: 18px;}
+.mr_19{margin-right: 19px;}
+.mr_20{margin-right: 20px;}
+.mr_21{margin-right: 21px;}
+.mr_22{margin-right: 22px;}
+.mr_23{margin-right: 23px;}
+.mr_24{margin-right: 24px;}
+.mr_25{margin-right: 25px;}
+.mr_26{margin-right: 26px;}
+.mr_27{margin-right: 27px;}
+.mr_28{margin-right: 28px;}
+.mr_29{margin-right: 29px;}
+.mr_30{margin-right: 30px;}
+.mr_31{margin-right: 31px;}
+.mr_32{margin-right: 32px;}
+.mr_33{margin-right: 33px;}
+.mr_34{margin-right: 34px;}
+.mr_35{margin-right: 35px;}
+.mr_36{margin-right: 36px;}
+.mr_37{margin-right: 37px;}
+.mr_38{margin-right: 38px;}
+.mr_39{margin-right: 39px;}
+.mr_40{margin-right: 40px;}
+.mr_70{margin-right: 70px;}
+.mr_74{margin-right: 74px;}
+.mr_80{margin-right: 80px;}
 
 .text_9{
     color: #FFF;
@@ -746,6 +867,13 @@ p {
     font-size: 14px;
     font-weight: 400;
 }
+.text_16{
+    color: #FFF;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
 
 .text_20_bold{
     color: #FFF;
@@ -798,7 +926,6 @@ p {
     justify-content: space-between;
     flex-direction: row;
     width: 100%;
-    gap: 8px;
 }
 
 .horizontal_container{
@@ -819,24 +946,59 @@ p {
     width: 100%;
 }
 
+.w_120p{width: 120px}
 .w_100{width: 100%}
 .w_fit_content{width:fit-content}
+
 .h_100{height: 100%}
+.h_auto{height: auto}
 
 .justify_center{justify-content: center}
+.justify_end{justify-content: flex-end}
+.justify_space_between{justify-content: space-between}
+
 .display_flex{display: inline-flex}
+
 .align_center{align-items: center}
 .align_start{align-items: flex-start}
 .align_end{align-items: flex-end}
+
 .text_align_right{text-align: right}
+.text_align_center{text-align: center}
+.text_align_left{text-align: left}
+
 .position_relative{position: relative}
+
 .cursor_pointer{cursor: pointer}
+.cursor_default{cursor: default}
+
 .overflow_auto{overflow: auto}
+.overflowY_scroll{overflow-y: scroll}
+.overflowX_scroll{overflow-x: scroll}
 
-.gap_8{gap:8px;}
 .gap_4{gap:4px;}
+.gap_6{gap:6px;}
+.gap_8{gap:8px;}
+
+.border_radius_8{border-radius: 8px;}
 
 .color_white{color:#FFFFFF}
+.color_gray{color:#888888}
+
+.lh_16{line-height: 16px;}
+.lh_17{line-height: 17px;}
+
+.padding_5{padding: 5px;}
+.padding_8{padding: 8px;}
+.padding_10{padding: 10px;}
+.padding_12{padding: 12px;}
+
+.padding_8_6{padding: 8px 6px;}
+.padding_2_8{padding: 2px 8px;}
+
+.flex_wrap{flex-wrap: wrap;}
+
+.mix_blend_mode{mix-blend-mode: exclusion;}
 
 /*------------------------------- My ROWS AND COLUMNS -------------------------------*/
 .my_rows {
@@ -1128,5 +1290,226 @@ tr{
     }
 }
 
-.justify_space_between{justify-content: space-between}
-.cursor_pointer{cursor: pointer;}
+.bg_black{background: black}
+.bg_white{background: white}
+
+.container {
+    height: 100%;
+    width: 100%;
+    padding: 0 0 0 8px;
+}
+
+.title_box {
+    width: 100%;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.item_container{
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.item_name {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 21px;
+    color: #FEFEFE;
+    margin-top: -2px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.item_publisher {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 9px;
+    line-height: 12px;
+    display: flex;
+    align-items: center;
+    color: #666666;
+    margin-top: 2px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.item_box {
+    cursor: pointer;
+    width: 100%;
+    border-radius: 8px;
+}
+
+.item_box:hover{
+    background-color: #494856;
+}
+
+.vertical_selection_scroll{
+    overflow-y: scroll;
+    height: 80vh;
+}
+
+.agent_text {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    align-items: center;
+    color: white;
+    flex: none;
+    order: 1;
+    flex-grow: 0;
+}
+
+.agent_box {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 10px 8px;
+    gap: 6px;
+    border-radius: 8px;
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+    cursor: pointer;
+    height: 35px;
+}
+
+.agent_box:hover {
+    background-color: #494856;
+}
+
+.text_ellipsis{
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.tab_button, .tab_button_selected{
+    background: transparent;
+    border: none;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 15px;
+    color: #FFFFFF;
+    border-radius: 8px;
+    padding: 5px 10px;
+    display: -webkit-inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.tab_button{
+    background: transparent;
+}
+
+.tab_button_selected{
+    background: #454254;
+}
+
+.detail_top {
+    width: 100%;
+    height: fit-content;
+    display: inline-flex;
+    align-items: center;
+    padding-right: 10px;
+}
+
+.detail_content {
+    height: calc(100vh - 140px);
+    border-radius: 8px;
+    overflow-y: scroll;
+    padding-bottom: 0;
+}
+
+.feed_title {
+    font-family: 'Source Code Pro';
+    margin-left: 10px;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 15px;
+    color: white;
+    white-space: pre-line;
+    word-wrap: break-word;
+    max-width: 95%;
+}
+
+
+.top_bar {
+    padding: 8px 10px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.top_bar_section {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2px 9px;
+    gap: 8px;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+.top_bar_input{
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    width: 150px;
+}
+
+.top_bar_font {
+    display: flex;
+    align-items: center;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    color: white;
+    margin-left: 5px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+
+.top_right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: fit-content;
+    order: 1;
+    height: 100%;
+}
+
+.top_left {
+    display: flex;
+    order: 0;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.top_right_icon {
+    margin-right: 10px;
+    cursor: pointer;
+    display: flex;
+    order: 1;
+    justify-content: flex-end;
+    align-items: center;
+    height: 100%;
+}
\ No newline at end of file