diff --git a/Makefile b/Makefile
index bd885ce..5f0135d 100644
--- a/Makefile
+++ b/Makefile
@@ -1,10 +1,29 @@
 list: 
 	@grep '^[^#[:space:]].*:' Makefile
+
+link:
+	pnpm link --global 
+	cd ./test-astro 
+	pnpm link --global course-kit 
+	cd .. 
+	cd ./test 
+	pnpm link --global course-kit 
+	cd ..
+
 install:
 	pnpm install
+
 build: 
 	npm run build 
+
 watch: 
 	npm run watch
+
+astro:
+	cd ./test-astro && pnpm install && pnpm run dev
+
+next:
+	cd ./test && pnpm install && pnpm run dev
+
 publish: 
 	npm publish
diff --git a/README.md b/README.md
index 10b6eb2..bf6af74 100644
--- a/README.md
+++ b/README.md
@@ -32,4 +32,16 @@ The JSON file is a course id followed by a list of **lessons**. There are 3 less
 |                                                | `content`      | Markdown.                                                                                                                      |
 |                                                | `heading`      | Title. Used for table of contents as well.                                                                                     |
 
+## Local development
 
+### First run
+
+1. Clone this repository
+2. run `make link` 
+3. run `make install`
+4. run `make watch`
+5. run either `make astro` or `make next` depending on which framework you want to use.
+
+### Subsequent runs
+
+Run step 4 and 5 from the above list.
diff --git a/package.json b/package.json
index b96858b..620d2c9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "course-kit",
-  "version": "0.0.86",
+  "version": "0.0.87",
   "description": "UI Kit for Course Management System",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
diff --git a/src/components/Course.tsx b/src/components/Course.tsx
index 4e527cc..3011ffc 100644
--- a/src/components/Course.tsx
+++ b/src/components/Course.tsx
@@ -71,7 +71,7 @@ export const Course: React.FC<CourseProps> = ({
   const divRef = React.useRef<HTMLDivElement>(null);
 
   const [cookieArray, setCookieArray] = React.useState<string[] | undefined>(
-    undefined,
+    undefined
   );
 
   //retrieve the index from cookies and set it to currentIndex
@@ -113,6 +113,11 @@ export const Course: React.FC<CourseProps> = ({
     if (onIndexChange) {
       onIndexChange(currentIndex);
     }
+    if (divRef.current) {
+      divRef.current.scrollTo({
+        top: 0,
+      });
+    }
   }, [currentIndex]);
 
   return (
diff --git a/src/components/HeaderSection.tsx b/src/components/HeaderSection.tsx
index bc46140..a98f0fa 100644
--- a/src/components/HeaderSection.tsx
+++ b/src/components/HeaderSection.tsx
@@ -5,21 +5,23 @@ import type { HeaderSectionProps } from "./Course";
 
 const HeaderSection: React.FC<HeaderSectionProps> = (props) => {
   return (
-    <div>
-      <div className="coursekit-flex coursekit-flex-col coursekit-items-center coursekit-w-full coursekit-text-center container coursekit-pb-16">
-        <div className="coursekit-text-6xl coursekit-font-bold coursekit-pt-16">
+    <div className="coursekit-px-2 md:coursekit-px-4">
+      <div className="coursekit-flex coursekit-flex-col coursekit-items-center coursekit-pb-16">
+        <div className="coursekit-text-5xl md:coursekit-text-6xl coursekit-font-bold coursekit-pt-32 coursekit-text-center">
           {props.headline}
         </div>
-        <p className="coursekit-mt-4 coursekit-text-2xl">{props.subheadline}</p>
+        <p className="coursekit-mt-4 coursekit-text-xl md:coursekit-text-2xl coursekit-text-center">
+          {props.subheadline}
+        </p>
         <img
-          className="coursekit-pt-16 coursekit-w-full"
+          className="coursekit-pt-16 md:coursekit-max-w-7xl md:coursekit-px-8 coursekit-pb-8 coursekit-max-h-[600px]"
           src={
             props.image.startsWith("http")
               ? props.image
               : `https://hungrimind.com/${props.image}`
           }
         />
-        <div className="md:coursekit-w-1/2 text-start">
+        <div className="coursekit-w-full coursekit-max-w-4xl content-section ">
           <Markdown rehypePlugins={[rehypeRaw]}>{props.content}</Markdown>
         </div>
 
diff --git a/src/components/MarkdownSection.tsx b/src/components/MarkdownSection.tsx
index 4eaaf98..291e036 100644
--- a/src/components/MarkdownSection.tsx
+++ b/src/components/MarkdownSection.tsx
@@ -5,10 +5,11 @@ import type { MarkdownSectionProps } from "./Course";
 
 const MarkdownSection: React.FC<MarkdownSectionProps> = (props) => {
   return (
-    <div className="coursekit-h-full coursekit-flex coursekit-flex-col coursekit-p-4 coursekit-pb-16 coursekit-items-center coursekit-justify-center">
-      <Markdown className="md:coursekit-w-1/2" rehypePlugins={[rehypeRaw]}>
-        {props.content}
-      </Markdown>
+    <div className="coursekit-flex coursekit-flex-col coursekit-p-4 coursekit-pb-16 coursekit-max-w-4xl coursekit-mx-auto">
+      <div className="content-section">
+        <h1>{props.heading}</h1>
+        <Markdown rehypePlugins={[rehypeRaw]}>{props.content}</Markdown>
+      </div>
     </div>
   );
 };
diff --git a/src/components/SlideSection.tsx b/src/components/SlideSection.tsx
index 0892f91..1f988c4 100644
--- a/src/components/SlideSection.tsx
+++ b/src/components/SlideSection.tsx
@@ -109,12 +109,12 @@ const MobileView: React.FC<ViewProps> = ({
       <div className="content-section coursekit-overflow-hidden coursekit-p-4">
         <div>
           <h2
-            className={`coursekit-px-4 coursekit-text-4xl coursekit-font-bold sm:coursekit-transition-opacity coursekit-duration-500`}
+            className={` coursekit-text-4xl coursekit-font-bold sm:coursekit-transition-opacity coursekit-duration-500`}
           >
             {content?.heading}
           </h2>
           <p
-            className={`coursekit-px-4 coursekit-pb-16 sm:coursekit-transition-opacity coursekit-duration-500 `}
+            className={` coursekit-pb-16 sm:coursekit-transition-opacity coursekit-duration-500 `}
           >
             <Markdown rehypePlugins={[rehypeRaw]}>{content?.content}</Markdown>
           </p>
@@ -202,7 +202,7 @@ function CodeImageThing({ content }: CodeImageThingProps) {
                   >
                     <code
                       className={`coursekit-pl-0 ${highlightTranslator(
-                        content.type,
+                        content.type
                       )}`}
                     >
                       {content.value}
diff --git a/src/global.css b/src/global.css
index eb8b2b0..39918a5 100644
--- a/src/global.css
+++ b/src/global.css
@@ -23,33 +23,33 @@
     @apply coursekit-w-full coursekit-h-full coursekit-flex coursekit-items-center coursekit-justify-center active:coursekit-scale-75 coursekit-transition-transform;
   }
 }
-b {
-  @apply coursekit-font-bold;
-}
 
-p {
-  @apply coursekit-mb-2;
+body{
+  @apply coursekit-text-lg;
 }
 
+b {
+  @apply coursekit-font-bold;
+}
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  @apply coursekit-leading-tight coursekit-mb-1 coursekit-pb-2;
+  @apply coursekit-leading-tight coursekit-font-bold coursekit-pb-8;
 }
 h1 {
-  @apply coursekit-text-5xl;
+  @apply coursekit-text-5xl coursekit-pt-16;
 }
 h2 {
-  @apply coursekit-text-4xl;
+  @apply coursekit-text-4xl coursekit-pt-8;
 }
 h3 {
-  @apply coursekit-text-2xl;
+  @apply coursekit-text-2xl coursekit-pt-4;
 }
 h4 {
-  @apply coursekit-text-xl;
+  @apply coursekit-text-xl coursekit-pt-2;
 }
 h5 {
   @apply coursekit-text-lg;
@@ -90,11 +90,6 @@ hr {
   @apply coursekit-border-none coursekit-border-t coursekit-border-gray-200;
 }
 
-@media (max-width: 720px) {
-  body {
-    font-size: 18px;
-  }
-}
 
 .sr-only {
   border: 0;
@@ -115,7 +110,7 @@ hr {
 }
 
 .content-section p {
-  @apply coursekit-leading-7;
+  @apply coursekit-leading-7 coursekit-pb-6;
 }
 
 .content-section a {
@@ -123,26 +118,23 @@ hr {
 }
 
 .content-section ul {
-  list-style-type: disc;
-  @apply coursekit-leading-5 coursekit-ml-4;
+  @apply coursekit-list-disc coursekit-list-inside coursekit-pb-6 coursekit-ml-2; 
+}
+
+.content-section ul ul{
+  @apply coursekit-ml-6 coursekit-pb-0 coursekit-mb-0; 
 }
 
 .content-section ol {
-  list-style-type: decimal;
-  @apply coursekit-leading-5 coursekit-ml-4;
+  @apply coursekit-list-decimal coursekit-list-inside coursekit-pb-6 coursekit-ml-2;
 }
 
-.content-section pre {
-  @apply coursekit-bg-gray-100 dark:coursekit-bg-gray-800 coursekit-rounded-md coursekit-p-4;
+.content-section ol ol{
+  @apply coursekit-ml-6 coursekit-pb-0 coursekit-mb-0; 
 }
 
-.content-section h1,
-.content-section h2,
-.content-section h3,
-.content-section h4,
-.content-section h5,
-.content-section h6 {
-  @apply coursekit-pb-8;
+.content-section pre {
+  @apply coursekit-bg-gray-100 dark:coursekit-bg-gray-800 coursekit-rounded-md coursekit-p-4 coursekit-overflow-auto;
 }
 
 .content-section blockquote {
@@ -156,3 +148,7 @@ hr {
 .content-section ul {
   @apply coursekit-mb-4;
 }
+
+.content-section img {
+  @apply coursekit-rounded-md coursekit-shadow coursekit-max-h-[400px]  ;
+}
diff --git a/test-astro/package.json b/test-astro/package.json
index 337d503..1d4e46c 100644
--- a/test-astro/package.json
+++ b/test-astro/package.json
@@ -22,4 +22,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"
   }
-}
\ No newline at end of file
+}
diff --git a/test/pnpm-lock.yaml b/test/pnpm-lock.yaml
index 1869c47..ea7fd8b 100644
--- a/test/pnpm-lock.yaml
+++ b/test/pnpm-lock.yaml
@@ -28,6 +28,9 @@ devDependencies:
   autoprefixer:
     specifier: ^10.0.1
     version: 10.4.17(postcss@8.4.35)
+  course-kit:
+    specifier: link:../course-kit
+    version: link:../course-kit
   eslint:
     specifier: ^8
     version: 8.56.0