diff --git a/package.json b/package.json
index 859a31a..61c186c 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "nanoid": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.0",
     "react-hook-form": "^7.45.1",
     "react-toastify": "^9.1.3",
     "tailwindcss": "^3.3.2",
diff --git a/src/App.jsx b/src/App.jsx
index ee39f78..158d46d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,14 +1,17 @@
 import React from 'react';
-import { DndContext } from '@dnd-kit/core';
-import FormBuilder from './components/FormBuilder/FormBuilder';
+import { Routes, Route } from 'react-router-dom';
 import { FormProvider } from './context/FormContext';
+import Home from './pages/Home';
+import BuilderPage from './pages/BuilderPage';
 
 function App() {
   return (
     <FormProvider>
-      <div className="app-container h-screen flex flex-col">
-        <FormBuilder />
-      </div>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/builder" element={<BuilderPage />} />
+        <Route path="/builder/:id" element={<BuilderPage />} />
+      </Routes>
     </FormProvider>
   );
 }
diff --git a/src/components/FormBuilder/FormBuilderHeader.jsx b/src/components/FormBuilder/FormBuilderHeader.jsx
index 8b6e215..ba0d2f0 100644
--- a/src/components/FormBuilder/FormBuilderHeader.jsx
+++ b/src/components/FormBuilder/FormBuilderHeader.jsx
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { useForm } from '../../context/FormContext';
 import { toast } from 'react-toastify';
-import ComponentPreview from '../FormComponents/ComponentPreview';
+import { Link } from 'react-router-dom';
+import FormPreview from '../FormPreview/FormPreview';
 
 
 const FormBuilderHeader = () => {
@@ -12,6 +13,7 @@ const FormBuilderHeader = () => {
     importFormSchema,
     undo,
     redo,
+    saveFormToStorage,
     canUndo,
     canRedo
   } = useForm();
@@ -99,6 +101,10 @@ const FormBuilderHeader = () => {
     }
   };
 
+  const handleSave = () => {
+    saveFormToStorage();
+  };
+
   return (
     <header className="bg-white border-b border-gray-200 py-3 px-4 flex items-center justify-between shadow-sm">
       <div className="flex items-center space-x-4">
@@ -112,6 +118,7 @@ const FormBuilderHeader = () => {
               <polyline points="10 9 9 9 8 9"></polyline>
             </svg>
           </div>
+          <Link to="/" className="text-primary mr-4 text-sm underline">Home</Link>
           <h1 className="text-lg font-medium text-gray-800">
             {isEditingTitle ? (
               <input
@@ -197,7 +204,8 @@ const FormBuilderHeader = () => {
           </svg>
         </button>
         
-        <button 
+        <button
+          onClick={handleSave}
           className="ml-2 px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-dark transition-colors text-sm font-medium"
         >
           Save Form
@@ -274,11 +282,7 @@ const FormBuilderHeader = () => {
                   {JSON.stringify(formState.components, null, 2)}
                 </pre>
               ) : (
-                formState.components.map((component, idx) => (
-                  <div key={component.id} className="mb-4">
-                    <ComponentPreview component={component} />
-                  </div>
-                ))
+                <FormPreview form={formState} />
               )}
             </div>
           </div>
diff --git a/src/components/FormPreview/FormPreview.jsx b/src/components/FormPreview/FormPreview.jsx
new file mode 100644
index 0000000..c73b399
--- /dev/null
+++ b/src/components/FormPreview/FormPreview.jsx
@@ -0,0 +1,292 @@
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+const getValidationRules = (component) => {
+  const rules = {};
+  const validate = component.validate || {};
+
+  if (component.required || validate.required) {
+    rules.required = 'This field is required';
+  }
+  if (validate.minLength) {
+    rules.minLength = { value: parseInt(validate.minLength, 10), message: `Minimum length is ${validate.minLength}` };
+  }
+  if (validate.maxLength) {
+    rules.maxLength = { value: parseInt(validate.maxLength, 10), message: `Maximum length is ${validate.maxLength}` };
+  }
+  if (validate.min) {
+    rules.min = { value: parseFloat(validate.min), message: `Minimum value is ${validate.min}` };
+  }
+  if (validate.max) {
+    rules.max = { value: parseFloat(validate.max), message: `Maximum value is ${validate.max}` };
+  }
+  if (validate.pattern) {
+    try {
+      rules.pattern = { value: new RegExp(validate.pattern), message: 'Invalid format' };
+    } catch {
+      // Ignore invalid regex patterns
+    }
+  }
+
+  return rules;
+};
+
+const TabsContainer = ({ component, path, renderComponent }) => {
+  const [activeTab, setActiveTab] = useState(0);
+  const tabs = component.tabs || [];
+  const depth = path.split('.').length - 1;
+
+  return (
+    <div className={`mb-4 ${depth > 0 ? 'ml-4' : ''}`}>
+      <div className="flex border-b border-gray-200 bg-gray-50 rounded-t">
+        {tabs.map((tab, idx) => (
+          <button
+            key={idx}
+            type="button"
+            className={`px-4 py-2 ${depth > 0 ? 'text-xs' : 'text-sm'} font-medium border-r last:border-r-0 focus:outline-none ${
+              idx === activeTab ? 'text-primary border-b-2 border-primary bg-white' : 'text-gray-700'
+            }`}
+            onClick={() => setActiveTab(idx)}
+          >
+            {tab.label || `Tab ${idx + 1}`}
+          </button>
+        ))}
+      </div>
+      <div className="p-4 border border-t-0 border-gray-200 rounded-b">
+        {tabs[activeTab] && (tabs[activeTab].components || []).map((child) => (
+          <div key={child.id} className="mb-4">
+            {renderComponent(child, path)}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const ColumnsContainer = ({ component, path, renderComponent }) => (
+  <div className="flex gap-4 mb-4">
+    {(component.columns || []).map((column, idx) => (
+      <div key={idx} className="flex-1 space-y-4">
+        {(column.components || []).map((child) => (
+          <div key={child.id}>{renderComponent(child, path)}</div>
+        ))}
+      </div>
+    ))}
+  </div>
+);
+
+const PanelContainer = ({ component, path, renderComponent }) => (
+  <div className="border border-gray-300 rounded-md mb-4">
+    {component.title && (
+      <div className="bg-gray-50 border-b border-gray-200 p-2 text-sm font-medium">
+        {component.title}
+      </div>
+    )}
+    <div className="p-4 space-y-4">
+      {(component.components || []).map((child) => (
+        <div key={child.id}>{renderComponent(child, path)}</div>
+      ))}
+    </div>
+  </div>
+);
+
+const FormPreview = ({ form }) => {
+  const { register, handleSubmit, formState: { errors }, reset } = useForm();
+  const [submitted, setSubmitted] = useState(false);
+
+  const onSubmit = (data) => {
+    setSubmitted(true);
+    console.log('Form data:', data); // eslint-disable-line no-console
+    reset();
+  };
+
+  const renderComponent = (component, parentPath = '') => {
+    const name = parentPath ? `${parentPath}.${component.key}` : component.key;
+
+    switch (component.type) {
+      case 'textfield':
+      case 'email':
+      case 'phoneNumber':
+        return (
+          <div>
+            <label htmlFor={name} className="block text-sm font-medium text-gray-700 mb-1">
+              {component.label}
+            </label>
+            <input
+              id={name}
+              type={component.inputType || component.type === 'email' ? 'email' : component.type === 'phoneNumber' ? 'tel' : 'text'}
+              placeholder={component.placeholder}
+              className="w-full p-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary"
+              {...register(name, getValidationRules(component))}
+            />
+            {component.description && <p className="text-xs text-gray-500 mt-1">{component.description}</p>}
+            {errors[name] && <p className="text-error text-xs mt-1">{errors[name].message}</p>}
+          </div>
+        );
+      case 'textarea':
+        return (
+          <div>
+            <label htmlFor={name} className="block text-sm font-medium text-gray-700 mb-1">
+              {component.label}
+            </label>
+            <textarea
+              id={name}
+              rows={component.rows || 3}
+              placeholder={component.placeholder}
+              className="w-full p-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary"
+              {...register(name, getValidationRules(component))}
+            />
+            {component.description && <p className="text-xs text-gray-500 mt-1">{component.description}</p>}
+            {errors[name] && <p className="text-error text-xs mt-1">{errors[name].message}</p>}
+          </div>
+        );
+      case 'number':
+        return (
+          <div>
+            <label htmlFor={name} className="block text-sm font-medium text-gray-700 mb-1">
+              {component.label}
+            </label>
+            <input
+              id={name}
+              type="number"
+              placeholder={component.placeholder}
+              className="w-full p-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary"
+              {...register(name, getValidationRules(component))}
+            />
+            {component.description && <p className="text-xs text-gray-500 mt-1">{component.description}</p>}
+            {errors[name] && <p className="text-error text-xs mt-1">{errors[name].message}</p>}
+          </div>
+        );
+      case 'checkbox':
+        return (
+          <label className="flex items-center">
+            <input
+              type="checkbox"
+              className="mr-2 h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
+              {...register(name, getValidationRules(component))}
+            />
+            <span className="text-sm text-gray-700">{component.label}</span>
+            {errors[name] && <p className="text-error text-xs ml-2">{errors[name].message}</p>}
+          </label>
+        );
+      case 'selectboxes':
+        return (
+          <div>
+            <span className="block text-sm font-medium text-gray-700 mb-1">{component.label}</span>
+            <div className={`space-y-2 ${component.inline ? 'flex flex-wrap gap-4' : ''}`}>
+              {(component.values || []).map((option, idx) => (
+                <label key={idx} className="flex items-center text-sm">
+                  <input
+                    type="checkbox"
+                    className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded mr-2"
+                    {...register(`${name}.${option.value}`)}
+                  />
+                  {option.label}
+                </label>
+              ))}
+            </div>
+            {errors[name] && <p className="text-error text-xs mt-1">{errors[name].message}</p>}
+          </div>
+        );
+      case 'select':
+        return (
+          <div>
+            <label htmlFor={name} className="block text-sm font-medium text-gray-700 mb-1">
+              {component.label}
+            </label>
+            <select
+              id={name}
+              className="w-full p-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary"
+              {...register(name, getValidationRules(component))}
+            >
+              <option value="">{component.placeholder || 'Select...'}</option>
+              {(component.data?.values || []).map((opt, idx) => (
+                <option key={idx} value={opt.value}>{opt.label}</option>
+              ))}
+            </select>
+            {component.description && <p className="text-xs text-gray-500 mt-1">{component.description}</p>}
+            {errors[name] && <p className="text-error text-xs mt-1">{errors[name].message}</p>}
+          </div>
+        );
+      case 'radio':
+        return (
+          <div>
+            <span className="block text-sm font-medium text-gray-700 mb-1">{component.label}</span>
+            <div className={`space-y-2 ${component.inline ? 'flex flex-wrap gap-4' : ''}`}>
+              {(component.values || []).map((opt, idx) => (
+                <label key={idx} className="flex items-center text-sm">
+                  <input
+                    type="radio"
+                    value={opt.value}
+                    className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded mr-2"
+                    {...register(name, getValidationRules(component))}
+                  />
+                  {opt.label}
+                </label>
+              ))}
+            </div>
+            {errors[name] && <p className="text-error text-xs mt-1">{errors[name].message}</p>}
+          </div>
+        );
+      case 'datetime':
+        return (
+          <div>
+            <label htmlFor={name} className="block text-sm font-medium text-gray-700 mb-1">
+              {component.label}
+            </label>
+            <input
+              id={name}
+              type="date"
+              className="w-full p-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary"
+              {...register(name, getValidationRules(component))}
+            />
+            {component.description && <p className="text-xs text-gray-500 mt-1">{component.description}</p>}
+            {errors[name] && <p className="text-error text-xs mt-1">{errors[name].message}</p>}
+          </div>
+        );
+      case 'address':
+        return (
+          <div className="space-y-2">
+            <label className="block text-sm font-medium text-gray-700 mb-1">{component.label}</label>
+            {Object.entries(component.components || {}).map(([key, cfg]) => (
+              <input
+                key={key}
+                placeholder={cfg.placeholder}
+                className="w-full p-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary"
+                {...register(`${name}.${cfg.key}`, getValidationRules(cfg))}
+              />
+            ))}
+            {errors[name] && <p className="text-error text-xs mt-1">{errors[name].message}</p>}
+          </div>
+        );
+      case 'content':
+        return (
+          <div dangerouslySetInnerHTML={{ __html: component.html || '' }} />
+        );
+      case 'panel':
+        return <PanelContainer component={component} path={name} renderComponent={renderComponent} />;
+      case 'columns':
+        return <ColumnsContainer component={component} path={name} renderComponent={renderComponent} />;
+      case 'tabs':
+        return <TabsContainer component={component} path={name} renderComponent={renderComponent} />;
+      default:
+        return <div>Unsupported component: {component.type}</div>;
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      {(form.components || []).map((comp) => (
+        <div key={comp.id}>{renderComponent(comp)}</div>
+      ))}
+      <button type="submit" className="px-4 py-2 bg-primary text-white rounded-md">
+        {form?.settings?.submitButton?.text || 'Submit'}
+      </button>
+      {submitted && (
+        <p className="text-success mt-2">Form submitted successfully!</p>
+      )}
+    </form>
+  );
+};
+
+export default FormPreview;
diff --git a/src/context/FormContext.jsx b/src/context/FormContext.jsx
index 9011d69..9826b16 100644
--- a/src/context/FormContext.jsx
+++ b/src/context/FormContext.jsx
@@ -14,8 +14,8 @@ export const useForm = () => {
 };
 
 export const FormProvider = ({ children }) => {
-  // Form state with initial form structure
-  const [formState, setFormState] = useState({
+  const createEmptyForm = () => ({
+    id: nanoid(),
     title: 'Untitled Form',
     description: '',
     components: [],
@@ -29,6 +29,9 @@ export const FormProvider = ({ children }) => {
     },
   });
 
+  // Form state with initial form structure
+  const [formState, setFormState] = useState(createEmptyForm());
+
   // History for undo/redo functionality
   const [history, setHistory] = useState([]);
   const [historyIndex, setHistoryIndex] = useState(-1);
@@ -209,6 +212,42 @@ export const FormProvider = ({ children }) => {
     }
   }, [addToHistory]);
 
+  const saveFormToStorage = useCallback(() => {
+    const saved = JSON.parse(localStorage.getItem('savedForms') || '[]');
+    const id = formState.id || nanoid();
+    const updated = { ...formState, id };
+    const idx = saved.findIndex(f => f.id === id);
+    const entry = { id, title: updated.title, schema: updated };
+    if (idx >= 0) {
+      saved[idx] = entry;
+    } else {
+      saved.push(entry);
+    }
+    localStorage.setItem('savedForms', JSON.stringify(saved));
+    setFormState(updated);
+    toast.success('Form saved');
+  }, [formState]);
+
+  const loadFormFromStorage = useCallback((id) => {
+    const saved = JSON.parse(localStorage.getItem('savedForms') || '[]');
+    const entry = saved.find(f => f.id === id);
+    if (entry) {
+      setFormState(entry.schema);
+      setHistory([entry.schema]);
+      setHistoryIndex(0);
+      toast.success('Form loaded');
+    } else {
+      toast.error('Form not found');
+    }
+  }, []);
+
+  const initializeNewForm = useCallback(() => {
+    const empty = createEmptyForm();
+    setFormState(empty);
+    setHistory([empty]);
+    setHistoryIndex(0);
+  }, []);
+
   // Helper function to create a new component based on type, with options override
   const createComponent = (type, options = {}) => {
     const baseComponent = {
@@ -557,6 +596,9 @@ export const FormProvider = ({ children }) => {
     addComponentToTab,
     addComponentToColumn,
     addComponentToContainer,
+    saveFormToStorage,
+    loadFormFromStorage,
+    initializeNewForm,
     canUndo: historyIndex > 0,
     canRedo: historyIndex < history.length - 1,
   };
diff --git a/src/main.jsx b/src/main.jsx
index 12b9a8f..ae5abc1 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 import App from './App';
 import './styles/index.css';
 import { ToastContainer } from 'react-toastify';
@@ -7,18 +8,20 @@ import 'react-toastify/dist/ReactToastify.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
-    <ToastContainer 
-      position="bottom-right"
-      autoClose={3000}
-      hideProgressBar={false}
-      newestOnTop={false}
-      closeOnClick
-      rtl={false}
-      pauseOnFocusLoss
-      draggable
-      pauseOnHover
-      theme="light"
-    />
-  </React.StrictMode>
-);
\ No newline at end of file
+    <BrowserRouter>
+      <App />
+      <ToastContainer
+        position="bottom-right"
+        autoClose={3000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="light"
+      />
+    </BrowserRouter>
+  </React.StrictMode>,
+);
diff --git a/src/pages/BuilderPage.jsx b/src/pages/BuilderPage.jsx
new file mode 100644
index 0000000..e3a1c51
--- /dev/null
+++ b/src/pages/BuilderPage.jsx
@@ -0,0 +1,21 @@
+import React, { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { useForm } from '../context/FormContext';
+import FormBuilder from '../components/FormBuilder/FormBuilder';
+
+const BuilderPage = () => {
+  const { id } = useParams();
+  const { loadFormFromStorage, initializeNewForm } = useForm();
+
+  useEffect(() => {
+    if (id) {
+      loadFormFromStorage(id);
+    } else {
+      initializeNewForm();
+    }
+  }, [id, loadFormFromStorage, initializeNewForm]);
+
+  return <FormBuilder />;
+};
+
+export default BuilderPage;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
new file mode 100644
index 0000000..1bd43e8
--- /dev/null
+++ b/src/pages/Home.jsx
@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+const Home = () => {
+  const [forms, setForms] = useState([]);
+
+  useEffect(() => {
+    const saved = JSON.parse(localStorage.getItem('savedForms') || '[]');
+    setForms(saved);
+  }, []);
+
+  return (
+    <div className="p-4 max-w-2xl mx-auto">
+      <h1 className="text-2xl font-bold mb-4">Saved Forms</h1>
+      {forms.length === 0 ? (
+        <p className="text-gray-600">No saved forms.</p>
+      ) : (
+        <ul className="space-y-2">
+          {forms.map(form => (
+            <li key={form.id} className="border p-2 rounded flex justify-between items-center">
+              <span>{form.title}</span>
+              <Link to={`/builder/${form.id}`} className="text-primary underline text-sm">Edit</Link>
+            </li>
+          ))}
+        </ul>
+      )}
+      <div className="mt-6">
+        <Link to="/builder" className="px-4 py-2 bg-primary text-white rounded-md">Create New Form</Link>
+      </div>
+    </div>
+  );
+};
+
+export default Home;