diff --git a/src/pages/ContentScripts/features/developer-networks/view.tsx b/src/pages/ContentScripts/features/developer-networks/view.tsx
index 63dc3e68..96dabf2b 100644
--- a/src/pages/ContentScripts/features/developer-networks/view.tsx
+++ b/src/pages/ContentScripts/features/developer-networks/view.tsx
@@ -141,14 +141,14 @@ const View = ({
                 settings.locale
               )}
             </span>
-            <div className="hypertrons-crx-title-extra">
+            <div className="hypertrons-crx-title-extra developer-tab">
               {getMessageByLocale('global_period', settings.locale)}:{' '}
               {REPO_PERIOD} {getMessageByLocale('global_day', settings.locale)}
             </div>
           </div>
-          <div className="d-flex flex-wrap flex-items-center">
-            <div className="col-12 col-md-8">
-              <div style={{ margin: '10px 0 20px 20px' }}>
+          <div className="d-flex flex-wrap justify-content-lg-between align-items-center">
+            <div className="col-8 graph-container">
+              <div style={{ margin: '15px 0 20px 0px' }}>
                 <Graph
                   data={developerNetwork}
                   style={GRAPH_STYLE}
@@ -156,11 +156,8 @@ const View = ({
                 />
               </div>
             </div>
-            <div className="col-12 col-md-4">
-              <div
-                className="color-text-secondary"
-                style={{ marginLeft: '35px', marginRight: '35px' }}
-              >
+            <div className="col-4 description-container">
+              <div className="color-text-secondary developer-tab">
                 <p>
                   {getMessageByLocale(
                     'component_developerCollaborationNetwork_description',
@@ -210,17 +207,14 @@ const View = ({
               {getMessageByLocale('global_day', settings.locale)}
             </div>
           </div>
-          <div className="d-flex flex-wrap flex-items-center">
-            <div className="col-12 col-md-8">
-              <div style={{ margin: '10px 0 20px 20px' }}>
+          <div className="d-flex flex-wrap justify-content-lg-between align-items-center">
+            <div className="col-lg-8 col-12 graph-container">
+              <div style={{ margin: '15px 0px 20px 0px' }}>
                 <Graph data={repoNetwork} style={GRAPH_STYLE} />
               </div>
             </div>
-            <div className="col-12 col-md-4">
-              <div
-                className="color-text-secondary"
-                style={{ marginLeft: '35px', marginRight: '35px' }}
-              >
+            <div className="col-lg-4 col-12 description-container">
+              <div className="color-text-secondary">
                 <p>
                   {getMessageByLocale(
                     'component_mostParticipatedProjects_description',
diff --git a/src/pages/ContentScripts/features/perceptor-tab/index.tsx b/src/pages/ContentScripts/features/perceptor-tab/index.tsx
index 2ebb4015..fc758ae9 100644
--- a/src/pages/ContentScripts/features/perceptor-tab/index.tsx
+++ b/src/pages/ContentScripts/features/perceptor-tab/index.tsx
@@ -20,7 +20,7 @@ const addPerceptorTab = async (): Promise<void | false> => {
   }
   const perceptorTab = insightsTab.cloneNode(true) as HTMLAnchorElement;
   delete perceptorTab.dataset.selectedLinks;
-  perceptorTab.removeAttribute('aria-current')
+  perceptorTab.removeAttribute('aria-current');
   perceptorTab.classList.remove('selected');
   const perceptorHref = `${insightsTab.href}?redirect=perceptor`;
   perceptorTab.href = perceptorHref;
diff --git a/src/pages/ContentScripts/index.scss b/src/pages/ContentScripts/index.scss
index 10ebeb13..3862433e 100644
--- a/src/pages/ContentScripts/index.scss
+++ b/src/pages/ContentScripts/index.scss
@@ -21,6 +21,23 @@
   border-bottom: 0;
   border-radius: 6px;
 }
+.color-text-secondary {
+  margin-left: 35px;
+  margin-right: 35px;
+  margin-top: 10px;
+}
+@media screen and (max-width: 1120px) {
+  .graph-container {
+    width: 100% !important;
+  }
+  .description-container {
+    width: 100% !important;
+  }
+  .color-text-secondary {
+    margin-left: 5px;
+    margin-top: 5px;
+  }
+}
 
 .hypertrons-crx-title-extra {
   float: right;
@@ -28,6 +45,12 @@
   text-align: right;
 }
 
+@media screen and (max-width: 650px) {
+  .developer-tab {
+    float: none;
+  }
+}
+
 .verticalStackItemStyle {
   width: 50%;
   margin-left: 10px;