diff --git a/Grayjay.Desktop.Web/src/components/containers/ContentGrid/index.tsx b/Grayjay.Desktop.Web/src/components/containers/ContentGrid/index.tsx
index b01ea937..474215cd 100644
--- a/Grayjay.Desktop.Web/src/components/containers/ContentGrid/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/containers/ContentGrid/index.tsx
@@ -169,13 +169,13 @@ const ContentGrid: Component<ContentGridProps> = (props) => {
 
     const renderCreator = (creator: IPlatformAuthorLink) => {
         return (
-            <CreatorView id={creator.id}
+            <a href={"/web/channel?url=" + encodeURIComponent(creator.url)}><CreatorView id={creator.id}
                 name={creator.name}
                 onClick={() => navigate("/web/channel?url=" + encodeURIComponent(creator.url), { state: { author: creator
                  } })}
                 thumbnail={creator.thumbnail}
                 metadata={((creator.subscribers && creator.subscribers > 0) ? (toHumanNumber(creator.subscribers) + " subscribers") : "")}
-                url={creator.url} />
+                url={creator.url} /></a>
         );
     };
 
@@ -186,11 +186,11 @@ const ContentGrid: Component<ContentGridProps> = (props) => {
         });
         
         return (
-            <PlaylistView itemCount={playlist.videoCount}
+            <a href={("/web/remotePlaylist?url=" + encodeURIComponent(playlist.url))}><PlaylistView itemCount={playlist.videoCount}
                 name={playlist.name}
                 thumbnail={playlist.thumbnail}
                 platformIconUrl={pluginIconUrl$()}
-                onClick={() => navigate("/web/remotePlaylist?url=" + encodeURIComponent(playlist.url))} />
+                onClick={() => navigate("/web/remotePlaylist?url=" + encodeURIComponent(playlist.url))} /></a>
         );
         //onSettings={(e) => onSettingsClicked(e, playlist)}
     };
@@ -231,24 +231,25 @@ const ContentGrid: Component<ContentGridProps> = (props) => {
                     builder={(index, item) =>
                         <Switch>
                             <Match when={item()?.contentType == ContentType.MEDIA}>
-                                <VideoThumbnailView video={item() as IPlatformVideo}
-                                    useCache={!!props?.useCache}
-                                    onSettings={(e, content)=> onSettingsClicked(e, content)}
-                                    onAddtoQueue={(e, content)=>video?.actions.addToQueue(content as IPlatformVideo)}
-                                    onClick={() => {
-                                        const url = item().backendUrl ?? item().url;
-                                        if (url)
-                                            video?.actions.openVideo(item() as IPlatformVideo);
-                                        }} />
+                                <a href={"/web/video?url="+(item().backendUrl ?? item().url)}>
+                                    <VideoThumbnailView video={item() as IPlatformVideo}
+                                        useCache={!!props?.useCache}
+                                        onSettings={(e, content)=> onSettingsClicked(e, content)}
+                                        onAddtoQueue={(e, content)=>video?.actions.addToQueue(content as IPlatformVideo)}
+                                        onClick={() => {
+                                            const url = item().backendUrl ?? item().url;
+                                            if (url)
+                                                video?.actions.openVideo(item() as IPlatformVideo);
+                                            }} />                                </a>
                             </Match>
                             <Match when={item()?.contentType == ContentType.POST}>
-                                <PostThumbnailView post={item() as IPlatformPost}
+                                <a href={"/web/details/post?url=" + encodeURIComponent(item().backendUrl ?? item().url)}><PostThumbnailView post={item() as IPlatformPost}
                                     onSettings={(e, content)=> onSettingsClicked(e, content)}
                                     onClick={() =>{
                                         const url = item().backendUrl ?? item().url;
                                         if(url)
                                             navigate("/web/details/post?url=" + encodeURIComponent(url));
-                                    }} />
+                                    }} /></a>
                             </Match>
                             <Match when={item()?.contentType == ContentType.NESTED_VIDEO}>
                                 <NestedMediaThumbnailView video={item() as IPlatformNestedMedia}
diff --git a/Grayjay.Desktop.Web/src/components/content/VideoThumbnailView/index.tsx b/Grayjay.Desktop.Web/src/components/content/VideoThumbnailView/index.tsx
index 89e0ff08..d300caa5 100644
--- a/Grayjay.Desktop.Web/src/components/content/VideoThumbnailView/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/content/VideoThumbnailView/index.tsx
@@ -87,12 +87,16 @@ const VideoThumbnailView: Component<VideoProps> = (props) => {
         <div class={styles.title} onClick={props.onClick} onDragStart={startDrag} draggable={true}>{props.video?.name}</div>
         <div class={styles.bottomRow}>
             <Show when={showAuthorThumbnail$()}>
-              <AnimatedImage src={props.video?.author.thumbnail} class={styles.authorThumbnail} alt="author thumbnail" onClick={onClickAuthor} referrerPolicy='no-referrer' />
+              <a href={props.video?.author.url? "/web/channel?url=" + encodeURIComponent(props.video?.author.url):undefined}>
+                <AnimatedImage src={props.video?.author.thumbnail} class={styles.authorThumbnail} alt="author thumbnail" onClick={onClickAuthor} referrerPolicy='no-referrer' />
+              </a>
             </Show>
             <div class={styles.authorColumn} style={{
               "margin-left": showAuthorThumbnail$() ? "8px" : undefined
             }}>
-                <div class={styles.authorName} onClick={onClickAuthor}>{props.video?.author?.name ?? "Unknown"}</div>
+                <a href={props.video?.author.url? "/web/channel?url=" + encodeURIComponent(props.video?.author.url):undefined}>
+                  <div class={styles.authorName} onClick={onClickAuthor}>{props.video?.author?.name ?? "Unknown"}</div>
+                </a>
                 <Show when={props.video}>
                     <div class={styles.metadata}><Show when={(props.video?.viewCount ?? 0) > 0}>{toHumanNumber(props.video?.viewCount)} views • </Show>{toHumanNowDiffString(props.video?.dateTime)}</div>
                 </Show>
@@ -100,14 +104,18 @@ const VideoThumbnailView: Component<VideoProps> = (props) => {
             
 
             <Show when={props.onAddtoQueue}>
+              <a href="javascript:void(0)">
               <IconButton icon={addToQueueIcon} 
                 style={{"margin-right": "7px", "margin-top": "4px"}}
                 iconPadding='3px'
-                height={"22px"} width={"22px"} ref={refAddToQueueButton} onClick={() => props.onAddtoQueue?.(refAddToQueueButton!, props.video!)} />
+                height={"22px"} width={"22px"} ref={refAddToQueueButton} onClick={() => {props.onAddtoQueue?.(refAddToQueueButton!, props.video!); return false;}} />
+              </a>
             </Show>
             
             <Show when={props.onSettings}>
-              <IconButton icon={more} ref={refMoreButton} onClick={() => props.onSettings?.(refMoreButton!, props.video!)} />
+            <a href="javascript:void(0)">
+              <IconButton icon={more} ref={refMoreButton} onClick={() => {console.log(1111.1); props.onSettings?.(refMoreButton!, props.video!); return false;}} />
+            </a>
             </Show>
         </div>
     </div>
diff --git a/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.tsx b/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.tsx
index 041f9c02..73994c21 100644
--- a/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.tsx
@@ -525,7 +525,6 @@ const VideoDetailView: Component<VideoDetailsProps> = (props) => {
 
     const isMinimized = createMemo(() => {
         const res = video?.state() === VideoState.Minimized && !isFullscreen();
-        console.log("isMinimized", res);
         return res;
     });
 
@@ -594,10 +593,18 @@ const VideoDetailView: Component<VideoDetailsProps> = (props) => {
         repositionMinimize();
     };
 
-    onMount(() => {
+    const [params, setParams] = useSearchParams();
+    onMount(async () => {
         resizeObserver.observe(scrollContainerRef!);
         window.addEventListener('resize', handleWindowResize);
         setDimensions({ width: scrollContainerRef!.clientWidth, height: scrollContainerRef!.clientHeight });
+        if(location.pathname==="/web/video"){
+            const url=params.url;
+            const result = (!url) ? null : (await DetailsBackend.videoLoad(url));
+            if(result){
+                video?.actions.openVideo(result?.video);
+            }
+        }
     });
 
     onCleanup(() => {
@@ -1382,18 +1389,20 @@ const VideoDetailView: Component<VideoDetailsProps> = (props) => {
                             </div>
                             <div class={styles.authorContainer}>
                                 <Show when={isThumbnailValid$()}>
-                                    <img src={author$()?.thumbnail} class={styles.author} alt="author" onClick={onClickAuthor} referrerPolicy='no-referrer' />
+                                    <a href={"/web/channel?url=" + encodeURIComponent(author$()?.url??"")}><img src={author$()?.thumbnail} class={styles.author} alt="author" onClick={onClickAuthor} referrerPolicy='no-referrer' /></a>
                                 </Show>
-                                <div class={styles.authorDescription} style={{
-                                    "margin-left": isThumbnailValid$() ? undefined : "40px"
-                                }}>
-                                    <div class={styles.authorName} onClick={onClickAuthor}>{author$()?.name}</div>
-                                    <div style="flex-grow:1;"></div>
-                                    <Show when={(author$()?.subscribers ?? 0) > 0}>
-                                        <div class={styles.authorMetadata} onClick={onClickAuthor}>{toHumanNumber(author$()?.subscribers)} subscribers</div>
+                                <a href={"/web/channel?url=" + encodeURIComponent(author$()?.url??"")}>
+                                    <div class={styles.authorDescription} style={{
+                                        "margin-left": isThumbnailValid$() ? undefined : "40px"
+                                    }}>
+                                        <div class={styles.authorName} onClick={onClickAuthor}>{author$()?.name}</div>
                                         <div style="flex-grow:1;"></div>
-                                    </Show>
-                                </div>
+                                        <Show when={(author$()?.subscribers ?? 0) > 0}>
+                                            <div class={styles.authorMetadata} onClick={onClickAuthor}>{toHumanNumber(author$()?.subscribers)} subscribers</div>
+                                            <div style="flex-grow:1;"></div>
+                                        </Show>
+                                    </div>
+                                </a>
 
                                 <SubscribeButton author={author$()?.url} style={{"margin-top": "29px"}} />
 
diff --git a/Grayjay.Desktop.Web/src/components/menus/SideBar/index.tsx b/Grayjay.Desktop.Web/src/components/menus/SideBar/index.tsx
index c33b2daf..2d4db233 100644
--- a/Grayjay.Desktop.Web/src/components/menus/SideBar/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/menus/SideBar/index.tsx
@@ -150,6 +150,7 @@ const SideBar: Component<SideBarProps> = (props: SideBarProps) => {
       icon: iconSettings,
       name: 'Settings',
       action: () => UIOverlay.overlaySettings(),
+      path: '/web/settings',
       selected: location.pathname === '/web/settings'
     });
   
@@ -257,14 +258,14 @@ const SideBar: Component<SideBarProps> = (props: SideBarProps) => {
           </Show>
         </div>
         {topButtons$().slice(0, visibleTopButtonCount$()).map(btn => (
-          <SideBarButton
+          <a href={btn.path} style="width: 100%;"><SideBarButton
             collapsed={collapsed()}
             icon={btn.icon}
             name={btn.name}
             selected={btn.selected}
             onClick={() => btn.action ? btn.action() : navigateTo(btn.path!, options)}
             onRightClick={btn.onRightClick}
-          />
+          /></a>
         ))}
         <Show when={moreTopButtonCount$() > 0}>
           <SideBarButton
@@ -295,6 +296,7 @@ const SideBar: Component<SideBarProps> = (props: SideBarProps) => {
                     <FlexibleArrayList outerContainerRef={scrollContainerRef} 
                       items={subscriptions$()}
                       builder={(_, item$) => 
+                        <a href={"/web/channel?url=" + encodeURIComponent(item$()?.channel!.url)}>
                         <SideBarCreator onClick={() => {
                           const author = item$()?.channel;
                           if (!author) {
@@ -302,6 +304,7 @@ const SideBar: Component<SideBarProps> = (props: SideBarProps) => {
                           }
                           navigate("/web/channel?url=" + encodeURIComponent(author!.url), { state: { author } });
                         }} icon={item$()?.channel?.thumbnail} name={item$()?.channel?.name} selected={false} />
+                        </a>
                       } />
                   </ScrollContainer>
                 </Match>
@@ -312,13 +315,13 @@ const SideBar: Component<SideBarProps> = (props: SideBarProps) => {
       </Show>
       <div class={styles.buttonListBottom}>
         {bottomButtons$().map(btn => (
-          <SideBarButton
+          <a href={btn.path} style="width: 100%;"><SideBarButton
             collapsed={collapsed()}
             icon={btn.icon}
             name={btn.name}
             selected={btn.selected}
             onClick={() => btn.action ? btn.action() : navigateTo(btn.path!, options)}
-          />
+          /></a>
         ))}
       </div>
       <Portal>
@@ -335,14 +338,14 @@ const SideBar: Component<SideBarProps> = (props: SideBarProps) => {
             <div style="background-color: #141414; width: 200px; height: calc(100% - 20px); border-right: #2a2a2a 1px solid; padding: 10px; display: flex;
     flex-direction: column; align-items: center; gap: 6px;">
               {topButtons$().slice(visibleTopButtonCount$(), visibleTopButtonCount$() + moreTopButtonCount$()).map(btn => (
-                  <SideBarButton
+                  <a href={btn.path}><SideBarButton
                     collapsed={false}
                     icon={btn.icon}
                     name={btn.name}
                     selected={btn.selected}
                     onClick={() => btn.action ? btn.action() : navigateTo(btn.path!, options)}
                     onRightClick={btn.onRightClick}
-                  />
+                  /></a>
                 ))}
             </div>
           </div>
diff --git a/Grayjay.Desktop.Web/src/components/player/PlayerControlsView/index.tsx b/Grayjay.Desktop.Web/src/components/player/PlayerControlsView/index.tsx
index f84cea70..481a2a2a 100644
--- a/Grayjay.Desktop.Web/src/components/player/PlayerControlsView/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/player/PlayerControlsView/index.tsx
@@ -285,7 +285,6 @@ const PlayerControlsView: Component<PlayerControlsProps> = (props) => {
                 return;
             }
         }
-
         switch (ev.key) {
             case " ":
             case "k":
diff --git a/Grayjay.Desktop.Web/src/index.css b/Grayjay.Desktop.Web/src/index.css
index baf534e3..c54b37a7 100644
--- a/Grayjay.Desktop.Web/src/index.css
+++ b/Grayjay.Desktop.Web/src/index.css
@@ -56,4 +56,9 @@ code {
 
 img {
   -webkit-user-drag: none;
+}
+
+a {
+  color: inherit; 
+  text-decoration: inherit
 }
\ No newline at end of file
diff --git a/Grayjay.Desktop.Web/src/index.tsx b/Grayjay.Desktop.Web/src/index.tsx
index 86f41b7e..e367847f 100644
--- a/Grayjay.Desktop.Web/src/index.tsx
+++ b/Grayjay.Desktop.Web/src/index.tsx
@@ -149,9 +149,11 @@ const App: Component<RouteSectionProps> = (props) => {
 
 render(() => (
   <Router root={App}>
-    <Route path="/web/index.html" component={HomePage} />
-    <Route path="/web" component={HomePage} />
-    <Route path="/web/home" component={HomePage} />
+    <Route path="/web/video" component={BuyPage} />
+    <Route path="/web/index.html" component={DefaultPage} />
+    <Route path="/web" component={DefaultPage} />
+    <Route path="/web/home" component={DefaultPage} />
+    <Route path="/web/recommended" component={HomePage} />
     <Route path="/web/search" component={SearchPage} />
     <Route path="/web/subscriptions" component={SubscriptionsPage} />
     <Route path="/web/creators" component={CreatorsPage} />
diff --git a/Grayjay.Desktop.Web/src/pages/Creators/index.tsx b/Grayjay.Desktop.Web/src/pages/Creators/index.tsx
index b1d5653b..d2311498 100644
--- a/Grayjay.Desktop.Web/src/pages/Creators/index.tsx
+++ b/Grayjay.Desktop.Web/src/pages/Creators/index.tsx
@@ -161,6 +161,7 @@ const CreatorsPage: Component = () => {
               "margin-top": "7px"*/
             }}
             builder={(index, item) =>
+              <a href={"/web/channel?url=" + encodeURIComponent(item()?.channel?.url)}>
               <CreatorView {... item()?.channel} 
                 metadata={((item()?.channel?.subscribers && item()?.channel?.subscribers > 0) ? (toHumanNumber(item()?.channel?.subscribers) + " subscribers") : "")}
                 onClick={() => {
@@ -172,7 +173,7 @@ const CreatorsPage: Component = () => {
                   showSubscriptionSettings(el, item());
                 }}
                 subscription={item()}
-                isSubscribedInitialState={true} />
+                isSubscribedInitialState={true} /></a>
             } />
         </ScrollContainer>
       </Show>
diff --git a/Grayjay.Desktop.Web/src/pages/History/index.tsx b/Grayjay.Desktop.Web/src/pages/History/index.tsx
index 509f3668..50619bfc 100644
--- a/Grayjay.Desktop.Web/src/pages/History/index.tsx
+++ b/Grayjay.Desktop.Web/src/pages/History/index.tsx
@@ -284,7 +284,7 @@ const HistoryPage: Component = () => {
                         "width": historyVideo() ? `${(getVideoProgressPercentage(historyVideo()?.position, historyVideo()?.video?.duration))}%` : undefined
                       }} />
                     </div>
-                    <div style="display: flex; flex-direction: column; height: 100%; margin-left: 20px; width: 100%;">
+                    <a href={"/web/video?url="+historyVideo()?.video.url}><div style="display: flex; flex-direction: column; height: 100%; margin-left: 20px; width: 100%;">
                       <div class={styles.videoTitle} onClick={openVideo}>{historyVideo()?.video.name}</div>
                       <div style="flex-grow: 1"></div>
                       <div style="display: flex; flex-direction: row; align-items: center;">
@@ -294,7 +294,7 @@ const HistoryPage: Component = () => {
                           <div class={styles.authorMetadata} onClick={openAuthor}>{metadata()}</div>
                         </div>
                       </div>
-                    </div>
+                    </div></a>
                     <div style="flex-grow: 1"></div>
                     <IconButton icon={ic_more}
                       style={{"flex-shrink": 0}}
diff --git a/Grayjay.Desktop.Web/src/pages/Playlists/index.tsx b/Grayjay.Desktop.Web/src/pages/Playlists/index.tsx
index 145d878c..6f072680 100644
--- a/Grayjay.Desktop.Web/src/pages/Playlists/index.tsx
+++ b/Grayjay.Desktop.Web/src/pages/Playlists/index.tsx
@@ -294,7 +294,8 @@ const PlaylistsPage: Component = () => {
                   });
 
                   return (
-                    <PlaylistView name={item()?.name}
+                    <a href={"/web/playlist?id=" + item()?.id}>
+                      <PlaylistView name={item()?.name}
                       itemCount={item()?.videos.length}
                       thumbnail={bestThumbnail$()?.url}
                       onClick={() => {
@@ -309,6 +310,7 @@ const PlaylistsPage: Component = () => {
                           onSettingsClicked(e, playlist);
                         }
                       }} />
+                    </a>
                   );
                 }} />
             </Show>