diff --git a/frontend/src/core/constants/path.ts b/frontend/src/core/constants/path.ts
index 6786b63..199ee37 100644
--- a/frontend/src/core/constants/path.ts
+++ b/frontend/src/core/constants/path.ts
@@ -1,5 +1,7 @@
 export const ROUTE = {
   HOME: '/',
+  LAW_LIBRARY: '/law-library',
+  LAW_DETAIL: '/law-library/:id',
   AUTH: {
     LOGIN: '/login',
     REGISTER: '/register',
diff --git a/frontend/src/hooks/routes/use-router-element.tsx b/frontend/src/hooks/routes/use-router-element.tsx
index 8750285..ca2eaa7 100644
--- a/frontend/src/hooks/routes/use-router-element.tsx
+++ b/frontend/src/hooks/routes/use-router-element.tsx
@@ -37,6 +37,8 @@ const User = lazy(() => import('@/pages/users/user/User'))
 const LawyerList = lazy(() => import('@/pages/users/lawyer/LawyerList'))
 const LawyerProfile = lazy(() => import('@/pages/users/lawyer/LawyerProfile'))
 const Appointments = lazy(() => import('@/pages/users/appointments/Appointments'))
+const LawLibraryPage = lazy(() => import('@/pages/law-search/LawLibraryPage'))
+const LawDetail = lazy(() => import('@/pages/law-search/LawDetail'))
 
 // Lawyer Lazy loaded components
 const LawyerDashboard = lazy(() => import('@/pages/lawyers/dashboard/LawyerDashboard'))
@@ -45,6 +47,7 @@ const LawyerMessages = lazy(() => import('@/pages/lawyers/messages/LawyerMessage
 const LawyerProfileEdit = lazy(() => import('@/pages/lawyers/profile/LawyerProfileEdit'))
 const LawyerSettings = lazy(() => import('@/pages/lawyers/setting/LawyerSettings'))
 
+
 export default function useRoutesElements() {
   const location = useLocation()
   const { isAuthenticated } = useAuth()
@@ -58,6 +61,14 @@ export default function useRoutesElements() {
         {!isAuthenticated ? (
           <Route element={<LayoutClient />}>
             <Route path={ROUTE.HOME} element={<HomePage />} />
+            <Route
+              path={ROUTE.LAW_LIBRARY}
+              element={<LawLibraryPage />}
+            />
+            <Route
+              path={ROUTE.LAW_DETAIL}
+              element={<LawDetail />}
+            />
           </Route>
         ) : (
           <Route element={<ProtectedRoute redirectPath={ROUTE.AUTH.LOGIN} />}>
diff --git a/frontend/src/pages/home/components/hero-section.tsx b/frontend/src/pages/home/components/hero-section.tsx
index 1edd167..b93bb0f 100644
--- a/frontend/src/pages/home/components/hero-section.tsx
+++ b/frontend/src/pages/home/components/hero-section.tsx
@@ -35,7 +35,7 @@ export const HeroSection = () => {
               <Button variant='default' size='lg' onClick={() => navigate('/login')}>
                 {t('home.hero.getStarted')}
               </Button>
-              <Button onClick={() => window.open('#', '_blank')} variant='secondary' size='lg'>
+              <Button onClick={() => navigate('/law-library')} variant='secondary' size='lg'>
                 {t('home.hero.searchLaw')}
               </Button>
             </div>
diff --git a/frontend/src/pages/law-search/LawDetail.tsx b/frontend/src/pages/law-search/LawDetail.tsx
new file mode 100644
index 0000000..b4d08f7
--- /dev/null
+++ b/frontend/src/pages/law-search/LawDetail.tsx
@@ -0,0 +1,5 @@
+export default function LawDetail() {
+  return (
+    <div>LawDetail</div>
+  )
+}
diff --git a/frontend/src/pages/law-search/LawLibraryPage.tsx b/frontend/src/pages/law-search/LawLibraryPage.tsx
new file mode 100644
index 0000000..bc3fa4a
--- /dev/null
+++ b/frontend/src/pages/law-search/LawLibraryPage.tsx
@@ -0,0 +1,5 @@
+export default function LawLibraryPage() {
+  return (
+    <div>LawSearchPage</div>
+  )
+}