diff --git a/src/app/graphs/page.tsx b/src/app/graphs/page.tsx
index 6c96c50..b1ce078 100644
--- a/src/app/graphs/page.tsx
+++ b/src/app/graphs/page.tsx
@@ -127,6 +127,7 @@ export default function DesmosGraphPage(): React.JSX.Element {
           {functions.map((func, index) => (
             <div
               key={func.id}
+              className="function-input-container"
               style={{
                 display: "flex",
                 alignItems: "center",
@@ -139,6 +140,7 @@ export default function DesmosGraphPage(): React.JSX.Element {
                   color: PLOT_COLORS[index % PLOT_COLORS.length],
                   fontWeight: "bold",
                   fontSize: "1.2rem",
+                  minWidth: "fit-content",
                 }}
               >
                 ƒ<sub>{func.id}</sub>(x)=
@@ -155,6 +157,7 @@ export default function DesmosGraphPage(): React.JSX.Element {
                   fontSize: "1rem",
                   border: `1px solid #ccc`,
                   borderRadius: "4px",
+                  minWidth: "120px",
                 }}
               />
               <button
@@ -175,6 +178,7 @@ export default function DesmosGraphPage(): React.JSX.Element {
               color: "white",
               borderRadius: "4px",
               cursor: "pointer",
+              fontSize: "0.9rem",
             }}
           >
             + Add Function
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d9bf8c9..2b91a22 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import "../styles/app.scss";
 import "../styles/tailwind.css";
 import DockElement from "../components/DockElement";
 import GitHubStars from "../components/GitHubStars";
+import MainWrapper from "../components/MainWrapper";
 
 export const metadata: Metadata = {
   title: {
@@ -98,8 +99,14 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={` bg-gray-900`}>
-        <main className="pt-4">{children}</main>
+      <head>
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+        />
+      </head>
+      <body className="bg-gray-900 overflow-x-hidden">
+        <MainWrapper>{children}</MainWrapper>
         <DockElement />
         <GitHubStars />
       </body>
diff --git a/src/app/notebook/page.tsx b/src/app/notebook/page.tsx
index 5ebaa6c..eca9c52 100644
--- a/src/app/notebook/page.tsx
+++ b/src/app/notebook/page.tsx
@@ -77,12 +77,13 @@ export default function NotebookPage() {
   const renderedContent = useMemo(() => parseContent(content), [content]);
 
   return (
-    <div className="notebook-container page">
+    <div className="notebook-container">
       <div className="editor-pane">
         <textarea
           value={content}
           onChange={(e) => setContent(e.target.value)}
           className="editor-textarea"
+          placeholder="Start typing your markdown here..."
         />
       </div>
       <div
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7f3cb75..059a4b1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,9 +11,9 @@ export const metadata: Metadata = {
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center p-8 page relative">
-      {/* Background stars */}
-      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+    <main className="flex min-h-screen flex-col items-center justify-center p-4 sm:p-6 lg:p-8 relative pb-24">
+      {/* Background stars - hidden on mobile, visible on larger screens */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none hidden sm:block">
         <div className="absolute top-20 left-10 text-yellow-300 animate-pulse">
           ✦
         </div>
@@ -55,50 +55,61 @@ export default function Home() {
         </div>
       </div>
 
-      <div className="text-center mb-12 z-10 relative">
-        <h1 className="text-5xl font-bold mb-2 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
+      <div className="text-center mb-8 sm:mb-12 z-10 relative px-4">
+        <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-2 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
           Docerium
         </h1>
-        <p className="text-lg text-gray-400">
+        <p className="text-base sm:text-lg text-gray-400 max-w-md mx-auto">
           An all-in-one web application for teaching and learning.
         </p>
       </div>
 
-      <div className="grid md:grid-cols-3 gap-8 text-center z-10 relative">
-        <PixelCard variant="blue">
-          <div className="absolute inset-0 flex flex-col items-center justify-center p-6">
-            <Link href="/whiteboard">
-              <div className="flex items-center justify-center mb-3">
-                <ProjectIcon size={32} className="mr-3" />
-                <h2 className="text-2xl font-semibold">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 text-center z-10 relative w-full max-w-6xl px-4">
+        <PixelCard variant="blue" className="mx-auto">
+          <div className="absolute inset-0 flex flex-col items-center justify-center p-4 sm:p-6">
+            <Link href="/whiteboard" className="text-center">
+              <div className="flex flex-col sm:flex-row items-center justify-center mb-3">
+                <ProjectIcon size={24} className="sm:mr-3 mb-2 sm:mb-0" />
+                <h2 className="text-lg sm:text-xl lg:text-2xl font-semibold">
                   Interactive Whiteboard
                 </h2>
               </div>
-              <p>Sketch ideas, draw diagrams, and collaborate in real-time.</p>
+              <p className="text-sm sm:text-base">
+                Sketch ideas, draw diagrams, and collaborate in real-time.
+              </p>
             </Link>
           </div>
         </PixelCard>
 
-        <PixelCard variant="blue">
-          <div className="absolute inset-0 flex flex-col items-center justify-center p-6">
-            <Link href="/graphs">
-              <div className="flex items-center justify-center mb-3">
-                <GraphIcon size={32} className="mr-3" />
-                <h2 className="text-2xl font-semibold">Graphing Calculator</h2>
+        <PixelCard variant="blue" className="mx-auto">
+          <div className="absolute inset-0 flex flex-col items-center justify-center p-4 sm:p-6">
+            <Link href="/graphs" className="text-center">
+              <div className="flex flex-col sm:flex-row items-center justify-center mb-3">
+                <GraphIcon size={24} className="sm:mr-3 mb-2 sm:mb-0" />
+                <h2 className="text-lg sm:text-xl lg:text-2xl font-semibold">
+                  Graphing Calculator
+                </h2>
               </div>
-              <p>Plot functions, zoom, and analyze mathematical expressions.</p>
+              <p className="text-sm sm:text-base">
+                Plot functions, zoom, and analyze mathematical expressions.
+              </p>
             </Link>
           </div>
         </PixelCard>
 
-        <PixelCard variant="blue">
-          <div className="absolute inset-0 flex flex-col items-center justify-center p-6">
-            <Link href="/notebook">
-              <div className="flex items-center justify-center mb-3">
-                <FileIcon size={32} className="mr-3" />
-                <h2 className="text-2xl font-semibold">Live Notebook</h2>
+        <PixelCard
+          variant="blue"
+          className="mx-auto md:col-span-2 lg:col-span-1"
+        >
+          <div className="absolute inset-0 flex flex-col items-center justify-center p-4 sm:p-6">
+            <Link href="/notebook" className="text-center">
+              <div className="flex flex-col sm:flex-row items-center justify-center mb-3">
+                <FileIcon size={24} className="sm:mr-3 mb-2 sm:mb-0" />
+                <h2 className="text-lg sm:text-xl lg:text-2xl font-semibold">
+                  Live Notebook
+                </h2>
               </div>
-              <p>
+              <p className="text-sm sm:text-base">
                 A split-screen markdown editor that renders LaTeX as you type.
               </p>
             </Link>
@@ -107,15 +118,15 @@ export default function Home() {
       </div>
 
       {/* Bottom section with additional info and stars */}
-      <div className="mt-16 mb-20 text-center z-10 relative">
+      <div className="mt-12 sm:mt-16 mb-20 sm:mb-24 text-center z-10 relative px-4">
         <div className="flex items-center justify-center space-x-2 mb-4">
-          <span className="text-yellow-300">✦</span>
-          <p className="text-gray-500 text-sm">
+          <span className="text-yellow-300 hidden sm:inline">✦</span>
+          <p className="text-gray-500 text-xs sm:text-sm">
             Built for educators, students, and creative minds
           </p>
-          <span className="text-blue-300">✧</span>
+          <span className="text-blue-300 hidden sm:inline">✧</span>
         </div>
-        <div className="flex items-center justify-center space-x-6 text-xs text-gray-600">
+        <div className="flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-6 text-xs text-gray-600">
           <span className="flex items-center space-x-1">
             <span className="text-green-400">●</span>
             <span>Real-time collaboration</span>
diff --git a/src/components/DockElement.tsx b/src/components/DockElement.tsx
index 034148a..0bb46af 100644
--- a/src/components/DockElement.tsx
+++ b/src/components/DockElement.tsx
@@ -22,5 +22,16 @@ const items = [
 ];
 
 export default function DockElement() {
-  return <Dock items={items} panelHeight={68} baseItemSize={50} />;
+  return (
+    <>
+      {/* Mobile dock - smaller and simpler */}
+      <div className="block sm:hidden">
+        <Dock items={items} panelHeight={56} baseItemSize={40} />
+      </div>
+      {/* Desktop dock - original size */}
+      <div className="hidden sm:block">
+        <Dock items={items} panelHeight={68} baseItemSize={50} />
+      </div>
+    </>
+  );
 }
diff --git a/src/components/GitHubStars.tsx b/src/components/GitHubStars.tsx
index c7f477c..6ebb6c9 100644
--- a/src/components/GitHubStars.tsx
+++ b/src/components/GitHubStars.tsx
@@ -28,26 +28,26 @@ const GitHubStars = () => {
   }, []);
 
   return (
-    <div className="fixed bottom-20 right-6 z-50">
+    <div className="fixed bottom-16 sm:bottom-20 right-3 sm:right-6 z-50">
       {stars !== null ? (
         <a
           href="https://github.com/docerium/docerium.com"
           target="_blank"
           rel="noopener noreferrer"
-          className="group flex items-center space-x-2 bg-black/40 hover:bg-black/60 backdrop-blur-md border border-gray-600/50 hover:border-gray-500/70 transition-all duration-300 px-3 py-2 rounded-full shadow-lg hover:shadow-xl text-sm text-gray-300 hover:text-white"
+          className="group flex items-center space-x-2 bg-black/40 hover:bg-black/60 backdrop-blur-md border border-gray-600/50 hover:border-gray-500/70 transition-all duration-300 px-2 sm:px-3 py-1.5 sm:py-2 rounded-full shadow-lg hover:shadow-xl text-xs sm:text-sm text-gray-300 hover:text-white"
         >
           <MarkGithubIcon
-            size={14}
-            className="transition-transform group-hover:scale-110"
+            size={12}
+            className="sm:w-[14px] sm:h-[14px] transition-transform group-hover:scale-110"
           />
           <span className="font-medium">{stars}</span>
           <span className="text-xs opacity-80 group-hover:opacity-100">★</span>
         </a>
       ) : (
-        <div className="flex items-center space-x-2 bg-black/40 backdrop-blur-md border border-gray-600/50 px-3 py-2 rounded-full animate-pulse">
-          <div className="h-3 w-3 bg-gray-500/50 rounded-full"></div>
-          <div className="h-3 w-8 bg-gray-500/50 rounded"></div>
-          <div className="h-3 w-3 bg-gray-500/50 rounded-full"></div>
+        <div className="flex items-center space-x-2 bg-black/40 backdrop-blur-md border border-gray-600/50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-full animate-pulse">
+          <div className="h-2.5 w-2.5 sm:h-3 sm:w-3 bg-gray-500/50 rounded-full"></div>
+          <div className="h-2.5 w-6 sm:h-3 sm:w-8 bg-gray-500/50 rounded"></div>
+          <div className="h-2.5 w-2.5 sm:h-3 sm:w-3 bg-gray-500/50 rounded-full"></div>
         </div>
       )}
     </div>
diff --git a/src/components/MainWrapper.tsx b/src/components/MainWrapper.tsx
new file mode 100644
index 0000000..d644b13
--- /dev/null
+++ b/src/components/MainWrapper.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+
+export default function MainWrapper({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+
+  // For notebook, graphs, and whiteboard, don't add padding
+  const isFullPageApp =
+    pathname === "/notebook" ||
+    pathname === "/graphs" ||
+    pathname === "/whiteboard";
+
+  return <main className={isFullPageApp ? "" : "pt-4"}>{children}</main>;
+}
diff --git a/src/components/PixelCard.tsx b/src/components/PixelCard.tsx
index 1294648..562c424 100644
--- a/src/components/PixelCard.tsx
+++ b/src/components/PixelCard.tsx
@@ -305,7 +305,7 @@ export default function PixelCard({
   return (
     <div
       ref={containerRef}
-      className={`h-[400px] w-[300px] relative overflow-hidden grid place-items-center aspect-[4/5] border border-[#27272a] rounded-[25px] isolate transition-colors duration-200 ease-[cubic-bezier(0.5,1,0.89,1)] select-none ${className}`}
+      className={`h-[280px] w-[280px] sm:h-[320px] sm:w-[320px] lg:h-[400px] lg:w-[300px] relative overflow-hidden grid place-items-center aspect-square lg:aspect-[4/5] border border-[#27272a] rounded-[20px] sm:rounded-[25px] isolate transition-colors duration-200 ease-[cubic-bezier(0.5,1,0.89,1)] select-none ${className}`}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       onFocus={finalNoFocus ? undefined : onFocus}
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 1773a1b..9d781cf 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -2,6 +2,13 @@
   margin-top: 1vh;
   height: 96vh;
   width: 100vw;
+  overflow-x: hidden; /* Prevent horizontal scroll on mobile */
+
+  // For notebook and other full-height pages
+  &.notebook-container {
+    margin-top: 0;
+    height: 100vh;
+  }
 }
 
 .dock-container {
@@ -12,6 +19,11 @@
   display: flex;
   justify-content: center;
   padding-bottom: 8px;
+
+  /* Ensure dock doesn't interfere with mobile scrolling */
+  @media (max-width: 640px) {
+    padding-bottom: 4px;
+  }
 }
 
 /* Star animations */
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index d4b732f..ddaa1aa 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -16,6 +16,14 @@ body {
   font-family: "Mozilla Text", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
+
+  // Mobile improvements
+  @media (max-width: 768px) {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    overflow-x: hidden;
+  }
 }
 .layout {
   display: flex;
@@ -38,4 +46,11 @@ body {
   height: 4vh;
   padding: 1rem;
   z-index: 100000;
+
+  // Mobile adjustments
+  @media (max-width: 768px) {
+    height: 3vh;
+    padding: 0.5rem;
+    font-size: 0.9rem;
+  }
 }
diff --git a/src/styles/graphs.scss b/src/styles/graphs.scss
index 30b3fff..a6dcd8e 100644
--- a/src/styles/graphs.scss
+++ b/src/styles/graphs.scss
@@ -36,17 +36,54 @@
 
 .floating-controls {
   position: absolute;
-  top: 50%;
+  top: 20px;
   left: 20px;
-  transform: translateY(-50%);
+  right: 20px;
   background: #121212;
   backdrop-filter: blur(10px);
-  padding: 1.5rem;
+  padding: 1rem;
   border-radius: 12px;
   z-index: 10;
   border: 1px solid rgba(255, 255, 255, 0.8);
-  width: 400px;
   box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.1);
+
+  // Mobile styles
+  @media (max-width: 768px) {
+    top: 10px;
+    left: 10px;
+    right: 10px;
+    padding: 0.75rem;
+
+    // Make the controls stack vertically on mobile
+    .function-input-container {
+      flex-direction: column;
+      gap: 0.5rem;
+
+      span {
+        font-size: 1rem !important;
+      }
+
+      input {
+        width: 100% !important;
+        font-size: 0.9rem !important;
+      }
+
+      .remove-button {
+        align-self: flex-start;
+        padding: 0.4rem 0.6rem;
+        font-size: 0.8rem;
+      }
+    }
+  }
+
+  // Desktop styles
+  @media (min-width: 769px) {
+    width: 400px;
+    top: 50%;
+    transform: translateY(-50%);
+    right: auto;
+    padding: 1.5rem;
+  }
 }
 
 .floating-controls input[type="text"] {
diff --git a/src/styles/notebook.scss b/src/styles/notebook.scss
index 5b23736..d32a34d 100644
--- a/src/styles/notebook.scss
+++ b/src/styles/notebook.scss
@@ -1,37 +1,112 @@
 .notebook-container {
   display: flex;
-  width: 100%;
+  width: 100vw;
+  height: 100vh;
+
+  // Mobile: stack vertically
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
 }
 
 .editor-pane,
 .preview-pane {
   width: 50%;
-  height: 100%;
+  height: 100vh;
   padding: 1rem;
   overflow-y: auto;
-  overflow: hidden;
   box-sizing: border-box;
+
+  // Mobile: full width and adjust height
+  @media (max-width: 768px) {
+    width: 100%;
+    height: 50vh;
+    padding: 0.75rem;
+  }
+
+  // Small mobile: even smaller padding
+  @media (max-width: 480px) {
+    padding: 0.5rem;
+  }
 }
 
 .editor-textarea {
   width: 100%;
   height: 100%;
-  border: 1px solid #ccc;
+  border: 1px solid #444;
   border-radius: 4px;
   padding: 1rem;
   font-family: monospace;
   font-size: 1rem;
   resize: none;
+  background-color: #1a1a1a;
+  color: #ffffff;
+  outline: none;
+
+  &:focus {
+    border-color: #666;
+  }
+
+  // Mobile adjustments
+  @media (max-width: 768px) {
+    padding: 0.75rem;
+    font-size: 0.9rem;
+  }
+
+  @media (max-width: 480px) {
+    padding: 0.5rem;
+    font-size: 0.85rem;
+  }
 }
 
 .preview-pane {
-  border-left: 1px solid #ccc;
+  border-left: 1px solid #444;
+  background-color: #1e1e1e;
+  color: #e0e0e0;
+
+  // Mobile: change border orientation
+  @media (max-width: 768px) {
+    border-left: none;
+    border-top: 1px solid #444;
+  }
+
   h1,
   h2,
   h3 {
     margin-top: 0;
+    color: #ffffff;
+
+    // Mobile: smaller headings
+    @media (max-width: 768px) {
+      font-size: 1.2rem;
+    }
+  }
+
+  h1 {
+    @media (max-width: 768px) {
+      font-size: 1.4rem;
+    }
+  }
+
+  p {
+    color: #e0e0e0;
+    // Mobile: better line height and spacing
+    @media (max-width: 768px) {
+      font-size: 0.9rem;
+      line-height: 1.5;
+      margin-bottom: 0.75rem;
+    }
   }
+
+  .katex {
+    // Mobile: smaller math equations
+    @media (max-width: 768px) {
+      font-size: 0.9em;
+    }
+  }
+
   .katex-error {
-    color: red;
+    color: #ff6b6b;
+    font-size: 0.8rem;
   }
 }
diff --git a/src/styles/whiteboard.scss b/src/styles/whiteboard.scss
index 1ba2534..0ddbc28 100644
--- a/src/styles/whiteboard.scss
+++ b/src/styles/whiteboard.scss
@@ -3,6 +3,21 @@
   --color-primary-darker: #d64c7e;
   --color-primary-darkest: #e86e99;
   --color-primary-light: #dcbec9;
+
+  // Mobile optimizations
+  @media (max-width: 768px) {
+    // Ensure touch events work properly
+    touch-action: none;
+
+    // Make sure toolbar is accessible on mobile
+    .Island {
+      // Make toolbar items larger for touch
+      .ToolIcon {
+        min-width: 44px;
+        min-height: 44px;
+      }
+    }
+  }
 }
 
 .custom-styles .excalidraw.theme--dark {
@@ -11,3 +26,13 @@
   --color-primary-darkest: #e86e99;
   --color-primary-light: #dcbec9;
 }
+
+// Ensure the whiteboard page takes full space on mobile
+.page.custom-styles {
+  @media (max-width: 768px) {
+    padding: 0;
+    margin: 0;
+    height: 100vh;
+    overflow: hidden;
+  }
+}
