diff --git a/assets/apps/dashboard/src/Components/Content/AvailableModule.js b/assets/apps/dashboard/src/Components/Content/AvailableModule.js
new file mode 100644
index 0000000000..1b633e6617
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/AvailableModule.js
@@ -0,0 +1,212 @@
+/* global neveDash */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+ NEVE_AVAILABLE_MODULES_ICON_MAP,
+ NEVE_STORE,
+} from '../../utils/constants';
+import { ArrowRight, LoaderCircle, LucideSettings } from 'lucide-react';
+import Card from '../../Layout/Card';
+import { useState } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import Toggle from '../Common/Toggle';
+import { send } from '../../utils/rest';
+
+const Toast = ({ message }) => {
+ return (
+
+ {message}
+
+ );
+};
+
+const ModuleToggle = ({
+ slug,
+ moduleData,
+ setMessage,
+ isActive,
+ setIsActive,
+ isInstalled,
+ setIsInstalled,
+}) => {
+ const [loading, setLoading] = useState(false);
+ const { changeModuleStatus, setObfxModuleStatus, setToast } =
+ useDispatch(NEVE_STORE);
+ const { moduleStatus } = useSelect((select) => {
+ const { getObfxModuleStatus } = select(NEVE_STORE);
+
+ return {
+ moduleStatus: getObfxModuleStatus(slug) || false,
+ };
+ });
+
+ const { api } = neveDash;
+ const { title } = moduleData;
+ const toastMessage = {
+ //translators: %s - Plugin name
+ installing: sprintf(__('Installing %s', 'neve'), 'Orbit Fox Plugin'),
+ //translators: %s - Plugin name
+ activating: sprintf(__('Activating %s', 'neve'), 'Orbit Fox Plugin'),
+ };
+
+ const handleToggle = async (value) => {
+ try {
+ setLoading(true);
+ changeModuleStatus(slug, value);
+
+ let isPluginActive = true;
+ // Handle plugin installation or activation
+ if (!isInstalled) {
+ setMessage(toastMessage.installing);
+ isPluginActive = false;
+ } else if (!isActive) {
+ setMessage(toastMessage.activating);
+ isPluginActive = false;
+ }
+
+ if (!isPluginActive) {
+ await send(api + 'activate-plugin', {
+ slug: 'themeisle-companion',
+ }).then((res) => {
+ if (res.success) {
+ setIsInstalled(true);
+ setIsActive(true);
+ }
+ });
+ }
+
+ // Fire the send method after install/activate or immediately if both are done
+ const response = await send(api + 'activate-module', {
+ slug,
+ value,
+ });
+
+ setObfxModuleStatus(slug, response.success ? value : !value);
+ setToast(
+ response.success
+ ? (value
+ ? __('Module Activated', 'neve')
+ : __('Module Deactivated.', 'neve')) + ` (${title})`
+ : response.data
+ );
+ } catch (error) {
+ setToast(
+ __('Something went wrong while activating the module.', 'neve')
+ );
+ } finally {
+ setLoading(false);
+ setMessage('');
+ }
+ };
+
+ return (
+
+
+
+ );
+};
+
+const AvailableModuleCard = ({
+ moduleData,
+ slug,
+ setMessage,
+ isActive,
+ setIsActive,
+ isInstalled,
+ setIsInstalled,
+}) => {
+ const { title, description } = moduleData;
+ const CardIcon = NEVE_AVAILABLE_MODULES_ICON_MAP[slug] || LucideSettings;
+
+ return (
+ }
+ title={title}
+ className="bg-white p-6 rounded-lg shadow-sm"
+ afterTitle={
+
+ }
+ id={`module-${slug}`}
+ >
+
+ {description}
+
+ {!isActive ? (
+
+ {__(
+ 'This feature is part of OrbitFox plugin, built by the Neve team. Enabling the toggle will automatically install and activate the plugin.',
+ 'neve'
+ )}
+
+ ) : (
+
+ {__('Go to Settings to Edit', 'neve')}
+
+
+ )}
+
+ );
+};
+
+export default () => {
+ const [message, setMessage] = useState('');
+ const [isInstalled, setIsInstalled] = useState(
+ neveDash.orbitFox.isInstalled
+ );
+ const [isActive, setIsActive] = useState(neveDash.orbitFox.isActive);
+
+ return (
+ <>
+
+
+
+ {__('Available Modules', 'neve')}
+
+
+
+ {Object.entries(neveDash.availableModules).map(
+ ([slug, moduleData]) => (
+
+ )
+ )}
+
+