diff --git a/ui/src/cmsData/login.json b/ui/src/cmsData/login.json
index afbe99fa..0c6bd9df 100644
--- a/ui/src/cmsData/login.json
+++ b/ui/src/cmsData/login.json
@@ -3,7 +3,7 @@
   "locale": "en-us",
   "uid": "blt058427c4131df78a",
   "_in_progress": false,
-  "copyrightText": "© 2023-2024 Contentstack Inc. All rights reserved.",
+  "copyrightText": "Contentstack Inc. All rights reserved.",
   "created_at": "2024-02-22T11:20:53.435Z",
   "created_by": "bltb317ebe35429ebe6",
   "heading": "Stacks Not Suites",
diff --git a/ui/src/components/AccountPage/index.tsx b/ui/src/components/AccountPage/index.tsx
index a5a4d447..5cb8a746 100644
--- a/ui/src/components/AccountPage/index.tsx
+++ b/ui/src/components/AccountPage/index.tsx
@@ -10,6 +10,9 @@ import './index.scss';
 const AccountPage = (props: AccountObj): JSX.Element => {
   const { heading, subtitle, copyrightText } = props.data;
 
+  const currentYear = new Date().getFullYear();
+  const previousYear = currentYear - 1;
+
   return (
     // eslint-disable-next-line react/no-unknown-property
     <div className="AccountPage" heap-ignore="true">
@@ -32,8 +35,8 @@ const AccountPage = (props: AccountObj): JSX.Element => {
         <span className="AccountPage__circle AccountPage__circle_seven"></span>
       </div>
       <div className="AccountPage__action">
-        <div className="AccountPage__content">{props.children}</div>
-        <p className='copyright_text'>{copyrightText}</p>
+        <div className="AccountPage__content">{props?.children}</div>
+        <p className='copyright_text'>{`© ${previousYear}-${currentYear} ${copyrightText}`}</p>
       </div>
     </div>
   );
diff --git a/ui/src/components/ContentMapper/contentMapper.interface.ts b/ui/src/components/ContentMapper/contentMapper.interface.ts
index be0a6824..77287cd1 100644
--- a/ui/src/components/ContentMapper/contentMapper.interface.ts
+++ b/ui/src/components/ContentMapper/contentMapper.interface.ts
@@ -47,6 +47,7 @@ export interface ContentType {
 
 export interface FieldMapType {
   ContentstackFieldType: string;
+  child?: FieldMapType[] | undefined;
   backupFieldType: string;
   contentstackField: string;
   contentstackFieldUid: string;
diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx
index 4435f6fd..ffd9b51a 100644
--- a/ui/src/components/ContentMapper/index.tsx
+++ b/ui/src/components/ContentMapper/index.tsx
@@ -140,6 +140,8 @@ const ContentMapper = () => {
 
   const [searchContentType, setSearchContentType] = useState('');
 
+  const [selectedFields, setSelectedFields] = useState<FieldMapType[]>([]);
+
   /** ALL HOOKS Here */
   const { projectId = '' } = useParams();
   const navigate = useNavigate();
@@ -387,6 +389,7 @@ const ContentMapper = () => {
   interface UidMap {
     [key: string]: boolean;
   }
+
   const rowIds = tableData.reduce<UidMap>((acc, item) => {
     acc[item?.id] = true;
     return acc;
@@ -474,7 +477,7 @@ const ContentMapper = () => {
             maxWidth="290px"
             isClearable={false}
             options={option}
-            // isDisabled={data?.otherCmsField === 'title' || data?.otherCmsField === 'url'}
+            isDisabled={data?.ContentstackFieldType === "group"}
           />
         </div>
         <Icon
@@ -652,6 +655,7 @@ const ContentMapper = () => {
       selectedContentType?.otherCmsUid &&
       OtherContentType?.label
     ) {
+      
       setcontentTypeMapped((prevSelected) => ({
         ...prevSelected,
         [otherCmsTitle]: OtherContentType?.label
@@ -867,10 +871,11 @@ const ContentMapper = () => {
             <InfiniteScrollTable
               loading={loading}
               canSearch={true}
-              data={tableData}
+              data={tableData?.length ? [...tableData] : []}
               columns={columns}
               uniqueKey={'id'}
-              isRowSelect={true}
+              isRowSelect
+              // fullRowSelect
               itemStatusMap={itemStatusMap}
               totalCounts={totalCounts}
               searchPlaceholder={searchPlaceholder}
@@ -903,7 +908,6 @@ const ContentMapper = () => {
                 ),
                 showExportCta: true
               }}
-              rowDisableProp={{ key: '_invalid', value: true }}
             />
           </div>
 
diff --git a/ui/src/components/SchemaModal/index.scss b/ui/src/components/SchemaModal/index.scss
index 2d608fc6..27d53d8e 100644
--- a/ui/src/components/SchemaModal/index.scss
+++ b/ui/src/components/SchemaModal/index.scss
@@ -1,16 +1,20 @@
 @import '../../scss/variables';
 
+.schema {
+  min-height: 290px;
+}
 .entries-outline {
+  margin-left: 0.8rem;
   ul {
     padding: 0.625rem;
     padding-bottom: 0.3125rem;
     padding-top: 0;
     transition: opacity 0.2s linear;
     li {
-      color: #475161;
+      color: $color-font-base;
       cursor: pointer;
-      font-size: 1rem;
-      font-weight: 500;
+      font-size: $size-font-large;
+      font-weight: $font-weight-medium;
       padding: 0;
       white-space: nowrap;
       .iconsholder {
@@ -27,16 +31,56 @@
               path {
                 stroke: $color-brand-primary-base;
               }
+              &.chevron {
+                path {
+                  fill: $color-brand-primary-base;
+                  stroke: $color-brand-primary-base;
+                }
+              }
             }
           }
         }
+        .icons {
+          * {
+            pointer-events: none;
+            stroke: $color-font-active;
+          }
+          &.nested {
+            margin-left: -0.9375rem;
+          }
+        } 
+        &.active {
+          .icons {
+            svg {
+              path {
+                stroke: $color-brand-primary-base;
+              }
+              &.chevron {
+                path {
+                  fill: $color-brand-primary-base;
+                  stroke: $color-brand-primary-base;
+                }
+              }
+            }
+          }
+          & > .title {
+            color: $color-brand-primary-base;
+            font-weight: $font-weight-semi-bold;
+          }
+        }
       }
       .title {
-        color: #475161;
-        font-weight: 400;
+        color: $color-font-base;
+        font-size: $size-font-large;
+        font-weight: $font-weight-regular;
+        line-height: $line-height-reset!important;
         opacity: 1;
+        overflow: hidden;
+        padding: 0.625rem 0;
+        text-overflow: ellipsis;
         text-transform: capitalize;
         transition: opacity 0.5s linear, width 300ms linear;
+        white-space: nowrap;
         width: 12.5rem;
       }
       .icons {
@@ -45,9 +89,34 @@
         justify-content: flex-start;
         padding: 0.625rem 0;
         svg {
-          margin-right: 0.625rem;
+          margin-right: 0.375rem;
+          &.field-icon {
+            max-width: 12px;
+          }
         }
       }
+      .chevron {
+        display: inline-block;
+        transition: all 0.3s linear;
+        &.close {
+          transform: rotate(-90deg);
+      }
+      }
+      & > ul {
+        padding-left: 0.125rem;
+        & > li {
+          & > ul {
+            padding-left: 1.5625rem;
+          }
+        }
+      }
+    }
+    &.close {
+      height: 0 !important;
+      opacity: 0 !important;
+      overflow: hidden;
+      padding: 0 0.625rem;
+      transition: opacity 0.8s linear;
     }
   }
 }
diff --git a/ui/src/components/SchemaModal/index.tsx b/ui/src/components/SchemaModal/index.tsx
index 84335857..bfc28be9 100644
--- a/ui/src/components/SchemaModal/index.tsx
+++ b/ui/src/components/SchemaModal/index.tsx
@@ -9,6 +9,7 @@ import { FieldMapType } from '../ContentMapper/contentMapper.interface';
 // Styles
 import './index.scss';
 
+// Function for get icons
 const getTopLevelIcons = (field: FieldMapType) => {
   const icons: Icons = {
     title: 'StarSmall',
@@ -61,7 +62,7 @@ const getTopLevelIcons = (field: FieldMapType) => {
     return icons['rte'];
   }
 
-  if (field?.ContentstackFieldType === 'JSON Rich Text Editor') {
+  if (field?.ContentstackFieldType === 'JSON Rich Text Editor' || field?.ContentstackFieldType === 'json') {
     return icons['jsonRte'];
   }
 
@@ -77,7 +78,7 @@ const getTopLevelIcons = (field: FieldMapType) => {
     return icons['reference'];
   }
 
-  if (!field.ContentstackFieldType) {
+  if (!field?.ContentstackFieldType) {
     return icons['blocks'];
   }
 
@@ -85,31 +86,156 @@ const getTopLevelIcons = (field: FieldMapType) => {
 };
 
 const TreeView = ({ schema = [] }: schemaType) => {
-  const [list, setList] = useState<FieldMapType[]>([]);
+  const [nestedList, setNestedList] = useState<FieldMapType[]>([]);
 
   useEffect(() => {
-    setList(schema);
+    let groupId = ''
+    const data: FieldMapType[] = []
+    schema?.forEach((field) => {
+      if (field?.ContentstackFieldType === "group") {
+        groupId = field?.uid 
+        data?.push({...field, child: []})
+      }
+      else{
+        if(field?.uid?.startsWith(groupId+'.')){
+          const obj = data[data?.length - 1]
+          if(Object.prototype.hasOwnProperty.call(obj, 'child')){
+            obj?.child?.push(field)
+          }
+          else{
+            obj.child = [field]
+          }
+        }
+        else{
+          data.push({...field, child: []})
+        }
+      }
+    });
+    setNestedList(data);
   }, [schema]);
 
+  // Check if schema is nested
+  const hasNestedValue = (field: FieldMapType) => field && field?.child && field?.child?.length > 0;
+
+  // Remove Group name from its child
+  const getChildFieldName = (text?: string, groupName?: string) => {
+    if (text?.startsWith(groupName+' > ')) {
+      return text?.replace(groupName+' > ', '')
+    }
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    if (document?.querySelector('.iconsholder.active')) {
+      document?.querySelector('.iconsholder.active')
+        ?.classList.remove('active');
+    }
+    if (event?.target instanceof HTMLElement) {
+      if (event?.target?.classList.contains('icons')) {
+        if (event?.target?.parentElement?.parentElement?.querySelector('ul')) {
+          event?.target?.parentElement?.parentElement
+            ?.querySelector('ul')
+            ?.classList.toggle('close');
+        }
+
+        if (event?.target?.querySelector('.chevron')) {
+          event?.target?.querySelector('.chevron')?.classList.toggle('close');
+        }
+      }
+
+      event?.target?.parentElement?.classList.add('active');
+    }
+  };
+  
+  const generateNestedOutline = (item: FieldMapType, index: number) => {
+    return (
+      <ul
+        className={item && item?.child && item?.child?.length > 0 ? '' : 'close'}
+      >
+        {item?.child?.map((field: FieldMapType, nestedIndex: number) => {
+          let fieldname = '';
+          if (field?.uid) {
+            fieldname = field?.uid?.replace(/\.+/g, '_');
+          }
+          return (
+            <li key={`${field?.otherCmsField}${field?.ContentstackFieldType}`}>
+              <div
+                data-outlinename={fieldname}
+                onClick={(e: React.MouseEvent<HTMLElement>) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleClick(e);
+                }}
+                className={`iconsholder`}
+              >
+                <span className="icons">
+                  {hasNestedValue(field) && (
+                    <Icon
+                      className={`chevron ${index ? '' : 'close'} `}
+                      icon="ChevronExtraSmall"
+                    />
+                  )}
+                  <Icon icon={getTopLevelIcons(field) as string} className='field-icon' />
+                </span>
+                <span className="title">
+                  {getChildFieldName(field?.otherCmsField, item?.otherCmsField)}
+                </span>
+              </div>
+
+              {hasNestedValue(field) &&
+                generateNestedOutline(field, nestedIndex)}
+            </li>
+          )
+        })}
+      </ul>
+    );
+  };
+
   return (
     <div className="schema">
-      <div className={`PageLayout__leftSidebar-wrapper pinned`}>
-        <div className="entries-outline">
-          {list?.length > 0 && (
-            <ul>
-              {list?.map((item: FieldMapType) => (
-                <li key={`${item?.otherCmsField}${item?.ContentstackFieldType}`}>
-                  <div className={`iconsholder`}>
-                    <span className={`icons`}>
-                      <Icon className={'fieldicon'} icon={getTopLevelIcons(item) as string} />
-                    </span>
-                    <span className={`title`}>{item?.otherCmsField}</span>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
+      <div className="entries-outline">
+        {nestedList?.length > 0 && (
+          <ul>
+            {nestedList?.map((item: FieldMapType, index: number) => {
+              let outlineName = "";
+              if (item?.uid) {
+                outlineName = item?.uid?.replace(/\.+/g, "_");
+              }
+              const hasNested = hasNestedValue(item);
+              
+              return (
+              <li key={`${item?.otherCmsField}${item?.ContentstackFieldType}`} className={`${hasNested ? 'nested-child' : ''}`}>
+                <div 
+                  data-outlinename={outlineName} 
+                  className={`iconsholder`}
+                  onClick={(e: React.MouseEvent<HTMLElement>) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleClick(e);
+                  }}
+                >
+                  <span 
+                    className={`icons ${hasNested ? "nested" : ""}`} 
+                    onMouseOver={() => {
+                      document
+                        ?.querySelector('.PageLayout__leftSidebar')
+                        ?.classList.add('hovered');
+                    }}
+                  >
+                    {hasNested && (
+                      <Icon className={'chevron'} icon="ChevronExtraSmall" />
+                    )}
+                    <Icon
+                      className={"fieldicon"}
+                      icon={getTopLevelIcons(item) as string}
+                    />
+                  </span>
+                  <span className={`title`}>{item?.otherCmsField}</span>
+                </div>
+                {hasNested && generateNestedOutline(item, index)}
+              </li>
+            )})}
+          </ul>
+        )}
       </div>
     </div>
   );