diff --git a/common.css b/common.css
index 8c9c695..6895fcd 100644
--- a/common.css
+++ b/common.css
@@ -1,5 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
-@import url("https://tender-mccarthy-d4aa39.netlify.app/component.css");
+@import url("https://deploy-preview-36--tender-mccarthy-d4aa39.netlify.app/component.css");
 
 * {
   margin: 0;
@@ -76,6 +76,7 @@ body {
 .component-wrapper {
   margin: 1rem 0;
   border: 1px solid var(--dark-theme-light-color);
+  overflow: hidden;
 }
 
 .code-snippet {
diff --git a/document/alert/alert.html b/document/alert/alert.html
index 93d9c1a..7ca35f8 100644
--- a/document/alert/alert.html
+++ b/document/alert/alert.html
@@ -87,6 +87,22 @@ <h1 class="head-lg margin-xs">Components</h1>
             href="/document/rating/rating.html"
             >Rating</a
           >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+          >Slider</a>
+
+          <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+             >Modal</a>
+
+          <a
+            class="d-block btn-link components"
+            href="/document/grid/grid.html"
+            >Grid Simplified</a
+          >
         </nav>
       </div>
 
diff --git a/document/avatar/avatar.html b/document/avatar/avatar.html
index 627f73d..57b4260 100644
--- a/document/avatar/avatar.html
+++ b/document/avatar/avatar.html
@@ -84,6 +84,24 @@ <h1 class="head-lg margin-xs">Components</h1>
             href="/document/rating/rating.html"
             >Rating</a
           >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+          >Slider</a>
+          
+          <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/grid/grid.html"
+          >Grid Simplified</a
+        >
+
         </nav>
       </div>
       <section id="avatar" class="content margin-sm">
diff --git a/document/badges/badges.html b/document/badges/badges.html
index 16157d0..63cc14e 100644
--- a/document/badges/badges.html
+++ b/document/badges/badges.html
@@ -95,6 +95,24 @@ <h1 class="head-lg margin-xs">Components</h1>
             href="/document/rating/rating.html"
             >Rating</a
           >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+          >Slider</a
+        >
+           <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+          
+          <a
+          class="d-block btn-link components"
+          href="/document/grid/grid.html"
+          >Grid Simplified</a
+        >
+
         </nav>
       </div>
       <section id="badges" class="content margin-sm">
diff --git a/document/button/button.html b/document/button/button.html
index 0c107f8..e720133 100644
--- a/document/button/button.html
+++ b/document/button/button.html
@@ -90,6 +90,25 @@ <h1 class="head-lg margin-xs">Components</h1>
             href="/document/rating/rating.html"
             >Rating</a
           >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+          >Slider</a
+          >
+          
+          <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+          
+          <a
+          class="d-block btn-link components"
+          href="/document/grid/grid.html"
+          >Grid Simplified</a
+        >
+
         </nav>
       </div>
       <section id="button" class="content margin-sm">
diff --git a/document/card/card.html b/document/card/card.html
index cb58b63..92ccb7d 100644
--- a/document/card/card.html
+++ b/document/card/card.html
@@ -92,6 +92,25 @@ <h1 class="head-lg margin-xs">Components</h1>
             href="/document/rating/rating.html"
             >Rating</a
           >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+          >Slider</a
+        >
+
+          <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+          
+          <a
+          class="d-block btn-link components"
+          href="/document/grid/grid.html"
+          >Grid Simplified</a
+        >
+
         </nav>
       </div>
       <section id="card" class="content margin-sm">
diff --git a/document/form/form.html b/document/form/form.html
index cb9bc74..ff5227c 100644
--- a/document/form/form.html
+++ b/document/form/form.html
@@ -84,6 +84,25 @@ <h1 class="head-lg margin-xs">Components</h1>
             href="/document/rating/rating.html"
             >Rating</a
           >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+          >Slider</a
+        >
+         
+        <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/grid/grid.html"
+          >Grid Simplified</a
+        >
+
         </nav>
       </div>
       <section id="form" class="content margin-sm">
diff --git a/document/grid/grid.html b/document/grid/grid.html
new file mode 100644
index 0000000..65e3628
--- /dev/null
+++ b/document/grid/grid.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Super UI | Grid</title>
+    <link rel="stylesheet" href="/gist.css" />
+    <link rel="stylesheet" href="/common.css" />
+  </head>
+  <body>
+    <!------------------ grid-container---------------->
+
+    <div class="grid-container">
+      <header class="container-fluid header-container">
+        <a class="btn-link" href="/">
+          <h1 class="header-title head-xl">Super UI</h1>
+        </a>
+        <nav class="main-nav-bar">
+          <a class="btn-link text-md" href="/">Home</a>
+          <a class="btn-link text-md" href="/document/alert/alert.html">
+            Documentation
+          </a>
+          <a class="btn-link text-md" href="/">Github</a>
+        </nav>
+      </header>
+      <div class="side-bar-container">
+        <nav class="side-bar">
+          <h1 class="head-lg margin-xs">Components</h1>
+          <a
+            class="d-block btn-link components"
+            href="/document/alert/alert.html"
+            >Alert</a
+          >
+          <a
+            class="d-block btn-link components"
+            href="/document/avatar/avatar.html"
+            >Avatar</a
+          >
+          <a
+            class="d-block btn-link components"
+            href="/document/badges/badges.html"
+            >Badges</a
+          >
+          <a
+            class="d-block btn-link components"
+            href="/document/button/button.html"
+            >Button</a
+          >
+          <a class="d-block btn-link components" href="/document/card/card.html"
+            >Card</a
+          >
+          <a class="d-block btn-link components" href="#image-section">Image</a>
+          <a class="d-block btn-link components" href="/document/form/form.html"
+            >Form</a
+          >
+          <a class="d-block btn-link components" href="/document/list/list.html"
+            >List</a
+          >
+          <a
+            class="d-block btn-link components"
+            href="/document/text_utilities/text_utilities.html"
+          >
+            Text Utilities
+          </a>
+          <a
+            class="d-block btn-link components"
+            href="/document/navigation/navigation.html"
+            >Navigation</a
+          >
+          <a class="d-block btn-link components active-component" href="#toast"
+            >Toast</a
+          >
+          <a
+            class="d-block btn-link components"
+            href="/document/rating/rating.html"
+            >Rating</a
+          >
+
+          <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+
+          <a
+            class="d-block btn-link components"
+            href="#grid_simplified"
+            >Grid Simplified</a
+          >
+        </nav>
+      </div>
+      <section id="grid_simplified" class="content margin-sm">
+        <h1 class="head-xl">Grid Simplified</h1>
+        <p class="text-sm text-gray">
+            Use grid when you want sections in view. Check below some examples of side by side cards.
+        </p>
+
+        <h2 class="head-md">Example of 2 column layout</h2>
+        <p class="text-sm text-gray">
+            Add grid-2-col class on wrapper div which is wrapping 2 divs and grid-item for the individual grid children
+        </p>
+
+         <!--------------------grid-2-column components ------------------------>
+
+        <div class="component-wrapper padding-xs border-radius-xs d-flex">
+            <div class="grid-2-col margin-md">
+                <div class="grid-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime dicta, maiores eaque provident minima quibusdam sint optio commodi nemo reiciendis blanditiis animi tempora beatae amet, officia rem reprehenderit dignissimos nisi.</div>
+                <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore iusto cupiditate error quas, incidunt nisi cum, culpa molestiae laudantium enim consequatur aperiam vitae distinctio quod numquam, voluptate earum. Fuga, delectus.</div>
+              </div>
+        </div>
+         <!--------------------grid-2-column components code ------------------------>
+
+        <div class="code-snippet">
+            <script src="https://gist.github.com/dev-prabhat/f86bae8ca42ace7e05404dae813306fb.js"></script>
+        </div>
+
+        <h2 class="head-md">Example of 3 column layout</h2>
+        <p class="text-sm text-gray">
+            Add grid-3-col class on wrapper div which is wrapping 3 divs and grid-item for the individual grid children
+        </p>
+
+         <!--------------------grid-2-column components ------------------------>
+        <div class="component-wrapper padding-xs border-radius-xs d-flex">
+        <div class="grid-3-col margin-md">
+            <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam voluptate adipisci facere officiis corporis deserunt provident distinctio voluptates voluptas labore a assumenda veritatis itaque aperiam fuga, exercitationem ipsum maxime vitae?</div>
+            <div class="grid-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed quos doloremque officia modi ipsum harum numquam. Eius sit, dolorum laboriosam exercitationem adipisci possimus, explicabo totam tempore doloremque laborum nulla necessitatibus.</div>
+            <div class="grid-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, quibusdam nesciunt. Facere in corporis ex temporibus quidem facilis et architecto ipsum voluptatibus quo, dolores error, eius porro quaerat neque sed?</div>
+          </div>
+        </div>
+
+        <!--------------------grid-3-column components code ------------------------>
+
+        <div class="code-snippet">
+            <script src="https://gist.github.com/dev-prabhat/5a976f0664ff87b0235f2a114843b9be.js"></script>
+          </div>
+      </section>
+    </div>
+  </body>
+</html>
diff --git a/document/image/image.html b/document/image/image.html
index 36e8b5e..e5590dc 100644
--- a/document/image/image.html
+++ b/document/image/image.html
@@ -84,6 +84,25 @@ <h1 class="head-lg margin-xs">Components</h1>
             href="/document/rating/rating.html"
             >Rating</a
           >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+          >Slider</a
+        >
+
+          <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/grid/grid.html"
+          >Grid Simplified</a
+        >
+
         </nav>
       </div>
       <section id="image" class="content margin-sm">
diff --git a/document/list/list.html b/document/list/list.html
index e4e349b..b3c6231 100644
--- a/document/list/list.html
+++ b/document/list/list.html
@@ -85,6 +85,25 @@ <h1 class="head-lg margin-xs">Components</h1>
             href="/document/rating/rating.html"
             >Rating</a
           >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+          >Slider</a
+        >
+          
+          <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+
+        <a
+          class="d-block btn-link components"
+          href="/document/grid/grid.html"
+          >Grid Simplified</a
+        >
+
         </nav>
       </div>
       <section id="list" class="content margin-sm">
diff --git a/document/modal/modal.html b/document/modal/modal.html
new file mode 100644
index 0000000..8cb57cd
--- /dev/null
+++ b/document/modal/modal.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Super UI | Modal</title>
+    <link rel="stylesheet" href="/gist.css" />
+    <link rel="stylesheet" href="/common.css" />
+  </head>
+  <body>
+    <!------------------ grid-container---------------->
+
+    <div class="grid-container">
+      <header class="container-fluid header-container">
+        <a class="btn-link" href="/">
+          <h1 class="header-title head-xl">Super UI</h1>
+        </a>
+        <nav class="main-nav-bar">
+          <a class="btn-link text-md" href="/">Home</a>
+          <a class="btn-link text-md" href="/document/alert/alert.html"
+            >Documentation</a
+          >
+          <a
+            class="btn-link text-md"
+            href="https://github.com/dev-prabhat/Super-UI"
+            >Github</a
+          >
+        </nav>
+      </header>
+      <div class="side-bar-container">
+        <nav class="side-bar">
+          <h1 class="head-lg margin-xs">Components</h1>
+          <a class="d-block btn-link components active-component" href="/document/alert/alert.html"
+            >Alert
+          </a>
+
+          <a
+            class="d-block btn-link components"
+            href="/document/avatar/avatar.html"
+          >
+            Avatar
+          </a>
+          <a
+            class="d-block btn-link components"
+            href="/document/badges/badges.html"
+          >
+            Badges
+          </a>
+          <a
+            class="d-block btn-link components"
+            href="/document/button/button.html"
+            >Button</a
+          >
+          <a class="d-block btn-link components" href="/document/card/card.html"
+            >Card</a
+          >
+          <a
+            class="d-block btn-link components"
+            href="/document/image/image.html"
+            >Image</a
+          >
+          <a class="d-block btn-link components" href="/document/form/form.html"
+            >Form</a
+          >
+          <a class="d-block btn-link components" href="/document/list/list.html"
+            >List</a
+          >
+          <a
+            class="d-block btn-link components"
+            href="/document/text_utilities/text_utilities.html"
+          >
+            Text Utilities
+          </a>
+          <a
+            class="d-block btn-link components"
+            href="/document/navigation/navigation.html"
+            >Navigation</a
+          >
+          <a
+            class="d-block btn-link components"
+            href="/document/toast/toast.html"
+            >Toast</a
+          >
+          <a
+            class="d-block btn-link components"
+            href="/document/rating/rating.html"
+            >Rating</a
+          >
+
+          <a
+            class="d-block btn-link components"
+            href="#modal"
+            >Modal</a
+          >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/grid/grid.html"
+          >Grid Simplified</a
+        >
+        </nav>
+      </div>
+
+      <section id="modal" class="content margin-sm">
+        <h1 class="head-xl">Modal</h1>
+        <p class="text-sm font-weight-light text-gray">
+            Modals are positioned over everything else in the document and remove scroll from the page. It gets closed only with close button on modal pop-up.
+        </p>
+
+        <h2 class="head-md">Example of Modal</h2>
+        <p class="text-sm font-weight-light text-gray">
+            You need to have wrapper div modal class. Inside that, you can wrap content inside div.modal-container that you need to show in pop-up
+        </p>
+
+        <!--------------------alert components ------------------------>
+
+        <div class="component-wrapper padding-xs border-radius-xs ">
+            <div class="modal-preview">
+                <div class="modal-container-preview">
+                  <span class="close-btn-preview">&times;</span>
+                  <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo totam magni tenetur. Nostrum, eum aspernatur! Nostrum adipisci, veniam animi natus optio deleniti dolor voluptatum qui mollitia ipsa illo inventore repellat.</h1>
+                </div>
+            </div>
+        </div>
+
+        <button class="btn btn-primary trigger">Click me</button>
+        <div class="modal">
+          <div class="modal-container">
+            <span class="close-btn">&times;</span>
+            <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo totam magni tenetur. Nostrum, eum aspernatur! Nostrum adipisci, veniam animi natus optio deleniti dolor voluptatum qui mollitia ipsa illo inventore repellat.</h1>
+          </div>
+        </div>
+      
+
+        <div class="code-snippet">
+          <script src="https://gist.github.com/dev-prabhat/d9683a46439267df9370375012b8fb8f.js"></script>
+        </div>
+      </section>
+      <script type="text/javascript" src="https://deploy-preview-36--tender-mccarthy-d4aa39.netlify.app/js/modal.js"></script>
+    </div>
+  </body>
+</html>
diff --git a/document/navigation/navigation.html b/document/navigation/navigation.html
index ba9dd6b..41516b1 100644
--- a/document/navigation/navigation.html
+++ b/document/navigation/navigation.html
@@ -86,6 +86,26 @@ <h1 class="head-lg margin-xs">Components</h1>
             href="/document/rating/rating.html"
             >Rating</a
           >
+
+          <a
+
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+          >Slider</a
+        >
+          
+        <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/grid/grid.html"
+          >Grid Simplified</a
+        >
+
         </nav>
       </div>
       <section id="nav" class="content margin-sm">
diff --git a/document/rating/rating.html b/document/rating/rating.html
index 64d4af5..a8b7ce6 100644
--- a/document/rating/rating.html
+++ b/document/rating/rating.html
@@ -80,6 +80,25 @@ <h1 class="head-lg margin-xs">Components</h1>
           <a class="d-block btn-link components active-component" href="#rating"
             >Rating</a
           >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+          >Slider</a
+        >
+          
+        <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+          
+          <a
+          class="d-block btn-link components"
+          href="/document/grid/grid.html"
+          >Grid Simplified</a
+        >
+
         </nav>
       </div>
       <section id="rating" class="content margin-sm">
diff --git a/document/slider/slider.html b/document/slider/slider.html
new file mode 100644
index 0000000..ffd88c3
--- /dev/null
+++ b/document/slider/slider.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Super UI | Custom</title>
+    <link rel="stylesheet" href="/gist.css" />
+    <link rel="stylesheet" href="/common.css" />
+  </head>
+  <body>
+    <!------------------ grid-container---------------->
+
+    <div class="grid-container">
+      <header class="container-fluid header-container">
+        <a class="btn-link" href="/">
+          <h1 class="header-title head-xl">Super UI</h1>
+        </a>
+        <nav class="main-nav-bar">
+          <a class="btn-link text-md" href="/">Home</a>
+          <a class="btn-link text-md" href="/document/alert/alert.html">
+            Documentation
+          </a>
+          <a class="btn-link text-md" href="/">Github</a>
+        </nav>
+      </header>
+      <div class="side-bar-container">
+        <nav class="side-bar">
+          <h1 class="head-lg margin-xs">Components</h1>
+          <a
+            class="d-block btn-link components"
+            href="/document/alert/alert.html"
+            >Alert</a
+          >
+          <a
+            class="d-block btn-link components"
+            href="/document/avatar/avatar.html"
+            >Avatar</a
+          >
+          <a
+            class="d-block btn-link components"
+            href="/document/badges/badges.html"
+            >Badges</a
+          >
+          <a
+            class="d-block btn-link components"
+            href="/document/button/button.html"
+            >Button</a
+          >
+          <a class="d-block btn-link components" href="/document/card/card.html"
+            >Card</a
+          >
+          <a class="d-block btn-link components" href="#image-section">Image</a>
+          <a class="d-block btn-link components" href="/document/form/form.html"
+            >Form</a
+          >
+          <a class="d-block btn-link components" href="/document/list/list.html"
+            >List</a
+          >
+          <a
+            class="d-block btn-link components"
+            href="/document/text_utilities/text_utilities.html"
+          >
+            Text Utilities
+          </a>
+          <a
+            class="d-block btn-link components"
+            href="/document/navigation/navigation.html"
+            >Navigation</a
+          >
+          <a class="d-block btn-link components active-component" href="#toast"
+            >Toast</a
+          >
+          <a
+            class="d-block btn-link components"
+            href="/document/rating/rating.html"
+            >Rating</a
+          >
+
+          <a
+          class="d-block btn-link components"
+          href="#slider"
+          >Slider</a
+        >
+        </nav>
+      </div>
+      <section id="Slider" class="content margin-sm">
+        <h1 class="head-xl">Slider</h1>
+        <p class="text-sm text-gray">
+            Sliders are used to decide range for something like sound in videos, price in shopping sites, etc.
+        </p>
+
+        <h2 class="head-md">Example of Simple slider</h2>
+
+        <!--------------------slider components ------------------------>
+
+        <div class="component-wrapper padding-xs border-radius-xs d-flex">
+            <input type="range" min="1" max="100" value="30" />
+        </div>
+        <!--------------------slider code ------------------------>
+
+        <div class="code-snippet">
+            <script src="https://gist.github.com/dev-prabhat/3e53fdd0c352ca9c1a8d38769d761e79.js"></script>
+        </div>
+
+        
+        <h2 class="head-md">Example of Custom Slider</h2>
+        <p class="text-sm text-gray">
+          Here it is a custom slider which i have created from scratch using html and css , i can use custom slider in my project as this is based on my Theme of Project
+        </p>
+        
+        <!--------------------custom slider components ------------------------>
+
+        <div class="component-wrapper padding-xs border-radius-xs d-flex">
+            <input class="slider" type="range" min="1" max="100" value="30" />
+        </div>
+
+        <!--------------------custom slider components ------------------------>
+
+        <div class="code-snippet">
+            <script src="https://gist.github.com/dev-prabhat/e795463324ddc91c5c3b16f8a7dd1b20.js"></script>
+        </div>
+      </section>
+    </div>
+  </body>
+</html>
diff --git a/document/text_utilities/text_utilities.html b/document/text_utilities/text_utilities.html
index f3f3835..cae8ffb 100644
--- a/document/text_utilities/text_utilities.html
+++ b/document/text_utilities/text_utilities.html
@@ -83,6 +83,23 @@ <h1 class="head-lg margin-xs">Components</h1>
             href="/document/rating/rating.html"
             >Rating</a
           >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+             >Slider</a>
+          <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+          
+          <a
+          class="d-block btn-link components"
+          href="/document/grid/grid.html"
+          >Grid Simplified</a>
+          
+          
         </nav>
       </div>
       <section id="text" class="content margin-sm">
diff --git a/document/toast/toast.html b/document/toast/toast.html
index 1e2f213..9d944dd 100644
--- a/document/toast/toast.html
+++ b/document/toast/toast.html
@@ -76,6 +76,25 @@ <h1 class="head-lg margin-xs">Components</h1>
             href="/document/rating/rating.html"
             >Rating</a
           >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/slider/slider.html"
+          >Slider</a
+        >
+         
+          <a
+            class="d-block btn-link components"
+            href="/document/modal/modal.html"
+            >Modal</a
+          >
+
+          <a
+          class="d-block btn-link components"
+          href="/document/grid/grid.html"
+          >Grid Simplified</a
+        >
+
         </nav>
       </div>
       <section id="toast" class="content margin-sm">
diff --git a/readme.md b/readme.md
index 2307a77..2b97389 100644
--- a/readme.md
+++ b/readme.md
@@ -2,6 +2,8 @@
 
 An open source Library where you get all the Styles and Component related to your Website . It is based on plain CSS but combine with utility CSS which gives flexibility and control to the user related to any component.
 
+This is Temp-dev Branch with all P1 components 
+
 ---
 
 ## Live Website: [Super UI](https://super-ui.netlify.app/)
@@ -14,11 +16,11 @@ An open source Library where you get all the Styles and Component related to you
 To start using the Component Library Copy and Paste the given code inn your HTML file or import it in Main css file
 
 ```html
-    <link rel="stylesheet" href="https://tender-mccarthy-d4aa39.netlify.app/component.css"/>
+    <link rel="stylesheet" href="https://deploy-preview-36--tender-mccarthy-d4aa39.netlify.app/component.css"/>
 ```
 
 ```css
-   @import url("https://tender-mccarthy-d4aa39.netlify.app/component.css");
+   @import url("https://deploy-preview-36--tender-mccarthy-d4aa39.netlify.app/component.css");
 ```
 
 ---
@@ -37,6 +39,9 @@ To start using the Component Library Copy and Paste the given code inn your HTML
   - [Navigation](#navigation)
   - [Toast](#toast)
   - [Rating](#rating)
+  - [Slider](#slider)
+  - [Modal](#modal)
+  - [Grid](#grid)
 
 ---
 
@@ -56,7 +61,7 @@ We have seven types of Alert Component:
 
 
 
-Click here: https://super-ui.netlify.app/document/alert/alert.html
+Click here: https://deploy-preview-29--super-ui.netlify.app/document/alert/alert.html
 
 ---
 
@@ -68,7 +73,7 @@ We have only one type of Avatar Component:
 
 - Image Rounded Avatar
 
-Click here: https://super-ui.netlify.app/document/avatar/avatar.html
+Click here: https://deploy-preview-29--super-ui.netlify.app/document/avatar/avatar.html
 
 
 ---
@@ -82,7 +87,7 @@ We have two types of Badges Component:
 - Image Rounded Avatar
 - Text Rounded Avatar
 
-Click here: https://super-ui.netlify.app/document/badges/badges.html
+Click here: https://deploy-preview-29--super-ui.netlify.app/document/badges/badges.html
 
 ---
 
@@ -97,7 +102,7 @@ We have three types of Button Component:
 - Icon Button
 
 
-Click here: https://super-ui.netlify.app/document/button/button.html
+Click here: https://deploy-preview-29--super-ui.netlify.app/document/button/button.html
 
 ---
 
@@ -110,7 +115,7 @@ We have two types of Card Component:
 - Horizontal Card
 - Vertical Card
 
-Click here: https://super-ui.netlify.app/document/card/card.html
+Click here: https://deploy-preview-29--super-ui.netlify.app/document/card/card.html
 
 ---
 
@@ -123,7 +128,7 @@ We have two types of Image Component:
 - Responsive Image
 - Responsive Round Image
 
-Click here: https://super-ui.netlify.app/document/image/image.html
+Click here: https://deploy-preview-29--super-ui.netlify.app/document/image/image.html
 
 
 ---
@@ -137,7 +142,7 @@ We have two types of Form Components:
 - Active form fields
 - Disabled form fields
 
-Click here: https://super-ui.netlify.app/document/form/form.html
+Click here: https://deploy-preview-29--super-ui.netlify.app/document/form/form.html
 
 ---
 
@@ -152,7 +157,7 @@ We have four types of List Components:
 - List with no bullets
 - List with inline items
 
-Click here: https://super-ui.netlify.app/document/list/list.html
+Click here: https://deploy-preview-29--super-ui.netlify.app/document/list/list.html
 
 ---
 
@@ -167,7 +172,7 @@ We have four types of Utilities Class:
 - Text color
 - Text Alignment
 
-Click here: https://super-ui.netlify.app/document/text_utilities/text_utilities.html
+Click here: https://deploy-preview-29--super-ui.netlify.app/document/text_utilities/text_utilities.html
 
 ---
 
@@ -179,7 +184,7 @@ We any only one of Navigation Component:
 
 - Normal Navigation
    
-Click here: https://super-ui.netlify.app/document/navigation/navigation.html
+Click here: https://deploy-preview-29--super-ui.netlify.app/document/navigation/navigation.html
 
 ---
 
@@ -193,7 +198,7 @@ We have three types of Toast Component:
 - Danger Toast
 - Info Toast
 
-Click here: https://super-ui.netlify.app/document/toast/toast.html
+Click here: https://deploy-preview-29--super-ui.netlify.app/document/toast/toast.html
 
 ---
 
@@ -205,7 +210,48 @@ We have only one type of Rating Component:
 
 - Standard Rating
 
-Click here: https://super-ui.netlify.app/document/rating/rating.html
+Click here: https://deploy-preview-29--super-ui.netlify.app/document/rating/rating.html
+
+---
+
+
+## Slider
+
+Sliders are used to decide range for something like sound in videos, price in shopping sites, etc.
+
+We have only two type of Slider Component:
+
+- Standard Rating
+- Custom Slider
+
+Click here: https://deploy-preview-29--super-ui.netlify.app/document/slider/slider.html
+
+---
+
+
+## Modal
+
+Modals are positioned over everything else in the document and remove scroll from the page. It gets closed only with close button on modal pop-up. 
+
+We have only one type of Modal Component:
+
+- Standard Modal
+
+Click here: https://deploy-preview-29--super-ui.netlify.app/document/modal/modal.html
+
+---
+
+
+## Grid
+
+Use grid when you want sections in view. Check below some examples of side by side cards.
+
+We have only two type of Grid System:
+
+- 2 Column Grid
+- 3 Column Grid
+
+Click here: https://deploy-preview-29--super-ui.netlify.app/document/grid/grid.html
 
 ---