diff --git a/backend/core/auth_middleware.py b/backend/core/authentication_middleware.py
similarity index 92%
rename from backend/core/auth_middleware.py
rename to backend/core/authentication_middleware.py
index 08aeea19..99c6aca3 100644
--- a/backend/core/auth_middleware.py
+++ b/backend/core/authentication_middleware.py
@@ -9,10 +9,10 @@
 from rag_solution.file_management.database import get_db
 from rag_solution.services.user_service import UserService
 
-logging.basicConfig(level=logging.DEBUG)
+logging.basicConfig(level=settings.log_level)
 logger = logging.getLogger(__name__)
 
-class AuthMiddleware(BaseHTTPMiddleware):
+class AuthenticationMiddleware(BaseHTTPMiddleware):
     async def dispatch(self, request: Request, call_next):
         logger.info(f"AuthMiddleware: Processing request to {request.url.path}")
         logger.debug(f"AuthMiddleware: Request headers: {request.headers}")
@@ -29,7 +29,8 @@ async def dispatch(self, request: Request, call_next):
                     'id': payload.get('sub'),
                     'email': payload.get('email'),
                     'name': payload.get('name'),
-                    'uuid': payload.get('uuid')  # Extract UUID from payload
+                    'uuid': payload.get('uuid'),  # Extract UUID from payload
+                    'role': payload.get('role')
                 }
                 logger.info(f"AuthMiddleware: JWT token validated successfully. User: {request.state.user}")
             except jwt.ExpiredSignatureError:
diff --git a/backend/core/authorization.py b/backend/core/authorization.py
new file mode 100644
index 00000000..fc652c26
--- /dev/null
+++ b/backend/core/authorization.py
@@ -0,0 +1,64 @@
+import functools
+import logging
+import re
+from fastapi import HTTPException, Request
+from fastapi.responses import JSONResponse
+from core.config import settings
+
+logging.basicConfig(level=settings.log_level)
+logger = logging.getLogger(__name__)
+
+open_paths = ['/api/auth/login', '/api/auth/callback', '/api/health', '/api/auth/oidc-config', '/api/auth/token', '/api/auth/userinfo']
+
+async def authorize_dependency(request: Request):
+    """
+    Dependency to check if the user is authorized to access the resource.
+    Uses the RBAC mapping from settings.rbac_mapping to check if the user is authorized to access the resource.
+
+    Args:
+        request (Request): The request object.
+
+    Returns:
+        bool: True if the request is authorized, raises HTTPException otherwise.
+    """
+    logger.info(f"AuthorizationMiddleware: Processing request to {request.url.path} by {request.state.user}")
+    # print(f"AuthorizationMiddleware: Processing {request.method} request to {request.url.path} by {request.state.user}")    
+    if request.url.path in open_paths:
+                return True
+            
+    rrole = request.state.user.get('role')
+    rpath = request.url.path
+    try:
+        if rrole:
+            for pattern, method in settings.rbac_mapping[rrole].items():
+                if re.match(pattern, rpath) and request.method in method:
+                    return True
+        raise HTTPException(status_code=403, detail="Failed to authorize request. {rpath} / {rrole}")
+
+    except (KeyError, ValueError) as exc:
+        logger.warning(f"Failed to authorize request. {rpath} / {rrole}")
+        raise HTTPException(status_code=403, detail="Failed to authorize request. {rpath} / {rrole}") from exc    
+    
+def authorize_decorator(role: str):
+    """
+    Decorator to check if the user is authorized to access the resource.
+
+    Args:
+        role (str): The role required to access the resource.
+
+    Returns:
+        function: Goes to the original handler (function) if the request is authorized, raises HTTPException otherwise.
+    """
+    def decorator(handler):
+        @functools.wraps(handler)
+        async def wrapper(*args, **kwargs):
+            request = kwargs['request']
+            # print(f"AuthorizationDecorator: Processing {request.method} request to {request.url.path} by {request.state.user}")
+            if request.url.path not in open_paths:
+                if not request.state.user or request.state.user.get('role') != role:
+                    logger.warning(f"AuthorizationDecorator: Unauthorized request to {request.url.path}")
+                    return JSONResponse(status_code=403, content={"detail": f"User is not authorized to access this resource (requires {role} role)"})
+            return await handler(*args, **kwargs)
+        return wrapper
+    return decorator    
+
diff --git a/backend/core/config.py b/backend/core/config.py
index ae537274..9ad2019a 100644
--- a/backend/core/config.py
+++ b/backend/core/config.py
@@ -38,7 +38,7 @@ class Settings(BaseSettings):
     react_app_api_url: str
 
     # Logging Level
-    log_level: Optional[str] = None
+    log_level: Optional[str] = "INFO"
 
     # File storage path
     file_storage_path: str = tempfile.gettempdir()
@@ -106,11 +106,34 @@ class Settings(BaseSettings):
     # JWT settings
     jwt_secret_key: str = Field(..., env='JWT_SECRET_KEY')
     jwt_algorithm: str = "HS256"
-    
+    frontend_callback: str = "/callback"
+
+    # Role settings
+    # This is a sample RBAC mapping role / url_patterns / http_methods
+    rbac_mapping: dict = {
+        'admin': {
+            r'^/api/user-collections/(.+)$': ['GET'],
+            r'^/api/user-collections/(.+)/(.+)$': ['POST', 'DELETE'],
+        },
+        'user': {
+            r'^/api/user-collections/(.+)/(.+)$': ['POST', 'DELETE'],
+            r'^/api/user-collections/(.+)$': ['GET'],
+            r'^/api/user-collections/collection/(.+)$': ['GET'],
+            r'^/api/user-collections/collection/(.+)/users$': ['DELETE'],
+            r'^/api/collections/(.+)$': ['GET']
+        },
+        'guest': {
+            r'^/api/user-collections$': ['GET', 'POST', 'DELETE', 'PUT'],
+            r'^/api/collections$': ['GET', 'POST', 'DELETE', 'PUT'],
+            r'^/api/collection/(.+)$': ['GET', 'POST', 'DELETE', 'PUT']
+        }
+    }
+
     class Config:
         env_file = ".env"
         env_file_encoding = "utf-8"
 
+
 settings = Settings(
     react_app_api_url="http://localhost:3000",
 )
diff --git a/backend/core/loggingcors_middleware.py b/backend/core/loggingcors_middleware.py
new file mode 100644
index 00000000..9e78e270
--- /dev/null
+++ b/backend/core/loggingcors_middleware.py
@@ -0,0 +1,20 @@
+import logging
+from fastapi import Request
+from fastapi.middleware.cors import CORSMiddleware
+from core.config import settings
+
+logging.basicConfig(level=settings.log_level)
+logger = logging.getLogger(__name__)
+
+class LoggingCORSMiddleware(CORSMiddleware):
+    async def __call__(self, scope, receive, send):
+        if scope["type"] == "http":
+            logger.debug(f"CORS Request: method={scope['method']}, path={scope['path']}")
+            logger.debug(f"CORS Request headers: {scope['headers']}")
+        
+        response = await super().__call__(scope, receive, send)
+        
+        if scope["type"] == "http":
+            logger.debug(f"CORS Response headers: {response.headers}")
+        
+        return response
diff --git a/backend/main.py b/backend/main.py
index 99d41dcd..6744016b 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -4,17 +4,22 @@
 
 from fastapi import FastAPI, Depends, HTTPException, Request, Header
 from fastapi.openapi.utils import get_openapi
-from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse
 from starlette.middleware.sessions import SessionMiddleware
 from pydantic import BaseModel
 from sqlalchemy import inspect, text
+from auth.oidc import verify_jwt_token
 import jwt
 
+# Import  core modules
+from core.authentication_middleware import AuthenticationMiddleware
+# from backend.core.authorization_decorator import AuthorizationMiddleware
+from core.loggingcors_middleware import LoggingCORSMiddleware
+from core.authorization import authorize_dependency
 from core.config import settings
-from auth.oidc import get_current_user, verify_jwt_token
-from rag_solution.file_management.database import Base, engine, get_db
 
 # Import all models
+from rag_solution.file_management.database import Base, engine, get_db
 from rag_solution.models.user import User
 from rag_solution.models.collection import Collection
 from rag_solution.models.file import File
@@ -22,8 +27,7 @@
 from rag_solution.models.user_team import UserTeam
 from rag_solution.models.team import Team
 
-
-from core.auth_middleware import AuthMiddleware
+# Import all routers
 from rag_solution.file_management.database import Base, engine
 from rag_solution.router.collection_router import router as collection_router
 from rag_solution.router.file_router import router as file_router
@@ -33,24 +37,10 @@
 from rag_solution.router.user_team_router import router as user_team_router
 from rag_solution.router.health_router import router as health_router
 from rag_solution.router.auth_router import router as auth_router
-from auth.oidc import get_current_user, oauth
 
 logging.basicConfig(level=settings.log_level)
 logger = logging.getLogger(__name__)
 
-class LoggingCORSMiddleware(CORSMiddleware):
-    async def __call__(self, scope, receive, send):
-        if scope["type"] == "http":
-            logger.debug(f"CORS Request: method={scope['method']}, path={scope['path']}")
-            logger.debug(f"CORS Request headers: {scope['headers']}")
-        
-        response = await super().__call__(scope, receive, send)
-        
-        if scope["type"] == "http":
-            logger.debug(f"CORS Response headers: {response.headers}")
-        
-        return response
-
 @asynccontextmanager
 async def lifespan(app: FastAPI):
     logger.info("Starting database initialization")
@@ -123,27 +113,39 @@ async def lifespan(app: FastAPI):
 )
 
 # Add Auth middleware
-app.add_middleware(AuthMiddleware)
-
-async def auth_dependency(authorization: str = Header(...)):
-    try:
-        scheme, token = authorization.split()
-        if scheme.lower() != 'bearer':
-            raise HTTPException(status_code=401, detail="Invalid authentication scheme")
-        payload = verify_jwt_token(token)
-        return payload
-    except (jwt.PyJWTError, ValueError):
-        raise HTTPException(status_code=401, detail="Invalid or expired token")
+app.add_middleware(AuthenticationMiddleware)
+
+# Replacing with a decorator on each endpoint to allow fine-grained authorization
+# app.add_middleware(AuthorizationMiddleware)
+
+# Already included in AuthMiddleware 
+# async def auth_dependency(authorization: str = Header(...)):
+#     try:
+#         scheme, token = authorization.split()
+#         if scheme.lower() != 'bearer':
+#             raise HTTPException(status_code=401, detail="Invalid authentication scheme")
+#         payload = verify_jwt_token(token)
+#         return payload
+#     except (jwt.PyJWTError, ValueError):
+#         raise HTTPException(status_code=401, detail="Invalid or expired token")
 
 # Include routers
 app.include_router(auth_router)
 app.include_router(health_router)
-app.include_router(collection_router, dependencies=[Depends(auth_dependency)])
-app.include_router(file_router, dependencies=[Depends(auth_dependency)])
-app.include_router(team_router, dependencies=[Depends(auth_dependency)])
-app.include_router(user_router, dependencies=[Depends(auth_dependency)])
-app.include_router(user_collection_router, dependencies=[Depends(auth_dependency)])
-app.include_router(user_team_router, dependencies=[Depends(auth_dependency)])
+app.include_router(collection_router)
+app.include_router(file_router)
+app.include_router(team_router)
+app.include_router(user_router)
+app.include_router(user_collection_router, dependencies=[Depends(authorize_dependency)])
+# app.include_router(user_collection_router)
+app.include_router(user_team_router)
+# app.include_router(collection_router, dependencies=[Depends(auth_dependency)])
+# app.include_router(file_router, dependencies=[Depends(auth_dependency)])
+# app.include_router(team_router, dependencies=[Depends(auth_dependency)])
+# app.include_router(user_router, dependencies=[Depends(auth_dependency)])
+# app.include_router(user_collection_router, dependencies=[Depends(auth_dependency)])
+# app.include_router(user_team_router, dependencies=[Depends(auth_dependency)])
+# app.include_router(collection_router, dependencies=[Depends(auth_dependency)])
 
 def custom_openapi():
     if app.openapi_schema:
diff --git a/backend/rag_solution/router/auth_router.py b/backend/rag_solution/router/auth_router.py
index 7e4ad314..71047143 100644
--- a/backend/rag_solution/router/auth_router.py
+++ b/backend/rag_solution/router/auth_router.py
@@ -151,12 +151,14 @@ async def auth(request: Request, db: Session = Depends(get_db)):
             "sub": user['sub'],
             "email": user['email'],
             "name": user.get('name', 'Unknown'),
-            "uuid": str(db_user.id)  # Include the UUID in the JWT payload
+            "uuid": str(db_user.id) , # Include the UUID in the JWT payload
+            "exp": token.get('expires_at'),
+            "role": "admin"
         }
         custom_jwt = jwt.encode(custom_jwt_payload, settings.ibm_client_secret, algorithm="HS256")
 
 
-        redirect_url = f"{settings.frontend_url}/?token={custom_jwt}"
+        redirect_url = f"{settings.frontend_url}{settings.frontend_callback}/?token={custom_jwt}"
         logger.info(f"Redirecting to frontend: {redirect_url}")
 
         return RedirectResponse(url=redirect_url)
diff --git a/backend/rag_solution/router/collection_router.py b/backend/rag_solution/router/collection_router.py
index 2430ffb3..fc991eaf 100644
--- a/backend/rag_solution/router/collection_router.py
+++ b/backend/rag_solution/router/collection_router.py
@@ -9,8 +9,7 @@
 from rag_solution.schemas.user_schema import UserInput
 from rag_solution.services.user_service import UserService
 from rag_solution.services.collection_service import CollectionService
-from rag_solution.services.file_management_service import \
-    FileManagementService
+from rag_solution.services.file_management_service import FileManagementService
 import logging
 
 logging.basicConfig(level=logging.INFO)
diff --git a/backend/rag_solution/router/user_collection_router.py b/backend/rag_solution/router/user_collection_router.py
index f42db3cd..290e77ce 100644
--- a/backend/rag_solution/router/user_collection_router.py
+++ b/backend/rag_solution/router/user_collection_router.py
@@ -8,6 +8,8 @@
 from rag_solution.services.user_collection_interaction_service import UserCollectionInteractionService
 from rag_solution.schemas.user_collection_schema import UserCollectionOutput, UserCollectionsOutput
 
+from core.authorization import authorize_decorator
+
 router = APIRouter(prefix="/api/user-collections", tags=["user-collections"])
 
 @router.post("/{user_id}/{collection_id}", 
@@ -48,7 +50,8 @@ def remove_user_from_collection(user_id: UUID, collection_id: UUID, db: Session
         500: {"description": "Internal server error"}
     }
 )
-def get_user_collections(user_id: UUID, request: Request, db: Session = Depends(get_db)):
+@authorize_decorator(role="admin")
+async def get_user_collections(user_id: UUID, request: Request, db: Session = Depends(get_db)):
     if not hasattr(request.state, 'user') or request.state.user['uuid'] != str(user_id):
         raise HTTPException(status_code=403, detail="Not authorized to access this resource")
     
diff --git a/webui/jsconfig.json b/webui/jsconfig.json
new file mode 100644
index 00000000..b8fc3230
--- /dev/null
+++ b/webui/jsconfig.json
@@ -0,0 +1,6 @@
+{
+    "compilerOptions": {
+        "baseUrl": "."
+    },
+    "include": ["src"]
+}
\ No newline at end of file
diff --git a/webui/package.json b/webui/package.json
index 8d0918b4..59bac685 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -23,7 +23,8 @@
     "start": "react-scripts start",
     "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "dev": "WDS_SOCKET_PORT=3000 CHOKIDAR_USEPOLLING=true WATCHPACK_POLLING=true FAST_REFRESH=false react-scripts start"
   },
   "proxy": "http://localhost:8000",
   "eslintConfig": {
diff --git a/webui/src/App.css b/webui/src/App.css
index 4c67a141..5b4cd17f 100644
--- a/webui/src/App.css
+++ b/webui/src/App.css
@@ -4,18 +4,19 @@
   min-height: 100vh;
 }
 
-.bx--content {
-  margin-top: 3rem; /* Adjust based on your Header height */
-  flex-grow: 1;
-  background-color: #f4f4f4;
-}
-
 .page-container {
-  max-width: 1200px;
-  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
   padding: 2rem;
 }
 
+/* .bx--content {
+  margin-top: 3rem; Adjust based on your Header height
+  flex-grow: 1;
+  background-color: #f4f4f4;
+} */
+
 @media (max-width: 1056px) {
   .page-container {
     padding: 1rem;
diff --git a/webui/src/App.js b/webui/src/App.js
index b59d1b2f..856b4b1d 100644
--- a/webui/src/App.js
+++ b/webui/src/App.js
@@ -1,75 +1,42 @@
-import React, { useEffect, useState } from 'react';
-import { BrowserRouter as Router, Route, Routes, Navigate, useNavigate, useLocation } from 'react-router-dom';
-import { Content } from 'carbon-components-react';
-import { AuthProvider, useAuth } from './contexts/AuthContext';
-import { NotificationProvider } from './contexts/NotificationContext';
-import Header from './components/Header';
-import Footer from './components/Footer';
-import Dashboard from './components/Dashboard';
-import SearchInterface from './components/SearchInterface';
-import CollectionBrowser from './components/CollectionBrowser';
-import DocumentViewer from './components/DocumentViewer';
-import LoginPage from './components/LoginPage';
-import { handleAuthCallback } from './services/authService';
-import config from './config/config';
-import './App.css';
-import './styles/global.css';
-
-console.log('App.js loaded', { config });
-
-const ProtectedRoute = ({ children }) => {
-  const { user, loading } = useAuth();
-  const location = useLocation();
-  
-  console.log('ProtectedRoute - user:', user, 'loading:', loading, 'location:', location);
-
-  if (loading) {
-    return <div>Loading...</div>;
-  }
-  
-  if (!user) {
-    console.log('ProtectedRoute - Redirecting to login');
-    return <Navigate to="/login" state={{ from: location }} replace />;
-  }
-
-  return children;
-};
-
-const AppLayout = ({ children }) => {
-  const { user } = useAuth();
-
-  console.log('AppLayout - user:', user);
-
-  return (
-    <div className="app-container">
-      {user && <Header />}
-      <Content>
-        <div className="page-container">
-          {children}
-        </div>
-      </Content>
-      {user && <Footer />}
-    </div>
-  );
-};
+import React, { useEffect } from "react";
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  Navigate,
+  useNavigate,
+  useLocation,
+} from "react-router-dom";
+import { Content } from "carbon-components-react";
+import { AuthProvider, useAuth } from "./contexts/AuthContext";
+import { NotificationProvider } from "./contexts/NotificationContext";
+import Header from "./components/layout/Header";
+import Footer from "./components/layout/Footer";
+import Dashboard from "./components/dashboard/Dashboard";
+import SearchInterface from "./components/common/SearchInterface";
+import DocumentViewer from "./components/document/DocumentViewer";
+import LoginPage from "./components/LoginPage";
+import { handleAuthCallback } from "./services/authService";
+
+import Collection from "./components/collection/Collection";
+import CollectionForm from "./components/collection/CollectionForm";
+import CollectionViewer from "./components/collection/CollectionViewer";
+
+import "./App.css";
+import "./styles/global.css";
 
 function AuthCallback() {
   const navigate = useNavigate();
   const { fetchUser } = useAuth();
 
-  console.log('AuthCallback component rendered');
-
   useEffect(() => {
     const processCallback = async () => {
-      console.log('Processing auth callback');
-      const result = handleAuthCallback();
+      const result = await handleAuthCallback();
       if (result.success) {
-        console.log('Auth callback successful, fetching user');
         await fetchUser();
-        navigate('/');
+        navigate("/");
       } else {
-        console.log('Auth callback failed, redirecting to login');
-        navigate('/login');
+        navigate("/login");
       }
     };
 
@@ -79,23 +46,40 @@ function AuthCallback() {
   return <div>Processing authentication...</div>;
 }
 
-function AppContent() {
-  const { user, loading, fetchUser } = useAuth();
-  const location = useLocation();
-
-  console.log('AppContent - user:', user, 'loading:', loading, 'location:', location);
+const AppLayout = ({ children }) => {
+  const { user, fetchUser } = useAuth();
 
   useEffect(() => {
-    if (!user && !loading) {
-      console.log('AppContent - Fetching user');
+    if (!user) {
       fetchUser();
     }
-  }, [user, loading, fetchUser]);
+  }, []);
+
+  return (
+    <div className="app-container">
+      {user && <Header />}
+      <Content className="page-container">{children}</Content>
+      {user && <Footer />}
+    </div>
+  );
+};
+
+const ProtectedRoute = ({ children }) => {
+  const { user, loading } = useAuth();
+  const location = useLocation();
 
   if (loading) {
     return <div>Loading...</div>;
   }
 
+  if (!user) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  return children;
+};
+
+function AppContent() {
   return (
     <Routes>
       <Route path="/login" element={<LoginPage />} />
@@ -120,10 +104,14 @@ function AppContent() {
         path="/collections"
         element={
           <ProtectedRoute>
-            <CollectionBrowser />
+            <Collection />
           </ProtectedRoute>
         }
-      />
+      >
+        <Route path="view" element={<CollectionViewer />}></Route>
+        <Route path="create" element={<CollectionForm />}></Route>
+        <Route path="edit" element={<CollectionForm />}></Route>
+      </Route>
       <Route
         path="/document/:id"
         element={
@@ -132,14 +120,20 @@ function AppContent() {
           </ProtectedRoute>
         }
       />
+      <Route
+        path="/document-collections"
+        element={
+          <ProtectedRoute>
+            <CollectionViewer />
+          </ProtectedRoute>
+        }
+      />
       <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
   );
 }
 
-function App() {
-  console.log('App component rendered', { windowLocation: window.location });
-
+const App = () => {
   return (
     <AuthProvider>
       <NotificationProvider>
@@ -151,6 +145,6 @@ function App() {
       </NotificationProvider>
     </AuthProvider>
   );
-}
+};
 
 export default App;
diff --git a/webui/src/api/api.js b/webui/src/api/api.js
index ef26551b..6084903b 100644
--- a/webui/src/api/api.js
+++ b/webui/src/api/api.js
@@ -100,6 +100,7 @@ export const getUserCollections = async () => {
     const response = await api.get(url);
     console.log('User collections fetched successfully', response.data);
     return response.data;
+    
   } catch (error) {
     console.error('Error in getUserCollections:', error);
     throw handleApiError(error, 'Error fetching user collections');
diff --git a/webui/src/components/Dashboard.js b/webui/src/components/Dashboard.js
deleted file mode 100644
index 030f9e04..00000000
--- a/webui/src/components/Dashboard.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
-import {
-  Tile,
-  ClickableTile,
-  Loading,
-  StructuredListWrapper,
-  StructuredListHead,
-  StructuredListBody,
-  StructuredListRow,
-  StructuredListCell,
-  Button
-} from 'carbon-components-react';
-import { Add, Search, Document } from '@carbon/icons-react';
-import { getUserCollections } from '../api/api';
-import { useNotification } from '../contexts/NotificationContext';
-import './Dashboard.css';
-
-const Dashboard = () => {
-  const [collections, setCollections] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const { addNotification } = useNotification();
-
-  useEffect(() => {
-    fetchDashboardData();
-  }, []);
-
-  const fetchDashboardData = async () => {
-    setLoading(true);
-    try {
-      const collectionsData = await getUserCollections(1, 5);
-      console.log('Fetched collections data:', collectionsData);
-      setCollections(collectionsData.data || []);
-    } catch (error) {
-      console.error('Error fetching dashboard data:', error);
-      addNotification('error', 'Error', 'Failed to load dashboard data. Please try again later.');
-      setCollections([]);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  if (loading) {
-    return <Loading description="Loading dashboard" />;
-  }
-
-  if (collections.length === 0) {
-    return (
-      <div className="dashboard">
-        <h1>Welcome to IBM RAG Solution</h1>
-        <p>No collections found. Start by creating a new collection.</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="dashboard">
-      <h1>Welcome to IBM RAG Solution</h1>
-      <div className="dashboard-content">
-        <Tile className="dashboard-section">
-          <h2>Quick Actions</h2>
-          <div className="quick-actions">
-            <ClickableTile href="/search">
-              <Search />
-              <h3>Search Documents</h3>
-              <p>Search across all your collections</p>
-            </ClickableTile>
-            <ClickableTile href="/collections">
-              <Add />
-              <h3>Create Collection</h3>
-              <p>Add a new document collection</p>
-            </ClickableTile>
-            <ClickableTile href="/upload">
-              <Document />
-              <h3>Upload Document</h3>
-              <p>Add a new document to a collection</p>
-            </ClickableTile>
-          </div>
-        </Tile>
-        <Tile className="dashboard-section">
-          <h2>Recent Collections</h2>
-          <StructuredListWrapper ariaLabel="Recent collections">
-            <StructuredListHead>
-              <StructuredListRow head>
-                <StructuredListCell head>Name</StructuredListCell>
-                <StructuredListCell head>Documents</StructuredListCell>
-                <StructuredListCell head>Last Updated</StructuredListCell>
-              </StructuredListRow>
-            </StructuredListHead>
-            <StructuredListBody>
-              {collections.map((collection) => (
-                <StructuredListRow key={collection.id}>
-                  <StructuredListCell>
-                    <Link to={`/collections/${collection.id}`}>{collection.name}</Link>
-                  </StructuredListCell>
-                  <StructuredListCell>{collection.documentCount}</StructuredListCell>
-                  <StructuredListCell>{new Date(collection.lastUpdated).toLocaleDateString()}</StructuredListCell>
-                </StructuredListRow>
-              ))}
-            </StructuredListBody>
-          </StructuredListWrapper>
-          <Link to="/collections" className="view-all-link">
-            <Button kind="ghost" size="small">View all collections</Button>
-          </Link>
-        </Tile>
-      </div>
-    </div>
-  );
-};
-
-export default Dashboard;
diff --git a/webui/src/components/Header.css b/webui/src/components/Header.css
deleted file mode 100644
index e5f866b8..00000000
--- a/webui/src/components/Header.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.bx--header__nav::before {
-  display: none;
-}
-
-.bx--header__menu-item {
-  position: relative;
-}
-
-.bx--header__menu-item.active::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 3px;
-  background-color: #0f62fe;
-}
-
-.bx--header__menu-item:hover {
-  background-color: #353535;
-}
-
-.bx--header__action:hover {
-  background-color: #353535;
-}
-
-.bx--header__name:hover {
-  background-color: #353535;
-}
\ No newline at end of file
diff --git a/webui/src/components/Header.js b/webui/src/components/Header.js
deleted file mode 100644
index 930c8007..00000000
--- a/webui/src/components/Header.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import {
-  Header as CarbonHeader,
-  HeaderName,
-  HeaderNavigation,
-  HeaderMenuItem,
-  HeaderGlobalBar,
-  HeaderGlobalAction,
-  SkipToContent,
-} from 'carbon-components-react';
-import { User, Logout } from '@carbon/icons-react';
-import { useAuth } from '../contexts/AuthContext';
-import './Header.css';
-
-const Header = () => {
-  const { isAuthenticated, user, logout } = useAuth();
-  const location = useLocation();
-
-  const isActive = (path) => {
-    return location.pathname === path ? 'active' : '';
-  };
-
-  return (
-    <CarbonHeader aria-label="IBM RAG Solution">
-      <SkipToContent />
-      <HeaderName element={Link} to="/" prefix="IBM">
-        RAG Solution
-      </HeaderName>
-      <HeaderNavigation aria-label="IBM RAG Solution">
-        <HeaderMenuItem element={Link} to="/" className={isActive('/')}>
-          Dashboard
-        </HeaderMenuItem>
-        <HeaderMenuItem element={Link} to="/search" className={isActive('/search')}>
-          Search
-        </HeaderMenuItem>
-        <HeaderMenuItem element={Link} to="/collections" className={isActive('/collections')}>
-          Collections
-        </HeaderMenuItem>
-      </HeaderNavigation>
-      <HeaderGlobalBar>
-        {isAuthenticated && (
-          <>
-            <HeaderGlobalAction aria-label="User" tooltipAlignment="end" onClick={() => {}}>
-              <User />
-            </HeaderGlobalAction>
-            <HeaderGlobalAction aria-label="Logout" tooltipAlignment="end" onClick={logout}>
-              <Logout />
-            </HeaderGlobalAction>
-          </>
-        )}
-      </HeaderGlobalBar>
-    </CarbonHeader>
-  );
-};
-
-export default Header;
diff --git a/webui/src/components/LoginPage.js b/webui/src/components/LoginPage.js
index 82a0da78..b01eb945 100644
--- a/webui/src/components/LoginPage.js
+++ b/webui/src/components/LoginPage.js
@@ -1,28 +1,25 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { Button, Loading } from 'carbon-components-react';
-import { useAuth } from '../contexts/AuthContext';
-import config, { getFullApiUrl, API_ROUTES } from '../config/config';
+import  { getFullApiUrl, API_ROUTES } from '../config/config';
 import './LoginPage.css';
 
-console.log('LoginPage component loaded with config:', config);
+// console.log('LoginPage component loaded with config:', config);
 
 const LoginPage = () => {
-  const { signIn, user } = useAuth();
+  // const { signIn, user } = useAuth();
   const [isLoading, setIsLoading] = useState(false);
 
-  useEffect(() => {
-    console.log('LoginPage mounted, user:', user);
-    console.log('Current API URL:', config.apiUrl);
-    console.log('Full login URL:', getFullApiUrl(API_ROUTES.LOGIN));
-  }, [user]);
+  // useEffect(() => {
+  //   console.log('LoginPage mounted, user:', user);
+  //   console.log('Current API URL:', config.apiUrl);
+  //   console.log('Full login URL:', getFullApiUrl(API_ROUTES.LOGIN));
+  // }, [user]);
 
   const handleLogin = () => {
-    console.log('Login button clicked');
     setIsLoading(true);
     try {
-      console.log('Initiating sign-in process');
       const loginUrl = getFullApiUrl(API_ROUTES.LOGIN);
-      console.log('Redirecting to:', loginUrl);
+      // console.log('Redirecting to:', loginUrl);
       window.location.href = loginUrl;
     } catch (error) {
       console.error('Login failed:', error);
diff --git a/webui/src/components/Dashboard.css b/webui/src/components/collection/Collection.css
similarity index 94%
rename from webui/src/components/Dashboard.css
rename to webui/src/components/collection/Collection.css
index ada5bb6c..a8b7b8f0 100644
--- a/webui/src/components/Dashboard.css
+++ b/webui/src/components/collection/Collection.css
@@ -1,7 +1,5 @@
 .dashboard {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem;
+
 }
 
 .dashboard-content {
diff --git a/webui/src/components/Collections.js b/webui/src/components/collection/Collection.js
similarity index 96%
rename from webui/src/components/Collections.js
rename to webui/src/components/collection/Collection.js
index a037675a..ee538386 100644
--- a/webui/src/components/Collections.js
+++ b/webui/src/components/collection/Collection.js
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-
+import { Outlet, useNavigate } from "react-router-dom";
 import {
   Button,
   Content,
@@ -24,12 +23,13 @@ import {
   FlexGrid,
   UnorderedList,
   ListItem,
-  Pagination
+  Pagination,
 } from "@carbon/react";
 import { Add } from "@carbon/icons-react";
 
-import { getUserCollections } from "../api/api";
-import "../styles/view-ui.css";
+import { getUserCollections } from "src/api/api";
+import "./Collection.css";
+import "src/styles/view-ui.css";
 
 const Collections = () => {
   let navigate = useNavigate();
@@ -63,6 +63,7 @@ const Collections = () => {
     setIsLoadingCollections(true);
     try {
       const collections = (await getUserCollections())?.collections;
+      console.log(collections);
       // setUserCollections(Array.isArray(collections) ? collections : []);
 
       // datatable requires a field called id
@@ -91,7 +92,7 @@ const Collections = () => {
   };
 
   const createNewCollection = () => {
-    navigate("/create-collection");
+    navigate("/collections/create", { replace: true });
   };
 
   const onClickCollectionTable = (collectionId) => {
@@ -108,7 +109,7 @@ const Collections = () => {
   };
 
   return (
-    <Content className="view-content">
+    <Content className="children-container  view-content">
       <>
         <div className="view-title">
           <h2>Collections</h2>
@@ -282,6 +283,7 @@ const Collections = () => {
           </Column>
         </Row>
       </FlexGrid>
+      <Outlet />
     </Content>
   );
 };
diff --git a/webui/src/components/collection/CollectionForm.css b/webui/src/components/collection/CollectionForm.css
new file mode 100644
index 00000000..e69de29b
diff --git a/webui/src/components/CollectionForm.js b/webui/src/components/collection/CollectionForm.js
similarity index 98%
rename from webui/src/components/CollectionForm.js
rename to webui/src/components/collection/CollectionForm.js
index 0faaadae..50c5decb 100644
--- a/webui/src/components/CollectionForm.js
+++ b/webui/src/components/collection/CollectionForm.js
@@ -16,8 +16,9 @@ import {
   Column
 } from '@carbon/react';
 import { TrashCan, Document } from '@carbon/icons-react';
-import { createCollectionWithDocuments, getUserCollections } from '../api/api';
-import { useAuth } from '../contexts/AuthContext';
+
+import { createCollectionWithDocuments, getUserCollections } from 'src/api/api';
+import { useAuth } from 'src/contexts/AuthContext';
 
 const CollectionForm = () => {
   const { user, loading: authLoading } = useAuth();
@@ -144,7 +145,7 @@ const CollectionForm = () => {
   }
 
   return (
-    <div className="collection-form-container">
+    <div className="children-container collection-form">
       <h2>Your Collections</h2>
       {isLoadingCollections ? (
         <Loading description="Loading collections" withOverlay={false} />
diff --git a/webui/src/components/CollectionForm.test.js b/webui/src/components/collection/CollectionForm.test.js
similarity index 95%
rename from webui/src/components/CollectionForm.test.js
rename to webui/src/components/collection/CollectionForm.test.js
index 335254b8..d2a65907 100644
--- a/webui/src/components/CollectionForm.test.js
+++ b/webui/src/components/collection/CollectionForm.test.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import CollectionForm from './CollectionForm';
-import { AuthProvider } from '../contexts/AuthContext';
-import { createCollectionWithDocuments, getUserCollections } from '../api/api';
+import CollectionForm from './collection/CollectionForm';
+import { AuthProvider } from 'src/contexts/AuthContext';
+import { createCollectionWithDocuments, getUserCollections } from 'src/api/api';
 
 // Mock the API functions
 jest.mock('../api/api', () => ({
@@ -93,6 +93,9 @@ describe('CollectionForm', () => {
 
     await waitFor(() => {
       expect(createCollectionWithDocuments).toHaveBeenCalled();
+    });
+    
+    await waitFor(() => {
       expect(screen.getByText('Collection Created')).toBeInTheDocument();
     });
   });
diff --git a/webui/src/components/CollectionBrowser.css b/webui/src/components/collection/CollectionViewer.css
similarity index 89%
rename from webui/src/components/CollectionBrowser.css
rename to webui/src/components/collection/CollectionViewer.css
index 32b2853e..aeda608a 100644
--- a/webui/src/components/CollectionBrowser.css
+++ b/webui/src/components/collection/CollectionViewer.css
@@ -1,7 +1,5 @@
 .collection-browser {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem;
+
 }
 
 .collection-actions {
diff --git a/webui/src/components/CollectionBrowser.js b/webui/src/components/collection/CollectionViewer.js
similarity index 94%
rename from webui/src/components/CollectionBrowser.js
rename to webui/src/components/collection/CollectionViewer.js
index 7208eb04..9b987ef1 100644
--- a/webui/src/components/CollectionBrowser.js
+++ b/webui/src/components/collection/CollectionViewer.js
@@ -20,11 +20,12 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter
-} from 'carbon-components-react';
+} from "@carbon/react";
 import { Add, TrashCan, Document, Edit} from '@carbon/icons-react';
-import { getUserCollections, createCollectionWithDocuments, updateCollection, deleteCollection, getDocumentsInCollection, deleteDocument, moveDocument } from '../api/api';
-import { useNotification } from '../contexts/NotificationContext';
-import './CollectionBrowser.css';
+import { getUserCollections, createCollectionWithDocuments, updateCollection, deleteCollection, getDocumentsInCollection, deleteDocument, moveDocument } from '../../api/api';
+import { useNotification } from 'src/contexts/NotificationContext';
+
+import './CollectionViewer.css';
 
 const CollectionBrowser = () => {
   const [collections, setCollections] = useState([]);
@@ -199,7 +200,7 @@ const CollectionBrowser = () => {
     { key: 'actions', header: 'Actions' },
   ];
 
-  const collectionRows = collections.map((collection) => ({
+  const collectionRows = collections?.map((collection) => ({
     id: collection.id,
     name: collection.name,
     description: collection.description,
@@ -235,7 +236,7 @@ const CollectionBrowser = () => {
     ),
   }));
 
-  const documentRows = documents.map((document) => ({
+  const documentRows = documents?.map((document) => ({
     id: document.id,
     name: document.name,
     type: document.type,
@@ -262,8 +263,9 @@ const CollectionBrowser = () => {
   }));
 
   return (
-    <div className="collection-browser">
-      <h1>{selectedCollection ? `Documents in ${selectedCollection.name}` : 'Document Collections'}</h1>
+    
+    <div className="children-container collection-browser">
+      <h3>{selectedCollection ? `Documents in ${selectedCollection.name}` : 'Document Collections'}</h3>
       <div className="collection-actions">
         <Search
           labelText="Search collections"
@@ -286,7 +288,7 @@ const CollectionBrowser = () => {
         <InlineLoading description="Loading..." />
       ) : (
         <>
-          <DataTable rows={selectedCollection ? documentRows : collectionRows} headers={selectedCollection ? documentHeaders : collectionHeaders}>
+          <DataTable rows={selectedCollection ? documentRows : []} headers={selectedCollection ? documentHeaders : []}>
             {({ rows, headers, getHeaderProps, getTableProps }) => (
               <TableContainer>
                 <Table {...getTableProps()}>
@@ -389,8 +391,11 @@ const CollectionBrowser = () => {
           <p>Select a collection to move the document to:</p>
           <Dropdown
             id="target-collection"
+            placeholder="Select a collection"
+            ariaLabel="Select a collection"
+            label="Target Collection"
             titleText="Target Collection"
-            items={collections.filter((c) => c.id !== selectedCollection.id)}
+            items={collections ? collections.filter((c) => c.id !== selectedCollection.id) : []}
             itemToString={(item) => (item ? item.name : '')}
             onChange={({ selectedItem }) => setTargetCollection(selectedItem)}
           />
diff --git a/webui/src/components/Auth.js b/webui/src/components/common/Auth.js
similarity index 97%
rename from webui/src/components/Auth.js
rename to webui/src/components/common/Auth.js
index d5a8b183..a7aa2b4b 100644
--- a/webui/src/components/Auth.js
+++ b/webui/src/components/common/Auth.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useCallback, memo } from 'react';
-import { signIn, signOut, getUserData, loadIBMScripts, handleAuthCallback } from '../services/authService';
+import { signIn, signOut, getUserData, loadIBMScripts, handleAuthCallback } from 'src/services/authService';
 
 const ErrorMessage = memo(({ message }) => <div>Error: {message}</div>);
 const SignInButton = memo(({ onSignIn }) => <button onClick={onSignIn}>Sign In</button>);
diff --git a/webui/src/components/ErrorBoundary.js b/webui/src/components/common/ErrorBoundary.js
similarity index 100%
rename from webui/src/components/ErrorBoundary.js
rename to webui/src/components/common/ErrorBoundary.js
diff --git a/webui/src/components/QueryInput.js b/webui/src/components/common/QueryInput.js
similarity index 100%
rename from webui/src/components/QueryInput.js
rename to webui/src/components/common/QueryInput.js
diff --git a/webui/src/components/ResultsDisplay.js b/webui/src/components/common/ResultsDisplay.js
similarity index 100%
rename from webui/src/components/ResultsDisplay.js
rename to webui/src/components/common/ResultsDisplay.js
diff --git a/webui/src/components/SearchInterface.css b/webui/src/components/common/SearchInterface.css
similarity index 95%
rename from webui/src/components/SearchInterface.css
rename to webui/src/components/common/SearchInterface.css
index c41ada9f..c2470f5c 100644
--- a/webui/src/components/SearchInterface.css
+++ b/webui/src/components/common/SearchInterface.css
@@ -1,7 +1,4 @@
 .search-interface {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem;
 }
 
 .search-box {
diff --git a/webui/src/components/SearchInterface.js b/webui/src/components/common/SearchInterface.js
similarity index 95%
rename from webui/src/components/SearchInterface.js
rename to webui/src/components/common/SearchInterface.js
index 6a6ba846..566eee6e 100644
--- a/webui/src/components/SearchInterface.js
+++ b/webui/src/components/common/SearchInterface.js
@@ -13,8 +13,8 @@ import {
   InlineLoading
 } from 'carbon-components-react';
 import { Search, Filter } from '@carbon/icons-react';
-import { getUserCollections } from '../api/api'; // Removed queryCollection import
-import { useNotification } from '../contexts/NotificationContext';
+import { getUserCollections } from '../../api/api'; // Removed queryCollection import
+import { useNotification } from '../../contexts/NotificationContext';
 import './SearchInterface.css';
 
 const SearchInterface = () => {
@@ -78,8 +78,8 @@ const SearchInterface = () => {
   };
 
   return (
-    <div className="search-interface">
-      <h1>Search Documents</h1>
+    <div className="children-container search-interface">
+      <h3>Search Documents</h3>
       <Tile className="search-box">
         <div className="search-input-wrapper">
           <TextInput
diff --git a/webui/src/components/SearchResultsComponent.js b/webui/src/components/common/SearchResultsComponent.js
similarity index 100%
rename from webui/src/components/SearchResultsComponent.js
rename to webui/src/components/common/SearchResultsComponent.js
diff --git a/webui/src/components/UserQueryComponent.js b/webui/src/components/common/UserQueryComponent.js
similarity index 100%
rename from webui/src/components/UserQueryComponent.js
rename to webui/src/components/common/UserQueryComponent.js
diff --git a/webui/src/components/dashboard/Dashboard.css b/webui/src/components/dashboard/Dashboard.css
new file mode 100644
index 00000000..e69de29b
diff --git a/webui/src/components/dashboard/Dashboard.js b/webui/src/components/dashboard/Dashboard.js
new file mode 100644
index 00000000..320f2733
--- /dev/null
+++ b/webui/src/components/dashboard/Dashboard.js
@@ -0,0 +1,123 @@
+import React, { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import {
+  Tile,
+  ClickableTile,
+  Loading,
+  StructuredListWrapper,
+  StructuredListHead,
+  StructuredListBody,
+  StructuredListRow,
+  StructuredListCell,
+  Button,
+} from "carbon-components-react";
+import { Add, Search, Document } from "@carbon/icons-react";
+import { getUserCollections } from "src/api/api";
+import { useNotification } from "src/contexts/NotificationContext";
+import "./Dashboard.css";
+
+const Dashboard = () => {
+  const [collections, setCollections] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const { addNotification } = useNotification();
+
+  useEffect(() => {
+    fetchDashboardData();
+  }, []);
+
+
+  const fetchDashboardData = async () => {
+    setLoading(true);
+    try {
+      const collectionsData = await getUserCollections();
+      // console.log("Fetched collections data:", collectionsData.collections);
+      setCollections(collectionsData.collections);
+    } catch (error) {
+      console.error("Error fetching dashboard data:", error);
+      addNotification(
+        "error",
+        "Error",
+        "Failed to load dashboard data. Please try again later."
+      );
+      setCollections([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return <Loading description="Loading dashboard" />;
+  }
+
+  if (collections?.length === 0) {
+    return (
+      <div className="dashboard">
+        <h1>Welcome to IBM RAG Solution</h1>
+        <p>No collections found. Start by creating a new collection.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="children-container dashboard">
+      <h1>Welcome to IBM RAG Solution</h1>
+      <div className="dashboard-content">
+        <Tile className="dashboard-section" key="quick-actions">
+          <h3>Quick Actions</h3>
+          <div className="quick-actions">
+            <ClickableTile href="/search">
+              <Search />
+              <h4>Search Documents</h4>
+              <p>Search across all your collections</p>
+            </ClickableTile>
+            <ClickableTile href="/collections">
+              <Add />
+              <h4>Create Collection</h4>
+              <p>Add a new document collection</p>
+            </ClickableTile>
+            <ClickableTile href="/upload">
+              <Document />
+              <h4>Upload Document</h4>
+              <p>Add a new document to a collection</p>
+            </ClickableTile>
+          </div>
+        </Tile>
+        <Tile className="dashboard-section" key="recent-collections">
+          <h3>Recent Collections</h3>
+          <StructuredListWrapper aria-label="Recent collections" key="sList">
+            <StructuredListHead key="hHead">
+              <StructuredListRow key="hHeadRow" head >
+                <StructuredListCell key="hName" head>Name</StructuredListCell>
+                <StructuredListCell key="hCount" head>Documents</StructuredListCell>
+                <StructuredListCell key="hLastUpdated" head>Last Updated</StructuredListCell>
+              </StructuredListRow>
+            </StructuredListHead>
+            <StructuredListBody key="bRow">
+              {collections?.map((collection) => (
+                <StructuredListRow key={collection.collection_id}>
+                  <StructuredListCell key="name">
+                    <Link to={`/collections/${collection.id}`}>
+                      {collection.name}
+                    </Link>
+                  </StructuredListCell>
+                  <StructuredListCell key="count" > 
+                    {collection.documentCount}
+                  </StructuredListCell>
+                  <StructuredListCell key="lastUpdated">
+                    {new Date(collection.lastUpdated).toLocaleDateString()}
+                  </StructuredListCell>
+                </StructuredListRow>
+              ))}
+            </StructuredListBody>
+          </StructuredListWrapper>
+          <Link to="/collections" className="view-all-link">
+            <Button kind="ghost">View all collections</Button>
+          </Link>
+        </Tile>
+      </div>
+    </div>
+  );
+};
+
+
+export default Dashboard;
diff --git a/webui/src/components/DashboardSettings.js b/webui/src/components/dashboard/DashboardSettings.js
similarity index 100%
rename from webui/src/components/DashboardSettings.js
rename to webui/src/components/dashboard/DashboardSettings.js
diff --git a/webui/src/components/DocumentViewer.css b/webui/src/components/document/DocumentViewer.css
similarity index 95%
rename from webui/src/components/DocumentViewer.css
rename to webui/src/components/document/DocumentViewer.css
index f560bb61..1cc15af2 100644
--- a/webui/src/components/DocumentViewer.css
+++ b/webui/src/components/document/DocumentViewer.css
@@ -1,7 +1,5 @@
 .document-viewer {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem;
+
 }
 
 .document-header {
diff --git a/webui/src/components/DocumentViewer.js b/webui/src/components/document/DocumentViewer.js
similarity index 96%
rename from webui/src/components/DocumentViewer.js
rename to webui/src/components/document/DocumentViewer.js
index 8c3b3970..431f34f7 100644
--- a/webui/src/components/DocumentViewer.js
+++ b/webui/src/components/document/DocumentViewer.js
@@ -19,8 +19,8 @@ import {
 } from 'carbon-components-react';
 import { Document, Page } from 'react-pdf';
 import { Download, Edit } from '@carbon/icons-react';
-import { getDocument } from '../api/api';  // Removed updateDocumentMetadata import
-import { useNotification } from '../contexts/NotificationContext';
+import { getDocument } from 'src/api/api';  // Removed updateDocumentMetadata import
+import { useNotification } from 'src/contexts/NotificationContext';
 import './DocumentViewer.css';
 
 const DocumentViewer = () => {
@@ -129,7 +129,7 @@ const DocumentViewer = () => {
   }
 
   return (
-    <div className="document-viewer">
+    <div className="children-container document-viewer">
       <Breadcrumb>
         <BreadcrumbItem href="/">Home</BreadcrumbItem>
         <BreadcrumbItem href="/collections">Collections</BreadcrumbItem>
@@ -140,7 +140,8 @@ const DocumentViewer = () => {
       </Breadcrumb>
 
       <div className="document-header">
-        <h1>{document.title}</h1>
+        <h3>{document.title}</h3>
+        
         <div className="document-actions">
           <Button
             kind="ghost"
diff --git a/webui/src/components/Footer.css b/webui/src/components/layout/Footer.css
similarity index 85%
rename from webui/src/components/Footer.css
rename to webui/src/components/layout/Footer.css
index e63b7e8c..7ce26468 100644
--- a/webui/src/components/Footer.css
+++ b/webui/src/components/layout/Footer.css
@@ -1,24 +1,26 @@
 .app-footer {
   background-color: #161616;
   color: #ffffff;
-  padding: 2rem 0;
+  padding: 1rem 0;
   margin-top: auto;
 }
 
 .footer-content {
+  font-size: 12px;
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
+  padding: 0 3rem;
 }
 
 .footer-section {
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
 }
 
 .footer-section h4 {
-  font-size: 1rem;
+  font-size: 0.8rem;
   margin-bottom: 0.5rem;
 }
 
diff --git a/webui/src/components/Footer.js b/webui/src/components/layout/Footer.js
similarity index 100%
rename from webui/src/components/Footer.js
rename to webui/src/components/layout/Footer.js
diff --git a/webui/src/components/layout/Header.css b/webui/src/components/layout/Header.css
new file mode 100644
index 00000000..046638be
--- /dev/null
+++ b/webui/src/components/layout/Header.css
@@ -0,0 +1,70 @@
+/* .bx--header__nav::before {
+  display: none;
+}
+
+.bx--header__menu-item {
+  position: relative;
+}
+
+.bx--header__menu-item.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background-color: #0f62fe;
+}
+
+.bx--header__menu-item:hover {
+  background-color: #353535;
+}
+
+.bx--header__action:hover {
+  background-color: #353535;
+}
+
+.bx--header__name:hover {
+  background-color: #353535;
+} */
+
+.user-menu {
+  padding: 0;
+}
+
+.user-menu-panel {
+  height: fit-content;
+}
+
+.user-menu-username {
+  font-size: 1.2rem !important;
+  margin-bottom: 10px;
+  margin-top: 5px;
+}
+.user-menu-list {
+  margin: 0 !important;
+}
+
+.user-menu-list li {  
+  font-size: 0.9rem;
+  padding: 5px 5px 5px 15px;
+  cursor: pointer;
+}
+
+.user-menu-list li::before {
+  display: none;
+}
+
+.user-menu-logout {
+  width: 100%;
+  background-color: #353535;
+  margin-top: 5px;
+}
+
+.user-menu-logout > a {
+  display: block;
+  width: 100%;
+  text-decoration: none;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
\ No newline at end of file
diff --git a/webui/src/components/layout/Header.js b/webui/src/components/layout/Header.js
new file mode 100644
index 00000000..f4dcc4f4
--- /dev/null
+++ b/webui/src/components/layout/Header.js
@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+import {
+  Header as CarbonHeader,
+  HeaderName,
+  HeaderGlobalBar,
+  HeaderGlobalAction,
+  HeaderPanel,
+  Theme,
+  UnorderedList,
+  ListItem,
+} from "@carbon/react";
+import { Menu, UserAvatar, CloseLarge, List } from "@carbon/icons-react";
+import { useAuth } from "src/contexts/AuthContext";
+
+import UISideNav from "./SideNav";
+import "./Header.css";
+
+const Header = () => {
+  const { user, signOut } = useAuth();
+
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
+  const [isMainMenuOpen, setIsMainMenuOpen] = useState(false);
+
+  const handleMainMenuOpen = () => {
+    // console.log(isMainMenuOpen);
+    setIsMainMenuOpen((prevState) => !prevState);
+  };
+
+  const handleUserMenuClick = () => {
+    setIsUserMenuOpen((prevState) => !prevState);
+  };
+
+  const handleLogout = () => {
+    signOut();
+    setIsUserMenuOpen(false);
+  };
+
+  return (
+    <Theme theme="g100">
+      <CarbonHeader aria-label="RAG Modulo">
+        <HeaderGlobalAction aria-label="" onClick={handleMainMenuOpen}>
+          {isMainMenuOpen ? <CloseLarge size={20} /> : <Menu size={20} />}
+        </HeaderGlobalAction>
+        <HeaderName href="#" prefix="">
+          RAG Modulo
+        </HeaderName>
+        <HeaderGlobalBar>
+          <HeaderGlobalAction
+            aria-label="User Avatar"
+            onClick={handleUserMenuClick}
+            isActive={isUserMenuOpen}
+          >
+            <UserAvatar size={24} />
+          </HeaderGlobalAction>
+        </HeaderGlobalBar>
+        {isUserMenuOpen && (
+          <HeaderPanel
+            expanded
+            aria-label="User Menu"
+            className="user-menu-panel"
+          >
+            <div className="user-menu">
+              <UnorderedList className="user-menu-list">
+                {user ? (
+                  <>
+                    <ListItem key="username" className="user-menu-username"> {user.name || "User"} </ListItem>
+                    <ListItem key="profile"> Profile </ListItem>
+                    <ListItem key="settings"> Settings </ListItem>
+                    <ListItem key="logout" className="user-menu-logout">
+                      <a href="#" onClick={handleLogout}>Logout</a>
+                    </ListItem>
+                  </>
+                ) : (
+                  <ListItem key="signin" className="user-menu-signin">
+                    <a href="/signin">Sign In</a>
+                  </ListItem>
+                )}
+              </UnorderedList>
+            </div>
+          </HeaderPanel>
+        )}
+        <UISideNav
+          isSideNavExpanded={isMainMenuOpen}
+          handleSideNavExpand={handleMainMenuOpen}
+        />
+      </CarbonHeader>
+    </Theme>
+  );
+};
+
+export default Header;
diff --git a/webui/src/components/layout/SideNav.css b/webui/src/components/layout/SideNav.css
new file mode 100644
index 00000000..e69de29b
diff --git a/webui/src/components/SideNav.js b/webui/src/components/layout/SideNav.js
similarity index 73%
rename from webui/src/components/SideNav.js
rename to webui/src/components/layout/SideNav.js
index eacfeb79..a9a3e851 100644
--- a/webui/src/components/SideNav.js
+++ b/webui/src/components/layout/SideNav.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { SideNav, SideNavItems, SideNavLink } from "@carbon/react";
+import { SideNav, SideNavDivider, SideNavItems, SideNavLink } from "@carbon/react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Fade} from '@carbon/icons-react';
 
@@ -42,10 +42,19 @@ const UISideNav = ({ isSideNavExpanded, handleSideNavExpand }) => {
         <SideNavLink
           renderIcon={Fade}
           href="#"
-          onClick={() => onNavigate("/create-collection")}
-          isActive={isActive("/create-collection")}
+          onClick={() => onNavigate("/search")}
+          isActive={isActive("/search")}
         >
-          Create New Collection
+          Search Documents
+        </SideNavLink>
+        <SideNavDivider />
+        <SideNavLink
+          renderIcon={Fade}
+          href="#"
+          onClick={() => onNavigate("/document-collections")}
+          isActive={isActive("/document-collections")}
+        >
+          Document Collections
         </SideNavLink>
         {/* Add more menu items as needed */}
       </SideNavItems>
diff --git a/webui/src/components/NavigationBar.js b/webui/src/components/old/_NavigationBar.js
similarity index 100%
rename from webui/src/components/NavigationBar.js
rename to webui/src/components/old/_NavigationBar.js
diff --git a/webui/src/components/SignIn.js b/webui/src/components/old/_SignIn.js
similarity index 100%
rename from webui/src/components/SignIn.js
rename to webui/src/components/old/_SignIn.js
diff --git a/webui/src/config/config.js b/webui/src/config/config.js
index d4f57338..cd484b81 100644
--- a/webui/src/config/config.js
+++ b/webui/src/config/config.js
@@ -34,7 +34,8 @@ const getFullApiUrl = (route) => {
 
 const authConfig = {
     client_id: config.oidcClientId,
-    redirect_uri: getFullApiUrl(API_ROUTES.CALLBACK),
+    // redirect_uri: getFullApiUrl(API_ROUTES.CALLBACK),
+    redirect_uri: window.location.origin + '/callback',
     response_type: "code",
     scope: "openid profile email",
     post_logout_redirect_uri: getFullApiUrl(''),
diff --git a/webui/src/contexts/AuthContext.js b/webui/src/contexts/AuthContext.js
index 674bd38f..bee17ee8 100644
--- a/webui/src/contexts/AuthContext.js
+++ b/webui/src/contexts/AuthContext.js
@@ -1,15 +1,19 @@
-import React, { createContext, useState, useEffect, useContext } from 'react';
-import { getUserData, signIn as signInService, signOut as signOutService, handleAuthCallback, checkAuth } from '../services/authService';
-import config, { API_ROUTES } from '../config/config';
-
-console.log('AuthContext initialized with config:', config);
+import React, { createContext, useState, useEffect, useContext } from "react";
+import {
+  getUserData,
+  signIn as signInService,
+  signOut as signOutService,
+  handleAuthCallback,
+  checkAuth,
+} from "../services/authService";
+import config, { API_ROUTES } from "../config/config";
 
 const AuthContext = createContext({
   user: null,
   loading: true,
   signIn: () => {},
   signOut: () => {},
-  fetchUser: () => {}
+  fetchUser: () => {},
 });
 
 export const AuthProvider = ({ children }) => {
@@ -17,62 +21,51 @@ export const AuthProvider = ({ children }) => {
   const [loading, setLoading] = useState(true);
 
   const fetchUser = async () => {
+    setLoading(true);
     try {
-      console.log("Fetching user data...");
       const userData = await getUserData();
-      console.log("User data received:", userData);
       if (userData && userData.success) {
         setUser(userData.data);
       } else {
-        console.warn("No user data received");
         setUser(null);
       }
+      setLoading(false);
     } catch (error) {
-      console.error('Error fetching user:', error);
+      console.error("Error fetching user:", error);
       setUser(null);
     } finally {
       setLoading(false);
     }
   };
 
-  useEffect(() => {
-    const initAuth = async () => {
-      setLoading(true);
-      try {
-        console.log("Initializing authentication...");
-        const authResult = handleAuthCallback();
-        console.log("Auth callback result:", authResult);
-        if (authResult.success) {
-          console.log("Auth callback handled successfully, fetching user data...");
-          await fetchUser();
-        } else {
-          console.log("Checking authentication status...");
-          const { authenticated } = await checkAuth();
-          if (authenticated) {
-            console.log("User is authenticated, fetching user data...");
-            await fetchUser();
-          } else {
-            console.log("User is not authenticated");
-            setUser(null);
-          }
-        }
-      } catch (error) {
-        console.error("Error during authentication initialization:", error);
-        setUser(null);
-      } finally {
-        setLoading(false);
-      }
-    };
+  // useEffect(() => {
+  //   const initAuth = async () => {
+  //     // setLoading(true);
+  //     try {
+  //       const authResult = await handleAuthCallback();
+  //       if (authResult.success) {
+  //         await fetchUser();
+  //       } else {
+  //         const { authenticated } = await checkAuth();
+  //         if (authenticated) {
+  //           await fetchUser();
+  //         } else {
+  //           setUser(null);
+  //         }
+  //       }
+  //     } catch (error) {
+  //       console.error("Error during authentication initialization:", error);
+  //       setUser(null);
+  //     } finally {
+  //       // setLoading(false);
+  //     }
+  //   };
 
-    initAuth();
-  }, []);
+  //   initAuth();
+  // }, []);
 
   const signIn = () => {
-    console.log("Initiating sign-in process...");
-    console.log("Config:", config);
-    console.log("API_ROUTES:", API_ROUTES);
     if (API_ROUTES && API_ROUTES.LOGIN) {
-      console.log("Sign-in URL:", `${config.apiUrl}${API_ROUTES.LOGIN}`);
       return signInService();
     } else {
       console.error("LOGIN route is not defined in API_ROUTES");
@@ -82,13 +75,10 @@ export const AuthProvider = ({ children }) => {
 
   const signOut = async () => {
     try {
-      console.log("Initiating sign-out process...");
-      console.log("Sign-out URL:", `${config.apiUrl}${API_ROUTES.LOGOUT}`);
       await signOutService();
       setUser(null);
-      console.log("Sign-out successful");
     } catch (error) {
-      console.error('Error logging out:', error);
+      console.error("Error logging out:", error);
     }
   };
 
@@ -97,20 +87,18 @@ export const AuthProvider = ({ children }) => {
     loading,
     signIn,
     signOut,
-    fetchUser
+    fetchUser,
   };
 
-  console.log("AuthContext value:", value);
-
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 };
 
 export const useAuth = () => {
   const context = useContext(AuthContext);
   if (!context) {
-    throw new Error('useAuth must be used within an AuthProvider');
+    throw new Error("useAuth must be used within an AuthProvider");
   }
   return context;
 };
 
-export default AuthContext;
\ No newline at end of file
+export default AuthContext;
diff --git a/webui/src/pages/HomePage.js b/webui/src/pages/HomePage.js
index 878d7bac..17f2a1fd 100644
--- a/webui/src/pages/HomePage.js
+++ b/webui/src/pages/HomePage.js
@@ -5,13 +5,13 @@ import {
   ClickableTile,
 } from '@carbon/react';
 import { Settings as SettingsIcon } from '@carbon/icons-react';
-import Header from '../components/Header.js';
-import UISideNav from '../components/SideNav.js';
-import QueryInput from '../components/QueryInput';
-import ResultsDisplay from '../components/ResultsDisplay';
-import DashboardSettings from '../components/DashboardSettings';
+import Header from '../components/layout/Header.js';
+import UISideNav from '../components/layout/SideNav.js';
+import QueryInput from '../components/common/QueryInput.js';
+import ResultsDisplay from '../components/common/ResultsDisplay.js';
+import DashboardSettings from '../components/dashboard/DashboardSettings.js';
 import IngestionSettings from '../components/IngestionSettings';
-import CollectionForm from '../components/CollectionForm';
+import CollectionForm from '../components/collection/CollectionForm.js';
 import '../css/common.css';
 
 const HomePage = () => {
diff --git a/webui/src/services/authService.js b/webui/src/services/authService.js
index cc31274c..293b674f 100644
--- a/webui/src/services/authService.js
+++ b/webui/src/services/authService.js
@@ -1,24 +1,17 @@
 import config, { API_ROUTES, getFullApiUrl } from '../config/config';
 
-console.log('Auth service initialized with config:', config);
-
 export const signIn = () => {
-  console.log("Initiating sign-in process");
   const loginUrl = getFullApiUrl(API_ROUTES.LOGIN);
-  console.log("Login URL:", loginUrl);
   return loginUrl;
 };
 
-export const handleAuthCallback = () => {
-  console.log("Handling auth callback");
-  const urlParams = new URLSearchParams(window.location.search);
+export const handleAuthCallback = async () => {
+  const urlParams = await new URLSearchParams(window.location.search);
   const token = urlParams.get('token');
-  console.log("Received token:", token ? "Token present" : "No token");
 
   if (token) {
     try {
       localStorage.setItem('jwt_token', token);
-      console.log("Token received and stored");
       // Remove the token from the URL
       window.history.replaceState({}, document.title, window.location.pathname);
       return { success: true };
@@ -34,12 +27,11 @@ export const handleAuthCallback = () => {
 export const fetchWithAuthHeader = async (url, options = {}) => {
   const token = localStorage.getItem('jwt_token');
   if (!token) {
-    console.error("No token found, unable to proceed.");
+    console.error("No token found, unable to proceed.", url, options);
     return null;
   }
 
   try {
-    console.log(`Fetching ${url} with auth header`);
     const response = await fetch(url, {
       ...options,
       headers: {
@@ -55,7 +47,6 @@ export const fetchWithAuthHeader = async (url, options = {}) => {
     }
 
     const data = await response.json();
-    console.log(`Successful response from ${url}:`, data);
     return data;
   } catch (error) {
     console.error("Error in fetchWithAuthHeader:", error);
@@ -64,12 +55,9 @@ export const fetchWithAuthHeader = async (url, options = {}) => {
 };
 
 export const getUserData = async () => {
-  console.log("Fetching user data...");
   try {
     const userDataUrl = getFullApiUrl(API_ROUTES.USERINFO);
-    console.log("User data URL:", userDataUrl);
     const userData = await fetchWithAuthHeader(userDataUrl);
-    console.log("User data retrieved:", userData);
     localStorage.setItem('user_data', JSON.stringify(userData));
     return { success: true, data: userData };
   } catch (error) {
@@ -79,12 +67,9 @@ export const getUserData = async () => {
 };
 
 export const signOut = async () => {
-  console.log("Initiating sign-out process");
   try {
     const logoutUrl = getFullApiUrl(API_ROUTES.LOGOUT);
-    console.log("Logout URL:", logoutUrl);
     await fetchWithAuthHeader(logoutUrl, { method: 'POST' });
-    console.log("Logout successful");
     return { success: true };
   } catch (error) {
     console.error("Error during sign out:", error);
@@ -95,7 +80,6 @@ export const signOut = async () => {
 };
 
 const clearAuthData = () => {
-  console.log("Clearing auth data");
   localStorage.removeItem('jwt_token');
   localStorage.removeItem('user_data');
   // Clear any other auth-related data here
@@ -104,18 +88,14 @@ const clearAuthData = () => {
 export const logout = signOut;
 
 export const checkAuth = async () => {
-  console.log("Checking authentication status");
   const token = localStorage.getItem('jwt_token');
   if (!token) {
-    console.log("No token found, user is not authenticated");
     return { isAuthenticated: false };
   }
 
   try {
     const checkAuthUrl = getFullApiUrl(API_ROUTES.SESSION);
-    console.log("Check auth URL:", checkAuthUrl);
     const response = await fetchWithAuthHeader(checkAuthUrl);
-    console.log("Authentication check result:", response);
     return { isAuthenticated: response && response.authenticated };
   } catch (error) {
     console.error("Error checking authentication:", error);
diff --git a/webui/src/styles/global.css b/webui/src/styles/global.css
index a8fed011..a2f834ff 100644
--- a/webui/src/styles/global.css
+++ b/webui/src/styles/global.css
@@ -5,10 +5,10 @@ body {
   color: #161616;
 }
 
-.page-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem;
+/* Children router container common styles */
+/* Change here to apply to all children router containers */
+.children-container {
+  padding: 2rem 0 2rem 3rem;
 }
 
 .page-header {
diff --git a/webui/src/styles/view-ui.css b/webui/src/styles/view-ui.css
index 95ed9fe5..27b2e97f 100644
--- a/webui/src/styles/view-ui.css
+++ b/webui/src/styles/view-ui.css
@@ -15,7 +15,6 @@
   inline-size: 75px !important;
 }
 
-
 .view-title button {
   display: flex;
 }
@@ -24,22 +23,26 @@
   border-top: 1px solid #ccc;
   margin-top: 2rem;
   padding-top: 1rem;
-  padding-inline: .5rem !important;
+  padding-inline: 0.5rem !important;
 }
 
-.view-detail-grid > div {
-  margin-top: 1.5rem;
+.view-detail-grid .cds--row {
   font-size: 14px;
+  display: flex;
+}
+
+.cds--col{
+  margin-top: 1.5rem;
+  width: 50%;;
 }
 
 .view-detail-label {
   font-weight: 600;
 }
 .view-detail-text {
-  padding-top: .3rem;
+  padding-top: 0.3rem;
 }
 
-
 .view-title {
   display: flex;
   flex-direction: row;
@@ -65,4 +68,12 @@
     display: flex;
     /* width: 100%; */
   }
+
+  .view-detail-grid .cds--row {
+    flex-direction: column;
+  }
+
+  .cds--col {
+    width: 100%;
+  }
 }