diff --git a/system-contract-dapp-playground/src/app/hedera/erc-20/page.tsx b/system-contract-dapp-playground/src/app/hedera/erc-20/page.tsx
new file mode 100644
index 000000000..0d4186e67
--- /dev/null
+++ b/system-contract-dapp-playground/src/app/hedera/erc-20/page.tsx
@@ -0,0 +1,27 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+const ERC20 = () => {
+  return (
+    <div className="text-white w-full flex justify-center items-center text-[3rem]">ERC20</div>
+  );
+};
+
+export default ERC20;
diff --git a/system-contract-dapp-playground/src/app/hedera/erc-721/page.tsx b/system-contract-dapp-playground/src/app/hedera/erc-721/page.tsx
new file mode 100644
index 000000000..212f7db48
--- /dev/null
+++ b/system-contract-dapp-playground/src/app/hedera/erc-721/page.tsx
@@ -0,0 +1,27 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+const ERC721 = () => {
+  return (
+    <div className="text-white w-full flex justify-center items-center text-[3rem]">ERC721</div>
+  );
+};
+
+export default ERC721;
diff --git a/system-contract-dapp-playground/src/app/hedera/exchange-rate-hip-475/page.tsx b/system-contract-dapp-playground/src/app/hedera/exchange-rate-hip-475/page.tsx
new file mode 100644
index 000000000..7d487ce2a
--- /dev/null
+++ b/system-contract-dapp-playground/src/app/hedera/exchange-rate-hip-475/page.tsx
@@ -0,0 +1,27 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+const HIP475 = () => {
+  return (
+    <div className="text-white w-full flex justify-center items-center text-[3rem]">HIP475</div>
+  );
+};
+
+export default HIP475;
diff --git a/system-contract-dapp-playground/src/app/hedera/hrc-719/page.tsx b/system-contract-dapp-playground/src/app/hedera/hrc-719/page.tsx
new file mode 100644
index 000000000..bd8025b96
--- /dev/null
+++ b/system-contract-dapp-playground/src/app/hedera/hrc-719/page.tsx
@@ -0,0 +1,27 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+const HRC719 = () => {
+  return (
+    <div className="text-white w-full flex justify-center items-center text-[3rem]">HRC719</div>
+  );
+};
+
+export default HRC719;
diff --git a/system-contract-dapp-playground/src/app/hedera/hts-hip-206/page.tsx b/system-contract-dapp-playground/src/app/hedera/hts-hip-206/page.tsx
new file mode 100644
index 000000000..36b176b71
--- /dev/null
+++ b/system-contract-dapp-playground/src/app/hedera/hts-hip-206/page.tsx
@@ -0,0 +1,27 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+const HTS206 = () => {
+  return (
+    <div className="text-white w-full flex justify-center items-center text-[3rem]">HTS206</div>
+  );
+};
+
+export default HTS206;
diff --git a/system-contract-dapp-playground/src/app/hedera/layout.tsx b/system-contract-dapp-playground/src/app/hedera/layout.tsx
new file mode 100644
index 000000000..032e415d4
--- /dev/null
+++ b/system-contract-dapp-playground/src/app/hedera/layout.tsx
@@ -0,0 +1,46 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import Navbar from '@/components/navbar';
+import Footer from '@/components/footer';
+import LeftSideBar from '@/components/leftSideBar';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <main className="flex flex-col min-h-screen">
+      <Navbar />
+      <div className="flex flex-1 px-6 overflow-x-hidden">
+        {/* <LeftSidebar /> */}
+        <div>
+          <LeftSideBar />
+        </div>
+        {/* <Main children /> */}
+        <div className="flex-1">{children}</div>
+
+        {/* <RightSidebar /> */}
+        <div>
+          <div className="w-72" />
+        </div>
+      </div>
+
+      <Footer />
+    </main>
+  );
+}
diff --git a/system-contract-dapp-playground/src/app/(protected)/overview/page.tsx b/system-contract-dapp-playground/src/app/hedera/overview/page.tsx
similarity index 83%
rename from system-contract-dapp-playground/src/app/(protected)/overview/page.tsx
rename to system-contract-dapp-playground/src/app/hedera/overview/page.tsx
index 83af50940..72a6ea860 100644
--- a/system-contract-dapp-playground/src/app/(protected)/overview/page.tsx
+++ b/system-contract-dapp-playground/src/app/hedera/overview/page.tsx
@@ -18,12 +18,10 @@
  *
  */
 
+import OverviewSection from '@/sections/overview';
+
 const Overview = () => {
-  return (
-    <div className="text-white h-full w-full flex justify-center items-center text-[3rem]">
-      Overview
-    </div>
-  );
+  return <OverviewSection />;
 };
 
 export default Overview;
diff --git a/system-contract-dapp-playground/src/app/hedera/prng-hip-351/page.tsx b/system-contract-dapp-playground/src/app/hedera/prng-hip-351/page.tsx
new file mode 100644
index 000000000..57a19c699
--- /dev/null
+++ b/system-contract-dapp-playground/src/app/hedera/prng-hip-351/page.tsx
@@ -0,0 +1,27 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+const HIP351 = () => {
+  return (
+    <div className="text-white w-full flex justify-center items-center text-[3rem]">HIP351</div>
+  );
+};
+
+export default HIP351;
diff --git a/system-contract-dapp-playground/src/app/layout.tsx b/system-contract-dapp-playground/src/app/layout.tsx
index 4a66857e5..47b8fcf6f 100644
--- a/system-contract-dapp-playground/src/app/layout.tsx
+++ b/system-contract-dapp-playground/src/app/layout.tsx
@@ -20,8 +20,6 @@
 
 import '@/styles/globals.css';
 import StyreneAWebFont from '@/fonts';
-import Navbar from '@/components/navbar';
-import Footer from '@/components/footer';
 import dappMetadata from '@/utils/metadata';
 import ChakraUIProviders from '@/libs/chakra/provider';
 import BgGradient from '@/components/background-gradients';
@@ -30,18 +28,12 @@ import BgGradient from '@/components/background-gradients';
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" className={`${StyreneAWebFont.variable}`}>
-      <body>
+      <body className="bg-primary font-styrene">
         <ChakraUIProviders>
-          <main className="bg-primary overflow-hidden font-styrene">
-            <div className="relative h-screen 2xl:max-w-[100rem] 2xl:mx-auto">
-              <main className="bg-primary overflow-hidden relative h-screen flex flex-col">
-                <Navbar />
-                {children}
-                <Footer />
-              </main>
-              <BgGradient />
-            </div>
-          </main>
+          <div className="relative 2xl:max-w-[100rem] 2xl:mx-auto">
+            {children}
+            <BgGradient />
+          </div>
         </ChakraUIProviders>
       </body>
     </html>
diff --git a/system-contract-dapp-playground/src/app/page.tsx b/system-contract-dapp-playground/src/app/page.tsx
index 95daf2272..b6a0f9c0f 100644
--- a/system-contract-dapp-playground/src/app/page.tsx
+++ b/system-contract-dapp-playground/src/app/page.tsx
@@ -17,8 +17,16 @@
  * limitations under the License.
  *
  */
+import Footer from '@/components/footer';
+import Navbar from '@/components/navbar';
 import LandingPage from '@/sections/landing';
 
 export default function Home() {
-  return <LandingPage />;
+  return (
+    <main className="h-screen flex flex-col">
+      <Navbar />
+      <LandingPage />;
+      <Footer />
+    </main>
+  );
 }
diff --git a/system-contract-dapp-playground/src/components/background-gradients/index.tsx b/system-contract-dapp-playground/src/components/background-gradients/index.tsx
index 9418432de..78894e42b 100644
--- a/system-contract-dapp-playground/src/components/background-gradients/index.tsx
+++ b/system-contract-dapp-playground/src/components/background-gradients/index.tsx
@@ -21,10 +21,10 @@
 const BgGradient = () => {
   return (
     <div className="bg-white 2xl:max-w-[100rem] 2xl:mx-auto">
-      <div className="gradient-01 absolute -top-40 -left-16" />
-      <div className="gradient-02 absolute -top-40 -left-32" />
-      <div className="gradient-03 absolute -top-[23rem] right-64" />
-      <div className="gradient-04 absolute -bottom-[40rem] left-0 right-0 m-auto" />
+      <div className="gradient-01 absolute -top-40 -left-16 -z-10" />
+      <div className="gradient-02 absolute -top-40 -left-32 -z-10" />
+      <div className="gradient-03 absolute -top-[23rem] right-64 -z-10" />
+      <div className="gradient-04 -z-10" />
     </div>
   );
 };
diff --git a/system-contract-dapp-playground/src/components/footer/index.tsx b/system-contract-dapp-playground/src/components/footer/index.tsx
index efef1502d..58b2e9679 100644
--- a/system-contract-dapp-playground/src/components/footer/index.tsx
+++ b/system-contract-dapp-playground/src/components/footer/index.tsx
@@ -31,14 +31,16 @@ const Footer = () => {
       initial={{ opacity: 0 }}
       whileInView={{ opacity: 1 }}
       transition={{
-        delay: 0.6,
-        duration: 0.6,
+        delay: 0.3,
+        duration: 0.3,
       }}
-      className="text-white px-6 w-full z-40 sm:px-16 md:px-24"
+      viewport={{ once: true }}
+      className="text-white px-6 w-full z-40 flex flex-col items-center"
     >
+      <hr className="w-[100vw] border-t border-white/40" />
       <div
-        className="w-full flex flex-col gap-6 border-t-[1px] border-white/30 py-3
-                  md:flex-row md:justify-between md:items-center md:pt-9 md:pb-6"
+        className="w-full flex flex-col gap-6 py-3
+                  md:flex-row md:justify-between md:items-center md:py-6 md:pb-3"
       >
         {/* Logo & copyright*/}
         <div className="flex flex-col gap-1 justify-center items-center md:items-start">
diff --git a/system-contract-dapp-playground/src/components/leftSideBar/index.tsx b/system-contract-dapp-playground/src/components/leftSideBar/index.tsx
new file mode 100644
index 000000000..d16a6f02f
--- /dev/null
+++ b/system-contract-dapp-playground/src/components/leftSideBar/index.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { usePathname } from 'next/navigation';
+import { LEFT_SIDE_BAR_ITEMS } from '@/utils/constants';
+
+const LeftSideBar = () => {
+  const pathname = usePathname();
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      transition={{
+        delay: 0.3,
+        duration: 0.3,
+      }}
+      viewport={{ once: true }}
+      className="w-72 h-full border-r border-white/30 text-white flex flex-col gap-3 pt-7 text-lg font-light tracking-tight leading-6 pr-2"
+    >
+      {LEFT_SIDE_BAR_ITEMS.map((item) => (
+        <Link
+          key={item.name}
+          href={item.path}
+          className={`${
+            pathname.includes(item.path) && `bg-black/30 font-normal text-hedera-purple`
+          } py-3 px-3 rounded-lg hover:bg-black/30 transition duration-300`}
+        >
+          {item.name}
+        </Link>
+      ))}
+    </motion.div>
+  );
+};
+
+export default LeftSideBar;
diff --git a/system-contract-dapp-playground/src/components/navbar/index.tsx b/system-contract-dapp-playground/src/components/navbar/index.tsx
index fead05791..1e050ca33 100644
--- a/system-contract-dapp-playground/src/components/navbar/index.tsx
+++ b/system-contract-dapp-playground/src/components/navbar/index.tsx
@@ -73,14 +73,18 @@ const Navbar = () => {
 
   return (
     <motion.nav
-      variants={navVariants}
-      initial="hidden"
-      whileInView="show"
-      className="px-6 pt-6 sm:px-16 md:px-24 md:pt-9 flex justify-between items-center w-full z-50"
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      transition={{
+        delay: 0.3,
+        duration: 0.3,
+      }}
+      viewport={{ once: true }}
+      className="px-6 pt-6 flex flex-col justify-between items-center z-50"
     >
       {/* Protected Navbar */}
       {isConnected ? (
-        <div className="grid grid-rows-2 sm:grid-cols-2 lg:grid-cols-3 w-full justify-center gap-3">
+        <div className="grid grid-rows-2 sm:grid-rows-1 sm:grid-cols-2 lg:grid-cols-3 w-full justify-center gap-3 pb-6">
           {/* Logo */}
           <Link href={'/'} className="flex gap-3 items-center justify-center sm:justify-start">
             <Image
@@ -137,7 +141,13 @@ const Navbar = () => {
           </div>
         </div>
       ) : (
-        <>
+        <motion.div
+          variants={navVariants}
+          initial="hidden"
+          whileInView="show"
+          viewport={{ once: true }}
+          className="flex justify-between w-full"
+        >
           {/* Unprotected Navbar */}
           <Link href={'/'}>
             {/* Logo */}
@@ -152,9 +162,11 @@ const Navbar = () => {
 
           {/* Text logo */}
           <p className="text-white text-[2rem]">Hedera</p>
-        </>
+        </motion.div>
       )}
 
+      {isConnected && <hr className="w-[100vw] border-t border-white/40" />}
+
       {didWalletPop && (
         <WalletPopup
           network={network}
diff --git a/system-contract-dapp-playground/src/middleware.ts b/system-contract-dapp-playground/src/middleware.ts
index 13f544488..13aa7d7e5 100644
--- a/system-contract-dapp-playground/src/middleware.ts
+++ b/system-contract-dapp-playground/src/middleware.ts
@@ -27,7 +27,7 @@ export async function middleware(request: NextRequest) {
   const { pathname } = request.nextUrl;
 
   if (isConnected && pathname === '/') {
-    return NextResponse.redirect(new URL(`/overview`, request.url));
+    return NextResponse.redirect(new URL(`/hedera/overview`, request.url));
   }
 
   if (!isConnected && isProtectedRoute(pathname)) {
@@ -36,14 +36,5 @@ export async function middleware(request: NextRequest) {
 }
 
 export const config = {
-  matcher: [
-    '/',
-    '/overview',
-    '/hts-hip-206',
-    '/hrc-719',
-    '/exchange-rate-hip-206',
-    '/prng-hip-351',
-    '/erc-20',
-    '/erc-721',
-  ],
+  matcher: ['/', '/hedera/:path*'],
 };
diff --git a/system-contract-dapp-playground/src/sections/landing/index.tsx b/system-contract-dapp-playground/src/sections/landing/index.tsx
index ec9beb1f3..16cc8ffe6 100644
--- a/system-contract-dapp-playground/src/sections/landing/index.tsx
+++ b/system-contract-dapp-playground/src/sections/landing/index.tsx
@@ -106,8 +106,8 @@ const LandingPage = () => {
           return;
         }
 
-        // navigate user to /overview
-        router.push('/overview');
+        // navigate user to /hedera/overview
+        router.push('/hedera/overview');
       }
     })();
   }, [accounts, router, toaster, walletProvider]);
@@ -186,9 +186,9 @@ const LandingPage = () => {
       {/* signature */}
       <motion.p
         variants={verticalVariant}
-        className="absolute bottom-9 w-full text-center text-xl
-                  sm:px-16 sm:text-2xl
-                  md:w-fit md:px-24 
+        className="absolute bottom-9 w-full text-center text-xl px-6
+                  sm:text-2xl
+                  md:w-fit
                   lg:text-3xl"
       >
         Accelerate the future on Hedera
diff --git a/system-contract-dapp-playground/src/sections/overview/index.tsx b/system-contract-dapp-playground/src/sections/overview/index.tsx
new file mode 100644
index 000000000..10f4ba9e7
--- /dev/null
+++ b/system-contract-dapp-playground/src/sections/overview/index.tsx
@@ -0,0 +1,128 @@
+'use client';
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { LEFT_SIDE_BAR_ITEMS } from '@/utils/constants';
+
+const OverviewSection = () => {
+  return (
+    <motion.section
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      transition={{
+        delay: 0.3,
+        duration: 0.6,
+      }}
+      viewport={{ once: true }}
+      className="text-white w-full flex pt-7 pl-7 flex-col gap-9"
+    >
+      {/* top part */}
+      <div className="flex flex-col gap-6">
+        {/* Overview */}
+        <h2 className="text-[1.88rem] font-medium leading-10">Overview</h2>
+
+        {/* Hedera Network */}
+        <div>
+          {/* Title */}
+          <div className="text-[1.65rem] font-medium">Hedera Network</div>
+
+          {/* content */}
+          <div className="tracking-tight text-white/70">
+            Hedera is a fully open source public distributed ledger that utilizes the fast, fair,
+            and secure hashgraph consensus. Its network services include Solidity-based smart
+            contracts, as well as native tokenization and consensus services used to build
+            decentralized applications. Learn more about{' '}
+            <Link
+              href={'https://hedera.com/'}
+              target="_blank"
+              className="underline text-hedera-purple font-normal"
+            >
+              Hedera network
+            </Link>
+            !
+          </div>
+        </div>
+
+        {/* Hedera Smart Contract Library */}
+        <div>
+          {/* title */}
+          <div className="text-[1.65rem] font-medium">Hedera Smart Contract Library</div>
+          {/* content */}
+          <div className="tracking-tight text-white/70">
+            Seamlessly scale your projects using Solidity smart contracts on Hedera, taking
+            advantage of its unparalleled efficiency. Curious to explore the inner workings of smart
+            contracts hosted on Dapp Playground? The source code for{' '}
+            <Link
+              href={'https://github.com/hashgraph/hedera-smart-contracts'}
+              target="_blank"
+              className="underline text-hedera-purple font-normal"
+            >
+              Hedera smart contract library
+            </Link>{' '}
+            is readily available on Github, awaiting your delve into its intricacies.
+          </div>
+        </div>
+      </div>
+
+      {/* break line */}
+      <hr className="border-t border-white/40" />
+
+      {/* bottom part */}
+      <div className="flex flex-col gap-12">
+        {/* DApp Playground */}
+        <div>
+          {/* title */}
+          <h1 className="text-[1.88rem] font-medium leading-10">DApp Playground</h1>
+          {/* content */}
+          <div className="tracking-tight text-white/70">
+            An intuitively designed interface aimed at highlighting the capabilities of Hedera
+            Network&apos;s system contracts. This revolutionary platform empowers developers to
+            effortlessly deploy and engage with illustrative system contracts, simplifying the task
+            of constructing and resolving issues within decentralized applications.
+          </div>
+        </div>
+
+        {/* buttons */}
+        <div className="flex flex-col gap-3">
+          <div className="tracking-tight text-white/70">
+            Here are the contracts exposed on this platform:
+          </div>
+
+          <div className="grid grid-rows-2 grid-cols-3 gap-x-6 gap-y-3">
+            {LEFT_SIDE_BAR_ITEMS.slice(1).map((item) => (
+              <Link
+                key={item.name}
+                href={item.path}
+                className="tracking-tighter text-white/70 border border-white/30 text-center py-1 px-6 rounded-xl flex items-center justify-center hover:bg-black/30 transition duration-300"
+              >
+                {' '}
+                {item.name}
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+    </motion.section>
+  );
+};
+
+export default OverviewSection;
diff --git a/system-contract-dapp-playground/src/styles/globals.css b/system-contract-dapp-playground/src/styles/globals.css
index 718b8a24a..0bbb0f1c2 100644
--- a/system-contract-dapp-playground/src/styles/globals.css
+++ b/system-contract-dapp-playground/src/styles/globals.css
@@ -29,11 +29,12 @@
 }
 
 .gradient-04 {
+  position: absolute;
+  width: 25rem;
+  height: 9rem;
+  left: 37%;
+  bottom: 0;
   border-radius: 64.7425rem;
   background: #7aebfb;
   filter: blur(230px);
-  width: 44.7425rem;
-  height: 34.60719rem;
-  transform: rotate(-160.325deg);
-  flex-shrink: 0;
 }
diff --git a/system-contract-dapp-playground/src/utils/constants.ts b/system-contract-dapp-playground/src/utils/constants.ts
index 0547a9e56..3f2c3e521 100644
--- a/system-contract-dapp-playground/src/utils/constants.ts
+++ b/system-contract-dapp-playground/src/utils/constants.ts
@@ -111,14 +111,48 @@ export const HEDERA_NETWORKS = {
  * @notice information about protected routes
  */
 export const PROTECTED_ROUTES = [
-  '/overview',
-  '/hts-hip-206',
-  '/hrc-719',
-  '/exchange-rate-hip-206',
-  '/prng-hip-351',
-  '/erc-20',
-  '/erc-721',
+  '/hedera/overview',
+  '/hedera/hts-hip-206',
+  '/hedera/hrc-719',
+  '/hedera/exchange-rate-hip-475',
+  '/hedera/prng-hip-351',
+  '/hedera/erc-20',
+  '/hedera/erc-721',
 ];
 
 /** @notice hashcan baseURL */
 export const HASHSCAN_BASE_URL = 'https://hashscan.io';
+
+/**
+ * @notice information for LeftSideBar items
+ */
+export const LEFT_SIDE_BAR_ITEMS = [
+  {
+    name: 'Overview',
+    path: PROTECTED_ROUTES[0],
+  },
+  {
+    name: 'HTS system contract wrapper (HIP-206)',
+    path: PROTECTED_ROUTES[1],
+  },
+  {
+    name: 'Token associate (HIP-719 / HRC-719)',
+    path: PROTECTED_ROUTES[2],
+  },
+  {
+    name: 'Exchange rate system conract wrapper (Hip-475)',
+    path: PROTECTED_ROUTES[3],
+  },
+  {
+    name: 'Pseudo random number system contract wrapper (HIP-351)',
+    path: PROTECTED_ROUTES[4],
+  },
+  {
+    name: 'Fungible token (ERC-20)',
+    path: PROTECTED_ROUTES[5],
+  },
+  {
+    name: 'Non-fungible token (ERC-721)',
+    path: PROTECTED_ROUTES[6],
+  },
+];