diff --git a/components/NextPrevButton.tsx b/components/NextPrevButton.tsx
new file mode 100644
index 000000000..03379ff2f
--- /dev/null
+++ b/components/NextPrevButton.tsx
@@ -0,0 +1,46 @@
+import Image from 'next/image';
+import React from 'react';
+
+export default function NextPrevButton({ prev, next }: any) {
+  return (
+    <div className='mb-4 flex flex-row gap-4'>
+      <div className='h-auto w-1/2'>
+        <div
+          className='cursor-pointer rounded border border-gray-200 p-4 text-center shadow-md transition-all duration-300 ease-in-out hover:border-gray-300 hover:shadow-lg dark:shadow-xl dark:hover:shadow-2xl dark:drop-shadow-lg 
+          lg:text-left'
+        >
+          <div className='text-primary dark:text-slate-300 flex flex-row gap-5 text-[18px]'>
+            <Image
+              src={'/icons/arrow.svg'}
+              height={10}
+              width={10}
+              alt='prev icon'
+              className='rotate-180 w-5 '
+            />
+            <div className='my-auto inline font-bold uppercase '>Go Back</div>
+          </div>
+          <div className='my-2 text-base font-medium text-slate-600 dark:text-slate-300'>
+            {prev}
+          </div>
+        </div>
+      </div>
+      <div className='h-auto w-1/2'>
+        <div className='h-full cursor-pointer rounded border border-gray-200 p-4 text-center shadow-md transition-all duration-300 ease-in-out hover:border-gray-300 hover:shadow-lg dark:shadow-xl dark:drop-shadow-lg dark:hover:shadow-2xl lg:text-right'>
+          <div className='text-primary  dark:text-slate-300 flex flex-row-reverse gap-5 text-[18px]'>
+            <Image
+              src={'/icons/arrow.svg'}
+              height={10}
+              width={10}
+              alt='next icon '
+              className='w-5'
+            />
+            <div className='my-auto inline font-bold uppercase '>Up Next</div>
+          </div>
+          <div className='my-2 text-base font-medium text-slate-600 dark:text-slate-300'>
+            {next}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/pages/learn/[slug].page.tsx b/pages/learn/[slug].page.tsx
index f110ff75d..3b478f16b 100644
--- a/pages/learn/[slug].page.tsx
+++ b/pages/learn/[slug].page.tsx
@@ -7,6 +7,7 @@ import getStaticMarkdownProps from '~/lib/getStaticMarkdownProps';
 import { Headline1 } from '~/components/Headlines';
 import { SectionContext } from '~/context';
 import { DocsHelp } from '~/components/DocsHelp';
+import NextPrevButton from '~/components/NextPrevButton';
 
 export async function getStaticPaths() {
   return getStaticMarkdownPaths('pages/learn');
@@ -31,6 +32,7 @@ export default function StaticMarkdownPage({
       </Head>
       <Headline1>{frontmatter.title}</Headline1>
       <StyledMarkdown markdown={content} />
+      <NextPrevButton prev={frontmatter.prev} next={frontmatter.next} />
       <DocsHelp markdownFile={markdownFile} />
     </SectionContext.Provider>
   );
diff --git a/pages/learn/file-system.md b/pages/learn/file-system.md
index a408b70b1..4713c6f32 100644
--- a/pages/learn/file-system.md
+++ b/pages/learn/file-system.md
@@ -1,6 +1,8 @@
 ---
 section: docs
 title: Modeling a file system with JSON Schema
+prev: Modelling a file system
+next: Other examples
 ---
 
 In this step-by-step guide you will learn how to design a JSON Schema that mirrors the structure of an `/etc/fstab` file. 
diff --git a/pages/learn/getting-started-step-by-step.md b/pages/learn/getting-started-step-by-step.md
index 31e2cdfde..4c868a14f 100644
--- a/pages/learn/getting-started-step-by-step.md
+++ b/pages/learn/getting-started-step-by-step.md
@@ -1,6 +1,8 @@
 ---
 title: Creating your first schema
 section: docs
+prev: prev
+next: Miscellaneous examples
 ---
 
 JSON Schema is a vocabulary that you can use to annotate and validate JSON documents. This tutorial guides you through the process of creating a JSON Schema document.
diff --git a/pages/learn/json-schema-examples.md b/pages/learn/json-schema-examples.md
index d86b9656b..9cf69c894 100644
--- a/pages/learn/json-schema-examples.md
+++ b/pages/learn/json-schema-examples.md
@@ -1,6 +1,8 @@
 ---
 section: docs
 title: JSON Schema examples
+prev: Modelling a file system
+next: JSON Schema Glossary
 ---
 
 In this page, you will find examples illustrating different use cases to help you get the most out of your JSON Schemas. These examples cover a wide range of scenarios, and each example comes with accompanying JSON data and explanation, showcasing how JSON Schemas can be applied to various domains. You can modify these examples to suit your specific needs, as this is just one of the many ways you can utilize JSON Schemas.
diff --git a/pages/learn/miscellaneous-examples.md b/pages/learn/miscellaneous-examples.md
index abf2b8060..433811a57 100644
--- a/pages/learn/miscellaneous-examples.md
+++ b/pages/learn/miscellaneous-examples.md
@@ -1,6 +1,8 @@
 ---
 section: docs
 title: Miscellaneous Examples
+prev: Creating your first schema
+next: Modelling a file system
 ---
 
 In this page, you will find miscellaneous examples illustrating different uses cases to help you get the most out of your JSON Schemas. Each example comes with accompanying JSON data and explanation.
diff --git a/public/icons/arrow.svg b/public/icons/arrow.svg
new file mode 100644
index 000000000..f4aca3958
--- /dev/null
+++ b/public/icons/arrow.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#002cc4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file