diff --git a/notes-aid/src/app/[year]/[branch]/[semester]/page.tsx b/notes-aid/src/app/[year]/[branch]/[semester]/page.tsx
index 7a7b236..d0026a2 100644
--- a/notes-aid/src/app/[year]/[branch]/[semester]/page.tsx
+++ b/notes-aid/src/app/[year]/[branch]/[semester]/page.tsx
@@ -165,7 +165,7 @@ const EngineeringCurriculum: React.FC = () => {
   return (
     <div className="min-h-screen bg-base-100">
       <div className="w-full p-4 md:p-6">
-        <div className="max-w-full mx-auto bg-base-300 rounded-lg shadow-xs p-4 md:p-6">
+        <div className="max-w-full mx-auto bg-base-200 rounded-lg shadow-xs p-4 md:p-6">
           <div className="mb-6 md:mb-8 text-center md:text-left">
             <h1 className="text-lg md:text-2xl font-bold mb-2 text-base-content">
               Engineering Curriculum of {branch.toUpperCase()} /{" "}
@@ -195,10 +195,10 @@ const EngineeringCurriculum: React.FC = () => {
                       firstModuleKey ? parseInt(firstModuleKey) : 1
                     )
                   }}
-                  className={`p-4 rounded-4xl cursor-pointer transition-all flex-1 max-w-[120px] sm:max-w-[150px] md:max-w-none text-center 
+                  className={`p-4 hover:bg-base-300 rounded-4xl border-dashed cursor-pointer border border-neutral-800 rounded-[0.75rem] transition-all flex-1 max-w-[120px] sm:max-w-[150px] md:max-w-none text-center 
                       ${
                         selectedSubject === key
-                          ? "bg-neutral text-neutral-content border-white shadow-xl"
+                          ? "bg-base-300 text-base-content shadow-xl"
                           : "bg-base-200  text-base-content  border-gray-200 shadow-sm"
                       }
                     `}
@@ -207,14 +207,14 @@ const EngineeringCurriculum: React.FC = () => {
                     <Icon
                       className={`w-6 h-6 ${
                         selectedSubject === key
-                          ? " text-neutral-content"
+                          ? " text-base-content"
                           : "text-base-content"
                       }`}
                     />
                     <h3
                       className={`font-medium dark:text-base text-sm md:text-base ${
                         selectedSubject === key
-                          ? "text-neutral-content"
+                          ? "text-base-content"
                           : "text-base-content"
                       }`}
                     >
@@ -236,7 +236,7 @@ const EngineeringCurriculum: React.FC = () => {
           </div>
 
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 ">
-            <div className="space-y-3 border border-border p-4 rounded-lg">
+            <div className="space-y-3 border border-base-300 border-dashed p-8 rounded-lg">
               <h2 className=" md:text-lg font-bold  text-base-content">
                 Important Links
               </h2>
@@ -249,7 +249,7 @@ const EngineeringCurriculum: React.FC = () => {
                         <a
                           href={pyq.url}
                           target="_blank"
-                          className="btn inline-block px-4 py-2 mt-2 text-sm font-medium bg-neutral text-neutral-content btn-soft btn-neutral border-1 border-primary"
+                          className="rounded-selector btn inline-block px-4 py-2 mt-2 text-sm font-medium bg-base-300 text-base-content btn-soft btn-neutral outline-[0rem] outline-dashed hover:outline-base-300 hover:outline-2 hover:duration-30 0 duration-300"
                           key={index}
                         >
                           {pyq.title}
@@ -287,18 +287,18 @@ const EngineeringCurriculum: React.FC = () => {
 
               <button
                 onClick={handleResetProgress}
-                className="w-full px-4 py-2 text-sm font-medium text-warning-content bg-warning rounded-lg transition-colors duration-200 flex items-center justify-center gap-2"
+                className="w-full px-4 py-2 text-sm font-medium text-warning-content bg-warning rounded-lg transition-colors duration-200 flex items-center justify-center gap-2 hover:outline-warning hover:outline-[0.25rem]"
               >
                 <RotateCcw className="w-4 h-4" />
                 Reset Progress
               </button>
             </div>
 
-            <div className="md:col-span-2 bg-base-200 text-base-content rounded-lg p-4 md:p-6 border border-border">
+            <div className="md:col-span-2 bg-base-200 text-base-content rounded-lg p-4 md:p-6 border-dashed border-base-300 border-[0.05rem]">
               <h2 className="text-base md:text-lg font-bold mb-1 text-base-content">
                 {subjects[selectedSubject].name} - Module {selectedModule || 1}
               </h2>
-              <p className=" text-red-500 mb-4">
+              <p className=" text-error-content  mb-4">
                 These videos only serve as explanations for the college notes,
                 so please refer to the notes to study.
               </p>
diff --git a/notes-aid/src/app/globals.css b/notes-aid/src/app/globals.css
index 25ad212..70ea99d 100644
--- a/notes-aid/src/app/globals.css
+++ b/notes-aid/src/app/globals.css
@@ -4,11 +4,42 @@ layer(base);
 @plugin "daisyui" {
   themes: all;
 }
-
 @custom-variant dark (&:is(.dark *));
 
-
-
+@plugin "daisyui/theme" {
+  name: "ShadCN";
+  default: false;
+  prefersdark: false;
+  color-scheme: "dark";
+  --color-base-100: oklch(5% 0 0);
+  --color-base-200: oklch(0% 0 0);
+  --color-base-300: #27272a;
+  --color-base-content: oklch(100% 0 0);
+  --color-primary: oklch(100% 0 0);
+  --color-primary-content: oklch(0% 0 0);
+  --color-secondary: oklch(100% 0 0);
+  --color-secondary-content: oklch(0% 0 0);
+  --color-accent: oklch(100% 0 0);
+  --color-accent-content: oklch(0% 0 0);
+  --color-neutral: oklch(20% 0 0);
+  --color-neutral-content: oklch(100% 0 0);
+  --color-info: oklch(100% 0 0);
+  --color-info-content: oklch(0% 0 0);
+  --color-success: #24db6f;
+  --color-success-content: oklch(84% 0.238 128.85);
+  --color-warning: oklch(28% 0.066 53.813);
+  --color-warning-content: oklch(85% 0.199 91.936);
+  --color-error: oklch(25% 0.092 26.042);
+  --color-error-content: oklch(70% 0.191 22.216);
+  --radius-selector: 1rem;
+  --radius-field: 0.25rem;
+  --radius-box: 0.25rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.21875rem;
+  --border: 0.5px;
+  --depth: 0;
+  --noise: 0;
+  }
 .text-gray {
   color: #C2C0B6;
 }
diff --git a/notes-aid/src/components/ModuleCard.tsx b/notes-aid/src/components/ModuleCard.tsx
index 1735597..7b74849 100644
--- a/notes-aid/src/components/ModuleCard.tsx
+++ b/notes-aid/src/components/ModuleCard.tsx
@@ -14,7 +14,7 @@ interface ModuleCardProps {
 
 const ModuleCard: React.FC<ModuleCardProps> = ({
   module,
-  topics,
+  topics, 
   isActive,
   onClick,
   numberOfVideos,
@@ -52,21 +52,25 @@ const ModuleCard: React.FC<ModuleCardProps> = ({
       <div
         onClick={onClick}
         className={`
+        bg-base-100
         p-3 
         rounded-lg 
-        
         transition-all 
         cursor-pointer 
         shadow-md
         hover:shadow-2xl
+        border-[0.05rem]
+        border-base-200
+        border-dashed
+        hover:bg-base-300
         ${
           isActive
-            ? "border-blue-500 bg-base-100"
-            : "border-slate-200 bg-base-300"
+            ? "border-base-300 bg-base-300"
+            : "border-base-100 bg-base-100"
         }
       `}
       >
-        <div className="flex flex-col gap-2 ">
+        <div className="flex flex-col gap-2">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-3">
               <h3 className={` font-semibold text-base-content`}>
diff --git a/notes-aid/src/components/Navbar.tsx b/notes-aid/src/components/Navbar.tsx
index c2a8bc4..f0fee92 100644
--- a/notes-aid/src/components/Navbar.tsx
+++ b/notes-aid/src/components/Navbar.tsx
@@ -287,8 +287,12 @@ const Navbar = () => {
     return null;
   }
 
+  const handleBestCalc = () => {
+    window.location.href = "https://redisitic.xyz";
+  };
+
   return (
-    <nav className="w-full py-4 px-6 border-b transition-colors duration-200 bg-base-300 ">
+    <nav className="w-full py-4 px-6 border-base-300 border-dashed border-b-[0.01rem] transition-colors duration-200 bg-base-200 ">
       <div className="container mx-auto flex items-center justify-between">
         <div className="flex items-center space-x-4">
           <Link href="/">
@@ -408,8 +412,7 @@ const Navbar = () => {
               </div>
             )}
           </div>
-
-
+          <button className="hidden" onClick={handleBestCalc}>Click this for the Best Calculator ever!!!</button>
           <ThemeSwitcher/>
         </div>
       </div>
diff --git a/notes-aid/src/components/ProgressBar.tsx b/notes-aid/src/components/ProgressBar.tsx
index 3026f44..a4ea229 100644
--- a/notes-aid/src/components/ProgressBar.tsx
+++ b/notes-aid/src/components/ProgressBar.tsx
@@ -9,9 +9,9 @@ export default function ProgressBar({ total, completed }: ProgressBarProps) {
   const percentage = total > 0 ? (completed / total) * 100 : 0;
 
   return (
-    <div className="w-full bg-gray-200 rounded-full h-1 overflow-hidden">
+    <div className="w-full bg-base-300 rounded-full h-1 overflow-hidden">
       <div
-        className="h-full bg-neutral bg-icons transition-all duration-500 range range-neutral"
+        className="h-full bg-success bg-icons transition-all duration-500 range range-neutral"
         style={{ width: `${percentage}%` }}
       />
     </div>
diff --git a/notes-aid/src/components/ThemeChanger.tsx b/notes-aid/src/components/ThemeChanger.tsx
index 97a5fd6..6a8c488 100644
--- a/notes-aid/src/components/ThemeChanger.tsx
+++ b/notes-aid/src/components/ThemeChanger.tsx
@@ -5,6 +5,7 @@ const ThemeSwitcher = () => {
   const themes = [
     "light",
     "dark",
+    "ShadCN",
     "cupcake",
     "bumblebee",
     "emerald",
diff --git a/notes-aid/src/components/TopicList.tsx b/notes-aid/src/components/TopicList.tsx
index 1647ab2..dac0d29 100644
--- a/notes-aid/src/components/TopicList.tsx
+++ b/notes-aid/src/components/TopicList.tsx
@@ -74,7 +74,7 @@ const TopicList: React.FC<TopicListProps> = ({
           Study Materials for Module {moduleNumber}
         </h5>
       )}
-      <div className="flex flex-wrap gap-2">
+      <div className="flex flex-wrap gap-4">
         {notesLink.map((note: NotesLink, noteIndex: number) => (
           <React.Fragment key={`note-${noteIndex}`}>
             <a
@@ -82,7 +82,7 @@ const TopicList: React.FC<TopicListProps> = ({
               href={note.url}
               target="_blank"
               rel="noopener noreferrer"
-              className="btn inline-flex items-center gap-2 px-4 py-2 bg-neutral text-neutral-content  border-1 border-primary"
+              className="btn rounded-selector inline-flex items-center gap-2 px-4 py-5 duration-300 hover:duration-300 bg-base-300 text-base-content outline-dashed outline-0 hover:outline-2 outline-base-300"
             >
               <BookOpen className="w-4 h-4" />
               {note.title}
@@ -130,16 +130,23 @@ const TopicList: React.FC<TopicListProps> = ({
 
           return (
             <div
-              key={index}
-              className="bg-base-100 rounded-lg border overflow-hidden"
-            >
+                key={index}
+                className={`rounded-lg overflow-hidden ${
+                  openTopicIndex === index
+                    ? "border border-t-0 border-4 border-solid border-base-300"
+                    : ""
+                } bg-base-100`}
+              >
+
               <ProgressBar
                 total={topic.videos?.length ?? 0}
                 completed={completedTopics}
               />
               <div
                 onClick={() => toggleTopic(index)}
-                className="p-3 cursor-pointer bg-base-300 transition-colors"
+                className={`p-3 cursor-pointer hover:bg-base-300 transition-colors ${
+                  openTopicIndex === index ? "bg-base-300" : "bg-base-100"
+                }`}
               >
                 <div className="flex items-start gap-3">
                   <div className="p-2 bg-base-100 rounded-sm">
@@ -170,8 +177,8 @@ const TopicList: React.FC<TopicListProps> = ({
               >
                 <div className="p-3 pt-0">
                   {topic.videos && topic.videos.length > 0 ? (
-                    <div className="mt-3 border-t dark:border-cardsBorder pt-3">
-                      <h5 className="text-sm font-medium text-base-content mb-2">
+                    <div className="dark:border-cardsBorder pt-3">
+                      <h5 className="text-sm font-large font-bold my-2 text-base-content ml-2">
                         Lecture Videos
                       </h5>
                       <VideoAccordion
diff --git a/notes-aid/src/components/Video.tsx b/notes-aid/src/components/Video.tsx
index dcc00f5..670224c 100644
--- a/notes-aid/src/components/Video.tsx
+++ b/notes-aid/src/components/Video.tsx
@@ -49,7 +49,7 @@ function Video({
 
   return (
     <>
-      <div className="flex items-center gap-2 hover:bg-base-200 ">
+      <div className="flex items-center gap-2 hover:bg-base-300 ">
         <button
           onClick={() => {
             updateVideoProgress(moduleKey, videoKey, topicKey);
@@ -66,7 +66,7 @@ function Video({
 
         <div
           onClick={() => toggleVideo(index)}
-          className="p-2 cursor-pointer hover:bg-base-200  flex justify-between items-center flex-1 gap-2"
+          className="p-2 cursor-pointer hover:bg-base-300  flex justify-between items-center flex-1 gap-2"
         >
           <span className="text-sm font-medium text-base-content">
             {video.title}
diff --git a/notes-aid/src/components/VideoAccordion.tsx b/notes-aid/src/components/VideoAccordion.tsx
index 476f203..353c108 100644
--- a/notes-aid/src/components/VideoAccordion.tsx
+++ b/notes-aid/src/components/VideoAccordion.tsx
@@ -36,7 +36,7 @@ const VideoAccordion: React.FC<{
         
         return(<div
           key={index}
-          className=" rounded-lg  justify-center overflow-hidden bg-base-300 hover:bg-base-200  p-2 w-full flex flex-col"
+          className=" rounded-lg justify-center overflow-hidden bg-base-100 hover:bg-base-300  p-2 w-full flex flex-col"
         >
           <Video
             checked={checked[index]}