diff --git a/packages/console/src/pages/ApiResourceDetails/index.tsx b/packages/console/src/pages/ApiResourceDetails/index.tsx
index ae5323d27..63f9684c1 100644
--- a/packages/console/src/pages/ApiResourceDetails/index.tsx
+++ b/packages/console/src/pages/ApiResourceDetails/index.tsx
@@ -11,6 +11,7 @@ import BackLink from '@/components/BackLink';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
 import CopyToClipboard from '@/components/CopyToClipboard';
+import Drawer from '@/components/Drawer';
 import FormField from '@/components/FormField';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import TabNav, { TabNavLink } from '@/components/TabNav';
@@ -43,6 +44,7 @@ const ApiResourceDetails = () => {
   const api = useApi();
 
   const [isDeleteFormOpen, setIsDeleteFormOpen] = useState(false);
+  const [isReadmeOpen, setIsReadmeOpen] = useState(false);
 
   useEffect(() => {
     if (!data) {
@@ -86,7 +88,21 @@ const ApiResourceDetails = () => {
               </div>
             </div>
             <div className={styles.operations}>
-              <Button title="admin_console.api_resource_details.check_help_guide" />
+              <Button
+                title="admin_console.api_resource_details.check_help_guide"
+                onClick={() => {
+                  setIsReadmeOpen(true);
+                }}
+              />
+              <Drawer
+                isOpen={isReadmeOpen}
+                onClose={() => {
+                  setIsReadmeOpen(false);
+                }}
+              >
+                {/* TODO - Implement the content when the documentation website is ready. */}
+                <div>TBD</div>
+              </Drawer>
               <ActionMenu
                 buttonProps={{ icon: <More /> }}
                 title={t('api_resource_details.more_options')}
diff --git a/packages/console/src/pages/ApplicationDetails/index.tsx b/packages/console/src/pages/ApplicationDetails/index.tsx
index 6c157ce7f..b61e35c84 100644
--- a/packages/console/src/pages/ApplicationDetails/index.tsx
+++ b/packages/console/src/pages/ApplicationDetails/index.tsx
@@ -11,6 +11,7 @@ import BackLink from '@/components/BackLink';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
 import CopyToClipboard from '@/components/CopyToClipboard';
+import Drawer from '@/components/Drawer';
 import FormField from '@/components/FormField';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import MultilineInput from '@/components/MultilineInput';
@@ -44,6 +45,8 @@ const ApplicationDetails = () => {
   );
   const isLoading = !data && !error && !oidcConfig && !fetchOidcConfigError;
 
+  const [isReadmeOpen, setIsReadmeOpen] = useState(false);
+
   const [isDeleteFormOpen, setIsDeleteFormOpen] = useState(false);
 
   const { control, handleSubmit, register, reset } = useForm<Application>();
@@ -156,7 +159,21 @@ const ApplicationDetails = () => {
               </div>
             </div>
             <div className={styles.operations}>
-              <Button title="admin_console.application_details.check_help_guide" />
+              <Button
+                title="admin_console.application_details.check_help_guide"
+                onClick={() => {
+                  setIsReadmeOpen(true);
+                }}
+              />
+              <Drawer
+                isOpen={isReadmeOpen}
+                onClose={() => {
+                  setIsReadmeOpen(false);
+                }}
+              >
+                {/* TODO - Implement the content when the documentation website is ready. */}
+                <div>TBD</div>
+              </Drawer>
               <ActionMenu
                 buttonProps={{ icon: <More /> }}
                 title={t('application_details.more_options')}