diff --git a/go.mod b/go.mod
index 366b3d4..65c1ecc 100644
--- a/go.mod
+++ b/go.mod
@@ -1,6 +1,6 @@
 module searchengine
 
-go 1.21.6
+go 1.23
 
 require (
 	github.com/PuerkitoBio/goquery v1.9.1 // indirect
diff --git a/main.go b/main.go
index 5898a6c..bdc19c3 100644
--- a/main.go
+++ b/main.go
@@ -32,6 +32,9 @@ var funcs = template.FuncMap{
 var templates = template.Must(template.New("").Funcs(funcs).ParseFiles("templates/results.html"))
 
 func main() {
+    // Serve static files from the 'static' directory
+    http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))
+
     http.HandleFunc("/", handleSearch)
     http.HandleFunc("/search", handleSearch)
     fmt.Println("Server is listening on http://localhost:5000")
diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..46ddd70
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,1675 @@
+/* inter-300 - latin */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 300;
+    src: local(''),
+        url('/fonts/inter-v12-latin-300.woff2') format('woff2'),
+        /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('/fonts/inter-v12-latin-300.woff') format('woff');
+    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* inter-regular - latin */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    src: local(''),
+        url('/fonts/inter-v12-latin-regular.woff2') format('woff2'),
+        /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('/fonts/inter-v12-latin-regular.woff') format('woff');
+    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* inter-700 - latin */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 700;
+    src: local(''),
+        url('/fonts/inter-v12-latin-700.woff2') format('woff2'),
+        /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('/fonts/inter-v12-latin-700.woff') format('woff');
+    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* material-icons-round-regular - latin */
+@font-face {
+    font-display: swap;
+    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Material Icons Round';
+    font-style: normal;
+    font-weight: 400;
+    src: url('/fonts/material-icons-round-v108-latin-regular.woff2') format('woff2');
+    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+.highlight {
+    color: var(--highlight);
+    font-weight: bold;
+    font-style: normal;
+}
+
+.material-icons-round {
+    font-family: 'Material Icons Round' !important;
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    visibility: hidden;
+    /* will be set to visible if icon pack can be loaded. */
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -moz-font-feature-settings: 'liga';
+    -moz-osx-font-smoothing: grayscale;
+}
+
+#search-wrapper-ico,
+#clearSearch {
+    background: none;
+    border: none;
+    color: var(--fg);
+    position: absolute;
+    top: 7px;
+    right: 10px;
+    cursor: pointer;
+}
+
+#search-wrapper-ico:hover,
+#clearSearch:hover {
+    transition: all .3s ease;
+    color: var(--blue);
+}
+
+#sub-search-wrapper-ico {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 0px;
+    /* will be set to 17px if icon pack can be loaded. */
+    padding-right: 0px;
+    margin-right: 0px;
+}
+
+#clearSearch {
+    right: 40px;
+    visibility: hidden;
+}
+
+.fetched_dif {
+    margin-top: 110px !important;
+}
+
+.fetched_img {
+    margin-left: 1.2% !important;
+    left: 0px !important;
+}
+
+.clean {
+    max-width: 775px;
+}
+
+.prev-next {
+    left: 175px;
+    position: relative;
+    max-width: 600px;
+}
+
+.prev-img {
+    left: 0px !important;
+    margin-left: 1.2% !important;
+}
+
+.prev-next button:hover {
+    border: 1px solid #5f6368;
+    cursor: pointer;
+}
+
+.prev-next button {
+    color: var(--font-fg);
+    background-color: var(--button);
+    font-size: 14px;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 7px 10px 7px 10px;
+    margin: 0px 10px 18px 0px;
+}
+
+body {
+    margin: 0;
+}
+
+html {
+    background-color: var(--html-bg);
+    font-family: 'Inter', Arial, Helvetica, sans-serif;
+    font-size: 16px;
+}
+
+#info_font {
+    font-size: 15px;
+}
+
+.calc {
+    height: fit-content;
+    width: fit-content;
+    position: relative;
+    left: 175px;
+    border: 1px solid var(--snip-border);
+    background-color: var(--snip-background);
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.calc-btn-style {
+    background-color: var(--html-bg) !important;
+}
+
+.calc-input {
+    width: 90%;
+    height: 10%;
+    background-color: var(--search-bg);
+    border: 1px solid var(--snip-border);
+    border-radius: 8px;
+    padding: 15px;
+    margin-top: 8px;
+    text-align: right;
+    max-width: 48em;
+    line-height: 1.58;
+    font-size: 22px;
+    color: var(--fg);
+    letter-spacing: normal;
+    overflow: hidden;
+}
+
+.calc-btn {
+    max-width: 48em;
+    line-height: 50px;
+    font-size: 22px;
+    color: var(--fg);
+    letter-spacing: normal;
+    border-radius: 8px;
+    background-color: var(--search-bg);
+    border: 1px solid var(--snip-border);
+    height: 50px;
+    margin: auto;
+    margin: 4px;
+    width: 80px;
+    text-align: center;
+}
+
+.calc-btn-2 {
+    max-width: 48em;
+    line-height: 50px;
+    font-size: 22px;
+    color: var(--fff);
+    letter-spacing: normal;
+    border-radius: 8px;
+    background-color: var(--blue);
+    height: 50px;
+    margin: auto;
+    margin: 4px;
+    width: 80px;
+    text-align: center;
+}
+
+.calc-btns {
+    display: grid;
+    grid-template-columns: repeat(4, 90px);
+    width: 100%;
+    justify-content: center;
+    padding: 4px;
+}
+
+.calc-pos-absolute {
+    position: absolute;
+    margin-top: 60px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.prev_calculation {
+    opacity: 0.5;
+    font-size: 14px;
+}
+
+.emoji-code {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.images {
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: 35.4%;
+    position: relative;
+}
+
+.image {
+    flex-grow: 1;
+    padding: .5rem .5rem 3rem .5rem;
+    margin: .25rem;
+    border: 1px solid #00000000;
+    border-radius: 12px;
+    height: 10rem;
+}
+
+.image_selected {
+    border-color: var(--blue);
+}
+
+.image>a {
+    position: relative;
+    text-decoration: none;
+}
+
+.image .resolution {
+    position: absolute;
+    opacity: 0;
+    top: calc(100% - 25px);
+    left: 5px;
+    font-size: 12px;
+    background-color: var(--view-image-color);
+    color: var(--fg);
+    border-radius: 4px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    transition: .3s;
+    padding: 0 2px;
+}
+
+.image img {
+    transition: .3s;
+}
+
+.resolution {
+    transition: .3s !important;
+}
+
+.image:hover .resolution {
+    opacity: 1;
+}
+
+.image:hover img {
+    box-shadow: 0 14px 28px var(--view-image-color);
+}
+
+.img_title,
+.img_source {
+    display: block;
+    position: absolute;
+    width: 100%;
+    font-size: .9rem;
+    color: var(--fg);
+    padding: .5rem 0 0 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.img_title {
+    color: var(--blue);
+}
+
+.img_source {
+    padding: 1.8rem 0 0 0;
+    font-size: .7rem;
+}
+
+.image img {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    vertical-align: bottom;
+    border-radius: 12px;
+    box-sizing: border-box;
+    border: 1px solid var(--border);
+}
+
+.image_view {
+    position: fixed;
+    width: 33%;
+    height: 82%;
+    z-index: 70;
+    background-color: var(--image-view);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    margin-top: 0px;
+    margin-bottom: 20px;
+    margin-right: 1.2%;
+    right: 0px;
+}
+
+.image-view-close {
+    background-color: var(--image-view-titlebar);
+    height: 7%;
+    width: 100%;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.image-close,
+.image-next,
+.image-before {
+    margin-left: -1px;
+    border-radius: 50%;
+    padding: 5px;
+    color: var(--search-button);
+    font-weight: normal;
+}
+
+.image-close {
+    margin-right: 10px;
+}
+
+.image-close:hover,
+.image-next:hover,
+.image-before:hover {
+    background-color: var(--image-select);
+}
+
+.btn-nostyle {
+    background-color: inherit;
+    border: none;
+    padding: 0px;
+    width: fit-content;
+}
+
+.view-image {
+    background-color: var(--view-image-color);
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.view-image img {
+    max-width: 100%;
+    max-height: 427px;
+}
+
+.image_view a {
+    text-decoration: none;
+    color: var(--link);
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.image_view a:hover {
+    text-decoration: underline;
+}
+
+.image_view p {
+    margin-left: 20px;
+    margin-right: 20px;
+    display: block;
+}
+
+.image_view a {
+    display: block;
+}
+
+hr {
+    border: 0;
+    border-top: 1px solid var(--border);
+    margin: 0;
+    padding: 0;
+}
+
+.image_hide {
+    display: none !important;
+}
+
+.image_show {
+    display: initial !important;
+}
+
+.icon_visibility {
+    visibility: visible;
+}
+
+.images_viewer_hidden {
+    margin-right: 1.2% !important;
+}
+
+.stats {
+    color: var(--green);
+    max-width: 48em;
+    line-height: 1.25rem;
+    margin-bottom: 1px;
+    font-size: 13px;
+}
+
+.publish__info {
+    color: var(--publish-info);
+    max-width: 48em;
+    line-height: 1.25rem;
+    font-size: 13px;
+}
+
+.results .video_title {
+    font-size: 16px;
+}
+
+.video_title {
+    font-size: 16px;
+}
+
+.video-results-margin {
+    margin-bottom: 0px !important;
+}
+
+.video__img__results img {
+    width: 254px;
+    height: 143px;
+    object-fit: cover;
+}
+
+.video__img__results {
+    position: relative;
+    left: 175px;
+    max-width: 600px;
+}
+
+.video__results {
+    margin-bottom: 1.5em;
+    display: flex;
+    margin-top: 1px;
+    max-width: 600px;
+}
+
+.video__results .results h3 {
+    margin-left: 14px;
+}
+
+.video__results .results p {
+    margin-left: 14px;
+}
+
+.video__results .results {
+    margin-top: 0px;
+}
+
+.duration {
+    position: absolute;
+    color: #fff;
+    font-size: 11px;
+    padding: .5em;
+    background: rgba(0, 0, 0, .5);
+    right: 0;
+    margin-top: -28px !important;
+    line-height: 1.3;
+    letter-spacing: -0.4px;
+}
+
+.pipe {
+    font-size: 0.7em;
+}
+
+.wrapper {
+    margin: 0 auto;
+    background: var(--search-bg-input);
+    border-radius: 22px;
+    position: absolute;
+    width: 520px;
+    overflow: hidden;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    border: 2px solid var(--search-bg-input-border);
+}
+
+.wrapper input {
+    padding: 10px;
+}
+
+.wrapper-results {
+    margin: 0 auto;
+    background: var(--search-bg-input);
+    border-radius: 22px;
+    position: absolute;
+    width: 628px;
+    overflow: hidden;
+    margin-top: 0px;
+    top: 18px;
+    left: 170px;
+    z-index: 2;
+    border: 1px solid var(--search-bg-input-border);
+}
+
+.wrapper-results:hover,
+.wrapper-results:focus-within,
+.wrapper:hover,
+.wrapper:focus-within {
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.24);
+    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
+}
+
+#theme,
+#lang,
+#safe,
+#open-new-tab,
+#domain,
+#javascript-setting,
+#ux_lang {
+    border-radius: 4px;
+    padding: 6px;
+    font-size: 15px;
+    border: 1px solid var(--border);
+    color: var(--font-fg);
+    width: 160px;
+    background: var(--button);
+    float: right;
+    transition: all .3s ease;
+}
+
+#theme:hover,
+#lang:hover,
+#safe:hover,
+#open-new-tab:hover,
+#domain:hover,
+#javascript-setting:hover,
+#ux_lang:hover {
+    border: 1px solid #5f6368;
+    cursor: pointer;
+}
+
+.domain,
+.lang {
+    margin-top: 10px;
+    border: 1px solid var(--button);
+    border-radius: 4px;
+    padding: 6px;
+    font-size: 15px;
+    color: var(--font-fg);
+    width: 90%;
+    background: var(--button);
+}
+
+.save {
+    border-radius: 4px;
+    padding: 6px;
+    font-size: 15px;
+    border: 1px solid var(--border);
+    color: var(--font-fg);
+    width: 160px;
+    background: var(--button);
+    float: right;
+    transition: all .3s ease;
+}
+
+.save:hover {
+    border: 1px solid #5f6368;
+    cursor: pointer;
+}
+
+.settings-row2 {
+    border-bottom: 1px solid var(--html-bg) !important;
+}
+
+.font-hide {
+    color: var(--html-bg);
+}
+
+.settings-nav {
+    max-width: 100%;
+    height: 40px;
+    background-color: var(--search-bg);
+    border-bottom: 1px solid var(--border);
+    padding: 10px;
+}
+
+.settings {
+    background-color: var(--html-bg);
+    border-radius: 8px;
+    max-width: 820px;
+    height: 100%;
+    padding: 10px;
+    margin-left: 170px;
+    margin-top: 20px;
+    padding-bottom: 100px;
+}
+
+.settings-row {
+    display: flex;
+    align-items: center;
+    padding: 2px;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-bottom: 1px solid var(--border);
+}
+
+.settings-row select,
+.settings-row button {
+    margin-left: auto;
+}
+
+.kno_wiki {
+    display: none;
+}
+
+.kno_wiki_show {
+    display: initial !important;
+}
+
+.open-in-new-tab * {
+    display: inline-block;
+}
+
+.results_settings {
+    color: var(--fg);
+    left: 175px;
+    position: relative;
+    font-size: 15px;
+    margin-bottom: 10px;
+    max-width: 580px;
+    margin-top: 110px;
+    display: flex;
+}
+
+.results-settings,
+.results-save,
+.torrent-settings,
+.torrent-sort-save,
+.torrent-cat {
+    border-radius: 4px;
+    width: 127px;
+    margin-right: 10px;
+    padding: 6px;
+    font-size: 14px;
+    border: 1px solid var(--html-bg);
+    color: var(--highlight);
+    background: var(--html-bg);
+    cursor: pointer;
+    transition: all .3s ease;
+}
+
+.torrent-cat:hover,
+.torrent-settings:hover,
+.torrent-sort-save:hover {
+    color: var(--font-fg);
+    transition: all .3s ease;
+}
+
+.torrent-settings,
+.torrent-sort-save {
+    width: fit-content;
+}
+
+form.torrent-sort {
+    position: relative;
+    left: 175px;
+    max-width: fit-content;
+}
+
+.results-settings:hover,
+.results-save:hover {
+    color: var(--font-fg);
+    transition: all .3s ease;
+}
+
+.settings-results-link {
+    position: absolute;
+    color: var(--fg);
+    text-decoration: none;
+}
+
+.settings-search-div {
+    position: absolute;
+    right: 90px;
+    top: 30px;
+    font-size: 14px;
+    display: flex;
+}
+
+.settings-search-div-search {
+    right: 20px;
+    top: 25px;
+    position: fixed;
+    z-index: 9999;
+}
+
+#settingsButton {
+    transition: all .3s ease;
+}
+
+.settings-icon-link {
+    font-size: 20px;
+}
+
+.settings-icon-link-search {
+    font-size: 25px;
+    background-color: inherit;
+    border: none;
+}
+
+.search-menu {
+    position: fixed;
+    height: 420px;
+    width: 330px;
+    right: 0;
+    margin-top: 60px;
+    z-index: 9999;
+    margin-right: 20px;
+    background-color: var(--html-bg);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+}
+
+.search-menu h2 {
+    color: var(--fg);
+    display: flex;
+    justify-content: center;
+    font-size: 1.5rem;
+    margin: 14px;
+}
+
+.search-menu button {
+    color: var(--font-fg);
+    background-color: var(--button);
+    font-size: 14px;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 10px 10px 10px 10px;
+    width: 90%;
+}
+
+.search-menu button:hover {
+    border: 1px solid #5f6368;
+    cursor: pointer;
+}
+
+.settings-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.settings-menu-hidden {
+    display: none;
+}
+
+.settings-menu-visible {
+    display: initial;
+}
+
+.themes-settings-menu {
+    background: var(--snip-background);
+    color: var(--fg);
+    border-radius: 4px;
+    height: 100%;
+    margin: 5px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.themes-settings-menu>div {
+    width: calc(50% - 10px);
+    margin: 5px;
+}
+
+
+.view-image-search {
+    border: 1px solid var(--snip-border);
+    margin: 0;
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    object-position: center;
+    vertical-align: bottom;
+    border-radius: 4px;
+}
+
+.theme-settings {
+    margin-top: 10px;
+    width: 90%;
+    border: 1px solid var(--snip-border);
+    background: var(--snip-background);
+    color: var(--fg);
+    border-radius: 4px;
+    height: 100%;
+}
+
+.theme-settings p {
+    margin: 0px;
+    padding-top: 5px;
+    margin-left: 3%;
+}
+
+.settings-search-div:hover p {
+    color: #8ab4f8;
+}
+
+.settings-search-div:hover a,
+.settings-search-div:hover button {
+    transition: all .3s ease;
+    color: var(--blue);
+}
+
+.settings-results-link,
+.settings-icon-link {
+    color: var(--fg);
+    text-decoration: none;
+}
+
+.settings-results-link {
+    margin-left: 24px;
+    display: block;
+    margin-top: 1px;
+}
+
+.wrapper-results input {
+    padding: 10px;
+}
+
+.autocomplete {
+    padding: 0px;
+}
+
+.autocomplete ul {
+    margin: 0;
+    padding: 0;
+}
+
+.autocomplete ul li {
+    list-style: none;
+    opacity: 0;
+    display: none;
+    padding: 8px 12px;
+}
+
+.show .autocomplete ul li {
+    opacity: 1;
+    display: block;
+    text-align: left;
+}
+
+.show .autocomplete {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    color: var(--font-fg);
+}
+
+.autocomplete ul li:hover {
+    cursor: pointer;
+    background: var(--search-select);
+}
+
+.selected {
+    background: var(--search-select);
+}
+
+.hide {
+    display: none;
+}
+
+input,
+button {
+    outline: none;
+}
+
+.search-container {
+    text-align: center;
+    margin-top: 10%;
+}
+
+.search-container h1 {
+    font-size: 70px;
+    color: var(--font-fg);
+    font-family: 'Inter';
+}
+
+.X {
+    color: var(--blue);
+}
+
+.search-container input {
+    width: 90%;
+    color: var(--font-fg);
+    background-color: var(--search-bg-input);
+    font-size: inherit;
+    font-family: sans-serif;
+    border: none;
+    margin-right: 100%;
+    margin-left: 3px;
+}
+
+h3 {
+    color: var(--link);
+    text-decoration: none;
+}
+
+h3:hover {
+    text-decoration: underline;
+}
+
+p {
+    color: var(--fg);
+    max-width: 48em;
+    line-height: 1.58;
+    font-size: 14px;
+}
+
+.check {
+    display: flex;
+    position: relative;
+    left: 175px;
+    width: 600px;
+    word-wrap: break-word;
+    font-size: 15px;
+    max-width: 48em;
+    line-height: 1.58;
+}
+
+.check p,
+.check h3 {
+    font-size: 16px;
+    margin-bottom: 2px;
+    margin-top: 2px;
+}
+
+.check p {
+    color: #ff7769;
+}
+
+.check a {
+    color: var(--link);
+    text-decoration: none;
+}
+
+.check h3 {
+    margin-left: 4px;
+    font-style: italic;
+}
+
+.check a:hover {
+    text-decoration: underline;
+}
+
+.torrent h3 {
+    font-size: 16px !important;
+}
+
+.seeders {
+    color: #31b06e;
+}
+
+.leechers {
+    color: #b0316e;
+}
+
+.results-search-container {
+    background-color: var(--search-bg);
+    width: 100%;
+    border-bottom: 1px solid var(--border);
+    position: fixed;
+    z-index: 999;
+    top: 0;
+}
+
+.footer {
+    box-sizing: border-box;
+    width: 100%;
+    background-color: var(--footer-bg);
+    color: var(--footer-font);
+    position: relative;
+    bottom: 0;
+    padding-left: 10px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    padding-left: 40px;
+    border-top: 1px solid var(--border);
+}
+
+#search_footer {
+    position: fixed;
+}
+
+.footer a,
+.footer a:hover,
+.footer a:visited {
+    text-decoration: none;
+    color: var(--footer-font);
+}
+
+.footer a {
+    text-decoration: none;
+    color: var(--footer-font);
+    font-size: 15px;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+.footer a:hover {
+    text-decoration: underline;
+}
+
+.results-search-container input {
+    width: 90%;
+    color: var(--font-fg);
+    background-color: var(--search-bg-input);
+    font-size: inherit;
+    font-family: sans-serif;
+    border: none;
+    margin-right: 100%;
+    margin-left: 3px;
+}
+
+.results {
+    position: relative;
+    left: 175px;
+    margin-top: 18px;
+    max-width: 600px;
+    word-wrap: break-word;
+    margin-bottom: 35px;
+}
+
+.result_sublink {
+    position: relative;
+    left: 175px;
+    margin-top: 10px;
+    max-width: 600px;
+    word-wrap: break-word;
+}
+
+.sublinks {
+    position: relative;
+    left: 14px;
+    max-width: 600px;
+    word-wrap: break-word;
+}
+
+.search-button-wrapper button:hover {
+    border: 1px solid #5f6368;
+    cursor: pointer;
+}
+
+.search-button-wrapper button {
+    color: var(--font-fg);
+    background-color: var(--button);
+    font-size: 14px;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 13px 10px 13px 10px;
+    margin: 70px 60px 0px 60px;
+}
+
+.no-decoration {
+    text-decoration: none;
+    color: var(--font-fg);
+    font-family: 'Inter';
+}
+
+.no-decoration:hover {
+    text-decoration: none;
+}
+
+.logomobile {
+    position: absolute;
+    margin-top: 0px;
+    top: 20px;
+    left: 38px;
+}
+
+.sub-search-button-wrapper button {
+    border: none;
+    background-color: inherit;
+    font-size: 14px;
+    font-family: 'Inter';
+    margin-right: 14px;
+    color: var(--search-button);
+    margin-top: 72px;
+    padding-bottom: 11px;
+    max-width: 48em;
+}
+
+.sub-search-button-wrapper button:hover {
+    color: #8ab4f8;
+}
+
+.search-active {
+    color: var(--blue) !important;
+}
+
+.search-container-results-btn {
+    display: flex;
+    color: var(--blue);
+}
+
+.search-container-results-btn:hover button {
+    transition: all 0.3s ease;
+    color: var(--blue);
+}
+
+.sub-search-button-wrapper img {
+    vertical-align: middle;
+    margin-right: 5px;
+    width: 20px;
+}
+
+.sub-search-button-wrapper {
+    margin-left: 175px;
+    margin-bottom: 6px;
+    height: 98px;
+    display: flex;
+}
+
+:root {
+    /*--search-bg-input: #1a1a1a; /* Example background color */
+    --search-bg-input-border: #2a2a2a; /* Visible border color */
+    color-scheme: dark;
+}
+
+.fetched {
+    color: var(--fg);
+    left: 175px;
+    position: relative;
+    font-size: 14px;
+    margin-bottom: 10px;
+    max-width: 580px;
+    margin-top: -2px;
+}
+
+.results a:visited h3,
+.result_sublink a:visited h3 {
+    color: var(--link-visited);
+}
+
+.results h3,
+.result_sublink h3 {
+    margin-top: 4px;
+    margin-bottom: 2px;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 1.3;
+    letter-spacing: -0.4px;
+}
+
+.results p,
+.result_sublink p {
+    margin-top: 0px;
+}
+
+.results a,
+.results a:hover,
+.results a:visited,
+.result_sublink a,
+.result_sublink a:hover,
+.result_sublink a:visited {
+    text-decoration: none;
+    color: #ebecf7;
+    font-size: 14px;
+}
+
+#link,
+#link:hover,
+#link:visited {
+    display: block;
+    text-decoration: none;
+    color: var(--fg);
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.snip {
+    padding: 17px;
+    border: 1px solid var(--snip-border);
+    width: 440px;
+    border-radius: 8px;
+    background: var(--snip-background);
+    color: var(--fg);
+    margin-left: 840px;
+    margin-top: 0px;
+    position: absolute;
+    max-width: 48em;
+    line-height: 1.58;
+    font-size: 14px;
+    letter-spacing: normal;
+}
+
+.snip_title {
+    margin-top: 0;
+    margin-bottom: 0;
+    color: var(--highlight);
+    font-weight: bold;
+    font-style: normal;
+    max-width: 48em;
+    line-height: 1.58;
+    font-size: 22px;
+}
+
+.snip img {
+    float: right;
+    max-width: 30%;
+    max-height: 150px;
+    padding-bottom: 10px;
+    margin-left: 10px;
+}
+
+.snip a {
+    display: block;
+    margin-top: 10px;
+    text-decoration: none;
+    color: var(--link);
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.snip a:hover {
+    text-decoration: underline;
+}
+
+.snipp {
+    padding: 10px;
+    border-bottom: 1px solid var(--border);
+    width: 500px;
+    background: inherit;
+    color: var(--fg);
+    margin-left: 170px;
+    margin-top: 0px;
+    position: relative;
+    line-height: 1.58;
+    font-size: 16px;
+    float: none;
+    max-width: 48em;
+}
+
+.snipp a {
+    display: block;
+    margin-top: 10px;
+    text-decoration: none;
+    color: var(--link);
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.snipp a:hover {
+    text-decoration: underline;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
+.no-results-found {
+    border-radius: 8px;
+    position: relative;
+    border: 1px solid var(--snip-border);
+    margin-left: 175px;
+    color: var(--fg);
+    width: 530px;
+    padding: 15px;
+    margin-bottom: 627px;
+    margin-top: -20px;
+    font-size: 14px;
+    line-height: 1.58;
+    letter-spacing: normal;
+}
+
+@media only screen and (max-width: 1320px) {
+
+    .snip {
+        margin-left: 780px;
+    }
+}
+
+@media only screen and (max-width: 1220px) {
+
+    .snip {
+        position: relative;
+        float: none;
+        margin-left: 170px;
+    }
+}
+
+@media only screen and (max-width: 750px) {
+
+    .snip,
+    .no-results-found {
+        position: relative;
+        float: none;
+        max-width: 86%;
+        margin-left: 10px;
+        width: auto;
+        font-size: 13px;
+    }
+
+    .calc {
+        left: 20px;
+    }
+
+    .results h3,
+    .result_sublink h3 {
+        font-size: 16px;
+    }
+
+    #link,
+    #link:hover,
+    #link:visited {
+        font-size: 13px;
+    }
+
+    .sub-search-button-wrapper {
+        height: 77px;
+    }
+
+    .snip a {
+        font-size: 13px;
+    }
+
+    .snip_title {
+        font-size: 16px;
+    }
+
+    .settings {
+        max-width: 100%;
+        margin-left: 0px;
+        overflow-x: hidden;
+        background: inherit;
+        margin-top: 10px;
+        border-radius: 0px;
+        margin-bottom: 70px;
+        border-left: none;
+        border-right: none;
+    }
+
+    #theme {
+        margin-right: 0px;
+    }
+
+    .footer {
+        padding-left: 10px;
+    }
+
+    .footer a {
+        margin-left: -13px;
+        font-size: 14px;
+        padding-right: 10px;
+    }
+
+    .wrapper {
+        width: 86%;
+        position: absolute;
+        float: none;
+        margin-top: 0px;
+        margin-bottom: 0px;
+        margin-left: auto;
+        margin-right: auto;
+        display: block;
+        margin-top: 0px;
+        top: 110px;
+        left: 4px;
+    }
+
+    .wrapper input {
+        padding: 10px;
+        max-width: 92%;
+    }
+
+    .wrapper-results {
+        width: 90%;
+        position: absolute;
+        float: none;
+        margin-top: 0px;
+        margin-bottom: 0px;
+        margin-left: auto;
+        margin-right: auto;
+        display: block;
+        margin-top: 0px;
+        top: 50px;
+        left: 18px;
+    }
+
+    .wrapper-results input {
+        padding: 9px;
+        max-width: 92%;
+    }
+
+    .check {
+        left: 20px;
+        max-width: 90%;
+    }
+
+    .snipp {
+        position: relative;
+        float: none;
+        max-width: 90%;
+        margin-left: 10px;
+        width: auto;
+        font-size: 16px;
+    }
+
+    p {
+        font-size: 13px;
+        line-height: normal;
+    }
+
+    html {
+        font-size: 14px;
+    }
+
+    h3 {
+        font-size: 18px;
+    }
+
+    .sublinks {
+        max-width: 90%;
+    }
+
+    .results-search-container {
+        margin-left: auto;
+        margin-right: auto;
+        text-align: center;
+    }
+
+    .results-search-container input {
+        width: 84%;
+        margin-right: 100%;
+        margin-left: 3px;
+    }
+
+    .image_view {
+        width: 100%;
+        height: 77%;
+        margin-top: -33px;
+        margin-right: 0%;
+        border-top-right-radius: 0px;
+        border-top-left-radius: 0px;
+    }
+
+    .view-image img {
+        max-height: 250px;
+    }
+
+    .images {
+        margin-right: 1.2% !important;
+    }
+
+    .logomobile {
+        position: relative;
+        float: none;
+        margin-top: 0px;
+        margin-bottom: 0px;
+        margin-left: auto;
+        margin-right: auto;
+        padding: 10px;
+        font-size: 26px;
+        display: block;
+        margin-top: 0px;
+        top: 0px;
+        left: 0px;
+    }
+
+    .mobile-none {
+        display: none;
+    }
+
+    .search-menu {
+        display: none;
+    }
+
+    .sub-search-button-wrapper {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        align-items: baseline;
+        justify-content: center;
+    }
+
+    .fetched_tor {
+        margin-top: 135px !important;
+    }
+
+    .sub-search-button-wrapper img {
+        margin: 0;
+        padding: 0;
+    }
+
+    .sub-search-button-wrapper button {
+        margin-right: 4px;
+        margin-left: 4px;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 14px;
+        margin-top: 46px;
+        padding-bottom: 5px;
+    }
+
+    .save {
+        margin-left: 28px;
+    }
+
+    .results {
+        left: 20px;
+        max-width: 90%;
+    }
+
+    .prev-next {
+        left: 20px;
+        max-width: 90%;
+    }
+
+    .video__img__results img {
+        width: 127px;
+        height: 71.5px;
+    }
+
+    .video__img__results {
+        left: 20px;
+        max-width: 90%;
+    }
+
+    .video__results {
+        max-width: 90%;
+    }
+
+    .result_sublink {
+        left: 20px;
+        max-width: 90%;
+    }
+
+    .fetched {
+        left: 20px;
+        max-width: 90%;
+        font-size: 13px;
+        margin-top: -2px;
+    }
+
+    .fetched_img {
+        margin-top: 135px !important;
+        margin-left: 1.2% !important;
+        left: 0px !important;
+    }
+
+    .fetched_vid {
+        margin-top: 135px !important;
+    }
+
+    .results_settings {
+        left: 20px;
+        font-size: 13px;
+        margin-top: 140px;
+        max-width: 355px;
+    }
+
+    .video_title {
+        font-size: 14px !important;
+    }
+
+    select.results-settings {
+        width: 110px;
+    }
+
+    form.torrent-sort {
+        left: 20px;
+    }
+
+    #search-wrapper-ico {
+        top: 5px;
+    }
+
+    .settings-search-div {
+        display: none;
+    }
+
+    .search-container h1 {
+        font-size: 55px;
+        margin-bottom: 70px;
+        margin-top: 15px;
+    }
+
+    .search-container {
+        position: absolute;
+        width: 100%;
+        text-align: center;
+    }
+
+    .search-container input {
+        width: 84%;
+        margin-right: 100%;
+        margin-left: 3px;
+    }
+
+    .search-button-wrapper button {
+        display: table-row;
+        margin: 30px 0px 0px 0px;
+        width: 80%;
+    }
+
+    #clearSearch {
+        top: 6px;
+    }
+
+}
diff --git a/static/fonts/inter-v12-latin-300.woff b/static/fonts/inter-v12-latin-300.woff
new file mode 100644
index 0000000..f3fe81e
Binary files /dev/null and b/static/fonts/inter-v12-latin-300.woff differ
diff --git a/static/fonts/inter-v12-latin-300.woff2 b/static/fonts/inter-v12-latin-300.woff2
new file mode 100644
index 0000000..e085aa8
Binary files /dev/null and b/static/fonts/inter-v12-latin-300.woff2 differ
diff --git a/static/fonts/inter-v12-latin-700.woff b/static/fonts/inter-v12-latin-700.woff
new file mode 100644
index 0000000..097e23e
Binary files /dev/null and b/static/fonts/inter-v12-latin-700.woff differ
diff --git a/static/fonts/inter-v12-latin-700.woff2 b/static/fonts/inter-v12-latin-700.woff2
new file mode 100644
index 0000000..8fcc432
Binary files /dev/null and b/static/fonts/inter-v12-latin-700.woff2 differ
diff --git a/static/fonts/inter-v12-latin-regular.woff b/static/fonts/inter-v12-latin-regular.woff
new file mode 100644
index 0000000..1866261
Binary files /dev/null and b/static/fonts/inter-v12-latin-regular.woff differ
diff --git a/static/fonts/inter-v12-latin-regular.woff2 b/static/fonts/inter-v12-latin-regular.woff2
new file mode 100644
index 0000000..c659f5e
Binary files /dev/null and b/static/fonts/inter-v12-latin-regular.woff2 differ
diff --git a/static/fonts/material-icons-round-v108-latin-regular.woff2 b/static/fonts/material-icons-round-v108-latin-regular.woff2
new file mode 100644
index 0000000..e9e305f
Binary files /dev/null and b/static/fonts/material-icons-round-v108-latin-regular.woff2 differ
diff --git a/static/search.html b/static/search.html
index 7fc519f..1524046 100644
--- a/static/search.html
+++ b/static/search.html
@@ -1,79 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TailsGo</title>
-    <link rel="stylesheet" type="text/css" href="./style.css">
-    <style>
-        body {
-            margin: 0;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            background-color: #f5f5f5; /* Change the background color to your preference */
-            font-family: Arial, sans-serif; /* Change the font family to your preference */
-        }
-
-        .search-container {
-            text-align: center;
-            background-color: #fff; /* Change the background color to your preference */
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow effect */
-        }
-
-        .search-container h1 {
-            font-size: 36px;
-            color: #333; /* Change the title color to your preference */
-            margin-bottom: 20px;
-        }
-
-        .search-container input[type="text"] {
-            width: 80%;
-            padding: 10px;
-            border: 1px solid #ccc; /* Add a border */
-            border-radius: 4px;
-            font-size: 16px;
-            margin-bottom: 20px;
-        }
-
-        .search-container .search-button-wrapper {
-            display: flex;
-            justify-content: center;
-        }
-
-        .search-container .search-button-wrapper button {
-            padding: 10px 20px;
-            margin: 0 10px;
-            font-size: 16px;
-            background-color: #007bff; /* Change the button background color to your preference */
-            color: #fff; /* Change the button text color to your preference */
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-
-        .search-container .search-button-wrapper button:hover {
-            background-color: #0056b3; /* Change the button hover background color to your preference */
-        }
-    </style>
+    <title>Search with TailsGo</title>
+    <link rel="stylesheet" href="/static/css/style.css">
 </head>
-
 <body>
+    <div class="settings-search-div settings-search-div-search">
+        <!-- Assuming you have specific styles for this in your CSS -->
+    </div>
     <form action="/search" class="search-container" method="post" autocomplete="off">
-        <h1>Tails<span class="X">Go</span></h1>
-        <input type="text" name="q" autofocus />
+        <h1>TailsGo</h1>
+        <div class="wrapper">
+            <input type="text" name="q" autofocus id="search-input" placeholder="Type to search..." />
+            <button id="search-wrapper-ico" class="material-icons-round" name="t" value="text" type="submit">search</button>
+            <a id="clearSearch" class="material-icons-round">close</a>
+        </div>
         <div class="search-button-wrapper">
-            <button name="t" type="submit">Search with TailsGo</button>
-            <button name="t" type="submit">Search images with TailsGo</button>
+            <button name="t" value="text" type="submit">Search Text</button>
+            <button name="t" value="image" type="submit">Search Images</button>
         </div>
     </form>
 </body>
-
 </html>
diff --git a/static/style.css b/static/style.css
deleted file mode 100644
index a7d6c29..0000000
--- a/static/style.css
+++ /dev/null
@@ -1,341 +0,0 @@
-body {
-    margin: 0;
-}
-
-html {
-    background-color: #1c1c1c;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 16px;
-}
-
-.hide {
-    display: none;
-}
-
-input,
-button {
-    outline: none;
-}
-
-.search-container {
-    text-align: center;
-    margin-top: 10%;
-}
-
-.search-container h1 {
-    font-size: 70px;
-    color: #F1F3F4;
-}
-
-.X {
-    color: #8ab4f8;
-}
-
-.search-container input {
-    width: 500px;
-    color: #F1F3F4;
-    background-color: #333333;
-    padding: 10px;
-    font-size: inherit;
-    font-family: sans-serif;
-    border: 1px solid #3C4043;
-    border-radius: 25px;
-}
-
-h3 {
-    color: #8ab4f8;
-    text-decoration: none;
-}
-
-h3:hover {
-    text-decoration: underline;
-}
-
-p {
-    color: #F1F3F4;
-}
-
-.results-search-container {
-    background-color: #161616;
-    width: 100%;
-    border-bottom: 1px solid #303134;
-    margin-bottom: 24px;
-}
-
-.results-search-container input {
-    width: 580px;
-    color: #fff;
-    position: relative;
-    left: 170px;
-    background-color: #333333;
-    padding: 10px;
-    font-size: inherit;
-    font-family: sans-serif;
-    border: 1px solid #3C4043;
-    border-radius: 25px;
-    margin-top: 14px;
-    margin-bottom: 16px;
-}
-
-.results {
-    position: relative;
-    left: 175px;
-    margin-top: 18px;
-    max-width: 581px;
-    word-wrap: break-word;
-    margin-bottom: 35px;
-}
-
-.search-button-wrapper button:hover {
-    border: 1px solid #5f6368;
-    cursor: pointer;
-}
-
-.search-button-wrapper button {
-    color: #F1F3F4;
-    background-color: #333333;
-    font-size: 14px;
-    border: 1px solid #333333;
-    border-radius: 4px;
-    padding: 13px 10px 13px 10px;
-    margin: 30px 60px 0px 60px;
-}
-
-.no-decoration {
-    text-decoration: none;
-    color: #F1F3F4;
-}
-
-.no-decoration:hover {
-    text-decoration: none;
-}
-
-.logomobile {
-    position: absolute;
-    margin-top: 0px;
-    top: 20px;
-    left: 38px;
-}
-
-.sub-search-button-wrapper button {
-    border: none;
-    background-color: inherit;
-    font-size: 15px;
-    margin-right: 14px;
-    color: #8ab4f8;
-}
-
-.sub-search-button-wrapper img {
-    vertical-align: middle;
-    margin-right: 5px;
-    width: 20px;
-}
-
-.sub-search-button-wrapper {
-    margin-left: 175px;
-    margin-bottom: 10px;
-}
-
-:root {
-    color-scheme: dark;
-}
-
-.fetched {
-    color: #999da2;
-    left: 175px;
-    position: relative;
-    font-size: 18px;
-    max-width: 580px;
-}
-
-.results a:visited h3 {
-    color: #bd93f9;
-}
-
-.results h3 {
-    font-size: 20px;
-    margin-top: 4px;
-}
-
-.results a,
-.results a:hover,
-.results a:visited {
-    text-decoration: none;
-    color: #999da2;
-    font-size: 14px;
-}
-
-.snip {
-    padding: 10px;
-    border: opacity 0;
-    width: 500px;
-    border-radius: 8px;
-    background: #282828;
-    color: #F1F3F4;
-    margin-left: 840px;
-    margin-top: 0px;
-    position: absolute;
-    font-size: 18px;
-}
-
-.snip a {
-    display: flex;
-    margin-top: 10px;
-    font-size: 14px;
-    color: #8ab4f8;
-    text-decoration: none;
-}
-
-.snip a:hover {
-    text-decoration: underline;
-}
-
-.snipp {
-    padding: 10px;
-    border-bottom: 1px solid #3C4043;
-    width: 500px;
-    background: inherit;
-    color: #F1F3F4;
-    margin-left: 170px;
-    margin-top: 0px;
-    position: relative;
-    font-size: 18px;
-    float: none;
-}
-
-.snipp a {
-    display: flex;
-    margin-top: 10px;
-    font-size: 14px;
-    color: #8ab4f8;
-    text-decoration: none;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 500px;
-}
-
-.snipp a:hover {
-    text-decoration: underline;
-}
-
-@media only screen and (max-width: 1320px) {
-    .snip {
-        position: relative;
-        float: none;
-        margin-left: 170px;
-    }
-}
-
-@media only screen and (max-width: 750px) {
-    .snip {
-        position: relative;
-        float: none;
-        max-width: 90%;
-        margin-left: 10px;
-        width: auto;
-        font-size: 16px;
-    }
-
-    .snipp {
-        position: relative;
-        float: none;
-        max-width: 90%;
-        margin-left: 10px;
-        width: auto;
-        font-size: 16px;
-    }
-
-    p {
-        font-size: 14px;
-    }
-
-    html {
-        font-size: 14px;
-    }
-
-    h3 {
-        font-size: 18px;
-    }
-
-    .results-search-container {
-        margin-left: auto;
-        margin-right: auto;
-        text-align: center;
-    }
-
-    .results-search-container input {
-        width: 80%;
-        position: relative;
-        left: 0px;
-        margin-top: 0px;
-        height: 20px;
-    }
-
-    .logomobile {
-        position: relative;
-        float: none;
-        margin-top: 0px;
-        margin-bottom: 0px;
-        margin-left: auto;
-        margin-right: auto;
-        padding: 10px;
-        font-size: 28px;
-        display: block;
-        margin-top: 0px;
-        top: 0px;
-        left: 0px;
-    }
-
-    .sub-search-button-wrapper {
-        margin: 0;
-        padding: 0;
-        display: flex;
-        align-items: baseline;
-        margin-bottom: 10px;
-    }
-
-    .sub-search-button-wrapper img {
-        margin: 0;
-        padding: 0;
-    }
-
-    .sub-search-button-wrapper button {
-        margin-left: 30px;
-        margin-right: auto;
-        padding: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .results {
-        left: 20px;
-        max-width: 90%;
-    }
-
-    .fetched {
-        left: 20px;
-        max-width: 90%;
-        font-size: 16px;
-    }
-
-    .search-container h1 {
-        font-size: 55px;
-    }
-
-    .search-container {
-        margin-top: 10%;
-        text-align: center;
-    }
-
-    .search-container input {
-        width: 80%;
-    }
-
-    .search-button-wrapper button {
-        display: table-row;
-        margin: 30px 0px 0px 0px;
-        width: 80%;
-    }
-}
\ No newline at end of file
diff --git a/templates/results.html b/templates/results.html
index 54fcbdf..d50250f 100644
--- a/templates/results.html
+++ b/templates/results.html
@@ -2,107 +2,32 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{.Query}} - Search Results</title>
-    <style>
-        body {
-            margin: 0;
-            padding: 0;
-            font-family: Arial, sans-serif; /* Change the font family to your preference */
-            background-color: #f5f5f5; /* Change the background color to your preference */
-        }
-
-        .results-search-container {
-            text-align: center;
-            background-color: #fff; /* Change the background color to your preference */
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow effect */
-            margin: 20px auto;
-            max-width: 600px; /* Adjust the max-width to your preference */
-        }
-
-        .results-search-container h1 {
-            font-size: 24px;
-            color: #333; /* Change the title color to your preference */
-            margin-bottom: 20px;
-        }
-
-        .results-search-container input[type="text"] {
-            width: calc(100% - 120px); /* Adjust the width to leave space for the button */
-            padding: 10px;
-            border: 1px solid #ccc; /* Add a border */
-            border-radius: 4px;
-            font-size: 16px;
-            margin-bottom: 20px;
-        }
-
-        .results-search-container .sub-search-button-wrapper {
-            display: flex;
-            justify-content: center;
-        }
-
-        .results-search-container .sub-search-button-wrapper button {
-            padding: 10px 20px;
-            margin: 0 10px;
-            font-size: 16px;
-            background-color: #007bff; /* Change the button background color to your preference */
-            color: #fff; /* Change the button text color to your preference */
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-
-        .results-search-container .sub-search-button-wrapper button:hover {
-            background-color: #0056b3; /* Change the button hover background color to your preference */
-        }
-
-        .fetched, .snip, .snipp, .results {
-            text-align: center;
-            margin-top: 20px;
-        }
-
-        .results a {
-            text-decoration: none;
-            color: #007bff; /* Change the link color to your preference */
-            font-weight: bold;
-        }
-
-        .results h3 {
-            font-size: 20px;
-            margin-top: 10px;
-            margin-bottom: 5px;
-        }
-
-        .results p {
-            font-size: 16px;
-            margin-bottom: 0;
-        }
-    </style>
+    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
 </head>
 <body>
-    <form action="/search" class="results-search-container" method="post" autocomplete="off">
-        <h1 class="logomobile"><a class="no-decoration" href="./">Tails<span class="X">Go</span></a></h1>
-        <input type="text" name="q" value="{{ .Query }}" />
-        <div class="sub-search-button-wrapper">
-            <button name="t"><img src="/static/searchicon.png" alt="text result" />General</button>
-        </div>
-    </form>
-    <!-- <h1>Search Results for "{{.Query}}"</h1> -->
-    
-    {{range .Results}}
-    <div>
-        <a href="{{.URL}}">{{.Header}}</a><br>
-        <span>{{.Description}}</span>
+    <div class="search-container">
+        <form action="/search" method="post" autocomplete="off">
+            <h1>TailsGo</h1>
+            <div class="wrapper">
+                <input type="text" name="q" value="{{ .Query }}" autofocus id="search-input" placeholder="Type to search..." />
+                <button id="search-wrapper-ico" class="material-icons-round" name="t" type="submit">search</button>
+                <!-- Include clear search icon if functionality is supported -->
+            </div>
+            <div class="search-button-wrapper">
+                <!-- Additional search options buttons if needed -->
+            </div>
+        </form>
     </div>
-    <br>
-    {{end}}
-    <!-- <p>{{.Fetched}}</p>
-    <p>{{.Snippet}}</p>
-    <p>{{.KnoRdesc}}</p>
-    <p>{{.ElapsedTime}}</p>
-    <p>{{.RdescLink}}</p> -->
+    <div class="results">
+        {{range .Results}}
+            <div class="result_item">
+                <a href="{{.URL}}"><h3>{{.Header}}</h3></a>
+                <p>{{.Description}}</p>
+            </div>
+        {{end}}
+    </div>
+    <!-- Additional content and structured elements go here -->
 </body>
 </html>