diff --git a/hooks/useCalculations.ts b/hooks/useCalculations.ts
index 435d947b..f65f6b67 100644
--- a/hooks/useCalculations.ts
+++ b/hooks/useCalculations.ts
@@ -1,25 +1,43 @@
 import { database } from "@/pages/_document";
 import { User } from "firebase/auth";
-import { get, ref, set, update } from "firebase/database";
+import { get, ref, set } from "firebase/database";
 import { useEffect, useState } from "react";
 import { useCustomAuth } from "./useCustomAuth";
 
-interface Calculation {
+export interface Notebook {
+  id: string;
+  name: string;
   input: string;
-  output: string;
+  output: string | null;
+  color?: string;
+}
+
+export const NOTEBOOK_COLORS = [
+  "#3b82f6",
+  "#ef4444",
+  "#22c55e",
+  "#f59e0b",
+  "#a855f7",
+  "#ec4899",
+  "#14b8a6",
+  "#f97316",
+];
+
+interface NotebooksData {
+  notebooks: Notebook[];
+  activeNotebookId: string;
 }
 
 interface UseCalculationsResult {
-  calculations: Calculation | null;
-  saveCalculations: (input: string, output: string) => void;
-  getCalculations: () => void;
+  notebooksData: NotebooksData | null;
+  saveNotebooks: (notebooks: Notebook[], activeNotebookId: string) => Promise<void>;
   isLoading: boolean;
   error: Error | null;
 }
 
 export const useCalculations = (): UseCalculationsResult => {
   const user: User | null = useCustomAuth();
-  const [calculations, setCalculations] = useState<Calculation | null>(null);
+  const [notebooksData, setNotebooksData] = useState<NotebooksData | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
   const [calculationsRef, setCalculationsRef] = useState<any>(null);
@@ -33,7 +51,7 @@ export const useCalculations = (): UseCalculationsResult => {
 
   useEffect(() => {
     if (!user) {
-      setCalculations(null);
+      setNotebooksData(null);
       setHasFetchedCalculations(false);
       setCalculationsRef(null);
     }
@@ -41,7 +59,7 @@ export const useCalculations = (): UseCalculationsResult => {
 
   useEffect(() => {
     if (!hasFetchedCalculations && calculationsRef) {
-      getCalculations(); // Pass the reference here
+      getCalculations();
       setHasFetchedCalculations(true);
     }
   }, [hasFetchedCalculations, calculationsRef]);
@@ -51,8 +69,29 @@ export const useCalculations = (): UseCalculationsResult => {
       setIsLoading(true);
       setError(null);
       const snapshot = await get(calculationsRef);
-      const data = snapshot.val() as Calculation;
-      setCalculations(data);
+      const data = snapshot.val();
+
+      if (!data) {
+        setNotebooksData(null);
+        return;
+      }
+
+      if (data.notebooks) {
+        setNotebooksData(data as NotebooksData);
+      } else if (data.input !== undefined) {
+        setNotebooksData({
+          notebooks: [
+            {
+              id: "1",
+              name: "General Expense",
+              input: data.input,
+              output: data.output ?? null,
+              color: NOTEBOOK_COLORS[0],
+            },
+          ],
+          activeNotebookId: "1",
+        });
+      }
     } catch (error) {
       setError(error as Error);
     } finally {
@@ -60,17 +99,13 @@ export const useCalculations = (): UseCalculationsResult => {
     }
   };
 
-  const saveCalculations = async (input: string, output: string) => {
+  const saveNotebooks = async (notebooks: Notebook[], activeNotebookId: string) => {
     try {
       setIsLoading(true);
       setError(null);
 
       if (calculationsRef) {
-        if (!calculations) {
-          await set(calculationsRef, { input, output });
-        } else {
-          await update(calculationsRef, { input, output });
-        }
+        await set(calculationsRef, { notebooks, activeNotebookId });
       }
     } catch (error) {
       setError(error as Error);
@@ -79,5 +114,5 @@ export const useCalculations = (): UseCalculationsResult => {
     }
   };
 
-  return { calculations, saveCalculations, getCalculations, isLoading, error };
+  return { notebooksData, saveNotebooks, isLoading, error };
 };
diff --git a/pages/index.tsx b/pages/index.tsx
index 3996c25e..e6a38aff 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -13,7 +13,7 @@ import { app, database } from "@/pages/_document";
 import { GoogleAuthProvider, User, getAuth, signInWithPopup } from "firebase/auth";
 import { get, ref, set } from "firebase/database";
 import { motion } from "framer-motion";
-import { Calendar, CloudOff, Edit2, Moon, Save, Sun, Trash2 } from "lucide-react";
+import { Calendar, CloudOff, Edit2, Moon, Plus, Save, Sun, Trash2, X } from "lucide-react";
 import { ChangeEvent, useCallback, useEffect, useRef, useState } from "react";
 import dynamic from "next/dynamic";
 import "tailwindcss/tailwind.css";
@@ -32,11 +32,40 @@ food: 250
 Variable = prev*2
 Total=sum-variable`;
 
+type Notebook = {
+  id: string;
+  name: string;
+  input: string;
+  output: string | null;
+  color?: string;
+};
+
+const NOTEBOOK_COLORS = [
+  "#3b82f6",
+  "#ef4444",
+  "#22c55e",
+  "#f59e0b",
+  "#a855f7",
+  "#ec4899",
+  "#14b8a6",
+  "#f97316",
+];
+
+let nextId = 1;
+
 export default function Index() {
   const user: User | null = useCustomAuth();
-  const { calculations, saveCalculations, isLoading } = useCalculations();
-  const [input, setInput] = useState<string>(initialInput);
-  const [output, setOutput] = useState<string | null>();
+  const { notebooksData, saveNotebooks, isLoading } = useCalculations();
+  const [notebooks, setNotebooks] = useState<Notebook[]>([
+    {
+      id: String(nextId++),
+      name: "General Expense",
+      input: initialInput,
+      output: null,
+      color: NOTEBOOK_COLORS[0],
+    },
+  ]);
+  const [activeNotebookId, setActiveNotebookId] = useState("1");
   const [, setSum] = useState(0);
   const [, setPrev] = useState(0);
 
@@ -44,9 +73,12 @@ export default function Index() {
   const [singOutModal, toggleSingOutModal] = useState(false);
   const [clearButtonModal, toggleClearButtonModal] = useState(false);
 
-  const [notebookName, setNotebookName] = useState("General Expense");
+  const activeNotebook = notebooks.find((n) => n.id === activeNotebookId)!;
+
   const [isEditingName, setIsEditingName] = useState(false);
   const nameInputRef = useRef<HTMLInputElement>(null);
+  const [colorPickerFor, setColorPickerFor] = useState<string | null>(null);
+  const colorPickerRef = useRef<HTMLDivElement>(null);
 
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const outputRef = useRef<HTMLTextAreaElement>(null);
@@ -58,32 +90,76 @@ export default function Index() {
   const [scrollTop, setScrollTop] = useState(0);
   const iconContainerRef = useRef<HTMLDivElement>(null);
 
+  const importFileRef = useRef<HTMLInputElement>(null);
+
   const [deductionDates, setDeductionDates] = useState<{
     [name: string]: number;
-  }>(() => {
-    if (typeof window !== "undefined") {
-      const stored = localStorage.getItem("deductionDates");
-      return stored ? JSON.parse(stored) : {};
+  }>({});
+
+  useEffect(() => {
+    const stored = localStorage.getItem("deductionDates");
+    if (stored) {
+      try {
+        setDeductionDates(JSON.parse(stored));
+      } catch {}
     }
-    return {};
-  });
+  }, []);
   const [showDatePickerFor, setShowDatePickerFor] = useState<string | null>(null);
   const [datePickerValue, setDatePickerValue] = useState<string>("1");
   const [showNextMonth, setShowNextMonth] = useState(false);
 
+  const setActiveInput = (val: string) =>
+    setNotebooks((prev) => prev.map((n) => (n.id === activeNotebookId ? { ...n, input: val } : n)));
+  const setActiveOutput = (val: string | null) =>
+    setNotebooks((prev) =>
+      prev.map((n) => (n.id === activeNotebookId ? { ...n, output: val } : n)),
+    );
+  const setActiveName = (val: string) =>
+    setNotebooks((prev) => prev.map((n) => (n.id === activeNotebookId ? { ...n, name: val } : n)));
+  const setNotebookColor = (id: string, color: string) =>
+    setNotebooks((prev) => prev.map((n) => (n.id === id ? { ...n, color } : n)));
+
+  const input = activeNotebook?.input ?? "";
+  const output = activeNotebook?.output ?? null;
+  const notebookName = activeNotebook?.name ?? "";
+  const latestInputRef = useRef(input);
+  latestInputRef.current = input;
+
   useEffect(() => {
-    if (calculations) {
-      setInput(calculations.input);
-      setOutput(calculations.output);
+    if (notebooksData && notebooksData.notebooks.length) {
+      setNotebooks(notebooksData.notebooks);
+      setActiveNotebookId(notebooksData.activeNotebookId);
+      quillEditorRef.current = null;
     }
-  }, [calculations]);
+  }, [notebooksData]);
 
   useEffect(() => {
     if (!user) {
-      setInput(initialInput);
-      setOutput("");
+      nextId = 1;
+      const defaultNotebooks: Notebook[] = [
+        {
+          id: String(nextId++),
+          name: "General Expense",
+          input: initialInput,
+          output: null,
+          color: NOTEBOOK_COLORS[0],
+        },
+      ];
+      setNotebooks(defaultNotebooks);
+      setActiveNotebookId(defaultNotebooks[0].id);
       setDeductionDates({});
       localStorage.removeItem("deductionDates");
+      quillEditorRef.current = null;
+      setTimeout(() => {
+        const editor = getQuillEditor();
+        if (editor) {
+          const currentText = (editor.getText() || "").replace(/\n$/, "");
+          if (currentText !== latestInputRef.current) {
+            editor.setText(latestInputRef.current || "");
+          }
+          requestAnimationFrame(() => highlightSyntax(editor));
+        }
+      }, 0);
     }
   }, [user]);
 
@@ -105,6 +181,18 @@ export default function Index() {
     }
   }, [isEditingName]);
 
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (colorPickerRef.current && !colorPickerRef.current.contains(e.target as Node)) {
+        setColorPickerFor(null);
+      }
+    };
+    if (colorPickerFor) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [colorPickerFor]);
+
   const highlightSyntax = useCallback((editor: any) => {
     if (!editor) return;
     const text = editor.getText() || "";
@@ -176,31 +264,36 @@ export default function Index() {
       attachQuillScroll();
       const text = (editor.getText() || "").replace(/\n$/, "");
       if (text !== input) {
-        setInput(text);
+        setActiveInput(text);
       }
       requestAnimationFrame(() => highlightSyntax(editor));
     },
     [input, highlightSyntax, attachQuillScroll, getQuillEditor],
   );
 
+  const syncEditor = useCallback(() => {
+    const editor = getQuillEditor();
+    if (!editor) return false;
+    const currentInput = latestInputRef.current;
+    const currentText = (editor.getText() || "").replace(/\n$/, "");
+    if (currentText !== currentInput) {
+      editor.setText(currentInput || "");
+    }
+    requestAnimationFrame(() => highlightSyntax(editor));
+    attachQuillScroll();
+    return true;
+  }, [highlightSyntax, getQuillEditor, attachQuillScroll]);
+
   useEffect(() => {
-    let rafId: number;
-    const trySync = () => {
-      const editor = getQuillEditor();
-      if (!editor) {
-        rafId = requestAnimationFrame(trySync);
-        return;
-      }
-      const currentText = (editor.getText() || "").replace(/\n$/, "");
-      if (currentText !== input) {
-        editor.setText(input || "");
-      }
-      requestAnimationFrame(() => highlightSyntax(editor));
-      attachQuillScroll();
+    let rafId = 0;
+    if (syncEditor()) return;
+    const retry = () => {
+      if (syncEditor()) return;
+      rafId = requestAnimationFrame(retry);
     };
-    trySync();
+    rafId = requestAnimationFrame(retry);
     return () => cancelAnimationFrame(rafId);
-  }, [input, highlightSyntax, getQuillEditor, attachQuillScroll]);
+  }, [syncEditor, input]);
 
   useEffect(() => {
     attachQuillScroll();
@@ -264,16 +357,91 @@ export default function Index() {
   };
 
   const saveToDatabase = () => {
-    if (user && input && output) {
-      if (input !== initialInput && output !== null) {
-        saveCalculations(input, output);
-      }
+    if (user) {
+      saveNotebooks(notebooks, activeNotebookId);
     }
   };
 
+  const exportNotebooks = () => {
+    const data = { notebooks, activeNotebookId, exportedAt: new Date().toISOString() };
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "instant-calc-notebooks.json";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const importNotebooks = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (evt) => {
+      try {
+        const data = JSON.parse(evt.target?.result as string);
+        if (!data.notebooks || !Array.isArray(data.notebooks) || !data.notebooks.length) {
+          alert("Invalid file: no notebooks found.");
+          return;
+        }
+        for (const nb of data.notebooks) {
+          if (!nb.id || !nb.name || nb.input === undefined) {
+            alert("Invalid file: notebook missing required fields (id, name, input).");
+            return;
+          }
+        }
+        const merged = data.notebooks.map((nb: Notebook) => ({
+          ...nb,
+          color: nb.color || NOTEBOOK_COLORS[0],
+        }));
+        setNotebooks(merged);
+        setActiveNotebookId(data.activeNotebookId || merged[0].id);
+        quillEditorRef.current = null;
+        if (user) saveNotebooks(merged, data.activeNotebookId || merged[0].id);
+      } catch {
+        alert("Invalid file: could not parse JSON.");
+      }
+    };
+    reader.readAsText(file);
+    e.target.value = "";
+  };
+
   const clearButtonCallback = () => {
-    setInput("");
-    setOutput("");
+    setActiveInput("");
+    setActiveOutput("");
+  };
+
+  const addNotebook = () => {
+    const id = String(nextId++);
+    const color = NOTEBOOK_COLORS[notebooks.length % NOTEBOOK_COLORS.length];
+    const nb: Notebook = {
+      id,
+      name: `Notebook ${notebooks.length + 1}`,
+      input: "",
+      output: null,
+      color,
+    };
+    setNotebooks((prev) => [...prev, nb]);
+    setActiveNotebookId(id);
+    quillEditorRef.current = null;
+  };
+
+  const removeNotebook = (id: string) => {
+    if (notebooks.length <= 1) return;
+    setNotebooks((prev) => prev.filter((n) => n.id !== id));
+    if (activeNotebookId === id) {
+      const idx = notebooks.findIndex((n) => n.id === id);
+      const next = notebooks[idx - 1] || notebooks[idx + 1];
+      setActiveNotebookId(next.id);
+      quillEditorRef.current = null;
+    }
+  };
+
+  const switchNotebook = (id: string) => {
+    if (id === activeNotebookId) return;
+    setIsEditingName(false);
+    setActiveNotebookId(id);
+    quillEditorRef.current = null;
   };
 
   const clearButton = () => {
@@ -282,7 +450,7 @@ export default function Index() {
 
   const handleInput = useCallback(async () => {
     if (!input) {
-      setOutput("");
+      setActiveOutput("");
       return;
     }
     const lines = input.split("\n");
@@ -362,7 +530,7 @@ export default function Index() {
       customOutput = "-";
     }
 
-    setOutput(newOutput);
+    setActiveOutput(newOutput);
     setSum(keywordValues.tempSum);
     setPrev(keywordValues.tempPrev);
     variablesRef.current = { ...variables };
@@ -379,7 +547,7 @@ export default function Index() {
     const newInput = processedLines.join("\n");
 
     if (newInput !== input) {
-      setInput(newInput);
+      setActiveInput(newInput);
     }
   }, [input, deductionDates, showNextMonth]);
 
@@ -392,7 +560,7 @@ export default function Index() {
   };
 
   const handleNotebookNameChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setNotebookName(event.target.value);
+    setActiveName(event.target.value);
   };
 
   const handleNotebookNameClick = () => {
@@ -445,73 +613,249 @@ export default function Index() {
 
         <div className="max-w-7xl mx-auto">
           <motion.div
-            className="bg-yellow-100 dark:bg-gray-800 rounded-t-lg shadow-lg p-4 flex justify-between items-center"
+            className="bg-yellow-100 dark:bg-gray-800 rounded-t-lg shadow-lg p-4"
             initial={{ opacity: 0, y: 50 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5, delay: 0.2 }}
           >
-            {isEditingName ? (
-              <input
-                ref={nameInputRef}
-                type="text"
-                value={notebookName}
-                onChange={handleNotebookNameChange}
-                onBlur={handleNotebookNameBlur}
-                onKeyDown={handleNotebookNameKeyDown}
-                className="text-xl font-semibold bg-transparent text-gray-800 dark:text-white focus:outline-none border-b-2 border-gray-300 dark:border-gray-600"
-              />
-            ) : (
-              <h2
-                className="text-xl font-semibold text-gray-800 dark:text-white cursor-pointer flex items-center group"
-                onClick={handleNotebookNameClick}
-              >
-                {notebookName}
-                <Edit2 className="w-4 h-4 ml-2 text-gray-400 dark:text-gray-500 group-hover:text-blue-500 transition-colors" />
-                <span className="ml-1 text-xs text-gray-400 dark:text-gray-500 opacity-0 group-hover:opacity-100 transition-opacity">
-                  rename
-                </span>
-              </h2>
-            )}
-            <div className="flex flex-wrap gap-1.5 md:gap-2 items-center">
-              <button
-                onClick={toggleDarkMode}
-                className="p-1.5 md:p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200"
-              >
-                {darkMode ? (
-                  <Sun className="w-4 h-4 md:w-5 md:h-5" />
-                ) : (
-                  <Moon className="w-4 h-4 md:w-5 md:h-5" />
-                )}
-              </button>
-              {!user ? (
-                <button
-                  onClick={signInWithGoogle}
-                  className="group relative px-2.5 py-1.5 md:px-4 md:py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded-full hover:bg-blue-500 hover:text-white transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 flex items-center text-xs md:text-sm"
-                >
-                  <CloudOff className="w-3.5 h-3.5 md:w-5 md:h-5 md:mr-2" />
-                  <span className="hidden md:inline">Sign In</span>
-                  <div className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
-                    Sign in to save your notebook to the cloud
+            <div className="flex justify-between items-center">
+              <div className="flex items-center gap-1 overflow-x-auto flex-shrink min-w-0">
+                {notebooks.map((nb) => (
+                  <div
+                    key={nb.id}
+                    onClick={() => {
+                      if (nb.id !== activeNotebookId) switchNotebook(nb.id);
+                    }}
+                    className={`group relative flex items-center gap-1 px-2.5 py-1 rounded-md cursor-pointer text-sm whitespace-nowrap transition-colors ${
+                      nb.id === activeNotebookId
+                        ? "bg-white dark:bg-gray-700 shadow text-gray-800 dark:text-white font-medium"
+                        : "text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-700/50"
+                    }`}
+                  >
+                    {nb.id === activeNotebookId && isEditingName ? (
+                      <input
+                        ref={nameInputRef}
+                        type="text"
+                        value={notebookName}
+                        onChange={handleNotebookNameChange}
+                        onBlur={handleNotebookNameBlur}
+                        onKeyDown={handleNotebookNameKeyDown}
+                        className="w-24 md:w-32 bg-transparent text-gray-800 dark:text-white focus:outline-none border-b border-gray-300 dark:border-gray-600 text-sm"
+                      />
+                    ) : (
+                      <>
+                        <div className="group relative">
+                          <span
+                            className={`w-2.5 h-2.5 rounded-full inline-block flex-shrink-0 ${user ? "cursor-pointer" : "cursor-not-allowed"}`}
+                            style={{ backgroundColor: nb.color || NOTEBOOK_COLORS[0] }}
+                            onClick={(e) => {
+                              if (!user) return;
+                              e.stopPropagation();
+                              setColorPickerFor((prev) => (prev === nb.id ? null : nb.id));
+                            }}
+                          />
+                          {!user && (
+                            <div className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
+                              Sign in for more features
+                            </div>
+                          )}
+                        </div>
+                        <span
+                          onClick={() => {
+                            if (nb.id !== activeNotebookId) switchNotebook(nb.id);
+                          }}
+                        >
+                          {nb.name}
+                        </span>
+                        {nb.id === activeNotebookId && (
+                          <div className="group relative">
+                            <Edit2
+                              onClick={(e) => {
+                                if (!user) return;
+                                e.stopPropagation();
+                                handleNotebookNameClick();
+                              }}
+                              className={`w-3 h-3 transition-colors ${user ? "text-gray-400 hover:text-blue-500 cursor-pointer" : "text-gray-300 dark:text-gray-600 cursor-not-allowed"}`}
+                            />
+                            {!user && (
+                              <div className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
+                                Sign in for more features
+                              </div>
+                            )}
+                          </div>
+                        )}
+                      </>
+                    )}
+                    {notebooks.length > 1 && (
+                      <div className="group relative">
+                        <X
+                          onClick={(e) => {
+                            if (!user) return;
+                            e.stopPropagation();
+                            removeNotebook(nb.id);
+                          }}
+                          className={`w-3 h-3 transition-opacity ${user ? "text-gray-400 hover:text-red-500 opacity-0 group-hover:opacity-100 cursor-pointer" : "text-gray-300 dark:text-gray-600 cursor-not-allowed opacity-30"}`}
+                        />
+                        {!user && (
+                          <div className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
+                            Sign in for more features
+                          </div>
+                        )}
+                      </div>
+                    )}
+                    {colorPickerFor === nb.id && (
+                      <div
+                        ref={colorPickerRef}
+                        className="absolute top-full left-0 mt-1 z-50 bg-white dark:bg-gray-700 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 p-1.5 flex gap-1"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        {NOTEBOOK_COLORS.map((c) => (
+                          <span
+                            key={c}
+                            className={`w-5 h-5 rounded-full cursor-pointer border-2 transition-all hover:scale-110 ${
+                              nb.color === c
+                                ? "border-gray-900 dark:border-white scale-110"
+                                : "border-transparent"
+                            }`}
+                            style={{ backgroundColor: c }}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setNotebookColor(nb.id, c);
+                              setColorPickerFor(null);
+                            }}
+                          />
+                        ))}
+                      </div>
+                    )}
                   </div>
-                </button>
-              ) : (
-                <button
-                  onClick={saveToDatabase}
-                  className="px-2.5 py-1.5 md:px-4 md:py-2 bg-green-500 text-white rounded-full hover:bg-green-600 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 flex items-center text-xs md:text-sm"
-                >
-                  <Save className="w-3.5 h-3.5 md:w-5 md:h-5 md:mr-2" />
-                  <span className="hidden md:inline">Save</span>
-                </button>
-              )}
-              {user && (
+                ))}
+                <div className="group relative flex-shrink-0">
+                  <button
+                    onClick={user ? addNotebook : undefined}
+                    disabled={!user}
+                    className={`p-1 rounded-md transition-colors flex-shrink-0 ${
+                      user
+                        ? "text-gray-500 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-700/50 hover:text-blue-500 cursor-pointer"
+                        : "text-gray-300 dark:text-gray-600 cursor-not-allowed"
+                    }`}
+                  >
+                    <Plus className="w-5 h-5" />
+                  </button>
+                  {!user && (
+                    <div className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
+                      Sign in for more features
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="flex flex-wrap gap-1.5 md:gap-2 items-center flex-shrink-0">
                 <button
-                  onClick={clearButton}
-                  className="px-2.5 py-1.5 md:px-4 md:md:py-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 flex items-center text-xs md:text-sm"
+                  onClick={toggleDarkMode}
+                  className="p-1.5 md:p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200"
                 >
-                  <Trash2 className="w-3.5 h-3.5 md:w-5 md:h-5 md:mr-2" />
-                  <span className="hidden md:inline">Clear</span>
+                  {darkMode ? (
+                    <Sun className="w-4 h-4 md:w-5 md:h-5" />
+                  ) : (
+                    <Moon className="w-4 h-4 md:w-5 md:h-5" />
+                  )}
                 </button>
-              )}
+                <div className="group relative">
+                  <button
+                    onClick={user ? exportNotebooks : undefined}
+                    disabled={!user}
+                    className={`p-1.5 md:p-2 rounded-full transition-colors duration-200 ${
+                      user
+                        ? "bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer"
+                        : "bg-gray-100 dark:bg-gray-800 text-gray-300 dark:text-gray-600 cursor-not-allowed"
+                    }`}
+                  >
+                    <svg
+                      className="w-4 h-4 md:w-5 md:h-5"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 11l5-5m0 0l5 5m-5-5v12"
+                      />
+                    </svg>
+                  </button>
+                  {!user && (
+                    <div className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
+                      Sign in for more features
+                    </div>
+                  )}
+                </div>
+                <input
+                  ref={importFileRef}
+                  type="file"
+                  accept=".json"
+                  className="hidden"
+                  onChange={importNotebooks}
+                />
+                <div className="group relative">
+                  <button
+                    onClick={user ? () => importFileRef.current?.click() : undefined}
+                    disabled={!user}
+                    className={`p-1.5 md:p-2 rounded-full transition-colors duration-200 ${
+                      user
+                        ? "bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer"
+                        : "bg-gray-100 dark:bg-gray-800 text-gray-300 dark:text-gray-600 cursor-not-allowed"
+                    }`}
+                  >
+                    <svg
+                      className="w-4 h-4 md:w-5 md:h-5"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 13l5 5m0 0l5-5m-5 5V6"
+                      />
+                    </svg>
+                  </button>
+                  {!user && (
+                    <div className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
+                      Sign in for more features
+                    </div>
+                  )}
+                </div>
+                {!user ? (
+                  <button
+                    onClick={signInWithGoogle}
+                    className="group relative px-2.5 py-1.5 md:px-4 md:py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded-full hover:bg-blue-500 hover:text-white transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 flex items-center text-xs md:text-sm"
+                  >
+                    <CloudOff className="w-3.5 h-3.5 md:w-5 md:h-5 md:mr-2" />
+                    <span className="hidden md:inline">Sign In</span>
+                    <div className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
+                      Sign in to save your notebook to the cloud
+                    </div>
+                  </button>
+                ) : (
+                  <button
+                    onClick={saveToDatabase}
+                    className="px-2.5 py-1.5 md:px-4 md:py-2 bg-green-500 text-white rounded-full hover:bg-green-600 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 flex items-center text-xs md:text-sm"
+                  >
+                    <Save className="w-3.5 h-3.5 md:w-5 md:h-5 md:mr-2" />
+                    <span className="hidden md:inline">Save</span>
+                  </button>
+                )}
+                {user && (
+                  <button
+                    onClick={clearButton}
+                    className="px-2.5 py-1.5 md:px-4 md:md:py-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 flex items-center text-xs md:text-sm"
+                  >
+                    <Trash2 className="w-3.5 h-3.5 md:w-5 md:h-5 md:mr-2" />
+                    <span className="hidden md:inline">Clear</span>
+                  </button>
+                )}
+              </div>
             </div>
           </motion.div>