diff --git a/src/FilterLists.Web.V2/package-lock.json b/src/FilterLists.Web.V2/package-lock.json
index 316000e1f..f3d8608e5 100644
Binary files a/src/FilterLists.Web.V2/package-lock.json and b/src/FilterLists.Web.V2/package-lock.json differ
diff --git a/src/FilterLists.Web.V2/package.json b/src/FilterLists.Web.V2/package.json
index ad140b771..852819583 100644
--- a/src/FilterLists.Web.V2/package.json
+++ b/src/FilterLists.Web.V2/package.json
@@ -16,6 +16,7 @@
     "react-dom": "^16.9.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "^3.1.1",
+    "slugify": "^1.3.4",
     "typescript": "^3.6.2"
   },
   "scripts": {
@@ -39,4 +40,4 @@
       "last 1 safari version"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/FilterLists.Web.V2/src/components/ListInfoButton.tsx b/src/FilterLists.Web.V2/src/components/ListInfoButton.tsx
index 9d49bd744..cfc6f11d7 100644
--- a/src/FilterLists.Web.V2/src/components/ListInfoButton.tsx
+++ b/src/FilterLists.Web.V2/src/components/ListInfoButton.tsx
@@ -1,6 +1,7 @@
 import { Button, Icon } from 'antd';
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
+import slugify from 'slugify';
 
 import { List } from '../interfaces/List';
 
@@ -9,7 +10,7 @@ interface Props {
 };
 
 export const ListInfoButton = (props: RouteComponentProps & Props) => {
-  const listPath = `/${props.list.id}`;
+  const listPath = `/${slugify(props.list.name)}`;
   return (
     <Button
       type="primary"
diff --git a/src/FilterLists.Web.V2/src/components/listsTable/ListDrawer.tsx b/src/FilterLists.Web.V2/src/components/listsTable/ListDrawer.tsx
index e9c0d636f..a82170c27 100644
--- a/src/FilterLists.Web.V2/src/components/listsTable/ListDrawer.tsx
+++ b/src/FilterLists.Web.V2/src/components/listsTable/ListDrawer.tsx
@@ -16,7 +16,7 @@ interface Props {
 
 export const ListDrawer = (props: Props) => {
     const renderDrawer = (rp: RouteComponentProps<any, StaticContext, any>) => {
-        const list = props.lists.find(l => l.id === +rp.match.params.id);
+        const list = props.lists.find(l => l.slug === rp.match.params.listSlug);
         return list
             ? <ListInfoDrawer
                 list={list as List}
@@ -26,5 +26,5 @@ export const ListDrawer = (props: Props) => {
                 {...rp} />
             : props.lists && props.lists.length && <Redirect to={{ pathname: "/", }} />;
     };
-    return <Route path="/:id" render={renderDrawer} />;
+    return <Route path="/:listSlug" render={renderDrawer} />;
 };
\ No newline at end of file
diff --git a/src/FilterLists.Web.V2/src/hooks/useLists.tsx b/src/FilterLists.Web.V2/src/hooks/useLists.tsx
index ede7f5f0b..b75846434 100644
--- a/src/FilterLists.Web.V2/src/hooks/useLists.tsx
+++ b/src/FilterLists.Web.V2/src/hooks/useLists.tsx
@@ -1,4 +1,10 @@
+import slugify from 'slugify';
+
 import { List } from '../interfaces/List';
 import { useApiData } from './useApiData';
 
-export const useLists = () => useApiData<List[]>("/api/v1/lists") || [];
\ No newline at end of file
+export const useLists = () => {
+    const lists = useApiData<List[]>("/api/v1/lists");
+    lists && lists.forEach(l => l.slug = slugify(l.name));
+    return lists || [];
+};
\ No newline at end of file
diff --git a/src/FilterLists.Web.V2/src/interfaces/List.ts b/src/FilterLists.Web.V2/src/interfaces/List.ts
index cbc034223..f63bf709a 100644
--- a/src/FilterLists.Web.V2/src/interfaces/List.ts
+++ b/src/FilterLists.Web.V2/src/interfaces/List.ts
@@ -19,4 +19,7 @@
     tagIds: number[];
     viewUrl: string;
     viewUrlMirrors: string[];
+
+    // auto-generated by useLists hook
+    slug: string;
 };
\ No newline at end of file