diff --git a/src/app/bus/page.tsx b/src/app/bus/page.tsx
index 9764e58..569caa4 100644
--- a/src/app/bus/page.tsx
+++ b/src/app/bus/page.tsx
@@ -1,4 +1,4 @@
-import { BusButtons } from "@/components/Bus/busButton";
+//import { BusButtons } from "@/components/Bus/busButton";
 
 const busData = [
   { slug: 'bus-1', name: 'Bus 1' },
@@ -9,10 +9,45 @@ const busData = [
   { slug: 'bus-6', name: 'Bus 6' },
 ];
 
-export default function BusPage() {
+const BusPage: React.FC = () => {
   return (
-    <div>
-      <BusButtons buses={busData} />
+    <div className="min-h-screen bg-white">
+      {/* Header */}
+      <div className="px-6 py-8">
+        <div className="text-center mb-8">
+          <div className="relative">
+            <h1 className="text-[30px] font-bold text-black">College Bus</h1>
+            {/* Decorative wave underline */}
+            <svg 
+              className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-24 h-3" 
+              viewBox="0 0 96 12" 
+              fill="none"
+            >
+              <path 
+                d="M2 6C8 2, 16 10, 24 6C32 2, 40 10, 48 6C56 2, 64 10, 72 6C80 2, 88 10, 94 6" 
+                stroke="#000000" 
+                strokeWidth="1" 
+                strokeLinecap="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        {/* Subject Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-4 md:gap-y-20 gap-4 px-10">
+          {busData.map((bus, index) => (
+            // Use BusButtons
+            <button
+              key={index}
+              className="bg-white border border-black rounded-lg py-7 text-center shadow-md"
+            >
+              <span className="text-2xl font-bold text-black">{bus.name}</span>
+            </button>
+          ))}
+        </div>
+      </div>
     </div>
   );
-}
\ No newline at end of file
+};
+
+export default BusPage;
diff --git a/src/app/floor/page.tsx b/src/app/floor/page.tsx
new file mode 100644
index 0000000..3120718
--- /dev/null
+++ b/src/app/floor/page.tsx
@@ -0,0 +1,50 @@
+const floors = [
+  { slug: 'Floor-1', name: 'Floor 1' },
+  { slug: 'Ground Floor', name: 'Ground Floor' },
+  { slug: 'Floor-2', name: 'Floor 2' },
+  { slug: 'Floor-3', name: 'Floor-3' },
+  { slug: 'Floor-4', name: 'Floor 4' },
+];
+
+const BusPage: React.FC = () => {
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Header */}
+      <div className="px-6 py-8">
+        <div className="text-center mb-8">
+          <div className="relative">
+            <h1 className="text-[30px] font-bold text-black">College Floor</h1>
+            {/* Decorative wave underline */}
+            <svg 
+              className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-24 h-3" 
+              viewBox="0 0 96 12" 
+              fill="none"
+            >
+              <path 
+                d="M2 6C8 2, 16 10, 24 6C32 2, 40 10, 48 6C56 2, 64 10, 72 6C80 2, 88 10, 94 6" 
+                stroke="#000000" 
+                strokeWidth="1" 
+                strokeLinecap="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        {/* Subject Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-4 md:gap-y-20 gap-4 px-10">
+          {floors.map((floor, index) => (
+            // Use BusButtons
+            <button
+              key={index}
+              className="bg-white border border-black rounded-lg py-7 text-center shadow-md"
+            >
+              <span className="text-2xl font-bold text-black">{floor.name}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BusPage;
diff --git a/src/app/studymaterial/page.tsx b/src/app/studymaterial/page.tsx
index 3465057..f65dcc9 100644
--- a/src/app/studymaterial/page.tsx
+++ b/src/app/studymaterial/page.tsx
@@ -1,17 +1,9 @@
-export default function Home() {
+import SemPage from "./pages/sem";
+
+export default function StudyMaterialPage() {
   return (
     <div>
-      <p>
-        in this page we need folder like strucutre basically you will dynamic slect the folder basically if there cse mech 
-        then slect cse the website should autoamtically all the folder inside the cse folder like taht 
-        then 
-        -2019 and 2024 schema 
-        -deptmarntent 
-        -sem 
-        -subject 
-        -notebook,textbook,question paper,notes,syllabus,previous year question paper,lab manual,lab record,lab experiment
-        -module wise or quesiton year wise questions
-      </p>
+      <SemPage />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/studymaterial/pages/sem.tsx b/src/app/studymaterial/pages/sem.tsx
new file mode 100644
index 0000000..d3ce8de
--- /dev/null
+++ b/src/app/studymaterial/pages/sem.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+const SemPage: React.FC = () => {
+  const semesters = [
+    'S1', 'S2', 'S3', 'S4', 'S5', 'S6', 'S7', 'S8'
+  ];
+
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Header */}
+      <div className="px-6 py-8">
+        <div className="text-center mb-8">
+          <div className="relative">
+            <h1 className="text-[30px] font-bold text-black">Study Material</h1>
+            {/* Decorative wave underline */}
+            <svg 
+              className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-24 h-3" 
+              viewBox="0 0 96 12" 
+              fill="none"
+            >
+              <path 
+                d="M2 6C8 2, 16 10, 24 6C32 2, 40 10, 48 6C56 2, 64 10, 72 6C80 2, 88 10, 94 6" 
+                stroke="#000000" 
+                strokeWidth="1" 
+                strokeLinecap="round"
+              />
+            </svg>
+          </div>
+          <p className="text-xl text-black font-semibold mt-4">SEM</p>
+        </div>
+
+        {/* Subject Grid */}
+        <div className="grid grid-cols-2 md:grid-cols-4 md:gap-y-20 gap-4 px-10">
+          {semesters.map((sem, index) => (
+            <button
+              key={index}
+              className="bg-white border border-black rounded-lg py-7 text-center shadow-md"
+            >
+              <span className="text-2xl font-bold text-black">{sem}</span>
+            </button>
+          ))}
+        </div>
+
+        {/* Footer Text */}
+        <div className="mt-8 px-2 text-center">
+          <p className="text-xs text-gray-500 leading-relaxed">
+            Stay focused, work hard, and believe in yourself
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SemPage;
diff --git a/src/components/Bus/busButton.tsx b/src/components/Bus/busButton.tsx
index 6b22d73..cfb00b7 100644
--- a/src/components/Bus/busButton.tsx
+++ b/src/components/Bus/busButton.tsx
@@ -9,7 +9,7 @@ type BusData = {
   name: string; // Display name for the bus
 };
 
-export const BusButtons = ({ buses }: { buses: BusData[] }) => {
+export const BusButtons = ({ buses }: { buses: BusData[] },) => {
   return (
     <div className="flex flex-col items-center justify-center min-h-screen p-4 bg-black">
       <div className="w-full max-w-sm space-y-4">
@@ -31,4 +31,4 @@ export const BusButtons = ({ buses }: { buses: BusData[] }) => {
       </div>
     </div>
   );
-};
\ No newline at end of file
+};