diff --git a/app/(site)/components/AboutSection/AboutSection.tsx b/app/(site)/components/AboutSection/AboutSection.tsx
index 2f484183..09ab970d 100644
--- a/app/(site)/components/AboutSection/AboutSection.tsx
+++ b/app/(site)/components/AboutSection/AboutSection.tsx
@@ -40,7 +40,7 @@ const AboutSection = () => {
             Get to know me!
           </h1>
 
-          <Reader content={blogContent} size="base" />
+          <Reader content={blogContent} />
         </div>
 
         {/* Right section */}
diff --git a/app/(site)/components/AboutSection/LanguageSection.tsx b/app/(site)/components/AboutSection/LanguageSection.tsx
index c4329b00..8a42a635 100644
--- a/app/(site)/components/AboutSection/LanguageSection.tsx
+++ b/app/(site)/components/AboutSection/LanguageSection.tsx
@@ -1,46 +1,10 @@
 "use client";
 
-import isSkillAssociatedWithMaterial from "@/actions/material/isSkillAssociatedWithMaterial";
-import filterSkillsByType from "@/actions/skills/filterSkillsByType";
-import getAssociatedSkills from "@/actions/skills/getAssociatedSkills";
-import groupSkills from "@/actions/skills/groupSkills";
-import SkillTag from "@/components/Tags/SkillTag";
-import Tag from "@/components/Tags/Tag";
+import LanguageModal from "@/components/Modal/LanguageModal";
 import HeadingThree from "@/components/Text/HeadingThree";
-import HeadingTwo from "@/components/Text/HeadingTwo";
-import { Button } from "@/components/shadcn/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogTrigger,
-} from "@/components/shadcn/ui/dialog";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/shadcn/ui/dropdown-menu";
-import { ScrollArea } from "@/components/shadcn/ui/scroll-area";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/shadcn/ui/tooltip";
-import blogs from "@/database/blogs";
-import allCertificates from "@/database/certificates";
-import allProjects from "@/database/projects";
 import { languages } from "@/database/skills/languages";
-import allSkills from "@/database/skills/skills";
 import useIsMounted from "@/hooks/useIsMounted";
-import FilterOption from "@/interfaces/filters/FilterOption";
-import BlogInterface from "@/interfaces/material/BlogInterface";
-import CertificateInterface from "@/interfaces/material/CertificateInterface";
-import MaterialInterface from "@/interfaces/material/MaterialInterface";
-import ProjectInterface from "@/interfaces/material/ProjectInterface";
-import SkillInterface from "@/interfaces/skills/SkillInterface";
-import Link from "next/link";
 import React, { useState } from "react";
-import { BsChevronDown } from "react-icons/bs";
 
 /**
  * Displays a list of languages that I know.
@@ -70,7 +34,7 @@ const LanguageSection: React.FC = () => {
       <HeadingThree title="Languages" />
       <div className="flex flex-wrap flex-row justify-center z-10 md:justify-start -mt-2">
         {mainLanguages.map((languageData, idx) => (
-          <LanguageTagWithModal
+          <LanguageModal
             key={idx}
             language={languageData}
             handleOpenModal={handleOpenModal}
@@ -84,170 +48,3 @@ const LanguageSection: React.FC = () => {
 };
 
 export default LanguageSection;
-
-interface LanguageTagWithModalProps {
-  language: SkillInterface;
-  repository?: string;
-  handleOpenModal: () => void;
-  handleCloseModal: () => void;
-  isModalOpen: boolean;
-}
-
-/**
- * Displays a tag for each language.
- * If the language has skills or repositories, a modal is displayed when the tag is clicked.
- * The modal displays the skills and repositories for the language.
- * If the language does not have any skills or repositories, the modal cannot be opened.
- *
- * @param language (string): name of the language
- * @param skills (Skill[]): list of skills for the language
- * @param repositories (Repository[]): list of repositories for the language
- * @returns (JSX.Element): language tag with modal (stack of the language
- */
-const LanguageTagWithModal: React.FC<LanguageTagWithModalProps> = ({
-  language,
-  repository,
-}) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  const languageSkills =
-    getAssociatedSkills(
-      filterSkillsByType(allSkills, "hard"),
-      language,
-      "hard",
-    ) || [];
-
-  const handleOpenModal = () => {
-    setIsModalOpen(true);
-  };
-
-  const handleCloseModal = () => {
-    setIsModalOpen(false);
-  };
-
-  const shouldOpenModal = languageSkills && languageSkills.length > 0;
-
-  const [groupedBy, setGroupedBy] = useState("category");
-  // Adjusted filtering based on the merged skills field
-  const filteredSkills = (languageSkills || []).filter(
-    (skill) => skill.isMainSkill,
-  );
-  const groupedSkills = groupSkills(groupedBy, languageSkills || []);
-
-  const projects: ProjectInterface[] = allProjects;
-  const certificates: CertificateInterface[] = allCertificates;
-  const allBlogs: BlogInterface[] = blogs;
-  const allMaterial: MaterialInterface[] = [
-    ...projects,
-    ...certificates,
-    ...allBlogs,
-  ];
-
-  const hasMaterial = isSkillAssociatedWithMaterial(language, allMaterial);
-
-  const options: FilterOption[] = [
-    { slug: "category", entryName: "Category" },
-    { slug: "none", entryName: "None" },
-  ];
-
-  const currentGroupedName =
-    options.find((option) => option.slug === groupedBy)?.entryName ||
-    "Category";
-
-  return (
-    <>
-      <Dialog>
-        <DialogTrigger>
-          <Tooltip>
-            <TooltipTrigger>
-              <Tag onClick={shouldOpenModal ? handleOpenModal : undefined}>
-                {language.name}
-              </Tag>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>{`View technologies related to ${language.name}`}</p>
-            </TooltipContent>
-          </Tooltip>
-        </DialogTrigger>
-        <DialogContent>
-          <div className="h-full w-full pt-6">
-            <HeadingTwo title={language.name} />
-          </div>
-          <ScrollArea className="h-full w-full">
-            <div className="px-6 pb-4">
-              {/* Grouping Dropdown */}
-              <div className="flex mt-4">
-                <div className="flex-grow mr-2 mt-2.5 text-right text-neutral-700 dark:text-neutral-300">
-                  Group by:
-                </div>
-                <DropdownMenu>
-                  <DropdownMenuTrigger className="w-48">
-                    <Button variant="default" className="w-full">
-                      <div className="flex items-start justify-between space-x-2 w-full">
-                        <span>{currentGroupedName}</span>
-                        <BsChevronDown
-                          fontSize={16}
-                          className="text-neutral-700 dark:text-neutral-200 mt-1"
-                        />
-                      </div>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent className="w-48">
-                    {options.map((option, index) => (
-                      <DropdownMenuItem
-                        key={index}
-                        className={`${
-                          option.slug === groupedBy ? "font-bold" : ""
-                        }`}
-                        onSelect={() => setGroupedBy(option.slug)}
-                      >
-                        {option.entryName}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </div>
-
-              {/* List of skills */}
-              <div className="space-y-1">
-                {groupedSkills.map((categoryData, index) => (
-                  <div key={index} className="text-center md:text-left">
-                    <HeadingThree title={categoryData.skillCategoryName} />
-                    <div className="flex flex-wrap flex-row justify-center z-10 md:justify-start">
-                      {categoryData.skills.map((skill, skillIndex) => (
-                        <SkillTag key={skillIndex} skill={skill} />
-                      ))}
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              {/* Links */}
-              {hasMaterial && (
-                <>
-                  <div className="text-center md:text-left">
-                    <HeadingThree title="Material" />
-                  </div>
-                  <div
-                    className="
-                      flex flex-wrap flex-col
-                      text-center md:text-left
-                      justify-start z-10 space-y-2"
-                  >
-                    <Link href={`/skills/${language.slug}`}>
-                      <div className="w-full">
-                        <Button variant="gradient" className="w-full">
-                          {`All ${language.name} Material`}
-                        </Button>
-                      </div>
-                    </Link>
-                  </div>
-                </>
-              )}
-            </div>
-          </ScrollArea>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-};
diff --git a/app/blogs/[slug]/page.tsx b/app/blogs/[slug]/page.tsx
index 2affce2d..dc3fe4bd 100644
--- a/app/blogs/[slug]/page.tsx
+++ b/app/blogs/[slug]/page.tsx
@@ -93,7 +93,7 @@ const BlogPage: React.FC<BlogPageProps> = ({ params }) => {
         </p>
       </div>
 
-      <Reader content={blogContent} />
+      <Reader content={blogContent} size="lg:prose-lg" />
 
       <div className="border-b border-gray-200 dark:border-neutral-600 pb-2" />
 
diff --git a/app/projects/[slug]/components/TabbedReader.tsx b/app/projects/[slug]/components/TabbedReader.tsx
index 7cdc98ea..aa248f72 100644
--- a/app/projects/[slug]/components/TabbedReader.tsx
+++ b/app/projects/[slug]/components/TabbedReader.tsx
@@ -69,13 +69,15 @@ const TabbedReader: React.FC<TabbedReaderProps> = ({ content }) => {
         {/* Options */}
         {hasFeatures && hasBlog && (
           <div className="flex justify-center items-center">
-            <TabsList className="
+            <TabsList
+              className="
               rounded-full
               w-full md:w-2/5
               flex flex-row space-x-1
               transition-colors duration-700
               md:text-lg
-              ">
+              "
+            >
               <TabsTrigger
                 value="features"
                 className="
@@ -106,11 +108,11 @@ const TabbedReader: React.FC<TabbedReaderProps> = ({ content }) => {
         {/* Content */}
         <TabsContent value="features">
           <HeadingTwo title="Features" />
-          <Reader content={content.features} />
+          <Reader content={content.features} size="lg:prose-lg" />
         </TabsContent>
         <TabsContent value="reflection">
           <HeadingTwo title="Reflection" />
-          <Reader content={content.blog} />
+          <Reader content={content.blog} size="lg:prose-lg" />
         </TabsContent>
       </Tabs>
     </div>
diff --git a/components/Filters/FilterPanel.tsx b/components/Filters/FilterPanel.tsx
index 3a22fcf9..192b1365 100644
--- a/components/Filters/FilterPanel.tsx
+++ b/components/Filters/FilterPanel.tsx
@@ -118,6 +118,7 @@ const FilterOverlay: React.FC<FilterOverlayProps> = ({
             bg-neutral-100 dark:bg-black
             px-4 py-0
             flex justify-between items-center
+            transition-all duration-700 ease-in-out
             rounded-t-2xl
           "
         >
diff --git a/components/Gallery/Gallery.tsx b/components/Gallery/Gallery.tsx
index 8a5042fe..60dd7e40 100644
--- a/components/Gallery/Gallery.tsx
+++ b/components/Gallery/Gallery.tsx
@@ -144,6 +144,7 @@ const Gallery: React.FC<GalleryProps> = ({ images, videos }) => {
                       text-neutral-700 dark:text-neutral-200 text-md
                       rounded-full
                       transition-colors duration-700
+                      px-6
                       "
                   >
                     <LiaImageSolid fontSize={20} />
@@ -160,6 +161,7 @@ const Gallery: React.FC<GalleryProps> = ({ images, videos }) => {
                       text-neutral-700 dark:text-neutral-200 text-md
                       rounded-full
                       transition-colors duration-700
+                      px-6
                   "
                   >
                     <LiaVideoSolid fontSize={20} />
diff --git a/components/Modal/LanguageModal.tsx b/components/Modal/LanguageModal.tsx
new file mode 100644
index 00000000..7895bc74
--- /dev/null
+++ b/components/Modal/LanguageModal.tsx
@@ -0,0 +1,213 @@
+"use client";
+
+import isSkillAssociatedWithMaterial from "@/actions/material/isSkillAssociatedWithMaterial";
+import filterSkillsByType from "@/actions/skills/filterSkillsByType";
+import getAssociatedSkills from "@/actions/skills/getAssociatedSkills";
+import groupSkills from "@/actions/skills/groupSkills";
+import SkillTag from "@/components/Tags/SkillTag";
+import Tag from "@/components/Tags/Tag";
+import HeadingThree from "@/components/Text/HeadingThree";
+import HeadingTwo from "@/components/Text/HeadingTwo";
+import { Button } from "@/components/shadcn/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogTrigger,
+} from "@/components/shadcn/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/shadcn/ui/dropdown-menu";
+import { ScrollArea } from "@/components/shadcn/ui/scroll-area";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/shadcn/ui/tooltip";
+import blogs from "@/database/blogs";
+import allCertificates from "@/database/certificates";
+import allProjects from "@/database/projects";
+import allSkills from "@/database/skills/skills";
+import FilterOption from "@/interfaces/filters/FilterOption";
+import BlogInterface from "@/interfaces/material/BlogInterface";
+import CertificateInterface from "@/interfaces/material/CertificateInterface";
+import MaterialInterface from "@/interfaces/material/MaterialInterface";
+import ProjectInterface from "@/interfaces/material/ProjectInterface";
+import SkillInterface from "@/interfaces/skills/SkillInterface";
+import Link from "next/link";
+import React, { useState } from "react";
+import { BsChevronDown } from "react-icons/bs";
+
+interface LanguageTagWithModalProps {
+  language: SkillInterface;
+  repository?: string;
+  handleOpenModal: () => void;
+  handleCloseModal: () => void;
+  isModalOpen: boolean;
+}
+
+/**
+ * Displays a tag for each language.
+ * If the language has skills or repositories, a modal is displayed when the tag is clicked.
+ * The modal displays the skills and repositories for the language.
+ * If the language does not have any skills or repositories, the modal cannot be opened.
+ *
+ * @param language (string): name of the language
+ * @param skills (Skill[]): list of skills for the language
+ * @param repositories (Repository[]): list of repositories for the language
+ * @returns (JSX.Element): language tag with modal (stack of the language
+ */
+const LanguageModal: React.FC<LanguageTagWithModalProps> = ({
+  language,
+  repository,
+}) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const languageSkills =
+    getAssociatedSkills(
+      filterSkillsByType(allSkills, "hard"),
+      language,
+      "hard",
+    ) || [];
+
+  const handleOpenModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const shouldOpenModal = languageSkills && languageSkills.length > 0;
+
+  const [groupedBy, setGroupedBy] = useState("category");
+  // Adjusted filtering based on the merged skills field
+  const filteredSkills = (languageSkills || []).filter(
+    (skill) => skill.isMainSkill,
+  );
+  const groupedSkills = groupSkills(groupedBy, languageSkills || []);
+
+  const projects: ProjectInterface[] = allProjects;
+  const certificates: CertificateInterface[] = allCertificates;
+  const allBlogs: BlogInterface[] = blogs;
+  const allMaterial: MaterialInterface[] = [
+    ...projects,
+    ...certificates,
+    ...allBlogs,
+  ];
+
+  const hasMaterial = isSkillAssociatedWithMaterial(language, allMaterial);
+
+  const options: FilterOption[] = [
+    { slug: "category", entryName: "Category" },
+    { slug: "none", entryName: "None" },
+  ];
+
+  const currentGroupedName =
+    options.find((option) => option.slug === groupedBy)?.entryName ||
+    "Category";
+
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger>
+          <Tooltip>
+            <TooltipTrigger>
+              <Tag onClick={shouldOpenModal ? handleOpenModal : undefined}>
+                {language.name}
+              </Tag>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{`View technologies related to ${language.name}`}</p>
+            </TooltipContent>
+          </Tooltip>
+        </DialogTrigger>
+        <DialogContent>
+          <div className="w-full h-full overflow-hidden">
+            <div className="w-full pt-6">
+              <HeadingTwo title={language.name} />
+            </div>
+
+            <ScrollArea className="h-full w-full">
+              <div className="px-6 pb-4">
+                {/* Grouping Dropdown */}
+                <div className="flex mt-4">
+                  <div className="flex-grow mr-2 mt-2.5 text-right text-neutral-700 dark:text-neutral-300">
+                    Group by:
+                  </div>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger className="w-48">
+                      <Button variant="default" className="w-full">
+                        <div className="flex items-start justify-between space-x-2 w-full">
+                          <span>{currentGroupedName}</span>
+                          <BsChevronDown
+                            fontSize={16}
+                            className="text-neutral-700 dark:text-neutral-200 mt-1"
+                          />
+                        </div>
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent className="w-48">
+                      {options.map((option, index) => (
+                        <DropdownMenuItem
+                          key={index}
+                          className={`${
+                            option.slug === groupedBy ? "font-bold" : ""
+                          }`}
+                          onSelect={() => setGroupedBy(option.slug)}
+                        >
+                          {option.entryName}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+
+                {/* List of skills */}
+                <div className="space-y-1">
+                  {groupedSkills.map((categoryData, index) => (
+                    <div key={index} className="text-center md:text-left">
+                      <HeadingThree title={categoryData.skillCategoryName} />
+                      <div className="flex flex-wrap flex-row justify-center z-10 md:justify-start">
+                        {categoryData.skills.map((skill, skillIndex) => (
+                          <SkillTag key={skillIndex} skill={skill} />
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {/* Links */}
+                {hasMaterial && (
+                  <>
+                    <div className="text-center md:text-left">
+                      <HeadingThree title="Material" />
+                    </div>
+                    <div
+                      className="
+												flex flex-wrap flex-col
+												text-center md:text-left
+												justify-start z-10 space-y-2"
+                    >
+                      <Link href={`/skills/${language.slug}`}>
+                        <div className="w-full">
+                          <Button variant="gradient" className="w-full">
+                            {`All ${language.name} Material`}
+                          </Button>
+                        </div>
+                      </Link>
+                    </div>
+                  </>
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default LanguageModal;
diff --git a/components/Reader/Reader.tsx b/components/Reader/Reader.tsx
index 0b1deca4..7d12804b 100644
--- a/components/Reader/Reader.tsx
+++ b/components/Reader/Reader.tsx
@@ -3,7 +3,8 @@ import React from "react";
 
 type ReaderProps = {
   content: string | undefined;
-  size?: "sm" | "base" | "md" | "lg";
+  //! just giving the size without prose does not work
+  size?: "lg:prose-sm" | "lg:prose-base" | "lg:prose-md" | "lg:prose-lg";
 };
 
 /**
@@ -16,7 +17,7 @@ const Reader: React.FC<ReaderProps> = ({ content, size = "lg" }) => {
     <article
       className={`
         prose
-        ${size && `lg:prose-${size}`}
+        ${size}
         dark:prose-invert
         prose-img:rounded-lg
         max-w-none
diff --git a/components/Tags/Tag.tsx b/components/Tags/Tag.tsx
index c12fbac4..76e21368 100644
--- a/components/Tags/Tag.tsx
+++ b/components/Tags/Tag.tsx
@@ -22,11 +22,13 @@ const Tag: React.FC<TagProps> = ({ children, onClick, hasHover }) => {
     bg-gray-200 dark:bg-red-950
     px-4 py-2 mr-2 mt-2 rounded-lg
     text-gray-500 dark:text-gray-300 font-semibold
-    transition-colors duration-700 ease-in-out
+    transition-all duration-700 ease-in-out
     border-2 border-gray-200 dark:border-red-950
+    shadow-sm
   `;
   const hoverClassName = `
     md:hover:border-gray-400 md:hover:dark:border-red-900
+    hover:shadow-md
     cursor-pointer
   `;