diff --git a/src/index.scss b/src/index.scss
index 381ca17082..717e4a7215 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -18,6 +18,7 @@
 @import "export-page/CourseExportPage";
 @import "import-page/CourseImportPage";
 @import "taxonomy";
+@import "library-authoring";
 @import "files-and-videos";
 @import "content-tags-drawer";
 @import "course-outline/CourseOutline";
diff --git a/src/library-authoring/LibraryAuthoringPage.tsx b/src/library-authoring/LibraryAuthoringPage.tsx
index c1fd9b76bb..42aa3e25e5 100644
--- a/src/library-authoring/LibraryAuthoringPage.tsx
+++ b/src/library-authoring/LibraryAuthoringPage.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { StudioFooter } from '@edx/frontend-component-footer';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
@@ -72,11 +72,8 @@ const LibraryAuthoringPage = () => {
   } = useContext(LibraryContext);
 
   useEffect(() => {
-    // Open Library Info sidebar by default
-    if (!isLoading && libraryData) {
-      openInfoSidebar();
-    };
-  }, [isLoading, libraryData]);
+    openInfoSidebar();
+  }, []);
 
   if (isLoading) {
     return <Loading />;
diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts
index 2280c6305a..3288a6a632 100644
--- a/src/library-authoring/data/api.ts
+++ b/src/library-authoring/data/api.ts
@@ -16,6 +16,11 @@ export const getLibraryBlockTypesUrl = (libraryId: string) => `${getApiBaseUrl()
  */
 export const getCreateLibraryBlockUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/blocks/`;
 export const getContentLibraryV2ListApiUrl = () => `${getApiBaseUrl()}/api/libraries/v2/`;
+/**
+ * Get the URL for commit/revert changes in library.
+ */
+export const getCommitLibraryChangesUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/commit/`
+
 
 export interface ContentLibrary {
   id: string;
@@ -27,6 +32,9 @@ export interface ContentLibrary {
   numBlocks: number;
   version: number;
   lastPublished: Date | null;
+  lastDraftCreated: Date | null;
+  publishedBy: string | null;
+  lastDraftCreatedBy: string | null;
   allowLti: boolean;
   allowPublicLearning: boolean;
   allowPublicRead: boolean;
@@ -141,3 +149,25 @@ export async function getContentLibraryV2List(customParams: GetLibrariesV2Custom
     .get(getContentLibraryV2ListApiUrl(), { params: customParamsFormated });
   return camelCaseObject(data);
 }
+
+/**
+ * Commit library changes.
+ */
+export async function commitLibraryChanges(libraryId: string): Promise<any> {
+  const client = getAuthenticatedHttpClient();
+
+  const { data } = await client.post(getCommitLibraryChangesUrl(libraryId));
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Revert library changes.
+ */
+export async function revertLibraryChanges(libraryId: string): Promise<any> {
+  const client = getAuthenticatedHttpClient();
+
+  const { data } = await client.delete(getCommitLibraryChangesUrl(libraryId));
+
+  return camelCaseObject(data);
+}
diff --git a/src/library-authoring/data/apiHook.ts b/src/library-authoring/data/apiHook.ts
new file mode 100644
index 0000000000..0b2e24ea23
--- /dev/null
+++ b/src/library-authoring/data/apiHook.ts
@@ -0,0 +1,98 @@
+import React from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { MeiliSearch } from 'meilisearch';
+
+import { useContentSearchConnection, useContentSearchResults } from '../../search-modal';
+import {
+  createLibraryBlock,
+  getContentLibrary,
+  commitLibraryChanges,
+  revertLibraryChanges
+} from './api';
+
+export const libraryQueryKeys = {
+  /**
+   * Used in all query keys.
+   * You can use these key to invalidate all queries.
+   */
+  all: ['contentLibrary'],
+  contentLibrary: (libraryId) => [
+    libraryQueryKeys.all, libraryId,
+  ],
+};
+
+/**
+ * Hook to fetch a content library by its ID.
+ */
+export const useContentLibrary = (libraryId?: string) => (
+  useQuery({
+    queryKey: libraryQueryKeys.contentLibrary(libraryId),
+    queryFn: () => getContentLibrary(libraryId),
+  })
+);
+
+/**
+ * Use this mutation to create a block in a library
+ */
+export const useCreateLibraryBlock = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: createLibraryBlock,
+    onSettled: (_data, _error, variables) => {
+      queryClient.invalidateQueries({ queryKey: libraryQueryKeys.contentLibrary(variables.libraryId) });
+      queryClient.invalidateQueries({ queryKey: ['content_search'] });
+    },
+  });
+};
+
+/**
+ * Hook to fetch the count of components and collections in a library.
+ */
+export const useLibraryComponentCount = (libraryId: string, searchKeywords: string) => {
+  // Meilisearch code to get Collection and Component counts
+  const { data: connectionDetails } = useContentSearchConnection();
+
+  const indexName = connectionDetails?.indexName;
+  const client = React.useMemo(() => {
+    if (connectionDetails?.apiKey === undefined || connectionDetails?.url === undefined) {
+      return undefined;
+    }
+    return new MeiliSearch({ host: connectionDetails.url, apiKey: connectionDetails.apiKey });
+  }, [connectionDetails?.apiKey, connectionDetails?.url]);
+
+  const libFilter = `context_key = "${libraryId}"`;
+
+  const { totalHits: componentCount } = useContentSearchResults({
+    client,
+    indexName,
+    searchKeywords,
+    extraFilter: [libFilter], // ToDo: Add filter for components when collection is implemented
+  });
+
+  const collectionCount = 0; // ToDo: Implement collections count
+
+  return {
+    componentCount,
+    collectionCount,
+  };
+};
+
+export const useCommitLibraryChanges = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: commitLibraryChanges,
+    onSettled: (_data, _error, libraryId) => {
+      queryClient.invalidateQueries({ queryKey: libraryQueryKeys.contentLibrary(libraryId) });
+    },
+  });
+};
+
+export const useRevertLibraryChanges = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: revertLibraryChanges,
+    onSettled: (_data, _error, libraryId) => {
+      queryClient.invalidateQueries({ queryKey: libraryQueryKeys.contentLibrary(libraryId) });
+    },
+  });
+};
diff --git a/src/library-authoring/index.scss b/src/library-authoring/index.scss
index 87c22f838e..e82ba16ab0 100644
--- a/src/library-authoring/index.scss
+++ b/src/library-authoring/index.scss
@@ -1 +1,2 @@
 @import "library-authoring/components/ComponentCard";
+@import "library-authoring/library-info/LibraryPublishStatus";
diff --git a/src/library-authoring/library-info/LibraryInfo.tsx b/src/library-authoring/library-info/LibraryInfo.tsx
index 31f76e59cc..c0e8bac04e 100644
--- a/src/library-authoring/library-info/LibraryInfo.tsx
+++ b/src/library-authoring/library-info/LibraryInfo.tsx
@@ -1,30 +1,28 @@
+import React from "react";
 import { Stack } from "@openedx/paragon";
 import { useIntl } from '@edx/frontend-platform/i18n';
-import React from "react";
 import messages from "./messages";
 import { convertToStringFromDateAndFormat } from "../../utils";
 import { COMMA_SEPARATED_DATE_FORMAT } from "../../constants";
+import LibraryPublishStatus from "./LibraryPublishStatus";
+import { ContentLibrary } from "../data/api";
 
 type LibraryInfoProps = {
-  orgName: string,
-  createdAt: Date,
-  updatedAt: Date,
+  library: ContentLibrary,
 };
 
-const LibraryInfo = ({ orgName, createdAt, updatedAt } : LibraryInfoProps) => {
+const LibraryInfo = ({ library } : LibraryInfoProps) => {
   const intl = useIntl();
 
   return (
     <Stack direction='vertical' gap={2.5}>
-      <div>
-        Published section
-      </div>
+      <LibraryPublishStatus library={library}/>
       <Stack direction='vertical'>
         <span className="font-weight-bold">
           {intl.formatMessage(messages.organizationSectionTitle)}
         </span>
         <span>
-          {orgName}
+          {library.org}
         </span>
       </Stack>
       <Stack>
@@ -36,7 +34,7 @@ const LibraryInfo = ({ orgName, createdAt, updatedAt } : LibraryInfoProps) => {
             {intl.formatMessage(messages.lastModifiedLabel)}
           </span>
           <span className="small">
-            {convertToStringFromDateAndFormat(updatedAt, COMMA_SEPARATED_DATE_FORMAT)}
+            {convertToStringFromDateAndFormat(library.updated, COMMA_SEPARATED_DATE_FORMAT)}
           </span>
         </Stack>
         <Stack>
@@ -44,7 +42,7 @@ const LibraryInfo = ({ orgName, createdAt, updatedAt } : LibraryInfoProps) => {
             {intl.formatMessage(messages.createdLabel)}
           </span>
           <span className="small">
-            {convertToStringFromDateAndFormat(createdAt, COMMA_SEPARATED_DATE_FORMAT)}
+            {convertToStringFromDateAndFormat(library.created, COMMA_SEPARATED_DATE_FORMAT)}
           </span>
         </Stack>
       </Stack>
diff --git a/src/library-authoring/library-info/LibraryInfoHeader.tsx b/src/library-authoring/library-info/LibraryInfoHeader.tsx
index f8ecc0a9ef..b25e742143 100644
--- a/src/library-authoring/library-info/LibraryInfoHeader.tsx
+++ b/src/library-authoring/library-info/LibraryInfoHeader.tsx
@@ -3,21 +3,21 @@ import { Icon, IconButton, Stack } from "@openedx/paragon";
 import { Edit } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import messages from "./messages";
+import { ContentLibrary } from "../data/api";
 
 type LibraryInfoHeaderProps = {
-  displayName: string,
-  canEditLibrary: boolean,
+  library: ContentLibrary,
 };
 
-const LibraryInfoHeader = ({ displayName, canEditLibrary} : LibraryInfoHeaderProps) => {
+const LibraryInfoHeader = ({ library } : LibraryInfoHeaderProps) => {
   const intl = useIntl();
 
   return (
     <Stack direction='horizontal'>
       <span className="font-weight-bold m-1.5">
-        {displayName}
+        {library.title}
       </span>
-      {canEditLibrary && (
+      {library.canEditLibrary && (
         <IconButton
           src={Edit}
           iconAs={Icon}
diff --git a/src/library-authoring/library-info/LibraryPublishStatus.scss b/src/library-authoring/library-info/LibraryPublishStatus.scss
new file mode 100644
index 0000000000..d505ccddbf
--- /dev/null
+++ b/src/library-authoring/library-info/LibraryPublishStatus.scss
@@ -0,0 +1,13 @@
+.library-publish-status {
+
+  &.draft-status {
+    background-color: #FDF3E9;
+    border-top: 4px solid #F4B57B;
+  }
+
+  &.published-status {
+    background-color: $info-100;
+    border-top: 4px solid $info-400;
+  }
+}
+
diff --git a/src/library-authoring/library-info/LibraryPublishStatus.tsx b/src/library-authoring/library-info/LibraryPublishStatus.tsx
new file mode 100644
index 0000000000..c11c61de57
--- /dev/null
+++ b/src/library-authoring/library-info/LibraryPublishStatus.tsx
@@ -0,0 +1,136 @@
+import React, { useCallback, useContext, useMemo } from "react";
+import { Button, Container, Stack } from "@openedx/paragon";
+import { ContentLibrary } from "../data/api";
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from "./messages";
+import classNames from 'classnames';
+import { useCommitLibraryChanges, useRevertLibraryChanges } from "../data/apiHook";
+import { ToastContext } from "../../generic/toast-context";
+import { convertToStringFromDateAndFormat } from "../../utils";
+import { COMMA_SEPARATED_DATE_FORMAT, TIME_FORMAT } from "../../constants";
+
+type LibraryPublishStatusProps = {
+  library: ContentLibrary,
+}
+
+const LibraryPublishStatus = ({ library } : LibraryPublishStatusProps) => {
+  const intl = useIntl();
+  const commitLibraryChanges = useCommitLibraryChanges();
+  const revertLibraryChanges = useRevertLibraryChanges();
+  const { showToast } = useContext(ToastContext);
+
+  const commit = useCallback(() => {
+    commitLibraryChanges.mutateAsync(library.id)
+    .then(() => {
+      showToast(intl.formatMessage(messages.publishSuccessMsg));
+    }).catch(() => {
+      showToast(intl.formatMessage(messages.publishErrorMsg));
+    });
+  }, []);
+
+  const revert = useCallback(() => {
+    revertLibraryChanges.mutateAsync(library.id)
+    .then(() => {
+      showToast(intl.formatMessage(messages.revertSuccessMsg));
+    }).catch(() => {
+      showToast(intl.formatMessage(messages.revertErrorMsg));
+    });
+  }, []);
+
+  const {
+    isPublished,
+    statusMessage,
+    extraStatusMessage,
+    bodyMessage,
+  } = useMemo(() => {
+    let isPublished : boolean;
+    let statusMessage : string;
+    let extraStatusMessage : string | undefined = undefined;
+    let bodyMessage : string | undefined = undefined;
+    const buildDraftBodyMessage = (() => {
+      if (library.lastDraftCreatedBy) {
+        return intl.formatMessage(messages.lastDraftMsg, {
+          date: <b>{convertToStringFromDateAndFormat(library.lastDraftCreated, COMMA_SEPARATED_DATE_FORMAT)}</b>,
+          time: <b>{convertToStringFromDateAndFormat(library.lastDraftCreated, TIME_FORMAT)}</b>,
+          user: <b>{library.lastDraftCreatedBy}</b>,
+        });
+      } else {
+        return intl.formatMessage(messages.lastDraftMsgWithoutUser, {
+          date: <b>{convertToStringFromDateAndFormat(library.lastDraftCreated, COMMA_SEPARATED_DATE_FORMAT)}</b>,
+          time: <b>{convertToStringFromDateAndFormat(library.lastDraftCreated, TIME_FORMAT)}</b>,
+        });
+      }
+    });
+
+    if (!library.lastPublished) {
+      // Library is never published (new)
+      isPublished = false;
+      statusMessage = intl.formatMessage(messages.draftStatusLabel);
+      extraStatusMessage = intl.formatMessage(messages.neverPublishedLabel);
+      bodyMessage = buildDraftBodyMessage();
+    } else if (library.hasUnpublishedChanges || library.hasUnpublishedDeletes) {
+      // Library is on Draft state
+      isPublished = false;
+      statusMessage = intl.formatMessage(messages.draftStatusLabel);
+      extraStatusMessage = intl.formatMessage(messages.unpublishedStatusLabel);
+      bodyMessage = buildDraftBodyMessage();
+    } else {
+      // Library is published
+      isPublished = true;
+      statusMessage = intl.formatMessage(messages.publishedStatusLabel);
+      if (library.publishedBy) {
+        bodyMessage = intl.formatMessage(messages.lastPublishedMsg, {
+          date: <b>{convertToStringFromDateAndFormat(library.lastPublished, COMMA_SEPARATED_DATE_FORMAT)}</b>,
+          time: <b>{convertToStringFromDateAndFormat(library.lastPublished, TIME_FORMAT)}</b>,
+          user: <b>{library.publishedBy}</b>,
+        })
+      } else {
+        bodyMessage = intl.formatMessage(messages.lastPublishedMsgWithoutUser, {
+          date: <b>{convertToStringFromDateAndFormat(library.lastPublished, COMMA_SEPARATED_DATE_FORMAT)}</b>,
+          time: <b>{convertToStringFromDateAndFormat(library.lastPublished, TIME_FORMAT)}</b>,
+        })
+      }
+    }
+    return {
+      isPublished,
+      statusMessage,
+      extraStatusMessage,
+      bodyMessage,
+    }
+  }, [library])
+  
+  return (
+    <Stack>
+      <Container className={classNames("library-publish-status", {
+        "draft-status": !isPublished,
+        "published-status": isPublished,
+      })}>
+        <span className="font-weight-bold">
+          {statusMessage}
+        </span>
+        { extraStatusMessage && (
+          <span className="ml-1">
+            {extraStatusMessage}
+          </span>
+        )}
+      </Container>
+      <Container>
+        <Stack>
+          <span>
+            {bodyMessage}
+          </span>
+          <Button disabled={isPublished} onClick={commit}>
+            {intl.formatMessage(messages.publishButtonLabel)}
+          </Button>
+          <div className='d-flex justify-content-end'>
+            <Button disabled={isPublished} variant='link' onClick={revert}>
+              {intl.formatMessage(messages.discardChangesButtonLabel)}
+            </Button>  
+          </div>
+        </Stack>
+      </Container>
+    </Stack>
+  );
+};
+
+export default LibraryPublishStatus;
diff --git a/src/library-authoring/library-info/messages.ts b/src/library-authoring/library-info/messages.ts
index d5854ff77d..2ec7b8db59 100644
--- a/src/library-authoring/library-info/messages.ts
+++ b/src/library-authoring/library-info/messages.ts
@@ -9,23 +9,93 @@ const messages = defineMessages({
   organizationSectionTitle: {
     id: 'course-authoring.library-authoring.sidebar.info.organization.title',
     defaultMessage: 'Organization',
-    description: 'Title for Organization section in Library info sidebar.'
+    description: 'Title for Organization section in Library info sidebar.',
   },
   libraryHistorySectionTitle: {
     id: 'course-authoring.library-authoring.sidebar.info.history.title',
     defaultMessage: 'Library History',
-    description: 'Title for Library History section in Library info sidebar.'
+    description: 'Title for Library History section in Library info sidebar.',
   },
   lastModifiedLabel: {
     id: 'course-authoring.library-authoring.sidebar.info.history.last-modified',
     defaultMessage: 'Last Modified',
-    description: 'Last Modified label used in Library History section.'
+    description: 'Last Modified label used in Library History section.',
   },
   createdLabel: {
     id: 'course-authoring.library-authoring.sidebar.info.history.created',
     defaultMessage: 'Created',
-    description: 'Created label used in Library History section.'
-  }, 
+    description: 'Created label used in Library History section.',
+  },
+  draftStatusLabel: {
+    id: 'course-authoring.library-authoring.sidebar.info.publish-status.draft',
+    defaultMessage: 'Draft',
+    description: 'Label in library info sidebar when the library is on draft status',
+  },
+  neverPublishedLabel: {
+    id: 'course-authoring.library-authoring.sidebar.info.publish-status.never',
+    defaultMessage: '(Never Published)',
+    description: 'Label in library info sidebar when the library is never published',
+  },
+  unpublishedStatusLabel: {
+    id: 'course-authoring.library-authoring.sidebar.info.publish-status.unpublished',
+    defaultMessage: '(Unpublished Changes)',
+    description: 'Label in library info sidebar when the library has unpublished changes',
+  },
+  publishedStatusLabel: {
+    id: 'course-authoring.library-authoring.sidebar.info.publish-status.published',
+    defaultMessage: 'Published',
+    description: 'Label in library info sidebar when the library is on published status',
+  },
+  publishButtonLabel: {
+    id: 'course-authoring.library-authoring.sidebar.info.publish-status.publish-button',
+    defaultMessage: 'Publish',
+    description: 'Label of publish button for a library.',
+  },
+  discardChangesButtonLabel: {
+    id: 'course-authoring.library-authoring.sidebar.info.publish-status.discard-button',
+    defaultMessage: 'Discard Changes',
+    description: 'Label of discard changes button for a library.',
+  },
+  lastPublishedMsg: {
+    id: 'course-authoring.library-authoring.sidebar.info.publish-status.last-published',
+    defaultMessage: 'Last published on {date} at {time} UTC by {user}.',
+    description: 'Body meesage of the library info sidebar when library is published.',
+  },
+  lastPublishedMsgWithoutUser: {
+    id: 'course-authoring.library-authoring.sidebar.info.publish-status.last-published-no-user',
+    defaultMessage: 'Last published on {date} at {time} UTC.',
+    description: 'Body meesage of the library info sidebar when library is published.',
+  },
+  lastDraftMsg: {
+    id: 'course-authoring.library-authoring.sidebar.info.publish-status.last-draft',
+    defaultMessage: 'Draft saved on {date} at {time} UTC by {user}.',
+    description: 'Body meesage of the library info sidebar when library is on draft status.',
+  },
+  lastDraftMsgWithoutUser: {
+    id: 'course-authoring.library-authoring.sidebar.info.publish-status.last-draft-no-user',
+    defaultMessage: 'Draft saved on {date} at {time} UTC.',
+    description: 'Body meesage of the library info sidebar when library is on draft status.',
+  },
+  publishSuccessMsg: {
+    id: 'course-authoring.library-authoring.publish.success',
+    defaultMessage: 'Library published successfully',
+    description: 'Message when the library is published successfully.',
+  },
+  publishErrorMsg: {
+    id: 'course-authoring.library-authoring.publish.error',
+    defaultMessage: 'There was an error publishing the library.',
+    description: 'Message when there is an error when publishing the library.',
+  },
+  revertSuccessMsg: {
+    id: 'course-authoring.library-authoring.revert.success',
+    defaultMessage: 'Library changes reverted successfully',
+    description: 'Message when the library changes are reverted successfully.',
+  },
+  revertErrorMsg: {
+    id: 'course-authoring.library-authoring.publish.error',
+    defaultMessage: 'There was an error reverting changes in the library.',
+    description: 'Message when there is an error when reverting changes in the library.',
+  },
 });
 
 export default messages;
diff --git a/src/library-authoring/library-sidebar/LibrarySidebar.tsx b/src/library-authoring/library-sidebar/LibrarySidebar.tsx
index 0ec0b487c6..48a3ba7efe 100644
--- a/src/library-authoring/library-sidebar/LibrarySidebar.tsx
+++ b/src/library-authoring/library-sidebar/LibrarySidebar.tsx
@@ -31,17 +31,13 @@ const LibrarySidebar = ({library}: LibrarySidebarProps) => {
 
   const bodyComponentMap = {
     'add-content': <AddContentContainer />,
-    'info': <LibraryInfo
-              orgName={library.org}
-              createdAt={library.created}
-              updatedAt={library.updated}
-            />,
+    'info': <LibraryInfo library={library}/>,
     unknown: null,
   };
 
   const headerComponentMap = {
     'add-content': <AddContentHeader />,
-    info: <LibraryInfoHeader displayName={library.title} canEditLibrary={library.canEditLibrary} />,
+    info: <LibraryInfoHeader library={library} />,
     unknown: null,
   };