diff --git a/src/pages/ContentScripts/features/perceptor-layout/view.tsx b/src/pages/ContentScripts/features/perceptor-layout/view.tsx
index f1b6a429..cbb9f79a 100644
--- a/src/pages/ContentScripts/features/perceptor-layout/view.tsx
+++ b/src/pages/ContentScripts/features/perceptor-layout/view.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
 
 const View = (): JSX.Element => {
-  return <></>;
+  return (
+    <>
+      <div id="hypercrx-perceptor-slot-repo-activity-racing-bar" />
+      <div id="hypercrx-perceptor-slot-repo-networks" />
+    </>
+  );
 };
 
 export default View;
diff --git a/src/pages/ContentScripts/features/repo-activity-racing-bar/index.tsx b/src/pages/ContentScripts/features/repo-activity-racing-bar/index.tsx
index ab88fa0a..a4c77fad 100644
--- a/src/pages/ContentScripts/features/repo-activity-racing-bar/index.tsx
+++ b/src/pages/ContentScripts/features/repo-activity-racing-bar/index.tsx
@@ -38,7 +38,7 @@ const init = async (): Promise<void> => {
   const container = document.createElement('div');
   container.id = featureId;
   // append before render so that the container has computed width
-  $('#hypercrx-perceptor-layout').append(container);
+  $('#hypercrx-perceptor-slot-repo-activity-racing-bar').append(container);
   renderTo(container);
 };
 
diff --git a/src/pages/ContentScripts/features/repo-networks/index.tsx b/src/pages/ContentScripts/features/repo-networks/index.tsx
index 5eca87b3..4a0e07fb 100644
--- a/src/pages/ContentScripts/features/repo-networks/index.tsx
+++ b/src/pages/ContentScripts/features/repo-networks/index.tsx
@@ -43,7 +43,7 @@ const init = async (): Promise<void> => {
   const container = document.createElement('div');
   container.id = featureId;
   renderTo(container);
-  $('#hypercrx-perceptor-layout').append(container);
+  $('#hypercrx-perceptor-slot-repo-networks').append(container);
 };
 
 const restore = async () => {