diff --git a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx
index 82ba37c372..caf023086b 100644
--- a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx
+++ b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx
@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { IconLinkVertical, IconLinkVerticalProps } from './IconLinkVertical';
-import { makeStyles } from '@material-ui/core/styles';
 
 /** @public */
 export type HeaderIconLinkRowClassKey = 'links';
@@ -37,7 +37,13 @@ type Props = {
   links: IconLinkVerticalProps[];
 };
 
-/** @public */
+/**
+ * List of links mapped to {@link IconLinkVertical | IconLinkVertical}
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function HeaderIconLinkRow(props: Props) {
   const { links } = props;
   const classes = useStyles();
diff --git a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
index 2be702a754..91137064be 100644
--- a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
+++ b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import React, { PropsWithChildren } from 'react';
-import classNames from 'classnames';
-import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import { makeStyles, Theme } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import IconButton from '@material-ui/core/IconButton';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import classNames from 'classnames';
+import React, { PropsWithChildren } from 'react';
 
 const generateGradientStops = (themeType: 'dark' | 'light') => {
   // 97% corresponds to the theme.palette.background.default for the light theme
@@ -198,7 +198,13 @@ function useSmoothScroll(
   return setScrollTarget;
 }
 
-/** @public */
+/**
+ * Horizontal scrollable component with arrows to navigate
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function HorizontalScrollGrid(props: PropsWithChildren<Props>) {
   const {
     scrollStep = 100,
diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx
index 00e7b3257b..858565f773 100644
--- a/packages/core-components/src/components/ProgressBars/Gauge.tsx
+++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { BackstagePalette, BackstageTheme } from '@backstage/theme';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { Circle } from 'rc-progress';
 import React from 'react';
 
@@ -96,7 +96,14 @@ export const getProgressColor: GaugePropsGetColor = ({
   return palette.status.ok;
 };
 
-/** @public */
+/**
+ * Circular Progress Bar
+ *
+ * @public
+ * @remarks
+ *
+ */
+
 export function Gauge(props: GaugeProps) {
   const { getColor = getProgressColor } = props;
   const classes = useStyles(props);
diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
index 0fa51b3919..6191eb0cd8 100644
--- a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
+++ b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { InfoCard, InfoCardVariants } from '../../layout/InfoCard';
+import React from 'react';
 import { BottomLinkProps } from '../../layout/BottomLink';
+import { InfoCard, InfoCardVariants } from '../../layout/InfoCard';
 import { Gauge, GaugePropsGetColor } from './Gauge';
 
 type Props = {
@@ -44,7 +44,13 @@ const useStyles = makeStyles(
   { name: 'BackstageGaugeCard' },
 );
 
-/** @public */
+/**
+ * {@link Gauge | Gauge} with header, subheader and footer
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function GaugeCard(props: Props) {
   const classes = useStyles(props);
   const { title, subheader, progress, inverse, deepLink, variant, getColor } =
diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx
index 76d346031e..46ea1694e3 100644
--- a/packages/core-components/src/layout/Header/Header.tsx
+++ b/packages/core-components/src/layout/Header/Header.tsx
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { useApi, configApiRef } from '@backstage/core-plugin-api';
+import { configApiRef, useApi } from '@backstage/core-plugin-api';
 import { BackstageTheme } from '@backstage/theme';
-import { makeStyles } from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react';
@@ -189,8 +189,13 @@ const SubtitleFragment = ({ classes, subtitle }: SubtitleFragmentProps) => {
     </Typography>
   );
 };
-
-/** @public */
+/**
+ * Backstage main header with abstract color background in multiple variants
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function Header(props: PropsWithChildren<Props>) {
   const {
     children,
diff --git a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
index b4576a27a9..31e8998477 100644
--- a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
+++ b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { makeStyles } from '@material-ui/core/styles';
-import Link from '@material-ui/core/Link';
-import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
+import Link from '@material-ui/core/Link';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
 import React from 'react';
 
 /** @public */
@@ -60,7 +60,13 @@ type HeaderLabelProps = {
   url?: string;
 };
 
-/** @public */
+/**
+ * Additional label to main {@link Header | Header}
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function HeaderLabel(props: HeaderLabelProps) {
   const { label, value, url } = props;
   const classes = useStyles();
diff --git a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
index 00dd3e9b95..c27d12114a 100644
--- a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
+++ b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
@@ -17,10 +17,10 @@
 // TODO(blam): Remove this implementation when the Tabs are ready
 // This is just a temporary solution to implementing tabs for now
 
-import React, { useState, useEffect } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import TabUI, { TabProps } from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
+import React, { useEffect, useState } from 'react';
 
 /** @public */
 export type HeaderTabsClassKey =
@@ -68,7 +68,13 @@ type HeaderTabsProps = {
   selectedIndex?: number;
 };
 
-/** @public */
+/**
+ * Horizontal Tabs component
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function HeaderTabs(props: HeaderTabsProps) {
   const { tabs, onChange, selectedIndex } = props;
   const [selectedTab, setSelectedTab] = useState<number>(selectedIndex ?? 0);
diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
index 8bedca1013..2b1c002456 100644
--- a/packages/core-components/src/layout/InfoCard/InfoCard.tsx
+++ b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-import React, { ReactNode } from 'react';
-import { withStyles, makeStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import CardHeader, { CardHeaderProps } from '@material-ui/core/CardHeader';
 import Divider from '@material-ui/core/Divider';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
-import { ErrorBoundary, ErrorBoundaryProps } from '../ErrorBoundary';
+import React, { ReactNode } from 'react';
 import { BottomLink, BottomLinkProps } from '../BottomLink';
+import { ErrorBoundary, ErrorBoundaryProps } from '../ErrorBoundary';
 
 /** @public */
 export type InfoCardClassKey =
@@ -144,7 +144,13 @@ type Props = {
   titleTypographyProps?: object;
 };
 
-/** @public */
+/**
+ * Material-ui card with header , content and actions footer
+ *
+ * @public
+ * @remarks
+ *
+ */
 export function InfoCard(props: Props): JSX.Element {
   const {
     title,