diff --git a/package-lock.json b/package-lock.json
index 548753d..a6f6448 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "my-app",
       "version": "0.1.0",
       "dependencies": {
+        "@tailwindcss/container-queries": "^0.1.1",
         "@types/node": "20.4.4",
         "@types/react": "18.2.16",
         "@types/react-dom": "18.2.7",
@@ -2646,6 +2647,14 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tailwindcss/container-queries": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz",
+      "integrity": "sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==",
+      "peerDependencies": {
+        "tailwindcss": ">=3.2.0"
+      }
+    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
diff --git a/package.json b/package.json
index 01e190e..fc6e842 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tailwindcss/container-queries": "^0.1.1",
     "@types/node": "20.4.4",
     "@types/react": "18.2.16",
     "@types/react-dom": "18.2.7",
diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
index 96a5119..ae3d103 100644
--- a/src/app/blog/[slug]/page.tsx
+++ b/src/app/blog/[slug]/page.tsx
@@ -1,6 +1,4 @@
 import CommentComp from '@/components/CommentComp';
-import Footer from '@/components/Footer';
-import Navigation from '@/components/Navigation';
 import ReadLikely from '@/components/ReadLikely';
 import ShareLink from '@/components/ShareLink';
 import { TypographyH1, TypographyH2 } from '@/components/Typography';
@@ -9,8 +7,6 @@ import Image from 'next/image';
 export default function BlogDetails({ params }: { params: { slug: string } }) {
   return (
     <>
-      <Navigation />
-
       <main className='container my-14'>
         <article className='max-w-[800px] my-14'>
           <div className='space-y-5'>
@@ -94,10 +90,8 @@ export default function BlogDetails({ params }: { params: { slug: string } }) {
 
         <ReadLikely />
 
-        <CommentComp />
+        {/* <CommentComp /> */}
       </main>
-
-      <Footer />
     </>
   );
 }
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index cc3314c..0ceabc9 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -1,5 +1,3 @@
-import Footer from '@/components/Footer';
-import Navigation from '@/components/Navigation';
 import ReadLikely from '@/components/ReadLikely';
 import ReadMore from '@/components/ReadMore';
 import { TypographyH1 } from '@/components/Typography';
@@ -13,7 +11,6 @@ export const metadata: Metadata = {
 function BlogPage() {
   return (
     <>
-      <Navigation />
       <main className='container my-14'>
         <TypographyH1>
           The Faraday <span className='text-brandColor'>Blog</span>
@@ -23,7 +20,6 @@ function BlogPage() {
 
         <ReadMore />
       </main>
-      <Footer />
     </>
   );
 }
diff --git a/src/app/blog/tags/page.tsx b/src/app/blog/tags/page.tsx
new file mode 100644
index 0000000..6217303
--- /dev/null
+++ b/src/app/blog/tags/page.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { TypographyH1, TypographyH3 } from '@/components/Typography';
+import BlogCard from '@/components/BlogCard';
+import Tags from '@/components/Tags';
+import SearchIcon from '@/images/search-icon.svg';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Faraday - Tags',
+};
+
+function TagPage() {
+  return (
+    <>
+      <main className='container my-14'>
+        <TypographyH1>
+          The Faraday <span className='text-brandColor'>Blog</span>
+        </TypographyH1>
+
+        <section className='grid md:grid-cols-12 gap-16 mt-20'>
+          <div className='md:col-span-8 @container '>
+            <TypographyH3>Tech</TypographyH3>
+
+            <div className='@lg:grid-cols-2 grid md:grid-cols-2 gap-3 mt-6'>
+              <BlogCard />
+              <BlogCard />
+              <BlogCard />
+              <BlogCard />
+              <BlogCard />
+              <BlogCard />
+            </div>
+          </div>
+
+          <div className='md:col-span-4 hidden md:block'>
+            <div className='flex bg-white rounded-md  items-center mb-6'>
+              <input
+                type='text'
+                name=''
+                id=''
+                className='p-3 w-full outline-none rounded-md'
+                placeholder='Search tags'
+              />
+              <button className='pr-3'>
+                <SearchIcon width={24} />
+              </button>
+            </div>
+
+            <Tags horizontal />
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}
+
+export default TagPage;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c7ac080..c8a2168 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import '@/styles/globals.css';
 import { Roboto } from 'next/font/google';
+import Navigation from '@/components/Navigation';
+import Footer from '@/components/Footer';
 
 const roboto = Roboto({
   subsets: ['latin'],
@@ -14,7 +16,9 @@ const RootLayout = ({ children }: React.PropsWithChildren) => {
       <body
         className={` ${roboto.className}bg-[rgb(252,224,176)] bg-[linear-gradient(146deg,_rgba(252,224,176,1)_0%,_rgba(255,255,255,0.8847303029052023)_56%,_rgba(154,255,255,1)_100%)] `}
       >
+        <Navigation />
         {children}
+        <Footer />
       </body>
     </html>
   );
diff --git a/src/components/BlogCard.tsx b/src/components/BlogCard.tsx
index c72b324..1d6decf 100644
--- a/src/components/BlogCard.tsx
+++ b/src/components/BlogCard.tsx
@@ -33,11 +33,18 @@ function BlogCard({ featured }: { featured?: boolean }) {
             <span className='bg-brandColor w-[4rem] h-[.5rem] block'></span>
           )}
 
-          <p className={`${featured ? 'text-base' : 'text-sm text-truncate'} `}>
-            Starting out building a platform with little to no experience is a
-            daunting task that not everyone has the courage to do...Starting out
-            building a platform with little to no experience
-          </p>
+          {featured ? (
+            <p className='text-base'>
+              Starting out building a platform with little to no experience is a
+              daunting task that not everyone has the courage to do...Starting
+              out building a platform with little to no experience
+            </p>
+          ) : (
+            <p className='text-sm text-truncate'>
+              Starting out building a platform with little to no experience is a
+              daunting task that not everyone has the courage to do...
+            </p>
+          )}
 
           <div className='flex justify-between text-sm'>
             <p>Devgenix</p>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index cd64656..7f79855 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -24,18 +24,18 @@ function Footer() {
               <li className='cursor-pointer'>
                 <Link href={'https://app.faraday.africa/signup'}>Sign up</Link>
               </li>
-              {/* <li>
-          <a href=''>Download app</a>
-        </li> */}
+              <li>
+                <a href='#'>Download app</a>
+              </li>
             </ul>
           </div>
           <div className='col-start-1 row-start-2 md:col-start-3 md:row-start-1'>
             <h5 className='font-medium'>Company</h5>
             <ul className='mt-1'>
               <li className='cursor-pointer'>About Faraday</li>
-              {/* <li>
-          <a href=''>Advertise with us</a>
-        </li> */}
+              <li>
+                <a href='#'>Advertise with us</a>
+              </li>
               <li className='cursor-pointer'>Terms of use</li>
               <li className='cursor-pointer'>Privacy policy</li>
             </ul>
@@ -56,6 +56,9 @@ function Footer() {
               <li>
                 <a href='https://events.faraday.africa/gallery'>Gallery</a>
               </li>
+              <li>
+                <a href='#'>Social impact</a>
+              </li>
               {/* <li>
           <a href=''>Social impact</a>
         </li> */}
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 10aac4b..2d4d5ba 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -26,7 +26,7 @@ const links = [
 export default function Navigation() {
   const [hamClicked, setHamClicked] = useState(false);
   return (
-    <nav className=' flex items-center justify-between container pt-3  font-semibold'>
+    <nav className=' flex items-center justify-between container pt-4  font-semibold'>
       <div className='md:hidden flex justify-between items-center w-full '>
         <Link href={'/'} className='block'>
           <Logo className='w-[120px]' />
@@ -38,10 +38,11 @@ export default function Navigation() {
           <span className='w-3 h-[2px] bg-black rounded-sm block  ml-auto'></span>
         </button>
 
+        {/* Mobile */}
         {hamClicked && (
-          <div className='fixed md:hidden w-full bottom-0 left-0 h-screen bg-[rgb(252,224,176)] bg-[linear-gradient(146deg,_rgba(252,224,176,1)_0%,_rgba(255,255,255,0.8847303029052023)_56%,_rgba(154,255,255,1)_100%)] flex justify-center flex-col'>
+          <div className='fixed md:hidden w-full bottom-0 left-0 h-screen bg-[rgb(252,224,176)] bg-[linear-gradient(146deg,_rgba(252,224,176,1)_0%,_rgba(255,255,255,0.8847303029052023)_56%,_rgba(154,255,255,1)_100%)] flex justify-center flex-col z-[1000]'>
             <div className='container relative'>
-              <div className='fixed top-0 w-[inherit] flex self-start justify-between items-center pt-3'>
+              <div className='fixed top-0 w-[inherit] flex self-start justify-between items-center pt-4'>
                 <Link href={'/'} className='block'>
                   <Logo className='w-[120px]' />
                 </Link>
diff --git a/src/components/ReadLikely.tsx b/src/components/ReadLikely.tsx
index 44fb687..e97d1b0 100644
--- a/src/components/ReadLikely.tsx
+++ b/src/components/ReadLikely.tsx
@@ -11,7 +11,7 @@ function ReadLikely() {
         <Smile className='w-[35px]' />
       </TypographyH2>
 
-      <div className='flex gap-4 mt-[30px]'>
+      <div className='flex flex-col md:flex-row gap-4 mt-[30px]'>
         <BlogCard featured />
         <BlogCard featured />
       </div>
diff --git a/src/components/ReadMore.tsx b/src/components/ReadMore.tsx
index d16008b..be7c883 100644
--- a/src/components/ReadMore.tsx
+++ b/src/components/ReadMore.tsx
@@ -3,15 +3,25 @@ import { TypographyH3 } from './Typography';
 import Tags from './Tags';
 import BlogCard from './BlogCard';
 import Smile from '@/images/smile.svg';
+import TagIcon from '@/images/tab-icon.svg';
+import Link from 'next/link';
 
 function ReadMore() {
   return (
     <div className='my-6 '>
       <div className='space-y-4'>
-        <TypographyH3>
-          More stuff you could read
-          <Smile className='w-[35px]' />
-        </TypographyH3>
+        <div className='flex justify-between items-center'>
+          <TypographyH3>
+            More stuff you could read
+            <Smile className='w-[35px]' />
+          </TypographyH3>
+
+          <Link href='/blog/tags' className='block md:hidden'>
+            <button aria-label='all tag'>
+              <TagIcon width={24} />
+            </button>
+          </Link>
+        </div>
 
         <Tags />
       </div>
diff --git a/src/components/Tags.tsx b/src/components/Tags.tsx
index 724d293..3b3e897 100644
--- a/src/components/Tags.tsx
+++ b/src/components/Tags.tsx
@@ -1,26 +1,50 @@
+import Link from 'next/link';
 import React from 'react';
 
+type TagsProps = {
+  horizontal?: boolean;
+};
+
 const tags = [
   'TECH',
   'PHILOSOPHY',
   'EDUCATION',
-  'TECH',
-  'PHILOSOPHY',
-  'EDUCATION',
+  'Food',
+  'ARTS & CULTURE',
+  'FASHION & BEAUTY',
 ];
 
-function Tags() {
+function Tags({ horizontal }: TagsProps) {
+  if (horizontal) {
+    return (
+      <div className='flex flex-col gap-3'>
+        {tags.map((tag, i) => (
+          <button
+            key={i}
+            className='border uppercase rounded-lg w-fit border-[#BFC9D2] px-3 py-1'
+          >
+            {tag}
+          </button>
+        ))}
+      </div>
+    );
+  }
   return (
-    <div className='flex gap-3'>
+    <div className='gap-3 hidden md:flex'>
       {tags.map((tag, i) => (
-        <button key={i} className='border rounded-lg border-[#BFC9D2] p-3 py-2'>
+        <button
+          key={i}
+          className='border uppercase rounded-lg border-[#BFC9D2] px-3 py-1'
+        >
           {tag}
         </button>
       ))}
 
-      <button className='uppercase rounded-lg bg-[#101314] p-3 py-2 font-bold text-[#9AE2B3]'>
-        All tags
-      </button>
+      <Link href='/blog/tags' className='block'>
+        <button className='uppercase rounded-lg bg-[#101314] p-3 py-2 font-bold text-[#9AE2B3]'>
+          All tags
+        </button>
+      </Link>
     </div>
   );
 }
diff --git a/src/images/search-icon.svg b/src/images/search-icon.svg
new file mode 100644
index 0000000..9d8d8c4
--- /dev/null
+++ b/src/images/search-icon.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Interface / Search_Magnifying_Glass">
+<path id="Vector" d="M10 17.5C13.866 17.5 17 14.366 17 10.5C17 6.63401 13.866 3.5 10 3.5C6.13401 3.5 3 6.63401 3 10.5C3 14.366 6.13401 17.5 10 17.5Z" stroke="#14181F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M15 15.5L21 21.5" stroke="#14181F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/src/images/tab-icon.svg b/src/images/tab-icon.svg
new file mode 100644
index 0000000..fd9c5f3
--- /dev/null
+++ b/src/images/tab-icon.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Interface / Tag">
+<path id="Vector" d="M4.03411 12.5191L11.4811 19.9661C11.8716 20.3567 12.5048 20.3567 12.8953 19.9661L19.9664 12.8951C20.3569 12.5045 20.3569 11.8714 19.9664 11.4808L12.5194 4.03386C12.3095 3.82401 12.0173 3.71821 11.7217 3.74508L5.23993 4.33433C4.75918 4.37804 4.37828 4.75894 4.33458 5.23969L3.74532 11.7215C3.71845 12.0171 3.82425 12.3093 4.03411 12.5191Z" stroke="#3F3F41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M8.29875 8.29875C8.68928 7.90823 9.32244 7.90823 9.71297 8.29875C10.1035 8.68928 10.1035 9.32244 9.71297 9.71297C9.32244 10.1035 8.68928 10.1035 8.29875 9.71297C7.90823 9.32244 7.90823 8.68928 8.29875 8.29875Z" stroke="#3F3F41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/tailwind.config.js b/tailwind.config.js
index 2559be2..5d321b9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -28,5 +28,5 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [require('@tailwindcss/container-queries')],
 };