diff --git a/frontend/app/components/Client/Projects/ProjectCodeSnippet.tsx b/frontend/app/components/Client/Projects/ProjectCodeSnippet.tsx
new file mode 100644
index 000000000..e48764f39
--- /dev/null
+++ b/frontend/app/components/Client/Projects/ProjectCodeSnippet.tsx
@@ -0,0 +1,175 @@
+import React, { useEffect, useState } from 'react';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
+import { Checkbox, Loader, Toggler } from 'UI';
+import GDPR from 'App/mstore/types/gdpr';
+import cn from 'classnames';
+import stl from './projectCodeSnippet.module.css';
+import Select from 'Shared/Select';
+import CodeSnippet from 'Shared/CodeSnippet';
+import CircleNumber from 'Components/Onboarding/components/CircleNumber';
+import Project from '@/mstore/types/project';
+
+interface InputModeOption {
+  label: string;
+  value: string;
+}
+
+const inputModeOptions: InputModeOption[] = [
+  { label: 'Record all inputs', value: 'plain' },
+  { label: 'Ignore all inputs', value: 'obscured' },
+  { label: 'Obscure all inputs', value: 'hidden' }
+];
+
+const inputModeOptionsMap: Record<string, number> = {};
+inputModeOptions.forEach((o, i) => (inputModeOptionsMap[o.value] = i));
+
+interface Props {
+  project: Project;
+}
+
+const ProjectCodeSnippet: React.FC = (props: Props) => {
+  const { projectsStore } = useStore();
+  const siteId = projectsStore.siteId;
+  const site = props.project;
+  const gdpr = site.gdpr as GDPR;
+  const sites = projectsStore.list;
+  const editGDPR = projectsStore.editGDPR;
+  const onSaveGDPR = projectsStore.saveGDPR;
+  const init = projectsStore.initProject;
+  const [changed, setChanged] = useState(false);
+  const [isAssistEnabled, setAssistEnabled] = useState(false);
+  const [showLoader, setShowLoader] = useState(false);
+
+  useEffect(() => {
+    const currentSite = sites.find((s) => s.id === siteId);
+    if (currentSite) {
+      init(currentSite);
+    }
+  }, [init, siteId, sites]);
+
+  const saveGDPR = () => {
+    setChanged(true);
+    void onSaveGDPR(site.id);
+  };
+
+  const onChangeSelect = (data: { name: string; value: string }) => {
+    editGDPR({ [data.name]: data.value });
+    saveGDPR();
+  };
+
+  const onChangeOption = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, checked } = event.target;
+    editGDPR({ [name]: checked });
+    saveGDPR();
+  };
+
+  useEffect(() => {
+    setShowLoader(true);
+    const timer = setTimeout(() => {
+      setShowLoader(false);
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [isAssistEnabled]);
+
+  return (
+    <div>
+      <div className="mb-4">
+        <div className="font-semibold mb-2 flex items-center">
+          <CircleNumber text="1" /> Choose data recording options
+        </div>
+
+        <div className="ml-10 mb-4" style={{ maxWidth: '50%' }}>
+          <Select
+            name="defaultInputMode"
+            options={inputModeOptions}
+            onChange={({ value }) =>
+              onChangeSelect({ name: 'defaultInputMode', value: value.value })
+            }
+            placeholder="Default Input Mode"
+            defaultValue={gdpr.defaultInputMode}
+          />
+        </div>
+
+        <div className="mx-4" />
+        <div className="flex items-center ml-10">
+          <Checkbox
+            name="maskNumbers"
+            type="checkbox"
+            checked={gdpr.maskNumbers}
+            onChange={onChangeOption}
+            className="mr-2"
+            label="Do not record any numeric text"
+          />
+
+          <div className="mx-4" />
+
+          <Checkbox
+            name="maskEmails"
+            type="checkbox"
+            checked={gdpr.maskEmails}
+            onChange={onChangeOption}
+            className="mr-2"
+            label="Do not record email addresses"
+          />
+        </div>
+      </div>
+      <div className={cn(stl.info, 'rounded bg-gray mt-2 mb-4 ml-10', { hidden: !changed })}>
+        Below code snippet changes depending on the data recording options chosen.
+      </div>
+
+      <div className={cn(stl.instructions, 'mt-8')}>
+        <div className="font-semibold flex items-center">
+          <CircleNumber text="2" />
+          <span>Enable Assist (Optional)</span>
+        </div>
+      </div>
+      <div className="ml-10">
+        <p>
+          OpenReplay Assist allows you to support your users by seeing their live screen and
+          instantly hopping on call (WebRTC) with them without requiring any 3rd-party screen
+          sharing software.
+        </p>
+        <Toggler
+          label="Yes"
+          checked={isAssistEnabled}
+          name="test"
+          className="font-medium mr-2"
+          onChange={() => setAssistEnabled(!isAssistEnabled)}
+        />
+      </div>
+
+      <div className={cn(stl.instructions, 'mt-8')}>
+        <div className="font-semibold flex items-center">
+          <CircleNumber text="3" />
+          <span>Install SDK</span>
+        </div>
+      </div>
+
+      <div className="ml-10 mb-2">
+        Paste this snippet <span>{'before the '}</span>
+        <span className={stl.highLight}> {'</head>'} </span>
+        <span>{' tag of your page.'}</span>
+      </div>
+      <div className={cn(stl.snippetsWrapper, 'ml-10')}>
+        {showLoader ? (
+          <div style={{ height: '474px' }}>
+            <Loader loading={true} />
+          </div>
+        ) : (
+          <CodeSnippet
+            isAssistEnabled={isAssistEnabled}
+            host={site?.host}
+            projectKey={site?.projectKey!}
+            ingestPoint={`"https://${window.location.hostname}/ingest"`}
+            defaultInputMode={gdpr.defaultInputMode}
+            obscureTextNumbers={gdpr.maskNumbers}
+            obscureTextEmails={gdpr.maskEmails}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default observer(ProjectCodeSnippet);
diff --git a/frontend/app/components/Client/Projects/ProjectTabTracking.tsx b/frontend/app/components/Client/Projects/ProjectTabTracking.tsx
index c8aad161d..fce397b8c 100644
--- a/frontend/app/components/Client/Projects/ProjectTabTracking.tsx
+++ b/frontend/app/components/Client/Projects/ProjectTabTracking.tsx
@@ -1,16 +1,19 @@
 import React from 'react';
 import Project from '@/mstore/types/project';
-import InstallMobileDocs from 'Shared/TrackingCodeModal/InstallIosDocs';
 import { Tabs } from 'UI';
-import ProjectCodeSnippet from 'Shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet';
-import InstallDocs from 'Shared/TrackingCodeModal/InstallDocs';
-import usePageTitle from '@/hooks/usePageTitle';
 
-const PROJECT = 'Using Script';
-const DOCUMENTATION = 'Using NPM';
+import usePageTitle from '@/hooks/usePageTitle';
+import InstallDocs from 'Components/Onboarding/components/OnboardingTabs/InstallDocs';
+import ProjectCodeSnippet from 'Components/Client/Projects/ProjectCodeSnippet';
+import MobileInstallDocs from 'Components/Onboarding/components/OnboardingTabs/InstallDocs/MobileInstallDocs';
+import { Segmented } from 'antd';
+import AndroidInstallDocs from 'Components/Onboarding/components/OnboardingTabs/InstallDocs/AndroidInstallDocs';
+
+const JAVASCRIPT = 'Using Script';
+const NPM = 'Using NPM';
 const TABS = [
-  { key: DOCUMENTATION, text: DOCUMENTATION },
-  { key: PROJECT, text: PROJECT }
+  { key: NPM, text: NPM },
+  { key: JAVASCRIPT, text: JAVASCRIPT }
 ];
 
 interface Props {
@@ -20,35 +23,70 @@ interface Props {
 function ProjectTabTracking(props: Props) {
   usePageTitle('Installation - OpenReplay Preferences');
   const { project } = props;
-  const [activeTab, setActiveTab] = React.useState(PROJECT);
-  const ingestPoint = `https://${window.location.hostname}/ingest`;
-
-  const renderActiveTab = () => {
-    switch (activeTab) {
-      case PROJECT:
-        return <ProjectCodeSnippet site={project} />;
-      case DOCUMENTATION:
-        return <InstallDocs site={project} />;
-    }
-    return null;
-  };
 
   return (
     <div>
-      {project.platform === 'ios' ? (
-        <InstallMobileDocs site={project} ingestPoint={ingestPoint} />
+      {project.platform !== 'web' ? (
+        <MobileSnippet project={project} />
       ) : (
-        <div>
-          <Tabs
-            tabs={TABS}
-            active={activeTab}
-            onClick={(tab: string) => setActiveTab(tab)}
-          />
-          <div className="p-5">{renderActiveTab()}</div>
-        </div>
+        <WebSnippet project={project} />
       )}
     </div>
   );
 }
 
 export default ProjectTabTracking;
+
+function WebSnippet({ project }: { project: Project }) {
+  const [isNpm, setIsNpm] = React.useState(true);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Segmented
+        options={[
+          { label: 'Using NPM', value: true },
+          { label: 'Using Script', value: false }
+        ]}
+        value={isNpm}
+        onChange={setIsNpm}
+        block={true}
+        style={{ maxWidth: '200px' }}
+        className="!align-middle"
+      />
+
+      {isNpm ? (
+        <InstallDocs site={project} />
+      ) : (
+        <ProjectCodeSnippet project={project} />
+      )}
+    </div>
+  );
+}
+
+function MobileSnippet({ project }: { project: Project }) {
+  const [isIos, setIsIos] = React.useState(true);
+  const ingestPoint = `https://${window.location.hostname}/ingest`;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Segmented
+        options={[
+          { label: 'iOS', value: true },
+          { label: 'Android', value: false }
+        ]}
+        value={isIos}
+        onChange={setIsIos}
+        block={true}
+        style={{ maxWidth: '150px' }}
+        className="!align-middle"
+      />
+
+
+      {isIos ? (
+        <MobileInstallDocs site={project} ingestPoint={ingestPoint} />
+      ) : (
+        <AndroidInstallDocs site={project} ingestPoint={ingestPoint} />
+      )}
+    </div>
+  );
+}
diff --git a/frontend/app/components/Client/Projects/projectCodeSnippet.module.css b/frontend/app/components/Client/Projects/projectCodeSnippet.module.css
new file mode 100644
index 000000000..610a3a4d7
--- /dev/null
+++ b/frontend/app/components/Client/Projects/projectCodeSnippet.module.css
@@ -0,0 +1,101 @@
+
+@import 'zindex.css';
+
+.modalHeader {
+  display: flex !important;
+  align-items: center;
+}
+
+.content {
+  background-color: white !important;
+}
+
+.highLight {
+  background-color: rgba(204, 0, 0, 0.05);
+  color: $red;
+  padding: 2px 5px;
+  border-radius: 3px;
+}
+
+.snippetsWrapper {
+  position: relative;
+  & .codeCopy {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: $codeSnippet;
+    padding: 5px 10px; 
+    color: $teal;
+    text-transform: uppercase;
+    cursor: pointer;
+    border-radius: 3px;
+    transition: all 0.4s;
+    user-select: none;
+
+    &:hover {
+      background-color: $gray-light;
+      transition: all 0.2s;
+    }
+  }
+  & .snippet {
+    overflow: hidden;
+    line-height: 18px;
+    border-radius: 5px;
+    user-select: none;
+    & > div {
+      background-color: $gray-lightest !important;
+    }
+  }
+}
+
+.siteInfo {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+
+  & span {
+    color: $teal;
+  }
+}
+.instructions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.closeButton {
+  margin-left: auto;
+  cursor: pointer;
+  padding: 5px;
+}
+
+.siteId {
+  font-weight: 500;
+  & span {
+    background: #f6f6f6;
+    border-radius: 3px;
+    padding: 2px 7px;
+    font-weight: normal;
+    margin-left: 4px;
+    border: solid thin #eee;
+  }
+}
+
+.info {
+  padding: 5px 10px;
+  background-color: #ffedd1;
+}
+
+.number {
+  width: 24px;
+  height: 24px;
+  background-color: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  color: white;
+  font-size: 12px;
+  margin-right: 10px;
+}
\ No newline at end of file